classcard-ui 0.2.508 → 0.2.511

package/package.json

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

package/src/components/CCalendar/CCalendar.vue

@@ -90,9 +90,11 @@
               }"
               >{{ getDayFromDate(date) }}</time
             >
-            <span v-if="eventsArray" class="sr-only">0 events</span>
+            <span v-if="eventsCount" class="sr-only"
+              >{{ getEventsCountForDate(date) }} events</span
+            >
             <span
-              v-if="eventsArray"
+              v-if="eventsCount"
               class="-mx-0.5 mt-auto flex flex-wrap-reverse"
             >
               <span
@@ -103,9 +105,12 @@
         </div>
       </div>
     </div>
-    <section class="mt-12">
+    <section v-if="eventData" class="mt-12">
       <h2 class="font-semibold text-gray-900">
-        Schedule for <time datetime="2022-01-21">January 21, 2022</time>
+        Schedule for
+        <time :datetime="selectedDateForDateTime">{{
+          formattedSelectedDate
+        }}</time>
       </h2>
       <ol class="mt-4 space-y-1 text-sm leading-6 text-gray-500">
         <li
@@ -210,7 +215,11 @@ export default {
       type: [String, Date],
       default: () => null,
     },
-    eventsArray: {
+    eventsCount: {
+      type: Array,
+      default: () => null,
+    },
+    eventsData: {
       type: Array,
       default: () => null,
     },
@@ -245,6 +254,16 @@ export default {
     formatForDateTime(date) {
       return dayjs(date).format("YYYY-MM-DD");
     },
+    getEventsCountForDate(date) {
+      let eventsCountObj = this.eventsCount.find((event) =>
+        dayjs(date).isSame(dayjs(event.date))
+      );
+      if (eventsCountObj) {
+        return eventsCountObj.eventsCount;
+      } else {
+        return 0;
+      }
+    },
   },
   computed: {
     currentMonthAndYear() {
@@ -275,6 +294,12 @@ export default {
       }
       return dates;
     },
+    formattedSelectedDate() {
+      return dayjs(this.value ?? dayjs()).format("MMMM D, YYYY");
+    },
+    selectedDateForDateTime() {
+      return dayjs(this.value ?? dayjs()).format("YYYY-MM-DD");
+    },
   },
   mounted() {
     if (this.value) {

package/src/components/CSelect/CSelect.vue

@@ -31,24 +31,20 @@
 
       <div class="pointer-events-none absolute top-2 left-3 flex">
         <span class="flex items-center" :style="selectedOptionStyles">
-          <c-avatar
-            v-if="showImage && !selectSearch && value && value.photo"
-            size="extraextrasmall"
-            :image="value.photo"
-            :rounded="true"
-          ></c-avatar>
-          <c-avatar
-            v-if="
-              showImage &&
-              !selectSearch &&
-              value &&
-              value.initials &&
-              value.type !== location
-            "
-            size="extraextrasmall"
-            :nameInitials="value.initials"
-            :rounded="true"
-          ></c-avatar>
+          <div v-if="showImage && !selectSearch && value">
+            <c-avatar
+              v-if="value.photo"
+              size="extraextrasmall"
+              :image="value.photo"
+              :rounded="true"
+            ></c-avatar>
+            <c-avatar
+              v-else
+              size="extraextrasmall"
+              :nameInitials="value.initials"
+              :rounded="true"
+            ></c-avatar>
+          </div>
           <c-icon
             v-if="icon && !showImage"
             :class="icon.class"
@@ -115,31 +111,29 @@
               :class="option.isDisabled ? 'pointer-events-none opacity-50' : ''"
             >
               <span class="flex items-center">
-                <c-avatar
-                  v-if="showImage && option.photo"
-                  size="extraextrasmall"
-                  :image="option.photo"
-                  :rounded="true"
-                ></c-avatar>
-                <c-avatar
-                  v-if="
-                    showImage && option.initials && option.type !== location
-                  "
-                  size="extraextrasmall"
-                  :nameInitials="option.initials"
-                  :rounded="true"
-                ></c-avatar>
+                <div v-if="option.showImage">
+                  <c-avatar
+                    v-if="option.photo"
+                    size="extraextrasmall"
+                    :image="option.photo"
+                    :rounded="true"
+                  ></c-avatar>
+                  <c-avatar
+                    v-else
+                    size="extraextrasmall"
+                    :nameInitials="option.initials"
+                    :rounded="true"
+                  ></c-avatar>
+                </div>
                 <c-icon
-                  v-if="icon && !showImage"
-                  :class="icon.class"
-                  :name="icon.name"
-                  :type="icon.type"
+                  v-if="option.showIcon && option.icon"
+                  :class="option.icon.class"
+                  :name="option.icon.name"
+                  :type="option.icon.type"
                 >
                 </c-icon>
                 <span
-                  :class="
-                    (showImage && option.photo) || option.initials ? 'ml-3' : ''
-                  "
+                  :class="option.photo || option.initials ? 'ml-3' : ''"
                   class="list-options block break-words font-normal"
                   >{{ option[renderOptionName] }}
                 </span>