feat(components): line style tabs

Signed-off-by: ZTL-UwU <[email protected]>
ZTL-UwU · Oct 18, 2024 · 08d06b6 · 08d06b6
1 parent 88fd7a6
commit 08d06b6
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 2 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -5,7 +5,7 @@
 
   // Disable the default formatter, use eslint instead
   "prettier.enable": false,
-  "editor.formatOnSave": true,
+  "editor.formatOnSave": false,
 
   // Auto fix
   "editor.codeActionsOnSave": {

diff --git a/components/content/Tabs.vue b/components/content/Tabs.vue
@@ -28,6 +28,39 @@
     </UiTabsContent>
   </UiTabs>
 
+  <UiTabs
+    v-else-if="variant === 'line'"
+    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)"
+          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"
+        >
+          <SmartIcon
+            v-if="icon(slot?.props)"
+            :name="icon(slot?.props)!"
+            class="mr-1.5 self-center"
+          />
+          {{ label(slot.props) }}
+        </UiTabsTrigger>
+      </UiTabsList>
+    </div>
+
+    <UiTabsContent
+      v-for="(slot, i) in $slots.default?.() ?? []"
+      :key="`${i}${label(slot.props)}`"
+      :value="label(slot.props)"
+      class="relative space-y-10"
+    >
+      <component :is="slot" />
+    </UiTabsContent>
+  </UiTabs>
+
   <UiCard
     v-else-if="variant === 'card'"
     class="[&:not(:first-child)]:mt-5"
@@ -82,7 +115,7 @@ const {
   padded = true,
   inStack = false,
 } = defineProps<{
-  variant?: 'separate' | 'card';
+  variant?: 'separate' | 'card' | 'line';
   padded?: boolean;
   inStack?: boolean;
 }>();

diff --git a/content/1.getting-started/3.writing/2.components.md b/content/1.getting-started/3.writing/2.components.md
@@ -776,6 +776,44 @@ The text `required` is configurable in [`main.fieldRequiredText`](/api/configura
   ```
 ::
 
+#### Line Style
+:badge[0.6.4]{variant="outline"}
+
+::code-group
+  ::div{label="Preview" class="md:p-4"}
+    ::tabs{variant="line"}
+      ::div{label="Preview" class="border flex min-h-[200px] w-full justify-center p-10 items-center rounded-lg shadow-sm"}
+        :badge[Badge]
+      ::
+      ::div{label="Code"}
+        ```tsx
+        import { Badge } from "@/components/ui/badge"
+
+        export function BadgeDemo() {
+          return <Badge>Badge</Badge>
+        }
+        ```
+      ::
+    ::
+  ::
+  ```mdc [Code]
+  ::tabs{variant="line"}
+    ::div{label="Preview" class="border flex min-h-[200px] w-full justify-center p-10 items-center rounded-lg shadow-sm"}
+      :badge[Badge]
+    ::
+    ::div{label="Code"}
+      ```tsx
+      import { Badge } from "@/components/ui/badge"
+
+      export function BadgeDemo() {
+        return <Badge>Badge</Badge>
+      }
+      ```
+    ::
+  ::
+  ```
+::
+
 ### Stack
 :badge[0.6.2]{variant="outline"}