### Clone Repository and Setup

Source: https://github.com/devcloudfe/vue-devui/blob/dev/CONTRIBUTING.md

Clone the Vue DevUI repository, install dependencies, and start the development server. Ensure you are using pnpm 6.x.

```bash
# username 为用户名，执行前请替换
git clone git@github.com:username/vue-devui.git
cd vue-devui
git remote add upstream git@github.com:DevCloudFE/vue-devui.git
pnpm i
pnpm dev
```

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

### Vue Script Setup

Source: https://context7.com/devcloudfe/vue-devui/llms.txt

Provides the necessary Vue script setup for the pagination examples, including ref declarations for managing pagination state and event handler functions.

```javascript
import { ref } from 'vue';

const currentPage = ref(1);
const total = ref(200);
const pageSize = ref(10);

const page1 = ref(1);
const size1 = ref(10);
const page2 = ref(1);
const page3 = ref(1);
const page4 = ref(1);
const page5 = ref(1);
const page6 = ref(1);
const fullPage = ref(1);
const fullSize = ref(25);

const onPageChange = (page: number) => {
  console.log('Page changed to:', page);
};

const onPageSizeChange = (size: number) => {
  console.log('Page size changed to:', size);
};

```

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

### Responsive Parameters Example

Source: https://github.com/devcloudfe/vue-devui/blob/dev/packages/devui-vue/docs/components/menu/index.md

Example demonstrating the use of responsive parameters like 'width', 'open-keys', and 'default-select-keys' in the d-menu component.

```APIDOC
## Responsive Parameters Example

### Description
This example demonstrates how to use responsive parameters such as `width`, `open-keys`, and `default-select-keys` with the `d-menu` component. These parameters allow for dynamic adjustments to the menu's appearance and behavior.

### Method
N/A (This is a component usage example)

### Endpoint
N/A (This is a component usage example)

### Request Example
```vue
<template>
  <d-button @click="changeDisabled">changeDisabled</d-button>
  <d-button @click="addSelect">change select</d-button>
  <d-menu mode="vertical" :width="width + 'px'" :default-select-keys="selectKeys" :collapsed="collapsed">
    <d-menu-item key="item1" :disabled="isDisabled">
      <template #icon>
        <i class="icon-homepage"></i>
      </template>
      <span>Home</span>
    </d-menu-item>
    <d-sub-menu title="System" key="icon-system">
      <template #icon>
        <i class="icon-system"></i>
      </template>
      <d-menu-item key="system-item">
        <span>System item</span>
      </d-menu-item>
      <d-sub-menu title="Setting" key="icon-setting">
        <template #icon>
          <i class="icon-setting"></i>
        </template>
        <d-menu-item key="setting-item">
          <span>Setting item</span>
        </d-menu-item>
      </d-sub-menu>
    </d-sub-menu>
  </d-menu>
  <br />
  <d-slider :min="0" :max="480" v-model="width"></d-slider>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
let collapsed = ref(false);
let isDisabled = ref(false);
let selectKeys = ref([]);
let width = ref(256);
const changeDisabled = () => {
  isDisabled.value = !isDisabled.value;
  console.log(isDisabled.value);
};
const addSelect = () => {
  if (selectKeys.value.includes('system-item')){
    selectKeys.value.pop();
  } else {
    selectKeys.value.push('system-item');
  }
  console.log(selectKeys.value);
}
</script>
```

### Response
N/A (This is a component usage example)
```

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

### Start Development Server

Source: https://github.com/devcloudfe/vue-devui/blob/dev/packages/devui-vue/docs/en-US/quick-start/index.md

Run the development server to start building and debugging your Vue.js application with DevUI.

```shell
yarn dev
```

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

### Install Vue DevUI with yarn

Source: https://github.com/devcloudfe/vue-devui/blob/dev/README.md

Use this command to install the Vue DevUI library using yarn.

```sh
yarn add vue-devui
```

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

### Basic Upload Component Setup

Source: https://context7.com/devcloudfe/vue-devui/llms.txt

Demonstrates the basic setup for the d-upload component, including model binding, upload options, and event handlers for success and error.

```vue
<template>
  <div class="upload-examples">
    <!-- Basic upload -->
    <d-upload
      v-model="fileList"
      :upload-options="uploadOptions"
      @on-success="onUploadSuccess"
      @on-error="onUploadError"
    >
      <d-button color="primary">Click to Upload</d-button>
    </d-upload>
  </div>
</template>
```

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

### Start Development Server

Source: https://github.com/devcloudfe/vue-devui/blob/dev/packages/devui-vue/docs/quick-start/index.md

Run the development server to see your Vue DevUI application in action. This command starts a local development environment.

```shell
npm run dev
```

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

### Clone and run Vue DevUI development environment

Source: https://github.com/devcloudfe/vue-devui/blob/dev/README.md

Commands to clone the Vue DevUI repository, install dependencies, and start the development server.

```sh
git clone git@github.com:DevCloudFE/vue-devui.git
cd vue-devui
pnpm install
pnpm dev
```

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

### Install Vue DevUI with pnpm

Source: https://github.com/devcloudfe/vue-devui/blob/dev/README.md

