wssf-kage-ui 0.1.0 → 0.1.1

package/dist/esm/AutoComplete/style.less

@@ -0,0 +1,325 @@
+// AutoComplete 自动完成组件样式
+
+@prefix: kage-autocomplete;
+
+// 颜色变量
+@input-bg: #fff;
+@input-border: #d9d9d9;
+@input-border-hover: #6366f1;
+@input-border-focus: #6366f1;
+@input-text-color: rgba(0, 0, 0, 0.88);
+@input-placeholder-color: rgba(0, 0, 0, 0.25);
+@input-disabled-bg: #f5f5f5;
+@input-disabled-color: rgba(0, 0, 0, 0.25);
+@dropdown-bg: #fff;
+@dropdown-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12);
+@option-hover-bg: #f5f5f5;
+@option-selected-bg: #e6f4ff;
+@option-active-bg: #f5f5f5;
+@option-disabled-color: rgba(0, 0, 0, 0.25);
+@primary-color: #6366f1;
+@error-color: #ff4d4f;
+@warning-color: #faad14;
+
+// ============ 基础样式 ============
+.@{prefix} {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  font-size: 14px;
+
+  * {
+    box-sizing: border-box;
+  }
+}
+
+// ============ 选择器容器 ============
+.@{prefix}-selector {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+// ============ 输入框 ============
+.@{prefix}-input {
+  width: 100%;
+  padding: 8px 12px;
+  font-size: 14px;
+  line-height: 1.5;
+  color: @input-text-color;
+  background: @input-bg;
+  border: 1px solid @input-border;
+  border-radius: 6px;
+  outline: none;
+  transition: all 0.2s ease;
+
+  &::placeholder {
+    color: @input-placeholder-color;
+  }
+
+  &:hover:not(:disabled) {
+    border-color: @input-border-hover;
+  }
+
+  &:focus {
+    border-color: @input-border-focus;
+    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
+  }
+}
+
+// ============ 清除按钮 ============
+.@{prefix}-clear {
+  position: absolute;
+  right: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.25);
+  cursor: pointer;
+  border-radius: 50%;
+  transition: all 0.2s ease;
+
+  &:hover {
+    color: rgba(0, 0, 0, 0.45);
+    background: rgba(0, 0, 0, 0.06);
+  }
+}
+
+// ============ 下拉菜单 ============
+.@{prefix}-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: 1050;
+  margin-top: 4px;
+  padding: 4px;
+  max-height: 256px;
+  overflow-y: auto;
+  background: @dropdown-bg;
+  border-radius: 8px;
+  box-shadow: @dropdown-shadow;
+  animation: slideDown 0.2s ease;
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+// ============ 选项 ============
+.@{prefix}-option {
+  padding: 8px 12px;
+  font-size: 14px;
+  line-height: 1.5;
+  color: @input-text-color;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: background 0.2s ease;
+
+  &:hover {
+    background: @option-hover-bg;
+  }
+
+  &-active {
+    background: @option-active-bg;
+  }
+
+  &-selected {
+    background: @option-selected-bg;
+    font-weight: 500;
+    color: @primary-color;
+  }
+
+  &-disabled {
+    color: @option-disabled-color;
+    cursor: not-allowed;
+
+    &:hover {
+      background: transparent;
+    }
+  }
+}
+
+// ============ 空状态 ============
+.@{prefix}-empty {
+  padding: 16px;
+  text-align: center;
+  color: rgba(0, 0, 0, 0.25);
+}
+
+// ============ 禁用状态 ============
+.@{prefix}-disabled {
+  .@{prefix}-input {
+    background: @input-disabled-bg;
+    color: @input-disabled-color;
+    cursor: not-allowed;
+
+    &:hover {
+      border-color: @input-border;
+    }
+  }
+}
+
+// ============ 状态样式 ============
+.@{prefix}-status-error {
+  .@{prefix}-input {
+    border-color: @error-color;
+
+    &:hover,
+    &:focus {
+      border-color: @error-color;
+    }
+
+    &:focus {
+      box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.1);
+    }
+  }
+}
+
+.@{prefix}-status-warning {
+  .@{prefix}-input {
+    border-color: @warning-color;
+
+    &:hover,
+    &:focus {
+      border-color: @warning-color;
+    }
+
+    &:focus {
+      box-shadow: 0 0 0 2px rgba(250, 173, 20, 0.1);
+    }
+  }
+}
+
+// ============ 尺寸 ============
+.@{prefix}-large {
+  .@{prefix}-input {
+    padding: 10px 14px;
+    font-size: 16px;
+  }
+
+  .@{prefix}-clear {
+    right: 14px;
+  }
+}
+
+.@{prefix}-small {
+  .@{prefix}-input {
+    padding: 4px 8px;
+    font-size: 12px;
+  }
+
+  .@{prefix}-clear {
+    right: 8px;
+  }
+
+  .@{prefix}-option {
+    padding: 4px 8px;
+    font-size: 12px;
+  }
+}
+
+// ============ 暗色模式适配 ============
+[data-theme='dark'],
+[data-prefers-color-scheme='dark'],
+[data-prefers-color='dark'] {
+  .@{prefix}-input {
+    background: #1f1f1f;
+    border-color: #424242;
+    color: rgba(255, 255, 255, 0.85);
+
+    &::placeholder {
+      color: rgba(255, 255, 255, 0.25);
+    }
+
+    &:hover:not(:disabled) {
+      border-color: #818cf8;
+    }
+
+    &:focus {
+      border-color: #818cf8;
+      box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.2);
+    }
+  }
+
+  .@{prefix}-clear {
+    color: rgba(255, 255, 255, 0.25);
+
+    &:hover {
+      color: rgba(255, 255, 255, 0.45);
+      background: rgba(255, 255, 255, 0.08);
+    }
+  }
+
+  .@{prefix}-dropdown {
+    background: #1f1f1f;
+    box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.3);
+  }
+
+  .@{prefix}-option {
+    color: rgba(255, 255, 255, 0.85);
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.08);
+    }
+
+    &-active {
+      background: rgba(255, 255, 255, 0.08);
+    }
+
+    &-selected {
+      background: rgba(99, 102, 241, 0.2);
+      color: #818cf8;
+    }
+
+    &-disabled {
+      color: rgba(255, 255, 255, 0.25);
+    }
+  }
+
+  .@{prefix}-empty {
+    color: rgba(255, 255, 255, 0.25);
+  }
+
+  .@{prefix}-disabled {
+    .@{prefix}-input {
+      background: #2d2d2d;
+      color: rgba(255, 255, 255, 0.25);
+
+      &:hover {
+        border-color: #424242;
+      }
+    }
+  }
+
+  .@{prefix}-status-error {
+    .@{prefix}-input {
+      border-color: #ff7875;
+
+      &:focus {
+        box-shadow: 0 0 0 2px rgba(255, 120, 117, 0.2);
+      }
+    }
+  }
+
+  .@{prefix}-status-warning {
+    .@{prefix}-input {
+      border-color: #ffc53d;
+
+      &:focus {
+        box-shadow: 0 0 0 2px rgba(255, 197, 61, 0.2);
+      }
+    }
+  }
+}
+

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import './style.less';
+export interface BreadcrumbItemType {
+    /** 唯一标识 */
+    key?: string;
+    /** 链接地址 */
+    href?: string;
+    /** 显示文字 */
+    title: React.ReactNode;
+    /** 图标 */
+    icon?: React.ReactNode;
+    /** 点击回调 */
+    onClick?: (e: React.MouseEvent) => void;
+    /** 下拉菜单项 */
+    menu?: {
+        items: {
+            key: string;
+            title: React.ReactNode;
+            href?: string;
+            onClick?: () => void;
+        }[];
+    };
+    /** 自定义类名 */
+    className?: string;
+}
+export interface BreadcrumbItemProps extends BreadcrumbItemType {
+    /** 子元素 */
+    children?: React.ReactNode;
+}
+export declare const BreadcrumbItem: React.FC<BreadcrumbItemProps>;
+export interface BreadcrumbSeparatorProps {
+    children?: React.ReactNode;
+}
+export declare const BreadcrumbSeparator: React.FC<BreadcrumbSeparatorProps>;
+export interface BreadcrumbProps {
+    /** 面包屑配置项 */
+    items?: BreadcrumbItemType[];
+    /** 分隔符 */
+    separator?: React.ReactNode;
+    /** 子元素 */
+    children?: React.ReactNode;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+}
+export declare const Breadcrumb: React.FC<BreadcrumbProps> & {
+    Item: typeof BreadcrumbItem;
+    Separator: typeof BreadcrumbSeparator;
+};
+export default Breadcrumb;

