@appscode/design-system 1.0.43-alpha.7 → 1.0.43-alpha.73

package/vue-components/v3/dropdown/DropdownMenu.vue

@@ -57,9 +57,9 @@ export default defineComponent({
 
     // attach click event listener on window, and close the dropdown
     function deactivateDropdown(e: Event) {
-      e.preventDefault();
       const { target } = e;
       if (
+        isDropdownActive.value &&
         dropdown.value &&
         dropdown.value !== target &&
         !dropdown.value.contains(target as Node)

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

@@ -16,10 +16,11 @@
       :language="language"
       :options="{
         minimap: {
-          enabled: calcShowMinimap,
+          enabled: calcShowMinimap
         },
+        theme: theme,
         readOnly: readOnly,
-        scrollBeyondLastLine: false,
+        scrollBeyondLastLine: false
       }"
     />
     <monaco-editor
@@ -30,10 +31,11 @@
       :language="language"
       :options="{
         minimap: {
-          enabled: calcShowMinimap,
+          enabled: calcShowMinimap
         },
+        theme: theme,
         readOnly: true,
-        scrollBeyondLastLine: false,
+        scrollBeyondLastLine: false
       }"
       :original="originalEditorContent"
       :diff-editor="true"
@@ -47,51 +49,55 @@ export default defineComponent({
   props: {
     value: {
       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: ""
+    }
   },
 
   emits: ["update:modelValue"],
 
   components: {
     EditorTabs: defineAsyncComponent(() =>
-      import("../tabs/EditorTabs.vue").then((module) => module.default)
+      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) => {
+      import("vue-monaco").then(module => {
         module.default.render = () => h("div");
         return module.default;
       })
-    ),
+    )
   },
 
   data() {
     return {
       activeTab: "edit",
       editorContent: "",
-      originalEditorContent: "",
+      originalEditorContent: ""
     };
   },
 
@@ -100,6 +106,14 @@ 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: {
@@ -109,7 +123,7 @@ export default defineComponent({
         if (this.editorContent !== n) {
           this.editorContent = n;
         }
-      },
+      }
     },
     originalValue: {
       immediate: true,
@@ -117,8 +131,8 @@ export default defineComponent({
         if (this.originalEditorContent !== n) {
           this.originalEditorContent = n;
         }
-      },
-    },
+      }
+    }
   },
 
   methods: {
@@ -131,7 +145,7 @@ export default defineComponent({
       editor.onDidBlurEditorText(() => {
         this.$emit("update:modelValue", this.editorContent);
       });
-    },
-  },
+    }
+  }
 });
 </script>

package/vue-components/v3/navbar/Appdrawer.vue

@@ -1,10 +1,13 @@
 <template>
-  <div class="app-drawer-wrapper">
-    <div class="drawer-icon">
+  <div class="app-drawer-wrapper is-flex">
+    <div
+      class="drawer-icon  is-flex is-justify-content-center is-align-items-center"
+    >
       <svg
         class="gb_We"
         focusable="false"
         viewBox="0 0 24 24"
+        style="width: 22px;margin-top: 2px;"
         :style="{ fill: 'white' }"
       >
         <path
@@ -46,13 +49,15 @@ export default defineComponent({
   props: {
     apps: {
       type: Array,
-      default: () => [],
-    },
+      default: () => []
+    }
   },
   components: {
     NavbarItemContent: defineAsyncComponent(() =>
-      import("../../v2/navbar/NavbarItemContent.vue").then((module) => module.default)
-    ),
-  },
+      import("../../v2/navbar/NavbarItemContent.vue").then(
+        module => module.default
+      )
+    )
+  }
 });
 </script>

package/vue-components/v3/navbar/ThemeMode.vue

