classcard-ui 0.2.211 → 0.2.212

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "classcard-ui",
-  "version": "0.2.211",
+  "version": "0.2.212",
   "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/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/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,
   },
 };