### GET Request

Source: https://github.com/climblee/uv-ui/blob/master/_autodocs/api-reference/http-request.md

Use the `get` method for simple GET requests. It accepts a URL and optional `GetOptions` for additional configuration.

```javascript
http.get(url: string, options?: GetOptions): Promise<Response>
```

```javascript
// Simple GET
uni.$uv.http.get('/api/users').then(response => {
  console.log('Users:', response.data);
});

// With options
uni.$uv.http.get('/api/users', {
  header: { 'Authorization': 'Bearer token' },
  timeout: 10000
}).then(response => {
  console.log('Users:', response.data);
});

// With query parameters (in URL)
uni.$uv.http.get('/api/users?page=1&limit=10').then(response => {
  console.log('Paginated users:', response.data);
});
```

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

### Complete Form Example

Source: https://github.com/climblee/uv-ui/blob/master/_autodocs/api-reference/form-component.md

This example demonstrates a complete form with various input types, validation rules, and submission/reset functionality. It includes fields for username, email, password, age, and an agreement checkbox. Use this as a template for creating complex forms.

```vue
<template>
  <view class="form-container">
    <uv-form 
      ref="myForm"
      :model="formData" 
      :rules="rules"
      labelPosition="top"
      :borderBottom="true"
    >
      <!-- Username field -->
      <uv-form-item label="Username" prop="username">
        <uv-input 
          v-model="formData.username"
          placeholder="Enter username"
          @blur="$refs.myForm.validateField('username')"
        />
      </uv-form-item>
      
      <!-- Email field -->
      <uv-form-item label="Email" prop="email">
        <uv-input 
          v-model="formData.email"
          placeholder="Enter email"
          type="email"
          @blur="$refs.myForm.validateField('email')"
        />
      </uv-form-item>
      
      <!-- Password field -->
      <uv-form-item label="Password" prop="password">
        <uv-input 
          v-model="formData.password"
          placeholder="Enter password"
          type="password"
          @blur="$refs.myForm.validateField('password')"
        />
      </uv-form-item>
      
      <!-- Confirm password -->
      <uv-form-item label="Confirm Password" prop="confirmPassword">
        <uv-input 
          v-model="formData.confirmPassword"
          placeholder="Confirm password"
          type="password"
        />
      </uv-form-item>
      
      <!-- Age field -->
      <uv-form-item label="Age" prop="age">
        <uv-input 
          v-model="formData.age"
          placeholder="Enter age"
          type="number"
        />
      </uv-form-item>
      
      <!-- Agreement checkbox -->
      <uv-form-item label="I Agree" prop="agree">
        <uv-checkbox v-model="formData.agree" />
      </uv-form-item>
    </uv-form>
    
    <!-- Buttons -->
    <view class="button-group">
      <uv-button 
        text="Submit" 
        type="primary"
        @click="handleSubmit"
        style="margin-right: 10px"
      ></uv-button>
      <uv-button 
        text="Reset" 
        type="info"
        @click="handleReset"
      ></uv-button>
    </view>
  </view>
</template>

<script>
export default {
  name: 'RegisterForm',
  data() {
    return {
      formData: {
        username: '',
        email: '',
        password: '',
        confirmPassword: '',
        age: '',
        agree: false
      },
      rules: {
        username: [
          { required: true, message: 'Username is required', trigger: 'blur' },
          { min: 3, max: 20, message: 'Username must be 3-20 characters', trigger: 'change' }
        ],
        email: [
          { required: true, message: 'Email is required', trigger: 'blur' },
          { type: 'email', message: 'Invalid email format', trigger: 'change' }
        ],
        password: [
          { required: true, message: 'Password is required', trigger: 'blur' },
          { min: 6, max: 20, message: 'Password must be 6-20 characters', trigger: 'change' }
        ],
        confirmPassword: [
          { required: true, message: 'Please confirm password', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (value && value !== this.formData.password) {
                callback(new Error('Passwords do not match'));
              } else {
                callback();
              }
            },
            trigger: 'change'
          }
        ],
        age: [
          { type: 'number', message: 'Age must be a number', trigger: 'change' },
          { min: 18, max: 100, message: 'Age must be 18-100', trigger: 'change' }
        ],
        agree: [
          { required: true, message: 'You must agree to the terms', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    async handleSubmit() {
      try {
        const valid = await this.$refs.myForm.validate();
        if (valid) {
          uni.showToast({
            title: 'Form submitted successfully',
            icon: 'success'
          });
          // Submit data to backend
          console.log('Form data:', this.formData);
        }
      } catch (error) {
        console.error('Validation failed:', error);
      }
    },
    handleReset() {
      this.$refs.myForm.resetFields();
      uni.showToast({
        title: 'Form reset',
        icon: 'none'
      });
    }
  }
}
</script>

<style scoped>
.form-container {
  padding: 20px;
}

.button-group {
  display: flex;
  margin-top: 20px;
}
</style>
```

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

### Common Validation Examples

Source: https://github.com/climblee/uv-ui/blob/master/_autodocs/api-reference/form-component.md

