@icc-grow/web-components 1.0.0 → 1.1.1

package/skills/icc-web-components/references/i-card.md

@@ -1,12 +0,0 @@
-# ICard
-
-卡片容器。
-
-**Props**
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| title | `string` | — | 卡片标题 |
-| size | `'small' \| 'large'` | — | 尺寸变体 |
-
-**Slots**: `header`（优先级高于 title）、`default`、`footer`

package/skills/icc-web-components/references/i-color-picker.md

@@ -1,17 +0,0 @@
-# IColorPicker
-
-颜色选择器（弹层触发器模式）。
-
-**Props**
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| format | `'hex' \| 'rgb' \| 'hsl'` | `'hex'` | 输出格式 |
-| showAlpha | `boolean` | `false` | 透明度滑条 |
-| swatches | `string[]` | — | 预设颜色色板 |
-| disabled | `boolean` | `false` | 禁用 |
-| panelWidth | `number` | `300` | 面板宽度 |
-
-**Events**: `change` `clear`
-
-> 也可使用 `IColorPickerPanel`（无弹层，独立面板）。

package/skills/icc-web-components/references/i-crud-page.md

@@ -1,204 +0,0 @@
-# CRUD 列表页组合 API
-
-> 本文件覆盖 CRUD 列表页最常见的组件组合，一次读取即可完成整个页面开发。
-
----
-
-## IPageLayout
-
-页面骨架，Header / Search / Body / Footer 四区域。
-
-**Props**
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| title | `string` | — | 页面主标题 |
-| subtitle | `string` | — | 页面副标题 |
-| isAuth | `boolean` | `true` | 是否有权限，`false` 时展示无权限状态 |
-
-**Slots**
-
-| Slot | Description |
-|------|-------------|
-| header-action | 标题栏右侧操作区 |
-| search | 搜索条件区（放 IPageSearch） |
-| default | 页面主体内容 |
-| footer | 页面底部（放 IPagination） |
-
----
-
-## IPageSearch
-
-搜索区组件，搭配 IPageLayout 的 `#search` 插槽。
-
-**Slots**
-
-| Slot | Description |
-|------|-------------|
-| default | 搜索控件（IInput, ISelect 等） |
-| action | 操作按钮区（查询、重置） |
-
----
-
-## IButton
-
-**Props**
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| type | `'primary' \| 'danger' \| 'black'` | — | 按钮类型 |
-| size | `'large' \| 'medium' \| 'small'` | `'medium'` | 尺寸 |
-| disabled | `boolean` | `false` | 禁用 |
-| loading | `boolean` | `false` | 加载中 |
-| icon | `string` | — | 图标名称 |
-| text | `boolean` | `false` | 文字按钮（无背景） |
-| plain | `boolean` | `false` | 朴素按钮（描边） |
-
-**Events**: `click`
-
----
-
-## IInput
-
-**Props**
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| type | `'text' \| 'password'` | `'text'` | 类型 |
-| placeholder | `string` | — | 占位文本 |
-| clearable | `boolean` | `false` | 一键清空 |
-| showPassword | `boolean` | `false` | 密码切换 |
-| disabled | `boolean` | `false` | 禁用 |
-| readonly | `boolean` | `false` | 只读 |
-| maxlength | `number` | — | 最大长度 |
-| showWordLimit | `boolean` | `false` | 字数统计 |
-
-**Events**: `focus` `blur` `clear` `input` `change`
-
-**Slots**: `prefix` `suffix`
-
-**Expose**: `focus()` `blur()` `select()`
-
----
-
-## ISelect
-
-选择器，数据驱动。
-
-**Props**
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| options | `Record<string, unknown>[]` | `[]` | 选项数据 |
-| props | `{ label?: string; value?: string; disabled?: string }` | — | 字段映射 |
-| multiple | `boolean` | `false` | 多选 |
-| disabled | `boolean` | `false` | 禁用 |
-| clearable | `boolean` | `false` | 可清空 |
-| placeholder | `string` | — | 占位文本 |
-| filterable | `boolean` | `false` | 可搜索 |
-| remote | `boolean` | `false` | 远程搜索 |
-| tagLimit | `number` | — | 多选 Tag 最多展示数 |
-
-**Events**: `change` `search` `clear` `visible-change`
-
-**Expose**: `show()` `hide()` `focus()` `blur()`
-
----
-
-## IDatePicker
-
-**Props**
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| type | `'date' \| 'dateTime' \| 'week' \| 'month' \| 'year'` | `'date'` | 类型 |
-| range | `boolean` | `false` | 范围选择 |
-| multiple | `boolean` | `false` | 多选 |
-| format | `string` | — | 显示格式（dayjs） |
-| valueFormat | `string` | — | v-model 输出格式 |
-| placeholder | `string` | — | 占位文本 |
-| endPlaceholder | `string` | — | 范围结束占位文本 |
-| rangeSeparator | `string` | `'~'` | 范围分隔符 |
-| disabled | `boolean` | `false` | 禁用 |
-| clearable | `boolean` | `false` | 可清空 |
-| disabledDate | `(date: Dayjs) => boolean` | — | 禁用日期 |
-
-**Events**: `change` `clear` `visible-change`
-
-**Expose**: `show()` `hide()` `focus()` `blur()`
-
----
-
-## ITable
-
-列配置驱动表格。
-
-**Props**
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| data | `any[]` | `[]` | 数据源 |
-| columns | `TableColumn[]` | `[]` | 列配置 |
-| height | `string \| number` | — | 固定高度（触发固定表头） |
-| maxHeight | `string \| number` | — | 最大高度 |
-| showSummary | `boolean` | `false` | 显示合计行 |
-| summaryMethod | `(param) => any[]` | — | 自定义合计 |
-| rowKey | `string \| ((row) => string)` | — | 行唯一标识 |
-
-**TableColumn 配置**
-
-| Field | Type | Description |
-|-------|------|-------------|
-| type | `'default' \| 'selection' \| 'index' \| 'radio' \| 'expand'` | 列类型 |
-| label | `string` | 列标题 |
-| prop | `string` | 数据字段名（支持 `'a.b.c'`） |
-| width | `string \| number` | 列宽 |
-| minWidth | `string \| number` | 最小列宽 |
-| align | `'left' \| 'center' \| 'right'` | 对齐 |
-| fixed | `'left' \| 'right'` | 固定列 |
-| formatter | `(row, column, cellValue, index) => any` | 格式化 |
-| sortable | `boolean \| 'custom'` | 排序，`'custom'` 为服务端 |
-| selectable | `(row, index) => boolean` | selection 列禁选 |
-
-**Events**
-
-| Event | Payload | Description |
-|-------|---------|-------------|
-| selection-change | `(selection)` | 多选变更 |
-| select | `(selection, row, selected?)` | 单行勾选 |
-| select-all | `(selection)` | 全选 |
-| sort-change | `({ column, prop, order })` | 排序变化 |
-| row-click | `(row, column, event)` | 行点击 |
-| radio-change | `(row)` | 单选行变更 |
-
-**Slots**: `#[prop]` — `{ row, column, $index }`（slot 名 = column.prop）
-
-**Expose**
-
-| Method | Description |
-|--------|-------------|
-| clearSelection() | 清空多选 |
-| getSelection() | 获取多选数据 |
-| setSelection(keys) | 按 rowKey 设置选中 |
-| toggleRowSelection(row, selected?) | 切换行选中 |
-| clearSort() | 清除排序 |
-| clearSelected() | 清除单选 |
-| getSelected() | 获取单选数据 |
-| setSelected(key) | 设置单选 |
-
----
-
-## IPagination
-
-**Props**
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| total | `number` | `0` | 总条目数 |
-| currentPage | `number` | `1` | 当前页（**v-model:currentPage**） |
-| pageSize | `number` | `10` | 每页条目（**v-model:pageSize**） |
-| pageSizes | `number[]` | `[10, 20, 50, 100]` | 每页条目选项 |
-| pagerCount | `number` | `5` | 页码按钮数 |
-| hideOnSinglePage | `boolean` | `false` | 单页时隐藏 |
-
-**Events**: `change` — `({ currentPage, pageSize })`

