From c06384a757fa101393507eb925e6b77776da0bb4 Mon Sep 17 00:00:00 2001
From: ZTL-UwU <zhangtianli2006@163.com>
Date: Mon, 3 Jun 2024 18:29:46 +0800
Subject: [PATCH] feat(components): tabs

Signed-off-by: ZTL-UwU <zhangtianli2006@163.com>
---
 components/content/CodeGroup.vue              | 110 +++++++-----------
 components/content/CodeGroupHeader.vue        |  49 --------
 components/content/Preview.vue                |   2 +-
 components/content/ProseCode.vue              |   2 +-
 components/content/Tabs.vue                   |  25 ++++
 components/ui/tabs/TabsList.vue               |   2 +-
 components/ui/tabs/TabsTrigger.vue            |   2 +-
 .../3.writing/2.components.md                 |  93 +++++++++++++++
 package.json                                  |   2 +-
 9 files changed, 168 insertions(+), 119 deletions(-)
 delete mode 100644 components/content/CodeGroupHeader.vue
 create mode 100644 components/content/Tabs.vue

diff --git a/components/content/CodeGroup.vue b/components/content/CodeGroup.vue
index 81bb4c0d..4e719944 100644
--- a/components/content/CodeGroup.vue
+++ b/components/content/CodeGroup.vue
@@ -1,73 +1,53 @@
 <template>
-  <render class="[&:not(:first-child)]:mt-5" />
+  <UiCard class="[&:not(:first-child)]:mt-5">
+    <UiScrollArea>
+      <div class="border-b p-0.5 flex text-sm relative overflow-x-auto">
+        <div class="flex p-1">
+          <div
+            v-for="(slot, i) in ($slots.default?.() ?? [])"
+            :key="`${i}${slot?.props?.filename}`"
+            :value="slot?.props?.filename"
+            class="flex px-3 py-1.5 rounded-md text-muted-foreground transition-all duration-75 cursor-pointer"
+            :class="[activeTabIndex === i && 'bg-muted text-primary']"
+            @mousedown.left="activeTabIndex = i"
+          >
+            <Icon
+              v-if="getIcon(slot?.props?.filename, slot?.props?.language)"
+              :name="getIcon(slot?.props?.filename, slot?.props?.language)!"
+              class="self-center mr-1.5"
+            />
+            {{ slot?.props?.filename }}
+          </div>
+        </div>
+        <CodeCopy
+          v-if="selected?.props?.code && selected?.type !== 'preview'"
+          class="self-center ml-auto mr-3 pl-2"
+          :code="selected.props.code"
+        />
+      </div>
+      <ScrollBar orientation="horizontal" />
+    </UiScrollArea>
+
+    <div
+      v-for="(slot, i) in $slots.default?.() ?? []"
+      v-show="activeTabIndex === i"
+      :key="`${i}${slot?.props?.filename}`"
+      :value="slot?.props?.filename"
+      class="mt-0"
+    >
+      <component :is="slot" :in-group="true" />
+    </div>
+  </UiCard>
 </template>
 
 <script setup lang="ts">
-import CodeGroupHeader from './CodeGroupHeader.vue';
-import { Card as UiCard } from '@/components/ui/card/index';
-
-const _slots = useSlots();
 const activeTabIndex = ref(0);
+const selected = computed(() => {
+  return useSlots().default?.()[activeTabIndex.value];
+});
 
