feat(component): New toggle component (#152)

* feat(component): New toggle component

* adding docs for toggle

* blank lines

* fix type

* Update docs/components/toggle.md

* Update docs/components/toggle/examples/SizeToggle.vue

* Update src/components/Toggle/Toggle.vue

* Update src/components/Toggle/composables/useToggleClasses.ts

* Update src/components/Toggle/composables/useToggleClasses.ts

* Update src/components/Toggle/composables/useToggleClasses.ts

---------

Co-authored-by: Ilya Artamonov <ilya.sosidka@gmail.com>

docs/.vitepress/config.ts

@@ -66,6 +66,8 @@ function getFormComponents() {
   return [
     { text: 'Input', link: 'components/input' },
     { text: 'Checkbox', link: 'components/checkbox' },
+    { text: 'Select', link: 'components/select' },
+    { text: 'Toggle', link: 'components/toggle' },
   ]
 }
 

docs/components/toggle.md

@@ -0,0 +1,91 @@
+<script setup>
+  import DefaultToggle from './toggle/examples/DefaultToggle.vue'
+  import CheckedToggle from './toggle/examples/CheckedToggle.vue'
+  import DisabledToggle from './toggle/examples/DisabledToggle.vue'
+  import ColorsToggle from './toggle/examples/ColorsToggle.vue'
+  import SizeToggle from './toggle/examples/SizeToggle.vue'
+</script>
+
+# Vue Toggle Component - Flowbite
+
+#### Use the toggle component to switch between a binary state of true or false using a single click available in multiple sizes, variants, and colors
+
+---
+
+:::tip
+Original reference: [https://flowbite.com/docs/forms/toggle/](https://flowbite.com/docs/forms/toggle/)
+:::
+
+The toggle component can be used to receive a simple “yes” or “no” type of answer from the user by choosing a single option from two options available in multiple sizes, styles, and colors coded with the utility classes from Tailwind CSS and with dark mode support.
+
+## Default toggle
+```vue
+<script setup>
+import { Toggle } from 'flowbite-vue'
+import { ref } from 'vue'
+
+const toggle = ref(false)
+</script>
+<template>
+  <Toggle v-model="toggle" label="Toggle me" />
+</template>
+```
+
+<DefaultToggle />
+
+## Checked toggle
+```vue
+<script setup>
+import { Toggle } from 'flowbite-vue'
+import { ref } from 'vue'
+
+const toggle = ref(true)
+</script>
+<template>
+  <Toggle v-model="toggle" label="Toggle me" />
+</template>
+```
+
+<CheckedToggle />
+
+## Disabled toggle
+```vue
+<script setup>
+import { Toggle } from 'flowbite-vue'
+import { ref } from 'vue'
+
+const toggle = ref(false)
+</script>
+<template>
+  <Toggle v-model="toggle" label="Toggle me" :disabled="true" />
+</template>
+```
+
+<DisabledToggle />
+
+## Colors
+```vue
+<template>
+  <div>
+    <Toggle label="Red" color="red" />
+    <Toggle label="Green" color="green" />
+    <Toggle label="Purple" color="purple" />
+    <Toggle label="Yellow" color="yellow" />
+    <Toggle label="Teal" color="teal" />
+    <Toggle label="Orange" color="orange" />
+  </div>
+</template>
+```
+
+<ColorsToggle />
+
+## Size
+```vue
+<template>
+  <Toggle label="Small" size="sm" />
+  <Toggle label="Medium" size="md" />
+  <Toggle label="Large" size="lg" />
+</template>
+```
+
+<SizeToggle />

docs/components/toggle/examples/CheckedToggle.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="flex flex-col gap-2">
+    <Toggle v-model="toggle" label="Toggle me" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Toggle } from '../../../../src/index'
+
+const toggle = ref(true)
+</script>

docs/components/toggle/examples/ColorsToggle.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="flex justify-between">
+    <Toggle v-model="toggle1" label="Red" color="red" />
+    <Toggle v-model="toggle2" label="Green" color="green" />
+    <Toggle v-model="toggle3" label="Purple" color="purple" />
+    <Toggle v-model="toggle4" label="Yellow" color="yellow" />
+    <Toggle v-model="toggle5" label="Teal" color="teal" />
+    <Toggle v-model="toggle6" label="Orange" color="orange" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Toggle } from '../../../../src/index'
+
+const toggle1 = ref(true)
+const toggle2 = ref(true)
+const toggle3 = ref(true)
+const toggle4 = ref(true)
+const toggle5 = ref(true)
+const toggle6 = ref(true)
+</script>

