input min max

src/App.vue

@@ -55,12 +55,10 @@ const rotatePage = () => {
   <div class="container">
     <Sidebar>
       <SidebarBlock title="Фон">
-        <Input v-model="imageBackgroundColor" :type="InputType.Color">
+        <Input v-model="imageBackgroundColor" :type="InputType.Color">Цвет {{ imageBackgroundColor }}</Input>
-        Цвет {{ 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="hMargin" :min="1">Отступ, мм</Input>
-        <Input v-model="hMargin2">Дополнительный отступ, мм</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="imageHeight" :min="1">Высота, мм</Input>
-        <Input v-model="imageWidth">Ширина, мм</Input>
+        <Input v-model="imageWidth" :min="1">Ширина, мм</Input>
         <ButtonsBar>
           <Button :size="ButtonSize.Small" :click="() => {
             imageWidth = 148;

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
-      input: true,
+      :class="{
-      'input--color': type === InputType.Color,
+        input: true,
-    }" :type="type" v-model="modelValue" />
+        'input--color': type === InputType.Color,
+      }"
+      :type="type"
+      v-model="modelValue"
+      :min="min"
+      :max="max"
+    />
   </div>
 </template>