layplux 0.0.1

package/dist/cjs/utils/focus-tracker.cjs

@@ -0,0 +1,154 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var focus_tracker_exports = {};
+__export(focus_tracker_exports, {
+  FocusTracker: () => FocusTracker,
+  Focusable: () => Focusable
+});
+module.exports = __toCommonJS(focus_tracker_exports);
+class FocusTracker {
+  constructor() {
+    /** 焦点栈，栈顶为当前聚焦项 */
+    __publicField(this, "actives", []);
+    /** modal 弹层注册表，用于检查是否有 modal 正在打开 */
+    __publicField(this, "modals", []);
+  }
+  /** 当前焦点栈顶 */
+  get first() {
+    return this.actives[0];
+  }
+  /** 注册一个 modal 弹层，用于 execSave 等时判断是否跳过 */
+  addModal(checkDown, checkOpen) {
+    this.modals.push({ checkDown, checkOpen });
+  }
+  /** 是否有 modal 弹层正在打开 */
+  checkModalOpen() {
+    return this.modals.some((item) => item.checkOpen());
+  }
+  /** 触发保存操作，有 modal 时跳过 */
+  execSave() {
+    if (this.checkModalOpen()) return;
+    if (this.first) this.first.internalTriggerSave();
+  }
+  /** 触发 ESC — 挂起栈顶并调用其 onEsc */
+  execEsc() {
+    const { first } = this;
+    if (first) {
+      this.internalSuspenseItem(first);
+      first.internalTriggerEsc();
+    }
+  }
+  /**
+   * 挂载全局点击监听
+   * 点击 document 时，如果点击目标不在 first 的 range 内，则挂起 first 并触发 blur
+   * @returns 卸载函数
+   */
+  mount(win) {
+    const checkDown = (e) => {
+      const { first } = this;
+      if (first && !first.internalCheckInRange(e)) {
+        this.internalSuspenseItem(first);
+        first.internalTriggerBlur();
+      }
+    };
+    win.document.addEventListener("click", checkDown, true);
+    return () => win.document.removeEventListener("click", checkDown, true);
+  }
+  /** 创建一个 Focusable 实例并绑定到当前 tracker */
+  create(config) {
+    return new Focusable(this, config);
+  }
+  /**
+   * 激活一个 Focusable — 将其推到栈顶
+   * 如果栈顶已有其他 Focusable 且新项不是 modal，则先触发旧栈顶的 blur
+   */
+  internalActiveItem(item) {
+    const first = this.actives[0];
+    if (first === item) return;
+    const i = this.actives.indexOf(item);
+    if (i > -1) this.actives.splice(i, 1);
+    this.actives.unshift(item);
+    if (!item.isModal && first) first.internalTriggerBlur();
+    item.internalTriggerActive();
+  }
+  /**
+   * 挂起一个 Focusable — 将其从栈中移除
+   * 移除后如果还有剩余项，激活新的栈顶
+   */
+  internalSuspenseItem(item) {
+    const i = this.actives.indexOf(item);
+    if (i > -1) {
+      this.actives.splice(i, 1);
+      this.first?.internalTriggerActive();
+    }
+  }
+}
+class Focusable {
+  constructor(tracker, config) {
+    this.tracker = tracker;
+    this.config = config;
+    __publicField(this, "isModal");
+    this.isModal = config.modal ?? false;
+  }
+  /** 激活当前 Focusable，推入焦点栈顶 */
+  active() {
+    this.tracker.internalActiveItem(this);
+  }
+  /** 挂起当前 Focusable，从焦点栈移除 */
+  suspense() {
+    this.tracker.internalSuspenseItem(this);
+  }
+  /** 销毁当前 Focusable（同 suspense，语义化别名） */
+  purge() {
+    this.tracker.internalSuspenseItem(this);
+  }
+  /** 挂载后把真实 DOM 注入，使 range 的 contains 判断生效 */
+  setRange(range) {
+    this.config.range = range;
+  }
+  /** 检查点击事件是否在 range 范围内 */
+  internalCheckInRange(e) {
+    const { range } = this.config;
+    if (!range) return false;
+    if (typeof range === "function") return range(e);
+    return range.contains(e.target);
+  }
+  /** 触发失焦回调 */
+  internalTriggerBlur() {
+    this.config.onBlur?.();
+  }
+  /** 触发保存回调，返回 true 表示已处理 */
+  internalTriggerSave() {
+    if (this.config.onSave) {
+      this.config.onSave();
+      return true;
+    }
+    return false;
+  }
+  /** 触发 ESC 回调 */
+  internalTriggerEsc() {
+    this.config.onEsc?.();
+  }
+  /** 触发激活回调 */
+  internalTriggerActive() {
+    this.config.onActive?.();
+  }
+}

