@icc-grow/web-components 1.0.0 → 1.1.1

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

@@ -1,25 +0,0 @@
-# ILoading
-
-加载中，指令 + 服务两种模式。
-
-**指令 v-loading**
-
-```vue
-<ITable v-loading="loading" :data="list" :columns="columns" />
-```
-
-**服务调用**
-
-```typescript
-import { ILoading } from '@icc-grow/web-components'
-
-const instance = ILoading.service({
-  target: '#container',  // 目标容器，默认 document.body
-  text: '加载中...',
-  delay: 500,            // 延迟展示(ms)
-  minDuration: 300,      // 最短展示(ms)
-})
-
-instance.close()
-instance.setText('正在处理...')
-```

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

@@ -1,22 +0,0 @@
-# IMenu
-
-侧边导航菜单。
-
-**Props**
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| items | `MenuRawData[]` | — | 菜单数据源（**必填**） |
-| props | `{ label?: string; icon?: string; children?: string; disabled?: string }` | — | 字段映射 |
-| rowKey | `string \| ((data) => MenuKey)` | `'value'` | 唯一标识 |
-| accordion | `boolean` | `true` | 手风琴 |
-| collapseBreakpoint | `number` | — | 自动折叠断点(px) |
-| indent | `number` | `30` | 每级缩进(px) |
-| collapsed | `boolean` | `false` | 折叠（**v-model:collapsed**） |
-| width | `number` | — | 宽度 |
-
-**Events**: `select` — `(item, ancestorChain)` · `collapse-change` — `(collapsed)`
-
-**Slots**: `item` — `{ raw, depth, active, isParent }`
-
-**Expose**: `collapse()` `expand()` `isCollapsed`

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

@@ -1,51 +0,0 @@
-# IPopover / ITooltip
-
-## IPopover
-
-点击/悬停弹出富文本浮层。
-
-**Props**
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| placement | `Placement` | `'bottom'` | 弹出位置 |
-| trigger | `'click' \| 'hover'` | `'click'` | 触发方式 |
-| visible | `boolean` | — | v-model:visible |
-| content | `string` | — | 文本内容 |
-| title | `string` | — | 标题 |
-| offset | `number` | — | 偏移量(px) |
-| showArrow | `boolean` | `true` | 箭头 |
-| openDelay | `number` | — | 打开延迟(ms) |
-| closeDelay | `number` | — | 关闭延迟(ms) |
-| disabled | `boolean` | `false` | 禁用 |
-| width | `number \| string` | — | 宽度 |
-| sameWidth | `boolean` | `false` | 宽度跟随触发器 |
-
-**Events**: `show` `hide`
-
-**Slots**: `default`（触发器）、`content`（弹出内容）
-
-**Expose**: `show()` `hide()`
-
----
-
-## ITooltip
-
-纯文字提示，组件/指令双模式。
-
-**组件 Props**
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| content | `string` | — | 提示内容 |
-| placement | `Placement` | `'top'` | 位置 |
-| trigger | `'hover' \| 'click' \| 'focus'` | `'hover'` | 触发 |
-| theme | `'dark' \| 'light'` | `'dark'` | 主题 |
-| disabled | `boolean` | `false` | 禁用 |
-
-**指令 v-tooltip**
-
-```vue
-<IButton v-tooltip="'提示文字'">按钮</IButton>
-<IButton v-tooltip="{ content: '提示', placement: 'right' }">按钮</IButton>
-```

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

@@ -1,14 +0,0 @@
-# IProgress
-
-进度条（线性模式）。
-
-**Props**
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| percentage | `number` | — | 进度值 0-100（**必填**） |
-| label | `string` | — | 顶部标签文案 |
-| showValue | `boolean` | `false` | 显示进度文案 |
-| format | `(percentage) => string` | — | 自定义进度文案 |
-| height | `number` | — | 进度条高度(px) |
-| status | `'normal' \| 'success' \| 'warning' \| 'error'` | `'normal'` | 状态样式 |

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

