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

package/src/basic/toggle.tsx

@@ -1,116 +1,116 @@
-/**
- * 开关类控件：复选框、单选框、开关。
- *
- * 三者都沿用 Arco 的受控与非受控语义，因此 `checked` / `defaultChecked` /
- * `onChange` 的行为与原生表单一致。勾选状态的配色由桥接样式表改指 DSH 的
- * 品牌色令牌。
- *
- * @module @dsh-plugin/dsh-ui-components/basic/toggle
- */
-import * as React from 'react'
-import { Arco } from '@dsh-plugin/dsh-loader/client'
-import { injectBasicStyles } from './styles.js'
-
-/** {@link Checkbox} 的 props。 */
-export type CheckboxProps = Omit<React.ComponentPropsWithoutRef<typeof Arco.Checkbox>, 'children'> & {
-  /** 勾选框右侧的文字。 */
-  label?: React.ReactNode
-}
-
-/**
- * 一个复选框。
- *
- * @param props - 见 {@link CheckboxProps}。
- * @returns 复选框元素。
- */
-export function Checkbox({ label, ...rest }: CheckboxProps): React.ReactElement {
-  injectBasicStyles()
-  return <Arco.Checkbox {...rest}>{label}</Arco.Checkbox>
-}
-
-/** {@link CheckboxGroup} 的 props。 */
-export type CheckboxGroupProps = React.ComponentPropsWithoutRef<typeof Arco.Checkbox.Group>
-
-/**
- * 一组复选框。
- *
- * @param props - 见 {@link CheckboxGroupProps}。
- * @returns 复选框组元素。
- */
-export function CheckboxGroup(props: CheckboxGroupProps): React.ReactElement {
-  injectBasicStyles()
-  return <Arco.Checkbox.Group {...props} />
-}
-
-/** {@link Radio} 的 props。 */
-export type RadioProps = Omit<React.ComponentPropsWithoutRef<typeof Arco.Radio>, 'children'> & {
-  /** 单选框右侧的文字。 */
-  label?: React.ReactNode
-}
-
-/**
- * 一个单选框。
- *
- * @param props - 见 {@link RadioProps}。
- * @returns 单选框元素。
- */
-export function Radio({ label, ...rest }: RadioProps): React.ReactElement {
-  injectBasicStyles()
-  return <Arco.Radio {...rest}>{label}</Arco.Radio>
-}
-
-/** {@link RadioGroup} 的 props。 */
-export type RadioGroupProps = React.ComponentPropsWithoutRef<typeof Arco.Radio.Group>
-
-/**
- * 一组单选框，`onChange` 回调选中的 value。
- *
- * @param props - 见 {@link RadioGroupProps}。
- * @returns 单选框组元素。
- */
-export function RadioGroup(props: RadioGroupProps): React.ReactElement {
-  injectBasicStyles()
-  return <Arco.Radio.Group {...props} />
-}
-
-/** {@link Switch} 的 props。 */
-export type SwitchProps = React.ComponentPropsWithoutRef<typeof Arco.Switch>
-
-/**
- * 一个开关，用于即时生效的设置项。
- *
- * @param props - 见 {@link SwitchProps}。
- * @returns 开关元素。
- */
-export function Switch(props: SwitchProps): React.ReactElement {
-  injectBasicStyles()
-  return <Arco.Switch {...props} />
-}
-
-/** {@link Slider} 的 props。 */
-export type SliderProps = React.ComponentPropsWithoutRef<typeof Arco.Slider>
-
-/**
- * 一个滑块。
- *
- * @param props - 见 {@link SliderProps}。
- * @returns 滑块元素。
- */
-export function Slider(props: SliderProps): React.ReactElement {
-  injectBasicStyles()
-  return <Arco.Slider {...props} />
-}
-
-/** {@link Rate} 的 props。 */
-export type RateProps = React.ComponentPropsWithoutRef<typeof Arco.Rate>
-
-/**
- * 一个评分控件。
- *
- * @param props - 见 {@link RateProps}。
- * @returns 评分元素。
- */
-export function Rate(props: RateProps): React.ReactElement {
-  injectBasicStyles()
-  return <Arco.Rate {...props} />
-}
+/**
+ * 开关类控件：复选框、单选框、开关。
+ *
+ * 三者都沿用 Arco 的受控与非受控语义，因此 `checked` / `defaultChecked` /
+ * `onChange` 的行为与原生表单一致。勾选状态的配色由桥接样式表改指 DSH 的
+ * 品牌色令牌。
+ *
+ * @module @dsh-plugin/dsh-ui-components/basic/toggle
+ */
+import * as React from 'react'
+import { Arco } from '@dsh-plugin/dsh-loader/client'
+import { injectBasicStyles } from './styles.js'
+
+/** {@link Checkbox} 的 props。 */
+export type CheckboxProps = Omit<React.ComponentPropsWithoutRef<typeof Arco.Checkbox>, 'children'> & {
+  /** 勾选框右侧的文字。 */
+  label?: React.ReactNode
+}
+
+/**
+ * 一个复选框。
+ *
+ * @param props - 见 {@link CheckboxProps}。
+ * @returns 复选框元素。
+ */
+export function Checkbox({ label, ...rest }: CheckboxProps): React.ReactElement {
+  injectBasicStyles()
+  return <Arco.Checkbox {...rest}>{label}</Arco.Checkbox>
+}
+
+/** {@link CheckboxGroup} 的 props。 */
+export type CheckboxGroupProps = React.ComponentPropsWithoutRef<typeof Arco.Checkbox.Group>
+
+/**
+ * 一组复选框。
+ *
+ * @param props - 见 {@link CheckboxGroupProps}。
+ * @returns 复选框组元素。
+ */
+export function CheckboxGroup(props: CheckboxGroupProps): React.ReactElement {
+  injectBasicStyles()
+  return <Arco.Checkbox.Group {...props} />
+}
+
+/** {@link Radio} 的 props。 */
+export type RadioProps = Omit<React.ComponentPropsWithoutRef<typeof Arco.Radio>, 'children'> & {
+  /** 单选框右侧的文字。 */
+  label?: React.ReactNode
+}
+
+/**
+ * 一个单选框。
+ *
+ * @param props - 见 {@link RadioProps}。
+ * @returns 单选框元素。
+ */
+export function Radio({ label, ...rest }: RadioProps): React.ReactElement {
+  injectBasicStyles()
+  return <Arco.Radio {...rest}>{label}</Arco.Radio>
+}
+
+/** {@link RadioGroup} 的 props。 */
+export type RadioGroupProps = React.ComponentPropsWithoutRef<typeof Arco.Radio.Group>
+
+/**
+ * 一组单选框，`onChange` 回调选中的 value。
+ *
+ * @param props - 见 {@link RadioGroupProps}。
+ * @returns 单选框组元素。
+ */
+export function RadioGroup(props: RadioGroupProps): React.ReactElement {
+  injectBasicStyles()
+  return <Arco.Radio.Group {...props} />
+}
+
+/** {@link Switch} 的 props。 */
+export type SwitchProps = React.ComponentPropsWithoutRef<typeof Arco.Switch>
+
+/**
+ * 一个开关，用于即时生效的设置项。
+ *
+ * @param props - 见 {@link SwitchProps}。
+ * @returns 开关元素。
+ */
+export function Switch(props: SwitchProps): React.ReactElement {
+  injectBasicStyles()
+  return <Arco.Switch {...props} />
+}
+
+/** {@link Slider} 的 props。 */
+export type SliderProps = React.ComponentPropsWithoutRef<typeof Arco.Slider>
+
+/**
+ * 一个滑块。
+ *
+ * @param props - 见 {@link SliderProps}。
+ * @returns 滑块元素。
+ */
+export function Slider(props: SliderProps): React.ReactElement {
+  injectBasicStyles()
+  return <Arco.Slider {...props} />
+}
+
+/** {@link Rate} 的 props。 */
+export type RateProps = React.ComponentPropsWithoutRef<typeof Arco.Rate>
+
+/**
+ * 一个评分控件。
+ *
+ * @param props - 见 {@link RateProps}。
+ * @returns 评分元素。
+ */
+export function Rate(props: RateProps): React.ReactElement {
+  injectBasicStyles()
+  return <Arco.Rate {...props} />
+}