package/dist/cjs/utils/index.cjs

@@ -0,0 +1,31 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var utils_exports = {};
+__export(utils_exports, {
+  enUS: () => import_locales.enUS,
+  getBuiltInLocale: () => import_locales.getBuiltInLocale,
+  zhCN: () => import_locales.zhCN
+});
+module.exports = __toCommonJS(utils_exports);
+__reExport(utils_exports, require("./vue"), module.exports);
+__reExport(utils_exports, require("./unique-id"), module.exports);
+__reExport(utils_exports, require("./focus-tracker"), module.exports);
+__reExport(utils_exports, require("./event-bus"), module.exports);
+var import_locales = require("../locales");

package/dist/cjs/utils/unique-id.cjs

@@ -0,0 +1,27 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var unique_id_exports = {};
+__export(unique_id_exports, {
+  uniqueId: () => uniqueId
+});
+module.exports = __toCommonJS(unique_id_exports);
+let guid = Date.now();
+function uniqueId(prefix = "") {
+  return `${prefix}${(guid++).toString(36).toLowerCase()}`;
+}

package/dist/cjs/utils/vue.cjs

@@ -0,0 +1,37 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var vue_exports = {};
+__export(vue_exports, {
+  createContent: () => createContent
+});
+module.exports = __toCommonJS(vue_exports);
+var import_vue = require("vue");
+function createContent(content, extraProps = {}) {
+  if (!content) return null;
+  if ((0, import_vue.isVNode)(content)) {
+    return (0, import_vue.cloneVNode)(content, extraProps);
+  }
+  if (typeof content === "string") {
+    if (Object.keys(extraProps).length > 0) {
+      return (0, import_vue.h)(content, extraProps, content);
+    }
+    return (0, import_vue.h)(import_vue.Text, null, content);
+  }
+  return (0, import_vue.h)(content, extraProps);
+}

package/dist/esm/components/center-view/index.mjs

@@ -0,0 +1,21 @@
+import { jsx } from "vue/jsx-runtime";
+import { defineComponent, Teleport } from "vue";
+const CenterView = defineComponent({
+  name: "CenterView",
+  props: {
+    widget: Object,
+    anchor: {
+      type: String,
+      required: true
+    }
+  },
+  setup(props) {
+    return () => {
+      if (!props.widget) return null;
+      return /* @__PURE__ */ jsx(Teleport, { defer: true, to: props.anchor, children: props.widget.renderContent() });
+    };
+  }
+});
+export {
+  CenterView
+};

package/dist/esm/components/corner-glow/index.mjs

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

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

