### Example: Component Initialization and Method Invocation

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

Practical examples of initializing various components and interacting with their methods.

```js
/* 在 #myColor 上初始化 color */
$('#myColor').colorPicker();

/* 在 #myPicker 上使用选项初始化 picker */
$('#myPicker').picker({name: 'product', items: productItems});

/* 重新渲染修改 items。 */
$('#myPicker').picker({items: newProductItems});

/* 调用实例 $.setValue 方法。 */
$('#myPicker').picker('setValue', newValue);

/* 调用 destroy 方法销毁组件。 */
$('#myPicker').picker('destroy');

/* 综合使用：初始化 datePicker 并获取实例。 */
const datePicker = $('#myDate').datePicker({defaultValue: 'today'}).zui();

/* 修改 placeholder 和类名。 */
datePicker.render({placeholder: '请输入日期', className: 'has-error'});

/* 设置值。 */
datePicker.$.setValue('2023-07-13');

/* 销毁。 */
datePicker.destroy();
```

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

### Basic Menu Initialization

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

A minimal example of initializing a menu with a list of items.

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

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

### Nav Constructor Definition and Usage

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

Constructor signature and basic initialization example.

```typescript
constructor(element: HTMLElement | string, options: NavOptions);
```

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

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

### Example: Component Instance Usage

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

Demonstrates retrieving a picker instance and performing operations like rendering, setting values, and destroying the component.

```js
/* 获取 picker 实例。 */
const picker = $('#myPicker').zui('picker');

/* 执行重新渲染。 */
picker.render({items: newItems, name: newName});

/* 修改 picker 的当前值。 */
picker.$.setValue('newValue');

/* 销毁组件。 */
picker.destroy();
```

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

### Flex Basis Example

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

Demonstrates the application of various basis utility classes using a Vue loop.

```vue
<Example class="flex flex-wrap gap-3">
  <div :class="'basis-' + item" v-for="(item,index) in basisJson" >
    <div class="secondary w-full h-8"></div>
    <div class="mt-0.5 text-center">{{item}}</div>
  </div>
</Example>

<script setup>
  const basisJson = [
    2,
    3,
    4,
    5,
    6,
    7,
    8,
    9,
    10,
    11,
    12,
    14,
    16,
    20,
    24,
    28,
    32,
    36,
    40,
    44,
    48,
    52,
    56,
    60,
    64,
    72,
    80,
    96,
    'full',
    'auto',
    'px',
  ];
</script>
```

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

### Render Flex Utility Examples

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

A template loop that applies flex utility classes to elements to demonstrate their behavior.

```html
<template v-for="item in flexJson">
  <h3><code>{{item}}</code></h3>
  <Example>
    <div :class="item === 'flex-initial' ? 'w-48' : 'w-full' " class="flex gap-3 surface" >
      <div :class="item" v-for="index in 3" class="secondary center w-24 h-8">
        24 &times; 8
      </div>
    </div>
    <div class="text-center">{{item.name}}</div>
  </Example>
</template>
```

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

### Horizontal Form Layout Example

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

A comprehensive example demonstrating the use of .form-horz, .form-row, and various form controls like inputs, selects, and input groups.