package/skills/icc-web-components/references/i-dialog.md

@@ -1,36 +0,0 @@
-# IDialog / IDrawer
-
-## IDialog
-
-**Props**
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| visible | `boolean` | — | **v-model:visible** |
-| title | `string` | — | 标题 |
-| width | `string \| number` | — | 面板宽度 |
-| showHeader | `boolean` | `true` | 显示 header |
-| closable | `boolean` | `true` | 关闭按钮 |
-| showOverlay | `boolean` | `true` | 显示遮罩 |
-| closeOnClickOverlay | `boolean` | `true` | 点击遮罩关闭 |
-| closeOnPressEscape | `boolean` | `true` | Esc 关闭 |
-| lockScroll | `boolean` | `true` | 锁定滚动 |
-
-**Events**: `open` `opened` `close` `closed`
-
-**Slots**: `header` `default` `footer`
-
----
-
-## IDrawer
-
-API 几乎与 IDialog 一致，额外支持方向和尺寸。
-
-**额外/不同 Props**
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| placement | `'left' \| 'right' \| 'top' \| 'bottom'` | `'right'` | 弹出方向 |
-| size | `string \| number` | — | 尺寸（左右=宽度，上下=高度） |
-
-> 其余 Props/Events/Slots 与 IDialog 相同。

