### Install View UI Plus with npm

Source: https://github.com/view-design/viewuiplus/blob/master/README.md

Install the View UI Plus library using npm. This is the recommended method for project integration.

```bash
npm install view-ui-plus --save
```

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

### Global Plugin Installation Configuration

Source: https://github.com/view-design/viewuiplus/blob/master/_autodocs/configuration.md

Configure global settings like default component size and transfer behavior when installing the ViewUIPlus plugin.

```javascript
import { createApp } from 'vue'
import App from './App.vue'
import ViewUIPlus from 'view-ui-plus'
import 'view-ui-plus/dist/styles/viewuiplus.css'

const app = createApp(App)

app.use(ViewUIPlus, {
    size: 'large',                  // Default component size
    transfer: true,                 // Transfer (teleport) dropdowns
    // Component-specific configurations below
})

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

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

### ViewUIPlusInstallOptions Interface

Source: https://github.com/view-design/viewuiplus/blob/master/_autodocs/types.md

Extends ViewUIPlusGlobalOptions to include additional configuration for plugin installation. Use this when installing ViewUIPlus with `app.use()`, providing locale and i18n settings.

```typescript
interface ViewUIPlusInstallOptions extends ViewUIPlusGlobalOptions {
    locale?: any;
    i18n?: any;
}
```

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

### Table Component Usage Example

Source: https://github.com/view-design/viewuiplus/blob/master/_autodocs/api-reference/data-display-components.md

Demonstrates how to use the Table component with data, column definitions, and event handlers. Ensure the 'view-ui-plus' library is imported.

```vue
<template>
    <Table
        ref="tableRef"
        :data="tableData"
        :columns="columns"
        stripe
        border
        highlight-row
        @on-select="handleSelect"
        @on-sort-change="handleSort"
    />
</template>

<script setup>
import { ref } from 'vue'
import { Table } from 'view-ui-plus'

const tableData = ref([
    { id: 1, name: 'John', age: 25, city: 'New York' },
    { id: 2, name: 'Jane', age: 28, city: 'Los Angeles' }
])

const columns = [
    {
        type: 'index',
        width: 60,
        align: 'center'
    },
    {
        title: 'Name',
        key: 'name',
        sortable: true
    },
    {
        title: 'Age',
        key: 'age',
        sortable: true
    },
    {
        title: 'City',
        key: 'city',
        filters: [
            { label: 'New York', value: 'New York' },
            { label: 'Los Angeles', value: 'Los Angeles' }
        ],
        filterable: true
    }
]

const handleSelect = (data) => {
    console.log('Selected:', data)
}

const handleSort = (data) => {
    console.log('Sort changed:', data)
}
</script>
```

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

### Basic ViewUIPlus Setup in Vue.js 3

Source: https://github.com/view-design/viewuiplus/blob/master/_autodocs/README.md

Set up ViewUIPlus in a Vue.js 3 application. This involves importing the library, its CSS, and registering it as a Vue plugin.

```javascript
import { createApp } from 'vue'
import App from './App.vue'
import ViewUIPlus from 'view-ui-plus'
import 'view-ui-plus/dist/styles/viewuiplus.css'

const app = createApp(App)
app.use(ViewUIPlus)
app.mount('#app')
```

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

### Progress Component Examples

Source: https://github.com/view-design/viewuiplus/blob/master/_autodocs/api-reference/data-display-components.md

Shows different states and configurations of the Progress component, including success, active, and text inside the bar.

```vue
<template>
    <Progress :percent="45" />
    <Progress :percent="100" status="success" />
    <Progress :percent="70" status="active" text-inside />
</template>

<script setup>
import { Progress } from 'view-ui-plus'
</script>
```

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

### TreeSelect Usage Example

Source: https://github.com/view-design/viewuiplus/blob/master/_autodocs/api-reference/utility-components.md

Demonstrates the TreeSelect component for selecting items from a hierarchical structure. This example enables multiple selections and search functionality.

```vue
<template>
    <TreeSelect 
        v-model="selected" 
        :data="treeData"
        multiple
        searchable
    />
</template>

<script setup>
import { ref } from 'vue'
import { TreeSelect } from 'view-ui-plus'

const selected = ref([])

const treeData = [
    {
        title: 'Parent 1',
        value: 'parent1',
        children: [
            { title: 'Child 1-1', value: 'child1-1' },
            { title: 'Child 1-2', value: 'child1-2' }
        ]
    }
]
</script>
```

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

### Select Component Usage Examples

Source: https://github.com/view-design/viewuiplus/blob/master/_autodocs/api-reference/form-components.md

Illustrates various ways to use the Select component, including basic single selection, multiple selection, filtering, and remote data fetching.

```APIDOC
## Select Component Usage Examples

### Description
Demonstrates practical implementation of the Select component for different use cases.

### Usage Example

