### Input Component Examples in Vue

Source: https://context7.com/wanpixiaohuolong/limeul/llms.txt

Demonstrates the various configurations of the L-Input component in Vue.js, including different input types, status indicators, icons, clear buttons, and layout options. It utilizes Vue's reactivity system with `ref` and `computed` for dynamic behavior.

```html
<template>
  <!-- Basic input with label -->
  <l-input v-model="username" label="Username" placeholder="Enter username" />

  <!-- Password with visibility toggle -->
  <l-input
    v-model="password"
    type="password"
    label="Password"
    placeholder="Enter password"
    clearable
  />

  <!-- Input with status and tips -->
  <l-input
    v-model="email"
    label="Email"
    placeholder="Enter email"
    :status="emailStatus"
    :tips="emailTips"
    suffix-icon="mail"
  />

  <!-- Vertical layout with character limit -->
  <l-input
    v-model="bio"
    layout="vertical"
    label="Biography"
    placeholder="Tell us about yourself"
    :maxlength="100"
    tips="Maximum 100 characters"
  />

  <!-- Classic bordered style -->
  <l-input
    v-model="search"
    classic
    prefix-icon="search"
    placeholder="Search..."
    @confirm="onSearch"
  />
</template>

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

const username = ref('')
const password = ref('')
const email = ref('')
const bio = ref('')
const search = ref('')

const emailStatus = computed(() => {
  if (!email.value) return 'default'
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.value) ? 'success' : 'error'
})

const emailTips = computed(() => {
  if (!email.value) return ''
  return emailStatus.value === 'error' ? 'Please enter a valid email' : 'Email looks good!'
})

const onSearch = () => console.log('Searching:', search.value)
</script>
```

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

### HTTP Client: Making Requests with lime-request

Source: https://context7.com/wanpixiaohuolong/limeul/llms.txt

Demonstrates how to create an HTTP client instance, configure interceptors for requests and responses, and perform various HTTP operations like GET, POST, PUT, DELETE, file upload, and download. It also shows how to handle request cancellation.

```javascript
import { Request } from '@/uni_modules/lime-request'

// Create request instance
const api = new Request({
  baseURL: 'https://api.example.com',
  timeout: 15000,
  header: {
    'Content-Type': 'application/json'
  }
})

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

// Response interceptor - handle errors
api.interceptors.response.use(
  (response) => {
    if (response.data.code !== 200) {
      uni.showToast({ title: response.data.message, icon: 'none' })
      return Promise.reject(response.data)
    }
    return response.data
  },
  (error) => {
    uni.showToast({ title: 'Network error', icon: 'error' })
    return Promise.reject(error)
  }
)

// GET request with params
api.get('/users', { params: { page: 1, limit: 10 } })
  .then(res => console.log('Users:', res.data))

// POST request with body
api.post('/users', { name: 'John', email: 'john@example.com' })
  .then(res => console.log('Created:', res.data))

// PUT request
api.put('/users/123', { name: 'John Updated' })

// DELETE request
api.delete('/users/123')

// File upload
api.upload('/upload', {
  filePath: '/path/to/image.jpg',
  name: 'file',
  formData: { type: 'avatar' }
}).then(res => console.log('Uploaded:', res.data))

// File download
api.download('/files/document.pdf', {
  filePath: `${uni.env.USER_DATA_PATH}/document.pdf`
}).then(res => console.log('Downloaded to:', res.tempFilePath))

// Request with task for cancellation
let task = null
api.get('/long-running', {
  getTask: (t) => { task = t }
})
// Cancel request: task.abort()
```

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

### Dialog - Confirmation Modal Examples (Vue)

Source: https://context7.com/wanpixiaohuolong/limeul/llms.txt

Illustrates the L-Dialog component for displaying confirmation messages and prompts. It supports both declarative (v-model) and imperative (ref.show()) usage patterns, along with custom content via slots. Event handlers for confirm and cancel actions are included.

