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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appscode/design-system",
-  "version": "1.1.0-beta.63",
+  "version": "1.1.0-beta.65",
   "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;
     }
@@ -66,34 +66,37 @@ const indexOfCharacterLengthExceed = computed(() => {
 </script>
 
 <template>
-  <tags v-if="printableStringObjs.length">
-    <tag
-      v-for="(printableStringOb, idx) in printableStringObjs.slice(
-        0,
-        indexOfCharacterLengthExceed
-      )"
-      :key="`${printableStringOb.print}-${idx}`"
-    >
-      <value-with-modal
-        v-if="printableStringOb.exceededLength"
-        :title="`${cellTitle}: ${idx}`"
-        :value="printableStringOb.value"
-        :print="printableStringOb.print"
-      />
-      <template v-else> {{ printableStringOb.print }} </template>
-    </tag>
-
-    <tag v-if="indexOfCharacterLengthExceed !== printableStringObjs.length">
-      <a @click.prevent.stop="showFullData = true">
-        <ellipsis-icon />
-        <json-show-modal
-          :open="showFullData"
-          @closemodal="showFullData = false"
-          :editor-title="cellTitle"
-          :editor-content="items"
+  <span>
+    <tags v-if="printableStringObjs.length">
+      <tag
+        v-for="(printableStringOb, idx) in printableStringObjs.slice(
+          0,
+          indexOfCharacterLengthExceed
+        )"
+        :key="`${printableStringOb.print}-${idx}`"
+        modifierClasses="is-primary is-light"
+      >
+        <value-with-modal
+          v-if="printableStringOb.exceededLength"
+          :title="`${cellTitle}: ${idx}`"
+          :value="printableStringOb.value"
+          :print="printableStringOb.print"
         />
-      </a>
-    </tag>
-  </tags>
-  <p v-else>-</p>
+        <template v-else> {{ printableStringOb.print }} </template>
+      </tag>
+
+      <tag v-if="indexOfCharacterLengthExceed !== printableStringObjs.length">
+        <a @click.prevent.stop="showFullData = true">
+          <ellipsis-icon />
+          <json-show-modal
+            :open="showFullData"
+            @closemodal="showFullData = false"
+            :editor-title="cellTitle"
+            :editor-content="items"
+          />
+        </a>
+      </tag>
+    </tags>
+    <p v-else>{{ printableStringObjs }}</p>
+  </span>
 </template>

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

@@ -1,12 +1,6 @@
 <script setup lang="ts">
-import {
-  computed,
-  defineAsyncComponent,
-  nextTick,
-  onMounted,
-  ref,
-  watch,
-} from "vue";
+import { computed, defineAsyncComponent, ref } from "vue";
+import { useElementSize } from "@vueuse/core";
 
 interface Props {
   isLoaderActive?: boolean;
@@ -37,7 +31,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 +42,16 @@ const valueType = computed(() => {
   } else return typeof props.value;
 });
 
+const { width: cellLoaderDivWidth } = useElementSize(cellLoaderDiv, {
+  width: 150,
+  height: 30,
+});
+const { width: cellDivWidth } = useElementSize(cellDiv, {
+  width: 150,
+  height: 30,
+});
 const maxCharacterLength = computed(() => {
-  return Math.ceil(computedCellWidth.value / 10);
+  return Math.ceil(cellDivWidth.value / 6);
 });
 
 const primaryColor = computed(() => {
@@ -64,41 +65,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 +93,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: () => ({}),
 });
 
@@ -33,7 +33,7 @@ const objKeys = computed(() => {
 
 const printableStringObjs = computed(() => {
   return objKeys.value.map((key) => {
-    let value = props.obj[key];
+    let value: string = props.obj[key] as string;
     if (typeof value === "object" && value !== null) {
       value = JSON.stringify(value);
     }
@@ -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;
     }
@@ -61,38 +61,40 @@ const indexOfCharacterLengthExceed = computed(() => {
 </script>
 
 <template>
-  <tags v-if="printableStringObjs.length">
-    <tag
-      v-for="printableStringOb in printableStringObjs.slice(
-        0,
-        indexOfCharacterLengthExceed
-      )"
-      :key="printableStringOb.key"
-      modifierClasses="is-primary is-light"
-    >
-      <value-with-modal
-        v-if="printableStringOb.exceededLength"
-        :title="printableStringOb.key"
-        :value="printableStringOb.value as string"
-        :print="printableStringOb.print"
-      />
-      <template v-else> {{ printableStringOb.print }} </template>
-    </tag>
-
-    <tag
-      modifierClasses="is-info is-light"
-      v-if="indexOfCharacterLengthExceed !== printableStringObjs.length"
-    >
-      <a @click.prevent.stop="showFullData = true">
-        <ellipsis-icon />
-        <json-show-modal
-          :open="showFullData"
-          @closemodal="showFullData = false"
-          :editor-title="cellTitle"
-          :editor-content="obj"
+  <span>
+    <tags v-if="printableStringObjs.length">
+      <tag
+        v-for="printableStringOb in printableStringObjs.slice(
+          0,
+          indexOfCharacterLengthExceed
+        )"
+        :key="printableStringOb.key"
+        modifierClasses="is-primary is-light"
+      >
+        <value-with-modal
+          v-if="printableStringOb.exceededLength"
+          :title="printableStringOb.key"
+          :value="printableStringOb.value"
+          :print="printableStringOb.print"
         />
-      </a>
-    </tag>
-  </tags>
-  <p v-else>-</p>
+        <template v-else> {{ printableStringOb.print }} </template>
+      </tag>
+
+      <tag
+        modifierClasses="is-info is-light"
+        v-if="indexOfCharacterLengthExceed !== printableStringObjs.length"
+      >
+        <a @click.prevent.stop="showFullData = true">
+          <ellipsis-icon />
+          <json-show-modal
+            :open="showFullData"
+            @closemodal="showFullData = false"
+            :editor-title="cellTitle"
+            :editor-content="obj"
+          />
+        </a>
+      </tag>
+    </tags>
+    <p v-else>-</p>
+  </span>
 </template>