@rainbow-oh/yee-c 0.2.0 → 0.3.0

package/src/Segmented/index.zh-CN.md

@@ -0,0 +1,47 @@
+---
+category: Components
+title: Segmented
+subtitle: 分段选择器
+group:
+  title: 数据录入
+  order: 3
+toc: 'content'
+---
+
+# Segmented 分段选择器
+
+展示一组互斥选项，选中项以高亮滑块（thumb）跟随切换，常用于视图切换、模式切换等场景。
+
+## 代码演示
+
+<code src="./demo/basic.tsx" title="基础用法" description="Segmented 的基础用法，支持受控与非受控，options 支持配置对象或原始值简写"></code>
+<code src="./demo/disabled.tsx" title="禁用" description="禁用单个选项或整组"></code>
+<code src="./demo/size.tsx" title="尺寸" description="small / default / large 三种尺寸"></code>
+<code src="./demo/block.tsx" title="撑满与图标" description="block 撑满容器宽度，选项可带图标"></code>
+
+## API
+
+### SegmentedProps
+
+| 属性名 | 类型 | 描述 | 默认值 |
+| --- | --- | --- | --- |
+| prefixCls | `string` | 自定义类名前缀 | - |
+| className | `string` | 自定义根类名 | - |
+| style | `React.CSSProperties` | 自定义根样式 | - |
+| classNames | `Partial<Record<'item' \| 'thumb', string>>` | 语义化结构类名 | - |
+| styles | `Partial<Record<'item' \| 'thumb', React.CSSProperties>>` | 语义化结构样式 | - |
+| options | `Array<SegmentedOption>` | 选项，支持配置对象或 `string \| number` 简写 | - |
+| value | `string \| number` | 受控选中值 | - |
+| defaultValue | `string \| number` | 默认选中值 | - |
+| onChange | `(value: string \| number) => void` | 值改变时的回调 | - |
+| disabled | `boolean` | 是否禁用所有选项 | - |
+| size | `'small' \| 'default' \| 'large'` | 尺寸 | - |
+| block | `boolean` | 是否撑满容器宽度，选项等分 | - |
+| name | `string` | 底层 radio input 的 name，用于表单分组 | - |
+
+### SegmentedOption
+
+| 类型 | 描述 |
+| --- | --- |
+| `SegmentedLabeledOption` | `{ label?: ReactNode; value: string \| number; disabled?: boolean; icon?: ReactNode; className?: string }` |
+| `SegmentedRawOption` | `string \| number`，简写形式，label 取值转字符串 |

package/src/Segmented/interface.ts

@@ -0,0 +1,87 @@
+import type { DataAttributeProps } from '../utils/types';
+
+export type SegmentedValue = string | number;
+
+export type SegmentedSemanticDOM = 'item' | 'thumb';
+
+export interface SegmentedLabeledOption {
+  /**
+   * Custom item class name
+   */
+  className?: string;
+  /**
+   * Item label
+   */
+  label?: React.ReactNode;
+  /**
+   * Item value
+   */
+  value: SegmentedValue;
+  /**
+   * Whether the item is disabled
+   */
+  disabled?: boolean;
+  /**
+   * Item icon
+   */
+  icon?: React.ReactNode;
+}
+
+export type SegmentedRawOption = SegmentedValue;
+
+export type SegmentedOption = SegmentedLabeledOption | SegmentedRawOption;
+
+export interface SegmentedProps extends DataAttributeProps {
+  /**
+   * Custom prefix class name
+   */
+  prefixCls?: string;
+  /**
+   * Custom root class name
+   */
+  className?: string;
+  /**
+   * Custom root style
+   */
+  style?: React.CSSProperties;
+  /**
+   * Semantic structure class names
+   */
+  classNames?: Partial<Record<SegmentedSemanticDOM, string>>;
+  /**
+   * Semantic structure styles
+   */
+  styles?: Partial<Record<SegmentedSemanticDOM, React.CSSProperties>>;
+  /**
+   * Options, supports config objects or primitive shorthand (string/number)
+   */
+  options?: SegmentedOption[];
+  /**
+   * Controlled selected value
+   */
+  value?: SegmentedValue;
+  /**
+   * Default selected value
+   */
+  defaultValue?: SegmentedValue;
+  /**
+   * Callback when selected value changes
+   */
+  onChange?: (value: SegmentedValue) => void;
+  /**
+   * Whether to disable all options
+   */
+  disabled?: boolean;
+  /**
+   * Size
+   */
+  size?: 'small' | 'default' | 'large';
+  /**
+   * Whether to fill the container width, options share the space equally
+   */
+  block?: boolean;
+  /**
+   * Group name for the underlying radio inputs
+   */
+  name?: string;
+}

