@appscode/design-system 2.0.59 → 2.0.61

package/vue-components/v3/searchbars/SearchBar.vue

@@ -1,9 +1,7 @@
 <script setup lang="ts">
 import { defineAsyncComponent, ref, watch } from "vue";
 
-const AcSingleInput = defineAsyncComponent(
-  () => import("../form-fields/AcSingleInput.vue")
-);
+const AcSingleInput = defineAsyncComponent(() => import("../form-fields/AcSingleInput.vue"));
 
 const AcInput = defineAsyncComponent(() => import("../form-fields/Input.vue"));
 
@@ -28,12 +26,7 @@ watch(searchText, (n) => {
   <ac-single-input modifier-classes="is-extra-small width-auto">
     <template #button>
       <label class="ac-search-button" :for="acInputId">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 20 20"
-          fill="currentColor"
-          class="w-5 h-5"
-        >
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
           <path
             fill-rule="evenodd"
             d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
@@ -42,14 +35,7 @@ watch(searchText, (n) => {
         </svg>
       </label>
     </template>
-    <ac-input
-      name="search"
-      placeholder="Search"
-      type="search"
-      class="ac-search"
-      :id="acInputId"
-      v-model="searchText"
-    />
+    <ac-input name="search" placeholder="Search" type="search" class="ac-search" :id="acInputId" v-model="searchText" />
   </ac-single-input>
 </template>
 

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

@@ -59,10 +59,7 @@ watch(
     const { hue, saturation, lightness } = n || {};
     nextTick(() => {
       document.documentElement.style.setProperty("--hsl-hue", hue);
-      document.documentElement.style.setProperty(
-        "--hsl-saturation",
-        saturation
-      );
+      document.documentElement.style.setProperty("--hsl-saturation", saturation);
       document.documentElement.style.setProperty("--hsl-lightness", lightness);
     });
   },
@@ -75,14 +72,8 @@ watch(
     const { hue, saturation, lightness } = n || {};
     nextTick(() => {
       document.documentElement.style.setProperty("--font-hsl-hue", hue);
-      document.documentElement.style.setProperty(
-        "--font-hsl-saturation",
-        saturation
-      );
-      document.documentElement.style.setProperty(
-        "--font-hsl-lightness",
-        lightness
-      );
+      document.documentElement.style.setProperty("--font-hsl-saturation", saturation);
+      document.documentElement.style.setProperty("--font-hsl-lightness", lightness);
     });
   },
   { deep: true }

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] }}