jaro/flowbite-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #15 from Chank1e/chank1e/dropdown

Browse Source 
Chank1e/dropdown
This commit is contained in:
Alexandr P
2022-07-08 21:45:26 +03:00
committed by GitHub
parent 401fc7d1aa 749732dbe7
commit 388eed8286
43 changed files with 754 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
docs/.vitepress/config.ts
View File

@@ -11,7 +11,15 @@ function buildSidebar() {
items: [ items: [
...getComponents(), ...getComponents(),
], ],
}] },
{
text: 'Utils',
collapsible: true,
items: [
...getUtils(),
],
},
]
} }
function getComponents() { function getComponents() {
@@ -19,11 +27,18 @@ function getComponents() {
{ text: 'Alert', link: '/guide/alert/alert.md' }, { text: 'Alert', link: '/guide/alert/alert.md' },
{ text: 'Button', link: '/guide/button/button.md' }, { text: 'Button', link: '/guide/button/button.md' },
{ text: 'Button Group', link: '/guide/buttonGroup/buttonGroup.md' }, { text: 'Button Group', link: '/guide/buttonGroup/buttonGroup.md' },
{ text: 'Dropdown', link: '/guide/dropdown/dropdown.md' },
{ text: 'Spinner', link: '/guide/spinner/spinner.md' }, { text: 'Spinner', link: '/guide/spinner/spinner.md' },
{ text: 'Tabs', link: '/guide/tabs/tabs.md' }, { text: 'Tabs', link: '/guide/tabs/tabs.md' },
] ]
} }
function getUtils() {
return [
{ text: 'Flowbite Themable', link: '/guide/flowbiteThemable/flowbiteThemable.md' },
]
}
/** /**
* This can be used as an example * This can be used as an example
* https://github.com/vuejs/vitepress/blob/master/docs/.vitepress/config.js * https://github.com/vuejs/vitepress/blob/master/docs/.vitepress/config.js

2
docs/guide/button/button.md
View File

@@ -22,7 +22,7 @@ reference: [https://flowbite.com/docs/components/buttons/](https://flowbite.com/
## Prop - color ## Prop - color
```typescript ```typescript
type ButtonVariant = 'default' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple' type ButtonVariant = 'default' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple' | 'pink' | 'blue'
defineProps({ defineProps({
color: { color: {
type: String as PropType<ButtonVariant>, type: String as PropType<ButtonVariant>,

1
docs/guide/button/examples/ButtonColorExample.vue
View File

@@ -8,6 +8,7 @@
<Button color="red">Red</Button> <Button color="red">Red</Button>
<Button color="yellow">Yellow</Button> <Button color="yellow">Yellow</Button>
<Button color="purple">Purple</Button> <Button color="purple">Purple</Button>
<Button color="pink">Pink</Button>
</div> </div>
</template> </template>
<script setup> <script setup>

40
docs/guide/dropdown/dropdown.md Normal file
View File

@@ -0,0 +1,40 @@
<script setup>
import DropdownPlacementExample from './examples/DropdownPlacementExample.vue';
</script>
# Dropdown
## Props - placement
```vue
<script setup>
import { Dropdown } from 'flowbite-vue'
</script>
<template>
<dropdown placement="bottom" text="Bottom">
Any content here
</dropdown>
<dropdown placement="top">
<template #trigger="{ toggle }">
<Button @click="toggle">
Top
<template #suffix>
<svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
</template>
</Button>
</template>
<div class="p-2">
Padding content
</div>
</dropdown>
<dropdown placement="right" text="Right">
<Spinner size="6" class="m-4" />
</dropdown>
<dropdown placement="left" text="Left">
hello world
</dropdown>
</template>
```
<DropdownPlacementExample />

29
docs/guide/dropdown/examples/DropdownPlacementExample.vue Normal file
View File

@@ -0,0 +1,29 @@
<template>
<div class="vp-raw inline-flex align-center gap-2 flex-wrap">
<dropdown placement="bottom" text="Bottom">
Any content here
</dropdown>
<dropdown placement="top">
<template #trigger="{ toggle }">
<Button @click="toggle">
Top
<template #suffix>
<svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
</template>
</Button>
</template>
<div class="p-2">
Padding content
</div>
</dropdown>
<dropdown placement="right" text="Right">
<Spinner size="6" class="m-4" />
</dropdown>
<dropdown placement="left" text="Left">
hello world
</dropdown>
</div>
</template>
<script setup>
import { Dropdown, Spinner, Button } from '../../../../src/index'
</script>

25
docs/guide/flowbiteThemable/examples/button/FlowbiteThemableButtonExample.vue Normal file
View File

@@ -0,0 +1,25 @@
<template>
<div>
<div class="vp-raw inline-flex align-center gap-2 flex-wrap">
<flowbite-themable :key="theme" v-for="theme in themes" :theme="theme">
<Button>
{{ theme }}
</Button>
</flowbite-themable>
</div>
</div>
</template>
<script lang="ts" setup>
import type { PropType } from 'vue'
import { FlowbiteThemable, Button } from '../../../../../src/index'
import type { FlowbiteTheme } from '../../../../../src/components/utils/FlowbiteThemable/types'
const themes: FlowbiteTheme[] = ['blue', 'green', 'red', 'pink', 'purple']
defineProps({
theme: {
type: String as PropType<FlowbiteTheme>,
default: 'blue',
},
})
</script>

29
docs/guide/flowbiteThemable/examples/dropdown/FlowbiteThemableDropdownExample.vue Normal file
View File

@@ -0,0 +1,29 @@
<template>
<div>
<div class="vp-raw inline-flex align-center gap-2 flex-wrap">
<flowbite-themable :theme="theme">
<dropdown text="Text 1">
Content 1
</dropdown>
<dropdown text="Text 2">
Content 2
</dropdown>
<dropdown text="Text 3">
Content 3
</dropdown>
</flowbite-themable>
</div>
</div>
</template>
<script lang="ts" setup>
import type { PropType } from 'vue'
import { FlowbiteThemable, Dropdown } from '../../../../../src/index'
import type { FlowbiteTheme } from '../../../../../src/components/utils/FlowbiteThemable/types'
defineProps({
theme: {
type: String as PropType<FlowbiteTheme>,
default: 'blue',
},
})
</script>

34
docs/guide/flowbiteThemable/examples/tabs/FlowbiteThemableTabsDefaultExample.vue Normal file
View File

@@ -0,0 +1,34 @@
<template>
<div class="vp-raw">
<flowbite-themable :theme="theme">
<tabs v-model="activeTab" class="p-5">
<tab name="first" title="First">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aspernatur debitis iste libero molestiae mollitia, optio sunt? A, consectetur distinctio, eaque harum iusto laudantium, molestiae nam odio officia pariatur vitae?
</tab>
<tab name="second" title="Second">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam asperiores autem cupiditate, deleniti eligendi exercitationem magnam maiores, minus pariatur provident quasi qui quidem recusandae rem reprehenderit sapiente sequi sint soluta.
</tab>
<tab name="third" title="Third">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi aperiam assumenda consectetur, dolorem, dolores, ea eos ipsum itaque iure laudantium nostrum nulla numquam perspiciatis provident qui quod totam voluptatem.
</tab>
<tab name="fourth" title="Fourth" :disabled="true">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto blanditiis cupiditate ea error eveniet hic impedit in labore maxime, minima mollitia nam sapiente sint tempora tempore vel velit veniam, voluptatem.
</tab>
</tabs>
</flowbite-themable>
</div>
</template>
<script lang="ts" setup>
import type { PropType } from 'vue'
import { ref } from 'vue'
import { Tabs, Tab, FlowbiteThemable } from '../../../../../src/index'
import type { FlowbiteTheme } from '../../../../../src/components/utils/FlowbiteThemable/types'
const activeTab = ref('first')
defineProps({
theme: {
type: String as PropType<FlowbiteTheme>,
default: 'blue',
},
})
</script>

34
docs/guide/flowbiteThemable/examples/tabs/FlowbiteThemableTabsPillsExample.vue Normal file
View File

@@ -0,0 +1,34 @@
<template>
<div class="vp-raw">
<flowbite-themable :theme="theme">
<tabs variant="pills" v-model="activeTab" class="p-5">
<tab name="first" title="First">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aspernatur debitis iste libero molestiae mollitia, optio sunt? A, consectetur distinctio, eaque harum iusto laudantium, molestiae nam odio officia pariatur vitae?
</tab>
<tab name="second" title="Second">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam asperiores autem cupiditate, deleniti eligendi exercitationem magnam maiores, minus pariatur provident quasi qui quidem recusandae rem reprehenderit sapiente sequi sint soluta.
</tab>
<tab name="third" title="Third">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi aperiam assumenda consectetur, dolorem, dolores, ea eos ipsum itaque iure laudantium nostrum nulla numquam perspiciatis provident qui quod totam voluptatem.
</tab>
<tab name="fourth" title="Fourth" :disabled="true">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto blanditiis cupiditate ea error eveniet hic impedit in labore maxime, minima mollitia nam sapiente sint tempora tempore vel velit veniam, voluptatem.
</tab>
</tabs>
</flowbite-themable>
</div>
</template>
<script lang="ts" setup>
import type { PropType } from 'vue'
import { ref } from 'vue'
import { Tabs, Tab, FlowbiteThemable } from '../../../../../src/index'
import type { FlowbiteTheme } from '../../../../../src/components/utils/FlowbiteThemable/types'
const activeTab = ref('first')
defineProps({
theme: {
type: String as PropType<FlowbiteTheme>,
default: 'blue',
},
})
</script>

34
docs/guide/flowbiteThemable/examples/tabs/FlowbiteThemableTabsUnderlineExample.vue Normal file
View File

@@ -0,0 +1,34 @@
<template>
<div class="vp-raw">
<flowbite-themable :theme="theme">
<tabs variant="underline" v-model="activeTab" class="p-5">
<tab name="first" title="First">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aspernatur debitis iste libero molestiae mollitia, optio sunt? A, consectetur distinctio, eaque harum iusto laudantium, molestiae nam odio officia pariatur vitae?
</tab>
<tab name="second" title="Second">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam asperiores autem cupiditate, deleniti eligendi exercitationem magnam maiores, minus pariatur provident quasi qui quidem recusandae rem reprehenderit sapiente sequi sint soluta.
</tab>
<tab name="third" title="Third">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi aperiam assumenda consectetur, dolorem, dolores, ea eos ipsum itaque iure laudantium nostrum nulla numquam perspiciatis provident qui quod totam voluptatem.
</tab>
<tab name="fourth" title="Fourth" :disabled="true">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto blanditiis cupiditate ea error eveniet hic impedit in labore maxime, minima mollitia nam sapiente sint tempora tempore vel velit veniam, voluptatem.
</tab>
</tabs>
</flowbite-themable>
</div>
</template>
<script lang="ts" setup>
import type { PropType } from 'vue'
import { ref } from 'vue'
import { Tabs, Tab, FlowbiteThemable } from '../../../../../src/index'
import type { FlowbiteTheme } from '../../../../../src/components/utils/FlowbiteThemable/types'
const activeTab = ref('first')
defineProps({
theme: {
type: String as PropType<FlowbiteTheme>,
default: 'blue',
},
})
</script>

108
docs/guide/flowbiteThemable/flowbiteThemable.md Normal file
View File

@@ -0,0 +1,108 @@
<script setup>
import FlowbiteThemableTabsPillsExample from './examples/tabs/FlowbiteThemableTabsPillsExample.vue';
import FlowbiteThemableTabsUnderlineExample from './examples/tabs/FlowbiteThemableTabsUnderlineExample.vue';
import FlowbiteThemableTabsDefaultExample from './examples/tabs/FlowbiteThemableTabsDefaultExample.vue';
import FlowbiteThemableDropdownExample from './examples/dropdown/FlowbiteThemableDropdownExample.vue';
import FlowbiteThemableButtonExample from './examples/button/FlowbiteThemableButtonExample.vue';
</script>
# Flowbite Themable
You can use this wrapper for styling components with no color prop(like tabs, dropdown etc.)
## Tabs
```vue
<script setup>
import { Tabs, Tab, FlowbiteThemable } from 'flowbite-vue'
const theme = 'blue' // 'blue', 'green', 'red', 'pink', 'purple'
const variant = 'default' // see tabs docs
</script>
<template>
<flowbite-themable :theme="theme">
<tabs :variant="variant" class="p-5">
...
</tabs>
</flowbite-themable>
</template>
```
### **variant: pills**
---
<FlowbiteThemableTabsPillsExample theme="blue" />
<FlowbiteThemableTabsPillsExample theme="green" />
<FlowbiteThemableTabsPillsExample theme="pink" />
<FlowbiteThemableTabsPillsExample theme="purple" />
<FlowbiteThemableTabsPillsExample theme="red" />
### **variant: underline**
---
<FlowbiteThemableTabsUnderlineExample theme="blue" />
<FlowbiteThemableTabsUnderlineExample theme="green" />
<FlowbiteThemableTabsUnderlineExample theme="pink" />
<FlowbiteThemableTabsUnderlineExample theme="purple" />
<FlowbiteThemableTabsUnderlineExample theme="red" />
### **variant: default**
---
<FlowbiteThemableTabsDefaultExample theme="blue" />
<FlowbiteThemableTabsDefaultExample theme="green" />
<FlowbiteThemableTabsDefaultExample theme="pink" />
<FlowbiteThemableTabsDefaultExample theme="purple" />
<FlowbiteThemableTabsDefaultExample theme="red" />
## Dropdown
```vue
<script setup>
import { Dropdown, FlowbiteThemable } from 'flowbite-vue'
const theme = 'blue' // 'blue', 'green', 'red', 'pink', 'purple'
</script>
<template>
<flowbite-themable :theme="theme">
<dropdown>
...
</dropdown>
</flowbite-themable>
</template>
```
<FlowbiteThemableDropdownExample theme="blue" class="mb-2" />
<FlowbiteThemableDropdownExample theme="green" class="mb-2" />
<FlowbiteThemableDropdownExample theme="pink" class="mb-2" />
<FlowbiteThemableDropdownExample theme="purple" class="mb-2" />
<FlowbiteThemableDropdownExample theme="red" />
## Button
```vue
<script setup>
import { Button, FlowbiteThemable } from 'flowbite-vue'
const theme = 'blue' // 'blue', 'green', 'red', 'pink', 'purple'
</script>
<template>
<flowbite-themable :theme="theme">
<Button>
...
</Button>
</flowbite-themable>
</template>
```
<FlowbiteThemableButtonExample />

5
docs/guide/tabs/tabs.md
View File

@@ -4,6 +4,10 @@ import TabsPillsExample from './examples/TabsPillsExample.vue';
import TabsUnderlineExample from './examples/TabsUnderlineExample.vue'; import TabsUnderlineExample from './examples/TabsUnderlineExample.vue';
</script> </script>
# Tabs
reference: [https://flowbite.com/docs/components/tabs/](https://flowbite.com/docs/components/tabs/)
## Prop - variant (default) ## Prop - variant (default)
```typescript ```typescript
@@ -76,6 +80,7 @@ const activeTab = ref('first')
<TabsPillsExample /> <TabsPillsExample />
```vue ```vue
<script setup> <script setup>
import { ref } from 'vue' import { ref } from 'vue'

35
package-lock.json generated
View File

@@ -323,8 +323,7 @@
"@types/web-bluetooth": { "@types/web-bluetooth": {
"version": "0.0.14", "version": "0.0.14",
"resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.14.tgz", "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.14.tgz",
"integrity": "sha512-5d2RhCard1nQUC3aHcq/gHzWYO6K0WJmAbjO7mQJgCQKtZpgXxv1rOM6O/dBDhDYYVutk1sciOgNSe+5YyfM8A==", "integrity": "sha512-5d2RhCard1nQUC3aHcq/gHzWYO6K0WJmAbjO7mQJgCQKtZpgXxv1rOM6O/dBDhDYYVutk1sciOgNSe+5YyfM8A=="
"dev": true
}, },
"@typescript-eslint/eslint-plugin": { "@typescript-eslint/eslint-plugin": {
"version": "5.30.0", "version": "5.30.0",
@@ -596,28 +595,25 @@
"dev": true "dev": true
}, },
"@vueuse/core": { "@vueuse/core": {
"version": "8.7.5", "version": "8.9.1",
"resolved": "https://registry.npmjs.org/@vueuse/core/-/core-8.7.5.tgz", "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-8.9.1.tgz",
"integrity": "sha512-tqgzeZGoZcXzoit4kOGLWJibDMLp0vdm6ZO41SSUQhkhtrPhAg6dbIEPiahhUu6sZAmSYvVrZgEr5aKD51nrLA==", "integrity": "sha512-a7goYb/gJxjXRBw4Fr/jEACiN33ghwM1ohJVu+Zwsr3lNL4qCQ1nU+ogta98lNg5hXJxWj7mYEmQDjjyWOu5nA==",
"dev": true,
"requires": { "requires": {
"@types/web-bluetooth": "^0.0.14", "@types/web-bluetooth": "^0.0.14",
"@vueuse/metadata": "8.7.5", "@vueuse/metadata": "8.9.1",
"@vueuse/shared": "8.7.5", "@vueuse/shared": "8.9.1",
"vue-demi": "*" "vue-demi": "*"
} }
}, },
"@vueuse/metadata": { "@vueuse/metadata": {
"version": "8.7.5", "version": "8.9.1",
"resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-8.7.5.tgz", "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-8.9.1.tgz",
"integrity": "sha512-emJZKRQSaEnVqmlu39NpNp8iaW+bPC2kWykWoWOZMSlO/0QVEmO/rt8A5VhOEJTKLX3vwTevqbiRy9WJRwVOQg==", "integrity": "sha512-6LADOlyl3oENHa9dsoY7LXjU1Mh14DnpM6ztETI3hpm5ZffOMIG5CB2Q6aEZfIvYr1lkJVmG2L82wFKk7VRfIA=="
"dev": true
}, },
"@vueuse/shared": { "@vueuse/shared": {
"version": "8.7.5", "version": "8.9.1",
"resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-8.7.5.tgz", "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-8.9.1.tgz",
"integrity": "sha512-THXPvMBFmg6Gf6AwRn/EdTh2mhqwjGsB2Yfp374LNQSQVKRHtnJ0I42bsZTn7nuEliBxqUrGQm/lN6qUHmhJLw==", "integrity": "sha512-klZfn7ijI3juqVgpfQVrrlBh4uTFajwSCWm8Cdt45Kg26b1LZ9jn9n7J6GhmkFay5016GnjjivQoekQSMeJNUg==",
"dev": true,
"requires": { "requires": {
"vue-demi": "*" "vue-demi": "*"
} }
@@ -2886,10 +2882,9 @@
} }
}, },
"vue-demi": { "vue-demi": {
"version": "0.13.1", "version": "0.13.2",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.1.tgz", "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.2.tgz",
"integrity": "sha512-xmkJ56koG3ptpLnpgmIzk9/4nFf4CqduSJbUM0OdPoU87NwRuZ6x49OLhjSa/fC15fV+5CbEnrxU4oyE022svg==", "integrity": "sha512-41ukrclEbMddAyP7PvxMSYqnOSzPV6r7GNnyTSKSCNTaz19GehxmTiXyP9kwHSUv2+Dr6hHqiUiF7L1VAw2KdQ=="
"dev": true
}, },
"vue-eslint-parser": { "vue-eslint-parser": {
"version": "9.0.3", "version": "9.0.3",

3
package.json
View File

@@ -54,5 +54,8 @@
"vitest": "^0.16.0", "vitest": "^0.16.0",
"vue-eslint-parser": "^9.0.3", "vue-eslint-parser": "^9.0.3",
"vue-tsc": "^0.38.2" "vue-tsc": "^0.38.2"
},
"dependencies": {
"@vueuse/core": "^8.9.1"
} }
} }

4
src/components/Alert/Alert.vue
View File

@@ -27,10 +27,10 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import type { PropType } from 'vue' import type { PropType } from 'vue'
import { useAlertClasses } from './useAlertClasses' import { useAlertClasses } from './composables/useAlertClasses'
import { onBeforeUnmount, ref, toRefs } from 'vue' import { onBeforeUnmount, ref, toRefs } from 'vue'
import type { AlertType } from './types'
export type AlertType = 'info' | 'danger' | 'success' | 'warning' | 'dark'
const props = defineProps({ const props = defineProps({
type: { type: {

2
src/components/Alert/useAlertClasses.ts → src/components/Alert/composables/useAlertClasses.ts
View File

@@ -1,4 +1,4 @@
import type { AlertType } from './Alert.vue' import type { AlertType } from '../types'
import { computed } from 'vue' import { computed } from 'vue'
import type { Ref } from 'vue' import type { Ref } from 'vue'
import classNames from 'classnames' import classNames from 'classnames'

1
src/components/Alert/types.d.ts vendored Normal file
View File

@@ -0,0 +1 @@
export type AlertType = 'info' | 'danger' | 'success' | 'warning' | 'dark'

12
src/components/Button/Button.vue
View File

@@ -31,15 +31,9 @@
import { computed, toRefs } from 'vue' import { computed, toRefs } from 'vue'
import type { PropType } from 'vue' import type { PropType } from 'vue'
import Spinner from '../Spinner/Spinner.vue' import Spinner from '../Spinner/Spinner.vue'
import { useButtonClasses } from './useButtonClasses' import { useButtonClasses } from './composables/useButtonClasses'
import { useButtonSpinner } from './useButtonSpinner' import { useButtonSpinner } from './composables/useButtonSpinner'
import type { ButtonGradient, ButtonMonochromeGradient, ButtonSize, ButtonVariant } from './types'
export type ButtonMonochromeGradient = 'blue' | 'green' | 'cyan' | 'teal' | 'lime' | 'red' | 'pink' | 'purple'
export type ButtonDuotoneGradient = 'purple-blue' | 'cyan-blue' | 'green-blue' | 'purple-pink' | 'pink-orange' | 'teal-lime' | 'red-yellow'
export type ButtonGradient = ButtonDuotoneGradient | ButtonMonochromeGradient
export type ButtonVariant = 'default' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple'
export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
const props = defineProps({ const props = defineProps({
color: { color: {

29
src/components/Button/useButtonClasses.ts → src/components/Button/composables/useButtonClasses.ts
View File

@@ -1,14 +1,15 @@
import type { Ref } from 'vue' import type { Ref } from 'vue'
import { computed, useSlots } from 'vue' import { computed, useSlots } from 'vue'
import classNames from 'classnames' import classNames from 'classnames'
import type { ButtonDuotoneGradient, ButtonGradient, ButtonMonochromeGradient, ButtonSize, ButtonVariant } from './Button.vue' import type { ButtonDuotoneGradient, ButtonGradient, ButtonMonochromeGradient, ButtonSize, ButtonVariant } from '../types'
import { useFlowbiteThemable } from '../../utils/FlowbiteThemable/composables/useFlowbiteThemable'
export type ButtonClassMap<T extends string> = { hover: Record<T, string>, default: Record<T, string> } export type ButtonClassMap<T extends string> = { hover: Record<T, string>, default: Record<T, string> }
const buttonColorClasses: ButtonClassMap<ButtonVariant> = { const buttonColorClasses: ButtonClassMap<ButtonVariant> = {
default: { default: {
default: 'text-white bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg dark:bg-blue-600 focus:outline-none dark:focus:ring-blue-800', default: 'text-white bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg dark:bg-blue-600 focus:outline-none dark:focus:ring-blue-800',
blue: 'text-white bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg dark:bg-blue-600 focus:outline-none dark:focus:ring-blue-800',
alternative: 'font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600', alternative: 'font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600',
dark: 'text-white bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg dark:bg-gray-800 dark:focus:ring-gray-700 dark:border-gray-700', dark: 'text-white bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg dark:bg-gray-800 dark:focus:ring-gray-700 dark:border-gray-700',
light: 'text-gray-900 bg-white border border-gray-300 focus:outline-none focus:ring-4 focus:ring-gray-200 font-medium rounded-lg dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:focus:ring-gray-700', light: 'text-gray-900 bg-white border border-gray-300 focus:outline-none focus:ring-4 focus:ring-gray-200 font-medium rounded-lg dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:focus:ring-gray-700',
@@ -16,9 +17,11 @@ const buttonColorClasses: ButtonClassMap<ButtonVariant> = {
red: 'focus:outline-none text-white bg-red-700 focus:ring-4 focus:ring-red-300 font-medium rounded-lg dark:bg-red-600 dark:focus:ring-red-900', red: 'focus:outline-none text-white bg-red-700 focus:ring-4 focus:ring-red-300 font-medium rounded-lg dark:bg-red-600 dark:focus:ring-red-900',
yellow: 'focus:outline-none text-white bg-yellow-400 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg dark:focus:ring-yellow-900', yellow: 'focus:outline-none text-white bg-yellow-400 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg dark:focus:ring-yellow-900',
purple: 'focus:outline-none text-white bg-purple-700 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg dark:bg-purple-600 dark:focus:ring-purple-900', purple: 'focus:outline-none text-white bg-purple-700 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg dark:bg-purple-600 dark:focus:ring-purple-900',
pink: 'focus:outline-none text-white bg-pink-700 focus:ring-4 focus:ring-pink-300 font-medium rounded-lg dark:bg-pink-600 dark:focus:ring-pink-900',
}, },
hover: { hover: {
default: 'hover:bg-blue-800 dark:hover:bg-blue-700', default: 'hover:bg-blue-800 dark:hover:bg-blue-700',
blue: 'hover:bg-blue-800 dark:hover:bg-blue-700',
alternative: 'hover:bg-gray-100 hover:text-blue-700 dark:hover:text-white dark:hover:bg-gray-700', alternative: 'hover:bg-gray-100 hover:text-blue-700 dark:hover:text-white dark:hover:bg-gray-700',
dark: 'hover:bg-gray-900 dark:hover:bg-gray-700', dark: 'hover:bg-gray-900 dark:hover:bg-gray-700',
light: 'hover:bg-gray-100 dark:hover:border-gray-600', light: 'hover:bg-gray-100 dark:hover:border-gray-600',
@@ -26,7 +29,7 @@ const buttonColorClasses: ButtonClassMap<ButtonVariant> = {
red: 'hover:bg-red-800 dark:hover:bg-red-700', red: 'hover:bg-red-800 dark:hover:bg-red-700',
yellow: 'hover:bg-yellow-500', yellow: 'hover:bg-yellow-500',
purple: 'hover:bg-purple-800 dark:hover:bg-purple-700', purple: 'hover:bg-purple-800 dark:hover:bg-purple-700',
pink: 'hover:bg-pink-800 dark:hover:bg-pink-700',
}, },
} }
@@ -34,16 +37,20 @@ const buttonOutlineColorClasses: ButtonClassMap<Exclude<ButtonVariant, 'light' |
default: { default: {
dark: 'text-gray-900 border border-gray-800 focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-sm text-center dark:border-gray-600 dark:text-gray-400 dark:focus:ring-gray-800', dark: 'text-gray-900 border border-gray-800 focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-sm text-center dark:border-gray-600 dark:text-gray-400 dark:focus:ring-gray-800',
default: 'text-blue-700 border border-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm text-center dark:border-blue-500 dark:text-blue-500 dark:focus:ring-blue-800', default: 'text-blue-700 border border-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm text-center dark:border-blue-500 dark:text-blue-500 dark:focus:ring-blue-800',
blue: 'text-blue-700 border border-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm text-center dark:border-blue-500 dark:text-blue-500 dark:focus:ring-blue-800',
green: 'text-green-700 border border-green-700 focus:ring-4 focus:outline-none focus:ring-green-300 font-medium rounded-lg text-sm text-center dark:border-green-500 dark:text-green-500 dark:focus:ring-green-800', green: 'text-green-700 border border-green-700 focus:ring-4 focus:outline-none focus:ring-green-300 font-medium rounded-lg text-sm text-center dark:border-green-500 dark:text-green-500 dark:focus:ring-green-800',
purple: 'text-purple-700 border border-purple-700 focus:ring-4 focus:outline-none focus:ring-purple-300 font-medium rounded-lg text-sm text-center dark:border-purple-400 dark:text-purple-400 dark:focus:ring-purple-900', purple: 'text-purple-700 border border-purple-700 focus:ring-4 focus:outline-none focus:ring-purple-300 font-medium rounded-lg text-sm text-center dark:border-purple-400 dark:text-purple-400 dark:focus:ring-purple-900',
pink: 'text-pink-700 border border-pink-700 focus:ring-4 focus:outline-none focus:ring-pink-300 font-medium rounded-lg text-sm text-center dark:border-pink-400 dark:text-pink-400 dark:focus:ring-pink-900',
red: 'text-red-700 border border-red-700 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm text-center dark:border-red-500 dark:text-red-500 dark:focus:ring-red-900', red: 'text-red-700 border border-red-700 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm text-center dark:border-red-500 dark:text-red-500 dark:focus:ring-red-900',
yellow: 'text-yellow-400 border border-yellow-400 focus:ring-4 focus:outline-none focus:ring-yellow-300 font-medium rounded-lg text-sm text-center dark:border-yellow-300 dark:text-yellow-300 dark:focus:ring-yellow-900', yellow: 'text-yellow-400 border border-yellow-400 focus:ring-4 focus:outline-none focus:ring-yellow-300 font-medium rounded-lg text-sm text-center dark:border-yellow-300 dark:text-yellow-300 dark:focus:ring-yellow-900',
}, },
hover: { hover: {
dark: 'hover:text-white hover:bg-gray-900 dark:hover:text-white dark:hover:bg-gray-600', dark: 'hover:text-white hover:bg-gray-900 dark:hover:text-white dark:hover:bg-gray-600',
default: 'hover:text-white hover:bg-blue-800 dark:hover:text-white dark:hover:bg-blue-600', default: 'hover:text-white hover:bg-blue-800 dark:hover:text-white dark:hover:bg-blue-600',
blue: 'hover:text-white hover:bg-blue-800 dark:hover:text-white dark:hover:bg-blue-600',
green: 'hover:text-white hover:bg-green-800 dark:hover:text-white dark:hover:bg-green-600', green: 'hover:text-white hover:bg-green-800 dark:hover:text-white dark:hover:bg-green-600',
purple: 'hover:text-white hover:bg-purple-800 dark:hover:text-white dark:hover:bg-purple-500', purple: 'hover:text-white hover:bg-purple-800 dark:hover:text-white dark:hover:bg-purple-500',
pink: 'hover:text-white hover:bg-pink-800 dark:hover:text-white dark:hover:bg-pink-500',
red: 'hover:text-white hover:bg-red-800 dark:hover:text-white dark:hover:bg-red-600', red: 'hover:text-white hover:bg-red-800 dark:hover:text-white dark:hover:bg-red-600',
yellow: 'hover:text-white hover:bg-yellow-500 dark:hover:text-white dark:hover:bg-yellow-400', yellow: 'hover:text-white hover:bg-yellow-500 dark:hover:text-white dark:hover:bg-yellow-400',
}, },
@@ -161,6 +168,8 @@ const alternativeColors = ['alternative', 'light']
export function useButtonClasses(props: UseButtonClassesProps): { wrapperClasses: Ref<string>, spanClasses: Ref<string> } { export function useButtonClasses(props: UseButtonClassesProps): { wrapperClasses: Ref<string>, spanClasses: Ref<string> } {
const slots = useSlots() const slots = useSlots()
const theme = useFlowbiteThemable()
const sizeClasses = computed(() => { const sizeClasses = computed(() => {
if (props.square.value) return buttonSquareSizeClasses[props.size.value] if (props.square.value) return buttonSquareSizeClasses[props.size.value]
return buttonSizeClasses[props.size.value] return buttonSizeClasses[props.size.value]
@@ -171,6 +180,8 @@ export function useButtonClasses(props: UseButtonClassesProps): { wrapperClasses
const isColor = !!props.color.value const isColor = !!props.color.value
const isOutline = props.outline.value const isOutline = props.outline.value
const isActiveTheme = theme.isActive.value
let hoverClass = '' let hoverClass = ''
let backgroundClass = '' let backgroundClass = ''
@@ -194,20 +205,24 @@ export function useButtonClasses(props: UseButtonClassesProps): { wrapperClasses
} else if (isColor && isOutline) { // COLOR AND OUTLINE } else if (isColor && isOutline) { // COLOR AND OUTLINE
if (!alternativeColors.includes(props.color.value)) { if (!alternativeColors.includes(props.color.value)) {
backgroundClass = buttonOutlineColorClasses.default[props.color.value as unknown as keyof typeof buttonOutlineColorClasses.default] const color = isActiveTheme ? theme.color.value : props.color.value
backgroundClass = buttonOutlineColorClasses.default[color as unknown as keyof typeof buttonOutlineColorClasses.default]
if(!props.disabled.value) if(!props.disabled.value)
hoverClass = buttonOutlineColorClasses.hover[props.color.value as unknown as keyof typeof buttonOutlineColorClasses.hover] hoverClass = buttonOutlineColorClasses.hover[color as unknown as keyof typeof buttonOutlineColorClasses.hover]
} else { } else {
console.warn(`cannot use outline prop with "${props.color.value}" color`) // TODO: prettify console.warn(`cannot use outline prop with "${props.color.value}" color`) // TODO: prettify
} }
} else { // JUST COLOR } else { // JUST COLOR
backgroundClass = buttonColorClasses.default[props.color.value] const color = isActiveTheme ? theme.color.value : props.color.value
backgroundClass = buttonColorClasses.default[color as unknown as keyof typeof buttonColorClasses.default]
if(!props.disabled.value) if(!props.disabled.value)
hoverClass = buttonColorClasses.hover[props.color.value] hoverClass = buttonColorClasses.hover[color as unknown as keyof typeof buttonColorClasses.hover]
} }
let shadowClass = '' let shadowClass = ''

4
src/components/Button/useButtonSpinner.ts → src/components/Button/composables/useButtonSpinner.ts
View File

@@ -1,5 +1,5 @@
import type { ButtonGradient, ButtonSize, ButtonVariant } from './Button.vue' import type { ButtonGradient, ButtonSize, ButtonVariant } from '../types'
import type { SpinnerColor, SpinnerSize } from '../Spinner/Spinner.vue' import type { SpinnerColor, SpinnerSize } from '../../Spinner/types'
import type { Ref } from 'vue' import type { Ref } from 'vue'
import { computed } from 'vue' import { computed } from 'vue'

5
src/components/Button/types.d.ts vendored Normal file
View File

@@ -0,0 +1,5 @@
export type ButtonMonochromeGradient = 'blue' | 'green' | 'cyan' | 'teal' | 'lime' | 'red' | 'pink' | 'purple'
export type ButtonDuotoneGradient = 'purple-blue' | 'cyan-blue' | 'green-blue' | 'purple-pink' | 'pink-orange' | 'teal-lime' | 'red-yellow'
export type ButtonGradient = ButtonDuotoneGradient | ButtonMonochromeGradient
export type ButtonVariant = 'default' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple' | 'pink' | 'blue'
export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'

6
src/components/ButtonGroup/ButtonGroup.vue
View File

@@ -9,13 +9,13 @@
@layer components { @layer components {
.btn-group > button { .btn-group > button {
@apply rounded-none @apply rounded-none;
} }
.btn-group > button:first-child { .btn-group > button:first-child {
@apply rounded-l-lg @apply rounded-l-lg;
} }
.btn-group > button:last-child { .btn-group > button:last-child {
@apply rounded-r-lg @apply rounded-r-lg;
} }
} }
</style> </style>

54
src/components/Dropdown/Dropdown.vue Normal file
View File

@@ -0,0 +1,54 @@
<template>
<div class="inline-flex relative" ref="wrapper">
<slot name="trigger" :show="onShow" :hide="onHide" :toggle="onToggle">
<Button @click="onToggle">
{{ text }}
<template #suffix>
<svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
</template>
</Button>
</slot>
<div ref="content" :style="contentStyles" :class="[{ hidden: !visible }, contentClasses]">
<slot />
</div>
</div>
</template>
<script lang="ts" setup>
import { ref, toRef } from 'vue'
import type { PropType } from 'vue'
import type { DropdownPlacement } from './types'
import { useDropdownClasses } from './composables/useDropdownClasses'
import Button from '../Button/Button.vue'
import { onClickOutside } from '@vueuse/core'
const visible = ref(false)
const onShow = () => visible.value = true
const onHide = () => visible.value = false
const onToggle = () => visible.value = !visible.value
const props = defineProps({
placement: {
type: String as PropType<DropdownPlacement>,
default: 'bottom',
},
text: {
type: String ,
default: '',
},
})
const content = ref<HTMLDivElement>()
const wrapper = ref<HTMLDivElement>()
const { contentClasses, contentStyles } = useDropdownClasses({
placement: toRef(props, 'placement'),
visible,
contentRef: content,
})
onClickOutside(wrapper, () => {
if(!visible.value) return
visible.value = false
})
</script>

65
src/components/Dropdown/composables/useDropdownClasses.ts Normal file
View File

@@ -0,0 +1,65 @@
import { computed, nextTick, ref, watch } from 'vue'
import type { Ref } from 'vue'
import classNames from 'classnames'
import type { DropdownPlacement } from '../types'
const defaultDropdownClasses = 'absolute z-10 bg-white divide-y divide-gray-100 rounded shadow dark:bg-gray-700'
const placementDropdownClasses: Record<DropdownPlacement, string> = {
bottom: '',
left: 'top-0',
right: 'top-0',
top: '',
}
export type UseDropdownClassesProps = {
placement: Ref<DropdownPlacement>
contentRef: Ref<HTMLDivElement | undefined>
visible: Ref<boolean>
}
const placementCalculators: Record<DropdownPlacement, (rect: DOMRect) => string> = {
bottom(rect: DOMRect): string {
return `bottom: -${rect.height}px;`
},
left(rect: DOMRect): string {
return `left: -${rect.width}px;`
},
right(rect: DOMRect): string {
return `right: -${rect.width}px;`
},
top(rect: DOMRect): string {
return `top: -${rect.height}px;`
},
}
export function useDropdownClasses(props: UseDropdownClassesProps): {
contentClasses: Ref<string>
contentStyles: Ref<string>
} {
watch(props.visible, (value: boolean) => {
if(value) nextTick(() => calculatePlacementClasses())
})
const placementStyles = ref('')
const calculatePlacementClasses = () => {
const boundingRect = props.contentRef.value?.getBoundingClientRect()
if(!boundingRect) return placementStyles.value = ''
placementStyles.value = placementCalculators[props.placement.value](boundingRect)
}
const contentClasses = computed(() => {
return classNames(
defaultDropdownClasses,
placementDropdownClasses[props.placement.value],
)
})
return {
contentClasses,
contentStyles: placementStyles,
}
}

1
src/components/Dropdown/types.d.ts vendored Normal file
View File

@@ -0,0 +1 @@
export type DropdownPlacement = 'top' | 'bottom' | 'left' | 'right'

6
src/components/Spinner/Spinner.vue
View File

@@ -6,11 +6,9 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import type { PropType } from 'vue' import type { PropType } from 'vue'
import { useSpinnerClasses } from './useSpinnerClasses' import { useSpinnerClasses } from './composables/useSpinnerClasses'
import { toRefs } from 'vue' import { toRefs } from 'vue'
import type { SpinnerColor, SpinnerSize } from './types'
export type SpinnerSize = '0' | 'px' | '0.5' | '1' | '1.5' | '2' | '2.5' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12'
export type SpinnerColor = 'blue' | 'gray' | 'green' | 'red' | 'yellow' | 'pink' | 'purple' | 'white'
const props = defineProps({ const props = defineProps({
size: { size: {

2
src/components/Spinner/useSpinnerClasses.ts → src/components/Spinner/composables/useSpinnerClasses.ts
View File

@@ -1,4 +1,4 @@
import type { SpinnerColor, SpinnerSize } from './Spinner.vue' import type { SpinnerColor, SpinnerSize } from '../types'
import { computed } from 'vue' import { computed } from 'vue'
import type { Ref } from 'vue' import type { Ref } from 'vue'
import classNames from 'classnames' import classNames from 'classnames'

2
src/components/Spinner/types.d.ts vendored Normal file
View File

@@ -0,0 +1,2 @@
export type SpinnerSize = '0' | 'px' | '0.5' | '1' | '1.5' | '2' | '2.5' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12'
export type SpinnerColor = 'blue' | 'gray' | 'green' | 'red' | 'yellow' | 'pink' | 'purple' | 'white'

7
src/components/Tabs/Tabs.vue
View File

@@ -23,12 +23,13 @@ import {
TAB_ACTIVE_NAME_INJECTION_KEY, TAB_ACTIVE_NAME_INJECTION_KEY,
TAB_STYLE_INJECTION_KEY, TAB_STYLE_INJECTION_KEY,
TAB_VISIBILITY_DIRECTIVE_INJECTION_KEY, TAB_VISIBILITY_DIRECTIVE_INJECTION_KEY,
} from './config' } from './injection/config'
import { useTabsClasses } from './useTabsClasses' import { useTabsClasses } from './composables/useTabsClasses'
import type { PropType } from 'vue' import type { PropType } from 'vue'
import { computed, provide, toRef, useSlots } from 'vue' import { computed, provide, toRef, useSlots } from 'vue'
import { flatten } from '../../utils/flatten' import { flatten } from '../../utils/flatten'
import TabPane from './components/TabPane/TabPane.vue' import TabPane from './components/TabPane/TabPane.vue'
import type { TabsVariant } from './types'
const props = defineProps({ const props = defineProps({
variant: { variant: {
@@ -82,6 +83,4 @@ provide(TAB_ACTIVATE_INJECTION_KEY, onActivate)
export default { export default {
inheritAttrs: false, inheritAttrs: false,
} }
export type TabsVariant = 'default' | 'underline' | 'pills'
</script> </script>

2
src/components/Tabs/components/Tab/Tab.vue
View File

@@ -14,7 +14,7 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { inject } from 'vue' import { inject } from 'vue'
import { TAB_ACTIVE_NAME_INJECTION_KEY, TAB_VISIBILITY_DIRECTIVE_INJECTION_KEY } from '../../config' import { TAB_ACTIVE_NAME_INJECTION_KEY, TAB_VISIBILITY_DIRECTIVE_INJECTION_KEY } from '../../injection/config'
defineProps({ defineProps({
name: { name: {

11
src/components/Tabs/components/TabPane/TabPane.vue
View File

@@ -6,10 +6,10 @@
</li> </li>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { inject, toRefs } from 'vue' import { inject, toRef } from 'vue'
import { TAB_ACTIVATE_INJECTION_KEY, TAB_STYLE_INJECTION_KEY } from '../../config' import { TAB_ACTIVATE_INJECTION_KEY, TAB_STYLE_INJECTION_KEY } from '../../injection/config'
import type { TabsVariant } from '../../Tabs.vue' import type { TabsVariant } from '../../types'
import { useTabClasses } from './useTabClasses' import { useTabClasses } from './composables/useTabClasses'
const props = defineProps({ const props = defineProps({
name: { name: {
@@ -47,7 +47,8 @@ const tryActivateTab = () => {
} }
const { tabClasses } = useTabClasses({ const { tabClasses } = useTabClasses({
...toRefs(props), active: toRef(props,'active'),
disabled: toRef(props,'disabled'),
variant, variant,
}) })
</script> </script>

23
src/components/Tabs/components/TabPane/useTabClasses.ts → src/components/Tabs/components/TabPane/composables/useTabClasses.ts
View File

@@ -1,6 +1,8 @@
import type { Ref } from 'vue' import type { Ref } from 'vue'
import { computed } from 'vue' import { computed } from 'vue'
import type { TabsVariant } from '../../Tabs.vue' import type { TabsVariant } from '../../../types'
import { useFlowbiteThemable } from '../../../../utils/FlowbiteThemable/composables/useFlowbiteThemable'
import { simplifyTailwindClasses } from '../../../../../utils/simplifyTailwindClasses'
export type TabClassMap = { disabled: string, default: string, active: string } export type TabClassMap = { disabled: string, default: string, active: string }
@@ -30,15 +32,28 @@ export function useTabClasses(props: UseTabClassesProps): {
tabClasses: Ref<string>, tabClasses: Ref<string>,
} { } {
const theme = useFlowbiteThemable()
const tabClasses = computed(() => { const tabClasses = computed(() => {
const isActiveTheme = theme.isActive.value
const tabClassType: keyof TabClassMap = props.active.value ? 'active' : props.disabled.value ? 'disabled' : 'default' const tabClassType: keyof TabClassMap = props.active.value ? 'active' : props.disabled.value ? 'disabled' : 'default'
if(props.variant === 'default') if(props.variant === 'default')
return defaultTabClasses[tabClassType] return simplifyTailwindClasses(
defaultTabClasses[tabClassType],
isActiveTheme && tabClassType === 'active' ? theme.textClasses.value : '',
)
else if(props.variant === 'underline') else if(props.variant === 'underline')
return underlineTabClasses[tabClassType] return simplifyTailwindClasses(
underlineTabClasses[tabClassType],
isActiveTheme && tabClassType === 'active' ? [theme.borderClasses.value, theme.textClasses.value] : '',
)
else if (props.variant === 'pills') else if (props.variant === 'pills')
return pillsTabClasses[tabClassType] return simplifyTailwindClasses(
pillsTabClasses[tabClassType],
isActiveTheme && tabClassType === 'active' ? [theme.backgroundClasses.value, 'text-white'] : '',
)
return '' return ''
}) })

2
src/components/Tabs/useTabsClasses.ts → src/components/Tabs/composables/useTabsClasses.ts
View File

@@ -1,6 +1,6 @@
import type { Ref } from 'vue' import type { Ref } from 'vue'
import { computed } from 'vue' import { computed } from 'vue'
import type { TabsVariant } from './Tabs.vue' import type { TabsVariant } from '../types'
export type UseTabsClassesProps = { export type UseTabsClassesProps = {
variant: TabsVariant variant: TabsVariant

2
src/components/Tabs/config.ts → src/components/Tabs/injection/config.ts
View File

@@ -1,3 +1,5 @@
// dependency injection config for tabs
export const TAB_STYLE_INJECTION_KEY = 'flowbite-tab-style-injection' export const TAB_STYLE_INJECTION_KEY = 'flowbite-tab-style-injection'
export const TAB_ACTIVE_NAME_INJECTION_KEY = 'flowbite-tab-active-name-injection' export const TAB_ACTIVE_NAME_INJECTION_KEY = 'flowbite-tab-active-name-injection'
export const TAB_VISIBILITY_DIRECTIVE_INJECTION_KEY = 'flowbite-tab-visibility-directive-injection' export const TAB_VISIBILITY_DIRECTIVE_INJECTION_KEY = 'flowbite-tab-visibility-directive-injection'

1
src/components/Tabs/types.d.ts vendored Normal file
View File

@@ -0,0 +1 @@
export type TabsVariant = 'default' | 'underline' | 'pills'

18
src/components/utils/FlowbiteThemable/FlowbiteThemable.vue Normal file
View File

@@ -0,0 +1,18 @@
<template>
<slot />
</template>
<script lang="ts" setup>
import type { PropType } from 'vue'
import type { FlowbiteTheme } from './types'
import { provide, toRef } from 'vue'
import { FLOWBITE_THEMABLE_INJECTION_KEY } from './injection/config'
const props = defineProps({
theme: {
type: String as PropType<FlowbiteTheme>,
required: true,
},
})
provide(FLOWBITE_THEMABLE_INJECTION_KEY, toRef(props, 'theme'))
</script>

101
src/components/utils/FlowbiteThemable/composables/useFlowbiteThemable.ts Normal file
View File

@@ -0,0 +1,101 @@
import type { FlowbiteTheme } from '../types'
import type { Ref } from 'vue'
import { computed, inject } from 'vue'
import { FLOWBITE_THEMABLE_INJECTION_KEY } from '../injection/config'
type UseFlowbiteThemableReturns = {
textClasses: Ref<string>
backgroundClasses: Ref<string>
hoverClasses: Ref<string>
disabledClasses: Ref<string>
borderClasses: Ref<string>
isActive: Ref<boolean>
color: Ref<FlowbiteTheme | undefined>
}
type FlowbiteThemeMap = { background: string, disabled: string, hover: string, text: string, border: string }
type FlowbiteThemes<T extends string = string> = Record<T, FlowbiteThemeMap>
const flowbiteThemesColors: FlowbiteTheme[] = ['blue', 'green', 'red', 'pink', 'purple']
const flowbiteThemeClasses: FlowbiteThemes<FlowbiteTheme> = {
blue: {
background: 'bg-blue-700 dark:bg-blue-600',
disabled: '',
hover: 'hover:bg-blue-800 dark:hover:bg-blue-700',
text: 'text-blue-600 dark:text-blue-500',
border: 'border-blue-600 dark:border-blue-500',
},
green: {
background: 'bg-green-700 dark:bg-green-600',
disabled: '',
hover: 'hover:bg-green-800 dark:hover:bg-green-700',
text: 'text-green-600 dark:text-green-500',
border: 'border-green-600 dark:border-green-500',
},
pink: {
background: 'bg-pink-700 dark:bg-pink-600',
disabled: '',
hover: 'hover:bg-pink-800 dark:hover:bg-pink-700',
text: 'text-pink-600 dark:text-pink-500',
border: 'border-pink-600 dark:border-pink-500',
},
purple: {
background: 'bg-purple-700 dark:bg-purple-600',
disabled: '',
hover: 'hover:bg-purple-800 dark:hover:bg-purple-700',
text: 'text-purple-600 dark:text-purple-500',
border: 'border-purple-600 dark:border-purple-500',
},
red: {
background: 'bg-red-700 dark:bg-red-600',
disabled: '',
hover: 'hover:bg-red-800 dark:hover:bg-red-700',
text: 'text-red-600 dark:text-red-500',
border: 'border-red-600 dark:border-red-500',
},
}
export function useFlowbiteThemable(): UseFlowbiteThemableReturns {
const theme = inject<Ref<FlowbiteTheme>>(FLOWBITE_THEMABLE_INJECTION_KEY)
const isActive = computed(() => !!theme?.value)
const color = computed(() => theme?.value)
const backgroundClasses = computed(() => {
if(!theme) return ''
return flowbiteThemeClasses[theme.value].background
})
const disabledClasses = computed(() => {
if(!theme) return ''
return flowbiteThemeClasses[theme.value].disabled
})
const hoverClasses = computed(() => {
if(!theme) return ''
return flowbiteThemeClasses[theme.value].hover
})
const textClasses = computed(() => {
if(!theme) return ''
return flowbiteThemeClasses[theme.value].text
})
const borderClasses = computed(() => {
if(!theme) return ''
return flowbiteThemeClasses[theme.value].border
})
return {
backgroundClasses,
disabledClasses,
hoverClasses,
textClasses,
borderClasses,
isActive,
color,
}
}

1
src/components/utils/FlowbiteThemable/injection/config.ts Normal file
View File

@@ -0,0 +1 @@
export const FLOWBITE_THEMABLE_INJECTION_KEY = 'flowbite-themable-injection-key'

5
src/components/utils/FlowbiteThemable/types.d.ts vendored Normal file
View File

@@ -0,0 +1,5 @@
export type FlowbiteTheme = 'blue' | 'green' | 'red' | 'pink' | 'purple'
export type FlowbiteThemablePayload = {
theme: FlowbiteTheme
}

3
src/composables/useClasses.ts Normal file
View File

@@ -0,0 +1,3 @@
export function useClasses() {
}

2
src/index.ts
View File

@@ -4,3 +4,5 @@ export { default as ButtonGroup } from './components/ButtonGroup/ButtonGroup.vue
export { default as Alert } from './components/Alert/Alert.vue' export { default as Alert } from './components/Alert/Alert.vue'
export { default as Tabs } from './components/Tabs/Tabs.vue' export { default as Tabs } from './components/Tabs/Tabs.vue'
export { default as Tab } from './components/Tabs/components/Tab/Tab.vue' export { default as Tab } from './components/Tabs/components/Tab/Tab.vue'
export { default as Dropdown } from './components/Dropdown/Dropdown.vue'
export { default as FlowbiteThemable } from './components/utils/FlowbiteThemable/FlowbiteThemable.vue'

52
src/utils/simplifyTailwindClasses.ts Normal file
View File

@@ -0,0 +1,52 @@
// function to simplify tailwind classes, can be upgraded with RegExp and by minimizing of using array methods
// example:
// simplifyClasses('dark:background-red-600 background-red text-black', 'dark:background-blue')
export type TailwindClassMatcherMap = Record<string, (c: string) => string>
const classTypeMatchers: TailwindClassMatcherMap = {
border: (_class: string): string => {
return _class.substring(0, _class.lastIndexOf('-')) // for splitting border-b-2 and border-red
},
}
const getTypeFromClass = (_class: string, matchers: TailwindClassMatcherMap = classTypeMatchers) => {
const classesToMatch = Object.keys(matchers)
const matchClass = classesToMatch.find(_matchClass => _class.includes(_matchClass)) // TODO: maybe need to filter instead of find
if(!matchClass) return _class.substring(0, _class.indexOf('-'))
return matchers[matchClass as keyof typeof matchers](_class)
}
export function simplifyTailwindClasses(...classes: (string | string[])[]): string {
return classes.reduce((acc: { types: string[], classes: string[] }, value: string | string[]) => {
const currentClasses = Array.isArray(value)
? Array.from(value).map(_ => _.split(' ')).flat() // to support args like ['text-white background-red', 'flex'] etc.
: value.split(' ')
const currentTypes = currentClasses.map(_class => getTypeFromClass(_class))
const typesToAdd = currentTypes.filter(_ => !acc.types.includes(_))
const typesToReplace = currentTypes.filter(_ => acc.types.includes(_))
const newTypes = [...typesToReplace, ...typesToAdd]
const types = [...new Set([...acc.types, ...newTypes])]
const classes = types.map(type => {
if(newTypes.includes(type)) {
const classIndex = currentTypes.indexOf(type)
if(classIndex >= 0)
return currentClasses[classIndex] || ''
}
const classIndex = acc.types.indexOf(type)
if(classIndex >= 0)
return acc.classes[classIndex] || ''
return ''
}).filter(_ => !!_)
return {
types,
classes,
}
}, { types: [], classes: [] }).classes.join(' ')
}
// simplifyClasses('dark:background-red-600 background-red text-400-black', 'dark:background-blue', 'text-600-white', 'dark:background-red-600')

2
vite.config.ts
View File

@@ -7,7 +7,7 @@ export default defineConfig({
plugins: [vue()], plugins: [vue()],
resolve: { resolve: {
alias: { alias: {
'@': resolve(__dirname, 'src'), '@': resolve(__dirname, './src'),
}, },
}, },
build: { build: {