wssf-kage-ui 0.1.0 → 0.1.1

package/dist/esm/Cascader/style.less

@@ -0,0 +1,457 @@
+// Cascader 级联选择器组件样式
+
+@prefix: kage-cascader;
+
+// 颜色变量
+@selector-bg: #fff;
+@selector-border: #d9d9d9;
+@selector-border-hover: #6366f1;
+@selector-border-focus: #6366f1;
+@text-color: rgba(0, 0, 0, 0.88);
+@placeholder-color: rgba(0, 0, 0, 0.25);
+@disabled-bg: #f5f5f5;
+@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);
+@menu-border: #f0f0f0;
+@option-hover-bg: #f5f5f5;
+@option-selected-bg: #e6f4ff;
+@option-active-bg: #f5f5f5;
+@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 {
+  display: flex;
+  align-items: center;
+  min-height: 40px;
+  padding: 4px 12px;
+  background: @selector-bg;
+  border: 1px solid @selector-border;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    border-color: @selector-border-hover;
+  }
+}
+
+.@{prefix}-open .@{prefix}-selector {
+  border-color: @selector-border-focus;
+  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
+}
+
+.@{prefix}-selection {
+  flex: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: @text-color;
+
+  &-placeholder {
+    color: @placeholder-color;
+  }
+}
+
+// ============ 清除按钮 ============
+.@{prefix}-clear {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  margin-left: 4px;
+  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}-arrow {
+  margin-left: 4px;
+  font-size: 10px;
+  color: rgba(0, 0, 0, 0.25);
+  transition: transform 0.3s ease;
+
+  &-open {
+    transform: rotate(180deg);
+  }
+}
+
+// ============ 下拉菜单 ============
+.@{prefix}-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 1050;
+  margin-top: 4px;
+  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}-search {
+  padding: 8px;
+  border-bottom: 1px solid @menu-border;
+}
+
+.@{prefix}-search-input {
+  width: 100%;
+  padding: 6px 10px;
+  font-size: 14px;
+  color: @text-color;
+  background: @selector-bg;
+  border: 1px solid @selector-border;
+  border-radius: 4px;
+  outline: none;
+  transition: all 0.2s ease;
+
+  &::placeholder {
+    color: @placeholder-color;
+  }
+
+  &:focus {
+    border-color: @primary-color;
+    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
+  }
+}
+
+// ============ 搜索结果 ============
+.@{prefix}-search-result {
+  max-height: 256px;
+  overflow-y: auto;
+  padding: 4px;
+}
+
+.@{prefix}-search-option {
+  padding: 8px 12px;
+  font-size: 14px;
+  color: @text-color;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: background 0.2s ease;
+
+  &:hover {
+    background: @option-hover-bg;
+  }
+}
+
+// ============ 级联菜单 ============
+.@{prefix}-menus {
+  display: flex;
+}
+
+.@{prefix}-menu {
+  min-width: 120px;
+  max-height: 256px;
+  margin: 0;
+  padding: 4px;
+  list-style: none;
+  overflow-y: auto;
+  border-right: 1px solid @menu-border;
+
+  &:last-child {
+    border-right: none;
+  }
+}
+
+.@{prefix}-menu-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  font-size: 14px;
+  color: @text-color;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background: @option-hover-bg;
+  }
+
+  &-active {
+    background: @option-active-bg;
+  }
+
+  &-selected {
+    color: @primary-color;
+    font-weight: 500;
+    background: @option-selected-bg;
+  }
+
+  &-disabled {
+    color: @disabled-color;
+    cursor: not-allowed;
+
+    &:hover {
+      background: transparent;
+    }
+  }
+
+  &-label {
+    flex: 1;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  &-arrow {
+    margin-left: 8px;
+    font-size: 10px;
+    color: rgba(0, 0, 0, 0.45);
+  }
+}
+
+// ============ 空状态 ============
+.@{prefix}-empty {
+  padding: 16px;
+  text-align: center;
+  color: @placeholder-color;
+}
+
+// ============ 禁用状态 ============
+.@{prefix}-disabled {
+  .@{prefix}-selector {
+    background: @disabled-bg;
+    cursor: not-allowed;
+
+    &:hover {
+      border-color: @selector-border;
+    }
+  }
+
+  .@{prefix}-selection {
+    color: @disabled-color;
+  }
+
+  .@{prefix}-arrow {
+    color: @disabled-color;
+  }
+}
+
+// ============ 状态样式 ============
+.@{prefix}-status-error {
+  .@{prefix}-selector {
+    border-color: @error-color;
+
+    &:hover {
+      border-color: @error-color;
+    }
+  }
+
+  &.@{prefix}-open .@{prefix}-selector {
+    border-color: @error-color;
+    box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.1);
+  }
+}
+
+.@{prefix}-status-warning {
+  .@{prefix}-selector {
+    border-color: @warning-color;
+
+    &:hover {
+      border-color: @warning-color;
+    }
+  }
+
+  &.@{prefix}-open .@{prefix}-selector {
+    border-color: @warning-color;
+    box-shadow: 0 0 0 2px rgba(250, 173, 20, 0.1);
+  }
+}
+
+// ============ 尺寸 ============
+.@{prefix}-large {
+  .@{prefix}-selector {
+    min-height: 48px;
+    padding: 6px 14px;
+    font-size: 16px;
+  }
+}
+
+.@{prefix}-small {
+  .@{prefix}-selector {
+    min-height: 32px;
+    padding: 2px 8px;
+    font-size: 12px;
+  }
+
+  .@{prefix}-menu-item {
+    padding: 4px 8px;
+    font-size: 12px;
+  }
+}
+
+// ============ 暗色模式适配 ============
+[data-theme='dark'],
+[data-prefers-color-scheme='dark'],
+[data-prefers-color='dark'] {
+  .@{prefix}-selector {
+    background: #1f1f1f;
+    border-color: #424242;
+
+    &:hover {
+      border-color: #818cf8;
+    }
+  }
+
+  .@{prefix}-open .@{prefix}-selector {
+    border-color: #818cf8;
+    box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.2);
+  }
+
+  .@{prefix}-selection {
+    color: rgba(255, 255, 255, 0.85);
+
+    &-placeholder {
+      color: rgba(255, 255, 255, 0.25);
+    }
+  }
+
+  .@{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}-arrow {
+    color: rgba(255, 255, 255, 0.25);
+  }
+
+  .@{prefix}-dropdown {
+    background: #1f1f1f;
+    box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.3);
+  }
+
+  .@{prefix}-search {
+    border-bottom-color: rgba(255, 255, 255, 0.12);
+  }
+
+  .@{prefix}-search-input {
+    background: #1f1f1f;
+    border-color: #424242;
+    color: rgba(255, 255, 255, 0.85);
+
+    &::placeholder {
+      color: rgba(255, 255, 255, 0.25);
+    }
+
+    &:focus {
+      border-color: #818cf8;
+    }
+  }
+
+  .@{prefix}-search-option {
+    color: rgba(255, 255, 255, 0.85);
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.08);
+    }
+  }
+
+  .@{prefix}-menu {
+    border-right-color: rgba(255, 255, 255, 0.12);
+  }
+
+  .@{prefix}-menu-item {
+    color: rgba(255, 255, 255, 0.85);
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.08);
+    }
+
+    &-active {
+      background: rgba(255, 255, 255, 0.08);
+    }
+
+    &-selected {
+      color: #818cf8;
+      background: rgba(99, 102, 241, 0.2);
+    }
+
+    &-disabled {
+      color: rgba(255, 255, 255, 0.25);
+    }
+
+    &-arrow {
+      color: rgba(255, 255, 255, 0.45);
+    }
+  }
+
+  .@{prefix}-empty {
+    color: rgba(255, 255, 255, 0.25);
+  }
+
+  .@{prefix}-disabled {
+    .@{prefix}-selector {
+      background: #2d2d2d;
+
+      &:hover {
+        border-color: #424242;
+      }
+    }
+
+    .@{prefix}-selection {
+      color: rgba(255, 255, 255, 0.25);
+    }
+  }
+
+  .@{prefix}-status-error {
+    .@{prefix}-selector {
+      border-color: #ff7875;
+    }
+
+    &.@{prefix}-open .@{prefix}-selector {
+      box-shadow: 0 0 0 2px rgba(255, 120, 117, 0.2);
+    }
+  }
+
+  .@{prefix}-status-warning {
+    .@{prefix}-selector {
+      border-color: #ffc53d;
+    }
+
+    &.@{prefix}-open .@{prefix}-selector {
+      box-shadow: 0 0 0 2px rgba(255, 197, 61, 0.2);
+    }
+  }
+}
+

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import './style.less';
+export interface CheckboxProps {
+    /** 是否选中 */
+    checked?: boolean;
+    /** 默认是否选中 */
+    defaultChecked?: boolean;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 半选状态 */
+    indeterminate?: boolean;
+    /** 值（在 Group 中使用） */
+    value?: string | number;
+    /** 选中状态变化回调 */
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /** 子元素 */
+    children?: React.ReactNode;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+}
+export declare const Checkbox: React.FC<CheckboxProps> & {
+    Group: typeof CheckboxGroup;
+};
+export interface CheckboxOptionType {
+    label: React.ReactNode;
+    value: string | number;
+    disabled?: boolean;
+}
+export interface CheckboxGroupProps {
+    /** 选项 */
+    options?: (CheckboxOptionType | string | number)[];
+    /** 当前值 */
+    value?: (string | number)[];
+    /** 默认值 */
+    defaultValue?: (string | number)[];
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 方向 */
+    direction?: 'horizontal' | 'vertical';
+    /** 值变化回调 */
+    onChange?: (checkedValue: (string | number)[]) => void;
+    /** 子元素 */
+    children?: React.ReactNode;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+}
+export declare const CheckboxGroup: React.FC<CheckboxGroupProps>;
+export default Checkbox;

