@appscode/design-system 1.1.0 → 2.0.0

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

@@ -1,9 +1,78 @@
+<script setup lang="ts">
+import { computed, defineAsyncComponent, ref } from "vue";
+import { useElementSize } from "@vueuse/core";
+
+interface Props {
+  isLoaderActive?: boolean;
+  cellTitle?: string;
+  value?: unknown;
+  tooltip?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isLoaderActive: false,
+  cellTitle: "cell title",
+  tooltip: "",
+  value: () => ({}),
+});
+
+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 loaderLightThemePrimaryColor = "#f5f7f9";
+const loaderDarkThemePrimaryColor = "#2e323c";
+const loaderLightThemeSecondaryColor = "#ecebeb";
+const loaderDarkThemeSecondaryColor = "#21272e";
+
+const cellLoaderDiv = ref<HTMLElement | null>(null);
+const cellDiv = ref<HTMLElement | null>(null);
+
+const valueType = computed(() => {
+  if (typeof props.value === "object") {
+    if (props.value === null) return "null";
+    else if (Array.isArray(props.value)) return "array";
+    else return "object";
+  } else return typeof props.value;
+});
+
+const { width: cellLoaderDivWidth } = useElementSize(cellLoaderDiv, {
+  width: 150,
+  height: 30,
+});
+const { width: cellDivWidth } = useElementSize(cellDiv, {
+  width: 150,
+  height: 30,
+});
+const maxCharacterLength = computed(() => {
+  return Math.ceil(cellDivWidth.value / 6);
+});
+
+const primaryColor = computed(() => {
+  return document.documentElement.classList.contains("is-dark-theme")
+    ? loaderDarkThemePrimaryColor
+    : loaderLightThemePrimaryColor;
+});
+
+const secondaryColor = computed(() => {
+  return document.documentElement.classList.contains("is-dark-theme")
+    ? loaderDarkThemeSecondaryColor
+    : loaderLightThemeSecondaryColor;
+});
+</script>
+
 <template>
   <div v-if="isLoaderActive" ref="cellLoaderDiv" :style="{ maxWidth: '300px' }">
     <content-loader
-      :view-box="`0 0 ${computedCellWidth || 300} 10`"
+      :view-box="`0 0 ${cellLoaderDivWidth || 300} 10`"
       :speed="2"
-      :key="computedCellWidth"
+      :key="cellLoaderDivWidth"
       :primaryColor="primaryColor"
       :secondaryColor="secondaryColor"
     />
@@ -11,123 +80,22 @@
   <div v-else ref="cellDiv">
     <object-cell
       v-if="valueType === 'object'"
-      :obj="value"
+      :obj="value as Record<string, unknown>"
       :cell-title="cellTitle"
       :max-character-length="maxCharacterLength"
       data-testid="object-cell-value"
     />
     <array-cell
       v-else-if="valueType === 'array'"
-      :items="value"
+      :items="value as Array<unknown>"
       :cell-title="cellTitle"
       :max-character-length="maxCharacterLength"
       data-testid="array-cell-value"
     />
     <template v-else>
