wssf-kage-ui 0.1.0 → 0.1.1

package/dist/esm/Divider/style.less

@@ -0,0 +1,144 @@
+// Divider 分割线组件样式
+
+@prefix: kage-divider;
+
+// 基础变量
+@divider-color: #e5e5e5;
+@divider-text-color: #1f1f1f;
+@divider-text-font-size: 14px;
+@divider-orientation-margin: 5%;
+
+.@{prefix} {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-size: @divider-text-font-size;
+  font-variant: tabular-nums;
+  line-height: 1.5;
+  list-style: none;
+  border-block-start: 0 @divider-color;
+
+  // ============ 水平分割线 ============
+  &-horizontal {
+    display: flex;
+    align-items: center;
+    clear: both;
+    width: 100%;
+    min-width: 100%;
+    margin: 24px 0;
+
+    &::before,
+    &::after {
+      position: relative;
+      width: 50%;
+      border-block-start: 1px solid transparent;
+      border-block-start-color: inherit;
+      border-block-end: 0;
+      transform: translateY(50%);
+      content: '';
+    }
+  }
+
+  // ============ 垂直分割线 ============
+  &-vertical {
+    position: relative;
+    top: -0.06em;
+    display: inline-block;
+    height: 0.9em;
+    margin: 0 8px;
+    vertical-align: middle;
+    border-top: 0;
+    border-inline-start: 1px solid @divider-color;
+  }
+
+  // ============ 带文字的分割线 ============
+  &-with-text {
+    display: flex;
+    align-items: center;
+    margin: 16px 0;
+    color: @divider-text-color;
+    font-weight: 500;
+    font-size: @divider-text-font-size;
+    white-space: nowrap;
+    text-align: center;
+    border-block-start: 0;
+
+    &::before,
+    &::after {
+      position: relative;
+      width: 50%;
+      border-block-start: 1px solid transparent;
+      border-block-start-color: inherit;
+      border-block-end: 0;
+      transform: translateY(50%);
+      content: '';
+    }
+  }
+
+  &-with-text-left {
+    &::before {
+      width: var(--divider-text-margin-left, @divider-orientation-margin);
+    }
+    &::after {
+      width: calc(100% - var(--divider-text-margin-left, @divider-orientation-margin));
+    }
+  }
+
+  &-with-text-right {
+    &::before {
+      width: calc(100% - var(--divider-text-margin-right, @divider-orientation-margin));
+    }
+    &::after {
+      width: var(--divider-text-margin-right, @divider-orientation-margin);
+    }
+  }
+
+  &-inner-text {
+    display: inline-block;
+    padding: 0 1em;
+  }
+
+  // ============ 纯净模式 ============
+  &-plain {
+    font-weight: 400;
+    font-size: @divider-text-font-size;
+  }
+
+  // ============ 线条样式 ============
+  &-solid {
+    border-color: @divider-color;
+    
+    &.@{prefix}-vertical {
+      border-inline-start-style: solid;
+    }
+  }
+
+  &-dashed {
+    border-color: @divider-color;
+    border-style: dashed;
+    
+    &.@{prefix}-vertical {
+      border-inline-start-style: dashed;
+    }
+
+    &::before,
+    &::after {
+      border-style: dashed none none;
+    }
+  }
+
+  &-dotted {
+    border-color: @divider-color;
+    border-style: dotted;
+    
+    &.@{prefix}-vertical {
+      border-inline-start-style: dotted;
+    }
+
+    &::before,
+    &::after {
+      border-style: dotted none none;
+    }
+  }
+}
+

package/dist/esm/Dropdown/index.d.ts

