diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index db1b1a5..b137ade 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() { @@ -24,6 +32,12 @@ function getComponents() { ] } +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/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..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