@cldemo/ui-kit 1.0.0

package/docs/components/Element/AnchorNav.md

@@ -0,0 +1,19 @@
+# ClAnchorNav AnchorNav
+
+> 锚点导航组件，页面内快速定位导航
+
+- **标签名**: `<cl-anchor-nav>`
+- **引入**: `import { ClAnchorNav } from '@cldemo/library'`
+
+## Props
+
+| 参数 | 类型 | 默认值 | 必填 | 说明 |
+|------|------|--------|------|------|
+| className | `String` | `` | 否 | 自定义CSS类名 |
+| list | `AnchorItem[]` | `` | 是 | 锚点列表配置，每个锚点包含id和label属性 |
+
+## 基础用法
+
+```vue
+<cl-anchor-nav></cl-anchor-nav>
+```

package/docs/components/Element/Badge.md

@@ -0,0 +1,24 @@
+# ClBadge Badge
+
+> 徽章组件，显示数字标记或状态圆点
+
+- **标签名**: `<cl-badge>`
+- **引入**: `import { ClBadge } from '@cldemo/library'`
+
+## Props
+
+| 参数 | 类型 | 默认值 | 必填 | 说明 |
+|------|------|--------|------|------|
+| className | `String` | `` | 否 | 自定义CSS类名 |
+| color | `String` | `'default'` | 否 | 颜色主题，可选: default, green, red, yellow, black, gray |
+| colorSty | `String` | `` | 否 | 自定义颜色样式 |
+| num | `String, Number` | `` | 否 | 显示的数字 |
+| maxNum | `Number` | `-1` | 否 | 最大显示数字，超过显示 maxNum+ |
+| isHideZero | `Boolean` | `true` | 否 | 是否隐藏数字为0的徽章 |
+| isDot | `Boolean` | `false` | 否 | 是否显示为圆点 |
+
+## 基础用法
+
+```vue
+<cl-badge></cl-badge>
+```

package/docs/components/Element/Button.md

@@ -0,0 +1,45 @@
+# ClButton Button
+
+> 按钮组件，支持多种颜色主题、尺寸、loading 状态、图标和文字组合
+
+- **标签名**: `<cl-button>`
+- **引入**: `import { ClButton } from '@cldemo/library'`
+
+## Props
+
+| 参数 | 类型 | 默认值 | 必填 | 说明 |
+|------|------|--------|------|------|
+| className | `String` | `` | 否 | 自定义CSS类名 |
+| label | `String` | `` | 否 | 按钮文本标签 |
+| icon | `String` | `` | 否 | 按钮图标类名 |
+| color | `String` | `'default'` | 否 | 按钮颜色主题，可选: default, green, red, yellow, white, grayLight, transparent |
+| size | `String` | `` | 否 | 按钮尺寸，可选: large, small, xl |
+| disabled | `Boolean` | `false` | 否 | 是否禁用按钮 |
+| isShowLoad | `Boolean` | `false` | 否 | 是否显示加载动画 |
+| loadPos | `String` | `'right'` | 否 | 加载动画位置，可选: right, zoom-out, fixedCenter |
+| loadTheme | `String` | `'rotaryLine'` | 否 | 加载动画主题，可选: rotaryLine, circleNotch, circleBubble |
+| loadDrift | `Boolean` | `true` | 否 | 加载时是否漂移 |
+| loadText | `String` | `` | 否 | 加载提示文本 |
+| isShowBackDrop | `Boolean` | `false` | 否 | 是否显示遮罩层 |
+| isShowWaves | `Boolean` | `true` | 否 | 是否显示点击波纹效果 |
+| wavesColor | `String` | `'white'` | 否 | 波纹颜色，可选: white, black |
+| loadStatusIsIng | `Boolean, null` | `null` | 否 | 加载状态控制（true开始，false结束，null忽略） |
+
+## Events
+
+| 事件名 | 说明 |
+|--------|------|
+| onClick | 点击事件 |
+
+## 方法
+
+| 方法 | 说明 |
+|------|------|
+| loadStart() |  |
+| loadStop() |  |
+
+## 基础用法
+
+```vue
+<cl-button></cl-button>
+```