Provides examples of how to implement various validation rules within the `rules` object for form fields. This includes simple required fields, type checking, length and range constraints, URL validation, custom patterns, custom validator functions, and checkbox agreements.

```javascript
data() {
  return {
    formData: {
      username: '',
      email: '',
      password: '',
      age: '',
      website: '',
      agree: false
    },
    rules: {
      // Simple required field
      username: [
        { required: true, message: 'Username is required' }
      ],
      
      // Type validation
      email: [
        { required: true, message: 'Email required' },
        { type: 'email', message: 'Invalid email format' }
      ],
      
      // Length validation
      password: [
        { required: true, message: 'Password required' },
        { min: 6, max: 20, message: 'Password must be 6-20 characters' }
      ],
      
      // Number range
      age: [
        { type: 'number', message: 'Age must be a number' },
        { min: 0, max: 150, message: 'Age must be 0-150' }
      ],
      
      // URL validation
      website: [
        { type: 'url', message: 'Invalid URL' }
      ],
      
      // Custom pattern
      phone: [
        { pattern: /^1[3-9]\d{9}$/, message: 'Invalid phone number' }
      ],
      
      // Custom validator function
      confirmPassword: [
        {
          validator: (rule, value, callback) => {
            if (value !== this.formData.password) {
              callback(new Error('Passwords do not match'));
            } else {
              callback();
            }
          },
          message: 'Passwords do not match'
        }
      ],
      
      // Agreement checkbox
      agree: [
        { required: true, message: 'Must accept terms' }
      ]
    }
  }
}
```

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

### Configure HTTP Defaults

Source: https://github.com/climblee/uv-ui/blob/master/_autodocs/configuration.md

Set all HTTP request defaults, such as base URL and timeouts, once during app initialization. Avoid configuring HTTP within components to prevent redundant setups.

```javascript
// In app initialization, not in components
uni.$uv.http.setConfig(config => {
  // Set all defaults here
  return config
})

```

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

### Complete uv-vtabs Example

Source: https://github.com/climblee/uv-ui/blob/master/pages/componentsD/vtabs/all.md

This snippet shows a full implementation of the uv-vtabs component, including template structure, data handling, and conditional rendering for chained and non-chained lists. It supports both Vue 2 and Vue 3.

```vue
<template>
	<view class="content">
		<uv-vtabs 
			:chain="chain"
			:list="list"
			@change="change">
			<template v-if="chain">
				<!-- #ifdef VUE2 -->
				<template v-for="(item,index) in list">
					<!-- #endif -->
					<!-- #ifdef VUE3 -->
					<template v-for="(item,index) in list"
						:key="index">
						<!-- #endif -->
						<uv-vtabs-item :index="index">
							<view 
								class="item"
								v-for="(item2,index2) in item.childrens"
								:key="index2">
								<view class="item-title">
									<text class="text">{{item2.name}}</text>
								</view>
								<view class="item-content">
									<text class="text">{{item2.desc}}</text>
								</view>
							</view>
							<view class="gap"
								v-if="index<list.length-1">
								<uv-gap bg-color="#f1f1f1"
									height="4"></uv-gap>
							</view>
						</uv-vtabs-item>
						<!-- #ifdef VUE2 -->
						</template>
						<!-- #endif -->
						<!-- #ifdef VUE3 -->
						</template>
						<!-- #endif -->
				</template>
				<template v-else>
					<uv-vtabs-item>
						<view 
							class="item"
							v-for="(item2,index2) in list2"
							:key="index2">
							<view class="item-title">
								<text class="text">{{item2.name}}</text>
							</view>
							<view class="item-content">
								<text class="text">{{item2.desc}}</text>
							</view>
						</view>
					</uv-vtabs-item>
				</template>
		</uv-vtabs>
	</view>
</template>

<script>
	const getList = [{
		name: 'uv-ui简介',
		childrens: [{
			name: 'uv-ui简介',
			desc: '1. uv-ui最初是在uview2.x的基础上进行改进优化，支持vue3等优化，最重要的是支持单独导入直接使用，无需在main.js中进行配置。\n\n2. uv-ui来源于社区，也回归到社区，正是有一群热爱uni-app生态的同学推着它前行，而我们也一如既往的承诺，uv-ui永久开源，永远免费。但是会在下载处进行广告配置，作为开发团队的研发费用的部分来源，所以希望大家理解。'
		}]
	}, {
		name: 'uv-ui特点',
		childrens: [{
			name: '全端兼容',
			desc: 'uv-ui支持App（vue）、App（nvue）、H5、小程序、VUE2、VUE3，支持nvue原生渲染。uv-ui的组件都是多端自适应的，底层会抹平很多小程序平台的差异或bug。'
		}, {
			name: '集成工具',
			desc: 'uv-ui中的uv-ui-tools组件集成了强大的网络请求 HTTP 及常用的工具函数，无需自己再去寻找，并且直接挂载在uni上面，方便使用，只需要在mian.js中引入即可，更多工具请参考：https://www.uvui.cn/js/http.html。使用方式请参考：https://www.uvui.cn/components/setting.html。'
		}, {
			name: '主题扩展',
			desc: 'uv-ui中的uv-ui-tools组件下面的theme.scss为主题文件，直接在uni.scss中引入主题即可，可以根据自己的需求进行扩展。下面也有说明具体使用方式。使用方法请参考：https://www.uvui.cn/components/setting.html'
		}]
	}, {
		name: '更新日志',
		badge: {
			show: true,
			value: 5
		},
		childrens: [{
			name: '更新日志',
			desc: 'uv-ui的重大更新在更新日志中都有所说明，如果在开发的过程中遇到文档不完善，可以提供给我们，我们会持续完善，非常感谢大家的支持。更新日志：https://www.uvui.cn/components/changelog.html'
		}]
	}, {
		name: '设计规范',
		childrens: [{
			name: '设计规范',
			desc: '为了约束合成更多优秀的组件和模板，打造优质的体验，我们拟定了一些UI界面设计和建议。同时部分之间会有依赖，这是为了减少代码冗余的同时提高开发效率，模块化是我们的基础。如果大家有好的建议，可以提出进行改进。'
		}]
	}, {
		name: '交流反馈',
		childrens: [{
			name: '交流反馈',
			desc: 'uv-ui为采用MIT许可证的开源项目，使用完全免费。欢迎加QQ群交流反馈，一起学习，共同进步。QQ群： 549833913'
		}]
	}]
	export default {
		data() {
			return {
				list: [],
				chain: false,
				value: 0
			}
		},
		computed: {
			list2() {
				const _list = this.list[this.value]?.childrens;
				return _list ? _list : [];
			}
		},
		onReady() {
			// 模拟接口请求数据
			uni.showLoading({
				title: '加载中'
			})
			setTimeout(() => {
				this.list = getList;
				uni.hideLoading();
			}, 200)
		},
		methods: {
			change(index) {
				this.value = index;
			}
		}
	}
</script>
<style scoped
	lang="scss">
	.header {
		padding: 30rpx;
		font-size: 30rpx;
		color: #333;
	}
	.item {
		padding: 10rpx 20rpx;
		&-title {
			.text {
				font-weight: 700;
				font-size: 32rpx;
				color: #111;
			}
		}
		&-content {
			padding: 20rpx 0;
			.text {
				line-height: 48rpx;
				font-size: 30rpx;
				color: #111;
				/* #ifndef APP-NVUE */
				word-break: break-all;
				/* #endif */
			}
		}
	}
	.gap {
		padding: 0 30rpx;
	}
</style>
```

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