```html
<form class="form form-horz" style="max-width: 1000px">
  <div class="form-row">
    <div class="w-1/2 form-group">
      <label class="form-label" for="smallInput">小型框</label>
      <input class="w-1/2 form-control" type="text" id="smallInput" placeholder="输入框或选择框（10个字符以内）">
      <div class="form-tip">可以放在同一行的字段满足：可连着填写，字段意义上有相似性</div>
    </div>
    <div class="w-1/2 form-group">
      <label class="form-label" for="middleInput">中型框</label>
      <input class="form-control" type="text" id="middleInput">
    </div>
  </div>
  <div class="form-row">
    <div class="w-1/2 form-group">
      <label class="form-label" for="startDate">输入组</label>
      <div class="input-group">
        <div class="input-control has-suffix-icon">
          <input id="startDate" type="text" class="rounded-r-none form-control" placeholder="开始时间">
          <label for="startDate" class="input-control-suffix"><i class="icon icon-calendar"></i></label>
        </div>
        <span class="input-group-addon">至</span>
        <div class="input-control has-suffix-icon">
          <input id="endDate" type="text" class="rounded-l-none form-control" placeholder="结束时间">
          <label for="endDate" class="input-control-suffix"><i class="icon icon-calendar"></i></label>
        </div>
      </div>
    </div>
    <div class="w-1/2 form-group no-label">
      <div class="check-list-inline">
        <div class="checkbox-primary">
          <input type="checkbox" name="primaryRadioGroup2" checked="checked" id="unset">
          <label for="unset">待定</label>
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="w-1/2 form-group has-error">
      <label class="form-label" for="shortTitle">短标题类</label>
      <input id="shortTitle" type="text" class="form-control" placeholder="">
      <div class="form-tip">此表单项为必填</div>
    </div>
  </div>
  <div class="form-row">
    <div class="form-group">
      <label class="form-label" for="longTitle">长标题类</label>
      <input id="longTitle" type="text" class="form-control" placeholder="">
    </div>
  </div>
  <div class="form-row">
    <div class="form-group">
      <label class="form-label" for="longTitle">编辑器</label>
      <textarea rows="5" class="form-control" placeholder="输入一些文本" >Hello, world!</textarea>
    </div>
  </div>
  <div class="form-row">
    <div class="w-1/2 form-group">
      <label class="form-label" for="linkProduct">关联产品</label>
      <select class="rounded-r-none form-control" data-placeholder="选择一个产品..." id="linkProduct">
        <option value=""></option>
        <option value="cat">小猫</option>
        <option value="fish">金鱼</option>
        <option value="dragon">龙</option>
        <option value="mammoth">猛犸</option>
      </select>
    </div>
    <div class="w-1/2 form-group no-label">
      <div class="input-group">
        <label class="rounded-l-none input-group-addon" for="linkPlan">关联计划</label>
        <select class="rounded form-control" data-placeholder="选择一个计划..." id="linkPlan">
          <option value=""></option>
          <option value="cat">小猫</option>
          <option value="fish">金鱼</option>
          <option value="dragon">龙</option>
          <option value="mammoth">猛犸</option>
        </select>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="w-1/2 form-group">
      <label class="form-label" for="manager">负责人</label>
      <div class="input-group">
        <select class="form-control" id="manager">
          <option value=""></option>
          <option value="cat">小猫</option>
          <option value="fish">金鱼</option>
          <option value="dragon">龙</option>
          <option value="mammoth">猛犸</option>
        </select>
        <label class="input-group-addon" for="productManager">产品负责人</label>
        <select class="rounded-r-none form-control" id="productManager">
          <option value=""></option>
          <option value="cat">小猫</option>
          <option value="fish">金鱼</option>
          <option value="dragon">龙</option>
          <option value="mammoth">猛犸</option>
        </select>
      </div>
    </div>
    <div class="w-1/2 form-group no-label">
      <div class="input-group">
        <label class="rounded-l-none input-group-addon" for="testManager">测试负责人</label>
        <select class="form-control" id="testManager">
          <option value=""></option>
          <option value="cat">小猫</option>
          <option value="fish">金鱼</option>
          <option value="dragon">龙</option>
          <option value="mammoth">猛犸</option>
        </select>
        <label class="input-group-addon" for="releaseManager">发布负责人</label>
        <select class="form-control" id="releaseManager">
          <option value=""></option>
          <option value="cat">小猫</option>
          <option value="fish">金鱼</option>
          <option value="dragon">龙</option>
          <option value="mammoth">猛犸</option>
        </select>
      </div>
    </div>
```

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

### Initialize Calendar Instances

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

Example usage of multiple calendar configurations including basic, header actions, and categorized events within a Vue component.

