@yqg/slimfit 0.0.1 → 0.0.2

package/lib/esm/select/select.d.ts

@@ -0,0 +1,14 @@
+import type { SelectProps as AntdSelectProps } from 'antd';
+import { Select as AntdSelect } from 'antd';
+import React from 'react';
+import type { WithFormModeProps } from '../form-mode/types';
+import type { WithCustomerLoadingProps } from '../hooks';
+import './style.less';
+export type SelectProps = AntdSelectProps & WithFormModeProps & WithCustomerLoadingProps;
+declare const SelectComponent: React.ForwardRefExoticComponent<Omit<Omit<Omit<AntdSelectProps<any, import("antd/es/select").DefaultOptionType> & WithFormModeProps & WithCustomerLoadingProps & React.RefAttributes<any>, "ref"> & React.RefAttributes<any>, "ref"> & React.RefAttributes<any> & WithFormModeProps, "ref"> & React.RefAttributes<any>>;
+type CompoundSelect = typeof SelectComponent & {
+    Option: typeof AntdSelect.Option;
+    OptGroup: typeof AntdSelect.OptGroup;
+};
+declare const Select: CompoundSelect;
+export default Select;

package/lib/esm/select/select.js

@@ -0,0 +1,32 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { Select as AntdSelect } from 'antd';
+import React from 'react';
+import { withFormMode } from "../form-mode";
+import { withCustomClassName, withCustomClearIcon, withCustomerLoading, withCustomSelect, withDisabledClass } from "../hooks";
+import "./style.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+// 先使用 HOC 为 AntdSelect 添加自定义 clearIcon 支持
+var AntdSelectWithClearIcon = withCustomClearIcon(AntdSelect, 'AntdSelectWithClearIcon');
+
+// 自定义 Select 组件，支持动态 suffixIcon 和默认 maxTagPlaceholder
+var CustomSelect = withCustomSelect(function (props) {
+  return /*#__PURE__*/_jsx(AntdSelectWithClearIcon, _objectSpread({}, props));
+}, 'select');
+
+// 使用 HOC 链式包装 Select 组件
+var SelectWithClassName = withCustomClassName(withDisabledClass(CustomSelect), 'slimfit-select');
+
+// 添加 loading 功能
+var SelectWithLoading = withCustomerLoading(SelectWithClassName);
+
+// 使用 HOC 包装
+var SelectComponent = withFormMode(SelectWithLoading, 'select');
+
+// 创建复合组件类型
+
+var Select = SelectComponent;
+
+// 支持复合组件
+Select.Option = AntdSelect.Option;
+Select.OptGroup = AntdSelect.OptGroup;
+export default Select;

package/lib/esm/select/style.less

@@ -0,0 +1,93 @@
+@import '../style/index.css';
+
+// SlimFit Select 组件样式
+.slimfit-select {
+  // 多选模式样式
+  &.ant-select-multiple {
+    .ant-select-selector {
+      padding-inline-start: calc(var(--ant-padding-sm) - 1px);
+      padding-block: 5px;
+
+      &::after,
+      .ant-select-selection-wrap::after {
+        margin: 0;
+        line-height: 0;
+      }
+    }
+
+    .ant-select-selection-overflow {
+      height: fit-content;
+      row-gap: 8px;
+      column-gap: 0;
+    }
+
+    .ant-select-selection-overflow-item {
+      align-self: center;
+      min-height: 0;
+    }
+
+    .ant-select-selection-item {
+      margin-block: 0;
+    }
+  }
+
+  // 下拉选项样式
+  .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
+    background-color: var(--color-fill-100) !important;
+
+    // 单选模式下选中项文字颜色
+    .ant-select-item-option-content:not(
+        :has(.slimfit-select-option-with-checkbox)
+      ) {
+      color: var(--color-fi-600);
+    }
+  }
+
+  .ant-select-item-option:hover {
+    background-color: var(--color-fill-300) !important;
+  }
+
+  // 前缀图标样式
+  .ant-select-selection-search {
+    margin-inline-start: 0 !important;
+  }
+
+  .ant-select-prefix {
+    display: inline-flex;
+    align-items: center;
+    margin-inline-end: 8px;
+  }
+}
+
+// Popover MaxTagPlaceholder 组件样式
+.slimfit-select-popover-content {
+  display: flex;
+  flex-flow: wrap;
+  align-content: flex-start;
+  max-width: 450px;
+  max-height: calc(7 * 28px);
+  margin: 0 0 -8px;
+  overflow: hidden auto;
+
+  .slimfit-tag {
+    margin-bottom: 8px;
+  }
+}
+
+// 多选模式下的 checkbox 选项样式
+.slimfit-select-option-with-checkbox {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+
+  .slimfit-checkbox {
+    pointer-events: none; // 防止 checkbox 干扰 Select 的点击事件
+  }
+}
+
+// 隐藏多选模式下右侧默认的勾选图标
+.ant-select-dropdown:has(.slimfit-select-option-with-checkbox)
+  .ant-select-item-option-state {
+  display: none;
+}