package/skills/icc-web-components/references/i-draggable.md

@@ -1,46 +0,0 @@
-# IDraggable / ISortable
-
-## IDraggable
-
-自由拖拽移动 + 调整大小。
-
-**Props**
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| draggable | `boolean` | `true` | 可拖拽移动 |
-| handle | `string` | — | 拖拽手柄选择器 |
-| axis | `'x' \| 'y' \| 'both'` | `'both'` | 轴向约束 |
-| boundary | `'parent' \| 'none' \| HTMLElement` | `'none'` | 边界约束 |
-| resizable | `boolean` | `false` | 可调整大小 |
-| handles | `ResizeHandle[]` | — | resize 方向 |
-| minWidth / maxWidth | `number` | — | 宽度限制 |
-| minHeight / maxHeight | `number` | — | 高度限制 |
-| disabled | `boolean` | `false` | 禁用 |
-| grid | `[number, number]` | — | 网格吸附 |
-| strategy | `'transform' \| 'position'` | `'transform'` | 定位策略 |
-
-**Events**: `dragstart` `drag` `dragend` `resizestart` `resize` `resizeend`
-
----
-
-## ISortable
-
-拖拽排序列表，FLIP 动画。
-
-**Props**
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| modelValue | `unknown[]` | — | 列表数据（**v-model**） |
-| itemKey | `string \| ((item) => string \| number)` | — | 唯一标识（**必填**） |
-| handle | `string` | — | 拖拽手柄选择器 |
-| direction | `'vertical' \| 'horizontal'` | `'vertical'` | 排列方向 |
-| disabled | `boolean` | `false` | 禁用 |
-| ghostClass | `string` | — | ghost 类名 |
-| animationDuration | `number` | — | 动画时长(ms) |
-| threshold | `number` | — | 触发阈值(px) |
-
-**Events**: `sort-start` — `{ item, index }` · `sort-end` — `{ item, oldIndex, newIndex }`
-
-**Slots**: `default` — `{ item, index, isDragging }`

package/skills/icc-web-components/references/i-dropdown.md

