From 9562ebec51ce003695a4bff7ad5b90ca7d7efb68 Mon Sep 17 00:00:00 2001 From: Hunter Date: Thu, 30 Nov 2023 13:33:05 +0800 Subject: [PATCH 1/6] refactor: delete CoreModal, this will also fixed #362 --- docs/content/2.get-started/1.guide/2.setup.md | 2 +- .../cypress/components/useZIndex.spec.ts | 21 +- .../src/components/CoreModal/CoreModal.vue | 335 ----------------- .../components/CoreModal/CoreModalProps.ts | 232 ------------ .../VueFinalModal/VueFinalModal.vue | 343 +++++++++++++++++- .../VueFinalModal/VueFinalModalProps.ts | 232 +++++++++++- .../useBodyScrollLock.ts | 4 +- .../useFocusTrap.ts | 4 +- .../useModelValue.ts | 6 +- .../useToClose.ts | 6 +- .../useTransition.ts | 4 +- .../{CoreModal => VueFinalModal}/useZIndex.ts | 4 +- .../{CoreModal => VueFinalModal}/vVisible.ts | 0 packages/vue-final-modal/src/index.ts | 3 - packages/vue-final-modal/src/useApi.ts | 4 +- .../vue-final-modal/src/useSwipeToClose.ts | 4 +- 16 files changed, 588 insertions(+), 616 deletions(-) delete mode 100644 packages/vue-final-modal/src/components/CoreModal/CoreModal.vue delete mode 100644 packages/vue-final-modal/src/components/CoreModal/CoreModalProps.ts rename packages/vue-final-modal/src/components/{CoreModal => VueFinalModal}/useBodyScrollLock.ts (98%) rename packages/vue-final-modal/src/components/{CoreModal => VueFinalModal}/useFocusTrap.ts (84%) rename packages/vue-final-modal/src/components/{CoreModal => VueFinalModal}/useModelValue.ts (88%) rename packages/vue-final-modal/src/components/{CoreModal => VueFinalModal}/useToClose.ts (85%) rename packages/vue-final-modal/src/components/{CoreModal => VueFinalModal}/useTransition.ts (96%) rename packages/vue-final-modal/src/components/{CoreModal => VueFinalModal}/useZIndex.ts (76%) rename packages/vue-final-modal/src/components/{CoreModal => VueFinalModal}/vVisible.ts (100%) diff --git a/docs/content/2.get-started/1.guide/2.setup.md b/docs/content/2.get-started/1.guide/2.setup.md index dbce3c46..14a3f7bf 100644 --- a/docs/content/2.get-started/1.guide/2.setup.md +++ b/docs/content/2.get-started/1.guide/2.setup.md @@ -60,7 +60,7 @@ export default defineNuxtPlugin((nuxtApp) => { ## Import required CSS -vue-final-modal 4 has tiny size of required CSS (gzipped 0.49kb). All classes have a `.vfm-` prefix, so you don't have to worry about any CSS pollution. _[See style of ``.](https://github.com/vue-final/vue-final-modal/blob/v4/packages/vue-final-modal/src/components/CoreModal/CoreModal.vue#L184-L217)_ +vue-final-modal 4 has tiny size of required CSS (gzipped 0.49kb). All classes have a `.vfm-` prefix, so you don't have to worry about any CSS pollution. ### Vue 3 diff --git a/packages/vue-final-modal/cypress/components/useZIndex.spec.ts b/packages/vue-final-modal/cypress/components/useZIndex.spec.ts index 1d477bb1..9075bb98 100644 --- a/packages/vue-final-modal/cypress/components/useZIndex.spec.ts +++ b/packages/vue-final-modal/cypress/components/useZIndex.spec.ts @@ -25,24 +25,22 @@ describe('Test useZIndex()', () => { stubs: { transition: false }, }, }).as('app') - cy.get('@app').then(() => { - firstModal.open() - }) + + cy.get('@app').then(() => firstModal.open()) cy.get('.first-modal').should(($el) => { expect($el).to.have.css('zIndex', '1000') }) - cy.get('@app').then(() => { - secondModal.open() - }) + + cy.get('@app').then(() => secondModal.open()) cy.get('.second-modal').should(($el) => { expect($el).to.have.css('zIndex', '1002') }) - cy.get('@app').then(() => { - thirdModal.open() - }) + + cy.get('@app').then(() => thirdModal.open()) cy.get('.third-modal').should(($el) => { expect($el).to.have.css('zIndex', '1004') }) + cy.get('@app').then(() => { thirdModal.patchOptions({ attrs: { @@ -53,9 +51,8 @@ describe('Test useZIndex()', () => { cy.get('.third-modal').should(($el) => { expect($el).to.have.css('zIndex', '1238') }) - cy.get('@app').then(() => { - firstModal.close() - }) + + cy.get('@app').then(() => firstModal.close()) cy.get('.second-modal').should(($el) => { expect($el).to.have.css('zIndex', '1000') }) diff --git a/packages/vue-final-modal/src/components/CoreModal/CoreModal.vue b/packages/vue-final-modal/src/components/CoreModal/CoreModal.vue deleted file mode 100644 index a50d1fe0..00000000 --- a/packages/vue-final-modal/src/components/CoreModal/CoreModal.vue +++ /dev/null @@ -1,335 +0,0 @@ - - - - - diff --git a/packages/vue-final-modal/src/components/CoreModal/CoreModalProps.ts b/packages/vue-final-modal/src/components/CoreModal/CoreModalProps.ts deleted file mode 100644 index ad467d47..00000000 --- a/packages/vue-final-modal/src/components/CoreModal/CoreModalProps.ts +++ /dev/null @@ -1,232 +0,0 @@ -import type { Options } from 'focus-trap' -import type { PropType, TransitionProps } from 'vue' -import type { ModalId, StyleValue } from '~/Modal' - -// Hack from: https://github.com/microsoft/TypeScript/issues/29729#issuecomment-1331857805 -type AnyString = string & {} -type VfmTransition = 'vfm-fade' | 'vfm-slide-down' | 'vfm-slide-up' | 'vfm-slide-right' | 'vfm-slide-left' | AnyString - -export const coreModalProps = { - /** - * @description An uniq name for the open/close a modal via vfm.open/vfm.close APIs. - * @default `undefined` - * @example Symbol: `Symbol('MyModal')` - * @example String: `'AUniqString'` - * @example Number: `300` - */ - modalId: { - type: [String, Number, Symbol] as PropType, - default: undefined, - }, - /** - * @description Display the modal or not. - * @default `undefined` - * @example - * ```js - * const showModal = ref(false) - * v-model="showModal" - * ``` - */ - modelValue: { - type: Boolean as PropType, - default: undefined, - }, - /** - * @description Render the modal via `if` or `show`. - * @default `'if'` - * @example - * ```js - * displayDirective: 'if' - * ``` - * @example - * ```js - * displayDirective: 'show' - * ``` - */ - displayDirective: { - type: String as PropType<'if' | 'show' | 'visible'>, - default: 'if', - validator: (prop: any) => ['if', 'show', 'visible'].includes(prop), - }, - /** - * @description Hide the overlay or not. - * @default `undefined` - * @example - * ```js - * hideOverlay="true" - * ``` - */ - hideOverlay: { - type: Boolean as PropType, - default: undefined, - }, - /** - * @description Customize the overlay transition. - * @default `undefined` - */ - overlayTransition: { - type: [String, Object] as PropType, - default: undefined, - }, - /** - * @description Customize the content transition. - * @default `undefined` - */ - contentTransition: { - type: [String, Object] as PropType, - default: undefined, - }, - /** - * @description Bind class to vfm__overlay. - * @default `undefined` - */ - overlayClass: { - type: undefined as unknown as PropType, - default: undefined, - }, - /** - * @description Bind class to vfm__content. - * @default `undefined` - */ - contentClass: { - type: undefined as unknown as PropType, - default: undefined, - }, - /** - * @description Bind style to vfm__overlay. - * @default `undefined` - */ - overlayStyle: { - type: [String, Object, Array] as PropType, - default: undefined, - }, - /** - * @description Bind style to vfm__content. - * @default `undefined` - */ - contentStyle: { - type: [String, Object, Array] as PropType, - default: undefined, - }, - /** - * @description Is it allow to close the modal by clicking the overlay. - * @default `true` - */ - clickToClose: { - type: Boolean as PropType, - default: true, - }, - /** - * @description Is it allow to close the modal by keypress `esc`. - * @default `true` - */ - escToClose: { - type: Boolean as PropType, - default: true, - }, - /** - * @description Is it allow to click outside of the vfm__content when the modal is opened - * @default `'non-interactive'` - */ - background: { - type: String as PropType<'interactive' | 'non-interactive'>, - default: 'non-interactive', - validator: (prop: any) => ['interactive', 'non-interactive'].includes(prop), - }, - /** - * @description - * * Use `{ disabled: true }` to disable the focusTrap. - * * Checkout the createOptions type here https://github.com/focus-trap/focus-trap for more. - * @default `{ allowOutsideClick: true }` - */ - focusTrap: { - type: [Boolean, Object] as PropType, - default: () => ({ - allowOutsideClick: true, - }), - }, - /** - * @description Lock body scroll or not when the modal is opened. - * @default `true` - */ - lockScroll: { - type: Boolean as PropType, - default: true, - }, - /** - * @description Creates a padding-right when scroll is locked to prevent the page from jumping - * @default `true` - */ - reserveScrollBarGap: { - type: Boolean as PropType, - default: true, - }, - /** - * @description Define how to increase the zIndex when there are nested modals - * @default `({ index }) => 1000 + 2 * index` - */ - zIndexFn: { - type: Function as PropType<(context: { index: number }) => number | undefined>, - default: ({ index }: { index: number }) => 1000 + 2 * index, - }, - /** - * @description The direction of swiping to close the modal - * @default `none` - * @example - * Set swipeToClose="none" to disable swiping to close - * ```js - * swipeToClose="none" - * ``` - */ - swipeToClose: { - type: String as PropType<'none' | 'up' | 'right' | 'down' | 'left'>, - default: 'none', - validator: (prop: any) => ['none', 'up', 'right', 'down', 'left'].includes(prop), - }, - /** - * @description Threshold for swipe to close - * @default `0` - */ - threshold: { - type: Number as PropType, - default: 0, - }, - /** - * @description If set `:showSwipeBanner="true"`, only allow clicking `swipe-banner` slot to swipe to close - * @default `undefined` - * @example - * ```js - * swipeToClose="right" - * :showSwipeBanner="true" - * ``` - * ```html - * - * - * ...modal content - * - * ``` - */ - showSwipeBanner: { - type: Boolean as PropType, - default: undefined, - }, - /** - * @description When set `:preventNavigationGestures="true"`, there will be two invisible bars for prevent navigation gestures including swiping back/forward on mobile webkit. For example: Safari mobile. - * @default `undefined` - * @example - * Set preventNavigationGestures="true" to prevent Safari navigation gestures including swiping back/forward. - * ```js - * :preventNavigationGestures="true" - * ``` - */ - preventNavigationGestures: { - type: Boolean as PropType, - default: undefined, - }, -} as const diff --git a/packages/vue-final-modal/src/components/VueFinalModal/VueFinalModal.vue b/packages/vue-final-modal/src/components/VueFinalModal/VueFinalModal.vue index c82b4009..fbf03e52 100644 --- a/packages/vue-final-modal/src/components/VueFinalModal/VueFinalModal.vue +++ b/packages/vue-final-modal/src/components/VueFinalModal/VueFinalModal.vue @@ -1,31 +1,350 @@ + + diff --git a/packages/vue-final-modal/src/components/VueFinalModal/VueFinalModalProps.ts b/packages/vue-final-modal/src/components/VueFinalModal/VueFinalModalProps.ts index 3bb4f1b7..8e5d8da5 100644 --- a/packages/vue-final-modal/src/components/VueFinalModal/VueFinalModalProps.ts +++ b/packages/vue-final-modal/src/components/VueFinalModal/VueFinalModalProps.ts @@ -1,8 +1,12 @@ -import type { PropType, RendererElement } from 'vue' -import { coreModalProps } from '../CoreModal/CoreModalProps' +import type { Options } from 'focus-trap' +import type { PropType, RendererElement, TransitionProps } from 'vue' +import type { ModalId, StyleValue } from '~/Modal' + +// Hack from: https://github.com/microsoft/TypeScript/issues/29729#issuecomment-1331857805 +type AnyString = string & {} +type VfmTransition = 'vfm-fade' | 'vfm-slide-down' | 'vfm-slide-up' | 'vfm-slide-right' | 'vfm-slide-left' | AnyString export const vueFinalModalProps = { - ...coreModalProps, /** * @description Set `null | false` to disable teleport. * @default `'body'` @@ -15,4 +19,226 @@ export const vueFinalModalProps = { type: [String, null, Boolean, Object] as PropType, default: 'body', }, + /** + * @description An uniq name for the open/close a modal via vfm.open/vfm.close APIs. + * @default `undefined` + * @example Symbol: `Symbol('MyModal')` + * @example String: `'AUniqString'` + * @example Number: `300` + */ + modalId: { + type: [String, Number, Symbol] as PropType, + default: undefined, + }, + /** + * @description Display the modal or not. + * @default `undefined` + * @example + * ```js + * const showModal = ref(false) + * v-model="showModal" + * ``` + */ + modelValue: { + type: Boolean as PropType, + default: undefined, + }, + /** + * @description Render the modal via `if` or `show`. + * @default `'if'` + * @example + * ```js + * displayDirective: 'if' + * ``` + * @example + * ```js + * displayDirective: 'show' + * ``` + */ + displayDirective: { + type: String as PropType<'if' | 'show' | 'visible'>, + default: 'if', + validator: (prop: any) => ['if', 'show', 'visible'].includes(prop), + }, + /** + * @description Hide the overlay or not. + * @default `undefined` + * @example + * ```js + * hideOverlay="true" + * ``` + */ + hideOverlay: { + type: Boolean as PropType, + default: undefined, + }, + /** + * @description Customize the overlay transition. + * @default `undefined` + */ + overlayTransition: { + type: [String, Object] as PropType, + default: undefined, + }, + /** + * @description Customize the content transition. + * @default `undefined` + */ + contentTransition: { + type: [String, Object] as PropType, + default: undefined, + }, + /** + * @description Bind class to vfm__overlay. + * @default `undefined` + */ + overlayClass: { + type: undefined as unknown as PropType, + default: undefined, + }, + /** + * @description Bind class to vfm__content. + * @default `undefined` + */ + contentClass: { + type: undefined as unknown as PropType, + default: undefined, + }, + /** + * @description Bind style to vfm__overlay. + * @default `undefined` + */ + overlayStyle: { + type: [String, Object, Array] as PropType, + default: undefined, + }, + /** + * @description Bind style to vfm__content. + * @default `undefined` + */ + contentStyle: { + type: [String, Object, Array] as PropType, + default: undefined, + }, + /** + * @description Is it allow to close the modal by clicking the overlay. + * @default `true` + */ + clickToClose: { + type: Boolean as PropType, + default: true, + }, + /** + * @description Is it allow to close the modal by keypress `esc`. + * @default `true` + */ + escToClose: { + type: Boolean as PropType, + default: true, + }, + /** + * @description Is it allow to click outside of the vfm__content when the modal is opened + * @default `'non-interactive'` + */ + background: { + type: String as PropType<'interactive' | 'non-interactive'>, + default: 'non-interactive', + validator: (prop: any) => ['interactive', 'non-interactive'].includes(prop), + }, + /** + * @description + * * Use `{ disabled: true }` to disable the focusTrap. + * * Checkout the createOptions type here https://github.com/focus-trap/focus-trap for more. + * @default `{ allowOutsideClick: true }` + */ + focusTrap: { + type: [Boolean, Object] as PropType, + default: () => ({ + allowOutsideClick: true, + }), + }, + /** + * @description Lock body scroll or not when the modal is opened. + * @default `true` + */ + lockScroll: { + type: Boolean as PropType, + default: true, + }, + /** + * @description Creates a padding-right when scroll is locked to prevent the page from jumping + * @default `true` + */ + reserveScrollBarGap: { + type: Boolean as PropType, + default: true, + }, + /** + * @description Define how to increase the zIndex when there are nested modals + * @default `({ index }) => 1000 + 2 * index` + */ + zIndexFn: { + type: Function as PropType<(context: { index: number }) => number | undefined>, + default: ({ index }: { index: number }) => 1000 + 2 * index, + }, + /** + * @description The direction of swiping to close the modal + * @default `none` + * @example + * Set swipeToClose="none" to disable swiping to close + * ```js + * swipeToClose="none" + * ``` + */ + swipeToClose: { + type: String as PropType<'none' | 'up' | 'right' | 'down' | 'left'>, + default: 'none', + validator: (prop: any) => ['none', 'up', 'right', 'down', 'left'].includes(prop), + }, + /** + * @description Threshold for swipe to close + * @default `0` + */ + threshold: { + type: Number as PropType, + default: 0, + }, + /** + * @description If set `:showSwipeBanner="true"`, only allow clicking `swipe-banner` slot to swipe to close + * @default `undefined` + * @example + * ```js + * swipeToClose="right" + * :showSwipeBanner="true" + * ``` + * ```html + * + * + * ...modal content + * + * ``` + */ + showSwipeBanner: { + type: Boolean as PropType, + default: undefined, + }, + /** + * @description When set `:preventNavigationGestures="true"`, there will be two invisible bars for prevent navigation gestures including swiping back/forward on mobile webkit. For example: Safari mobile. + * @default `undefined` + * @example + * Set preventNavigationGestures="true" to prevent Safari navigation gestures including swiping back/forward. + * ```js + * :preventNavigationGestures="true" + * ``` + */ + preventNavigationGestures: { + type: Boolean as PropType, + default: undefined, + }, } as const diff --git a/packages/vue-final-modal/src/components/CoreModal/useBodyScrollLock.ts b/packages/vue-final-modal/src/components/VueFinalModal/useBodyScrollLock.ts similarity index 98% rename from packages/vue-final-modal/src/components/CoreModal/useBodyScrollLock.ts rename to packages/vue-final-modal/src/components/VueFinalModal/useBodyScrollLock.ts index 4e009e64..dd710360 100644 --- a/packages/vue-final-modal/src/components/CoreModal/useBodyScrollLock.ts +++ b/packages/vue-final-modal/src/components/VueFinalModal/useBodyScrollLock.ts @@ -1,6 +1,6 @@ import type { Ref } from 'vue' import { onBeforeUnmount, watch } from 'vue' -import type CoreModal from './CoreModal.vue' +import type VueFinalModal from './VueFinalModal.vue' type BodyScrollOptions = { reserveScrollBarGap?: boolean @@ -233,7 +233,7 @@ export const enableBodyScroll = (targetElement?: HTMLElement) => { } } -export function useLockScroll(props: InstanceType['$props'], options: { +export function useLockScroll(props: InstanceType['$props'], options: { lockScrollEl: Ref modelValueLocal: Ref }) { diff --git a/packages/vue-final-modal/src/components/CoreModal/useFocusTrap.ts b/packages/vue-final-modal/src/components/VueFinalModal/useFocusTrap.ts similarity index 84% rename from packages/vue-final-modal/src/components/CoreModal/useFocusTrap.ts rename to packages/vue-final-modal/src/components/VueFinalModal/useFocusTrap.ts index eb539319..c68a97a1 100644 --- a/packages/vue-final-modal/src/components/CoreModal/useFocusTrap.ts +++ b/packages/vue-final-modal/src/components/VueFinalModal/useFocusTrap.ts @@ -1,9 +1,9 @@ import type { Ref } from 'vue' import { useFocusTrap as _useFocusTrap } from '@vueuse/integrations/useFocusTrap' -import type CoreModal from './CoreModal.vue' +import type VueFinalModal from './VueFinalModal.vue' export function useFocusTrap( - props: InstanceType['$props'], + props: InstanceType['$props'], options: { focusEl: Ref }, diff --git a/packages/vue-final-modal/src/components/CoreModal/useModelValue.ts b/packages/vue-final-modal/src/components/VueFinalModal/useModelValue.ts similarity index 88% rename from packages/vue-final-modal/src/components/CoreModal/useModelValue.ts rename to packages/vue-final-modal/src/components/VueFinalModal/useModelValue.ts index 23c58241..69867df2 100644 --- a/packages/vue-final-modal/src/components/CoreModal/useModelValue.ts +++ b/packages/vue-final-modal/src/components/VueFinalModal/useModelValue.ts @@ -1,10 +1,10 @@ import { nextTick, ref, watch } from 'vue' import type { Ref } from 'vue' -import type CoreModal from './CoreModal.vue' +import type VueFinalModal from './VueFinalModal.vue' export function useModelValue( - props: InstanceType['$props'], - emit: InstanceType['$emit'], + props: InstanceType['$props'], + emit: InstanceType['$emit'], options: { open: () => boolean close: () => boolean diff --git a/packages/vue-final-modal/src/components/CoreModal/useToClose.ts b/packages/vue-final-modal/src/components/VueFinalModal/useToClose.ts similarity index 85% rename from packages/vue-final-modal/src/components/CoreModal/useToClose.ts rename to packages/vue-final-modal/src/components/VueFinalModal/useToClose.ts index b405c79b..5533ffbf 100644 --- a/packages/vue-final-modal/src/components/CoreModal/useToClose.ts +++ b/packages/vue-final-modal/src/components/VueFinalModal/useToClose.ts @@ -1,10 +1,10 @@ import type { Ref } from 'vue' import { ref } from 'vue' -import type CoreModal from './CoreModal.vue' +import type VueFinalModal from './VueFinalModal.vue' export function useToClose( - props: InstanceType['$props'], - emit: InstanceType['$emit'], + props: InstanceType['$props'], + emit: InstanceType['$emit'], options: { vfmRootEl: Ref vfmContentEl: Ref diff --git a/packages/vue-final-modal/src/components/CoreModal/useTransition.ts b/packages/vue-final-modal/src/components/VueFinalModal/useTransition.ts similarity index 96% rename from packages/vue-final-modal/src/components/CoreModal/useTransition.ts rename to packages/vue-final-modal/src/components/VueFinalModal/useTransition.ts index 6e5de968..9077e4c6 100644 --- a/packages/vue-final-modal/src/components/CoreModal/useTransition.ts +++ b/packages/vue-final-modal/src/components/VueFinalModal/useTransition.ts @@ -1,6 +1,6 @@ import type { ComputedRef, Ref, TransitionProps } from 'vue' import { computed, nextTick, ref, watch } from 'vue' -import type CoreModal from './CoreModal.vue' +import type VueFinalModal from './VueFinalModal.vue' export enum TransitionState { Enter, @@ -31,7 +31,7 @@ function useTransitionState(_visible = false): [Ref, Ref['$props'], + props: InstanceType['$props'], options: { modelValueLocal: Ref onEntering?: () => void diff --git a/packages/vue-final-modal/src/components/CoreModal/useZIndex.ts b/packages/vue-final-modal/src/components/VueFinalModal/useZIndex.ts similarity index 76% rename from packages/vue-final-modal/src/components/CoreModal/useZIndex.ts rename to packages/vue-final-modal/src/components/VueFinalModal/useZIndex.ts index 2558755d..7e290c69 100644 --- a/packages/vue-final-modal/src/components/CoreModal/useZIndex.ts +++ b/packages/vue-final-modal/src/components/VueFinalModal/useZIndex.ts @@ -1,8 +1,8 @@ import { ref } from 'vue' -import type CoreModal from './CoreModal.vue' +import type VueFinalModal from './VueFinalModal.vue' export function useZIndex( - props: InstanceType['$props'], + props: InstanceType['$props'], ) { const zIndex = ref() diff --git a/packages/vue-final-modal/src/components/CoreModal/vVisible.ts b/packages/vue-final-modal/src/components/VueFinalModal/vVisible.ts similarity index 100% rename from packages/vue-final-modal/src/components/CoreModal/vVisible.ts rename to packages/vue-final-modal/src/components/VueFinalModal/vVisible.ts diff --git a/packages/vue-final-modal/src/index.ts b/packages/vue-final-modal/src/index.ts index cfdc58f3..52f691d2 100644 --- a/packages/vue-final-modal/src/index.ts +++ b/packages/vue-final-modal/src/index.ts @@ -1,5 +1,4 @@ import ModalsContainer from './components/ModalsContainer.vue' -import CoreModal from './components/CoreModal/CoreModal.vue' import VueFinalModal from './components/VueFinalModal/VueFinalModal.vue' import type { Vfm } from './Modal' @@ -13,11 +12,9 @@ export * from './plugin' /** Components */ export { ModalsContainer, - CoreModal, VueFinalModal, } -export { coreModalProps } from './components/CoreModal/CoreModalProps' export { vueFinalModalProps } from './components/VueFinalModal/VueFinalModalProps' export type { VueFinalModalEmits } from './components/VueFinalModal/VueFinalModal.vue' diff --git a/packages/vue-final-modal/src/useApi.ts b/packages/vue-final-modal/src/useApi.ts index 9244e1ba..2811b3ea 100644 --- a/packages/vue-final-modal/src/useApi.ts +++ b/packages/vue-final-modal/src/useApi.ts @@ -1,7 +1,7 @@ import { computed, inject, markRaw, nextTick, reactive, useAttrs } from 'vue' import { tryOnUnmounted } from '@vueuse/core' import VueFinalModal from './components/VueFinalModal/VueFinalModal.vue' -import type CoreModal from './components/CoreModal/CoreModal.vue' +import type VueFinalModal from './components/VueFinalModal/VueFinalModal.vue' import { internalVfmSymbol } from './injectionSymbols' import type { ComponentProps, ComponentType, InternalVfm, ModalSlot, ModalSlotOptions, UseModalOptions, UseModalOptionsPrivate, UseModalReturnType, Vfm } from './Modal' @@ -199,7 +199,7 @@ export function pickModalProps(props: any, modalProps: any) { }, {} as Record) } -export function byPassAllModalEvents(emit?: InstanceType['$emit']) { +export function byPassAllModalEvents(emit?: InstanceType['$emit']) { if (!emit) return {} return { diff --git a/packages/vue-final-modal/src/useSwipeToClose.ts b/packages/vue-final-modal/src/useSwipeToClose.ts index 3072aaf1..74c4457f 100644 --- a/packages/vue-final-modal/src/useSwipeToClose.ts +++ b/packages/vue-final-modal/src/useSwipeToClose.ts @@ -1,12 +1,12 @@ import { useEventListener } from '@vueuse/core' import type { Ref } from 'vue' import { computed, ref, watch } from 'vue' -import type CoreModal from './components/CoreModal/CoreModal.vue' +import type VueFinalModal from './components/VueFinalModal/VueFinalModal.vue' import { useSwipeable } from './useSwipeable' import { clamp, noop } from './utils' export function useSwipeToClose( - props: InstanceType['$props'], + props: InstanceType['$props'], options: { vfmContentEl: Ref modelValueLocal: Ref From 98a1e6f38b23763224c96c6e145b430314dc74f7 Mon Sep 17 00:00:00 2001 From: Hunter Date: Thu, 30 Nov 2023 15:46:12 +0800 Subject: [PATCH 2/6] refactor: improve type, lint, cleanup --- packages/vue-final-modal/src/Modal.ts | 8 ++--- .../src/components/ModalsContainer.vue | 18 +++++------ .../VueFinalModal/VueFinalModal.vue | 21 ++++--------- packages/vue-final-modal/src/plugin.ts | 19 ++++++++++-- packages/vue-final-modal/src/useApi.ts | 30 +++++++++++-------- packages/vue-final-modal/src/utils.ts | 1 + .../VueFinalModal/Basic.example.vue | 2 +- 7 files changed, 55 insertions(+), 44 deletions(-) diff --git a/packages/vue-final-modal/src/Modal.ts b/packages/vue-final-modal/src/Modal.ts index 9b3eb64b..4f0f1e26 100644 --- a/packages/vue-final-modal/src/Modal.ts +++ b/packages/vue-final-modal/src/Modal.ts @@ -8,7 +8,7 @@ type Constructor

