feat: vp-raw

src/components/Alert/Alert.vue

@@ -16,7 +16,7 @@
     <div :class="contentClasses">
       <slot />
     </div>
-    <div class="inline-flex items-center">
+    <div class="inline-flex items-center" v-if="$slots.actions">
       <slot name="actions" />
     </div>
     <button type="button" :class="closeClasses" aria-label="Close" @click="onCloseClick" v-if="inline && closable">

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>

src/components/Tabs/components/Tab/Tab.vue

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <ul class="">
+      <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>
+
+</script>

src/components/Tabs/useTabsClasses.ts

@@ -0,0 +1,34 @@
+import type { Ref } from 'vue'
+import { computed } from 'vue'
+import type { TabsVariant } from './Tabs.vue'
+
+export type UseTabsClassesProps = {
+    variant: TabsVariant
+}
+
+export function useTabsClasses(props: UseTabsClassesProps): {
+    ulClasses: Ref<string>,
+    divClasses: Ref<string>,
+} {
+
+    const ulClasses = computed(() => {
+        if(props.variant === 'default')
+            return 'flex flex-wrap text-sm font-medium text-center text-gray-500 border-b border-gray-200 dark:border-gray-700 dark:text-gray-400'
+        else if(props.variant === 'pills')
+            return 'flex flex-wrap text-sm font-medium text-center text-gray-500 dark:text-gray-400'
+        else if(props.variant === 'underline')
+            return 'flex flex-wrap -mb-px text-sm font-medium text-center text-gray-500 dark:text-gray-400'
+        return ''
+    })
+
+    const divClasses = computed(() => {
+        if(props.variant === 'underline')
+            return 'text-sm font-medium text-center text-gray-500 border-b border-gray-200 dark:text-gray-400 dark:border-gray-700'
+        return ''
+    })
+
+    return {
+        ulClasses,
+        divClasses,
+    }
+}

src/index.ts

@@ -2,3 +2,5 @@ export { default as Button } from './components/Button/Button.vue'
 export { default as Spinner } from './components/Spinner/Spinner.vue'
 export { default as ButtonGroup } from './components/ButtonGroup/ButtonGroup.vue'
 export { default as Alert } from './components/Alert/Alert.vue'
+export { default as Tabs } from './components/Tabs/Tabs.vue'
+export { default as Tab } from './components/Tabs/components/Tab/Tab.vue'