@appscode/design-system 1.1.0-alpha.8 → 1.1.0-beta.10

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

@@ -1,28 +1,25 @@
-<template>
-  <td :style="styleOb">
-    <slot />
-  </td>
-</template>
+<script setup lang="ts">
+import { computed } from "vue";
 
-<script>
-import { defineComponent } from "vue";
+interface Props {
+  cellWidth?: number | null;
+}
 
-export default defineComponent({
-  props: {
-    cellWidth: {
-      type: Number,
-      default: null,
-    },
-  },
+const props = withDefaults(defineProps<Props>(), {
+  cellWidth: null,
+});
 
-  computed: {
-    styleOb() {
-      const ob = {};
-      if (this.cellWidth) {
-        ob.width = `${this.cellWidth}px`;
-      }
-      return ob || {};
-    },
-  },
+const styleOb = computed(() => {
+  const ob: { width?: string } = {};
+  if (props.cellWidth) {
+    ob.width = `${props.cellWidth}px`;
+  }
+  return ob || {};
 });
 </script>
+
+<template>
+  <td :style="styleOb">
+    <slot />
+  </td>
+</template>

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

@@ -1,34 +1,56 @@
+<script setup lang="ts">
+import { nextTick, onMounted, ref } from "vue";
+
+const tableContainer = ref<HTMLElement | null>(null);
+
+const emit = defineEmits(["scroller"]);
+
+const isScrollerShowing = () => {
+  if (tableContainer.value?.scrollWidth)
+    return (
+      tableContainer.value?.scrollWidth > tableContainer.value?.clientWidth
+    );
+  return false;
+};
+
+onMounted(() => {
+  setTimeout(() => {
+    nextTick(() => {
+      emit("scroller", isScrollerShowing());
+    });
+  }, 50);
+});
+</script>
+
 <template>
   <div class="ac-table-container table-container" ref="tableContainer">
     <slot />
   </div>
 </template>
 
-<script lang="ts">
-  import { emit } from 'process'
-  import { defineComponent, ref, onMounted, nextTick } from 'vue'
-
-  export default defineComponent({
-    emits: ['scroller'],
-
-    setup(props, { emit }) {
-      const tableContainer = ref(null)
-
-      function isScrollerShowing() {
-        return tableContainer.value?.scrollWidth > tableContainer.value?.clientWidth
-      }
-
-      onMounted(() => {
-        setTimeout(() => {
-          nextTick(() => {
-            emit('scroller', isScrollerShowing())
-          })
-        }, 50)
-      })
-
-      return {
-        tableContainer,
-      }
-    },
-  })
-</script>
+<style lang="scss">
+.table-container {
+  &.ac-table-container {
+    &::-webkit-scrollbar {
+      height: 7px;
+    }
+
+    /* Track */
+    &::-webkit-scrollbar-track {
+      background-color: #d1d4de;
+      border-radius: 10px;
+    }
+
+    /* Handle */
+    &::-webkit-scrollbar-thumb {
+      background-color: $primary-95;
+      border-radius: 10px;
+    }
+
+    /* Handle on hover */
+    &::-webkit-scrollbar-thumb:hover {
+      background-color: $primary-95;
+    }
+  }
+}
+</style>

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

@@ -1,3 +1,66 @@
+<script setup lang="ts">
+import { defineAsyncComponent, nextTick, ref } from "vue";
+
+interface Props {
+  link?: string;
+  isSelected?: boolean;
+  isDisabled?: boolean;
+  fakeCellWidth?: number;
+  collapsible?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  link: "",
+  isSelected: false,
+  isDisabled: false,
+  fakeCellWidth: 0,
+  collapsible: false,
+});
+
+const emit = defineEmits(["rowselect", "rowexpand", "rowcollapse"]);
+
+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 isCollapsed = ref(true);
+
+const collapseRow = () => {
+  isCollapsed.value = true;
+};
+
+const toggleCollapse = () => {
+  const newVal = !isCollapsed.value;
+  if (!newVal) {
+    isCollapsed.value = newVal;
+    // show expand animation
+    nextTick(() => {
+      setTimeout(() => {
+        if (collapsibleRow.value) {
+          collapsibleRow.value.classList.remove("is-closed");
+          collapsibleRow.value.classList.add("is-active");
+        }
+        emit("rowexpand", collapseRow);
+      }, 0);
+    });
+  } else {
+    if (collapsibleRow.value) {
+      collapsibleRow.value.classList.remove("is-active");
+      collapsibleRow.value.classList.add("is-closed");
+    }
+    setTimeout(() => {
+      // remove row after animation finish
+      isCollapsed.value = newVal;
+      emit("rowcollapse");
+    }, 100);
+  }
+};
+</script>
+
 <template>
   <router-link
     v-if="link"
@@ -60,88 +123,3 @@
     </tr>
   </transition>
 </template>
-
-<script>
-import { defineComponent, defineAsyncComponent } from "vue";
-
-export default defineComponent({
-  props: {
-    link: {
-      type: String,
-      default: "",
-    },
-    isSelected: {
-      type: Boolean,
-      default: false,
-    },
-    isDisabled: {
-      type: Boolean,
-      default: false,
-    },
-    fakeCellWidth: {
-      type: Number,
-      default: 0,
-    },
-    collapsible: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  emits: ["rowselect", "rowexpand", "rowcollapse"],
-
-  components: {
-    TableCell: defineAsyncComponent(() =>
-      import(
-        "@appscode/design-system/vue-components/v3/table/TableCell.vue"
-      ).then((module) => module.default)
-    ),
-    FakeTableCell: defineAsyncComponent(() =>
-      import(
-        "@appscode/design-system/vue-components/v3/table/FakeTableCell.vue"
-      ).then((module) => module.default)
-    ),
-    CollapsibleButton: defineAsyncComponent(() =>
-      import("@appscode/design-system/vue-components/v3/button/Button.vue")
-    ),
-  },
-
-  data() {
-    return {
-      isCollapsed: true,
-    };
-  },
-
-  methods: {
-    toggleCollapse() {
-      const newVal = !this.isCollapsed;
-      if (!newVal) {
-        this.isCollapsed = newVal;
-        // show expand animation
-        this.$nextTick(() => {
-          setTimeout(() => {
-            if (this.$refs.collapsibleRow) {
-              this.$refs.collapsibleRow.classList.remove("is-closed");
-              this.$refs.collapsibleRow.classList.add("is-active");
-            }
-            this.$emit("rowexpand", this.collapseRow);
-          }, 0);
-        });
-      } else {
-        if (this.$refs.collapsibleRow) {
-          this.$refs.collapsibleRow.classList.remove("is-active");
-          this.$refs.collapsibleRow.classList.add("is-closed");
-        }
-        setTimeout(() => {
-          // remove row after animation finish
-          this.isCollapsed = newVal;
-          this.$emit("rowcollapse");
-        }, 100);
-      }
-    },
-    collapseRow() {
-      this.isCollapsed = true;
-    },
-  },
-});
-</script>

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

@@ -1,3 +1,70 @@
+<script setup lang="ts">
+import { defineAsyncComponent, ref, computed } from "vue";
+
+interface Props {
+  cellTitle?: string;
+  items?: Array<any>;
+  maxCharacterLength?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  cellTitle: "cell-title",
+  maxCharacterLength: 50,
+  items: () => [],
+});
+
+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 showFullData = ref(false);
+
+const printableStringObjs = computed(() => {
+  return props.items.map((item) => {
+    const value = item as Record<string, unknown>;
+    let exceededLength = false;
+    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);
+    } else {
+      const stringifiedValue = JSON.stringify(item);
+      exceededLength = stringifiedValue.length > 27;
+      print = exceededLength
+        ? `${stringifiedValue.slice(0, 27)}...`
+        : stringifiedValue;
+    }
+    return { value, exceededLength, print };
+  });
+});
+
+const indexOfCharacterLengthExceed = computed(() => {
+  let idx = -1;
+  let cumulativeLen = 0;
+  for (const [index, po] of printableStringObjs.value.entries()) {
+    const newLen = cumulativeLen + po.print.length;
+    if (newLen > props.maxCharacterLength) {
+      idx = index;
+      break;
+    }
+    cumulativeLen = newLen;
+  }
+
+  return idx === -1 ? printableStringObjs.value.length : idx;
+});
+</script>
+
 <template>
   <tags v-if="printableStringObjs.length">
     <tag