```html
<template>
  <!-- Declarative usage -->
  <l-button @click="showDialog = true">Open Dialog</l-button>
  <l-dialog
    v-model="showDialog"
    title="Confirm Action"
    content="Are you sure you want to proceed with this action?"
    confirm-btn="Confirm"
    cancel-btn="Cancel"
    @confirm="handleConfirm"
    @cancel="handleCancel"
  />

  <!-- Imperative usage with ref -->
  <l-button @click="showImperativeDialog">Show Promise Dialog</l-button>
  <l-dialog ref="dialogRef" />

  <!-- Custom content with slots -->
  <l-button @click="showCustom = true">Custom Dialog</l-button>
  <l-dialog v-model="showCustom" title="Custom Content" button-layout="vertical">
    <template #default>
      <view style="padding: 20px;">
        <l-input v-model="inputValue" placeholder="Enter something" />
      </view>
    </template>
  </l-dialog>
</template>

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

const showDialog = ref(false)
const showCustom = ref(false)
const dialogRef = ref(null)
const inputValue = ref('')

const handleConfirm = () => {
  console.log('User confirmed')
  showDialog.value = false
}

const handleCancel = () => {
  console.log('User cancelled')
}

// Imperative dialog with Promise
const showImperativeDialog = async () => {
  try {
    await dialogRef.value.show({
      title: 'Delete Item',
      content: 'This action cannot be undone. Continue?',
      confirmBtn: { content: 'Delete', type: 'danger' },
      cancelBtn: 'Keep',
      beforeClose: async (action) => {
        if (action === 'confirm') {
          // Simulate async operation
          await new Promise(resolve => setTimeout(resolve, 1000))
        }
        return true
      }
    })
    console.log('User confirmed deletion')
  } catch {
    console.log('User cancelled deletion')
  }
}
</script>
```

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

### Popup - Modal Layer Examples (Vue)

Source: https://context7.com/wanpixiaohuolong/limeul/llms.txt

Demonstrates the usage of the L-Popup component for creating modal layers with different positions (bottom, center, right drawer). It supports customizable animations, overlay controls, and safe area insets. The component is controlled using Vue's ref for visibility.

```html
<template>
  <!-- Bottom popup -->
  <l-button @click="showBottom = true">Bottom Popup</l-button>
  <l-popup v-model="showBottom" position="bottom" :safe-area-inset-bottom="true">
    <view style="padding: 32px;">
      <text>Bottom Popup Content</text>
      <l-button block type="primary" @click="showBottom = false">Close</l-button>
    </view>
  </l-popup>

  <!-- Center popup with close button -->
  <l-button @click="showCenter = true">Center Popup</l-button>
  <l-popup
    v-model="showCenter"
    position="center"
    closeable
    :radius="16"
    bg-color="#fff"
  >
    <view style="padding: 40px; min-width: 300px;">
      <text>Centered Modal Content</text>
    </view>
  </l-popup>

  <!-- Right drawer -->
  <l-button @click="showDrawer = true">Open Drawer</l-button>
  <l-popup
    v-model="showDrawer"
    position="right"
    :duration="300"
    :close-on-click-overlay="true"
    @closed="onDrawerClosed"
  >
    <view style="width: 300px; height: 100vh; padding: 20px;">
      <text>Drawer Menu</text>
      <l-cell-group>
        <l-cell title="Menu Item 1" arrow />
        <l-cell title="Menu Item 2" arrow />
        <l-cell title="Menu Item 3" arrow />
      </l-cell-group>
    </view>
  </l-popup>
</template>

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

const showBottom = ref(false)
const showCenter = ref(false)
const showDrawer = ref(false)

const onDrawerClosed = () => console.log('Drawer closed')
</script>
```

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

### ConfigProvider - Global Theme Configuration for LimeUI+

Source: https://context7.com/wanpixiaohuolong/limeul/llms.txt

The ConfigProvider component manages global theme settings for LimeUI+ components. It allows for light/dark mode switching and custom theme variables via CSS custom properties. This example demonstrates how to toggle themes and apply custom styles.

```html
<template>
  <l-config-provider :theme="currentTheme" :themeVars="themeVars">
    <view class="page">
      <l-button type="primary" @click="toggleTheme">
        {{ currentTheme === 'light' ? 'Switch to Dark' : 'Switch to Light' }}
      </l-button>
      <l-card title="Theme Demo">
        <text>Content adapts to current theme</text>
      </l-card>
    </view>
  </l-config-provider>
</template>

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

const currentTheme = ref('light')
const themeVars = ref({})

const toggleTheme = () => {
  currentTheme.value = currentTheme.value === 'light' ? 'dark' : 'light'
  themeVars.value = currentTheme.value === 'dark'
    ? { primaryColor: '#177ddc', textColor1: 'rgba(255,255,255,0.85)', cardBgColor: '#1f1f1f' }
    : { primaryColor: '#1677ff', textColor1: 'rgba(0,0,0,0.88)', cardBgColor: '#ffffff' }
}
</script>

<style lang="scss">
.l-theme-dark {
  --doc-page-bg-color: #181818;
  --doc-text-color: rgba(255, 255, 255, 0.8);
}
.page {
  background-color: var(--doc-page-bg-color, #f5f5f5);
  color: var(--doc-text-color, #333);
  transition: background-color 200ms, color 200ms;
}
</style>
```

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

### Button - Action Trigger Component for LimeUI+

Source: https://context7.com/wanpixiaohuolong/limeul/llms.txt

The Button component in LimeUI+ is a versatile element for triggering actions. It supports various types, variants, sizes, shapes, and states like loading. This example showcases basic usage, different styles, and icon integration.