package/dist/esm/Breadcrumb/index.js

@@ -0,0 +1,124 @@
+import React from 'react';
+import "./style.less";
+
+// ============ Breadcrumb Item ============
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var BreadcrumbItem = function BreadcrumbItem(_ref) {
+  var href = _ref.href,
+    title = _ref.title,
+    icon = _ref.icon,
+    onClick = _ref.onClick,
+    children = _ref.children,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className;
+  var content = children || /*#__PURE__*/_jsxs(_Fragment, {
+    children: [icon && /*#__PURE__*/_jsx("span", {
+      className: "kage-breadcrumb-icon",
+      children: icon
+    }), title]
+  });
+  var handleClick = function handleClick(e) {
+    onClick === null || onClick === void 0 || onClick(e);
+  };
+  if (href) {
+    return /*#__PURE__*/_jsx("a", {
+      href: href,
+      className: "kage-breadcrumb-link ".concat(className),
+      onClick: handleClick,
+      children: content
+    });
+  }
+  return /*#__PURE__*/_jsx("span", {
+    className: "kage-breadcrumb-link ".concat(className),
+    onClick: handleClick,
+    children: content
+  });
+};
+BreadcrumbItem.displayName = 'BreadcrumbItem';
+
+// ============ Breadcrumb Separator ============
+
+export var BreadcrumbSeparator = function BreadcrumbSeparator(_ref2) {
+  var _ref2$children = _ref2.children,
+    children = _ref2$children === void 0 ? '/' : _ref2$children;
+  return /*#__PURE__*/_jsx("span", {
+    className: "kage-breadcrumb-separator",
+    children: children
+  });
+};
+BreadcrumbSeparator.displayName = 'BreadcrumbSeparator';
+
+// ============ Breadcrumb ============
+
+export var Breadcrumb = function Breadcrumb(_ref3) {
+  var items = _ref3.items,
+    _ref3$separator = _ref3.separator,
+    separator = _ref3$separator === void 0 ? '/' : _ref3$separator,
+    children = _ref3.children,
+    _ref3$className = _ref3.className,
+    className = _ref3$className === void 0 ? '' : _ref3$className,
+    style = _ref3.style;
+  var classNames = ['kage-breadcrumb', className].filter(Boolean).join(' ');
+
+  // 如果有 items 配置，使用配置渲染
+  if (items && items.length > 0) {
+    return /*#__PURE__*/_jsx("nav", {
+      className: classNames,
+      style: style,
+      "aria-label": "breadcrumb",
+      children: /*#__PURE__*/_jsx("ol", {
+        className: "kage-breadcrumb-list",
+        children: items.map(function (item, index) {
+          var isLast = index === items.length - 1;
+          var key = item.key || index;
+          return /*#__PURE__*/_jsxs("li", {
+            className: "kage-breadcrumb-item",
+            children: [/*#__PURE__*/_jsx(BreadcrumbItem, {
+              href: isLast ? undefined : item.href,
+              title: item.title,
+              icon: item.icon,
+              onClick: item.onClick,
+              className: isLast ? 'kage-breadcrumb-link-current' : ''
+            }), !isLast && /*#__PURE__*/_jsx(BreadcrumbSeparator, {
+              children: separator
+            })]
+          }, key);
+        })
+      })
+    });
+  }
+
+  // 使用 children 渲染
+  var childArray = React.Children.toArray(children);
+  return /*#__PURE__*/_jsx("nav", {
+    className: classNames,
+    style: style,
+    "aria-label": "breadcrumb",
+    children: /*#__PURE__*/_jsx("ol", {
+      className: "kage-breadcrumb-list",
+      children: childArray.map(function (child, index) {
+        var _child$type;
+        var isLast = index === childArray.length - 1;
+
+        // 如果是 Separator，直接渲染
+        if ( /*#__PURE__*/React.isValidElement(child) && ((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) === 'BreadcrumbSeparator') {
+          return child;
+        }
+        return /*#__PURE__*/_jsxs("li", {
+          className: "kage-breadcrumb-item",
+          children: [/*#__PURE__*/React.isValidElement(child) ? /*#__PURE__*/React.cloneElement(child, {
+            className: "".concat(child.props.className || '', " ").concat(isLast ? 'kage-breadcrumb-link-current' : '').trim()
+          }) : child, !isLast && /*#__PURE__*/_jsx(BreadcrumbSeparator, {
+            children: separator
+          })]
+        }, index);
+      })
+    })
+  });
+};
+Breadcrumb.Item = BreadcrumbItem;
+Breadcrumb.Separator = BreadcrumbSeparator;
+Breadcrumb.displayName = 'Breadcrumb';
+export default Breadcrumb;

package/dist/esm/Breadcrumb/style.less

@@ -0,0 +1,96 @@
+// Breadcrumb 面包屑组件样式
+
+@prefix: kage-breadcrumb;
+
+// ============ 浅色模式（默认） ============
+.@{prefix} {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-size: 14px;
+  line-height: 1.5;
+  color: rgba(0, 0, 0, 0.45);
+}
+
+.@{prefix}-list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.@{prefix}-item {
+  display: inline-flex;
+  align-items: center;
+}
+
+.@{prefix}-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: rgba(0, 0, 0, 0.88);
+  text-decoration: none;
+  cursor: pointer;
+  transition: color 0.2s ease;
+
+  &:hover {
+    color: #6366f1;
+  }
+
+  &-current {
+    color: rgba(0, 0, 0, 0.88);
+    cursor: default;
+    font-weight: 500;
+
+    &:hover {
+      color: rgba(0, 0, 0, 0.88);
+    }
+  }
+}
+
+.@{prefix}-icon {
+  display: inline-flex;
+  align-items: center;
+  font-size: 14px;
+}
+
+.@{prefix}-separator {
+  margin: 0 8px;
+  color: rgba(0, 0, 0, 0.45);
+  user-select: none;
+}
+
+// ============ 暗色模式适配 ============
+// 仅通过 dumi 主题选择器，不使用 prefers-color-scheme
+// 这样可以避免系统暗色+dumi浅色主题时的冲突
+
+[data-theme='dark'],
+[data-prefers-color-scheme='dark'],
+[data-prefers-color='dark'] {
+  .@{prefix} {
+    color: rgba(255, 255, 255, 0.45);
+  }
+
+  .@{prefix}-link {
+    color: rgba(255, 255, 255, 0.65);
+
+    &:hover {
+      color: #818cf8;
+    }
+
+    &-current {
+      color: rgba(255, 255, 255, 0.85);
+
+      &:hover {
+        color: rgba(255, 255, 255, 0.85);
+      }
+    }
+  }
+
+  .@{prefix}-separator {
+    color: rgba(255, 255, 255, 0.3);
+  }
+}
+

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

