input validation min and max

src/App.vue

@@ -59,7 +59,7 @@ const rotatePage = () => {
       </SidebarBlock>
       <SidebarBlock title="Вертикальные линии">
         <Input v-model="vMargin" :min="1">Отступ, мм</Input>
-        <Input v-model="vRotation">Поворот, градусы</Input>
+        <Input v-model="vRotation" :min="0" :max="359">Поворот, градусы</Input>
         <ButtonsBar>
           <Button :size="ButtonSize.Small" :click="() => {
             vRotation = 45;

src/components/Input.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { onUpdated } from 'vue';
 import { InputType } from '../types';
 
 interface Props {
@@ -7,11 +8,29 @@ interface Props {
   max?: number;
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   type: InputType.Number,
 })
 
-const modelValue = defineModel();
+const modelValue = defineModel<number | string>();
+
+onUpdated(() => {
+  // Задать граничное значение при выходе за допуустимые пределы
+  if (props.type === InputType.Number && typeof modelValue.value === 'number') {
+    if (props.min !== undefined) {
+      if (modelValue.value < props.min) {
+        modelValue.value = props.min
+      }
+    }
+
+    if (props.max !== undefined) {
+      if (modelValue.value > props.max) {
+        modelValue.value = props.max
+      }
+    }
+  }
+})
+
 </script>
 
 <template>