@dsh-plugin/dsh-ui-components 0.0.1 → 0.1.0-dev.43616582648

package/src/basic/input.tsx

@@ -1,140 +1,140 @@
-/**
- * 文本类输入控件。
- *
- * `Input` / `Textarea` 沿用 Arco 的受控与非受控行为，追加 DSH 的两项约定：
- * 等宽字体开关 `mono` 与校验失败标记 `invalid`。尺寸按 DSH 取 32（标准）/
- * 28（紧凑）/ 44（大）。
- *
- * ref 的类型沿用 Arco 自己的签名：它暴露的是 `{ dom, focus, blur }` 这样的
- * 句柄，而不是原生元素。需要原生元素时用 `ref.current.dom`。
- *
- * @module @dsh-plugin/dsh-ui-components/basic/input
- */
-import * as React from 'react'
-import { Arco } from '@dsh-plugin/dsh-loader/client'
-import { cx } from '../foundation/style.js'
-import { injectBasicStyles } from './styles.js'
-
-/** 输入控件的尺寸，与按钮分开定义，因为输入框标准高度是 32 而非 36。 */
-export type FieldSize = 'md' | 'sm' | 'lg'
-
-/** DSH 尺寸到 Arco 尺寸的映射。 */
-const ARCO_SIZE: Record<FieldSize, 'default' | 'small' | 'large'> = {
-  md: 'default',
-  sm: 'small',
-  lg: 'large',
-}
-
-/**
- * 合并 Arco 的 `className`（可能是字符串数组）与 DSH 的附加类名。
- *
- * @param className - Arco 传来的类名。
- * @param extra - 需要追加的类名，假值忽略。
- * @returns 归一化后的 `className`。
- */
-function mergeClass(className: string | string[] | undefined, ...extra: Array<string | false | undefined>): string {
-  const inherited = Array.isArray(className) ? className : className === undefined ? [] : [className]
-  return cx(...inherited, ...extra)
-}
-
-/** Arco 输入框暴露的句柄。 */
-export type InputRef = React.ElementRef<typeof Arco.Input>
-
-/** Arco 文本域暴露的句柄。 */
-export type TextareaRef = React.ElementRef<typeof Arco.Input.TextArea>
-
-/** {@link Input} 的 props。 */
-export type InputProps = Omit<React.ComponentPropsWithoutRef<typeof Arco.Input>, 'size'> & {
-  /** 尺寸，默认 `md`。 */
-  size?: FieldSize
-  /** 使用等宽字体，用于路径、命令与标识符。 */
-  mono?: boolean
-  /** 校验失败。同时设置 `aria-invalid`。 */
-  invalid?: boolean
-}
-
-/**
- * 单行文本输入。
- *
- * @param props - 见 {@link InputProps}。
- * @param ref - Arco 的输入框句柄，含 `dom`、`focus`、`blur`。
- * @returns 输入框元素。
- */
-export const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputRef>> =
-  React.forwardRef<InputRef, InputProps>(function Input(
-    { size = 'md', mono, invalid, className, status, ...rest },
-    ref,
-  ) {
-    injectBasicStyles()
-    return (
-      <Arco.Input
-        {...rest}
-        ref={ref}
-        size={ARCO_SIZE[size]}
-        status={invalid === true ? 'error' : status}
-        aria-invalid={invalid === true ? true : undefined}
-        className={mergeClass(className, mono === true && 'dsh-mono')}
-      />
-    )
-  })
-
-/** {@link Textarea} 的 props。 */
-export type TextareaProps = Omit<React.ComponentPropsWithoutRef<typeof Arco.Input.TextArea>, 'className'> & {
-  /** 尺寸，默认 `md`。Arco 的文本域不接受 `size`，此处以类名表达。 */
-  size?: FieldSize
-  /** 使用等宽字体。 */
-  mono?: boolean
-  /** 校验失败。 */
-  invalid?: boolean
-  /** 追加类名。 */
-  className?: string
-}
-
-/**
- * 多行文本输入，默认最小高度 72 并允许竖向拉伸。
- *
- * @param props - 见 {@link TextareaProps}。
- * @param ref - Arco 的文本域句柄。
- * @returns 文本域元素。
- */
-export const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<TextareaRef>> =
-  React.forwardRef<TextareaRef, TextareaProps>(function Textarea(
-    { size = 'md', mono, invalid, className, status, ...rest },
-    ref,
-  ) {
-    injectBasicStyles()
-    return (
-      <Arco.Input.TextArea
-        {...rest}
-        ref={ref}
-        status={invalid === true ? 'error' : status}
-        aria-invalid={invalid === true ? true : undefined}
-        className={mergeClass(className, `dsh-textarea-${size}`, mono === true && 'dsh-mono')}
-      />
-    )
-  })
-
-/** Arco 数字输入暴露的句柄。 */
-export type InputNumberRef = React.ElementRef<typeof Arco.InputNumber>
-
-/** {@link InputNumber} 的 props。 */
-export type InputNumberProps = Omit<React.ComponentPropsWithoutRef<typeof Arco.InputNumber>, 'size'> & {
-  /** 尺寸，默认 `md`。 */
-  size?: FieldSize
-}
-
-/**
- * 数字输入，可带步进按钮。
- *
- * @param props - 见 {@link InputNumberProps}。
- * @param ref - Arco 的数字输入句柄。
- * @returns 数字输入元素。
- */
-export const InputNumber: React.ForwardRefExoticComponent<InputNumberProps & React.RefAttributes<InputNumberRef>> =
-  React.forwardRef<InputNumberRef, InputNumberProps>(function InputNumber(
-    { size = 'md', ...rest },
-    ref,
-  ) {
-    injectBasicStyles()
-    return <Arco.InputNumber {...rest} ref={ref} size={ARCO_SIZE[size]} />
-  })
+/**
+ * 文本类输入控件。
+ *
+ * `Input` / `Textarea` 沿用 Arco 的受控与非受控行为，追加 DSH 的两项约定：
+ * 等宽字体开关 `mono` 与校验失败标记 `invalid`。尺寸按 DSH 取 32（标准）/
+ * 28（紧凑）/ 44（大）。
+ *
+ * ref 的类型沿用 Arco 自己的签名：它暴露的是 `{ dom, focus, blur }` 这样的
+ * 句柄，而不是原生元素。需要原生元素时用 `ref.current.dom`。
+ *
+ * @module @dsh-plugin/dsh-ui-components/basic/input
+ */
+import * as React from 'react'
+import { Arco } from '@dsh-plugin/dsh-loader/client'
+import { cx } from '../foundation/style.js'
+import { injectBasicStyles } from './styles.js'
+
+/** 输入控件的尺寸，与按钮分开定义，因为输入框标准高度是 32 而非 36。 */
+export type FieldSize = 'md' | 'sm' | 'lg'
+
+/** DSH 尺寸到 Arco 尺寸的映射。 */
+const ARCO_SIZE: Record<FieldSize, 'default' | 'small' | 'large'> = {
+  md: 'default',
+  sm: 'small',
+  lg: 'large',
+}
+
+/**
+ * 合并 Arco 的 `className`（可能是字符串数组）与 DSH 的附加类名。
+ *
+ * @param className - Arco 传来的类名。
+ * @param extra - 需要追加的类名，假值忽略。
+ * @returns 归一化后的 `className`。
+ */
+function mergeClass(className: string | string[] | undefined, ...extra: Array<string | false | undefined>): string {
+  const inherited = Array.isArray(className) ? className : className === undefined ? [] : [className]
+  return cx(...inherited, ...extra)
+}
+
+/** Arco 输入框暴露的句柄。 */
+export type InputRef = React.ElementRef<typeof Arco.Input>
+
+/** Arco 文本域暴露的句柄。 */
+export type TextareaRef = React.ElementRef<typeof Arco.Input.TextArea>
+
+/** {@link Input} 的 props。 */
+export type InputProps = Omit<React.ComponentPropsWithoutRef<typeof Arco.Input>, 'size'> & {
+  /** 尺寸，默认 `md`。 */
+  size?: FieldSize
+  /** 使用等宽字体，用于路径、命令与标识符。 */
+  mono?: boolean
+  /** 校验失败。同时设置 `aria-invalid`。 */
+  invalid?: boolean
+}
+
+/**
+ * 单行文本输入。
+ *
+ * @param props - 见 {@link InputProps}。
+ * @param ref - Arco 的输入框句柄，含 `dom`、`focus`、`blur`。
+ * @returns 输入框元素。
+ */
+export const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputRef>> =
+  React.forwardRef<InputRef, InputProps>(function Input(
+    { size = 'md', mono, invalid, className, status, ...rest },
+    ref,
+  ) {
+    injectBasicStyles()
+    return (
+      <Arco.Input
+        {...rest}
+        ref={ref}
+        size={ARCO_SIZE[size]}
+        status={invalid === true ? 'error' : status}
+        aria-invalid={invalid === true ? true : undefined}
+        className={mergeClass(className, mono === true && 'dsh-mono')}
+      />
+    )
+  })
+
+/** {@link Textarea} 的 props。 */
+export type TextareaProps = Omit<React.ComponentPropsWithoutRef<typeof Arco.Input.TextArea>, 'className'> & {
+  /** 尺寸，默认 `md`。Arco 的文本域不接受 `size`，此处以类名表达。 */
+  size?: FieldSize
+  /** 使用等宽字体。 */
+  mono?: boolean
+  /** 校验失败。 */
+  invalid?: boolean
+  /** 追加类名。 */
+  className?: string
+}
+
+/**
+ * 多行文本输入，默认最小高度 72 并允许竖向拉伸。
+ *
+ * @param props - 见 {@link TextareaProps}。
+ * @param ref - Arco 的文本域句柄。
+ * @returns 文本域元素。
+ */
+export const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<TextareaRef>> =
+  React.forwardRef<TextareaRef, TextareaProps>(function Textarea(
+    { size = 'md', mono, invalid, className, status, ...rest },
+    ref,
+  ) {
+    injectBasicStyles()
+    return (
+      <Arco.Input.TextArea
+        {...rest}
+        ref={ref}
+        status={invalid === true ? 'error' : status}
+        aria-invalid={invalid === true ? true : undefined}
+        className={mergeClass(className, `dsh-textarea-${size}`, mono === true && 'dsh-mono')}
+      />
+    )
+  })
+
+/** Arco 数字输入暴露的句柄。 */
+export type InputNumberRef = React.ElementRef<typeof Arco.InputNumber>
+
+/** {@link InputNumber} 的 props。 */
+export type InputNumberProps = Omit<React.ComponentPropsWithoutRef<typeof Arco.InputNumber>, 'size'> & {
+  /** 尺寸，默认 `md`。 */
+  size?: FieldSize
+}
+
+/**
+ * 数字输入，可带步进按钮。
+ *
+ * @param props - 见 {@link InputNumberProps}。
+ * @param ref - Arco 的数字输入句柄。
+ * @returns 数字输入元素。
+ */
+export const InputNumber: React.ForwardRefExoticComponent<InputNumberProps & React.RefAttributes<InputNumberRef>> =
+  React.forwardRef<InputNumberRef, InputNumberProps>(function InputNumber(
+    { size = 'md', ...rest },
+    ref,
+  ) {
+    injectBasicStyles()
+    return <Arco.InputNumber {...rest} ref={ref} size={ARCO_SIZE[size]} />
+  })

