diff --git a/packages/docs/package.json b/packages/docs/package.json index 46bbbddbaad..70f043a9aed 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -26,7 +26,7 @@ "@vue/compiler-dom": "^3.5.25", "@vuelidate/core": "^2.0.3", "@vuelidate/validators": "^2.0.4", - "@vuetify/one": "^2.6.2", + "@vuetify/one": "^2.6.3", "algoliasearch": "^4.24.0", "fflate": "^0.8.2", "isomorphic-fetch": "^3.0.0", diff --git a/packages/docs/src/components/examples/Example.vue b/packages/docs/src/components/examples/Example.vue index 2071cb4b3e5..389e6bf66b7 100644 --- a/packages/docs/src/components/examples/Example.vue +++ b/packages/docs/src/components/examples/Example.vue @@ -108,6 +108,9 @@ // Utilities import { getExample } from 'virtual:examples' + // Types + import type { Component } from 'vue' + const { xs } = useDisplay() const { t } = useI18n() const user = useUserStore() @@ -141,7 +144,13 @@ const isEager = shallowRef(false) const copied = shallowRef(false) - const component = shallowRef() + type ExampleComponentType = Component & { + playgroundResources?: string + playgroundSetup?: string + exampleMeta?: string + } + + const component = shallowRef() const code = shallowRef() const ExampleComponent = computed(() => { return isError.value ? ExampleMissing : isLoaded.value ? component.value : null @@ -196,8 +205,21 @@ set: val => _theme.value = val, }) + const exampleMeta = computed>(() => { + const meta = component.value?.exampleMeta + + if (!meta) return {} + + try { + return JSON.parse(meta) + } catch (e) { + console.error('Invalid example meta for', props.file, e) + return {} + } + }) + const playgroundLink = computed(() => { - if (!isLoaded.value || isError.value) return null + if (!isLoaded.value || isError.value || !component.value) return null const resources = JSON.parse(component.value.playgroundResources || '{}') const setup = component.value.playgroundSetup?.trim() @@ -209,6 +231,10 @@ ) }) + const figmaLink = computed(() => { + return exampleMeta.value.figma + }) + const actions = computed(() => [ { icon: theme.value === 'dark' ? 'mdi-white-balance-sunny' : 'mdi-weather-night', @@ -222,6 +248,13 @@ target: '_blank', hide: xs.value, }, + { + icon: '$figma', + path: 'view-in-figma', + href: figmaLink.value, + target: '_blank', + hide: xs.value || !figmaLink.value, + }, { icon: 'mdi-github', path: 'view-in-github', diff --git a/packages/docs/src/examples/v-btn/misc-readonly.vue b/packages/docs/src/examples/v-btn/misc-readonly.vue index d235fe8aee4..0950b5bc928 100644 --- a/packages/docs/src/examples/v-btn/misc-readonly.vue +++ b/packages/docs/src/examples/v-btn/misc-readonly.vue @@ -70,3 +70,9 @@ const isSubscriber = shallowRef(false) + + + { + "figma": "https://www.figma.com/design/5f4g4pbbBsk9TTWX4Xvlx1/PRO-v3.0---Official-Vuetify-3-UI-Kit?node-id=1489-93848&t=igC9QPO7ZOgBrTij-4" + } + diff --git a/packages/docs/src/i18n/messages/en.json b/packages/docs/src/i18n/messages/en.json index b32dbe3cdb3..be282694613 100644 --- a/packages/docs/src/i18n/messages/en.json +++ b/packages/docs/src/i18n/messages/en.json @@ -138,6 +138,7 @@ "discord": "Discord", "done": "All done", "edit-in-playground": "Edit in Vuetify Playground", + "view-in-figma": "View in Figma", "edit-this-page": "Edit this page on", "edit": "Edit", "enable-banners": "Enable banners", diff --git a/packages/docs/vite.config.mts b/packages/docs/vite.config.mts index 61941e2ce2a..93f55d5331a 100644 --- a/packages/docs/vite.config.mts +++ b/packages/docs/vite.config.mts @@ -293,6 +293,7 @@ export default defineConfig(({ command, mode, isSsrBuild }) => { transform (code, id) { const type = id.includes('vue&type=playground-resources') ? 'playgroundResources' : id.includes('vue&type=playground-setup') ? 'playgroundSetup' + : id.includes('vue&type=example-meta') ? 'exampleMeta' : null if (!type) return diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index da42256740b..308580d91ab 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -282,8 +282,8 @@ importers: specifier: ^2.0.4 version: 2.0.4(vue@3.5.25(typescript@5.8.3)) '@vuetify/one': - specifier: ^2.6.2 - version: 2.6.2(@mdi/js@7.4.47(patch_hash=3c2a78b1509745df3a3100e3e59075dd87718e67632cc14dc64dd9ac34098f9f))(@vue/compiler-sfc@3.5.25)(lodash-es@4.17.21)(vite@7.2.4(@types/node@24.10.1)(sass-embedded@1.93.3)(sass@1.94.2)(terser@5.44.0)(yaml@2.8.1))(vue-router@4.6.3(vue@3.5.25(typescript@5.8.3)))(vue@3.5.25(typescript@5.8.3))(vuetify@packages+vuetify) + specifier: ^2.6.3 + version: 2.6.3(@mdi/js@7.4.47(patch_hash=3c2a78b1509745df3a3100e3e59075dd87718e67632cc14dc64dd9ac34098f9f))(@vue/compiler-sfc@3.5.25)(lodash-es@4.17.21)(vite@7.2.4(@types/node@24.10.1)(sass-embedded@1.93.3)(sass@1.94.2)(terser@5.44.0)(yaml@2.8.1))(vue-router@4.6.3(vue@3.5.25(typescript@5.8.3)))(vue@3.5.25(typescript@5.8.3))(vuetify@packages+vuetify) algoliasearch: specifier: ^4.24.0 version: 4.24.0 @@ -3395,8 +3395,8 @@ packages: vue: ^3.0.0 vuetify: ^3.0.0 - '@vuetify/one@2.6.2': - resolution: {integrity: sha512-wvx6M7Ipcnp6Nv4YUbLSaKWynj2NxRSxXJMfpl2m39Z6L2N+8UxrFUJBgb4k8HUQhE3qaQj4kfzREojzgb5Y8Q==} + '@vuetify/one@2.6.3': + resolution: {integrity: sha512-CePxzdlxwSQXXEkD5JCSmmqLrrkYFxsmIOdaiCjuT6+VCoXO77wBTCqytR1ksjxPuEkSumpuBEnwb6sCyvzt9Q==} peerDependencies: '@mdi/js': 7.4.47 lodash-es: ^4.17.21 @@ -11535,7 +11535,7 @@ snapshots: vue: 3.5.25(typescript@5.8.3) vuetify: link:packages/vuetify - '@vuetify/one@2.6.2(@mdi/js@7.4.47(patch_hash=3c2a78b1509745df3a3100e3e59075dd87718e67632cc14dc64dd9ac34098f9f))(@vue/compiler-sfc@3.5.25)(lodash-es@4.17.21)(vite@7.2.4(@types/node@24.10.1)(sass-embedded@1.93.3)(sass@1.94.2)(terser@5.44.0)(yaml@2.8.1))(vue-router@4.6.3(vue@3.5.25(typescript@5.8.3)))(vue@3.5.25(typescript@5.8.3))(vuetify@packages+vuetify)': + '@vuetify/one@2.6.3(@mdi/js@7.4.47(patch_hash=3c2a78b1509745df3a3100e3e59075dd87718e67632cc14dc64dd9ac34098f9f))(@vue/compiler-sfc@3.5.25)(lodash-es@4.17.21)(vite@7.2.4(@types/node@24.10.1)(sass-embedded@1.93.3)(sass@1.94.2)(terser@5.44.0)(yaml@2.8.1))(vue-router@4.6.3(vue@3.5.25(typescript@5.8.3)))(vue@3.5.25(typescript@5.8.3))(vuetify@packages+vuetify)': dependencies: '@mdi/js': 7.4.47(patch_hash=3c2a78b1509745df3a3100e3e59075dd87718e67632cc14dc64dd9ac34098f9f) lodash-es: 4.17.21