```html
<template>
  <!-- Basic button types -->
  <l-button type="primary">Primary</l-button>
  <l-button type="success">Success</l-button>
  <l-button type="warning">Warning</l-button>
  <l-button type="danger">Danger</l-button>

  <!-- Variants and sizes -->
  <l-button type="primary" variant="outline" size="large" block>
    Large Outline Block Button
  </l-button>
  <l-button type="primary" variant="dashed" size="small">Dashed Small</l-button>

  <!-- With icon and loading state -->
  <l-button type="primary" icon="search" :loading="isLoading" @click="handleSearch">
    {{ isLoading ? 'Searching...' : 'Search' }}
  </l-button>

  <!-- Shape variants -->
  <l-button type="primary" shape="round">Rounded</l-button>
  <l-button type="primary" shape="circle" icon="plus"></l-button>

  <!-- Ghost and custom styling -->
  <l-button ghost type="primary" color="#722ed1" text-color="#722ed1">
    Custom Ghost
  </l-button>
</template>

<script setup>
import { ref } from 'vue'
const isLoading = ref(false)

const handleSearch = async () => {
  isLoading.value = true
  await new Promise(resolve => setTimeout(resolve, 2000))
  isLoading.value = false
}
</script>
```

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

### Date Utilities: Manipulating Dates with lime-dayuts

Source: https://context7.com/wanpixiaohuolong/limeul/llms.txt

Illustrates the usage of the lime-dayuts library for various date operations. It covers parsing dates from different formats, formatting dates into custom strings, getting and setting date components, performing date arithmetic, comparing dates, calculating differences, and working with relative time expressions.

```javascript
import { dayuts } from '@/uni_modules/lime-dayuts'

// Current date/time
dayuts().format() // "2024-06-15T10:30:00+08:00"
dayuts().format('YYYY-MM-DD') // "2024-06-15"
dayuts().format('YYYY年MM月DD日 HH:mm') // "2024年06月15日 10:30"

// Parse various formats
dayuts('2024-06-15')
dayuts('2024-06-15T10:30:00.000Z')
dayuts(1718438400000) // timestamp
dayuts(new Date())

// Get/Set values
dayuts().year() // 2024
dayuts().month() // 5 (0-indexed)
dayuts().date() // 15
dayuts().day() // 6 (Saturday)
dayuts().hour() // 10
dayuts().minute() // 30

// Manipulate dates
dayuts().add(7, 'day').format('YYYY-MM-DD') // Add 7 days
dayuts().subtract(1, 'month') // Subtract 1 month
dayuts().startOf('month') // First day of month
dayuts().endOf('year') // Last moment of year

// Compare dates
const date1 = dayuts('2024-06-15')
const date2 = dayuts('2024-06-20')

date1.isBefore(date2) // true
date1.isAfter(date2) // false
date1.isSame(date2, 'month') // true
dayuts('2024-06-15').isBetween('2024-06-01', '2024-06-30') // true

// Difference
date2.diff(date1, 'day') // 5
date2.diff(date1, 'hour') // 120

// Relative time
dayuts().fromNow() // "just now"
dayuts().subtract(3, 'hour').fromNow() // "3 hours ago"
dayuts().add(2, 'day').fromNow() // "in 2 days"

// Utility methods
dayuts('2024-02-15').daysInMonth() // 29 (leap year)
dayuts('2024-02-15').isLeapYear() // true
dayuts().isToday() // true
dayuts().toDate() // native Date object
dayuts().unix() // Unix timestamp in seconds
```

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

### Navbar - Navigation Header with Slots and Customization (Vue.js)

Source: https://context7.com/wanpixiaohuolong/limeul/llms.txt

Illustrates the Navbar component for creating navigation headers. It supports customizable titles, back buttons, status bar adaptation, and flexible content insertion via slots for elements like search bars, icons, and dropdown menus. Includes examples of fixed positioning and custom background styling.

```html
<template>
  <!-- Basic navbar -->
  <l-navbar title="Page Title" :left-arrow="true" @back="onBack" />

  <!-- Fixed with placeholder -->
  <l-navbar
    title="Fixed Navbar"
    :fixed="true"
    :placeholder="true"
    :safe-area-inset-top="true"
  />

  <!-- With search -->
  <l-navbar>
    <template #left>
      <l-search
        v-model="searchValue"
        placeholder="Search..."
        shape="round"
        :show-action="false"
        style="width: 250px;"
      />
    </template>
    <template #right>
      <l-icon name="scan" size="24" @click="onScan" />
    </template>
  </l-navbar>

  <!-- Custom styled -->
  <l-navbar
    title="Custom Style"
    bg-color="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
    color="#fff"
    :left-arrow="true"
  />

  <!-- With dropdown popup -->
  <l-navbar title="With Dropdown">
    <template #right>
      <l-icon name="more" @click="showDropdown = !showDropdown" />
    </template>
    <template #extra="{ size }">
      <l-popup
        v-model="showDropdown"
        position="top"
        :overlay-style="{ top: size.height + 'px' }"
      >
        <view style="padding: 20px;">
          <l-cell title="Settings" arrow />
          <l-cell title="Help" arrow />
        </view>
      </l-popup>
    </template>
  </l-navbar>
</template>
```

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