@@ -1,20 +0,0 @@
-# IScrollbar
-
-自定义滚动条容器。
-
-**Props**
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| height | `string \| number` | — | 容器高度 |
-| maxHeight | `string \| number` | — | 最大高度 |
-| tag | `string` | `'div'` | view 层标签 |
-| always | `boolean` | `false` | 始终显示滚动条 |
-| minThumbSize | `number` | — | 滑块最小尺寸(px) |
-| noresize | `boolean` | `false` | 关闭 ResizeObserver |
-| wrapClass | `string` | — | 滚动容器类名 |
-| contentClass | `string` | — | 内容容器类名 |
-
-**Events**: `scroll` — `({ scrollTop, scrollLeft })`
-
-**Expose**: `scrollTo(options)` `update()` `wrapRef`

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

@@ -1,15 +0,0 @@
-# ISpace
-
-间距布局组件。
-
-**Props**
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| direction | `'horizontal' \| 'vertical'` | `'horizontal'` | 排列方向 |
-| size | `number` | `8` | 间距(px) |
-| align | `'start' \| 'center' \| 'end' \| 'baseline'` | — | 交叉轴对齐 |
-| wrap | `boolean` | `false` | 自动换行 |
-| fill | `boolean` | `false` | 子元素撑满 |
-
-**Slots**: `default`

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

@@ -1,12 +0,0 @@
-# ISteps
-
-步骤条，数据驱动。
-
-**Props**
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| active | `number` | `0` | 当前步骤（**v-model:active**），从 0 开始 |
-| items | `StepItem[]` | — | 步骤数据（**必填**） |
-
-**StepItem**: `{ title: string; description?: string }`

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

@@ -1,16 +0,0 @@
-# ITabs
-
-标签页，数据驱动。
-
-**Props**
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| options | `TabItem[]` | — | 标签数据（**必填**） |
-| disabled | `boolean` | `false` | 全局禁用 |
-| authList | `string[]` | — | 权限列表 |
-| authMethod | `(code, tab) => boolean` | — | 权限判断 |
-
-**TabItem**: `{ label, value, count?, disabled?, authCode? }`
-
-**Events**: `change` — `(value: TabValue)`

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

@@ -1,35 +0,0 @@
-# ITag / ITagGroup
-
-## ITag
-
-**Props**
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| type | `'default' \| 'primary' \| 'success' \| 'warning' \| 'danger'` | `'default'` | 类型 |
-| disabled | `boolean` | `false` | 禁用 |
-| closable | `boolean` | `false` | 关闭按钮 |
-| round | `boolean` | `false` | 圆角 |
-
-**Events**: `click` `close`
-
-**Slots**: `default` `prefix`
-
----
-
-## ITagGroup
-
-数据驱动标签组。
-
-**Props**
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| options | `(string \| number \| Record<string, unknown>)[]` | `[]` | 标签数据 |
-| rowKey | `string` | — | 唯一标识字段 |
-| labelKey | `string` | — | 显示文案字段 |
-| tagLimit | `number` | — | 最大展示数，超出折叠 +N |
-| closable | `boolean` | `false` | 关闭按钮 |
-| type | `TagType` | `'default'` | 统一类型 |
-
-**Events**: `remove` — `(option, index)`

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

@@ -1,19 +0,0 @@
-# ITimePicker
-
-时间选择器，HH:mm:ss 滚轮。
-
-**Props**
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| placeholder | `string` | — | 占位文本 |
-| disabled | `boolean` | `false` | 禁用 |
-| clearable | `boolean` | `false` | 可清空 |
-| validateEvent | `boolean` | `true` | 触发表单校验 |
-| disabledHours | `(hour) => boolean` | — | 小时禁用 |
-| disabledMinutes | `(minute, hour) => boolean` | — | 分钟禁用 |
-| disabledSeconds | `(second, hour, minute) => boolean` | — | 秒禁用 |
-
-**Events**: `change` `clear` `visible-change`
-
-**Expose**: `show()` `hide()` `focus()` `blur()`

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

