@lobehub/ui 1.3.0 → 1.4.0

package/lib/ContextMenu/index.js

@@ -0,0 +1,254 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/ContextMenu/index.tsx
+var ContextMenu_exports = {};
+__export(ContextMenu_exports, {
+  default: () => ContextMenu_default
+});
+module.exports = __toCommonJS(ContextMenu_exports);
+var import_react = require("@floating-ui/react");
+var import_react2 = require("react");
+var import_antd = require("antd");
+var import_MenuItem = __toESM(require("./MenuItem"));
+var import_style = require("./style");
+var MenuComponent = (0, import_react2.forwardRef)(({ items, label, container, ...props }, forwardedRef) => {
+  const { styles } = (0, import_style.useStyles)();
+  const [isOpen, setIsOpen] = (0, import_react2.useState)(false);
+  const [activeIndex, setActiveIndex] = (0, import_react2.useState)(null);
+  const [allowHover, setAllowHover] = (0, import_react2.useState)(false);
+  const listItemsRef = (0, import_react2.useRef)([]);
+  const listContentRef = (0, import_react2.useRef)(items.map((item) => item.label));
+  const allowMouseUpCloseRef = (0, import_react2.useRef)(false);
+  const tree = (0, import_react.useFloatingTree)();
+  const nodeId = (0, import_react.useFloatingNodeId)();
+  const parentId = (0, import_react.useFloatingParentNodeId)();
+  const isNested = parentId !== null;
+  const { refs, floatingStyles, context } = (0, import_react.useFloating)({
+    nodeId,
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    placement: isNested ? "right-start" : "bottom-start",
+    middleware: [
+      (0, import_react.offset)({ mainAxis: isNested ? 0 : 4, alignmentAxis: isNested ? -4 : 0 }),
+      (0, import_react.flip)(),
+      (0, import_react.shift)()
+    ],
+    whileElementsMounted: import_react.autoUpdate
+  });
+  const hover = (0, import_react.useHover)(context, {
+    enabled: isNested && allowHover,
+    delay: { open: 75 },
+    handleClose: (0, import_react.safePolygon)({
+      blockPointerEvents: true
+    })
+  });
+  const click = (0, import_react.useClick)(context, {
+    event: "mousedown",
+    toggle: !isNested || !allowHover,
+    ignoreMouse: isNested
+  });
+  const role = (0, import_react.useRole)(context, { role: "menu" });
+  const dismiss = (0, import_react.useDismiss)(context);
+  const listNavigation = (0, import_react.useListNavigation)(context, {
+    listRef: listItemsRef,
+    activeIndex,
+    nested: isNested,
+    onNavigate: setActiveIndex
+  });
+  const typeahead = (0, import_react.useTypeahead)(context, {
+    enabled: isOpen,
+    listRef: listContentRef,
+    onMatch: isOpen ? setActiveIndex : void 0,
+    activeIndex
+  });
+  const { getReferenceProps, getFloatingProps, getItemProps } = (0, import_react.useInteractions)([
+    hover,
+    click,
+    role,
+    dismiss,
+    listNavigation,
+    typeahead
+  ]);
+  (0, import_react2.useEffect)(() => {
+    if (!tree)
+      return;
+    function handleTreeClick() {
+      setIsOpen(false);
+    }
+    function onSubMenuOpen(event) {
+      if (event.nodeId !== nodeId && event.parentId === parentId) {
+        setIsOpen(false);
+      }
+    }
+    tree.events.on("click", handleTreeClick);
+    tree.events.on("menuopen", onSubMenuOpen);
+    return () => {
+      tree.events.off("click", handleTreeClick);
+      tree.events.off("menuopen", onSubMenuOpen);
+    };
+  }, [tree, nodeId, parentId]);
+  (0, import_react2.useEffect)(() => {
+    if (isOpen && tree) {
+      tree.events.emit("menuopen", { parentId, nodeId });
+    }
+  }, [tree, isOpen, nodeId, parentId]);
+  (0, import_react2.useEffect)(() => {
+    function onPointerMove({ pointerType }) {
+      if (pointerType !== "touch") {
+        setAllowHover(true);
+      }
+    }
+    function onKeyDown() {
+      setAllowHover(false);
+    }
+    window.addEventListener("pointermove", onPointerMove, {
+      once: true,
+      capture: true
+    });
+    window.addEventListener("keydown", onKeyDown, true);
+    return () => {
+      window.removeEventListener("pointermove", onPointerMove, {
+        capture: true
+      });
+      window.removeEventListener("keydown", onKeyDown, true);
+    };
+  }, [allowHover]);
+  (0, import_react2.useEffect)(() => {
+    let timeout;
+    function onContextMenu(e) {
+      e.preventDefault();
+      refs.setPositionReference({
+        getBoundingClientRect() {
+          return {
+            width: 0,
+            height: 0,
+            x: e.clientX,
+            y: e.clientY,
+            top: e.clientY,
+            right: e.clientX,
+            bottom: e.clientY,
+            left: e.clientX
+          };
+        }
+      });
+      setIsOpen(true);
+      clearTimeout(timeout);
+      allowMouseUpCloseRef.current = false;
+      timeout = window.setTimeout(() => {
+        allowMouseUpCloseRef.current = true;
+      }, 300);
+    }
+    function onMouseUp() {
+      if (allowMouseUpCloseRef.current) {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener("contextmenu", onContextMenu);
+    document.addEventListener("mouseup", onMouseUp);
+    return () => {
+      document.removeEventListener("contextmenu", onContextMenu);
+      document.removeEventListener("mouseup", onMouseUp);
+      clearTimeout(timeout);
+    };
+  }, [refs, container]);
+  const renderMenuItem = (0, import_react2.useCallback)(
+    (item, index) => {
+      if ("type" in item && item.type === "divider")
+        return /* @__PURE__ */ React.createElement(import_antd.Divider, { style: { margin: "4px 12px", minWidth: "auto", width: "auto" } });
+      const data = item;
+      const props2 = {
+        label: data.label,
+        key: data.key,
+        icon: data.icon,
+        shortcut: data.shortcut,
+        active: activeIndex === index,
+        ...getItemProps({
+          ref(node) {
+            listItemsRef.current[index] = node;
+          },
+          onClick() {
+            var _a;
+            (_a = data.onClick) == null ? void 0 : _a.call(data);
+            setIsOpen(false);
+          },
+          onMouseUp() {
+            var _a;
+            (_a = data.onClick) == null ? void 0 : _a.call(data);
+            setIsOpen(false);
+          }
+        })
+      };
+      if ("children" in item) {
+        return /* @__PURE__ */ React.createElement(MenuComponent, { ...props2, items: item.children });
+      }
+      return /* @__PURE__ */ React.createElement(import_MenuItem.default, { ...props2 });
+    },
+    [activeIndex]
+  );
+  const referenceRef = (0, import_react.useMergeRefs)([refs.setReference, forwardedRef]);
+  return /* @__PURE__ */ React.createElement(import_react.FloatingNode, { id: nodeId }, !label ? null : /* @__PURE__ */ React.createElement(
+    import_MenuItem.default,
+    {
+      ref: referenceRef,
+      nested: isNested,
+      label,
+      role: isNested ? "menuitem" : "menu",
+      ...props,
+      ...getReferenceProps({
+        onClick(event) {
+          event.stopPropagation();
+        }
+      })
+    }
+  ), /* @__PURE__ */ React.createElement(import_react.FloatingPortal, null, isOpen && /* @__PURE__ */ React.createElement(
+    import_react.FloatingFocusManager,
+    {
+      context,
+      modal: false,
+      initialFocus: isNested ? -1 : 0,
+      returnFocus: !isNested
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref: refs.setFloating,
+        className: styles.container,
+        style: floatingStyles,
+        ...getFloatingProps()
+      },
+      items == null ? void 0 : items.map(renderMenuItem)
+    )
+  )));
+});
+var ContextMenu = (0, import_react2.forwardRef)(
+  (props, ref) => /* @__PURE__ */ React.createElement(import_react.FloatingTree, null, /* @__PURE__ */ React.createElement(MenuComponent, { ...props, ref }))
+);
+var ContextMenu_default = ContextMenu;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/lib/ContextMenu/style.d.ts

@@ -0,0 +1,4 @@
+export declare const useStyles: (props?: string | undefined) => import("antd-style").ReturnStyles<{
+    container: string;
+    button: string;
+}>;

package/lib/ContextMenu/style.js

@@ -0,0 +1,88 @@
+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);
+
+// src/ContextMenu/style.ts
+var style_exports = {};
+__export(style_exports, {
+  useStyles: () => useStyles
+});
+module.exports = __toCommonJS(style_exports);
+var import_antd_style = require("antd-style");
+var useStyles = (0, import_antd_style.createStyles)(({ css, cx, token }, prefixCls) => ({
+  container: cx(
+    prefixCls,
+    css`
+      user-select: none;
+      scrollbar-width: none;
+
+      overflow-y: auto;
+      overscroll-behavior: contain;
+
+      box-sizing: border-box;
+      width: 200px;
+      padding: 5px;
+
+      font-size: ${token.fontSize};
+
+      background: ${token.colorBgContainer};
+      border: 1px solid ${token.colorBorder};
+      border-radius: 8px;
+      outline: 0;
+      box-shadow: ${token.boxShadowSecondary};
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    `
+  ),
+  button: cx(
+    `${prefixCls}-button`,
+    css`
+      all: unset;
+
+      cursor: default;
+      user-select: none;
+
+      padding: 12px 10px;
+
+      font-size: ${token.fontSize}px;
+      line-height: 1;
+      color: ${token.colorText};
+
+      background: ${token.colorBgContainer};
+      border: 1px solid ${token.colorBorder};
+      border-radius: ${token.borderRadius}px;
+
+      -webkit-tap-highlight-color: transparent;
+
+      &:hover {
+        background: ${token.colorPrimaryBg};
+        border-color: transparent;
+      }
+
+      &:focus-visible {
+        border-color: ${token.colorPrimary};
+        box-shadow: 0 0 0 2px ${token.colorPrimaryBg};
+      }
+    `
+  )
+}));
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useStyles
+});

