feat: vp-raw

src/components/Tabs/Tabs.vue

@@ -0,0 +1,40 @@
+<template>
+  <div :class="divClasses">
+    <ul :class="ulClasses">
+      <li class="mr-2">
+        <a href="#" aria-current="page"
+           class="inline-block p-4 text-blue-600 bg-gray-100 rounded-t-lg active dark:bg-gray-800 dark:text-blue-500">Profile</a>
+      </li>
+      <li class="mr-2">
+        <a href="#"
+           class="inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 dark:hover:text-gray-300">Dashboard</a>
+      </li>
+      <li class="mr-2">
+        <a href="#"
+           class="inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 dark:hover:text-gray-300">Settings</a>
+      </li>
+      <li class="mr-2">
+        <a href="#"
+           class="inline-block p-4 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 dark:hover:text-gray-300">Contacts</a>
+      </li>
+      <li>
+        <a class="inline-block p-4 text-gray-400 rounded-t-lg cursor-not-allowed dark:text-gray-500">Disabled</a>
+      </li>
+    </ul>
+  </div>
+</template>
+<script lang="ts" setup>
+import { useTabsClasses } from './useTabsClasses'
+import type { PropType } from 'vue'
+
+export type TabsVariant = 'default' | 'underline' | 'pills'
+
+const props = defineProps({
+  variant: {
+    type: String as PropType<TabsVariant>,
+    default: 'default',
+  },
+})
+
+const { ulClasses, divClasses } = useTabsClasses(props)
+</script>