feat: vp-raw

docs/.postcssrc.js

@@ -0,0 +1,18 @@
+// https://github.com/vuejs/vitepress/issues/199#issuecomment-1168325262
+// by default vitepress adds .vp-doc h1|h2|h3...p and others tags inside vitepress document.
+// here we add :not(:where(.vp-raw *)) selector to use it inside component examples
+// to prevent component style pollution from .vp-doc styles
+
+module.exports = {
+    plugins: {
+        'tailwindcss': {},
+        'postcss-prefix-selector': {
+            prefix: ':not(:where(.vp-raw *))',
+            includeFiles: [/vp-doc\.css/],
+            transform(prefix, _selector) {
+                const [selector, pseudo = ''] = _selector.split(/(:\S*)$/)
+                return selector + prefix + pseudo
+            }
+        },
+    }
+}

docs/.vitepress/config.ts

@@ -20,6 +20,7 @@ function getComponents() {
     { text: 'Button', link: '/guide/button/button.md' },
     { text: 'Button Group', link: '/guide/buttonGroup/buttonGroup.md' },
     { text: 'Spinner', link: '/guide/spinner/spinner.md' },
+    { text: 'Tabs', link: '/guide/tabs/tabs.md' },
   ]
 }
 
@@ -28,7 +29,7 @@ function getComponents() {
  * https://github.com/vuejs/vitepress/blob/master/docs/.vitepress/config.js
  */
 export default {
-  title: 'flowbite-vue vitepress',
+  title: 'Flowbite Vue 3 Components',
   themeConfig: {
     docsDir: 'docs',
     sidebar: buildSidebar(),

docs/guide/alert/examples/AlertBorderExample.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col">
+  <div class="vp-raw flex flex-col">
     <Alert type="info" border class="mb-2">Info</Alert>
     <Alert type="warning" border class="mb-2">Warning</Alert>
     <Alert type="danger" border class="mb-2">Danger</Alert>

docs/guide/alert/examples/AlertClosableExample.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col">
+  <div class="vp-raw flex flex-col">
     <Alert type="info" closable class="mb-2">Info</Alert>
     <Alert type="warning" closable class="mb-2">Warning</Alert>
     <Alert type="danger" closable class="mb-2">Danger</Alert>

docs/guide/alert/examples/AlertIconExample.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col">
+  <div class="vp-raw flex flex-col">
     <Alert type="info" :icon="false" class="mb-2">Info</Alert>
     <Alert title="WARNING" type="warning" :icon="false" class="mb-2">Warning</Alert>
     <Alert type="danger" :icon="false" class="mb-2">Danger</Alert>

docs/guide/alert/examples/AlertInlineExample.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col">
+  <div class="vp-raw flex flex-col">
     <Alert type="info" title="Info title" :inline="false" class="mb-2">
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda beatae eaque error est eveniet, facere illo labore libero minima molestiae neque nisi non officia quod sed temporibus unde vitae voluptates.
     </Alert>

docs/guide/alert/examples/AlertTitleExample.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col">
+  <div class="vp-raw flex flex-col">
     <Alert type="info" title="Some info title" class="mb-2">Info</Alert>
     <Alert type="warning" title="Some warning title" class="mb-2">Warning</Alert>
     <Alert type="danger" title="Some danger title" class="mb-2">Danger</Alert>

docs/guide/alert/examples/AlertTypeExample.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col">
+  <div class="vp-raw flex flex-col">
     <Alert type="info" class="mb-2">Info</Alert>
     <Alert type="warning" class="mb-2">Warning</Alert>
     <Alert type="danger" class="mb-2">Danger</Alert>

docs/guide/button/examples/ButtonColorExample.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="inline-flex align-center gap-2 flex-wrap">
+  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
     <Button color="default">Default</Button>
     <Button color="alternative">Alternative</Button>
     <Button color="dark">Dark</Button>

docs/guide/button/examples/ButtonDisabledExample.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="inline-flex align-center gap-2 flex-wrap">
+  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
     <Button color="default" disabled>Default</Button>
     <Button color="default" outline disabled>Default outline</Button>
     <Button gradient="red" disabled>Red gradient</Button>

docs/guide/button/examples/ButtonGradientDuotoneExample.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="inline-flex align-center gap-2 flex-wrap">
+  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
     <Button gradient="purple-blue">Purple to blue</Button>
     <Button gradient="cyan-blue">Cyan to blue</Button>
     <Button gradient="green-blue">Green to blue</Button>

docs/guide/button/examples/ButtonGradientMonochromeExample.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="inline-flex align-center gap-2 flex-wrap">
+  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
     <Button gradient="blue">Blue</Button>
     <Button gradient="cyan">Cyan</Button>
     <Button gradient="green">Green</Button>

docs/guide/button/examples/ButtonGradientShadowExample.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="inline-flex align-center gap-2 flex-wrap">
+  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
     <Button gradient="blue" shadow>Blue with blue</Button>
     <Button gradient="cyan" shadow>Cyan with cyan</Button>
     <Button gradient="green" shadow>Green with green</Button>

docs/guide/button/examples/ButtonIconExample.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="inline-flex align-center gap-2 flex-wrap">
+  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
     <Button gradient="purple-blue" square>
       <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
     </Button>

docs/guide/button/examples/ButtonLoadingExample.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="inline-flex items-center gap-2 flex-wrap">
+  <div class="vp-raw inline-flex items-center gap-2 flex-wrap">
     <Button gradient="purple-blue" outline :disabled="loading" :loading="loading" @click="loading = !loading" size="xs">
       Click me
     </Button>

docs/guide/button/examples/ButtonOutlineColorExample.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="inline-flex align-center gap-2 flex-wrap">
+  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
     <Button color="default" outline>Default</Button>
     <Button color="dark" outline>Dark</Button>
     <Button color="green" outline>Green</Button>

docs/guide/button/examples/ButtonOutlineGradientExample.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="inline-flex align-center gap-2 flex-wrap">
+  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
     <Button gradient="purple-blue" outline>Purple to blue</Button>
     <Button gradient="cyan-blue" outline>Cyan to blue</Button>
     <Button gradient="green-blue" outline>Green to blue</Button>

docs/guide/button/examples/ButtonPillExample.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="inline-flex align-center gap-2 flex-wrap">
+  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
     <Button color="default" pill>Default</Button>
     <Button color="alternative" pill>Alternative</Button>
     <Button color="dark" pill>Dark</Button>

docs/guide/button/examples/ButtonPrefixExample.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="inline-flex align-center gap-2 flex-wrap">
+  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
     <Button color="default">
       <template #prefix>
         <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path></svg>

docs/guide/button/examples/ButtonSizeExample.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="inline-flex items-center gap-2 flex-wrap">
+  <div class="vp-raw inline-flex items-center gap-2 flex-wrap">
     <Button size="xs">Extra small - xs</Button>
     <Button size="sm">Small - sm</Button>
     <Button size="md">Medium - md</Button>

docs/guide/button/examples/ButtonSquareExample.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="inline-flex align-center gap-2 flex-wrap">
+  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
     <Button gradient="red-yellow" square>
       <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
     </Button>

docs/guide/button/examples/ButtonSuffixExample.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="inline-flex align-center gap-2 flex-wrap">
+  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
     <Button color="default">
       Choose plan
       <template #suffix>

docs/guide/buttonGroup/examples/ButtonGroupBasicExample.vue

@@ -1,10 +1,12 @@
 <template>
-  <button-group>
+  <div class="vp-raw">
-    <Button>hello world</Button>
+    <button-group>
-    <Button color="purple">hello world</Button>
+      <Button>hello world</Button>
-    <Button color="alternative">hello world</Button>
+      <Button color="purple">hello world</Button>
-    <Button color="red">hello world</Button>
+      <Button color="alternative">hello world</Button>
-  </button-group>
+      <Button color="red">hello world</Button>
+    </button-group>
+  </div>
 </template>
 <script setup>
 import { ButtonGroup, Button } from '../../../../src/index'

docs/guide/buttonGroup/examples/ButtonGroupIconExample.vue

@@ -1,15 +1,17 @@
 <template>
-  <button-group>
+  <div class="vp-raw">
-    <Button outline>Button1</Button>
+    <button-group>
-    <Button outline>Button2</Button>
+      <Button outline>Button1</Button>
-    <Button outline>Button3</Button>
+      <Button outline>Button2</Button>
-    <Button outline>
+      <Button outline>Button3</Button>
-      hello world
+      <Button outline>
-      <template #suffix>
+        hello world
-        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+        <template #suffix>
-      </template>
+          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
-    </Button>
+        </template>
-  </button-group>
+      </Button>
+    </button-group>
+  </div>
 </template>
 <script setup>
 import { ButtonGroup, Button } from '../../../../src/index'

docs/guide/spinner/examples/SpinnerBasicExample.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="inline-flex align-center gap-2 flex-wrap">
+  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
     <spinner />
   </div>
 </template>

docs/guide/spinner/examples/SpinnerColorExample.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="inline-flex align-center gap-2 flex-wrap">
+  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
     <spinner color="blue" size="6" />
     <spinner color="pink" size="8" />
     <spinner color="gray" size="10" />

docs/guide/spinner/examples/SpinnerSizeExample.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="inline-flex align-center gap-2 flex-wrap">
+  <div class="vp-raw inline-flex align-center gap-2 flex-wrap">
     <spinner />
     <spinner size="6" />
     <spinner size="8" />

docs/guide/tabs/examples/TabsDefaultExample.vue

@@ -0,0 +1,8 @@
+<template>
+  <div class="vp-raw">
+    <tabs />
+  </div>
+</template>
+<script setup>
+import { Tabs } from '../../../../src/index'
+</script>

docs/guide/tabs/tabs.md

@@ -0,0 +1,5 @@
+<script setup>
+import TabsDefaultExample from './examples/TabsDefaultExample.vue';
+</script>
+
+<TabsDefaultExample />

package-lock.json

@@ -2357,6 +2357,12 @@
         "postcss-selector-parser": "^6.0.6"
       }
     },
+    "postcss-prefix-selector": {
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/postcss-prefix-selector/-/postcss-prefix-selector-1.16.0.tgz",
+      "integrity": "sha512-rdVMIi7Q4B0XbXqNUEI+Z4E+pueiu/CS5E6vRCQommzdQ/sgsS4dK42U7GX8oJR+TJOtT+Qv3GkNo6iijUMp3Q==",
+      "dev": true
+    },
     "postcss-selector-parser": {
       "version": "6.0.10",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",

package.json

@@ -44,7 +44,8 @@
     "eslint-plugin-vue": "^9.1.1",
     "flowbite": "^1.4.2",
     "jsdom": "^20.0.0",
-    "postcss": "^8.4.6",
+    "postcss": "^8.4.14",
+    "postcss-prefix-selector": "^1.16.0",
     "prettier": "^2.3.2",
     "tailwindcss": "^3.1.4",
     "typescript": "^4.7.3",
@@ -53,10 +54,5 @@
     "vitest": "^0.16.0",
     "vue-eslint-parser": "^9.0.3",
     "vue-tsc": "^0.38.2"
-  },
-  "postcss": {
-    "plugins": {
-      "tailwindcss": {}
-    }
   }
 }

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'