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

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,3 +1,65 @@
+<script setup lang="ts">
+import { defineAsyncComponent, ref, computed } from "vue";
+
+interface Props {
+  cellTitle?: string;
+  obj?: Record<string, unknown>;
+  maxCharacterLength?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  cellTitle: "cell title",
+  maxCharacterLength: 50,
+  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")
+);
+
+const showFullData = ref(false);
+
+const objKeys = computed(() => {
+  return Object.keys(props.obj) || [];
+});
+
+const printableStringObjs = computed(() => {
+  return objKeys.value.map((key) => {
+    let value = props.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 };
+  });
+});
+
+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
@@ -11,13 +73,16 @@
       <value-with-modal
         v-if="printableStringOb.exceededLength"
         :title="printableStringOb.key"
-        :value="printableStringOb.value"
+        :value="printableStringOb.value as string"
         :print="printableStringOb.print"
       />
       <template v-else> {{ printableStringOb.print }} </template>
     </tag>
 
-    <tag modifierClasses="is-info is-light" v-if="indexOfCharacterLengthExceed !== printableStringObjs.length">
+    <tag
+      modifierClasses="is-info is-light"
+      v-if="indexOfCharacterLengthExceed !== printableStringObjs.length"
+    >
       <a @click.prevent.stop="showFullData = true">
         <ellipsis-icon />
         <json-show-modal
@@ -31,80 +96,3 @@
   </tags>
   <p v-else>-</p>
 </template>
-
-<script>
-import { defineComponent, defineAsyncComponent } from "vue";
-
-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)
-    ),
-  },
-
-  data() {
-    return {
-      showFullData: false,
-    };
-  },
-
-  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;
-      }
-
-      return idx === -1 ? this.printableStringObjs.length : idx;
-    },
-  },
-});
-</script>
-

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,20 @@
+<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;
+}
+</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/vue-components/v3/terminal/LongRunningTaskTerminal.vue

@@ -1,7 +1,3 @@
-<template>
-  <div ref="terminalRef" class="terminal-body"></div>
-</template>
-
 <script setup lang="ts">
 import { computed, nextTick, ref, toRefs, watch, watchPostEffect } from "vue";
 import { Terminal } from "xterm";
@@ -9,28 +5,18 @@ import { FitAddon } from "xterm-addon-fit";
 import { WebglAddon } from "xterm-addon-webgl";
 import { Material, MaterialDark } from "xterm-theme"; //https://github.com/ysk2014/xterm-theme/tree/master/src/iterm
 
-const props = withDefaults(
-  defineProps<{
-    theme: string;
-    logs: string[];
-  }>(),
-  { theme: "light", logs: () => [] }
-);
+interface Props {
+  theme?: string;
+  logs?: string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  theme: "light",
+  logs: () => [],
+});
 // terminal print logic
 const { logs, theme } = toRefs(props);
 const lastPrintIdx = ref(0);
-watch(
-  logs,
-  (n) => {
-    if (n.length > lastPrintIdx.value) {
-      nextTick(() => {
-        writeOnTerminal(n.slice(lastPrintIdx.value).join("\n"));
-        lastPrintIdx.value = n.length;
-      });
-    }
-  },
-  { immediate: true, deep: true }
-);
 
 //theme
 const bodyBgc = computed(() =>
@@ -64,8 +50,25 @@ function writeOnTerminal(msg: string) {
     else terminal.write(line);
   });
 }
+
+watch(
+  logs,
+  (n) => {
+    if (n.length > lastPrintIdx.value) {
+      nextTick(() => {
+        writeOnTerminal(n.slice(lastPrintIdx.value).join("\n"));
+        lastPrintIdx.value = n.length;
+      });
+    }
+  },
+  { immediate: true, deep: true }
+);
 </script>
 
+<template>
+  <div ref="terminalRef" class="terminal-body"></div>
+</template>
+
 <style lang="scss">
 .terminal-body {
   width: 100%;

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