From a7f0ba045e3d24dccccc9b63e0c00bd94a907571 Mon Sep 17 00:00:00 2001 From: Alexandr Date: Wed, 6 Jul 2022 15:36:58 +0300 Subject: [PATCH 1/5] fix: docs tabs --- docs/guide/tabs/tabs.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/docs/guide/tabs/tabs.md b/docs/guide/tabs/tabs.md index f5ebd6f..648dd18 100644 --- a/docs/guide/tabs/tabs.md +++ b/docs/guide/tabs/tabs.md @@ -4,6 +4,10 @@ import TabsPillsExample from './examples/TabsPillsExample.vue'; import TabsUnderlineExample from './examples/TabsUnderlineExample.vue'; +# Tabs + +reference: [https://flowbite.com/docs/components/tabs/](https://flowbite.com/docs/components/tabs/) + ## Prop - variant (default) ```typescript @@ -76,6 +80,7 @@ const activeTab = ref('first') + ```vue diff --git a/src/components/Tabs/components/Tab/Tab.vue b/src/components/Tabs/components/Tab/Tab.vue index b4849b4..b3739a0 100644 --- a/src/components/Tabs/components/Tab/Tab.vue +++ b/src/components/Tabs/components/Tab/Tab.vue @@ -14,7 +14,7 @@ diff --git a/docs/guide/flowbiteThemable/examples/tabs/FlowbiteThemableTabsPillsExample.vue b/docs/guide/flowbiteThemable/examples/tabs/FlowbiteThemableTabsPillsExample.vue new file mode 100644 index 0000000..78b99c7 --- /dev/null +++ b/docs/guide/flowbiteThemable/examples/tabs/FlowbiteThemableTabsPillsExample.vue @@ -0,0 +1,34 @@ + + diff --git a/docs/guide/flowbiteThemable/examples/tabs/FlowbiteThemableTabsUnderlineExample.vue b/docs/guide/flowbiteThemable/examples/tabs/FlowbiteThemableTabsUnderlineExample.vue new file mode 100644 index 0000000..4e5336f --- /dev/null +++ b/docs/guide/flowbiteThemable/examples/tabs/FlowbiteThemableTabsUnderlineExample.vue @@ -0,0 +1,34 @@ + + diff --git a/docs/guide/flowbiteThemable/flowbiteThemable.md b/docs/guide/flowbiteThemable/flowbiteThemable.md new file mode 100644 index 0000000..1b247ff --- /dev/null +++ b/docs/guide/flowbiteThemable/flowbiteThemable.md @@ -0,0 +1,62 @@ + + +# Flowbite Themable + +You can use this wrapper for styling components with no color prop(like tabs, dropdown etc.) + +## Tabs + +```vue + + +``` + +### **variant: pills** +--- + + + + + + + + + + +### **variant: underline** +--- + + + + + + + + + + +### **variant: default** +--- + + + + + + + + + \ No newline at end of file diff --git a/src/components/Button/composables/useButtonClasses.ts b/src/components/Button/composables/useButtonClasses.ts index afefb62..0e453d9 100644 --- a/src/components/Button/composables/useButtonClasses.ts +++ b/src/components/Button/composables/useButtonClasses.ts @@ -3,7 +3,6 @@ import { computed, useSlots } from 'vue' import classNames from 'classnames' import type { ButtonDuotoneGradient, ButtonGradient, ButtonMonochromeGradient, ButtonSize, ButtonVariant } from '../types' - export type ButtonClassMap = { hover: Record, default: Record } const buttonColorClasses: ButtonClassMap = { diff --git a/src/components/Spinner/composables/useSpinnerClasses.ts b/src/components/Spinner/composables/useSpinnerClasses.ts index 71534b5..bfe0524 100644 --- a/src/components/Spinner/composables/useSpinnerClasses.ts +++ b/src/components/Spinner/composables/useSpinnerClasses.ts @@ -1,4 +1,4 @@ -import type { SpinnerColor, SpinnerSize } from './Spinner.vue' +import type { SpinnerColor, SpinnerSize } from '../types' import { computed } from 'vue' import type { Ref } from 'vue' import classNames from 'classnames' diff --git a/src/components/Tabs/components/TabPane/TabPane.vue b/src/components/Tabs/components/TabPane/TabPane.vue index 4670fbd..61abe8a 100644 --- a/src/components/Tabs/components/TabPane/TabPane.vue +++ b/src/components/Tabs/components/TabPane/TabPane.vue @@ -6,7 +6,7 @@ \ No newline at end of file diff --git a/src/components/Tabs/components/TabPane/composables/useTabClasses.ts b/src/components/Tabs/components/TabPane/composables/useTabClasses.ts index 204e6cf..a624c82 100644 --- a/src/components/Tabs/components/TabPane/composables/useTabClasses.ts +++ b/src/components/Tabs/components/TabPane/composables/useTabClasses.ts @@ -1,6 +1,8 @@ import type { Ref } 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 } @@ -30,15 +32,28 @@ export function useTabClasses(props: UseTabClassesProps): { tabClasses: Ref, } { + const theme = useFlowbiteThemable() + const tabClasses = computed(() => { + const isActiveTheme = theme.isActive.value + const tabClassType: keyof TabClassMap = props.active.value ? 'active' : props.disabled.value ? 'disabled' : 'default' if(props.variant === 'default') - return defaultTabClasses[tabClassType] + return simplifyTailwindClasses( + defaultTabClasses[tabClassType], + isActiveTheme && tabClassType === 'active' ? theme.textClasses.value : '', + ) 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') - return pillsTabClasses[tabClassType] + return simplifyTailwindClasses( + pillsTabClasses[tabClassType], + isActiveTheme && tabClassType === 'active' ? [theme.backgroundClasses.value, 'text-white'] : '', + ) return '' }) diff --git a/src/components/utils/FlowbiteThemable/FlowbiteThemable.vue b/src/components/utils/FlowbiteThemable/FlowbiteThemable.vue new file mode 100644 index 0000000..a85bfc2 --- /dev/null +++ b/src/components/utils/FlowbiteThemable/FlowbiteThemable.vue @@ -0,0 +1,20 @@ + + \ No newline at end of file diff --git a/src/components/utils/FlowbiteThemable/composables/useFlowbiteThemable.ts b/src/components/utils/FlowbiteThemable/composables/useFlowbiteThemable.ts new file mode 100644 index 0000000..0e8cf21 --- /dev/null +++ b/src/components/utils/FlowbiteThemable/composables/useFlowbiteThemable.ts @@ -0,0 +1,98 @@ +import type { FlowbiteThemablePayload, 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 + backgroundClasses: Ref + hoverClasses: Ref + disabledClasses: Ref + borderClasses: Ref + isActive: Ref +} + +type FlowbiteThemeMap = { background: string, disabled: string, hover: string, text: string, border: string } +type FlowbiteThemes = Record + +const flowbiteThemesColors: FlowbiteTheme[] = ['blue', 'green', 'red', 'pink', 'purple'] + +const flowbiteThemeClasses: FlowbiteThemes = { + 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>(FLOWBITE_THEMABLE_INJECTION_KEY) + + const isActive = computed(() => !!theme) + + 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, + } +} \ No newline at end of file diff --git a/src/components/utils/FlowbiteThemable/injection/config.ts b/src/components/utils/FlowbiteThemable/injection/config.ts new file mode 100644 index 0000000..cb3f774 --- /dev/null +++ b/src/components/utils/FlowbiteThemable/injection/config.ts @@ -0,0 +1 @@ +export const FLOWBITE_THEMABLE_INJECTION_KEY = 'flowbite-themable-injection-key' \ No newline at end of file diff --git a/src/components/utils/FlowbiteThemable/types.d.ts b/src/components/utils/FlowbiteThemable/types.d.ts new file mode 100644 index 0000000..20172b3 --- /dev/null +++ b/src/components/utils/FlowbiteThemable/types.d.ts @@ -0,0 +1,5 @@ +export type FlowbiteTheme = 'blue' | 'green' | 'red' | 'pink' | 'purple' + +export type FlowbiteThemablePayload = { + theme: FlowbiteTheme +} \ No newline at end of file diff --git a/src/index.ts b/src/index.ts index 947cf74..ddc40ac 100644 --- a/src/index.ts +++ b/src/index.ts @@ -4,3 +4,4 @@ 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' +export { default as FlowbiteThemable } from './components/utils/FlowbiteThemable/FlowbiteThemable.vue' diff --git a/src/utils/simplifyTailwindClasses.ts b/src/utils/simplifyTailwindClasses.ts new file mode 100644 index 0000000..4e080e5 --- /dev/null +++ b/src/utils/simplifyTailwindClasses.ts @@ -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> + +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') \ No newline at end of file From a5ffeffb826fe65a1ad5601cac868665327b35f0 Mon Sep 17 00:00:00 2001 From: Alexandr Date: Fri, 8 Jul 2022 20:36:05 +0300 Subject: [PATCH 4/5] feat: add dropdown --- docs/.vitepress/config.ts | 1 + docs/guide/dropdown/dropdown.md | 40 ++++++++++++ .../examples/DropdownPlacementExample.vue | 29 +++++++++ package-lock.json | 35 +++++----- package.json | 3 + .../Button/composables/useButtonClasses.ts | 17 +++-- src/components/Dropdown/Dropdown.vue | 54 +++++++++++++++ .../composables/useDropdownClasses.ts | 65 +++++++++++++++++++ src/components/Dropdown/types.d.ts | 1 + .../FlowbiteThemable/FlowbiteThemable.vue | 4 +- .../composables/useFlowbiteThemable.ts | 7 +- src/index.ts | 1 + 12 files changed, 228 insertions(+), 29 deletions(-) create mode 100644 docs/guide/dropdown/dropdown.md create mode 100644 docs/guide/dropdown/examples/DropdownPlacementExample.vue create mode 100644 src/components/Dropdown/Dropdown.vue create mode 100644 src/components/Dropdown/composables/useDropdownClasses.ts create mode 100644 src/components/Dropdown/types.d.ts diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index b137ade..a4feb66 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -27,6 +27,7 @@ function getComponents() { { text: 'Alert', link: '/guide/alert/alert.md' }, { text: 'Button', link: '/guide/button/button.md' }, { text: 'Button Group', link: '/guide/buttonGroup/buttonGroup.md' }, + { text: 'Dropdown', link: '/guide/dropdown/dropdown.md' }, { text: 'Spinner', link: '/guide/spinner/spinner.md' }, { text: 'Tabs', link: '/guide/tabs/tabs.md' }, ] diff --git a/docs/guide/dropdown/dropdown.md b/docs/guide/dropdown/dropdown.md new file mode 100644 index 0000000..6d5a043 --- /dev/null +++ b/docs/guide/dropdown/dropdown.md @@ -0,0 +1,40 @@ + + +# Dropdown + + +## Props - placement + +```vue + + +``` + + diff --git a/docs/guide/dropdown/examples/DropdownPlacementExample.vue b/docs/guide/dropdown/examples/DropdownPlacementExample.vue new file mode 100644 index 0000000..6f69e78 --- /dev/null +++ b/docs/guide/dropdown/examples/DropdownPlacementExample.vue @@ -0,0 +1,29 @@ + + diff --git a/package-lock.json b/package-lock.json index cda5ba2..a4974c1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -323,8 +323,7 @@ "@types/web-bluetooth": { "version": "0.0.14", "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.14.tgz", - "integrity": "sha512-5d2RhCard1nQUC3aHcq/gHzWYO6K0WJmAbjO7mQJgCQKtZpgXxv1rOM6O/dBDhDYYVutk1sciOgNSe+5YyfM8A==", - "dev": true + "integrity": "sha512-5d2RhCard1nQUC3aHcq/gHzWYO6K0WJmAbjO7mQJgCQKtZpgXxv1rOM6O/dBDhDYYVutk1sciOgNSe+5YyfM8A==" }, "@typescript-eslint/eslint-plugin": { "version": "5.30.0", @@ -596,28 +595,25 @@ "dev": true }, "@vueuse/core": { - "version": "8.7.5", - "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-8.7.5.tgz", - "integrity": "sha512-tqgzeZGoZcXzoit4kOGLWJibDMLp0vdm6ZO41SSUQhkhtrPhAg6dbIEPiahhUu6sZAmSYvVrZgEr5aKD51nrLA==", - "dev": true, + "version": "8.9.1", + "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-8.9.1.tgz", + "integrity": "sha512-a7goYb/gJxjXRBw4Fr/jEACiN33ghwM1ohJVu+Zwsr3lNL4qCQ1nU+ogta98lNg5hXJxWj7mYEmQDjjyWOu5nA==", "requires": { "@types/web-bluetooth": "^0.0.14", - "@vueuse/metadata": "8.7.5", - "@vueuse/shared": "8.7.5", + "@vueuse/metadata": "8.9.1", + "@vueuse/shared": "8.9.1", "vue-demi": "*" } }, "@vueuse/metadata": { - "version": "8.7.5", - "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-8.7.5.tgz", - "integrity": "sha512-emJZKRQSaEnVqmlu39NpNp8iaW+bPC2kWykWoWOZMSlO/0QVEmO/rt8A5VhOEJTKLX3vwTevqbiRy9WJRwVOQg==", - "dev": true + "version": "8.9.1", + "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-8.9.1.tgz", + "integrity": "sha512-6LADOlyl3oENHa9dsoY7LXjU1Mh14DnpM6ztETI3hpm5ZffOMIG5CB2Q6aEZfIvYr1lkJVmG2L82wFKk7VRfIA==" }, "@vueuse/shared": { - "version": "8.7.5", - "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-8.7.5.tgz", - "integrity": "sha512-THXPvMBFmg6Gf6AwRn/EdTh2mhqwjGsB2Yfp374LNQSQVKRHtnJ0I42bsZTn7nuEliBxqUrGQm/lN6qUHmhJLw==", - "dev": true, + "version": "8.9.1", + "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-8.9.1.tgz", + "integrity": "sha512-klZfn7ijI3juqVgpfQVrrlBh4uTFajwSCWm8Cdt45Kg26b1LZ9jn9n7J6GhmkFay5016GnjjivQoekQSMeJNUg==", "requires": { "vue-demi": "*" } @@ -2886,10 +2882,9 @@ } }, "vue-demi": { - "version": "0.13.1", - "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.1.tgz", - "integrity": "sha512-xmkJ56koG3ptpLnpgmIzk9/4nFf4CqduSJbUM0OdPoU87NwRuZ6x49OLhjSa/fC15fV+5CbEnrxU4oyE022svg==", - "dev": true + "version": "0.13.2", + "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.2.tgz", + "integrity": "sha512-41ukrclEbMddAyP7PvxMSYqnOSzPV6r7GNnyTSKSCNTaz19GehxmTiXyP9kwHSUv2+Dr6hHqiUiF7L1VAw2KdQ==" }, "vue-eslint-parser": { "version": "9.0.3", diff --git a/package.json b/package.json index a7a7857..4d4db44 100644 --- a/package.json +++ b/package.json @@ -54,5 +54,8 @@ "vitest": "^0.16.0", "vue-eslint-parser": "^9.0.3", "vue-tsc": "^0.38.2" + }, + "dependencies": { + "@vueuse/core": "^8.9.1" } } diff --git a/src/components/Button/composables/useButtonClasses.ts b/src/components/Button/composables/useButtonClasses.ts index 0e453d9..d6ab7ff 100644 --- a/src/components/Button/composables/useButtonClasses.ts +++ b/src/components/Button/composables/useButtonClasses.ts @@ -2,6 +2,7 @@ import type { Ref } from 'vue' import { computed, useSlots } from 'vue' import classNames from 'classnames' import type { ButtonDuotoneGradient, ButtonGradient, ButtonMonochromeGradient, ButtonSize, ButtonVariant } from '../types' +import { useFlowbiteThemable } from '../../utils/FlowbiteThemable/composables/useFlowbiteThemable' export type ButtonClassMap = { hover: Record, default: Record } @@ -160,6 +161,8 @@ const alternativeColors = ['alternative', 'light'] export function useButtonClasses(props: UseButtonClassesProps): { wrapperClasses: Ref, spanClasses: Ref } { const slots = useSlots() + const theme = useFlowbiteThemable() + const sizeClasses = computed(() => { if (props.square.value) return buttonSquareSizeClasses[props.size.value] return buttonSizeClasses[props.size.value] @@ -170,6 +173,8 @@ export function useButtonClasses(props: UseButtonClassesProps): { wrapperClasses const isColor = !!props.color.value const isOutline = props.outline.value + const isActiveTheme = theme.isActive.value + let hoverClass = '' let backgroundClass = '' @@ -193,20 +198,24 @@ export function useButtonClasses(props: UseButtonClassesProps): { wrapperClasses } else if (isColor && isOutline) { // COLOR AND OUTLINE 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) - 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 { console.warn(`cannot use outline prop with "${props.color.value}" color`) // TODO: prettify } } 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) - hoverClass = buttonColorClasses.hover[props.color.value] + hoverClass = buttonColorClasses.hover[color as unknown as keyof typeof buttonColorClasses.hover] } let shadowClass = '' diff --git a/src/components/Dropdown/Dropdown.vue b/src/components/Dropdown/Dropdown.vue new file mode 100644 index 0000000..b5201f5 --- /dev/null +++ b/src/components/Dropdown/Dropdown.vue @@ -0,0 +1,54 @@ + + \ No newline at end of file diff --git a/src/components/Dropdown/composables/useDropdownClasses.ts b/src/components/Dropdown/composables/useDropdownClasses.ts new file mode 100644 index 0000000..44e15ae --- /dev/null +++ b/src/components/Dropdown/composables/useDropdownClasses.ts @@ -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 = { + bottom: '', + left: 'top-0', + right: 'top-0', + top: '', +} + +export type UseDropdownClassesProps = { + placement: Ref + contentRef: Ref + visible: Ref +} + +const placementCalculators: Record 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 + contentStyles: Ref +} { + + 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, + } +} \ No newline at end of file diff --git a/src/components/Dropdown/types.d.ts b/src/components/Dropdown/types.d.ts new file mode 100644 index 0000000..c5b54be --- /dev/null +++ b/src/components/Dropdown/types.d.ts @@ -0,0 +1 @@ +export type DropdownPlacement = 'top' | 'bottom' | 'left' | 'right' \ No newline at end of file diff --git a/src/components/utils/FlowbiteThemable/FlowbiteThemable.vue b/src/components/utils/FlowbiteThemable/FlowbiteThemable.vue index a85bfc2..b0c7e53 100644 --- a/src/components/utils/FlowbiteThemable/FlowbiteThemable.vue +++ b/src/components/utils/FlowbiteThemable/FlowbiteThemable.vue @@ -1,7 +1,5 @@ diff --git a/docs/guide/flowbiteThemable/examples/dropdown/FlowbiteThemableDropdownExample.vue b/docs/guide/flowbiteThemable/examples/dropdown/FlowbiteThemableDropdownExample.vue new file mode 100644 index 0000000..b7691d1 --- /dev/null +++ b/docs/guide/flowbiteThemable/examples/dropdown/FlowbiteThemableDropdownExample.vue @@ -0,0 +1,29 @@ + + diff --git a/docs/guide/flowbiteThemable/flowbiteThemable.md b/docs/guide/flowbiteThemable/flowbiteThemable.md index 1b247ff..34482d3 100644 --- a/docs/guide/flowbiteThemable/flowbiteThemable.md +++ b/docs/guide/flowbiteThemable/flowbiteThemable.md @@ -2,6 +2,8 @@ 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'; # Flowbite Themable @@ -12,12 +14,12 @@ You can use this wrapper for styling components with no color prop(like tabs, dr ```vue