```vue
<template>
    <div>
        <!-- Basic single select -->
        <Select v-model="selectedCity" placeholder="Select a city">
            <Option value="beijing" label="Beijing" />
            <Option value="shanghai" label="Shanghai" />
            <Option value="guangzhou" label="Guangzhou" />
        </Select>

        <!-- Multiple select -->
        <Select 
            v-model="selectedCountries" 
            multiple 
            placeholder="Select countries"
        >
            <Option value="cn" label="China" />
            <Option value="us" label="United States" />
            <Option value="uk" label="United Kingdom" />
        </Select>

        <!-- Filterable select -->
        <Select 
            v-model="selectedOption" 
            filterable
            placeholder="Search options..."
        >
            <Option value="opt1" label="Option 1" />
            <Option value="opt2" label="Option 2" />
        </Select>

        <!-- Remote search -->
        <Select 
            v-model="remoteValue"
            filterable
            remote
            :remote-method="remoteSearch"
            :loading="isLoading"
            loading-text="Searching..."
            placeholder="Search..."
        >
            <Option 
                v-for="item in remoteOptions"
                :key="item.value"
                :value="item.value"
                :label="item.label"
            />
        </Select>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { Select, Option } from 'view-ui-plus'

const selectedCity = ref('')
const selectedCountries = ref([])
const selectedOption = ref('')
const remoteValue = ref('')
const remoteOptions = ref([])
const isLoading = ref(false)

const remoteSearch = (query) => {
    if (!query) {
        remoteOptions.value = []
        return
    }
    isLoading.value = true
    // Simulate API call
    setTimeout(() => {
        remoteOptions.value = [
            { value: '1', label: `Result for \"${query}\" 1` },
            { value: '2', label: `Result for \"${query}\" 2` }
        ]
        isLoading.value = false
    }, 300)
}
</script>
```

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

### ViewUIPlus Global Configuration

Source: https://github.com/view-design/viewuiplus/blob/master/_autodocs/README.md

Shows how to configure ViewUIPlus globally using app.use(). This example sets the default component size, enables body transfer for dropdowns, and configures modal behavior.

```javascript
app.use(ViewUIPlus, {
    size: 'large',
    transfer: true,
    select: { arrow: 'ios-arrow-down' },
    modal: { maskClosable: false },
    // ... more configuration options
})
```

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

### TimePicker Usage Examples

Source: https://github.com/view-design/viewuiplus/blob/master/_autodocs/api-reference/utility-components.md

Shows how to use the TimePicker component for single time selection and time range selection with custom formatting.

```vue
<template>
    <TimePicker 
        v-model="selectedTime" 
        type="time" 
        placeholder="Select time"
    />

    <TimePicker 
        v-model="timeRange" 
        type="timerange" 
        format="HH:mm"
    />
</template>

<script setup>
import { ref } from 'vue'
import { TimePicker } from 'view-ui-plus'

const selectedTime = ref('12:00:00')
const timeRange = ref(['09:00:00', '17:00:00'])
</script>
```

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

### Badge Component Usage Examples

Source: https://github.com/view-design/viewuiplus/blob/master/_autodocs/api-reference/data-display-components.md

Illustrates different ways to use the Badge component, including with a count, as a dot, and showing zero counts.

```vue
<template>
    <Badge :count="5">
        <Button>Notifications</Button>
    </Badge>

    <Badge count="99+" dot>
        <span>Status</span>
    </Badge>

    <Badge :count="0" show-zero>
        <span>Items</span>
    </Badge>
</template>

<script setup>
import { Badge, Button } from 'view-ui-plus'
</script>
```

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

### Space Component Examples

Source: https://github.com/view-design/viewuiplus/blob/master/_autodocs/api-reference/layout-components.md

Illustrates different ways to use the Space component for horizontal and vertical spacing, including custom sizes and dividers.

```vue
<template>
    <!-- Horizontal spacing -->
    <Space>
        <Button>Button 1</Button>
        <Button>Button 2</Button>
        <Button>Button 3</Button>
    </Space>

    <!-- Vertical spacing with custom size -->
    <Space direction="vertical" size="large">
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
    </Space>

    <!-- With divider -->
    <Space :split="divider">
        <span>Item 1</span>
        <span>Item 2</span>
        <span>Item 3</span>
    </Space>
</template>

<script setup>
import { Space, Button } from 'view-ui-plus'
</script>
```

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

### View UI Plus Select Component Examples

Source: https://github.com/view-design/viewuiplus/blob/master/_autodocs/api-reference/form-components.md

Demonstrates various configurations of the Select component, including single select, multiple select, filterable select, and remote search functionality. Ensure Select and Option components are imported.

```vue
<template>
    <div>
        <!-- Basic single select -->
        <Select v-model="selectedCity" placeholder="Select a city">
            <Option value="beijing" label="Beijing" />
            <Option value="shanghai" label="Shanghai" />
            <Option value="guangzhou" label="Guangzhou" />
        </Select>

        <!-- Multiple select -->
        <Select 
            v-model="selectedCountries" 
            multiple 
            placeholder="Select countries"
        >
            <Option value="cn" label="China" />
            <Option value="us" label="United States" />
            <Option value="uk" label="United Kingdom" />
        </Select>

        <!-- Filterable select -->
        <Select 
            v-model="selectedOption" 
            filterable
            placeholder="Search options..."
        >
            <Option value="opt1" label="Option 1" />
            <Option value="opt2" label="Option 2" />
        </Select>

        <!-- Remote search -->
        <Select 
            v-model="remoteValue"
            filterable
            remote
            :remote-method="remoteSearch"
            :loading="isLoading"
            loading-text="Searching..."
            placeholder="Search..."
        >
            <Option 
                v-for="item in remoteOptions" 
                :key="item.value" 
                :value="item.value"
                :label="item.label"
            />
        </Select>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { Select, Option } from 'view-ui-plus'

const selectedCity = ref('')
const selectedCountries = ref([])
const selectedOption = ref('')
const remoteValue = ref('')
const remoteOptions = ref([])
const isLoading = ref(false)

