@appscode/design-system 2.0.59 → 2.0.60

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>