```js
new zui.Calendar('#calendarBasic', {
    headerTitle: '我的日程',
    events: [
        {id: '1', title: '项目周会', start: today},
        {id: '2', title: '提交版本', start: today + day, allDay: true},
        {id: '3', title: '客户拜访', start: today + 2 * day, color: 'var(--color-warning-500)'},
    ],
});
new zui.Calendar('#calendarHeader', {
    headerTitle: '团队日历',
    headerActions: [
        {text: '导出'},
        {text: '新建日程', btnType: 'primary'},
    ],
    events: [
        {id: '1', title: '需求评审', start: today},
    ],
});
new zui.Calendar('#calendarCategories', {
    headerTitle: '多日历集',
    categories: [
        {id: 'work',     name: '工作', color: 'var(--color-primary-500)'},
        {id: 'personal', name: '个人', color: 'var(--color-success-500)'},
        {id: 'travel',   name: '出行', color: 'var(--color-warning-500)'},
    ],
    events: [
        {id: '1', title: '版本发布', category: 'work',     start: today},
        {id: '2', title: '健身',     category: 'personal', start: today + day},
        {id: '3', title: '出差北京', category: 'travel',   start: today + 2 * day, allDay: true},
    ],
});
```

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

### Visualize Nested Hierarchy

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

Example representation of the nested data structure.

```txt
研发部
├── 客户端开发部
└── 移动开发部
    ├── iOS 开发小组
    └── Android 开发小组
```

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

### Configure Actions via Column Definition

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

Example of configuring specific actions to display in a column using the actions array.

```javascript
const colSetting = {
    name: 'actions',
    type: 'actions',
    actions: ['edit', 'delete', 'close', 'start', 'pause', 'active', 'other'],
    actionsMap: {
        edit: {icon: 'icon-edit', hint: '编辑'},
        group: {icon: 'icon-group', hint: '团队'},
        split: {icon: 'icon-split', hint: '添加子项目集'},
        delete: {icon: 'icon-trash', hint: '删除', text: '删除'},
        close: {icon: 'icon-off', hint: '关闭', 'data-toggle': 'modal', url: '#test?id={id}'},
        start: {icon: 'icon-start', hint: '开始'},
        pause: {icon: 'icon-pause', text: '挂起项目集'},
        active: {icon: 'icon-magic', text: '激活项目集', 'data-toggle': 'modal', url: '#test?id={id}'},
        other: {type: 'dropdown', caret: true, hint: '其他操作'},
        link: {name: 'link', icon: 'icon-link', text: '关联产品'},
        whitelist: {name: 'whitelist', icon: 'icon-shield-check', text: '项目白名单'},
        more: {type: 'dropdown', icon: 'icon-ellipsis-v', caret: false, hint: '更多'},
    }
}
```

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

### Z-Index Visual Example

Source: https://github.com/easysoft/zui/blob/main/lib/utilities/docs/utilities/layout/z-index.md

HTML structure demonstrating the visual stacking order of elements using different z-index utility classes.

```html
<div class="relative w-14 h-14 bg-secondary text-white rounded flex justify-center items-center shadow-md z-50">z-50</div>
  <div class="relative w-14 h-14 --left-2 -top-2 bg-secondary text-white rounded flex justify-center items-center shadow-md z-40">z-40</div>
  <div class="relative w-14 h-14 --left-4 -top-3 bg-secondary text-white rounded flex justify-center items-center shadow-md z-30">z-30</div>
  <div class="relative w-14 h-14 --left-6 -top-4 bg-secondary text-white rounded flex justify-center items-center shadow-md z-20">z-20</div>
  <div class="relative w-14 h-14 --left-8 -top-6 bg-secondary text-white rounded flex justify-center items-center shadow-md z-10">z-10</div>
  <div class="relative w-14 h-14 --left-10 -top-8 bg-secondary text-white rounded flex justify-center items-center shadow-md z-0">z-0</div>
  <div class="relative w-14 h-14 --left-12 -top-10 bg-secondary text-white rounded flex justify-center items-center shadow-md z-auto">z-auto</div>
```

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

