classcard-ui 0.2.265 → 0.2.270

package/package.json

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

package/src/components/CButtonWithDropdown/CButtonWithDropdown.vue

@@ -5,7 +5,19 @@
         :class="classes"
         :type="type"
         @click="handleButtonClick"
-        class="relative inline-flex items-center px-4 py-2 rounded-l-md text-sm font-medium focus:z-10 focus:outline-none focus:ring-1"
+        class="
+          relative
+          inline-flex
+          items-center
+          px-4
+          py-2
+          rounded-l-md
+          text-sm
+          font-medium
+          focus:z-10
+          focus:outline-none
+          focus:ring-1
+        "
       >
         {{ selectedValue ? selectedValue : label }}
       </button>
@@ -15,7 +27,20 @@
           @blur="close()"
           :type="type"
           :class="classes"
-          class="relative inline-flex items-center px-2 py-2 rounded-r-md text-sm font-medium t focus:z-10 focus:outline-none focus:ring-1"
+          class="
+            relative
+            inline-flex
+            items-center
+            px-2
+            py-2
+            rounded-r-md
+            text-sm
+            font-medium
+            t
+            focus:z-10
+            focus:outline-none
+            focus:ring-1
+          "
         >
           <span class="sr-only">Open options</span>
           <c-icon name="chevron-down" type="solid" class="h-5 w-5"></c-icon>
@@ -23,7 +48,18 @@
         <div
           v-if="toggleDropdown"
           :class="dropdownPositionClass"
-          class="origin-top-right absolute right-0 z-10 mt-2 -mr-1 w-56 rounded-md shadow-lg bg-white ring-1 ring-gray-900 ring-opacity-5"
+          class="
+            origin-top-right
+            absolute
+            right-0
+            z-10
+            mt-2
+            w-56
+            rounded-md
+            shadow-lg
+            bg-white
+            ring-1 ring-gray-900 ring-opacity-5
+          "
         >
           <div
             class="py-1"
@@ -35,7 +71,15 @@
               v-for="item in items"
               v-bind:key="item.items"
               @mousedown="selectOption($event, item.value)"
-              class="block px-4 py-2 text-sm text-left text-gray-700 hover:bg-gray-100 hover:text-gray-900 cursor-pointer"
+              class="
+                block
+                px-4
+                py-2
+                text-sm text-left text-gray-700
+                hover:bg-gray-100
+                hover:text-gray-900
+                cursor-pointer
+              "
               role="menuitem"
             >
               {{ item.text }}

package/src/components/CDatepicker/CDatepicker.vue

@@ -17,19 +17,14 @@
           <button
             type="button"
             :class="[
-              disabled
-                ? 'border-gray-100 pointer-events-none'
-                : 'border-gray-300',
-              'p-2 bg-blue-100 border  hover:bg-blue-200 text-blue-600 rounded-l-md focus:bg-blue-500 focus:text-white focus:border-blue-500 focus:outline-none',
+              disabled ? 'border-gray-100 pointer-events-none' : 'border-gray-300',
+              'shadow-sm p-2 bg-blue-100 border  hover:bg-blue-200 text-blue-600 rounded-l-md focus:bg-blue-500 focus:text-white focus:border-blue-500 focus:outline-none',
             ]"
             @click="togglePopover()"
           >
             <c-icon
               name="calendar-solid"
-              :class="[
-                disabled ? 'text-gray-200' : 'text-gray-400',
-                'h-5 w-5 ',
-              ]"
+              :class="[disabled ? 'text-gray-200' : 'text-gray-400', 'h-5 w-5 ']"
               type="solid"
             ></c-icon>
           </button>
@@ -39,7 +34,7 @@
               disabled
                 ? 'border-gray-100 border-l-0 text-gray-400'
                 : 'border-gray-300 border-l-0 text-gray-900',
-              'bg-white w-full p-2 appearance-none border  rounded-r-md focus:outline-none focus:border-blue-500 text-sm',
+              'shadow-sm bg-white w-full p-2 appearance-none border  rounded-r-md focus:outline-none focus:border-blue-500 text-sm',
             ]"
             :readonly="disabled"
             @click="togglePopover()"
