@phelan/design 0.0.1

package/docs/components/basic/action-menu.md

@@ -0,0 +1,63 @@
+# action-menu 样例
+
+菜单列容器管理组件
+
+## 基础用法
+
+点击新增按钮新增菜单项，输入框失去焦点/按下enter后新增菜单项，按下esc或者清空后失去焦点/按下enter取消新增；点击删除按钮删除菜单项；双击菜单项修改样式。
+
+:::preview
+
+demo-preview=../../examples/action-menu/basic.vue
+
+:::
+
+## 菜单权限
+
+可通过editable定义菜单项是否可双击编辑；
+可通过operations定义菜单项可执行的操作列表，目前仅支持删除操作；
+
+:::preview
+
+demo-preview=../../examples/action-menu/index.vue
+
+:::
+
+## 默认选中
+
+可通过handleSelectMenu方法设置默认选中的菜单项。
+
+:::preview
+
+demo-preview=../../examples/action-menu/default.vue
+
+:::
+
+## ActionMenu API
+
+### ActionMenu Attributes
+
+| 属性名    | 说明           | 类型               | 必传 | 默认值      |
+| --------- | -------------- | ------------------ | ---- | ----------- |
+| data      | 菜单内容       | `MenuItem[]`       | 否   | []          |
+| width     | 容器宽度       | `number \| string` | 否   | 256         |
+| title     | 容器标题       | `string`           | 否   | Action Menu |
+| maxLength | 文本框最大长度 | `number`           | 否   | 5000        |
+
+### MenuItem
+
+| 属性名     | 说明             | 类型               | 必须 |
+| ---------- | ---------------- | ------------------ | ---- |
+| id         | 菜单项唯一标识   | `string \| number` | 是   |
+| title      | 菜单项名称       | `string`           | 是   |
+| editable   | 是否可编辑       | `boolean`          | 否   |
+| operations | 可执行的操作列表 | `Array<'delete'>`  | 否   |
+
+### ActionMenu Events
+
+| 名称   | 说明                                                             | 类型                           |
+| ------ | ---------------------------------------------------------------- | ------------------------------ |
+| change | 菜单名称改变时回调(双击菜单时触发修改样式，失焦/enter时触发回调) | (menuObject: MenuItem) => void |
+| add    | 添加菜单时回调(点击新增按钮新增一条数据，失焦/enter时触发回调)   | (menuName: string) => void     |
+| delete | 删除菜单时的回调                                                 | (menuObject: MenuItem) => void |
+| select | 选中菜单时回调                                                   | (menuObject: MenuItem) => void |

package/docs/components/basic/arrow-steps.md

@@ -0,0 +1,55 @@
+# ArrowSteps 箭头步骤条
+
+## 基础用法
+
+:::preview
+
+demo-preview=../../examples/arrow-steps/index.vue
+
+:::
+
+## ArrowSteps API
+
+### ArrowSteps Attributes
+
+| 属性名 | 说明 | 类型 | 默认值 |
+| ----- | ---- | ---- | ---- |
+| active | 当前step的index | `number` | 0 |
+
+### ArrowSteps Events
+
+| 事件名 | 说明 | 参数 |
+| ----- | ---- | ---- |
+| change | props.active 变动时触发的事件 | `(newVal: number, oldVal: number) => void` |
+
+### ArrowSteps Slots
+
+| 插槽名 | 说明 | 子标签 |
+| ----- | ---- | ---- |
+| default | 默认插槽，接收ArrowStep的列表 | ArrowStep |
+
+## ArrowStep API
+
+### ArrowStep Attributes
+
+| 属性名 | 说明 | 类型 | 默认值 |
+| ----- | ---- | ---- | ---- |
+| title | step的标题。如果使用了title插槽将优先显示title插槽的内容 | `string` | - |
+
+### ArrowStep Events
+
+| 事件名 | 说明 | 参数 |
+| ----- | ---- | ---- |
+| - | - | - |
+
+### ArrowStep Slots
+
+| 插槽名 | 说明 | 子标签 |
+| ----- | ---- | ---- |
+| title | step的标题的自定义插槽 | - |
+
+### ArrowStep Exposes
+
+| 方法名 | 说明 | 类型 |
+| ----- | ---- | ---- |
+| - | - | - |

