From f73e1ddaafbd8fcfeb6ee995d91ba81d8217d526 Mon Sep 17 00:00:00 2001
From: Roman Hrynevych <82209198+romanhrynevych@users.noreply.github.com>
Date: Fri, 30 Aug 2024 20:21:17 +0300
Subject: [PATCH] docs: add vertical Tabs example (#739)

* feat(docs): add vertical Tabs example and components for account/password management

* fix(TabsTrigger): wrap slot content in a span with truncate class for better text handling

* chore: build:registry
---
 apps/www/__registry__/index.ts                | 14 ++++
 apps/www/src/content/docs/components/tabs.md  |  6 ++
 .../default/example/TabsVerticalDemo.vue      | 78 +++++++++++++++++++
 .../lib/registry/default/ui/tabs/TabsList.vue |  2 +-
 .../registry/default/ui/tabs/TabsTrigger.vue  |  4 +-
 .../new-york/example/TabsVerticalDemo.vue     | 78 +++++++++++++++++++
 .../registry/new-york/ui/tabs/TabsList.vue    |  2 +-
 .../registry/new-york/ui/tabs/TabsTrigger.vue |  4 +-
 .../registry/styles/default/select.json       |  2 +-
 .../registry/styles/new-york/select.json      |  2 +-
 10 files changed, 186 insertions(+), 6 deletions(-)
 create mode 100644 apps/www/src/lib/registry/default/example/TabsVerticalDemo.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/TabsVerticalDemo.vue

diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
index 85383e9a..f1e80282 100644
--- a/apps/www/__registry__/index.ts
+++ b/apps/www/__registry__/index.ts
@@ -1053,6 +1053,13 @@ export const Index = {
       component: () => import("../src/lib/registry/default/example/TabsDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/TabsDemo.vue"],
     },
+    "TabsVerticalDemo": {
+      name: "TabsVerticalDemo",
+      type: "components:example",
+      registryDependencies: [],
+      component: () => import("../src/lib/registry/default/example/TabsVerticalDemo.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/TabsVerticalDemo.vue"],
+    },
     "TagsInputComboboxDemo": {
       name: "TagsInputComboboxDemo",
       type: "components:example",
@@ -2538,6 +2545,13 @@ export const Index = {
       component: () => import("../src/lib/registry/new-york/example/TabsDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/TabsDemo.vue"],
     },
+    "TabsVerticalDemo": {
+      name: "TabsVerticalDemo",
+      type: "components:example",
+      registryDependencies: [],
+      component: () => import("../src/lib/registry/new-york/example/TabsVerticalDemo.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/TabsVerticalDemo.vue"],
+    },
     "TagsInputComboboxDemo": {
       name: "TagsInputComboboxDemo",
       type: "components:example",
diff --git a/apps/www/src/content/docs/components/tabs.md b/apps/www/src/content/docs/components/tabs.md
index 416aee80..c0fcc1d9 100644
--- a/apps/www/src/content/docs/components/tabs.md
+++ b/apps/www/src/content/docs/components/tabs.md
@@ -39,3 +39,9 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
   </Tabs>
 </template>
 ```
+
+## Examples
+
+### Vertical
+
+<ComponentPreview name="TabsVerticalDemo" />
diff --git a/apps/www/src/lib/registry/default/example/TabsVerticalDemo.vue b/apps/www/src/lib/registry/default/example/TabsVerticalDemo.vue
new file mode 100644
index 00000000..d1462945
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/TabsVerticalDemo.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { Button } from '@/lib/registry/default/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/lib/registry/default/ui/card'
+import { Input } from '@/lib/registry/default/ui/input'
+import { Label } from '@/lib/registry/default/ui/label'
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from '@/lib/registry/default/ui/tabs'
+</script>
+
+<template>
+  <Tabs default-value="account" class="w-[400px]" orientation="vertical">
+    <TabsList class="grid w-full grid-cols-1">
+      <TabsTrigger value="account">
+        Accounts
+      </TabsTrigger>
+      <TabsTrigger value="password">
+        Password
+      </TabsTrigger>
+    </TabsList>
+    <TabsContent value="account">
+      <Card>
+        <CardHeader>
+          <CardTitle>Account</CardTitle>
+          <CardDescription>
+            Make changes to your account here. Click save when you're done.
+          </CardDescription>
+        </CardHeader>
+        <CardContent class="space-y-2">
+          <div class="space-y-1">
+            <Label for="name">Name</Label>
+            <Input id="name" default-value="Pedro Duarte" />
+          </div>
+          <div class="space-y-1">
+            <Label for="username">Username</Label>
+            <Input id="username" default-value="@peduarte" />
+          </div>
+        </CardContent>
+        <CardFooter>
+          <Button>Save changes</Button>
+        </CardFooter>
+      </Card>
+    </TabsContent>
+    <TabsContent value="password">
+      <Card>
+        <CardHeader>
+          <CardTitle>Password</CardTitle>
+          <CardDescription>
+            Change your password here. After saving, you'll be logged out.
+          </CardDescription>
+        </CardHeader>
+        <CardContent class="space-y-2">
+          <div class="space-y-1">
+            <Label for="current">Current password</Label>
+            <Input id="current" type="password" />
+          </div>
+          <div class="space-y-1">
+            <Label for="new">New password</Label>
+            <Input id="new" type="password" />
+          </div>
+        </CardContent>
+        <CardFooter>
+          <Button>Save password</Button>
+        </CardFooter>
+      </Card>
+    </TabsContent>
+  </Tabs>
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/tabs/TabsList.vue b/apps/www/src/lib/registry/default/ui/tabs/TabsList.vue
index 9644cdc3..b4ed62b0 100644
--- a/apps/www/src/lib/registry/default/ui/tabs/TabsList.vue
+++ b/apps/www/src/lib/registry/default/ui/tabs/TabsList.vue
@@ -16,7 +16,7 @@ const delegatedProps = computed(() => {
   <TabsList
     v-bind="delegatedProps"
     :class="cn(
-      'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
+      'inline-flex items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
       props.class,
     )"
   >
diff --git a/apps/www/src/lib/registry/default/ui/tabs/TabsTrigger.vue b/apps/www/src/lib/registry/default/ui/tabs/TabsTrigger.vue
index 5fa6748d..2b2616a9 100644
--- a/apps/www/src/lib/registry/default/ui/tabs/TabsTrigger.vue
+++ b/apps/www/src/lib/registry/default/ui/tabs/TabsTrigger.vue
@@ -22,6 +22,8 @@ const forwardedProps = useForwardProps(delegatedProps)
       props.class,
     )"
   >
-    <slot />
+    <span class="truncate">
+      <slot />
+    </span>
   </TabsTrigger>
 </template>
diff --git a/apps/www/src/lib/registry/new-york/example/TabsVerticalDemo.vue b/apps/www/src/lib/registry/new-york/example/TabsVerticalDemo.vue
new file mode 100644
index 00000000..7464971e
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/TabsVerticalDemo.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { Button } from '@/lib/registry/new-york/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/lib/registry/new-york/ui/card'
+import { Input } from '@/lib/registry/new-york/ui/input'
+import { Label } from '@/lib/registry/new-york/ui/label'
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from '@/lib/registry/new-york/ui/tabs'
+</script>
+
+<template>
+  <Tabs default-value="account" class="w-[400px]" orientation="vertical">
+    <TabsList class="grid w-full grid-cols-1">
+      <TabsTrigger value="account">
+        Account
+      </TabsTrigger>
+      <TabsTrigger value="password">
+        Password
+      </TabsTrigger>
+    </TabsList>
+    <TabsContent value="account">
+      <Card>
+        <CardHeader>
+          <CardTitle>Account</CardTitle>
+          <CardDescription>
+            Make changes to your account here. Click save when you're done.
+          </CardDescription>
+        </CardHeader>
+        <CardContent class="space-y-2">
+          <div class="space-y-1">
+            <Label for="name">Name</Label>
+            <Input id="name" default-value="Pedro Duarte" />
+          </div>
+          <div class="space-y-1">
+            <Label for="username">Username</Label>
+            <Input id="username" default-value="@peduarte" />
+          </div>
+        </CardContent>
+        <CardFooter>
+          <Button>Save changes</Button>
+        </CardFooter>
+      </Card>
+    </TabsContent>
+    <TabsContent value="password">
+      <Card>
+        <CardHeader>
+          <CardTitle>Password</CardTitle>
+          <CardDescription>
+            Change your password here. After saving, you'll be logged out.
+          </CardDescription>
+        </CardHeader>
+        <CardContent class="space-y-2">
+          <div class="space-y-1">
+            <Label for="current">Current password</Label>
+            <Input id="current" type="password" />
+          </div>
+          <div class="space-y-1">
+            <Label for="new">New password</Label>
+            <Input id="new" type="password" />
+          </div>
+        </CardContent>
+        <CardFooter>
+          <Button>Save password</Button>
+        </CardFooter>
+      </Card>
+    </TabsContent>
+  </Tabs>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/tabs/TabsList.vue b/apps/www/src/lib/registry/new-york/ui/tabs/TabsList.vue
index a21fc439..e98011e9 100644
--- a/apps/www/src/lib/registry/new-york/ui/tabs/TabsList.vue
+++ b/apps/www/src/lib/registry/new-york/ui/tabs/TabsList.vue
@@ -16,7 +16,7 @@ const delegatedProps = computed(() => {
   <TabsList
     v-bind="delegatedProps"
     :class="cn(
-      'inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',
+      'inline-flex items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',
       props.class,
     )"
   >
diff --git a/apps/www/src/lib/registry/new-york/ui/tabs/TabsTrigger.vue b/apps/www/src/lib/registry/new-york/ui/tabs/TabsTrigger.vue
index 0b24a3b7..7c4cbd33 100644
--- a/apps/www/src/lib/registry/new-york/ui/tabs/TabsTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/tabs/TabsTrigger.vue
@@ -22,6 +22,8 @@ const forwardedProps = useForwardProps(delegatedProps)
       props.class,
     )"
   >
-    <slot />
+    <span class="truncate">
+      <slot />
+    </span>
   </TabsTrigger>
 </template>
diff --git a/apps/www/src/public/registry/styles/default/select.json b/apps/www/src/public/registry/styles/default/select.json
index d4d4ca10..07330a42 100644
--- a/apps/www/src/public/registry/styles/default/select.json
+++ b/apps/www/src/public/registry/styles/default/select.json
@@ -43,7 +43,7 @@
     },
     {
       "name": "SelectTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'radix-vue'\nimport { ChevronDown } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',\n      props.class,\n    )\"\n  >\n    <slot />\n    <SelectIcon as-child>\n      <ChevronDown class=\"w-4 h-4 opacity-50\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'radix-vue'\nimport { ChevronDown } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start',\n      props.class,\n    )\"\n  >\n    <slot />\n    <SelectIcon as-child>\n      <ChevronDown class=\"w-4 h-4 opacity-50 shrink-0\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n"
     },
     {
       "name": "SelectValue.vue",
diff --git a/apps/www/src/public/registry/styles/new-york/select.json b/apps/www/src/public/registry/styles/new-york/select.json
index da8076e4..839aca6d 100644
--- a/apps/www/src/public/registry/styles/new-york/select.json
+++ b/apps/www/src/public/registry/styles/new-york/select.json
@@ -43,7 +43,7 @@
     },
     {
       "name": "SelectTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'radix-vue'\nimport { CaretSortIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',\n      props.class,\n    )\"\n  >\n    <slot />\n    <SelectIcon as-child>\n      <CaretSortIcon class=\"w-4 h-4 opacity-50\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'radix-vue'\nimport { CaretSortIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start',\n      props.class,\n    )\"\n  >\n    <slot />\n    <SelectIcon as-child>\n      <CaretSortIcon class=\"w-4 h-4 opacity-50 shrink-0\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n"
     },
     {
       "name": "SelectValue.vue",