@@ -1,21 +0,0 @@
-# IDropdown
-
-下拉操作菜单。
-
-**Props**
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| items | `DropdownItem[]` | `[]` | 菜单项数据 |
-| disabled | `boolean` | `false` | 禁用 |
-| placement | `Placement` | `'bottom-start'` | 弹出位置 |
-| offset | `number` | — | 偏移量 |
-| width | `number \| string` | — | 宽度 |
-
-**DropdownItem**: `{ label, value, disabled?, type?: 'default' | 'danger' }`
-
-**Events**: `command` — `(item)` ·  `visible-change` — `(visible)`
-
-**Slots**: `default`（触发器）、`item` — `{ item, index, disabled }`
-
-**Expose**: `show()` `hide()`

package/skills/icc-web-components/references/i-empty.md

@@ -1,15 +0,0 @@
-# IEmpty
-
-空状态占位。
-
-**Props**
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| url | `string` | — | 自定义图片 URL |
-| icon | `string` | — | 图标名称 |
-| iconSize | `number \| string` | `48` | 图标尺寸 |
-| desc | `string` | `'暂无数据'` | 描述文本 |
-| height | `number \| string` | `200` | 容器高度 |
-
-**Slots**: `image`（自定义图标区）、`default`（自定义描述区）

package/skills/icc-web-components/references/i-feedback.md

@@ -1,50 +0,0 @@
-# IConfirm / IMessage / INotification
-
-> 三个服务调用组件，**不是 Vue 组件**，纯函数式调用。
-
-## IConfirm
-
-```typescript
-import { IConfirm } from '@icc-grow/web-components'
-
-// type: 'primary' | 'warning' | 'error'
-IConfirm({
-  type: 'warning',
-  title: '确认删除',
-  content: '删除后不可恢复',
-  confirmText: '确定',      // 可选
-  cancelText: '取消',       // 可选
-  showCancelButton: true,    // 可选
-  closable: true,            // 可选
-}).then(() => { /* 确认 */ }).catch(() => { /* 取消 */ })
-
-// 简写
-IConfirm('确定删除吗？').then(...)
-```
-
-## IMessage
-
-```typescript
-import { IMessage } from '@icc-grow/web-components'
-
-IMessage.success('操作成功')
-IMessage.warning('请注意')
-IMessage.error('操作失败')
-
-// 完整配置
-IMessage.success({ content: '保存成功', duration: 3000, closable: true, onClose: () => {} })
-
-IMessage.closeAll()
-```
-
-## INotification
-
-```typescript
-import { INotification } from '@icc-grow/web-components'
-
-// type: 'primary' | 'error'
-INotification({ title: '系统通知', content: '您有一条新消息', duration: 5000 })
-INotification.error({ title: '错误', content: '网络请求失败' })
-
-INotification.closeAll()
-```

package/skills/icc-web-components/references/i-form.md

