@appscode/design-system 2.0.59 → 2.0.60

package/vue-components/v3/sidebar/SidebarFooter.vue

@@ -12,9 +12,7 @@ withDefaults(defineProps<Props>(), {
 });
 
 defineEmits(["toggleSidebar"]);
-const AccentColorPicker = defineAsyncComponent(
-  () => import("./AccentColorPicker.vue")
-);
+const AccentColorPicker = defineAsyncComponent(() => import("./AccentColorPicker.vue"));
 </script>
 
 <template>
@@ -26,13 +24,7 @@ const AccentColorPicker = defineAsyncComponent(
       data-testid="sidebar-footer-back-button"
       @click="$emit('toggleSidebar')"
     >
-      <svg
-        width="18"
-        height="18"
-        viewBox="0 0 18 18"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
+      <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
           d="M11.25 13.5L6.75 9L11.25 4.5"
           stroke="white"
@@ -40,13 +32,7 @@ const AccentColorPicker = defineAsyncComponent(
           stroke-linecap="round"
           stroke-linejoin="round"
         />
-        <path
-          d="M16 14V4"
-          stroke="white"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
+        <path d="M16 14V4" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
       </svg>
     </button>
     <!-- back button  -->

package/vue-components/v3/sidebar/SidebarHeader.vue

@@ -28,34 +28,10 @@ withDefaults(defineProps<Props>(), {
       data-testid="sidebar-menu-button"
       @click="$emit('toggleSidebar')"
     >
-      <svg
-        width="18"
-        height="18"
-        viewBox="0 0 18 18"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M3 13.5L10.5 13.5"
-          stroke="white"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path
-          d="M3 9L15 9"
-          stroke="white"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path
-          d="M3 4.5L7.5 4.5"
-          stroke="white"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
+      <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M3 13.5L10.5 13.5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+        <path d="M3 9L15 9" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+        <path d="M3 4.5L7.5 4.5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
       </svg>
     </div>
     <!-- hamburger icon  -->

package/vue-components/v3/sidebar/SidebarItem.vue

@@ -25,10 +25,7 @@ watch(
     if (n) {
       nextTick(() => {
         setTimeout(() => {
-          const top =
-            (sidebarItem.value &&
-              sidebarItem.value.getBoundingClientRect().top) ||
-            0;
+          const top = (sidebarItem.value && sidebarItem.value.getBoundingClientRect().top) || 0;
           // preventing scroll to options that are already visible
           if (top > window.innerHeight - 200) {
             // scroll to selected option item
@@ -37,7 +34,7 @@ watch(
               block: "center",
             });
           }
-        }, 500);
+        }, 300);
       });
     }
   },
@@ -47,12 +44,7 @@ watch(
 
 <template>
   <li ref="sidebarItem" data-testid="cluster-sidebar-item">
-    <router-link
-      :id="id"
-      :title="title"
-      :to="url"
-      :class="{ 'is-active': isActive }"
-    >
+    <router-link :id="id" :title="title" :to="url" :class="{ 'is-active': isActive }">
       <span>
         <img :src="icon" alt="icon" />
       </span>

package/vue-components/v3/sidebar/SidebarItemWithDropDown.vue

@@ -43,7 +43,7 @@ onMounted(() => {
     } else {
       setDropdownMaxHeight("close");
     }
-  }, 700);
+  }, 200);
 });
 
 watch(
@@ -85,8 +85,7 @@ watch(dropDownStatus, (n) => {
     nextTick(() => {
       const dropDownUl = sectionItems.value;
       // debugger;
-      if (dropDownUl)
-        dropDownSectionHeight.value = `${dropDownUl.scrollHeight}px`;
+      if (dropDownUl) dropDownSectionHeight.value = `${dropDownUl.scrollHeight}px`;
     });
   } else {
     // emit event to close other drop down items
@@ -107,10 +106,7 @@ watch(dropDownStatus, (n) => {
       </span>
     </a>
 
-    <ul
-      ref="sectionItems"
-      :style="{ maxHeight: dropDownSectionHeight || undefined }"
-    >
+    <ul ref="sectionItems" :style="{ maxHeight: dropDownSectionHeight || undefined }">
       <slot />
     </ul>
   </li>

package/vue-components/v3/sidebar/Steps.vue

@@ -55,8 +55,7 @@ withDefaults(defineProps<Props>(), {
           <span
             :class="{
               'label-text': true,
-              'has-text-weight-semibold':
-                substep.identifier <= activeSubStepIdentifier,
+              'has-text-weight-semibold': substep.identifier <= activeSubStepIdentifier,
             }"
             >{{ substep.title }}</span
           >

package/vue-components/v3/sidebar/sidebar-tabs/SidebarTabsLayout.vue

@@ -15,10 +15,7 @@ withDefaults(defineProps<Props>(), {
     </div>
     <!-- sidebar tabs  -->
 
-    <div
-      class="content-wrapper"
-      :class="isSidebarVisible ? 'pl-220' : 'pl-0 pb-0'"
-    >
+    <div class="content-wrapper" :class="isSidebarVisible ? 'pl-220' : 'pl-0 pb-0'">
       <!-- sidebar content  -->
       <slot name="tabs-content" />
       <!-- sidebar content  -->

package/vue-components/v3/sidebar/sidebar-tabs/TabsContent.vue

@@ -3,91 +3,73 @@
   <div class="content pt-10 pl-20 pb-20">
     <h1>Heading One</h1>
     <p>
-      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque cum
-      corrupti atque voluptatum quos a commodi similique perferendis
-      necessitatibus. Praesentium labore laudantium assumenda consectetur
-      corporis ex doloremque magnam animi numquam?
+      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque cum corrupti atque voluptatum quos a commodi
+      similique perferendis necessitatibus. Praesentium labore laudantium assumenda consectetur corporis ex doloremque
+      magnam animi numquam?
     </p>
     <h2>Heading Two</h2>
     <p>
-      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque cum
-      corrupti atque voluptatum quos a commodi similique perferendis
-      necessitatibus. Praesentium labore laudantium assumenda consectetur
-      corporis ex doloremque magnam animi numquam? Lorem ipsum dolor sit amet
-      consectetur, adipisicing elit. Cumque cum corrupti atque voluptatum quos a
-      commodi similique perferendis necessitatibus. Praesentium labore
-      laudantium assumenda consectetur corporis ex doloremque magnam animi
-      numquam?
+      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque cum corrupti atque voluptatum quos a commodi
+      similique perferendis necessitatibus. Praesentium labore laudantium assumenda consectetur corporis ex doloremque
+      magnam animi numquam? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque cum corrupti atque
+      voluptatum quos a commodi similique perferendis necessitatibus. Praesentium labore laudantium assumenda
+      consectetur corporis ex doloremque magnam animi numquam?
     </p>
     <h3>Heading three</h3>
     <p>
-      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque cum
-      corrupti atque voluptatum quos a commodi similique perferendis
-      necessitatibus. Praesentium labore laudantium assumenda consectetur
-      corporis ex doloremque magnam animi numquam?
+      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque cum corrupti atque voluptatum quos a commodi
+      similique perferendis necessitatibus. Praesentium labore laudantium assumenda consectetur corporis ex doloremque
+      magnam animi numquam?
     </p>
 
     <h4>Heading Four</h4>
     <p>
-      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque cum
-      corrupti atque voluptatum quos a commodi similique perferendis
-      necessitatibus. Praesentium labore laudantium assumenda consectetur
-      corporis ex doloremque magnam animi numquam?
+      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque cum corrupti atque voluptatum quos a commodi
+      similique perferendis necessitatibus. Praesentium labore laudantium assumenda consectetur corporis ex doloremque
+      magnam animi numquam?
     </p>
     <h5>Heading Five</h5>
     <p>
-      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque cum
-      corrupti atque voluptatum quos a commodi similique perferendis
-      necessitatibus. Praesentium labore laudantium assumenda consectetur
-      corporis ex doloremque magnam animi numquam? Lorem ipsum dolor sit amet
-      consectetur, adipisicing elit. Cumque cum corrupti atque voluptatum quos a
-      commodi similique perferendis necessitatibus. Praesentium labore
-      laudantium assumenda consectetur corporis ex doloremque magnam animi
-      numquam?
+      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque cum corrupti atque voluptatum quos a commodi
+      similique perferendis necessitatibus. Praesentium labore laudantium assumenda consectetur corporis ex doloremque
+      magnam animi numquam? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque cum corrupti atque
+      voluptatum quos a commodi similique perferendis necessitatibus. Praesentium labore laudantium assumenda
+      consectetur corporis ex doloremque magnam animi numquam?
     </p>
     <h6>Heading Six</h6>
     <p>
-      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque cum
-      corrupti atque voluptatum quos a commodi similique perferendis
-      necessitatibus. Praesentium labore laudantium assumenda consectetur
-      corporis ex doloremque magnam animi numquam?
+      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque cum corrupti atque voluptatum quos a commodi
+      similique perferendis necessitatibus. Praesentium labore laudantium assumenda consectetur corporis ex doloremque
+      magnam animi numquam?
     </p>
 
     <h4>Block Quote</h4>
 
     <blockquote>
-      Lorem ipsum dolor sit amet consectetur adipisicing elit. Et repudiandae
-      officiis autem aspernatur. Ab cum quisquam dolore pariatur consequuntur
-      officia nostrum, commodi sint saepe delectus itaque vel quae voluptates
-      atque.
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Et repudiandae officiis autem aspernatur. Ab cum quisquam
+      dolore pariatur consequuntur officia nostrum, commodi sint saepe delectus itaque vel quae voluptates atque.
     </blockquote>
 
     <h5>Heading Five</h5>
     <p>
-      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque cum
-      corrupti atque voluptatum quos a commodi similique perferendis
-      necessitatibus. Praesentium labore laudantium assumenda consectetur
-      corporis ex doloremque magnam animi numquam? Lorem ipsum dolor sit amet
-      consectetur, adipisicing elit. Cumque cum corrupti atque voluptatum quos a
-      commodi similique perferendis necessitatibus. Praesentium labore
-      laudantium assumenda consectetur corporis ex doloremque magnam animi
-      numquam?
+      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque cum corrupti atque voluptatum quos a commodi
+      similique perferendis necessitatibus. Praesentium labore laudantium assumenda consectetur corporis ex doloremque
+      magnam animi numquam? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque cum corrupti atque
+      voluptatum quos a commodi similique perferendis necessitatibus. Praesentium labore laudantium assumenda
+      consectetur corporis ex doloremque magnam animi numquam?
     </p>
     <h6>Heading Six</h6>
     <p>
-      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque cum
-      corrupti atque voluptatum quos a commodi similique perferendis
-      necessitatibus. Praesentium labore laudantium assumenda consectetur
-      corporis ex doloremque magnam animi numquam?
+      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque cum corrupti atque voluptatum quos a commodi
+      similique perferendis necessitatibus. Praesentium labore laudantium assumenda consectetur corporis ex doloremque
+      magnam animi numquam?
     </p>
 
     <h4>Block Quote</h4>
 
     <blockquote>
-      Lorem ipsum dolor sit amet consectetur adipisicing elit. Et repudiandae
-      officiis autem aspernatur. Ab cum quisquam dolore pariatur consequuntur
-      officia nostrum, commodi sint saepe delectus itaque vel quae voluptates
-      atque.
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Et repudiandae officiis autem aspernatur. Ab cum quisquam
+      dolore pariatur consequuntur officia nostrum, commodi sint saepe delectus itaque vel quae voluptates atque.
     </blockquote>
   </div>
 </template>

package/vue-components/v3/steps/ColoredSteps.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="colored-steps">
+    <ol class="steps">
+      <li class="step">
+        <div class="step-header bg-primary"></div>
+        <p>Step 1</p>
+      </li>
+      <li class="step">
+        <div class="step-header bg-info"></div>
+        <p>Step 2</p>
+      </li>
+      <li class="step">
+        <div class="step-header bg-info"></div>
+        <p>Step 2</p>
+      </li>
+      <li class="step">
+        <div class="step-header bg-error"></div>
+        <p>Step 2</p>
+      </li>
+      <li class="step">
+        <div class="step-header bg-warning"></div>
+        <p>Step 2</p>
+      </li>
+    </ol>
+  </div>
+</template>
+
+<style lang="scss">
+.colored-steps {
+  --size: 8px;
+  --line: 1px;
+  ol {
+    display: flex;
+    // gap: 48px;
+
+    li {
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      position: relative;
+      width: 100px;
+      &:not(&:last-child) {
+        &::before {
+          position: absolute;
+          content: "";
+          height: var(--line);
+          left: 50%;
+          top: calc(var(--size) / 2 - var(--line) / 2);
+          order: -1;
+          background-color: #333;
+          width: calc(100% - var(--size));
+        }
+      }
+
+      .step-header {
+        background-color: $ac-primary;
+        align-items: center;
+        display: flex;
+        flex-shrink: 0;
+        height: var(--size);
+        justify-content: center;
+        margin: auto auto var(--size);
+        position: relative;
+        width: var(--size);
+        border-radius: 50%;
+      }
+      p {
+        font-size: 12px;
+        margin: 0;
+        padding: 0;
+      }
+    }
+  }
+}
+</style>

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

@@ -15,21 +15,15 @@ const props = withDefaults(defineProps<Props>(), {
   removeContentPadding: false,
 });
 
-const TableContainer = defineAsyncComponent(
-  () => import("./TableContainer.vue")
-);
+const TableContainer = defineAsyncComponent(() => import("./TableContainer.vue"));
 
-const EmptyTableInfo = defineAsyncComponent(
-  () => import("./EmptyTableInfo.vue")
-);
+const EmptyTableInfo = defineAsyncComponent(() => import("./EmptyTableInfo.vue"));
 
 const TableRow = defineAsyncComponent(() => import("./TableRow.vue"));
 
 const TableCell = defineAsyncComponent(() => import("./TableCell.vue"));
 
-const CellValue = defineAsyncComponent(
-  () => import("./table-cell/CellValue.vue")
-);
+const CellValue = defineAsyncComponent(() => import("./table-cell/CellValue.vue"));
 
 const loaderCols = ref(5);
 
@@ -40,10 +34,7 @@ const isFullTableLoaderActive = computed(() => {
 
 <template>
   <table-container>
-    <table
-      class="table ac-info-table is-fullwidth"
-      :class="{ 'pl-0 pr-0': removeContentPadding }"
-    >
+    <table class="table ac-info-table is-fullwidth" :class="{ 'pl-0 pr-0': removeContentPadding }">
       <tbody v-if="isFullTableLoaderActive">
         <table-row v-for="i in loaderCols" :key="i">
           <table-cell>
@@ -62,10 +53,7 @@ const isFullTableLoaderActive = computed(() => {
         }"
       >
         <template v-if="!isTableEmpty">
-          <table-row
-            v-for="(tableHeader, idx) in tableHeaders"
-            :key="(tableHeader as string)"
-          >
+          <table-row v-for="(tableHeader, idx) in tableHeaders" :key="(tableHeader as string)">
             <table-cell>
               <span class="is-flex is-align-items-center">
                 <slot :name="`table-cell-icon-${idx}`" />

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

@@ -16,17 +16,11 @@ const props = withDefaults(defineProps<Props>(), {
   removeContentPadding: false,
 });
 
-const TableContainer = defineAsyncComponent(
-  () => import("../table/TableContainer.vue")
-);
-const EmptyTableInfo = defineAsyncComponent(
-  () => import("../table/EmptyTableInfo.vue")
-);
+const TableContainer = defineAsyncComponent(() => import("../table/TableContainer.vue"));
+const EmptyTableInfo = defineAsyncComponent(() => import("../table/EmptyTableInfo.vue"));
 const TableRow = defineAsyncComponent(() => import("../table/TableRow.vue"));
 const TableCell = defineAsyncComponent(() => import("../table/TableCell.vue"));
-const CellValue = defineAsyncComponent(
-  () => import("../table/table-cell/CellValue.vue")
-);
+const CellValue = defineAsyncComponent(() => import("../table/table-cell/CellValue.vue"));
 
 const loaderCols = ref(5);
 const headerSortables = ref<Array<{ enabled: boolean; mode: string }>>([]);
@@ -36,9 +30,7 @@ const isFullTableLoaderActive = computed(() => {
 });
 
 const headerLabels = computed(() => {
-  return props.tableHeaders.map((th) =>
-    typeof th === "string" ? th : th?.name || "Label"
-  );
+  return props.tableHeaders.map((th) => (typeof th === "string" ? th : th?.name || "Label"));
 });
 
 watch(
@@ -72,10 +64,7 @@ watch(
 
 <template>
   <table-container>
-    <table
-      class="table ac-info-table is-fullwidth"
-      :class="{ 'pl-0 pr-0': removeContentPadding }"
-    >
+    <table class="table ac-info-table is-fullwidth" :class="{ 'pl-0 pr-0': removeContentPadding }">
       <tbody v-if="isFullTableLoaderActive">
         <table-row v-for="i in loaderCols" :key="i">
           <table-cell>
@@ -94,10 +83,7 @@ watch(
         }"
       >
         <template v-if="!isTableEmpty">
-          <table-row
-            v-for="(tableHeader, idx) in tableHeaders"
-            :key="headerLabels[idx]"
-          >
+          <table-row v-for="(tableHeader, idx) in tableHeaders" :key="headerLabels[idx]">
             <table-cell>
               <slot :name="`table-cell-icon-${idx}`" />
               {{ headerLabels[idx] }}

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

@@ -1,12 +1,5 @@
 <script setup lang="ts">
-import {
-  computed,
-  defineAsyncComponent,
-  nextTick,
-  onUpdated,
-  ref,
-  watch,
-} from "vue";
+import { computed, defineAsyncComponent, nextTick, onUpdated, ref, watch } from "vue";
 import type { AcTableCol } from "../../types/table";
 
 interface Props {
@@ -33,20 +26,12 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits(["sort", "scroller"]);
 
-const TableContainer = defineAsyncComponent(
-  () => import("../table/TableContainer.vue")
-);
+const TableContainer = defineAsyncComponent(() => import("../table/TableContainer.vue"));
 const TableRow = defineAsyncComponent(() => import("../table/TableRow.vue"));
 const TableCell = defineAsyncComponent(() => import("../table/TableCell.vue"));
-const CellValue = defineAsyncComponent(
-  () => import("../table/table-cell/CellValue.vue")
-);
-const EmptyTableInfo = defineAsyncComponent(
-  () => import("../table/EmptyTableInfo.vue")
-);
-const FakeTableCell = defineAsyncComponent(
-  () => import("../table/FakeTableCell.vue")
-);
+const CellValue = defineAsyncComponent(() => import("../table/table-cell/CellValue.vue"));
+const EmptyTableInfo = defineAsyncComponent(() => import("../table/EmptyTableInfo.vue"));
+const FakeTableCell = defineAsyncComponent(() => import("../table/FakeTableCell.vue"));
 
 const fakeCellWidth = ref(0);
 const headerSortables = ref<Array<{ enabled: boolean; mode: string }>>([]);
@@ -54,9 +39,7 @@ const ac_table = ref(null as HTMLElement | null);
 const ac_table_container = ref(null as HTMLElement | null);
 
 const headerLabels = computed(() => {
-  return props.tableHeaders.map((th) =>
-    typeof th === "string" ? th : th?.name || "Label"
-  );
+  return props.tableHeaders.map((th) => (typeof th === "string" ? th : th?.name || "Label"));
 });
 
 const isFullTableLoaderActive = computed(() => {
@@ -147,11 +130,7 @@ onUpdated(() => {
       ref="ac_table"
       class="table ac-table is-bordered"
       :class="{
-        'is-fullwidth':
-          !isDynamicWidthTable ||
-          isFullTableLoaderActive ||
-          isTableEmpty ||
-          isLoaderActive,
+        'is-fullwidth': !isDynamicWidthTable || isFullTableLoaderActive || isTableEmpty || isLoaderActive,
         // 'ac-striped': !columnStriped,
         // 'is-bordered': columnStriped,
       }"
@@ -171,28 +150,15 @@ onUpdated(() => {
               sorting: headerSortables[idx].enabled,
               'sorting-desc': headerSortables[idx].mode === 'desc',
               'sorting-asc': headerSortables[idx].mode === 'asc',
-              'has-text-centered':
-                typeof tableHeader === 'string'
-                  ? false
-                  : tableHeader.textAlign === 'center',
-              'has-text-left':
-                typeof tableHeader === 'string'
-                  ? false
-                  : tableHeader.textAlign === 'left',
-              'has-text-right':
-                typeof tableHeader === 'string'
-                  ? false
-                  : tableHeader.textAlign === 'right',
+              'has-text-centered': typeof tableHeader === 'string' ? false : tableHeader.textAlign === 'center',
+              'has-text-left': typeof tableHeader === 'string' ? false : tableHeader.textAlign === 'left',
+              'has-text-right': typeof tableHeader === 'string' ? false : tableHeader.textAlign === 'right',
             }"
             @click.prevent="headerSortables[idx].enabled && emitSortEvent(idx)"
           >
             {{ headerLabels[idx] }}
             <span
-              v-if="
-                tableHeader.dashboard &&
-                tableHeader.dashboard.status &&
-                tableHeader.dashboard.status !== 'Success'
-              "
+              v-if="tableHeader.dashboard && tableHeader.dashboard.status && tableHeader.dashboard.status !== 'Success'"
               :title="tableHeader.dashboard && tableHeader.dashboard.message"
               class="icon has-text-danger"
             >
@@ -200,11 +166,7 @@ onUpdated(() => {
             </span>
           </th>
           <th ref="action-section" v-if="actionable"></th>
-          <fake-table-cell
-            v-if="fakeCellWidth > 0"
-            :is-header-cell="true"
-            :fake-cell-width="fakeCellWidth"
-          />
+          <fake-table-cell v-if="fakeCellWidth > 0" :is-header-cell="true" :fake-cell-width="fakeCellWidth" />
         </table-row>
       </thead>
       <!-- table row loaders -->
@@ -215,14 +177,8 @@ onUpdated(() => {
           </th>
         </table-row>
         <table-row v-else>
-          <table-cell
-            v-for="(tableHeader, idx) in tableHeaders"
-            :key="headerLabels[idx]"
-          >
-            <cell-value
-              :is-loader-active="true"
-              :cell-title="headerLabels[idx]"
-            />
+          <table-cell v-for="(tableHeader, idx) in tableHeaders" :key="headerLabels[idx]">
+            <cell-value :is-loader-active="true" :cell-title="headerLabels[idx]" />
           </table-cell>
         </table-row>
       </tbody>
@@ -235,11 +191,7 @@ onUpdated(() => {
         <tbody v-else>
           <table-row class="is-hoverless">
             <table-cell
-              :colspan="
-                tableHeaders.length +
-                (actionable ? 1 : 0) +
-                (collapsible ? 1 : 0)
-              "
+              :colspan="tableHeaders.length + (actionable ? 1 : 0) + (collapsible ? 1 : 0)"
               class="no-data-available has-text-centered"
             >
               <empty-table-info />

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

@@ -6,10 +6,7 @@ const tableContainer = ref<HTMLElement | null>(null);
 const emit = defineEmits(["scroller"]);
 
 const isScrollerShowing = () => {
-  if (tableContainer.value?.scrollWidth)
-    return (
-      tableContainer.value?.scrollWidth > tableContainer.value?.clientWidth
-    );
+  if (tableContainer.value?.scrollWidth) return tableContainer.value?.scrollWidth > tableContainer.value?.clientWidth;
   return false;
 };