srcdev-nuxt-forms 6.1.11 → 6.1.13
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,11 +1,18 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="triple-toggle-switch" :data-size="size" :data-theme="theme">
|
|
2
|
+
<div class="triple-toggle-switch" :class="[elementClasses]" :data-size="size" :data-theme="theme">
|
|
3
3
|
<div class="triple-toggle-switch-wrapper">
|
|
4
4
|
<div class="selected-option-marker-wrapper">
|
|
5
5
|
<div class="selected-option-marker" :class="[{ show: showMarker }]"></div>
|
|
6
6
|
</div>
|
|
7
7
|
<div class="option-group-wrapper">
|
|
8
|
-
<
|
|
8
|
+
<label
|
|
9
|
+
v-for="(option, index) in fieldData.data"
|
|
10
|
+
:key="option.id"
|
|
11
|
+
:for="option.id"
|
|
12
|
+
class="option-group"
|
|
13
|
+
ref="optionGroup"
|
|
14
|
+
>
|
|
15
|
+
<span class="sr-only">{{ option.label }}</span>
|
|
9
16
|
<Icon v-if="option.icon" :name="option.icon" class="option-icon" ref="optionIcons" />
|
|
10
17
|
<input
|
|
11
18
|
type="radio"
|
|
@@ -14,9 +21,9 @@
|
|
|
14
21
|
class="option-input"
|
|
15
22
|
v-model="modelValue"
|
|
16
23
|
:value="option.value"
|
|
24
|
+
:aria-selected="modelValue === option.value"
|
|
17
25
|
/>
|
|
18
|
-
|
|
19
|
-
</div>
|
|
26
|
+
</label>
|
|
20
27
|
</div>
|
|
21
28
|
</div>
|
|
22
29
|
</div>
|
|
@@ -28,7 +35,7 @@ import propValidators from "../../forms/c12/prop-validators"
|
|
|
28
35
|
const props = defineProps({
|
|
29
36
|
name: {
|
|
30
37
|
type: String,
|
|
31
|
-
|
|
38
|
+
default: "triple-toggle-switch",
|
|
32
39
|
},
|
|
33
40
|
size: {
|
|
34
41
|
type: String as PropType<string>,
|
|
@@ -55,6 +62,7 @@ const props = defineProps({
|
|
|
55
62
|
})
|
|
56
63
|
|
|
57
64
|
const modelValue = defineModel()
|
|
65
|
+
const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
|
|
58
66
|
|
|
59
67
|
const fieldData = defineModel("fieldData") as Ref<IFormMultipleOptions>
|
|
60
68
|
|
|
@@ -193,7 +201,7 @@ onMounted(() => {
|
|
|
193
201
|
grid-template-areas: "icon-stack";
|
|
194
202
|
place-content: center;
|
|
195
203
|
background: transparent;
|
|
196
|
-
border: var(--form-element-border-width) solid #ffffff50;
|
|
204
|
+
border: var(--form-element-border-width) solid light-dark(#00000025, #ffffff50);
|
|
197
205
|
outline: var(--form-element-outline-width) solid transparent;
|
|
198
206
|
border-radius: 50%;
|
|
199
207
|
padding: var(--_select-scheme-group-padding);
|
package/package.json
CHANGED