### Install Dependencies and Start Development with PNPM

Source: https://github.com/tolking/element-pro-components/blob/main/docs/en-US/guide/contributing.md

This snippet shows how to install project dependencies using PNPM and start the development server. It requires Node.js 16+ and PNPM to be installed.

```bash
pnpm i

pnpm dev
```

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

### Global Installation and Setup for Element Pro Components

Source: https://context7.com/tolking/element-pro-components/llms.txt

Demonstrates how to install element-pro-components using npm, yarn, or pnpm and register it globally in your Vue 3 application's main entry file. This setup includes importing Element Plus and Element Pro Components, along with their respective CSS styles.

```javascript
// Install via package manager
// npm i element-pro-components
// yarn add element-pro-components
// pnpm add element-pro-components

// Full import in main.js/main.ts
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import ElementPro from 'element-pro-components'
import 'element-plus/dist/index.css'
import 'element-pro-components/lib/styles/index'

const app = createApp(App)
app.use(ElementPlus)
app.use(ElementPro)
app.mount('#app')

```

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

### Install element-pro-components

Source: https://github.com/tolking/element-pro-components/blob/main/README.md

Commands to install the library using common package managers like pnpm, yarn, or npm. Choose the one that matches your project's dependency management system.

```shell
pnpm add element-pro-components
yarn add element-pro-components
npm i element-pro-components
```

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

### Tabs Component Usage Examples

Source: https://github.com/tolking/element-pro-components/blob/main/docs/en-US/components/Tabs.md

Demonstrates various ways to use the Tabs component, including basic setup, custom types, route handling, and event hooks.

```APIDOC
## Tabs Component Usage Examples

### Basic Use

Automatic record routes.

```vue
<template>
  <Tabs />
</template>
<script setup>
import Tabs from '@/demo/Tabs/base.vue';
</script>
```

### Custom Type

Displaying tabs with different styles.

```vue
<template>
  <Tabs type="card" />
</template>
<script setup>
import Tabs from '@/demo/Tabs/type.vue';
</script>
```

### Keep Hidden Route

Routes with the `hidden` flag are automatically closed by default, this behavior can be prevented with `keep-hidden-route`.

```vue
<template>
  <Tabs :keep-hidden-route="true" />
</template>
<script setup>
import Tabs from '@/demo/Tabs/keep-hidden-route.vue';
</script>
```

### External Call Close

Use `ref` to bind `Tabs` then execute internal methods to close a tab.

```vue
<template>
  <Tabs ref="tabsRef" />
</template>
<script setup>
import { ref, inject } from 'vue';
import Tabs from '@/demo/Tabs/ref.vue';

const tabsRef = ref();
const tabs = inject('tabs'); // Example of injecting tabs instance

// Example method to close a tab
const closeTab = (tabName) => {
  tabsRef.value.close(tabName);
};
</script>
```

### Before Add Hook

Do something before the tab is added using the `before-add` hook. If `false` is returned or a `Promise` is returned and then rejected, the add operation will be prevented.

```vue
<template>
  <Tabs :before-add="handleBeforeAdd" />
</template>
<script setup>
import Tabs from '@/demo/Tabs/before-add.vue';

const handleBeforeAdd = async ({ route, oldPath, list, close, closeOther }) => {
  console.log('Before adding tab:', route);
  // Return false or reject promise to prevent adding
  // return false;
  // return new Promise((resolve, reject) => {
  //   setTimeout(() => reject(), 1000);
  // });
  return true; // Allow adding
};
</script>
```

### Before Leave Hook

Do something before the tab is switched using the `before-leave` hook. If `false` is returned or a `Promise` is returned and then rejected, the switching operation will be prevented.

```vue
<template>
  <Tabs :before-leave="handleBeforeLeave" />
</template>
<script setup>
import Tabs from '@/demo/Tabs/before-leave.vue';

const handleBeforeLeave = (activeName, oldActiveName) => {
  console.log('Before leaving tab:', oldActiveName, 'to', activeName);
  // Return false or reject promise to prevent leaving
  // return false;
  // return new Promise((resolve, reject) => {
  //   setTimeout(() => reject(), 1000);
  // });
  return true; // Allow leaving
};
</script>
```

### Slots

Customize the label content of the tab through the `label` slot.

::: tip
Since 1.4.0, the `label` slot parameter has been changed to `RouteLocationNormalizedLoaded`.
:::

```vue
<template>
  <Tabs>
    <template #label="{ route } :: RouteLocationNormalizedLoaded">
      <span>{{ route.meta.title || route.name }}</span>
    </template>
  </Tabs>
</template>
<script setup>
import Tabs from '@/demo/Tabs/slots.vue';
</script>
```

### Contextmenu

Since 1.4.0, the Tabs component supports displaying the right-click menu through the `contextmenu` configuration.

::: tip
If you enable the `refresh` feature, you need to configure the `refreshPath` attribute additionally and add the corresponding route information to vue-router.
:::

::: details Reference route configuration

```typescript
// docs/src/router/index.ts
import { RouteRecordRaw } from 'vue-router';

const routes: RouteRecordRaw[] = [
  {
    path: '/refresh-demo',
    name: 'RefreshDemo',
    component: () => import('@/views/RefreshDemo.vue'),
    meta: {
      title: 'Refresh Demo',
    },
  },
  // ... other routes
];

export default routes;
```
:::

```vue
<template>
  <Tabs :contextmenu="{ refresh: true }" refresh-path="/refresh-demo" />