package/docs/components/basic/badge.md

@@ -0,0 +1,22 @@
+# badge 样例
+
+该组件提供了一个样例。
+
+## 基础用法
+
+这里需要说明组件badge功能和使用方式。
+
+:::preview
+
+demo-preview=../../examples/badge/index.vue
+
+:::
+
+
+## Badge API
+
+### Badge Attributes
+
+| 属性名 | 说明 | 类型     | 默认值 |
+| ------ | ---- | -------- | ------ |
+| xxx    | xxx  | `String` | —      |

package/docs/components/basic/batch-copy.md

@@ -0,0 +1,44 @@
+# batch-copy 样例
+
+该组件提供了一个样例。
+
+## 基础用法
+
+文本框可以调整粘贴的文案内容，调整完之后，onblur后会触发校验
+
+:::preview
+
+demo-preview=../../examples/batch-copy/index.vue
+
+:::
+
+## 自定义分隔符与校验函数
+
+使用数组的形式自定义分隔符，并通过校验函数对粘贴内容进行校验。
+
+:::preview
+
+demo-preview=../../examples/batch-copy/validator.vue
+
+:::
+
+## BatchCopy API
+
+### BatchCopy Attributes
+
+| 属性名                | 说明                                         | 类型                                                              | 必传 | 默认值                                                                          |
+| --------------------- | -------------------------------------------- | ----------------------------------------------------------------- | ---- | ------------------------------------------------------------------------------- |
+| model-value / v-model | 控制显隐                                     | boolean                                                           | 否   | false                                                                           |
+| maxLength             | 文本框允许粘贴/编辑的最大长度                | number                                                            | 否   | -                                                                               |
+| copyLimit             | 允许批量复制的数据的最大数量限制             | number                                                            | 否   | -                                                                               |
+| description           | 描述文案                                     | string                                                            | 否   | 从EXCEL复制数据后，按下Ctrl+V或点击右键粘贴。支持使用换行、空格、逗号或分号分隔 |
+| separator             | 分隔符                                       | string[]                                                          | 否   | [' ', '\n', ',', ';', '，', '；']                                               |
+| width                 | 容器宽度                                     | number                                                            | 否   | 570                                                                             |
+| validator             | onblur时，校验回调，调用以校验复制的id合法性 | (values: any[]) => Promise<{​validData: []，​InvalidData: [] ,​}> | 否   | -                                                                               |
+
+### BatchCopy Events
+
+| 名称    | 说明           | 类型                                                   |
+| ------- | -------------- | ------------------------------------------------------ |
+| cancel  | 取消时回调     | () => void                                             |
+| confirm | 确认提交时回调 | (values:{​validData: []，​InvalidData: [] ,​}) => void |

package/docs/components/basic/batch-editor.md

@@ -0,0 +1,52 @@
+# batch-editor 样例
+
+批量编辑组件，用于在表格数据中进行批量修改操作。该组件结合了表格展示和编辑功能（表单），允许用户在同一个界面中查看数据并进行批量编辑。
+
+## 基础用法
+
+通过配置`tableColumn`和`tableData`列表需要的参数和`form`插槽来实现批量编辑。
+
+:::preview
+
+demo-preview=../../examples/batch-editor/basic.vue
+
+:::
+
+## 自定义 table 和 footer 插槽
+
+自定义列表`table`和底部按钮`footer`插槽区域。
+
+:::preview
+
+demo-preview=../../examples/batch-editor/customization.vue
+
+:::
+
+## BatchEditor API
+
+### BatchEditor Attributes
+
+| 属性名            | 说明             | 类型               | 默认值   |
+| ----------------- | ---------------- | ------------------ | -------- |
+| modelValue        | 控制显隐         | `boolean`          | false    |
+| title             | 标题             | `string`           | 批量编辑 |
+| width             | 容器宽度，当使用 number 类型时, 以像素为单位, 当使用 string 类型时, 请传入 'x%', 否则便会以 number 类型解释        | `number / string` | 50%      |
+| tableColumn       | Table column配置 | `object[]`         | false    |
+| tableData         | Table 数据       | `object[]`         | false    |
+| desc              | 描述提示         | `string`           | ''       |
+| confirmButtonText | 底部按钮名字     | `string`           | Save     |
+
+### BatchEditor Events
+
+| 事件名     | 说明               | 类型       |
+| ---------- | ------------------ | ---------- |
+| cancel  | 关闭时回调         | `Function` |
+| confirm | 底部按钮点击时回调 | `Function` |
+
+### BatchEditor Slots
+
+| 插槽名 | 说明                 |
+| ------ | -------------------- |
+| form   | 表单区域             |
+| table  | 列表区域             |
+| footer | 底部按钮区域自定区域 |

