@composy/layout-vue 0.0.1

package/es/types.d.ts

@@ -0,0 +1,26 @@
+import type { LayoutDocument, LayoutNode, LayoutPlacement, MaterialDefinition, MaterialRegistry } from '@composy/layout-core';
+import type { LayoutEditor, LayoutEditorEngine, LayoutEditorOptions } from '@composy/layout-editor';
+import type { LayoutRenderTarget } from './components/material-renderer';
+export interface LayoutItemSlotContext {
+    item: LayoutNode;
+    placement: LayoutPlacement;
+    breakpointId: string;
+}
+export interface LGridProps {
+    document: LayoutDocument;
+    breakpoint?: string;
+    readonly?: boolean;
+    materials?: MaterialRegistry | readonly MaterialDefinition[];
+    target?: LayoutRenderTarget;
+}
+export interface LLayoutEditorProps {
+    document: LayoutDocument;
+    engine: LayoutEditorEngine;
+    mode?: 'edit' | 'preview' | 'readonly';
+    preview?: LayoutEditorOptions['preview'];
+    materials?: MaterialRegistry | readonly MaterialDefinition[];
+}
+export interface LLayoutEditorExpose {
+    editor: LayoutEditor;
+}
+//# sourceMappingURL=types.d.ts.map

package/es/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,cAAc,EACd,UAAU,EACV,eAAe,EACf,kBAAkB,EAClB,gBAAgB,EACjB,MAAM,sBAAsB,CAAA;AAC7B,OAAO,KAAK,EACV,YAAY,EACZ,kBAAkB,EAClB,mBAAmB,EACpB,MAAM,wBAAwB,CAAA;AAC/B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAA;AAExE,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,UAAU,CAAA;IAChB,SAAS,EAAE,eAAe,CAAA;IAC1B,YAAY,EAAE,MAAM,CAAA;CACrB;AACD,MAAM,WAAW,UAAU;IACzB,QAAQ,EAAE,cAAc,CAAA;IACxB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,gBAAgB,GAAG,SAAS,kBAAkB,EAAE,CAAA;IAC5D,MAAM,CAAC,EAAE,kBAAkB,CAAA;CAC5B;AACD,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,cAAc,CAAA;IACxB,MAAM,EAAE,kBAAkB,CAAA;IAC1B,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,CAAA;IACtC,OAAO,CAAC,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAA;IACxC,SAAS,CAAC,EAAE,gBAAgB,GAAG,SAAS,kBAAkB,EAAE,CAAA;CAC7D;AACD,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,YAAY,CAAA;CACrB"}

package/es/types.js

@@ -0,0 +1,10 @@
+/*!
+* ***********************************
+* @composy/layout-vue v0.0.1      *
+* Built with rollup               *
+* Build time: 2024-08-17 11:47:09 *
+* Build mode: production          *
+* Minified: No                    *
+* ***********************************
+*/
+/*! End of @composy/layout-vue | Powered by @composy/builder */

package/lib/components/LGrid.cjs

