@redseed/redseed-ui-vue3 2.21.1 → 2.22.1
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
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
import { ref, computed, watch } from 'vue'
|
|
3
|
+
import ButtonTertiary from '../Button/ButtonTertiary.vue'
|
|
4
|
+
|
|
5
|
+
const props = defineProps({
|
|
6
|
+
flexible: {
|
|
7
|
+
type: Boolean,
|
|
8
|
+
default: false,
|
|
9
|
+
},
|
|
10
|
+
showButton: {
|
|
11
|
+
type: Boolean,
|
|
12
|
+
default: false,
|
|
13
|
+
},
|
|
14
|
+
deselectable: {
|
|
15
|
+
type: Boolean,
|
|
16
|
+
default: false,
|
|
17
|
+
},
|
|
18
|
+
selected: {
|
|
19
|
+
type: Boolean,
|
|
20
|
+
default: false,
|
|
21
|
+
},
|
|
22
|
+
disabled: {
|
|
23
|
+
type: Boolean,
|
|
24
|
+
default: false,
|
|
25
|
+
},
|
|
26
|
+
})
|
|
27
|
+
|
|
28
|
+
const isSelected = ref(props.selected)
|
|
29
|
+
|
|
30
|
+
watch(() => props.selected, () => {
|
|
31
|
+
isSelected.value = props.selected
|
|
32
|
+
})
|
|
33
|
+
|
|
34
|
+
const componentClass = computed(() => [
|
|
35
|
+
'rsui-radio-card',
|
|
36
|
+
'group/radio-card',
|
|
37
|
+
{
|
|
38
|
+
'rsui-radio-card--selected': isSelected.value,
|
|
39
|
+
'rsui-radio-card--disabled': props.disabled,
|
|
40
|
+
'rsui-radio-card--flexible': props.flexible,
|
|
41
|
+
},
|
|
42
|
+
])
|
|
43
|
+
|
|
44
|
+
const titleRowClass = computed(() => [
|
|
45
|
+
'rsui-radio-card__title-row',
|
|
46
|
+
{
|
|
47
|
+
'rsui-radio-card__title-row--selected': isSelected.value && !props.disabled,
|
|
48
|
+
'rsui-radio-card__title-row--disabled': props.disabled && !isSelected.value,
|
|
49
|
+
'rsui-radio-card__title-row--selected-disabled': isSelected.value && props.disabled,
|
|
50
|
+
},
|
|
51
|
+
])
|
|
52
|
+
|
|
53
|
+
const emit = defineEmits(['select', 'deselect', 'click'])
|
|
54
|
+
|
|
55
|
+
function handleSelect() {
|
|
56
|
+
if (props.disabled) return
|
|
57
|
+
if (!props.deselectable && isSelected.value) return
|
|
58
|
+
|
|
59
|
+
isSelected.value = !isSelected.value
|
|
60
|
+
|
|
61
|
+
if (props.deselectable && !isSelected.value) {
|
|
62
|
+
emit('deselect', isSelected.value)
|
|
63
|
+
return
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
emit('select', isSelected.value)
|
|
67
|
+
return
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
function handleClick(event) {
|
|
71
|
+
if (props.disabled) return
|
|
72
|
+
|
|
73
|
+
event.stopPropagation()
|
|
74
|
+
|
|
75
|
+
console.log('click')
|
|
76
|
+
|
|
77
|
+
emit('click', event)
|
|
78
|
+
}
|
|
79
|
+
</script>
|
|
80
|
+
<template>
|
|
81
|
+
<div :class="componentClass"
|
|
82
|
+
@click="handleSelect"
|
|
83
|
+
role="radio"
|
|
84
|
+
tabindex="0"
|
|
85
|
+
>
|
|
86
|
+
<div :class="titleRowClass">
|
|
87
|
+
<div class="rsui-radio-card__title">
|
|
88
|
+
<slot name="title"></slot>
|
|
89
|
+
</div>
|
|
90
|
+
</div>
|
|
91
|
+
|
|
92
|
+
<div class="rsui-radio-card__content-row" v-if="$slots.default">
|
|
93
|
+
<slot></slot>
|
|
94
|
+
</div>
|
|
95
|
+
|
|
96
|
+
<div class="rsui-radio-card__meta-row" v-if="$slots.meta">
|
|
97
|
+
<slot name="meta"></slot>
|
|
98
|
+
</div>
|
|
99
|
+
|
|
100
|
+
<div class="rsui-radio-card__action-row" v-if="showButton">
|
|
101
|
+
<ButtonTertiary xs @click="handleClick">
|
|
102
|
+
<slot name="button-label">Button</slot>
|
|
103
|
+
</ButtonTertiary>
|
|
104
|
+
</div>
|
|
105
|
+
</div>
|
|
106
|
+
</template>
|
|
107
|
+
<style lang="scss" scoped>
|
|
108
|
+
.rsui-radio-card {
|
|
109
|
+
@apply max-w-80 w-80 bg-white border border-rsui-grey-200 rounded-md shadow-sm outline-none select-none;
|
|
110
|
+
@apply relative cursor-pointer transition-all;
|
|
111
|
+
@apply flex flex-col gap-3 p-4;
|
|
112
|
+
@apply focus-visible:ring-4 focus-visible:ring-rsui-light;
|
|
113
|
+
|
|
114
|
+
&--flexible {
|
|
115
|
+
@apply max-w-full w-full;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
&--selected {
|
|
119
|
+
@apply bg-primary/10 border-primary;
|
|
120
|
+
@apply focus-visible:ring-4 focus-visible:ring-primary/10;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
&--disabled {
|
|
124
|
+
@apply bg-white border-rsui-grey-200 focus-visible:ring-0 cursor-default;
|
|
125
|
+
@apply after:absolute after:content-[''] after:inset-0 after:bg-rsui-grey-200/65;
|
|
126
|
+
@apply after:rounded-md;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
&__title-row {
|
|
130
|
+
@apply relative text-base font-medium text-rsui-default line-clamp-2 min-h-6;
|
|
131
|
+
|
|
132
|
+
// Radio button position
|
|
133
|
+
@apply after:absolute after:top-0 after:right-0;
|
|
134
|
+
// Radio button shape
|
|
135
|
+
@apply after:content-[''] after:size-6 after:rounded-full;
|
|
136
|
+
// Radio button animation
|
|
137
|
+
@apply after:transition-all;
|
|
138
|
+
// Radio button decoration
|
|
139
|
+
@apply after:border after:border-rsui-light after:bg-white;
|
|
140
|
+
// Radio button event
|
|
141
|
+
@apply group-hover/radio-card:after:border-rsui-medium;
|
|
142
|
+
@apply group-focus-visible/radio-card:after:border-rsui-medium;
|
|
143
|
+
|
|
144
|
+
&--selected {
|
|
145
|
+
@apply after:border-6 after:border-primary;
|
|
146
|
+
@apply group-hover/radio-card:after:border-primary;
|
|
147
|
+
@apply group-focus-visible/radio-card:after:border-primary;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
&--disabled {
|
|
151
|
+
@apply after:opacity-0;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
&--selected-disabled {
|
|
155
|
+
@apply after:border-6 after:border-white after:bg-rsui-light;
|
|
156
|
+
@apply group-hover/radio-card:after:border-white;
|
|
157
|
+
@apply group-focus-visible/radio-card:after:border-white;
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
&__content-row {
|
|
162
|
+
@apply text-sm font-normal text-rsui-medium;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
&__meta-row {
|
|
166
|
+
@apply grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-2;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
&__action-row {
|
|
170
|
+
@apply flex flex-wrap gap-2;
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
</style>
|