From 1270b839a7d51906c5321111d2515607e81e2240 Mon Sep 17 00:00:00 2001
From: Azmi TOUIL <42934070+AzmiTouil@users.noreply.github.com>
Date: Wed, 9 Oct 2024 17:24:34 +0200
Subject: [PATCH] feat: Allow to customize Width for InputNumber Vue component-
 MEED-7379 - Meeds-io/MIPs#154 (#4098)

Allow to customize Width for InputNumber Vue component
---
 .../vue-apps/common/components/NumberInput.vue       | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/webapp/src/main/webapp/vue-apps/common/components/NumberInput.vue b/webapp/src/main/webapp/vue-apps/common/components/NumberInput.vue
index 444fce11186..1fdf1f9e7b0 100644
--- a/webapp/src/main/webapp/vue-apps/common/components/NumberInput.vue
+++ b/webapp/src/main/webapp/vue-apps/common/components/NumberInput.vue
@@ -36,8 +36,9 @@
       :min="min"
       :max="max"
       :class="valid && 'text-color' || 'error-color'"
+      :style="inputStyle"
       type="text"
-      class="layout-number-input pa-0 text-center">
+      class="pa-0 ma-0 text-center">
     <div v-else>{{ num }}</div>
     <div v-if="unit" class="ps-1">{{ unit }}</div>
     <v-btn
@@ -86,12 +87,21 @@ export default {
       type: Number,
       default: () => 88,
     },
+    inputWidth: {
+      type: Number,
+      default: () => 36,
+    },
   },
   data: () => ({
     num: 20,
     valid: false,
     initialized: false,
   }),
+  computed: {
+    inputStyle() {
+      return `width: ${this.inputWidth}px;`;
+    },
+  },
   watch: {
     num() {
       if (!this.initialized) {