wssf-kage-ui 0.1.0 → 0.1.2

package/dist/esm/Slider/index.js

@@ -0,0 +1,318 @@
+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); }
+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, useCallback, useRef, useMemo } from 'react';
+import "./style.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var Slider = function Slider(_ref) {
+  var controlledValue = _ref.value,
+    defaultValue = _ref.defaultValue,
+    _ref$min = _ref.min,
+    min = _ref$min === void 0 ? 0 : _ref$min,
+    _ref$max = _ref.max,
+    max = _ref$max === void 0 ? 100 : _ref$max,
+    _ref$step = _ref.step,
+    step = _ref$step === void 0 ? 1 : _ref$step,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$range = _ref.range,
+    range = _ref$range === void 0 ? false : _ref$range,
+    _ref$dots = _ref.dots,
+    dots = _ref$dots === void 0 ? false : _ref$dots,
+    _ref$vertical = _ref.vertical,
+    vertical = _ref$vertical === void 0 ? false : _ref$vertical,
+    marks = _ref.marks,
+    _ref$included = _ref.included,
+    included = _ref$included === void 0 ? true : _ref$included,
+    _ref$reverse = _ref.reverse,
+    reverse = _ref$reverse === void 0 ? false : _ref$reverse,
+    _ref$tipFormatter = _ref.tipFormatter,
+    tipFormatter = _ref$tipFormatter === void 0 ? function (val) {
+      return val.toString();
+    } : _ref$tipFormatter,
+    onChange = _ref.onChange,
+    onAfterChange = _ref.onAfterChange,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    style = _ref.style;
+  var getInitialValue = function getInitialValue() {
+    if (defaultValue !== undefined) return defaultValue;
+    if (range) return [min, min];
+    return min;
+  };
+  var _useState = useState(getInitialValue()),
+    _useState2 = _slicedToArray(_useState, 2),
+    internalValue = _useState2[0],
+    setInternalValue = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    dragging = _useState4[0],
+    setDragging = _useState4[1];
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    hovering = _useState6[0],
+    setHovering = _useState6[1];
+  var railRef = useRef(null);
+  var value = controlledValue !== undefined ? controlledValue : internalValue;
+
+  // 标准化值到步长
+  var normalizeValue = useCallback(function (val) {
+    var normalized = Math.round((val - min) / step) * step + min;
+    normalized = Math.max(min, Math.min(max, normalized));
+    return normalized;
+  }, [min, max, step]);
+
+  // 获取百分比
+  var getPercent = useCallback(function (val) {
+    return (val - min) / (max - min) * 100;
+  }, [min, max]);
+
+  // 从百分比获取值
+  var getValueFromPercent = useCallback(function (percent) {
+    var val = percent / 100 * (max - min) + min;
+    return normalizeValue(val);
+  }, [min, max, normalizeValue]);
+
+  // 从鼠标位置获取百分比
+  var getPercentFromEvent = useCallback(function (e) {
+    if (!railRef.current) return 0;
+    var rect = railRef.current.getBoundingClientRect();
+    var percent;
+    if (vertical) {
+      var y = e.clientY - rect.top;
+      percent = (rect.height - y) / rect.height * 100;
+    } else {
+      var x = e.clientX - rect.left;
+      percent = x / rect.width * 100;
+    }
+    if (reverse) {
+      percent = 100 - percent;
+    }
+    return Math.max(0, Math.min(100, percent));
+  }, [vertical, reverse]);
+
+  // 更新值
+  var updateValue = useCallback(function (newValue) {
+    var triggerChange = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    if (controlledValue === undefined) {
+      setInternalValue(newValue);
+    }
+    if (triggerChange) {
+      onChange === null || onChange === void 0 || onChange(newValue);
+    }
+  }, [controlledValue, onChange]);
+
+  // 处理点击轨道
+  var handleRailClick = useCallback(function (e) {
+    if (disabled) return;
+    var percent = getPercentFromEvent(e);
+    var newVal = getValueFromPercent(percent);
+    if (range) {
+      var _ref2 = value,
+        _ref3 = _slicedToArray(_ref2, 2),
+        start = _ref3[0],
+        end = _ref3[1];
+      var distToStart = Math.abs(newVal - start);
+      var distToEnd = Math.abs(newVal - end);
+      var newValue;
+      if (distToStart < distToEnd) {
+        newValue = [newVal, end];
+      } else {
+        newValue = [start, newVal];
+      }
+      newValue.sort(function (a, b) {
+        return a - b;
+      });
+      updateValue(newValue);
+    } else {
+      updateValue(newVal);
+    }
+  }, [disabled, range, value, getPercentFromEvent, getValueFromPercent, updateValue]);
+
+  // 开始拖动
+  var handleMouseDown = useCallback(function (index) {
+    return function (e) {
+      if (disabled) return;
+      e.preventDefault();
+      setDragging(index);
+    };
+  }, [disabled]);
+
+  // 拖动中
+  var handleMouseMove = useCallback(function (e) {
+    if (dragging === null || disabled) return;
+    var percent = getPercentFromEvent(e);
+    var newVal = getValueFromPercent(percent);
+    if (range) {
+      var _ref4 = value,
+        _ref5 = _slicedToArray(_ref4, 2),
+        start = _ref5[0],
+        end = _ref5[1];
+      var newValue;
+      if (dragging === 0) {
+        newValue = [Math.min(newVal, end), end];
+      } else {
+        newValue = [start, Math.max(newVal, start)];
+      }
+      updateValue(newValue, true);
+    } else {
+      updateValue(newVal, true);
+    }
+  }, [dragging, disabled, range, value, getPercentFromEvent, getValueFromPercent, updateValue]);
+
+  // 结束拖动
+  var handleMouseUp = useCallback(function () {
+    if (dragging !== null) {
+      setDragging(null);
+      onAfterChange === null || onAfterChange === void 0 || onAfterChange(value);
+    }
+  }, [dragging, value, onAfterChange]);
+
+  // 绑定全局事件
+  React.useEffect(function () {
+    if (dragging !== null) {
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', handleMouseUp);
+      return function () {
+        document.removeEventListener('mousemove', handleMouseMove);
+        document.removeEventListener('mouseup', handleMouseUp);
+      };
+    }
+  }, [dragging, handleMouseMove, handleMouseUp]);
+
+  // 生成刻度点
+  var dotsList = useMemo(function () {
+    if (!dots && !marks) return [];
+    var points = [];
+    var totalSteps = (max - min) / step;
+    for (var i = 0; i <= totalSteps; i++) {
+      var val = min + i * step;
+      points.push(val);
+    }
+    if (marks) {
+      Object.keys(marks).forEach(function (key) {
+        var val = Number(key);
+        if (val >= min && val <= max && !points.includes(val)) {
+          points.push(val);
+        }
+      });
+    }
+    return points.sort(function (a, b) {
+      return a - b;
+    });
+  }, [dots, marks, min, max, step]);
+
+  // 渲染句柄
+  var renderHandle = function renderHandle(val, index) {
+    var percent = getPercent(val);
+    var isActive = dragging === index || hovering === index;
+    var handleStyle = vertical ? {
+      bottom: "".concat(percent, "%")
+    } : {
+      left: "".concat(percent, "%")
+    };
+    return /*#__PURE__*/_jsx("div", {
+      className: "kage-slider-handle ".concat(isActive ? 'active' : '', " ").concat(disabled ? 'disabled' : ''),
+      style: handleStyle,
+      onMouseDown: handleMouseDown(index),
+      onMouseEnter: function onMouseEnter() {
+        return setHovering(index);
+      },
+      onMouseLeave: function onMouseLeave() {
+        return setHovering(null);
+      },
+      children: tipFormatter && isActive && /*#__PURE__*/_jsx("div", {
+        className: "kage-slider-tooltip",
+        children: tipFormatter(val)
+      })
+    }, index);
+  };
+
+  // 渲染轨道
+  var renderTrack = function renderTrack() {
+    if (!included) return null;
+    var startPercent;
+    var endPercent;
+    if (range) {
+      var _ref6 = value,
+        _ref7 = _slicedToArray(_ref6, 2),
+        start = _ref7[0],
+        end = _ref7[1];
+      startPercent = getPercent(start);
+      endPercent = getPercent(end);
+    } else {
+      startPercent = 0;
+      endPercent = getPercent(value);
+    }
+    var trackStyle = vertical ? {
+      bottom: "".concat(startPercent, "%"),
+      height: "".concat(endPercent - startPercent, "%")
+    } : {
+      left: "".concat(startPercent, "%"),
+      width: "".concat(endPercent - startPercent, "%")
+    };
+    return /*#__PURE__*/_jsx("div", {
+      className: "kage-slider-track",
+      style: trackStyle
+    });
+  };
+  var classNames = ['kage-slider', disabled && 'kage-slider-disabled', vertical && 'kage-slider-vertical', className].filter(Boolean).join(' ');
+  return /*#__PURE__*/_jsxs("div", {
+    className: classNames,
+    style: style,
+    children: [/*#__PURE__*/_jsxs("div", {
+      ref: railRef,
+      className: "kage-slider-rail",
+      onClick: handleRailClick,
+      children: [renderTrack(), dotsList.map(function (val) {
+        var percent = getPercent(val);
+        var dotStyle = vertical ? {
+          bottom: "".concat(percent, "%")
+        } : {
+          left: "".concat(percent, "%")
+        };
+        return /*#__PURE__*/_jsx("div", {
+          className: "kage-slider-dot",
+          style: dotStyle
+        }, val);
+      }), range ? value.map(function (val, idx) {
+        return renderHandle(val, idx);
+      }) : renderHandle(value, 0)]
+    }), marks && /*#__PURE__*/_jsx("div", {
+      className: "kage-slider-marks",
+      children: Object.entries(marks).map(function (_ref8) {
+        var _ref9 = _slicedToArray(_ref8, 2),
+          key = _ref9[0],
+          mark = _ref9[1];
+        var val = Number(key);
+        if (val < min || val > max) return null;
+        var percent = getPercent(val);
+        var markStyle = vertical ? {
+          bottom: "".concat(percent, "%")
+        } : {
+          left: "".concat(percent, "%")
+        };
+
+        // 处理 mark 可能是对象的情况
+        var isMarkObject = _typeof(mark) === 'object' && mark !== null && 'label' in mark;
+        var label = isMarkObject ? mark.label : mark;
+        var customStyle = isMarkObject ? mark.style : undefined;
+        return /*#__PURE__*/_jsx("div", {
+          className: "kage-slider-mark",
+          style: markStyle,
+          children: /*#__PURE__*/_jsx("span", {
+            className: "kage-slider-mark-text",
+            style: customStyle,
+            children: label
+          })
+        }, key);
+      })
+    })]
+  });
+};
+export default Slider;

