layplux 0.0.1

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

@@ -0,0 +1,268 @@
+import { Fragment, jsx, jsxs } from "vue/jsx-runtime";
+import {
+  defineComponent,
+  ref,
+  watch,
+  nextTick,
+  onMounted,
+  onUnmounted,
+  Teleport
+} from "vue";
+function computePosition(triggerRect, popupW, popupH, placement, offsetX, offsetY) {
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  const PADDING = 8;
+  let top = 0;
+  let left = 0;
+  const [main, align] = placement.split("-");
+  if (main === "bottom") {
+    top = triggerRect.bottom + offsetY;
+    if (align === "start") left = triggerRect.left + offsetX;
+    else if (align === "end") left = triggerRect.right - popupW + offsetX;
+    else left = triggerRect.left + triggerRect.width / 2 - popupW / 2 + offsetX;
+    if (top + popupH > vh - PADDING) {
+      top = triggerRect.top - popupH - offsetY;
+      placement = align ? `top-${align}` : "top";
+    }
+  } else if (main === "top") {
+    top = triggerRect.top - popupH - offsetY;
+    if (align === "start") left = triggerRect.left + offsetX;
+    else if (align === "end") left = triggerRect.right - popupW + offsetX;
+    else left = triggerRect.left + triggerRect.width / 2 - popupW / 2 + offsetX;
+    if (top < PADDING) {
+      top = triggerRect.bottom + offsetY;
+      placement = align ? `bottom-${align}` : "bottom";
+    }
+  } else if (main === "right") {
+    left = triggerRect.right + offsetX;
+    if (align === "start") top = triggerRect.top + offsetY;
+    else if (align === "end") top = triggerRect.bottom - popupH + offsetY;
+    else top = triggerRect.top + triggerRect.height / 2 - popupH / 2 + offsetY;
+    if (left + popupW > vw - PADDING) {
+      left = triggerRect.left - popupW - offsetX;
+      placement = align ? `left-${align}` : "left";
+    }
+  } else if (main === "left") {
+    left = triggerRect.left - popupW - offsetX;
+    if (align === "start") top = triggerRect.top + offsetY;
+    else if (align === "end") top = triggerRect.bottom - popupH + offsetY;
+    else top = triggerRect.top + triggerRect.height / 2 - popupH / 2 + offsetY;
+    if (left < PADDING) {
+      left = triggerRect.right + offsetX;
+      placement = align ? `right-${align}` : "right";
+    }
+  }
+  top = Math.max(PADDING, Math.min(top, vh - popupH - PADDING));
+  left = Math.max(PADDING, Math.min(left, vw - popupW - PADDING));
+  return { position: { top, left }, placement };
+}
+const Popup = defineComponent({
+  name: "LaypluxPopup",
+  props: {
+    visible: Boolean,
+    trigger: { type: String, default: "hover" },
+    placement: { type: String, default: "bottom" },
+    offset: { type: Object, default: () => ({ y: 4 }) },
+    mouseEnterDelay: { type: Number, default: 100 },
+    mouseLeaveDelay: { type: Number, default: 100 },
+    disabled: { type: Boolean, default: false },
+    destroyOnClose: { type: Boolean, default: true },
+    getContainer: { type: Function, default: () => document.body }
+  },
+  emits: ["update:visible"],
+  setup(props, { emit, slots }) {
+    const triggerRef = ref();
+    const popupRef = ref();
+    const position = ref({ top: 0, left: 0 });
+    const currentPlacement = ref(props.placement);
+    const mounted = ref(false);
+    const animatingIn = ref(false);
+    let enterTimer = null;
+    let leaveTimer = null;
+    let leaveAnimationTimer = null;
+    const clearTimers = () => {
+      if (enterTimer) {
+        clearTimeout(enterTimer);
+        enterTimer = null;
+      }
+      if (leaveTimer) {
+        clearTimeout(leaveTimer);
+        leaveTimer = null;
+      }
+      if (leaveAnimationTimer) {
+        clearTimeout(leaveAnimationTimer);
+        leaveAnimationTimer = null;
+      }
+    };
+    const updatePosition = () => {
+      if (!triggerRef.value || !popupRef.value) return;
+      const triggerRect = triggerRef.value.getBoundingClientRect();
+      const popupRect = popupRef.value.getBoundingClientRect();
+      const { x: ox = 0, y: oy = 0 } = props.offset;
+      const result = computePosition(
+        triggerRect,
+        popupRect.width,
+        popupRect.height,
+        props.placement,
+        ox,
+        oy
+      );
+      position.value = result.position;
+      currentPlacement.value = result.placement;
+    };
+    const show = () => {
+      if (props.disabled) return;
+      clearTimers();
+      enterTimer = setTimeout(() => {
+        mounted.value = true;
+        emit("update:visible", true);
+        void nextTick(() => {
+          updatePosition();
+          requestAnimationFrame(() => {
+            animatingIn.value = true;
+          });
+        });
+      }, props.mouseEnterDelay);
+    };
+    const hide = (immediate = false) => {
+      clearTimers();
+      const delay = immediate ? 0 : props.mouseLeaveDelay;
+      leaveTimer = setTimeout(() => {
+        animatingIn.value = false;
+        leaveAnimationTimer = setTimeout(() => {
+          mounted.value = false;
+          emit("update:visible", false);
+        }, 200);
+      }, delay);
+    };
+    const toggle = () => {
+      if (mounted.value && animatingIn.value) {
+        hide(true);
+      } else {
+        clearTimers();
+        show();
+      }
+    };
+    watch(
+      () => props.visible,
+      (v) => {
+        if (v && !mounted.value) show();
+        else if (!v && mounted.value) hide(true);
+      }
+    );
+    watch(
+      () => props.placement,
+      (p) => {
+        currentPlacement.value = p;
+      }
+    );
+    const onResize = () => {
+      if (mounted.value && animatingIn.value) updatePosition();
+    };
+    onMounted(() => {
+      window.addEventListener("resize", onResize);
+      window.addEventListener("scroll", onResize, true);
+      document.addEventListener("mousedown", onClickOutside, true);
+      document.addEventListener("keydown", onEsc);
+    });
+    onUnmounted(() => {
+      clearTimers();
+      window.removeEventListener("resize", onResize);
+      window.removeEventListener("scroll", onResize, true);
+      document.removeEventListener("mousedown", onClickOutside, true);
+      document.removeEventListener("keydown", onEsc);
+    });
+    const onClickOutside = (e) => {
+      if (!mounted.value) return;
+      const target = e.target;
+      const trigger = triggerRef.value;
+      const popup = popupRef.value;
+      if (trigger && trigger.contains(target)) return;
+      if (popup && popup.contains(target)) return;
+      if (props.trigger === "click" || props.trigger === "contextmenu") {
+        hide(true);
+      }
+    };
+    const onEsc = (e) => {
+      if (e.key === "Escape" && mounted.value) {
+        hide(true);
+      }
+    };
+    const onTriggerMouseEnter = () => {
+      if (props.trigger === "hover") show();
+    };
+    const onTriggerMouseLeave = () => {
+      if (props.trigger === "hover") hide();
+    };
+    const onTriggerClick = (e) => {
+      if (props.trigger === "click") {
+        e.stopPropagation();
+        toggle();
+      }
+    };
+    const onTriggerFocus = () => {
+      if (props.trigger === "focus") show();
+    };
+    const onTriggerBlur = () => {
+      if (props.trigger === "focus") hide(true);
+    };
+    const onTriggerContextmenu = (e) => {
+      if (props.trigger === "contextmenu") {
+        e.preventDefault();
+        show();
+      }
+    };
+    const onPopupMouseEnter = () => {
+      if (leaveTimer) {
+        clearTimeout(leaveTimer);
+        leaveTimer = null;
+      }
+    };
+    const onPopupMouseLeave = () => {
+      if (props.trigger === "hover") hide();
+    };
+    return () => {
+      const container = props.getContainer();
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            ref: triggerRef,
+            class: "layplux-popup-trigger",
+            onMouseenter: onTriggerMouseEnter,
+            onMouseleave: onTriggerMouseLeave,
+            onClick: onTriggerClick,
+            onFocus: onTriggerFocus,
+            onBlur: onTriggerBlur,
+            onContextmenu: onTriggerContextmenu,
+            children: slots.default?.()
+          }
+        ),
+        (mounted.value || !props.destroyOnClose) && /* @__PURE__ */ jsx(Teleport, { to: container, children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: popupRef,
+            class: [
+              "layplux-portal",
+              "layplux-popup",
+              currentPlacement.value,
+              animatingIn.value && "layplux-popup--visible"
+            ],
+            style: {
+              position: "fixed",
+              top: `${position.value.top}px`,
+              left: `${position.value.left}px`,
+              zIndex: "var(--layplux-popup-z-index, 2000)"
+            },
+            onMouseenter: onPopupMouseEnter,
+            onMouseleave: onPopupMouseLeave,
+            children: slots.content?.()
+          }
+        ) })
+      ] });
+    };
+  }
+});
+export {
+  Popup
+};

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