package/src/Segmented/segmented.tsx

@@ -0,0 +1,134 @@
+import clsx from 'clsx';
+import React, { useContext, useId, useMemo } from 'react';
+import { motion } from 'motion/react';
+import { GlobalContext } from '../Config-Provider';
+import useMergedState from '../hooks/useMergedState';
+import mergeContextToProps from '../utils/mergeContextToProps';
+import type {
+  SegmentedLabeledOption,
+  SegmentedOption,
+  SegmentedProps,
+  SegmentedValue,
+} from './interface';
+
+import './style/index.less';
+
+const normalizeOption = (
+  option: SegmentedOption,
+): SegmentedLabeledOption => {
+  if (typeof option === 'string' || typeof option === 'number') {
+    return { label: String(option), value: option };
+  }
+  return option;
+};
+
+const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
+  (baseprops, ref) => {
+    const { segmented } = useContext(GlobalContext);
+    const props = mergeContextToProps<SegmentedProps>(baseprops, segmented);
+
+    const uid = useId();
+
+    const {
+      prefixCls = 'yee-segmented',
+      className,
+      style,
+      classNames,
+      styles,
+      options = [],
+      value,
+      defaultValue,
+      disabled,
+      size,
+      block,
+      name = uid,
+      onChange,
+      ...rest
+    } = props;
+
+    const items = useMemo(
+      () => options.map(normalizeOption),
+      [options],
+    );
+
+    const firstValue = items[0]?.value;
+
+    const [mergedValue, setMergedValue] = useMergedState<
+      SegmentedValue | undefined
+    >(firstValue, {
+      value,
+      defaultValue,
+    });
+
+    const cls = clsx(
+      prefixCls,
+      {
+        [`${prefixCls}-${size}`]: size,
+        [`${prefixCls}-block`]: block,
+        [`${prefixCls}-disabled`]: disabled,
+      },
+      className,
+    );
+
+    const handleChange = (itemValue: SegmentedValue) => {
+      setMergedValue(itemValue);
+      onChange?.(itemValue);
+    };
+
+    return (
+      <div {...rest} ref={ref} className={cls} style={style} role="radiogroup">
+        {items.map((item) => {
+          const selected = item.value === mergedValue;
+          const itemDisabled = disabled || item.disabled;
+          return (
+            <label
+              key={item.value}
+              className={clsx(`${prefixCls}-item`, item.className, {
+                [`${prefixCls}-item-selected`]: selected,
+                [`${prefixCls}-item-disabled`]: itemDisabled,
+              })}
+            >
+              {selected ? (
+                <motion.span
+                  layoutId={`${prefixCls}-thumb-${uid}`}
+                  className={clsx(`${prefixCls}-thumb`, classNames?.thumb)}
+                  style={styles?.thumb}
+                  transition={{
+                    type: 'spring',
+                    visualDuration: 0.3,
+                    bounce: 0.2,
+                  }}
+                />
+              ) : null}
+              <span className={`${prefixCls}-item-inner`}>
+                {item.icon ? (
+                  <span className={`${prefixCls}-item-icon`}>
+                    {item.icon}
+                  </span>
+                ) : null}
+                {item.label !== undefined && item.label !== null ? (
+                  <span className={`${prefixCls}-item-label`}>
+                    {item.label}
+                  </span>
+                ) : null}
+              </span>
+              <input
+                type="radio"
+                className={`${prefixCls}-input`}
+                name={name}
+                value={item.value}
+                checked={selected}
+                disabled={itemDisabled}
+                onChange={() => handleChange(item.value)}
+              />
+            </label>
+          );
+        })}
+      </div>
+    );
+  },
+);
+
+Segmented.displayName = 'Segmented';
+
+export default Segmented;

