@phelan/design 0.0.1 → 0.0.2

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

@@ -1,63 +0,0 @@
-# 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

@@ -1,55 +0,0 @@
-# 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

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

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

@@ -1,44 +0,0 @@
-# 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

@@ -1,52 +0,0 @@
-# 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

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

package/docs/components/basic/breadcrumb.md

@@ -1,38 +0,0 @@
-# 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

@@ -1,109 +0,0 @@
-# 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

@@ -1,111 +0,0 @@
-# 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

@@ -1,59 +0,0 @@
-# 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

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