@appscode/design-system 1.0.43-alpha.150 → 1.0.43-alpha.153

package/components/_ac-input.scss

@@ -714,6 +714,14 @@ input#captcha {
   }
 }
 
+.ac-single-switch.is-small .switch[type="checkbox"] + label,
+.buttons.are-small
+  .ac-single-switch.button.ac-button
+  .switch[type="checkbox"]
+  + label {
+  height: 19px;
+}
+
 // transparent input
 .transparent-input {
   display: flex;

package/package.json

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

package/vue-components/v2/navbar/User.vue

@@ -8,14 +8,27 @@
       </div>
     </button>
     <navbar-item-content class="navbar-dropdown-wrapper">
-      <div v-if="user.username" class="user-profile-wrapper" @mouseleave="onMouseLeave()">
+      <div
+        v-if="user.username"
+        class="user-profile-wrapper"
+        @mouseleave="onMouseLeave()"
+      >
         <div class="profile-area">
           <div class="profile-photo">
-            <img :src="user.avatar_url" alt="User Photo" class="width-50 height-50" />
+            <img
+              :src="user.avatar_url"
+              alt="User Photo"
+              class="width-50 height-50"
+            />
             <button class="camera-icon"></button>
           </div>
           <div class="profile-info" style="width: calc(100% - 60px);">
-            <p :title="user.username.toUpperCase()" class="line-break-anywhere is-ellipsis-1">{{ user.username.toUpperCase() }}</p>
+            <a
+              :href="`/${user.username}`"
+              :title="user.username.toUpperCase()"
+              class="line-break-anywhere is-ellipsis-1"
+              >{{ user.username.toUpperCase() }}</a
+            >
             <a :href="`mailto:${user.email}`"> {{ user.email }}</a>
           </div>
         </div>
@@ -26,8 +39,13 @@
           <li v-if="user.is_admin" key="site-admin">
             <a :href="`${serverDomain}/admin`">Site Administration</a>
           </li>
-          <li v-if="showAccountSwitcher" :class="`is-${dropDownStatus}`" key="switcher">
-            <a class="
+          <li
+            v-if="showAccountSwitcher"
+            :class="`is-${dropDownStatus}`"
+            key="switcher"
+          >
+            <a
+              class="
                 ac-dropdown-button
                 is-fullwidth
                 is-flex
@@ -39,13 +57,15 @@
               <span>Switch Account</span>
               <span
                 ><i
-                  :class="`fa fa-angle-${
-                    dropDownStatus === 'open' ? 'up' : 'down'
-                  }`"
+                  :class="
+                    `fa fa-angle-${dropDownStatus === 'open' ? 'up' : 'down'}`
+                  "
                 ></i
               ></span>
             </a>
-            <transition-group name="list" tag="ul"
+            <transition-group
+              name="list"
+              tag="ul"
               class="ac-vscrollbar"
               ref="dropdownItems"
               :style="{ maxHeight: dropDownSectionHeight }"
@@ -75,7 +95,11 @@
                     "
                   >
                     <div class="org-info">
-                      <strong :title="org.username" class="line-break-anywhere is-ellipsis-1">{{ org.username }}</strong>
+                      <strong
+                        :title="org.username"
+                        class="line-break-anywhere is-ellipsis-1"
+                        >{{ org.username }}</strong
+                      >
                       <p>
                         {{
                           org.isPersonalAccount
@@ -118,32 +142,32 @@ export default {
     // active user info
     user: {
       type: Object,
-      default: () => ({}),
+      default: () => ({})
     },
     serverDomain: {
       type: String,
-      default: "",
+      default: ""
     },
     showAccountSwitcher: {
       type: Boolean,
-      default: false,
+      default: false
     },
     // all available organization list including personal account
     organizations: {
       type: Array,
-      default: () => [],
-    },
+      default: () => []
+    }
   },
 
   components: {
     NavbarItem: () => import("./NavbarItem.vue"),
-    NavbarItemContent: () => import("./NavbarItemContent.vue"),
+    NavbarItemContent: () => import("./NavbarItemContent.vue")
   },
 
   computed: {
     formattedOrganizations() {
       let activeUser;
-      const filteredList = this.organizations.filter((item) => {
+      const filteredList = this.organizations.filter(item => {
         if (item.username === this.user.username) {
           activeUser = item;
         } else {
@@ -155,13 +179,13 @@ export default {
       filteredList.unshift(activeUser);
 
       return filteredList || [];
-    },
+    }
   },
 
   data() {
     return {
       dropDownStatus: "close",
-      dropDownSectionHeight: null,
+      dropDownSectionHeight: null
     };
   },
 
@@ -194,9 +218,9 @@ export default {
         } else {
           this.dropDownSectionHeight = null;
         }
-      },
-    },
-  },
+      }
+    }
+  }
 };
 </script>
 <style lang="scss" scoped>

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

@@ -3,69 +3,76 @@
 </template>
 
 <script>
-import { defineComponent, computed, toRefs } from 'vue'
-import * as monaco from 'monaco-editor'
+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, 
+    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 {};}},
+    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`
+  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'
-      }
-    })
+        "text-align": "left",
+      };
+    });
     return {
-      style
-    }
+      style,
+    };
   },
   mounted() {
-    this.initMonaco()
+    this.initMonaco();
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.editor && this.editor.dispose();
   },
   methods: {
-    initMonaco(){
-      this.$emit('editorWillMount', this.monaco)
+    initMonaco() {
+      this.$emit("editorWillMount", this.monaco);
       const { value, language, theme, options } = this;
-      this.editor = monaco.editor[this.diffEditor ? 'createDiffEditor' : 'create'](this.$el, {
+      this.editor = monaco.editor[
+        this.diffEditor ? "createDiffEditor" : "create"
+      ](this.$el, {
         value: value,
         language: language,
         theme: theme,
-        ...options
+        ...options,
       });
       this.diffEditor && this._setModel(this.value, this.original);
 
       // @event `change`
-      const editor = this._getEditor()
-      editor.onDidChangeModelContent(event => {
-        const value = editor.getValue()
+      const editor = this._getEditor();
+      editor.onDidChangeModelContent((event) => {
+        const value = editor.getValue();
         if (this.value !== value) {
-          this.$emit('change', value, event)
+          this.$emit("change", value, event);
         }
-      })
+      });
 
-      this.$emit('editorDidMount', this.editor)
+      this.$emit("editorDidMount", this.editor);
     },
     _setModel(value, original) {
       const { language } = this;
@@ -73,52 +80,52 @@ export default defineComponent({
       const modifiedModel = monaco.editor.createModel(value, language);
       this.editor.setModel({
         original: originalModel,
-        modified: modifiedModel
+        modified: modifiedModel,
       });
     },
     _setValue(value) {
       let editor = this._getEditor();
-      if(editor) return editor.setValue(value);
+      if (editor) return editor.setValue(value);
     },
     _getValue() {
       let editor = this._getEditor();
-      if(!editor) return '';
+      if (!editor) return "";
       return editor.getValue();
     },
     _getEditor() {
-      if(!this.editor) return null;
+      if (!this.editor) return null;
       return this.diffEditor ? this.editor.getModifiedEditor() : this.editor;
     },
-    _setOriginal(){
-      const { original } = this.editor.getModel()
-      original.setValue(this.original)
-    }
+    _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()
+      this._setOriginal();
     },
     language() {
-      if(!this.editor) return;
-      if(this.diffEditor){
+      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
+      } else
         monaco.editor.setModelLanguage(this.editor.getModel(), this.language);
     },
     theme() {
       monaco.editor.setTheme(this.theme);
     },
-  }
+  },
 });
 </script>

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

@@ -0,0 +1,63 @@
+<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>
+import { defineComponent, defineAsyncComponent, h } from "vue";
+
+export default defineComponent({
+  props: {
+    isContainer: {
+      type: Boolean,
+      default: false,
+    },
+    hasFooter: {
+      type: Boolean,
+      default: true,
+    },
+    reducePaddingTop: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  components: {
+    FormFooterControls: defineAsyncComponent(() =>
+      import("../../v2/form/FormFooterControl.vue").then(
+        (module) => module.default
+      )
+    ),
+  },
+});
+</script>

package/vue-components/v3/form-fields/Input.vue

@@ -1,21 +1,21 @@
 <template>
-  <input class="ac-input" v-bind="inputListeners" />
+  <input
+    class="ac-input"
+    :value="modelValue"
+    @input="$emit('update:modelValue', $event.target.value)"
+  />
 </template>
 
 <script>
 import { defineComponent } from "vue";
 
 export default defineComponent({
-  inheritAttrs: false,
-  emits: ["update:modelValue"],
-  computed: {
-    inputListeners() {
-      return Object.assign({}, this.$attrs, {
-        onInput: (event) => {
-          this.$emit("update:modelValue", event.target.value);
-        },
-      });
+  props: {
+    modelValue: {
+      type: null,
+      default: "",
     },
   },
+  emits: ["update:modelValue"],
 });
 </script>

package/vue-components/v3/modals/DeleteConfirmationModal.vue

@@ -0,0 +1,83 @@
+<template>
+  <!-- modal start  -->
+  <modal
+    :title="title"
+    modifier-classes="is-normal"
+    :open="open"
+    @closemodal="closeModal"
+  >
+    <!-- freedom content start  -->
+    <div class="action-message pt-35 pb-35 has-text-centered">
+      <h5 class="is-message">{{ message }} {{ itemName ? "" : "?" }}</h5>
+      <p class="is-description">{{ itemName }} {{ itemName ? "?" : "" }}</p>
+    </div>
+
+    <!-- freedom content end -->
+
+    <!-- modal footer start -->
+    <template #modal-footer-controls>
+      <ac-button
+        @click.stop="closeModal"
+        title="Cancel"
+        modifier-classes="is-outlined"
+      />
+      <ac-button
+        modifier-classes="is-danger"
+        :is-loader-active="isDeleteActive"
+        title="Yes"
+        @click.stop="confirm(true)"
+      />
+    </template>
+  </modal>
+  <!-- modal end  -->
+</template>
+
+<script>
+import { defineComponent, defineAsyncComponent } from "vue";
+export default defineComponent({
+  components: {
+    Modal: defineAsyncComponent(() =>
+      import("../modal/Modal.vue").then((module) => module.default)
+    ),
+    AcButton: defineAsyncComponent(() =>
+      import("../button/Button.vue").then((module) => module.default)
+    ),
+  },
+  props: {
+    open: {
+      type: Boolean,
+      default: false,
+    },
+    title: {
+      type: String,
+      default: "",
+    },
+    message: {
+      type: String,
+      default: "",
+    },
+    itemName: {
+      type: String,
+      default: "",
+    },
+    isLoading: {
+      type: Boolean,
+      default: false,
+    },
+    isDeleteActive: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ["closemodal", "delete-confirmation-modal$confirm"],
+  methods: {
+    confirm(response) {
+      this.$emit("delete-confirmation-modal$confirm", response);
+    },
+    closeModal() {
+      this.confirm(false);
+      this.$emit("closemodal", true);
+    },
+  },
+});
+</script>

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

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <button 
-      v-if="themeMode" 
+    <button
+      v-if="themeMode"
       class="button ac-nav-button"
       @click="toggleTheme"
       :title="themeModes[themeMode].displayName"
@@ -10,11 +10,11 @@
     </button>
     <div class="ac-menu-content theme-choice">
       <ul class="is-flex is-flex-direction-row is-justify-content-space-around">
-        <li 
+        <li
           v-for="theme of Object.keys(themeModes)"
           :title="themeModes[theme].displayName"
           @click="themeMode = theme"
-          :class="{'is-active': themeMode === theme}"
+          :class="{ 'is-active': themeMode === theme }"
           :key="theme"
         >
           <i :class="['fa', themeModes[theme].iconClass]" />
@@ -42,19 +42,19 @@ export default defineComponent({
         dark: {
           displayName: "Dark Theme",
           iconClass: "fa-moon-o",
-        }
-      }
+        },
+      },
     };
   },
 
-  emits: ['set:theme'],
+  emits: ["set:theme"],
 
   mounted() {
     // get theme mode from localStorage or set default one
     this.themeMode = localStorage.getItem("themeMode") || "light";
   },
 
-  destroyed() {
+  unmounted() {
     this.removeColorSchemeEventListener();
   },
 
@@ -62,19 +62,16 @@ export default defineComponent({
     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";
+      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
@@ -82,8 +79,10 @@ export default defineComponent({
       localStorage.setItem("themeMode", n);
 
       let theme = n;
-      if(n === "system") {
-        const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+      if (n === "system") {
+        const isDarkMode =
+          window.matchMedia &&
+          window.matchMedia("(prefers-color-scheme: dark)").matches;
         this.addColorSchemeEventListener();
         theme = isDarkMode ? "dark" : "light";
       } else {
@@ -95,7 +94,7 @@ export default defineComponent({
 
     // add proper css class to update the ui theme
     handleDarkThemeClass(currentTheme) {
-      if(currentTheme === "light") {
+      if (currentTheme === "light") {
         document.documentElement.classList.remove("is-dark-theme");
       } else {
         document.documentElement.classList.add("is-dark-theme");
@@ -106,23 +105,19 @@ export default defineComponent({
     addColorSchemeEventListener() {
       window
         .matchMedia("(prefers-color-scheme: dark)")
-        .addEventListener(
-          "change", this.handleSystemThemeChange
-        );
+        .addEventListener("change", this.handleSystemThemeChange);
     },
 
     // remove system theme listener event
     removeColorSchemeEventListener() {
       window
         .matchMedia("(prefers-color-scheme: dark)")
-        .removeEventListener(
-          "change", this.handleSystemThemeChange
-        );
+        .removeEventListener("change", this.handleSystemThemeChange);
     },
 
     handleSystemThemeChange() {
       this.onThemeModeChange(this.themeMode);
     },
-  }
+  },
 });
 </script>