const remoteSearch = (query) => {
    if (!query) {
        remoteOptions.value = []
        return
    }
    isLoading.value = true
    // Simulate API call
    setTimeout(() => {
        remoteOptions.value = [
            { value: '1', label: `Result for "${query}" 1` },
            { value: '2', label: `Result for "${query}" 2` }
        ]
        isLoading.value = false
    }, 300)
}
</script>
```

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

### AutoComplete Usage Example

Source: https://github.com/view-design/viewuiplus/blob/master/_autodocs/api-reference/utility-components.md

Demonstrates how to use the AutoComplete component for input suggestions. It filters a list of options based on user input and handles option selection.

```vue
<template>
    <AutoComplete 
        v-model="inputValue" 
        :data="suggestions"
        placeholder="Enter a value..."
        @on-select="handleSelect"
    />
</template>

<script setup>
import { ref, computed } from 'vue'
import { AutoComplete } from 'view-ui-plus'

const inputValue = ref('')
const allOptions = ['Apple', 'Banana', 'Orange', 'Pineapple', 'Mango']

const suggestions = computed(() => {
    if (!inputValue.value) return []
    return allOptions.filter(item =>
        item.toLowerCase().includes(inputValue.value.toLowerCase())
    )
})

const handleSelect = (option) => {
    console.log('Selected:', option)
}
</script>
```

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

### Complete Style Directive Example

Source: https://github.com/view-design/viewuiplus/blob/master/_autodocs/api-reference/directives.md

Demonstrates applying multiple v-style directives to a single element for comprehensive inline styling, including text and background properties.

```vue
<template>
    <div 
        class="box"
        v-style:width="boxWidth"
        v-style:height="boxHeight"
        v-style:padding="boxPadding"
        v-style:bg-color="boxColor"
    >
        <p v-style:color="textColor" v-style:font="fontSize">
            Styled content
        </p>
    </div>
</template>

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

const boxWidth = ref('300px')
const boxHeight = ref('200px')
const boxPadding = ref('20px')
const boxColor = ref('#f5f5f5')
const textColor = ref('#333')
const fontSize = ref('bold 14px Arial')
</script>
```

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

### Vue Modal and Button Usage

Source: https://github.com/view-design/viewuiplus/blob/master/_autodocs/README.md

Demonstrates how to use the Button and Modal components in Vue.js. Includes basic setup for opening a modal, capturing user input, and handling confirmation.

```vue
<template>
    <div>
        <Button type="primary" @click="showModal = true">Open Dialog</Button>
        
        <Modal 
            v-model="showModal" 
            title="Hello ViewUIPlus"
            @on-ok="handleOk"
        >
            <Input v-model="message" placeholder="Enter message" />
        </Modal>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { Button, Modal, Input } from 'view-ui-plus'

const showModal = ref(false)
const message = ref('')

const handleOk = () => {
    console.log('Message:', message.value)
    showModal.value = false
}
</script>
```

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

### Split Component for Resizable Panes

Source: https://github.com/view-design/viewuiplus/blob/master/_autodocs/api-reference/layout-components.md

Demonstrates the Split component for creating a resizable container with two panes. It includes an example of handling the resize event.

```vue
<template>
    <Split mode="horizontal" @on-moved="handleResize">
        <div style="width: 100%; height: 100%;">
            Left pane content
        </div>
        <template #pane-right>
            <div style="width: 100%; height: 100%;">
                Right pane content
            </div>
        </template>
    </Split>
</template>

<script setup>
import { Split } from 'view-ui-plus'

const handleResize = (event) => {
    console.log('Split position:', event)
}
</script>
```

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

### Global View UI Plus Configuration

Source: https://github.com/view-design/viewuiplus/blob/master/_autodocs/configuration.md

This snippet shows the complete setup for View UI Plus, including importing necessary modules, CSS, and configuring global options like size, spacing, transfer settings, and component-specific defaults. It also demonstrates how to set the locale.

```javascript
import { createApp } from 'vue'
import App from './App.vue'
import ViewUIPlus from 'view-ui-plus'
import locale from 'view-ui-plus/dist/locale/en-US'
import 'view-ui-plus/dist/styles/viewuiplus.css'

const app = createApp(App)

app.use(ViewUIPlus, {
    // Size and spacing
    size: 'default',
    space: {
        size: 'medium'
    },
    
    // Transfer settings
    transfer: true,
    
    // Component-specific configurations
    select: {
        arrow: 'ios-arrow-down',
        customArrow: false,
        arrowSize: 12
    },
    
    menu: {
        arrow: 'ios-arrow-down',
        customArrow: false,
        arrowSize: 12
    },
    
    tree: {
        arrow: 'ios-arrow-right',
        customArrow: false,
        arrowSize: 12
    },
    
    cascader: {
        arrow: 'ios-arrow-down',
        customArrow: false,
        arrowSize: 12,
        itemArrow: 'ios-arrow-right',
        customItemArrow: false,
        itemArrowSize: 10
    },
    
    colorPicker: {
        arrow: 'ios-arrow-down',
        customArrow: false,
        arrowSize: 12
    },
    
    datePicker: {
        icon: 'ios-calendar',
        customIcon: false,
        iconSize: 14
    },
    
    timePicker: {
        icon: 'ios-clock',
        customIcon: false,
        iconSize: 14
    },
    
    tabs: {
        closeIcon: 'ios-close',
        customCloseIcon: false,
        closeIconSize: 14
    },
    
    modal: {
        maskClosable: false
    },
    
    typography: {
        copyConfig: {},
        editConfig: {},
        ellipsisConfig: {}
    },
    
    image: {
        toolbar: []
    },
    
    // Locale
    locale: locale
})

app.mount('#app')

