@josercl/form-maker 1.2.0 → 1.3.0

package/lib/components/FormMaker.vue

@@ -1,87 +1,43 @@
-<script setup>
+<script setup lang="ts">
+import type { FormMakerProps, InputType } from 'lib/model';
 import {
-  computed, inject, provide, toRefs
+  computed,
+  inject,
+  provide,
+  type ComputedRef
 } from 'vue';
 
-const props = defineProps({
-  loading: {
-    type: Boolean,
-    default: false,
-  },
-  hasActions: {
-    type: Boolean,
-    default: true,
-  },
-  modelValue: {
-    type: Object,
-    default: () => ({}),
-  },
-  fields: {
-    type: Array,
-    default: () => [],
-  },
-  hideDivider: {
-    type: Boolean,
-    default: false,
-  },
-  rowClass: {
-    type: String,
-    default: null,
-  },
-  columnClass: {
-    type: String,
-    default: null,
-  },
-  labelClass: {
-    type: String,
-    default: null,
-  },
-  inputGroupClass: {
-    type: String,
-    default: null,
-  },
-  inputWrapperClass: {
-    type: String,
-    default: null,
-  },
-  inputErrorClass: {
-    type: String,
-    default: null,
-  },
-  inputClass: {
-    type: String,
-    default: null,
-  },
-  errorClass: {
-    type: String,
-    default: null,
-  },
-  helpTextClass: {
-    type: String,
-    default: null,
-  },
-  submitButtonClass: {
-    type: String,
-    default: null,
-  },
-  submitButtonText: {
-    type: String,
-    default: 'Submit',
-  },
-});
+const props = withDefaults(defineProps<FormMakerProps>(), {
+  loading: false,
+  hasActions: true,
+  modelValue: () => ({}),
+  fields: () => [],
+  hideDivider: false,
+  rowClass: null,
+  columnClass: null,
+  labelClass: null,
+  inputGroupClass: null,
+  inputWrapperClass: null,
+  inputErrorClass: null,
+  inputClass: null,
+  errorClass: null,
+  helpTextClass: null,
+  submitButtonClass: null,
+  submitButtonText: 'Submit',
+})
 
-const emit = defineEmits([ 'submit', 'update:modelValue' ]);
+const emit = defineEmits(['submit', 'update:modelValue']);
 
 const handleSubmit = () => emit('submit');
 
