classcard-ui 0.2.278 → 0.2.283

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "classcard-ui",
-  "version": "0.2.278",
+  "version": "0.2.283",
   "main": "dist/classcard-ui.common.js",
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/components/CIconDropdown/CIconDropdown.vue

@@ -61,6 +61,7 @@
               hover:text-gray-900
               cursor-pointer
             "
+            :class="item.class"
             role="menuitem"
           >
             {{ item.text }}

package/src/components/CSelect/CSelect.vue

@@ -210,7 +210,7 @@ export default {
   computed: {
     classes() {
       return {
-        "text-gray-900 hover:bg-gray-200 bg-gray-100 focus:ring-2 focus:border-gray-200 focus:ring-gray-200 focus:ring-offset-2 shadow-sm":
+        "text-gray-900 border border-gray-200 hover:bg-gray-200 bg-gray-100 focus:ring-2 focus:border-gray-200 focus:ring-gray-200 focus:ring-offset-2 shadow-sm":
           this.type == "gray",
         "bg-white border border-gray-200 hover:bg-indigo-100 text-indigo-600 hover:text-indigo-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-200":
           this.type == "tertiary",

package/src/components/CUpload/CUpload.vue

@@ -2,43 +2,16 @@
   <div>
     <div v-if="type === 'default'">
       <slot></slot>
-      <div
-        :class="errorClasses"
-        class=""
-        id="c-file-area"
-        @click.prevent="uploader.open()"
-      >
+      <div :class="errorClasses" class="" id="c-file-area" @click.prevent="uploader.open()">
         <button
           type="white"
-          class="
-            inline-flex
-            items-center
-            px-4
-            py-2
-            shadow-sm
-            text-sm
-            font-medium
-            rounded-md
-            focus:outline-none
-            focus:ring-2 focus:ring-offset-2
-            disabled:opacity-50
-            text-gray-700
-            border
-            bg-white
-            border-gray-300
-            hover:bg-gray-50
-            focus:ring-indigo-600
-          "
+          class="pic-btn inline-flex items-center px-4 py-2 shadow-sm text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 text-gray-700 border bg-white border-gray-300 hover:bg-gray-50 focus:ring-indigo-600"
         >
           {{ buttonText }}
         </button>
       </div>
     </div>
-    <div
-      v-if="type === 'filestack'"
-      :class="filestackClasses"
-      id="filestack-uploader"
-    ></div>
+    <div v-if="type === 'filestack'" :class="filestackClasses" id="filestack-uploader"></div>
     <p v-if="!isValidate" class="mt-2 text-sm text-red-600">
       {{ errorMessage }}
     </p>
@@ -78,10 +51,26 @@ export default {
       type: String,
       default: "w-96 h-96",
     },
+    url: {
+      type: String,
+    },
     maxFiles: {
       type: Number,
       default: 1,
     },
+    onUploadSuccess: {
+      type: Function,
+    },
+    includeUnsplash: {
+      type: Boolean,
+    },
+    cropImage: {
+      type: Boolean,
+    },
+    aspectRatioDimensions: {
+      type: Number,
+      default: 23 / 45,
+    },
   },
   data() {
     return {
@@ -109,23 +98,20 @@ export default {
         compressionToMime: "image/jpeg",
         maxSize: [500, 1000],
         uploader: xhrUploader({
-          endpoint: `https://reportcard.tech/api/saveImage/`,
+          endpoint: `${this.url}`,
           fileKeyName: "image",
-          // settingsFunction: (xmlHttp) => {
-          //   xmlHttp.setRequestHeader("Authorization", `Bearer ${token}`);
-          // },
           responseFunction: (response) => {
-            console.log(response);
+            this.$emit("onUploadSuccess", response);
           },
         }),
-        // bind: document.querySelector("#imagePreview"),
       });
       this.uploader.use([
         new Local(),
-        new Unsplash("hXfo-C0svXV4IDCncBo7s-ySQpVJVeZrGuWxwwgC7qw"),
-        new Crop({ aspectRatio: 23 / 45 }),
+        ...(this.includeUnsplash
+          ? [new Unsplash("hXfo-C0svXV4IDCncBo7s-ySQpVJVeZrGuWxwwgC7qw")]
+          : []),
+        ...(this.cropImage ? [new Crop({ aspectRatio: this.aspectRatioDimensions })] : []),
       ]);
-
       // Uppload Error Handle
       this.uploader.on("error", (error) => {
         console.log("The error message is", error);

package/src/icons.js

@@ -43,6 +43,8 @@ export default {
     "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2",
   package:
     "M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7",
+  document:
+    "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z",
   refresh:
     "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15",
   product: "M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4",

package/src/stories/CIconDropdown.stories.js

@@ -21,7 +21,7 @@ const Template = (args, { argTypes }) => ({
 export const Default = Template.bind({});
 Default.args = {
   items: [
-    { icon: "check", text: "one", action:'alert' },
+    { icon: "check", text: "one", action:'alert', class:'hover:bg-red-100 hover:text-red-500' },
     { icon: "check", text: "two" },
   ],
   icon:{