ketekny-ui-kit 1.0.40 → 1.0.42

package/index.js

@@ -7,6 +7,7 @@ import kDialog from './src/ui/kDialog.vue'
 import kDrawer from './src/ui/kDrawer.vue'
 import kInput from './src/ui/kInput.vue'
 import kDateSelector from './src/ui/kDateSelector.vue'
+import kDateSelectorV2 from './src/ui/kDateSelector_v2.vue'
 import kToolbar from './src/ui/kToolbar.vue'
 import kSelect from './src/ui/kSelect.vue'
 import kTable from './src/ui/kTable.vue'
@@ -50,7 +51,7 @@ export {
   kMessage, kCode, kToolbar, kTable, kTabs, kChip, kSpinner, kDatatable, kIcon, kMenu, kSkeleton, kProgressBar, kTree,
 
   // Form Components
-  kButton, kSelect, kUploader, kToggle, kInput, kDateSelector, kEditor, kSelectButton, kTags, kSearch, kArrayList, kList, kTextArea,
+  kButton, kSelect, kUploader, kToggle, kInput, kDateSelector, kDateSelectorV2, kEditor, kSelectButton, kTags, kSearch, kArrayList, kList, kTextArea,
 
   // Dialogs
   kDialog, kDrawer,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ketekny-ui-kit",
   "type": "module",
-  "version": "1.0.40",
+  "version": "1.0.42",
   "description": "A Vue 3 UI component library with Tailwind CSS styling",
   "main": "index.js",
   "files": [

package/src/ui/kDateSelector_v2.vue

@@ -34,7 +34,7 @@ import { ElDatePicker } from 'element-plus'
 const props = defineProps({
   modelValue: { type: [String, Date, Array], default: null },
   id: {
-    type: String,
+    type: [String, Array],
     default: () => `datepicker-${Math.random().toString(36).slice(2, 11)}`,
   },
   label: { type: String, default: '' },

package/src/ui/kDrawer.vue

@@ -1,41 +1,50 @@
 <template>
-  <div v-if="visible" class="fixed inset-0 z-50 flex">
-    <transition name="fade ">
-      <div class="fixed inset-0 bg-black bg-opacity-50 backdrop-blur-sm" @click="close"></div>
-    </transition>
-    <!-- Backdrop -->
-    <!-- <div class="fixed inset-0 bg-black bg-opacity-50 backdrop-blur-sm" @click="close"></div> -->
-
-    <!-- Drawer -->
-    <div
-      class="fixed top-0 bottom-0 z-50 flex w-[calc(100vw-1rem)] max-w-full flex-col bg-white shadow-xl transition-all duration-500 dark:bg-slate-900 sm:w-[400px]"
-      :class="side === 'right' ? 'right-0' : 'left-0'">
-      <!-- Header -->
-      <div class="flex items-center justify-between p-3 text-white bg-primary dark:bg-sky-800 sm:p-4">
-        <div class="text-base font-semibold sm:text-lg">{{ title }}</div>
-        <button @click="close" class="text-white hover:text-gray-200">
-          <X class="w-5 h-5" />
-        </button>
-      </div>
+  <div
+    v-if="visible"
+    class="fixed inset-0 z-50 flex overflow-hidden bg-black/50 backdrop-blur-sm"
+    :class="side === 'right' ? 'justify-end' : 'justify-start'"
+    @click.self="close"
+  >
+    <transition :name="side === 'right' ? 'drawer-right' : 'drawer-left'">
+      <div
+        class="relative m-2 flex h-[calc(100dvh-1rem)] w-[calc(100vw-1rem)] max-w-[calc(100vw-1rem)] flex-col overflow-hidden rounded-2xl bg-white shadow-lg dark:bg-zinc-900 sm:m-4 sm:h-[calc(100vh-2rem)] sm:w-[400px]"
+        role="dialog"
+        aria-modal="true"
+        @click.stop
+      >
+        <div class="flex flex-row items-center border-b border-primary/20 bg-primary/5 px-4 py-3 dark:bg-primary/10">
+          <div class="text-sm font-semibold text-primary sm:text-base">{{ title }}</div>
+          <div class="flex-1" />
+          <button
+            type="button"
+            class="cursor-pointer rounded-md p-1.5 text-zinc-400 transition-colors hover:bg-primary/10 hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 dark:text-zinc-500 dark:hover:text-primary"
+            aria-label="Close drawer"
+            @click="close"
+          >
+            <X class="w-5 h-5" />
+          </button>
+        </div>
 
-      <!-- Content -->
-      <div class="flex-1 p-3 overflow-auto bg-secondary dark:bg-slate-800/60 sm:p-4">
-        <slot></slot>
-      </div>
+        <div class="flex-1 overflow-auto p-3 sm:p-4">
+          <slot></slot>
+        </div>
 
-      <!-- Footer -->
-      <div class="p-3 bg-gray-100 border-t border-slate-200 dark:bg-slate-800 dark:border-slate-700 sm:p-4">
-        <slot name="footer"></slot>
+        <div
+          v-if="$slots.footer"
+          class="flex flex-col-reverse gap-2 border-t border-zinc-200 p-3 dark:border-zinc-800 sm:flex-row sm:justify-end sm:p-4"
+        >
+          <slot name="footer"></slot>
+        </div>
       </div>
-    </div>
+    </transition>
   </div>
 </template>
 
 <script>
-import { X } from "lucide-vue-next";
+import { X } from 'lucide-vue-next'
 
 export default {
-  name: "KDrawer",
+  name: 'KDrawer',
   components: {
     X,
   },
@@ -46,28 +55,45 @@ export default {
     },
     title: {
       type: String,
-      default: "",
+      default: '',
     },
     side: {
       type: String,
-      default: "right", // "left" or "right"
-      validator: (val) => ["left", "right"].includes(val),
+      default: 'right', // "left" or "right"
+      validator: (val) => ['left', 'right'].includes(val),
     },
   },
   watch: {
     visible(val) {
-      document.body.style.overflow = val ? "hidden" : "";
+      document.body.style.overflow = val ? 'hidden' : ''
     },
   },
   beforeUnmount() {
-    document.body.style.overflow = "";
+    document.body.style.overflow = ''
   },
   methods: {
     close() {
-      this.$emit("update:visible", false);
+      this.$emit('update:visible', false)
     },
   },
-};
+}
 </script>
 
-<style scoped></style>
+<style scoped>
+.drawer-right-enter-active,
+.drawer-right-leave-active,
+.drawer-left-enter-active,
+.drawer-left-leave-active {
+  transition: transform 0.25s ease;
+}
+
+.drawer-right-enter-from,
+.drawer-right-leave-to {
+  transform: translateX(100%);
+}
+
+.drawer-left-enter-from,
+.drawer-left-leave-to {
+  transform: translateX(-100%);
+}
+</style>

package/src/ui/kToggle_v2.vue

@@ -0,0 +1,77 @@
+<template>
+  <div :class="labelStyle === 'inline' ? 'flex items-center gap-2' : ''">
+    <div
+      v-if="showLabel && labelStyle !== 'inline'"
+      :class="[
+        'block mb-1 text-sm font-bold',
+        disabled ? 'text-slate-500' : 'text-primary/90',
+      ]"
+    >
+      {{ label }}
+    </div>
+
+    <el-switch
+      :model-value="resolvedValue"
+      :disabled="disabled"
+      :active-text="activeText"
+      :inactive-text="inactiveText"
+      :active-color="activeColor"
+      :inactive-color="inactiveColor"
+      :size="size"
+      :width="width"
+      :inline-prompt="inlinePrompt"
+      @update:model-value="emitModelUpdate"
+      @change="$emit('change', $event)"
+    />
+
+    <div
+      v-if="showLabel && labelStyle === 'inline'"
+      :class="[
+        'text-sm font-bold cursor-pointer',
+        disabled ? 'text-slate-500 cursor-not-allowed' : 'text-primary/90',
+      ]"
+      @click="!disabled && emitModelUpdate(!resolvedValue)"
+    >
+      {{ label }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, getCurrentInstance } from 'vue'
+import { ElSwitch } from 'element-plus'
+
+const props = defineProps({
+  modelValue: { type: Boolean, default: false },
+  value: { type: Boolean, default: undefined },
+  label: { type: String, default: '' },
+  labelStyle: { type: String, default: null },
+  disabled: { type: Boolean, default: false },
+  size: {
+    type: String,
+    default: 'default',
+    validator: (val) => ['large', 'default', 'small'].includes(val),
+  },
+  width: { type: [String, Number], default: undefined },
+  activeText: { type: String, default: '' },
+  inactiveText: { type: String, default: '' },
+  activeColor: { type: String, default: '' },
+  inactiveColor: { type: String, default: '' },
+  inlinePrompt: { type: Boolean, default: false },
+})
+
+const emit = defineEmits(['update:modelValue', 'update:value', 'change'])
+
+const instance = getCurrentInstance()
+const passedProps = new Set(Object.keys(instance?.vnode.props || {}))
+const hasProp = (...names) => names.some((name) => passedProps.has(name))
+
+const resolvedValue = computed(() => (hasProp('value') ? props.value : props.modelValue))
+
+const showLabel = computed(() => !!props.label && props.label.trim() !== '')
+
+function emitModelUpdate(val) {
+  emit('update:modelValue', val)
+  emit('update:value', val)
+}
+</script>