```

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

### Form Component Usage

Source: https://github.com/view-design/viewuiplus/blob/master/_autodocs/api-reference/form-components.md

Demonstrates the basic setup of a Form component with data binding, validation rules, and submission handling. Use this for creating forms with multiple input fields.

```vue
<template>
    <Form
        ref="formRef"
        :model="formData"
        :rules="rules"
        label-width="100"
        @on-validate="handleValidate"
    >
        <FormItem label="Name" prop="name">
            <Input v-model="formData.name" placeholder="Enter name" />
        </FormItem>
        <FormItem label="Email" prop="email">
            <Input v-model="formData.email" type="email" placeholder="Enter email" />
        </FormItem>
        <FormItem>
            <Button type="primary" @click="submitForm">Submit</Button>
        </FormItem>
    </Form>
</template>

<script setup>
import { ref } from 'vue'
import { Form, FormItem, Input, Button } from 'view-ui-plus'

const formRef = ref(null)
const formData = ref({
    name: '',
    email: ''
})

const rules = {
    name: [
        { required: true, message: 'Name is required' }
    ],
    email: [
        { required: true, message: 'Email is required' },
        { type: 'email', message: 'Invalid email format' }
    ]
}

const submitForm = async () => {
    try {
        await formRef.value.validate()
        console.log('Form is valid', formData.value)
    } catch (err) {
        console.log('Form validation failed')
    }
}

const handleValidate = (data) => {
    console.log('Field validated:', data)
}
</script>
```

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

### DatePicker Usage Examples

Source: https://github.com/view-design/viewuiplus/blob/master/_autodocs/api-reference/utility-components.md

Demonstrates various configurations for the DatePicker component, including single date, date range, datetime selection, and disabling specific dates.

```vue
<template>
    <!-- Single date selection -->
    <DatePicker 
        v-model="selectedDate" 
        type="date" 
        placeholder="Select a date"
    />

    <!-- Date range selection -->
    <DatePicker 
        v-model="dateRange" 
        type="daterange" 
        split-panels
        placeholder="Select date range"
    />

    <!-- DateTime selection -->
    <DatePicker 
        v-model="dateTime" 
        type="datetime" 
        format="yyyy-MM-dd HH:mm:ss"
    />

    <!-- Disable weekends -->
    <DatePicker 
        v-model="selectedDate" 
        :disabled-date="disableWeekends"
    />
</template>

<script setup>
import { ref } from 'vue'
import { DatePicker } from 'view-ui-plus'

const selectedDate = ref(new Date())
const dateRange = ref([new Date(), new Date(Date.now() + 86400000)])
const dateTime = ref(new Date())

const disableWeekends = (date) => {
    const day = date.getDay()
    return day === 0 || day === 6  // Disable Sunday and Saturday
}
</script>
```

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

### Flex Layout with Row and Col

Source: https://github.com/view-design/viewuiplus/blob/master/_autodocs/api-reference/layout-components.md

Example of using Row with `type="flex"` to create a flexbox layout, demonstrating alignment and justification of columns.

```vue
<template>
    <Row type="flex" justify="space-between" align="middle">
        <Col :span="8">Left</Col>
        <Col :span="8">Center</Col>
        <Col :span="8">Right</Col>
    </Row>
</template>
```

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

### Slider Component Examples

Source: https://github.com/view-design/viewuiplus/blob/master/_autodocs/api-reference/utility-components.md

Shows various ways to use the Slider component, including single value, range selection, and sliders with stops and custom marks.

```vue
<template>
    <!-- Single value slider -->
    <Slider v-model="value" :min="0" :max="100" />

    <!-- Range slider -->
    <Slider v-model="range" :min="0" :max="100" range show-input />

    <!-- With stops and marks -->
    <Slider 
        v-model="value" 
        :min="0" 
        :max="100" 
        :step="10"
        show-stops
        :marks="{ 0: '0%', 50: '50%', 100: '100%' }"
    />
</template>

<script setup>
import { ref } from 'vue'
import { Slider } from 'view-ui-plus'

const value = ref(50)
const range = ref([20, 80])
</script>
```

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

### Global Usage with Script Tag

Source: https://github.com/view-design/viewuiplus/blob/master/README.md

Include View UI Plus globally using script tags and a CSS link. This method is suitable for simpler projects or quick setups.

```html
<script type="text/javascript" src="viewuiplus.min.js"></script>
<link rel="stylesheet" href="dist/styles/viewuiplus.css">
```

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

### Accessing Global Configuration in Setup API

Source: https://github.com/view-design/viewuiplus/blob/master/_autodocs/configuration.md

Shows how to access the global View UI Plus configuration object within a Vue component using the Composition API's `getCurrentInstance`. This allows you to read global settings like size, transfer, or specific component configurations.

```vue
<script setup>
import { getCurrentInstance } from 'vue'

const instance = getCurrentInstance()
const config = instance.proxy.$VIEWUI

console.log(config.size)      // Get global size
console.log(config.transfer)  // Get global transfer setting
console.log(config.select)    // Get select configuration
</script>

```

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

### CountUp Component

Source: https://github.com/view-design/viewuiplus/blob/master/_autodocs/api-reference/miscellaneous-components.md

Provides an animated counter that counts up from a start value to an end value over a specified duration.

```APIDOC
## CountUp Component

Animated number counter.

### Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| start-value | `number` | No | `0` | Start number |
| end-value | `number` | Yes | — | End number |
| duration | `number` | No | `2.5` | Animation duration (seconds) |
| decimals | `number` | No | `0` | Decimal places |
| decimal-separator | `string` | No | `'.'` | Decimal separator |
| thousands-separator | `string` | No | `','` | Thousands separator |
| prefix | `string` | No | `''` | Number prefix |
| suffix | `string` | No | `''` | Number suffix |
| use-easing | `boolean` | No | `true` | Use easing animation |
| separator | `string` | No | `','` | Separator character |

