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

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: 20px;
+}
+
 // 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.151",
   "description": "A design system for Appscode websites and dashboards made using Bulma",
   "main": "main.scss",
   "scripts": {

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>