@rainbow-oh/yee-c 0.4.1 → 0.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rainbow-oh/yee-c",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "yee basic components",
   "keywords": [
     "react",

package/src/Button/demo/basic.tsx

@@ -8,7 +8,9 @@ export default () => {
       <Button>Children Button</Button>
       <Button>Default Button</Button>
       <Button type="dashed">Dashed Button</Button>
-      <Button type="text">Text Button</Button>
+      <Button variant="filled" type="text">
+        Text Button
+      </Button>
       <Button type="link">Link Button</Button>
     </Space>
   );

package/src/Button/demo/variant.tsx

@@ -0,0 +1,55 @@
+import { Button, Space } from '@rainbow-oh/yee-c';
+import React from 'react';
+
+const types = ['primary', 'default', 'dashed', 'text', 'link'] as const;
+const colors = ['default', 'primary', 'success', 'danger', 'warning'] as const;
+const variants = [
+  'solid',
+  'outlined',
+  'dashed',
+  'filled',
+  'text',
+  'link',
+] as const;
+
+const labelStyle: React.CSSProperties = {
+  flex: '0 0 80px',
+  color: '#969696',
+  fontSize: 14,
+};
+
+const rowStyle: React.CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: 12,
+};
+
+export default () => {
+  return (
+    <Space direction="horizontal" block gap={12} wrap>
+      <div style={rowStyle}>
+        <span style={labelStyle}>type</span>
+        <Space wrap>
+          {types.map((t) => (
+            <Button key={t} type={t}>
+              {t}
+            </Button>
+          ))}
+        </Space>
+      </div>
+
+      {variants.map((variant) => (
+        <div key={variant} style={rowStyle}>
+          <span style={labelStyle}>{variant}</span>
+          <Space wrap>
+            {colors.map((color) => (
+              <Button key={color} color={color} variant={variant}>
+                {color}
+              </Button>
+            ))}
+          </Space>
+        </div>
+      ))}
+    </Space>
+  );
+};

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

@@ -17,6 +17,7 @@ Buttons are used to start an immediate action.
 ## Code Demo
 
 <code src="./demo/basic.tsx" title="Basic" description="Basic usage of Button"></code>
+<code src="./demo/variant.tsx" title="Variant & Color" description="All combinations of type / color / variant"></code>
 <code src="./demo/size.tsx" title="Size" description="Different button sizes"></code>
 <code src="./demo/disabled.tsx" title="Disabled" description="Disabled button"></code>
 <code src="./demo/loading.tsx" title="Loading" description="Loading button"></code>

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

@@ -17,6 +17,7 @@ demo:
 ## 代码演示
 
 <code src="./demo/basic.tsx" title="基础用法" description="Button的基础用法"></code>
+<code src="./demo/variant.tsx" title="变体与颜色" description="type / color / variant 的全部组合"></code>
 <code src="./demo/size.tsx" title="尺寸" description="不同尺寸的按钮"></code>
 <code src="./demo/disabled.tsx" title="禁用" description="禁用状态的按钮"></code>
 <code src="./demo/loading.tsx" title="加载中" description="加载状态的按钮"></code>

package/src/Button/style/index.less