package/lib/esm/spin/index.d.ts

@@ -0,0 +1 @@
+export { Spin, Spin as default, type SpinProps } from './spin';

package/lib/esm/spin/index.js

@@ -0,0 +1 @@
+export { Spin, Spin as default } from "./spin";

package/lib/esm/spin/spin.d.ts

@@ -0,0 +1,7 @@
+import { type SpinProps as AntdSpinProps } from 'antd';
+import React from 'react';
+import './style.less';
+export interface SpinProps extends AntdSpinProps {
+}
+export declare const Spin: React.FC<SpinProps>;
+export default Spin;

package/lib/esm/spin/spin.js

@@ -0,0 +1,49 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "indicator", "size"];
+import { Spin as AntdSpin } from 'antd';
+import classNames from 'classnames';
+import React from 'react';
+import { IconLoadingConic } from "../icon";
+import "./style.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 根据 Spin 尺寸获取加载图标大小
+ */
+var getIndicatorSize = function getIndicatorSize(size) {
+  switch (size) {
+    case 'small':
+      return 14;
+    case 'large':
+      return 32;
+    case 'default':
+    default:
+      return 20;
+  }
+};
+
+/**
+ * Spin 加载组件
+ * 基于 Ant Design Spin 组件，使用 IconLoadingConic 作为默认加载图标
+ */
+export var Spin = function Spin(_ref) {
+  var className = _ref.className,
+    indicator = _ref.indicator,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'default' : _ref$size,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  // 如果没有自定义 indicator，使用 IconLoadingConic 作为默认图标
+  var defaultIndicator = /*#__PURE__*/_jsx(IconLoadingConic, {
+    spin: true,
+    style: {
+      fontSize: getIndicatorSize(size),
+      color: 'var(--color-fi-600)'
+    }
+  });
+  return /*#__PURE__*/_jsx(AntdSpin, _objectSpread(_objectSpread({}, restProps), {}, {
+    size: size,
+    indicator: indicator || defaultIndicator,
+    className: classNames('slimfit-spin', className)
+  }));
+};
+export default Spin;

package/lib/esm/spin/style.less

@@ -0,0 +1,25 @@
+@import '../style/index.css';
+
+.slimfit-spin {
+  // 确保加载图标颜色继承当前上下文
+  &.ant-spin {
+    color: inherit;
+  }
+
+  // 加载图标样式
+  .ant-spin-dot {
+    color: inherit;
+  }
+
+  // 容器模式下的样式
+  &.ant-spin-spinning {
+    opacity: 1;
+  }
+
+  // 文本提示样式
+  .ant-spin-text {
+    padding-top: 8px;
+    color: var(--color-neutral-700);
+    font-size: 14px;
+  }
+}

package/lib/esm/style/disabled.less

