### Dropdown Placement Examples

Source: https://github.com/easysoft/zui/blob/main/lib/dropdown/README.md

Demonstrates various `data-placement` options for controlling the dropdown menu's position relative to the trigger button. Includes examples for top, bottom, left, and right alignments, with start, center, and end variations.

```html
<button class="btn" type="button" data-toggle="dropdown" data-placement="top-start" data-arrow="true">上方左侧对齐 <span class="caret"></span></button>
<menu class="dropdown-menu menu">
  <li class="menu-item"><a>操作</a></li>
  <li class="menu-item"><a>另一个上方右侧对齐操作</a></li>
  <li class="menu-item"><a>更多操作</a></li>
</menu>

<button class="btn" type="button" data-toggle="dropdown" data-placement="top" data-arrow="true">上方居中对齐 <span class="caret"></span></button>
<menu class="dropdown-menu menu">
  <li class="menu-item"><a>操作</a></li>
  <li class="menu-item"><a>另一个操作</a></li>
  <li class="menu-item"><a>更多操作</a></li>
</menu>

<button class="btn" type="button" data-toggle="dropdown" data-placement="top-end" data-arrow="true">上方右侧对齐 <span class="caret"></span></button>
<menu class="dropdown-menu menu">
  <li class="menu-item"><a>操作</a></li>
  <li class="menu-item"><a>另一个操作</a></li>
  <li class="menu-item"><a>更多操作</a></li>
</menu>

<button class="btn" type="button" data-toggle="dropdown" data-placement="bottom-start" data-arrow="true">下方左侧对齐 <span class="caret"></span></button>
<menu class="dropdown-menu menu">
  <li class="menu-item"><a>操作</a></li>
  <li class="menu-item"><a>另一个操作</a></li>
  <li class="menu-item"><a>更多操作</a></li>
</menu>

<button class="btn" type="button" data-toggle="dropdown" data-placement="bottom" data-arrow="true">下方居中对齐 <span class="caret"></span></button>
<menu class="dropdown-menu menu">
  <li class="menu-item"><a>操作</a></li>
  <li class="menu-item"><a>另一个操作</a></li>
  <li class="menu-item"><a>更多操作</a></li>
</menu>

<button class="btn" type="button" data-toggle="dropdown" data-placement="bottom-end" data-arrow="true">下方右侧对齐 <span class="caret"></span></button>
<menu class="dropdown-menu menu">
  <li class="menu-item"><a>操作</a></li>
  <li class="menu-item"><a>另一个操作</a></li>
  <li class="menu-item"><a>更多操作</a></li>
</menu>

<button class="btn" type="button" data-toggle="dropdown" data-placement="left-start" data-arrow="true">左侧上方 <span class="caret"></span></button>
<menu class="dropdown-menu menu">
  <li class="menu-item"><a>操作</a></li>
  <li class="menu-item"><a>另一个操作</a></li>
  <li class="menu-item"><a>更多操作</a></li>
</menu>

<button class="btn" type="button" data-toggle="dropdown" data-placement="left" data-arrow="true">左侧居中对齐 <span class="caret"></span></button>
<menu class="dropdown-menu menu">
  <li class="menu-item"><a>操作</a></li>
  <li class="menu-item"><a>另一个操作</a></li>
  <li class="menu-item"><a>更多操作</a></li>
</menu>

<button class="btn" type="button" data-toggle="dropdown" data-placement="left-end" data-arrow="true">左侧下方对齐 <span class="caret"></span></button>
<menu class="dropdown-menu menu">
  <li class="menu-item"><a>操作</a></li>
  <li class="menu-item"><a>另一个操作</a></li>
  <li class="menu-item"><a>更多操作</a></li>
</menu>

<button class="btn" type="button" data-toggle="dropdown" data-placement="right-start" data-arrow="true">右侧上方 <span class="caret"></span></button>
<menu class="dropdown-menu menu">
  <li class="menu-item"><a>操作</a></li>
  <li class="menu-item"><a>另一个操作</a></li>
  <li class="menu-item"><a>更多操作</a></li>
</menu>

<button class="btn" type="button" data-toggle="dropdown" data-placement="right" data-arrow="true">右侧居中对齐 <span class="caret"></span></button>
<menu class="dropdown-menu menu">
  <li class="menu-item"><a>操作</a></li>
  <li class="menu-item"><a>另一个操作</a></li>
  <li class="menu-item"><a>更多操作</a></li>
</menu>

<button class="btn" type="button" data-toggle="dropdown" data-placement="right-end" data-arrow="true">右侧下方对齐 <span class="caret"></span></button>
<menu class="dropdown-menu menu">
  <li class="menu-item"><a>操作</a></li>
  <li class="menu-item"><a>另一个操作</a></li>
  <li class="menu-item"><a>更多操作</a></li>
</menu>
```

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

