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

fix(slider): inputnumberProps #714

Merged
merged 4 commits into from
Apr 7, 2022
Merged

fix(slider): inputnumberProps #714

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
9895afe
fix(slider): inputnumberProps
uyarn Apr 7, 2022
aa63ae3
chore: update snapshot
uyarn Apr 7, 2022
928935f
feat(slider): label add position param
uyarn Apr 7, 2022
926fc9b
chore(slider): demo param h
uyarn Apr 7, 2022
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
2 changes: 1 addition & 1 deletion examples/slider/demos/input-number.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export default {
return {
value1: 12,
value2: [30, 70],
inputNumberProps: { theme: 'column' },
inputNumberProps: { theme: 'column', autoWidth: true },
};
},
};
Expand Down
2 changes: 1 addition & 1 deletion src/_common
Open in desktop
Submodule _common updated 6 files
+1 −1 css-naming.md
+1 −1 docs/mobile/overview.md
+27 −0 style/web/components/color-picker/_index.less
+3 −0 style/web/components/color-picker/_var.less
+8 −0 style/web/components/dialog/_index.less
+0 −7 style/web/components/slider/_index.less
54 changes: 20 additions & 34 deletions src/slider/slider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ export default Vue.extend({
];
},
sliderRailClass(): ClassName {
return [`${name}__rail`, { 'show-input': this.inputNumberProps, disabled: this.tDisabled }];
return [`${name}__rail`, { 'show-input': this.inputNumberProps, [`${prefix}-is-disabled`]: this.tDisabled }];
},
sliderNumberClass(): ClassName {
return [
Expand Down Expand Up @@ -136,8 +136,8 @@ export default Vue.extend({
return Math.max(this.firstValue, this.secondValue);
},
barSize(): string {
const cuttentDiff = this.range ? this.maxValue - this.minValue : this.prevValue - this.min;
return `${(100 * cuttentDiff) / this.rangeDiff}%`;
const diff = this.range ? this.maxValue - this.minValue : this.prevValue - this.min;
return `${(100 * diff) / this.rangeDiff}%`;
},
barStart(): string {
return this.range ? `${(100 * (this.minValue - this.min)) / this.rangeDiff}%` : '0%';
Expand All @@ -163,6 +163,20 @@ export default Vue.extend({
left: this.barStart,
};
},
calcInputNumberProps(): object {
const defaultInputNumberProps = {
decimalPlaces: 0,
placeholder: '',
theme: 'column',
};
if (typeof this.inputNumberProps === 'object') {
return {
...defaultInputNumberProps,
...this.inputNumberProps,
};
}
return defaultInputNumberProps;
},
},
watch: {
value(newVal: SliderValue) {
Expand Down Expand Up @@ -258,28 +272,6 @@ export default Vue.extend({
this.prevValue = prevValue;
return prevValue;
},
setInputProps(): void {
if (this.inputNumberProps instanceof Object) {
const {
decimalPlaces: inputDecimalPlaces,
format: inputFormat,
placeholder: inputPlaceholder,
theme: inputTheme,
} = this.inputNumberProps;
if (typeof inputDecimalPlaces === 'number' && !isNaN(inputDecimalPlaces)) {
this.inputDecimalPlaces = inputDecimalPlaces;
}
if (inputPlaceholder) {
this.inputPlaceholder = inputPlaceholder;
}
if (typeof inputFormat === 'function') {
this.inputFormat = inputFormat;
}
if (['column', 'row', 'normal'].includes(inputTheme)) {
this.inputTheme = inputTheme;
}
}
},
// 相应button的位置
setPosition(percent: number): void {
let targetValue = (percent * this.rangeDiff) / 100;
Expand Down Expand Up @@ -352,7 +344,7 @@ export default Vue.extend({
<div>
{this.markList.map((item, index) => (
<div
class={`${name}__stop ${name}__mark-stop`}
class={[`${name}__stop`, `${name}__mark-stop`]}
style={this.getStopStyle(item.position)}
key={index}
></div>
Expand Down Expand Up @@ -398,10 +390,7 @@ export default Vue.extend({
disabled={this.tDisabled}
min={min}
max={max}
decimalPlaces={this.inputDecimalPlaces}
format={this.inputFormat}
placeholder={this.inputPlaceholder}
theme={this.inputTheme}
props={this.calcInputNumberProps}
></t-input-number>
}
{range && <div class={`${name}__center-line`} />}
Expand All @@ -414,10 +403,7 @@ export default Vue.extend({
disabled={this.tDisabled}
min={min}
max={max}
decimalPlaces={this.inputDecimalPlaces}
format={this.inputFormat}
placeholder={this.inputPlaceholder}
theme={this.inputTheme}
props={this.calcInputNumberProps}
></t-input-number>
)}
</div>
Expand Down
30 changes: 19 additions & 11 deletions test/unit/checkbox/index.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,9 @@ describe('Checkbox CheckboxGroup', () => {
return (
<CheckboxGroup defaultChecked={['sz']}>
<Checkbox value="gz">广州</Checkbox>
<Checkbox value="sz" disabled>深圳</Checkbox>
<Checkbox value="sz" disabled>
深圳
</Checkbox>
</CheckboxGroup>
);
},
Expand All @@ -84,7 +86,9 @@ describe('Checkbox CheckboxGroup', () => {
return (
<CheckboxGroup checked={['sz']}>
<Checkbox value="gz">广州</Checkbox>
<Checkbox value="sz" disabled>深圳</Checkbox>
<Checkbox value="sz" disabled>
深圳
</Checkbox>
</CheckboxGroup>
);
},
Expand All @@ -98,7 +102,9 @@ describe('Checkbox CheckboxGroup', () => {
<CheckboxGroup disabled={true}>
<Checkbox value="bj">北京</Checkbox>
<Checkbox value="gz">广州</Checkbox>
<Checkbox value="sz" disabled={false}>深圳</Checkbox>
<Checkbox value="sz" disabled={false}>
深圳
</Checkbox>
</CheckboxGroup>
);
},
Expand All @@ -113,9 +119,7 @@ describe('Checkbox CheckboxGroup', () => {
];
const wrapper = mount({
render() {
return (
<CheckboxGroup options={options} value={['sz', 'gz']} max={2} />
);
return <CheckboxGroup options={options} value={['sz', 'gz']} max={2} />;
},
});
expect(wrapper).toMatchSnapshot();
Expand All @@ -138,7 +142,9 @@ describe('Checkbox CheckboxGroup', () => {
return (
<CheckboxGroup name={'checkbox-name'}>
<Checkbox value="gz">广州</Checkbox>
<Checkbox value="sz" disabled>深圳</Checkbox>
<Checkbox value="sz" disabled>
深圳
</Checkbox>
</CheckboxGroup>
);
},
Expand All @@ -155,21 +161,23 @@ describe('Checkbox CheckboxGroup', () => {
return (
<CheckboxGroup>
<Checkbox value="gz">广州</Checkbox>
<Checkbox value="sz" disabled>深圳</Checkbox>
<Checkbox value="sz" disabled>
深圳
</Checkbox>
</CheckboxGroup>
);
},
});
const checkboxInput = wrapper.find('input[type="checkbox"]');
await checkboxInput.setChecked();
const checkoxGroup = wrapper.findComponent(CheckboxGroup);
const checkboxGroup = wrapper.findComponent(CheckboxGroup);
const checkbox = wrapper.findComponent(Checkbox);
expect(checkbox.emitted().change.length).toBe(1);
expect(checkoxGroup.emitted().change.length).toBe(1);
expect(checkboxGroup.emitted().change.length).toBe(1);
// 选中单项时间参数为 true
expect(checkbox.emitted().change[0][0]).toBeTruthy();
// checkboxGroup 事件参数为 ['gz']
expect(checkoxGroup.emitted().change[0][0]).toEqual(['gz']);
expect(checkboxGroup.emitted().change[0][0]).toEqual(['gz']);
});
});
});
13 changes: 13 additions & 0 deletions test/unit/slider/__snapshots__/index.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,19 @@ exports[`Slider :props 1`] = `
</div>
`;

exports[`Slider :props 2`] = `
<div class="t-slider__container" aria-valuetext="0">
<div role="slider" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" class="t-slider">
<div class="t-slider__rail">
<div class="t-slider__track" style="width: 0%; left: 0%;"></div>
<div tabindex="0" show-tooltip="true" class="t-slider__button-wrapper" style="left: 0%;">
<div class="t-slider__button"></div>
</div>
</div>
</div>
</div>
`;

exports[`Slider [marks] render right 1`] = `
<div class="t-slider__container" aria-valuetext="2">
<div role="slider" aria-valuemin="0" aria-valuemax="100" aria-orientation="horizontal" class="t-slider t-slider--with-input">
Expand Down
71 changes: 55 additions & 16 deletions test/unit/slider/index.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { mount } from '@vue/test-utils';
import Vue from 'vue';
import Slider from '@/src/slider/index.ts';
import TInputNumber from '@/src/input-number/index.ts';

// every component needs four parts: props/events/slots/functions.
describe('Slider', () => {
// test props api
Expand All @@ -15,8 +16,60 @@ describe('Slider', () => {
// 写入快照
expect(wrapper).toMatchSnapshot();
});
it('disabled', () => {
const wrapper = mount({
render() {
return <Slider disabled={true}></Slider>;
},
});
expect(wrapper.find('.t-is-disabled').exists()).toBe(true);
});
it('inputNumberProps', () => {
const inputNumberPropsNormalWrapper = mount({
render() {
return <Slider inputNumberProps></Slider>;
},
});
expect(inputNumberPropsNormalWrapper.find('.t-input-number').exists()).toBe(true);
expect(inputNumberPropsNormalWrapper.find('.t-input-number--column').exists()).toBe(true);
const inputNumberPropsRowWrapper = mount({
render() {
return <Slider inputNumberProps={{ theme: 'row' }}></Slider>;
},
});
expect(inputNumberPropsRowWrapper.find('.t-input-number--row').exists()).toBe(true);
});
it('max and min', () => {
const wrapper = mount({
render() {
return <Slider min={10} max={50}></Slider>;
},
});
expect(wrapper.find('.t-slider').attributes('aria-valuemax')).toBe('50');
expect(wrapper.find('.t-slider').attributes('aria-valuemin')).toBe('10');
});
it('layout', () => {
const wrapper = mount({
render() {
return <Slider layout="vertical"></Slider>;
},
});
// 配置layout属性为vertical，且rail的样式为垂直方向 height 100%
expect(wrapper.find('.t-slider--vertical').exists()).toBe(true);
expect(wrapper.find('.t-slider__rail').attributes('style')).toBe('height: 100%;');
});
it('range', () => {
const wrapper = mount({
render() {
return <Slider layout="vertical" range></Slider>;
},
});
// 配置range属性 存在两个游标button
expect(wrapper.findAll('.t-slider__button').length).toBe(2);
});
});
});

// 测试Slider下的marks传参模板
describe('Slider [marks]', () => {
const wrapper = mount(Slider, {
Expand All @@ -34,7 +87,7 @@ describe('Slider [marks]', () => {
},
},
});
// 渲染是否正确
// 渲染是否正确
it('render right', () => {
expect(wrapper.html()).toContain('aria-valuetext="2"');
expect(wrapper.html()).toContain('37°C');
Expand Down Expand Up @@ -78,26 +131,12 @@ describe('Slider [vertical-marks]', () => {
},
},
});
// 渲染是否正确
// 渲染是否正确
it('render right', () => {
expect(wrapper.html()).toContain('aria-valuetext="30-70"');
expect(wrapper.html()).toContain('37°C');
expect(wrapper).toMatchSnapshot();
});
// 输入框输入20
// it('change value on input-number', (done) => {
// // console.log(wrapper.findComponent(TInputNumber).vm);
// Vue.nextTick(() => {
// wrapper.findComponent(TInputNumber).vm.$emit('change', 20);
// done();
// });
// });

// 检查内部值是否变化
// it('check change value', () => {
// expect(wrapper.vm.prevValue).toBe(20);
// });

// 检查内部函数是否返回正确
it('call setValues()', () => {
expect(wrapper.vm.setValues([300, 200])).toEqual([30, 100]);
Expand Down