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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appscode/design-system",
-  "version": "1.1.0-beta.56",
+  "version": "1.1.0-beta.57",
   "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/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) {
@@ -145,7 +168,7 @@ onUpdated(() => {
   <table-container ref="ac_table_container" @scroller="handleScroller">
     <table
       ref="ac_table"
-      class="table ac-table is-bordered"
+      class="table ac-table"
       :class="{
         'is-fullwidth':
           !isDynamicWidthTable ||
@@ -153,9 +176,16 @@ onUpdated(() => {
           isTableEmpty ||
           isLoaderActive,
         // 'ac-striped': !columnStriped,
-        // 'is-bordered': columnStriped,
+        '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/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(() => {