Merge pull request #96 from alvarosaburido/feature/custom-inputs-via-slots-for-next

feat(custom-field): added custom field support via scoped slots

Author: alvarosabu

.eslintrc.js

@@ -14,6 +14,7 @@ module.exports = {
     ecmaVersion: 2020,
   },
   rules: {
+    'vue/valid-v-slot': 'off',
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     '@typescript-eslint/no-this-alias': [

dev/typescript/App.vue

@@ -9,7 +9,25 @@
             @submited="handleSubmit"
             @changed="valueChanged"
             @error="handleError"
-          />
+          >
+            <template
+              v-slot:customField1="{ control, onChange, onFocus, onBlur }"
+            >
+              <div class="avocado-field">
+                <input
+                  v-if="control"
+                  class="form-control"
+                  v-model="control.value"
+                  :type="control.type"
+                  :name="control.name"
+                  @change="onChange"
+                  @focus="onFocus"
+                  @blur="onBlur"
+                />
+                <i>🥑</i>
+              </div>
+            </template>
+          </dynamic-form>
           <button
             class="btn bg-teal-500 text-white hover:bg-teal-700 mt-4"
             submit="true"
@@ -37,6 +55,7 @@ import {
   TextAreaInput,
   CheckboxInput,
   RadioInput,
+  InputBase,
 } from '../../src';
 import { email, pattern } from '@/core/utils';
 
@@ -117,6 +136,11 @@ export default defineComponent({
             },
           ],
         }),
+        new InputBase<string>({
+          type: 'custom-field',
+          label: 'Custom Field',
+          name: 'customField1',
+        }),
       ],
     });
     function handleSubmit(values) {
@@ -140,4 +164,19 @@ export default defineComponent({
   },
 });
 </script>
-<style lang="scss"></style>
+<style lang="scss">
+.avocado-field {
+  position: relative;
+
+  .form-control {
+    border-color: #aec64c;
+    background-color: #e2eb5d52;
+    border-radius: 16px;
+  }
+  i {
+    position: absolute;
+    top: 5px;
+    right: 15px;
+  }
+}
+</style>

src/components/dynamic-form/DynamicForm.vue

@@ -11,7 +11,24 @@
       :key="control.name"
       :control="control"
       @changed="valueChange"
-    />
+    >
+      <template v-slot:customField="props">
+        <div
+          v-for="slot in deNormalizedScopedSlots"
+          :key="slot"
+          class="custom-form-wrapper"
+        >
+          <slot
+            v-if="props.control.name === slot"
+            :name="slot"
+            :control="normalizedControls[slot]"
+            :onChange="props.onChange"
+            :onFocus="props.onFocus"
+            :onBlur="props.onBlur"
+          ></slot>
+        </div>
+      </template>
+    </dynamic-input>
   </form>
 </template>
 
@@ -46,7 +63,7 @@ export default defineComponent({
   name: 'asDynamicForm',
   props,
   components,
-  setup(props, { emit }) {
+  setup(props, { emit, slots }) {
     const controls: Ref<FormControl<any>[]> = ref([]);
     const formValues = reactive({});
     const submited = ref(false);
@@ -124,6 +141,16 @@ export default defineComponent({
       emit('changed', formValues);
     }
 
+    const deNormalizedScopedSlots = computed(() => Object.keys(slots));
+
+    const normalizedControls = computed(() => {
+      let normalizedControls = {};
+      controls.value.forEach(element => {
+        normalizedControls[element.name] = element;
+      });
+      return normalizedControls;
+    });
+
     watch(props, () => {
       mapControls();
     });
@@ -136,6 +163,9 @@ export default defineComponent({
       handleSubmit,
       isValid,
       errors,
+      deNormalizedScopedSlots,
+      normalizedControls,
+      submited,
     };
   },
 });

src/components/dynamic-input/DynamicInput.vue

@@ -10,6 +10,7 @@ import RadioInput from '../radio-input/RadioInput.vue';
 
 import { FormControl } from '../../core/models';
 import { isEmpty, entries, values, keys } from '../../core/utils/helpers';
+import { useInputEvents } from '../../composables/input-events';
 
 const components = {
   TextInput,
@@ -29,7 +30,9 @@ export default defineComponent({
   name: 'asDynamicInput',
   components,
   props,
-  setup(props, { emit }) {
+  setup(props, { emit, slots }) {
+    const { onFocus, onBlur } = useInputEvents(props?.control, emit);
+
     let component;
 
     const getClasses = computed(() => {
@@ -133,6 +136,30 @@ export default defineComponent({
         case 'radio':
           component = h(RadioInput, attributes.value);
           break;
+        case 'custom-field':
+          component = h(
+            'slot',
+            {
+              name: 'customField',
+            },
+            slots.customField({
+              control: props.control,
+              onChange: ($event: any) => {
+                const newValue = {};
+                const value = $event.target.value;
+
+                if (props.control) {
+                  props.control.dirty = true;
+                  newValue[props.control.name] = value;
+                  validate();
+                  emit('changed', newValue);
+                }
+              },
+              onFocus,
+              onBlur,
+            }),
+          );
+          break;
         default:
           break;
       }

src/composables/input-events.ts

@@ -1,14 +1,17 @@
 import { FormControl } from '@/core/models';
 
-export function useInputEvents(control: FormControl<any> | undefined, emit) {
-  function onChange($event) {
+export function useInputEvents(
+  control: FormControl<any> | undefined,
+  emit: any,
+) {
+  function onChange($event: any) {
     if (control) {
       control.value = $event.target.value;
       control.dirty = true;
     }
     emit('changed', $event.target.value);
   }
-  function onCheck($event) {
+  function onCheck($event: any) {
     if (control) {
       control.value = $event.target.checked;
       control.dirty = true;

src/styles/themes/default.scss

@@ -137,3 +137,7 @@ $input-error-color: #dc3545 !default;
   user-select: none;
   font-size: 0.85rem;
 }
+
+.custom-form-wrapper {
+  order: 2;
+}

src/useApi.ts

@@ -3,7 +3,7 @@ import { DynamicFormsPlugin } from './dynamicForms';
 
 export const dynamicFormsSymbol: InjectionKey<DynamicFormsPlugin> = Symbol();
 
-export function useDynamicForms() {
+export function useDynamicForms(): DynamicFormsPlugin {
   const dynamicForms = inject(dynamicFormsSymbol);
   if (!dynamicForms) throw new Error('No dynamicForms provided!!!');
 

tsconfig.json

@@ -13,6 +13,7 @@
     "sourceMap": true,
     "noImplicitThis": true,
     "noImplicitAny": false,
+    "strictNullChecks": false,
     "allowJs": true,
     "baseUrl": ".",
     "rootDir": ".",