classcard-ui 0.2.498 → 0.2.501

package/src/components/CUpload/CUpload.vue

@@ -1,196 +1,196 @@
-<template>
-  <div class="flex h-full flex-col">
-    <div class="flex items-center justify-between">
-      <label class="block text-sm font-medium text-gray-900">{{ label }}</label>
-      <label v-if="!isUploaded" class="block text-sm font-medium text-gray-400">
-        {{ hint }}
-      </label>
-    </div>
-    <button
-      type="button"
-      class="focus:outline-none 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: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="focus:outline-none 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"
-      @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" :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"
-      >
-        <span>Change</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,
-    },
-    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,
-    },
-  },
-  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: ["local_file_system", "unsplash"],
-        transformations: {
-          crop: {
-            aspectRatio: this.aspectRatio ? this.aspectRatio : 1 / 1,
-            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>
+<template>
+  <div class="flex h-full flex-col">
+    <div class="flex items-center justify-between">
+      <label class="block text-sm font-medium text-gray-900">{{ label }}</label>
+      <label v-if="!isUploaded" class="block text-sm font-medium text-gray-400">
+        {{ hint }}
+      </label>
+    </div>
+    <button
+      type="button"
+      class="focus:outline-none 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: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="focus:outline-none 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"
+      @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" :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"
+      >
+        <span>Change</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,
+    },
+    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,
+    },
+  },
+  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: ["local_file_system", "unsplash"],
+        transformations: {
+          crop: {
+            aspectRatio: this.aspectRatio ? this.aspectRatio : 1 / 1,
+            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 +1,3 @@
-import CUpload from './CUpload.vue'
-
+import CUpload from './CUpload.vue'
+
 export default CUpload

package/src/components/index.js

@@ -1,47 +1,47 @@
-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 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";