### Custom Container Examples - Markdown

Source: https://github.com/fkcaikengren/carrybrick-ui/blob/main/docs/vue/_example.md

Illustrates the usage of custom containers in VitePress markdown for different informational purposes. These include 'info', 'tip', 'warning', 'danger', and 'details' blocks.

```markdown
::: info
This is an info box.
:::

::: tip
This is a tip.
:::

::: warning
This is a warning.
:::

::: danger
This is a dangerous warning.
:::

::: details
This is a details block.
:::
```

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

### CBButton - Vue Button Component Examples

Source: https://context7.com/fkcaikengren/carrybrick-ui/llms.txt

Demonstrates the usage of the CBButton component in Vue 3, showcasing various types, variants, states, sizes, and icon support. It highlights how to integrate the button component into a Vue template with basic script setup.

```vue
<script setup lang="ts">
import { CBButton } from '@carrybrick-ui/vue'
</script>

<template>
  <!-- Different button types -->
  <CBButton>Default</CBButton>
  <CBButton type="primary">Primary</CBButton>
  <CBButton type="success">Success</CBButton>
  <CBButton type="warning">Warning</CBButton>
  <CBButton type="danger">Danger</CBButton>
  <CBButton type="info">Info</CBButton>

  <!-- Button variants -->
  <CBButton type="primary" plain>Plain Button</CBButton>
  <CBButton type="primary" text>Text Button</CBButton>
  <CBButton type="primary" round>Round Button</CBButton>

  <!-- Button states -->
  <CBButton disabled>Disabled</CBButton>
  <CBButton loading>Loading</CBButton>

  <!-- Button with icon -->
  <CBButton type="primary" icon="search">Search</CBButton>

  <!-- Different sizes -->
  <CBButton size="small">Small</CBButton>
  <CBButton size="default">Default</CBButton>
  <CBButton size="large">Large</CBButton>

  <!-- Native types for forms -->
  <CBButton native-type="submit">Submit</CBButton>
  <CBButton native-type="reset">Reset</CBButton>
</template>
```

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

### Syntax Highlighting with Line Highlight - JavaScript

Source: https://github.com/fkcaikengren/carrybrick-ui/blob/main/docs/vue/_example.md

Demonstrates syntax highlighting for JavaScript code using VitePress's built-in markdown extensions. The `{4}` syntax highlights line 4. This feature is powered by Shiki.

```javascript
export default {
  data () {
    return {
      msg: 'Highlighted!'
    }
  }
}
```

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

### Global Installation of CarryBrick UI (TypeScript)

Source: https://context7.com/fkcaikengren/carrybrick-ui/llms.txt

Installs all CarryBrick UI components globally within a Vue application using `app.use()`. This makes all components readily available without individual imports. Dependencies: '@carrybrick-ui/vue'.

```typescript
import { createApp } from 'vue'
import CarryBrickUI from '@carrybrick-ui/vue'
import App from './App.vue'

const app = createApp(App)

// Install all components globally
app.use(CarryBrickUI)

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

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

### CBInput - Vue Input Component Examples

Source: https://context7.com/fkcaikengren/carrybrick-ui/llms.txt

Illustrates the functionality of the CBInput component in Vue 3, including basic text input, password fields, inputs with prefix/suffix icons, clearable functionality, disabled/readonly states, and different size options. It shows how to use v-model for data binding and reactive updates.

```vue
<script setup lang="ts">
import { ref, watch } from 'vue'
import { CBInput } from '@carrybrick-ui/vue'

const username = ref('')
const password = ref('')
const searchText = ref('')

watch(username, (newVal) => {
  console.log('Username changed:', newVal)
})
</script>

<template>
  <!-- Basic input -->
  <CBInput
    v-model="username"
    placeholder="Enter username"
    :style="{ width: '200px' }"
  />

  <!-- Password input -->
  <CBInput
    v-model="password"
    type="password"
    placeholder="Enter password"
    :style="{ width: '200px' }"
  />

  <!-- Input with prefix icon -->
  <CBInput
    v-model="searchText"
    placeholder="Search..."
    prefix-icon="search"
  />

  <!-- Input with suffix icon -->
  <CBInput
    v-model="username"
    suffix-icon="user"
  />

  <!-- Clearable input -->
  <CBInput
    v-model="username"
    clearable
    placeholder="Type and clear"
  />

  <!-- Disabled input -->
  <CBInput
    v-model="username"
    disabled
  />

  <!-- Readonly input -->
  <CBInput
    v-model="username"
    readonly
  />

  <!-- Different sizes -->
  <CBInput v-model="username" size="small" />
  <CBInput v-model="username" size="default" />
  <CBInput v-model="username" size="large" />
