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

package/src/composites/panel.tsx

@@ -1,72 +1,72 @@
-/**
- * 弹出层外壳。
- *
- * 插件自己实现的弹窗、面板、配置编辑器都用它，从而自动满足全局规范：与窗口
- * 上下各留 120px、最大高度 `calc(100dvh - 240px)`、内容区内部滚动、标题与
- * 操作行固定可见。内容滚动统一用 loader 的 `Scrollbar`。
- *
- * @module @dsh-plugin/dsh-ui-components/composites/panel
- */
-import * as React from 'react'
-import { Scrollbar } from '@dsh-plugin/dsh-loader/client'
-import { cx } from '../foundation/style.js'
-import { IconButton } from '../basic/icon-button.js'
-import { Icon } from '../foundation/icons.js'
-import { injectCompositeStyles } from './styles.js'
-
-/** {@link PanelShell} 的 props。 */
-export interface PanelShellProps {
-  /** 面板标题。 */
-  title?: React.ReactNode
-  /** 标题右侧关闭按钮的可访问名称；省略时不渲染关闭按钮。 */
-  closeLabel?: string
-  /** 关闭时回调。 */
-  onClose?: () => void
-  /** 底部操作区。 */
-  footer?: React.ReactNode
-  /** 内容。 */
-  children?: React.ReactNode
-  /** 追加类名。 */
-  className?: string
-  /** 关闭时是否渲染遮罩，默认渲染。 */
-  mask?: boolean
-}
-
-/**
- * 一个居中的弹出面板，自带规范要求的留白与滚动行为。
- *
- * @param props - 见 {@link PanelShellProps}。
- * @returns 面板元素。
- */
-export function PanelShell({
-  title,
-  closeLabel,
-  onClose,
-  footer,
-  children,
-  className,
-  mask = true,
-}: PanelShellProps): React.ReactElement {
-  injectCompositeStyles()
-  return (
-    <div className={cx('dsh-panel-shell', className)} role="dialog" aria-modal="true" aria-label={typeof title === 'string' ? title : undefined}>
-      {mask ? <div className="dsh-panel-shell__mask" onClick={onClose} /> : null}
-      <div className="dsh-panel-shell__card">
-        {title === undefined && closeLabel === undefined
-          ? null
-          : (
-            <div className="dsh-panel-shell__header">
-              {title === undefined ? <span /> : <h2 className="dsh-panel-shell__title">{title}</h2>}
-              {closeLabel === undefined
-                ? null
-                : <IconButton icon={<Icon name="Close" />} label={closeLabel} onClick={onClose} />}
-            </div>
-          )}
-        <div className="dsh-panel-shell__body">
-          <Scrollbar style={{ maxHeight: '100%' }}>{children}</Scrollbar>
-        </div>
-        {footer === undefined ? null : <div className="dsh-panel-shell__footer">{footer}</div>}
-      </div>
-    </div>
-  )
-}
+/**
+ * 弹出层外壳。
+ *
+ * 插件自己实现的弹窗、面板、配置编辑器都用它，从而自动满足全局规范：与窗口
+ * 上下各留 120px、最大高度 `calc(100dvh - 240px)`、内容区内部滚动、标题与
+ * 操作行固定可见。内容滚动统一用 loader 的 `Scrollbar`。
+ *
+ * @module @dsh-plugin/dsh-ui-components/composites/panel
+ */
+import * as React from 'react'
+import { Scrollbar } from '@dsh-plugin/dsh-loader/client'
+import { cx } from '../foundation/style.js'
+import { IconButton } from '../basic/icon-button.js'
+import { Icon } from '../foundation/icons.js'
+import { injectCompositeStyles } from './styles.js'
+
+/** {@link PanelShell} 的 props。 */
+export interface PanelShellProps {
+  /** 面板标题。 */
+  title?: React.ReactNode
+  /** 标题右侧关闭按钮的可访问名称；省略时不渲染关闭按钮。 */
+  closeLabel?: string
+  /** 关闭时回调。 */
+  onClose?: () => void
+  /** 底部操作区。 */
+  footer?: React.ReactNode
+  /** 内容。 */
+  children?: React.ReactNode
+  /** 追加类名。 */
+  className?: string
+  /** 关闭时是否渲染遮罩，默认渲染。 */
+  mask?: boolean
+}
+
+/**
+ * 一个居中的弹出面板，自带规范要求的留白与滚动行为。
+ *
+ * @param props - 见 {@link PanelShellProps}。
+ * @returns 面板元素。
+ */
+export function PanelShell({
+  title,
+  closeLabel,
+  onClose,
+  footer,
+  children,
+  className,
+  mask = true,
+}: PanelShellProps): React.ReactElement {
+  injectCompositeStyles()
+  return (
+    <div className={cx('dsh-panel-shell', className)} role="dialog" aria-modal="true" aria-label={typeof title === 'string' ? title : undefined}>
+      {mask ? <div className="dsh-panel-shell__mask" onClick={onClose} /> : null}
+      <div className="dsh-panel-shell__card">
+        {title === undefined && closeLabel === undefined
+          ? null
+          : (
+            <div className="dsh-panel-shell__header">
+              {title === undefined ? <span /> : <h2 className="dsh-panel-shell__title">{title}</h2>}
+              {closeLabel === undefined
+                ? null
+                : <IconButton icon={<Icon name="Close" />} label={closeLabel} onClick={onClose} />}
+            </div>
+          )}
+        <div className="dsh-panel-shell__body">
+          <Scrollbar style={{ maxHeight: '100%' }}>{children}</Scrollbar>
+        </div>
+        {footer === undefined ? null : <div className="dsh-panel-shell__footer">{footer}</div>}
+      </div>
+    </div>
+  )
+}