</template>
<script setup>
import Tabs from '@/demo/Tabs/contextmenu.vue';
</script>
```
```

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

### Basic Form Usage

Source: https://github.com/tolking/element-pro-components/blob/main/docs/en-US/components/Form.md

Demonstrates the basic setup of a form where columns are bound to a reactive array, allowing for dynamic form generation. Changes in the array directly affect the form's structure.

```vue
<template>
  <pro-form :columns="columns" />
</template>

<script setup lang="ts">
import { ref } from "vue";

const columns = ref([
  { prop: "name", label: "Name" },
  { prop: "email", label: "Email" },
]);
</script>
```

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

### Managing Tree Node Drag Start Events in Vue.js

Source: https://github.com/tolking/element-pro-components/blob/main/docs/en-US/components/TreeSelect.md

This example shows how to handle the 'node-drag-start' event in an Element Plus Tree, triggered when a drag operation begins on a node. It provides the dragged node and the associated event object.

```javascript
export default {
  methods: {
    handleNodeDragStart(node, event) {
      console.log('Node drag started:', { node, event });
    }
  }
};
<template>
  <el-tree draggable @node-drag-start="handleNodeDragStart" :data="treeData"></el-tree>
</template>
<script setup>
const treeData = [{ label: 'Item 1', children: [] }];
</script>
```

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

### Basic Layout Usage

Source: https://github.com/tolking/element-pro-components/blob/main/docs/en-US/components/Layout.md

Demonstrates the basic usage of the Layout component, which automatically generates routes from vue-router. Refer to the Router and Menu guide for detailed routing configurations.

```vue
<template>
  <el-pro-layout />
</template>

<script lang="ts" setup>
// No specific script needed for basic usage, relies on global router configuration
</script>
```

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

### Managing Input Blur and Focus Events in Vue.js

Source: https://github.com/tolking/element-pro-components/blob/main/docs/en-US/components/TreeSelect.md

This example shows how to handle the 'blur' and 'focus' events for an Element Plus Input component. It logs the event object when the input loses or gains focus.

```javascript
export default {
  methods: {
    handleBlur(event) {
      console.log('Input blurred:', event);
    },
    handleFocus(event) {
      console.log('Input focused:', event);
    }
  }
};
<template>
  <el-input @blur="handleBlur" @focus="handleFocus" placeholder="Enter text"></el-input>
</template>
```

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

### Component Instance Access

Source: https://github.com/tolking/element-pro-components/blob/main/docs/en-US/components/Crud.md

Provides methods to get the instance of the search and form components.

```APIDOC
## Accessing Component Instances

This section details how to obtain instances of specific components.

### Methods

#### `searchRef`

*   **Description**: Get the search component instance.
*   **Returns**: `IFormExpose` - The instance of the search component.

#### `formRef`

*   **Description**: Get the form component instance.
*   **Returns**: `IFormExpose` - The instance of the form component.
```

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

### Vue Template for ProLayout Component

Source: https://context7.com/tolking/element-pro-components/llms.txt

Example Vue template demonstrating the usage of the ProLayout component. It showcases how to configure layout properties like fixed header, keep-alive, transitions, and mode, and how to define slots for the logo, header-right, and footer sections.

```vue
<template>
  <pro-layout
    :fixed-header="true"
    :keep-alive="true"
    :include="/^Keep/"
    transition="fade"
    mode="vertical"
  >
    <template #logo="{ collapse }">
      <img src="/logo.svg" alt="Logo" />
      <span v-if="!collapse">My Admin</span>
    </template>
    <template #header-right>
      <el-dropdown>
        <span>User Menu</span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>Profile</el-dropdown-item>
            <el-dropdown-item>Logout</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </template>
    <template #footer>
      <span>© 2024 My Company</span>
    </template>
  </pro-layout>
</template>

<script setup>
// Layout automatically reads routes from vue-router
// Routes should include meta with title and icon
// Example route configuration:
// {
//   path: '/dashboard',
//   component: Dashboard,
//   meta: { title: 'Dashboard', icon: markRaw(HomeFilled) }
// }
</script>

```

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

### Use ProLayout component

Source: https://github.com/tolking/element-pro-components/blob/main/README.md

Example of using the ProLayout component within a Vue template. This component serves as a base layout structure for applications.

```vue
<template>
  <pro-layout />
</template>
```

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

### Handling Tree Node Context Menu Events in Vue.js

Source: https://github.com/tolking/element-pro-components/blob/main/docs/en-US/components/TreeSelect.md

This example shows how to handle the 'node-contextmenu' event for an Element Plus Tree, triggered by a right-click on a node. It provides the event, node object, node property, and tree node instance.

```javascript
export default {
  methods: {
    handleNodeContextmenu(event, node, nodeProperty, treeNodeInstance) {
      console.log('Node context menu:', { event, node, nodeProperty, treeNodeInstance });
      // Prevent default context menu
      event.preventDefault();
    }
  }
};
<template>
  <el-tree @node-contextmenu="handleNodeContextmenu" :data="treeData"></el-tree>
</template>
<script setup>
const treeData = [{ label: 'Item 1', children: [] }];
</script>
```

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

### Register and Use Icons in Routes

Source: https://github.com/tolking/element-pro-components/blob/main/docs/en-US/guide/router.md

Demonstrates how to register icon components globally and how to use them within route meta definitions, including the use of markRaw for component references.

```javascript
import { Edit } from '@element-plus/icons-vue'
app.component(Edit.name, Edit)
```

