@appscode/design-system 2.2.63 → 2.2.65

package/package.json

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

package/vue-components/styles/components/header/_header.scss

@@ -3,5 +3,5 @@
   border-bottom: 1px solid $color-border;
   position: sticky;
   background: $white-100;
-  z-index: 99;
+  z-index: 999;
 }

package/vue-components/styles/components/navbar/_menu-content.scss

@@ -71,7 +71,9 @@
     visibility: hidden;
     transition: 0.3s ease-in;
     width: 260px;
-    box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0px 0 1px rgba(10, 10, 10, 0.02);
+    box-shadow:
+      0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1),
+      0 0px 0 1px rgba(10, 10, 10, 0.02);
 
     &.quick-access {
       background-color: $white-100;
@@ -413,7 +415,7 @@
     &.navbar-dropdown-wrapper {
       position: absolute;
       border-radius: 4px;
-      z-index: 99;
+      z-index: 9999;
       right: 0px;
       top: 40px;
       display: block;

package/vue-components/v3/modal/DeleteModal.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { defineAsyncComponent } from "vue";
+import DialogModal from "./DialogModal.vue";
+import AcButton from "./../button/Button.vue";
 
 interface Props {
   title?: string;
@@ -23,24 +24,25 @@ withDefaults(defineProps<Props>(), {
   hideActionFooter: false,
 });
 
-defineEmits(["onDelete"]);
+const emit = defineEmits(["onDelete", "onCloseModal"]);
 
 const open = defineModel({ type: Boolean });
 
-const Modal = defineAsyncComponent(() => import("./DialogModal.vue"));
-const AcButton = defineAsyncComponent(() => import("./../button/Button.vue"));
+function onClose() {
+  open.value = false;
+  emit("onCloseModal");
+}
 </script>
 
 <template>
-  <!-- modal start  -->
-
-  <modal
+  <dialog-modal
     v-model="open"
     :title="title"
     :class="modifierClasses"
     :hide-action-footer="hideActionFooter"
     :disable-modal-close="disableModalClose"
     :ignore-outside-click="ignoreOutsideClick"
+    @onCloseModal="$emit('onCloseModal')"
   >
     <!-- freedom content start  -->
     <div class="action-message pt-35 pb-35 has-text-centered">
@@ -54,20 +56,19 @@ const AcButton = defineAsyncComponent(() => import("./../button/Button.vue"));
     <!-- modal footer start -->
     <template #modal-footer-controls>
       <ac-button
-        @click.stop="open = false"
         title="Cancel"
         modifier-classes="is-outlined"
-        :disabled="isDeleteActive || disableModalClose"
         data-testid="delete-confirmation-modal-close-button"
+        :disabled="isDeleteActive || disableModalClose"
+        @click.stop="onClose"
       />
       <ac-button
         title="Yes"
         modifier-classes="is-danger"
+        data-testid="delete-confirmation-modal-confirm-button"
         :is-loader-active="isDeleteActive"
         @click.stop="$emit('onDelete', itemName)"
-        data-testid="delete-confirmation-modal-confirm-button"
       />
     </template>
-  </modal>
-  <!-- modal end  -->
+  </dialog-modal>
 </template>

package/vue-components/v3/modal/DialogModal.vue

@@ -21,6 +21,8 @@ const dialogModal = ref<HTMLDialogElement | null>(null);
 
 const model = defineModel({ type: Boolean });
 
+const emit = defineEmits(["onCloseModal"]);
+
 const onKeyDown = (e: KeyboardEvent) => {
   if (model.value && e.keyCode === 27) {
     destroyModal();
@@ -36,6 +38,7 @@ const destroyModal = () => {
   if (props.disableModalClose) return;
   model.value = false;
   document.removeEventListener("keydown", onKeyDown);
+  emit("onCloseModal");
 };
 
 watch(

package/vue-components/v3/modal/Modal.vue

@@ -1,7 +1,12 @@
 <script setup lang="ts">
-import { defineAsyncComponent, ref, watch } from "vue";
+import { ref, watch } from "vue";
 import { onClickOutside } from "@vueuse/core";
 
+import HeaderItems from "./../header/HeaderItems.vue";
+import HeaderItem from "./../header/HeaderItem.vue";
+import AcButton from "./../button/Button.vue";
+import AcButtons from "./../button/Buttons.vue";
+
 interface Props {
   open?: boolean;
   title?: string;
@@ -22,11 +27,6 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits(["closemodal"]);
 
-const HeaderItems = defineAsyncComponent(() => import("./../header/HeaderItems.vue"));
-const HeaderItem = defineAsyncComponent(() => import("./../header/HeaderItem.vue"));
-const Buttons = defineAsyncComponent(() => import("./../button/Buttons.vue"));
-const AcButton = defineAsyncComponent(() => import("./../button/Button.vue"));
-
 //TODO: need to update not a currect way to import the file
 const modalCloseIcon = import.meta.glob("../../../icons/close-icon.svg", {
   eager: true,
@@ -72,14 +72,12 @@ watch(
       destroyModal();
     }
   },
-  { immediate: true }
+  { immediate: true },
 );
 </script>
 
 <template>
   <teleport to="#modals">
-    <!-- for transition https://github.com/adamwathan/vue-tailwind-examples/blob/master/src/components/Modal.vue -->
-    <!-- modal start  -->
     <div v-if="showModal" class="ac-modal is-middle-alignment" :class="modifierClasses">
       <div ref="modal" class="ac-modal-inner">
         <!-- modal header start  -->
@@ -118,9 +116,9 @@ watch(
           <div>
             <slot name="modal-footer-left" />
           </div>
-          <buttons class="has-text-right is-block">
+          <ac-buttons class="has-text-right is-block">
             <slot name="modal-footer-controls" />
-          </buttons>
+          </ac-buttons>
           <!-- modal footer end -->
         </div>
       </div>