### Configure nested plugin options

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

Example configuration for the nested plugin including column toggle settings and change callbacks.

```js
new zui.DTable(element, {
    plugins: ['nested'],
    cols: [
        ...
        {name: 'project', title: '项目名称', flex: 3, fixed: false, nestedToggle: true},
        ...
    ],
    data: [...],
    onNestedChange: (changes) => {
        console.log('折叠展开状态变更了', changes);
    }
});
```

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

### Tab Event Handling Example

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

Demonstrates how to bind to 'show' and 'shown' events using jQuery and structure the HTML for tab navigation.

```html
<ul class="nav nav-tabs" id="tabsExample">
  <li class="nav-item"><a class="active" data-toggle="tab" data-name="tab1" href="#tabContent16">标签1</a></li>
  <li class="nav-item"><a data-toggle="tab" data-name="tab2" href="#tabContent17">标签2</a></li>
  <li class="nav-item"><a data-toggle="tab" href="#tabContent18">标签3</a></li>
</ul>
<div class="tab-content">
  <div class="tab-pane active" id="tabContent16">
    <p>我是标签1。</p>
  </div>
  <div class="tab-pane" id="tabContent17">
    <p>我是标签2。</p>
  </div>
  <div class="tab-pane" id="tabContent18">
    <p>我是标签3。</p>
  </div>
</div>

<script>
$('#tabsExample').on('show shown', function(event, info) {
  console.log('>', event.type, info);
});
</script>
```

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

### Get Schema by Path Usage Example

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

Example of calling the getSchemaByPath method.

```ts
const schema = formBuilder.getSchemaByPath('object.property');
```

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

### Install Dependencies

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

Install project dependencies using pnpm.

```sh
pnpm install
```

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

### Component Initialization with Options

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

Pass configuration options to a component using the zui-create-<component> attribute.

```html
<div zui-create zui-create-list="
  {
    items: [{text: 'item1'}, {text: 'item2'}],
    onClickItem: (e) => console.log('You clicked', e)
  }
"></div>
```

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

### Set Schema by Path Usage Example

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

Example of calling the setSchemaByPath method with a new schema object.

```ts
formBuilder.setSchemaByPath('object.property', {
    type: 'string',
    title: '新标题',
});
```

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

### Initialize ZUI Toolbar components

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

Demonstrates various toolbar configurations including dropdowns, active states, formatting tools, dividers, spacing, and disabled items.

