@composy/layout-vue 0.0.1 → 0.0.2

package/CHANGELOG.md

@@ -1,5 +1,62 @@
 # Changelog
 
+## [0.0.2] - 2026-10-12
+
+### ✨ 新功能
+
+- **layout**: 添加 LDesign 项目配置文件 ([f61ae51](https://gitee.com/swimly/ldesign-layout/commit/f61ae51279dff52720216e15e7dffc6fd0b8c579)) - @swimly
+- auto-generated playground + README for layout sub-packages ([8fb976a](https://gitee.com/swimly/ldesign-layout/commit/8fb976a2cff047f1a34c495478858049c29f661b)) - @swimly
+- 初始化网格布局系统核心库、Vue适配器及演示项目 ([85c7432](https://gitee.com/swimly/ldesign-layout/commit/85c74320349e725a0f0ac4bd113d88e97130bd7b)) - @swimly
+
+### ♻️ 代码重构
+
+- 重构项目为pnpm monorepo并初始化全量布局包 ([d6dda52](https://gitee.com/swimly/ldesign-layout/commit/d6dda528e132eff6f316f9dcb37c4dd11d4e98c7)) - @swimly
+
+### 📝 文档更新
+
+- 添加源码JSDoc注释并修复vue构建配置 ([774fff5](https://gitee.com/swimly/ldesign-layout/commit/774fff5694124791568c34f11cc8ffcf46e874df)) - @swimly
+
+### 💄 代码样式
+
+- **packages/vue**: 修复 package.json 缺失的末尾换行 ([fe7e61c](https://gitee.com/swimly/ldesign-layout/commit/fe7e61ca4e98fd50945ed8085a050b140a93cda2)) - @swimly
+
+### 📦 构建系统
+
+- 更新依赖版本、修复本地包路径与调整workspace配置 ([96dc8ee](https://gitee.com/swimly/ldesign-layout/commit/96dc8eeff5802eba4b8adf01847305169f39718c)) - @swimly
+- **vue**: 调整vue包构建输出路径并新增布局注入类型定义 ([b1783c3](https://gitee.com/swimly/ldesign-layout/commit/b1783c351fbf80c597414c5ca9a93108d4919bc8)) - @swimly
+- 切换为本地链接依赖并更新构建配置 ([52984e3](https://gitee.com/swimly/ldesign-layout/commit/52984e34075b228343fa95f852413cafae6b6557)) - @swimly
+- 优化 core 和 vue 包的 tsconfig 配置 ([30edcbf](https://gitee.com/swimly/ldesign-layout/commit/30edcbfc73e08faea200c9b7cacded2586c595fc)) - @swimly
+- 标准化库构建配置并添加UMD输出 ([a686bb2](https://gitee.com/swimly/ldesign-layout/commit/a686bb28ec4e03bdfee843c0ffb3f1207c729347)) - @swimly
+- **vue**: 在 package.json 的 files 字段中添加 lib 目录 ([41bd2e0](https://gitee.com/swimly/ldesign-layout/commit/41bd2e091f72f5edfe990e7cfed8e2e47ae77f19)) - @swimly
+
+### 🔧 其他
+
+- **layout**: 更新项目配置及依赖版本 ([5344532](https://gitee.com/swimly/ldesign-layout/commit/534453298534e85a3f6776f908290bffdb15b8a6)) - @swimly
+- **layout**: 统一构建配置与文档体系，新增 Playground 示例 ([d8691a0](https://gitee.com/swimly/ldesign-layout/commit/d8691a0721bdf088b6c5585ac2826b1b851d746d)) - @swimly
+- 修复多个package.json文件末尾缺失换行符的问题 ([df9b977](https://gitee.com/swimly/ldesign-layout/commit/df9b977cca8d88cb4df00583f6eea31fd0e8c51b)) - @swimly
+- 更新各包依赖版本 ([1ce08a9](https://gitee.com/swimly/ldesign-layout/commit/1ce08a9e677780eb38298c4cabe92e5693424fc2)) - @swimly
+- update layout (92 files) ([9c28da2](https://gitee.com/swimly/ldesign-layout/commit/9c28da243aebea0d2c1c20ccb4c996aae9f031fc)) - @swimly
+- **types**: 删除不再使用的 shims-vue.d.ts 文件 ([775e7f8](https://gitee.com/swimly/ldesign-layout/commit/775e7f85a2c15b25bb8726885e99de951441aaae)) - @swimly
+- normalize versions, clean artifacts, update gitignore ([eda7040](https://gitee.com/swimly/ldesign-layout/commit/eda7040c38687acedd22db31f9576143e029f3d1)) - @swimly
+- update - docs: 添加源码JSDoc注释并修复vue构建配 ([1668904](https://gitee.com/swimly/ldesign-layout/commit/1668904bb55a1903727f67ee98df6f088a599164)) - @swimly
+- 批量更新 - 规范 .gitignore 清理源码 ([854d7ef](https://gitee.com/swimly/ldesign-layout/commit/854d7efc32d60f608bc638e219cb16763216dfd0)) - @swimly
+- unified build config and structure ([c0ae01c](https://gitee.com/swimly/ldesign-layout/commit/c0ae01c844cebc0b5bd7d4a2dc8ef16e5c8186ee)) - @swimly
+- 添加代码质量工具配置和脚本 ([083653a](https://gitee.com/swimly/ldesign-layout/commit/083653a0ad7c4e34249737fd7af9d3257fda548d)) - @swimly
+- **vue**: 更新 Vue 依赖版本至 3.5.32 ([2815698](https://gitee.com/swimly/ldesign-layout/commit/28156980c94d5b588a073d0d85794fd7af2823b8)) - @swimly
+- add build config, tsconfig, README ([7d4bb6e](https://gitee.com/swimly/ldesign-layout/commit/7d4bb6e0cee6ae778bd7073a3e2315696ffcabf3)) - @swimly
+- clean up project structure - keep only packages/core/src and packages/vue/src ([92fbacb](https://gitee.com/swimly/ldesign-layout/commit/92fbacb2a9a061723c70d2410da75a763f0a742e)) - @swimly
+- batch commit submodule changes ([fa38ca9](https://gitee.com/swimly/ldesign-layout/commit/fa38ca997fe9336fafec6d0fdd8eff2c4940edfe)) - @swimly
+- set versions to 0.0.1 and pin @ldesign deps ([6656c50](https://gitee.com/swimly/ldesign-layout/commit/6656c50f4c8a112148932298ebe9cff5469009dc)) - @swimly
+
+### 👥 Contributors
+
+swimly
+
+### 📊 Statistics
+
+- Total Commits: **28**
+- Contributors: **1**
+
 ## 1.0.0-alpha.0
 
 - Added Vue 3 runtime, editor, grid, item, and material drag-source adapters.

package/README.md

@@ -1,75 +1,82 @@
-# @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 运行时依赖；“预览”保留工作区上下文，“实时预览”打开同一文档的目标运行时弹窗。
+# @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 运行时依赖；“预览”保留工作区上下文，“实时预览”打开同一文档的目标运行时弹窗。
+
+## 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.

package/dist/index.css

@@ -1,7 +1,5 @@
 /* style/index.less */
 
-/*# sourceMappingURL=src/style/index.less.map */
-
 /* style/workspace.css */
 :root {
   color: #172033;
@@ -1390,6 +1388,15 @@ body > .ui-draggable-dragging[data-layout-material] {
   flex: 1 0 auto;
 }
 
+/* The editor keeps a native runtime container mounted for fast framework
+ * switching. Vue mode renders the adapter grid in the same stage, so the
+ * native container must stay out of layout flow until Web Component mode is
+ * selected. */
+.runtime-preview-stage[data-preview-framework="vue"] > .runtime-preview-grid,
+.vanilla-runtime-stage[data-preview-framework="vue"] > .runtime-preview-grid {
+  display: none !important;
+}
+
 .layout-item-shell,
 .layout-card {
   position: relative;
@@ -2380,4 +2387,3 @@ body > .ui-draggable-dragging[data-layout-material] {
   color: #c5ceff !important;
 }
 
-/*# sourceMappingURL=src/style/workspace.css.map */

package/dist/index.js

@@ -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                    *
 * ***********************************
@@ -24,9 +24,16 @@
 })(this, function(exports, vue, _composy_layout_runtime, _composy_layout_core, _composy_layout_editor, gridstack, gridstack_dist_gridstack_min_css, lucide, lucide_vue_next, _composy_layout_compiler, _composy_layout_gridstack) {
 	Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 	//#region src/components/material-renderer.ts
+	const registryCache = /* @__PURE__ */ new WeakMap();
 	function resolveRegistry(source) {
 		if (!source) return void 0;
-		if (Array.isArray(source)) return (0, _composy_layout_core.createMaterialRegistry)(source);
+		if (Array.isArray(source)) {
+			const cached = registryCache.get(source);
+			if (cached) return cached;
+			const registry = (0, _composy_layout_core.createMaterialRegistry)(source);
+			registryCache.set(source, registry);
+			return registry;
+		}
 		return source;
 	}
 	function resolveMaterialDefinition(materials, type) {
@@ -102,7 +109,7 @@
 		}, breakpointId);
 	}
 	function sanitizeMarkup(value) {
-		return value.replace(/<script\b[^>]*>[\s\S]*?<\/script\s*>/gi, "").replace(/\s+on[a-z]+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi, "").replace(/\s+(?:href|src)\s*=\s*("|')\s*javascript:[^"']*\1/gi, "");
+		return value.replace(/<(?:script|style|iframe|object|embed|foreignObject)\b[^>]*>[\s\S]*?<\/(?:script|style|iframe|object|embed|foreignObject)\s*>/gi, "").replace(/<(?:script|style|iframe|object|embed|foreignObject)\b[^>]*>/gi, "").replace(/\s+on[a-z]+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi, "").replace(/\s+(?:href|src|xlink:href|formaction|srcdoc)\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi, (match) => /javascript:|data:text\/html/i.test(match) ? "" : match);
 	}
 	//#endregion
 	//#region src/components/LGrid.ts
@@ -150,8 +157,8 @@
 				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", {
@@ -210,7 +217,8 @@
 			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,
@@ -271,7 +279,7 @@
 			},
 			preview: Object,
 			materials: {
-				type: Object,
+				type: [Object, Array],
 				default: void 0
 			}
 		},
@@ -665,7 +673,7 @@
 			}
 			function formatCss(value) {
 				let depth = 0;
-				return value.replace(/\s*\{\s*/g, " {\n").replace(/\s*;\s*/g, ";\n").replace(/\s*}\s*/g, "\n}\n").split("\n").map((line) => line.trim()).filter(Boolean).map((line) => {
+				return value.replace(/\s*\{\s*/g, " {\n").replace(/\s*;\s*/g, ";\n").replace(/\s*\}\s*/g, "\n}\n").split("\n").map((line) => line.trim()).filter(Boolean).map((line) => {
 					if (line.startsWith("}")) depth = Math.max(0, depth - 1);
 					const formatted = `${"  ".repeat(depth)}${line}`;
 					if (line.endsWith("{")) depth += 1;
@@ -717,6 +725,9 @@
 					static get observedAttributes() {
 						return ["title", "value"];
 					}
+					get materialProps() {
+						return { ...this.props };
+					}
 					set materialProps(value) {
 						this.props = { ...value ?? {} };
 						this.render();
@@ -1280,8 +1291,8 @@ ${bindings}
 				code = code.replace(/(&quot;.*?&quot;|&#39;.*?&#39;|`.*?`)/g, (match) => stash(match, "string"));
 				code = code.replace(/(\/\/[^\n]*|\/\*[\s\S]*?\*\/)/g, (match) => stash(match, "comment"));
 				code = code.replace(/(^|[;{\n]\s*)([A-Za-z_$][\w$-]*)(?=\s*:)/g, (_, prefix, name) => `${prefix}${stash(name, "property")}`);
-				code = code.replace(/\b(import|from|const|let|function|return|export|as|type|class|extends|new|true|false|null|undefined)\b/g, (match) => stash(match, /^(true|false|null|undefined)$/.test(match) ? "constant" : "keyword"));
-				code = code.replace(/(&lt;\/?[A-Za-z][^&]*?&gt;)/g, (match) => stash(match, "tag"));
+				code = code.replace(/\b(import|from|const|let|function|return|export|as|type|class|extends|new|true|false|null|undefined)\b/g, (match) => stash(match, /^(?:true|false|null|undefined)$/.test(match) ? "constant" : "keyword"));
+				code = code.replace(/(&lt;\/?[A-Za-z][^&]*&gt;)/g, (match) => stash(match, "tag"));
 				let previous = "";
 				while (previous !== code && /__LDS_TOKEN_\d+__/.test(code)) {
 					previous = code;
@@ -2181,7 +2192,7 @@ ${bindings}
 									class: "custom-select__option",
 									type: "button",
 									"aria-selected": activeBreakpoint.value === breakpoint.id,
-									"aria-label": breakpointLabel(breakpoint.id) + " / " + breakpoint.columns + " 列",
+									"aria-label": `${breakpointLabel(breakpoint.id)} / ${breakpoint.columns} \u5217`,
 									onClick: ($event) => selectBreakpoint(breakpoint.id)
 								}, [
 									((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(breakpointIcons[breakpoint.id] ?? (0, vue.unref)(lucide_vue_next.Monitor)), {