srcdev-nuxt-components 6.1.30 → 6.1.31
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,123 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<component
|
|
3
|
+
:is="props.chip ? DisplayChip : as"
|
|
4
|
+
tag="div"
|
|
5
|
+
v-bind="props.chip ? (typeof props.chip === 'object' ? { config: props.chip } : { config: chipDefaultConfig }) : {}"
|
|
6
|
+
class="display-avatar"
|
|
7
|
+
:class="[size, elementClasses]"
|
|
8
|
+
:style-class-passthrough="elementClasses"
|
|
9
|
+
>
|
|
10
|
+
<slot name="default">
|
|
11
|
+
<NuxtImg v-if="src" :src :alt="alt || 'Avatar'" width="100%" height="100%" class="avatar-image" />
|
|
12
|
+
<span v-else>{{ fallback }}</span>
|
|
13
|
+
</slot>
|
|
14
|
+
<slot name="icon"></slot>
|
|
15
|
+
</component>
|
|
16
|
+
</template>
|
|
17
|
+
|
|
18
|
+
<script lang="ts">
|
|
19
|
+
import DisplayChip from "../display-chip/DisplayChip.vue"
|
|
20
|
+
import type { DisplayChipProps, DisplayChipConfig } from "../../types"
|
|
21
|
+
export interface AvatarProps {
|
|
22
|
+
as?: any
|
|
23
|
+
src?: string
|
|
24
|
+
alt?: string
|
|
25
|
+
text?: string
|
|
26
|
+
size?: "xs" | "s" | "md" | "lg" | "xl" | string
|
|
27
|
+
chip?: boolean | DisplayChipProps
|
|
28
|
+
class?: any
|
|
29
|
+
style?: any
|
|
30
|
+
styleClassPassthrough?: string | string[]
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
export interface AvatarSlots {
|
|
34
|
+
default(props?: {}): any
|
|
35
|
+
icon(props?: {}): any
|
|
36
|
+
}
|
|
37
|
+
</script>
|
|
38
|
+
|
|
39
|
+
<script setup lang="ts">
|
|
40
|
+
const props = withDefaults(defineProps<AvatarProps>(), {
|
|
41
|
+
as: "span",
|
|
42
|
+
size: "md",
|
|
43
|
+
styleClassPassthrough: () => [],
|
|
44
|
+
})
|
|
45
|
+
defineSlots<AvatarSlots>()
|
|
46
|
+
|
|
47
|
+
const { elementClasses, resetElementClasses, updateElementClasses } = useStyleClassPassthrough(
|
|
48
|
+
props.styleClassPassthrough
|
|
49
|
+
)
|
|
50
|
+
|
|
51
|
+
if (props.chip && typeof props.chip === "object" && !("styleClassPassthrough" in props.chip)) {
|
|
52
|
+
updateElementClasses(["display-avatar", props.size])
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
const fallback = computed(
|
|
56
|
+
() =>
|
|
57
|
+
props.text ||
|
|
58
|
+
(props.alt || "")
|
|
59
|
+
.split(" ")
|
|
60
|
+
.map((word) => word.charAt(0))
|
|
61
|
+
.join("")
|
|
62
|
+
.substring(0, 2)
|
|
63
|
+
)
|
|
64
|
+
|
|
65
|
+
const chipDefaultConfig = {
|
|
66
|
+
size: "12px",
|
|
67
|
+
maskWidth: "4px",
|
|
68
|
+
offset: "0px",
|
|
69
|
+
angle: "90deg",
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
watch(
|
|
73
|
+
() => props.styleClassPassthrough,
|
|
74
|
+
() => {
|
|
75
|
+
resetElementClasses(props.styleClassPassthrough)
|
|
76
|
+
}
|
|
77
|
+
)
|
|
78
|
+
</script>
|
|
79
|
+
|
|
80
|
+
<style lang="css">
|
|
81
|
+
.display-avatar {
|
|
82
|
+
display: flex;
|
|
83
|
+
align-items: center;
|
|
84
|
+
justify-content: center;
|
|
85
|
+
border-radius: 50%;
|
|
86
|
+
color: var(--gray-3);
|
|
87
|
+
border: 1px solid light-dark(var(--gray-7), var(--gray-3));
|
|
88
|
+
|
|
89
|
+
isolation: isolate;
|
|
90
|
+
|
|
91
|
+
&.xs {
|
|
92
|
+
width: 24px;
|
|
93
|
+
height: 24px;
|
|
94
|
+
font-size: 0.75rem;
|
|
95
|
+
}
|
|
96
|
+
&.s {
|
|
97
|
+
width: 32px;
|
|
98
|
+
height: 32px;
|
|
99
|
+
font-size: 0.875rem;
|
|
100
|
+
}
|
|
101
|
+
&.md {
|
|
102
|
+
width: 40px;
|
|
103
|
+
height: 40px;
|
|
104
|
+
font-size: 1rem;
|
|
105
|
+
}
|
|
106
|
+
&.lg {
|
|
107
|
+
width: 48px;
|
|
108
|
+
height: 48px;
|
|
109
|
+
font-size: 1.125rem;
|
|
110
|
+
}
|
|
111
|
+
&.xl {
|
|
112
|
+
width: 56px;
|
|
113
|
+
height: 56px;
|
|
114
|
+
font-size: 1.25rem;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.avatar-image {
|
|
118
|
+
width: 100%;
|
|
119
|
+
border-radius: 50%;
|
|
120
|
+
object-fit: cover;
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
</style>
|
|
@@ -15,6 +15,7 @@ export interface DisplayChipConfig {
|
|
|
15
15
|
export interface DisplayChipProps {
|
|
16
16
|
tag?: "div" | "span"
|
|
17
17
|
shape?: "circle" | "square"
|
|
18
|
+
config?: DisplayChipConfig
|
|
18
19
|
styleClassPassthrough?: string | string[]
|
|
19
20
|
}
|
|
20
21
|
|
|
@@ -28,33 +29,39 @@ export interface ChipSlots {
|
|
|
28
29
|
const props = withDefaults(defineProps<DisplayChipProps>(), {
|
|
29
30
|
tag: "div",
|
|
30
31
|
shape: "circle",
|
|
31
|
-
|
|
32
|
-
})
|
|
33
|
-
defineSlots<ChipSlots>()
|
|
34
|
-
|
|
35
|
-
const chipConfig = defineModel<DisplayChipConfig>({
|
|
36
|
-
type: Object as PropType<{
|
|
37
|
-
size: string
|
|
38
|
-
maskWidth: string
|
|
39
|
-
offset: string
|
|
40
|
-
angle: string
|
|
41
|
-
}>,
|
|
42
|
-
default: () => ({
|
|
32
|
+
config: () => ({
|
|
43
33
|
size: "12px",
|
|
44
34
|
maskWidth: "4px",
|
|
45
35
|
offset: "0px",
|
|
46
36
|
angle: "90deg",
|
|
47
37
|
}),
|
|
48
|
-
|
|
38
|
+
styleClassPassthrough: () => [],
|
|
49
39
|
})
|
|
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
|
+
// })
|
|
50
57
|
|
|
51
58
|
const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
|
|
52
59
|
|
|
53
60
|
const chipStyles = computed(() => ({
|
|
54
|
-
"--chip-size":
|
|
55
|
-
"--chip-mask-width":
|
|
56
|
-
"--chip-offset":
|
|
57
|
-
"--chip-angle":
|
|
61
|
+
"--chip-size": props.config?.size,
|
|
62
|
+
"--chip-mask-width": props.config?.maskWidth,
|
|
63
|
+
"--chip-offset": props.config?.offset,
|
|
64
|
+
"--chip-angle": props.config?.angle,
|
|
58
65
|
}))
|
|
59
66
|
</script>
|
|
60
67
|
|
package/package.json
CHANGED