package/docs/components/Element/Checkbox.md

@@ -0,0 +1,48 @@
+# ClCheckbox Checkbox
+
+> 复选框组件，支持多选、全选、半选状态
+
+- **标签名**: `<cl-checkbox>`
+- **引入**: `import { ClCheckbox } from '@cldemo/library'`
+
+## Props
+
+| 参数 | 类型 | 默认值 | 必填 | 说明 |
+|------|------|--------|------|------|
+| value | `String` | `` | 是 |  |
+| className | `String` | `` | 否 |  |
+| name | `String` | `` | 是 |  |
+| list | `ListInfo[]` | `() => []` | 否 |  |
+| disabled | `Boolean` | `false` | 否 |  |
+| width | `String` | `` | 否 |  |
+| isInline | `Boolean` | `true` | 否 |  |
+| checkChangeBefore | `Function` | `undefined` | 否 |  |
+
+## Slots
+
+| 名称 | 说明 |
+|------|------|
+| default | 默认插槽 |
+
+## Events
+
+| 事件名 | 说明 |
+|--------|------|
+| update:value |  |
+| onChange | 值改变事件 |
+| onInit | 初始化完成事件 |
+
+## 方法
+
+| 方法 | 说明 |
+|------|------|
+| getValue() | 获取当前值 |
+| getValueData() | 获取当前值对应的数据对象 |
+| setValue() | 设置值 |
+| runInitComplete() |  |
+
+## 基础用法
+
+```vue
+<cl-checkbox></cl-checkbox>
+```

package/docs/components/Element/Clipboard.md

@@ -0,0 +1,34 @@
+# ClClipboard Clipboard
+
+> 剪贴板复制组件，一键复制文本到剪贴板
+
+- **标签名**: `<cl-clipboard>`
+- **引入**: `import { ClClipboard } from '@cldemo/library'`
+
+## Props
+
+| 参数 | 类型 | 默认值 | 必填 | 说明 |
+|------|------|--------|------|------|
+| textLabel | `String, Function` | `` | 是 |  |
+| className | `String` | `` | 否 |  |
+| iconColorClass | `String` | `` | 否 |  |
+| isUseSuccess | `Boolean` | `` | 否 |  |
+
+## Slots
+
+| 名称 | 说明 |
+|------|------|
+| default | 默认插槽 |
+
+## Events
+
+| 事件名 | 说明 |
+|--------|------|
+| onCopySuccess |  |
+| onCopyError |  |
+
+## 基础用法
+
+```vue
+<cl-clipboard></cl-clipboard>
+```

package/docs/components/Element/Countup.md

@@ -0,0 +1,12 @@
+# ClCountup Countup
+
+> 数字动画组件，数字递增/递减动画效果
+
+- **标签名**: `<cl-countup>`
+- **引入**: `import { ClCountup } from '@cldemo/library'`
+
+## 基础用法
+
+```vue
+<cl-countup></cl-countup>
+```

package/docs/components/Element/Cropper.md

