@cldemo/ui-kit 1.0.0

package/docs/components/Element/Modal.md

@@ -0,0 +1,51 @@
+# ClModal Modal
+
+> 弹窗组件，支持拖拽、自定义头部/底部、提交/取消按钮、全屏模式
+
+- **标签名**: `<cl-modal>`
+- **引入**: `import { ClModal } from '@cldemo/library'`
+
+## Props
+
+| 参数 | 类型 | 默认值 | 必填 | 说明 |
+|------|------|--------|------|------|
+| posSubmitClose | `String` | `'CloseSubmit'` | 否 | 可选: CloseSubmit, SubmitClose |
+| className | `String` | `` | 否 |  |
+| width | `String` | `'600px'` | 否 |  |
+| titleName | `String` | `` | 否 |  |
+| isBackClick | `Boolean` | `true` | 否 |  |
+| isShowHeader | `Boolean` | `true` | 否 |  |
+| isShowFooter | `Boolean` | `true` | 否 |  |
+| isShowSubmit | `Boolean` | `true` | 否 |  |
+| isShowSubmitLoad | `Boolean` | `true` | 否 |  |
+| closeLabel | `String` | `` | 否 |  |
+| submitLabel | `String` | `` | 否 |  |
+| classTransitionEnter | `String` | `'animated fadeInDown'` | 否 |  |
+
+## Slots
+
+| 名称 | 说明 |
+|------|------|
+| default | 默认插槽 |
+
+## Events
+
+| 事件名 | 说明 |
+|--------|------|
+| onSubmit | 提交事件 |
+| onClose | 关闭事件 |
+
+## 方法
+
+| 方法 | 说明 |
+|------|------|
+| show() |  |
+| hide() |  |
+| loadStop() |  |
+| disabledSubmit() |  |
+
+## 基础用法
+
+```vue
+<cl-modal></cl-modal>
+```

package/docs/components/Element/Progress.md

@@ -0,0 +1,28 @@
+# ClProgress Progress
+
+> 进度条组件，支持百分比显示和动画
+
+- **标签名**: `<cl-progress>`
+- **引入**: `import { ClProgress } from '@cldemo/library'`
+
+## Props
+
+| 参数 | 类型 | 默认值 | 必填 | 说明 |
+|------|------|--------|------|------|
+| className | `String` | `` | 否 |  |
+| theme | `String` | `'horizontal'` | 否 |  |
+| color | `String` | `` | 否 |  |
+| ratio | `Number, String` | `` | 是 |  |
+| isShowNum | `Boolean` | `true` | 否 |  |
+| isAnimation | `Boolean` | `true` | 否 |  |
+| diameter | `String` | `'50px'` | 否 |  |
+| showNumText | `String` | `` | 否 |  |
+| showNumPos | `String` | `'out-center'` | 否 |  |
+| showNumTrigger | `String` | `'hover'` | 否 |  |
+| showNumColor | `String` | `` | 否 |  |
+
+## 基础用法
+
+```vue
+<cl-progress></cl-progress>
+```

package/docs/components/Element/Radio.md

@@ -0,0 +1,41 @@
+# ClRadio Radio
+
+> 单选框组件，支持单选切换
+
+- **标签名**: `<cl-radio>`
+- **引入**: `import { ClRadio } from '@cldemo/library'`
+
+## Props
+
+| 参数 | 类型 | 默认值 | 必填 | 说明 |
+|------|------|--------|------|------|
+| value | `String, Number` | `` | 是 |  |
+| className | `String` | `` | 否 |  |
+| name | `String` | `` | 是 |  |
+| list | `ListInfo[]` | `() => []` | 否 |  |
+| disabled | `Boolean` | `false` | 否 |  |
+| width | `String` | `'auto'` | 否 |  |
+| isInline | `Boolean` | `true` | 否 |  |
+
+## Events
+
+| 事件名 | 说明 |
+|--------|------|
+| update:value |  |
+| onChange | 值改变事件 |
+| onInit | 初始化完成事件 |
+
+## 方法
+
+| 方法 | 说明 |
+|------|------|
+| getValue() | 获取当前值 |
+| getValueData() | 获取当前值对应的数据对象 |
+| setValue() | 设置值 |
+| runInitComplete() |  |
+
+## 基础用法
+
+```vue
+<cl-radio></cl-radio>
+```

