### useNDataTable Demo Examples

Source: https://github.com/zheng-changfu/pro-naive-ui/blob/master/packages/components/src/composables/demos/use-n-data-table/zhCN/index.demo-entry.md

References to various demo files demonstrating `useNDataTable` usage with different components and scenarios, including basic table functionality, extra pagination properties, search form integration, and validation.

```Vue
table.vue
table-extra-pagination-prop.vue
search-form.vue
validate.vue
```

--------------------------------

### Customize Existing Naive-ui Locale with createLocale

Source: https://github.com/zheng-changfu/pro-naive-ui/blob/master/src/pages/docs/i18n/enUS/index.md

This example shows how to customize an existing Naive-ui locale, such as `enUS`, by using the `createLocale` function. It demonstrates modifying a specific component's property, like the placeholder text for the `Input` component, within the chosen locale.

```vue
<template>
  <n-config-provider :locale="locale" :date-locale="dateEnUS">
    <app />
  </n-config-provider>
</template>

<script>
  import { defineComponent } from 'vue'
  import { NConfigProvider, createLocale, enUS } from 'naive-ui'
  import { enUS, dateEnUS } from 'naive-ui'

  const customizedLocale = createLocale(
    {
      Input: {
        placeholder: 'Okay'
      }
    },
    enUS
  )

  export default defineComponent({
    components: {
      NConfigProvider
    },
    setup() {
      return {
        locale: customizedLocale,
        dateEnUS
      }
    }
  })
</script>
```

--------------------------------

### Configure Nuxt.js for Naive UI SSR with Auto Imports

Source: https://github.com/zheng-changfu/pro-naive-ui/blob/master/src/pages/docs/ssr/enUS/index.md

This advanced `nuxt.config.ts` configuration demonstrates how to integrate `unplugin-auto-import` and `unplugin-vue-components` with Naive UI in a Nuxt.js SSR setup. It enables automatic importing of Naive UI APIs (like useDialog, useMessage) and components on demand, streamlining development while maintaining SSR compatibility.

```ts
import AutoImport from 'unplugin-auto-import/vite'
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
import Components from 'unplugin-vue-components/vite'

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  build: {
    transpile:
      process.env.NODE_ENV === 'production' ? ['naive-ui', 'vueuc', '@css-render/vue3-ssr', 'juggle/resize-observer'] : ['@juggle/resize-observer'],
  },
  vite: {
    optimizeDeps: {
      include: process.env.NODE_ENV === 'development' ? ['naive-ui', 'vueuc', 'date-fns-tz/esm/formatInTimeZone'] : [],
    },
    plugins: [
      AutoImport({
        imports: [
          {
            'naive-ui': ['useDialog', 'useMessage', 'useNotification', 'useLoadingBar'],
          },
        ],
      }),
      Components({
        resolvers: [NaiveUiResolver()]
      })
    ]
  }
})
```

--------------------------------

### Set Document Title Based on Locale in JavaScript

Source: https://github.com/zheng-changfu/pro-naive-ui/blob/master/index.html

This JavaScript snippet determines the current locale from the window's pathname. If the path starts with '/zh-CN', it's considered Chinese; otherwise, it's undefined. A function then uses this locale or the navigator's language to set the document's title to 'Pro Naive UI'.

```JavaScript
const path = window.location.pathname
const pathLocale = path.startsWith('/zh-CN') ? 'zh-CN' : undefined
function deriveTitleFromLocale(locale = navigator.language) {
  document.title = 'Pro Naive UI'
}
deriveTitleFromLocale(pathLocale)
```

--------------------------------

### Using TuSimple Theme with Naive UI

Source: https://github.com/zheng-changfu/pro-naive-ui/blob/master/src/pages/docs/experimental-features/enUS/index.md

This snippet demonstrates how to integrate the TuSimple Theme into a Naive UI application using `TsConfigProvider`. It also shows how to access and use the `danger` typed API for `useDialog` and `useMessage` hooks, which are part of the `@naive-ui/tusimple-theme` package. These features are experimental and subject to API changes.

```JavaScript
import { TsConfigProvider, useDialog, useMessage } from '@naive-ui/tusimple-theme'

// danger typed api
const dialog = useDialog()
dialog.danger(...)

const message = useMessage()
message.danger(...)
```

```HTML
<template>
  <ts-config-provider>
    <my-app />
  </ts-config-provider>
</template>
```