@@ -0,0 +1,46 @@
+# ClCropper Cropper
+
+> 图片裁剪组件，支持拖拽裁剪和缩放
+
+- **标签名**: `<cl-cropper>`
+- **引入**: `import { ClCropper } from '@cldemo/library'`
+
+## Props
+
+| 参数 | 类型 | 默认值 | 必填 | 说明 |
+|------|------|--------|------|------|
+| className | `String` | `` | 否 |  |
+| src | `String` | `` | 是 |  |
+| width | `Number` | `` | 是 |  |
+| height | `Number` | `` | 是 |  |
+| isFixedAspectRatio | `Boolean` | `true` | 否 |  |
+| isCenterBox | `Boolean` | `true` | 否 |  |
+| isPreview | `Boolean` | `true` | 否 |  |
+| previewShape | `String` | `'square'` | 否 |  |
+| enlarge | `Number` | `2` | 否 |  |
+| isModal | `Boolean` | `true` | 否 |  |
+| isShowUpload | `Boolean` | `true` | 否 |  |
+| isShowSave | `Boolean` | `false` | 否 |  |
+| fillColor | `String` | `'transparent'` | 否 |  |
+| alignLine | `String` | `'center'` | 否 |  |
+| isPreviewAlignLine | `Boolean` | `false` | 否 |  |
+
+## Events
+
+| 事件名 | 说明 |
+|--------|------|
+| onSubmit | 提交事件 |
+| onImgLoad |  |
+
+## 方法
+
+| 方法 | 说明 |
+|------|------|
+| getImageBase64() |  |
+| show() |  |
+
+## 基础用法
+
+```vue
+<cl-cropper></cl-cropper>
+```

package/docs/components/Element/Darg.md

@@ -0,0 +1,30 @@
+# ClDarg Darg
+
+> 拖拽排序组件，支持列表项拖拽重排
+
+- **标签名**: `<cl-darg>`
+- **引入**: `import { ClDarg } from '@cldemo/library'`
+
+## Slots
+
+| 名称 | 说明 |
+|------|------|
+| default | 默认插槽 |
+
+## Events
+
+| 事件名 | 说明 |
+|--------|------|
+| onChangeSort |  |
+
+## 方法
+
+| 方法 | 说明 |
+|------|------|
+| getArrSort() |  |
+
+## 基础用法
+
+```vue
+<cl-darg></cl-darg>
+```

package/docs/components/Element/Ellipsis.md

@@ -0,0 +1,12 @@
+# ClEllipsis Ellipsis
+
+> 文本省略组件，超长文本自动省略并支持 tooltip 查看
+
+- **标签名**: `<cl-ellipsis>`
+- **引入**: `import { ClEllipsis } from '@cldemo/library'`
+
+## 基础用法
+
+```vue
+<cl-ellipsis></cl-ellipsis>
+```

package/docs/components/Element/Form.md

@@ -0,0 +1,25 @@
+# ClForm Form
+
+> 表单组件，支持表单验证和提交
+
+- **标签名**: `<cl-form>`
+- **引入**: `import { ClForm } from '@cldemo/library'`
+
+## Slots
+
+| 名称 | 说明 |
+|------|------|
+| default | 默认插槽 |
+
+## 方法
+
+| 方法 | 说明 |
+|------|------|
+| validate() |  |
+| reset() | 重置 |
+
+## 基础用法
+
+```vue
+<cl-form></cl-form>
+```

package/docs/components/Element/FormGroup.md

@@ -0,0 +1,29 @@
+# ClFormGroup FormGroup
+
+> 表单组组件，管理多个表单项的布局和校验
+
+- **标签名**: `<cl-form-group>`
+- **引入**: `import { ClFormGroup } from '@cldemo/library'`
+
+## Props
+
+| 参数 | 类型 | 默认值 | 必填 | 说明 |
+|------|------|--------|------|------|
+| colRatio | `String` | `'2:10'` | 否 |  |
+| className | `String` | `` | 否 |  |
+| label | `String` | `` | 否 |  |
+| isTipMust | `Boolean` | `false` | 否 |  |
+| isPlaintext | `Boolean` | `false` | 否 |  |
+
+## Slots
+
+| 名称 | 说明 |
+|------|------|
+| labelExtend | labelExtend 插槽 |
+| default | 默认插槽 |
+
+## 基础用法
+
+```vue
+<cl-form-group></cl-form-group>
+```

package/docs/components/Element/IconFont.md

@@ -0,0 +1,12 @@
+# ClIconFont IconFont
+
+> 图标组件，用于显示图标字体
+
+- **标签名**: `<cl-icon-font>`
+- **引入**: `import { ClIconFont } from '@cldemo/library'`
+
+## 基础用法
+
+```vue
+<cl-icon-font></cl-icon-font>
+```

