test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-02 11:17:46 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

fix(hooks): [use-namespace] exclude invalid CSS variables (#8905)

Browse Source 
* fix(hooks): [use-namespace] exclude invalid CSS variables

* test(hooks): [use-namespace] add test
This commit is contained in:
qiang 2022-07-28 22:01:22 +08:00 committed by GitHub
parent ef90159db5
commit c28e1cfa42
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/hooks/__tests__/use-namespace.test.tsx
View File

@ -7,6 +7,14 @@ import type { VueWrapper } from '@vue/test-utils'
const TestComp = defineComponent({
setup() {
const ns = useNamespace('table')
const cssVar = ns.cssVar({
'border-style': 'solid',
'border-width': '',
})
const cssVarBlock = ns.cssVarBlock({
'text-color': '#409eff',
'active-color': '',
})
return () => (
<div
id="testId"
@ -27,6 +35,7 @@ const TestComp = defineComponent({
ns.is('hover', undefined), // return empty string
ns.is('clicked', false), // return empty string
]}
style={{ ...cssVar, ...cssVarBlock }}
>
text
</div>
@ -64,5 +73,11 @@ describe('use-locale', () => {
'ep-table-body__content--active', // bem('body', 'content', 'active')
'is-focus', // is('focus')
])
const style = wrapper.find('#testId').attributes('style')
expect(style).toMatch('--ep-border-style: solid;')
expect(style).not.toMatch('--ep-border-width:')
expect(style).toMatch('--ep-table-text-color: #409eff;')
expect(style).not.toMatch('--ep-table-active-color:')
})
})

8
packages/hooks/use-namespace/index.ts
View File

@ -62,7 +62,9 @@ export const useNamespace = (block: string) => {
const cssVar = (object: Record<string, string>) => {
const styles: Record<string, string> = {}
for (const key in object) {
styles[`--${namespace.value}-${key}`] = object[key]
if (object[key]) {
styles[`--${namespace.value}-${key}`] = object[key]
}
}
return styles
}
@ -70,7 +72,9 @@ export const useNamespace = (block: string) => {
const cssVarBlock = (object: Record<string, string>) => {
const styles: Record<string, string> = {}
for (const key in object) {
styles[`--${namespace.value}-${block}-${key}`] = object[key]
if (object[key]) {
styles[`--${namespace.value}-${block}-${key}`] = object[key]
}
}
return styles
}