ketekny-ui-kit 1.0.112 → 1.0.114
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/index.js
CHANGED
|
@@ -9,6 +9,7 @@ import kDrawer from './src/ui/kDrawer.vue'
|
|
|
9
9
|
import kInput from './src/ui/kInput.vue'
|
|
10
10
|
import kDateSelector from './src/ui/kDateSelector.vue'
|
|
11
11
|
import kToolbar from './src/ui/kToolbar.vue'
|
|
12
|
+
import kTooltip from './src/ui/kTooltip.vue'
|
|
12
13
|
import kSelect from './src/ui/kSelect.vue'
|
|
13
14
|
import kTable from './src/ui/kTable.vue'
|
|
14
15
|
import kTabs from './src/ui/kTabs.vue'
|
|
@@ -55,7 +56,7 @@ import tailwindPreset from './tailwind-preset.js'
|
|
|
55
56
|
// Named exports (tree-shaking friendly)
|
|
56
57
|
export {
|
|
57
58
|
// UI Components
|
|
58
|
-
kMessage, kCode, kToolbar, kTable, kTabs, kChip, kSpinner, kDatatable, kIcon, kMenu, kSkeleton, kProgressBar, kPagination, kTree,
|
|
59
|
+
kMessage, kCode, kToolbar, kTooltip, kTable, kTabs, kChip, kSpinner, kDatatable, kIcon, kMenu, kSkeleton, kProgressBar, kPagination, kTree,
|
|
59
60
|
|
|
60
61
|
// Form Components
|
|
61
62
|
kButton, kCheckbox, kSelect, kUploader, kToggle, kInput, kDateSelector, kEditor, kSelectButton, kTags, kSearch, kArrayList, kList, kTextArea, kForm, kOptionGroup,
|
package/package.json
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
<script>
|
|
2
2
|
import { ChevronRight, ExternalLink, Star } from '@lucide/vue'
|
|
3
3
|
import * as icons from '@lucide/vue'
|
|
4
|
+
import kTooltip from '../../ui/kTooltip.vue'
|
|
4
5
|
|
|
5
6
|
export default {
|
|
6
7
|
name: 'SidebarMenuItem',
|
|
@@ -8,6 +9,7 @@ export default {
|
|
|
8
9
|
ChevronRight,
|
|
9
10
|
ExternalLink,
|
|
10
11
|
Star,
|
|
12
|
+
kTooltip,
|
|
11
13
|
},
|
|
12
14
|
props: {
|
|
13
15
|
item: { type: Object, required: true },
|
|
@@ -91,7 +93,7 @@ export default {
|
|
|
91
93
|
this.showLabelTooltip = false
|
|
92
94
|
return
|
|
93
95
|
}
|
|
94
|
-
this.showLabelTooltip = labelEl.scrollWidth
|
|
96
|
+
this.showLabelTooltip = labelEl.scrollWidth - labelEl.clientWidth > 2
|
|
95
97
|
},
|
|
96
98
|
handleClick() {
|
|
97
99
|
if (this.hasChildren && !this.isCollapsedTop) {
|
|
@@ -160,10 +162,22 @@ export default {
|
|
|
160
162
|
/>
|
|
161
163
|
|
|
162
164
|
<template v-if="!isCollapsedTop">
|
|
165
|
+
<kTooltip
|
|
166
|
+
v-if="showLabelTooltip"
|
|
167
|
+
:value="item.label"
|
|
168
|
+
placement="right"
|
|
169
|
+
as="span"
|
|
170
|
+
class="flex-1 min-w-0"
|
|
171
|
+
>
|
|
172
|
+
<span
|
|
173
|
+
ref="labelText"
|
|
174
|
+
class="block truncate"
|
|
175
|
+
>{{ item.label }}</span>
|
|
176
|
+
</kTooltip>
|
|
163
177
|
<span
|
|
178
|
+
v-else
|
|
164
179
|
ref="labelText"
|
|
165
180
|
class="flex-1 truncate"
|
|
166
|
-
v-tooltip.right="showLabelTooltip ? item.label : null"
|
|
167
181
|
>{{ item.label }}</span>
|
|
168
182
|
|
|
169
183
|
<span
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<component
|
|
3
|
+
:is="as"
|
|
4
|
+
v-bind="$attrs"
|
|
5
|
+
v-tooltip:[placement]="value"
|
|
6
|
+
>
|
|
7
|
+
<slot />
|
|
8
|
+
</component>
|
|
9
|
+
</template>
|
|
10
|
+
|
|
11
|
+
<script>
|
|
12
|
+
import tooltipDirective from '../directives/v-tooltip'
|
|
13
|
+
|
|
14
|
+
export default {
|
|
15
|
+
name: 'kTooltip',
|
|
16
|
+
directives: {
|
|
17
|
+
tooltip: tooltipDirective,
|
|
18
|
+
},
|
|
19
|
+
inheritAttrs: false,
|
|
20
|
+
props: {
|
|
21
|
+
value: {
|
|
22
|
+
type: [String, Object],
|
|
23
|
+
default: '',
|
|
24
|
+
},
|
|
25
|
+
placement: {
|
|
26
|
+
type: String,
|
|
27
|
+
default: 'top',
|
|
28
|
+
validator: (value) => ['top', 'bottom', 'left', 'right'].includes(value),
|
|
29
|
+
},
|
|
30
|
+
as: {
|
|
31
|
+
type: String,
|
|
32
|
+
default: 'span',
|
|
33
|
+
},
|
|
34
|
+
},
|
|
35
|
+
}
|
|
36
|
+
</script>
|