feat: vp-raw

2022-07-05 18:12:59 +03:00
parent d564fb0cbf
commit 917c21cc84
37 changed files with 190 additions and 48 deletions
--- a/docs/.postcssrc.js
+++ b/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
+            }
+        },
+    }
+}
--- a/docs/.vitepress/config.ts
+++ b/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(),
--- a/docs/guide/alert/examples/AlertBorderExample.vue
+++ b/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>
--- a/docs/guide/alert/examples/AlertClosableExample.vue
+++ b/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>
--- a/docs/guide/alert/examples/AlertIconExample.vue
+++ b/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>
--- a/docs/guide/alert/examples/AlertInlineExample.vue
+++ b/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>
--- a/docs/guide/alert/examples/AlertTitleExample.vue
+++ b/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>
--- a/docs/guide/alert/examples/AlertTypeExample.vue
+++ b/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>
--- a/docs/guide/button/examples/ButtonColorExample.vue
+++ b/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>
--- a/docs/guide/button/examples/ButtonDisabledExample.vue
+++ b/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>
--- a/docs/guide/button/examples/ButtonGradientDuotoneExample.vue
+++ b/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>
--- a/docs/guide/button/examples/ButtonGradientMonochromeExample.vue
+++ b/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>
--- a/docs/guide/button/examples/ButtonGradientShadowExample.vue
+++ b/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>
--- a/docs/guide/button/examples/ButtonIconExample.vue
+++ b/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>
--- a/docs/guide/button/examples/ButtonLoadingExample.vue
+++ b/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>
--- a/docs/guide/button/examples/ButtonOutlineColorExample.vue
+++ b/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>
--- a/docs/guide/button/examples/ButtonOutlineGradientExample.vue
+++ b/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>
--- a/docs/guide/button/examples/ButtonPillExample.vue
+++ b/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>
--- a/docs/guide/button/examples/ButtonPrefixExample.vue
+++ b/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>
--- a/docs/guide/button/examples/ButtonSizeExample.vue
+++ b/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>
--- a/docs/guide/button/examples/ButtonSquareExample.vue
+++ b/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>
--- a/docs/guide/button/examples/ButtonSuffixExample.vue
+++ b/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>
--- a/docs/guide/buttonGroup/examples/ButtonGroupBasicExample.vue
+++ b/docs/guide/buttonGroup/examples/ButtonGroupBasicExample.vue
@@ -1,10 +1,12 @@
 <template>
+  <div class="vp-raw">
    <button-group>
      <Button>hello world</Button>
      <Button color="purple">hello world</Button>
      <Button color="alternative">hello world</Button>
      <Button color="red">hello world</Button>
    </button-group>
+  </div>
 </template>
 <script setup>
 import { ButtonGroup, Button } from '../../../../src/index'
--- a/docs/guide/buttonGroup/examples/ButtonGroupIconExample.vue
+++ b/docs/guide/buttonGroup/examples/ButtonGroupIconExample.vue
@@ -1,4 +1,5 @@
 <template>
+  <div class="vp-raw">
    <button-group>
      <Button outline>Button1</Button>
      <Button outline>Button2</Button>
@@ -10,6 +11,7 @@
        </template>
      </Button>
    </button-group>
+  </div>
 </template>
 <script setup>
 import { ButtonGroup, Button } from '../../../../src/index'
--- a/docs/guide/spinner/examples/SpinnerBasicExample.vue
+++ b/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>
--- a/docs/guide/spinner/examples/SpinnerColorExample.vue
+++ b/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" />
--- a/docs/guide/spinner/examples/SpinnerSizeExample.vue
+++ b/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" />
--- a/docs/guide/tabs/examples/TabsDefaultExample.vue
+++ b/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>
--- a/docs/guide/tabs/tabs.md
+++ b/docs/guide/tabs/tabs.md
@@ -0,0 +1,5 @@
+<script setup>
+import TabsDefaultExample from './examples/TabsDefaultExample.vue';
+</script>
+
+<TabsDefaultExample />
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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": {}
-    }
  }
 }
--- a/src/components/Alert/Alert.vue
+++ b/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">
--- a/src/components/Tabs/Tabs.vue
+++ b/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>
--- a/src/components/Tabs/components/Tab/Tab.vue
+++ b/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>
--- a/src/components/Tabs/components/Tab/useTabClasses.ts
+++ b/src/components/Tabs/components/Tab/useTabClasses.ts
--- a/src/components/Tabs/useTabsClasses.ts
+++ b/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,
+    }
+}
--- a/src/index.ts
+++ b/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'