package/src/composites/settings.tsx

@@ -1,80 +1,80 @@
-/**
- * 设置页卡片与设置行。
- *
- * 这两个组件对应宿主设置页的实际结构：一张卡片包住若干行「标签 + 说明 +
- * 控件」，卡片用宿主的设置卡填充与描边令牌。插件写配置页时用它们，比直接用
- * `Card` 更贴近宿主外观。
- *
- * @module @dsh-plugin/dsh-ui-components/composites/settings
- */
-import * as React from 'react'
-import { cx } from '../foundation/style.js'
-import { injectCompositeStyles } from './styles.js'
-
-/** {@link SettingsCard} 的 props。 */
-export interface SettingsCardProps {
-  /** 卡片标题。 */
-  title?: React.ReactNode
-  /** 标题下方的说明。 */
-  description?: React.ReactNode
-  /** 卡片底部操作区，通常是保存与重置按钮。 */
-  footer?: React.ReactNode
-  /** 卡片内容，一般是一组 {@link SettingsRow}。 */
-  children?: React.ReactNode
-  /** 追加类名。 */
-  className?: string
-}
-
-/**
- * 设置页中的一张卡片。
- *
- * @param props - 见 {@link SettingsCardProps}。
- * @returns 卡片元素。
- */
-export function SettingsCard({ title, description, footer, children, className }: SettingsCardProps): React.ReactElement {
-  injectCompositeStyles()
-  return (
-    <section className={cx('dsh-settings-card', className)}>
-      {title === undefined ? null : <h3 className="dsh-settings-card__title">{title}</h3>}
-      {description === undefined ? null : <p className="dsh-settings-card__desc">{description}</p>}
-      <div className="dsh-settings-card__body">{children}</div>
-      {footer === undefined ? null : <div className="dsh-settings-card__footer">{footer}</div>}
-    </section>
-  )
-}
-
-/** {@link SettingsRow} 的 props。 */
-export interface SettingsRowProps {
-  /** 行标签。 */
-  label: React.ReactNode
-  /** 标签下方的说明。 */
-  description?: React.ReactNode
-  /** 控件。 */
-  children?: React.ReactNode
-  /**
-   * 布局。`inline` 让控件靠右，适合开关与短选择器；`stack` 让控件占满一行，
-   * 适合输入框与文本域。
-   */
-  layout?: 'inline' | 'stack'
-  /** 追加类名。 */
-  className?: string
-}
-
-/**
- * 设置页中的一行。
- *
- * @param props - 见 {@link SettingsRowProps}。
- * @returns 设置行元素。
- */
-export function SettingsRow({ label, description, children, layout = 'inline', className }: SettingsRowProps): React.ReactElement {
-  injectCompositeStyles()
-  return (
-    <div className={cx('dsh-settings-row', layout === 'stack' && 'dsh-settings-row--stack', className)}>
-      <div className="dsh-settings-row__text">
-        <span className="dsh-settings-row__label">{label}</span>
-        {description === undefined ? null : <span className="dsh-settings-row__desc">{description}</span>}
-      </div>
-      {children === undefined ? null : <div className="dsh-settings-row__control">{children}</div>}
-    </div>
-  )
-}
+/**
+ * 设置页卡片与设置行。
+ *
+ * 这两个组件对应宿主设置页的实际结构：一张卡片包住若干行「标签 + 说明 +
+ * 控件」，卡片用宿主的设置卡填充与描边令牌。插件写配置页时用它们，比直接用
+ * `Card` 更贴近宿主外观。
+ *
+ * @module @dsh-plugin/dsh-ui-components/composites/settings
+ */
+import * as React from 'react'
+import { cx } from '../foundation/style.js'
+import { injectCompositeStyles } from './styles.js'
+
+/** {@link SettingsCard} 的 props。 */
+export interface SettingsCardProps {
+  /** 卡片标题。 */
+  title?: React.ReactNode
+  /** 标题下方的说明。 */
+  description?: React.ReactNode
+  /** 卡片底部操作区，通常是保存与重置按钮。 */
+  footer?: React.ReactNode
+  /** 卡片内容，一般是一组 {@link SettingsRow}。 */
+  children?: React.ReactNode
+  /** 追加类名。 */
+  className?: string
+}
+
+/**
+ * 设置页中的一张卡片。
+ *
+ * @param props - 见 {@link SettingsCardProps}。
+ * @returns 卡片元素。
+ */
+export function SettingsCard({ title, description, footer, children, className }: SettingsCardProps): React.ReactElement {
+  injectCompositeStyles()
+  return (
+    <section className={cx('dsh-settings-card', className)}>
+      {title === undefined ? null : <h3 className="dsh-settings-card__title">{title}</h3>}
+      {description === undefined ? null : <p className="dsh-settings-card__desc">{description}</p>}
+      <div className="dsh-settings-card__body">{children}</div>
+      {footer === undefined ? null : <div className="dsh-settings-card__footer">{footer}</div>}
+    </section>
+  )
+}
+
+/** {@link SettingsRow} 的 props。 */
+export interface SettingsRowProps {
+  /** 行标签。 */
+  label: React.ReactNode
+  /** 标签下方的说明。 */
+  description?: React.ReactNode
+  /** 控件。 */
+  children?: React.ReactNode
+  /**
+   * 布局。`inline` 让控件靠右，适合开关与短选择器；`stack` 让控件占满一行，
+   * 适合输入框与文本域。
+   */
+  layout?: 'inline' | 'stack'
+  /** 追加类名。 */
+  className?: string
+}
+
+/**
+ * 设置页中的一行。
+ *
+ * @param props - 见 {@link SettingsRowProps}。
+ * @returns 设置行元素。
+ */
+export function SettingsRow({ label, description, children, layout = 'inline', className }: SettingsRowProps): React.ReactElement {
+  injectCompositeStyles()
+  return (
+    <div className={cx('dsh-settings-row', layout === 'stack' && 'dsh-settings-row--stack', className)}>
+      <div className="dsh-settings-row__text">
+        <span className="dsh-settings-row__label">{label}</span>
+        {description === undefined ? null : <span className="dsh-settings-row__desc">{description}</span>}
+      </div>
+      {children === undefined ? null : <div className="dsh-settings-row__control">{children}</div>}
+    </div>
+  )
+}