ketekny-ui-kit 1.0.135 → 1.0.136
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/package.json +1 -1
- package/src/ui/kTabs.vue +34 -7
- package/src/ui/themes/kButton.theme.js +4 -4
package/package.json
CHANGED
package/src/ui/kTabs.vue
CHANGED
|
@@ -1,17 +1,30 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="w-full
|
|
3
|
-
<div
|
|
2
|
+
<div class="w-full">
|
|
3
|
+
<div
|
|
4
|
+
class="k-tabs-scroll flex overflow-x-auto overflow-y-hidden border-b border-slate-200 dark:border-slate-700"
|
|
5
|
+
role="tablist"
|
|
6
|
+
>
|
|
4
7
|
<button
|
|
5
8
|
v-for="tab in tabs"
|
|
6
9
|
:key="tab.id"
|
|
10
|
+
type="button"
|
|
11
|
+
role="tab"
|
|
12
|
+
:aria-selected="modelValue === tab.id"
|
|
13
|
+
:tabindex="modelValue === tab.id ? 0 : -1"
|
|
7
14
|
@click="selectTab(tab.id)"
|
|
8
15
|
:class="[
|
|
9
|
-
'shrink-0 whitespace-nowrap px-4
|
|
16
|
+
'-mb-px inline-flex h-11 shrink-0 items-center gap-2 whitespace-nowrap border-b-2 px-4 text-base font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary/30',
|
|
10
17
|
modelValue === tab.id
|
|
11
|
-
? '
|
|
12
|
-
: 'text-
|
|
18
|
+
? 'border-primary text-primary'
|
|
19
|
+
: 'border-transparent text-slate-600 hover:border-slate-300 hover:text-slate-900 dark:text-slate-400 dark:hover:border-slate-600 dark:hover:text-slate-100',
|
|
13
20
|
]"
|
|
14
21
|
>
|
|
22
|
+
<component
|
|
23
|
+
:is="iconComponent(tab.icon)"
|
|
24
|
+
v-if="tab.icon && iconComponent(tab.icon)"
|
|
25
|
+
class="size-4 shrink-0"
|
|
26
|
+
aria-hidden="true"
|
|
27
|
+
/>
|
|
15
28
|
{{ tab.title }}
|
|
16
29
|
</button>
|
|
17
30
|
</div>
|
|
@@ -19,8 +32,10 @@
|
|
|
19
32
|
</template>
|
|
20
33
|
|
|
21
34
|
<script>
|
|
35
|
+
import * as icons from "@lucide/vue";
|
|
36
|
+
|
|
22
37
|
export default {
|
|
23
|
-
name: "
|
|
38
|
+
name: "kTabs",
|
|
24
39
|
props: {
|
|
25
40
|
modelValue: { type: [String, Number], required: true },
|
|
26
41
|
tabs: {
|
|
@@ -33,6 +48,14 @@ export default {
|
|
|
33
48
|
},
|
|
34
49
|
emits: ["update:modelValue"],
|
|
35
50
|
methods: {
|
|
51
|
+
iconComponent(name) {
|
|
52
|
+
if (!name) return null;
|
|
53
|
+
const normalizedName = name
|
|
54
|
+
.split("-")
|
|
55
|
+
.map((part) => part.charAt(0).toUpperCase() + part.slice(1))
|
|
56
|
+
.join("");
|
|
57
|
+
return icons[normalizedName] || null;
|
|
58
|
+
},
|
|
36
59
|
selectTab(id) {
|
|
37
60
|
this.$emit("update:modelValue", id);
|
|
38
61
|
},
|
|
@@ -43,6 +66,10 @@ export default {
|
|
|
43
66
|
<style scoped>
|
|
44
67
|
.k-tabs-scroll {
|
|
45
68
|
-webkit-overflow-scrolling: touch;
|
|
46
|
-
scrollbar-width:
|
|
69
|
+
scrollbar-width: none;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.k-tabs-scroll::-webkit-scrollbar {
|
|
73
|
+
display: none;
|
|
47
74
|
}
|
|
48
75
|
</style>
|
|
@@ -5,8 +5,8 @@ export const K_BUTTON_BASE = "inline-flex flex-row items-center justify-center f
|
|
|
5
5
|
|
|
6
6
|
export const K_BUTTON_SIZE_STYLES = {
|
|
7
7
|
normal: {
|
|
8
|
-
regular: "h-
|
|
9
|
-
iconOnly: "h-
|
|
8
|
+
regular: "h-10 px-4 text-sm",
|
|
9
|
+
iconOnly: "h-10 w-10 p-0",
|
|
10
10
|
icon: "w-4 h-4",
|
|
11
11
|
loader: "w-4 h-4",
|
|
12
12
|
gap: "mr-1.5",
|
|
@@ -27,8 +27,8 @@ export const K_BUTTON_SIZE_STYLES = {
|
|
|
27
27
|
},
|
|
28
28
|
// Backward compatibility aliases
|
|
29
29
|
default: {
|
|
30
|
-
regular: "h-
|
|
31
|
-
iconOnly: "h-
|
|
30
|
+
regular: "h-10 px-4 text-sm",
|
|
31
|
+
iconOnly: "h-10 w-10 p-0",
|
|
32
32
|
icon: "w-4 h-4",
|
|
33
33
|
loader: "w-4 h-4",
|
|
34
34
|
gap: "mr-1.5",
|