package/src/composites/data-view.tsx

@@ -1,189 +1,189 @@
-/**
- * JSON 树与代码块外壳。
- *
- * `JsonTree` 用于只读查看工具入参与结果，配色走宿主自己的 JSON 配色令牌；
- * `CodeBlockShell` 提供语言标签、右侧操作区与等宽内容区，供插件包裹自己的
- * 高亮结果。
- *
- * @module @dsh-plugin/dsh-ui-components/composites/data-view
- */
-import * as React from 'react'
-import { cx } from '../foundation/style.js'
-import { Icon } from '../foundation/icons.js'
-import { injectCompositeStyles } from './styles.js'
-
-/** {@link JsonTree} 的 props。 */
-export interface JsonTreeProps {
-  /** 要展示的值，可以是任意可 JSON 化的数据。 */
-  value: unknown
-  /** 根节点的初始展开状态，默认展开。 */
-  defaultExpanded?: boolean
-  /** 追加类名。 */
-  className?: string
-}
-
-/** 一个值的渲染种类。 */
-type JsonKind = 'object' | 'array' | 'string' | 'number' | 'boolean' | 'null'
-
-/**
- * 判断一个值的渲染种类。
- *
- * @param value - 任意值。
- * @returns 渲染种类。
- */
-function kindOf(value: unknown): JsonKind {
-  if (value === null) return 'null'
-  if (Array.isArray(value)) return 'array'
-  const type = typeof value
-  if (type === 'object') return 'object'
-  if (type === 'number') return 'number'
-  if (type === 'boolean') return 'boolean'
-  return 'string'
-}
-
-/** 一个节点。 */
-interface JsonNodeProps {
-  /** 键名；根节点省略。 */
-  name?: string
-  /** 值。 */
-  value: unknown
-  /** 是否是最后一个同级节点，决定尾逗号。 */
-  last: boolean
-  /** 初始是否展开。 */
-  defaultExpanded: boolean
-  /** 缩进层级，仅用于渲染。 */
-  depth: number
-}
-
-/**
- * 渲染一个 JSON 节点。
- *
- * @param props - 见 {@link JsonNodeProps}。
- * @returns 节点元素。
- */
-function JsonNode({ name, value, last, defaultExpanded, depth }: JsonNodeProps): React.ReactElement {
-  const kind = kindOf(value)
-  const expandable = kind === 'object' || kind === 'array'
-  const [expanded, setExpanded] = React.useState(defaultExpanded || depth < 1)
-  const suffix = last ? '' : ','
-  const keyPart = name === undefined ? null : <span className="dsh-json-tree__key">{name}: </span>
-
-  if (!expandable) {
-    const text = kind === 'string' ? JSON.stringify(value) : String(value)
-    const className =
-      kind === 'string'
-        ? 'dsh-json-tree__string'
-        : kind === 'number'
-          ? 'dsh-json-tree__number'
-          : 'dsh-json-tree__keyword'
-    return (
-      <div className="dsh-json-tree__row" style={{ paddingLeft: depth * 12 }}>
-        <span style={{ width: 14, flex: 'none' }} />
-        {keyPart}
-        <span className={className}>{text}</span>
-        <span className="dsh-json-tree__punct">{suffix}</span>
-      </div>
-    )
-  }
-
-  const entries = kind === 'array'
-    ? (value as unknown[]).map((item, index) => [String(index), item] as const)
-    : Object.entries(value as Record<string, unknown>)
-  const open = kind === 'array' ? '[' : '{'
-  const close = kind === 'array' ? ']' : '}'
-
-  return (
-    <div>
-      <div className="dsh-json-tree__row" style={{ paddingLeft: depth * 12 }}>
-        <button
-          type="button"
-          className="dsh-json-tree__toggle"
-          aria-expanded={expanded}
-          aria-label={expanded ? '收起' : '展开'}
-          onClick={() => setExpanded(previous => !previous)}
-        >
-          <Icon name={expanded ? 'ChevronDown' : 'ChevronRight'} size={10} />
-        </button>
-        {keyPart}
-        <span className="dsh-json-tree__punct">{open}</span>
-        {expanded ? null : (
-          <>
-            <span className="dsh-json-tree__summary">{` ${entries.length} 项 `}</span>
-            <span className="dsh-json-tree__punct">{close}{suffix}</span>
-          </>
-        )}
-      </div>
-      {expanded ? (
-        <>
-          <div className="dsh-json-tree__children">
-            {entries.map(([key, item], index) => (
-              <JsonNode
-                key={key}
-                name={kind === 'array' ? undefined : key}
-                value={item}
-                last={index === entries.length - 1}
-                defaultExpanded={defaultExpanded}
-                depth={depth + 1}
-              />
-            ))}
-          </div>
-          {/* 闭合括号属于当前层，必须与开括号同级缩进；放进子容器会多缩一层。 */}
-          <div className="dsh-json-tree__row" style={{ paddingLeft: depth * 12 }}>
-            <span style={{ width: 14, flex: 'none' }} />
-            <span className="dsh-json-tree__punct">{close}{suffix}</span>
-          </div>
-        </>
-      ) : null}
-    </div>
-  )
-}
-
-/**
- * 只读 JSON 树。
- *
- * @param props - 见 {@link JsonTreeProps}。
- * @returns JSON 树元素。
- */
-export function JsonTree({ value, defaultExpanded = false, className }: JsonTreeProps): React.ReactElement {
-  injectCompositeStyles()
-  return (
-    <div className={cx('dsh-json-tree', className)}>
-      <JsonNode value={value} last defaultExpanded={defaultExpanded} depth={0} />
-    </div>
-  )
-}
-
-/** {@link CodeBlockShell} 的 props。 */
-export interface CodeBlockShellProps {
-  /** 语言标签，显示在横幅左侧。 */
-  language?: string
-  /** 横幅右侧的操作。 */
-  actions?: React.ReactNode
-  /** 代码内容，通常是 `<pre>` 或高亮后的节点。 */
-  children?: React.ReactNode
-  /** 追加类名。 */
-  className?: string
-}
-
-/**
- * 代码块外壳：横幅加等宽内容区。
- *
- * @param props - 见 {@link CodeBlockShellProps}。
- * @returns 代码块元素。
- */
-export function CodeBlockShell({ language, actions, children, className }: CodeBlockShellProps): React.ReactElement {
-  injectCompositeStyles()
-  return (
-    <div className={cx('dsh-code-shell', className)}>
-      {language === undefined && actions === undefined
-        ? null
-        : (
-          <div className="dsh-code-shell__banner">
-            <span className="dsh-code-shell__lang">{language}</span>
-            {actions === undefined ? null : <span className="dsh-code-shell__actions">{actions}</span>}
-          </div>
-        )}
-      <div className="dsh-code-shell__body">{children}</div>
-    </div>
-  )
-}
+/**
+ * JSON 树与代码块外壳。
+ *
+ * `JsonTree` 用于只读查看工具入参与结果，配色走宿主自己的 JSON 配色令牌；
+ * `CodeBlockShell` 提供语言标签、右侧操作区与等宽内容区，供插件包裹自己的
+ * 高亮结果。
+ *
+ * @module @dsh-plugin/dsh-ui-components/composites/data-view
+ */
+import * as React from 'react'
+import { cx } from '../foundation/style.js'
+import { Icon } from '../foundation/icons.js'
+import { injectCompositeStyles } from './styles.js'
+
+/** {@link JsonTree} 的 props。 */
+export interface JsonTreeProps {
+  /** 要展示的值，可以是任意可 JSON 化的数据。 */
+  value: unknown
+  /** 根节点的初始展开状态，默认展开。 */
+  defaultExpanded?: boolean
+  /** 追加类名。 */
+  className?: string
+}
+
+/** 一个值的渲染种类。 */
+type JsonKind = 'object' | 'array' | 'string' | 'number' | 'boolean' | 'null'
+
+/**
+ * 判断一个值的渲染种类。
+ *
+ * @param value - 任意值。
+ * @returns 渲染种类。
+ */
+function kindOf(value: unknown): JsonKind {
+  if (value === null) return 'null'
+  if (Array.isArray(value)) return 'array'
+  const type = typeof value
+  if (type === 'object') return 'object'
+  if (type === 'number') return 'number'
+  if (type === 'boolean') return 'boolean'
+  return 'string'
+}
+
+/** 一个节点。 */
+interface JsonNodeProps {
+  /** 键名；根节点省略。 */
+  name?: string
+  /** 值。 */
+  value: unknown
+  /** 是否是最后一个同级节点，决定尾逗号。 */
+  last: boolean
+  /** 初始是否展开。 */
+  defaultExpanded: boolean
+  /** 缩进层级，仅用于渲染。 */
+  depth: number
+}
+
+/**
+ * 渲染一个 JSON 节点。
+ *
+ * @param props - 见 {@link JsonNodeProps}。
+ * @returns 节点元素。
+ */
+function JsonNode({ name, value, last, defaultExpanded, depth }: JsonNodeProps): React.ReactElement {
+  const kind = kindOf(value)
+  const expandable = kind === 'object' || kind === 'array'
+  const [expanded, setExpanded] = React.useState(defaultExpanded || depth < 1)
+  const suffix = last ? '' : ','
+  const keyPart = name === undefined ? null : <span className="dsh-json-tree__key">{name}: </span>
+
+  if (!expandable) {
+    const text = kind === 'string' ? JSON.stringify(value) : String(value)
+    const className =
+      kind === 'string'
+        ? 'dsh-json-tree__string'
+        : kind === 'number'
+          ? 'dsh-json-tree__number'
+          : 'dsh-json-tree__keyword'
+    return (
+      <div className="dsh-json-tree__row" style={{ paddingLeft: depth * 12 }}>
+        <span style={{ width: 14, flex: 'none' }} />
+        {keyPart}
+        <span className={className}>{text}</span>
+        <span className="dsh-json-tree__punct">{suffix}</span>
+      </div>
+    )
+  }
+
+  const entries = kind === 'array'
+    ? (value as unknown[]).map((item, index) => [String(index), item] as const)
+    : Object.entries(value as Record<string, unknown>)
+  const open = kind === 'array' ? '[' : '{'
+  const close = kind === 'array' ? ']' : '}'
+
+  return (
+    <div>
+      <div className="dsh-json-tree__row" style={{ paddingLeft: depth * 12 }}>
+        <button
+          type="button"
+          className="dsh-json-tree__toggle"
+          aria-expanded={expanded}
+          aria-label={expanded ? '收起' : '展开'}
+          onClick={() => setExpanded(previous => !previous)}
+        >
+          <Icon name={expanded ? 'ChevronDown' : 'ChevronRight'} size={10} />
+        </button>
+        {keyPart}
+        <span className="dsh-json-tree__punct">{open}</span>
+        {expanded ? null : (
+          <>
+            <span className="dsh-json-tree__summary">{` ${entries.length} 项 `}</span>
+            <span className="dsh-json-tree__punct">{close}{suffix}</span>
+          </>
+        )}
+      </div>
+      {expanded ? (
+        <>
+          <div className="dsh-json-tree__children">
+            {entries.map(([key, item], index) => (
+              <JsonNode
+                key={key}
+                name={kind === 'array' ? undefined : key}
+                value={item}
+                last={index === entries.length - 1}
+                defaultExpanded={defaultExpanded}
+                depth={depth + 1}
+              />
+            ))}
+          </div>
+          {/* 闭合括号属于当前层，必须与开括号同级缩进；放进子容器会多缩一层。 */}
+          <div className="dsh-json-tree__row" style={{ paddingLeft: depth * 12 }}>
+            <span style={{ width: 14, flex: 'none' }} />
+            <span className="dsh-json-tree__punct">{close}{suffix}</span>
+          </div>
+        </>
+      ) : null}
+    </div>
+  )
+}
+
+/**
+ * 只读 JSON 树。
+ *
+ * @param props - 见 {@link JsonTreeProps}。
+ * @returns JSON 树元素。
+ */
+export function JsonTree({ value, defaultExpanded = false, className }: JsonTreeProps): React.ReactElement {
+  injectCompositeStyles()
+  return (
+    <div className={cx('dsh-json-tree', className)}>
+      <JsonNode value={value} last defaultExpanded={defaultExpanded} depth={0} />
+    </div>
+  )
+}
+
+/** {@link CodeBlockShell} 的 props。 */
+export interface CodeBlockShellProps {
+  /** 语言标签，显示在横幅左侧。 */
+  language?: string
+  /** 横幅右侧的操作。 */
+  actions?: React.ReactNode
+  /** 代码内容，通常是 `<pre>` 或高亮后的节点。 */
+  children?: React.ReactNode
+  /** 追加类名。 */
+  className?: string
+}
+
+/**
+ * 代码块外壳：横幅加等宽内容区。
+ *
+ * @param props - 见 {@link CodeBlockShellProps}。
+ * @returns 代码块元素。
+ */
+export function CodeBlockShell({ language, actions, children, className }: CodeBlockShellProps): React.ReactElement {
+  injectCompositeStyles()
+  return (
+    <div className={cx('dsh-code-shell', className)}>
+      {language === undefined && actions === undefined
+        ? null
+        : (
+          <div className="dsh-code-shell__banner">
+            <span className="dsh-code-shell__lang">{language}</span>
+            {actions === undefined ? null : <span className="dsh-code-shell__actions">{actions}</span>}
+          </div>
+        )}
+      <div className="dsh-code-shell__body">{children}</div>
+    </div>
+  )
+}

