feat(app): #39 Switch

packages/windi/package.json

@@ -47,6 +47,7 @@
     "lint:fix": "eslint . --fix"
   },
   "dependencies": {
+    "@headlessui/vue": "^1.7.15",
     "@heroicons/vue": "^2.0.18",
     "@selemondev/windi-ui": "workspace:^",
     "classnames": "^2.3.2",

packages/windi/src/App.vue

@@ -1,8 +1,11 @@
 <script setup lang='ts'>
+import { ref } from 'vue'
+
+const selected = ref('')
 </script>
 
 <template>
   <div class="grid place-items-center w-full min-h-screen">
-    <WButton variant="default-light" disabled label="Button" />
+    <WSwitch v-model="selected" on-icon="ph:sun" off-icon="ph:moon" class="text-xl" />
   </div>
 </template>

packages/windi/src/Types/componentsTypes/components.ts

@@ -124,6 +124,20 @@ export interface WCheckbox extends WComponentRoot {
 export interface WDivider extends WComponentRoot {
   dividerVertical?: string
 }
+
+export interface WSwitch extends WComponentRoot {
+  switchRounded?: string
+  switchActive?: string
+  switchInActive?: string
+  switchContainer?: string
+  switchContainerActive?: string
+  switchContainerInActive?: string
+  switchIcon?: string
+  switchIconActive?: string
+  switchIconInActive?: string
+  switchIconOn?: string
+  switchIconOff?: string
+}
 export type WAccordionVariant = WithVariantProps<WAccordion>
 
 export type WAccordionItemVariants = WithVariantProps<WAccordionItem>
@@ -151,3 +165,5 @@ export type WInputVariants = WithVariantProps<WInput>
 export type WCheckboxVariants = WithVariantProps<WCheckbox>
 
 export type WDividerVariants = WithVariantProps<WDivider>
+
+export type WSwitchVariants = WithVariantProps<WSwitch>

packages/windi/src/Types/enums/Components.ts

@@ -13,4 +13,5 @@ export enum Components {
   WCheckbox = 'WCheckbox',
   WKbd = 'WKbd',
   WDivider = 'WDivider',
+  WSwitch = 'WSwitch',
 }

packages/windi/src/components/Switch/WSwitch.vue

@@ -0,0 +1,93 @@
+<script setup lang='ts'>
+import { computed, defineComponent } from 'vue'
+import classNames from 'classnames'
+import { Switch } from '@headlessui/vue'
+import { Icon } from '@iconify/vue'
+import { getVariantPropsWithClassesList } from '../../utils/getVariantProps'
+import type { VariantJSWithClassesListProps } from '../../utils/getVariantProps'
+import type { WSwitch } from '../../Types/componentsTypes/components'
+import { useVariants } from '../../composables/useVariants'
+import { Components } from '../../Types/enums/Components'
+
+const props = defineProps({
+  ...getVariantPropsWithClassesList<WSwitch>(),
+  name: {
+    type: String,
+    default: null,
+  },
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  onIcon: {
+    type: String,
+    default: null,
+  },
+
+  offIcon: {
+    type: String,
+    default: null,
+  },
+})
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: boolean): void
+}>()
+
+const toggle = computed({
+  get() {
+    return props.modelValue
+  },
+
+  set(value) {
+    return emit('update:modelValue', value)
+  },
+})
+
+const variant = computed(() => {
+  const customProps = {
+    ...props,
+    variant: props.variant,
+  }
+  return useVariants<WSwitch>(
+    Components.WSwitch,
+    customProps as VariantJSWithClassesListProps<WSwitch>,
+  )
+})
+
+const switchClassWrapper = computed(() => {
+  return classNames(
+    variant.value.root,
+    variant.value.switchRounded,
+    toggle.value ? variant.value.switchActive : variant.value.switchInActive,
+  )
+})
+</script>
+
+<script lang='ts'>
+export default defineComponent({
+  name: Components.WSwitch,
+})
+</script>
+
+<template>
+  <Switch
+    v-model="toggle"
+    :name="name"
+    :disabled="disabled"
+    :class="switchClassWrapper"
+  >
+    <span :class="[toggle ? variant.switchContainerActive : variant.switchContainerInActive, variant.switchContainer]">
+      <span v-if="props.onIcon" :class="[toggle ? variant.switchIconActive : variant.switchIconInActive, variant.switchIcon]" aria-hidden="true">
+        <Icon :icon="onIcon" :class="variant.switchIconOn" />
+      </span>
+      <span v-if="props.offIcon" :class="[toggle ? variant.switchIconInActive : variant.switchIconActive, variant.switchIcon]" aria-hidden="true">
+        <Icon :icon="offIcon" :class="variant.switchIconOff" />
+      </span>
+    </span>
+  </Switch>
+</template>

