@appscode/design-system 1.1.0 → 2.0.0

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

@@ -1,28 +1,17 @@
-<template>
-  <td :style="styleOb">
-    <slot />
-  </td>
-</template>
-
-<script>
-import { defineComponent } from "vue";
+<script setup lang="ts">
+import { computed } from "vue";
 
-export default defineComponent({
-  props: {
-    cellWidth: {
-      type: Number,
-      default: null,
-    },
-  },
+interface Props {
+  cellWidth?: number | null;
+}
 
-  computed: {
-    styleOb() {
-      const ob = {};
-      if (this.cellWidth) {
-        ob.width = `${this.cellWidth}px`;
-      }
-      return ob || {};
-    },
-  },
+const props = withDefaults(defineProps<Props>(), {
+  cellWidth: null,
 });
 </script>
+
+<template>
+  <td>
+    <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"
@@ -14,7 +77,7 @@
     >
       <table-cell v-if="collapsible">
         <collapsible-button
-          modifier-classes="is-square is-light height-20 width-20 is-rounded is-size-7"
+          modifier-classes="is-square is-light height-20 width-20 is-rounded is-size-7 p-0"
           :icon-class="isCollapsed ? 'chevron-right' : 'chevron-down'"
           @click.stop="toggleCollapse"
         />
@@ -39,7 +102,7 @@
   >
     <table-cell v-if="collapsible">
       <collapsible-button
-        modifier-classes="is-square is-light height-20 width-20 is-rounded is-size-7"
+        modifier-classes="is-square is-light height-20 width-20 is-rounded is-size-7 p-0"
         :icon-class="isCollapsed ? 'chevron-right' : 'chevron-down'"
         @click.stop="toggleCollapse"
       />
@@ -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,111 +1,102 @@
-<template>
-  <tags v-if="printableStringObjs.length">
-    <tag
-      v-for="(printableStringOb, idx) in printableStringObjs.slice(
-        0,
-        indexOfCharacterLengthExceed
-      )"
-      :key="`${printableStringOb.print}-${idx}`"
-    >
-      <value-with-modal
-        v-if="printableStringOb.exceededLength"
-        :title="`${cellTitle}: ${idx}`"
-        :value="printableStringOb.value"
-        :print="printableStringOb.print"
-      />
-      <template v-else> {{ printableStringOb.print }} </template>
-    </tag>
+<script setup lang="ts">
+import { defineAsyncComponent, ref, computed } from "vue";
 
-    <tag 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="items"
-        />
-      </a>
-    </tag>
-  </tags>
-  <p v-else>-</p>
-</template>
+interface Props {
+  cellTitle?: string;
+  items?: Array<any>;
+  maxCharacterLength?: number;
+}
 
-<script>
-import { defineComponent, defineAsyncComponent } from "vue";
+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")
+);
 
-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)
-    ),
-  },
+const showFullData = ref(false);
 
-  data() {
-    return {
-      showFullData: 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 };
+  });
+});
 
-  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;
-      }
+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, idx) in printableStringObjs.slice(
+          0,
+          indexOfCharacterLengthExceed
+        )"
+        :key="`${printableStringOb.print}-${idx}`"
+        modifierClasses="is-primary is-light"
+      >
+        <value-with-modal
+          v-if="printableStringOb.exceededLength"
+          :title="`${cellTitle}: ${idx}`"
+          :value="printableStringOb.value"
+          :print="printableStringOb.print"
+        />
+        <template v-else> {{ printableStringOb.print }} </template>
+      </tag>
+
+      <tag 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="items"
+          />
+        </a>
+      </tag>
+    </tags>
+    <p v-else>{{ printableStringObjs }}</p>
+  </span>
+</template>