ketekny-ui-kit 1.0.78 → 1.0.80

package/package.json

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

package/src/directives/v-tooltip.js

@@ -32,18 +32,23 @@ function createNodes() {
 
   const bubble = document.createElement('div')
   bubble.className = `
-    px-3 py-2 rounded-lg text-sm font-medium leading-5
+    px-3 py-2 rounded-lg text-base font-medium leading-5
     text-slate-50 bg-slate-900 shadow-xl ring-1 ring-black/20
     opacity-0 scale-95 transition duration-150 ease-out
   `.replace(/\s+/g, ' ').trim()
+  bubble.style.color = '#f8fafc'
+  bubble.style.backgroundColor = '#0f172a'
+  bubble.style.borderColor = 'rgba(0, 0, 0, 0.2)'
   bubble.style.whiteSpace = 'normal'         // allow wrap when needed
   bubble.style.maxWidth = 'min(36rem, calc(100vw - 1.5rem))' // clamp width
   bubble.style.wordBreak = 'break-word'
   bubble.style.letterSpacing = '0.01em'
   bubble.style.position = 'relative'
+  bubble.setAttribute('role', 'tooltip')
+  bubble.setAttribute('aria-hidden', 'true')
 
   const arrow = document.createElement('div')
-  arrow.className = 'absolute w-2 h-2 rotate-45 bg-slate-900'
+  arrow.className = 'absolute w-2 h-2 rotate-45 bg-slate-900 opacity-0 transition-opacity duration-150 ease-out'
   arrow.setAttribute('aria-hidden', 'true')
 
   wrapper.appendChild(bubble)
@@ -184,25 +189,35 @@ export default {
       (content.mode === 'component' && !content.component)
     ) return
 
-    const { wrapper, bubble, arrow } = createNodes()
-    document.body.appendChild(wrapper)
-
-    // Render content
-    let app
-    if (content.mode === 'text') bubble.textContent = content.text
-    if (content.mode === 'html') bubble.innerHTML = content.html
-    if (content.mode === 'component') {
-      app = createApp({ render: () => h(content.component, content.props || {}) })
-      app.mount(bubble)
-    }
-
     const state = {
       placement: placementPref,
       pad: 8,   // viewport padding
-      gap: 8    // distance from trigger
+      gap: 8,   // distance from trigger
+      visible: false,
+      nodes: null,
+      app: null,
+    }
+
+    function ensureNodes() {
+      if (state.nodes) return state.nodes
+
+      const { wrapper, bubble, arrow } = createNodes()
+      document.body.appendChild(wrapper)
+
+      if (content.mode === 'text') bubble.textContent = content.text
+      if (content.mode === 'html') bubble.innerHTML = content.html
+      if (content.mode === 'component') {
+        state.app = createApp({ render: () => h(content.component, content.props || {}) })
+        state.app.mount(bubble)
+      }
+
+      state.nodes = { wrapper, bubble, arrow }
+      return state.nodes
     }
 
     function positionAndShow() {
+      const nodes = ensureNodes()
+      const { wrapper, bubble, arrow } = nodes
       const elRect = el.getBoundingClientRect()
       const bSize = measureBubble(bubble)
       const pos = computePosition({ elRect, bSize, placement: state.placement, gap: state.gap, pad: state.pad })
@@ -215,18 +230,42 @@ export default {
       placeArrow({ arrow, bubbleRect: { width: bSize.width, height: bSize.height }, elRect, pos })
 
       // Show
+      bubble.setAttribute('aria-hidden', 'false')
       bubble.classList.remove('opacity-0', 'scale-95')
       bubble.classList.add('opacity-100', 'scale-100')
       arrow.style.display = 'block'
+      arrow.classList.remove('opacity-100')
+      arrow.classList.add('opacity-0')
+      window.setTimeout(() => {
+        if (!state.visible || !state.nodes) return
+        arrow.classList.remove('opacity-0')
+        arrow.classList.add('opacity-100')
+      }, 150)
 
       // Save current placement (may be flipped)
       state.placement = pos.placement
+      state.visible = true
     }
 
     function hide() {
+      if (!state.nodes) return
+
+      const { bubble, wrapper } = state.nodes
+      bubble.setAttribute('aria-hidden', 'true')
       bubble.classList.remove('opacity-100', 'scale-100')
       bubble.classList.add('opacity-0', 'scale-95')
-      arrow.style.display = 'none'
+      state.visible = false
+      const { arrow } = state.nodes
+      arrow.classList.remove('opacity-100')
+      arrow.classList.add('opacity-0')
+
+      window.setTimeout(() => {
+        if (state.visible || !state.nodes) return
+        state.app?.unmount?.()
+        wrapper.remove()
+        state.nodes = null
+        state.app = null
+      }, 160)
     }
 
     // Events
@@ -244,7 +283,7 @@ export default {
     window.addEventListener('scroll', onScrollOrResize, true)
     window.addEventListener('resize', onScrollOrResize)
 
-    el._tooltip = { wrapper, bubble, arrow, onEnter, onLeave, onScrollOrResize, app }
+    el._tooltip = { onEnter, onLeave, onScrollOrResize, state }
   },
 
   updated(el, binding) {
@@ -255,27 +294,30 @@ export default {
     if (nextPlacement !== undefined) {
       // Update preferred placement; flip may still occur on show
       // We store it on a small state on the element:
-      t.prefPlacement = nextPlacement
+      t.state.placement = nextPlacement
     }
 
     const content = normalizeValue(binding)
-    if (content.mode === 'text') t.bubble.textContent = content.text || ''
-    else if (content.mode === 'html') t.bubble.innerHTML = content.html || ''
+    if (!t.state.nodes) return
+
+    const { bubble } = t.state.nodes
+    if (content.mode === 'text') bubble.textContent = content.text || ''
+    else if (content.mode === 'html') bubble.innerHTML = content.html || ''
     else if (content.mode === 'component') {
-      if (t.app) t.app.unmount()
+      t.state.app?.unmount?.()
       const app = createApp({ render: () => h(content.component, content.props || {}) })
-      app.mount(t.bubble)
-      t.app = app
+      app.mount(bubble)
+      t.state.app = app
     }
   },
 
   unmounted(el) {
     const t = el._tooltip
     if (!t) return
-    if (t.app) t.app.unmount()
-    t.bubble.remove()
-    t.arrow.remove()
-    t.wrapper.remove()
+    if (t.state.app) t.state.app.unmount()
+    if (t.state.nodes) {
+      t.state.nodes.wrapper.remove()
+    }
     el.removeEventListener('mouseenter', t.onEnter)
     el.removeEventListener('mouseleave', t.onLeave)
     el.removeEventListener('focus', t.onEnter)

package/src/layout/twoColSidebarPanel.vue

@@ -74,7 +74,7 @@
             <span
               v-if="item.description"
               class="block mt-1 text-sm"
-              :class="item.active ? 'text-slate-700' : 'text-slate-300'"
+              :class="item.active ? 'text-slate-700' : 'text-slate-200'"
             >
               {{ item.description }}
             </span>
@@ -85,7 +85,7 @@
 
     <div
       v-if="account"
-      class="px-1 pb-4 border-b shrink-0 border-white/10 bg-slate-900/80 text-white/80"
+      class="px-1 pb-4 border-b shrink-0 border-white/10 bg-slate-900/80 text-white/90"
     >
       <div v-if="collapsed" class="flex flex-col gap-3">
         <div v-if="account.loggedIn" class="flex flex-col items-center gap-2">
@@ -179,10 +179,10 @@
 
     <div
       v-if="!collapsed"
-      class="border-t shrink-0 border-white/10 text-white/50"
+      class="border-t shrink-0 border-white/10 text-white/70"
     >
       <div v-if="showContactInfo" class="flex flex-col gap-2 px-4">
-        <p class="text-sm font-semibold uppercase tracking-[0.25em] text-white/60">
+        <p class="text-sm font-semibold uppercase tracking-[0.25em] text-white/80">
           KETEKNY AE
         </p>
         <div class="flex flex-wrap items-center text-sm gap-x-3">
@@ -240,7 +240,7 @@ const LABELS = {
   signOut: "Αποσύνδεση",
   signIn: "Σύνδεση",
   signUp: "Εγγραφή",
-  contactAddress: "Βερανζέου 13, 10677, Αθήνα",
+  contactAddress: "Βερανζέρου 13, 10677, Αθήνα",
 };
 
 export default {

package/src/ui/componentDescription.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="overflow-hidden border rounded-lg shadow-sm component-card cp-card cp-border">
     <div class="flex items-center justify-between px-4 py-3 border-b cp-border cp-muted-50">
-      <h3 class="text-lg font-semibold cp-text">{{ componentName }} Description</h3>
+      <h2 class="text-lg font-semibold cp-text">{{ componentName }} Description</h2>
 
       <div class="flex items-center gap-1">
         <button
@@ -34,7 +34,7 @@
                 </td>
                 <td class="px-4 py-3"><span class="font-mono text-sm text-blue-600">{{ prop.type }}</span></td>
                 <td class="px-4 py-3">
-                  <code v-if="prop.default !== undefined" class="font-mono text-sm text-emerald-600">{{ prop.default }}</code>
+                  <code v-if="prop.default !== undefined" class="font-mono text-sm text-slate-700">{{ prop.default }}</code>
                   <span v-else class="cp-text-muted">-</span>
                 </td>
                 <td class="px-4 py-3 cp-text-muted">{{ prop.description }}</td>
@@ -65,7 +65,7 @@
                   <code class="text-sm font-mono px-1.5 py-0.5 rounded cp-chip cp-chip-text">{{ slot.name }}</code>
                 </td>
                 <td class="px-4 py-3">
-                  <span :class="['inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium', slot.scoped ? 'bg-emerald-100 text-emerald-700' : 'cp-badge-muted']">
+                  <span :class="['inline-flex items-center px-2 py-0.5 rounded-full text-sm font-medium', slot.scoped ? 'bg-emerald-100 text-emerald-700' : 'cp-badge-muted']">
                     {{ slot.scoped ? "Yes" : "No" }}
                   </span>
                 </td>

package/src/ui/componentShowcase.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="overflow-hidden border rounded-lg shadow-sm component-card cp-card cp-border">
     <div class="flex items-center justify-between px-4 py-3 border-b cp-border cp-muted-50">
-      <h3 class="text-lg font-semibold cp-text">{{ componentName }} Preview</h3>
+      <h2 class="text-lg font-semibold cp-text">{{ componentName }} Preview</h2>
 
       <div class="flex items-center gap-1">
         <button
@@ -22,7 +22,7 @@
               v-for="vp in previewViewports"
               :key="vp.id"
               @click="activeViewport = vp.id"
-              :class="['px-3 py-1.5 text-xs font-semibold rounded-md transition-colors', activeViewport === vp.id ? 'cp-tab-active' : 'cp-tab']">
+              :class="['px-3 py-1.5 text-sm font-semibold rounded-md transition-colors', activeViewport === vp.id ? 'cp-tab-active' : 'cp-tab']">
               {{ vp.label }}
             </button>
           </div>

package/src/ui/kSearch.vue

@@ -1,6 +1,18 @@
 <template>
   <div class="relative w-full">
-    <input type="text" v-model="localValue" @input="onInput" :class="[defaultStyle, disabled ? disabledStyle : '']" :placeholder="placeholder" :disabled="disabled" />
+    <label v-if="label" :for="inputId" class="mb-1 block text-sm font-medium text-gray-700 dark:text-slate-300">
+      {{ label }}
+    </label>
+    <input
+      :id="inputId"
+      type="text"
+      v-model="localValue"
+      @input="onInput"
+      :class="[defaultStyle, disabled ? disabledStyle : '']"
+      :placeholder="placeholder"
+      :aria-label="!label ? placeholder : null"
+      :disabled="disabled"
+    />
     <Search class="absolute w-4 h-4 text-primary/70 -translate-y-1/2 pointer-events-none right-3 top-1/2" />
   </div>
 </template>
@@ -16,10 +28,12 @@ export default {
     modelValue: { type: String, default: "" },
     debounce: { type: [String, Number], default: 300 },
     placeholder: { type: String, default: "Αναζήτηση..." },
+    label: { type: String, default: "" },
     disabled: { type: Boolean, default: false },
   },
   data() {
     return {
+      inputId: `ksearch-${Math.random().toString(36).slice(2, 10)}`,
       defaultStyle: "w-full px-3 py-2 border rounded-lg transition shadow-sm focus:outline-none text-gray-700 focus:ring-2 focus:ring-primary/20 focus:border-primary bg-white placeholder-gray-400 dark:bg-slate-800 dark:text-slate-100 dark:border-slate-600 dark:placeholder-slate-500",
       disabledStyle: "bg-gray-100 text-gray-400 cursor-not-allowed dark:bg-slate-900 dark:text-slate-500",
 

package/src/ui/kTags.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="w-full">
-    <div v-if="label != null" class="inputLabel" :class="hasError ? 'text-rose-800 dark:text-rose-400' : 'text-primary/90'">
+    <label v-if="label != null" :for="inputId" class="inputLabel" :class="hasError ? 'text-rose-800 dark:text-rose-400' : 'text-primary/90'">
       {{ label }}
-    </div>
+    </label>
     <div
       :class="[
         'flex flex-wrap items-center gap-2 p-2 border rounded-xl shadow-sm min-h-[3rem] transition',
@@ -19,11 +19,13 @@
         </button>
       </span>
       <input
+        :id="inputId"
         v-model="newTag"
         @keydown.enter.prevent="addTag"
         @keydown.backspace="handleBackspace"
         @blur="addTag"
         :placeholder="placeholder"
+        :aria-label="!label ? placeholder || 'Add tag' : null"
         :disabled="disabled"
         :class="['flex-1 p-1 bg-transparent border-none focus:outline-none dark:text-slate-100 dark:placeholder-slate-500', disabled ? 'text-gray-400 cursor-not-allowed dark:text-slate-500' : '']"
       />
@@ -56,6 +58,7 @@ export default {
   data() {
     return {
       newTag: "",
+      inputId: `ktags-${Math.random().toString(36).slice(2, 10)}`,
     };
   },
   computed: {

package/tailwind-preset.js

@@ -1,6 +1,7 @@
 // tailwind-preset.js
 /** @type {import('tailwindcss').Config} */
 const config = {
+    darkMode: 'class',
     theme: {
         extend: {
             colors: {