@sepveneto/dnde 0.8.9 → 0.8.11

package/dist/element.d.ts

@@ -0,0 +1,27 @@
+/**
+ * `<mpd-editor>` 自定义元素。
+ *
+ * 元素在模块加载时就注册（见 main.ts 的 `register` 与文件末尾），宿主因此可以无条件地
+ * 在模板里渲染 `<mpd-editor>`，不需要用 v-if 之类的开关去对齐渲染时机：
+ *
+ * - 组件定义是异步的（等宿主 `register()` 给出生产者地址、生产者 `setup` 加载完再挂载），
+ *   等待期间先往 shadow root 里放一个加载占位，挂载时由 Editor.vue 撤掉；
+ * - 挂载前调用的指令式 API（register / validate / getData / setData）会先排队，
+ *   挂载后补上，见 ./api.ts。
+ */
+import type { App, Component } from 'vue';
+import type { EditorApi } from './api';
+/** `<mpd-editor>` 注册的标签名 */
+export declare const EDITOR_ELEMENT_TAG = "mpd-editor";
+export interface EditorElementInit {
+    /** 组件定义：等待 `register()` 与生产者 setup 的异步定义（见 main.ts） */
+    definition: Component;
+    /** 每个元素实例创建应用时调用：装上编辑器自己的 pinia 与生产者声明的插件 */
+    configureApp: (app: App) => void;
+}
+export declare function createEditorElement({ definition, configureApp }: EditorElementInit): CustomElementConstructor;
+/**
+ * 编辑器挂载完成（在 Editor.vue 的 setup 里调用）：撤掉加载占位，并交出指令式 API 的实现，
+ * 挂载前排队的方法调用会在这里补上。
+ */
+export declare function bindEditorElement(host: any, api: EditorApi): void;

package/dist/layout/widgetsMenu.vue.d.ts

@@ -5,14 +5,17 @@ declare const _default: import("vue").DefineComponent<{}, {
         setWidgets: (data: import("@/store").LikeWidget[]) => void;
         widgets: import("vue").ShallowRef<(Widget | WidgetGroup)[] | undefined, (Widget | WidgetGroup)[] | undefined>;
         widgetMap: Map<string, Widget>;
+        widgetsFlat: import("vue").ComputedRef<Widget[]>;
     }, "widgets" | "widgetMap">, Pick<{
         setWidgets: (data: import("@/store").LikeWidget[]) => void;
         widgets: import("vue").ShallowRef<(Widget | WidgetGroup)[] | undefined, (Widget | WidgetGroup)[] | undefined>;
         widgetMap: Map<string, Widget>;
-    }, never>, Pick<{
+        widgetsFlat: import("vue").ComputedRef<Widget[]>;
+    }, "widgetsFlat">, Pick<{
         setWidgets: (data: import("@/store").LikeWidget[]) => void;
         widgets: import("vue").ShallowRef<(Widget | WidgetGroup)[] | undefined, (Widget | WidgetGroup)[] | undefined>;
         widgetMap: Map<string, Widget>;
+        widgetsFlat: import("vue").ComputedRef<Widget[]>;
     }, "setWidgets">>;
     hasGroup: (list?: (Widget | WidgetGroup)[]) => list is WidgetGroup[];
     handleClone: (original: Widget) => Node;

package/dist/main.d.ts

@@ -1,7 +1,9 @@
-import Main from './Editor.vue';
 import type { AgentImporter } from './agents/loader.js';
+import Main from './Editor.vue';
+import { EDITOR_ELEMENT_TAG } from './element.js';
 import { injectPopperStyles } from './utils.js';
 export type EditorInstance = InstanceType<typeof Main>;