package/src/Segmented/style/index.less

@@ -0,0 +1,104 @@
+@pls: .yee-segmented;
+
+@{pls} {
+  display: inline-flex;
+  box-sizing: border-box;
+  padding: var(--yee-segmented-padding);
+  border-radius: var(--yee-segmented-border-radius);
+  background-color: var(--yee-segmented-bg-color);
+
+  &-block {
+    display: flex;
+    width: 100%;
+
+    @{pls}-item {
+      flex: 1;
+      justify-content: center;
+    }
+  }
+
+  &-disabled {
+    cursor: not-allowed;
+  }
+
+  &-item {
+    position: relative;
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    padding: var(--yee-segmented-item-padding);
+    border-radius: var(--yee-segmented-item-border-radius);
+    font-size: var(--yee-segmented-font-size);
+    color: var(--yee-segmented-item-color);
+    white-space: nowrap;
+    cursor: pointer;
+    user-select: none;
+    transition: color var(--yee-segmented-transition-duration) linear;
+
+    &:hover:not(&-disabled):not(&-selected) {
+      color: var(--yee-segmented-item-hover-color);
+    }
+  }
+
+  &-item-inner {
+    position: relative;
+    z-index: 1;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--yee-segmented-item-gap);
+  }
+
+  &-item-icon {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  &-item-selected {
+    color: var(--yee-segmented-item-selected-color);
+    cursor: default;
+  }
+
+  &-item-disabled {
+    color: var(--yee-segmented-item-disabled-color);
+    cursor: not-allowed;
+  }
+
+  &-thumb {
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    border-radius: var(--yee-segmented-thumb-border-radius);
+    background-color: var(--yee-segmented-thumb-bg-color);
+    box-shadow: var(--yee-segmented-thumb-box-shadow);
+  }
+
+  &-input {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    opacity: 0;
+    cursor: inherit;
+  }
+
+  &-item:has(&-input:focus-visible) {
+    box-shadow: 0 0 0 2px var(--yee-primary-color);
+  }
+
+  &-small {
+    @{pls}-item {
+      padding: var(--yee-segmented-item-small-padding);
+      font-size: var(--yee-segmented-font-small-size);
+    }
+  }
+
+  &-large {
+    @{pls}-item {
+      padding: var(--yee-segmented-item-large-padding);
+      font-size: var(--yee-segmented-font-large-size);
+    }
+  }
+}

package/src/Spin/spin.tsx