```javascript
<script>
export default {
    mounted() {
        onZUIReady(() => {
            new zui.Toolbar('#toolbarExp', {
                items: [
                    {
                        type: 'dropdown',
                        icon: 'icon-ellipsis-h',
                        caret: false,
                        hint: '更多',
                        dropdown: {
                            items: [
                                {text: '取消置顶'},
                                {text: '开启免打扰'},
                                {text: '取消订阅'},
                            ],
                        },
                    },
                    {icon: 'icon-phone', hint: '发起会议', className: 'text-secondary'},
                    {icon: 'icon-chat-dot', hint: '消息记录', className: 'text-warning'},
                    {icon: 'icon-step-forward', hint: '打开侧边栏', className: 'text-important'},
                ],
                onClickItem: (info) => {
                    console.log('> toolbar.onClickItem', info);
                },
            });
            new zui.Toolbar('#toolbarExp2', {
                items: [
                    {text: '全部'},
                    {text: '未关闭', active: true, className: 'primary-pale font-bold'},
                    {text: '未开始'},
                    {text: '进行中'},
                    {text: '已挂起'},
                    {text: '已关闭'},
                    {text: '搜索', icon: 'icon-search'},
                ],
            });
            new zui.Toolbar('#editToolbar', {
                items: [
                    {
                        type: 'dropdown',
                        icon: 'icon-header',
                        caret: true,
                        hint: '段落',
                        dropdown: {
                            items: [
                                {text: '标题1'},
                                {text: '标题2'},
                                {text: '标题3'},
                                {text: '正文'},
                            ],
                        },
                    },
                    {
                        type: 'dropdown',
                        icon: 'icon-font',
                        caret: true,
                        hint: '字体',
                        dropdown: {
                            items: [
                                {text: '宋体'},
                                {text: '新宋体'},
                                {text: '仿宋体'},
                                {text: '黑体'},
                            ],
                        },
                    },
                    {icon: 'icon-bold', hint: '粗体'},
                    {icon: 'icon-italic', hint: '斜体'},
                    {icon: 'icon-underline', hint: '下划线'},
                    {icon: 'icon-strikethrough', hint: '消除线'},
                    {icon: 'icon-eraser', hint: '清楚格式'},
                    {icon: 'icon-align-justify', hint: '全屏'},
                    {icon: 'icon-align-left', hint: '左对齐'},
                    {icon: 'icon-list', hint: '项目符号'},
                    {icon: 'icon-smile', hint: '插入表情'},
                    {icon: 'icon-picture', hint: '图片'},
                    {icon: 'icon-link', hint: '超级链接'},
                    {icon: 'icon-reply', hint: '后退'},
                    {icon: 'icon-share-alt', hint: '前进'},
                    {icon: 'icon-resize', hint: '全屏'},


                ],
            });
            new zui.Toolbar('#dividerToolbar', {
                items: [
                    {icon: 'icon-smile', hint: '表情'},
                    {icon: 'icon-picture', hint: '图片'},
                    {icon: 'icon-cut', hint: '截取屏幕'},
                    {type: 'divider'},
                    {icon: 'icon-folder-close-alt', hint: '文件'},
                    {icon: 'icon-code', hint: '代码'},
                    {icon: 'icon-question-sign', hint: '技巧'},
                ],
            });
            new zui.Toolbar('#spaceToolbar1', {
                items: [
                    {icon: 'icon-ellipsis-v', hint: '菜单'},
                    {type: 'space', space: 10},
                    {icon: 'icon-check-plus', hint: '添加'},
                ],
            });

            new zui.Toolbar('#disabledToolbar', {
                btnProps: {className: 'text-primary'},
                items: [
                    {icon: 'icon-smile', hint: '表情'},
                    {icon: 'icon-picture', hint: '图片'},
                    {icon: 'icon-code', hint: '代码', disabled: true},
                    {icon: 'icon-question-sign', hint: '技巧'},
                ],
                onClickItem: (info) => {
                    console.log('> disabledToolbar.onClickItem', info);
                },
            });
        });
    },
};
</script>
```

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

### Initialize a Multi-level Menu

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

Demonstrates creating a menu with nested items, icons, and a divider using the zui.Menu constructor.

```html
<div id="menu3" class="w-32"></div>

<script>
  new zui.Menu('#menu3', {
      items: [
          {text: '复制', icon: 'icon-copy'},
          {text: '粘贴', icon: 'icon-paste'},
          {text: '剪切'},
          {type: 'divider'},
          {text: '更多操作', items:[
              {text: '导入', icon: 'icon-upload-alt', items:[
                  {text: '单次导入'},
                  {text: '批量导入'}
              ]},
              {text: '导出', icon: 'icon-download-alt'},
              {text: '保存', icon: 'icon-save', onClick: (event) => console.log('> menuItem.clicked', event)},
          ]},
      ],
  });
</script>
```

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

### 读取数据

Source: https://github.com/easysoft/zui/blob/main/lib/store/docs/lib/helpers/index.md

使用 get 方法从本地存储中获取数据。

```js
store.get('mySecretCode'); // 基于存储数据的例子应该返回 1314520
```

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

### Basic Component Initialization

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

Use the zui-create attribute to initialize a component on an element.

```html
<div zui-create="datePicker"></div>
```

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

### 获取组件实例

Source: https://github.com/easysoft/zui/blob/main/docs/docs/guide/start/tutorial.md

使用组件类的静态 get 方法获取已绑定到元素的组件实例。

