classcard-ui 0.2.1466 → 0.2.1468

package/package.json

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

package/src/components/CAlerts/CAlerts.vue

@@ -5,49 +5,66 @@
         ? `bg-${color}-50 border-l-4 border-${color}-400 p-4`
         : `rounded-md bg-${color}-50 p-4`
     "
+    :id="id || undefined"
+    :role="id ? 'region' : undefined"
+    :aria-labelledby="id ? id + '-title' : undefined"
+    :aria-describedby="
+      id && description && type !== 'withAccentBorder'
+        ? id + '-desc'
+        : undefined
+    "
   >
-    <div class="flex">
-      <div class="flex-shrink-0" v-if="icon">
+    <div class="flex gap-2">
+      <div class="flex-shrink-0" v-if="icon" aria-hidden="true">
         <c-icon
           :type="icon.type"
           :name="icon.name"
-          :class="`h-5 w-5 text-${color}-700`"
+          :class="`h-5 w-5 text-${color}-500`"
         ></c-icon>
       </div>
-      <div class="ml-3" v-if="type == 'withAccentBorder'">
-        <p :class="`text-sm text-${color}-700`">
-          <a
-            href="#"
-            :class="`font-medium underline text-${color}-700 hover:text-${color}-600`"
-            :id="id"
+      <div class="flex-1">
+        <template v-if="type == 'withAccentBorder'">
+          <p
+            :id="id ? id + '-title' : undefined"
+            :class="`text-sm text-${color}-700`"
           >
-            {{ linkLabel }}
-          </a>
-          {{ label }}
-        </p>
-      </div>
-      <div v-else class="ml-3">
-        <h3 :class="`text-sm font-medium text-${color}-800 word-break`">
-          {{ label }}
-        </h3>
-        <div
-          :class="`mt-2 text-sm text-${color}-700 max-w-full`"
-          v-if="description"
-        >
-          <p class="whitespace-pre-line break-all">
-            {{ description }}
-          </p>
-        </div>
-        <div class="mt-4" v-if="type == 'withActions'">
-          <div class="-mx-2 -my-1.5 flex">
-            <button
-              :id="id"
-              :class="`bg-${color}-50 rounded-md px-2 py-1.5 text-sm font-medium text-${color}-800 hover:bg-${color}-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-${color}-50 focus:ring-${color}-600`"
+            <a
+              href="#"
+              :class="`font-medium underline text-${color}-700 hover:text-${color}-600`"
             >
-              {{ actions.label }}
-            </button>
+              {{ linkLabel }}
+            </a>
+            {{ label }}
+          </p>
+        </template>
+        <template v-else>
+          <h3
+            :id="id ? id + '-title' : undefined"
+            :class="`text-sm font-medium text-${color}-700 word-break`"
+          >
+            {{ label }}
+          </h3>
+          <div
+            :id="id && description ? id + '-desc' : undefined"
+            :class="`mt-2 text-sm text-${color}-700 max-w-full`"
+            v-if="description"
+          >
+            <p class="whitespace-pre-line break-all">
+              {{ description }}
+            </p>
+          </div>
+          <div class="mt-4" v-if="type == 'withActions'">
+            <div class="-mx-2 -my-1.5 flex">
+              <button
+                type="button"
+                :id="id ? id + '-action' : undefined"
+                :class="`bg-${color}-50 rounded-md px-2 py-1.5 text-sm font-medium text-${color}-800 hover:bg-${color}-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-${color}-50 focus:ring-${color}-600`"
+              >
+                {{ actions.label }}
+              </button>
+            </div>
           </div>
-        </div>
+        </template>
       </div>
     </div>
   </div>

package/src/components/CConfirmActionModal/CConfirmActionModal.vue

@@ -100,13 +100,13 @@
               <c-button
                 v-if="!hideActionOne"
                 id="cancel-button"
-                type="white"
+                :type="actionOneType"
                 :label="actionOneLabel"
                 @action="$emit('action-one')"
               ></c-button>
               <c-button
                 id="confirm-button"
-                type="danger"
+                :type="actionTwoType"
                 :label="actionTwoLabel"
                 :isLoading="loadButton"
                 :disabled="loadButton"
@@ -152,6 +152,14 @@ export default {
       type: String,
       default: "Confirm",
     },
