@nocobase/plugin-ai 2.2.0-beta.6 → 2.2.0-beta.8

package/dist/ai/docs/nocobase/shared-components/form/remote-select.md

@@ -0,0 +1,34 @@
+---
+title: "RemoteSelect"
+description: "RemoteSelect: Load Select options asynchronously from an API."
+keywords: "RemoteSelect,NocoBase,client-v2"
+---
+
+# RemoteSelect
+
+`RemoteSelect` is used to load Select options asynchronously from an API.
+
+## Basic Usage
+
+```tsx
+import { RemoteSelect } from '@nocobase/client-v2';
+
+<RemoteSelect<{ name: string; title: string }>
+  request={async () => {
+    const { data } = await ctx.api.resource('providers').list();
+    return data.data;
+  }}
+  fieldNames={{ label: 'title', value: 'name' }}
+/>;
+```
+
+## API
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `request` | `() => Promise<T[]>` | Async request for loading options |
+| `fieldNames` | `{ label; value }` | Map option label and value fields |
+| `options` | `DefaultOptionType[]` | Static options |
+| `mode` | `SelectProps['mode']` | Select mode |
+| `showSearch` | `boolean` | Whether search is enabled |
+| `filterOption` | `boolean | function` | Client-side option filtering |

package/dist/ai/docs/nocobase/shared-components/form/scan-input.md

@@ -0,0 +1,27 @@
+---
+title: "ScanInput"
+description: "ScanInput: Add scanning support to an input."
+keywords: "ScanInput,NocoBase,client-v2"
+---
+
+# ScanInput
+
+`ScanInput` is used to add scanning support to an input.
+
+## Basic Usage
+
+```tsx file="../_demos/scan-input.tsx" preview
+```
+
+## API
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `disableManualInput` | `boolean` | Make the input read-only |
+| `enableScan` | `boolean` | Reserved prop; the scan button is always rendered |
+| `formatsToSupport` | `Html5QrcodeSupportedFormats[]` | Supported QR code or barcode formats |
+| `onChange` | `(value: string | ChangeEvent<HTMLInputElement>) => void` | Change callback |
+
+## Related Links
+
+- [CodeScanner](./code-scanner)

package/dist/ai/docs/nocobase/shared-components/form/typed-variable-input.md

@@ -0,0 +1,30 @@
+---
+title: "TypedVariableInput"
+description: "TypedVariableInput: Allow a field to accept both constants and variables."
+keywords: "TypedVariableInput,NocoBase,client-v2"
+---
+
+# TypedVariableInput
+
+`TypedVariableInput` is used to allow a field to accept both constants and variables.
+
+## Basic Usage
+
+```tsx file="../_demos/typed-variable-input.tsx" preview
+```
+
+## API
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `value` | `unknown` | Current value |
+| `onChange` | `(next: unknown) => void` | Change callback |
+| `types` | `TypedConstantSpec[]` | Allowed constant types |
+| `namespaces` | `string[]` | Allowed top-level variable namespaces |
+| `extraNodes` | `MetaTreeNode[]` | Additional local variable nodes |
+| `nullable` | `boolean` | Whether null is allowed |
+| `delimiters` | `[string, string]` | Variable delimiters |
+| `disabled` | `boolean` | Whether disabled |
+| `placeholder` | `string` | Placeholder text |
+| `style` | `React.CSSProperties` | Custom style |
+| `className` | `string` | Custom class name |

package/dist/ai/docs/nocobase/shared-components/form/variable-input.md

@@ -0,0 +1,35 @@
+---
+title: "VariableInput"
+description: "VariableInput: Let a single-line field accept variables such as `{{ $env.X }}` is used to and `{{ $user.name }}`."
+keywords: "VariableInput,NocoBase,client-v2"
+---
+
+# VariableInput
+
+`VariableInput` is used to let a single-line field accept variables such as `{{ $env.X }}` and `{{ $user.name }}`.
+
+## Basic Usage
+
+```tsx file="../_demos/variable-input.tsx" preview
+```
+
+## API
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `value` | `string` | Current value |
+| `onChange` | `(value: string) => void` | Change callback |
+| `disabled` | `boolean` | Whether disabled |
+| `placeholder` | `string` | Placeholder text |
+| `addonBefore` | `React.ReactNode` | Content before the input |
+| `namespaces` | `string[]` | Allowed top-level variable namespaces |
+| `extraNodes` | `MetaTreeNode[]` | Additional local variable nodes |
+| `delimiters` | `[string, string]` | Variable delimiters |
+| `className` | `string` | Custom class name |
+| `style` | `React.CSSProperties` | Custom style |
+
+## Related Links
+
+- [VariableTextArea](./variable-text-area)
+- [EnvVariableInput](./env-variable-input)
+- [TypedVariableInput](./typed-variable-input)

package/dist/ai/docs/nocobase/shared-components/form/variable-json-text-area.md