```html
<nav id="myNav"></nav>

<script>
new zui.Nav('#myNav', {
    items: [
        {text: 'Home'},
        {text: 'Blog'},
    ]
});

const nav = zui.Nav.get('#myNav');
</script>
```

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

### new zui.fileSelector(options)

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

Initializes a new FileSelector instance with the provided configuration options.

```APIDOC
## Constructor: new zui.fileSelector(options)

### Description
Creates and initializes a new file selector component instance.

### Parameters
#### Options (FileSelectorProps)
- **name** (string) - Optional - Form field name.
- **accept** (string) - Optional - File type restriction.
- **disabled** (boolean) - Optional - Whether the component is disabled.
- **mode** ('button' | 'box' | 'grid') - Optional - UI display mode.
- **maxFileSize** (FileSize) - Optional - Maximum size per file (default: "100MB").
- **maxFileCount** (number) - Optional - Maximum number of files allowed.
- **totalFileSize** (FileSize) - Optional - Maximum total size for all files.
- **onDuplicated** (Function) - Optional - Callback when a duplicate file is added. Return `true` to allow.
- **onExceededSize** (Function) - Optional - Callback when file size exceeds limit. Return `true` to allow.
- **onExceededTotalSize** (Function) - Optional - Callback when total size exceeds limit. Return `true` to allow.
- **onExceededCount** (Function) - Optional - Callback when file count exceeds limit. Return `true` to allow.
```

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

### Basic Button Example

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

A simple button element with a data-@click attribute.

```html
<button data-@click="click" class="btn">Test</button>
```

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

### Initialize simple list

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

Use this HTML element to host a basic, non-nested list.

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

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

### Initialize Multiple Upload Instances

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

Shows various configuration patterns for the Upload component, including multiple file support, size limits, and UI customization.

```js
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]});
        });
    }
};
```

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

### Active Tooltip Trigger

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

Example of a button element configured for programmatic tooltip activation.

```html
<button type="button" class="btn" data-toggle="tooltip" id="tooltipExample">点击触发</button>
```

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

### Configure Dynamic Context Menu

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

Initialize a context menu with a dynamic items configuration object.

```html
<div class="items-center justify-center h-32 primary-pale row" id="menuToggle1">
    在此区域使用右键菜单
</div>
```

```js
const contextMenu = new 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),
            items: [
                {text: '保存到云端'},
                {
                    text: '下载到本地',
                    items: [
                        {text: '下载为 PDF'},
                        {text: '下载为 Excel'},
                    ],
                },
            ],
        },
    ],
    menu: {
        onClickItem: (info) => {
            console.log('> menu.onClickItem', info);
        },
    },
});
```

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

### Start Development Server

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

Launch the development server, optionally including extension libraries.

```sh
pnpm dev

# 启动带扩展库的开发服务
pnpm dev:exts
```

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

### Static Toolbar Implementation

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

Create a toolbar using standard HTML elements with ZUI CSS classes.

```html
<nav class="toolbar">
  <button class="btn ghost toolbar-item active" type="button"><i class="icon icon-home"></i><span class="text">首页</span></button>
  <button class="btn ghost toolbar-item" type="button"><span class="text">动态</span></button>
  <button class="btn ghost toolbar-item" type="button"><span class="text">论坛</span></button><div class="toolbar-divider"></div>
  <button class="btn ghost toolbar-item" type="button"><i class="icon icon-rss"></i><span class="text">博客</span></button>
  <button class="btn ghost toolbar-item" type="button"><i class="icon icon-group"></i><span class="text">关注我们</span></button><div class="toolbar-space" style="flex: 1 1 0%;"></div><div class="btn-group toolbar-btn-group">
  <button class="btn" type="button"><i class="icon icon-user"></i><span class="text">登录</span></button>
  <button class="btn" type="button"><i class="icon icon-lock"></i><span class="text">注册</span></button></div>
</nav>
```

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

### Initialize Basic Pager Components

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

