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

@@ -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'
 </script>
 
 # Vue Toggle - Flowbite
@@ -94,3 +95,17 @@ const toggle = ref(false)
 import { FwbToggle } from 'flowbite-vue'
 </script>
 ```
+
+## Label position
+
+<fwb-toggle-example-order />
+```vue
+<template>
+  <fwb-toggle label="Toggle me" />
+  <fwb-toggle label="Toggle me" reverse />
+</template>
+
+<script setup>
+import { FwbToggle } from 'flowbite-vue'
+</script>
+```

docs/components/toggle/examples/FwbToggleExampleOrder.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="vp-raw grid gap-3">
+    <fwb-toggle label="Toggle me" />
+    <fwb-toggle
+      label="Toggle me"
+      reverse
+    />
+  </div>
+</template>
+
+<script setup>
+import { FwbToggle } from '../../../../src/index'
+</script>

src/components/FwbToggle/FwbToggle.vue

@@ -1,13 +1,13 @@
 <template>
-  <label :class="labelClasses">
+  <label :class="[labelClasses, labelOrder]">
     <input
       v-model="model"
       :disabled="disabled"
       class="sr-only peer"
       type="checkbox"
     >
     <span :class="[toggleClasses, toggleSize, toggleColor]" />
-    <span :class="toggleBallClasses">{{ label }}</span>
+    <span :class="[toggleBallClasses, toggleBallOrder]">{{ label }}</span>
   </label>
 </template>
 
@@ -22,6 +22,7 @@ interface ToggleProps {
   label?: string;
   modelValue?: boolean;
   size?: InputSize;
+  reverse?: boolean;
 }
 
 const props = withDefaults(defineProps<ToggleProps>(), {
@@ -30,6 +31,7 @@ const props = withDefaults(defineProps<ToggleProps>(), {
   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))
 </script>

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<string, string> = {
+  direct: '',
+  reverse: 'flex-row-reverse',
+}
+
+const toggleBallOrderClasses: Record<string, string> = {
+  direct: 'ms-3',
+  reverse: 'me-3',
+}
+
 const toggleSizeClasses: Record<InputSize, string> = {
-  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<string, string> = {
   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<string, string> = {
 export type UseToggleClassesProps = {
   size: Ref<InputSize>
   color: Ref<string>
+  reverse: Ref<boolean>
 }
 
 export function useToggleClasses (props: UseToggleClassesProps) {
@@ -30,12 +43,16 @@ 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,
     toggleSize,
     toggleClasses,
     toggleColor,
     toggleBallClasses,
+    toggleBallOrder,
+    labelOrder,
   }
 }