Merge pull request #225 from asigloo/docs/add-visibility-demo

Docs/add visibility demo

Author: alvarosabu

demos/vue-3/src/router/index.ts

@@ -92,10 +92,21 @@ const routes: Array<RouteRecordRaw> = [
     component: () =>
       import(/* webpackChunkName: "campaigns" */ '../views/Login.vue'),
   },
+  {
+    path: '/toggle-visibility',
+    name: 'Toggle Visibility',
+    meta: {
+      title: 'Toggle Visibility',
+    },
+    component: () =>
+      import(
+        /* webpackChunkName: "toggle-visibility" */ '../views/ToggleVisibility.vue'
+      ),
+  },
 ];
 
 const router = createRouter({
-  history: createWebHistory(process.env.BASE_URL),
+  history: createWebHistory(),
   routes,
 });
 

demos/vue-3/src/views/Home.vue

@@ -99,6 +99,11 @@ export default defineComponent({
             route: '/custom-fields',
             tags: ['custom-field'],
           },
+          {
+            name: 'Toggle Visibility',
+            route: '/toggle-visibility',
+            tags: ['visibility', 'custom-class', 'custom-styles'],
+          },
         ],
       ];
     }, 1000);

demos/vue-3/src/views/ToggleVisibility.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="page container">
+    <div class="mx-auto w-full sm:w-1/2 relative mb-24">
+      <div
+        class="absolute inset-0 bg-gradient-to-r from-blue-400 to-green-200 shadow-xl transform -skew-y-3 sm:skew-y-0 sm:-rotate-3 sm:rounded-3xl"
+      ></div>
+      <div class="relative card p-6 bg-white">
+        <dynamic-form
+          :form="form"
+          @submitted="handleSubmit"
+          @change="valueChanged"
+          @error="handleError"
+        />
+        <button
+          data-cy="submit"
+          class="btn bg-green-500 text-white hover:bg-green-700 mt-4"
+          submit="true"
+          :form="form?.id"
+        >
+          Try me
+        </button>
+      </div>
+    </div>
+    <div class="mx-auto w-full sm:w-1/2"><Console :content="formValues" /></div>
+  </div>
+</template>
+
+<script lang="ts">
+import { CheckboxField, TextField } from '@/';
+import { computed, defineComponent, reactive } from 'vue';
+import Console from '../components/Console.vue';
+
+const components = {
+  Console,
+};
+/* } from '../../dist/as-dynamic-forms.esm'; */
+export default defineComponent({
+  name: 'BasicDemo',
+  components,
+  setup() {
+    const formValues = reactive({
+      hideUsingCustomClass: false,
+      hideUsingCustomStyles: false,
+    });
+
+    const form = computed(() => ({
+      id: 'basic-demo',
+      fields: {
+        hideUsingCustomClass: CheckboxField({
+          label: 'Toggle visibility next field with CustomClass',
+        }),
+        hideMe: TextField({
+          label: 'Using CustomClass',
+          customClass: formValues.hideUsingCustomClass
+            ? 'invisible'
+            : 'visible',
+        }),
+        hideUsingCustomStyles: CheckboxField({
+          label: 'Toggle visibility next field with CustomStyles',
+        }),
+        hideMe2: TextField({
+          label: 'Using CustomStyles',
+          customStyles: {
+            visibility: formValues.hideUsingCustomStyles ? 'hidden' : 'visible',
+          },
+        }),
+      },
+    }));
+
+    function handleSubmit(values) {
+      console.log('Values Submitted', values);
+    }
+
+    function valueChanged(values) {
+      Object.assign(formValues, values);
+      console.log('Values', values);
+    }
+
+    function handleError(errors) {
+      console.error('Errors', errors);
+    }
+
+    return {
+      form,
+      formValues,
+      handleSubmit,
+      valueChanged,
+      handleError,
+    };
+  },
+});
+</script>
+<style lang="scss"></style>

src/components/dynamic-form/DynamicForm.vue

@@ -36,7 +36,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, inject, PropType } from 'vue';
+import { defineComponent, inject, PropType, watch } from 'vue';
 
 import DynamicInput from '../dynamic-input/DynamicInput.vue';
 
