refactor: remove disabled and class logic from FormField.vue

logic now being defined in AnimationForm and passed via props to FormField

Author: igorMSoares

docs/.vitepress/components/AnimationForm.vue

@@ -79,6 +79,17 @@
     field => fieldsList?.indexOf(field.label) !== -1
   );
 
+  function setClassName(field) {
+    return field.label === 'dimensionsTransition'
+      ? form => (form.maintainSpace ? 'disabled' : '')
+      : undefined;
+  }
+
+  function setDisabled(field) {
+    return field.label === 'dimensionsTransition'
+      ? form => form.maintainSpace ?? false
+      : undefined;
+  }
   defineEmits(['resetAnimation']);
 </script>
 
@@ -93,6 +104,8 @@
           :type="field.type"
           :tag-name="field.tagName"
           :select-options="field.selectOptions ?? []"
+          :class-name="setClassName(field)"
+          :disabled="setDisabled(field)"
           @change-field="opts => $emit('resetAnimation', opts)"
         />
       </div>

docs/.vitepress/components/FormField.vue

@@ -11,12 +11,15 @@
     eventName: String,
     tagName: String,
     selectOptions: Array,
+    disabled: Function,
   });
   const {
     label = '',
     type = 'text',
     tagName = 'input',
     selectOptions = [],
+    className = () => '',
+    disabled = () => false,
   } = props;
   const form = typeof props.form === 'function' ? props.form() : ref({});
 
@@ -26,16 +29,7 @@
 </script>
 
 <template>
-  <label
-    :for="toKebabCase(label)"
-    :class="
-      label === 'dimensionsTransition'
-        ? form.maintainSpace
-          ? 'disabled'
-          : ''
-        : ''
-    "
-  >
+  <label :for="toKebabCase(label)" :class="className(form)">
     {{ label }}:
     <input
       v-if="tagName === 'input'"
@@ -44,7 +38,7 @@
       :type="type"
       :id="toKebabCase(label)"
       :name="toKebabCase(label)"
-      :disabled="label === 'dimensionsTransition' ? form.maintainSpace : false"
+      :disabled="disabled(form)"
     />
     <select
       v-if="tagName === 'select'"