feat: provide native applications composables

docs/en/core/element/index.md

@@ -1,4 +1,4 @@
-# @overlays/element 
+# @overlays/element
 
 create imperative overlays in the native application, support custom-element!
 
@@ -23,10 +23,15 @@ Create custom elements in the form of functions and return them.
 
 ```js
 // overlay.ts
-function Component(props, { resolve }) {
+function Component(props) {
   const element = document.createElement('div')
   element.innerHTML = props.title
 
+  const { resolve, reject } = useOverlay({
+    // Duration of overlays duration to avoid premature destruction of the component
+    duration: 1000,
+  })
+
   // Add events that cause the overlays to end
   element.onclick = function () {
     resolve('ok')
@@ -76,8 +81,13 @@ const callback1 = defineOverlay('my-custom-element')
 
 callback1({/* props(attrs) */})
 
-const CustomComponent = (props, { resolve, promiser }) => {
+const CustomComponent = (props) => {
   const customElement = document.createElement('my-custom-element')
+
+  const { resolve, reject } = useOverlay({
+    duration: 1000,
+  })
+
   // ...
   return customElement
 }

docs/zh/core/element/index.md

@@ -23,10 +23,15 @@ Create custom elements in the form of functions and return them.
 
 ```js
 // overlay.ts
-function Component(props, { resolve }) {
+function Component(props) {
   const element = document.createElement('div')
   element.innerHTML = props.title
 
+  const { resolve, reject } = useOverlay({
+    // Duration of overlays duration to avoid premature destruction of the component
+    duration: 1000,
+  })
+
   // Add events that cause the overlays to end
   element.onclick = function () {
     resolve('ok')
@@ -76,8 +81,13 @@ const callback1 = defineOverlay('my-custom-element')
 
 callback1({/* props(attrs) */})
 
-const CustomComponent = (props, { resolve, promiser }) => {
+const CustomComponent = (props) => {
   const customElement = document.createElement('my-custom-element')
+
+  const { resolve, reject } = useOverlay({
+    duration: 1000,
+  })
+
   // ...
   return customElement
 }

packages/@element/README.md

@@ -23,10 +23,15 @@ Create custom elements in the form of functions and return them.
 
 ```js
 // overlay.ts
-function Component(props, { resolve }) {
+function Component(props) {
   const element = document.createElement('div')
   element.innerHTML = props.title
 
+  const { resolve, reject } = useOverlay({
+    // Duration of overlays duration to avoid premature destruction of the component
+    duration: 1000,
+  })
+
   // Add events that cause the overlays to end
   element.onclick = function () {
     resolve('ok')
@@ -76,8 +81,13 @@ const callback1 = defineOverlay('my-custom-element')
 
 callback1({/* props(attrs) */})
 
-const CustomComponent = (props, { resolve, promiser }) => {
+const CustomComponent = (props) => {
   const customElement = document.createElement('my-custom-element')
+
+  const { resolve, reject } = useOverlay({
+    duration: 1000,
+  })
+
   // ...
   return customElement
 }

packages/@element/src/composable/index.ts

@@ -0,0 +1 @@
+export * from './meta'

packages/@element/src/composable/meta.ts

@@ -0,0 +1,15 @@
+import { context, setupOptions } from '../internal'
+
+export interface OverlayOptions {
+  /** animation duration to avoid premature destruction of components */
+  duration?: number
+}
+
+export function useOverlay(options?: OverlayOptions) {
+  const trigger = context.trigger
+  if (!trigger)
+    throw new Error('Please execute in the overlays constructor')
+
+  setupOptions(options)
+  return trigger
+}

packages/@element/src/define/constructor.ts

@@ -1,8 +1,8 @@
-import { createConstructor } from '@overlays/core'
-import type { Context } from '../types'
+import { createConstructor, delay } from '@overlays/core'
+import { clearOptions, clearTrigger, setupTrigger, useOptions } from '../internal'
 
 export interface EFComponent<T = any> {
-  (props: T, context: Context): HTMLElement
+  (props: T): HTMLElement
 }
 
 export type ElementComponent = HTMLElement | EFComponent | string
@@ -14,19 +14,29 @@ export const constructor = createConstructor<ElementComponent>((Inst, props, opt
     container.remove()
   }
 
-  const inst = parseElement(Inst, props, {
+  setupTrigger({
     resolve: promiser.resolve,
     reject: promiser.reject,
     promiser,
     vanish,
   })
 
+  const inst = parseElement(Inst, props)
+  const { duration = 0 } = useOptions()
+
+  clearTrigger()
+  clearOptions()
+
+  promiser.finally(() => {
+    delay(duration).then(vanish)
+  })
+
   container.append(inst)
 })
 
-function parseElement(component: ElementComponent, props: Record<string, any>, context: Context) {
+function parseElement(component: ElementComponent, props: Record<string, any>) {
   if (typeof component === 'function')
-    return component(props, context)
+    return component(props)
 
   const element: HTMLElement
    = typeof component === 'string'

packages/@element/src/internal/index.ts

@@ -0,0 +1,27 @@
+import type { OverlayOptions } from '../composable'
+import type { Context } from '../types'
+
+export const context = {
+  trigger: undefined as Context | undefined,
+  options: undefined as OverlayOptions | undefined,
+}
+
+export function setupTrigger(c: Context) {
+  context.trigger = c
+}
+
+export function clearTrigger() {
+  context.trigger = undefined
+}
+
+export function setupOptions(o: OverlayOptions = {}) {
+  context.options = o
+}
+
+export function clearOptions() {
+  context.options = undefined
+}
+
+export function useOptions() {
+  return context.options || {}
+}