[WIP] Добавил quasar input, стили, заменил маски

src/pages/clients/components/ClientDetailInput.vue

@@ -1,43 +1,30 @@
 <template lang="pug">
-  .input-wrapper.flex.gap-x-2.px-3.box-border.w-max-fit.text-sm(class="py-2.5")
-    textarea.place-input.w-full.outline-0.not-italic.resize-none.font-medium(
-      v-if="!sharp"
-      :rows="textareaRows",
-      v-model="value",
-      :cols="24",
-      :placeholder="placeholder",
-      :maxLength="maxLength"
-    )
-    input.w-full.outline-0.not-italic.font-medium(
-      v-else,
-      v-model="value",
-      :placeholder="placeholder",
-      v-mask="sharp"
-    ) 
+  base-input(
+    :type="choiceType"
+    v-model="value",
+    :placeholder="placeholder",
+    :maxLength="maxLength",
+    :mask="sharp"
+  )
     slot
 </template>
 
 <script>
-import { mask } from "vue-the-mask";
+import BaseInput from "@/components/base/BaseInput";
+
 export default {
   name: "ClientDetailInput",
+  components: { BaseInput },
   emits: ["update:modelValue"],
   props: {
     modelValue: String,
-    width: Number,
     sharp: String,
-    rows: Number,
-    maxLength: Number,
+    maxLength: String,
     placeholder: String,
   },
-  directives: { mask },
   computed: {
-    heightInput() {
-      return ((this.width / 100) * 70) / 11;
-    },
-    textareaRows() {
-      if (this.value.length <= 22) return this.rows;
-      return Math.ceil(this.value.length / 22);
+    choiceType() {
+      return !this.sharp ? "textarea" : "text";
     },
     value: {
       get() {
@@ -50,12 +37,3 @@ export default {
   },
 };
 </script>
-
-<style lang="sass" scoped>
-.input-wrapper
-  border: 2px solid var(--border-light-grey-color)
-  border-radius: 4px
-  background-color: var(--default-white)
-textarea
-  overflow: hidden
-</style>