```javascript
{
  name: 'admin',
  path: '/admin',
  component: Layout,
  meta: { title: 'Admin', icon: 'edit' },
}
```

```javascript
import { markRaw } from 'vue'
import { Edit } from '@element-plus/icons-vue'
{
  name: 'admin',
  path: '/admin',
  component: Layout,
  meta: { title: 'Admin', icon: markRaw(Edit) },
}
```

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

### Initialize element-pro-components in Vue 3

Source: https://github.com/tolking/element-pro-components/blob/main/README.md

Demonstrates how to import and register the library in a Vue 3 application. It includes importing the necessary styles and using the plugin with the application instance.

```javascript
import { createApp } from 'vue'
import App from './App.vue'
import ElementPro from 'element-pro-components'
import 'element-pro-components/lib/styles/index'

createApp(App).use(ElementPro).mount('#app')
```

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

### Configure Component Props and Events

Source: https://github.com/tolking/element-pro-components/blob/main/docs/en-US/components/Search.md

Demonstrates how to pass configuration objects to components, including standard props and event listeners. Events must be prefixed with 'on' to be correctly bound to the component instance.

```javascript
props: {
  clearable: true,
  'prefix-icon': 'el-icon-search',
  suffixIcon: 'el-icon-date',
  onChange: e => console.log(e)
}
```

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

### Element Plus Props, Slots, and Events Handling (JavaScript)

Source: https://github.com/tolking/element-pro-components/blob/main/docs/en-US/components/Form.md

Demonstrates how to configure component props, including handling hyphenated attributes, using slots for custom content, and binding events with the 'on' prefix. It also shows how to use refs for component instances.

```javascript
props: {
  ref: searchRef,
  clearable: true,
  'prefix-icon': 'el-icon-search',
  suffixIcon: 'el-icon-date',
  slots: {
    prefix: () => h('i', { className: 'el-input__icon el-icon-search' }),
    append: () => 'Search'
  },
  onChange: e => console.log(e)
}
```

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

### Implement Dynamic Routing

Source: https://github.com/tolking/element-pro-components/blob/main/docs/en-US/guide/router.md

Shows how to manually add routes to the router instance and update the router options to ensure the layout components recognize the new dynamic routes.

```javascript
const newRoute = {
  name: 'admin',
  path: '/admin',
  component: Layout,
  meta: { title: 'Admin' },
  children: [
    {
      path: 'settings',
      component: AdminSettings,
      meta: { title: 'Settings' },
    },
  ],
}
router.addRoute(newRoute)
router.options.routes.push(newRoute)
```

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

### Handling Tag Removal in Vue.js

Source: https://github.com/tolking/element-pro-components/blob/main/docs/en-US/components/TreeSelect.md

This example shows how to implement the 'remove-tag' event for Element Plus components, typically used in multi-select scenarios. It captures the value of the tag being removed.

```javascript
export default {
  methods: {
    handleRemoveTag(tagValue) {
      console.log('Tag removed:', tagValue);
    }
  }
};
<template>
  <el-select multiple @remove-tag="handleRemoveTag" placeholder="Select">
    <el-option label="Tag 1" value="tag1"></el-option>
    <el-option label="Tag 2" value="tag2"></el-option>
  </el-select>
</template>
```

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

### ColumnSetting with Table

Source: https://github.com/tolking/element-pro-components/blob/main/docs/en-US/components/ColumnSetting.md

Demonstrates integrating the ColumnSetting component with a standard Table component to manage its columns.

```APIDOC
## ColumnSetting with Table

### Description
This section explains how to use the ColumnSetting component in conjunction with a Table component to dynamically control the displayed columns, including their order and visibility.

### Method
Component Integration (Vue.js)

### Endpoint
N/A (Component Integration)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
- **v-model** (any) - Required - Binds the column configuration data to ColumnSetting.
- **columns** (Array) - Required - The column definitions for the Table component.

### Request Example
```html
<template>
  <div>
    <ColumnSetting v-model="tableColumns" />
    <el-table :data="tableData" :columns="tableColumns">
      <!-- Table column definitions will be dynamically rendered or managed by ColumnSetting -->
    </el-table>
  </div>
</template>

<script>
import ColumnSetting from '@/components/ColumnSetting.vue';

export default {
  components: {
    ColumnSetting
  },
  data() {
    return {
      tableData: [/* your table data */],
      tableColumns: [/* your initial column definitions */]
    };
  }
};
</script>
```

### Response
#### Success Response (200)
N/A (Component behavior)

#### Response Example
N/A
```

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

### Event Handling and Prop Passing

Source: https://github.com/tolking/element-pro-components/blob/main/docs/en-US/components/Search.md

Information on how to handle events and pass props to components.

```APIDOC
## Event Handling and Prop Passing

### Description
Information on how to handle events and pass props to components.

### Note
The props attribute will all be passed to the component. For events, they need to be bound by `on[Event]`. example: `change` -> `onChange`, `input` -> `onInput`.

### Request Example
```js
{
  "props": {
    "clearable": true,
    "prefix-icon": "el-icon-search",
    "suffixIcon": "el-icon-date",
    "onChange": e => console.log(e)
  }
}
```
```

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

### Form with Slots for Custom Content

Source: https://github.com/tolking/element-pro-components/blob/main/docs/en-US/components/Form.md

Illustrates how to inject custom content into form items using slots. Starting from version 1.2.0, slots related to a prop need to be prefixed with `form-` (e.g., `form-[prop]`).