@@ -0,0 +1,146 @@
+import { jsx, jsxs } from "vue/jsx-runtime";
+import {
+  defineComponent,
+  provide,
+  inject
+} from "vue";
+import { Popup } from "../popup";
+import { ChevronRightIcon } from "../icon";
+const DROPDOWN_CLOSE = Symbol("dropdown-close");
+const DROPDOWN_ON_CLICK = Symbol("dropdown-on-click");
+const Dropdown = defineComponent({
+  name: "LaypluxDropdown",
+  props: {
+    visible: Boolean,
+    trigger: { type: String, default: "click" },
+    placement: { type: String, default: "bottom-start" },
+    disabled: { type: Boolean, default: false },
+    destroyOnClose: { type: Boolean, default: true },
+    onClick: Function,
+    getContainer: { type: Function }
+  },
+  emits: ["update:visible"],
+  setup(props, { emit, slots }) {
+    const closeDropdown = () => {
+      emit("update:visible", false);
+    };
+    provide(DROPDOWN_CLOSE, closeDropdown);
+    provide(DROPDOWN_ON_CLICK, props.onClick);
+    return () => /* @__PURE__ */ jsx(
+      Popup,
+      {
+        visible: props.visible,
+        trigger: props.trigger,
+        placement: props.placement,
+        disabled: props.disabled,
+        destroyOnClose: props.destroyOnClose,
+        getContainer: props.getContainer,
+        "onUpdate:visible": (v) => emit("update:visible", v),
+        children: {
+          default: () => slots.default?.(),
+          content: () => /* @__PURE__ */ jsx("div", { class: "layplux-dropdown", children: slots.overlay?.() })
+        }
+      }
+    );
+  }
+});
+const DropdownMenu = defineComponent({
+  name: "LaypluxDropdownMenu",
+  setup(_props, { slots }) {
+    return () => /* @__PURE__ */ jsx("div", { class: "layplux-dropdown-menu", children: slots.default?.() });
+  }
+});
+const DropdownItem = defineComponent({
+  name: "LaypluxDropdownItem",
+  props: {
+    eventKey: { type: String, required: true },
+    disabled: { type: Boolean, default: false },
+    danger: { type: Boolean, default: false }
+  },
+  setup(props, { slots }) {
+    const closeDropdown = inject(DROPDOWN_CLOSE);
+    const onItemClick = inject(DROPDOWN_ON_CLICK);
+    const handleClick = () => {
+      if (props.disabled) return;
+      onItemClick?.(props.eventKey);
+      closeDropdown?.();
+    };
+    return () => /* @__PURE__ */ jsx(
+      "div",
+      {
+        class: [
+          "layplux-dropdown-menu__item",
+          props.disabled && "layplux-dropdown-menu__item--disabled",
+          props.danger && "layplux-dropdown-menu__item--danger"
+        ],
+        onClick: handleClick,
+        children: slots.default?.()
+      }
+    );
+  }
+});
+const DropdownDivider = defineComponent({
+  name: "LaypluxDropdownDivider",
+  setup() {
+    return () => /* @__PURE__ */ jsx("div", { class: "layplux-dropdown-menu__divider" });
+  }
+});
+const DropdownSubmenu = defineComponent({
+  name: "LaypluxDropdownSubmenu",
+  props: {
+    title: { type: String },
+    icon: Object,
+    disabled: { type: Boolean, default: false },
+    getContainer: { type: Function }
+  },
+  setup(props, { slots }) {
+    const closeParent = inject(DROPDOWN_CLOSE);
+    const onParentClick = inject(DROPDOWN_ON_CLICK);
+    if (closeParent) {
+      provide(DROPDOWN_CLOSE, closeParent);
+    }
+    const handleClick = (key) => {
+      onParentClick?.(key);
+      closeParent?.();
+    };
+    provide(DROPDOWN_ON_CLICK, handleClick);
+    return () => /* @__PURE__ */ jsx(
+      Popup,
+      {
+        trigger: "hover",
+        placement: "right-start",
+        offset: { x: 4, y: 0 },
+        mouseEnterDelay: 150,
+        mouseLeaveDelay: 100,
+        destroyOnClose: true,
+        disabled: props.disabled,
+        getContainer: props.getContainer,
+        children: {
+          default: () => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              class: [
+                "layplux-dropdown-menu__item",
+                "layplux-dropdown-menu__item--submenu",
+                props.disabled && "layplux-dropdown-menu__item--disabled"
+              ],
+              children: [
+                props.icon,
+                /* @__PURE__ */ jsx("span", { children: props.title }),
+                /* @__PURE__ */ jsx(ChevronRightIcon, { size: 12, class: "layplux-dropdown-menu__submenu-arrow" })
+              ]
+            }
+          ),
+          content: () => /* @__PURE__ */ jsx("div", { class: "layplux-dropdown", children: slots.default?.() })
+        }
+      }
+    );
+  }
+});
+export {
+  Dropdown,
+  DropdownDivider,
+  DropdownItem,
+  DropdownMenu,
+  DropdownSubmenu
+};

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

