@appscode/design-system 2.0.59 → 2.0.60

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

@@ -1,10 +1,7 @@
 <template>
   <tags v-if="printableStringObjs.length">
     <tag
-      v-for="(printableStringOb, idx) in printableStringObjs.slice(
-        0,
-        indexOfCharacterLengthExceed
-      )"
+      v-for="(printableStringOb, idx) in printableStringObjs.slice(0, indexOfCharacterLengthExceed)"
       :key="`${printableStringOb.print}-${idx}`"
     >
       <value-with-modal
@@ -52,8 +49,7 @@ export default {
     Tag: () => import("../../tag/Tag.vue"),
     EllipsisIcon: () => import("../../icons/Ellipsis.vue"),
     JsonShowModal: () => import("../../modals/JsonShowModal.vue"),
-    ValueWithModal: () =>
-      import("./ValueWithModal.vue"),
+    ValueWithModal: () => import("./ValueWithModal.vue"),
   },
 
   data() {
@@ -74,9 +70,7 @@ export default {
         } else {
           const stringifiedValue = JSON.stringify(item);
           exceededLength = stringifiedValue.length > 27;
-          print = exceededLength
-            ? `${stringifiedValue.slice(0, 27)}...`
-            : stringifiedValue;
+          print = exceededLength ? `${stringifiedValue.slice(0, 27)}...` : stringifiedValue;
         }
         return { value, exceededLength, print };
       });

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

@@ -58,8 +58,7 @@ export default {
     },
   },
   components: {
-    ContentLoader: () =>
-      import("vue-content-loader").then(({ ContentLoader }) => ContentLoader),
+    ContentLoader: () => import("vue-content-loader").then(({ ContentLoader }) => ContentLoader),
     ObjectCell: () => import("./ObjectCell.vue"),
     ArrayCell: () => import("./ArrayCell.vue"),
   },

package/vue-components/v2/table/table-cell/GenericCell.vue

@@ -5,7 +5,7 @@
       'is-align-items-center': cellValue.icon,
       'is-justify-content-center': cellDescriptor.textAlign === 'center',
       'is-justify-content-left': cellDescriptor.textAlign === 'left',
-      'is-justify-content-right': cellDescriptor.textAlign === 'right'
+      'is-justify-content-right': cellDescriptor.textAlign === 'right',
     }"
   >
     <span v-if="cellValue.icon" class="icon p-0 mr-10">
@@ -29,17 +29,17 @@
 export default {
   components: {
     Tag: () => import("../../tag/Tag.vue"),
-    CellValue: () => import("../table-cell/CellValue.vue")
+    CellValue: () => import("../table-cell/CellValue.vue"),
   },
   props: {
     cellDescriptor: {
       type: Object,
-      default: () => ({})
+      default: () => ({}),
     },
     cellValue: {
       type: Object,
-      default: () => ({})
-    }
+      default: () => ({}),
+    },
   },
   methods: {
     getCellLink(cell) {
@@ -47,10 +47,10 @@ export default {
       const { user, cluster } = this.$route.params;
       const link = inject(cell.link || "", {
         username: user,
-        clustername: cluster
+        clustername: cluster,
       });
       return link;
-    }
-  }
+    },
+  },
 };
 </script>

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

@@ -1,10 +1,7 @@
 <template>
   <tags v-if="printableStringObjs.length">
     <tag
-      v-for="printableStringOb in printableStringObjs.slice(
-        0,
-        indexOfCharacterLengthExceed
-      )"
+      v-for="printableStringOb in printableStringObjs.slice(0, indexOfCharacterLengthExceed)"
       :key="printableStringOb.key"
     >
       <value-with-modal