### http.get()

Source: https://github.com/climblee/uv-ui/blob/master/_autodocs/api-reference/http-request.md

Makes a GET request to the specified URL. Can include additional options for headers or timeouts.

```APIDOC
## http.get()

### Description
Makes a GET request to the specified URL. Can include additional options for headers or timeouts.

### Method
`http.get(url: string, options?: GetOptions): Promise<Response>`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **url** (string) - Required - Request URL
- **options** (object) - Optional - Additional request options

### Request Example
```javascript
// Simple GET
uni.$uv.http.get('/api/users').then(response => {
  console.log('Users:', response.data);
});

// With options
uni.$uv.http.get('/api/users', {
  header: { 'Authorization': 'Bearer token' },
  timeout: 10000
}).then(response => {
  console.log('Users:', response.data);
});

// With query parameters (in URL)
uni.$uv.http.get('/api/users?page=1&limit=10').then(response => {
  console.log('Paginated users:', response.data);
});
```

### Response
#### Success Response (200)
- **statusCode** (number) - HTTP status code
- **header** (object) - Response headers
- **data** (any) - Response body (parsed if dataType='json')
- **cookies** (string[]) - Response cookies
- **errMsg** (string) - Error message if applicable
- **config** (RequestConfig) - Original request config

#### Response Example
```json
{
  "statusCode": 200,
  "header": {},
  "data": {},
  "cookies": [],
  "errMsg": "",
  "config": {}
}
```
```

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

### Initialize UV UI Plugin

Source: https://github.com/climblee/uv-ui/blob/master/_autodocs/configuration.md

Initialize the UV UI plugin with optional configuration and set HTTP defaults. This should be done early in the app lifecycle.

```javascript
// main.js
import Vue from 'vue'
import App from './App'
import uvUI from '@/uni_modules/uv-ui-tools'

// Initialize plugin with optional config
Vue.use(uvUI, {
  mpShare: true  // Enable mini program sharing
})

// Now you can customize config
uni.$uv.config.unit = 'rpx'
uni.$uv.config.color['uv-primary'] = '#FF6B6B'

// Set HTTP defaults
uni.$uv.http.setConfig((config) => {
  config.baseURL = 'https://api.example.com'
  config.timeout = 30000
  return config
})

// Add request interceptor
uni.$uv.http.interceptors.request.use(config => {
  const token = uni.getStorageSync('token')
  if (token) {
    config.header['Authorization'] = `Bearer ${token}`
  }
  return config
})

// Create Vue instance
const app = new Vue({
  ...App
})

app.$mount('#app')

```

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