Use this command to install the Vue DevUI library using pnpm.

```sh
pnpm add vue-devui
```

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

### Install DevUI and Icon Library

Source: https://github.com/devcloudfe/vue-devui/blob/dev/packages/devui-vue/docs/en-US/quick-start/index.md

Install the core vue-devui package using yarn. Optionally, install the font icon library if your demos rely on it.

```shell
yarn add vue-devui

# Optional, font icon library, some demos rely on this font library
# yarn add @devui-design/icons
# main.ts file introduction
# import '@devui-design/icons/icomoon/devui-icon.css'
```

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

### Install Vue DevUI with npm

Source: https://github.com/devcloudfe/vue-devui/blob/dev/README.md

Use this command to install the Vue DevUI library using npm.

```sh
npm install vue-devui --save
```

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

### Vue Button Group Examples

Source: https://github.com/devcloudfe/vue-devui/blob/dev/packages/devui-vue/docs/en-US/components/button/index.md

Demonstrates various configurations of the d-button-group component, including different sizes (sm, default, lg) and integration with d-dropdown menus. The setup function returns a ref for dropdown positioning.

```vue
<template>
  <d-button-group>
    <d-button variant="solid">Button Name</d-button>
    <d-button icon="icon-select-arrow" variant="solid"></d-button>
  </d-button-group>
  
  <p>Size：sm</p>
  <d-button-group size="sm">
    <d-button color="primary" variant="solid">Shanghai</d-button>
    <d-button>Beijing</d-button>
    <d-button>Shenzhen</d-button>
  </d-button-group>

  <p>Size：default</p>
  <d-button-group>
    <d-button color="primary">Shanghai</d-button>
    <d-button>Beijing</d-button>
    <d-button>Shenzhen</d-button>
  </d-button-group>

  <p>Size：lg</p>
  <d-button-group size="lg">
    <d-button color="primary">Shanghai</d-button>
    <d-button>Beijing</d-button>
    <d-button>Shenzhen</d-button>
  </d-button-group>

  <p>Use with dropdown menu</p>
  <d-button-group>
    <d-dropdown style="width: 100px;" :position="position" align="start">
      <d-button>Click Me 1</d-button>
      <template #menu>
        <ul class="list-menu">
          <li class="menu-item">Item 1</li>
          <li class="menu-item">Item 2</li>
          <li class="menu-item">Item 3</li>
          <li class="menu-item">Item 4</li>
        </ul>
      </template>
    </d-dropdown>
    <d-button icon="add" variant="solid">Shanghai</d-button>
    <d-dropdown style="width: 100px;" :position="position" align="start">
      <d-button>Click Me 2</d-button>
      <template #menu>
        <ul class="list-menu">
          <li class="menu-item">Item 1</li>
          <li class="menu-item">Item 2</li>
          <li class="menu-item">Item 3</li>
          <li class="menu-item">Item 4</li>
        </ul>
      </template>
    </d-dropdown>
    <d-button icon="filter">Beijing</d-button>
    <d-dropdown style="width: 100px;" :position="position" align="start">
      <d-button>Click Me 3</d-button>
      <template #menu>
        <ul class="list-menu">
          <li class="menu-item">Item 1</li>
          <li class="menu-item">Item 2</li>
          <li class="menu-item">Item 3</li>
          <li class="menu-item">Item 4</li>
        </ul>
      </template>
    </d-dropdown>
  </d-button-group>
</template>
<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    return {
      position: ref(['bottom-start', 'top-start']),
    };
  },
});
</script>
```

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

### Install and Import Vue DevUI

Source: https://github.com/devcloudfe/vue-devui/wiki/Vue-DevUI-公开测试参考指南

Install the vue-devui library and its icons, then import the plugin and necessary CSS styles to use the components in your Vue application.

```bash
# Install vue-devui
npm i vue-devui @devui-design/icons

```

```javascript
# Import component library plugin
import DevUI from 'vue-devui';
import 'vue-devui/style.css';
import '@devui-design/icons/icomoon/devui-icon.css';

createApp(App).use(DevUI).mount('#app');

```

```html
# Usage
<d-button>确定</d-button>

```

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

### Install devui-theme

Source: https://github.com/devcloudfe/vue-devui/blob/dev/packages/devui-vue/docs/components/design-animation/index.md

Install the devui-theme package using npm. This package provides the necessary styles and variables for DevUI components.

```bash
npm install devui-theme
```

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

### Install and Import Vue DevUI

Source: https://context7.com/devcloudfe/vue-devui/llms.txt

Demonstrates how to install the vue-devui package and import it globally or using on-demand imports. On-demand import is recommended for production to optimize bundle size.

```typescript
// Install via npm, yarn, or pnpm
// npm install vue-devui --save
// yarn add vue-devui
// pnpm add vue-devui

// main.ts - Full import
import { createApp } from 'vue';
import App from './App.vue';
import DevUI from 'vue-devui';
import 'vue-devui/style.css';

const app = createApp(App);
app.use(DevUI);
app.mount('#app');

// On-demand import (recommended for production)
import { createApp } from 'vue';
import App from './App.vue';
import { Button, Input, Modal, Table } from 'vue-devui';

const app = createApp(App);
app.use(Button);
app.use(Input);
app.use(Modal);
app.use(Table);
app.mount('#app');
```

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