package/docs/components/Element/Slider.md

@@ -0,0 +1,33 @@
+# ClSlider Slider
+
+> 滑块组件，支持范围选择和步长设置
+
+- **标签名**: `<cl-slider>`
+- **引入**: `import { ClSlider } from '@cldemo/library'`
+
+## Props
+
+| 参数 | 类型 | 默认值 | 必填 | 说明 |
+|------|------|--------|------|------|
+| className | `String` | `` | 否 |  |
+| value | `String, Number` | `` | 否 |  |
+| min | `Number` | `0` | 否 |  |
+| max | `Number` | `100` | 否 |  |
+| disabled | `Boolean` | `false` | 否 |  |
+| isRange | `Boolean` | `false` | 否 |  |
+| isBarDrag | `Boolean` | `false` | 否 |  |
+| splitNumber | `Number` | `0` | 否 |  |
+| isShowDot | `Boolean` | `true` | 否 |  |
+| isShowDotActive | `Boolean` | `true` | 否 |  |
+| marks | `Array` | `() => []` | 否 |  |
+| isVertical | `Boolean` | `false` | 否 |  |
+| verticalHeight | `String` | `` | 否 |  |
+| size | `String` | `'large'` | 否 | 可选: large, small |
+| numType | `String` | `'int'` | 否 | 可选: int, float2, float3 |
+| tooltipFormat | `String` | `` | 否 |  |
+
+## 基础用法
+
+```vue
+<cl-slider></cl-slider>
+```

package/docs/components/Element/Switchery.md

@@ -0,0 +1,42 @@
+# ClSwitchery Switchery
+
+> 开关组件，支持切换状态
+
+- **标签名**: `<cl-switchery>`
+- **引入**: `import { ClSwitchery } from '@cldemo/library'`
+
+## Props
+
+| 参数 | 类型 | 默认值 | 必填 | 说明 |
+|------|------|--------|------|------|
+| value | `Boolean` | `false` | 否 |  |
+| name | `String` | `` | 否 |  |
+| className | `String` | `` | 否 |  |
+| disabled | `Boolean` | `false` | 否 |  |
+| color | `String, Object` | `` | 否 |  |
+| changeCallback | `Function` | `` | 否 |  |
+| isUseOnChangeCheck | `Boolean` | `false` | 否 |  |
+| isShowLoad | `Boolean` | `true` | 否 |  |
+| activeHtml | `String` | `` | 否 |  |
+| inactiveHtml | `String` | `` | 否 |  |
+
+## Events
+
+| 事件名 | 说明 |
+|--------|------|
+| update:value |  |
+| onChange | 值改变事件 |
+
+## 方法
+
+| 方法 | 说明 |
+|------|------|
+| getValue() | 获取当前值 |
+| setValue() | 设置值 |
+| setOnChangeResult() |  |
+
+## 基础用法
+
+```vue
+<cl-switchery></cl-switchery>
+```

package/docs/components/Element/Tags.md

@@ -0,0 +1,39 @@
+# ClTags Tags
+
+> 标签组件，支持多标签展示和删除
+
+- **标签名**: `<cl-tags>`
+- **引入**: `import { ClTags } from '@cldemo/library'`
+
+## Props
+
+| 参数 | 类型 | 默认值 | 必填 | 说明 |
+|------|------|--------|------|------|
+| className | `String` | `` | 否 |  |
+| list | `Array` | `() => []` | 否 |  |
+| disabled | `Boolean` | `false` | 否 |  |
+| isRemove | `Boolean` | `true` | 否 |  |
+| showTextFormat | `String` | `` | 否 |  |
+| isRemoveAll | `Boolean` | `false` | 否 |  |
+| theme | `String` | `'default'` | 否 |  |
+| isFormatHtml | `Boolean` | `false` | 否 |  |
+
+## Slots
+
+| 名称 | 说明 |
+|------|------|
+| head | head 插槽 |
+
+## 方法
+
+| 方法 | 说明 |
+|------|------|
+| setDisabled() |  |
+| addInfo() |  |
+| getData() |  |
+
+## 基础用法
+
+```vue
+<cl-tags></cl-tags>
+```

