@composy/layout-vue

@composy/layout-vue

Vue 3 adapters for the document-first LDesign Layout packages.

<LGrid :document="document">
  <template #item="{ item }">
    <WidgetRenderer :type="item.type" :props="item.props" />
  </template>
</LGrid>

传入 materials 后，插槽仍然拥有最高优先级；没有插槽时会按物料的 vue、Web Component 或 HTML renderer descriptor 自动渲染：

<LGrid :document="document" :materials="materials" />
<LMaterialDragSource :editor="editor" :material="materials.get('analytics/metric')" />

<!-- 在自定义 grid-item 中复用同一套注册表解析 -->
<LMaterialRenderer
  :item="item"
  :materials="materials"
  target="vue"
  :breakpoint-id="breakpointId"
  class="layout-item-content"
/>

物料定义可以使用 category、keywords 和 size 驱动物料面板的分类、搜索和宽高配置；拖入后编辑器会在所有断点补齐 defaultLayout，并继承 constraints。

The package exports LGrid, LGridItem, LMaterialRenderer, LLayoutEditor, LMaterialDragSource, LMetricCard, LTrendCard, and useLayoutEditor. LMetricCard and LTrendCard are small reference materials showing the Vue renderer contract; application packages can register their own component objects in exactly the same way. Document updates are emitted only after a committed editor transaction.

LLayoutEditor also accepts the optional preview object from the framework-neutral editor. Pass a separate container to switch between the GridStack editor layer and CSS Grid preview while keeping the document, selection, and active breakpoint:

<LLayoutEditor :document="document" :engine="engine" :preview="{ container: previewElement }" />

工作台

LLayoutWorkspace 是可直接挂载的完整布局工作台，包含物料注册、搜索与分类筛选、全局开发目标切换（原生 Web Component / Vue 3）、GridStack 拖拽编辑、断点与横竖屏、缩放平移、代码输出、高亮、复制下载和真实预览弹窗。工作台内部只通过公开的 core/editor/runtime/compiler 契约工作，应用只需提供可选的 document 与 materials：

import { LLayoutWorkspace } from '@composy/layout-vue'
import '@composy/layout-vue/style/workspace.css'

<LLayoutWorkspace v-model:document="document" :materials="materials" @change="handleLayoutChange" />

组件会在每次已提交的编辑事务后触发 update:document 与 change，因此可以直接使用 v-model:document 保存布局。

LMaterialRenderer 是物料渲染的唯一目标选择入口：target="vue" 使用注册表中 renderers.vue.component 的真实 Vue 组件，target="webcomponent" 使用 renderers.webcomponent.tagName 的自定义元素。它不会把 Vue 组件实例写入布局文档，适合在 LGrid 插槽、预览弹窗和第三方 grid-item 中复用。

右侧代码检查器只展示当前头部开发目标：原生目标是 HTML/CSS Grid 与 Web Component 标签，Vue 目标是引用注册物料组件的 Vue SFC。两种输出都只使用 CSS Grid 与注册物料 renderer，不包含 GridStack 运行时依赖；“预览”保留工作区上下文，“实时预览”打开同一文档的目标运行时弹窗。

Build outputs

Run pnpm run build from this package to build with @composy/builder and rolldown. The command emits the standard dist, es, esm, and lib directories and then removes only CSS sourceMappingURL comments whose referenced map file is missing. JavaScript source maps remain enabled; the cleanup prevents browser warnings from the builder's preserved CSS module paths.