</template>
```

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

### CBTextarea - Vue Textarea Component Examples

Source: https://context7.com/fkcaikengren/carrybrick-ui/llms.txt

Demonstrates the implementation of the CBTextarea component in Vue 3, showing its basic usage, fixed row configuration, autosize functionality (both automatic and with min/max row limits), and disabled state. It utilizes v-model for two-way data binding.

```vue
<script setup lang="ts">
import { ref } from 'vue'
import { CBTextarea } from '@carrybrick-ui/vue'

const description = ref('')
const comment = ref('')
</script>

<template>
  <!-- Basic textarea -->
  <CBTextarea
    v-model="description"
    placeholder="Enter description"
    :style="{ width: '300px' }"
  />

  <!-- Textarea with fixed rows -->
  <CBTextarea
    v-model="comment"
    :rows="5"
    placeholder="Enter your comment"
  />

  <!-- Autosize textarea (adjusts height automatically) -->
  <CBTextarea
    v-model="description"
    :autosize="true"
    placeholder="Auto-resizing textarea"
  />

  <!-- Autosize with min/max rows -->
  <CBTextarea
    v-model="description"
    :autosize="{ minRows: 3, maxRows: 10 }"
    placeholder="Min 3 rows, max 10 rows"
  />

  <!-- Disabled textarea -->
  <CBTextarea
    v-model="description"
    disabled
  />
</template>
```

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

### CBPopover - Popover Component (Vue)

Source: https://context7.com/fkcaikengren/carrybrick-ui/llms.txt

A floating content container that appears relative to a reference element. Supports configurable placement and trigger behavior (click, hover). Dependencies: '@carrybrick-ui/vue', '@element-plus/icons-vue' (for buttons in examples).

```vue
<script setup lang="ts">
import { CBPopover, CBButton } from '@carrybrick-ui/vue'
</script>

<template>
  <!-- Basic popover (click trigger by default) -->
  <CBPopover>
    <template #reference>
      <CBButton>Click Me</CBButton>
    </template>
    <template #default>
      <div>
        <h5>Popover Title</h5>
        <p>This is the popover content</p>
      </div>
    </template>
  </CBPopover>

  <!-- Hover trigger -->
  <CBPopover trigger="hover">
    <template #reference>
      <CBButton>Hover Me</CBButton>
    </template>
    <template #default>
      <p>Content appears on hover</p>
    </template>
  </CBPopover>

  <!-- Different placements -->
  <CBPopover placement="top">
    <template #reference>
      <CBButton>Top</CBButton>
    </template>
    <template #default>
      <p>Content on top</p>
    </template>
  </CBPopover>

  <CBPopover placement="bottom">
    <template #reference>
      <CBButton>Bottom</CBButton>
    </template>
    <template #default>
      <p>Content on bottom</p>
    </template>
  </CBPopover>

  <CBPopover placement="left">
    <template #reference>
      <CBButton>Left</CBButton>
    </template>
    <template #default>
      <p>Content on left</p>
    </template>
  </CBPopover>

  <CBPopover placement="right">
    <template #reference>
      <CBButton>Right</CBButton>
    </template>
    <template #default>
      <p>Content on right</p>
    </template>
  </CBPopover>
</template>
```

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

### Import Individual Vue Components

Source: https://context7.com/fkcaikengren/carrybrick-ui/llms.txt

Demonstrates importing and registering specific CarryBrick UI components (CBButton, CBInput, CBForm, CBFormItem) individually in a Vue 3 application. This approach enhances tree-shaking by only including necessary components. It requires Vue 3 and the @carrybrick-ui/vue package.

```typescript
import { createApp } from 'vue'
import { CBButton, CBInput, CBForm, CBFormItem } from '@carrybrick-ui/vue'
import type { FormRules, FormInstance } from '@carrybrick-ui/vue'
import App from './App.vue'

