From 0cc202f2b06749ebeabd35e62f2072f3da7e1516 Mon Sep 17 00:00:00 2001 From: Andrey Akulov Date: Sat, 3 Aug 2024 05:07:02 +0500 Subject: [PATCH] feat: Toggle label position (#296) * Fixed sizes for toggle components * Implemented option to swap the order of toggle and the label for Toggle component --- docs/components/toggle.md | 15 +++++++++++ .../toggle/examples/FwbToggleExampleOrder.vue | 13 +++++++++ src/components/FwbToggle/FwbToggle.vue | 8 ++++-- .../FwbToggle/composables/useToggleClasses.ts | 27 +++++++++++++++---- 4 files changed, 56 insertions(+), 7 deletions(-) create mode 100644 docs/components/toggle/examples/FwbToggleExampleOrder.vue diff --git a/docs/components/toggle.md b/docs/components/toggle.md index dc31732a..5760ede2 100644 --- a/docs/components/toggle.md +++ b/docs/components/toggle.md @@ -4,6 +4,7 @@ import FwbToggleExampleColors from './toggle/examples/FwbToggleExampleColors.vue' import FwbToggleExampleDisabled from './toggle/examples/FwbToggleExampleDisabled.vue' import FwbToggleExampleSize from './toggle/examples/FwbToggleExampleSize.vue' + import FwbToggleExampleOrder from './toggle/examples/FwbToggleExampleOrder.vue' # Vue Toggle - Flowbite @@ -94,3 +95,17 @@ const toggle = ref(false) import { FwbToggle } from 'flowbite-vue' ``` + +## Label position + + +```vue + + + +``` \ No newline at end of file diff --git a/docs/components/toggle/examples/FwbToggleExampleOrder.vue b/docs/components/toggle/examples/FwbToggleExampleOrder.vue new file mode 100644 index 00000000..938b74ca --- /dev/null +++ b/docs/components/toggle/examples/FwbToggleExampleOrder.vue @@ -0,0 +1,13 @@ + + + diff --git a/src/components/FwbToggle/FwbToggle.vue b/src/components/FwbToggle/FwbToggle.vue index 64e666d7..ee542a99 100644 --- a/src/components/FwbToggle/FwbToggle.vue +++ b/src/components/FwbToggle/FwbToggle.vue @@ -1,5 +1,5 @@ @@ -22,6 +22,7 @@ interface ToggleProps { label?: string; modelValue?: boolean; size?: InputSize; + reverse?: boolean; } const props = withDefaults(defineProps(), { @@ -30,6 +31,7 @@ const props = withDefaults(defineProps(), { label: '', modelValue: false, size: 'md', + reverse: false, }) const emit = defineEmits(['update:modelValue']) @@ -48,5 +50,7 @@ const { toggleClasses, toggleColor, toggleBallClasses, + toggleBallOrder, + labelOrder, } = useToggleClasses(toRefs(props)) diff --git a/src/components/FwbToggle/composables/useToggleClasses.ts b/src/components/FwbToggle/composables/useToggleClasses.ts index 4bf91b3f..c063b841 100644 --- a/src/components/FwbToggle/composables/useToggleClasses.ts +++ b/src/components/FwbToggle/composables/useToggleClasses.ts @@ -3,13 +3,25 @@ import type { InputSize } from '@/components/FwbInput/types' // Toggle Background const defaultLabelClasses = 'w-fit relative inline-flex items-center cursor-pointer' -const defaultToggleBackgroundClasses = 'bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[""] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600' -const defaultToggleBallClasses = 'ml-3 text-sm font-medium text-gray-900 dark:text-gray-300' +const defaultToggleBackgroundClasses = 'relative bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[""] after:absolute after:bg-white after:border-gray-300 after:border after:rounded-full after:transition-all dark:border-gray-600 peer-checked:bg-blue-600' +const defaultToggleBallClasses = 'text-sm font-medium text-gray-900 dark:text-gray-300' + +const labelOrderClasses: Record = { + direct: '', + reverse: 'flex-row-reverse', +} + +const toggleBallOrderClasses: Record = { + direct: 'ms-3', + reverse: 'me-3', +} + const toggleSizeClasses: Record = { - lg: 'w-14 h-7 after:top-0.5 after:left-[4px] after:h-6 after:w-6', - md: 'w-11 h-6 after:top-[2px] after:left-[2px] after:h-5 after:w-5', - sm: 'w-9 h-5 after:top-[2px] after:left-[2px] after:h-4 after:w-4', + lg: 'w-14 h-7 after:top-0.5 after:start-[4px] after:h-6 after:w-6', + md: 'w-11 h-6 after:top-[2px] after:start-[2px] after:h-5 after:w-5', + sm: 'w-9 h-5 after:top-[2px] after:start-[2px] after:h-4 after:w-4', } + const toggleColorClasses: Record = { red: 'peer-focus:ring-red-300 dark:peer-focus:ring-red-800 peer-checked:bg-red-600', green: 'peer-focus:ring-green-300 dark:peer-focus:ring-green-800 peer-checked:bg-green-600', @@ -22,6 +34,7 @@ const toggleColorClasses: Record = { export type UseToggleClassesProps = { size: Ref color: Ref + reverse: Ref } export function useToggleClasses (props: UseToggleClassesProps) { @@ -30,6 +43,8 @@ export function useToggleClasses (props: UseToggleClassesProps) { const toggleSize = computed(() => toggleSizeClasses[props.size.value]) const toggleColor = computed(() => toggleColorClasses[props.color.value]) const toggleBallClasses = computed(() => defaultToggleBallClasses) + const toggleBallOrder = computed(() => toggleBallOrderClasses[props.reverse.value ? 'reverse' : 'direct']) + const labelOrder = computed(() => labelOrderClasses[props.reverse.value ? 'reverse' : 'direct']) return { labelClasses, @@ -37,5 +52,7 @@ export function useToggleClasses (props: UseToggleClassesProps) { toggleClasses, toggleColor, toggleBallClasses, + toggleBallOrder, + labelOrder, } }