classcard-ui 0.2.1500 → 0.2.1502

package/package.json

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

package/src/components/CAlertModal/CAlertModal.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="z-100 fixed inset-0 overflow-y-auto">
     <div
-      class="flex min-h-screen items-end justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0"
+      class="flex min-h-screen items-end justify-center p-4 text-center sm:block sm:p-0"
       @click="$emit('proceedAddingEvent', false)"
     >
       <transition
@@ -73,13 +73,14 @@
             </div>
           </div>
           <div
-            :class="`mt-4 items-center justify-end gap-4 sm:ml-10 sm:flex ${btnWrapperClass}`"
+            :class="`mt-4 flex flex-col-reverse gap-3 sm:ml-10 sm:flex-row sm:items-center sm:justify-end sm:gap-4 ${btnWrapperClass}`"
           >
             <c-button
               v-if="secondaryButtonText"
               :type="secondaryButtonType"
               :label="secondaryButtonText"
               :id="getActionIDFn(secondaryButtonText)"
+              customClasses="w-full justify-center sm:w-auto"
               @action="$emit('proceedAddingEvent', false)"
             ></c-button>
             <c-button
@@ -87,7 +88,8 @@
               :type="primaryButtonType"
               :label="primaryButtonText"
               :isLoading="primaryButtonLoader"
-              :id="getActionIDFn(secondaryButtonText)"
+              :id="getActionIDFn(primaryButtonText)"
+              customClasses="w-full justify-center sm:w-auto"
               @action="$emit('proceedAddingEvent', true)"
             ></c-button>
           </div>

package/src/components/CConfirmActionModal/CConfirmActionModal.vue

@@ -3,7 +3,7 @@
     <div
       v-scroll-lock="true"
       id="confirm-action-modal"
-      class="fixed inset-0 z-100 overflow-y-auto"
+      class="z-100 fixed inset-0 overflow-y-auto"
     >
       <div
         class="flex min-h-screen items-end justify-center pt-4 pb-20 text-center sm:block sm:p-0 sm:px-4"
@@ -46,17 +46,28 @@
             @click.stop
           >
             <div
-              class="modal-content flex items-center gap-4 overflow-y-auto px-6 pt-6 pb-4"
+              class="modal-content relative flex items-center gap-4 overflow-y-auto px-6 pt-6 pb-4"
             >
-              <div
-                aria-hidden="true"
-                :class="iconContainerClasses"
+              <button
+                v-if="showClose"
+                type="button"
+                class="absolute top-3 right-3 p-2"
+                @click="$emit('close')"
               >
                 <c-icon
-                  name="exclamation-triangle-outline-v2"
-                  type="outline-v2"
+                  name="x-mark-solid-v2"
+                  type="solid"
+                  class="h-6 w-6 text-gray-400"
+                  cursor-type="cursor-pointer"
+                ></c-icon>
+              </button>
+              <div aria-hidden="true" :class="iconContainerClasses">
+                <c-icon
+                  :name="iconName"
+                  :type="iconType"
                   :class="iconClasses"
-                  viewBox="0 0 24 24"
+                  :viewBox="resolvedIconViewBox"
+                  :viewBoxOutline="resolvedIconViewBox"
                 ></c-icon>
               </div>
               <div class="flex-1">
@@ -65,7 +76,12 @@
                   class="text-base font-medium text-gray-900"
                 >
                   {{ title }}
-                  <span v-if="isRequired" class="text-red-600" aria-hidden="true">*</span>
+                  <span
+                    v-if="isRequired"
+                    class="text-red-600"
+                    aria-hidden="true"
+                    >*</span
+                  >
                   <span v-if="isRequired" class="sr-only">(required)</span>
                 </h3>
                 <div class="text-sm text-gray-500">
@@ -123,7 +139,7 @@
 
 <script>
 import CButton from "../CButton";
