@zeus-js/output-vue-wrapper 0.1.0-beta.3 → 0.1.0-beta.5

package/dist/runtime/index.cjs.prod.js

@@ -0,0 +1,114 @@
+/**
+* output-vue-wrapper v0.1.0-beta.5
+* (c) 2026 baicie
+* Released under the MIT License.
+**/
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+let vue = require("vue");
+//#region packages/web-c/output-vue-wrapper/src/runtime/defineContainer.ts
+const EMPTY_PROP = Symbol();
+const DEFAULT_EMPTY_PROP = { default: EMPTY_PROP };
+const UPDATE_MODEL_VALUE_EVENT = "update:modelValue";
+const MODEL_VALUE = "modelValue";
+function defineContainer(options) {
+	const { tagName, displayName, defineCustomElement, props: componentProps = [], events: emitProps = [], slots: slotNames = [], model, transformTag } = options;
+	defineCustomElement === null || defineCustomElement === void 0 || defineCustomElement();
+	const emits = [...emitProps];
+	const componentPropsMap = {};
+	for (const prop of componentProps) componentPropsMap[prop] = DEFAULT_EMPTY_PROP;
+	if (model) {
+		const updateEvent = getModelUpdateEvent(model.prop);
+		emits.push(updateEvent);
+		if (updateEvent !== UPDATE_MODEL_VALUE_EVENT) emits.push(UPDATE_MODEL_VALUE_EVENT);
+		componentPropsMap[MODEL_VALUE] = DEFAULT_EMPTY_PROP;
+	}
+	return (0, vue.defineComponent)((propsValue, { attrs, slots: allSlots, emit }) => {
+		const containerRef = (0, vue.ref)();
+		const listeners = [];
+		(0, vue.onMounted)(() => {
+			const el = containerRef.value;
+			if (!el) return;
+			for (const eventName of emitProps) {
+				const listener = (event) => {
+					emit(eventName, event);
+				};
+				el.addEventListener(eventName, listener);
+				listeners.push({
+					eventName,
+					listener
+				});
+			}
+		});
+		(0, vue.onBeforeUnmount)(() => {
+			const el = containerRef.value;
+			if (!el) return;
+			for (const item of listeners) el.removeEventListener(item.eventName, item.listener);
+			listeners.length = 0;
+		});
+		const vModelDirective = { created: (el) => {
+			if (!model) return;
+			for (const eventName of toArray(model.event)) el.addEventListener(eventName, (event) => {
+				var _model$eventPath;
+				if (event.target.tagName !== el.tagName) return;
+				const value = readEventPath(event, (_model$eventPath = model.eventPath) !== null && _model$eventPath !== void 0 ? _model$eventPath : `target.${model.prop}`);
+				emit(getModelUpdateEvent(model.prop), value);
+				if (propsValue[MODEL_VALUE] !== EMPTY_PROP) emit(UPDATE_MODEL_VALUE_EVENT, value);
+			});
+		} };
+		return () => {
+			const propsToAdd = { ref: containerRef };
+			for (const key in propsValue) {
+				const value = propsValue[key];
+				if (value !== EMPTY_PROP) propsToAdd[key] = value;
+			}
+			for (const key in attrs) propsToAdd[key] = attrs[key];
+			if (model) {
+				const modelValue = propsValue[MODEL_VALUE];
+				const modelPropValue = propsValue[model.prop];
+				if (modelValue !== EMPTY_PROP) propsToAdd[model.prop] = modelValue;
+				else if (modelPropValue !== EMPTY_PROP) propsToAdd[model.prop] = modelPropValue;
+			}
+			const children = createChildren(allSlots, slotNames);
+			const node = (0, vue.h)(transformTag ? transformTag(tagName) : tagName, propsToAdd, children);
+			return model ? (0, vue.withDirectives)(node, [[vModelDirective]]) : node;
+		};
+	}, {
+		name: displayName !== null && displayName !== void 0 ? displayName : tagName,
+		props: componentPropsMap,
+		emits
+	});
+}
+function createChildren(slots, slotNames) {
+	const children = slots.default ? slots.default() : [];
+	for (const name of slotNames) {
+		const slot = slots[name];
+		if (!slot) continue;
+		for (const vnode of slot()) children.push(withSlot(name, vnode));
+	}
+	return children;
+}
+function withSlot(name, vnode) {
+	if (!vnode) return vnode;
+	if (typeof vnode === "string") return (0, vue.h)("span", {
+		slot: name,
+		style: "display: contents"
+	}, vnode);
+	return (0, vue.cloneVNode)(vnode, { slot: name });
+}
+function getModelUpdateEvent(prop) {
+	return `update:${prop}`;
+}
+function toArray(value) {
+	return Array.isArray(value) ? value : [value];
+}
+function readEventPath(event, path) {
+	return path.split(".").reduce((value, key) => {
+		if (value == null) return void 0;
+		return value[key];
+	}, event);
+}
+//#endregion
+exports.defineContainer = defineContainer;