```vue
<template>
  <pro-form :columns="columns">
    <template #form-name>
      <span>Custom Name Slot</span>
    </template>
  </pro-form>
</template>

<script setup lang="ts">
import { ref } from "vue";

const columns = ref([
  { prop: "name", label: "Name" },
]);
</script>
```

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

### InputTag Basic Usage

Source: https://github.com/tolking/element-pro-components/blob/main/docs/en-US/components/InputTag.md

Demonstrates the basic usage of the InputTag component.

```APIDOC
## Basic Use

When using `pro-input-tag`, most attributes of `type="text"` are supported.

::: demo
@/demo/InputTag/base.vue
:::
```

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

### Handling Tree Current Node Change Events in Vue.js

Source: https://github.com/tolking/element-pro-components/blob/main/docs/en-US/components/TreeSelect.md

This example demonstrates how to listen for the 'current-change' event on an Element Plus Tree, which triggers when the currently active node is updated. It receives the current node object and its property.

```javascript
export default {
  methods: {
    handleCurrentChange(node, nodeProperty) {
      console.log('Current node changed:', { node, nodeProperty });
    }
  }
};
<template>
  <el-tree @current-change="handleCurrentChange" :data="treeData"></el-tree>
</template>
<script setup>
const treeData = [{ label: 'Item 1', children: [] }];
</script>
```

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

### ColumnSetting Basic Usage

Source: https://github.com/tolking/element-pro-components/blob/main/docs/en-US/components/ColumnSetting.md

Demonstrates the basic usage of the ColumnSetting component by binding data with v-model. It allows toggling column visibility and sorting through drag-and-drop.

```APIDOC
## ColumnSetting Basic Usage

### Description
This section demonstrates the fundamental use of the ColumnSetting component. It is typically integrated with a table or CRUD interface to manage column visibility and order.

### Method
Component Usage (Vue.js)

### Endpoint
N/A (Component)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
- **v-model** (any) - Required - Binds the column configuration data.

### Request Example
```html
<template>
  <ColumnSetting v-model="columns" />
</template>

<script>
import ColumnSetting from '@/components/ColumnSetting.vue';

export default {
  components: {
    ColumnSetting
  },
  data() {
    return {
      columns: [] // Your column configuration data
    };
  }
};
</script>
```

### Response
#### Success Response (200)
N/A (Component behavior)

#### Response Example
N/A
```

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

### Fully import element-pro-components

Source: https://github.com/tolking/element-pro-components/blob/main/docs/en-US/guide/index.md

Registering the library globally in a Vue 3 application.

```javascript
import { createApp } from 'vue'
import App from './App.vue'
import ElementPro from 'element-pro-components'
import 'element-pro-components/lib/styles/index'

const app = createApp(App)

app.use(ElementPro)
app.mount('#app')
```

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

### Layout with Custom Router Handling

Source: https://github.com/tolking/element-pro-components/blob/main/docs/en-US/components/Layout.md

Allows custom handling of navigation clicks by disabling the default router integration (`router="false"`) and using the select event. This is recommended for compatibility with complete URL address jumps starting from version 1.2.0.

```vue
<template>
  <el-pro-layout :router="false" @select="handleSelect" />
</template>

<script lang="ts" setup>
function handleSelect(key, keyPath) {
  console.log('Menu item selected:', key, keyPath);
  // Implement custom navigation logic here
}
</script>
```

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

### Menu Configuration and Events

Source: https://github.com/tolking/element-pro-components/blob/main/docs/en-US/components/Search.md

Configuration properties for menu buttons and event handlers for user interactions.

```APIDOC
## Menu Configuration Properties

### Description
Configure the display and behavior of action buttons within the component.

### Parameters
- **submit** (boolean) - Optional - Whether to display a submit button (Default: true)
- **submitText** (string) - Optional - The text of submit button (Default: 'Search')
- **submitProps** (object) - Optional - Props for the submit button, referencing `el-button` (Default: { type: 'primary' })
- **reset** (boolean) - Optional - Whether to display a reset button (Default: true)
- **resetText** (string) - Optional - The text of reset button (Default: 'Reset')
- **resetProps** (object) - Optional - Props for the reset button, referencing `el-button`
- **prevText** (string) - Optional - The text of prev button (Default: 'Prev')
- **prevProps** (object) - Optional - Props for the prev button
- **nextText** (string) - Optional - The text of next button (Default: 'Next')
- **nextProps** (object) - Optional - Props for the next button

## Events

### Description
Events emitted by the component during user interaction.

- **submit** - Triggers on submit click: (done, isValid, invalidFields) => void
- **reset** - Triggers on reset click: () => void
- **validate** - Triggers after validation: (prop, isValid, message) => void
- **add-item** - Triggers on add click: (indexes) => void
- **remove-item** - Triggers on remove click: (indexes) => void
- **collapse-change** - Triggers on collapse change: (active) => void
- **tab-change** - Triggers on tab change: (name) => void
- **step-change** - Triggers on step change: (active) => void
```

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

### Global Internationalization Configuration

Source: https://github.com/tolking/element-pro-components/blob/main/docs/en-US/guide/i18n.md

How to merge element-pro-components locale with element-plus during application initialization.

```APIDOC
## Global Configuration

### Description
Configure internationalization globally by merging element-pro-components locale objects with element-plus locale settings.

### Implementation
```ts
import ElementPlus from 'element-plus'
import ElementPro from 'element-pro-components'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import proZhCN from 'element-pro-components/lib/locale/zh-cn'

