### Install and Configure uView Next for Vue 2 and Vue 3

Source: https://context7.com/yeloa/uview-next/llms.txt

Demonstrates how to install and globally configure the uView Next framework in your uni-app project for both Vue 3 and Vue 2 environments. This setup enables the use of uView components and utilities throughout your application.

```javascript
// main.js
import uviewNext from '@/uni_modules/uview-next';

// Vue 3 setup
import { createSSRApp } from 'vue';
export function createApp() {
    const app = createSSRApp(App);
    app.use(uviewNext);
    return { app };
}

// Vue 2 setup
import Vue from 'vue';
Vue.use(uviewNext);
```

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

### Initialize Touch Event Emulation

Source: https://github.com/yeloa/uview-next/blob/master/index.html

Initializes the TouchEmulator functionality. This is typically used in development or testing environments to simulate touch events on devices that do not natively support them, allowing for easier frontend development and debugging.

```javascript
TouchEmulator()
```

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

### u-button Component Examples for uView Next

Source: https://context7.com/yeloa/uview-next/llms.txt

Illustrates various configurations and styles for the u-button component in uView Next. This includes examples of different button types, sizes, states (loading, disabled), shapes, and the usage of icons and custom gradient colors.

```html
<template>
    <!-- Basic buttons with different types -->
    <u-button text="Default Button"></u-button>
    <u-button type="primary" text="Primary Button"></u-button>
    <u-button type="success" text="Success Button"></u-button>
    <u-button type="warning" text="Warning Button"></u-button>
    <u-button type="error" text="Error Button"></u-button>

    <!-- Button sizes -->
    <u-button type="primary" size="large" text="Large"></u-button>
    <u-button type="primary" size="normal" text="Normal"></u-button>
    <u-button type="primary" size="small" text="Small"></u-button>
    <u-button type="primary" size="mini" text="Mini"></u-button>

    <!-- Plain (outlined) buttons -->
    <u-button type="primary" plain text="Plain Button"></u-button>

    <!-- Loading state -->
    <u-button type="primary" loading loadingText="Loading..." text="Submit"></u-button>

    <!-- Disabled state -->
    <u-button type="primary" disabled text="Disabled"></u-button>

    <!-- Button with icon -->
    <u-button type="primary" icon="search" text="Search"></u-button>

    <!-- Custom gradient color -->
    <u-button color="linear-gradient(to right, #ff6034, #ee0a24)" text="Gradient"></u-button>

    <!-- Shape variants -->
    <u-button type="primary" shape="circle" text="Circle"></u-button>
    <u-button type="primary" shape="square" text="Square"></u-button>
</template>
```

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

### Video Upload Configuration with u-upload

Source: https://context7.com/yeloa/uview-next/llms.txt

Shows how to configure the u-upload component specifically for video uploads. This example sets the `accept` attribute to 'video', limits the upload to a single file (`maxCount='1'`), and specifies a maximum duration for the video. It uses the `afterVideoRead` handler for processing selected videos.

```html
<template>
    <u-upload
        :fileList="videoList"
        @afterRead="afterVideoRead"
        accept="video"
        maxCount="1"
        maxDuration="60"
    ></u-upload>
</template>
```

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

### Configure Viewport Meta Tag with CSS Cover Support

Source: https://github.com/yeloa/uview-next/blob/master/index.html

This script dynamically generates a viewport meta tag. It checks for CSS `supports` function and `env()` or `constant()` properties to determine if viewport-fit=cover should be included, optimizing for devices with notches or cutouts.

```javascript
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
document.write( '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')
```

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

### Configure and Use HTTP Client (JavaScript)

Source: https://context7.com/yeloa/uview-next/llms.txt

Configures and demonstrates the usage of a feature-rich HTTP client with request/response interceptors. It allows setting base configurations, adding authentication tokens, and handling API responses and errors. Supports all HTTP methods including GET, POST, PUT, DELETE, and file uploads.

```javascript
// Configure HTTP client in a separate file (e.g., common/http.js)
const http = uni.$u.http;

// Set base configuration
http.setConfig(config => {
    config.baseURL = 'https://api.example.com';
    config.timeout = 30000;
    config.header = {
        'Content-Type': 'application/json'
    };
    return config;
});

// Request interceptor - add auth token
http.interceptors.request.use(config => {
    const token = uni.getStorageSync('token');
    if (token) {
        config.header.Authorization = `Bearer ${token}`;
    }
    return config;
}, error => {
    return Promise.reject(error);
});

// Response interceptor - handle errors
http.interceptors.response.use(response => {
    const { data } = response;
    if (data.code === 200) {
        return data.data;
    } else if (data.code === 401) {
        uni.navigateTo({ url: '/pages/login/login' });
        return Promise.reject(data);
    }
    uni.$u.toast(data.message || 'Request failed');
    return Promise.reject(data);
}, error => {
    uni.$u.toast('Network error');
    return Promise.reject(error);
});

// Usage examples
export default {
    methods: {
        // GET request
        async fetchUsers() {
            try {
                const users = await uni.$u.http.get('/users', { page: 1, limit: 10 });
                console.log('Users:', users);
            } catch (error) {
                console.error('Error:', error);
            }
        },

        // POST request
        async createUser() {
            try {
                const result = await uni.$u.http.post('/users', {
                    name: 'John Doe',
                    email: 'john@example.com'
                });
                console.log('Created:', result);
            } catch (error) {
                console.error('Error:', error);
            }
        },

        // PUT request
        async updateUser(id) {
            try {
                const result = await uni.$u.http.put(`/users/${id}`, {
                    name: 'Jane Doe'
                });
                console.log('Updated:', result);
            } catch (error) {
                console.error('Error:', error);
            }
        },

        // DELETE request
        async deleteUser(id) {
            try {
                await uni.$u.http.delete(`/users/${id}`);
                console.log('Deleted');
            } catch (error) {
                console.error('Error:', error);
            }
        },

        // File upload
        async uploadFile(filePath) {
            try {
                const result = await uni.$u.http.upload('/upload', {
                    filePath: filePath,
                    name: 'file',
                    formData: { type: 'avatar' }
                });
                console.log('Uploaded:', result);
            } catch (error) {
                console.error('Error:', error);
            }
        }
    }
};

```

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

