### Quick Start Vue.js 3 Application Setup

Source: https://github.com/chrischan13/zenless-ui/blob/main/README.EN.md

This JavaScript code demonstrates how to integrate Zenless UI into a Vue.js 3 application. It imports necessary modules, the UI library, its CSS, and the main App component, then mounts the application.

```javascript
import { createApp } from 'vue'
import ZenlessUI from 'zenless-ui'
import 'zenless-ui/dist/index.css'
import App from './App.vue'

const app = createApp(App)

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

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

### Vue Pagination Component Examples

Source: https://context7.com/chrischan13/zenless-ui/llms.txt

Shows how to use the z-pagination component for managing page navigation. Examples include basic setup with total items and page size, handling page change events, and customizing page size.

```vue
<template>
  <!-- Basic pagination -->
  <z-pagination
    v-model="currentPage"
    :total="100"
    :page-size="10"
  ></z-pagination>

  <!-- With change event -->
  <z-pagination
    v-model="page"
    :total="200"
    :page-size="20"
    @change="handlePageChange"
  ></z-pagination>

  <!-- Custom page size -->
  <z-pagination
    v-model="page"
    :total="500"
    :page-size="50"
  ></z-pagination>
</template>

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

const currentPage = ref(1)
const page = ref(1)

const handlePageChange = (pageNumber) => {
  console.log('Current page:', pageNumber)
  // Fetch data for the new page
}
</script>
```

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

### Install Zenless UI Package

Source: https://github.com/chrischan13/zenless-ui/blob/main/README.EN.md

This snippet shows how to install the Zenless UI package using pnpm. It is a prerequisite for using the library in your project.

```shell
pnpm install zenless-ui -S
```

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

### Vue Tabs Component Examples

Source: https://context7.com/chrischan13/zenless-ui/llms.txt

Illustrates the usage of the z-tabs component for creating tabbed interfaces. It shows basic tab setup and how to handle tab change events using Vue's ref and event listeners.

```vue
<template>
  <!-- Basic tabs -->
  <z-tabs v-model="activeTab">
    <z-tab-panel name="first" label="Tab 1">
      Content of Tab 1
    </z-tab-panel>
    <z-tab-panel name="second" label="Tab 2">
      Content of Tab 2
    </z-tab-panel>
    <z-tab-panel name="third" label="Tab 3">
      Content of Tab 3
    </z-tab-panel>
  </z-tabs>

  <!-- With change event -->
  <z-tabs v-model="currentTab" @change="handleTabChange">
    <z-tab-panel name="profile" label="Profile">
      Profile information
    </z-tab-panel>
    <z-tab-panel name="settings" label="Settings">
      Settings content
    </z-tab-panel>
  </z-tabs>
</template>

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

const activeTab = ref('first')
const currentTab = ref('profile')

const handleTabChange = (tabName) => {
  console.log('Active tab:', tabName)
}
</script>
```

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

### Basic Zenless UI Setup in Vue

Source: https://context7.com/chrischan13/zenless-ui/llms.txt

Integrates the Zenless UI component library and its CSS into a Vue 3 application's main entry point.

```javascript
// main.js
import { createApp } from 'vue'
import ZenlessUI from 'zenless-ui'
import 'zenless-ui/dist/index.css'
import App from './App.vue'

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

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

### Dropdown Component with Commands in Vue

Source: https://context7.com/chrischan13/zenless-ui/llms.txt

Illustrates the Dropdown component, showing how to create basic dropdown menus and trigger actions based on user selection. It includes examples for both click and hover triggers, and a basic script setup for handling commands.

```vue
<template>
  <!-- Basic dropdown -->
  <z-dropdown @command="handleCommand">
    <z-button>Dropdown Menu</z-button>
    <template #dropdown>
      <z-dropdown-item command="action1">Action 1</z-dropdown-item>
      <z-dropdown-item command="action2">Action 2</z-dropdown-item>
      <z-dropdown-item command="action3">Action 3</z-dropdown-item>
    </template>
  </z-dropdown>

  <!-- Dropdown with trigger -->
  <z-dropdown trigger="hover" @command="handleCommand">
    <z-button>Hover Me</z-button>
    <template #dropdown>
      <z-dropdown-item command="edit">Edit</z-dropdown-item>
      <z-dropdown-item command="delete">Delete</z-dropdown-item>
    </template>
  </z-dropdown>
</template>

<script setup>
const handleCommand = (command) => {
  console.log('Command:', command)
}
</script>
```

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

### Vue Slider Component Examples

Source: https://context7.com/chrischan13/zenless-ui/llms.txt

Provides examples for the z-slider component, showcasing basic usage, configuration with min, max, and step values, disabled state, and handling value change events.

