docs: 更新input组件文档

assets/themes/dark.css

@@ -176,7 +176,7 @@
  /* 主题色 - 激活态 */
  --primary-color-active: rgb(var(--blue-color-600) / 1);
  /* 主题色 - 禁用态 */
- --primary-color-disabled: rgb(var(--blue-color-200) / 0.4);
+ --primary-color-disabled: rgb(var(--blue-color-300) / 0.8);
 
  /* 次要颜色 - 默认 */
  --secondary-color: rgb(var(--dodger-color-500) / 1);
@@ -267,7 +267,7 @@
  /* 背景色 - 浮层 */
  --bg-color-float: rgb(var(--gray-color-025) / 0.9);
  /* 背景色 - 滑块 */
- --bg-color-thumb: rgb(var(--gray-color-900) / 1);
+ --bg-color-thumb: rgb(var(--gray-color-900) / 0.9);
 
  /* 背景色 - 强调 */
  --bg-color-info: rgb(var(--blue-color-050) / 1);

assets/themes/light.css

@@ -172,7 +172,7 @@
  /* 主题色 - 默认 */
  --primary-color: rgb(var(--blue-color-500) / 1);
  /* 主题色 - 悬浮态 */
- --primary-color-hover: rgb(var(--blue-color-600) / 1);
+ --primary-color-hover: rgb(var(--blue-color-400) / 1);
  /* 主题色 - 激活态 */
  --primary-color-active: rgb(var(--blue-color-600) / 1);
  /* 主题色 - 禁用态 */
@@ -267,7 +267,7 @@
  /* 背景色 - 浮层 */
  --bg-color-float: rgb(var(--gray-color-025) / 0.9);
  /* 背景色 - 滑块 */
- --bg-color-thumb: rgb(var(--gray-color-000) / 1);
+ --bg-color-thumb: rgb(var(--gray-color-000) / 0.9);
 
  /* 背景色 - 强调 */
  --bg-color-info: rgb(var(--blue-color-050) / 1);
@@ -305,7 +305,7 @@
  /* 字体颜色 - 成功 */
  --font-color-success: rgb(var(--green-color-700) / 1);
  /* 字体颜色 - 禁用 */
- --font-color-disabled: rgb(var(--gray-color-600) / 0.9);
+ --font-color-disabled: rgb(var(--gray-color-500) / 0.7);
  /* 字体颜色 - 高亮 */
  --font-color-highlight: rgb(var(--blue-color-600) / 1);
 

docs/components/data-entry/input.mdx

@@ -0,0 +1,17 @@
+# Input 输入框
+
+> 一个用于输入和编辑文本的组件。
+
+使用 `import { IInput } from "@/components";`
+
+源码 `components/widgets/input`
+
+## 何时使用
+
+* 传达用户可以采取的操作，触发相应的业务逻辑。
+
+## 代码演示
+
+### 基本用法
+
+<code src='@examples/input/basic' />

examples/chip/group.tsx

