diff --git a/.eslintrc b/.eslintrc deleted file mode 100644 index 607539fa..00000000 --- a/.eslintrc +++ /dev/null @@ -1,6 +0,0 @@ -{ - "extends": "@antfu", - "rules": { - "@typescript-eslint/no-use-before-define": "off" - } -} \ No newline at end of file diff --git a/README.md b/README.md index d2f3cbd6..8d3a72d9 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,7 @@ A create model | dialog | popup promise deferred library English | Chinese | docs

- Unified Overlays are used to create callback (imperative) methods for + Unified Overlays are used to create callback (imperative) methods for components and also support declarative use of Vue, React, and other components. ###### Features @@ -66,12 +66,12 @@ pnpm add @overlastic/react ## Usage -Use the `usePrograms` Hook provided by overlays to obtain overlays metadata and create overlays components (Vue, React). +Use the `useOverlayDefine` Hook provided by overlays to obtain overlays metadata and create overlays components (Vue, React). ```ts // In your Vue, React overlays component, -// use usePrograms to obtain overlays metadata. -const { visible, resolve, reject } = usePrograms({ +// use useOverlayDefine to obtain overlays metadata. +const { visible, resolve, reject } = useOverlayDefine({ // The duration of the overlays duration prevents // the component from being destroyed too early. duration: 1000 diff --git a/README_CN.md b/README_CN.md index 331c3d15..7f353e82 100644 --- a/README_CN.md +++ b/README_CN.md @@ -65,11 +65,11 @@ pnpm add @overlastic/react ## Usage -使用 `overlays` 提供的 `usePrograms` Hook 创建弹出层组件（Vue、React） +使用 `overlays` 提供的 `useOverlayDefine` Hook 创建弹出层组件（Vue、React） ```ts -// 在你的 Vue、React 弹出层组件中，使用 usePrograms 获取弹出层元信息 -const { visible, resolve, reject } = usePrograms({ +// 在你的 Vue、React 弹出层组件中，使用 useOverlayDefine 获取弹出层元信息 +const { visible, resolve, reject } = useOverlayDefine({ // 弹出层动画的持续时间, 可以避免组件过早被销毁 duration: 1000 }) diff --git a/docs/en/core/element/index.md b/docs/en/core/element/index.md index db834a0b..db370d21 100644 --- a/docs/en/core/element/index.md +++ b/docs/en/core/element/index.md @@ -4,7 +4,7 @@ create imperative overlays in the native application, support custom-element! ## Install -With pnpm: +With pnpm: ```sh pnpm add @overlastic/vanilla ``` @@ -16,7 +16,6 @@ yarn add @overlastic/vanilla ## Usage - ### Step 1: Define Component Create custom elements in the form of functions and return them. @@ -28,7 +27,7 @@ function Component(props) { element.innerHTML = props.title element.classList.add('dialog') - const { resolve, reject, deferred } = usePrograms({ + const { resolve, reject, deferred } = useOverlayDefine({ // Duration of overlays duration to avoid premature destruction of the component duration: 1000, }) @@ -71,9 +70,9 @@ import { defineOverlay } from '@overlastic/vanilla' import Component from './overlay' const value = await renderOverlay(Component, { - title: 'usePrograms' + title: 'useOverlayDefine' }) -// value === "usePrograms:confirmed" +// value === "useOverlayDefine:confirmed" ``` ## Custom Element @@ -87,10 +86,10 @@ const callback1 = defineOverlay('my-custom-element') callback1({/* props(attrs) */}) -const CustomComponent = (props) => { +function CustomComponent(props) { const customElement = document.createElement('my-custom-element') - const { resolve, reject } = usePrograms({ + const { resolve, reject } = useOverlayDefine({ duration: 1000, }) @@ -99,4 +98,4 @@ const CustomComponent = (props) => { } const callback2 = defineOverlay(CustomComponent) -``` \ No newline at end of file +``` diff --git a/docs/en/core/functions/constructor.md b/docs/en/core/functions/constructor.md index 10985aac..9d8fa382 100644 --- a/docs/en/core/functions/constructor.md +++ b/docs/en/core/functions/constructor.md @@ -84,7 +84,6 @@ function Component(props) { const callback = constructor.define(Component, { className: 'custom-class' }) ``` - Mount the custom component by using the imperative callback defined by `constructor.define` and obtain the return value. ```ts @@ -104,4 +103,4 @@ const result = await constructor.render(Component, { content: 'Opportunities may not always come, but when they do, seize them.' }) // result: ok -``` \ No newline at end of file +``` diff --git a/docs/en/core/functions/defines.md b/docs/en/core/functions/defines.md index 4be1410b..7d795e67 100644 --- a/docs/en/core/functions/defines.md +++ b/docs/en/core/functions/defines.md @@ -47,4 +47,4 @@ getIndex('my-id') // 2 defineName('my-id2', false) defineName('my-id2', false) getIndex('my-id2') // 0 -``` \ No newline at end of file +``` diff --git a/docs/en/core/guide/external-control.md b/docs/en/core/guide/external-control.md index 8c1e0813..29f7ff1a 100644 --- a/docs/en/core/guide/external-control.md +++ b/docs/en/core/guide/external-control.md @@ -24,4 +24,4 @@ function yes() { } ``` -> Since rendering needs to wait, `reject / resolve` in deferred cannot be called immediately, and it is generally recommended to use it inside the callback function. \ No newline at end of file +> Since rendering needs to wait, `reject / resolve` in deferred cannot be called immediately, and it is generally recommended to use it inside the callback function. diff --git a/docs/en/core/guide/getting-started.md b/docs/en/core/guide/getting-started.md index 1ea38544..8b063144 100644 --- a/docs/en/core/guide/getting-started.md +++ b/docs/en/core/guide/getting-started.md @@ -35,4 +35,4 @@ Components created by Unified Overlays support Devtools for their corresponding Creating Model classes repetitive and time-consuming. When reusing a component that uses a Model class, common fields such as reject, resolve, and visible need to be defined repeatedly. Additionally, controlling the Model process (`clear data` -> `open model` -> `edit data` -> `onConfirm` -> `save data`) can lead to a lot of redundant code, especially for frequently used components like an image selector. -overlays simplifies Modal creation by unifying the redundant processes and state management. It can effectively create imperative components, and can still be used declaratively. \ No newline at end of file +overlays simplifies Modal creation by unifying the redundant processes and state management. It can effectively create imperative components, and can still be used declaratively. diff --git a/docs/en/core/guide/support-only.md b/docs/en/core/guide/support-only.md index 096d9f23..e7ab11a5 100644 --- a/docs/en/core/guide/support-only.md +++ b/docs/en/core/guide/support-only.md @@ -1,8 +1,8 @@ # Singleton Render -Starting from version 0.6.0, the defineOverlay function supports the "only" property, which enables rendering only one pop-up layer. +Starting from version 0.6.0, the defineOverlay function supports the "only" property, which enables rendering only one pop-up layer. -Please note that renderOverlay function does not support the "only" property and cannot maintain independent instances. +Please note that renderOverlay function does not support the "only" property and cannot maintain independent instances. Here is an example using the defineOverlay function with the "only" property: @@ -14,4 +14,4 @@ myModal() myModal() myModal() myModal() -``` \ No newline at end of file +``` diff --git a/docs/en/core/react/index.md b/docs/en/core/react/index.md index 86c6b898..6bb5e9da 100644 --- a/docs/en/core/react/index.md +++ b/docs/en/core/react/index.md @@ -4,7 +4,7 @@ ## Install -With pnpm: +With pnpm: ```sh pnpm add @overlastic/react ``` @@ -21,14 +21,16 @@ yarn add @overlastic/react ```tsx // overlay.tsx export function Component(props) { - const { visible, resolve, reject } = usePrograms({ + const { visible, resolve, reject } = useOverlayDefine({ // Duration of overlay duration, helps prevent premature component destruction duration: 200, }) - return
- resolve(`${props.title}:confirmed`)}> Confirm -
+ return ( +
+ resolve(`${props.title}:confirmed`)}> Confirm +
+ ) } ``` @@ -53,14 +55,14 @@ import { renderOverlay } from '@overlastic/react' import { Component } from './overlay' const value = await renderOverlay(Component, { - title: 'usePrograms' + title: 'useOverlayDefine' }) -// value === "usePrograms:confirmed" +// value === "useOverlayDefine:confirmed" ``` ## Injection Provider ✨ (v0.4.8) -In the case of using Provider, the overlays mode does not simply access the content injected into the current context. By supporting the following APIs, it allows the use of injected components to inherit the context: +In the case of using Provider, the overlays mode does not simply access the content injected into the current context. By supporting the following APIs, it allows the use of injected components to inherit the context: ```tsx import { OverlayProvider } from '@overlastic/react' @@ -72,6 +74,7 @@ function Main() { ) } +export default Main ``` Using in a page: @@ -83,11 +86,12 @@ import CustomDialog from './Dialog.tsx' function Page() { const openDialog = useOverlay(CustomDialog) return ( - ) } +export default Main ``` ## Injection Holder @@ -107,11 +111,13 @@ export function Main() { overlayApi() .then((result) => {}) } - return (<> -
open
- {/* Mount the holder */} - {holder} - ) + return ( + <> +
open
+ {/* Mount the holder */} + {holder} + + ) } ``` @@ -124,17 +130,19 @@ Components created using `@overlastic/react` support both imperative and declara ```tsx // If using Typescript, use PropsWithOverlays to define props type import type { PropsWithOverlays } from '@overlastic/react' -import { usePrograms } from '@overlastic/react' +import { useOverlayDefine } from '@overlastic/react' export function Component(props: PropsWithOverlays<{ /* ...you props */ }>) { - const { visible, resolve, reject } = usePrograms({ - // pass props to usePrograms for processing + const { visible, resolve, reject } = useOverlayDefine({ + // pass props to useOverlayDefine for processing props }) - return
- ... -
+ return ( +
+ ... +
+ ) } ``` @@ -165,11 +173,11 @@ export function Main() { } ``` -If you want to replace other fields and event names, you can do so using the `model` and `events` config of usePrograms. +If you want to replace other fields and event names, you can do so using the `model` and `events` config of useOverlayDefine. ```jsx -function Component(props: { onOn?: Function; onNook?: Function; open: boolean }) { - const { visible, resolve, reject } = usePrograms({ +function Component(props: { onOn?: Function, onNook?: Function, open: boolean }) { + const { visible, resolve, reject } = useOverlayDefine({ events: { resolve: 'onOk', reject: 'onNook' }, model: 'open', props, @@ -186,11 +194,11 @@ Take [antd(drawer)](https://ant.design/components/drawer-cn) as an example： ```tsx import type { PropsWithOverlays } from '@overlastic/react' -import { usePrograms } from '@overlastic/react' +import { useOverlayDefine } from '@overlastic/react' import { Button, Drawer } from 'antd' function MyDrawer(props: PropsWithOverlays<{ title: string }>) { - const { visible, resolve, reject } = usePrograms({ + const { visible, resolve, reject } = useOverlayDefine({ duration: 200, props, }) @@ -204,4 +212,5 @@ function MyDrawer(props: PropsWithOverlays<{ title: string }>) { ) } +export default MyDrawer ``` diff --git a/docs/en/core/svelte/index.md b/docs/en/core/svelte/index.md index 8b9e0639..fc3aaa6d 100644 --- a/docs/en/core/svelte/index.md +++ b/docs/en/core/svelte/index.md @@ -4,7 +4,7 @@ create imperative overlays in the svelte application, supporting context inherit ## Install -With pnpm: +With pnpm: ```sh pnpm add @overlastic/svelte ``` @@ -16,20 +16,18 @@ yarn add @overlastic/svelte ## Usage - ### Step 1: Define Component - ```svelte @@ -31,4 +31,4 @@ import OverlayComponent from './overlay.vue' const callback = defineOverlay(OverlayComponent) const value = await callback({ title: 'myElDialog' }) // value === "myElDialog:confirmed" -``` \ No newline at end of file +``` diff --git a/docs/en/vue/advanced/holder.md b/docs/en/vue/advanced/holder.md index 64527404..d65094ef 100644 --- a/docs/en/vue/advanced/holder.md +++ b/docs/en/vue/advanced/holder.md @@ -25,4 +25,3 @@ function open() { ``` - diff --git a/docs/en/vue/advanced/inherited-context.md b/docs/en/vue/advanced/inherited-context.md index 60a1ed30..f476c76f 100644 --- a/docs/en/vue/advanced/inherited-context.md +++ b/docs/en/vue/advanced/inherited-context.md @@ -1,4 +1,4 @@ -# Inherited context +# Inherited context You can register overlays globally, which will inherit the application context for all popups. @@ -22,4 +22,4 @@ const { appContext } = getCurrentInstance()! renderOverlay(Component, props, { appContext }) -``` \ No newline at end of file +``` diff --git a/docs/en/vue/advanced/slots-vnode.md b/docs/en/vue/advanced/slots-vnode.md index 42d40912..563e54db 100644 --- a/docs/en/vue/advanced/slots-vnode.md +++ b/docs/en/vue/advanced/slots-vnode.md @@ -4,10 +4,10 @@ If you want to support rendering slots and a certain field passed in props in te ```vue ``` - diff --git a/docs/zh/vue/advanced/inherited-context.md b/docs/zh/vue/advanced/inherited-context.md index 1c5a16f7..9b86d95f 100644 --- a/docs/zh/vue/advanced/inherited-context.md +++ b/docs/zh/vue/advanced/inherited-context.md @@ -22,4 +22,4 @@ const { appContext } = getCurrentInstance()! renderOverlay(Component, props, { appContext }) -``` \ No newline at end of file +``` diff --git a/docs/zh/vue/advanced/slots-vnode.md b/docs/zh/vue/advanced/slots-vnode.md index c2d2d1b2..c269c8d1 100644 --- a/docs/zh/vue/advanced/slots-vnode.md +++ b/docs/zh/vue/advanced/slots-vnode.md @@ -4,10 +4,10 @@ ```vue