@rainbow-oh/yee-c 0.8.17 → 0.8.19

package/package.json

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

package/src/Checkbox/checkbox-group.tsx

@@ -76,7 +76,7 @@ const CheckboxGroup = (baseprops: CheckboxGroupProps) => {
           <Checkbox
             disabled={disabled}
             {...option}
-            checked={mergedValue.includes(option.value)}
+            checked={mergedValue?.includes(option.value)}
             key={option.value || index}
           >
             {option.label}

package/src/Form/Group.tsx

@@ -12,7 +12,7 @@ import Grid from '../Grid';
 import FieldContext from './FieldContext';
 import FormContext from './FormContext';
 import type { FieldGroupProps, NamePath, ValidateMessage } from './interface';
-import { runValidator } from './utils/validate';
+import { isEmpty, runValidator } from './utils/validate';
 
 const Group: React.FC<FieldGroupProps> = (props) => {
   const { label, required, rules, cols, children, style, className } = props;
@@ -54,9 +54,7 @@ const Group: React.FC<FieldGroupProps> = (props) => {
 
     // Required validation: error if any child field is empty
     if (required) {
-      const hasEmpty = childNames.some(
-        (name) => !values[name] && values[name] !== 0,
-      );
+      const hasEmpty = childNames.some((name) => isEmpty(values[name]));
       if (hasEmpty) {
         errors.push({
           name: childNames,

package/src/Form/style/index.less

@@ -88,12 +88,14 @@
       --yee-input-border-color: var(--yee-error-color);
       --yee-input-hover-border-color: var(--yee-error-color-hover);
       --yee-input-focus-bs-color: var(--yee-error-color-border);
+      --yee-checkbox-border-color: var(--yee-error-color);
     }
 
     &&-warning {
       --yee-input-border-color: var(--yee-warning-color);
       --yee-input-hover-border-color: var(--yee-warning-color-hover);
       --yee-input-focus-bs-color: var(--yee-warning-color-border);
+      --yee-checkbox-border-color: var(--yee-warning-color);
     }
   }
 }

package/src/Form/utils/validate.ts

@@ -1,7 +1,12 @@
 import type { Rule } from '../interface';
 
-function isEmpty(v: unknown) {
-  return v === undefined || v === null || v === '' ? true : false;
+export function isEmpty(value: unknown) {
+  return (
+    value === undefined ||
+    value === null ||
+    value === '' ||
+    (Array.isArray(value) && value.length === 0)
+  );
 }
 
 function verifyRuleOfMin(min: number, value: unknown) {

package/src/Select/demo/loading.tsx

@@ -0,0 +1,28 @@
+import { Select, Space } from '@rainbow-oh/yee-c';
+import React from 'react';
+
+const options = [
+  { label: 'Apple', value: 'apple' },
+  { label: 'Banana', value: 'banana' },
+  { label: 'Orange', value: 'orange' },
+];
+
+export default () => {
+  return (
+    <Space direction="vertical">
+      <Select
+        loading
+        options={options}
+        style={{ width: 200 }}
+        placeholder="Loading"
+      />
+      <Select
+        loading
+        disabled
+        defaultValue="apple"
+        options={options}
+        style={{ width: 200 }}
+      />
+    </Space>
+  );
+};

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

@@ -17,6 +17,7 @@ Select component for choosing from a set of options.
 <code src="./demo/basic.tsx" title="Basic" description="Basic usage of Select"></code>
 <code src="./demo/size.tsx" title="Size" description="Different sizes of Select"></code>
 <code src="./demo/disabled.tsx" title="Disabled" description="Disabled Select"></code>
+<code src="./demo/loading.tsx" title="Loading" description="Loading Select, optionally combined with disabled"></code>
 <code src="./demo/allowClear.tsx" title="Allow Clear" description="Allow clear selected value"></code>
 <code src="./demo/multiple.tsx" title="Multiple" description="Multiple selection mode"></code>
 <code src="./demo/search.tsx" title="Search" description="Searchable Select"></code>
@@ -39,6 +40,7 @@ Select component for choosing from a set of options.
 | defaultValue | `string \| number \| Array<string \| number>` | Default value | - |
 | value | `string \| number \| Array<string \| number>` | Controlled value | - |
 | disabled | `boolean` | Whether disabled | - |
+| loading | `boolean` | Whether data is loading; displays a spinner in the selector suffix | `false` |
 | placeholder | `string` | Placeholder text | - |
 | placement | `'top' \| 'bottom' \| 'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight'` | Dropdown position | - |
 | searchable | `boolean` | Whether searchable | - |

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

@@ -17,6 +17,7 @@ toc: 'content'
 <code src="./demo/basic.tsx" title="基础用法" description="Select的基础用法"></code>
 <code src="./demo/size.tsx" title="尺寸" description="不同尺寸的Select"></code>
 <code src="./demo/disabled.tsx" title="禁用" description="禁用的Select"></code>
+<code src="./demo/loading.tsx" title="加载中" description="加载中的 Select，可与 disabled 组合使用"></code>
 <code src="./demo/allowClear.tsx" title="可清除" description="可清除已选值"></code>
 <code src="./demo/multiple.tsx" title="多选" description="多选模式"></code>
 <code src="./demo/search.tsx" title="可搜索" description="可搜索的Select"></code>
@@ -39,6 +40,7 @@ toc: 'content'
 | defaultValue | `string \| number \| Array<string \| number>` | 默认值 | - |
 | value | `string \| number \| Array<string \| number>` | 受控值 | - |
 | disabled | `boolean` | 是否禁用 | - |
+| loading | `boolean` | 是否处于加载状态，加载时选择框后缀显示加载图标 | `false` |
 | placeholder | `string` | 选择框默认文本 | - |
 | placement | `'top' \| 'bottom' \| 'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight'` | 下拉框弹出位置 | - |
 | searchable | `boolean` | 是否可搜索 | - |

package/src/Select/interface.ts

@@ -1,7 +1,6 @@
-import type { TriggerProps } from '../Trigger';
 import type { SelectorProps } from '../Selector';
+import type { TriggerProps } from '../Trigger';
 import type { DataAttributeProps } from '../utils/types';
-
 export type Option = {
   /**
    * Whether disabled
@@ -26,7 +25,10 @@ export type Option = {
 };
 
 export interface SelectProps
-  extends DataAttributeProps, Pick<SelectorProps, 'size'>, Omit<TriggerProps, 'popup' | 'children'> {
+  extends
+    DataAttributeProps,
+    Pick<SelectorProps, 'size'>,
+    Omit<TriggerProps, 'popup' | 'children'> {
   /**
    * Custom class name prefix
    * */
@@ -60,6 +62,11 @@ export interface SelectProps
    * Whether disabled
    */
   disabled?: boolean;
+  /**
+   * Whether data is loading
+   * @default false
+   */
+  loading?: boolean;
   /**
    * Placeholder text for the select box
    */

package/src/Select/select.tsx

@@ -51,6 +51,7 @@ const Select = (baseprops: SelectProps) => {
     defaultValue,
     optionFilterProp = 'label',
     disabled,
+    loading,
     onChange,
     onFilter,
     virtual,
@@ -233,6 +234,7 @@ const Select = (baseprops: SelectProps) => {
         value={searchValue}
         options={options}
         disabled={disabled}
+        loading={loading}
         selectedKeys={mergedValue}
         onOpenChange={handleOpenChange}
         onClear={handleClear}

package/src/Selector/selector.tsx

@@ -224,7 +224,16 @@ const Selector = React.forwardRef(
       return (
         <span className={`${prefixCls}-arrow`}>
           {loading ? (
-            <Spin size="small" />
+            <Spin
+              variant="ring"
+              size="small"
+              style={
+                {
+                  '--m-indicator-dot-bg-color':
+                    'var(--yee-text-color-secondary)',
+                } as React.CSSProperties
+              }
+            />
           ) : suffix ? (
             typeof suffix === 'function' ? (
               suffix()

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

@@ -43,6 +43,7 @@ A component for selecting one or more options from table data, combining feature
 | value | `SelectionKeyType \| SelectionKeyType[]` | Controlled value | - |
 | defaultValue | `SelectionKeyType \| SelectionKeyType[]` | Default value | - |
 | disabled | `boolean` | Whether disabled | - |
+| loading | `boolean` | Whether data is loading; displays a gray loading indicator | `false` |
 | placement | `'bottomLeft' \| 'topLeft'` | Popup placement | `'bottomLeft'` |
 | searchable | `boolean` | Whether searchable | `true` |
 | searchOnInput | `boolean` | Whether to search while typing | `true` |

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

@@ -43,6 +43,7 @@ toc: 'content'
 | value | `SelectionKeyType \| SelectionKeyType[]` | 受控值 | - |
 | defaultValue | `SelectionKeyType \| SelectionKeyType[]` | 默认值 | - |
 | disabled | `boolean` | 是否禁用 | - |
+| loading | `boolean` | 是否处于加载状态，加载时显示灰色加载图标 | `false` |
 | placement | `'bottomLeft' \| 'topLeft'` | 弹出层位置 | `'bottomLeft'` |
 | searchable | `boolean` | 是否可搜索 | `true` |
 | searchOnInput | `boolean` | 是否边输入边搜索 | `true` |

package/src/TableSelect/interface.ts

@@ -131,6 +131,11 @@ export interface TableSelectProps
    * Whether disabled
    */
   disabled?: boolean;
+  /**
+   * Whether data is loading
+   * @default false
+   */
+  loading?: boolean;
   /**
    * Input direction (for special scenarios)
    */

package/src/TableSelect/table-select.tsx

@@ -37,6 +37,7 @@ const TableSelect = (baseprops: TableSelectProps) => {
     defaultValue,
     placement = 'bottomLeft',
     disabled,
+    loading,
     rowSelection,
     dataSource,
     rowKey = 'id',
@@ -175,6 +176,7 @@ const TableSelect = (baseprops: TableSelectProps) => {
     options: selectorOptions,
     open: open,
     disabled: disabled,
+    loading: loading,
     value: searchValue,
     selectedKeys: mergedValue,
     onSearch: handleSearch,

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

@@ -37,6 +37,7 @@ Tree selection control.
 | defaultValue | `string \| number \| Array<string \| number>` | Default selected value | - |
 | value | `string \| number \| Array<string \| number>` | Selected value (controlled) | - |
 | disabled | `boolean` | Disable the component | - |
+| loading | `boolean` | Whether data is loading; displays a gray loading indicator | `false` |
 | placeholder | `string` | Placeholder text | - |
 | placement | `'top' \| 'bottom' \| 'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight'` | Dropdown placement | `'bottomLeft'` |
 | searchable | `boolean` | Enable search functionality | `true` |

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

@@ -37,6 +37,7 @@ toc: 'content'
 | defaultValue | `string \| number \| Array<string \| number>` | 默认值 | - |
 | value | `string \| number \| Array<string \| number>` | 受控值 | - |
 | disabled | `boolean` | 是否禁用 | - |
+| loading | `boolean` | 是否处于加载状态，加载时显示灰色加载图标 | `false` |
 | placeholder | `string` | 选择框默认文本 | - |
 | placement | `'top' \| 'bottom' \| 'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight'` | 下拉框弹出位置 | `'bottomLeft'` |
 | searchable | `boolean` | 是否可搜索 | `true` |

package/src/TreeSelect/interface.ts

@@ -37,6 +37,11 @@ export interface TreeSelectProps<T = any>
    * Whether disabled
    */
   disabled?: boolean;
+  /**
+   * Whether data is loading
+   * @default false
+   */
+  loading?: boolean;
   /**
    * Placeholder text for the select box
    */

package/src/TreeSelect/tree-select.tsx

@@ -32,6 +32,7 @@ const TreeSelect = <T extends Record<string, unknown> = any>(
     defaultValue,
     checkable = false,
     multiple = false, // eslint-disable-line @typescript-eslint/no-unused-vars
+    loading,
     optionLabelProp = 'label',
     onChange,
     onFilter,
@@ -242,6 +243,7 @@ const TreeSelect = <T extends Record<string, unknown> = any>(
         mode={mode}
         value={searchValue}
         options={selectedOptions}
+        loading={loading}
         selectedKeys={mergedValue}
         onOpenChange={handleOpenChange}
         onClear={handleClear}

package/src/version.ts

@@ -4,7 +4,7 @@ declare global {
   }
 }
 
-export const version = "0.8.17";
+export const version = "0.8.19";
 
 if (typeof window !== 'undefined') {
   window.__yee_c_version__ = version;