@appscode/design-system 1.0.3-alpha.7 → 1.0.43-alpha.100

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

@@ -0,0 +1,105 @@
+<template>
+  <tags v-if="printableStringObjs.length">
+    <tag
+      v-for="printableStringOb in printableStringObjs.slice(
+        0,
+        indexOfCharacterLengthExceed
+      )"
+      :key="printableStringOb.key"
+    >
+      <value-with-modal
+        v-if="printableStringOb.exceededLength"
+        :title="printableStringOb.key"
+        :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="obj"
+        />
+      </a>
+    </tag>
+  </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) => {
+        const value = this.obj[key];
+        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

@@ -0,0 +1,43 @@
+<template>
+  <a @click.prevent.stop="showModal = true">
+    {{ print }}
+
+    <json-show-modal
+      :open="showModal"
+      @closemodal="showModal = false"
+      :editor-title="title"
+      :editor-content="value"
+    />
+  </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

@@ -0,0 +1,36 @@
+<template>
+  <tabs-body class="mt-10">
+    <tabs class="is-line">
+      <tab-item :is-active="activeTab === 'edit'">
+        <a @click.prevent="$emit('tabchange', 'edit')">Edit</a>
+      </tab-item>
+      <tab-item :is-active="activeTab === 'preview'">
+        <a @click.prevent="$emit('tabchange', 'preview')">Preview Changes</a>
+      </tab-item>
+    </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

@@ -0,0 +1,17 @@
+<template>
+  <div class="tag" :class="modifierClasses">
+    <slot />
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+export default defineComponent({
+  props: {
+    modifierClasses: {
+      type: String,
+      default: "",
+    },
+  },
+});
+</script>