-      <span class="is-ellipsis-1" :title="tooltip" data-testid="cell-value">{{
+      <span :title="tooltip" data-testid="cell-value">{{
         value || (value === 0 ? 0 : "-")
       }}</span>
     </template>
   </div>
 </template>
-
-<script>
-import { defineComponent, defineAsyncComponent } from "vue";
-import {
-  loaderLightThemePrimaryColor,
-  loaderDarkThemePrimaryColor,
-  loaderLightThemeSecondaryColor,
-  loaderDarkThemeSecondaryColor,
-} from "@appscode/design-system/plugins/theme";
-
-export default defineComponent({
-  props: {
-    isLoaderActive: {
-      type: Boolean,
-      default: false,
-    },
-    cellTitle: {
-      type: String,
-      default: "Cell",
-    },
-    value: {
-      type: null,
-      default: "",
-    },
-    tooltip: {
-      type: String,
-      defualt: "",
-    },
-  },
-  components: {
-    ContentLoader: defineAsyncComponent(() =>
-      import("vue-content-loader").then(({ ContentLoader }) => ContentLoader)
-    ),
-    ObjectCell: defineAsyncComponent(() =>
-      import("./ObjectCell.vue").then((module) => module.default)
-    ),
-    ArrayCell: defineAsyncComponent(() =>
-      import("./ArrayCell.vue").then((module) => module.default)
-    ),
-  },
-
-  computed: {
-    valueType() {
-      if (typeof this.value === "object") {
-        if (this.value === null) return "null";
-        else if (Array.isArray(this.value)) return "array";
-        else return "object";
-      } else return typeof this.value;
-    },
-    maxCharacterLength() {
-      return Math.ceil(this.computedCellWidth / 8);
-    },
-    primaryColor() {
-      return document.documentElement.classList.contains("is-dark-theme")
-        ? loaderDarkThemePrimaryColor
-        : loaderLightThemePrimaryColor;
-    },
-    secondaryColor() {
-      return document.documentElement.classList.contains("is-dark-theme")
-        ? loaderDarkThemeSecondaryColor
-        : loaderLightThemeSecondaryColor;
-    },
-  },
-
-  data() {
-    return {
-      computedCellWidth: null,
-    };
-  },
-
-  mounted() {
-    this.calcCellWidth();
-  },
-
-  watch: {
-    isLoaderActive() {
-      this.calcCellWidth();
-    },
-  },
-
-  methods: {
-    calcCellWidth() {
-      if (this.isLoaderActive) {
-        this.$nextTick(() => {
-          const cellLoaderDiv = this.$refs.cellLoaderDiv;
-          if (cellLoaderDiv) {
-            this.computedCellWidth = cellLoaderDiv.offsetWidth;
-          }
-        });
-      } else {
-        this.$nextTick(() => {
-          const cellDiv = this.$refs.cellDiv;
-          if (cellDiv) {
-            this.computedCellWidth = cellDiv.offsetWidth;
-          }
-        });
-      }
-    },
-  },
-});
-</script>

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

@@ -1,3 +1,45 @@
+<script setup lang="ts">
+import type { AcTableCell, AcTableCol } from "../../../types/table";
+import { defineAsyncComponent } from "vue";
+import { useRoute } from "vue-router";
+
+interface Props {
+  cellDescriptor?: AcTableCol;
+  cellValue?: AcTableCell;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  cellValue: () => ({ data: "-" }),
+  cellDescriptor: () => ({
+    name: "-",
+    type: "string",
+    priority: 3,
+    pathTemplate: "-",
+  }),
+});
+
+const Tag = defineAsyncComponent(() => import("../../tag/Tag.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 { user, cluster } = route.params;
+  const link = inject(cell.link || "", {
+    username: user as string,
+    clustername: cluster as string,
+  });
+  return link;
+}
+function redirectTo() {
+  const link = getCellLink(props.cellValue);
+  window.open(link, "_blank");
+}
+</script>
+
 <template>
   <span
     :class="{
@@ -27,49 +69,8 @@
     <cell-value
       v-else
       :cell-title="cellDescriptor.name"
-      :value="cellValue.data || '-'"
+      :value="cellValue.data as {} || '-'"
       :tooltip="cellValue.tooltip || JSON.stringify(cellValue.data)"
     />
   </span>
 </template>
-
-<script>
-import { defineAsyncComponent, defineComponent } from "vue";
-import { useRoute } from "vue-router";
-
-export default defineComponent({
-  components: {
-    Tag: defineAsyncComponent(() => import("../../tag/Tag.vue")),
-    CellValue: defineAsyncComponent(() =>
-      import("../table-cell/CellValue.vue")
-    ),
-  },
-  props: {
-    cellDescriptor: {
-      type: Object,
-      default: () => ({}),
-    },
-    cellValue: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  setup() {
-    const route = useRoute();
-    function getCellLink(cell) {
-      const inject = (str, obj) => str.replace(/\${(.*?)}/g, (x, g) => obj[g]);
-      const { user, cluster } = route.params;
-      const link = inject(cell.link || "", {
-        username: user,
-        clustername: cluster,
-      });
-      return link;
-    }
-    function redirectTo() {
-      const link = getCellLink(this.cellValue);
-      window.open(link, "_blank");
-    }
-    return { getCellLink, redirectTo };
-  },
-});
-</script>

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

@@ -1,110 +1,100 @@
-<template>
-  <tags v-if="printableStringObjs.length">
-    <tag
-      v-for="printableStringOb in printableStringObjs.slice(
-        0,
-        indexOfCharacterLengthExceed
-      )"
-      :key="printableStringOb.key"
-      modifierClasses="is-info is-light"
-    >
-      <value-with-modal
-        v-if="printableStringOb.exceededLength"
-        :title="printableStringOb.key"
-        :value="printableStringOb.value"
-        :print="printableStringOb.print"
-      />
-      <template v-else> {{ printableStringOb.print }} </template>
-    </tag>
+<script setup lang="ts">
+import { defineAsyncComponent, ref, computed } from "vue";
 
-    <tag modifierClasses="is-info is-light" v-if="indexOfCharacterLengthExceed !== printableStringObjs.length">
-      <a @click.prevent.stop="showFullData = true">
-        <ellipsis-icon />
-        <json-show-modal
-          :open="showFullData"
-          @closemodal="showFullData = false"
-          :editor-title="cellTitle"
-          :editor-content="obj"
-        />
-      </a>
-    </tag>
-  </tags>
-  <p v-else>-</p>
-</template>
+interface Props {
+  cellTitle?: string;
+  obj?: Record<string, unknown>;
+  maxCharacterLength?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  cellTitle: "cell title",
+  maxCharacterLength: 64,
+  obj: () => ({}),
+});
+
+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")
+);
 