package/dist/esm/Checkbox/index.js

@@ -0,0 +1,152 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+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, createContext, useContext } from 'react';
+import "./style.less";
+
+// ============ Checkbox Context ============
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var CheckboxGroupContext = /*#__PURE__*/createContext(null);
+
+// ============ Checkbox Props ============
+
+// ============ Checkbox Component ============
+export var Checkbox = function Checkbox(_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$indeterminate = _ref.indeterminate,
+    indeterminate = _ref$indeterminate === void 0 ? false : _ref$indeterminate,
+    value = _ref.value,
+    onChange = _ref.onChange,
+    children = _ref.children,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    style = _ref.style;
+  var _useState = useState(defaultChecked),
+    _useState2 = _slicedToArray(_useState, 2),
+    internalChecked = _useState2[0],
+    setInternalChecked = _useState2[1];
+  var groupContext = useContext(CheckboxGroupContext);
+
+  // 如果在 Group 中，使用 Group 的状态
+  var isInGroup = groupContext !== null;
+  var isDisabled = disabled || isInGroup && groupContext.disabled;
+  var isChecked;
+  if (isInGroup && value !== undefined) {
+    isChecked = groupContext.value.includes(value);
+  } else {
+    isChecked = controlledChecked !== null && controlledChecked !== void 0 ? controlledChecked : internalChecked;
+  }
+  var handleChange = useCallback(function (e) {
+    if (isDisabled) return;
+    var newChecked = e.target.checked;
+    if (isInGroup && value !== undefined) {
+      groupContext.onChange(value, newChecked);
+    } else {
+      if (controlledChecked === undefined) {
+        setInternalChecked(newChecked);
+      }
+      onChange === null || onChange === void 0 || onChange(e);
+    }
+  }, [isDisabled, isInGroup, value, groupContext, controlledChecked, onChange]);
+  var classNames = ['kage-checkbox-wrapper', isChecked && 'kage-checkbox-wrapper-checked', isDisabled && 'kage-checkbox-wrapper-disabled', indeterminate && 'kage-checkbox-wrapper-indeterminate', className].filter(Boolean).join(' ');
+  var checkboxClassNames = ['kage-checkbox', isChecked && 'kage-checkbox-checked', isDisabled && 'kage-checkbox-disabled', indeterminate && 'kage-checkbox-indeterminate'].filter(Boolean).join(' ');
+  return /*#__PURE__*/_jsxs("label", {
+    className: classNames,
+    style: style,
+    children: [/*#__PURE__*/_jsxs("span", {
+      className: checkboxClassNames,
+      children: [/*#__PURE__*/_jsx("input", {
+        type: "checkbox",
+        className: "kage-checkbox-input",
+        checked: isChecked,
+        disabled: isDisabled,
+        onChange: handleChange
+      }), /*#__PURE__*/_jsx("span", {
+        className: "kage-checkbox-inner"
+      })]
+    }), children && /*#__PURE__*/_jsx("span", {
+      className: "kage-checkbox-label",
+      children: children
+    })]
+  });
+};
+
+// ============ Checkbox Group Props ============
+
+// ============ Checkbox Group Component ============
+export var CheckboxGroup = function CheckboxGroup(_ref2) {
+  var options = _ref2.options,
+    controlledValue = _ref2.value,
+    _ref2$defaultValue = _ref2.defaultValue,
+    defaultValue = _ref2$defaultValue === void 0 ? [] : _ref2$defaultValue,
+    _ref2$disabled = _ref2.disabled,
+    disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
+    _ref2$direction = _ref2.direction,
+    direction = _ref2$direction === void 0 ? 'horizontal' : _ref2$direction,
+    onChange = _ref2.onChange,
+    children = _ref2.children,
+    _ref2$className = _ref2.className,
+    className = _ref2$className === void 0 ? '' : _ref2$className,
+    style = _ref2.style;
+  var _useState3 = useState(defaultValue),
+    _useState4 = _slicedToArray(_useState3, 2),
+    internalValue = _useState4[0],
+    setInternalValue = _useState4[1];
+  var value = controlledValue !== null && controlledValue !== void 0 ? controlledValue : internalValue;
+  var handleChange = useCallback(function (val, checked) {
+    var newValue = checked ? [].concat(_toConsumableArray(value), [val]) : value.filter(function (v) {
+      return v !== val;
+    });
+    if (controlledValue === undefined) {
+      setInternalValue(newValue);
+    }
+    onChange === null || onChange === void 0 || onChange(newValue);
+  }, [value, controlledValue, onChange]);
+  var contextValue = {
+    value: value,
+    disabled: disabled,
+    onChange: handleChange
+  };
+  var classNames = ['kage-checkbox-group', "kage-checkbox-group-".concat(direction), className].filter(Boolean).join(' ');
+
+  // 标准化选项
+  var normalizedOptions = options === null || options === void 0 ? void 0 : options.map(function (opt) {
+    if (typeof opt === 'string' || typeof opt === 'number') {
+      return {
+        label: opt,
+        value: opt
+      };
+    }
+    return opt;
+  });
+  return /*#__PURE__*/_jsx(CheckboxGroupContext.Provider, {
+    value: contextValue,
+    children: /*#__PURE__*/_jsx("div", {
+      className: classNames,
+      style: style,
+      children: normalizedOptions ? normalizedOptions.map(function (opt) {
+        return /*#__PURE__*/_jsx(Checkbox, {
+          value: opt.value,
+          disabled: opt.disabled,
+          children: opt.label
+        }, opt.value);
+      }) : children
+    })
+  });
+};
+
+// 挂载子组件
+Checkbox.Group = CheckboxGroup;
+export default Checkbox;