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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appscode/design-system",
-  "version": "1.0.43-alpha.208",
+  "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/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;
     },
   },
 });