classcard-ui 0.2.232 → 0.2.236

package/package.json

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

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/CDatepicker/CDatepicker.vue

@@ -11,6 +11,7 @@
       @input="onDayClick"
       :value="value"
       :min-date="minDate"
+      :is-expanded="isExpanded"
     >
       <template v-slot="{ inputValue, togglePopover }">
         <div class="flex items-center mt-1">
@@ -84,6 +85,10 @@ export default {
       type: [String, Date],
       default: null,
     },
+    isExpanded: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     const masks = {

package/src/components/CInputAddon/CInputAddon.vue

@@ -11,9 +11,13 @@
       </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' : ''"
+        v-if="addon"
         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"
       >
         {{ addon }}
@@ -23,7 +27,7 @@
         :value="inputValue"
         @input="$emit('input', $event.target.value)"
         @blur="$emit('blur', $event.target.value)"
-        :class="errorClasses"
+        :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"
         :placeholder="placeholder"
         :disabled="disabled"
@@ -35,7 +39,10 @@
         <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"
@@ -59,7 +66,10 @@
         {{ 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"
@@ -70,12 +80,18 @@
         :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"
+      >
         <div
           v-if="!isValidate"
           class="right-0 pr-2 flex items-center pointer-events-none text-red-600"
         >
-          <c-icon name="exclamation-circle" type="solid" class="h-5 w-5"></c-icon>
+          <c-icon
+            name="exclamation-circle"
+            type="solid"
+            class="h-5 w-5"
+          ></c-icon>
         </div>
         <span
           class="text-gray-500 sm:text-sm"
@@ -85,8 +101,13 @@
         </span>
       </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
@@ -110,7 +131,10 @@
     <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>

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/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",
+};

package/src/stories/CDatepicker.stories.js

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