@@ -0,0 +1,56 @@
+import { jsx, jsxs } from "vue/jsx-runtime";
+import { defineComponent } from "vue";
+import { createContent } from "../../utils";
+const TitleView = defineComponent({
+  name: "TitleView",
+  inheritAttrs: false,
+  props: {
+    icon: [String, Object, Function],
+    title: [String, Object, Function],
+    mode: {
+      type: String,
+      default: "icon-only"
+    },
+    /** 交互状态：idle / active / disabled / error。idle 时 hover 由 CSS :hover 处理 */
+    state: {
+      type: String,
+      default: "idle"
+    },
+    /** 聚焦/选中态，独立于 state，可与任何状态叠加 */
+    focused: {
+      type: Boolean,
+      default: false
+    },
+    size: {
+      type: String,
+      default: "middle"
+    },
+    className: {
+      type: String,
+      default: ""
+    },
+    onClick: Function
+  },
+  setup(props) {
+    return () => {
+      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 })
+      ] });
+    };
+  }
+});
+export {
+  TitleView
+};

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

@@ -0,0 +1,48 @@
+import { jsx, jsxs } from "vue/jsx-runtime";
+import { defineComponent } from "vue";
+import { createContent } from "../../utils";
+import { Popup } from "../popup";
+const Tooltip = defineComponent({
+  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 },
+    visible: Boolean,
+    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 })
+            ] });
+          }
+        }
+      }
+    );
+  }
+});
+export {
+  Tooltip
+};

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