const app = createApp(App)

// Install specific components
app.component('CBButton', CBButton)
app.component('CBInput', CBInput)
app.component('CBForm', CBForm)
app.component('CBFormItem', CBFormItem)

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

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

### CBCollapse and CBCollapseItem - Collapsible Panel Components (Vue)

Source: https://context7.com/fkcaikengren/carrybrick-ui/llms.txt

Implements accordion-style collapsible panels with support for single or multiple open items. Uses `v-model` for state management and accepts `accordion` prop for single-item expansion. Dependencies: '@carrybrick-ui/vue'.

```vue
<script setup lang="ts">
import { ref, watch } from 'vue'
import { CBCollapse, CBCollapseItem } from '@carrybrick-ui/vue'

// Array of open panel names (for multiple panels)
const openPanels = ref(['panel1'])

// Single value (for accordion mode)
const activePanel = ref('a')

watch(openPanels, (newVal) => {
  console.log('Open panels:', newVal)
})
</script>

<template>
  <!-- Multiple panels can be open -->
  <CBCollapse v-model="openPanels">
    <CBCollapseItem name="panel1" title="Panel 1">
      <h3>Content Title</h3>
      <p>This is the content for panel 1</p>
      <p>You can put any HTML content here</p>
    </CBCollapseItem>

    <CBCollapseItem name="panel2" title="Panel 2">
      <p>This is the content for panel 2</p>
    </CBCollapseItem>

    <CBCollapseItem name="panel3" title="Panel 3">
      <p>This is the content for panel 3</p>
    </CBCollapseItem>
  </CBCollapse>

  <!-- Accordion mode (only one panel open at a time) -->
  <CBCollapse v-model="activePanel" accordion>
    <CBCollapseItem name="a" title="Section A">
      <div>Content for section A</div>
      <div>More content here</div>
    </CBCollapseItem>

    <CBCollapseItem name="b" title="Section B">
      <div>Content for section B</div>
    </CBCollapseItem>

    <CBCollapseItem name="c" title="Section C">
      <div>Content for section C</div>
    </CBCollapseItem>
  </CBCollapse>
</template>
```

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

### Vue Form Validation with CBForm and CBFormItem

Source: https://context7.com/fkcaikengren/carrybrick-ui/llms.txt

Demonstrates how to use CBForm and CBFormItem for creating forms with field-level validation. It utilizes async-validator for rule definition and provides programmatic control over form submission and reset. Dependencies include @carrybrick-ui/vue.

```vue
<script setup lang="ts">
import { reactive, ref } from 'vue'
import { CBForm, CBFormItem, CBInput, CBTextarea, CBButton } from '@carrybrick-ui/vue'
import type { FormRules, FormInstance } from '@carrybrick-ui/vue'

interface FormModel {
  name: string
  email: string
  desc: string
}

const model = ref<FormModel>({
  name: '',
  email: '',
  desc: ''
})

const rules = reactive<FormRules<FormModel>>({
  name: [
    { type: 'string', required: true, message: 'Name is required', trigger: 'blur' },
    { min: 3, max: 20, message: 'Name length must be between 3 and 20', trigger: 'blur' }
  ],
  email: [
    { type: 'string', required: true, message: 'Email is required', trigger: 'blur' },
    { type: 'email', message: 'Please enter a valid email', trigger: 'blur' }
  ],
  desc: [
    { type: 'string', required: true, message: 'Description is required', trigger: 'blur' },
    { min: 10, message: 'Description must be at least 10 characters', trigger: 'blur' }
  ]
})

const formEl = ref<FormInstance>()

const onSubmit = async () => {
  if (!formEl.value) return

  try {
    const { valid, fields } = await formEl.value.validate()
    if (valid) {
      console.log('Form is valid, submitting:', model.value)
      // Perform API call or other submission logic
    } else {
      console.error('Validation failed:', fields)
    }
  } catch (error) {
    console.error('Validation error:', error)
  }
}

const resetForm = () => {
  formEl.value?.resetFields()
}
</script>

<template>
  <CBForm
    :model="model"
    :rules="rules"
    label-position="left"
    label-width="100px"
    ref="formEl"
  >
    <CBFormItem label="Name" prop="name">
      <CBInput v-model="model.name" />
    </CBFormItem>

    <CBFormItem label="Email" prop="email">
      <CBInput v-model="model.email" type="text" />
    </CBFormItem>

    <CBFormItem label="Description" prop="desc">
      <CBTextarea v-model="model.desc" :rows="4" />
    </CBFormItem>

    <CBFormItem>
      <CBButton type="primary" @click="onSubmit">Submit</CBButton>
      <CBButton @click="resetForm">Reset</CBButton>
    </CBFormItem>
  </CBForm>
</template>
```

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

