[WIP] Заменил инпуты и радио инпуты

src/components/HeaderInputs.vue

@@ -6,16 +6,22 @@
         span.custom-input.select-input.inline-block.box-border.align-middle.pl-2.pr-1 {{ selectedFilter }}
         .arrow.icon-down-arrow.text-xsm.mt-px.flex.justify-center.items-center
       .options-wrapper.flex.flex-col.box-border.p-4.mt-1(v-if="isOpen")
-        .option-list.cursor-pointer.flex.flex-row.mb-4(v-for="filter in filters" :key="filter" @click="selectFilter(filter)")
+        .option-list.cursor-pointer.flex.flex-row.mb-4(
+          v-for="filter in filters",
+          :key="filter", @click="selectFilter(filter)"
+        )
           .icon-wrapper.mr-2.flex.justify-center
             .icon-ok.text-xs.flex.justify-center.items-center(v-if="filter === selectedFilter")
           .flex.items-center {{ filter }}
-    input.custom-input.search-input.inline-block.box-border.align-middle.px-4(class="py-2.5" placeholder="Искать ...")
+    base-input(type="text", square, placeholder="Искать ...")
 </template>
 
 <script>
+import BaseInput from "@/components/base/BaseInput";
+
 export default {
   name: "HeaderInputs",
+  components: { BaseInput },
   data() {
     return {
       selectedFilter: "Календарь",

src/components/base/BaseClientFormCreate.vue

@@ -38,7 +38,8 @@
               :style="{padding: '153px 370px'}"
               )
               .avatar-wrapper.flex.relative
-                input.input(
+                base-input(
+                  circle,
                   type="file",
                   id="image-upload",
                   accept="image/*",
@@ -522,14 +523,6 @@ export default {
   height: 400px
   border-radius: 50%
 
-.input
-  width: 100%
-  height: 100%
-  border-radius: 50%
-  z-index: 5
-  opacity: 0
-  cursor: pointer
-
 .avatar
   height: 100%
   border-radius: 50%

src/components/base/BaseInput.vue

@@ -2,7 +2,9 @@
   base-input-container.gap-y-2(:label="label")
     q-input(
       v-model="value",
-      :input-class="textClass",
+      :class="{'circle': circle}",
+      :input-style="{ color: textColor }",
+      :borderless="borderless",
       :placeholder="placeholder",
       :outlined="outlined",
       :dense="dense",
@@ -13,6 +15,7 @@
       :mask="mask",
       :maxlength="maxLength",
       :autogrow="autogrow",
+      :square="square",
       hide-bottom-space
     )
       slot.cursor-pointer
@@ -25,6 +28,7 @@ export default {
   name: "BaseInput",
   components: { BaseInputContainer },
   props: {
+    circle: Boolean,
     dense: {
       type: Boolean,
       default: true,
@@ -33,10 +37,18 @@ export default {
       type: Boolean,
       default: true,
     },
+    square: {
+      type: Boolean,
+      default: false,
+    },
     filled: {
       type: Boolean,
       default: false,
     },
+    borderless: {
+      type: Boolean,
+      default: false,
+    },
     autogrow: {
       type: Boolean,
       default: false,
@@ -46,12 +58,12 @@ export default {
     },
     mask: String,
     maxLength: String,
+    textColor: String,
     rule: Array,
-    modelValue: String || Date,
+    modelValue: [String, Date],
     placeholder: String,
     disabled: Boolean,
     label: String,
-    textStyle: String,
   },
   emits: ["update:modelValue"],
   computed: {
@@ -67,15 +79,15 @@ export default {
           : this.$emit("update:modelValue", value);
       },
     },
-    textClass() {
-      return this.textStyle
-        ? {
-            [this.textStyle]: true,
-          }
-        : {
-            "text-base": true,
-          };
-    },
   },
 };
 </script>
+
+<style lang="sass" scoped>
+.circle
+  width: 100%
+  height: 100%
+  border-radius: 50%
+  z-index: 5
+  opacity: 0
+</style>

src/components/base/BaseInputDate.vue

@@ -1,61 +0,0 @@
-<template lang="pug">
-  .flex.flex-col.gap-y-2
-    .label(v-if="!!label") {{label}}
-    q-input(
-      v-model="value",
-      type="date",
-      outlined,
-      dense
-    )
-</template>
-
-<script>
-//TODO стили перенести для всего кита, избавиться от scoped
-//TODO покрыть тестами
-//TODO сделать серый цвет плейсхолдера
-//TODO обработать ошибку при стирании даты
-export default {
-  name: "BaseInputDate",
-  props: {
-    modelValue: Date,
-    label: String,
-  },
-  emits: ["update:modelValue"],
-  computed: {
-    value: {
-      get() {
-        return this.modelValue?.toISOString().split("T")[0];
-      },
-      set(value) {
-        this.$emit("update:modelValue", value ? new Date(value) : null);
-      },
-    },
-  },
-};
-</script>
-
-<style lang="sass" scoped>
-.field
-  height: 40px
-  display: flex
-  align-items: center
-  border: 1.5px solid var(--border-light-grey-color)
-  border-radius: 4px
-  padding: 8px 16px
-  input
-    width: 100%
-    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: 16px
-  opacity: 0.4
-.placeholder-color
-  color: var(--font-grey-color)
-</style>

src/components/base/BaseRadioButtonsGroup.vue

@@ -1,20 +1,28 @@
 <template lang="pug">
   .container.flex.flex-col.gap-y-2
-    .label.font-semibold.text-smm(v-if="radioButtonsLabel") {{ radioButtonsLabel }}
+    base-input-container(
-    .group.flex.text-base(:class="radioGroupClasses")
+      v-if="radioButtonsLabel",
-      .option(v-for="item in items")
+      :label="radioButtonsLabel"
-        input.mr-2(
+    )
+    q-option-group(
+      class="q-gutter-md",
+      :size="size",
+      :options="items"
       type="radio",
       :id="item?.id",
       :value="item?.value",
-          v-model="value"
+      v-model="value",
+      :inline="inline"
     )
     span {{item?.label}}
 </template>
 
 <script>
+import BaseInputContainer from "@/components/base/BaseInputContainer";
+
 export default {
   name: "BaseRadioButtonsGroup",
+  components: { BaseInputContainer },
   emits: ["update:modelValue"],
   props: {
     modelValue: String,
@@ -26,6 +34,14 @@ export default {
     directionColumn: Boolean,
     columnGap: String,
     rowGap: String,
+    size: {
+      type: String,
+      default: "sm",
+    },
+    inline: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
     value: {
@@ -61,6 +77,6 @@ export default {
 </script>
 
 <style lang="sass" scoped>
-.label
+.q-gutter-x-md, .q-gutter-md
-  color: var(--font-grey-color)
+  margin-left: -24px
 </style>

src/pages/medicalCard/components/MedicalBaseData.vue

@@ -12,6 +12,7 @@
           :items="gendersList",
           radioButtonsLabel="Пол",
           v-model="clientDetail.gender",
+          inline
         )
         .flex.gap-x-4
           .input

src/pages/medicalCard/components/MedicalPolicyDocuments.vue

@@ -4,7 +4,8 @@
     base-radio-buttons-group(
       :items="policiesList",
       v-model="policy",
-      rowGap="gap-x-[182px]"
+      rowGap="gap-x-[182px]",
+      inline
     )
     .flex.gap-x-4
       .flex.flex-col.gap-y-4