= { __isFragment?: never __isTeleport?: never __isSuspense?: never - new (...args: any[]): { $props: P } + new(...args: any[]): { $props: P } } export interface ModalSlotOptions { component: Raw; attrs?: Record } @@ -61,16 +61,16 @@ export type Vfm = { toggle: (modalId: ModalId, show?: boolean) => undefined | Promise open: (modalId: ModalId) => undefined | Promise close: (modalId: ModalId) => undefined | Promise - closeAll: () => Promise<[PromiseSettledResult[]>]> + closeAll: () => Promise[]> } export type InternalVfm = { - deleteFromModals: (modal: ComputedRef) => void + openLastOverlay: () => Promise moveToLastOpenedModals: (modal: ComputedRef) => void deleteFromOpenedModals: (modal: ComputedRef) => void moveToLastOpenedModalOverlays: (modal: ComputedRef) => void deleteFromOpenedModalOverlays: (modal: ComputedRef) => void - openLastOverlay: () => Promise + deleteFromModals: (modal: ComputedRef) => void resolvedClosed: (index: number) => void resolvedOpened: (index: number) => void } diff --git a/packages/vue-final-modal/src/components/ModalsContainer.vue b/packages/vue-final-modal/src/components/ModalsContainer.vue index 31f09c4a..6e1240b0 100644 --- a/packages/vue-final-modal/src/components/ModalsContainer.vue +++ b/packages/vue-final-modal/src/components/ModalsContainer.vue @@ -3,31 +3,31 @@ import { computed, onBeforeUnmount } from 'vue' import { isString } from '~/utils' import { useInternalVfm, useVfm } from '~/useApi' -const vfm = useVfm() -const _vfm = useInternalVfm() +const { modalsContainers, dynamicModals } = useVfm() +const { resolvedClosed, resolvedOpened } = useInternalVfm() const uid = Symbol('ModalsContainer') -const shouldMount = computed(() => uid === vfm.modalsContainers.value?.[0]) +const shouldMount = computed(() => uid === modalsContainers.value?.[0]) -vfm.modalsContainers.value.push(uid) +modalsContainers.value.push(uid) onBeforeUnmount(() => { - vfm.modalsContainers.value = vfm.modalsContainers.value.filter(i => i !== uid) + modalsContainers.value = modalsContainers.value.filter(i => i !== uid) })