docs/components/toggle/examples/DefaultToggle.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="flex flex-col gap-2">
+    <Toggle v-model="toggle" label="Toggle me" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Toggle } from '../../../../src/index'
+
+const toggle = ref(false)
+</script>

docs/components/toggle/examples/DisabledToggle.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="flex flex-col gap-2">
+    <Toggle v-model="toggle" label="Toggle me" :disabled="true" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Toggle } from '../../../../src/index'
+
+const toggle = ref(false)
+</script>

docs/components/toggle/examples/SizeToggle.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="flex flex-col gap-2">
+    <Toggle label="Small" size="sm" />
+    <Toggle label="Medium" size="md" />
+    <Toggle label="Large" size="lg" />
+  </div>
+</template>
+
+<script setup>
+import { Toggle } from '../../../../src/index'
+
+</script>

src/components/Toggle/Toggle.vue

@@ -0,0 +1,41 @@
+<template>
+  <label :class="labelClasses">
+    <input :disabled="disabled" v-model="model" type="checkbox" class="sr-only peer" />
+    <span :class="[toggleClasses, toggleSize, toggleColor]"></span>
+    <span :class="toggleBallClasses">{{ label }}</span>
+  </label>
+</template>
+
+<script lang="ts" setup>
+import { toRefs, computed } from 'vue'
+import { useToggleClasses } from './composables/useToggleClasses'
+import type { InputSize } from '@/components/Input/types'
+
+interface ToggleProps {
+  modelValue?: boolean;
+  label?: '';
+  color?: '';
+  size?: InputSize;
+  disabled?: boolean;
+}
+
+const props = withDefaults(defineProps<ToggleProps>(), {
+  modelValue: false,
+  label: '',
+  color: '',
+  size: 'md',
+  disabled: false,
+})
+
+const emit = defineEmits(['update:modelValue'])
+const model = computed({
+  get() {
+    return props.modelValue
+  },
+  set(val) {
+    emit('update:modelValue', val)
+  },
+})
+
+const { labelClasses, toggleSize, toggleClasses, toggleColor, toggleBallClasses } = useToggleClasses(toRefs(props))
+</script>

src/components/Toggle/composables/useToggleClasses.ts

@@ -0,0 +1,56 @@
+import type { Ref } from 'vue'
+import { computed } from 'vue'
+import type { InputSize } from '@/components/Input/types'
+
+// Toggle Background
+const defaultLabelClasses = 'w-fit relative inline-flex items-center cursor-pointer'
+const defaultToggleBackgroundClasses = 'w-11 h-6 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 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',
+}
+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',
+  purple: 'peer-focus:ring-purple-300 dark:peer-focus:ring-purple-800 peer-checked:bg-purple-600',
+  yellow: 'peer-focus:ring-yellow-300 dark:peer-focus:ring-yellow-800 peer-checked:bg-yellow-400',
+  teal: 'peer-focus:ring-teal-300 dark:peer-focus:ring-teal-800 peer-checked:bg-teal-600',
+  orange: 'peer-focus:ring-orange-300 dark:peer-focus:ring-orange-800 peer-checked:bg-orange-500',
+}
+
+export type UseToggleClassesProps = {
+  size: Ref<InputSize>
+  color: Ref<string>
+}
+
+export function useToggleClasses(props: UseToggleClassesProps) {
+  const labelClasses = computed(() => {
+    return defaultLabelClasses
+  })
+
+  const toggleClasses = computed(() => {
+    return defaultToggleBackgroundClasses
+  })
+
+  const toggleSize = computed(() => {
+    return toggleSizeClasses[props.size.value]
+  })
+
+  const toggleColor = computed(() => {
+    return toggleColorClasses[props.color.value]
+  })
+
+  const toggleBallClasses = computed(() => {
+    return defaultToggleBallClasses
+  })
+
+  return { 
+    labelClasses,
+    toggleSize,
+    toggleClasses,
+    toggleColor,
+    toggleBallClasses,
+  }
+}

src/index.ts

@@ -52,6 +52,10 @@ export { default as Input } from './components/Input/Input.vue'
 
 export { default as SlotListener } from './components/utils/SlotListener/SlotListener.vue'
 
+export { default as Checkbox } from './components/Checkbox/Checkbox.vue'
+
 export { default as Select } from './components/Select/Select.vue'
 
+export { default as Toggle } from './components/Toggle/Toggle.vue'
+
 export * from './composables'