package/lib/ContextMenu/types/index.d.ts

@@ -0,0 +1,5 @@
+import { MenuItemType } from './menuItem';
+export * from './menuItem';
+export interface MenuProps {
+    items: MenuItemType[];
+}

package/lib/ContextMenu/types/index.js

@@ -0,0 +1,19 @@
+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);
+
+// src/ContextMenu/types/index.ts
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);
+__reExport(types_exports, require("./menuItem"), module.exports);

package/lib/ContextMenu/types/menuItem.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+interface CommonType {
+    key: string;
+    label: string;
+    onClick?: () => void;
+    icon?: ReactNode;
+}
+export interface GeneralItemType extends CommonType {
+    disabled?: boolean;
+    danger?: boolean;
+    shortcut?: ('meta' | 'control' | 'shift' | 'alt' | string)[];
+}
+export interface SubMenuType extends CommonType {
+    children: MenuItemType[];
+}
+export interface MenuDividerType {
+    type: 'divider';
+    dashed?: boolean;
+}
+export declare type MenuItemType = GeneralItemType | SubMenuType | MenuDividerType;
+export {};

package/lib/ContextMenu/types/menuItem.js

@@ -0,0 +1,17 @@
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/ContextMenu/types/menuItem.ts
+var menuItem_exports = {};
+module.exports = __toCommonJS(menuItem_exports);

