├── dev
    ├── components
    │   └── .gitkeep
    ├── .eslintrc.js
    ├── tsconfig.json
    ├── main.ts
    ├── App.vue
    ├── Playground.template.vue
    ├── g-dialog.ts
    ├── components.d.ts
    ├── index.html
    ├── windi.config.ts
    ├── vite.config.ts
    └── auto-imports.d.ts
├── .eslintignore
├── .npmignore
├── .stylelintignore
├── src
    ├── vite-env.d.ts
    ├── scss
    │   └── main.scss
    ├── util
    │   ├── globals.ts
    │   ├── index.ts
    │   ├── helpers.ts
    │   └── scroll.ts
    ├── assets
    │   ├── example-video.gif
    │   └── gitart-dialog-logo.svg
    ├── shims-vue.d.ts
    ├── index.ts
    ├── composables
    │   ├── window.ts
    │   ├── overlay.ts
    │   ├── stack.ts
    │   ├── sizeStyle.ts
    │   ├── lazyActivation.ts
    │   └── scroll.ts
    ├── components
    │   ├── GDialogRoot.vue
    │   ├── GDialogOverlay.vue
    │   ├── GDialogContent.vue
    │   ├── GDialogFrame.vue
    │   └── GDialog.vue
    ├── types
    │   └── Plugin.ts
    └── plugin.ts
├── .gitignore
├── .eslintrc.js
├── .vscode
    ├── extensions.json
    └── settings.json
├── vitest.config.ts
├── .stylelintrc.js
├── tests
    ├── unit
    │   ├── GDialogRoot.spec.ts
    │   └── composables
    │   │   └── lazyActivation.spec.ts
    └── auto-imports.d.ts
├── tsconfig.json
├── LICENSE
├── README.md
└── package.json


/dev/components/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
3 | public


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | *
2 | !dist/**/*
3 | !LINCENSE
4 | README.md


--------------------------------------------------------------------------------
/.stylelintignore:
--------------------------------------------------------------------------------
1 | dist
2 | node_modules
3 | public
4 | *.md
5 | 


--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 


--------------------------------------------------------------------------------
/src/scss/main.scss:
--------------------------------------------------------------------------------
1 | html.overflow-y-hidden {
2 |   overflow-y: hidden;
3 | }
4 | 


--------------------------------------------------------------------------------
/src/util/globals.ts:
--------------------------------------------------------------------------------
1 | export const IN_BROWSER = typeof window !== 'undefined'
2 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | dev/Playground.vue
2 | dev/components/*
3 | node_modules
4 | dist
5 | .DS_Store
6 | *.local


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   extends: [
3 |     '@gitart/eslint-config-vue',
4 |   ],
5 | }
6 | 


--------------------------------------------------------------------------------
/src/util/index.ts:
--------------------------------------------------------------------------------
1 | export * from './globals'
2 | export * from './helpers'
3 | export * from './scroll'
4 | 


--------------------------------------------------------------------------------
/src/assets/example-video.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gitart-group/vue-dialog/HEAD/src/assets/example-video.gif


--------------------------------------------------------------------------------
/dev/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | /* eslint-env node */
 2 | module.exports = {
 3 |   extends: [
 4 |     '../.eslintrc.js',
 5 |   ],
 6 | 
 7 |   rules: {
 8 |     'no-undef': 'off',
 9 |   },
10 | }
11 | 


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": [
3 |     "johnsoncodehk.volar",
4 |     "dbaeumer.vscode-eslint",
5 |     "stylelint.vscode-stylelint",
6 |     "streetsidesoftware.code-spell-checker"
7 |   ]
8 | }
9 | 


--------------------------------------------------------------------------------
/dev/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "baseUrl": ".",
 5 |     "paths": {
 6 |       "gitart-vue-dialog": ["../src/index.ts"]
 7 |     }
 8 |   },
 9 |   "exclude": []
10 | }
11 | 


--------------------------------------------------------------------------------
/src/shims-vue.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.vue' {
2 |   // eslint-disable-next-line @typescript-eslint/consistent-type-imports
3 |   import { DefineComponent } from 'vue'
4 | 
5 |   const component: DefineComponent<{}, {}, any>
6 |   export default component
7 | }
8 | 


--------------------------------------------------------------------------------
/dev/main.ts:
--------------------------------------------------------------------------------
 1 | import { createApp } from 'vue'
 2 | 
 3 | import 'virtual:windi.css'
 4 | 
 5 | import App from './App.vue'
 6 | import dialogPlugin from './g-dialog'
 7 | 
 8 | export const app = createApp(App)
 9 | 
10 | app.use(dialogPlugin())
11 | app.mount('#app')
12 | 


--------------------------------------------------------------------------------
/dev/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Playground />
 3 | 
 4 |   <GDialogRoot />
 5 | </template>
 6 | 
 7 | <script lang="ts">
 8 | import Playground from './Playground.vue'
 9 | 
10 | export default {
11 |   name: 'App',
12 |   components: {
13 |     Playground,
14 |   },
15 | }
16 | </script>
17 | 


--------------------------------------------------------------------------------
/dev/Playground.template.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <GDialog
 3 |     v-model="dialog"
 4 |     max-width="300"
 5 |   >
 6 |     Content
 7 |   </GDialog>
 8 | 
 9 |   <button
10 |     class="btn"
11 |     @click="dialog = true"
12 |   >
13 |     Open
14 |   </button>
15 | </template>
16 | 
17 | <script setup lang="ts">
18 | const dialog = ref(false)
19 | </script>
20 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "prettier.enable": false,
 3 |   "typescript.tsdk": "node_modules/typescript/lib",
 4 |   "editor.codeActionsOnSave": {
 5 |     "source.fixAll.eslint": true,
 6 |   },
 7 |   "cSpell.words": [
 8 |     "gitart",
 9 |     "stackable",
10 |     "vite",
11 |     "stylelint",
12 |     "unplugin",
13 |     "windicss",
14 |     "vitejs"
15 |   ],
16 | }
17 | 


--------------------------------------------------------------------------------
/dev/g-dialog.ts:
--------------------------------------------------------------------------------
 1 | import type { Plugin } from 'vue'
 2 | import type { IDialog } from 'gitart-vue-dialog'
 3 | import { plugin as dialogPlugin } from 'gitart-vue-dialog'
 4 | // import 'gitart-vue-dialog/dist/style.css'
 5 | 
 6 | declare module '@vue/runtime-core' {
 7 |   export interface GDialogProperties {
 8 |     $dialog: IDialog
 9 |   }
10 | }
11 | 
12 | export default (): Plugin => dialogPlugin
13 | 


--------------------------------------------------------------------------------
/dev/components.d.ts:
--------------------------------------------------------------------------------
 1 | // generated by unplugin-vue-components
 2 | // We suggest you to commit this file into source control
 3 | // Read more: https://github.com/vuejs/vue-next/pull/3399
 4 | 
 5 | declare module 'vue' {
 6 |   export interface GlobalComponents {
 7 |     GDialog: typeof import('gitart-vue-dialog')['GDialog']
 8 |     GDialogRoot: typeof import('gitart-vue-dialog')['GDialogRoot']
 9 |   }
10 | }
11 | 
12 | export { }
13 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
 1 | import './scss/main.scss'
 2 | 
 3 | // standalone component
 4 | export { default as GDialog } from './components/GDialog.vue'
 5 | 
 6 | // using plugin
 7 | export type {
 8 |   IDialog,
 9 |   DialogOnCloseEvent,
10 |   IDialogItem,
11 | } from './types/Plugin'
12 | 
13 | export { default as GDialogRoot } from './components/GDialogRoot.vue'
14 | 
15 | export {
16 |   plugin, dialogInjectionKey,
17 | } from './plugin'
18 | 


--------------------------------------------------------------------------------
/dev/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <title>Welcome To GDialog Playground</title>
 5 |     <meta charset="utf-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |   </head>
 9 |   <body>
10 |     <div id="app"></div>
11 |     <script type="module" src="./main.ts"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/vitest.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'vitest/config'
 2 | import vue from '@vitejs/plugin-vue'
 3 | import AutoImport from 'unplugin-auto-import/vite'
 4 | 
 5 | export default defineConfig({
 6 |   plugins: [
 7 |     vue({}) as any,
 8 |     AutoImport({
 9 |       imports: ['vitest'],
10 |       dts: 'tests/auto-imports.d.ts',
11 |     }),
12 |   ],
13 |   test: {
14 |     global: true,
15 |     environment: 'happy-dom',
16 |   },
17 | })
18 | 


--------------------------------------------------------------------------------
/src/composables/window.ts:
--------------------------------------------------------------------------------
 1 | import { onMounted, onUnmounted } from 'vue'
 2 | 
 3 | export function useWindowEventListener <E extends keyof WindowEventMap>(
 4 |   event: E, listener: (this: Window, ev: WindowEventMap[E]) => any, options?: AddEventListenerOptions,
 5 | ) {
 6 |   onMounted(() => {
 7 |     window.addEventListener(event, listener, options)
 8 |   })
 9 | 
10 |   onUnmounted(() => {
11 |     window.removeEventListener(event, listener)
12 |   })
13 | }
14 | 


--------------------------------------------------------------------------------
/.stylelintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   extends: ['stylelint-config-standard'],
 3 |   rules: {
 4 |     indentation: 2,
 5 |     'at-rule-no-unknown': [
 6 |       true,
 7 |       {
 8 |         ignoreAtRules: [
 9 |           'tailwind',
10 |           'apply',
11 |           'variants',
12 |           'responsive',
13 |           'screen',
14 |         ],
15 |       },
16 |     ],
17 |     'declaration-block-trailing-semicolon': null,
18 |     'no-descending-specificity': null,
19 |     'value-keyword-case': null,
20 |   },
21 | }