package/docs/components/Element/Image.md

@@ -0,0 +1,18 @@
+# ClImage Image
+
+> 图片组件，支持懒加载和占位图
+
+- **标签名**: `<cl-image>`
+- **引入**: `import { ClImage } from '@cldemo/library'`
+
+## Events
+
+| 事件名 | 说明 |
+|--------|------|
+| onInit | 初始化完成事件 |
+
+## 基础用法
+
+```vue
+<cl-image></cl-image>
+```

package/docs/components/Element/Input.md

@@ -0,0 +1,65 @@
+# ClInput Input
+
+> 输入框组件，支持文本/数字/密码/千分位/清除按钮，支持 prepend/append 插槽
+
+- **标签名**: `<cl-input>`
+- **引入**: `import { ClInput } from '@cldemo/library'`
+
+## Props
+
+| 参数 | 类型 | 默认值 | 必填 | 说明 |
+|------|------|--------|------|------|
+| theme | `String` | `'default'` | 否 | 可选: default, icon, bottomLine |
+| value | `String, Number` | `` | 否 |  |
+| inputType | `String` | `` | 否 |  |
+| className | `String` | `` | 否 |  |
+| width | `String` | `` | 否 |  |
+| name | `String` | `` | 否 |  |
+| placeholder | `String` | `` | 否 |  |
+| disabled | `Boolean` | `false` | 否 |  |
+| isReadonly | `Boolean` | `false` | 否 |  |
+| isClean | `Boolean` | `true` | 否 |  |
+| isNumber | `Boolean` | `false` | 否 |  |
+| decimal | `Number` | `0` | 否 |  |
+| isThousand | `Boolean` | `true` | 否 |  |
+| isImmediateThousand | `Boolean` | `true` | 否 |  |
+| isPassword | `Boolean` | `false` | 否 |  |
+| changDelayTime | `Number` | `200` | 否 |  |
+
+## Slots
+
+| 名称 | 说明 |
+|------|------|
+| prepend | 前置内容插槽 |
+| append | 后置内容插槽 |
+
+## Events
+
+| 事件名 | 说明 |
+|--------|------|
+| update:value |  |
+| onChange | 值改变事件 |
+| onFocus | 获得焦点事件 |
+| onBlur | 失去焦点事件 |
+| onChangeBlur | 失去焦点且值改变时触发 |
+| onKeyupEnter | 回车键抬起事件 |
+| onClear | 清除事件 |
+| onInit | 初始化完成事件 |
+| onKeydown | 键盘按下事件 |
+| onKeyup | 键盘抬起事件 |
+| onChangeDelay | 值改变后防抖触发 |
+
+## 方法
+
+| 方法 | 说明 |
+|------|------|
+| getValue() | 获取当前值 |
+| getValueData() | 获取当前值对应的数据对象 |
+| setValue() | 设置值 |
+| focus() | 获取焦点 |
+
+## 基础用法
+
+```vue
+<cl-input></cl-input>
+```

package/docs/components/Element/InputCaptcha.md

@@ -0,0 +1,27 @@
+# ClInputCaptcha InputCaptcha
+
+> 验证码输入框，集成发送验证码倒计时功能
+
+- **标签名**: `<cl-input-captcha>`
+- **引入**: `import { ClInputCaptcha } from '@cldemo/library'`
+
+## Events
+
+| 事件名 | 说明 |
+|--------|------|
+| update:value |  |
+| onChange | 值改变事件 |
+| onKeyupEnter | 回车键抬起事件 |
+| onSend |  |
+
+## 方法
+
+| 方法 | 说明 |
+|------|------|
+| getValue() | 获取当前值 |
+
+## 基础用法
+
+```vue
+<cl-input-captcha></cl-input-captcha>
+```

package/docs/components/Element/InputNumber.md

