@appscode/design-system 1.0.43-alpha.14 → 1.0.43-alpha.142

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

@@ -7,7 +7,6 @@
     />
     <monaco-editor
       v-if="activeTab === 'edit'"
-      ref="monacoEditor"
       @editorDidMount="onEditorMount"
       key="edit"
       :class="`vh-${editorHeight} is-clipped`"
@@ -16,10 +15,12 @@
       :language="language"
       :options="{
         minimap: {
-          enabled: calcShowMinimap,
+          enabled: calcShowMinimap
         },
+        theme: theme,
         readOnly: readOnly,
-        scrollBeyondLastLine: false,
+        wordWrap: wordWrap,
+        scrollBeyondLastLine: false
       }"
     />
     <monaco-editor
@@ -30,10 +31,12 @@
       :language="language"
       :options="{
         minimap: {
-          enabled: calcShowMinimap,
+          enabled: calcShowMinimap
         },
+        theme: theme,
         readOnly: true,
-        scrollBeyondLastLine: false,
+        wordWrap: wordWrap,
+        scrollBeyondLastLine: false
       }"
       :original="originalEditorContent"
       :diff-editor="true"
@@ -43,55 +46,65 @@
 
 <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: {
-    value: {
+    modelValue: {
       type: String,
-      default: "",
+      default: ""
     },
     originalValue: {
       type: String,
-      default: "",
+      default: ""
     },
     readOnly: {
       type: Boolean,
-      default: false,
+      default: false
     },
     language: {
       type: String,
-      default: "yaml",
+      default: "yaml"
     },
     showMinimap: {
       type: Boolean,
-      default: true,
+      default: true
     },
     editorHeight: {
       type: Number,
-      default: 40,
+      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;
-      })
+      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: 20000
+    })
   },
 
   data() {
     return {
       activeTab: "edit",
       editorContent: "",
-      originalEditorContent: "",
+      originalEditorContent: ""
     };
   },
 
@@ -100,16 +113,24 @@ export default defineComponent({
       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: {
+    modelValue: {
       immediate: true,
       handler(n) {
         if (this.editorContent !== n) {
           this.editorContent = n;
         }
-      },
+      }
     },
     originalValue: {
       immediate: true,
@@ -117,21 +138,20 @@ export default defineComponent({
         if (this.originalEditorContent !== n) {
           this.originalEditorContent = n;
         }
-      },
-    },
+      }
+    }
   },
 
   methods: {
     onChange(e) {
       if (typeof e === "string") this.editorContent = e;
     },
-    onEditorMount() {
-      const editor = this.$refs.monacoEditor.getEditor();
+    onEditorMount(editor) {
       // add event listeners
       editor.onDidBlurEditorText(() => {
         this.$emit("update:modelValue", this.editorContent);
       });
-    },
-  },
+    }
+  }
 });
 </script>

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

@@ -0,0 +1,166 @@
+<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 pt-0">
+            <ul v-if="!isPreviewLoading">
+              <li
+                v-for="(previewYaml, idx) in filteredYamls"
+                :key="previewYaml.name + idx"
+                :class="{ 'is-active': activeKey === previewYaml.uid }"
+              >
+                <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">
+          <div class="right-content">
+            <resource-loader v-if="isPreviewLoading" />
+            <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"
+            />
+            <span v-else> *************** </span>
+          </div>
+        </div>
+      </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: 20000
+    }),
+    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;
+    }
+  },
+  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/v3/editor/MonacoEditor.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="monaco-editor-vue3" :style="style"></div>
+</template>
+
+<script>
+import { defineComponent, computed, toRefs } from 'vue'
+import * as monaco from 'monaco-editor'
+
+export default defineComponent({
+  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 {};}},
+  },
+  emits: [
+    'editorWillMount',
+    'editorDidMount',
+    'change'
+  ],
+  setup(props){
+    const { width, height } = toRefs(props)
+    const style = computed(()=>{
+      const fixedWidth = width.value.toString().includes('%') ? width.value : `${width.value}px`
+      const fixedHeight = height.value.toString().includes('%')? height.value : `${height.value}px`
+      return {
+        width: fixedWidth,
+        height: fixedHeight,
+        'text-align': 'left'
+      }
+    })
+    return {
+      style
+    }
+  },
+  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/v3/editor/ResourceKeyValueEditor.vue

@@ -0,0 +1,124 @@
+<template>
+  <content-table
+    :table-title="title"
+    :searchable="isSearchable"
+    :hide-header="hideHeader"
+  >
+    <template #content-right-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>
+      <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"
+        @setActiveKey="setActiveKey"
+      />
+    </template>
+  </content-table>
+</template>
+<script>
+import { defineComponent, defineAsyncComponent } from "vue";
+export default defineComponent({
+  components: {
+    AcButton: defineAsyncComponent(() => import("../button/Button.vue")),
+    ContentTable: defineAsyncComponent(() =>
+      import("../content/ContentTable.vue")
+    ),
+    HeaderItem: defineAsyncComponent(() => import("../header/HeaderItem.vue")),
+    FilteredFileEditor: defineAsyncComponent(() =>
+      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: () => {
+        [];
+      }
+    },
+    showHideBtn: {
+      type: Boolean,
+      default: false,
+    },
+    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
+    }
+  },
+  emits: ["activeKey"],
+  data() {
+    return {
+      activeKey: "",
+      toggleHideValue: "",
+      showDeleteDataModal: false
+    };
+  },
+  computed: {
+    activeFile() {
+      const activeFile = this.previewYamls.find(
+        element => element.uid === this.activeKey
+      );
+      return activeFile || { content: "", format: "yaml" };
+    },
+  },
+  methods: {
+    setActiveKey(key) {
+      this.activeKey = key;
+      this.toggleHideValue = this.activeFile.isSecret;
+    }
+  },
+  watch: {
+    activeKey:{
+      immediate: true,
+      handler(n){
+        this.$emit("activeKey",this.activeKey);
+      }
+    }
+    
+  }
+});
+</script>

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

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

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

