wssf-kage-ui 0.1.0 → 0.1.2

package/dist/esm/Statistic/index.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import "./style.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var formatValue = function formatValue(value, precision) {
+  if (value === undefined || value === null) {
+    return '-';
+  }
+  var numValue = typeof value === 'string' ? parseFloat(value) : value;
+  if (isNaN(numValue)) {
+    return String(value);
+  }
+  if (precision !== undefined) {
+    return numValue.toFixed(precision);
+  }
+  return String(value);
+};
+export var Statistic = function Statistic(_ref) {
+  var value = _ref.value,
+    title = _ref.title,
+    prefix = _ref.prefix,
+    suffix = _ref.suffix,
+    precision = _ref.precision,
+    valueStyle = _ref.valueStyle,
+    formatter = _ref.formatter,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    className = _ref.className,
+    style = _ref.style;
+  var prefixCls = 'kage-statistic';
+  var renderValue = function renderValue() {
+    if (loading) {
+      return /*#__PURE__*/_jsx("div", {
+        className: "".concat(prefixCls, "-skeleton"),
+        children: /*#__PURE__*/_jsx("div", {
+          className: "".concat(prefixCls, "-skeleton-line")
+        })
+      });
+    }
+    var formattedValue = formatter ? formatter(value) : formatValue(value, precision);
+    return /*#__PURE__*/_jsxs("div", {
+      className: "".concat(prefixCls, "-content"),
+      children: [prefix && /*#__PURE__*/_jsx("span", {
+        className: "".concat(prefixCls, "-content-prefix"),
+        children: prefix
+      }), /*#__PURE__*/_jsx("span", {
+        className: "".concat(prefixCls, "-content-value"),
+        style: valueStyle,
+        children: formattedValue
+      }), suffix && /*#__PURE__*/_jsx("span", {
+        className: "".concat(prefixCls, "-content-suffix"),
+        children: suffix
+      })]
+    });
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    className: "".concat(prefixCls, " ").concat(className || ''),
+    style: style,
+    children: [title && /*#__PURE__*/_jsx("div", {
+      className: "".concat(prefixCls, "-title"),
+      children: title
+    }), renderValue()]
+  });
+};
+export default Statistic;

package/dist/esm/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/esm/Steps/index.d.ts

@@ -0,0 +1,58 @@
+import React from 'react';
+import './style.less';
+export type StepStatus = 'wait' | 'process' | 'finish' | 'error';
+export interface StepItem {
+    /** 标题 */
+    title: React.ReactNode;
+    /** 描述 */
+    description?: React.ReactNode;
+    /** 子标题 */
+    subTitle?: React.ReactNode;
+    /** 图标 */
+    icon?: React.ReactNode;
+    /** 状态 */
+    status?: StepStatus;
+    /** 是否禁用 */
+    disabled?: boolean;
+}
+export interface StepsProps {
+    /** 步骤项 */
+    items: StepItem[];
+    /** 当前步骤 */
+    current?: number;
+    /** 方向 */
+    direction?: 'horizontal' | 'vertical';
+    /** 类型 */
+    type?: 'default' | 'navigation' | 'inline';
+    /** 尺寸 */
+    size?: 'default' | 'small';
+    /** 点状步骤条 */
+    progressDot?: boolean | ((dot: React.ReactNode, info: {
+        index: number;
+        status: StepStatus;
+    }) => React.ReactNode);
+    /** 标签位置 */
+    labelPlacement?: 'horizontal' | 'vertical';
+    /** 起始序号 */
+    initial?: number;
+    /** 全局状态 */
+    status?: StepStatus;
+    /** 点击回调 */
+    onChange?: (current: number) => void;
+    /** 是否可点击 */
+    clickable?: boolean;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+}
+export declare const Steps: React.FC<StepsProps>;
+export interface StepComponentProps extends StepItem {
+    children?: React.ReactNode;
+}
+export declare const StepComponent: React.FC<StepComponentProps>;
+type StepsType = typeof Steps & {
+    Step: typeof StepComponent;
+};
+declare const ExportSteps: StepsType;
+export default ExportSteps;

package/dist/esm/Steps/index.js

