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

package/vue-components/v3/content/ContentHeader.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="ac-content-header" :class="{ 'b-b-1': !removeBorderBottom }">
+    <!-- header left start  -->
+    <div class="ac-cheader-left">
+      <!-- title  -->
+      <div class="ac-content-title">
+        <h6>
+          <slot name="header-icon" />
+          {{ headerTitle }}
+        </h6>
+        <p v-if="headerSubTitle">{{ headerSubTitle }}</p>
+      </div>
+      <!-- title  -->
+    </div>
+    <!-- header left end -->
+
+    <!-- header right start  -->
+    <div class="ac-cheader-right">
+      <!-- your feedom content start here  -->
+      <header-items>
+        <slot />
+      </header-items>
+      <!-- your feedom content end here  -->
+    </div>
+    <!-- header right end -->
+  </div>
+</template>
+
+<script>
+import { defineComponent, defineAsyncComponent } from "vue";
+
+export default defineComponent({
+  props: {
+    headerTitle: {
+      type: String,
+      default: "Content Header",
+    },
+    headerSubTitle: {
+      type: String,
+      default: "",
+    },
+    removeBorderBottom: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  components: {
+    HeaderItems: defineAsyncComponent(() =>
+      import("../../v2/header/HeaderItems.vue").then((module) => module.default)
+    ),
+  },
+});
+</script>

package/vue-components/v3/content/ContentTable.vue

@@ -0,0 +1,65 @@
+<template>
+  <content-layout>
+    <template #content-header>
+      <content-header
+        :header-title="tableTitle"
+        :header-sub-title="tableSubTitle"
+        :class="{ 'pl-0 pr-0': removeTableHeaderPadding }"
+      >
+        <slot name="content-left-controls" />
+        <header-item>
+          <search-bar v-if="searchable" @search="searchText = $event" />
+        </header-item>
+        <slot name="content-right-controls" />
+      </content-header>
+    </template>
+    <slot name="content" :search-text="searchText" />
+  </content-layout>
+</template>
+
+<script>
+import { defineComponent, defineAsyncComponent } from "vue";
+
+export default defineComponent({
+  props: {
+    removeTableHeaderPadding: {
+      type: Boolean,
+      default: false,
+    },
+    tableTitle: {
+      type: String,
+      default: "Table",
+    },
+    tableSubTitle: {
+      type: String,
+      default: "",
+    },
+    searchable: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  components: {
+    ContentLayout: defineAsyncComponent(() =>
+      import("../../v2/content/ContentLayout.vue").then(
+        (module) => module.default
+      )
+    ),
+    ContentHeader: defineAsyncComponent(() =>
+      import("./ContentHeader.vue").then((module) => module.default)
+    ),
+    HeaderItem: defineAsyncComponent(() =>
+      import("../../v2/header/HeaderItem.vue").then((module) => module.default)
+    ),
+    SearchBar: defineAsyncComponent(() =>
+      import("../searchbars/SearchBar.vue").then((module) => module.default)
+    ),
+  },
+
+  data() {
+    return {
+      searchText: "",
+    };
+  },
+});
+</script>

package/vue-components/v3/dropdown/DropdownDivider.vue

@@ -0,0 +1,3 @@
+<template>
+  <hr class="dropdown-divider" />
+</template>

package/vue-components/v3/dropdown/DropdownItem.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="dropdown-item">
+    <slot />
+  </div>
+</template>

package/vue-components/v3/dropdown/DropdownMenu.vue

@@ -0,0 +1,111 @@
+<template>
+  <div
+    ref="dropdown"
+    class="dropdown"
+    :class="{
+      'is-active': isDropdownActive,
+      'dropdown-show-animation': dropdownShowAnimation,
+      'dropdown-hide-animation': dropdownHideAnimation,
+    }"
+  >
+    <div class="dropdown-trigger">
+      <slot name="dropdown-trigger" />
+    </div>
+    <div id="dropdown-menu" class="dropdown-menu" role="menu">
+      <div class="dropdown-content">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+//@ts-ignore
+import { defineComponent, onUnmounted, Ref, ref, toRefs, watch } from "vue";
+
+export default defineComponent({
+  props: {
+    isActive: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ["update:is-active"],
+
+  setup(props, { emit }) {
+    const { isActive } = toRefs(props);
+    watch(isActive, (n) => {
+      if (ignoreClick.value) {
+        // ignore new value
+        // emit old value
+        emit("update:is-active", isDropdownActive.value);
+      } else {
+        if (n) {
+          animateDropdown("show");
+          isDropdownActive.value = true;
+        } else {
+          animateDropdown("hide");
+          setTimeout(() => {
+            isDropdownActive.value = false;
+          }, 200);
+        }
+      }
+    });
+
+    const dropdown: Ref<HTMLElement | null> = ref(null);
+    const isDropdownActive = ref(isActive.value);
+
+    // attach click event listener on window, and close the dropdown
+    function deactivateDropdown(e: Event) {
+      const { target } = e;
+      if (
+        isDropdownActive.value &&
+        dropdown.value &&
+        dropdown.value !== target &&
+        !dropdown.value.contains(target as Node)
+      ) {
+        if (!ignoreClick.value) {
+          animateDropdown("hide");
+          setTimeout(() => {
+            isDropdownActive.value = false;
+            emit("update:is-active", false);
+          }, 200);
+        }
+      }
+    }
+    window.addEventListener("click", deactivateDropdown);
+    onUnmounted(() => {
+      window.removeEventListener("click", deactivateDropdown);
+    });
+
+    // for animation
+    const dropdownShowAnimation = ref(false);
+    const dropdownHideAnimation = ref(false);
+    const ignoreClick = ref(false);
+    function animateDropdown(type: string) {
+      ignoreClick.value = true;
+      if (type === "show") {
+        dropdownShowAnimation.value = true;
+        // remove class after 200 miliseconds
+        setTimeout(() => {
+          dropdownShowAnimation.value = false;
+          ignoreClick.value = false;
+        }, 200);
+      } else {
+        dropdownHideAnimation.value = true;
+        setTimeout(() => {
+          dropdownHideAnimation.value = false;
+          ignoreClick.value = false;
+        }, 200);
+      }
+    }
+
+    return {
+      dropdown,
+      isDropdownActive,
+      dropdownShowAnimation,
+      dropdownHideAnimation,
+    };
+  },
+});
+</script>

package/vue-components/v3/editor/Editor.vue

@@ -0,0 +1,157 @@
+<template>
+  <div>
+    <editor-tabs
+      v-if="!readOnly"
+      @tabchange="activeTab = $event"
+      :active-tab="activeTab"
+    />
+    <monaco-editor
+      v-if="activeTab === 'edit'"
+      ref="monacoEditor"
+      @editorDidMount="onEditorMount"
+      key="edit"
+      :class="`vh-${editorHeight} is-clipped`"
+      :value="editorContent"
+      @change="onChange"
+      :language="language"
+      :options="{
+        minimap: {
+          enabled: calcShowMinimap
+        },
+        theme: theme,
+        readOnly: readOnly,
+        wordWrap: wordWrap,
+        scrollBeyondLastLine: false
+      }"
+    />
+    <monaco-editor
+      v-if="activeTab === 'preview'"
+      key="preview"
+      :class="`vh-${editorHeight} is-clipped`"
+      :value="editorContent"
+      :language="language"
+      :options="{
+        minimap: {
+          enabled: calcShowMinimap
+        },
+        theme: theme,
+        readOnly: true,
+        wordWrap: wordWrap,
+        scrollBeyondLastLine: false
+      }"
+      :original="originalEditorContent"
+      :diff-editor="true"
+    />
+  </div>
+</template>
+
+<script>
+import { defineComponent, defineAsyncComponent, h } from "vue";
+export default defineComponent({
+  props: {
+    value: {
+      type: String,
+      default: ""
+    },
+    originalValue: {
+      type: String,
+      default: ""
+    },
+    readOnly: {
+      type: Boolean,
+      default: false
+    },
+    language: {
+      type: String,
+      default: "yaml"
+    },
+    showMinimap: {
+      type: Boolean,
+      default: true
+    },
+    editorHeight: {
+      type: Number,
+      default: 40
+    },
+    editorTheme: {
+      type: String,
+      default: ""
+    },
+    wordWrap: {
+      type: String,
+      default: "off"
+    },
+  },
+
+  emits: ["update:modelValue"],
+
+  components: {
+    EditorTabs: defineAsyncComponent(() =>
+      import("../tabs/EditorTabs.vue").then(module => module.default)
+    ),
+    MonacoEditor: defineAsyncComponent(() =>
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      import("vue-monaco").then(module => {
+        module.default.render = () => h("div");
+        return module.default;
+      })
+    )
+  },
+
+  data() {
+    return {
+      activeTab: "edit",
+      editorContent: "",
+      originalEditorContent: ""
+    };
+  },
+
+  computed: {
+    calcShowMinimap() {
+      const noOfLines = this.editorContent.split("\n").length;
+      return this.showMinimap && noOfLines * 2 > this.editorHeight;
+    },
+    theme() {
+      return (
+        this.editorTheme ||
+        (document.documentElement.classList.contains("is-dark-theme")
+          ? "vs-dark"
+          : "vs")
+      );
+    }
+  },
+
+  watch: {
+    value: {
+      immediate: true,
+      handler(n) {
+        if (this.editorContent !== n) {
+          this.editorContent = n;
+        }
+      }
+    },
+    originalValue: {
+      immediate: true,
+      handler(n) {
+        if (this.originalEditorContent !== n) {
+          this.originalEditorContent = n;
+        }
+      }
+    }
+  },
+
+  methods: {
+    onChange(e) {
+      if (typeof e === "string") this.editorContent = e;
+    },
+    onEditorMount() {
+      const editor = this.$refs.monacoEditor.getEditor();
+      // add event listeners
+      editor.onDidBlurEditorText(() => {
+        this.$emit("update:modelValue", this.editorContent);
+      });
+    }
+  }
+});
+</script>

