feat: synced tabs

Signed-off-by: ZTL-UwU <[email protected]>
ZTL-UwU · Nov 22, 2024 · c12bb0f · c12bb0f
1 parent 16e3f7d
commit c12bb0f
Show file tree

Hide file tree

Showing 7 changed files with 141 additions and 20 deletions.
diff --git a/components/content/Tabs.vue b/components/content/Tabs.vue
@@ -12,13 +12,15 @@ const {
   disableSearch = false,
   searchPlaceholder = 'Search Tab...',
   searchEmpty = 'No tab found.',
+  sync,
 } = defineProps<{
   variant?: 'separate' | 'card' | 'line' | 'combobox';
   padded?: boolean;
   inStack?: boolean;
   disableSearch?: boolean;
   searchPlaceholder?: string;
   searchEmpty?: string;
+  sync?: string;
 }>();
 
 const _slots = useSlots();
@@ -42,6 +44,7 @@ function render() {
       searchEmpty,
       searchPlaceholder,
       slotsData,
+      sync,
     },
     () => slots,
   );

diff --git a/components/content/TabsInner.vue b/components/content/TabsInner.vue
@@ -1,15 +1,14 @@
 <template>
   <UiTabs
     v-if="variant === 'separate'"
+    v-model="activeTabIndex"
     class="[&:not(:first-child)]:mt-5"
-    :default-value="label(($slots.default?.() ?? [])[0]?.props)"
   >
     <UiTabsList>
       <UiTabsTrigger
         v-for="(slot, i) in $slots.default?.() ?? []"
         :key="`${i}${label(slot.props)}`"
-        :value="label(slot.props)"
-        @mousedown.left="activeTabIndex = i"
+        :value="i"
       >
         <SmartIcon
           v-if="icon(slot?.props)"
@@ -32,17 +31,16 @@
 
   <UiTabs
     v-else-if="variant === 'line'"
+    v-model="activeTabIndex"
     class="relative mr-auto w-full [&:not(:first-child)]:mt-5"
-    :default-value="label(($slots.default?.() ?? [])[0]?.props)"
   >
     <div class="flex items-center justify-between pb-3">
       <UiTabsList class="h-9 w-full justify-start rounded-none border-b bg-transparent p-0">
         <UiTabsTrigger
           v-for="(slot, i) in $slots.default?.() ?? []"
           :key="`${i}${label(slot.props)}`"
-          :value="label(slot.props)"
+          :value="i"
           class="relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"
-          @mousedown.left="activeTabIndex = i"
         >
           <SmartIcon
             v-if="icon(slot?.props)"
@@ -182,17 +180,48 @@
 import { cn } from '@/lib/utils';
 import ScrollBar from '../ui/scroll-area/ScrollBar.vue';
 