+    actionOneType: {
+      type: String,
+      default: "white",
+    },
+    actionTwoType: {
+      type: String,
+      default: "danger",
+    },
     loadButton: {
       type: Boolean,
       default: false,

package/src/components/CGroupedFilterDropdown/CGroupedFilterDropdown.vue

@@ -76,7 +76,7 @@
           <div
             v-if="activeOptionIndex === index && hasSubOptions(option)"
             :class="`absolute top-0 ${
-              submenuDirection === 'right'
+              effectiveSubmenuDirection === 'right'
                 ? 'left-full ml-2'
                 : 'right-full mr-2'
             } max-h-48 w-56 overflow-auto rounded-md bg-white py-1 shadow-lg ring-1 ring-gray-900 ring-opacity-5`"
@@ -93,7 +93,10 @@
                 selectFilter(sub.isSelected ? 0 : 1, index, subIdx)
               "
             >
-              <c-checkbox :value="sub.isSelected" setMarginLeft="ml-0"></c-checkbox>
+              <c-checkbox
+                :value="sub.isSelected"
+                setMarginLeft="ml-0"
+              ></c-checkbox>
               <p class="text-sm text-gray-700">{{ sub.label }}</p>
             </div>
           </div>
@@ -128,10 +131,6 @@ export default {
       type: String,
       default: "right",
     },
-    filterSelected: {
-      type: Number,
-      default: 0,
-    },
     options: {
       type: Array,
       required: true,
@@ -149,16 +148,29 @@ export default {
       submenuCloseTimeout: null,
       subMenuLocked: false,
       displayTooltip: false,
+      internalSubmenuDirection: null,
     };
   },
+  computed: {
+    filterSelected() {
+      return this.options.filter((option) => option.selected).length;
+    },
+    effectiveSubmenuDirection() {
+      return this.internalSubmenuDirection || this.submenuDirection;
+    },
+  },
   methods: {
     showTooltip(value) {
       this.displayTooltip = value;
     },
     handleToggleDropdown() {
       this.toggleDropdown = !this.toggleDropdown;
-      if (this.toggleDropdown) this.updateEventListeners();
-      else document.removeEventListener("click", this.handleClickOutside);
+      if (this.toggleDropdown) {
+        this.updateEventListeners();
+      } else {
+        document.removeEventListener("click", this.handleClickOutside);
+        this.internalSubmenuDirection = null;
+      }
     },
     closeSubmenuWithDelay() {
       if (!this.subMenuLocked) {
@@ -172,7 +184,7 @@ export default {
       try {
         const rootEl = this.$refs.dropdownRoot;
         if (!rootEl) {
-          this.submenuDirection = "right";
+          this.internalSubmenuDirection = null;
           return;
         }
         const rect = rootEl.getBoundingClientRect();
@@ -180,9 +192,10 @@ export default {
           window.innerWidth || document.documentElement.clientWidth;
         const rightSpace = viewportWidth - rect.right;
         const submenuWidthPx = 224 + 8;
-        this.submenuDirection = rightSpace < submenuWidthPx ? "left" : "right";
+        this.internalSubmenuDirection =
+          rightSpace < submenuWidthPx ? "left" : "right";
       } catch (e) {
-        this.submenuDirection = "right";
+        this.internalSubmenuDirection = null;
       }
     },
     handleMainOptionMouseEnter(option, index) {
@@ -220,10 +233,6 @@ export default {
       } else {
         this.options[index].selected--;
       }
-      this.filterSelected = this.options.reduce(
-        (acc, option) => (option.selected ? acc + 1 : acc),
-        0
-      );
       this.$emit(
         "filter-changed",
         this.options[index].options[subIdx].isSelected,
@@ -239,6 +248,7 @@ export default {
         this.activeOptionIndex = null;
         this.subMenuLocked = false;
         this.toggleDropdown = false;
+        this.internalSubmenuDirection = null;
         document.removeEventListener("click", this.handleClickOutside);
       }
     },

package/src/stories/CAlerts.stories.js

@@ -11,7 +11,8 @@ export default {
     linkLabel: String,
     icon: { control: { type: "object" } },
     actions: { control: { type: "object" } },
-    type: {control: { type: 'select', options: ['withActions', 'withAccentBorder']}}
+    type: {control: { type: 'select', options: ['withActions', 'withAccentBorder']}},
+    id: String,
   },
 };
 
@@ -34,4 +35,5 @@ Default.args = {
     actions:{
       label: 'Update'
     },
+    id: 'c-alert',
 };

package/src/stories/CConfirmActionModal.stories.js

@@ -53,6 +53,8 @@ Default.args = {
   message: "This action cannot be undone.",
   actionOneLabel: "Cancel",
   actionTwoLabel: "Confirm",
+  actionOneType: "white",
+  actionTwoType: "danger",
   loadButton: false,
   isTextAreaEnabled: false,
 };