ketekny-ui-kit 1.0.38 → 1.0.40

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ketekny-ui-kit",
   "type": "module",
-  "version": "1.0.38",
+  "version": "1.0.40",
   "description": "A Vue 3 UI component library with Tailwind CSS styling",
   "main": "index.js",
   "files": [
@@ -40,6 +40,9 @@
   "dependencies": {
     "@primeuix/themes": "^1.1.1",
     "@vuepic/vue-datepicker": "^11.0.2",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "element-plus": "^2.13.5",
     "he-tree-vue": "^3.1.2",
     "json-editor-vue": "^0.18.1",
     "lucide-vue-next": "^0.511.0",
@@ -49,6 +52,7 @@
     "quill": "^2.0.3",
     "reka-ui": "^2.8.2",
     "simple-code-editor": "^2.0.9",
+    "tailwind-merge": "^3.5.0",
     "vue-router": "^4.6.4",
     "vue3-easy-data-table": "^1.5.47"
   }

package/src/lib/utils.js

@@ -0,0 +1,6 @@
+import { clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs) {
+  return twMerge(clsx(inputs))
+}

package/src/ui/kButton_v2.vue

@@ -0,0 +1,124 @@
+<template>
+  <el-button
+    :type="resolvedVisualType"
+    :native-type="resolvedNativeType"
+    :size="resolvedSize"
+    :plain="resolvedPlain"
+    :round="round"
+    :circle="resolvedCircle"
+    :loading="loading"
+    :disabled="disabled"
+    :icon="iconComponent"
+    :autofocus="autofocus"
+    :title="tooltip"
+    :aria-label="resolvedAriaLabel"
+    :class="buttonClass"
+    @click="$emit('click', $event)"
+  >
+    <slot v-if="!resolvedIconOnly">{{ label }}</slot>
+  </el-button>
+</template>
+
+<script setup>
+import { computed, getCurrentInstance } from 'vue'
+import { ElButton } from 'element-plus'
+import * as lucideIcons from 'lucide-vue-next'
+
+const STYLE_TYPES = ['default', 'primary', 'success', 'warning', 'danger', 'info']
+const NATIVE_TYPES = ['button', 'submit', 'reset']
+
+const props = defineProps({
+  label: { type: String, default: '' },
+  type: {
+    type: String,
+    default: 'default',
+    validator: (val) => ['default', 'primary', 'success', 'warning', 'danger', 'info', 'button', 'submit', 'reset'].includes(val),
+  },
+  size: {
+    type: String,
+    default: 'default',
+    validator: (val) => ['large', 'default', 'small', 'normal'].includes(val),
+  },
+  plain: { type: Boolean, default: false },
+  round: { type: Boolean, default: false },
+  circle: { type: Boolean, default: false },
+  loading: { type: Boolean, default: false },
+  disabled: { type: Boolean, default: false },
+  icon: { type: [String, Object, Function], default: null },
+  autofocus: { type: Boolean, default: false },
+  primary: { type: Boolean, default: false },
+  secondary: { type: Boolean, default: false },
+  outlined: { type: Boolean, default: false },
+  danger: { type: Boolean, default: false },
+  warning: { type: Boolean, default: false },
+  success: { type: Boolean, default: false },
+  ariaLabel: { type: String, default: null },
+  tooltip: { type: String, default: null },
+  variant: {
+    type: String,
+    default: null,
+    validator: (val) => val == null || ['solid', 'soft', 'outlined', 'plain'].includes(val),
+  },
+  small: { type: Boolean, default: false },
+  fullWidth: { type: Boolean, default: false },
+  iconOnly: { type: Boolean, default: false },
+  truncate: { type: Boolean, default: false },
+})
+
+defineEmits(['click'])
+
+const instance = getCurrentInstance()
+const passedProps = new Set(Object.keys(instance?.vnode.props || {}))
+const hasProp = (...names) => names.some((name) => passedProps.has(name))
+
+const resolvedVisualType = computed(() => {
+  if (props.danger) return 'danger'
+  if (props.success) return 'success'
+  if (props.warning) return 'warning'
+  if (props.secondary) return 'info'
+  if (props.primary) return 'primary'
+  return STYLE_TYPES.includes(props.type) ? props.type : 'default'
+})
+
+const resolvedNativeType = computed(() => {
+  return NATIVE_TYPES.includes(props.type) ? props.type : 'button'
+})
+
+const resolvedSize = computed(() => {
+  if (props.small) return 'small'
+  if (props.size === 'normal') return 'default'
+  return ['large', 'default', 'small'].includes(props.size) ? props.size : 'default'
+})
+
+const resolvedPlain = computed(() => {
+  if (props.outlined) return true
+  if (hasProp('variant')) return props.variant === 'outlined' || props.variant === 'plain'
+  return props.plain
+})
+
+const resolvedCircle = computed(() => {
+  if (hasProp('iconOnly', 'icon-only')) return props.iconOnly
+  return props.circle
+})
+
+const resolvedIconOnly = computed(() => props.iconOnly)
+
+const iconComponent = computed(() => {
+  if (typeof props.icon === 'string') return lucideIcons[props.icon] || null
+  return props.icon
+})
+
+const resolvedAriaLabel = computed(() => {
+  if (props.ariaLabel) return props.ariaLabel
+  if (props.label && !resolvedIconOnly.value) return props.label
+  if (typeof props.icon === 'string') return props.icon.replace(/([a-z])([A-Z])/g, '$1 $2')
+  return null
+})
+
+const buttonClass = computed(() => {
+  return [
+    props.fullWidth ? '!w-full justify-center' : '',
+    props.truncate ? 'max-w-full [&>span]:max-w-full [&>span]:truncate [&>span]:inline-block' : '',
+  ]
+})
+</script>

package/src/ui/kConfirmDialog.vue

@@ -2,9 +2,9 @@
   <Teleport to="body">
     <Transition name="fade">
       <div v-if="visible" class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-40" style="z-index: 1500">
-        <div class="w-full max-w-md p-6 bg-white border rounded-lg shadow-xl border-primary/20 dark:bg-slate-800 dark:border-slate-700">
+        <div class="w-full max-w-md p-6 bg-white border rounded-lg shadow-xl border-primary/20 dark:bg-zinc-900 dark:border-zinc-800">
           <h2 class="mb-2 text-lg font-semibold text-primary">{{ title }}</h2>
-          <div class="mb-6 text-gray-700 dark:text-slate-300"><span v-html="message" /></div>
+          <div class="mb-6 text-gray-700 dark:text-zinc-300"><span v-html="message" /></div>
           <div class="flex justify-end gap-3">
             <kButton :disabled="loading" secondary label="Άκυρο" @click="cancel" />
             <kButton :loading="loading" danger label="Συνέχεια" @click="confirm" />

package/src/ui/kDateSelector_v2.vue

@@ -0,0 +1,147 @@
+<template>
+  <div>
+    <label v-if="label" class="block mb-1 text-sm font-medium text-slate-700 dark:text-slate-300">{{ label }}</label>
+    <el-date-picker
+      :id="id"
+      :model-value="normalizedModelValue"
+      :type="pickerType"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :readonly="readonly"
+      :clearable="clearable"
+      :editable="editable"
+      :size="size"
+      :format="resolvedFormat"
+      :value-format="resolvedValueFormat"
+      :disabled-date="disabledDate"
+      :start-placeholder="startPlaceholder"
+      :end-placeholder="endPlaceholder"
+      :range-separator="rangeSeparator"
+      class="k-date-v2"
+      style="width: 100%"
+      @update:model-value="$emit('update:modelValue', $event)"
+      @change="$emit('change', $event)"
+    />
+    <p v-if="hasError" class="mt-1 text-xs text-red-600 dark:text-red-400">{{ typeof error === 'string' ? error : '' }}</p>
+    <p v-else-if="info" class="mt-1 text-xs text-slate-500 dark:text-slate-400">{{ info }}</p>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { ElDatePicker } from 'element-plus'
+
+const props = defineProps({
+  modelValue: { type: [String, Date, Array], default: null },
+  id: {
+    type: String,
+    default: () => `datepicker-${Math.random().toString(36).slice(2, 11)}`,
+  },
+  label: { type: String, default: '' },
+  type: {
+    type: String,
+    default: 'date',
+    validator: (val) => ['year', 'month', 'date', 'dates', 'datetime', 'week', 'datetimerange', 'daterange', 'monthrange', 'yearMonth'].includes(val),
+  },
+  placeholder: { type: String, default: 'Select date' },
+  startPlaceholder: { type: String, default: 'Start date' },
+  endPlaceholder: { type: String, default: 'End date' },
+  rangeSeparator: { type: String, default: 'To' },
+  disabled: { type: Boolean, default: false },
+  readonly: { type: Boolean, default: false },
+  clearable: { type: Boolean, default: true },
+  editable: { type: Boolean, default: true },
+  size: {
+    type: String,
+    default: 'default',
+    validator: (val) => ['large', 'default', 'small'].includes(val),
+  },
+  format: { type: String, default: '' },
+  valueFormat: { type: String, default: '' },
+  disabledDate: { type: Function, default: undefined },
+  error: { type: [String, Boolean], default: null },
+  info: { type: String, default: '' },
+})
+
+defineEmits(['update:modelValue', 'change'])
+
+const pickerType = computed(() => props.type === 'yearMonth' ? 'month' : props.type)
+const hasError = computed(() => props.error != null && props.error !== false)
+
+const defaultFormatByType = {
+  date: 'YYYY-MM-DD',
+  dates: 'YYYY-MM-DD',
+  week: 'gggg[w]ww',
+  year: 'YYYY',
+  month: 'YYYY-MM',
+  datetime: 'YYYY-MM-DD HH:mm:ss',
+  monthrange: 'YYYY-MM',
+  daterange: 'YYYY-MM-DD',
+  datetimerange: 'YYYY-MM-DD HH:mm:ss',
+}
+
+const resolvedFormat = computed(() => {
+  const custom = String(props.format || '').trim()
+  if (custom) return custom
+  return defaultFormatByType[pickerType.value] || 'YYYY-MM-DD'
+})
+
+const resolvedValueFormat = computed(() => {
+  const custom = String(props.valueFormat || '').trim()
+  if (custom) return custom
+  return defaultFormatByType[pickerType.value] || 'YYYY-MM-DD'
+})
+
+function normalizeIsoString(value, type) {
+  if (typeof value !== 'string' || !value.includes('T')) return value
+
+  if (type === 'year') return value.slice(0, 4)
+  if (type === 'month' || type === 'monthrange') return value.slice(0, 7)
+
+  if (type === 'datetime' || type === 'datetimerange') {
+    const normalized = value.replace('T', ' ').replace(/Z$/, '')
+    const fullMatch = normalized.match(/^(\d{4}-\d{2}-\d{2})\s(\d{2}:\d{2}:\d{2})/)
+    if (fullMatch) return `${fullMatch[1]} ${fullMatch[2]}`
+    const shortMatch = normalized.match(/^(\d{4}-\d{2}-\d{2})\s(\d{2}:\d{2})/)
+    if (shortMatch) return `${shortMatch[1]} ${shortMatch[2]}:00`
+    return normalized
+  }
+
+  const dateMatch = value.match(/^(\d{4}-\d{2}-\d{2})/)
+  return dateMatch ? dateMatch[1] : value
+}
+
+const normalizedModelValue = computed(() => {
+  if (Array.isArray(props.modelValue)) {
+    return props.modelValue.map((item) => normalizeIsoString(item, pickerType.value))
+  }
+  return normalizeIsoString(props.modelValue, pickerType.value)
+})
+</script>
+
+<style>
+/* Global because Element Plus picker panel is teleported to body. */
+html.dark .el-date-picker,
+html.dark .el-date-range-picker {
+  --el-datepicker-inrange-bg-color: rgba(3, 105, 161, 0.22);
+  --el-datepicker-inrange-hover-bg-color: rgba(3, 105, 161, 0.32);
+}
+
+html.dark .el-date-table td.in-range .el-date-table-cell,
+html.dark .el-month-table td.in-range .el-date-table-cell,
+html.dark .el-year-table td.in-range .el-date-table-cell {
+  background-color: rgba(3, 105, 161, 0.22);
+}
+
+html.dark .el-date-table td.in-range .el-date-table-cell:hover,
+html.dark .el-month-table td.in-range .el-date-table-cell:hover,
+html.dark .el-year-table td.in-range .el-date-table-cell:hover {
+  background-color: rgba(3, 105, 161, 0.32);
+}
+
+html.dark .el-month-table td.available:hover .el-date-table-cell,
+html.dark .el-year-table td.available:hover .el-date-table-cell {
+  background-color: rgba(148, 163, 184, 0.16);
+  border-radius: 24px;
+}
+</style>

package/src/ui/kDialog.vue

@@ -8,7 +8,7 @@
     <transition name="dialog">
       <div
         ref="dialogPanel"
-        class="relative bg-white dark:bg-slate-900 shadow-lg overflow-hidden rounded-2xl flex flex-col max-h-[calc(100dvh-1rem)] sm:max-h-[90vh] m-2 sm:m-4"
+        class="relative bg-white dark:bg-zinc-900 shadow-lg overflow-hidden rounded-2xl flex flex-col max-h-[calc(100dvh-1rem)] sm:max-h-[90vh] m-2 sm:m-4"
         :class="dialogClasses"
         :role="'dialog'"
         :aria-modal="'true'"
@@ -17,16 +17,16 @@
         v-show="visible"
       >
         <!-- Header -->
-        <div class="flex flex-row items-center p-3 text-white bg-sky-800 shrink-0 sm:p-4">
-          <div :id="titleId" class="text-base font-semibold !text-white sm:text-xl">{{ title }}</div>
+        <div class="flex flex-row items-center px-4 py-3 border-b border-primary/20 bg-primary/5 dark:bg-primary/10 shrink-0">
+          <div :id="titleId" class="text-sm font-semibold text-primary sm:text-base">{{ title }}</div>
           <div class="flex-1" />
           <button
             type="button"
-            class="p-1 text-black transition duration-100 ease-in-out rounded-full cursor-pointer text-secondary hover:bg-white hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/70"
+            class="p-1.5 rounded-md text-zinc-400 hover:text-primary dark:text-zinc-500 dark:hover:text-primary hover:bg-primary/10 transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
             aria-label="Close dialog"
             @click="close"
           >
-            <X />
+            <X class="w-5 h-5" />
           </button>
         </div>
 
@@ -36,14 +36,14 @@
         </div>
 
         <!-- Scrollable slot content -->
-        <div class="flex-1 p-3 overflow-auto bg-secondary dark:bg-slate-800/60 sm:p-4">
+        <div class="flex-1 p-3 overflow-auto sm:p-4">
           <slot></slot>
         </div>
 
         <!-- Footer -->
         <div
           v-if="$slots.footer"
-          class="flex flex-col-reverse gap-2 p-3 border-t shrink-0 border-slate-100 dark:border-slate-700 sm:flex-row sm:justify-end sm:p-4"
+          class="flex flex-col-reverse gap-2 p-3 border-t shrink-0 border-zinc-200 dark:border-zinc-800 sm:flex-row sm:justify-end sm:p-4"
         >
           <slot name="footer"></slot>
         </div>

package/src/ui/kDialog_v2.vue

@@ -0,0 +1,71 @@
+<template>
+  <el-dialog
+    :model-value="resolvedOpen"
+    :title="title"
+    :width="width"
+    :fullscreen="resolvedFullscreen"
+    :modal="modal"
+    :append-to-body="appendToBody"
+    :close-on-click-modal="resolvedCloseOnBackdrop"
+    :close-on-press-escape="resolvedCloseOnEsc"
+    :show-close="showClose"
+    :draggable="draggable"
+    :center="center"
+    :align-center="alignCenter"
+    :destroy-on-close="destroyOnClose"
+    @update:model-value="emitModelUpdate"
+    @open="$emit('open')"
+    @opened="$emit('opened')"
+    @close="$emit('close')"
+    @closed="$emit('closed')"
+  >
+    <template v-if="$slots.header" #header>
+      <slot name="header"></slot>
+    </template>
+    <slot></slot>
+    <template v-if="$slots.footer" #footer>
+      <slot name="footer"></slot>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { computed, getCurrentInstance } from 'vue'
+import { ElDialog } from 'element-plus'
+
+const props = defineProps({
+  modelValue: { type: Boolean, default: false },
+  visible: { type: Boolean, default: undefined },
+  title: { type: String, default: '' },
+  width: { type: [String, Number], default: '50%' },
+  fullscreen: { type: Boolean, default: false },
+  maximized: { type: Boolean, default: false },
+  modal: { type: Boolean, default: true },
+  appendToBody: { type: Boolean, default: false },
+  closeOnClickModal: { type: Boolean, default: true },
+  closeOnBackdrop: { type: Boolean, default: true },
+  closeOnPressEscape: { type: Boolean, default: true },
+  closeOnEsc: { type: Boolean, default: true },
+  showClose: { type: Boolean, default: true },
+  draggable: { type: Boolean, default: false },
+  center: { type: Boolean, default: false },
+  alignCenter: { type: Boolean, default: false },
+  destroyOnClose: { type: Boolean, default: false },
+})
+
+const emit = defineEmits(['update:modelValue', 'update:visible', 'open', 'opened', 'close', 'closed'])
+
+const instance = getCurrentInstance()
+const passedProps = new Set(Object.keys(instance?.vnode.props || {}))
+const hasProp = (...names) => names.some((name) => passedProps.has(name))
+
+const resolvedOpen = computed(() => (hasProp('visible') ? props.visible : props.modelValue))
+const resolvedCloseOnBackdrop = computed(() => (hasProp('closeOnBackdrop', 'close-on-backdrop') ? props.closeOnBackdrop : props.closeOnClickModal))
+const resolvedCloseOnEsc = computed(() => (hasProp('closeOnEsc', 'close-on-esc') ? props.closeOnEsc : props.closeOnPressEscape))
+const resolvedFullscreen = computed(() => (hasProp('maximized') ? props.maximized : props.fullscreen))
+
+function emitModelUpdate(value) {
+  emit('update:modelValue', value)
+  emit('update:visible', value)
+}
+</script>

package/src/ui/kDialog_v3.vue

@@ -0,0 +1,128 @@
+<template>
+  <DialogRoot :open="resolvedOpen" @update:open="emitModelUpdate">
+    <DialogTrigger v-if="$slots.trigger" as-child>
+      <slot name="trigger"></slot>
+    </DialogTrigger>
+
+    <DialogPortal>
+      <DialogOverlay class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm data-[state=open]:animate-overlayIn data-[state=closed]:animate-overlayOut" />
+
+      <DialogContent
+        class="fixed z-50 bg-white dark:bg-slate-900 shadow-lg rounded-xl overflow-hidden flex flex-col
+          top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2
+          w-[calc(100vw-2rem)] max-h-[calc(100dvh-2rem)]
+          data-[state=open]:animate-dialogIn data-[state=closed]:animate-dialogOut"
+        :class="resolvedWidthClass"
+        @escape-key-down="resolvedCloseOnEscape ? undefined : $event.preventDefault()"
+        @interact-outside="closeOnBackdrop ? undefined : $event.preventDefault()"
+      >
+        <!-- Header -->
+        <div class="flex items-center justify-between p-4 border-b border-slate-200 dark:border-slate-700 shrink-0">
+          <DialogTitle class="text-lg font-semibold text-slate-900 dark:text-slate-100">
+            {{ title }}
+          </DialogTitle>
+          <DialogClose
+            class="p-1.5 rounded-lg text-slate-400 hover:text-slate-600 dark:text-slate-500 dark:hover:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+            aria-label="Close"
+          >
+            <X class="w-4 h-4" />
+          </DialogClose>
+        </div>
+
+        <!-- Description (optional) -->
+        <DialogDescription v-if="description" class="px-4 pt-3 text-sm text-slate-500 dark:text-slate-400">
+          {{ description }}
+        </DialogDescription>
+
+        <!-- Body -->
+        <div class="flex-1 p-4 overflow-auto">
+          <slot></slot>
+        </div>
+
+        <!-- Footer -->
+        <div v-if="$slots.footer" class="flex justify-end gap-2 p-4 border-t border-slate-200 dark:border-slate-700 shrink-0">
+          <slot name="footer"></slot>
+        </div>
+      </DialogContent>
+    </DialogPortal>
+  </DialogRoot>
+</template>
+
+<script setup>
+import { computed, getCurrentInstance } from 'vue'
+import {
+  DialogRoot,
+  DialogTrigger,
+  DialogPortal,
+  DialogOverlay,
+  DialogContent,
+  DialogTitle,
+  DialogDescription,
+  DialogClose,
+} from 'reka-ui'
+import { X } from 'lucide-vue-next'
+
+const props = defineProps({
+  modelValue: { type: Boolean, default: false },
+  visible: { type: Boolean, default: undefined },
+  title: { type: String, default: '' },
+  description: { type: String, default: '' },
+  width: { type: String, default: 'md' },
+  maximized: { type: Boolean, default: false },
+  closeOnBackdrop: { type: Boolean, default: true },
+  closeOnEscape: { type: Boolean, default: true },
+  closeOnEsc: { type: Boolean, default: true },
+})
+
+const emit = defineEmits(['update:modelValue', 'update:visible'])
+
+const WIDTH_CLASS_MAP = {
+  sm: 'sm:max-w-sm',
+  md: 'sm:max-w-lg',
+  lg: 'sm:max-w-2xl',
+  xl: 'sm:max-w-4xl',
+  full: 'sm:max-w-[calc(100vw-4rem)]',
+}
+
+const instance = getCurrentInstance()
+const passedProps = new Set(Object.keys(instance?.vnode.props || {}))
+const hasProp = (...names) => names.some((name) => passedProps.has(name))
+
+const resolvedOpen = computed(() => (hasProp('visible') ? props.visible : props.modelValue))
+const resolvedCloseOnEscape = computed(() => (hasProp('closeOnEsc', 'close-on-esc') ? props.closeOnEsc : props.closeOnEscape))
+
+const resolvedWidthClass = computed(() => {
+  if (hasProp('maximized') && props.maximized) return WIDTH_CLASS_MAP.full
+  const value = String(props.width || 'md')
+  return WIDTH_CLASS_MAP[value] || value
+})
+
+function emitModelUpdate(value) {
+  emit('update:modelValue', value)
+  emit('update:visible', value)
+}
+</script>
+
+<style scoped>
+@keyframes overlayIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@keyframes overlayOut {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+@keyframes dialogIn {
+  from { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
+  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
+}
+@keyframes dialogOut {
+  from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
+  to { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
+}
+
+.animate-overlayIn { animation: overlayIn 200ms ease-out; }
+.animate-overlayOut { animation: overlayOut 150ms ease-in; }
+.animate-dialogIn { animation: dialogIn 200ms ease-out; }
+.animate-dialogOut { animation: dialogOut 150ms ease-in; }
+</style>