ketekny-ui-kit 1.0.46 → 1.0.48

package/package.json

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

package/src/ui/kMessageNew.vue

@@ -89,13 +89,34 @@
           </button>
         </div>
       </div>
+
+      <div
+        v-if="showDismissProgress"
+        :class="['mt-1 flex items-center justify-end gap-1 text-[10px] font-medium leading-none', colors.label]"
+        aria-hidden="true"
+      >
+        <Clock3 class="h-2.5 w-2.5" />
+        <span>{{ dismissSecondsLeft }}s</span>
+      </div>
+
+      <div
+        v-if="showDismissProgress"
+        :class="['pointer-events-none absolute inset-x-0 bottom-0 h-1', progressTracks[type]]"
+        aria-hidden="true"
+      />
+      <div
+        v-if="showDismissProgress"
+        :class="['pointer-events-none absolute bottom-0 left-0 h-1', progressBars[type]]"
+        :style="{ width: `${dismissElapsedPercent}%` }"
+        aria-hidden="true"
+      />
     </div>
   </Transition>
 </template>
 
 <script setup>
 import { computed, onBeforeUnmount, ref, useSlots, watch } from 'vue'
-import { X as CloseIcon, Info, CircleCheckBig, TriangleAlert, OctagonX } from 'lucide-vue-next'
+import { X as CloseIcon, Info, CircleCheckBig, TriangleAlert, OctagonX, Clock3 } from 'lucide-vue-next'
 
 // ─── Color config ────────────────────────────────────────────────────────────
 
@@ -109,7 +130,7 @@ const colorConfig = {
       label: 'text-slate-500 dark:text-slate-300',
     },
     standard: {
-      container: 'border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-900/90',
+      container: 'border-sky-200/90 bg-sky-50/60 dark:border-sky-500/35 dark:bg-sky-950/35',
       icon: 'bg-sky-100 border-sky-300 text-sky-700 dark:bg-sky-500/15 dark:border-sky-400/40 dark:text-sky-300',
       title: 'text-sky-700 dark:text-sky-300',
       body: 'text-slate-700 dark:text-slate-200',
@@ -139,7 +160,7 @@ const colorConfig = {
       label: 'text-slate-500 dark:text-slate-300',
     },
     standard: {
-      container: 'border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-900/90',
+      container: 'border-emerald-200/90 bg-emerald-50/60 dark:border-emerald-500/35 dark:bg-emerald-950/35',
       icon: 'bg-emerald-100 border-emerald-300 text-emerald-700 dark:bg-emerald-500/15 dark:border-emerald-400/40 dark:text-emerald-300',
       title: 'text-emerald-700 dark:text-emerald-300',
       body: 'text-slate-700 dark:text-slate-200',
@@ -169,7 +190,7 @@ const colorConfig = {
       label: 'text-slate-500 dark:text-slate-300',
     },
     standard: {
-      container: 'border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-900/90',
+      container: 'border-amber-200/90 bg-amber-50/60 dark:border-amber-500/35 dark:bg-amber-950/35',
       icon: 'bg-amber-100 border-amber-300 text-amber-700 dark:bg-amber-500/15 dark:border-amber-400/40 dark:text-amber-300',
       title: 'text-amber-700 dark:text-amber-300',
       body: 'text-slate-700 dark:text-slate-200',
@@ -199,7 +220,7 @@ const colorConfig = {
       label: 'text-slate-500 dark:text-slate-300',
     },
     standard: {
-      container: 'border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-900/90',
+      container: 'border-rose-200/90 bg-rose-50/60 dark:border-rose-500/35 dark:bg-rose-950/35',
       icon: 'bg-rose-100 border-rose-300 text-rose-700 dark:bg-rose-500/15 dark:border-rose-400/40 dark:text-rose-300',
       title: 'text-rose-700 dark:text-rose-300',
       body: 'text-slate-700 dark:text-slate-200',
@@ -298,7 +319,9 @@ const slots = useSlots()
 const internalVisible = ref(true)
 const messageRef = ref(null)
 const dismissTimer = ref(null)
+const dismissRaf = ref(null)
 const dismissStartedAt = ref(0)
+const dismissRemainingAtStart = ref(0)
 const dismissRemaining = ref(0)
 
 const isVisible = computed(() => (props.visible !== null ? props.visible : internalVisible.value))
@@ -312,12 +335,53 @@ const dismissAfterMs = computed(() => {
   const value = Number(props.dismissAfter)
   return Number.isFinite(value) && value > 0 ? value : 0
 })
+const showDismissProgress = computed(() => isVisible.value && dismissAfterMs.value > 0)
+const dismissElapsedPercent = computed(() => {
+  if (dismissAfterMs.value <= 0) return 0
+  return Math.min(100, Math.max(0, ((dismissAfterMs.value - dismissRemaining.value) / dismissAfterMs.value) * 100))
+})
+const dismissSecondsLeft = computed(() => Math.max(0, Math.ceil(dismissRemaining.value / 1000)))
+
+const progressTracks = {
+  info: 'bg-sky-200/60 dark:bg-sky-900/55',
+  success: 'bg-emerald-200/60 dark:bg-emerald-900/55',
+  warning: 'bg-amber-200/60 dark:bg-amber-900/55',
+  error: 'bg-rose-200/60 dark:bg-rose-900/55',
+}
+
+const progressBars = {
+  info: 'bg-sky-500/70 dark:bg-sky-400/80',
+  success: 'bg-emerald-500/70 dark:bg-emerald-400/80',
+  warning: 'bg-amber-500/80 dark:bg-amber-400/85',
+  error: 'bg-rose-500/70 dark:bg-rose-400/80',
+}
+
+function stopDismissRaf() {
+  if (dismissRaf.value) {
+    cancelAnimationFrame(dismissRaf.value)
+    dismissRaf.value = null
+  }
+}
+
+function syncDismissRemaining() {
+  if (!dismissTimer.value) return
+
+  const elapsed = Date.now() - dismissStartedAt.value
+  dismissRemaining.value = Math.max(0, dismissRemainingAtStart.value - elapsed)
+
+  if (dismissRemaining.value > 0) {
+    dismissRaf.value = requestAnimationFrame(syncDismissRemaining)
+  } else {
+    dismissRaf.value = null
+  }
+}
 
 function clearDismissTimer() {
   if (dismissTimer.value) {
     clearTimeout(dismissTimer.value)
     dismissTimer.value = null
   }
+  stopDismissRaf()
 }
 
 function startDismissTimer(duration) {
@@ -325,9 +389,12 @@ function startDismissTimer(duration) {
   if (!isVisible.value || duration <= 0) return
 
   dismissRemaining.value = duration
+  dismissRemainingAtStart.value = duration
   dismissStartedAt.value = Date.now()
+  dismissRaf.value = requestAnimationFrame(syncDismissRemaining)
   dismissTimer.value = setTimeout(() => {
     dismissTimer.value = null
+    stopDismissRaf()
     dismissRemaining.value = 0
     close()
   }, duration)
@@ -337,7 +404,7 @@ function pauseDismissTimer() {
   if (!dismissTimer.value || dismissAfterMs.value <= 0) return
 
   const elapsed = Date.now() - dismissStartedAt.value
-  dismissRemaining.value = Math.max(0, dismissRemaining.value - elapsed)
+  dismissRemaining.value = Math.max(0, dismissRemainingAtStart.value - elapsed)
   clearDismissTimer()
 }