Demonstrates setting up standard pagers and pagers with a restricted page count display.

```html
<div id="pagerAllCount"></div>
<div id="pagerMaxCount"></div>

<script>
    new zui.Pager('#pagerAllCount', {
        items: [
            {type: 'link', page: 'prev', icon: 'icon-angle-left', hint: '上一页'},
            {type: 'nav'},
            // ...
            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('#pagerMaxCount', {
        items: [
            {type: 'link', page: 'prev', icon: 'icon-angle-left', hint: '上一页'},
            {type: 'nav', count: 6},
            // ...
        ],
        // ...
    });
</script>
```

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

### Z-Index Utility Usage

Source: https://github.com/easysoft/zui/blob/main/lib/utilities/docs/utilities/layout/z-index.md

Basic HTML usage examples for applying z-index utility classes to elements.

```html
<div class="z-50 ...">z-50</div>
<div class="z-40 ...">z-40</div>
<div class="z-30 ...">z-30</div>
<div class="z-20 ...">z-20</div>
<div class="z-10 ...">z-10</div>
<div class="z-0 ...">z-0</div>
<div class="z-auto ...">z-auto</div>
```

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

### Initialize JS Components

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

Instantiate a component by targeting an element ID and providing configuration options.

```html
<menu id="colorPicker"></menu>

<script>
const colorPicker = new ColorPicker('#colorPicker', {
    heading: '选择颜色',
    defaultValue: '#0ea5e9',
});
</script>
```

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

### Define actionsMap for Action Column

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

Example configuration for the actionsMap object, which maps action names to ToolbarItemOptions.

```javascript
const colSetting = {
    name: 'actions',
    type: 'actions',
    actionsMap: {
        edit: {icon: 'icon-edit', hint: '编辑'},
        group: {icon: 'icon-group', hint: '团队'},
        split: {icon: 'icon-split', hint: '添加子项目集'},
        delete: {icon: 'icon-trash', hint: '删除', text: '删除'},
        close: {icon: 'icon-off', hint: '关闭', 'data-toggle': 'modal', url: '#test?id={id}'},
        start: {icon: 'icon-start', hint: '开始'},
        pause: {icon: 'icon-pause', text: '挂起项目集'},
        active: {icon: 'icon-magic', text: '激活项目集', 'data-toggle': 'modal', url: '#test?id={id}'},
        other: {type: 'dropdown', caret: true, hint: '其他操作'},
        link: {name: 'link', icon: 'icon-link', text: '关联产品'},
        whitelist: {name: 'whitelist', icon: 'icon-shield-check', text: '项目白名单'},
        more: {type: 'dropdown', icon: 'icon-ellipsis-v', caret: false, hint: '更多'},
    }
}
```

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

### new zui.Menu(element, options)

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

Initializes a new Menu instance on the specified element with the provided configuration options.

```APIDOC
## constructor(element, options)

### Description
Initializes a new Menu component instance.

### Parameters
- **element** (HTMLElement | string) - Required - The container element or a selector string for the menu.
- **options** (MenuOptions) - Required - Configuration object for the menu.

### Example
```ts
new zui.Menu('#menu', {
    items: [
        {text: 'Copy', icon: 'icon-copy'},
        {text: 'Paste', icon: 'icon-paste'},
    ]
});
```
```

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

### zui.fileSelector(options)

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

Initializes the FileSelector component with a configuration object.