package/docs/components/basic/border.md

@@ -0,0 +1,22 @@
+# border 样例
+
+该组件提供了一个样例。
+
+## 基础用法
+
+这里需要说明组件border功能和使用方式。
+
+:::preview
+
+demo-preview=../../examples/border/index.vue
+
+:::
+
+
+## Border API
+
+### Border Attributes
+
+| 属性名 | 说明 | 类型     | 默认值 |
+| ------ | ---- | -------- | ------ |
+| xxx    | xxx  | `String` | —      |

package/docs/components/basic/breadcrumb.md

@@ -0,0 +1,38 @@
+# breadcrumb 样例
+
+显示当前页面的路径，快速返回之前的任意页面。
+
+## 基础用法
+
+在 m-breadcrumb 中使用 m-breadcrumb-item 标签表示从首页开始的每一级。 该组件接受一个 String 类型的参数 separator来作为分隔符。 默认值为 '/'。
+
+:::preview
+
+demo-preview=../../examples/breadcrumb/index.vue
+
+:::
+
+
+## Breadcrumb API
+
+### Breadcrumb Attributes
+
+| 属性名 | 说明 | 类型     | 默认值 |
+| ------ | ---- | -------- |-----|
+| separator    | 分隔符  | `String` | 	/  |
+| separator-icon    | 	图标分隔符的组件或组件名  | `string / Component` | 	—   |
+
+### Breadcrumb Slots
+
+| 插槽名 | 说明 | 子标签     | 
+| ------ | ---- | -------- |
+| default    | 自定义默认内容  | `Breadcrumb Item` |
+
+## BreadcrumbItem API
+
+### BreadcrumbItem Attributes
+
+| 属性名 | 说明                         | 类型     | 默认值 |
+| ------ |----------------------------| -------- |-----|
+| to    | 	路由跳转目标，同 `vue-router` 的 `to` 属性 | `String` | ''  |
+| replace    | 如果设置该属性为 `true`, 导航将不会留下历史记录 | `boolean` | false |

package/docs/components/basic/button.md