### Border Width Examples

Source: https://github.com/easysoft/zui/blob/main/lib/utilities/README.md

Shows how to set border widths for elements. Includes examples for all sides and individual sides (top, right, bottom, left) with various thickness options.

```html
<h4>All sides</h4>
<div class="border-0"></div>
<div class="border"></div>
<div class="border-2"></div>
<div class="border-4"></div>
<h4>Single side</h4>
<div class="border-t-0"></div>
<div class="border-r-0"></div>
<div class="border-b-0"></div>
<div class="border-l-0"></div>
<div class="border-t"></div>
<div class="border-r"></div>
<div class="border-b"></div>
<div class="border-l"></div>
<div class="border-t-2"></div>
<div class="border-r-2"></div>
<div class="border-b-2"></div>
<div class="border-l-2"></div>
<div class="border-t-4"></div>
<div class="border-r-4"></div>
<div class="border-b-4"></div>
<div class="border-l-4"></div>
```

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

### Interactivity: State Examples

Source: https://github.com/easysoft/zui/blob/main/lib/utilities/README.md

Demonstrates the usage of state classes for interactive elements like divs and buttons. Includes examples for default, active, and selected states.

```html
<div class="state"></div>
<div class="state active"></div>
<div class="state selected"></div>
<button class="btn">State Button</button>
<button class="btn active">Active Button</button>
<button class="btn selected">Selected Button</button>
<button class="btn primary">State Button</button>
<button class="btn primary active">Active Button</button>
<button class="btn primary selected">Selected Button</button>
```

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

### Gap Utility Examples

Source: https://github.com/easysoft/zui/blob/main/lib/utilities/docs/utilities/flex/gap.md

Demonstrates the usage of `gap-*`, `gap-x-*`, and `gap-y-*` classes to apply spacing in a flex container. The `arrayGap` variable in the script setup defines various gap configurations.

```html
<template v-for="item in arrayGap">
  <h3><code>{{item}}</code></h3>
  <Example>
    <div :class="item" class="inline-flex flex-wrap surface" >
      <div v-for="index in 12" class="center secondary w-32 h-8">
        {{index}}
      </div>
    </div>
  </Example>
</template>
```

```javascript
const arrayGap = [
    'gap-0',
    'gap-x-0',
    'gap-y-0',
    'gap-1',
    'gap-x-1',
    'gap-y-1',
    'gap-2',
    'gap-x-2',
    'gap-y-2',
    'gap-3',
    'gap-x-3',
    'gap-y-3',
    'gap-4',
    'gap-x-4',
    'gap-y-4',
    'gap-5',
    'gap-x-5',
    'gap-y-5',
    'gap-6',
    'gap-x-6',
    'gap-y-6',
    'gap-7',
    'gap-x-7',
    'gap-y-7',
    'gap-8',
    'gap-x-8',
    'gap-y-8',
];
```

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

### ZUI Toolbar Example

Source: https://github.com/easysoft/zui/blob/main/lib/toolbar/docs/lib/components/index.md

Demonstrates a basic ZUI toolbar with different button styles and states, including a search button.

```html
<nav class="toolbar">
  <button class="btn ghost" type="button"><span class="text">全部</span></button>
  <button class="btn primary-pale font-bold" type="button"><span class="text">未关闭</span></button>
  <button class="btn ghost" type="button"><span class="text">未开始</span></button>
  <button class="btn ghost" type="button"><span class="text">进行中</span></button>
  <button class="btn ghost" type="button"><span class="text">已挂起</span></button>
  <button class="btn ghost" type="button"><span class="text">已关闭</span></button>
  <button class="btn ghost" type="button"><i class="icon icon-search"></i><span class="text">搜索</span></button>
</nav>
```

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

### Align Content Examples

Source: https://github.com/easysoft/zui/blob/main/lib/utilities/docs/utilities/flex/align-content.md

Demonstrates various `align-content` values using ZUI utility classes. Each example shows a flex container with multiple lines of items, aligned differently along the cross-axis.

```html
<template v-for="item in alignContentJson">
  <h3><code>{{item}}</code></h3>
  <Example>
    <div :class="item" class="flex flex-wrap h-48 gap-2 surface" >
      <div v-for="index in 10" class="secondary center basis-32 h-8 flex-grow">
        {{index}}
      </div>
    </div>
  </Example>
</template>
```

