### Install ViewUI using npm

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

Installs the ViewUI library using npm. This is the recommended method for projects using npm as their package manager.

```bash
npm install view-design --save
```

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

### ViewUI Installation and Global Setup in Vue.js

Source: https://context7.com/view-design/viewui/llms.txt

Demonstrates how to install ViewUI via npm and configure it for global use in a Vue.js application. This includes importing the library, CSS, locale settings, and common configuration options like component size and popup transfer.

```javascript
// Install via npm
// npm install view-design --save

// main.js - Full library import
import Vue from 'vue';
import ViewUI from 'view-design';
import 'view-design/dist/styles/iview.css';
import locale from 'view-design/src/locale/lang/en-US';

Vue.use(ViewUI, {
    locale: locale,
    size: 'default',      // Global component size: 'small', 'default', 'large'
    transfer: true,       // Transfer popup to body
    capture: true,        // Event capture mode
    select: {
        arrow: 'ios-arrow-down',
        customArrow: '',
        arrowSize: ''
    }
});

// Access global methods
// this.$Message, this.$Modal, this.$Notice, this.$Loading, this.$Spin
```

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

### Install ViewUI using a script tag

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

Includes ViewUI globally in an HTML page using script and link tags. This is suitable for projects not using a module bundler or for quick prototyping.

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

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

### Vue.js Grid System Examples

Source: https://context7.com/view-design/viewui/llms.txt

Demonstrates the usage of ViewUI's Row and Col components for creating responsive grid layouts. Supports basic structure, gutters, offsets, push/pull, responsive columns, alignment, and ordering. No external dependencies are required beyond Vue.js itself.

```vue
<template>
    <div>
        <!-- Basic grid -->
        <Row>
            <Col span="12">Column 1 (50%)</Col>
            <Col span="12">Column 2 (50%)</Col>
        </Row>

        <!-- Grid with gutter -->
        <Row :gutter="16">
            <Col span="8">Column 1</Col>
            <Col span="8">Column 2</Col>
            <Col span="8">Column 3</Col>
        </Row>

        <!-- Offset columns -->
        <Row>
            <Col span="8">Column</Col>
            <Col span="8" offset="8">Column with offset</Col>
        </Row>

        <!-- Push and pull -->
        <Row>
            <Col span="12" push="12">Column 1 (pushed right)</Col>
            <Col span="12" pull="12">Column 2 (pulled left)</Col>
        </Row>

        <!-- Responsive layout -->
        <Row>
            <Col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                Responsive column
            </Col>
            <Col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                Responsive column
            </Col>
        </Row>

        <!-- Alignment -->
        <Row type="flex" justify="center" align="middle" :style="{height: '100px'}">
            <Col span="4">Centered column</Col>
            <Col span="4">Centered column</Col>
        </Row>

        <!-- Flex with justify options -->
        <Row type="flex" justify="space-between">
            <Col span="4">Left</Col>
            <Col span="4">Right</Col>
        </Row>

        <!-- Order -->
        <Row type="flex">
            <Col span="6" order="4">1 | order-4</Col>
            <Col span="6" order="3">2 | order-3</Col>
            <Col span="6" order="2">3 | order-2</Col>
            <Col span="6" order="1">4 | order-1</Col>
        </Row>
    </div>
</template>

```

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

### View UI Select Component Examples (Vue)

Source: https://context7.com/view-design/viewui/llms.txt

Demonstrates various configurations of the View UI Select component, including basic usage, multiple selections, filtering, remote data fetching, option grouping, and size variations. It utilizes Vue.js for templating and script logic.