app.use(ElementPlus, { locale: Object.assign(zhCn, proZhCN) }).use(ElementPro)
```
```

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

### Configure style imports with vite-plugin-style-import

Source: https://github.com/tolking/element-pro-components/blob/main/docs/en-US/guide/index.md

Configuring Vite to import styles for components automatically.

```javascript
import styleImport from 'vite-plugin-style-import'

export default {
  plugins: [
    styleImport({
      libs: [
        {
          importTest: /^Pro/,
          libraryName: 'element-pro-components',
          ensureStyleFile: true,
          resolveStyle: (name) => {
            return `element-pro-components/lib/styles/${name.slice(4)}.css`
          },
        },
      ],
    }),
  ],
}
```

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

### ColumnSetting with Crud

Source: https://github.com/tolking/element-pro-components/blob/main/docs/en-US/components/ColumnSetting.md

Shows how to integrate ColumnSetting with a Crud component, recommending the use of the 'action' slot and binding 'table-columns' to avoid side effects.

```APIDOC
## ColumnSetting with Crud

### Description
This example details the integration of the ColumnSetting component with a Crud component. It is recommended to use the `action` slot and bind the `table-columns` prop of the Crud component to prevent unintended side effects on form and search configurations.

### Method
Component Integration (Vue.js)

### Endpoint
N/A (Component Integration)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
- **Crud Component Props**: `columns` or `table-columns` (Array) - Column definitions for the Crud table.
- **ColumnSetting `v-model`**: (any) - Binds the column configuration data.

### Request Example
```html
<template>
  <Crud ref="crud">
    <template #action>
      <ColumnSetting v-model="crud.tableColumns" />
    </template>
    <!-- Other Crud configurations -->
  </Crud>
</template>

<script>
import Crud from '@/components/Crud.vue';
import ColumnSetting from '@/components/ColumnSetting.vue';

export default {
  components: {
    Crud,
    ColumnSetting
  },
  data() {
    return {
      crud: {
        tableColumns: [] // Column definitions for the Crud table
      }
    };
  }
};
</script>
```

### Response
#### Success Response (200)
N/A (Component behavior)

#### Response Example
N/A

### Tip
If `ColumnSetting` is directly bound to `columns` of `Crud`, sort changes can affect the Form and Search. Binding `table-columns` avoids this issue.
```

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

### Manually import components

Source: https://github.com/tolking/element-pro-components/blob/main/docs/en-US/guide/index.md

Importing specific components and their corresponding styles manually.

```javascript
import { ProLayout } from 'element-pro-components'
import 'element-pro-components/lib/styles/layout'
```

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

### InputTag Trigger Configuration

Source: https://github.com/tolking/element-pro-components/blob/main/docs/en-US/components/InputTag.md

Shows how to configure the trigger key for adding tags in InputTag.

```APIDOC
## Trigger

::: tip TIP
Since `1.0.0`, The default trigger mode is adjusted to `Enter`
:::

Input is triggered by the space bar by default, Set `trigger="enter"` attribute to enable trigger by `Enter`.

::: demo
@/demo/InputTag/trigger.vue
:::
```

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

### Form with Intellisense Helpers

Source: https://github.com/tolking/element-pro-components/blob/main/docs/en-US/components/Form.md

Illustrates the use of helper functions like `defineFormColumns`, `defineFormMenuColumns`, and `defineFormSubmit` to simplify the definition of form configurations, enhancing developer experience and code clarity.

```vue
<template>
  <pro-form :columns="columns" />
</template>

<script setup lang="ts">
import {
  defineFormColumns,
  defineFormMenuColumns,
  defineFormSubmit,
  defineComponentProps,
} from "@/components/pro-form";

const columns = defineFormColumns([
  { prop: "name", label: "Name" },
  { prop: "email", label: "Email" },
]);

const menu = defineFormMenuColumns([
  { prop: "action", label: "Action" },
]);

const submit = defineFormSubmit({
  label: "Submit",
  handler: (model) => {
    console.log(model);
  },
});
</script>
```

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

### ProDescriptions: Displaying User Data in Vue

Source: https://context7.com/tolking/element-pro-components/llms.txt

Demonstrates how to use the ProDescriptions component to display user details in a structured list format. It shows how to define columns, handle nested data, and use slots for custom rendering and actions. Dependencies include Vue.js and element-pro-components.

```Vue
<template>
  <pro-descriptions
    :columns="columns"
    :detail="userData"
    :column="2"
    border
    title="User Details"
  >
    <template #detail-status="{ item }">
      <el-tag :type="userData.status === 'active' ? 'success' : 'info'">
        {{ userData.status }}
      </el-tag>
    </template>
    <template #extra>
      <el-button type="primary" @click="handleEdit">Edit</el-button>
    </template>
  </pro-descriptions>
</template>

<script setup>
import { ref } from 'vue'
import { defineDescriptionsColumns } from 'element-pro-components'

const userData = ref({
  name: 'John Doe',
  email: 'john.doe@example.com',
  phone: '+1 234 567 8900',
  department: 'Engineering',
  role: 'Senior Developer',
  joinDate: '2022-03-15',
  status: 'active',
  'address.city': 'San Francisco',
  'address.country': 'USA'
})

const columns = defineDescriptionsColumns([
  { label: 'Name', prop: 'name' },
  { label: 'Email', prop: 'email' },
  { label: 'Phone', prop: 'phone' },
  { label: 'Department', prop: 'department' },
  { label: 'Role', prop: 'role' },
  { label: 'Join Date', prop: 'joinDate' },
  { label: 'Status', prop: 'status', slot: true },
  { label: 'City', prop: 'address.city' },  // Nested value
  { label: 'Country', prop: 'address.country', span: 2 }
])

const handleEdit = () => console.log('Edit clicked')
</script>
```

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