@@ -30,82 +97,3 @@
   </tags>
   <p v-else>-</p>
 </template>
-
-<script>
-import { defineComponent, defineAsyncComponent } from "vue";
-
-export default defineComponent({
-  props: {
-    cellTitle: {
-      type: String,
-      default: "Array",
-    },
-    items: {
-      type: Array,
-      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)
-    ),
-  },
-
-  data() {
-    return {
-      showFullData: false,
-    };
-  },
-
-  computed: {
-    printableStringObjs() {
-      return this.items.map((item) => {
-        const value = item;
-        let exceededLength = false;
-        let print = item;
-        if (typeof item === "object") {
-          exceededLength = true;
-          print = item["Name"] || item["name"] || item[Object.keys(item)[0]];
-        } else {
-          const stringifiedValue = JSON.stringify(item);
-          exceededLength = stringifiedValue.length > 27;
-          print = exceededLength
-            ? `${stringifiedValue.slice(0, 27)}...`
-            : stringifiedValue;
-        }
-        return { value, 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;
-      }
-
-      return idx === -1 ? this.printableStringObjs.length : idx;
-    },
-  },
-});
-</script>

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

@@ -1,3 +1,98 @@
+<script setup lang="ts">
+import {
+  computed,
+  defineAsyncComponent,
+  nextTick,
+  onMounted,
+  ref,
+  watch,
+} from "vue";
+
+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 computedCellWidth = ref(50);
+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 maxCharacterLength = computed(() => {
+  return Math.ceil(computedCellWidth.value / 8);
+});
+
+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;
+});
+
+const calcCellWidth = () => {
+  if (props.isLoaderActive) {
+    nextTick(() => {
+      if (cellLoaderDiv.value) {
+        computedCellWidth.value = cellLoaderDiv.value.offsetWidth;
+      }
+    });
+  } else {
+    nextTick(() => {
+      if (cellDiv.value) {
+        computedCellWidth.value = cellDiv.value.offsetWidth;
+      }
+    });
+  }
+};
+
+onMounted(() => {
+  calcCellWidth();
+});
+
+watch(
+  () => props.isLoaderActive,
+  () => {
+    calcCellWidth();
+  }
+);
+</script>
+
 <template>
   <div v-if="isLoaderActive" ref="cellLoaderDiv" :style="{ maxWidth: '300px' }">
     <content-loader
@@ -11,14 +106,14 @@
   <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"
@@ -30,104 +125,3 @@
     </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>