@rainbow-oh/yee-c 0.6.1 → 0.6.3

package/package.json

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

package/src/Form/demo/layout.tsx

@@ -1,31 +1,26 @@
 import { Button, Form, Grid, Input, Radio, Space } from '@rainbow-oh/yee-c';
-import React from 'react';
+import React, { useState } from 'react';
 
 export default () => {
   const [form] = Form.useForm();
+  const [layout, setLayout] = useState<'vertical' | 'horizontal'>('vertical');
 
   return (
     <div>
       <Radio.Group
-        defaultValue="vertical"
-        onChange={(value) => {
-          form.setFieldsValue({ layout: value });
-        }}
+        value={layout}
+        onChange={(value) => setLayout(value as 'vertical' | 'horizontal')}
         options={[
           { value: 'vertical', label: 'Vertical' },
           { value: 'horizontal', label: 'Horizontal' },
         ]}
-      ></Radio.Group>
+      />
 
       <br />
       <br />
 
-      <Form
-        form={form}
-        initialValues={{ layout: 'vertical' }}
-        layout="vertical"
-      >
-        <Grid cols={1}>
+      <Form form={form} initialValues={{}} layout={layout}>
+        <Grid cols={2}>
           <Form.Field name="name" label="Name" required>
             <Input placeholder="Please input your name" />
           </Form.Field>

package/src/Form/style/index.less

@@ -1,16 +1,40 @@
 @pls: .yee-form;
 
+// Horizontal form-item layout: label pinned left at a fixed width (right-
+// aligned), control fills the remaining space. Shared by Form-level layout
+// (ancestor .yee-form-horizontal cascades onto every item, including
+// Field.Group) and Field-level layout (the item carries .yee-form-item-
+// horizontal itself). Uses descendant selectors (not &) so the mixin expands
+// correctly under either anchor.
+.horizontal-layout() {
+  @{pls}-item-row {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--yee-form-item-horizontal-label-gap, 12px);
+  }
+
+  @{pls}-item-label {
+    width: var(--yee-form-item-horizontal-label-width, 120px);
+    flex-shrink: 0;
+    margin-bottom: 0;
+    justify-content: flex-end;
+  }
+
+  @{pls}-item-control {
+    flex: 1;
+    min-width: 0;
+  }
+}
+
 @{pls} {
+  // Form-level horizontal: cascades onto every descendant item.
   &-horizontal {
-    @{pls}-item {
-      &-row {
-        display: flex;
-      }
+    .horizontal-layout();
+  }
 
-      &-label {
-        margin-bottom: 0;
-      }
-    }
+  // Field-level horizontal: a single item opts in via layout="horizontal".
+  &-item-horizontal {
+    .horizontal-layout();
   }
 
   &-item {

package/src/Grid/item.tsx

@@ -1,5 +1,6 @@
 import clsx from 'clsx';
 import React from 'react';
+import omit from '../utils/omit';
 import type { GridItemProps } from './interface';
 
 const Item: React.FC<GridItemProps> = (props) => {
@@ -15,7 +16,7 @@ const Item: React.FC<GridItemProps> = (props) => {
     <div
       className={clsx(`${prefixCls}-item`, className)}
       style={{ ...spanStyle, ...style }}
-      {...rest}
+      {...omit(rest, ['colspan'])}
     >
       {children}
     </div>

package/src/Select/demo/orphan.tsx

@@ -0,0 +1,61 @@
+import { Select, Space } from '@rainbow-oh/yee-c';
+import React, { useState } from 'react';
+
+const options = [
+  { label: 'Apple', value: 'apple' },
+  { label: 'Banana', value: 'banana' },
+  { label: 'Orange', value: 'orange' },
+  { label: 'Pineapple', value: 'pineapple' },
+];
+
+// Inline style applied to an orphan value (a value not present in options)
+const orphanStyle: React.CSSProperties = {
+  color: '#fa8c16',
+  fontStyle: 'italic',
+  textDecoration: 'underline dotted',
+};
+
+export default () => {
+  // 'mangox' is not in options → rendered as an orphan value
+  const [single, setSingle] = useState('mangox');
+  // 'durian' is not in options → rendered as an orphan tag alongside normal ones
+  const [multi, setMulti] = useState(['apple', 'durian', 'banana']);
+
+  return (
+    <Space direction="vertical" style={{ width: '100%' }}>
+      <div>
+        <div style={{ marginBottom: 8 }}>
+          Single — orphan value styled via <code>orphanStyle</code>
+        </div>
+        <Select
+          value={single}
+          onChange={(val) => setSingle(val as string)}
+          options={options}
+          orphanStyle={orphanStyle}
+          style={{ width: 300 }}
+          placeholder="Please select"
+        />
+      </div>
+      <div>
+        <div style={{ marginBottom: 8 }}>
+          Multiple — orphan tag styled via <code>orphanClassName</code>
+        </div>
+        <Select
+          mode="multiple"
+          value={multi}
+          onChange={(val) => setMulti(val as string[])}
+          options={options}
+          orphanClassName="demo-orphan-tag"
+          style={{ width: 300 }}
+          placeholder="Please select"
+        />
+      </div>
+      <style>{`
+        .demo-orphan-tag {
+          color: #fa541c;
+          font-style: italic;
+        }
+      `}</style>
+    </Space>
+  );
+};

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

@@ -21,6 +21,7 @@ Select component for choosing from a set of options.
 <code src="./demo/multiple.tsx" title="Multiple" description="Multiple selection mode"></code>
 <code src="./demo/search.tsx" title="Search" description="Searchable Select"></code>
 <code src="./demo/tags.tsx" title="Tags" description="Tags mode Select"></code>
+<code src="./demo/orphan.tsx" title="Orphan Value" description="Display and custom styling when the value is not in options"></code>
 <code src="./demo/virtual.tsx" title="Virtual Scroll" description="Virtual scrolling for large datasets (thousands of options)"></code>
 
 ## API
@@ -45,6 +46,8 @@ Select component for choosing from a set of options.
 | codeTableName | `string` | Code table name | - |
 | optionFilterProp | `string` | Property to filter by when searching | `label` |
 | optionLabelProp | `string \| (() => string)` | Property to display in the input box | - |
+| orphanClassName | `string` | Extra class name for the displayed value when it is not in `options` (orphan value). An orphan value is shown as the raw value itself by default | - |
+| orphanStyle | `React.CSSProperties` | Extra inline style for the displayed value when it is not in `options` (orphan value) | - |
 | onChange | `(value: string \| number \| Array<string \| number>, options?: Option \| undefined \| Option[]) => void` | Value change callback | - |
 | onFilter | `(value: string, options: Array<Option>) => Array<Option>` | Search callback | - |
 | virtual | `boolean` | Enable virtual scrolling. Only the options in the visible window are rendered, so the DOM node count stays constant regardless of the total. Recommended for hundreds or thousands of options | `false` |

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

@@ -21,6 +21,7 @@ toc: 'content'
 <code src="./demo/multiple.tsx" title="多选" description="多选模式"></code>
 <code src="./demo/search.tsx" title="可搜索" description="可搜索的Select"></code>
 <code src="./demo/tags.tsx" title="标签模式" description="标签模式的Select"></code>
+<code src="./demo/orphan.tsx" title="孤儿值" description="value 不在 options 中时的显示与自定义样式"></code>
 <code src="./demo/virtual.tsx" title="虚拟滚动" description="大数据量（几千条）下的虚拟滚动"></code>
 
 ## API
@@ -45,6 +46,8 @@ toc: 'content'
 | codeTableName | `string` | 代码表 | - |
 | optionFilterProp | `string` | 搜索时对比的属性 | `label` |
 | optionLabelProp | `string \| (() => string)` | 回填到选择框里的属性 | - |
+| orphanClassName | `string` | value 不在 options 中（孤儿值）时，给显示值追加的类名。孤儿值默认直接显示 value 本身 | - |
+| orphanStyle | `React.CSSProperties` | value 不在 options 中（孤儿值）时，给显示值追加的行内样式 | - |
 | onChange | `(value: string \| number \| Array<string \| number>, options?: Option \| undefined \| Option[]) => void` | 值改变时的回调函数 | - |
 | onFilter | `(value: string, options: Array<Option>) => Array<Option>` | 搜索时的回调函数 | - |
 | virtual | `boolean` | 是否开启虚拟滚动。开启后仅渲染可视区内的选项，DOM 节点数与数据总量无关，适合成百上千条数据 | `false` |

package/src/Select/interface.ts

@@ -95,6 +95,17 @@ export interface SelectProps
    * Property to backfill into the select box
    */
   optionLabelProp?: 'string' | (() => string);
+  /**
+   * Extra class name applied to the displayed value when it is not found
+   * in `options` (an "orphan" value). An orphan value is shown as the raw
+   * value itself; this lets you style it differently (e.g. to flag stale data).
+   */
+  orphanClassName?: string;
+  /**
+   * Extra inline style applied to the displayed value when it is not found
+   * in `options` (an "orphan" value).
+   */
+  orphanStyle?: React.CSSProperties;
   /**
    * Callback when value changes
    */

package/src/Select/select.tsx

@@ -32,6 +32,8 @@ const Select = (baseprops: SelectProps) => {
     virtual,
     itemHeight,
     listHeight,
+    orphanClassName,
+    orphanStyle,
     ...rest
   } = props;
 
@@ -68,7 +70,9 @@ const Select = (baseprops: SelectProps) => {
     virtualApiRef.current?.scrollToIndex(index);
   }, []);
 
-  const getOptions = (keys: string | number | Array<string | number>) => {
+  const getOptions = (
+    keys: string | number | Array<string | number>,
+  ) => {
     if (keys === '' || keys === null) {
       return undefined;
     }
@@ -76,10 +80,20 @@ const Select = (baseprops: SelectProps) => {
       if (keys.length === 0) {
         return [];
       }
-      return options.filter((opt) => keys.includes(opt.value));
+      // 按 keys 顺序回填，找不到的 key 构造 label=value 的兜底项（孤儿值），
+      // 与 Selector 的显示保持一致，避免 onChange 第二参数丢值。
+      return keys.map((key) => {
+        const opt = options.find((o) => o.value === key);
+        return opt ?? { value: key, label: String(key) };
+      });
     }
 
-    return options.find((opt) => opt.value === keys);
+    return (
+      options.find((opt) => opt.value === keys) ?? {
+        value: keys,
+        label: String(keys),
+      }
+    );
   };
 
   const handleSelect = (
@@ -193,6 +207,8 @@ const Select = (baseprops: SelectProps) => {
         onRemove={handleRemove as any}
         onSearch={handleSearch}
         onKeyDown={onKeyDown}
+        orphanClassName={orphanClassName}
+        orphanStyle={orphanStyle}
       />
     </Trigger>
   );

package/src/Selector/interface.ts

@@ -79,6 +79,17 @@ export interface PureSelectorProps {
    * Custom text displayed in the input
    */
   optionLabelProp?: string | ((option: TagType) => string);
+  /**
+   * Extra class name applied to the displayed value/tag when its key is not
+   * found in `options` (an "orphan" value). The orphan value is shown as the
+   * raw key itself; this lets you style it differently (e.g. to flag stale data).
+   */
+  orphanClassName?: string;
+  /**
+   * Extra inline style applied to the displayed value/tag when its key is not
+   * found in `options` (an "orphan" value).
+   */
+  orphanStyle?: React.CSSProperties;
 
   /**
    * Control the open state

package/src/Selector/selector.tsx

@@ -37,6 +37,8 @@ const Selector = React.forwardRef(
       disabled,
       options = [],
       selectedKeys,
+      orphanClassName,
+      orphanStyle,
       allowClear = true,
       placeholder,
       closable = true,
@@ -60,17 +62,29 @@ const Selector = React.forwardRef(
     });
 
     const tags = useMemo(() => {
-      return Array.isArray(options)
-        ? options
-            .filter((opt) => selectedKeys.includes(opt.value))
-            .map((opt) => ({
-              ...opt,
-              children:
-                typeof optionLabelProp === 'function'
-                  ? optionLabelProp(opt)
-                  : opt[optionLabelProp],
-            }))
-        : [];
+      if (!Array.isArray(options)) {
+        return [];
+      }
+      // 按 selectedKeys 顺序渲染；找不到的 key 作为孤儿值回退显示 value 本身
+      return selectedKeys.map((key) => {
+        const opt = options.find((o) => o.value === key);
+        if (opt) {
+          return {
+            ...opt,
+            children:
+              typeof optionLabelProp === 'function'
+                ? optionLabelProp(opt)
+                : opt[optionLabelProp],
+            _orphan: false,
+          };
+        }
+        return {
+          value: key,
+          label: String(key),
+          children: String(key),
+          _orphan: true,
+        };
+      });
     }, [options, selectedKeys, optionLabelProp]);
 
     const handleClick = () => {
@@ -148,37 +162,54 @@ const Selector = React.forwardRef(
 
     const renderContent = () => {
       if (multi) {
-        return tags.map((item: TagType & { children: any }, index) => {
-          const _closable =
-            typeof closable === 'function' ? closable(item) : closable;
-          return (
-            <Tag
-              {...item}
-              closable={_closable}
-              onClose={(e) => handleRemove(item, e)}
-              key={item.value || index}
-            />
-          );
-        });
+        return tags.map(
+          (item: TagType & { children: any; _orphan?: boolean }, index) => {
+            const { _orphan, ...tagRest } = item;
+            const _closable =
+              typeof closable === 'function' ? closable(item) : closable;
+            return (
+              <Tag
+                {...tagRest}
+                className={_orphan ? orphanClassName : undefined}
+                style={_orphan ? orphanStyle : undefined}
+                closable={_closable}
+                onClose={(e) => handleRemove(item, e)}
+                key={item.value || index}
+              />
+            );
+          },
+        );
       }
 
       const key = selectedKeys.length ? selectedKeys[0] : '';
       const opt = Array.isArray(options)
         ? options.find((opt) => opt.value === key)
         : null;
+      // 孤儿值：key 非空但在 options 中找不到时，回退显示 value 本身
+      const isOrphan = !opt && key !== '';
       const label = (
         opt
           ? typeof optionLabelProp === 'function'
             ? optionLabelProp(opt)
             : opt[optionLabelProp]
-          : null
+          : isOrphan
+            ? String(key)
+            : null
       ) as React.ReactNode;
 
       return (
         <>
           {renderSearch()}
           {label && (
-            <div className={`${prefixCls}-selection-item`}>{label}</div>
+            <div
+              className={clsx(
+                `${prefixCls}-selection-item`,
+                isOrphan && orphanClassName,
+              )}
+              style={isOrphan ? orphanStyle : undefined}
+            >
+              {label}
+            </div>
           )}
         </>
       );

package/src/Table/tbody/index.tsx

@@ -6,7 +6,7 @@ import LazyRow from './lazy-row';
 import TableRow from './row';
 
 const TableBody: React.FC<TableBodyProps> = (props) => {
-  const { columns, pageData, lazyLoad, ...rest } = props;
+  const { columns, pageData, lazyLoad, noData, ...rest } = props;
 
   const { prefixCls, components, rowKey } = React.useContext(TableCtx);
   const { locale } = useLocale();
@@ -15,7 +15,7 @@ const TableBody: React.FC<TableBodyProps> = (props) => {
   const empty = (
     <tbody className={`${prefixCls}-tbody`}>
       <tr className={`${prefixCls}-no-record`}>
-        <td colSpan={999}>{tableLocale.emptyText}</td>
+        <td colSpan={999}>{noData ?? tableLocale.emptyText}</td>
       </tr>
     </tbody>
   );
@@ -60,7 +60,9 @@ const TableBody: React.FC<TableBodyProps> = (props) => {
   };
 
   const tbody = (
-    <BodyWrapper className={`${prefixCls}-tbody`}>{getRenderRows()}</BodyWrapper>
+    <BodyWrapper className={`${prefixCls}-tbody`}>
+      {getRenderRows()}
+    </BodyWrapper>
   );
 
   return tbody;

package/src/Tabs/demo/type.tsx

@@ -1,4 +1,4 @@
-import { Tabs } from '@rainbow-oh/yee-c';
+import { Box, Tabs } from '@rainbow-oh/yee-c';
 import React from 'react';
 
 export default () => {
@@ -20,5 +20,24 @@ export default () => {
     },
   ];
 
-  return <Tabs defaultActiveKey="1" items={items} type="card" />;
+  return (
+    <Box
+      style={{
+        padding: 16,
+        backgroundColor: '#efefef',
+      }}
+    >
+      <Tabs
+        defaultActiveKey="1"
+        items={items}
+        type="card"
+        styles={{
+          content: {
+            padding: 24,
+            height: 120,
+          },
+        }}
+      />
+    </Box>
+  );
 };

package/src/Tabs/hooks/useActiveBar.ts

@@ -5,6 +5,7 @@ interface UseActiveBarOptions {
   activeKey: string | number;
   activetab: React.RefObject<HTMLElement | null>;
   activebar: React.RefObject<HTMLDivElement | null>;
+  listEle: React.RefObject<HTMLDivElement | null>;
   enabled: boolean;
 }
 
@@ -13,6 +14,7 @@ export function useActiveBar({
   activeKey,
   activetab,
   activebar,
+  listEle,
   enabled,
 }: UseActiveBarOptions) {
   const rafIdRef = useRef<number>(0);
@@ -20,18 +22,20 @@ export function useActiveBar({
   const moveActiveBar = useCallback(() => {
     const bar = activebar.current;
     const tab = activetab.current;
+    const nav = listEle.current;
 
-    if (!bar || !tab || !enabled) return;
+    if (!bar || !tab || !enabled || !nav) return;
 
     const rect = tab.getBoundingClientRect();
+    const listPaddingLeft = parseFloat(getComputedStyle(nav).paddingLeft) || 0;
+    const listPaddingTop = parseFloat(getComputedStyle(nav).paddingTop) || 0;
     const isHorizontal = direction === 'horizontal';
-
     if (isHorizontal) {
       bar.style.width = `${rect.width}px`;
-      bar.style.transform = `translateX(${tab.offsetLeft}px)`;
+      bar.style.transform = `translateX(${tab.offsetLeft - listPaddingLeft}px)`;
     } else {
       bar.style.height = `${rect.height}px`;
-      bar.style.transform = `translateY(${tab.offsetTop}px)`;
+      bar.style.transform = `translateY(${tab.offsetTop - listPaddingTop}px)`;
     }
   }, [direction, activetab, activebar, enabled]);
 

package/src/Tabs/style/index.less

@@ -51,9 +51,9 @@
   padding: var(--yee-tabs-vertical-padding);
   overflow: hidden;
 
-  @{pls}-nav-wrap {
+  @{pls}-nav-track {
     height: 100%;
-    padding: var(--yee-tabs-vertical-nav-wrap-padding);
+    padding: var(--yee-tabs-vertical-nav-track-padding);
     overflow-y: auto;
     scrollbar-width: none;
     -ms-overflow-style: none;
@@ -109,9 +109,9 @@
   overflow: hidden;
   transition: transform 3s ease-in-out;
 
-  &:not(@{pls}-card) {
-    background-color: var(--yee-tabs-bg-color);
-  }
+  // &:not(@{pls}-card) {
+  //   background-color: var(--yee-tabs-bg-color);
+  // }
 
   &@{pls}-nav-wrapper-left,
   &@{pls}-nav-wrapper-right {
@@ -141,7 +141,7 @@
   }
 
   &.center {
-    @{pls}-nav-wrap {
+    @{pls}-nav-track {
       justify-content: center;
     }
   }
@@ -261,7 +261,7 @@
     display: none;
   }
 
-  @{pls}-nav-wrap {
+  @{pls}-nav-track {
     padding: 0;
   }
 
@@ -276,6 +276,16 @@
     background-color: var(--yee-tabs-card-bg-color);
   }
 
+  &@{pls}-top {
+    @{pls}-nav-wrapper {
+      border-bottom: none;
+    }
+  }
+
+  @{pls}-container {
+    background-color: var(--yee-tabs-conatiner-bg-color);
+  }
+
   &@{pls}-border-card {
     > @{pls}-nav-wrapper {
       bottom: var(--yee-tabs-card-border-bottom);
@@ -313,7 +323,7 @@
 
 @{pls}-editable-card,
 @{pls}-card {
-  @{pls}-nav-wrap {
+  @{pls}-nav-track {
     padding: 0;
   }
 
@@ -344,16 +354,16 @@
   }
 }
 
-@{pls}-nav-wrap {
+@{pls}-nav-track {
   position: relative;
   width: 100%;
   overflow: hidden;
   white-space: nowrap;
 
-  &.is-scroll {
-    width: var(--yee-tabs-nav-wrap-scroll-width);
-    margin-left: var(--yee-tabs-nav-wrap-scroll-margin-left);
-  }
+  // &.is-scroll {
+  //   width: var(--yee-tabs-nav-track-scroll-width);
+  //   margin-left: var(--yee-tabs-nav-track-scroll-margin-left);
+  // }
 
   &::-webkit-scrollbar {
     display: none;
@@ -513,7 +523,7 @@
     }
   }
 
-  @{pls}-nav-wrap {
+  @{pls}-nav-track {
     padding: 0;
   }
 }

package/src/Tabs/tab-header/index.tsx

@@ -93,6 +93,7 @@ const TabHeader: React.FC<TabHeaderProps> = (props) => {
     activeKey,
     activetab,
     activebar,
+    listEle: navList,
     enabled: !type, // Only show active bar for non-card types
   });
 
@@ -161,7 +162,7 @@ const TabHeader: React.FC<TabHeaderProps> = (props) => {
 
       <TabHeaderCtx.Provider value={contextValue}>
         <div
-          className={clsx(`${prefixCls}-nav-wrap`, classNames?.track)}
+          className={clsx(`${prefixCls}-nav-track`, classNames?.track)}
           style={styles?.track}
           ref={navContainer}
         >

package/src/Tabs/tab-header/tab-header-title.tsx

@@ -181,6 +181,7 @@ const TabHeaderTitle: React.FC<TabsItemProps> = (props) => {
         <Button
           type="text"
           size="small"
+          className={`${prefixCls}-close`}
           icon={<X size={14} />}
           onClick={handleEdit}
           aria-label={`Close ${label}`}

package/src/Tag/style/index.less

@@ -149,15 +149,6 @@
     line-height: var(--yee-tag-large-height);
   }
 
-  &-close {
-    display: inline-flex;
-    padding: 0;
-    width: 16px;
-    height: 16px;
-    margin-left: var(--yee-tag-close-margin-left);
-    cursor: pointer;
-  }
-
   &-checkable {
     margin: var(--yee-tag-checkable-margin);
     color: var(--yee-tag-item-not-check-color);
@@ -177,4 +168,13 @@
     background-color: var(--yee-tag-item-check-active-bg-color);
     border-color: var(--yee-tag-item-check-active-border-color);
   }
+
+  & &-close {
+    display: inline-flex;
+    padding: 0;
+    width: 16px;
+    height: 16px;
+    margin-left: var(--yee-tag-close-margin-left);
+    cursor: pointer;
+  }
 }