From d29c011e5f64e9b70bd9756bff908ef0c839b8d3 Mon Sep 17 00:00:00 2001
From: Vyacheslav Nagel <v9gel@mail.ru>
Date: Mon, 3 Jul 2023 09:38:07 +0700
Subject: [PATCH] input min max

---
 src/App.vue              | 16 +++++++---------
 src/components/Input.vue | 17 ++++++++++++-----
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 86b3dd0..56d277d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -55,12 +55,10 @@ const rotatePage = () => {
   <div class="container">
     <Sidebar>
       <SidebarBlock title="Фон">
-        <Input v-model="imageBackgroundColor" :type="InputType.Color">
-        Цвет {{ imageBackgroundColor }}
-        </Input>
+        <Input v-model="imageBackgroundColor" :type="InputType.Color">Цвет {{ imageBackgroundColor }}</Input>
       </SidebarBlock>
       <SidebarBlock title="Вертикальные линии">
-        <Input v-model="vMargin">Отступ, мм</Input>
+        <Input v-model="vMargin" :min="1">Отступ, мм</Input>
         <Input v-model="vRotation">Поворот, градусы</Input>
         <ButtonsBar>
           <Button :size="ButtonSize.Small" :click="() => {
@@ -90,8 +88,8 @@ const rotatePage = () => {
         </ButtonsBar>
       </SidebarBlock>
       <SidebarBlock title="Горизонтальные линии">
-        <Input v-model="hMargin">Отступ, мм</Input>
-        <Input v-model="hMargin2">Дополнительный отступ, мм</Input>
+        <Input v-model="hMargin" :min="1">Отступ, мм</Input>
+        <Input v-model="hMargin2" :min="1">Дополнительный отступ, мм</Input>
       </SidebarBlock>
       <SidebarBlock title="Поля">
         <label class="switch">
@@ -101,7 +99,7 @@ const rotatePage = () => {
         <Input v-model="marginColor" :type="InputType.Color">
         Цвет {{ marginColor }}
         </Input>
-        <Input v-model="marginLeftMargin">Отступ слева, мм</Input>
+        <Input v-model="marginLeftMargin" :min="1">Отступ слева, мм</Input>
       </SidebarBlock>
     </Sidebar>
     <Page>
@@ -111,8 +109,8 @@ const rotatePage = () => {
     </Page>
     <Sidebar horizontalPosition="right">
       <SidebarBlock title="Изображение">
-        <Input v-model="imageHeight">Высота, мм</Input>
-        <Input v-model="imageWidth">Ширина, мм</Input>
+        <Input v-model="imageHeight" :min="1">Высота, мм</Input>
+        <Input v-model="imageWidth" :min="1">Ширина, мм</Input>
         <ButtonsBar>
           <Button :size="ButtonSize.Small" :click="() => {
             imageWidth = 148;
diff --git a/src/components/Input.vue b/src/components/Input.vue
index 5cb8e91..d1e3aea 100644
--- a/src/components/Input.vue
+++ b/src/components/Input.vue
@@ -3,7 +3,8 @@ import { InputType } from '../types';
 
 interface Props {
   type: InputType;
-
+  min?: number;
+  max?: number;
 }
 
 withDefaults(defineProps<Props>(), {
@@ -19,10 +20,16 @@ const modelValue = defineModel();
       <slot></slot>
     </label>
     <br />
-    <input :class="{
-      input: true,
-      'input--color': type === InputType.Color,
-    }" :type="type" v-model="modelValue" />
+    <input
+      :class="{
+        input: true,
+        'input--color': type === InputType.Color,
+      }"
+      :type="type"
+      v-model="modelValue"
+      :min="min"
+      :max="max"
+    />
   </div>
 </template>