@appscode/design-system 2.0.59 → 2.0.61

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"

package/vue-components/v3/editor/Editor.vue

@@ -32,9 +32,7 @@ const emit = defineEmits(["update:modelValue"]);
 
 const EditorTabs = defineAsyncComponent(() => import("../tabs/EditorTabs.vue"));
 
-const Preloader = defineAsyncComponent(
-  () => import("../preloader/Preloader.vue")
-);
+const Preloader = defineAsyncComponent(() => import("../preloader/Preloader.vue"));
 
 const Banner = defineAsyncComponent(() => import("../banner/Banner.vue"));
 
@@ -57,12 +55,7 @@ const calcShowMinimap = computed(() => {
 });
 
 const theme = computed(() => {
-  return (
-    props.editorTheme ||
-    (document.documentElement.classList.contains("is-dark-theme")
-      ? "vs-dark"
-      : "vs")
-  );
+  return props.editorTheme || (document.documentElement.classList.contains("is-dark-theme") ? "vs-dark" : "vs");
 });
 
 const onChange = (e: Event) => {
@@ -84,8 +77,7 @@ const computeHightInClass = computed(() => {
 });
 
 const computeHightInStyle = computed(() => {
-  if (typeof props.editorHeight === "string")
-    return { height: props.editorHeight };
+  if (typeof props.editorHeight === "string") return { height: props.editorHeight };
   else return {};
 });
 
@@ -117,9 +109,17 @@ watch(
 <template>
   <div>
     <editor-tabs v-if="!readOnly" @tabchange="activeTab = $event" :active-tab="activeTab" />
-    <monaco-editor v-if="activeTab === 'edit'" @editorDidMount="onEditorMount" key="edit" class="is-clipped"
-      :class="computeHightInClass" :style="computeHightInStyle" :value="editorContent" @change="onChange"
-      :language="language" :options="{
+    <monaco-editor
+      v-if="activeTab === 'edit'"
+      @editorDidMount="onEditorMount"
+      key="edit"
+      class="is-clipped"
+      :class="computeHightInClass"
+      :style="computeHightInStyle"
+      :value="editorContent"
+      @change="onChange"
+      :language="language"
+      :options="{
         minimap: {
           enabled: calcShowMinimap,
         },
@@ -127,9 +127,19 @@ watch(
         readOnly: readOnly,
         wordWrap: wordWrap,
         scrollBeyondLastLine: false,
-      }" :validation="validation" data-testid="monaco-editor-edit-section" />
-    <monaco-editor v-if="activeTab === 'preview'" key="preview" class="is-clipped" :class="computeHightInClass"
-      :style="computeHightInStyle" :value="editorContent" :language="language" :options="{
+      }"
+      :validation="validation"
+      data-testid="monaco-editor-edit-section"
+    />
+    <monaco-editor
+      v-if="activeTab === 'preview'"
+      key="preview"
+      class="is-clipped"
+      :class="computeHightInClass"
+      :style="computeHightInStyle"
+      :value="editorContent"
+      :language="language"
+      :options="{
         minimap: {
           enabled: calcShowMinimap,
         },
@@ -137,7 +147,11 @@ watch(
         readOnly: true,
         wordWrap: wordWrap,
         scrollBeyondLastLine: false,
-      }" :original="originalEditorContent" :diff-editor="true" :validation="validation"
-      data-testid="monaco-editor-preview-section" />
+      }"
+      :original="originalEditorContent"
+      :diff-editor="true"
+      :validation="validation"
+      data-testid="monaco-editor-preview-section"
+    />
   </div>
 </template>

package/vue-components/v3/editor/FilteredFileEditor.vue