--------------------------------

### ProConfigProvider Component Properties API

Source: https://github.com/zheng-changfu/pro-naive-ui/blob/master/packages/components/src/config-provider/demos/zhCN/index.demo-entry.md

API documentation for the ProConfigProvider component, detailing its configurable properties and their types, default values, and descriptions.

```APIDOC
ProConfigProvider Properties:
  - Name: propOverrides
    Type: Record<string, object>
    Default: -
    Description: Overrides component props. See example.
  - Name: empty
    Type: Record<string, string | (() => VNodeChild)>
    Default: -
    Description: Customizes empty content rendering. See example.
  - Reference: NConfigProvider (https://www.naiveui.com/zh-CN/os-theme/components/config-provider#ConfigProvider-Props)
```

--------------------------------

### renderProImages Parameters

Source: https://github.com/zheng-changfu/pro-naive-ui/blob/master/packages/components/src/plains/demos/zhCN/index.demo-entry.md

Details the parameters for the renderProImages function, which supports single or array of image URLs, along with its configuration options.

```APIDOC
renderProImages Parameters:
  Type Definition:
    import type { ProImagesConfig } from 'pro-naive-ui'
  Parameters:
    - name: value
      type: any
      default: -
      description: 图片地址
    - name: config
      type: ProImagesConfig
      default: -
      description: 配置选项
```

--------------------------------

### renderProDateText Parameters

Source: https://github.com/zheng-changfu/pro-naive-ui/blob/master/packages/components/src/plains/demos/zhCN/index.demo-entry.md

Details the parameters for the renderProDateText function, including its value and configuration options, with a specific interface for date formatting patterns based on date-fns.

```APIDOC
renderProDateText Parameters:
  Type Definition:
    interface ProDateTextConfig {
      /**
       * @see https://date-fns.org/v3.6.0/docs/format
       * 格式化模式，默认支持几种常用格式
       * month = MMM
       * time = HH:mm:ss
       * date = yyyy-MM-dd
       * quarter = yyyy-qqq
       * year = yyyy年(支持国际化)
       * week = YYYY-w周(支持国际化)
       * datetime = yyyy-MM-dd HH:mm:ss
       * 默认值为 datetime，你可以写 date-fns 支持的所有格式
       */
      pattern?: 'date' | 'time' | 'datetime' | 'year' | 'month' | 'quarter' | 'week' | ({} & string)
    }
  Parameters:
    - name: value
      type: any
      default: -
      description: 要被格式化的文本
    - name: config
      type: ProDateTextConfig
      default: -
      description: 配置选项
```

--------------------------------

### renderProTags Parameters

Source: https://github.com/zheng-changfu/pro-naive-ui/blob/master/packages/components/src/plains/demos/zhCN/index.demo-entry.md

Details the parameters for the renderProTags function, supporting various input types for tags (string, array of strings/objects), and its configuration options.

```APIDOC
renderProTags Parameters:
  Type Definition:
    import type { ProTagsConfig } from 'pro-naive-ui'
  Parameters:
    - name: value
      type: any
      default: -
      description: 标签文本
    - name: config
      type: ProTagsConfig
      default: -
      description: 配置选项
```

--------------------------------

### Creating and Injecting ProForm Controller

Source: https://github.com/zheng-changfu/pro-naive-ui/blob/master/packages/components/src/form/demos/zhCN/index.demo-entry.md

Demonstrates how to create a ProForm controller using `createProForm` in a parent component and how to inject and use it in a descendant component with `useInjectProForm` for manual form submission.

```vue
<!-- 父组件 -->
<script setup lang="ts">
import { createProForm } from 'pro-naive-ui'

const proForm = createProForm()
</script>

<template>
  <pro-form :form="proForm">
    <pro-input path="name" />
  </pro-form>
</template>

<!-- 后代组件 -->
<script setup lang="ts">
import { useInjectProForm } from 'pro-naive-ui'

const proForm = useInjectProForm()!
</script>

<template>
  <n-button @click="proForm.submit">手动提交表单</n-button>
</template>
```

--------------------------------

### renderProCopyableText Parameters

Source: https://github.com/zheng-changfu/pro-naive-ui/blob/master/packages/components/src/plains/demos/zhCN/index.demo-entry.md

Details the parameters for the renderProCopyableText function, including its value and configuration options for copyable text.

