classcard-ui 0.2.211 → 0.2.215

package/package.json

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

package/src/components/CDatepicker/CDatepicker.vue

@@ -37,8 +37,8 @@
             :value="inputValue"
             :class="[
               disabled
-                ? 'border-gray-100 text-gray-400'
-                : 'border-gray-300 text-gray-700',
+                ? 'border-gray-100 border-l-0 text-gray-400'
+                : 'border-gray-300 border-l-0 text-gray-700',
               'bg-white  w-full p-2 appearance-none border  rounded-r-md focus:outline-none focus:border-blue-500 text-sm',
             ]"
             :readonly="disabled"
@@ -87,8 +87,8 @@ export default {
   data() {
     const masks = {
       input: [
-        "YYYY/MM/DD",
         "MMM DD, YYYY",
+        "YYYY/MM/DD",
         "DD-MM-YYYY",
         "DD/MM/YYYY",
         "YYYY-MM-DD",

package/src/components/CIcon/CIcon.vue

@@ -20,7 +20,7 @@
     </svg>
     <svg
       v-if="name !== 'loader' && type == 'solid'"
-      :class=                                                                                         "classes"
+      :class="classes"
       class="cursor-pointer"
       :viewBox="viewBox"
       fill="currentColor"

package/src/components/CInput/CInput.vue

@@ -17,6 +17,7 @@
         :type="type"
         :value="inputValue"
         @input="$emit('input', $event.target.value)"
+        @blur="$emit('blur', $event.target.value)"
         :class="errorClasses"
         class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full px-3 py-2 rounded-md sm:text-sm disabled:opacity-50"
         :placeholder="placeholder"

package/src/components/CInputAddon/CInputAddon.vue

@@ -71,20 +71,19 @@
         :disabled="disabled"
       />
       <div class="absolute inset-y-0 right-3 flex items-center pointer-events-none">
+        <div
+          v-if="!isValidate"
+          class="right-0 pr-2 flex items-center pointer-events-none text-red-600"
+        >
+          <c-icon name="exclamation-circle" type="solid" class="h-5 w-5"></c-icon>
+        </div>
         <span
-          v-if="isValidate"
           class="text-gray-500 sm:text-sm"
           :class="disabled ? 'opacity-50' : ''"
         >
           {{ addon }}
         </span>
       </div>
-      <div
-        v-if="!isValidate"
-        class="absolute inset-y-0 right-0 pr-2 flex items-center pointer-events-none text-red-600"
-      >
-        <c-icon name="exclamation-circle" type="solid" class="h-5 w-5"></c-icon>
-      </div>
     </div>
     <div v-if="inlineAddon && addonType == 'leading'" class="relative mt-1 flex rounded-md">
       <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">

package/src/components/CMultiselect/CMultiselect.vue

@@ -74,7 +74,10 @@ export default {
       required: true,
     },
     label: String,
-    placeholder: String,
+    placeholder:{
+      type: String,
+      default: "Start typing... (min 2 characters) to search options",
+    },
     // whether multiple fields are allowed or not
     isMultiple: {
       type: Boolean,
@@ -170,4 +173,7 @@ export default {
 .vs__dropdown-toggle.vs__dropdown-option--highlight {
   @apply bg-indigo-700 text-white;
 }
+.vs__dropdown-option--highlight { 
+  @apply bg-indigo-700 text-white;
+}
 </style>

package/src/components/CMultiselectr/CMultiselectr.vue

@@ -6,7 +6,7 @@
   </div>
 </template>
 <script>
-import Multiselect from "vue-multiselect";
+
 export default {
   // name: "CMultiselect",
   // components: { Multiselect },

package/src/components/CPagination/CPagination.vue

@@ -1,80 +1,84 @@
 <template>
-  <nav class="px-4 flex items-center justify-between sm:px-0">
-    <div class="-mt-px w-0 flex-1 flex">
-      <a
-        @click="currentPageNumber == '1' ? '' : goToPreviousPage()"
-        class="pt-4 pr-1 inline-flex items-center text-sm font-medium"
-        :class="
-          currentPageNumber == '1'
-            ? 'text-gray-400 pointer-events-none'
-            : 'text-gray-500 hover:text-gray-700 group cursor-pointer'
-        "
-      >
-        <c-icon
-          name="arrow-narrow-left-solid"
-          class="h-5 w-5 mr-3"
-          :class="
-            currentPageNumber == '1'
-              ? 'text-gray-400 pointer-events-none'
-              : 'text-gray-500 group-hover:text-gray-800'
-          "
-          type="solid"
-        ></c-icon>
+  <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
+    <div class="flex-1 flex 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">
         Previous
       </a>
-    </div>
-    <div class="hidden md:-mt-px md:flex">
-      <div
-        v-for="page in pageRange"
-        :key="page"
-        class="text-gray-500 hover:text-gray-700 px-4 inline-flex items-center text-sm font-medium group"
-        :class="[
-          page == currentPageNumber
-            ? 'border-indigo-500 border-t-4 cursor-pointer'
-            : 'hover:border-t-4',
-          page === '...' ? 'cursor-text hover:border-t-4 hover:border-transparent' : '',
-          page !== currentPageNumber && page !== '...'
-            ? 'hover:border-gray-300 hover:border-t-4 cursor-pointer'
-            : '',
-        ]"
-        @click="changePage(page)"
-      >
-        <div class="pt-4 group-hover:-mt-1" v-if="page === '...'">...</div>
-        <div v-else-if="page == currentPageNumber" class="pt-3.5 text-indigo-600">
-          {{ page }}
-        </div>
-        <div class="pt-4 group-hover:-mt-1" v-else>
-          {{ page }}
-        </div>
-      </div>
-    </div>
-    <div class="-mt-px w-0 flex-1 flex justify-end">
-      <a
-        @click="currentPageNumber == lastPageNumber ? '' : goToNextPage()"
-        class="pt-4 pl-1 inline-flex items-center text-sm"
-        :class="
-          currentPageNumber == lastPageNumber
-            ? 'text-gray-400 pointer-events-none'
-            : 'text-gray-500 hover:text-gray-700 group cursor-pointer'
-        "
-      >
+      <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">
         Next
-        <c-icon
-          class="ml-3 h-5 w-5"
-          :class="
-            currentPageNumber == lastPageNumber
-              ? 'text-gray-400 pointer-events-none'
-              : 'text-gray-500 group-hover:text-gray-800'
-          "
-          name="arrow-narrow-right-solid"
-          type="solid"
-        ></c-icon>
       </a>
     </div>
-  </nav>
+    <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
+      <div>
+        <p class="text-sm text-gray-700">
+          Showing
+          <span class="font-medium">1</span>
+          to
+          <span class="font-medium">10</span>
+          of
+          <span class="font-medium">97</span>
+          results
+        </p>
+      </div>
+      <div>
+        <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" 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="
+              currentPageNumber == '1'
+                ? 'text-gray-400 pointer-events-none'
+                : 'text-gray-500 hover:text-gray-700 group cursor-pointer'
+              "
+              >
+              <span class="sr-only">Previous</span>
+              <!-- Heroicon name: solid/chevron-left -->
+              <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
+              </svg>
+            </div>
+            <div
+              v-for="page in pageRange"
+              :key="page"
+              :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'
+                  : '',
+                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 && 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'
+                  : '',
+              ]"
+              @click="changePage(page)"
+            >
+              <div v-if="page === '...'">...</div>
+              <div v-else>
+                {{ page }}
+              </div>
+            </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"
+            @click="currentPageNumber == lastPageNumber ? '' : goToNextPage()"
+            :class="
+              currentPageNumber == lastPageNumber
+                ? 'text-gray-400 pointer-events-none'
+                : 'text-gray-500 hover:text-gray-700 group cursor-pointer'
+            "
+            >
+              <span class="sr-only">Next</span>
+              <!-- Heroicon name: solid/chevron-right -->
+              <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
+              </svg>
+            </div>
+          </div>
+        </nav>
+      </div>
+    </div>
+  </div>
 </template>
 <script>
-import CIcon from "../CIcon/CIcon.vue";
 export default {
   name: "CPagination",
   props: {
@@ -92,7 +96,7 @@ export default {
     },
   },
   components: {
-    CIcon,
+    
   },
   data() {
     return {
@@ -148,4 +152,4 @@ export default {
     },
   },
 };
-</script>
+</script>

package/src/components/CRadio/CRadio.vue

@@ -10,6 +10,7 @@
           <input
             type="radio"
             :value="item.value"
+            :name="name"
             v-model="selectedItem"
             @click="onChange(item.value)"
             class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 cursor-pointer border-gray-300 disabled:opacity-50"
@@ -44,6 +45,10 @@ export default {
     isDisabled: {
       type: Boolean,
     },
+    name: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     return {

package/src/components/CSwitch/CSwitch.vue

@@ -4,17 +4,18 @@
     <div
       v-if="size === 'small'"
       :class="label == '' ? 'items-center' : 'items-start'"
-      class="flex justify-between"
+      class="flex justify-between cursor-pointer"
     >
-      <span class="flex-grow flex flex-col" id="smallleft" v-if="direction == 'left'">
+      <span class="flex-grow flex flex-col" id="smallleft" v-if="direction == 'left'" @click="switchValue">
         <span v-if="label" :class="classes" class="text-gray-900">{{ label }}</span>
         <span v-if="description" class="text-sm text-gray-500">{{ description }}</span>
       </span>
       <button
         type="button"
-        class="flex-shrink-0 group relative rounded-full inline-flex items-center justify-center h-5 w-10 cursor-pointer focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+        class="flex-shrink-0 group relative rounded-full inline-flex items-center justify-center h-5 w-10 cursor-pointer focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
         aria-pressed="false"
         @click="switchValue"
+        :disabled="disabled"
       >
         <span class="sr-only">Use setting</span>
         <span
@@ -32,14 +33,14 @@
           class="pointer-events-none absolute left-0 inline-block h-5 w-5 border border-gray-200 rounded-full bg-white transform ring-0 transition-transform ease-in-out duration-200"
         ></span>
       </button>
-      <span class="flex flex-col" id="toggleLabel" v-if="direction == 'right'">
+      <span class="flex flex-col" id="toggleLabel" v-if="direction == 'right'" @click="switchValue">
         <span v-if="label" :class="classes" class="text-gray-900">{{ label }}</span>
         <span v-if="description" class="text-sm text-gray-500">{{ description }}</span>
       </span>
     </div>
     <!-- large toggle -->
-    <div v-else :class="label == '' ? 'items-center' : 'items-start'" class="flex justify-between">
-      <span class="flex-grow flex flex-col" id="toggleLabel" v-if="direction == 'left'">
+    <div v-else :class="label == '' ? 'items-center' : 'items-start'" class="flex justify-between cursor-pointer">
+      <span class="flex-grow flex flex-col" id="toggleLabel" v-if="direction == 'left'" @click="switchValue">
         <span v-if="label" :class="classes" class="text-gray-900">{{ label }}</span>
         <span v-if="description" class="text-sm text-gray-500">{{ description }}</span>
       </span>
@@ -48,7 +49,8 @@
         aria-pressed="false"
         :class="{ 'bg-indigo-600': isToggle == 1, 'bg-gray-200': isToggle == 0 }"
         @click="switchValue"
-        class="relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+        class="relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
+        :disabled="disabled"
       >
         <span class="sr-only">Use setting</span>
         <span
@@ -57,7 +59,7 @@
           class="inline-block h-5 w-5 rounded-full bg-white transform ring-0 transition ease-in-out duration-200"
         ></span>
       </button>
-      <span class="flex flex-col" id="toggleLabel" v-if="direction == 'right'">
+      <span class="flex flex-col" id="toggleLabel" v-if="direction == 'right'" disabled:opacity-50>
         <span v-if="label" :class="classes" class="text-gray-900">{{ label }}</span>
         <span v-if="description" class="text-sm text-gray-500">{{ description }}</span>
       </span>
@@ -97,12 +99,7 @@ export default {
   },
   methods: {
     switchValue() {
-      // this.isToggle = !this.isToggle;
-      if (this.isToggle == 1) {
-        this.isToggle = 0;
-      } else if (this.isToggle == 0) {
-        this.isToggle = 1;
-      }
+      this.isToggle = this.isToggle === 1 ? 0 : 1;
       this.$emit("returnToggleValue", this.isToggle);
     },
   },

package/src/components/CTable/CTable.vue

@@ -1,6 +1,72 @@
 <template>
   <div>
+
+    <div slot="table-actions" v-if="tableActions" class="bg-gray-100 rounded-lg p-3 mb-6">
+      <div class="flex justify-between">
+        <div v-if="searching">
+          <c-input v-model="searchTerm" :isValidate="searching" :placeholder="searchPlaceholder" class="-mt-1 w-56" type="text"></c-input>
+        </div>
+        <div class="flex">
+          <!-- dropdown icon on top right of table -->
+          <div class="relative inline-block text-left">
+            <!-- button to show list of columns to show  hide in table -->
+            <div>
+              <button
+                @click="toggleDropdown = !toggleDropdown"
+                class="inline-flex justify-center w-full rounded-md border border-gray-200 shadow-sm px-2 py-2 bg-white text-sm font-medium hover:bg-gray-50 focus:outline-none focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600"
+                aria-haspopup="true"
+                aria-expanded="true"
+                @blur="toggleDropdown = false"
+              >
+                <c-icon name="view-board" type="solid" class="text-gray-400 h-5 w-5"></c-icon>
+                <c-icon
+                  name="chevron-down"
+                  type="solid"
+                  class="ml-1 text-gray-400 h-5 w-5"
+                ></c-icon>
+              </button>
+            </div>
+            <!-- dropdown having list of all columns to show hide -->
+            <div
+              v-show="toggleDropdown"
+              class="origin-top-right absolute right-0 mt-2 -mr-1 w-56 rounded-md shadow-lg bg-white ring-1 ring-gray-900 ring-opacity-5 z-100 overflow-y-auto max-h-96"
+            >
+              <div
+                class="py-1"
+                role="menu"
+                aria-orientation="vertical"
+                aria-labelledby="option-menu"
+              >
+                <a
+                  href="#"
+                  v-for="column in showHideColumnList"
+                  v-bind:key="column.field"
+                  class="flex block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
+                  role="menuitem"
+                >
+                  <c-checkbox
+                    :label="column.label"
+                    @onChange="showHideColumn($event, column.field)"
+                    :value="!column.hidden"
+                  ></c-checkbox>
+                </a>
+              </div>
+            </div>
+          </div>
+
+          <div>
+            <c-button-icon
+              type="white"
+              :icon="{ name: 'download-solid', type: 'solid', class: 'h-5 w-5 text-gray-400' }"
+              class="ml-3"
+            ></c-button-icon>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <vue-good-table
+      class="border-solid border-2 border-gray-200 rounded-lg"
       mode="remote"
       ref="my-table"
       :styleClass="showLoader ? 'vgt-table opacity-50 pointer-events-none' : 'vgt-table'"
@@ -13,6 +79,7 @@
       :rows="rows"
       :search-options="{
         enabled: searching,
+        externalQuery: searchTerm,
         placeholder: searchPlaceholder,
         trigger: 'enter',
       }"
@@ -82,63 +149,6 @@
           {{ props.formattedRow[props.column.field] }}
         </span>
       </template>
-      <div slot="table-actions" v-if="tableActions">
-        <div class="flex flex-row-reverse">
-          <!-- dropdown icon on top right of table -->
-          <div>
-            <c-button-icon
-              type="white"
-              :icon="{ name: 'download', type: 'outline', class: 'h-5 w-5 text-gray-400' }"
-              class="ml-3"
-            ></c-button-icon>
-          </div>
-          <div class="relative inline-block text-left">
-            <!-- button to show list of columns to show  hide in table -->
-            <div>
-              <button
-                @click="toggleDropdown = !toggleDropdown"
-                class="inline-flex justify-center w-full rounded-md border border-gray-200 shadow-sm px-2 py-2 bg-white text-sm font-medium hover:bg-gray-50 focus:outline-none focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600"
-                aria-haspopup="true"
-                aria-expanded="true"
-              >
-                <c-icon name="view-board" type="solid" class="text-gray-400 h-5 w-5"></c-icon>
-                <c-icon
-                  name="chevron-down"
-                  type="solid"
-                  class="ml-1 text-gray-400 h-5 w-5"
-                ></c-icon>
-              </button>
-            </div>
-            <!-- dropdown having list of all columns to show hide -->
-            <div
-              v-show="toggleDropdown"
-              class="origin-top-right absolute right-0 mt-2 -mr-1 w-56 rounded-md shadow-lg bg-white ring-1 ring-gray-900 ring-opacity-5 z-100 overflow-y-auto max-h-96"
-            >
-              <div
-                class="py-1"
-                role="menu"
-                aria-orientation="vertical"
-                aria-labelledby="option-menu"
-              >
-                <a
-                  href="#"
-                  v-for="column in showHideColumnList"
-                  v-bind:key="column.field"
-                  class="flex block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
-                  role="menuitem"
-                >
-                  <c-checkbox
-                    :label="column.label"
-                    @onChange="showHideColumn($event, column.field)"
-                    :value="!column.hidden"
-                  ></c-checkbox>
-                </a>
-              </div>
-            </div>
-          </div>
-          <slot name="action"></slot>
-        </div>
-      </div>
       <!-- Custom pagination component -->
       <template v-if="pagination" slot="pagination-bottom">
         <c-pagination
@@ -185,6 +195,7 @@ import CButtonIcon from "../CButtonIcon/CButtonIcon.vue";
 import "vue-good-table/dist/vue-good-table.css";
 import { VueGoodTable } from "vue-good-table";
 import Sortable from "@shopify/draggable/lib/es5/sortable.js";
+import CInput from '../CInput/CInput.vue';
 
 export default {
   name: "CTable",
@@ -194,6 +205,7 @@ export default {
     VueGoodTable,
     CPagination,
     CButtonIcon,
+    CInput,
   },
   props: {
     // To show or hide pagination section
@@ -285,7 +297,7 @@ export default {
     return {
       toggleDropdown: false,
       showLoader: this.isLoading,
-      searchTerm: "",
+      searchTerm: '',
       paginationRecords: this.paginationData,
       reorderedArray: [...this.rows],
     };

package/src/components/CTabs/CTabs.vue

@@ -42,7 +42,7 @@
             <span
               :class="
                 activeTab == tab.text
-                  ? 'text-indigo-700 font-semibold'
+                  ? 'text-indigo-700'
                   : 'text-gray-500 hover:text-gray-700'
               "
             >

package/src/stories/CCheckbox.stories.js

@@ -23,7 +23,7 @@ Default.args = {
   description: "Add subjects to include them in the package",
   value: 1,
   isDisabled: false,
-  onChange(val) {
+  onChange() {
     return;
   },
 };

package/src/stories/CMultiselect.stories.js

@@ -8,6 +8,7 @@ export default {
     options: Array,
     label: String,
     filterable: Boolean,
+    optionLabel: String,
   },
 };
 
@@ -19,7 +20,6 @@ const Template = (args, { argTypes }) => ({
 
 export const Default = Template.bind({});
 Default.args = {
-  // options: ["list", "of", "options"],
   options: [
     {
       text: "Subjects",
@@ -90,6 +90,7 @@ Default.args = {
       children: [{ id: "15820_Package", text: "Mathematics" }],
     },
   ],
+  optionLabel: "text",
   label: "Active",
   showOptionImage: true,
   filterable: false,

package/src/stories/CPagination.stories.js

@@ -4,7 +4,12 @@ import "./utils.css";
 export default {
   title: "CPagination",
   component: CPagination,
-  argTypes: {},
+  argTypes: {
+    setPaginationRecords: {
+      currentPage: 1,
+      lastPage: 10,
+    }
+  },
 };
 
 const Template = (args, { argTypes }) => ({

package/src/stories/CRadio.stories.js

@@ -32,4 +32,5 @@ Default.args = {
   ],
   selectedOption: "value1",
   isDisabled: false,
+  name: "radio"
 };

package/src/stories/CSwitch.stories.js

@@ -9,6 +9,7 @@ export default {
     description: String,
     classes: String,
     value: Boolean,
+    disabled: Boolean,
   },
 };