Merge pull request #1

feat: backdrop-filter

README.md

@@ -57,6 +57,7 @@ app.use(createModal({
   },
   overlayStyle: {
     'background-color': 'rgba(0, 0, 0, .5)',
+    'backdrop-filter': 'blur(5px)',
     'z-index': 200
   }
 }))

examples/vite/src/main.ts

@@ -1,28 +1,29 @@
-import App from './App.vue'
+import App from "./App.vue";
 
-import { createModal } from '@kolirt/vue-modal'
-import Notifications from '@kyvg/vue3-notification'
-import 'bootstrap/dist/css/bootstrap.min.css'
-import { createApp } from 'vue'
+import { createModal } from "@kolirt/vue-modal";
+import Notifications from "@kyvg/vue3-notification";
+import "bootstrap/dist/css/bootstrap.min.css";
+import { createApp } from "vue";
 
-const app = createApp(App)
+const app = createApp(App);
 
-app.use(Notifications)
+app.use(Notifications);
 
 app.use(
-  createModal({
-    transitionTime: 200,
-    animationType: 'slideDown',
-    modalStyle: {
-      padding: '5rem 2rem',
-      align: 'center',
-      'z-index': 201
-    },
-    overlayStyle: {
-      'background-color': 'rgba(0, 0, 0, .5)',
-      'z-index': 200
-    }
-  })
-)
+	createModal({
+		transitionTime: 200,
+		animationType: "slideDown",
+		modalStyle: {
+			padding: "5rem 2rem",
+			align: "center",
+			"z-index": 201,
+		},
+		overlayStyle: {
+			"background-color": "rgba(0, 0, 0, .5)",
+			"backdrop-filter": "blur(5px)",
+			"z-index": 200,
+		},
+	}),
+);
 
-app.mount('#app')
+app.mount("#app");

examples/vue-cli-service/src/main.js

@@ -1,28 +1,29 @@
-import { createModal } from '@kolirt/vue-modal'
-import Notifications from '@kyvg/vue3-notification'
-import 'bootstrap/dist/css/bootstrap.min.css'
-import { createApp } from 'vue'
+import { createModal } from "@kolirt/vue-modal";
+import Notifications from "@kyvg/vue3-notification";
+import "bootstrap/dist/css/bootstrap.min.css";
+import { createApp } from "vue";
 
-import App from './App.vue'
+import App from "./App.vue";
 
-const app = createApp(App)
+const app = createApp(App);
 
-app.use(Notifications)
+app.use(Notifications);
 
 app.use(
-  createModal({
-    transitionTime: 200,
-    animationType: 'slideDown',
-    modalStyle: {
-      padding: '5rem 2rem',
-      align: 'center',
-      'z-index': 201
-    },
-    overlayStyle: {
-      'background-color': 'rgba(0, 0, 0, .5)',
-      'z-index': 200
-    }
-  })
-)
+	createModal({
+		transitionTime: 200,
+		animationType: "slideDown",
+		modalStyle: {
+			padding: "5rem 2rem",
+			align: "center",
+			"z-index": 201,
+		},
+		overlayStyle: {
+			"background-color": "rgba(0, 0, 0, .5)",
+			"backdrop-filter": "blur(5px)",
+			"z-index": 200,
+		},
+	}),
+);
 
-app.mount('#app')
+app.mount("#app");

lib/options.ts

@@ -12,6 +12,7 @@ export const state = reactive<Options>({
   },
   overlayStyle: {
     'background-color': 'rgba(0, 0, 0, 0.9)',
+    'backdrop-filter': 'blur(5px)',
     'z-index': 200
   }
 })
@@ -51,4 +52,8 @@ export function setOptions(newOptions: Options): void {
     // @ts-ignore
     state.overlayStyle['background-color'] = newOptions.overlayStyle['background-color']
   }
+  if (newOptions?.overlayStyle?.['backdrop-filter']) {
+    // @ts-ignore
+    state.overlayStyle['backdrop-filter'] = newOptions.overlayStyle['backdrop-filter']
+  }
 }

lib/types.ts

@@ -15,6 +15,7 @@ export type ModalStyle = {
 }
 export type OverlayStyle = {
   'background-color'?: string
+  'backdrop-filter'?: string
   'z-index'?: number
 }