package/docs/components/Element/Waterfall.md

@@ -0,0 +1,36 @@
+# ClWaterfall Waterfall
+
+> 瀑布流布局组件，支持图片瀑布流排列
+
+- **标签名**: `<cl-waterfall>`
+- **引入**: `import { ClWaterfall } from '@cldemo/library'`
+
+## Props
+
+| 参数 | 类型 | 默认值 | 必填 | 说明 |
+|------|------|--------|------|------|
+| className | `String` | `` | 否 |  |
+| list | `Array` | `() => []` | 否 |  |
+| itemKey | `String` | `'id'` | 否 |  |
+| width | `Number` | `-1` | 否 |  |
+| colNum | `Number` | `-1` | 否 |  |
+| spacing | `Number` | `10` | 否 |  |
+| animationName | `String` | `'animated fadeIn'` | 否 |  |
+
+## Slots
+
+| 名称 | 说明 |
+|------|------|
+| default | 默认插槽 |
+
+## 方法
+
+| 方法 | 说明 |
+|------|------|
+| deleteItem() |  |
+
+## 基础用法
+
+```vue
+<cl-waterfall></cl-waterfall>
+```

package/docs/components/Mobile/Cell.md

@@ -0,0 +1,49 @@
+# ClCell Cell
+
+> Cell 组件
+
+- **标签名**: `<cl-cell>`
+- **引入**: `import { ClCell } from '@cldemo/library'`
+
+## Props
+
+| 参数 | 类型 | 默认值 | 必填 | 说明 |
+|------|------|--------|------|------|
+| className | `String` | `` | 否 | 自定义 CSS 类名 |
+| title | `String` | `` | 否 | 左侧标题 |
+| value | `String` | `` | 否 | 右侧内容 |
+| label | `String` | `` | 否 | 标题下方的描述信息 |
+| icon | `String` | `` | 否 | 左侧图标类名（<i> 元素） |
+| size | `String` | `'default'` | 否 | 单元格大小，可选: default, large |
+| url | `String` | `` | 否 | 点击后跳转的链接地址 |
+| to | `String, Object` | `` | 否 | 路由跳转目标，同 vue-router 的 to |
+| replace | `Boolean` | `` | 否 | 跳转时是否替换当前页面历史 |
+| border | `Boolean` | `true` | 否 | 是否显示底部边框 |
+| clickable | `Boolean` | `` | 否 | 是否开启点击反馈 |
+| isLink | `Boolean` | `` | 否 | 是否展示右侧箭头 |
+| center | `Boolean` | `` | 否 | 是否使内容垂直居中 |
+| arrowDirection | `String` | `'right'` | 否 | 箭头方向，可选: left, right, up, down |
+
+## Slots
+
+| 名称 | 说明 |
+|------|------|
+| icon | 图标插槽 |
+| title | 标题插槽 |
+| label | label 插槽 |
+| default | 默认插槽 |
+| value | value 插槽 |
+| extra | extra 插槽 |
+| rightIcon | rightIcon 插槽 |
+
+## Events
+
+| 事件名 | 说明 |
+|--------|------|
+| click |  |
+
+## 基础用法
+
+```vue
+<cl-cell></cl-cell>
+```

package/docs/components/Mobile/PullToRefresh.md

