ep-craft 0.1.42 → 0.2.0

package/dist-ai/components/collapse.json

@@ -0,0 +1,129 @@
+{
+  "entry": {
+    "category": "basic",
+    "events": [
+      {
+        "description": "激活面板变化时触发",
+        "name": "update:modelValue",
+        "params": "(value: string | number | (string | number)[])"
+      },
+      {
+        "description": "激活面板变化时触发",
+        "name": "change",
+        "params": "(value: string | number | (string | number)[])"
+      }
+    ],
+    "exampleOmittedReason": null,
+    "examples": [
+      {
+        "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { EpCollapse, EpCollapseItem } from 'ep-craft'\n\nconst activeNames = ref(['1'])\n</script>\n\n<template>\n  <ep-collapse v-model=\"activeNames\">\n    <ep-collapse-item title=\"面板一\" name=\"1\">面板一的内容</ep-collapse-item>\n    <ep-collapse-item title=\"面板二\" name=\"2\">面板二的内容</ep-collapse-item>\n  </ep-collapse>\n</template>",
+        "id": "collapse-1",
+        "language": "vue",
+        "title": "折叠面板"
+      }
+    ],
+    "exposes": [],
+    "hot": false,
+    "id": "component:collapse",
+    "keywords": {
+      "en": [
+        "collapse",
+        "accordion",
+        "fold",
+        "basic"
+      ],
+      "zh": [
+        "折叠面板",
+        "基础"
+      ]
+    },
+    "kind": "component",
+    "name": "EpCollapse",
+    "nonUseCases": [
+      "需要完全自定义原生行为或视觉时"
+    ],
+    "props": [
+      {
+        "alias": null,
+        "defaultText": "false",
+        "description": "是否开启手风琴模式",
+        "hasDefault": false,
+        "name": "accordion",
+        "required": false,
+        "type": "boolean"
+      },
+      {
+        "alias": "v-model",
+        "defaultText": "[]",
+        "description": "当前激活的面板，手风琴模式下为 string，否则为 array",
+        "hasDefault": true,
+        "name": "modelValue",
+        "required": false,
+        "type": "string | number | (string | number)[]"
+      },
+      {
+        "alias": null,
+        "defaultText": "right",
+        "description": "展开图标位置",
+        "hasDefault": true,
+        "name": "expandIconPosition",
+        "required": false,
+        "type": "'left' | 'right'"
+      },
+      {
+        "alias": null,
+        "defaultText": null,
+        "description": "折叠状态改变前的钩子，返回 false 或 reject 则阻止改变",
+        "hasDefault": false,
+        "name": "beforeCollapse",
+        "required": false,
+        "type": "(name: string | number) => boolean | Promise<boolean>"
+      }
+    ],
+    "related": [
+      "EpCollapseItem",
+      "EpTabs"
+    ],
+    "relations": {
+      "children": [
+        "EpCollapseItem"
+      ],
+      "combos": [
+        "EpCollapse + EpCollapseItem"
+      ],
+      "parents": [],
+      "requiredChildren": [
+        "EpCollapseItem"
+      ]
+    },
+    "slots": [
+      {
+        "description": "折叠面板内容，通常放置 ep-collapse-item",
+        "name": "default"
+      }
+    ],
+    "slug": "collapse",
+    "summary": "折叠面板，基础交互与展示元素",
+    "tag": "ep-collapse",
+    "useCases": [
+      "页面中的折叠面板展示与交互",
+      "为折叠面板提供统一视觉与状态"
+    ],
+    "variants": [],
+    "visual": {
+      "cssVars": [
+        "--el-color-primary",
+        "--el-border-radius-base",
+        "--el-font-size-base"
+      ],
+      "density": "中等",
+      "shape": "圆角矩形",
+      "slotContent": [
+        "default：折叠面板内容，通常放置 ep-collapse-item"
+      ]
+    }
+  },
+  "generatedAt": "2026-11-03T03:09:12.050Z",
+  "libraryVersion": "0.2.0",
+  "schemaVersion": 1
+}

package/dist-ai/components/collapse.md

