Skip to content

Commit 0377a24

Browse files
committed
feat: update veui and add subtheme
1 parent b00f61e commit 0377a24

File tree

9 files changed

+166
-105
lines changed

9 files changed

+166
-105
lines changed

assets/styles/post.styl

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -279,16 +279,17 @@ margin-y($top, $bottom = $top)
279279

280280
kbd
281281
display inline-block
282-
padding 3px 5px 6px
282+
padding 3px 5px 4px
283283
font-size 90%
284284
line-height 10px
285+
font-family -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif
285286
color #444d56
286287
vertical-align 1px
287288
background-color #fafbfc
288289
border solid 1px #c6cbd1
289290
border-bottom-color #959da5
290291
border-radius 3px
291-
box-shadow inset 0 -1px 0 #959da5
292+
box-shadow inset 0 -0.5px 0 #959da5
292293

293294
.custom-block
294295
.custom-block&

one/docs/components/column.md

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,8 @@
2727
| ``filter-options`` | `Array<Object>` | - | 筛选选项列表,项目的类型为 `{label, value, options, disabled, ...}`,可参考 [`Select`](./select) 组件的 [`options`](./select#props-options) 属性。 |
2828
| ``filter-title`` | `string` | - | 筛选下拉的标题。 |
2929
| ``allowed-orders`` | `Array` | `[false, 'desc', 'asc']` | [^allowed-orders] |
30-
| ``tooltip`` | `boolean | ((item: Object) => string)` | - | 是否当内容溢出时自动显示悬浮提示。默认显示当前单元格的 `textContent`。传入函数时,`item` 参数为整个 data 数据项,返回的字符串将作为提示内容展示。 |
30+
| ``ellipsis`` | `boolean` | `tablecolumn.ellipsis` | 单元格内容溢出后是否自动截断。 |
31+
| ``tooltip`` | `boolean | ((item: Object) => string)` | `tablecolumn.tooltip` | 单元格内容溢出时是否自动截断并自动显示悬浮提示。默认显示当前单元格的 `textContent`。传入函数时,`item` 参数为整个 data 数据项,返回的字符串将作为提示内容展示。 |
3132

3233
^^^sortable
3334
本列是否支持排序。
@@ -129,3 +130,10 @@
129130
| 名称 | 描述 |
130131
| -- | -- |
131132
| ``filterchange`` | 修改该列过滤器时触发。回调参数为 `(value)``value` 为过滤器的当前值。 |
133+
134+
### 全局配置
135+
136+
| 配置项 | 类型 | 默认值 | 描述 |
137+
| -- | -- | -- | -- |
138+
| ``tablecolumn.ellipsis`` | `boolean` | `false` | 单元格内容溢出后是否自动截断。 |
139+
| ``tablecolumn.tooltip`` | `boolean | ((item: Object) => string)` | `false` | 单元格内容溢出后是否自动截断。 |

one/docs/demo/style/d22.vue

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<template>
2+
<article>
3+
<veui-input ui="theme:d22"/>
4+
</article>
5+
</template>
6+
7+
<script>
8+
import { Input } from 'veui'
9+
10+
export default {
11+
components: {
12+
'veui-input': Input
13+
}
14+
}
15+
</script>

one/docs/en-US/components/column.md

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,8 @@ See [`Table` examples](./table#examples).
2727
| ``filter-options`` | `Array<Object>` | - | The filtering options list, the item type is `{label, value, options, disabled, ...}`, refer to the [`options`](./select#props-options) prop of the [`Select`](./select) component. |
2828
| ``filter-title`` | `string` | - | The title of the filter drop-down. |
2929
| ``allowed-orders`` | `Array` | `[false, 'desc', 'asc']` | [^allowed-orders] |
30-
| ``tooltip`` | `boolean | ((item: Object) => string)` | - | Whether to automatically display a hover tooltip when the content overflows. The default is to display the `textContent` of the current cell. When a function is passed in, the `item` parameter is the entire data item, and the returned string will be displayed as the tooltip content. |
30+
| ``ellipsis`` | `boolean` | `tablecolumn.ellipsis` | Whether to automatically truncate cell content when it overflows. |
31+
| ``tooltip`` | `boolean | ((item: Object) => string)` | - | Whether to automatically truncate cell content and display a tooltip when it overflows. By default, it displays the current cell's textContent. When a function is provided, the item parameter represents the entire data item, and the returned string will be shown as the tooltip content. |
3132

3233
^^^sortable
3334
Whether this column supports sorting.
@@ -129,3 +130,10 @@ The content of the filter layer.
129130
| Name | Description |
130131
| -- | -- |
131132
| ``filterchange`` | Triggered when the filter of this column is modified. The callback parameter is `(value)`. `value` is the current value of the filter. |
133+
134+
### Configs
135+
136+
| Key | Type | Default | Description |
137+
| -- | -- | -- | -- |
138+
| `tablecolumn.ellipsis` | `boolean` | `false` | Whether to automatically truncate cell content when it overflows. |
139+
| `tablecolumn.tooltip` | `boolean | ((item: Object) => string)` | `false` | Whether to automatically truncate cell content and display a tooltip when it overflows. By default, it displays the current cell's textContent. When a function is provided, the item parameter represents the entire data item, and the returned string will be shown as the tooltip content. |

one/docs/en-US/components/table.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,8 @@ Use the [`tooltip`](./column#props-tooltip) prop of the `Column` component to sp
9393
| ``loading-options`` | `Object` | `table.loadingOptions` | [^loading-options] |
9494
| ``allowed-orders`` | `Array` | `[false, 'desc', 'asc']` | [^allowed-orders] |
9595
| ``bordered`` | `boolean` | `false` | Specifies whether the table has a border. |
96-
| ``column-filter`` | `Array<string>` | - | Used to filter the columns of the table. The value of each element should be the `key-field` of a column, and all columns are displayed by default. |
96+
| ``column-filter`` | `Array<string> | (field: string) => boolean` | - | Used for filtering the columns of the table. When passed an array, the values of the elements are the field values corresponding to that column. When passed a function, the parameter is the field value corresponding to that column, and the return value indicates whether that column should be displayed. By default, all columns are displayed. |
97+
9798

9899
^^^ui
99100
Preset style.

one/docs/en-US/getting-started/style-variants.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,20 @@ Then there will be a series of problems such as naming and prefixing of `class`,
2222

2323
By using the corresponding configuration of [`veui-loader`](./veui-loader), you can load the `veui-theme-dls` theme package in VEUI. The theme package provides optional preset styles in different dimensions for many components. You can refer to the documentation of each component for the explanation of supported preset styles of the `ui` prop.
2424

25+
#### Built-in Sub-Themes
26+
27+
The `veui-theme-dls` theme package comes with several built-in sub-themes that can be switched using the ui attribute. For example:
28+
29+
```html
30+
<veui-input ui="theme:d22"/>
31+
```
32+
33+
[[ demo src="/demo/style/d22.vue" ]]
34+
35+
:::tip
36+
In addition to specifying it directly with `ui="theme:d22"`, you can also set `{ theme: 'd22' }` for the [ConfigProvider](../components/config-provider) component to specify the sub-theme. Components within the specified sub-theme will automatically inherit it.
37+
:::
38+
2539
### Custom preset styles
2640

2741
Adding a custom `ui` item does not require registration through the component API, just add the corresponding styles for the `[ui~="..."]` selector in the style file.

one/docs/getting-started/style-variants.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,20 @@ VEUI 组件通过 `ui` 属性为组件提供预设样式。不同主题包可以
2222

2323
使用 [`veui-loader`](./veui-loader) 的相应配置,即可在 VEUI 中加载 `veui-theme-dls` 主题包。主题包为很多组件提供了不同维度的可选预设样式,可以参考每个组件对 `ui` 属性的说明来查阅组件支持的预设样式。
2424

25+
#### 内置子主题
26+
27+
`veui-theme-dls` 主题包内置了一些子主题,可以通过 `ui` 属性来切换。比如:
28+
29+
```html
30+
<veui-input ui="theme:d22"/>
31+
```
32+
33+
[[ demo src="/demo/style/d22.vue" ]]
34+
35+
:::tip
36+
除了直接通过 `ui="theme:d22"` 进行指定,也可以为 [ConfigProvider](../components/config-provider) 组件设置 `{ theme: 'd22' }` 来指定子主题。指定子主题的组件内部其他组件会自动继承该子主题。
37+
:::
38+
2539
### 自定预设样式
2640

2741
新增自定义的 `ui` 项无需通过组件接口进行注册,只需要在样式文件中针对 `[ui~="..."]` 选择器添加相应样式即可。

0 commit comments

Comments
 (0)