### Install Vue DevUI and Dependencies

Source: https://github.com/devcloudfe/vue-devui/blob/dev/packages/devui-vue/docs/quick-start/index.md

Install the Vue DevUI library, its icon set, and the theme package using NPM. Ensure you are in your project directory.

```shell
npm i vue-devui @devui-design/icons devui-theme
```

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

### Basic DataGrid Usage

Source: https://github.com/devcloudfe/vue-devui/blob/dev/packages/devui-vue/docs/components/data-grid/index.md

Configure the DataGrid with `data` for table content and `columns` for header and field mapping. Set `fix-header` to true and provide a `max-height` for a scrollable header. This example demonstrates basic setup.

```vue
<template>
  <d-data-grid :data="tableData" :columns="columnData" fix-header style="max-height: 300px"></d-data-grid>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const columnData = ref([
      { field: 'firstName', header: 'First Name' },
      { field: 'lastName', header: 'Last Name' },
      { field: 'gender', header: 'Gender' },
      { field: 'date', header: 'Date of birth' },
    ]);
    const tableData = ref([
      {
        firstName: 'Mark',
        lastName: 'Otto',
        date: '1990/01/11',
        gender: 'Male',
      },
      {
        firstName: 'Jacob',
        lastName: 'Thornton',
        gender: 'Female',
        date: '1990/01/12',
      },
      {
        firstName: 'Danni',
        lastName: 'Chen',
        gender: 'Male',
        date: '1990/01/13',
      },
      {
        firstName: 'green',
        lastName: 'gerong',
        gender: 'Male',
        date: '1990/01/14',
      },
      {
        firstName: 'Mark',
        lastName: 'Otto',
        date: '1990/01/11',
        gender: 'Male',
      },
      {
        firstName: 'Jacob',
        lastName: 'Thornton',
        gender: 'Female',
        date: '1990/01/12',
      },
      {
        firstName: 'Danni',
        lastName: 'Chen',
        gender: 'Male',
        date: '1990/01/13',
      },
      {
        firstName: 'green',
        lastName: 'gerong',
        gender: 'Male',
        date: '1990/01/14',
      },
      {
        firstName: 'Mark',
        lastName: 'Otto',
        date: '1990/01/11',
        gender: 'Male',
      },
      {
        firstName: 'Jacob',
        lastName: 'Thornton',
        gender: 'Female',
        date: '1990/01/12',
      },
      {
        firstName: 'Danni',
        lastName: 'Chen',
        gender: 'Male',
        date: '1990/01/13',
      },
      {
        firstName: 'green',
        lastName: 'gerong',
        gender: 'Male',
        date: '1990/01/14',
      },
    ]);

    return { tableData, columnData };
  },
});
</script>
```

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

### Basic Usage Example

Source: https://github.com/devcloudfe/vue-devui/blob/dev/packages/devui-vue/docs/components/virtual-list/index.md

Demonstrates the fundamental implementation of the VirtualList component for rendering a large dataset with scroll-to functionality.

```APIDOC
## Basic Usage Example

### Description
This example showcases how to use the `d-virtual-list` component to render a large list of 100,000 items and includes functionality to scroll to a specific item by its index.

### Component Usage
```vue
<template>
  <div style="margin-bottom: 12px">
    <d-input-number v-model="num" placeholder="请输入" :min="0" :max="data.length - 1" size="sm" />
    <d-button @click="onScrollTo" size="sm" style="margin-left: 6px;">Scroll to</d-button>
  </div>
  <d-virtual-list :data="data" ref="vlRef">
    <template #item="{ value }">
      <div>children{{ value }}</div>
    </template>
  </d-virtual-list>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const data = ref(Array.from({ length: 100000 }).map((_, index) => ({ value: index })))
    const num = ref(0)
    const vlRef = ref(null)
    const onScrollTo = () => {
      vlRef.value.scrollTo(num.value)
    }
    return { data, num, vlRef, onScrollTo }
  },
};
</script>
```

### Key Features Demonstrated
- **Data Binding**: The `data` prop is bound to a large array of objects.
- **Scroll To Functionality**: The `scrollTo` method is used to navigate to a specific item based on user input.
- **Custom Item Template**: The `#item` slot is used to define how each item in the list is rendered.
```

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

### Popover Positioning Examples

Source: https://github.com/devcloudfe/vue-devui/blob/dev/packages/devui-vue/docs/en-US/components/popover/index.md

Demonstrates the various supported positions for the DevUI popover component. Ensure the 'controlled' prop is set to true for these examples.

```vue
<template>
<div class="item">
  <d-popover  :position="['left']" controlled>
  <template #content>
      <div>left</div>
    </template>
  <template #reference>
    <d-button variant="common">left</d-button>
  </template>
  </d-popover>
  <d-popover  :position="['left-top']" controlled>
    <template #content>
        <div >left-top</div>
        <div>left-top</div>
    </template>
    <template #reference>
      <d-button variant="common">left-top</d-button>
    </template>
  </d-popover>
  <d-popover  :position="['left-bottom']" controlled >
    <template #content>
        <div>left-bottom</div>
        <div>left-bottom</div>
      </template>
    <template #reference>
      <d-button variant="common">left-bottom</d-button>
    </template>
  </d-popover>
