preflower / vue-funcall

A method that create component with function call

Vue funcall

A method that create component with function call

Install

$ pnpm install vue-funcall

Usage

Basic Usage

Pass it to the app as a plugin, make component mount on Vue instance.

This step can be ignored if you ensure that Vue context data will not be used in component

import { createApp } from 'vue'
import { VueFuncallPlugin } from 'vue-funcall'
import App from './App.vue'

const app = createApp(App)
app.use(VueFuncallPlugin)
app.mount('#app')

Use it in any scenario you wish to use

import { createFuncall } from 'vue-funcall'

createFuncall(Component, props, options)

Outside close

vue-funcall export close function for user

import { createFuncall } from 'vue-funcall'

cont { close } = createFuncall(Component, props)

close()

Async return result

It is not the capability that the library needs to support, but if you want to implement that functionality through the library, it's a demo

import { createFuncall } from 'vue-funcall'

const asyncCall = () => {
  return new Promise((resolve, reject) => {
    createFuncall(Component, {
      onSucceed: (result) => resolve(result),
      onFailed: (result) => reject(result)
    })
  })
}

API

const { close } = createFuncall(Component, props, options)

Parameters

Name	Description
Component	Component that need be function called
props	Component support props
options	an object of options for createFuncall

Return Values

Name	Description
close	a function that unmount Component

Options

Name	Description	Type	Default
visible	Internal field of Component to control Component display or not, If Component are not similiar field, define undefined	string | undefined	visible
onClosed	Internal field of Component to listen Component closed, If Component are not similiar field, define undefined	string | undefined	onClosed
container	Define component mount node, default is document.body	HTMLElement | undefined	document.body
appContext	For support multiple vue instance	AppContext	-

vue-funcall's Issues

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

• chore(deps): update eslint related (eslint, eslint-config-ted, typescript, vue, vue-tsc)
• chore(deps): update dependency vitepress to ^1.3.1
• chore(deps): update actions/configure-pages action to v5
• chore(deps): update commitlint monorepo to v19 (major) (@commitlint/cli, @commitlint/config-conventional)
• chore(deps): update dependency husky to v9
• chore(deps): update dependency lint-staged to v15
• chore(deps): update eslint related (major) (eslint, eslint-config-ted)

Detected dependencies

github-actions

.github/workflows/gh-page.yml

• actions/checkout v4
• actions/setup-node v4
• actions/configure-pages v4
• actions/upload-pages-artifact v3
• actions/deploy-pages v4

.github/workflows/release.yml

• actions/checkout v4
• actions/setup-node v4

npm

package.json

• @changesets/cli ^2.27.7
• @commitlint/cli ^16.3.0
• @commitlint/config-conventional ^16.2.4
• eslint ^8.47.0
• eslint-config-ted ^2.0.1
• husky ^8.0.3
• lint-staged ^13.3.0
• vue-tsc ^2.0.16

packages/docs/package.json

• vitepress ^1.1.4

packages/vue-funcall/package.json

• @preflower/vue-use ^1.1.1
• lodash-es ^4.17.21
• @types/lodash-es ^4.17.12
• typescript ^5.4.5
• vue ^3.4.26
• vue *

---

• Check this box to trigger a request for Renovate to run again on this repository