### Events

| Event | Parameters | Description |
|-------|-----------|-------------|
| onMounted | — | Component mounted |

### Usage Example

```vue
<template>
    <CountUp :end-value="999" duration="3" />
    <!-- Animates from 0 to 999 over 3 seconds -->

    <CountUp 
        :start-value="100"
        :end-value="500" 
        :decimals="2"
        suffix=" items"
    />
    <!-- Shows currency format -->

    <CountUp 
        :end-value="99.99"
        prefix="$"
        :decimals="2"
    />
    <!-- Currency display with animation -->
</template>

<script setup>
import { CountUp } from 'view-ui-plus'
</script>
```

**Source**: `types/count-up.d.ts`
```

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

### Carousel Component with Images

Source: https://github.com/view-design/viewuiplus/blob/master/_autodocs/api-reference/data-display-components.md

Demonstrates a basic Carousel setup with automatic playback and multiple slides containing images.

```vue
<template>
    <Carousel autoplay>
        <CarouselItem>
            <img src="image1.jpg" style="width: 100%" />
        </CarouselItem>
        <CarouselItem>
            <img src="image2.jpg" style="width: 100%" />
        </CarouselItem>
    </Carousel>
</template>

<script setup>
import { Carousel, CarouselItem } from 'view-ui-plus'
</script>
```

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

### TypeScript Configuration and Imports

Source: https://github.com/view-design/viewuiplus/blob/master/_autodocs/README.md

Demonstrates how to import components and global configuration types in a TypeScript environment. Allows for type checking and autocompletion.

```typescript
import { Button } from 'view-ui-plus'
import type { ViewUIPlusGlobalOptions } from 'view-ui-plus'

const config: ViewUIPlusGlobalOptions = {
    size: 'large'
}
```

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

### Cascader Data Structure Example

Source: https://github.com/view-design/viewuiplus/blob/master/_autodocs/api-reference/utility-components.md

Illustrates the expected data structure for the Cascader component, which is an array of objects, each potentially containing nested children.

```javascript
[
    {
        label: 'Item 1',
        value: 'item1',
        children: [
            { label: 'Item 1-1', value: 'item1-1' },
            { label: 'Item 1-2', value: 'item1-2' }
        ]
    },
    {
        label: 'Item 2',
        value: 'item2',
        children: [
            { label: 'Item 2-1', value: 'item2-1' }
        ]
    }
]
```

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

### List Component Usage

Source: https://github.com/view-design/viewuiplus/blob/master/_autodocs/api-reference/data-display-components.md

Demonstrates how to use the List, ListItem, and ListItemMeta components to display a list of items with descriptions.

```vue
<template>
    <List bordered>
        <ListItem v-for="item in items" :key="item.id">
            <ListItemMeta :avatar="item.avatar" :title="item.title">
                <template #description>
                    {{ item.description }}
                </template>
            </ListItemMeta>
        </ListItem>
    </List>
</template>

<script setup>
import { ref } from 'vue'
import { List, ListItem, ListItemMeta } from 'view-ui-plus'

const items = ref([
    {
        id: 1,
        avatar: 'https://...',
        title: 'Item 1',
        description: 'Description 1'
    }
])
</script>
```

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

### Tooltip Component Usage

Source: https://github.com/view-design/viewuiplus/blob/master/_autodocs/api-reference/feedback-components.md

Demonstrates how to use the Tooltip component with basic and rich HTML content. Imports are required.

```vue
<template>
    <Tooltip content="This is a tooltip" placement="top">
        <Button>Hover Me</Button>
    </Tooltip>

    <Tooltip placement="right" theme="light">
        <Button>Button with custom tooltip</Button>
        <template #content>
            <strong>Rich HTML content</strong><br />
            <p>In the tooltip</p>
        </template>
    </Tooltip>
</template>

<script setup>
import { Tooltip, Button } from 'view-ui-plus'
</script>
```

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

### Ellipsis Component Usage

Source: https://github.com/view-design/viewuiplus/blob/master/_autodocs/api-reference/miscellaneous-components.md

Truncates long text content, allowing expansion and collapse. Supports custom 'more'/'less' text and a tooltip on hover for the second example.

```vue
<template>
    <Ellipsis 
        :lines="3" 
        text="Long text content..."
        expand-text="Show more"
        collapse-text="Show less"
    />

    <Ellipsis 
        :lines="2" 
        tooltip
    >
        {{ longText }}
    </Ellipsis>
</template>

<script setup>
import { Ellipsis } from 'view-ui-plus'
import { ref } from 'vue'

const longText = ref('This is a very long text...')
</script>
```

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

### Basic Modal Usage

Source: https://github.com/view-design/viewuiplus/blob/master/_autodocs/api-reference/feedback-components.md

Demonstrates how to open and manage a basic modal component using v-model for visibility control and handling OK/Cancel events.

```vue
<template>
    <Button @click="showModal = true">Open Modal</Button>
    
    <Modal
        v-model="showModal"
        title="Modal Title"
        @on-ok="handleOk"
        @on-cancel="handleCancel"
    >
        <p>Modal content goes here</p>
        <Input v-model="inputValue" placeholder="Enter text" />
    </Modal>
</template>

<script setup>
import { ref } from 'vue'
import { Modal, Button, Input } from 'view-ui-plus'

const showModal = ref(false)
const inputValue = ref('')

const handleOk = () => {
    console.log('OK clicked')
    showModal.value = false
}