@@ -0,0 +1,84 @@
+import { jsx, jsxs } from "vue/jsx-runtime";
+import { defineComponent, Fragment, ref, onErrorCaptured, h } from "vue";
+import { TitleView } from "../title";
+import { Tooltip } from "../tooltip";
+const WidgetView = defineComponent({
+  name: "WidgetView",
+  inheritAttrs: false,
+  props: {
+    widget: Object
+  },
+  setup(props) {
+    const hasError = ref(false);
+    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;
+      if (hasError.value) {
+        const fallback = widget?.config.props?.errorFallback;
+        if (fallback) {
+          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 /* @__PURE__ */ jsx(Fragment, { children: widget?.renderBody() });
+    };
+  }
+});
+const WidgetTitleView = defineComponent({
+  name: "WidgetTitleView",
+  inheritAttrs: false,
+  props: {
+    widget: Object
+  },
+  setup(props) {
+    const tooltipVisible = ref(false);
+    const handleClick = () => {
+      tooltipVisible.value = false;
+      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
+            }
+          )
+        }
+      ) });
+    };
+  }
+});
+export {
+  WidgetTitleView,
+  WidgetView
+};

package/dist/esm/index.mjs

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

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

@@ -0,0 +1,11 @@
+import { jsx } from "vue/jsx-runtime";
+import { defineComponent } from "vue";
+const GlassOverlay = defineComponent({
+  name: "GlassOverlay",
+  setup() {
+    return () => /* @__PURE__ */ jsx("div", {});
+  }
+});
+export {
+  GlassOverlay
+};

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

@@ -0,0 +1,15 @@
+import { jsx } from "vue/jsx-runtime";
+import { defineComponent } from "vue";
+import { Skeleton } from "./skeleton";
+const LayeredManager = defineComponent({
+  name: "LayeredManager",
+  props: {
+    skeleton: Object
+  },
+  setup(props) {
+    return () => /* @__PURE__ */ jsx("div", { class: "layered-manager", children: /* @__PURE__ */ jsx(Skeleton, { skeleton: props.skeleton }) });
+  }
+});
+export {
+  LayeredManager
+};

package/dist/esm/layout/layplux.mjs

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

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

@@ -0,0 +1,26 @@
+import { jsx, jsxs } from "vue/jsx-runtime";
+import { computed, defineComponent, provide } from "vue";
+import { LayeredManager } from "./layered-manager";
+import { GlassOverlay } from "./glass-overlay";
+import { CornerGlow } from "../components";
+const RootPane = defineComponent({
+  name: "RootPane",
+  props: {
+    skeleton: Object
+  },
+  setup(props) {
+    provide("layplux-locale", props.skeleton?.locale);
+    const rootClass = computed(() => {
+      const dark = props.skeleton?.isDark();
+      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, {})
+    ] });
+  }
+});
+export {
+  RootPane
+};

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

@@ -0,0 +1,44 @@
+import { jsx, jsxs } from "vue/jsx-runtime";
+import { defineComponent } from "vue";
+const BottomArea = defineComponent({
+  name: "BottomArea",
+  props: {
+    area: Object
+  },
+  setup(props) {
+    return () => {
+      const { area } = props;
+      const left = [];
+      const center = [];
+      const right = [];
+      area?.container.items.value.slice().toSorted((a, b) => {
+        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") {
+          left.push(content);
+        } 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
+        ] })
+      ] });
+    };
+  }
+});
+export {
+  BottomArea
+};

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

@@ -0,0 +1,22 @@
+import { jsx } from "vue/jsx-runtime";
+import { defineComponent } from "vue";
+const BottomLeftArea = defineComponent({
+  name: "BottomLeftArea",
+  props: {
+    area: Object
+  },
+  setup(props) {
+    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) => {
+        const i1 = a.config?.index ?? 0;
+        const i2 = b.config?.index ?? 0;
+        return i1 === i2 ? 0 : i1 > i2 ? 1 : -1;
+      }).map((widget) => widget.renderTitle()) });
+    };
+  }
+});
+export {
+  BottomLeftArea
+};

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

@@ -0,0 +1,18 @@
+import { jsx } from "vue/jsx-runtime";
+import { defineComponent } from "vue";
+const BottomRightArea = defineComponent({
+  name: "BottomRightArea",
+  props: {
+    area: Object
+  },
+  setup(props) {
+    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()) });
+    };
+  }
+});
+export {
+  BottomRightArea
+};