classcard-ui 0.2.230 → 0.2.234

package/package.json

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

package/src/components/CButtonGroup/CButtonGroup.vue

@@ -45,12 +45,12 @@
         v-for="(button, index) in buttonObject"
         v-bind:key="button.label"
         type="button"
+        class="relative inline-flex items-center px-2 py-2 border-r border-l border-t border-b border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500"
         :class="{
           'rounded-r-md border-l-0': index == buttonObject.length - 1,
-          'rounded-l-md border-r-0 border-l': index == 0,
+          'rounded-l-md border-r-0': index == 0,
           'px-4': button.label,
         }"
-        class="relative inline-flex items-center px-2 py-2 border-r border-t border-b border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500"
         @click="buttonAction($event, button.value)"
       >
         <div v-if="button.icon == ''" class="h-5"></div>

package/src/components/CButtonWithDropdown/CButtonWithDropdown.vue

@@ -25,7 +25,12 @@
           :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"
         >
-          <div class="py-1" role="menu" aria-orientation="vertical" aria-labelledby="option-menu">
+          <div
+            class="py-1"
+            role="menu"
+            aria-orientation="vertical"
+            aria-labelledby="option-menu"
+          >
             <li
               v-for="item in items"
               v-bind:key="item.items"
@@ -78,21 +83,18 @@ export default {
   computed: {
     classes() {
       return {
-        "border text-gray-700 border-gray-300 hover:bg-gray-50 focus:ring-indigo-600":
-          this.type == "secondary",
         "border text-white hover:bg-indigo-800 bg-indigo-700 focus:ring-indigo-600":
           this.type == "primary",
-        "border text-white hover:bg-red-800 bg-red-700 focus:ring-red-600": this.type == "danger",
-        "border border-green-800 bg-green-100 text-green-800 hover:bg-green-200 focus:ring-green-600":
-          this.type == "success" && !this.selectedValue,
+        "border text-gray-700 border-gray-300 hover:bg-gray-50 focus:ring-indigo-600":
+          this.type == "secondary",
+        "border text-white hover:bg-green-800 bg-green-700 focus:ring-green-600":
+          this.type == "success",
+        "border text-white hover:bg-red-800 bg-red-700 focus:ring-red-600":
+          this.type == "danger",
+        "border border-green-800 bg-green-100 text-green-800 hover:bg-green-200 focus:ring-green-200":
+          this.type == "light-green",
         "border border-red-800 bg-red-100 text-red-800 hover:bg-red-200 focus:ring-red-200":
-          (this.type == "light-red" && this.isSelected == false) ||
-          (this.type == "light-red" && !this.selectedValue),
-        "border border-red-800 bg-red-400 text-white hover:bg-red-500 focus:ring-red-500":
-          (this.type == "light-red" && this.isSelected == true) ||
-          (this.type == "light-red" && this.selectedValue),
-        "border border-green-900 bg-green-800 text-white hover:bg-green-900 focus:ring-green-900":
-          this.type == "success" && this.selectedValue,
+          this.type == "light-red",
         "cursor-default pointer-events-none": this.isLoading,
       };
     },

package/src/components/CMultiselect/CMultiselect.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
     <label v-if="label" class="text-sm text-gray-900">{{ label }}</label>
+    <p v-if="subLabel" class="text-sm text-gray-500">{{ subLabel }}</p>
     <v-select
       class="text-sm mt-1"
       :placeholder="placeholder"
@@ -80,6 +81,7 @@ export default {
       required: true,
     },
     label: String,
+    subLabel: String,
     placeholder: {
       type: String,
       default: "Start typing... (min 2 characters) to search options",

package/src/components/CPhoneNumber/CPhoneNumber.vue

@@ -2,7 +2,11 @@
   <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>
+      <vue-tel-input
+        v-bind="bindProps"
+        :autoFormat="false"
+        v-model="value"
+      ></vue-tel-input>
     </div>
   </div>
 </template>
@@ -34,6 +38,11 @@ export default {
       },
     };
   },
+  watch: {
+    value(newVal) {
+      this.$emit("onChange", newVal);
+    },
+  },
 };
 </script>
 <style>

package/src/stories/CButtonWithDropdown.stories.js

@@ -8,7 +8,17 @@ export default {
   subcomponents: { CIcon },
   argTypes: {
     type: {
-      control: { type: "select", options: ["primary", "secondary", "success", "danger", "light-red"] },
+      control: {
+        type: "select",
+        options: [
+          "primary",
+          "secondary",
+          "success",
+          "danger",
+          "light-green",
+          "light-red",
+        ],
+      },
     },
     items: { control: { type: "object" } },
   },
@@ -23,9 +33,9 @@ const Template = (args, { argTypes }) => ({
 export const Default = Template.bind({});
 Default.args = {
   items: [
-    { text: "one", value:'one' },
-    { text: "two" , value: 'two'},
+    { text: "one", value: "one" },
+    { text: "two", value: "two" },
   ],
-//   type: 'primary',
-  label: "Button"
-};
+  //   type: 'primary',
+  label: "Button",
+};