layplux 1.0.1 → 2.0.1

package/dist/cjs/components/popup/index.cjs

@@ -1,97 +1,118 @@
-"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 popup_exports = {};
-__export(popup_exports, {
-  Popup: () => Popup
-});
-module.exports = __toCommonJS(popup_exports);
-var import_jsx_runtime = require("vue/jsx-runtime");
-var import_vue = require("vue");
+'use strict';
+
+var vue = require('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 = (0, import_vue.defineComponent)({
-  name: "LaypluxPopup",
+const Popup = vue.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 }
+    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 = (0, import_vue.ref)();
-    const popupRef = (0, import_vue.ref)();
-    const position = (0, import_vue.ref)({ top: 0, left: 0 });
-    const currentPlacement = (0, import_vue.ref)(props.placement);
-    const mounted = (0, import_vue.ref)(false);
-    const animatingIn = (0, import_vue.ref)(false);
+  emits: ['update:visible'],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const triggerRef = vue.ref();
+    const popupRef = vue.ref();
+    const position = vue.ref({
+      top: 0,
+      left: 0
+    });
+    const currentPlacement = vue.ref(props.placement);
+    // Whether the popup DOM should exist
+    const mounted = vue.ref(false);
+    // Whether the popup is in its visible animation state
+    const animatingIn = vue.ref(false);
     let enterTimer = null;
     let leaveTimer = null;
     let leaveAnimationTimer = null;
@@ -113,15 +134,11 @@ const Popup = (0, import_vue.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;
     };
@@ -130,9 +147,10 @@ const Popup = (0, import_vue.defineComponent)({
       clearTimers();
       enterTimer = setTimeout(() => {
         mounted.value = true;
-        emit("update:visible", true);
-        void (0, import_vue.nextTick)(() => {
+        emit('update:visible', true);
+        void vue.nextTick(() => {
           updatePosition();
+          // Trigger enter animation
           requestAnimationFrame(() => {
             animatingIn.value = true;
           });
@@ -144,10 +162,12 @@ const Popup = (0, import_vue.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 = () => {
@@ -158,75 +178,80 @@ const Popup = (0, import_vue.defineComponent)({
         show();
       }
     };
-    (0, import_vue.watch)(
-      () => props.visible,
-      (v) => {
-        if (v && !mounted.value) show();
-        else if (!v && mounted.value) hide(true);
-      }
-    );
-    (0, import_vue.watch)(
-      () => props.placement,
-      (p) => {
-        currentPlacement.value = p;
-      }
-    );
+
+    // Sync external visible changes
+    vue.watch(() => props.visible, v => {
+      if (v && !mounted.value) show();else if (!v && mounted.value) hide(true);
+    });
+
+    // Sync external placement changes
+    vue.watch(() => props.placement, p => {
+      currentPlacement.value = p;
+    });
     const onResize = () => {
       if (mounted.value && animatingIn.value) updatePosition();
     };
-    (0, import_vue.onMounted)(() => {
-      window.addEventListener("resize", onResize);
-      window.addEventListener("scroll", onResize, true);
-      document.addEventListener("mousedown", onClickOutside, true);
-      document.addEventListener("keydown", onEsc);
+    vue.onMounted(() => {
+      window.addEventListener('resize', onResize);
+      window.addEventListener('scroll', onResize, true);
+      document.addEventListener('mousedown', onClickOutside, true);
+      document.addEventListener('keydown', onEsc);
     });
-    (0, import_vue.onUnmounted)(() => {
+    vue.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);
@@ -234,47 +259,37 @@ const Popup = (0, import_vue.defineComponent)({
       }
     };
     const onPopupMouseLeave = () => {
-      if (props.trigger === "hover") hide();
+      if (props.trigger === 'hover') hide();
     };
     return () => {
       const container = props.getContainer();
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(import_vue.Teleport, { to: container, children: /* @__PURE__ */ (0, import_jsx_runtime.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 vue.createVNode(vue.Fragment, null, [vue.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) && vue.createVNode(vue.Teleport, {
+        "to": container
+      }, {
+        default: () => [vue.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?.()])]
+      })]);
     };
   }
 });
+
+exports.Popup = Popup;

package/dist/cjs/components/title/index.cjs

@@ -1,43 +1,22 @@
-"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 title_exports = {};
-__export(title_exports, {
-  TitleView: () => TitleView
-});
-module.exports = __toCommonJS(title_exports);
-var import_jsx_runtime = require("vue/jsx-runtime");
-var import_vue = require("vue");
-var import_utils = require("../../utils");
-const TitleView = (0, import_vue.defineComponent)({
-  name: "TitleView",
+'use strict';
+
+var vue = require('vue');
+var vue$1 = require('../../utils/vue.cjs');
+
+const TitleView = vue.defineComponent({
+  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: {
@@ -46,31 +25,39 @@ const TitleView = (0, import_vue.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 iconNode = icon ? (0, import_utils.createContent)(icon) : null;
-      const titleNode = title ? (0, import_utils.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__ */ (0, import_jsx_runtime.jsxs)("span", { class: classes, onClick, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { class: "title-view__icon", children: iconNode }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { class: "title-view__label", children: titleNode })
-      ] });
+      const {
+        icon,
+        title,
+        mode,
+        state,
+        size,
+        focused,
+        className,
+        onClick
+      } = props;
+      const iconNode = icon ? vue$1.createContent(icon) : null;
+      const titleNode = title ? vue$1.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 vue.createVNode("span", {
+        "class": classes,
+        "onClick": onClick
+      }, [vue.createVNode("span", {
+        "class": "title-view__icon"
+      }, [iconNode]), vue.createVNode("span", {
+        "class": "title-view__label"
+      }, [titleNode])]);
     };
   }
 });
+
+exports.TitleView = TitleView;