classcard-ui 0.2.392 → 0.2.395

package/package.json

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

package/src/components/CMultiselect/CMultiselect.vue

@@ -291,7 +291,7 @@ export default {
   @apply rounded-b-md;
 }
 .vs__selected {
-  @apply m-0 mr-1 border-none py-0 pl-0 pr-1.5;
+  @apply m-0 mr-1 border-none py-0 pl-1.5 pr-1.5;
 }
 .vs__selected-options {
   @apply pl-0;

package/src/components/CPagination/CPagination.vue

@@ -1,22 +1,22 @@
 <template>
   <div
-    class="bg-white px-4 py-3 flex items-center justify-between border-gray-200 sm:px-6"
+    class="flex items-center justify-between border-gray-200 bg-white px-4 py-3 sm:px-6"
   >
-    <div class="flex-1 flex justify-between sm:hidden">
+    <div class="flex flex-1 justify-between sm:hidden">
       <a
         href="#"
-        class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
+        class="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
       >
         Previous
       </a>
       <a
         href="#"
-        class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
+        class="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
       >
         Next
       </a>
     </div>
-    <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
+    <div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
       <div>
         <p class="text-sm text-gray-700">
           Showing
@@ -24,24 +24,26 @@
           to
           <span class="font-medium">{{ setPaginationRecords.to }}</span>
           of
-          <span class="font-medium">{{ setPaginationRecords.totalRecords }}</span>
+          <span class="font-medium">{{
+            setPaginationRecords.totalRecords
+          }}</span>
           results
         </p>
       </div>
       <div>
         <nav
-          class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px"
+          class="relative z-0 inline-flex -space-x-px rounded-md shadow-sm"
           aria-label="Pagination"
         >
           <div class="hidden md:-mt-px md:flex">
             <div
               href="#"
               @click="currentPageNumber == '1' ? '' : goToPreviousPage()"
-              class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-r-0 border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
+              class="relative inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50"
               :class="
                 currentPageNumber == '1'
-                  ? 'text-gray-400 pointer-events-none'
-                  : 'text-gray-500 hover:text-gray-700 group cursor-pointer'
+                  ? 'pointer-events-none text-gray-400'
+                  : 'group cursor-pointer text-gray-500 hover:text-gray-700'
               "
             >
               <span class="sr-only">Previous</span>
@@ -66,17 +68,15 @@
               class="cursor-pointer"
               :class="[
                 page == currentPageNumber
-                  ? 'z-10 bg-indigo-50 border-indigo-500 text-indigo-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium'
+                  ? 'relative z-10 inline-flex items-center border border-indigo-500 bg-indigo-50 px-4 py-2 text-sm font-medium text-indigo-600'
                   : '',
                 page === '...'
-                  ? 'bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border border-r-0 text-sm font-medium'
+                  ? 'relative inline-flex items-center border border-r-0 border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50'
                   : '',
                 page !== currentPageNumber && page !== '...'
-                  ? 'bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border border-r-0 text-sm font-medium'
-                  : '',
-                page == currentPageNumber + 1
-                  ? 'border-l-0'
+                  ? 'relative inline-flex items-center border border-r-0 border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50'
                   : '',
+                page == currentPageNumber + 1 ? 'border-l-0' : '',
               ]"
               @click="changePage(page)"
             >
@@ -87,12 +87,12 @@
             </div>
             <div
               href="#"
-              class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
+              class="relative inline-flex items-center rounded-r-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50"
               @click="currentPageNumber == lastPageNumber ? '' : goToNextPage()"
               :class="
                 currentPageNumber == lastPageNumber
-                  ? 'text-gray-400 pointer-events-none'
-                  : 'text-gray-500 hover:text-gray-700 group cursor-pointer'
+                  ? 'pointer-events-none text-gray-400'
+                  : 'group cursor-pointer text-gray-500 hover:text-gray-700'
               "
             >
               <span class="sr-only">Next</span>
@@ -118,6 +118,8 @@
   </div>
 </template>
 <script>
