@appscode/design-system 1.0.43-alpha.146 → 1.0.43-alpha.147

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appscode/design-system",
-  "version": "1.0.43-alpha.146",
+  "version": "1.0.43-alpha.147",
   "description": "A design system for Appscode websites and dashboards made using Bulma",
   "main": "main.scss",
   "scripts": {

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

@@ -7,11 +7,11 @@
     />
     <monaco-editor
       v-if="activeTab === 'edit'"
-      ref="monacoEditor"
       @editorDidMount="onEditorMount"
       key="edit"
       :class="`vh-${editorHeight} is-clipped`"
-      v-model="editorContent"
+      :value="editorContent"
+      @change="onChange"
       :language="language"
       :options="{
         minimap: {
@@ -82,10 +82,11 @@ export default {
       default: "off",
     },
   },
+
   components: {
     EditorTabs: () => import("../tabs/EditorTabs.vue"),
     MonacoEditor: () => ({
-      component: import("vue-monaco"),
+      component: import("./MonacoEditor.vue"),
       loading: Preloader,
       delay: 200,
       error: Banner,
@@ -136,8 +137,10 @@ export default {
   },
 
   methods: {
-    onEditorMount() {
-      const editor = this.$refs.monacoEditor.getEditor();
+    onChange(e) {
+      if (typeof e === "string") this.editorContent = e;
+    },
+    onEditorMount(editor) {
       // add event listeners
       editor.onDidBlurEditorText(() => {
         this.$emit("input", this.editorContent);

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

@@ -0,0 +1,125 @@
+<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/v3/modal/Modal.vue

@@ -6,7 +6,7 @@
       v-if="showModal"
       class="ac-modal is-middle-alignment"
       :class="modifierClasses"
-      @click.self="destroyModal"
+      @click.self="onModalOutsideClick"
     >
       <div class="ac-modal-inner">
         <!-- modal header start  -->
@@ -37,7 +37,9 @@
         <!-- 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
+          class="ac-modal-footer action-footer is-flex is-align-items-center is-justify-content-space-between"
+        >
           <div>
             <slot name="modal-footer-left" />
           </div>
@@ -58,36 +60,40 @@ export default defineComponent({
   props: {
     open: {
       type: Boolean,
-      default: false,
+      default: false
     },
     title: {
       type: String,
-      default: "Modal",
+      default: "Modal"
     },
     modifierClasses: {
       type: String,
-      default: "",
+      default: ""
     },
     isCloseOptionDisabled: {
       type: Boolean,
-      default: false,
+      default: false
+    },
+    ignoreOutsideClick: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ["closemodal"],
 
   components: {
     HeaderItems: defineAsyncComponent(() =>
-      import("../../v2/header/HeaderItems.vue").then((module) => module.default)
+      import("../../v2/header/HeaderItems.vue").then(module => module.default)
     ),
     HeaderItem: defineAsyncComponent(() =>
-      import("../../v2/header/HeaderItem.vue").then((module) => module.default)
+      import("../../v2/header/HeaderItem.vue").then(module => module.default)
     ),
     Buttons: defineAsyncComponent(() =>
-      import("../../v2/button/Buttons.vue").then((module) => module.default)
+      import("../../v2/button/Buttons.vue").then(module => module.default)
     ),
     AcButton: defineAsyncComponent(() =>
-      import("../button/Button.vue").then((module) => module.default)
-    ),
+      import("../button/Button.vue").then(module => module.default)
+    )
   },
 
   data() {
@@ -95,7 +101,7 @@ export default defineComponent({
       showModal: false,
       crossIcon: import.meta.globEager(
         "/src/assets/icons/modal/close-icon.svg"
-      )["/src/assets/icons/modal/close-icon.svg"].default,
+      )["/src/assets/icons/modal/close-icon.svg"].default
     };
   },
 
@@ -108,8 +114,8 @@ export default defineComponent({
         } else {
           this.destroyModal();
         }
-      },
-    },
+      }
+    }
   },
 
   methods: {
@@ -123,13 +129,17 @@ export default defineComponent({
       this.showModal = true;
       document.addEventListener("keydown", this.onKeyDown);
     },
+    onModalOutsideClick() {
+      if (this.ignoreOutsideClick) return;
+      this.destroyModal();
+    },
     destroyModal() {
       if (this.isCloseOptionDisabled) return;
       this.showModal = false;
       document.removeEventListener("keydown", this.onKeyDown);
 
       this.$emit("closemodal", true);
-    },
-  },
+    }
+  }
 });
 </script>