isOpened added, screen locking fixed

kolirt · Jul 10, 2023 · 87a4b1b · 87a4b1b
1 parent c22d24a
commit 87a4b1b
Show file tree

Hide file tree

Showing 17 changed files with 234 additions and 192 deletions.
diff --git a/demo/assets/index-2bc0af34.css b/demo/assets/index-2bc0af34.css
diff --git a/demo/assets/index-5f85b0a9.js b/demo/assets/index-5f85b0a9.js
diff --git a/demo/assets/index-8efde44d.css b/demo/assets/index-8efde44d.css
diff --git a/demo/assets/index-ad66adb8.js b/demo/assets/index-ad66adb8.js
diff --git a/demo/index.html b/demo/index.html
@@ -8,8 +8,8 @@
 
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-38YS8MVCYR"></script>
     <script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-38YS8MVCYR');</script>
-  <script type="module" crossorigin src="/vue-modal/assets/index-5f85b0a9.js"></script>
-  <link rel="stylesheet" href="/vue-modal/assets/index-2bc0af34.css">
+  <script type="module" crossorigin src="/vue-modal/assets/index-ad66adb8.js"></script>
+  <link rel="stylesheet" href="/vue-modal/assets/index-8efde44d.css">
 </head>
 <body>
 <div id="app"></div>

diff --git a/dist/vue-modal.d.ts b/dist/vue-modal.d.ts
@@ -1,5 +1,13 @@
+import type { AllowedComponentProps } from 'vue';
 import type { Component } from 'vue';
+import type { ComponentCustomProps } from 'vue';
+import type { ComponentOptionsMixin } from 'vue';
+import type { ComputedRef } from 'vue';
+import type { DefineComponent } from 'vue';
+import type { ExtractPropTypes } from 'vue';
 import type { Plugin as Plugin_2 } from 'vue';
+import type { Ref } from 'vue';
+import type { VNodeProps } from 'vue';
 
 export declare function $off(event: Events, callback: (...args: any) => void): void;
 
@@ -22,12 +30,16 @@ export declare enum Events {
     Closed = "closed"
 }
 
+export declare const isOpened: ComputedRef<boolean>;
+
 declare type ModalStyle = {
     padding?: string;
     align?: 'top' | 'center';
     'z-index'?: number;
 };
 