const handleCancel = () => {
    console.log('Cancel clicked')
    showModal.value = false
}
</script>
```

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

### Basic Timeline Usage

Source: https://github.com/view-design/viewuiplus/blob/master/_autodocs/api-reference/data-display-components.md

Demonstrates how to use the Timeline and TimelineItem components to display a sequence of events with different statuses.

```vue
<template>
    <Timeline>
        <TimelineItem color="green">
            <p>Event 1 - Completed</p>
        </TimelineItem>
        <TimelineItem color="blue">
            <p>Event 2 - In Progress</p>
        </TimelineItem>
        <TimelineItem color="red">
            <p>Event 3 - Error</p>
        </TimelineItem>
    </Timeline>
</template>

<script setup>
import { Timeline, TimelineItem } from 'view-ui-plus'
</script>
```

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

### Modal Service Methods

Source: https://github.com/view-design/viewuiplus/blob/master/_autodocs/api-reference/feedback-components.md

Illustrates how to use the Modal service for confirmation, alerts, and informational dialogs directly via `this.$Modal`.

```javascript
// Confirmation dialog
this.$Modal.confirm({
    title: 'Confirm Action',
    content: 'Are you sure?',
    okText: 'Yes',
    cancelText: 'No',
    onOk: () => {
        console.log('Confirmed')
    },
    onCancel: () => {
        console.log('Cancelled')
    }
})

// Alert dialog
this.$Modal.alert({
    title: 'Alert',
    content: 'Alert message',
    onOk: () => {
        console.log('Alert closed')
    }
})

// Info, Success, Warning, Error dialogs
this.$Modal.info({ title: 'Info', content: 'Info message' })
this.$Modal.success({ title: 'Success', content: 'Success message' })
this.$Modal.warning({ title: 'Warning', content: 'Warning message' })
this.$Modal.error({ title: 'Error', content: 'Error message' })
```

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

### Result Component Usage

Source: https://github.com/view-design/viewuiplus/blob/master/_autodocs/api-reference/miscellaneous-components.md

Shows success, error, info, or warning messages with a title and custom content. Features a button in the footer to view orders for the success example.

```vue
<template>
    <Result type="success" title="Order Placed">
        Your order has been confirmed
        <template #footer>
            <Button type="primary" @click="goOrders">View Orders</Button>
        </template>
    </Result>
</template>

<script setup>
import { Result, Button } from 'view-ui-plus'
</script>
```

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

### Cascader Usage Example

Source: https://github.com/view-design/viewuiplus/blob/master/_autodocs/api-reference/utility-components.md

Shows how to implement the Cascader component for selecting hierarchical data. It binds to a ref for the selected values and uses a predefined cascade data array.

```vue
<template>
    <Cascader 
        v-model="selected" 
        :data="cascadeData"
        placeholder="Select location"
    />
</template>

<script setup>
import { ref } from 'vue'
import { Cascader } from 'view-ui-plus'

const selected = ref([])

const cascadeData = [
    {
        label: 'China',
        value: 'cn',
        children: [
            { label: 'Beijing', value: 'bj' },
            { label: 'Shanghai', value: 'sh' }
        ]
    },
    {
        label: 'USA',
        value: 'us',
        children: [
            { label: 'New York', value: 'ny' },
            { label: 'Los Angeles', value: 'la' }
        ]
    }
]
</script>
```

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

### Checkbox Component Usage

Source: https://github.com/view-design/viewuiplus/blob/master/_autodocs/api-reference/form-components.md

Shows examples of using the Checkbox component for single selections with a label and for multiple selections within a CheckboxGroup. It utilizes v-model for state management.

```vue
<template>
    <!-- Single checkbox -->
    <Checkbox v-model="agree" label="I agree to terms" />

    <!-- Checkbox group -->
    <CheckboxGroup v-model="selectedFeatures">
        <Checkbox value="feature1" label="Feature 1" />
        <Checkbox value="feature2" label="Feature 2" />
        <Checkbox value="feature3" label="Feature 3" />
    </CheckboxGroup>
</template>

<script setup>
import { ref } from 'vue'
import { Checkbox, CheckboxGroup } from 'view-ui-plus'

const agree = ref(false)
const selectedFeatures = ref(['feature1'])
</script>
```

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

### Circle Component Usage

Source: https://github.com/view-design/viewuiplus/blob/master/_autodocs/api-reference/miscellaneous-components.md

Renders a circular progress indicator. The first example shows a custom percentage with inner text, while the second demonstrates a dashboard mode with a different color.

```vue
<template>
    <Circle 
        :percent="progress" 
        :size="150"
        stroke-color="#13ce66"
    >
        <span>{{ progress }}%</span>
    </Circle>

    <Circle 
        :percent="75" 
        :dashboard="true"
        stroke-color="#f90"
    />
</template>

<script setup>
import { Circle } from 'view-ui-plus'
import { ref } from 'vue'

const progress = ref(45)
</script>
```

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

### Exception Component Usage

Source: https://github.com/view-design/viewuiplus/blob/master/_autodocs/api-reference/miscellaneous-components.md

Displays different exception types (e.g., 404, 500) with customizable titles and descriptions. Includes a button to navigate back home for the 404 example.

```vue
<template>
    <Exception type="404" title="Page Not Found">
        <Button @click="goHome">Back to Home</Button>
    </Exception>

    <Exception 
        type="500" 
        title="Server Error"
        description="Something went wrong"
    />
</template>

<script setup>
import { Exception, Button } from 'view-ui-plus'

const goHome = () => {
    window.location.href = '/'
}
</script>
```

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

### Select Component API

Source: https://github.com/view-design/viewuiplus/blob/master/_autodocs/api-reference/form-components.md

API documentation for the Select component, detailing its configurable properties.

```APIDOC
## Select Component API

