styles w/ differents colors

src/components/ui/InputWithUnit.vue

@@ -9,14 +9,13 @@
       :step="step"
       @input="updateValue(Number($event.target.value))"
     />
-    <input
-      type="number"
-      :value="modelValue.value"
+    <NumberInput
+      :modelValue="modelValue.value"
       :min="min"
       :max="max"
       :step="step"
-      class="size-input"
-      @input="updateValue(Number($event.target.value))"
+      inputClass="size-input"
+      @update:modelValue="updateValue"
     />
     <UnitToggle
       :modelValue="modelValue.unit"
@@ -28,6 +27,7 @@
 </template>
 
 <script setup>
+import NumberInput from './NumberInput.vue';
 import UnitToggle from './UnitToggle.vue';
 
 const props = defineProps({

src/components/ui/MarginEditor.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="margin-editor">
-    <div class="field">
+    <div class="field field-margin-all">
       <label :for="id" class="label-with-tooltip" :data-css="cssProperty">{{ label }}</label>
       <div class="input-with-unit">
-        <input
+        <NumberInput
           :id="id"
-          type="number"
-          :value="simple.value"
-          min="0"
-          @input="updateSimpleValue(Number($event.target.value))"
+          :modelValue="simple.value"
+          :min="0"
+          :step="1"
+          @update:modelValue="updateSimpleValue"
         />
         <UnitToggle
           :modelValue="simple.unit"
@@ -28,15 +28,15 @@
     </div>
 
     <div v-if="expanded" class="subsection collapsed-section">
-      <div v-for="side in sides" :key="side.key" class="field">
+      <div v-for="side in sides" :key="side.key" class="field field-margin">
         <label :for="`${id}-${side.key}`" class="label-with-tooltip" :data-css="`${cssProperty}-${side.key}`">{{ side.label }}</label>
         <div class="input-with-unit">
-          <input
+          <NumberInput
             :id="`${id}-${side.key}`"
-            type="number"
-            :value="detailed[side.key].value"
-            min="0"
-            @input="updateDetailedValue(side.key, Number($event.target.value))"
+            :modelValue="detailed[side.key].value"
+            :min="0"
+            :step="1"
+            @update:modelValue="(value) => updateDetailedValue(side.key, value)"
           />
           <UnitToggle
             :modelValue="detailed[side.key].unit"
@@ -51,6 +51,7 @@
 
 <script setup>
 import { ref, watch } from 'vue';
+import NumberInput from './NumberInput.vue';
 import UnitToggle from './UnitToggle.vue';
 
 const props = defineProps({

src/components/ui/NumberInput.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="number-input">
+    <input
+      type="number"
+      :value="modelValue"
+      :min="min"
+      :max="max"
+      :step="step"
+      :id="id"
+      :class="inputClass"
+      :disabled="disabled"
+      @input="handleInput"
+    />
+    <div class="spinner-buttons">
+      <button
+        type="button"
+        class="spinner-btn spinner-up"
+        @click="increment"
+        :disabled="disabled || (max !== undefined && modelValue >= max)"
+        tabindex="-1"
+      >
+        <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M4 0L7.4641 6H0.535898L4 0Z" fill="currentColor"/>
+        </svg>
+      </button>
+      <button
+        type="button"
+        class="spinner-btn spinner-down"
+        @click="decrement"
+        :disabled="disabled || (min !== undefined && modelValue <= min)"
+        tabindex="-1"
+      >
+        <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M4 6L0.535898 0H7.4641L4 6Z" fill="currentColor"/>
+        </svg>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  modelValue: {
+    type: Number,
+    required: true
+  },
+  min: {
+    type: Number,
+    default: undefined
+  },
+  max: {
+    type: Number,
+    default: undefined
+  },
+  step: {
+    type: Number,
+    default: 1
+  },
+  id: {
+    type: String,
+    default: undefined
+  },
+  inputClass: {
+    type: String,
+    default: ''
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const handleInput = (event) => {
+  const value = Number(event.target.value);
+  emit('update:modelValue', value);
+};
+
+const increment = () => {
+  const newValue = props.modelValue + props.step;
+  if (props.max === undefined || newValue <= props.max) {
+    emit('update:modelValue', newValue);
+  }
+};
+
+const decrement = () => {
+  const newValue = props.modelValue - props.step;
+  if (props.min === undefined || newValue >= props.min) {
+    emit('update:modelValue', newValue);
+  }
+};
+</script>