-function isTag(slot: any, tag: string) {
-  return slot.type && slot.type.tag && slot.type.tag === tag;
-}
-
-function checkTag(slot: any) {
-  return isTag(slot, 'code-block') || isTag(slot, 'code') || isTag(slot, 'pre') || isTag(slot, 'preview');
-}
-
-function onChangeActiveTab(index: number) {
-  activeTabIndex.value = index;
-}
-
-function render() {
-  const _slotsDefault = _slots?.default?.() || [];
-  const tabs = _slotsDefault
-    .filter(slot => checkTag(slot))
-    .map((slot, index) => {
-      return {
-        label: slot?.props?.filename || slot?.props?.label || `${index}`,
-        language: slot?.props?.language || null,
-        code: slot?.props?.code || '',
-      };
-    });
-
-  return h(
-    UiCard,
-    () => [
-      h(
-        CodeGroupHeader,
-        {
-          'activeTabIndex': activeTabIndex.value,
-          tabs,
-          'onUpdate:activeTabIndex': onChangeActiveTab,
-        },
-      ),
-      h(
-        'div',
-        _slotsDefault.map((slot, index) => {
-          if (slot.props && checkTag(slot))
-            slot.props.inGroup = true;
-          return h(
-            'div',
-            {
-              style: {
-                display: index === activeTabIndex.value ? 'block' : 'none',
-              },
-            },
-            [
-              checkTag(slot)
-                ? slot
-                : h(
-                  'div',
-                  [(slot.children as any)?.default?.() || h('div')],
-                ),
-            ],
-          );
-        }),
-      ),
-    ],
-  );
+const iconMap = new Map(Object.entries(useConfig().value.main.codeIcon));
+function getIcon(filename: string, language: string) {
+  return iconMap.get(filename?.toLowerCase()) || iconMap.get(language);
 }
 </script>
diff --git a/components/content/CodeGroupHeader.vue b/components/content/CodeGroupHeader.vue
deleted file mode 100644
index 8248dda0..00000000
--- a/components/content/CodeGroupHeader.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<template>
-  <UiScrollArea>
-    <div class="border-b p-0.5 flex text-sm relative overflow-x-auto">
-      <div v-if="tabs" class="flex p-1">
-        <div
-          v-for="({ label, language }, i) in tabs"
-          :key="`${i}${label}`"
-          :value="label"
-          class="flex px-3 py-1.5 rounded-md text-muted-foreground transition-all duration-75 cursor-pointer"
-          :class="[activeTabIndex === i && 'bg-muted text-primary']"
-          @mousedown.left="updateTabs(i)"
-        >
-          <Icon v-if="getIcon(label, language)" :name="getIcon(label, language)!" class="self-center mr-1.5" />
-          {{ label }}
-        </div>
-      </div>
-      <CodeCopy v-show="selected.label !== 'Preview'" class="self-center ml-auto mr-3 pl-2" :code="selected.code" />
-    </div>
-    <ScrollBar orientation="horizontal" />
-  </UiScrollArea>
-  <slot name="footer" />
-</template>
-
-<script setup lang="ts">
-import ScrollBar from '../ui/scroll-area/ScrollBar.vue';
-
-const props = defineProps<{
-  tabs: ({
-    label: string;
-    language: string;
-    code: string;
-  })[];
-  activeTabIndex: number;
-}>();
-
-const emit = defineEmits(['update:activeTabIndex']);
-const selected = computed(() => {
-  return props.tabs[props.activeTabIndex];
-});
-
-function updateTabs(index: number) {
-  emit('update:activeTabIndex', index);
-}
-
-const iconMap = new Map(Object.entries(useConfig().value.main.codeIcon));
-function getIcon(label: string, language: string) {
-  return iconMap.get(label?.toLowerCase()) || iconMap.get(language);
-}
-</script>
diff --git a/components/content/Preview.vue b/components/content/Preview.vue
index 76f7fab0..096d091a 100644
--- a/components/content/Preview.vue
+++ b/components/content/Preview.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="p-3 bg-muted/20">
+  <div class="p-3">
     <slot />
   </div>
 </template>
diff --git a/components/content/ProseCode.vue b/components/content/ProseCode.vue
index 3b5ce28b..212d1418 100644
--- a/components/content/ProseCode.vue
+++ b/components/content/ProseCode.vue
@@ -1,6 +1,6 @@
 <template>
   <UiCard
-    class="[&:not(:first-child)]:mt-5 mb-5 overflow-hidden"
+    class="[&:not(:first-child)]:mt-5 [&:not(:last-child)]:mb-5 overflow-hidden"
     :class="[inGroup && 'rounded-t-none border-none mb-0']"
   >
     <div v-if="!inGroup && filename" class="p-3 border-b flex text-sm font-mono">
diff --git a/components/content/Tabs.vue b/components/content/Tabs.vue
new file mode 100644
index 00000000..f366e241
--- /dev/null
+++ b/components/content/Tabs.vue
@@ -0,0 +1,25 @@
+<template>
+  <UiTabs
+    class="[&:not(:first-child)]:mt-5"
+    :default-value="($slots.default?.() ?? [])[0]?.props?.label"
+  >
+    <UiTabsList>
+      <UiTabsTrigger
+        v-for="(slot, i) in $slots.default?.() ?? []"
+        :key="`${i}${slot?.props?.label}`"
+        :value="slot?.props?.label"
+      >
+        <Icon v-if="slot?.props?.icon" :name="slot?.props?.icon" class="mr-1" />
+        {{ slot?.props?.label }}
+      </UiTabsTrigger>
+    </UiTabsList>
+
+    <UiTabsContent
+      v-for="(slot, i) in $slots.default?.() ?? []"
+      :key="`${i}${slot?.props?.label}`"
+      :value="slot?.props?.label"
+    >
+      <component :is="slot" />
+    </UiTabsContent>
+  </UiTabs>
+</template>
diff --git a/components/ui/tabs/TabsList.vue b/components/ui/tabs/TabsList.vue
index 5862caf0..0f138ffc 100644
--- a/components/ui/tabs/TabsList.vue
+++ b/components/ui/tabs/TabsList.vue
@@ -2,7 +2,7 @@
   <TabsList
     v-bind="delegatedProps"
     :class="cn(
-      'inline-flex h-10 items-center justify-center rounded-md  p-1 text-muted-foreground',
+      'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
       props.class,
     )"
   >
