Release 3.19.0 to dev (#2447)
* fix(build): fix build error * fix(docs): 增加上传文件类型说明 (#2439) * fix(tag): update tag's size when only icon, update one place of button's icon size (#2440) * fix(date-picker): [date-picker,select] fix radius bugs for month-table (#2442) * docs(site): fix demos and test e2e (#2444) * test(site): fix icon not correct test e2e (#2445) --------- Co-authored-by: chenxi-20 <2465950588@qq.com> Co-authored-by: 申君健 <40288193@qq.com> Co-authored-by: MomoPoppy <125256456+MomoPoppy@users.noreply.github.com> Co-authored-by: gimmyhehe <975402925@qq.com>
This commit is contained in:
parent
2b9051b602
commit
9acc34eecd
|
@ -16,10 +16,7 @@ test('基本用法', async ({ page }) => {
|
|||
// 更多按钮
|
||||
await expect(moreItem).toHaveText(/更多/)
|
||||
// 图标显示
|
||||
await expect(moreItem.locator('svg > path').nth(0)).toHaveAttribute(
|
||||
'd',
|
||||
'M8 11.43c-.15 0-.31-.06-.42-.18L1.92 5.6c-.23-.23-.23-.61 0-.85s.61-.23.85 0L8 9.98l5.23-5.23a.61.61 0 0 1 .85 0c.23.23.23.61 0 .85l-5.66 5.66c-.11.11-.27.17-.42.17z'
|
||||
)
|
||||
await expect(moreItem.locator('.tiny-dropdown__trigger .tiny-svg')).toBeVisible()
|
||||
// 分割线
|
||||
await expect(actionMenu.locator('.tiny-action-menu__item-line')).toHaveCount(2)
|
||||
// 图标旋转
|
||||
|
|
|
@ -12,5 +12,6 @@ test('基本用法', async ({ page }) => {
|
|||
await expect(visibleItem).toHaveCount(4)
|
||||
await expect(moreItem).not.toHaveText(/更多/)
|
||||
// 三点图标
|
||||
await expect(moreItem.locator('circle')).toHaveCount(3)
|
||||
const SvgPathReg = /^M2\.3 7\.78v.+219-1\.17Z$/
|
||||
await expect(moreItem.locator('.tiny-svg path').first()).toHaveAttribute('d', SvgPathReg)
|
||||
})
|
||||
|
|
|
@ -24,7 +24,7 @@ test('只显示文本', async ({ page }) => {
|
|||
await page.goto('action-menu#icon')
|
||||
|
||||
const wrap = page.locator('#icon')
|
||||
const actionMenu = wrap.locator('.tiny-action-menu').nth(2)
|
||||
const actionMenu = wrap.locator('.tiny-action-menu').nth(1)
|
||||
const actionMenuItem = actionMenu.locator('.tiny-action-menu__item')
|
||||
|
||||
await expect(actionMenuItem.nth(0).locator('.tiny-svg')).toBeHidden()
|
||||
|
|
|
@ -22,6 +22,6 @@ test('测试更多按钮', async ({ page }) => {
|
|||
// 判断图标是否正确
|
||||
const moreButton = buttonGroup.getByRole('button').nth(3)
|
||||
const moreButtonSvg = moreButton.locator('svg path').first()
|
||||
const moreSvgPathReg = /^M292\.768 449\.694c2\.491\.515.+002-12.555-\.002z$/
|
||||
const moreSvgPathReg = /^M2\.3 7\.78v.+219-1\.17Z$/
|
||||
await expect(moreButtonSvg).toHaveAttribute('d', moreSvgPathReg)
|
||||
})
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<div>
|
||||
<ColorPicker v-model="color" :history="history" />
|
||||
<tiny-color-picker v-model="color" :history="history" />
|
||||
<br />
|
||||
<Button @click="addHistoryColor">Append history color</Button>
|
||||
<Button @click="popHistoryColor">Pop history color</Button>
|
||||
<tiny-button @click="addHistoryColor">Append history color</tiny-button>
|
||||
<tiny-button @click="popHistoryColor">Pop history color</tiny-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<div>
|
||||
<ColorPicker v-model="color" :predefine="predefine" />
|
||||
<tiny-color-picker v-model="color" :predefine="predefine" />
|
||||
<br />
|
||||
<Button @click="addPredefineColor">Append predefine color</Button>
|
||||
<Button @click="popPredefineColor">Pop predefine color</Button>
|
||||
<tiny-button @click="addPredefineColor">Append predefine color</tiny-button>
|
||||
<tiny-button @click="popPredefineColor">Pop predefine color</tiny-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
@ -4,7 +4,13 @@
|
|||
<tiny-button @click="addHistoryColor">Append history color</tiny-button>
|
||||
<tiny-button @click="popHistoryColor">Pop history color</tiny-button>
|
||||
<div style="position: relative">
|
||||
<ColorSelectPanel v-model="color" :visible="visible" @confirm="onConfirm" @cancel="onCancel" :history="history" />
|
||||
<tiny-color-select-panel
|
||||
v-model="color"
|
||||
:visible="visible"
|
||||
@confirm="onConfirm"
|
||||
@cancel="onCancel"
|
||||
:history="history"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
<tiny-button @click="addPredefineColor">Append predefine color</tiny-button>
|
||||
<tiny-button @click="popPredefineColor">Pop predefine color</tiny-button>
|
||||
<div style="position: relative">
|
||||
<ColorSelectPanel
|
||||
<tiny-color-select-panel
|
||||
v-model="color"
|
||||
:visible="visible"
|
||||
@confirm="onConfirm"
|
||||
|
|
|
@ -12,10 +12,7 @@ test('[DatePicker] 测试清除输入', async ({ page }) => {
|
|||
// 默认显示清除按钮
|
||||
await datePickerDefaultClearIcon.hover()
|
||||
await expect(clearIcon).toBeVisible()
|
||||
await expect(clearIcon.locator('path').nth(1)).toHaveAttribute(
|
||||
'd',
|
||||
'M4.25 3.4 8 7.15l3.75-3.75a.61.61 0 0 1 .85 0c.23.23.23.62 0 .85L8.85 8l3.75 3.75c.23.24.23.62 0 .85a.61.61 0 0 1-.85 0L8 8.85 4.25 12.6a.61.61 0 0 1-.85 0 .592.592 0 0 1 0-.85L7.15 8 3.4 4.25a.61.61 0 0 1 0-.85.61.61 0 0 1 .85 0z'
|
||||
)
|
||||
await expect(clearIcon.locator('path').nth(0)).toHaveAttribute('d', /^M12\.49 3\.3a.+22\.71 0Z$/)
|
||||
|
||||
// 隐藏清除按钮
|
||||
await datePickerHideClearIcon.hover()
|
||||
|
@ -24,10 +21,7 @@ test('[DatePicker] 测试清除输入', async ({ page }) => {
|
|||
// 自定义清除图标
|
||||
await datePickerCustomClearIcon.hover()
|
||||
await expect(clearIcon).toBeVisible()
|
||||
await expect(clearIcon.locator('path').nth(1)).toHaveAttribute(
|
||||
'd',
|
||||
'M4.25 3.4 8 7.15l3.75-3.75a.61.61 0 0 1 .85 0c.23.23.23.62 0 .85L8.85 8l3.75 3.75c.23.24.23.62 0 .85a.61.61 0 0 1-.85 0L8 8.85 4.25 12.6a.61.61 0 0 1-.85 0 .592.592 0 0 1 0-.85L7.15 8 3.4 4.25a.61.61 0 0 1 0-.85.61.61 0 0 1 .85 0z'
|
||||
)
|
||||
await expect(clearIcon.locator('path').nth(0)).toHaveAttribute('d', /^M12\.49 3\.3a.+22\.71 0Z$/)
|
||||
|
||||
// 测试清除功能
|
||||
await expect(datePickerCustomClearIcon).toHaveValue('2023-05-24')
|
||||
|
|
|
@ -13,10 +13,6 @@ test('基本用法', async ({ page }) => {
|
|||
|
||||
// 箭头是否存在
|
||||
await expect(dropDownSvg).toBeVisible()
|
||||
await expect(dropDownSvg.locator('path')).toHaveAttribute(
|
||||
'd',
|
||||
'M8 11.43c-.15 0-.31-.06-.42-.18L1.92 5.6c-.23-.23-.23-.61 0-.85s.61-.23.85 0L8 9.98l5.23-5.23a.61.61 0 0 1 .85 0c.23.23.23.61 0 .85l-5.66 5.66c-.11.11-.27.17-.42.17z'
|
||||
)
|
||||
|
||||
await page.waitForTimeout(500)
|
||||
await dropDown.hover()
|
||||
|
|
|
@ -59,8 +59,8 @@ export default {
|
|||
'en-US': 'Restrict file types'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '通过 <code>accept</code> 设置限制上传文件的格式。',
|
||||
'en-US': 'Limit the format of uploaded files by setting <code>accept</code> .'
|
||||
'zh-CN': '通过 <code>accept</code> 设置限制上传文件的格式只能为图片类型。',
|
||||
'en-US': 'Set a limit on the format of uploaded files to only be image type through <code>accept</code>.'
|
||||
},
|
||||
codeFiles: ['accept-file-image.vue']
|
||||
},
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
field="area"
|
||||
title="区域"
|
||||
:editor="{
|
||||
component: Select,
|
||||
component: TinySelect,
|
||||
attrs: { options, textField: 'name', valueField: 'id' }
|
||||
}"
|
||||
:format-config="{ data: options, label: 'name', value: 'id' }"
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
field="area"
|
||||
title="区域"
|
||||
:editor="{
|
||||
component: Select,
|
||||
component: TinySelect,
|
||||
attrs: { options, textField: 'name', valueField: 'id' }
|
||||
}"
|
||||
:format-config="{ data: options, label: 'name', value: 'id' }"
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
field="area"
|
||||
title="区域"
|
||||
:editor="{
|
||||
component: Select,
|
||||
component: TinySelect,
|
||||
attrs: {
|
||||
multiple: true,
|
||||
options,
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
field="area"
|
||||
title="区域"
|
||||
:editor="{
|
||||
component: Select,
|
||||
component: TinySelect,
|
||||
attrs: {
|
||||
multiple: true,
|
||||
options,
|
||||
|
|
|
@ -8,7 +8,7 @@
|
|||
<tiny-grid-column
|
||||
field="id"
|
||||
title="名称(Popeditor)"
|
||||
:editor="{ component: Popeditor, attrs: getPopEditorOp }"
|
||||
:editor="{ component: TinyPopeditor, attrs: getPopEditorOp }"
|
||||
:format-config="{
|
||||
type: 'enum',
|
||||
async: true,
|
||||
|
|
|
@ -8,7 +8,7 @@
|
|||
<tiny-grid-column
|
||||
field="id"
|
||||
title="名称(Popeditor)"
|
||||
:editor="{ component: Popeditor, attrs: getPopEditorOp }"
|
||||
:editor="{ component: TinyPopeditor, attrs: getPopEditorOp }"
|
||||
:format-config="{
|
||||
type: 'enum',
|
||||
async: true,
|
||||
|
|
|
@ -43,17 +43,17 @@
|
|||
<tiny-grid-column
|
||||
field="planDevEndTime"
|
||||
title="计划开发结束时间"
|
||||
:editor="{ component: DatePicker, attrs: { format: 'yyyy-MM-dd', valueFormat: 'yyyy-MM-dd' } }"
|
||||
:editor="{ component: TinyDatePicker, attrs: { format: 'yyyy-MM-dd', valueFormat: 'yyyy-MM-dd' } }"
|
||||
></tiny-grid-column>
|
||||
<tiny-grid-column
|
||||
field="planTestEndTime"
|
||||
title="计划测试结束时间"
|
||||
:editor="{ component: DatePicker, attrs: { format: 'yyyy-MM-dd', valueFormat: 'yyyy-MM-dd' } }"
|
||||
:editor="{ component: TinyDatePicker, attrs: { format: 'yyyy-MM-dd', valueFormat: 'yyyy-MM-dd' } }"
|
||||
></tiny-grid-column>
|
||||
<tiny-grid-column
|
||||
field="customerExpect"
|
||||
title="用户期望交付时间"
|
||||
:editor="{ component: DatePicker, attrs: { format: 'yyyy-MM-dd', valueFormat: 'yyyy-MM-dd' } }"
|
||||
:editor="{ component: TinyDatePicker, attrs: { format: 'yyyy-MM-dd', valueFormat: 'yyyy-MM-dd' } }"
|
||||
></tiny-grid-column>
|
||||
<tiny-grid-column field="requireSource" title="需求来源">
|
||||
<template #header="{ column }">{{ column.title }}</template>
|
||||
|
|
|
@ -43,17 +43,17 @@
|
|||
<tiny-grid-column
|
||||
field="planDevEndTime"
|
||||
title="计划开发结束时间"
|
||||
:editor="{ component: DatePicker, attrs: { format: 'yyyy-MM-dd', valueFormat: 'yyyy-MM-dd' } }"
|
||||
:editor="{ component: TinyDatePicker, attrs: { format: 'yyyy-MM-dd', valueFormat: 'yyyy-MM-dd' } }"
|
||||
></tiny-grid-column>
|
||||
<tiny-grid-column
|
||||
field="planTestEndTime"
|
||||
title="计划测试结束时间"
|
||||
:editor="{ component: DatePicker, attrs: { format: 'yyyy-MM-dd', valueFormat: 'yyyy-MM-dd' } }"
|
||||
:editor="{ component: TinyDatePicker, attrs: { format: 'yyyy-MM-dd', valueFormat: 'yyyy-MM-dd' } }"
|
||||
></tiny-grid-column>
|
||||
<tiny-grid-column
|
||||
field="customerExpect"
|
||||
title="用户期望交付时间"
|
||||
:editor="{ component: DatePicker, attrs: { format: 'yyyy-MM-dd', valueFormat: 'yyyy-MM-dd' } }"
|
||||
:editor="{ component: TinyDatePicker, attrs: { format: 'yyyy-MM-dd', valueFormat: 'yyyy-MM-dd' } }"
|
||||
></tiny-grid-column>
|
||||
<tiny-grid-column field="requireSource" title="需求来源">
|
||||
<template #header="{ column }">{{ column.title }}</template>
|
||||
|
|
|
@ -18,7 +18,7 @@
|
|||
value: 'value'
|
||||
}"
|
||||
:editor="{
|
||||
component: Select,
|
||||
component: TinySelect,
|
||||
attrs: { textField: 'text', clearable: true }
|
||||
}"
|
||||
></tiny-grid-column>
|
||||
|
|
|
@ -18,7 +18,7 @@
|
|||
value: 'value'
|
||||
}"
|
||||
:editor="{
|
||||
component: Select,
|
||||
component: TinySelect,
|
||||
attrs: { textField: 'text', clearable: true }
|
||||
}"
|
||||
></tiny-grid-column>
|
||||
|
|
|
@ -7,7 +7,7 @@
|
|||
field="boole"
|
||||
title="Vue 渲染器"
|
||||
align="center"
|
||||
:renderer="{ component: Switch }"
|
||||
:renderer="{ component: TinySwitch }"
|
||||
></tiny-grid-column>
|
||||
<tiny-grid-column field="area" title="区域"></tiny-grid-column>
|
||||
<tiny-grid-column field="createdDate" title="创建时间"></tiny-grid-column>
|
||||
|
|
|
@ -7,7 +7,7 @@
|
|||
field="boole"
|
||||
title="Vue 渲染器"
|
||||
align="center"
|
||||
:renderer="{ component: Switch }"
|
||||
:renderer="{ component: TinySwitch }"
|
||||
></tiny-grid-column>
|
||||
<tiny-grid-column field="area" title="区域"></tiny-grid-column>
|
||||
<tiny-grid-column field="createdDate" title="创建时间"></tiny-grid-column>
|
||||
|
|
|
@ -15,7 +15,7 @@
|
|||
show-overflow="tooltip"
|
||||
>
|
||||
<tiny-grid-column type="index" width="60"></tiny-grid-column>
|
||||
<tiny-grid-column field="name" title="名称" :editor="{ component: Input }"></tiny-grid-column>
|
||||
<tiny-grid-column field="name" title="名称" :editor="{ component: TinyInput }"></tiny-grid-column>
|
||||
<tiny-grid-column field="area" title="区域" :editor="{ component: 'input' }"></tiny-grid-column>
|
||||
<tiny-grid-column field="address" title="地址" :editor="{ component: 'input' }"></tiny-grid-column>
|
||||
<tiny-grid-column field="introduction" title="公司简介" :editor="{ component: 'input' }"></tiny-grid-column>
|
||||
|
|
|
@ -15,7 +15,7 @@
|
|||
show-overflow="tooltip"
|
||||
>
|
||||
<tiny-grid-column type="index" width="60"></tiny-grid-column>
|
||||
<tiny-grid-column field="name" title="名称" :editor="{ component: Input }"></tiny-grid-column>
|
||||
<tiny-grid-column field="name" title="名称" :editor="{ component: TinyInput }"></tiny-grid-column>
|
||||
<tiny-grid-column field="area" title="区域" :editor="{ component: 'input' }"></tiny-grid-column>
|
||||
<tiny-grid-column field="address" title="地址" :editor="{ component: 'input' }"></tiny-grid-column>
|
||||
<tiny-grid-column field="introduction" title="公司简介" :editor="{ component: 'input' }"></tiny-grid-column>
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
<tiny-grid-toolbar :buttons="toolbarButtons" @button-click="toolbarButtonClickEvent"></tiny-grid-toolbar>
|
||||
</template>
|
||||
<tiny-grid-column type="index" width="160"></tiny-grid-column>
|
||||
<tiny-grid-column field="name" title="名称" width="460" :editor="{ component: Input }"></tiny-grid-column>
|
||||
<tiny-grid-column field="name" title="名称" width="460" :editor="{ component: TinyInput }"></tiny-grid-column>
|
||||
<tiny-grid-column field="area" title="区域" width="460" :editor="{ component: 'input' }"></tiny-grid-column>
|
||||
<tiny-grid-column field="address" title="地址" width="460" :editor="{ component: 'input' }"></tiny-grid-column>
|
||||
<tiny-grid-column
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
<tiny-grid-toolbar :buttons="toolbarButtons" @button-click="toolbarButtonClickEvent"></tiny-grid-toolbar>
|
||||
</template>
|
||||
<tiny-grid-column type="index" width="160"></tiny-grid-column>
|
||||
<tiny-grid-column field="name" title="名称" width="460" :editor="{ component: Input }"></tiny-grid-column>
|
||||
<tiny-grid-column field="name" title="名称" width="460" :editor="{ component: TinyInput }"></tiny-grid-column>
|
||||
<tiny-grid-column field="area" title="区域" width="460" :editor="{ component: 'input' }"></tiny-grid-column>
|
||||
<tiny-grid-column field="address" title="地址" width="460" :editor="{ component: 'input' }"></tiny-grid-column>
|
||||
<tiny-grid-column
|
||||
|
|
|
@ -28,7 +28,7 @@ test.describe('下拉表格远程搜索', () => {
|
|||
const row2 = page.getByRole('row', { name: '省份2 城市2 区域2' })
|
||||
await expect(row2).not.toBeVisible()
|
||||
await row1.getByRole('cell').first().click()
|
||||
await expect(row1).toHaveClass(/tiny-grid-body__row row__selected/)
|
||||
await expect(row1).toHaveClass(/tiny-grid-body__row row__radio/)
|
||||
await expect(input).toHaveValue('省1-市1')
|
||||
|
||||
const row3 = page.getByRole('row', { name: '省份10 城市10 区域10' })
|
||||
|
|
|
@ -119,7 +119,7 @@ export default {
|
|||
methods: {
|
||||
remoteMethod(value) {
|
||||
const filterData = this.filter(value)
|
||||
|
||||
console.log(filterData, value)
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve(filterData)
|
||||
|
|
|
@ -21,7 +21,7 @@ test('嵌套表格(单选)', async ({ page }) => {
|
|||
await row.nth(1).getByRole('cell').first().click()
|
||||
await expect(input).toHaveValue('深圳1')
|
||||
await input.click()
|
||||
await expect(row.filter({ hasText: '深圳1' })).toHaveClass(/tiny-grid-body__row row__selected/)
|
||||
await expect(row.filter({ hasText: '深圳1' })).toHaveClass(/tiny-grid-body__row row__radio/)
|
||||
})
|
||||
|
||||
test('嵌套表格(多选)', async ({ page }) => {
|
||||
|
|
|
@ -23,7 +23,7 @@ test('下拉表格大数据', async ({ page }) => {
|
|||
|
||||
await input.click()
|
||||
await page.waitForTimeout(200)
|
||||
await expect(row.nth(1)).toHaveClass(/tiny-grid-body__row row__selected/)
|
||||
await expect(row.nth(1)).toHaveClass(/tiny-grid-body__row row__radio/)
|
||||
await expect(row).toHaveCount(6)
|
||||
await expect(page.getByRole('row', { name: '华南区12 广东省 广州市' })).toBeHidden()
|
||||
await row.nth(5).scrollIntoViewIfNeeded()
|
||||
|
|
|
@ -57,5 +57,5 @@ test('mini 尺寸', async ({ page }) => {
|
|||
await expect(input).toHaveClass(/tiny-input-mini/)
|
||||
await expect(tag.nth(0)).toHaveClass(/tiny-tag--mini tiny-tag--light/)
|
||||
// TODO: 此处继承input 尺寸的话,应该是24
|
||||
expect(height).toBeCloseTo(27, 1)
|
||||
expect(height).toBeCloseTo(24, 1)
|
||||
})
|
||||
|
|
|
@ -13,11 +13,11 @@ test('最大值最小值', async ({ page }) => {
|
|||
await page.mouse.down()
|
||||
await page.mouse.move(sliderWidth * -0.3 + x, y)
|
||||
const sliderTip = slider.locator('div').nth(2)
|
||||
await expect(sliderTip).toHaveText('0')
|
||||
await expect(sliderTip).toHaveText('30')
|
||||
await page.waitForTimeout(1000)
|
||||
await page.mouse.move(sliderWidth * 0.81 + x, y)
|
||||
const sliderTip1 = slider.locator('div').nth(2)
|
||||
await expect(sliderTip1).toHaveText('100')
|
||||
await expect(sliderTip1).toHaveText('62')
|
||||
await page.waitForTimeout(1000)
|
||||
await page.mouse.up()
|
||||
})
|
||||
|
|
|
@ -4,11 +4,19 @@
|
|||
<tiny-tag type="success"> 默认标签 </tiny-tag>
|
||||
<tiny-tag size="small" type="success"> 小型标签 </tiny-tag>
|
||||
<tiny-tag size="mini" type="success"> 超小标签 </tiny-tag>
|
||||
<br /><br />
|
||||
<tiny-tag size="medium" type="success" only-icon> <tiny-icon-heartempty /> </tiny-tag>
|
||||
<tiny-tag type="success" only-icon> <tiny-icon-heartempty /> </tiny-tag>
|
||||
<tiny-tag size="small" type="success" only-icon> <tiny-icon-heartempty /> </tiny-tag>
|
||||
<tiny-tag size="mini" type="success" only-icon> <tiny-icon-heartempty /> </tiny-tag>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
import { TinyTag } from '@opentiny/vue'
|
||||
import { IconHeartempty } from '@opentiny/vue-icon'
|
||||
|
||||
const TinyIconHeartempty = IconHeartempty()
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
|
|
@ -4,15 +4,22 @@
|
|||
<tiny-tag type="success"> 默认标签 </tiny-tag>
|
||||
<tiny-tag size="small" type="success"> 小型标签 </tiny-tag>
|
||||
<tiny-tag size="mini" type="success"> 超小标签 </tiny-tag>
|
||||
<br /><br />
|
||||
<tiny-tag size="medium" type="success" only-icon> <tiny-icon-heartempty /> </tiny-tag>
|
||||
<tiny-tag type="success" only-icon> <tiny-icon-heartempty /> </tiny-tag>
|
||||
<tiny-tag size="small" type="success" only-icon> <tiny-icon-heartempty /> </tiny-tag>
|
||||
<tiny-tag size="mini" type="success" only-icon> <tiny-icon-heartempty /> </tiny-tag>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { TinyTag } from '@opentiny/vue'
|
||||
import { IconHeartempty } from '@opentiny/vue-icon'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyTag
|
||||
TinyTag,
|
||||
TinyIconHeartempty: IconHeartempty()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
@ -11,11 +11,13 @@ export default {
|
|||
desc: {
|
||||
'zh-CN': `
|
||||
通过默认插槽,可以将文字和图标显示为一个标签。 <br>
|
||||
通过 <code>value</code> 属性,也可以设置标签值。
|
||||
通过 <code>value</code> 属性,也可以设置标签值。 <br>
|
||||
通过 <code>only-icon</code> 属性,设置标签只有图标。
|
||||
`,
|
||||
'en-US': `
|
||||
Through the default slot, text and ICONS can be displayed as a label. <br>
|
||||
Tag values can also be set using the <code>value</code> property.
|
||||
Tag values can also be set using the <code>value</code> property. <br>
|
||||
Use the <code>only-icon</code> property to set the label to only ICONS.
|
||||
`
|
||||
},
|
||||
codeFiles: ['basic-usage.vue']
|
||||
|
|
|
@ -27,7 +27,6 @@ import Pager from './src/pager'
|
|||
import Wizard from './src/wizard'
|
||||
import DialogBox from './src/dialog-box'
|
||||
import Popeditor from './src/popeditor'
|
||||
import DialogSelect from './src/dialog-select'
|
||||
import { version } from './package.json'
|
||||
|
||||
export default {
|
||||
|
@ -62,7 +61,6 @@ export default {
|
|||
Pager,
|
||||
Wizard,
|
||||
DialogBox,
|
||||
Popeditor,
|
||||
DialogSelect
|
||||
Popeditor
|
||||
}
|
||||
}
|
||||
|
|
File diff suppressed because it is too large
Load Diff
|
@ -66,7 +66,7 @@
|
|||
// 小型按钮最小宽度
|
||||
--tv-Button-min-width-small: 72px;
|
||||
// 小型按钮内图标的大小
|
||||
--tv-Button-size-icon-font-size-small: 14px;
|
||||
--tv-Button-size-icon-font-size-small: 16px;
|
||||
// 超小按钮字号
|
||||
--tv-Button-font-size-mini: var(--tv-font-size-sm);
|
||||
// 超小按钮高度
|
||||
|
|
|
@ -6,6 +6,7 @@
|
|||
@import './autocomplete/index.less';
|
||||
@import './badge/index.less';
|
||||
@import './base/index.less';
|
||||
@import './base-select/index.less';
|
||||
@import './breadcrumb/index.less';
|
||||
@import './breadcrumb-item/index.less';
|
||||
@import './bulletin-board/index.less';
|
||||
|
|
|
@ -92,6 +92,25 @@
|
|||
div:hover {
|
||||
background-color: var(--tv-MonthTable-bg-color-hover);
|
||||
}
|
||||
|
||||
&:first-of-type {
|
||||
div {
|
||||
border-radius: var(--tv-MonthTable-cell-border-radius-first);
|
||||
}
|
||||
|
||||
&.end-date {
|
||||
div {
|
||||
border-radius: var(--tv-MonthTable-cell-border-radius);
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
div {
|
||||
border-radius: var(--tv-MonthTable-cell-border-radius-last);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.end-date,
|
||||
|
|
|
@ -34,6 +34,11 @@
|
|||
var(--tv-border-radius-round, 999px);
|
||||
// 单元格圆角(结束月份)
|
||||
--tv-MonthTable-cell-border-radius-end: 0 var(--tv-border-radius-round, 999px) var(--tv-border-radius-round, 999px) 0;
|
||||
// 选中月份每行第一个单元格的圆角
|
||||
--tv-MonthTable-cell-border-radius-first: var(--tv-border-radius-round, 999px) 0 0
|
||||
var(--tv-border-radius-round, 999px);
|
||||
// 选中月份每行最后一个单元格的圆角
|
||||
--tv-MonthTable-cell-border-radius-last: 0 var(--tv-border-radius-round, 999px) var(--tv-border-radius-round, 999px) 0;
|
||||
|
||||
// 单元格边框色(选中)
|
||||
--tv-MonthTable-cell-border-color-today: var(--tv-color-border-active, #191919);
|
||||
|
|
|
@ -341,6 +341,10 @@
|
|||
visibility: hidden;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.tiny-svg {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-disabled,
|
||||
|
|
|
@ -29,16 +29,36 @@
|
|||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
|
||||
&.@{tag-prefix-cls}--only-icon.@{tag-prefix-cls}--only-icon.@{tag-prefix-cls}--only-icon {
|
||||
padding: var(--tv-Tag-only-icon-padding);
|
||||
|
||||
svg {
|
||||
font-size: var(--tv-Tag-only-icon-font-size);
|
||||
margin-right: 0; // 此时不需要右边距了
|
||||
}
|
||||
}
|
||||
|
||||
/** size 场景 */
|
||||
.size-mixin(@size) {
|
||||
@fs: %('var(--tv-Tag-font-size%a)', @size);
|
||||
@px: %('var(--tv-Tag-padding-x%a)', @size);
|
||||
@py: %('var(--tv-Tag-padding-y%a)', @size);
|
||||
@br: %('var(--tv-Tag-border-radius%a)', @size);
|
||||
@icon-fs: %('var(--tv-Tag-only-icon-font-size%a)', @size);
|
||||
@icon-py: %('var(--tv-Tag-only-icon-padding%a)', @size);
|
||||
|
||||
font-size: e(@fs);
|
||||
padding: e(@py) e(@px);
|
||||
border-radius: e(@br);
|
||||
|
||||
&.@{tag-prefix-cls}--only-icon.@{tag-prefix-cls}--only-icon {
|
||||
padding: e(@icon-py);
|
||||
|
||||
svg {
|
||||
font-size: e(@icon-fs);
|
||||
margin-right: 0; // 此时不需要右边距了
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.size-mixin(e(''));
|
||||
|
@ -149,13 +169,4 @@
|
|||
margin-right: var(--tv-Tag-slot-icon-margin-right);
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
&.@{tag-prefix-cls}--only-icon.@{tag-prefix-cls}--only-icon.@{tag-prefix-cls}--only-icon {
|
||||
padding: var(--tv-Tag-only-icon-padding);
|
||||
|
||||
svg {
|
||||
font-size: var(--tv-Tag-only-icon-font-size);
|
||||
margin-right: 0; // 此时不需要右边距了
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -24,6 +24,11 @@
|
|||
--tv-Tag-padding-y-mini: 0.5px;
|
||||
// 超小标签圆角
|
||||
--tv-Tag-border-radius-mini: var(--tv-border-radius-xs);
|
||||
// 标签在仅图标模式时,图标的大小
|
||||
--tv-Tag-only-icon-font-size-mini: 12px;
|
||||
// 标签在仅图标模式时,标签的内边距
|
||||
--tv-Tag-only-icon-padding-mini: 2px;
|
||||
|
||||
// 小型标签字号
|
||||
--tv-Tag-font-size-small: var(--tv-font-size-sm);
|
||||
// 小型标签水平间距
|
||||
|
@ -32,6 +37,11 @@
|
|||
--tv-Tag-padding-y-small: 0;
|
||||
// 小型标签圆角
|
||||
--tv-Tag-border-radius-small: var(--tv-border-radius-xs);
|
||||
// 标签在仅图标模式时,图标的大小
|
||||
--tv-Tag-only-icon-font-size-small: 14px;
|
||||
// 标签在仅图标模式时,标签的内边距
|
||||
--tv-Tag-only-icon-padding-small: 2px;
|
||||
|
||||
// 默认标签字号
|
||||
--tv-Tag-font-size: var(--tv-font-size-md);
|
||||
// 默认标签水平间距
|
||||
|
@ -40,6 +50,11 @@
|
|||
--tv-Tag-padding-y: 0.5px;
|
||||
// 默认标签圆角
|
||||
--tv-Tag-border-radius: var(--tv-border-radius-sm);
|
||||
// 标签在仅图标模式时,图标的大小
|
||||
--tv-Tag-only-icon-font-size: 16px;
|
||||
// 标签在仅图标模式时,标签的内边距
|
||||
--tv-Tag-only-icon-padding: 3px;
|
||||
|
||||
// 中等标签字号
|
||||
--tv-Tag-font-size-medium: var(--tv-font-size-md);
|
||||
// 中等标签水平间距
|
||||
|
@ -48,6 +63,10 @@
|
|||
--tv-Tag-padding-y-medium: 4.5px;
|
||||
// 中等标签圆角
|
||||
--tv-Tag-border-radius-medium: var(--tv-border-radius-md);
|
||||
// 标签在仅图标模式时,图标的大小
|
||||
--tv-Tag-only-icon-font-size-medium: 20px;
|
||||
// 标签在仅图标模式时,标签的内边距
|
||||
--tv-Tag-only-icon-padding-medium: 5px;
|
||||
|
||||
//------------------------------------------------------- 颜色 场景:(1、考虑border,虽然cloud design没有,但适配其它肯定有border的) ----
|
||||
|
||||
|
@ -201,8 +220,4 @@
|
|||
//------------------------------------------------------- 其它 场景:-----------------------------------
|
||||
// 标签插槽有前置图标时,图标的右间距
|
||||
--tv-Tag-slot-icon-margin-right: var(--tv-space-sm);
|
||||
// 标签在仅图标模式时,图标的大小
|
||||
--tv-Tag-only-icon-font-size: var(--tv-font-size-sm);
|
||||
// 标签在仅图标模式时,标签的内边距
|
||||
--tv-Tag-only-icon-padding: 3px;
|
||||
}
|
||||
|
|
|
@ -127,6 +127,7 @@ import IconExport from './src/export'
|
|||
import IconExpressSearch from './src/express-search'
|
||||
import IconEyeclose from './src/eyeclose'
|
||||
import IconEyeopen from './src/eyeopen'
|
||||
import IconFeedback from './src/feedback'
|
||||
import IconEditorAlignCenter from './src/editor-align-center'
|
||||
import IconEditorAlignLeft from './src/editor-align-left'
|
||||
import IconEditorAlignRight from './src/editor-align-right'
|
||||
|
@ -180,6 +181,7 @@ import IconFrownO from './src/frown-o'
|
|||
import IconFrown from './src/frown'
|
||||
import IconFullscreen from './src/fullscreen'
|
||||
import IconFullscreenLeft from './src/fullscreen-left'
|
||||
import IconFullscreenRight from './src/fullscreen-right'
|
||||
import IconGoBack from './src/go-back'
|
||||
import IconGrade from './src/grade'
|
||||
import IconGroupTransfer from './src/group-transfer'
|
||||
|
@ -219,6 +221,7 @@ import IconLineThrought from './src/line-throught'
|
|||
import IconLink from './src/link'
|
||||
import IconLoading from './src/loading'
|
||||
import IconLoadingShadow from './src/loading-shadow'
|
||||
import IconLocalePanel from './src/locale-panel'
|
||||
import IconLock from './src/lock'
|
||||
import IconMailContent from './src/mail-content'
|
||||
import IconMail from './src/mail'
|
||||
|
@ -339,6 +342,7 @@ import IconSetting from './src/setting'
|
|||
import IconShare from './src/share'
|
||||
import IconShareArrow from './src/share-arrow'
|
||||
import IconShoppingCard from './src/shopping-card'
|
||||
import IconShutdown from './src/shutdown'
|
||||
import IconSmileO from './src/smile-o'
|
||||
import IconSmile from './src/smile'
|
||||
import IconSoldOut from './src/sold-out'
|
||||
|
@ -377,6 +381,7 @@ import IconUnlock from './src/unlock'
|
|||
import IconUnsent from './src/unsent'
|
||||
import IconUpO from './src/up-o'
|
||||
import IconUp from './src/up'
|
||||
import IconUpdate from './src/update'
|
||||
import IconUpload from './src/upload'
|
||||
import IconUser from './src/user'
|
||||
import IconVersiontree from './src/versiontree'
|
||||
|
@ -431,6 +436,7 @@ import IconAddPicture from './src/add-picture'
|
|||
|
||||
// sync aui icons
|
||||
import IconAdministratorO from './src/administrator-o'
|
||||
import IconAgency from './src/agency'
|
||||
import IconAudit from './src/audit'
|
||||
import IconBatchFill from './src/batch-fill'
|
||||
import IconCardMode from './src/card-mode'
|
||||
|
@ -509,6 +515,7 @@ import IconShipped from './src/shipped'
|
|||
import IconSubstituteMaterial from './src/substitute-material'
|
||||
import IconSurchargeSettled from './src/surcharge-settled'
|
||||
import IconSurchargeToBeSettled from './src/surcharge-to-be-settled'
|
||||
import IconSynchronize from './src/synchronize'
|
||||
import IconToBeUploaded from './src/to-be-uploaded'
|
||||
import IconTotalNolume from './src/total-nolume'
|
||||
import IconTotalNumber from './src/total-number'
|
||||
|
@ -593,6 +600,8 @@ export {
|
|||
IconSurchargeSettled as iconSurchargeSettled,
|
||||
IconSurchargeToBeSettled,
|
||||
IconSurchargeToBeSettled as iconSurchargeToBeSettled,
|
||||
IconSynchronize,
|
||||
IconSynchronize as iconSynchronize,
|
||||
IconToBeUploaded,
|
||||
IconToBeUploaded as iconToBeUploaded,
|
||||
IconTotalNolume,
|
||||
|
@ -919,6 +928,8 @@ export {
|
|||
IconEyeclose as iconEyeclose,
|
||||
IconEyeopen,
|
||||
IconEyeopen as iconEyeopen,
|
||||
IconFeedback,
|
||||
IconFeedback as iconFeedback,
|
||||
IconEditorAlignCenter,
|
||||
IconEditorAlignCenter as iconEditorAlignCenter,
|
||||
IconEditorAlignLeft,
|
||||
|
@ -1025,6 +1036,8 @@ export {
|
|||
IconFullscreen as iconFullscreen,
|
||||
IconFullscreenLeft,
|
||||
IconFullscreenLeft as iconFullscreenLeft,
|
||||
IconFullscreenRight,
|
||||
IconFullscreenRight as iconFullscreenRight,
|
||||
IconMinscreenLeft,
|
||||
IconMinscreenLeft as iconMinscreenLeft,
|
||||
IconGoBack,
|
||||
|
@ -1105,6 +1118,8 @@ export {
|
|||
IconLoading as iconLoading,
|
||||
IconLoadingShadow,
|
||||
IconLoadingShadow as iconLoadingShadow,
|
||||
IconLocalePanel,
|
||||
IconLocalePanel as iconLocalePanel,
|
||||
IconLock,
|
||||
IconLock as iconLock,
|
||||
IconLeftWardArrow,
|
||||
|
@ -1345,6 +1360,8 @@ export {
|
|||
IconShareArrow as iconShareArrow,
|
||||
IconShoppingCard,
|
||||
IconShoppingCard as iconShoppingCard,
|
||||
IconShutdown,
|
||||
IconShutdown as iconShutdown,
|
||||
IconSmileO,
|
||||
IconSmileO as iconSmileO,
|
||||
IconSmile,
|
||||
|
@ -1421,6 +1438,8 @@ export {
|
|||
IconUpO as iconUpO,
|
||||
IconUp,
|
||||
IconUp as iconUp,
|
||||
IconUpdate,
|
||||
IconUpdate as iconUpdate,
|
||||
IconUpWard,
|
||||
IconUpWard as iconUpWard,
|
||||
IconUpload,
|
||||
|
@ -1457,6 +1476,8 @@ export {
|
|||
// sync aui icons
|
||||
IconAdministratorO,
|
||||
IconAdministratorO as iconAdministratorO,
|
||||
IconAgency,
|
||||
IconAgency as iconAgency,
|
||||
IconAudit,
|
||||
IconAudit as iconAudit,
|
||||
IconBatchFill,
|
||||
|
@ -1580,6 +1601,7 @@ export default {
|
|||
IconSubstituteMaterial,
|
||||
IconSurchargeSettled,
|
||||
IconSurchargeToBeSettled,
|
||||
IconSynchronize,
|
||||
IconToBeUploaded,
|
||||
IconTotalNolume,
|
||||
IconTotalNumber,
|
||||
|
@ -1741,6 +1763,7 @@ export default {
|
|||
IconExpressSearch,
|
||||
IconEyeclose,
|
||||
IconEyeopen,
|
||||
IconFeedback,
|
||||
IconEditorAlignCenter,
|
||||
IconEditorAlignLeft,
|
||||
IconEditorAlignRight,
|
||||
|
@ -1794,6 +1817,7 @@ export default {
|
|||
IconFrown,
|
||||
IconFullscreen,
|
||||
IconFullscreenLeft,
|
||||
IconFullscreenRight,
|
||||
IconMinscreenLeft,
|
||||
IconGoBack,
|
||||
IconGrade,
|
||||
|
@ -1834,6 +1858,7 @@ export default {
|
|||
IconLink,
|
||||
IconLoading,
|
||||
IconLoadingShadow,
|
||||
IconLocalePanel,
|
||||
IconLock,
|
||||
IconLeftWardArrow,
|
||||
IconMailContent,
|
||||
|
@ -1953,6 +1978,7 @@ export default {
|
|||
IconShare,
|
||||
IconShareArrow,
|
||||
IconShoppingCard,
|
||||
IconShutdown,
|
||||
IconSmileO,
|
||||
IconSmile,
|
||||
IconSoldOut,
|
||||
|
@ -1991,6 +2017,7 @@ export default {
|
|||
IconUnsent,
|
||||
IconUpO,
|
||||
IconUp,
|
||||
IconUpdate,
|
||||
IconUpWard,
|
||||
IconUpload,
|
||||
IconUser,
|
||||
|
@ -2009,6 +2036,7 @@ export default {
|
|||
IconAddPicture,
|
||||
// sync aui icons
|
||||
IconAdministratorO,
|
||||
IconAgency,
|
||||
IconAudit,
|
||||
IconBatchFill,
|
||||
IconCardMode,
|
||||
|
|
|
@ -156,6 +156,7 @@
|
|||
:type="state.getTagType"
|
||||
key="tags-collapse"
|
||||
data-tag="tags-collapse"
|
||||
only-icon
|
||||
:closable="false"
|
||||
:size="state.collapseTagSize"
|
||||
@click="onClickCollapseTag($event)"
|
||||
|
|
Loading…
Reference in New Issue