classcard-ui 0.2.666 → 0.2.671

package/src/components/CCard/CCard.vue

@@ -1,49 +0,0 @@
-<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

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

package/src/components/CCheckbox/CCheckbox.vue

@@ -1,70 +0,0 @@
-<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

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

package/src/components/CCollapsibleSection/CCollapsibleSection.vue

@@ -1,99 +0,0 @@
-<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

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

package/src/components/CColorDots/CColorDots.vue

@@ -1,35 +0,0 @@
-<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

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

package/src/components/CConfirmActionModal/CConfirmActionModal.vue

@@ -1,120 +0,0 @@
-<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

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

package/src/components/CDatepicker/CDatepicker.vue

@@ -1,139 +0,0 @@
-<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

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