const searchValue = ref('')
const showDropdown = ref(false)

const onBack = () => {
  const pages = getCurrentPages()
  if (pages.length > 1) {
    uni.navigateBack()
  } else {
    uni.switchTab({ url: '/pages/index/index' })
  }
}

const onScan = () => {
  uni.scanCode({
    success: (res) => console.log('Scanned:', res.result)
  })
}
```

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

### EChart Data Visualization Component (Vue/HTML)

Source: https://context7.com/wanpixiaohuolong/limeul/llms.txt

Integrates ECharts for rendering interactive charts with full configuration support. This component requires a Vue template and JavaScript setup, including the ECharts library. It supports initialization, data updates, resizing, and exporting charts as images.

```html
<template>
  <view style="width: 100%; height: 400px;">
    <l-echart ref="chartRef" @finished="initChart" />
  </view>
</template>
```

```javascript
import { ref } from 'vue'
// #ifdef MP
const echarts = require('../../static/echarts.min.js')
// #endif
// #ifndef MP
const echarts = null
// #endif

const chartRef = ref(null)

const initChart = async () => {
  if (!chartRef.value) return

  const chart = await chartRef.value.init(echarts)

  chart.setOption({
    title: {
      text: 'Sales Overview',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['Sales', 'Revenue'],
      bottom: 0
    },
    xAxis: {
      type: 'category',
      data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: 'Sales',
        type: 'bar',
        data: [120, 200, 150, 80, 70, 110],
        itemStyle: { color: '#1677ff' }
      },
      {
        name: 'Revenue',
        type: 'line',
        data: [150, 230, 180, 100, 90, 130],
        itemStyle: { color: '#52c41a' }
      }
    ]
  })
}

// Update chart data
const updateChart = (newData) => {
  chartRef.value?.setOption({
    series: [{ data: newData }]
  })
}

// Resize chart
const resizeChart = () => {
  chartRef.value?.resize()
}

// Export as image
const exportChart = () => {
  chartRef.value?.canvasToTempFilePath({
    success: (res) => {
      uni.saveImageToPhotosAlbum({
        filePath: res.tempFilePath,
        success: () => uni.showToast({ title: 'Saved!' })
      })
    }
  })
}
</script>
```

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

### Form Validation Component in Vue

Source: https://context7.com/wanpixiaohuolong/limeul/llms.txt

Illustrates the L-Form component in Vue.js for handling form data and validation. It showcases how to define reactive form data, validation rules (required, length, pattern, custom validators), and integrate with form items and buttons for submission and reset. The example uses `ref` and `reactive` for state management.

```html
<template>
  <l-form ref="formRef" :data="formData" :rules="rules" @submit="onSubmit">
    <l-form-item name="username" label="Username">
      <l-input v-model="formData.username" placeholder="Enter username" :bordered="false" />
    </l-form-item>

    <l-form-item name="email" label="Email">
      <l-input v-model="formData.email" placeholder="Enter email" :bordered="false" />
    </l-form-item>

    <l-form-item name="password" label="Password">
      <l-input v-model="formData.password" type="password" placeholder="Enter password" :bordered="false" />
    </l-form-item>

    <l-form-item name="age" label="Age">
      <l-stepper v-model="formData.age" :min="1" :max="120" />
    </l-form-item>

    <l-form-item name="agreement" label="">
      <l-checkbox v-model="formData.agreement">I agree to the terms</l-checkbox>
    </l-form-item>

    <l-button block type="primary" @click="handleSubmit">Submit</l-button>
    <l-button block variant="outline" @click="handleReset">Reset</l-button>
  </l-form>
</template>

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

const formRef = ref(null)
const formData = reactive({
  username: '',
  email: '',
  password: '',
  age: 18,
  agreement: false
})

const rules = {
  username: [
    { required: true, message: 'Username is required' },
    { min: 3, max: 20, message: 'Username must be 3-20 characters' }
  ],
  email: [
    { required: true, message: 'Email is required' },
    { email: true, message: 'Please enter a valid email' }
  ],
  password: [
    { required: true, message: 'Password is required' },
    { min: 6, message: 'Password must be at least 6 characters' },
    { pattern: /^(?=.*[A-Za-z])(?=.*\d)/, message: 'Must contain letters and numbers' }
  ],
  agreement: [
    { validator: (val) => val === true, message: 'You must agree to terms' }
  ]
}

