classcard-ui 0.2.1474 → 0.2.1476

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "classcard-ui",
-  "version": "0.2.1474",
+  "version": "0.2.1476",
   "main": "dist/classcard-ui.umd.min.js",
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/components/CMultiselect/CMultiselect.vue

@@ -14,7 +14,10 @@
     <div class="relative">
       <v-select
         ref="vselect"
-        class="disabled:custom-disabled-state absolute inline-block h-full w-full text-sm"
+        :class="[
+          'disabled:custom-disabled-state absolute inline-block h-full w-full text-sm',
+          isMultiple ? 'c-multiselect--capped-pills' : '',
+        ]"
         :placeholder="placeholder"
         :multiple="isMultiple"
         :taggable="isTaggable"
@@ -62,48 +65,76 @@
             />
           </span>
         </template>
-        <template #selected-option="option">
-          <div v-if="!option.header" :class="['flex items-center gap-2', isDisabled ? 'text-gray-500' : '']">
-            <c-icon
-              v-if="option.icon"
-              :name="option.icon.name"
-              :type="option.icon.type"
-              :class="[
-                'h-4 w-4 flex-shrink-0 text-gray-400',
-                option.icon.optionIconClass,
-              ]"
-            />
-            <c-avatar
-              v-if="option.image && displaySelectedOptionAvatar"
-              :size="
-                option.description && showAdditionalText
-                  ? 'extrasmall'
-                  : 'extraextrasmall'
-              "
-              :image="option.image"
-              :rounded="true"
-              :description="option.description"
-              class="mr-2"
-            ></c-avatar>
-            <c-avatar
-              v-else-if="option.initials && displaySelectedOptionAvatar"
-              size="extraextrasmall"
-              :nameInitials="option.initials"
-              :description="option.description"
-              :rounded="true"
-              :isDynamicallyColored="true"
-              class="mr-2"
-            ></c-avatar>
-            <span>{{
-              selectedOptionLabel && option[selectedOptionLabel]
-                ? option[selectedOptionLabel]
-                : optionLabelSecondary && option[optionLabelSecondary]
-                ? option[optionLabelSecondary]
-                : optionLabel && option[optionLabel]
-                ? option[optionLabel]
-                : ""
-            }}</span>
-          </div>
+        <template
+          #selected-option-container="{ option, deselect, multiple, disabled }"
+        >
+          <template v-for="row in [getPillRow(option)]">
+            <div
+              v-if="row && row.showPill"
+              :key="row.slotKey"
+              class="vs__selected vs__selected--capped inline-flex items-center gap-1.5"
+            >
+              <p
+                v-if="!option.header"
+                :class="[
+                  'vs__selected-inner inline-flex min-w-0 max-w-[120px] items-center gap-1.5 rounded bg-gray-100 px-2 py-1 text-gray-800',
+                  isDisabled ? 'text-gray-500' : '',
+                ]"
+              >
+                <c-icon
+                  v-if="option.icon"
+                  :name="option.icon.name"
+                  :type="option.icon.type"
+                  :class="[
+                    'h-4 w-4 flex-shrink-0 text-gray-400',
+                    option.icon.optionIconClass,
+                  ]"
+                />
+                <c-avatar
+                  v-if="option.image && displaySelectedOptionAvatar"
+                  :size="
+                    option.description && showAdditionalText
+                      ? 'extrasmall'
+                      : 'extraextrasmall'
+                  "
+                  :image="option.image"
+                  :rounded="true"
+                  :description="option.description"
+                  class="flex-shrink-0"
+                ></c-avatar>
+                <c-avatar
+                  v-else-if="option.initials && displaySelectedOptionAvatar"
+                  size="extraextrasmall"
+                  :nameInitials="option.initials"
+                  :description="option.description"
+                  :rounded="true"
+                  :isDynamicallyColored="true"
+                  class="flex-shrink-0"
+                ></c-avatar>
+                <span class="min-w-0 flex-1 truncate">{{ row.label }}</span>
+                <button
+                  v-if="multiple"
+                  type="button"
+                  class="flex h-2 w-2 flex-shrink-0 items-center justify-center rounded text-gray-400 focus:outline-none"
+                  :disabled="disabled"
+                  :title="`Deselect ${row.label}`"
+                  :aria-label="`Deselect ${row.label}`"
+                  @click.stop.prevent="deselect(option)"
+                >
+                  <span class="text-base leading-none" aria-hidden="true"
+                    >×</span
+                  >
+                </button>
+              </p>
+              <span
+                v-if="row.showOverflowBadge"
+                class="vs__selected-overflow inline-flex w-max rounded bg-gray-100 px-2 py-1 text-gray-800"
+                aria-live="polite"
+              >
+                +{{ selectedOverflowCount }}
+              </span>
+            </div>
+          </template>
         </template>
         <!-- eslint-disable-next-line vue/no-unused-vars  -->
         <template #no-options="{ search, searching, loading }">
