classcard-ui 0.2.1068 → 0.2.1069

package/src/components/CMultiselect/CMultiselect.vue

@@ -1,615 +1,615 @@
-<template>
-  <div>
-    <div class="mb-1 flex w-full items-center justify-between" v-if="label">
-      <div class="flex items-center">
-        <!-- label of multiselect field -->
-        <label v-if="label" class="text-sm font-medium text-gray-900">{{
-          label
-        }}</label>
-        <!-- asterisk sign to render if field is required -->
-        <p v-if="isRequired" class="ml-1 text-red-600">*</p>
-      </div>
-      <span v-if="hint" class="text-sm text-gray-500">{{ hint }}</span>
-    </div>
-    <v-select
-      class="disabled-opacity-50 disabled-pointer-events-none disabled-cursor-default absolute inline-block h-full w-full text-sm"
-      :placeholder="placeholder"
-      :multiple="isMultiple"
-      :taggable="isTaggable"
-      :push-tags="pushTags"
-      :filterable="filterable"
-      v-model="value"
-      :options="isGrouped ? groupedArray : options"
-      @input="setSelectedOptions"
-      @search="fetchOptions"
-      @search:focus="$emit('search:focus')"
-      @option:selecting="handleSingleSelect"
-      :label="optionLabel"
-      :clearable="clearable"
-      :loading="loading"
-      @open="onOpen"
-      @close="onClose"
-      :disabled="isDisabled"
-      :selectable="
-        isGrouped
-          ? (groupedArray) =>
-              groupedArray.header ? groupedArray.disabled : true
-          : (options) => getDisableOptions(options)
-      "
-    >
-      <template #open-indicator="{ attributes }">
-        <span
-          v-bind="attributes"
-          :style="!shouldIconRotate ? 'transform:none;' : ''"
-        >
-          <c-icon
-            v-if="icon"
-            :name="icon.name"
-            :type="icon.type"
-            class="h-5 w-5 text-gray-400"
-          />
-          <c-icon
-            v-else
-            :name="'chevron-down-outline-v2'"
-            :type="'outline-v2'"
-            class="h-4 w-4 text-gray-400"
-            viewBox="0 0 24 24"
-          />
-        </span>
-      </template>
-      <!--Selected option slot-->
-      <template v-if="addCheckBox" #selected-option-container="{ option }">
-        <div class="flex items-center justify-center truncate bg-white">
-          <div
-            v-if="getIndex(option) == 0"
-            class="flex items-center overflow-hidden"
-          >
-            <c-avatar
-              v-if="option[imageLabel]"
-              :size="'extraextrasmall'"
-              :image="option[imageLabel]"
-              :rounded="true"
-            ></c-avatar>
-            <c-avatar
-              v-if="option.initials && !option.icon && !option[imageLabel]"
-              :size="'extraextrasmall'"
-              :nameInitials="option.initials"
-              :rounded="true"
-              :isDynamicallyColored="true"
-            ></c-avatar>
-            <c-icon
-              v-if="option.icon && !option[imageLabel] && !option.initials"
-              :name="option.icon.name"
-              :type="option.icon.type"
-              class="h-5 w-5 text-gray-400"
-            />
-            <span class="text-start ml-2 inline-block truncate text-sm">{{
-              option[optionLabel]
-            }}</span>
-          </div>
-          <div v-if="getIndex(option) == 1" class="ml-1 flex items-center">
-            +{{ value.length - 1 }}
-          </div>
-        </div>
-      </template>
-      <!-- eslint-disable-next-line vue/no-unused-vars  -->
-      <template #no-options="{ search, searching, loading }">
-        <span v-if="search.length < 1"
-          >Start typing to search for options...</span
-        >
-        <span v-else>No options found, try searching something else.</span>
-      </template>
-      <template #spinner="{ loading }">
-        <svg
-          class="h-5 w-5 animate-spin text-gray-400"
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          v-if="loading"
-        >
-          <circle
-            class="opacity-25"
-            cx="12"
-            cy="12"
-            r="10"
-            stroke="currentColor"
-            stroke-width="4"
-          ></circle>
-          <path
-            class="opacity-75"
-            fill="currentColor"
-            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-          ></path>
-        </svg>
-      </template>
-      <template slot="option" slot-scope="option">
-        <slot
-          name="custom-option"
-          v-bind:option="isGrouped ? option : groupedArray"
-        ></slot>
-      </template>
-      <template v-slot:option="option">
-        <div v-if="!isGrouped">
-          <div :class="`mt-1 flex h-full w-full items-center hover:text-white`">
-            <p v-if="showOptionImage" class="flex-shrink-0">
-              <c-avatar
-                v-if="option[imageLabel]"
-                :size="
-                  option.description && showAdditionalText
-                    ? 'extrasmall'
-                    : 'extraextrasmall'
-                "
-                :image="option[imageLabel]"
-                :rounded="true"
-                :description="option.description"
-                class="mr-2"
-              ></c-avatar>
-              <c-avatar
-                v-if="!option.icon && !option[imageLabel] && option.initials"
-                :size="
-                  option.description && showAdditionalText
-                    ? 'extrasmall'
-                    : 'extraextrasmall'
-                "
-                :nameInitials="option.initials"
-                :description="option.description"
-                :rounded="true"
-                :isDynamicallyColored="true"
-                class="mr-2"
-              ></c-avatar>
-              <c-icon
-                v-if="option.icon && !option[imageLabel] && !option.initials"
-                :name="option.icon.name"
-                :type="option.icon.type"
-                class="mr-2 h-5 w-5 text-gray-400"
-              />
-            </p>
-            <div class="w-full hover:text-white">
-              <div class="flex items-center justify-between">
-                <div class="flex items-center">
-                  <p>{{ option[optionLabel] }}</p>
-                  <div class="ml-3">
-                    <span
-                      v-if="tags && option.info && option.info !== ''"
-                      class="inline-flex rounded-md bg-gray-400 px-2 py-px text-sm leading-5 text-white"
-                    >
-                      {{ option.info }}
-                    </span>
-                    <span v-else class="-ml-3 text-gray-300">
-                      &nbsp;{{ option.info }}
-                    </span>
-                  </div>
-                </div>
-                <c-checkbox v-if="addCheckBox" :value="isChecked(option)" />
-              </div>
-              <p
-                class="text-xs"
-                v-if="option.description && showAdditionalText"
-              >
-                {{ option.description }}
-              </p>
-            </div>
-          </div>
-        </div>
-        <div v-if="isGrouped">
-          <v-list-subheader v-if="groupedArray.header">
-            {{ groupedArray.header }}
-          </v-list-subheader>
-          <div
-            :class="`mt-1 flex h-full w-full hover:text-white ${
-              groupedArray.description ? 'items-start' : 'items-center'
-            }`"
-          >
-            <div v-if="!groupedArray.header && showOptionImage">
-              <c-avatar
-                v-if="groupedArray.image"
-                size="extraextrasmall"
-                :image="groupedArray.image"
-                :rounded="true"
-                :description="groupedArray.description"
-                class="mr-2"
-              ></c-avatar>
-              <c-avatar
-                v-else
-                size="extraextrasmall"
-                :nameInitials="groupedArray.initials"
-                :description="groupedArray.description"
-                :rounded="true"
-                :isDynamicallyColored="true"
-                class="mr-2"
-              ></c-avatar>
-            </div>
-            <div class="w-full hover:text-white">
-              <div class="flex items-center">
-                <p>{{ groupedArray[optionLabel] }}</p>
-                <div class="ml-3">
-                  <span
-                    v-if="tags && groupedArray.info && groupedArray.info !== ''"
-                    class="inline-flex rounded-md bg-gray-400 px-2 py-px text-sm leading-5 text-white"
-                  >
-                    {{ groupedArray.info }}
-                  </span>
-                  <span v-else class="text-gray-300">
-                    {{ groupedArray.info }}
-                  </span>
-                </div>
-              </div>
-
-              <p class="text-xs" v-if="groupedArray.description">
-                {{ groupedArray.description }}
-              </p>
-            </div>
-          </div>
-        </div>
-      </template>
-      <template #list-footer>
-        <li ref="load" class="loader" v-show="hasNextPage">
-          Loading more options...
-        </li>
-        <li
-          v-if="showFooterButton"
-          class="group sticky bottom-0 mt-1 cursor-pointer select-none bg-gray-50 py-2 pl-3 pr-9 text-gray-700 hover:bg-gray-100 hover:text-gray-900"
-          :class="footerBtnClasses"
-          id="listbox-option-0"
-          role="option"
-          @click="$emit('footerButtonClick')"
-        >
-          <div class="flex items-center">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-6 w-6 flex-shrink-0 text-gray-400"
-              viewBox="0 0 20 20"
-              fill="currentColor"
-            >
-              <path
-                fill-rule="evenodd"
-                d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z"
-                clip-rule="evenodd"
-              />
-            </svg>
-            <span class="ml-3 block truncate font-semibold">
-              {{ footerButtonText }}
-            </span>
-          </div>
-        </li>
-      </template>
-    </v-select>
-
-    <p v-if="subLabel" class="mt-1 text-sm text-gray-500">{{ subLabel }}</p>
-    <p v-if="!isValidate" class="mt-1 text-sm text-red-600">
-      {{ errorMessage }}
-    </p>
-    <p v-if="helpText && isValidate == true" class="mt-1 text-sm text-gray-500">
-      {{ helpText }}
-    </p>
-  </div>
-</template>
-<script>
-import vSelect from "vue-select";
-import CAvatar from "../CAvatar/CAvatar.vue";
-import CIcon from "../CIcon/CIcon.vue";
-import CCheckbox from "../CCheckbox/CCheckbox.vue";
-import { debounce } from "lodash-es";
-// import Fuse from "fuse.js";
-import "vue-select/dist/vue-select.css";
-export default {
-  name: "CMultiselect",
-  components: { vSelect, CAvatar, CCheckbox, CIcon },
-  props: {
-    options: {
-      type: Array,
-      required: true,
-    },
-    extraDetails: {
-      type: Boolean,
-      default: false,
-    },
-    showFooterButton: {
-      type: Boolean,
-      default: false,
-    },
-    footerButtonText: {
-      type: String,
-      default: "",
-    },
-    label: String,
-    isRequired: {
-      type: Boolean,
-    },
-    subLabel: String,
-    placeholder: {
-      type: String,
-    },
-    // whether multiple fields are allowed or not
-    isMultiple: {
-      type: Boolean,
-    },
-    // append newly created tags in options
-    pushTags: {
-      type: Boolean,
-    },
-    // whether to allow user to create new options
-    isTaggable: {
-      type: Boolean,
-    },
-    getOptions: {
-      // function to emit on search{
-      type: Function,
-    },
-    customiseOption: {
-      type: Boolean,
-    },
-    // whether to show profile picture in option
-    showOptionImage: {
-      type: Boolean,
-    },
-    // the name of the option to render in the selectpicker
-    optionLabel: {
-      type: String,
-    },
-    // action to trigger after selecting option from dropdown
-    onSelectOptions: {
-      type: Function,
-    },
-    optionsSelected: {
-      type: [Array, Object],
-    },
-    filterable: {
-      type: Boolean,
-      default: false,
-    },
-    clearable: {
-      type: Boolean,
-      default: true,
-    },
-    isValidate: {
-      type: Boolean,
-      default: true,
-    },
-    errorMessage: {
-      type: String,
-    },
-    loading: {
-      type: Boolean,
-      default: false,
-    },
-    hasNextPage: {
-      type: Boolean,
-      default: false,
-    },
-    isDisabled: {
-      type: Boolean,
-      default: false,
-    },
-    // text adjacent to label of dropdown to provide hint about field
-    hint: { type: String },
-    helpText: {
-      type: String,
-    },
-    tags: {
-      type: Boolean,
-      default: false,
-    },
-    isGrouped: {
-      type: Boolean,
-      default: false,
-    },
-    //to show the additional text, default true to prevent failure at any other place
-    showAdditionalText: {
-      type: Boolean,
-      default: true,
-    },
-    addCheckBox: {
-      type: Boolean,
-      default: false,
-    },
-    showSelectedAvatar: {
-      type: Boolean,
-      default: false,
-    },
-    icon: {
-      type: Object,
-    },
-    footerBtnClasses: {
-      type: String,
-    },
-    shouldIconRotate: {
-      type: Boolean,
-      default: true,
-    },
-    imageLabel: {
-      type: String,
-      default: "image",
-    },
-  },
-  computed: {
-    groupedArray() {
-      const groups = {};
-
-      this.options.forEach((x) => {
-        // create empty object if it doesn't exists.
-        groups[x.category] = groups[x.category] || {
-          text: x.category,
-          list: [],
-        };
-
-        groups[x.category].list.push(x);
-      });
-
-      // The flattened list of items that holds items as well as unique headers
-      const flattened = [];
-
-      // Iterate over all the unique categories and
-      // then flatten into a list that v-select needs.
-      Object.keys(groups).forEach((categoryId) => {
-        const category = groups[categoryId];
-        const categoryName = category.text;
-
-        // Create a group
-        flattened.push({ header: categoryName });
-
-        // Add all the items followed by category header
-        flattened.push(...category.list);
-      });
-
-      return flattened;
-    },
-  },
-  data() {
-    return {
-      loaderSearching: true,
-      value:
-        this.optionsSelected && this.optionsSelected.length
-          ? this.optionsSelected
-          : [],
-      observer: null,
-    };
-  },
-  methods: {
-    fetchOptions(search, loaderSearching) {
-      this.emitGetOptions(search, loaderSearching);
-    },
-    emitGetOptions: debounce(function (search, loaderSearching) {
-      this.$emit("getOptions", search, loaderSearching);
-    }, 300),
-    setSelectedOptions(params) {
-      this.value = params;
-      this.$emit("onSelectOptions", params);
-    },
-    async onOpen() {
-      if (this.hasNextPage) {
-        await this.$nextTick();
-        if (this.$refs?.load && this.observer) {
-          this.observer.observe(this.$refs.load);
-        } else {
-          setTimeout(() => {
-            this.onOpen();
-          }, 500);
-        }
-      }
-      this.emitGetOptions("", true);
-    },
-    onClose() {
-      this.observer.disconnect();
-    },
-    async infiniteScroll([{ isIntersecting }]) {
-      if (isIntersecting) {
-        this.emitLoadNextPage();
-      }
-    },
-    getIndex(option) {
-      return this.value.findIndex((item) => item.id == option.id);
-    },
-    isChecked(option) {
-      return this.value.findIndex((item) => item.id == option.id) == -1 ? 0 : 1;
-    },
-
-    handleSingleSelect(option) {
-      if (this.addCheckBox) {
-        if (this.isChecked(option) == 1) {
-          if (this.value.length == 1) {
-            // if there only one option selected dont allow to deselect it
-            return;
-          }
-          this.value = this.value.filter((item) => item.id != option.id);
-          this.$emit("onSelectOptions", this.value);
-        } else {
-          this.$emit("onSingleSelectOption", option);
-        }
-      }
-    },
-    getDisableOptions(options) {
-      if (this.addCheckBox && options.isDisabled) {
-        return !options.isDisabled;
-      } else {
-        return options.header ? options.disabled : true;
-      }
-    },
-
-    // a function that will set the location when the component has mounted and the location is passed after that
-    forceSetData(params) {
-      this.value = params;
-    },
-    emitLoadNextPage: debounce(function () {
-      this.$emit("loadNextPage");
-    }, 300),
-  },
-  watch: {
-    optionsSelected: {
-      handler() {
-        this.value = this.optionsSelected;
-      },
-      deep: true,
-    },
-  },
-  mounted() {
-    this.observer = new IntersectionObserver(this.infiniteScroll);
-  },
-};
-</script>
-<style>
-.disabled {
-  pointer-events: none;
-  color: #bfcbd9;
-  cursor: not-allowed;
-  background-image: none;
-  background-color: #eef1f6;
-  border-color: #d1dbe5;
-}
-.v-select {
-  @apply cursor-pointer;
-}
-.vs__dropdown-toggle {
-  @apply focus:outline-none w-full rounded-md border border-gray-300 bg-white pl-3 text-left shadow-sm focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 sm:text-sm;
-  padding-top: 0.35rem;
-  padding-bottom: 0.35rem;
-}
-.vs__selected-options {
-  @apply overflow-hidden;
-  flex-wrap: nowrap;
-}
-.vs--open .vs__dropdown-toggle {
-  border-bottom-color: rgba(212, 212, 216, var(--tw-border-opacity));
-  @apply rounded-b-md;
-}
-.vs__selected {
-  @apply m-0 mr-1 border-none py-0 pl-1.5 pr-1.5;
-  margin-bottom: 2px;
-}
-.extra:hover {
-  color: white;
-}
-.vs__selected-options {
-  @apply pl-0;
-  padding-top: 0.5px;
-  padding-bottom: 1px;
-}
-.vs__search,
-.vs__search:focus {
-  @apply m-0 p-0;
-}
-.vs__actions {
-  @apply pt-0 pr-3;
-}
-.vs__dropdown-menu {
-  @apply focus:outline-none mt-2 max-h-60 overflow-auto rounded-md bg-white py-0 text-base shadow-lg ring-1 ring-opacity-5 sm:text-sm;
-}
-.vs__dropdown-option {
-  @apply whitespace-normal py-2;
-}
-
-.vs__dropdown-toggle.vs__dropdown-option--highlight {
-  @apply bg-indigo-700 text-white;
-}
-
-.vs__dropdown-option--highlight {
-  @apply bg-indigo-700 text-white;
-}
-.vs__dropdown-option--disabled {
-  pointer-events: none;
-}
-
-.vs__dropdown-toggle {
-  height: 100%;
-}
-</style>
+<template>
+  <div>
+    <div class="mb-1 flex w-full items-center justify-between" v-if="label">
+      <div class="flex items-center">
+        <!-- label of multiselect field -->
+        <label v-if="label" class="text-sm font-medium text-gray-900">{{
+          label
+        }}</label>
+        <!-- asterisk sign to render if field is required -->
+        <p v-if="isRequired" class="ml-1 text-red-600">*</p>
+      </div>
+      <span v-if="hint" class="text-sm text-gray-500">{{ hint }}</span>
+    </div>
+    <v-select
+      class="disabled-opacity-50 disabled-pointer-events-none disabled-cursor-default absolute inline-block h-full w-full text-sm"
+      :placeholder="placeholder"
+      :multiple="isMultiple"
+      :taggable="isTaggable"
+      :push-tags="pushTags"
+      :filterable="filterable"
+      v-model="value"
+      :options="isGrouped ? groupedArray : options"
+      @input="setSelectedOptions"
+      @search="fetchOptions"
+      @search:focus="$emit('search:focus')"
+      @option:selecting="handleSingleSelect"
+      :label="optionLabel"
+      :clearable="clearable"
+      :loading="loading"
+      @open="onOpen"
+      @close="onClose"
+      :disabled="isDisabled"
+      :selectable="
+        isGrouped
+          ? (groupedArray) =>
+              groupedArray.header ? groupedArray.disabled : true
+          : (options) => getDisableOptions(options)
+      "
+    >
+      <template #open-indicator="{ attributes }">
+        <span
+          v-bind="attributes"
+          :style="!shouldIconRotate ? 'transform:none;' : ''"
+        >
+          <c-icon
+            v-if="icon"
+            :name="icon.name"
+            :type="icon.type"
+            class="h-5 w-5 text-gray-400"
+          />
+          <c-icon
+            v-else
+            :name="'chevron-down-outline-v2'"
+            :type="'outline-v2'"
+            class="h-4 w-4 text-gray-400"
+            viewBox="0 0 24 24"
+          />
+        </span>
+      </template>
+      <!--Selected option slot-->
+      <template v-if="addCheckBox" #selected-option-container="{ option }">
+        <div class="flex items-center justify-center truncate bg-white">
+          <div
+            v-if="getIndex(option) == 0"
+            class="flex items-center overflow-hidden"
+          >
+            <c-avatar
+              v-if="option[imageLabel]"
+              :size="'extraextrasmall'"
+              :image="option[imageLabel]"
+              :rounded="true"
+            ></c-avatar>
+            <c-avatar
+              v-if="option.initials && !option.icon && !option[imageLabel]"
+              :size="'extraextrasmall'"
+              :nameInitials="option.initials"
+              :rounded="true"
+              :isDynamicallyColored="true"
+            ></c-avatar>
+            <c-icon
+              v-if="option.icon && !option[imageLabel] && !option.initials"
+              :name="option.icon.name"
+              :type="option.icon.type"
+              class="h-5 w-5 text-gray-400"
+            />
+            <span class="text-start ml-2 inline-block truncate text-sm">{{
+              option[optionLabel]
+            }}</span>
+          </div>
+          <div v-if="getIndex(option) == 1" class="ml-1 flex items-center">
+            +{{ value.length - 1 }}
+          </div>
+        </div>
+      </template>
+      <!-- eslint-disable-next-line vue/no-unused-vars  -->
+      <template #no-options="{ search, searching, loading }">
+        <span v-if="search.length < 1"
+          >Start typing to search for options...</span
+        >
+        <span v-else>No options found, try searching something else.</span>
+      </template>
+      <template #spinner="{ loading }">
+        <svg
+          class="h-5 w-5 animate-spin text-gray-400"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          v-if="loading"
+        >
+          <circle
+            class="opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            stroke-width="4"
+          ></circle>
+          <path
+            class="opacity-75"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          ></path>
+        </svg>
+      </template>
+      <template slot="option" slot-scope="option">
+        <slot
+          name="custom-option"
+          v-bind:option="isGrouped ? option : groupedArray"
+        ></slot>
+      </template>
+      <template v-slot:option="option">
+        <div v-if="!isGrouped">
+          <div :class="`mt-1 flex h-full w-full items-center hover:text-white`">
+            <p v-if="showOptionImage" class="flex-shrink-0">
+              <c-avatar
+                v-if="option[imageLabel]"
+                :size="
+                  option.description && showAdditionalText
+                    ? 'extrasmall'
+                    : 'extraextrasmall'
+                "
+                :image="option[imageLabel]"
+                :rounded="true"
+                :description="option.description"
+                class="mr-2"
+              ></c-avatar>
+              <c-avatar
+                v-if="!option.icon && !option[imageLabel] && option.initials"
+                :size="
+                  option.description && showAdditionalText
+                    ? 'extrasmall'
+                    : 'extraextrasmall'
+                "
+                :nameInitials="option.initials"
+                :description="option.description"
+                :rounded="true"
+                :isDynamicallyColored="true"
+                class="mr-2"
+              ></c-avatar>
+              <c-icon
+                v-if="option.icon && !option[imageLabel] && !option.initials"
+                :name="option.icon.name"
+                :type="option.icon.type"
+                class="mr-2 h-5 w-5 text-gray-400"
+              />
+            </p>
+            <div class="w-full hover:text-white">
+              <div class="flex items-center justify-between">
+                <div class="flex items-center">
+                  <p>{{ option[optionLabel] }}</p>
+                  <div class="ml-3">
+                    <span
+                      v-if="tags && option.info && option.info !== ''"
+                      class="inline-flex rounded-md bg-gray-400 px-2 py-px text-sm leading-5 text-white"
+                    >
+                      {{ option.info }}
+                    </span>
+                    <span v-else class="-ml-3 text-gray-300">
+                      &nbsp;{{ option.info }}
+                    </span>
+                  </div>
+                </div>
+                <c-checkbox v-if="addCheckBox" :value="isChecked(option)" />
+              </div>
+              <p
+                class="text-xs"
+                v-if="option.description && showAdditionalText"
+              >
+                {{ option.description }}
+              </p>
+            </div>
+          </div>
+        </div>
+        <div v-if="isGrouped">
+          <v-list-subheader v-if="groupedArray.header">
+            {{ groupedArray.header }}
+          </v-list-subheader>
+          <div
+            :class="`mt-1 flex h-full w-full hover:text-white ${
+              groupedArray.description ? 'items-start' : 'items-center'
+            }`"
+          >
+            <div v-if="!groupedArray.header && showOptionImage">
+              <c-avatar
+                v-if="groupedArray.image"
+                size="extraextrasmall"
+                :image="groupedArray.image"
+                :rounded="true"
+                :description="groupedArray.description"
+                class="mr-2"
+              ></c-avatar>
+              <c-avatar
+                v-else
+                size="extraextrasmall"
+                :nameInitials="groupedArray.initials"
+                :description="groupedArray.description"
+                :rounded="true"
+                :isDynamicallyColored="true"
+                class="mr-2"
+              ></c-avatar>
+            </div>
+            <div class="w-full hover:text-white">
+              <div class="flex items-center">
+                <p>{{ groupedArray[optionLabel] }}</p>
+                <div class="ml-3">
+                  <span
+                    v-if="tags && groupedArray.info && groupedArray.info !== ''"
+                    class="inline-flex rounded-md bg-gray-400 px-2 py-px text-sm leading-5 text-white"
+                  >
+                    {{ groupedArray.info }}
+                  </span>
+                  <span v-else class="text-gray-300">
+                    {{ groupedArray.info }}
+                  </span>
+                </div>
+              </div>
+
+              <p class="text-xs" v-if="groupedArray.description">
+                {{ groupedArray.description }}
+              </p>
+            </div>
+          </div>
+        </div>
+      </template>
+      <template #list-footer>
+        <li ref="load" class="loader" v-show="hasNextPage">
+          Loading more options...
+        </li>
+        <li
+          v-if="showFooterButton"
+          class="group sticky bottom-0 mt-1 cursor-pointer select-none bg-gray-50 py-2 pl-3 pr-9 text-gray-700 hover:bg-gray-100 hover:text-gray-900"
+          :class="footerBtnClasses"
+          id="listbox-option-0"
+          role="option"
+          @click="$emit('footerButtonClick')"
+        >
+          <div class="flex items-center">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="h-6 w-6 flex-shrink-0 text-gray-400"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z"
+                clip-rule="evenodd"
+              />
+            </svg>
+            <span class="ml-3 block truncate font-semibold">
+              {{ footerButtonText }}
+            </span>
+          </div>
+        </li>
+      </template>
+    </v-select>
+
+    <p v-if="subLabel" class="mt-1 text-sm text-gray-500">{{ subLabel }}</p>
+    <p v-if="!isValidate" class="mt-1 text-sm text-red-600">
+      {{ errorMessage }}
+    </p>
+    <p v-if="helpText && isValidate == true" class="mt-1 text-sm text-gray-500">
+      {{ helpText }}
+    </p>
+  </div>
+</template>
+<script>
+import vSelect from "vue-select";
+import CAvatar from "../CAvatar/CAvatar.vue";
+import CIcon from "../CIcon/CIcon.vue";
+import CCheckbox from "../CCheckbox/CCheckbox.vue";
+import { debounce } from "lodash-es";
+// import Fuse from "fuse.js";
+import "vue-select/dist/vue-select.css";
+export default {
+  name: "CMultiselect",
+  components: { vSelect, CAvatar, CCheckbox, CIcon },
+  props: {
+    options: {
+      type: Array,
+      required: true,
+    },
+    extraDetails: {
+      type: Boolean,
+      default: false,
+    },
+    showFooterButton: {
+      type: Boolean,
+      default: false,
+    },
+    footerButtonText: {
+      type: String,
+      default: "",
+    },
+    label: String,
+    isRequired: {
+      type: Boolean,
+    },
+    subLabel: String,
+    placeholder: {
+      type: String,
+    },
+    // whether multiple fields are allowed or not
+    isMultiple: {
+      type: Boolean,
+    },
+    // append newly created tags in options
+    pushTags: {
+      type: Boolean,
+    },
+    // whether to allow user to create new options
+    isTaggable: {
+      type: Boolean,
+    },
+    getOptions: {
+      // function to emit on search{
+      type: Function,
+    },
+    customiseOption: {
+      type: Boolean,
+    },
+    // whether to show profile picture in option
+    showOptionImage: {
+      type: Boolean,
+    },
+    // the name of the option to render in the selectpicker
+    optionLabel: {
+      type: String,
+    },
+    // action to trigger after selecting option from dropdown
+    onSelectOptions: {
+      type: Function,
+    },
+    optionsSelected: {
+      type: [Array, Object],
+    },
+    filterable: {
+      type: Boolean,
+      default: false,
+    },
+    clearable: {
+      type: Boolean,
+      default: true,
+    },
+    isValidate: {
+      type: Boolean,
+      default: true,
+    },
+    errorMessage: {
+      type: String,
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    hasNextPage: {
+      type: Boolean,
+      default: false,
+    },
+    isDisabled: {
+      type: Boolean,
+      default: false,
+    },
+    // text adjacent to label of dropdown to provide hint about field
+    hint: { type: String },
+    helpText: {
+      type: String,
+    },
+    tags: {
+      type: Boolean,
+      default: false,
+    },
+    isGrouped: {
+      type: Boolean,
+      default: false,
+    },
+    //to show the additional text, default true to prevent failure at any other place
+    showAdditionalText: {
+      type: Boolean,
+      default: true,
+    },
+    addCheckBox: {
+      type: Boolean,
+      default: false,
+    },
+    showSelectedAvatar: {
+      type: Boolean,
+      default: false,
+    },
+    icon: {
+      type: Object,
+    },
+    footerBtnClasses: {
+      type: String,
+    },
+    shouldIconRotate: {
+      type: Boolean,
+      default: true,
+    },
+    imageLabel: {
+      type: String,
+      default: "image",
+    },
+  },
+  computed: {
+    groupedArray() {
+      const groups = {};
+
+      this.options.forEach((x) => {
+        // create empty object if it doesn't exists.
+        groups[x.category] = groups[x.category] || {
+          text: x.category,
+          list: [],
+        };
+
+        groups[x.category].list.push(x);
+      });
+
+      // The flattened list of items that holds items as well as unique headers
+      const flattened = [];
+
+      // Iterate over all the unique categories and
+      // then flatten into a list that v-select needs.
+      Object.keys(groups).forEach((categoryId) => {
+        const category = groups[categoryId];
+        const categoryName = category.text;
+
+        // Create a group
+        flattened.push({ header: categoryName });
+
+        // Add all the items followed by category header
+        flattened.push(...category.list);
+      });
+
+      return flattened;
+    },
+  },
+  data() {
+    return {
+      loaderSearching: true,
+      value:
+        this.optionsSelected && this.optionsSelected.length
+          ? this.optionsSelected
+          : [],
+      observer: null,
+    };
+  },
+  methods: {
+    fetchOptions(search, loaderSearching) {
+      this.emitGetOptions(search, loaderSearching);
+    },
+    emitGetOptions: debounce(function (search, loaderSearching) {
+      this.$emit("getOptions", search, loaderSearching);
+    }, 300),
+    setSelectedOptions(params) {
+      this.value = params;
+      this.$emit("onSelectOptions", params);
+    },
+    async onOpen() {
+      if (this.hasNextPage) {
+        await this.$nextTick();
+        if (this.$refs?.load && this.observer) {
+          this.observer.observe(this.$refs.load);
+        } else {
+          setTimeout(() => {
+            this.onOpen();
+          }, 500);
+        }
+      }
+      this.emitGetOptions("", true);
+    },
+    onClose() {
+      this.observer.disconnect();
+    },
+    async infiniteScroll([{ isIntersecting }]) {
+      if (isIntersecting) {
+        this.emitLoadNextPage();
+      }
+    },
+    getIndex(option) {
+      return this.value.findIndex((item) => item.id == option.id);
+    },
+    isChecked(option) {
+      return this.value.findIndex((item) => item.id == option.id) == -1 ? 0 : 1;
+    },
+
+    handleSingleSelect(option) {
+      if (this.addCheckBox) {
+        if (this.isChecked(option) == 1) {
+          if (this.value.length == 1) {
+            // if there only one option selected dont allow to deselect it
+            return;
+          }
+          this.value = this.value.filter((item) => item.id != option.id);
+          this.$emit("onSelectOptions", this.value);
+        } else {
+          this.$emit("onSingleSelectOption", option);
+        }
+      }
+    },
+    getDisableOptions(options) {
+      if (this.addCheckBox && options.isDisabled) {
+        return !options.isDisabled;
+      } else {
+        return options.header ? options.disabled : true;
+      }
+    },
+
+    // a function that will set the location when the component has mounted and the location is passed after that
+    forceSetData(params) {
+      this.value = params;
+    },
+    emitLoadNextPage: debounce(function () {
+      this.$emit("loadNextPage");
+    }, 300),
+  },
+  watch: {
+    optionsSelected: {
+      handler() {
+        this.value = this.optionsSelected;
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    this.observer = new IntersectionObserver(this.infiniteScroll);
+  },
+};
+</script>
+<style>
+.disabled {
+  pointer-events: none;
+  color: #bfcbd9;
+  cursor: not-allowed;
+  background-image: none;
+  background-color: #eef1f6;
+  border-color: #d1dbe5;
+}
+.v-select {
+  @apply cursor-pointer;
+}
+.vs__dropdown-toggle {
+  @apply focus:outline-none w-full rounded-md border border-gray-300 bg-white pl-3 text-left shadow-sm focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 sm:text-sm;
+  padding-top: 0.35rem;
+  padding-bottom: 0.35rem;
+}
+.vs__selected-options {
+  @apply overflow-hidden;
+  flex-wrap: nowrap;
+}
+.vs--open .vs__dropdown-toggle {
+  border-bottom-color: rgba(212, 212, 216, var(--tw-border-opacity));
+  @apply rounded-b-md;
+}
+.vs__selected {
+  @apply m-0 mr-1 border-none py-0 pl-1.5 pr-1.5;
+  margin-bottom: 2px;
+}
+.extra:hover {
+  color: white;
+}
+.vs__selected-options {
+  @apply pl-0;
+  padding-top: 0.5px;
+  padding-bottom: 1px;
+}
+.vs__search,
+.vs__search:focus {
+  @apply m-0 p-0;
+}
+.vs__actions {
+  @apply pt-0 pr-3;
+}
+.vs__dropdown-menu {
+  @apply focus:outline-none mt-2 max-h-60 overflow-auto rounded-md bg-white py-0 text-base shadow-lg ring-1 ring-opacity-5 sm:text-sm;
+}
+.vs__dropdown-option {
+  @apply whitespace-normal py-2;
+}
+
+.vs__dropdown-toggle.vs__dropdown-option--highlight {
+  @apply bg-indigo-700 text-white;
+}
+
+.vs__dropdown-option--highlight {
+  @apply bg-indigo-700 text-white;
+}
+.vs__dropdown-option--disabled {
+  pointer-events: none;
+}
+
+.vs__dropdown-toggle {
+  height: 100%;
+}
+</style>