@sakoa/ui 0.2.2 → 0.2.3
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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sakoa/ui",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.3",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./dist/saka-ui.umd.cjs",
|
|
6
6
|
"module": "./dist/saka-ui.js",
|
|
@@ -39,6 +39,7 @@
|
|
|
39
39
|
"class-variance-authority": "^0.7.1",
|
|
40
40
|
"clsx": "^2.1.1",
|
|
41
41
|
"highlight.js": "^11.11.1",
|
|
42
|
+
"lucide-vue-next": "^0.577.0",
|
|
42
43
|
"tailwind-merge": "^3.5.0",
|
|
43
44
|
"vue": "^3.5.29",
|
|
44
45
|
"vue-router": "^4.6.4"
|
|
@@ -27,6 +27,8 @@ export interface Props {
|
|
|
27
27
|
checked?: boolean
|
|
28
28
|
/** Custom color for this item */
|
|
29
29
|
color?: string
|
|
30
|
+
/** Custom icon color */
|
|
31
|
+
iconColor?: string
|
|
30
32
|
}
|
|
31
33
|
|
|
32
34
|
const props = withDefaults(defineProps<Props>(), {
|
|
@@ -38,7 +40,8 @@ const props = withDefaults(defineProps<Props>(), {
|
|
|
38
40
|
disabled: false,
|
|
39
41
|
danger: false,
|
|
40
42
|
checked: undefined,
|
|
41
|
-
color: undefined
|
|
43
|
+
color: undefined,
|
|
44
|
+
iconColor: undefined
|
|
42
45
|
})
|
|
43
46
|
|
|
44
47
|
const emit = defineEmits<{
|
|
@@ -71,15 +74,21 @@ onBeforeUnmount(() => {
|
|
|
71
74
|
const sizeConfig = computed(() => ({
|
|
72
75
|
small: {
|
|
73
76
|
item: 'px-2 py-1 text-xs',
|
|
74
|
-
icon: 'text-sm'
|
|
77
|
+
icon: 'text-sm',
|
|
78
|
+
iconSize: 'w-3.5 h-3.5',
|
|
79
|
+
iconPx: 14
|
|
75
80
|
},
|
|
76
81
|
medium: {
|
|
77
82
|
item: 'px-2.5 py-1.5 text-sm',
|
|
78
|
-
icon: 'text-base'
|
|
83
|
+
icon: 'text-base',
|
|
84
|
+
iconSize: 'w-4 h-4',
|
|
85
|
+
iconPx: 16
|
|
79
86
|
},
|
|
80
87
|
large: {
|
|
81
88
|
item: 'px-3 py-2 text-base',
|
|
82
|
-
icon: 'text-lg'
|
|
89
|
+
icon: 'text-lg',
|
|
90
|
+
iconSize: 'w-5 h-5',
|
|
91
|
+
iconPx: 20
|
|
83
92
|
}
|
|
84
93
|
}[context?.size ?? 'medium']))
|
|
85
94
|
|
|
@@ -131,7 +140,7 @@ const handleClick = (event: MouseEvent) => {
|
|
|
131
140
|
/>
|
|
132
141
|
|
|
133
142
|
<!-- Leading icon -->
|
|
134
|
-
<component v-else-if="icon && isIconComponent(icon)" :is="icon" :
|
|
143
|
+
<component v-else-if="icon && isIconComponent(icon)" :is="icon" :size="sizeConfig.iconPx" :class="['mr-2.5 shrink-0', !iconColor && !danger ? 'text-muted-foreground group-hover:text-foreground' : '']" :style="iconColor ? { color: iconColor } : {}" />
|
|
135
144
|
<span
|
|
136
145
|
v-else-if="icon"
|
|
137
146
|
:class="['mdi', `mdi-${icon}`, sizeConfig.icon, 'mr-2.5', danger ? '' : 'text-muted-foreground group-hover:text-foreground']"
|
|
@@ -162,7 +171,7 @@ const handleClick = (event: MouseEvent) => {
|
|
|
162
171
|
</kbd>
|
|
163
172
|
|
|
164
173
|
<!-- Trailing icon -->
|
|
165
|
-
<component v-if="trailingIcon && isIconComponent(trailingIcon)" :is="trailingIcon" :
|
|
174
|
+
<component v-if="trailingIcon && isIconComponent(trailingIcon)" :is="trailingIcon" :size="sizeConfig.iconPx" class="text-muted-foreground" />
|
|
166
175
|
<span
|
|
167
176
|
v-else-if="trailingIcon"
|
|
168
177
|
:class="['mdi', `mdi-${trailingIcon}`, sizeConfig.icon, 'text-muted-foreground']"
|