-<script>
-import { defineComponent, defineAsyncComponent } from "vue";
+const showFullData = ref(false);
 
-export default defineComponent({
-  props: {
-    cellTitle: {
-      type: String,
-      default: "Object",
-    },
-    obj: {
-      type: Object,
-      default: () => ({}),
-    },
-    maxCharacterLength: {
-      type: Number,
-      default: undefined,
-    },
-  },
-  components: {
-    Tags: defineAsyncComponent(() =>
-      import("../../../v2/tag/Tags.vue").then((module) => module.default)
-    ),
-    Tag: defineAsyncComponent(() =>
-      import("../../tag/Tag.vue").then((module) => module.default)
-    ),
-    EllipsisIcon: defineAsyncComponent(() =>
-      import("../../../v2/icons/Ellipsis.vue").then((module) => module.default)
-    ),
-    JsonShowModal: defineAsyncComponent(() =>
-      import("../../modals/JsonShowModal.vue").then((module) => module.default)
-    ),
-    ValueWithModal: defineAsyncComponent(() =>
-      import("./ValueWithModal.vue").then((module) => module.default)
-    ),
-  },
+const objKeys = computed(() => {
+  return Object.keys(props.obj) || [];
+});
 
-  data() {
-    return {
-      showFullData: false,
-    };
-  },
+const printableStringObjs = computed(() => {
+  return objKeys.value.map((key) => {
+    let value: string = props.obj[key] as string;
+    if (typeof value === "object" && value !== null) {
+      value = JSON.stringify(value);
+    }
+    const keyValue = `${key}: ${value}`;
+    const exceededLength = keyValue.length > 30;
+    const print = exceededLength ? key : keyValue;
+    return { key, value, keyValue, exceededLength, print };
+  });
+});
 
-  computed: {
-    objKeys() {
-      return Object.keys(this.obj) || [];
-    },
-    printableStringObjs() {
-      return this.objKeys.map((key) => {
-        let value = this.obj[key];
-        if (typeof value === "object" && value !== null) {
-          value = JSON.stringify(value);
-        }
-        const keyValue = `${key}: ${value}`;
-        const exceededLength = keyValue.length > 30;
-        const print = exceededLength ? key : keyValue;
-        return { key, value, keyValue, exceededLength, print };
-      });
-    },
-    indexOfCharacterLengthExceed() {
-      let idx = -1;
-      let cumulativeLen = 0;
-      for (const [index, po] of this.printableStringObjs.entries()) {
-        const newLen = cumulativeLen + po.print.length;
-        if (newLen > this.maxCharacterLength) {
-          idx = index;
-          break;
-        }
-        cumulativeLen = newLen;
-      }
+const indexOfCharacterLengthExceed = computed(() => {
+  let idx = -1;
+  let cumulativeLen = 2;
+  for (const [index, po] of printableStringObjs.value.entries()) {
+    const newLen = cumulativeLen + po.print.length + 2;
+    if (newLen + 4 > props.maxCharacterLength) {
+      idx = index;
+      break;
+    }
+    cumulativeLen = newLen;
+  }
 
-      return idx === -1 ? this.printableStringObjs.length : idx;
-    },
-  },
+  return idx === -1 ? printableStringObjs.value.length : idx;
 });
 </script>
 
+<template>
+  <span>
+    <tags v-if="printableStringObjs.length">
+      <tag
+        v-for="printableStringOb in printableStringObjs.slice(
+          0,
+          indexOfCharacterLengthExceed
+        )"
+        :key="printableStringOb.key"
+        modifierClasses="is-primary is-light"
+      >
+        <value-with-modal
+          v-if="printableStringOb.exceededLength"
+          :title="printableStringOb.key"
+          :value="printableStringOb.value"
+          :print="printableStringOb.print"
+        />
+        <template v-else> {{ printableStringOb.print }} </template>
+      </tag>
+
+      <tag
+        modifierClasses="is-info is-light"
+        v-if="indexOfCharacterLengthExceed !== printableStringObjs.length"
+      >
+        <a @click.prevent.stop="showFullData = true">
+          <ellipsis-icon />
+          <json-show-modal
+            :open="showFullData"
+            @closemodal="showFullData = false"
+            :editor-title="cellTitle"
+            :editor-content="obj"
+          />
+        </a>
+      </tag>
+    </tags>
+    <p v-else>-</p>
+  </span>
+</template>

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

@@ -1,3 +1,25 @@
+<script setup lang="ts">
+import { defineAsyncComponent, ref } from "vue";
+
+interface Props {
+  title?: string;
+  value?: Record<string, unknown> | string;
+  print?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  title: "",
+  value: "",
+  print: "",
+});
+
+const JsonShowModal = defineAsyncComponent(
+  () => import("../../modals/JsonShowModal.vue")
+);
+
+const showModal = ref(false);
+</script>
+
 <template>
   <a @click.prevent.stop="showModal = true">
     {{ print }}
