classcard-ui 0.2.533 → 0.2.536

package/package.json

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

package/src/components/CCalendar/CCalendar.vue

@@ -135,6 +135,7 @@
             class="cursor-pointer rounded border border-gray-100 bg-white py-2 px-4 shadow focus-within:shadow-md hover:shadow-md"
             v-for="event in getEventsForDate(value)"
             :key="event.id"
+            @click="handleEventClick(event)"
           >
             <div class="text-sm text-gray-900">
               {{ formatTimeFromDate(event.start) }} -
@@ -147,7 +148,7 @@
               {{ event.title }} ({{ event.booked }}/{{ event.seats }})
             </div>
             <div class="-m-0.5 flex flex-wrap items-center">
-              <div class="m-0.5 flex items-center space-x-1">
+              <div class="m-0.5 flex items-center space-x-0.5">
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
                   class="h-4 w-4 text-gray-400"
@@ -162,13 +163,13 @@
                     d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
                   />
                 </svg>
-                <span class="mt-0.5 text-sm text-gray-500"
+                <span class="text-sm text-gray-500"
                   >{{ event.duration }} mins</span
                 >
               </div>
               <div
                 v-if="event.subject && event.subject.length"
-                class="m-0.5 flex items-center space-x-1"
+                class="m-0.5 flex items-center space-x-0.5"
               >
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
@@ -184,13 +185,11 @@
                     d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"
                   />
                 </svg>
-                <span class="mt-0.5 text-sm text-gray-500">{{
-                  event.subject
-                }}</span>
+                <span class="text-sm text-gray-500">{{ event.subject }}</span>
               </div>
               <div
                 v-if="event.location && event.location.length"
-                class="m-0.5 flex items-center space-x-1"
+                class="m-0.5 flex items-center space-x-0.5"
               >
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
@@ -206,13 +205,11 @@
                     d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"
                   />
                 </svg>
-                <span class="mt-0.5 text-sm text-gray-500">{{
-                  event.location
-                }}</span>
+                <span class="text-sm text-gray-500">{{ event.location }}</span>
               </div>
               <div
                 v-if="event.staff && event.staff.length"
-                class="m-0.5 flex items-center space-x-1"
+                class="m-0.5 flex items-center space-x-0.5"
               >
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
@@ -228,9 +225,7 @@
                     d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
                   />
                 </svg>
-                <span class="mt-0.5 text-sm text-gray-500">{{
-                  event.staff
-                }}</span>
+                <span class="text-sm text-gray-500">{{ event.staff }}</span>
               </div>
             </div>
           </li>
@@ -318,6 +313,9 @@ export default {
         dayjs(date).isSame(dayjs(event.start), "day")
       );
     },
+    handleEventClick(event) {
+      this.$emit("event-click", event);
+    },
   },
   computed: {
     currentMonthAndYear() {