+export declare const ModalTarget: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{}>>, {}, {}>;
+
 export declare function openModal(component: Component, props?: {}, options?: OpenModalOptions): Promise<unknown>;
 
 declare type OpenModalOptions = {
@@ -46,4 +58,9 @@ declare type OverlayStyle = {
     'z-index'?: number;
 };
 
+export declare function useLock(): {
+    paddingSize: Ref<number | null>;
+    toggleLock: (value: boolean) => void;
+};
+
 export { }
diff --git a/dist/vue-modal.js b/dist/vue-modal.js
diff --git a/dist/vue-modal.umd.cjs b/dist/vue-modal.umd.cjs
diff --git a/lib/components/BaseModal.vue b/lib/components/BaseModal.vue
@@ -4,7 +4,7 @@ import {$emit, $off, $on} from '../event'
 import {state as stateData} from '../data'
 import {state as stateOptions} from '../options'
 import {Events} from '../types'
-import {isEsc} from '../utils/isEsc'
+import isEsc from '../utils/isEsc'
 import {closeModal} from '../actions'
 
 const props = defineProps({
@@ -15,7 +15,7 @@ const show = ref(false)
 const hide = computed(() => props.index !== stateData.modals.length - 1)
 
 const transitionTime = computed(() => {
-  return stateOptions.animationType !== 'none' ? stateOptions.transitionTime : 0
+  return stateOptions.animationType !== 'none' ? (stateOptions.transitionTime || 0) : 0
 })
 const baseModalStyle = computed(() => {
   return {

diff --git a/lib/components/ModalTarget.vue b/lib/components/ModalTarget.vue
@@ -8,7 +8,7 @@ import {Events} from '../types'
 import BaseModal from './BaseModal.vue'
 import {useLock} from '../composables/useLock'
 
-const transitionTime = stateOptions.animationType !== 'none' ? stateOptions.transitionTime : 0
+const transitionTime = stateOptions.animationType !== 'none' ? (stateOptions.transitionTime || 0) : 0
 const overlayStyle = computed(() => {
   return {
     ...stateOptions?.overlayStyle,
@@ -28,7 +28,7 @@ function onClose({forceCloseAll}: CloseEventData) {
   }
 }
 
-const lock =useLock()
+const lock = useLock()
 
 function onClosed() {
   lock.toggleLock(false)

diff --git a/lib/composables/useLock.ts b/lib/composables/useLock.ts
@@ -1,46 +1,30 @@
 import {ref} from 'vue'
+import {getScrollbarWidth} from '../utils/getScrollbarWidth'
 
 export function useLock() {
-    const paddingSize = ref<number | null>(null)
-
-    function getScrollbarWidth(): number {
-        // Creating invisible container
-        const outer = document.createElement('div')
-        outer.style.visibility = 'hidden'
-        outer.style.overflow = 'scroll' // forcing scrollbar to appear
-        // outer.style.msOverflowStyle = 'scrollbar' // needed for WinJS apps
-        document.body.appendChild(outer)
-
-        // Creating inner element and placing it in the container
-        const inner = document.createElement('div')
-        outer.appendChild(inner)
-
-        // Calculating difference between container's full width and the child width
-        const scrollbarWidth = (outer.offsetWidth - inner.offsetWidth)
-
-        // Removing temporary elements from the DOM
-        outer.parentNode?.removeChild(outer)
-
-        return scrollbarWidth
-    }
+    const paddingSize = ref<number | null>(getScrollbarWidth())
 
     function lock() {
         document.documentElement.style.overflow = 'hidden'
-        document.body.style.paddingRight = `${paddingSize.value}px`
+
+        if (document.documentElement.scrollHeight > document.documentElement.clientHeight) {
+            document.body.style.paddingRight = `${paddingSize.value}px`
+            // document.body.style.width = `calc(100% - ${paddingSize.value}px)`
+        }
     }
 
     function unlock() {
         document.documentElement.style.overflow = 'auto'
         document.body.style.paddingRight = '0px'
+        // document.body.style.width = 'auto'
     }
 
     function toggleLock(value: boolean) {
-        if (paddingSize.value === null) paddingSize.value = getScrollbarWidth()
         value ? lock() : unlock()
     }
 
     return {
         paddingSize,
         toggleLock
     }
-}
+}
diff --git a/lib/data.ts b/lib/data.ts
@@ -1,13 +1,15 @@
 import type {Component} from 'vue'
 import type {Options} from './types'
-import {markRaw, reactive} from 'vue'
+import {computed, markRaw, reactive} from 'vue'
 
 export const state = reactive<{
     modals: { component: Component, props?: {} | [] }[]
 }>({
     modals: []
 })
 
+export const isOpened = computed(() => state.modals.length > 0)
+
 export function addModal(component: Component, props?: {}, options?: Options) {
     state.modals.push(markRaw({component, props, options}))
 }

diff --git a/lib/index.ts b/lib/index.ts
@@ -1,7 +1,17 @@
+import ModalTarget from './components/ModalTarget.vue'
+
+export {useLock} from './composables/useLock'
+
 export {openModal, confirmModal, closeModal, closeAllModals} from './actions'
 
+export {isOpened} from './data'
+
 export {$on, $off} from './event'
 
 export {createModal} from './plugin'
 
 export {Events} from './types'
+
+export {
+    ModalTarget
+}
diff --git a/lib/utils/getScrollbarWidth.ts b/lib/utils/getScrollbarWidth.ts
@@ -0,0 +1,20 @@
+export function getScrollbarWidth(): number {
+    // Creating invisible container
+    const outer = document.createElement('div')
+    outer.style.visibility = 'hidden'
+    outer.style.overflow = 'scroll' // forcing scrollbar to appear
+    // outer.style.msOverflowStyle = 'scrollbar' // needed for WinJS apps
+    document.body.appendChild(outer)
+
+    // Creating inner element and placing it in the container
+    const inner = document.createElement('div')
+    outer.appendChild(inner)
+
+    // Calculating difference between container's full width and the child width
+    const scrollbarWidth = (outer.offsetWidth - inner.offsetWidth)
+
+    // Removing temporary elements from the DOM
+    outer.parentNode?.removeChild(outer)
+
+    return scrollbarWidth
+}
diff --git a/lib/utils/isEsc.ts b/lib/utils/isEsc.ts
@@ -1,4 +1,4 @@
-export function isEsc(e: Event): boolean {
+export default function isEsc(e: Event): boolean {
     if ('key' in e) {
         return (e.key === 'Escape' || e.key === 'Esc')
     }

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@kolirt/vue-modal",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Simple Vue3 modal package",
   "author": "kolirt",
   "license": "MIT",

diff --git a/src/App.vue b/src/App.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
 import {notify} from '@kyvg/vue3-notification'
-import {openModal} from '../lib'
+import {ModalTarget, openModal} from '../lib'
 import TestModal from './components/Test1Modal.vue'
 import Test2Modal from './components/Test2Modal.vue'
 import Test3Modal from './components/Test3Modal.vue'
 
-
 function runModal1() {
   openModal(TestModal, {
     test: 'modal1'
@@ -101,9 +100,16 @@ function runModal3() {
     </div>
   </div>
 
-  <notifications/>
+  <notifications class="notifications"/>
   <ModalTarget/>
 </template>
 
 <style scoped>
+.notifications {
+  position: fixed;
+  right: unset !important;
+  left: 100vw;
+  transform: translateX(-100%);
+  margin-left: -15px;
+}
 </style>