@@ -0,0 +1,92 @@
+/*!
+* ***********************************
+* @composy/layout-vue v0.0.1      *
+* Built with rollup               *
+* Build time: 2024-08-17 11:47:09 *
+* Build mode: production          *
+* Minified: No                    *
+* ***********************************
+*/
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_material_renderer = require("./material-renderer.cjs");
+let vue = require("vue");
+let _composy_layout_runtime = require("@composy/layout-runtime");
+//#region src/components/LGrid.ts
+const LGrid = (0, vue.defineComponent)({
+	name: "LGrid",
+	props: {
+		document: {
+			type: Object,
+			required: true
+		},
+		breakpoint: {
+			type: String,
+			default: void 0
+		},
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		materials: {
+			type: [Object, Array],
+			default: void 0
+		},
+		target: {
+			type: String,
+			default: "vue"
+		}
+	},
+	setup(props, { slots, expose }) {
+		const root = (0, vue.ref)();
+		const activeBreakpoint = (0, vue.ref)(props.breakpoint ?? props.document.defaultBreakpointId);
+		const resolved = (0, vue.computed)(() => props.document.breakpoints.find((bp) => bp.id === activeBreakpoint.value) ?? props.document.breakpoints[0]);
+		const gridStyle = (0, vue.computed)(() => (0, _composy_layout_runtime.resolveGridStyle)(props.document, resolved.value.id));
+		const resize = () => {
+			if (props.breakpoint || !root.value) return;
+			const width = root.value.getBoundingClientRect().width;
+			const match = props.document.breakpoints.find((bp) => (bp.minWidth === void 0 || width >= bp.minWidth) && (bp.maxWidth === void 0 || width < bp.maxWidth));
+			activeBreakpoint.value = match?.id ?? props.document.defaultBreakpointId;
+		};
+		let observer;
+		(0, vue.onMounted)(() => {
+			if (typeof ResizeObserver !== "undefined" && root.value) {
+				observer = new ResizeObserver(resize);
+				observer.observe(root.value);
+			}
+			resize();
+		});
+		(0, vue.onBeforeUnmount)(() => observer?.disconnect());
+		(0, vue.watch)(() => props.breakpoint, (value) => {
+			activeBreakpoint.value = value ?? props.document.defaultBreakpointId;
+		});
+		expose({ getBreakpoint: () => activeBreakpoint.value });
+		return () => (0, vue.h)("div", {
+			ref: root,
+			class: "ldesign-layout-grid",
+			style: gridStyle.value,
+			dir: gridStyle.value.direction
+		}, props.document.items.map((item) => {
+			const placement = item.layout[activeBreakpoint.value];
+			if (!placement || placement.hidden) return null;
+			return (0, vue.h)("div", {
+				class: "ldesign-layout-item",
+				"data-layout-item-id": item.id,
+				"data-layout-type": item.type,
+				style: (0, _composy_layout_runtime.resolveItemStyle)(item, activeBreakpoint.value),
+				tabindex: props.readonly ? void 0 : 0
+			}, slots.item?.({
+				item,
+				placement,
+				breakpointId: activeBreakpoint.value
+			}) ?? slots.default?.({
+				item,
+				placement,
+				breakpointId: activeBreakpoint.value
+			}) ?? require_material_renderer.renderMaterialForTarget(props.materials, item, props.target, placement, activeBreakpoint.value));
+		}));
+	}
+});
+//#endregion
+exports.LGrid = LGrid;
+/*! End of @composy/layout-vue | Powered by @composy/builder */
+//# sourceMappingURL=LGrid.cjs.map