@@ -0,0 +1,52 @@
+# ClPullToRefresh PullToRefresh
+
+> PullToRefresh 组件
+
+- **标签名**: `<cl-pull-to-refresh>`
+- **引入**: `import { ClPullToRefresh } from '@cldemo/library'`
+
+## Props
+
+| 参数 | 类型 | 默认值 | 必填 | 说明 |
+|------|------|--------|------|------|
+| className | `String` | `` | 否 |  |
+| disabled | `Boolean` | `` | 否 |  |
+| threshold | `Number` | `60` | 否 |  |
+| list | `any[]` | `undefined` | 否 |  |
+| minItemSize | `Number` | `60` | 否 |  |
+| sizeDependencies | `Function` | `undefined` | 否 |  |
+| finished | `Boolean` | `` | 否 |  |
+| loading | `Boolean` | `` | 否 |  |
+| pullIcon | `String` | `'ptr-icon-arrow'` | 否 |  |
+| loadingIcon | `String` | `'ptr-icon-spinner'` | 否 |  |
+| loadingText | `String` | `'加载中...'` | 否 |  |
+| finishedText | `String` | `'没有更多了'` | 否 |  |
+
+## Slots
+
+| 名称 | 说明 |
+|------|------|
+| indicator | indicator 插槽 |
+| item | item 插槽 |
+| loadMore | loadMore 插槽 |
+| finished | finished 插槽 |
+| default | 默认插槽 |
+
+## Events
+
+| 事件名 | 说明 |
+|--------|------|
+| refresh |  |
+| loadMore |  |
+
+## 方法
+
+| 方法 | 说明 |
+|------|------|
+| finishRefresh() |  |
+
+## 基础用法
+
+```vue
+<cl-pull-to-refresh></cl-pull-to-refresh>
+```

package/docs/components/Web/Breadcrumb.md

@@ -0,0 +1,26 @@
+# ClBreadcrumb Breadcrumb
+
+> 面包屑导航组件，显示当前页面路径
+
+- **标签名**: `<cl-breadcrumb>`
+- **引入**: `import { ClBreadcrumb } from '@cldemo/library'`
+
+## Props
+
+| 参数 | 类型 | 默认值 | 必填 | 说明 |
+|------|------|--------|------|------|
+| className | `String` | `` | 否 |  |
+| list | `Array` | `() => []` | 否 |  |
+| title | `String` | `` | 否 |  |
+
+## Events
+
+| 事件名 | 说明 |
+|--------|------|
+| onClickUrl |  |
+
+## 基础用法
+
+```vue
+<cl-breadcrumb></cl-breadcrumb>
+```

package/docs/components/Web/Calendar.md

@@ -0,0 +1,34 @@
+# ClCalendar Calendar
+
+> 日历组件，支持日期选择、农历显示、日程标记
+
+- **标签名**: `<cl-calendar>`
+- **引入**: `import { ClCalendar } from '@cldemo/library'`
+
+## Props
+
+| 参数 | 类型 | 默认值 | 必填 | 说明 |
+|------|------|--------|------|------|
+| className | `String` | `` | 否 |  |
+| viewDateTime | `String` | `` | 否 |  |
+| weekFirst | `String` | `'monday'` | 否 |  |
+
+## Slots
+
+| 名称 | 说明 |
+|------|------|
+| day | day 插槽 |
+
+## Events
+
+| 事件名 | 说明 |
+|--------|------|
+| onChange | 值改变事件 |
+| onClick | 点击事件 |
+| onHover |  |
+
+## 基础用法
+
+```vue
+<cl-calendar></cl-calendar>
+```

package/docs/components/Web/Card.md

@@ -0,0 +1,22 @@
+# ClCard Card
+
+> 卡片容器组件，提供统一的卡片布局
+
+- **标签名**: `<cl-card>`
+- **引入**: `import { ClCard } from '@cldemo/library'`
+
+## Slots
+
+| 名称 | 说明 |
+|------|------|
+| headTitle | 卡片头部标题插槽 |
+| headFlex | headFlex 插槽 |
+| headExplain | headExplain 插槽 |
+| default | 默认插槽 |
+| foot | foot 插槽 |
+
+## 基础用法
+
+```vue
+<cl-card></cl-card>
+```