### Custom Slot Content Modal using u-modal

Source: https://context7.com/yeloa/uview-next/llms.txt

Demonstrates how to use slots to inject custom content into the modal body. This example includes a u-input component within the modal, allowing for user input.

```html
<template>
    <!-- Custom slot content -->
    <u-modal :show="showCustom" title="Custom Content">
        <view class="custom-content">
            <u-input v-model="inputValue" placeholder="Enter something"></u-input>
        </view>
    </u-modal>
</template>

<script>
export default {
    data() {
        return {
            inputValue: ''
        };
    }
};
</script>
```

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

### Basic Image Upload with u-upload

Source: https://context7.com/yeloa/uview-next/llms.txt

Demonstrates a basic image upload setup using the u-upload component. It configures the component to accept images, sets a maximum count, and defines event handlers for file reading and deletion. The component relies on the `afterRead` and `delete` event handlers for managing uploaded files.

```html
<template>
    <u-upload
        :fileList="imageList"
        @afterRead="afterRead"
        @delete="handleDelete"
        name="image"
        maxCount="9"
    ></u-upload>
</template>
```

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

### Page and System Information Utilities (JavaScript)

Source: https://context7.com/yeloa/uview-next/llms.txt

Offers utilities to retrieve the current page's path, access all active page instances, get the previous page instance, and detect the operating system or system information. These are useful for navigation, debugging, and adapting application behavior based on the environment.

```javascript
// Get current page path
uni.$u.page();              // "/pages/index/index"
uni.$u.pages();             // Array of all page instances
uni.$u.getHistoryPage(-1);  // Previous page instance

// Platform detection
uni.$u.os();                // "ios" or "android" or "devtools"
uni.$u.sys();               // Full system info object
```

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

### Perform Router Navigation (JavaScript)

Source: https://context7.com/yeloa/uview-next/llms.txt

Provides a simplified utility for page navigation with support for various navigation types like navigateTo, redirectTo, switchTab, reLaunch, and navigateBack. It also allows passing parameters and configuring animation effects. Includes an example of route interception for conditional navigation.

```javascript
// Simple navigation
uni.$u.route('/pages/user/profile');

// Navigation with parameters
uni.$u.route('/pages/product/detail', { id: 123, name: 'iPhone' });

// Navigation with full options
uni.$u.route({
    type: 'navigateTo',  // navigateTo, redirectTo, switchTab, reLaunch, navigateBack
    url: '/pages/order/list',
    params: { status: 'pending' },
    animationType: 'slide-in-right',  // APP only
    animationDuration: 300
});

// Redirect (replace current page)
uni.$u.route({
    type: 'redirectTo',
    url: '/pages/login/login'
});

// Switch to tab page
uni.$u.route({
    type: 'switchTab',
    url: '/pages/home/index'
});

// Navigate back
uni.$u.route({
    type: 'navigateBack',
    delta: 1  // Number of pages to go back
});

// Relaunch app
uni.$u.route({
    type: 'reLaunch',
    url: '/pages/index/index'
});

// Route interception
uni.$u.routeIntercept = (config, resolve) => {
    const token = uni.getStorageSync('token');
    const protectedPages = ['/pages/user/profile', '/pages/order/list'];

    if (protectedPages.includes(config.url) && !token) {
        uni.$u.toast('Please login first');
        uni.$u.route('/pages/login/login');
        resolve(false);  // Block navigation
    } else {
        resolve(true);  // Allow navigation
    }
};

```

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

### Custom Upload Button Styling with u-upload

Source: https://context7.com/yeloa/uview-next/llms.txt

Demonstrates how to customize the appearance and text of the upload button using u-upload. This example sets custom width, height, upload icon, icon color, and button text to create a more integrated user experience. The `afterRead` handler is used to process the files selected via the custom button.

```html
<template>
    <u-upload
        :fileList="customList"
        @afterRead="afterRead"
        uploadIcon="plus"
        uploadIconColor="#3c9cff"
        uploadText="Add Photo"
        width="100"
        height="100"
    ></u-upload>
</template>
```

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

### Calendar Component Usage (Vue)

Source: https://context7.com/yeloa/uview-next/llms.txt

Demonstrates the usage of the u-calendar component for single, multiple, and range date selections. It includes examples of basic configuration, custom date formatting, and event handling for selection confirmation and closing the calendar.