### Basic Usage of uv-toolbar

Source: https://github.com/climblee/uv-ui/blob/master/uni_modules/uv-toolbar/readme.md

Demonstrates the basic implementation of the uv-toolbar component with a title. This is useful for setting up a standard header for dialogs.

```vue
<uv-toolbar title="标题文字"></uv-toolbar>
```

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

### Request Constructor

Source: https://github.com/climblee/uv-ui/blob/master/_autodocs/api-reference/http-request.md

Instantiate the HTTP request client. You can use the globally configured instance or create a custom one with specific options.

```APIDOC
## Request Constructor

### Description
Instantiate the HTTP request client. You can use the globally configured instance or create a custom one with specific options.

### Method
`new Request(options?)`

### Parameters
#### Constructor Options
- **baseURL** (string) - Optional - Base URL prepended to all request URLs. Default: `''`
- **header** (object) - Optional - Default headers sent with every request. Default: `{}`
- **method** (string) - Optional - Default HTTP method (GET, POST, PUT, DELETE, etc.). Default: `'GET'`
- **dataType** (string) - Optional - Data type for response parsing. `'json'` attempts JSON.parse. Default: `'json'`
- **responseType** (string) - Optional - Response data type: `'text'` or `'arraybuffer'` (not supported on Alipay mini program). Default: `'text'`
- **timeout** (number) - Optional - Request timeout in milliseconds. Default: `60000`
- **sslVerify** (boolean) - Optional - Whether to verify SSL certificates (Android app only). Default: `true`
- **withCredentials** (boolean) - Optional - Include credentials (cookies) in cross-origin requests (H5 only). Default: `false`
- **firstIpv4** (boolean) - Optional - Prioritize IPv4 in DNS resolution (Android app only). Default: `false`
- **custom** (object) - Optional - Custom parameters passed through the request. Default: `{}`
- **validateStatus** (function) - Optional - Custom validator function that determines if response is successful. Default: `—`

### Request Example
```javascript
// Already configured globally
const http = uni.$uv.http;

// Or create a custom instance
import Request from '@/uni_modules/uv-ui-tools/libs/luch-request';
const customHttp = new Request({
  baseURL: 'https://api.example.com',
  header: {
    'Authorization': 'Bearer token',
    'Content-Type': 'application/json'
  },
  timeout: 30000
});
```
```

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

### Use Config Values

Source: https://github.com/climblee/uv-ui/blob/master/_autodocs/configuration.md

Reference theme colors and other configuration values directly from `uni.$uv.config` instead of hardcoding them. This promotes maintainability and allows for easier theme changes.

```javascript
color: uni.$uv.config.color['uv-primary']

```

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

### Set Configuration Early

Source: https://github.com/climblee/uv-ui/blob/master/_autodocs/configuration.md

Configure UV UI settings like 'unit' early in the application's lifecycle, ideally in 'App.vue' or 'main.js', to ensure consistency across the application.

```javascript
// In App.vue or main.js
beforeCreate() {
  uni.$uv.config.unit = 'rpx'
}

```

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

### Request Constructor

Source: https://github.com/climblee/uv-ui/blob/master/_autodocs/api-reference/http-request.md

Instantiates a new HTTP request client. Options can be provided to configure base URL, headers, method, and other request-specific settings.

```javascript
const http = new Request(options?)
```

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

### Using uv-icon Component

Source: https://github.com/climblee/uv-ui/blob/master/uni_modules/uv-ui/readme.md

Demonstrates how to use the uv-icon component in a Vue template. Ensure the uv-ui components are properly imported into your project.

```html
<template>
    <uv-icon name="baidu" size="30" color="#909399"></uv-icon>
</template>
```

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

### Creating a Custom HTTP Instance

Source: https://github.com/climblee/uv-ui/blob/master/_autodocs/api-reference/http-request.md

Creates a new, independent HTTP request client instance with custom configurations. Useful for setting specific base URLs, headers, or timeouts for particular sets of requests.

```javascript
import Request from '@/uni_modules/uv-ui-tools/libs/luch-request';
const customHttp = new Request({
  baseURL: 'https://api.example.com',
  header: {
    'Authorization': 'Bearer token',
    'Content-Type': 'application/json'
  },
  timeout: 30000
});
```

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

### Complete Request Lifecycle with Interceptors

Source: https://github.com/climblee/uv-ui/blob/master/_autodocs/api-reference/http-request.md

Sets up a base HTTP client with interceptors for authentication and error handling. Add request interceptors for auth and response interceptors for error handling.