package/docs/components/Web/CardLegend.md

@@ -0,0 +1,20 @@
+# ClCardLegend CardLegend
+
+> 图例卡片组件，用于代码演示和文档展示
+
+- **标签名**: `<cl-card-legend>`
+- **引入**: `import { ClCardLegend } from '@cldemo/library'`
+
+## Slots
+
+| 名称 | 说明 |
+|------|------|
+| remark | 备注说明插槽 |
+| demo | 演示区域插槽 |
+| code | 代码区域插槽 |
+
+## 基础用法
+
+```vue
+<cl-card-legend></cl-card-legend>
+```

package/docs/components/Web/Collapse.md

@@ -0,0 +1,26 @@
+# ClCollapse Collapse
+
+> 折叠面板组件，支持手风琴模式和多层嵌套
+
+- **标签名**: `<cl-collapse>`
+- **引入**: `import { ClCollapse } from '@cldemo/library'`
+
+## Props
+
+| 参数 | 类型 | 默认值 | 必填 | 说明 |
+|------|------|--------|------|------|
+| className | `String` | `` | 否 |  |
+| isOperate | `Boolean` | `true` | 否 |  |
+
+## Slots
+
+| 名称 | 说明 |
+|------|------|
+| title | 标题插槽 |
+| default | 默认插槽 |
+
+## 基础用法
+
+```vue
+<cl-collapse></cl-collapse>
+```

package/docs/components/Web/Colorpicker.md

@@ -0,0 +1,41 @@
+# ClColorpicker Colorpicker
+
+> 颜色选择器组件，支持取色和预设颜色
+
+- **标签名**: `<cl-colorpicker>`
+- **引入**: `import { ClColorpicker } from '@cldemo/library'`
+
+## Props
+
+| 参数 | 类型 | 默认值 | 必填 | 说明 |
+|------|------|--------|------|------|
+| value | `String` | `` | 否 |  |
+| className | `String` | `` | 否 |  |
+| disabled | `Boolean` | `false` | 否 |  |
+| isAlpha | `Boolean` | `true` | 否 |  |
+| isFormat | `Boolean` | `true` | 否 |  |
+| isOperate | `Boolean` | `true` | 否 |  |
+| isPreset | `Boolean` | `true` | 否 |  |
+| isDropdown | `Boolean` | `true` | 否 |  |
+
+## Events
+
+| 事件名 | 说明 |
+|--------|------|
+| update:value |  |
+| onChange | 值改变事件 |
+| onInit | 初始化完成事件 |
+
+## 方法
+
+| 方法 | 说明 |
+|------|------|
+| getValue() | 获取当前值 |
+| getValueData() | 获取当前值对应的数据对象 |
+| setValue() | 设置值 |
+
+## 基础用法
+
+```vue
+<cl-colorpicker></cl-colorpicker>
+```

package/docs/components/Web/CropperPreview.md

@@ -0,0 +1,43 @@
+# ClCropperPreview CropperPreview
+
+> 图片裁剪预览组件，预览裁剪后的图片效果
+
+- **标签名**: `<cl-cropper-preview>`
+- **引入**: `import { ClCropperPreview } from '@cldemo/library'`
+
+## Props
+
+| 参数 | 类型 | 默认值 | 必填 | 说明 |
+|------|------|--------|------|------|
+| className | `String` | `` | 否 |  |
+| previewImageUrl | `String` | `` | 否 |  |
+| coverImageUrl | `String` | `` | 否 |  |
+| width | `Number` | `400` | 否 |  |
+| height | `Number` | `400` | 否 |  |
+| widthPreview | `Number` | `` | 否 |  |
+| heightPreview | `Number` | `` | 否 |  |
+| previewShape | `String` | `'square'` | 否 |  |
+| isCenterBox | `Boolean` | `true` | 否 |  |
+| isShowUploadBtn | `Boolean` | `true` | 否 |  |
+| getCropperImageUrl | `Function` | `` | 否 |  |
+| saveImageBase64 | `Function` | `` | 否 |  |
+
+## Events
+
+| 事件名 | 说明 |
+|--------|------|
+| onInitCoverImage |  |
+
+## 方法
+
+| 方法 | 说明 |
+|------|------|
+| getValue() | 获取当前值 |
+| getCropperUrl() |  |
+| getCoverUrlOriginal() |  |
+
+## 基础用法
+
+```vue
+<cl-cropper-preview></cl-cropper-preview>
+```

