docs: add Figma link support to examples

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",

packages/docs/src/components/examples/Example.vue

@@ -107,6 +107,7 @@
 
   // Utilities
   import { getExample } from 'virtual:examples'
+  import type { Component } from 'vue'
 
   const { xs } = useDisplay()
   const { t } = useI18n()
@@ -141,7 +142,13 @@
   const isEager = shallowRef(false)
   const copied = shallowRef(false)
 
-  const component = shallowRef()
+  type ExampleComponentType = Component & {
+    playgroundResources?: string
+    playgroundSetup?: string
+    exampleMeta?: string
+  }
+
+  const component = shallowRef<ExampleComponentType | undefined>()
   const code = shallowRef<string>()
   const ExampleComponent = computed(() => {
     return isError.value ? ExampleMissing : isLoaded.value ? component.value : null
@@ -196,8 +203,21 @@
     set: val => _theme.value = val,
   })
 
+  const exampleMeta = computed<Record<string, any>>(() => {
+    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 +229,10 @@
     )
   })
 
+  const figmaLink = computed(() => {
+    return exampleMeta.value.figma
+  })
+
   const actions = computed(() => [
     {
       icon: theme.value === 'dark' ? 'mdi-white-balance-sunny' : 'mdi-weather-night',
@@ -222,6 +246,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',

packages/docs/src/examples/v-btn/misc-readonly.vue

@@ -70,3 +70,9 @@
 
   const isSubscriber = shallowRef(false)
 </script>
+
+<example-meta lang="json">
+  {
+    "figma": "https://www.figma.com/design/5f4g4pbbBsk9TTWX4Xvlx1/PRO-v3.0---Official-Vuetify-3-UI-Kit?node-id=1489-93848&t=igC9QPO7ZOgBrTij-4"
+  }
+</example-meta>

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",

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