```javascript
// In main.js or plugin initialization
import Request from '@/uni_modules/uv-ui-tools/libs/luch-request';

const http = new Request({
  baseURL: 'https://api.example.com',
  timeout: 30000
});

// Add request interceptor for auth
http.interceptors.request.use(
  config => {
    const token = uni.getStorageSync('auth_token');
    if (token) {
      config.header['Authorization'] = `Bearer ${token}`;
    }
    return config;
  }
);

// Add response interceptor for error handling
http.interceptors.response.use(
  response => {
    if (response.statusCode === 401) {
      // Handle token expiration
      uni.removeStorageSync('auth_token');
      uni.navigateTo({ url: '/pages/login' });
    }
    return response;
  },
  error => {
    uni.showToast({
      title: 'Network error',
      icon: 'none'
    });
    return Promise.reject(error);
  }
);

// Export for use throughout app
export default http;
```

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

### POST Request

Source: https://github.com/climblee/uv-ui/blob/master/_autodocs/api-reference/http-request.md

Use the `post` method for POST requests. It accepts a URL, optional data, and optional `PostOptions`.

```javascript
http.post(url: string, data?: any, options?: PostOptions): Promise<Response>
```

```javascript
// Simple POST
uni.$uv.http.post('/api/users', {
  name: 'Alice',
  email: 'alice@example.com'
}).then(response => {
  console.log('Created:', response.data);
});

// POST with custom headers
uni.$uv.http.post('/api/upload', formData, {
  header: { 'Content-Type': 'multipart/form-data' }
}).then(response => {
  console.log('Uploaded');
});

// POST with JSON
uni.$uv.http.post('/api/data', {
  items: [1, 2, 3],
  timestamp: Date.now()
}, {
  header: { 'Content-Type': 'application/json' }
}).then(response => {
  console.log('Data saved:', response.data);
});
```

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

### Accessing Global HTTP Instance

Source: https://github.com/climblee/uv-ui/blob/master/_autodocs/api-reference/http-request.md

Retrieves the globally configured HTTP request instance. This is the recommended way to access the HTTP client after the plugin has been initialized.

```javascript
// Already configured globally
const http = uni.$uv.http;
```

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

### PUT Request

Source: https://github.com/climblee/uv-ui/blob/master/_autodocs/api-reference/http-request.md

Use the `put` method for PUT requests. It accepts a URL, optional data, and optional `PutOptions`. Note: This method is not available on Alipay, Kuaishou, or JD mini programs.

```javascript
http.put(url: string, data?: any, options?: PutOptions): Promise<Response>
```

```javascript
// Update resource
uni.$uv.http.put('/api/users/123', {
  name: 'Alice Updated',
  email: 'newemail@example.com'
}).then(response => {
  console.log('Updated:', response.data);
});
```

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

### http.request()

Source: https://github.com/climblee/uv-ui/blob/master/_autodocs/api-reference/http-request.md

Makes a generic HTTP request with full control over configuration. Allows specifying URL, method, data, headers, and other advanced options.

```APIDOC
## http.request()

### Description
Makes a generic HTTP request with full control over configuration.

### Method
`http.request(config: RequestConfig): Promise<Response>`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **config** (object) - Required - Request configuration object

**Config Object Properties:**
- **url** (string) - Required - Request URL (appended to baseURL)
- **data** (any) - Optional - Request body data
- **method** (string) - Optional - HTTP method (default: 'GET')
- **header** (object) - Optional - Request headers (default: {})
- **responseType** (string) - Optional - Response type (default: 'text')
- **dataType** (string) - Optional - Data type for parsing (default: 'json')
- **timeout** (number) - Optional - Timeout in milliseconds (default: 60000)
- **sslVerify** (boolean) - Optional - Verify SSL (Android app) (default: true)
- **withCredentials** (boolean) - Optional - Include credentials (H5) (default: false)
- **custom** (object) - Optional - Custom parameters (default: {})
- **validateStatus** (function) - Optional - Status validation function

### Request Example
```javascript
// Basic request
uni.$uv.http.request({
  url: '/api/user',
  method: 'GET'
}).then(response => {
  console.log('User data:', response.data);
}).catch(error => {
  console.error('Request failed:', error);
});

// POST with data
uni.$uv.http.request({
  url: '/api/users',
  method: 'POST',
  data: {
    name: 'John',
    email: 'john@example.com'
  }
}).then(response => {
  console.log('Created user:', response.data);
});
```

### Response
#### Success Response (200)
- **statusCode** (number) - HTTP status code
- **header** (object) - Response headers
- **data** (any) - Response body (parsed if dataType='json')
- **cookies** (string[]) - Response cookies
- **errMsg** (string) - Error message if applicable
- **config** (RequestConfig) - Original request config

#### Response Example
```json
{
  "statusCode": 200,
  "header": {},
  "data": {},
  "cookies": [],
  "errMsg": "",
  "config": {}
}
```
```

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

### http.put()

Source: https://github.com/climblee/uv-ui/blob/master/_autodocs/api-reference/http-request.md

Makes a PUT request to the specified URL with optional data and additional request options. Not available on Alipay, Kuaishou, or JD mini programs.

