classcard-ui 0.2.528 → 0.2.531

package/src/components/CCalendar/CCalendar.vue

@@ -1,320 +1,335 @@
-<template>
-  <!-- This example requires Tailwind CSS v2.0+ -->
-  <div>
-    <div
-      class="relative z-20 flex items-center justify-between border-b border-gray-200 py-4"
-    >
-      <h2 class="flex-auto font-semibold text-gray-900">
-        {{ currentMonthAndYear }}
-      </h2>
-      <button
-        type="button"
-        @click="handlePreviousMonthClick"
-        class="-my-1.5 flex flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500"
-      >
-        <span class="sr-only">Previous month</span>
-        <!-- Heroicon name: solid/chevron-left -->
-        <svg
-          class="h-5 w-5"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 20 20"
-          fill="currentColor"
-          aria-hidden="true"
-        >
-          <path
-            fill-rule="evenodd"
-            d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
-            clip-rule="evenodd"
-          />
-        </svg>
-      </button>
-      <button
-        type="button"
-        @click="handleNextMonthClick"
-        class="-my-1.5 -mr-1.5 ml-2 flex flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500"
-      >
-        <span class="sr-only">Next month</span>
-        <!-- Heroicon name: solid/chevron-right -->
-        <svg
-          class="h-5 w-5"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 20 20"
-          fill="currentColor"
-          aria-hidden="true"
-        >
-          <path
-            fill-rule="evenodd"
-            d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
-            clip-rule="evenodd"
-          />
-        </svg>
-      </button>
-    </div>
-    <div class="shadow ring-1 ring-gray-200">
-      <div
-        class="grid grid-cols-7 gap-px border-b border-gray-300 bg-gray-200 text-center text-xs font-semibold leading-6 text-gray-700"
-      >
-        <div class="bg-white py-2">M<span class="sr-only">on</span></div>
-        <div class="bg-white py-2">T<span class="sr-only">ue</span></div>
-        <div class="bg-white py-2">W<span class="sr-only">ed</span></div>
-        <div class="bg-white py-2">T<span class="sr-only">hu</span></div>
-        <div class="bg-white py-2">F<span class="sr-only">ri</span></div>
-        <div class="bg-white py-2">S<span class="sr-only">at</span></div>
-        <div class="bg-white py-2">S<span class="sr-only">un</span></div>
-      </div>
-      <div class="flex bg-gray-200 text-xs leading-6 text-gray-700">
-        <div class="isolate grid w-full grid-cols-7 grid-rows-6 gap-px">
-          <button
-            v-for="date in daysArray"
-            :key="getDateKey(date)"
-            type="button"
-            :class="{
-              'flex h-14 flex-col py-2 px-3 hover:bg-gray-100 focus:z-10': true,
-              'bg-white': isCurrentMonth(date),
-              'bg-gray-50': !isCurrentMonth(date),
-              'font-semibold': isSelected(date) || isToday(date),
-              'text-white': isSelected(date),
-              'text-indigo-600': !isSelected(date) && isToday(date),
-              'text-gray-900':
-                !isSelected(date) && isCurrentMonth(date) && !isToday(date),
-              'text-gray-500':
-                !isSelected(date) && !isCurrentMonth(date) && !isToday(date),
-            }"
-          >
-            <time
-              :datetime="formatForDateTime(date)"
-              :class="{
-                'ml-auto': true,
-                'bg-indigo-600': isSelected(date) && isToday(date),
-                'bg-gray-900': isSelected(date) && !isToday(date),
-              }"
-              >{{ getDayFromDate(date) }}</time
-            >
-            <span v-if="eventsCount" class="sr-only"
-              >{{ getEventsCountForDate(date) }} events</span
-            >
-            <span
-              v-if="eventsCount && getEventsCountForDate(date) > 0"
-              class="-mx-0.5 mt-auto flex flex-wrap-reverse"
-            >
-              <span
-                class="mx-0.5 mb-1 h-1.5 w-1.5 rounded-full bg-gray-400"
-              ></span>
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-    <section v-if="eventsData" class="mt-12">
-      <h2 class="font-semibold text-gray-900">
-        Schedule for
-        <time :datetime="selectedDateForDateTime">{{
-          formattedSelectedDate
-        }}</time>
-      </h2>
-      <ol class="mt-4 space-y-1 text-sm leading-6 text-gray-500">
-        <li
-          class="group flex items-center space-x-4 rounded-xl py-2 px-4 focus-within:bg-gray-100 hover:bg-gray-100"
-        >
-          <img
-            src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
-            alt=""
-            class="h-10 w-10 flex-none rounded-full"
-          />
-          <div class="flex-auto">
-            <p class="text-gray-900">Leslie Alexander</p>
-            <p class="mt-0.5">
-              <time datetime="2022-01-21T13:00">1:00 PM</time> -
-              <time datetime="2022-01-21T14:30">2:30 PM</time>
-            </p>
-          </div>
-          <div
-            class="relative opacity-0 focus-within:opacity-100 group-hover:opacity-100"
-          >
-            <div>
-              <button
-                type="button"
-                class="-m-2 flex items-center rounded-full p-1.5 text-gray-500 hover:text-gray-600"
-                id="menu-0-button"
-                aria-expanded="false"
-                aria-haspopup="true"
-              >
-                <span class="sr-only">Open options</span>
-                <!-- Heroicon name: outline/dots-vertical -->
-                <svg
-                  class="h-6 w-6"
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke-width="2"
-                  stroke="currentColor"
-                  aria-hidden="true"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
-                  />
-                </svg>
-              </button>
-            </div>
-
-            <!--
-            Dropdown menu, show/hide based on menu state.
-
-            Entering: "transition ease-out duration-100"
-              From: "transform opacity-0 scale-95"
-              To: "transform opacity-100 scale-100"
-            Leaving: "transition ease-in duration-75"
-              From: "transform opacity-100 scale-100"
-              To: "transform opacity-0 scale-95"
-          -->
-            <div
-              class="absolute right-0 z-10 mt-2 w-36 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
-              role="menu"
-              aria-orientation="vertical"
-              aria-labelledby="menu-0-button"
-              tabindex="-1"
-            >
-              <div class="py-1" role="none">
-                <!-- Active: "bg-gray-100 text-gray-900", Not Active: "text-gray-700" -->
-                <a
-                  href="#"
-                  class="block px-4 py-2 text-sm text-gray-700"
-                  role="menuitem"
-                  tabindex="-1"
-                  id="menu-0-item-0"
-                  >Edit</a
-                >
-                <a
-                  href="#"
-                  class="block px-4 py-2 text-sm text-gray-700"
-                  role="menuitem"
-                  tabindex="-1"
-                  id="menu-0-item-1"
-                  >Cancel</a
-                >
-              </div>
-            </div>
-          </div>
-        </li>
-
-        <!-- More meetings... -->
-      </ol>
-    </section>
-  </div>
-</template>
-
-<script>
-import * as dayjs from "dayjs";
-
-export default {
-  name: "CCalendar",
-  props: {
-    value: {
-      type: [String, Date],
-      default: () => null,
-    },
-    eventsCount: {
-      type: Array,
-      default: () => null,
-    },
-    eventsData: {
-      type: Array,
-      default: () => null,
-    },
-  },
-  data() {
-    return {
-      activeDate: dayjs(),
-    };
-  },
-  methods: {
-    handlePreviousMonthClick() {
-      this.activeDate = this.activeDate.subtract(1, "month");
-      this.$emit("prev-month", this.getActiveStartAndEndDates());
-    },
-    handleNextMonthClick() {
-      this.activeDate = this.activeDate.add(1, "month");
-      this.$emit("next-month", this.getActiveStartAndEndDates());
-    },
-    getDayFromDate(date) {
-      return dayjs(date).format("D");
-    },
-    isSelected(date) {
-      return dayjs(date).isSame(this.value, "day");
-    },
-    isToday(date) {
-      return dayjs(date).isSame(dayjs(), "day");
-    },
-    isCurrentMonth(date) {
-      return dayjs(date).isSame(this.activeDate, "month");
-    },
-    getDateKey(date) {
-      return dayjs(date).format();
-    },
-    formatForDateTime(date) {
-      return dayjs(date).format("YYYY-MM-DD");
-    },
-    getEventsCountForDate(date) {
-      let eventsCountObj = this.eventsCount.find((event) =>
-        dayjs(date).isSame(dayjs(event.date), "day")
-      );
-      if (eventsCountObj) {
-        return eventsCountObj.eventsCount;
-      } else {
-        return 0;
-      }
-    },
-    getActiveStartAndEndDates() {
-      return {
-        startDate: this.daysArray[0],
-        endDate: this.daysArray[this.daysArray.length - 1],
-      };
-    },
-  },
-  computed: {
-    currentMonthAndYear() {
-      return dayjs(this.activeDate).format("MMMM YYYY");
-    },
-    daysArray() {
-      let dates = [];
-      let firstDayOfmonth = dayjs(this.activeDate).startOf("month");
-      let lastDayOfmonth = dayjs(this.activeDate).endOf("month");
-      let firstDayOfMonthInWeek = firstDayOfmonth.day();
-      let lastDayOfMonthInWeek = lastDayOfmonth.day();
-      if (firstDayOfMonthInWeek === 0) {
-        firstDayOfMonthInWeek = 7;
-      }
-      if (lastDayOfMonthInWeek === 0) {
-        lastDayOfMonthInWeek = 7;
-      }
-      for (let i = 0; i < firstDayOfMonthInWeek - 1; i++) {
-        dates.unshift(firstDayOfmonth.subtract(i + 1, "day"));
-      }
-      for (let i = 0; i < dayjs(this.activeDate).daysInMonth(); i++) {
-        dates.push(firstDayOfmonth.add(i, "day"));
-      }
-      let cursor = 1;
-      for (let i = lastDayOfMonthInWeek; i < 7; i++) {
-        dates.push(lastDayOfmonth.add(cursor, "day"));
-        cursor++;
-      }
-      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) {
-      this.activeDate = dayjs(this.value);
-    }
-  },
-};
-</script>
-
-<style></style>
+<template>
+  <!-- This example requires Tailwind CSS v2.0+ -->
+  <div>
+    <div class="grid grid-cols-1 md:grid-cols-2 md:gap-8">
+      <div>
+        <div
+          class="relative z-20 flex items-center justify-between border-b border-gray-200 py-4"
+        >
+          <h2 class="flex-auto font-semibold text-gray-900">
+            {{ currentMonthAndYear }}
+          </h2>
+          <button
+            type="button"
+            @click="handlePreviousMonthClick"
+            class="-my-1.5 flex flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500"
+          >
+            <span class="sr-only">Previous month</span>
+            <!-- Heroicon name: solid/chevron-left -->
+            <svg
+              class="h-5 w-5"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+              aria-hidden="true"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
+                clip-rule="evenodd"
+              />
+            </svg>
+          </button>
+          <button
+            type="button"
+            @click="handleNextMonthClick"
+            class="-my-1.5 -mr-1.5 ml-2 flex flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500"
+          >
+            <span class="sr-only">Next month</span>
+            <!-- Heroicon name: solid/chevron-right -->
+            <svg
+              class="h-5 w-5"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+              aria-hidden="true"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                clip-rule="evenodd"
+              />
+            </svg>
+          </button>
+        </div>
+
+        <div class="col-span-1 shadow ring-1 ring-gray-200">
+          <div
+            class="grid grid-cols-7 gap-px border-b border-gray-300 bg-gray-200 text-center text-xs font-semibold leading-6 text-gray-700"
+          >
+            <div class="bg-white py-2">M<span class="sr-only">on</span></div>
+            <div class="bg-white py-2">T<span class="sr-only">ue</span></div>
+            <div class="bg-white py-2">W<span class="sr-only">ed</span></div>
+            <div class="bg-white py-2">T<span class="sr-only">hu</span></div>
+            <div class="bg-white py-2">F<span class="sr-only">ri</span></div>
+            <div class="bg-white py-2">S<span class="sr-only">at</span></div>
+            <div class="bg-white py-2">S<span class="sr-only">un</span></div>
+          </div>
+          <div class="flex bg-gray-200 text-xs leading-6 text-gray-700">
+            <div class="isolate grid w-full grid-cols-7 grid-rows-6 gap-px">
+              <button
+                v-for="date in daysArray"
+                :key="getDateKey(date)"
+                type="button"
+                :class="{
+                  'flex h-14 flex-col py-2 px-3 hover:bg-gray-100 focus:z-10': true,
+                  'bg-white': isCurrentMonth(date),
+                  'bg-gray-50': !isCurrentMonth(date),
+                  'font-semibold': isSelected(date) || isToday(date),
+                  'text-white': isSelected(date),
+                  'text-indigo-600': !isSelected(date) && isToday(date),
+                  'text-gray-900':
+                    !isSelected(date) && isCurrentMonth(date) && !isToday(date),
+                  'text-gray-500':
+                    !isSelected(date) &&
+                    !isCurrentMonth(date) &&
+                    !isToday(date),
+                }"
+                @click="handleDateClick(date)"
+              >
+                <time
+                  :datetime="formatForDateTime(date)"
+                  :class="{
+                    'ml-auto': true,
+                    'flex h-6 w-6 items-center justify-center rounded-full':
+                      isSelected(date),
+                    'bg-indigo-600': isSelected(date) && isToday(date),
+                    'bg-gray-900': isSelected(date) && !isToday(date),
+                  }"
+                  >{{ getDayFromDate(date) }}</time
+                >
+                <span v-if="eventsCount" class="sr-only"
+                  >{{ getEventsCountForDate(date) }} events</span
+                >
+                <span
+                  v-if="eventsCount && getEventsCountForDate(date) > 0"
+                  class="-mx-0.5 mt-auto flex flex-wrap-reverse"
+                >
+                  <span
+                    class="mx-0.5 mb-1 h-1.5 w-1.5 rounded-full bg-gray-400"
+                  ></span>
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <section
+        v-if="eventsData && validSelectedDate"
+        class="col-span-1 mt-8 md:mt-0"
+      >
+        <h2 class="py-4 font-semibold text-gray-900">
+          Schedule for
+          <time :datetime="selectedDateForDateTime">{{
+            formattedSelectedDate
+          }}</time>
+        </h2>
+        <p class="text-center text-sm text-gray-400">
+          Sorry, no events found for this date.
+        </p>
+        <ol v-if="false" class="space-y-3 leading-6">
+          <li
+            class="cursor-pointer rounded border border-gray-100 bg-white py-2 px-4 shadow focus-within:shadow-md hover:shadow-md"
+            v-for="i in 2"
+            :key="i"
+          >
+            <div class="text-sm text-gray-900">12:00pm - 1:00pm</div>
+            <div class="mt-1 text-sm font-semibold text-green-900">
+              Event name (4/24)
+            </div>
+            <div class="-m-1 mt-0 flex flex-wrap items-center">
+              <div class="m-1 flex items-center space-x-1">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="h-4 w-4 text-gray-400"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  stroke-width="2"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+                  />
+                </svg>
+                <span class="text-sm text-gray-500">60 mins</span>
+              </div>
+              <div class="m-1 flex items-center space-x-1">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="h-4 w-4 text-gray-400"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  stroke-width="2"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"
+                  />
+                </svg>
+                <span class="text-sm text-gray-500">Maths - Beginners</span>
+              </div>
+              <div class="m-1 flex items-center space-x-1">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="h-4 w-4 text-gray-400"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  stroke-width="2"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    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="text-sm text-gray-500">JSS School</span>
+              </div>
+              <div class="m-1 flex items-center space-x-1">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="h-4 w-4 text-gray-400"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  stroke-width="2"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    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="text-sm text-gray-500">Jackie</span>
+              </div>
+            </div>
+          </li>
+        </ol>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as dayjs from "dayjs";
+
+export default {
+  name: "CCalendar",
+  props: {
+    value: {
+      type: [String, Date, Object],
+      default: () => null,
+    },
+    eventsCount: {
+      type: Array,
+      default: () => null,
+    },
+    eventsData: {
+      type: Array,
+      default: () => null,
+    },
+  },
+  data() {
+    return {
+      activeDate: dayjs(),
+    };
+  },
+  methods: {
+    handlePreviousMonthClick() {
+      this.activeDate = this.activeDate.subtract(1, "month");
+      this.$emit("prev-month", this.getActiveStartAndEndDates());
+    },
+    handleNextMonthClick() {
+      this.activeDate = this.activeDate.add(1, "month");
+      this.$emit("next-month", this.getActiveStartAndEndDates());
+    },
+    handleDateClick(date) {
+      this.$emit("input", date);
+    },
+    getDayFromDate(date) {
+      return dayjs(date).format("D");
+    },
+    isSelected(date) {
+      return dayjs(date).isSame(this.value, "day");
+    },
+    isToday(date) {
+      return dayjs(date).isSame(dayjs(), "day");
+    },
+    isCurrentMonth(date) {
+      return dayjs(date).isSame(this.activeDate, "month");
+    },
+    getDateKey(date) {
+      return dayjs(date).format();
+    },
+    formatForDateTime(date) {
+      return dayjs(date).format("YYYY-MM-DD");
+    },
+    getEventsCountForDate(date) {
+      let eventsCountObj = this.eventsCount.find((event) =>
+        dayjs(date).isSame(dayjs(event.date), "day")
+      );
+      if (eventsCountObj) {
+        return eventsCountObj.eventsCount;
+      } else {
+        return 0;
+      }
+    },
+    getActiveStartAndEndDates() {
+      return {
+        startDate: this.daysArray[0],
+        endDate: this.daysArray[this.daysArray.length - 1],
+      };
+    },
+  },
+  computed: {
+    currentMonthAndYear() {
+      return dayjs(this.activeDate).format("MMMM YYYY");
+    },
+    daysArray() {
+      let dates = [];
+      let firstDayOfmonth = dayjs(this.activeDate).startOf("month");
+      let lastDayOfmonth = dayjs(this.activeDate).endOf("month");
+      let firstDayOfMonthInWeek = firstDayOfmonth.day();
+      let lastDayOfMonthInWeek = lastDayOfmonth.day();
+      if (firstDayOfMonthInWeek === 0) {
+        firstDayOfMonthInWeek = 7;
+      }
+      if (lastDayOfMonthInWeek === 0) {
+        lastDayOfMonthInWeek = 7;
+      }
+      for (let i = 0; i < firstDayOfMonthInWeek - 1; i++) {
+        dates.unshift(firstDayOfmonth.subtract(i + 1, "day"));
+      }
+      for (let i = 0; i < dayjs(this.activeDate).daysInMonth(); i++) {
+        dates.push(firstDayOfmonth.add(i, "day"));
+      }
+      let cursor = 1;
+      for (let i = lastDayOfMonthInWeek; i < 7; i++) {
+        dates.push(lastDayOfmonth.add(cursor, "day"));
+        cursor++;
+      }
+      return dates;
+    },
+    formattedSelectedDate() {
+      return dayjs(this.value ?? dayjs()).format("MMMM D, YYYY");
+    },
+    selectedDateForDateTime() {
+      return dayjs(this.value ?? dayjs()).format("YYYY-MM-DD");
+    },
+    validSelectedDate() {
+      return this.value && dayjs(this.value).isValid();
+    },
+  },
+  mounted() {
+    if (this.value) {
+      this.activeDate = dayjs(this.value);
+    }
+  },
+};
+</script>
+
+<style></style>