refactor(web): use VtsNumberInput in the network and traffic rule forms

The network MTU and VLAN messages now wrap, as in every other XO 6 form input.

@xen-orchestra/web/src/modules/network/components/form/new/NewBondedNetworkForm.vue

@@ -7,7 +7,7 @@
     <div class="row">
       <div class="column">
         <NetworkFormTextInput v-bind="nameInputBindings" />
-        <NetworkFormNumberInput v-bind="mtuInputBindings" />
+        <VtsNumberInput v-bind="mtuInputBindings" />
       </div>
       <NewNetworkDescriptionTextarea v-bind="descriptionInputBindings" />
     </div>
@@ -20,7 +20,6 @@
 </template>
 
 <script lang="ts" setup>
-import NetworkFormNumberInput from '@/modules/network/components/form/new/inputs/NetworkFormNumberInput.vue'
 import NetworkFormSelect from '@/modules/network/components/form/new/inputs/NetworkFormSelect.vue'
 import NetworkFormTextInput from '@/modules/network/components/form/new/inputs/NetworkFormTextInput.vue'
 import NewNetworkDescriptionTextarea from '@/modules/network/components/form/new/inputs/NewNetworkDescriptionTextarea.vue'
@@ -29,6 +28,7 @@ import NewNetworkButtonsSection from '@/modules/network/components/form/new/NewN
 import { useNewBondedNetworkForm } from '@/modules/network/form/new-bonded/use-new-bonded-network-form.ts'
 import type { NewBondedNetworkPayload } from '@/modules/network/jobs/xo-bonded-network-create.job.ts'
 import type { FrontXoPool } from '@/modules/pool/remote-resources/use-xo-pool-collection.ts'
+import VtsNumberInput from '@core/components/number-input/VtsNumberInput.vue'
 import { useI18n } from 'vue-i18n'
 import type { RouteLocationRaw } from 'vue-router'
 

@xen-orchestra/web/src/modules/network/components/form/new/NewInternalNetworkForm.vue

@@ -4,7 +4,7 @@
     <div class="row">
       <div class="column">
         <NetworkFormTextInput v-bind="nameInputBindings" />
-        <NetworkFormNumberInput v-bind="mtuInputBindings" />
+        <VtsNumberInput v-bind="mtuInputBindings" />
       </div>
       <NewNetworkDescriptionTextarea v-bind="descriptionInputBindings" />
     </div>
@@ -16,7 +16,6 @@
 </template>
 
 <script lang="ts" setup>
-import NetworkFormNumberInput from '@/modules/network/components/form/new/inputs/NetworkFormNumberInput.vue'
 import NetworkFormSelect from '@/modules/network/components/form/new/inputs/NetworkFormSelect.vue'
 import NetworkFormTextInput from '@/modules/network/components/form/new/inputs/NetworkFormTextInput.vue'
 import NewNetworkDescriptionTextarea from '@/modules/network/components/form/new/inputs/NewNetworkDescriptionTextarea.vue'
@@ -25,6 +24,7 @@ import NewNetworkButtonsSection from '@/modules/network/components/form/new/NewN
 import { useNewInternalNetworkForm } from '@/modules/network/form/new-internal/use-new-internal-network-form.ts'
 import type { NewInternalNetworkPayload } from '@/modules/network/jobs/xo-internal-network-create.job.ts'
 import type { FrontXoPool } from '@/modules/pool/remote-resources/use-xo-pool-collection.ts'
+import VtsNumberInput from '@core/components/number-input/VtsNumberInput.vue'
 import { useI18n } from 'vue-i18n'
 import type { RouteLocationRaw } from 'vue-router'
 

@xen-orchestra/web/src/modules/network/components/form/new/NewNetworkForm.vue

@@ -7,11 +7,11 @@
     <div class="row">
       <div class="column">
         <NetworkFormTextInput v-bind="nameInputBindings" />
-        <NetworkFormNumberInput v-bind="mtuInputBindings" />
+        <VtsNumberInput v-bind="mtuInputBindings" />
       </div>
       <NewNetworkDescriptionTextarea v-bind="descriptionInputBindings" />
     </div>
-    <NetworkFormNumberInput v-bind="vlanInputBindings" class="vlan" />
+    <VtsNumberInput v-bind="vlanInputBindings" class="vlan" />
     <div class="nbd">
       <NewNetworkNbdRadio v-bind="nbdRadioBindings" />
     </div>
@@ -20,7 +20,6 @@
 </template>
 
 <script lang="ts" setup>
-import NetworkFormNumberInput from '@/modules/network/components/form/new/inputs/NetworkFormNumberInput.vue'
 import NetworkFormSelect from '@/modules/network/components/form/new/inputs/NetworkFormSelect.vue'
 import NetworkFormTextInput from '@/modules/network/components/form/new/inputs/NetworkFormTextInput.vue'
 import NewNetworkDescriptionTextarea from '@/modules/network/components/form/new/inputs/NewNetworkDescriptionTextarea.vue'
@@ -29,6 +28,7 @@ import NewNetworkButtonsSection from '@/modules/network/components/form/new/NewN
 import { useNewNetworkForm } from '@/modules/network/form/new/use-new-network-form.ts'
 import type { NewNetworkPayload } from '@/modules/network/jobs/xo-network-create.job.ts'
 import type { FrontXoPool } from '@/modules/pool/remote-resources/use-xo-pool-collection.ts'
+import VtsNumberInput from '@core/components/number-input/VtsNumberInput.vue'
 import { useI18n } from 'vue-i18n'
 import type { RouteLocationRaw } from 'vue-router'
 

