diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index db1b1a5..a4feb66 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -11,7 +11,15 @@ function buildSidebar() { items: [ ...getComponents(), ], - }] + }, + { + text: 'Utils', + collapsible: true, + items: [ + ...getUtils(), + ], + }, + ] } function getComponents() { @@ -19,11 +27,18 @@ 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' }, ] } +function getUtils() { + return [ + { text: 'Flowbite Themable', link: '/guide/flowbiteThemable/flowbiteThemable.md' }, + ] +} + /** * This can be used as an example * https://github.com/vuejs/vitepress/blob/master/docs/.vitepress/config.js diff --git a/docs/guide/button/button.md b/docs/guide/button/button.md index 468457a..f34201e 100644 --- a/docs/guide/button/button.md +++ b/docs/guide/button/button.md @@ -22,7 +22,7 @@ reference: [https://flowbite.com/docs/components/buttons/](https://flowbite.com/ ## Prop - color ```typescript -type ButtonVariant = 'default' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple' +type ButtonVariant = 'default' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple' | 'pink' | 'blue' defineProps({ color: { type: String as PropType, diff --git a/docs/guide/button/examples/ButtonColorExample.vue b/docs/guide/button/examples/ButtonColorExample.vue index 3e63035..1e66115 100644 --- a/docs/guide/button/examples/ButtonColorExample.vue +++ b/docs/guide/button/examples/ButtonColorExample.vue @@ -8,6 +8,7 @@ + + +# 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/docs/guide/flowbiteThemable/examples/button/FlowbiteThemableButtonExample.vue b/docs/guide/flowbiteThemable/examples/button/FlowbiteThemableButtonExample.vue new file mode 100644 index 0000000..c06ec51 --- /dev/null +++ b/docs/guide/flowbiteThemable/examples/button/FlowbiteThemableButtonExample.vue @@ -0,0 +1,25 @@ + + 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/examples/tabs/FlowbiteThemableTabsDefaultExample.vue b/docs/guide/flowbiteThemable/examples/tabs/FlowbiteThemableTabsDefaultExample.vue new file mode 100644 index 0000000..bad376e --- /dev/null +++ b/docs/guide/flowbiteThemable/examples/tabs/FlowbiteThemableTabsDefaultExample.vue @@ -0,0 +1,34 @@ + + 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..34482d3 --- /dev/null +++ b/docs/guide/flowbiteThemable/flowbiteThemable.md @@ -0,0 +1,108 @@ + + +# 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** +--- + + + + + + + + + + +## Dropdown + +```vue + + +``` + + + + + + + + + + + +## Button + +```vue + + +``` + + \ No newline at end of file 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 \ 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/Spinner/Spinner.vue b/src/components/Spinner/Spinner.vue index 94c4c65..d64f90f 100644 --- a/src/components/Spinner/Spinner.vue +++ b/src/components/Spinner/Spinner.vue @@ -6,11 +6,9 @@ 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 @@ \ No newline at end of file diff --git a/src/components/Tabs/components/TabPane/useTabClasses.ts b/src/components/Tabs/components/TabPane/composables/useTabClasses.ts similarity index 66% rename from src/components/Tabs/components/TabPane/useTabClasses.ts rename to src/components/Tabs/components/TabPane/composables/useTabClasses.ts index 204e6cf..a624c82 100644 --- a/src/components/Tabs/components/TabPane/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/Tabs/useTabsClasses.ts b/src/components/Tabs/composables/useTabsClasses.ts similarity index 95% rename from src/components/Tabs/useTabsClasses.ts rename to src/components/Tabs/composables/useTabsClasses.ts index 31d5530..0f2de44 100644 --- a/src/components/Tabs/useTabsClasses.ts +++ b/src/components/Tabs/composables/useTabsClasses.ts @@ -1,6 +1,6 @@ import type { Ref } from 'vue' import { computed } from 'vue' -import type { TabsVariant } from './Tabs.vue' +import type { TabsVariant } from '../types' export type UseTabsClassesProps = { variant: TabsVariant diff --git a/src/components/Tabs/config.ts b/src/components/Tabs/injection/config.ts similarity index 89% rename from src/components/Tabs/config.ts rename to src/components/Tabs/injection/config.ts index c34c2fe..19c3781 100644 --- a/src/components/Tabs/config.ts +++ b/src/components/Tabs/injection/config.ts @@ -1,3 +1,5 @@ +// dependency injection config for tabs + 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_VISIBILITY_DIRECTIVE_INJECTION_KEY = 'flowbite-tab-visibility-directive-injection' diff --git a/src/components/Tabs/types.d.ts b/src/components/Tabs/types.d.ts new file mode 100644 index 0000000..913cde7 --- /dev/null +++ b/src/components/Tabs/types.d.ts @@ -0,0 +1 @@ +export type TabsVariant = 'default' | 'underline' | 'pills' \ No newline at end of file diff --git a/src/components/utils/FlowbiteThemable/FlowbiteThemable.vue b/src/components/utils/FlowbiteThemable/FlowbiteThemable.vue new file mode 100644 index 0000000..b0c7e53 --- /dev/null +++ b/src/components/utils/FlowbiteThemable/FlowbiteThemable.vue @@ -0,0 +1,18 @@ + + \ 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..1009c03 --- /dev/null +++ b/src/components/utils/FlowbiteThemable/composables/useFlowbiteThemable.ts @@ -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 + backgroundClasses: Ref + hoverClasses: Ref + disabledClasses: Ref + borderClasses: Ref + isActive: Ref + color: 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?.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, + } +} \ 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/composables/useClasses.ts b/src/composables/useClasses.ts new file mode 100644 index 0000000..5452d0a --- /dev/null +++ b/src/composables/useClasses.ts @@ -0,0 +1,3 @@ +export function useClasses() { + +} \ No newline at end of file diff --git a/src/index.ts b/src/index.ts index 947cf74..d991174 100644 --- a/src/index.ts +++ b/src/index.ts @@ -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 Tabs } from './components/Tabs/Tabs.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' 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 diff --git a/vite.config.ts b/vite.config.ts index d3c43a9..fa20f56 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -7,7 +7,7 @@ export default defineConfig({ plugins: [vue()], resolve: { alias: { - '@': resolve(__dirname, 'src'), + '@': resolve(__dirname, './src'), }, }, build: {