mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-05-21 22:09:16 +08:00
feat(CollapseItem): add readonly prop (#8445)
This commit is contained in:
neverland
GitHub
parent
b594ab1192
commit
65185069bf
@ -2,7 +2,7 @@ import { ref, watch, computed, nextTick, defineComponent } from 'vue';
|
||||
|
||||
// Utils
|
||||
import { cellProps } from '../cell/Cell';
|
||||
import { createNamespace } from '../utils';
|
||||
import { createNamespace, pick } from '../utils';
|
||||
import { COLLAPSE_KEY, CollapseProvide } from '../collapse/Collapse';
|
||||
|
||||
// Composables
|
||||
@ -22,6 +22,7 @@ export default defineComponent({
|
||||
...cellProps,
|
||||
name: [Number, String],
|
||||
disabled: Boolean,
|
||||
readonly: Boolean,
|
||||
isLink: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
@ -94,13 +95,24 @@ export default defineComponent({
|
||||
};
|
||||
|
||||
const onClickTitle = () => {
|
||||
if (!props.disabled) {
|
||||
if (!props.disabled && !props.readonly) {
|
||||
toggle();
|
||||
}
|
||||
};
|
||||
|
||||
const renderTitle = () => {
|
||||
const { border, disabled } = props;
|
||||
const { border, disabled, readonly } = props;
|
||||
const attrs = pick(
|
||||
props,
|
||||
Object.keys(cellProps) as Array<keyof typeof cellProps>
|
||||
);
|
||||
|
||||
if (readonly) {
|
||||
attrs.isLink = false;
|
||||
}
|
||||
if (disabled || readonly) {
|
||||
attrs.clickable = false;
|
||||
}
|
||||
|
||||
return (
|
||||
<Cell
|
||||
@ -116,10 +128,9 @@ export default defineComponent({
|
||||
expanded: expanded.value,
|
||||
borderless: !border,
|
||||
})}
|
||||
tabindex={disabled ? -1 : 0}
|
||||
aria-expanded={String(expanded.value)}
|
||||
onClick={onClickTitle}
|
||||
{...props}
|
||||
{...attrs}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@ -44,10 +44,6 @@
|
||||
& .van-cell__right-icon {
|
||||
color: @collapse-item-title-disabled-color;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: @white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -132,6 +132,7 @@ export default {
|
||||
| label | Description below the title | _string_ | - |
|
||||
| border | Whether to show inner border | _boolean_ | `true` |
|
||||
| disabled | Whether to disabled collapse | _boolean_ | `false` |
|
||||
| readonly `v3.0.12` | Whether to be readonly | _boolean_ | `false` |
|
||||
| is-link | Whether to show link icon | _boolean_ | `true` |
|
||||
| title-class | Title className | _string_ | - |
|
||||
| value-class | Value className | _string_ | - |
|
||||
|
||||
@ -135,6 +135,7 @@ export default {
|
||||
| border | 是否显示内边框 | _boolean_ | `true` |
|
||||
| is-link | 是否展示标题栏右侧箭头并开启点击反馈 | _boolean_ | `true` |
|
||||
| disabled | 是否禁用面板 | _boolean_ | `false` |
|
||||
| readonly `v3.0.12` | 是否为只读状态，只读状态下无法操作面板 | _boolean_ | `false` |
|
||||
| title-class | 左侧标题额外类名 | _string_ | - |
|
||||
| value-class | 右侧内容额外类名 | _string_ | - |
|
||||
| label-class | 描述信息额外类名 | _string_ | - |
|
||||
|
||||
@ -8,7 +8,6 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
role="button"
|
||||
tabindex="0"
|
||||
aria-expanded="true"
|
||||
disabled="false"
|
||||
>
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
@ -29,7 +28,6 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
role="button"
|
||||
tabindex="0"
|
||||
aria-expanded="false"
|
||||
disabled="false"
|
||||
>
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
@ -45,7 +43,6 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
role="button"
|
||||
tabindex="0"
|
||||
aria-expanded="false"
|
||||
disabled="false"
|
||||
>
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
@ -65,7 +62,6 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
role="button"
|
||||
tabindex="0"
|
||||
aria-expanded="true"
|
||||
disabled="false"
|
||||
>
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
@ -86,7 +82,6 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
role="button"
|
||||
tabindex="0"
|
||||
aria-expanded="false"
|
||||
disabled="false"
|
||||
>
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
@ -102,7 +97,6 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
role="button"
|
||||
tabindex="0"
|
||||
aria-expanded="false"
|
||||
disabled="false"
|
||||
>
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
@ -122,7 +116,6 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
role="button"
|
||||
tabindex="0"
|
||||
aria-expanded="false"
|
||||
disabled="false"
|
||||
>
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
@ -134,11 +127,9 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-collapse-item van-collapse-item--border">
|
||||
<div class="van-cell van-cell--clickable van-collapse-item__title van-collapse-item__title--disabled"
|
||||
<div class="van-cell van-collapse-item__title van-collapse-item__title--disabled"
|
||||
role="button"
|
||||
tabindex="-1"
|
||||
aria-expanded="false"
|
||||
disabled="true"
|
||||
>
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
@ -150,11 +141,9 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-collapse-item van-collapse-item--border">
|
||||
<div class="van-cell van-cell--clickable van-collapse-item__title van-collapse-item__title--disabled"
|
||||
<div class="van-cell van-collapse-item__title van-collapse-item__title--disabled"
|
||||
role="button"
|
||||
tabindex="-1"
|
||||
aria-expanded="false"
|
||||
disabled="true"
|
||||
>
|
||||
<div class="van-cell__title">
|
||||
<span>
|
||||
@ -174,7 +163,6 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
role="button"
|
||||
tabindex="0"
|
||||
aria-expanded="false"
|
||||
disabled="false"
|
||||
>
|
||||
<div class="van-cell__title">
|
||||
Title1
|
||||
@ -190,7 +178,6 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
role="button"
|
||||
tabindex="0"
|
||||
aria-expanded="false"
|
||||
disabled="false"
|
||||
>
|
||||
<i class="van-badge__wrapper van-icon van-icon-shop-o van-cell__left-icon">
|
||||
</i>
|
||||
|
||||
@ -7,7 +7,6 @@ exports[`should render slots of CollapseItem correctly 1`] = `
|
||||
role="button"
|
||||
tabindex="0"
|
||||
aria-expanded="false"
|
||||
disabled="false"
|
||||
>
|
||||
this is icon
|
||||
<div class="van-cell__title">
|
||||
|
||||
@ -207,3 +207,31 @@ test('should toggle collapse after calling the toggle method in accordion mode',
|
||||
wrapper.vm.itemA.toggle();
|
||||
expect(wrapper.vm.active).toEqual('a');
|
||||
});
|
||||
|
||||
test('should be readonly when using readonly prop', async () => {
|
||||
const wrapper = mount({
|
||||
data() {
|
||||
return {
|
||||
active: [],
|
||||
};
|
||||
},
|
||||
render() {
|
||||
return (
|
||||
<Collapse v-model={this.active}>
|
||||
<CollapseItem title="a" readonly>
|
||||
content
|
||||
</CollapseItem>
|
||||
</Collapse>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
const titles = wrapper.findAll('.van-collapse-item__title');
|
||||
await titles[0].trigger('click');
|
||||
expect(wrapper.vm.active).toEqual([]);
|
||||
expect(wrapper.find('.van-collapse-item__title').classes()).not.toContain(
|
||||
'van-cell--clickable'
|
||||
);
|
||||
|
||||
wrapper.unmount();
|
||||
});
|
||||
|
||||
@ -38,6 +38,8 @@ export function get(object: any, path: string): any {
|
||||
return result;
|
||||
}
|
||||
|
||||
type Writeable<T> = { -readonly [P in keyof T]: T[P] };
|
||||
|
||||
export function pick<T, U extends keyof T>(
|
||||
obj: T,
|
||||
keys: ReadonlyArray<U>,
|
||||
@ -48,5 +50,5 @@ export function pick<T, U extends keyof T>(
|
||||
ret[key] = obj[key];
|
||||
}
|
||||
return ret;
|
||||
}, {} as Pick<T, U>);
|
||||
}, {} as Writeable<Pick<T, U>>);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user