@nexxtmove/ui 0.1.54 → 0.1.55
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
|
@@ -12,6 +12,8 @@ interface NexxtCustomerJourneyTileProps {
|
|
|
12
12
|
delay?: number
|
|
13
13
|
percentage?: number
|
|
14
14
|
percentageExplanaition?: string
|
|
15
|
+
variant?: 'information' | 'display'
|
|
16
|
+
selected?: boolean
|
|
15
17
|
}
|
|
16
18
|
|
|
17
19
|
defineOptions({
|
|
@@ -26,6 +28,8 @@ const {
|
|
|
26
28
|
delay,
|
|
27
29
|
percentage,
|
|
28
30
|
percentageExplanaition,
|
|
31
|
+
variant = 'information',
|
|
32
|
+
selected = false,
|
|
29
33
|
} = defineProps<NexxtCustomerJourneyTileProps>()
|
|
30
34
|
|
|
31
35
|
const displayAmount = ref(animated ? 0 : (amount ?? 0))
|
|
@@ -51,20 +55,55 @@ const ariaLabel = computed(() => {
|
|
|
51
55
|
}
|
|
52
56
|
return parts.join(', ')
|
|
53
57
|
})
|
|
58
|
+
|
|
59
|
+
const borderColors = computed(() => {
|
|
60
|
+
switch (variant) {
|
|
61
|
+
case 'information':
|
|
62
|
+
return 'outline-gray-200'
|
|
63
|
+
break
|
|
64
|
+
case 'display':
|
|
65
|
+
if (selected) {
|
|
66
|
+
return 'outline-purple-500 body-semibold text-purple-500'
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
return 'outline-purple-50 text-purple-100'
|
|
70
|
+
break
|
|
71
|
+
default:
|
|
72
|
+
return ''
|
|
73
|
+
}
|
|
74
|
+
})
|
|
75
|
+
|
|
76
|
+
const iconColors = computed(() => {
|
|
77
|
+
switch (variant) {
|
|
78
|
+
case 'information':
|
|
79
|
+
return 'text-purple-500 bg-purple-100'
|
|
80
|
+
break
|
|
81
|
+
case 'display':
|
|
82
|
+
if (selected) {
|
|
83
|
+
return 'bg-purple-500 text-white'
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
return 'bg-purple-50 text-purple-100'
|
|
87
|
+
break
|
|
88
|
+
default:
|
|
89
|
+
return ''
|
|
90
|
+
}
|
|
91
|
+
})
|
|
54
92
|
</script>
|
|
55
93
|
|
|
56
94
|
<template>
|
|
57
95
|
<component
|
|
58
96
|
:is="as"
|
|
59
97
|
:aria-label="ariaLabel"
|
|
60
|
-
class="flex rounded-xl bg-white outline
|
|
61
|
-
:class="icon ? 'gap-6 p-1.5' : 'p-4'"
|
|
98
|
+
class="flex rounded-xl bg-white outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cornflower-blue-500"
|
|
99
|
+
:class="[icon ? 'gap-6 p-1.5' : 'p-4', borderColors]"
|
|
62
100
|
>
|
|
63
101
|
<div
|
|
64
102
|
v-if="icon"
|
|
65
|
-
class="flex min-h-10 w-14 items-center justify-center overflow-hidden rounded-tl-md rounded-bl-md
|
|
103
|
+
class="flex min-h-10 w-14 items-center justify-center overflow-hidden rounded-tl-md rounded-bl-md"
|
|
104
|
+
:class="iconColors"
|
|
66
105
|
>
|
|
67
|
-
<NexxtIcon :name="icon" class="text-2xl
|
|
106
|
+
<NexxtIcon :name="icon" class="text-2xl" aria-hidden="true" />
|
|
68
107
|
</div>
|
|
69
108
|
<div class="flex flex-col items-start gap-1" :class="icon ? 'py-6 pr-4' : ''">
|
|
70
109
|
<span v-if="title">{{ title }}</span>
|
|
@@ -112,7 +112,7 @@ const resolvedBackgroundColor = computed(() =>
|
|
|
112
112
|
class="flex h-full w-full items-center justify-center"
|
|
113
113
|
>
|
|
114
114
|
<slot>
|
|
115
|
-
<span class="heading-1
|
|
115
|
+
<span class="heading-1">{{ value }}</span>
|
|
116
116
|
</slot>
|
|
117
117
|
</div>
|
|
118
118
|
</foreignObject>
|