srcdev-nuxt-components 6.1.25 → 6.1.27
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.
|
@@ -0,0 +1,145 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<component :is="tag" class="display-chip-core" :class="[shape, elementClasses]" :style="chipStyles">
|
|
3
|
+
<slot></slot>
|
|
4
|
+
</component>
|
|
5
|
+
</template>
|
|
6
|
+
|
|
7
|
+
<script setup lang="ts">
|
|
8
|
+
const props = defineProps({
|
|
9
|
+
tag: {
|
|
10
|
+
type: String,
|
|
11
|
+
default: "span",
|
|
12
|
+
validator(value: string) {
|
|
13
|
+
return ["div", "span"].includes(value)
|
|
14
|
+
},
|
|
15
|
+
},
|
|
16
|
+
shape: {
|
|
17
|
+
type: String as PropType<"circle" | "square">,
|
|
18
|
+
default: "circle",
|
|
19
|
+
validator(value: string) {
|
|
20
|
+
return ["circle", "square"].includes(value)
|
|
21
|
+
},
|
|
22
|
+
},
|
|
23
|
+
styleClassPassthrough: {
|
|
24
|
+
type: [String, Array] as PropType<string | string[]>,
|
|
25
|
+
default: () => [],
|
|
26
|
+
},
|
|
27
|
+
})
|
|
28
|
+
|
|
29
|
+
const chipConfig = defineModel<{
|
|
30
|
+
size: string
|
|
31
|
+
maskWidth: string
|
|
32
|
+
offset: string
|
|
33
|
+
angle: string
|
|
34
|
+
}>({
|
|
35
|
+
type: Object as PropType<{
|
|
36
|
+
size: string
|
|
37
|
+
maskWidth: string
|
|
38
|
+
offset: string
|
|
39
|
+
angle: string
|
|
40
|
+
}>,
|
|
41
|
+
default: () => ({
|
|
42
|
+
size: "12px",
|
|
43
|
+
maskWidth: "4px",
|
|
44
|
+
offset: "0px",
|
|
45
|
+
angle: "90deg",
|
|
46
|
+
}),
|
|
47
|
+
required: false,
|
|
48
|
+
})
|
|
49
|
+
|
|
50
|
+
const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
|
|
51
|
+
|
|
52
|
+
const chipStyles = computed(() => ({
|
|
53
|
+
"--chip-size": chipConfig.value.size,
|
|
54
|
+
"--chip-mask-width": chipConfig.value.maskWidth,
|
|
55
|
+
"--chip-offset": chipConfig.value.offset,
|
|
56
|
+
"--chip-angle": chipConfig.value.angle,
|
|
57
|
+
}))
|
|
58
|
+
</script>
|
|
59
|
+
|
|
60
|
+
<style lang="css">
|
|
61
|
+
.display-chip-core {
|
|
62
|
+
--computed-mask-diameter: calc(var(--chip-size) + (var(--chip-mask-width) * 2));
|
|
63
|
+
|
|
64
|
+
&.circle {
|
|
65
|
+
--computed-chip-offset: calc((100% / 2) + var(--chip-offset));
|
|
66
|
+
--computed-position-x: calc(var(--computed-chip-offset) * cos(var(--chip-angle) - 90deg) + (100% / 2));
|
|
67
|
+
--computed-position-y: calc(var(--computed-chip-offset) * sin(var(--chip-angle) - 90deg) + (100% / 2));
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
&.square {
|
|
71
|
+
--circle-x: calc(50% + (50% + var(--chip-offset) + (var(--chip-size) / 2)) * cos(var(--chip-angle) - 90deg));
|
|
72
|
+
--circle-y: calc(50% + (50% + var(--chip-offset) + (var(--chip-size) / 2)) * sin(var(--chip-angle) - 90deg));
|
|
73
|
+
--computed-position-x: clamp(calc(var(--chip-offset) * -1), var(--circle-x), calc(100% + var(--chip-offset)));
|
|
74
|
+
--computed-position-y: clamp(calc(var(--chip-offset) * -1), var(--circle-y), calc(100% + var(--chip-offset)));
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
/* colors */
|
|
78
|
+
|
|
79
|
+
--color-offline: slategrey;
|
|
80
|
+
--color-online: rgb(0, 255, 135);
|
|
81
|
+
--color-idle: rgb(255, 185, 51);
|
|
82
|
+
--color-dnd: rgb(255, 40, 80);
|
|
83
|
+
|
|
84
|
+
position: relative;
|
|
85
|
+
display: inline-block;
|
|
86
|
+
|
|
87
|
+
&::after {
|
|
88
|
+
content: "";
|
|
89
|
+
aspect-ratio: 1;
|
|
90
|
+
background: var(--color-offline);
|
|
91
|
+
position: absolute;
|
|
92
|
+
width: var(--chip-size);
|
|
93
|
+
border-radius: 100%;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
& > * {
|
|
97
|
+
/*
|
|
98
|
+
create the cutout mask around the image,
|
|
99
|
+
it's just a radial gradient positioned at the same place as the
|
|
100
|
+
psuedo-element ::after
|
|
101
|
+
*/
|
|
102
|
+
|
|
103
|
+
mask-image: radial-gradient(
|
|
104
|
+
var(--computed-mask-diameter) var(--computed-mask-diameter) at var(--computed-position-x)
|
|
105
|
+
var(--computed-position-y),
|
|
106
|
+
transparent calc(50% - 0.5px),
|
|
107
|
+
black calc(50% + 0.5px)
|
|
108
|
+
);
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
&.circle {
|
|
112
|
+
&::after {
|
|
113
|
+
top: calc(var(--computed-position-y) - (var(--chip-size) / 2));
|
|
114
|
+
left: calc(var(--computed-position-x) - (var(--chip-size) / 2));
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
&.square {
|
|
119
|
+
&::after {
|
|
120
|
+
top: calc(var(--computed-position-y) - (var(--chip-size) / 2));
|
|
121
|
+
left: calc(var(--computed-position-x) - (var(--chip-size) / 2));
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
&.online {
|
|
126
|
+
&::after {
|
|
127
|
+
background-color: var(--color-online);
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
&.idle {
|
|
131
|
+
&::after {
|
|
132
|
+
background-color: var(--color-idle);
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
&.dnd {
|
|
136
|
+
&::after {
|
|
137
|
+
background-color: var(--color-dnd);
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.chip-label {
|
|
142
|
+
display: none;
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
</style>
|
|
@@ -102,16 +102,33 @@ const updateComponentState = () => {
|
|
|
102
102
|
}
|
|
103
103
|
|
|
104
104
|
.display-prompt-wrapper {
|
|
105
|
-
background-color: var(--colour-theme-
|
|
106
|
-
border:
|
|
105
|
+
background-color: var(--colour-theme-8);
|
|
106
|
+
border: 0px solid transparent;
|
|
107
107
|
border-radius: 4px;
|
|
108
|
-
|
|
109
|
-
border-inline-start: 8px solid var(--colour-theme-8);
|
|
110
108
|
border-start-start-radius: 8px;
|
|
111
109
|
border-end-start-radius: 8px;
|
|
110
|
+
padding-inline-start: 8px;
|
|
112
111
|
|
|
113
112
|
overflow: hidden;
|
|
114
113
|
|
|
114
|
+
&:not(.dark) {
|
|
115
|
+
&.outlined {
|
|
116
|
+
border: 1px solid var(--colour-theme-8);
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
&.dark {
|
|
121
|
+
border-width: 0;
|
|
122
|
+
|
|
123
|
+
.display-prompt-inner {
|
|
124
|
+
background-color: var(--gray-12);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
&.outlined {
|
|
128
|
+
border: 1px solid var(--colour-theme-8);
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
|
|
115
132
|
.display-prompt-inner {
|
|
116
133
|
align-items: center;
|
|
117
134
|
display: flex;
|
|
@@ -120,6 +137,10 @@ const updateComponentState = () => {
|
|
|
120
137
|
padding-block: 1rem;
|
|
121
138
|
padding-inline: 1.5rem;
|
|
122
139
|
|
|
140
|
+
border-start-start-radius: 8px;
|
|
141
|
+
border-end-start-radius: 8px;
|
|
142
|
+
background-color: var(--colour-theme-10);
|
|
143
|
+
|
|
123
144
|
.display-prompt-icon {
|
|
124
145
|
display: inline-flex;
|
|
125
146
|
.icon {
|
package/package.json
CHANGED