form.vue

form.vue

<template lang="pug">
.t-page.flex.flex-center
  SchemaFormWithValidation(:schema='schema')
    template(v-slot:afterForm)
      TBtn(
        @click='createNewUser()',
        :disabled='!getVerified',
        data-cy='submit'
      ) Create User Account
</template>

<script lang="ts">
import {
  defineComponent,
  computed,
} from 'vue'

export default defineComponent({
  name: 'NewUser',
  setup() {
    const createNewUser = () => {
      console.log("created")
    }
    const schema = computed(() => {
      return [
        {
          component: 'FormFields',
          type: 'email',
          model: 'email',
          name: 'email',
          label: 'Email',
          validation: 'required|email',
          autocomplete: 'no',
          'input-has-errors-class': 'border-red-500',
          refs: 'email',
        },
        {
          component: 'FormFields',
          type: 'password',
          model: 'password',
          name: 'password',
          label: 'Password',
          'input-has-errors-class': 'border-red-500',
          validation: 'required|min:8,length|max:90,length',
          autocomplete: 'no',
        }
      ]
    })

    return {
      createNewUser,
      schema
    }
  },
})
</script>

FormFields.vue

<template lang="pug">
.mb-2.mt-5(:data-type='type')
  div(v-if='type === "html"', v-html='html')
  div(v-else-if='type === "checkbox"')
    label {{ label }}
    input(
      type='checkbox',
      :checked='inputValue',
      @input='updateCheckbox($event.target.checked)'
    )
  div(v-else)
    TInput(
      :label='label',
      :name='name',
      :type='type',
      v-model='inputValue',
      @input='event => $emit("update:modelValue", event.target.value)',
      @blur='onBlur'
    )
</template>

<script lang="ts">
import { defineComponent, ref, Ref } from 'vue'
export default defineComponent({
  props: {
    name: { type: String, required: false },
    options: [Array, Object],
    // this allows using the `value` prop for a different purpose
    value: String,
    // use `title` as the prop which take the place of `value`
    modelValue: {
      type: [String, Number, Boolean, Object],
      default: '',
    },
    label: { type: String, required: false },
    html: { type: String },
    type: { type: String },
    validations: String,
    validation: {
      type: Object,
      default: () => ({}),
    },
    'input-class': { type: String },
    class: { type: String },
    children: { type: String },
    'data-cy': { type: String },
  },
  setup(props, context) {
    const checkboxValue = ref(false) as Ref<any>
    checkboxValue.value = props.modelValue
    const updateCheckbox = (value: any) => {
      console.log('emit', value)
      context.emit('update:modelValue', value)
    }
    const update = (value: any) => {
      context.emit('update:modelValue', value)
    }
    const onBlur = () => {
      props.validation.setTouched(true)
    }
    const htmlTag = () => {
      return `<${props.type} class='${props.class}'>${props.children}</${props.type}>`
    }
    return {
      update,
      onBlur,
      htmlTag,
      updateCheckbox,
      inputValue: props.modelValue,
    }
  },
})
</script>

TInput.vue

<template lang="pug">
div
  label.font-medium.text-smt-label.block.mb-2.mt-5(v-if='label', :for='name') {{ label }}
  .mt-2
    input.mt-1.rounded-md.shadow-sm.text-black.form-input.block.w-full(
      class='focus:ring-green-500 focus:border-green-500 sm:text-sm',
      :name='name',
      :type='type',
      :id='name',
      :disabled='disabled',
      :required='required',
      v-model='inputValue',
      @blur='onBlur'
    )
    span(v-if='validation.touched') {{ validation.errorMessage }}
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'TInput',
  props: {
    type: {
      type: String,
      default: 'text',
    },
    validations: String,
    validation: {
      type: Object,
      default: () => ({}),
    },
    name: {
      type: String,
      required: false,
    },
    label: {
      type: String,
      required: false,
    },
    value: {
      type: [String, Number, Boolean, Object],
      default: null,
    },
    required: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    modelValue: {
      type: [String, Number, Boolean, Object],
      default: '',
    },
  },
  model: {
    prop: 'modelValue',
    event: 'input',
  },
  setup(props) {
    return {
      inputValue: props.modelValue,
    }
  },
})
</script>