```APIDOC
## http.put()

### Description
Makes a PUT request to the specified URL with optional data and additional request options. Not available on Alipay, Kuaishou, or JD mini programs.

### Method
`http.put(url: string, data?: any, options?: PutOptions): Promise<Response>`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **url** (string) - Required - Request URL
- **data** (any) - Optional - Request body data
- **options** (object) - Optional - Additional request options

### Request Example
```javascript
// Update resource
uni.$uv.http.put('/api/users/123', {
  name: 'Alice Updated',
  email: 'newemail@example.com'
}).then(response => {
  console.log('Updated:', response.data);
});
```

### Response
#### Success Response (200)
- **statusCode** (number) - HTTP status code
- **header** (object) - Response headers
- **data** (any) - Response body (parsed if dataType='json')
- **cookies** (string[]) - Response cookies
- **errMsg** (string) - Error message if applicable
- **config** (RequestConfig) - Original request config

#### Response Example
```json
{
  "statusCode": 200,
  "header": {},
  "data": {},
  "cookies": [],
  "errMsg": "",
  "config": {}
}
```
```

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

### Generic HTTP Request

Source: https://github.com/climblee/uv-ui/blob/master/_autodocs/api-reference/http-request.md

Use the `request` method for full control over HTTP request configurations. It accepts a `RequestConfig` object and returns a `Promise<Response>`.

```javascript
http.request(config: RequestConfig): Promise<Response>
```

```javascript
{
  statusCode: number,
  header: object,
  data: any,
  cookies: string[],
  errMsg: string,
  config: RequestConfig
}
```

```javascript
// Basic request
uni.$uv.http.request({
  url: '/api/user',
  method: 'GET'
}).then(response => {
  console.log('User data:', response.data);
}).catch(error => {
  console.error('Request failed:', error);
});

// POST with data
uni.$uv.http.request({
  url: '/api/users',
  method: 'POST',
  data: {
    name: 'John',
    email: 'john@example.com'
  }
}).then(response => {
  console.log('Created user:', response.data);
});
```

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

### http.setConfig()

Source: https://github.com/climblee/uv-ui/blob/master/_autodocs/api-reference/http-request.md

Dynamically sets global default configuration for HTTP requests. This allows for centralized management of settings like base URLs, headers, and validation logic.

```APIDOC
## SET CONFIGURATION

### Description
Sets global default configuration for HTTP requests dynamically using a callback function.

### Method
POST (or internal method call)

### Endpoint
N/A (Method call on http client)

### Parameters
#### Callback Function
- **callback** (function) - Required - A function that receives the current configuration object and must return the updated configuration object.
  - `config` (Config) - The current HTTP client configuration.

### Request Example
```javascript
// Set default base URL
uni.$uv.http.setConfig((config) => {
  config.baseURL = 'https://api.example.com';
  return config;
});

// Add default headers
uni.$uv.http.setConfig((config) => {
  config.header = {
    ...config.header,
    'Authorization': 'Bearer ' + getToken()
  };
  return config;
});

// Set custom validation
uni.$uv.http.setConfig((config) => {
  config.validateStatus = (statusCode) => {
    return statusCode >= 200 && statusCode < 300;
  };
  return config;
});
```

### Response
#### Success Response
void (This method does not return a value, it modifies the configuration in place.)

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

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

### http.post()

Source: https://github.com/climblee/uv-ui/blob/master/_autodocs/api-reference/http-request.md

Makes a POST request to the specified URL with optional data and additional request options.

```APIDOC
## http.post()

### Description
Makes a POST request to the specified URL with optional data and additional request options.

### Method
`http.post(url: string, data?: any, options?: PostOptions): Promise<Response>`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **url** (string) - Required - Request URL
- **data** (any) - Optional - Request body data
- **options** (object) - Optional - Additional request options

### Request Example
```javascript
// Simple POST
uni.$uv.http.post('/api/users', {
  name: 'Alice',
  email: 'alice@example.com'
}).then(response => {
  console.log('Created:', response.data);
});

// POST with custom headers
uni.$uv.http.post('/api/upload', formData, {
  header: { 'Content-Type': 'multipart/form-data' }
}).then(response => {
  console.log('Uploaded');
});

// POST with JSON
uni.$uv.http.post('/api/data', {
  items: [1, 2, 3],
  timestamp: Date.now()
}, {
  header: { 'Content-Type': 'application/json' }
}).then(response => {
  console.log('Data saved:', response.data);
});
```

### Response
#### Success Response (200)
- **statusCode** (number) - HTTP status code
- **header** (object) - Response headers
- **data** (any) - Response body (parsed if dataType='json')
- **cookies** (string[]) - Response cookies
- **errMsg** (string) - Error message if applicable
- **config** (RequestConfig) - Original request config

#### Response Example
```json
{
  "statusCode": 200,
  "header": {},
  "data": {},
  "cookies": [],
  "errMsg": "",
  "config": {}
}
```
```

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

### video()

Source: https://github.com/climblee/uv-ui/blob/master/_autodocs/api-reference/validation-functions.md

Validates that a string is a video file path by checking its extension. It supports various video formats.

```APIDOC
## video()

