classcard-ui 0.2.195 → 0.2.199

package/package.json

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

package/src/components/CAnchorTabs/CAnchorTabs.vue

@@ -82,7 +82,7 @@ export default {
       console.log("show name", name);
       this.activeTab = name;
       var el = document.getElementById(name);
-      el.scrollIntoView();
+      el.scrollIntoView({ behavior: "smooth" });
     },
     switchTabForMobile(index) {
       var selectedOption = this.tabs[index];

package/src/components/CCheckbox/CCheckbox.vue

@@ -6,7 +6,7 @@
           type="checkbox"
           v-model="checkedValue"
           class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded cursor-pointer disabled:opacity-50"
-          @change="onChange"
+          @click="changeValue"
           :disabled="isDisabled"
         />
       </div>
@@ -32,25 +32,20 @@ export default {
   },
   data() {
     return {
-      checkedValue: this.value,
+      checkedValue: this.value == 0 ? false : true,
     };
   },
   methods: {
-    onChange() {
-      if (this.checkedValue == 1) {
-        this.checkedValue = 0;
-      } else if (this.checkedValue == 0) {
-        this.checkedValue = 1;
-      }
-      this.$emit("onChange", this.checkedValue);
-    },
     changeValue() {
-      if (this.checkedValue == 1) {
-        this.checkedValue = 0;
-      } else if (this.checkedValue == 0) {
-        this.checkedValue = 1;
+      let selectedValue = 0;
+      if (this.checkedValue) {
+        this.checkedValue = false;
+        selectedValue = 0;
+      } else if (!this.checkedValue ) {
+        this.checkedValue = true;
+        selectedValue = 1;
       }
-      this.$emit("onChange", this.checkedValue);
+      this.$emit("onChange", selectedValue);
     },
   },
   watch: {

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/CInputAddon/CInputAddon.vue

@@ -11,10 +11,7 @@
       </div>
       <span v-if="hint" class="text-sm text-gray-500">{{ hint }}</span>
     </div>
-    <div
-      v-if="!inlineAddon && addonType == 'leading'"
-      class="relative mt-1 flex rounded-md"
-    >
+    <div v-if="!inlineAddon && addonType == 'leading'" class="relative mt-1 flex rounded-md">
       <span
         :class="disabled ? 'opacity-50' : ''"
         class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 sm:text-sm"
@@ -25,6 +22,7 @@
         :type="inputType"
         :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-r-md sm:text-sm disabled:opacity-50"
         :placeholder="placeholder"
@@ -37,14 +35,12 @@
         <c-icon name="exclamation-circle" type="solid" class="h-5 w-5"></c-icon>
       </div>
     </div>
-    <div
-      v-if="!inlineAddon && addonType == 'trailing'"
-      class="relative mt-1 flex rounded-md"
-    >
+    <div v-if="!inlineAddon && addonType == 'trailing'" class="relative mt-1 flex rounded-md">
       <input
         :type="inputType"
         :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-l-md sm:text-sm disabled:opacity-50"
         :placeholder="placeholder"
@@ -63,22 +59,18 @@
         {{ addon }}
       </span>
     </div>
-    <div
-      v-if="inlineAddon && addonType == 'trailing'"
-      class="relative mt-1 flex rounded-md"
-    >
+    <div v-if="inlineAddon && addonType == 'trailing'" class="relative mt-1 flex rounded-md">
       <input
         :type="inputType"
         :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"
         :disabled="disabled"
       />
-      <div
-        class="absolute inset-y-0 right-3 flex items-center pointer-events-none"
-      >
+      <div class="absolute inset-y-0 right-3 flex items-center pointer-events-none">
         <span
           v-if="isValidate"
           class="text-gray-500 sm:text-sm"
@@ -94,19 +86,15 @@
         <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"
-      >
+    <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">
         <span class="text-gray-500 sm:text-sm">{{ addon }}</span>
       </div>
       <input
         :type="inputType"
         :value="inputValue"
         @input="$emit('input', $event.target.value)"
+        @blur="$emit('blur', $event.target.value)"
         :class="errorClasses"
         :style="`padding-left:${leftPaddingStyle}`"
         class="focus:ring-indigo-500 focus:border-indigo-500 block w-full rounded-md sm:text-sm disabled:opacity-50"
@@ -123,10 +111,7 @@
     <p v-if="!isValidate" class="mt-2 text-sm text-red-600">
       {{ errorMessage }}
     </p>
-    <p
-      v-if="helpText && isValidate == true"
-      :class="`mt-2 text-sm ${helpTextColorStyles}`"
-    >
+    <p v-if="helpText && isValidate == true" :class="`mt-2 text-sm ${helpTextColorStyles}`">
       {{ helpText }}
     </p>
   </div>
@@ -209,6 +194,7 @@ export default {
       inputValue: this.value,
     };
   },
+  methods: {},
   watch: {
     value() {
       this.inputValue = this.value;

package/src/components/CReorderableStackedList/CReorderableStackedList.vue

@@ -20,7 +20,11 @@
           type="solid"
           class="h-5 w-5 mr-3 text-gray-500"
         ></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"
+        ></c-avatar>
         <div class="flex flex-grow items-center justify-between flex-wrap">
           <div class="ml-3">
             <div class="flex pb-1">
@@ -42,9 +46,14 @@
           <button
             type="button"
             v-if="items.listIcon"
+            @click="$emit('remove')"
             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"
           >
-            <c-icon name="trash" type="solid" class="h-5 w-5 hover:text-red-800"></c-icon>
+            <c-icon
+              name="trash"
+              type="solid"
+              class="h-5 w-5 hover:text-red-800"
+            ></c-icon>
           </button>
         </div>
       </li>

package/src/components/CSelect/CSelect.vue

@@ -214,7 +214,8 @@ export default {
   },
   watch: {
     value() {
-      this.selectedValue = this.value !== null && this.value.option ? this.value.option : this.value;
+      this.selectedValue =
+        this.value !== null && this.value.option ? this.value.option : this.value;
     },
   },
 };

package/src/stories/CCheckbox.stories.js

@@ -7,6 +7,7 @@ export default {
   argTypes: {
     label: String,
     description: String,
+    value: Number,
   },
 };
 
@@ -20,5 +21,9 @@ export const Default = Template.bind({});
 Default.args = {
   label: "Includes",
   description: "Add subjects to include them in the package",
+  value: 1,
   isDisabled: false,
+  onChange(val) {
+    return;
+  },
 };

package/src/stories/CSelect.stories.js

@@ -33,10 +33,10 @@ Default.args = {
   hint: "Optional",
   showImage: true,
   value: {},
-  renderOptionName: "option",
+  renderOptionName: "code",
   options: [
-    { option: "one", value: "onee" },
-    { option: "two", value: "twoo" },
+    { code: "one", value: "onee" },
+    { code: "two", value: "twoo" },
   ],
   addAction: {
     label: "Add new",

package/src/stories/CTable.stories.js

@@ -22,7 +22,7 @@ export default {
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { CTable },
-  template: '<c-table @hideCols="hideCols" @showCheckbox="showCheckbox" v-bind="$props" />',
+  template: '<c-table @hideCols="hideCols" @showCheckbox="showCheckbox" @reordered="handleReorder" v-bind="$props" />',
 });
 
 export const Default = Template.bind({});
@@ -41,28 +41,11 @@ Default.args = {
   showHideColumnList: [
     { label: "", field: "drag", hidden: false },
     {
-      label: "Make",
-      field: "make",
+      label: "Mode",
+      field: "mode",
       hidden: false,
       sortable: true,
-    },
-    { label: "Model", field: "modal", hidden: false, sortable: true },
-    { label: "Staff", field: "staff", hidden: false },
-    { label: "CRR", field: "crr", hidden: false, sortable: true },
-    { label: "Switch", field: "switch", hidden: false },
-    { label: "Icon", field: "color", hidden: false },
-    { label: "", field: "drag", hidden: false },
-    {
-      label: "Make",
-      field: "make",
-      hidden: false,
-      sortable: true,
-    },
-    { label: "Model", field: "modal", hidden: false, sortable: true },
-    { label: "Staff", field: "staff", hidden: false },
-    { label: "CRR", field: "crr", hidden: false, sortable: true },
-    { label: "Switch", field: "switch", hidden: false },
-    { label: "Icon", field: "color", hidden: false },
+    }
   ],
   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,
@@ -85,4 +68,10 @@ Default.args = {
       Default.args.cols[0].hidden = true;
     }
   },
+  handleReorder(val) {
+    Default.args.rows = val;
+    val.forEach((item, index) => {
+      console.log(item);
+    });
+  }
 };