@@ -10,34 +32,3 @@
     />
   </a>
 </template>
-
-<script>
-import { defineComponent, defineAsyncComponent } from "vue";
-
-export default defineComponent({
-  props: {
-    title: {
-      type: String,
-      default: "",
-    },
-    value: {
-      type: null,
-      default: "",
-    },
-    print: {
-      type: String,
-      default: "",
-    },
-  },
-  components: {
-    JsonShowModal: defineAsyncComponent(() =>
-      import("../../modals/JsonShowModal.vue").then((module) => module.default)
-    ),
-  },
-  data() {
-    return {
-      showModal: false,
-    };
-  },
-});
-</script>

package/vue-components/v3/tabs/EditorTabs.vue

@@ -1,3 +1,21 @@
+<script setup lang="ts">
+import { defineAsyncComponent } from "vue";
+
+const TabsBody = defineAsyncComponent(() => import("../tab/TabsBody.vue"));
+const Tabs = defineAsyncComponent(() => import("../tab/Tabs.vue"));
+const TabItem = defineAsyncComponent(() => import("../tab/TabItem.vue"));
+
+interface Props {
+  activeTab?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  activeTab: "",
+});
+
+defineEmits(["tabchange"]);
+</script>
+
 <template>
   <tabs-body class="mt-10">
     <tabs class="is-line">
@@ -10,27 +28,3 @@
     </tabs>
   </tabs-body>
 </template>
-
-<script>
-import { defineComponent, defineAsyncComponent } from "vue";
-export default defineComponent({
-  props: {
-    activeTab: {
-      type: String,
-      default: "",
-    },
-  },
-  emits: ["tabchange"],
-  components: {
-    TabsBody: defineAsyncComponent(() =>
-      import("../../v2/tab/TabsBody.vue").then((module) => module.default)
-    ),
-    Tabs: defineAsyncComponent(() =>
-      import("../../v2/tab/Tabs.vue").then((module) => module.default)
-    ),
-    TabItem: defineAsyncComponent(() =>
-      import("../tab/TabItem.vue").then((module) => module.default)
-    ),
-  },
-});
-</script>

package/vue-components/v3/tag/Tag.vue

@@ -1,17 +1,21 @@
+<script setup lang="ts">
+interface Props {
+  modifierClasses?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  modifierClasses: "",
+});
+</script>
+
 <template>
   <div class="tag" :class="modifierClasses">
     <slot />
   </div>
 </template>
-
-<script>
-import { defineComponent } from "vue";
-export default defineComponent({
-  props: {
-    modifierClasses: {
-      type: String,
-      default: "",
-    },
-  },
-});
-</script>
+<style lang="scss" scoped>
+.tag {
+  line-height: 1;
+  font-size: 11px;
+}
+</style>

package/vue-components/v3/tag/Tags.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="tags">
+    <slot />
+  </div>
+</template>

package/base/utilities/_derived-variables.scss

@@ -1,25 +0,0 @@
-// color
-$ac-info: $ac-blue;
-$ac-success: $ac-primary;
-$ac-warning: $ac-yellow;
-$ac-danger: $ac-red;
-
-// Text colors
-$ac-color-text: var(--ac-text);
-$ac-color-heading: var(--ac-text-heading);
-
-// Link colors
-$ac-link: $ac-blue;
-$ac-link-visited: $ac-purple;
-
-// Box Shadow
-$ac-shadow-1: 0 1px 4px rgba(26, 80, 151, 0.16);
-$ac-shadow-2: 0px 8px 57px rgba(0, 0, 0, 0.16);
-$ac-shadow-3: 0 3px 4px 0 rgba(0, 0, 0, 0.18),
-  0 3px 3px -2px rgba(0, 0, 0, 0.16), 0 1px 6px 0 rgba(0, 0, 0, 0.12);
-
-$ac-shadow-sm: 0 1px 4px rgba(26, 80, 151, 0.16);
-$ac-shadow-xl: 0px 8px 57px rgba(0, 0, 0, 0.16);
-$ac-shadow-lg: 0 3px 4px 0 rgba(0, 0, 0, 0.18),
-  0 3px 3px -2px rgba(0, 0, 0, 0.16), 0 1px 6px 0 rgba(0, 0, 0, 0.12);
-