@phelan/design 0.0.1

package/docs/components/basic/result.md

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

package/docs/components/basic/scrollbar.md

@@ -0,0 +1,105 @@
+# Scrollbar 滚动条
+
+用于替换浏览器原生滚动条。
+
+## 基础用法
+
+通过 `height` 属性设置滚动条高度，若不设置则根据父容器高度自适应。
+
+:::preview
+
+demo-preview=../../examples/scrollbar/index.vue
+
+:::
+
+## 横向滚动
+
+当元素宽度大于滚动条宽度时，会显示横向滚动条。
+
+:::preview
+
+demo-preview=../../examples/scrollbar/horizontal.vue
+
+:::
+
+## 最大高度
+
+当元素高度超过最大高度，才会显示滚动条。
+
+:::preview
+
+demo-preview=../../examples/scrollbar/max-height.vue
+
+:::
+
+## 手动滚动
+
+通过使用 `setScrollTop` 与 `setScrollLeft` 方法，可以手动控制滚动条滚动。
+
+:::preview
+
+demo-preview=../../examples/scrollbar/manual.vue
+
+:::
+
+## 无限滚动
+
+`end-reached` 是在滚动条到达底部时触发的。 它可以用作无限滚动。
+
+:::preview
+
+demo-preview=../../examples/scrollbar/infinite.vue
+
+:::
+
+## API
+
+### Attributes
+
+| 属性名                         | 说明                                 | 类型              | 默认值   |
+| --------------------------- | ---------------------------------- | --------------- | ----- |
+| height                      | 滚动条高度                              | string / number | —     |
+| max-height                  | 滚动条最大高度                            | string / number | —     |
+| native                      | 是否使用原生滚动条样式                        | boolean         | false |
+| wrap-style                  | 包裹容器的自定义样式                         | string / object | —     |
+| wrap-class                  | 包裹容器的自定义类名                         | string          | —     |
+| view-style                  | 视图的自定义样式                           | string / object | —     |
+| view-class                  | 视图的自定义类名                           | string          | —     |
+| noresize                    | 不响应容器尺寸变化，如果容器尺寸不会发生变化，最好设置它可以优化性能 | boolean         | false |
+| tag                         | 视图的元素标签                            | string          | div   |
+| always                      | 滚动条总是显示                            | boolean         | false |
+| min-size                    | 滚动条最小尺寸                            | number          | 20    |
+| id                          | 视图ID                               | string          | —     |
+| role                        | 视图的角色                              | string          | —     |
+| aria-label                  | 视图的 aria-label                     | string          | —     |
+| aria-orientation            | 视图的 aria-orientation               | enum            | —     |
+| tabindex                    | 容器的tabindex                        | number / string | —     |
+| distance                    | 触发到达底部事件的距离（像素）                    | number          | 0     |
+
+### Events
+
+| 事件名                | 说明               | 类型       |
+| ------------------ | ---------------- | -------- |
+| scroll             | 当触发滚动事件时，返回滚动的距离 | Function |
+| end-reached        | 触发滚动结束时的触发器      | Function |
+
+### Slots
+
+| 插槽名     | 说明      |
+| ------- | ------- |
+| default | 自定义默认内容 |
+
+### Exposes
+
+| 名称            | 说明            | 类型       |
+| ------------- | ------------- | -------- |
+| handleScroll  | 触发滚动事件        | Function |
+| scrollTo      | 滚动到一组特定坐标     | Function |
+| setScrollTop  | 设置滚动条到顶部的距离   | Function |
+| setScrollLeft | 设置滚动条到左边的距离   | Function |
+| update        | 手动更新滚动条状态     | Function |
+| wrapRef       | 滚动条包裹的 ref 对象 | object   |
+
+## Owner
+
+Aric.Li@aldi.cn

package/docs/components/basic/search-panel.md