```html
<template>
    <!-- Single date selection -->
    <u-button @click="showSingle = true" text="Select Date"></u-button>
    <u-calendar
        :show="showSingle"
        mode="single"
        @confirm="onSingleConfirm"
        @close="showSingle = false"
    ></u-calendar>

    <!-- Date range selection -->
    <u-button @click="showRange = true" text="Select Range"></u-button>
    <u-calendar
        :show="showRange"
        mode="range"
        startText="Check-in"
        endText="Check-out"
        @confirm="onRangeConfirm"
        @close="showRange = false"
    ></u-calendar>

    <!-- Multiple date selection -->
    <u-button @click="showMultiple = true" text="Select Multiple"></u-button>
    <u-calendar
        :show="showMultiple"
        mode="multiple"
        maxCount="5"
        @confirm="onMultipleConfirm"
        @close="showMultiple = false"
    ></u-calendar>

    <!-- With custom formatter -->
    <u-calendar
        :show="showCustom"
        mode="single"
        :formatter="dateFormatter"
        @confirm="onConfirm"
        @close="showCustom = false"
    ></u-calendar>
</template>

<script>
export default {
    data() {
        return {
            showSingle: false,
            showRange: false,
            showMultiple: false,
            showCustom: false,
            selectedDate: '',
            dateRange: ''
        };
    },
    methods: {
        onSingleConfirm(date) {
            this.selectedDate = date;
            this.showSingle = false;
            console.log('Selected date:', date);
        },

        onRangeConfirm(dates) {
            this.dateRange = `${dates[0]} - ${dates[dates.length - 1]}`;
            this.showRange = false;
            console.log('Date range:', dates);
        },

        onMultipleConfirm(dates) {
            console.log('Selected dates:', dates);
            this.showMultiple = false;
        },

        dateFormatter(day) {
            const today = new Date();
            const currentMonth = today.getMonth() + 1;
            const currentDate = today.getDate();

            // Mark today
            if (day.month === currentMonth && day.day === currentDate) {
                day.bottomInfo = 'Today';
                day.dot = true;
            }

            // Mark holidays
            if (day.month === 1 && day.day === 1) {
                day.bottomInfo = 'New Year';
                day.topInfo = 'Holiday';
            }

            // Disable weekends
            const date = new Date(day.year, day.month - 1, day.day);
            if (date.getDay() === 0 || date.getDay() === 6) {
                day.disabled = true;
            }

            return day;
        }
    }
};
</script>
```

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

### Nested Property Access and Modification (JavaScript)

Source: https://context7.com/yeloa/uview-next/llms.txt

Provides functions to safely get and set properties within nested JavaScript objects using dot notation strings. This simplifies accessing deeply nested data and modifying it without needing to check for the existence of intermediate properties.

```javascript
// Get/set nested properties
const obj = { user: { profile: { name: 'John' } } };
uni.$u.getProperty(obj, 'user.profile.name');           // "John"
uni.$u.setProperty(obj, 'user.profile.age', 25);        // Sets nested property
```

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

### u-input Component with Icons

Source: https://context7.com/yeloa/uview-next/llms.txt

Shows how to add prefix and suffix icons to the u-input component to provide visual cues or actions related to the input field.

```html
<template>
    <!-- Input with icons -->
    <u-input v-model="username" prefixIcon="account" placeholder="Username"></u-input>
    <u-input v-model="email" suffixIcon="email" placeholder="Email"></u-input>
</template>
```

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

### Basic u-input Component Usage

Source: https://context7.com/yeloa/uview-next/llms.txt

Demonstrates the fundamental usage of the u-input component for capturing text input. It utilizes v-model for data binding and a placeholder for user guidance.

```html
<template>
    <!-- Basic input -->
    <u-input v-model="value" placeholder="Enter text"></u-input>
</template>
```

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

### Unit and Style Conversion Utilities (JavaScript)

Source: https://context7.com/yeloa/uview-next/llms.txt

Includes functions to add CSS units to numbers, convert various unit formats (like rpx) to pixels, and transform styles between object and string formats. These are useful for dynamic styling and ensuring consistent unit handling in UI development.

```javascript
// Add CSS unit
uni.$u.addUnit(100);        // "100px"
uni.$u.addUnit('100rpx');   // "100rpx" (unchanged)
uni.$u.addUnit('auto');     // "auto" (unchanged)

// Convert px values
uni.$u.getPx('100rpx');     // Converted px value
uni.$u.getPx(100);          // 100
uni.$u.getPx(100, true);    // "100px" (with unit)

// Style conversion (object <-> string)
uni.$u.addStyle('color: red; font-size: 14px', 'object');
// Result: { color: 'red', 'font-size': '14px' }

uni.$u.addStyle({ color: 'red', fontSize: '14px' }, 'string');
// Result: "color:red;font-size:14px;"
```

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

### Image Compression Configuration with u-upload

Source: https://context7.com/yeloa/uview-next/llms.txt

Shows how to enable image compression directly within the u-upload component. The `compressImage` prop is used to specify compression quality and target width, reducing file size before upload. The `afterRead` handler is responsible for processing the compressed image files.

```html
<template>
    <u-upload
        :fileList="compressedList"
        @afterRead="afterRead"
        :compressImage="{ quality: 60, compressedWidth: 800 }"
    ></u-upload>
</template>
```

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

### HTTP Request (uni.$u.http)

