classcard-ui 0.2.331 → 0.2.334

package/package.json

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

package/src/components/CEditor/CEditor.vue

@@ -79,8 +79,9 @@ export default {
 
 .ql-editor {
   @apply text-sm text-gray-900;
+  max-height: 150px;
 }
 .ql-editor.ql-blank::before {
-  @apply text-gray-500 not-italic;
+  @apply not-italic text-gray-500;
 }
 </style>

package/src/components/CMultiselect/CMultiselect.vue

@@ -23,6 +23,8 @@
       :label="optionLabel"
       :clearable="clearable"
       :loading="loading"
+      @open="onOpen"
+      @close="onClose"
     >
       <template #open-indicator="{ attributes }">
         <span v-bind="attributes">
@@ -92,6 +94,31 @@
           <p>{{ option[optionLabel] }}</p>
         </div>
       </template>
+      <template #list-footer>
+        <li ref="load" class="loader" v-show="hasNextPage">
+          <svg
+            class="h-5 w-5 animate-spin text-gray-400"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            v-if="loading"
+          >
+            <circle
+              class="opacity-25"
+              cx="12"
+              cy="12"
+              r="10"
+              stroke="currentColor"
+              stroke-width="4"
+            ></circle>
+            <path
+              class="opacity-75"
+              fill="currentColor"
+              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+            ></path>
+          </svg>
+        </li>
+      </template>
     </v-select>
     <p v-if="!isValidate" class="mt-2 text-sm text-red-600">
       {{ errorMessage }}
@@ -174,6 +201,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    hasNextPage: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {},
   data() {
@@ -183,27 +214,50 @@ export default {
         this.optionsSelected && this.optionsSelected.length
           ? this.optionsSelected
           : [],
-      localSearch: "",
+      observer: null,
     };
   },
   methods: {
     fetchOptions(search, loaderSearching) {
-      this.$emit("getOptions", search, loaderSearching);
-      this.emitSearch(search);
+      this.emitGetOptions(search, loaderSearching);
     },
-    emitSearch: debounce(function (search) {
-      this.$emit("search", search);
-    }, 500),
+    emitGetOptions: debounce(function (search, loaderSearching) {
+      this.$emit("getOptions", search, loaderSearching);
+    }, 300),
     setSelectedOptions(params) {
       this.value = params;
       this.$emit("onSelectOptions", params);
     },
+    async onOpen() {
+      if (this.hasNextPage) {
+        await this.$nextTick();
+        this.observer.observe(this.$refs.load);
+      }
+    },
+    onClose() {
+      this.observer.disconnect();
+    },
+    async infiniteScroll([{ isIntersecting, target }]) {
+      if (isIntersecting) {
+        const ul = target.offsetParent;
+        const scrollTop = target.offsetParent.scrollTop;
+        this.emitLoadNextPage();
+        await this.$nextTick();
+        ul.scrollTop = scrollTop;
+      }
+    },
+    emitLoadNextPage: debounce(function () {
+      this.$emit("loadNextPage");
+    }, 300),
   },
   watch: {
     optionsSelected() {
       this.value = this.optionsSelected;
     },
   },
+  mounted() {
+    this.observer = new IntersectionObserver(this.infiniteScroll);
+  },
 };
 </script>
 <style>