layplux 0.0.1

package/dist/cjs/components/center-view/index.cjs

@@ -0,0 +1,41 @@
+"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 center_view_exports = {};
+__export(center_view_exports, {
+  CenterView: () => CenterView
+});
+module.exports = __toCommonJS(center_view_exports);
+var import_jsx_runtime = require("vue/jsx-runtime");
+var import_vue = require("vue");
+const CenterView = (0, import_vue.defineComponent)({
+  name: "CenterView",
+  props: {
+    widget: Object,
+    anchor: {
+      type: String,
+      required: true
+    }
+  },
+  setup(props) {
+    return () => {
+      if (!props.widget) return null;
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_vue.Teleport, { defer: true, to: props.anchor, children: props.widget.renderContent() });
+    };
+  }
+});

package/dist/cjs/components/corner-glow/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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var corner_glow_exports = {};
+__export(corner_glow_exports, {
+  CornerGlow: () => CornerGlow
+});
+module.exports = __toCommonJS(corner_glow_exports);
+var import_jsx_runtime = require("vue/jsx-runtime");
+var import_vue = require("vue");
+const CornerGlow = (0, import_vue.defineComponent)({
+  name: "CornerGlow",
+  setup() {
+    return () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { class: "corner-glow" });
+  }
+});

package/dist/cjs/components/dropdown/index.cjs

@@ -0,0 +1,162 @@
+"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 dropdown_exports = {};
+__export(dropdown_exports, {
+  Dropdown: () => Dropdown,
+  DropdownDivider: () => DropdownDivider,
+  DropdownItem: () => DropdownItem,
+  DropdownMenu: () => DropdownMenu,
+  DropdownSubmenu: () => DropdownSubmenu
+});
+module.exports = __toCommonJS(dropdown_exports);
+var import_jsx_runtime = require("vue/jsx-runtime");
+var import_vue = require("vue");
+var import_popup = require("../popup");
+var import_icon = require("../icon");
+const DROPDOWN_CLOSE = Symbol("dropdown-close");
+const DROPDOWN_ON_CLICK = Symbol("dropdown-on-click");
+const Dropdown = (0, import_vue.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);
+    };
+    (0, import_vue.provide)(DROPDOWN_CLOSE, closeDropdown);
+    (0, import_vue.provide)(DROPDOWN_ON_CLICK, props.onClick);
+    return () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_popup.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__ */ (0, import_jsx_runtime.jsx)("div", { class: "layplux-dropdown", children: slots.overlay?.() })
+        }
+      }
+    );
+  }
+});
+const DropdownMenu = (0, import_vue.defineComponent)({
+  name: "LaypluxDropdownMenu",
+  setup(_props, { slots }) {
+    return () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { class: "layplux-dropdown-menu", children: slots.default?.() });
+  }
+});
+const DropdownItem = (0, import_vue.defineComponent)({
+  name: "LaypluxDropdownItem",
+  props: {
+    eventKey: { type: String, required: true },
+    disabled: { type: Boolean, default: false },
+    danger: { type: Boolean, default: false }
+  },
+  setup(props, { slots }) {
+    const closeDropdown = (0, import_vue.inject)(DROPDOWN_CLOSE);
+    const onItemClick = (0, import_vue.inject)(DROPDOWN_ON_CLICK);
+    const handleClick = () => {
+      if (props.disabled) return;
+      onItemClick?.(props.eventKey);
+      closeDropdown?.();
+    };
+    return () => /* @__PURE__ */ (0, import_jsx_runtime.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 = (0, import_vue.defineComponent)({
+  name: "LaypluxDropdownDivider",
+  setup() {
+    return () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { class: "layplux-dropdown-menu__divider" });
+  }
+});
+const DropdownSubmenu = (0, import_vue.defineComponent)({
+  name: "LaypluxDropdownSubmenu",
+  props: {
+    title: { type: String },
+    icon: Object,
+    disabled: { type: Boolean, default: false },
+    getContainer: { type: Function }
+  },
+  setup(props, { slots }) {
+    const closeParent = (0, import_vue.inject)(DROPDOWN_CLOSE);
+    const onParentClick = (0, import_vue.inject)(DROPDOWN_ON_CLICK);
+    if (closeParent) {
+      (0, import_vue.provide)(DROPDOWN_CLOSE, closeParent);
+    }
+    const handleClick = (key) => {
+      onParentClick?.(key);
+      closeParent?.();
+    };
+    (0, import_vue.provide)(DROPDOWN_ON_CLICK, handleClick);
+    return () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_popup.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__ */ (0, import_jsx_runtime.jsxs)(
+            "div",
+            {
+              class: [
+                "layplux-dropdown-menu__item",
+                "layplux-dropdown-menu__item--submenu",
+                props.disabled && "layplux-dropdown-menu__item--disabled"
+              ],
+              children: [
+                props.icon,
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: props.title }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.ChevronRightIcon, { size: 12, class: "layplux-dropdown-menu__submenu-arrow" })
+              ]
+            }
+          ),
+          content: () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { class: "layplux-dropdown", children: slots.default?.() })
+        }
+      }
+    );
+  }
+});