Source: https://context7.com/yeloa/uview-next/llms.txt

A comprehensive HTTP client for making requests with support for interceptors, configuration, and various HTTP methods.

```APIDOC
## HTTP Request (uni.$u.http)

### Description
A feature-rich HTTP client with request/response interceptors, automatic configuration merging, and support for all HTTP methods.

### Configuration

Configure the HTTP client by setting `baseURL`, `timeout`, and `header`.

```javascript
const http = uni.$u.http;

http.setConfig(config => {
    config.baseURL = 'https://api.example.com';
    config.timeout = 30000;
    config.header = {
        'Content-Type': 'application/json'
    };
    return config;
});
```

### Interceptors

#### Request Interceptor
Used to modify request configurations before they are sent, such as adding authentication tokens.

```javascript
http.interceptors.request.use(config => {
    const token = uni.getStorageSync('token');
    if (token) {
        config.header.Authorization = `Bearer ${token}`;
    }
    return config;
}, error => {
    return Promise.reject(error);
});
```

#### Response Interceptor
Used to handle responses, including success data, authentication errors, and general request failures.

```javascript
http.interceptors.response.use(response => {
    const { data } = response;
    if (data.code === 200) {
        return data.data;
    } else if (data.code === 401) {
        uni.navigateTo({ url: '/pages/login/login' });
        return Promise.reject(data);
    }
    uni.$u.toast(data.message || 'Request failed');
    return Promise.reject(data);
}, error => {
    uni.$u.toast('Network error');
    return Promise.reject(error);
});
```

### Usage Examples

#### GET Request

```javascript
// GET request
async fetchUsers() {
    try {
        const users = await uni.$u.http.get('/users', { page: 1, limit: 10 });
        console.log('Users:', users);
    } catch (error) {
        console.error('Error:', error);
    }
}
```

#### POST Request

```javascript
// POST request
async createUser() {
    try {
        const result = await uni.$u.http.post('/users', {
            name: 'John Doe',
            email: 'john@example.com'
        });
        console.log('Created:', result);
    } catch (error) {
        console.error('Error:', error);
    }
}
```

#### PUT Request

```javascript
// PUT request
async updateUser(id) {
    try {
        const result = await uni.$u.http.put(`/users/${id}`, {
            name: 'Jane Doe'
        });
        console.log('Updated:', result);
    } catch (error) {
        console.error('Error:', error);
    }
}
```

#### DELETE Request

```javascript
// DELETE request
async deleteUser(id) {
    try {
        await uni.$u.http.delete(`/users/${id}`);
        console.log('Deleted');
    } catch (error) {
        console.error('Error:', error);
    }
}
```

#### File Upload

```javascript
// File upload
async uploadFile(filePath) {
    try {
        const result = await uni.$u.http.upload('/upload', {
            filePath: filePath,
            name: 'file',
            formData: { type: 'avatar' }
        });
        console.log('Uploaded:', result);
    } catch (error) {
        console.error('Error:', error);
    }
}
```
```

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

### u-swiper with Custom Data Key

Source: https://context7.com/yeloa/uview-next/llms.txt

Demonstrates how to use a custom key name when the input list for u-swiper contains objects instead of simple image URLs. This is useful for mapping specific properties (e.g., 'image') from complex data structures.

```html
<template>
    <!-- With custom key -->
    <u-swiper
        :list="customList"
        keyName="image"
        @click="onSwiperClick"
    ></u-swiper>
</template>

<script>
export default {
    data() {
        return {
            customList: [
                { id: 1, image: 'https://example.com/banner1.jpg', title: 'Banner 1' },
                { id: 2, image: 'https://example.com/banner2.jpg', title: 'Banner 2' },
                { id: 3, image: 'https://example.com/banner3.jpg', title: 'Banner 3' }
            ]
        };
    },
    methods: {
        onSwiperClick(index) {
            console.log('Clicked slide:', index);
        }
    }
};
</script>
```

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

### u-input Component with Different Input Types

Source: https://context7.com/yeloa/uview-next/llms.txt

Shows how to configure the u-input component for specific input types like numbers, ID cards, and decimal amounts. This enhances user experience and data validation.

```html
<template>
    <!-- Input types -->
    <u-input v-model="phone" type="number" placeholder="Phone number"></u-input>
    <u-input v-model="idCard" type="idcard" placeholder="ID Card"></u-input>
    <u-input v-model="amount" type="digit" placeholder="Amount with decimals"></u-input>
</template>
```

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

### Basic Alert Modal using u-modal

Source: https://context7.com/yeloa/uview-next/llms.txt

Demonstrates a simple alert modal that displays a message and closes when confirmed. It uses the 'show', 'title', and 'content' props, and listens for the 'confirm' event.

```html
<template>
    <!-- Basic alert modal -->
    <u-modal
        :show="showAlert"
        title="Alert"
        content="This is an alert message"
        @confirm="showAlert = false"
    ></u-modal>
</template>
```

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

### u-input Component for Password Input

Source: https://context7.com/yeloa/uview-next/llms.txt

Illustrates the use of the u-input component for password fields, including the built-in functionality to toggle password visibility.

```html
<template>
    <!-- Password input with toggle -->
    <u-input v-model="password" password placeholder="Enter password"></u-input>
</template>
```

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

### Color Conversion Utilities (JavaScript)