```javascript
const alignContentJson = [
  'content-center',
  'content-start',
  'content-end',
  'content-between',
  'content-around',
  'content-evenly',
];
```

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

### Border Opacity Examples

Source: https://github.com/easysoft/zui/blob/main/lib/utilities/README.md

Demonstrates how to control the opacity of borders using predefined opacity classes, ranging from 0% to 100%.

```html
<div class="border opacity-0"></div>
<div class="border opacity-5"></div>
<div class="border opacity-10"></div>
<div class="border opacity-20"></div>
<div class="border opacity-30"></div>
<div class="border opacity-40"></div>
<div class="border opacity-50"></div>
<div class="border opacity-60"></div>
<div class="border opacity-70"></div>
<div class="border opacity-80"></div>
<div class="border opacity-90"></div>
<div class="border opacity-95"></div>
<div class="border opacity-100"></div>
```

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

### ZUI align-items Examples

Source: https://github.com/easysoft/zui/blob/main/lib/utilities/docs/utilities/flex/align-items.md

Demonstrates the usage of ZUI's `items-*` classes to apply different `align-items` CSS properties to a flex container. Each example shows a different alignment behavior.

```html
<template v-for="item in alignItemsJson">
  <h3><code>{{item}}</code></h3>
  <Example>
    <div :class="item" class="flex flex-wrap h-48 gap-2 surface" >
      <div v-for="index in 10" class="secondary center basis-32 h-8 flex-grow">
        {{index}}
      </div>
    </div>
  </Example>
</template>
```

```javascript
const alignItemsJson = [
    'items-center',
    'items-start',
    'items-end',
    'items-baseline',
    'items-stretch',
  ]
```

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

### Border Radius Examples

Source: https://github.com/easysoft/zui/blob/main/lib/utilities/README.md

Illustrates the application of border-radius classes to round the corners of elements. Includes examples for all sides and specific sides, with various rounding levels from none to full.

```html
<h4>All Sides</h4>
<div class="border rounded-none"></div>
<div class="border rounded-sm"></div>
<div class="border rounded"></div>
<div class="border rounded-md"></div>
<div class="border rounded-lg"></div>
<div class="border rounded-xl"></div>
<div class="border rounded-2xl"></div>
<div class="border rounded-3xl"></div>
<div class="border rounded-full"></div>
<h4>Remove from specific sides</h4>
<div class="border rounded-lg rounded-t-none"></div>
<div class="border rounded-lg rounded-r-none"></div>
<div class="border rounded-lg rounded-b-none"></div>
<div class="border rounded-lg rounded-l-none"></div>
<div class="border rounded-lg rounded-br-none"></div>
<div class="border rounded-lg rounded-bl-none"></div>
<div class="border rounded-lg rounded-tr-none"></div>
<div class="border rounded-lg rounded-tl-none"></div>
```

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

### Show Menu Example

Source: https://github.com/easysoft/zui/blob/main/lib/contextmenu/docs/lib/components/index.md

Demonstrates how to trigger the display of a context menu using a button click event. It utilizes the `ContextMenu.show` method, passing the event object and other potential configurations.

```html
<button type="button" class="btn primary rounded" id="menuShowByBtn">点击打开菜单</button>
```

```javascript
document.getElementById('menuShowByBtn')?.addEventListener('click', (event) => {
    ContextMenu.show({
        event,
        ...
    });
});
```

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

### Flex Wrap Examples

Source: https://github.com/easysoft/zui/blob/main/lib/utilities/docs/utilities/flex/wrap.md

Demonstrates the usage of different flex-wrap CSS classes ('flex-wrap', 'flex-wrap-reverse', 'flex-nowrap') by applying them to a flex container and displaying flex items within it. The example iterates through an array of wrap classes and renders a div with the corresponding class.

```html
<template v-for="item in arrayWrap">
  <h3><code>{{item}}</code></h3>
  <Example>
    <div :class="item" class="flex gap-3 surface">
      <div v-for="index in 10" class="secondary center w-24 h-8">
        {{index}}
      </div>
    </div>
  </Example>
</template>
```

```javascript
const arrayWrap = [
    'flex-wrap',
    'flex-wrap-reverse',
    'flex-nowrap'
];
```

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

### Interactivity: Loading Indicators

Source: https://github.com/easysoft/zui/blob/main/lib/utilities/README.md

Shows how to apply loading indicators to elements. Includes examples with different color variations and custom loading text.