@@ -27,9 +27,7 @@ const props = withDefaults(defineProps<Props>(), {
 const emit = defineEmits(["setActiveKey"]);
 
 const Banner = defineAsyncComponent(() => import("../banner/Banner.vue"));
-const Preloader = defineAsyncComponent(
-  () => import("../preloader/Preloader.vue")
-);
+const Preloader = defineAsyncComponent(() => import("../preloader/Preloader.vue"));
 const Editor = defineAsyncComponent({
   loader: () => import("../editor/Editor.vue"),
   loadingComponent: Preloader,
@@ -37,36 +35,26 @@ const Editor = defineAsyncComponent({
   errorComponent: Banner,
   timeout: 100000,
 });
-const ResourceLoader = defineAsyncComponent(
-  () => import("../loaders/ResourceLoader.vue")
-);
+const ResourceLoader = defineAsyncComponent(() => import("../loaders/ResourceLoader.vue"));
 
-const SidebarLoader = defineAsyncComponent(
-  () => import("../loaders/SidebarLoader.vue")
-);
+const SidebarLoader = defineAsyncComponent(() => import("../loaders/SidebarLoader.vue"));
 
 const activeKey = ref("");
 const hideValue = ref(false);
 
 const filteredYamls = computed(() => {
   if (props.searchText) {
-    return props.previewYamls.filter(
-      (element) => JSON.stringify(element).search(props.searchText) > -1
-    );
+    return props.previewYamls.filter((element) => JSON.stringify(element).search(props.searchText) > -1);
   } else return props.previewYamls;
 });
 
 const activeFile = computed(() => {
-  const activeFile = filteredYamls.value.find(
-    (element) => element.uid === activeKey.value
-  );
+  const activeFile = filteredYamls.value.find((element) => element.uid === activeKey.value);
   return activeFile || { content: "", type: "yaml", isSecret: false };
 });
 
 const originalValue = computed(() => {
-  const activeFile = filteredYamls.value.find(
-    (element) => element.uid === activeKey.value
-  );
+  const activeFile = filteredYamls.value.find((element) => element.uid === activeKey.value);
   return (activeFile && activeFile.initContent) || "";
 });
 
@@ -127,9 +115,12 @@ watch(
   <div class="ac-preview is-not-fixed">
     <div class="ac-preview-inner">
       <!-- preview body start  -->
-      <div class="ac-preview-body mt-0" :class="{
-        'is-justify-content-center': isYamlsEmpty && !isPreviewLoading,
-      }">
+      <div
+        class="ac-preview-body mt-0"
+        :class="{
+          'is-justify-content-center': isYamlsEmpty && !isPreviewLoading,
+        }"
+      >
         <strong v-if="isYamlsEmpty && !isPreviewLoading">
           No Data Available
           <i class="pl-5 fa fa-exclamation-circle" aria-hidden="true"></i>
@@ -138,9 +129,13 @@ watch(
           <div v-if="!isPreviewLoading && previewYamls" class="left-content">
             <div class="ac-files ac-hscrollbar ac-vscrollbar pt-0">
               <ul v-if="!isPreviewLoading">
-                <li v-for="(previewYaml, idx) in filteredYamls" :key="previewYaml.name + idx"
-                  :class="{ 'is-active': activeKey === previewYaml.uid }" :title="previewYaml.name"
-                  data-testid="filtered-file-editor-file-name">
+                <li
+                  v-for="(previewYaml, idx) in filteredYamls"
+                  :key="previewYaml.name + idx"
+                  :class="{ 'is-active': activeKey === previewYaml.uid }"
+                  :title="previewYaml.name"
+                  data-testid="filtered-file-editor-file-name"
+                >
                   <a @click.prevent="setActivePreview(previewYaml.uid)">
                     <span>
                       <img src="~@appscode/design-system-images/icons/file-icon.svg" alt="" />
@@ -156,9 +151,16 @@ watch(
             <resource-loader v-if="isPreviewLoading" />
             <strong v-else-if="isYamlsNotSelected">Selecet a data from sidebar</strong>
             <strong v-else-if="hideValue"> *************** </strong>
-            <editor v-else v-model="activeFile.content" :original-value="originalValue" :language="activeFile.type"
-              :read-only="isEditorReadOnly" :editor-height="editorHeight" :show-minimap="showMinimap"
-              :word-wrap="wordWrap" />
+            <editor
+              v-else
+              v-model="activeFile.content"
+              :original-value="originalValue"
+              :language="activeFile.type"
+              :read-only="isEditorReadOnly"
+              :editor-height="editorHeight"
+              :show-minimap="showMinimap"
+              :word-wrap="wordWrap"
+            />
           </div>
         </template>
       </div>

package/vue-components/v3/editor/MonacoEditor.vue

@@ -31,12 +31,8 @@ export default defineComponent({
   setup(props) {
     const { width, height } = toRefs(props);
     const style = computed(() => {
-      const fixedWidth = width.value.toString().includes("%")
-        ? width.value
-        : `${width.value}px`;
-      const fixedHeight = height.value.toString().includes("%")
-        ? height.value
-        : `${height.value}px`;
+      const fixedWidth = width.value.toString().includes("%") ? width.value : `${width.value}px`;
+      const fixedHeight = height.value.toString().includes("%") ? height.value : `${height.value}px`;
       return {
         width: fixedWidth,
         height: fixedHeight,
@@ -62,10 +58,9 @@ export default defineComponent({
     monaco.editor.getModel(this.modelId)?.dispose();
     // remove the schema
     if (this.$monacoValidationOptions) {
-      this.$monacoValidationOptions.schemas =
-        this.$monacoValidationOptions.schemas.filter(
-          (schema) => !schema.fileMatch.includes(this.modelId)
-        );
+      this.$monacoValidationOptions.schemas = this.$monacoValidationOptions.schemas.filter(
+        (schema) => !schema.fileMatch.includes(this.modelId)
+      );
     }
     // dispose editor
     this.editor && this.editor.dispose();
@@ -79,11 +74,7 @@ export default defineComponent({
       const { value, language, theme, options, original, validation } = this;
 
       if (!this.diffEditor) {
-        const modifiedModel = monaco.editor.createModel(
-          value,
-          language,
-          monaco.Uri.parse(this.modelId)
-        );
+        const modifiedModel = monaco.editor.createModel(value, language, monaco.Uri.parse(this.modelId));
 
         if (validation.uri) {
           if (validation.schema?.type) {
@@ -231,8 +222,7 @@ export default defineComponent({
         const { original, modified } = this.editor.getModel();
         monaco.editor.setModelLanguage(original, this.language);
         monaco.editor.setModelLanguage(modified, this.language);
-      } else
-        monaco.editor.setModelLanguage(this.editor.getModel(), this.language);
+      } else monaco.editor.setModelLanguage(this.editor.getModel(), this.language);
     },
     theme() {
       monaco.editor.setTheme(this.theme);

package/vue-components/v3/editor/ResourceKeyValueEditor.vue

@@ -35,24 +35,16 @@ const props = withDefaults(defineProps<Props>(), {
 const emit = defineEmits(["activeKey"]);
 
 const AcButton = defineAsyncComponent(() => import("../button/Button.vue"));
-const ContentTable = defineAsyncComponent(
-  () => import("../content/ContentTable.vue")
-);
-const HeaderItem = defineAsyncComponent(
-  () => import("../header/HeaderItem.vue")
-);
+const ContentTable = defineAsyncComponent(() => import("../content/ContentTable.vue"));
+const HeaderItem = defineAsyncComponent(() => import("../header/HeaderItem.vue"));
 
-const FilteredFileEditor = defineAsyncComponent(
-  () => import("../editor/FilteredFileEditor.vue")
-);
+const FilteredFileEditor = defineAsyncComponent(() => import("../editor/FilteredFileEditor.vue"));
 
 const activeKey = ref("");
 const toggleHideValue = ref(false);
 
 const activeFile = computed(() => {
-  const activeFile = props.previewYamls.find(
-    (element) => element.uid === activeKey.value
-  );
+  const activeFile = props.previewYamls.find((element) => element.uid === activeKey.value);
   return activeFile || { content: "", type: "yaml", isSecret: false };
 });
 
@@ -71,11 +63,7 @@ watch(
 </script>
 
 <template>
-  <content-table
-    :table-title="title"
-    :searchable="isSearchable"
-    :hide-header="hideHeader"
-  >
+  <content-table :table-title="title" :searchable="isSearchable" :hide-header="hideHeader">
     <template #content-right-controls>
       <header-item v-if="showHideBtn">
         <ac-button

package/vue-components/v3/footer/Status.vue

@@ -2,15 +2,9 @@
 import { ref, defineAsyncComponent } from "vue";
 const FooterItems = defineAsyncComponent(() => import("./FooterItems.vue"));
 const FooterItem = defineAsyncComponent(() => import("./FooterItem.vue"));
-const HeroiconsCheckBadge = defineAsyncComponent(
-  () => import("~icons/heroicons/check-badge")
-);
-const HeroiconsCrossBadge = defineAsyncComponent(
-  () => import("~icons/heroicons/x-circle")
-);
-const HeroiconsLoadingBadge = defineAsyncComponent(
-  () => import("~icons/heroicons/arrow-path")
-);
+const HeroiconsCheckBadge = defineAsyncComponent(() => import("~icons/heroicons/check-badge"));
+const HeroiconsCrossBadge = defineAsyncComponent(() => import("~icons/heroicons/x-circle"));
+const HeroiconsLoadingBadge = defineAsyncComponent(() => import("~icons/heroicons/arrow-path"));
 interface Props {
   statusInfo?: Array<Record<string, string>>;
 }
@@ -22,17 +16,10 @@ withDefaults(defineProps<Props>(), {
 
 <template>
   <footer-items>
-    <footer-item
-      v-for="(item, idx) in statusInfo"
-      :key="idx + item.label"
-      :modifier-classes="item.color"
-    >
+    <footer-item v-for="(item, idx) in statusInfo" :key="idx + item.label" :modifier-classes="item.color">
       <span class="icon">
         <HeroiconsCheckBadge v-if="item.color === `has-text-success`" />
-        <i
-          v-else-if="item.color === `has-text-warning`"
-          class="fa fa-refresh fa-spin fa-fw"
-        ></i>
+        <i v-else-if="item.color === `has-text-warning`" class="fa fa-refresh fa-spin fa-fw"></i>
         <HeroiconsCrossBadge v-else />
       </span>
       <span>{{ item.label }}</span>

package/vue-components/v3/footer/Usage.vue

@@ -22,11 +22,7 @@ withDefaults(defineProps<Props>(), {
   <footer-items>
     <footer-item v-for="(info, idx) in usages" :key="idx">
       <span class="icon"><img :src="info.icon" /></span
-      ><span
-        >{{ info.useData?.limit || "N" }}/{{
-          info.useData?.request || "A"
-        }}</span
-      >
+      ><span>{{ info.useData?.limit || "N" }}/{{ info.useData?.request || "A" }}</span>
     </footer-item>
   </footer-items>
 </template>

package/vue-components/v3/form/Form.vue

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

package/vue-components/v3/form-fields/FileUpload.vue

@@ -1,10 +1,6 @@
 <template>
   <div class="file-upload" data-testid="image-upload-drag-section">
-    <label
-      for="image-upload-with-cropping"
-      class="has-text-centered"
-      title="Click to upload new avatar"
-    >
+    <label for="image-upload-with-cropping" class="has-text-centered" title="Click to upload new avatar">
       <div class="ms-upload-logo" title="Click to upload new avatar">
         <div class="upload-icon">
           <svg
@@ -24,12 +20,8 @@
         </div>
       </div>
       <div class="ms-upload-description">
-        <p class="drag-and-drop-msg">
-          Drag &amp; Drop here <strong>or</strong> Choose image From Storage
-        </p>
-        <p class="img-size-msg">
-          Size should not a exceed 1MB &amp; Dimension prefarable 4096 X 3072
-        </p>
+        <p class="drag-and-drop-msg">Drag &amp; Drop here <strong>or</strong> Choose image From Storage</p>
+        <p class="img-size-msg">Size should not a exceed 1MB &amp; Dimension prefarable 4096 X 3072</p>
       </div>
     </label>
     <input

package/vue-components/v3/form-fields/FileUploadSmall.vue

@@ -8,9 +8,7 @@ withDefaults(defineProps<Props>(), {
   modelValue: "",
 });
 
-const HeroiconsArrowUpTray20Solid = defineAsyncComponent(
-  () => import("~icons/heroicons/arrow-up-tray-20-solid")
-);
+const HeroiconsArrowUpTray20Solid = defineAsyncComponent(() => import("~icons/heroicons/arrow-up-tray-20-solid"));
 </script>
 <template>
   <div class="file has-name ac-file">

package/vue-components/v3/form-fields/Searchbar.vue

@@ -19,31 +19,15 @@
         </svg>
       </span>
     </label>
-    <input
-      id="search"
-      type="text"
-      placeholder="Search what you are looking for"
-      class="pl-48"
-    />
+    <input id="search" type="text" placeholder="Search what you are looking for" class="pl-48" />
 
     <!-- use .is-absolute  -->
     <div id="meilisearch-hideid" class="search-result-box panel is-fullwidth">
-      <div
-        class="search-content"
-        id="meilisearch-hits"
-        style="max-height: 350px; overflow-y: auto"
-      >
-        <a
-          class="panel-block is-flex-direction-column is-align-items-flex-start px-5 py-4"
-          v-for="i in 6"
-          :key="i"
-        >
-          <h2 class="is-size-5 has-text-primary">
-            Changelog | <em>Kube</em>DB
-          </h2>
+      <div class="search-content" id="meilisearch-hits" style="max-height: 350px; overflow-y: auto">
+        <a class="panel-block is-flex-direction-column is-align-items-flex-start px-5 py-4" v-for="i in 6" :key="i">
+          <h2 class="is-size-5 has-text-primary">Changelog | <em>Kube</em>DB</h2>
           <p class="is-ellipsis-2">
-            <em>Kube</em>DB v2020.07.10-beta.1 (2020-07-10) kubedb/apimachinery
-            v0.14.0-beta.1 157a8724 Update for…
+            <em>Kube</em>DB v2020.07.10-beta.1 (2020-07-10) kubedb/apimachinery v0.14.0-beta.1 157a8724 Update for…
           </p>
         </a>
       </div>

package/vue-components/v3/header/Header.vue

@@ -19,10 +19,7 @@ withDefaults(defineProps<Props>(), {
 
 <template>
   <div class="inner-header" :style="{ top: topValue }">
-    <div
-      class="is-flex is-justify-content-space-between"
-      :class="{ container: isContainer }"
-    >
+    <div class="is-flex is-justify-content-space-between" :class="{ container: isContainer }">
       <header-items>
         <header-item>
           <transition name="fade" mode="out-in" appear>

package/vue-components/v3/loaders/ClusterSwitcherLoader.vue

@@ -2,12 +2,7 @@
 import { ContentLoader } from "vue-content-loader";
 </script>
 <template>
-  <content-loader
-    viewBox="0 0 300 30"
-    :speed="2"
-    primaryColor="#ffffff"
-    secondaryColor="#ebebf9"
-  >
+  <content-loader viewBox="0 0 300 30" :speed="2" primaryColor="#ffffff" secondaryColor="#ebebf9">
     <rect x="0" y="0" rx="5" ry="5" width="300" height="30" />
   </content-loader>
 </template>

package/vue-components/v3/loaders/InfoCardLoader.vue

@@ -3,12 +3,7 @@ import { ContentLoader } from "vue-content-loader";
 export default { components: { ContentLoader } };
 </script>
 <template>
-  <content-loader
-    viewBox="0 0 230 115"
-    :speed="2"
-    primaryColor="#f5f5f5"
-    secondaryColor="#ecebeb"
-  >
+  <content-loader viewBox="0 0 230 115" :speed="2" primaryColor="#f5f5f5" secondaryColor="#ecebeb">
     <rect x="0" y="0" rx="0" ry="0" />
     <rect x="0" y="70" rx="3" ry="3" width="120" height="11" />
     <rect x="0" y="100" rx="3" ry="3" width="120" height="11" />

package/vue-components/v3/loaders/SingleInfoCardLoader.vue

@@ -7,12 +7,7 @@ export default {
 </script>
 
 <template>
-  <content-loader
-    viewBox="0 0 1540 90"
-    :speed="2"
-    primaryColor="#f5f5f5"
-    secondaryColor="#ecebeb"
-  >
+  <content-loader viewBox="0 0 1540 90" :speed="2" primaryColor="#f5f5f5" secondaryColor="#ecebeb">
     <rect x="0" y="0" rx="0" ry="0" />
     <circle cx="47" cy="52" r="21" />
     <rect x="86" y="64" rx="0" ry="0" width="95" height="11" />

package/vue-components/v3/messages/Message.vue

@@ -12,10 +12,12 @@ withDefaults(defineProps<Props>(), {
     <div class="thumbnail">
       <slot name="thumbnail" />
     </div>
-    <p>
-      {{ message }}
-    </p>
+    <div class="is-flex is-align-items-center gap-4">
+      <span>
+        {{ message }}
+      </span>
 
-    <slot name="details" />
+      <slot name="details" />
+    </div>
   </div>
 </template>

package/vue-components/v3/modal/Modal.vue

@@ -22,12 +22,8 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits(["closemodal"]);
 
-const HeaderItems = defineAsyncComponent(
-  () => import("./../header/HeaderItems.vue")
-);
-const HeaderItem = defineAsyncComponent(
-  () => import("./../header/HeaderItem.vue")
-);
+const HeaderItems = defineAsyncComponent(() => import("./../header/HeaderItems.vue"));
+const HeaderItem = defineAsyncComponent(() => import("./../header/HeaderItem.vue"));
 const Buttons = defineAsyncComponent(() => import("./../button/Buttons.vue"));
 const AcButton = defineAsyncComponent(() => import("./../button/Button.vue"));
 
@@ -38,10 +34,7 @@ const modalCloseIcon = import.meta.glob("../../../icons/close-icon.svg", {
 
 const modal = ref();
 const showModal = ref(false);
-const crossIcon = ref(
-  (modalCloseIcon["../../../icons/close-icon.svg"] as Record<string, unknown>)
-    ?.default as string
-);
+const crossIcon = ref((modalCloseIcon["../../../icons/close-icon.svg"] as Record<string, unknown>)?.default as string);
 
 const onKeyDown = (e: KeyboardEvent) => {
   if (props.open && e.keyCode === 27) {
@@ -87,11 +80,7 @@ watch(
   <teleport to="#modals">
     <!-- for transition https://github.com/adamwathan/vue-tailwind-examples/blob/master/src/components/Modal.vue -->
     <!-- modal start  -->
-    <div
-      v-if="showModal"
-      class="ac-modal is-middle-alignment"
-      :class="modifierClasses"
-    >
+    <div v-if="showModal" class="ac-modal is-middle-alignment" :class="modifierClasses">
       <div ref="modal" class="ac-modal-inner">
         <!-- modal header start  -->
         <div class="ac-modal-header">
@@ -112,10 +101,7 @@ watch(
         <!-- modal header end -->
 
         <!-- modal body start  -->
-        <div
-          class="ac-modal-body ac-vscrollbar"
-          data-testid="ac-modal-content-with-scroll"
-        >
+        <div class="ac-modal-body ac-vscrollbar" data-testid="ac-modal-content-with-scroll">
           <div class="ac-modal-content">
             <!-- freedom content start  -->
             <slot />

package/vue-components/v3/modals/DeleteConfirmationModal.vue

@@ -37,12 +37,7 @@ const AcButton = defineAsyncComponent(() => import("./../button/Button.vue"));
 <template>
   <!-- modal start  -->
 
-  <modal
-    :title="title"
-    modifier-classes="is-normal"
-    :open="open"
-    @closemodal="closeModal"
-  >
+  <modal :title="title" modifier-classes="is-normal" :open="open" @closemodal="closeModal">
     <!-- freedom content start  -->
     <div class="action-message pt-35 pb-35 has-text-centered">
       <h5 class="is-message">{{ message }} {{ itemName ? "" : "?" }}</h5>