@@ -145,6 +176,12 @@
             <div v-if="!isGrouped">
               <div v-if="option.hasNoData" class="dropdown-menu-bordered"></div>
               <div v-else class="mt-1 flex h-full w-full items-center">
+                <div @click.stop v-if="addCheckBox" class="flex-shrink-0">
+                  <c-checkbox
+                    :value="isChecked(option)"
+                    @onChange="handleSingleSelect(option)"
+                  />
+                </div>
                 <p v-if="showOptionImage" class="flex-shrink-0">
                   <c-avatar
                     v-if="option[imageLabel]"
@@ -210,12 +247,6 @@
                         </span>
                       </div>
                     </div>
-                    <div @click.stop v-if="addCheckBox">
-                      <c-checkbox
-                        :value="isChecked(option)"
-                        @onChange="handleSingleSelect(option)"
-                      />
-                    </div>
                   </div>
                   <p
                     class="text-xs"
@@ -315,9 +346,14 @@
           <li ref="load" class="loader" v-show="hasNextPage">
             Loading more options...
           </li>
+
+          <!-- Footer buttons when footer buttons are visible -->
           <div
-            class="group sticky bottom-0 mt-1 bg-white"
-            :class="showFooterButton && showFooterButton2 ? 'space-y-2' : ''"
+            v-if="showFooterButton || showFooterButton2"
+            :class="[
+              'group sticky bottom-0 mt-1 bg-white',
+              showFooterButton && showFooterButton2 ? 'space-y-2' : '',
+            ]"
           >
             <li
               v-if="showFooterButton"
@@ -372,6 +408,8 @@
               </div>
             </li>
           </div>
+
+          <!-- Create option button when showCreateOption is true and there is a search term -->
           <div
             v-if="
               showCreateOption &&
@@ -379,7 +417,9 @@
               search &&
               search.trim()
             "
