Merge pull request #142 from alvarosaburido/feature/number-input

feat(number): added independent number field component

Author: alvarosabu

dev/typescript/App.vue

@@ -45,7 +45,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, reactive, ref } from 'vue';
+import { defineComponent, reactive, ref } from 'vue';
 import {
   TextInput,
   SelectInput,
@@ -59,8 +59,9 @@ import {
   email,
   pattern,
   ColorInput,
+  NumberInput,
 } from '../../src';
-
+/* } from '../../dist/as-dynamic-forms.esm'; */
 export default defineComponent({
   name: 'app',
   setup() {
@@ -88,9 +89,16 @@ export default defineComponent({
             ),
           ],
         }),
+        new NumberInput({
+          label: 'Number',
+          min: 5,
+          max: 60,
+          step: 5,
+        }),
         new SelectInput<string>({
           label: 'Games',
           customClass: 'w-1/2',
+          value: 'the-last-of-us',
           options: [
             {
               key: 'the-last-of-us',

src/components/dynamic-input/DynamicInput.vue

@@ -7,6 +7,7 @@ import SelectInput from '../select-input/SelectInput.vue';
 import TextAreaInput from '../text-area-input/TextAreaInput.vue';
 import CheckboxInput from '../checkbox-input/CheckboxInput.vue';
 import RadioInput from '../radio-input/RadioInput.vue';
+import NumberInput from '../number-input/NumberInput.vue';
 
 import { FormControl } from '../../core/models';
 import { isEmpty, entries, values, keys } from '../../core/utils/helpers';
@@ -19,6 +20,7 @@ const components = {
   TextAreaInput,
   CheckboxInput,
   RadioInput,
+  NumberInput,
 };
 
 const props = {
@@ -138,6 +140,9 @@ export default defineComponent({
         case 'color':
           component = h(TextInput, attributes.value);
           break;
+        case 'number':
+          component = h(NumberInput, attributes.value);
+          break;
         case 'select':
           component = h(SelectInput, attributes.value);
           break;

src/components/number-input/NumberInput.vue

@@ -0,0 +1,35 @@
+<script lang="ts">
+import { defineComponent, h, PropType } from 'vue';
+import { FormControl } from '../../core/models';
+import { useInputEvents } from '../../composables/input-events';
+
+const props = {
+  control: Object as PropType<FormControl<string>>,
+};
+
+export default defineComponent({
+  name: 'asNumberInput',
+  props,
+  setup(props, { emit }) {
+    const { onChange, onFocus, onBlur } = useInputEvents(props?.control, emit);
+
+    return () =>
+      h('input', {
+        name: props?.control?.name || '',
+        type: props?.control?.type,
+        disabled: props?.control?.disabled,
+        placeholder: props?.control?.placeholder,
+        class: ['form-control'],
+        value: props?.control?.value,
+        min: props?.control?.min,
+        max: props?.control?.max,
+        step: props?.control?.step,
+        onFocus,
+        onBlur,
+        onChange,
+      });
+  },
+});
+</script>
+
+<style></style>

src/components/text-input/TextInput.vue

@@ -4,7 +4,7 @@ import { FormControl } from '../../core/models';
 import { useInputEvents } from '../../composables/input-events';
 
 const props = {
-  control: Object as PropType<FormControl<any>>,
+  control: Object as PropType<FormControl<string>>,
 };
 
 export default defineComponent({

src/components/text-area-input/TextAreaInput.vue renamed to src/components/textarea-input/TextAreaInput.vue

@@ -31,6 +31,9 @@ export class InputBase<T> {
   options?: { key: string; value: string; disabled?: boolean }[];
   cols?: number;
   rows?: number;
+  min?: number;
+  max?: number;
+  step?: number;
 
   constructor(
     options: {
@@ -46,6 +49,9 @@ export class InputBase<T> {
       options?: { key: string; value: string; disabled?: boolean }[];
       cols?: number;
       rows?: number;
+      min?: number;
+      max?: number;
+      step?: number;
     } = {},
   ) {
     this.value = options.value;
@@ -60,6 +66,9 @@ export class InputBase<T> {
     this.options = options.options;
     this.rows = options.rows || 0;
     this.cols = options.cols || 0;
+    this.min = options.min || 0;
+    this.max = options.max || 0;
+    this.step = options.step || 0;
   }
 }
 
@@ -122,6 +131,9 @@ export class FormControl<T> extends InputBase<T> {
       options?: { key: string; value: string; disabled?: boolean }[];
       cols?: number;
       rows?: number;
+      min?: number;
+      max?: number;
+      step?: number;
     } = {},
   ) {
     super({
@@ -136,6 +148,9 @@ export class FormControl<T> extends InputBase<T> {
       options: options.options,
       rows: options.rows,
       cols: options.cols,
+      min: options.min,
+      max: options.max,
+      step: options.step,
     });
   }
 }