```vue
<template>
    <div>
        <!-- Basic select -->
        <Select v-model="selectedValue" placeholder="Select option">
            <Option value="opt1">Option 1</Option>
            <Option value="opt2">Option 2</Option>
            <Option value="opt3">Option 3</Option>
        </Select>

        <!-- Multiple select -->
        <Select v-model="multipleSelection" multiple placeholder="Select multiple">
            <Option value="opt1">Option 1</Option>
            <Option value="opt2">Option 2</Option>
            <Option value="opt3">Option 3</Option>
        </Select>

        <!-- Filterable select -->
        <Select v-model="filterable" filterable placeholder="Type to filter">
            <Option v-for="item in cities" :value="item.value" :key="item.value">
                {{ item.label }}
            </Option>
        </Select>

        <!-- Remote search -->
        <Select
            v-model="remoteValue"
            filterable
            remote
            :remote-method="remoteSearch"
            :loading="loading"
            placeholder="Search users">
            <Option v-for="user in userList" :value="user.id" :key="user.id">
                {{ user.name }}
            </Option>
        </Select>

        <!-- Option groups -->
        <Select v-model="groupValue" placeholder="Select with groups">
            <OptionGroup label="Europe">
                <Option value="london">London</Option>
                <Option value="paris">Paris</Option>
            </OptionGroup>
            <OptionGroup label="Asia">
                <Option value="tokyo">Tokyo</Option>
                <Option value="beijing">Beijing</Option>
            </OptionGroup>
        </Select>

        <!-- Size variants -->
        <Select v-model="value1" size="small" placeholder="Small"></Select>
        <Select v-model="value2" size="default" placeholder="Default"></Select>
        <Select v-model="value3" size="large" placeholder="Large"></Select>
    </div>
</template>

<script>
export default {
    data() {
        return {
            selectedValue: '',
            multipleSelection: [],
            filterable: '',
            remoteValue: '',
            loading: false,
            userList: [],
            groupValue: '',
            cities: [
                { value: 'ny', label: 'New York' },
                { value: 'london', label: 'London' },
                { value: 'tokyo', label: 'Tokyo' },
                { value: 'paris', label: 'Paris' }
            ]
        };
    },
    methods: {
        remoteSearch(query) {
            if (query !== '') {
                this.loading = true;
                // Simulate API call
                setTimeout(() => {
                    this.userList = [
                        { id: 1, name: `User matching ${query} #1` },
                        { id: 2, name: `User matching ${query} #2` },
                        { id: 3, name: `User matching ${query} #3` }
                    ];
                    this.loading = false;
                }, 500);
            } else {
                this.userList = [];
            }
        }
    }
}
</script>
```

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

### View UI DatePicker Component Examples

Source: https://context7.com/view-design/viewui/llms.txt

Demonstrates various ways to use the DatePicker component in Vue.js for selecting dates, date ranges, datetimes, months, and years. It shows basic usage, custom formatting, disabling dates, and integrating with TimePicker.

```vue
<template>
    <div>
        <!-- Basic date picker -->
        <DatePicker v-model="date" type="date" placeholder="Select date"></DatePicker>

        <!-- Date range picker -->
        <DatePicker
            v-model="dateRange"
            type="daterange"
            placement="bottom-end"
            placeholder="Select date range">
        </DatePicker>

        <!-- DateTime picker -->
        <DatePicker
            v-model="datetime"
            type="datetime"
            placeholder="Select date and time">
        </DatePicker>

        <!-- DateTime range -->
        <DatePicker
            v-model="datetimeRange"
            type="datetimerange"
            placeholder="Select datetime range">
        </DatePicker>

        <!-- Month picker -->
        <DatePicker v-model="month" type="month" placeholder="Select month"></DatePicker>

        <!-- Year picker -->
        <DatePicker v-model="year" type="year" placeholder="Select year"></DatePicker>

        <!-- Custom format -->
        <DatePicker
            v-model="customDate"
            type="date"
            format="yyyy/MM/dd"
            placeholder="Custom format">
        </DatePicker>

        <!-- With options -->
        <DatePicker
            v-model="optionsDate"
            type="date"
            :options="dateOptions"
            placeholder="With disabled dates">
        </DatePicker>

        <!-- Time picker -->
        <TimePicker v-model="time" placeholder="Select time"></TimePicker>

        <!-- Time range picker -->
        <TimePicker
            v-model="timeRange"
            type="timerange"
            placement="bottom-end"
            placeholder="Select time range">
        </TimePicker>
    </div>
</template>

