classcard-ui 0.2.501 → 0.2.504

package/src/components/CButtonWithDropdown/CButtonWithDropdown.vue

@@ -1,168 +1,168 @@
-<template>
-  <div>
-    <span class="relative inline-flex shadow-sm rounded-md">
-      <button
-        :class="classes"
-        :type="type"
-        @click="handleButtonClick"
-        class="
-          relative
-          inline-flex
-          items-center
-          px-4
-          py-2
-          rounded-l-md
-          text-sm
-          font-medium
-          focus:z-10
-          focus:outline-none
-          focus:ring-1
-        "
-      >
-        {{ selectedValue ? selectedValue : label }}
-      </button>
-      <span class="-ml-px relative block">
-        <button
-          @click="toggleDropdown = !toggleDropdown"
-          @blur="close()"
-          :type="type"
-          :class="classes"
-          class="
-            relative
-            inline-flex
-            items-center
-            px-2
-            py-2
-            rounded-r-md
-            text-sm
-            font-medium
-            t
-            focus:z-10
-            focus:outline-none
-            focus:ring-1
-          "
-        >
-          <span class="sr-only">Open options</span>
-          <c-icon name="chevron-down" type="solid" class="h-5 w-5"></c-icon>
-        </button>
-        <div
-          v-if="toggleDropdown"
-          :class="dropdownPositionClass"
-          class="
-            origin-top-right
-            absolute
-            right-0
-            z-10
-            mt-2
-            w-56
-            rounded-md
-            shadow-lg
-            bg-white
-            ring-1 ring-gray-900 ring-opacity-5
-          "
-        >
-          <div
-            class="py-1"
-            role="menu"
-            aria-orientation="vertical"
-            aria-labelledby="option-menu"
-          >
-            <li
-              v-for="item in items"
-              v-bind:key="item.items"
-              @mousedown="selectOption($event, item.value)"
-              class="
-                block
-                px-4
-                py-2
-                text-sm text-left text-gray-700
-                hover:bg-gray-100
-                hover:text-gray-900
-                cursor-pointer
-              "
-              role="menuitem"
-            >
-              {{ item.text }}
-            </li>
-          </div>
-        </div>
-      </span>
-    </span>
-  </div>
-</template>
-
-<script>
-import CIcon from "../CIcon/CIcon.vue";
-export default {
-  name: "CButtonWithDropdown",
-  components: { CIcon },
-  props: {
-    label: {
-      type: String,
-      required: true,
-    },
-    type: {
-      type: String,
-      default: "secondary",
-    },
-    value: {
-      type: String,
-    },
-    items: {
-      type: Array,
-      required: true,
-    },
-    dropdownPositionClass: {
-      type: String,
-    },
-  },
-  data() {
-    return {
-      toggleDropdown: false,
-      isSelected: false,
-      selectedValue: this.value,
-    };
-  },
-
-  computed: {
-    classes() {
-      return {
-        "border text-white hover:bg-indigo-800 bg-indigo-700 focus:ring-indigo-600":
-          this.type == "primary",
-        "border text-gray-700 border-gray-300 hover:bg-gray-50 focus:ring-indigo-600":
-          this.type == "secondary",
-        "border text-white hover:bg-green-800 bg-green-700 focus:ring-green-600":
-          this.type == "success",
-        "border text-white hover:bg-red-800 bg-red-700 focus:ring-red-600":
-          this.type == "danger",
-        "border border-green-800 bg-green-100 text-green-800 hover:bg-green-200 focus:ring-green-200":
-          this.type == "light-green",
-        "border border-red-800 bg-red-100 text-red-800 hover:bg-red-200 focus:ring-red-200":
-          this.type == "light-red",
-        "cursor-default pointer-events-none": this.isLoading,
-      };
-    },
-  },
-  methods: {
-    selectOption(event, value) {
-      this.selectedValue = event.target.innerText;
-      this.$emit("onSelectOption", value);
-      this.toggleDropdown = false;
-      this.isSelected = true;
-    },
-    close() {
-      this.toggleDropdown = false;
-    },
-    handleButtonClick() {
-      this.$emit("action", this.selectedValue);
-    },
-  },
-  watch: {
-    value() {
-      this.selectedValue = this.value;
-    },
-  },
-};
-</script>
-
-<style></style>
+<template>
+  <div>
+    <span class="relative inline-flex shadow-sm rounded-md">
+      <button
+        :class="classes"
+        :type="type"
+        @click="handleButtonClick"
+        class="
+          relative
+          inline-flex
+          items-center
+          px-4
+          py-2
+          rounded-l-md
+          text-sm
+          font-medium
+          focus:z-10
+          focus:outline-none
+          focus:ring-1
+        "
+      >
+        {{ selectedValue ? selectedValue : label }}
+      </button>
+      <span class="-ml-px relative block">
+        <button
+          @click="toggleDropdown = !toggleDropdown"
+          @blur="close()"
+          :type="type"
+          :class="classes"
+          class="
+            relative
+            inline-flex
+            items-center
+            px-2
+            py-2
+            rounded-r-md
+            text-sm
+            font-medium
+            t
+            focus:z-10
+            focus:outline-none
+            focus:ring-1
+          "
+        >
+          <span class="sr-only">Open options</span>
+          <c-icon name="chevron-down" type="solid" class="h-5 w-5"></c-icon>
+        </button>
+        <div
+          v-if="toggleDropdown"
+          :class="dropdownPositionClass"
+          class="
+            origin-top-right
+            absolute
+            right-0
+            z-10
+            mt-2
+            w-56
+            rounded-md
+            shadow-lg
+            bg-white
+            ring-1 ring-gray-900 ring-opacity-5
+          "
+        >
+          <div
+            class="py-1"
+            role="menu"
+            aria-orientation="vertical"
+            aria-labelledby="option-menu"
+          >
+            <li
+              v-for="item in items"
+              v-bind:key="item.items"
+              @mousedown="selectOption($event, item.value)"
+              class="
+                block
+                px-4
+                py-2
+                text-sm text-left text-gray-700
+                hover:bg-gray-100
+                hover:text-gray-900
+                cursor-pointer
+              "
+              role="menuitem"
+            >
+              {{ item.text }}
+            </li>
+          </div>
+        </div>
+      </span>
+    </span>
+  </div>
+</template>
+
+<script>
+import CIcon from "../CIcon/CIcon.vue";
+export default {
+  name: "CButtonWithDropdown",
+  components: { CIcon },
+  props: {
+    label: {
+      type: String,
+      required: true,
+    },
+    type: {
+      type: String,
+      default: "secondary",
+    },
+    value: {
+      type: String,
+    },
+    items: {
+      type: Array,
+      required: true,
+    },
+    dropdownPositionClass: {
+      type: String,
+    },
+  },
+  data() {
+    return {
+      toggleDropdown: false,
+      isSelected: false,
+      selectedValue: this.value,
+    };
+  },
+
+  computed: {
+    classes() {
+      return {
+        "border text-white hover:bg-indigo-800 bg-indigo-700 focus:ring-indigo-600":
+          this.type == "primary",
+        "border text-gray-700 border-gray-300 hover:bg-gray-50 focus:ring-indigo-600":
+          this.type == "secondary",
+        "border text-white hover:bg-green-800 bg-green-700 focus:ring-green-600":
+          this.type == "success",
+        "border text-white hover:bg-red-800 bg-red-700 focus:ring-red-600":
+          this.type == "danger",
+        "border border-green-800 bg-green-100 text-green-800 hover:bg-green-200 focus:ring-green-200":
+          this.type == "light-green",
+        "border border-red-800 bg-red-100 text-red-800 hover:bg-red-200 focus:ring-red-200":
+          this.type == "light-red",
+        "cursor-default pointer-events-none": this.isLoading,
+      };
+    },
+  },
+  methods: {
+    selectOption(event, value) {
+      this.selectedValue = event.target.innerText;
+      this.$emit("onSelectOption", value);
+      this.toggleDropdown = false;
+      this.isSelected = true;
+    },
+    close() {
+      this.toggleDropdown = false;
+    },
+    handleButtonClick() {
+      this.$emit("action", this.selectedValue);
+    },
+  },
+  watch: {
+    value() {
+      this.selectedValue = this.value;
+    },
+  },
+};
+</script>
+
+<style></style>