```APIDOC
renderProCopyableText Parameters:
  Type Definition:
    import { ProCopyableTextConfig } from 'pro-naive-ui'
  Parameters:
    - name: value
      type: any
      default: -
      description: 要复制的文本
    - name: config
      type: ProCopyableTextConfig
      default: -
      description: 配置选项
```

--------------------------------

### createProForm Options

Source: https://github.com/zheng-changfu/pro-naive-ui/blob/master/packages/components/src/form/demos/zhCN/index.demo-entry.md

Configuration options for the `createProForm` function, including initial values, data omission settings, and various callback functions for form lifecycle events.

```APIDOC
createProForm Options:
  Type Declarations:
    interface ValidateError {
      field?: string;
      message?: string;
      fieldValue?: any;
    }
  Options:
    initialValues: object. Default: {}. Initial form values, used for form reset.
    omitNil: boolean. Default: true. Whether to ignore null and undefined data when submitting or reading fieldsValue.
    omitEmptyString: boolean. Default: true. Whether to ignore empty string data when submitting or reading fieldsValue. (Version: 2.1.0)
    onReset: () => void. Callback after data reset.
    onSubmit: (values: any, warnings: ValidateError[][]) => void | Promise<void>. Callback for form data submission.
    onSubmitFailed: (errors: ValidateError[][]) => void. Callback after submission failure.
    onValueChange: (opt:{ value: any; path: string }) => void. Callback after any value changes (triggered by manual interaction).
```

--------------------------------

### useRequest Hook Options API Reference

Source: https://github.com/zheng-changfu/pro-naive-ui/blob/master/packages/components/src/composables/demos/use-request/zhCN/index.demo-entry.md

Comprehensive API documentation for the `useRequest` hook's configuration parameters, detailing their types, default values, and functionalities. These options control the behavior of the asynchronous request.

```APIDOC
useRequest Options:
  manual:
    Type: boolean
    Default: false
    Description: Defaults to false. Service executes automatically on initialization. If true, requires manual call to `run` or `runAsync`.
  onBefore:
    Type: (params: Params) => void
    Description: Triggered before service execution.
  onSuccess:
    Type: (data: Data, params: Params) => void
    Description: Triggered when service resolves successfully.
  onError:
    Type: (e: Error, params: Params) => void
    Description: Triggered when service rejects with an error.
  onFinally:
    Type: (params: Params, data?: Data, e?: Error) => void
    Description: Triggered after service execution completes.
  debounceWait:
    Type: MaybeRefOrGetter<number>
    Description: Debounce waiting time in milliseconds. Setting this enables debounce mode.
  debounceLeading:
    Type: MaybeRefOrGetter<boolean>
    Default: false
    Description: Executes the call before the debounce delay starts.
  debounceTrailing:
    Type: MaybeRefOrGetter<boolean>
    Default: true
    Description: Executes the call after the debounce delay ends.
  debounceMaxWait:
    Type: MaybeRefOrGetter<number>
    Description: The maximum time a call is allowed to be delayed.
  throttleWait:
    Type: MaybeRefOrGetter<number>
    Description: Throttle waiting time in milliseconds. Setting this enables throttle mode.
  throttleLeading:
    Type: MaybeRefOrGetter<boolean>
    Default: true
    Description: Executes the call before the throttle delay starts.
  throttleTrailing:
    Type: MaybeRefOrGetter<boolean>
    Default: true
    Description: Executes the call after the throttle delay ends.
  retryCount:
    Type: MaybeRefOrGetter<number>
    Description: Number of times to retry on error. -1 for infinite retries. `cancel` can stop ongoing retries.
  retryInterval:
    Type: MaybeRefOrGetter<number>
    Description: Retry interval in milliseconds. If not set, uses exponential backoff (1000 * 2 ** retryCount), capped at 30s.
  refreshOnWindowFocus:
    Type: MaybeRefOrGetter<boolean>
    Default: false
    Description: Re-initiates the request when the screen regains focus or becomes visible. Listens to `visibilitychange` and `focus` browser events.
```

--------------------------------

### useNDataTable Options API Reference

Source: https://github.com/zheng-changfu/pro-naive-ui/blob/master/packages/components/src/composables/demos/use-n-data-table/zhCN/index.demo-entry.md

Defines the configuration options that can be passed to the `useNDataTable` function. It includes a `form` parameter for integrating with `ProSearchForm` and inherits other options from `useRequest`.