@@ -0,0 +1,128 @@
+<template>
+  <div>
+    <button 
+      v-if="themeMode" 
+      class="button ac-nav-button"
+      @click="toggleTheme"
+      :title="themeModes[themeMode].displayName"
+    >
+      <i :class="`fa ${themeModes[themeMode].iconClass} width-15`" />
+    </button>
+    <div class="ac-menu-content theme-choice">
+      <ul class="is-flex is-flex-direction-row is-justify-content-space-around">
+        <li 
+          v-for="theme of Object.keys(themeModes)"
+          :title="themeModes[theme].displayName"
+          @click="themeMode = theme"
+          :class="{'is-active': themeMode === theme}"
+          :key="theme"
+        >
+          <i :class="['fa', themeModes[theme].iconClass]" />
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+<script>
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  data() {
+    return {
+      themeMode: "",
+      themeModes: {
+        system: {
+          displayName: "System Theme",
+          iconClass: "fa-desktop",
+        },
+        light: {
+          displayName: "Light Theme",
+          iconClass: "fa-sun-o",
+        },
+        dark: {
+          displayName: "Dark Theme",
+          iconClass: "fa-moon-o",
+        }
+      }
+    };
+  },
+
+  emits: ['set:theme'],
+
+  mounted() {
+    // get theme mode from localStorage or set default one
+    this.themeMode = localStorage.getItem("themeMode") || "light";
+  },
+
+  destroyed() {
+    this.removeColorSchemeEventListener();
+  },
+
+  watch: {
+    themeMode: {
+      handler(n) {
+        this.onThemeModeChange(n);
+      }
+    }
+  },
+
+  methods: {
+    // handle theme mode button click
+    toggleTheme() {
+      if(this.themeMode === "light")
+        this.themeMode = "dark";
+      else if(this.themeMode === "dark")
+        this.themeMode = "system";
+      else if(this.themeMode === "system")
+        this.themeMode = "light";
+    },
+
+    // triggered when theme mode is updated
+    onThemeModeChange(n) {
+      localStorage.setItem("themeMode", n);
+
+      let theme = n;
+      if(n === "system") {
+        const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+        this.addColorSchemeEventListener();
+        theme = isDarkMode ? "dark" : "light";
+      } else {
+        this.removeColorSchemeEventListener();
+      }
+      this.$emit("set:theme", theme);
+      this.handleDarkThemeClass(theme);
+    },
+
+    // add proper css class to update the ui theme
+    handleDarkThemeClass(currentTheme) {
+      if(currentTheme === "light") {
+        document.documentElement.classList.remove("is-dark-theme");
+      } else {
+        document.documentElement.classList.add("is-dark-theme");
+      }
+    },
+
+    // add system theme listener event
+    addColorSchemeEventListener() {
+      window
+        .matchMedia("(prefers-color-scheme: dark)")
+        .addEventListener(
+          "change", this.handleSystemThemeChange
+        );
+    },
+
+    // remove system theme listener event
+    removeColorSchemeEventListener() {
+      window
+        .matchMedia("(prefers-color-scheme: dark)")
+        .removeEventListener(
+          "change", this.handleSystemThemeChange
+        );
+    },
+
+    handleSystemThemeChange() {
+      this.onThemeModeChange(this.themeMode);
+    },
+  }
+});
+</script>

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

@@ -6,7 +6,7 @@
     custom
     v-slot="{ navigate }"
   >
-    <tr @click="navigate" v-bind="$attrs">
+    <tr class="is-link" @click="navigate" v-bind="$attrs">
       <slot />
       <fake-table-cell
         v-if="fakeCellWidth > 0"

package/vue-components/v3/table/table-cell/CellValue.vue

@@ -4,6 +4,8 @@
       :view-box="`0 0 ${computedCellWidth || 300} 10`"
       :speed="2"
       :key="computedCellWidth"
+      :primaryColor="primaryColor"
+      :secondaryColor="secondaryColor"
     />
   </div>
   <div v-else class="haha" ref="cellDiv">
@@ -29,6 +31,7 @@
 
 <script>
 import { defineComponent, defineAsyncComponent } from "vue";
+import { loaderLightThemePrimaryColor, loaderDarkThemePrimaryColor, loaderLightThemeSecondaryColor, loaderDarkThemeSecondaryColor } from "@appscode/design-system/plugins/theme";
 
 export default defineComponent({
   props: {
@@ -67,6 +70,12 @@ export default defineComponent({
     maxCharacterLength() {
       return Math.ceil(this.computedCellWidth / 8);
     },
+    primaryColor() {
+      return document.documentElement.classList.contains("is-dark-theme") ? loaderDarkThemePrimaryColor : loaderLightThemePrimaryColor;
+    },
+    secondaryColor() {
+      return document.documentElement.classList.contains("is-dark-theme") ? loaderDarkThemeSecondaryColor : loaderLightThemeSecondaryColor;
+    }
   },
 
   data() {

package/vue-components/v3/tabs/EditorTabs.vue

@@ -1,5 +1,5 @@
 <template>
-  <tabs-body class="mt-20">
+  <tabs-body class="mt-10">
     <tabs class="is-line">
       <tab-item :is-active="activeTab === 'edit'">
         <a @click.prevent="$emit('tabchange', 'edit')">Edit</a>