@@ -52,8 +49,7 @@ export default {
     Tag: () => import("../../tag/Tag.vue"),
     EllipsisIcon: () => import("../../icons/Ellipsis.vue"),
     JsonShowModal: () => import("../../modals/JsonShowModal.vue"),
-    ValueWithModal: () =>
-      import("./ValueWithModal.vue"),
+    ValueWithModal: () => import("./ValueWithModal.vue"),
   },
 
   data() {

package/vue-components/v2/table/table-cell/ValueWithModal.vue

@@ -2,12 +2,7 @@
   <a @click.prevent.stop="showModal = true">
     {{ print }}
 
-    <json-show-modal
-      :open="showModal"
-      @closemodal="showModal = false"
-      :editor-title="title"
-      :editor-content="value"
-    />
+    <json-show-modal :open="showModal" @closemodal="showModal = false" :editor-title="title" :editor-content="value" />
   </a>
 </template>
 

package/vue-components/v3/alert/AlertMessage.vue

@@ -29,11 +29,7 @@ withDefaults(defineProps<Props>(), {
             stroke="currentColor"
             class="w-6 h-6"
           >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="M6 18L18 6M6 6l12 12"
-            />
+            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
           </svg>
         </span>
       </button>

package/vue-components/v3/alert/Toast.vue

@@ -13,10 +13,7 @@ withDefaults(defineProps<Props>(), {
     <div class="toast-header is-flex is-align-items-center">
       <h6 class="mr-auto">Toast Header</h6>
       <small>2 hours ago</small>
-      <button
-        type="button"
-        class="button ac-button is-transparent w-18 h-18 flex ml-8"
-      >
+      <button type="button" class="button ac-button is-transparent w-18 h-18 flex ml-8">
         <span class="material-icons close-icon is-size-5">close</span>
       </button>
     </div>

package/vue-components/v3/badge-tags/Badge.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+interface Props {
+  modifierClasses?: string;
+  label?: string;
+  dot?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  modifierClasses: "",
+  label: "Default",
+  dot: false,
+});
+</script>
+
+<template>
+  <div class="badge" :class="modifierClasses">
+    <span class="circle" v-if="dot"></span>
+    <span>{{ label }}</span>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import "../../../vue-components/styles/components/badge-tags";
+</style>

package/vue-components/v3/badge-tags/Tag.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+  modifierClasses?: string;
+  label?: string;
+  url?: string;
+  dot?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  modifierClasses: "",
+  label: "Default",
+  url: "#",
+  dot: false,
+});
+</script>
+
+<template>
+  <a :href="url" class="badge" :class="modifierClasses">
+    <span class="circle" v-if="dot"></span>
+    <span>{{ label }}</span>
+  </a>
+</template>
+
+<style lang="scss" scoped>
+@import "../../../vue-components/styles/components/badge-tags";
+</style>

package/vue-components/v3/breadcrumbs/Breadcrumb.vue

@@ -19,8 +19,7 @@ const pathReplaceWithParam = (path: string) => {
   // Then again add them wthi "/" and return the path value
   return splitPath.reduce((pval, cval) => {
     if (cval[0] === ":") {
-      const cutIndex =
-        cval.indexOf("?") !== -1 ? cval.indexOf("?") : cval.length;
+      const cutIndex = cval.indexOf("?") !== -1 ? cval.indexOf("?") : cval.length;
       return (pval += route.params[cval.slice(1, cutIndex)] + "/");
     } else return (pval += cval + "/");
   }, "/");
@@ -50,14 +49,11 @@ const createList = (paths: Array<string>) => {
 
 const createBreadcrumbs = () => {
   //Adding dynamic path to the route
-  const listPaths = route.matched.map((element) =>
-    pathReplaceWithParam(element.path)
-  );
+  const listPaths = route.matched.map((element) => pathReplaceWithParam(element.path));
 
   // If there is duplicate value in arrays last element remove it
   const length = listPaths.length;
-  if (length > 1 && listPaths[length - 1] === listPaths[length - 2])
-    listPaths.pop();
+  if (length > 1 && listPaths[length - 1] === listPaths[length - 2]) listPaths.pop();
 
   //Createing the breadcrumb name
   const listName = createList(listPaths);
@@ -87,24 +83,10 @@ watch(
   <div class="ac-breadcrumb">
     <nav aria-label="breadcrumbs" class="breadcrumb">
       <ul>
-        <li
-          v-for="(item, idx) in list"
-          :key="idx"
-          :class="{ 'is-active': idx === list.length - 1 }"
-        >
-          <router-link
-            class="router-link-active"
-            :class="{ 'is-active': idx === list.length - 1 }"
-            :to="item.path"
-          >
+        <li v-for="(item, idx) in list" :key="idx" :class="{ 'is-active': idx === list.length - 1 }">
+          <router-link class="router-link-active" :class="{ 'is-active': idx === list.length - 1 }" :to="item.path">
             <span v-if="idx === 0" class="icon is-flex-start p-0 m-0">
-              <svg
-                width="12"
-                height="12"
-                viewBox="0 0 12 12"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
+              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path
                   d="M1 4.5L5.5 1L10 4.5V10C10 10.2652 9.89464 10.5196 9.70711 10.7071C9.51957 10.8946 9.26522 11 9 11H2C1.73478 11 1.48043 10.8946 1.29289 10.7071C1.10536 10.5196 1 10.2652 1 10V4.5Z"
                   stroke="#666666"

package/vue-components/v3/button/Button.vue

@@ -47,17 +47,8 @@ const showUnpluginIcon = computed(() => {
     :title="tooltip"
     data-testid="ac-create-button"
   >
-    <span
-      v-if="iconClass || iconImage"
-      class="icon is-small"
-      :class="showUnpluginIcon ? iconClass : ''"
-    >
-      <img
-        v-if="iconImage"
-        :src="iconImage"
-        alt="icon"
-        :width="iconImageWidth"
-      />
+    <span v-if="iconClass || iconImage" class="icon is-small" :class="showUnpluginIcon ? iconClass : ''">
+      <img v-if="iconImage" :src="iconImage" alt="icon" :width="iconImageWidth" />
 
       <slot name="icon" v-else-if="showUnpluginIcon" />
 

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

@@ -1,9 +1,7 @@
 <script setup lang="ts"></script>
 
 <template>
-  <div
-    class="is-flex is-justify-content-space-between pt-8 pb-8 pl-20 pr-20 b-1"
-  >
+  <div class="is-flex is-justify-content-space-between pt-8 pb-8 pl-20 pr-20 b-1">
     <div class="header-left-content">
       <slot name="card-header-left" />
     </div>

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

@@ -23,9 +23,7 @@ withDefaults(defineProps<Props>(), {
   showOptions: false,
 });
 
-const OptionDots = defineAsyncComponent(
-  () => import("../option-dots/Options.vue")
-);
+const OptionDots = defineAsyncComponent(() => import("../option-dots/Options.vue"));
 </script>
 
 <template>
@@ -49,18 +47,14 @@ const OptionDots = defineAsyncComponent(
               :class="tag.class"
               :data-testid="idx === 0 ? 'cluster-status-text' : undefined"
               class="is-flex is-align-center gap-4"
-              ><span v-if="tag?.isSpinner || false" class="is-flex gap-4"
-                ><SvgSpinners270Ring /></span
+              ><span v-if="tag?.isSpinner || false" class="is-flex gap-4"><SvgSpinners270Ring /></span
               >{{ tag.value }}</span
             >
           </div>
         </div>
       </div>
       <div class="c-body">
-        <p
-          v-for="(detail, idx) in clusterData.details"
-          :key="idx + detail.title"
-        >
+        <p v-for="(detail, idx) in clusterData.details" :key="idx + detail.title">
           <span>{{ detail.title }}</span> <strong>{{ detail.value }}</strong>
         </p>
       </div>

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

@@ -6,10 +6,7 @@
     <div class="card-header">
       <h3>Clusters</h3>
       <div class="logo">
-        <img
-          src="https://bb-developer-v1.web.app/_nuxt/img/cluster-icon.f68a1b6.svg"
-          alt=""
-        />
+        <img src="https://bb-developer-v1.web.app/_nuxt/img/cluster-icon.f68a1b6.svg" alt="" />
       </div>
     </div>
     <!-- header end -->

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

@@ -14,12 +14,7 @@ withDefaults(
   <!-- single card wrapper start  -->
   <div class="card-basic feature-card b-1" data-testid="simple-feature-card">
     <div class="c-header is-flex is-justify-content-space-between">
-      <div
-        v-if="isRequired"
-        class="tag has-background-warning has-text-secondary is-rounded required"
-      >
-        Required
-      </div>
+      <div v-if="isRequired" class="tag has-background-warning has-text-secondary is-rounded required">Required</div>
 
       <div class="c-title is-flex gap-8 is-fullwidth is-align-items-center">
         <div class="icon">

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

@@ -1,10 +1,6 @@
 <script setup lang="ts"></script>
 <template>
-  <div
-    class="is-flex is-flex-wrap-wrap"
-    data-testid="simple-feature-sets"
-    style="gap: 16px"
-  >
+  <div class="is-flex is-flex-wrap-wrap" data-testid="simple-feature-sets" style="gap: 16px">
     <slot />
   </div>
 </template>

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

@@ -13,20 +13,18 @@ withDefaults(defineProps<Props>(), {
   rowData: () => ({ cells: [] }),
 });
 
-const OptionDots = defineAsyncComponent(
-  () => import("../option-dots/Options.vue")
-);
+const OptionDots = defineAsyncComponent(() => import("../option-dots/Options.vue"));
 </script>
 
 <template>
   <div class="info-card" :class="modifierClasses">
     <div class="header">
       <div class="logo">
-        <img :src="rowData.cells[0].icon" alt="icon" />
+        <img :src="rowData?.cells[0]?.icon" alt="icon" />
       </div>
       <div class="content">
         <div class="is-flex is-justify-content-space-between">
-          <h5>{{ rowData.cells[0].data }}</h5>
+          <h5>{{ rowData?.cells[0]?.data || "-" }}</h5>
           <option-dots :position="'is-right is-hidden'" />
         </div>
       </div>
@@ -35,13 +33,7 @@ const OptionDots = defineAsyncComponent(
       <div class="left-content">
         <p title="CPU (request/limit)">
           <span class="icon">
-            <svg
-              width="21"
-              height="19"
-              viewBox="0 0 21 19"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
+            <svg width="21" height="19" viewBox="0 0 21 19" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path
                 d="M6.63471 1V2.45659M2.60992 6.09807H1M20.319 6.09807H18.7091M2.60992 9.73955H1M20.319 9.73955H18.7091M2.60992 13.381H1M20.319 13.381H18.7091M6.63471 17.0225V18.4791M10.6595 1V2.45659M10.6595 17.0225V18.4791M14.6843 1V2.45659M14.6843 17.0225V18.4791M5.02479 17.0225H16.2942C16.9347 17.0225 17.5489 16.7923 18.0018 16.3826C18.4547 15.9728 18.7091 15.4171 18.7091 14.8376V4.64148C18.7091 4.06201 18.4547 3.50628 18.0018 3.09653C17.5489 2.68679 16.9347 2.45659 16.2942 2.45659H5.02479C4.38433 2.45659 3.7701 2.68679 3.31722 3.09653C2.86434 3.50628 2.60992 4.06201 2.60992 4.64148V14.8376C2.60992 15.4171 2.86434 15.9728 3.31722 16.3826C3.7701 16.7923 4.38433 17.0225 5.02479 17.0225ZM5.82975 5.36978H15.4893V14.1093H5.82975V5.36978Z"
                 stroke="#5C5C5C"
@@ -52,18 +44,12 @@ const OptionDots = defineAsyncComponent(
             </svg>
           </span>
           <strong>
-            {{ rowData.cells[2].data ? rowData.cells[2].data : "-" }}
+            {{ rowData?.cells[2]?.data ? rowData?.cells[2]?.data : "-" }}
           </strong>
         </p>
         <p title="Memory (request/limit)">
           <span class="icon">
-            <svg
-              width="20"
-              height="13"
-              viewBox="0 0 20 13"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
+            <svg width="20" height="13" viewBox="0 0 20 13" fill="none" xmlns="http://www.w3.org/2000/svg">
               <rect
                 x="0.489721"
                 y="0.489721"
@@ -103,18 +89,12 @@ const OptionDots = defineAsyncComponent(
             </svg>
           </span>
           <strong>
-            {{ rowData.cells[3].data ? rowData.cells[3].data : "-" }}
+            {{ rowData.cells[3]?.data ? rowData?.cells[3]?.data : "-" }}
           </strong>
         </p>
         <p title="Storage (request/limit)">
           <span class="icon">
-            <svg
-              width="21"
-              height="16"
-              viewBox="0 0 21 16"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
+            <svg width="21" height="16" viewBox="0 0 21 16" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path
                 d="M20.3189 7.76208H1"
                 stroke="#5C5C5C"
@@ -146,12 +126,12 @@ const OptionDots = defineAsyncComponent(
             </svg>
           </span>
           <strong>
-            {{ rowData.cells[4].data ? rowData.cells[4].data : "-" }}
+            {{ rowData?.cells[4]?.data ? rowData?.cells[4]?.data : "-" }}
           </strong>
         </p>
       </div>
       <div class="right-content">
-        <h2>{{ rowData.cells[1].data }}</h2>
+        <h2>{{ rowData?.cells[1]?.data || "-" }}</h2>
         <p>Instance</p>
       </div>
     </div>

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

@@ -13,20 +13,10 @@ withDefaults(defineProps<Props>(), {
 <template>
   <div class="card-basic b-1 mb-12 has-hover-style">
     <div class="c-header is-flex is-justify-content-space-between">
-      <div
-        class="tag has-background-danger-light has-text-danger is-rounded required"
-      >
-        REQUIRED
-      </div>
+      <div class="tag has-background-danger-light has-text-danger is-rounded required">REQUIRED</div>
       <div class="c-title is-flex gap-8 is-fullwidth is-align-items-center">
         <div class="icon">
-          <svg
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path
               d="M20 3H4C2.89543 3 2 3.89543 2 5V15C2 16.1046 2.89543 17 4 17H20C21.1046 17 22 16.1046 22 15V5C22 3.89543 21.1046 3 20 3Z"
               stroke="#808080"
@@ -52,9 +42,7 @@ withDefaults(defineProps<Props>(), {
         </div>
         <h5>{{ title }}</h5>
       </div>
-      <div class="tag has-background-success-light has-text-success is-rounded">
-        ENABLED
-      </div>
+      <div class="tag has-background-success-light has-text-success is-rounded">ENABLED</div>
     </div>
     <div class="c-body">
       <p>Monitor your kubernetes resources with Prometheus and Grafana.</p>

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

@@ -1,12 +1,8 @@
 <script setup lang="ts">
 import { defineAsyncComponent } from "vue";
 const AcButton = defineAsyncComponent(() => import("../button/Button.vue"));
-const HeroiconsArrowSmallRight = defineAsyncComponent(
-  () => import("~icons/heroicons/arrow-small-right")
-);
-const HeroiconsPlus = defineAsyncComponent(
-  () => import("~icons/heroicons/plus")
-);
+const HeroiconsArrowSmallRight = defineAsyncComponent(() => import("~icons/heroicons/arrow-small-right"));
+const HeroiconsPlus = defineAsyncComponent(() => import("~icons/heroicons/plus"));
 
 interface Props {
   title?: string;
@@ -33,25 +29,15 @@ withDefaults(defineProps<Props>(), {
 <template>
   <div
     class="card-details has-hover-style"
-    :class="[
-      modifierClasses,
-      { 'no-data-available is-justify-content-center': noDataAvailable },
-    ]"
+    :class="[modifierClasses, { 'no-data-available is-justify-content-center': noDataAvailable }]"
   >
-    <div
-      class="left-content"
-      :class="{ 'is-align-items-center': noDataAvailable }"
-    >
+    <div class="left-content" :class="{ 'is-align-items-center': noDataAvailable }">
       <figure class="image" :class="{ 'is-48x48': !noDataAvailable }">
         <img :class="{ 'is-rounded': !noDataAvailable }" :src="thumbnail" />
       </figure>
       <h5>{{ title }}</h5>
 
-      <AcButton
-        v-if="noDataAvailable && !hideCreateButton"
-        :title="cardLabel"
-        icon-class="unplugin"
-      >
+      <AcButton v-if="noDataAvailable && !hideCreateButton" :title="cardLabel" icon-class="unplugin">
         <template #icon><HeroiconsPlus /></template>
       </AcButton>
 
@@ -61,17 +47,12 @@ withDefaults(defineProps<Props>(), {
         modifier-classes="is-text px-0 is-flex-direction-row-reverse gap-8"
         icon-class="unplugin"
       >
-        <template #icon v-if="!hideCreateButton"
-          ><HeroiconsArrowSmallRight
-        /></template>
+        <template #icon v-if="!hideCreateButton"><HeroiconsArrowSmallRight /></template>
       </AcButton>
     </div>
     <div class="right-content" v-if="!noDataAvailable">
       <figure class="image is-48x48">
-        <img
-          v-if="type === 'organization'"
-          src="../../images/icons/org-icon.svg"
-        />
+        <img v-if="type === 'organization'" src="../../images/icons/org-icon.svg" />
         <img v-else src="../../images/icons/cluster-icon.svg" />
       </figure>
     </div>

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

@@ -1,9 +1,7 @@
 <script setup lang="ts">
 import { defineAsyncComponent } from "vue";
 
-const ContentHeader = defineAsyncComponent(
-  () => import("./../content/ContentHeader.vue")
-);
+const ContentHeader = defineAsyncComponent(() => import("./../content/ContentHeader.vue"));
 
 interface Props {
   headerTitle: string;

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

@@ -48,10 +48,7 @@
             <p class="user-name">John Smith</p>
           </div>
           <div class="p-card-logo">
-            <img
-              src="https://bb-developer-v1.web.app/_nuxt/img/visa-card-logo.6a56d8c.svg"
-              alt="visa-card"
-            />
+            <img src="https://bb-developer-v1.web.app/_nuxt/img/visa-card-logo.6a56d8c.svg" alt="visa-card" />
           </div>
         </div>
         <!-- card footer end -->

package/vue-components/v3/content/ContentHeader.vue

@@ -1,9 +1,7 @@
 <script setup lang="ts">
 import { defineAsyncComponent } from "vue";
 
-const HeaderItems = defineAsyncComponent(
-  () => import("./../header/HeaderItems.vue")
-);
+const HeaderItems = defineAsyncComponent(() => import("./../header/HeaderItems.vue"));
 
 interface Props {
   headerTitle?: string;

package/vue-components/v3/content/ContentTable.vue

@@ -3,12 +3,8 @@ import { defineAsyncComponent, ref } from "vue";
 
 const ContentLayout = defineAsyncComponent(() => import("./ContentLayout.vue"));
 const ContentHeader = defineAsyncComponent(() => import("./ContentHeader.vue"));
-const HeaderItem = defineAsyncComponent(
-  () => import("./../header/HeaderItem.vue")
-);
-const SearchBar = defineAsyncComponent(
-  () => import("./../searchbars/SearchBar.vue")
-);
+const HeaderItem = defineAsyncComponent(() => import("./../header/HeaderItem.vue"));
+const SearchBar = defineAsyncComponent(() => import("./../searchbars/SearchBar.vue"));
 
 interface Props {
   removeTableHeaderPadding?: boolean;
@@ -51,19 +47,11 @@ const updateSearchText = (text: string) => {
         </template>
         <slot name="content-left-controls" />
         <header-item>
-          <search-bar
-            v-if="searchable"
-            @search="updateSearchText"
-            :ac-input-id="acInuptId"
-          />
+          <search-bar v-if="searchable" @search="updateSearchText" :ac-input-id="acInuptId" />
         </header-item>
         <slot name="content-right-controls" />
       </content-header>
     </template>
-    <slot
-      name="content"
-      :search-text="searchText"
-      :update-search-text="updateSearchText"
-    />
+    <slot name="content" :search-text="searchText" :update-search-text="updateSearchText" />
   </content-layout>
 </template>

package/vue-components/v3/dropdown/DropdownAction.vue

@@ -27,11 +27,7 @@ onClickOutside(actionDropdown, () => emit("update:modelValue", false));
 
 <template>
   <!-- dropdown start  -->
-  <div
-    ref="actionDropdown"
-    class="dropdown-action"
-    :class="{ 'dropdown is-active': modelValue }"
-  >
+  <div ref="actionDropdown" class="dropdown-action" :class="{ 'dropdown is-active': modelValue }">
     <div class="dropdown-trigger">
       <ac-button
         :modifier-classes="buttonModifierClass"