package/dist/esm/Slider/style.less

@@ -0,0 +1,287 @@
+// Slider 滑动输入条组件样式
+
+@prefix: kage-slider;
+
+// 颜色变量
+@slider-rail-bg: rgba(0, 0, 0, 0.06);
+@slider-track-bg: #6366f1;
+@slider-handle-color: #6366f1;
+@slider-handle-hover-color: #818cf8;
+@slider-disabled-bg: rgba(0, 0, 0, 0.06);
+@slider-disabled-color: rgba(0, 0, 0, 0.25);
+@slider-dot-border: #d9d9d9;
+@slider-dot-active-border: #6366f1;
+
+// ============ 基础样式 ============
+.@{prefix} {
+  position: relative;
+  padding: 12px 0;
+  cursor: pointer;
+  user-select: none;
+
+  * {
+    box-sizing: border-box;
+  }
+
+  &-vertical {
+    width: 12px;
+    height: 200px;
+    padding: 0 12px;
+  }
+}
+
+// ============ 轨道 ============
+.@{prefix}-rail {
+  position: relative;
+  width: 100%;
+  height: 4px;
+  background: @slider-rail-bg;
+  border-radius: 2px;
+  transition: background 0.2s ease;
+
+  .@{prefix}-vertical & {
+    width: 4px;
+    height: 100%;
+  }
+}
+
+// ============ 已选择轨道 ============
+.@{prefix}-track {
+  position: absolute;
+  height: 100%;
+  background: @slider-track-bg;
+  border-radius: 2px;
+  transition: all 0.2s ease;
+  pointer-events: none;
+
+  .@{prefix}-vertical & {
+    width: 100%;
+    height: auto;
+  }
+}
+
+// ============ 句柄 ============
+.@{prefix}-handle {
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  margin-top: -5px;
+  margin-left: -7px;
+  background: #fff;
+  border: 2px solid @slider-handle-color;
+  border-radius: 50%;
+  cursor: grab;
+  transition: all 0.2s ease;
+  z-index: 2;
+
+  &:hover,
+  &.active {
+    border-color: @slider-handle-hover-color;
+    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
+    transform: scale(1.2);
+  }
+
+  &.active {
+    cursor: grabbing;
+  }
+
+  &.disabled {
+    border-color: @slider-disabled-color;
+    cursor: not-allowed;
+
+    &:hover {
+      transform: none;
+      box-shadow: none;
+    }
+  }
+
+  .@{prefix}-vertical & {
+    margin-top: -7px;
+    margin-left: -5px;
+  }
+}
+
+// ============ 工具提示 ============
+.@{prefix}-tooltip {
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-8px);
+  padding: 4px 8px;
+  background: rgba(0, 0, 0, 0.85);
+  color: #fff;
+  font-size: 12px;
+  line-height: 1.5;
+  border-radius: 4px;
+  white-space: nowrap;
+  pointer-events: none;
+  animation: tooltipFadeIn 0.2s ease;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border: 4px solid transparent;
+    border-top-color: rgba(0, 0, 0, 0.85);
+  }
+
+  .@{prefix}-vertical & {
+    bottom: auto;
+    left: 100%;
+    top: 50%;
+    transform: translateY(-50%) translateX(8px);
+
+    &::after {
+      top: 50%;
+      left: 0;
+      transform: translateX(-8px) translateY(-50%);
+      border: 4px solid transparent;
+      border-right-color: rgba(0, 0, 0, 0.85);
+      border-top-color: transparent;
+    }
+  }
+}
+
+@keyframes tooltipFadeIn {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(-8px);
+  }
+}
+
+// ============ 刻度点 ============
+.@{prefix}-dot {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  margin-top: -2px;
+  margin-left: -4px;
+  background: #fff;
+  border: 2px solid @slider-dot-border;
+  border-radius: 50%;
+  pointer-events: none;
+  transition: border-color 0.2s ease;
+
+  .@{prefix}-vertical & {
+    margin-top: -4px;
+    margin-left: -2px;
+  }
+}
+
+// ============ 刻度标记 ============
+.@{prefix}-marks {
+  position: absolute;
+  width: 100%;
+  top: 100%;
+
+  .@{prefix}-vertical & {
+    width: auto;
+    height: 100%;
+    top: 0;
+    left: 100%;
+  }
+}
+
+.@{prefix}-mark {
+  position: absolute;
+  transform: translateX(-50%);
+  cursor: pointer;
+
+  .@{prefix}-vertical & {
+    transform: translateY(50%);
+  }
+}
+
+.@{prefix}-mark-text {
+  display: inline-block;
+  margin-top: 8px;
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.45);
+  white-space: nowrap;
+  user-select: none;
+
+  .@{prefix}-vertical & {
+    margin-top: 0;
+    margin-left: 8px;
+  }
+}
+
+// ============ 禁用状态 ============
+.@{prefix}-disabled {
+  cursor: not-allowed;
+
+  .@{prefix}-rail {
+    background: @slider-disabled-bg;
+  }
+
+  .@{prefix}-track {
+    background: @slider-disabled-color;
+  }
+
+  .@{prefix}-handle {
+    border-color: @slider-disabled-color;
+    cursor: not-allowed;
+  }
+
+  .@{prefix}-mark-text {
+    color: @slider-disabled-color;
+  }
+}
+
+// ============ 暗色模式适配 ============
+[data-theme='dark'],
+[data-prefers-color-scheme='dark'],
+[data-prefers-color='dark'] {
+  .@{prefix}-rail {
+    background: rgba(255, 255, 255, 0.08);
+  }
+
+  .@{prefix}-track {
+    background: #6366f1;
+  }
+
+  .@{prefix}-handle {
+    background: #1f1f1f;
+    border-color: #6366f1;
+
+    &:hover,
+    &.active {
+      border-color: #818cf8;
+      box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.2);
+    }
+
+    &.disabled {
+      border-color: rgba(255, 255, 255, 0.25);
+    }
+  }
+
+  .@{prefix}-dot {
+    background: #1f1f1f;
+    border-color: #424242;
+  }
+
+  .@{prefix}-mark-text {
+    color: rgba(255, 255, 255, 0.45);
+  }
+
+  .@{prefix}-disabled {
+    .@{prefix}-rail {
+      background: rgba(255, 255, 255, 0.08);
+    }
+
+    .@{prefix}-track {
+      background: rgba(255, 255, 255, 0.25);
+    }
+
+    .@{prefix}-mark-text {
+      color: rgba(255, 255, 255, 0.25);
+    }
+  }
+}
+

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import './style.less';
+type SpaceSize = 'small' | 'middle' | 'large' | number;
+type SpaceAlign = 'start' | 'end' | 'center' | 'baseline';
+export interface SpaceProps {
+    /** 间距方向 */
+    direction?: 'horizontal' | 'vertical';
+    /** 间距大小 */
+    size?: SpaceSize | [SpaceSize, SpaceSize];
+    /** 对齐方式 */
+    align?: SpaceAlign;
+    /** 是否自动换行（仅在 horizontal 有效） */
+    wrap?: boolean;
+    /** 设置分隔符 */
+    split?: React.ReactNode;
+    /** 子元素 */
+    children?: React.ReactNode;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+}
+export declare const Space: React.FC<SpaceProps>;
+export interface CompactProps {
+    /** 排列方向 */
+    direction?: 'horizontal' | 'vertical';
+    /** 是否为块级元素 */
+    block?: boolean;
+    /** 子元素 */
+    children?: React.ReactNode;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+}
+export declare const Compact: React.FC<CompactProps>;
+type SpaceType = React.FC<SpaceProps> & {
+    Compact: typeof Compact;
+};
+declare const SpaceWithCompact: SpaceType;
+export default SpaceWithCompact;