Skip to content

Commit 3991efa

Browse files
vis97cvis97c
committed
feat: form stages default slot
1 parent 043ee4a commit 3991efa

File tree

17 files changed

+85
-53
lines changed

17 files changed

+85
-53
lines changed

‎packages/components-vue/src/components/box/Message.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<!-- eslint-disable vue/no-v-html -->
22
<template>
3-
<div class="flx --flxColumn --flx-center" v-bind="$attrs">
3+
<div class="flx --flxColumn --flx-center" :class="$attrs.class">
44
<div class="txt --txtAlign-center --width">
55
<BaseBox class="--width" with-color v-bind="props">
66
<p v-if="text" v-html="text"></p>

‎packages/components-vue/src/components/dropdown/Simple.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<BaseWrapper :wrap="!!$slots.toggle" :el="el">
2+
<BaseWrapper :wrap="!!$slots.toggle" :el="el" :class="$attrs.class">
33
<div
44
v-if="$slots.toggle"
55
ref="toggleRef"

‎packages/components-vue/src/components/form/Input.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
>
1212
<div
1313
v-if="!!input.options?.length"
14-
class="flx --flxRow-wrap --flx-start-center --gap-5 --gap-10:sm --gap:md"
14+
class="flx --flxRow-wrap --flx-start-center --gap-5"
1515
>
1616
<component
1717
:is="input.multiple ? ActionButtonToggle : ActionButton"

‎packages/components-vue/src/components/form/Stages.vue‎

Lines changed: 36 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,51 @@
11
<template>
22
<BaseErrorBoundary :theme="theme">
33
<LoaderContent
4-
:loading="submitting"
4+
:loading="submitting || loading"
55
:content="!!stages?.length"
66
:theme="theme"
77
class="flx --flxColumn --flx-start-stretch --gap-30 --maxWidth-full"
8-
:class="$attrs.class"
98
:unwrap="unwrap"
109
>
11-
<div class="scroll --vertical modal-content" :class="unwrap ? $attrs.class : ''">
10+
<div
11+
v-if="(formInputsKeys?.length || $slots.default) && !loading"
12+
class="modal-content"
13+
:class="unwrap ? 'scroll --vertical' : ''"
14+
>
1215
<form
1316
method="post"
1417
class="flx --flxColumn --flx-start-stretch"
1518
:class="stagesClasses ?? '--gap-30'"
1619
>
17-
<FormSimple
18-
v-for="key in formInputsKeys[activeStage]"
19-
:key="[key, activeStage].join('-')"
20-
:model-value="formInputs[key].inputs"
21-
:theme="theme"
22-
:invalid="invalid"
23-
no-form
24-
:title="formInputs[key].title"
25-
:readonly="formInputs[key].readonly"
26-
:empty-message="formInputs[key].emptyMessage"
27-
@update:model-value="updateForm(key, $event)"
28-
@update:invalid="invalid = $event"
29-
/>
30-
<div
31-
v-if="!hideRequiredDisclaimer || $slots.disclaimers"
32-
class="flx --flxColumn"
33-
>
34-
<slot name="disclaimers">
20+
<slot></slot>
21+
<template v-if="formInputsKeys?.length">
22+
<div
23+
class="flx --flxColumn --flx-start-stretch"
24+
:class="[stagesClasses ?? '--gap-30', $attrs.class]"
25+
>
26+
<FormSimple
27+
v-for="key in formInputsKeys[activeStage]"
28+
:key="[key, activeStage].join('-')"
29+
:model-value="formInputs[key].inputs"
30+
:theme="theme"
31+
:invalid="invalid"
32+
no-form
33+
:title="formInputs[key].title"
34+
:readonly="formInputs[key].readonly"
35+
:empty-message="formInputs[key].emptyMessage"
36+
@update:model-value="updateForm(key, $event)"
37+
@update:invalid="invalid = $event"
38+
/>
39+
</div>
40+
<slot
41+
v-if="!hideRequiredDisclaimer || $slots.disclaimers"
42+
name="disclaimers"
43+
>
3544
<p class="--txtSize-xs">
3645
{{ t("required_verification") }}
3746
</p>
3847
</slot>
39-
</div>
48+
</template>
4049
</form>
4150
</div>
4251
<slot name="actions">
@@ -193,6 +202,7 @@
193202
const invalid = ref<iInvalidInput[]>([]);
194203
const formInputsKeys = ref<string[][]>([]);
195204
const formInputs = ref<Record<string, iForm>>({});
205+
const loading = ref(true);
196206
/**
197207
* Wheter external changes are comming to stages
198208
*/
@@ -235,6 +245,8 @@
235245
return inputs.reduce((acc, input) => ({ ...acc, [input.name]: input.values }), {});
236246
}
237247
function resetStages(newStages: iForm[][]) {
248+
loading.value = true;
249+
238250
// reset
239251
const newLocalStages: string[][] = [];
240252
const newLocalFormInputs: Record<string, iForm> = {};
@@ -269,11 +281,13 @@
269281
270282
formInputsKeys.value = newLocalStages;
271283
formInputs.value = newLocalFormInputs;
284+
loading.value = false;
272285
}
273286
274287
function fullReset() {
275288
const wasListened = lastListened.value;
276289
290+
loading.value = true;
277291
lastListened.value = undefined;
278292
279293
if (wasListened) emit("input-values", {}, true);

‎packages/components-vue/src/components/icon/Simple.vue‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
11
<template>
22
<i
33
aria-hidden="true"
4-
:class="[modifiersClasses, indicatorClasses, !!$slots.default ? 'svg' : 'icon']"
5-
v-bind="$attrs"
4+
:class="[
5+
$attrs.class,
6+
modifiersClasses,
7+
indicatorClasses,
8+
!!$slots.default ? 'svg' : 'icon',
9+
]"
610
>
711
<svg
812
v-if="!!$slots.default"