### Description
Validates that string is a video file path (checks extension).

### Parameters
#### Path Parameters
- **value** (string) - yes - File path or URL

### Return Type
`boolean`

### Usage Example
```javascript
uni.$uv.test.video('movie.mp4');              // true
uni.$uv.test.video('https://example.com/video.mkv');  // true
uni.$uv.test.video('audio.mp3');              // false
```

### Supported Formats
mp4, mpg, mpeg, dat, asf, avi, rm, rmvb, mov, wmv, flv, mkv, m3u8
```

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

### Parallel Requests with Promise.all

Source: https://github.com/climblee/uv-ui/blob/master/_autodocs/api-reference/http-request.md

Executes multiple independent HTTP requests concurrently using Promise.all. This is efficient for fetching related data simultaneously.

```javascript
// Multiple independent requests
Promise.all([
  uni.$uv.http.get('/api/users'),
  uni.$uv.http.get('/api/posts'),
  uni.$uv.http.get('/api/comments')
]).then(([users, posts, comments]) => {
  console.log('All data loaded:', { users, posts, comments });
}).catch(error => {
  console.error('One or more requests failed:', error);
});
```

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

### Reference Theme Types

Source: https://github.com/climblee/uv-ui/blob/master/_autodocs/configuration.md

Access predefined theme types like 'primary', 'success', etc., from `uni.$uv.config.type`. This ensures consistency with the UI library's design system.

```javascript
const types = uni.$uv.config.type

```

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

### Conditional Logging in Development

Source: https://github.com/climblee/uv-ui/blob/master/_autodocs/configuration.md

Log UV UI version information only in development environments. This helps in debugging without cluttering production builds.

```javascript
// Development only (console logs)
if (process.env.NODE_ENV === 'development') {
  console.log('uvui V' + uni.$uv.config.version)  // Shown only in dev
}

```

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

### Set Global HTTP Configuration

Source: https://github.com/climblee/uv-ui/blob/master/_autodocs/api-reference/http-request.md

Dynamically update the global default configuration for HTTP requests. This function accepts a callback that receives the current configuration and must return the updated configuration.

```javascript
uni.$uv.http.setConfig((config) => {
  config.baseURL = 'https://api.example.com';
  return config;
});
```

```javascript
uni.$uv.http.setConfig((config) => {
  config.header = {
    ...config.header,
    'Authorization': 'Bearer ' + getToken()
  };
  return config;
});
```

```javascript
uni.$uv.http.setConfig((config) => {
  config.validateStatus = (statusCode) => {
    return statusCode >= 200 && statusCode < 300;
  };
  return config;
});
```

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

### Vue Component for Color Analysis

Source: https://github.com/climblee/uv-ui/blob/master/_autodocs/api-reference/color-utilities.md

Demonstrates how to use color utilities within a Vue component to display color information and generate gradients. It converts hex to RGB and creates color stops for a gradient.

```vue
<template>
  <view class="color-analyzer">
    <view class="color-display" :style="{ backgroundColor: selectedColor }"></view>
    
    <view class="analysis">
      <view class="info-row">
        <text class="label">Hex:</text>
        <text class="value">{{ selectedColor }}</text>
      </view>
      
      <view class="info-row">
        <text class="label">RGB:</text>
        <text class="value">{{ rgbValue }}</text>
      </view>
      
      <view class="info-row">
        <text class="label">RGBA:</text>
        <text class="value">{{ rgbaValue }}</text>
      </view>
      
      <view class="info-row">
        <text class="label">Gradient (5 stops):</text>
      </view>
      <view class="gradient-row">
        <view 
          v-for="(color, index) in colorGradientStops" 
          :key="index"
          class="gradient-box"
          :style="{ backgroundColor: color }"
        ></view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedColor: '#2979ff'
    }
  },
  computed: {
    rgbValue() {
      const rgb = this.$uv.hexToRgb(this.selectedColor);
      if (typeof rgb === 'object') {
        return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
      }
      return 'Invalid color';
    },
    rgbaValue() {
      return this.$uv.colorToRgba(this.selectedColor);
    },
    colorGradientStops() {
      return this.$uv.colorGradient([
        '#FFFFFF',
        this.selectedColor,
        '#000000'
      ], 5);
    }
  },
  methods: {
    updateColor(newColor) {
      this.selectedColor = newColor;
    }
  }
}
</script>

<style scoped>
.color-analyzer {
  padding: 20px;
  max-width: 400px;
}