@@ -1,223 +0,0 @@
-# 表单组合 API
-
-> 本文件覆盖表单页最常见的组件组合，一次读取即可完成表单开发。
-
----
-
-## IForm
-
-表单容器，提供校验、重置。
-
-**Props**
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| model | `Record<string, unknown>` | — | 表单数据对象（**必填**） |
-| rules | `Rules` (async-validator) | — | 校验规则 |
-| scrollToError | `boolean` | `false` | 校验失败时滚动到第一个错误 |
-
-**Expose**
-
-| Method | Signature | Description |
-|--------|-----------|-------------|
-| validate | `(callback?) => Promise<void>` | 全量校验 |
-| clearValidate | `(props?) => void` | 清除校验结果 |
-| resetFields | `(props?) => void` | 重置字段并清除校验 |
-
----
-
-## IFormItem
-
-**Props**
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| prop | `string` | — | model 中的字段路径（支持 `'a.b.c'`） |
-| label | `string` | — | 标签文本 |
-| subLabel | `string` | — | 补充描述 |
-| count | `number` | — | 数量提示 |
-| showAction | `boolean` | `false` | 标题右侧操作按钮 |
-| actionText | `string` | — | 操作按钮文字 |
-| required | `boolean` | `false` | 必填（* 号 + 自动注入 required 规则） |
-| rules | `RuleItem \| RuleItem[]` | — | 字段校验规则 |
-
-**Events**: `action`
-
-**Slots**: `default`
-
----
-
-## IInput
-
-**Props**
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| type | `'text' \| 'password'` | `'text'` | 类型 |
-| placeholder | `string` | — | 占位文本 |
-| clearable | `boolean` | `false` | 一键清空 |
-| showPassword | `boolean` | `false` | 密码切换 |
-| disabled | `boolean` | `false` | 禁用 |
-| readonly | `boolean` | `false` | 只读 |
-| maxlength | `number` | — | 最大长度 |
-| showWordLimit | `boolean` | `false` | 字数统计 |
-| validateEvent | `boolean` | `true` | 触发表单校验 |
-
-**Events**: `focus` `blur` `clear` `input` `change`
-
-**Slots**: `prefix` `suffix`
-
-**Expose**: `focus()` `blur()` `select()`
-
----
-
-## IInputNumber
-
-**Props**
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| min | `number` | — | 最小值 |
-| max | `number` | — | 最大值 |
-| step | `number` | — | 步长 |
-| precision | `number` | — | 精度 |
-| placeholder | `string` | — | 占位文本 |
-| clearable | `boolean` | `false` | 清空按钮 |
-| controls | `boolean` | `false` | 步进按钮 |
-| disabled | `boolean` | `false` | 禁用 |
-| readonly | `boolean` | `false` | 只读 |
-| validateEvent | `boolean` | `true` | 触发表单校验 |
-
-**Events**: `focus` `blur` `input` `change` `clear`
-
-**Expose**: `focus()` `blur()` `select()`
-
----
-
-## ITextarea
-
-**Props**
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| placeholder | `string` | — | 占位文本 |
-| clearable | `boolean` | `false` | 一键清空 |
-| disabled | `boolean` | `false` | 禁用 |
-| readonly | `boolean` | `false` | 只读 |
-| maxlength | `number` | — | 最大长度 |
-| showWordLimit | `boolean` | `false` | 字数统计 |
-| validateEvent | `boolean` | `true` | 触发表单校验 |
-| autosize | `boolean \| { minRows?: number; maxRows?: number }` | `false` | 自适应高度 |
-
-**Events**: `focus` `blur` `clear` `input` `change`
-
-**Expose**: `focus()` `blur()` `select()`
-
----
-
-## ISelect
-
-选择器，数据驱动。
-
-**Props**
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| options | `Record<string, unknown>[]` | `[]` | 选项数据 |
-| props | `{ label?: string; value?: string; disabled?: string }` | — | 字段映射 |
-| multiple | `boolean` | `false` | 多选 |
-| disabled | `boolean` | `false` | 禁用 |
-| clearable | `boolean` | `false` | 可清空 |
-| placeholder | `string` | — | 占位文本 |
-| filterable | `boolean` | `false` | 可搜索 |
-| remote | `boolean` | `false` | 远程搜索 |
-| tagLimit | `number` | — | 多选 Tag 最多展示数 |
-| validateEvent | `boolean` | `true` | 触发表单校验 |
-
-**Events**: `change` `search` `clear` `visible-change`
-
-**Expose**: `show()` `hide()` `focus()` `blur()`
-
----
-
-## IDatePicker
-
-**Props**
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| type | `'date' \| 'dateTime' \| 'week' \| 'month' \| 'year'` | `'date'` | 类型 |
-| range | `boolean` | `false` | 范围选择 |
-| multiple | `boolean` | `false` | 多选 |
-| format | `string` | — | 显示格式（dayjs） |
-| valueFormat | `string` | — | v-model 输出格式 |
-| placeholder | `string` | — | 占位文本 |
-| endPlaceholder | `string` | — | 范围结束占位文本 |
-| disabled | `boolean` | `false` | 禁用 |
-| clearable | `boolean` | `false` | 可清空 |
-| disabledDate | `(date: Dayjs) => boolean` | — | 禁用日期 |
-| validateEvent | `boolean` | `true` | 触发表单校验 |
-
-**Events**: `change` `clear` `visible-change`
-
-**Expose**: `show()` `hide()` `focus()` `blur()`
-
----
-
-## ISwitch
-
-**Props**
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| trueValue | `string \| number \| boolean` | `true` | 开启时的值 |
-| falseValue | `string \| number \| boolean` | `false` | 关闭时的值 |
-| disabled | `boolean` | `false` | 禁用 |
-| validateEvent | `boolean` | `true` | 触发表单校验 |
-
-**Events**: `change`
-
----
-
-## ICheckbox / ICheckboxGroup
-
-**ICheckbox Props**
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| value | `string \| number \| boolean` | — | 复选框的值 |
-| trueValue | `string \| number \| boolean` | `true` | 选中时的值（单独使用） |
-| falseValue | `string \| number \| boolean` | `false` | 未选中时的值 |
-| disabled | `boolean` | `false` | 禁用 |
-| indeterminate | `boolean` | `false` | 半选 |
-
-**ICheckboxGroup Props**
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| disabled | `boolean` | `false` | 整组禁用 |
-| min | `number` | — | 最少选中数 |
-| max | `number` | — | 最多选中数 |
-
-**Events**: `change`
-
----
-
-## IRadio / IRadioGroup
-
-**IRadio Props**
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| value | `string \| number \| boolean` | — | 单选框的值 |
-| disabled | `boolean` | `false` | 禁用 |
-
-**IRadioGroup Props**
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| disabled | `boolean` | `false` | 整组禁用 |
-| size | `number` | — | 间隔(px) |
-| name | `string` | — | 原生 name |
-
-**Events**: `change`

