Skip to content
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

feat: config-provider #271

Merged
merged 4 commits into from
Jun 8, 2023
Merged

feat: config-provider #271

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
be63119
feat: config-provider
GaoNeng-wWw Jun 5, 2023
73aacec
🐞 fix(config-provider):
GaoNeng-wWw Jun 6, 2023
1eec01a
🧪 test(config-provider): 补充单元测试
GaoNeng-wWw Jun 6, 2023
07e57b2
🐞 fix(config-provider): 修改检视意见
GaoNeng-wWw Jun 7, 2023
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
Prev Previous commit
🐞 fix(config-provider): 修改检视意见
  • Loading branch information
@GaoNeng-wWw
GaoNeng-wWw committed Jun 7, 2023
commit 07e57b24fe8ceb786c2952a893ee082395a0fc24
12 changes: 7 additions & 5 deletions examples/docs/resources/pc/api/zh-CN/config-provider.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,25 +5,27 @@
"sample": "base",
"desc": "规范",
"type": "ConfigProviderProps",
"defaultValue": "{breakPoints: {'xs': 480,'sm': 640,'md': 768,'lg': 1024,'xl': 1280,'2xl': 1536},direction: 'ltr',tag: {enable: true,name: 'div'}}"
"defaultValue": ""
},
{
"name": "design.breakPoints",
"name": "breakPoints",
"sample": "base",
"desc": "端点, 为Layout提供",
"desc": "断点, 为Layout提供",
"type": "breakPoint",
"defaultValue": "{'xs': 480,'sm': 640,'md': 768,'lg': 1024,'xl': 1280,'2xl': 1536}"
},
{
"name": "design.direction",
"name": "direction",
"sample": "text-dire",
"desc": "文字排版方向",
"type": "'ltr' | 'rtl'",
"defaultValue": "ltr"
},
{
"name": "design.tag",
"name": "tag",
"type": "object",
"desc": "是否被元素包裹, 如果是vue2且没有一个单一节点, 组件会自动创建一个div",
"sample": "base",
"defaultValue": "{enable: true,name: 'div'}"
}
]
Expand Down
41 changes: 21 additions & 20 deletions examples/docs/resources/pc/demo/config-provider/base.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,19 @@
<template>
<tiny-config-provider :design="design">
<tiny-tag>这是一个Tag</tiny-tag>
</tiny-config-provider>
<br />
<div :style="[design.tag.enable && 'padding: 0px 1em;']">
<tiny-switch v-model="design.tag.enable" />
<div>
<tiny-config-provider :tag="tag">
<tiny-tag>这是一个Tag</tiny-tag>
<tiny-tag>{{ tagEnable }}</tiny-tag>
</tiny-config-provider>
<br />
<div :style="[tag.enable && 'padding: 0px 1em;']">
<tiny-switch v-model="tag.enable" />
</div>
</div>
</template>

<script>
import { ConfigProvider, Tag, Switch } from '@opentiny/vue'

