@rainbow-oh/yee-c 0.1.0 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rainbow-oh/yee-c",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "yee basic components",
   "keywords": [
     "react",
@@ -58,26 +58,6 @@
     "dist",
     "src"
   ],
-  "scripts": {
-    "build": "node scripts/generate-version.js && rm -rf dist && father build",
-    "postbuild": "node scripts/merge-css.js",
-    "build:release": "dumi build && node scripts/generate-raw-md.js",
-    "build:watch": "father dev",
-    "dev": "dumi dev",
-    "docs:build": "dumi build && node scripts/generate-raw-md.js",
-    "docs:preview": "dumi preview",
-    "docs:scan": "node scripts/scan-docs.js",
-    "doctor": "father doctor",
-    "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,css,less,json}\"",
-    "format:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,css,less,json}\"",
-    "lint": "npm run lint:es && npm run lint:css",
-    "lint:css": "stylelint \"{src,test}/**/*.{css,less}\" --ignore-pattern \"src/style/color.*.css\"",
-    "lint:es": "eslint \"{src,test}/**/*.{js,jsx,ts,tsx}\"",
-    "prepare": "dumi setup",
-    "prepublishOnly": "npm run docs:scan && father doctor && node scripts/generate-version.js && npm run build",
-    "start": "npm run dev",
-    "watch": "father dev"
-  },
   "commitlint": {
     "extends": [
       "@commitlint/config-conventional"
@@ -141,5 +121,23 @@
   },
   "authors": [
     "InsureMO"
-  ]
-}
+  ],
+  "scripts": {
+    "build": "node scripts/generate-version.js && rm -rf dist && father build",
+    "postbuild": "node scripts/merge-css.js",
+    "build:release": "dumi build && node scripts/generate-raw-md.js",
+    "build:watch": "father dev",
+    "dev": "dumi dev",
+    "docs:build": "dumi build && node scripts/generate-raw-md.js",
+    "docs:preview": "dumi preview",
+    "docs:scan": "node scripts/scan-docs.js",
+    "doctor": "father doctor",
+    "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,css,less,json}\"",
+    "format:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,css,less,json}\"",
+    "lint": "npm run lint:es && npm run lint:css",
+    "lint:css": "stylelint \"{src,test}/**/*.{css,less}\" --ignore-pattern \"src/style/color.*.css\"",
+    "lint:es": "eslint \"{src,test}/**/*.{js,jsx,ts,tsx}\"",
+    "start": "npm run dev",
+    "watch": "father dev"
+  }
+}

package/src/Alert/alert.tsx

@@ -10,10 +10,16 @@ import './style/index.less';
 const ICON_STROKE_WIDTH = 1.5; // Icon stroke width
 
 const iconMap = {
-  info: { small: <Info />, large: <Info /> },
-  success: { small: <CircleCheckBig />, large: <CircleCheckBig /> },
-  warning: { small: <CircleAlert />, large: <CircleAlert /> },
-  error: { small: <CircleX />, large: <CircleX /> },
+  info: { small: <Info size={16} />, large: <Info size={24} /> },
+  success: {
+    small: <CircleCheckBig size={16} />,
+    large: <CircleCheckBig size={24} />,
+  },
+  warning: {
+    small: <CircleAlert size={16} />,
+    large: <CircleAlert size={24} />,
+  },
+  error: { small: <CircleX size={16} />, large: <CircleX size={24} /> },
 };
 
 const Alert: React.FC<AlertProps> = (baseprops) => {

package/src/Alert/style/index.less

@@ -69,4 +69,7 @@
     border: none;
     border-radius: 0;
   }
+
+  &-small {
+  }
 }

package/src/Anchor/anchor-item.tsx

@@ -17,7 +17,10 @@ const AnchorItem: React.FC<AnchorItemProps> = (props) => {
     ...rest
   } = props;
 
-  const { prefixCls, activeKey, onClick } = useContext(AnchorContext);
+  const { prefixCls, activeKey, onClick, classNames, styles } =
+    useContext(AnchorContext);
+
+  const isActive = targetKey === activeKey;
 
   const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
     e.preventDefault();