package/src/ui/kToggle_v3.vue

@@ -0,0 +1,132 @@
+<template>
+  <div :class="labelStyle === 'inline' ? 'flex items-center gap-2' : ''">
+    <div
+      v-if="showLabel && labelStyle !== 'inline'"
+      :class="[
+        'block mb-1 text-sm font-bold',
+        disabled ? 'text-slate-500' : 'text-primary/90',
+      ]"
+    >
+      {{ label }}
+    </div>
+
+    <SwitchRoot
+      :checked="resolvedValue"
+      :disabled="disabled"
+      class="k-toggle-v3-track"
+      :data-state="resolvedValue ? 'checked' : 'unchecked'"
+      @update:checked="emitModelUpdate"
+    >
+      <SwitchThumb class="k-toggle-v3-thumb" />
+    </SwitchRoot>
+
+    <div
+      v-if="showLabel && labelStyle === 'inline'"
+      :class="[
+        'text-sm font-bold cursor-pointer',
+        disabled ? 'text-slate-500 cursor-not-allowed' : 'text-primary/90',
+      ]"
+      @click="!disabled && emitModelUpdate(!resolvedValue)"
+    >
+      {{ label }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, getCurrentInstance } from 'vue'
+import { SwitchRoot, SwitchThumb } from 'reka-ui'
+
+const props = defineProps({
+  modelValue: { type: Boolean, default: false },
+  value: { type: Boolean, default: undefined },
+  label: { type: String, default: '' },
+  labelStyle: { type: String, default: null },
+  disabled: { type: Boolean, default: false },
+})
+
+const emit = defineEmits(['update:modelValue', 'update:value'])
+
+const instance = getCurrentInstance()
+const passedProps = new Set(Object.keys(instance?.vnode.props || {}))
+const hasProp = (...names) => names.some((name) => passedProps.has(name))
+
+const resolvedValue = computed(() => (hasProp('value') ? props.value : props.modelValue))
+
+const showLabel = computed(() => !!props.label && props.label.trim() !== '')
+
+function emitModelUpdate(val) {
+  emit('update:modelValue', val)
+  emit('update:value', val)
+}
+</script>
+
+<style scoped>
+.k-toggle-v3-track {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: 3rem;
+  height: 1.75rem;
+  padding: 0.15rem;
+  border-radius: 9999px;
+  border: none;
+  cursor: pointer;
+  flex-shrink: 0;
+  background: #94a3b8;
+  transition: background-color 0.25s ease, box-shadow 0.25s ease;
+  outline: none;
+}
+
+.k-toggle-v3-track:focus-visible {
+  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #10b981;
+}
+
+.k-toggle-v3-track[data-state='checked'] {
+  background: #10b981;
+  box-shadow: 0 0 12px rgba(16, 185, 129, 0.35);
+}
+
+.k-toggle-v3-track[data-state='unchecked'] {
+  background: #94a3b8;
+}
+
+.k-toggle-v3-track[data-disabled] {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+
+.k-toggle-v3-thumb {
+  display: block;
+  width: 1.35rem;
+  height: 1.35rem;
+  border-radius: 9999px;
+  background: #fff;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.04);
+  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+  pointer-events: none;
+}
+
+.k-toggle-v3-track[data-state='checked'] .k-toggle-v3-thumb {
+  transform: translateX(1.25rem);
+}
+
+.k-toggle-v3-track[data-state='unchecked'] .k-toggle-v3-thumb {
+  transform: translateX(0);
+}
+
+/* Dark mode */
+:global(html.dark) .k-toggle-v3-track[data-state='unchecked'] {
+  background: #475569;
+}
+
+:global(html.dark) .k-toggle-v3-track[data-state='checked'] {
+  background: #059669;
+  box-shadow: 0 0 14px rgba(5, 150, 105, 0.4);
+}
+
+:global(html.dark) .k-toggle-v3-thumb {
+  background: #f1f5f9;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+}
+</style>

package/src/ui/kToggle_v4.vue

@@ -0,0 +1,122 @@
+<template>
+  <div :class="labelStyle === 'inline' ? 'flex items-center gap-2' : ''">
+    <div
+      v-if="showLabel && labelStyle !== 'inline'"
+      :class="[
+        'block mb-1 text-sm font-bold',
+        disabled ? 'text-slate-500' : 'text-primary/90',
+      ]"
+    >
+      {{ label }}
+    </div>
+
+    <button
+      type="button"
+      role="switch"
+      :aria-checked="resolvedValue"
+      :aria-label="label || 'Toggle'"
+      :disabled="disabled"
+      :class="cn(toggleVariants({ state: resolvedValue ? 'checked' : 'unchecked', size }), $attrs.class)"
+      @click="!disabled && emitModelUpdate(!resolvedValue)"
+    >
+      <span
+        :class="cn(thumbVariants({ state: resolvedValue ? 'checked' : 'unchecked', size }))"
+      />
+    </button>
+
+    <div
+      v-if="showLabel && labelStyle === 'inline'"
+      :class="[
+        'text-sm font-bold cursor-pointer',
+        disabled ? 'text-slate-500 cursor-not-allowed' : 'text-primary/90',
+      ]"
+      @click="!disabled && emitModelUpdate(!resolvedValue)"
+    >
+      {{ label }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, getCurrentInstance } from 'vue'
+import { cva } from 'class-variance-authority'
+import { cn } from '../lib/utils'
+
+const toggleVariants = cva(
+  'peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-slate-300 dark:focus-visible:ring-offset-slate-950 disabled:cursor-not-allowed disabled:opacity-50',
+  {
+    variants: {
+      state: {
+        checked: 'bg-slate-900 dark:bg-slate-50',
+        unchecked: 'bg-slate-200 dark:bg-slate-800',
+      },
+      size: {
+        sm: 'h-4 w-7',
+        default: 'h-5 w-9',
+        lg: 'h-6 w-11',
+      },
+    },
+    defaultVariants: {
+      state: 'unchecked',
+      size: 'default',
+    },
+  }
+)
+
+const thumbVariants = cva(
+  'pointer-events-none block rounded-full bg-white shadow-sm ring-0 transition-transform duration-200 dark:bg-slate-950',
+  {
+    variants: {
+      state: {
+        checked: '',
+        unchecked: '',
+      },
+      size: {
+        sm: 'h-3 w-3',
+        default: 'h-4 w-4',
+        lg: 'h-5 w-5',
+      },
+    },
+    compoundVariants: [
+      { state: 'checked', size: 'sm', class: 'translate-x-3' },
+      { state: 'unchecked', size: 'sm', class: 'translate-x-0.5' },
+      { state: 'checked', size: 'default', class: 'translate-x-4' },
+      { state: 'unchecked', size: 'default', class: 'translate-x-0.5' },
+      { state: 'checked', size: 'lg', class: 'translate-x-5' },
+      { state: 'unchecked', size: 'lg', class: 'translate-x-0.5' },
+    ],
+    defaultVariants: {
+      state: 'unchecked',
+      size: 'default',
+    },
+  }
+)
+
+const props = defineProps({
+  modelValue: { type: Boolean, default: false },
+  value: { type: Boolean, default: undefined },
+  label: { type: String, default: '' },
+  labelStyle: { type: String, default: null },
+  disabled: { type: Boolean, default: false },
+  size: {
+    type: String,
+    default: 'default',
+    validator: (val) => ['sm', 'default', 'lg'].includes(val),
+  },
+})
+
+const emit = defineEmits(['update:modelValue', 'update:value'])
+
+const instance = getCurrentInstance()
+const passedProps = new Set(Object.keys(instance?.vnode.props || {}))
+const hasProp = (...names) => names.some((name) => passedProps.has(name))
+
+const resolvedValue = computed(() => (hasProp('value') ? props.value : props.modelValue))
+
+const showLabel = computed(() => !!props.label && props.label.trim() !== '')
+
+function emitModelUpdate(val) {
+  emit('update:modelValue', val)
+  emit('update:value', val)
+}
+</script>