classcard-ui 0.2.256 → 0.2.260

package/package.json

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

package/src/components/CDatepicker/CDatepicker.vue

@@ -38,7 +38,7 @@
             :class="[
               disabled
                 ? 'border-gray-100 border-l-0 text-gray-400'
-                : 'border-gray-300 border-l-0 text-gray-700',
+                : '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',
             ]"
             :readonly="disabled"

package/src/components/CEditor/CEditor.vue

@@ -6,7 +6,7 @@
     </div>
     <quill-editor
       class="mt-1 text-sm"
-      v-model="editorText"
+      :value="content"
       :options="editorOption"
       @change="onChange($event)"
     ></quill-editor>
@@ -42,27 +42,25 @@ export default {
     onEditorChange: {
       type: Function,
     },
-  },
-  data() {
-    return {
-      editorOption: {
-        modules: {
-          toolbar: {
-            container: this.toolbarOptions,
-          },
-        },
-      },
-      editorText: this.content,
-    };
+    placeholder: {
+      type: String,
+    },
   },
   methods: {
     onChange(params) {
       this.$emit("onEditorChange", params);
     },
   },
-  watch: {
-    content() {
-      this.editorText = this.content;
+  computed: {
+    editorOption() {
+      return {
+        modules: {
+          toolbar: {
+            container: this.toolbarOptions,
+          },
+        },
+        placeholder: this.placeholder,
+      };
     },
   },
 };
@@ -80,6 +78,9 @@ export default {
 }
 
 .ql-editor {
-  @apply text-sm;
+  @apply text-sm text-gray-900;
+}
+.ql-editor.ql-blank::before {
+  @apply text-gray-500 not-italic;
 }
 </style>

package/src/components/CGroupedSelect/CGroupedSelect.vue

@@ -145,6 +145,9 @@
         <!-- More items... -->
       </ul>
     </div>
+    <p v-if="!isValidate" class="mt-2 text-sm text-red-600">
+      {{ errorMessage }}
+    </p>
   </div>
 </template>
 
@@ -159,6 +162,11 @@ export default {
     value: Object,
     placeholder: String,
     isSearching: Boolean,
+    isError: { type: Boolean, default: false },
+    errorMessage: {
+      type: String,
+      default: "This field cannot be empty",
+    },
   },
   data() {
     return {

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"
+        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"
         :placeholder="placeholder"
         :disabled="disabled"
       />

package/src/components/CInputAddon/CInputAddon.vue

@@ -28,7 +28,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"
+        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"
         :placeholder="placeholder"
         :disabled="disabled"
       />
@@ -49,7 +49,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-l-md sm:text-sm disabled:opacity-50"
+        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"
         :placeholder="placeholder"
         :disabled="disabled"
       />
@@ -76,7 +76,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"
+        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"
         :placeholder="placeholder"
         :disabled="disabled"
       />
@@ -117,7 +117,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"
+        class="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"
       />

package/src/components/CInputEmail/CInputEmail.vue

@@ -10,7 +10,7 @@
       <input
         type="text"
         :class="errorClasses"
-        class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-96 px-3 py-2 rounded-md sm:text-sm"
+        class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-96 px-3 py-2 rounded-md sm:text-sm text-gray-900"
         :placeholder="placeholder"
         v-model="email"
         @blur="checkValidation"
@@ -69,12 +69,12 @@ export default {
   },
   methods: {
     checkValidation() {
-      this.isValidate = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/.test(
-        this.email
-      ) || this.email == ''
-        ? false
-        : true;
-    }
+      this.isValidate =
+        /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/.test(this.email) ||
+        this.email == ""
+          ? false
+          : true;
+    },
   },
 };
 </script>

package/src/components/CMultiselect/CMultiselect.vue

@@ -208,7 +208,7 @@ export default {
   @apply rounded-b-md;
 }
 .vs__selected {
-  @apply border-none m-0 py-0 px-1.5 mr-1;
+  @apply border-none m-0 py-0 pl-0 pr-1.5 mr-1;
 }
 .vs__search,
 .vs__search:focus {

package/src/components/CPhoneNumber/CPhoneNumber.vue

@@ -48,6 +48,7 @@ export default {
 <style>
 .vue-tel-input {
   border: 1px solid #d1d5db !important;
+  @apply text-gray-900;
 }
 
 #c-phone {

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"
+        class="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/stories/CEditor.stories.js

@@ -26,4 +26,5 @@ Default.args = {
   hint: "String",
   helpText: "String",
   toolbarOptions: ["bold", "italic"],
+  placeholder: "Please enter your text here...",
 };