```vue
<template>
  <!-- Basic slider -->
  <z-slider v-model="sliderValue"></z-slider>
  <p>Value: {{ sliderValue }}</p>

  <!-- With min, max, and step -->
  <z-slider
    v-model="rangeValue"
    :min="0"
    :max="100"
    :step="5"
  ></z-slider>

  <!-- Disabled slider -->
  <z-slider v-model="value" disabled></z-slider>

  <!-- With change event -->
  <z-slider
    v-model="customValue"
    @change="handleSliderChange"
  ></z-slider>
</template>

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

const sliderValue = ref(50)
const rangeValue = ref(25)
const value = ref(60)
const customValue = ref(40)

const handleSliderChange = (value) => {
  console.log('Slider value:', value)
}
</script>
```

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

### Zenless UI Button Component Examples

Source: https://context7.com/chrischan13/zenless-ui/llms.txt

Showcases various configurations of the Z-Button component, including different types, sizes, variants, states, and event handling.

```vue
<template>
  <!-- Basic buttons with different types -->
  <z-button>Default</z-button>
  <z-button type="primary">Primary</z-button>
  <z-button type="success">Success</z-button>
  <z-button type="danger">Danger</z-button>
  <z-button type="warning">Warning</z-button>
  <z-button type="info">Info</z-button>

  <!-- Game-themed colors -->
  <z-button type="ether">Ether</z-button>
  <z-button type="fire">Fire</z-button>
  <z-button type="electric">Electric</z-button>
  <z-button type="ice">Ice</z-button>
  <z-button type="physical">Physical</z-button>

  <!-- Sizes -->
  <z-button size="extra">Extra Large</z-button>
  <z-button size="large">Large</z-button>
  <z-button>Default Size</z-button>
  <z-button size="small">Small</z-button>
  <z-button size="mini">Mini</z-button>

  <!-- Variants -->
  <z-button plain>Plain</z-button>
  <z-button hollow>Hollow</z-button>
  <z-button round>Rounded</z-button>
  <z-button circle icon="search"></z-button>

  <!-- States -->
  <z-button loading>Loading</z-button>
  <z-button disabled>Disabled</z-button>
  <z-button highlight type="primary">Highlighted</z-button>

  <!-- With icons -->
  <z-button icon="edit">Edit</z-button>
  <z-button icon="delete" type="danger">Delete</z-button>
  <z-button :icon="{ success: 'success' }">Colored Icon</z-button>

  <!-- Event handling -->
  <z-button @click="handleClick">Click Me</z-button>
</template>

<script setup>
const handleClick = (event) => {
  console.log('Button clicked:', event)
}
</script>
```

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

### Vue Table and Table Column Component Examples

Source: https://context7.com/chrischan13/zenless-ui/llms.txt

Illustrates the use of z-table and z-table-column components for displaying data in tabular format. It covers basic table setup, tables without borders, tables with custom content in columns using slots, and handling empty data states with custom text or slots. This component requires Vue.js and the Zenless UI library.

```vue
<template>
  <!-- Basic table -->
  <z-table :data="tableData">
    <z-table-column prop="id" label="ID" width="80"></z-table-column>
    <z-table-column prop="name" label="Name" width="150"></z-table-column>
    <z-table-column prop="email" label="Email" width="200"></z-table-column>
    <z-table-column prop="role" label="Role"></z-table-column>
  </z-table>

  <!-- Table without border -->
  <z-table :data="tableData" :border="false">
    <z-table-column prop="name" label="Name"></z-table-column>
    <z-table-column prop="status" label="Status"></z-table-column>
  </z-table>

  <!-- Table with custom columns -->
  <z-table :data="tableData">
    <z-table-column prop="name" label="User"></z-table-column>
    <z-table-column label="Actions" width="150">
      <template #default="{ row, index }">
        <z-button size="mini" @click="handleEdit(row, index)">Edit</z-button>
        <z-button
          size="mini"
          type="danger"
          @click="handleDelete(row, index)"
        >Delete</z-button>
      </template>
    </z-table-column>
  </z-table>

  <!-- Empty table with custom text -->
  <z-table :data="[]" empty-text="No records found">
    <z-table-column prop="name" label="Name"></z-table-column>
  </z-table>

  <!-- Empty table with custom slot -->
  <z-table :data="[]">
    <z-table-column prop="name" label="Name"></z-table-column>
    <template #empty>
      <div style="padding: 40px; text-align: center;">
        <p>No data available</p>
        <z-button type="primary">Add New</z-button>
      </div>
    </template>
  </z-table>
</template>

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

const tableData = ref([
  { id: 1, name: 'Alice Johnson', email: 'alice@example.com', role: 'Admin' },
  { id: 2, name: 'Bob Smith', email: 'bob@example.com', role: 'User' },
  { id: 3, name: 'Charlie Brown', email: 'charlie@example.com', role: 'Editor' }
])

const handleEdit = (row, index) => {
  console.log('Edit:', row, 'at index', index)
}

const handleDelete = (row, index) => {
  tableData.value.splice(index, 1)
  console.log('Deleted:', row)
}
</script>
```

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

### Vue Switch Component Examples

