layplux 1.0.1 → 2.0.1

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

@@ -1,16 +1,13 @@
-import { jsx, jsxs } from "vue/jsx-runtime";
-import { defineComponent, ref, inject } from "vue";
-import {
-  Dropdown,
-  DropdownMenu,
-  DropdownItem,
-  DropdownDivider,
-  DropdownSubmenu
-} from "../dropdown/index.mjs";
-import { MoreIcon, MinimizeIcon } from "../icon/index.mjs";
-import { createContent } from "../../utils/index.mjs";
-import { getBuiltInLocale } from "../../locales/index.mjs";
-const viewModeKeys = /* @__PURE__ */ new Set(["DockPinned", "DockUnpinned", "Undock"]);
+import { defineComponent, ref, inject, createVNode, createTextVNode, isVNode } from 'vue';
+import { Dropdown, DropdownMenu, DropdownDivider, DropdownSubmenu, DropdownItem } from '../dropdown/index.mjs';
+import { MoreIcon, MinimizeIcon } from '../icon/index.mjs';
+import { getBuiltInLocale } from '../../locales/index.mjs';
+import { createContent } from '../../utils/vue.mjs';
+
+function _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
+}
+const viewModeKeys = new Set(['DockPinned', 'DockUnpinned', 'Undock']);
 function findItem(items, key) {
   if (!items) return;
   for (const item of items) {
@@ -22,20 +19,25 @@ function findItem(items, key) {
   }
 }
 const PanelView = defineComponent({
-  name: "PanelView",
+  name: 'PanelView',
   props: {
     anchor: String,
     title: String,
     widget: Object,
     menuItems: Array
   },
-  setup(props, { slots }) {
+  setup(props, {
+    slots
+  }) {
     const panelRef = ref();
-    const defaultLocale = ref(getBuiltInLocale("zh-CN"));
-    const locale = inject("layplux-locale", defaultLocale);
-    const handleClick = (key) => {
+    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 });
+      widget?.event?.emitGlobal(`panel:${widget.name}:menu-click`, {
+        widget,
+        key
+      });
       const widgetProps = widget?.config.props;
       const panelItems = widgetProps?.panelMenuItems;
       const panelItem = findItem(panelItems, key);
@@ -45,7 +47,7 @@ const PanelView = defineComponent({
       }
       if (viewModeKeys.has(key)) {
         widget?.pane.setViewMode(key);
-      } else if (key === "help") {
+      } else if (key === 'help') {
         widgetProps?.onHelpClick?.();
       }
     };
@@ -53,29 +55,32 @@ const PanelView = defineComponent({
       props.widget?.focusable.active();
     }
     function renderItems(items, currentMode) {
-      return items.map((item) => {
-        if (item.type === "divider") {
-          return /* @__PURE__ */ jsx(DropdownDivider, {}, item.key ?? "divider");
+      return items.map(item => {
+        if (item.type === 'divider') {
+          return createVNode(DropdownDivider, {
+            "key": item.key ?? 'divider'
+          }, null);
         }
-        const k = item.key ?? "";
+        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
-          );
+          let _slot;
+          return createVNode(DropdownSubmenu, {
+            "key": k,
+            "title": item.label,
+            "icon": item.icon,
+            "getContainer": () => panelRef.value
+          }, _isSlot(_slot = renderItems(item.children, currentMode)) ? _slot : {
+            default: () => [_slot]
+          });
         }
-        const disabled = currentMode !== void 0 && viewModeKeys.has(k) && currentMode === k;
-        return /* @__PURE__ */ jsxs(DropdownItem, { eventKey: k, disabled, children: [
-          item.icon,
-          " ",
-          item.label
-        ] }, k);
+        const disabled = currentMode !== undefined && viewModeKeys.has(k) && currentMode === k;
+        return createVNode(DropdownItem, {
+          "key": k,
+          "eventKey": k,
+          "disabled": disabled
+        }, {
+          default: () => [item.icon, createTextVNode(" "), item.label]
+        });
       });
     }
     return () => {
@@ -87,66 +92,70 @@ const PanelView = defineComponent({
       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 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" })
-      ] });
+      return createVNode("div", {
+        "ref": panelRef,
+        "id": widget?.id,
+        "class": "layplux-panel",
+        "onClick": handlePanelClick
+      }, [createVNode("div", {
+        "class": "layplux-panel__header"
+      }, [createVNode("span", {
+        "class": "layplux-panel__title"
+      }, [props.title ?? widget?.name]), panelTitleExtra && createContent(panelTitleExtra), createVNode("div", {
+        "class": "layplux-panel__actions"
+      }, [panelActionsExtra && createContent(panelActionsExtra), slots.actionsExtra?.(), createVNode(Dropdown, {
+        "trigger": "click",
+        "placement": "bottom-start",
+        "onClick": handleClick,
+        "getContainer": () => panelRef.value
+      }, {
+        default: () => createVNode("button", {
+          "class": "layplux-panel__action-btn",
+          "title": loc.more
+        }, [createVNode(MoreIcon, {
+          "size": 16
+        }, null)]),
+        overlay: () => createVNode(DropdownMenu, null, {
+          default: () => [hasPanelMenuItems && renderItems(panelMenuItems), hasPanelMenuItems && hasCustomItems && createVNode(DropdownDivider, null, null), hasCustomItems && renderItems(props.menuItems), (hasPanelMenuItems || hasCustomItems) && createVNode(DropdownDivider, null, null), renderItems(finalInnerItems, currentMode)]
+        })
+      }), createVNode("button", {
+        "class": "layplux-panel__action-btn",
+        "title": loc.minimize,
+        "onClick": () => {
+          widget?.event?.emitGlobal(`panel:${widget.name}:minimize`, {
+            widget
+          });
+          widget?.container?.deactivate();
+        }
+      }, [createVNode(MinimizeIcon, {
+        "size": 16
+      }, null)])])]), createVNode("div", {
+        "id": props.anchor,
+        "class": "layplux-panel__body"
+      }, null)]);
     };
   }
 });
-export {
-  PanelView
-};
+
+export { PanelView };

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

@@ -1,81 +1,115 @@
-import { Fragment, jsx, jsxs } from "vue/jsx-runtime";
-import {
-  defineComponent,
-  ref,
-  watch,
-  nextTick,
-  onMounted,
-  onUnmounted,
-  Teleport
-} from "vue";
+import { defineComponent, ref, watch, onMounted, onUnmounted, createVNode, Fragment, Teleport, nextTick } 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") {
+  const [main, align] = placement.split('-');
+
+  // Vertical placements
+  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 (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;
+
+    // Flip to top if not enough space
     if (top + popupH > vh - PADDING) {
       top = triggerRect.top - popupH - offsetY;
-      placement = align ? `top-${align}` : "top";
+      placement = align ? `top-${align}` : 'top';
     }
-  } else if (main === "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 (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;
+
+    // Flip to bottom if not enough space
     if (top < PADDING) {
       top = triggerRect.bottom + offsetY;
-      placement = align ? `bottom-${align}` : "bottom";
+      placement = align ? `bottom-${align}` : 'bottom';
     }
-  } else if (main === "right") {
+  }
+  // Horizontal placements
+  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 (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";
+      placement = align ? `left-${align}` : 'left';
     }
-  } else if (main === "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 (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";
+      placement = align ? `right-${align}` : 'right';
     }
   }
