Bug 38201: Split InputElement into text and number variants

Signed-off-by: Michaela Sieber <michaela.sieber@kit.edu>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>

koha-tmpl/intranet-tmpl/prog/js/vue/components/Elements/InputNumberElement.vue

@@ -0,0 +1,34 @@
+<template>
+    <input
+        :id="id"
+        type="number"
+        v-model="model"
+        :placeholder="placeholder"
+        :required="required"
+    />
+</template>
+
+<script>
+export default {
+    props: {
+        id: String,
+        modelValue: Number,
+        placeholder: String,
+        required: Boolean,
+    },
+    emits: ["update:modelValue"],
+    computed: {
+        model: {
+            get() {
+                return this.modelValue;
+            },
+            set(value) {
+                this.$emit("update:modelValue", value);
+            },
+        },
+    },
+    name: "InputNumberElement",
+};
+</script>
+
+<style></style>

koha-tmpl/intranet-tmpl/prog/js/vue/components/Elements/InputTextElement.vue

@@ -1,7 +1,7 @@
 <template>
     <input
         :id="id"
-        :type="type"
+        type="text"
         v-model="model"
         :placeholder="placeholder"
         :required="required"
@@ -15,10 +15,6 @@ export default {
         modelValue: String,
         placeholder: String,
         required: Boolean,
-        type: {
-            type: String,
-            default: "text",
-        },
     },
     emits: ["update:modelValue"],
     computed: {
@@ -31,7 +27,7 @@ export default {
             },
         },
     },
-    name: "InputElement",
+    name: "InputTextElement",
 };
 </script>
 

koha-tmpl/intranet-tmpl/prog/js/vue/components/FormElement.vue

@@ -7,16 +7,15 @@
         >{{ attr.label }}:</label
     >
     <template v-if="attr.type == 'number'">
-        <InputElement
+        <InputNumberElement
             :id="getElementId"
-            type="number"
             v-model="resource[attr.name]"
             :placeholder="attr.placeholder || attr.label"
             :required="attr.required ? true : false"
         />
     </template>
     <template v-else-if="attr.type == 'text'">
-        <InputElement
+        <InputTextElement
             :id="getElementId"
             v-model="resource[attr.name]"
             :placeholder="attr.placeholder || attr.label"
@@ -184,7 +183,8 @@
 <script>
 import AdditionalFieldsEntry from "./AdditionalFieldsEntry.vue";
 import BaseElement from "./BaseElement.vue";
-import InputElement from "./Elements/InputElement.vue";
+import InputTextElement from "./Elements/InputTextElement.vue";
+import InputNumberElement from "./Elements/InputNumberElement.vue";
 import InputCheckboxElement from "./Elements/InputCheckboxElement.vue";
 import TextareaElement from "./Elements/TextareaElement.vue";
 import FormRelationshipSelect from "./FormRelationshipSelect.vue";
@@ -262,7 +262,8 @@ export default {
         FormRelationshipSelect,
         ToolTip,
         AdditionalFieldsEntry,
-        InputElement,
+        InputTextElement,
+        InputNumberElement,
         InputCheckboxElement,
         TextareaElement,
     },