Source: https://context7.com/chrischan13/zenless-ui/llms.txt

Demonstrates the z-switch component, including basic toggling, different sizes (large, small), disabled state, and handling the change event to capture the switch's boolean state.

```vue
<template>
  <!-- Basic switch -->
  <z-switch v-model="switchValue"></z-switch>

  <!-- With sizes -->
  <z-switch v-model="value" size="large"></z-switch>
  <z-switch v-model="value" size="small"></z-switch>

  <!-- Disabled switch -->
  <z-switch v-model="value" disabled></z-switch>

  <!-- With change event -->
  <z-switch v-model="enabled" @change="handleSwitchChange"></z-switch>
</template>

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

const switchValue = ref(false)
const value = ref(true)
const enabled = ref(false)

const handleSwitchChange = (value) => {
  console.log('Switch state:', value)
}
</script>
```

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

### Vue Card Component Examples

Source: https://context7.com/chrischan13/zenless-ui/llms.txt

Demonstrates the implementation of the z-card component, including a basic card, a card with a custom header slot containing actions, and a card with both header and footer slots for structured content.

```vue
<template>
  <!-- Basic card -->
  <z-card>
    <p>Card content goes here.</p>
  </z-card>

  <!-- Card with header slot -->
  <z-card>
    <template #header>
      <div style="display: flex; justify-content: space-between; align-items: center;">
        <span>Card Title</span>
        <z-button size="mini">Action</z-button>
      </div>
    </template>
    <p>Card body content.</p>
  </z-card>

  <!-- Card with footer -->
  <z-card>
    <p>Main content area.</p>
    <template #footer>
      <z-button type="primary">Save</z-button>
      <z-button>Cancel</z-button>
    </template>
  </z-card>
</template>
```

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

### Vue Form and Form Item Component Example

Source: https://context7.com/chrischan13/zenless-ui/llms.txt

Demonstrates the usage of z-form and z-form-item components for creating user input forms. It includes various input types like text, password, select, radio, checkbox, switch, and textarea, along with submit and reset buttons. It also shows an example of an inline form for search functionality. This component requires Vue.js and the Zenless UI library.

```vue
<template>
  <!-- Complete form example -->
  <z-form :label-width="120" label-position="left">
    <z-form-item label="Username">
      <z-input v-model="formData.username" placeholder="Enter username"></z-input>
    </z-form-item>

    <z-form-item label="Email">
      <z-input v-model="formData.email" placeholder="Enter email"></z-input>
    </z-form-item>

    <z-form-item label="Password">
      <z-input
        v-model="formData.password"
        type="password"
        placeholder="Enter password"
      ></z-input>
    </z-form-item>

    <z-form-item label="Country">
      <z-select v-model="formData.country" placeholder="Select country">
        <z-option label="United States" value="us"></z-option>
        <z-option label="United Kingdom" value="uk"></z-option>
        <z-option label="China" value="cn"></z-option>
      </z-select>
    </z-form-item>

    <z-form-item label="Gender">
      <z-radio-group v-model="formData.gender">
        <z-radio label="Male"></z-radio>
        <z-radio label="Female"></z-radio>
      </z-radio-group>
    </z-form-item>

    <z-form-item label="Interests">
      <z-checkbox-group v-model="formData.interests">
        <z-checkbox label="Sports"></z-checkbox>
        <z-checkbox label="Music"></z-checkbox>
        <z-checkbox label="Reading"></z-checkbox>
      </z-checkbox-group>
    </z-form-item>

    <z-form-item label="Bio">
      <z-input
        v-model="formData.bio"
        type="textarea"
        :rows="4"
        placeholder="Tell us about yourself"
      ></z-input>
    </z-form-item>

    <z-form-item label="Agree">
      <z-switch v-model="formData.agree"></z-switch>
    </z-form-item>

    <z-form-item>
      <z-button type="primary" @click="handleSubmit">Submit</z-button>
      <z-button @click="handleReset">Reset</z-button>
    </z-form-item>
  </z-form>

  <!-- Inline form -->
  <z-form inline>
    <z-form-item label="Search">
      <z-input v-model="search" placeholder="Search..."></z-input>
    </z-form-item>
    <z-form-item>
      <z-button type="primary">Search</z-button>
    </z-form-item>
  </z-form>
</template>

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

const formData = ref({
  username: '',
  email: '',
  password: '',
  country: '',
  gender: 'Male',
  interests: [],
  bio: '',
  agree: false
})

const search = ref('')

const handleSubmit = () => {
  console.log('Form data:', formData.value)
}

const handleReset = () => {
  formData.value = {
    username: '',
    email: '',
    password: '',
    country: '',
    gender: 'Male',
    interests: [],
    bio: '',
    agree: false
  }
}
</script>
```

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

### Access and Modify Zenless UI Runtime Configuration

Source: https://context7.com/chrischan13/zenless-ui/llms.txt