‎packages/components-vue/src/components/loader/Content.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
</template>
4141
<LoaderSimple v-else-if="!noLoader" :label="label" :theme="theme" />
4242
</div>
43-
<BaseWrapper v-else :wrap="!unwrap" :el="el" v-bind="$attrs">
43+
<BaseWrapper v-else :wrap="!unwrap" :el="el" :class="$attrs.class">
4444
<div v-if="loading && !noLoader" class="back --overlay is--active">
4545
<LoaderSimple :label="label" :theme="theme" />
4646
</div>

‎packages/components-vue/src/components/loader/ContentFetch.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
<BaseErrorBoundary :theme="theme">
33
<LoaderContent
44
v-bind="{
5-
...$attrs,
65
content: !!content && patchedIsContent(content),
76
errors: !!errors,
87
loading: loading,
@@ -13,6 +12,7 @@
1312
label,
1413
noLoader,
1514
}"
15+
:class="$attrs.class"
1616
>
1717
<slot
1818
v-if="!!content && patchedIsContent(content) && (!loading || firstLoad)"

‎packages/components-vue/src/components/modal/Simple.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@
99
class="modal"
1010
role="document"
1111
:class="[
12+
$attrs.class,
1213
modalClass ?? 'flx --flxColumn --flx-start-center --width',
1314
themeClasses,
1415
]"
15-
v-bind="$attrs"
1616
>
1717
<slot
1818
name="header"

‎packages/components-vue/src/components/pagination/Content.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
v-slot="{ content, refresh }"
44
:promise="patchedPromise"
55
:payload="[{ ...pagination, ...defaults }]"
6-
v-bind="{ ...$attrs, preventAutoload, theme, noContentMessage, label, isContent }"
6+
:class="$attrs.class"
7+
v-bind="{ preventAutoload, theme, noContentMessage, label, isContent }"
78
@refresh="$emit('refresh', $event)"
89
>
910
<slot

