classcard-ui 0.2.318 → 0.2.321

package/package.json

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

package/src/components/CMultiselect/CMultiselect.vue

@@ -1,7 +1,9 @@
 <template>
   <div>
     <div class="flex items-center">
-      <label v-if="label" class="text-sm font-medium text-gray-900">{{ label }}</label>
+      <label v-if="label" class="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>
@@ -40,7 +42,9 @@
       </template>
       <!-- eslint-disable-next-line vue/no-unused-vars  -->
       <template #no-options="{ search, searching, loading }">
-        <span v-if="search.length < 1">Start typing to search for options...</span>
+        <span v-if="search.length < 1"
+          >Start typing to search for options...</span
+        >
         <span v-else>No options found, try searching something else.</span>
       </template>
       <template #spinner="{ loading }">
@@ -97,6 +101,7 @@
 <script>
 import vSelect from "vue-select";
 import CAvatar from "../CAvatar/CAvatar.vue";
+import { debounce } from "lodash-es";
 // import Fuse from "fuse.js";
 import "vue-select/dist/vue-select.css";
 export default {
@@ -174,13 +179,23 @@ export default {
   data() {
     return {
       loaderSearching: true,
-      value: this.optionsSelected && this.optionsSelected.length ? this.optionsSelected : [],
+      value:
+        this.optionsSelected && this.optionsSelected.length
+          ? this.optionsSelected
+          : [],
+      localSearch: "",
     };
   },
   methods: {
     fetchOptions(search, loaderSearching) {
+      this.localSearch = search;
       this.$emit("getOptions", search, loaderSearching);
     },
+    emitSearch() {
+      debounce(() => {
+        this.$emit("search", this.localSearch);
+      }, 500);
+    },
     setSelectedOptions(params) {
       this.value = params;
       this.$emit("onSelectOptions", params);
@@ -198,7 +213,7 @@ export default {
   @apply cursor-pointer;
 }
 .vs__dropdown-toggle {
-  @apply focus:outline-none w-full rounded-md border border-gray-300 bg-white py-2 pl-3 text-left shadow-sm focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 sm:text-sm;
+  @apply w-full rounded-md border border-gray-300 bg-white py-2 pl-3 text-left shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 sm:text-sm;
 }
 .vs__selected-options {
   @apply flex-nowrap overflow-hidden;
@@ -221,7 +236,7 @@ export default {
   @apply pt-0 pr-3;
 }
 .vs__dropdown-menu {
-  @apply focus:outline-none mt-2 max-h-60 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-opacity-5 sm:text-sm;
+  @apply mt-2 max-h-60 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-opacity-5 focus:outline-none sm:text-sm;
 }
 .vs__dropdown-option {
   @apply py-2;

package/src/components/CUpload/CUpload.vue

@@ -1,6 +1,14 @@
 <template>
   <div>
-    <div v-if="type === 'filestack'" :class="filestackClasses" id="filestack-uploader"></div>
+    <button
+      type="button"
+      class="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+      @click="initFilestack()"
+      v-if="displayMode == 'overlay'"
+    >
+      Upload
+    </button>
+    <div :class="filestackClasses" id="filestack-uploader"></div>
     <p v-if="!isValidate" class="mt-2 text-sm text-red-600">
       {{ errorMessage }}
     </p>
@@ -27,10 +35,6 @@ export default {
     errorMessage: {
       type: String,
     },
-    type: {
-      type: String,
-      default: "default",
-    },
     filestackApiKey: {
       type: String,
       default: "",
@@ -53,17 +57,20 @@ export default {
       type: Number,
       default: null,
     },
+    displayMode: {
+      type: String,
+      default: "inline",
+    },
   },
   data() {
     return {
-      uploader: null,
     };
   },
   methods: {
     initFilestack() {
       const client = filestack.init(this.filestackApiKey);
       const options = {
-        displayMode: "inline",
+        displayMode: this.displayMode,
         container: "#filestack-uploader",
         uploadInBackground: false,
         maxFiles: this.maxFiles,
@@ -93,7 +100,7 @@ export default {
     },
   },
   mounted() {
-    if (this.type === "filestack") {
+    if (this.displayMode == "inline") {
       this.initFilestack();
     }
   },