Skip to content

Commit 1380df7

Browse files
committed
refactor: remove disabled and class logic from FormField.vue
logic now being defined in AnimationForm and passed via props to FormField
1 parent 897c260 commit 1380df7

File tree

2 files changed

+18
-11
lines changed

2 files changed

+18
-11
lines changed

docs/.vitepress/components/AnimationForm.vue

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,17 @@
7979
field => fieldsList?.indexOf(field.label) !== -1
8080
);
8181
82+
function setClassName(field) {
83+
return field.label === 'dimensionsTransition'
84+
? form => (form.maintainSpace ? 'disabled' : '')
85+
: undefined;
86+
}
87+
88+
function setDisabled(field) {
89+
return field.label === 'dimensionsTransition'
90+
? form => form.maintainSpace ?? false
91+
: undefined;
92+
}
8293
defineEmits(['resetAnimation']);
8394
</script>
8495
@@ -93,6 +104,8 @@
93104
:type="field.type"
94105
:tag-name="field.tagName"
95106
:select-options="field.selectOptions ?? []"
107+
:class-name="setClassName(field)"
108+
:disabled="setDisabled(field)"
96109
@change-field="opts => $emit('resetAnimation', opts)"
97110
/>
98111
</div>

docs/.vitepress/components/FormField.vue

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,15 @@
1111
eventName: String,
1212
tagName: String,
1313
selectOptions: Array,
14+
disabled: Function,
1415
});
1516
const {
1617
label = '',
1718
type = 'text',
1819
tagName = 'input',
1920
selectOptions = [],
21+
className = () => '',
22+
disabled = () => false,
2023
} = props;
2124
const form = typeof props.form === 'function' ? props.form() : ref({});
2225
@@ -26,16 +29,7 @@
2629
</script>
2730

2831
<template>
29-
<label
30-
:for="toKebabCase(label)"
31-
:class="
32-
label === 'dimensionsTransition'
33-
? form.maintainSpace
34-
? 'disabled'
35-
: ''
36-
: ''
37-
"
38-
>
32+
<label :for="toKebabCase(label)" :class="className(form)">
3933
{{ label }}:
4034
<input
4135
v-if="tagName === 'input'"
@@ -44,7 +38,7 @@
4438
:type="type"
4539
:id="toKebabCase(label)"
4640
:name="toKebabCase(label)"
47-
:disabled="label === 'dimensionsTransition' ? form.maintainSpace : false"
41+
:disabled="disabled(form)"
4842
/>
4943
<select
5044
v-if="tagName === 'select'"

0 commit comments

Comments
 (0)