@@ -55,6 +55,7 @@ const Spin: FC<SpinProps> = (baseprops) => {
         styles={styles}
         size={size}
         variant={variant}
+        color={color}
       />
       {tip && (
         <span

package/src/Steps/step.tsx

@@ -64,7 +64,7 @@ const Step: React.FC<StepProps> = (props) => {
 
     return index < current ? (
       <span className={`${prefixCls}-item-serial ${prefixCls}-item-icon-check`}>
-        <Check />
+        <Check size={18} strokeWidth={3} />
       </span>
     ) : (
       <span className={`${prefixCls}-item-serial`}>{index + 1}</span>

package/src/Steps/style/index.less

@@ -142,7 +142,7 @@
         background-color: var(--yee-steps-serial-done-bg-color, #fff);
         background-clip: padding-box;
         border-color: var(--yee-steps-serial-done-border-color, #1890ff);
-        color: var(--yee-steps-serial-done-color, #1890ff);
+        color: var(--yee-steps-step-done-color);
       }
 
       @{pls}-item-title {
@@ -283,9 +283,15 @@
       margin-bottom: 8px;
       padding-left: 0;
 
+      &-title {
+        &::after {
+          display: none;
+        }
+      }
+
       &-content {
         align-items: flex-start;
-        margin-left: 8px;
+        margin-left: 12px;
       }
 
       &-icon {

package/src/Switch/demo/content.tsx

@@ -4,11 +4,21 @@ import React from 'react';
 export default () => {
   return (
     <Space direction="vertical">
-      <Switch checkedChildren="ON" unCheckedChildren="OFF" />
-
-      <Switch checkedChildren="On" unCheckedChildren="Off" />
-
-      <Switch checkedChildren="✅" unCheckedChildren="❌" />
+      <Switch
+        checkedChildren="ON"
+        unCheckedChildren="OFF"
+        style={{ width: 60 }}
+      />
+      <Switch
+        checkedChildren="On"
+        unCheckedChildren="OFF"
+        style={{ width: 60 }}
+      />
+      <Switch
+        checkedChildren="✅"
+        unCheckedChildren="❌"
+        style={{ width: 48 }}
+      />
     </Space>
   );
 };

package/src/Switch/style/index.less

@@ -15,6 +15,10 @@
   cursor: pointer;
   transition: background 0.2s linear;
 
+  &-spin {
+    position: absolute;
+  }
+
   &-handle {
     position: absolute;
     top: var(--yee-switch-handle-top);
@@ -67,6 +71,12 @@
         var(--m-switch-handle-size) + var(--yee-switch-inner-padding-offset)
       );
     }
+
+    @{pls}-spin {
+      inset-inline-end: calc(
+        var(--m-switch-handle-size) + var(--yee-switch-handle-offset)
+      );
+    }
   }
 
   &-unchecked {
@@ -77,6 +87,12 @@
         var(--m-switch-handle-size) + var(--yee-switch-inner-padding-offset)
       );
     }
+
+    @{pls}-spin {
+      padding-inline-start: calc(
+        var(--m-switch-handle-size) + var(--yee-switch-inner-padding-offset)
+      );
+    }
   }
 
   --m-switch-handle-size: var(--yee-switch-handle-size);

package/src/Switch/switch.tsx

@@ -58,7 +58,7 @@ const Switch = (baseprops: SwitchProps) => {
       role="switch"
       aria-checked={mergedChecked}
       className={cls}
-      disabled={disabled}
+      disabled={disabled || loading}
       onClick={onClick}
       style={style}
     >
@@ -71,11 +71,19 @@ const Switch = (baseprops: SwitchProps) => {
           bounce: 0.2,
         }}
       >
-        {loading ? (
-          <Spin size="small" />
-        ) : (
-          <span className={clsx(`${prefixCls}-handle-inner`)}></span>
-        )}
+        {/* {loading ? (
+          
+        ) : ( */}
+        <span className={clsx(`${prefixCls}-handle-inner`)}>
+          {loading ? (
+            <Spin
+              size="small"
+              className={`${prefixCls}-spin`}
+              color={checked ? '#fff' : undefined}
+            />
+          ) : null}
+        </span>
+        {/* )} */}
       </motion.span>
       <span
         className={clsx(`${prefixCls}-inner`, classNames?.inner)}

package/src/Table/index.en-US.md

@@ -38,6 +38,7 @@ A table displays rows of data.
 | columns | `ColumnProps[]` | Table column configuration | - |
 | children | `Array<React.ReactElement<ColumnProps>> | React.ReactElement<ColumnProps>` | Children elements | - |
 | locale | `Record<string, string>` | Locale messages | - |
+| noData | `React.ReactNode` | Content displayed when no data is available | - |
 | dataSource | `Array<Record<string, any>>` | Data source | - |
 | footer | `React.ReactNode \| (() => React.ReactNode)` | Table footer | - |
 | loading | `boolean` | Loading state | - |

package/src/Table/index.zh-CN.md

@@ -43,6 +43,7 @@ toc: 'content'
 | columns           | `ColumnProps[]`                                                             | 表格列的配置信息                     | -      |
 | children          | `Array<React.ReactElement<ColumnProps>> \| React.ReactElement<ColumnProps>` | 子元素                               | -      |
 | locale            | `Record<string, string>`                                                    | 提示信息                             | -      |
+| noData            | `React.ReactNode`                                                           | 无数据时展示的内容                   | -      |
 | dataSource        | `Array<Record<string, any>>`                                                | 数据                                 | -      |
 | footer            | `React.ReactNode \| (() => React.ReactNode)`                                | 表格底部                             | -      |
 | loading           | `boolean`                                                                   | 加载状态                             | -      |

package/src/Table/interface.ts

@@ -267,7 +267,7 @@ export interface ColumnProps {
    * Custom render cell content
    */
   render?: (
-    record: HeadCellProps | Record<string, unknown>,
+    record: Record<string, unknown>,
     rowIndex: number,
   ) => React.ReactNode;
 }
@@ -492,6 +492,10 @@ export interface TableProps
    * Locale text, including sort and empty data hints
    */
   locale?: Record<string, string>;
+  /**
+   * Content displayed when no data is available
+   * */
+  noData?: React.ReactNode;
   /**
    * Data
    */

package/src/Table/theader/cell.tsx

@@ -29,7 +29,6 @@ const HeadCell: React.FC<HeadCellProps> = (props) => {
     onHeaderCell,
     onSort,
     onInternalFilter,
-    render,
     ...rest
   } = props;
 
@@ -117,14 +116,8 @@ const HeadCell: React.FC<HeadCellProps> = (props) => {
         className={`${prefixCls}-thead-cell`}
         style={{ justifyContent: align }}
       >
-        {render ? (
-          render(props, 0)
-        ) : (
-          <>
-            {renderTitle()}
-            {renderFilter()}
-          </>
-        )}
+        {renderTitle()}
+        {renderFilter()}
       </div>
     );
   };

package/src/Tag/demo/size.tsx

@@ -4,13 +4,13 @@ import React from 'react';
 export default () => {
   return (
     <Space direction="vertical">
-      <Space>
+      <Space block>
         <Tag size="small">Small</Tag>
         <Tag size="default">Default</Tag>
         <Tag size="large">Large</Tag>
       </Space>
 
-      <Space>
+      <Space block>
         <Tag size="small" status="success">
           Small Success
         </Tag>

package/src/Tag/style/index.less

@@ -5,6 +5,7 @@
   align-items: center;
   box-sizing: content-box;
   max-width: 100%;
+  white-space: nowrap;
   height: var(--yee-tag-height);
   padding: var(--yee-tag-padding);
   color: var(--yee-tag-color);

package/src/Tour/demo/basic.tsx

@@ -0,0 +1,52 @@
+import { Button, Space, Tour } from '@rainbow-oh/yee-c';
+import React, { useRef, useState } from 'react';
+
+export default () => {
+  const [open, setOpen] = useState(false);
+  const startRef = useRef<HTMLDivElement>(null);
+  const midRef = useRef<HTMLDivElement>(null);
+  const endRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <Space direction="vertical">
+      <Space>
+        <div ref={startRef} style={{ display: 'inline-block' }}>
+          <Button type="primary" onClick={() => setOpen(true)}>
+            开始引导
+          </Button>
+        </div>
+        <div ref={midRef} style={{ display: 'inline-block' }}>
+          <Button>导出</Button>
+        </div>
+        <div ref={endRef} style={{ display: 'inline-block' }}>
+          <Button>设置</Button>
+        </div>
+      </Space>
+
+      <Tour
+        open={open}
+        onClose={() => setOpen(false)}
+        onFinish={() => setOpen(false)}
+        steps={[
+          {
+            target: () => startRef.current,
+            title: '欢迎使用',
+            description: '点击此处开始你的操作流程。',
+          },
+          {
+            target: () => midRef.current,
+            title: '导出数据',
+            description: '在这里可以将数据导出为文件。',
+            placement: 'bottom',
+          },
+          {
+            target: () => endRef.current,
+            title: '系统设置',
+            description: '配置系统参数。点击「完成」结束引导。',
+            placement: 'left',
+          },
+        ]}
+      />
+    </Space>
+  );
+};