Source: https://context7.com/yeloa/uview-next/llms.txt

Includes functions for converting colors between different formats, such as HEX to RGB, RGB to HEX, and HEX to RGBA with an alpha value. It also offers a function to generate a gradient of colors between two specified colors.

```javascript
// Color utilities
uni.$u.hexToRgb('#ff0000');                    // "rgb(255, 0, 0)"
uni.$u.rgbToHex('rgb(255, 0, 0)');             // "#ff0000"
uni.$u.colorToRgba('#ff0000', 0.5);            // "rgba(255, 0, 0, 0.5)"
uni.$u.colorGradient('#ff0000', '#0000ff', 5); // Array of gradient colors
```

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

### u-input Component with Border Styles

Source: https://context7.com/yeloa/uview-next/llms.txt

Explains the different border styles available for the u-input component, including 'surround', 'bottom', and 'none', to control the visual appearance of the input field.

```html
<template>
    <!-- Border styles -->
    <u-input v-model="text1" border="surround" placeholder="Surround border"></u-input>
    <u-input v-model="text2" border="bottom" placeholder="Bottom border"></u-input>
    <u-input v-model="text3" border="none" placeholder="No border"></u-input>
</template>
```

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

### Router Navigation (uni.$u.route)

Source: https://context7.com/yeloa/uview-next/llms.txt

A simplified routing utility for page navigation with support for various navigation types and interception.

```APIDOC
## Router Navigation (uni.$u.route)

### Description
A simplified routing utility with navigation interception support for cleaner page navigation code.

### Basic Navigation

Navigate to a specified page.

```javascript
// Simple navigation
uni.$u.route('/pages/user/profile');
```

### Navigation with Parameters

Navigate to a page and pass query parameters.

```javascript
// Navigation with parameters
uni.$u.route('/pages/product/detail', { id: 123, name: 'iPhone' });
```

### Navigation with Full Options

Navigate using a configuration object to specify navigation type, URL, parameters, and animation.

```javascript
// Navigation with full options
uni.$u.route({
    type: 'navigateTo',  // navigateTo, redirectTo, switchTab, reLaunch, navigateBack
    url: '/pages/order/list',
    params: { status: 'pending' },
    animationType: 'slide-in-right',  // APP only
    animationDuration: 300
});
```

### Specific Navigation Types

#### Redirect To

Replace the current page with the new page.

```javascript
// Redirect (replace current page)
uni.$u.route({
    type: 'redirectTo',
    url: '/pages/login/login'
});
```

#### Switch Tab

Navigate to a tab bar page.

```javascript
// Switch to tab page
uni.$u.route({
    type: 'switchTab',
    url: '/pages/home/index'
});
```

#### Navigate Back

Go back to a previous page.

```javascript
// Navigate back
uni.$u.route({
    type: 'navigateBack',
    delta: 1  // Number of pages to go back
});
```

#### ReLaunch

Close all existing pages and open the specified page.

```javascript
// Relaunch app
uni.$u.route({
    type: 'reLaunch',
    url: '/pages/index/index'
});
```

### Route Interception

Intercept navigation requests to perform checks or modifications before navigation occurs.

```javascript
uni.$u.routeIntercept = (config, resolve) => {
    const token = uni.getStorageSync('token');
    const protectedPages = ['/pages/user/profile', '/pages/order/list'];

    if (protectedPages.includes(config.url) && !token) {
        uni.$u.toast('Please login first');
        uni.$u.route('/pages/login/login');
        resolve(false);  // Block navigation
    } else {
        resolve(true);  // Allow navigation
    }
};
```
```

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

### Handling File Uploads and Server Communication (Vue.js)

Source: https://context7.com/yeloa/uview-next/llms.txt

Provides the Vue.js script for handling file uploads initiated by the u-upload component. It includes methods for processing files after they are read (`afterRead`), uploading them to a server using `uni.uploadFile`, and updating the UI based on upload status (success or failure). Error handling for the upload process is also included.

```javascript
export default {
    data() {
        return {
            imageList: [],
            videoList: [],
            fileList: [],
            customList: [],
            compressedList: []
        };
    },
    methods: {
        afterRead(event) {
            const { file } = event;
            const fileList = Array.isArray(file) ? file : [file];

            fileList.forEach(item => {
                this.imageList.push({
                    url: item.url,
                    status: 'uploading',
                    message: 'Uploading...'
                });
            });

            // Upload to server
            this.uploadToServer(fileList);
        },

        async uploadToServer(files) {
            for (let i = 0; i < files.length; i++) {
                try {
                    const result = await uni.uploadFile({
                        url: 'https://api.example.com/upload',
                        filePath: files[i].url,
                        name: 'file',
                        header: {
                            Authorization: `Bearer ${uni.getStorageSync('token')}`
                        }
                    });

                    const data = JSON.parse(result.data);
                    const index = this.imageList.length - files.length + i;
                    this.imageList[index].status = 'success';
                    this.imageList[index].url = data.url;
                } catch (error) {
                    const index = this.imageList.length - files.length + i;
                    this.imageList[index].status = 'failed';
                    this.imageList[index].message = 'Upload failed';
                }
            }
        },

        handleDelete(event) {
            this.imageList.splice(event.index, 1);
        }
    }
};
```

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

### u-input Component Shape Variants

Source: https://context7.com/yeloa/uview-next/llms.txt