</div>

<div style="margin-top:10px;" class="item">
  <d-popover :position="['top']" controlled>
    <template #content>
        <span >top</span>
      </template>
    <template #reference>
      <d-button variant="common">top</d-button>
    </template>
  </d-popover>
  <d-popover :position="['top-left']" controlled>
    <template #content>
        <span >top-left</span>
      </template>
    <template #reference>
      <d-button variant="common">top-left</d-button>
    </template>
  </d-popover>
  <d-popover :position="['top-right']" controlled>
    <template #content>
        <span >top-right</span>
      </template>
    <template #reference>
      <d-button variant="common">top-right</d-button>
    </template>
  </d-popover>
</div>

<div style="margin-top:10px;" class="item">
  <d-popover :position="['right']" controlled>
    <template #content>
        <div >right</div>
      </template>
    <template #reference>
      <d-button variant="common">right</d-button>
    </template>
  </d-popover>
  <d-popover :position="['right-top']" controlled>
    <template #content>
        <div >right-top</div>
        <div >right-top</div>
      </template>
    <template #reference>
      <d-button variant="common">right-top</d-button>
    </template>
  </d-popover>
    <d-popover :position="['right-bottom']" controlled>
    <template #content>
        <div >right-bottom</div>
        <div >right-bottom</div>
      </template>
    <template #reference>
      <d-button variant="common">right-bottom</d-button>
    </template>
  </d-popover>
</div>

<div style="margin-top:10px;" class="item">
  <d-popover :position="['bottom']" controlled>
    <template #content>
        <div >bottom</div>
      </template>
    <template #reference>
      <d-button variant="common">bottom</d-button>
    </template>
  </d-popover>
    <d-popover :position="['bottom-left']" controlled>
    <template #content>
        <div >bottom-left</div>
      </template>
    <template #reference>
      <d-button variant="common">bottom-left</d-button>
    </template>
  </d-popover>
  <d-popover  :position="['bottom-right']" controlled>
    <template #content>
        <div >bottom-right</div>
      </template>
    <template #reference>
      <d-button variant="common">bottom-right</d-button>
    </template>
  </d-popover>
</div>
</template>
<style>
.popover-demo-item > *{
  margin-right:10px;
}
</style>
```

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

### Basic Usage of AutoComplete

Source: https://github.com/devcloudfe/vue-devui/blob/dev/packages/devui-vue/docs/components/auto-complete/index.md

Demonstrates the fundamental setup of the AutoComplete component, including setting the data source and handling user input.

```vue
<template>
  <d-auto-complete
    :delay="1000"
    :source="source"
    v-model="value"
    :allow-empty-value-search="allowEmptyValueSearch"
    :select-value="selectValue"
    :trans-input-focus-emit="transInputFocusEmit"
    :position="position"
    :width="420"
    :append-to-body="false"
  >
  </d-auto-complete>
</template>

<script>
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup() {
    const value = ref('');
    const allowEmptyValueSearch = ref(true);
    const source = ref([
      'C#',
      'C',
      'C++',
      'CPython',
      'Java',
      'JavaScript',
      'Go',
      'Python',
      'Ruby',
      'F#',
      'TypeScript',
      'SQL',
      'LiveScript',
      'CoffeeScript',
    ]);
    const selectValue = (e) => {
      console.log('selectValue', e);
    };
    const transInputFocusEmit = () => {
      console.log('transInputFocusEmit');
    };
    const position = ref(['bottom']);
    return {
      value,
      source,
      allowEmptyValueSearch,
      transInputFocusEmit,
      selectValue,
      position,
    };
  },
});
</script>

<style></style>
```

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

### Upload Component Script Setup

Source: https://context7.com/devcloudfe/vue-devui/llms.txt

Provides the script setup for the Vue component, including ref declarations, upload options configuration, and event handler functions.

```javascript
import { ref } from 'vue';

const manualUploadRef = ref();

const uploadOptions = {
  uri: '/api/upload',
  method: 'POST',
  maximumSize: 5 * 1024 * 1024, // 5MB
  headers: {
    'Authorization': 'Bearer token123'
  },
  additionalParameter: {
    folder: 'uploads'
  },
  fileFieldName: 'file',
  withCredentials: true
};

const fileList = ref([]);
const dragFileList = ref([]);
const multipleFiles = ref([]);
const validatedFiles = ref([]);
const manualFiles = ref([]);
const customRequestFiles = ref([]);
const directoryFiles = ref([]);

const onUploadSuccess = (response: { file: File; response: any }[]) => {
  console.log('Upload successful:', response);
};

const onUploadError = (error: { file: File; response: any }) => {
  console.error('Upload failed:', error);
};

const onExceed = (files: File[], uploadFiles: File[]) => {
  console.log('File limit exceeded. Trying to upload:', files.length, 'Current:', uploadFiles.length);
};