-import CIcon from '../CIcon/CIcon.vue';
+import CIcon from "../CIcon/CIcon.vue";
 import CTextarea from "../CTextarea";
 
 const COLOR_VARIANT_CLASSES = {
@@ -220,6 +236,21 @@ export default {
       type: String,
       default: "red",
     },
+    iconName: {
+      type: String,
+      default: "exclamation-triangle-outline-v2",
+    },
+    iconType: {
+      type: String,
+      default: "outline-v2",
+    },
+    iconViewBox: {
+      type: String,
+    },
+    showClose: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
     ariaDescribedby() {
@@ -227,8 +258,13 @@ export default {
         ? "modal-message modal-description"
         : "modal-message";
     },
+    resolvedIconViewBox() {
+      return this.iconViewBox || "0 0 24 24";
+    },
     colorVariantClasses() {
-      return COLOR_VARIANT_CLASSES[this.colorVariant] || COLOR_VARIANT_CLASSES.red;
+      return (
+        COLOR_VARIANT_CLASSES[this.colorVariant] || COLOR_VARIANT_CLASSES.red
+      );
     },
     iconContainerClasses() {
       return [
@@ -251,4 +287,4 @@ export default {
 .modal-content {
   max-height: calc(100vh - 200px);
 }
-</style>
+</style>

package/src/components/CMultiselect/CMultiselect.vue

@@ -175,7 +175,7 @@
           <template v-else>
             <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 v-else class="group mt-1 flex h-full w-full items-center">
                 <div @click.stop v-if="addCheckBox" class="flex-shrink-0">
                   <c-checkbox
                     :value="isChecked(option)"
@@ -216,12 +216,19 @@
                     "
                     :name="option.icon.name"
                     :type="option.icon.type"
-                    :class="`mr-2 h-5 w-5 text-gray-400 ${
-                      option.icon.optionIconClass
-                        ? option.icon.optionIconClass
-                        : ''
-                    }`"
-                    cursorType="cursor-pointer"
+                    :class="[
+                      'mr-2 h-5 w-5 text-gray-400',
+                      option.icon.optionIconClass,
+                      option.isDisabled || option.disabled
+                        ? 'opacity-50'
+                        : 'opacity-100',
+                    ]"
+                    :viewBox="option.icon.viewBox || '0 0 20 20'"
+                    :cursorType="
+                      option.isDisabled || option.disabled
+                        ? 'cursor-not-allowed'
+                        : 'cursor-pointer'
+                    "
                   />
                 </p>
                 <div class="w-full">
@@ -283,7 +290,7 @@
               </v-list-subheader>
               <div
                 :class="[
-                  'mt-1 flex h-full w-full',
+                  'group mt-1 flex h-full w-full',
                   option.description ? 'items-start' : 'items-center',
                 ]"
               >
@@ -878,7 +885,7 @@ export default {
           if (animationCycle !== this.chipAnimationCycle) return;
 
           const chipElements = Array.from(
-            vSelectEl.querySelectorAll(".vs__selected"),
+            vSelectEl.querySelectorAll(".vs__selected")
           );
           const chipsToAnimate = chipElements.slice(-insertedCount);
 
@@ -892,7 +899,7 @@ export default {
             void chipEl.offsetWidth;
             chipEl.style.setProperty(
               "--chip-enter-delay",
-              `${index * staggerMs}ms`,
+              `${index * staggerMs}ms`
             );
             chipEl.classList.add("chip-entering");
           });
@@ -1031,7 +1038,7 @@ export default {
       ];
       return selectedItemsArray.some(
         (item) =>
-          item[this.primaryComparisonKey] === option[this.primaryComparisonKey],
+          item[this.primaryComparisonKey] === option[this.primaryComparisonKey]
       )
         ? 1
         : 0;
@@ -1042,7 +1049,7 @@ export default {
           this.value = this.value.filter(
             (item) =>
               item[this.primaryComparisonKey] !==
-              option[this.primaryComparisonKey],
+              option[this.primaryComparisonKey]
           );
         } else {
           this.value = [...this.value, option];
@@ -1058,7 +1065,7 @@ export default {
         this.value = this.value.filter(
           (item) =>
             item[this.primaryComparisonKey] !==
-            this.otherOption[this.primaryComparisonKey],
+            this.otherOption[this.primaryComparisonKey]
         );
       } else {
         this.value = [...this.value, this.otherOption];

package/src/icons.js

@@ -589,6 +589,8 @@ export default {
     "M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003ZM12 8.25a.75.75 0 0 1 .75.75v3.75a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75Zm0 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z",
   "exclamation-triangle-outline-v2":
     "M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z",
+  "question-mark-circle-outline-v2":
+    "M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z",
   "chain-link":
     "M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244",
   "invoice-unlink":