@@ -0,0 +1,5 @@
+<template>
+  <div class="header-items is-flex is-align-items-center">
+    <slot />
+  </div>
+</template>

package/vue-components/v3/loaders/ResourceLoader.vue

@@ -0,0 +1,83 @@
+<template>
+  <div>
+    <content-loader>
+      <rect x="21" y="6" rx="3" ry="3" width="42" height="3" />
+      <rect x="69" y="6" rx="3" ry="3" width="39" height="3" />
+      <rect x="114" y="6" rx="3" ry="3" width="24" height="3" />
+
+      <rect x="39" y="12" rx="3" ry="3" width="24" height="3" />
+      <rect x="69" y="12" rx="3" ry="3" width="45" height="3" />
+      <rect x="120" y="12" rx="3" ry="3" width="12" height="3" />
+
+      <rect x="39" y="18" rx="3" ry="3" width="30" height="3" />
+      <rect x="75" y="18" rx="3" ry="3" width="60" height="3" />
+
+      <rect x="21" y="27" rx="3" ry="3" width="42" height="3" />
+      <rect x="69" y="27" rx="3" ry="3" width="39" height="3" />
+      <rect x="114" y="27" rx="3" ry="3" width="24" height="3" />
+
+      <rect x="39" y="33" rx="3" ry="3" width="24" height="3" />
+      <rect x="69" y="33" rx="3" ry="3" width="45" height="3" />
+      <rect x="120" y="33" rx="3" ry="3" width="12" height="3" />
+
+      <rect x="39" y="39" rx="3" ry="3" width="30" height="3" />
+      <rect x="75" y="39" rx="3" ry="3" width="60" height="3" />
+
+      <rect x="21" y="48" rx="3" ry="3" width="42" height="3" />
+      <rect x="69" y="48" rx="3" ry="3" width="39" height="3" />
+      <rect x="114" y="48" rx="3" ry="3" width="24" height="3" />
+
+      <rect x="39" y="54" rx="3" ry="3" width="24" height="3" />
+      <rect x="69" y="54" rx="3" ry="3" width="45" height="3" />
+      <rect x="120" y="54" rx="3" ry="3" width="12" height="3" />
+
+      <rect x="39" y="60" rx="3" ry="3" width="30" height="3" />
+      <rect x="75" y="60" rx="3" ry="3" width="60" height="3" />
+
+      <rect x="21" y="69" rx="3" ry="3" width="42" height="3" />
+      <rect x="69" y="69" rx="3" ry="3" width="39" height="3" />
+      <rect x="114" y="69" rx="3" ry="3" width="24" height="3" />
+
+      <rect x="39" y="75" rx="3" ry="3" width="24" height="3" />
+      <rect x="69" y="75" rx="3" ry="3" width="45" height="3" />
+      <rect x="120" y="75" rx="3" ry="3" width="12" height="3" />
+
+      <rect x="39" y="81" rx="3" ry="3" width="30" height="3" />
+      <rect x="75" y="81" rx="3" ry="3" width="60" height="3" />
+
+      <rect x="21" y="90" rx="3" ry="3" width="42" height="3" />
+      <rect x="69" y="90" rx="3" ry="3" width="39" height="3" />
+      <rect x="114" y="90" rx="3" ry="3" width="24" height="3" />
+
+      <rect x="39" y="96" rx="3" ry="3" width="24" height="3" />
+      <rect x="69" y="96" rx="3" ry="3" width="45" height="3" />
+      <rect x="120" y="96" rx="3" ry="3" width="12" height="3" />
+
+      <rect x="39" y="102" rx="3" ry="3" width="30" height="3" />
+      <rect x="75" y="102" rx="3" ry="3" width="60" height="3" />
+
+      <rect x="21" y="111" rx="3" ry="3" width="42" height="3" />
+      <rect x="69" y="111" rx="3" ry="3" width="39" height="3" />
+      <rect x="114" y="111" rx="3" ry="3" width="24" height="3" />
+
+      <rect x="39" y="117" rx="3" ry="3" width="24" height="3" />
+      <rect x="69" y="117" rx="3" ry="3" width="45" height="3" />
+      <rect x="120" y="117" rx="3" ry="3" width="12" height="3" />
+
+      <rect x="39" y="123" rx="3" ry="3" width="30" height="3" />
+      <rect x="75" y="123" rx="3" ry="3" width="60" height="3" />
+    </content-loader>
+  </div>
+</template>
+
+<script>
+  import { defineAsyncComponent, defineComponent } from 'vue'
+  export default defineComponent({
+    name: 'LoaderElement',
+    components: {
+      ContentLoader: defineAsyncComponent(() =>
+        import('vue-content-loader').then((module) => module.ContentLoader)
+      ),
+    },
+  })
+</script>