classcard-ui 0.2.671 → 0.2.689

package/src/components/CCard/CCard.vue

@@ -0,0 +1,49 @@
+<template>
+  <div
+    class="relative rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm flex items-center space-x-3 hover:border-gray-400 focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500"
+  >
+    <div class="flex-shrink-0 p-2 rounded-md bg-gray-100">
+      <c-avatar
+        :image="image.image"
+        :rounded="image.rounded"
+        :size="image.size"
+        imageClasses="object-contain"
+      ></c-avatar>
+    </div>
+    <div class="flex-1 min-w-0">
+      <a href="#" class="focus:outline-none">
+        <span class="absolute inset-0" aria-hidden="true"></span>
+        <div class="flex">
+          <p class="text-sm text-gray-900">
+            {{ name }}
+          </p>
+          <slot></slot>
+        </div>
+        <p class="text-sm text-gray-500 truncate">
+          {{ description }}
+        </p>
+      </a>
+    </div>
+  </div>
+</template>
+
+<script>
+import CAvatar from "../CAvatar/CAvatar.vue";
+export default {
+  name: "CCard",
+  components: { CAvatar },
+  props: {
+    image: {
+      type: Object,
+    },
+    name: {
+      type: String,
+    },
+    description: {
+      type: String,
+    },
+  },
+};
+</script>
+
+<style></style>

package/src/components/CCard/index.js

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

package/src/components/CCheckbox/CCheckbox.vue

