@appscode/design-system 1.0.43-alpha.228 → 1.0.43-alpha.229

package/components/_ac-report.scss

@@ -0,0 +1,53 @@
+.report-charts {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding-top: 20px;
+  gap: 20px;
+  align-items: center;
+  align-content: stretch;
+}
+.report-charts > * {
+  flex: 1;
+}
+.vulnerability-chart {
+  height: 250px;
+  width: 250px;
+  margin-right: 20px;
+}
+
+// tr {
+//   .vulnerability-chart {
+//     height: 200px;
+//     width: 200px;
+//     margin-right: 20px;
+//   }
+//   .vulnerability-table {
+//     height: 200px;
+//   }
+// }
+.vulnerability-table {
+  height: 250px;
+  thead {
+    tr {
+      th {
+        border: none;
+        padding: 4px 8px !important;
+      }
+    }
+  }
+  tbody {
+    tr {
+      td {
+        vertical-align: middle;
+        padding: 4px 8px;
+      }
+    }
+  }
+}
+.color-div {
+  height: 10px;
+  width: 10px;
+  display: inline-block;
+  margin-right: 5px;
+}

package/components/_ac-table.scss

@@ -207,6 +207,23 @@
             border-radius: 50%;
           }
         }
+
+        .collapsible-row {
+          max-height: 0;
+          overflow-y: hidden;
+
+          &.is-active {
+            max-height: 60vh;
+            overflow-y: overlay;
+            animation: expand 0.5s ease-in-out;
+          }
+
+          &.is-closed {
+            max-height: 0;
+            overflow-y: hidden;
+            animation: collapse 0.5s ease-in-out;
+          }
+        }
       }
 
       .options-items {
@@ -418,12 +435,45 @@
   color: $ac-primary;
 }
 
-// table inner shadow 
+// table inner shadow
 .table-inner-shadow {
   border-radius: 0px;
   background: $ac-white-lighter;
-  box-shadow: inset 5px 5px 10px #e3e6e9,
-              inset -5px -5px 10px #ffffff;
+  box-shadow: inset 5px 5px 10px #e3e6e9, inset -5px -5px 10px #ffffff;
+}
+
+@keyframes expand {
+  from {
+    max-height: 0;
+    overflow-y: hidden;
+  }
+  1% {
+    overflow-y: hidden;
+  }
+  99% {
+    overflow-y: hidden;
+  }
+  to {
+    max-height: 60vh;
+    overflow-y: overlay;
+  }
+}
+
+@keyframes collapse {
+  from {
+    max-height: 60vh;
+    overflow-y: overlay;
+  }
+  1% {
+    overflow-y: hidden;
+  }
+  99% {
+    overflow-y: hidden;
+  }
+  to {
+    max-height: 0;
+    overflow-y: hidden;
+  }
 }
 
 // GENERAL TABLE END

package/package.json

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

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

@@ -1,22 +1,22 @@
 <template>
   <router-link
     v-if="link"
+    v-slot="{ navigate }"
     event="click"
     :to="link"
     custom
-    v-slot="{ navigate }"
   >
     <tr
       class="is-link"
-      @click="navigate"
       v-bind="$attrs"
       data-testid="ac-table-row"
+      @click="navigate"
     >
       <table-cell v-if="collapsible">
         <collapsible-button
-          @click.stop="toggleCollapse"
           modifier-classes="is-square is-light height-20 width-20 is-rounded is-size-7"
           :icon-class="isCollapsed ? 'chevron-right' : 'chevron-down'"
+          @click.stop="toggleCollapse"
         />
       </table-cell>
       <slot />
@@ -39,9 +39,9 @@
   >
     <table-cell v-if="collapsible">
       <collapsible-button
-        @click.stop="toggleCollapse"
         modifier-classes="is-square is-light height-20 width-20 is-rounded is-size-7"
         :icon-class="isCollapsed ? 'chevron-right' : 'chevron-down'"
+        @click.stop="toggleCollapse"
       />
     </table-cell>
     <slot />
@@ -50,11 +50,15 @@
       :fake-cell-width="fakeCellWidth"
     />
   </tr>
-  <tr v-if="collapsible && !isCollapsed" v-bind="$attrs">
-    <table-cell colspan="1000" class="table-inner-shadow">
-      <slot name="collapsible-content" />
-    </table-cell>
-  </tr>
+  <transition name="slide-down" mode="out-in" appear>
+    <tr v-if="collapsible && !isCollapsed" v-bind="$attrs">
+      <table-cell colspan="1000" class="table-inner-shadow">
+        <div ref="collapsibleRow" class="collapsible-row">
+          <slot name="collapsible-content" />
+        </div>
+      </table-cell>
+    </tr>
+  </transition>
 </template>
 
 <script>
@@ -88,13 +92,17 @@ export default defineComponent({
 
   components: {
     TableCell: defineAsyncComponent(() =>
-      import("./TableCell.vue").then((module) => module.default)
+      import(
+        "@appscode/design-system/vue-components/v3/table/TableCell.vue"
+      ).then((module) => module.default)
     ),
     FakeTableCell: defineAsyncComponent(() =>
-      import("./FakeTableCell.vue").then((module) => module.default)
+      import(
+        "@appscode/design-system/vue-components/v3/table/FakeTableCell.vue"
+      ).then((module) => module.default)
     ),
     CollapsibleButton: defineAsyncComponent(() =>
-      import("../button/Button.vue")
+      import("@appscode/design-system/vue-components/v3/button/Button.vue")
     ),
   },
 
@@ -106,11 +114,29 @@ export default defineComponent({
 
   methods: {
     toggleCollapse() {
-      this.isCollapsed = !this.isCollapsed;
-      if (!this.isCollapsed) {
-        this.$emit("rowexpand", this.collapseRow);
+      const newVal = !this.isCollapsed;
+      if (!newVal) {
+        this.isCollapsed = newVal;
+        // show expand animation
+        this.$nextTick(() => {
+          setTimeout(() => {
+            if (this.$refs.collapsibleRow) {
+              this.$refs.collapsibleRow.classList.remove("is-closed");
+              this.$refs.collapsibleRow.classList.add("is-active");
+            }
+            this.$emit("rowexpand", this.collapseRow);
+          }, 0);
+        });
       } else {
-        this.$emit("rowcollapse");
+        if (this.$refs.collapsibleRow) {
+          this.$refs.collapsibleRow.classList.remove("is-active");
+          this.$refs.collapsibleRow.classList.add("is-closed");
+        }
+        setTimeout(() => {
+          // remove row after animation finish
+          this.isCollapsed = newVal;
+          this.$emit("rowcollapse");
+        }, 100);
       }
     },
     collapseRow() {