### Synchronize Latest Code from Upstream Repository

Source: https://github.com/tolking/element-pro-components/blob/main/docs/en-US/guide/contributing.md

These commands demonstrate how to add the upstream remote, fetch the latest code, checkout the main branch, and merge changes from the upstream main branch. This is essential for keeping your fork up-to-date.

```bash
git remote add upstream git@github.com:tolking/element-pro-components.git

git fetch upstream

git checkout main

git merge upstream/main
```

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

### ProForm Configuration

Source: https://github.com/tolking/element-pro-components/blob/main/docs/en-US/components/Form.md

Overview of configuring ProForm columns, validation rules, and custom component bindings.

```APIDOC
## ProForm Configuration

### Description
This section describes the core configuration attributes for the ProForm component, including column definitions, validation, and custom component integration.

### Parameters
#### Component Attributes
- **columns** (Array) - Required - Configuration array for form fields.
- **rules** (Object) - Optional - Validation rules for the form.
- **inline** (Boolean) - Optional - Whether to display the form in an inline layout.
- **menu** (Object) - Optional - Configuration for custom form menus (submit/reset buttons).

#### Column Configuration
- **prop** (String) - Required - The key in the model object to bind to.
- **component** (String/Component) - Optional - The component to render (e.g., 'el-input').
- **props** (Object) - Optional - Props to pass to the underlying component.
- **models** (Object) - Optional - Advanced binding configuration for non-v-model components.

### Request Example
{
  "columns": [
    { "prop": "username", "component": "el-input", "label": "Username" },
    { "prop": "age", "component": "el-input-number", "label": "Age" }
  ],
  "rules": {
    "username": [{ "required": true, "message": "Required" }]
  }
}
```

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

### Form with Custom Menu Configuration

Source: https://github.com/tolking/element-pro-components/blob/main/docs/en-US/components/Form.md

Demonstrates how to enable and configure a custom menu for the form using the `menu` attribute. The menu can also be localized.

```vue
<template>
  <pro-form :columns="columns" :menu="menuConfig" />
</template>

<script setup lang="ts">
import { ref } from "vue";

const columns = ref([
  { prop: "name", label: "Name" },
]);

const menuConfig = {
  // Configuration for the custom menu
  // e.g., buttons, actions
};
</script>
```

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

### Implement ProCrud Interface in Vue

Source: https://context7.com/tolking/element-pro-components/llms.txt

This snippet demonstrates how to set up a full CRUD interface using the ProCrud component. It includes column definitions, menu configuration, and event handlers for search, submit, and delete operations.

```vue
<template>
  <pro-crud
    v-model="formData"
    v-model:search="searchData"
    :data="tableData"
    :columns="columns"
    :menu="menuConfig"
    :detail="detailData"
    :before-open="beforeOpen"
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :total="total"
    label-width="100px"
    @search="handleSearch"
    @submit="handleSubmit"
    @delete="handleDelete"
  >
    <template #menu-left>
      <el-button type="primary" @click="handleExport">Export</el-button>
    </template>
  </pro-crud>
</template>

<script setup>
import { ref } from 'vue'
import { defineCrudColumns, defineCrudMenuColumns, defineCrudBeforeOpen } from 'element-pro-components'
import { ElMessage, ElMessageBox } from 'element-plus'

const formData = ref({})
const searchData = ref({})
const detailData = ref({})
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(50)

const tableData = ref([
  { id: 1, name: 'John', email: 'john@example.com', department: 'Engineering', joinDate: '2024-01-01' },
  { id: 2, name: 'Jane', email: 'jane@example.com', department: 'Marketing', joinDate: '2024-01-15' }
])

const columns = defineCrudColumns([
  {
    label: 'Name',
    prop: 'name',
    component: 'el-input',
    search: true,
    add: true,
    edit: true,
    detail: true,
    props: { placeholder: 'Enter name' }
  },
  {
    label: 'Email',
    prop: 'email',
    component: 'el-input',
    add: true,
    edit: true,
    detail: true,
    props: { type: 'email' }
  },
  {
    label: 'Department',
    prop: 'department',
    component: 'pro-select',
    search: true,
    add: true,
    edit: true,
    detail: true,
    props: {
      data: [
        { value: 'Engineering', label: 'Engineering' },
        { value: 'Marketing', label: 'Marketing' },
        { value: 'Sales', label: 'Sales' }
      ]
    }
  },
  {
    label: 'Join Date',
    prop: 'joinDate',
    component: 'el-date-picker',
    add: true,
    detail: true,
    hide: false
  }
])

const menuConfig = defineCrudMenuColumns({
  label: 'Actions',
  addText: 'Add Employee',
  editText: 'Edit',
  detailText: 'View',
  delText: 'Delete',
  searchText: 'Search',
  searchResetText: 'Reset',
  submitText: 'Save',
  resetText: 'Cancel'
})

const beforeOpen = defineCrudBeforeOpen((done, type, row) => {
  if (type === 'edit') {
    formData.value = { ...row }
  } else if (type === 'detail') {
    detailData.value = { ...row }
  }
  done()
})

const handleSearch = (done, isValid, invalidFields) => {
  if (isValid) {
    console.log('Searching:', searchData.value)
  }
  setTimeout(() => done(), 500)
}

const handleSubmit = (close, done, type, isValid, invalidFields) => {
  if (isValid) {
    console.log(`${type} submitted:`, formData.value)
    ElMessage.success(`${type === 'add' ? 'Added' : 'Updated'} successfully`)
    close()
  } else {
    done()
  }
}

const handleDelete = (row) => {
  ElMessageBox.confirm('Are you sure to delete this record?', 'Warning', {
    type: 'warning'
  }).then(() => {
    console.log('Deleting:', row)
    ElMessage.success('Deleted successfully')
  })
}

const handleExport = () => console.log('Exporting data...')
</script>
```

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

