WIP Сделала селект и кнопку сортировки

src/components/base/BaseSelect.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
   .flex.flex-col.gap-y-2
-    base-input-container(:label="label")
+    base-input-container(:label="label", :style="{width: width}")
       q-select(
         v-model="value",
         :options="items",
@@ -74,6 +74,7 @@ export default {
     disable: Boolean,
     label: String,
     readonly: Boolean,
+    width: String,
   },
   emits: ["update:modelValue"],
   data() {

src/pages/newMedicalCard/components/MedicalProtocolsList.vue

@@ -9,8 +9,16 @@
         icon="add",
         :style="{width: '100%'}"
       )
-    .p-4.rounded.background.h-full
+    .p-4.rounded.background.h-full.w-full
-      base-select
+      .flex.w-full
+        base-select(:style="{flex: 1}")
+        q-btn.ml-2(
+          icon="sort"
+          :style="{width: '40px', height: '40px'}",
+          padding="0"
+          :class="sortingClass"
+          @click="invertSorting"
+        )
 </template>
 
 <script>
@@ -18,6 +26,27 @@ import BaseSelect from "@/components/base/BaseSelect.vue";
 export default {
   name: "MedicalProtocolsList",
   components: { BaseSelect },
+  data() {
+    return {
+      sorting: false,
+    };
+  },
+  computed: {
+    sortingClass() {
+      return this.sorting
+        ? {
+            "sort-icon-active": true,
+          }
+        : {
+            "sort-icon-default": true,
+          };
+    },
+  },
+  methods: {
+    invertSorting() {
+      this.sorting = !this.sorting;
+    },
+  },
 };
 </script>
 
@@ -26,4 +55,10 @@ export default {
   width: 19.6%
 .background
   background-color: var(--default-white)
+.sort-icon-default
+  background-color: var(--bg-light-grey)
+  color: var(--font-grey-color)
+.sort-icon-active
+  background-color: var(--btn-blue-color)
+  color: var(--default-white)
 </style>