@@ -0,0 +1,51 @@
+# ClInputNumber InputNumber
+
+> 数字输入框，支持加减按钮、小数位数、千分位格式化
+
+- **标签名**: `<cl-input-number>`
+- **引入**: `import { ClInputNumber } from '@cldemo/library'`
+
+## Props
+
+| 参数 | 类型 | 默认值 | 必填 | 说明 |
+|------|------|--------|------|------|
+| size | `String` | `'large'` | 否 | 可选: large, small |
+| btnShowType | `String` | `'fixed'` | 否 | 可选: fixed, focus |
+| btnTheme | `String` | `'leftRight'` | 否 | 可选: leftRight, upDown |
+| value | `String, Number` | `` | 否 |  |
+| placeholder | `String` | `` | 否 |  |
+| className | `String` | `` | 否 |  |
+| disabled | `Boolean` | `false` | 否 |  |
+| isClean | `Boolean` | `true` | 否 |  |
+| isTextRead | `Boolean` | `false` | 否 |  |
+| min | `Number` | `undefined` | 否 |  |
+| max | `Number` | `undefined` | 否 |  |
+| isLoop | `Boolean` | `false` | 否 |  |
+| decimal | `Number` | `0` | 否 |  |
+| fillZeroCount | `Number` | `0` | 否 |  |
+| btnStep | `Number` | `1` | 否 |  |
+| btnClsIconSub | `String` | `` | 否 |  |
+| btnClsIconAdd | `String` | `` | 否 |  |
+| operateBtnDownBeforeCallback | `Function` | `` | 否 |  |
+| calculationOperateValueCallback | `Function` | `` | 否 |  |
+
+## Slots
+
+| 名称 | 说明 |
+|------|------|
+| textPrepend | textPrepend 插槽 |
+| prepend | 前置内容插槽 |
+| icon | 图标插槽 |
+
+## Events
+
+| 事件名 | 说明 |
+|--------|------|
+| update:value |  |
+| onChange | 值改变事件 |
+
+## 基础用法
+
+```vue
+<cl-input-number></cl-input-number>
+```

package/docs/components/Element/InputSearch.md

@@ -0,0 +1,43 @@
+# ClInputSearch InputSearch
+
+> 搜索输入框，支持搜索图标和清除按钮
+
+- **标签名**: `<cl-input-search>`
+- **引入**: `import { ClInputSearch } from '@cldemo/library'`
+
+## Props
+
+| 参数 | 类型 | 默认值 | 必填 | 说明 |
+|------|------|--------|------|------|
+| theme | `String` | `'icon'` | 否 | 可选: icon, text |
+| location | `String` | `'right'` | 否 | 可选: left, right |
+| value | `String` | `` | 否 |  |
+| placeholder | `String` | `` | 否 |  |
+| className | `String` | `` | 否 |  |
+| disabled | `Boolean` | `false` | 否 |  |
+| textLabel | `String` | `` | 否 |  |
+| changDelayTime | `Number` | `200` | 否 |  |
+
+## Events
+
+| 事件名 | 说明 |
+|--------|------|
+| update:value |  |
+| onChange | 值改变事件 |
+| onSearch |  |
+| onFocus | 获得焦点事件 |
+| onBlur | 失去焦点事件 |
+
+## 方法
+
+| 方法 | 说明 |
+|------|------|
+| getValue() | 获取当前值 |
+| setValue() | 设置值 |
+| focus() | 获取焦点 |
+
+## 基础用法
+
+```vue
+<cl-input-search></cl-input-search>
+```

package/docs/components/Element/InputTextarea.md