package/lib/components/LGrid.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LGrid.cjs","names":[],"sources":["../../src/components/LGrid.ts"],"sourcesContent":["import {\n  computed,\n  defineComponent,\n  h,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n  type PropType,\n  watch,\n} from 'vue'\nimport { resolveGridStyle, resolveItemStyle } from '@composy/layout-runtime'\nimport type { LGridProps } from '../types'\nimport {\n  renderMaterialForTarget,\n  type VueMaterialSource,\n} from './material-renderer'\n\nexport const LGrid = defineComponent<LGridProps>({\n  name: 'LGrid',\n  props: {\n    document: { type: Object, required: true },\n    breakpoint: { type: String, default: undefined },\n    readonly: { type: Boolean, default: false },\n    materials: {\n      type: [Object, Array] as PropType<VueMaterialSource>,\n      default: undefined,\n    },\n    target: { type: String, default: 'vue' },\n  },\n  setup(props, { slots, expose }) {\n    const root = ref<HTMLElement>()\n    const activeBreakpoint = ref(\n      props.breakpoint ?? props.document.defaultBreakpointId\n    )\n    const resolved = computed(\n      () =>\n        props.document.breakpoints.find(\n          bp => bp.id === activeBreakpoint.value\n        ) ?? props.document.breakpoints[0]\n    )\n    const gridStyle = computed(() =>\n      resolveGridStyle(props.document, resolved.value.id)\n    )\n    const resize = () => {\n      if (props.breakpoint || !root.value) return\n      const width = root.value.getBoundingClientRect().width\n      const match = props.document.breakpoints.find(\n        bp =>\n          (bp.minWidth === undefined || width >= bp.minWidth) &&\n          (bp.maxWidth === undefined || width < bp.maxWidth)\n      )\n      activeBreakpoint.value = match?.id ?? props.document.defaultBreakpointId\n    }\n    let observer: ResizeObserver | undefined\n    onMounted(() => {\n      if (typeof ResizeObserver !== 'undefined' && root.value) {\n        observer = new ResizeObserver(resize)\n        observer.observe(root.value)\n      }\n      resize()\n    })\n    onBeforeUnmount(() => observer?.disconnect())\n    watch(\n      () => props.breakpoint,\n      value => {\n        activeBreakpoint.value = value ?? props.document.defaultBreakpointId\n      }\n    )\n    expose({ getBreakpoint: () => activeBreakpoint.value })\n    return () =>\n      h(\n        'div',\n        {\n          ref: root,\n          class: 'ldesign-layout-grid',\n          style: gridStyle.value,\n          dir: gridStyle.value.direction,\n        },\n        props.document.items.map(item => {\n          const placement = item.layout[activeBreakpoint.value]\n          if (!placement || placement.hidden) return null\n          return h(\n            'div',\n            {\n              class: 'ldesign-layout-item',\n              'data-layout-item-id': item.id,\n              'data-layout-type': item.type,\n              style: resolveItemStyle(item, activeBreakpoint.value),\n              tabindex: props.readonly ? undefined : 0,\n            },\n            slots.item?.({\n              item,\n              placement,\n              breakpointId: activeBreakpoint.value,\n            }) ??\n              slots.default?.({\n                item,\n                placement,\n                breakpointId: activeBreakpoint.value,\n              }) ??\n              renderMaterialForTarget(\n                props.materials as VueMaterialSource,\n                item,\n                props.target as 'vue' | 'webcomponent',\n                placement,\n                activeBreakpoint.value\n              )\n          )\n        })\n      )\n  },\n})\n"],"mappings":";;;;;;;;;;;;;;AAiBO,MAAM,SAAA,GAAA,IAAA,gBAAA,CAAoC;CAC/C,MAAM;CACN,OAAO;EACL,UAAU;GAAE,MAAM;GAAQ,UAAU;EAAK;EACzC,YAAY;GAAE,MAAM;GAAQ,SAAS,KAAA;EAAU;EAC/C,UAAU;GAAE,MAAM;GAAS,SAAS;EAAM;EAC1C,WAAW;GACT,MAAM,CAAC,QAAQ,KAAK;GACpB,SAAS,KAAA;EACX;EACA,QAAQ;GAAE,MAAM;GAAQ,SAAS;EAAM;CACzC;CACA,MAAM,OAAO,EAAE,OAAO,UAAU;EAC9B,MAAM,QAAA,GAAA,IAAA,IAAA,CAAwB;EAC9B,MAAM,oBAAA,GAAA,IAAA,IAAA,CACJ,MAAM,cAAc,MAAM,SAAS,mBACrC;EACA,MAAM,YAAA,GAAA,IAAA,SAAA,OAEF,MAAM,SAAS,YAAY,MACzB,OAAM,GAAG,OAAO,iBAAiB,KACnC,KAAK,MAAM,SAAS,YAAY,EACpC;EACA,MAAM,aAAA,GAAA,IAAA,SAAA,QAAA,GAAA,wBAAA,iBAAA,CACa,MAAM,UAAU,SAAS,MAAM,EAAE,CACpD;EACA,MAAM,eAAe;GACnB,IAAI,MAAM,cAAc,CAAC,KAAK,OAAO;GACrC,MAAM,QAAQ,KAAK,MAAM,sBAAsB,CAAA,CAAE;GACjD,MAAM,QAAQ,MAAM,SAAS,YAAY,MACvC,QACG,GAAG,aAAa,KAAA,KAAa,SAAS,GAAG,cACzC,GAAG,aAAa,KAAA,KAAa,QAAQ,GAAG,SAC7C;GACA,iBAAiB,QAAQ,OAAO,MAAM,MAAM,SAAS;EACvD;EACA,IAAI;EACJ,CAAA,GAAA,IAAA,UAAA,OAAgB;GACd,IAAI,OAAO,mBAAmB,eAAe,KAAK,OAAO;IACvD,WAAW,IAAI,eAAe,MAAM;IACpC,SAAS,QAAQ,KAAK,KAAK;GAC7B;GACA,OAAO;EACT,CAAC;EACD,CAAA,GAAA,IAAA,gBAAA,OAAsB,UAAU,WAAW,CAAC;EAC5C,CAAA,GAAA,IAAA,MAAA,OACQ,MAAM,aACZ,UAAS;GACP,iBAAiB,QAAQ,SAAS,MAAM,SAAS;EACnD,CACF;EACA,OAAO,EAAE,qBAAqB,iBAAiB,MAAM,CAAC;EACtD,cAAA,GAAA,IAAA,EAAA,CAEI,OACA;GACE,KAAK;GACL,OAAO;GACP,OAAO,UAAU;GACjB,KAAK,UAAU,MAAM;EACvB,GACA,MAAM,SAAS,MAAM,KAAI,SAAQ;GAC/B,MAAM,YAAY,KAAK,OAAO,iBAAiB;GAC/C,IAAI,CAAC,aAAa,UAAU,QAAQ,OAAO;GAC3C,QAAA,GAAA,IAAA,EAAA,CACE,OACA;IACE,OAAO;IACP,uBAAuB,KAAK;IAC5B,oBAAoB,KAAK;IACzB,QAAA,GAAA,wBAAA,iBAAA,CAAwB,MAAM,iBAAiB,KAAK;IACpD,UAAU,MAAM,WAAW,KAAA,IAAY;GACzC,GACA,MAAM,OAAO;IACX;IACA;IACA,cAAc,iBAAiB;GACjC,CAAC,KACC,MAAM,UAAU;IACd;IACA;IACA,cAAc,iBAAiB;GACjC,CAAC,KACD,0BAAA,wBACE,MAAM,WACN,MACA,MAAM,QACN,WACA,iBAAiB,KACnB,CACJ;EACF,CAAC,CACH;CACJ;AACF,CAAC"}