const handleSubmit = async () => {
  try {
    const result = await formRef.value.validate()
    if (result.validateResult) {
      console.log('Form submitted:', formData)
      // Submit to server
    }
  } catch (error) {
    console.error('Validation failed:', error)
  }
}

const handleReset = () => formRef.value.reset()
</script>
```

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

### ActionSheet - Bottom Actions with Icons and Grid Layout (Vue.js)

Source: https://context7.com/wanpixiaohuolong/limeul/llms.txt

Demonstrates the usage of the ActionSheet component for presenting lists of actions at the bottom of the screen. Supports icons, descriptions, custom styling, and a grid layout for sharing options. It utilizes Vue.js reactivity and event handling for user interactions.

```html
<template>
  <!-- Basic action sheet -->
  <l-button @click="showBasic = true">Basic Actions</l-button>
  <l-action-sheet
    v-model="showBasic"
    :list="basicActions"
    cancel-text="Cancel"
    @select="onSelect"
    @cancel="showBasic = false"
  />

  <!-- With description -->
  <l-button @click="showDesc = true">With Description</l-button>
  <l-action-sheet
    v-model="showDesc"
    title="Choose Action"
    description="Select an operation to perform"
    :list="descActions"
    cancel-text="Cancel"
  />

  <!-- Grid layout for sharing -->
  <l-button @click="showGrid = true">Share Menu</l-button>
  <l-action-sheet
    v-model="showGrid"
    title="Share to"
    :list="shareOptions"
    :row-col="[4, 8]"
    cancel-text="Cancel"
    @select="onShare"
  />
</template>
```

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

const showBasic = ref(false)
const showDesc = ref(false)
const showGrid = ref(false)

const basicActions = [
  { label: 'Edit' },
  { label: 'Share' },
  { label: 'Delete', color: '#ff3b30' }
]

const descActions = [
  { label: 'Copy Link', icon: 'link' },
  { label: 'Save to Album', icon: 'download' },
  { label: 'Report', icon: 'warning', disabled: true }
]

const shareOptions = [
  { label: 'WeChat', icon: 'https://example.com/wechat.png', bgColor: '#07c160' },
  { label: 'Moments', icon: 'https://example.com/moments.png', bgColor: '#07c160' },
  { label: 'QQ', icon: 'https://example.com/qq.png', bgColor: '#12b7f5' },
  { label: 'Weibo', icon: 'https://example.com/weibo.png', bgColor: '#e6162d' },
  { label: 'Copy Link', icon: 'link' },
  { label: 'QR Code', icon: 'qrcode' },
  { label: 'More', icon: 'more' }
]

const onSelect = (index, item) => {
  console.log('Selected:', item.label)
  showBasic.value = false
}

const onShare = (index, item) => {
  console.log('Share to:', item.label)
  showGrid.value = false
  // Implement share logic
}
```

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

### Toast - Lightweight Notifications API (Vue)

Source: https://context7.com/wanpixiaohuolong/limeul/llms.txt

Demonstrates the L-Toast component for displaying non-blocking notifications. It utilizes API functions for different types (success, error, loading) and custom configurations. A toast agent must be placed on the page, and toasts can be hidden programmatically.

```html
<template>
  <!-- Required: Place agent component once per page -->
  <l-toast-agent />

  <l-button @click="showToast">Basic Toast</l-button>
  <l-button @click="showSuccess">Success</l-button>
  <l-button @click="showError">Error</l-button>
  <l-button @click="showLoading">Loading</l-button>
  <l-button @click="showCustom">Custom Toast</l-button>
</template>

<script setup>
import { toast, success, warning, error, loading, hide, hideAll } from '@/uni_modules/lime-toast'

const showToast = () => {
  toast('This is a message')
}

const showSuccess = () => {
  success('Operation completed successfully!')
}

const showError = () => {
  error('Something went wrong')
}

const showLoading = async () => {
  loading('Processing...')
  // Simulate async operation
  await new Promise(resolve => setTimeout(resolve, 3000))
  hide()
  success('Done!')
}

const showCustom = () => {
  toast({
    message: 'Custom positioned toast',
    duration: 3000,
    position: 'top',
    direction: 'row',
    icon: 'bell',
    iconColor: '#1677ff'
  })
}

// Hide all toasts when component unmounts
onUnmounted(() => hideAll())
</script>
```

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

### File Upload Component with Vue.js

Source: https://context7.com/wanpixiaohuolong/limeul/llms.txt

Demonstrates the 'l-upload' component for handling file uploads. Supports image and video uploads, multiple selections, preview, progress tracking, auto-upload to custom servers or uniCloud, and custom upload triggers. It uses Vue.js for its reactive nature and component-based structure.

