wssf-kage-ui 0.1.1 → 0.1.2

package/dist/cjs/Statistic/style.less

@@ -0,0 +1,94 @@
+@prefix: kage-statistic;
+
+// 颜色变量
+@text-color: rgba(0, 0, 0, 0.88);
+@text-color-secondary: rgba(0, 0, 0, 0.65);
+@primary-color: #1890ff;
+
+.@{prefix} {
+  display: flex;
+  flex-direction: column;
+
+  &-title {
+    margin-bottom: 4px;
+    color: @text-color-secondary;
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  &-skeleton {
+    padding: 8px 0;
+  }
+
+  &-skeleton-line {
+    width: 120px;
+    height: 24px;
+    background: linear-gradient(
+      90deg,
+      rgba(0, 0, 0, 0.06) 25%,
+      rgba(0, 0, 0, 0.15) 37%,
+      rgba(0, 0, 0, 0.06) 63%
+    );
+    background-size: 400% 100%;
+    border-radius: 4px;
+    animation: skeleton-loading 1.4s ease infinite;
+  }
+
+  &-content {
+    display: flex;
+    align-items: baseline;
+    font-size: 24px;
+    line-height: 32px;
+    color: @text-color;
+    font-variant-numeric: tabular-nums;
+  }
+
+  &-content-prefix {
+    margin-right: 4px;
+    font-size: 14px;
+  }
+
+  &-content-value {
+    font-weight: 600;
+  }
+
+  &-content-suffix {
+    margin-left: 4px;
+    font-size: 14px;
+  }
+}
+
+@keyframes skeleton-loading {
+  0% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0 50%;
+  }
+}
+
+// ========== 深色模式 ==========
+[data-theme='dark'],
+[data-prefers-color-scheme='dark'],
+[data-prefers-color='dark'] {
+  .@{prefix} {
+    &-title {
+      color: rgba(255, 255, 255, 0.65);
+    }
+
+    &-content {
+      color: rgba(255, 255, 255, 0.88);
+    }
+
+    &-skeleton-line {
+      background: linear-gradient(
+        90deg,
+        rgba(255, 255, 255, 0.06) 25%,
+        rgba(255, 255, 255, 0.15) 37%,
+        rgba(255, 255, 255, 0.06) 63%
+      );
+      background-size: 400% 100%;
+    }
+  }
+}
+

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import './style.less';
+export interface SwitchProps {
+    /** 是否选中 */
+    checked?: boolean;
+    /** 默认是否选中 */
+    defaultChecked?: boolean;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否加载中 */
+    loading?: boolean;
+    /** 尺寸 */
+    size?: 'default' | 'small';
+    /** 选中时的内容 */
+    checkedChildren?: React.ReactNode;
+    /** 非选中时的内容 */
+    unCheckedChildren?: React.ReactNode;
+    /** 变化时的回调 */
+    onChange?: (checked: boolean, event: React.MouseEvent<HTMLButtonElement>) => void;
+    /** 点击回调 */
+    onClick?: (checked: boolean, event: React.MouseEvent<HTMLButtonElement>) => void;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+}
+export declare const Switch: React.FC<SwitchProps>;
+export default Switch;

package/dist/cjs/Switch/index.js

@@ -0,0 +1,71 @@
+"use strict";
+
+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); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Switch = void 0;
+var _react = _interopRequireWildcard(require("react"));
+require("./style.less");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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; }
+var Switch = exports.Switch = function Switch(_ref) {
+  var controlledChecked = _ref.checked,
+    _ref$defaultChecked = _ref.defaultChecked,
+    defaultChecked = _ref$defaultChecked === void 0 ? false : _ref$defaultChecked,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'default' : _ref$size,
+    checkedChildren = _ref.checkedChildren,
+    unCheckedChildren = _ref.unCheckedChildren,
+    onChange = _ref.onChange,
+    onClick = _ref.onClick,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    style = _ref.style;
+  var _useState = (0, _react.useState)(defaultChecked),
+    _useState2 = _slicedToArray(_useState, 2),
+    internalChecked = _useState2[0],
+    setInternalChecked = _useState2[1];
+  var checked = controlledChecked !== undefined ? controlledChecked : internalChecked;
+  var isDisabled = disabled || loading;
+  var handleClick = (0, _react.useCallback)(function (e) {
+    if (isDisabled) return;
+    var newChecked = !checked;
+    if (controlledChecked === undefined) {
+      setInternalChecked(newChecked);
+    }
+    onChange === null || onChange === void 0 || onChange(newChecked, e);
+    onClick === null || onClick === void 0 || onClick(newChecked, e);
+  }, [isDisabled, checked, controlledChecked, onChange, onClick]);
+  var classNames = ['kage-switch', checked && 'kage-switch-checked', isDisabled && 'kage-switch-disabled', loading && 'kage-switch-loading', "kage-switch-".concat(size), className].filter(Boolean).join(' ');
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+    type: "button",
+    role: "switch",
+    "aria-checked": checked,
+    disabled: isDisabled,
+    className: classNames,
+    style: style,
+    onClick: handleClick,
+    children: [loading && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "kage-switch-loading-icon",
+      children: "\u23F3"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "kage-switch-inner",
+      children: checked ? checkedChildren : unCheckedChildren
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "kage-switch-handle"
+    })]
+  });
+};
+var _default = exports.default = Switch;

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;