@@ -28,14 +31,16 @@ const AnchorItem: React.FC<AnchorItemProps> = (props) => {
   const cls = clsx(
     `${prefixCls}-item`,
     {
-      [`${prefixCls}-item-active`]: targetKey === activeKey,
+      [`${prefixCls}-item-active`]: isActive,
       [`${prefixCls}-item-${status}`]: status,
     },
     className,
+    isActive && classNames?.active,
   );
 
   const itemStyle = {
     ...style,
+    ...(isActive ? styles?.active : undefined),
     paddingLeft: `${level * INDENT_WIDTH}px`,
   };
 

package/src/Anchor/anchor.tsx

@@ -59,13 +59,22 @@ const Anchor = forwardRef<HTMLDivElement, AnchorProps>((baseprops, ref) => {
   const [anchorList, setAnchorList] = useState<Array<AnchorItemType>>([]);
 
   const containerRef = useRef<HTMLElement | Window | null>(null);
+  const activeKeyRef = useRef(mergedActiveKey);
+  useEffect(() => {
+    activeKeyRef.current = mergedActiveKey;
+  }, [mergedActiveKey]);
 
   // Auto-generate anchor list from DOM
   const generateAnchorList = useCallback(() => {
     if (!auto || !name) return;
 
     const list: Array<AnchorItemType> = [];
-    const elements = document.querySelectorAll(`[data-anchor-group="${name}"]`);
+    // Escape `name` before interpolating into the attribute selector: a raw
+    // value containing quotes / brackets / backslashes would either break the
+    // selector (throwing) or open an injection vector.
+    const elements = document.querySelectorAll(
+      `[data-anchor-group="${CSS.escape(name)}"]`,
+    );
 
     elements.forEach((element) => {
       const key = element.getAttribute('id') || '';
@@ -87,6 +96,19 @@ const Anchor = forwardRef<HTMLDivElement, AnchorProps>((baseprops, ref) => {
     }
   }, [auto, generateAnchorList]);
 
+  const getTargetOffsetTop = useCallback((target: HTMLElement) => {
+    const container = containerRef.current;
+    const containerTop =
+      container === window
+        ? 0
+        : (container as HTMLElement).getBoundingClientRect().top;
+    const currentScroll =
+      container === window
+        ? window.scrollY
+        : (container as HTMLElement).scrollTop;
+    return currentScroll + (target.getBoundingClientRect().top - containerTop);
+  }, []);
+
   // Handle scroll to update active key
   const handleScroll = useCallback(() => {
     const container = containerRef.current;
@@ -107,33 +129,31 @@ const Anchor = forwardRef<HTMLDivElement, AnchorProps>((baseprops, ref) => {
       const target = document.getElementById(item.key);
 
       if (target) {
-        const targetTop = target.offsetTop;
+        const targetTop = getTargetOffsetTop(target);
         if (scrollTop + offsetTop >= targetTop) {
-          setMergedActiveKey(item.key);
-          onChange?.(item.key);
+          if (activeKeyRef.current !== item.key) {
+            setMergedActiveKey(item.key);
+            onChange?.(item.key);
+          }
           break;
         }
       }
     }
-  }, [auto, anchorList, items, offsetTop, onChange]);
+  }, [auto, anchorList, items, offsetTop, onChange, getTargetOffsetTop]);
 
   useEffect(() => {
-    const container = getContainer ? getContainer() : window;
-    containerRef.current = container;
-
-    if (container && typeof activeKey === 'undefined') {
-      const debouncedScroll = debounce(handleScroll, 100);
-      container.addEventListener('scroll', debouncedScroll as EventListener);
-      handleScroll();
-
-      return () => {
-        container.removeEventListener(
-          'scroll',
-          debouncedScroll as EventListener,
-        );
-      };
-    }
-  }, [getContainer, handleScroll, activeKey]);
+    const container = containerRef.current;
+    if (!container) return;
+
+    const debouncedScroll = debounce(handleScroll, 100);
+    container.addEventListener('scroll', debouncedScroll as EventListener);
+    handleScroll();
+
+    return () => {
+      container.removeEventListener('scroll', debouncedScroll as EventListener);
+      debouncedScroll.cancel();
+    };
+  }, [getContainer, handleScroll]);
 
   // Scroll to target when activeKey changes
   const scrollToAnchor = useCallback(
@@ -144,7 +164,7 @@ const Anchor = forwardRef<HTMLDivElement, AnchorProps>((baseprops, ref) => {
       const container = containerRef.current;
       if (!container) return;
 
-      const targetTop = target.offsetTop - offsetTop;
+      const targetTop = getTargetOffsetTop(target) - offsetTop;
 
       if (container === window) {
         window.scrollTo({ top: targetTop, behavior: 'smooth' });
@@ -155,9 +175,13 @@ const Anchor = forwardRef<HTMLDivElement, AnchorProps>((baseprops, ref) => {
         });
       }
     },
-    [offsetTop],
+    [offsetTop, getTargetOffsetTop],
   );
 
+  useLayoutEffect(() => {
+    containerRef.current = getContainer ? getContainer() : window;
+  }, [getContainer]);
+
   useLayoutEffect(() => {
     if (defaultActiveKey) {
       scrollToAnchor(defaultActiveKey);
@@ -190,6 +214,8 @@ const Anchor = forwardRef<HTMLDivElement, AnchorProps>((baseprops, ref) => {
     prefixCls,
     activeKey: mergedActiveKey,
     onClick: handleItemClick,
+    classNames,
+    styles,
   };
 
   const renderNavArrow = () => {

package/src/Anchor/demo/auto.tsx

@@ -0,0 +1,55 @@
+import { Anchor } from '@rainbow-oh/yee-c';
+import React from 'react';
+
+/**
+ * `auto` mode: the anchor list is generated from the DOM. Decorate each target
+ * section with the following attributes:
+ *   - data-anchor-group="<name>"  must match the Anchor's `name` prop
+ *   - id="<key>"                  used as the anchor key and scroll target
+ *   - data-anchor-title="<title>"  the nav label (required; a section without it is skipped)
+ *   - data-anchor-status="success | error | warning"  optional status badge color
+ */
+export default () => {
+  return (
+    <div
+      id="auto-container"
+      style={{ display: 'flex', height: 300, overflow: 'auto' }}
+    >
+      <Anchor
+        auto
+        name="article"
+        affix={false}
+        defaultActiveKey="auto-intro"
+        getContainer={() => document.getElementById('auto-container')!}
+      />
+      <div style={{ flex: 1, padding: 20 }}>
+        <section
+          id="auto-intro"
+          data-anchor-group="article"
+          data-anchor-title="Introduction"
+          style={{ height: 300, background: '#f0f0f0', marginBottom: 20 }}
+        >
+          Introduction
+        </section>
+        <section
+          id="auto-usage"
+          data-anchor-group="article"
+          data-anchor-title="Usage"
+          data-anchor-status="success"
+          style={{ height: 300, background: '#e0e0e0', marginBottom: 20 }}
+        >
+          Usage
+        </section>
+        <section
+          id="auto-caveats"
+          data-anchor-group="article"
+          data-anchor-title="Caveats"
+          data-anchor-status="warning"
+          style={{ height: 300, background: '#d0d0d0' }}
+        >
+          Caveats
+        </section>
+      </div>
+    </div>
+  );
+};

package/src/Anchor/demo/basic.tsx

@@ -20,7 +20,13 @@ export default () => {
   return (
     <div
       id="basic-container"
-      style={{ display: 'flex', height: '100vh', overflow: 'auto' }}
+      style={{
+        position: 'relative',
+        display: 'flex',
+        height: '100vh',
+        overflow: 'auto',
+        transform: 'scale(1)',
+      }}
     >
       <Anchor
         items={items}

package/src/Anchor/demo/controlled.tsx

@@ -1,27 +1,31 @@
 import { Anchor } from '@rainbow-oh/yee-c';
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 
 export default () => {
   const [activeKey, setActiveKey] = useState('part1');
-
+  const containerRef = useRef<HTMLDivElement>(null);
   const onChange = (key: string) => {
     console.log('Anchor changed to:', key);
     setActiveKey(key);
   };
 
   return (
-    <div style={{ display: 'flex' }}>
-      <div style={{ width: '200px' }}>
-        <Anchor
-          items={[
-            { key: 'part1', title: 'Part 1' },
-            { key: 'part2', title: 'Part 2' },
-            { key: 'part3', title: 'Part 3' },
-          ]}
-          activeKey={activeKey}
-          onChange={onChange}
-        />
-      </div>
+    <div
+      style={{ display: 'flex', height: '200px', overflow: 'auto' }}
+      ref={containerRef}
+    >
+      <Anchor
+        items={[
+          { key: 'part1', title: 'Part 1' },
+          { key: 'part2', title: 'Part 2' },
+          { key: 'part3', title: 'Part 3' },
+        ]}
+        direction="vertical"
+        affix={false}
+        activeKey={activeKey}
+        onChange={onChange}
+        getContainer={() => containerRef.current!}
+      />
       <div style={{ flex: 1, padding: '20px' }}>
         <div
           id="part1"

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

@@ -17,6 +17,7 @@ Anchor component for linking to specific sections within a page.
 <code src="./demo/basic.tsx" title="Basic" description="Basic usage of Anchor"></code>
 <code src="./demo/direction.tsx" title="Direction" description="Vertical and horizontal directions"></code>
 <code src="./demo/controlled.tsx" title="Controlled" description="Controlled mode with activeKey"></code>
+<code src="./demo/auto.tsx" title="Auto" description="Generate the anchor list from the DOM"></code>
 
 ## API
 
@@ -69,6 +70,22 @@ Anchor component for linking to specific sections within a page.
 | --- |
 | `'item' \| 'active' \| 'content'` |
 
+## Auto mode
+
+When `auto` is set together with `name`, the component scans the DOM for elements tagged with `data-anchor-group="<name>"` and generates the anchor list automatically. Each target element must be annotated with:
+
+| Attribute | Description |
+| --- | --- |
+| `data-anchor-group` | Group name, must equal `name` |
+| `id` | Used as the anchor key and scroll target (required) |
+| `data-anchor-title` | Nav item label (required; a section without it is skipped) |
+| `data-anchor-status` | Optional status, `success` / `error` / `warning` |
+
+Notes:
+
+- `auto` and `items` are mutually exclusive; when both are provided, the `auto` scan result wins and `items` is ignored.
+- The DOM is scanned once on mount. If the target sections are rendered asynchronously, make sure they exist in the DOM at mount time, otherwise they will not be picked up.
+
 ## Notes
 
 - Not yet adapted for mobile. Affix mode relies on hover interaction, which is not supported on touch devices

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

@@ -17,6 +17,7 @@ toc: 'content'
 <code src="./demo/basic.tsx" title="基础用法" description="Anchor的基础用法"></code>
 <code src="./demo/direction.tsx" title="方向" description="垂直和水平方向"></code>
 <code src="./demo/controlled.tsx" title="受控模式" description="通过activeKey控制激活项"></code>
+<code src="./demo/auto.tsx" title="自动生成" description="从 DOM 自动生成锚点列表"></code>
 
 ## API
 
@@ -69,6 +70,22 @@ toc: 'content'
 | --- |
 | `'item' \| 'active' \| 'content'` |
 
+## 自动生成模式（auto）
+
+设置 `auto` 并提供 `name` 时，组件会从 DOM 中扫描带 `data-anchor-group="<name>"` 的元素，自动生成锚点列表。每个目标元素需标注以下属性：
+
+| 属性 | 说明 |
+| --- | --- |
+| `data-anchor-group` | 分组名，必须等于 `name` |
+| `id` | 作为锚点 key 与滚动目标（必填） |
+| `data-anchor-title` | 导航项标题（必填，缺失则该项被跳过） |
+| `data-anchor-status` | 可选状态，`success` / `error` / `warning` |
+
+注意事项：
+
+- `auto` 与 `items` 互斥，同时传入时以 `auto` 扫描结果为准，`items` 被忽略。
+- 组件在挂载时扫描一次 DOM；若目标区块为异步渲染，请保证其在组件挂载时已存在于 DOM 中，否则扫描不到。
+
 ## 注意事项
 
 - 移动端暂未适配，affix 模式依赖 hover 交互，触摸设备不支持

package/src/Anchor/interface.ts

@@ -123,4 +123,6 @@ export interface AnchorContextType {
   prefixCls: string;
   activeKey?: string;
   onClick?: (key: string) => void;
+  classNames?: Partial<Record<AnchorSemanticDOM, string>>;
+  styles?: Partial<Record<AnchorSemanticDOM, React.CSSProperties>>;
 }

package/src/Anchor/style/index.less

@@ -53,7 +53,7 @@
           width: var(--yee-anchor-static-item-active-width);
           height: var(--yee-anchor-static-item-active-height);
           border: none;
-          border-radius: 0;
+          border-radius: var(--yee-anchor-static-item-active-width);
           background-color: var(--yee-anchor-item-active-font-color);
         }
       }
@@ -165,7 +165,7 @@
 
   &-item {
     position: relative;
-    padding: var(--yee-anchor-item-padding);
+    margin: var(--yee-anchor-item-padding);
     white-space: nowrap;
     color: var(--yee-anchor-item-font-color);
     cursor: pointer;

package/src/Checkbox/checkbox-group.tsx

@@ -34,6 +34,7 @@ const CheckboxGroup = (baseprops: CheckboxGroupProps) => {
     options,
     buttonStyle,
     disabled,
+    layout = 'horizontal',
     onChange,
   } = props;
 
@@ -44,6 +45,7 @@ const CheckboxGroup = (baseprops: CheckboxGroupProps) => {
 
   const cls = clsx(
     prefixCls,
+    [`${prefixCls}-${layout}`],
     {
       [`${prefixCls}-${buttonStyle}`]: buttonStyle,
       [`${prefixCls}-disabled`]: disabled,
@@ -71,7 +73,9 @@ const CheckboxGroup = (baseprops: CheckboxGroupProps) => {
             {...option}
             checked={mergedValue.includes(option.value)}
             key={option.value || index}
-          />
+          >
+            {option.label}
+          </Checkbox>
         ))}
       </CheckboxGroupCtx.Provider>
     </div>

package/src/Checkbox/demo/group.tsx

@@ -24,6 +24,7 @@ export default () => {
       <Checkbox.Group
         value={value}
         onChange={onChange}
+        layout="vertical"
         options={[
           { value: 'A', label: 'Option A' },
           { value: 'B', label: 'Option B' },

package/src/Checkbox/interface.ts

@@ -97,6 +97,11 @@ export interface CheckboxGroupProps {
    * Options
    */
   options?: Array<CheckboxOption>;
+  /**
+   * group layout
+   * @default horizontal
+   */
+  layout?: 'horizontal' | 'vertical';
   /**
    * Callback when value changes
    */

package/src/Checkbox/style/index.less

@@ -33,6 +33,10 @@
       background-color: var(--yee-checkbox-checked-bg-color);
       border-color: var(--yee-checkbox-checked-border-color);
 
+      --ye-checkbox-checked-border-color: var(
+        --yee-checkbox-checked-after-border-color
+      );
+
       &::after {
         position: absolute;
         top: 50%;
@@ -41,7 +45,7 @@
         width: var(--yee-checkbox-checked-after-width);
         height: var(--yee-checkbox-checked-after-height);
         border: var(--yee-checkbox-checked-after-border-width) solid
-          var(--yee-checkbox-checked-after-border-color);
+          var(--ye-checkbox-checked-border-color);
         border-top: 0;
         transform: rotate(45deg) scale(1) translate(-50%, -50%);
         content: '';
@@ -59,6 +63,14 @@
       border-color: var(--yee-checkbox-border-color);
     }
 
+    &&-checked {
+      @{pls}-inner {
+        --ye-checkbox-checked-border-color: var(
+          --yee-checkbox-disabled-checked-border-color
+        );
+      }
+    }
+
     @{pls}-input {
       display: none;
     }
@@ -100,4 +112,12 @@
       }
     }
   }
+
+  &-group {
+    &-vertical {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+  }
 }

package/src/Dropdown/demo/placement.tsx

@@ -9,6 +9,7 @@ export default () => {
         { key: '2', label: 'Option 2' },
         { key: '3', label: 'Option 3' },
       ]}
+      keyboard
     />
   );
 

package/src/Dropdown/dropdown.tsx

@@ -20,6 +20,7 @@ const Dropdown: FC<DropdownProps> = (baseprops) => {
     menu,
     open,
     defaultOpen,
+    arrow = { className: `${prefixCls}-arrow` },
     onOpenChange,
     ...rest
   } = props;
@@ -54,6 +55,7 @@ const Dropdown: FC<DropdownProps> = (baseprops) => {
   return (
     <Trigger
       {...rest}
+      arrow={arrow}
       popup={renderPopup() as any}
       placement={placement}
       popupClassName={`${prefixCls}-popup`}

package/src/Dropdown/style/index.less

@@ -4,4 +4,10 @@
   &-popup {
     background-color: var(--yee-dropdown-bg-color);
   }
+
+  &-arrow {
+    &::after {
+      background-color: var(--yee-dropdown-bg-color);
+    }
+  }
 }