packages/windi/src/components/Switch/index.ts

@@ -0,0 +1,5 @@
+import Switch from './WSwitch.vue'
+
+export default {
+  Switch,
+}

packages/windi/src/index.ts

@@ -15,6 +15,7 @@ import Kbd from './components/Kbd/WKbd.vue'
 import Input from './components/Input/WInput.vue'
 import Checkbox from './components/Checkbox/WCheckbox.vue'
 import Divider from './components/Divider/WDivider.vue'
+import Switch from './components/Switch/WSwitch.vue'
 import windiTheme from './theme/windiTheme'
 
 const components: Record<string, ReturnType<typeof defineComponent>> = {
@@ -32,6 +33,7 @@ const components: Record<string, ReturnType<typeof defineComponent>> = {
   Input,
   Checkbox,
   Divider,
+  Switch,
 }
 
 function install(app: App, configuration: WindiUIConfiguration) {
@@ -56,3 +58,4 @@ export { default as Kbd } from './components/Kbd'
 export { default as Input } from './components/Input'
 export { default as Checkbox } from './components/Checkbox'
 export { default as Divider } from './components/Divider'
+export { default as Switch } from './components/Switch'

packages/windi/src/theme/windiTheme.ts

@@ -660,6 +660,31 @@ export default {
       },
     },
   },
+
+  WSwitch: {
+    base: {
+      root: 'relative inline-flex h-5 w-9 focus-visible:ring-2 focus-visible:ring-green-500 dark:focus-visible:ring-green-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 flex-shrink-0 border-2 border-transparent disabled:cursor-not-allowed disabled:opacity-50 focus:outline-none',
+      switchRounded: 'rounded-full',
+      switchActive: 'bg-green-500 dark:bg-green-400',
+      switchInActive: 'bg-gray-200 dark:bg-gray-700',
+      switchContainer: 'pointer-events-none relative inline-block h-4 w-4 rounded-full bg-white dark:bg-gray-900 shadow transform ring-0 transition ease-in-out duration-200',
+      switchContainerActive: 'translate-x-4 rtl:-translate-x-4',
+      switchContainerInActive: 'translate-x-0 rtl:-translate-x-0',
+      switchIcon: 'absolute inset-0 h-full w-full flex items-center justify-center transition-opacity',
+      switchIconActive: 'opacity-100 ease-in duration-200',
+      switchIconInActive: 'opacity-0 ease-out duration-100',
+      switchIconOn: 'h-3 w-3 text-green-500 dark:text-green-400',
+      switchIconOff: 'h-3 w-3 text-gray-400 dark:text-gray-500',
+    },
+
+    defaults: {
+      root: 'relative inline-flex h-5 w-9 focus-visible:ring-2 focus-visible:ring-green-500 dark:focus-visible:ring-green-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 flex-shrink-0 border-2 border-transparent disabled:cursor-not-allowed disabled:opacity-50 focus:outline-none',
+      switchRounded: 'rounded-full',
+      switchActive: 'bg-green-500 dark:bg-green-400',
+      switchInActive: 'bg-gray-200 dark:bg-gray-700',
+    },
+  },
+
   transitions: {
     scale: {
       'enter-active-class': 'duration-200 ease-[cubic-bezier(0.175,0.885,0.32,1.475)]',