From a5ffeffb826fe65a1ad5601cac868665327b35f0 Mon Sep 17 00:00:00 2001 From: Alexandr Date: Fri, 8 Jul 2022 20:36:05 +0300 Subject: [PATCH] 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 @@