```APIDOC
import type { SearchFormLike } from 'pro-naive-ui'

useNDataTable(options: {
  form: SearchFormLike; // createProSearchForm return value, or any value satisfying SearchFormLike type
  // Refer to useRequest Options for additional parameters
})
```

--------------------------------

### ProInput Component Basic Structure

Source: https://github.com/zheng-changfu/pro-naive-ui/blob/master/packages/components/src/form/components/demos/zhCN/index.demo-entry.md

This snippet illustrates the fundamental structure of a `ProInput` component. It shows how `ProInput` acts as a wrapper around Naive UI's `n-form-item` and `n-input` components, effectively passing all its own `props` to `n-form-item` and `placeholder` along with `fieldProps` to `n-input`.

```html
<!-- ProInput -->
<template>
  <n-form-item v-bind="$props">
    <n-input :placeholder="$props.placeholder" v-bind="$props.fieldProps" />
  </n-form-item>
</template>
```

--------------------------------

### ProFormList Instance Methods API Reference

Source: https://github.com/zheng-changfu/pro-naive-ui/blob/master/packages/components/src/form-list/demos/zhCN/index.demo-entry.md

Describes the methods available on the ProFormList instance for programmatic manipulation of list data, such as adding, removing, or moving items.

```APIDOC
import type { InternalPath, ProFormListInst } from 'pro-naive-ui';

ProFormList Instance Methods:
- push: (...items: T[]) => void - Description: Appends data to the end.
- pop: () => void - Description: Removes data from the end.
- insert: (index: number, ...items: T[]) => void - Description: Inserts data at a specified position.
- remove: (index: number) => void - Description: Deletes data at a specified position.
- shift: () => void - Description: Removes the first item.
- unshift: (...items: T[]) => void - Description: Appends data to the beginning.
- move: (from: number, to: number) => void - Description: Moves data.
- moveUp: (index: number) => void - Description: Moves data up.
- moveDown: (index: number) => void - Description: Moves data down.
```

--------------------------------

### ProButton Extended API Properties

Source: https://github.com/zheng-changfu/pro-naive-ui/blob/master/packages/components/src/button/demos/zhCN/index.demo-entry.md

Documents the additional properties available for the ProButton component, extending the functionality of NaiveUI's NButton. These properties include `tooltip` for general hints, `disabledTooltip` for specific hints when the button is disabled, and `content` for the button's text.

```APIDOC
ProButton Props (Extends NaiveUI NButton):
  tooltip:
    Type: string | string[]
    Default: (empty)
    Description: Tooltip text. Use a string for single-line, string array for multi-line. Does not take effect when disabled.
  disabledTooltip:
    Type: string | string[]
    Default: (empty)
    Description: Tooltip text when disabled. Use a string for single-line, string array for multi-line. Does not take effect when not disabled.
  content:
    Type: string
    Default: (empty)
    Description: Button text
```

--------------------------------

### useNDataTable Returned Values API Reference

Source: https://github.com/zheng-changfu/pro-naive-ui/blob/master/packages/components/src/composables/demos/use-n-data-table/zhCN/index.demo-entry.md

Describes the properties and methods returned by the `useNDataTable` function. These include structured objects for managing `NDataTable` properties and methods, as well as `ProSearchForm` submission, reset, and loading states, along with values inherited from `useRequest`.

```APIDOC
import type { ComputedRef } from 'vue'
import type { DataTableFilterState, DataTableSortState } from 'naive-ui'

interface UseNDataTableReturned {
  table: {
    tableProps: any; // Data required by NDataTable component, can be directly passed to NDataTable
    onChange: (options?: {
      page?: number;
      pageSize?: number;
      filters?: DataTableFilterState;
      sorter?: DataTableSortState | DataTableSortState[] | null
    }) => void; // Manually initiate request; uses default recorded config if no options passed, otherwise uses passed config
  };
  search: {
    submit: () => void; // Resets 'current' to first page and re-initiates request after form submission
    reset: () => void; // Resets 'current' to first page and re-initiates request after form reset
    searchLoading: ComputedRef<boolean>; // Loading state during search
    resetLoading: ComputedRef<boolean>; // Loading state during reset
    proSearchFormProps: any; // Data required by ProSearchForm component, can be directly passed to ProSearchForm
  };
  // Refer to useRequest Returned for additional values
}
```