```html
<div class="relative rounded-lg w-56 h-28 load-indicator loading surface"></div>
<div class="relative rounded-lg w-56 h-28 load-indicator loading gray"></div>
<div class="relative rounded-lg w-56 h-28 load-indicator loading primary" data-loading="正在加载…"></div>
```

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

### Sidebar Layout Example

Source: https://github.com/easysoft/zui/blob/main/lib/sidebar/README.md

This HTML snippet showcases a typical layout structure using EasySoft ZUI classes. It includes a main content area with two sidebars, demonstrating the use of classes like 'sidebar', 'sidebar-content', 'h-full', 'overflow-auto', 'primary-pale', 'p-3', 'w-40', 'surface', 'row', 'gap-3', and 'items-stretch' for styling and layout.

```html
<div id="mainContent" class="h-40 surface row gap-3 items-stretch">
  <div class="sidebar w-40" id="sidebar">
    <div class="sidebar-content h-full overflow-auto primary-pale p-3">
      <p>This is sample text.</p>
      <p>This is sample text.</p>
      <p>This is sample text.</p>
      <p>This is sample text.</p>
      <p>This is sample text.</p>
      <p>This is sample text.</p>
    </div>
  </div>
  <div class="content gray-pale flex-auto" id="content"></div>
  <div class="sidebar w-40" id="sidebarRight">
    <div class="sidebar-content h-full primary-pale p-3">
      <p>This is sample text. This is sample text. This is sample text.</p>
      <p>This is sample text. This is sample text. This is sample text.</p>
      <p>This is sample text. This is sample text. This is sample text.</p>
    </div>
  </div>
</div>
```

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

### Ring Opacity Examples

Source: https://github.com/easysoft/zui/blob/main/lib/utilities/README.md

Demonstrates the usage of ring opacity classes to control the transparency of rings. These classes range from 0% to 100% opacity.

```html
<div class="ring ring-opacity-0"></div>
<div class="ring ring-opacity-5"></div>
<div class="ring ring-opacity-10"></div>
<div class="ring ring-opacity-20"></div>
<div class="ring ring-opacity-30"></div>
<div class="ring ring-opacity-40"></div>
<div class="ring ring-opacity-50"></div>
<div class="ring ring-opacity-60"></div>
<div class="ring ring-opacity-70"></div>
<div class="ring ring-opacity-80"></div>
<div class="ring ring-opacity-90"></div>
<div class="ring ring-opacity-95"></div>
<div class="ring ring-opacity-100"></div>
```

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

### ZUI Pager Initialization Examples

Source: https://github.com/easysoft/zui/blob/main/lib/pager/docs/lib/components/js.md

Demonstrates the initialization of the ZUI Pager component with different configurations for various pagination scenarios, including custom item types and event handling.

