43 lines
1.4 KiB
JavaScript
43 lines
1.4 KiB
JavaScript
import { createApp, h } from 'vue'
|
|
|
|
export function createVueControlSmart(component, props = {}, events = {}) {
|
|
let vueApp = null
|
|
|
|
return {
|
|
name: props.name || 'vue-control',
|
|
index: props.index || 0,
|
|
position: props.position || 'left',
|
|
html: `<div class="vue-control-wrapper" data-vue-control="${component.name}"></div>`,
|
|
tooltip: props.tooltip || '',
|
|
|
|
mounted: function ($control) {
|
|
const container = $control.querySelector('.vue-control-wrapper')
|
|
|
|
if (container && !vueApp) {
|
|
vueApp = createApp({
|
|
render() {
|
|
return h(component, {
|
|
...props,
|
|
...Object.entries(events).reduce((acc, [eventName, handler]) => {
|
|
acc[`on${eventName.charAt(0).toUpperCase() + eventName.slice(1)}`] = handler
|
|
return acc
|
|
}, {})
|
|
})
|
|
}
|
|
})
|
|
|
|
vueApp.mount(container)
|
|
$control._vueApp = vueApp
|
|
}
|
|
},
|
|
|
|
destroy: function ($control) {
|
|
if ($control._vueApp) {
|
|
$control._vueApp.unmount()
|
|
$control._vueApp = null
|
|
vueApp = null
|
|
}
|
|
}
|
|
}
|
|
}
|