Demonstrates how to access and modify Zenless UI's global settings (bold, italic, locale) at runtime within a Vue component's setup function.

```javascript
import { useZenless } from 'zenless-ui'

export default {
  setup() {
    const zenless = useZenless()

    // Modify settings at runtime
    zenless.isBold = true
    zenless.isItalic = false
    zenless.locale = locale.ja

    return { zenless }
  }
}
```

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

### Tooltip Component Usage in Vue

Source: https://context7.com/chrischan13/zenless-ui/llms.txt

Demonstrates the Tooltip component for providing contextual information on hover. Examples cover basic tooltips, tooltips with specified placement (e.g., 'top'), and tooltips using a content slot for richer HTML content.

```vue
<template>
  <!-- Basic tooltip -->
  <z-tooltip content="This is a tooltip">
    <z-button>Hover me</z-button>
  </z-tooltip>

  <!-- Tooltip with placement -->
  <z-tooltip content="Top tooltip" placement="top">
    <z-button>Top</z-button>
  </z-tooltip>

  <!-- Custom content slot -->
  <z-tooltip>
    <template #content>
      <div>
        <strong>Custom Tooltip</strong>
        <p>With rich content</p>
      </div>
    </template>
    <z-button>Custom</z-button>
  </z-tooltip>
</template>
```

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

### Vue Menu Component Examples

Source: https://context7.com/chrischan13/zenless-ui/llms.txt

Demonstrates the implementation of a vertical menu and a menu with a select event handler using the z-menu component. It utilizes Vue's ref for managing active states and handles menu selection events.

```vue
<template>
  <!-- Vertical menu -->
  <z-menu v-model="activeMenu">
    <z-menu-item index="1" icon="home">Home</z-menu-item>
    <z-menu-item index="2" icon="user">Profile</z-menu-item>
    <z-sub-menu index="3" title="Settings" icon="setting">
      <z-menu-item index="3-1">General</z-menu-item>
      <z-menu-item index="3-2">Security</z-menu-item>
      <z-menu-item index="3-3">Privacy</z-menu-item>
    </z-sub-menu>
    <z-menu-item index="4" icon="message">Messages</z-menu-item>
  </z-menu>

  <!-- With change event -->
  <z-menu v-model="selected" @select="handleMenuSelect">
    <z-menu-item index="dashboard">Dashboard</z-menu-item>
    <z-menu-item index="analytics">Analytics</z-menu-item>
  </z-menu>
</template>

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

const activeMenu = ref('1')
const selected = ref('dashboard')

const handleMenuSelect = (index) => {
  console.log('Selected menu:', index)
}
</script>
```

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

### Vue Input Component Examples

Source: https://context7.com/chrischan13/zenless-ui/llms.txt

Demonstrates the various configurations and features of the Vue Input component, including size variations, clearable functionality, password input, prefix/suffix icons, custom slots, textarea mode, event handling, and disabled/readonly states. It requires Vue.js and the Zenless UI library.

```Vue.js
<template>
  <!-- Basic input -->
  <z-input v-model="username" placeholder="Enter username"></z-input>

  <!-- Sizes -->
  <z-input v-model="text" size="extra"></z-input>
  <z-input v-model="text" size="large"></z-input>
  <z-input v-model="text" size="small"></z-input>
  <z-input v-model="text" size="mini"></z-input>

  <!-- With clearable -->
  <z-input v-model="clearableText" clearable placeholder="Clearable input"></z-input>

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

  <!-- With prefix/suffix icons -->
  <z-input
    v-model="search"
    prefix-icon="search"
    placeholder="Search..."
  ></z-input>
  <z-input
    v-model="email"
    suffix-icon="message"
    placeholder="Email"
  ></z-input>

  <!-- With custom slots -->
  <z-input v-model="amount">
    <template #prepend>https://</template>
    <template #append>.com</template>
  </z-input>

  <!-- Textarea with auto-resize -->
  <z-input
    v-model="description"
    type="textarea"
    :rows="3"
    :auto-size="true"
    placeholder="Enter description"
  ></z-input>

  <!-- With events -->
  <z-input
    v-model="value"
    @input="handleInput"
    @change="handleChange"
    @focus="handleFocus"
    @blur="handleBlur"
    @clear="handleClear"
  ></z-input>

  <!-- Disabled and readonly states -->
  <z-input v-model="text" disabled></z-input>
  <z-input v-model="text" readonly></z-input>
</template>

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

const username = ref('')
const text = ref('')
const clearableText = ref('')
const password = ref('')
const search = ref('')
const email = ref('')
const amount = ref('')
const description = ref('')
const value = ref('')

const handleInput = (val) => console.log('Input:', val)
const handleChange = (val) => console.log('Changed:', val)
const handleFocus = (event) => console.log('Focused')
const handleBlur = (event) => console.log('Blurred')
const handleClear = () => console.log('Cleared')
</script>
```

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

### Vue Select and Option Component Examples

Source: https://context7.com/chrischan13/zenless-ui/llms.txt

