Skip to content

feat(config-provider): [config-provider] 支持合并主题配置 #3187

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: dev
Choose a base branch
from
Open

feat(config-provider): [config-provider] 支持合并主题配置 #3187

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
204 changes: 204 additions & 0 deletions examples/sites/demos/pc/app/config-provider/merge-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,204 @@
<template>
<div>
<h2>父主题配置</h2>

<tiny-config-provider :design="parentDesign">
<h2>子主题配置</h2>
<tiny-config-provider :design="childDesign1">
<div class="demo-form">
<tiny-alert type="warning" description="全局配置组件的默认行为"></tiny-alert>
<tiny-form ref="ruleFormRef" :model="formData">

This comment was marked as duplicate.

Sign in to view

<tiny-form-item label="年龄" prop="age" required>
<tiny-numeric v-model="formData.age"></tiny-numeric>
</tiny-form-item>
<tiny-form-item label="姓名" prop="name" required>
<tiny-input v-model="formData.name"></tiny-input>
</tiny-form-item>
<tiny-form-item>
<tiny-button @click="handleSubmitPromise" type="primary"> 校验 </tiny-button>
</tiny-form-item>
</tiny-form>
</div>
</tiny-config-provider>
<h2>子主题配置</h2>
<tiny-config-provider :design="childDesign2">
<div class="demo-form">
<tiny-alert type="warning" description="全局配置组件的默认行为"></tiny-alert>
<tiny-form ref="ruleFormRef" :model="formData">
<tiny-form-item label="年龄" prop="age" required>
<tiny-numeric v-model="formData.age"></tiny-numeric>
</tiny-form-item>
<tiny-form-item label="姓名" prop="name" required>
<tiny-input v-model="formData.name"></tiny-input>
</tiny-form-item>
<tiny-form-item>
<tiny-button @click="handleSubmitPromise" type="primary"> 校验 </tiny-button>
</tiny-form-item>
</tiny-form>
</div>
</tiny-config-provider>
</tiny-config-provider>

<h2>主题配置</h2>
<tiny-config-provider :design="noParentDesign">
<div class="demo-form">
<tiny-alert type="warning" description="全局配置组件的默认行为"></tiny-alert>
<tiny-form ref="ruleFormRef" :model="formData">
<tiny-form-item label="年龄" prop="age" required>
<tiny-numeric v-model="formData.age"></tiny-numeric>
</tiny-form-item>
<tiny-form-item label="姓名" prop="name" required>
<tiny-input v-model="formData.name"></tiny-input>
</tiny-form-item>
<tiny-form-item>
<tiny-button @click="handleSubmitPromise" type="primary"> 校验 </tiny-button>
</tiny-form-item>
</tiny-form>
</div>
</tiny-config-provider>
</div>
</template>

<script setup>
import { ref } from 'vue'
import {
TinyConfigProvider,
TinyAlert,
TinyModal,
TinyForm,
TinyFormItem,
TinyInput,
TinyNumeric,
TinyButton
} from '@opentiny/vue'
import { iconWarningTriangle } from '@opentiny/vue-icon'

const ruleFormRef = ref()

const parentDesign = ref({
name: 'x-design-p', // 设计规范名称
version: '1.0.0', // 设计规范版本号
components: {
Button: {
props: {
round: true
}
}
}
})
const childDesign1 = ref({
name: 'x-design-1', // 设计规范名称
version: '1.0.0', // 设计规范版本号
components: {
Button: {
props: {
resetTime: 0
}
}
}
})
const childDesign2 = ref({
name: 'x-design-2', // 设计规范名称
version: '1.0.0', // 设计规范版本号
components: {
Button: {
props: {
round: true
}
},
Alert: {
icons: {
warning: iconWarningTriangle()
},
/**
*
* @param {*} props 组件属性集合
* @param {*} hooks vue2-->@composition-api,vue3-->vue
* @param {*} param2 context
* @param {*} api Alert 组件 renderless 层方法属性和方法集合
*/
renderless: (props, hooks, { emit }, api) => {
const state = api.state
return {
handleClose() {
state.show = false
TinyModal.message('触发自定方法')
emit('close')
}
}
}
}
}
})
const noParentDesign = {
name: 'x-design-n', // 设计规范名称
version: '1.0.0', // 设计规范版本号
components: {
Button: {
props: {
round: true
}
},
Form: {
props: {
hideRequiredAsterisk: true
}
}
}
}

const design = {
name: 'x-design', // 设计规范名称
version: '1.0.0', // 设计规范版本号
components: {
Form: {
props: {
hideRequiredAsterisk: true
}
},
Button: {
props: {
resetTime: 0,
round: true
}
},
Alert: {
icons: {
warning: iconWarningTriangle()
},
/**
*
* @param {*} props 组件属性集合
* @param {*} hooks vue2-->@composition-api,vue3-->vue
* @param {*} param2 context
* @param {*} api Alert 组件 renderless 层方法属性和方法集合
*/
renderless: (props, hooks, { emit }, api) => {
const state = api.state
return {
handleClose() {
state.show = false
TinyModal.message('触发自定方法')
emit('close')
}
}
}
}
}
}

const handleSubmitPromise = () => {
ruleFormRef.value.validate().catch(() => {})
}

const formData = ref({
name: '',
age: ''
})
</script>

<style scoped>
.demo-form {
width: 380px;
}
</style>
25 changes: 25 additions & 0 deletions examples/sites/demos/pc/app/config-provider/merge.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { test, expect } from '@playwright/test'

test('测试自定义事件', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('config-provider#merge')

// 验证自定义方法
const demo = page.locator('#merge')
await demo.locator('.tiny-config-provider .tiny-alert > .tiny-alert__close').click()
await page.waitForTimeout(500)
await expect(page.locator('.tiny-modal > .tiny-modal__box').nth(1)).toHaveText('触发自定方法')

// 验证必填星号
await expect(demo.locator('.tiny-form')).toBeVisible()
const beforeElement = await page.evaluate(() => {
const labelBefore = document.querySelector('.tiny-form .tiny-form-item__label')
const { display, content } = window.getComputedStyle(labelBefore, '::before')
return { display, content }
})
expect(beforeElement.content).toBe('none')

// 验证按钮点击禁用时间
await demo.locator('.tiny-button').click()
await expect(demo.locator('.tiny-button')).not.toBeDisabled({ timeout: 300 })
})
Loading
Loading