package/lib/DraggablePanel/index.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import type { NumberSize, Size } from 're-resizable';
+import { ReactNode } from 'react';
 import type { Props as RndProps } from 'react-rnd';
 import { DivProps } from "../types";
 export declare type placementType = 'right' | 'left' | 'top' | 'bottom';
@@ -81,6 +81,12 @@ export interface DraggablePanelProps extends DivProps {
      * @type CSSProperties
      */
     hanlderStyle?: React.CSSProperties;
+    children: ReactNode;
+    className?: string;
+    classNames?: {
+        handle?: string;
+        content?: string;
+    };
 }
 declare const DraggablePanel: import("react").NamedExoticComponent<DraggablePanelProps>;
 export default DraggablePanel;

package/lib/DraggablePanel/index.js

@@ -63,7 +63,8 @@ var DraggablePanel = (0, import_react.memo)(
     className,
     showHandlerWhenUnexpand,
     destroyOnClose,
-    hanlderStyle
+    hanlderStyle,
+    classNames = {}
   }) => {
     const ref = (0, import_react.useRef)(null);
     const isHovering = (0, import_ahooks.useHover)(ref);
@@ -140,30 +141,27 @@ var DraggablePanel = (0, import_react.memo)(
           return { className: "Right", Arrow: import_lucide_react.ChevronRight };
       }
     }, [styles, placement]);