@@ -0,0 +1,39 @@
+import { jsx } from "vue/jsx-runtime";
+import { defineComponent } from "vue";
+const iconProps = {
+  size: { type: [Number, String], default: 16 }
+};
+function createIcon(d, viewBox = "0 0 16 16") {
+  return defineComponent({
+    name: "LaypluxIcon",
+    props: iconProps,
+    setup(props) {
+      return () => /* @__PURE__ */ jsx(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox,
+          width: props.size,
+          height: props.size,
+          fill: "currentColor",
+          style: { flexShrink: 0 },
+          children: /* @__PURE__ */ jsx("path", { d })
+        }
+      );
+    }
+  });
+}
+const MoreIcon = createIcon(
+  "M16 12a2 2 0 0 1 2-2a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2m-6 0a2 2 0 0 1 2-2a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2m-6 0a2 2 0 0 1 2-2a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2",
+  "0 0 24 24"
+);
+const MinimizeIcon = createIcon("M19 13H5v-2h14z", "0 0 24 24");
+const ChevronRightIcon = createIcon(
+  "M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6z",
+  "0 0 24 24"
+);
+export {
+  ChevronRightIcon,
+  MinimizeIcon,
+  MoreIcon
+};

package/dist/esm/components/index.mjs

@@ -0,0 +1,8 @@
+export * from "./corner-glow";
+export * from "./panel-view";
+export * from "./widget";
+export * from "./title";
+export * from "./panel-view";
+export * from "./dropdown";
+export * from "./tooltip";
+export * from "./center-view";

package/dist/esm/components/panel-view/index.mjs