const beforeUpload = async (files: any[]) => {
  const maxSize = 2 * 1024 * 1024; // 2MB
  const validFiles = files.filter(f => f.file.size <= maxSize);

  if (validFiles.length !== files.length) {
    console.warn('Some files exceeded 2MB limit');
    return false;
  }
  return true;
};

const submitUpload = () => {
  manualUploadRef.value?.submit();
};

const customHttpRequest = async (files: File[]) => {
  const formData = new FormData();
  files.forEach(file => {
    formData.append('files', file);
  });

  try {
    const response = await fetch('/api/custom-upload', {
      method: 'POST',
      body: formData
    });
    const result = await response.json();
    console.log('Custom upload result:', result);
  } catch (error) {
    console.error('Custom upload error:', error);
  }
};
```

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

### Mermaid State Diagram Example

Source: https://github.com/devcloudfe/vue-devui/blob/dev/packages/devui-vue/docs/components/editor-md/index.md

Demonstrates the syntax for creating a state diagram using Mermaid. This is useful for visualizing the states and transitions of a system.

```mermaid
stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
```

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

### Mermaid Sequence Diagram Example

Source: https://github.com/devcloudfe/vue-devui/blob/dev/packages/devui-vue/docs/components/editor-md/index.md

Provides an example of a sequence diagram created with Mermaid. This is helpful for visualizing interactions between different components over time.

```mermaid
sequenceDiagram
Alice->>John: Hello John, how are you?
loop Healthcheck
    John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
```

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

### Vue Component Setup with Props and Composables

Source: https://github.com/devcloudfe/vue-devui/wiki/Vue-DevUI-组件库规范文档

Standard Vue 3 component setup using `defineComponent`. Imports should follow a specific order: Vue core, types, sub-components, composables, and styles. Props are defined and destructured using `toRefs`.

```typescript
import { defineComponent, toRefs } from 'vue';
import type { SetupContext } from 'vue';
import { myComponentProps, MyComponentProps } from './my-component-types';
import useMyComponent from './use-button';
import './my-component.scss';

export default defineComponent({
  name: 'DMyComponent',
  props: myComponentProps,
  emits: ['update:modelValue'],
  setup(props: MyComponentProps, ctx: SetupContext) {
    const { myProp } = toRefs(props);
    const { myUseVar, myUseMethod } = useMyComponent(myUseParam);

    return () => {
      return (
        <div class="devui-my-component">{ myProp.value }</div>
      );
    };
  },
});
```

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

### Directory Upload Setup

Source: https://context7.com/devcloudfe/vue-devui/llms.txt

Enables uploading entire folders using the webkitdirectory attribute, allowing for hierarchical file uploads.

```vue
<!-- Directory upload -->
    <d-upload
      v-model="directoryFiles"
      :upload-options="uploadOptions"
      :webkitdirectory="true"
    >
      <d-button>Upload Folder</d-button>
    </d-upload>
```

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

### Dynamic Mode Example

Source: https://github.com/devcloudfe/vue-devui/blob/dev/packages/devui-vue/docs/en-US/components/rate/index.md

Shows the d-rate component in dynamic mode, allowing user interaction.

```APIDOC
## Dynamic Mode Example

### Description
Shows the d-rate component in dynamic mode, allowing user interaction.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Request Example
```vue
<template>
  <d-rate v-model="value" icon="star-o" />
</template>
<script>
import { ref } from 'vue'
export default {
  setup() {
    const value = ref(2)
    return {
      value
    }
  }
}
</script>
```
```

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

### Create a New Vue Project with Vite

Source: https://github.com/devcloudfe/vue-devui/blob/dev/packages/devui-vue/docs/quick-start/index.md

Use Vite to scaffold a new Vue.js project with TypeScript support. This is the recommended way to start.

```shell
# npm 6.x
npm create vite my-vue-app --template vue-ts

# npm 7+
npm create vite my-vue-app -- --template vue-ts
```

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

### Basic Usage of Notification Service

Source: https://github.com/devcloudfe/vue-devui/blob/dev/packages/devui-vue/docs/components/notification/index.md

Use the service method to open a notification. This example shows the default configuration with only content.

```vue
<template>
  <d-button @click.native="showService()">基本用法</d-button>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    function showService() {
      this.$notificationService.open({
        content: '通知框消息内容',
      });
    }

    return { showService };
  },
});
</script>
```

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

### Half Star Mode Example

Source: https://github.com/devcloudfe/vue-devui/blob/dev/packages/devui-vue/docs/en-US/components/rate/index.md

Enables half-star selection in the d-rate component and demonstrates the change event.

```APIDOC
## Half Star Mode Example

