ketekny-ui-kit 1.0.44 → 1.0.45

package/index.js

@@ -1,5 +1,6 @@
 // UI Components
 import kMessage from './src/ui/kMessage.vue'
+import kMessageNew from './src/ui/kMessageNew.vue'
 import kButton from './src/ui/kButton.vue'
 import kChip from './src/ui/kChip.vue'
 import kCode from './src/ui/kCode.vue'
@@ -48,7 +49,7 @@ import tailwindPreset from './tailwind-preset.js'
 // Named exports (tree-shaking friendly)
 export {
   // UI Components
-  kMessage, kCode, kToolbar, kTable, kTabs, kChip, kSpinner, kDatatable, kIcon, kMenu, kSkeleton, kProgressBar, kTree,
+  kMessage, kMessageNew, kCode, kToolbar, kTable, kTabs, kChip, kSpinner, kDatatable, kIcon, kMenu, kSkeleton, kProgressBar, kTree,
 
   // Form Components
   kButton, kSelect, kUploader, kToggle, kInput, kDateSelector, kDateSelectorV2, kEditor, kSelectButton, kTags, kSearch, kArrayList, kList, kTextArea,

package/package.json

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

package/src/ui/kMessageNew.vue

@@ -0,0 +1,381 @@
+<template>
+  <Transition name="kmessagenew">
+    <div
+      v-if="isVisible"
+      ref="messageRef"
+      :class="[
+        colors.container,
+        'relative overflow-hidden shadow-sm ring-1 ring-black/5 transition-[box-shadow,transform] duration-200 dark:ring-white/10',
+        'border',
+        accent ? 'border-l-4 rounded-r-md' : 'rounded-md',
+        accent ? accentStripes[type] : '',
+        'focus-within:ring-2 focus-within:ring-primary/30 focus-within:ring-offset-1 focus-within:ring-offset-white dark:focus-within:ring-offset-slate-900',
+        sizes[size].padding,
+        $attrs.class,
+      ]"
+      :role="type === 'error' ? 'alert' : 'status'"
+      :aria-live="type === 'error' ? 'assertive' : 'polite'"
+      aria-atomic="true"
+      @mouseenter="pauseDismissTimer"
+      @mouseleave="resumeDismissTimer"
+      @focusin="pauseDismissTimer"
+      @focusout="handleFocusOut"
+    >
+      <div class="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
+        <!-- Left: icon + content -->
+        <div class="flex min-w-0 items-start gap-3">
+          <!-- Custom icon slot -->
+          <span
+            v-if="hasIconSlot"
+            :class="['inline-flex shrink-0 items-center justify-center', sizes[size].customIcon]"
+            aria-hidden="true"
+          >
+            <slot name="icon" />
+          </span>
+          <!-- Badge icon -->
+          <span
+            v-else-if="iconStyle === 'badge'"
+            :class="[
+              'inline-flex shrink-0 items-center justify-center rounded-full border font-semibold',
+              sizes[size].badge,
+              colors.icon,
+            ]"
+            aria-hidden="true"
+          >
+            {{ iconLetters[type] }}
+          </span>
+          <!-- Lucide icon -->
+          <component
+            v-else-if="iconStyle === 'lucide'"
+            :is="lucideIcons[type]"
+            :class="['shrink-0', sizes[size].lucide]"
+            aria-hidden="true"
+          />
+
+          <div :class="['min-w-0 flex-1', sizes[size].text, colors.body]">
+            <p v-if="title" :class="['font-semibold leading-tight', colors.title]">{{ title }}</p>
+            <div
+              v-if="hasDefaultSlot || description"
+              :class="['leading-relaxed break-words', title ? 'mt-1' : '']"
+            >
+              <slot v-if="hasDefaultSlot"></slot>
+              <span v-else>{{ description }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Right: action slot | label | close -->
+        <div
+          v-if="hasActionSlot || label || isClosable"
+          class="flex shrink-0 items-center gap-2 self-end sm:self-start sm:pl-3"
+        >
+          <slot name="action" />
+          <span
+            v-if="!hasActionSlot && label"
+            :class="['text-xs font-medium', colors.label]"
+          >
+            {{ label }}
+          </span>
+          <button
+            v-if="isClosable"
+            type="button"
+            @click="close"
+            :class="[
+              'rounded-md p-0.5 opacity-70 transition-all hover:bg-black/5 hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35 dark:hover:bg-white/10',
+              colors.label,
+            ]"
+            :aria-label="`Close ${type} message`"
+          >
+            <X :class="sizes[size].close" />
+          </button>
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<script setup>
+import { computed, onBeforeUnmount, ref, useSlots, watch } from 'vue'
+import { X, Info, CircleCheckBig, TriangleAlert, OctagonX } from 'lucide-vue-next'
+
+// ─── Color config ────────────────────────────────────────────────────────────
+
+const colorConfig = {
+  info: {
+    default: {
+      container: 'border-sky-300/90 bg-sky-50/70 dark:border-sky-500/50 dark:bg-sky-950/40',
+      icon: 'bg-sky-100/60 border-sky-500 text-sky-600 dark:bg-sky-900/50 dark:border-sky-400 dark:text-sky-300',
+      title: 'text-sky-700 dark:text-sky-300',
+      body: 'text-slate-700 dark:text-sky-50',
+      label: 'text-slate-500 dark:text-slate-300',
+    },
+    outlined: {
+      container: 'border-sky-400 bg-white dark:border-sky-500/70 dark:bg-slate-900',
+      icon: 'bg-sky-100/60 border-sky-500 text-sky-600 dark:bg-sky-900/50 dark:border-sky-400 dark:text-sky-300',
+      title: 'text-sky-700 dark:text-sky-300',
+      body: 'text-slate-600 dark:text-slate-200',
+      label: 'text-slate-400 dark:text-slate-400',
+    },
+    filled: {
+      container: 'bg-sky-700 border-transparent dark:bg-sky-700',
+      icon: 'bg-white/20 border-white/50 text-white',
+      title: 'text-white',
+      body: 'text-white',
+      label: 'text-white/70',
+    },
+  },
+  success: {
+    default: {
+      container: 'border-emerald-300/90 bg-emerald-50/70 dark:border-emerald-500/50 dark:bg-emerald-950/40',
+      icon: 'bg-emerald-100/60 border-emerald-500 text-emerald-600 dark:bg-emerald-900/50 dark:border-emerald-400 dark:text-emerald-300',
+      title: 'text-emerald-700 dark:text-emerald-300',
+      body: 'text-slate-700 dark:text-emerald-50',
+      label: 'text-slate-500 dark:text-slate-300',
+    },
+    outlined: {
+      container: 'border-emerald-400 bg-white dark:border-emerald-500/70 dark:bg-slate-900',
+      icon: 'bg-emerald-100/60 border-emerald-500 text-emerald-600 dark:bg-emerald-900/50 dark:border-emerald-400 dark:text-emerald-300',
+      title: 'text-emerald-700 dark:text-emerald-300',
+      body: 'text-slate-600 dark:text-slate-200',
+      label: 'text-slate-400 dark:text-slate-400',
+    },
+    filled: {
+      container: 'bg-emerald-700 border-transparent dark:bg-emerald-700',
+      icon: 'bg-white/20 border-white/50 text-white',
+      title: 'text-white',
+      body: 'text-white',
+      label: 'text-white/70',
+    },
+  },
+  warning: {
+    default: {
+      container: 'border-amber-300/90 bg-amber-50/70 dark:border-amber-500/50 dark:bg-amber-950/40',
+      icon: 'bg-amber-100/60 border-amber-500 text-amber-600 dark:bg-amber-900/50 dark:border-amber-400 dark:text-amber-300',
+      title: 'text-amber-700 dark:text-amber-300',
+      body: 'text-slate-700 dark:text-amber-50',
+      label: 'text-slate-500 dark:text-slate-300',
+    },
+    outlined: {
+      container: 'border-amber-400 bg-white dark:border-amber-500/70 dark:bg-slate-900',
+      icon: 'bg-amber-100/60 border-amber-500 text-amber-600 dark:bg-amber-900/50 dark:border-amber-400 dark:text-amber-300',
+      title: 'text-amber-700 dark:text-amber-300',
+      body: 'text-slate-600 dark:text-slate-200',
+      label: 'text-slate-400 dark:text-slate-400',
+    },
+    filled: {
+      container: 'bg-amber-600 border-transparent dark:bg-amber-600',
+      icon: 'bg-white/20 border-white/50 text-white',
+      title: 'text-white',
+      body: 'text-white',
+      label: 'text-white/70',
+    },
+  },
+  error: {
+    default: {
+      container: 'border-rose-300/90 bg-rose-50/70 dark:border-rose-500/50 dark:bg-rose-950/40',
+      icon: 'bg-rose-100/60 border-rose-500 text-rose-600 dark:bg-rose-900/50 dark:border-rose-400 dark:text-rose-300',
+      title: 'text-rose-700 dark:text-rose-300',
+      body: 'text-slate-700 dark:text-rose-50',
+      label: 'text-slate-500 dark:text-slate-300',
+    },
+    outlined: {
+      container: 'border-rose-400 bg-white dark:border-rose-500/70 dark:bg-slate-900',
+      icon: 'bg-rose-100/60 border-rose-500 text-rose-600 dark:bg-rose-900/50 dark:border-rose-400 dark:text-rose-300',
+      title: 'text-rose-700 dark:text-rose-300',
+      body: 'text-slate-600 dark:text-slate-200',
+      label: 'text-slate-400 dark:text-slate-400',
+    },
+    filled: {
+      container: 'bg-rose-700 border-transparent dark:bg-rose-700',
+      icon: 'bg-white/20 border-white/50 text-white',
+      title: 'text-white',
+      body: 'text-white',
+      label: 'text-white/70',
+    },
+  },
+}
+
+const accentStripes = {
+  info: 'border-l-sky-500 dark:border-l-sky-400',
+  success: 'border-l-emerald-500 dark:border-l-emerald-400',
+  warning: 'border-l-amber-500 dark:border-l-amber-400',
+  error: 'border-l-rose-500 dark:border-l-rose-400',
+}
+
+const sizes = {
+  sm: {
+    padding: 'px-3 py-2',
+    text: 'text-xs sm:text-sm',
+    badge: 'h-4 w-4 text-[10px]',
+    customIcon: 'text-sm leading-none',
+    lucide: 'h-3.5 w-3.5',
+    close: 'h-3 w-3',
+  },
+  md: {
+    padding: 'px-4 py-3',
+    text: 'text-sm sm:text-base',
+    badge: 'h-5 w-5 text-xs',
+    customIcon: 'text-base leading-none',
+    lucide: 'h-4 w-4',
+    close: 'h-3.5 w-3.5',
+  },
+}
+
+const iconLetters = { info: 'i', success: '✓', warning: '!', error: '✕' }
+const lucideIcons = { info: Info, success: CircleCheckBig, warning: TriangleAlert, error: OctagonX }
+
+// ─── Props / emits ────────────────────────────────────────────────────────────
+
+const props = defineProps({
+  type: {
+    type: String,
+    default: 'info',
+    validator: (val) => ['info', 'success', 'warning', 'error'].includes(val),
+  },
+  variant: {
+    type: String,
+    default: 'default',
+    validator: (val) => ['default', 'outlined', 'filled'].includes(val),
+  },
+  iconStyle: {
+    type: String,
+    default: 'badge',
+    validator: (val) => ['badge', 'lucide', 'none'].includes(val),
+  },
+  accent: { type: Boolean, default: false },
+  size: {
+    type: String,
+    default: 'md',
+    validator: (val) => ['sm', 'md'].includes(val),
+  },
+  title: { type: String, default: '' },
+  description: { type: String, default: '' },
+  label: { type: String, default: '' },
+  visible: { type: Boolean, default: null },
+  closable: { type: Boolean, default: false },
+  dismissAfter: {
+    type: Number,
+    default: 0,
+    validator: (val) => Number.isFinite(val) && val >= 0,
+  },
+})
+
+const emit = defineEmits(['update:visible', 'close'])
+
+// ─── State ────────────────────────────────────────────────────────────────────
+
+const slots = useSlots()
+const internalVisible = ref(true)
+const messageRef = ref(null)
+const dismissTimer = ref(null)
+const dismissStartedAt = ref(0)
+const dismissRemaining = ref(0)
+
+const isVisible = computed(() => (props.visible !== null ? props.visible : internalVisible.value))
+const isClosable = computed(() => props.closable || props.visible !== null)
+const hasActionSlot = computed(() => !!slots.action)
+const hasDefaultSlot = computed(() => !!slots.default)
+const hasIconSlot = computed(() => !!slots.icon)
+const colors = computed(() => colorConfig[props.type][props.variant])
+const dismissAfterMs = computed(() => {
+  const value = Number(props.dismissAfter)
+  return Number.isFinite(value) && value > 0 ? value : 0
+})
+
+function clearDismissTimer() {
+  if (dismissTimer.value) {
+    clearTimeout(dismissTimer.value)
+    dismissTimer.value = null
+  }
+}
+
+function startDismissTimer(duration) {
+  clearDismissTimer()
+  if (!isVisible.value || duration <= 0) return
+
+  dismissRemaining.value = duration
+  dismissStartedAt.value = Date.now()
+  dismissTimer.value = setTimeout(() => {
+    dismissTimer.value = null
+    dismissRemaining.value = 0
+    close()
+  }, duration)
+}
+
+function pauseDismissTimer() {
+  if (!dismissTimer.value || dismissAfterMs.value <= 0) return
+
+  const elapsed = Date.now() - dismissStartedAt.value
+  dismissRemaining.value = Math.max(0, dismissRemaining.value - elapsed)
+  clearDismissTimer()
+}
+
+function resumeDismissTimer() {
+  if (!isVisible.value || dismissAfterMs.value <= 0) return
+
+  if (dismissRemaining.value <= 0) {
+    close()
+    return
+  }
+
+  startDismissTimer(dismissRemaining.value)
+}
+
+function handleFocusOut(event) {
+  const nextFocused = event.relatedTarget
+  if (nextFocused && messageRef.value && messageRef.value.contains(nextFocused)) return
+  resumeDismissTimer()
+}
+
+function close() {
+  clearDismissTimer()
+  dismissRemaining.value = dismissAfterMs.value
+  if (props.visible !== null) {
+    emit('update:visible', false)
+  } else {
+    internalVisible.value = false
+  }
+  emit('close')
+}
+
+watch(
+  [isVisible, dismissAfterMs],
+  ([visible, timeout]) => {
+    clearDismissTimer()
+    dismissRemaining.value = timeout
+    if (visible && timeout > 0) {
+      startDismissTimer(timeout)
+    }
+  },
+  { immediate: true }
+)
+
+onBeforeUnmount(() => {
+  clearDismissTimer()
+})
+</script>
+
+<style scoped>
+.kmessagenew-enter-active {
+  transition: all 0.2s ease-out;
+}
+.kmessagenew-leave-active {
+  transition: all 0.15s ease-in;
+}
+.kmessagenew-enter-from,
+.kmessagenew-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .kmessagenew-enter-active,
+  .kmessagenew-leave-active {
+    transition: opacity 0.1s;
+  }
+  .kmessagenew-enter-from,
+  .kmessagenew-leave-to {
+    transform: none;
+  }
+}
+</style>