@@ -81,9 +81,9 @@ const onPressEnter: React.KeyboardEventHandler<HTMLInputElement> = ({
 const Creator: React.FC = () => (
  <IChip icon={<ISignLine type="plus" />} variant="filled">
  <IInput
- autoSize
  placeholder="新增标签"
  value={useChipGroup(({ keyword }) => keyword)}
+ width="auto"
  onBlur={onBlur}
  onChange={onChange}
  onPressEnter={onPressEnter}

examples/input/basic.tsx

@@ -0,0 +1,79 @@
+import { produce } from 'immer';
+import { create } from 'zustand';
+
+import { isEmpty, isString } from '@busymango/is-esm';
+import { VariantControl } from '@examples/widgets';
+
+import type { IControlWrapProps } from '@/components';
+import { IControlWrap, IFlex, IInput, ISignLine } from '@/components';
+
+type InputStore = {
+ text?: string | null;
+ clear?: () => void;
+ change?: (text?: string | React.ChangeEvent<HTMLInputElement>) => void;
+};
+
+const useInputStore = create<InputStore>((set) => ({
+ clear: () => {
+ set(
+ produce((state: InputStore) => {
+ state.text = null;
+ })
+ );
+ },
+ change: (event) => {
+ set(
+ produce((state: InputStore) => {
+ if (isString(event)) {
+ state.text = event;
+ }
+ if (!isString(event)) {
+ state.text = event?.target.value;
+ }
+ })
+ );
+ },
+}));
+
+const App: React.FC = () => {
+ const { text, clear, change } = useInputStore();
+
+ const closeable = !isEmpty(text);
+
+ return (
+ <VariantControl
+ variants={
+ [
+ 'bordered',
+ 'filled',
+ 'standard',
+ ] satisfies IControlWrapProps['variant'][]
+ }
+ >
+ {({ variant }) => (
+ <IFlex>
+ <IControlWrap
+ isSuffixClickable={closeable}
+ suffix={
+ <ISignLine
+ animate={{ opacity: closeable ? 1 : 0 }}
+ type="cross"
+ />
+ }
+ variant={variant}
+ onSuffixClick={clear}
+ >
+ <IInput
+ placeholder="占位文本"
+ value={text}
+ width="100%"
+ onChange={change}
+ />
+ </IControlWrap>
+ </IFlex>
+ )}
+ </VariantControl>
+ );
+};
+
+export default App;

src/components/widgets/backdrop/backdrop.scss

@@ -0,0 +1,4 @@
+.wrap {
+ display: grid;
+ place-items: center;
+}

src/components/widgets/backdrop/backdrop.tsx

@@ -0,0 +1,31 @@
+import classNames from 'classnames';
+import { AnimatePresence } from 'framer-motion';
+
+import { FloatingPortal } from '@floating-ui/react';
+
+import { container } from '@/init';
+import type { ReactCFC } from '@/models';
+import { iFindElement } from '@/utils';
+
+import type { IBackdropProps } from './models';
+import { IOverlay } from './overlay';
+
+import * as styles from './backdrop.scss';
+
+export const IBackdrop: ReactCFC<IBackdropProps> = ({
+ open,
+ children,
+ className,
+ root = container,
+ ...others
+}) => (
+ <FloatingPortal root={iFindElement(root)}>
+ <AnimatePresence>
+ {open && (
+ <IOverlay className={classNames(styles.wrap, className)} {...others}>
+ {children}
+ </IOverlay>
+ )}
+ </AnimatePresence>
+ </FloatingPortal>
+);

src/components/widgets/backdrop/index.tsx

@@ -1,31 +1 @@
-import classNames from 'classnames';
-import { AnimatePresence } from 'framer-motion';
-
-import { FloatingPortal } from '@floating-ui/react';
-
-import { container } from '@/init';
-import type { ReactCFC } from '@/models';
-import { iFindElement } from '@/utils';
-
-import { IOverlay } from '../overlay';
-import type { IBackdropProps } from './models';
-
-import * as styles from './index.scss';
-
-export const IBackdrop: ReactCFC<IBackdropProps> = ({
- open,
- children,
- className,
- root = container,
- ...others
-}) => (
- <FloatingPortal root={iFindElement(root)}>
- <AnimatePresence>
- {open && (
- <IOverlay className={classNames(styles.wrap, className)} {...others}>
- {children}
- </IOverlay>
- )}
- </AnimatePresence>
- </FloatingPortal>
-);
+export * from './backdrop';

src/components/widgets/backdrop/models/index.tsx

@@ -1,11 +1,19 @@
-import type { ReactTargetFunc } from '@/models';
+import type { HTMLMotionProps } from 'framer-motion';
 
-import type { IOverlayProps } from '../../overlay';
+import type { ReactTargetType } from '@/models';
+
+export interface IOverlayProps extends HTMLMotionProps<'div'> {
+ /**
+ * overlay will lock scrolling on the document body if is false.
+ * @default false
+ */
+ scroll?: boolean;
+}
 
 export interface IBackdropProps extends IOverlayProps {
  open?: boolean;
  /**
  * 浮层默认渲染到 root 上，也可以使用此方法指定根节点。
  */
- root?: ReactTargetFunc;
+ root?: ReactTargetType;
 }

src/components/widgets/overlay/index.scss → src/components/widgets/backdrop/overlay.scss

@@ -1,8 +1,5 @@
 .wrap {
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
+ inset: 0;
  overflow: auto;
  position: fixed;
 }

src/components/widgets/overlay/index.tsx → src/components/widgets/backdrop/overlay.tsx

@@ -1,11 +1,12 @@
 import { forwardRef, useId, useLayoutEffect } from 'react';
 import classNames from 'classnames';
-import type { HTMLMotionProps } from 'framer-motion';
 import { motion } from 'framer-motion';
 
 import { isIOS } from '@/utils';
 
-import * as styles from './index.scss';
+import type { IOverlayProps } from './models';
+
+import * as styles from './overlay.scss';
 
 const iLocks = new Set<string>();
 
@@ -20,14 +21,6 @@ const iScrollbarWidth = () => {
  return window.innerWidth - document.documentElement.clientWidth;
 };
 
-export interface IOverlayProps extends HTMLMotionProps<'div'> {
- /**
- * overlay will lock scrolling on the document body if is false.
- * @default false
- */
- scroll?: boolean;
-}
-
 export const IOverlay = forwardRef(function IOverlay(
  props: IOverlayProps,
  ref: React.ForwardedRef<HTMLDivElement>

src/components/widgets/control/control.warp.scss

@@ -19,6 +19,8 @@
 
  &:not(.read-pretty) {
  width: 100%;
+ border-width: 1px;
+ border-style: solid;
  border-radius: var(--border-radius-03);
 
  /** size */
@@ -81,6 +83,7 @@
  }
 }
 .filled {
+ border-color: transparent;
  &.disabled {
  background-color: var(--natural-color-disabled);
  }
@@ -98,13 +101,9 @@
  }
 }
 .standard {
+ border-color: transparent;
 }
 .bordered {
- &:not(.read-pretty) {
- border-width: 1px;
- border-style: solid;
- }
-
  &.disabled {
  border-color: var(--border-color-disabled);
  background-color: var(--natural-color-disabled);

src/components/widgets/control/control.wrap.tsx

@@ -2,6 +2,8 @@ import { forwardRef, useImperativeHandle, useRef } from 'react';
 import classNames from 'classnames';
 import { AnimatePresence, motion } from 'framer-motion';
 
+import { ifnot } from '@busymango/utils';
+
 import { useEventState } from '@/hooks';
 
 import { useIFieldGridContext } from '../form-field/hooks';
@@ -76,7 +78,7 @@ export const IControlWrap = forwardRef<HTMLDivElement, IControlWrapProps>(
  className={classNames(styles.iconWrap, {
  [styles.clickable]: isPrefixClickable,
  })}
- onClick={onPrefixClick}
+ onClick={ifnot(isPrefixClickable && onPrefixClick)}
  >
  {prefix}
  </ISVGWrap>
@@ -91,7 +93,7 @@ export const IControlWrap = forwardRef<HTMLDivElement, IControlWrapProps>(
  className={classNames(styles.iconWrap, {
  [styles.clickable]: isSuffixClickable,
  })}
- onClick={onSuffixClick}
+ onClick={ifnot(isSuffixClickable && onSuffixClick)}
  >
  {isLoading ? <ISpinner /> : suffix}
  </ISVGWrap>

src/components/widgets/form-field/index.tsx

@@ -40,6 +40,7 @@ export const IFieldGrid: ReactCFC<IFieldGridProps> = (props) => {
  useResizeObserver(
  ref,
  ({ target: { scrollWidth } }) => {
+ console.log(scrollWidth);
  if (scrollWidth <= 260) {
  setIMode('vertical');
  } else if (scrollWidth <= 430) {
@@ -93,7 +94,7 @@ export const IFieldCell: ReactCFC<IFieldCellProps> = (props) => {
  colon = ctx?.colon ?? ':',
  size = ctx?.size ?? 'medium',
  margin = ctx?.margin ?? false,
- mode = ctx?.mode ?? 'vertical',
+ mode = ctx?.mode ?? 'horizontal',
  forceRenderTitle = ctx?.forceRenderTitle,
  children,
  ...others

src/components/widgets/index.tsx

@@ -2,6 +2,7 @@
  * @description UI组件
  */
 
+export * from './backdrop';
 export * from './button';
 export * from './checkbox';
 export * from './chip';
@@ -17,7 +18,6 @@ export * from './marker';
 export * from './modal';
 export * from './motion-panel';
 export * from './overflow';
-export * from './overlay';
 export * from './picker';
 export * from './popover';
 export * from './radio';