@appscode/design-system 2.1.8 → 2.2.0

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

@@ -1,144 +0,0 @@
-<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 Preloader from "../preloader/Preloader.vue";
-import Banner from "../banner/Banner.vue";
-export default {
-  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",
-    },
-  },
-
-  components: {
-    EditorTabs: () => import("../tabs/EditorTabs.vue"),
-    MonacoEditor: () => ({
-      component: import("./MonacoEditor.vue"),
-      loading: Preloader,
-      delay: 200,
-      error: 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: {
-    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(editor) {
-      // add event listeners
-      editor.onDidBlurEditorText(() => {
-        this.$emit("input", this.editorContent);
-      });
-    },
-  },
-};
-</script>

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

@@ -1,177 +0,0 @@
-<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-15 pl-20">
-        <div v-if="isPreviewLoading || (!isPreviewLoading && previewYamls)" class="left-content">
-          <div class="ac-files ac-hscrollbar ac-vscrollbar pt-0">
-            <ul v-if="!isPreviewLoading">
-              <li
-                v-for="(previewYaml, idx) in filteredYamls"
-                :key="previewYaml.name + idx"
-                :class="{ 'is-active': activeKey === previewYaml.uid }"
-                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
-              :primaryLoaderColor="primaryLoaderColor"
-              :secondaryLoaderColor="secondaryLoaderColor"
-            />
-          </div>
-        </div>
-        <div class="right-content" data-testid="filtered-file-editor-content">
-          <div class="right-content">
-            <resource-loader
-              v-if="isPreviewLoading"
-              :primaryLoaderColor="primaryLoaderColor"
-              :secondaryLoaderColor="secondaryLoaderColor"
-            />
-            <editor
-              v-else-if="!isPreviewLoading && !hideValue"
-              v-model="activeFile.content"
-              :original-value="originalValue"
-              :language="activeFile.format"
-              :read-only="isEditorReadOnly"
-              :editor-height="editorHeight"
-              :show-minimap="showMinimap"
-              :editor-theme="editorTheme"
-              :key="editorTheme"
-            />
-            <span v-else> *************** </span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import Banner from "../banner/Banner.vue";
-import Preloader from "../preloader/Preloader.vue";
-export default {
-  components: {
-    Editor: () => ({
-      component: import("./Editor.vue"),
-      loading: Preloader,
-      delay: 200,
-      error: Banner,
-      timeout: 100000,
-    }),
-    ResourceLoader: () => import("./../loaders/ResourceLoader.vue"),
-    SidebarLoader: () => 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,
-    },
-    loaderColor: {
-      type: Object,
-      default: () => {
-        return {};
-      },
-    },
-    theme: {
-      type: String,
-      default: "light",
-    },
-  },
-  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) || "";
-    },
-    editorTheme() {
-      return this.theme === "dark" ? "vs-dark" : "vs";
-    },
-    primaryLoaderColor() {
-      return this.loaderColor.primaryLoaderColor;
-    },
-    secondaryLoaderColor() {
-      return this.loaderColor.secondaryLoaderColor;
-    },
-    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;
-    },
-  },
-  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>

package/vue-components/v2/editor/MonacoEditor.vue