```html
<template>
  <!-- Basic upload -->
  <l-upload v-model="fileList" @add="onFilesAdd" />

  <!-- Auto upload to server -->
  <l-upload
    v-model="autoFiles"
    action="https://api.example.com/upload"
    :auto-upload="true"
    :max="9"
    :headers="{ Authorization: 'Bearer token' }"
    @success="onUploadSuccess"
    @fail="onUploadFail"
  />

  <!-- uniCloud upload -->
  <l-upload
    v-model="cloudFiles"
    action="uniCloud"
    :auto-upload="true"
    media-type="image"
    :size-limit="5120"
  />

  <!-- Video upload with custom grid -->
  <l-upload
    v-model="videoFiles"
    media-type="video"
    :max="3"
    :max-duration="60"
    grid-width="120px"
    grid-height="120px"
    :column="3"
  />

  <!-- Custom upload trigger -->
  <l-upload v-model="customFiles" @add="handleCustomAdd">
    <view class="custom-upload-area">
      <l-icon name="camera" size="48" color="#999" />
      <text>Click to upload</text>
    </view>
  </l-upload>
</template>

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

const fileList = ref([])
const autoFiles = ref([])
const cloudFiles = ref([])
const videoFiles = ref([])
const customFiles = ref([
  { url: 'https://example.com/existing-image.jpg', status: 'done' }
])

const onFilesAdd = (files) => {
  console.log('Files selected:', files)
  // Manual upload logic if needed
}

const onUploadSuccess = (results) => {
  console.log('All uploads completed:', results)
  uni.showToast({ title: 'Upload successful' })
}

const onUploadFail = (error) => {
  console.error('Upload failed:', error)
  uni.showToast({ title: 'Upload failed', icon: 'error' })
}

const handleCustomAdd = async (files) => {
  // Custom upload implementation
  for (const file of files) {
    file.status = 'loading'
    try {
      const result = await customUpload(file.path)
      file.url = result.url
      file.status = 'done'
    } catch {
      file.status = 'failed'
    }
  }
}
</script>

<style>
.custom-upload-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  border: 2px dashed #ddd;
  border-radius: 8px;
}
</style>
```

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

### SQLite Local Database Operations (JavaScript)

Source: https://context7.com/wanpixiaohuolong/limeul/llms.txt

Provides native SQLite database API for persistent local storage on Android, iOS, and HarmonyOS. Supports CRUD operations, transactions, and SQL queries. Requires the '@/uni_modules/lime-sqlite' module.

```javascript
import {
  openDatabase,
  closeDatabase,
  isOpenDatabase,
  executeSql,
  selectSql,
  transaction,
  getDatabasePath
} from '@/uni_modules/lime-sqlite'

// Open database
openDatabase({
  name: 'myapp',
  success: (res) => console.log('Database opened'),
  fail: (err) => console.error('Failed to open:', err)
})

// Check if database is open
isOpenDatabase({
  name: 'myapp',
  success: (res) => console.log('Is open:', res)
})

// Create table
executeSql({
  name: 'myapp',
  sql: ["\n    CREATE TABLE IF NOT EXISTS users (\n      id INTEGER PRIMARY KEY AUTOINCREMENT,
      name TEXT NOT NULL,
      email TEXT UNIQUE,
      created_at DATETIME DEFAULT CURRENT_TIMESTAMP\n    )\n  "],
  success: () => console.log('Table created'),
  fail: (err) => console.error('Create failed:', err)
})

// Insert dataexecuteSql({
  name: 'myapp',
  sql: [
    "INSERT INTO users (name, email) VALUES ('John', 'john@example.com')",
    "INSERT INTO users (name, email) VALUES ('Jane', 'jane@example.com')"
  ],
  success: () => console.log('Users inserted')
})

// Query dataselectSql({
  name: 'myapp',
  sql: ["SELECT * FROM users WHERE name LIKE '%John%'"],
  success: (res) => {
    console.log('Query results:', res)
    // res = [{ id: 1, name: 'John', email: 'john@example.com', created_at: '...' }]
  }
})

// Transaction
transaction({
  name: 'myapp',
  operation: 'begin',
  success: () => {
    executeSql({
      name: 'myapp',
      sql: [
        "UPDATE users SET name = 'John Doe' WHERE id = 1",
        "DELETE FROM users WHERE id = 2"
      ],
      success: () => {
        transaction({ name: 'myapp', operation: 'commit', success: () => console.log('Committed') })
      },
      fail: () => {
        transaction({ name: 'myapp', operation: 'rollback', success: () => console.log('Rolled back') })
      }
    })
  }
})

// Get database path
const dbPath = getDatabasePath('myapp')
console.log('Database location:', dbPath)

// Close database
closeDatabase({
  name: 'myapp',
  success: () => console.log('Database closed')
})
```

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

### Picker Component with Vue.js

Source: https://context7.com/wanpixiaohuolong/limeul/llms.txt