Demonstrates how to apply different shape variants, such as 'circle', to the u-input component for distinct visual styling.

```html
<template>
    <!-- Shape variants -->
    <u-input v-model="text4" shape="circle" placeholder="Circle shape"></u-input>
</template>
```

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

### Tabs Component Usage (Vue)

Source: https://context7.com/yeloa/uview-next/llms.txt

Illustrates the implementation of the u-tabs component for various use cases, including basic tab navigation, scrollable tabs, custom styling, and tabs with badges. It shows how to manage the active tab and handle click events.

```html
<template>
    <!-- Basic tabs -->
    <u-tabs :list="tabList" @click="onTabClick"></u-tabs>

    <!-- Scrollable tabs -->
    <u-tabs
        :list="scrollTabList"
        :scrollable="true"
        @click="onTabClick"
    ></u-tabs>

    <!-- Custom styled tabs -->
    <u-tabs
        :list="tabList"
        lineColor="#ff6600"
        activeColor="#ff6600"
        inactiveColor="#999"
        lineWidth="40"
        lineHeight="3"
        @click="onTabClick"
    ></u-tabs>

    <!-- Tabs with badge -->
    <u-tabs :list="badgeTabList" @click="onTabClick"></u-tabs>

    <!-- Controlled current tab -->
    <u-tabs
        :list="tabList"
        :current="currentTab"
        @click="onTabClick"
    ></u-tabs>
</template>

<script>
export default {
    data() {
        return {
            currentTab: 0,
            tabList: [
                { name: 'All' },
                { name: 'Pending' },
                { name: 'Shipped' },
                { name: 'Completed' }
            ],
            scrollTabList: [
                { name: 'Tab 1' },
                { name: 'Tab 2' },
                { name: 'Tab 3' },
                { name: 'Tab 4' },
                { name: 'Tab 5' },
                { name: 'Tab 6' },
                { name: 'Tab 7' },
                { name: 'Tab 8' }
            ],
            badgeTabList: [
                { name: 'Messages', badge: { value: 5 } },
                { name: 'Notifications', badge: { value: 99, max: 99 } },
                { name: 'Settings', badge: { isDot: true } }
            ]
        };
    },
    methods: {
        onTabClick(item) {
            this.currentTab = item.index;
            console.log('Tab clicked:', item);
        }
    }
};
</script>
```

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

### u-input Component with Clearable Functionality

Source: https://context7.com/yeloa/uview-next/llms.txt

Demonstrates how to enable a clear button on the u-input component, allowing users to easily remove input text.

```html
<template>
    <!-- Clearable input -->
    <u-input v-model="search" clearable placeholder="Clearable input"></u-input>
</template>
```

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

### Multi-File Type Upload with u-upload

Source: https://context7.com/yeloa/uview-next/llms.txt

Illustrates the u-upload component's capability to handle multiple file types, including specific document extensions. The `accept` attribute is set to 'all', and the `extension` attribute is used to filter allowed file types like PDF and DOC. The `afterFileRead` handler manages the processing of these diverse files.

```html
<template>
    <u-upload
        :fileList="fileList"
        @afterRead="afterFileRead"
        accept="all"
        :extension="['.pdf', '.doc', '.docx']"
    ></u-upload>
</template>
```

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

### Async Close Modal using u-modal

Source: https://context7.com/yeloa/uview-next/llms.txt

Illustrates a modal that supports asynchronous closing after an operation completes. The 'asyncClose' prop is used, and the 'confirm' event handler simulates an async task before closing the modal and showing a toast.

```html
<template>
    <!-- Async close modal -->
    <u-modal
        :show="showAsync"
        title="Processing"
        content="Click confirm to process"
        showCancelButton
        asyncClose
        @confirm="handleAsyncConfirm"
        @cancel="showAsync = false"
    ></u-modal>
</template>

<script>
export default {
    methods: {
        async handleAsyncConfirm() {
            // Simulate async operation
            await uni.$u.sleep(2000);
            this.showAsync = false;
            uni.$u.toast('Operation completed');
        }
    }
};
</script>
```

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

### Styled Modal using u-modal

Source: https://context7.com/yeloa/uview-next/llms.txt

Presents a modal with custom styling applied to its appearance, including colors for confirm and cancel buttons, border-radius for buttons and the modal itself, and a specific width.

```html
<template>
    <!-- Styled modal -->
    <u-modal
        :show="showStyled"
        title="Styled Modal"
        content="Custom colors and shapes"
        confirmColor="#07c160"
        confirmBgColor="#e8f5e9"
        cancelBgColor="#ffebee"
        buttonRound="8px"
        width="300px"
        round="12px"
    ></u-modal>
</template>
```

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

### u-input Component with Custom Formatting

Source: https://context7.com/yeloa/uview-next/llms.txt

Shows how to use a custom formatter function with the u-input component to automatically format user input, such as phone numbers.

```html
<template>
    <!-- Custom formatter -->
    <u-input v-model="formatted" :formatter="formatPhone" placeholder="Phone format"></u-input>
</template>

<script>
export default {
    data() {
        return {
            formatted: ''
        };
    },
    methods: {
        formatPhone(value) {
            // Format as: 123-4567-8901
            return value.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3');
        }
    }
};
</script>
```

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

### u-swiper with Indicators and Autoplay

