WIP Начала поиск медкарт

src/components/base/BaseSelect.vue

@@ -1,36 +1,33 @@
 <template lang="pug">
   .flex.flex-col.gap-y-2
-    base-input-container(:label="label", :style="{width: width}")
-      q-select(
+    base-input-container(:label="label", :style="{width: width, ...sizeVariable}")
+      q-select.select(
         v-model="value",
         :options="items",
         :readonly="readonly"
-        :disable="disable",
-        :hide-dropdown-icon="hideDropdownIcon"
-        :borderless="borderless",
-        :outlined="outlined",
-        :bg-color="bgColor",
-        :standout="standout",
-        dense,
+        :disable="disabled",
+        :hide-dropdown-icon="hideDropdownIcon || disabled || readonly"
+        outlined,
         :behavior="behavior",
         emit-value,
         map-options,
-        :clearable="clearable"
+        :clearable="clearable",
+        dropdown-icon="app:down-arrow"
       )
         template(v-slot:selected)
-          span(v-if="!value?.icon") {{ textSelect }}
+          span(v-if="!value?.icon", :class="{placeholder: placeholder}") {{ textSelect }}
           q-icon.selected-icon(
             v-else,
             :name="iconSelect",
             size="24px"
           )
-        template(
-          v-slot:option="scope",
-          v-if="value?.icon"
-        )
-          q-item(v-bind="scope.itemProps", style="justify-content: center")
+        template(v-slot:option="scope")
+          q-item(v-bind="scope.itemProps", style="justify-content: center", v-if="value?.icon")
             q-item-section(avatar, style="padding: 0px; min-width: 0px")
               q-icon.icon(:name="scope.opt.icon", size="24px")
+          q-item.item.px-4.py-2(v-bind="scope.itemProps", style="justify-content: center", v-else)
+            q-item-section
+              q-item-label.text-dark.text-base.font-medium {{ scope.opt.label }}
 </template>
 
 <script>
@@ -43,20 +40,7 @@ export default {
   props: {
     placeholder: String,
     hideDropdownIcon: Boolean,
-    borderless: Boolean,
     modelValue: [Object, String],
-    bgColor: {
-      type: String,
-      default: "white",
-    },
-    outlined: {
-      type: Boolean,
-      default: true,
-    },
-    standout: {
-      type: [Boolean, String],
-      default: false,
-    },
     items: {
       type: Array,
       default: () => [],
@@ -65,19 +49,12 @@ export default {
       type: String,
       default: "menu",
     },
-    icon: {
-      type: String,
-      default: null,
-    },
-    size: {
-      type: Number,
-      default: 18,
-    },
-    disable: Boolean,
+    disabled: Boolean,
     label: String,
     readonly: Boolean,
     width: String,
     clearable: Boolean,
+    size: String,
   },
   emits: ["update:modelValue"],
   computed: {
@@ -96,16 +73,129 @@ export default {
     iconSelect() {
       return this.value?.icon ? this.value.icon : this.placeholder;
     },
+    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",
+      };
+    },
   },
 };
 </script>
 <style lang="sass">
+.placeholder
+  color: var(--font-grey-color)
 .q-menu
   font-feature-settings: 'pnum' on, 'lnum' on !important
-.q-btn--outline:before, .q-field--outlined .q-field__control:before
+
+.q-field--auto-height .q-field__native
+  min-height: var(--input-height) !important
+  font-weight: 500
+  font-size: var(--text-size)
+  line-height: var(--line-height)
+  color: var(--font-dark-blue-color)
+  padding: var(--py)
+
+.q-field--auto-height .q-field__control
+  min-height: var(--input-height) !important
+  height: var(--input-height) !important
+  color: var(--font-dark-blue-color)
+  padding: var(--px) !important
+  &: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 .q-field__control > div
+  opacity: 1 !important
+
+.q-field--outlined.q-field--disabled .q-field__native
+  color: var(--font-grey-color)
+
+.q-field--outlined.q-field--disabled .q-field__control
+  background: var(--bg-light-grey) !important
+
+.q-field--outlined.q-field--readonly .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 .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
+
 .q-field__marginal
-  color: var(--font-grey-color) !important
-.icon :deep(path), .selected-icon :deep(path)
+  height: var(--input-height) !important
+
+.q-select__dropdown-icon path
   fill: var(--font-dark-blue-color)
+.q-select__dropdown-icon
+  width: 20px
+  height: 20px
+
+.item
+  border-bottom: 1px solid var(--gray-scondary)
+  &:last-child
+    border-bottom: none
+  &:hover
+    background-color: var(--gray-thirdly)
+
+.q-menu
+  box-shadow: 1px 1px 8px 0px rgba(37, 40, 80, 0.15) !important
 </style>

src/pages/medcards/TheMedcards.vue

@@ -1,15 +1,15 @@
 <template lang="pug">
-  .medcards-wrapper.flex.flex-col.w-full
+  .medcards-wrapper.flex.flex-col.w-full.gap-y-2.h-full
     table-patients
-    medical-card-search
+    medical-card-list
 </template>
 
 <script>
-import MedicalCardSearch from "./components/MedicalCardSearch.vue";
+import MedicalCardList from "./components/MedicalCardList.vue";
 import TablePatients from "./components/TablePatients.vue";
 
 export default {
   name: "TheMedcards",
-  components: { MedicalCardSearch, TablePatients },
+  components: { MedicalCardList, TablePatients },
 };
 </script>

src/pages/medcards/components/MedicalCardList.vue

@@ -0,0 +1,17 @@
+<template lang="pug">
+  .medical-wrapper.flex.h-full.rounded.w-full
+    list-header
+</template>
+
+<script>
+import ListHeader from "@/pages/medcards/components/MedicalCardListHeader.vue";
+export default {
+  name: "MedicalCardList",
+  components: { ListHeader },
+};
+</script>
+
+<style lang="sass" scoped>
+.medical-wrapper
+  background-color: var(--default-white)
+</style>

src/pages/medcards/components/MedicalCardListHeader.vue

@@ -0,0 +1,78 @@
+<template lang="pug">
+  .header-wrapper.flex.w-full.justify-between.p-4
+    .flex.items-center.justify-center.gap-x-2
+      base-input.search(
+        :width="438",
+        size="M",
+        placeholder="Найти медкарту",
+        iconLeft
+      )
+        template(v-slot:iconLeft)
+          q-icon.search-icon(name="app:search", size="20px")
+      base-select(
+        width="280px",
+        :items="items",
+        size="M",
+        placeholder="Сортировать по ...",
+        v-model="sortingType"
+      )
+    base-button(width="216px")
+      q-icon.plus.mr-2(name="app:plus", size="24px")
+      span Создать медкарту
+</template>
+
+<script>
+import BaseInput from "@/components/base/BaseInput.vue";
+import BaseSelect from "@/components/base/BaseSelect.vue";
+import BaseButton from "@/components/base/BaseButton.vue";
+export default {
+  name: "MedicalCardListHeader",
+  components: { BaseInput, BaseSelect, BaseButton },
+  data() {
+    return {
+      items: [
+        {
+          label: "ФИО",
+          id: "name",
+        },
+        {
+          label: "приоритету",
+          id: "priority",
+        },
+        {
+          label: "дате рождения",
+          id: "birthDate",
+        },
+        {
+          label: "номеру медкарты",
+          id: "medcardNumber",
+        },
+        {
+          label: "проценту заполнения",
+          id: "percent",
+        },
+        {
+          label: "дате создания медкарты",
+          id: "creationDate",
+        },
+      ],
+      sortingType: null,
+    };
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.header-wrapper
+  height: 72px
+  border-bottom: 1px solid var(--gray-scondary)
+
+.search-icon :deep(path)
+  fill: var(--font-grey-color)
+
+.search :deep(.q-field__prepend)
+  padding-right: 4px
+
+.plus :deep(path)
+  fill: var(--default-white)
+</style>

src/pages/medcards/components/MedicalCardSearch.vue

@@ -1,9 +0,0 @@
-<template lang="pug">
-  .medical-wrapper.flex
-</template>
-
-<script>
-export default { name: "MedicalCardSearch" };
-</script>
-
-<style lang="sass" scoped></style>