@@ -0,0 +1,53 @@
+import React from 'react';
+import './style.less';
+export interface CascaderOption {
+    /** 选项值 */
+    value: string | number;
+    /** 显示文本 */
+    label: React.ReactNode;
+    /** 子选项 */
+    children?: CascaderOption[];
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否为叶子节点 */
+    isLeaf?: boolean;
+}
+export type CascaderValueType = (string | number)[];
+export interface CascaderProps {
+    /** 选项数据 */
+    options: CascaderOption[];
+    /** 当前值 */
+    value?: CascaderValueType;
+    /** 默认值 */
+    defaultValue?: CascaderValueType;
+    /** 占位符 */
+    placeholder?: string;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 允许清除 */
+    allowClear?: boolean;
+    /** 尺寸 */
+    size?: 'large' | 'middle' | 'small';
+    /** 展开触发方式 */
+    expandTrigger?: 'click' | 'hover';
+    /** 选择即改变（选中即触发，不需选到最后一级） */
+    changeOnSelect?: boolean;
+    /** 是否显示搜索框 */
+    showSearch?: boolean;
+    /** 自定义显示函数 */
+    displayRender?: (labels: React.ReactNode[], selectedOptions?: CascaderOption[]) => React.ReactNode;
+    /** 值改变回调 */
+    onChange?: (value: CascaderValueType, selectedOptions?: CascaderOption[]) => void;
+    /** 下拉菜单打开/关闭回调 */
+    onDropdownVisibleChange?: (open: boolean) => void;
+    /** 无匹配时的内容 */
+    notFoundContent?: React.ReactNode;
+    /** 状态 */
+    status?: 'error' | 'warning';
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+}
+export declare const Cascader: React.FC<CascaderProps>;
+export default Cascader;