@@ -1,17 +0,0 @@
-# ITransition
-
-统一过渡动画组件。
-
-**Props**
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| name | `'fade' \| 'fade-down' \| 'slide-down' \| 'slide-up' \| 'slide-right' \| 'slide-left' \| 'fade-in-down' \| 'expand-down' \| 'bounce-right'` | — | 动画预设名（**必填**） |
-| duration | `number \| { enter: number; leave: number }` | — | 时长(ms) |
-| appear | `boolean` | `false` | 首次渲染播放进场动画 |
-
-**Events**: `before-enter` `enter` `after-enter` `before-leave` `leave` `after-leave`
-
-```vue
-<ITransition name="fade"><div v-if="show">内容</div></ITransition>
-```

package/skills/icc-web-components/references/i-tree-select.md

@@ -1,26 +0,0 @@
-# ITreeSelect
-
-树形选择器，ISelect 触发器 + ITree 面板。
-
-**Props**
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| data | `Record<string, unknown>[]` | — | 树形数据 |
-| props | `{ children?: string; label?: string; disabled?: string }` | — | 字段映射 |
-| rowKey | `string \| ((data) => TreeKey)` | — | 唯一标识 |
-| multiple | `boolean` | `false` | 多选 |
-| showCheckbox | `boolean \| ((data, node) => boolean)` | `false` | 显示 checkbox |
-| checkStrictly | `boolean` | `false` | 父子不关联 |
-| defaultExpandAll | `boolean` | `false` | 默认全展开 |
-| accordion | `boolean` | `false` | 手风琴 |
-| leafOnly | `boolean` | `false` | 仅选叶子 |
-| limit | `number` | — | 最大可选数 |
-| disabled | `boolean` | `false` | 禁用 |
-| clearable | `boolean` | `false` | 可清空 |
-| placeholder | `string` | — | 占位文本 |
-| tagLimit | `number` | — | 多选 Tag 最多展示数 |
-
-**Events**: `change` `clear` `visible-change` `exceed` `node-click`
-
-**Expose**: `show()` `hide()` `focus()` `blur()`

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

@@ -1,34 +0,0 @@
-# ITree
-
-树形控件，虚拟渲染。
-
-**Props**
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| data | `Record<string, unknown>[]` | — | 树形数据 |
-| props | `{ children?: string; label?: string; disabled?: string; isLeaf?: string }` | — | 字段映射 |
-| rowKey | `string \| ((data) => TreeKey)` | — | 唯一标识 |
-| showCheckbox | `boolean \| ((data, node) => boolean)` | `false` | 显示 checkbox |
-| selectable | `boolean` | `false` | 可点击选中 |
-| multiple | `boolean` | `false` | 多选 |
-| checkStrictly | `boolean` | `false` | 父子不级联 |
-| defaultExpandAll | `boolean` | `false` | 默认全展开 |
-| defaultExpandedKeys | `TreeKey[]` | — | 默认展开节点 |
-| defaultCheckedKeys | `TreeKey[]` | — | 默认选中节点 |
-| accordion | `boolean` | `false` | 手风琴 |
-| leafOnly | `boolean` | `false` | 仅选叶子 |
-| limit | `number` | — | 最大可选数 |
-| height | `string` | — | 容器高度 |
-| maxHeight | `string` | `'500px'` | 最大高度 |
-
-**Events**
-
-| Event | Payload | Description |
-|-------|---------|-------------|
-| change | `(checkedKeys, halfCheckedKeys, checkedNodes, halfCheckedNodes)` | 选中变更 |
-| exceed | `(currentCount, limit)` | 超出限制 |
-| load | `(node, resolve)` | 懒加载 |
-| node-click | `(data, node, e)` | 节点点击 |
-
-**Expose**: `getCheckedKeys(leafOnly?)` `getHalfCheckedKeys()` `getCheckedNodes()` `setCheckedKeys(keys)`

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