### Vue CBSwitch Toggle Switch Component

Source: https://context7.com/fkcaikengren/carrybrick-ui/llms.txt

Illustrates the usage of the CBSwitch component for creating toggle switches. It supports customization of values, colors, text labels, sizes, and states like disabled and loading. Dependencies include @carrybrick-ui/vue.

```vue
<script setup lang="ts">
import { ref, watch } from 'vue'
import { CBSwitch } from '@carrybrick-ui/vue'

const isEnabled = ref(false)
const notificationEnabled = ref(true)
const userStatus = ref('active')

watch(isEnabled, (newVal) => {
  console.log('Switch toggled:', newVal)
})
</script>

<template>
  <!-- Basic switch -->
  <CBSwitch v-model="isEnabled" />

  <!-- Switch with custom colors (using CSS variables) -->
  <CBSwitch
    v-model="notificationEnabled"
    style="--cb-switch-on-color: #13ce66; --cb-switch-off-color: #ff4949"
  />

  <!-- Switch with text labels -->
  <CBSwitch
    v-model="isEnabled"
    active-text="ON"
    inactive-text="OFF"
  />

  <!-- Switch with custom values -->
  <CBSwitch
    v-model="userStatus"
    active-value="active"
    inactive-value="inactive"
  />

  <!-- Disabled switch -->
  <CBSwitch
    v-model="isEnabled"
    disabled
  />

  <!-- Loading switch -->
  <CBSwitch
    v-model="isEnabled"
    loading
  />

  <!-- Different sizes -->
  <CBSwitch v-model="isEnabled" size="small" />
  <CBSwitch v-model="isEnabled" size="default" />
  <CBSwitch v-model="isEnabled" size="large" />

  <!-- Custom width -->
  <CBSwitch
    v-model="isEnabled"
    :width="60"
  />
</template>
```

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

### CBIcon - Icon Component (Vue)

Source: https://context7.com/fkcaikengren/carrybrick-ui/llms.txt

A wrapper component for icons, compatible with Element Plus icons. Allows customization of size and color. Dependencies: '@carrybrick-ui/vue', '@element-plus/icons-vue'.

```vue
<script setup lang="ts">
import { CBIcon } from '@carrybrick-ui/vue'
import { ArrowRight, CirclePlus, Check, InfoFilled, Search, User } from '@element-plus/icons-vue'
</script>

<template>
  <!-- Basic icons -->
  <CBIcon><ArrowRight /></CBIcon>
  <CBIcon><CirclePlus /></CBIcon>
  <CBIcon><Check /></CBIcon>
  <CBIcon><InfoFilled /></CBIcon>

  <!-- Icons with custom size -->
  <CBIcon size="16px"><Search /></CBIcon>
  <CBIcon size="24px"><User /></CBIcon>
  <CBIcon size="32px"><InfoFilled /></CBIcon>

  <!-- Icons with custom color -->
  <CBIcon color="#409eff"><ArrowRight /></CBIcon>
  <CBIcon color="#67c23a"><Check /></CBIcon>
  <CBIcon color="#e6a23c"><InfoFilled /></CBIcon>
  <CBIcon color="#f56c6c"><CirclePlus /></CBIcon>

  <!-- Combined size and color -->
  <CBIcon size="20px" color="#b2b">
    <ArrowRight />
  </CBIcon>
  <CBIcon size="20px" color="#2bb">
    <CirclePlus />
  </CBIcon>
  <CBIcon size="20px" color="#bb2">
    <Check />
  </CBIcon>
</template>
```

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