From b17852280b8717e3778b6f007fde8a6fa2580845 Mon Sep 17 00:00:00 2001
From: Vyacheslav Nagel <v9gel@mail.ru>
Date: Mon, 3 Jul 2023 13:32:04 +0700
Subject: [PATCH] input validation min and max

---
 src/App.vue              |  2 +-
 src/components/Input.vue | 23 +++++++++++++++++++++--
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 56d277d..b08a5bf 100644
--- a/src/App.vue
+++ b/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;
diff --git a/src/components/Input.vue b/src/components/Input.vue
index d1e3aea..2320130 100644
--- a/src/components/Input.vue
+++ b/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>