--------------------------------------------------------------------------------
/src/util/helpers.ts:
--------------------------------------------------------------------------------
 1 | export function convertToUnit (str: number, unit?: string): string
 2 | export function convertToUnit (str: string | number | null | undefined, unit?: string): string | undefined
 3 | export function convertToUnit(str: string | number | null | undefined, unit = 'px'): string | undefined {
 4 |   if (str == null || str === '')
 5 |     return undefined
 6 | 
 7 |   else if (isNaN(+str!))
 8 |     return String(str)
 9 | 
10 |   else if (!isFinite(+str!))
11 |     return undefined
12 | 
13 |   else
14 |     return `${Number(str)}${unit}`
15 | }
16 | 
17 | export default {
18 |   convertToUnit,
19 | }
20 | 


--------------------------------------------------------------------------------
/dev/windi.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'windicss/helpers'
 2 | import plugin from 'windicss/plugin'
 3 | 
 4 | export default defineConfig({
 5 |   attributify: true,
 6 |   extract: {
 7 |     include: ['./**/*.{vue,html,jsx,tsx}'],
 8 |   },
 9 |   plugins: [
10 |     plugin(({ addComponents }) => {
11 |       addComponents({
12 |         '.btn': {
13 |           'backgroundColor': '#3490dc',
14 |           'padding': '.5rem 1rem',
15 |           'borderRadius': '.25rem',
16 |           'color': '#fff',
17 |           'fontWeight': '600',
18 |           '&:hover': {
19 |             backgroundColor: '#2779bd',
20 |           },
21 |         },
22 |       })
23 |     }),
24 |   ],
25 | })
26 | 


--------------------------------------------------------------------------------
/src/composables/overlay.ts:
--------------------------------------------------------------------------------
 1 | import type { Ref } from 'vue'
 2 | 
 3 | import { getCurrentInstance, ref, watch } from 'vue'
 4 | 
 5 | const overlays: Ref<number[]> = ref([])
 6 | 
 7 | const MIN_Z_INDEX = 1000
 8 | 
 9 | export function useOverlay(isActive: Ref<boolean | undefined>) {
10 |   const id = getCurrentInstance()!.uid
11 |   const zIndex = ref(0)
12 | 
13 |   watch(isActive, (value) => {
14 |     if (value) {
15 |       overlays.value.push(id)
16 |       zIndex.value = MIN_Z_INDEX + ((overlays.value.indexOf(id) + 1) * 2)
17 |     }
18 |     else {
19 |       overlays.value = overlays.value.filter(x => x !== id)
20 |     }
21 |   }, {
22 |     immediate: true,
23 |   })
24 | 
25 |   return { zIndex }
26 | }
27 | 


--------------------------------------------------------------------------------
/tests/unit/GDialogRoot.spec.ts:
--------------------------------------------------------------------------------
 1 | import { shallowMount } from '@vue/test-utils'
 2 | import GDialogRoot from '../../src/components/GDialogRoot.vue'
 3 | import { dialogInjectionFallback, dialogInjectionKey } from '../../src/plugin'
 4 | 
 5 | describe('Test Provide/Inject for GDialogRoot', () => {
 6 |   test('Use fallback data if plugin is not installed', () => {
 7 |     const wrapper = shallowMount(GDialogRoot)
 8 |     expect(wrapper.vm.dialogs).toBe(dialogInjectionFallback.dialogs)
 9 |   })
10 | 
11 |   test('Use plugin data with global provide', () => {
12 |     const wrapper = shallowMount(GDialogRoot, {
13 |       global: {
14 |         provide: {
15 |           [dialogInjectionKey as symbol]: () => ({}),
16 |         },
17 |       },
18 |     })
19 | 
20 |     expect(wrapper.vm.dialogs).not.toBe(dialogInjectionFallback.dialogs)
21 |   })
22 | })
23 | 


--------------------------------------------------------------------------------
/tests/auto-imports.d.ts:
--------------------------------------------------------------------------------
 1 | // Generated by 'unplugin-auto-import'
 2 | // We suggest you to commit this file into source control
 3 | declare global {
 4 |   const afterAll: typeof import('vitest')['afterAll']
 5 |   const afterEach: typeof import('vitest')['afterEach']
 6 |   const assert: typeof import('vitest')['assert']
 7 |   const beforeAll: typeof import('vitest')['beforeAll']
 8 |   const beforeEach: typeof import('vitest')['beforeEach']
 9 |   const chai: typeof import('vitest')['chai']
10 |   const describe: typeof import('vitest')['describe']
11 |   const expect: typeof import('vitest')['expect']
12 |   const it: typeof import('vitest')['it']
13 |   const suite: typeof import('vitest')['suite']
14 |   const test: typeof import('vitest')['test']
15 |   const vi: typeof import('vitest')['vi']
16 |   const vitest: typeof import('vitest')['vitest']
17 | }
18 | export {}
19 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "baseUrl": ".",
 4 |     "target": "ESNext",
 5 |     "module": "ESNext",
 6 |     "lib": [
 7 |       "es2015",
 8 |       "es2016",
 9 |       "es2017",
10 |       "es2018",
11 |       "es2019",
12 |       "es2020",
13 |       "dom",
14 |       "dom.iterable"
15 |     ],
16 |     "allowJs": false,
17 |     "declaration": true,
18 |     "declarationMap": true,
19 |     "sourceMap": true,
20 |     "outDir": "./dist",
21 |     "downlevelIteration": true,
22 |     "strict": true,
23 |     "noImplicitReturns": true,
24 |     "noUnusedLocals": true,
25 |     "moduleResolution": "node",
26 |     "esModuleInterop": true,
27 |     "experimentalDecorators": true,
28 |     "skipLibCheck": true,
29 |     "jsx": "preserve",
30 |     "emitDecoratorMetadata": true,
31 |     "paths": {
32 |       "gitart-vue-dialog": ["./src/index.ts"]
33 |     }
34 |   },
35 |   "exclude": [
36 |     "node_modules",
37 |     "dev"
38 |   ]
39 | }
40 | 


--------------------------------------------------------------------------------
/src/composables/stack.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   computed, effectScope, getCurrentInstance, onScopeDispose, ref, toRaw, watch,
 3 | } from 'vue'
 4 | 
 5 | // Types
 6 | import type { ComponentInternalInstance, EffectScope, Ref } from 'vue'
 7 | 
 8 | const stack = ref<ComponentInternalInstance[]>([])
 9 | 
