@appscode/design-system 0.0.21-alpha.2 → 0.4.27

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

@@ -0,0 +1,55 @@
+<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 class="is-flex">
+          <slot name="header-icon" />
+          {{ headerTitle }}
+          <slot name="title-right-actions" />
+        </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,83 @@
+<template>
+  <content-layout>
+    <template #content-header>
+      <content-header
+        v-if="!hideHeader"
+        :header-title="tableTitle"
+        :header-sub-title="tableSubTitle"
+        :class="{ 'pl-0 pr-0': removeTableHeaderPadding }"
+      >
+        <template #title-right-actions>
+          <slot name="title-right-actions" />
+        </template>
+        <slot name="content-left-controls" />
+        <header-item>
+          <search-bar v-if="searchable" @search="updateSearchText" />
+        </header-item>
+        <slot name="content-right-controls" />
+      </content-header>
+    </template>
+    <slot
+      name="content"
+      :search-text="searchText"
+      :update-search-text="updateSearchText"
+    />
+  </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,
+    },
+    hideHeader: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  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: "",
+    };
+  },
+
+  methods: {
+    updateSearchText(text) {
+      this.searchText = text;
+    },
+  },
+});
+</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,160 @@
+<template>
+  <div>
+    <editor-tabs
+      v-if="!readOnly"
+      @tabchange="activeTab = $event"
+      :active-tab="activeTab"
+    />
+    <monaco-editor
+      v-if="activeTab === 'edit'"
+      @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,
+      }"
+      data-testid="monaco-editor-edit-section"
+    />
+    <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"
+      data-testid="monaco-editor-preview-section"
+    />
+  </div>
+</template>
+
+<script>
+import { defineComponent, defineAsyncComponent, h } from "vue";
+import Preloader from "../../v2/preloader/Preloader.vue";
+import Banner from "../../v2/banner/Banner.vue";
+export default defineComponent({
+  props: {
+    modelValue: {
+      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({
+      loader: () =>
+        import("./MonacoEditor.vue").then((module) => module.default),
+
+      loadingComponent: Preloader,
+      delay: 200,
+      errorComponent: Banner,
+      timeout: 100000,
+    }),
+  },
+
+  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: {
+    modelValue: {
+      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(editor) {
+      // add event listeners
+      editor.onDidBlurEditorText(() => {
+        this.$emit("update:modelValue", this.editorContent);
+      });
+    },
+  },
+});
+</script>

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

@@ -0,0 +1,186 @@
+<template>
+  <div class="ac-preview is-active is-not-fixed">
+    <div class="ac-preview-inner">
+      <!-- preview body start  -->
+      <div
+        class="ac-preview-body mt-0 pt-20"
+        :class="{
+          'is-justify-content-center': isYamlsEmpty && !isPreviewLoading,
+        }"
+      >
+        <strong v-if="isYamlsEmpty && !isPreviewLoading">
+          No Data Available
+          <i class="pl-5 fa fa-exclamation-circle" aria-hidden="true"></i>
+        </strong>
+        <template v-else>
+          <div v-if="!isPreviewLoading && previewYamls" class="left-content">
+            <div class="ac-files ac-hscrollbar pt-0">
+              <ul v-if="!isPreviewLoading">
+                <li
+                  v-for="(previewYaml, idx) in filteredYamls"
+                  :key="previewYaml.name + idx"
+                  :class="{ 'is-active': activeKey === previewYaml.uid }"
+                  :title="previewYaml.name"
+                  data-testid="filtered-file-editor-file-name"
+                >
+                  <a @click.prevent="setActivePreview(previewYaml.uid)">
+                    <span>
+                      <img
+                        src="~@appscode/design-system-images/icons/file-icon.svg"
+                        alt=""
+                      />
+                    </span>
+                    <span>{{ previewYaml.name }}</span>
+                  </a>
+                </li>
+              </ul>
+              <sidebar-loader v-else />
+            </div>
+          </div>
+          <div class="right-content" data-testid="filtered-file-editor-content">
+            <resource-loader v-if="isPreviewLoading" />
+            <strong v-else-if="isYamlsNotSelected"
+              >Selecet a data from sidebar</strong
+            >
+            <strong v-else-if="hideValue"> *************** </strong>
+            <editor
+              v-else
+              v-model="activeFile.content"
+              :original-value="originalValue"
+              :language="activeFile.format"
+              :read-only="isEditorReadOnly"
+              :editor-height="editorHeight"
+              :show-minimap="showMinimap"
+            />
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { defineComponent, defineAsyncComponent } from "vue";
+import Preloader from "../../v2/preloader/Preloader.vue";
+import Banner from "../../v2/banner/Banner.vue";
+export default defineComponent({
+  components: {
+    Editor: defineAsyncComponent({
+      loader: () =>
+        import("../editor/Editor.vue").then((module) => module.default),
+      loadingComponent: Preloader,
+      delay: 200,
+      errorComponent: Banner,
+      timeout: 100000,
+    }),
+    ResourceLoader: defineAsyncComponent(() =>
+      import("../loaders/ResourceLoader.vue")
+    ),
+    SidebarLoader: defineAsyncComponent(() =>
+      import("../loaders/SidebarLoader.vue")
+    ),
+  },
+  props: {
+    searchText: {
+      type: String,
+      default: "",
+    },
+    toggleHideValue: {
+      type: Boolean,
+      default: true,
+    },
+    isPreviewLoading: {
+      type: Boolean,
+      default: false,
+    },
+    isEditorReadOnly: {
+      type: Boolean,
+      default: false,
+    },
+    previewYamls: {
+      type: Array,
+      default: () => {
+        [];
+      },
+    },
+    showMinimap: {
+      type: Boolean,
+      default: false,
+    },
+    editorHeight: {
+      type: Number,
+      default: 60,
+    },
+  },
+  emits: ["setActiveKey"],
+  data() {
+    return {
+      activeKey: "",
+      hideValue: "",
+    };
+  },
+  computed: {
+    activeFile() {
+      const activeFile = this.filteredYamls.find(
+        (element) => element.uid === this.activeKey
+      );
+      return activeFile || { content: "", format: "yaml" };
+    },
+    originalValue() {
+      const activeFile = this.filteredYamls.find(
+        (element) => element.uid === this.activeKey
+      );
+      return (activeFile && activeFile.initContent) || "";
+    },
+    filteredYamls() {
+      if (this.searchText) {
+        return this.previewYamls.filter(
+          (element) => JSON.stringify(element).search(this.searchText) > -1
+        );
+      } else return this.previewYamls;
+    },
+    isKeyAvailable() {
+      const val = this.previewYamls.find((element) => {
+        return element.uid === this.activeKey;
+      });
+      return val === undefined ? false : true;
+    },
+    isYamlsEmpty() {
+      return this.filteredYamls.length === 0;
+    },
+    isYamlsNotSelected() {
+      const val = this.filteredYamls.find((element) => {
+        return element.uid === this.activeKey;
+      });
+      return val === undefined;
+    },
+  },
+  methods: {
+    initActivePreview() {
+      if (!this.isKeyAvailable) {
+        this.activeKey = this.previewYamls[0].uid;
+        this.hideValue = this.activeFile.isSecret;
+        this.$emit("setActiveKey", this.activeKey);
+      }
+    },
+    setActivePreview(uid) {
+      this.activeKey = uid;
+      this.hideValue = this.activeFile.isSecret;
+      this.$emit("setActiveKey", this.activeKey);
+    },
+  },
+  watch: {
+    previewYamls: {
+      deep: true,
+      immediate: true,
+      handler(n) {
+        if (n.length) {
+          this.initActivePreview();
+        }
+      },
+    },
+    toggleHideValue(n) {
+      this.hideValue = n;
+    },
+  },
+});
+</script>