@@ -91,14 +86,7 @@ export default {
   },
   data() {
     const masks = {
-      input: [
-        "MMM DD, YYYY",
-        "YYYY/MM/DD",
-        "DD-MM-YYYY",
-        "DD/MM/YYYY",
-        "YYYY-MM-DD",
-        "L",
-      ],
+      input: ["MMM DD, YYYY", "YYYY/MM/DD", "DD-MM-YYYY", "DD/MM/YYYY", "YYYY-MM-DD", "L"],
     };
     return {
       masks,

package/src/components/CEditor/CEditor.vue

@@ -5,7 +5,7 @@
       <p class="text-sm text-gray-500" v-if="hint">{{ hint }}</p>
     </div>
     <quill-editor
-      class="mt-1 text-sm"
+      class="mt-1 text-sm shadow-sm"
       :value="content"
       :options="editorOption"
       @change="onChange($event)"

package/src/components/CInput/CInput.vue

@@ -19,7 +19,7 @@
         @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 text-gray-900"
+        class="shadow-sm 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 text-gray-900"
         :placeholder="placeholder"
         :disabled="disabled"
       />

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' : ''"
         v-if="addon"
@@ -28,7 +25,7 @@
         @input="$emit('input', $event.target.value)"
         @blur="$emit('blur', $event.target.value)"
         :class="{ ...errorClasses, 'rounded-l-md': !addon }"
-        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 text-gray-900"
+        class="shadow-sm 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 text-gray-900"
         :placeholder="placeholder"
         :disabled="disabled"
       />
@@ -39,17 +36,14 @@
         <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 text-gray-900"
+        class="shadow-sm 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 text-gray-900"
         :placeholder="placeholder"
         :disabled="disabled"
       />
@@ -66,48 +60,31 @@
         {{ 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 text-gray-900"
+        class="shadow-sm 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 text-gray-900"
         :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">
         <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>
+          <c-icon name="exclamation-circle" type="solid" class="h-5 w-5"></c-icon>
         </div>
-        <span
-          class="text-gray-500 sm:text-sm"
-          :class="disabled ? 'opacity-50' : ''"
-        >
+        <span class="text-gray-500 sm:text-sm" :class="disabled ? 'opacity-50' : ''">
           {{ addon }}
         </span>
       </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
@@ -117,7 +94,7 @@
         @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 text-gray-900"
+        class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full rounded-md sm:text-sm disabled:opacity-50 text-gray-900"
         :placeholder="placeholder"
         :disabled="disabled"
       />
@@ -131,10 +108,7 @@
     <p v-if="!isValidate" class="mt-2 text-sm text-red-600 text-left">
       {{ 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>

package/src/components/CMultiselect/CMultiselect.vue

@@ -210,6 +210,9 @@ export default {
 .vs__selected {
   @apply border-none m-0 py-0 pl-0 pr-1.5 mr-1;
 }
+.vs__selected-options {
+  @apply pl-0;
+}
 .vs__search,
 .vs__search:focus {
   @apply m-0 p-0;

package/src/components/CPhoneNumber/CPhoneNumber.vue

@@ -1,12 +1,8 @@
 <template>
   <div>
     <label class="text-sm text-gray-900">{{ label }}</label>
-    <div class="w-full mt-1">
-      <vue-tel-input
-        v-bind="bindProps"
-        :autoFormat="false"
-        v-model="value"
-      ></vue-tel-input>
+    <div class="w-full mt-1 shadow-sm">
+      <vue-tel-input v-bind="bindProps" :autoFormat="false" v-model="value"></vue-tel-input>
     </div>
   </div>
 </template>

package/src/components/CSelect/CSelect.vue

@@ -114,9 +114,7 @@
                 </span>
               </span>
 
-              <span
-                class="text-indigo-600 absolute inset-y-0 right-0 flex items-center pr-4"
-              >
+              <span class="text-indigo-600 absolute inset-y-0 right-0 flex items-center pr-4">
                 <c-icon
                   id="list-icon"
                   v-show="showSelectedValue"
@@ -183,7 +181,7 @@ export default {
     // icons in dropdown list
     icon: { type: Object },
     // value to set as default option in dropdown
-    value: { type: [Object, String] },
+    value: { type: [Object, String], default: null },
     // type of dropdown - gray,tertiary or default
     type: {
       type: String,
@@ -202,10 +200,7 @@ export default {
   data() {
     return {
       toggleDropdown: false,
-      selectedValue:
-        this.value !== null && this.value.option
-          ? this.value.option
-          : this.value,
+      selectedValue: this.value !== null && this.value.option ? this.value.option : this.value,
       showSelectedValue: false,
       showFocus: false,
       selectSearch: null,
@@ -217,7 +212,7 @@ export default {
       return {
         "text-gray-900 hover:bg-gray-200 bg-gray-100 focus:ring-2 focus:border-gray-200 focus:ring-gray-200 focus:ring-offset-2 shadow-sm":
           this.type == "gray",
-        "bg-white hover:bg-indigo-100 text-indigo-600 hover:text-indigo-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-200":
+        "bg-white border border-gray-200 hover:bg-indigo-100 text-indigo-600 hover:text-indigo-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-200":
           this.type == "tertiary",
         "border border-gray-300 focus:ring-indigo-500 focus:border-indigo-500 bg-white shadow-sm focus:ring-1":
           this.type == null,
@@ -248,8 +243,7 @@ export default {
       let options = [...this.options];
       this.renderOptions = options.filter((option) => {
         isNumber(option[this.renderOptionName])
-          ? (option[this.renderOptionName] =
-              option[this.renderOptionName].toString())
+          ? (option[this.renderOptionName] = option[this.renderOptionName].toString())
           : "";
         return option[this.renderOptionName]
           .toLowerCase()
@@ -260,9 +254,7 @@ export default {
   watch: {
     value() {
       this.selectedValue =
-        this.value !== null && this.value.option
-          ? this.value.option
-          : this.value;
+        this.value !== null && this.value.option ? this.value.option : this.value;
     },
     options() {
       this.renderOptions = this.options;

package/src/components/CTextarea/CTextarea.vue

@@ -16,7 +16,7 @@
         :rows="rows"
         :class="errorClasses"
         :disabled="disabled"
-        class="focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm rounded-md disabled:opacity-50 text-gray-900"
+        class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm rounded-md disabled:opacity-50 text-gray-900"
       ></textarea>
       <div
         v-if="!isValidate"

package/src/icons.js

@@ -52,8 +52,7 @@ 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",
@@ -101,8 +100,7 @@ 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":
@@ -187,8 +185,7 @@ 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",
   "x-outline": "M6 18L18 6M6 6l12 12",
   "check-circle-outline": "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z",
   "play-solid":
@@ -196,4 +193,6 @@ export default {
   "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",
+  "clipboard-list-solid":
+    "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-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z",
 };