@composy/layout-vue 0.0.1

package/CHANGELOG.md

@@ -0,0 +1,6 @@
+# Changelog
+
+## 1.0.0-alpha.0
+
+- Added Vue 3 runtime, editor, grid, item, and material drag-source adapters.
+- Exposed the editor preview container through `LLayoutEditor`.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 LDesign Team
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,75 @@
+# @composy/layout-vue
+
+Vue 3 adapters for the document-first LDesign Layout packages.
+
+```vue
+<LGrid :document="document">
+  <template #item="{ item }">
+    <WidgetRenderer :type="item.type" :props="item.props" />
+  </template>
+</LGrid>
+```
+
+传入 `materials` 后，插槽仍然拥有最高优先级；没有插槽时会按物料的 `vue`、Web Component 或 HTML
+renderer descriptor 自动渲染：
+
+```vue
+<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:
+
+```vue
+<LLayoutEditor :document="document" :engine="engine" :preview="{ container: previewElement }" />
+```
+
+## 工作台
+
+`LLayoutWorkspace`
+是可直接挂载的完整布局工作台，包含物料注册、搜索与分类筛选、全局开发目标切换（原生 Web Component /
+Vue
+3）、GridStack 拖拽编辑、断点与横竖屏、缩放平移、代码输出、高亮、复制下载和真实预览弹窗。工作台内部只通过公开的 core/editor/runtime/compiler 契约工作，应用只需提供可选的
+`document` 与 `materials`：
+
+```ts
+import { LLayoutWorkspace } from '@composy/layout-vue'
+import '@composy/layout-vue/style/workspace.css'
+```
+
+```vue
+<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 运行时依赖；“预览”保留工作区上下文，“实时预览”打开同一文档的目标运行时弹窗。