classcard-ui 0.2.301 → 0.2.305

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "classcard-ui",
-  "version": "0.2.301",
+  "version": "0.2.305",
   "main": "dist/classcard-ui.common.js",
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -25,7 +25,6 @@
     "gridjs-selection": "^3.4.0",
     "gridjs-vue": "^3.4.0",
     "lodash-es": "^4.17.21",
-    "uppload": "^3.2.1",
     "v-calendar": "^2.3.2",
     "vue": "^2.6.14",
     "vue-good-table": "^2.21.8",

package/src/components/CDatepicker/CDatepicker.vue

@@ -1,9 +1,13 @@
 <template>
   <div>
-    <div v-if="label">
-      <label class="block text-sm font-medium text-gray-900">
-        {{ label }}
-      </label>
+    <div class="flex items-center">
+      <div v-if="label">
+        <label class="block text-sm font-medium text-gray-900">
+          {{ label }}
+        </label>
+      </div>
+      <!-- asterisk sign to render if field is required -->
+      <p v-if="isRequired" class="ml-1 text-red-600">*</p>
     </div>
     <v-date-picker
       :class="{ 'inline-block h-full': true, 'w-full': isExpanded }"
@@ -14,12 +18,12 @@
       firstDayOfWeek="2"
     >
       <template v-slot="{ inputValue, togglePopover }">
-        <div class="flex items-center mt-1">
+        <div class="mt-1 flex items-center">
           <button
             type="button"
             :class="[
-              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',
+              disabled ? 'pointer-events-none border-gray-100' : 'border-gray-300',
+              'bg-blue-100 hover:bg-blue-200 text-blue-600 focus:bg-blue-500  focus:border-blue-500 focus:outline-none rounded-l-md border p-2 shadow-sm focus:text-white',
             ]"
             @click="togglePopover()"
           >
@@ -33,9 +37,9 @@
             :value="inputValue"
             :class="[
               disabled
-                ? 'border-gray-100 border-l-0 text-gray-400'
-                : 'border-gray-300 border-l-0 text-gray-900',
-              'shadow-sm bg-white w-full p-2 appearance-none border  rounded-r-md focus:outline-none focus:border-blue-500 text-sm',
+                ? 'border-l-0 border-gray-100 text-gray-400'
+                : 'border-l-0 border-gray-300 text-gray-900',
+              'focus:outline-none focus:border-blue-500 w-full appearance-none rounded-r-md border  bg-white p-2 text-sm shadow-sm',
             ]"
             :readonly="disabled"
             @click="togglePopover()"
@@ -43,7 +47,11 @@
         </div>
       </template>
     </v-date-picker>
-    <p v-if="helpText" class="mt-1 text-sm text-gray-500">
+    <!-- validation error message -->
+    <p v-if="!isValidate" class="mt-2 text-sm text-red-600">
+      {{ errorMessage }}
+    </p>
+    <p v-if="helpText && isValidate == true" class="mt-1 text-sm text-gray-500">
       {{ helpText }}
     </p>
   </div>
