classcard-ui 0.2.388 → 0.2.391

package/package.json

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

package/src/components/CIcon/CIcon.vue

@@ -20,8 +20,7 @@
     </svg>
     <svg
       v-if="name !== 'loader' && type == 'solid'"
-      :class="classes"
-      class="cursor-pointer"
+      :class="(classes ? classes : '') + (cursorType ? cursorType : ' cursor-pointer')"
       :viewBox="viewBox"
       fill="currentColor"
       fill-rule="evenodd"
@@ -30,11 +29,10 @@
     </svg>
     <svg
       v-if="name !== 'loader' && type == 'outline'"
-      fill="none"
+      :class="(classes ? classes : '') + (cursorType ? cursorType : ' cursor-pointer')"
       viewBox="0 0 24 24"
+      fill="none"
       stroke="currentColor"
-      :class="classes"
-      class="cursor-pointer"
     >
       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="path" />
     </svg>
@@ -60,6 +58,10 @@ export default {
       type: String,
       default: "0 0 20 20",
     },
+    cursorType: {
+      type: String,
+      default: "cursor-pointer",
+    },
   },
   computed: {
     path() {

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>
@@ -42,7 +44,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 }">
@@ -91,7 +95,34 @@
         </div>
       </template>
       <template #list-footer>
-        <li ref="load" class="loader" v-show="hasNextPage">Loading more options...</li>
+        <li ref="load" class="loader" v-show="hasNextPage">
+          Loading more options...
+        </li>
+        <li
+          v-if="showFooterButton"
+          class="group sticky bottom-0 mt-1 cursor-pointer select-none bg-gray-50 py-2 pl-3 pr-9 text-gray-700 hover:bg-gray-100 hover:text-gray-900"
+          id="listbox-option-0"
+          role="option"
+          @click="$emit('footerButtonClick')"
+        >
+          <div class="flex items-center">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="h-6 w-6 flex-shrink-0 text-gray-400"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z"
+                clip-rule="evenodd"
+              />
+            </svg>
+            <span class="ml-3 block truncate font-semibold">
+              {{ footerButtonText }}
+            </span>
+          </div>
+        </li>
       </template>
     </v-select>
     <p v-if="!isValidate" class="mt-2 text-sm text-red-600">
@@ -113,6 +144,14 @@ export default {
       type: Array,
       required: true,
     },
+    showFooterButton: {
+      type: Boolean,
+      default: false,
+    },
+    footerButtonText: {
+      type: String,
+      default: "",
+    },
     label: String,
     isRequired: {
       type: Boolean,
@@ -184,7 +223,10 @@ export default {
   data() {
     return {
       loaderSearching: true,
-      value: this.optionsSelected && this.optionsSelected.length ? this.optionsSelected : [],
+      value:
+        this.optionsSelected && this.optionsSelected.length
+          ? this.optionsSelected
+          : [],
       observer: null,
     };
   },
@@ -249,7 +291,7 @@ export default {
   @apply rounded-b-md;
 }
 .vs__selected {
-  @apply m-0 mr-1 border-none py-0 pl-1.5 pr-1.5;
+  @apply m-0 mr-1 border-none py-0 pl-0 pr-1.5;
 }
 .vs__selected-options {
   @apply pl-0;
@@ -262,7 +304,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 focus:outline-none mt-2 max-h-60 overflow-auto rounded-md bg-white py-0 text-base shadow-lg ring-1 ring-opacity-5 sm:text-sm;
 }
 .vs__dropdown-option {
   @apply py-2;

package/src/components/CTable/CTable.vue

@@ -148,7 +148,7 @@
       <template slot="table-row" slot-scope="props">
         <!-- renders if drag and drop is present in table -->
         <span v-if="props.column.field == 'drag'">
-          <c-icon name="menu-solid" type="solid" class="handle h-5 w-5 text-gray-500"></c-icon>
+          <c-icon name="menu-solid" type="solid" class="handle h-5 w-5 text-gray-500" :cursorType="'cursor-move'"></c-icon>
         </span>
         <!-- if customization or adding another form element is required -->
         <span v-else-if="props.column.customizeColumn">