classcard-ui 0.2.1474 → 0.2.1476

package/src/components/CSelect/CSelect.vue

@@ -317,7 +317,7 @@
                   option.isDisabled ? 'custom-disabled-state' : ''
                 } ${optionClasses}  relative cursor-pointer select-none text-gray-700 hover:bg-gray-100`"
               >
-                <div v-if="addCheckBox" class="flex h-5 items-center">
+                <div v-if="addCheckBox" class="flex h-5 shrink-0 items-center">
                   <input
                     type="checkbox"
                     name="group"
@@ -325,8 +325,8 @@
                     :checked="isChecked(option)"
                   />
                 </div>
-                <div class="flex items-center gap-2">
-                  <div v-if="option.showImage" class="flex-shrink-0">
+                <div class="flex min-w-0 flex-1 items-start gap-2">
+                  <div v-if="option.showImage" class="shrink-0 pt-0.5">
                     <c-avatar
                       v-if="option.photo"
                       size="extraextraextrasmall"
@@ -342,7 +342,7 @@
                     ></c-avatar>
                   </div>
                   <div
-                    class="flex items-center justify-center rounded-full bg-gray-100 p-1"
+                    class="flex shrink-0 items-center justify-center rounded-full bg-gray-100 p-1"
                     v-if="option.showIcon && option.icon"
                   >
                     <c-icon
@@ -358,7 +358,7 @@
                       option.photo || option.initials ? '' : 'text-left',
                       addCheckBox ? 'overflow-hidden' : '',
                     ]"
-                    class="list-options block break-words font-normal"
+                    class="list-options min-w-0 flex-1 break-words font-normal"
                     v-bind:style="{
                       ...(shouldShowCustomFonts
                         ? { fontFamily: option[renderOptionName] }
@@ -367,6 +367,12 @@
                     >{{ option[renderOptionName] }}
                   </span>
                 </div>
+                <c-icon
+                  v-if="!addCheckBox && isOptionSelected(option)"
+                  name="check-outline-v2"
+                  type="outline-v2"
+                  class="h-4 w-4 shrink-0 self-center text-indigo-700"
+                />
               </span>
             </li>
             <hr
@@ -393,7 +399,7 @@
                   option.isDisabled ? 'custom-disabled-state' : ''
                 } ${optionClasses}  relative cursor-pointer select-none text-gray-700 hover:bg-gray-100`"
               >
-                <div v-if="addCheckBox" class="flex h-5 items-center">
+                <div v-if="addCheckBox" class="flex h-5 shrink-0 items-center">
                   <input
                     type="checkbox"
                     name="value"
@@ -401,8 +407,8 @@
                     :checked="preservedOrder ? isChecked(option) : true"
                   />
                 </div>
-                <div class="flex items-center gap-2">
-                  <div v-if="option.showImage" class="flex-shrink-0">
+                <div class="flex min-w-0 flex-1 items-start gap-2">
+                  <div v-if="option.showImage" class="shrink-0 pt-0.5">
                     <c-avatar
                       v-if="option.photo"
                       size="extraextraextrasmall"
@@ -418,7 +424,7 @@
                     ></c-avatar>
                   </div>
                   <div
-                    class="flex items-center justify-center rounded-full bg-gray-100 p-1"
+                    class="flex shrink-0 items-center justify-center rounded-full bg-gray-100 p-1"
                     v-if="option.showIcon && option.icon"
                   >
                     <c-icon
@@ -434,7 +440,7 @@
                       option.photo || option.initials ? '' : 'text-left',
                       addCheckBox ? 'overflow-hidden' : '',
                     ]"