.color-display {
  width: 100%;
  height: 150px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.analysis {
  background: #f5f5f5;
  padding: 15px;
  border-radius: 8px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 14px;
}

.label {
  font-weight: bold;
  color: #333;
}

.value {
  color: #666;
  font-family: monospace;
}

.gradient-row {
  display: flex;
  gap: 4px;
  margin-top: 10px;
}

.gradient-box {
  flex: 1;
  height: 30px;
  border-radius: 4px;
  border: 1px solid #ddd;
}
</style>
```

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

### Add Request Interceptor - uv-ui

Source: https://github.com/climblee/uv-ui/blob/master/_autodocs/api-reference/http-request.md

Use this to add a request interceptor that runs before each request is sent. It can be used to modify request configurations, such as adding authentication tokens.

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

```javascript
uni.$uv.http.interceptors.request.use(
  config => {
    console.log(`[${config.method}] ${config.url}`);
    return config;
  }
);
```

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

### JavaScript for Accessibility Color Contrast

Source: https://github.com/climblee/uv-ui/blob/master/_autodocs/api-reference/color-utilities.md

Provides JavaScript functions to calculate color luminance and determine if two colors have sufficient contrast for accessibility. It uses a minimum contrast ratio of 4.5:1.

```javascript
// Utility to calculate color luminance for contrast ratio
function getLuminance(hex) {
  const rgb = uni.$uv.hexToRgb(hex);
  if (typeof rgb === 'object') {
    const { r, g, b } = rgb;
    return (0.299 * r + 0.587 * g + 0.114 * b) / 255;
  }
  return 0.5;
}

// Check if two colors have sufficient contrast
function hasGoodContrast(color1, color2, minRatio = 4.5) {
  const lum1 = getLuminance(color1);
  const lum2 = getLuminance(color2);
  const brighter = Math.max(lum1, lum2);
  const darker = Math.min(lum1, lum2);
  const ratio = (brighter + 0.05) / (darker + 0.05);
  return ratio >= minRatio;
}

// Usage
export default {
  computed: {
    textColor() {
      // Use white or black text depending on background luminance
      const bgLuminance = getLuminance(this.backgroundColor);
      return bgLuminance > 0.5 ? '#000000' : '#FFFFFF';
    },
    hasAccessibleContrast() {
      return hasGoodContrast(this.backgroundColor, this.textColor);
    }
  }
}
```

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

### Add Response Interceptor - uv-ui

Source: https://github.com/climblee/uv-ui/blob/master/_autodocs/api-reference/http-request.md

Use this to add a response interceptor that runs after each response is received. It's useful for handling global errors, transforming data, or redirecting users based on status codes.

```javascript
uni.$uv.http.interceptors.response.use(
  response => {
    if (response.statusCode === 401) {
      // Token expired, redirect to login
      uni.navigateTo({ url: '/pages/login' });
      return Promise.reject('Unauthorized');
    }
    return response;
  },
  error => {
    console.error('Response error:', error);
    return Promise.reject(error);
  }
);
```

```javascript
uni.$uv.http.interceptors.response.use(
  response => {
    // Assume API returns { code: 0, message: '', data: {...} }
    if (response.data && response.data.code === 0) {
      return response.data.data;  // Return only the data part
    }
    return Promise.reject(response.data.message || 'Unknown error');
  }
);
```

```javascript
uni.$uv.http.interceptors.response.use(
  response => response,
  error => {
    if (error.message.includes('timeout')) {
      uni.showToast({
        title: 'Request timeout',
        icon: 'none'
      });
    }
    return Promise.reject(error);
  }
);
```

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

### Request with Retry Logic

Source: https://github.com/climblee/uv-ui/blob/master/_autodocs/api-reference/http-request.md

Implements a function to automatically retry failed requests with exponential backoff. Useful for handling transient network issues.

```javascript
async function requestWithRetry(url, maxRetries = 3) {
  let lastError;
  for (let i = 0; i < maxRetries; i++) {
    try {
      return await uni.$uv.http.get(url);
    } catch (error) {
      lastError = error;
      if (i < maxRetries - 1) {
        await uni.$uv.sleep(1000 * (i + 1));  // Exponential backoff
      }
    }
  }
  throw lastError;
}

// Usage
requestWithRetry('/api/data').then(response => {
  console.log('Data:', response.data);
});
```

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

### image()

Source: https://github.com/climblee/uv-ui/blob/master/_autodocs/api-reference/validation-functions.md

Validates that a string is an image file path by checking its extension. It supports various image formats and ignores query parameters in URLs.

```APIDOC
## image()

### Description
Validates that string is an image file path (checks extension).

### Parameters
#### Path Parameters
- **value** (string) - yes - File path or URL

### Return Type
`boolean`

### Usage Example
```javascript
uni.$uv.test.image('photo.jpg');              // true
uni.$uv.test.image('image.png?size=200');     // true (query params ignored)
uni.$uv.test.image('https://example.com/pic.gif');  // true
uni.$uv.test.image('document.pdf');           // false
```

### Supported Formats
jpeg, jpg, gif, png, svg, webp, jfif, bmp, dpg
```

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

### Validate Video File Path

Source: https://github.com/climblee/uv-ui/blob/master/_autodocs/api-reference/validation-functions.md

Checks if a given string is a valid video file path or URL. It supports a wide range of video formats.

```javascript
uni.$uv.test.video('movie.mp4');              // true
uni.$uv.test.video('https://example.com/video.mkv');  // true
uni.$uv.test.video('audio.mp3');              // false
```