@@ -0,0 +1,33 @@
+---
+title: "VariableJsonTextArea"
+description: "VariableJsonTextArea: Insert variables into JSON / JSON5 configuration."
+keywords: "VariableJsonTextArea,NocoBase,client-v2"
+---
+
+# VariableJsonTextArea
+
+`VariableJsonTextArea` is used to insert variables into JSON / JSON5 configuration.
+
+`VariableJsonTextArea` is based on [JsonTextArea](./json-text-area).
+
+## Basic Usage
+
+```tsx file="../_demos/variable-json-text-area.tsx" preview
+```
+
+## API
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `value` | `unknown` | Current value |
+| `onChange` | `(value: unknown) => void` | Change callback |
+| `namespaces` | `string[]` | Allowed top-level variable namespaces |
+| `extraNodes` | `MetaTreeNode[]` | Additional local variable nodes |
+| `metaTree` | `MetaTreeNode[] | function` | Custom variable tree |
+| `delimiters` | `[string, string]` | Variable delimiters |
+| `formatPathToValue` | `(meta) => string | undefined` | Custom variable path formatter |
+
+## Related Links
+
+- [JsonTextArea](./json-text-area)
+- [VariableInput](./variable-input)

package/dist/ai/docs/nocobase/shared-components/form/variable-text-area.md

@@ -0,0 +1,33 @@
+---
+title: "VariableTextArea"
+description: "VariableTextArea: Let multi-line text accept variables."
+keywords: "VariableTextArea,NocoBase,client-v2"
+---
+
+# VariableTextArea
+
+`VariableTextArea` is used to let multi-line text accept variables.
+
+## Basic Usage
+
+```tsx file="../_demos/variable-text-area.tsx" preview
+```
+
+## API
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `value` | `string` | Current value |
+| `onChange` | `(value: string) => void` | Change callback |
+| `disabled` | `boolean` | Whether disabled |
+| `placeholder` | `string` | Placeholder text |
+| `namespaces` | `string[]` | Allowed top-level variable namespaces |
+| `extraNodes` | `MetaTreeNode[]` | Additional local variable nodes |
+| `delimiters` | `[string, string]` | Variable delimiters |
+| `rows` | `number` | Fixed row count |
+| `maxRows` | `number` | Maximum row count |
+
+## Related Links
+
+- [VariableInput](./variable-input)
+- [VariableJsonTextArea](./variable-json-text-area)

package/dist/ai/docs/nocobase/shared-components/icon.md

@@ -0,0 +1,21 @@
+---
+title: "Icon"
+description: "Icon: Use Ant Design icons or register custom icons."
+keywords: "Icon,NocoBase,client-v2"
+---
+
+# Icon
+
+`Icon` is used to use Ant Design icons or register custom icons.
+
+## Basic Usage
+
+```tsx file="./_demos/icon.tsx" preview
+```
+
+## API
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `type` | `string` | Icon name |
+| `component` | `React.ComponentType` | Custom SVG component |

package/dist/ai/docs/nocobase/shared-components/index.md

@@ -0,0 +1,70 @@
+---
+title: "Shared Components"
+description: "NocoBase client v2 shared components: form containers, form fields, filters, tables, and icon components."
+keywords: "client-v2,shared components,React,Antd,NocoBase"
+---
+
+# Shared Components
+
+NocoBase client v2 includes a set of shared components. When building plugin pages, settings pages, or forms, you can use these components directly to reuse NocoBase UI and interactions.
+
+This section groups components by usage scenario. Each page covers one component: when to use it, its common API, and whether it can be previewed in the docs.
+
+## Quick Reference
+
+| I want to... | Where to look |
+| --- | --- |
+| Control the low-level full-screen scanner | [CodeScanner](./form/code-scanner) |
+| Put a standard form in a dialog | [DialogFormLayout](./form/dialog-form-layout) |
+| Put a standard form in a drawer | [DrawerFormLayout](./form/drawer-form-layout) |
+| Allow only `$env` environment variables | [EnvVariableInput](./form/env-variable-input) |
+| Enter a file size and store it as bytes | [FileSizeInput](./form/file-size-input) |
+| Edit JSON / JSON5 configuration | [JsonTextArea](./form/json-text-area) |
+| Enter a password with a strength indicator | [PasswordInput](./form/password-input) |
+| Load Select options asynchronously from an API | [RemoteSelect](./form/remote-select) |
+| Add scanning support to an input | [ScanInput](./form/scan-input) |
+| Allow a field to accept both constants and variables | [TypedVariableInput](./form/typed-variable-input) |
+| Let a single-line field accept variables such as `{{ $env.X }}` and `{{ $user.name }}` | [VariableInput](./form/variable-input) |
+| Insert variables into JSON / JSON5 configuration | [VariableJsonTextArea](./form/variable-json-text-area) |
+| Let multi-line text accept variables | [VariableTextArea](./form/variable-text-area) |
+| Filter a Collection with multiple conditions | [CollectionFilter](./filter/) |
+| Embed a Collection filter panel in a page | [CollectionFilterPanel](./filter/collection-filter-panel) |
+| Customize the draggable row of an antd Table | [SortableRow](./table/sortable-row) |
+| Customize the drag handle column of a Table | [SortHandle](./table/sort-handle) |
+| Display lists, select rows, and drag-sort rows on settings pages | [Table](./table/) |
+| Use Ant Design icons or register custom icons | [Icon](./icon) |
+| Create an internal registry for plugin extension items | [createFormRegistry](./create-form-registry) |
+
+## Usage
+
+Import the components you need in a client plugin, then use them like regular React components:
+
+```tsx
+import { RemoteSelect, Table } from '@nocobase/client-v2';
+
+function SettingsPage() {
+  return (
+    <>
+      <RemoteSelect request={loadOptions} />
+      <Table rowKey="id" columns={columns} dataSource={records} />
+    </>
+  );
+}
+```
+
+## When to use these components
+
+Use React + Antd by default. Check these components first for common NocoBase plugin scenarios:
+
+- Open drawer or dialog forms on settings pages
+- Insert variables, edit JSON, enter file sizes, or scan codes in form fields
+- Use Collection filters or drag sorting in list pages
+- Use NocoBase's unified icon entry
+
+For ordinary inputs, buttons, and messages, Antd components are usually clearer.
+
+## Related Links
+
+- [Component Development](../plugin-development/client/component/index.md)
+- [Context - Common Capabilities](../plugin-development/client/ctx/common-capabilities.md)
+- [FlowEngine](../flow-engine/index.md)

