classcard-ui 0.2.666 → 0.2.671

package/src/components/CTextarea/CTextarea.vue

@@ -1,95 +0,0 @@
-<template>
-  <div>
-    <div class="flex justify-between">
-      <div class="flex items-center">
-        <!-- label of input field -->
-        <label v-if="label" class="block text-sm font-medium text-gray-900">
-          {{ label }}
-        </label>
-        <!-- asterisk sign to render if field is required -->
-        <p v-if="isRequired" class="ml-1 text-red-600">*</p>
-      </div>
-
-      <span v-if="hint" class="text-sm text-gray-500">{{ hint }}</span>
-    </div>
-
-    <div class="mt-1">
-      <textarea
-        :value="textareaValue"
-        @input="$emit('input', $event.target.value)"
-        @blur="$emit('blur', $event.target.value)"
-        :placeholder="placeholder"
-        :rows="rows"
-        :class="errorClasses"
-        :disabled="disabled"
-        class="block w-full rounded-md text-gray-900 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 disabled:opacity-50 sm:text-sm"
-      ></textarea>
-      <!-- <div
-        v-if="!isValidate"
-        class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-red-600"
-      >
-        <c-icon name="exclamation-circle" type="solid" class="h-5 w-5"></c-icon>
-      </div> -->
-    </div>
-    <p v-if="!isValidate" class="mt-2 text-sm text-red-600">
-      {{ errorMessage }}
-    </p>
-    <p v-if="helpText && isValidate == true" class="mt-2 text-sm text-gray-500">
-      {{ helpText }}
-    </p>
-  </div>
-</template>
-<script>
-// import CIcon from "../CIcon/CIcon.vue";
-export default {
-  name: "CTextarea",
-  // components: { CIcon },
-  props: {
-    label: {
-      type: String,
-    },
-    placeholder: {
-      type: String,
-    },
-    value: {
-      type: String,
-    },
-    rows: { type: String, default: "3" },
-    helpText: {
-      type: String,
-    },
-    hint: { type: String },
-    isValidate: { type: Boolean },
-    errorMessage: {
-      type: String,
-    },
-    // whether the textarea field is mandatory or not
-    isRequired: {
-      type: Boolean,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  computed: {
-    errorClasses() {
-      return {
-        "border-red-300 text-red-900 placeholder-red-300 focus:ring-red-500 focus:border-red-500":
-          this.isValidate == false,
-        "border-gray-300": this.isValidate == true,
-      };
-    },
-  },
-  data() {
-    return {
-      textareaValue: this.value,
-    };
-  },
-  watch: {
-    value() {
-      this.textareaValue = this.value;
-    },
-  },
-};
-</script>

package/src/components/CTextarea/index.js

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

package/src/components/CTimeline/CTimeline.vue

@@ -1,237 +0,0 @@
-<template>
-  <div>
-    <div class="flow-root">
-      <ul class="-mb-8">
-        <li>
-          <div class="relative pb-8">
-            <span
-              class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200"
-              aria-hidden="true"
-            ></span>
-            <div class="relative flex space-x-3">
-              <div>
-                <span :class="colorClasses"
-                  class="h-8 w-8 rounded-full flex items-center justify-center ring-8 ring-white"
-                >
-                 <c-icon :name="icon" type="solid" class="h-5 w-5"></c-icon>
-                </span>
-              </div>
-              <div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4">
-                <div>
-                  <p class="text-sm text-gray-500">
-                    Applied to
-                    <a href="#" class="font-medium text-gray-900"
-                      >Front End Developer</a
-                    >
-                  </p>
-                </div>
-                <div class="text-right text-sm whitespace-nowrap text-gray-500">
-                  <time datetime="2020-09-20">Sep 20</time>
-                </div>
-              </div>
-            </div>
-          </div>
-        </li>
-
-        <li>
-          <div class="relative pb-8">
-            <span
-              class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200"
-              aria-hidden="true"
-            ></span>
-            <div class="relative flex space-x-3">
-              <div>
-                <span
-                  class="h-8 w-8 rounded-full bg-blue-500 flex items-center justify-center ring-8 ring-white"
-                >
-                  <!-- Heroicon name: thumb-up -->
-                  <svg
-                    class="h-5 w-5 text-white"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 20 20"
-                    fill="currentColor"
-                    aria-hidden="true"
-                  >
-                    <path
-                      d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.943 18h5.416a2 2 0 001.962-1.608l1.2-6A2 2 0 0015.56 8H12V4a2 2 0 00-2-2 1 1 0 00-1 1v.667a4 4 0 01-.8 2.4L6.8 7.933a4 4 0 00-.8 2.4z"
-                    />
-                  </svg>
-                </span>
-              </div>
-              <div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4">
-                <div>
-                  <p class="text-sm text-gray-500">
-                    Advanced to phone screening by
-                    <a href="#" class="font-medium text-gray-900"
-                      >Bethany Blake</a
-                    >
-                  </p>
-                </div>
-                <div class="text-right text-sm whitespace-nowrap text-gray-500">
-                  <time datetime="2020-09-22">Sep 22</time>
-                </div>
-              </div>
-            </div>
-          </div>
-        </li>
-
-        <li>
-          <div class="relative pb-8">
-            <span
-              class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200"
-              aria-hidden="true"
-            ></span>
-            <div class="relative flex space-x-3">
-              <div>
-                <span
-                  class="h-8 w-8 rounded-full bg-green-500 flex items-center justify-center ring-8 ring-white"
-                >
-                  <!-- Heroicon name: check -->
-                  <svg
-                    class="h-5 w-5 text-white"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 20 20"
-                    fill="currentColor"
-                    aria-hidden="true"
-                  >
-                    <path
-                      fill-rule="evenodd"
-                      d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-                      clip-rule="evenodd"
-                    />
-                  </svg>
-                </span>
-              </div>
-              <div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4">
-                <div>
-                  <p class="text-sm text-gray-500">
-                    Completed phone screening with
-                    <a href="#" class="font-medium text-gray-900"
-                      >Martha Gardner</a
-                    >
-                  </p>
-                </div>
-                <div class="text-right text-sm whitespace-nowrap text-gray-500">
-                  <time datetime="2020-09-28">Sep 28</time>
-                </div>
-              </div>
-            </div>
-          </div>
-        </li>
-
-        <li>
-          <div class="relative pb-8">
-            <span
-              class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200"
-              aria-hidden="true"
-            ></span>
-            <div class="relative flex space-x-3">
-              <div>
-                <span
-                  class="h-8 w-8 rounded-full bg-blue-500 flex items-center justify-center ring-8 ring-white"
-                >
-                  <!-- Heroicon name: thumb-up -->
-                  <svg
-                    class="h-5 w-5 text-white"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 20 20"
-                    fill="currentColor"
-                    aria-hidden="true"
-                  >
-                    <path
-                      d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.943 18h5.416a2 2 0 001.962-1.608l1.2-6A2 2 0 0015.56 8H12V4a2 2 0 00-2-2 1 1 0 00-1 1v.667a4 4 0 01-.8 2.4L6.8 7.933a4 4 0 00-.8 2.4z"
-                    />
-                  </svg>
-                </span>
-              </div>
-              <div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4">
-                <div>
-                  <p class="text-sm text-gray-500">
-                    Advanced to interview by
-                    <a href="#" class="font-medium text-gray-900"
-                      >Bethany Blake</a
-                    >
-                  </p>
-                </div>
-                <div class="text-right text-sm whitespace-nowrap text-gray-500">
-                  <time datetime="2020-09-30">Sep 30</time>
-                </div>
-              </div>
-            </div>
-          </div>
-        </li>
-
-        <li>
-          <div class="relative pb-8">
-            <div class="relative flex space-x-3">
-              <div>
-                <span
-                  class="h-8 w-8 rounded-full bg-green-500 flex items-center justify-center ring-8 ring-white"
-                >
-                  <!-- Heroicon name: check -->
-                  <svg
-                    class="h-5 w-5 text-white"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 20 20"
-                    fill="currentColor"
-                    aria-hidden="true"
-                  >
-                    <path
-                      fill-rule="evenodd"
-                      d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-                      clip-rule="evenodd"
-                    />
-                  </svg>
-                </span>
-              </div>
-              <div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4">
-                <div>
-                  <p class="text-sm text-gray-500">
-                    Completed interview with
-                    <a href="#" class="font-medium text-gray-900"
-                      >Katherine Snyder</a
-                    >
-                  </p>
-                </div>
-                <div class="text-right text-sm whitespace-nowrap text-gray-500">
-                  <time datetime="2020-10-04">Oct 4</time>
-                </div>
-              </div>
-            </div>
-          </div>
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>
-
-<script>
-import CIcon from "../CIcon/CIcon.vue";
-export default {
-  name: "CTimeline",
-  components: { CIcon },
-  props: {
-    statsCount: {
-      type: Array,
-    },
-    color: {
-      type: String,
-    },
-    icon:{
-      type: String
-    }
-  },
-    computed: {
-    colorClasses() {
-      return {
-        "bg-red-200 text-red-800": this.color == "red",
-        "bg-yellow-100 text-yellow-800": this.color == "yellow",
-        "bg-green-100 text-green-800": this.color == "green",
-        "bg-indigo-100 text-indigo-800": this.color == "indigo"
-      };
-    },
-  },
-};
-</script>
-
-<style></style>

package/src/components/CTimeline/index.js

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

package/src/components/CUpload/CUpload.vue

@@ -1,231 +0,0 @@
-<template>
-  <div class="flex h-full flex-col">
-    <div class="flex items-center justify-between">
-      <div class="flex items-center">
-        <!-- label of input field -->
-        <label class="block text-sm font-medium text-gray-900">{{ label }}</label>
-        <!-- asterisk sign to render if field is required -->
-        <p v-if="isRequired" class="ml-1 text-red-600">*</p>
-      </div>
-      <label v-if="!isUploaded" class="block text-sm font-medium text-gray-400">
-        {{ hint }}
-      </label>
-    </div>
-    <button
-      type="button"
-      class="inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-      @click="initFilestack()"
-      v-if="displayMode == 'overlay' && icon"
-    >
-      <c-icon
-        :type="icon.type"
-        :class="icon.class"
-        :name="icon.name"
-        :viewBox="icon.viewBox"
-      ></c-icon>
-      {{ buttonText }}
-    </button>
-    <button
-      type="button"
-      class="mt-1.5 flex h-full w-auto items-center justify-center rounded-lg border-2 border-dashed border-gray-300 px-9 py-14 text-center hover:border-gray-400 focus:outline-none"
-      @click="initFilestack()"
-      v-if="displayMode == 'overlay' && !icon && !isAvatar"
-    >
-      <c-icon
-        name="arrow-up"
-        type="solid"
-        class="mr-1 h-5 w-5 flex-none text-indigo-600"
-        viewBox="0 0 20 20"
-      ></c-icon>
-      <span class="text-sm font-medium text-indigo-900"> Upload </span>
-    </button>
-    <div
-      class="relative hidden h-full w-full overflow-hidden rounded-full lg:block"
-      @click="initFilestack()"
-      v-if="displayMode == 'overlay' && !icon && isAvatar"
-    >
-      <img
-        v-if="imageUrl"
-        class="relative h-full w-full rounded-full object-cover"
-        :src="imageUrl"
-      />
-      <c-avatar
-        v-else
-        size="very large"
-        :nameInitials="shortName"
-        :isDynamicallyColored="coloredAvatars"
-        :rounded="true"
-      ></c-avatar>
-      <label
-        class="absolute inset-0 flex h-full w-full cursor-pointer items-center justify-center bg-gray-900 bg-opacity-75 text-sm font-medium text-white opacity-0 focus-within:opacity-100 hover:opacity-100"
-      >
-        <c-icon
-          v-if="openIcon"
-          :name="openIcon.name"
-          :type="openIcon.type"
-          :class="openIcon.class"
-        ></c-icon>
-        <span>{{ uploadText }}</span>
-        <span class="sr-only"> user photo</span>
-      </label>
-    </div>
-    <div :class="filestackClasses" id="filestack-uploader"></div>
-    <p v-if="!isValidate" class="mt-2 text-sm text-red-600">
-      {{ errorMessage }}
-    </p>
-    <!-- description about the input field -->
-    <p v-if="helpText && isValidate == true" class="mt-2 text-sm text-gray-500">
-      {{ helpText }}
-    </p>
-  </div>
-</template>
-
-<script>
-import * as filestack from "filestack-js";
-import CIcon from "../CIcon/CIcon.vue";
-import CAvatar from "../CAvatar/CAvatar.vue";
-
-export default {
-  name: "CUpload",
-  components: {
-    CIcon,
-    CAvatar,
-  },
-  props: {
-    buttonText: {
-      type: String,
-      default: "Upload",
-    },
-    isAvatar: {
-      type: Boolean,
-      default: false,
-    },
-    shortName: {
-      type: String,
-    },
-    imageUrl: {
-      type: String,
-      default: "",
-    },
-    icon: {
-      type: Object,
-    },
-    fileSize: {
-      type: String,
-    },
-    openIcon: {
-      type: Object,
-    },
-    uploadText: {
-      type: String,
-      default: "Change",
-    },
-    hint: {
-      type: String,
-      default: "",
-    },
-    helpText: {
-      type: String,
-    },
-    label: {
-      type: String,
-      default: "",
-    },
-    isValidate: { type: Boolean },
-    errorMessage: {
-      type: String,
-    },
-    filestackApiKey: {
-      type: String,
-      default: "",
-    },
-    filestackClasses: {
-      type: String,
-      default: "w-96 h-96",
-    },
-    url: {
-      type: String,
-    },
-    maxFiles: {
-      type: Number,
-      default: 1,
-    },
-    onUploadSuccess: {
-      type: Function,
-    },
-    aspectRatio: {
-      type: Number,
-      default: null,
-    },
-    onUploadOpen: {
-      type: Function,
-    },
-    displayMode: {
-      type: String,
-      default: "inline",
-    },
-    isUploaded: {
-      type: Boolean,
-      default: false,
-    },
-    isCircle: {
-      type: Boolean,
-      default: false,
-    },
-    coloredAvatars: {
-      type: Boolean,
-      default: false,
-    },
-    uploadSources: {
-      type: Array,
-      default: () => ["local_file_system", "unsplash"],
-    },
-    isRequired:{
-      type:Boolean
-    }
-  },
-  data() {
-    return {};
-  },
-  methods: {
-    initFilestack() {
-      const client = filestack.init(this.filestackApiKey);
-      const options = {
-        displayMode: this.displayMode,
-        container: "#filestack-uploader",
-        uploadInBackground: false,
-        maxFiles: this.maxFiles,
-        onOpen: (param) => this.$emit("onUploadOpen", param),
-        onClose: (param) => this.$emit("onUploadOpen", param),
-        onUploadDone: (res) => this.$emit("filestack-uploaded", res),
-        fromSources: this.uploadSources,
-        transformations: {
-          crop: {
-            aspectRatio: this.aspectRatio ? this.aspectRatio : 0,
-            force: this.aspectRatio ? true : false,
-          },
-          circle: this.isCircle,
-        },
-      };
-      const picker = client.picker(options);
-      picker.open();
-    },
-  },
-  computed: {
-    errorClasses() {
-      return {
-        "border-red-300 text-red-900 placeholder-red-300 focus:ring-red-500 focus:border-red-500":
-          this.isValidate == false,
-        "border-gray-300 border-dashed": this.isValidate == true,
-      };
-    },
-  },
-  mounted() {
-    if (this.displayMode == "inline") {
-      this.initFilestack();
-    }
-  },
-};
-</script>
-
-<style></style>

package/src/components/CUpload/index.js

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

package/src/components/index.js

@@ -1,48 +0,0 @@
-export { default as CAlerts } from "./CAlerts";
-export { default as CAnchorTabs } from "./CAnchorTabs";
-export { default as CAnchorTag } from "./CAnchorTag";
-export { default as CAvatar } from "./CAvatar";
-export { default as CAvatarGroup } from "./CAvatarGroup";
-export { default as CBasicTable } from "./CBasicTable";
-export { default as CBreadcrumbs } from "./CBreadcrumbs";
-export { default as CButton } from "./CButton";
-export { default as CButtonGroup } from "./CButtonGroup";
-export { default as CButtonIcon } from "./CButtonIcon";
-export { default as CButtonLink } from "./CButtonLink";
-export { default as CButtonSelect } from "./CButtonSelect";
-export { default as CButtonWithDropdown } from "./CButtonWithDropdown";
-export { default as CCard } from "./CCard";
-export { default as CCheckbox } from "./CCheckbox";
-export { default as CCollapsibleSection } from "./CCollapsibleSection";
-export { default as CColorDots } from "./CColorDots";
-export { default as CDatepicker } from "./CDatepicker";
-export { default as CDualSelect } from "./CEditor";
-export { default as CEditor } from "./CDualSelect";
-export { default as CFormSectionHeading } from "./CFormSectionHeading";
-export { default as CIcon } from "./CIcon";
-export { default as CGroupedSelect } from "./CGroupedSelect";
-export { default as CIconDropdown } from "./CIconDropdown";
-export { default as CInput } from "./CInput";
-export { default as CInputAddon } from "./CInputAddon";
-export { default as CInputEmail } from "./CInputEmail";
-export { default as CModalHeading } from "./CModalHeading";
-export { default as CModuleHelpLinks } from "./CModuleHelpLinks";
-export { default as CMultiselect } from "./CMultiselect";
-export { default as CPageHeading } from "./CPageHeading";
-export { default as CPagination } from "./CPagination";
-export { default as CPhoneNumber } from "./CPhoneNumber";
-export { default as CRadio } from "./CRadio";
-export { default as CReorderableStackedList } from "./CReorderableStackedList";
-export { default as CSelect } from "./CSelect";
-export { default as CSmallTimeline } from "./CSmallTimeline";
-export { default as CStackedList } from "./CStackedList";
-export { default as CStats } from "./CStats";
-export { default as CSwitch } from "./CSwitch";
-export { default as CTable } from "./CTable";
-export { default as CTabs } from "./CTabs";
-export { default as CTag } from "./CTag";
-export { default as CTextarea } from "./CTextarea";
-export { default as CTimeline } from "./CTimeline";
-export { default as CUpload } from "./CUpload";
-export { default as CConfirmActionModal } from "./CConfirmActionModal";
-export { default as CCalendar } from "./CCalendar";