feat(visibility): dynamic visibility per field

Author: kevinkosterr

src/FormGroup.vue

@@ -45,7 +45,7 @@ const shouldHaveLabel = computed(() => {
 </script>
 
 <template>
-  <div class="form-group">
+  <div class="form-group" :style="{display: fieldComponent && !fieldComponent.isVisible ? 'none': ''}">
     <label v-if="shouldHaveLabel" :for="fieldId">
       <span> {{ props.field.label }}</span>
     </label>

src/mixins/abstractField.js

@@ -198,6 +198,14 @@ export default {
       return this.model[this.field.model]
     },
 
+    /**
+     * Compute the state of visibility of the field/input component. `this.field.visible` must be set for this to work,
+     * otherwise this will always return true.
+     */
+    isVisible () {
+      return this.determineDynamicAttribute('visible', true)
+    },
+
     /**
      * Compute the disabled state of the field/input component. `this.field.disabled` must be set for this to work,
      * otherwise this will always return false.