+import { isEqual } from "lodash-es";
+
 export default {
   name: "CPagination",
   props: {
@@ -188,5 +190,13 @@ export default {
       this.$emit("setNextPage", nextPage);
     },
   },
+  watch: {
+    setPaginationRecords(newVal, oldVal) {
+      if (!isEqual(newVal, oldVal)) {
+        this.currentPageNumber = newVal.currentPage;
+        this.lastPageNumber = newVal.lastPage;
+      }
+    },
+  },
 };
 </script>

package/src/components/CStackedList/CStackedList.vue

@@ -4,7 +4,7 @@
       <li
         v-for="items in listItems"
         v-bind:key="items.size"
-        class="py-4 flex justify-between items-center"
+        class="flex items-center justify-between py-4"
         :class="{ 'cursor-pointer': items.collapse, 'border-b border-gray-200': divider === true }"
         v-on="items.collapse ? { click: () => collapseList() } : null"
       >
@@ -13,15 +13,20 @@
             v-if="items.collapse"
             :name="showSection ? 'chevron-down' : 'chevron-right'"
             type="solid"
-            class="mt-3 mr-3 text-gray-900 h-5 w-5"
+            class="mt-3 mr-3 h-5 w-5 shrink-0 text-gray-900"
           ></c-icon>
-          <c-avatar :size="items.size" :rounded="items.rounded" :image="items.image"></c-avatar>
+          <c-avatar
+            :size="items.size"
+            :rounded="items.rounded"
+            :image="items.image"
+            class="shrink-0"
+          ></c-avatar>
           <div class="ml-3">
             <div class="flex pb-1">
               <p class="text-sm font-medium text-gray-900">
                 {{ items.heading }}
               </p>
-              <c-tag v-if="items.tag" label="Active" class="ml-2.5 relative bottom-0.5"></c-tag>
+              <c-tag v-if="items.tag" :label="tagLabel" class="relative bottom-0.5 ml-2.5"></c-tag>
             </div>
             <p class="text-sm text-gray-500">{{ items.description }}</p>
             <div v-if="showSection" class="mt-3">
@@ -38,7 +43,7 @@
         <button
           v-if="items.listIcon"
           type="button"
-          class="rounded-full h-8 w-8 flex items-center justify-center text-gray-500 hover:bg-red-100 hover:text-red-800 focus:outline-none focus:ring-2 focus:ring-red-500"
+          class="focus:outline-none flex h-8 w-8 items-center justify-center rounded-full text-gray-500 hover:bg-red-100 hover:text-red-800 focus:ring-2 focus:ring-red-500"
         >
           <c-icon name="trash" type="solid" class="h-5 w-5 hover:text-red-800"></c-icon>
         </button>

package/src/components/CTable/CTable.vue

@@ -397,9 +397,9 @@ export default {
     isLoading() {
       this.showLoader = this.isLoading;
     },
-    paginationData() {
-      if (!isEqual(this.paginationRecords, this.paginationData)) {
-        this.paginationRecords = this.paginationData;
+    paginationData(newValue, oldValue) {
+      if (!isEqual(newValue, oldValue)) {
+        this.paginationRecords = newValue;
       }
     },
   },

package/src/stories/CStackedList.stories.js

@@ -1,12 +1,12 @@
-import CStackedList from '../components/CStackedList/CStackedList.vue';
-import './utils.css'
+import CStackedList from "../components/CStackedList/CStackedList.vue";
+import "./utils.css";
 
 export default {
-  title: 'CStackedList',
+  title: "CStackedList",
   component: CStackedList,
   argTypes: {
     listItems: { control: { type: "object" } },
-    divider: Boolean
+    divider: Boolean,
   },
 };
 
@@ -18,8 +18,19 @@ const Template = (args, { argTypes }) => ({
 
 export const Default = Template.bind({});
 Default.args = {
-    listItems: [
-        { image: "https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80", heading: "Maths-Level1", description: "calvin.hawkins@example.com", size:"medium", rounded:false, tag:false, collapse:false, listIcon: true },
-      ],
-    divider: true
+  listItems: [
+    {
+      image:
+        "https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
+      heading: "Maths-Level1",
+      tagLabel: "test",
+      description: "calvin.hawkins@example.com",
+      size: "medium",
+      rounded: false,
+      tag: false,
+      collapse: false,
+      listIcon: true,
+    },
+  ],
+  divider: true,
 };