package/dist/ai/docs/nocobase/shared-components/table/index.md

@@ -0,0 +1,39 @@
+---
+title: "Table"
+description: "Table: Display lists, select rows, and drag-sort rows on settings pages."
+keywords: "Table,NocoBase,client-v2"
+---
+
+# Table
+
+`Table` is used to display lists, select rows, and drag-sort rows on settings pages.
+
+It is based on Antd Table and adds row selection and drag sorting for settings pages.
+
+## Basic Usage
+
+```tsx file="../_demos/table.tsx" preview
+```
+
+## API
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `rowKey` | `string | (record, index) => React.Key` | Required row identity |
+| `showIndex` | `boolean` | Show row index before selection |
+| `isDraggable` | `boolean` | Whether drag sorting is enabled |
+| `onSortEnd` | `(from, to) => void | Promise<void>` | Called after drag sorting ends |
+| `showSortHandle` | `boolean` | Whether to show the default drag handle |
+| `sortHandleColumnWidth` | `number` | Width of the automatic drag-handle column |
+
+## Attached exports
+
+| Description | Description |
+| --- | --- |
+| `DEFAULT_PAGE_SIZE` | `50` |
+| `PAGE_SIZE_OPTIONS` | `[5, 10, 20, 50, 100, 200]` |
+
+## Related Links
+
+- [SortHandle](./sort-handle)
+- [SortableRow](./sortable-row)

package/dist/ai/docs/nocobase/shared-components/table/sort-handle.md

@@ -0,0 +1,37 @@
+---
+title: "SortHandle"
+description: "SortHandle: Customize the drag handle column of a Table."
+keywords: "SortHandle,NocoBase,client-v2"
+---
+
+# SortHandle
+
+`SortHandle` is used to customize the drag handle column of a Table.
+
+## Basic Usage
+
+```tsx
+import { SortHandle, Table } from '@nocobase/client-v2';
+
+<Table
+  rowKey="id"
+  isDraggable
+  showSortHandle={false}
+  columns={[
+    { key: 'sort', width: 40, render: () => <SortHandle /> },
+    ...columns,
+  ]}
+/>;
+```
+
+## API
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `id` | `string | number` | Reserved prop; not used for rendering |
+| `style` | `React.CSSProperties` | Custom style |
+
+## Related Links
+
+- [Table](./)
+- [SortableRow](./sortable-row)

package/dist/ai/docs/nocobase/shared-components/table/sortable-row.md

@@ -0,0 +1,36 @@
+---
+title: "SortableRow"
+description: "SortableRow: Customize the draggable row of an antd Table."
+keywords: "SortableRow,NocoBase,client-v2"
+---
+
+# SortableRow
+
+`SortableRow` is used to customize the draggable row of an antd Table.
+
+## Basic Usage
+
+```tsx
+import { DndContext } from '@dnd-kit/core';
+import { SortableContext } from '@dnd-kit/sortable';
+import { SortableRow } from '@nocobase/client-v2';
+import { Table } from 'antd';
+
+<DndContext>
+  <SortableContext items={records.map((record) => record.id)}>
+    <Table rowKey="id" components={{ body: { row: SortableRow } }} columns={columns} dataSource={records} />
+  </SortableContext>
+</DndContext>;
+```
+
+## API
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `rowIndex` | `number` | Current row index |
+| `className` | `string` | Custom class name |
+
+## Related Links
+
+- [Table](./)
+- [SortHandle](./sort-handle)