Source: https://context7.com/yeloa/uview-next/llms.txt

Configures the u-swiper component to display pagination indicators (lines) and enable automatic playback of slides. It also supports circular mode for continuous looping.

```html
<template>
    <!-- With indicators -->
    <u-swiper
        :list="imageList"
        indicator
        indicatorMode="line"
        circular
        autoplay
    ></u-swiper>
</template>

<script>
export default {
    data() {
        return {
            imageList: [
                'https://example.com/image1.jpg',
                'https://example.com/image2.jpg',
                'https://example.com/image3.jpg'
            ]
        };
    }
};
</script>
```

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

### URL Query Parameter Generation (JavaScript)

Source: https://context7.com/yeloa/uview-next/llms.txt

A utility function to easily construct query parameter strings for URLs from JavaScript objects. It supports basic key-value pairs, arrays, and options to include or exclude the leading question mark, and use bracket notation for array parameters.

```javascript
// Query params
uni.$u.queryParams({ a: 1, b: 2 });                    // "?a=1&b=2"
uni.$u.queryParams({ a: 1, b: 2 }, false);             // "a=1&b=2"
uni.$u.queryParams({ ids: [1, 2, 3] }, true, 'brackets'); // "?ids[]=1&ids[]=2&ids[]=3"
```

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

### u-swiper with Custom Height, Interval, and Duration

Source: https://context7.com/yeloa/uview-next/llms.txt

Allows customization of the u-swiper component's visual and playback behavior, including setting a fixed height, adjusting the auto-play interval, and controlling the transition duration between slides.

```html
<template>
    <!-- Custom height and interval -->
    <u-swiper
        :list="imageList"
        height="400"
        :interval="5000"
        :duration="800"
        autoplay
    ></u-swiper>
</template>

<script>
export default {
    data() {
        return {
            imageList: [
                'https://example.com/image1.jpg',
                'https://example.com/image2.jpg',
                'https://example.com/image3.jpg'
            ]
        };
    }
};
</script>
```

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

### Price Formatting Utility (JavaScript)

Source: https://context7.com/yeloa/uview-next/llms.txt

Formats numerical values into currency strings with specified decimal places and custom thousand/decimal separators. This function is ideal for displaying prices and financial data in a user-friendly and localized format.

```javascript
// Price formatting
uni.$u.priceFormat(1234567.89, 2);            // "1,234,567.89"
uni.$u.priceFormat(1234567.89, 2, '.', ',');  // "1,234,567.89"
```

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

### Basic u-swiper Image Carousel

Source: https://context7.com/yeloa/uview-next/llms.txt

Demonstrates the fundamental usage of the u-swiper component to display a list of images in a carousel format. It accepts an array of image URLs and handles click events on individual slides.

```html
<template>
    <!-- Basic image swiper -->
    <u-swiper :list="imageList" @click="onSwiperClick"></u-swiper>
</template>

<script>
export default {
    data() {
        return {
            imageList: [
                'https://example.com/image1.jpg',
                'https://example.com/image2.jpg',
                'https://example.com/image3.jpg'
            ]
        };
    },
    methods: {
        onSwiperClick(index) {
            console.log('Clicked slide:', index);
        }
    }
};
</script>
```

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

### Asynchronous Delay and String Trimming (JavaScript)

Source: https://context7.com/yeloa/uview-next/llms.txt

Provides an asynchronous sleep function to pause execution for a specified duration, useful for timing operations or simulating network latency. Also includes a trim function for removing whitespace from strings, with options to trim from the left, right, or both sides.

```javascript
// Sleep/delay
await uni.$u.sleep(1000);   // Pause for 1 second

// Trim strings
uni.$u.trim('  hello  ');           // "hello" (both sides)
uni.$u.trim('  hello  ', 'left');   // "hello  "
uni.$u.trim('  hello  ', 'right');  // "  hello"
uni.$u.trim('  hello  ', 'all');    // "hello" (all spaces)
```

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

### Vue.js Form Template and Script with u-form

Source: https://context7.com/yeloa/uview-next/llms.txt

This snippet demonstrates the structure of a Vue.js template using the u-form component for creating a form with various input fields and validation rules. It includes the corresponding script section for data management, rule definition, and method implementations for form submission and reset.