package/dist/cjs/components/icon/index.cjs

@@ -0,0 +1,59 @@
+"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 icon_exports = {};
+__export(icon_exports, {
+  ChevronRightIcon: () => ChevronRightIcon,
+  MinimizeIcon: () => MinimizeIcon,
+  MoreIcon: () => MoreIcon
+});
+module.exports = __toCommonJS(icon_exports);
+var import_jsx_runtime = require("vue/jsx-runtime");
+var import_vue = require("vue");
+const iconProps = {
+  size: { type: [Number, String], default: 16 }
+};
+function createIcon(d, viewBox = "0 0 16 16") {
+  return (0, import_vue.defineComponent)({
+    name: "LaypluxIcon",
+    props: iconProps,
+    setup(props) {
+      return () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox,
+          width: props.size,
+          height: props.size,
+          fill: "currentColor",
+          style: { flexShrink: 0 },
+          children: /* @__PURE__ */ (0, import_jsx_runtime.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"
+);

package/dist/cjs/components/index.cjs

@@ -0,0 +1,25 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 components_exports = {};
+module.exports = __toCommonJS(components_exports);
+__reExport(components_exports, require("./corner-glow"), module.exports);
+__reExport(components_exports, require("./panel-view"), module.exports);
+__reExport(components_exports, require("./widget"), module.exports);
+__reExport(components_exports, require("./title"), module.exports);
+__reExport(components_exports, require("./panel-view"), module.exports);
+__reExport(components_exports, require("./dropdown"), module.exports);
+__reExport(components_exports, require("./tooltip"), module.exports);
+__reExport(components_exports, require("./center-view"), module.exports);

package/dist/cjs/components/panel-view/index.cjs

@@ -0,0 +1,166 @@
+"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 panel_view_exports = {};
+__export(panel_view_exports, {
+  PanelView: () => PanelView
+});
+module.exports = __toCommonJS(panel_view_exports);
+var import_jsx_runtime = require("vue/jsx-runtime");
+var import_vue = require("vue");
+var import_dropdown = require("../dropdown");
+var import_icon = require("../icon");
+var import_utils = require("../../utils");
+var import_locales = require("../../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 = (0, import_vue.defineComponent)({
+  name: "PanelView",
+  props: {
+    anchor: String,
+    title: String,
+    widget: Object,
+    menuItems: Array
+  },
+  setup(props, { slots }) {
+    const panelRef = (0, import_vue.ref)();
+    const defaultLocale = (0, import_vue.ref)((0, import_locales.getBuiltInLocale)("zh-CN"));
+    const locale = (0, import_vue.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__ */ (0, import_jsx_runtime.jsx)(import_dropdown.DropdownDivider, {}, item.key ?? "divider");
+        }
+        const k = item.key ?? "";
+        if (item.children?.length) {
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_dropdown.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__ */ (0, import_jsx_runtime.jsxs)(import_dropdown.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__ */ (0, import_jsx_runtime.jsxs)("div", { ref: panelRef, id: widget?.id, class: "layplux-panel", onClick: handlePanelClick, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { class: "layplux-panel__header", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { class: "layplux-panel__title", children: props.title ?? widget?.name }),
+          panelTitleExtra && (0, import_utils.createContent)(panelTitleExtra),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { class: "layplux-panel__actions", children: [
+            panelActionsExtra && (0, import_utils.createContent)(panelActionsExtra),
+            slots.actionsExtra?.(),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_dropdown.Dropdown,
+              {
+                trigger: "click",
+                placement: "bottom-start",
+                onClick: handleClick,
+                getContainer: () => panelRef.value,
+                children: {
+                  default: () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { class: "layplux-panel__action-btn", title: loc.more, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.MoreIcon, { size: 16 }) }),
+                  overlay: () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_dropdown.DropdownMenu, { children: [
+                    hasPanelMenuItems && renderItems(panelMenuItems),
+                    hasPanelMenuItems && hasCustomItems && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dropdown.DropdownDivider, {}),
+                    hasCustomItems && renderItems(props.menuItems),
+                    (hasPanelMenuItems || hasCustomItems) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dropdown.DropdownDivider, {}),
+                    renderItems(finalInnerItems, currentMode)
+                  ] })
+                }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                class: "layplux-panel__action-btn",
+                title: loc.minimize,
+                onClick: () => {
+                  widget?.event?.emitGlobal(`panel:${widget.name}:minimize`, { widget });
+                  widget?.container?.deactivate();
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.MinimizeIcon, { size: 16 })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: props.anchor, class: "layplux-panel__body" })
+      ] });
+    };
+  }
+});