<script>
export default {
    data() {
        return {
            date: '',
            dateRange: [],
            datetime: '',
            datetimeRange: [],
            month: '',
            year: '',
            customDate: '',
            optionsDate: '',
            time: '',
            timeRange: [],
            dateOptions: {
                disabledDate(date) {
                    // Disable dates before today
                    return date && date.valueOf() < Date.now() - 86400000;
                }
            }
        };
    }
}
</script>
```

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

### ViewUI Button Component Examples

Source: https://context7.com/view-design/viewui/llms.txt

Illustrates the usage of the ViewUI Button component in a Vue.js template. It covers various button types (default, primary, dashed, etc.), sizes (small, default, large), states (loading, disabled, ghost), icon integration, button groups, router links, and click event handling.

```vue
<template>
    <div>
        <!-- Button types -->
        <Button type="default">Default</Button>
        <Button type="primary">Primary</Button>
        <Button type="dashed">Dashed</Button>
        <Button type="info">Info</Button>
        <Button type="success">Success</Button>
        <Button type="warning">Warning</Button>
        <Button type="error">Error</Button>
        <Button type="text">Text</Button>

        <!-- Button sizes -->
        <Button type="primary" size="small">Small</Button>
        <Button type="primary" size="default">Default</Button>
        <Button type="primary" size="large">Large</Button>

        <!-- Button with icons -->
        <Button type="primary" icon="ios-search">Search</Button>
        <Button type="primary" shape="circle" icon="ios-search"></Button>

        <!-- Button states -->
        <Button type="primary" loading>Loading</Button>
        <Button type="primary" disabled>Disabled</Button>
        <Button type="primary" ghost>Ghost</Button>

        <!-- Button group -->
        <ButtonGroup>
            <Button type="primary" icon="ios-arrow-back">Previous</Button>
            <Button type="primary">Next<Icon type="ios-arrow-forward" /></Button>
        </ButtonGroup>

        <!-- Router link button -->
        <Button type="primary" to="/dashboard">Navigate</Button>
        <Button type="primary" to="//example.com" target="_blank">External</Button>

        <!-- Click handler -->
        <Button type="primary" @click="handleClick">Click Me</Button>
    </div>
</template>

<script>
export default {
    methods: {
        handleClick() {
            console.log('Button clicked');
        }
    }
}
</script>
```

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

### View UI Input Component Examples

Source: https://context7.com/view-design/viewui/llms.txt

Demonstrates the usage of the View UI Input component for various input types, sizes, and functionalities. Includes basic input, inputs with icons, different sizes, password fields, textareas (including auto-sizing), inputs with prepended/appended content, prefix/suffix icons, search functionality, clearable inputs, disabled inputs, and inputs with event handlers. This component is built using Vue.js.

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

        <!-- Input with icon -->
        <Input v-model="searchValue" icon="ios-search" placeholder="Search"></Input>

        <!-- Input sizes -->
        <Input v-model="value1" size="small" placeholder="Small"></Input>
        <Input v-model="value2" size="default" placeholder="Default"></Input>
        <Input v-model="value3" size="large" placeholder="Large"></Input>

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

        <!-- Textarea -->
        <Input v-model="description" type="textarea" :rows="4" placeholder="Description"></Input>

        <!-- Auto-sizing textarea -->
        <Input
            v-model="autoText"
            type="textarea"
            :autosize="{minRows: 2, maxRows: 6}"
            placeholder="Auto-sizing">
        </Input>

        <!-- Input with prepend/append -->
        <Input v-model="url">
            <span slot="prepend">https://</span>
            <span slot="append">.com</span>
        </Input>

        <!-- Input with prefix/suffix -->
        <Input v-model="amount">
            <Icon type="logo-usd" slot="prefix"></Icon>
            <span slot="suffix">USD</span>
        </Input>

        <!-- Search input -->
        <Input
            v-model="searchQuery"
            search
            placeholder="Enter search term"
            @on-search="handleSearch">
        </Input>

        <!-- Clearable input -->
        <Input v-model="clearableValue" clearable placeholder="Clearable"></Input>

        <!-- Disabled input -->
        <Input v-model="disabledValue" disabled placeholder="Disabled"></Input>

        <!-- Input with event handlers -->
        <Input
            v-model="eventValue"
            @on-change="handleChange"
            @on-focus="handleFocus"
            @on-blur="handleBlur"
            @on-enter="handleEnter">
        </Input>
    </div>
</template>

<script>
export default {
    data() {
        return {
            inputValue: '',
            searchValue: '',
            password: '',
            description: '',
            autoText: '',
            url: '',
            amount: '',
            searchQuery: '',
            clearableValue: '',
            disabledValue: 'Cannot edit',
            eventValue: ''
        };
    },
    methods: {
        handleSearch(value) {
            console.log('Search for:', value);
        },
        handleChange(event) {
            console.log('Input changed:', event.target.value);
        },
        handleFocus() {
            console.log('Input focused');
        },
        handleBlur() {
            console.log('Input blurred');
        },
        handleEnter() {
            console.log('Enter key pressed');
        }
    }
}
</script>
```

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