--------------------------------

### ProFormList Slots API Reference

Source: https://github.com/zheng-changfu/pro-naive-ui/blob/master/packages/components/src/form-list/demos/zhCN/index.demo-entry.md

Defines the available slots for customizing the rendering of ProFormList, including item, action, and container rendering, along with the parameters passed to the default slot.

```APIDOC
import type {
  ProFormListInst,
  ProFormListItemRender,
  ProFormListActionRender,
  ProFormListContainerRender
} from 'pro-naive-ui';

interface ProFormListDefaultRender {
  /**
   * Current row index
   */
  index: number;
  /**
   * Total number of rows
   */
  total: number;
  /**
   * Methods for operating on the current row
   */
  action: ProFormListInst;
  /**
   * Current row information, can be used for linkage
   */
  row: Record<string, any>;
}

ProFormList Slots:
- default: ProFormListDefaultRender - Description: Content rendered for each row.
- item: ProFormListItemRender - Description: Custom rendering of each row's structure, mainly for placing actions elsewhere.
- action: ProFormListActionRender - Description: Custom rendering of action buttons.
- container: ProFormListContainerRender - Description: Custom rendering of the list container.
```

--------------------------------

### Configure Nuxt.js for Naive UI SSR

Source: https://github.com/zheng-changfu/pro-naive-ui/blob/master/src/pages/docs/ssr/enUS/index.md

This configuration snippet for `nuxt.config.ts` sets up Naive UI for Server-Side Rendering in Nuxt.js. It includes transpilation rules for production and development environments, and optimizes dependencies for Vite to ensure proper SSR functionality.

```ts
import { defineNuxtConfig } from 'nuxt'

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  build: {
    transpile:
      process.env.NODE_ENV === 'production'
        ? [
            'naive-ui',
            'vueuc',
            '@css-render/vue3-ssr',
            '@juggle/resize-observer'
          ]
        : ['@juggle/resize-observer']
  },
  vite: {
    optimizeDeps: {
      include:
        process.env.NODE_ENV === 'development'
          ? ['naive-ui', 'vueuc', 'date-fns-tz/formatInTimeZone']
          : []
    }
  }
})
```

--------------------------------

### Configure Naive-ui Internationalization with n-config-provider

Source: https://github.com/zheng-changfu/pro-naive-ui/blob/master/src/pages/docs/i18n/enUS/index.md

This snippet demonstrates how to set the locale and date locale for Naive-ui components using `n-config-provider`. It imports `enUS` and `dateEnUS` from `naive-ui` to apply English localization, ensuring components and dates are displayed in the specified language.

```vue
<template>
  <n-config-provider :locale="enUS" :date-locale="dateEnUS">
    <app />
  </n-config-provider>
</template>

<script>
  import { defineComponent } from 'vue'
  import { NConfigProvider } from 'naive-ui'
  import { enUS, dateEnUS } from 'naive-ui'

  export default defineComponent({
    components: {
      NConfigProvider
    },
    setup() {
      return {
        enUS,
        dateEnUS
      }
    }
  })
</script>
```

--------------------------------

### ProDataTable Component Properties API

Source: https://github.com/zheng-changfu/pro-naive-ui/blob/master/packages/components/src/data-table/demos/zhCN/index.demo-entry.md

Defines the configurable properties for the ProDataTable component, including column definitions, row key handling, title, tooltips, card properties, and drag sort options. It references types from `pro-naive-ui` and `vue`.

```APIDOC
import type { VNodeChild } from 'vue';
import type { ProDataTableColumns, ProCardProps, ProDataTableDragSortOptions } from 'pro-naive-ui';

ProDataTable Properties:
  columns: ProDataTableColumns (default: []) - Columns to display.
  rowKey: string | ((rowData: object) => (number | string)) - Used to create a unique key for each row from row data. Can be a string or a function.
  title: string - Table title.
  tooltip: string | string[] - Hint text, displayed to the right of the title.
  tableCardProps: ProCardProps - Configuration for the wrapper table card.
  dragSortOptions: ProDataTableDragSortOptions - Drag sort options configuration. Refer to the 'draggable-row.vue' example for full details.
  Reference NDataTable: https://www.naiveui.com/zh-CN/os-theme/components/data-table#DataTable-Props
```

--------------------------------

### ProFormList Properties API Reference

