@appscode/design-system 2.0.59 → 2.0.61

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

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

@@ -39,9 +39,7 @@ const collapsibleRow = ref(null as HTMLElement | null);
 
 const TableCell = defineAsyncComponent(() => import("./TableCell.vue"));
 const FakeTableCell = defineAsyncComponent(() => import("./FakeTableCell.vue"));
-const CollapsibleButton = defineAsyncComponent(
-  () => import("../button/Button.vue")
-);
+const CollapsibleButton = defineAsyncComponent(() => import("../button/Button.vue"));
 
 const isCollapsed = ref(true);
 const collapsibleRowMaxHeight = ref("0vh");
@@ -81,19 +79,8 @@ const toggleCollapse = () => {
 </script>
 
 <template>
-  <router-link
-    v-if="link"
-    v-slot="{ navigate }"
-    event="click"
-    :to="link"
-    custom
-  >
-    <tr
-      class="is-link"
-      v-bind="$attrs"
-      data-testid="ac-table-row"
-      @click="navigate"
-    >
+  <router-link v-if="link" v-slot="{ navigate }" event="click" :to="link" custom>
+    <tr class="is-link" v-bind="$attrs" data-testid="ac-table-row" @click="navigate">
       <table-cell v-if="collapsible">
         <collapsible-button
           modifier-classes="is-square is-light height-20 width-20 is-rounded is-size-7 p-0"
@@ -102,10 +89,7 @@ const toggleCollapse = () => {
         />
       </table-cell>
       <slot />
-      <fake-table-cell
-        v-if="fakeCellWidth > 0"
-        :fake-cell-width="fakeCellWidth"
-      />
+      <fake-table-cell v-if="fakeCellWidth > 0" :fake-cell-width="fakeCellWidth" />
     </tr>
   </router-link>
   <tr
@@ -127,10 +111,7 @@ const toggleCollapse = () => {
       />
     </table-cell>
     <slot />
-    <fake-table-cell
-      v-if="fakeCellWidth > 0"
-      :fake-cell-width="fakeCellWidth"
-    />
+    <fake-table-cell v-if="fakeCellWidth > 0" :fake-cell-width="fakeCellWidth" />
   </tr>
   <transition name="slide-down" mode="out-in" appear>
     <tr v-if="collapsible && !isCollapsed" v-bind="$attrs">

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

@@ -15,15 +15,9 @@ const props = withDefaults(defineProps<Props>(), {
 
 const Tags = defineAsyncComponent(() => import("../../tag/Tags.vue"));
 const Tag = defineAsyncComponent(() => import("../../tag/Tag.vue"));
-const EllipsisIcon = defineAsyncComponent(
-  () => import("../../icons/Ellipsis.vue")
-);
-const JsonShowModal = defineAsyncComponent(
-  () => import("../../modals/JsonShowModal.vue")
-);
-const ValueWithModal = defineAsyncComponent(
-  () => import("../../table/table-cell/ValueWithModal.vue")
-);
+const EllipsisIcon = defineAsyncComponent(() => import("../../icons/Ellipsis.vue"));
+const JsonShowModal = defineAsyncComponent(() => import("../../modals/JsonShowModal.vue"));
+const ValueWithModal = defineAsyncComponent(() => import("../../table/table-cell/ValueWithModal.vue"));
 
 const showFullData = ref(false);
 
@@ -34,16 +28,11 @@ const printableStringObjs = computed(() => {
     let print: string | Record<string, unknown> = item;
     if (typeof item === "object") {
       exceededLength = true;
-      print =
-        (item["Name"] as string) ||
-        (item["name"] as string) ||
-        (item[Object.keys(item)[0]] as string);
+      print = (item["Name"] as string) || (item["name"] as string) || (item[Object.keys(item)[0]] as string);
     } 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 };
   });
@@ -69,10 +58,7 @@ const indexOfCharacterLengthExceed = computed(() => {
   <span>
     <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}`"
         modifierClasses="is-primary is-light"
       >

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

@@ -19,12 +19,8 @@ const props = withDefaults(defineProps<Props>(), {
 const ContentLoader = defineAsyncComponent(() =>
   import("vue-content-loader").then(({ ContentLoader }) => ContentLoader)
 );
-const ObjectCell = defineAsyncComponent(
-  () => import("../../table/table-cell/ObjectCell.vue")
-);
-const ArrayCell = defineAsyncComponent(
-  () => import("../../table/table-cell/ArrayCell.vue")
-);
+const ObjectCell = defineAsyncComponent(() => import("../../table/table-cell/ObjectCell.vue"));
+const ArrayCell = defineAsyncComponent(() => import("../../table/table-cell/ArrayCell.vue"));
 
 const loaderLightThemePrimaryColor = "#f5f7f9";
 const loaderDarkThemePrimaryColor = "#2e323c";
@@ -93,9 +89,7 @@ const secondaryColor = computed(() => {
       data-testid="array-cell-value"
     />
     <template v-else>
-      <span :title="tooltip" data-testid="cell-value">{{
-        value || (value === 0 ? 0 : "-")
-      }}</span>
+      <span :title="tooltip" data-testid="cell-value">{{ value || (value === 0 ? 0 : "-") }}</span>
     </template>
   </div>
 </template>

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

@@ -19,14 +19,11 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const Tag = defineAsyncComponent(() => import("../../tag/Tag.vue"));
-const CellValue = defineAsyncComponent(
-  () => import("../../table/table-cell/CellValue.vue")
-);
+const CellValue = defineAsyncComponent(() => import("../../table/table-cell/CellValue.vue"));
 
 const route = useRoute();
 function getCellLink(cell: AcTableCell) {
-  const inject = (str: string, obj: Record<string, string>) =>
-    str.replace(/\${(.*?)}/g, (x, g) => obj[g]);
+  const inject = (str: string, obj: Record<string, string>) => str.replace(/\${(.*?)}/g, (x, g) => obj[g]);
   const { user, cluster } = route.params;
   const link = inject(cell.link || "", {
     username: user as string,

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

@@ -15,15 +15,9 @@ const props = withDefaults(defineProps<Props>(), {
 
 const Tags = defineAsyncComponent(() => import("../../tag/Tags.vue"));
 const Tag = defineAsyncComponent(() => import("../../tag/Tag.vue"));
-const EllipsisIcon = defineAsyncComponent(
-  () => import("../../icons/Ellipsis.vue")
-);
-const JsonShowModal = defineAsyncComponent(
-  () => import("../../modals/JsonShowModal.vue")
-);
-const ValueWithModal = defineAsyncComponent(
-  () => import("../../table/table-cell/ValueWithModal.vue")
-);
+const EllipsisIcon = defineAsyncComponent(() => import("../../icons/Ellipsis.vue"));
+const JsonShowModal = defineAsyncComponent(() => import("../../modals/JsonShowModal.vue"));
+const ValueWithModal = defineAsyncComponent(() => import("../../table/table-cell/ValueWithModal.vue"));
 
 const showFullData = ref(false);
 
@@ -64,10 +58,7 @@ const indexOfCharacterLengthExceed = computed(() => {
   <span>
     <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"
         modifierClasses="is-secondary is-light"
       >
@@ -80,10 +71,7 @@ const indexOfCharacterLengthExceed = computed(() => {
         <template v-else> {{ printableStringOb.print }} </template>
       </tag>
 
-      <tag
-        modifierClasses="is-secondary is-light"
-        v-if="indexOfCharacterLengthExceed !== printableStringObjs.length"
-      >
+      <tag modifierClasses="is-secondary is-light" v-if="indexOfCharacterLengthExceed !== printableStringObjs.length">
         <a @click.prevent.stop="showFullData = true">
           <ellipsis-icon />
           <json-show-modal

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

@@ -13,9 +13,7 @@ withDefaults(defineProps<Props>(), {
   print: "",
 });
 
-const JsonShowModal = defineAsyncComponent(
-  () => import("../../modals/JsonShowModal.vue")
-);
+const JsonShowModal = defineAsyncComponent(() => import("../../modals/JsonShowModal.vue"));
 
 const showModal = ref(false);
 </script>
@@ -24,11 +22,6 @@ const showModal = ref(false);
   <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/styles/components/_ac-tags.scss

@@ -1,116 +0,0 @@
-// .tag:not(body) {
-//   background-color: $color-border;
-//   font-size: 10px;
-//   height: 18px;
-//   font-weight: 500;
-//   line-height: 1;
-//   letter-spacing: 0px;
-//   color: $color-heading;
-//   &.is-outlined {
-//     border: 1px solid;
-//     background-color: transparent;
-//   }
-
-//   a {
-//     &:hover {
-//       color: $color-heading;
-//     }
-//   }
-
-//   &.is-available {
-//     background-color: #27b064;
-//     color: $white-100;
-//   }
-
-//   &.is-success {
-//     background-color: $success;
-//     color: $white-100;
-
-//     &.is-light {
-//       background-color: rgba(39, 176, 100, 0.2);
-//       color: $success;
-//     }
-//   }
-
-//   &.is-primary {
-//     background-color: $ac-primary;
-//     color: $white-100;
-
-//     &.is-light {
-//       background-color: rgba(25, 113, 189, 0.2);
-//       color: $ac-primary;
-//     }
-//   }
-
-//   &.is-gray {
-//     background-color: #e5e9f2;
-//     color: $black-40;
-//   }
-
-//   &.is-warning {
-//     background-color: $warning;
-//     color: $white-100;
-
-//     &.is-light {
-//       background-color: #ffd58b42;
-//       color: #c88b21;
-//     }
-//   }
-
-//   &.is-danger {
-//     background-color: $danger;
-//     color: $white-100 !important;
-
-//     &.is-light {
-//       background-color: rgba(234, 61, 47, 0.2);
-//       color: $danger !important;
-//     }
-//   }
-// }
-
-// .tags {
-//   .icon {
-//     margin-bottom: 0.5rem;
-//   }
-
-//   .tag {
-//     a {
-//       font-weight: 500;
-//     }
-//   }
-// }
-
-// .has-tags {
-//   display: flex;
-//   align-items: center;
-
-//   li {
-//     background-color: $black-80;
-//     list-style: none;
-//     padding: 2px 10px;
-//     border-radius: 4px;
-//     font-size: 12px;
-//     line-height: 1;
-//     border: 1px solid $primary-20;
-//     margin-right: 5px;
-
-//     &:last-child {
-//       margin-right: 0;
-//     }
-
-//     &.is-warning {
-//       @include ac-tags($warning);
-//     }
-
-//     &.is-primary {
-//       @include ac-tags($primary);
-//     }
-
-//     &.is-danger {
-//       @include ac-tags($danger);
-//     }
-//     &.is-dark {
-//       @include ac-tags($black-30);
-//     }
-//   }
-// }

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

@@ -1,3 +0,0 @@
-<template>
-  <h1>Badge</h1>
-</template>