diff --git a/components/ui/tabs/TabsTrigger.vue b/components/ui/tabs/TabsTrigger.vue
index 03d8f753..30b7e9e9 100644
--- a/components/ui/tabs/TabsTrigger.vue
+++ b/components/ui/tabs/TabsTrigger.vue
@@ -2,7 +2,7 @@
   <TabsTrigger
     v-bind="forwardedProps"
     :class="cn(
-      'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-muted data-[state=active]:text-foreground',
+      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
       props.class,
     )"
   >
diff --git a/content/1.getting-started/3.writing/2.components.md b/content/1.getting-started/3.writing/2.components.md
index d1a241e8..a2557d89 100644
--- a/content/1.getting-started/3.writing/2.components.md
+++ b/content/1.getting-started/3.writing/2.components.md
@@ -573,6 +573,99 @@ npm i -D @iconify-json/collection-name
   ```
 ::
 
+### Tabs
+
+:badge[Nuxt UI Pro]{variant="outline" to="https://ui.nuxt.com/pro/prose/tabs" target="_blank"}
+
+::code-group
+  ::preview{filename="Preview"}
+    ::tabs
+      ::div{label="PostgreSQL" icon="lucide:database"}
+      ### PostgreSQL column types
+
+      ```ts
+      import { integer, pgTable } from 'drizzle-orm/pg-core';
+
+      export const table = pgTable('table', {
+        int: integer('int')
+      });
+      ```
+      ::
+      ::div{label="MySQL"}
+      ### MySQL column types
+
+      ```ts
+      import { int, mysqlTable } from 'drizzle-orm/mysql-core';
+
+      const table = mysqlTable('table', {
+        int: int('int')
+      });
+      ```
+      ::
+      ::div{label="SQLite"}
+      ### SQLite column types
+
+      ```ts
+      import { integer, sqliteTable } from 'drizzle-orm/sqlite-core';
+
+      const table = sqliteTable('table', {
+        id: integer('id')
+      });
+
+      // you can customize integer mode to be number, boolean, timestamp, timestamp_ms
+      integer('id', { mode: 'number' });
+      integer('id', { mode: 'boolean' });
+      integer('id', { mode: 'timestamp_ms' });
+      integer('id', { mode: 'timestamp' }); // Date
+      ```
+      ::
+    ::
+  ::
+  ```mdc [Code]
+  ::tabs
+    ::div{label="PostgreSQL" icon="lucide:database"}
+    ### PostgreSQL column types
+
+    ```ts
+    import { integer, pgTable } from 'drizzle-orm/pg-core';
+
+    export const table = pgTable('table', {
+      int: integer('int')
+    });
+    ```
+    ::
+    ::div{label="MySQL"}
+    ### MySQL column types
+
+    ```ts
+    import { int, mysqlTable } from 'drizzle-orm/mysql-core';
+
+    const table = mysqlTable('table', {
+      int: int('int')
+    });
+    ```
+    ::
+    ::div{label="SQLite"}
+    ### SQLite column types
+
+    ```ts
+    import { integer, sqliteTable } from 'drizzle-orm/sqlite-core';
+
+    const table = sqliteTable('table', {
+      id: integer('id')
+    });
+
+    // you can customize integer mode to be number, boolean, timestamp, timestamp_ms
+    integer('id', { mode: 'number' });
+    integer('id', { mode: 'boolean' });
+    integer('id', { mode: 'timestamp_ms' });
+    integer('id', { mode: 'timestamp' }); // Date
+    ```
+    ::
+  ::
+  ```
+::
+
 ## Landing Page Components
 
 ### Hero
diff --git a/package.json b/package.json
index 6017c739..30204037 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "shadcn-docs-nuxt",
   "type": "module",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "author": "Tony Zhang <zhangtianli2006@gmail.com>",
   "license": "MIT",
   "homepage": "https://shadcn-docs-nuxt.vercel.app/",