### Description
Provides a comprehensive set of properties to configure the Select component's behavior and appearance, including selection modes, filtering, remote data handling, and display options.

### Props

*   **model-value** (`string | number | array`): Required: No, Default: —. Selected value(s), use v-model for binding.
*   **multiple** (`boolean`): Required: No, Default: `false`. Enable multiple selection.
*   **disabled** (`boolean`): Required: No, Default: `false`. Disable selection.
*   **clearable** (`boolean`): Required: No, Default: `false`. Show clear button (single select only).
*   **filterable** (`boolean`): Required: No, Default: `false`. Enable search filtering.
*   **filter-by-label** (`boolean`): Required: No, Default: `false`. Filter only by option label.
*   **remote-method** (`function`): Required: No, Default: —. Remote search function.
*   **loading** (`boolean`): Required: No, Default: `false`. Show loading state (remote search).
*   **loading-text** (`string`): Required: No, Default: —. Loading message text.
*   **default-label** (`string | number | array`): Required: No, Default: —. Default label for remote search.
*   **size** (`'large' | 'small' | 'default'`): Required: No, Default: `'default'`. Select size.
*   **placeholder** (`string`): Required: No, Default: —. Placeholder text.
*   **not-found-text** (`string`): Required: No, Default: —. Empty options message.
*   **label-in-value** (`boolean`): Required: No, Default: `false`. Return object with label and value.
*   **placement** (`'bottom' | 'top' | 'top-start' | 'bottom-start' | 'top-end' | 'bottom-end'`): Required: No, Default: `'bottom'`. Dropdown direction.
*   **transfer** (`boolean`): Required: No, Default: `false`. Teleport dropdown to body.
*   **element-id** (`string`): Required: No, Default: —. HTML id attribute.
*   **transfer-class-name** (`string`): Required: No, Default: —. Additional class for transferred dropdown.
*   **prefix** (`string`): Required: No, Default: —. Prefix icon.
*   **max-tag-count** (`number`): Required: No, Default: —. Max tags to show (multiple mode).
*   **max-tag-placeholder** (`string | function`): Required: No, Default: —. Placeholder for hidden tags.

### Slots

*   **default**: Option elements

### Events

*   **update:modelValue** (`value`): Value change (v-model).
*   **onChange** (`value`): Change event.
*   **onQuery** (`query`): Search query change.
*   **onOpenChange** (`open`): Dropdown open/close state.
```

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

### View UI Plus Input Component Usage

Source: https://github.com/view-design/viewuiplus/blob/master/_autodocs/api-reference/form-components.md

Demonstrates various configurations of the Input component, including basic text, password, search, textarea, and inputs with icons. Uses v-model for data binding and event handlers for user interactions.

```vue
<template>
    <div>
        <!-- Basic text input -->
        <Input 
            v-model="username" 
            placeholder="Enter username" 
            clearable
        />

        <!-- Password input -->
        <Input 
            v-model="password"
            type="password"
            password
            placeholder="Enter password"
        />

        <!-- Search input -->
        <Input 
            v-model="searchQuery"
            type="text"
            search
            enter-button="Search"
            @on-search="handleSearch"
            placeholder="Search..."
        />

        <!-- Textarea -->
        <Input 
            v-model="comments"
            type="textarea"
            :rows="5"
            placeholder="Enter comments"
            maxlength="500"
            show-word-limit
        />

        <!-- Input with icons -->
        <Input 
            v-model="email"
            type="email"
            prefix="ios-mail"
            placeholder="Enter email"
        />
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { Input } from 'view-ui-plus'

const username = ref('')
const password = ref('')
const searchQuery = ref('')
const comments = ref('')
const email = ref('')

const handleSearch = (query) => {
    console.log('Search for:', query)
}
</script>
```

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

### Numeral Component Usage

Source: https://github.com/view-design/viewuiplus/blob/master/_autodocs/api-reference/miscellaneous-components.md

Demonstrates various formatting options for the Numeral component, including thousands separators, currency, and percentages. Ensure the Numeral component is imported.

```vue
<template>
    <Numeral :value="1234567.89" format="0,0.00" />
    <!-- Output: "1,234,567.89" -->

    <Numeral :value="0.456" format="0.0%" />
    <!-- Output: "45.6%" -->

    <Numeral :value="1000000" format="$0,0" />
    <!-- Output: "$1,000,000" -->
</template>

<script setup>
import { Numeral } from 'view-ui-plus'
</script>
```

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

### Poptip Component Usage

Source: https://github.com/view-design/viewuiplus/blob/master/_autodocs/api-reference/feedback-components.md

Shows how to use the Poptip component for confirmation dialogs. Requires importing Poptip and Button components.

```vue
<template>
    <Poptip 
        title="Confirm Delete" 
        content="Are you sure?" 
        confirm
        @on-ok="handleDelete"
    >
        <Button type="error">Delete</Button>
    </Poptip>
</template>

<script setup>
import { Poptip, Button } from 'view-ui-plus'

const handleDelete = () => {
    console.log('Deleted')
}
</script>
```

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

### $Spin Service

Source: https://github.com/view-design/viewuiplus/blob/master/_autodocs/README.md

Provides a loading spinner service with methods to show and hide the spinner.

```APIDOC
## $Spin Service

### Description
Provides a loading spinner service with methods to show and hide the spinner.

