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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appscode/design-system",
-  "version": "1.0.43-alpha.144",
+  "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>

package/vue-components/v3/table/MultiInfoTable.vue

@@ -0,0 +1,143 @@
+<template>
+  <table-container>
+    <table
+      class="table ac-info-table is-fullwidth"
+      :class="{ 'pl-0 pr-0': removeContentPadding }"
+    >
+      <tbody v-if="isFullTableLoaderActive">
+        <table-row v-for="i in loaderCols" :key="i">
+          <table-cell>
+            <cell-value :is-loader-active="true" />
+          </table-cell>
+          <table-cell>
+            <cell-value :is-loader-active="true" />
+          </table-cell>
+        </table-row>
+      </tbody>
+      <tbody
+        v-else
+        :class="{
+          'no-data-available has-text-centered p-10': isTableEmpty,
+          'pl-0 pr-0': removeContentPadding,
+        }"
+      >
+        <template v-if="!isTableEmpty">
+          <table-row
+            v-for="(tableHeader, idx) in tableHeaders"
+            :key="headerLabels[idx]"
+          >
+            <table-cell>
+              <slot :name="`table-cell-icon-${idx}`" />
+              {{ headerLabels[idx] }}
+            </table-cell>
+            <table-cell v-if="isLoaderActive">
+              <cell-value :is-loader-active="true" />
+            </table-cell>
+            <slot v-else :name="`slot-${idx}`" />
+          </table-row>
+        </template>
+
+        <empty-table-info v-else />
+      </tbody>
+    </table>
+
+    <!-- pagination start -->
+    <slot name="table-pagination" />
+    <!-- pagination end -->
+  </table-container>
+</template>
+
+<script>
+import { defineComponent, defineAsyncComponent } from "vue";
+
+export default defineComponent({
+  props: {
+    isLoaderActive: {
+      type: Boolean,
+      default: false,
+    },
+    isTableEmpty: {
+      type: Boolean,
+      default: true,
+    },
+    tableHeaders: {
+      type: Array,
+      default: () => [],
+    },
+    removeContentPadding: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  components: {
+    TableContainer: defineAsyncComponent(() =>
+      import("../../v2/table/TableContainer.vue").then(
+        (module) => module.default
+      )
+    ),
+    EmptyTableInfo: defineAsyncComponent(() =>
+      import("../../v2/table/EmptyTableInfo.vue").then(
+        (module) => module.default
+      )
+    ),
+    TableRow: defineAsyncComponent(() =>
+      import("./TableRow.vue").then((module) => module.default)
+    ),
+    TableCell: defineAsyncComponent(() =>
+      import("./TableCell.vue").then((module) => module.default)
+    ),
+    CellValue: defineAsyncComponent(() =>
+      import("./table-cell/CellValue.vue").then((module) => module.default)
+    ),
+  },
+
+  data() {
+    return {
+      loaderCols: 5,
+      headerSortables: [],
+    };
+  },
+
+  computed: {
+    isFullTableLoaderActive() {
+      return !this.tableHeaders.length;
+    },
+    headerLabels() {
+      return this.tableHeaders.map((th) =>
+        typeof th === "string" ? th : th?.name || "Label"
+      );
+    },
+  },
+
+  watch: {
+    tableHeaders: {
+      immediate: true,
+      handler(n) {
+        if (this.headerSortables.length === n.length) {
+          n.forEach((th, idx) => {
+            if (this.headerSortables[idx].enabled !== !!th?.sort?.enable) {
+              this.headerSortables[idx].enabled = !!th?.sort?.enable;
+              this.headerSortables[idx].mode = "";
+            }
+          });
+        } else {
+          this.headerSortables = n.map((th) => {
+            if (typeof th === "string") {
+              return {
+                enabled: false,
+                mode: "",
+              };
+            } else {
+              return {
+                enabled: !!th?.sort?.enable,
+                mode: "",
+              };
+            }
+          });
+        }
+      },
+    },
+  },
+});
+</script>

package/vue-components/v3/table/Table.vue

@@ -1,5 +1,5 @@
 <template>
-  <table-container>
+  <table-container ref="ac-table-container" @scroller="handleScroller">
     <table
       ref="ac-table"
       class="table ac-table ac-striped"
@@ -140,12 +140,10 @@ export default defineComponent({
       default: 1920,
     },
   },
-  emits: ["sort"],
+  emits: ["sort", "scroller"],
   components: {
     TableContainer: defineAsyncComponent(() =>
-      import("../../v2/table/TableContainer.vue").then(
-        (module) => module.default
-      )
+      import("./TableContainer.vue").then((module) => module.default)
     ),
     TableRow: defineAsyncComponent(() =>
       import("./TableRow.vue").then((module) => module.default)
@@ -222,7 +220,6 @@ export default defineComponent({
       },
     },
   },
-
   updated() {
     this.$nextTick(() => {
       this.onWindowResize();
@@ -230,6 +227,9 @@ export default defineComponent({
   },
 
   methods: {
+    handleScroller(value) {
+      this.$emit("scroller", value);
+    },
     onWindowResize() {
       if (this.$refs["ac-table"] && this.isDynamicWidthTable) {
         const tableWidth = this.$refs["ac-table"].clientWidth;

package/vue-components/v3/table/TableContainer.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="ac-table-container table-container" ref="tableContainer">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts">
+  import { emit } from 'process'
+  import { defineComponent, ref, onMounted, nextTick } from 'vue'
+
+  export default defineComponent({
+    emits: ['scroller'],
+
+    setup(props, { emit }) {
+      const tableContainer = ref(null)
+
+      function isScrollerShowing() {
+        return tableContainer.value.scrollWidth > tableContainer.value.clientWidth
+      }
+
+      onMounted(() => {
+        setTimeout(() => {
+          nextTick(() => {
+            emit('scroller', isScrollerShowing())
+          })
+        }, 50)
+      })
+
+      return {
+        tableContainer,
+      }
+    },
+  })
+</script>