```javascript
new zui.Pager('#pagerExample1', {
    items: [
        {type: 'info', text: '共 {recTotal} 项'},
        {type: 'size-menu', text: '每页 {recPerPage} 项', dropdown: {placement: 'top'}},
        {type: 'link', page: 'first', icon: 'icon-double-angle-left', hint: '第一页'},
        {type: 'link', page: 'prev', icon: 'icon-angle-left', hint: '上一页'},
        {type: 'info', text: '{page}/{pageTotal}'},
        {type: 'link', page: 'next', icon: 'icon-angle-right', hint: '下一页'},
        {type: 'link', page: 'last', icon: 'icon-double-angle-right', hint: '最后一页'},
        {type: 'goto', text: '跳转'},
    ],
    page: 2,
    recTotal: 101,
    recPerPage: 10,
    linkCreator: '#?page={page}&recPerPage={recPerPage}',
    onClickItem: (info) => {
        console.log('> pagerExample1.onClickItem', info);
    },
});
new zui.Pager('#pagerExample2', {
    items: [
        {type: 'info', text: '共 {recTotal} 项'},
        {type: 'size-menu', text: '每页 {recPerPage} 项', dropdown: {placement: 'top'}},
        {type: 'link', page: 'first', icon: 'icon-double-angle-left', hint: '第一页'},
        {type: 'link', page: 'prev', icon: 'icon-angle-left', hint: '上一页'},
        {type: 'nav', count: 6},
        {type: 'link', page: 'next', icon: 'icon-angle-right', hint: '下一页'},
        {type: 'link', page: 'last', icon: 'icon-double-angle-right', hint: '最后一页'},
        {type: 'goto', text: '跳转'},
    ],
    page: 2,
    recTotal: 51,
    recPerPage: 10,
    linkCreator: '#?page={page}&recPerPage={recPerPage}',
    onClickItem: (info) => {
        if (info.item.type !== 'nav') {
            return;
        }
        const fElement = info.event.target.closest('.pager');
        const btns = fElement.querySelectorAll('.pager-nav');
        btns.forEach(element => {
            element.classList.remove('active');
        });
        info.event.target.classList.add('active');
    },
});
new zui.Pager('#pagerExample3', {
    items: [
        {type: 'info', text: '共 {recTotal} 项'},
        {type: 'link', page: 'prev', icon: 'icon-angle-left', hint: '上一页'},
        {type: 'nav'},
        {type: 'link', page: 'next', icon: 'icon-angle-right', hint: '下一页'},
    ],
    page: 2,
    recTotal: 51,
    recPerPage: 10,
    linkCreator: '#?page={page}&recPerPage={recPerPage}',
    onClickItem: (info) => {
        if (info.item.type !== 'nav') {
            return;
        }
        const fElement = info.event.target.closest('.pager');
        const classList = ['text-canvas', 'bg-primary'];
        const btns = fElement.querySelectorAll('.pager-nav');
        btns.forEach(element => {
            element.classList.remove(...classList);
        });
        info.event.target.classList.add(...classList);
    },
});
const basicPagerOptions = {
    items: [
        {type: 'link', page: 'prev', icon: 'icon-angle-left', hint: '上一页'},
        {type: 'nav'},
        {type: 'link', page: 'next', icon: 'icon-angle-right', hint: '下一页'},
    ],
    page: 2,
    recTotal: 47,
    recPerPage: 10,
    linkCreator: '#?page={page}&recPerPage={recPerPage}',
    onClickItem: (info) => {
        if (info.item.type !== 'nav') {
            return;
        }
        const fElement = info.event.target.closest('.pager');
        const btns = fElement.querySelectorAll('.pager-nav');
        btns.forEach(element => {
            element.classList.remove('active');
        });
        info.event.target.classList.add('active');
    },

};
new zui.Pager('#pagerAllCount', {
    ...basicPagerOptions,
});
const pagerMaxCount = new zui.Pager('#pagerMaxCount', {
    items: [
        {type: 'link', page: 'prev', icon: 'icon-angle-left', hint: '上一页'},
        {type: 'nav', count: 6},

```

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

### Skin: Surface Colors

Source: https://github.com/easysoft/zui/blob/main/lib/utilities/README.md

Provides examples of various surface color utility classes for backgrounds and elements.

```html
<div class="canvas"></div>
<div class="surface-light"></div>
<div class="surface"></div>
<div class="surface-strong"></div>
<div class="inverse"></div>
<div class="white"></div>
<div class="black"></div>
<div class="transparent"></div>
```

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

### Menu Constructor Example

Source: https://github.com/easysoft/zui/blob/main/lib/menu/docs/lib/components/js.md

Illustrates the usage of the `zui.Menu` constructor with a selector for the target element and an options object containing menu items.

```javascript
new zui.Menu('#menu', {
    items: [
        {text: '复制', icon: 'icon-copy'},
        {text: '粘贴', icon: 'icon-paste'},
    ]
});
```

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

### Menu Render Method Example

Source: https://github.com/easysoft/zui/blob/main/lib/menu/docs/lib/components/js.md

Shows how to re-render the menu component with new options using the `render` method.

```javascript
menuInstance.render({ items: newItems });
```

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

### Ring Offset Examples

Source: https://github.com/easysoft/zui/blob/main/lib/utilities/README.md

Illustrates the application of ring offset classes to create spacing around rings. Supported offsets include 0, 1, 2, 4, and 8.

```html
<div class="ring ring-offset-0"></div>
<div class="ring ring-offset-1"></div>
<div class="ring ring-offset-2"></div>
<div class="ring ring-offset-4"></div>
<div class="ring ring-offset-8"></div>
```

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

### Border Color Examples

Source: https://github.com/easysoft/zui/blob/main/lib/utilities/README.md

Demonstrates the use of various border color classes, including default, accent colors, shades of gray, surface colors, and special utility colors.