@@ -1,118 +0,0 @@
-<template>
-  <div class="monaco-editor-vue2" :style="style"></div>
-</template>
-
-<script>
-import * as monaco from "monaco-editor";
-
-export default {
-  name: "MonacoEditor",
-  props: {
-    diffEditor: { type: Boolean, default: false },
-    width: { type: [String, Number], default: "100%" },
-    height: { type: [String, Number], default: "100%" },
-    original: String,
-    value: String,
-    language: { type: String, default: "javascript" },
-    theme: { type: String, default: "vs" },
-    options: {
-      type: Object,
-      default() {
-        return {};
-      },
-    },
-  },
-  computed: {
-    style() {
-      const fixedWidth = this.width.toString().includes("%") ? this.width : `${this.width}px`;
-      const fixedHeight = this.height.toString().includes("%") ? this.height : `${this.height}px`;
-      return {
-        width: fixedWidth,
-        height: fixedHeight,
-        "text-align": "left",
-      };
-    },
-  },
-  mounted() {
-    this.initMonaco();
-  },
-  beforeDestroy() {
-    this.editor && this.editor.dispose();
-  },
-  methods: {
-    initMonaco() {
-      this.$emit("editorWillMount", this.monaco);
-      const { value, language, theme, options } = this;
-      this.editor = monaco.editor[this.diffEditor ? "createDiffEditor" : "create"](this.$el, {
-        value: value,
-        language: language,
-        theme: theme,
-        ...options,
-      });
-      this.diffEditor && this._setModel(this.value, this.original);
-
-      // @event `change`
-      const editor = this._getEditor();
-      editor.onDidChangeModelContent((event) => {
-        const value = editor.getValue();
-        if (this.value !== value) {
-          this.$emit("change", value, event);
-        }
-      });
-
-      this.$emit("editorDidMount", this.editor);
-    },
-    _setModel(value, original) {
-      const { language } = this;
-      const originalModel = monaco.editor.createModel(original, language);
-      const modifiedModel = monaco.editor.createModel(value, language);
-      this.editor.setModel({
-        original: originalModel,
-        modified: modifiedModel,
-      });
-    },
-    _setValue(value) {
-      let editor = this._getEditor();
-      if (editor) return editor.setValue(value);
-    },
-    _getValue() {
-      let editor = this._getEditor();
-      if (!editor) return "";
-      return editor.getValue();
-    },
-    _getEditor() {
-      if (!this.editor) return null;
-      return this.diffEditor ? this.editor.getModifiedEditor() : this.editor;
-    },
-    _setOriginal() {
-      const { original } = this.editor.getModel();
-      original.setValue(this.original);
-    },
-  },
-  watch: {
-    options: {
-      deep: true,
-      handler(options) {
-        this.editor.updateOptions(options);
-      },
-    },
-    value() {
-      this.value !== this._getValue() && this._setValue(this.value);
-    },
-    original() {
-      this._setOriginal();
-    },
-    language() {
-      if (!this.editor) return;
-      if (this.diffEditor) {
-        const { original, modified } = this.editor.getModel();
-        monaco.editor.setModelLanguage(original, this.language);
-        monaco.editor.setModelLanguage(modified, this.language);
-      } else monaco.editor.setModelLanguage(this.editor.getModel(), this.language);
-    },
-    theme() {
-      monaco.editor.setTheme(this.theme);
-    },
-  },
-};
-</script>

package/vue-components/v2/editor/ResourceKeyValueEditor.vue

