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 all commits
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
8 changes: 7 additions & 1 deletion examples/slider/demos/base.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
</div>

<div class="block">
<t-slider v-model="value2" range :tooltipProps="{}"/>
<t-slider v-model="value2" range :tooltipProps="{}" :label="renderLabel" />
</div>
</div>
</template>
Expand All @@ -18,6 +18,12 @@ export default {
tooltipProps: {},
};
},
methods: {
renderLabel(h, { value, position }) {
console.log(`the position is ${position}`);
return `${value}`;
},
},
};
</script>
<style>
Expand Down
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
4 changes: 2 additions & 2 deletions examples/slider/slider.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@
-- | -- | -- | -- | --
disabled | Boolean | false | 是否禁用组件 | N
inputNumberProps | Boolean / Object | false | 用于控制数字输入框组件，值为 false 表示不显示数字输入框；值为 true 表示呈现默认数字输入框；值类型为 Object 表示透传属性到数字输入框组件。TS 类型：`InputNumberProps`，[InputNumber API Documents](./input-number?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/slider/type.ts) | N
label | String / Boolean / Slot / Function | false | 滑块当前值文本。值为 true 显示默认文案，值为 false 不显示滑块当前值文本，值为 `\${value}%` 则表示组件会根据占位符渲染文案。TS 类型：`string | boolean | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
label | String / Boolean / Slot / Function | true | 滑块当前值文本。<br />值为 true 显示默认文案；值为 false 不显示滑块当前值文本；<br />值为 `${value}%` 则表示组件会根据占位符渲染文案；<br />值类型为函数时，参数 `value` 标识滑块值，参数 `position=start` 表示范围滑块的起始值，参数 `position=end` 表示范围滑块的终点值。TS 类型：`string | boolean | TNode<{ value: SliderValue; position?: 'start' | 'end' }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
layout | String | horizontal | 滑块布局方向。可选项：vertical/horizontal | N
marks | Object / Array | - | 刻度标记，示例：[0, 10, 40, 200] 或者 `{ 10: (val) => val + '%', 50: (h, val) => <button>{val}</button> }`。TS 类型：`Array<number> | SliderMarks` `interface SliderMarks { [mark: number]: string | TNode<{ value: number }> }`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/slider/type.ts) | N
marks | Object / Array | - | 刻度标记，示例：[0, 10, 40, 200] 或者 `{ 10: (val) => val + '%', 50: (h) => <button>50</button> }`。TS 类型：`Array<number> | SliderMarks` `interface SliderMarks { [mark: number]: string | TNode<{ value: number }> }`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/slider/type.ts) | N
max | Number | 100 | 滑块范围最大值 | N
min | Number | 0 | 滑块范围最小值 | N
range | Boolean | false | 双游标滑块 | N
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
8 changes: 4 additions & 4 deletions src/slider/props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@

/**
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
* updated at 2021-12-09 11:17:31
* */

import { TdSliderProps } from './type';
Expand All @@ -16,20 +15,21 @@ export default {
type: [Boolean, Object] as PropType<TdSliderProps['inputNumberProps']>,
default: false,
},
/** 滑块当前值文本。值为 true 显示默认文案，值为 false 不显示滑块当前值文本，值为 `\${value}%` 则表示组件会根据占位符渲染文案 */
/** 滑块当前值文本。<br />值为 true 显示默认文案；值为 false 不显示滑块当前值文本；<br />值为 `${value}%` 则表示组件会根据占位符渲染文案；<br />值类型为函数时，参数 `value` 标识滑块值，参数 `position=start` 表示范围滑块的起始值，参数 `position=end` 表示范围滑块的终点值 */
label: {
type: [String, Boolean, Function] as PropType<TdSliderProps['label']>,
default: false,
default: true,
},
/** 滑块布局方向 */
layout: {
type: String as PropType<TdSliderProps['layout']>,
default: 'horizontal' as TdSliderProps['layout'],
validator(val: TdSliderProps['layout']): boolean {
if (!val) return true;
return ['vertical', 'horizontal'].includes(val);
},
},
/** 刻度标记，示例：[0, 10, 40, 200] 或者 `{ 10: (val) => val + '%', 50: (h, val) => <button>{val}</button> }` */
/** 刻度标记，示例：[0, 10, 40, 200] 或者 `{ 10: (val) => val + '%', 50: (h) => <button>50</button> }` */
marks: {
type: [Object, Array] as PropType<TdSliderProps['marks']>,
},
Expand Down
34 changes: 30 additions & 4 deletions src/slider/slider-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import ITooltip from '../tooltip/tooltip';
import { getIEVersion } from '../_common/js/utils/helper';
import { TdSliderProps } from './type';
import { TdTooltipProps } from '../tooltip/type';
import { renderTNodeJSXDefault } from '../utils/render-tnode';

