From 145c55fec30c4ba33c9ca37415900a5d4c0e817b Mon Sep 17 00:00:00 2001
From: dderbentsov <dderbentsov@gmail.com>
Date: Tue, 27 Dec 2022 01:11:19 +0300
Subject: [PATCH] =?UTF-8?q?=D0=9F=D0=B5=D1=80=D0=B5=D0=BF=D0=B8=D1=81?=
 =?UTF-8?q?=D0=B0=D0=BB=20BaseInputDate?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/BaseInputDate.vue | 80 ++++++++++++++-------------
 1 file changed, 42 insertions(+), 38 deletions(-)

diff --git a/src/components/base/BaseInputDate.vue b/src/components/base/BaseInputDate.vue
index 5180894..f1b164f 100644
--- a/src/components/base/BaseInputDate.vue
+++ b/src/components/base/BaseInputDate.vue
@@ -1,53 +1,57 @@
 <template lang="pug">
-  .input-wrapper.flex.gap-x-2.px-4.box-border(
-    class="py-2.5",
-    :style="{ minWidth: widthInput + 'px' }"
-  )
-    input.input.w-full.outline-0.not-italic.date.cursor-text(
-      :value="value",
-      type="date",
-      @input="$emit('update:value', $event.target.value)",
-      :placeholder="placeholder",
-      :maxlength="maxLength",
-      max="9999-12-31",
-      min="0000-01-01"
-    )
-    .slot(v-if="withIcon" :class="iconPosition")
-      slot.cursor-pointer
+  .flex.flex-col
+    .label(v-if="!!label") {{label}}
+    .field
+      input(
+        v-model="value",
+        type="date",      
+        max="9999-12-31",
+        min="0000-01-01"
+)    
 </template>
 
 <script>
+//TODO стили перенести для всего кита, избавиться от scoped
+//TODO покрыть тестами
+//TODO сделать серый цвет плейсхолдера
+//TODO обработать ошибку при стирании даты
 export default {
   name: "BaseInputDate",
   props: {
-    maxLength: Number,
-    value: String,
-    withIcon: {
-      default: false,
+    modelValue: Date,
+    label: String,
+  },
+  emits: ["update:modelValue"],
+  computed: {
+    value: {
+      get() {
+        return this.modelValue?.toISOString().split("T")[0];
+      },
+      set(value) {
+        this.$emit("update:modelValue", new Date(value));
+      },
     },
-    iconPosition: {
-      default: "right",
-    },
-    placeholder: {
-      default: "Поиск",
-    },
-    widthInput: Number,
   },
 };
 </script>
 
 <style lang="sass" scoped>
-.left
-  order: -1
-.right
-  order: 1
-.input-wrapper
+.field
+  align-items: center
+  border: 1.5px solid var(--border-light-grey-color)
   border-radius: 4px
-  background-color: var(--default-white)
-  color: var(--font-black-color)
-.date
-  background: url("../../assets/icons/calendar-input.svg") no-repeat 100% 50%
-  &::-webkit-calendar-picker-indicator
-    opacity: 0
-    cursor: pointer
+  padding: 8px 16px
+  input
+    cursor: text
+    border: none
+    outline: none
+    background: url("../../assets/icons/calendar-input.svg") no-repeat 100% 50%
+    &::-webkit-calendar-picker-indicator
+      opacity: 0
+      cursor: pointer
+
+.label
+  font-weight: 600
+  font-size: 14px
+  line-height: 135%
 </style>