-defineProps<{
+const { sync, slotsData } = defineProps<{
   slotsData: { label: string; index: number }[];
   variant?: 'separate' | 'card' | 'line' | 'combobox';
   padded?: boolean;
   inStack?: boolean;
   disableSearch?: boolean;
   searchPlaceholder?: string;
   searchEmpty?: string;
+  sync?: string;
 }>();
 
-const activeTabIndex = ref(0);
+const syncState = useCookie<{ scope: string; value?: string }[]>('tabs-sync-state', {
+  default: () => [],
+});
+
+const syncScopeIndex = computed(() => syncState.value.findIndex(x => x.scope === sync));
+
+const activeTabIndexData = ref(0);
+const activeTabIndex = computed<number>({
+  get: () => {
+    if (sync === undefined || syncScopeIndex.value === -1)
+      return activeTabIndexData.value;
+
+    for (const slot of slotsData) {
+      if (syncState.value[syncScopeIndex.value]?.value === slot.label)
+        return slot.index;
+    }
+    return activeTabIndexData.value;
+  },
+  set(index: number) {
+    if (sync === undefined) {
+      activeTabIndexData.value = index;
+      return;
+    }
+
+    if (syncScopeIndex.value === -1)
+      syncState.value.push({ scope: sync, value: undefined });
+
+    syncState.value[syncScopeIndex.value].value = slotsData[index].label;
+    activeTabIndexData.value = index;
+  },
+});
 
 const iconMap = new Map(Object.entries(useConfig().value.main.codeIcon));
 function icon(props: any) {

diff --git a/content/2.components/2.docs/button-link.md b/content/2.components/2.docs/button-link.md
@@ -1,9 +1,6 @@
 ---
 title: Button Link
 icon: lucide:external-link
-navBadges:
-  - value: New
-    type: lime
 badges:
   - value: Docus
     to: https://docus.dev/api/components#buttonlink

diff --git a/content/2.components/2.docs/shortcut.md b/content/2.components/2.docs/shortcut.md
@@ -1,9 +1,6 @@
 ---
 title: Shortcut
 icon: lucide:keyboard
-navBadges:
-  - value: New
-    type: lime
 badges:
   - value: Nuxt UI Pro
     to: https://ui.nuxt.com/pro/prose/shortcut

diff --git a/content/2.components/2.docs/stack.md b/content/2.components/2.docs/stack.md
@@ -1,9 +1,6 @@
 ---
 title: Stack
 icon: lucide:rows-3
-navBadges:
-  - value: New
-    type: lime
 badges:
   - value: Source
     icon: lucide:code

diff --git a/content/2.components/2.docs/tabs.md b/content/2.components/2.docs/tabs.md
@@ -1,6 +1,9 @@
 ---
 title: Tabs
 icon: lucide:table-2
+navBadges:
+  - value: Update
+    type: lime
 badges:
   - value: Nuxt UI Pro
     to: https://ui.nuxt.com/pro/prose/tabs
@@ -262,3 +265,101 @@ badges:
   ::
   ```
 ::
+
+### Synced Tabs
+:badge[0.8.0]{variant="outline"}
+
+::code-group
+  ::div{label="Preview" class="md:p-4"}
+    #### Scope 1
+    ::tabs{variant="card" sync="your-scope-name"}
+      ::div{label="Card Tab"}
+      ### This is a card-style tab
+      ::
+      ```ts [Code Tab]
+      console.log('Hello World!');
+      ```
+    ::
+    ::tabs{variant="card" sync="your-scope-name"}
+      ::div{label="Card Tab"}
+      ### This is a card-style tab
+      ::
+      ::div{label="Tab 2" icon="lucide:atom"}
+      This is Tab #2
+      ::
+      ```ts [Code Tab]
+      console.log('Hello World!');
+      ```
+    ::
+
+    #### Scope 2
+    ::tabs{variant="line" sync="scope2"}
+      ::div{label="Card Tab"}
+      ### This is a card-style tab
+      ::
+      ::div{label="Tab 2" icon="lucide:atom"}
+      This is Tab #2
+      ::
+      ```ts [Code Tab]
+      console.log('Hello World!');
+      ```
+    ::
+    ::tabs{variant="separate" sync="scope2"}
+      ::div{label="Card Tab"}
+      ### This is a card-style tab
+      ::
+      ::div{label="Tab 2" icon="lucide:atom"}
+      This is Tab #2
+      ::
+      ```ts [Code Tab]
+      console.log('Hello World!');
+      ```
+    ::
+  ::
+  ```mdc [Code]
+  #### Scope 1
+  ::tabs{variant="card" sync="your-scope-name"}
+    ::div{label="Card Tab"}
+    ### This is a card-style tab
+    ::
+    ```ts [Code Tab]
+    console.log('Hello World!');
+    ```
+  ::
+  ::tabs{variant="card" sync="your-scope-name"}
+    ::div{label="Card Tab"}
+    ### This is a card-style tab
+    ::
+    ::div{label="Tab 2" icon="lucide:atom"}
+    This is Tab #2
+    ::
+    ```ts [Code Tab]
+    console.log('Hello World!');
+    ```
+  ::
+
+  #### Scope 2
+  ::tabs{variant="line" sync="scope2"}
+    ::div{label="Card Tab"}
+    ### This is a card-style tab
+    ::
+    ::div{label="Tab 2" icon="lucide:atom"}
+    This is Tab #2
+    ::
+    ```ts [Code Tab]
+    console.log('Hello World!');
+    ```
+  ::
+  ::tabs{variant="separate" sync="scope2"}
+    ::div{label="Card Tab"}
+    ### This is a card-style tab
+    ::
+    ::div{label="Tab 2" icon="lucide:atom"}
+    This is Tab #2
+    ::
+    ```ts [Code Tab]
+    console.log('Hello World!');
+    ```
+  ::
+  ```
+::
diff --git a/content/2.components/3.page/team-card.md b/content/2.components/3.page/team-card.md
@@ -2,9 +2,6 @@
 title: Team Card
 icon: lucide:users
 description: ''
-navBadges:
-  - value: New
-    type: lime
 badges:
   - value: Source
     icon: lucide:code