‎packages/components-vue/src/components/slider/Simple.vue‎

Lines changed: 26 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
<template>
2-
<header class="xamu-slider" @mouseover="mouseOnTabs = true" @mouseleave="mouseOnTabs = false">
2+
<header
3+
ref="wrapperRef"
4+
class="xamu-slider"
5+
@mouseover="mouseOnTabs = true"
6+
@mouseleave="mouseOnTabs = false"
7+
>
38
<div class="flx --flxColumn --flx-stretch-center --gap-10 --width-100">
49
<div
510
ref="sliderContainerRef"
@@ -8,11 +13,13 @@
813
>
914
<component
1015
:is="sliderTag"
16+
v-show="!loading"
1117
ref="sliderRef"
1218
class="flx --flxRow --flx-start-stretch --gap-none --overflow"
1319
>
1420
<slot></slot>
1521
</component>
22+
<LoaderSimple v-if="loading" :theme="theme" />
1623
</div>
1724
<ul
1825
v-if="childCount > 1 && controls"
@@ -71,6 +78,7 @@
7178
import IconFa from "../icon/Fa.vue";
7279
import ActionButton from "../action/Button.vue";
7380
import ActionButtonToggle from "../action/ButtonToggle.vue";
81+
import LoaderSimple from "../loader/Simple.vue";
7482
7583
import { useHelpers } from "../../composables/utils";
7684
import type { iUseThemeProps } from "../../types/props";
@@ -133,6 +141,8 @@
133141
const { t } = useHelpers(useI18n);
134142
const { isBrowser } = useHelpers(useUtils);
135143
144+
const loading = ref(true);
145+
const wrapperRef = ref<HTMLElement>();
136146
const sliderContainerRef = ref<HTMLElement>();
137147
const sliderRef = ref<HTMLElement>();
138148
const running = ref(false);
@@ -162,7 +172,6 @@
162172
163173
// lock slider size
164174
sliderContainerRef.value.style.width = `${sliderWidth}px`;
165-
// sliderRef.value.style.width = `${sliderWidth + slideWidth}px`;
166175
167176
// the transition needs an starting point
168177
sliderRef.value.style.left = "0";
@@ -180,8 +189,7 @@
180189
if (!sliderRef.value || !sliderContainerRef.value) throw new Error("Missing containers");
181190
182191
sliderRef.value.style.transition = "none";
183-
sliderContainerRef.value.style.width = "auto";
184-
// sliderRef.value.style.width = "auto";
192+
sliderContainerRef.value.style.width = "";
185193
sliderRef.value.style.left = "0";
186194
running.value = false;
187195
}
@@ -272,15 +280,12 @@
272280
}
273281
}
274282
275-
/**
276-
* switch tabs
277-
*/
278-
const debouncedTab = _.debounce(tab);
279-
280283
/**
281284
* Set slider interval
282285
*/
283286
function launchInterval() {
287+
loading.value = true;
288+
284289
if (!sliderRef.value || !sliderContainerRef.value) return;
285290
286291
const slides = Array.from(sliderRef.value.children || []) as HTMLElement[];
@@ -296,12 +301,20 @@
296301
if (!allowAutoAnimate.value || childCount.value <= 1) return;
297302
298303
// autoplay
299-
sliderInterval.value = setInterval(
300-
() => !mouseOnTabs.value && debouncedTab(false),
301-
props.intervalDuration
302-
);
304+
sliderInterval.value = setInterval(() => {
305+
// TODO: prevent if not in viewport
306+
if (mouseOnTabs.value) return;
307+
308+
debouncedTab(false);
309+
}, props.intervalDuration);
310+
loading.value = false;
303311
}
304312
313+
/**
314+
* switch tabs
315+
*/
316+
const debouncedTab = _.debounce(tab);
317+
305318
// lifecycle
306319
if (isBrowser) {
307320
onMounted(() => {

0 commit comments

Comments
 (0)