@@ -76,8 +76,18 @@ export default defineComponent({
       onBlur,
       onValidate,
       forceValidation,
+      detectChanges,
     } = useDynamicForm(props.form as DynamicForm, ctx, options);
 
+    watch(
+      () => props.form.fields,
+      fields => {
+        detectChanges(fields);
+      },
+      {
+        deep: true,
+      },
+    );
     return {
       controls,
       valueChange,

src/components/dynamic-input/DynamicInput.vue

@@ -71,7 +71,7 @@ export default defineComponent({
     const attributes = computed(() => {
       return {
         control: props?.control,
-        style: props?.control.customStyles,
+
         onChange: valueChange,
         onBlur: (e: InputEvent) => emit('blur', e),
         onFocus: (e: InputEvent) => emit('focus', e),
@@ -203,6 +203,7 @@ export default defineComponent({
         isFieldSet.value ? 'fieldset' : 'div',
         {
           class: getClasses.value,
+          style: props?.control.customStyles,
           role: isFieldSet.value ? undefined : 'group',
         },
         [

src/composables/useDynamicForm.ts

@@ -7,6 +7,7 @@ import {
   ValidationEvent,
   InputEvent,
   DynamicForm,
+  FormFields,
 } from '@/core/models';
 import {
   computed,
@@ -16,7 +17,6 @@ import {
   ref,
   Ref,
   toRaw,
-  watch,
 } from 'vue';
 import { deepClone, hasValue, removeEmpty } from '@/core/utils/helpers';
 import { FieldControl } from '@/core/factories';
@@ -41,6 +41,7 @@ interface DynamicFormComposition {
   mapControls: (empty?: boolean) => void;
   findControlByName: (name: string | unknown) => FormControl<InputType>;
   resetForm: () => void;
+  detectChanges: (fields: FormFields) => void;
 }
 
 export function useDynamicForm(
@@ -216,7 +217,7 @@ export function useDynamicForm(
         });
       }
     });
-    cache = deepClone(toRaw(form.fields));
+    cache = deepClone(toRaw(fields));
   }
 
   function resetForm() {
@@ -241,16 +242,6 @@ export function useDynamicForm(
     forceValidation.value = true;
   }
 
-  watch(
-    () => form.fields,
-    fields => {
-      detectChanges(fields);
-    },
-    {
-      deep: true,
-    },
-  );
-
   onMounted(() => {
     mapControls();
   });
@@ -272,5 +263,6 @@ export function useDynamicForm(
     validateAll,
     findControlByName,
     resetForm,
+    detectChanges,
   };
 }

tests/e2e/specs/toggle-visibility.e2e.js

@@ -0,0 +1,31 @@
+describe('Toggle Visibility', () => {
+  beforeEach(() => {
+    cy.visit('/toggle-visibility'); // "baseUrl" is defined in cypress.json file
+  });
+
+  context('Basic Events', () => {
+    it('first input should be invisible when toggle visibility is false using CustomClass property', () => {
+      cy.get('input[name="hideUsingCustomClass"]').check();
+      cy.get('input[name="hideMe"]').should('not.be.visible');
+    });
+
+    it('first input should be visible again when toggle visibility is true using CustomClass property', () => {
+      cy.get('input[name="hideUsingCustomClass"]').check();
+      cy.get('input[name="hideMe"]').should('not.be.visible');
+      cy.get('input[name="hideUsingCustomClass"]').uncheck();
+      cy.get('input[name="hideMe"]').should('be.visible');
+    });
+
+    it('second input should be invisible when toggle visibility is false using CustomStyle property', () => {
+      cy.get('input[name="hideUsingCustomStyles"]').check();
+      cy.get('input[name="hideMe2"]').should('not.be.visible');
+    });
+
+    it('second input should be visible again when toggle visibility is true using CustomClass property', () => {
+      cy.get('input[name="hideUsingCustomStyles"]').check();
+      cy.get('input[name="hideMe2"]').should('not.be.visible');
+      cy.get('input[name="hideUsingCustomStyles"]').uncheck();
+      cy.get('input[name="hideMe2"]').should('be.visible');
+    });
+  });
+});