ep-craft 0.1.42 → 0.2.0

package/dist-ai/components/select.md

@@ -0,0 +1,188 @@
+# EpSelect
+
+`ep-select` · form（表单） · `component:select`
+
+## 摘要
+
+下拉选择器，支持单选、多选与筛选
+
+## 适用场景
+
+- 适用：从有限选项中选择一项或多项
+- 适用：筛选器与表单字段
+- 不适用：选项极多且需层级选择时使用 Cascader 或 TreeSelect
+
+## 关键词
+
+- 中文：选择器、下拉、单选、多选、表单
+- English: select, dropdown, picker, form
+
+## 变体
+
+- size: large/default/small（按容器空间与信息密度选择尺寸）
+- state: disabled/loading（通过布尔属性切换禁用、加载或选中状态）
+- effect: dark/light（通过视觉修饰属性调整外观效果）
+
+## Props
+
+- name (string)：原生 name 属性
+- id (unknown)
+- modelValue（别名 v-model） (any，默认 见文档)：绑定值
+- autocomplete (string，默认 off)：原生 autocomplete 属性
+- automaticDropdown (boolean)：对于不可搜索的 Select，获取焦点后是否自动弹出
+- size ('large' | 'default' | 'small')：输入框尺寸
+- effect ('dark' | 'light'，默认 light)：tooltip 主题
+- disabled (boolean，默认 false)：是否禁用
+- clearable (boolean)：是否可以清空选项
+- filterable (boolean)：是否可搜索
+- allowCreate (boolean)：是否允许用户创建新条目
+- loading (boolean)：是否正在从远程获取数据
+- popperClass (string，默认 见文档)：Select 下拉框的类名
+- popperStyle (unknown)
+- popperOptions (unknown，默认 见文档)
+- remote (boolean)：是否为远程搜索
+- debounce (unknown，默认 见文档)
+- loadingText (string)：远程加载时显示的文字
+- noMatchText (string)：搜索条件无匹配时显示的文字
+- noDataText (string)：无选项时显示的文字
+- remoteMethod ((query: string) => void)：远程搜索方法
+- filterMethod ((query: string) => void)：自定义搜索方法
+- multiple (boolean)：是否多选
+- multipleLimit (number，默认 0)：多选时可被选择的最大数目
+- placeholder (string)：占位符
+- defaultFirstOption (boolean)：按下回车是否选择第一个匹配项
+- reserveKeyword (boolean，默认 true)：多选且可搜索时选中后是否保留关键字
+- valueKey (string，默认 value)：作为 value 唯一标识的键名
+- collapseTags (boolean)：多选时将选中值按文字形式展示
+- collapseTagsTooltip (boolean)：鼠标悬停折叠标签以显示具体所选值
+- tagTooltip (unknown，默认 见文档)
+- maxCollapseTags (number，默认 1)：需要显示的 Tag 的最大数量
+- teleported (boolean，默认 true)：是否将下拉列表插入至 body 元素
+- persistent (boolean，默认 true)：下拉菜单关闭后是否销毁
+- clearIcon (string | Component，默认 CircleClose)：自定义清空图标
+- fitInputWidth (boolean)：下拉框的宽度是否与输入框相同
+- suffixIcon (string | Component，默认 ArrowDown)：自定义后缀图标
+- tagType ('success' | 'info' | 'warning' | 'danger'，默认 info)：标签类型
+- tagEffect (unknown，默认 见文档)
+- validateEvent (boolean，默认 true)：是否触发表单验证
+- remoteShowSuffix (boolean)：远程搜索时显示后缀图标
+- showArrow (unknown，默认 见文档)
+- offset (unknown，默认 见文档)
+- placement (Placement，默认 bottom-start)：下拉框出现的位置
+- fallbackPlacements (unknown，默认 见文档)
+- tabindex (unknown，默认 见文档)
+- appendTo (unknown)
+- options (unknown)
+- props (unknown，默认 见文档)
+- floatLabel (boolean，默认 false)：是否启用浮动标签（Material 风格），聚焦或有值时占位文本上浮
+- emptyValues (unknown)
+- valueOnClear (unknown，默认 见文档)
+- ariaLabel (string)：原生 aria-label 属性
+- ariaLabelledby (string)：原生 aria-labelledby 属性；显式传入时优先于浮动标签自动关联的文本
+
+## Events
+
+- update:modelValue((value: any))：绑定值变化时触发
+- change((value: any))：选中值发生变化时触发
+- popupScroll(({ scrollTop, scrollLeft }: { scrollTop: number; scrollLeft: number }))：下拉列表滚动时触发
+- endReached((direction: 'top' | 'bottom' | 'left' | 'right'))：下拉列表滚动到边界时触发（用于远程加载更多）
+- removeTag((tagValue: any))：多选模式下移除 tag 时触发
+- visibleChange((visible: boolean))：下拉框出现/隐藏时触发
+- focus((event: FocusEvent))：当 input 获得焦点时触发
+- blur((event: FocusEvent))：当 input 失去焦点时触发
+- clear(())：可清空的单选模式下用户点击清空按钮时触发
+
+## Slots
+
+- default：Option 组件列表
+- header：下拉列表顶部的内容
+- footer：下拉列表底部的内容
+- prefix：Select 组件头部内容
+- empty：无选项时的列表
+- tag：select 组件自定义 tag 内容
+- loading：select 组件自定义 loading 内容
+- label：select 组件自定义 label 内容
+
+## Exposes
+
+- focus(() => void)：使选择器的输入框获取焦点
+- blur(() => void)：使选择器的输入框失去焦点，并隐藏下拉框
+
+## 关系
+
+- 子级：EpOption、EpOptionGroup
+- 常用组合：EpSelect + EpOption、EpSelect + EpOptionGroup
+
+## 视觉提示
+
+- 形状：矩形输入框
+- 密度：中等
+- 插槽内容：default：Option 组件列表；header：下拉列表顶部的内容；footer：下拉列表底部的内容
+- 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 { EpOption, EpSelect } from 'ep-craft'
+
+const value = ref('')
+</script>
+
+<template>
+  <ep-select v-model="value" placeholder="请选择">
+    <ep-option label="选项一" value="one" />
+    <ep-option label="选项二" value="two" />
+    <ep-option label="选项三" value="three" disabled />
+  </ep-select>
+</template>
+```
+
+### 多选
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { EpOption, EpSelect } from 'ep-craft'
+
+const value = ref(['one'])
+</script>
+
+<template>
+  <ep-select v-model="value" multiple collapse-tags placeholder="请选择">
+    <ep-option label="选项一" value="one" />
+    <ep-option label="选项二" value="two" />
+  </ep-select>
+</template>
+```
+
+### 可搜索
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { EpOption, EpSelect } from 'ep-craft'
+
+const value = ref('')
+</script>
+
+<template>
+  <ep-select v-model="value" filterable clearable placeholder="输入关键字">
+    <ep-option label="Vue" value="vue" />
+    <ep-option label="React" value="react" />
+    <ep-option label="Svelte" value="svelte" />
+  </ep-select>
+</template>
+```
+
+## 相关条目
+
+- EpOption
+- EpOptionGroup
+
+---
+
+ep-craft 0.2.0

package/dist-ai/components/skeleton-item.json

@@ -0,0 +1,80 @@
+{
+  "entry": {
+    "category": "feedback",
+    "events": [],
+    "exampleOmittedReason": null,
+    "examples": [
+      {
+        "code": "<script setup lang=\"ts\">\nimport { EpSkeleton, EpSkeletonItem } from 'ep-craft'\n</script>\n\n<template>\n  <ep-skeleton :loading=\"true\">\n    <template #template>\n      <ep-skeleton-item variant=\"image\" style=\"width: 240px; height: 120px\" />\n      <ep-skeleton-item variant=\"h3\" style=\"width: 50%\" />\n      <ep-skeleton-item variant=\"text\" />\n    </template>\n  </ep-skeleton>\n</template>",
+        "id": "skeleton-item-1",
+        "language": "vue",
+        "title": "骨架屏项"
+      }
+    ],
+    "exposes": [],
+    "hot": false,
+    "id": "component:skeleton-item",
+    "keywords": {
+      "en": [
+        "skeleton-item",
+        "skeleton",
+        "item",
+        "placeholder",
+        "feedback"
+      ],
+      "zh": [
+        "骨架屏项",
+        "反馈"
+      ]
+    },
+    "kind": "component",
+    "name": "EpSkeletonItem",
+    "nonUseCases": [
+      "无需用户感知状态变化时",
+      "需要完整业务弹窗流程时优先使用 Dialog"
+    ],
+    "props": [
+      {
+        "alias": null,
+        "defaultText": "text",
+        "description": "当前显示的占位元素的样式",
+        "hasDefault": true,
+        "name": "variant",
+        "required": false,
+        "type": "'p' | 'text' | 'h1' | 'h3' | 'caption' | 'button' | 'image' | 'circle' | 'rect'"
+      }
+    ],
+    "related": [
+      "EpSkeleton"
+    ],
+    "relations": {
+      "children": [],
+      "combos": [],
+      "parents": [],
+      "requiredChildren": []
+    },
+    "slots": [],
+    "slug": "skeleton-item",
+    "summary": "骨架屏项，状态与结果反馈",
+    "tag": "ep-skeleton-item",
+    "useCases": [
+      "展示骨架屏项并向用户传达状态",
+      "在操作前后提供即时反馈"
+    ],
+    "variants": [],
+    "visual": {
+      "cssVars": [
+        "--el-color-success",
+        "--el-color-warning",
+        "--el-color-danger",
+        "--el-font-size-base"
+      ],
+      "density": "中等",
+      "shape": "行内或块级提示",
+      "slotContent": []
+    }
+  },
+  "generatedAt": "2026-11-03T03:09:12.050Z",
+  "libraryVersion": "0.2.0",
+  "schemaVersion": 1
+}

package/dist-ai/components/skeleton-item.md

@@ -0,0 +1,57 @@
+# EpSkeletonItem
+
+`ep-skeleton-item` · feedback（反馈） · `component:skeleton-item`
+
+## 摘要
+
+骨架屏项，状态与结果反馈
+
+## 适用场景
+
+- 适用：展示骨架屏项并向用户传达状态
+- 适用：在操作前后提供即时反馈
+- 不适用：无需用户感知状态变化时
+- 不适用：需要完整业务弹窗流程时优先使用 Dialog
+
+## 关键词
+
+- 中文：骨架屏项、反馈
+- English: skeleton-item, skeleton, item, placeholder, feedback
+
+## Props
+
+- variant ('p' | 'text' | 'h1' | 'h3' | 'caption' | 'button' | 'image' | 'circle' | 'rect'，默认 text)：当前显示的占位元素的样式
+
+## 视觉提示
+
+- 形状：行内或块级提示
+- 密度：中等
+- CSS 变量：--el-color-success、--el-color-warning、--el-color-danger、--el-font-size-base
+
+## 示例
+
+### 骨架屏项
+
+```vue
+<script setup lang="ts">
+import { EpSkeleton, EpSkeletonItem } from 'ep-craft'
+</script>
+
+<template>
+  <ep-skeleton :loading="true">
+    <template #template>
+      <ep-skeleton-item variant="image" style="width: 240px; height: 120px" />
+      <ep-skeleton-item variant="h3" style="width: 50%" />
+      <ep-skeleton-item variant="text" />
+    </template>
+  </ep-skeleton>
+</template>
+```
+
+## 相关条目
+
+- EpSkeleton
+
+---
+
+ep-craft 0.2.0

package/dist-ai/components/skeleton.json

@@ -0,0 +1,134 @@
+{
+  "entry": {
+    "category": "feedback",
+    "events": [],
+    "exampleOmittedReason": null,
+    "examples": [
+      {
+        "code": "<script setup lang=\"ts\">\nimport { EpSkeleton } from 'ep-craft'\n</script>\n\n<template>\n  <ep-skeleton :loading=\"true\" :rows=\"3\" animated />\n</template>",
+        "id": "skeleton-1",
+        "language": "vue",
+        "title": "骨架屏"
+      }
+    ],
+    "exposes": [],
+    "hot": false,
+    "id": "component:skeleton",
+    "keywords": {
+      "en": [
+        "skeleton",
+        "placeholder",
+        "feedback"
+      ],
+      "zh": [
+        "骨架屏",
+        "反馈"
+      ]
+    },
+    "kind": "component",
+    "name": "EpSkeleton",
+    "nonUseCases": [
+      "无需用户感知状态变化时",
+      "需要完整业务弹窗流程时优先使用 Dialog"
+    ],
+    "props": [
+      {
+        "alias": null,
+        "defaultText": "false",
+        "description": "是否使用动画",
+        "hasDefault": false,
+        "name": "animated",
+        "required": false,
+        "type": "boolean"
+      },
+      {
+        "alias": null,
+        "defaultText": "1",
+        "description": "渲染多少个 template",
+        "hasDefault": true,
+        "name": "count",
+        "required": false,
+        "type": "number"
+      },
+      {
+        "alias": null,
+        "defaultText": "3",
+        "description": "骨架屏段落数量",
+        "hasDefault": true,
+        "name": "rows",
+        "required": false,
+        "type": "number"
+      },
+      {
+        "alias": null,
+        "defaultText": "true",
+        "description": "是否显示 skeleton 骨架屏",
+        "hasDefault": true,
+        "name": "loading",
+        "required": false,
+        "type": "boolean"
+      },
+      {
+        "alias": null,
+        "defaultText": "0",
+        "description": "延迟占位 DOM 渲染的时间",
+        "hasDefault": false,
+        "name": "throttle",
+        "required": false,
+        "type": "number"
+      }
+    ],
+    "related": [
+      "EpSkeletonItem"
+    ],
+    "relations": {
+      "children": [],
+      "combos": [],
+      "parents": [],
+      "requiredChildren": []
+    },
+    "slots": [
+      {
+        "description": "用来展示真实UI",
+        "name": "default"
+      },
+      {
+        "description": "用来展示自定义占位符",
+        "name": "template"
+      }
+    ],
+    "slug": "skeleton",
+    "summary": "骨架屏，状态与结果反馈",
+    "tag": "ep-skeleton",
+    "useCases": [
+      "展示骨架屏并向用户传达状态",
+      "在操作前后提供即时反馈"
+    ],
+    "variants": [
+      {
+        "dimension": "state",
+        "values": [
+          "loading"
+        ],
+        "when": "通过布尔属性切换禁用、加载或选中状态"
+      }
+    ],
+    "visual": {
+      "cssVars": [
+        "--el-color-success",
+        "--el-color-warning",
+        "--el-color-danger",
+        "--el-font-size-base"
+      ],
+      "density": "中等",
+      "shape": "行内或块级提示",
+      "slotContent": [
+        "default：用来展示真实UI",
+        "template：用来展示自定义占位符"
+      ]
+    }
+  },
+  "generatedAt": "2026-11-03T03:09:12.050Z",
+  "libraryVersion": "0.2.0",
+  "schemaVersion": 1
+}

package/dist-ai/components/skeleton.md

@@ -0,0 +1,65 @@
+# EpSkeleton
+
+`ep-skeleton` · feedback（反馈） · `component:skeleton`
+
+## 摘要
+
+骨架屏，状态与结果反馈
+
+## 适用场景
+
+- 适用：展示骨架屏并向用户传达状态
+- 适用：在操作前后提供即时反馈
+- 不适用：无需用户感知状态变化时
+- 不适用：需要完整业务弹窗流程时优先使用 Dialog
+
+## 关键词
+
+- 中文：骨架屏、反馈
+- English: skeleton, placeholder, feedback
+
+## 变体
+
+- state: loading（通过布尔属性切换禁用、加载或选中状态）
+
+## Props
+
+- animated (boolean)：是否使用动画
+- count (number，默认 1)：渲染多少个 template
+- rows (number，默认 3)：骨架屏段落数量
+- loading (boolean，默认 true)：是否显示 skeleton 骨架屏
+- throttle (number)：延迟占位 DOM 渲染的时间
+
+## Slots
+
+- default：用来展示真实UI
+- template：用来展示自定义占位符
+
+## 视觉提示
+
+- 形状：行内或块级提示
+- 密度：中等
+- 插槽内容：default：用来展示真实UI；template：用来展示自定义占位符
+- CSS 变量：--el-color-success、--el-color-warning、--el-color-danger、--el-font-size-base
+
+## 示例
+
+### 骨架屏
+
+```vue
+<script setup lang="ts">
+import { EpSkeleton } from 'ep-craft'
+</script>
+
+<template>
+  <ep-skeleton :loading="true" :rows="3" animated />
+</template>
+```
+
+## 相关条目
+
+- EpSkeletonItem
+
+---
+
+ep-craft 0.2.0