package/skills/icc-web-components/references/i-icon.md

@@ -1,21 +0,0 @@
-# IIcon
-
-iconfont 图标组件。
-
-**Props**
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| name | `string` | — | iconfont class 名，如 `'icon-add'` |
-| size | `number \| string` | — | 图标大小(px) |
-| width | `number \| string` | — | 容器宽度（扩大点击区域） |
-| height | `number \| string` | — | 容器高度 |
-
-**Events**: `click`
-
-**Slots**: `default`（自定义 SVG 图标）
-
-```vue
-<IIcon name="icon-search" :size="16" />
-<IIcon :width="32" :height="32"><MySvgIcon /></IIcon>
-```

package/skills/icc-web-components/references/i-image.md

@@ -1,34 +0,0 @@
-# IImage / IImageGroup
-
-## IImage
-
-**Props**
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| src | `string` | — | 图片 URL |
-| width | `string \| number` | — | 宽度 |
-| height | `string \| number` | — | 高度 |
-| round | `boolean` | `false` | 圆形裁切 |
-| alt | `string` | — | alt 属性 |
-| fit | `'fill' \| 'contain' \| 'cover' \| 'none' \| 'scale-down'` | — | object-fit |
-| lazy | `boolean` | `false` | 懒加载 |
-| previewSrcList | `string[]` | — | 大图预览列表 |
-| initialIndex | `number` | — | 预览初始索引 |
-
-**Events**: `load` `error` `show`
-
----
-
-## IImageGroup
-
-批量平铺展示 + 统一画廊预览。
-
-**Props**
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| urlList | `string[]` | — | 图片 URL 列表 |
-| limit | `number \| string` | — | 最大展示数 |
-| gap | `number \| string` | — | 图片间距 |
-| width / height / round / fit / lazy | — | — | 继承 IImage 属性 |