### View UI Message Component: Notifications and Feedback (JavaScript)

Source: https://context7.com/view-design/viewui/llms.txt

Illustrates the usage of the View UI Message component for displaying user feedback. It includes examples for basic info, success, warning, and error messages, as well as loading states and advanced configuration options like duration, closability, and background. Global configuration and destruction are also covered. This code is typically used within a Vue.js application context.

```javascript
// Global message methods available on this.$Message

// Basic usage
this.$Message.info('This is an info message');
this.$Message.success('Operation completed successfully!');
this.$Message.warning('Warning: Please check your input');
this.$Message.error('Error: Operation failed');

// Loading message
const hide = this.$Message.loading('Processing your request...');
setTimeout(() => {
    hide(); // Manually close loading message
    this.$Message.success('Request completed!');
}, 3000);

// Advanced configuration
this.$Message.info({
    content: 'Custom message with options',
    duration: 5,           // Display duration in seconds (0 = permanent)
    closable: true,        // Show close button
    background: true,      // Add background color
    onClose: () => {
        console.log('Message closed');
    }
});

// Global configuration
this.$Message.config({
    top: 50,              // Distance from top in pixels
    duration: 3           // Default duration
});

// Destroy all messages
this.$Message.destroy();
```

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

### View UI LoadingBar: Control Page Transitions and Async Operations

Source: https://context7.com/view-design/viewui/llms.txt

The LoadingBar component provides a visual progress indicator for page transitions and asynchronous operations. It can be controlled globally via `this.$Loading` or integrated with routing and network requests like Axios. Dependencies include Vue.js and View UI. It accepts methods like `start()`, `update()`, `finish()`, `error()`, and `config()` for customization.

```javascript
// Global loading bar available on this.$Loading

// Start loading
this.$Loading.start();

// Update progress (0-100)
this.$Loading.update(50);

// Finish loading (success)
this.$Loading.finish();

// Finish loading (error)
this.$Loading.error();

// Configuration
this.$Loading.config({
    color: '#5cb85c',        // Bar color
    failedColor: '#f0ad4e',  // Error color
    height: 2                // Bar height in pixels
});

// Example: Use with router
import Vue from 'vue';
import Router from 'vue-router';
import ViewUI from 'view-design';

Vue.use(ViewUI);

const router = new Router({ /* routes */ });

router.beforeEach((to, from, next) => {
    ViewUI.LoadingBar.start();
    next();
});

router.afterEach(() => {
    ViewUI.LoadingBar.finish();
});

// Example: Use with axios
import axios from 'axios';
axios.interceptors.request.use(config => {
    Vue.prototype.$Loading.start();
    return config;
}, error => {
    Vue.prototype.$Loading.error();
    return Promise.reject(error);
});
axios.interceptors.response.use(response => {
    Vue.prototype.$Loading.finish();
    return response;
}, error => {
    Vue.prototype.$Loading.error();
    return Promise.reject(error);
});
```

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

### Vue.js Data Table with Sorting, Filtering, and Pagination

Source: https://context7.com/view-design/viewui/llms.txt

This Vue.js component demonstrates the usage of the View UI Table and Page components to create a functional data table. It includes configurations for columns, data, loading states, sorting, filtering, selection, and pagination. The example covers event handling for user interactions and basic modal/message confirmations for actions.