const name = `${prefix}-slider-button`;
interface SliderInstanceType extends Vue {
Expand Down Expand Up @@ -34,6 +35,17 @@ export default (Vue as VueConstructor<SliderInstanceType>).extend({
type: [Boolean, Object] as PropType<TdSliderProps['tooltipProps']>,
default: true,
},
label: {
type: [String, Function, Boolean] as PropType<TdSliderProps['label']>,
default: true,
},
range: {
type: Boolean,
default: false,
},
position: {
type: String,
},
},
inject: {
slider: { default: undefined },
Expand All @@ -50,9 +62,6 @@ export default (Vue as VueConstructor<SliderInstanceType>).extend({
rangeDiff(): number {
return this.max - this.min;
},
formatValue(): TdSliderProps['value'] {
return this.value;
},
disabled(): boolean {
return this.slider.disabled;
},
Expand Down Expand Up @@ -110,6 +119,17 @@ export default (Vue as VueConstructor<SliderInstanceType>).extend({
this.handleIE();
},
methods: {
getTooltipContent() {
if (typeof this.label === 'boolean') return String(this.value);
return renderTNodeJSXDefault(this, 'label', {
params: this.range
? {
value: this.value,
position: this.position,
}
: { value: this.value },
});
},
setTooltipProps() {
if (this.tooltipProps instanceof Object) {
const {
Expand Down Expand Up @@ -290,6 +310,7 @@ export default (Vue as VueConstructor<SliderInstanceType>).extend({
return str === undefined || str === null;
},
},

render(): VNode {
return (
<div
Expand All @@ -306,7 +327,12 @@ export default (Vue as VueConstructor<SliderInstanceType>).extend({
onblur={this.handleMouseLeave}
onKeydown={this.onNativeKeyDown}
>
<Tooltip ref="tooltip" props={this.getTooltipProps()} visible={this.visible} content={String(this.formatValue)}>
<Tooltip
ref="tooltip"
props={this.getTooltipProps()}
visible={this.label && this.visible}
content={this.getTooltipContent}
>
<div class={[`${prefix}-slider__button`, { [`${prefix}-slider__button--dragging`]: this.dragging }]} />
</Tooltip>
</div>
Expand Down
60 changes: 26 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 Expand Up @@ -448,6 +434,9 @@ export default Vue.extend({
value={range ? this.firstValue : this.prevValue}
ref="button1"
disabled={this.tDisabled}
label={this.label}
range={this.range}
position="start"
tooltip-props={this.tooltipProps}
onInput={(v: number) => {
this.range ? (this.firstValue = v) : (this.prevValue = v);
Expand All @@ -459,6 +448,9 @@ export default Vue.extend({
v-model={this.secondValue}
ref="button2"
disabled={this.tDisabled}
range={this.range}
position="end"
label={this.label}
tooltip-props={this.tooltipProps}
></TSliderButton>
)}
Expand Down
15 changes: 8 additions & 7 deletions src/slider/type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@

/**
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
* updated at 2021-12-09 11:17:31
* */

import { InputNumberProps } from '../input-number';
Expand All @@ -21,17 +20,17 @@ export interface TdSliderProps {
*/
inputNumberProps?: InputNumberProps;
/**
* 滑块当前值文本。值为 true 显示默认文案，值为 false 不显示滑块当前值文本，值为 `\${value}%` 则表示组件会根据占位符渲染文案
* @default false
* 滑块当前值文本。<br />值为 true 显示默认文案；值为 false 不显示滑块当前值文本；<br />值为 `${value}%` 则表示组件会根据占位符渲染文案；<br />值类型为函数时，参数 `value` 标识滑块值，参数 `position=start` 表示范围滑块的起始值，参数 `position=end` 表示范围滑块的终点值
* @default true
*/
label?: string | boolean | TNode;
label?: string | boolean | TNode<{ value: SliderValue; position?: 'start' | 'end' }>;
/**
* 滑块布局方向
* @default horizontal
*/
layout?: 'vertical' | 'horizontal';
/**
* 刻度标记，示例：[0, 10, 40, 200] 或者 `{ 10: (val) => val + '%', 50: (h, val) => <button>{val}</button> }`
* 刻度标记，示例：[0, 10, 40, 200] 或者 `{ 10: (val) => val + '%', 50: (h) => <button>50</button> }`
*/
marks?: Array<number> | SliderMarks;
/**
Expand Down Expand Up @@ -70,8 +69,10 @@ export interface TdSliderProps {
* 滑块值变化时触发
*/
onChange?: (value: SliderValue) => void;
};
}

export interface SliderMarks { [mark: number]: string | TNode<{ value: number }> };
export interface SliderMarks {
[mark: number]: string | TNode<{ value: number }>;
}

export type SliderValue = number | Array<number>;
Loading