ketekny-ui-kit 1.0.119 → 1.0.121

package/index.js

@@ -3,6 +3,7 @@ import kMessage from './src/ui/kMessage.vue'
 import kButton from './src/ui/kButton.vue'
 import kCheckbox from './src/ui/kCheckbox.vue'
 import kChip from './src/ui/kChip.vue'
+import kClipboard from './src/ui/kClipboard.vue'
 import kCode from './src/ui/kCode.vue'
 import kDialog from './src/ui/kDialog.vue'
 import kDrawer from './src/ui/kDrawer.vue'
@@ -56,7 +57,7 @@ import tailwindPreset from './tailwind-preset.js'
 // Named exports (tree-shaking friendly)
 export {
   // UI Components
-  kMessage, kCode, kToolbar, kTooltip, kTable, kTabs, kChip, kSpinner, kDatatable, kIcon, kMenu, kSkeleton, kProgressBar, kPagination, kTree,
+  kMessage, kCode, kToolbar, kTooltip, kTable, kTabs, kChip, kClipboard, kSpinner, kDatatable, kIcon, kMenu, kSkeleton, kProgressBar, kPagination, kTree,
 
   // Form Components
   kButton, kCheckbox, kSelect, kUploader, kToggle, kInput, kDateSelector, kEditor, kSelectButton, kTags, kSearch, kArrayList, kList, kTextArea, kForm, kOptionGroup,

package/package.json

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

package/src/twoColLayout/components/MultilevelSidebar.vue

@@ -75,14 +75,15 @@ export default {
     },
     theme: {
       type: String,
-      default: 'dark',
-      validator: value => ['dark', 'light'].includes(value),
+      default: null,
+      validator: value => value === null || ['dark', 'light'].includes(value),
     },
   },
   emits: ['select', 'logo-click', 'signin', 'signup', 'signout', 'edit-profile', 'item-click'],
   data() {
     return {
       demoAvatarUrl,
+      logoBaseUrl: LOGO_BASE_URL,
       activeId: '',
       activeMenuTab: 'all',
       query: '',
@@ -105,15 +106,7 @@ export default {
       }
     },
     themeClass() {
-      return this.theme === 'light' ? 'sidebar-theme-light' : 'sidebar-theme-dark'
-    },
-    activeExpandedLogoSrc() {
-      if (this.theme === 'light') return `${LOGO_BASE_URL}/logo-light.png`
-      return `${LOGO_BASE_URL}/logo-dark.png`
-    },
-    activeCollapsedLogoSrc() {
-      if (this.theme === 'light') return `${LOGO_BASE_URL}/logo_icon.jpg`
-      return `${LOGO_BASE_URL}/logo-icon-dark.png`
+      return this.theme ? `sidebar-force-${this.theme}` : ''
     },
     collapsedTitle() {
       if (!this.title) return ''
@@ -469,7 +462,7 @@ export default {
 
 <template>
   <aside
-    class="group/sidebar fixed inset-y-0 left-0 z-40 flex h-full shrink-0 flex-col border-r border-[var(--sidebar-border)] bg-[var(--sidebar-bg)] text-[var(--sidebar-text)] transition-[width,transform] duration-200 ease-out lg:static lg:translate-x-0"
+    class="group/sidebar sidebar-root fixed inset-y-0 left-0 z-40 flex h-full shrink-0 flex-col border-r border-[var(--sidebar-border)] bg-[var(--sidebar-bg)] text-[var(--sidebar-text)] transition-[width,transform] duration-200 ease-out lg:static lg:translate-x-0"
     :style="sidebarWidthStyle"
     :class="[
       themeClass,
@@ -488,20 +481,34 @@ export default {
     </button>
 
     <div class="relative flex items-center px-4 py-4" :class="collapsed ? 'justify-center' : 'gap-2.5'">
-      <img
-        v-if="collapsed"
-        :src="activeCollapsedLogoSrc"
-        alt="Ketekny logo"
-        class="size-9 shrink-0 rounded-lg object-contain cursor-pointer"
-        @click="handleLogoClick"
-      />
-      <img
-        v-else
-        :src="activeExpandedLogoSrc"
-        alt="Ketekny logo"
-        class="min-w-0 flex-1 object-contain cursor-pointer"
-        @click="handleLogoClick"
-      />
+      <template v-if="collapsed">
+        <img
+          :src="`${logoBaseUrl}/logo_icon.jpg`"
+          alt="Ketekny logo"
+          class="sidebar-logo-light size-9 shrink-0 rounded-lg object-contain cursor-pointer"
+          @click="handleLogoClick"
+        />
+        <img
+          :src="`${logoBaseUrl}/logo-icon-dark.png`"
+          alt="Ketekny logo"
+          class="sidebar-logo-dark size-9 shrink-0 rounded-lg object-contain cursor-pointer"
+          @click="handleLogoClick"
+        />
+      </template>
+      <template v-else>
+        <img
+          :src="`${logoBaseUrl}/logo-light.png`"
+          alt="Ketekny logo"
+          class="sidebar-logo-light min-w-0 flex-1 object-contain cursor-pointer"
+          @click="handleLogoClick"
+        />
+        <img
+          :src="`${logoBaseUrl}/logo-dark.png`"
+          alt="Ketekny logo"
+          class="sidebar-logo-dark min-w-0 flex-1 object-contain cursor-pointer"
+          @click="handleLogoClick"
+        />
+      </template>
     </div>
 
     <div v-if="title && !collapsed" class="px-4 pb-2">
@@ -596,7 +603,6 @@ export default {
           :open-ids="effectiveOpenIds"
           :collapsed="collapsed"
           :favorites="favoriteIds"
-          :theme="theme"
           @select="handleMenuSelect"
           @toggle="toggle"
           @toggle-favorite="toggleFavorite"
@@ -741,7 +747,27 @@ export default {
 </template>
 
 <style scoped>
-.sidebar-theme-dark {
+.sidebar-root {
+  --sidebar-bg: #f9f9f9;
+  --sidebar-surface: #ffffff;
+  --sidebar-surface-muted: #eef4fb;
+  --sidebar-text: #0f172a;
+  --sidebar-text-soft: rgba(15, 23, 42, 0.8);
+  --sidebar-text-strong: rgba(15, 23, 42, 0.9);
+  --sidebar-text-muted: #64748b;
+  --sidebar-border: rgba(148, 163, 184, 0.28);
+  --sidebar-border-strong: rgba(100, 116, 139, 0.4);
+  --sidebar-hover: #e2e8f0;
+  --sidebar-shadow: rgba(15, 23, 42, 0.12);
+  --sidebar-danger: #ea580c;
+  --sidebar-danger-hover: #c2410c;
+  --sidebar-danger-bg: #ffedd5;
+  --sidebar-logo-light-display: block;
+  --sidebar-logo-dark-display: none;
+}
+
+html.dark .sidebar-root:not(.sidebar-force-light),
+.sidebar-root.sidebar-force-dark {
   --sidebar-bg: #0b0c0f;
   --sidebar-surface: #161a22;
   --sidebar-surface-muted: rgba(255, 255, 255, 0.06);
@@ -756,22 +782,10 @@ export default {
   --sidebar-danger: #f59e0b;
   --sidebar-danger-hover: #fbbf24;
   --sidebar-danger-bg: rgba(245, 158, 11, 0.12);
+  --sidebar-logo-light-display: none;
+  --sidebar-logo-dark-display: block;
 }
 
-.sidebar-theme-light {
-  --sidebar-bg: #f9f9f9;
-  --sidebar-surface: #ffffff;
-  --sidebar-surface-muted: #eef4fb;
-  --sidebar-text: #0f172a;
-  --sidebar-text-soft: rgba(15, 23, 42, 0.8);
-  --sidebar-text-strong: rgba(15, 23, 42, 0.9);
-  --sidebar-text-muted: #64748b;
-  --sidebar-border: rgba(148, 163, 184, 0.28);
-  --sidebar-border-strong: rgba(100, 116, 139, 0.4);
-  --sidebar-hover: #e2e8f0;
-  --sidebar-shadow: rgba(15, 23, 42, 0.12);
-  --sidebar-danger: #ea580c;
-  --sidebar-danger-hover: #c2410c;
-  --sidebar-danger-bg: #ffedd5;
-}
+.sidebar-logo-light { display: var(--sidebar-logo-light-display); }
+.sidebar-logo-dark  { display: var(--sidebar-logo-dark-display); }
 </style>

package/src/twoColLayout/components/SidebarMenuItem.vue

@@ -18,7 +18,6 @@ export default {
     openIds: { type: Object, required: true },
     collapsed: { type: Boolean, default: false },
     favorites: { type: Object, default: null },
-    theme: { type: String, default: 'dark' },
   },
   emits: ['select', 'toggle', 'toggle-favorite'],
   data() {
@@ -245,7 +244,6 @@ export default {
             :open-ids="openIds"
             :collapsed="collapsed"
             :favorites="favorites"
-            :theme="theme"
             @select="$emit('select', $event)"
             @toggle="$emit('toggle', $event)"
             @toggle-favorite="$emit('toggle-favorite', $event)"
@@ -292,7 +290,6 @@ export default {
             :open-ids="openIds"
             :collapsed="false"
             :favorites="favorites"
-            :theme="theme"
             @select="$emit('select', $event)"
             @toggle="$emit('toggle', $event)"
             @toggle-favorite="$emit('toggle-favorite', $event)"

package/src/twoColLayout/components/TwoColLayout.vue

@@ -41,10 +41,7 @@
     <button
       v-if="!mobileMenuOpen && showMobileMenuButton"
       type="button"
-      class="fixed bottom-0 left-0 z-50 inline-flex size-14 items-center justify-center rounded-tr-2xl transition-colors lg:hidden"
-      :class="theme === 'light'
-        ? 'border border-rose-200 bg-rose-100 text-rose-900 shadow-lg shadow-slate-900/10 hover:bg-rose-200'
-        : ' bg-[#e63933] text-white shadow-lg shadow-black/25'"
+      class="fixed bottom-0 left-0 z-50 inline-flex size-14 items-center justify-center rounded-tr-2xl transition-colors lg:hidden bg-brand text-brand-foreground shadow-lg shadow-black/25"
       aria-label="Open menu"
       @click="toggleMenu">
       <Menu class="size-6" :stroke-width="2.25" />
@@ -99,8 +96,8 @@ export default {
     },
     theme: {
       type: String,
-      default: "dark",
-      validator: value => ["dark", "light"].includes(value),
+      default: null,
+      validator: value => value === null || ["dark", "light"].includes(value),
     },
   },
   emits: ["select-menu", "logo-click", "signin", "signup", "signout", "edit-profile", "item-click"],

package/src/ui/kClipboard.vue

@@ -0,0 +1,77 @@
+<template>
+  <button
+    type="button"
+    class="inline-flex items-center gap-2 rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-900 transition hover:bg-slate-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60"
+    :aria-label="ariaLabel || `Copy ${text}`"
+    :disabled="disabled"
+    @click="copyToClipboard"
+  >
+    <slot>
+      <span class="truncate max-w-[240px]">{{ text }}</span>
+      <component :is="copied ? Check : Copy" :class="copied ? 'text-emerald-600' : ''" :size="16" />
+    </slot>
+  </button>
+</template>
+
+<script setup>
+import { Check, Copy } from "@lucide/vue";
+</script>
+
+<script>
+export default {
+  name: "kClipboard",
+  emits: ["copied", "error"],
+  props: {
+    text: {
+      type: String,
+      required: true,
+    },
+    ariaLabel: {
+      type: String,
+      default: null,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    resetAfter: {
+      type: Number,
+      default: 2000,
+    },
+  },
+  data() {
+    return {
+      copied: false,
+      copiedTimeout: null,
+    };
+  },
+  beforeUnmount() {
+    if (this.copiedTimeout) {
+      clearTimeout(this.copiedTimeout);
+    }
+  },
+  methods: {
+    async copyToClipboard() {
+      if (this.disabled) return;
+
+      try {
+        await navigator.clipboard.writeText(this.text);
+        this.copied = true;
+        this.$emit("copied", this.text);
+
+        if (this.copiedTimeout) {
+          clearTimeout(this.copiedTimeout);
+        }
+
+        this.copiedTimeout = window.setTimeout(() => {
+          this.copied = false;
+          this.copiedTimeout = null;
+        }, this.resetAfter);
+      } catch (error) {
+        this.$emit("error", error);
+        console.error("kClipboard: failed to copy text.", error);
+      }
+    },
+  },
+};
+</script>

package/src/ui/kToggle.vue

@@ -148,29 +148,29 @@ export default {
   border: 1px solid #cbd5e1;
 }
 
-:global(html.dark) .k-toggle-track--on {
+html.dark .k-toggle-track--on {
   background: #0369A1;
   border-color: #0369A1;
   box-shadow: 0 2px 8px rgb(2 6 23 / 0.45);
 }
 
-:global(html.dark) .k-toggle-track--off {
+html.dark .k-toggle-track--off {
   background: #475569;
   border-color: #475569;
 }
 
-:global(html.dark) .k-toggle-track--disabled {
+html.dark .k-toggle-track--disabled {
   background: #334155;
   border-color: #334155;
 }
 
-:global(html.dark) .k-toggle-thumb--on,
-:global(html.dark) .k-toggle-thumb--off {
+html.dark .k-toggle-thumb--on,
+html.dark .k-toggle-thumb--off {
   background: #f8fafc;
   border-color: #cbd5e1;
 }
 
-:global(html.dark) .k-toggle-thumb--disabled {
+html.dark .k-toggle-thumb--disabled {
   background: #94a3b8;
   border-color: #64748b;
 }