srcdev-nuxt-components 6.1.31 → 6.1.32
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.
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<component :is="tag" class="display-chip-core" :class="[shape, elementClasses]" :style="chipStyles">
|
|
3
|
-
<slot></slot>
|
|
3
|
+
<slot name="default"></slot>
|
|
4
|
+
<Icon v-if="config?.icon" :name="config.icon" class="chip-icon" />
|
|
5
|
+
<span v-if="config?.label" class="chip-label" :class="`length-${config.label.length}`">{{ validatedLabel }}</span>
|
|
4
6
|
</component>
|
|
5
7
|
</template>
|
|
6
8
|
|
|
@@ -10,6 +12,8 @@ export interface DisplayChipConfig {
|
|
|
10
12
|
maskWidth: string
|
|
11
13
|
offset: string
|
|
12
14
|
angle: string
|
|
15
|
+
icon?: string
|
|
16
|
+
label?: string
|
|
13
17
|
}
|
|
14
18
|
|
|
15
19
|
export interface DisplayChipProps {
|
|
@@ -21,7 +25,7 @@ export interface DisplayChipProps {
|
|
|
21
25
|
|
|
22
26
|
export interface ChipSlots {
|
|
23
27
|
default(props?: {}): any
|
|
24
|
-
content(props?: {}): any
|
|
28
|
+
// content(props?: {}): any
|
|
25
29
|
}
|
|
26
30
|
</script>
|
|
27
31
|
|
|
@@ -34,29 +38,30 @@ const props = withDefaults(defineProps<DisplayChipProps>(), {
|
|
|
34
38
|
maskWidth: "4px",
|
|
35
39
|
offset: "0px",
|
|
36
40
|
angle: "90deg",
|
|
41
|
+
icon: undefined,
|
|
42
|
+
label: undefined,
|
|
37
43
|
}),
|
|
38
44
|
styleClassPassthrough: () => [],
|
|
39
45
|
})
|
|
40
|
-
defineSlots<ChipSlots>()
|
|
41
|
-
|
|
42
|
-
// const chipConfig = defineModel<DisplayChipConfig>({
|
|
43
|
-
// type: Object as PropType<{
|
|
44
|
-
// size: string
|
|
45
|
-
// maskWidth: string
|
|
46
|
-
// offset: string
|
|
47
|
-
// angle: string
|
|
48
|
-
// }>,
|
|
49
|
-
// default: () => ({
|
|
50
|
-
// size: "12px",
|
|
51
|
-
// maskWidth: "4px",
|
|
52
|
-
// offset: "0px",
|
|
53
|
-
// angle: "90deg",
|
|
54
|
-
// }),
|
|
55
|
-
// required: false,
|
|
56
|
-
// })
|
|
46
|
+
const slots = defineSlots<ChipSlots>()
|
|
47
|
+
// const slots = useSlots()
|
|
57
48
|
|
|
58
49
|
const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
|
|
59
50
|
|
|
51
|
+
// Validate and truncate label to max 3 characters
|
|
52
|
+
const validatedLabel = computed(() => {
|
|
53
|
+
if (!props.config?.label) return props.config?.label
|
|
54
|
+
if (props.config.label.length > 3) {
|
|
55
|
+
console.warn(
|
|
56
|
+
`DisplayChip: label "${
|
|
57
|
+
props.config.label
|
|
58
|
+
}" exceeds maximum length of 3 characters. Truncating to "${props.config.label.slice(0, 3)}"`
|
|
59
|
+
)
|
|
60
|
+
return props.config.label.slice(0, 3)
|
|
61
|
+
}
|
|
62
|
+
return props.config.label
|
|
63
|
+
})
|
|
64
|
+
|
|
60
65
|
const chipStyles = computed(() => ({
|
|
61
66
|
"--chip-size": props.config?.size,
|
|
62
67
|
"--chip-mask-width": props.config?.maskWidth,
|
|
@@ -99,6 +104,43 @@ const chipStyles = computed(() => ({
|
|
|
99
104
|
position: absolute;
|
|
100
105
|
width: var(--chip-size);
|
|
101
106
|
border-radius: 100%;
|
|
107
|
+
z-index: 1;
|
|
108
|
+
}
|
|
109
|
+
.chip-icon {
|
|
110
|
+
position: absolute;
|
|
111
|
+
width: var(--chip-size);
|
|
112
|
+
height: var(--chip-size);
|
|
113
|
+
border-radius: 100%;
|
|
114
|
+
display: flex;
|
|
115
|
+
align-items: center;
|
|
116
|
+
justify-content: center;
|
|
117
|
+
color: black;
|
|
118
|
+
z-index: 2;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.chip-label {
|
|
122
|
+
--_font-size-adjust: 0.7;
|
|
123
|
+
position: absolute;
|
|
124
|
+
width: var(--chip-size);
|
|
125
|
+
height: var(--chip-size);
|
|
126
|
+
border-radius: 100%;
|
|
127
|
+
display: flex;
|
|
128
|
+
align-items: center;
|
|
129
|
+
justify-content: center;
|
|
130
|
+
color: black;
|
|
131
|
+
z-index: 2;
|
|
132
|
+
font-size: calc(var(--chip-size) * var(--_font-size-adjust));
|
|
133
|
+
line-height: 1;
|
|
134
|
+
letter-spacing: -0.05rem;
|
|
135
|
+
user-select: none;
|
|
136
|
+
|
|
137
|
+
&.length-2 {
|
|
138
|
+
--_font-size-adjust: 0.6;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
&.length-3 {
|
|
142
|
+
--_font-size-adjust: 0.5;
|
|
143
|
+
}
|
|
102
144
|
}
|
|
103
145
|
|
|
104
146
|
& > * {
|
|
@@ -108,23 +150,29 @@ const chipStyles = computed(() => ({
|
|
|
108
150
|
psuedo-element ::after
|
|
109
151
|
*/
|
|
110
152
|
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
var(--computed-position-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
153
|
+
&:not(.chip-icon, .chip-label) {
|
|
154
|
+
mask-image: radial-gradient(
|
|
155
|
+
var(--computed-mask-diameter) var(--computed-mask-diameter) at var(--computed-position-x)
|
|
156
|
+
var(--computed-position-y),
|
|
157
|
+
transparent calc(50% - 0.5px),
|
|
158
|
+
black calc(50% + 0.5px)
|
|
159
|
+
);
|
|
160
|
+
}
|
|
117
161
|
}
|
|
118
162
|
|
|
119
163
|
&.circle {
|
|
120
|
-
&::after
|
|
164
|
+
&::after,
|
|
165
|
+
.chip-icon,
|
|
166
|
+
.chip-label {
|
|
121
167
|
top: calc(var(--computed-position-y) - (var(--chip-size) / 2));
|
|
122
168
|
left: calc(var(--computed-position-x) - (var(--chip-size) / 2));
|
|
123
169
|
}
|
|
124
170
|
}
|
|
125
171
|
|
|
126
172
|
&.square {
|
|
127
|
-
&::after
|
|
173
|
+
&::after,
|
|
174
|
+
.chip-icon,
|
|
175
|
+
.chip-label {
|
|
128
176
|
top: calc(var(--computed-position-y) - (var(--chip-size) / 2));
|
|
129
177
|
left: calc(var(--computed-position-x) - (var(--chip-size) / 2));
|
|
130
178
|
}
|
|
@@ -145,9 +193,5 @@ const chipStyles = computed(() => ({
|
|
|
145
193
|
background-color: var(--color-dnd);
|
|
146
194
|
}
|
|
147
195
|
}
|
|
148
|
-
|
|
149
|
-
.chip-label {
|
|
150
|
-
display: none;
|
|
151
|
-
}
|
|
152
196
|
}
|
|
153
197
|
</style>
|
package/package.json
CHANGED