Showcases the 'l-picker' and 'l-cascade' components for selection functionalities. Supports single-column, multi-column, and cascade selections with customizable buttons, titles, and data structures. It integrates with 'l-popup' for modal display and uses Vue.js for state management.

```html
<template>
  <!-- Single column picker -->
  <l-button @click="showSingle = true">Select City</l-button>
  <l-popup v-model="showSingle" position="bottom">
    <l-picker
      title="Select City"
      confirm-btn="Done"
      cancel-btn="Cancel"
      :columns="cityColumns"
      @confirm="onCityConfirm"
      @cancel="showSingle = false"
    />
  </l-popup>

  <!-- Multi-column picker -->
  <l-button @click="showMulti = true">Select Date</l-button>
  <l-popup v-model="showMulti" position="bottom">
    <l-picker
      v-model="dateValues"
      title="Select Date"
      confirm-btn="Confirm"
      cancel-btn="Cancel"
    >
      <l-picker-item :options="years" />
      <l-picker-item :options="months" />
      <l-picker-item :options="days" />
    </l-picker>
  </l-popup>

  <!-- Cascade picker -->
  <l-button @click="showCascade = true">Select Region</l-button>
  <l-popup v-model="showCascade" position="bottom">
    <l-cascade
      :columns="regionData"
      @confirm="onRegionConfirm"
      @cancel="showCascade = false"
    />
  </l-popup>
</template>

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

const showSingle = ref(false)
const showMulti = ref(false)
const showCascade = ref(false)

const cityColumns = [
  [
    { label: 'Beijing', value: 'beijing' },
    { label: 'Shanghai', value: 'shanghai' },
    { label: 'Guangzhou', value: 'guangzhou' },
    { label: 'Shenzhen', value: 'shenzhen' }
  ]
]

const dateValues = ref(['2024', '06', '15'])
const years = Array.from({ length: 10 }, (_, i) => ({ label: `${2020 + i}`, value: `${2020 + i}` }))
const months = Array.from({ length: 12 }, (_, i) => ({ label: `${i + 1}`.padStart(2, '0'), value: `${i + 1}`.padStart(2, '0') }))
const days = Array.from({ length: 31 }, (_, i) => ({ label: `${i + 1}`.padStart(2, '0'), value: `${i + 1}`.padStart(2, '0') }))

const regionData = [
  {
    label: 'Guangdong',
    value: 'gd',
    children: [
      { label: 'Guangzhou', value: 'gz', children: [{ label: 'Tianhe', value: 'th' }] },
      { label: 'Shenzhen', value: 'sz', children: [{ label: 'Nanshan', value: 'ns' }] }
    ]
  }
]

const onCityConfirm = ({ values, items }) => {
  console.log('Selected:', values, items)
  showSingle.value = false
}

const onRegionConfirm = ({ values, items }) => {
  console.log('Region selected:', values, items)
  showCascade.value = false
}
</script>
```

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

### Calendar: Date Selection with Vue.js

Source: https://context7.com/wanpixiaohuolong/limeul/llms.txt

Implements a calendar component for single, multiple, or range date selection. Supports custom date formatting, minimum/maximum dates, and event handling for confirmations. Requires Vue.js and Lime UI.

```html
<template>
  <!-- Basic calendar popup -->
  <l-button @click="showCalendar = true">Select Date</l-button>
  <l-calendar
    v-model:visible="showCalendar"
    @confirm="onDateConfirm"
  />

  <!-- Range selection -->
  <l-button @click="showRange = true">Select Date Range</l-button>
  <l-calendar
    v-model:visible="showRange"
    type="range"
    confirm-btn="Confirm"
    :max-range="30"
    range-prompt="Maximum 30 days"
    @confirm="onRangeConfirm"
  />

  <!-- Inline calendar view -->
  <l-calendar-view
    v-model="selectedDates"
    type="multiple"
    :format="formatDay"
    :show-mark="true"
    color="#1677ff"
  />

  <!-- With custom day formatting -->
  <l-calendar
    v-model:visible="showCustom"
    :format="customFormat"
    :min-date="minDate"
    :max-date="maxDate"
  >
    <template #day="{ day }">
      <view>{{ day.day }}</view>
      <text v-if="day.suffix" class="day-price">{{ day.suffix }}</text>
    </template>
  </l-calendar>
</template>
```

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

const showCalendar = ref(false)
const showRange = ref(false)
const showCustom = ref(false)
const selectedDates = ref([])

const minDate = Date.now()
const maxDate = Date.now() + 90 * 24 * 60 * 60 * 1000

const formatDay = (day) => {
  const date = new Date(day.date)
  if (date.getDay() === 0 || date.getDay() === 6) {
    day.className = 'weekend'
  }
  return day
}

