srcdev-nuxt-forms 6.1.12 → 6.1.14
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,5 +1,5 @@
|
|
|
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>
|
|
@@ -35,7 +35,7 @@ import propValidators from "../../forms/c12/prop-validators"
|
|
|
35
35
|
const props = defineProps({
|
|
36
36
|
name: {
|
|
37
37
|
type: String,
|
|
38
|
-
|
|
38
|
+
default: "triple-toggle-switch",
|
|
39
39
|
},
|
|
40
40
|
size: {
|
|
41
41
|
type: String as PropType<string>,
|
|
@@ -52,8 +52,8 @@ const props = defineProps({
|
|
|
52
52
|
},
|
|
53
53
|
},
|
|
54
54
|
stepAnimationDuration: {
|
|
55
|
-
type:
|
|
56
|
-
default:
|
|
55
|
+
type: String as PropType<string>,
|
|
56
|
+
default: "250ms",
|
|
57
57
|
},
|
|
58
58
|
styleClassPassthrough: {
|
|
59
59
|
type: Array as PropType<string[]>,
|
|
@@ -62,6 +62,7 @@ const props = defineProps({
|
|
|
62
62
|
})
|
|
63
63
|
|
|
64
64
|
const modelValue = defineModel()
|
|
65
|
+
const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
|
|
65
66
|
|
|
66
67
|
const fieldData = defineModel("fieldData") as Ref<IFormMultipleOptions>
|
|
67
68
|
|
|
@@ -74,10 +75,13 @@ const selectedOptionIndex = computed(() => {
|
|
|
74
75
|
return fieldData.value.data.findIndex((option) => option.value === modelValue.value)
|
|
75
76
|
})
|
|
76
77
|
|
|
77
|
-
const setupDefaults = () => {
|
|
78
|
+
const setupDefaults = async () => {
|
|
78
79
|
if (Array.isArray(optionGroupRefs.value) && optionGroupRefs.value[0]) {
|
|
79
80
|
iconWidth.value = optionGroupRefs.value[0].getBoundingClientRect().width + "px"
|
|
80
81
|
}
|
|
82
|
+
|
|
83
|
+
await useSleep(250)
|
|
84
|
+
showMarker.value = true
|
|
81
85
|
}
|
|
82
86
|
|
|
83
87
|
onMounted(() => {
|
|
@@ -164,7 +168,7 @@ onMounted(() => {
|
|
|
164
168
|
.selected-option-marker {
|
|
165
169
|
aspect-ratio: 1;
|
|
166
170
|
width: v-bind(iconWidth);
|
|
167
|
-
transition: all
|
|
171
|
+
transition: all v-bind(stepAnimationDuration) ease-in-out;
|
|
168
172
|
background-color: var(--_select-scheme-group-background-color);
|
|
169
173
|
background-image: var(--_select-scheme-group-background-image);
|
|
170
174
|
border: var(--form-element-border-width) solid light-dark(var(--gray-12), var(--gray-0));
|
|
@@ -176,7 +180,7 @@ onMounted(() => {
|
|
|
176
180
|
v-bind(selectedOptionIndex) * v-bind(iconWidth) + (var(--_form-items-gap) * v-bind(selectedOptionIndex))
|
|
177
181
|
);
|
|
178
182
|
|
|
179
|
-
opacity:
|
|
183
|
+
opacity: 0;
|
|
180
184
|
|
|
181
185
|
&.show {
|
|
182
186
|
opacity: 1;
|
|
@@ -200,7 +204,7 @@ onMounted(() => {
|
|
|
200
204
|
grid-template-areas: "icon-stack";
|
|
201
205
|
place-content: center;
|
|
202
206
|
background: transparent;
|
|
203
|
-
border: var(--form-element-border-width) solid #ffffff50;
|
|
207
|
+
border: var(--form-element-border-width) solid light-dark(#00000025, #ffffff50);
|
|
204
208
|
outline: var(--form-element-outline-width) solid transparent;
|
|
205
209
|
border-radius: 50%;
|
|
206
210
|
padding: var(--_select-scheme-group-padding);
|
package/package.json
CHANGED