layplux 2.0.0 → 2.0.1

package/dist/esm/components/title/index.mjs

@@ -1,20 +1,20 @@
-import { jsx, jsxs } from "vue/jsx-runtime";
-import { defineComponent } from "vue";
-import { createContent } from "../../utils/index.mjs";
+import { defineComponent, createVNode } from 'vue';
+import { createContent } from '../../utils/vue.mjs';
+
 const TitleView = defineComponent({
-  name: "TitleView",
+  name: 'TitleView',
   inheritAttrs: false,
   props: {
     icon: [String, Object, Function],
     title: [String, Object, Function],
     mode: {
       type: String,
-      default: "icon-only"
+      default: 'icon-only'
     },
     /** 交互状态：idle / active / disabled / error。idle 时 hover 由 CSS :hover 处理 */
     state: {
       type: String,
-      default: "idle"
+      default: 'idle'
     },
     /** 聚焦/选中态，独立于 state，可与任何状态叠加 */
     focused: {
@@ -23,34 +23,39 @@ const TitleView = defineComponent({
     },
     size: {
       type: String,
-      default: "middle"
+      default: 'middle'
     },
     className: {
       type: String,
-      default: ""
+      default: ''
     },
     onClick: Function
   },
   setup(props) {
     return () => {
-      const { icon, title, mode, state, size, focused, className, onClick } = props;
+      const {
+        icon,
+        title,
+        mode,
+        state,
+        size,
+        focused,
+        className,
+        onClick
+      } = props;
       const iconNode = icon ? createContent(icon) : null;
       const titleNode = title ? createContent(title) : null;
-      const classes = [
-        "title-view",
-        `title-view--${mode}`,
-        `title-view--${state}`,
-        `title-view--${size}`,
-        focused && "title-view--focused",
-        className
-      ].filter(Boolean).join(" ");
-      return /* @__PURE__ */ jsxs("span", { class: classes, onClick, children: [
-        /* @__PURE__ */ jsx("span", { class: "title-view__icon", children: iconNode }),
-        /* @__PURE__ */ jsx("span", { class: "title-view__label", children: titleNode })
-      ] });
+      const classes = ['title-view', `title-view--${mode}`, `title-view--${state}`, `title-view--${size}`, focused && 'title-view--focused', className].filter(Boolean).join(' ');
+      return createVNode("span", {
+        "class": classes,
+        "onClick": onClick
+      }, [createVNode("span", {
+        "class": "title-view__icon"
+      }, [iconNode]), createVNode("span", {
+        "class": "title-view__label"
+      }, [titleNode])]);
     };
   }
 });
-export {
-  TitleView
-};
+
+export { TitleView };

package/dist/esm/components/tooltip/index.mjs

@@ -1,48 +1,75 @@
-import { jsx, jsxs } from "vue/jsx-runtime";
-import { defineComponent } from "vue";
-import { createContent } from "../../utils/index.mjs";
-import { Popup } from "../popup/index.mjs";
+import { defineComponent, createVNode } from 'vue';
+import { Popup } from '../popup/index.mjs';
+import { createContent } from '../../utils/vue.mjs';
+
+/*
+ * @Author: shuwen 1243889238@qq.com
+ * @Date: 2026-06-08 16:12:13
+ * @LastEditors: shuwen 1243889238@qq.com
+ * @LastEditTime: 2026-06-09 16:58:03
+ * @FilePath: /Layplux/packages/layplux/src/components/tooltip/index.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
 const Tooltip = defineComponent({
-  name: "LaypluxTooltip",
+  name: 'LaypluxTooltip',
   props: {
     title: [String, Object, Function],
-    trigger: { type: String, default: "hover" },
-    placement: { type: String, default: "top" },
-    mouseEnterDelay: { type: Number, default: 100 },
-    mouseLeaveDelay: { type: Number, default: 100 },
+    trigger: {
+      type: String,
+      default: 'hover'
+    },
+    placement: {
+      type: String,
+      default: 'top'
+    },
+    mouseEnterDelay: {
+      type: Number,
+      default: 100
+    },
+    mouseLeaveDelay: {
+      type: Number,
+      default: 100
+    },
     visible: Boolean,
-    disabled: { type: Boolean, default: false },
-    getContainer: { type: Function, default: () => document.body }
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    getContainer: {
+      type: Function,
+      default: () => document.body
+    }
   },
-  emits: ["update:visible"],
-  setup(props, { emit, slots }) {
-    return () => /* @__PURE__ */ jsx(
-      Popup,
-      {
-        visible: props.visible,
-        trigger: props.trigger,
-        placement: props.placement,
-        disabled: props.disabled,
-        mouseEnterDelay: props.mouseEnterDelay,
-        mouseLeaveDelay: props.mouseLeaveDelay,
-        destroyOnClose: true,
-        getContainer: props.getContainer,
-        "onUpdate:visible": (v) => emit("update:visible", v),
-        children: {
-          default: () => slots.default?.(),
-          content: () => {
-            const hasContent = slots.content;
-            const titleNode = hasContent ? slots.content?.() : createContent(props.title);
-            return /* @__PURE__ */ jsxs("div", { class: "layplux-tooltip", children: [
-              /* @__PURE__ */ jsx("div", { class: "layplux-tooltip__arrow" }),
-              /* @__PURE__ */ jsx("div", { class: "layplux-tooltip__inner", children: titleNode })
-            ] });
-          }
-        }
+  emits: ['update:visible'],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    return () => createVNode(Popup, {
+      "visible": props.visible,
+      "trigger": props.trigger,
+      "placement": props.placement,
+      "disabled": props.disabled,
+      "mouseEnterDelay": props.mouseEnterDelay,
+      "mouseLeaveDelay": props.mouseLeaveDelay,
+      "destroyOnClose": true,
+      "getContainer": props.getContainer,
+      "onUpdate:visible": v => emit('update:visible', v)
+    }, {
+      default: () => slots.default?.(),
+      content: () => {
+        const hasContent = slots.content;
+        const titleNode = hasContent ? slots.content?.() : createContent(props.title);
+        return createVNode("div", {
+          "class": "layplux-tooltip"
+        }, [createVNode("div", {
+          "class": "layplux-tooltip__arrow"
+        }, null), createVNode("div", {
+          "class": "layplux-tooltip__inner"
+        }, [titleNode])]);
       }
-    );
+    });
   }
 });