@@ -0,0 +1,152 @@
+import { jsx, jsxs } from "vue/jsx-runtime";
+import { defineComponent, ref, inject } from "vue";
+import {
+  Dropdown,
+  DropdownMenu,
+  DropdownItem,
+  DropdownDivider,
+  DropdownSubmenu
+} from "../dropdown";
+import { MoreIcon, MinimizeIcon } from "../icon";
+import { createContent } from "../../utils";
+import { getBuiltInLocale } from "../../locales";
+const viewModeKeys = /* @__PURE__ */ new Set(["DockPinned", "DockUnpinned", "Undock"]);
+function findItem(items, key) {
+  if (!items) return;
+  for (const item of items) {
+    if (item.key === key) return item;
+    if (item.children?.length) {
+      const found = findItem(item.children, key);
+      if (found) return found;
+    }
+  }
+}
+const PanelView = defineComponent({
+  name: "PanelView",
+  props: {
+    anchor: String,
+    title: String,
+    widget: Object,
+    menuItems: Array
+  },
+  setup(props, { slots }) {
+    const panelRef = ref();
+    const defaultLocale = ref(getBuiltInLocale("zh-CN"));
+    const locale = inject("layplux-locale", defaultLocale);
+    const handleClick = (key) => {
+      const widget = props.widget;
+      widget?.event?.emitGlobal(`panel:${widget.name}:menu-click`, { widget, key });
+      const widgetProps = widget?.config.props;
+      const panelItems = widgetProps?.panelMenuItems;
+      const panelItem = findItem(panelItems, key);
+      if (panelItem?.onClick) {
+        panelItem.onClick(key, widget);
+        return;
+      }
+      if (viewModeKeys.has(key)) {
+        widget?.pane.setViewMode(key);
+      } else if (key === "help") {
+        widgetProps?.onHelpClick?.();
+      }
+    };
+    function handlePanelClick() {
+      props.widget?.focusable.active();
+    }
+    function renderItems(items, currentMode) {
+      return items.map((item) => {
+        if (item.type === "divider") {
+          return /* @__PURE__ */ jsx(DropdownDivider, {}, item.key ?? "divider");
+        }
+        const k = item.key ?? "";
+        if (item.children?.length) {
+          return /* @__PURE__ */ jsx(
+            DropdownSubmenu,
+            {
+              title: item.label,
+              icon: item.icon,
+              getContainer: () => panelRef.value,
+              children: renderItems(item.children, currentMode)
+            },
+            k
+          );
+        }
+        const disabled = currentMode !== void 0 && viewModeKeys.has(k) && currentMode === k;
+        return /* @__PURE__ */ jsxs(DropdownItem, { eventKey: k, disabled, children: [
+          item.icon,
+          " ",
+          item.label
+        ] }, k);
+      });
+    }
+    return () => {
+      const widget = props.widget;
+      const currentMode = widget?.pane.viewMode.value;
+      const widgetProps = widget?.config.props;
+      const hasCustomItems = props.menuItems && props.menuItems.length > 0;
+      const panelMenuItems = widgetProps?.panelMenuItems;
+      const hasPanelMenuItems = panelMenuItems && panelMenuItems.length > 0;
+      const showHelp = widgetProps?.showHelp !== false;
+      const loc = locale.value.panel;
+      const finalInnerItems = [
+        {
+          key: "viewMode",
+          label: loc.viewMode,
+          children: [
+            { key: "DockPinned", label: loc.dockPinned },
+            { key: "DockUnpinned", label: loc.dockUnpinned },
+            { key: "Undock", label: loc.undock }
+          ]
+        },
+        { type: "divider" },
+        ...showHelp ? [{ key: "help", label: loc.help }] : []
+      ];
+      const panelTitleExtra = widgetProps?.panelTitleExtra;
+      const panelActionsExtra = widgetProps?.panelActionsExtra;
+      return /* @__PURE__ */ jsxs("div", { ref: panelRef, id: widget?.id, class: "layplux-panel", onClick: handlePanelClick, children: [
+        /* @__PURE__ */ jsxs("div", { class: "layplux-panel__header", children: [
+          /* @__PURE__ */ jsx("span", { class: "layplux-panel__title", children: props.title ?? widget?.name }),
+          panelTitleExtra && createContent(panelTitleExtra),
+          /* @__PURE__ */ jsxs("div", { class: "layplux-panel__actions", children: [
+            panelActionsExtra && createContent(panelActionsExtra),
+            slots.actionsExtra?.(),
+            /* @__PURE__ */ jsx(
+              Dropdown,
+              {
+                trigger: "click",
+                placement: "bottom-start",
+                onClick: handleClick,
+                getContainer: () => panelRef.value,
+                children: {
+                  default: () => /* @__PURE__ */ jsx("button", { class: "layplux-panel__action-btn", title: loc.more, children: /* @__PURE__ */ jsx(MoreIcon, { size: 16 }) }),
+                  overlay: () => /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+                    hasPanelMenuItems && renderItems(panelMenuItems),
+                    hasPanelMenuItems && hasCustomItems && /* @__PURE__ */ jsx(DropdownDivider, {}),
+                    hasCustomItems && renderItems(props.menuItems),
+                    (hasPanelMenuItems || hasCustomItems) && /* @__PURE__ */ jsx(DropdownDivider, {}),
+                    renderItems(finalInnerItems, currentMode)
+                  ] })
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                class: "layplux-panel__action-btn",
+                title: loc.minimize,
+                onClick: () => {
+                  widget?.event?.emitGlobal(`panel:${widget.name}:minimize`, { widget });
+                  widget?.container?.deactivate();
+                },
+                children: /* @__PURE__ */ jsx(MinimizeIcon, { size: 16 })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { id: props.anchor, class: "layplux-panel__body" })
+      ] });
+    };
+  }
+});
+export {
+  PanelView
+};