@@ -0,0 +1,52 @@
+# ClInputTextarea InputTextarea
+
+> 文本域输入框，支持多行文本输入
+
+- **标签名**: `<cl-input-textarea>`
+- **引入**: `import { ClInputTextarea } from '@cldemo/library'`
+
+## Props
+
+| 参数 | 类型 | 默认值 | 必填 | 说明 |
+|------|------|--------|------|------|
+| value | `String` | `` | 否 |  |
+| className | `String` | `` | 否 |  |
+| width | `String` | `` | 否 |  |
+| height | `String` | `'100px'` | 否 |  |
+| name | `String` | `` | 否 |  |
+| placeholder | `String` | `` | 否 |  |
+| disabled | `Boolean` | `false` | 否 |  |
+| isClean | `Boolean` | `false` | 否 |  |
+| isAutoHeight | `Boolean` | `false` | 否 |  |
+| changDelayTime | `Number` | `200` | 否 |  |
+| heightMax | `String` | `` | 否 |  |
+
+## Events
+
+| 事件名 | 说明 |
+|--------|------|
+| update:value |  |
+| onChange | 值改变事件 |
+| onInit | 初始化完成事件 |
+| onKeydownEnter |  |
+| onKeyupEnter | 回车键抬起事件 |
+| onFocus | 获得焦点事件 |
+| onBlur | 失去焦点事件 |
+| onChangeDelay | 值改变后防抖触发 |
+
+## 方法
+
+| 方法 | 说明 |
+|------|------|
+| getValue() | 获取当前值 |
+| getValueData() | 获取当前值对应的数据对象 |
+| setValue() | 设置值 |
+| initHeight() |  |
+| focus() | 获取焦点 |
+| getParentElement() |  |
+
+## 基础用法
+
+```vue
+<cl-input-textarea></cl-input-textarea>
+```

package/docs/components/Element/Link.md

@@ -0,0 +1,41 @@
+# ClLink Link
+
+> 链接组件，支持 href 跳转和点击事件
+
+- **标签名**: `<cl-link>`
+- **引入**: `import { ClLink } from '@cldemo/library'`
+
+## Props
+
+| 参数 | 类型 | 默认值 | 必填 | 说明 |
+|------|------|--------|------|------|
+| wavesColor | `String` | `'black'` | 否 | 可选: black, white |
+| url | `String, Object` | `` | 否 |  |
+| className | `String` | `` | 否 |  |
+| disabled | `Boolean` | `false` | 否 |  |
+| isUnderline | `Boolean` | `false` | 否 |  |
+| isLight | `Boolean` | `false` | 否 |  |
+| isWaves | `Boolean` | `false` | 否 |  |
+| isTargetBlank | `Boolean` | `false` | 否 |  |
+| isOutside | `Boolean` | `false` | 否 |  |
+| isStopPropagation | `Boolean` | `false` | 否 |  |
+
+## Slots
+
+| 名称 | 说明 |
+|------|------|
+| default | 默认插槽 |
+
+## Events
+
+| 事件名 | 说明 |
+|--------|------|
+| onClick | 点击事件 |
+| onHoverIn |  |
+| onHoverOut |  |
+
+## 基础用法
+
+```vue
+<cl-link></cl-link>
+```

package/docs/components/Element/Load.md

@@ -0,0 +1,20 @@
+# ClLoad Load
+
+> 加载动画组件，支持多种加载主题和尺寸
+
+- **标签名**: `<cl-load>`
+- **引入**: `import { ClLoad } from '@cldemo/library'`
+
+## Props
+
+| 参数 | 类型 | 默认值 | 必填 | 说明 |
+|------|------|--------|------|------|
+| theme | `String` | `'rotaryLine'` | 否 | 可选: rotaryLine, circleNotch, circleBubble, ballColor4 |
+| size | `String` | `'large'` | 否 |  |
+| color | `String` | `'default'` | 否 |  |
+
+## 基础用法
+
+```vue
+<cl-load></cl-load>
+```

package/docs/components/Element/LoadScreen.md

@@ -0,0 +1,19 @@
+# ClLoadScreen LoadScreen
+
+> 全屏加载组件，提供全局 loading 遮盖层
+
+- **标签名**: `<cl-load-screen>`
+- **引入**: `import { ClLoadScreen } from '@cldemo/library'`
+
+## 方法
+
+| 方法 | 说明 |
+|------|------|
+| show() |  |
+| hide() |  |
+
+## 基础用法
+
+```vue
+<cl-load-screen></cl-load-screen>
+```