```vue
<template>
    <div>
        <Table
            :columns="columns"
            :data="tableData"
            :loading="loading"
            @on-selection-change="handleSelectionChange"
            @on-sort-change="handleSortChange">
        </Table>

        <Page
            :total="total"
            :current="currentPage"
            :page-size="pageSize"
            @on-change="handlePageChange"
            style="margin-top: 20px; text-align: right">
        </Page>
    </div>
</template>

<script>
export default {
    data() {
        return {
            loading: false,
            currentPage: 1,
            pageSize: 10,
            total: 100,
            columns: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    title: 'Name',
                    key: 'name',
                    sortable: true,
                    width: 150
                },
                {
                    title: 'Email',
                    key: 'email',
                    width: 200
                },
                {
                    title: 'Age',
                    key: 'age',
                    sortable: true,
                    width: 100
                },
                {
                    title: 'Status',
                    key: 'status',
                    render: (h, params) => {
                        const status = params.row.status;
                        const color = status === 'active' ? 'success' : 'default';
                        return h('Tag', {
                            props: { color: color }
                        }, status);
                    },
                    filters: [
                        { label: 'Active', value: 'active' },
                        { label: 'Inactive', value: 'inactive' }
                    ],
                    filterMultiple: false,
                    filterMethod: (value, row) => {
                        return row.status === value;
                    }
                },
                {
                    title: 'Actions',
                    key: 'actions',
                    width: 200,
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: { type: 'primary', size: 'small' },
                                style: { marginRight: '5px' },
                                on: {
                                    click: () => {
                                        this.handleEdit(params.row);
                                    }
                                }
                            }, 'Edit'),
                            h('Button', {
                                props: { type: 'error', size: 'small' },
                                on: {
                                    click: () => {
                                        this.handleDelete(params.row);
                                    }
                                }
                            }, 'Delete')
                        ]);
                    }
                }
            ],
            tableData: [
                { name: 'John Doe', email: 'john@example.com', age: 28, status: 'active' },
                { name: 'Jane Smith', email: 'jane@example.com', age: 32, status: 'inactive' },
                { name: 'Bob Johnson', email: 'bob@example.com', age: 45, status: 'active' }
            ]
        };
    },
    methods: {
        handleSelectionChange(selection) {
            console.log('Selected rows:', selection);
        },
        handleSortChange({ key, order }) {
            console.log('Sort by:', key, order);
            // Implement server-side sorting here
        },
        handlePageChange(page) {
            this.currentPage = page;
            this.loadData();
        },
        handleEdit(row) {
            this.$Modal.info({
                title: 'Edit User',
                content: `Editing user: ${row.name}`
            });
        },
        handleDelete(row) {
            this.$Modal.confirm({
                title: 'Delete User',
                content: `Are you sure you want to delete ${row.name}?`,
                onOk: () => {
                    this.$Message.success('User deleted');
                }
            });
        },
        loadData() {
            this.loading = true;
            // Simulate API call
            setTimeout(() => {
                this.loading = false;
            }, 1000);
        }
    }
}
</script>
```

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

### View UI Notice Component Usage

Source: https://context7.com/view-design/viewui/llms.txt

Illustrates how to use the Notice component in JavaScript for displaying various types of notifications like info, success, warning, and error. It covers basic usage, advanced configurations such as duration, closability, and custom render functions, as well as global configuration and closing specific notices.

```javascript
// Global notice methods available on this.$Notice

// Basic usage
this.$Notice.info({
    title: 'Notification Title',
    desc: 'This is the notification description.'
});

this.$Notice.success({
    title: 'Success',
    desc: 'Your operation completed successfully.'
});

this.$Notice.warning({
    title: 'Warning',
    desc: 'Please check your input and try again.'
});

this.$Notice.error({
    title: 'Error',
    desc: 'An error occurred while processing your request.'
});

// Advanced configuration
this.$Notice.info({
    title: 'New Message',
    desc: 'You have received a new message from John.',
    duration: 0,          // 0 = permanent until manually closed
    closable: true,       // Show close button (default: true)
    onClose: () => {
        console.log('Notice closed');
    }
});

// With custom render function
this.$Notice.open({
    title: 'Custom Content',
    render: h => {
        return h('div', [
            h('p', 'This is custom HTML content'),
            h('Button', {
                props: { type: 'primary' },
                on: {
                    click: () => {
                        console.log('Button clicked');
                    }
                }
            }, 'Action')
        ]);
    }
});

// Global configuration
this.$Notice.config({
    top: 24,              // Distance from top in pixels
    duration: 4.5         // Default duration in seconds
});

// Close specific notice
const notice = this.$Notice.info({ title: 'Processing...', desc: 'Please wait' });
setTimeout(() => {
    this.$Notice.close('notice_key');
}, 3000);

// Destroy all notices
this.$Notice.destroy();

```

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