@@ -0,0 +1,109 @@
+# Button 按钮
+
+常用的操作按钮。
+
+## 基础用法
+
+### 基础按钮样式
+使用 type、plain 来定义按钮的样式。
+round属性和circle为element-plus保留用法。
+:::preview
+
+demo-preview=../../examples/button/demo1.vue
+
+:::
+
+### 禁用按钮样式
+你可以使用 disabled 属性来定义按钮是否被禁用。
+
+使用 disabled 属性来控制按钮是否为禁用状态。 该属性接受一个 Boolean 类型的值。
+:::preview
+
+demo-preview=../../examples/button/demo2.vue
+
+:::
+
+### 文字按钮
+没有边框和背景色的按钮。
+:::preview
+
+demo-preview=../../examples/button/demo3.vue
+
+:::
+
+### 图标按钮​
+使用图标为按钮添加更多的含义。 你也可以单独使用图标不添加文字来节省显示区域占用。
+
+使用 icon 属性来为按钮添加图标。 您可以在我们的 Icon 组件中找到所需图标。 通过向右方添加`<i>`标签来添加图标， 你也可以使用自定义图标。
+:::preview
+
+demo-preview=../../examples/button/demo4.vue
+
+:::
+
+### 加载状态按钮
+点击按钮来加载数据，并向用户反馈加载状态。
+
+通过设置 loading 属性为 true 来显示加载中状态。
+
+
+>TIP
+>
+>您可以使用 loading 插槽或 loadingIcon属性自定义您的loading图标
+>
+>ps: loading 插槽优先级高于loadingIcon属性
+:::preview
+
+demo-preview=../../examples/button/demo5.vue
+
+:::
+
+### 按钮尺寸
+除了默认的大小，按钮组件还提供了几种额外的尺寸可供选择，以便适配不同的场景。
+
+使用 size 属性额外配置尺寸，可使用 large。仍保留small用法。
+:::preview
+
+demo-preview=../../examples/button/demo6.vue
+
+:::
+
+
+## Button API
+
+### Button Attributes
+
+| 属性名 | 说明 | 类型 | 默认值 |
+| ------ | ---- | -------- | ------ |
+| size | 尺寸 | `'large' \| 'default' \| 'small'` | `'default'` |
+| type | 按钮类型，在设置 color 时，后者优先 | `'default' \| 'primary' \| 'success' \| 'warning' \| 'info' \| 'danger' \| 'text'` | `'default'` |
+| plain | 是否为朴素按钮 | `boolean` | `false` |
+| text | 是否为文字按钮 | `boolean` | `false` |
+| bg | 是否显示文字按钮背景颜色 | `boolean` | `false` |
+| link | 是否为链接按钮 | `boolean` | `false` |
+| round | 是否为圆角按钮 | `boolean` | `false` |
+| circle | 是否为圆形按钮 | `boolean` | `false` |
+| loading | 是否为加载中状态 | `boolean` | `false` |
+| loading-icon | 自定义加载中状态图标组件 | `string \| Component` | `Loading` |
+| disabled | 按钮是否为禁用状态 | `boolean` | `false` |
+| icon | 图标组件（支持字符串、组件对象，字符串时使用ad-icon渲染） | `string \| Component` | — |
+| autofocus | 原生 autofocus 属性 | `boolean` | `false` |
+| native-type | 原生 type 属性 | `'button' \| 'submit' \| 'reset'` | `'button'` |
+| auto-insert-space | 两个中文字符之间自动插入空格(仅当文本长度为 2 且所有字符均为中文时才生效) | `boolean` | `false` |
+| color | 自定义按钮颜色, 并自动计算 hover 和 active 触发后的颜色 | `string` | — |
+| dark | dark 模式, 意味着自动设置 color 为 dark 模式的颜色 | `boolean` | `false` |
+| tag | 自定义元素标签 | `string \| Component` | `'button'` |
+
+### Button Slots
+
+| 插槽名 | 说明 |
+| ------ | ---- |
+| default | 按钮内容 |
+| icon | 自定义图标 |
+
+### Button Events
+
+| 事件名 | 说明 | 参数 |
+| ------ | ---- | ---- |
+| click | 点击按钮时触发 | `(event: MouseEvent) => void` |
+

package/docs/components/basic/calendar.md

