feat(Tabs): new component (#450)

docs/components/content/examples/TabsExampleBasic.vue

@@ -0,0 +1,17 @@
+<script setup>
+const items = [{
+  label: 'Tab1',
+  content: 'This is the content shown for Tab1'
+}, {
+  label: 'Tab2',
+  disabled: true,
+  content: 'And, this is the content for Tab2'
+}, {
+  label: 'Tab3',
+  content: 'Finally, this is the content for Tab3'
+}]
+</script>
+
+<template>
+  <UTabs :items="items" />
+</template>

docs/components/content/examples/TabsExampleCard.vue

@@ -0,0 +1,17 @@
+<script setup>
+const items = [{
+  label: 'Tab1',
+  content: 'This is the content shown for Tab1'
+}, {
+  label: 'Tab2',
+  disabled: true,
+  content: 'And, this is the content for Tab2'
+}, {
+  label: 'Tab3',
+  content: 'Finally, this is the content for Tab3'
+}]
+</script>
+
+<template>
+  <UTabs :items="items" />
+</template>

docs/components/content/examples/TabsExampleDefaultSlot.vue

@@ -0,0 +1,29 @@
+<script setup>
+const items = [{
+  label: 'Getting Started',
+  icon: 'i-heroicons-information-circle',
+  content: 'This is the content shown for Tab1'
+}, {
+  label: 'Installation',
+  icon: 'i-heroicons-arrow-down-tray',
+  content: 'And, this is the content for Tab2'
+}, {
+  label: 'Theming',
+  icon: 'i-heroicons-eye-dropper',
+  content: 'Finally, this is the content for Tab3'
+}]
+</script>
+
+<template>
+  <UTabs :items="items" class="w-full">
+    <template #default="{ item, index, selected }">
+      <div class="flex items-center gap-2 relative truncate">
+        <UIcon :name="item.icon" class="w-4 h-4 flex-shrink-0" />
+
+        <span class="truncate">{{ index + 1 }}. {{ item.label }}</span>
+
+        <span v-if="selected" class="absolute -right-4 w-2 h-2 rounded-full bg-primary-500 dark:bg-primary-400" />
+      </div>
+    </template>
+  </UTabs>
+</template>

docs/components/content/examples/TabsExampleIndex.vue

@@ -0,0 +1,16 @@
+<script setup>
+const items = [{
+  label: 'Tab1',
+  content: 'This is the content shown for Tab1'
+}, {
+  label: 'Tab2',
+  content: 'And, this is the content for Tab2'
+}, {
+  label: 'Tab3',
+  content: 'Finally, this is the content for Tab3'
+}]
+</script>
+
+<template>
+  <UTabs :items="items" :default-index="2" />
+</template>

docs/components/content/examples/TabsExampleItemCustomSlot.vue

@@ -0,0 +1,76 @@
+<script setup>
+const items = [{
+  slot: 'account',
+  label: 'Account'
+}, {
+  slot: 'password',
+  label: 'Password'
+}]
+
+const accountForm = reactive({ name: 'Benjamin', username: 'benjamincanac'  })
+const passwordForm = reactive({ currentPassword: '', newPassword: '' })
+
+function onSubmitAccount () {
+  console.log('Submitted form:', accountForm)
+}
+
+function onSubmitPassword () {
+  console.log('Submitted form:', passwordForm)
+}
+</script>
+
+<template>
+  <UTabs :items="items" class="w-full">
+    <template #account="{ item }">
+      <UCard @submit.prevent="onSubmitAccount">
+        <template #header>
+          <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+            {{ item.label }}
+          </h3>
+          <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+            Make changes to your account here. Click save when you're done.
+          </p>
+        </template>
+
+        <UFormGroup label="Name" name="name" class="mb-3">
+          <UInput v-model="accountForm.name" />
+        </UFormGroup>
+        <UFormGroup label="Username" name="username">
+          <UInput v-model="accountForm.username" />
+        </UFormGroup>
+
+        <template #footer>
+          <UButton type="submit" color="black">
+            Save account
+          </UButton>
+        </template>
+      </UCard>
+    </template>
+
+    <template #password="{ item }">
+      <UCard @submit.prevent="onSubmitPassword">
+        <template #header>
+          <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+            {{ item.label }}
+          </h3>
+          <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+            Change your password here. After saving, you'll be logged out.
+          </p>
+        </template>
+
+        <UFormGroup label="Current Password" name="current" required class="mb-3">
+          <UInput v-model="passwordForm.currentPassword" type="password" required />
+        </UFormGroup>
+        <UFormGroup label="New Password" name="new" required>
+          <UInput v-model="passwordForm.newPassword" type="password" required />
+        </UFormGroup>
+
+        <template #footer>
+          <UButton type="submit" color="black">
+            Save password
+          </UButton>
+        </template>
+      </UCard>
+    </template>
+  </UTabs>
+</template>

docs/components/content/examples/TabsExampleItemSlot.vue

@@ -0,0 +1,58 @@
+<script setup>
+const items = [{
+  key: 'account',
+  label: 'Account',
+  description: 'Make changes to your account here. Click save when you\'re done.'
+}, {
+  key: 'password',
+  label: 'Password',
+  description: 'Change your password here. After saving, you\'ll be logged out.'
+}]
+
+const accountForm = reactive({ name: 'Benjamin', username: 'benjamincanac'  })
+const passwordForm = reactive({ currentPassword: '', newPassword: '' })
+
+function onSubmit (form) {
+  console.log('Submitted form:', form)
+}
+</script>
+
+<template>
+  <UTabs :items="items" class="w-full">
+    <template #item="{ item }">
+      <UCard @submit.prevent="() => onSubmit(item.key === 'account' ? accountForm : passwordForm)">
+        <template #header>
+          <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+            {{ item.label }}
+          </h3>
+          <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
+            {{ item.description }}
+          </p>
+        </template>
+
+        <div v-if="item.key === 'account'" class="space-y-3">
+          <UFormGroup label="Name" name="name">
+            <UInput v-model="accountForm.name" />
+          </UFormGroup>
+          <UFormGroup label="Username" name="username">
+            <UInput v-model="accountForm.username" />
+          </UFormGroup>
+        </div>
+        <div v-else-if="item.key === 'password'" class="space-y-3">
+          <UFormGroup label="Current Password" name="current" required>
+            <UInput v-model="passwordForm.currentPassword" type="password" required />
+          </UFormGroup>
+          <UFormGroup label="New Password" name="new" required>
+            <UInput v-model="passwordForm.newPassword" type="password" required />
+          </UFormGroup>
+        </div>
+
+        <template #footer>
+          <UButton type="submit" color="black">
+            Save {{ item.key === 'account' ? 'account' : 'password' }}
+          </UButton>
+        </template>
+      </UCard>
+    </template>
+  </UTabs>
+</template>

docs/components/content/examples/TabsExampleVertical.vue

@@ -0,0 +1,16 @@
+<script setup>
+const items = [{
+  label: 'Tab1',
+  content: 'This is the content shown for Tab1'
+}, {
+  label: 'Tab2',
+  content: 'And, this is the content for Tab2'
+}, {
+  label: 'Tab3',
+  content: 'Finally, this is the content for Tab3'
+}]
+</script>
+
+<template>
+  <UTabs :items="items" orientation="vertical" :ui="{ wrapper: 'flex items-center gap-4', list: { width: 'w-48' } }" />
+</template>