From 32632e796edbfa37767f625b5743d94e9de3f193 Mon Sep 17 00:00:00 2001 From: Justineo Date: Thu, 16 Sep 2021 19:23:58 +0800 Subject: [PATCH] docs: update docs Change-Id: I76d0f72679cd75085f5ffd42f641daa198cafe11 docs: update docs for alert/autocomplete/carousel, etc. Change-Id: Ib7507f4979024f53c127e4b64b88560b93999db7 fix: update for autocomplete filter Change-Id: Ie54556715fa52838aeb6caaa19b4f9a9f14b490f docs: add docs for calendar/transfer/cascader Change-Id: I655b3cb3d25dd0649de9ae7e224e7063a40dd079 fix: add more demos for input/textarea Change-Id: Iada527ca82643a435a4775110b332155512d62a7 docs: add docs for uploader,select,table, etc. Change-Id: Ib034fd5cc9d9a420d4e002956ae925175783c5f3 docs: adjust formatting and punc. docs: adjust docs for uploader, etc. Change-Id: If06c8c1102eafce43f5802a333676fc9e62cd474 docs: add docs for nav Change-Id: If56a653ec53f19239606128fd30cae80f8e10025 docs: improve anchor demos Change-Id: I6ac1c08cc8905924d0062def1f8921fe1f302f15 docs: refine wording and format docs: update docs for check-button-group desc Change-Id: Ica7d6d0692250f0be6bd330b1ad4cc41938afd46 --- one/docs/components/alert.md | 12 + one/docs/components/anchor.md | 10 +- one/docs/components/autocomplete.md | 25 +- one/docs/components/badge.md | 6 + one/docs/components/calendar.md | 24 + one/docs/components/carousel.md | 7 + one/docs/components/cascader.md | 20 + one/docs/components/check-button-group.md | 22 +- one/docs/components/checkbox-group.md | 10 +- one/docs/components/date-picker.md | 8 + one/docs/components/dropdown.md | 2 + one/docs/components/input.md | 12 + one/docs/components/nav.md | 119 ++++ one/docs/components/number-input.md | 9 + one/docs/components/pagination.md | 9 + one/docs/components/radio-button-group.md | 23 +- one/docs/components/radio-group.md | 10 +- one/docs/components/search-box.md | 2 + one/docs/components/select.md | 11 + one/docs/components/table.md | 16 + one/docs/components/textarea.md | 6 + one/docs/components/transfer.md | 6 + one/docs/components/uploader.md | 19 + one/docs/demo/alert/extra.vue | 33 + one/docs/demo/alert/title.vue | 36 ++ one/docs/demo/anchor/normal.vue | 109 ++++ one/docs/demo/anchor/offset.vue | 20 +- one/docs/demo/anchor/sticky.vue | 40 +- one/docs/demo/autocomplete/custom.vue | 72 +++ one/docs/demo/autocomplete/normal.vue | 1 + one/docs/demo/autocomplete/strict.vue | 50 ++ one/docs/demo/badge/corner-dot.vue | 43 ++ one/docs/demo/calendar/date-class.vue | 25 + one/docs/demo/calendar/disabled-date.vue | 27 + one/docs/demo/calendar/fill-month.vue | 31 + one/docs/demo/calendar/type.vue | 37 ++ one/docs/demo/carousel/indicator.vue | 4 +- one/docs/demo/carousel/ratio.vue | 57 ++ one/docs/demo/cascader/column-trigger.vue | 144 +++++ one/docs/demo/cascader/select-mode.vue | 144 +++++ one/docs/demo/cascader/value-display.vue | 144 +++++ one/docs/demo/check-button-group/desc.vue | 50 ++ one/docs/demo/check-button-group/simple.vue | 60 ++ one/docs/demo/check-button-group/stable.vue | 46 ++ one/docs/demo/checkbox-group/desc.vue | 50 ++ one/docs/demo/date-picker/disabled.vue | 45 ++ one/docs/demo/input/composition.vue | 31 + one/docs/demo/input/trim.vue | 33 + one/docs/demo/nav/card.vue | 87 +++ one/docs/demo/nav/more.vue | 95 +++ one/docs/demo/nav/size.vue | 95 +++ one/docs/demo/nav/slot.vue | 92 +++ one/docs/demo/number-input/decimal.vue | 28 + one/docs/demo/pagination/pages.vue | 55 ++ one/docs/demo/progress/default.vue | 3 +- one/docs/demo/radio-button-group/desc.vue | 50 ++ one/docs/demo/radio-button-group/simple.vue | 53 ++ one/docs/demo/radio-button-group/stable.vue | 46 ++ one/docs/demo/radio-group/desc.vue | 50 ++ one/docs/demo/select/selected.vue | 81 +++ one/docs/demo/table/filter.vue | 4 +- one/docs/demo/table/loading.vue | 93 +++ one/docs/demo/table/order.vue | 132 ++++ one/docs/demo/textarea/autoresize.vue | 26 + one/docs/demo/transfer/merge-checked.vue | 200 ++++++ one/docs/demo/uploader/controls.vue | 57 ++ one/docs/demo/uploader/custom.vue | 2 + one/docs/demo/uploader/entries.vue | 57 ++ one/docs/demo/uploader/file.vue | 6 +- one/docs/demo/uploader/image.vue | 6 +- one/docs/demo/uploader/media.vue | 6 +- one/docs/demo/uploader/sortable.vue | 36 ++ one/docs/demo/uploader/validate.vue | 6 +- one/docs/nav.json | 21 +- package-lock.json | 664 ++++++++++---------- 75 files changed, 3360 insertions(+), 411 deletions(-) create mode 100644 one/docs/components/nav.md create mode 100644 one/docs/demo/alert/extra.vue create mode 100644 one/docs/demo/alert/title.vue create mode 100644 one/docs/demo/anchor/normal.vue create mode 100644 one/docs/demo/autocomplete/custom.vue create mode 100644 one/docs/demo/autocomplete/strict.vue create mode 100644 one/docs/demo/badge/corner-dot.vue create mode 100644 one/docs/demo/calendar/date-class.vue create mode 100644 one/docs/demo/calendar/disabled-date.vue create mode 100644 one/docs/demo/calendar/fill-month.vue create mode 100644 one/docs/demo/calendar/type.vue create mode 100644 one/docs/demo/carousel/ratio.vue create mode 100644 one/docs/demo/cascader/column-trigger.vue create mode 100644 one/docs/demo/cascader/select-mode.vue create mode 100644 one/docs/demo/cascader/value-display.vue create mode 100644 one/docs/demo/check-button-group/desc.vue create mode 100644 one/docs/demo/check-button-group/simple.vue create mode 100644 one/docs/demo/check-button-group/stable.vue create mode 100644 one/docs/demo/checkbox-group/desc.vue create mode 100644 one/docs/demo/date-picker/disabled.vue create mode 100644 one/docs/demo/input/composition.vue create mode 100644 one/docs/demo/input/trim.vue create mode 100644 one/docs/demo/nav/card.vue create mode 100644 one/docs/demo/nav/more.vue create mode 100644 one/docs/demo/nav/size.vue create mode 100644 one/docs/demo/nav/slot.vue create mode 100644 one/docs/demo/number-input/decimal.vue create mode 100644 one/docs/demo/pagination/pages.vue create mode 100644 one/docs/demo/radio-button-group/desc.vue create mode 100644 one/docs/demo/radio-button-group/simple.vue create mode 100644 one/docs/demo/radio-button-group/stable.vue create mode 100644 one/docs/demo/radio-group/desc.vue create mode 100644 one/docs/demo/select/selected.vue create mode 100644 one/docs/demo/table/loading.vue create mode 100644 one/docs/demo/table/order.vue create mode 100644 one/docs/demo/textarea/autoresize.vue create mode 100644 one/docs/demo/transfer/merge-checked.vue create mode 100644 one/docs/demo/uploader/controls.vue create mode 100644 one/docs/demo/uploader/entries.vue create mode 100644 one/docs/demo/uploader/sortable.vue diff --git a/one/docs/components/alert.md b/one/docs/components/alert.md index e1df5c2..dd9d18f 100644 --- a/one/docs/components/alert.md +++ b/one/docs/components/alert.md @@ -14,6 +14,18 @@ [[ demo src="/demo/alert/multiple.vue" ]] +### 标题 + +设置 `title` 属性来指定消息标题。 + +[[ demo src="/demo/alert/title.vue" ]] + +### 额外内容 + +通过 `extra` 插槽来指定消息之后的额外内容区域。 + +[[ demo src="/demo/alert/extra.vue" ]] + ## API ### 属性 diff --git a/one/docs/components/anchor.md b/one/docs/components/anchor.md index 96cff06..4d96030 100644 --- a/one/docs/components/anchor.md +++ b/one/docs/components/anchor.md @@ -2,9 +2,15 @@ ## 示例 -### 容器与吸附 +### 普通锚点 -使用 [`container`](#props-container) 属性设置 `Anchor` 的容器,使用 [`sticky`](#props-sticky) 属性来控制是否在滚动出容器时进行吸附。 +使用 [`container`](#props-container) 属性设置发生滚动的容器,当 `Anchor` 组件不在容器中(也就不随容器滚动),此时可以不用设置 `sticky` 属性。 + +[[ demo src="/demo/anchor/normal.vue" ]] + +### 吸附锚点 + +当 `Anchor` 组件在容器中(随容器滚动),此时可设置 `sticky` 属性来控制组件在滚动出容器时进行吸附。 [[ demo src="/demo/anchor/sticky.vue" ]] diff --git a/one/docs/components/autocomplete.md b/one/docs/components/autocomplete.md index 56d1fd0..0e2c7f7 100644 --- a/one/docs/components/autocomplete.md +++ b/one/docs/components/autocomplete.md @@ -2,8 +2,30 @@ ## 示例 +### 触发建议的时机 + +设置 `suggest-trigger` 来指定触发建议的时机。 + [[ demo src="/demo/autocomplete/normal.vue" ]] +### 严格模式 + +设置 `strict` 属性来指定严格模式,若输入值没有完全匹配建议值,那么在失焦时会清空输入值。 + +[[ demo src="/demo/autocomplete/strict.vue" ]] + +### 自定义搜索逻辑 + +设置 `match` 属性来自定义自定义高亮逻辑。 + +设置 `filter` 属性来自定义搜索命中逻辑。 + +:::tip +`match` 用于高亮显示匹配文本的逻辑;而 `filter` 是控制是否命中。默认情况下 `filter` 会过滤掉未被 `match` 匹配的节点,且将包含非叶子节点。如希望搜索结果中都是叶子节点,可通过重写 `filter` 过滤掉非叶子节点。 +::: + +[[ demo src="/demo/autocomplete/custom.vue" ]] + ## API ### 属性 @@ -12,7 +34,8 @@ | -- | -- | -- | -- | | ``datasource`` | `Array=` | `[]` | [^datasource] | | ``value`` | `*` | - | [^prop-value] | -| ``match`` | `function(string | Object, string): boolean=` | - | 自定义搜索逻辑。 | +| ``match`` | `(item, keyword, { ancestors }) => boolean | [number, number] | Array<[number, number]>` | - | 支持自定义高亮逻辑,默认进行大小写不敏感的子串匹配。 | +| ``filter`` | `(item, keyword, { ancestors, offsets }) => boolean` | - | 支持自定义搜索命中逻辑。 | | ``strict`` | `boolean=` | `false` | 建议下拉面板关闭时,若输入值没有完全匹配建议值,那么会清空输入值。 | | ``suggest-trigger`` | `string | Array=` | `'input'` | 触发建议下拉面板的时机,可用值有:`'input'`、`'focus'`。 | | ``placeholder`` | `string=` | | 输入占位符。 | diff --git a/one/docs/components/badge.md b/one/docs/components/badge.md index 8c67de3..413ff63 100644 --- a/one/docs/components/badge.md +++ b/one/docs/components/badge.md @@ -14,6 +14,12 @@ [[ demo src="/demo/badge/number.vue" ]] +### 右上角圆点徽标 + +不提供徽标内容时,徽标将以圆点样式显示在右上角。 + +[[ demo src="/demo/badge/corner-dot.vue" ]] + ### 圆点徽标 不提供插槽内容时,徽标将以圆点样式显示。 diff --git a/one/docs/components/calendar.md b/one/docs/components/calendar.md index cea88b2..602988c 100644 --- a/one/docs/components/calendar.md +++ b/one/docs/components/calendar.md @@ -20,6 +20,30 @@ [[ demo src="/demo/calendar/multiple-ranges.vue" ]] +### 日历类型 + +设置 `type` 来指定日历的类型:年、月、日。 + +[[ demo src="/demo/calendar/type.vue" ]] + +### 显示非本月日期 + +设置 `fill-month` 来控制是否显示非本月日期。 + +[[ demo src="/demo/calendar/fill-month.vue" ]] + +### 禁用日期 + +设置 `disabled-date` 来自定义指定日期是否禁用。 + +[[ demo src="/demo/calendar/disabled-date.vue" ]] + +### 自定义日期的样式 + +设置 `date-class` 来自定义指定日期的 `class`。 + +[[ demo src="/demo/calendar/date-class.vue" ]] + ## API ### 属性 diff --git a/one/docs/components/carousel.md b/one/docs/components/carousel.md index ef21f6b..6e792af 100644 --- a/one/docs/components/carousel.md +++ b/one/docs/components/carousel.md @@ -42,6 +42,13 @@ [[ demo src="/demo/carousel/slides.vue" ]] + +### 轮播项纵横比 + +设置 `slide-aspect-ratio` 属性来指定每个轮播项的纵横比。 + +[[ demo src="/demo/carousel/ratio.vue" ]] + ## API ### 属性 diff --git a/one/docs/components/cascader.md b/one/docs/components/cascader.md index dd5b4c8..10d153b 100644 --- a/one/docs/components/cascader.md +++ b/one/docs/components/cascader.md @@ -27,6 +27,24 @@ [[ demo src="/demo/cascader/multiple.vue" ]] +### 选择模式 + +使用 `select-mode` 属性来控制在单选模式下哪些项目可以被选中。 + +[[ demo src="/demo/cascader/select-mode.vue" ]] + +### 子项展开时机 + +使用 `column-trigger` 属性来控制下拉面板中下级的展开时机。 + +[[ demo src="/demo/cascader/column-trigger.vue" ]] + +### 渲染选中值 + +使用 `value-display` 属性来控制选中值如何展示。 + +[[ demo src="/demo/cascader/value-display.vue" ]] + ## API ### 属性 @@ -52,6 +70,8 @@ | ``readonly`` | `boolean=` | `false` | 是否为只读状态。 | | ``overlay-class`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#props-overlay-class) 属性。 | | ``overlay-style`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#props-overlay-style) 属性。 | +| ``match`` | `(item, keyword, { ancestors }) => boolean | Array<[number, number]>` | - | 支持自定义高亮逻辑, 默认大小写不敏感,参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)。 | +| ``filter`` | `(item, keyword, { ancestors, offsets }) => boolean` | - | 支持自定义搜索命中逻辑,参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)。 | ^^^ui 预设样式。 diff --git a/one/docs/components/check-button-group.md b/one/docs/components/check-button-group.md index 03ee834..339388f 100644 --- a/one/docs/components/check-button-group.md +++ b/one/docs/components/check-button-group.md @@ -8,12 +8,30 @@ [[ demo src="/demo/check-button-group/default.vue" ]] +### 简单样式 + +设置 `ui` 属性值:`simple` 来指定简单样式。 + +[[ demo src="/demo/check-button-group/simple.vue" ]] + ### 单复选共存 可以使用 `exclusive` 选项与 `empty-value` 实现一些单复选共存的场景。 [[ demo src="/demo/check-button-group/exclusive.vue" ]] +### 额外描述 + +在数据源的项目中设置 `desc` 字段或者通过 `desc` 插槽来指定额外描述。额外描述会在悬浮时显示。 + +[[ demo src="/demo/check-button-group/desc.vue" ]] + +### 最小宽度 + +通过设置 `ui` 属性值 `stable` 来开启项目的最小宽度。 + +[[ demo src="/demo/check-button-group/stable.vue" ]] + ## API ### 属性 @@ -38,7 +56,7 @@ ^^^ ^^^items -复选按钮组数据源,项目类型为 `{label, value, disabled, exclusive, ...}`。 +复选按钮组数据源,项目类型为 `{ label, value, disabled, exclusive, desc, ... }`。 +++字段详情 | 名称 | 类型 | 描述 | @@ -47,6 +65,7 @@ | `value` | `*` | 选项对应的值。 | | `disabled` | `boolean=` | 选项是否为禁用。 | | `exclusive` | `boolean=` | 选项是否为排它项。当选项为排它项时,选中该项将取消选中其它所有选项。 | +| `desc` | `string` | 选项的额外描述信息。 | +++ ^^^ @@ -63,6 +82,7 @@ | 名称 | 描述 | | -- | -- | | ``item`` | [^slot-item] | +| ``desc`` | 按钮的额外描述信息,作用域参数同 `item` 插槽。 | ^^^slot-item 按钮内文本区域。 diff --git a/one/docs/components/checkbox-group.md b/one/docs/components/checkbox-group.md index b80ea5c..751783c 100644 --- a/one/docs/components/checkbox-group.md +++ b/one/docs/components/checkbox-group.md @@ -14,6 +14,12 @@ [[ demo src="/demo/checkbox-group/exclusive.vue" ]] +### 额外描述 + +在数据源的项目中设置 `desc` 字段或者通过 `desc` 插槽来指定额外描述。额外描述会在悬浮时显示。 + +[[ demo src="/demo/checkbox-group/desc.vue" ]] + ## API ### 属性 @@ -38,7 +44,7 @@ ^^^ ^^^items -复选框组数据源,项目类型为 `{label, value, disabled, exclusive, ...}`。 +复选框组数据源,项目类型为 `{ label, value, disabled, exclusive, desc, ... }`。 +++字段详情 | 名称 | 类型 | 描述 | @@ -47,6 +53,7 @@ | `value` | `*` | 选项对应的值。 | | `disabled` | `boolean=` | 选项是否为禁用。 | | `exclusive` | `boolean=` | 选项是否为排它项。 | +| `desc` | `string` | 选项的额外描述信息。 | +++ ^^^ @@ -63,6 +70,7 @@ | 名称 | 描述 | | -- | -- | | ``item`` | [^slot-item] | +| ``desc`` | 按钮的额外描述信息,作用域参数同 `item` 插槽。 | ^^^slot-item 选项描述文本区域。 diff --git a/one/docs/components/date-picker.md b/one/docs/components/date-picker.md index 4415cf9..09639ea 100644 --- a/one/docs/components/date-picker.md +++ b/one/docs/components/date-picker.md @@ -20,6 +20,14 @@ [[ demo src="/demo/date-picker/shortcuts.vue" ]] +### 禁用和只读 + +设置 `disabled` 属性可使组件处于禁用状态。 + +设置 `readonly` 属性可使组件处于只读状态。 + +[[ demo src="/demo/date-picker/disabled.vue" ]] + ## API ### 属性 diff --git a/one/docs/components/dropdown.md b/one/docs/components/dropdown.md index 8edee70..4acb2e2 100644 --- a/one/docs/components/dropdown.md +++ b/one/docs/components/dropdown.md @@ -57,6 +57,8 @@ | ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 | | ``overlay-class`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#props-overlay-class) 属性。 | | ``overlay-style`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#props-overlay-style) 属性。 | +| ``match`` | `(item, keyword, { ancestors }) => boolean | Array<[number, number]>` | - | 支持自定义高亮逻辑, 默认大小写不敏感,参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)。 | +| ``filter`` | `(item, keyword, { ancestors, offsets }) => boolean` | - | 支持自定义搜索命中逻辑,参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)。 | ^^^ui 预设样式。 diff --git a/one/docs/components/input.md b/one/docs/components/input.md index d8b3645..4a8f63a 100644 --- a/one/docs/components/input.md +++ b/one/docs/components/input.md @@ -20,6 +20,18 @@ [[ demo src="/demo/input/disabled.vue" ]] +### 感知输入法 + +设置 `composition` 来感知输入法输入过程中的值。 + +[[ demo src="/demo/input/composition.vue" ]] + +### 过滤首尾空白字符 + +设置 `trim` 来自动过滤用户输入的首尾空白字符。 + +[[ demo src="/demo/input/trim.vue" ]] + ## API ### 属性 diff --git a/one/docs/components/nav.md b/one/docs/components/nav.md new file mode 100644 index 0000000..325e958 --- /dev/null +++ b/one/docs/components/nav.md @@ -0,0 +1,119 @@ +# Nav 导航菜单 + +## 示例 + +### 尺寸 + +可选的尺寸 `ui` 属性值:`s`/`m`。 + +[[ demo src="/demo/nav/size.vue" ]] + +### 大卡样式 + +设置首层数据项属性 `position` 为 `card` 可使该数据项下拉展示成大卡样式。 + +[[ demo src="/demo/nav/card.vue" ]] + +### 自定义插槽 + +[[ demo src="/demo/nav/slot.vue" ]] + + +### 自适应宽度 + +自动根据实际渲染宽度来决定是否将多余的导航项目折叠起来。 + +[[ demo src="/demo/nav/more.vue" ]] + +## API + +### 属性 + +| 名称 | 类型 | 默认值 | 描述 | +| -- | -- | -- | -- | +| `ui` | `string=` | - | [^ui] | +| `items` | `Array=` | `[]` | [^items] | +| `active` | `string` | - | [^active] | +| `matches` | `function(Object, string): boolean` | - | [^matches] | + +^^^ui +预设样式。 + ++++枚举值 +| 值 | 描述 | +| -- | -- | +| `s` | 小尺寸样式。 | +| `m` | 中尺寸样式。 | ++++ +^^^ + +^^^active +当前激活节点,若该节点定义了 `name` 则就是该 `name` 值,否则该值是由 `to` 生成的路由路径([route.path](https://router.vuejs.org/zh/api/#%E8%B7%AF%E7%94%B1%E5%AF%B9%E8%B1%A1%E5%B1%9E%E6%80%A7))。 +^^^ + +^^^items +数据源数组,每个节点类型为 `{label, to, name, icon, disabled, children, ...}`。 + ++++字段详情 +| 名称 | 类型 | 描述 | +| -- | -- | -- | +| `label` | `string` | 节点的文字描述。 | +| `to` | `string | Object` | 节点的导航目的地。参考 [`Link`](./link) 组件的 [`to`](./link#props) 属性。 | +| `name` | `string` | 节点的唯一标识,`name` 和 `to` 二者至少有一个存在。 | +| `disabled` | `boolean=` | 节点是否被禁用。 | +| `position` | `string=` | 首层节点的下拉面板样式,设置成 `card` 则展示成大卡样式。 | +| `children` | `Array=` | 节点的子节点数组,数组项类型同 `items` 数组项。 | ++++ +^^^ + +^^^matches +当路由发生切换时,用来从 `items` 中找到激活的项目。 + +默认实现:项目路由路径和当前路由的路径相等 (===) 则认为该项目是激活的。 +^^^ + + +### 插槽 + +| 名称 | 描述 | +| -- | -- | +| `item` | [^item] | +| `item-label` | [^item-label] | + + +^^^item +每个节点的渲染插槽。 + +默认内容:渲染了 `icon` 插槽和 `item-label` 插槽。 + ++++作用域参数 +| 名称 | 类型 | 描述 | +| -- | -- | -- | +| `label` | `string` | 图标名称。 | +| `to` | `string | Object` | 节点的导航目的地。参考 [`Link`](./link) 组件的 [`to`](./link#props) 属性。 | +| `name` | `string` | 节点的唯一标识,`name` 和 `to` 二者至少有一个存在。 | +| `disabled` | `boolean=` | 节点是否被禁用。 | +| `children` | `Array=` | 节点的子节点数组,数组项类型同 `items` 数组项。 | ++++ +^^^ + +^^^item-label +节点的 `label` 插槽。 + +默认内容:渲染节点对应的 `Link`。 + +作用域参数参考 `item` 插槽。 +^^^ + +### 事件 + +| 名称 | 描述 | +| -- | -- | +| `activate` | 用户点击有 `to` 的节点触发,参数是激活节点的整个 `item` 数据。 | +| `click` | 用户点击节点时触发,参数是激活节点整个 `item` 数据。 | + +### 图标 +| 名称 | 描述 | +| -- | -- | +| `expand` | 展开。 | +| `more` | 更多。 | diff --git a/one/docs/components/number-input.md b/one/docs/components/number-input.md index d83a727..e048eec 100644 --- a/one/docs/components/number-input.md +++ b/one/docs/components/number-input.md @@ -20,6 +20,14 @@ [[ demo src="/demo/number-input/disabled.vue" ]] +### 精度位数和递增/递减 + +设置 `decimal-place` 来指定数值的小数精度位数。 + +设置 `step` 来指定每次递增/减的数值。 + +[[ demo src="/demo/number-input/decimal.vue" ]] + ## API ### 属性 @@ -35,6 +43,7 @@ | ``max`` | `number` | - | 允许的最大值。 | | ``min`` | `number` | - | 允许的最小值。 | | ``decimal-place`` | `number` | 0 | 数值的小数精度位数,默认精确到整数位,`-1` 表示不处理精度。 | +| ``step`` | `number` | 1 | 每次递增/递减的数值。 | ^^^ui 预设样式。 diff --git a/one/docs/components/pagination.md b/one/docs/components/pagination.md index 5f71ec5..704ae07 100644 --- a/one/docs/components/pagination.md +++ b/one/docs/components/pagination.md @@ -12,6 +12,15 @@ [[ demo src="/demo/pagination/goto.vue" ]] + +### 每页个数 + +使用 `page-size` 属性来指定当前每页的个数。 + +使用 `page-sizes` 属性来指定每页个数候选项。 + +[[ demo src="/demo/pagination/pages.vue" ]] + ## API ### 属性 diff --git a/one/docs/components/radio-button-group.md b/one/docs/components/radio-button-group.md index 2de519a..1d96d6b 100644 --- a/one/docs/components/radio-button-group.md +++ b/one/docs/components/radio-button-group.md @@ -8,6 +8,24 @@ [[ demo src="/demo/radio-button-group/default.vue" ]] +### 简单样式 + +设置 `ui` 属性值:`simple` 来指定简单样式。 + +[[ demo src="/demo/radio-button-group/simple.vue" ]] + +### 额外描述 + +在数据源的项目中设置 `desc` 字段或者通过 `desc` 插槽来指定额外描述。额外描述会在悬浮时显示。 + +[[ demo src="/demo/radio-button-group/desc.vue" ]] + +### 最小宽度 + +设置 `ui` 属性值:`simple` 来指定简单样式。 + +[[ demo src="/demo/radio-button-group/stable.vue" ]] + ## API ### 属性 @@ -31,7 +49,7 @@ ^^^ ^^^items -单选按钮组数据源,项目类型为 `{label, value, disabled, ...}`。 +单选按钮组数据源,项目类型为 `{ label, value, disabled, desc, ... }`。 +++字段详情 | 名称 | 类型 | 描述 | @@ -39,6 +57,7 @@ | `label` | `string` | 选项的文字说明。 | | `value` | `*` | 选项对应的值。 | | `disabled` | `boolean=` | 选项是否为禁用。 | +| `desc` | `string` | 选项的额外描述信息。 | +++ ^^^ @@ -55,6 +74,7 @@ | 名称 | 描述 | | -- | -- | | ``item`` | [^slot-item] | +| ``desc`` | 按钮的额外描述信息,作用域参数同 `item` 插槽。 | ^^^slot-item 按钮内文本区域。 @@ -68,6 +88,7 @@ | `value` | `string` | 选项值。 | | `index` | `number` | 选项在 `items` 中的序号。 | | `disabled` | `boolean=` | 选项是否禁用。 | +| `desc` | `string` | 选项的额外描述信息。 | +++ 另外,`items` 内数据项中除了上面描述的字段之外的其它字段也会自动通过 `v-bind` 进行绑定到作用域参数上。 diff --git a/one/docs/components/radio-group.md b/one/docs/components/radio-group.md index e96b55f..e462fcd 100644 --- a/one/docs/components/radio-group.md +++ b/one/docs/components/radio-group.md @@ -8,6 +8,12 @@ [[ demo src="/demo/radio-group/default.vue" ]] +### 额外描述 + +在数据源的项目中设置 `desc` 字段或者通过 `desc` 插槽来指定额外描述。额外描述会在悬浮时显示。 + +[[ demo src="/demo/radio-group/desc.vue" ]] + ## API ### 属性 @@ -31,7 +37,7 @@ ^^^ ^^^items -单选框组数据源,项目类型为 `{label, value, disabled, ...}`。 +单选框组数据源,项目类型为 `{ label, value, disabled, desc, ... }`。 +++字段详情 | 名称 | 类型 | 描述 | @@ -39,6 +45,7 @@ | `label` | `string` | 选项的文字说明。 | | `value` | `*` | 选项对应的值。 | | `disabled` | `boolean=` | 选项是否为禁用。 | +| `desc` | `string` | 选项的额外描述信息。 | +++ ^^^ @@ -55,6 +62,7 @@ | 名称 | 描述 | | -- | -- | | ``item`` | [^slot-item] | +| ``desc`` | 按钮的额外描述信息,作用域参数同 `item` 插槽。 | ^^^slot-item 选项描述文本区域。 diff --git a/one/docs/components/search-box.md b/one/docs/components/search-box.md index 8971581..dbc7b31 100644 --- a/one/docs/components/search-box.md +++ b/one/docs/components/search-box.md @@ -41,6 +41,8 @@ | ``expanded`` | `boolean=` | `false` | [^expanded] | | ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 | | ``readonly`` | `boolean=` | `false` | 是否为只读状态。 | +| ``match`` | `(item, keyword, { ancestors }) => boolean | Array<[number, number]>` | - | 支持自定义高亮逻辑, 默认大小写不敏感,参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)。 | +| ``filter`` | `(item, keyword, { ancestors, offsets }) => boolean` | - | 支持自定义搜索命中逻辑,参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)。 | ^^^ui 按钮预设样式。 diff --git a/one/docs/components/select.md b/one/docs/components/select.md index d9998c5..a36dfb7 100644 --- a/one/docs/components/select.md +++ b/one/docs/components/select.md @@ -30,6 +30,15 @@ [[ demo src="/demo/select/multiple.vue" ]] + +### 自定义已选项展示 + +使用 `label` 插槽来自定义**下拉关闭时**已选项如何展示。 + +使用 `select` 插槽来自定义已选项如何展示,和下拉是否关闭无关。 + +[[ demo src="/demo/select/selected.vue" ]] + ## API ### 属性 @@ -50,6 +59,8 @@ | ``readonly`` | `boolean=` | `false` | 是否为只读状态。 | | ``overlay-class`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#props-overlay-class) 属性。 | | ``overlay-style`` | `string | Array | Object=` | - | 参考 [`Overlay`](./overlay) 组件的 [`overlay-style`](./overlay#props-overlay-style) 属性。 | +| ``match`` | `(item, keyword, { ancestors }) => boolean | Array<[number, number]>` | - | 支持自定义高亮逻辑, 默认大小写不敏感,参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)。 | +| ``filter`` | `(item, keyword, { ancestors, offsets }) => boolean` | - | 支持自定义搜索命中逻辑,参考 [`Autocomplete`](./Autocomplete#自定义搜索逻辑)。 | ^^^ui 预设样式。 diff --git a/one/docs/components/table.md b/one/docs/components/table.md index 04e7001..9b87d6b 100644 --- a/one/docs/components/table.md +++ b/one/docs/components/table.md @@ -48,6 +48,22 @@ [[ demo src="/demo/table/desc.vue" ]] +### 排序 + +使用 `order` 属性和 `order-by` 属性来指定表头上的排序状态。 + +监听 `sort` 事件来处理排序状态的变化。 + +设置 `allowed-orders` 属性来自定义允许的排序状态。 + +[[ demo src="/demo/table/order.vue" ]] + +### 加载状态 + +使用 `loading` 属性来指定表格处于加载状态。 + +[[ demo src="/demo/table/loading.vue" ]] + ## API ### 属性 diff --git a/one/docs/components/textarea.md b/one/docs/components/textarea.md index 73e1faf..835db42 100644 --- a/one/docs/components/textarea.md +++ b/one/docs/components/textarea.md @@ -20,6 +20,12 @@ [[ demo src="/demo/textarea/disabled.vue" ]] +### 自动扩展 + +设置 `autoresize` 来使文本域处于自动扩展状态。 + +[[ demo src="/demo/textarea/autoresize.vue" ]] + ## API ### 属性 diff --git a/one/docs/components/transfer.md b/one/docs/components/transfer.md index befeb94..7f66d91 100644 --- a/one/docs/components/transfer.md +++ b/one/docs/components/transfer.md @@ -20,6 +20,12 @@ [[ demo src="/demo/transfer/flat.vue" ]] +### 选中值的合并模式 + +设置 `merge-checked` 来指定选中值的合并模式。 + +[[ demo src="/demo/transfer/merge-checked.vue" ]] + ## API ### 属性 diff --git a/one/docs/components/uploader.md b/one/docs/components/uploader.md index 24deb28..a4c649a 100644 --- a/one/docs/components/uploader.md +++ b/one/docs/components/uploader.md @@ -32,6 +32,25 @@ [[ demo src="/demo/uploader/custom.vue" ]] +### 拖拽排序 + +设置 `sortable` 属性来指定上传项目之间可以拖拽排序。 + +[[ demo src="/demo/uploader/sortable.vue" ]] + +### 已上传项自定义操作 + +设置 `controls` 属性来指定悬浮到每个上传项时的操作选项。 + +[[ demo src="/demo/uploader/controls.vue" ]] + +### 上传入口自定义操作 + +设置 `entries` 属性来指定悬浮到继续上传项目时的操作选项。 + +[[ demo src="/demo/uploader/entries.vue" ]] + + ## API ### 属性 diff --git a/one/docs/demo/alert/extra.vue b/one/docs/demo/alert/extra.vue new file mode 100644 index 0000000..3938a86 --- /dev/null +++ b/one/docs/demo/alert/extra.vue @@ -0,0 +1,33 @@ + + + + + diff --git a/one/docs/demo/alert/title.vue b/one/docs/demo/alert/title.vue new file mode 100644 index 0000000..3ab5239 --- /dev/null +++ b/one/docs/demo/alert/title.vue @@ -0,0 +1,36 @@ + + + + + + + +可将消息标题写在 `title` 插槽中,也可以通过 `title` 属性进行指定。 + diff --git a/one/docs/demo/anchor/normal.vue b/one/docs/demo/anchor/normal.vue new file mode 100644 index 0000000..1a83306 --- /dev/null +++ b/one/docs/demo/anchor/normal.vue @@ -0,0 +1,109 @@ + + + + + + + +虚线框标记容器,实线标记锚点项顶部,当二者重合触发激活。 + diff --git a/one/docs/demo/anchor/offset.vue b/one/docs/demo/anchor/offset.vue index 3ee9c86..a1493df 100644 --- a/one/docs/demo/anchor/offset.vue +++ b/one/docs/demo/anchor/offset.vue @@ -39,7 +39,7 @@ export default { coffees: [ { label: 'Infused', - value: '#infused2', + value: '#infused1', children: [ { label: 'Breadcrumb', @@ -49,7 +49,7 @@ export default { }, { label: 'Boiled', - value: '#boiled2', + value: '#boiled1', children: [ { label: 'Button', @@ -59,11 +59,11 @@ export default { }, { label: 'Espresso', - value: '#espresso2' + value: '#espresso1' }, { label: 'Milk coffee', - value: '#milk-coffee2' + value: '#milk-coffee1' } ] } @@ -83,7 +83,7 @@ export default { border-top: 1px solid red; &::after { - content: "targetOffset: 20px"; + content: "targetOffset(切换于此)"; position: absolute; right: 0; bottom: 0; @@ -97,7 +97,7 @@ export default { left: 250px; &::after { - content: "stickyOffset: 30px"; + content: "stickyOffset(吸附于此)"; } } @@ -116,7 +116,7 @@ export default { .block { white-space: nowrap; - border-top: 1px solid #ccc; + border-top: 1px solid #000; width: 100px; height: 150px; flex: none; @@ -136,5 +136,9 @@ export default { -虚线框标记容器。 +虚线框标记容器,黑实线标记锚点项顶部。 + +当黑实线和 `tagetOffset` 线重合触发激活。 + +`Anchor` 吸附在 `stickyOffset` 线处。 diff --git a/one/docs/demo/anchor/sticky.vue b/one/docs/demo/anchor/sticky.vue index ee7bd80..7ad02c0 100644 --- a/one/docs/demo/anchor/sticky.vue +++ b/one/docs/demo/anchor/sticky.vue @@ -13,17 +13,7 @@ > {{ i.label }} - -
-