### Description
Enables half-star selection in the d-rate component and demonstrates the change event.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Request Example
```vue
<template>
  <d-rate v-model="value" :allowHalf="true" @change="change" />
  {{ value }}
</template>
<script>
import { ref } from 'vue'
export default {
  setup() {
    const value = ref(2)
    const change = (val) => {
      console.log(val)
    }
    return {
      value,
      change
    }
  }
}
</script>
```
```

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

### Create Vue Project with Vite

Source: https://github.com/devcloudfe/vue-devui/blob/dev/packages/devui-vue/docs/en-US/quick-start/index.md

Use @vite/cli to create a new Vue.js project with TypeScript support. This is the recommended starting point.

```shell
yarn create vite my-vue-app --template vue-ts
```

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

### Mermaid Pie Chart Example

Source: https://github.com/devcloudfe/vue-devui/blob/dev/packages/devui-vue/docs/components/editor-md/index.md

Illustrates how to generate a pie chart using Mermaid syntax. This is suitable for displaying proportional data.

```mermaid
pie
"Dogs" : 386
"Cats" : 85
"Rats" : 15
```

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

### Use the type parameter Example

Source: https://github.com/devcloudfe/vue-devui/blob/dev/packages/devui-vue/docs/en-US/components/rate/index.md

Illustrates using the 'type' parameter to set different rating styles (success, warning, error).

```APIDOC
## Use the type parameter Example

### Description
Illustrates using the 'type' parameter to set different rating styles (success, warning, error).

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Request Example
```vue
<template>
  <div>
    <d-rate v-model="value1" :read="true" type="success" :count="5" icon="star" />
  </div>
  <div>
    <d-rate v-model="value2" :read="true" type="warning" :count="5" icon="star" />
  </div>
  <div>
    <d-rate v-model="value3" :read="true" type="error" :count="5" />
  </div>
</template>
<script>
import { ref } from 'vue'
export default {
  setup() {
    const value1 = ref(3.5)
    const value2 = ref(2)
    const value3 = ref(3)
    return {
      value1,
      value2,
      value3
    }
  }
}
</script>
```
```

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

### Basic Form Structure with Input Fields

Source: https://github.com/devcloudfe/vue-devui/blob/dev/packages/devui-vue/docs/en-US/components/form/index.md

A simple form structure with input fields for name and age. This serves as a basic example for form setup.

```vue
<template>
  <d-form ref="dFormWithComponent" :form-data="formModel">
    <d-form-item prop="name">
      <d-form-label :required="true">Name</d-form-label>
      <d-form-control>
        <d-input v-model="formModel.name" />
      </d-form-control>
    </d-form-item>
    <d-form-item prop="age">
      <d-form-label :required="true">Age</d-form-label>
      <d-form-control>
        <d-input v-model="formModel.age" />
      </d-form-control>
    </d-form-item>
  </d-form>
</template>

<script>
import { defineComponent, reactive, ref } from 'vue';

export default defineComponent({
  setup(props, ctx) {
    const dFormWithComponent = ref(null);
    let formModel = reactive({
      name: 'AlanLee',
      age: '24',
    });

    return {
      dFormWithComponent,
      formModel,
    };
  },
});
</script>

<style>
.form-demo-form-operation {
  display: flex;
  align-items: center;
}
.form-demo-demo-btn {
  margin-right: 10px;
}
</style>
```

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

### Initialize and Apply Custom Theme with ThemeService

Source: https://context7.com/devcloudfe/vue-devui/llms.txt

Demonstrates how to initialize the ThemeService, define a custom theme with CSS variables, apply it, and manage theme lifecycle events like registration and unloading.

```typescript
import { ThemeService, Theme } from 'devui-theme';

// Initialize theme service
const themeService = new ThemeService();

// Initialize with specific theme or use stored preference
themeService.initializeTheme('infinity-theme');

// Apply a theme
const customTheme: Theme = {
  id: 'my-custom-theme',
  name: 'My Custom Theme',
  data: {
    'devui-brand': '#6366f1',
    'devui-brand-foil': '#818cf8',
    'devui-brand-hover': '#4f46e5',
    'devui-brand-active': '#4338ca',
    'devui-brand-active-focus': '#3730a3',
    'devui-text': '#1e293b',
    'devui-text-weak': '#64748b',
    'devui-aide-text': '#94a3b8',
    'devui-disabled-text': '#cbd5e1',
    'devui-base-bg': '#ffffff',
    'devui-global-bg': '#f8fafc',
    'devui-float-block-shadow': '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
    'devui-connected-overlay-shadow': '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
    'devui-border-radius': '6px',
    'devui-border-radius-card': '12px',
    'devui-font-size': '14px',
    'devui-font-size-card-title': '16px',
    'devui-line-height-base': '1.5',
  }
};

themeService.applyTheme(customTheme);

// Register for system color scheme changes (light/dark mode)
themeService.registerMediaQuery();

// Listen for theme changes
themeService.eventBus.on('themeChanged', (theme: Theme) => {
  console.log('Theme changed to:', theme.id);
});

// Unload theme
themeService.unloadTheme();

