add multiple select

src/components/base/BaseSelect.vue

@@ -21,16 +21,25 @@
         @filter="filterFn",
         :popup-content-style="popupContentStyle"
         @blur="$emit('blur')"
+        :multiple="multiple"
       )
-        template(#selected)
+        template(#selected, v-if="!multiple")
           slot(name="selected")
-        template(v-slot:option="scope", v-if="!customOption")
+        template(v-slot:option="{itemProps, opt}", v-if="!customOption")
-          q-item(v-bind="scope.itemProps", style="justify-content: center", v-if="value?.icon")
+          q-item(v-bind="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-icon.icon(:name="opt.icon", size="24px")
-          q-item.item.px-4.py-2(v-bind="scope.itemProps", style="justify-content: center", v-else)
+          q-item.item.px-4.py-2.multiple(
+              :class="{ 'selected': value?.length && ~value?.lastIndexOf(opt.value) }"
+              v-bind="itemProps",
+              style="justify-content: center",
+              v-else-if="multiple"
+            )
             q-item-section
-              q-item-label.text-dark.text-base.font-medium {{ scope.opt.label }}
+              q-item-label.text-dark.text-base.font-medium {{ opt.label }}
+          q-item.item.px-4.py-2(v-bind="itemProps", style="justify-content: center", v-else)
+            q-item-section
+              q-item-label.text-dark.text-base.font-medium {{ opt.label }}
         template(v-slot:option="{itemProps, opt}", v-else)
           slot(
             name="customOption",
@@ -79,6 +88,7 @@ export default {
     customOption: Boolean,
     filterFn: Function,
     popupContentStyle: Object,
+    multiple: Boolean,
   },
   emits: ["update:modelValue", "blur"],
   computed: {
@@ -248,8 +258,14 @@ export default {
   border-bottom: 1px solid var(--gray-secondary)
   &:last-child
     border-bottom: none
+  &.multiple.selected
+    background-color: var(--gray-thirdly)
+    .text-dark
+      color: var(--q-primary) !important
   &:hover
     background-color: var(--gray-thirdly)
+  .q-focus-helper
+    display: none !important
 
 .q-menu
   box-shadow: 1px 1px 8px 0px rgba(37, 40, 80, 0.15) !important

src/pages/home/TheHome.vue

@@ -5,11 +5,28 @@
   .text.pt-3.cursor-pointer(@click="gotoCalendar") Расписание приемов
   .text.pt-3.cursor-pointer(@click="gotoMedicalCards") Медицинские карты
 
+  base-select(:items="options", v-model="multiple", size="M", multiple)
+
+  .res {{multiple}}
+
 </template>
 
 <script>
+import BaseSelect from "@/components/base/BaseSelect.vue";
+
 export default {
   name: "TheHome",
+  components: {
+    BaseSelect,
+  },
+  data() {
+    return {
+      options: ["Google", "Facebook", "Twitter", "Apple", "Oracle"].map(
+        (e) => ({ label: e, value: e + "v" })
+      ),
+      multiple: null,
+    };
+  },
   methods: {
     gotoCalendar() {
       this.$router.push("/calendar");