diff --git a/one/docs/components/anchor.md b/one/docs/components/anchor.md index 3fee1f2..20b6583 100644 --- a/one/docs/components/anchor.md +++ b/one/docs/components/anchor.md @@ -31,8 +31,8 @@ | ``items`` | `Array<{value, label, children}>` | `[]` | [^items] | | ``sticky`` | `boolean=` | `false` | 是否有吸附效果。 | | ``container`` | `string | HTMLElement | Window=` | - | `Anchor` 吸附与判断锚点激活所参考的容器。 | -| ``target-offset`` | `string | number=` | `0` | 当某个锚点处于到容器的 `target-offset` 位置,那么对应的锚点链接处于激活状态。 | -| ``sticky-offset`` | `string | number=` | `0` | 对于 sticky `Anchor` 而言,当容器滚动到 `sticky-offset` 位置,那么该 `Anchor` 开始吸附。 | +| ``target-offset`` | `string | number=` | `0` | 当某个锚点处于到容器的 `target-offset` 位置,那么对应的锚点链接处于激活状态。数值类型值为 `px` 值,也可以传入如 `'10%'` 的百分比字符串,将基于 `container` 对应容器的高度比例进行计算。 | +| ``sticky-offset`` | `string | number=` | `0` | 对于 sticky `Anchor` 而言,当容器滚动到 `sticky-offset` 位置,那么该 `Anchor` 开始吸附。不同值类型含义同 [`target-offset`](#props-target-offset) 属性。 | ^^^items 数据源数组,每个项目类型为 `{label, value, children, ...}`。 diff --git a/one/docs/components/autocomplete.md b/one/docs/components/autocomplete.md index f6ef54b..d9085fa 100644 --- a/one/docs/components/autocomplete.md +++ b/one/docs/components/autocomplete.md @@ -32,17 +32,21 @@ | -- | -- | -- | -- | | ``datasource`` | `Array=` | `[]` | [^datasource] | | ``value`` | `*` | - | [^prop-value] | -| ``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=` | | 输入占位符。 | -| ``select-on-focus`` | `boolean=` | `false` | 聚焦时是否自动选中输入框文本。 | -| ``composition`` | `boolean=` | `false` | 是否感知输入法输入过程的值。 | -| ``expanded`` | `boolean=` | `false` | [^expanded] | -| ``clearable`` | `boolean=` | `false` | 是否显示清除按钮。 | | ``disabled`` | `boolean=` | `false` | 是否为禁用状态。 | | ``readonly`` | `boolean=` | `false` | 是否为只读状态。 | +| ``match`` | `(item, keyword, { ancestors }) => boolean | [number, number] | Array<[number, number]>` | - | 支持自定义高亮逻辑,默认进行大小写不敏感的子串匹配。 | +| ``filter`` | `(item, keyword, { ancestors, offsets }) => boolean` | - | 支持自定义搜索命中逻辑。 | +| ``suggest-trigger`` | `string | Array=` | `'input'` | 触发建议下拉面板的时机,可用值有:`'input'`、`'focus'`。 | +| ``expanded`` | `boolean=` | `false` | [^expanded] | +| ``placeholder`` | `string=` | - | 输入占位符。 | +| ``clearable`` | `boolean=` | `false` | 是否显示清除按钮。 | +| ``composition`` | `boolean=` | `false` | 是否感知输入法输入过程的值。 | +| ``select-on-focus`` | `boolean=` | `false` | 聚焦时是否自动选中输入框文本。 | +| ``maxlength`` | `number=` | - | 输入字符串的长度限制。 | +| ``strict`` | `boolean=` | `false` | 输入字符串到达长度限制以后是否禁止继续输入。 | +| ``get-length`` | `function(string): number=` | 自定义的字符长度计算函数。 | +| ``trim`` | `boolean | string=` | `false` | [^trim] | +| ``autofocus`` | `boolean=` | `false` | 是否自动获取焦点。 | ^^^datasource 数据源数组,项目为 `Object` 时字段为 `{label, value, children, ...}`。 @@ -72,6 +76,18 @@ 建议面板是否展开(如果 `suggestions` 中没有待选项,则即使为 `true` 时面板也会关闭)。 ^^^ +^^^trim +是否移除前后空格。当为 `true` 时,会移除前后空格,当为 `false` 时,不移除前后空格。设置为字符串时,按指定方式进行移除。 + ++++枚举值 +| 值 | 描述 | +| -- | -- | +| `both` | 移除两端空格。等同于 `true` 时的行为。 | +| `start` | 移除开始空格。 | +| `end` | 移除末尾空格。 | ++++ +^^^ + ### 插槽 | 名称 | 描述 | @@ -109,7 +125,7 @@ | 名称 | 描述 | | -- | -- | | ``input`` | [^event-input] | -| ``suggest`` | 采纳建议时触发,参数是当前值。 | +| ``select`` | 采纳建议时触发,参数是当前值。 | | ``toggle`` | 提示面板展开状态切换时触发,回调参数为 `(expanded: boolean)`。`expanded` 表示操作将触发提示面板展开还是收起。 | | ``clear`` | 清除当前值时触发。 | diff --git a/one/docs/components/column.md b/one/docs/components/column.md index 92b80bd..fee2daa 100644 --- a/one/docs/components/column.md +++ b/one/docs/components/column.md @@ -26,6 +26,7 @@ | ``filter-options`` | `Array` | - | 筛选选项列表,项目的类型为 `{label, value, options, disabled, ...}`,可参考 [`Select`](./select) 组件的 [`options`](./select#props-options) 属性。 | | ``filter-title`` | `string=` | - | 筛选下拉的标题。 | | ``allowed-orders`` | `Array` | `[false, 'desc', 'asc']` | [^allowed-orders] | +| ``tooltip`` | `boolean | ((item: Object) => string)` | - | 是否当内容溢出时自动显示悬浮提示。默认显示所属 `Table` 组件 [`data`](./table#props-data) 属性数据项中 [`field`](#props-field) 属性对应的字段值。传入函数时,`item` 参数为整个 data 数据项,返回的字符串将作为提示内容展示。 | ^^^sortable 本列是否支持排序。 diff --git a/one/docs/components/pagination.md b/one/docs/components/pagination.md index 1eded77..96761b4 100644 --- a/one/docs/components/pagination.md +++ b/one/docs/components/pagination.md @@ -6,13 +6,6 @@ [[ demo src="/demo/pagination/size.vue" ]] -### 跳转到指定页 - -使用 [`goto`](#props-goto) 属性开启跳转到指定页的功能。 - -[[ demo src="/demo/pagination/goto.vue" ]] - - ### 每页个数 使用 [`page-size`](#props-page-size) 属性来指定当前每页的个数。 @@ -21,6 +14,12 @@ [[ demo src="/demo/pagination/pages.vue" ]] +### 可选部分 + +使用 [`show-total`](#props-show-total) / [`show-page-size`](#props-show-page-size) / [`show-goto`](#props-show-goto) 属性来分别控制是否显示项目总数/每页项目数选择器/跳转到指定页。 + +[[ demo src="/demo/pagination/parts.vue" ]] + ## API ### 属性 @@ -29,12 +28,14 @@ | -- | -- | -- | -- | | ``ui`` | `string=` | - | [^ui] | | ``page`` | `number` | `1` | 当前页码(从 `1` 开始)。 | -| ``total`` | `number` | - | 总页数。 | +| ``total`` | `number` | - | 项目总数。 | | ``to`` | `string | Object` | `''` | [^to] | | ``native`` | `boolean` | `false` | 原生链接跳转。 | | ``page-size`` | `number` | `pagination.pageSize` | [^page-size] | -| ``page-sizes`` | `Array` | `pagination.pageSizes` | 每页个数候选项。 | -| ``goto`` | `boolean` | `false` | 是否显示直接跳转到页码。 | +| ``page-sizes`` | `Array` | `pagination.pageSizes` | 每页个数候选项。 | +| ``show-goto`` | `boolean=` | `false` | 是否显示直接跳转到页码。 | +| ``show-total`` | `boolean=` | `false` | 是否显示项目总数。 | +| ``show-page-size`` | `boolean=` | `false` | 是否显示每页项目数选择器。 | ^^^ui 预设样式。 @@ -64,7 +65,7 @@ | 名称 | 描述 | | -- | -- | -| ``pagesizechange`` | `page-size` 改变时触发,回调参数为 `(size: number)`。`size` 为新的 `page-size` 值。 | +| ``pagesizechange`` | 每页显示项目被切换时触发,回调参数为 `(size: number)`。`size` 为新的每页显示项目数。 | | ``redirect`` | 链接跳转时触发,回调参数为 `(page: number, event: Object)`。`page` 为要跳转的目标页码。`event` 为原生的事件对象,在 `native` 为 `true` 时,调用 `event.preventDefault` 可阻止跳转。 | ### 全局配置 diff --git a/one/docs/components/table.md b/one/docs/components/table.md index 217da6e..de74727 100644 --- a/one/docs/components/table.md +++ b/one/docs/components/table.md @@ -12,7 +12,7 @@ [[ demo src="/demo/table/basic.vue" ]] -### 高级 +### 选择模式与排序 允许自定义唯一键、设定选择模式以及进行排序。 @@ -24,7 +24,7 @@ [[ demo src="/demo/table/filter.vue" ]] -### 内部滚动模式 +### 内部滚动 允许启用内部滚动模式,以达到固定表头表底的效果。 @@ -44,7 +44,7 @@ ### 表头描述 -使用 [`desc`](./column#props-desc) 属性或 [`desc`](./column#slots-desc) 插槽来为表头增加描述信息。 +使用 `Column` 组件的 [`desc`](./column#props-desc) 属性或 [`desc`](./column#slots-desc) 插槽来为表头增加描述信息。 [[ demo src="/demo/table/desc.vue" ]] @@ -64,6 +64,12 @@ [[ demo src="/demo/table/loading.vue" ]] +### 截断提示 + +使用 `Column` 组件的 [`tooltip`](./column#props-tooltip) 属性来指定在内容截断时显示悬浮提示。 + +[[ demo src="/demo/table/tooltip.vue" ]] + ## API ### 属性 diff --git a/one/docs/demo/directives/drag/sort-x.vue b/one/docs/demo/directives/drag/sort-x.vue index 3cbe2e0..9cba92f 100644 --- a/one/docs/demo/directives/drag/sort-x.vue +++ b/one/docs/demo/directives/drag/sort-x.vue @@ -19,7 +19,6 @@ {{ item }} - @@ -67,3 +66,7 @@ export default { transition: transform 200ms ease; } + + +可以通过 `v-drag.sort` 或 `v-drag="{ type: 'sort', ... }"` 来实现拖拽排序。 + diff --git a/one/docs/demo/directives/tooltip.vue b/one/docs/demo/directives/tooltip/default.vue similarity index 100% rename from one/docs/demo/directives/tooltip.vue rename to one/docs/demo/directives/tooltip/default.vue diff --git a/one/docs/demo/directives/tooltip/overflow.vue b/one/docs/demo/directives/tooltip/overflow.vue new file mode 100644 index 0000000..d068503 --- /dev/null +++ b/one/docs/demo/directives/tooltip/overflow.vue @@ -0,0 +1,47 @@ + + + + + diff --git a/one/docs/demo/pagination/goto.vue b/one/docs/demo/pagination/goto.vue deleted file mode 100644 index 03f1ae6..0000000 --- a/one/docs/demo/pagination/goto.vue +++ /dev/null @@ -1,37 +0,0 @@ - - - - - diff --git a/one/docs/demo/pagination/parts.vue b/one/docs/demo/pagination/parts.vue new file mode 100644 index 0000000..d8cda57 --- /dev/null +++ b/one/docs/demo/pagination/parts.vue @@ -0,0 +1,60 @@ + + + + + diff --git a/one/docs/demo/table/loading.vue b/one/docs/demo/table/loading.vue index d4bfe95..4357103 100644 --- a/one/docs/demo/table/loading.vue +++ b/one/docs/demo/table/loading.vue @@ -1,34 +1,36 @@ diff --git a/one/docs/demo/table/tooltip.vue b/one/docs/demo/table/tooltip.vue new file mode 100644 index 0000000..2c5b098 --- /dev/null +++ b/one/docs/demo/table/tooltip.vue @@ -0,0 +1,64 @@ + + + diff --git a/one/docs/directives/v-drag.md b/one/docs/directives/v-drag.md index eddbf77..703b1c4 100644 --- a/one/docs/directives/v-drag.md +++ b/one/docs/directives/v-drag.md @@ -147,11 +147,6 @@
``` - -## 拖拽排序(v-drag.sort) - -可以通过 `v-drag.sort` 或 `v-drag="{ type: 'sort', ... }"` 来实现拖拽排序。 - ## 扩展 可以通过继承 `BaseHandler` 扩展 `v-drag` 指令: diff --git a/one/docs/directives/v-tooltip.md b/one/docs/directives/v-tooltip.md index c3cc95a..de718b0 100644 --- a/one/docs/directives/v-tooltip.md +++ b/one/docs/directives/v-tooltip.md @@ -10,7 +10,13 @@ VEUI 对通过 `v-tooltip` 定义的全局浮层提示进行了统一的体验 ## 示例 -[[ demo src="/demo/directives/tooltip.vue" ]] +### 基本用法 + +[[ demo src="/demo/directives/tooltip/default.vue" ]] + +### 溢出时显示 + +[[ demo src="/demo/directives/tooltip/overflow.vue" ]] ## API @@ -42,14 +48,15 @@ VEUI 对通过 `v-tooltip` 定义的全局浮层提示进行了统一的体验 | -- | -- | -- | -- | | ``content`` | `string | VNode | Array` | - | 提示信息字符串或通过渲染函数返回的虚拟节点(数组)。 | | ``position`` | `string` | - | 浮层提示的展示位置。参考 [`Tooltip`](../components/tooltip) 组件的 [`position`](../components/tooltip#props-position) 属性。 | +| ``overflow`` | `boolean` | `false` | 是否仅在目标元素内容溢出容器时显示悬浮提示。 | | ``disabled`` | `boolean` | `false` | 是否禁用浮层提示。 | ### 修饰符 -对应 `Object` 类型绑定值中的 `position`。例如: +对应 `Object` 类型绑定值中的 `position` / `overflow`。例如: ```html - +A paragraph of very long text... ``` ### 全局配置 diff --git a/one/docs/en-US/components/column.md b/one/docs/en-US/components/column.md index 0fbae11..03a83b1 100644 --- a/one/docs/en-US/components/column.md +++ b/one/docs/en-US/components/column.md @@ -25,6 +25,8 @@ See [the demos of `Table`](./table#demos). | ``filter-multiple`` | `boolean=` | `false` | Whether the built-in filter is multi-select or not. | | ``filter-options`` | `Array` | - | The list of filter options, with items of type `{label, value, options, disabled, ...}`, see the [`options`](./select#options) prop of the [`Select`](./select) component. | | ``filter-title`` | `string=` | - | The title of the filter dropdown. | +| ``allowed-orders`` | `Array` | `[false, 'desc', 'asc']` | [^allowed-orders] | +| ``tooltip`` | `boolean | ((item: Object) => string)` | - | Whether to automatically show tooltips when content overflows. The tooltip displays the field corresponding to the [`field`](#props-field) prop of the [`data`](. /table#props-data) prop of `Table` component the current column belongs to. When being a function, the `item` argument is the entire data item and the returned string will be displayed as tooltip content. | ^^^sortable Whether current column is sortable. diff --git a/one/docs/en-US/components/pagination.md b/one/docs/en-US/components/pagination.md index 4698440..a8c189f 100644 --- a/one/docs/en-US/components/pagination.md +++ b/one/docs/en-US/components/pagination.md @@ -6,11 +6,19 @@ [[ demo src="/demo/pagination/size.vue" ]] -### Go to a specific page +### Page size -Use the [`goto`](#props-goto) prop to enable the go to page section. +Use the [`page-size`](#props-page-size) prop to specify the current page size. -[[ demo src="/demo/pagination/goto.vue" ]] +Use the [`page-sizes`](#props-page-sizes) prop to specify the page size options. + +[[ demo src="/demo/pagination/pages.vue" ]] + +### Optional parts + +Use the [`show-total`](#props-show-total) / [`show-page-size`](#props-show-page-size) / [`show-goto`](#props-show-goto) props to control the visibility of the total items / page size selector / goto page parts. + +[[ demo src="/demo/pagination/parts.vue" ]] ## API @@ -20,12 +28,14 @@ Use the [`goto`](#props-goto) prop to enable the go to page section. | -- | -- | -- | -- | | ``ui`` | `string=` | - | [^ui] | | ``page`` | `number` | `1` | Current page index (starts from `1`). | -| ``total`` | `number` | - | Total page count. | +| ``total`` | `number` | - | Total items count. | | ``to`` | `string | Object` | `''` | [^to] | | ``native`` | `boolean` | `false` | Use native links for navigation. | | ``page-size`` | `number` | `pagination.pageSize` | [^page-size] | | ``page-sizes`` | `Array` | `pagination.pageSizes` | The predefined available page sizes for users to select. | -| ``goto`` | `boolean` | `false` | Whether to show “goto page number” section. | +| ``show-goto`` | `boolean=` | `false` | Whether to show the go to page section. | +| ``show-total`` | `boolean=` | `false` | Whether to show the total page count. | +| ``show-page-size`` | `boolean=` | `false` | Whether to show the page size selection section. | ^^^ui Style variants. @@ -55,7 +65,7 @@ The count of item in each page. | Name | Description | | -- | -- | -| ``pagesizechange`` | Triggered when `page-size` is changed. The callback parameter list is `(size: number)`, with `size` being the new `page-size` value. | +| ``pagesizechange`` | Triggered when page size is changed. The callback parameter list is `(size: number)`, with `size` being the new page size value. | | ``redirect`` | Triggered when page links are activated. The callback parameter list is `(page: number, event: Object)`. `page` is the number of the targe page. `event` is the native event object, calling `event.preventDefault` will stop navigation when `native` is `true`. | ### Configs diff --git a/one/docs/en-US/components/table.md b/one/docs/en-US/components/table.md index ae1e2f7..b7a3df7 100644 --- a/one/docs/en-US/components/table.md +++ b/one/docs/en-US/components/table.md @@ -12,7 +12,7 @@ Available density variants for the [`ui`](#props-ui) prop: `compact` / `loose`. [[ demo src="/demo/table/basic.vue" ]] -### Advanced +### Selection and sorting Supports specifying row keys, mode of selection, and sorting by values of specific column. @@ -48,6 +48,12 @@ Use the [`desc`](./column#props-desc) prop or the [`desc`](./column#slots-desc) [[ demo src="/demo/table/desc.vue" ]] +### Truncation tooltips + +Use the [`tooltip`](./column#props-tooltip) attribute of the `Column` component to specify that a hover tooltip is displayed when the content is truncated. + +[[ demo src="/demo/table/tooltip.vue" ]]] + ## API ### Props diff --git a/package-lock.json b/package-lock.json index 2d67016..5d39399 100644 --- a/package-lock.json +++ b/package-lock.json @@ -79,7 +79,7 @@ "veui-theme-dls-icons": "^2.3.0", "vue-awesome": "^4.1.0", "vue-i18n": "^8.16.0", - "vue-live": "^1.17.1", + "vue-live": "^1.17.2", "vue-windows": "^0.2.4" } }, @@ -24393,9 +24393,9 @@ } }, "node_modules/vue-live": { - "version": "1.17.1", - "resolved": "https://registry.npmjs.org/vue-live/-/vue-live-1.17.1.tgz", - "integrity": "sha512-UVymml4t84NCESH3o3ZtYfpGztj9+S1sZQ0camXI9m+WC5swzZViMpMcVteGcEz/y3Oo1uA8fZo05oDPB8LTjA==", + "version": "1.17.2", + "resolved": "https://registry.npmjs.org/vue-live/-/vue-live-1.17.2.tgz", + "integrity": "sha512-sy3fxQy57UQ5/p8bDGuGA82zHFO8UOJDESYBggWsjVwW9Yt1gixOO2KJrhJ0E0B4OznsXCY4P180Vm+o04mX1Q==", "dev": true, "dependencies": { "@babel/runtime": "^7.11.2", @@ -45313,9 +45313,9 @@ } }, "vue-live": { - "version": "1.17.1", - "resolved": "https://registry.npmjs.org/vue-live/-/vue-live-1.17.1.tgz", - "integrity": "sha512-UVymml4t84NCESH3o3ZtYfpGztj9+S1sZQ0camXI9m+WC5swzZViMpMcVteGcEz/y3Oo1uA8fZo05oDPB8LTjA==", + "version": "1.17.2", + "resolved": "https://registry.npmjs.org/vue-live/-/vue-live-1.17.2.tgz", + "integrity": "sha512-sy3fxQy57UQ5/p8bDGuGA82zHFO8UOJDESYBggWsjVwW9Yt1gixOO2KJrhJ0E0B4OznsXCY4P180Vm+o04mX1Q==", "dev": true, "requires": { "@babel/runtime": "^7.11.2", diff --git a/package.json b/package.json index b438267..8547e78 100644 --- a/package.json +++ b/package.json @@ -87,7 +87,7 @@ "veui-theme-dls-icons": "^2.3.0", "vue-awesome": "^4.1.0", "vue-i18n": "^8.16.0", - "vue-live": "^1.17.1", + "vue-live": "^1.17.2", "vue-windows": "^0.2.4" }, "dependencies": {