package/lib/components/LGrid.d.ts

@@ -0,0 +1,3 @@
+import type { LGridProps } from '../types';
+export declare const LGrid: import("vue").DefineComponent<LGridProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LGridProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+//# sourceMappingURL=LGrid.d.ts.map

package/lib/components/LGridItem.cjs

@@ -0,0 +1,53 @@
+/*!
+* ***********************************
+* @composy/layout-vue v0.0.1      *
+* Built with rollup               *
+* Build time: 2024-08-17 11:47:09 *
+* Build mode: production          *
+* Minified: No                    *
+* ***********************************
+*/
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_material_renderer = require("./material-renderer.cjs");
+let vue = require("vue");
+//#region src/components/LGridItem.ts
+const LGridItem = (0, vue.defineComponent)({
+	name: "LGridItem",
+	props: {
+		item: {
+			type: Object,
+			required: true
+		},
+		placement: {
+			type: Object,
+			required: true
+		},
+		breakpointId: {
+			type: String,
+			required: true
+		},
+		materials: {
+			type: [Object, Array],
+			default: void 0
+		},
+		target: {
+			type: String,
+			default: "vue"
+		}
+	},
+	setup(props, { slots }) {
+		return () => (0, vue.h)("div", {
+			class: "ldesign-layout-item",
+			"data-layout-item-id": props.item.id,
+			"data-layout-type": props.item.type
+		}, slots.default?.({
+			item: props.item,
+			placement: props.placement,
+			breakpointId: props.breakpointId
+		}) ?? require_material_renderer.renderMaterialForTarget(props.materials, props.item, props.target, props.placement, props.breakpointId));
+	}
+});
+//#endregion
+exports.LGridItem = LGridItem;
+/*! End of @composy/layout-vue | Powered by @composy/builder */
+//# sourceMappingURL=LGridItem.cjs.map