```html
<h4>Border defaults</h4>
<div class="border border-light"></div>
<div class="border"></div>
<div class="border border-strong"></div>
<h4>Accent</h4>
<div class="border border-primary"></div>
<div class="border border-secondary"></div>
<div class="border border-warning"></div>
<div class="border border-success"></div>
<div class="border border-danger"></div>
<div class="border border-important"></div>
<div class="border border-special"></div>
<h4>Grays</h4>
<div class="border border-gray-50"></div>
<div class="border border-gray-100"></div>
<div class="border border-gray-200"></div>
<div class="border border-gray-300"></div>
<div class="border border-gray-400"></div>
<div class="border border-gray-500"></div>
<div class="border border-gray"></div>
<div class="border border-gray-600"></div>
<div class="border border-gray-700"></div>
<div class="border border-gray-800"></div>
<div class="border border-gray-900"></div>
<div class="border border-gray-950"></div>
<h4>Surface</h4>
<div class="border border-white"></div>
<div class="border border-black"></div>
<div class="border border-transparent"></div>
<div class="border border-canvas"></div>
<div class="border border-surface-light"></div>
<div class="border border-surface"></div>
<div class="border border-surface-strong"></div>
<div class="border border-inverse"></div>
<div class="border border-fore-in-light"></div>
<div class="border border-fore-in-dark"></div>
<div class="border border-fore"></div>
<div class="border border-focus"></div>
<div class="border border-link"></div>
<div class="border border-link-hover"></div>
<h4>Special</h4>
<div class="border border-current"></div>
<div class="border border-inherit"></div>
```

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

### Pager with Justify Between Alignment

Source: https://github.com/easysoft/zui/blob/main/lib/pager/README.md

Demonstrates pager components aligned to the start and end of their container using 'justify-between'. Includes examples with icon buttons and text buttons.

```html
<div class="pager justify-between">
  <button type="button" class="btn"><i class="icon icon-angle-left"></i></button>
  <button type="button" class="btn"><i class="icon icon-angle-right"></i></button>
</div>
<div class="pager justify-between">
  <button type="button" class="btn">上一页</button>
  <button type="button" class="btn">下一页</button>
</div>
```

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

### Initialize ContextMenu with ZUI

Source: https://github.com/easysoft/zui/blob/main/lib/contextmenu/docs/lib/components/index.md

Shows how to initialize ZUI ContextMenu instances for specific elements using the `zui.ContextMenu` constructor. It covers setting up menu items, including nested items and click handlers, and configuring global menu click events. This example also demonstrates showing a context menu programmatically via a button click.

```javascript
export default {
    mounted() {
        onZUIReady(() => {
            const contextMenu1 = new zui.ContextMenu('#menuToggle1', {
                items: [
                    {text: '复制', icon: 'icon-copy'},
                    {text: '粘贴', icon: 'icon-paste'},
                    {text: '剪切'},
                    {type: 'heading', text: '更多操作'},
                    {text: '导入', icon: 'icon-upload-alt'},
                    {text: '导出', icon: 'icon-download-alt'},
                    {text: '保存', icon: 'icon-save', onClick: (event) => console.log('> menuItem.clicked', event)},
                ],
                menu: {
                    onClickItem: (info) => {
                        console.log('> menu.onClickItem', info);
                    },
                },
            });
            const contextMenu3 = new zui.ContextMenu('#menuToggle3', {
                items: [
                    {text: '复制', icon: 'icon-copy' },
                    {text: '粘贴', icon: 'icon-paste'},
                    {text: '剪切'},
                    {type: 'heading', text: '更多操作'},
                    {text: '导入', icon: 'icon-upload-alt'},
                    {text: '导出', icon: 'icon-download-alt'},
                    {
                        text: '保存', icon: 'icon-save', onClick: (event) => console.log('> menuItem.clicked', event),
                        items: [
                            {text: '保存到云端'},
                            {
                                text: '下载到本地',
                                items: [
                                    {text: '下载为 PDF'},
                                    {text: '下载为 Excel'},
                                ],
                            },
                        ],
                    },
                ],
            });
            document.getElementById('menuToggle2')?.addEventListener('click', (event) => {
                const contextmenuByBtn = zui.ContextMenu.show({
                    event,
                    items: [
                        {text: '复制', icon: 'icon-copy'},
                        {text: '粘贴', icon: 'icon-paste'},
                        {text: '剪切'},
                        {type: 'heading', text: '更多操作'},
                        {text: '导入', icon: 'icon-upload-alt'},
                        {text: '导出', icon: 'icon-download-alt'},
                        {text: '保存', icon: 'icon-save', onClick: (e) => console.log('> menuItem.clicked', e)},
                    ],
                    menu: {
                        onClickItem: (info) => {
                            console.log('> menu.onClickItem', info);
                        },
                    },
                });
            });
        })
    },
};
```

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

### 开发命令

Source: https://github.com/easysoft/zui/blob/main/README.md

提供了 ZUI 3 项目的常用开发命令，包括安装依赖、启动开发服务器、构建项目以及预览和构建文档。

```sh
$ pnpm install

$ pnpm dev

$ pnpm build

$ pnpm docs:dev

$ pnpm docs:build
```

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

