classcard-ui 0.2.190 → 0.2.191

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "classcard-ui",
-  "version": "0.2.190",
+  "version": "0.2.191",
   "main": "dist/classcard-ui.common.js",
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -20,6 +20,7 @@
     "@tailwindcss/forms": "^0.2.1",
     "core-js": "^3.18.0",
     "dayjs": "^1.10.7",
+    "filestack-js": "^3.25.0",
     "gridjs-selection": "^3.4.0",
     "gridjs-vue": "^3.4.0",
     "lodash-es": "^4.17.21",
@@ -35,10 +36,10 @@
   },
   "devDependencies": {
     "@babel/core": "^7.15.5",
-    "@storybook/addon-actions": "^6.3.12",
-    "@storybook/addon-essentials": "^6.3.12",
-    "@storybook/addon-links": "^6.3.12",
-    "@storybook/vue": "^6.3.12",
+    "@storybook/addon-actions": "^6.4.0",
+    "@storybook/addon-essentials": "^6.4.0",
+    "@storybook/addon-links": "^6.4.0",
+    "@storybook/vue": "^6.4.0",
     "@tailwindcss/postcss7-compat": "^2.2.14",
     "@types/lodash-es": "^4.17.5",
     "@vue/cli-plugin-babel": "^4.5.13",

package/src/components/CUpload/CUpload.vue

@@ -1,28 +1,35 @@
 <template>
   <div>
-    <slot></slot>
-    <div class="flex justify-between">
-      <label class="block text-sm font-medium text-gray-900">
-        {{ label }}
-      </label>
-      <span v-if="hint" class="text-sm text-gray-500">{{ hint }}</span>
-    </div>
-    <div
-      :class="errorClasses"
-      class="w-full mt-2 flex justify-center px-6 py-14 border-2 rounded-md"
-    >
-      <div class="space-y-1 text-center">
-        <div class="flex text-sm text-gray-600">
-           <c-icon type="solid" class="h-5 w-5 text-indigo-600" name="arrow-up"></c-icon>
-          <label
-            class="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500 ml-1"
-          >
-            <span>Upload</span>
-            <input type="file" class="sr-only" />
-          </label>
+    <div v-if="type === 'default'">
+      <slot></slot>
+      <div class="flex justify-between">
+        <label class="block text-sm font-medium text-gray-900">
+          {{ label }}
+        </label>
+        <span v-if="hint" class="text-sm text-gray-500">{{ hint }}</span>
+      </div>
+      <div
+        :class="errorClasses"
+        class="w-full mt-2 flex justify-center px-6 py-14 border-2 rounded-md"
+      >
+        <div class="space-y-1 text-center">
+          <div class="flex text-sm text-gray-600">
+            <c-icon
+              type="solid"
+              class="h-5 w-5 text-indigo-600"
+              name="arrow-up"
+            ></c-icon>
+            <label
+              class="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500 ml-1"
+            >
+              <span>Upload</span>
+              <input type="file" class="sr-only" />
+            </label>
+          </div>
         </div>
       </div>
     </div>
+    <div v-if="type === 'filestack'" class="" id="filestack-uploader"></div>
     <p v-if="!isValidate" class="mt-2 text-sm text-red-600">
       {{ errorMessage }}
     </p>
@@ -31,6 +38,8 @@
 
 <script>
 import CIcon from "../CIcon/CIcon.vue";
+import * as filestack from "filestack-js";
+
 export default {
   name: "CUpload",
   components: { CIcon },
@@ -48,6 +57,31 @@ export default {
     errorMessage: {
       type: String,
     },
+    type: {
+      type: String,
+      default: "default",
+    },
+    filestackApiKey: {
+      type: String,
+      default: "",
+    },
+    filestackClasses: {
+      type: String,
+      default: "w-96 h-96",
+    },
+  },
+  methods: {
+    initFilestack() {
+      const client = filestack.init(this.filestackApiKey);
+      const options = {
+        displayMode: "inline",
+        container: "#filestack-uploader",
+        uploadInBackground: false,
+        onUploadDone: (res) => this.$emit("filestack-uploaded", res),
+      };
+      const picker = client.picker(options);
+      picker.open();
+    },
   },
   computed: {
     errorClasses() {
@@ -58,6 +92,11 @@ export default {
       };
     },
   },
+  mounted() {
+    if (this.type === "filestack") {
+      this.initFilestack();
+    }
+  },
 };
 </script>
 

package/src/stories/CUpload.stories.js

@@ -1,14 +1,20 @@
-import CUpload from '../components/CUpload/CUpload.vue';
-import './utils.css'
+import CUpload from "../components/CUpload/CUpload.vue";
+import "./utils.css";
 
 export default {
-  title: 'CUpload',
+  title: "CUpload",
   component: CUpload,
   argTypes: {
     label: String,
     hint: String,
     fileSize: String,
-    isValidate: Boolean
+    isValidate: Boolean,
+    type: {
+      control: {
+        type: "inline-radio",
+        options: ["default", "filestack", "uppload"],
+      },
+    },
   },
 };
 
@@ -20,8 +26,10 @@ const Template = (args, { argTypes }) => ({
 
 export const Default = Template.bind({});
 Default.args = {
- label: 'Name',
- hint: 'Optional',
- fileSize: '10',
- isValidate: false
+  label: "Name",
+  hint: "Optional",
+  fileSize: "10",
+  isValidate: true,
+  type: "default",
+  filestackApiKey: "",
 };