@appscode/design-system 1.1.0-beta.56 → 1.1.0-beta.58

package/package.json

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

package/vue-components/types/table.ts

@@ -15,6 +15,7 @@ export interface AcTableCol {
   name: string;
   type: "object" | "string" | "number" | "date" | "integer";
   priority: number;
+  width?: number;
   pathTemplate?: string;
   format?: string;
   link?: Record<string, unknown>;

package/vue-components/v3/cards/OverviewCard.vue

@@ -21,7 +21,8 @@
   padding: 8px 16px;
   border-radius: 2px;
   strong {
-    width: min(30px);
+    min-width: 30px;
+    font-size: 14px;
   }
 }
 </style>

package/vue-components/v3/cards/OverviewCards.vue

@@ -28,7 +28,7 @@ withDefaults(defineProps<Props>(), {
 .overview-cards-wrapper {
   border: 1px solid $primary-90;
   margin-right: 20px;
-  height: 100%;
+  height: calc(100% - 16px);
 }
 .overview-cards {
   display: grid;

package/vue-components/v3/loaders/InfoCardLoader.vue

@@ -13,7 +13,7 @@ export default {
     primaryColor="#f5f5f5"
     secondaryColor="#ecebeb"
   >
-    <rect x="0" y="0" rx="0" ry="0" width="NaN" height="NaN" />
+    <rect x="0" y="0" rx="0" ry="0" />
     <rect x="10" y="70" rx="3" ry="3" width="120" height="11" />
     <rect x="10" y="100" rx="3" ry="3" width="120" height="11" />
     <rect x="150" y="100" rx="3" ry="3" width="60" height="11" />

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

@@ -77,6 +77,9 @@ const handleScroller = (value: number) => {
   emit("scroller", value);
 };
 
+const headerWidths = ref<number[]>([]);
+const totalWidth = ref<number>(0);
+
 const onWindowResize = () => {
   if (ac_table.value && props.isDynamicWidthTable) {
     const tableWidth = ac_table.value.clientWidth;
@@ -108,6 +111,26 @@ const emitSortEvent = (index: number) => {
 watch(
   () => props.tableHeaders,
   (n) => {
+    // calculated column width based on percentages
+    headerWidths.value = n.map((th) => th.width || 1);
+    totalWidth.value = headerWidths.value.reduce((p, c) => p + c, 0);
+    let collapsibleWidth = 0;
+    let actionsWidth = 0;
+    const collapsibleWidthPercent = 70 / (ac_table.value?.clientWidth || 0);
+    const actionsWidthPercent = 140 / (ac_table.value?.clientWidth || 0);
+    if (props.collapsible) {
+      collapsibleWidth =
+        (totalWidth.value * collapsibleWidthPercent) /
+        (1 - collapsibleWidthPercent);
+      headerWidths.value = [collapsibleWidth, ...headerWidths.value];
+    }
+    if (props.actionable) {
+      actionsWidth =
+        (totalWidth.value * actionsWidthPercent) / (1 - actionsWidthPercent);
+      headerWidths.value = [...headerWidths.value, actionsWidth];
+    }
+    totalWidth.value += collapsibleWidth + actionsWidth;
+
     if (headerSortables.value.length === n.length) {
       n.forEach((th, idx) => {
         if (headerSortables.value[idx].enabled !== !!th?.sort?.enable) {
@@ -156,6 +179,13 @@ onUpdated(() => {
         // 'is-bordered': columnStriped,
       }"
     >
+      <colgroup>
+        <col
+          v-for="(hw, idx) in headerWidths"
+          :key="`${hw}-${idx}`"
+          :width="`${(hw / totalWidth) * 100}%`"
+        />
+      </colgroup>
       <thead>
         <table-row v-if="isFullTableLoaderActive">
           <th v-for="i in loaderCols" :key="i">
@@ -199,11 +229,7 @@ onUpdated(() => {
               <i class="fa fa-exclamation-triangle" />
             </span>
           </th>
-          <th
-            ref="action-section"
-            v-if="actionable"
-            style="min-width: 100px"
-          ></th>
+          <th ref="action-section" v-if="actionable"></th>
           <fake-table-cell
             v-if="fakeCellWidth > 0"
             :is-header-cell="true"

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

@@ -53,8 +53,8 @@ const indexOfCharacterLengthExceed = computed(() => {
   let idx = -1;
   let cumulativeLen = 0;
   for (const [index, po] of printableStringObjs.value.entries()) {
-    const newLen = cumulativeLen + po.print.length;
-    if (newLen > props.maxCharacterLength) {
+    const newLen = cumulativeLen + po.print.length + 2;
+    if (newLen + 2 > props.maxCharacterLength) {
       idx = index;
       break;
     }

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

@@ -50,7 +50,7 @@ const valueType = computed(() => {
 });
 
 const maxCharacterLength = computed(() => {
-  return Math.ceil(computedCellWidth.value / 8);
+  return Math.ceil(computedCellWidth.value / 10);
 });
 
 const primaryColor = computed(() => {

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

@@ -48,8 +48,8 @@ const indexOfCharacterLengthExceed = computed(() => {
   let idx = -1;
   let cumulativeLen = 0;
   for (const [index, po] of printableStringObjs.value.entries()) {
-    const newLen = cumulativeLen + po.print.length;
-    if (newLen > props.maxCharacterLength) {
+    const newLen = cumulativeLen + po.print.length + 2;
+    if (newLen + 2 > props.maxCharacterLength) {
       idx = index;
       break;
     }
@@ -68,7 +68,7 @@ const indexOfCharacterLengthExceed = computed(() => {
         indexOfCharacterLengthExceed
       )"
       :key="printableStringOb.key"
-      modifierClasses="is-info is-light"
+      modifierClasses="is-primary is-light"
     >
       <value-with-modal
         v-if="printableStringOb.exceededLength"