package/src/composites/index.ts

@@ -1,11 +1,11 @@
-/**
- * DSH 专属组合件出口。
- *
- * @module @dsh-plugin/dsh-ui-components/composites
- */
-export { SettingsCard, SettingsRow, type SettingsCardProps, type SettingsRowProps } from './settings.js'
-export { PanelShell, type PanelShellProps } from './panel.js'
-export { MenuSelect, type MenuSelectOption, type MenuSelectProps } from './menu-select.js'
-export { CodeBlockShell, JsonTree, type CodeBlockShellProps, type JsonTreeProps } from './data-view.js'
-export { FileTypeBadge, StatusLine, type FileTypeBadgeProps, type StatusLineProps } from './indicator.js'
-export { COMPOSITES_CSS, injectCompositeStyles } from './styles.js'
+/**
+ * DSH 专属组合件出口。
+ *
+ * @module @dsh-plugin/dsh-ui-components/composites
+ */
+export { SettingsCard, SettingsRow, type SettingsCardProps, type SettingsRowProps } from './settings.js'
+export { PanelShell, type PanelShellProps } from './panel.js'
+export { MenuSelect, type MenuSelectOption, type MenuSelectProps } from './menu-select.js'
+export { CodeBlockShell, JsonTree, type CodeBlockShellProps, type JsonTreeProps } from './data-view.js'
+export { FileTypeBadge, StatusLine, type FileTypeBadgeProps, type StatusLineProps } from './indicator.js'
+export { COMPOSITES_CSS, injectCompositeStyles } from './styles.js'