@appscode/design-system 1.1.0-beta.63 → 1.1.0-beta.64

package/package.json

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

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

@@ -77,9 +77,6 @@ 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;
@@ -111,26 +108,6 @@ 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) {
@@ -179,13 +156,6 @@ 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">
@@ -473,6 +443,8 @@ onUpdated(() => {
             animation: collapse 0.5s ease-in-out;
           }
         }
+
+        white-space: nowrap;
       }
 
       .options-items {

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

@@ -8,18 +8,10 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
   cellWidth: null,
 });
-
-const styleOb = computed(() => {
-  const ob: { width?: string } = {};
-  if (props.cellWidth) {
-    ob.width = `${props.cellWidth}px`;
-  }
-  return ob || {};
-});
 </script>
 
 <template>
-  <td :style="styleOb">
+  <td>
     <slot />
   </td>
 </template>

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

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

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

@@ -7,6 +7,7 @@ import {
   ref,
   watch,
 } from "vue";
+import { useElementSize } from "@vueuse/core";
 
 interface Props {
   isLoaderActive?: boolean;
@@ -37,7 +38,6 @@ const loaderDarkThemePrimaryColor = "#2e323c";
 const loaderLightThemeSecondaryColor = "#ecebeb";
 const loaderDarkThemeSecondaryColor = "#21272e";
 
-const computedCellWidth = ref(50);
 const cellLoaderDiv = ref<HTMLElement | null>(null);
 const cellDiv = ref<HTMLElement | null>(null);
 
@@ -49,8 +49,10 @@ const valueType = computed(() => {
   } else return typeof props.value;
 });
 
+const { width: cellLoaderDivWidth } = useElementSize(cellLoaderDiv);
+const { width: cellDivWidth } = useElementSize(cellDiv);
 const maxCharacterLength = computed(() => {
-  return Math.ceil(computedCellWidth.value / 10);
+  return Math.ceil(cellDivWidth.value / 6);
 });
 
 const primaryColor = computed(() => {
@@ -64,41 +66,14 @@ const secondaryColor = computed(() => {
     ? loaderDarkThemeSecondaryColor
     : loaderLightThemeSecondaryColor;
 });
-
-const calcCellWidth = () => {
-  if (props.isLoaderActive) {
-    nextTick(() => {
-      if (cellLoaderDiv.value) {
-        computedCellWidth.value = cellLoaderDiv.value.offsetWidth;
-      }
-    });
-  } else {
-    nextTick(() => {
-      if (cellDiv.value) {
-        computedCellWidth.value = cellDiv.value.offsetWidth;
-      }
-    });
-  }
-};
-
-onMounted(() => {
-  calcCellWidth();
-});
-
-watch(
-  () => props.isLoaderActive,
-  () => {
-    calcCellWidth();
-  }
-);
 </script>
 
 <template>
   <div v-if="isLoaderActive" ref="cellLoaderDiv" :style="{ maxWidth: '300px' }">
     <content-loader
-      :view-box="`0 0 ${computedCellWidth || 300} 10`"
+      :view-box="`0 0 ${cellLoaderDivWidth || 300} 10`"
       :speed="2"
-      :key="computedCellWidth"
+      :key="cellLoaderDivWidth"
       :primaryColor="primaryColor"
       :secondaryColor="secondaryColor"
     />
@@ -119,7 +94,7 @@ watch(
       data-testid="array-cell-value"
     />
     <template v-else>
-      <span class="is-ellipsis-1" :title="tooltip" data-testid="cell-value">{{
+      <span :title="tooltip" data-testid="cell-value">{{
         value || (value === 0 ? 0 : "-")
       }}</span>
     </template>

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

@@ -9,7 +9,7 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   cellTitle: "cell title",
-  maxCharacterLength: 50,
+  maxCharacterLength: 64,
   obj: () => ({}),
 });
 
@@ -46,10 +46,10 @@ const printableStringObjs = computed(() => {
 
 const indexOfCharacterLengthExceed = computed(() => {
   let idx = -1;
-  let cumulativeLen = 0;
+  let cumulativeLen = 2;
   for (const [index, po] of printableStringObjs.value.entries()) {
     const newLen = cumulativeLen + po.print.length + 2;
-    if (newLen + 2 > props.maxCharacterLength) {
+    if (newLen + 4 > props.maxCharacterLength) {
       idx = index;
       break;
     }