@@ -66,19 +66,28 @@
     background-color: var(--m-btn-color);
 
     &:not(@{pls}-disabled):hover {
-      background-color: var(--m-btn-hover-color);
+      background-color: color-mix(in srgb, var(--m-btn-color), black 12%);
     }
 
     &:not(@{pls}-disabled):active {
-      background-color: var(--m-btn-active-color);
-      box-shadow: var(--yee-btn-solid-active-box-shadow);
+      background-color: color-mix(in srgb, var(--m-btn-color), black 20%);
+      box-shadow: var(--yee-btn-solid-active-box-shadow)
+        var(--m-btn-active-shadow-color);
     }
   }
 
   // 字体颜色，背景是字体颜色的浅色
   &-filled {
-    color: var(--yee-btn-primary-color);
-    background-color: var(--m-btn-color);
+    color: var(--m-btn-color);
+    background-color: color-mix(in srgb, var(--m-btn-color) 10%, transparent);
+
+    &:not(@{pls}-disabled):hover {
+      background-color: color-mix(in srgb, var(--m-btn-color) 16%, transparent);
+    }
+
+    &:not(@{pls}-disabled):active {
+      background-color: color-mix(in srgb, var(--m-btn-color) 22%, transparent);
+    }
   }
 
   &-outlined {
@@ -154,27 +163,56 @@
     --m-btn-border-active-color: var(--yee-primary-color-active);
     --m-btn-active-color: var(--yee-primary-color-active);
     --m-btn-active-bg-color: var(--yee-text-color-auxiliary);
+    --m-btn-active-shadow-color: var(--yee-primary-color-active);
   }
 
   &-primary {
     --m-btn-color: var(--yee-primary-color);
     --m-btn-hover-color: var(--yee-primary-color-hover);
     --m-btn-active-color: var(--yee-primary-color-active);
-    --m-btn-bg-color: var(--yee-btn-success-bg-color);
-    --m-btn-hover-bg-color: var(--yee-btn-success-bg-color);
-    --m-btn-active-bg-color: var(--yee-btn-success-bg-color);
+    --m-btn-bg-color: var(--yee-btn-primary-bg-color);
+    --m-btn-hover-bg-color: var(--yee-primary-color-hover);
+    --m-btn-active-bg-color: var(--yee-primary-color-active);
+    --m-btn-border-color: var(--yee-primary-color);
+    --m-btn-border-hover-color: var(--yee-primary-color-hover);
+    --m-btn-border-active-color: var(--yee-primary-color-active);
+    --m-btn-active-shadow-color: var(--yee-primary-color-active);
   }
 
   &-success {
-    --m-btn-color: var(--yee-btn-success-color);
+    --m-btn-color: var(--yee-success-color);
+    --m-btn-hover-color: var(--yee-success-color-hover);
+    --m-btn-active-color: var(--yee-success-color-active);
+    --m-btn-border-color: var(--yee-success-color);
+    --m-btn-border-hover-color: var(--yee-success-color-hover);
+    --m-btn-border-active-color: var(--yee-success-color-active);
+    --m-btn-hover-bg-color: var(--yee-success-color-hover);
+    --m-btn-active-bg-color: var(--yee-success-color-active);
+    --m-btn-active-shadow-color: var(--yee-success-color-active);
   }
 
   &-danger {
-    --m-btn-color: var(--yee-btn-danger-color);
+    --m-btn-color: var(--yee-error-color);
+    --m-btn-hover-color: var(--yee-error-color-hover);
+    --m-btn-active-color: var(--yee-error-color-active);
+    --m-btn-border-color: var(--yee-error-color);
+    --m-btn-border-hover-color: var(--yee-error-color-hover);
+    --m-btn-border-active-color: var(--yee-error-color-active);
+    --m-btn-hover-bg-color: var(--yee-error-color-hover);
+    --m-btn-active-bg-color: var(--yee-error-color-active);
+    --m-btn-active-shadow-color: var(--yee-error-color-active);
   }
 
   &-warning {
-    --m-btn-color: var(--yee-btn-warning-color);
+    --m-btn-color: var(--yee-warning-color);
+    --m-btn-hover-color: var(--yee-warning-color-hover);
+    --m-btn-active-color: var(--yee-warning-color-active);
+    --m-btn-border-color: var(--yee-warning-color);
+    --m-btn-border-hover-color: var(--yee-warning-color-hover);
+    --m-btn-border-active-color: var(--yee-warning-color-active);
+    --m-btn-hover-bg-color: var(--yee-warning-color-hover);
+    --m-btn-active-bg-color: var(--yee-warning-color-active);
+    --m-btn-active-shadow-color: var(--yee-warning-color-active);
   }
 
   &-disabled {

package/src/DatePicker/date-picker-mobile.tsx

@@ -139,7 +139,7 @@ const DatePickerMobile: FC<DatePickerProps> = (props) => {
         height="auto"
         footer={
           <Button block type="primary" onClick={handleConfirm}>
-            {datepicker?.confirm || 'Confirm'}
+            {datepicker.confirm}
           </Button>
         }
       >

package/src/Ellipsis/ellipsis.tsx

@@ -3,6 +3,7 @@ import { motion } from 'motion/react';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import Button from '../Button';
 import useMergedState from '../hooks/useMergedState';
+import { useLocale } from '../locale';
 import type { EllipsisProps } from './interface';
 
 import './style/index.less';
@@ -32,6 +33,9 @@ const Ellipsis: React.FC<EllipsisProps> = (props) => {
   const [needEllipsis, setNeedEllipsis] = useState(false);
   const [maxHeight, setMaxHeight] = useState<number>(0);
 
+  const { locale } = useLocale();
+  const { ellipsis: ellipsisLocale } = locale;
+
   const [mergedExpanded, setMergedExpanded] = useMergedState(defaultExpanded, {
     value: controlledExpanded,
   });
@@ -65,14 +69,10 @@ const Ellipsis: React.FC<EllipsisProps> = (props) => {
   };
 
   const isCollapsed = !mergedExpanded && needEllipsis;
-  const isZhCN =
-    typeof document !== 'undefined'
-      ? (document.documentElement.lang || 'zh-CN').startsWith('zh')
-      : true;
 
   const buttonText = mergedExpanded
-    ? (collapseText ?? (isZhCN ? '收起' : 'Collapse'))
-    : (expandText ?? (isZhCN ? '展开' : 'Expand'));
+    ? (collapseText ?? ellipsisLocale.collapse)
+    : (expandText ?? ellipsisLocale.expand);
 
   const renderButton = () => {
     if (!showExpandButton || !needEllipsis) return null;

package/src/Form/Form.tsx

@@ -5,8 +5,8 @@ import useEvent from '../hooks/useEvent';
 import mergeContextToProps from '../utils/mergeContextToProps';
 import FieldContext from './FieldContext';
 import FormContext from './FormContext';
+import useForm from './hooks/useForm';
 import type { FormProps } from './interface';
-import useForm from './useForm';
 
 import './style/index.less';
 

package/src/Form/form-store.ts

@@ -43,8 +43,8 @@ export class FormStore {
   // List key manager
   private listKeyManagers: Map<string, { keys: number[]; id: number }> =
     new Map();
-  // Default validation message
-  private defaultValidateMessage = 'This is required field.';
+  // Default validation message (overridden by useForm via locale)
+  private defaultValidateMessage = '';
   // useWatch subscription management
   private watchers: Map<string, Set<() => void>> = new Map();
   // Field.Group group validators

package/src/Form/{useForm.ts → hooks/useForm.ts}

@@ -174,9 +174,9 @@
 // }
 
 import { useRef } from 'react';
-import { useLocale } from '../locale';
-import { FormStore } from './form-store';
-import { FormInstance } from './interface';
+import { useLocale } from '../../locale';
+import { FormStore } from '../form-store';
+import { FormInstance } from '../interface';
 
 export default function useForm<Values = any>(
   form?: FormInstance<Values>,
@@ -189,9 +189,7 @@ export default function useForm<Values = any>(
     } else {
       const formStore = new FormStore();
       // 设置默认验证消息
-      formStore.setDefaultValidateMessage(
-        locale.form?.defaultRequiredMessage || '该项为必填项',
-      );
+      formStore.setDefaultValidateMessage(locale.form.defaultRequiredMessage);
       formRef.current = formStore.getForm();
     }
   }

package/src/Form/hooks/useFormInstance.ts

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import FieldContext from '../FieldContext';
+
+export default function useFormInstance() {
+  const form = useContext(FieldContext);
+
+  if (typeof form.getFieldsValue !== 'function') {
+    throw new Error('useFormInstance must be used inside a <Form>');
+  }
+
+  return form;
+}

package/src/Form/{useWatch.ts → hooks/useWatch.ts}

@@ -1,6 +1,6 @@
 import { useContext, useLayoutEffect, useState } from 'react';
-import FieldContext from './FieldContext';
-import type { FormInstance, NamePath } from './interface';
+import FieldContext from '../FieldContext';
+import type { FormInstance, NamePath } from '../interface';
 
 function useWatch<T = any>(
   namePath?: NamePath,

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

@@ -71,7 +71,9 @@ High performance form component with data scope management.
 
 | Method          | Type                                                    | Description                              |
 | --------------- | ------------------------------------------------------- | ---------------------------------------- |
+| Form.useForm     | `(form?: FormInstance) => [FormInstance]`                    | Create a Form instance; pass an external form for controlled usage |
 | Form.useWatch   | `(namePath?: NamePath, form?: FormInstance) => T \| undefined` | Watch form field value changes, omit namePath to get all values |
+| Form.useFormInstance | `() => FormInstance` | Get the nearest Form instance from context, must be used inside a `<Form>` |
 
 ### Field.GroupProps
 

package/src/Form/index.ts

@@ -2,8 +2,9 @@ import Field from './Field';
 import InternalForm from './Form';
 import Group from './Group';
 import List from './List';
-import useForm from './useForm';
-import useWatch from './useWatch';
+import useForm from './hooks/useForm';
+import useFormInstance from './hooks/useFormInstance';
+import useWatch from './hooks/useWatch';
 
 type FieldInterface = typeof Field & {
   Group: typeof Group;
@@ -12,6 +13,7 @@ type FieldInterface = typeof Field & {
 type FormInterface = typeof InternalForm & {
   useForm: typeof useForm;
   useWatch: typeof useWatch;
+  useFormInstance: typeof useFormInstance;
   Field: FieldInterface;
   List: typeof List;
 };
@@ -19,6 +21,7 @@ type FormInterface = typeof InternalForm & {
 const Form = InternalForm as FormInterface;
 Form.useForm = useForm;
 Form.useWatch = useWatch;
+Form.useFormInstance = useFormInstance;
 const FormField = Field as FieldInterface;
 FormField.Group = Group;
 Form.Field = FormField;

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

@@ -70,7 +70,9 @@ toc: 'content'
 
 | 方法名        | 类型                                                           | 描述                                         |
 | ------------- | -------------------------------------------------------------- | -------------------------------------------- |
+| Form.useForm | `(form?: FormInstance) => [FormInstance]` | 创建 Form 实例，传入外部 form 可受控使用 |
 | Form.useWatch | `(namePath?: NamePath, form?: FormInstance) => T \| undefined` | 监听表单字段值变化，不传 namePath 返回所有值 |
+| Form.useFormInstance | `() => FormInstance` | 获取当前上下文中最近的 Form 实例，须在 `<Form>` 内调用 |
 
 ### Field.GroupProps
 

package/src/Input/password.tsx

@@ -1,6 +1,7 @@
 import { Eye, EyeOff } from 'lucide-react';
 import React, { forwardRef, useContext } from 'react';
 import { GlobalContext } from '../Config-Provider';
+import { useLocale } from '../locale';
 import mergeContextToProps from '../utils/mergeContextToProps';
 import Input from './input';
 import type { PasswordProps } from './interface';
@@ -11,6 +12,8 @@ const Password = forwardRef<HTMLInputElement, PasswordProps>(
   (baseProps, ref) => {
     const { password } = useContext(GlobalContext);
     const props = mergeContextToProps(baseProps, password);
+    const { locale } = useLocale();
+    const { input: inputLocale } = locale;
 
     const {
       visibilityToggle = true,
@@ -45,7 +48,7 @@ const Password = forwardRef<HTMLInputElement, PasswordProps>(
           onKeyDown={handleKeyDown}
           tabIndex={0}
           role="button"
-          aria-label="隐藏密码"
+          aria-label={inputLocale.hidePassword}
         />
       ) : (
         <Eye
@@ -55,7 +58,7 @@ const Password = forwardRef<HTMLInputElement, PasswordProps>(
           onKeyDown={handleKeyDown}
           tabIndex={0}
           role="button"
-          aria-label="显示密码"
+          aria-label={inputLocale.showPassword}
         />
       );
 

package/src/Pagination/pagination.tsx

@@ -5,6 +5,7 @@ import { GlobalContext } from '../Config-Provider';
 import Input from '../Input';
 import Select from '../Select';
 import useMergedState from '../hooks/useMergedState';
+import { useLocale } from '../locale';
 import mergeContextToProps from '../utils/mergeContextToProps';
 import type { PaginationProps } from './interface';
 import Items from './items';
@@ -15,6 +16,8 @@ const Pagination = React.forwardRef(
   (baseprops: PaginationProps, ref: React.Ref<HTMLUListElement>) => {
     const { pagination } = useContext(GlobalContext);
     const props = mergeContextToProps(baseprops, pagination);
+    const { locale } = useLocale();
+    const { pagination: paginationLocale } = locale;
     const {
       prefixCls = 'yee-pagination',
       disabled,
@@ -235,7 +238,7 @@ const Pagination = React.forwardRef(
 
       return (
         <li className={`${prefixCls}-quick-jumper`} key="quick-jumper">
-          <span>{'Go to'}</span>
+          <span>{paginationLocale.jumpTo}</span>
           {renderNumber(clear)}
         </li>
       );

package/src/RangePicker/range-picker-mobile.tsx

@@ -307,8 +307,8 @@ const RangePickerMobile: FC<RangePickerProps> = (props) => {
             )}
             <Button block type="primary" onClick={handleTabConfirm}>
               {activeTab === 'start'
-                ? rangepicker?.next || 'Next'
-                : rangepicker?.confirm || 'Confirm'}
+                ? rangepicker.next
+                : rangepicker.confirm}
             </Button>
           </div>
         }
@@ -323,7 +323,7 @@ const RangePickerMobile: FC<RangePickerProps> = (props) => {
             onClick={() => setActiveTab('start')}
             type="button"
           >
-            {rangepicker?.startPlaceholder || '开始日期'}
+            {rangepicker.startPlaceholder}
           </button>
           <button
             className={clsx(
@@ -333,7 +333,7 @@ const RangePickerMobile: FC<RangePickerProps> = (props) => {
             onClick={() => setActiveTab('end')}
             type="button"
           >
-            {rangepicker?.endPlaceholder || '结束日期'}
+            {rangepicker.endPlaceholder}
           </button>
         </div>
 

package/src/Space/compact.tsx

@@ -20,7 +20,7 @@ const Compact = forwardRef<HTMLDivElement, SpaceCompactProps>((props, ref) => {
     (child: React.ReactElement, index) => {
       if (React.isValidElement(child)) {
         const first = index === 0;
-        const middle = index > 0 && index < total;
+        const middle = index > 0 && index < total - 1;
         const last = index > 0 && index === total - 1;
         const props = child.props as any;
         return React.cloneElement(child as any, {

package/src/Space/demo/compact.tsx

@@ -1,21 +1,11 @@
-import { Space } from '@rainbow-oh/yee-c';
+import { Button, Input, Space } from '@rainbow-oh/yee-c';
 import React from 'react';
 
 export default () => {
   return (
     <Space.Compact>
-      <input placeholder="Enter name" style={{ padding: '4px 11px' }} />
-      <button
-        type="button"
-        style={{
-          background: '#1890ff',
-          color: 'white',
-          border: 'none',
-          padding: '4px 11px',
-        }}
-      >
-        Submit
-      </button>
+      <Input placeholder="Enter name" />
+      <Button type="primary">Submit</Button>
     </Space.Compact>
   );
 };

package/src/Space/space.tsx

@@ -47,6 +47,8 @@ const Space = forwardRef<HTMLDivElement, SpaceProps>((baseprops, ref) => {
       return null;
     }
 
+    let loopCount = 1;
+
     const loop = (childs: React.ReactNode[]) => {
       let res = [] as React.ReactElement[];
 
@@ -60,6 +62,7 @@ const Space = forwardRef<HTMLDivElement, SpaceProps>((baseprops, ref) => {
         const itemChildren = isItem ? (child.props as any).children : child;
 
         if (React.isValidElement(child) && child.type === React.Fragment) {
+          loopCount++;
           res = res.concat(
             loop(React.Children.toArray((child.props as any).children)),
           );
@@ -72,7 +75,7 @@ const Space = forwardRef<HTMLDivElement, SpaceProps>((baseprops, ref) => {
                 itemClassName,
               )}
               style={{ ...styles?.item, ...itemStyle }}
-              key={index}
+              key={`${loopCount}-${index}`}
             >
               {itemChildren}
             </div>,

package/src/Space/style/index.less

@@ -18,12 +18,22 @@
   }
 
   &-compact {
+    display: inline-flex;
     align-items: flex-end;
 
     &-first-item {
       margin-inline-end: -1px;
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+
+      &:hover,
+      &:active {
+        position: relative;
+        z-index: 1;
+      }
 
       .yee-input-wrapper,
+      .yee-input,
       .yee-tags,
       &.yee-btn {
         border-top-right-radius: 0;
@@ -39,6 +49,13 @@
 
     &-middle-item {
       margin-inline-end: -1px;
+      border-radius: 0;
+
+      &:hover,
+      &:active {
+        position: relative;
+        z-index: 1;
+      }
 
       .yee-input-wrapper,
       .yee-tags,
@@ -52,19 +69,22 @@
         z-index: 1;
       }
     }
+
+    &-last-item {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+
+      .yee-input-wrapper,
+      .yee-tags,
+      &.yee-btn {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+    }
   }
 
   &-item {
     // flex: 1 1 auto;
     display: inline-flex;
   }
-
-  &-last-item {
-    .yee-input-wrapper,
-    .yee-tags,
-    &.yee-btn {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-    }
-  }
 }

package/src/Table/tbody/index.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useLocale } from '../../locale';
 import { TableBodyProps } from '../interface';
 import { TableCtx } from '../table';
 import LazyRow from './lazy-row';
@@ -8,11 +9,13 @@ const TableBody: React.FC<TableBodyProps> = (props) => {
   const { columns, pageData, lazyLoad, ...rest } = props;
 
   const { prefixCls } = React.useContext(TableCtx);
+  const { locale } = useLocale();
+  const { table: tableLocale } = locale;
 
   const empty = (
     <tbody className={`${prefixCls}-tbody`}>
       <tr className={`${prefixCls}-no-record`}>
-        <td colSpan={999}>{'There is no record.'}</td>
+        <td colSpan={999}>{tableLocale.emptyText}</td>
       </tr>
     </tbody>
   );