普通锚点

- -
-

吸附锚点

-虚线框标记容器。 +虚线框标记容器,实线标记锚点项顶部,当二者重合触发激活。 diff --git a/one/docs/demo/autocomplete/custom.vue b/one/docs/demo/autocomplete/custom.vue new file mode 100644 index 0000000..549046c --- /dev/null +++ b/one/docs/demo/autocomplete/custom.vue @@ -0,0 +1,72 @@ + + + + + diff --git a/one/docs/demo/autocomplete/normal.vue b/one/docs/demo/autocomplete/normal.vue index 029d82d..203555f 100644 --- a/one/docs/demo/autocomplete/normal.vue +++ b/one/docs/demo/autocomplete/normal.vue @@ -106,6 +106,7 @@ export default { diff --git a/one/docs/demo/badge/corner-dot.vue b/one/docs/demo/badge/corner-dot.vue new file mode 100644 index 0000000..1739340 --- /dev/null +++ b/one/docs/demo/badge/corner-dot.vue @@ -0,0 +1,43 @@ + + + + + diff --git a/one/docs/demo/calendar/date-class.vue b/one/docs/demo/calendar/date-class.vue new file mode 100644 index 0000000..3ad4e9a --- /dev/null +++ b/one/docs/demo/calendar/date-class.vue @@ -0,0 +1,25 @@ + + + + + diff --git a/one/docs/demo/calendar/disabled-date.vue b/one/docs/demo/calendar/disabled-date.vue new file mode 100644 index 0000000..5bc3a4b --- /dev/null +++ b/one/docs/demo/calendar/disabled-date.vue @@ -0,0 +1,27 @@ + + + diff --git a/one/docs/demo/calendar/fill-month.vue b/one/docs/demo/calendar/fill-month.vue new file mode 100644 index 0000000..e3b8ca9 --- /dev/null +++ b/one/docs/demo/calendar/fill-month.vue @@ -0,0 +1,31 @@ + + + + + diff --git a/one/docs/demo/calendar/type.vue b/one/docs/demo/calendar/type.vue new file mode 100644 index 0000000..98fdb9c --- /dev/null +++ b/one/docs/demo/calendar/type.vue @@ -0,0 +1,37 @@ + + + + + diff --git a/one/docs/demo/carousel/indicator.vue b/one/docs/demo/carousel/indicator.vue index b549fe0..fad162d 100644 --- a/one/docs/demo/carousel/indicator.vue +++ b/one/docs/demo/carousel/indicator.vue @@ -11,7 +11,7 @@ v-model="indicatorPosition" :items="positions" /> -

Indicator alignment

+

Indicator align

import { Carousel, RadioGroup } from 'veui' -// TODO update alignment - export default { components: { 'veui-carousel': Carousel, diff --git a/one/docs/demo/carousel/ratio.vue b/one/docs/demo/carousel/ratio.vue new file mode 100644 index 0000000..c471295 --- /dev/null +++ b/one/docs/demo/carousel/ratio.vue @@ -0,0 +1,57 @@ + + + + + diff --git a/one/docs/demo/cascader/column-trigger.vue b/one/docs/demo/cascader/column-trigger.vue new file mode 100644 index 0000000..e856508 --- /dev/null +++ b/one/docs/demo/cascader/column-trigger.vue @@ -0,0 +1,144 @@ + + + + + diff --git a/one/docs/demo/cascader/select-mode.vue b/one/docs/demo/cascader/select-mode.vue new file mode 100644 index 0000000..682558b --- /dev/null +++ b/one/docs/demo/cascader/select-mode.vue @@ -0,0 +1,144 @@ + + + + + diff --git a/one/docs/demo/cascader/value-display.vue b/one/docs/demo/cascader/value-display.vue new file mode 100644 index 0000000..1001008 --- /dev/null +++ b/one/docs/demo/cascader/value-display.vue @@ -0,0 +1,144 @@ + + + + + diff --git a/one/docs/demo/check-button-group/desc.vue b/one/docs/demo/check-button-group/desc.vue new file mode 100644 index 0000000..9d3a6b4 --- /dev/null +++ b/one/docs/demo/check-button-group/desc.vue @@ -0,0 +1,50 @@ + + + + + diff --git a/one/docs/demo/check-button-group/simple.vue b/one/docs/demo/check-button-group/simple.vue new file mode 100644 index 0000000..3693791 --- /dev/null +++ b/one/docs/demo/check-button-group/simple.vue @@ -0,0 +1,60 @@ + + + + + diff --git a/one/docs/demo/check-button-group/stable.vue b/one/docs/demo/check-button-group/stable.vue new file mode 100644 index 0000000..a176869 --- /dev/null +++ b/one/docs/demo/check-button-group/stable.vue @@ -0,0 +1,46 @@ + + + + + diff --git a/one/docs/demo/checkbox-group/desc.vue b/one/docs/demo/checkbox-group/desc.vue new file mode 100644 index 0000000..e3a84cb --- /dev/null +++ b/one/docs/demo/checkbox-group/desc.vue @@ -0,0 +1,50 @@ + + + + + diff --git a/one/docs/demo/date-picker/disabled.vue b/one/docs/demo/date-picker/disabled.vue new file mode 100644 index 0000000..7b8337a --- /dev/null +++ b/one/docs/demo/date-picker/disabled.vue @@ -0,0 +1,45 @@ + + + + + diff --git a/one/docs/demo/input/composition.vue b/one/docs/demo/input/composition.vue new file mode 100644 index 0000000..3d0cf22 --- /dev/null +++ b/one/docs/demo/input/composition.vue @@ -0,0 +1,31 @@ + + + diff --git a/one/docs/demo/input/trim.vue b/one/docs/demo/input/trim.vue new file mode 100644 index 0000000..23703f8 --- /dev/null +++ b/one/docs/demo/input/trim.vue @@ -0,0 +1,33 @@ + + + + + diff --git a/one/docs/demo/nav/card.vue b/one/docs/demo/nav/card.vue new file mode 100644 index 0000000..90d3187 --- /dev/null +++ b/one/docs/demo/nav/card.vue @@ -0,0 +1,87 @@ + + + diff --git a/one/docs/demo/nav/more.vue b/one/docs/demo/nav/more.vue new file mode 100644 index 0000000..becd9d7 --- /dev/null +++ b/one/docs/demo/nav/more.vue @@ -0,0 +1,95 @@ + + + + + diff --git a/one/docs/demo/nav/size.vue b/one/docs/demo/nav/size.vue new file mode 100644 index 0000000..232037a --- /dev/null +++ b/one/docs/demo/nav/size.vue @@ -0,0 +1,95 @@ + + + diff --git a/one/docs/demo/nav/slot.vue b/one/docs/demo/nav/slot.vue new file mode 100644 index 0000000..a40975b --- /dev/null +++ b/one/docs/demo/nav/slot.vue @@ -0,0 +1,92 @@ + + + diff --git a/one/docs/demo/number-input/decimal.vue b/one/docs/demo/number-input/decimal.vue new file mode 100644 index 0000000..fb5d0fd --- /dev/null +++ b/one/docs/demo/number-input/decimal.vue @@ -0,0 +1,28 @@ + + + diff --git a/one/docs/demo/pagination/pages.vue b/one/docs/demo/pagination/pages.vue new file mode 100644 index 0000000..d01c525 --- /dev/null +++ b/one/docs/demo/pagination/pages.vue @@ -0,0 +1,55 @@ + + + + + diff --git a/one/docs/demo/progress/default.vue b/one/docs/demo/progress/default.vue index fff3a5c..74bb361 100644 --- a/one/docs/demo/progress/default.vue +++ b/one/docs/demo/progress/default.vue @@ -4,6 +4,7 @@
@@ -59,7 +60,7 @@ export default { type: 'bar', value: 66.6, desc: true, - autoSucceed: true, + autoSucceed: 200, indeterminate: false } } diff --git a/one/docs/demo/radio-button-group/desc.vue b/one/docs/demo/radio-button-group/desc.vue new file mode 100644 index 0000000..7887a14 --- /dev/null +++ b/one/docs/demo/radio-button-group/desc.vue @@ -0,0 +1,50 @@ + + + + + diff --git a/one/docs/demo/radio-button-group/simple.vue b/one/docs/demo/radio-button-group/simple.vue new file mode 100644 index 0000000..7b2a9c8 --- /dev/null +++ b/one/docs/demo/radio-button-group/simple.vue @@ -0,0 +1,53 @@ + + + + + diff --git a/one/docs/demo/radio-button-group/stable.vue b/one/docs/demo/radio-button-group/stable.vue new file mode 100644 index 0000000..8d6f3fe --- /dev/null +++ b/one/docs/demo/radio-button-group/stable.vue @@ -0,0 +1,46 @@ + + + + + diff --git a/one/docs/demo/radio-group/desc.vue b/one/docs/demo/radio-group/desc.vue new file mode 100644 index 0000000..a183656 --- /dev/null +++ b/one/docs/demo/radio-group/desc.vue @@ -0,0 +1,50 @@ + + + + + diff --git a/one/docs/demo/select/selected.vue b/one/docs/demo/select/selected.vue new file mode 100644 index 0000000..587597b --- /dev/null +++ b/one/docs/demo/select/selected.vue @@ -0,0 +1,81 @@ + + + + + diff --git a/one/docs/demo/table/filter.vue b/one/docs/demo/table/filter.vue index fb17e1c..ef07f1a 100644 --- a/one/docs/demo/table/filter.vue +++ b/one/docs/demo/table/filter.vue @@ -25,7 +25,7 @@ title="Bid" width="160" align="right" - :filter-value="filtered" + :filter-value="filtered || null" >