package/lib/components/LGridItem.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LGridItem.cjs","names":[],"sources":["../../src/components/LGridItem.ts"],"sourcesContent":["import { defineComponent, h, type PropType } from 'vue'\nimport type { LayoutNode, LayoutPlacement } from '@composy/layout-core'\nimport {\n  renderMaterialForTarget,\n  type VueMaterialSource,\n} from './material-renderer'\n\nexport const LGridItem = defineComponent({\n  name: 'LGridItem',\n  props: {\n    item: { type: Object as () => LayoutNode, required: true },\n    placement: { type: Object as () => LayoutPlacement, required: true },\n    breakpointId: { type: String, required: true },\n    materials: {\n      type: [Object, Array] as PropType<VueMaterialSource>,\n      default: undefined,\n    },\n    target: { type: String, default: 'vue' },\n  },\n  setup(props, { slots }) {\n    return () =>\n      h(\n        'div',\n        {\n          class: 'ldesign-layout-item',\n          'data-layout-item-id': props.item.id,\n          'data-layout-type': props.item.type,\n        },\n        slots.default?.({\n          item: props.item,\n          placement: props.placement,\n          breakpointId: props.breakpointId,\n        }) ??\n          renderMaterialForTarget(\n            props.materials as VueMaterialSource,\n            props.item,\n            props.target as 'vue' | 'webcomponent',\n            props.placement,\n            props.breakpointId\n          )\n      )\n  },\n})\n"],"mappings":";;;;;;;;;;;;;AAOO,MAAM,aAAA,GAAA,IAAA,gBAAA,CAA4B;CACvC,MAAM;CACN,OAAO;EACL,MAAM;GAAE,MAAM;GAA4B,UAAU;EAAK;EACzD,WAAW;GAAE,MAAM;GAAiC,UAAU;EAAK;EACnE,cAAc;GAAE,MAAM;GAAQ,UAAU;EAAK;EAC7C,WAAW;GACT,MAAM,CAAC,QAAQ,KAAK;GACpB,SAAS,KAAA;EACX;EACA,QAAQ;GAAE,MAAM;GAAQ,SAAS;EAAM;CACzC;CACA,MAAM,OAAO,EAAE,SAAS;EACtB,cAAA,GAAA,IAAA,EAAA,CAEI,OACA;GACE,OAAO;GACP,uBAAuB,MAAM,KAAK;GAClC,oBAAoB,MAAM,KAAK;EACjC,GACA,MAAM,UAAU;GACd,MAAM,MAAM;GACZ,WAAW,MAAM;GACjB,cAAc,MAAM;EACtB,CAAC,KACC,0BAAA,wBACE,MAAM,WACN,MAAM,MACN,MAAM,QACN,MAAM,WACN,MAAM,YACR,CACJ;CACJ;AACF,CAAC"}

package/lib/components/LGridItem.d.ts