@@ -63,6 +71,9 @@ export default {
     classes: {
       type: String,
     },
+    isRequired: {
+      type: Boolean,
+    },
     label: {
       type: String,
     },
@@ -84,6 +95,13 @@ export default {
       type: Boolean,
       default: false,
     },
+    isValidate: {
+      type: Boolean,
+      default: true,
+    },
+    errorMessage: {
+      type: String,
+    },
   },
   data() {
     const masks = {

package/src/components/CMultiselect/CMultiselect.vue

@@ -1,11 +1,13 @@
 <template>
   <div>
-    <label v-if="label" class="text-sm font-medium text-gray-900">{{
-      label
-    }}</label>
+    <div class="flex items-center">
+      <label v-if="label" class="text-sm font-medium text-gray-900">{{ label }}</label>
+      <!-- asterisk sign to render if field is required -->
+      <p v-if="isRequired" class="ml-1 text-red-600">*</p>
+    </div>
     <p v-if="subLabel" class="text-sm text-gray-500">{{ subLabel }}</p>
     <v-select
-      class="text-sm mt-1"
+      class="mt-1 text-sm"
       :placeholder="placeholder"
       :multiple="isMultiple"
       :taggable="isTaggable"
@@ -24,7 +26,7 @@
         <span v-bind="attributes">
           <svg
             xmlns="http://www.w3.org/2000/svg"
-            class="h-5 w-5 text-gray-400 cursor-pointer"
+            class="h-5 w-5 cursor-pointer text-gray-400"
             viewBox="0 0 20 20"
             fill="currentColor"
           >
@@ -38,14 +40,12 @@
       </template>
       <!-- eslint-disable-next-line vue/no-unused-vars  -->
       <template #no-options="{ search, searching, loading }">
-        <span v-if="search.length < 1"
-          >Start typing to search for options...</span
-        >
+        <span v-if="search.length < 1">Start typing to search for options...</span>
         <span v-else>No options found, try searching something else.</span>
       </template>
       <template #spinner="{ loading }">
         <svg
-          class="animate-spin h-5 w-5 text-gray-400"
+          class="h-5 w-5 animate-spin text-gray-400"
           xmlns="http://www.w3.org/2000/svg"
           fill="none"
           viewBox="0 0 24 24"
@@ -108,6 +108,9 @@ export default {
       required: true,
     },
     label: String,
+    isRequired: {
+      type: Boolean,
+    },
     subLabel: String,
     placeholder: {
       type: String,
@@ -145,7 +148,7 @@ export default {
       type: Function,
     },
     optionsSelected: {
-      type: Array,
+      type: [Array, Object],
     },
     filterable: {
       type: Boolean,
@@ -171,10 +174,7 @@ export default {
   data() {
     return {
       loaderSearching: true,
-      value:
-        this.optionsSelected && this.optionsSelected.length
-          ? this.optionsSelected
-          : [],
+      value: this.optionsSelected && this.optionsSelected.length ? this.optionsSelected : [],
     };
   },
   methods: {
@@ -198,17 +198,17 @@ export default {
   @apply cursor-pointer;
 }
 .vs__dropdown-toggle {
-  @apply bg-white w-full border border-gray-300 rounded-md shadow-sm pl-3 py-2 text-left focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm;
+  @apply focus:outline-none w-full rounded-md border border-gray-300 bg-white py-2 pl-3 text-left shadow-sm focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 sm:text-sm;
 }
 .vs__selected-options {
-  @apply overflow-hidden flex-nowrap;
+  @apply flex-nowrap overflow-hidden;
 }
 .vs--open .vs__dropdown-toggle {
   border-bottom-color: rgba(212, 212, 216, var(--tw-border-opacity));
   @apply rounded-b-md;
 }
 .vs__selected {
-  @apply border-none m-0 py-0 pl-0 pr-1.5 mr-1;
+  @apply m-0 mr-1 border-none py-0 pl-0 pr-1.5;
 }
 .vs__selected-options {
   @apply pl-0;
@@ -221,7 +221,7 @@ export default {
   @apply pt-0 pr-3;
 }
 .vs__dropdown-menu {
-  @apply mt-2 bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-opacity-5 overflow-auto focus:outline-none sm:text-sm;
+  @apply focus:outline-none mt-2 max-h-60 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-opacity-5 sm:text-sm;
 }
 .vs__dropdown-option {
   @apply py-2;

package/src/components/CUpload/CUpload.vue

@@ -1,16 +1,5 @@
 <template>
   <div>
-    <div v-if="type === 'default'">
-      <slot></slot>
-      <div :class="errorClasses" class="" id="c-file-area" @click.prevent="uploader.open()">
-        <button
-          type="white"
-          class="pic-btn inline-flex items-center px-4 py-2 shadow-sm text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 text-gray-700 border bg-white border-gray-300 hover:bg-gray-50 focus:ring-indigo-600"
-        >
-          {{ buttonText }}
-        </button>
-      </div>
-    </div>
     <div v-if="type === 'filestack'" :class="filestackClasses" id="filestack-uploader"></div>
     <p v-if="!isValidate" class="mt-2 text-sm text-red-600">
       {{ errorMessage }}
@@ -20,7 +9,6 @@
 
 <script>
 import * as filestack from "filestack-js";
-import { Uppload, Local, xhrUploader, en, Crop, Unsplash } from "uppload";
 
 export default {
   name: "CUpload",
@@ -90,33 +78,6 @@ export default {
       const picker = client.picker(options);
       picker.open();
     },
-    initUppload() {
-      // Uppload library
-      this.uploader = new Uppload({
-        lang: en,
-        compression: 0.4,
-        compressionToMime: "image/jpeg",
-        maxSize: [500, 1000],
-        uploader: xhrUploader({
-          endpoint: `${this.url}`,
-          fileKeyName: "image",
-          responseFunction: (response) => {
-            this.$emit("onUploadSuccess", response);
-          },
-        }),
-      });
-      this.uploader.use([
-        new Local(),
-        ...(this.includeUnsplash
-          ? [new Unsplash("hXfo-C0svXV4IDCncBo7s-ySQpVJVeZrGuWxwwgC7qw")]
-          : []),
-        ...(this.cropImage ? [new Crop({ aspectRatio: this.aspectRatioDimensions })] : []),
-      ]);
-      // Uppload Error Handle
-      this.uploader.on("error", (error) => {
-        console.log("The error message is", error);
-      });
-    },
   },
   computed: {
     errorClasses() {

package/src/icons.js

@@ -202,5 +202,13 @@ export default {
   "clipboard-check-outline":
     "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4",
   "home":
-    "M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"
+    "M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z",
+  "archive":
+    "M4 3a2 2 0 100 4h12a2 2 0 100-4H4z M3 8h14v7a2 2 0 01-2 2H5a2 2 0 01-2-2V8zm5 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z",
+  "printer":
+    "M5 4v3H4a2 2 0 00-2 2v3a2 2 0 002 2h1v2a2 2 0 002 2h6a2 2 0 002-2v-2h1a2 2 0 002-2V9a2 2 0 00-2-2h-1V4a2 2 0 00-2-2H7a2 2 0 00-2 2zm8 0H7v3h6V4zm0 8H7v4h6v-4z",
+  "user-circle":
+    "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z",
+  "key":
+    "M18 8a6 6 0 01-7.743 5.743L10 14l-1 1-1 1H6v2H2v-4l4.257-4.257A6 6 0 1118 8zm-6-4a1 1 0 100 2 2 2 0 012 2 1 1 0 102 0 4 4 0 00-4-4z"
 };