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

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>