@@ -0,0 +1,52 @@
+import { type PropType } from 'vue';
+import type { LayoutNode, LayoutPlacement } from '@composy/layout-core';
+import { type VueMaterialSource } from './material-renderer';
+export declare const LGridItem: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    item: {
+        type: () => LayoutNode;
+        required: true;
+    };
+    placement: {
+        type: () => LayoutPlacement;
+        required: true;
+    };
+    breakpointId: {
+        type: StringConstructor;
+        required: true;
+    };
+    materials: {
+        type: PropType<VueMaterialSource>;
+        default: any;
+    };
+    target: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    item: {
+        type: () => LayoutNode;
+        required: true;
+    };
+    placement: {
+        type: () => LayoutPlacement;
+        required: true;
+    };
+    breakpointId: {
+        type: StringConstructor;
+        required: true;
+    };
+    materials: {
+        type: PropType<VueMaterialSource>;
+        default: any;
+    };
+    target: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    materials: VueMaterialSource;
+    target: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=LGridItem.d.ts.map

package/lib/components/LLayoutEditor.cjs

@@ -0,0 +1,82 @@
+/*!
+* ***********************************
+* @composy/layout-vue v0.0.1      *
+* Built with rollup               *
+* Build time: 2024-08-17 11:47:09 *
+* Build mode: production          *
+* Minified: No                    *
+* ***********************************
+*/
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+let vue = require("vue");
+let _composy_layout_editor = require("@composy/layout-editor");
+//#region src/components/LLayoutEditor.ts
+const LLayoutEditor = (0, vue.defineComponent)({
+	name: "LLayoutEditor",
+	props: {
+		document: {
+			type: Object,
+			required: true
+		},
+		engine: {
+			type: Object,
+			required: true
+		},
+		mode: {
+			type: String,
+			default: "edit"
+		},
+		preview: Object,
+		materials: {
+			type: Object,
+			default: void 0
+		}
+	},
+	emits: [
+		"update:document",
+		"change",
+		"ready"
+	],
+	setup(props, { slots, emit, expose }) {
+		const editor = (0, vue.shallowRef)((0, _composy_layout_editor.createLayoutEditor)({
+			document: props.document,
+			engine: props.engine,
+			materials: props.materials,
+			preview: props.preview
+		}));
+		let lastEmittedDocument = JSON.stringify(props.document);
+		(0, vue.onMounted)(() => {
+			editor.value.on("document:change", (event) => {
+				lastEmittedDocument = JSON.stringify(event.document);
+				emit("update:document", event.document);
+				emit("change", event);
+			});
+			editor.value.mount();
+			editor.value.setMode(props.mode);
+			emit("ready", editor.value);
+		});
+		(0, vue.watch)(() => props.document, (value) => {
+			const next = JSON.stringify(value);
+			if (next !== lastEmittedDocument) {
+				editor.value.load(value);
+				lastEmittedDocument = next;
+			}
+		});
+		(0, vue.watch)(() => props.mode, (value) => editor.value.setMode(value));
+		const onKeydown = (event) => {
+			editor.value.handleKeyboard(event);
+		};
+		(0, vue.onBeforeUnmount)(() => editor.value.destroy());
+		expose({ editor });
+		return () => (0, vue.h)("div", {
+			class: "ldesign-layout-editor",
+			"data-layout-mode": props.mode,
+			"aria-keyshortcuts": "ArrowLeft ArrowRight ArrowUp ArrowDown Delete Control+C Control+V Control+X Control+D",
+			onKeydown
+		}, slots.default?.({ editor: editor.value }));
+	}
+});
+//#endregion
+exports.LLayoutEditor = LLayoutEditor;
+/*! End of @composy/layout-vue | Powered by @composy/builder */
+//# sourceMappingURL=LLayoutEditor.cjs.map

