Sync release 3.16.0 (#1671)

* fix(grid): fix right fixed table header gutter style (#1542)

* fix(grid): [grid] fix grid no emit filter-change bug (#1536)

* fix(grid): [grid] fix grid not emit filter-change bug

* fix(grid): [grid] fix grid not emit filter-change bug

* docs: add v3.15.0 changelog (#1544)

* fix(tree): remove leaf node's padding-left (#1546)

* fix(action-menu): [action-menu] fix no divided bug (#1538)

* fix(action-menu): [action-menu] fix no divided bug

* fix(action-menu): [action-menu] fix no divided bug

* refactor(unplugin): rewrite unplugin for autoimport Vue components (#1553)

* fix(tabs): [tabs] Fixed issue with default slot and template/v-if/v-for usage in vue2 and vue3 (#1558)

* fix(tabs): [tabs] Fix the bug where the name is empty caused by using v-if in tabstem

* fix(tabs): [tabs] update renderless version

* fix(tabs): [tabs] Fix the issue with rendering in the default slot of Vue3

* fix(tabs): [tabs] Fix the issue of inconsistent highlighting when multiple V-ifs are used

* fix(tabs): [tabs] update opentiny/vue-tabs version

* fix(theme-saas): update theme saas dependencies (#1582)

* Update package.json

* feat(unplugin-tiny-vue): add TinyVueResolver (#1585)

* docs: add breaking changes to changelog (#1562)

* fix(chart): delete chart duplicate key (#1624)

* fix(select): [select] add showAllTextTag prop for select (#1627)

* fix(select): add showAllTextTag prop for select

* fix(select): update select  version in  package.json

* fix: [chart]fix chart height error and area chart empty data error (#1631)

* fix: 修复面积图空数据报错问题

* fix: 修复图表高度设置为100%的高度异常问题

* fix: 修改boxplot图表案例引入

* fix(drop-times): [drop-times] modify style (#1635)

* feat(theme): update theme version

* fix(chart): fix chart extend bugs (#1638)

* fix: 修复chart图表的extend未生效问题

* fix: 优化图表extend逻辑

* fix: 优化图表extend逻辑

* docs: optimize component category (#1626) (#1641)

* docs: update changelog v3.16.0 (#1642)

* feat(version): add npmmirror cdn link (#1646)

* feat(version): update docs version

* feat(alert): [alert] add type title text color css var (#1653)

* feat(alert): [alert] add type title text color css var

* feat(alert): [alert] add type title text color css var

* fix(select): [select] Fix the issue of invalid select component click events and remove inheritAttrs (#1657)

* fix(theme): [grid] fix tree node text overflow (#1661)

* fix(vue): [grid] fix multi toolbar can not get tableColumns config (#1656)

* fix(vue): [grid] fix multi toolbar can not get tableColumns config

* fix(vue): [grid] fix multi toolbar can not get tableColumns config

* fix(select,grid): fix select click event bug and grid toolbar bug

* fix(modal): adjust the title icon display of the modal (#1658)

* fix(modal): adjust the title icon display of the modal

* fix: update modal package.json

* fix(statistic): optimized the style, test, and example of the statistics component (#1660)

* fix: update style and demo statistic of component

* fix: update e2e-test

* fix: when num is equal to 0

---------

Co-authored-by: gimmyhehe <975402925@qq.com>
Co-authored-by: Kagol <kagol@sina.com>
Co-authored-by: 申君健 <40288193@qq.com>
Co-authored-by: chenxi-20 <76168465+chenxi-20@users.noreply.github.com>
Co-authored-by: Davont <davontz@icloud.com>
Co-authored-by: 李天佑 <66231260+You-Hw-Y@users.noreply.github.com>
Co-authored-by: MomoPoppy <125256456+MomoPoppy@users.noreply.github.com>
Co-authored-by: James <72028410+James-9696@users.noreply.github.com>
This commit is contained in:
ajaxzheng 2024-06-10 19:05:34 -07:00 committed by GitHub
parent e7d9dd9e04
commit 5e02624fd9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
30 changed files with 142 additions and 103 deletions

View File

@ -3,18 +3,6 @@ import { test, expect } from '@playwright/test'
test('基本用法', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('statistic#basic-usage')
await page
.locator('div')
.filter({ hasText: /123\/100$/ })
.first()
.click()
await page
.locator('div')
.filter({ hasText: /^基本用法$/ })
.first()
.click()
await page
.locator('div')
.filter({ hasText: /^306,526\.23$/ })
.click()
await page.locator('#basic-usage').getByText('306,526', { exact: true })
await page.getByText('306,526.23')
})

View File

@ -2,15 +2,21 @@
<div>
<tiny-layout>
<tiny-row :flex="true">
<tiny-col :span="8">
<tiny-statistic :value="300" prefix="存储平均值" suffix="GB"></tiny-statistic>
</tiny-col>
<tiny-col :span="8">
<tiny-col :span="4">
<tiny-statistic :value="306">
<template #prefix>已使用容量(GB)</template>
<template #suffix><span style="font-size: 32px">GB</span></template>
<template #prefix><div style="margin-right: 15px">已使用容量(GB)</div></template>
<template #suffix><div style="font-size: 24px">GB</div></template>
</tiny-statistic>
</tiny-col>
<tiny-col :span="4">
<tiny-statistic :value="1280" :precision="2">
<template #prefix><div style="font-size: 24px; font-weight: 600"></div></template>
<template #suffix><div>/</div></template>
</tiny-statistic>
</tiny-col>
<tiny-col :span="4">
<tiny-statistic suffix="GB"></tiny-statistic>
</tiny-col>
</tiny-row>
</tiny-layout>
</div>

View File

@ -0,0 +1,19 @@
import { test, expect } from '@playwright/test'
test('前后缀', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('statistic#prefix-suffix-slot')
await page
.locator('div')
.filter({ hasText: /^已使用容量\(GB\)306GB$/ })
.first()
await page
.locator('div')
.filter({ hasText: /^¥1,280\.00\/年$/ })
.first()
await page
.locator('div')
.filter({ hasText: /^300GB$/ })
.first()
await expect(page.getByText(/^¥1,280\.00\/年$/)).toHaveClass(/tiny-statistic__slots/)
})

View File

@ -2,15 +2,21 @@
<div>
<tiny-layout>
<tiny-row :flex="true">
<tiny-col :span="8">
<tiny-statistic :value="300" prefix="存储平均值" suffix="GB"></tiny-statistic>
</tiny-col>
<tiny-col :span="8">
<tiny-col :span="4">
<tiny-statistic :value="306">
<template #prefix>已使用容量(GB)</template>
<template #suffix><span style="font-size: 32px">GB</span></template>
<template #prefix><div style="margin-right: 15px">已使用容量(GB)</div></template>
<template #suffix><div style="font-size: 24px">GB</div></template>
</tiny-statistic>
</tiny-col>
<tiny-col :span="4">
<tiny-statistic :value="1280" :precision="2">
<template #prefix><div style="font-size: 24px; font-weight: 600"></div></template>
<template #suffix><div>/</div></template>
</tiny-statistic>
</tiny-col>
<tiny-col :span="4">
<tiny-statistic :value="300" suffix="GB"></tiny-statistic>
</tiny-col>
</tiny-row>
</tiny-layout>
</div>

View File

@ -3,7 +3,10 @@
<tiny-layout>
<tiny-row :flex="true">
<tiny-col :span="8">
<tiny-statistic :value="10010258" :title="{ value: '存储总量', position: 'top' }"> </tiny-statistic>
<tiny-statistic :value="10010258" :title="{ value: '存储总量', position: 'top' }">
<template #prefix>已使用容量(GB)</template>
<template #suffix><span style="font-size: 24px">GB</span></template>
</tiny-statistic>
</tiny-col>
<tiny-col :span="8">
<tiny-statistic :value="306526.23" :title="{ position: 'bottom' }">

View File

@ -3,11 +3,9 @@ import { test, expect } from '@playwright/test'
test('插槽用法', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('statistic#statistic-slot')
await page.locator('div').filter({ hasText: /^10,010,258$/ })
await page
.locator('div')
.filter({ hasText: /^306,526\.23$/ })
.filter({ hasText: /^存储总量已使用容量\(GB\)10,010,258GB$/ })
.first()
await page.getByText('Like:306,526').click()
await page.getByText('600/').click()
await page.getByText('306,526存储平均值').click()
})

View File

@ -3,7 +3,10 @@
<tiny-layout>
<tiny-row :flex="true">
<tiny-col :span="8">
<tiny-statistic :value="10010258" :title="{ value: '存储总量', position: 'top' }"> </tiny-statistic>
<tiny-statistic :value="10010258" :title="{ value: '存储总量', position: 'top' }">
<template #prefix>已使用容量(GB)</template>
<template #suffix><span style="font-size: 24px">GB</span></template>
</tiny-statistic>
</tiny-col>
<tiny-col :span="8">
<tiny-statistic :value="306526.23" :title="{ position: 'bottom' }">

View File

@ -2,7 +2,7 @@
<div>
<tiny-layout>
<tiny-row :flex="true">
<tiny-col :span="6">
<tiny-col :span="8">
<tiny-statistic
:value="306526"
:value-style="{ 'color': '#3ac295' }"
@ -10,10 +10,10 @@
>
</tiny-statistic>
</tiny-col>
<tiny-col :span="6">
<tiny-col :span="8">
<tiny-statistic
:value="306526.23"
:value-style="[{ 'color': '#eb1212', 'text-align': 'center', 'width': '200px' }]"
:value-style="[{ 'color': '#eb1212', 'text-align': 'center' }]"
:title="{ position: 'bottom' }"
>
<template #title>
@ -32,8 +32,9 @@ import { Statistic as TinyStatistic, Layout as TinyLayout, Row as TinyRow, Col a
<style scoped>
.title-content {
width: 200px;
width: 90px;
text-align: center;
color: #a9a9a9;
font-weight: 600;
}
</style>

View File

@ -3,5 +3,10 @@ import { test, expect } from '@playwright/test'
test('样式用法', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('statistic#statistic-style')
await expect(page.getByText('Like:306,526').first()).toHaveClass(/tiny-statistic__slots/)
await page
.locator('div')
.filter({ hasText: /^进行中306,526$/ })
.first()
await page.getByText('306,526失败').click()
await expect(page.getByText(/^进行中306,526$/).first()).toHaveClass(/tiny-statistic/)
})

View File

@ -2,7 +2,7 @@
<div>
<tiny-layout>
<tiny-row :flex="true">
<tiny-col :span="6">
<tiny-col :span="8">
<tiny-statistic
:value="306526"
:value-style="{ 'color': '#3ac295' }"
@ -10,10 +10,10 @@
>
</tiny-statistic>
</tiny-col>
<tiny-col :span="6">
<tiny-col :span="8">
<tiny-statistic
:value="306526.23"
:value-style="[{ 'color': '#eb1212', 'text-align': 'center', 'width': '200px' }]"
:value-style="[{ 'color': '#eb1212', 'text-align': 'center' }]"
:title="{ position: 'bottom' }"
>
<template #title>
@ -41,8 +41,9 @@ export default {
<style scoped>
.title-content {
width: 200px;
width: 90px;
text-align: center;
color: #a9a9a9;
font-weight: 600;
}
</style>

View File

@ -1,5 +1,5 @@
export default {
column: '2',
column: '1',
owner: '',
demos: [
{

View File

@ -18,5 +18,14 @@ export const getIntegerAndDecimal =
let displayValue = props.value ? String(props.value).split('.') : ''
let integer = displayValue[0]?.replace(/\B(?=(\d{3})+(?!\d))/g, props.groupSeparator)
let decimal = displayValue[1]?.padEnd(props.precision, '0').slice(0, props.precision > 0 ? props.precision : 0)
// 处理当数字为0的情况
if (!displayValue) {
integer = '0'
}
// 当无小数点值且传入精度值,须默认用 0 补充精度值
if (!decimal && props.precision) {
let display = '0'
decimal = display.padEnd(props.precision, '0')
}
return [integer, decimal].join(decimal ? '.' : '')
}

View File

@ -989,6 +989,7 @@
&__title:has(.tiny-grid-tree__indent:nth-last-child(2):first-child),
&__ellipsis:has(.tiny-grid-tree__indent:nth-last-child(2):first-child) {
@apply inline-block;
@apply max-w-full;
}
}
}

View File

@ -1,6 +1,6 @@
{
"name": "@opentiny/vue-theme",
"version": "3.16.2",
"version": "3.16.4",
"description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
"main": "index.css",
"homepage": "https://opentiny.design/tiny-vue",

View File

@ -79,7 +79,7 @@
}
&&--success {
.alert-variant(var(--ti-alert-title-text-color);
.alert-variant(var(--ti-alert-success-title-text-color);
var(--ti-alert-success-border-color);
var(--ti-alert-success-icon-color);
var(--ti-alert-success-link-text-color);
@ -92,7 +92,7 @@
}
&&--info {
.alert-variant(var(--ti-alert-title-text-color);
.alert-variant(var(--ti-alert-info-title-text-color);
var(--ti-alert-info-border-color);
var(--ti-alert-info-icon-color);
var(--ti-alert-info-link-text-color);
@ -105,7 +105,7 @@
}
&&--warning {
.alert-variant(var(--ti-alert-title-text-color);
.alert-variant(var(--ti-alert-warning-title-text-color);
var(--ti-alert-warning-border-color);
var(--ti-alert-warning-icon-color);
var(--ti-alert-warning-link-text-color);
@ -118,7 +118,7 @@
}
&&--error {
.alert-variant(var(--ti-alert-title-text-color);
.alert-variant(var(--ti-alert-error-title-text-color);
var(--ti-alert-error-border-color);
var(--ti-alert-error-icon-color);
var(--ti-alert-error-link-text-color);
@ -131,7 +131,7 @@
}
&&--simple {
.alert-variant(var(--ti-alert-title-text-color);
.alert-variant(var(--ti-alert-simple-title-text-color);
var(--ti-alert-simple-border-color);
var(--ti-alert-simple-icon-color);
var(--ti-alert-simple-link-text-color);

View File

@ -36,6 +36,16 @@
--ti-alert-border-radius: var(--ti-common-border-radius-normal, 2px);
// 标题文本色
--ti-alert-title-text-color: var(--ti-common-color-text-primary, #252b3a);
// success类型标题文本色
--ti-alert-success-title-text-color: var(--ti-common-color-text-primary, #252b3a);
// info类型标题文本色
--ti-alert-info-title-text-color: var(--ti-common-color-text-primary, #252b3a);
// warning类型标题文本色
--ti-alert-warning-title-text-color: var(--ti-common-color-text-primary, #252b3a);
// error类型标题文本色
--ti-alert-error-title-text-color: var(--ti-common-color-text-primary, #252b3a);
// simple类型标题文本色
--ti-alert-simple-title-text-color: var(--ti-common-color-text-primary, #252b3a);
// 标题字号
--ti-alert-title-font-size: var(--ti-common-font-size-1, 14px);
// 标题图标顶部外边距

View File

@ -74,6 +74,7 @@
line-height: 14px;
font-size: var(--ti-common-font-size-1);
align-self: baseline;
display: inline-block;
&:before {
content: '*';

View File

@ -833,6 +833,7 @@
&__title:has(.tiny-grid-tree__indent:nth-last-child(2):first-child),
&__ellipsis:has(.tiny-grid-tree__indent:nth-last-child(2):first-child) {
display: inline-block;
max-width: 100%;
}
}
}

View File

@ -0,0 +1,3 @@
export const tinyStatisticAuroraTheme = {
'ti-statistic-font-color': 'var(--ti-common-color-text-primary)'
}

View File

@ -13,36 +13,31 @@
color: var(--ti-statistic-font-color);
font-weight: var(--ti-statistic-title-font-weight);
line-height: var(--ti-statistic-title-line-height);
// margin-top: var(--ti-statistic-title-margin-top);
margin-bottom: var(--ti-statistic-title-margin-bottom);
margin-left: var(--ti-statistic-description-margin-left);
}
&__slots {
font-weight: var(--ti-statistic-font-weight);
font-size: var(--ti-statistic-title-font-size);
color: var(--ti-statistic-font-color);
display: flex;
align-items: baseline;
}
&__prefix {
margin-right: var(--ti-statistic-prefix-margin-right);
font-weight: var(--ti-statistic-prefix-font-weight);
display: inline-block;
font-size: var(--ti-statistic-font-size);
vertical-align: middle;
}
&__description {
font-size: var(--ti-statistic-description-font-size);
display: inline-block;
margin-left: var(--ti-statistic-description-margin-left);
font-weight: var(--ti-statistic-description-font-weight);
}
&__suffix {
font-size: var(--ti-statistic-suffix-font-size);
margin-left: var(--ti-statistic-suffix-margin-left);
font-size: var(--ti-statistic-suffix-font-size);
font-weight: var(--ti-statistic-suffix-font-weight);
display: inline-block;
}
&__description-margin {

View File

@ -1,5 +1,6 @@
export const tinyStatisticSmbTheme = {
'ti-statistic-description-font-size': 'var(--ti-common-font-size-5)',
'ti-statistic-font-color': 'var(--ti-common-color-primary-normal)',
'ti-statistic-suffix-font-size': 'var(--ti-common-font-size-0)'
'ti-statistic-suffix-font-size': 'var(--ti-common-font-size-0)',
'ti-statistic-description-font-weight': 'var(--ti-common-font-weight-normal)'
}

View File

@ -5,8 +5,6 @@
--ti-statistic-suffix-font-size: var(--ti-common-font-size-base);
// 标题内容字体大小
--ti-statistic-title-font-size: var(--ti-common-font-size-6);
// 标题内容左间距
--ti-statistic-description-margin-left: var(--ti-common-space-4x);
// 标题字体颜色
--ti-statistic-font-color: var(--ti-common-color-info-text);
// 标题字体粗细
@ -23,14 +21,14 @@
--ti-statistic-title-line-height: var(ti-common-line-height-4);
// 前缀插槽字体粗细
--ti-statistic-font-weight: var(--ti-common-font-weight-5);
// 前缀插槽间距值
--ti-statistic-prefix-margin-right: var(--ti-common-space-6);
// 前缀字体粗细
--ti-statistic-prefix-font-weight: var(--ti-common-font-weight-5);
// 后缀插槽间距值
--ti-statistic-suffix-margin-left: var(--ti-common-space-6);
// 后缀字体粗细
--ti-statistic-suffix-font-weight: var(--ti-common-font-weight-5);
// 数字内容字体粗细
--ti-statistic-description-font-weight: var(--ti-common-font-weight-normal);
// 后缀左边距
--ti-statistic-suffix-margin-left: var(--ti-common-space-base);
// 数字内容字体
--ti-statistic-description-font-size: var(--ti-common-font-size-6);
}

View File

@ -1,6 +1,6 @@
{
"name": "@opentiny/vue-grid",
"version": "3.16.0",
"version": "3.16.1",
"description": "",
"main": "lib/index.js",
"module": "index.ts",

View File

@ -447,7 +447,9 @@ export default defineComponent({
if (type === 'pageSizeChangeCallback') {
this._pageSizeChangeCallback = callback
} else if (type === 'updateCustomsCallback') {
this._updateCustomsCallback = callback
// 表格可能有多个工具栏,因此工具栏个性化配置的回调应该是个数组
this._updateCustomsCallback = this._updateCustomsCallback || []
this._updateCustomsCallback.push(callback)
}
},
// 从缓存获取实例
@ -460,8 +462,10 @@ export default defineComponent({
handleColumnInitReady() {
// 如果存在更新工具栏动态列回调,就执行
if (this._updateCustomsCallback) {
this._updateCustomsCallback()
this._updateCustomsCallback = null
this._updateCustomsCallback.forEach((fn) => {
fn()
})
this._updateCustomsCallback = []
}
},
handleRowClassName(params) {

View File

@ -1,6 +1,6 @@
{
"name": "@opentiny/vue-modal",
"version": "3.16.0",
"version": "3.16.1",
"description": "",
"main": "lib/index.js",
"module": "index.ts",

View File

@ -166,7 +166,7 @@ export default defineComponent({
}
},
[
status && state.theme === 'saas'
status
? h(
'div',
{
@ -188,18 +188,7 @@ export default defineComponent({
{
class: 'tiny-modal__title'
},
[
typeof status === 'string'
? h(STATUS_MAPPING_COMPINENT[status.toUpperCase()], {
class: [constants.STATUS_MAPPING_CLASSS[status.toUpperCase()]],
style: 'display: inline-block; margin-right: 5px;'
})
: h(status, {
class: ['tiny-modal__status-icon'],
style: 'display: inline-block; margin-right: 5px;'
}),
h('span', title || t('ui.alert.title'))
]
title || t('ui.alert.title')
),
resize
? h(zoomLocat ? iconMinscreenLeft() : iconFullscreenLeft(), {
@ -224,14 +213,14 @@ export default defineComponent({
class: ['tiny-modal__body', type === 'message' ? 'is-message' : '']
},
[
status && state.theme !== 'saas'
type === 'message'
? h(
'div',
{
class: 'tiny-modal__status-wrapper'
},
[
typeof status === 'string' && type === 'message'
typeof status === 'string'
? h(STATUS_MAPPING_COMPINENT[status.toUpperCase()], {
class: [constants.STATUS_MAPPING_CLASSS[status.toUpperCase()]]
})
@ -310,6 +299,18 @@ export default defineComponent({
)
]
: [
type === 'confirm'
? h(
Button,
{
on: {
click: this.cancelEvent
},
props: { ...cancelButtonProps }
},
cancelButtonText
)
: null,
h(
Button,
{
@ -322,19 +323,7 @@ export default defineComponent({
}
},
confirmButtonText
),
type === 'confirm'
? h(
Button,
{
on: {
click: this.cancelEvent
},
props: { ...cancelButtonProps }
},
cancelButtonText
)
: null
]
)
: null,

View File

@ -1,6 +1,6 @@
{
"name": "@opentiny/vue-select",
"version": "3.16.1",
"version": "3.16.2",
"description": "",
"main": "lib/index.js",
"module": "index.ts",

View File

@ -26,7 +26,6 @@
clickExpand ? 'is-click-expand' : '',
state.showCollapseTag ? 'collapse-tag-clicked' : '',
state.selectDisabled ? 'is-disabled' : '',
$parent.$attrs.class,
inputBoxType === 'underline' ? 'tiny-select__underline' : ''
]"
@mouseleave.self="
@ -43,7 +42,6 @@
"
@click="toggleMenu"
v-clickoutside="handleClose"
v-bind="a($attrs, ['class', 'style'], true)"
>
<div
ref="tagsGroup"
@ -631,7 +629,6 @@ const getReference = (el, binding, vnode) => {
}
export default defineComponent({
inheritAttrs: false,
emits: [
'update:modelValue',
'change',

View File

@ -2,7 +2,7 @@
<div class="tiny-statistic">
<div
class="tiny-statistic__title"
v-if="!(title instanceof Object) || (title instanceof Object && title.position !== 'bottom')"
v-if="title && (!(title instanceof Object) || (title instanceof Object && title.position !== 'bottom'))"
>
<div v-if="$slots.title">
<slot name="title"> </slot>