### ZUI Picker Initialization (Single Select)

Source: https://github.com/easysoft/zui/blob/main/lib/picker/docs/lib/forms/index.md

Initializes a single-select ZUI Picker with a predefined list of items, a default value, and placeholder text. This example demonstrates basic setup and search functionality.

```javascript
import {onMounted} from 'vue';

onMounted(() => {
    onZUIReady(() => {
        const items = [
            {text: 'Apple', value: 'apple', keys: 'fruit food'},
            {text: 'Banana', value: 'banana', keys: 'fruit food'},
            {text: 'Orange', value: 'orange', keys: 'fruit food'},
            {text: 'Strawberries', value: 'strawberries', keys: 'fruit food'},
            {text: 'Cat', value: 'cat', keys: 'animals pet'},
            {text: 'Dog', value: 'dog', keys: 'animals pet'},
            {text: 'Fish', value: 'fish', keys: 'animals food'},
            {text: 'Pig', value: 'pig', keys: 'animals food'},
            {text: '梨子', value: 'pear', keys: 'fruit food'},
            {text: 'Anna', value: 'anna', keys: 'human animals'},
            {text: 'Ben', value: 'ben', keys: 'human animals'},
            {text: 'Cake', value: 'cake', keys: 'food'},
        ];
        new zui.Picker('#singlePickerExample', {
            items,
            defaultValue: 'banana',
            name: 'picker',
            placeholder: '请选择你的最爱',
            searchHint: '搜索选项',
        });
    });
});
```

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

### justify-content Examples

Source: https://github.com/easysoft/zui/blob/main/lib/utilities/docs/utilities/flex/justify-content.md

Demonstrates the application of CSS justify-content property using ZUI classes for different alignment scenarios in a flex container. Includes classes for start, end, center, between, around, and evenly.

```vue
<template v-for="item in arrayJustify">
  <h3><code>{{item}}</code></h3>
  <Example>
    <div :class="item" class="flex flex-wrap gap-2 surface" >
      <div v-for="index in 4" class="secondary center w-16 h-8 flex-grow">
        {{index}}
      </div>
    </div>
  </Example>
</template>

<script setup>
const arrayJustify = [
    'justify-start',
    'justify-end',
    'justify-center',
    'justify-between',
    'justify-around',
    'justify-evenly',
];
</script>
```

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

### Footer Toolbar Configuration Example

Source: https://github.com/easysoft/zui/blob/main/lib/dtable/docs/lib/components/plugins.md

Example configuration for the footer toolbar in ZUI tables, including defining buttons, dropdowns, and event handlers.

```js
const options = {
    /* 在表尾显示底部工具栏。 */
    footer: ['toolbar'],

    /* 定义底部工具栏上的按钮。 */
    footToolbar: [
        {
            type: 'btn-group',
            items: [
                {text: '编辑'},
                {
                    type: 'dropdown',
                    caret: 'up',
                    items: [
                        {text: '删除'},
                        {text: '激活'},
                    ]
                },
            ]
        },
        {text: '刷新', icon: 'icon-refresh', onClick: refreshTable},
        {text: '移动', icon: 'icon-move', disabled: true},
    ]
}
```

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

### Creating Component Instance with JavaScript

Source: https://github.com/easysoft/zui/blob/main/lib/core/docs/lib/basic/component.md

Demonstrates how to create a new component instance, specifically a Nav component, by targeting an HTML element using a selector and providing configuration options.

```javascript
const nav = new zui.Nav('#myNav', {
    items: [
        {text: 'Home'},
        {text: 'Blog'},
    ]
});
```

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

### 远程数据 - 简单列表

Source: https://github.com/easysoft/zui/blob/main/lib/list/README.md

展示如何使用 ZUI 创建一个简单的列表，该列表的数据从远程接口加载。

```html
<div id="remoteSimpleList"></div>
```

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

### Vanilla Sortable List Example

Source: https://github.com/easysoft/zui/blob/main/lib/sortable/README.md

A vanilla JavaScript example demonstrating a sortable list with drag-and-drop capabilities. Items with 'draggable="false"' are not directly sortable by default.

```html
<menu id="example1" class="col gap-1">
  <li class="ring p-2 canvas" draggable="false">Item 2</li>
  <li class="ring p-2 canvas">Item 4</li>
  <li class="ring p-2 canvas" draggable="false">Item 1</li>
  <li class="ring p-2 canvas" draggable="false">Item 3</li>
  <li class="ring p-2 canvas">Item 5</li>
  <li class="ring p-2 canvas">Item 6</li>
</menu>
```

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