package/lib/components/LLayoutEditor.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LLayoutEditor.cjs","names":[],"sources":["../../src/components/LLayoutEditor.ts"],"sourcesContent":["import {\n  defineComponent,\n  h,\n  onBeforeUnmount,\n  onMounted,\n  shallowRef,\n  watch,\n} from 'vue'\nimport { createLayoutEditor } from '@composy/layout-editor'\nimport type {\n  LayoutDocument,\n  MaterialDefinition,\n  MaterialRegistry,\n} from '@composy/layout-core'\nimport type {\n  LayoutEditorEngine,\n  LayoutEditorOptions,\n} from '@composy/layout-editor'\n\nexport const LLayoutEditor = defineComponent({\n  name: 'LLayoutEditor',\n  props: {\n    document: { type: Object as () => LayoutDocument, required: true },\n    engine: { type: Object as () => LayoutEditorEngine, required: true },\n    mode: {\n      type: String as () => 'edit' | 'preview' | 'readonly',\n      default: 'edit',\n    },\n    preview: Object as () => LayoutEditorOptions['preview'],\n    materials: { type: Object, default: undefined },\n  },\n  emits: ['update:document', 'change', 'ready'],\n  setup(props, { slots, emit, expose }) {\n    const editor = shallowRef(\n      createLayoutEditor({\n        document: props.document,\n        engine: props.engine,\n        materials: props.materials as\n          MaterialRegistry | readonly MaterialDefinition[] | undefined,\n        preview: props.preview,\n      })\n    )\n    let lastEmittedDocument = JSON.stringify(props.document)\n    onMounted(() => {\n      editor.value.on('document:change', event => {\n        lastEmittedDocument = JSON.stringify(event.document)\n        emit('update:document', event.document)\n        emit('change', event)\n      })\n      editor.value.mount()\n      editor.value.setMode(props.mode)\n      emit('ready', editor.value)\n    })\n    watch(\n      () => props.document,\n      value => {\n        const next = JSON.stringify(value)\n        if (next !== lastEmittedDocument) {\n          editor.value.load(value)\n          lastEmittedDocument = next\n        }\n      }\n    )\n    watch(\n      () => props.mode,\n      value => editor.value.setMode(value)\n    )\n    const onKeydown = (event: KeyboardEvent) => {\n      editor.value.handleKeyboard(event)\n    }\n    onBeforeUnmount(() => editor.value.destroy())\n    expose({ editor })\n    return () =>\n      h(\n        'div',\n        {\n          class: 'ldesign-layout-editor',\n          'data-layout-mode': props.mode,\n          'aria-keyshortcuts':\n            'ArrowLeft ArrowRight ArrowUp ArrowDown Delete Control+C Control+V Control+X Control+D',\n          onKeydown,\n        },\n        slots.default?.({ editor: editor.value })\n      )\n  },\n})\n"],"mappings":";;;;;;;;;;;;;AAmBO,MAAM,iBAAA,GAAA,IAAA,gBAAA,CAAgC;CAC3C,MAAM;CACN,OAAO;EACL,UAAU;GAAE,MAAM;GAAgC,UAAU;EAAK;EACjE,QAAQ;GAAE,MAAM;GAAoC,UAAU;EAAK;EACnE,MAAM;GACJ,MAAM;GACN,SAAS;EACX;EACA,SAAS;EACT,WAAW;GAAE,MAAM;GAAQ,SAAS,KAAA;EAAU;CAChD;CACA,OAAO;EAAC;EAAmB;EAAU;CAAO;CAC5C,MAAM,OAAO,EAAE,OAAO,MAAM,UAAU;EACpC,MAAM,UAAA,GAAA,IAAA,WAAA,EAAA,GAAA,uBAAA,mBAAA,CACe;GACjB,UAAU,MAAM;GAChB,QAAQ,MAAM;GACd,WAAW,MAAM;GAEjB,SAAS,MAAM;EACjB,CAAC,CACH;EACA,IAAI,sBAAsB,KAAK,UAAU,MAAM,QAAQ;EACvD,CAAA,GAAA,IAAA,UAAA,OAAgB;GACd,OAAO,MAAM,GAAG,oBAAmB,UAAS;IAC1C,sBAAsB,KAAK,UAAU,MAAM,QAAQ;IACnD,KAAK,mBAAmB,MAAM,QAAQ;IACtC,KAAK,UAAU,KAAK;GACtB,CAAC;GACD,OAAO,MAAM,MAAM;GACnB,OAAO,MAAM,QAAQ,MAAM,IAAI;GAC/B,KAAK,SAAS,OAAO,KAAK;EAC5B,CAAC;EACD,CAAA,GAAA,IAAA,MAAA,OACQ,MAAM,WACZ,UAAS;GACP,MAAM,OAAO,KAAK,UAAU,KAAK;GACjC,IAAI,SAAS,qBAAqB;IAChC,OAAO,MAAM,KAAK,KAAK;IACvB,sBAAsB;GACxB;EACF,CACF;EACA,CAAA,GAAA,IAAA,MAAA,OACQ,MAAM,OACZ,UAAS,OAAO,MAAM,QAAQ,KAAK,CACrC;EACA,MAAM,aAAa,UAAyB;GAC1C,OAAO,MAAM,eAAe,KAAK;EACnC;EACA,CAAA,GAAA,IAAA,gBAAA,OAAsB,OAAO,MAAM,QAAQ,CAAC;EAC5C,OAAO,EAAE,OAAO,CAAC;EACjB,cAAA,GAAA,IAAA,EAAA,CAEI,OACA;GACE,OAAO;GACP,oBAAoB,MAAM;GAC1B,qBACE;GACF;EACF,GACA,MAAM,UAAU,EAAE,QAAQ,OAAO,MAAM,CAAC,CAC1C;CACJ;AACF,CAAC"}