@@ -0,0 +1,53 @@
+# Search Panel 查询面板
+
+通用列表页的查询面板样式。支持列数配置和展开收起功能。
+
+## 基础用法
+
+通用列表页的查询面板样式。支持列数配置。当表单项数量超过 `visible-count` 时，会自动显示展开/收起按钮。
+
+:::preview
+
+demo-preview=../../examples/search-panel/index.vue
+
+:::
+
+## 无展开收起
+
+如果表单数较少情况下，可以配置无展开收起。
+
+:::preview
+
+demo-preview=../../examples/search-panel/nowrap.vue
+
+:::
+
+## SearchPanel API
+
+### SearchPanel Attributes
+
+| 属性名 | 说明 | 类型 | 默认值 |
+| ------ | ---- | -------- | ------ |
+| default-span | 默认列宽（基于 24 栅格系统） | `number` | `8` |
+| gutter | 栅格间距（单位：px） | `number` | `16` |
+| visible-count | 折叠时显示的表单项数量，超过此数量会显示展开/收起按钮 | `number` | `6` |
+| expandable | 是否可展开收起 | `boolean` | `true` |
+
+### SearchPanel Events
+
+| 事件名 | 说明 | 参数 |
+| ------ | ---- | ---- |
+| search | 点击查询按钮时触发 | `(fields: object, formInstance: FormInstance) => void` |
+| reset | 点击重置按钮时触发 | `(formInstance: FormInstance) => void` |
+
+### SearchPanel Slots
+
+| 插槽名 | 说明 |
+| ------ | ---- |
+| default | 自定义默认内容，用于放置 `m-form` 或 `el-form` 表单组件 |
+
+### SearchPanel Exposes
+
+| 方法名 | 说明 | 类型 |
+| ------ | ---- | ---- |
+| getForm | 获取表单实例的方法 | `() => FormInstance` |

package/docs/components/basic/select.md

