wssf-kage-ui 0.1.0 → 0.1.2

package/dist/cjs/Switch/style.less

@@ -0,0 +1,212 @@
+// Switch 开关组件样式
+
+@prefix: kage-switch;
+
+// 颜色变量
+@switch-height: 22px;
+@switch-width: 44px;
+@switch-small-height: 16px;
+@switch-small-width: 28px;
+@switch-bg: rgba(0, 0, 0, 0.25);
+@switch-checked-bg: #6366f1;
+@switch-disabled-opacity: 0.4;
+@switch-handle-size: 18px;
+@switch-small-handle-size: 12px;
+@switch-handle-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+
+// ============ 基础样式 ============
+.@{prefix} {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  min-width: @switch-width;
+  height: @switch-height;
+  padding: 0 5px;
+  background: @switch-bg;
+  border: none;
+  border-radius: @switch-height;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  outline: none;
+  user-select: none;
+  vertical-align: middle;
+
+  &:hover:not(.@{prefix}-disabled) {
+    background: rgba(0, 0, 0, 0.35);
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
+  }
+}
+
+// ============ 选中状态 ============
+.@{prefix}-checked {
+  background: @switch-checked-bg;
+
+  &:hover:not(.@{prefix}-disabled) {
+    background: #818cf8;
+  }
+
+  .@{prefix}-handle {
+    left: calc(100% - @switch-handle-size - 2px);
+  }
+
+  .@{prefix}-inner {
+    padding-left: 6px;
+    padding-right: 22px;
+  }
+}
+
+// ============ 内容区域 ============
+.@{prefix}-inner {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding-left: 22px;
+  padding-right: 6px;
+  color: #fff;
+  font-size: 12px;
+  line-height: 1;
+  transition: padding 0.2s ease;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+// ============ 滑块手柄 ============
+.@{prefix}-handle {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: @switch-handle-size;
+  height: @switch-handle-size;
+  background: #fff;
+  border-radius: 50%;
+  box-shadow: @switch-handle-shadow;
+  transition: all 0.2s ease;
+  pointer-events: none;
+}
+
+// ============ 禁用状态 ============
+.@{prefix}-disabled {
+  opacity: @switch-disabled-opacity;
+  cursor: not-allowed;
+
+  &:hover {
+    background: @switch-bg;
+  }
+
+  &.@{prefix}-checked:hover {
+    background: @switch-checked-bg;
+  }
+}
+
+// ============ 加载状态 ============
+.@{prefix}-loading {
+  cursor: wait;
+
+  &:hover {
+    background: @switch-bg;
+  }
+
+  &.@{prefix}-checked:hover {
+    background: @switch-checked-bg;
+  }
+}
+
+.@{prefix}-loading-icon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 10px;
+  animation: switchSpin 1s linear infinite;
+  z-index: 1;
+}
+
+@keyframes switchSpin {
+  from {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+  to {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
+}
+
+// ============ 小尺寸 ============
+.@{prefix}-small {
+  min-width: @switch-small-width;
+  height: @switch-small-height;
+  border-radius: @switch-small-height;
+  padding: 0 3px;
+
+  .@{prefix}-handle {
+    width: @switch-small-handle-size;
+    height: @switch-small-handle-size;
+  }
+
+  &.@{prefix}-checked .@{prefix}-handle {
+    left: calc(100% - @switch-small-handle-size - 2px);
+  }
+
+  .@{prefix}-inner {
+    font-size: 10px;
+    padding-left: 16px;
+    padding-right: 4px;
+  }
+
+  &.@{prefix}-checked .@{prefix}-inner {
+    padding-left: 4px;
+    padding-right: 16px;
+  }
+
+  .@{prefix}-loading-icon {
+    font-size: 8px;
+  }
+}
+
+// ============ 暗色模式适配 ============
+[data-theme='dark'],
+[data-prefers-color-scheme='dark'],
+[data-prefers-color='dark'] {
+  .@{prefix} {
+    background: rgba(255, 255, 255, 0.25);
+
+    &:hover:not(.@{prefix}-disabled) {
+      background: rgba(255, 255, 255, 0.35);
+    }
+
+    &:focus-visible {
+      box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.3);
+    }
+  }
+
+  .@{prefix}-checked {
+    background: #6366f1;
+
+    &:hover:not(.@{prefix}-disabled) {
+      background: #818cf8;
+    }
+  }
+
+  .@{prefix}-disabled {
+    &:hover {
+      background: rgba(255, 255, 255, 0.25);
+    }
+
+    &.@{prefix}-checked:hover {
+      background: #6366f1;
+    }
+  }
+
+  .@{prefix}-loading {
+    &:hover {
+      background: rgba(255, 255, 255, 0.25);
+    }
+
+    &.@{prefix}-checked:hover {
+      background: #6366f1;
+    }
+  }
+}
+

package/dist/cjs/Table/index.d.ts

@@ -0,0 +1,188 @@
+import React, { ReactNode, CSSProperties } from 'react';
+import './style.less';
+/** 排序方向 */
+export type SortOrder = 'ascend' | 'descend' | null;
+/** 列对齐方式 */
+export type AlignType = 'left' | 'center' | 'right';
+/** 表格尺寸 */
+export type TableSize = 'default' | 'middle' | 'small';
+/** 筛选项 */
+export interface FilterItem {
+    text: string;
+    value: string | number | boolean;
+}
+/** 列定义 */
+export interface ColumnType<T = any> {
+    /** 列标题 */
+    title: ReactNode;
+    /** 列数据的字段名 */
+    dataIndex?: string;
+    /** React key，默认使用 dataIndex */
+    key?: string;
+    /** 列宽度 */
+    width?: number | string;
+    /** 最小列宽度 */
+    minWidth?: number;
+    /** 对齐方式 */
+    align?: AlignType;
+    /** 是否固定列 */
+    fixed?: 'left' | 'right';
+    /** 是否可排序 */
+    sorter?: boolean | ((a: T, b: T) => number);
+    /** 默认排序顺序 */
+    defaultSortOrder?: SortOrder;
+    /** 排序顺序 (受控) */
+    sortOrder?: SortOrder;
+    /** 筛选菜单项 */
+    filters?: FilterItem[];
+    /** 筛选方法 */
+    onFilter?: (value: string | number | boolean, record: T) => boolean;
+    /** 默认筛选值 */
+    defaultFilteredValue?: (string | number | boolean)[];
+    /** 筛选值 (受控) */
+    filteredValue?: (string | number | boolean)[];
+    /** 自定义渲染函数 */
+    render?: (value: any, record: T, index: number) => ReactNode;
+    /** 文字省略 */
+    ellipsis?: boolean;
+    /** 自定义类名 */
+    className?: string;
+    /** 单元格的样式 */
+    onCell?: (record: T, index: number) => CSSProperties;
+    /** 表头单元格的样式 */
+    onHeaderCell?: () => CSSProperties;
+    /** 子列 */
+    children?: ColumnType<T>[];
+}
+/** 行选择配置 */
+export interface RowSelection<T = any> {
+    /** 选择类型 */
+    type?: 'checkbox' | 'radio';
+    /** 选中项的 key 数组 */
+    selectedRowKeys?: React.Key[];
+    /** 选中项发生变化时的回调 */
+    onChange?: (selectedRowKeys: React.Key[], selectedRows: T[]) => void;
+    /** 用户手动选择/取消选择某行的回调 */
+    onSelect?: (record: T, selected: boolean, selectedRows: T[], nativeEvent: Event) => void;
+    /** 用户手动选择/取消选择所有行的回调 */
+    onSelectAll?: (selected: boolean, selectedRows: T[], changeRows: T[]) => void;
+    /** 行是否可选择 */
+    getCheckboxProps?: (record: T) => {
+        disabled?: boolean;
+        name?: string;
+    };
+    /** 固定选择列 */
+    fixed?: boolean;
+    /** 选择列的宽度 */
+    columnWidth?: number | string;
+    /** 选择列的标题 */
+    columnTitle?: ReactNode;
+    /** 自定义渲染勾选框 */
+    renderCell?: (checked: boolean, record: T, index: number, originNode: ReactNode) => ReactNode;
+    /** 隐藏全选按钮 */
+    hideSelectAll?: boolean;
+}
+/** 分页配置 */
+export interface TablePagination {
+    /** 当前页码 */
+    current?: number;
+    /** 每页条数 */
+    pageSize?: number;
+    /** 数据总数 */
+    total?: number;
+    /** 每页条数选项 */
+    pageSizeOptions?: number[];
+    /** 是否显示每页条数选择器 */
+    showSizeChanger?: boolean;
+    /** 是否显示快速跳转 */
+    showQuickJumper?: boolean;
+    /** 是否显示总数 */
+    showTotal?: (total: number, range: [number, number]) => ReactNode;
+    /** 分页位置 */
+    position?: 'topLeft' | 'topCenter' | 'topRight' | 'bottomLeft' | 'bottomCenter' | 'bottomRight';
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 简洁模式 */
+    simple?: boolean;
+}
+/** 表格属性 */
+export interface TableProps<T = any> {
+    /** 列配置 */
+    columns: ColumnType<T>[];
+    /** 数据数组 */
+    dataSource: T[];
+    /** 表格行 key 的取值 */
+    rowKey?: string | ((record: T) => React.Key);
+    /** 是否显示表头 */
+    showHeader?: boolean;
+    /** 是否显示边框 */
+    bordered?: boolean;
+    /** 表格大小 */
+    size?: TableSize;
+    /** 是否加载中 */
+    loading?: boolean;
+    /** 加载文案 */
+    loadingText?: string;
+    /** 空状态时的显示内容 */
+    locale?: {
+        emptyText?: ReactNode;
+    };
+    /** 分页配置，false 禁用分页 */
+    pagination?: TablePagination | false;
+    /** 行选择配置 */
+    rowSelection?: RowSelection<T>;
+    /** 行的类名 */
+    rowClassName?: string | ((record: T, index: number) => string);
+    /** 设置行属性 */
+    onRow?: (record: T, index: number) => React.HTMLAttributes<HTMLTableRowElement>;
+    /** 表格标题 */
+    title?: () => ReactNode;
+    /** 表格尾部 */
+    footer?: () => ReactNode;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: CSSProperties;
+    /** 表格滚动配置 */
+    scroll?: {
+        x?: number | string | true;
+        y?: number | string;
+    };
+    /** 排序变化的回调 */
+    onChange?: (pagination: {
+        current: number;
+        pageSize: number;
+    }, filters: Record<string, (string | number | boolean)[] | null>, sorter: {
+        column?: ColumnType<T>;
+        order?: SortOrder;
+        field?: string;
+    }) => void;
+    /** 展开行配置 */
+    expandable?: {
+        expandedRowRender?: (record: T, index: number, indent: number, expanded: boolean) => ReactNode;
+        rowExpandable?: (record: T) => boolean;
+        expandedRowKeys?: React.Key[];
+        defaultExpandedRowKeys?: React.Key[];
+        onExpand?: (expanded: boolean, record: T) => void;
+        onExpandedRowsChange?: (expandedKeys: React.Key[]) => void;
+        expandIcon?: (props: {
+            expanded: boolean;
+            record: T;
+            onExpand: () => void;
+        }) => ReactNode;
+        expandRowByClick?: boolean;
+        indentSize?: number;
+        showExpandColumn?: boolean;
+    };
+    /** 是否显示斑马纹 */
+    striped?: boolean;
+    /** 悬浮行高亮 */
+    hoverable?: boolean;
+    /** 粘性头部 */
+    sticky?: boolean;
+    /** 摘要 */
+    summary?: (data: readonly T[]) => ReactNode;
+}
+export declare const Table: <T extends Record<string, any> = any>({ columns, dataSource, rowKey, showHeader, bordered, size, loading, loadingText, locale, pagination, rowSelection, rowClassName, onRow, title, footer, className, style, scroll, onChange, expandable, striped, hoverable, sticky, summary, }: TableProps<T>) => import("react/jsx-runtime").JSX.Element;
+export type { ColumnType as TableColumnType };
+export default Table;