@@ -0,0 +1,111 @@
+# Calendar 日历
+
+显示日期，支持基础日历功能和甘特图任务展示。
+
+## 基础用法
+
+`MCalendar` 组件设置 value 来指定当前显示的月份。 如果 value 未指定，则显示当月。 value 支持 v-model 双向绑定。
+
+:::preview
+
+demo-preview=../../examples/calendar/calendar01.vue
+
+:::
+
+## 自定义内容
+
+`MCalendar` 组件通过设置名为 date-cell 的 scoped-slot 来自定义日历单元格中显示的内容。 在 scoped-slot 可以获取到 date（当前单元格的日期）, data（包括 type，isSelected，day 属性）。 详情解释参考下方的 API 文档。
+
+:::preview
+
+demo-preview=../../examples/calendar/calendar02.vue
+
+:::
+
+## 范围
+
+`MCalendar` 组件通过设置 range 属性指定日历的显示范围。 开始时间必须是周起始日，结束时间必须是周结束日，且时间跨度不能超过两个月。
+:::preview
+
+demo-preview=../../examples/calendar/calendar03.vue
+
+:::
+
+## 自定义日历头部
+
+`MCalendar` 组件通过设置 插槽来自定义日历头部。
+:::preview
+
+demo-preview=../../examples/calendar/calendar04.vue
+
+:::
+
+## 甘特图日历
+
+`MCalendar` 组件在基础日历上扩展了甘特图任务展示功能，可以在日历上显示任务的时间安排。
+
+:::preview
+
+demo-preview=../../examples/calendar/calendar05.vue
+
+:::
+
+## 甘特图日历 - 自定义弹窗内容
+
+`MCalendar` 组件在使用Slot来实现自当以弹窗内容
+
+:::preview
+
+demo-preview=../../examples/calendar/calendar06.vue
+
+:::
+
+## MCalendar API
+
+### MCalendar Attributes
+
+| 属性名 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ------ |
+| model-value / v-model | 选中项绑定值 | `Date \| string \| number` | — |
+| range | 时间范围，包括开始时间与结束时间。开始时间必须是周起始日，结束时间必须是周结束日，且时间跨度不能超过两个月 | `[Date, Date]` | — |
+| first-day-of-week | 周起始日，0 代表周日，1 代表周一，以此类推 | `number` | 0 |
+| tasks | 任务列表数组 | `Task[]` | [] |
+
+### MCalendar Events
+
+| 事件名 | 说明 | 参数 |
+| ------ | ---- | ---- |
+| change | 当选中的日期改变时触发 | `date: Date` - 选中的日期 |
+
+
+### MCalendar Slots
+
+| 插槽名 | 说明 | 参数 |
+| ------ | ---- | ---- |
+| date-cell | 自定义日期单元格的内容, type 表示该日期的所属月份，可选值有 prev-month、current-month 和 next-month；isSelected 标明该日期是否被选中；day 是格式化的日期，格式为 yyyy-MM-dd；date 是单元格的日期 | `{ date: Date, data: { type: string, isSelected: boolean, day: string } }` |
+| header | 自定义日历头部的内容 | `{ date: string }` |
+| task-popover | 自定义甘特图弹窗的内容 | `{ day: string, task: Task }` |
+
+
+### GanttTask 数据结构
+```md
+export interface Task {
+    id: string | number;
+    name: string;
+    startTime: string;
+    endTime: string;
+    bgColor?: string;
+    brandColor?: string;
+}
+
+export interface CalendarProps{
+    modelValue?: MaybeDate;
+    range?: [Date, Date];
+    firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    tasks?: Task[];
+    // 允许透传 Element Plus Calendar 的所有其他属性
+    [key: string]: any;
+}
+
+```
+

package/docs/components/basic/card.md

@@ -0,0 +1,59 @@
+# card 样例
+
+将信息聚合在卡片容器中展示。
+
+## 简单用法
+
+卡片可以只有内容区域。
+
+:::preview
+
+demo-preview=../../examples/card/basic-card.vue
+
+:::
+
+## 带标题的卡片
+
+标题部分可以是字符串,也可以通过插槽自定义。
+
+:::preview
+
+demo-preview=../../examples/card/title-card.vue
+
+:::
+
+## 可折叠卡片
+
+折叠按钮也可以通过插槽自定义。
+
+:::preview
+
+demo-preview=../../examples/card/collapsible-card.vue
+
+:::
+
+## 副标题样式单独抽离出一个组件
+
+:::preview
+
+demo-preview=../../examples/card/card-title.vue
+
+:::
+
+### Card Attributes
+
+| 属性名          | 说明                                                          | 类型      | 默认值  |
+| --------------- | ------------------------------------------------------------- | --------- | ------- |
+| size            | padding大小;small(padding：20px 24px)、default(padding：24px) | `String`  | default |
+| title           | 标题                                                          | `String`  | -       |
+| sub             | 标题样式是否为副标题样式                                      | `Boolean` | false   |
+| collapsible     | 是否可折叠                                                    | `Boolean` | false   |
+| defaultExpanded | 默认是否展开                                                  | `Boolean` | true    |
+
+### Card Slots
+
+| 插槽名  | 说明       | 子标签 |
+| ------- | ---------- | ------ |
+| default | 内容       | -      |
+| title   | 自定义标题 | -      |
+| extra   | 自定义折叠 | -      |

package/docs/components/basic/carousel.md

@@ -0,0 +1,22 @@
+# carousel 样例
+
+该组件提供了一个样例。
+
+## 基础用法
+
+这里需要说明组件carousel功能和使用方式。
+
+:::preview
+
+demo-preview=../../examples/carousel/index.vue
+
+:::
+
+
+## Carousel API
+
+### Carousel Attributes
+
+| 属性名 | 说明 | 类型     | 默认值 |
+| ------ | ---- | -------- | ------ |
+| xxx    | xxx  | `String` | —      |