@@ -0,0 +1,88 @@
+import React from 'react';
+import './style.less';
+export interface DropdownMenuItem {
+    /** 唯一标识 */
+    key: string;
+    /** 显示内容 */
+    label: React.ReactNode;
+    /** 图标 */
+    icon?: React.ReactNode;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否危险操作 */
+    danger?: boolean;
+    /** 分割线 */
+    type?: 'divider';
+    /** 子菜单 */
+    children?: DropdownMenuItem[];
+    /** 点击回调 */
+    onClick?: (e: React.MouseEvent) => void;
+}
+export interface DropdownMenuProps {
+    /** 菜单项 */
+    items: DropdownMenuItem[];
+    /** 选中的key */
+    selectedKeys?: string[];
+    /** 点击菜单项回调 */
+    onClick?: (info: {
+        key: string;
+        domEvent: React.MouseEvent;
+    }) => void;
+}
+export type DropdownPlacement = 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight';
+export type DropdownTrigger = 'hover' | 'click' | 'contextMenu';
+export interface DropdownProps {
+    /** 菜单项 */
+    menu?: DropdownMenuProps;
+    /** 自定义下拉内容 */
+    dropdownRender?: (menu: React.ReactNode) => React.ReactNode;
+    /** 触发下拉的元素 */
+    children: React.ReactNode;
+    /** 触发方式 */
+    trigger?: DropdownTrigger[];
+    /** 弹出位置 */
+    placement?: DropdownPlacement;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否显示箭头 */
+    arrow?: boolean;
+    /** 受控的显示状态 */
+    open?: boolean;
+    /** 显示状态变化回调 */
+    onOpenChange?: (open: boolean) => void;
+    /** 自定义类名 */
+    className?: string;
+    /** 下拉菜单类名 */
+    overlayClassName?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+    /** 下拉菜单样式 */
+    overlayStyle?: React.CSSProperties;
+    /** 关闭后是否销毁 */
+    destroyPopupOnHide?: boolean;
+    /** 自动调整位置 */
+    autoAdjustOverflow?: boolean;
+}
+export declare const Dropdown: React.FC<DropdownProps>;
+export interface DropdownButtonProps extends Omit<DropdownProps, 'children'> {
+    /** 按钮文字 */
+    children?: React.ReactNode;
+    /** 按钮类型 */
+    type?: 'default' | 'primary' | 'dashed' | 'text' | 'link';
+    /** 按钮大小 */
+    size?: 'small' | 'middle' | 'large';
+    /** 是否加载中 */
+    loading?: boolean;
+    /** 是否危险按钮 */
+    danger?: boolean;
+    /** 左侧按钮点击回调 */
+    onClick?: (e: React.MouseEvent) => void;
+    /** 按钮图标 */
+    icon?: React.ReactNode;
+}
+export declare const DropdownButton: React.FC<DropdownButtonProps>;
+type DropdownType = typeof Dropdown & {
+    Button: typeof DropdownButton;
+};
+declare const ExportDropdown: DropdownType;
+export default ExportDropdown;

package/dist/esm/Dropdown/index.js