@@ -0,0 +1,152 @@
+/**
+ * SlimFit 禁用样式
+ * 
+ * 统一管理所有组件的 .slimfit-disabled 禁用状态样式
+ * 特点：通过降低透明度保持原有颜色，而不是变灰
+ */
+
+.slimfit-disabled {
+  /* 禁用状态的统一透明度 */
+  --slimfit-disabled-opacity: 0.5;
+
+  /* ==================== Button 禁用样式 ==================== */
+  /* 极简方案：只添加视觉效果和禁止交互，不依赖组件自身的 disabled 样式 */
+  &.ant-btn {
+    position: relative;
+    /* 完全阻止按钮接收任何用户交互事件 */
+    pointer-events: none !important;
+
+    /* 非 default 按钮和 default + solid 变体使用整体透明度 */
+    &:not(.ant-btn-default),
+    &.ant-btn-default.ant-btn-variant-solid {
+      opacity: var(--slimfit-disabled-opacity) !important;
+    }
+
+    /* default + 非 solid 变体用白色遮罩层模拟透明效果，不影响边框 */
+    &.ant-btn-default:not(.ant-btn-variant-solid)::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(255, 255, 255, var(--slimfit-disabled-opacity));
+      pointer-events: none;
+      z-index: 1;
+    }
+
+    /* 强制禁用所有交互状态的样式变化 */
+    /* 使用最高优先级覆盖 Ant Design 的 hover/active/focus 样式 */
+    &:hover,
+    &:active,
+    &:focus,
+    &:focus-visible {
+      /* 禁用所有可能的样式变化 */
+      filter: none !important;
+      transform: none !important;
+      box-shadow: none !important;
+      /* 使用保存的原始颜色 */
+      background-color: var(--original-bg-color, inherit) !important;
+      border-color: var(--original-border-color, inherit) !important;
+      color: var(--original-text-color, inherit) !important;
+    }
+
+    /* 使用整体透明度的按钮在交互时保持透明度 */
+    &:not(.ant-btn-default):is(:hover, :active, :focus, :focus-visible),
+    &.ant-btn-default.ant-btn-variant-solid:is(
+        :hover,
+        :active,
+        :focus,
+        :focus-visible
+      ) {
+      opacity: var(--slimfit-disabled-opacity) !important;
+    }
+
+    /* 使用伪元素显示 not-allowed 光标 */
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 999; /* 确保在最上层 */
+      cursor: not-allowed !important;
+      /* 让伪元素接收事件以显示光标 */
+      pointer-events: auto !important;
+    }
+  }
+
+  /* ==================== Radio 禁用样式 ==================== */
+  /* 选中且禁用的 radio - 保持原有颜色 */
+  & .ant-radio-checked .ant-radio-inner {
+    opacity: var(--slimfit-disabled-opacity);
+    background-color: var(--ant-color-primary) !important;
+    border-color: var(--ant-color-primary) !important;
+  }
+
+  & .ant-radio-wrapper .ant-radio-checked .ant-radio-inner::after {
+    background-color: #fff !important;
+  }
+
+  /* ==================== Switch 禁用样式 ==================== */
+  /* 禁用状态的 switch - 保持原有颜色，只降低透明度 */
+  &.ant-switch {
+    opacity: var(--slimfit-disabled-opacity) !important;
+
+    /* 确保禁用状态下的光标正确显示，使用更高优先级 */
+    cursor: not-allowed !important;
+
+    &:hover,
+    &:focus,
+    &:active {
+      cursor: not-allowed !important;
+    }
+  }
+  /* ==================== Input 禁用样式 ==================== */
+  &.ant-input-disabled {
+    border-color: var(--color-line-200);
+    .ant-input-password-icon {
+      color: var(--color-neutral-400) !important;
+      &:hover {
+        color: var(--color-neutral-400) !important;
+      }
+    }
+  }
+
+  &.ant-input-group-wrapper {
+    .ant-input-group-addon {
+      border-color: var(--color-line-200) !important;
+    }
+    .ant-input-disabled {
+      border-color: var(--color-line-200) !important;
+    }
+  }
+
+  /* ==================== Select 禁用样式 ==================== */
+  &.ant-select-disabled {
+    .ant-select-arrow {
+      color: var(--color-neutral-400);
+      &:hover {
+        color: var(--color-neutral-400);
+      }
+    }
+  }
+  &.ant-select-multiple {
+    .ant-select-selection-item {
+      background-color: var(--color-fill-100);
+    }
+  }
+}
+
+/* ==================== Switch Loading 样式 ==================== */
+/* Loading 状态下的 switch 光标处理 */
+.ant-switch-loading {
+  cursor: not-allowed !important;
+
+  &:hover,
+  &:focus,
+  &:active {
+    cursor: not-allowed !important;
+  }
+}

package/lib/esm/style/index.css