+export { EDITOR_ELEMENT_TAG };
 export { injectPopperStyles };
 export type { AgentImporter } from './agents/loader.js';
 export interface RegisterOptions {

package/dist/shadowCss.d.ts

@@ -0,0 +1,27 @@
+/**
+ * 生产者（rsbuild / rspack）的 CSS chunk 加载与热更新都围绕 `<link>` 展开，默认挂到
+ * `document.head`。编辑器把「加载」重定向到 shadow root：取回 CSS 文本后以 `<style>` 注入，
+ * 这样样式只作用在编辑器内部，不会污染宿主页面（见 main.ts 的处理链路）。
+ *
+ * 重定向带来两个问题，这里负责兜住：
+ *
+ * 1. 热更新时 rspack 要先在 DOM 里找到「旧的样式表」，再在它旁边插入带新内容的 `<link>`。
+ *    它默认只在 `document` 里找，而我们的样式在 shadow root 中，找不到就整段放弃 ——
+ *    表现为「改了生产者的样式，开发态下画布不更新」（看起来就像样式丢失）。
+ *    因此注入时记上 `data-href`，并把「按 href 查 shadow root 里的样式表」暴露成
+ *    `__dnde_find_shadow_css__`，交给 `@sepveneto/dnd-plugins` 对运行时的补丁去调用。
+ *
+ * 2. shadow root 会随编辑器卸载/重挂而重建（宿主热更新、路由切换）。重建后模块缓存里
+ *    仍有 CSS 的加载记录，rspack 不会再次注入，新 shadow root 里就没有样式了。
+ *    这里记住已经投放过的样式地址，新的 shadow root 登记时重新投放一份。
+ */
+/**
+ * 装上供生产者运行时调用的两个全局函数。由编辑器挂载时调用一次即可。
+ */
+export declare function installShadowCssRuntime(): void;
+/**
+ * 登记编辑器的 shadow root。重建出来的 shadow root（宿主热更新 / 路由切换）会把之前
+ * 加载过的样式重新投放一份 —— 模块缓存不会让 rspack 再注入一次。
+ * 返回注销函数，编辑器卸载时调用。
+ */
+export declare function registerShadowCssRoot(shadowRoot: ShadowRoot | undefined): () => void;

package/dist/store/app.d.ts

@@ -14,12 +14,15 @@ export declare const useApp: import("pinia").StoreDefinition<"app", Pick<{
     setWidgets: (data: LikeWidget[]) => void;
     widgets: import("vue").ShallowRef<(Widget | WidgetGroup)[] | undefined, (Widget | WidgetGroup)[] | undefined>;
     widgetMap: Map<string, Widget>;
+    widgetsFlat: import("vue").ComputedRef<Widget[]>;
 }, "widgets" | "widgetMap">, Pick<{
     setWidgets: (data: LikeWidget[]) => void;
     widgets: import("vue").ShallowRef<(Widget | WidgetGroup)[] | undefined, (Widget | WidgetGroup)[] | undefined>;
     widgetMap: Map<string, Widget>;
-}, never>, Pick<{
+    widgetsFlat: import("vue").ComputedRef<Widget[]>;
+}, "widgetsFlat">, Pick<{
     setWidgets: (data: LikeWidget[]) => void;
     widgets: import("vue").ShallowRef<(Widget | WidgetGroup)[] | undefined, (Widget | WidgetGroup)[] | undefined>;
     widgetMap: Map<string, Widget>;
+    widgetsFlat: import("vue").ComputedRef<Widget[]>;
 }, "setWidgets">>;

package/dist/store/editor.d.ts

@@ -17,17 +17,53 @@ declare class WidgetPlugin {
     constructor(_ctx: any);
     addPanel(panel: PanelInfo): void;
 }
+/**
+ * 组件固定显示字段的约定（业务侧自行定义开关，编辑器据此决定是否渲染预览）。
+ * 与 `Node.visible` 使用同一约定：`data.isShow` 为真值时显示，为假值时隐藏。
+ */
+export declare const CONFIG_PANEL_SHOW_KEY = "isShow";
+export interface ConfigPluginContext {
+    addNode: (node: Node, pNode?: Node, manual?: boolean) => void;
+    rootNode: () => Node;
+}
+export interface ConfigPanelOptions {
+    /** 标签显示名（默认取组件的名字或数据键） */
+    label?: string;
+    /** 数据键：该标签的配置项绑定在 rootNode.data[name] 下 */
+    name: string;
+    /** 根节点（页面级）配置项，由业务侧定义 */
+    attributes?: SchemaItem[];
+}
 export interface ConfigPanel {
+    /** 稳定的标识，用于标签定位 */
+    wid: string;
     label: string;
+    /** 数据键，配置项绑定在 rootNode.data[name] 下 */
     name: string;
+    /** 根节点（页面级）配置项 */
     attributes: SchemaItem[];
+    /** 该标签绑定的数据对象 */
+    data: Record<string, any>;
+    /** 可选的固定组件节点 */
+    node?: Node;
 }
+/**
+ * 根节点（页面级）配置的补充入口（config pane 提供的额外标签）。
+ *
+ * 每个标签绑定一个固定组件 Node，但组件数据和配置页都属于根节点：
+ * - 数据写入 `rootNode.data[type]`，通过 `getData()` 输出，不进入页面拖拽列表；
+ * - 配置项由该 Widget 的 `schema.props` 定义；
+ * - 只有 `data.isShow` 为真时才渲染固定组件预览，纯配置标签不会加载组件视图；
+ * - 点击固定组件预览时应回到根节点，并激活对应配置标签，而不是独立选中该组件。
+ */
 declare class ConfigPlugin {
-    list: ConfigPanel[];
-    constructor(_ctx?: any);
+    ctx: ConfigPluginContext;
+    list: Node[];
+    constructor(ctx: ConfigPluginContext);
     get defaultPane(): string;
-    addPanel(panel: ConfigPanel): void;
-    validate(data: any): Promise<boolean>;
+    /** 注册一个根节点配置标签及其固定组件视图 */
+    addPanel(options: IWidget): Node;
+    validate(): Promise<boolean>;
 }
 export declare const useEditor: import("pinia").StoreDefinition<"editor", Pick<{
     rootNode: import("vue").Ref<Raw<Node>, Raw<Node>>;
@@ -35,7 +71,9 @@ export declare const useEditor: import("pinia").StoreDefinition<"editor", Pick<{
     shadowRoot: import("vue").ShallowRef<ShadowRoot | undefined, ShadowRoot | undefined>;
     elementRoot: import("vue").ShallowRef<HTMLElement | undefined, HTMLElement | undefined>;
     selectNode: (wid?: string) => void;
+    selectConfigPane: (wid: string) => void;
     selected: import("vue").Ref<string, string>;
+    activeConfigPane: import("vue").Ref<string, string>;
     hovering: import("vue").Ref<string | undefined, string | undefined>;
     selectedNode: import("vue").ComputedRef<Node>;
     selectedNodes: import("vue").ComputedRef<Node[]>;
@@ -54,13 +92,15 @@ export declare const useEditor: import("pinia").StoreDefinition<"editor", Pick<{
     getData: () => Record<string, any>;
     setData: (data: any) => void;
     setSchema: (schema: IWidget["schema"]) => void;
-}, "plugins" | "hovering" | "dragging" | "rootNode" | "nodeMap" | "shadowRoot" | "elementRoot" | "selected" | "isPreview">, Pick<{
+}, "plugins" | "hovering" | "dragging" | "rootNode" | "nodeMap" | "shadowRoot" | "elementRoot" | "selected" | "activeConfigPane" | "isPreview">, Pick<{
     rootNode: import("vue").Ref<Raw<Node>, Raw<Node>>;
     nodeMap: Map<string, Node>;
     shadowRoot: import("vue").ShallowRef<ShadowRoot | undefined, ShadowRoot | undefined>;
     elementRoot: import("vue").ShallowRef<HTMLElement | undefined, HTMLElement | undefined>;
     selectNode: (wid?: string) => void;
+    selectConfigPane: (wid: string) => void;
     selected: import("vue").Ref<string, string>;
+    activeConfigPane: import("vue").Ref<string, string>;
     hovering: import("vue").Ref<string | undefined, string | undefined>;
     selectedNode: import("vue").ComputedRef<Node>;
     selectedNodes: import("vue").ComputedRef<Node[]>;
@@ -85,7 +125,9 @@ export declare const useEditor: import("pinia").StoreDefinition<"editor", Pick<{
     shadowRoot: import("vue").ShallowRef<ShadowRoot | undefined, ShadowRoot | undefined>;
     elementRoot: import("vue").ShallowRef<HTMLElement | undefined, HTMLElement | undefined>;
     selectNode: (wid?: string) => void;
+    selectConfigPane: (wid: string) => void;
     selected: import("vue").Ref<string, string>;
+    activeConfigPane: import("vue").Ref<string, string>;
     hovering: import("vue").Ref<string | undefined, string | undefined>;
     selectedNode: import("vue").ComputedRef<Node>;
     selectedNodes: import("vue").ComputedRef<Node[]>;
@@ -104,5 +146,5 @@ export declare const useEditor: import("pinia").StoreDefinition<"editor", Pick<{
     getData: () => Record<string, any>;
     setData: (data: any) => void;
     setSchema: (schema: IWidget["schema"]) => void;
-}, "selectNode" | "addNode" | "delNode" | "setRoot" | "getData" | "setData" | "setSchema">>;
+}, "selectNode" | "selectConfigPane" | "addNode" | "delNode" | "setRoot" | "getData" | "setData" | "setSchema">>;
 export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sepveneto/dnde",
   "type": "module",
-  "version": "0.8.9",
+  "version": "0.8.11",
   "description": "",
   "author": "",
   "license": "GPL",