@appscode/design-system 1.0.43-alpha.207 → 1.0.43-alpha.209

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appscode/design-system",
-  "version": "1.0.43-alpha.207",
+  "version": "1.0.43-alpha.209",
   "description": "A design system for Appscode websites and dashboards made using Bulma",
   "main": "main.scss",
   "scripts": {

package/vue-components/v3/content/ContentTable.vue

@@ -9,12 +9,16 @@
       >
         <slot name="content-left-controls" />
         <header-item>
-          <search-bar v-if="searchable" @search="searchText = $event" />
+          <search-bar v-if="searchable" @search="updateSearchText" />
         </header-item>
         <slot name="content-right-controls" />
       </content-header>
     </template>
-    <slot name="content" :search-text="searchText" />
+    <slot
+      name="content"
+      :search-text="searchText"
+      :update-search-text="updateSearchText"
+    />
   </content-layout>
 </template>
 
@@ -41,8 +45,8 @@ export default defineComponent({
     },
     hideHeader: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   components: {
     ContentLayout: defineAsyncComponent(() =>
@@ -66,5 +70,11 @@ export default defineComponent({
       searchText: "",
     };
   },
+
+  methods: {
+    updateSearchText(text) {
+      this.searchText = text;
+    },
+  },
 });
 </script>

package/vue-components/v3/table/Table.vue

@@ -18,6 +18,7 @@
           </th>
         </table-row>
         <table-row v-else>
+          <th v-if="collapsible" style="width: 20px" />
           <th
             v-for="(tableHeader, idx) in tableHeaders"
             :key="idx"
@@ -127,6 +128,10 @@ export default defineComponent({
       type: Array,
       default: () => [],
     },
+    collapsible: {
+      type: Boolean,
+      default: false,
+    },
     actionable: {
       type: Boolean,
       default: false,

package/vue-components/v3/table/TableRow.vue

@@ -84,7 +84,7 @@ export default defineComponent({
     },
   },
 
-  emits: ["rowselect"],
+  emits: ["rowselect", "rowexpand"],
 
   components: {
     TableCell: defineAsyncComponent(() =>
@@ -107,6 +107,12 @@ export default defineComponent({
   methods: {
     toggleCollapse() {
       this.isCollapsed = !this.isCollapsed;
+      if (!this.isCollapsed) {
+        this.$emit("rowexpand", this.collapseRow);
+      }
+    },
+    collapseRow() {
+      this.isCollapsed = true;
     },
   },
 });