Illustrates the usage of the Vue Select and Option components, showcasing basic selection, size variants, clearable functionality, disabled states, custom empty text, event handling, and custom empty slots. This component requires Vue.js and the Zenless UI library.

```Vue.js
<template>
  <!-- Basic select -->
  <z-select v-model="selectedValue" placeholder="Select option">
    <z-option label="Option 1" value="1"></z-option>
    <z-option label="Option 2" value="2"></z-option>
    <z-option label="Option 3" value="3"></z-option>
  </z-select>

  <!-- With sizes -->
  <z-select v-model="value" size="large">
    <z-option label="Large Option 1" value="l1"></z-option>
    <z-option label="Large Option 2" value="l2"></z-option>
  </z-select>

  <!-- Clearable select -->
  <z-select v-model="value" clearable placeholder="Clearable select">
    <z-option label="Apple" value="apple"></z-option>
    <z-option label="Banana" value="banana"></z-option>
    <z-option label="Orange" value="orange"></z-option>
  </z-select>

  <!-- Disabled state -->
  <z-select v-model="value" disabled>
    <z-option label="Disabled" value="disabled"></z-option>
  </z-select>

  <!-- With custom empty text -->
  <z-select v-model="value" empty-text="No options available">
    <!-- Empty options list -->
  </z-select>

  <!-- With events -->
  <z-select
    v-model="selected"
    @change="handleSelectChange"
    @clear="handleSelectClear"
  >
    <z-option label="Choice A" value="a"></z-option>
    <z-option label="Choice B" value="b"></z-option>
  </z-select>

  <!-- Custom empty slot -->
  <z-select v-model="value">
    <template #empty>
      <div style="padding: 20px; text-align: center;">
        No data found
      </div>
    </template>
  </z-select>
</template>

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

const selectedValue = ref('')
const value = ref('')
const selected = ref('a')

const handleSelectChange = (val) => {
  console.log('Selected:', val)
}

const handleSelectClear = () => {
  console.log('Selection cleared')
}
</script>
```

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

### Vue.js Radio Group Component Examples

Source: https://context7.com/chrischan13/zenless-ui/llms.txt

Demonstrates various ways to use the Z-Radio-Group and Z-Radio components in Vue.js. Includes basic radio selection, button-style radios, size variations, disabled options, and event handling for changes. Requires Vue.js and the Zenless UI library.

```vue
<template>
  <!-- Basic radio group -->
  <z-radio-group v-model="radio">
    <z-radio label="Option 1"></z-radio>
    <z-radio label="Option 2"></z-radio>
    <z-radio label="Option 3"></z-radio>
  </z-radio-group>

  <!-- Button-style radios -->
  <z-radio-group v-model="buttonRadio">
    <z-radio-button label="Button 1"></z-radio-button>
    <z-radio-button label="Button 2"></z-radio-button>
    <z-radio-button label="Button 3"></z-radio-button>
  </z-radio-group>

  <!-- With sizes -->
  <z-radio-group v-model="radio" size="large">
    <z-radio label="Large 1"></z-radio>
    <z-radio label="Large 2"></z-radio>
  </z-radio-group>

  <z-radio-group v-model="buttonRadio" size="small">
    <z-radio-button label="Small 1"></z-radio-button>
    <z-radio-button label="Small 2"></z-radio-button>
  </z-radio-group>

  <!-- Disabled radios -->
  <z-radio-group v-model="radio">
    <z-radio label="Enabled"></z-radio>
    <z-radio label="Disabled" disabled></z-radio>
  </z-radio-group>

  <!-- With change event -->
  <z-radio-group v-model="selected" @change="handleRadioChange">
    <z-radio label="Yes"></z-radio>
    <z-radio label="No"></z-radio>
  </z-radio-group>
</template>

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

const radio = ref('Option 1')
const buttonRadio = ref('Button 1')
const selected = ref('Yes')

const handleRadioChange = (value) => {
  console.log('Radio changed to:', value)
}
</script>
```

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

### Scrollbar Component Customization in Vue

Source: https://context7.com/chrischan13/zenless-ui/llms.txt

Demonstrates the Scrollbar component for creating custom scrollable areas. Includes examples of a scrollbar with a fixed height and content that overflows, as well as a scrollbar with its visibility hidden.

```vue
<template>
  <!-- Custom scrollbar -->
  <z-scrollbar style="height: 300px;">
    <div style="padding: 20px;">
      <p v-for="i in 50" :key="i">Line {{ i }} of content</p>
    </div>
  </z-scrollbar>

  <!-- Hidden scrollbar -->
  <z-scrollbar hide-scroll style="height: 200px;">
    <div>Content with hidden scrollbar</div>
  </z-scrollbar>
</template>
```

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

### Vue: Zenless UI Drawer Component Usage

Source: https://context7.com/chrischan13/zenless-ui/llms.txt

