classcard-ui 0.2.989 → 0.2.990

package/src/components/CMultiselect/CMultiselect.vue

@@ -1,479 +1,485 @@
-<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')"
-      :label="optionLabel"
-      :clearable="clearable"
-      :loading="loading"
-      @open="onOpen"
-      @close="onClose"
-      :disabled="isDisabled"
-      :selectable="
-        isGrouped
-          ? (groupedArray) =>
-              groupedArray.header ? groupedArray.disabled : true
-          : (options) => (options.header ? options.disabled : true)
-      "
-    >
-      <template #open-indicator="{ attributes }">
-        <span v-bind="attributes">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            class="h-5 w-5 cursor-pointer text-gray-400"
-            viewBox="0 0 20 20"
-            fill="currentColor"
-          >
-            <path
-              fill-rule="evenodd"
-              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-              clip-rule="evenodd"
-            />
-          </svg>
-        </span>
-      </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="option"></slot>
-      </template>
-
-      <template v-if="showOptionImage && !isGrouped" v-slot:option="option">
-        <div
-          :class="`mt-1 flex h-full w-full hover:text-white ${
-            option.description ? 'items-start' : 'items-center'
-          }`"
-        >
-          <c-avatar
-            v-if="option.image"
-            size="extraextrasmall"
-            :image="option.image"
-            :rounded="true"
-            :description="option.description"
-            class="mr-2"
-          ></c-avatar>
-          <c-avatar
-            v-else
-            size="extraextrasmall"
-            :nameInitials="option.initials"
-            :description="option.description"
-            :rounded="true"
-            :isDynamicallyColored="true"
-            class="mr-2"
-          ></c-avatar>
-          <div class="w-full hover:text-white">
-            <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="text-gray-300">
-                  {{ option.info }}
-                </span>
-              </div>
-            </div>
-
-            <p class="text-xs" v-if="option.description">
-              {{ option.description }}
-            </p>
-          </div>
-        </div>
-      </template>
-      <template v-if="isGrouped" v-slot:option="groupedArray">
-        <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>
-      </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"
-          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 { debounce } from "lodash-es";
-// import Fuse from "fuse.js";
-import "vue-select/dist/vue-select.css";
-export default {
-  name: "CMultiselect",
-  components: { vSelect, CAvatar },
-  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,
-    },
-  },
-  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();
-      }
-    },
-    emitLoadNextPage: debounce(function () {
-      this.$emit("loadNextPage");
-    }, 300),
-  },
-  watch: {
-    optionsSelected() {
-      this.value = this.optionsSelected;
-    },
-  },
-  mounted() {
-    console.log(document.getElementById("vs2__listbox"));
-    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 w-full rounded-md border border-gray-300 bg-white pl-3 text-left shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm;
-  padding-top: 0.4rem;
-  padding-bottom: 0.4rem;
-}
-.vs__selected-options {
-  @apply flex-wrap overflow-hidden;
-}
-.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 mt-2 max-h-60 overflow-auto rounded-md bg-white py-0 text-base shadow-lg ring-1 ring-opacity-5 focus:outline-none 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;
-}
-</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')"
+      :label="optionLabel"
+      :clearable="clearable"
+      :loading="loading"
+      @open="onOpen"
+      @close="onClose"
+      :disabled="isDisabled"
+      :selectable="
+        isGrouped
+          ? (groupedArray) =>
+              groupedArray.header ? groupedArray.disabled : true
+          : (options) => (options.header ? options.disabled : true)
+      "
+    >
+      <template #open-indicator="{ attributes }">
+        <span v-bind="attributes">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="h-5 w-5 cursor-pointer text-gray-400"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        </span>
+      </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="option"></slot>
+      </template>
+
+      <template v-if="showOptionImage && !isGrouped" v-slot:option="option">
+        <div
+          :class="`mt-1 flex h-full w-full hover:text-white ${
+            option.description ? 'items-start' : 'items-center'
+          }`"
+        >
+          <c-avatar
+            v-if="option.image"
+            size="extraextrasmall"
+            :image="option.image"
+            :rounded="true"
+            :description="option.description"
+            class="mr-2"
+          ></c-avatar>
+          <c-avatar
+            v-else
+            size="extraextrasmall"
+            :nameInitials="option.initials"
+            :description="option.description"
+            :rounded="true"
+            :isDynamicallyColored="true"
+            class="mr-2"
+          ></c-avatar>
+          <div class="w-full hover:text-white">
+            <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="text-gray-300">
+                  {{ option.info }}
+                </span>
+              </div>
+            </div>
+
+            <p class="text-xs" v-if="option.description">
+              {{ option.description }}
+            </p>
+          </div>
+        </div>
+      </template>
+      <template v-if="isGrouped" v-slot:option="groupedArray">
+        <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>
+      </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"
+          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 { debounce } from "lodash-es";
+// import Fuse from "fuse.js";
+import "vue-select/dist/vue-select.css";
+export default {
+  name: "CMultiselect",
+  components: { vSelect, CAvatar },
+  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,
+    },
+  },
+  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();
+      }
+    },
+    emitLoadNextPage: debounce(function () {
+      this.$emit("loadNextPage");
+    }, 300),
+  },
+  watch: {
+    optionsSelected() {
+      console.log("watcher triggered");
+      this.value = this.optionsSelected;
+    },
+  },
+  mounted() {
+    console.log(
+      "this is value on mounted",
+      this.value,
+      "this.optionsSelected",
+      this.optionsSelected
+    );
+    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.4rem;
+  padding-bottom: 0.4rem;
+}
+.vs__selected-options {
+  @apply flex-wrap overflow-hidden;
+}
+.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;
+}
+</style>