-    const handler = (
-      // @ts-ignore
+    const handler = /* @__PURE__ */ React.createElement(
+      import_react_layout_kit.Center,
+      {
+        className: cx(styles[`toggle${arrowPlacement}`], classNames.handle),
+        style: { opacity: isExpand ? !pin ? 0 : void 0 : showHandlerWhenUnexpand ? 1 : 0 }
+      },
       /* @__PURE__ */ React.createElement(
         import_react_layout_kit.Center,
         {
-          className: cx(styles[`toggle${arrowPlacement}`]),
-          style: { opacity: isExpand ? !pin ? 0 : void 0 : showHandlerWhenUnexpand ? 1 : 0 }
+          style: hanlderStyle,
+          onClick: () => {
+            setIsExpand(!isExpand);
+          }
         },
         /* @__PURE__ */ React.createElement(
-          import_react_layout_kit.Center,
+          "div",
           {
-            style: hanlderStyle,
-            onClick: () => {
-              setIsExpand(!isExpand);
-            }
+            className: styles.handlerIcon,
+            style: { transform: `rotate(${isExpand ? 180 : 0}deg)` }
           },
-          /* @__PURE__ */ React.createElement(
-            "div",
-            {
-              className: styles.handlerIcon,
-              style: { transform: `rotate(${isExpand ? 180 : 0}deg)` }
-            },
-            /* @__PURE__ */ React.createElement(Arrow, { size: 16, strokeWidth: 1.5 })
-          )
+          /* @__PURE__ */ React.createElement(Arrow, { size: 16, strokeWidth: 1.5 })
         )
       )
     );
@@ -174,7 +172,7 @@ var DraggablePanel = (0, import_react.memo)(
         {
           ...sizeProps,
           style,
-          className: styles.panel,
+          className: cx(styles.panel, classNames.content),
           enable: canResizing ? resizing : void 0,
           handleClasses: resizeHandleClassNames,
           onResizeStop: (e, direction, ref2, delta) => {

package/lib/DraggablePanel/utils.d.ts

@@ -1,2 +1,2 @@
 import { placementType } from './index';
-export declare const revesePlacement: (placement: placementType) => "top" | "left" | "right" | "bottom";
+export declare const revesePlacement: (placement: placementType) => "left" | "right" | "bottom" | "top";

package/lib/List/ListItem/index.d.ts

@@ -0,0 +1,64 @@
+import { CSSProperties, HTMLAttributes, ReactNode } from 'react';
+/**
+ * 卡片列表项的属性
+ */
+export interface ListItemProps {
+    /**
+     * 是否处于激活状态
+     */
+    active: boolean;
+    /**
+     * 是否处于加载状态
+     */
+    loading?: boolean;
+    /**
+     * 标题
+     */
+    title: string;
+    /**
+     * 描述信息
+     */
+    description?: string;
+    /**
+     * 日期时间戳
+     */
+    date?: number;
+    /**
+     * 点击事件回调函数
+     */
+    onClick?: () => void;
+    /**
+     * 鼠标悬停状态变化事件回调函数
+     * @param hover - 是否悬停
+     */
+    onHoverChange?: (hover: boolean) => void;
+    /**
+     * 渲染操作区域的 React 节点
+     */
+    renderActions?: ReactNode;
+    /**
+     * 头像的 React 节点
+     */
+    avatar?: ReactNode;
+    /**
+     * 自定义样式类名
+     */
+    className?: string;
+    /**
+     * 自定义样式对象
+     */
+    style?: CSSProperties;
+    /**
+     * 是否显示操作区域
+     */
+    showAction?: boolean;
+    /**
+     * 自定义样式类名对象
+     * @property time - 时间的样式类名
+     */
+    classNames?: {
+        time?: string;
+    };
+}
+declare const ListItem: import("react").ForwardRefExoticComponent<ListItemProps & HTMLAttributes<any> & import("react").RefAttributes<HTMLElement>>;
+export default ListItem;