package/vue-components/v3/form-fields/Input.vue

@@ -0,0 +1,21 @@
+<template>
+  <input class="ac-input" v-bind="inputListeners" />
+</template>
+
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  inheritAttrs: false,
+  emits: ["update:modelValue"],
+  computed: {
+    inputListeners() {
+      return Object.assign({}, this.$attrs, {
+        onInput: (event) => {
+          this.$emit("update:modelValue", event.target.value);
+        },
+      });
+    },
+  },
+});
+</script>

package/vue-components/v3/header/Header.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="inner-header">
+    <div
+      class="is-flex is-justify-content-space-between"
+      :class="{ container: isContainer }"
+    >
+      <header-items>
+        <header-item>
+          <transition name="fade" mode="out-in" appear>
+            <h5 :key="title">{{ title }}</h5>
+          </transition>
+        </header-item>
+        <slot name="header-left-controls" />
+      </header-items>
+      <header-items>
+        <slot />
+      </header-items>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent, defineAsyncComponent } from "vue";
+
+export default defineComponent({
+  props: {
+    title: {
+      type: String,
+      default: "No Title",
+    },
+    isContainer: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  components: {
+    HeaderItems: defineAsyncComponent(() =>
+      import("../../v2/header/HeaderItems.vue").then((module) => module.default)
+    ),
+    HeaderItem: defineAsyncComponent(() =>
+      import("../../v2/header/HeaderItem.vue").then((module) => module.default)
+    ),
+  },
+});
+</script>

package/vue-components/v3/modal/Modal.vue

@@ -0,0 +1,135 @@
+<template>
+  <teleport to="#modals">
+    <!-- for transition https://github.com/adamwathan/vue-tailwind-examples/blob/master/src/components/Modal.vue -->
+    <!-- modal start  -->
+    <div
+      v-if="showModal"
+      class="ac-modal is-middle-alignment"
+      :class="modifierClasses"
+      @click.self="destroyModal"
+    >
+      <div class="ac-modal-inner">
+        <!-- modal header start  -->
+        <div class="ac-modal-header">
+          <h6>{{ title }}</h6>
+          <header-items>
+            <slot name="modal-header-controls" />
+            <header-item>
+              <ac-button
+                modifier-classes="is-square is-transparent"
+                :disabled="isCloseOptionDisabled"
+                :icon-image="crossIcon"
+                @click.stop="destroyModal"
+              />
+            </header-item>
+          </header-items>
+        </div>
+        <!-- modal header end -->
+
+        <!-- modal body start  -->
+        <div class="ac-modal-body">
+          <div class="ac-modal-content">
+            <!-- freedom content start  -->
+            <slot />
+            <!-- freedom content end -->
+          </div>
+        </div>
+        <!-- modal body end  -->
+
+        <!-- modal footer start -->
+        <div class="ac-modal-footer action-footer is-flex is-align-items-center is-justify-content-space-between">
+          <div>
+            <slot name="modal-footer-left" />
+          </div>
+          <buttons class="has-text-right is-block">
+            <slot name="modal-footer-controls" />
+          </buttons>
+          <!-- modal footer end -->
+        </div>
+      </div>
+    </div>
+  </teleport>
+</template>
+
+<script>
+import { defineComponent, defineAsyncComponent } from "vue";
+
+export default defineComponent({
+  props: {
+    open: {
+      type: Boolean,
+      default: false,
+    },
+    title: {
+      type: String,
+      default: "Modal",
+    },
+    modifierClasses: {
+      type: String,
+      default: "",
+    },
+    isCloseOptionDisabled: {
+      type: Boolean,
+      default: false,
+    }
+  },
+  emits: ["closemodal"],
+
+  components: {
+    HeaderItems: defineAsyncComponent(() =>
+      import("../../v2/header/HeaderItems.vue").then((module) => module.default)
+    ),
+    HeaderItem: defineAsyncComponent(() =>
+      import("../../v2/header/HeaderItem.vue").then((module) => module.default)
+    ),
+    Buttons: defineAsyncComponent(() =>
+      import("../../v2/button/Buttons.vue").then((module) => module.default)
+    ),
+    AcButton: defineAsyncComponent(() =>
+      import("../button/Button.vue").then((module) => module.default)
+    ),
+  },
+
+  data() {
+    return {
+      showModal: false,
+      crossIcon: import.meta.globEager(
+        "/src/assets/icons/modal/close-icon.svg"
+      )["/src/assets/icons/modal/close-icon.svg"].default,
+    };
+  },
+
+  watch: {
+    open: {
+      immediate: true,
+      handler(n) {
+        if (n) {
+          this.initializeModal();
+        } else {
+          this.destroyModal();
+        }
+      },
+    },
+  },
+
+  methods: {
+    onKeyDown(e) {
+      if (this.open && e.keyCode === 27) {
+        // escape key
+        this.destroyModal();
+      }
+    },
+    initializeModal() {
+      this.showModal = true;
+      document.addEventListener("keydown", this.onKeyDown);
+    },
+    destroyModal() {
+      if (this.isCloseOptionDisabled) return;
+      this.showModal = false;
+      document.removeEventListener("keydown", this.onKeyDown);
+
+      this.$emit("closemodal", true);
+    },
+  },
+});
+</script>

package/vue-components/v3/modals/JsonShowModal.vue

@@ -0,0 +1,87 @@
+<template>
+  <modal
+    :title="editorTitle"
+    :open="open"
+    @closemodal="closeModal"
+    modifier-classes="is-medium"
+  >
+    <template #modal-header-controls>
+      <header-item>
+        <ac-button
+          modifier-classes="is-square is-primary"
+          icon-class="copy"
+          v-clipboard:copy="`${editorTitle}: &quot;${editorContent}&quot;`"
+          v-clipboard:success="onCopy"
+          v-clipboard:error="onError"
+        />
+      </header-item>
+    </template>
+    <editor
+      :value="JSON.stringify(parsedContent, null, 4)"
+      :read-only="true"
+      language="json"
+      :show-minimap="false"
+    />
+  </modal>
+</template>
+
+<script>
+import { defineComponent, defineAsyncComponent } from "vue";
+import { useToast } from "vue-toastification";
+
+export default defineComponent({
+  props: {
+    open: {
+      type: Boolean,
+      default: false,
+    },
+    editorTitle: {
+      type: String,
+      default: "",
+    },
+    editorContent: {
+      type: null,
+      default: () => ({}),
+    },
+  },
+  emits: ["closemodal"],
+  components: {
+    Modal: defineAsyncComponent(() =>
+      import("../modal/Modal.vue").then((module) => module.default)
+    ),
+    Editor: defineAsyncComponent(() =>
+      import("../editor/Editor.vue").then((module) => module.default)
+    ),
+    AcButton: defineAsyncComponent(() =>
+      import("../button/Button.vue").then((module) => module.default)
+    ),
+    HeaderItem: defineAsyncComponent(() =>
+      import("../../v2/header/HeaderItem.vue").then((module) => module.default)
+    ),
+  },
+  computed: {
+    parsedContent() {
+      try {
+        return JSON.parse(this.editorContent);
+      } catch (e) {
+        return this.editorContent;
+      }
+    },
+  },
+  setup() {
+    const toast = useToast();
+    return { toast };
+  },
+  methods: {
+    onCopy() {
+      this.toast.success("Value copied successfully", { timeout: 1000 });
+    },
+    onError() {
+      this.toast.error("Copying failed", { timeout: 1000 });
+    },
+    closeModal() {
+      this.$emit("closemodal", true);
+    },
+  },
+});
+</script>