@appscode/design-system 2.2.58 → 2.2.60

package/package.json

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

package/vue-components/v3/header/Header.vue

@@ -8,12 +8,14 @@ interface Props {
   title?: string;
   isContainer?: boolean;
   topValue?: string;
+  custom?: boolean;
 }
 
 withDefaults(defineProps<Props>(), {
   title: "No Title",
   isContainer: false,
   topValue: "86px",
+  custom: false,
 });
 </script>
 
@@ -22,9 +24,12 @@ withDefaults(defineProps<Props>(), {
     <div class="is-flex is-justify-content-space-between" :class="{ container: isContainer }">
       <header-items>
         <header-item>
-          <transition name="fade" mode="out-in" appear>
-            <h4 :key="title">{{ title }} <slot name="controls-metadata" /></h4>
-          </transition>
+          <div v-if="custom">
+            <slot name="custom" />
+          </div>
+          <div v-else>
+            <h4 :key="title">{{ title }}</h4>
+          </div>
         </header-item>
         <slot name="header-left-controls" />
       </header-items>
@@ -37,94 +42,4 @@ withDefaults(defineProps<Props>(), {
 
 <style lang="scss" scoped>
 @import "../../../vue-components/styles/components/header/header";
-
-// footer control start
-// .form-footer-controls {
-//   .form-footer-control {
-//     display: inline-block;
-//     margin-left: 8px;
-//     vertical-align: middle;
-
-//     &:first-child {
-//       margin-left: 0;
-//     }
-//   }
-// }
-
-// .dashboard-header {
-//   padding: 10px 20px;
-//   border-radius: 4px;
-//   background-color: $white-100;
-//   min-height: 75px;
-//   display: table;
-//   width: 100%;
-//   border-left: 5px solid $ac-primary;
-//   border-bottom: 1px solid $color-border;
-//   border-top: 1px solid $color-border;
-//   border-right: 1px solid $color-border;
-
-//   .dashboard-header-wrapper {
-//     height: 100%;
-//     display: table;
-//     width: 100%;
-
-//     .dashboard-header-inner {
-//       display: table-cell;
-//       vertical-align: middle;
-//     }
-//   }
-// }
-
-// .dashboard-header-inner-top {
-//   height: 100%;
-//   vertical-align: middle;
-//   display: table-cell;
-// }
-
-// .dashboard-header.is-chart-available {
-//   padding: 10px 30px;
-
-//   .dashboard-header-wrapper {
-//     height: 100%;
-//     display: table;
-//     width: 100%;
-
-//     .dashboard-header-inner {
-//       display: table-cell;
-//       vertical-align: middle;
-//     }
-//   }
-// }
-
-// .resource {
-//   display: flex;
-//   align-items: center;
-//   border-left: 1px solid $color-border;
-//   padding: 0 1.5rem;
-//   margin-top: -10px;
-//   margin-bottom: -10px;
-//   .r-icon {
-//     display: flex;
-//     align-items: center;
-//     max-width: 40px;
-//   }
-
-//   .r-data {
-//     margin-left: 0.8rem;
-//     .request,
-//     .limit {
-//       font-weight: 500;
-//       min-width: 50px;
-//       text-align: center;
-//     }
-//     .request {
-//       font-weight: 300;
-//     }
-//     hr {
-//       margin: 0;
-//       padding: 0;
-//       background-color: $color-border;
-//     }
-//   }
-// }
 </style>

package/vue-components/v3/table/table-cell/CellValue.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, defineAsyncComponent, ref } from "vue";
+import { computed, defineAsyncComponent, ref, watch } from "vue";
 import { useElementSize } from "@vueuse/core";
 
 interface Props {
@@ -46,9 +46,20 @@ const { width: cellDivWidth } = useElementSize(cellDiv, {
   width: 150,
   height: 30,
 });
-const maxCharacterLength = computed(() => {
-  return Math.ceil(cellDivWidth.value / 6);
-});
+const maxCharacterLength = ref(Math.ceil(cellDivWidth.value / 6));
+let oldDivValue = cellDivWidth.value;
+
+watch(
+  cellDivWidth,
+  (n) => {
+    const diff = Math.abs(n - oldDivValue);
+    if (diff >= 10) {
+      maxCharacterLength.value = Math.ceil(n / 6);
+      oldDivValue = n;
+    }
+  },
+  { immediate: true }
+);
 
 const primaryColor = computed(() => {
   return document.documentElement.classList.contains("is-dark-theme")