### Menu Configuration

Source: https://github.com/tolking/element-pro-components/blob/main/docs/en-US/components/Crud.md

Configures the content and structure of the menu.

```APIDOC
## Menu Configuration

### Description
Configure the menu content. Reference the `menu` documentation for detailed specifications.

### Method
N/A (Configuration Property)

### Endpoint
N/A

### Parameters
#### Request Body
- **menu** (object) - Required - Specifies the configuration for the menu.

### Request Example
```json
{
  "menu": {
    "items": [
      {
        "title": "Dashboard",
        "path": "/dashboard"
      },
      {
        "title": "Settings",
        "path": "/settings"
      }
    ]
  }
}
```

### Response
#### Success Response (200)
N/A (Configuration Property)

#### Response Example
N/A
```

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

### InputTag Component Size

Source: https://github.com/tolking/element-pro-components/blob/main/docs/en-US/components/InputTag.md

Demonstrates how to adjust the size of the InputTag component.

```APIDOC
## Component Size

Set `size` attribute to change the size of Input and Tag.

::: demo
@/demo/InputTag/size.vue
:::
```

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

### Basic InputTag Usage

Source: https://github.com/tolking/element-pro-components/blob/main/docs/en-US/components/InputTag.md

Demonstrates the basic usage of the InputTag component. Most attributes of type="text" are supported, allowing for standard input functionalities.

```vue
<template>
  <el-input-tag v-model="tags"></el-input-tag>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const tags = ref<string[]>([]);
</script>
```

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

### Detail Columns Configuration

Source: https://github.com/tolking/element-pro-components/blob/main/docs/en-US/components/Crud.md

Defines how to configure columns for generating detail components.

```APIDOC
## Detail Columns Configuration

### Description
Configure the columns for generating detail components. Reference the `Descriptions columns` documentation for detailed specifications.

### Method
N/A (Configuration Property)

### Endpoint
N/A

### Parameters
#### Request Body
- **detail-columns** (array) - Required - Specifies the configuration for detail columns.

### Request Example
```json
{
  "detail-columns": [
    {
      "label": "Username",
      "prop": "username"
    },
    {
      "label": "Email",
      "prop": "email"
    }
  ]
}
```

### Response
#### Success Response (200)
N/A (Configuration Property)

#### Response Example
N/A
```

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

### Menu Component Configuration

Source: https://github.com/tolking/element-pro-components/blob/main/docs/en-US/components/Menu.md

API reference for the Menu component, including available props for customization and event handlers for user interactions.

```APIDOC
## Menu Component API

### Description
The Menu component provides navigation for your website, supporting both automatic vue-router integration and custom route configurations.

### Props
- **routes** (array) - Optional - Current routes, defaults to vue-router configuration.
- **mode** (string) - Optional - Menu display mode: 'horizontal' or 'vertical'. Default: 'vertical'.
- **collapse** (boolean) - Optional - Whether the menu is collapsed (vertical mode only). Default: false.
- **ellipsis** (boolean) - Optional - Whether the menu is ellipsis (horizontal mode only). Default: true.
- **default-openeds** (Array) - Optional - Array of indexes of currently active sub-menus.
- **unique-opened** (boolean) - Optional - Whether only one sub-menu can be active. Default: false.
- **menu-trigger** (string) - Optional - Trigger method for sub-menus (horizontal mode only): 'hover' or 'click'. Default: 'hover'.
- **router** (boolean) - Optional - Whether to automatically activate route actions. Default: true.
- **collapse-transition** (boolean) - Optional - Whether to enable collapse transition. Default: true.

### Events
- **select** (index, indexPath, item) - Triggered when a menu item is activated.
- **open** (index, indexPath, item) - Triggered when a sub-menu expands.
- **close** (index, indexPath, item) - Triggered when a sub-menu collapses.

### Slots
- **default** ({ meta, path, redirect }) - Used to control the menu display content.
```

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

### Form Layout using Grid System

Source: https://github.com/tolking/element-pro-components/blob/main/docs/en-US/components/Form.md

Explains how to control the layout of form items using a grid system similar to `el-row` and `el-col`. `pro-form` corresponds to `el-row`, and `columns` correspond to `el-col`. This is invalid when `inline` is true.

```vue
<template>
  <pro-form :columns="columns" />
</template>

<script setup lang="ts">
import { ref } from "vue";

const columns = ref([
  {
    prop: "name",
    label: "Name",
    span: 12, // Occupies 12 out of 24 columns
  },
  {
    prop: "email",
    label: "Email",
    span: 12,
  },
]);
</script>
```

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

### Enable Dark Mode configuration

Source: https://github.com/tolking/element-pro-components/blob/main/docs/en-US/guide/theme.md

Configure dark mode by importing the ElementPlus dark mode CSS variables and applying the 'dark' class to the root HTML element.

```javascript
import 'element-plus/theme-chalk/dark/css-vars.css'
```