@xen-orchestra/web/src/modules/network/components/form/new/inputs/NetworkFormNumberInput.vue

@@ -1,27 +0,0 @@
-<template>
-  <VtsInputWrapper :label :message="messages">
-    <UiInput v-model.number="model" accent="brand" type="number" :required @blur="emit('blur')" />
-  </VtsInputWrapper>
-</template>
-
-<script lang="ts" setup>
-import type { InputWrapperMessage } from '@core/components/input-wrapper/VtsInputWrapper.vue'
-import VtsInputWrapper from '@core/components/input-wrapper/VtsInputWrapper.vue'
-import UiInput from '@core/components/ui/input/UiInput.vue'
-import { computed } from 'vue'
-
-const { info, warning, error } = defineProps<{
-  label: string
-  error?: InputWrapperMessage
-  warning?: InputWrapperMessage
-  info?: string
-  required?: boolean
-}>()
-
-const emit = defineEmits<{ blur: [] }>()
-const model = defineModel<number | undefined>()
-
-const messages = computed<InputWrapperMessage>(
-  () => [info, warning, error].filter(message => message !== undefined) as InputWrapperMessage
-)
-</script>

@xen-orchestra/web/src/modules/traffic-rules/components/form/edit/EditTrafficRuleForm.vue

@@ -12,7 +12,7 @@
         </template>
       </TrafficRuleFormSelect>
       <TrafficRuleFormSelect v-bind="protocolSelectBindings" />
-      <TrafficRuleFormNumberInput v-if="hasPort" v-bind="portInputBindings" />
+      <VtsNumberInput v-if="hasPort" v-bind="portInputBindings" />
     </div>
 
     <div class="row">
@@ -50,11 +50,11 @@
 </template>
 
 <script setup lang="ts">
-import TrafficRuleFormNumberInput from '@/modules/traffic-rules/components/form/inputs/TrafficRuleFormNumberInput.vue'
 import TrafficRuleFormSelect from '@/modules/traffic-rules/components/form/inputs/TrafficRuleFormSelect.vue'
 import TrafficRuleFormTextInput from '@/modules/traffic-rules/components/form/inputs/TrafficRuleFormTextInput.vue'
 import { useEditTrafficRuleForm } from '@/modules/traffic-rules/form/edit/use-edit-traffic-rule-form.ts'
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import VtsNumberInput from '@core/components/number-input/VtsNumberInput.vue'
 import VtsOption from '@core/components/select/VtsOption.vue'
 import VtsStatus from '@core/components/status/VtsStatus.vue'
 import type { TrafficRule } from '@vates/types'

@xen-orchestra/web/src/modules/traffic-rules/components/form/inputs/TrafficRuleFormNumberInput.vue

@@ -1,27 +0,0 @@
-<template>
-  <VtsInputWrapper :label :message="messages" wrap-message>
-    <UiInput v-model.number="model" accent="brand" type="number" :required @blur="emit('blur')" />
-  </VtsInputWrapper>
-</template>
-
-<script lang="ts" setup>
-import type { InputWrapperMessage } from '@core/components/input-wrapper/VtsInputWrapper.vue'
-import VtsInputWrapper from '@core/components/input-wrapper/VtsInputWrapper.vue'
-import UiInput from '@core/components/ui/input/UiInput.vue'
-import { computed } from 'vue'
-
-const { info, warning, error } = defineProps<{
-  label: string
-  error?: InputWrapperMessage
-  warning?: InputWrapperMessage
-  info?: string
-  required?: boolean
-}>()
-
-const emit = defineEmits<{ blur: [] }>()
-const model = defineModel<number | undefined>()
-
-const messages = computed<InputWrapperMessage>(
-  () => [info, warning, error].filter(message => message !== undefined) as InputWrapperMessage
-)
-</script>

@xen-orchestra/web/src/modules/traffic-rules/components/form/new/NewTrafficRuleForm.vue

@@ -12,7 +12,7 @@
         </template>
       </TrafficRuleFormSelect>
       <TrafficRuleFormSelect v-bind="protocolSelectBindings" />
-      <TrafficRuleFormNumberInput v-if="hasPort" v-bind="portInputBindings" />
+      <VtsNumberInput v-if="hasPort" v-bind="portInputBindings" />
     </div>
 
     <div class="row">
@@ -66,7 +66,6 @@
 
 <script setup lang="ts">
 import type { FrontXoPool } from '@/modules/pool/remote-resources/use-xo-pool-collection.ts'
-import TrafficRuleFormNumberInput from '@/modules/traffic-rules/components/form/inputs/TrafficRuleFormNumberInput.vue'
 import TrafficRuleFormSelect from '@/modules/traffic-rules/components/form/inputs/TrafficRuleFormSelect.vue'
 import TrafficRuleFormTextInput from '@/modules/traffic-rules/components/form/inputs/TrafficRuleFormTextInput.vue'
 import NewTrafficRuleButtonsSection from '@/modules/traffic-rules/components/form/new/NewTrafficRuleButtonsSection.vue'
@@ -75,6 +74,7 @@ import type { TrafficRulePayload } from '@/modules/traffic-rules/jobs/xo-traffic
 import type { FrontXoVif } from '@/modules/vif/remote-resources/use-xo-vif-collection.ts'
 import VtsForm from '@core/components/form/VtsForm.vue'
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import VtsNumberInput from '@core/components/number-input/VtsNumberInput.vue'
 import VtsOption from '@core/components/select/VtsOption.vue'
 import VtsStatus from '@core/components/status/VtsStatus.vue'
 import { useI18n } from 'vue-i18n'