// Unregister media query
themeService.unregisterMediaQuery();
```

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

### Basic StepsGuide Usage

Source: https://github.com/devcloudfe/vue-devui/blob/dev/packages/devui-vue/docs/components/steps-guide/index.md

Demonstrates how to use the StepsGuide component with basic step configurations. It includes buttons to trigger different steps and handles step changes and guide closing.

```vue
<template>
  <d-button class="step-1 ml-s" @click="handleClick(0)">Step 1</d-button>
  <d-button class="step-2 ml-s" @click="handleClick(1)">Step 2</d-button>
  <d-button class="step-3 ml-s" @click="handleClick(2)">Step 3</d-button>
  <d-steps-guide
    ref="stepRef"
    :steps="steps"
    v-model:step-index="stepIndex"
    :step-change="handleStepChange"
    @guide-close="handleGuideClose"
  ></d-steps-guide>
</template>
<script>
import { defineComponent, reactive, ref, onMounted } from 'vue';
export default defineComponent({
  setup() {
    const baseSteps = [
        { title: '基础用法1', content: '业务推出新特性，或复杂的业务逻辑需要指引用户时使用。', trigger: '.step-1' },
        { title: '基础用法2', content: '业务推出新特性，或复杂的业务逻辑需要指引用户时使用。', trigger: '.step-2' },
        { title: '基础用法3', content: '业务推出新特性，或复杂的业务逻辑需要指引用户时使用。', trigger: '.step-3' },
      ],
      positionSteps = [
        { title: '弹出位置 top-left', content: 'Steps Guide', trigger: '.top-left', position: 'top-left' },
        { title: '弹出位置 top', content: 'Steps Guide', trigger: '.top', position: 'top' },
        { title: '弹出位置 top-right', content: 'Steps Guide', trigger: '.top-right', position: 'top-right' },
        { title: '弹出位置 right', content: 'Steps Guide', trigger: '.right', position: 'right' },
        { title: '弹出位置 bottom-right', content: 'Steps Guide', trigger: '.bottom-right', position: 'bottom-right' },
        { title: '弹出位置 bottom', content: 'Steps Guide', trigger: '.bottom', position: 'bottom' },
        { title: '弹出位置 bottom-left', content: 'Steps Guide', trigger: '.bottom-left', position: 'bottom-left' },
        { title: '弹出位置 left', content: 'Steps Guide', trigger: '.left', position: 'left' },
      ],
      customSteps = [
        {
          title: '自定义用法',
          content: '自定义操作指引信息弹出的位置和元素。',
          trigger: '.custom-1',
          position: {
            leftFix: 0,
            topFix: 0,
            type: 'top',
          },
        },
        {
          title: '自定义用法',
          content: '自定义操作指引信息弹出的位置和元素。',
          trigger: '.custom-2',
          target: '.nav-links',
          position: 'bottom',
        },
      ];
    let steps = ref(baseSteps);
    const stepIndex = ref(0),
      stepRef = ref(null);
    const handleClick = (index) => {
      steps.value = baseSteps;
      stepRef.value.setCurrentIndex(index);
    };
    const handleStepChange = (index, prevIndex) => {
      /* code */
      return true;
    };
    const handleGuideClose = (index) => {
      const stepsLength = steps.value.length;
      if (index === stepsLength - 1 && stepsLength !== 2) {
        steps.value = stepsLength === 3 ? positionSteps : customSteps;
        stepRef.value.setCurrentIndex(0);
      }
    };
    return {
      stepRef,
      steps,
      stepIndex,
      handleClick,
      handleStepChange,
      handleGuideClose,
    };
  },
});
</script>
```

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

### Install unplugin-vue-components

Source: https://github.com/devcloudfe/vue-devui/blob/dev/packages/devui-vue/docs/on-demand/index.md

Install the unplugin-vue-components plugin to enable automatic component imports. This is a development dependency.

```shell
npm i -D unplugin-vue-components
```

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

### Vue Tree Search and Filter Example

Source: https://github.com/devcloudfe/vue-devui/blob/dev/packages/devui-vue/docs/components/tree/index.md

This example shows how to use the `d-search` component to search and filter nodes in a `d-tree`. It includes examples for basic search, filtering, filtering by a custom key, and filtering using a regular expression.

```vue
<template>
  <d-search class="mb10" style="width: 300px" is-keyup-search placeholder="search your node..." :delay="1000" @search="onSearch"></d-search>
  <d-search
    class="mb10"
    style="width: 300px"
    is-keyup-search
    placeholder="filter your node..."
    :delay="1000"
    @search="onSearch1"
  ></d-search>
  <d-row class="mb10" align="middle">
    <d-search
      style="width: 300px"
      is-keyup-search
      placeholder="filter your node by custom key..."
      :delay="1000"
      @search="onSearch2"
    ></d-search>
    <span class="ml8">
      <d-tooltip position="top" content="使用自定义的属性搜索匹配树节点">
        <d-icon name="help" />
      </d-tooltip>
    </span>
  </d-row>
  <d-row class="mb10" align="middle">
    <d-search style="width: 300px" is-keyup-search placeholder="filter your node by Regex..." :delay="1000" @search="onSearch3"></d-search>
    <span class="ml8">
      <d-tooltip position="top" content="使用正则表达式限定搜索范围">
        <d-icon name="help" />
      </d-tooltip>
    </span>
  </d-row>
  <d-tree ref="treeRef" :data="data"></d-tree>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const treeRef = ref();
    const data = ref([
      {
        label: 'parent node 1',
        customSearchValue: 'a',
      },
      {
        label: 'parent node 2',
        customSearchValue: 'b',
        children: [
          {
            label: 'child node 2-1',
            customSearchValue: 'c',
            children: [
              {
                label: 'child node 2-1-1',
                customSearchValue: 'd',
              },
              {
                label: 'child node 2-1-2',
                customSearchValue: 'e',
              },
            ],
          },
          {
            label: 'child node 2-2',
            customSearchValue: 'f',
            children: [
              {
                label: 'child node 2-2-1',
                customSearchValue: 'g',
              },
              {
                label: 'child node 2-2-2',
                customSearchValue: 'h',
              },
            ],
          },
        ],
      },
      {
        label: 'parent node 3',
        customSearchValue: 'i',
        children: [
          {
            label: 'child node 3-1',
            customSearchValue: 'j',
          },
          {
            label: 'child node 3-2',
            customSearchValue: 'k',
          },
        ],
      },
      {
        label: 'parent node 4',
        customSearchValue: 'l',
        children: [
          {
            label: 'child node 4-1',
            customSearchValue: 'm',
          },
          {
            label: 'child node 4-2',
            customSearchValue: 'n',
          },
        ],
      },
      {
        label: 'parent node 5',
        customSearchValue: 'o',
        children: [
          {
            label: 'child node 5-1',
            customSearchValue: 'p',
          },
          {
            label: 'child node 5-2',
            customSearchValue: 'q',
          },
        ],
      },
    ]);
    const onSearch = (value) => {
      treeRef.value.treeFactory.searchTree(value, { isFilter: false });
    };
    const onSearch1 = (value) => {
      treeRef.value.treeFactory.searchTree(value, { isFilter: true });
    };
    const onSearch2 = (value) => {
      treeRef.value.treeFactory.searchTree(value, { isFilter: true, matchKey: 'customSearchValue' });
    };
    const onSearch3 = (value) => {
      const regex = new RegExp('^' + value + '[\s\S]*');
      treeRef.value.treeFactory.searchTree(value, { isFilter: true, pattern: regex });
    };

    return {
      treeRef,
      data,
      onSearch,
      onSearch1,
      onSearch2,
      onSearch3,
    };
  },
});
</script>
<style>
.mb10 {
  margin-bottom: 10px;
}
.ml8 {
  margin-left: 8px;
}
</style>
```

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

### Implement Quick Hints with d-editor-md in Vue

Source: https://github.com/devcloudfe/vue-devui/blob/dev/packages/devui-vue/docs/components/editor-md/index.md

This example illustrates how to set up quick hint functionality (e.g., for @ mentions or # order numbers) using the hintConfig prop and a custom template slot. It includes logic for filtering suggestions and handling selections.

```vue
<template>
  <d-editor-md
    v-model="content"
    :placeholder="'You can enter @ associate member, enter # to associate an order number...'"
    :hint-config="hintConfig"
    :fullscreen-z-index="1000"
    @content-change="valueChange"
  >
    <template #hintTemplate>
      <ul class="list-menu" v-if="hintList && hintList.length">
        <li class="menu-item" v-for="(item, index) of hintList" @click="hintItemClick(item)">{{ `${item.itemText}`}}</li>
      </ul>
    </template>
  </d-editor-md>