-export {
-  Tooltip
-};
+
+export { Tooltip };

package/dist/esm/components/widget/index.mjs

@@ -1,44 +1,44 @@
-import { jsx, jsxs } from "vue/jsx-runtime";
-import { defineComponent, Fragment, ref, onErrorCaptured, h } from "vue";
-import { TitleView } from "../title/index.mjs";
-import { Tooltip } from "../tooltip/index.mjs";
+import { defineComponent, ref, onErrorCaptured, h, createVNode, createTextVNode, Fragment } from 'vue';
+import { TitleView } from '../title/index.mjs';
+import { Tooltip } from '../tooltip/index.mjs';
+
 const WidgetView = defineComponent({
-  name: "WidgetView",
+  name: 'WidgetView',
   inheritAttrs: false,
   props: {
     widget: Object
   },
   setup(props) {
     const hasError = ref(false);
-    const errorMessage = ref("");
-    onErrorCaptured((err) => {
+    const errorMessage = ref('');
+    onErrorCaptured(err => {
       hasError.value = true;
       errorMessage.value = err.message;
       console.error(`[Layplux] Widget "${props.widget?.name}" crashed:`, err);
       return false;
     });
     return () => {
-      const { widget } = props;
+      const {
+        widget
+      } = props;
       if (hasError.value) {
         const fallback = widget?.config.props?.errorFallback;
         if (fallback) {
-          return h(fallback, { error: errorMessage.value, widget });
+          return h(fallback, {
+            error: errorMessage.value,
+            widget
+          });
         }
-        return /* @__PURE__ */ jsxs("div", { class: "layplux-widget-error", children: [
-          /* @__PURE__ */ jsxs("span", { children: [
-            '\u7EC4\u4EF6 "',
-            widget?.name,
-            '" \u53D1\u751F\u9519\u8BEF'
-          ] }),
-          /* @__PURE__ */ jsx("pre", { children: errorMessage.value })
-        ] });
+        return createVNode("div", {
+          "class": "layplux-widget-error"
+        }, [createVNode("span", null, [createTextVNode("\u7EC4\u4EF6 \""), widget?.name, createTextVNode("\" \u53D1\u751F\u9519\u8BEF")]), createVNode("pre", null, [errorMessage.value])]);
       }
-      return /* @__PURE__ */ jsx(Fragment, { children: widget?.renderBody() });
+      return createVNode(Fragment, null, [widget?.renderBody()]);
     };
   }
 });
 const WidgetTitleView = defineComponent({
-  name: "WidgetTitleView",
+  name: 'WidgetTitleView',
   inheritAttrs: false,
   props: {
     widget: Object
@@ -50,35 +50,32 @@ const WidgetTitleView = defineComponent({
       props.widget?.container?.toggleActive(props.widget?.name);
     };
     return () => {
-      const { widget } = props;
-      const tooltipTitle = widget?.config.props?.title ?? widget?.name ?? "";
-      return /* @__PURE__ */ jsx("div", { class: "widget-title-view", children: /* @__PURE__ */ jsx(
-        Tooltip,
-        {
-          visible: tooltipVisible.value,
-          "onUpdate:visible": (v) => {
-            tooltipVisible.value = v;
-          },
-          title: tooltipTitle,
-          placement: "right",
-          mouseEnterDelay: 500,
-          getContainer: () => document.querySelector(".layplux-root") || document.body,
-          children: /* @__PURE__ */ jsx(
-            TitleView,
-            {
-              onClick: handleClick,
-              focused: widget?.focused.value,
-              state: widget?.active.value ? "active" : "idle",
-              icon: widget?.config.props?.icon,
-              title: widget?.config.props?.title
-            }
-          )
-        }
-      ) });
+      const {
+        widget
+      } = props;
+      const tooltipTitle = widget?.config.props?.title ?? widget?.name ?? '';
+      return createVNode("div", {
+        "class": "widget-title-view"
+      }, [createVNode(Tooltip, {
+        "visible": tooltipVisible.value,
+        "onUpdate:visible": v => {
+          tooltipVisible.value = v;
+        },
+        "title": tooltipTitle,
+        "placement": "right",
+        "mouseEnterDelay": 500,
+        "getContainer": () => document.querySelector('.layplux-root') || document.body
+      }, {
+        default: () => [createVNode(TitleView, {
+          "onClick": handleClick,
+          "focused": widget?.focused.value,
+          "state": widget?.active.value ? 'active' : 'idle',
+          "icon": widget?.config.props?.icon,
+          "title": widget?.config.props?.title
+        }, null)]
+      })]);
     };
   }
 });
-export {
-  WidgetTitleView,
-  WidgetView
-};
+
+export { WidgetTitleView, WidgetView };

package/dist/esm/index.mjs

@@ -1,10 +1,4 @@
-import { default as default2 } from "./layout/layplux.mjs";
-import { useSkeleton } from "./managers/skeleton.mjs";
-import { createPluginEventBus } from "./utils/event-bus.mjs";
-import { FocusTracker } from "./utils/focus-tracker.mjs";
-export {
-  FocusTracker,
-  default2 as Layplux,
-  createPluginEventBus,
-  useSkeleton
-};
+export { default as Layplux } from './layout/layplux.mjs';
+export { useSkeleton } from './managers/skeleton.mjs';
+export { createPluginEventBus } from './utils/event-bus.mjs';
+export { FocusTracker } from './utils/focus-tracker.mjs';

package/dist/esm/layout/glass-overlay.mjs

@@ -1,11 +1,16 @@
-import { jsx } from "vue/jsx-runtime";
-import { defineComponent } from "vue";
+import { defineComponent, createVNode } from 'vue';
+
+/**
+ * 玻璃面板（GlassOverlay）是Layplux中的一个重要组件，它位于整个界面的最顶层，覆盖在所有其他内容之上。
+ * 这个组件的主要作用是提供一个透明的层，用于捕获用户的交互事件，例如鼠标点击、拖动等。
+ * 通过玻璃面板，Layplux能够实现一些特殊的交互效果，比如拖放操作、全局事件监听等。
+ * 玻璃面板就像一层透明的保护膜，既能保护底层内容，又能提供丰富的交互功能，使得用户界面更加灵活和响应式。
+ */
 const GlassOverlay = defineComponent({
-  name: "GlassOverlay",
+  name: 'GlassOverlay',
   setup() {
-    return () => /* @__PURE__ */ jsx("div", {});
+    return () => createVNode("div", null, null);
   }
 });
-export {
-  GlassOverlay
-};
+
+export { GlassOverlay };

package/dist/esm/layout/layered-manager.mjs

@@ -1,15 +1,24 @@
-import { jsx } from "vue/jsx-runtime";
-import { defineComponent } from "vue";
-import { Skeleton } from "./skeleton/index.mjs";
+import { defineComponent, createVNode } from 'vue';
+import { Skeleton } from './skeleton/skeleton.mjs';
+
+/**
+ * Z 轴分层容器，把子组件分配到不同"层号"，层号大的显示在上方。
+ * 预设了五个层：DEFAULT(0)、PALETTE(100)、MODAL(200)、POPUP(300)、DRAG(400)。
+ * 在此基础上拓展了自定义层号，用于管理弹出窗口（completion popup、快速文档）和拖拽反馈，
+ * 从而避免每次弹窗都创建独立的 OS 窗口，大幅降低渲染开销
+ */
 const LayeredManager = defineComponent({
-  name: "LayeredManager",
+  name: 'LayeredManager',
   props: {
     skeleton: Object
   },
   setup(props) {
-    return () => /* @__PURE__ */ jsx("div", { class: "layered-manager", children: /* @__PURE__ */ jsx(Skeleton, { skeleton: props.skeleton }) });
+    return () => createVNode("div", {
+      "class": "layered-manager"
+    }, [createVNode(Skeleton, {
+      "skeleton": props.skeleton
+    }, null)]);
   }
 });
-export {
-  LayeredManager
-};
+
+export { LayeredManager };

package/dist/esm/layout/layplux.mjs

@@ -1,21 +1,24 @@
-import { jsx } from "vue/jsx-runtime";
-import { defineComponent } from "vue";
-import { RootPane } from "./root-pane.mjs";
+import { defineComponent, createVNode, createTextVNode } from 'vue';
+import { RootPane } from './root-pane.mjs';
+
 const Layplux = defineComponent({
-  name: "Layplux",
+  name: 'Layplux',
   props: {
     skeleton: Object
   },
   setup(props) {
-    return () => /* @__PURE__ */ jsx(RootPane, { skeleton: props.skeleton, children: "Layplux" });
+    return () => createVNode(RootPane, {
+      "skeleton": props.skeleton
+    }, {
+      default: () => [createTextVNode("Layplux")]
+    });
   }
 });
-var layplux_default = Object.assign(Layplux, {
-  install: (app) => {
-    app.component("Layplux", Layplux);
+var layplux = Object.assign(Layplux, {
+  install: app => {
+    app.component('Layplux', Layplux);
     return app;
   }
 });
-export {
-  layplux_default as default
-};
+
+export { layplux as default };

package/dist/esm/layout/root-pane.mjs

@@ -1,26 +1,26 @@
-import { jsx, jsxs } from "vue/jsx-runtime";
-import { computed, defineComponent, provide } from "vue";
-import { LayeredManager } from "./layered-manager.mjs";
-import { GlassOverlay } from "./glass-overlay.mjs";
-import { CornerGlow } from "../components/index.mjs";
+import { defineComponent, provide, computed, createVNode } from 'vue';
+import { LayeredManager } from './layered-manager.mjs';
+import { GlassOverlay } from './glass-overlay.mjs';
+import { CornerGlow } from '../components/corner-glow/index.mjs';
+
 const RootPane = defineComponent({
-  name: "RootPane",
+  name: 'RootPane',
   props: {
     skeleton: Object
   },
   setup(props) {
-    provide("layplux-locale", props.skeleton?.locale);
+    provide('layplux-locale', props.skeleton?.locale);
     const rootClass = computed(() => {
       const dark = props.skeleton?.isDark();
-      return ["layplux-root", dark ? "dark" : ""].filter(Boolean);
+      return ['layplux-root', dark ? 'dark' : ''].filter(Boolean);
     });
-    return () => /* @__PURE__ */ jsxs("div", { class: rootClass.value, "data-theme": props.skeleton?.themeName?.value, children: [
-      /* @__PURE__ */ jsx(CornerGlow, {}),
-      /* @__PURE__ */ jsx(LayeredManager, { skeleton: props.skeleton }),
-      /* @__PURE__ */ jsx(GlassOverlay, {})
-    ] });
+    return () => createVNode("div", {
+      "class": rootClass.value,
+      "data-theme": props.skeleton?.themeName?.value
+    }, [createVNode(CornerGlow, null, null), createVNode(LayeredManager, {
+      "skeleton": props.skeleton
+    }, null), createVNode(GlassOverlay, null, null)]);
   }
 });
-export {
-  RootPane
-};
+
+export { RootPane };

package/dist/esm/layout/skeleton/bottom-area.mjs

@@ -1,13 +1,15 @@
-import { jsx, jsxs } from "vue/jsx-runtime";
-import { defineComponent } from "vue";
+import { defineComponent, createVNode } from 'vue';
+
 const BottomArea = defineComponent({
-  name: "BottomArea",
+  name: 'BottomArea',
   props: {
     area: Object
   },
   setup(props) {
     return () => {
-      const { area } = props;
+      const {
+        area
+      } = props;
       const left = [];
       const center = [];
       const right = [];
@@ -15,30 +17,29 @@ const BottomArea = defineComponent({
         const index1 = a.config?.index || 0;
         const index2 = b.config?.index || 0;
         return index1 === index2 ? 0 : index1 > index2 ? 1 : -1;
-      }).forEach((item) => {
-        const content = /* @__PURE__ */ jsx("div", { children: item.renderContent() }, `bottom-area-${item.name}`);
-        if (item.align === "left") {
+      }).forEach(item => {
+        const content = createVNode("div", {
+          "key": `bottom-area-${item.name}`
+        }, [item.renderContent()]);
+        if (item.align === 'left') {
           left.push(content);
-        } else if (item.align === "center") {
+        } else if (item.align === 'center') {
           center.push(content);
         } else {
           right.push(content);
         }
       });
-      return /* @__PURE__ */ jsxs("div", { class: "layplux-bottom-area", children: [
-        /* @__PURE__ */ jsxs("div", { class: "layplux-bottom-area__left", children: [
-          ...left
-        ] }),
-        /* @__PURE__ */ jsxs("div", { class: "layplux-bottom-area__center", children: [
-          ...center
-        ] }),
-        /* @__PURE__ */ jsxs("div", { class: "layplux-bottom-area__right", children: [
-          ...right
-        ] })
-      ] });
+      return createVNode("div", {
+        "class": "layplux-bottom-area"
+      }, [createVNode("div", {
+        "class": "layplux-bottom-area__left"
+      }, [...left]), createVNode("div", {
+        "class": "layplux-bottom-area__center"
+      }, [...center]), createVNode("div", {
+        "class": "layplux-bottom-area__right"
+      }, [...right])]);
     };
   }
 });
-export {
-  BottomArea
-};
+
+export { BottomArea };

package/dist/esm/layout/skeleton/bottom-left-area.mjs

@@ -1,7 +1,7 @@
-import { jsx } from "vue/jsx-runtime";
-import { defineComponent } from "vue";
+import { defineComponent, createVNode } from 'vue';
+
 const BottomLeftArea = defineComponent({
-  name: "BottomLeftArea",
+  name: 'BottomLeftArea',
   props: {
     area: Object
   },
@@ -9,14 +9,15 @@ const BottomLeftArea = defineComponent({
     return () => {
       const items = props.area?.container.items.value;
       if (!items || items.length === 0) return null;
-      return /* @__PURE__ */ jsx("div", { class: "layplux-bottom-left-area", children: items.slice().toSorted((a, b) => {
+      return createVNode("div", {
+        "class": "layplux-bottom-left-area"
+      }, [items.slice().toSorted((a, b) => {
         const i1 = a.config?.index ?? 0;
         const i2 = b.config?.index ?? 0;
         return i1 === i2 ? 0 : i1 > i2 ? 1 : -1;
-      }).map((widget) => widget.renderTitle()) });
+      }).map(widget => widget.renderTitle())]);
     };
   }
 });
-export {
-  BottomLeftArea
-};
+
+export { BottomLeftArea };

package/dist/esm/layout/skeleton/bottom-right-area.mjs

@@ -1,7 +1,7 @@
-import { jsx } from "vue/jsx-runtime";
-import { defineComponent } from "vue";
+import { defineComponent, createVNode } from 'vue';
+
 const BottomRightArea = defineComponent({
-  name: "BottomRightArea",
+  name: 'BottomRightArea',
   props: {
     area: Object
   },
@@ -9,10 +9,11 @@ const BottomRightArea = defineComponent({
     return () => {
       const items = props.area?.container.items.value;
       if (!items || items.length === 0) return null;
-      return /* @__PURE__ */ jsx("div", { class: "layplux-bottom-right-area", children: items.slice().toSorted((a, b) => (a.config?.index ?? 0) - (b.config?.index ?? 0)).map((widget) => widget.renderTitle()) });
+      return createVNode("div", {
+        "class": "layplux-bottom-right-area"
+      }, [items.slice().toSorted((a, b) => (a.config?.index ?? 0) - (b.config?.index ?? 0)).map(widget => widget.renderTitle())]);
     };
   }
 });
-export {
-  BottomRightArea
-};
+
+export { BottomRightArea };