@rainbow-oh/yee-c 0.6.0 → 0.6.2

package/package.json

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

package/src/Anchor/anchor-item.tsx

@@ -44,10 +44,14 @@ const AnchorItem: React.FC<AnchorItemProps> = (props) => {
     paddingLeft: `${level * INDENT_WIDTH}px`,
   };
 
-  const renderItem = (
+  const node = (
     <li className={cls} style={itemStyle} {...rest}>
       <a href={`#${targetKey}`} onClick={handleClick}>
-        <span className={`${prefixCls}-item-label`} title={String(title)}>
+        <span
+          className={clsx(`${prefixCls}-item-label`, classNames?.label)}
+          style={styles?.label}
+          title={String(title)}
+        >
           {title}
         </span>
       </a>
@@ -56,7 +60,7 @@ const AnchorItem: React.FC<AnchorItemProps> = (props) => {
 
   return (
     <>
-      {renderItem}
+      {node}
       {children}
     </>
   );

package/src/Anchor/interface.ts

@@ -46,7 +46,7 @@ export interface AnchorItemProps {
   children?: React.ReactNode;
 }
 
-export type AnchorSemanticDOM = 'item' | 'active' | 'content';
+export type AnchorSemanticDOM = 'item' | 'active' | 'content' | 'label';
 
 export interface AnchorProps extends DataAttributeProps {
   /**

package/src/Dialog/dialog.tsx

@@ -171,11 +171,19 @@ const Dialog = (baseprops: DialogProps) => {
             ></Button>
           ) : null}
           {title ? (
-            <div className={`${prefixCls}-header`}>
+            <div
+              className={clsx(`${prefixCls}-header`, classNames?.header)}
+              style={styles?.header}
+            >
               <div className={`${prefixCls}-title`}>{title}</div>
             </div>
           ) : null}
-          <div className={`${prefixCls}-body`}>{children}</div>
+          <div
+            className={clsx(`${prefixCls}-body`, classNames?.body)}
+            style={styles?.body}
+          >
+            {children}
+          </div>
           {renderFooter()}
         </div>
       </div>

package/src/Dialog/interface.ts

@@ -1,7 +1,7 @@
 import { ButtonType } from '../Button';
 import type { DataAttributeProps } from '../utils/types';
 
-export type SemanticDOM = 'content' | 'footer' | 'mask';
+export type SemanticDOM = 'content' | 'header' | 'body' | 'footer' | 'mask';
 
 export interface DialogProps extends DataAttributeProps {
   /**

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/Input/style/index.less

@@ -11,6 +11,7 @@
   line-height: var(--yee-input-line-height);
   border: var(--yee-input-border-width) solid var(--yee-input-border-color);
   border-radius: var(--yee-input-border-radius, 4px);
+  font-family: var(--yee-font-family);
 
   &:not(@{pls}-disabled):hover {
     border-color: var(--yee-input-hover-border-color);
@@ -46,6 +47,7 @@
 
   &-inner {
     width: 100%;
+    font-family: var(--yee-font-family);
     line-height: var(--yee-input-line-height);
     background-color: inherit;
     border: none;

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/TextArea/style/index.less

@@ -67,6 +67,7 @@
   font-size: var(--yee-textarea-font-size);
   line-height: var(--yee-textarea-line-height);
   border-radius: var(--yee-textarea-border-radius, 4px);
+  font-family: var(--yee-font-family);
   width: 100%;
 
   &-borderless {

package/src/style/color.css

@@ -903,6 +903,7 @@
   --yee-tabs-card-border-bg-color: var(--yee-color-bg-head);
   --yee-tabs-card-active-bg-color: var(--yee-color-bg-container);
   --yee-tabs-card-bg-color: transparent;
+  --yee-tabs-conatiner-bg-color: var(--yee-color-bg-container);
   --yee-tabs-header-custom-btn-text-color: var(--yee-text-color);
   --yee-tabs-header-custom-btn-text-hover-color: var(--yee-primary-color);
   --yee-tabs-header-custom-btn-text-active-color: var(--yee-primary-color);

package/src/style/mobile.css

@@ -202,6 +202,11 @@
     flex-direction: column;
   }
 
+  /* Field-level horizontal collapses too on narrow screens */
+  .yee-form-item-horizontal .yee-form-item-row {
+    flex-direction: column;
+  }
+
   /* ── Table: ensure horizontal scroll ── */
   .yee-table-wrapper {
     -webkit-overflow-scrolling: touch;

package/src/style/size.css

@@ -1,4 +1,6 @@
 :root {
+  --yee-font-family: inherit;
+
   /* ── z-index 基础层级 ── */
   --yee-z-index-fixed: 990; /* L1 吸顶 */
   --yee-z-index-mask: 1000; /* L2 遮罩背景 */
@@ -269,6 +271,8 @@
   --yee-form-item-label-line-height: 24px;
   --yee-form-item-required-margin-inline-start: 4px;
   --yee-form-item-additional-bottom: 2px;
+  --yee-form-item-horizontal-label-width: 120px;
+  --yee-form-item-horizontal-label-gap: 12px;
 
   /* --Grid-- */
   --yee-grid-column-min-width: 50px;
@@ -684,7 +688,7 @@
   --yee-tabs-active-bar-height: 2px;
   --yee-tabs-active-bar-width: 2px;
   --yee-tabs-vertical-padding: 8px 0;
-  --yee-tabs-vertical-nav-wrap-padding: 8px 0;
+  --yee-tabs-vertical-nav-track-padding: 8px 0;
   --yee-tabs-vertical-container-padding: 0 20px;
   --yee-tabs-vertical-active-bar-height: 32px;
   --yee-tabs-nav-wrapper-height: 46px;
@@ -721,8 +725,8 @@
   --yee-tabs-card-tab-border-width: 1px;
   --yee-tabs-card-tab-border-radius: 4px;
   --yee-tabs-card-tab-not-active-height: 39px;
-  --yee-tabs-nav-wrap-scroll-width: calc(100% - 64px);
-  --yee-tabs-nav-wrap-scroll-margin-left: 32px;
+  --yee-tabs-nav-track-scroll-width: calc(100% - 64px);
+  --yee-tabs-nav-track-scroll-margin-left: 32px;
   --yee-tabs-nav-wrapper-shadow-width: 8px;
   --yee-tabs-nav-wrapper-shadow-inset: 4px;
   --yee-tabs-nav-wrapper-top-z-index: var(--yee-z-index-fixed);

package/src/version.ts

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