@@ -1,199 +0,0 @@
-<template>
-  <content-table :table-title="title" :searchable="isSearchable" :hide-header="hideHeader">
-    <template #content-controls>
-      <header-item v-if="showHideBtn">
-        <ac-button
-          modifier-classes="is-square is-primary"
-          :icon-class="toggleHideValue ? 'eye-slash' : 'eye'"
-          @click.prevent="toggleHideValue = !toggleHideValue"
-        />
-      </header-item>
-      <header-item v-if="showCopyBtn">
-        <ac-button
-          modifier-classes="is-square is-primary"
-          icon-class="copy"
-          v-clipboard:copy="decode(activeFile)"
-          v-clipboard:success="onCopy"
-          v-clipboard:error="onError"
-        />
-      </header-item>
-      <header-item v-if="showDownloadBtn">
-        <download-btn :file-data="decode(activeFile)" :file-name="activeFile.name" />
-      </header-item>
-      <header-item v-if="showUpdateBtn && !isEditorReadOnly">
-        <ac-button
-          modifier-classes="is-square is-primary"
-          icon-class="floppy-o"
-          :class="{ 'is-loading': isUpdateActive }"
-          @click.prevent="$emit('updateData', activeKey, activeFile)"
-        />
-      </header-item>
-      <header-item v-if="showDeleteBtn">
-        <ac-button
-          modifier-classes="is-square is-danger"
-          icon-class="trash"
-          @click.prevent="showDeleteDataModal = true"
-        />
-        <delete-confirmation-modal
-          title="Delete Resource"
-          message="Do you want to delete "
-          :item-name="activeFile.name"
-          :open="showDeleteDataModal"
-          :is-delete-active="deleteModalStatus === 'loading'"
-          @delete-confirmation-modal$confirm="confirmDelete"
-          @closemodal="showDeleteDataModal = false"
-        />
-      </header-item>
-      <slot name="content-action" />
-    </template>
-    <template #content="{ searchText }">
-      <filtered-file-editor
-        :search-text="searchText"
-        :toggle-hide-value="toggleHideValue"
-        :is-preview-loading="isPreviewLoading"
-        :is-editor-read-only="isEditorReadOnly"
-        :preview-yamls="previewYamls"
-        :show-minimap="showMinimap"
-        :editor-height="editorHeight"
-        :loader-color="loaderColor"
-        :theme="theme"
-        :key="theme"
-        @setActiveKey="setActiveKey"
-      />
-    </template>
-  </content-table>
-</template>
-<script>
-export default {
-  components: {
-    AcButton: () => import("./../button/Button.vue"),
-    Editor: () => import("./../editor/Editor.vue"),
-    ContentTable: () => import("./../content/ContentTable.vue"),
-    HeaderItem: () => import("./../header/HeaderItem.vue"),
-    DownloadBtn: () => import("./../button/DownloadBtn.vue"),
-    DeleteConfirmationModal: () => import("./../modals/DeleteConfirmationModal.vue"),
-    FilteredFileEditor: () => import("./FilteredFileEditor.vue"),
-  },
-  props: {
-    title: {
-      type: String,
-      default: "Title",
-    },
-    isSearchable: {
-      type: Boolean,
-      default: false,
-    },
-    isPreviewLoading: {
-      type: Boolean,
-      default: false,
-    },
-    isEditorReadOnly: {
-      type: Boolean,
-      default: false,
-    },
-    previewYamls: {
-      type: Array,
-      default: () => {
-        [];
-      },
-    },
-    visibleBtn: {
-      type: Object,
-      default: () => {
-        return {};
-      },
-    },
-    showMinimap: {
-      type: Boolean,
-      default: false,
-    },
-    isUpdateActive: {
-      type: Boolean,
-      default: false,
-    },
-    deleteModalStatus: {
-      type: String,
-      default: "closed",
-    },
-    editorHeight: {
-      type: Number,
-      default: 60,
-    },
-    hideHeader: {
-      type: Boolean,
-      default: false,
-    },
-    loaderColor: {
-      type: Object,
-      default: () => {
-        return {};
-      },
-    },
-    theme: {
-      type: String,
-      default: "light",
-    },
-  },
-  data() {
-    return {
-      activeKey: 0,
-      toggleHideValue: "",
-      showDeleteDataModal: false,
-    };
-  },
-  computed: {
-    activeFile() {
-      const activeFile = this.previewYamls.find((element) => element.uid === this.activeKey);
-      return activeFile || { content: "", format: "yaml" };
-    },
-    showCopyBtn() {
-      if (this.visibleBtn.showCopyBtn) return true;
-      else return false;
-    },
-    showHideBtn() {
-      if (this.visibleBtn.showHideBtn) return true;
-      else return false;
-    },
-    showUpdateBtn() {
-      if (this.visibleBtn.showUpdateBtn) return true;
-      else return false;
-    },
-    showDownloadBtn() {
-      if (this.visibleBtn.showDownloadBtn) return true;
-      else return false;
-    },
-    showDeleteBtn() {
-      if (this.visibleBtn.showDeleteBtn) return true;
-      else return false;
-    },
-  },
-  methods: {
-    onCopy() {
-      this.$toasted.global.success("Value copied successfully").goAway(1000);
-    },
-    onError() {
-      this.$toasted.global.error("Copying failed").goAway(1000);
-    },
-    decode(str) {
-      if (str) return str.content;
-      else return "";
-    },
-    encode(str) {
-      if (str) return str.content;
-      else return "";
-    },
-    confirmDelete(flag) {
-      if (flag) this.$emit("deleteResource", this.activeKey);
-    },
-    setActiveKey(key) {
-      this.activeKey = key;
-      this.toggleHideValue = this.activeFile.isSecret;
-    },
-  },
-  watch: {
-    deleteModalStatus(n) {
-      if (n === "closed") this.showDeleteDataModal = false;
-    },
-  },
-};
-</script>

package/vue-components/v2/form/Form.vue

@@ -1,54 +0,0 @@
-<template>
-  <div class="form-wrapper">
-    <div
-      :class="{
-        'pt-20': !reducePaddingTop,
-        'pt-10': reducePaddingTop,
-        'pl-20': !isContainer,
-        'form-content': !isContainer,
-        container: isContainer,
-      }"
-    >
-      <slot />
-    </div>
-    <div class="form-footer b-t-1 pt-10 pb-10 pl-20 pr-20 mt-15" v-if="hasFooter">
-      <div
-        class="ac-vcentered"
-        :class="{
-          'form-content': !isContainer,
-          container: isContainer,
-        }"
-      >
-        <form-footer-controls>
-          <slot name="form-left-controls" />
-        </form-footer-controls>
-        <form-footer-controls>
-          <slot name="form-right-controls" />
-        </form-footer-controls>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    isContainer: {
-      type: Boolean,
-      default: false,
-    },
-    hasFooter: {
-      type: Boolean,
-      default: true,
-    },
-    reducePaddingTop: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  components: {
-    FormFooterControls: () => import("./FormFooterControls.vue"),
-  },
-};
-</script>

package/vue-components/v2/form/FormFooterControl.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="form-footer-control">
-    <slot />
-  </div>
-</template>

package/vue-components/v2/form/FormFooterControls.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="form-footer-controls is-flex">
-    <slot />
-  </div>
-</template>