feat(plugin-markdown-tab): use useId()

plugins/markdown/plugin-markdown-tab/src/client/components/CodeTabs.ts

@@ -1,7 +1,15 @@
 import type { RequiredSlot } from '@vuepress/helper/client'
 import { useStorage } from '@vueuse/core'
 import type { PropType, SlotsType, VNode } from 'vue'
-import { defineComponent, h, onMounted, ref, shallowRef, watch } from 'vue'
+import {
+  defineComponent,
+  h,
+  onMounted,
+  ref,
+  shallowRef,
+  useId,
+  watch,
+} from 'vue'
 
 import type { TabProps } from './Tabs.js'
 
@@ -35,16 +43,6 @@ export const CodeTabs = defineComponent({
       required: true,
     },
 
-    /**
-     * Code tab id
-     *
-     * 代码标签页 id
-     */
-    id: {
-      type: String,
-      required: true,
-    },
-
     /**
      * Tab id
      *
@@ -65,6 +63,8 @@ export const CodeTabs = defineComponent({
   }>,
 
   setup(props, { slots }) {
+    let ids = props.data.map(() => useId())
+
     // Index of current active item
     const activeIndex = ref(props.active)
 
@@ -118,6 +118,16 @@ export const CodeTabs = defineComponent({
       return props.active
     }
 
+    // only update ids in dev mode
+    if (__VUEPRESS_DEV__) {
+      watch(
+        () => props.data.length,
+        () => {
+          ids = props.data.map(() => useId())
+        },
+      )
+    }
+
     onMounted(() => {
       activeIndex.value = getInitialIndex()
 
@@ -152,7 +162,7 @@ export const CodeTabs = defineComponent({
                     },
                     'class': ['vp-code-tab-nav', { active: isActive }],
                     'role': 'tab',
-                    'aria-controls': `codetab-${props.id}-${index}`,
+                    'aria-controls': ids[index],
                     'aria-selected': isActive,
                     'onClick': () => {
                       activeIndex.value = index
@@ -173,7 +183,7 @@ export const CodeTabs = defineComponent({
                 'div',
                 {
                   'class': ['vp-code-tab', { active: isActive }],
-                  'id': `codetab-${props.id}-${index}`,
+                  'id': ids[index],
                   'role': 'tabpanel',
                   'aria-expanded': isActive,
                 },

plugins/markdown/plugin-markdown-tab/src/client/components/Tabs.ts

@@ -1,7 +1,15 @@
 import type { RequiredSlot } from '@vuepress/helper/client'
 import { useStorage } from '@vueuse/core'
 import type { PropType, SlotsType, VNode } from 'vue'
-import { defineComponent, h, onMounted, ref, shallowRef, watch } from 'vue'
+import {
+  defineComponent,
+  h,
+  onMounted,
+  ref,
+  shallowRef,
+  useId,
+  watch,
+} from 'vue'
 
 import '../styles/tabs.css'
 
@@ -37,16 +45,6 @@ export const Tabs = defineComponent({
       required: true,
     },
 
-    /**
-     * Tab id
-     *
-     * 标签页 id
-     */
-    id: {
-      type: String,
-      required: true,
-    },
-
     /**
      * Tab id
      *
@@ -67,6 +65,7 @@ export const Tabs = defineComponent({
   }>,
 
   setup(props, { slots }) {
+    let ids = props.data.map(() => useId())
     // Index of current active item
     const activeIndex = ref(props.active)
 
@@ -119,6 +118,16 @@ export const Tabs = defineComponent({
       return props.active
     }
 
+    // only update ids in dev mode
+    if (__VUEPRESS_DEV__) {
+      watch(
+        () => props.data.length,
+        () => {
+          ids = props.data.map(() => useId())
+        },
+      )
+    }
+
     onMounted(() => {
       activeIndex.value = getInitialIndex()
 
@@ -153,7 +162,7 @@ export const Tabs = defineComponent({
                     },
                     'class': ['vp-tab-nav', { active: isActive }],
                     'role': 'tab',
-                    'aria-controls': `tab-${props.id}-${index}`,
+                    'aria-controls': ids[index],
                     'aria-selected': isActive,
                     'onClick': () => {
                       activeIndex.value = index
@@ -174,7 +183,7 @@ export const Tabs = defineComponent({
                 'div',
                 {
                   'class': ['vp-tab', { active: isActive }],
-                  'id': `tab-${props.id}-${index}`,
+                  'id': ids[index],
                   'role': 'tabpanel',
                   'aria-expanded': isActive,
                 },

plugins/markdown/plugin-markdown-tab/src/node/codeTabs.ts

@@ -22,7 +22,7 @@ export const codeTabs: PluginSimple = (md) => {
         return { id }
       })
 
-      return `<CodeTabs id="${index}" :data='${stringifyProp(tabsData)}'${
+      return `<CodeTabs :data='${stringifyProp(tabsData)}'${
         active === -1 ? '' : ` :active="${active}"`
       }${
         // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access

plugins/markdown/plugin-markdown-tab/src/node/tabs.ts

@@ -23,7 +23,7 @@ export const tabs: PluginSimple = (md) => {
       })
 
       return `\
-<Tabs id="${index}" :data='${stringifyProp(tabsData)}'${
+<Tabs :data='${stringifyProp(tabsData)}'${
         active === -1 ? '' : ` :active="${active}"`
       }${
         // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access

plugins/markdown/plugin-markdown-tab/tests/node/__snapshots__/codeTabs.spec.ts.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`code tabs > Should render multiple block 1`] = `
-"<CodeTabs id="0" :data='[{"id":"js"},{"id":"ts"}]'>
+"<CodeTabs :data='[{"id":"js"},{"id":"ts"}]'>
 <template #title0="{ value, isActive }">js</template>
 <template #title1="{ value, isActive }">ts</template>
 <template #tab0="{ value, isActive }">
@@ -17,7 +17,7 @@ exports[`code tabs > Should render multiple block 1`] = `
 `;
 
 exports[`code tabs > Should render multiple block 2`] = `
-"<CodeTabs id="0" :data='[{"id":"js"},{"id":"ts"}]'>
+"<CodeTabs :data='[{"id":"js"},{"id":"ts"}]'>
 <template #title0="{ value, isActive }">js</template>
 <template #title1="{ value, isActive }">ts</template>
 <template #tab0="{ value, isActive }">
@@ -33,7 +33,7 @@ exports[`code tabs > Should render multiple block 2`] = `
 `;
 
 exports[`code tabs > Should render single block 1`] = `
-"<CodeTabs id="0" :data='[{"id":"js"}]'>
+"<CodeTabs :data='[{"id":"js"}]'>
 <template #title0="{ value, isActive }">js</template>
 <template #tab0="{ value, isActive }">
 <pre><code class="language-js">const a = 1;
@@ -44,7 +44,7 @@ exports[`code tabs > Should render single block 1`] = `
 `;
 
 exports[`code tabs > Should render single block 2`] = `
-"<CodeTabs id="0" :data='[{"id":"js"}]'>
+"<CodeTabs :data='[{"id":"js"}]'>
 <template #title0="{ value, isActive }">js</template>
 <template #tab0="{ value, isActive }">
 <pre><code class="language-js">const a = 1;
@@ -55,7 +55,7 @@ exports[`code tabs > Should render single block 2`] = `
 `;
 
 exports[`code tabs > Should support active 1`] = `
-"<CodeTabs id="0" :data='[{"id":"js"}]' :active="0">
+"<CodeTabs :data='[{"id":"js"}]' :active="0">
 <template #title0="{ value, isActive }">js</template>
 <template #tab0="{ value, isActive }">
 <pre><code class="language-js">const a = 1;
@@ -66,7 +66,7 @@ exports[`code tabs > Should support active 1`] = `
 `;
 
 exports[`code tabs > Should support active 2`] = `
-"<CodeTabs id="0" :data='[{"id":"js"}]' :active="0">
+"<CodeTabs :data='[{"id":"js"}]' :active="0">
 <template #title0="{ value, isActive }">js</template>
 <template #tab0="{ value, isActive }">
 <pre><code class="language-js">const a = 1;
@@ -77,7 +77,7 @@ exports[`code tabs > Should support active 2`] = `
 `;
 
 exports[`code tabs > Should support active 3`] = `
-"<CodeTabs id="0" :data='[{"id":"js"},{"id":"ts"}]' :active="1">
+"<CodeTabs :data='[{"id":"js"},{"id":"ts"}]' :active="1">
 <template #title0="{ value, isActive }">js</template>
 <template #title1="{ value, isActive }">ts</template>
 <template #tab0="{ value, isActive }">
@@ -93,7 +93,7 @@ exports[`code tabs > Should support active 3`] = `
 `;
 
 exports[`code tabs > Should support active 4`] = `
-"<CodeTabs id="0" :data='[{"id":"js"},{"id":"ts"}]' :active="1">
+"<CodeTabs :data='[{"id":"js"},{"id":"ts"}]' :active="1">
 <template #title0="{ value, isActive }">js</template>
 <template #title1="{ value, isActive }">ts</template>
 <template #tab0="{ value, isActive }">
@@ -109,7 +109,7 @@ exports[`code tabs > Should support active 4`] = `
 `;
 
 exports[`code tabs > Should support id 1`] = `
-"<CodeTabs id="0" :data='[{"id":"js"}]' tab-id="event">
+"<CodeTabs :data='[{"id":"js"}]' tab-id="event">
 <template #title0="{ value, isActive }">js</template>
 <template #tab0="{ value, isActive }">
 <pre><code class="language-js">const a = 1;
@@ -120,7 +120,7 @@ exports[`code tabs > Should support id 1`] = `
 `;
 
 exports[`code tabs > Should support id 2`] = `
-"<CodeTabs id="0" :data='[{"id":"js"}]' tab-id="event-id">
+"<CodeTabs :data='[{"id":"js"}]' tab-id="event-id">
 <template #title0="{ value, isActive }">js</template>
 <template #tab0="{ value, isActive }">
 <pre><code class="language-js">const a = 1;
@@ -131,7 +131,7 @@ exports[`code tabs > Should support id 2`] = `
 `;
 
 exports[`code tabs > Should support id 3`] = `
-"<CodeTabs id="0" :data='[{"id":"js"}]' tab-id="id with space">
+"<CodeTabs :data='[{"id":"js"}]' tab-id="id with space">
 <template #title0="{ value, isActive }">js</template>
 <template #tab0="{ value, isActive }">
 <pre><code class="language-js">const a = 1;
@@ -142,7 +142,7 @@ exports[`code tabs > Should support id 3`] = `
 `;
 
 exports[`code tabs > Should support id 4`] = `
-"<CodeTabs id="0" :data='[{"id":"js"}]' tab-id="id starts and having space in the end">
+"<CodeTabs :data='[{"id":"js"}]' tab-id="id starts and having space in the end">
 <template #title0="{ value, isActive }">js</template>
 <template #tab0="{ value, isActive }">
 <pre><code class="language-js">const a = 1;
@@ -153,7 +153,7 @@ exports[`code tabs > Should support id 4`] = `
 `;
 
 exports[`code tabs > Should support value 1`] = `
-"<CodeTabs id="0" :data='[{"id":"javascript"}]'>
+"<CodeTabs :data='[{"id":"javascript"}]'>
 <template #title0="{ value, isActive }">js</template>
 <template #tab0="{ value, isActive }">
 <pre><code class="language-js">const a = 1;
@@ -164,7 +164,7 @@ exports[`code tabs > Should support value 1`] = `
 `;
 
 exports[`code tabs > Should support value 2`] = `
-"<CodeTabs id="0" :data='[{"id":"javascript"}]' :active="0">
+"<CodeTabs :data='[{"id":"javascript"}]' :active="0">
 <template #title0="{ value, isActive }">js</template>
 <template #tab0="{ value, isActive }">
 <pre><code class="language-js">const a = 1;
@@ -175,7 +175,7 @@ exports[`code tabs > Should support value 2`] = `
 `;
 
 exports[`code tabs > Should support value 3`] = `
-"<CodeTabs id="0" :data='[{"id":"js"},{"id":"typescript"}]' :active="1">
+"<CodeTabs :data='[{"id":"js"},{"id":"typescript"}]' :active="1">
 <template #title0="{ value, isActive }">js</template>
 <template #title1="{ value, isActive }">ts</template>
 <template #tab0="{ value, isActive }">
@@ -191,7 +191,7 @@ exports[`code tabs > Should support value 3`] = `
 `;
 
 exports[`code tabs > Should support value 4`] = `
-"<CodeTabs id="0" :data='[{"id":"javascript"},{"id":"typescript"}]' :active="1">
+"<CodeTabs :data='[{"id":"javascript"},{"id":"typescript"}]' :active="1">
 <template #title0="{ value, isActive }">js</template>
 <template #title1="{ value, isActive }">ts</template>
 <template #tab0="{ value, isActive }">
@@ -207,7 +207,7 @@ exports[`code tabs > Should support value 4`] = `
 `;
 
 exports[`code tabs > Should work with code import 1`] = `
-"<CodeTabs id="0" :data='[{"id":"js"},{"id":"ts"}]' :active="1">
+"<CodeTabs :data='[{"id":"js"},{"id":"ts"}]' :active="1">
 <template #title0="{ value, isActive }">js</template>
 <template #title1="{ value, isActive }">ts</template>
 <template #tab0="{ value, isActive }">
@@ -222,7 +222,7 @@ exports[`code tabs > Should work with code import 1`] = `
 `;
 
 exports[`code tabs > should ignore other items 1`] = `
-"<CodeTabs id="0" :data='[{"id":"js"}]' :active="0">
+"<CodeTabs :data='[{"id":"js"}]' :active="0">
 <template #title0="{ value, isActive }">js</template>
 <template #tab0="{ value, isActive }">
 <pre><code class="language-js">const a = 1;
@@ -233,7 +233,7 @@ exports[`code tabs > should ignore other items 1`] = `
 `;
 
 exports[`code tabs > should ignore other items 2`] = `
-"<CodeTabs id="0" :data='[{"id":"js"}]' :active="0">
+"<CodeTabs :data='[{"id":"js"}]' :active="0">
 <template #title0="{ value, isActive }">js</template>
 <template #tab0="{ value, isActive }">
 <pre><code class="language-js">const a = 1;
@@ -244,7 +244,7 @@ exports[`code tabs > should ignore other items 2`] = `
 `;
 
 exports[`code tabs > should ignore other items 3`] = `
-"<CodeTabs id="0" :data='[{"id":"js"},{"id":"ts"}]' :active="1">
+"<CodeTabs :data='[{"id":"js"},{"id":"ts"}]' :active="1">
 <template #title0="{ value, isActive }">js</template>
 <template #title1="{ value, isActive }">ts</template>
 <template #tab0="{ value, isActive }">
@@ -260,7 +260,7 @@ exports[`code tabs > should ignore other items 3`] = `
 `;
 
 exports[`code tabs > should ignore other items 4`] = `
-"<CodeTabs id="0" :data='[{"id":"js"},{"id":"ts"}]' :active="1">
+"<CodeTabs :data='[{"id":"js"},{"id":"ts"}]' :active="1">
 <template #title0="{ value, isActive }">js</template>
 <template #title1="{ value, isActive }">ts</template>
 <template #tab0="{ value, isActive }">