### View UI Layout: Structure Applications with Header, Content, and Sidebar

Source: https://context7.com/view-design/viewui/llms.txt

The Layout component offers a flexible grid system for structuring application UIs, including Header, Content, Footer, and Sider areas. It supports basic layouts, layouts with sidebars, and collapsible sidebars. This Vue.js template demonstrates common usage patterns.

```vue
<template>
    <div>
        <!-- Basic layout -->
        <Layout>
            <Header>Header</Header>
            <Content>Content</Content>
            <Footer>Footer</Footer>
        </Layout>

        <!-- Layout with sidebar -->
        <Layout>
            <Header>Header</Header>
            <Layout>
                <Sider :width="200">
                    <Menu theme="dark" :active-name="activeName">
                        <MenuItem name="1">
                            <Icon type="ios-paper" />
                            Dashboard
                        </MenuItem>
                        <MenuItem name="2">
                            <Icon type="ios-people" />
                            Users
                        </MenuItem>
                        <Submenu name="3">
                            <template slot="title">
                                <Icon type="ios-stats" />
                                Reports
                            </template>
                            <MenuItem name="3-1">Sales</MenuItem>
                            <MenuItem name="3-2">Analytics</MenuItem>
                        </Submenu>
                    </Menu>
                </Sider>
                <Layout>
                    <Content :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
                        Content area
                    </Content>
                </Layout>
            </Layout>
            <Footer>Footer</Footer>
        </Layout>

        <!-- Collapsible sidebar -->
        <Layout>
            <Sider
                collapsible
                :collapsed-width="78"
                v-model="isCollapsed"
                :style="{position: 'fixed', height: '100vh', left: 0, overflow: 'auto'}">
                <Menu theme="dark" width="auto" :active-name="activeName">
                    <MenuItem name="1">
                        <Icon type="ios-paper" />
                        <span>Dashboard</span>
                    </MenuItem>
                </Menu>
            </Sider>
            <Layout :style="{marginLeft: isCollapsed ? '78px' : '200px'}">
                <Header :style="{background: '#fff', padding: '0 24px'}">
                    <Icon
                        type="md-menu"
                        size="24"
                        @click="isCollapsed = !isCollapsed"
                        style="cursor: pointer">
                    </Icon>
                </Header>
                <Content :style="{margin: '24px 16px', padding: '24px', background: '#fff'}">
                    Content
                </Content>
            </Layout>
        </Layout>
    </div>
</template>

<script>
export default {
    data() {
        return {
            isCollapsed: false,
            activeName: '1'
        };
    }
}
</script>
```

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

### Vue Component Usage with ViewUI Slider

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

Demonstrates how to use the Slider component from ViewUI within a Vue.js template and script. It shows basic range slider implementation.

```vue
<template>
    <Slider v-model="value" range />
</template>
<script>
    export default {
        data () {
            return {
                value: [20, 50]
            }
        }
    }
</script>
```

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

### Import ViewUI CSS via JavaScript

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

Imports the ViewUI CSS file directly into your JavaScript or Vue component. This is useful when using a module bundler like Webpack or Vite.

```javascript
import 'view-design/dist/styles/iview.css';
```

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

### View UI Modal Component: Declarative and Programmatic Usage (Vue)

Source: https://context7.com/view-design/viewui/llms.txt

Demonstrates how to use the View UI Modal component in Vue.js. It covers declarative usage within the template for custom content and programmatic usage via `$Modal.info` and `$Modal.confirm` for standard dialogs. Dependencies include Vue.js and the View UI library.

