v4.3.0

admin/src/layouts/ui-kit/HToggle.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+  import { Switch } from '@headlessui/vue';
+
+  withDefaults(
+    defineProps<{
+      disabled?: boolean;
+      onIcon?: string;
+      offIcon?: string;
+    }>(),
+    {
+      disabled: false,
+    },
+  );
+
+  const enabled = defineModel<boolean>();
+</script>
+
+<template>
+  <Switch
+    v-model="enabled"
+    :disabled="disabled"
+    class="relative h-5 w-10 inline-flex flex-shrink-0 cursor-pointer border-2 border-transparent rounded-full p-0 vertical-middle disabled-cursor-not-allowed disabled-opacity-50 focus-outline-none focus-visible-ring-2 focus-visible-ring-offset-2 focus-visible-ring-offset-white dark-focus-visible-ring-offset-gray-900"
+    :class="[enabled ? 'bg-ui-primary' : 'bg-stone-3 dark-bg-stone-7']"
+  >
+    <span
+      class="pointer-events-none relative inline-block h-4 w-4 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out dark-bg-dark"
+      :class="[enabled ? 'translate-x-5' : 'translate-x-0']"
+    >
+      <span class="absolute inset-0 h-full w-full flex items-center justify-center">
+        <SvgIcon
+          v-if="(enabled && onIcon) || (!enabled && offIcon)"
+          :name="(enabled ? onIcon : offIcon) as string"
+          class="h-3 w-3 text-stone-7 dark-text-stone-3"
+        />
+      </span>
+    </span>
+  </Switch>
+</template>