classcard-ui 0.2.397 → 0.2.398

package/src/components/CUpload/CUpload.vue

@@ -1,122 +1,122 @@
-<template>
-  <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'"
-    >
-      <c-icon
-        v-if="icon"
-        :type="icon.type"
-        :class="icon.class"
-        :name="icon.name"
-        :viewBox="icon.viewBox"
-      ></c-icon>
-      {{ buttonText }}
-    </button>
-    <div :class="filestackClasses" id="filestack-uploader"></div>
-    <p v-if="!isValidate" class="mt-2 text-sm text-red-600">
-      {{ errorMessage }}
-    </p>
-  </div>
-</template>
-
-<script>
-import * as filestack from "filestack-js";
-
-export default {
-  name: "CUpload",
-  components: {},
-  props: {
-    buttonText: {
-      type: String,
-      default: "Upload",
-    },
-    icon: {
-      type: Object,
-    },
-    fileSize: {
-      type: String,
-    },
-    hint: {
-      type: String,
-    },
-    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",
-    },
-  },
-  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,
-          },
-        },
-      };
-      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>
+    <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'"
+    >
+      <c-icon
+        v-if="icon"
+        :type="icon.type"
+        :class="icon.class"
+        :name="icon.name"
+        :viewBox="icon.viewBox"
+      ></c-icon>
+      {{ buttonText }}
+    </button>
+    <div :class="filestackClasses" id="filestack-uploader"></div>
+    <p v-if="!isValidate" class="mt-2 text-sm text-red-600">
+      {{ errorMessage }}
+    </p>
+  </div>
+</template>
+
+<script>
+import * as filestack from "filestack-js";
+
+export default {
+  name: "CUpload",
+  components: {},
+  props: {
+    buttonText: {
+      type: String,
+      default: "Upload",
+    },
+    icon: {
+      type: Object,
+    },
+    fileSize: {
+      type: String,
+    },
+    hint: {
+      type: String,
+    },
+    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",
+    },
+  },
+  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,
+          },
+        },
+      };
+      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";