Source: https://github.com/zheng-changfu/pro-naive-ui/blob/master/packages/components/src/form-list/demos/zhCN/index.demo-entry.md

Details the configurable properties for the ProFormList component, including their types, default values, and descriptions. These properties extend common field properties.

```APIDOC
import type { ProButtonProps, ProFormListActionGuard } from 'pro-naive-ui';

ProFormList Properties:
- position: 'top' | 'bottom' (default: 'bottom') - Description: Controls the display position of the add row button (top or bottom), affecting whether new data is appended to the end or beginning.
- min: number - Description: Minimum number of rows; deletion is prevented if it falls below this number.
- max: number - Description: Maximum number of rows; adding or copying is prevented if it exceeds this number.
- onlyShowFirstItemLabel: boolean (default: false) - Description: Whether to display the label only for the first row.
- creatorInitialValue: () => object - Description: Default value for a new row.
- creatorButtonProps: ProButtonProps | false - Description: Properties for the add row button; false hides it.
- copyButtonProps: ProButtonProps | false - Description: Properties for the copy button; false hides it.
- removeButtonProps: ProButtonProps | false - Description: Properties for the delete button; false hides it.
- actionGuard: ProFormListActionGuard - Description: Interceptor for add and delete row actions.
- [Refer to Common Properties](field#通用的属性)
```

--------------------------------

### Common ProField Form Item API Properties

Source: https://github.com/zheng-changfu/pro-naive-ui/blob/master/packages/components/src/form/components/demos/zhCN/index.demo-entry.md

This section details the common properties available for all `ProField` form items. It includes type declarations for dependencies and a comprehensive table listing each property's name, type, default value, and a description of its functionality. Note that some properties like `placeholder`, `fieldProps`, `onChange`, and `onUpdateValue` are not supported within `pro-form-list`.

```typescript
import type { Ref } from 'vue'
import type { PopoverProps } from 'naive-ui'
import type { Dependencie } from 'pro-naive-ui'
```

```APIDOC
Common ProField Properties:
- Property: title
  Type: string
  Default: -
  Description: Same as `label`, for engineering consistency.
- Property: readonly
  Type: boolean
  Default: -
  Description: Whether it is in read-only state. If set for `pro-form-list`, it will apply to internal controls, but not nested `pro-form-list`.
- Property: preserve
  Type: boolean
  Default: true
  Description: Whether to retain the value when the field is hidden or unmounted.
- Property: visible
  Type: boolean
  Default: -
  Description: Whether to display, higher priority than `hidden`.
- Property: hidden
  Type: boolean
  Default: -
  Description: Whether to hide, lower priority than `visible`.
- Property: placeholder
  Type: any
  Default: -
  Description: Will be passed through to controls that support `placeholder`. This property is not supported in `pro-form-list`.
- Property: fieldProps
  Type: object
  Default: -
  Description: The `props` of the control. For example, for `pro-input` control, this supports all `props` of `n-input`. Other controls are similar. This property is not supported in `pro-form-list`.
- Property: onChange
  Type: (val: any) => void
  Default: -
  Description: Callback function triggered after the field value changes, only triggered by manual interaction. This property is not supported in `pro-form-list`.
- Property: onUpdateValue
  Type: (value: any, ...args: any[]) => void
  Default: -
  Description: Manually update the value. See full example at <n-a href="#input-value.vue">input-value.vue</n-a>. This property is not supported in `pro-form-list`.
- Property: tooltip
  Type: string | string[]
  Default: -
  Description: Hint displayed to the right of the `label`.
- Reference: NFormItem Props (https://www.naiveui.com/zh-CN/os-theme/components/form#FormItem-Props)
```

--------------------------------

### ProForm Component Properties

Source: https://github.com/zheng-changfu/pro-naive-ui/blob/master/packages/components/src/form/demos/zhCN/index.demo-entry.md

Properties available for the ProForm component, extending NForm capabilities and providing built-in data management.

```APIDOC
ProForm Properties:
  form: Required, reference createProForm. Form controller.
  readonly: boolean. Form is read-only.
  loading: boolean. Default: false. Form is submitting, prevents duplicate submissions.
  submitOnPressEnter: boolean. Default: false. Submit form on Enter key press.
  validationTrigger: ValidationTrigger | ValidationTrigger[]. Default: 'input'. Form validation timing.
  Reference NForm Props: Does not support 'model' property, built-in data management.
```

