Add number field

index.html

@@ -140,6 +140,24 @@
           "special_type": null,
           "rows": 5,
           "key": "textarea"
+        },
+        {
+          "name": "numerisch",
+          "hint": "Quisque justo leo, ultricies vestibulum.",
+          "type": "NumberField",
+          "columns": {
+            "mobile": 2,
+            "tablet": 4,
+            "desktop": 6
+          },
+          "value": null,
+          "required": false,
+          "nami_type": null,
+          "for_members": true,
+          "special_type": null,
+          "key": "numerisch",
+          "min": null,
+          "max": 7
         }
       ]
     }

src/components/fields/Number.vue

@@ -0,0 +1,37 @@
+<template>
+    <v-text :id="innerId" v-model="inner" type="number" :required="field.required" :min="field.min" :max="field.max" :name="field.key" :label="field.name" :hint="field.hint"></v-text>
+</template>
+
+<script setup>
+import {computed} from 'vue';
+import VText from './VText.vue';
+
+const emit = defineEmits(['update:modelValue']);
+const props = defineProps({
+    modelValue: {
+        required: true,
+        validator: (value) => value === null || typeof value === 'number',
+    },
+    field: {
+        required: true,
+        validator: (value) =>
+            hasKeys(value, [...globalFieldRules(), 'required', 'min', 'max']) &&
+            typeof value.required === 'boolean' &&
+            typeof value.key === 'string' &&
+            value.key.length > 0 &&
+            typeof value.name === 'string' &&
+            value.name.length > 0 &&
+            hasKeys(value.columns, ['mobile', 'desktop', 'tablet']),
+    },
+    id: {
+        required: false,
+    },
+});
+
+const innerId = computed(() => (props.id ? props.id : props.field.key));
+
+const inner = computed({
+    get: () => (props.modelValue === null ? props.modelValue : props.modelValue.toString()),
+    set: (v) => emit('update:modelValue', parseInt(v) !== NaN ? parseInt(v) : null),
+});
+</script>

src/components/fields/VText.vue

@@ -4,10 +4,12 @@
             :id="id"
             v-model="inner"
             :name="name"
+            :min="min"
+            :max="max"
             :type="type"
             placeholder=""
-            @keypress="$emit('keypress', $event)"
             class="bg-white group-[.info]:bg-blue-200 rounded-lg focus:outline-none text-gray-600 text-left w-full py-1 @sm:py-2 @sm:group-[.info]:py-1 px-2 @sm:px-3 @sm:group-[.info]:px-2 text-sm @sm:text-base @sm:group-[.info]:text-sm"
+            @keypress="$emit('keypress', $event)"
         />
         <div v-if="hint" class="absolute right-0 mr-2 flex items-center h-full">
             <hint :value="hint"></hint>
@@ -40,6 +42,14 @@ const props = defineProps({
         required: true,
         type: String,
     },
+    min: {
+        type: String,
+        default: () => '',
+    },
+    max: {
+        type: String,
+        default: () => '',
+    },
     label: {
         required: true,
         type: String,

src/composables/useFields.js

@@ -7,6 +7,7 @@ import FieldCheckboxes from '../components/fields/Checkboxes.vue';
 import FieldCheckbox from '../components/fields/Checkbox.vue';
 import FieldNami from '../components/fields/Nami.vue';
 import FieldRadio from '../components/fields/Radio.vue';
+import FieldNumber from '../components/fields/Number.vue';
 
 export default function useFields(active, last) {
     function resolveComponentName(field) {
@@ -21,6 +22,7 @@ export default function useFields(active, last) {
             CheckboxesField: FieldCheckboxes,
             CheckboxField: FieldCheckbox,
             NamiField: FieldNami,
+            NumberField: FieldNumber,
         }[field.type];
     }