Pro Naive UI

Naive UI is a Vue 3 component library designed for speed and developer experience. Key features include:

• Comprehensive Component Set: Over 90 components available, all of which are tree-shakable to minimize bundle size.
• Type-Safe Theming: An advanced theme system built with TypeScript. You can customize the look by providing a theme overrides object in JavaScript without needing Less, Sass, CSS variables, or special Webpack loaders.
• TypeScript Native: Written entirely in TypeScript for seamless integration with TypeScript projects. Components do not require manual CSS imports.
• Performance Optimized: Includes virtual list support for heavy components like Select, Tree, Transfer, Table, and Cascader to ensure smooth performance.

ProDrawerForm is a component that combines NDrawer and ProForm. It provides enhanced control over the drawer lifecycle, specifically adding open and close methods via a controller.

Important: Do not use v-model:show to control visibility. Instead, use the open, close, or show APIs provided by the controller created via createProDrawerForm.

The ProModal component is a wrapper around Naive UI's NModal that adds drag-and-drop functionality. It is designed to provide a more interactive modal experience by allowing users to move the modal window within the viewport.

// Example usage based on the demo entry
<template>
  <ProModal v-model:show="showModal">
    <!-- Modal Content -->
  </ProModal>
</template>

The ProDataTable component is a lightweight wrapper around Naive UI's n-data-table designed to solve common table-related tasks. It provides built-in support for:

• Automatic index columns (序号列).
• Additional slots for customization.
• Row drag-and-drop sorting.
• Simplified rowKey configuration (supports passing a simple string).
• Handling of empty cell content.

For complex scenarios involving asynchronous data, search forms, and table synchronization, it is recommended to use ProDataTable in conjunction with the useNDataTable hook.

ProLayout provides a flexible enterprise-grade layout system supporting 7 different layout modes and mobile responsiveness.

If your design requires a highly customized layout that deviates from the standard modes, you can implement your own layout structure and use the useLayoutMenu composable to integrate menu data. This allows you to bypass the complex logic required to synchronize menu state and navigation manually.

The ProSearchForm component is designed for scenarios where a search form needs to integrate seamlessly with other components like DataTable. It provides a structured, JSON-driven way to organize form items, avoiding complex manual styling.

Note: ProSearchForm supports on-demand loading, so ensure the required components are registered in your Vue application before use.

Before using pro-naive-ui, ensure your environment meets the following requirements:

Browsers

• Not supported: Internet Explorer (IE).
• Supported: The latest 2 versions of modern browsers including Edge, Firefox, Chrome, and Safari are guaranteed to be supported.
• Other versions: While not strictly tested, the library is expected to function on relatively recent versions (e.g., versions released within the last 2 years).

Dependencies

• Vue: Requires Vue 3 (version ≥ 3.3.0).
• Naive UI: Requires version ≥ 2.38.2. Versions older than this are untested.
• TypeScript: Requires version > 4.1.

ProForm is a high-level wrapper around Naive UI's NForm. It automates complex form data management, removing the need for manual state handling. It is designed to cover common scenarios like Modal forms, Drawer forms, query forms, and form lists with minimal code.

Key Concept: Data Management Unlike standard NForm, ProForm does not use the model prop. Instead, data management is handled internally by a controller created via createProForm.

The following NDrawer defaults have been modified in ProDrawerForm for better usability. If you need to change them back, use the drawerProps attribute:

• closeOnEsc: false (instead of default)
• maskClosable: false (instead of default)
• autoFocus: false (instead of default)
• width: 520 (instead of default)

The ProModalForm component combines ProModal and ProForm to provide a convenient way to manage forms within a modal window. It includes an extended createProModalForm controller that provides imperative methods like open and close to manage the modal's visibility.

Important: This component does not support v-model:show. You must use the open, close, or show APIs provided by the createProModalForm controller instead.

<script setup lang='ts'>
import { createProModalForm } from 'pro-naive-ui'

const modalForm = createProModalForm()
</script>

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