WIP Перемещен инпут

2023-07-18 17:39:53 +03:00
parent 1fdc22a1be
commit 51470f0ed3
61 changed files with 670 additions and 585 deletions
--- a/src/components/BaseInput.vue
+++ b/src/components/BaseInput.vue
@@ -1,229 +0,0 @@
-<template lang="pug">
-  base-input-container.gap-y-2(:important="important", :label="label", :style="{width: width + 'px', ...sizeVariable}")
-    q-input.input(
-      v-model="value",
-      :name="name",
-      :multiple="multiple",
-      :class="{'circle': circle, 'font-input': true, 'doc': doc}",
-      :input-style="{resize: resize}",
-      :borderless="borderless",
-      :placeholder="placeholder",
-      outlined,
-      :type="type",
-      :readonly="readonly",
-      :disable="disabled",
-      :rules="rule",
-      :lazy-rules="lazyRule",
-      :item-aligned="itemAligned",
-      no-error-icon,
-      :standout="readonly",
-      :mask="mask",
-      :autogrow="autogrow",
-      :accept="accept",
-      :debounce="debounce",
-      :shadow-text="shadowText",
-      :autofocus="autofocus",
-      hide-bottom-space
-    )
-      template(v-slot:prepend, v-if="iconLeft")
-        slot(name="iconLeft")
-      template(v-slot:append, v-if="iconRight")
-        slot(name="iconRight")
-      slot(v-if="!iconLeft && !iconRight")
-</template>
-
-<script>
-import BaseInputContainer from "@/components/base/BaseInputContainer.vue";
-
-export default {
-  name: "BaseInput",
-  components: { BaseInputContainer },
-  props: {
-    multiple: Boolean,
-    doc: Boolean,
-    autofocus: Boolean,
-    borderless: {
-      type: Boolean,
-      default: false,
-    },
-    autogrow: {
-      type: Boolean,
-      default: false,
-    },
-    type: {
-      default: "text",
-    },
-    accept: {
-      type: String,
-      default: "",
-    },
-    resize: {
-      type: String,
-      default: "none",
-    },
-    shadowText: String,
-    mask: String,
-    debounce: [String, Number],
-    width: Number,
-    rule: Array,
-    lazyRule: [Boolean, String],
-    itemAligned: Boolean,
-    modelValue: [String, Date, Number],
-    placeholder: String,
-    disabled: Boolean,
-    label: String,
-    readonly: Boolean,
-    iconLeft: Boolean,
-    iconRight: Boolean,
-    name: String,
-    important: Boolean,
-    size: String,
-    circle: Boolean,
-  },
-  emits: ["update:modelValue"],
-  computed: {
-    value: {
-      get() {
-        if (this.type === "date") {
-          return this.modelValue
-            ? this.modelValue?.toISOString().split("T")[0]
-            : null;
-        }
-        return this.modelValue;
-      },
-      set(value) {
-        this.type === "date"
-          ? this.$emit("update:modelValue", value ? new Date(value) : null)
-          : this.$emit("update:modelValue", value);
-      },
-    },
-    sizeVariable() {
-      switch (this.size) {
-        case "XS":
-          return {
-            "--input-height": "28px",
-            "--text-size": "12px",
-            "--line-height": "135%",
-            "--px": "0 8px",
-            "--py": "10px 0",
-          };
-        case "S":
-          return {
-            "--input-height": "32px",
-            "--text-size": "12px",
-            "--line-height": "135%",
-            "--px": "0 8px",
-            "--py": "10px 0",
-          };
-        case "M":
-          return {
-            "--input-height": "40px",
-            "--text-size": "16px",
-            "--line-height": "normal",
-            "--px": "0 16px",
-            "--py": "8px 0",
-          };
-        case "L":
-          return {
-            "--input-height": "48px",
-            "--text-size": "16px",
-            "--line-height": "normal",
-            "--px": "0 16px",
-            "--py": "8px 0",
-          };
-        case "auto":
-          return {
-            "--input-height": "auto",
-            "--text-size": "16px",
-            "--line-height": "normal",
-            "--px": "0 16px",
-            "--py": "8px 0",
-          };
-        default:
-          return {
-            "--input-height": "56px",
-            "--text-size": "16px",
-            "--line-height": "normal",
-            "--px": "0 16px",
-            "--py": "8px 0",
-          };
-      }
-    },
-  },
-};
-</script>
-
-<style lang="sass" scoped>
-.font-input
-  font-feature-settings: 'pnum' on, 'lnum' on
-
-.circle
-  width: 100%
-  height: 100%
-  border-radius: 50%
-  z-index: 5
-  opacity: 0
-  cursor: pointer
-
-.doc
-  width: 100%
-  height: 100%
-  z-index: 5
-  opacity: 0
-  cursor: pointer
-  ::file-selector-button
-    cursor: pointer
-
-.input :deep(.q-field__native)
-  font-weight: 500
-  font-size: var(--text-size)
-  line-height: var(--line-height)
-  color: var(--font-dark-blue-color)
-  padding: var(--py)
-  &::placeholder
-    color: var(--font-grey-color)
-    opacity: 1
-
-.input :deep(.q-field__control)
-  height: var(--input-height) !important
-  color: var(--font-dark-blue-color)
-  padding: var(--px)
-  &:before
-    border-color: var(--border-light-grey-color) !important
-    transition: none
-  &:hover:before
-    border-color: var(--font-grey-color) !important
-  &:after
-    border-width: 1px !important
-    transition: none
-    transform: none !important
-
-.q-field--disabled :deep(.q-field__control > div)
-  opacity: 1 !important
-
-.q-field--outlined.q-field--disabled :deep(.q-field__native)
-  color: var(--font-grey-color)
-
-.q-field--outlined.q-field--disabled :deep(.q-field__control)
-  background: var(--bg-light-grey) !important
-
-.q-field--outlined.q-field--readonly :deep(.q-field__control)
-  background: var(--bg-light-grey) !important
-  &:before
-    border-color: var(--bg-light-grey) !important
-    transition: none
-  &:hover:before
-    border-color: var(--bg-light-grey) !important
-
-.q-field--outlined.q-field--readonly :deep(.q-field__native)
-  cursor: default
-
-.q-field--error :deep(.q-field__bottom)
-  padding: 4px 0 0 0
-  font-weight: 500
-  font-size: 12px
-  line-height: 135% !important
-
-.input :deep(.q-field__marginal)
-  height: auto !important
-</style>
--- a/src/components/HeaderInputs.vue
+++ b/src/components/HeaderInputs.vue
@@ -23,12 +23,8 @@
 </template>

 <script>