@@ -1,25 +0,0 @@
-# IUpload
-
-文件上传。
-
-**Props**
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| fileList | `UploadUserFile[]` | `[]` | 文件列表（**v-model:file-list**） |
-| directory | `string` | — | 上传目录 |
-| listType | `'list' \| 'card'` | `'list'` | 展示模式 |
-| accept | `string[]` | — | 允许的文件类型 |
-| multiple | `boolean` | `false` | 多选 |
-| limit | `number` | — | 最大文件数 |
-| maxSize | `number` | — | 单文件最大大小(字节) |
-| autoUpload | `boolean` | `true` | 选中后自动上传 |
-| disabled | `boolean` | `false` | 禁用 |
-
-**Events**: `success` `error` `remove` `exceed` `change`
-
-**Expose**: `submit()` `abort()` `retry(uid)`
-
-```vue
-<IUpload v-model:file-list="files" directory="avatar" list-type="card" :accept="['image/*']" :limit="3" />
-```

package/skills/icc-web-components/references/i-virtual-list.md

@@ -1,24 +0,0 @@
-# IVirtualList
-
-虚拟列表，支持固定/动态高度。
-
-**Props**
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| data | `T[]` | `[]` | 数据源 |
-| rowKey | `keyof T \| string \| ((item) => string \| number)` | — | 唯一标识（**必填**） |
-| itemSize | `number` | — | 预估/固定高度 |
-| dynamic | `boolean` | `false` | 动态高度测量 |
-| buffer | `number` | — | 缓冲区节点数 |
-| height | `string \| number` | — | 容器高度 |
-| maxHeight | `string \| number` | — | 最大高度 |
-| loading | `boolean` | `false` | 加载中 |
-| finished | `boolean` | `false` | 已全部加载 |
-| distance | `number` | — | 触底距离(px) |
-
-**Events**: `scroll` `load`
-
-**Slots**: `default` — `{ item, index }`
-
-**Expose**: `scrollTo()` `scrollToAnchor(index)` `resetSizeCache()`

package/skills/icc-web-components/references/i-virtual-table.md

@@ -1,20 +0,0 @@
-# IVirtualTable
-
-虚拟滚动表格，**API 对齐 ITable**，万级数据量。
-
-> ITable 基础 Props/Events/Expose 见 `i-crud-page.md`，此处仅列出虚拟滚动新增部分。
-
-**额外 Props**
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| rowKey | `string \| ((row) => string)` | — | **必填**，行唯一标识 |
-| itemSize | `number` | `50` | 每行预估高度 |
-| buffer | `number` | `5` | 缓冲区行数 |
-| loading | `boolean` | `false` | 加载中状态 |
-| finished | `boolean` | `false` | 是否已全部加载 |
-| distance | `number` | `50` | 触底距离(px) |
-
-**额外 Events**: `scroll` `load`
-
-**额外 Expose**: `scrollTo()` `scrollToRow(key)` `resetSizeCache()`

package/skills/icc-web-components/rules/composition.md

@@ -1,28 +0,0 @@
-# 组件组合规则
-
-> 多组件组合使用时的正确模式。具体代码见 [crud-list 模式](../patterns/crud-list.md)。
-
----
-
-## 组件选择优先级
-
-遇到 UI 需求时，按以下顺序选择：
-
-| 优先级 | 方案           | 示例                              |
-| ------ | -------------- | --------------------------------- |
-| 1      | 组件库已有组件 | `IEmpty`, `IConfirm`, `IMessage`  |
-| 2      | 组件库组件组合 | `IDialog` + `IForm`               |
-| 3      | 自定义组件     | 业务特殊需求                      |
-
----
-
-## 禁止事项速查
-
-| 场景         | ❌ 禁止                    | ✅ 正确方案                                 |
-| ------------ | -------------------------- | ------------------------------------------- |
-| 确认弹窗     | 用 `IDialog` 手写确认弹窗  | `IConfirm({ type, title, content })`        |
-| 消息提示     | 手写 toast / div 通知      | `IMessage.success()` / `.error()`           |
-| 空状态       | 手写空状态 div             | `IEmpty` 组件                               |
-| 加载状态     | 手写 loading 遮罩          | `v-loading` 指令                            |
-| 弹窗表单     | 弹窗 + 表单混在页面组件中  | 抽离为独立子组件（如 `XxxFormDialog.vue`）   |
-| 表格列格式化 | 为简单映射写 template 插槽 | 优先用 `TableColumn.formatter`              |