### ZUI Upload Initialization and Configuration

Source: https://github.com/easysoft/zui/blob/main/lib/upload/docs/lib/components/index.md

Demonstrates how to initialize the ZUI Upload component with various configuration options such as multiple file selection, file limits, size limits, custom hints, and UI element control. It also shows how to set default file lists.

```javascript
export default {
    mounted() {
        onZUIReady(() => {
            new zui.Upload('#example1', {name: 'files1'});
            new zui.Upload('#example2', {name: 'files2', multiple: false});
            new zui.Upload('#example3', {name: 'files3', multiple: true, limitCount: 5, exceededCountHint: '超出上传文件数量限制'});
            new zui.Upload('#example4', {name: 'files4', multiple: true, limitSize: '50MB', exceededSizeHint: '超出上传文件大小限制'});
            new zui.Upload('#example5', {name: 'files5', renameBtn: false, deleteBtn: false});
            new zui.Upload('#example6', {name: 'files6', useIconBtn: false});
            new zui.Upload('#example7', {name: 'files7', draggable: true, tip: '可点击添加或拖拽上传，不超过50M'});
            const file1 = new File(['file1'], 'file1.txt', {type: 'text/plain'});
            const file2 = new File(['file2'], 'file2.txt', {type: 'text/plain'});
            new zui.Upload('#example8', {name: 'files8', defaultFileList: [file1, file2]});
        });
    }
};
```

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

### Simple SearchBox Usage

Source: https://github.com/easysoft/zui/blob/main/lib/search-box/docs/lib/components/index.md

Demonstrates the basic initialization of the SearchBox component with default settings.

```html
<div id="searchBox"></div>
```

```javascript
const searchBox = new zui.SearchBox('#searchBox');
```

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

### Basic Label

Source: https://github.com/easysoft/zui/blob/main/lib/label/README.md

Demonstrates the fundamental usage of the ZUI Label component.

```html
<span class="label">Label</span>
```

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

### Custom Selection Information Example

Source: https://github.com/easysoft/zui/blob/main/lib/dtable/docs/lib/components/plugins.md

An example demonstrating how to customize the selection information using the `checkInfo` callback. It shows how to access row data and format the message based on the number of selected items or other criteria.

```js
const options = {
    /* 自定义选项便于 checkInfo 回调函数使用。 */
    defaultSummary: '本页共 {total} 项，其中任务 {task} 项',

    /* 生成选中信息。 */
    checkInfo(checks) {
        /* 所有行。 */
        const rows = this.layout.rows;

        /* 选中时的信息。 */
        if (checks.length) {
            /* 以 HTML 格式返回。 */
            return {html: `本页共 ${rows.length} 项，已选中 <strong>${checks.length}</strong> 项`}
        }

        /* 未选中时的信息。 */
        return zui.formatString(this.options.defaultSummary, {
            total: rows.length,
            task: rows.filter(x => x.data.type === 'task').length,
        });
    }
};
```

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

### ZUI Input Controls with Prefixes and Suffixes

Source: https://github.com/easysoft/zui/blob/main/lib/input-control/README.md

Demonstrates ZUI input fields with large prefixes and suffixes. This includes examples with text prefixes, icon prefixes, and text suffixes, showing how to integrate them into the input structure.

```html
<div class="input-control has-prefix-lg">
  <input id="inputAccountExample2" type="text" class="form-control" placeholder="">
  <label for="inputAccountExample2" class="input-control-prefix">用户名:</label>
</div>
<div class="input-control has-prefix-lg has-suffix-lg">
  <input id="inputEmailExample2" type="email" class="form-control" placeholder="">
  <label for="inputEmailExample2" class="input-control-prefix">邮箱:</label>
  <label for="inputEmailExample2" class="input-control-suffix"><i class="icon icon-check"></i></label>
</div>
<div class="input-control has-prefix-lg has-suffix-lg">
  <input id="inputGiftExample2" type="text" class="form-control" placeholder="礼品码">
  <label for="inputGiftExample2" class="input-control-prefix"><i class="icon icon-gift"></i></label>
  <label for="inputPasswordExample2" class="input-control-suffix text-right text-red">享 8 折</label>
</div>
<div class="input-control has-prefix-lg has-suffix-lg">
  <input id="inputPasswordExample2" type="password" class="form-control" placeholder="">
  <label for="inputPasswordExample2" class="input-control-prefix">密码:</label>
  <label for="inputPasswordExample2" class="input-control-suffix text-right text-success">安全!!!</label>
</div>
```