@@ -0,0 +1,71 @@
+/* 导入自动生成的主题变量 */
+@import './theme-vars.css';
+
+/* 默认变量（当自动生成失败时的备用值） */
+:root {
+  /* 主色 */
+  --color-primary: var(--color-primary, #333aff);
+  --color-primary-hover: var(--color-primary-hover, #5762ff);
+  --color-primary-active: var(--color-primary-active, #333aff);
+  --color-primary-light: var(--color-primary-light, #e8edff);
+
+  /* 背景色 */
+  --color-bg-elevated: var(--color-bg-elevated, #ffffff);
+
+  /* 文本色 */
+  --color-text-base: var(--color-text-base, #272847);
+  --color-text-secondary: var(--color-text-secondary, #a5a5bd);
+  --color-text-bold: var(--color-text-bold, #141535);
+
+  /* 功能色 */
+  --color-link: var(--color-link, #333aff);
+  --color-success: var(--color-success, #17c36d);
+  --color-error: var(--color-error, #f54046);
+  --color-warning: var(--color-warning, #f6a800);
+}
+
+/* 全局样式重置和通用样式 */
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
+    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  color: var(--color-text-base);
+}
+
+.slimfit-no-theme-disabled {
+  color: var(--color-neutral-400) !important;
+  cursor: not-allowed !important;
+}
+
+.slimfit-cursor-pointer {
+  cursor: pointer;
+}
+
+/* Select 类组件公共样式（通过 withCustomClearIcon HOC 添加类名） */
+.slimfit-with-clear {
+  .ant-select-arrow {
+    color: var(--color-neutral-800);
+  }
+
+  .ant-select-clear {
+    inset-inline-end: calc(var(--ant-padding-sm) + 20px);
+    font-size: 16px;
+    color: var(--color-neutral-500);
+    &:hover {
+      color: var(--color-neutral-400);
+    }
+  }
+}
+
+/* Popover 气泡禁用状态 */
+.ant-popover.slimfit-disabled {
+  opacity: 0.5 !important;
+  pointer-events: none !important;
+}
+
+:where([class*='ant-'], [class*='slimfit-']) * {
+  scrollbar-color: #1415351a transparent;
+}
+
+/* 导入禁用样式 */
+@import './disabled.less';

package/lib/esm/style/theme-vars.css

@@ -0,0 +1,160 @@
+:root {
+  --color-fi-950: #08004D;
+  --color-fi-900: #100979;
+  --color-fi-800: #1D18A6;
+  --color-fi-700: #3126DA;
+  --color-fi-600: #4A50FF;
+  --color-fi-500: #6A74FF;
+  --color-fi-400: #8995FF;
+  --color-fi-300: #A9B4FF;
+  --color-fi-200: #CBD2FF;
+  --color-fi-100: #E8EDFF;
+
+  --color-neutral-950: #141535;
+  --color-neutral-900: #272847;
+  --color-neutral-800: #3F405A;
+  --color-neutral-700: #494A66;
+  --color-neutral-600: #5A5B7A;
+  --color-neutral-500: #7E7E99;
+  --color-neutral-400: #A5A5BD;
+  --color-neutral-300: #BBBCCE;
+  --color-neutral-200: #D5D6E3;
+  --color-neutral-100: #E9E9F2;
+  --color-neutral-50: #F6F6FA;
+  --color-neutral-0: #FFFFFF;
+
+
+  --color-red-950: #5C0917;
+  --color-red-900: #820E1E;
+  --color-red-800: #A81B29;
+  --color-red-700: #CF2B36;
+  --color-red-600: #F54046;
+  --color-red-500: #FF6B6B;
+  --color-red-400: #FF9794;
+  --color-red-300: #FFC1BD;
+  --color-red-200: #FFE8E6;
+  --color-red-100: #FFF2F0;
+
+  --color-tangerine-950: #610B00;
+  --color-tangerine-900: #871400;
+  --color-tangerine-800: #AD2102;
+  --color-tangerine-700: #D4380D;
+  --color-tangerine-600: #FA541C;
+  --color-tangerine-500: #FF7A45;
+  --color-tangerine-400: #FF9C6E;
+  --color-tangerine-300: #FFBB96;
+  --color-tangerine-200: #FFD8BF;
+  --color-tangerine-100: #FFF2E8;
+
+  --color-orange-950: #612500;
+  --color-orange-900: #873800;
+  --color-orange-800: #AD4E00;
+  --color-orange-700: #D46B08;
+  --color-orange-600: #FA8C16;
+  --color-orange-500: #FFA940;
+  --color-orange-400: #FFC069;
+  --color-orange-300: #FFD591;
+  --color-orange-200: #FFE7BA;
+  --color-orange-100: #FFF7E6;
+
+  --color-yellow-950: #5C3300;
+  --color-yellow-900: #824C00;
+  --color-yellow-800: #A86800;
+  --color-yellow-700: #CF8700;
+  --color-yellow-600: #F6A800;
+  --color-yellow-500: #FFC229;
+  --color-yellow-400: #FFD452;
+  --color-yellow-300: #FFE27A;
+  --color-yellow-200: #FFEEA3;
+  --color-yellow-100: #FFFBE6;
+
+  --color-lemonYellow-950: #614700;
+  --color-lemonYellow-900: #876800;
+  --color-lemonYellow-800: #AD8B00;
+  --color-lemonYellow-700: #D4B106;
+  --color-lemonYellow-600: #FADB14;
+  --color-lemonYellow-500: #FFEC3D;
+  --color-lemonYellow-400: #FFF566;
+  --color-lemonYellow-300: #FFFB8F;
+  --color-lemonYellow-200: #FFFFB8;
+  --color-lemonYellow-100: #FEFFE6;
+
+  --color-grassGreen-950: #254000;
+  --color-grassGreen-900: #3F6600;
+  --color-grassGreen-800: #5B8C00;
+  --color-grassGreen-700: #7CB305;
+  --color-grassGreen-600: #A0D911;
+  --color-grassGreen-500: #BAE637;
+  --color-grassGreen-400: #D3F261;
+  --color-grassGreen-300: #EAFF8F;
+  --color-grassGreen-200: #F4FFB8;
+  --color-grassGreen-100: #FCFFE6;
+
+  --color-green-950: #00291A;
+  --color-green-900: #004F2F;
+  --color-green-800: #027543;
+  --color-green-700: #0B9C58;
+  --color-green-600: #17C36D;
+  --color-green-500: #3ACF80;
+  --color-green-400: #60DB95;
+  --color-green-300: #8BE8B0;
+  --color-green-200: #BAF5D0;
+  --color-green-100: #EBFFF2;
+
+  --color-cyan-950: #002329;
+  --color-cyan-900: #00474F;
+  --color-cyan-800: #006D75;
+  --color-cyan-700: #08979C;
+  --color-cyan-600: #13C2C2;
+  --color-cyan-500: #36CFC9;
+  --color-cyan-400: #5CDBD3;
+  --color-cyan-300: #87E8DE;
+  --color-cyan-200: #B5F5EC;
+  --color-cyan-100: #E6FFFB;
+
+  --color-blue-950: #001D66;
+  --color-blue-900: #002C8C;
+  --color-blue-800: #003EB3;
+  --color-blue-700: #0958D9;
+  --color-blue-600: #1677FF;
+  --color-blue-500: #4096FF;
+  --color-blue-400: #69B1FF;
+  --color-blue-300: #91CAFF;
+  --color-blue-200: #BAE0FF;
+  --color-blue-100: #E6F4FF;
+
+  --color-purple-950: #170338;
+  --color-purple-900: #2B075E;
+  --color-purple-800: #451085;
+  --color-purple-700: #621DAB;
+  --color-purple-600: #822ED1;
+  --color-purple-500: #A054DE;
+  --color-purple-400: #BE7FEB;
+  --color-purple-300: #DBADF7;
+  --color-purple-200: #F2DBFF;
+  --color-purple-100: #FBF0FF;
+
+  --color-magenta-950: #520339;
+  --color-magenta-900: #780650;
+  --color-magenta-800: #9E1068;
+  --color-magenta-700: #C41D7F;
+  --color-magenta-600: #EB2F96;
+  --color-magenta-500: #F759AB;
+  --color-magenta-400: #FF85C0;
+  --color-magenta-300: #FFADD2;
+  --color-magenta-200: #FFD6E7;
+  --color-magenta-100: #FFF0F6;
+
+  --color-line-100: #1415351F;
+  --color-line-200: #1415350F;
+  --color-line-300: #14153508;
+
+  --color-fill-100: #FFFFFF;
+  --color-fill-200: #1415350A;
+  --color-fill-300: #1415350F;
+  --color-fill-400: #1415351F;
+  --color-fill-500: #14153540;
+  --color-fill-600: #14153580;
+
+  /* 语义化颜色 */
+}

package/lib/esm/switch/index.d.ts

@@ -0,0 +1,2 @@
+export type { SwitchProps } from 'antd';
+export { default as Switch } from './switch';

package/lib/esm/switch/index.js

@@ -0,0 +1 @@
+export { default as Switch } from "./switch";

package/lib/esm/switch/style.less

@@ -0,0 +1,23 @@
+@import '../style/theme-vars.css';
+
+.slimfit-switch {
+  &:focus-visible {
+    outline: 2px solid var(--color-fi-600);
+    outline-offset: 2px;
+  }
+}
+
+.slimfit-switch * {
+  transition: none !important;
+}
+
+.slimfit-switch .ant-switch-handle {
+  transition: all 0.2s cubic-bezier(0.7, 0.3, 0.1, 1) !important;
+}
+
+// 隐藏 Ant Design 的默认 loading 样式
+.slimfit-switch.ant-switch-loading {
+  .ant-switch-handle::after {
+    display: none !important;
+  }
+}

package/lib/esm/switch/switch.d.ts

@@ -0,0 +1,8 @@
+import { type SwitchProps as AntdSwitchProps } from 'antd';
+import './style.less';
+export interface SwitchProps extends Omit<AntdSwitchProps, 'loading'> {
+    loading?: boolean;
+}
+declare const Switch: ({ className, loading, checked, defaultChecked, checkedChildren, unCheckedChildren, size, ...props }: SwitchProps) => import("react/jsx-runtime").JSX.Element;
+export default Switch;
+export { Switch };