-const formFields = computed(() => {
+const formFields: ComputedRef<InputType[][]> = computed(() => {
   if (props.fields.length > 0) {
     return props.fields.map(row => {
-      let newRow = row;
+      let newRow: InputType[] = row;
       if (!Array.isArray(row)) {
-        newRow = [ row ];
+        newRow = [row];
       }
-      return newRow.map(fieldSpec => {
+      return newRow.map((fieldSpec: InputType) => {
         if (!fieldSpec.id) {
           return {
             ...fieldSpec,
@@ -93,55 +49,41 @@ const formFields = computed(() => {
     });
   }
 
-  return Object.keys(props.modelValue).map(key => [
+  return Object.keys(props.modelValue).map(key => ([
     {
       name: key,
       label: key,
       id: `formMaker_${key}`,
-    },
-  ]);
+    }
+  ]));
 });
 
-const {
-  rowClass,
-  columnClass,
-  labelClass,
-  inputGroupClass,
-  inputWrapperClass,
-  inputErrorClass,
-  inputClass,
-  errorClass,
-  helpTextClass,
-  submitButtonClass,
-  modelValue,
-} = toRefs(props);
+provide('labelClass', props.labelClass || inject('form-label'));
+provide('inputGroupClass', props.inputGroupClass || inject('input-group'));
+provide('inputWrapperClass', props.inputWrapperClass || inject('input-wrapper'));
+provide('inputErrorClass', props.inputErrorClass || inject('input-error'));
+provide('inputClass', props.inputClass || inject('input'));
+provide('errorClass', props.errorClass || inject('error'));
+provide('helpTextClass', props.helpTextClass || inject('help-text'));
 
-provide('labelClass', labelClass.value || inject('form-label'));
-provide('inputGroupClass', inputGroupClass.value || inject('input-group'));
-provide('inputWrapperClass', inputWrapperClass.value || inject('input-wrapper'));
-provide('inputErrorClass', inputErrorClass.value || inject('input-error'));
-provide('inputClass', inputClass.value || inject('input'));
-provide('errorClass', errorClass.value || inject('error'));
-provide('helpTextClass', helpTextClass.value || inject('help-text'));
+const realRowClass = props.rowClass || inject('form-row');
+const realColumnClass = props.columnClass || inject('form-column');
+const realSubmitButtonClass = props.submitButtonClass || inject('submit-button');
 
-const realRowClass = rowClass.value || inject('form-row');
-const realColumnClass = columnClass.value || inject('form-column');
-const realSubmitButtonClass = submitButtonClass.value || inject('submit-button');
-
-const getObject = fieldName => {
-  const fields = fieldName.split('.');
-  let result = modelValue.value;
+const getObject = (fieldName: string) => {
+  const fields = fieldName.split('.')
+  let result = props.modelValue
   for (let i = 0; i < fields.length - 1; i += 1) {
-    const candidate = result[fields[i]];
+    const candidate = result[fields[i]]
     if (!candidate) {
-      break;
+      break
     }
-    result = candidate;
+    result = candidate
   }
-  return result;
+  return result
 };
 
-const getProp = fieldName => {
+const getProp = (fieldName: string) => {
   const fields = fieldName.split('.');
   return fields[fields.length - 1];
 };
@@ -149,35 +91,15 @@ const getProp = fieldName => {
 </script>
 
 <template>
-  <form
-    class="form-maker"
-    @submit.prevent="handleSubmit"
-  >
-    <slot
-      v-if="loading"
-      name="loading"
-    >
+  <form class="form-maker" @submit.prevent="handleSubmit">
+    <slot v-if="loading" name="loading">
       Loading...
     </slot>
     <slot>
-      <div
-        v-for="(fieldRow, i) in formFields"
-        :class="realRowClass"
-        :key="`fieldRow_${i}`"
-      >
-        <div
-          v-for="(field, j) in fieldRow"
-          :class="[realColumnClass, field.columnClass]"
-          :key="`field_${i}_${j}`"
-        >
-          <slot
-            :field="field"
-            :name="`${field.name}`"
-          >
-            <form-maker-input
-              v-model="getObject(field.name)[getProp(field.name)]"
-              v-bind="field"
-            />
+      <div v-for="(fieldRow, i) in formFields" :class="realRowClass" :key="`fieldRow_${i}`">
+        <div v-for="(field, j) in fieldRow" :class="[realColumnClass, field.columnClass]" :key="`field_${i}_${j}`">
+          <slot :field="field" :name="`${field.name}`">
+            <form-maker-input v-model="getObject(field.name)[getProp(field.name)]" v-bind="field" />
           </slot>
         </div>
       </div>
@@ -186,16 +108,9 @@ const getProp = fieldName => {
     <slot name="divider">
       <hr v-if="hasActions && !hideDivider">
     </slot>
-    <slot
-      v-if="hasActions"
-      name="actions"
-    >
+    <slot v-if="hasActions" name="actions">
       <slot name="submit-button">
-        <button
-          :class="realSubmitButtonClass"
-          :disabled="loading"
-          type="submit"
-        >
+        <button :class="realSubmitButtonClass" :disabled="loading" type="submit">
           {{ submitButtonText }}
         </button>
       </slot>

package/lib/components/FormMakerInput.vue

@@ -1,23 +1,29 @@
-<script setup>
+<script setup lang="ts">
 import { computed } from 'vue';
+import RuleEvaluator from './RuleEvaluator.vue';
+import useFormClasses from '../composables/useFormClasses';
 import useValidator from '../composables/useValidator';
 import useVModel from '../composables/useVModel';
-import { FormInputMixin, injectFormClasses } from './inputs/FormInputMixin.js';
+import type { FormMakerInputProps } from 'lib/model';
 
 defineOptions({
   inheritAttrs: false,
 });
 
-const props = defineProps({
-  ...FormInputMixin.props,
-  rules: {
-    type: Array,
-    default: () => ([]),
-  },
-});
-const emit = defineEmits(FormInputMixin.emits);
+const props = withDefaults(defineProps<FormMakerInputProps>(), {
+  loading: false,
+  disabled: false,
+  error: undefined,
+  helpText: undefined,
+  id: undefined,
+  label: undefined,
+  placeholder: undefined,
+  rules: () => [],
+  type: 'text'
+})
+const emit = defineEmits([ 'update:modelValue' ]);
 
-const value = useVModel(props, emit);
+const value = useVModel(() => props.modelValue, emit);
 
 const {
   labelClass,
@@ -27,7 +33,7 @@ const {
   inputErrorClass,
   errorClass,
   helpTextClass,
-} = injectFormClasses();
+} = useFormClasses();
 
 const hasLabel = computed(() => Boolean(props.label));
 const hasHelpText = computed(() => Boolean(props.helpText));

package/lib/components/RuleEvaluator.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { RuleValidator } from 'lib/model';
+import { watch } from 'vue';
+
+interface RuleEvaluatorProps {
+  rules?: RuleValidator[]
+  modelValue: any
+}
+
+const props = withDefaults(defineProps<RuleEvaluatorProps>(), {
+  rules: () => ([]),
+  modelValue: undefined,
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+watch(
+  props.modelValue,
+  (newVal) => {
+    let error = null;
+    const nRules = props.rules?.length ?? 0;
+
+    for (let i = 0; i < nRules; i += 1) {
+      const rule = props.rules[i];
+      const validator = rule.validator(newVal);
+      if (!validator) {
+        error = rule.message;
+        break;
+      }
+    }
+    emit('update:modelValue', error);
+  },
+  { immediate: true }
+)
+
+</script>

package/lib/components/SimpleComponent.ts

@@ -0,0 +1,23 @@
+import { h } from "vue"
+import type { SetupContext } from "vue";
+
+type SimpleComponentProps = {
+  as?: string
+}
+
+function SimpleComponent(
+  props: SimpleComponentProps,
+  context: SetupContext
+) {
+  return h(props.as, context.attrs, context.slots);
+}
+
+SimpleComponent.props = {
+  as: {
+    type: String,
+    required: false,
+    default: 'div'
+  }
+}
+
+export default SimpleComponent

package/lib/components/inputs/BasicInput.vue

@@ -1,17 +1,23 @@
-<script setup>
+<script setup lang="ts">
+import type { FormMakerInputProps } from 'lib/model';
 import useVModel from '../../composables/useVModel';
-import { FormInputMixin } from './FormInputMixin.js';
 
-const props = defineProps(FormInputMixin.props);
-const emit = defineEmits(FormInputMixin.emits);
+const props = withDefaults(defineProps<FormMakerInputProps>(), {
+  loading: false,
+  disabled: false,
+  error: undefined,
+  helpText: undefined,
+  id: undefined,
+  label: undefined,
+  placeholder: undefined,
+  rules: () => [],
+  type: 'text'
+});
+const emit = defineEmits(['update:modelValue']);
 
-const value = useVModel(props, emit);
+const value = useVModel(() => props.modelValue, emit);
 </script>
 
 <template>
-  <input
-    v-model="value"
-    :type="type"
-    v-bind="$props"
-  >
+  <input v-model="value" :type="type" v-bind="{ ...$props, ...$attrs }">
 </template>

package/lib/components/inputs/CheckboxInput.vue

@@ -1,16 +1,27 @@
-<script setup>
-import { computed, toRefs } from 'vue';
-import { FormInputMixin } from './FormInputMixin.js';
+<script setup lang="ts">
+import { computed, type ComputedRef } from 'vue';
+import type { FormMakerInputProps, SelectOption } from 'lib/model';
 
-const props = defineProps({
-  ...FormInputMixin.props,
-  options: { type: Array, default: () => [] },
-});
-const emit = defineEmits(FormInputMixin.emits);
+interface CheckInputProps extends /* @vue-ignore */ FormMakerInputProps {
+  options?: boolean | SelectOption[]
+}
 
-const { options, label } = toRefs(props);
+const props = withDefaults(defineProps<CheckInputProps>(), {
+  loading: false,
+  disabled: false,
+  error: undefined,
+  helpText: undefined,
+  id: undefined,
+  label: undefined,
+  placeholder: undefined,
+  rules: () => [],
+  options: () => []
+});
+const emit = defineEmits(['update:modelValue'])
 
-const isBinary = computed(() => options.value.length === 0);
+const isBinary = computed(() => {
+  return Array.isArray(props.options) && props.options.length === 0
+})
 
 const val = computed(() => props.modelValue);
 
@@ -19,13 +30,13 @@ const selectedOptions = computed(() => {
   return arr.filter(x => !!x);
 });
 
-const fieldOptions = computed(() => {
+const fieldOptions: ComputedRef<SelectOption[]> = computed(() => {
   if (!isBinary.value) {
-    return options.value;
+    return props.options as SelectOption[];
   }
   return [
     {
-      label: label.value,
+      label: props.label,
       value: true,
     },
   ];

package/lib/components/inputs/FileInput.vue

@@ -1,8 +1,18 @@
-<script setup>
-import { FormInputMixin } from './FormInputMixin.js';
+<script setup lang="ts">
+import type { FormMakerInputProps } from 'lib/model';
 
-defineProps(FormInputMixin.props);
-const emit = defineEmits(FormInputMixin.emits);
+
+withDefaults(defineProps<FormMakerInputProps>(), {
+  loading: false,
+  disabled: false,
+  error: undefined,
+  helpText: undefined,
+  id: undefined,
+  label: undefined,
+  placeholder: undefined,
+  rules: () => [],
+});
+const emit = defineEmits(['update:modelValue'])
 
 const handleFileSelect = event => {
   if (event.target.files.length) {

package/lib/components/inputs/RadioInput.vue

@@ -1,17 +1,26 @@
-<script setup>
-import { FormInputMixin } from './FormInputMixin.js';
+<script setup lang="ts">
+import type { FormMakerInputProps, SelectOption } from 'lib/model';
 
-defineProps({
-  ...FormInputMixin.props,
-  options: {
-    type: Array,
-    default: () => [],
-  },
-});
+interface RadioInputProps extends FormMakerInputProps {
+  options?: SelectOption[]
+}
 
-const emit = defineEmits(FormInputMixin.emits);
+withDefaults(defineProps<RadioInputProps>(), {
+  loading: false,
+  disabled: false,
+  error: undefined,
+  helpText: undefined,
+  id: undefined,
+  label: undefined,
+  placeholder: undefined,
+  options: () => [],
+  rules: () => [],
+});
+const emit = defineEmits(['update:modelValue'])
 
-const handleClick = e => emit('update:modelValue', e.target.value);
+const handleClick = (value: any) => {
+  emit('update:modelValue', value)
+}
 </script>
 
 <template>
@@ -25,7 +34,7 @@ const handleClick = e => emit('update:modelValue', e.target.value);
         :checked="option.value === modelValue"
         :value="option.value"
         type="radio"
-        @change="handleClick"
+        @change="handleClick(option.value)"
       >
       {{ option.label }}
     </label>

package/lib/components/inputs/SelectInput.vue

@@ -1,23 +1,28 @@
-<script setup>
+<script setup lang="ts">
 import { computed } from 'vue';
-import { FormInputMixin } from './FormInputMixin.js';
 import useVModel from '../../composables/useVModel';
+import type { FormMakerInputProps, SelectOption } from 'lib/model';
 
-const props = defineProps({
-  ...FormInputMixin.props,
-  options: {
-    type: Array,
-    default: () => [],
-  },
-  optionGroups: {
-    type: Object,
-    default: () => ({}),
-  },
-});
+interface SelectInputProps extends FormMakerInputProps {
+  options?: SelectOption[],
+  optionGroups?: Record<string, SelectOption[]>
+}
 
-const emit = defineEmits(FormInputMixin.emits);
+const props = withDefaults(defineProps<SelectInputProps>(), {
+  loading: false,
+  disabled: false,
+  error: undefined,
+  helpText: undefined,
+  id: undefined,
+  label: undefined,
+  placeholder: undefined,
+  options: () => [],
+  optionGroups: () => ({}),
+  rules: () => [],
+});
+const emit = defineEmits(['update:modelValue'])
 
-const value = useVModel(props, emit);
+const value = useVModel(() => props.modelValue, emit);
 
 const hasGroups = Object.keys(props.optionGroups).length > 0;
 
@@ -47,11 +52,11 @@ const fixedOptions = computed(() => props.options.map(o => {
         :label="key"
       >
         <option
-          v-for="(optLabel, optValue) in opts"
-          :key="`option_${optValue}`"
-          :value="optValue"
+          v-for="opt in opts"
+          :key="`option_${opt.value}`"
+          :value="opt.value"
         >
-          {{ optLabel }}
+          {{ opt.label }}
         </option>
       </optgroup>
     </template>

package/lib/components/inputs/TextAreaInput.vue

@@ -1,19 +1,25 @@
-<script setup>
+<script setup lang="ts">
+import type { TextareaHTMLAttributes } from 'vue';
 import useVModel from '../../composables/useVModel';
-import { FormInputMixin } from './FormInputMixin.js';
 
-const props = defineProps(FormInputMixin.props);
-const emit = defineEmits(FormInputMixin.emits);
+interface TextAreaProps extends /* @vue-ignore */ TextareaHTMLAttributes {
+  modelValue: any
+}
 
-const value = useVModel(props, emit);
+const props = withDefaults(defineProps<TextAreaProps>(), {
+  disabled: false,
+  id: undefined,
+  placeholder: undefined,
+});
+const emit = defineEmits([ 'update:modelValue' ]);
+
+const value = useVModel(() => props.modelValue, emit);
 </script>
 
 <template>
   <textarea
     :id="id"
     v-model="value"
-    :disabled="disabled"
-    :name="name"
-    :placeholder="placeholder"
+    v-bind="{...$props, ...$attrs}"
   />
 </template>

package/lib/components/texts/FormMakerInputLabel.vue

@@ -1,15 +1,16 @@
 <script>
 import { h } from 'vue';
 
-export default {
-  props: {
-    id: {
-      type: String,
-      default: null,
-    },
-  },
-  setup(props, { slots, attrs }) {
-    return () => h('label', { ...attrs, for: props.id }, slots.default());
+function FormMakerInputLabel(props, { slots, attrs }) {
+  return h('label', { ...attrs, for: props.id }, slots.default());
+}
+
+FormMakerInputLabel.props = {
+  id: {
+    type: String,
+    default: null,
   },
 };
+
+export default FormMakerInputLabel;
 </script>

package/lib/composables/useFormClasses.ts

@@ -0,0 +1,23 @@
+import { inject } from 'vue';
+
+const useFormClasses = () => {
+  const labelClass = inject('labelClass', null);
+  const inputClass = inject('inputClass', null);
+  const inputWrapperClass = inject('inputWrapperClass', null);
+  const inputGroupClass = inject('inputGroupClass', null);
+  const inputErrorClass = inject('inputErrorClass', null);
+  const errorClass = inject('errorClass', null);
+  const helpTextClass = inject('helpTextClass', null);
+
+  return {
+    labelClass,
+    inputClass,
+    inputWrapperClass,
+    inputGroupClass,
+    inputErrorClass,
+    errorClass,
+    helpTextClass,
+  };
+};
+
+export default useFormClasses;