Demonstrates how to use the `z-drawer` component in Vue.js, which shares a similar API to the `z-modal` component but is designed for slide-in panels. Examples include basic drawer usage and configuring a drawer with a custom width.

```vue
<template>
  <!-- Basic drawer (same API as modal, but mode="drawer") -->
  <z-button @click="showDrawer = true">Open Drawer</z-button>

  <z-drawer
    v-model="showDrawer"
    title="Drawer Title"
    mode="drawer"
  >
    <p>This is drawer content.</p>
    <p>Drawer slides in from the right side.</p>
  </z-drawer>

  <!-- Custom width drawer -->
  <z-drawer
    v-model="showWideDrawer"
    title="Wide Drawer"
    mode="drawer"
    :width="600"
  >
    <p>This drawer is 600px wide.</p>
  </z-drawer>
</template>

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

const showDrawer = ref(false)
const showWideDrawer = ref(false)
</script>
```

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

### Collapse Component with Events in Vue

Source: https://context7.com/chrischan13/zenless-ui/llms.txt

Shows the Collapse and Collapse-Item components for creating accordion-like interfaces. Includes examples for managing active sections using v-model and handling collapse change events to log the active panel names.

```vue
<template>
  <!-- Basic collapse -->
  <z-collapse v-model="activeNames">
    <z-collapse-item title="Section 1" name="1">
      Content of section 1
    </z-collapse-item>
    <z-collapse-item title="Section 2" name="2">
      Content of section 2
    </z-collapse-item>
    <z-collapse-item title="Section 3" name="3">
      Content of section 3
    </z-collapse-item>
  </z-collapse>

  <!-- With change event -->
  <z-collapse v-model="active" @change="handleCollapseChange">
    <z-collapse-item title="FAQ 1" name="faq1">
      Answer to FAQ 1
    </z-collapse-item>
    <z-collapse-item title="FAQ 2" name="faq2">
      Answer to FAQ 2
    </z-collapse-item>
  </z-collapse>
</template>

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

const activeNames = ref(['1'])
const active = ref([])

const handleCollapseChange = (values) => {
  console.log('Active sections:', values)
}
</script>
```

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

### Pattern Component for Backgrounds in Vue

Source: https://context7.com/chrischan13/zenless-ui/llms.txt

Illustrates the Pattern component, used for creating decorative background elements. Examples include applying predefined pattern types like 'grid' and 'chessboard', and using the pattern as a background layer for other content.

```vue
<template>
  <!-- Decorative background pattern -->
  <z-pattern type="grid"></z-pattern>
  <z-pattern type="chessboard"></z-pattern>

  <!-- As background in components -->
  <div style="position: relative; height: 400px;">
    <z-pattern></z-pattern>
    <div style="position: relative; z-index: 1; padding: 20px;">
      Content over pattern
    </div>
  </div>
</template>
```

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

### Progress Component in Vue

Source: https://context7.com/chrischan13/zenless-ui/llms.txt

Shows the implementation of the Progress component for displaying loading or completion status. Examples include basic progress bars, bars with different color types (success, warning, danger), and bars with custom text labels.

```vue
<template>
  <!-- Basic progress bar -->
  <z-progress :percentage="50"></z-progress>

  <!-- Different types -->
  <z-progress :percentage="75" type="success"></z-progress>
  <z-progress :percentage="30" type="warning"></z-progress>
  <z-progress :percentage="90" type="danger"></z-progress>

  <!-- With custom text -->
  <z-progress :percentage="60" :show-text="true"></z-progress>
</template>
```

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

### Vue.js Checkbox Group Component Examples

Source: https://context7.com/chrischan13/zenless-ui/llms.txt

Illustrates the usage of Z-Checkbox and Z-Checkbox-Group components in Vue.js. Features include single checkboxes, checkbox groups, button-style checkboxes, size variations, disabled states, and event handling for selections. Requires Vue.js and the Zenless UI library.

```vue
<template>
  <!-- Basic checkbox -->
  <z-checkbox v-model="checked">Agree to terms</z-checkbox>

  <!-- Checkbox group -->
  <z-checkbox-group v-model="checkedItems">
    <z-checkbox label="Option A"></z-checkbox>
    <z-checkbox label="Option B"></z-checkbox>
    <z-checkbox label="Option C"></z-checkbox>
  </z-checkbox-group>

  <!-- Button-style checkboxes -->
  <z-checkbox-group v-model="buttonChecked">
    <z-checkbox-button label="HTML"></z-checkbox-button>
    <z-checkbox-button label="CSS"></z-checkbox-button>
    <z-checkbox-button label="JavaScript"></z-checkbox-button>
  </z-checkbox-group>

  <!-- With sizes -->
  <z-checkbox-group v-model="items" size="large">
    <z-checkbox label="Large 1"></z-checkbox>
    <z-checkbox label="Large 2"></z-checkbox>
  </z-checkbox-group>

  <!-- Disabled checkboxes -->
  <z-checkbox-group v-model="items">
    <z-checkbox label="Enabled"></z-checkbox>
    <z-checkbox label="Disabled" disabled></z-checkbox>
  </z-checkbox-group>

  <!-- With events -->
  <z-checkbox-group v-model="selected" @change="handleCheckboxChange">
    <z-checkbox label="Feature 1"></z-checkbox>
    <z-checkbox label="Feature 2"></z-checkbox>
    <z-checkbox label="Feature 3"></z-checkbox>
  </z-checkbox-group>
</template>

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

const checked = ref(false)
const checkedItems = ref(['Option A'])
const buttonChecked = ref(['HTML', 'CSS'])
const items = ref([])
const selected = ref([])

const handleCheckboxChange = (value) => {
  console.log('Checked items:', value)
}
</script>
```

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

