feat #208: hide row when no visible elements

packages/formvuelate/src/SchemaForm.vue

@@ -9,20 +9,14 @@
       v-bind="slotBinds"
     />
 
-    <div
-      :class="['schema-row', schemaRowClasses]"
-      v-for="(fields, index) in parsedSchema"
+    <SchemaRow
+      v-for="(row, index) in parsedSchema"
       :key="index"
-    >
-      <SchemaField
-        v-for="field in fields"
-        :key="field.model"
-        :field="field"
-        :sharedConfig="sharedConfig"
-        :preventModelCleanupOnSchemaChange="preventModelCleanupOnSchemaChange"
-        class="schema-col"
-      />
-    </div>
+      :row="row"
+      :schemaRowClasses="schemaRowClasses"
+      :sharedConfig="sharedConfig"
+      :preventModelCleanupOnSchemaChange="preventModelCleanupOnSchemaChange"
+    />
 
     <slot
       v-if="behaveLikeParentSchema"
@@ -34,7 +28,7 @@
 
 <script>
 import useParsedSchema from './features/ParsedSchema'
-import SchemaField from './SchemaField.vue'
+import SchemaRow from './SchemaRow.vue'
 
 import { computed } from 'vue'
 
@@ -44,7 +38,7 @@ import useFormModel from './features/FormModel'
 
 export default {
   name: 'SchemaForm',
-  components: { SchemaField },
+  components: { SchemaRow },
   props: {
     schema: {
       type: [Object, Array],

packages/formvuelate/src/SchemaRow.vue

@@ -0,0 +1,57 @@
+<template>
+  <div
+    v-if="rowHasVisibleElements"
+    :class="['schema-row', schemaRowClasses]"
+  >
+    <SchemaField
+      v-for="field in row"
+      :key="field.model"
+      :field="field"
+      v-bind="$attrs"
+      class="schema-col"
+    />
+  </div>
+</template>
+
+<script>
+import SchemaField from './SchemaField.vue'
+
+import { computed, inject } from 'vue'
+import { FORM_MODEL } from './utils/constants'
+
+export default {
+  name: 'SchemaRow',
+  components: { SchemaField },
+
+  props: {
+    row: {
+      type: Array,
+      required: true
+    },
+    schemaRowClasses: {
+      type: [String, Object, Array],
+      default: null
+    }
+  },
+
+  setup (props) {
+    const formModel = inject(FORM_MODEL, {})
+
+    const rowHasVisibleElements = computed(() => {
+      for (const field of props.row) {
+        // If a field doesnt have a condition it guarantees itll be rendered
+        if (!field.condition) return true
+
+        // If a field condition is true, it will be rendered
+        if (typeof condition !== 'function' && field.condition(formModel.value) === true) return true
+      }
+
+      return false
+    })
+
+    return {
+      rowHasVisibleElements
+    }
+  }
+}
+</script>

packages/formvuelate/tests/unit/SchemaRow.spec.js

@@ -0,0 +1,58 @@
+import SchemaRow from '../../src/SchemaRow.vue'
+import SchemaField from '../../src/SchemaField.vue'
+
+import { shallowMount } from '@vue/test-utils'
+
+const FormText = {
+  template: '<input/>',
+  props: ['label'],
+  emits: ['update:modelValue']
+}
+
+describe('SchemaRow', () => {
+  it('doesnt render if the containing elements are not showing', () => {
+    const wrapper = shallowMount(SchemaRow, {
+      props: {
+        row: [
+          {
+            model: 'FirstName',
+            component: FormText,
+            label: 'First Name',
+            condition: model => false
+          },
+          {
+            model: 'LastName',
+            component: FormText,
+            label: 'Last Name',
+            condition: model => false
+          }
+        ]
+      }
+    })
+
+    expect(wrapper.element.tagName).toBeUndefined()
+  })
+
+  it('renders if at least one of the conditions is true', () => {
+    const wrapper = shallowMount(SchemaRow, {
+      props: {
+        row: [
+          {
+            model: 'FirstName',
+            component: FormText,
+            label: 'First Name',
+            condition: model => false
+          },
+          {
+            model: 'LastName',
+            component: FormText,
+            label: 'Last Name',
+            condition: model => true
+          }
+        ]
+      }
+    })
+
+    expect(wrapper.findAllComponents(SchemaField).length).toBe(2)
+  })
+})