const customFormat = (day) => {
  // Add price suffix for booking scenarios
  const prices = { 1: '$99', 2: '$89', 3: '$79' }
  const weekday = new Date(day.date).getDay()
  if (prices[weekday]) {
    day.suffix = prices[weekday]
  }
  return day
}

const onDateConfirm = (value) => {
  console.log('Selected date:', new Date(value))
  showCalendar.value = false
}

const onRangeConfirm = (values) => {
  const [start, end] = values.map(v => new Date(v))
  console.log('Date range:', start, 'to', end)
  showRange.value = false
}
```

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

### Tabs Component - Content Switching with Animations and Gestures

Source: https://context7.com/wanpixiaohuolong/limeul/llms.txt

The Tabs component allows for dynamic content switching with support for animated transitions and swipe gestures. It can be used with a list of tab objects or with nested tab panel children. Customization options include colors, line styles, and badge displays.

```html
<template>
  <!-- Basic tabs with list -->
  <l-tabs v-model="activeTab" :list="tabList" @change="onTabChange" />

  <!-- Tabs with panel children -->
  <l-tabs v-model="panelTab" :animated="true" :swipeable="true">
    <l-tab-panel :value="0" label="Home">
      <view style="padding: 20px;">Home Content</view>
    </l-tab-panel>
    <l-tab-panel :value="1" label="Messages" badge="5">
      <view style="padding: 20px;">Messages Content</view>
    </l-tab-panel>
    <l-tab-panel :value="2" label="Profile" dot>
      <view style="padding: 20px;">Profile Content</view>
    </l-tab-panel>
  </l-tabs>

  <!-- Styled tabs -->
  <l-tabs
    v-model="styledTab"
    :list="styledList"
    :space-evenly="false"
    color="#999"
    active-color="#1677ff"
    line-color="#1677ff"
    line-width="40rpx"
    line-height="6rpx"
  />
</template>
```

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

const activeTab = ref(0)
const panelTab = ref(0)
const styledTab = ref(0)

const tabList = [
  { label: 'Tab 1', value: 0 },
  { label: 'Tab 2', value: 1 },
  { label: 'Tab 3', value: 2 }
]

const styledList = [
  { label: 'Featured', value: 0 },
  { label: 'Popular', value: 1 },
  { label: 'Latest', value: 2 },
  { label: 'Trending', value: 3 }
]

const onTabChange = (index) => console.log('Tab changed to:', index)
```

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

### SwipeCell: Interactive List Actions with Vue.js

Source: https://context7.com/wanpixiaohuolong/limeul/llms.txt

Provides a swipeable cell component for list items, enabling actions like favorite, edit, and delete. Includes a `before-close` hook for confirmation dialogs. Requires Vue.js and Lime UI.

```html
<template>
  <view v-for="(item, index) in items" :key="item.id">
    <l-swipe-cell
      :name="item.id"
      :before-close="beforeClose"
      @open="onSwipeOpen"
    >
      <l-cell :title="item.title" :note="item.subtitle" />

      <template #left>
        <view class="action-btn favorite-btn" @click="onFavorite(index)">
          <l-icon name="star" color="#fff" />
          <text>Favorite</text>
        </view>
      </template>

      <template #right>
        <view class="action-btn edit-btn" @click="onEdit(index)">
          <l-icon name="edit" color="#fff" />
        </view>
        <view class="action-btn delete-btn" @click="onDelete(index)">
          <l-icon name="delete" color="#fff" />
        </view>
      </template>
    </l-swipe-cell>
  </view>
</template>
```

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

const items = ref([
  { id: '1', title: 'Item 1', subtitle: 'Description 1' },
  { id: '2', title: 'Item 2', subtitle: 'Description 2' },
  { id: '3', title: 'Item 3', subtitle: 'Description 3' }
])

const beforeClose = async (direction) => {
  if (direction === 'right') {
    // Confirm before closing on delete side
    return new Promise((resolve) => {
      uni.showModal({
        title: 'Confirm',
        content: 'Close swipe cell?',
        success: (res) => resolve(res.confirm)
      })
    })
  }
  return true
}

const onSwipeOpen = (direction) => console.log('Swiped:', direction)

const onFavorite = (index) => {
  console.log('Favorite item:', items.value[index])
}

const onEdit = (index) => {
  uni.navigateTo({ url: `/pages/edit/index?id=${items.value[index].id}` })
}

const onDelete = (index) => {
  uni.showModal({
    title: 'Delete',
    content: 'Are you sure?',
    success: (res) => {
      if (res.confirm) {
        items.value.splice(index, 1)
      }
    }
  })
}
```

```css
.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 100%;
  color: #fff;
}
.favorite-btn { background-color: #ff9500; }
.edit-btn { background-color: #1677ff; }
.delete-btn { background-color: #ff3b30; }
```