package/skills/icc-web-components/rules/forms.md

@@ -1,28 +0,0 @@
-# 表单规则
-
-> 表单组件使用规范。完整代码见 [弹窗表单](../patterns/dialog-form.md) / [表单页](../patterns/form-page.md) / [CRUD 列表搜索区](../patterns/crud-list.md)。
-
----
-
-## 核心原则
-
-| 原则 | 说明 |
-| ---- | ---- |
-| IForm + IFormItem 包裹 | 所有表单控件必须包在 `IForm > IFormItem` 结构中 |
-| 校验规则集中定义 | 统一放 `IForm` 的 `:rules` 属性，禁止散落在各 `IFormItem` 上 |
-| 提交前校验 | `await formRef.value?.validate()` |
-| 重置用 API | `formRef.value?.resetFields()`，禁止手动清空 |
-| 输入控件限宽 | 弹窗用 `w-full`，表单页用 `w-[400px]`，禁止全宽无限制 |
-| Select 数据驱动 | 用 `:options` 传数组，禁止手写 `<option>` 子元素 |
-
----
-
-## 禁止事项速查
-
-| 禁止 | 替代方案 |
-| ---- | ---- |
-| `<input>` / `<select>` 原生元素 | `IInput` / `ISelect` 等组件 |
-| 不包裹 `IForm` 直接用表单控件 | `IForm + IFormItem` 结构 |
-| 校验规则散落在 `IFormItem` 上 | 统一放 `IForm` 的 `:rules` |
-| 手写搜索区布局 | `IPageLayout #search` 插槽 |
-| 表单输入框不限宽度 | 限制合理的固定宽度 |

package/skills/icc-web-components/rules/styling.md

@@ -1,45 +0,0 @@
-# 样式规则
-
-> 使用 `@icc-grow/web-components` 时的样式编写规范。
-
----
-
-## 1. 颜色：只用语义 Tailwind Token
-
-组件库通过 CSS 变量 `--i-color-{category}-{opacity}` 定义主题色，Tailwind Preset 自动映射为 class。
-
-**可用语义色**：`primary` / `danger` / `warning` / `success` / `black` / `white` / `gray`
-
-**命名规则**：`{属性}-{语义色}-{透明度}`，透明度数字越小越淡。
-
-```
-bg-primary        ← 主色背景
-text-danger        ← 危险色文字
-bg-primary-5      ← 主色 5% 透明度（很淡的背景）
-border-black-10   ← 黑色 10% 透明度边框
-```
-
----
-
-## 2. BEM 类名约定
-
-| 层级 | 格式 | 示例 |
-| ---- | ---- | ---- |
-| Block | `{page-name}` | `user-list` |
-| Element | `{page-name}__{el}` | `user-list__header` |
-| Modifier | `{page-name}--{mod}` | `user-list--compact` |
-
-> 组件库内部使用 `i-` 前缀 BEM，页面代码**不要**用 `i-` 前缀。
-
----
-
-## 3. 禁止事项速查
-
-| 禁止 | 替代方案 |
-| ---- | ---- |
-| 硬编码颜色 `#xxx` / `rgb()` | 语义 token：`bg-primary` / `text-danger` |
-| Tailwind 原生色 `bg-blue-500` | 语义色：`bg-primary` |
-| 手动 `gap-*` / `mr-*` 做按钮间距 | `ISpace` 组件 |
-| `style` 内联写颜色 | Tailwind class |
-| 擅自新增 CSS 变量 | 使用已有变量，不确定时询问 |
-| `border` 缺少 `border-solid` | 表单元素必须显式加 `border-solid` |