```APIDOC
## Constructor: new zui.fileSelector(options)

### Description
Initializes a new instance of the FileSelector component.

### Options
- **defaultFiles** (array) - Optional - An array of objects representing pre-loaded files. Each object can contain `name`, `size`, and `url`.
- **disabled** (boolean) - Optional - If set to `true`, disables the file selector.
- **tip** (string) - Optional - Custom tooltip text. Supports placeholders: `{size}`, `{count}`, `{maxFileSize}`, `{maxFileCount}`.
- **fileIcons** (object) - Optional - Maps file types (extensions) to icon names. Includes keys like `image`, `video`, `audio`, `text`, `pdf`, `word`, `excel`, `ppt`, `zip`, and `default`.
- **thumbnail** (boolean) - Optional - Whether to display thumbnails for image files. Defaults to `true`.
- **draggable** (boolean) - Optional - Whether to allow drag-and-drop file uploading. Defaults to `true`.
- **multiple** (boolean) - Optional - Whether to allow selecting multiple files. Defaults to `true`.
- **mode** (string) - Optional - Display mode, e.g., 'grid'.
- **gridWidth** (string) - Optional - Width of grid items (e.g., '200px').
- **gridHeight** (string) - Optional - Height of grid items (e.g., '200px').
- **gridGap** (string) - Optional - Gap between grid items (e.g., '20px').
- **uploadBtn** (object) - Optional - Configuration for the upload button, including `text`, `icon`, `className`, and `size`.
```

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

### Align Content Template Usage

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

Example of applying align-content classes to a flex container within a Vue template.

```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>
```

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

### 使用 zui-init 属性初始化脚本

Source: https://github.com/easysoft/zui/blob/main/docs/docs/guide/start/tutorial.md

通过 HTML 元素属性 zui-init 定义初始化脚本，在元素呈现后自动执行。

```html
<div zui-init="console.log('hello', $element)">hello</div>
```

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

### Define CalendarEvent type

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

Represents an individual event in the calendar, requiring a unique ID, title, and start time.

```ts
type CalendarEvent = {
    /** 唯一标识 */
    id: string;
    /** 标题 */
    title: string;
    /** 所属日历集 ID */
    category?: string;
    /** 是否全天事件 */
    allDay?: boolean;
    /** 描述 */
    desc?: string;
    /** 开始时间 */
    start: DateLike;
    /** 结束时间 */
    end?: DateLike;
    /** 文字颜色 */
    color?: string;
    /** 背景颜色 */
    background?: string;
    /** 图标 */
    icon?: IconType;
    /** 是否只读 */
    readonly?: boolean;
    /** 是否隐藏 */
    hidden?: boolean;
    /** 排序 */
    order?: number;
    /** 自定义数据 */
    data?: Record<string, unknown>;
};
```

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

### Define Navigation Types Data

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

A script setup block defining an array of navigation types for use in templates.

```javascript
const navTypes = [
    {class: 'primary', name: '主要'},
    {class: 'secondary', name: '次要'},
    {class: 'tabs', name: '标签风格'},
    {class: 'pills', name: '圆点'},
];
```

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

### Initialize Moveable Component

Source: https://github.com/easysoft/zui/blob/main/lib/dnd/docs/lib/components/moveable.md

Demonstrates how to initialize the Moveable component using either the ES module import or the global ZUI object.

```javascript
import {Moveable} from '@zui/dnd';

const moveable = new Moveable('#board', {
    container: 'self',
    containerPadding: 8,
});
```

```javascript
const moveable = new zui.Moveable('#board', options);
```

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

### Applying Colors via CSS Utility Classes

Source: https://github.com/easysoft/zui/blob/main/lib/base/docs/guide/config/color.md

Demonstrates applying colors using ZUI's Tailwind-compatible utility classes.

```html
<Example>
  <h4 class="text-primary">
    这是一段使用 Primary 调色板上的第 500 号颜色的文本
  </h4>
</Example>
```

```html
<h4 class="text-primary">
  这是一段使用 Primary 调色板上的第 500 号颜色的文本
</h4>
```

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

### Configure checkable plugin options

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

Example configuration for the checkable plugin including column checkbox settings and change callbacks.

```js
new zui.DTable(element, {
    plugins: ['checkable'],
    checkOnClickRow: true,
    cols: [
        {name: 'id', title: 'ID', width: 60, fixed: 'left', sortType: 'down', checkbox: true},
        ...
    ],
    data: [...],
    onCheckChange: (changes) => {
        console.log('选中状态变更', changes);
    }
});
```