package/lib/components/LLayoutEditor.d.ts

@@ -0,0 +1,49 @@
+import type { LayoutDocument } from '@composy/layout-core';
+import type { LayoutEditorEngine, LayoutEditorOptions } from '@composy/layout-editor';
+export declare const LLayoutEditor: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    document: {
+        type: () => LayoutDocument;
+        required: true;
+    };
+    engine: {
+        type: () => LayoutEditorEngine;
+        required: true;
+    };
+    mode: {
+        type: () => "edit" | "preview" | "readonly";
+        default: string;
+    };
+    preview: () => LayoutEditorOptions["preview"];
+    materials: {
+        type: ObjectConstructor;
+        default: any;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:document" | "ready")[], "change" | "update:document" | "ready", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    document: {
+        type: () => LayoutDocument;
+        required: true;
+    };
+    engine: {
+        type: () => LayoutEditorEngine;
+        required: true;
+    };
+    mode: {
+        type: () => "edit" | "preview" | "readonly";
+        default: string;
+    };
+    preview: () => LayoutEditorOptions["preview"];
+    materials: {
+        type: ObjectConstructor;
+        default: any;
+    };
+}>> & Readonly<{
+    onChange?: (...args: any[]) => any;
+    "onUpdate:document"?: (...args: any[]) => any;
+    onReady?: (...args: any[]) => any;
+}>, {
+    mode: "edit" | "preview" | "readonly";
+    materials: Record<string, any>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=LLayoutEditor.d.ts.map

package/lib/components/LLayoutWorkspace.cjs

@@ -0,0 +1,21 @@
+/*!
+* ***********************************
+* @composy/layout-vue v0.0.1      *
+* Built with rollup               *
+* Build time: 2024-08-17 11:47:09 *
+* Build mode: production          *
+* Minified: No                    *
+* ***********************************
+*/
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_LLayoutWorkspace_vue_vue_type_script_setup_true_lang = require("./LLayoutWorkspace.vue_vue_type_script_setup_true_lang.cjs");
+//#region src/components/LLayoutWorkspace.vue
+require_LLayoutWorkspace_vue_vue_type_script_setup_true_lang.default.__file = "src/components/LLayoutWorkspace.vue";
+var LLayoutWorkspace_default = require_LLayoutWorkspace_vue_vue_type_script_setup_true_lang.default;
+//#endregion
+exports.default = LLayoutWorkspace_default;
+/*! End of @composy/layout-vue | Powered by @composy/builder */
+//# sourceMappingURL=LLayoutWorkspace.cjs.map