package/dist/runtime/index.d.ts

@@ -0,0 +1,26 @@
+import * as vue from 'vue';
+
+export interface ZeusVueModelOptions {
+    prop: string;
+    event: string | string[];
+    eventPath?: string;
+}
+export interface ZeusVueContainerOptions {
+    tagName: string;
+    displayName?: string;
+    defineCustomElement?: () => void;
+    props?: string[];
+    events?: string[];
+    slots?: string[];
+    model?: ZeusVueModelOptions;
+    transformTag?: (tagName: string) => string;
+}
+export declare function defineContainer(options: ZeusVueContainerOptions): vue.DefineSetupFnComponent<{
+    [x: string]: /*elided*/ any;
+}, string[], {}, {
+    [x: string]: /*elided*/ any;
+} & {
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, vue.PublicProps>;
+
+

package/dist/runtime/index.js

@@ -0,0 +1,110 @@
+/**
+* output-vue-wrapper v0.1.0-beta.5
+* (c) 2026 baicie
+* Released under the MIT License.
+**/
+import { cloneVNode, defineComponent, h, onBeforeUnmount, onMounted, ref, withDirectives } from "vue";
+//#region packages/web-c/output-vue-wrapper/src/runtime/defineContainer.ts
+const EMPTY_PROP = Symbol();
+const DEFAULT_EMPTY_PROP = { default: EMPTY_PROP };
+const UPDATE_MODEL_VALUE_EVENT = "update:modelValue";
+const MODEL_VALUE = "modelValue";
+function defineContainer(options) {
+	const { tagName, displayName, defineCustomElement, props: componentProps = [], events: emitProps = [], slots: slotNames = [], model, transformTag } = options;
+	defineCustomElement === null || defineCustomElement === void 0 || defineCustomElement();
+	const emits = [...emitProps];
+	const componentPropsMap = {};
+	for (const prop of componentProps) componentPropsMap[prop] = DEFAULT_EMPTY_PROP;
+	if (model) {
+		const updateEvent = getModelUpdateEvent(model.prop);
+		emits.push(updateEvent);
+		if (updateEvent !== UPDATE_MODEL_VALUE_EVENT) emits.push(UPDATE_MODEL_VALUE_EVENT);
+		componentPropsMap[MODEL_VALUE] = DEFAULT_EMPTY_PROP;
+	}
+	return defineComponent((propsValue, { attrs, slots: allSlots, emit }) => {
+		const containerRef = ref();
+		const listeners = [];
+		onMounted(() => {
+			const el = containerRef.value;
+			if (!el) return;
+			for (const eventName of emitProps) {
+				const listener = (event) => {
+					emit(eventName, event);
+				};
+				el.addEventListener(eventName, listener);
+				listeners.push({
+					eventName,
+					listener
+				});
+			}
+		});
+		onBeforeUnmount(() => {
+			const el = containerRef.value;
+			if (!el) return;
+			for (const item of listeners) el.removeEventListener(item.eventName, item.listener);
+			listeners.length = 0;
+		});
+		const vModelDirective = { created: (el) => {
+			if (!model) return;
+			for (const eventName of toArray(model.event)) el.addEventListener(eventName, (event) => {
+				var _model$eventPath;
+				if (event.target.tagName !== el.tagName) return;
+				const value = readEventPath(event, (_model$eventPath = model.eventPath) !== null && _model$eventPath !== void 0 ? _model$eventPath : `target.${model.prop}`);
+				emit(getModelUpdateEvent(model.prop), value);
+				if (propsValue[MODEL_VALUE] !== EMPTY_PROP) emit(UPDATE_MODEL_VALUE_EVENT, value);
+			});
+		} };
+		return () => {
+			const propsToAdd = { ref: containerRef };
+			for (const key in propsValue) {
+				const value = propsValue[key];
+				if (value !== EMPTY_PROP) propsToAdd[key] = value;
+			}
+			for (const key in attrs) propsToAdd[key] = attrs[key];
+			if (model) {
+				const modelValue = propsValue[MODEL_VALUE];
+				const modelPropValue = propsValue[model.prop];
+				if (modelValue !== EMPTY_PROP) propsToAdd[model.prop] = modelValue;
+				else if (modelPropValue !== EMPTY_PROP) propsToAdd[model.prop] = modelPropValue;
+			}
+			const children = createChildren(allSlots, slotNames);
+			const node = h(transformTag ? transformTag(tagName) : tagName, propsToAdd, children);
+			return model ? withDirectives(node, [[vModelDirective]]) : node;
+		};
+	}, {
+		name: displayName !== null && displayName !== void 0 ? displayName : tagName,
+		props: componentPropsMap,
+		emits
+	});
+}
+function createChildren(slots, slotNames) {
+	const children = slots.default ? slots.default() : [];
+	for (const name of slotNames) {
+		const slot = slots[name];
+		if (!slot) continue;
+		for (const vnode of slot()) children.push(withSlot(name, vnode));
+	}
+	return children;
+}
+function withSlot(name, vnode) {
+	if (!vnode) return vnode;
+	if (typeof vnode === "string") return h("span", {
+		slot: name,
+		style: "display: contents"
+	}, vnode);
+	return cloneVNode(vnode, { slot: name });
+}
+function getModelUpdateEvent(prop) {
+	return `update:${prop}`;
+}
+function toArray(value) {
+	return Array.isArray(value) ? value : [value];
+}
+function readEventPath(event, path) {
+	return path.split(".").reduce((value, key) => {
+		if (value == null) return void 0;
+		return value[key];
+	}, event);
+}
+//#endregion
+export { defineContainer };

package/dist/runtime/index.prod.js

@@ -0,0 +1,110 @@
+/**
+* output-vue-wrapper v0.1.0-beta.5
+* (c) 2026 baicie
+* Released under the MIT License.
+**/
+import { cloneVNode, defineComponent, h, onBeforeUnmount, onMounted, ref, withDirectives } from "vue";
+//#region packages/web-c/output-vue-wrapper/src/runtime/defineContainer.ts
+const EMPTY_PROP = Symbol();
+const DEFAULT_EMPTY_PROP = { default: EMPTY_PROP };
+const UPDATE_MODEL_VALUE_EVENT = "update:modelValue";
+const MODEL_VALUE = "modelValue";
+function defineContainer(options) {
+	const { tagName, displayName, defineCustomElement, props: componentProps = [], events: emitProps = [], slots: slotNames = [], model, transformTag } = options;
+	defineCustomElement === null || defineCustomElement === void 0 || defineCustomElement();
+	const emits = [...emitProps];
+	const componentPropsMap = {};
+	for (const prop of componentProps) componentPropsMap[prop] = DEFAULT_EMPTY_PROP;
+	if (model) {
+		const updateEvent = getModelUpdateEvent(model.prop);
+		emits.push(updateEvent);
+		if (updateEvent !== UPDATE_MODEL_VALUE_EVENT) emits.push(UPDATE_MODEL_VALUE_EVENT);
+		componentPropsMap[MODEL_VALUE] = DEFAULT_EMPTY_PROP;
+	}
+	return defineComponent((propsValue, { attrs, slots: allSlots, emit }) => {
+		const containerRef = ref();
+		const listeners = [];
+		onMounted(() => {
+			const el = containerRef.value;
+			if (!el) return;
+			for (const eventName of emitProps) {
+				const listener = (event) => {
+					emit(eventName, event);
+				};
+				el.addEventListener(eventName, listener);
+				listeners.push({
+					eventName,
+					listener
+				});
+			}
+		});
+		onBeforeUnmount(() => {
+			const el = containerRef.value;
+			if (!el) return;
+			for (const item of listeners) el.removeEventListener(item.eventName, item.listener);
+			listeners.length = 0;
+		});
+		const vModelDirective = { created: (el) => {
+			if (!model) return;
+			for (const eventName of toArray(model.event)) el.addEventListener(eventName, (event) => {
+				var _model$eventPath;
+				if (event.target.tagName !== el.tagName) return;
+				const value = readEventPath(event, (_model$eventPath = model.eventPath) !== null && _model$eventPath !== void 0 ? _model$eventPath : `target.${model.prop}`);
+				emit(getModelUpdateEvent(model.prop), value);
+				if (propsValue[MODEL_VALUE] !== EMPTY_PROP) emit(UPDATE_MODEL_VALUE_EVENT, value);
+			});
+		} };
+		return () => {
+			const propsToAdd = { ref: containerRef };
+			for (const key in propsValue) {
+				const value = propsValue[key];
+				if (value !== EMPTY_PROP) propsToAdd[key] = value;
+			}
+			for (const key in attrs) propsToAdd[key] = attrs[key];
+			if (model) {
+				const modelValue = propsValue[MODEL_VALUE];
+				const modelPropValue = propsValue[model.prop];
+				if (modelValue !== EMPTY_PROP) propsToAdd[model.prop] = modelValue;
+				else if (modelPropValue !== EMPTY_PROP) propsToAdd[model.prop] = modelPropValue;
+			}
+			const children = createChildren(allSlots, slotNames);
+			const node = h(transformTag ? transformTag(tagName) : tagName, propsToAdd, children);
+			return model ? withDirectives(node, [[vModelDirective]]) : node;
+		};
+	}, {
+		name: displayName !== null && displayName !== void 0 ? displayName : tagName,
+		props: componentPropsMap,
+		emits
+	});
+}
+function createChildren(slots, slotNames) {
+	const children = slots.default ? slots.default() : [];
+	for (const name of slotNames) {
+		const slot = slots[name];
+		if (!slot) continue;
+		for (const vnode of slot()) children.push(withSlot(name, vnode));
+	}
+	return children;
+}
+function withSlot(name, vnode) {
+	if (!vnode) return vnode;
+	if (typeof vnode === "string") return h("span", {
+		slot: name,
+		style: "display: contents"
+	}, vnode);
+	return cloneVNode(vnode, { slot: name });
+}
+function getModelUpdateEvent(prop) {
+	return `update:${prop}`;
+}
+function toArray(value) {
+	return Array.isArray(value) ? value : [value];
+}
+function readEventPath(event, path) {
+	return path.split(".").reduce((value, key) => {
+		if (value == null) return void 0;
+		return value[key];
+	}, event);
+}
+//#endregion
+export { defineContainer };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeus-js/output-vue-wrapper",
-  "version": "0.1.0-beta.3",
+  "version": "0.1.0-beta.5",
   "description": "Zeus Vue wrapper output plugin",
   "type": "module",
   "main": "index.js",
@@ -21,6 +21,11 @@
         "development": "./dist/output-vue-wrapper.cjs.js",
         "default": "./index.js"
       }
+    },
+    "./runtime": {
+      "types": "./dist/runtime/index.d.ts",
+      "import": "./dist/runtime/index.js",
+      "require": "./dist/runtime/index.cjs.js"
     }
   },
   "sideEffects": false,
@@ -33,12 +38,18 @@
     "formats": [
       "esm-bundler",
       "cjs"
+    ],
+    "additionalEntries": [
+      {
+        "entry": "runtime/index.ts",
+        "output": "dist/runtime/index.js"
+      }
     ]
   },
   "dependencies": {
-    "@zeus-js/bundler-plugin": "0.1.0-beta.3",
-    "@zeus-js/component-dts": "0.1.0-beta.3",
-    "@zeus-js/component-analyzer": "0.1.0-beta.3"
+    "@zeus-js/bundler-plugin": "0.1.0-beta.5",
+    "@zeus-js/component-dts": "0.1.0-beta.5",
+    "@zeus-js/component-analyzer": "0.1.0-beta.5"
   },
   "peerDependencies": {
     "vue": ">=3"