### Configure Zenless UI Globally with Options

Source: https://context7.com/chrischan13/zenless-ui/llms.txt

Sets up Zenless UI with global configuration options for text styling (bold, italic) and language localization during application creation.

```javascript
import { createApp } from 'vue'
import ZenlessUI, { locale } from 'zenless-ui'
import 'zenless-ui/dist/index.css'
import App from './App.vue'

const app = createApp(App)

// Configure global settings
app.use(ZenlessUI, {
  isBold: false,      // Use bold text globally (default: false)
  isItalic: true,     // Use italic text globally (default: true)
  locale: locale.en   // Set language (default: zhCn)
})

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

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

### Theme Constants and Utility Functions in Zenless UI

Source: https://context7.com/chrischan13/zenless-ui/llms.txt

Provides access to theme constants like sizes and colors, along with utility functions for generating IDs, validating values, and formatting numbers. Imports from 'zenless-ui/constants' and '@/utils'. Useful for consistent theming and common data manipulation tasks.

```javascript
// Import constants
import { zenlessSizes, zenlessColors } from 'zenless-ui/constants'

// Available sizes
const sizes = ['extra', 'large', 'small', 'mini']

// Available colors
const colors = [
  'default', 'primary', 'success', 'danger', 'warning', 'info',
  'ether', 'fire', 'electric', 'ice', 'physical'
]

// Utility functions
import { generateId, isValidValue, prefixNumber } from '@/utils'

// Generate random ID
const id = generateId()  // Returns random number 0-9999

// Check if value is valid (not undefined, null, or NaN)
const valid = isValidValue(someValue)

// Prefix single digit numbers with zero
const formatted = prefixNumber(5)  // Returns "05"
```

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

### Internationalization Management in Zenless UI

Source: https://context7.com/chrischan13/zenless-ui/llms.txt

Manages supported languages and allows setting the locale globally or at runtime. Imports locale data from 'zenless-ui' and uses the 'useZenless' composable for dynamic locale changes. Requires 'zenless-ui' package.

```javascript
// Available locales
import { locale } from 'zenless-ui'

// Supported languages
const languages = {
  en: locale.en,       // English
  zhCn: locale.zhCn,   // Chinese (Simplified)
  ja: locale.ja,       // Japanese
  ko: locale.ko,       // Korean
  de: locale.de,       // German
  fr: locale.fr,       // French
  es: locale.es,       // Spanish
  it: locale.it,       // Italian
  ru: locale.ru,       // Russian
  id: locale.id        // Indonesian
}

// Set locale during installation
app.use(ZenlessUI, {
  locale: locale.en
})

// Change locale at runtime
import { useZenless } from 'zenless-ui'

const zenless = useZenless()
zenless.locale = locale.ja  // Switch to Japanese
```

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

### Icon and Backtop Components in Vue

Source: https://context7.com/chrischan13/zenless-ui/llms.txt

Shows the usage of the Icon component for displaying various icons with options for color, and the Backtop component which provides a button to scroll the page back to the top.

```vue
<template>
  <!-- Icon component -->
  <z-icon name="home"></z-icon>
  <z-icon name="user" color="primary"></z-icon>
  <z-icon name="setting"></z-icon>

  <!-- Back to top button -->
  <z-backtop :bottom="50" :right="50"></z-backtop>
</template>
```

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

### Tag and Badge Components in Vue

Source: https://context7.com/chrischan13/zenless-ui/llms.txt

Demonstrates the usage of Tag and Badge components. Includes basic tags with different types and badges with numerical values, maximum limits, and dot indicators. These components are used for categorizing information and displaying counts.

```vue
<template>
  <!-- Basic tags -->
  <z-tag>Default</z-tag>
  <z-tag type="primary">Primary</z-tag>
  <z-tag type="success">Success</z-tag>
  <z-tag type="danger">Danger</z-tag>
  <z-tag type="warning">Warning</z-tag>

  <!-- Badges -->
  <z-badge :value="5">
    <z-button>Messages</z-button>
  </z-badge>

  <z-badge :value="99" :max="99">
    <z-button>Notifications</z-button>
  </z-badge>

  <!-- Badge with dot -->
  <z-badge is-dot>
    <z-button icon="message"></z-button>
  </z-badge>
