ketekny-ui-kit 1.0.113 → 1.0.114

package/index.js

@@ -9,6 +9,7 @@ import kDrawer from './src/ui/kDrawer.vue'
 import kInput from './src/ui/kInput.vue'
 import kDateSelector from './src/ui/kDateSelector.vue'
 import kToolbar from './src/ui/kToolbar.vue'
+import kTooltip from './src/ui/kTooltip.vue'
 import kSelect from './src/ui/kSelect.vue'
 import kTable from './src/ui/kTable.vue'
 import kTabs from './src/ui/kTabs.vue'
@@ -55,7 +56,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, kPagination, kTree,
+  kMessage, kCode, kToolbar, kTooltip, kTable, kTabs, kChip, 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.113",
+  "version": "1.0.114",
   "description": "A Vue 3 UI component library with Tailwind CSS styling",
   "main": "index.js",
   "files": [

package/src/twoColLayout/components/SidebarMenuItem.vue

@@ -1,6 +1,7 @@
 <script>
 import { ChevronRight, ExternalLink, Star } from '@lucide/vue'
 import * as icons from '@lucide/vue'
+import kTooltip from '../../ui/kTooltip.vue'
 
 export default {
   name: 'SidebarMenuItem',
@@ -8,6 +9,7 @@ export default {
     ChevronRight,
     ExternalLink,
     Star,
+    kTooltip,
   },
   props: {
     item: { type: Object, required: true },
@@ -160,12 +162,18 @@ export default {
       />
 
       <template v-if="!isCollapsedTop">
-        <span
+        <kTooltip
           v-if="showLabelTooltip"
-          ref="labelText"
-          class="flex-1 truncate"
-          v-tooltip.right="item.label"
-        >{{ item.label }}</span>
+          :value="item.label"
+          placement="right"
+          as="span"
+          class="flex-1 min-w-0"
+        >
+          <span
+            ref="labelText"
+            class="block truncate"
+          >{{ item.label }}</span>
+        </kTooltip>
         <span
           v-else
           ref="labelText"

package/src/ui/kTooltip.vue

@@ -0,0 +1,36 @@
+<template>
+  <component
+    :is="as"
+    v-bind="$attrs"
+    v-tooltip:[placement]="value"
+  >
+    <slot />
+  </component>
+</template>
+
+<script>
+import tooltipDirective from '../directives/v-tooltip'
+
+export default {
+  name: 'kTooltip',
+  directives: {
+    tooltip: tooltipDirective,
+  },
+  inheritAttrs: false,
+  props: {
+    value: {
+      type: [String, Object],
+      default: '',
+    },
+    placement: {
+      type: String,
+      default: 'top',
+      validator: (value) => ['top', 'bottom', 'left', 'right'].includes(value),
+    },
+    as: {
+      type: String,
+      default: 'span',
+    },
+  },
+}
+</script>