-            class="sticky bottom-0 z-10 flex min-h-[44px] items-start gap-3 rounded-b-md bg-white px-3 py-2 shadow-lg ring-1 ring-gray-900 ring-opacity-5"
+            ref="createOption"
+            class="sticky z-10 flex min-h-[44px] items-start gap-3 bg-white px-3 py-2 shadow-lg ring-1 ring-gray-900 ring-opacity-5"
+            :style="footerStickyStyles.create"
           >
             <span class="word-break flex-1 text-sm text-gray-700">{{
               search
@@ -400,9 +440,13 @@
               Create
             </button>
           </div>
+
+          <!-- Other option checkbox when otherOption is true -->
           <div
             v-if="otherOption"
-            class="sticky bottom-0 z-10 border-t border-gray-100 bg-gray-50 px-3 py-2"
+            ref="otherOption"
+            class="sticky z-10 border-t border-gray-100 bg-gray-50 px-3 py-2"
+            :style="footerStickyStyles.other"
           >
             <div class="flex" @mousedown.prevent.stop>
               <c-checkbox
@@ -419,6 +463,20 @@
               </div>
             </div>
           </div>
+
+          <!-- Clear all button when multiple is true and there are selected values -->
+          <button
+            v-if="isMultiple && hasSelectedValues"
+            ref="clearAllButton"
+            type="button"
+            class="sticky z-10 w-full border-t border-gray-200 bg-gray-50 px-4 py-3 text-left text-sm text-gray-500 hover:text-gray-900 focus:outline-none"
+            :style="footerStickyStyles.clear"
+            :id="id + '_clear_all_button'"
+            aria-label="Clear all selections"
+            @mousedown.prevent.stop="handleClearAll"
+          >
+            Clear all
+          </button>
         </template>
       </v-select>
       <button
@@ -436,7 +494,10 @@
       </button>
     </div>
     <p v-if="subLabel" class="mt-2 text-sm text-gray-500">{{ subLabel }}</p>
-    <p v-if="!isValidate && errorMessage" class="mt-2 text-sm text-red-600 text-left">
+    <p
+      v-if="!isValidate && errorMessage"
+      class="mt-2 text-left text-sm text-red-600"
+    >
       {{ errorMessage }}
     </p>
     <p v-if="helpText && isValidate == true" class="mt-2 text-sm text-gray-500">
@@ -450,7 +511,6 @@ 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";
 import { getActionID } from "../../helper";
 import CTag from "../CTag/CTag.vue";
@@ -523,6 +583,11 @@ export default {
     selectedOptionLabel: {
       type: String,
     },
+    // the key to compare the options when addCheckBox is true
+    primaryComparisonKey: {
+      type: String,
+      default: "id",
+    },
     // action to trigger after selecting option from dropdown
     onSelectOptions: {
       type: Function,
@@ -681,6 +746,67 @@ export default {
 
       return !hasExactMatch;
     },
+    /*
+      This function is used to get the remaining count of options that are not shown in the dropdown.
+    */
+    selectedOverflowCount() {
+      if (!this.isMultiple) return 0;
+      const totalSelectedOptions = Array.isArray(this.value)
+        ? this.value.length
+        : 0;
+      return totalSelectedOptions > 2 ? totalSelectedOptions - 2 : 0;
+    },
+    hasSelectedValues() {
+      return Array.isArray(this.value) && this.value.length > 0;
+    },
+    /**
+     * Pre-built pill rows keyed by `value[i]` and by vue-select option key.
+     * Recomputes only when selection / multi / overflow-relevant state changes — not on dropdown hover.
+     * Index comes from `value` order (same order vue-select uses for selected-option-container).
+     */
+    pillRowsBySlotLookup() {
+      if (!Array.isArray(this.value)) {
+        return { byRef: new Map(), byKey: new Map() };
+      }
+      const byRef = new Map();
+      const byKey = new Map();
+      const overflow = this.selectedOverflowCount;
+
+      this.value.forEach((item, index) => {
+        const label = this.getDisplayLabelForOption(item);
+        const key = this.getVueSelectOptionKey(item);
+        const slotKey = `slot-${index}-${String(key)}`;
+        const meta = { index, key, label, slotKey };
+        const showPill = this.isMultiple;
+        const showOverflowBadge =
+          this.isMultiple && index === 1 && overflow > 0;
+        const row = {
+          meta,
+          showPill,
+          showOverflowBadge,
+          label,
+          slotKey,
+        };
+        byRef.set(item, row);
+        if (!byKey.has(key)) {
+          byKey.set(key, row);
+        }
+      });
+      return { byRef, byKey };
+    },
+    /**
+     * Sticky `bottom` offsets so create → other → clear stack without overlap.
+     * DOM order is create (top of sticky group), other, clear (anchored to dropdown bottom).
+     */
+    footerStickyStyles() {
+      const clearH = Number(this.footerMetaData.clearAllHeight) || 0;
+      const otherH = Number(this.footerMetaData.otherOptionHeight) || 0;
+      return {
+        create: { bottom: `${clearH + otherH}px` },
+        other: { bottom: `${clearH}px` },
+        clear: { bottom: "0px" },
+      };
+    },
   },
   data() {
     return {
@@ -690,6 +816,11 @@ export default {
           ? this.optionsSelected
           : [],
       observer: null,
+      footerMetaData: {
+        clearAllHeight: 0,
+        otherOptionHeight: 0,
+        createOptionHeight: 0,
+      },
     };
   },
   methods: {
@@ -702,6 +833,8 @@ export default {
     },
     fetchOptions(search, loaderSearching) {
       this.emitGetOptions(search, loaderSearching);
+
+      this._updateFooterHeights();
     },
     emitGetOptions: debounce(function (search, loaderSearching) {
       this.$emit("getOptions", search.trim(), loaderSearching);
@@ -724,23 +857,93 @@ export default {
       this.emitGetOptions("", true);
     },
     onClose() {
-      this.observer.disconnect();
+      if (this.observer) {
+        this.observer.disconnect();
+      }
     },
     async infiniteScroll([{ isIntersecting }]) {
       if (isIntersecting) {
         this.emitLoadNextPage();
       }
     },
-    getIndex(option) {
-      return this.value.findIndex((item) => item.id == option.id);
+    /*
+      This function is used to create a unique key for the option.
+    */
+    createUniqueKeyForOption(sortable) {
+      const ordered = {};
+      Object.keys(sortable)
+        .sort()
+        .forEach((key) => {
+          ordered[key] = sortable[key];
+        });
+      return JSON.stringify(ordered);
+    },
+    /*
+      This function is used to get the key of the option for the selected pills.
+      Aligns with vue-select default getOptionKey.
+      Reference: https://vue-select.org/api/props.html#getoptionkey
+    */
+    getVueSelectOptionKey(option) {
+      if (typeof option !== "object" || option === null) {
+        return option;
+      }
+      try {
+        return Object.prototype.hasOwnProperty.call(option, "id")
+          ? option.id
+          : this.createUniqueKeyForOption(option);
+      } catch (e) {
+        return String(option);
+      }
+    },
+    getDisplayLabelForOption(option) {
+      if (!option) return "";
+      if (this.selectedOptionLabel && option[this.selectedOptionLabel]) {
+        return option[this.selectedOptionLabel];
+      }
+      if (this.optionLabelSecondary && option[this.optionLabelSecondary]) {
+        return option[this.optionLabelSecondary];
+      }
+      if (this.optionLabel && option[this.optionLabel]) {
+        return option[this.optionLabel];
+      }
+      return "";
+    },
+    /**
+     * Easy lookup for each selected-option slot.
+     */
+    getPillRow(option) {
+      const { byRef, byKey } = this.pillRowsBySlotLookup;
+      if (byRef.has(option)) {
+        return byRef.get(option);
+      }
+      const k = this.getVueSelectOptionKey(option);
+      return byKey.get(k) || null;
+    },
+    handleClearAll() {
+      this.value = [];
+      this.$emit("onSelectOptions", []);
+      this.$nextTick(() => {
+        if (this.$refs.vselect) {
+          this.$refs.vselect.search = "";
+        }
+      });
     },
     isChecked(option) {
-      return this.value.findIndex((item) => item.id == option.id) == -1 ? 0 : 1;
+      return this.value.some(
+        (item) =>
+          item[this.primaryComparisonKey] === option[this.primaryComparisonKey]
+      )
+        ? 1
+        : 0;
     },
     handleSingleSelect(option) {
       if (this.addCheckBox) {
-        if (this.isChecked(option) == 1) {
-          this.value = this.value.filter((item) => item.id != option.id);
+        if (this.isChecked(option) === 1) {
+          this.value = this.value.filter(
+            (item) =>
+              item[this.primaryComparisonKey] !==
+              option[this.primaryComparisonKey]
+          );
         } else {
           this.value = [...this.value, option];
         }
@@ -751,10 +954,12 @@ export default {
       }
     },
     handleOtherOptionChange() {
-      const isSelected = this.isChecked(this.otherOption) == 1;
+      const isSelected = this.isChecked(this.otherOption) === 1;
       if (isSelected) {
         this.value = this.value.filter(
-          (item) => item.id != this.otherOption.id
+          (item) =>
+            item[this.primaryComparisonKey] !==
+            this.otherOption[this.primaryComparisonKey]
         );
       } else {
         this.value = [...this.value, this.otherOption];
@@ -822,6 +1027,19 @@ export default {
         }
       }
     },
+    _updateFooterHeights() {
+      this.$nextTick(() => {
+        const createEl = this.$refs.createOption;
+        const otherEl = this.$refs.otherOption;
+        const clearEl = this.$refs.clearAllButton;
+
+        this.footerMetaData = {
+          createOptionHeight: createEl ? createEl.offsetHeight : 0,
+          otherOptionHeight: otherEl ? otherEl.offsetHeight : 0,
+          clearAllHeight: clearEl ? clearEl.offsetHeight : 0,
+        };
+      });
+    },
   },
   watch: {
     optionsSelected: {
@@ -830,41 +1048,52 @@ export default {
       },
       deep: true,
     },
+    value: {
+      handler() {
+        this._updateFooterHeights();
+      },
+    },
   },
   mounted() {
     this.observer = new IntersectionObserver(this.infiniteScroll);
   },
+  beforeDestroy() {
+    if (this.observer) {
+      this.observer.disconnect();
+      this.observer = null;
+    }
+  },
 };
 </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 min-h-[36px] rounded-md border border-gray-300 bg-white px-3 py-2 text-left shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm;
+  @apply min-h-9 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-left shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm;
 }
+
 .vs__selected-options {
-  flex-wrap: wrap !important;
-  height: auto;
-  max-height: 60px;
-  overflow: hidden;
-  overflow-y: auto;
+  @apply flex items-center gap-1.5 p-0;
 }
+
+.c-multiselect--capped-pills .vs__selected-options {
+  @apply min-w-0 flex-nowrap overflow-hidden;
+}
+
+/* Hide 3rd+ chips if they still mount (key mismatch); keeps one row */
+.c-multiselect--capped-pills
+  .vs__selected-options
+  > .vs__selected:nth-child(n + 3) {
+  display: none !important;
+}
+
 .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 border-none text-gray-700;
-}
+
 .extra:hover {
   color: white;
 }
@@ -912,7 +1141,7 @@ export default {
 }
 
 .vs__dropdown-option--disabled {
-  @apply !text-gray-500 !bg-gray-50 !border-gray-200 shadow-none opacity-100 cursor-not-allowed;
+  @apply cursor-not-allowed !border-gray-200 !bg-gray-50 !text-gray-500 opacity-100 shadow-none;
 }
 
 .vs__dropdown-option--disabled * {
@@ -927,11 +1156,15 @@ export default {
   @apply pointer-events-none opacity-100;
 }
 
-.vs__dropdown-toggle {
-  height: 100%;
-}
-
 .vs__no-options {
   @apply px-4 py-3 text-sm text-gray-500;
 }
+
+.vs__selected {
+  @apply m-0 border-none !bg-transparent !p-0;
+}
+
+.vs__deselect {
+  @apply m-0;
+}
 </style>