classcard-ui 0.2.216 → 0.2.222

package/package.json

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

package/src/components/CButton/CButton.vue

@@ -83,6 +83,8 @@ export default {
           this.type == "danger",
         "text-white hover:bg-green-800 bg-green-700 focus:ring-green-600":
           this.type == "success",
+        "text-green-800 border border-solid border-gray-300 bg-white hover:bg-gray-50 focus:ring-indigo-600":
+          this.type == "secondary-success",
         "text-gray-700 hover:bg-gray-200 bg-gray-100":
           this.type == "secondary-gray",
         "bg-red-100 text-red-800 hover:bg-red-200 focus:ring-red-200":

package/src/components/CCheckbox/CCheckbox.vue

@@ -25,7 +25,7 @@ export default {
   props: {
     label: { type: String },
     description: { type: String },
-    value: { type: Number },
+    value: [Boolean, Number],
     isDisabled: {
       type: Boolean,
     },

package/src/components/CCollapsibleSection/CCollapsibleSection.vue

@@ -1,7 +1,6 @@
 <template>
   <div>
     <div
-      :class="divider || showSection ? 'border-b border-gray-200 pb-2' : ''"
       class="flex flex-row items-center justify-between cursor-pointer"
       @click="collapse"
     >
@@ -35,7 +34,9 @@
       ></c-anchor-tag>
     </div>
     <!-- content to render in collapsible section -->
-    <div class="text-sm text-gray-500 mt-5" v-if="showSection">
+    <div class="text-sm text-gray-500 mt-5"
+      :class="divider || showSection ? 'border-b border-gray-200 pb-8' : ''"
+      v-if="showSection">
       <slot></slot>
     </div>
   </div>

package/src/components/CMultiselect/CMultiselect.vue

@@ -13,6 +13,7 @@
       @input="setSelectedOptions"
       @search="fetchOptions"
       :label="optionLabel"
+      :clearable="clearable"
     >
       <template #open-indicator="{ attributes }">
         <span v-bind="attributes">
@@ -116,6 +117,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    clearable: {
+      type: Boolean,
+      default: true,
+    },
   },
   computed: {},
   data() {

package/src/components/CTable/CTable.vue

@@ -12,11 +12,10 @@
             <!-- button to show list of columns to show  hide in table -->
             <div>
               <button
-                @click="toggleDropdown = !toggleDropdown"
+                @click="handleToggle"
                 class="inline-flex justify-center w-full rounded-md border border-gray-200 shadow-sm px-2 py-2 bg-white text-sm font-medium hover:bg-gray-50 focus:outline-none focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600"
                 aria-haspopup="true"
                 aria-expanded="true"
-                @blur="toggleDropdown = false"
               >
                 <c-icon name="view-board" type="solid" class="text-gray-400 h-5 w-5"></c-icon>
                 <c-icon
@@ -28,9 +27,11 @@
             </div>
             <!-- dropdown having list of all columns to show hide -->
             <div
-              v-show="toggleDropdown"
+              v-if="toggleDropdown"
               class="origin-top-right absolute right-0 mt-2 -mr-1 w-56 rounded-md shadow-lg bg-white ring-1 ring-gray-900 ring-opacity-5 z-100 overflow-y-auto max-h-96"
-            >
+              tabindex="0"
+              @blur="handleToggle"
+              >
               <div
                 class="py-1"
                 role="menu"
@@ -303,6 +304,9 @@ export default {
     };
   },
   methods: {
+    handleToggle() {
+      this.toggleDropdown = !this.toggleDropdown;
+    },
     showHideColumn(value, name) {
       this.$emit("hideCols", value, name);
     },

package/src/stories/CButton.stories.js

@@ -18,6 +18,7 @@ export default {
           "secondary-gray",
           "light-red",
           "dark-blue",
+          "secondary-success"
         ],
       },
     },