</template>

<script>
import { defineComponent, reactive, ref } from 'vue';

export default defineComponent({
  setup() {
    const content = ref('');

    const valueChange = (val) => {
      console.log(val);
    };

    const hintList = ref([]);

    const hintItemClick = (item) => {
      hintCallback.value && hintCallback.value(item.insertText || item.itemText);
    };

    const hintCallback = ref();

    const hintConfig = {
      '#': (e) => {
          const { callback, cursorHint, prefix } = e;
          const numberList = [
            {
              itemText: '00001',
              insertText: '[00001](#00001)'
            },
            {
              itemText: '00002',
              insertText: '[00002](#00002)'
            },
            {
              itemText: '00003',
              insertText: '[00003](#00003)'
            },
            {
              itemText: '00004',
              insertText: '[00004](#00004)'
            }
          ];
          hintList.value = numberList.filter((item) => item.itemText.indexOf(cursorHint) !== -1);
          hintCallback.value = callback;
      },
      '@': {
        handler: (e) => {
          const { callback, cursorHint, prefix } = e;
          const userList = [
            {
              itemText: 'User1'
            },
            {
              itemText: 'User2'
            },
            {
              itemText: 'User3'
            },
            {
              itemText: 'User4'
            }
          ];
          hintList.value = userList.filter((item) => item.itemText.indexOf(cursorHint) !== -1);
          hintCallback.value = callback;
        },
      },
      throttleTime: 200,
    };

    return { content, valueChange, hintConfig, hintList, hintCallback, hintItemClick };
  },
});
</script>
<style>
.list-menu {
  padding: 8px;
  margin: 0;
  width: 100px;
}
.menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 4px;
  cursor: pointer;
}
.menu-item:hover {
  background-color: var(--devui-list-item-hover-bg, #f2f5fc);
  color: var(--devui-list-item-hover-text, #526ecc);
}
</style>
```