fix(components): release-3.12.0 sync to dev (#1012)
* fix(row): [layout] restore the gutter value, and add gutter demo (#1006) * fix(row): restore the gutter value, and add gutter demo * fix(row): fix e2e test * fix(dropdown): fix console warning (#1000) * fix(select): [select] Fixed an issue where a blank area is displayed when the select component uses the optimization attribute (#989) * docs(layout): fix gutter's default value (#1011) --------- Co-authored-by: 申君健 <40288193@qq.com> Co-authored-by: gimmyhehe <975402925@qq.com> Co-authored-by: MomoPoppy <125256456+MomoPoppy@users.noreply.github.com>
This commit is contained in:
ajaxzheng
GitHub
parent
4854981fae
commit
d3e2d6bc05
|
|
@ -12,6 +12,17 @@
|
|||
<div class="col">gutter {{ gutter }}px</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
<tiny-row :gutter="0" noSpace>
|
||||
<tiny-col :span="4">
|
||||
<div class="col">noSpace</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="4">
|
||||
<div class="col">noSpace</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="4">
|
||||
<div class="col">noSpace</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
</tiny-layout>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -13,4 +13,7 @@ test('gutter栅格间隔', async ({ page }) => {
|
|||
|
||||
const row3 = layout.nth(2)
|
||||
await expect(row3.locator('div').first()).toHaveCSS('padding-left', '10px')
|
||||
|
||||
const row4 = layout.first()
|
||||
await expect(row4).toHaveCSS('margin-left', '0px')
|
||||
})
|
||||
|
|
|
|||
|
|
@ -12,6 +12,17 @@
|
|||
<div class="col">gutter {{ gutter }}px</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
<tiny-row :gutter="0" noSpace>
|
||||
<tiny-col :span="4">
|
||||
<div class="col">noSpace</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="4">
|
||||
<div class="col">noSpace</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="4">
|
||||
<div class="col">noSpace</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
</tiny-layout>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -81,8 +81,9 @@ export default {
|
|||
'name': { 'zh-CN': '栅格间隔', 'en-US': 'Gutter' },
|
||||
'desc': {
|
||||
'zh-CN': `
|
||||
通过使用 <code>Row</code> 组件的 <code>gutter</code> 属性实现栅格间隔。
|
||||
不设置 <code>gutter</code> 时，组件会默认为 <code>Col</code> 设置<code> 左右10px </code>的padding值。
|
||||
通过使用 <code>Row</code> 组件的 <code>gutter</code> 属性实现栅格间隔。<br>
|
||||
不设置 <code>gutter</code> 时，组件会默认为 <code>Col</code> 设置<code> 左右10px </code>的padding值<br>
|
||||
通过 <code>noSpace</code> 属性，让子项间没有间距。
|
||||
`,
|
||||
'en-US': `
|
||||
This is done by using the <code>gutter</code> property of the <code>Row</code> component.
|
||||
|
|
@ -156,10 +157,20 @@ export default {
|
|||
{
|
||||
'name': 'gutter',
|
||||
'type': 'number',
|
||||
'defaultValue': '20',
|
||||
'defaultValue': '0',
|
||||
'desc': { 'zh-CN': '子项的间隔的像素', 'en-US': 'The spacing of the child items in pixels' },
|
||||
'demoId': 'gutter'
|
||||
},
|
||||
{
|
||||
'name': 'noSpace',
|
||||
'type': 'boolean',
|
||||
'defaultValue': 'false',
|
||||
'desc': {
|
||||
'zh-CN': '子项没有间隔，相当于强制gutter=0的情况',
|
||||
'en-US': 'Child entries have no spacing, equivalent to forcing gutter=0'
|
||||
},
|
||||
'demoId': 'gutter'
|
||||
},
|
||||
{
|
||||
'name': 'justify',
|
||||
'type': 'string',
|
||||
|
|
|
|||
|
|
@ -120,10 +120,15 @@ export const getStyle =
|
|||
const no = props.no
|
||||
const styles = []
|
||||
let gutter = parent ? parent.gutter : null
|
||||
let noSpace = parent ? parent.noSpace : null
|
||||
let order = ''
|
||||
|
||||
gutter = gutter / 2
|
||||
styles.push(`padding-left:${gutter}px;padding-right:${gutter}px;`)
|
||||
if (gutter) {
|
||||
gutter = gutter / 2
|
||||
styles.push(`padding-left:${gutter}px;padding-right:${gutter}px;`)
|
||||
} else if (noSpace) {
|
||||
styles.push('padding-left:0;padding-right:0;')
|
||||
}
|
||||
|
||||
if (parent && parent.flex && parent.order) {
|
||||
/* istanbul ignore next */
|
||||
|
|
|
|||
|
|
@ -14,13 +14,12 @@ import { setSubitemAttrValue, setGlobalAttrValue, getClassName, getStyle, row }
|
|||
|
||||
export const api = ['state']
|
||||
|
||||
export const renderless = (props, { computed, reactive, inject }, { parent }) => {
|
||||
export const renderless = (props, { computed, reactive }, { parent }) => {
|
||||
const api = {}
|
||||
const state = reactive({
|
||||
row: computed(() => api.row()),
|
||||
style: computed(() => api.getStyle()),
|
||||
className: computed(() => api.getClassName()),
|
||||
layout: inject('layout')
|
||||
className: computed(() => api.getClassName())
|
||||
})
|
||||
|
||||
Object.assign(api, {
|
||||
|
|
|
|||
|
|
@ -296,11 +296,18 @@ export const getOption =
|
|||
}
|
||||
|
||||
if (option) {
|
||||
if (!option.currentLabel) {
|
||||
option.currentLabel = option[props.textField]
|
||||
}
|
||||
if (props.optimization) {
|
||||
// 此处克隆避免引起 state.datas 发生变化触发 computeOptimizeOpts
|
||||
const cloneOption = extend(true, {}, option)
|
||||
cloneOption.currentLabel = cloneOption[props.textField]
|
||||
|
||||
return option
|
||||
return cloneOption
|
||||
} else {
|
||||
if (!option.currentLabel) {
|
||||
option.currentLabel = option[props.textField]
|
||||
}
|
||||
return option
|
||||
}
|
||||
}
|
||||
|
||||
let label = ''
|
||||
|
|
|
|||
|
|
@ -93,7 +93,7 @@ export default defineComponent({
|
|||
IconDeltaUp: iconDeltaUp()
|
||||
},
|
||||
directives: directive({ Clickoutside }),
|
||||
emits: ['open'],
|
||||
emits: ['open', 'created'],
|
||||
setup(props, context) {
|
||||
return setup({ props, context, renderless, api })
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
<slot>
|
||||
<tiny-dropdown-item
|
||||
v-for="(item, index) in options"
|
||||
:itemData="item"
|
||||
:item-data="item"
|
||||
:label="item[textField]"
|
||||
:key="index"
|
||||
:icon="item.icon"
|
||||
|
|
@ -47,7 +47,7 @@ export default defineComponent({
|
|||
components: {
|
||||
TinyDropdownItem: DropdownItem
|
||||
},
|
||||
emits: ['mouseenter', 'mouseleave'],
|
||||
emits: ['mouseenter', 'mouseleave', 'created'],
|
||||
props: [
|
||||
...props,
|
||||
'visibleArrow',
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export default defineComponent({
|
|||
flex: Boolean,
|
||||
gutter: {
|
||||
type: Number,
|
||||
default: 20,
|
||||
default: 0,
|
||||
validator(value: number) {
|
||||
return value >= 0
|
||||
}
|
||||
|
|
@ -42,6 +42,10 @@ export default defineComponent({
|
|||
tag: {
|
||||
type: String,
|
||||
default: 'div'
|
||||
},
|
||||
noSpace: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
setup(props, context) {
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ import { renderless, api } from '@opentiny/vue-renderless/row/vue'
|
|||
import { props, setup, defineComponent } from '@opentiny/vue-common'
|
||||
|
||||
export default defineComponent({
|
||||
props: [...props, 'flex', 'gutter', 'justify', 'align', 'order', 'tag'],
|
||||
props: [...props, 'flex', 'gutter', 'justify', 'align', 'order', 'tag', 'noSpace'],
|
||||
setup(props, context) {
|
||||
return setup({ props, context, renderless, api })
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue