classcard-ui 0.2.210 → 0.2.211

package/src/components/CTable/CTable.vue

@@ -1,72 +1,6 @@
 <template>
   <div>
-
-    <div slot="table-actions" v-if="tableActions" class="bg-gray-50 rounded-lg p-3 mb-4">
-      <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-100 rounded-lg overflow-hidden"
       mode="remote"
       ref="my-table"
       :styleClass="showLoader ? 'vgt-table opacity-50 pointer-events-none' : 'vgt-table'"
@@ -79,7 +13,6 @@
       :rows="rows"
       :search-options="{
         enabled: searching,
-        externalQuery: searchTerm,
         placeholder: searchPlaceholder,
         trigger: 'enter',
       }"
@@ -149,6 +82,63 @@
           {{ 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
@@ -157,7 +147,6 @@
           @setCurrentPage="setCurrentPageRecords"
           @setPreviousPage="setPreviousPageRecords"
           @setNextPage="setNextPageRecords"
-          class="border-t-0"
         ></c-pagination>
       </template>
       <!-- Custom loader for table -->
@@ -196,7 +185,6 @@ 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",
@@ -206,7 +194,6 @@ export default {
     VueGoodTable,
     CPagination,
     CButtonIcon,
-    CInput,
   },
   props: {
     // To show or hide pagination section
@@ -298,7 +285,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'
+                  ? 'text-indigo-700 font-semibold'
                   : 'text-gray-500 hover:text-gray-700'
               "
             >

package/src/components/CTextarea/CTextarea.vue

@@ -14,7 +14,8 @@
         :placeholder="placeholder"
         :rows="rows"
         :class="errorClasses"
-        class="focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm rounded-md"
+        :disabled="disabled"
+        class="focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm rounded-md disabled:opacity-50"
       ></textarea>
       <div
         v-if="!isValidate"
@@ -55,6 +56,10 @@ export default {
     errorMessage: {
       type: String,
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
     errorClasses() {

package/src/icons.js

@@ -52,7 +52,8 @@ export default {
     "M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3",
   "clipboard-check":
     "M9 2a1 1 0 000 2h2a1 1 0 100-2H9z M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm9.707 5.707a1 1 0 00-1.414-1.414L9 12.586l-1.293-1.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
-  cloud: "M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z",
+  cloud:
+    "M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z",
   search: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z",
   "menu-alt-2": "M4 6h16M4 12h16M4 18h7",
   close: "M6 18L18 6M6 6l12 12",
@@ -99,7 +100,8 @@ export default {
     "M18 5v8a2 2 0 01-2 2h-5l-5 4v-4H4a2 2 0 01-2-2V5a2 2 0 012-2h12a2 2 0 012 2zM7 8H5v2h2V8zm2 0h2v2H9V8zm6 0h-2v2h2V8z",
   "check-circle-solid":
     "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",
-  "folder-solid": "M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z",
+  "folder-solid":
+    "M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z",
   "shopping-cart-outline":
     "M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z",
   "external-link-outline":
@@ -184,11 +186,10 @@ export default {
     "M4.083 9h1.946c.089-1.546.383-2.97.837-4.118A6.004 6.004 0 004.083 9zM10 2a8 8 0 100 16 8 8 0 000-16zm0 2c-.076 0-.232.032-.465.262-.238.234-.497.623-.737 1.182-.389.907-.673 2.142-.766 3.556h3.936c-.093-1.414-.377-2.649-.766-3.556-.24-.56-.5-.948-.737-1.182C10.232 4.032 10.076 4 10 4zm3.971 5c-.089-1.546-.383-2.97-.837-4.118A6.004 6.004 0 0115.917 9h-1.946zm-2.003 2H8.032c.093 1.414.377 2.649.766 3.556.24.56.5.948.737 1.182.233.23.389.262.465.262.076 0 .232-.032.465-.262.238-.234.498-.623.737-1.182.389-.907.673-2.142.766-3.556zm1.166 4.118c.454-1.147.748-2.572.837-4.118h1.946a6.004 6.004 0 01-2.783 4.118zm-6.268 0C6.412 13.97 6.118 12.546 6.03 11H4.083a6.004 6.004 0 002.783 4.118z",
   "x-circle-solid":
     "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z",
-  "x-circle-outline": "M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z",
+  "x-circle-outline":
+    "M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z",
   "check-circle-outline": "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z",
   "play-solid":
     "M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z",
-  "phone-outgoing-solid":
-    "M17.924 2.617a.997.997 0 00-.215-.322l-.004-.004A.997.997 0 0017 2h-4a1 1 0 100 2h1.586l-3.293 3.293a1 1 0 001.414 1.414L16 5.414V7a1 1 0 102 0V3a.997.997 0 00-.076-.383z M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z",
   save: "M7.707 10.293a1 1 0 10-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 11.586V6h5a2 2 0 012 2v7a2 2 0 01-2 2H4a2 2 0 01-2-2V8a2 2 0 012-2h5v5.586l-1.293-1.293zM9 4a1 1 0 012 0v2H9V4z",
 };

package/src/main.js

@@ -1,5 +1,4 @@
 import * as components from './components'
-import './assets/tailwind.css'
 
 const ClasscardUI = {
   install(Vue) {

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() {
+  onChange(val) {
     return;
   },
 };

package/src/stories/CMultiselect.stories.js

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

package/src/stories/CPagination.stories.js

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

package/src/stories/CRadio.stories.js

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

package/src/stories/CSwitch.stories.js

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

package/src/stories/CTable.stories.js

@@ -22,8 +22,7 @@ export default {
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { CTable },
-  template:
-    '<c-table @hideCols="hideCols" @showCheckbox="showCheckbox" @reordered="handleReorder" v-bind="$props" />',
+  template: '<c-table @hideCols="hideCols" @showCheckbox="showCheckbox" @reordered="handleReorder" v-bind="$props" />',
 });
 
 export const Default = Template.bind({});
@@ -36,8 +35,8 @@ Default.args = {
       field: "menuOptions",
       hidden: false,
       customizeColumn: true,
-      width: "60px",
-    },
+      width: "60px"
+    }
   ],
   showHideColumnList: [
     { label: "", field: "drag", hidden: false },
@@ -46,100 +45,9 @@ Default.args = {
       field: "mode",
       hidden: false,
       sortable: true,
-    },
-  ],
-  rows: [
-    {
-      id: 5,
-      mode: "ATM Machine 1",
-      sort_order: 2,
-      status: 1,
-      rcInstitutionID: 82,
-      created_at: "2020-09-02T12:53:09.000000Z",
-      updated_at: "2021-11-25T13:13:56.000000Z",
-    },
-    {
-      id: 11,
-      mode: "QA 1",
-      sort_order: 3,
-      status: 1,
-      rcInstitutionID: 82,
-      created_at: "2020-09-04T09:57:47.000000Z",
-      updated_at: "2021-11-25T13:13:56.000000Z",
-    },
-    {
-      id: 7,
-      mode: "ATM Machine 2",
-      sort_order: 4,
-      status: 1,
-      rcInstitutionID: 82,
-      created_at: "2020-09-04T09:45:47.000000Z",
-      updated_at: "2021-11-25T13:13:56.000000Z",
-    },
-    {
-      id: 18,
-      mode: "QA 3",
-      sort_order: 8,
-      status: 1,
-      rcInstitutionID: 82,
-      created_at: "2020-09-04T10:05:15.000000Z",
-      updated_at: "2021-11-25T13:13:56.000000Z",
-    },
-    {
-      id: 12,
-      mode: "QA 2",
-      sort_order: 21,
-      status: 1,
-      rcInstitutionID: 82,
-      created_at: "2020-09-04T09:57:55.000000Z",
-      updated_at: "2021-11-25T13:13:56.000000Z",
-    },
-    {
-      id: 15,
-      mode: "QA 4",
-      sort_order: 22,
-      status: 1,
-      rcInstitutionID: 82,
-      created_at: "2020-09-04T10:00:23.000000Z",
-      updated_at: "2021-11-25T13:13:56.000000Z",
-    },
-    {
-      id: 162,
-      mode: "Yes bank",
-      sort_order: 62,
-      status: 1,
-      rcInstitutionID: 82,
-      created_at: "2020-11-18T09:22:43.000000Z",
-      updated_at: "2021-11-25T13:13:56.000000Z",
-    },
-    {
-      id: 163,
-      mode: "SBI bank",
-      sort_order: 63,
-      status: 1,
-      rcInstitutionID: 82,
-      created_at: "2020-11-18T09:33:17.000000Z",
-      updated_at: "2021-11-25T13:13:56.000000Z",
-    },
-    {
-      id: 164,
-      mode: "BOB bank",
-      sort_order: 64,
-      status: 1,
-      rcInstitutionID: 82,
-      created_at: "2020-11-18T09:35:12.000000Z",
-      updated_at: "2021-11-25T13:13:56.000000Z",
-    },
-    {
-      id: 165,
-      mode: "PNB bank",
-      sort_order: 65,
-      status: 1,
-      rcInstitutionID: 82,
-      created_at: "2020-11-18T09:55:16.000000Z",
-      updated_at: "2021-11-25T13:13:56.000000Z",
-    },
+    }
   ],
+  rows: [{"id":5,"mode":"ATM Machine 1","sort_order":2,"status":1,"rcInstitutionID":82,"created_at":"2020-09-02T12:53:09.000000Z","updated_at":"2021-11-25T13:13:56.000000Z"},{"id":11,"mode":"QA 1","sort_order":3,"status":1,"rcInstitutionID":82,"created_at":"2020-09-04T09:57:47.000000Z","updated_at":"2021-11-25T13:13:56.000000Z"},{"id":7,"mode":"ATM Machine 2","sort_order":4,"status":1,"rcInstitutionID":82,"created_at":"2020-09-04T09:45:47.000000Z","updated_at":"2021-11-25T13:13:56.000000Z"},{"id":18,"mode":"QA 3","sort_order":8,"status":1,"rcInstitutionID":82,"created_at":"2020-09-04T10:05:15.000000Z","updated_at":"2021-11-25T13:13:56.000000Z"},{"id":12,"mode":"QA 2","sort_order":21,"status":1,"rcInstitutionID":82,"created_at":"2020-09-04T09:57:55.000000Z","updated_at":"2021-11-25T13:13:56.000000Z"},{"id":15,"mode":"QA 4","sort_order":22,"status":1,"rcInstitutionID":82,"created_at":"2020-09-04T10:00:23.000000Z","updated_at":"2021-11-25T13:13:56.000000Z"},{"id":162,"mode":"Yes bank","sort_order":62,"status":1,"rcInstitutionID":82,"created_at":"2020-11-18T09:22:43.000000Z","updated_at":"2021-11-25T13:13:56.000000Z"},{"id":163,"mode":"SBI bank","sort_order":63,"status":1,"rcInstitutionID":82,"created_at":"2020-11-18T09:33:17.000000Z","updated_at":"2021-11-25T13:13:56.000000Z"},{"id":164,"mode":"BOB bank","sort_order":64,"status":1,"rcInstitutionID":82,"created_at":"2020-11-18T09:35:12.000000Z","updated_at":"2021-11-25T13:13:56.000000Z"},{"id":165,"mode":"PNB bank","sort_order":65,"status":1,"rcInstitutionID":82,"created_at":"2020-11-18T09:55:16.000000Z","updated_at":"2021-11-25T13:13:56.000000Z"}],
   pagination: true,
   sorting: false,
   searching: true,
@@ -162,8 +70,8 @@ Default.args = {
   },
   handleReorder(val) {
     Default.args.rows = val;
-    val.forEach((item) => {
+    val.forEach((item, index) => {
       console.log(item);
     });
-  },
+  }
 };

package/src/stories/CTextarea.stories.js

@@ -1,16 +1,16 @@
-import CTextarea from '../components/CTextarea/CTextarea.vue';
-import './utils.css'
+import CTextarea from "../components/CTextarea/CTextarea.vue";
+import "./utils.css";
 
 export default {
-  title: 'CTextarea',
+  title: "CTextarea",
   component: CTextarea,
   argTypes: {
     label: String,
     placeholder: String,
     rows: String,
     helpText: String,
-    hint:String,
-    isValidate: Boolean
+    hint: String,
+    isValidate: Boolean,
   },
 };
 
@@ -22,10 +22,11 @@ const Template = (args, { argTypes }) => ({
 
 export const Default = Template.bind({});
 Default.args = {
- label: 'Name',
- placeholder: 'Enter your name',
- rows: '3',
- helpText: 'This information is displayed on booking page',
- hint: 'Optional',
- isValidate: true
+  label: "Name",
+  placeholder: "Enter your name",
+  rows: "3",
+  helpText: "This information is displayed on booking page",
+  hint: "Optional",
+  isValidate: true,
+  disabled: false,
 };