-import BaseInput from "@/components/base/BaseInput";
-import BaseSelect from "@/components/base/BaseSelect";
-
 export default {
  name: "HeaderInputs",
-  components: { BaseInput, BaseSelect },
  data() {
    return {
      selectedFilter: "Календарь",
--- a/src/components/base/BaseAddingNetwork.vue
+++ b/src/components/base/BaseAddingNetwork.vue
@@ -5,7 +5,7 @@
 </template>

 <script>
-import BaseInput from "@/components/BaseInput.vue";
+import BaseInput from "@/components/base/BaseInput.vue";
 import BaseSelect from "@/components/base/BaseSelect.vue";
 export default {
  name: "TableAddingNetwork",
--- a/src/components/base/BaseCategorySelection.vue
+++ b/src/components/base/BaseCategorySelection.vue
@@ -64,7 +64,7 @@

 <script>
 import BaseButton from "@/components/base/BaseButton.vue";
-import BaseInput from "@/components/BaseInput.vue";
+import BaseInput from "@/components/base/BaseInput.vue";

 export default {
  name: "BaseCategorySelection",
--- a/src/components/base/BaseClientFormCreate.vue
+++ b/src/components/base/BaseClientFormCreate.vue
@@ -106,7 +106,7 @@ import { addNotification } from "@/components/Notifications/notificationContext"
 import * as moment from "moment";
 import { v_model } from "@/shared/mixins/v-model";
 import BaseButton from "@/components/base/BaseButton.vue";
-import BaseInput from "@/components/BaseInput.vue";
+import BaseInput from "@/components/base/BaseInput.vue";

 export default {
  name: "BaseClientFormClient",
--- a/src/components/base/BaseDownload.vue
+++ b/src/components/base/BaseDownload.vue
@@ -1,22 +1,22 @@
 <template lang="pug">
-  label.download.flex.cursor-pointer.relative.items-center.justify-center.rounded(
+  label.download.flex.relative.items-center.justify-center.rounded(
    :style="{height: `${height}px`, width: width ? `${width}px` : '100%'}"
  )
-    base-input.w-full.h-full(
+    base-input.w-full(
      @change="(e) => addNewFiles(e)",
      doc,
      type="file",
      :accept="getAccept",
      id="upload"
-      borderless,
-      :multiple="multiple"
+      :size="`${height}px`"
+      :height="`${height}px`"
    )
    q-icon.absolute(
      v-if="withIcon",
      name="app:download",
      :size="sizeIcon"
      )
-    .flex.flex-col.items-center.justify-center.absolute.font-medium.text-smm.w-full(
+    .flex.flex-col.items-center.justify-center.absolute.font-medium.text-base.w-full(
      v-else,
      :style="{color: 'var(--font-grey-color)'}"
    )
@@ -42,7 +42,7 @@ export default {
    multiple: Boolean,
    height: {
      type: Number,
-      default: 93,
+      default: 92,
    },
    width: Number,
    type: {
@@ -91,15 +91,15 @@ export default {
 </script>

 <style lang="sass" scoped>
-#upload :deep(.q-field__native)
-  cursor: pointer
-  height: 100%
-  padding: 0
-#upload :deep(.q-field__control)
-  height: 100%
+// #upload :deep(.q-field__native)
+//   cursor: pointer
+//   height: 100%
+//   padding: 0
+// #upload :deep(.q-field__control)
+//   height: 100%
 .download
-  border: 1px dashed var(--font-grey-color)
-  background-color: var(--default-white)
+  background-color: var(--bg-light-grey)
+  border-radius: 4px
  &:hover .q-icon
    opacity: 0.6
  & .q-icon
--- a/src/components/base/BaseInput.vue
+++ b/src/components/base/BaseInput.vue
@@ -1,29 +1,24 @@
 <template lang="pug">
-  base-input-container.gap-y-2(:important="important", :label="label", :style="{width: width + 'px' }")
-    q-input(
+  base-input-container.gap-y-2(:important="important", :label="label", :style="{width: width + 'px', ...sizeVariable}")
+    q-input.input(
      v-model="value",
      :name="name",
      :multiple="multiple",
      :class="{'circle': circle, 'font-input': true, 'doc': doc}",
-      :input-style="{ color: textColor, borderColor: borderColor, resize: resize, fontSize: fontSize, fontWeight: fontWeight, lineHeight: lineHeight, minHeight: minHeight}",
+      :input-style="{resize: resize, height: height}",
      :borderless="borderless",
      :placeholder="placeholder",
-      :outlined="outlined",
-      :dense="dense",
+      outlined,
      :type="type",
      :readonly="readonly",
      :disable="disabled",
-      :filled="filled",
-      :bg-color="filled || standout ? '' : 'white'",
      :rules="rule",
      :lazy-rules="lazyRule",
      :item-aligned="itemAligned",
-      :no-error-icon="noErrorIcon",
+      no-error-icon,
+      :standout="readonly",
      :mask="mask",
-      :maxlength="maxLength",
      :autogrow="autogrow",
-      :square="square",
-      :standout="standout"
      :accept="accept",
      :debounce="debounce",
      :shadow-text="shadowText",
@@ -31,10 +26,10 @@
      hide-bottom-space
    )
      template(v-slot:prepend, v-if="iconLeft")
-        slot
+        slot(name="iconLeft")
      template(v-slot:append, v-if="iconRight")
-        slot
-      slot.cursor-pointer(v-if="!iconLeft && !iconRight")
+        slot(name="iconRight")
+      slot(v-if="!iconLeft && !iconRight")
 </template>

 <script>
@@ -45,41 +40,8 @@ export default {
  components: { BaseInputContainer },
  props: {
    multiple: Boolean,
-    circle: Boolean,
    doc: Boolean,
    autofocus: Boolean,
-    dense: {
-      type: Boolean,
-      default: true,
-    },
-    fontSize: {
-      type: String,
-      default: "14px",
-    },
-    fontWeight: {
-      type: Number,
-      default: 500,
-    },
-    minHeight: {
-      type: String,
-      default: "0px",
-    },
-    lineHeight: {
-      type: String,
-      default: "19px",
-    },
-    outlined: {
-      type: Boolean,
-      default: false,
-    },
-    square: {
-      type: Boolean,
-      default: false,
-    },
-    filled: {
-      type: Boolean,
-      default: false,
-    },
    borderless: {
      type: Boolean,
      default: false,
@@ -91,10 +53,6 @@ export default {
    type: {
      default: "text",
    },
-    standout: {
-      type: [Boolean, String],
-      default: false,
-    },
    accept: {
      type: String,
      default: "",
@@ -107,12 +65,8 @@ export default {
    mask: String,
    debounce: [String, Number],
    width: Number,
-    maxLength: Number,
-    textColor: String,
-    borderColor: String,
    rule: Array,
    lazyRule: [Boolean, String],
-    noErrorIcon: Boolean,
    itemAligned: Boolean,
    modelValue: [String, Date, Number],
    placeholder: String,
@@ -123,6 +77,9 @@ export default {
    iconRight: Boolean,
    name: String,
    important: Boolean,
+    size: String,
+    circle: Boolean,
+    height: String,
  },
  emits: ["update:modelValue"],
  computed: {
@@ -141,6 +98,104 @@ export default {
          : this.$emit("update:modelValue", value);
      },
    },
+    sizeVariable() {
+      if (this.size === "XS")
+        return {
+          "--input-height": "28px",
+          "--text-size": "12px",
+          "--line-height": "135%",
+          "--px": "0 8px",
+          "--py": "10px 0",
+        };
+      if (this.size === "S")
+        return {
+          "--input-height": "32px",
+          "--text-size": "12px",
+          "--line-height": "135%",
+          "--px": "0 8px",
+          "--py": "10px 0",
+        };
+      if (this.size === "M")
+        return {
+          "--input-height": "40px",
+          "--text-size": "16px",
+          "--line-height": "normal",
+          "--px": "0 16px",
+          "--py": "8px 0",
+        };
+      if (this.size === "L")
+        return {
+          "--input-height": "48px",
+          "--text-size": "16px",
+          "--line-height": "normal",
+          "--px": "0 16px",
+          "--py": "8px 0",
+        };
+      if (this.size)
+        return {
+          "--input-height": this.size,
+          "--text-size": "16px",
+          "--line-height": "normal",
+          "--px": "0 16px",
+          "--py": "8px 0",
+        };
+      return {
+        "--input-height": "56px",
+        "--text-size": "16px",
+        "--line-height": "normal",
+        "--px": "0 16px",
+        "--py": "8px 0",
+      };
+      // switch (this.size) {
+      //   case "XS":
+      //     return {
+      //       "--input-height": "28px",
+      //       "--text-size": "12px",
+      //       "--line-height": "135%",
+      //       "--px": "0 8px",
+      //       "--py": "10px 0",
+      //     };
+      //   case "S":
+      //     return {
+      //       "--input-height": "32px",
+      //       "--text-size": "12px",
+      //       "--line-height": "135%",
+      //       "--px": "0 8px",
+      //       "--py": "10px 0",
+      //     };
+      //   case "M":
+      //     return {
+      //       "--input-height": "40px",
+      //       "--text-size": "16px",
+      //       "--line-height": "normal",
+      //       "--px": "0 16px",
+      //       "--py": "8px 0",
+      //     };
+      //   case "L":
+      //     return {
+      //       "--input-height": "48px",
+      //       "--text-size": "16px",
+      //       "--line-height": "normal",
+      //       "--px": "0 16px",
+      //       "--py": "8px 0",
+      //     };
+      //   case "auto":
+      //     return {
+      //       "--input-height": "auto",
+      //       "--text-size": "16px",
+      //       "--line-height": "normal",
+      //       "--px": "0 16px",
+      //       "--py": "8px 0",
+      //     };
+      //   default:
+      //     return {
+      //       "--input-height": "56px",
+      //       "--text-size": "16px",
+      //       "--line-height": "normal",
+      //       "--px": "0 16px",
+      //       "--py": "8px 0",
+      //     };
+    },
  },
 };
 </script>
@@ -162,13 +217,63 @@ export default {
  height: 100%
  z-index: 5
  opacity: 0
-  cursor: pointer
+  cursor: pointer !important
  ::file-selector-button
    cursor: pointer
-</style>
-<style lang="sass">
-.q-field--standout.q-field--readonly .q-field__control:before
-  border: none !important
-.q-field--standout .q-field__control
+
+.input :deep(input[type="file" i])
+  cursor: pointer
+
+.input :deep(.q-field__native)
+  font-weight: 500
+  font-size: var(--text-size)
+  line-height: var(--line-height)
+  color: var(--font-dark-blue-color)
+  padding: var(--py)
+  &::placeholder
+    color: var(--font-grey-color)
+    opacity: 1
+
+.input :deep(.q-field__control)
+  height: var(--input-height) !important
+  color: var(--font-dark-blue-color)
+  padding: var(--px)
+  &:before
+    border-color: var(--border-light-grey-color) !important
+    transition: none
+  &:hover:before
+    border-color: var(--font-grey-color) !important
+  &:after
+    border-width: 1px !important
+    transition: none
+    transform: none !important
+
+.q-field--disabled :deep(.q-field__control > div)
+  opacity: 1 !important
+
+.q-field--outlined.q-field--disabled :deep(.q-field__native)
+  color: var(--font-grey-color)
+
+.q-field--outlined.q-field--disabled :deep(.q-field__control)
  background: var(--bg-light-grey) !important
+
+.q-field--outlined.q-field--readonly :deep(.q-field__control)
+  background: var(--bg-light-grey) !important
+  &:before
+    border-color: var(--bg-light-grey) !important
+    transition: none
+  &:hover:before
+    border-color: var(--bg-light-grey) !important
+
+.q-field--outlined.q-field--readonly :deep(.q-field__native)
+  cursor: default
+
+.q-field--error :deep(.q-field__bottom)
+  padding: 4px 0 0 0
+  font-weight: 500
+  font-size: 12px
+  line-height: 135% !important
+
+.input :deep(.q-field__marginal)
+  height: auto !important
 </style>
--- a/src/components/base/BaseInputFullName.vue
+++ b/src/components/base/BaseInputFullName.vue
@@ -48,7 +48,7 @@
 import BaseModal from "./BaseModal.vue";
 import addImageIcon from "@/assets/icons/photo.svg";
 import BaseButton from "@/components/base/BaseButton.vue";
-import BaseInput from "@/components/BaseInput.vue";
+import BaseInput from "@/components/base/BaseInput.vue";

 export default {
  name: "BaseInputFullName",
--- a/src/components/base/BaseInputNumber.vue
+++ b/src/components/base/BaseInputNumber.vue
@@ -1,30 +1,23 @@
 <template lang="pug">
-  base-input-container.gap-y-2(:label="label", :style="{width: width + 'px' }")
-    q-input(
+  base-input-container.gap-y-2(:label="label", :style="{width: width + 'px', ...sizeVariable }")
+    q-input.input(
      ref="numberInput"
      v-model="value",
      :name="name",
      :multiple="multiple",
-      :class="{'circle': circle, 'font-input': true, 'doc': doc}",
-      :input-style="{ color: textColor, borderColor: borderColor, resize: resize }",
-      :borderless="borderless",
+      :class="{'circle': circle, 'font-input': true}",
+      :input-style="{ resize: resize }",
      :placeholder="placeholder",
-      :outlined="outlined",
-      :dense="dense",
+      outlined,
      type="number",
      :readonly="readonly",
      :disable="disabled",
-      :filled="filled",
-      :bg-color="filled || standout ? '' : 'white'",
      :rules="rule || ruleNumberInput",
      :lazy-rules="lazyRule",
      :item-aligned="itemAligned",
-      :no-error-icon="noErrorIcon",
+      no-error-icon,
      :mask="mask",
-      :maxlength="maxLength",
      :autogrow="autogrow",
-      :square="square",
-      :standout="standout"
      :accept="accept",
      :debounce="null",
      :shadow-text="shadowText"
@@ -48,14 +41,13 @@
 </template>

 <script>
-import BaseInput from "@/components/base/BaseInput";
 import BaseInputContainer from "@/components/base/BaseInputContainer.vue";
 import { ruleNumberInput } from "@/shared/utils/rulesInputs";
 import { roundNumber } from "@/shared/utils/methodsObjects";

 export default {
  name: "BaseInputNumber",
-  components: { BaseInput, BaseInputContainer },
+  components: { BaseInputContainer },
  data() {
    return {
      intervalId: 0,
@@ -80,35 +72,10 @@ export default {
    reverseValue: Boolean,
    multiple: Boolean,
    circle: Boolean,
-    doc: Boolean,
-    dense: {
-      type: Boolean,
-      default: true,
-    },
-    outlined: {
-      type: Boolean,
-      default: false,
-    },
-    square: {
-      type: Boolean,
-      default: false,
-    },
-    filled: {
-      type: Boolean,
-      default: false,
-    },
-    borderless: {
-      type: Boolean,
-      default: false,
-    },
    autogrow: {
      type: Boolean,
      default: false,
    },
-    standout: {
-      type: [Boolean, String],
-      default: false,
-    },
    accept: {
      type: String,
      default: "",
@@ -121,15 +88,8 @@ export default {
    mask: String,
    debounce: [String, Number],
    width: Number,
-    maxLength: Number,
-    textColor: String,
-    borderColor: String,
    rule: Array,
    lazyRule: String,
-    noErrorIcon: {
-      type: Boolean,
-      default: true,
-    },
    itemAligned: Boolean,
    modelValue: [Number],
    placeholder: String,
@@ -138,6 +98,7 @@ export default {
    readonly: Boolean,
    iconLeft: Boolean,
    name: String,
+    size: String,
  },
  emits: ["update:modelValue"],
  methods: {
@@ -197,6 +158,59 @@ export default {
    rounding() {
      return String(this.step).split(".")[1]?.length || 0;
    },
+
+    sizeVariable() {
+      switch (this.size) {
+        case "XS":
+          return {
+            "--input-height": "28px",
+            "--text-size": "12px",
+            "--line-height": "135%",
+            "--px": "0 8px",
+            "--py": "10px 0",
+          };
+        case "S":
+          return {
+            "--input-height": "32px",
+            "--text-size": "12px",
+            "--line-height": "135%",
+            "--px": "0 8px",
+            "--py": "10px 0",
+          };
+        case "M":
+          return {
+            "--input-height": "40px",
+            "--text-size": "16px",
+            "--line-height": "normal",
+            "--px": "0 16px",
+            "--py": "2px 0",
+          };
+        case "L":
+          return {
+            "--input-height": "48px",
+            "--text-size": "16px",
+            "--line-height": "normal",
+            "--px": "0 16px",
+            "--py": "8px 0",
+          };
+        case "auto":
+          return {
+            "--input-height": "auto",
+            "--text-size": "16px",
+            "--line-height": "normal",
+            "--px": "0 16px",
+            "--py": "8px 0",
+          };
+        default:
+          return {
+            "--input-height": "56px",
+            "--text-size": "16px",
+            "--line-height": "normal",
+            "--px": "0 16px",
+            "--py": "8px 0",
+          };
+      }
+    },
  },
 };
 </script>
@@ -214,4 +228,57 @@ input[type=number]::-webkit-inner-spin-button
  color: var(--font-grey-color)
  &:hover
    color: var(--font-dark-blue-color)
+
+.input :deep(.q-field__native)
+  font-weight: 500
+  font-size: var(--text-size)
+  line-height: var(--line-height)
+  color: var(--font-dark-blue-color)
+  padding: var(--py)
+  &::placeholder
+    color: var(--font-grey-color)
+    opacity: 1
+
+.input :deep(.q-field__control)
+  height: var(--input-height) !important
+  color: var(--font-dark-blue-color)
+  padding: var(--px)
+  &:before
+    border-color: var(--border-light-grey-color) !important
+    transition: none
+  &:hover:before
+    border-color: var(--font-grey-color) !important
+  &:after
+    border-width: 1px !important
+    transition: none
+    transform: none !important
+
+.q-field--disabled :deep(.q-field__control > div)
+  opacity: 1 !important
+
+.q-field--outlined.q-field--disabled :deep(.q-field__native)
+  color: var(--font-grey-color)
+
+.q-field--outlined.q-field--disabled :deep(.q-field__control)
+  background: var(--bg-light-grey) !important
+
+.q-field--outlined.q-field--readonly :deep(.q-field__control)
+  background: var(--bg-light-grey) !important
+  &:before
+    border-color: var(--bg-light-grey) !important
+    transition: none
+  &:hover:before
+    border-color: var(--bg-light-grey) !important
+
+.q-field--outlined.q-field--readonly :deep(.q-field__native)
+  cursor: default
+
+.q-field--error :deep(.q-field__bottom)
+  padding: 4px 0 0 0
+  font-weight: 500
+  font-size: 12px
+  line-height: 135% !important
+
+.input :deep(.q-field__marginal)
+  height: auto !important
 </style>
--- a/src/components/base/BaseTextarea.vue.vue
+++ b/src/components/base/BaseTextarea.vue.vue
@@ -0,0 +1,132 @@
+<template lang="pug">
+  base-input-container.gap-y-2(:label="label", :style="{width: width + 'px'}")
+    q-input.input(
+      v-model="value",
+      :name="name",
+      :multiple="multiple",
+      :input-style="{resize: resize, 'font-input': true, height: height}",
+      :placeholder="placeholder",
+      outlined,
+      type="textarea",
+      :readonly="readonly",
+      :disable="disabled",
+      :rules="rule",
+      :lazy-rules="lazyRule",
+      :item-aligned="itemAligned",
+      no-error-icon,
+      :autogrow="autogrow",
+      :accept="accept",
+      :debounce="debounce",
+      :shadow-text="shadowText",
+      :autofocus="autofocus",
+      hide-bottom-space
+    )
+</template>
+
+<script>
+import BaseInputContainer from "@/components/base/BaseInputContainer.vue";
+
+export default {
+  name: "BaseInput",
+  components: { BaseInputContainer },
+  props: {
+    multiple: Boolean,
+    autofocus: Boolean,
+    autogrow: {
+      type: Boolean,
+      default: false,
+    },
+    accept: {
+      type: String,
+      default: "",
+    },
+    resize: {
+      type: String,
+      default: "none",
+    },
+    shadowText: String,
+    mask: String,
+    debounce: [String, Number],
+    width: Number,
+    rule: Array,
+    lazyRule: [Boolean, String],
+    itemAligned: Boolean,
+    modelValue: [String, Date, Number],
+    placeholder: String,
+    disabled: Boolean,
+    label: String,
+    readonly: Boolean,
+    name: String,
+    height: String,
+  },
+  emits: ["update:modelValue"],
+  computed: {
+    value: {
+      get() {
+        return this.modelValue;
+      },
+      set(value) {
+        this.$emit("update:modelValue", value);
+      },
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.font-input
+  font-feature-settings: 'pnum' on, 'lnum' on
+
+.input :deep(.q-field__native)
+  font-weight: 500
+  font-size: 16px
+  line-height: normal
+  color: var(--font-dark-blue-color)
+  padding: 12px 16px
+  &::placeholder
+    color: var(--font-grey-color)
+    opacity: 1
+
+.input :deep(.q-field__control)
+  //height: var(--input-height) !important
+  color: var(--font-dark-blue-color)
+  padding: 0 0
+  &:before
+    border-color: var(--border-light-grey-color) !important
+    transition: none
+  &:hover:before
+    border-color: var(--font-grey-color) !important
+  &:after
+    border-width: 1px !important
+    transition: none
+    transform: none !important
+
+.q-field--disabled :deep(.q-field__control > div)
+  opacity: 1 !important
+
+.q-field--outlined.q-field--disabled :deep(.q-field__native)
+  color: var(--font-grey-color)
+
+.q-field--outlined.q-field--disabled :deep(.q-field__control)
+  background: var(--bg-light-grey) !important
+
+.q-field--outlined.q-field--readonly :deep(.q-field__control)
+  background: var(--bg-light-grey) !important
+  &:before
+    border-color: var(--bg-light-grey) !important
+    transition: none
+  &:hover:before
+    border-color: var(--bg-light-grey) !important
+
+.q-field--outlined.q-field--readonly :deep(.q-field__native)
+  cursor: default
+
+.q-field--error :deep(.q-field__bottom)
+  padding: 4px 0 0 0
+  font-weight: 500
+  font-size: 12px
+  line-height: 135% !important
+
+//.input :deep(.q-field__marginal)
+//  height: auto !important
+</style>
--- a/src/components/base/BaseUploadPhoto.vue
+++ b/src/components/base/BaseUploadPhoto.vue
@@ -25,10 +25,10 @@
 </template>

 <script>
-import BaseInput from "./BaseInput.vue";
 import addImageIcon from "@/assets/icons/photo.svg";
 import { v_model } from "@/shared/mixins/v-model";
 import BaseButton from "@/components/base/BaseButton.vue";
+import BaseInput from "@/components/base/BaseInput.vue";

 export default {
  name: "BaseModalUploadPhoto",
--- a/src/components/kit/KitLongList.vue
+++ b/src/components/kit/KitLongList.vue
@@ -1,7 +1,7 @@
 <template lang="pug">
  base-input-container(:label="label")
    .relative    
-      base-input(type="text", v-model="value.label", outlined)
+      base-input(type="text", v-model="value.label", size="M")
        template(#icon)
          .icon(@click="isExpand = !isExpand")
      .menu(v-if="isExpand")
--- a/src/components/kit/KitShortList.vue
+++ b/src/components/kit/KitShortList.vue
@@ -1,7 +1,7 @@
 <template lang="pug">
  base-input-container(:label="label")
    .relative
-      base-input(type="text", v-model="value.label", outlined)
+      base-input(type="text", v-model="value.label", size="M")
        template(#icon)
          .icon(@click="isExpand = !isExpand")
      .menu(v-if="isExpand")