classcard-ui 0.2.149 → 0.2.153

package/package.json

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

package/src/components/CDatepicker/CDatepicker.vue

@@ -5,19 +5,28 @@
         {{ label }}
       </label>
     </div>
-    <v-date-picker class="inline-block h-full" @input="onDayClick(date)" :value="value">
+    <v-date-picker class="inline-block h-full" :masks="masks" @input="onDayClick" :value="value">
       <template v-slot="{ inputValue, togglePopover }">
-        <div class="flex items-center">
+        <div class="flex items-center mt-1">
           <button
-            class="p-2 bg-blue-100 border border-blue-200 hover:bg-blue-200 text-blue-600 rounded-l-md focus:bg-blue-500 focus:text-white focus:border-blue-500 focus:outline-none"
+            :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',
+            ]"
             @click="togglePopover()"
           >
-            <c-icon name="calendar-solid" class="h-5 w-5 text-gray-400" type="solid"></c-icon>
+            <c-icon
+              name="calendar-solid"
+              :class="[disabled ? 'text-gray-200' : 'text-gray-400', 'h-5 w-5 ']"
+              type="solid"
+            ></c-icon>
           </button>
           <input
             :value="inputValue"
-            class="bg-white text-gray-700 w-full p-2 appearance-none border rounded-r-md focus:outline-none focus:border-blue-500 text-sm"
-            readonly
+            :class="[
+              disabled ? 'border-gray-100' : 'border-gray-300',
+              'bg-white text-gray-700 w-full p-2 appearance-none border  rounded-r-md focus:outline-none focus:border-blue-500 text-sm',
+            ]"
           />
         </div>
       </template>
@@ -49,12 +58,24 @@ export default {
       type: String,
     },
     value: {
-      type: String,
+      type: [String, Date, Array],
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
     },
   },
+  data() {
+    const masks = {
+      input: ["YYYY/MM/DD", "MMM DD, YYYY", "DD-MM-YYYY", "DD/MM/YYYY", "YYYY-MM-DD", "L"],
+    };
+    return {
+      masks,
+    };
+  },
   methods: {
-    onDayClick(value) {
-      this.$emit("input", value);
+    onDayClick(date) {
+      this.$emit("input", date);
     },
   },
 };

package/src/components/CEditor/CEditor.vue

@@ -4,12 +4,17 @@
       <p class="text-sm text-gray-900">{{ label }}</p>
       <p class="text-sm text-gray-500" v-if="hint">{{ hint }}</p>
     </div>
-    <quill-editor class="mt-1" :content="content" :options="editorOption"></quill-editor>
+    <quill-editor
+      class="mt-1"
+      v-model="editorText"
+      :options="editorOption"
+      @change="onChange($event)"
+    ></quill-editor>
     <p v-if="helpText" class="mt-2 text-sm text-gray-500">
       {{ helpText }}
     </p>
-  </div></template
->
+  </div>
+</template>
 <script>
 import "quill/dist/quill.core.css";
 import "quill/dist/quill.snow.css";
@@ -22,7 +27,7 @@ export default {
     content: {
       type: String,
     },
-    label: {  
+    label: {
       type: String,
     },
     hint: {
@@ -34,6 +39,9 @@ export default {
     toolbarOptions: {
       type: Array,
     },
+    onEditorChange: {
+      type: Function,
+    },
   },
   data() {
     return {
@@ -44,8 +52,19 @@ export default {
           },
         },
       },
+      editorText: this.content,
     };
   },
+  methods: {
+    onChange(params) {
+      this.$emit("onEditorChange", params);
+    },
+  },
+  watch: {
+    content() {
+      this.editorText = this.content;
+    },
+  },
 };
 </script>
 <style>

package/src/stories/CDatepicker.stories.js

@@ -25,4 +25,5 @@ Default.args = {
   label: "Date",
   helpText: "Description",
   value: new Date(),
+  disabled: false,
 };