@composy/layout-vue 0.0.1 → 0.0.2

package/esm/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/esm/types.js

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

package/lib/components/LGrid.cjs

@@ -2,7 +2,7 @@
 * ***********************************
 * @composy/layout-vue v0.0.1      *
 * Built with rollup               *
-* Build time: 2024-08-17 11:47:09 *
+* Build time: 2024-10-12 17:52:50 *
 * Build mode: production          *
 * Minified: No                    *
 * ***********************************
@@ -56,8 +56,8 @@ const LGrid = (0, vue.defineComponent)({
 			resize();
 		});
 		(0, vue.onBeforeUnmount)(() => observer?.disconnect());
-		(0, vue.watch)(() => props.breakpoint, (value) => {
-			activeBreakpoint.value = value ?? props.document.defaultBreakpointId;
+		(0, vue.watch)(() => [props.breakpoint, props.document.defaultBreakpointId], ([value, defaultBreakpoint]) => {
+			activeBreakpoint.value = value ?? defaultBreakpoint;
 		});
 		expose({ getBreakpoint: () => activeBreakpoint.value });
 		return () => (0, vue.h)("div", {

package/lib/components/LGrid.cjs.map

@@ -1 +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"}
+{"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, props.document.defaultBreakpointId],\n      ([value, defaultBreakpoint]) => {\n        activeBreakpoint.value = value ?? defaultBreakpoint\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,CAAC,MAAM,YAAY,MAAM,SAAS,mBAAmB,IAC1D,CAAC,OAAO,uBAAuB;GAC9B,iBAAiB,QAAQ,SAAS;EACpC,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.cts

@@ -0,0 +1,2 @@
+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>;

package/lib/components/LGrid.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LGrid.d.cts","sourceRoot":"","sources":["../../src/components/LGrid.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAM1C,eAAO,MAAM,KAAK,gSA8FhB,CAAA"}

package/lib/components/LGridItem.cjs

@@ -2,7 +2,7 @@
 * ***********************************
 * @composy/layout-vue v0.0.1      *
 * Built with rollup               *
-* Build time: 2024-08-17 11:47:09 *
+* Build time: 2024-10-12 17:52:50 *
 * Build mode: production          *
 * Minified: No                    *
 * ***********************************
@@ -10,6 +10,7 @@
 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/LGridItem.ts
 const LGridItem = (0, vue.defineComponent)({
 	name: "LGridItem",
@@ -39,7 +40,8 @@ const LGridItem = (0, vue.defineComponent)({
 		return () => (0, vue.h)("div", {
 			class: "ldesign-layout-item",
 			"data-layout-item-id": props.item.id,
-			"data-layout-type": props.item.type
+			"data-layout-type": props.item.type,
+			style: (0, _composy_layout_runtime.resolveItemStyle)(props.item, props.breakpointId)
 		}, slots.default?.({
 			item: props.item,
 			placement: props.placement,

package/lib/components/LGridItem.cjs.map

@@ -1 +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"}
+{"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 { resolveItemStyle } from '@composy/layout-runtime'\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          style: resolveItemStyle(props.item, props.breakpointId),\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":";;;;;;;;;;;;;;AAQO,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;GAC/B,QAAA,GAAA,wBAAA,iBAAA,CAAwB,MAAM,MAAM,MAAM,YAAY;EACxD,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.cts

@@ -0,0 +1,51 @@
+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>;

package/lib/components/LGridItem.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LGridItem.d.cts","sourceRoot":"","sources":["../../src/components/LGridItem.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,QAAQ,EAAE,MAAM,KAAK,CAAA;AACvD,OAAO,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAEvE,OAAO,EAEL,KAAK,iBAAiB,EACvB,MAAM,qBAAqB,CAAA;AAE5B,eAAO,MAAM,SAAS;;cAGM,MAAM,UAAU;;;;cACX,MAAM,eAAe;;;;;;;;cAGvB,QAAQ,CAAC,iBAAiB,CAAC;;;;;;;;;;;cAJ9B,MAAM,UAAU;;;;cACX,MAAM,eAAe;;;;;;;;cAGvB,QAAQ,CAAC,iBAAiB,CAAC;;;;;;;;;;4EA6BxD,CAAA"}

package/lib/components/LLayoutEditor.cjs

@@ -2,7 +2,7 @@
 * ***********************************
 * @composy/layout-vue v0.0.1      *
 * Built with rollup               *
-* Build time: 2024-08-17 11:47:09 *
+* Build time: 2024-10-12 17:52:50 *
 * Build mode: production          *
 * Minified: No                    *
 * ***********************************
@@ -28,7 +28,7 @@ const LLayoutEditor = (0, vue.defineComponent)({
 		},
 		preview: Object,
 		materials: {
-			type: Object,
+			type: [Object, Array],
 			default: void 0
 		}
 	},

package/lib/components/LLayoutEditor.cjs.map

@@ -1 +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"}
+{"version":3,"file":"LLayoutEditor.cjs","names":[],"sources":["../../src/components/LLayoutEditor.ts"],"sourcesContent":["import {\n  defineComponent,\n  h,\n  onBeforeUnmount,\n  onMounted,\n  shallowRef,\n  type PropType,\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: {\n      type: [Object, Array] as PropType<\n        MaterialRegistry | readonly MaterialDefinition[]\n      >,\n      default: undefined,\n    },\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":";;;;;;;;;;;;;AAoBO,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;GACT,MAAM,CAAC,QAAQ,KAAK;GAGpB,SAAS,KAAA;EACX;CACF;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 → LLayoutEditor.d.cts}

@@ -1,4 +1,5 @@
-import type { LayoutDocument } from '@composy/layout-core';
+import { type PropType } from 'vue';
+import type { LayoutDocument, MaterialDefinition, MaterialRegistry } from '@composy/layout-core';
 import type { LayoutEditorEngine, LayoutEditorOptions } from '@composy/layout-editor';
 export declare const LLayoutEditor: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     document: {
@@ -15,7 +16,7 @@ export declare const LLayoutEditor: import("vue").DefineComponent<import("vue").
     };
     preview: () => LayoutEditorOptions["preview"];
     materials: {
-        type: ObjectConstructor;
+        type: PropType<MaterialRegistry | readonly MaterialDefinition[]>;
         default: any;
     };
 }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
@@ -35,7 +36,7 @@ export declare const LLayoutEditor: import("vue").DefineComponent<import("vue").
     };
     preview: () => LayoutEditorOptions["preview"];
     materials: {
-        type: ObjectConstructor;
+        type: PropType<MaterialRegistry | readonly MaterialDefinition[]>;
         default: any;
     };
 }>> & Readonly<{
@@ -44,6 +45,5 @@ export declare const LLayoutEditor: import("vue").DefineComponent<import("vue").
     onReady?: (...args: any[]) => any;
 }>, {
     mode: "edit" | "preview" | "readonly";
-    materials: Record<string, any>;
+    materials: MaterialRegistry | readonly MaterialDefinition<import("@composy/layout-core").JsonRecord>[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-//# sourceMappingURL=LLayoutEditor.d.ts.map

package/lib/components/LLayoutEditor.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LLayoutEditor.d.cts","sourceRoot":"","sources":["../../src/components/LLayoutEditor.ts"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,QAAQ,EAEd,MAAM,KAAK,CAAA;AAEZ,OAAO,KAAK,EACV,cAAc,EACd,kBAAkB,EAClB,gBAAgB,EACjB,MAAM,sBAAsB,CAAA;AAC7B,OAAO,KAAK,EACV,kBAAkB,EAClB,mBAAmB,EACpB,MAAM,wBAAwB,CAAA;AAE/B,eAAO,MAAM,aAAa;;cAGM,MAAM,cAAc;;;;cACtB,MAAM,kBAAkB;;;;cAEhC,MAAM,MAAM,GAAG,SAAS,GAAG,UAAU;;;aAGpC,MAAM,mBAAmB,CAAC,SAAS,CAAC;;cAE5B,QAAQ,CAC/B,gBAAgB,GAAG,SAAS,kBAAkB,EAAE,CACjD;;;;;;;cAVyB,MAAM,cAAc;;;;cACtB,MAAM,kBAAkB;;;;cAEhC,MAAM,MAAM,GAAG,SAAS,GAAG,UAAU;;;aAGpC,MAAM,mBAAmB,CAAC,SAAS,CAAC;;cAE5B,QAAQ,CAC/B,gBAAgB,GAAG,SAAS,kBAAkB,EAAE,CACjD;;;;;;;;;;4EA0DL,CAAA"}

package/lib/components/LLayoutWorkspace.cjs

@@ -2,7 +2,7 @@
 * ***********************************
 * @composy/layout-vue v0.0.1      *
 * Built with rollup               *
-* Build time: 2024-08-17 11:47:09 *
+* Build time: 2024-10-12 17:52:50 *
 * Build mode: production          *
 * Minified: No                    *
 * ***********************************