@@ -0,0 +1,174 @@
+import React from 'react';
+import "./style.less";
+
+// ============ Step Item Type ============
+
+// ============ Steps Props ============
+
+// ============ Step Component ============
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Step = function Step(_ref) {
+  var item = _ref.item,
+    index = _ref.index,
+    status = _ref.status,
+    isLast = _ref.isLast,
+    direction = _ref.direction,
+    size = _ref.size,
+    progressDot = _ref.progressDot,
+    labelPlacement = _ref.labelPlacement,
+    clickable = _ref.clickable,
+    onClick = _ref.onClick;
+  var title = item.title,
+    description = item.description,
+    subTitle = item.subTitle,
+    icon = item.icon,
+    disabled = item.disabled;
+  var handleClick = function handleClick() {
+    if (clickable && !disabled && onClick) {
+      onClick();
+    }
+  };
+  var classNames = ['kage-steps-item', "kage-steps-item-".concat(status), isLast && 'kage-steps-item-last', disabled && 'kage-steps-item-disabled', clickable && !disabled && 'kage-steps-item-clickable'].filter(Boolean).join(' ');
+
+  // 渲染图标
+  var renderIcon = function renderIcon() {
+    // 自定义图标
+    if (icon) {
+      return /*#__PURE__*/_jsx("span", {
+        className: "kage-steps-icon-custom",
+        children: icon
+      });
+    }
+
+    // 点状
+    if (progressDot) {
+      var _dot = /*#__PURE__*/_jsx("span", {
+        className: "kage-steps-dot"
+      });
+      if (typeof progressDot === 'function') {
+        return progressDot(_dot, {
+          index: index,
+          status: status
+        });
+      }
+      return _dot;
+    }
+
+    // 默认图标
+    if (status === 'finish') {
+      return /*#__PURE__*/_jsx("span", {
+        className: "kage-steps-icon-check",
+        children: "\u2713"
+      });
+    }
+    if (status === 'error') {
+      return /*#__PURE__*/_jsx("span", {
+        className: "kage-steps-icon-error",
+        children: "\u2715"
+      });
+    }
+    return /*#__PURE__*/_jsx("span", {
+      className: "kage-steps-icon-number",
+      children: index + 1
+    });
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    className: classNames,
+    onClick: handleClick,
+    children: [!isLast && /*#__PURE__*/_jsx("div", {
+      className: "kage-steps-item-tail"
+    }), /*#__PURE__*/_jsx("div", {
+      className: "kage-steps-item-icon",
+      children: renderIcon()
+    }), /*#__PURE__*/_jsxs("div", {
+      className: "kage-steps-item-content",
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: "kage-steps-item-title",
+        children: [title, subTitle && /*#__PURE__*/_jsx("span", {
+          className: "kage-steps-item-subtitle",
+          children: subTitle
+        })]
+      }), description && /*#__PURE__*/_jsx("div", {
+        className: "kage-steps-item-description",
+        children: description
+      })]
+    })]
+  });
+};
+
+// ============ Steps Component ============
+export var Steps = function Steps(_ref2) {
+  var items = _ref2.items,
+    _ref2$current = _ref2.current,
+    current = _ref2$current === void 0 ? 0 : _ref2$current,
+    _ref2$direction = _ref2.direction,
+    direction = _ref2$direction === void 0 ? 'horizontal' : _ref2$direction,
+    _ref2$type = _ref2.type,
+    type = _ref2$type === void 0 ? 'default' : _ref2$type,
+    _ref2$size = _ref2.size,
+    size = _ref2$size === void 0 ? 'default' : _ref2$size,
+    _ref2$progressDot = _ref2.progressDot,
+    progressDot = _ref2$progressDot === void 0 ? false : _ref2$progressDot,
+    _ref2$labelPlacement = _ref2.labelPlacement,
+    labelPlacement = _ref2$labelPlacement === void 0 ? 'horizontal' : _ref2$labelPlacement,
+    _ref2$initial = _ref2.initial,
+    initial = _ref2$initial === void 0 ? 0 : _ref2$initial,
+    globalStatus = _ref2.status,
+    onChange = _ref2.onChange,
+    _ref2$clickable = _ref2.clickable,
+    clickable = _ref2$clickable === void 0 ? false : _ref2$clickable,
+    _ref2$className = _ref2.className,
+    className = _ref2$className === void 0 ? '' : _ref2$className,
+    style = _ref2.style;
+  // 计算每个步骤的状态
+  var getStatus = function getStatus(index, item) {
+    // 优先使用 item 自身的 status
+    if (item.status) return item.status;
+
+    // 当前步骤
+    if (index === current) {
+      return globalStatus || 'process';
+    }
+    // 已完成步骤
+    if (index < current) {
+      return 'finish';
+    }
+    // 等待中步骤
+    return 'wait';
+  };
+  var classNames = ['kage-steps', "kage-steps-".concat(direction), "kage-steps-".concat(type), "kage-steps-".concat(size), progressDot && 'kage-steps-dot', "kage-steps-label-".concat(labelPlacement), className].filter(Boolean).join(' ');
+  return /*#__PURE__*/_jsx("div", {
+    className: classNames,
+    style: style,
+    children: items.map(function (item, index) {
+      return /*#__PURE__*/_jsx(Step, {
+        item: item,
+        index: index + initial,
+        status: getStatus(index, item),
+        isLast: index === items.length - 1,
+        direction: direction,
+        size: size,
+        progressDot: progressDot,
+        labelPlacement: labelPlacement,
+        clickable: clickable || !!onChange,
+        onClick: onChange ? function () {
+          return onChange(index);
+        } : undefined
+      }, index);
+    })
+  });
+};
+
+// ============ Step 单独组件（用于 JSX 方式）============
+
+export var StepComponent = function StepComponent() {
+  return null;
+};
+StepComponent.displayName = 'Step';
+
+// 挂载子组件
+
+var ExportSteps = Steps;
+ExportSteps.Step = StepComponent;
+export default ExportSteps;