--------------------------------

### ProDataTable Component Slots API

Source: https://github.com/zheng-changfu/pro-naive-ui/blob/master/packages/components/src/data-table/demos/zhCN/index.demo-entry.md

Describes the available slots for customizing the ProDataTable component's layout, including slots for the title, extra content, toolbar, and a custom table container. It references types from `vue`.

```APIDOC
import type { VNodeChild } from 'vue';

ProDataTable Slots:
  title: any - Slot for the table title.
  extra: any - Slot for the table's extra area.
  toolbar: any - Slot for the table toolbar.
  table: ({tableDom: VNodeChild}) - Slot for a custom table container, typically used to place other elements around the table.
  Reference NDataTable: https://www.naiveui.com/zh-CN/os-theme/components/data-table#DataTable-Slots
```

--------------------------------

### Manually Triggering ProFormList Validation

Source: https://github.com/zheng-changfu/pro-naive-ui/blob/master/packages/components/src/form-list/demos/zhCN/index.demo-entry.md

Demonstrates how ProFormList validation is triggered automatically on add/copy/remove actions, and how to manually trigger validation for programmatic data changes using the form instance.

```vue
<script setup lang="ts">
import type { ProFormListInst } from 'pro-naive-ui'
import { ref } from 'vue'
import { createProForm } from 'pro-naive-ui'

const formListInst = ref<ProFormListInst>()
const proForm = createProForm<{name?:string}>()

function handleClick(){
  formListInst.value!.push({....})
  // Manually validate the list
  proForm.validate('list')
}
</script>

<template>
  <pro-form :form="proForm">
    <pro-form-list ref="formListInst" path="list" required>
      ....
    </pro-form-list>
  </pro-form>
</template>
```

--------------------------------

### TypeScript Type Extension for Custom ProField Components

Source: https://github.com/zheng-changfu/pro-naive-ui/blob/master/packages/components/src/search-form/demos/zhCN/index.demo-entry.md

This TypeScript declaration merges custom type definitions into the `pro-naive-ui` module, allowing developers to extend `ProSearchFormColumn` and `ProFieldColumn` with custom `field`, `fieldSlots`, and `fieldProps`. It defines `TestSlots` for custom component slots and `TestFieldProps` for custom field properties, ensuring strong type checking for custom `ProField` implementations.

```typescript
import type {
  Merge,
  UnwrapSlots,
  MaybeFunction,
  ProBaseFieldColumn,
  ProFieldSharedSlots,
  ProSearchFormColumnProps,
  ProFieldColumn as _ProFieldColumn,
} from 'pro-naive-ui'

declare module 'pro-naive-ui' {
  type ProSearchFormColumn<Values = any> = ProFieldColumn<Values, ProSearchFormColumnProps>;
  type ProSearchFormColumns<Values = any> = ProSearchFormColumn<Values>[];
}

type ProFieldColumn< V = any,EP extends object = object,FFP extends any[] = any[],FPP extends any[] = any[]> = 
| _ProFieldColumn 
| Merge<Test<V, FFP, FPP>, EP>

/**
 * 自定义插槽
 */
interface TestSlots extends ProFieldSharedSlots {
  test?: {a:string,b:number}
}

/**
 * 自定义 fieldProps
 */
type TestFieldProps = {
  readonly a?: string
}

/**
 * 自定义列
 */
interface Test<
  V = any,
  FP extends any[] = any[],
  PP extends any[] = any[],
> extends ProBaseFieldColumn<V, PP> {
  field?: 'test' // 你需要扩展的 field
  fieldSlots?: UnwrapSlots<TestSlots> // 你的 field 对应组件的插槽
  fieldProps?: MaybeFunction<NonNullable<TestFieldProps>, FP> // 你的 field 对应组件的 fieldProps
}

export {}
```

--------------------------------

### TypeScript Type Declaration for MaybeRefOrGetter

Source: https://github.com/zheng-changfu/pro-naive-ui/blob/master/packages/components/src/composables/demos/use-request/zhCN/index.demo-entry.md

Defines the `MaybeRefOrGetter` type, which allows parameters to accept a direct value, a Vue `Ref`, or a getter function, enabling dynamic reactivity. Parameters with this type support dynamic changes.

```typescript
import type { Ref } from 'vue'
type MaybeRefOrGetter<T> = T | Ref<T> | (() => T)
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.