-                    class="list-options block break-words font-normal"
+                    class="list-options min-w-0 flex-1 break-words font-normal"
                     v-bind:style="{
                       ...(shouldShowCustomFonts
                         ? { fontFamily: option[renderOptionName] }
@@ -469,7 +475,7 @@
                   option.isDisabled ? 'custom-disabled-state' : ''
                 } ${optionClasses}  relative cursor-pointer select-none text-gray-700 hover:bg-gray-100`"
               >
-                <div v-if="addCheckBox" class="flex h-5 items-center">
+                <div v-if="addCheckBox" class="flex h-5 shrink-0 items-center">
                   <input
                     type="checkbox"
                     name="value"
@@ -477,8 +483,8 @@
                     :checked="selectAll || isChecked(option)"
                   />
                 </div>
-                <div class="flex items-center gap-2">
-                  <div v-if="option.showImage" class="flex-shrink-0">
+                <div class="flex min-w-0 flex-1 items-start gap-2">
+                  <div v-if="option.showImage" class="shrink-0 pt-0.5">
                     <c-avatar
                       v-if="option.photo"
                       size="extraextraextrasmall"
@@ -494,7 +500,7 @@
                     ></c-avatar>
                   </div>
                   <div
-                    class="flex items-center justify-center rounded-full bg-gray-100 p-1"
+                    class="flex shrink-0 items-center justify-center rounded-full bg-gray-100 p-1"
                     v-if="option.showIcon && option.icon"
                   >
                     <c-icon
@@ -505,26 +511,36 @@
                     >
                     </c-icon>
                   </div>
-                  <span
-                    :class="[
-                      option.photo || option.initials ? '' : 'text-left',
-                      addCheckBox ? 'overflow-hidden' : '',
-                    ]"
-                    class="list-options flex items-center gap-2 break-words font-normal"
-                    v-bind:style="{
-                      ...(shouldShowCustomFonts
-                        ? { fontFamily: option[renderOptionName] }
-                        : {}),
-                    }"
-                    >{{ option[renderOptionName] }}
+                  <div
+                    class="list-options flex min-w-0 flex-1 flex-wrap items-center gap-2 font-normal"
+                  >
+                    <span
+                      :class="[
+                        option.photo || option.initials ? '' : 'text-left',
+                        addCheckBox ? 'overflow-hidden' : '',
+                      ]"
+                      class="min-w-0 flex-1 break-words"
+                      v-bind:style="{
+                        ...(shouldShowCustomFonts
+                          ? { fontFamily: option[renderOptionName] }
+                          : {}),
+                      }"
+                      >{{ option[renderOptionName] }}</span
+                    >
                     <c-tag
                       v-if="option.badge"
                       :label="option.badge.label"
                       :color="option.badge.color"
                       class="shrink-0"
                     ></c-tag>
-                  </span>
+                  </div>
                 </div>
+                <c-icon
+                  v-if="!addCheckBox && isOptionSelected(option)"
+                  name="check-outline-v2"
+                  type="outline-v2"
+                  class="h-4 w-4 shrink-0 self-center text-indigo-700"
+                />
               </span>
               <hr v-if="option.isBorder" class="my-1" />
             </li>
@@ -839,7 +855,7 @@ export default {
         if (this.isDisabled) {
           return "text-gray-500";
         }
-        
+
         if (this.type === "indigo") {
           return "text-indigo-600";
         }
@@ -1014,6 +1030,33 @@ export default {
         list.scrollTo({ top: target, behavior: "smooth" });
       }
     },
+    isOptionSelected(option) {
+      /*
+       * Compares value to option by id when both exist,
+       * otherwise by renderOptionName / string value.
+       */
+      if (option == null) {
+        return false;
+      }
+
+      const v = this.value;
+      if (v === null) {
+        return false;
+      }
+
+      if (typeof v === "object" && v !== null) {
+        if (v.id !== undefined && option.id !== undefined) {
+          return v.id === option.id;
+        }
+
+        const vLabel = v[this.renderOptionName];
+        if (vLabel !== undefined && vLabel !== null) {
+          return String(vLabel) === String(option[this.renderOptionName]);
+        }
+      }
+
+      return String(v) === String(option[this.renderOptionName]);
+    },
     getIndex(option) {
       return this.selectedValuesArray.findIndex((item) => item.id == option.id);
     },
@@ -1102,7 +1145,9 @@ export default {
         String((item && item[this.renderOptionName]) || "").toLowerCase();
 
       selectedValues.sort((a, b) => getSortKey(a).localeCompare(getSortKey(b)));
-      unselectedValues.sort((a, b) => getSortKey(a).localeCompare(getSortKey(b)));
+      unselectedValues.sort((a, b) =>
+        getSortKey(a).localeCompare(getSortKey(b))
+      );
 
       return {
         groups,

package/src/icons.js

@@ -827,4 +827,5 @@ export default {
   "wrench-solid-v2": "M19 5.5C19 7.98528 16.9853 10 14.5 10C14.4022 10 14.3051 9.99688 14.2088 9.99073C13.3358 9.93497 12.4014 10.1183 11.8414 10.7903L5.81681 18.0198C5.29925 18.6409 4.53256 19 3.7241 19C2.21962 19 1 17.7804 1 16.2759C1 15.4674 1.3591 14.7008 1.98017 14.1832L9.20974 8.15855C9.88173 7.59855 10.065 6.66418 10.0093 5.79122C10.0031 5.69494 10 5.59783 10 5.5C10 3.01472 12.0147 1 14.5 1C14.9823 1 15.4469 1.07588 15.8825 1.21636C16.2067 1.32092 16.2735 1.72672 16.0327 1.9676L13.3398 4.66042C13.2094 4.79088 13.1582 4.98403 13.2292 5.15431C13.5334 5.88351 14.1172 6.46695 14.8466 6.77074C15.0168 6.84163 15.2098 6.79041 15.3402 6.66002L18.0325 3.96772C18.2734 3.72683 18.6792 3.79367 18.7838 4.11791C18.9242 4.55338 19 5.01783 19 5.5ZM4 17C4.55228 17 5 16.5523 5 16C5 15.4477 4.55228 15 4 15C3.44772 15 3 15.4477 3 16C3 16.5523 3.44772 17 4 17Z",
   "rectangle-stack-solid-v2": "M4.63867 3.88103C4.95292 3.7956 5.28358 3.75 5.62488 3.75H14.3749C14.7162 3.75 15.0468 3.7956 15.3611 3.88103C14.9505 3.06211 14.1033 2.5 13.1249 2.5H6.87488C5.89642 2.5 5.04925 3.06211 4.63867 3.88103Z M1.875 10C1.875 8.61929 2.99429 7.5 4.375 7.5H15.625C17.0057 7.5 18.125 8.61929 18.125 10V15C18.125 16.3807 17.0057 17.5 15.625 17.5H4.375C2.99429 17.5 1.875 16.3807 1.875 15V10Z M4.37488 6.25C4.03358 6.25 3.70292 6.2956 3.38867 6.38103C3.79925 5.56211 4.64642 5 5.62488 5H14.3749C15.3533 5 16.2005 5.56211 16.6111 6.38103C16.2968 6.2956 15.9662 6.25 15.6249 6.25H4.37488Z",
   "face-smile-solid-v2": "M10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18ZM13.5355 13.5355C13.8284 13.2426 13.8284 12.7678 13.5355 12.4749C13.2426 12.182 12.7678 12.182 12.4749 12.4749C11.108 13.8417 8.89196 13.8417 7.52513 12.4749C7.23223 12.182 6.75736 12.182 6.46447 12.4749C6.17157 12.7678 6.17157 13.2426 6.46447 13.5355C8.41709 15.4881 11.5829 15.4881 13.5355 13.5355ZM9 8.5C9 9.32843 8.55228 10 8 10C7.44772 10 7 9.32843 7 8.5C7 7.67157 7.44772 7 8 7C8.55228 7 9 7.67157 9 8.5ZM12 10C12.5523 10 13 9.32843 13 8.5C13 7.67157 12.5523 7 12 7C11.4477 7 11 7.67157 11 8.5C11 9.32843 11.4477 10 12 10Z",
+  "document-check-outline": "M16.875 3.75H9.375C8.33947 3.75 7.5 4.58947 7.5 5.625V34.375C7.5 35.4105 8.33947 36.25 9.375 36.25H30.625C31.6605 36.25 32.5 35.4105 32.5 34.375V19.375M16.875 3.75H17.5C25.7843 3.75 32.5 10.4657 32.5 18.75V19.375M16.875 3.75C19.9816 3.75 22.5 6.2684 22.5 9.375V11.875C22.5 12.9105 23.3395 13.75 24.375 13.75H26.875C29.9816 13.75 32.5 16.2684 32.5 19.375M15 25L18.75 28.75L25 20",
 };