export default {
components: {
TinyConfigProvider: ConfigProvider,
Expand All @@ -18,22 +22,16 @@ export default {
},
data() {
return {
design: {
breakPoints: {
'xs': 480,
'sm': 640,
'md': 768,
'lg': 1024,
'xl': 1280,
'2xl': 1536
},
direction: 'ltr',
tag: {
enable: true,
name: 'div'
},
tag: {
enable: true,
name: 'div'
}
}
},
computed: {
tagEnable() {
return this.tag.enable ? '被DOM包裹' : '没有被DOM包裹'
}
}
}
</script>
Expand All @@ -44,4 +42,7 @@ export default {
border: 1px solid #ccc;
border-radius: 1em;
}
.tiny-tag {
margin-right: 10px;
}
</style>
166 changes: 78 additions & 88 deletions examples/docs/resources/pc/demo/config-provider/text-direct.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,81 +1,84 @@
<template>
<tiny-config-provider :design="design">
<h1>Text</h1>
<h1>المعرفة نور والجهل ظلام</h1>
<div>
<span>ما هو مكتوب في الكتب هو مجرد كلمات ، وما يتم تذكره هو المعرفة</span>
</div>
<hr />
<h1>Input</h1>
<tiny-input v-model="input" placeholder="الرجاء إدخال المحتوى"></tiny-input>
<h1>Container</h1>
<div class="content">
<tiny-layout>
<tiny-row>
<tiny-col :span="12">
<div class="col">
span 12
</div>
</tiny-col>
</tiny-row>
<tiny-row>
<tiny-col :span="3">
<div class="col">
span 3
</div>
</tiny-col>
<tiny-col :span="6">
<div class="col">
span 6
</div>
</tiny-col>
<tiny-col :span="3">
<div class="col">
span 3
</div>
</tiny-col>
</tiny-row>
<tiny-row>
<tiny-col :span="2">
<div class="col">
span 2
</div>
</tiny-col>
<tiny-col :span="3">
<div class="col">
span 3
</div>
</tiny-col>
<tiny-col :span="2">
<div class="col">
span 2
</div>
</tiny-col>
<tiny-col :span="3">
<div class="col">
span 3
</div>
</tiny-col>
<tiny-col :span="2">
<div class="col">
span 2
</div>
</tiny-col>
</tiny-row>
</tiny-layout>
</div>
</tiny-config-provider>
<div>
<tiny-config-provider :direction="direction">
<h1>Text</h1>
<h1>المعرفة نور والجهل ظلام</h1>
<div>
<span>ما هو مكتوب في الكتب هو مجرد كلمات ، وما يتم تذكره هو المعرفة</span>
</div>
<hr />
<h1>Input</h1>
<tiny-input v-model="input" placeholder="الرجاء إدخال المحتوى"></tiny-input>
<h1>Container</h1>
<div class="content">
<tiny-layout>
<tiny-row>
<tiny-col :span="12">
<div class="col">
span 12
</div>
</tiny-col>
</tiny-row>
<tiny-row>
<tiny-col :span="3">
<div class="col">
span 3
</div>
</tiny-col>
<tiny-col :span="6">
<div class="col">
span 6
</div>
</tiny-col>
<tiny-col :span="3">
<div class="col">
span 3
</div>
</tiny-col>
</tiny-row>
<tiny-row>
<tiny-col :span="2">
<div class="col">
span 2
</div>
</tiny-col>
<tiny-col :span="3">
<div class="col">
span 3
</div>
</tiny-col>
<tiny-col :span="2">
<div class="col">
span 2
</div>
</tiny-col>
<tiny-col :span="3">
<div class="col">
span 3
</div>
</tiny-col>
<tiny-col :span="2">
<div class="col">
span 2
</div>
</tiny-col>
</tiny-row>
</tiny-layout>
</div>
</tiny-config-provider>

<tiny-button @click="changeDirect('rtl')">
RTL
</tiny-button>
<tiny-button @click="changeDirect('ltr')">
LTR
</tiny-button>
<tiny-button @click="changeDirect('rtl')">
RTL
</tiny-button>
<tiny-button @click="changeDirect('ltr')">
LTR
</tiny-button>
</div>
</template>

<script>
import { ConfigProvider, Button, Input, Layout, Row, Col } from '@opentiny/vue'

export default {
components: {
TinyConfigProvider: ConfigProvider,
Expand All @@ -87,26 +90,13 @@ export default {
},
data() {
return {
design: {
breakPoints: {
'xs': 480,
'sm': 640,
'md': 768,
'lg': 1024,
'xl': 1280,
'2xl': 1536
},
direction: 'ltr',
tag: {
enable: true,
name: 'div'
},
}
direction: 'ltr',
input: ''
}
},
methods: {
changeDirect(direct) {
this.design.direction = direct
this.direction = direct
}
}
}
Expand Down
73 changes: 58 additions & 15 deletions packages/vue/src/config-provider/__tests__/config-provider.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
import { mountPcMode } from '@opentiny-internal/vue-test-utils'
import { describe, test, expect } from 'vitest'
import ConfigProvider from '@opentiny/vue-config-provider'
import ConfigProvider, { configProviderContextKey } from '@opentiny/vue-config-provider'
import { defineComponent, h, inject } from 'vue'
import type { ConfigProviderProps } from '../src/props'
import { isVue2 } from '@opentiny/vue-common'

describe('PC Mode', () => {
const mount = mountPcMode
test('rtl', () => {
const wrapper = mount(ConfigProvider, {
props: {
design: {
direction: 'rtl'
}
direction: 'rtl'
}
})
expect(wrapper.classes()).toContain('tiny-config-provider--rtl')
Expand All @@ -18,32 +19,74 @@ describe('PC Mode', () => {
test('no tag', () => {
const wrapper = mount(ConfigProvider, {
props: {
design: {
tag: {
enable: false,
}
tag: {
enable: false,
}
},
slots: {
default: ['<button></button>'],
default: ['<button>just button</button>'],
}
})
expect(wrapper.html()).not.contain('div')
})
test('has tag but not div', () => {
const wrapper = mount(ConfigProvider, {
props: {
design: {
tag: {
enable: true,
name: 'custom-el'
}
tag: {
enable: true,
name: 'custom-el'
}
}
})
const html = wrapper.html()
expect(html).contain('custom-el')
expect(html).not.contain('div')
}, { repeats: 5 })
})
test('mutil node', () => {
const wrapper = mount(ConfigProvider, {
props: {
tag: {
enable: false
}
},
slots: {
default: ['<button>btn1</button>', '<button>btn2</button>']
}
})
if (isVue2) {
expect(wrapper.html()).contain('div')
expect(wrapper.classes().length).toBe(0)
} else {
expect(wrapper.html()).not.contain('div')
}
})
})
if (!isVue2) {
describe('inject', () => {
test('one layer', () => {
let component
if (!isVue2) {
component = defineComponent({
name: 'CustomComponent',
setup() {
const config = inject<ConfigProviderProps>(configProviderContextKey)
expect(config).not.toBeNull()
expect(config).not.toStrictEqual({})
expect(config?.direction).not.toBe('ltr')
// just fix Component is missing template or render function.
return () => h('div')
}
})
}
mount(ConfigProvider, {
slots: {
default: [component]
},
props: {
direction: 'rtl'
}
})
})
})
}
})
7 changes: 7 additions & 0 deletions packages/vue/src/config-provider/hooks/use-config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import type { ConfigProviderProps } from '../src/props'
import { configProviderContextKey } from '../index'
import { hooks } from '@opentiny/vue-common/src'

export function useConfig(): ConfigProviderProps | {} {
return hooks.inject(configProviderContextKey) ?? {}
}
Loading