package/src/basic/select.tsx

@@ -1,120 +1,120 @@
-/**
- * 选择类控件。
- *
- * 选项数据统一用 `options: { value, label, disabled }[]`，与 DSH 宿主自己的
- * 选择器一致；`onChange` 直接回调选中的 value，而不是 DOM 事件。
- *
- * @module @dsh-plugin/dsh-ui-components/basic/select
- */
-import * as React from 'react'
-import { Arco } from '@dsh-plugin/dsh-loader/client'
-import { injectBasicStyles } from './styles.js'
-import { type FieldSize } from './input.js'
-
-/** DSH 尺寸到 Arco 尺寸的映射。 */
-const ARCO_SIZE: Record<FieldSize, 'default' | 'small' | 'large'> = {
-  md: 'default',
-  sm: 'small',
-  lg: 'large',
-}
-
-/** 一个选项。 */
-export interface SelectOption {
-  /** 提交值。 */
-  value: string
-  /** 展示文本。 */
-  label: React.ReactNode
-  /** 不可选。 */
-  disabled?: boolean
-}
-
-/** {@link Select} 的 props。 */
-export interface SelectProps {
-  /** 选项列表。 */
-  options: readonly SelectOption[]
-  /** 当前值；多选时为数组。 */
-  value?: string | string[]
-  /** 默认值；多选时为数组。 */
-  defaultValue?: string | string[]
-  /** 选中项变化时回调，参数是选项 value（多选时为数组）。 */
-  onChange?: (value: string | string[]) => void
-  /** 多选模式。 */
-  multiple?: boolean
-  /** 允许清空。 */
-  allowClear?: boolean
-  /** 无选中项时显示的占位文本。 */
-  placeholder?: string
-  /** 禁用。 */
-  disabled?: boolean
-  /** 尺寸，默认 `md`。 */
-  size?: FieldSize
-  /** 校验失败。 */
-  invalid?: boolean
-  /** 前置标签。 */
-  prefix?: React.ReactNode
-  /** 输入框 id，用于与 `Field` 的 label 关联。 */
-  id?: string
-  /** 追加类名。 */
-  className?: string
-  /** 追加内联样式。 */
-  style?: React.CSSProperties
-}
-
-/**
- * 下拉选择。
- *
- * @param props - 见 {@link SelectProps}。
- * @returns 选择器元素。
- */
-export function Select({
-  options,
-  value,
-  defaultValue,
-  onChange,
-  multiple,
-  allowClear,
-  placeholder,
-  disabled,
-  size = 'md',
-  invalid,
-  prefix,
-  id,
-  className,
-  style,
-}: SelectProps): React.ReactElement {
-  injectBasicStyles()
-  return (
-    <Arco.Select
-      options={options as SelectOption[]}
-      value={value}
-      defaultValue={defaultValue}
-      onChange={onChange as (value: unknown) => void}
-      mode={multiple === true ? 'multiple' : undefined}
-      allowClear={allowClear}
-      placeholder={placeholder}
-      disabled={disabled}
-      size={ARCO_SIZE[size]}
-      status={invalid === true ? 'error' : undefined}
-      prefix={prefix}
-      id={id}
-      className={className}
-      style={style}
-    />
-  )
-}
-
-/** {@link AutoComplete} 的 props。 */
-export type AutoCompleteProps = React.ComponentPropsWithoutRef<typeof Arco.AutoComplete>
-
-/**
- * 带候选提示的文本输入。
- *
- * 高度沿用 Arco 的尺寸，通过 `inputProps` 透传输入框属性。
- *
- * @param props - 见 {@link AutoCompleteProps}。
- * @returns 自动完成输入元素。
- */
-export function AutoComplete(props: AutoCompleteProps): React.ReactElement {
-  injectBasicStyles()
-  return <Arco.AutoComplete {...props} />
-}
+/**
+ * 选择类控件。
+ *
+ * 选项数据统一用 `options: { value, label, disabled }[]`，与 DSH 宿主自己的
+ * 选择器一致；`onChange` 直接回调选中的 value，而不是 DOM 事件。
+ *
+ * @module @dsh-plugin/dsh-ui-components/basic/select
+ */
+import * as React from 'react'
+import { Arco } from '@dsh-plugin/dsh-loader/client'
+import { injectBasicStyles } from './styles.js'
+import { type FieldSize } from './input.js'
+
+/** DSH 尺寸到 Arco 尺寸的映射。 */
+const ARCO_SIZE: Record<FieldSize, 'default' | 'small' | 'large'> = {
+  md: 'default',
+  sm: 'small',
+  lg: 'large',
+}
+
+/** 一个选项。 */
+export interface SelectOption {
+  /** 提交值。 */
+  value: string
+  /** 展示文本。 */
+  label: React.ReactNode
+  /** 不可选。 */
+  disabled?: boolean
+}
+
+/** {@link Select} 的 props。 */
+export interface SelectProps {
+  /** 选项列表。 */
+  options: readonly SelectOption[]
+  /** 当前值；多选时为数组。 */
+  value?: string | string[]
+  /** 默认值；多选时为数组。 */
+  defaultValue?: string | string[]
+  /** 选中项变化时回调，参数是选项 value（多选时为数组）。 */
+  onChange?: (value: string | string[]) => void
+  /** 多选模式。 */
+  multiple?: boolean
+  /** 允许清空。 */
+  allowClear?: boolean
+  /** 无选中项时显示的占位文本。 */
+  placeholder?: string
+  /** 禁用。 */
+  disabled?: boolean
+  /** 尺寸，默认 `md`。 */
+  size?: FieldSize
+  /** 校验失败。 */
+  invalid?: boolean
+  /** 前置标签。 */
+  prefix?: React.ReactNode
+  /** 输入框 id，用于与 `Field` 的 label 关联。 */
+  id?: string
+  /** 追加类名。 */
+  className?: string
+  /** 追加内联样式。 */
+  style?: React.CSSProperties
+}
+
+/**
+ * 下拉选择。
+ *
+ * @param props - 见 {@link SelectProps}。
+ * @returns 选择器元素。
+ */
+export function Select({
+  options,
+  value,
+  defaultValue,
+  onChange,
+  multiple,
+  allowClear,
+  placeholder,
+  disabled,
+  size = 'md',
+  invalid,
+  prefix,
+  id,
+  className,
+  style,
+}: SelectProps): React.ReactElement {
+  injectBasicStyles()
+  return (
+    <Arco.Select
+      options={options as SelectOption[]}
+      value={value}
+      defaultValue={defaultValue}
+      onChange={onChange as (value: unknown) => void}
+      mode={multiple === true ? 'multiple' : undefined}
+      allowClear={allowClear}
+      placeholder={placeholder}
+      disabled={disabled}
+      size={ARCO_SIZE[size]}
+      status={invalid === true ? 'error' : undefined}
+      prefix={prefix}
+      id={id}
+      className={className}
+      style={style}
+    />
+  )
+}
+
+/** {@link AutoComplete} 的 props。 */
+export type AutoCompleteProps = React.ComponentPropsWithoutRef<typeof Arco.AutoComplete>
+
+/**
+ * 带候选提示的文本输入。
+ *
+ * 高度沿用 Arco 的尺寸，通过 `inputProps` 透传输入框属性。
+ *
+ * @param props - 见 {@link AutoCompleteProps}。
+ * @returns 自动完成输入元素。
+ */
+export function AutoComplete(props: AutoCompleteProps): React.ReactElement {
+  injectBasicStyles()
+  return <Arco.AutoComplete {...props} />
+}