```vue
<template>
    <div>
        <!-- Declarative Modal -->
        <Modal v-model="modalVisible" title="User Details" @on-ok="handleOk" @on-cancel="handleCancel">
            <p>This is modal content with custom components</p>
            <Input v-model="userData" placeholder="Enter user data"></Input>
        </Modal>

        <Button @click="modalVisible = true">Open Modal</Button>
        <Button @click="showInfoModal">Info Modal</Button>
        <Button @click="showConfirmModal">Confirm Modal</Button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            modalVisible: false,
            userData: ''
        };
    },
    methods: {
        handleOk() {
            console.log('Modal confirmed:', this.userData);
        },
        handleCancel() {
            console.log('Modal cancelled');
        },
        showInfoModal() {
            this.$Modal.info({
                title: 'Information',
                content: 'This is an informational message',
                onOk: () => {
                    console.log('Info modal closed');
                }
            });
        },
        showConfirmModal() {
            this.$Modal.confirm({
                title: 'Confirm Action',
                content: 'Are you sure you want to proceed?',
                onOk: () => {
                    this.$Message.success('Action confirmed');
                },
                onCancel: () => {
                    this.$Message.info('Action cancelled');
                }
            });
        }
    }
}
</script>
```

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

### Vue.js Form Component with Validation and Data Binding

Source: https://context7.com/view-design/viewui/llms.txt

This Vue.js component demonstrates a complete form system using View UI components. It includes fields for username, email, password, city selection, gender, interests, and a description textarea. It features built-in validation rules for required fields, length constraints, and email format, along with submit and reset functionalities.

```vue
<template>
    <Form ref="formValidate" :model="formData" :rules="ruleValidate" :label-width="100">
        <FormItem label="Username" prop="name">
            <Input v-model="formData.name" placeholder="Enter username"></Input>
        </FormItem>

        <FormItem label="Email" prop="email">
            <Input v-model="formData.email" placeholder="Enter email"></Input>
        </FormItem>

        <FormItem label="Password" prop="password">
            <Input type="password" v-model="formData.password" placeholder="Enter password"></Input>
        </FormItem>

        <FormItem label="City" prop="city">
            <Select v-model="formData.city" placeholder="Select city">
                <Option value="ny">New York</Option>
                <Option value="london">London</Option>
                <Option value="tokyo">Tokyo</Option>
            </Select>
        </FormItem>

        <FormItem label="Gender" prop="gender">
            <RadioGroup v-model="formData.gender">
                <Radio label="male">Male</Radio>
                <Radio label="female">Female</Radio>
            </RadioGroup>
        </FormItem>

        <FormItem label="Interests" prop="interests">
            <CheckboxGroup v-model="formData.interests">
                <Checkbox label="sports">Sports</Checkbox>
                <Checkbox label="music">Music</Checkbox>
                <Checkbox label="travel">Travel</Checkbox>
            </CheckboxGroup>
        </FormItem>

        <FormItem label="Description" prop="desc">
            <Input v-model="formData.desc" type="textarea" :autosize="{minRows: 3, maxRows: 6}"></Input>
        </FormItem>

        <FormItem>
            <Button type="primary" @click="handleSubmit">Submit</Button>
            <Button @click="handleReset" style="margin-left: 8px">Reset</Button>
        </FormItem>
    </Form>
</template>

<script>
export default {
    data() {
        return {
            formData: {
                name: '',
                email: '',
                password: '',
                city: '',
                gender: '',
                interests: [],
                desc: ''
            },
            ruleValidate: {
                name: [
                    { required: true, message: 'Username is required', trigger: 'blur' },
                    { min: 3, max: 15, message: 'Length must be 3-15 characters', trigger: 'blur' }
                ],
                email: [
                    { required: true, message: 'Email is required', trigger: 'blur' },
                    { type: 'email', message: 'Invalid email format', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: 'Password is required', trigger: 'blur' },
                    { min: 6, message: 'Password must be at least 6 characters', trigger: 'blur' }
                ],
                city: [
                    { required: true, message: 'Please select a city', trigger: 'change' }
                ],
                gender: [
                    { required: true, message: 'Please select gender', trigger: 'change' }
                ]
            }
        };
    },
    methods: {
        handleSubmit() {
            this.$refs.formValidate.validate((valid) => {
                if (valid) {
                    this.$Message.success('Form validation passed!');
                    console.log('Form data:', this.formData);
                } else {
                    this.$Message.error('Form validation failed!');
                }
            });
        },
        handleReset() {
            this.$refs.formValidate.resetFields();
        }
    }
}
</script>
```

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