10 | export function useStack(isActive: Ref<boolean>) {
11 |   const vm = getCurrentInstance()!
12 |   let scope: EffectScope | undefined
13 | 
14 |   watch(isActive, (val) => {
15 |     if (val) {
16 |       scope = effectScope()
17 |       scope.run(() => {
18 |         stack.value.push(vm)
19 | 
20 |         onScopeDispose(() => {
21 |           const idx = stack.value.indexOf(vm)
22 |           stack.value.splice(idx, 1)
23 |         })
24 |       })
25 |     }
26 |     else {
27 |       scope?.stop()
28 |     }
29 |   }, { immediate: true })
30 | 
31 |   const isTop = computed(() => {
32 |     return toRaw(stack.value[stack.value.length - 1]) === vm
33 |   })
34 | 
35 |   return {
36 |     isTop,
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/src/components/GDialogRoot.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Component
 3 |     :is="dialog.component"
 4 |     v-for="(dialog) in dialogs"
 5 |     :key="dialog.id"
 6 |     v-bind="dialog.props"
 7 |     @update:model-value="onClose(dialog.id)"
 8 |   />
 9 | </template>
10 | 
11 | <script lang="ts">
12 | import type { IDialogItemId } from 'src/types/Plugin'
13 | import { defineComponent, inject } from 'vue'
14 | 
15 | import { dialogInjectionFallback, dialogInjectionKey, errorLogger } from '../plugin'
16 | 
17 | export default defineComponent({
18 |   name: 'GDialogRoot',
19 | 
20 |   setup() {
21 |     const {
22 |       dialogs,
23 |       removeDialog,
24 |     } = inject(dialogInjectionKey, dialogInjectionFallback)
25 | 
26 |     // inject returned default value, so plugin is not installed
27 |     if (dialogs === dialogInjectionFallback.dialogs)
28 |       errorLogger.pluginIsNotInitialized()
29 | 
30 |     function onClose(id: IDialogItemId) {
31 |       removeDialog(id)
32 |     }
33 | 
34 |     return {
35 |       dialogs,
36 |       onClose,
37 |     }
38 |   },
39 | })
40 | </script>
41 | 


--------------------------------------------------------------------------------
/src/composables/sizeStyle.ts:
--------------------------------------------------------------------------------
 1 | import type { ComputedRef } from 'vue'
 2 | 
 3 | import { computed } from 'vue'
 4 | 
 5 | import { convertToUnit } from '../util'
 6 | 
 7 | export interface UseSizeStyleProps {
 8 |   maxWidth?: number | string
 9 |   width?: number | string
10 |   height?: number | string
11 | }
12 | 
13 | type UseSizeStyleReturnType = {
14 |   sizeStyles: ComputedRef<{
15 |     maxWidth: string | undefined
16 |     width: string | undefined
17 |     height: string | undefined
18 |   }>
19 | }
20 | 
21 | export const useSizeStyle = (props: UseSizeStyleProps): UseSizeStyleReturnType => {
22 |   const sizeStyles = computed(() => ({
23 |     maxWidth:
24 |         props.maxWidth === 'none'
25 |           ? undefined
26 |           : convertToUnit(props.maxWidth),
27 | 
28 |     width:
29 |         props.width === 'auto'
30 |           ? undefined
31 |           : convertToUnit(props.width),
32 | 
33 |     height:
34 |         props.height === 'auto'
35 |           ? undefined
36 |           : convertToUnit(props.height),
37 |   }))
38 | 
39 |   return {
40 |     sizeStyles,
41 |   }
42 | }
43 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 Misha Kryvoruchko
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 6 | 
 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 8 | 
 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
10 | 
11 | The MIT License (MIT)
12 | 


--------------------------------------------------------------------------------
/src/types/Plugin.ts:
--------------------------------------------------------------------------------
 1 | import type {
 2 |   Component, InjectionKey, ShallowUnwrapRef,
 3 | } from 'vue'
 4 | 
 5 | export type IDialogItemId = number | string
 6 | 
 7 | export type DialogOnCloseEvent = {
 8 |   id: IDialogItemId
 9 |   item: IDialogItem
10 |   cancel: () => void
11 | }
12 | 
13 | export interface IDialogItem {
14 |   component: ShallowUnwrapRef<Component>
15 |   id: IDialogItemId
16 |   props: {
17 |     modelValue: boolean
18 |   }
19 |   onClose?: ((event: DialogOnCloseEvent) => void) | undefined
20 | }
21 | 
22 | type DialogAddMethod = <T>(params: {
23 |   component: Component
24 |   props?: Omit<T, 'modelValue'> | undefined
25 |   id?: IDialogItemId | undefined
26 | }, hooks?: {
27 |     onClose?: ((event: DialogOnCloseEvent) => void) | undefined
28 |   }) => IDialogItemId
29 | 
30 | type DialogRemoveMethod = (
31 |   id: IDialogItemId,
32 |   closeDelay?: number
33 | ) => void
34 | 
35 | interface IDialogMethods {
36 |   addDialog: DialogAddMethod
37 |   removeDialog: DialogRemoveMethod
38 | }
39 | 
40 | export interface IDialog extends IDialogMethods {
41 |   dialogs: IDialogItem[]
42 | }
43 | 
44 | export type DialogInjectionKey = InjectionKey<IDialog>
45 | 


--------------------------------------------------------------------------------
/src/composables/lazyActivation.ts:
--------------------------------------------------------------------------------
 1 | import type { Ref } from 'vue'
 2 | 
 3 | import { nextTick, ref, watch } from 'vue'
 4 | 
 5 | type UseLazyActivationFunc = (baseState: Ref<boolean>) => {
 6 |   /**
 7 |    * determine if `baseState' was `true` at least once
 8 |    */
 9 |   activatedOnce: Ref<boolean>
10 | 
11 |   /**
12 |    * proxy value of baseState.
13 |    */
14 |   active: Ref<boolean>
15 | }
16 | 
17 | /**
18 |  * make first activation lazy: `activatedOnce` changes immediately,
19 |  * `active` changes on `nextTick`
20 |  */
21 | export const useLazyActivation: UseLazyActivationFunc = (baseState) => {
22 |   const activatedOnce = ref(false)
23 |   const active = ref(false)
24 | 
25 |   if (baseState.value) {
26 |     activatedOnce.value = true
27 |     nextTick(() => {
28 |       active.value = true
29 |     })
30 |   }
31 | 
32 |   watch(baseState, (value) => {
33 |     // lazy first activation
34 |     if (!activatedOnce.value) {
35 |       activatedOnce.value = true
36 |       nextTick(() => {
37 |         active.value = value
38 |       })
39 | 
40 |       return
41 |     }
42 | 
43 |     active.value = value
44 |   })
45 | 
46 |   return {
47 |     activatedOnce,
48 |     active,
49 |   }
50 | }
51 | 


--------------------------------------------------------------------------------
/dev/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import path from 'path'
 2 | import { defineConfig } from 'vite'
 3 | import vue from '@vitejs/plugin-vue'
 4 | import AutoImport from 'unplugin-auto-import/vite'
 5 | import Components from 'unplugin-vue-components/vite'
 6 | import WindiCSS from 'vite-plugin-windicss'
 7 | 
 8 | const resolve = (str: string) => path.resolve(__dirname, str)
 9 | 
10 | export default defineConfig({
11 |   root: resolve('.'),
12 | 
13 |   plugins: [
14 |     vue(),
15 |     AutoImport({
16 |       imports: [
17 |         'vue',
18 |         {
19 |           'gitart-vue-dialog': [
20 |             'dialogInjectionKey',
21 |             ['plugin', 'dialogPlugin'],
22 |           ],
23 |         },
24 |       ],
25 |       dts: resolve('auto-imports.d.ts'),
26 |     }),
27 |     Components({
28 |       resolvers: [
29 |         (name: string) => {
30 |           if ([
31 |             'GDialog',
32 |             'GDialogRoot',
33 |           ].includes(name))
34 |             return { importName: name, path: 'gitart-vue-dialog' }
35 | 
36 |           return null
37 |         },
38 |       ],
39 |       dts: resolve('components.d.ts'),
40 |     }),
41 |     WindiCSS({
42 |       config: resolve('windi.config.ts'),
43 |     }),
44 |   ],
45 | 
46 |   server: {
47 |     fs: {
48 |       strict: false,
49 |       allow: [resolve('..')],
50 |     },
51 |   },
52 | 
53 |   resolve: {
54 |     alias: {
55 |       'gitart-vue-dialog': resolve('../src/index.ts'),
56 |     },
57 |   },
58 | 
59 |   build: {
60 |     sourcemap: true,
61 |   },
62 | })
63 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | [![Stand With Ukraine](https://raw.githubusercontent.com/vshymanskyy/StandWithUkraine/main/banner-direct.svg)](https://savelife.in.ua/en/)
 2 | 
 3 | <p align="center"><img src="src/assets/gitart-dialog-logo.svg" width="170" alt="Gitart Vue Dialog logo"></p>
 4 | 
 5 | <h1 align="center">Gitart Vue Dialog</h1>
 6 | 
 7 | <p align="center">Vue 3 Dialog/Modal Component + Plugin (optional)</p>
 8 | 
 9 | ---
10 | 
11 | 📘 [Documentation](https://gitart-vue-dialog.gitart.org/)
12 | 
13 | 🤯 [Examples](https://examples.gitart-vue-dialog.gitart.org/)
14 | 
15 | ⭐ [You can star it here, thanks :)](https://github.com/gitart-group/vue-dialog)
16 | 
17 | Typescript support, customizable, beautifully animated, SSR
18 | 
19 | ~13 KiB - index.cjs `gitart-vue-dialog` <br/> 
20 | ~1.8 KiB - style.css `gitart-vue-dialog/dist/style.css` <br/> 
21 | 
22 | 
23 | ## Installation
24 | 
25 | ### Standalone Component
26 | 
27 | ```js
28 | // main.js or YourComponent.vue
29 | import 'gitart-vue-dialog/dist/style.css'
30 | ```
31 | 
32 | ```js
33 | // YourComponent.vue
34 | import { GDialog } from 'gitart-vue-dialog'
35 | 
36 | export default {
37 |   components: {
38 |     GDialog,
39 |   },
40 | }
41 | ```
42 | 
43 | ### Plugin
44 | 
45 | Be sure to read the [documentation](http://gitart-vue-dialog.gitart.org/) for using the plugin
46 | 
47 | ```js
48 | import App from './App.vue'
49 | import { plugin as dialogPlugin } from 'gitart-vue-dialog'
50 | 
51 | createApp(App)
52 |   .use(dialogPlugin)
53 |   .mount('#app')
54 | ```
55 | 
56 | 
57 | 
58 | ## Usage
59 | 
60 | Read [Documentation](http://gitart-vue-dialog.gitart.org/)
61 | 
62 | <img src="src/assets/example-video.gif" width="690" alt="Example Video">
63 | 
64 | 
65 | Made in Ukraine 🇺🇦 by [Mykhailo Kryvorucho](https://twitter.com/MichaelGitart)


--------------------------------------------------------------------------------
/tests/unit/composables/lazyActivation.spec.ts:
--------------------------------------------------------------------------------
 1 | import { nextTick, ref } from 'vue'
 2 | import { useLazyActivation } from '../../../src/composables/lazyActivation'
 3 | 
 4 | describe('Test lazyActivation composable', () => {
 5 |   it('Test `true` by default. The activation should be delayed', async() => {
 6 |     const modelValue = ref(true)
 7 | 
 8 |     const {
 9 |       activatedOnce,
10 |       active,
11 |     } = useLazyActivation(modelValue)
12 | 
13 |     expect(activatedOnce.value).toBe(true)
14 |     expect(active.value).toBe(false)
15 | 
16 |     await nextTick()
17 | 
18 |     expect(active.value).toBe(true)
19 |   })
20 | 
21 |   it('Test `false` by default. All should be false', async() => {
22 |     const modelValue = ref(false)
23 | 
24 |     const {
25 |       activatedOnce,
26 |       active,
27 |     } = useLazyActivation(modelValue)
28 | 
29 |     expect(activatedOnce.value).toBe(false)
30 |     expect(active.value).toBe(false)
31 |   })
32 | 
33 |   it('The first activation must be delayed', async() => {
34 |     const modelValue = ref(false)
35 | 
36 |     const {
37 |       activatedOnce,
38 |       active,
39 |     } = useLazyActivation(modelValue)
40 | 
41 |     modelValue.value = true
42 |     await nextTick()
43 | 
44 |     expect(activatedOnce.value).toBe(true)
45 |     expect(active.value).toBe(false)
46 | 
47 |     await nextTick()
48 | 
49 |     expect(active.value).toBe(true)
50 |   })
51 | 
52 |   it('Subsequent activations must be immediate', async() => {
53 |     const modelValue = ref(false)
54 | 
55 |     const {
56 |       activatedOnce,
57 |       active,
58 |     } = useLazyActivation(modelValue)
59 | 
60 |     // first activation
61 | 
62 |     modelValue.value = true
63 | 
64 |     await nextTick()
65 |     await nextTick()
66 | 
67 |     expect(activatedOnce.value).toBe(true)
68 |     expect(active.value).toBe(true)
69 | 
70 |     // deactivation without delay
71 | 
72 |     modelValue.value = false
73 |     await nextTick()
74 | 
75 |     expect(active.value).toBe(false)
76 | 
77 |     // activation without delay
78 | 
79 |     modelValue.value = true
80 |     await nextTick()
81 | 
82 |     expect(active.value).toBe(true)
83 |   })
84 | })
85 | 


--------------------------------------------------------------------------------
/src/util/scroll.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * A copy of the vuetify implemantation
 3 |  * https://github.com/vuetifyjs/vuetify/blob/v2.5.8/packages/vuetify/src/mixins/overlayable/index.ts
 4 |  */
 5 | 
 6 | /**
 7 |  * Polyfill for Event.prototype.composedPath
 8 |  */
 9 | // const composedPath = (e: WheelEvent): EventTarget[] => {
10 | //   if (e.composedPath) return e.composedPath()
11 | 
12 | //   const path = []
13 | //   let el = e.target as Element | null
14 | 
15 | //   while (el) {
16 | //     path.push(el)
17 | 
18 | //     if (el.tagName === 'HTML') {
19 | //       path.push(document)
20 | //       path.push(window)
21 | 
22 | //       return path
23 | //     }
24 | 
25 | //     el = el.parentElement
26 | //   }
27 | //   return path
28 | // }
29 | 
30 | const hasScrollbar = (el?: Element) => {
31 |   if (!el || el.nodeType !== Node.ELEMENT_NODE) return false
32 | 
33 |   const style = window.getComputedStyle(el)
34 |   return ['auto', 'scroll'].includes(style.overflowY) && el.scrollHeight > el.clientHeight
35 | }
36 | 
37 | const shouldScroll = (el: Element, delta: number) => {
38 |   if (el.scrollTop === 0 && delta < 0) return true
39 |   return el.scrollTop + el.clientHeight === el.scrollHeight && delta > 0
40 | }
41 | 
42 | export const noScrollableParent = (event: WheelEvent, content: Element | undefined): boolean => {
43 |   const path = event.composedPath()
44 |   const delta = event.deltaY
45 | 
46 |   for (let index = 0; index < path.length; index++) {
47 |     const el = path[index]
48 | 
49 |     if (el === document) return true
50 |     if (el === document.documentElement) return true
51 |     if (el === content) return true
52 | 
53 |     if (hasScrollbar(el as Element)) return shouldScroll(el as Element, delta)
54 |   }
55 | 
56 |   return true
57 | }
58 | 
59 | export const getScrollbarWidth = (): number => {
60 |   const container = document.createElement('div')
61 |   container.style.visibility = 'hidden'
62 |   container.style.overflow = 'scroll'
63 |   const inner = document.createElement('div')
64 | 
65 |   container.appendChild(inner)
66 |   document.body.appendChild(container)
67 |   const scrollbarWidth = container.offsetWidth - inner.offsetWidth
68 |   document.body.removeChild(container)
69 | 
70 |   return scrollbarWidth
71 | }
72 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "gitart-vue-dialog",
 3 |   "version": "3.1.0",
 4 |   "scripts": {
 5 |     "dev": "vite --config dev/vite.config.ts",
 6 |     "build": "node build/build.js",
 7 |     "build:types": "vue-tsc --declaration --emitDeclarationOnly --p ./build/tsconfig.json",
 8 |     "lint": "yarn stylelint && yarn eslint",
 9 |     "stylelint": "stylelint src/**/*.vue",
10 |     "eslint": "eslint . --ext .js,.ts,.vue",
11 |     "test": "vitest"
12 |   },
13 |   "main": "./dist/index.cjs",
14 |   "module": "./dist/index.mjs",
15 |   "exports": {
16 |     ".": {
17 |       "types": "./dist/index.d.ts",
18 |       "import": "./dist/index.mjs",
19 |       "require": "./dist/index.cjs"
20 |     },
21 |     "./dist/*": "./dist/*",
22 |     "./package.json": "./package.json"
23 |   },
24 |   "types": "./dist/index.d.ts",
25 |   "keywords": [
26 |     "gitart",
27 |     "gitart dialog",
28 |     "gitart-vue-dialog",
29 |     "vue",
30 |     "vue 3",
31 |     "vue3",
32 |     "dialog",
33 |     "modal",
34 |     "dialog component",
35 |     "modal component",
36 |     "vue modal",
37 |     "vue3 modal",
38 |     "vue dialog",
39 |     "vue3 dialog"
40 |   ],
41 |   "repository": {
42 |     "type": "git",
43 |     "url": "https://github.com/gitart-group/vue-dialog.git",
44 |     "directory": "."
45 |   },
46 |   "author": {
47 |     "name": "Michael Gitart",
48 |     "email": "michaelgitart@gmail.com"
49 |   },
50 |   "license": "MIT",
51 |   "devDependencies": {
52 |     "@gitart/eslint-config-vue": "0.3.0",
53 |     "@types/node": "^18.16.16",
54 |     "@vitejs/plugin-vue": "^4.2.3",
55 |     "@vue/compiler-sfc": "^3.3.4",
56 |     "@vue/runtime-core": "^3.3.4",
57 |     "@vue/test-utils": "^2.3.2",
58 |     "@vueuse/core": "^10.1.2",
59 |     "eslint": "^8.42.0",
60 |     "happy-dom": "^9.20.3",
61 |     "sass": "^1.62.1",
62 |     "shelljs": "^0.8.5",
63 |     "stylelint": "^15.7.0",
64 |     "stylelint-config-standard": "^33.0.0",
65 |     "typescript": "^5.1.3",
66 |     "unplugin-auto-import": "^0.16.4",
67 |     "unplugin-vue-components": "^0.25.1",
68 |     "vite": "^3.2.7",
69 |     "vite-plugin-windicss": "^1.9.0",
70 |     "vitest": "^0.32.0",
71 |     "vue": "^3.3.4",
72 |     "vue-tsc": "^1.6.5",
73 |     "windicss": "^3.5.6"
74 |   },
75 |   "peerDependencies": {
76 |     "vue": "^3.2.6"
77 |   }
78 | }
79 | 


--------------------------------------------------------------------------------
/src/composables/scroll.ts:
--------------------------------------------------------------------------------
 1 | import type { Ref } from 'vue'
 2 | 
 3 | import { IN_BROWSER, getScrollbarWidth, noScrollableParent } from '../util'
 4 | 
 5 | type UseScrollParams = {
 6 |   overlay: Ref<Element | undefined>
 7 |   content: Ref<Element | undefined>
 8 |   contentActiveClass: string
 9 |   fullscreen: boolean
10 |   contentFullscreenClass: string
11 | }
12 | interface UseScrollReturnType {
13 |   disableScroll: () => void
14 |   enableScroll: () => void
15 | }
16 | 
17 | type UseScroll = (params: UseScrollParams) => UseScrollReturnType
18 | 
19 | export const useScroll: UseScroll = ({
20 |   overlay,
21 |   content,
22 |   contentActiveClass,
23 |   fullscreen,
24 |   contentFullscreenClass,
25 | }) => {
26 |   if (!IN_BROWSER) {
27 |     return {
28 |       disableScroll: () => {},
29 |       enableScroll: () => {},
30 |     }
31 |   }
32 | 
33 |   let disabled = false
34 |   let disableType: 'byEvents' | 'byOverflow'
35 | 
36 |   const eventListener = (event: WheelEvent) => {
37 |     if (event.target === overlay.value
38 |     || event.target === document.body
39 |     || noScrollableParent(event, content.value)
40 |     )
41 |       event.preventDefault()
42 |   }
43 | 
44 |   const scrollbarWidth = getScrollbarWidth()
45 |   const zeroScrollBar = scrollbarWidth === 0
46 | 
47 |   const disableScroll = () => {
48 |     if (disabled)
49 |       return
50 | 
51 |     // The mobile has the scroll bar width of 0
52 |     // hide the scroll bar for fullscreen mode
53 |     if (zeroScrollBar || fullscreen) {
54 |       disableType = 'byOverflow'
55 |       document.documentElement.classList.add('overflow-y-hidden')
56 |     }
57 |     else {
58 |       disableType = 'byEvents'
59 |       window.addEventListener('wheel', eventListener, {
60 |         passive: false,
61 |       })
62 |     }
63 | 
64 |     disabled = true
65 |   }
66 | 
67 |   const enableScroll = () => {
68 |     if (!disabled)
69 |       return
70 | 
71 |     if (disableType === 'byEvents') {
72 |       window.removeEventListener('wheel', eventListener)
73 |     }
74 |     else if (disableType === 'byOverflow') {
75 |       const activeContentElements = document.getElementsByClassName(contentActiveClass)
76 |       const activeFullscreenContentElements = document.getElementsByClassName(contentFullscreenClass)
77 | 
78 |       if ((!zeroScrollBar && fullscreen && activeFullscreenContentElements.length === 1) || activeContentElements.length === 1)
79 |         document.documentElement.classList.remove('overflow-y-hidden')
80 |     }
81 | 
82 |     disabled = false
83 |   }
84 | 
85 |   return {
86 |     disableScroll,
87 |     enableScroll,
88 |   }
89 | }
90 | 


--------------------------------------------------------------------------------
/dev/auto-imports.d.ts:
--------------------------------------------------------------------------------
 1 | // Generated by 'unplugin-auto-import'
 2 | // We suggest you to commit this file into source control
 3 | declare global {
 4 |   const computed: typeof import('vue')['computed']
 5 |   const createApp: typeof import('vue')['createApp']
 6 |   const customRef: typeof import('vue')['customRef']
 7 |   const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
 8 |   const defineComponent: typeof import('vue')['defineComponent']
 9 |   const dialogInjectionKey: typeof import('gitart-vue-dialog')['dialogInjectionKey']
10 |   const dialogPlugin: typeof import('gitart-vue-dialog')['plugin']
11 |   const effectScope: typeof import('vue')['effectScope']
12 |   const EffectScope: typeof import('vue')['EffectScope']
13 |   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
14 |   const getCurrentScope: typeof import('vue')['getCurrentScope']
15 |   const h: typeof import('vue')['h']
16 |   const inject: typeof import('vue')['inject']
17 |   const isReadonly: typeof import('vue')['isReadonly']
18 |   const isRef: typeof import('vue')['isRef']
19 |   const markRaw: typeof import('vue')['markRaw']
20 |   const nextTick: typeof import('vue')['nextTick']
21 |   const onActivated: typeof import('vue')['onActivated']
22 |   const onBeforeMount: typeof import('vue')['onBeforeMount']
23 |   const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
24 |   const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
25 |   const onDeactivated: typeof import('vue')['onDeactivated']
26 |   const onErrorCaptured: typeof import('vue')['onErrorCaptured']
27 |   const onMounted: typeof import('vue')['onMounted']
28 |   const onRenderTracked: typeof import('vue')['onRenderTracked']
29 |   const onRenderTriggered: typeof import('vue')['onRenderTriggered']
30 |   const onScopeDispose: typeof import('vue')['onScopeDispose']
31 |   const onServerPrefetch: typeof import('vue')['onServerPrefetch']
32 |   const onUnmounted: typeof import('vue')['onUnmounted']
33 |   const onUpdated: typeof import('vue')['onUpdated']
34 |   const provide: typeof import('vue')['provide']
35 |   const reactive: typeof import('vue')['reactive']
36 |   const readonly: typeof import('vue')['readonly']
37 |   const ref: typeof import('vue')['ref']
38 |   const resolveComponent: typeof import('vue')['resolveComponent']
39 |   const shallowReactive: typeof import('vue')['shallowReactive']
40 |   const shallowReadonly: typeof import('vue')['shallowReadonly']
41 |   const shallowRef: typeof import('vue')['shallowRef']
42 |   const toRaw: typeof import('vue')['toRaw']
43 |   const toRef: typeof import('vue')['toRef']
44 |   const toRefs: typeof import('vue')['toRefs']
45 |   const triggerRef: typeof import('vue')['triggerRef']
46 |   const unref: typeof import('vue')['unref']
47 |   const useAttrs: typeof import('vue')['useAttrs']
48 |   const useCssModule: typeof import('vue')['useCssModule']
49 |   const useSlots: typeof import('vue')['useSlots']
50 |   const watch: typeof import('vue')['watch']
51 |   const watchEffect: typeof import('vue')['watchEffect']
52 | }
53 | export {}
54 | 


--------------------------------------------------------------------------------
/src/components/GDialogOverlay.vue:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 | import {
  3 |   computed, defineComponent, nextTick, ref, watch,
  4 | } from 'vue'
  5 | 
  6 | export default defineComponent({
  7 |   name: 'GDialogOverlay',
  8 |   props: {
  9 |     active: {
 10 |       type: Boolean,
 11 |       required: true,
 12 |     },
 13 | 
 14 |     zIndex: {
 15 |       type: Number,
 16 |       required: true,
 17 |     },
 18 | 
 19 |     background: {
 20 |       type: [Boolean, String],
 21 |       required: true,
 22 |     },
 23 | 
 24 |     local: {
 25 |       type: Boolean,
 26 |       required: true,
 27 |     },
 28 |   },
 29 | 
 30 |   emits: ['click'],
 31 | 
 32 |   setup(props, { emit }) {
 33 |     const styles = computed(() => ({
 34 |       zIndex: props.zIndex - 1,
 35 |     }))
 36 | 
 37 |     const activeProxy = ref(props.active)
 38 |     const deactivating = ref(false)
 39 |     watch(() => props.active, (value) => {
 40 |       deactivating.value = !value
 41 | 
 42 |       // immediate activation
 43 |       if (value) {
 44 |         activeProxy.value = true
 45 |         return
 46 |       }
 47 | 
 48 |       // delayed activation
 49 |       nextTick(() => {
 50 |         activeProxy.value = false
 51 |       })
 52 |     })
 53 | 
 54 |     const classes = computed(() => [
 55 |       'g-dialog-overlay',
 56 |       {
 57 |         'g-dialog-overlay--active': !deactivating.value,
 58 |         'g-dialog-overlay--local': props.local,
 59 |       },
 60 |     ])
 61 | 
 62 |     const computedBackground = computed(() => {
 63 |       if (typeof props.background === 'string')
 64 |         return props.background
 65 | 
 66 |       else if (props.background)
 67 |         return 'var(--overlay-bg)'
 68 | 
 69 |       return 'transparent'
 70 |     })
 71 | 
 72 |     const onClick = () => {
 73 |       emit('click')
 74 |     }
 75 | 
 76 |     return {
 77 |       activeProxy,
 78 |       styles,
 79 |       classes,
 80 |       computedBackground,
 81 |       onClick,
 82 |     }
 83 |   },
 84 | })
 85 | </script>
 86 | 
 87 | <template>
 88 |   <Transition name="fade">
 89 |     <template v-if="activeProxy">
 90 |       <div
 91 |         :class="classes"
 92 |         :style="styles"
 93 |         @click="onClick"
 94 |       />
 95 |     </template>
 96 |   </Transition>
 97 | </template>
 98 | 
 99 | <style lang="scss">
100 | .g-dialog-overlay {
101 |   --overlay-bg: var(--g-dialog-overlay-bg, rgba(33, 33, 33, 0.46));
102 | 
103 |   position: fixed;
104 |   left: 0;
105 |   top: 0;
106 |   right: 0;
107 |   bottom: 0;
108 |   display: flex;
109 |   justify-content: center;
110 |   align-items: center;
111 |   pointer-events: none;
112 |   background: v-bind('computedBackground');
113 |   z-index: 200;
114 | 
115 |   &--active {
116 |     pointer-events: auto;
117 |   }
118 | 
119 |   &--local {
120 |     position: absolute;
121 |   }
122 | }
123 | 
124 | .fade {
125 |   &-enter-active {
126 |     transition: all 0.3s ease-out;
127 |   }
128 | 
129 |   &-leave-active {
130 |     transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
131 |   }
132 | 
133 |   &-enter-from,
134 |   &-leave-to {
135 |     opacity: 0;
136 |   }
137 | }
138 | </style>
139 | 


--------------------------------------------------------------------------------
/src/plugin.ts:
--------------------------------------------------------------------------------
  1 | import type { Plugin } from 'vue'
  2 | import { reactive, shallowReactive } from 'vue'
  3 | 
  4 | import type {
  5 |   DialogInjectionKey, DialogOnCloseEvent, IDialog, IDialogItem,
  6 | } from './types/Plugin'
  7 | 
  8 | const dialogs = shallowReactive<IDialogItem[]>([])
  9 | 
 10 | export const errorLogger = {
 11 |   pluginIsNotInitialized(): void {
 12 |     console.error('The gitart-vue-dialog plugin is not initialized. Read how to solve: https://gitart-vue-dialog.gitart.org/guide/usage/plugin-usage.html#installation')
 13 |   },
 14 | }
 15 | 
 16 | /**
 17 |  * Injection key
 18 |  *
 19 |  * Provides access to plugin methods and properties using the vue inject method
 20 |  *
 21 |  * https://gitart-vue-dialog.gitart.org/guide/usage/plugin-usage.html#usage
 22 |  *
 23 |  * @example Usage
 24 |  * const {
 25 |  *   dialogs,
 26 |  *   removeDialog,
 27 |  * } = inject(dialogInjectionKey)!
 28 |  */
 29 | export const dialogInjectionKey: DialogInjectionKey = Symbol('GDialog')
 30 | 
 31 | export const dialogInjectionFallback: IDialog = {
 32 |   dialogs: [],
 33 |   addDialog: () => {
 34 |     errorLogger.pluginIsNotInitialized()
 35 |     return null as any
 36 |   },
 37 |   removeDialog: () => {
 38 |     errorLogger.pluginIsNotInitialized()
 39 |   },
 40 | }
 41 | 
 42 | /**
 43 |  * Plugin to install
 44 |  *
 45 |  * https://gitart-vue-dialog.gitart.org/guide/usage/plugin-usage.html - Documentation
 46 |  *
 47 |  * @example installation
 48 |  * import { plugin as dialogPlugin } from 'gitart-vue-dialog'
 49 |  * createApp(App)
 50 |  *  .use(dialogPlugin)
 51 |  *  .mount('#app')
 52 |  */
 53 | export const plugin: Plugin = {
 54 |   install: (app, options) => {
 55 |     const defaultCloseDelay = options?.closeDelay ?? 500
 56 |     const defaultProps = options?.props ?? {}
 57 | 
 58 |     const $dialog: IDialog = {
 59 |       dialogs,
 60 | 
 61 |       addDialog: ({ component, props, id }, hooks) => {
 62 |         const dialogId = id ?? Date.now() + Math.random()
 63 | 
 64 |         dialogs.push({
 65 |           component,
 66 |           id: dialogId,
 67 | 
 68 |           props: reactive({
 69 |             modelValue: true,
 70 |             ...defaultProps,
 71 |             ...props,
 72 |           }),
 73 | 
 74 |           onClose: hooks?.onClose,
 75 |         })
 76 | 
 77 |         return dialogId
 78 |       },
 79 | 
 80 |       removeDialog: (id, closeDelay) => {
 81 |         const dialog = dialogs.find(d => d.id === id)
 82 | 
 83 |         if (!dialog || !dialog.props.modelValue)
 84 |           return
 85 | 
 86 |         let canceled = false
 87 |         const event: DialogOnCloseEvent = {
 88 |           id,
 89 |           cancel: () => {
 90 |             console.warn('Dialog closing canceled')
 91 |             canceled = true
 92 |           },
 93 |           item: dialog,
 94 |         }
 95 | 
 96 |         if (dialog.onClose) {
 97 |           dialog.onClose(event)
 98 | 
 99 |           if (canceled)
100 |             return
101 |         }
102 | 
103 |         dialog.props.modelValue = false
104 |         setTimeout(() => {
105 |           dialogs.splice(dialogs.indexOf(dialog), 1)
106 |         }, closeDelay ?? defaultCloseDelay)
107 |       },
108 |     }
109 | 
110 |     app.provide(dialogInjectionKey, $dialog)
111 |     app.config.globalProperties.$dialog = $dialog
112 |   },
113 | }
114 | 


--------------------------------------------------------------------------------
/src/components/GDialogContent.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div :class="classes" :style="styles">
  3 |     <slot />
  4 |   </div>
  5 | </template>
  6 | 
  7 | <script lang="ts">
  8 | import { computed, defineComponent } from 'vue'
  9 | 
 10 | import { useSizeStyle } from '../composables/sizeStyle'
 11 | import { convertToUnit } from '../util'
 12 | 
 13 | export default defineComponent({
 14 |   name: 'GDialogContent',
 15 |   props: {
 16 |     background: {
 17 |       type: [Boolean, String],
 18 |       required: true,
 19 |     },
 20 | 
 21 |     borderRadius: {
 22 |       type: [Boolean, Number, String],
 23 |       required: true,
 24 |     },
 25 | 
 26 |     class: {
 27 |       type: String,
 28 |       required: true,
 29 |     },
 30 | 
 31 |     depressed: {
 32 |       type: Boolean,
 33 |       required: true,
 34 |     },
 35 | 
 36 |     fullscreen: Boolean,
 37 | 
 38 |     height: {
 39 |       type: [String, Number],
 40 |       required: true,
 41 |     },
 42 | 
 43 |     maxWidth: {
 44 |       type: [String, Number],
 45 |       required: true,
 46 |     },
 47 | 
 48 |     scrollable: {
 49 |       type: Boolean,
 50 |       required: true,
 51 |     },
 52 | 
 53 |     width: {
 54 |       type: [String, Number],
 55 |       required: true,
 56 |     },
 57 |   },
 58 | 
 59 |   setup(props) {
 60 |     const { sizeStyles: styles } = useSizeStyle(props)
 61 |     const classes = computed(() => [
 62 |       'g-dialog-content',
 63 |       props.class,
 64 |       {
 65 |         'g-dialog-content--scrollable': props.scrollable,
 66 |         'g-dialog-content--depressed': props.depressed,
 67 |         'g-dialog-content--fullscreen': props.fullscreen,
 68 |       },
 69 |     ])
 70 | 
 71 |     const computedBackground = computed(() => {
 72 |       if (typeof props.background === 'string')
 73 |         return props.background
 74 | 
 75 |       else if (props.background)
 76 |         return 'var(--content-bg)'
 77 | 
 78 |       return 'transparent'
 79 |     })
 80 | 
 81 |     const computedBorderRadius = computed(() => {
 82 |       if (typeof props.borderRadius === 'string')
 83 |         return convertToUnit(props.borderRadius)
 84 | 
 85 |       else if (props.borderRadius)
 86 |         return 'var(--content-border-radius)'
 87 | 
 88 |       return '0'
 89 |     })
 90 | 
 91 |     return {
 92 |       styles,
 93 |       classes,
 94 |       computedBackground,
 95 |       computedBorderRadius,
 96 |     }
 97 |   },
 98 | })
 99 | </script>
100 | 
101 | <style lang="scss">
102 | .g-dialog-content {
103 |   $dialog: &;
104 | 
105 |   --content-bg: var(--g-dialog-content-bg, #fff);
106 |   --content-border-radius: var(--g-dialog-content-border-radius, 4px);
107 |   --content-shadow:
108 |     var(
109 |       --g-dialog-content-shadow,
110 |       0 11px 15px -7px rgb(0 0 0 / 20%),
111 |       0 24px 38px 3px rgb(0 0 0 / 14%),
112 |       0 9px 46px 8px rgb(0 0 0 / 12%)
113 |     );
114 | 
115 |   pointer-events: auto;
116 |   overflow-y: auto;
117 |   transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
118 |   width: 100%;
119 |   background: v-bind('computedBackground');
120 |   border-radius: v-bind('computedBorderRadius');
121 | 
122 |   &:not(#{$dialog}--depressed):not(#{$dialog}--fullscreen) {
123 |     box-shadow: var(--content-shadow)
124 |   }
125 | 
126 |   &:not(#{$dialog}--fullscreen) {
127 |     max-height: 90%;
128 |     margin: 24px;
129 |   }
130 | 
131 |   &--scrollable {
132 |     display: flex;
133 |   }
134 | 
135 |   &--fullscreen {
136 |     height: 100%;
137 |     border-radius: 0;
138 |   }
139 | }
140 | </style>
141 | 


--------------------------------------------------------------------------------
/src/components/GDialogFrame.vue:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 | import { computed, defineComponent, ref } from 'vue'
  3 | 
  4 | import GDialogContent from './GDialogContent.vue'
  5 | 
  6 | export default defineComponent({
  7 |   name: 'GDialogFrame',
  8 |   components: {
  9 |     GDialogContent,
 10 |   },
 11 |   inheritAttrs: false,
 12 |   props: {
 13 |     isActive: {
 14 |       type: Boolean,
 15 |       required: true,
 16 |     },
 17 | 
 18 |     zIndex: {
 19 |       type: Number,
 20 |       required: true,
 21 |     },
 22 | 
 23 |     background: {
 24 |       type: [Boolean, String],
 25 |       required: true,
 26 |     },
 27 | 
 28 |     borderRadius: {
 29 |       type: [Boolean, Number, String],
 30 |       required: true,
 31 |     },
 32 | 
 33 |     contentClass: {
 34 |       type: String,
 35 |       required: true,
 36 |     },
 37 | 
 38 |     depressed: {
 39 |       type: Boolean,
 40 |       required: true,
 41 |     },
 42 | 
 43 |     fullscreen: {
 44 |       type: Boolean,
 45 |       required: true,
 46 |     },
 47 | 
 48 |     height: {
 49 |       type: [String, Number],
 50 |       required: true,
 51 |     },
 52 | 
 53 |     local: {
 54 |       type: Boolean,
 55 |       required: true,
 56 |     },
 57 | 
 58 |     maxWidth: {
 59 |       type: [String, Number],
 60 |       required: true,
 61 |     },
 62 | 
 63 |     scrollable: {
 64 |       type: Boolean,
 65 |       required: true,
 66 |     },
 67 | 
 68 |     transition: {
 69 |       type: String,
 70 |       required: true,
 71 |     },
 72 | 
 73 |     width: {
 74 |       type: [String, Number],
 75 |       required: true,
 76 |     },
 77 |   },
 78 | 
 79 |   setup(props) {
 80 |     const frameElement = ref<Element>()
 81 | 
 82 |     // Add a quick "bounce" animation to the content
 83 |     const animateClick = () => {
 84 |       frameElement.value?.animate?.([
 85 |         { transformOrigin: 'center' },
 86 |         { transform: 'scale(1.03)' },
 87 |         { transformOrigin: 'center' },
 88 |       ], {
 89 |         duration: 150,
 90 |         easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
 91 |       })
 92 |     }
 93 | 
 94 |     const classes = computed(() => [
 95 |       'g-dialog-frame',
 96 |       {
 97 |         'g-dialog-frame--active': props.isActive,
 98 |         'g-dialog-frame--local': props.local,
 99 |       },
100 |     ])
101 | 
102 |     const styles = computed(() => ({
103 |       zIndex: props.zIndex,
104 |     }))
105 | 
106 |     return {
107 |       frameElement,
108 | 
109 |       classes,
110 |       styles,
111 |       animateClick,
112 |     }
113 |   },
114 | })
115 | </script>
116 | 
117 | <template>
118 |   <Transition :name="transition">
119 |     <div
120 |       v-show="isActive"
121 |       ref="frameElement"
122 |       :class="classes"
123 |       :style="styles"
124 |     >
125 |       <GDialogContent
126 |         :class="contentClass"
127 |         :max-width="maxWidth"
128 |         :width="width"
129 |         :height="height"
130 |         :scrollable="scrollable"
131 |         :depressed="depressed"
132 |         :fullscreen="fullscreen"
133 |         :background="background"
134 |         :border-radius="borderRadius"
135 |       >
136 |         <slot />
137 |       </GDialogContent>
138 |     </div>
139 |   </Transition>
140 | </template>
141 | 
142 | <style lang="scss">
143 | .g-dialog-frame {
144 |   --frame-transition-duration: var(--g-dialog-transition-duration, 0.2s);
145 | 
146 |   align-items: center;
147 |   display: flex;
148 |   height: 100%;
149 |   justify-content: center;
150 |   left: 0;
151 |   position: fixed;
152 |   top: 0;
153 |   transition-duration: 0.2s;
154 |   transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
155 |   width: 100%;
156 |   outline: none;
157 |   pointer-events: none;
158 |   z-index: 201;
159 | 
160 |   &--local {
161 |     position: absolute;
162 |   }
163 | }
164 | 
165 | .g-dialog-transition {
166 |   opacity: 0;
167 | 
168 |   &-enter-active,
169 |   &-leave-active {
170 |     transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
171 |     transition-duration: var(--frame-transition-duration);
172 |   }
173 | 
174 |   &-enter-from,
175 |   &-leave-to {
176 |     transform: scale(0.5);
177 |     opacity: 0;
178 |   }
179 | }
180 | </style>
181 | 


--------------------------------------------------------------------------------
/src/assets/gitart-dialog-logo.svg:
--------------------------------------------------------------------------------
 1 | <svg width="172" height="156" viewBox="0 0 172 156" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <rect y="21" width="147.231" height="135" rx="4" fill="url(#paint0_linear)"/>
 3 | <g filter="url(#filter0_d)">
 4 | <rect x="18" y="6" width="147.231" height="137.5" rx="4" fill="url(#paint1_linear)"/>
 5 | </g>
 6 | <g filter="url(#filter1_d)">
 7 | <path d="M17.7693 10C17.7693 7.79086 19.5601 6 21.7693 6H161C163.209 6 165 7.79086 165 10V43.5H17.7693V10Z" fill="#C4C4C4" fill-opacity="0.01" shape-rendering="crispEdges"/>
 8 | </g>
 9 | <path d="M40.3896 29.6523C39.9941 30.126 39.4351 30.4946 38.7124 30.7583C37.9897 31.0171 37.189 31.1465 36.3101 31.1465C35.3872 31.1465 34.5767 30.9463 33.8784 30.5459C33.1851 30.1406 32.6479 29.5547 32.2671 28.7881C31.8911 28.0215 31.6982 27.1206 31.6885 26.0854V25.3604C31.6885 24.2959 31.8667 23.3755 32.2231 22.5991C32.5845 21.8179 33.1021 21.2222 33.7759 20.812C34.4546 20.397 35.248 20.1895 36.1562 20.1895C37.4209 20.1895 38.4097 20.4922 39.1226 21.0977C39.8354 21.6982 40.2578 22.5747 40.3896 23.7271H38.251C38.1533 23.1167 37.936 22.6699 37.5991 22.3867C37.2671 22.1035 36.8081 21.9619 36.2222 21.9619C35.4751 21.9619 34.9062 22.2427 34.5156 22.8042C34.125 23.3657 33.9272 24.2007 33.9224 25.3091V25.9902C33.9224 27.1084 34.1348 27.9531 34.5596 28.5244C34.9844 29.0957 35.6069 29.3813 36.4272 29.3813C37.2524 29.3813 37.8408 29.2056 38.1924 28.854V27.0156H36.1929V25.397H40.3896V29.6523ZM44.2715 31H42.1475V23.0752H44.2715V31ZM42.0229 21.0244C42.0229 20.707 42.1279 20.4458 42.3379 20.2407C42.5527 20.0356 42.8433 19.9331 43.2095 19.9331C43.5708 19.9331 43.8589 20.0356 44.0737 20.2407C44.2886 20.4458 44.396 20.707 44.396 21.0244C44.396 21.3467 44.2861 21.6104 44.0664 21.8154C43.8516 22.0205 43.5659 22.123 43.2095 22.123C42.853 22.123 42.5649 22.0205 42.3452 21.8154C42.1304 21.6104 42.0229 21.3467 42.0229 21.0244ZM48.5562 21.127V23.0752H49.9111V24.6279H48.5562V28.583C48.5562 28.876 48.6123 29.0859 48.7246 29.2129C48.8369 29.3398 49.0518 29.4033 49.3691 29.4033C49.6035 29.4033 49.811 29.3862 49.9917 29.3521V30.9561C49.5767 31.083 49.1494 31.1465 48.71 31.1465C47.2256 31.1465 46.4688 30.397 46.4395 28.8979V24.6279H45.2822V23.0752H46.4395V21.127H48.5562ZM55.6826 31C55.585 30.8096 55.5142 30.5728 55.4702 30.2896C54.9575 30.8608 54.291 31.1465 53.4707 31.1465C52.6943 31.1465 52.0498 30.9219 51.5371 30.4727C51.0293 30.0234 50.7754 29.457 50.7754 28.7734C50.7754 27.9336 51.0854 27.2891 51.7056 26.8398C52.3306 26.3906 53.2314 26.1636 54.4082 26.1587H55.3823V25.7046C55.3823 25.3384 55.2871 25.0454 55.0967 24.8257C54.9111 24.606 54.6157 24.4961 54.2104 24.4961C53.854 24.4961 53.5732 24.5815 53.3682 24.7524C53.168 24.9233 53.0679 25.1577 53.0679 25.4556H50.9512C50.9512 24.9966 51.0928 24.5718 51.376 24.1812C51.6592 23.7905 52.0596 23.4854 52.5771 23.2656C53.0947 23.041 53.6758 22.9287 54.3203 22.9287C55.2969 22.9287 56.0708 23.1753 56.6421 23.6685C57.2183 24.1567 57.5063 24.8452 57.5063 25.7339V29.1689C57.5112 29.9209 57.6162 30.4897 57.8213 30.8755V31H55.6826ZM53.9321 29.5278C54.2446 29.5278 54.5327 29.4595 54.7964 29.3228C55.0601 29.1812 55.2554 28.9932 55.3823 28.7588V27.3965H54.5913C53.5317 27.3965 52.9678 27.7627 52.8994 28.4951L52.8921 28.6196C52.8921 28.8833 52.9849 29.1006 53.1704 29.2715C53.356 29.4424 53.6099 29.5278 53.9321 29.5278ZM63.5854 25.0601C63.2974 25.021 63.0435 25.0015 62.8237 25.0015C62.0229 25.0015 61.498 25.2725 61.249 25.8145V31H59.1323V23.0752H61.1318L61.1904 24.02C61.6152 23.2925 62.2036 22.9287 62.9556 22.9287C63.1899 22.9287 63.4097 22.9604 63.6147 23.0239L63.5854 25.0601ZM67.5112 21.127V23.0752H68.8662V24.6279H67.5112V28.583C67.5112 28.876 67.5674 29.0859 67.6797 29.2129C67.792 29.3398 68.0068 29.4033 68.3242 29.4033C68.5586 29.4033 68.7661 29.3862 68.9468 29.3521V30.9561C68.5317 31.083 68.1045 31.1465 67.665 31.1465C66.1807 31.1465 65.4238 30.397 65.3945 28.8979V24.6279H64.2373V23.0752H65.3945V21.127H67.5112Z" fill="white"/>
10 | <g filter="url(#filter2_d)">
11 | <path d="M137.297 18.5L149.769 31M137.077 31L149.549 18.5" stroke="white" stroke-width="6" stroke-linecap="round"/>
12 | </g>
13 | <path d="M31 67.5C31 63.9101 33.9101 61 37.5 61H115.5C119.09 61 122 63.9101 122 67.5V67.5C122 71.0899 119.09 74 115.5 74H37.5C33.9102 74 31 71.0899 31 67.5V67.5Z" fill="white"/>
14 | <path d="M31 92C31 88.6863 33.6863 86 37 86H71C74.3137 86 77 88.6863 77 92V92C77 95.3137 74.3137 98 71 98H37C33.6863 98 31 95.3137 31 92V92Z" fill="white"/>
15 | <path d="M31 116.5C31 112.91 33.9101 110 37.5 110H99.5C103.09 110 106 112.91 106 116.5V116.5C106 120.09 103.09 123 99.5 123H37.5C33.9101 123 31 120.09 31 116.5V116.5Z" fill="white"/>
16 | <defs>
17 | <filter id="filter0_d" x="12" y="2" width="159.231" height="149.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
18 | <feFlood flood-opacity="0" result="BackgroundImageFix"/>
19 | <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
20 | <feOffset dy="2"/>
21 | <feGaussianBlur stdDeviation="3"/>
22 | <feComposite in2="hardAlpha" operator="out"/>
23 | <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"/>
24 | <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
25 | <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
26 | </filter>
27 | <filter id="filter1_d" x="11.7693" y="0" width="159.231" height="49.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
28 | <feFlood flood-opacity="0" result="BackgroundImageFix"/>
29 | <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
30 | <feOffset/>
31 | <feGaussianBlur stdDeviation="3"/>
32 | <feComposite in2="hardAlpha" operator="out"/>
33 | <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"/>
34 | <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
35 | <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
36 | </filter>
37 | <filter id="filter2_d" x="130.077" y="12.5" width="24.6923" height="24.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
38 | <feFlood flood-opacity="0" result="BackgroundImageFix"/>
39 | <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
40 | <feOffset dx="-1"/>
41 | <feGaussianBlur stdDeviation="1.5"/>
42 | <feComposite in2="hardAlpha" operator="out"/>
43 | <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
44 | <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
45 | <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
46 | </filter>
47 | <linearGradient id="paint0_linear" x1="0" y1="21" x2="123.291" y2="175.148" gradientUnits="userSpaceOnUse">
48 | <stop stop-color="#A78BFA"/>
49 | <stop offset="0.505208" stop-color="#EC4899"/>
50 | <stop offset="1" stop-color="#EF4444"/>
51 | </linearGradient>
52 | <linearGradient id="paint1_linear" x1="18" y1="6" x2="144.061" y2="160.746" gradientUnits="userSpaceOnUse">
53 | <stop stop-color="#A78BFA"/>
54 | <stop offset="0.505208" stop-color="#EC4899"/>
55 | <stop offset="1" stop-color="#EF4444"/>
56 | </linearGradient>
57 | </defs>
58 | </svg>
59 | 


--------------------------------------------------------------------------------
/src/components/GDialog.vue:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 | import { computed, defineComponent, getCurrentInstance, nextTick, onBeforeUnmount, onMounted, onUnmounted, ref, watch } from 'vue'
  3 | 
  4 | import { IN_BROWSER } from '../util'
  5 | import { useStack } from '../composables/stack'
  6 | import { useOverlay } from '../composables/overlay'
  7 | import { useLazyActivation } from '../composables/lazyActivation'
  8 | import { useScroll } from '../composables/scroll'
  9 | import { useWindowEventListener } from '../composables/window'
 10 | 
 11 | import GDialogOverlay from './GDialogOverlay.vue'
 12 | import GDialogFrame from './GDialogFrame.vue'
 13 | 
 14 | export default defineComponent({
 15 |   name: 'GDialog',
 16 |   components: {
 17 |     GDialogOverlay,
 18 |     GDialogFrame,
 19 |   },
 20 | 
 21 |   inheritAttrs: false,
 22 |   props: {
 23 |     background: {
 24 |       type: [Boolean, String],
 25 |       default: true,
 26 |     },
 27 | 
 28 |     borderRadius: {
 29 |       type: [Boolean, Number, String],
 30 |       default: true,
 31 |     },
 32 | 
 33 |     contentClass: {
 34 |       type: String,
 35 |       default: '',
 36 |     },
 37 | 
 38 |     /**
 39 |      * removes box-shadow for content
 40 |      */
 41 |     depressed: Boolean,
 42 | 
 43 |     fullscreen: Boolean,
 44 | 
 45 |     height: {
 46 |       type: [String, Number],
 47 |       default: 'auto',
 48 |     },
 49 | 
 50 |     /**
 51 |      * enables local mode for the dialog.
 52 |      * dialog is fixed to first "position: relative;" parent
 53 |      */
 54 |     local: Boolean,
 55 | 
 56 |     maxWidth: {
 57 |       type: [String, Number],
 58 |       default: 'none',
 59 |     },
 60 | 
 61 |     modelValue: {
 62 |       type: Boolean,
 63 |       default: undefined,
 64 |     },
 65 | 
 66 |     noClickAnimation: Boolean,
 67 | 
 68 |     overlayBackground: {
 69 |       type: [Boolean, String],
 70 |       default: true,
 71 |     },
 72 | 
 73 |     /**
 74 |      * clicking outside content will not close modal
 75 |      */
 76 |     persistent: Boolean,
 77 | 
 78 |     scrollable: Boolean,
 79 | 
 80 |     /**
 81 |      * CSS selector string or an actual DOM node where
 82 |      * where to teleport dialog when it is opened.
 83 |      */
 84 |     teleportTo: {
 85 |       type: String,
 86 |       default: 'body',
 87 |     },
 88 | 
 89 |     /**
 90 |      * disables teleport.
 91 |      */
 92 |     disableTeleport: Boolean,
 93 | 
 94 |     transition: {
 95 |       type: String,
 96 |       default: 'g-dialog-transition',
 97 |     },
 98 | 
 99 |     width: {
100 |       type: [String, Number],
101 |       default: 'auto',
102 |     },
103 | 
104 |     /**
105 |      * it true, the dialog will add hash to the url.
106 |      * and will be closed on browser back button.
107 |      */
108 |     closeOnBack: {
109 |       type: Boolean,
110 |       default: false,
111 |     },
112 |   },
113 | 
114 |   emits: {
115 |     'update:modelValue': (val: boolean) => true,
116 |   },
117 | 
118 |   setup(props, { emit }) {
119 |     const overlayComponent = ref<InstanceType<typeof GDialogOverlay> | null>(null)
120 |     const frameComponent = ref<InstanceType<typeof GDialogFrame> | null>(null)
121 | 
122 |     const overlayElement = computed<Element | undefined>(() => overlayComponent.value?.$el as Element)
123 |     const frameElement = computed<Element | undefined>(() => frameComponent.value?.$el as Element)
124 | 
125 |     const withModelValue = props.modelValue !== undefined
126 | 
127 |     const scopedModelValue = ref(false)
128 |     watch(() => props.modelValue, (val) => {
129 |       scopedModelValue.value = !!val
130 |     })
131 | 
132 |     const { isTop } = useStack(scopedModelValue)
133 | 
134 |     /**
135 |      * if props.modelValue is true at app startup, set true for
136 |      * scopedModelValue on nextTick (after nuxt hydration).
137 |      *
138 |      * teleport on server-side gives hydration mismatch.
139 |      * scopedModelValue can only be true in the browser.
140 |      */
141 |     if (IN_BROWSER && props.modelValue) {
142 |       nextTick(() => {
143 |         scopedModelValue.value = true
144 |       })
145 |     }
146 | 
147 |     const onClose = () => {
148 |       if (!withModelValue)
149 |         scopedModelValue.value = false
150 | 
151 |       emit('update:modelValue', false)
152 |     }
153 | 
154 |     const onOpen = () => {
155 |       if (!withModelValue)
156 |         scopedModelValue.value = false
157 | 
158 |       emit('update:modelValue', true)
159 |     }
160 | 
161 |     const { activatedOnce, active: isActive } = useLazyActivation(scopedModelValue)
162 | 
163 |     const { zIndex } = useOverlay(isActive)
164 | 
165 |     // Add a quick "bounce" animation to the content
166 |     const animateClick = () => {
167 |       if (props.noClickAnimation) return
168 | 
169 |       frameComponent.value?.animateClick()
170 |     }
171 | 
172 |     useWindowEventListener('keyup', (ev) => {
173 |       if (ev.key === 'Escape' && isTop.value) {
174 |         if (!props.persistent)
175 |           onClose()
176 | 
177 |         else
178 |           animateClick()
179 |       }
180 |     }, { passive: true })
181 | 
182 |     // scroll
183 |     const { enableScroll, disableScroll } = useScroll({
184 |       overlay: overlayElement,
185 |       content: frameElement,
186 |       contentActiveClass: 'g-dialog-frame--active',
187 |       fullscreen: props.fullscreen,
188 |       contentFullscreenClass: 'g-dialog-frame--fullscreen',
189 |     })
190 | 
191 |     watch(isActive, (active) => {
192 |       if (props.local)
193 |         return
194 | 
195 |       if (active)
196 |         disableScroll()
197 | 
198 |       else
199 |         enableScroll()
200 |     })
201 | 
202 |     onBeforeUnmount(() => {
203 |       enableScroll()
204 |     })
205 | 
206 |     // click outside
207 |     const onClickOutside = () => {
208 |       if (!props.persistent)
209 |         onClose()
210 | 
211 |       else
212 |         animateClick()
213 |     }
214 | 
215 |     // close on back button
216 |     if (IN_BROWSER && props.closeOnBack) {
217 |       const instace = getCurrentInstance()!
218 | 
219 |       let currentDialogHash = `dialog-${instace.uid}`
220 |       if (window.location.hash)
221 |         currentDialogHash = `${window.location.hash.slice(1)}-${currentDialogHash}`
222 | 
223 |       const popstateListener = () => {
224 |         if (window.location.hash.includes(currentDialogHash) || !scopedModelValue.value)
225 |           return
226 | 
227 |         onClose()
228 |       }
229 | 
230 |       onMounted(() => {
231 |         if (scopedModelValue.value)
232 |           window.location.hash = currentDialogHash
233 | 
234 |         window.addEventListener('popstate', popstateListener)
235 |       })
236 | 
237 |       onUnmounted(() => {
238 |         window.removeEventListener('popstate', popstateListener)
239 |       })
240 | 
241 |       watch(scopedModelValue, (value) => {
242 |         if (!value && window.location.hash.includes(currentDialogHash)) {
243 |           window.history.back()
244 |         }
245 |         else if (value) {
246 |           if (window.location.hash)
247 |             currentDialogHash = `${window.location.hash.slice(1)}-${`dialog-${instace.uid}`}`
248 |           else
249 |             currentDialogHash = `dialog-${instace.uid}`
250 | 
251 |           window.location.hash = `#${currentDialogHash}`
252 |         }
253 |       })
254 |     }
255 | 
256 |     // activator slot
257 |     const activatorAttrs = {
258 |       onClick() {
259 |         onOpen()
260 |       },
261 |     }
262 | 
263 |     return {
264 |       overlayComponent,
265 |       frameComponent,
266 | 
267 |       activatedOnce,
268 |       zIndex,
269 |       isActive,
270 |       activatorAttrs,
271 |       onClickOutside,
272 |       onClose,
273 |     }
274 |   },
275 | })
276 | </script>
277 | 
278 | <template>
279 |   <slot name="activator" v-bind="activatorAttrs" />
280 | 
281 |   <template v-if="activatedOnce">
282 |     <Teleport :to="teleportTo" :disabled="local || disableTeleport">
283 |       <GDialogOverlay
284 |         v-if="!fullscreen"
285 |         ref="overlayComponent"
286 |         :active="isActive"
287 |         :z-index="zIndex"
288 |         :background="overlayBackground"
289 |         :local="local"
290 |         @click="onClickOutside"
291 |       />
292 |     </Teleport>
293 | 
294 |     <Teleport :to="teleportTo" :disabled="local || disableTeleport">
295 |       <GDialogFrame
296 |         ref="frameComponent"
297 |         :is-active="isActive"
298 |         :z-index="zIndex"
299 |         :max-width="maxWidth"
300 |         :width="width"
301 |         :height="height"
302 |         :scrollable="scrollable"
303 |         :transition="transition"
304 |         :depressed="depressed"
305 |         :fullscreen="fullscreen"
306 |         :background="background"
307 |         :border-radius="borderRadius"
308 |         :content-class="contentClass"
309 |         :local="local"
310 |         :persistent="persistent"
311 |       >
312 |         <slot :on-close="onClose" />
313 |       </GDialogFrame>
314 |     </Teleport>
315 |   </template>
316 | </template>
317 | 


--------------------------------------------------------------------------------