@@ -0,0 +1,256 @@
+# Select 选择器
+
+当选项过多时，使用下拉菜单展示并选择内容。
+
+## 基础用法
+
+适用广泛的基础单选
+
+:::preview
+
+demo-preview=../../examples/select/index.vue
+
+:::
+
+## 禁用选项
+
+通过 `disabled` 属性可以禁用某个选项
+
+:::preview
+
+demo-preview=../../examples/select/disabled-option.vue
+
+:::
+
+## 禁用选择器
+
+通过 `disabled` 属性可以禁用整个选择器
+
+:::preview
+
+demo-preview=../../examples/select/disabled-select.vue
+
+:::
+
+## 可清空
+
+通过 `clearable` 属性可以将选择器设置为可清空，点击清空图标可以将选择器清空为初始状态
+
+:::preview
+
+demo-preview=../../examples/select/clearable.vue
+
+:::
+
+## 尺寸
+
+使用 `size` 属性改变选择器的大小，除了默认大小外，还有 `large` 和 `small` 两种尺寸
+
+:::preview
+
+demo-preview=../../examples/select/sizes.vue
+
+:::
+
+## 基础多选
+
+使用 `multiple` 属性启用多选模式，此时 `v-model` 的值为一个数组
+
+:::preview
+
+demo-preview=../../examples/select/multiple.vue
+
+:::
+
+## 分组
+
+使用 `m-option-group` 对选项进行分组展示
+
+:::preview
+
+demo-preview=../../examples/select/grouping.vue
+
+:::
+
+## 可搜索
+
+使用 `filterable` 属性启用搜索功能。注意，`filterable` 是 `boolean` 类型，`true` 表示启用搜索功能
+
+:::preview
+
+demo-preview=../../examples/select/filterable.vue
+
+:::
+
+## 远程搜索
+
+使用 `remote` 属性启用远程搜索，配合 `remote-method` 实现从服务器搜索选项
+
+:::preview
+
+demo-preview=../../examples/select/remote-search.vue
+
+:::
+
+## 创建新条目
+
+使用 `allow-create` 属性允许用户创建新的条目。注意，`allow-create` 需要配合 `filterable` 使用
+
+:::preview
+
+demo-preview=../../examples/select/allow-create.vue
+
+:::
+
+## 自定义选项模板
+
+可以自定义选项的显示内容，比如添加图标、描述等
+
+:::preview
+
+demo-preview=../../examples/select/custom-template.vue
+
+:::
+
+## 使用 value-key
+
+当 `v-model` 的值为对象类型时，需要指定 `value-key` 作为唯一标识
+
+:::preview
+
+demo-preview=../../examples/select/value-key.vue
+
+:::
+
+## 折叠标签
+
+使用 `collapse-tags` 属性可以将多选时选中的选项折叠显示。使用 `collapse-tags-tooltip` 属性可以在鼠标悬停时显示所有选中的标签
+
+:::preview
+
+demo-preview=../../examples/select/collapse-tags.vue
+
+:::
+
+## 多选数量限制
+
+使用 `multiple-limit` 属性可以限制多选时最多选择的项目数
+
+:::preview
+
+demo-preview=../../examples/select/multiple-limit.vue
+
+:::
+
+## 下拉框头部和底部
+
+使用 `header` 和 `footer` 插槽可以自定义下拉框的头部和底部内容
+
+:::preview
+
+demo-preview=../../examples/select/header-footer.vue
+
+:::
+
+## 自定义加载状态
+
+使用 `loading` 属性可以显示加载状态
+
+:::preview
+
+demo-preview=../../examples/select/loading.vue
+
+:::
+
+## 自定义空状态
+
+使用 `empty` 插槽可以自定义无选项时的显示内容
+
+:::preview
+
+demo-preview=../../examples/select/empty.vue
+
+:::
+
+## Select API
+
+### Select Attributes
+
+| 属性名 | 说明 | 类型     | 默认值 |
+| ------ | ---- | -------- | ------ |
+| model-value / v-model | 绑定值 | `string` / `number` / `boolean` / `object` | — |
+| multiple | 是否多选 | `boolean` | `false` |
+| disabled | 是否禁用 | `boolean` | `false` |
+| value-key | 作为 value 唯一标识的键名，绑定值为对象类型时必填 | `string` | `'value'` |
+| size | 输入框尺寸 | `'large' \| 'default' \| 'small'` | `'default'` |
+| clearable | 是否可以清空选项 | `boolean` | `false` |
+| collapse-tags | 多选时是否将选中值按文字的形式展示 | `boolean` | `false` |
+| collapse-tags-tooltip | 当鼠标悬停于折叠标签的文本时，是否显示所有选中的标签。 要使用此属性，`collapse-tags` 属性必须设定为 `true` | `boolean` | `false` |
+| multiple-limit | 多选时用户最多可以选择的项目数， 为 0 则不限制 | `number` | `0` |
+| name | Select 输入框的原生 name 属性 | `string` | — |
+| autocomplete | Select 输入框的原生 autocomplete 属性 | `string` | `'off'` |
+| placeholder | 占位符 | `string` | `'请选择'` |
+| filterable | 是否可搜索 | `boolean` | `false` |
+| allow-create | 是否允许用户创建新条目， 需配合 `filterable` 使用 | `boolean` | `false` |
+| filter-method | 自定义搜索方法 | `function` | — |
+| remote | 是否为远程搜索 | `boolean` | `false` |
+| remote-method | 远程搜索方法 | `function` | — |
+| loading | 是否正在从远程获取数据 | `boolean` | `false` |
+| loading-text | 远程加载时显示的文字 | `string` | `'加载中'` |
+| no-match-text | 搜索条件无匹配时显示的文字，也可以使用 `#empty` 设置 | `string` | `'无匹配数据'` |
+| no-data-text | 选项为空时显示的文字，也可以使用 `#empty` 设置 | `string` | `'无数据'` |
+| popper-class | Select 下拉框的类名 | `string` | — |
+| popper-options | 自定义 popper 选项，更多请参考 [popper.js](https://popper.js.org/docs/v2/) | `object` | `{modifiers: [{name: 'offset', options: {offset: [0, 8]}}]}` |
+| reserve-keyword | 在多选模式下，当选择时，是否在输入框中保留关键字 | `boolean` | `false` |
+| default-first-option | 在输入框按下回车，选择第一个匹配项。 需配合 `filterable` 或 `remote` 使用 | `boolean` | `false` |
+| popper-append-to-body | 是否将弹出框插入至 body 元素。 在弹出框的定位出现问题时，可将该属性设置为 `false` | `boolean` | `true` |
+| teleported | 是否将 Select 的下拉列表插入至 body 元素 | `boolean` | `true` |
+| persistent | 当 select-dropdown 组件被激活时，是否使 body 的滚动失效 | `boolean` | `true` |
+| automatic-dropdown | 对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单 | `boolean` | `false` |
+| clear-icon | 自定义清除图标组件 | `string \| Component` | `CircleClose` |
+| fit-input-width | 下拉框的宽度是否与输入框相同 | `boolean` | `false` |
+| suffix-icon | 自定义后缀图标组件 | `string \| Component` | `ArrowDown` |
+| tag-type | 标签类型 | `'success' \| 'info' \| 'warning' \| 'danger'` | `'info'` |
+| validate-event | 输入时是否触发表单的校验 | `boolean` | `true` |
+| placement | 下拉框出现的位置 | `'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'` | `'bottom-start'` |
+| max-collapse-tags | 当 `collapse-tags` 为 `true` 时，设置需要显示的标签的最大数量 | `number` | `1` |
+
+### Select Events
+
+| 事件名 | 说明 | 参数 |
+| ------ | ---- | ---- |
+| change | 选中值发生变化时触发 | `(val: string \| number \| boolean \| object)` |
+| visible-change | 下拉框出现/隐藏时触发 | `(visible: boolean)` |
+| remove-tag | 多选模式下移除tag时触发 | `(val: string \| number \| boolean \| object)` |
+| clear | 可清空的单选模式下用户点击清空按钮时触发 | `—` |
+| blur | 当选择器的输入框失去焦点时触发 | `(event: FocusEvent)` |
+| focus | 当选择器的输入框获得焦点时触发 | `(event: FocusEvent)` |
+
+### Select Slots
+
+| 插槽名 | 说明 |
+| ------ | ---- |
+| default | Option 组件列表 |
+| empty | 无选项时的列表内容 |
+| prefix | Select 组件头部内容 |
+
+### Option Attributes
+
+| 属性名 | 说明 | 类型     | 默认值 |
+| ------ | ---- | -------- | ------ |
+| value | 选项的值 | `string` / `number` / `boolean` / `object` | — |
+| label | 选项的标签，若不设置则默认与 `value` 相同 | `string` / `number` | — |
+| disabled | 是否禁用该选项 | `boolean` | `false` |
+
+### Option Slots
+
+| 插槽名 | 说明 |
+| ------ | ---- |
+| default | 自定义默认内容 |
+
+### OptionGroup Attributes
+
+| 属性名 | 说明 | 类型     | 默认值 |
+| ------ | ---- | -------- | ------ |
+| label | 分组的组名 | `string` | — |
+| disabled | 是否将该分组下所有选项置为禁用 | `boolean` | `false` |

package/docs/components/basic/slider.md

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

package/docs/components/basic/space.md

@@ -0,0 +1,140 @@
+# Space 间距
+
+虽然我们拥有 Divider 组件，但很多时候我们需要不是一个被 Divider 组件 分割开的页面结构，因此我们会重复的使用很多的 Divider 组件，这在我们的开发效率上造成了一定的困扰。 **间距组件**就是为了解决这种困扰应运而生的。
+
+## 基础用法
+
+最基础的用法，通过这个组件来给组件之间提供统一的间距。
+
+通过间距组件来给多个组件之间提供间距
+
+:::preview
+
+demo-preview=../../examples/space/index.vue
+
+:::
+
+## 垂直布局
+
+使用 `direction` 来控制布局的方式, 背后实际上是利用了 `flex-direction` 来控制.
+
+我们也提供垂直布局方式。
+
+:::preview
+
+demo-preview=../../examples/space/vertical.vue
+
+:::
+
+## 控制间距的大小
+
+通过调整 `size` 的值来控制间距的大小
+
+你可以使用内置的尺寸 `small`、`default`、`large` 来设置大小，这些尺寸分别对应 `8px`、`12px`、`16px`。 默认的间距大小为 `small`，也就是 `8px`。
+
+您也可以通过自定义的 size 来控制大小， 参见下一个部分。
+
+:::preview
+
+demo-preview=../../examples/space/size.vue
+
+:::
+
+## 自定义 Size
+
+很多时候，内建的大小不满足设计师的要求，我们可以通过传入自己定义的大小 (数值类型) 来设置。
+
+:::preview
+
+demo-preview=../../examples/space/custom-size.vue
+
+:::
+
+## 自动换行
+
+在 **水平 (horizontal)** 模式下，通过使用 `wrap`（**布尔类型**）来控制自动换行行为。
+
+利用 `wrap` 属性控制换行
+
+:::preview
+
+demo-preview=../../examples/space/wrap.vue
+
+:::
+
+## 行间分隔符
+
+有时候，仅仅在行间加空白并不能满足我们的日常需求，此时分隔符 (spacer) 就可以发挥非常好的作用了。
+
+## 字母数字类型分隔符
+
+:::preview
+
+demo-preview=../../examples/space/spacer.vue
+
+:::
+
+## 对齐方式
+
+设置该值可以调整所有子节点在容器内的对齐方式，可设置的值与 align-items 一致。
+
+使用 `alignment` 属性来对齐
+
+:::preview
+
+demo-preview=../../examples/space/alignment.vue
+
+:::
+
+## 填充容器
+
+通过 `fill`**（布尔类型）**参数，您可以控制子节点是否自动填充容器。
+
+下面的例子中，当设置为 `fill` 时，子节点的宽度会自动适配容器的宽度。
+
+用 fill 属性让子节点自动填充容器
+
+:::preview
+
+demo-preview=../../examples/space/fill.vue
+
+:::
+
+也可以使用 `fillRatio` 参数，自定义填充的比例， 默认值为 `100`，代表基于父容器宽度的 ` 100%` 进行填充
+
+需要注意的是，水平布局和垂直布局的表现形式稍有不同，具体的效果可以查看下面的例子
+
+用 fillRatio 自定义填充比例
+
+:::preview
+
+demo-preview=../../examples/space/fill-ratio.vue
+
+:::
+
+## API
+
+### Attributes
+
+| 属性名        | 说明                  | 类型                                                                               | 默认值        |
+| ---------- | ------------------- | -------------------------------------------------------------------------------- | ---------- |
+| alignment  | 对齐的方式               | enum [align-items](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) | center     |
+| class      | className           | string / object / array                                                          | —          |
+| direction  | 排列的方向               | enum                                                                             | horizontal |
+| prefix-cls | 给 space-items 的类名前缀 | string                                                                           | —          |
+| style      | 额外样式                | string / object                                                                  | —          |
+| spacer     | 间隔符                 | string / number / VNode                                                          | —          |
+| size       | 间隔大小                | enum / number / array                                                            | small      |
+| wrap       | 设置是否自动折行            | boolean                                                                          | false      |
+| fill       | 子元素是否填充父容器          | boolean                                                                          | false      |
+| fill-ratio | 填充父容器的比例            | number                                                                           | 100        |
+
+### Slots
+
+| 名称      | 说明        |
+| ------- | --------- |
+| default | 需要添加间隔的元素 |
+
+## Owner
+
+Aric.Li@aldi.cn

package/docs/components/basic/steps.md

@@ -0,0 +1,60 @@
+# Steps 步骤条
+
+引导用户按照流程完成任务的分步导航条， 可根据实际应用场景设定步骤，步骤不得少于 2 步。
+
+## 基础用法
+
+简单的步骤条。
+
+设置 `active` 属性，接受一个 Number，表明步骤的 index，从 0 开始。 支持三种样式的步骤条，通过 `type` 属性设置，可选值为 `default`、`arrow` 和 `navigation`。
+
+
+:::preview
+
+demo-preview=../../examples/steps/index.vue
+
+:::
+
+## 导航类型的步骤条
+
+导航类型的步骤条支持点击跳转，需要配合 `v-model:navigate-active-index` 使用。点击已完成的步骤可以跳转到该步骤，但不能跳转到未完成的步骤。
+
+
+:::preview
+
+demo-preview=../../examples/steps/navigation.vue
+
+:::
+
+
+## Steps API
+
+### Steps Attributes
+
+| 属性名 | 说明 | 类型 | 默认值 |
+| ------ | ---- | -------- | ------ |
+| active | 设置当前激活步骤，接受一个 Number，表明步骤的 index，从 0 开始 | `string` / `number` | `0` |
+| type | 步骤条风格 | `'default' \| 'arrow' \| 'navigation'` | `'default'` |
+| navigate-active-index | 导航类型的步骤条当前导航索引（使用 v-model 绑定，仅在 type 为 'navigation' 时有效） | `number` | — |
+
+### Steps Slots
+
+| 插槽名 | 说明 |
+| ------ | ---- |
+| default | 自定义默认内容，用于放置 `m-step` 组件 |
+
+## Step API
+
+### Step Attributes
+
+| 属性名 | 说明 | 类型 | 默认值 |
+| ------ | ---- | -------- | ------ |
+| title | 标题 | `string` | — |
+| description | 描述 | `string` | `''` |
+
+### Step Slots
+
+| 插槽名 | 说明 |
+| ------ | ---- |
+| title | 自定义标题内容 |
+| description | 自定义描述内容 |