classcard-ui 0.2.1520 → 0.2.1521

package/package.json

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

package/src/components/CCalendar/CCalendar.vue

@@ -115,25 +115,37 @@
                 >
                   <span
                     v-for="(dot, i) in getDayGlyphs(date).dots"
-                    :key="dot + '-' + i"
+                    :key="dot.status + '-' + i"
                     class="flex"
                   >
                     <c-icon
-                      v-if="dot === 'cancelled'"
+                      v-if="dot.status === 'cancelled'"
                       name="x-mark-solid-v2"
                       type="solid"
                       viewBox="0 0 24 24"
                       class="h-3 w-3 text-red-600"
                       cursor-type="cursor-pointer"
                     ></c-icon>
+                    <c-icon
+                      v-else-if="dot.status === 'awaiting'"
+                      name="clock-outline"
+                      type="outline"
+                      class="h-3 w-3 text-yellow-600"
+                      cursor-type="cursor-pointer"
+                    ></c-icon>
                     <span
                       v-else
                       class="block h-2 w-2 rounded-full"
                       :class="{
-                        'bg-green-600': dot === 'confirmed',
-                        'border-2 border-yellow-600': dot === 'awaiting',
-                        'bg-gray-400': dot === 'unknown',
+                        'bg-green-600':
+                          dot.status === 'confirmed' && !dot.color,
+                        'bg-gray-400': dot.status === 'unknown',
                       }"
+                      :style="
+                        dot.status === 'confirmed' && dot.color
+                          ? { backgroundColor: dot.color }
+                          : null
+                      "
                     ></span>
                   </span>
                   <span
@@ -146,28 +158,6 @@
             </div>
           </div>
         </div>
-
-        <div class="flex items-center justify-center gap-x-5 gap-y-1 py-3">
-          <div class="flex items-center gap-1.5">
-            <span class="block h-2 w-2 rounded-full bg-green-600"></span>
-            <p class="text-sm text-gray-500">Confirmed</p>
-          </div>
-          <div class="flex items-center gap-1.5">
-            <span
-              class="block h-2 w-2 rounded-full border-2 border-yellow-600"
-            ></span>
-            <p class="text-sm text-gray-500">Awaiting</p>
-          </div>
-          <div class="flex items-center gap-1.5">
-            <c-icon
-              name="x-mark-solid-v2"
-              type="solid"
-              viewBox="0 0 24 24"
-              class="h-4 w-4 text-red-600"
-            ></c-icon>
-            <p class="text-sm text-gray-500">Cancelled</p>
-          </div>
-        </div>
       </div>
       <slot name="customCardsRender"></slot>
       <section
@@ -200,7 +190,10 @@
             @click="handleEventClick(event)"
           >
             <div class="flex items-start justify-between gap-2">
-              <div class="text-sm text-gray-900">
+              <div
+                class="text-sm text-gray-900"
+                :class="event.status === 7 ? 'line-through' : ''"
+              >
                 {{ formatTimeFromDate(event.start) }} -
                 {{ formatTimeFromDate(event.end) }}
               </div>
@@ -479,8 +472,12 @@ export default {
         );
         if (!dayEvents.length) return null;
         let sorted = dayEvents
-          .map((event) => this.eventStatus(event))
-          .sort((a, b) => rank[a] - rank[b]);
+          .map((event) => ({
+            status: this.eventStatus(event),
+            // Confirmed dots take the subject category color of the class.
+            color: event.color,
+          }))
+          .sort((a, b) => rank[a.status] - rank[b.status]);
         return {
           dots: sorted.slice(0, sorted.length > 2 ? 1 : 2),
           extra: sorted.length > 2 ? sorted.length - 1 : 0,
@@ -495,7 +492,7 @@ export default {
       if (!entry || !entry.eventsCount) return null;
       let shown = Math.min(entry.eventsCount, 2);
       return {
-        dots: Array(shown).fill("unknown"),
+        dots: Array(shown).fill({ status: "unknown" }),
         extra: entry.eventsCount - shown,
       };
     },

package/src/stories/CCalendar.stories.js

@@ -24,10 +24,11 @@ const statusFields = {
   cancelled: { status: 7, isConfirmed: 1 },
 };
 const colors = {
-  confirmed: "#047857",
   awaiting: "#1D4ED8",
   cancelled: "#DC2626",
 };
+// Confirmed dots are tinted with the class's subject category color.
+const categoryColors = ["#7C3AED", "#EA580C", "#0D9488", "#DB2777", "#4F46E5"];
 
 // day-of-month -> ordered list of class statuses for that day
 const spec = {
@@ -46,7 +47,10 @@ const eventsData = Object.entries(spec).flatMap(([d, list]) =>
     start: at(+d, 9 + i),
     end: at(+d, 10 + i),
     title: `${st[0].toUpperCase() + st.slice(1)} class`,
-    color: colors[st],
+    color:
+      st === "confirmed"
+        ? categoryColors[id % categoryColors.length]
+        : colors[st],
     duration: 60,
     subject: "Intermediate Course",
     staff: "Jyoti Karna",