Files
ionic-framework/packages/vue/src/framework-delegate.ts

37 lines
1.1 KiB
TypeScript

import { h, Teleport, VNode } from 'vue';
import { addTeleportedUserComponent, removeTeleportedUserComponent } from './components/IonApp';
export const VueDelegate = (addFn = addTeleportedUserComponent, removeFn = removeTeleportedUserComponent) => {
let Component: VNode | undefined;
const attachViewToDom = (parentElement: HTMLElement, component: any, componentProps: any = {}, classes?: string[]) => {
/**
* Ionic Framework passes in modal and popover element
* refs as props, but if these are not defined
* on the Vue component instance as props, Vue will
* warn the user.
*/
delete componentProps['modal'];
delete componentProps['popover'];
const div = document.createElement('div');
classes && div.classList.add(...classes);
parentElement.appendChild(div);
Component = h(
Teleport,
{ to: div },
h(component, { ...componentProps })
);
addFn(Component);
return div;
}
const removeViewFromDom = () => {
Component && removeFn(Component);
return Promise.resolve();
}
return { attachViewToDom, removeViewFromDom }
}