package/src/components/CButtonWithDropdown/index.js

@@ -1,3 +1,3 @@
-import CButtonWithDropdown from './CButtonWithDropdown.vue'
-
+import CButtonWithDropdown from './CButtonWithDropdown.vue'
+
 export default CButtonWithDropdown

package/src/components/CCalendar/CCalendar.vue

@@ -0,0 +1,287 @@
+<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="eventsArray" class="sr-only">0 events</span>
+            <span
+              v-if="eventsArray"
+              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 class="mt-12">
+      <h2 class="font-semibold text-gray-900">
+        Schedule for <time datetime="2022-01-21">January 21, 2022</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,
+    },
+    eventsArray: {
+      type: Array,
+      default: () => null,
+    },
+  },
+  data() {
+    return {
+      activeDate: dayjs(),
+    };
+  },
+  methods: {
+    handlePreviousMonthClick() {
+      this.activeDate = this.activeDate.subtract(1, "month");
+    },
+    handleNextMonthClick() {
+      this.activeDate = this.activeDate.add(1, "month");
+    },
+    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");
+    },
+  },
+  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;
+    },
+  },
+  mounted() {
+    if (this.value) {
+      this.activeDate = dayjs(this.value);
+    }
+  },
+};
+</script>
+
+<style></style>

package/src/components/CCalendar/index.js

@@ -0,0 +1,3 @@
+import CCalendar from "./CCalendar.vue";
+
+export default CCalendar;