feat: replace usePrograms with useOverlayDefine

README.md

@@ -18,7 +18,7 @@ A create model | dialog | popup promise deferred library
   English | <a href="https://github.com/hairyf/overlastic/blob/master/README_CN.md">Chinese</a> | <a href="https://overlastic.vercel.app">docs</a>
 </p>
 
-    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

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
 })

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)
-```
+```

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
-```
+```

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
-```
+```

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.
+> 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.

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.
+overlays simplifies Modal creation by unifying the redundant processes and state management. It can effectively create imperative components, and can still be used declaratively.

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()
-```
+```

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 <div className={visible && 'is--visible'}>
-    <span onClick={() => resolve(`${props.title}:confirmed`)}> Confirm </span>
-  </div>
+  return (
+    <div className={visible && 'is--visible'}>
+      <span onClick={() => resolve(`${props.title}:confirmed`)}> Confirm </span>
+    </div>
+  )
 }
 ```
 
@@ -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() {
     </OverlayProvider>
   )
 }
+export default Main
 ```
 
 Using in a page:
@@ -83,11 +86,12 @@ import CustomDialog from './Dialog.tsx'
 function Page() {
   const openDialog = useOverlay(CustomDialog)
   return (
-    <button onClick={() => openDialog({ ... })}>
+    <button onClick={() => openDialog({/* ...props */})}>
       Open Modal
     </button>
   )
 }
+export default Main
 ```
 
 ## Injection Holder
@@ -107,11 +111,13 @@ export function Main() {
     overlayApi()
       .then((result) => {})
   }
-  return (<>
-    <div onClick={open}> open </div>
-    {/* Mount the holder */}
-    {holder}
-  </>)
+  return (
+    <>
+      <div onClick={open}> open </div>
+      {/* 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 <div className={visible && 'is--visible'}>
-    ...
-  </div>
+  return (
+    <div className={visible && 'is--visible'}>
+      ...
+    </div>
+  )
 }
 ```
 
@@ -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 }>) {
     </Drawer>
   )
 }
+export default MyDrawer
 ```

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
 <script lang="ts">
-  import { usePrograms, Overlay } from "@overlastic/svelte";
+  import { useOverlayDefine, Overlay } from "@overlastic/svelte";
   import { fly } from "svelte/transition";
-  
+
   export let title: number
   export let duration = 200
 
   // duration of overlay duration, helps prevent premature component destroy
-  const { resolve, reject } = usePrograms({ duration })
+  const { resolve, reject } = useOverlayDefine({ duration })
 
   function onClick() {
     resolve(`${title}:confirmed`)
@@ -67,23 +65,22 @@ import { renderOverlay } from '@overlastic/svelte'
 import OverlayComponent from './overlay.svelte'
 
 const value = await renderOverlay(OverlayComponent, {
-  title: 'usePrograms'
+  title: 'useOverlayDefine'
 })
-// value === "usePrograms:confirmed"
+// value === "useOverlayDefine:confirmed"
 ```
 
 ## Controlled manner
 
 By default, you do not need to control the display and hiding of the `visible` variable. The value is controlled by the component `Overlay`, and you can pass in `visible` to control the display
 
-
 ```svelte
 <script lang="ts">
-  import { usePrograms, Overlay } from "@overlastic/svelte";
+  import { useOverlayDefine, Overlay } from "@overlastic/svelte";
 
   let visible = false
 
-  const { resolve, reject, deferred, vanish } = usePrograms({
+  const { resolve, reject, deferred, vanish } = useOverlayDefine({
     // close the transition duration, at this point you need to manually destroy it
     duration: false,
     // cancel setting visible to true immediately
@@ -99,4 +96,4 @@ By default, you do not need to control the display and hiding of the `visible` v
     ...
   </div>
 </Overlay>
-```
+```

docs/en/vue/advanced/customized.md

@@ -6,12 +6,12 @@ Take [element-plus(dialog)](https://element.eleme.cn/#/en-US/component/dialog) a
 <!-- overlay.vue -->
 <script setup>
 import { defineEmits, defineProps } from 'vue-demi'
-import { usePrograms } from '@overlastic/vue'
+import { useOverlayDefine } from '@overlastic/vue'
 const props = defineProps({
   title: String,
 })
 
-const { visible, resolve, reject } = usePrograms({
+const { visible, resolve, reject } = useOverlayDefine({
   duration: 1000
 })
 </script>
@@ -31,4 +31,4 @@ import OverlayComponent from './overlay.vue'
 const callback = defineOverlay(OverlayComponent)
 const value = await callback({ title: 'myElDialog' })
 // value === "myElDialog:confirmed"
-```
+```