+
+  // Clamp to viewport
   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 };
+  return {
+    position: {
+      top,
+      left
+    },
+    placement
+  };
 }
 const Popup = defineComponent({
-  name: "LaypluxPopup",
+  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 }
+    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 }) {
+  emits: ['update:visible'],
+  setup(props, {
+    emit,
+    slots
+  }) {
     const triggerRef = ref();
     const popupRef = ref();
-    const position = ref({ top: 0, left: 0 });
+    const position = ref({
+      top: 0,
+      left: 0
+    });
     const currentPlacement = ref(props.placement);
+    // Whether the popup DOM should exist
     const mounted = ref(false);
+    // Whether the popup is in its visible animation state
     const animatingIn = ref(false);
     let enterTimer = null;
     let leaveTimer = null;
@@ -98,15 +132,11 @@ const Popup = defineComponent({
       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
-      );
+      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;
     };
@@ -115,9 +145,10 @@ const Popup = defineComponent({
       clearTimers();
       enterTimer = setTimeout(() => {
         mounted.value = true;
-        emit("update:visible", true);
+        emit('update:visible', true);
         void nextTick(() => {
           updatePosition();
+          // Trigger enter animation
           requestAnimationFrame(() => {
             animatingIn.value = true;
           });
@@ -129,10 +160,12 @@ const Popup = defineComponent({
       const delay = immediate ? 0 : props.mouseLeaveDelay;
       leaveTimer = setTimeout(() => {
         animatingIn.value = false;
+
+        // Wait for CSS transition to finish before removing DOM
         leaveAnimationTimer = setTimeout(() => {
           mounted.value = false;
-          emit("update:visible", false);
-        }, 200);
+          emit('update:visible', false);
+        }, 200); // Match CSS transition duration
       }, delay);
     };
     const toggle = () => {
@@ -143,75 +176,80 @@ const Popup = defineComponent({
         show();
       }
     };
-    watch(
-      () => props.visible,
-      (v) => {
-        if (v && !mounted.value) show();
-        else if (!v && mounted.value) hide(true);
-      }
-    );
-    watch(
-      () => props.placement,
-      (p) => {
-        currentPlacement.value = p;
-      }
-    );
+
+    // Sync external visible changes
+    watch(() => props.visible, v => {
+      if (v && !mounted.value) show();else if (!v && mounted.value) hide(true);
+    });
+
+    // Sync external placement changes
+    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);
+      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);
+      window.removeEventListener('resize', onResize);
+      window.removeEventListener('scroll', onResize, true);
+      document.removeEventListener('mousedown', onClickOutside, true);
+      document.removeEventListener('keydown', onEsc);
     });
-    const onClickOutside = (e) => {
+
+    // Click outside
+    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") {
+      if (props.trigger === 'click' || props.trigger === 'contextmenu') {
         hide(true);
       }
     };
-    const onEsc = (e) => {
-      if (e.key === "Escape" && mounted.value) {
+
+    // ESC key
+    const onEsc = e => {
+      if (e.key === 'Escape' && mounted.value) {
         hide(true);
       }
     };
+
+    // Trigger event handlers
     const onTriggerMouseEnter = () => {
-      if (props.trigger === "hover") show();
+      if (props.trigger === 'hover') show();
     };
     const onTriggerMouseLeave = () => {
-      if (props.trigger === "hover") hide();
+      if (props.trigger === 'hover') hide();
     };
-    const onTriggerClick = (e) => {
-      if (props.trigger === "click") {
+    const onTriggerClick = e => {
+      if (props.trigger === 'click') {
         e.stopPropagation();
         toggle();
       }
     };
     const onTriggerFocus = () => {
-      if (props.trigger === "focus") show();
+      if (props.trigger === 'focus') show();
     };
     const onTriggerBlur = () => {
-      if (props.trigger === "focus") hide(true);
+      if (props.trigger === 'focus') hide(true);
     };
-    const onTriggerContextmenu = (e) => {
-      if (props.trigger === "contextmenu") {
+    const onTriggerContextmenu = e => {
+      if (props.trigger === 'contextmenu') {
         e.preventDefault();
         show();
       }
     };
+
+    // Popup hover (for safe triangle)
     const onPopupMouseEnter = () => {
       if (leaveTimer) {
         clearTimeout(leaveTimer);
@@ -219,50 +257,37 @@ const Popup = defineComponent({
       }
     };
     const onPopupMouseLeave = () => {
-      if (props.trigger === "hover") hide();
+      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?.()
-          }
-        ) })
-      ] });
+      return createVNode(Fragment, null, [createVNode("span", {
+        "ref": triggerRef,
+        "class": "layplux-popup-trigger",
+        "onMouseenter": onTriggerMouseEnter,
+        "onMouseleave": onTriggerMouseLeave,
+        "onClick": onTriggerClick,
+        "onFocus": onTriggerFocus,
+        "onBlur": onTriggerBlur,
+        "onContextmenu": onTriggerContextmenu
+      }, [slots.default?.()]), (mounted.value || !props.destroyOnClose) && createVNode(Teleport, {
+        "to": container
+      }, {
+        default: () => [createVNode("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
+        }, [slots.content?.()])]
+      })]);
     };
   }
 });
-export {
-  Popup
-};
+
+export { Popup };