classcard-ui 0.2.196 → 0.2.200

package/package.json

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

package/src/components/CAnchorTabs/CAnchorTabs.vue

@@ -82,7 +82,7 @@ export default {
       console.log("show name", name);
       this.activeTab = name;
       var el = document.getElementById(name);
-      el.scrollIntoView();
+      el.scrollIntoView({ behavior: "smooth" });
     },
     switchTabForMobile(index) {
       var selectedOption = this.tabs[index];

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' : ''"
         class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 sm:text-sm"
@@ -25,6 +22,7 @@
         :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-r-md sm:text-sm disabled:opacity-50"
         :placeholder="placeholder"
@@ -37,14 +35,12 @@
         <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"
         :placeholder="placeholder"
@@ -63,22 +59,18 @@
         {{ 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"
         :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">
         <span
           v-if="isValidate"
           class="text-gray-500 sm:text-sm"
@@ -94,19 +86,15 @@
         <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"
-      >
+    <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
         :type="inputType"
         :value="inputValue"
         @input="$emit('input', $event.target.value)"
+        @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"
@@ -123,10 +111,7 @@
     <p v-if="!isValidate" class="mt-2 text-sm text-red-600">
       {{ 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>
@@ -209,6 +194,7 @@ export default {
       inputValue: this.value,
     };
   },
+  methods: {},
   watch: {
     value() {
       this.inputValue = this.value;

package/src/components/CReorderableStackedList/CReorderableStackedList.vue

@@ -20,7 +20,11 @@
           type="solid"
           class="h-5 w-5 mr-3 text-gray-500"
         ></c-icon>
-        <c-avatar :size="items.size" :rounded="items.rounded" :image="items.image"></c-avatar>
+        <c-avatar
+          :size="items.size"
+          :rounded="items.rounded"
+          :image="items.image"
+        ></c-avatar>
         <div class="flex flex-grow items-center justify-between flex-wrap">
           <div class="ml-3">
             <div class="flex pb-1">
@@ -42,9 +46,14 @@
           <button
             type="button"
             v-if="items.listIcon"
+            @click="$emit('remove')"
             class="rounded-full h-8 w-8 flex items-center justify-center text-gray-500 hover:bg-red-100 hover:text-red-800 focus:outline-none focus:ring-2 focus:ring-red-500"
           >
-            <c-icon name="trash" type="solid" class="h-5 w-5 hover:text-red-800"></c-icon>
+            <c-icon
+              name="trash"
+              type="solid"
+              class="h-5 w-5 hover:text-red-800"
+            ></c-icon>
           </button>
         </div>
       </li>

package/src/components/CTextarea/CTextarea.vue

@@ -14,7 +14,8 @@
         :placeholder="placeholder"
         :rows="rows"
         :class="errorClasses"
-        class="focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm rounded-md"
+        :disabled="disabled"
+        class="focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm rounded-md disabled:opacity-50"
       ></textarea>
       <div
         v-if="!isValidate"
@@ -55,6 +56,10 @@ export default {
     errorMessage: {
       type: String,
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
     errorClasses() {

package/src/stories/CTextarea.stories.js

@@ -1,16 +1,16 @@
-import CTextarea from '../components/CTextarea/CTextarea.vue';
-import './utils.css'
+import CTextarea from "../components/CTextarea/CTextarea.vue";
+import "./utils.css";
 
 export default {
-  title: 'CTextarea',
+  title: "CTextarea",
   component: CTextarea,
   argTypes: {
     label: String,
     placeholder: String,
     rows: String,
     helpText: String,
-    hint:String,
-    isValidate: Boolean
+    hint: String,
+    isValidate: Boolean,
   },
 };
 
@@ -22,10 +22,11 @@ const Template = (args, { argTypes }) => ({
 
 export const Default = Template.bind({});
 Default.args = {
- label: 'Name',
- placeholder: 'Enter your name',
- rows: '3',
- helpText: 'This information is displayed on booking page',
- hint: 'Optional',
- isValidate: true
+  label: "Name",
+  placeholder: "Enter your name",
+  rows: "3",
+  helpText: "This information is displayed on booking page",
+  hint: "Optional",
+  isValidate: true,
+  disabled: false,
 };