package/docs/components/Web/Datetime.md

@@ -0,0 +1,52 @@
+# ClDatetime Datetime
+
+> 日期时间选择器，支持日期和时间的选择
+
+- **标签名**: `<cl-datetime>`
+- **引入**: `import { ClDatetime } from '@cldemo/library'`
+
+## Props
+
+| 参数 | 类型 | 默认值 | 必填 | 说明 |
+|------|------|--------|------|------|
+| value | `String` | `` | 否 |  |
+| className | `String` | `` | 否 |  |
+| placeholder | `String` | `` | 否 |  |
+| disabled | `Boolean` | `false` | 否 |  |
+| theme | `String` | `'default'` | 否 |  |
+| layerType | `String` | `'days'` | 否 |  |
+| timeType | `String` | `'date'` | 否 |  |
+| format | `String` | `` | 否 |  |
+| formatEnd | `String` | `` | 否 |  |
+| direction | `String` | `'left'` | 否 |  |
+| minDate | `String` | `` | 否 |  |
+| maxDate | `String` | `` | 否 |  |
+| isClear | `Boolean` | `false` | 否 |  |
+| rangeQuick | `Array` | `() => []` | 否 |  |
+| isDropdown | `Boolean` | `true` | 否 |  |
+| checkCallback | `Function` | `` | 否 |  |
+| themeStyle | `String` | `'default'` | 否 |  |
+| arrowDirection | `String` | `'right'` | 否 |  |
+| isUseDropdownArrow | `Boolean` | `true` | 否 |  |
+
+## Events
+
+| 事件名 | 说明 |
+|--------|------|
+| update:value |  |
+| onChange | 值改变事件 |
+| onInit | 初始化完成事件 |
+
+## 方法
+
+| 方法 | 说明 |
+|------|------|
+| getValue() | 获取当前值 |
+| getValueData() | 获取当前值对应的数据对象 |
+| setValue() | 设置值 |
+
+## 基础用法
+
+```vue
+<cl-datetime></cl-datetime>
+```

package/docs/components/Web/Dropdownmenu.md

@@ -0,0 +1,33 @@
+# ClDropdownmenu Dropdownmenu
+
+> 下拉菜单组件，支持多级菜单和图标
+
+- **标签名**: `<cl-dropdownmenu>`
+- **引入**: `import { ClDropdownmenu } from '@cldemo/library'`
+
+## Props
+
+| 参数 | 类型 | 默认值 | 必填 | 说明 |
+|------|------|--------|------|------|
+| className | `String` | `` | 否 |  |
+| classDropDown | `String` | `` | 否 |  |
+| label | `String` | `` | 否 |  |
+| direction | `String` | `'left'` | 否 |  |
+| isUseLabelArrow | `Boolean` | `false` | 否 |  |
+| isUseDropdownArrow | `Boolean` | `false` | 否 |  |
+| transitionEnter | `String` | `` | 否 |  |
+| transitionLeave | `String` | `` | 否 |  |
+
+## Slots
+
+| 名称 | 说明 |
+|------|------|
+| label | label 插槽 |
+| default | 默认插槽 |
+| dropdown | 下拉内容插槽 |
+
+## 基础用法
+
+```vue
+<cl-dropdownmenu></cl-dropdownmenu>
+```