```html
<html class="dark"></html>
```

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

### Grid System Props

Source: https://github.com/tolking/element-pro-components/blob/main/docs/en-US/components/Search.md

Props for configuring the grid system, including span, offset, push, pull, and responsive adjustments for different screen sizes.

```APIDOC
## Grid System Props

### Description
Props for configuring the grid system, including span, offset, push, pull, and responsive adjustments for different screen sizes.

### Parameters
#### Query Parameters
- **span** (number) - Required - number of column the grid spans
- **offset** (number) - Required - number of spacing on the left side of the grid
- **push** (number) - Required - number of columns that grid moves to the right
- **pull** (number) - Required - number of columns that grid moves to the left
- **xs** (number / object) - Required - `<768px` Responsive columns or column props object (e.g. {span: 4, offset: 4})
- **sm** (number / object) - Required - `≥768px` Responsive columns or column props object (e.g. {span: 4, offset: 4})
- **md** (number / object) - Required - `≥992px` Responsive columns or column props object (e.g. {span: 4, offset: 4})
- **lg** (number / object) - Required - `≥1200px` Responsive columns or column props object (e.g. {span: 4, offset: 4})
- **xl** (number / object) - Required - `≥1920px` Responsive columns or column props object (e.g. {span: 4, offset: 4})
```

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

### ColumnSetting with Slots

Source: https://github.com/tolking/element-pro-components/blob/main/docs/en-US/components/ColumnSetting.md

Illustrates how to customize the trigger button for the ColumnSetting component using slots.

```APIDOC
## ColumnSetting with Slots

### Description
This example shows how to customize the default trigger button of the ColumnSetting component by utilizing its provided slots.

### Method
Component Usage (Vue.js)

### Endpoint
N/A (Component)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
- **slots** - Allows custom content for the trigger.

### Request Example
```html
<template>
  <ColumnSetting>
    <template #trigger>
      <el-button type="primary">Customize Trigger</el-button>
    </template>
  </ColumnSetting>
</template>

<script>
import ColumnSetting from '@/components/ColumnSetting.vue';

export default {
  components: {
    ColumnSetting
  }
};
</script>
```

### Response
#### Success Response (200)
N/A (Component behavior)

#### Response Example
N/A
```

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

### Component Configuration Properties

Source: https://github.com/tolking/element-pro-components/blob/main/docs/en-US/components/Crud.md

Configuration options for validation behavior, grid layout, and Dialog component settings.

```APIDOC
## Component Configuration Properties

### Description
This configuration defines how components handle validation errors, grid spacing, and Dialog appearance.

### Parameters
#### Validation Settings
- **scroll-to-error** (boolean) - Optional - When validation fails, scroll to the first error form entry. Default: false
- **scroll-into-view-options** (object/boolean) - Optional - Options for the scrollIntoView method when validation fails.

#### Layout Settings
- **gutter** (number) - Optional - Grid spacing. Default: 0
- **justify** (string) - Optional - Horizontal alignment of flex layout (start, end, center, space-around, space-between, spacing-evenly). Default: start

#### Dialog Settings
- **title** (string) - Optional - Title of the Dialog.
- **width** (string/number) - Optional - Width of the Dialog. Default: 50%
- **fullscreen** (boolean) - Optional - Whether the Dialog takes up full screen. Default: false
- **top** (string) - Optional - Value for margin-top of Dialog CSS. Default: 15vh
- **modal** (boolean) - Optional - Whether a mask is displayed. Default: true
```

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

### Props Attribute Handling

Source: https://github.com/tolking/element-pro-components/blob/main/docs/en-US/components/Form.md

Guidelines for passing attributes and handling events and slots for components.

```APIDOC
## Props Attribute Handling

### Description
Information on how to pass attributes, handle events, and use slots for components.

### Method
None

### Endpoint
None

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```js
props: {
  ref: searchRef,
  clearable: true,
  'prefix-icon': 'el-icon-search',
  suffixIcon: 'el-icon-date',
  slots: {
    prefix: () => h('i', { className: 'el-input__icon el-icon-search' }),
    append: () => 'Search'
  },
  onChange: e => console.log(e),
}
```

### Response
#### Success Response (200)
- **Attributes**: Attributes with hyphens can be wrapped in strings or converted to camelCase.
- **Slots**: Can pass simple render functions.
- **Events**: Must be bound by `on[Event]` (e.g., `change` -> `onChange`).
- **Refs**: Since `1.4.1`, component instances can be bound through `ref`.

#### Response Example
None
```

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

### Configure TypeScript support

Source: https://github.com/tolking/element-pro-components/blob/main/docs/en-US/guide/index.md

Adding global type definitions to tsconfig.json or declaration files for better IDE support.

```json
{
  "compilerOptions": {
    "types": ["element-pro-components/types/components"]
  }
}
```

```json
{
  "include": [
    "node_modules/element-pro-components/types/components.d.ts"
  ]
}
```

```typescript
/// <reference types="element-pro-components/types/components" />
```

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

### Basic Breadcrumb Implementation

Source: https://github.com/tolking/element-pro-components/blob/main/docs/en-US/components/Breadcrumb.md

Demonstrates the default behavior of the Breadcrumb component where items are automatically generated based on the current route structure.

```vue
<template>
  <el-breadcrumb>
    <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
    <el-breadcrumb-item>promotion management</el-breadcrumb-item>
    <el-breadcrumb-item>campaign list</el-breadcrumb-item>
  </el-breadcrumb>
</template>
```