UNPKG

@oruga-ui/oruga-next

Version:

UI components for Vue.js and CSS framework agnostic

151 lines (150 loc) 5.06 kB
var __defProp = Object.defineProperty; var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value); /*! Oruga v0.11.0 | MIT License | github.com/oruga-ui/oruga */ import { defineComponent, getCurrentInstance, onMounted, onUnmounted, createVNode, toValue, createApp } from "vue"; import { i as isClient, V as VueInstance } from "./config-Dl7tu_Ly.mjs"; import { r as resolveElement } from "./unrefElement-cze__WCi.mjs"; import { u as useTeleportDefault } from "./useConfig-43UsDYp_.mjs"; class InstanceRegistry { constructor() { __publicField(this, "entries"); this.entries = []; } /** Returns the number of registered active instances. */ count() { return this.entries.length; } /** Returns the first registered active instance. */ fist() { return this.entries.at(0); } /** Returns the last registered active instance. */ last() { return this.entries.at(-1); } /** Adds a new instance to the instance stack. */ add(entry) { this.entries.push(entry); } /** Removes an instance from the instance stack. */ remove(entry) { const index = this.entries.indexOf(entry); this.entries.splice(index, 1); } /** Call a function for every registered active instance. */ walk(callback) { this.entries = [...this.entries].filter((e) => { const ret = callback(e); return !(ret === true); }); } } const ProgrammaticComponent = defineComponent( (props, { expose, emit, slots }) => { const vm = getCurrentInstance(); if (!vm) throw new Error("ProgrammaticComponent initialisation failed."); let resolve; const promise = new Promise((p1) => resolve = p1); onMounted(() => { var _a; return (_a = props.registry) == null ? void 0 : _a.add(vm); }); onUnmounted(() => { var _a; return (_a = props.registry) == null ? void 0 : _a.remove(vm); }); function close(...args) { emit("close", ...args); resolve(args); setTimeout(() => { if (isClient) window.requestAnimationFrame(() => emit("destroy")); else emit("destroy"); }); } expose({ close, promise }); return () => createVNode( props.component, { ...props.props, onClose: close }, slots["default"] ); }, { name: "ProgrammaticApp", // manual runtime props declaration is currently still needed. props: ["component", "props", "registry"], // manual runtime emits declaration emits: ["close", "destroy"], // manual runtime slot declaration slots: ["default"] } ); const registry = new InstanceRegistry(); const ComponentProgrammatic = { /** Returns the number of registered active instances. */ count: registry.count, /** * Create a new programmatic component instance. * @param component component to render * @param options render options */ open(component, options) { options = { registry, ...options }; const targetQuery = toValue(options.target); const target = ( // either by a given query selector / element targetQuery && resolveElement(targetQuery) || // or by the default teleport target config resolveElement(useTeleportDefault()) ); if (!target) throw new Error("ComponentProgrammatic - no target is defined."); let container = document.createElement("div"); container.id = options.appId || "programmatic-app"; target.appendChild(container); function onDestroy() { if (app) { app.unmount(); app = void 0; } if (container && target) { target.removeChild(container); container = void 0; } } let app = createApp(ProgrammaticComponent, { registry: options.registry, // programmatic registry instance - can be overriden by given in options component, // the component which should be rendered props: { ...options.props, container: target }, // component props including the target as `container` onClose: options.onClose, // custom onClose handler onDestroy // node destory cleanup handler }); if (VueInstance) app._context = Object.assign(app._context, VueInstance._context); const instance = app.mount(container); return instance; }, /** close the last registred instance in the global programmatic instance registry */ close(...args) { var _a, _b; (_b = (_a = registry.last()) == null ? void 0 : _a.exposed) == null ? void 0 : _b.close(...args); }, /** close all instances in the global programmatic instance registry */ closeAll(...args) { registry.walk((entry) => { var _a; return (_a = entry.exposed) == null ? void 0 : _a.close(...args); }); } }; export { ComponentProgrammatic as C, InstanceRegistry as I }; //# sourceMappingURL=useProgrammatic-B50-6K60.mjs.map