benyuanzhang
/
tiny-vue
forked from opentiny/tiny-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(relase) sync relase to dev (#1306) 

* fix(pager): [pager] change pager content to unicode (#1251)

* fix(build): fix build error and update versions

* fix(build): update theme version

* fix(vue): [grid] fix show icon condition (#1259)

* docs(grid): [grid] fix grid docs (#1260)

* docs(grid): [grid] fix grid docs

* docs(grid): [grid] fix grid docs

* fix(vue-common): fix process env error (#1277)

* fix(vue-common): fix process env error

* fix(vue-common): fix process env error

* fix(vue-common): fix process env error

* fix(modal): fix modal process env error

* fix(select): [dialog-box, select] fix select async emit form validate (#1292)

* fix(theme): x-design style css var fix (#1286)

---------

Co-authored-by: gimmyhehe <975402925@qq.com>
This commit is contained in:
ajaxzheng 2024-01-15 19:16:42 +08:00 committed by GitHub
parent 969c7972cf
commit b4365d0105
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 58 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
examples/sites/demos/pc/app/dialog-box/form-in-dialog-composition-api.vue
View File

@ -29,6 +29,12 @@
>
</tiny-checkbox-group>
</tiny-form-item>
<tiny-form-item label="技能" prop="skill" required>
<tiny-select v-model="value">
<tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</tiny-option>
</tiny-select>
</tiny-form-item>
</tiny-form>
<template #footer>
<tiny-button type="primary" :loading="btnSubmit.loading" @click="handleSubmit">{{
@ -51,9 +57,18 @@ import {
RadioGroup as TinyRadioGroup,
Checkbox as TinyCheckbox,
CheckboxGroup as TinyCheckboxGroup,
Notify
Notify,
Option as TinyOption,
Select as TinySelect
} from '@opentiny/vue'
const options = ref([
{ value: 'js', label: 'js' },
{ value: 'java', label: 'java' }
])
const value = ref('')
const btnSubmit = ref({
loading: false,
text: {

10
examples/sites/demos/pc/app/dialog-box/form-in-dialog.spec.ts
View File

@ -6,11 +6,17 @@ test('弹窗表单', async ({ page }) => {
const dialogBox = page.locator('.tiny-dialog-box')
await page.getByRole('button', { name: '弹出表单' }).click()
await expect(dialogBox.locator('.tiny-form')).toBeVisible()
await page.locator('#form-in-dialog').getByRole('textbox').click()
await page.locator('#form-in-dialog').getByRole('textbox').fill('123456')
await page.locator('#form-in-dialog').getByRole('textbox').first().click()
await page.locator('#form-in-dialog').getByRole('textbox').first().fill('123456')
await page.locator('label').filter({ hasText: '全部' }).locator('span').nth(1).click()
await page.locator('label').filter({ hasText: '架构' }).locator('span').nth(1).click()
await page.getByRole('button', { name: '确定' }).click()
await page.getByRole('button', { name: '弹出表单' }).click()
await expect(dialogBox.locator('.tiny-form')).toBeVisible()
// 验证下拉选择校验提示不会异常
await page.locator('#form-in-dialog').locator('.tiny-select__tags-group').click()
await page.locator('#form-in-dialog').locator('.tiny-svg.tiny-dialog-box__close').first().click()
await page.waitForTimeout(200)
await expect(page.locator('.tiny-form__valid.tiny-tooltip')).not.toBeVisible()
})

19
examples/sites/demos/pc/app/dialog-box/form-in-dialog.vue
View File

@ -29,6 +29,12 @@
>
</tiny-checkbox-group>
</tiny-form-item>
<tiny-form-item label="技能" prop="skill" required>
<tiny-select v-model="value">
<tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</tiny-option>
</tiny-select>
</tiny-form-item>
</tiny-form>
<template #footer>
<tiny-button type="primary" :loading="btnSubmit.loading" @click="handleSubmit">{{
@ -50,7 +56,9 @@ import {
RadioGroup,
Checkbox,
CheckboxGroup,
Notify
Notify,
Select,
Option
} from '@opentiny/vue'
export default {
@ -63,10 +71,17 @@ export default {
TinyRadio: Radio,
TinyRadioGroup: RadioGroup,
TinyCheckbox: Checkbox,
TinyCheckboxGroup: CheckboxGroup
TinyCheckboxGroup: CheckboxGroup,
TinySelect: Select,
TinyOption: Option
},
data() {
return {
options: [
{ value: 'js', label: 'js' },
{ value: 'java', label: 'java' }
],
value: '',
btnSubmit: {
loading: false,
text: {

4
packages/renderless/src/select/index.ts
View File

@ -572,9 +572,9 @@ export const handleBlur =
} else {
emit('blur', event)
}
dispatch(constants.COMPONENT_NAME.FormItem, constants.EVENT_NAME.formBlur, event?.target?.value)
}, 200)
// 表单校验不能异步，否则弹窗中嵌套表单会出现弹窗关闭后再出现校验提示的bug
dispatch(constants.COMPONENT_NAME.FormItem, constants.EVENT_NAME.formBlur, event?.target?.value)
state.softFocus = false
}

2
packages/theme/src/pager/smb-theme.js
View File

@ -5,7 +5,7 @@ export const tinyPagerSmbTheme = {
'ti-pager-height': '32px',
'ti-pager-input-height': '32px',
'ti-pager-poplist-item-padding-horizontal': '8px',
'ti-pager-active-font-color': 'var(--ti-common-color-text-link)',
'ti-pager-active-font-color': 'var(--ti-common-color-text-primary)',
'ti-pager-li-item-hover-text-color': 'var(--ti-pager-text-color)',
'ti-pager-goto-btn-text-hover-color': 'var(--ti-common-color-selected-text-color)',
'ti-pager-total-font-size': '14px',

14
packages/theme/src/radio-button/vars.less
View File

@ -17,13 +17,13 @@
--ti-radio-button-border-radius: var(--ti-common-border-radius-normal, 2px);
--ti-radio-button-font-size: var(--ti-common-font-size-base, 12px);
--ti-radio-button-bg-color: var(--ti-common-color-light, #fff);
--ti-radio-button-checked-normal-bg-color: var(--ti-base-color-brand-6, #5e7ce0);
--ti-radio-button-checked-normal-border-color: var(--ti-base-color-brand-6, #5e7ce0);
--ti-radio-button-checked-normal-box-shadow: -1px 0 0 0 var(--ti-base-color-brand-6, #5e7ce0);
--ti-radio-button-checked-hover-bg-color: var(--ti-base-color-brand-5, #7693f5);
--ti-radio-button-checked-hover-border-color: var(--ti-base-color-brand-5, #7693f5);
--ti-radio-button-checked-hover-box-shadow: -1px 0 0 0 var(--ti-base-color-brand-5, #7693f5);
--ti-radio-button-checked-normal-bg-color: var(--ti-common-color-primary-normal, #5e7ce0);
--ti-radio-button-checked-normal-border-color: var(--ti-common-color-primary-normal, #5e7ce0);
--ti-radio-button-checked-normal-box-shadow: -1px 0 0 0 var(--ti-common-color-primary-normal, #5e7ce0);
--ti-radio-button-checked-hover-bg-color: var(--ti-common-color-primary-hover, #7693f5);
--ti-radio-button-checked-hover-border-color: var(--ti-common-color-primary-hover, #7693f5);
--ti-radio-button-checked-hover-box-shadow: -1px 0 0 0 var(--ti-common-color-primary-hover, #7693f5);
--ti-radio-button-disabled-text-color: var(--ti-common-color-text-disabled, #adb0b8);
--ti-radio-button-disabled-bg-color: var(--ti-base-color-bg-5, #f5f5f6);
--ti-radio-button-disabled-bg-color: var(--ti-common-color-bg-disabled, #f5f5f6);
--ti-radio-button-medium-font-size: var(--ti-common-font-size-1, 14px);
}

8
packages/vue-common/src/index.ts
View File

@ -140,6 +140,7 @@ export const setup = ({ props, context, renderless, api, extendOptions = {}, mon
const globalDesignConfig: DesignConfig = hooks.inject(design.configKey, {})
const designConfig = globalDesignConfig?.components?.[getComponentName().replace($prefix, '')]
const specifyPc = typeof process === 'object' ? process.env?.TINY_MODE : null
const utils = {
$prefix,
t,
@ -147,7 +148,7 @@ export const setup = ({ props, context, renderless, api, extendOptions = {}, mon
designConfig,
globalDesignConfig
}
if (process.env.TINY_MODE !== 'pc') {
if (specifyPc !== 'pc') {
utils.mergeClass = mergeClass
}
@ -169,7 +170,7 @@ export const setup = ({ props, context, renderless, api, extendOptions = {}, mon
dp: utils.defineParentInstanceProperties,
gcls: (key) => getElementCssClass(classes, key)
}
if (process.env.TINY_MODE !== 'pc') {
if (specifyPc !== 'pc') {
attrs.m = mergeClass
}
/**
@ -220,7 +221,8 @@ export const svg = ({ name = 'Icon', component }) => {
const attrs = isVue3 ? tinyTag : { attrs: tinyTag }
let className = 'tiny-svg'
if (process.env.TINY_MODE !== 'pc' && isMobileFirst) {
const specifyPc = typeof process === 'object' ? process.env?.TINY_MODE : null
if (specifyPc !== 'pc' && isMobileFirst) {
className = mergeClass('h-4 w-4 inline-block', customClass || '', mergeProps.class || '')
}

3
packages/vue/src/modal/index.ts
View File

@ -132,7 +132,8 @@ setupComponent.TINYModal = {
const isVue2 = !!Vue.component
const tinyMode = isVue2 ? Vue.prototype.tiny_mode : Vue.config.globalProperties.tiny_mode
const tinyTheme = isVue2 ? Vue.prototype.tiny_theme : Vue.config.globalProperties.tiny_theme
TINYModal.tiny_mode = process.env.TINY_MODE || (tinyMode && tinyMode.value)
const specifyPc = typeof process === 'object' ? process.env?.TINY_MODE : null
TINYModal.tiny_mode = specifyPc || (tinyMode && tinyMode.value)
TINYModal.tiny_theme = tinyTheme && tinyTheme.value
TINYModal.installed = true