```html
<template>
    <u-form :model="formData" :rules="rules" ref="form" labelWidth="80">
        <u-form-item label="Name" prop="name" required>
            <u-input v-model="formData.name" placeholder="Enter name" border="none"></u-input>
        </u-form-item>

        <u-form-item label="Email" prop="email">
            <u-input v-model="formData.email" placeholder="Enter email" border="none"></u-input>
        </u-form-item>

        <u-form-item label="Phone" prop="phone">
            <u-input v-model="formData.phone" type="number" placeholder="Enter phone" border="none"></u-input>
        </u-form-item>

        <u-form-item label="Gender" prop="gender" @click="showGenderPicker = true">
            <u-input v-model="formData.gender" disabled disabledColor="#fff" placeholder="Select gender" border="none"></u-input>
            <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>

        <u-button type="primary" text="Submit" @click="submitForm"></u-button>
        <u-button text="Reset" @click="resetForm"></u-button>
    </u-form>
</template>

<script>
export default {
    data() {
        return {
            formData: {
                name: '',
                email: '',
                phone: '',
                gender: ''
            },
            rules: {
                name: [
                    { required: true, message: 'Name is required', trigger: ['blur', 'change'] },
                    { min: 2, max: 20, message: 'Name must be 2-20 characters', trigger: 'blur' },
                    {
                        validator: (rule, value, callback) => {
                            return uni.$u.test.chinese(value);
                        },
                        message: 'Name must be Chinese characters',
                        trigger: ['change', 'blur']
                    }
                ],
                email: [
                    { required: true, message: 'Email is required', trigger: 'blur' },
                    {
                        validator: (rule, value, callback) => {
                            return uni.$u.test.email(value);
                        },
                        message: 'Invalid email format',
                        trigger: 'blur'
                    }
                ],
                phone: [
                    { required: true, message: 'Phone is required', trigger: 'blur' },
                    {
                        validator: (rule, value, callback) => {
                            return uni.$u.test.mobile(value);
                        },
                        message: 'Invalid phone number',
                        trigger: 'blur'
                    }
                ],
                gender: {
                    required: true,
                    message: 'Please select gender',
                    trigger: 'change'
                }
            }
        };
    },
    onReady() {
        // Set rules for WeChat mini-program compatibility
        this.$refs.form.setRules(this.rules);
    },
    methods: {
        submitForm() {
            this.$refs.form.validate()
                .then(res => {
                    console.log('Form data:', this.formData);
                    uni.$u.toast('Validation passed');
                })
                .catch(errors => {
                    console.log('Validation errors:', errors);
                    uni.$u.toast(errors[0].message);
                });
        },
        resetForm() {
            this.$refs.form.resetFields();
            this.$refs.form.clearValidate();
        }
    }
};
</script>
```

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

### u-input Component Disabled and Readonly States

Source: https://context7.com/yeloa/uview-next/llms.txt

Illustrates how to set the u-input component to disabled or readonly states, preventing user interaction or modification of the input value.

```html
<template>
    <!-- Disabled and readonly -->
    <u-input v-model="disabled" disabled placeholder="Disabled input"></u-input>
    <u-input v-model="readonly" readonly placeholder="Readonly input"></u-input>
</template>
```

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

### Confirm Modal with Cancel Button using u-modal

Source: https://context7.com/yeloa/uview-next/llms.txt

Shows a confirmation modal with both confirm and cancel buttons. It utilizes the 'showCancelButton' prop and handles both 'confirm' and 'cancel' events for user interaction.

```html
<template>
    <!-- Confirm modal with cancel button -->
    <u-modal
        :show="showConfirm"
        title="Confirm"
        content="Are you sure you want to delete?"
        showCancelButton
        @confirm="handleConfirm"
        @cancel="showConfirm = false"
    ></u-modal>
</template>

<script>
export default {
    methods: {
        handleConfirm() {
            console.log('Confirmed');
            this.showConfirm = false;
        }
    }
};
</script>
```

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

### ID Generation and Randomization Utilities (JavaScript)

Source: https://context7.com/yeloa/uview-next/llms.txt

Offers functions to generate universally unique identifiers (UUIDs) with customizable lengths and prefixes, generate random numbers within a specified range, and shuffle array elements randomly. These are helpful for creating unique keys, randomizing data, and ensuring variety in applications.

```javascript
// Generate UUID
uni.$u.guid();              // "u1234567890abcdef..." (32 chars, starts with 'u')
uni.$u.guid(16);            // 16-character UUID
uni.$u.guid(32, false);     // Without 'u' prefix

// Random number in range
uni.$u.random(1, 100);      // Random number between 1 and 100

// Shuffle array
uni.$u.randomArray([1, 2, 3, 4, 5]);  // Randomly shuffled array
```

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

### Debounce and Throttle Functions (JavaScript)

Source: https://context7.com/yeloa/uview-next/llms.txt

Implements debounce and throttle utilities to control the rate at which functions are executed. Debounce delays execution until after a certain time has passed without calls, while throttle ensures a function is called at most once within a specified interval.

```javascript
// Debounce and throttle
const debouncedFn = uni.$u.debounce(() => console.log('debounced'), 300);
const throttledFn = uni.$u.throttle(() => console.log('throttled'), 300);
```

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

### Toast Notification Shortcut (JavaScript)

Source: https://context7.com/yeloa/uview-next/llms.txt

Provides a convenient shortcut function for displaying toast messages to the user. It allows for simple text messages or more customized toasts with options for icons and duration.

```javascript
// Toast shortcut
uni.$u.toast('Message displayed');
uni.$u.toast('Success', { icon: 'success', duration: 2000 });
```

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

### u-swiper with Card Style and Custom Margins

Source: https://context7.com/yeloa/uview-next/llms.txt

Implements a card-like appearance for the u-swiper component by setting custom previous and next margins. This allows for a visually distinct carousel effect, often used for banners or featured content.

```html
<template>
    <!-- Card style swiper -->
    <u-swiper
        :list="imageList"
        previousMargin="30"
        nextMargin="30"
        circular
        @change="onSwiperChange"
    ></u-swiper>
</template>

<script>
export default {
    data() {
        return {
            imageList: [
                'https://example.com/image1.jpg',
                'https://example.com/image2.jpg',
                'https://example.com/image3.jpg'
            ]
        };
    },
    methods: {
        onSwiperChange(index) {
            console.log('Current slide:', index);
        }
    }
};
</script>
```