@@ -0,0 +1,76 @@
+# EpCollapse
+
+`ep-collapse` · basic（基础） · `component:collapse`
+
+## 摘要
+
+折叠面板，基础交互与展示元素
+
+## 适用场景
+
+- 适用：页面中的折叠面板展示与交互
+- 适用：为折叠面板提供统一视觉与状态
+- 不适用：需要完全自定义原生行为或视觉时
+
+## 关键词
+
+- 中文：折叠面板、基础
+- English: collapse, accordion, fold, basic
+
+## Props
+
+- accordion (boolean)：是否开启手风琴模式
+- modelValue（别名 v-model） (string | number | (string | number)[]，默认 [])：当前激活的面板，手风琴模式下为 string，否则为 array
+- expandIconPosition ('left' | 'right'，默认 right)：展开图标位置
+- beforeCollapse ((name: string | number) => boolean | Promise<boolean>)：折叠状态改变前的钩子，返回 false 或 reject 则阻止改变
+
+## Events
+
+- update:modelValue((value: string | number | (string | number)[]))：激活面板变化时触发
+- change((value: string | number | (string | number)[]))：激活面板变化时触发
+
+## Slots
+
+- default：折叠面板内容，通常放置 ep-collapse-item
+
+## 关系
+
+- 子级：EpCollapseItem
+- 必需子组件：EpCollapseItem
+- 常用组合：EpCollapse + EpCollapseItem
+
+## 视觉提示
+
+- 形状：圆角矩形
+- 密度：中等
+- 插槽内容：default：折叠面板内容，通常放置 ep-collapse-item
+- CSS 变量：--el-color-primary、--el-border-radius-base、--el-font-size-base
+
+## 示例
+
+### 折叠面板
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { EpCollapse, EpCollapseItem } from 'ep-craft'
+
+const activeNames = ref(['1'])
+</script>
+
+<template>
+  <ep-collapse v-model="activeNames">
+    <ep-collapse-item title="面板一" name="1">面板一的内容</ep-collapse-item>
+    <ep-collapse-item title="面板二" name="2">面板二的内容</ep-collapse-item>
+  </ep-collapse>
+</template>
+```
+
+## 相关条目
+
+- EpCollapseItem
+- EpTabs
+
+---
+
+ep-craft 0.2.0

package/dist-ai/components/color-picker.json

@@ -0,0 +1,280 @@
+{
+  "entry": {
+    "category": "form",
+    "events": [
+      {
+        "description": "绑定值变化时触发",
+        "name": "update:modelValue",
+        "params": "(value: string | null)"
+      },
+      {
+        "description": "值确认变化时触发",
+        "name": "change",
+        "params": "(value: string | null)"
+      },
+      {
+        "description": "面板拖动时实时触发",
+        "name": "activeChange",
+        "params": "(value: string | null)"
+      },
+      {
+        "description": "聚焦时触发",
+        "name": "focus",
+        "params": "(evt: FocusEvent)"
+      },
+      {
+        "description": "失焦时触发",
+        "name": "blur",
+        "params": "(evt: FocusEvent)"
+      },
+      {
+        "description": "清空时触发",
+        "name": "clear",
+        "params": "—"
+      }
+    ],
+    "exampleOmittedReason": null,
+    "examples": [
+      {
+        "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { EpColorPicker } from 'ep-craft'\n\nconst color = ref('#409eff')\n</script>\n\n<template>\n  <ep-color-picker v-model=\"color\" show-alpha />\n</template>",
+        "id": "color-picker-1",
+        "language": "vue",
+        "title": "颜色选择"
+      }
+    ],
+    "exposes": [],
+    "hot": false,
+    "id": "component:color-picker",
+    "keywords": {
+      "en": [
+        "color-picker",
+        "color",
+        "picker",
+        "form"
+      ],
+      "zh": [
+        "颜色选择器",
+        "表单"
+      ]
+    },
+    "kind": "component",
+    "name": "EpColorPicker",
+    "nonUseCases": [
+      "仅展示静态文本或只读数据时"
+    ],
+    "props": [
+      {
+        "alias": null,
+        "defaultText": "true",
+        "description": "面板未激活且该值为 false 时是否销毁",
+        "hasDefault": true,
+        "name": "persistent",
+        "required": false,
+        "type": "boolean"
+      },
+      {
+        "alias": "v-model",
+        "defaultText": null,
+        "description": "绑定值",
+        "hasDefault": true,
+        "name": "modelValue",
+        "required": false,
+        "type": "string | null"
+      },
+      {
+        "alias": null,
+        "defaultText": null,
+        "description": "ColorPicker id",
+        "hasDefault": false,
+        "name": "id",
+        "required": false,
+        "type": "string"
+      },
+      {
+        "alias": null,
+        "defaultText": "false",
+        "description": "是否显示透明度滑块",
+        "hasDefault": false,
+        "name": "showAlpha",
+        "required": false,
+        "type": "boolean"
+      },
+      {
+        "alias": null,
+        "defaultText": null,
+        "description": "v-model 的颜色格式",
+        "hasDefault": false,
+        "name": "colorFormat",
+        "required": false,
+        "type": "'hex' | 'rgb' | 'hsl' | 'hsv'"
+      },
+      {
+        "alias": null,
+        "defaultText": null,
+        "description": "是否禁用",
+        "hasDefault": true,
+        "name": "disabled",
+        "required": false,
+        "type": "boolean"
+      },
+      {
+        "alias": null,
+        "defaultText": "true",
+        "description": "是否显示清空按钮",
+        "hasDefault": true,
+        "name": "clearable",
+        "required": false,
+        "type": "boolean"
+      },
+      {
+        "alias": null,
+        "defaultText": null,
+        "description": "尺寸",
+        "hasDefault": false,
+        "name": "size",
+        "required": false,
+        "type": "'large' | 'default' | 'small'"
+      },
+      {
+        "alias": null,
+        "defaultText": null,
+        "description": "下拉面板自定义类名",
+        "hasDefault": false,
+        "name": "popperClass",
+        "required": false,
+        "type": "string"
+      },
+      {
+        "alias": null,
+        "defaultText": null,
+        "description": "下拉面板自定义样式",
+        "hasDefault": true,
+        "name": "popperStyle",
+        "required": false,
+        "type": "string | object | array"
+      },
+      {
+        "alias": null,
+        "defaultText": "0",
+        "description": "tabindex",
+        "hasDefault": true,
+        "name": "tabindex",
+        "required": false,
+        "type": "string | number"
+      },
+      {
+        "alias": null,
+        "defaultText": null,
+        "description": "是否将面板 teleport 到 body",
+        "hasDefault": true,
+        "name": "teleported",
+        "required": false,
+        "type": "boolean"
+      },
+      {
+        "alias": null,
+        "defaultText": null,
+        "description": "面板挂载的容器",
+        "hasDefault": false,
+        "name": "appendTo",
+        "required": false,
+        "type": "string | HTMLElement"
+      },
+      {
+        "alias": null,
+        "defaultText": null,
+        "description": "预定义颜色列表",
+        "hasDefault": false,
+        "name": "predefine",
+        "required": false,
+        "type": "string[]"
+      },
+      {
+        "alias": null,
+        "defaultText": "true",
+        "description": "是否触发表单校验",
+        "hasDefault": true,
+        "name": "validateEvent",
+        "required": false,
+        "type": "boolean"
+      },
+      {
+        "alias": null,
+        "defaultText": null,
+        "description": "空值数组，用于判断是否为空",
+        "hasDefault": false,
+        "name": "emptyValues",
+        "required": false,
+        "type": "Arrayable<undefined | null | ''>"
+      },
+      {
+        "alias": null,
+        "defaultText": null,
+        "description": "清空后的值",
+        "hasDefault": true,
+        "name": "valueOnClear",
+        "required": false,
+        "type": "'auto' | string | number | boolean | Function | null"
+      },
+      {
+        "alias": null,
+        "defaultText": null,
+        "description": "原生 aria-label 属性",
+        "hasDefault": false,
+        "name": "ariaLabel",
+        "required": false,
+        "type": "string"
+      }
+    ],
+    "related": [
+      "EpInput",
+      "EpPopover"
+    ],
+    "relations": {
+      "children": [],
+      "combos": [],
+      "parents": [],
+      "requiredChildren": []
+    },
+    "slots": [],
+    "slug": "color-picker",
+    "summary": "颜色选择器，表单数据录入控件",
+    "tag": "ep-color-picker",
+    "useCases": [
+      "表单中收集或编辑颜色选择器数据",
+      "与 EpForm、EpFormItem 组合完成校验"
+    ],
+    "variants": [
+      {
+        "dimension": "size",
+        "values": [
+          "large",
+          "default",
+          "small"
+        ],
+        "when": "按容器空间与信息密度选择尺寸"
+      },
+      {
+        "dimension": "state",
+        "values": [
+          "disabled"
+        ],
+        "when": "通过布尔属性切换禁用、加载或选中状态"
+      }
+    ],
+    "visual": {
+      "cssVars": [
+        "--el-border-color",
+        "--el-border-radius-base",
+        "--el-color-primary",
+        "--el-font-size-base"
+      ],
+      "density": "中等",
+      "shape": "矩形输入框",
+      "slotContent": []
+    }
+  },
+  "generatedAt": "2026-11-03T03:09:12.050Z",
+  "libraryVersion": "0.2.0",
+  "schemaVersion": 1
+}

package/dist-ai/components/color-picker.md

@@ -0,0 +1,85 @@
+# EpColorPicker
+
+`ep-color-picker` · form（表单） · `component:color-picker`
+
+## 摘要
+
+颜色选择器，表单数据录入控件
+
+## 适用场景
+
+- 适用：表单中收集或编辑颜色选择器数据
+- 适用：与 EpForm、EpFormItem 组合完成校验
+- 不适用：仅展示静态文本或只读数据时
+
+## 关键词
+
+- 中文：颜色选择器、表单
+- English: color-picker, color, picker, form
+
+## 变体
+
+- size: large/default/small（按容器空间与信息密度选择尺寸）
+- state: disabled（通过布尔属性切换禁用、加载或选中状态）
+
+## Props
+
+- persistent (boolean，默认 true)：面板未激活且该值为 false 时是否销毁
+- modelValue（别名 v-model） (string | null，默认 见文档)：绑定值
+- id (string)：ColorPicker id
+- showAlpha (boolean)：是否显示透明度滑块
+- colorFormat ('hex' | 'rgb' | 'hsl' | 'hsv')：v-model 的颜色格式
+- disabled (boolean，默认 见文档)：是否禁用
+- clearable (boolean，默认 true)：是否显示清空按钮
+- size ('large' | 'default' | 'small')：尺寸
+- popperClass (string)：下拉面板自定义类名
+- popperStyle (string | object | array，默认 见文档)：下拉面板自定义样式
+- tabindex (string | number，默认 0)：tabindex
+- teleported (boolean，默认 见文档)：是否将面板 teleport 到 body
+- appendTo (string | HTMLElement)：面板挂载的容器
+- predefine (string[])：预定义颜色列表
+- validateEvent (boolean，默认 true)：是否触发表单校验
+- emptyValues (Arrayable<undefined | null | ''>)：空值数组，用于判断是否为空
+- valueOnClear ('auto' | string | number | boolean | Function | null，默认 见文档)：清空后的值
+- ariaLabel (string)：原生 aria-label 属性
+
+## Events
+
+- update:modelValue((value: string | null))：绑定值变化时触发
+- change((value: string | null))：值确认变化时触发
+- activeChange((value: string | null))：面板拖动时实时触发
+- focus((evt: FocusEvent))：聚焦时触发
+- blur((evt: FocusEvent))：失焦时触发
+- clear(—)：清空时触发
+
+## 视觉提示
+
+- 形状：矩形输入框
+- 密度：中等
+- CSS 变量：--el-border-color、--el-border-radius-base、--el-color-primary、--el-font-size-base
+
+## 示例
+
+### 颜色选择
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { EpColorPicker } from 'ep-craft'
+
+const color = ref('#409eff')
+</script>
+
+<template>
+  <ep-color-picker v-model="color" show-alpha />
+</template>
+```
+
+## 相关条目
+
+- EpInput
+- EpPopover
+
+---
+
+ep-craft 0.2.0