@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <div class="relative flex items-start">
+      <div class="flex h-5 items-center">
+        <input
+          type="checkbox"
+          v-model="checkedValue"
+          class="h-4 w-4 cursor-pointer rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 disabled:opacity-50"
+          @click="changeValue"
+          :disabled="isDisabled"
+        />
+      </div>
+      <div
+        class="ml-3 cursor-pointer text-sm"
+        :class="isDisabled ? 'pointer-events-none' : ''"
+        @click="changeValue"
+      >
+        <label
+          :class="`cursor-pointer font-medium text-gray-900 ${
+            isDisabled ? 'opacity-50' : ''
+          }`"
+          >{{ label }}</label
+        >
+        <p
+          :class="`mt-0.5 cursor-pointer text-gray-500 ${
+            isDisabled ? 'opacity-50' : ''
+          }`"
+        >
+          {{ description }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "CCheckbox",
+  props: {
+    label: { type: String },
+    description: { type: String },
+    value: [Boolean, Number],
+    isDisabled: {
+      type: Boolean,
+    },
+  },
+  data() {
+    return {
+      checkedValue: this.value == 0 ? false : true,
+    };
+  },
+  methods: {
+    changeValue() {
+      let selectedValue = 0;
+      if (this.checkedValue) {
+        this.checkedValue = false;
+        selectedValue = 0;
+      } else if (!this.checkedValue) {
+        this.checkedValue = true;
+        selectedValue = 1;
+      }
+      this.$emit("onChange", selectedValue);
+    },
+  },
+  watch: {
+    value() {
+      this.checkedValue = this.value;
+    },
+  },
+};
+</script>

package/src/components/CCheckbox/index.js

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

package/src/components/CCollapsibleSection/CCollapsibleSection.vue

@@ -0,0 +1,99 @@
+<template>
+  <div>
+    <div
+      :class="divider || showSection ? 'border-b border-gray-200 pb-2' : ''"
+      class="flex flex-row items-center justify-between cursor-pointer"
+      @click.self="collapse"
+    >
+      <!-- left and right arrow icon as per opening and closing of collapsible -->
+      <div 
+        class="flex flex-row items-center"
+        @click="collapse"
+      >
+        <c-icon
+          :name="showSection ? 'chevron-down' : 'chevron-right'"
+          class="text-gray-900 h-5 w-5"
+          type="solid"
+        ></c-icon>
+        <!-- label of the collapsible section -->
+        <div
+          :class="{ 'py-2': tabAction }"
+          class="border-transparent text-gray-900 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap font-semibold text-base ml-1"
+        >
+          {{ label }}
+        </div>
+      </div>
+      <!-- tertiary button to render on right side of collapsible section -->
+      <c-button
+        v-if="tabAction && showSection"
+        type="tertiary"
+        :label="buttonLabel"
+        @action="action"
+      ></c-button>
+      <!-- anchor tag  to render on right side of collapsible section -->
+      <c-anchor-tag
+        v-if="tabLink && showSection"
+        :label="tabLink.label"
+        :action="action"
+      ></c-anchor-tag>
+    </div>
+    <!-- content to render in collapsible section -->
+    <div class="text-sm text-gray-500 mt-5" v-if="showSection">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import CIcon from "../CIcon/CIcon.vue";
+import CButton from "../CButton/CButton.vue";
+import CAnchorTag from "../CAnchorTag/CAnchorTag.vue";
+export default {
+  name: "CCollapsibleSection",
+  components: { CIcon, CButton, CAnchorTag },
+  props: {
+    // label of section
+    label: {
+      type: String,
+    },
+    // text to render on tertiary button
+    buttonLabel: {
+      type: String,
+    },
+    // whether to show the divider below section heading
+    divider: {
+      type: Boolean,
+    },
+    isCollapsed: {
+      type: Boolean,
+      default: true,
+    },
+    // to render button on right side of section heading
+    tabAction: { type: Boolean },
+    // link to render on right side of section
+    tabLink: { type: Object },
+    // action to emit on click of link/button
+    action: {
+      type: Function,
+    },
+  },
+  data() {
+    return {
+      showSection: this.isCollapsed,
+    };
+  },
+  methods: {
+    collapse() {
+      console.log("collapsing")
+      this.showSection = !this.showSection;
+    },
+  },
+  watch: {
+    isCollapsed() {
+      this.showSection = this.isCollapsed;
+    },
+  },
+};
+</script>
+
+<style></style>

package/src/components/CCollapsibleSection/index.js

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

package/src/components/CColorDots/CColorDots.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="flex items-center">
+    <span class="h-1.5 w-1.5 rounded-full" :class="colorClasses" aria-hidden="true"></span>
+    <div class="ml-2 text-sm font-medium">
+      {{ label }}
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "CColorDots",
+  props: {
+    color: {
+      type: String,
+    },
+    label: {
+      type: String,
+    },
+  },
+  computed: {
+    colorClasses() {
+      return {
+        "bg-gray-500": this.color == "gray",
+        "bg-red-500": this.color == "red",
+        "bg-yellow-500": this.color == "yellow",
+        "bg-green-500": this.color == "green",
+        "bg-blue-500": this.color == "indigo",
+        "bg-purple-500": this.color == "purple",
+        "bg-pink-500": this.color == "pink",
+        "bg-indigo-500": this.color == "indigo",
+      };
+    },
+  },
+};
+</script>

package/src/components/CColorDots/index.js

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

package/src/components/CConfirmActionModal/CConfirmActionModal.vue

@@ -0,0 +1,120 @@
+<template>
+  <focus-trap :active="true" :escapeDeactivates="false">
+    <div v-scroll-lock="true" class="fixed inset-0 z-100 overflow-y-auto">
+      <div
+        class="flex min-h-screen items-end justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0"
+        @click="$emit('close')"
+      >
+        <transition
+          enter-active-class="ease-out duration-300"
+          enter-class="opacity-0"
+          enter-to-class="opacity-100"
+          leave-active-class="ease-in duration-200"
+          leave-class="opacity-100"
+          leave-to-class="opacity-0"
+        >
+          <div class="fixed inset-0 transition-opacity" aria-hidden="true">
+            <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
+          </div>
+        </transition>
+
+        <!-- This element is to trick the browser into centering the modal contents. -->
+        <span class="hidden sm:inline-block sm:h-screen sm:align-middle" aria-hidden="true"
+          >&#8203;</span
+        >
+        <transition
+          enter-active-class="ease-out duration-300"
+          enter-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+          enter-to-class="opacity-100 translate-y-0 sm:scale-100"
+          leave-active-class="ease-in duration-200"
+          leave-class="opacity-100 translate-y-0 sm:scale-100"
+          leave-to-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+        >
+          <div
+            class="inline-block transform overflow-y-visible rounded-lg bg-white text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:align-middle md:max-w-2xl"
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="modal-headline"
+            @click.stop
+          >
+            <div class="bg-white shadow sm:rounded-lg">
+              <div class="px-4 py-5 sm:p-6">
+                <h3 class="text-lg font-medium leading-6 text-gray-900">
+                  {{ title }}
+                </h3>
+                <div class="mt-2 max-w-xl text-sm text-gray-500">
+                  <p>{{ message }}</p>
+                  <p v-if="description" class="mt-1 text-gray-500">{{ description }}</p>
+                </div>
+                <div class="mt-5 flex justify-end space-x-2">
+                  <c-button
+                    @action="$emit('action-one')"
+                    :type="actionOneType"
+                    :label="actionOneLabel"
+                  ></c-button>
+                  <c-button
+                    @action="$emit('action-two')"
+                    :type="actionTwoType"
+                    :label="actionTwoLabel"
+                    :isLoading="loadButton"
+                    :disabled="loadButton"
+                  ></c-button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </transition>
+      </div>
+    </div>
+  </focus-trap>
+</template>
+
+<script>
+import CButton from "../CButton";
+
+export default {
+  name: "CConfirmActionModal",
+  components: {
+    CButton,
+  },
+  props: {
+    title: {
+      type: String,
+      default: "Are you sure?",
+    },
+    message: {
+      type: String,
+      default: "",
+    },
+    description: {
+      type: String,
+    },
+    actionOneLabel: {
+      type: String,
+      default: "Cancel",
+    },
+    actionTwoLabel: {
+      type: String,
+      default: "Ok",
+    },
+    actionOneType: {
+      type: String,
+      default: "secondary-gray",
+    },
+    actionTwoType: {
+      type: String,
+      default: "secondary-gray",
+    },
+    loadButton: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>
+
+<style>
+.form-content {
+  max-height: calc(100vh - 200px);
+}
+</style>

package/src/components/CConfirmActionModal/index.js

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

package/src/components/CDatepicker/CDatepicker.vue

@@ -0,0 +1,139 @@
+<template>
+  <div>
+    <div class="flex items-center">
+      <div v-if="label">
+        <label class="block text-sm font-medium text-gray-900">
+          {{ label }}
+        </label>
+      </div>
+      <!-- asterisk sign to render if field is required -->
+      <p v-if="isRequired" class="ml-1 text-red-600">*</p>
+    </div>
+    <v-date-picker
+      :class="{
+        'inline-block h-full': true,
+        'w-full': isExpanded,
+      }"
+      :masks="masks"
+      @input="onDayClick"
+      :value="value"
+      :min-date="minDate"
+      :max-date="maxDate"
+      :attributes="attrs"
+      firstDayOfWeek="2"
+      :is-required="true"
+    >
+      <template v-slot="{ inputValue, togglePopover }">
+        <div class="mt-1 flex items-center">
+          <button
+            type="button"
+            :class="[
+              disabled ? 'pointer-events-none border-gray-100' : 'border-gray-300',
+              'text-blue-600 focus:outline-none rounded-l-md border bg-white p-2 shadow-sm focus:text-white',
+            ]"
+            @click="togglePopover()"
+          >
+            <c-icon
+              name="calendar-solid"
+              :class="[disabled ? 'text-gray-200' : 'text-gray-400', 'h-5 w-5 ']"
+              type="solid"
+            ></c-icon>
+          </button>
+          <input
+            :value="inputValue"
+            :class="[
+              disabled
+                ? 'pointer-events-none border-l-0 border-gray-100 text-gray-400'
+                : 'border-l-0 border-gray-300 text-gray-900',
+              'focus:outline-none focus:border-blue-500 w-full appearance-none rounded-r-md border  bg-white p-2 text-sm shadow-sm',
+            ]"
+            :readonly="disabled"
+            @click="togglePopover()"
+          />
+        </div>
+      </template>
+    </v-date-picker>
+    <!-- validation error message -->
+    <p v-if="!isValidate" class="mt-2 text-sm text-red-600">
+      {{ errorMessage }}
+    </p>
+    <p v-if="helpText && isValidate == true" class="mt-1 text-sm text-gray-500">
+      {{ helpText }}
+    </p>
+  </div>
+</template>
+<script>
+import CIcon from "../CIcon/CIcon.vue";
+// import Calendar from "v-calendar/lib/components/calendar.umd";
+import VDatePicker from "v-calendar/lib/components/date-picker.umd";
+export default {
+  name: "CDatepicker",
+  components: {
+    // Calendar,
+    VDatePicker,
+    CIcon,
+  },
+  props: {
+    classes: {
+      type: String,
+    },
+    isRequired: {
+      type: Boolean,
+    },
+    label: {
+      type: String,
+    },
+    helpText: {
+      type: String,
+    },
+    value: {
+      type: [String, Date, Array],
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    minDate: {
+      type: [String, Date],
+      default: null,
+    },
+    maxDate:{
+      type: [String, Date],
+      default: null,
+    },
+    isExpanded: {
+      type: Boolean,
+      default: false,
+    },
+    isValidate: {
+      type: Boolean,
+      default: true,
+    },
+    errorMessage: {
+      type: String,
+    },
+  },
+  data() {
+    const masks = {
+      input: ["MMM DD, YYYY", "YYYY/MM/DD", "DD-MM-YYYY", "DD/MM/YYYY", "YYYY-MM-DD", "L"],
+    };
+    return {
+      masks,
+      attrs: [
+        {
+          highlight: {
+            color: "blue",
+            fillMode: "outline",
+          },
+          dates: new Date(),
+        },
+      ],
+    };
+  },
+  methods: {
+    onDayClick(date) {
+      this.$emit("input", date);
+    },
+  },
+};
+</script>

package/src/components/CDatepicker/index.js

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