</template>
```

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

### Vue: Programmatic Message API with Zenless UI

Source: https://context7.com/chrischan13/zenless-ui/llms.txt

Demonstrates how to use the `useMessage` hook from 'zenless-ui' to display various types of messages programmatically. Supports default, success, warning, error, and custom duration messages, as well as messages configured via an object.

```vue
<template>
  <div>
    <z-button @click="showDefaultMessage">Default Message</z-button>
    <z-button type="success" @click="showSuccessMessage">Success</z-button>
    <z-button type="warning" @click="showWarningMessage">Warning</z-button>
    <z-button type="danger" @click="showErrorMessage">Error</z-button>
    <z-button @click="showCustomDuration">Custom Duration</z-button>
  </div>
</template>

<script setup>
import { useMessage } from 'zenless-ui'

const message = useMessage()

// Default message
const showDefaultMessage = () => {
  message('This is a default message')
}

// Success message
const showSuccessMessage = () => {
  message.success('Operation completed successfully!')
}

// Warning message
const showWarningMessage = () => {
  message.warning('Warning: Please check your input')
}

// Error message
const showErrorMessage = () => {
  message.error('Error: Something went wrong')
}

// Message with custom duration
const showCustomDuration = () => {
  message({
    message: 'This message will disappear in 5 seconds',
    type: 'success',
    duration: 5000  // Duration in milliseconds
  })
}

// Message with object syntax
const showObjectMessage = () => {
  message({
    message: 'Processing your request...', 
    type: 'info',
    duration: 2000
  })
}
</script>
```

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

### Vue: Zenless UI Modal Component Configuration

Source: https://context7.com/chrischan13/zenless-ui/llms.txt

Illustrates the usage of the `z-modal` component in Vue.js, showcasing various configuration options. This includes basic modal display, custom width, fullscreen mode, hiding the footer or cancel button, custom button text, using footer slots, handling modal events, and disabling mask closability.

```vue
<template>
  <!-- Basic modal -->
  <z-button @click="showModal = true">Open Modal</z-button>

  <z-modal
    v-model="showModal"
    title="Modal Title"
    @confirm="handleConfirm"
    @cancel="handleCancel"
  >
    <p>This is the modal content.</p>
    <p>You can put any content here.</p>
  </z-modal>

  <!-- Custom width -->
  <z-modal v-model="showCustomModal" title="Custom Width" :width="800">
    <p>This modal has a custom width of 800px.</p>
  </z-modal>

  <!-- Fullscreen modal -->
  <z-modal v-model="showFullscreen" title="Fullscreen" :fullscreen="true">
    <p>This modal is displayed in fullscreen mode.</p>
  </z-modal>

  <!-- Modal without footer -->
  <z-modal v-model="showNoFooter" title="No Footer" :show-footer="false">
    <p>This modal has no footer.</p>
  </z-modal>

  <!-- Modal without cancel button -->
  <z-modal
    v-model="showNoCancel"
    title="No Cancel"
    :show-cancel="false"
  >
    <p>This modal only has a confirm button.</p>
  </z-modal>

  <!-- Custom button text -->
  <z-modal
    v-model="showCustomText"
    title="Custom Buttons"
    cancel-text="Close"
    confirm-text="Save"
  >
    <p>Custom button text example.</p>
  </z-modal>

  <!-- Custom footer slot -->
  <z-modal v-model="showCustomFooter" title="Custom Footer">
    <p>Modal with custom footer.</p>
    <template #footer>
      <z-button type="primary" @click="handleCustomAction">Custom Action</z-button>
      <z-button @click="showCustomFooter = false">Close</z-button>
    </template>
  </z-modal>

  <!-- Modal events -->
  <z-modal
    v-model="showWithEvents"
    title="With Events"
    @open="handleOpen"
    @close="handleClose"
    @confirm="handleConfirm"
    @cancel="handleCancel"
  >
    <p>This modal triggers events.</p>
  </z-modal>

  <!-- Not closable by mask -->
  <z-modal
    v-model="showNotClosable"
    title="Not Mask Closable"
    :mask-closable="false"
  >
    <p>Click outside won't close this modal.</p>
  </z-modal>
</template>

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

const showModal = ref(false)
const showCustomModal = ref(false)
const showFullscreen = ref(false)
const showNoFooter = ref(false)
const showNoCancel = ref(false)
const showCustomText = ref(false)
const showCustomFooter = ref(false)
const showWithEvents = ref(false)
const showNotClosable = ref(false)

const handleOpen = () => console.log('Modal opened')
const handleClose = () => console.log('Modal closed')
const handleConfirm = () => {
  console.log('Confirmed')
  showModal.value = false
}
const handleCancel = () => console.log('Cancelled')
const handleCustomAction = () => {
  console.log('Custom action triggered')
  showCustomFooter.value = false
}
</script>
```

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