@@ -0,0 +1,249 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["children", "type", "size", "loading", "danger", "onClick", "icon"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import "./style.less";
+
+// ============ Menu Item Type ============
+
+// ============ Dropdown Props ============
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+// ============ Dropdown Menu Component ============
+var DropdownMenu = function DropdownMenu(_ref) {
+  var items = _ref.items,
+    _ref$selectedKeys = _ref.selectedKeys,
+    selectedKeys = _ref$selectedKeys === void 0 ? [] : _ref$selectedKeys,
+    onClick = _ref.onClick,
+    onClose = _ref.onClose;
+  var handleItemClick = function handleItemClick(item, e) {
+    var _item$onClick;
+    if (item.disabled) return;
+    (_item$onClick = item.onClick) === null || _item$onClick === void 0 || _item$onClick.call(item, e);
+    onClick === null || onClick === void 0 || onClick({
+      key: item.key,
+      domEvent: e
+    });
+
+    // 如果没有子菜单，关闭下拉
+    if (!item.children) {
+      onClose === null || onClose === void 0 || onClose();
+    }
+  };
+  var renderMenuItem = function renderMenuItem(item) {
+    if (item.type === 'divider') {
+      return /*#__PURE__*/_jsx("div", {
+        className: "kage-dropdown-menu-divider"
+      }, item.key);
+    }
+    var isSelected = selectedKeys.includes(item.key);
+    var classNames = ['kage-dropdown-menu-item', item.disabled && 'kage-dropdown-menu-item-disabled', item.danger && 'kage-dropdown-menu-item-danger', isSelected && 'kage-dropdown-menu-item-selected'].filter(Boolean).join(' ');
+    return /*#__PURE__*/_jsxs("div", {
+      className: classNames,
+      onClick: function onClick(e) {
+        return handleItemClick(item, e);
+      },
+      children: [item.icon && /*#__PURE__*/_jsx("span", {
+        className: "kage-dropdown-menu-item-icon",
+        children: item.icon
+      }), /*#__PURE__*/_jsx("span", {
+        className: "kage-dropdown-menu-item-label",
+        children: item.label
+      }), item.children && /*#__PURE__*/_jsx("span", {
+        className: "kage-dropdown-menu-item-arrow",
+        children: "\u25B6"
+      })]
+    }, item.key);
+  };
+  return /*#__PURE__*/_jsx("div", {
+    className: "kage-dropdown-menu",
+    children: items.map(renderMenuItem)
+  });
+};
+
+// ============ Dropdown Component ============
+export var Dropdown = function Dropdown(_ref2) {
+  var menu = _ref2.menu,
+    dropdownRender = _ref2.dropdownRender,
+    children = _ref2.children,
+    _ref2$trigger = _ref2.trigger,
+    trigger = _ref2$trigger === void 0 ? ['hover'] : _ref2$trigger,
+    _ref2$placement = _ref2.placement,
+    placement = _ref2$placement === void 0 ? 'bottomLeft' : _ref2$placement,
+    _ref2$disabled = _ref2.disabled,
+    disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
+    _ref2$arrow = _ref2.arrow,
+    arrow = _ref2$arrow === void 0 ? false : _ref2$arrow,
+    controlledOpen = _ref2.open,
+    onOpenChange = _ref2.onOpenChange,
+    _ref2$className = _ref2.className,
+    className = _ref2$className === void 0 ? '' : _ref2$className,
+    _ref2$overlayClassNam = _ref2.overlayClassName,
+    overlayClassName = _ref2$overlayClassNam === void 0 ? '' : _ref2$overlayClassNam,
+    style = _ref2.style,
+    overlayStyle = _ref2.overlayStyle,
+    _ref2$destroyPopupOnH = _ref2.destroyPopupOnHide,
+    destroyPopupOnHide = _ref2$destroyPopupOnH === void 0 ? false : _ref2$destroyPopupOnH;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    internalOpen = _useState2[0],
+    setInternalOpen = _useState2[1];
+  var containerRef = useRef(null);
+  var dropdownRef = useRef(null);
+  var timeoutRef = useRef();
+  var isControlled = controlledOpen !== undefined;
+  var isOpen = isControlled ? controlledOpen : internalOpen;
+  var setOpen = useCallback(function (newOpen) {
+    if (disabled) return;
+    if (!isControlled) {
+      setInternalOpen(newOpen);
+    }
+    onOpenChange === null || onOpenChange === void 0 || onOpenChange(newOpen);
+  }, [disabled, isControlled, onOpenChange]);
+  var handleMouseEnter = useCallback(function () {
+    if (!trigger.includes('hover')) return;
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    setOpen(true);
+  }, [trigger, setOpen]);
+  var handleMouseLeave = useCallback(function () {
+    if (!trigger.includes('hover')) return;
+    timeoutRef.current = setTimeout(function () {
+      setOpen(false);
+    }, 100);
+  }, [trigger, setOpen]);
+  var handleClick = useCallback(function (e) {
+    if (!trigger.includes('click')) return;
+    e.stopPropagation();
+    setOpen(!isOpen);
+  }, [trigger, isOpen, setOpen]);
+  var handleContextMenu = useCallback(function (e) {
+    if (!trigger.includes('contextMenu')) return;
+    e.preventDefault();
+    setOpen(true);
+  }, [trigger, setOpen]);
+
+  // 点击外部关闭
+  useEffect(function () {
+    var handleClickOutside = function handleClickOutside(e) {
+      if (containerRef.current && !containerRef.current.contains(e.target) && dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+    return function () {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen, setOpen]);
+
+  // 清理定时器
+  useEffect(function () {
+    return function () {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+  var containerClassNames = ['kage-dropdown', disabled && 'kage-dropdown-disabled', className].filter(Boolean).join(' ');
+  var overlayClassNames = ['kage-dropdown-overlay', "kage-dropdown-placement-".concat(placement), arrow && 'kage-dropdown-overlay-arrow', isOpen && 'kage-dropdown-overlay-open', overlayClassName].filter(Boolean).join(' ');
+
+  // 渲染菜单内容
+  var renderMenuContent = function renderMenuContent() {
+    if (!(menu !== null && menu !== void 0 && menu.items)) return null;
+    var menuNode = /*#__PURE__*/_jsx(DropdownMenu, {
+      items: menu.items,
+      selectedKeys: menu.selectedKeys,
+      onClick: menu.onClick,
+      onClose: function onClose() {
+        return setOpen(false);
+      }
+    });
+    return dropdownRender ? dropdownRender(menuNode) : menuNode;
+  };
+  var shouldRenderOverlay = isOpen || !destroyPopupOnHide;
+  return /*#__PURE__*/_jsxs("div", {
+    ref: containerRef,
+    className: containerClassNames,
+    style: style,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "kage-dropdown-trigger",
+      onClick: handleClick,
+      onContextMenu: handleContextMenu,
+      children: children
+    }), shouldRenderOverlay && /*#__PURE__*/_jsxs("div", {
+      ref: dropdownRef,
+      className: overlayClassNames,
+      style: overlayStyle,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      children: [arrow && /*#__PURE__*/_jsx("div", {
+        className: "kage-dropdown-arrow"
+      }), renderMenuContent()]
+    })]
+  });
+};
+
+// ============ Dropdown Button ============
+
+export var DropdownButton = function DropdownButton(_ref3) {
+  var children = _ref3.children,
+    _ref3$type = _ref3.type,
+    type = _ref3$type === void 0 ? 'default' : _ref3$type,
+    _ref3$size = _ref3.size,
+    size = _ref3$size === void 0 ? 'middle' : _ref3$size,
+    _ref3$loading = _ref3.loading,
+    loading = _ref3$loading === void 0 ? false : _ref3$loading,
+    _ref3$danger = _ref3.danger,
+    danger = _ref3$danger === void 0 ? false : _ref3$danger,
+    onClick = _ref3.onClick,
+    icon = _ref3.icon,
+    dropdownProps = _objectWithoutProperties(_ref3, _excluded);
+  var buttonClassNames = ['kage-dropdown-button', "kage-dropdown-button-".concat(type), "kage-dropdown-button-".concat(size), danger && 'kage-dropdown-button-danger', loading && 'kage-dropdown-button-loading'].filter(Boolean).join(' ');
+  return /*#__PURE__*/_jsxs("div", {
+    className: "kage-dropdown-button-group",
+    children: [/*#__PURE__*/_jsxs("button", {
+      className: "".concat(buttonClassNames, " kage-dropdown-button-left"),
+      onClick: onClick,
+      disabled: loading || dropdownProps.disabled,
+      children: [loading && /*#__PURE__*/_jsx("span", {
+        className: "kage-dropdown-button-loading-icon",
+        children: "\u23F3"
+      }), icon && /*#__PURE__*/_jsx("span", {
+        className: "kage-dropdown-button-icon",
+        children: icon
+      }), children]
+    }), /*#__PURE__*/_jsx(Dropdown, _objectSpread(_objectSpread({}, dropdownProps), {}, {
+      children: /*#__PURE__*/_jsx("button", {
+        className: "".concat(buttonClassNames, " kage-dropdown-button-right"),
+        disabled: loading || dropdownProps.disabled,
+        children: /*#__PURE__*/_jsx("span", {
+          className: "kage-dropdown-button-dropdown-icon",
+          children: "\u25BC"
+        })
+      })
+    }))]
+  });
+};
+
+// 挂载子组件
+
+var ExportDropdown = Dropdown;
+ExportDropdown.Button = DropdownButton;
+export default ExportDropdown;