feat(Modal): add overlay blur effect

gitsindonesia · May 25, 2023 · 96ba261 · 96ba261
1 parent e1acf19
commit 96ba261
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 1 deletion.
diff --git a/packages/modal/src/VModal.vue b/packages/modal/src/VModal.vue
@@ -287,6 +287,16 @@ export interface Props {
    * ```
    */
   maxWidth?: string | number;
+  /**
+   * Determine whether to blur the overlay.
+   *
+   * @default false
+   * @example
+   * ```html
+   * <v-modal overlay-blur />
+   * ```
+   * */
+  overlayBlur?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -415,7 +425,12 @@ const panelStyles = computed(() => {
             leave-from="opacity-100"
             leave-to="opacity-0"
           >
-            <div class="v-modal-overlay" />
+            <div
+              class="v-modal-overlay"
+              :class="{
+                'v-modal-overlay--blur': overlayBlur,
+              }"
+            />
           </TransitionChild>
 
           <span v-if="!fullscreen" class="v-modal-spacer" aria-hidden="true">

diff --git a/packages/themes/src/morpheme/_modal.scss b/packages/themes/src/morpheme/_modal.scss
@@ -36,6 +36,9 @@
   --v-modal-footer-margin-top: var(--size-spacing-6);
   --v-modal-footer-justify-content: flex-end;
   --v-modal-footer-gap: var(--size-spacing-2);
+
+  // overlay
+  --v-modal-overlay-blur-size: 8px;
 }
 
 .v-modal {
@@ -56,6 +59,10 @@
     position: fixed;
     inset: 0px;
     background-color: rgb(0 0 0 / 0.5);
+
+    &--blur {
+      backdrop-filter: blur(var(--v-modal-overlay-blur-size));
+    }
   }
 
   &-panel {