### Methods
- show()
- hide()
```

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

### CountUp Component Usage

Source: https://github.com/view-design/viewuiplus/blob/master/_autodocs/api-reference/miscellaneous-components.md

Shows how to use the CountUp component for animating number counters. It supports custom start and end values, duration, decimals, and prefixes/suffixes. Import the CountUp component to use it.

```vue
<template>
    <CountUp :end-value="999" duration="3" />
    <!-- Animates from 0 to 999 over 3 seconds -->

    <CountUp 
        :start-value="100"
        :end-value="500" 
        :decimals="2"
        suffix=" items"
    />
    <!-- Shows currency format -->

    <CountUp 
        :end-value="99.99"
        prefix="$"
        :decimals="2"
    />
    <!-- Currency display with animation -->
</template>

<script setup>
import { CountUp } from 'view-ui-plus'
</script>
```

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

### Flex Layout (Row with type='flex')

Source: https://github.com/view-design/viewuiplus/blob/master/_autodocs/api-reference/layout-components.md

Demonstrates how to use the Row component with `type="flex"` to achieve flexbox layouts. It includes examples of justify and align props for controlling element distribution and alignment.

```APIDOC
## Flex Layout (Row with type='flex')

Use Row with `type="flex"` and alignment props for flexbox layout.

### Example

```vue
<template>
    <Row type="flex" justify="space-between" align="middle">
        <Col :span="8">Left</Col>
        <Col :span="8">Center</Col>
        <Col :span="8">Right</Col>
    </Row>
</template>
```
```

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

### Notice Service API

Source: https://github.com/view-design/viewuiplus/blob/master/_autodocs/api-reference/feedback-components.md

Demonstrates using the Notice service for displaying various types of notifications programmatically. Access via `this.$Notice`.

```javascript
this.$Notice.open({
    title: 'Notification Title',
    desc: 'Notification description',
    duration: 4.5
})

this.$Notice.info({ title: 'Info', desc: 'Info message' })
this.$Notice.success({ title: 'Success', desc: 'Success message' })
this.$Notice.warning({ title: 'Warning', desc: 'Warning message' })
this.$Notice.error({ title: 'Error', desc: 'Error message' })

// Close all notices
this.$Notice.closeAll()
```

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

### Configure Image Component Toolbar

Source: https://github.com/view-design/viewuiplus/blob/master/_autodocs/configuration.md

Set up the toolbar buttons for the Image component's preview mode. Affects available image manipulation options.

```typescript
interface ImageConfig {
    toolbar: any[];  // Toolbar button configuration
}
```

```javascript
app.use(ViewUIPlus, {
    image: {
        toolbar: [
            { name: 'zoom-in', icon: 'ios-add' },
            { name: 'zoom-out', icon: 'ios-remove' },
            { name: 'rotate', icon: 'ios-redo' },
            { name: 'download', icon: 'ios-download' }
        ]
    }
})
```

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

### Include ViewUIPlus via CDN

Source: https://github.com/view-design/viewuiplus/blob/master/_autodocs/api-reference/installation.md

Include ViewUIPlus using CDN links for JavaScript and CSS. This is useful for quick integration without a build process.

```html
<script type="text/javascript" src="https://unpkg.com/view-ui-plus/dist/viewuiplus.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/view-ui-plus/dist/styles/viewuiplus.css">
```

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

### Row and Col Responsive and Offset Usage

Source: https://github.com/view-design/viewuiplus/blob/master/_autodocs/api-reference/layout-components.md

Illustrates responsive column behavior across different screen sizes (md, lg) and demonstrates using offset for positioning.

```vue
<template>
    <!-- Basic grid -->
    <Row :gutter="16">
        <Col :span="12">Half width</Col>
        <Col :span="12">Half width</Col>
    </Row>

    <!-- Responsive grid -->
    <Row :gutter="16">
        <Col 
            :span="24" 
            :md="12" 
            :lg="8"
        >
            Responsive column
        </Col>
    </Row>

    <!-- Offset and push/pull -->
    <Row>
        <Col :span="8">First</Col>
        <Col :span="8" :offset="8">Third (offset by 8)</Col>
    </Row>
</template>
```

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

### Tag Component Usage

Source: https://github.com/view-design/viewuiplus/blob/master/_autodocs/api-reference/data-display-components.md

Demonstrates basic and interactive usage of the Tag component, including different styles and event handling.

```vue
<template>
    <Tag color="blue">Tag 1</Tag>
    <Tag type="border" checkable v-model:checked="selected">Optional</Tag>
    <Tag closable @on-close="handleClose">Closable</Tag>
</template>

<script setup>
import { ref } from 'vue'
import { Tag } from 'view-ui-plus'

const selected = ref(true)

const handleClose = () => {
    console.log('Tag closed')
}
</script>
```

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

### Layout with Sider and Content

Source: https://github.com/view-design/viewuiplus/blob/master/_autodocs/api-reference/layout-components.md

Demonstrates a basic page layout using Layout, Sider, and Content components. The Sider is collapsible and triggers an event when its state changes.

```vue
<template>
    <Layout>
        <Sider 
            v-model="sidebarCollapsed"
            width="256"
            collapsible
            @on-collapse="handleCollapse"
        >
            <!-- Menu content -->
            <Menu>
                <MenuItem>Home</MenuItem>
                <MenuItem>Settings</MenuItem>
            </Menu>
        </Sider>
        <Content>
            Main content area
        </Content>
    </Layout>
</template>

<script setup>
import { ref } from 'vue'
import { Layout, Sider, Content, Menu, MenuItem } from 'view-ui-plus'

const sidebarCollapsed = ref(false)

const handleCollapse = (collapsed) => {
    console.log('Sidebar collapsed:', collapsed)
}
</script>
```