tangjinzhou
3 years ago
parent
7dbc86ea5c
commit
e1f979014d
@ -1,4 +1,4 @@
|
||||
// base rc-slider 8.7.1
|
||||
// base rc-slider 9.7.2
|
||||
import Slider from './src/';
|
||||
|
||||
export default Slider;
|
||||
|
||||
@ -1,151 +0,0 @@
|
||||
import { defineComponent } from 'vue';
|
||||
import classNames from '../../_util/classNames';
|
||||
import PropTypes from '../../_util/vue-types';
|
||||
import BaseMixin from '../../_util/BaseMixin';
|
||||
import { getOptionProps } from '../../_util/props-util';
|
||||
import addEventListener from '../../vc-util/Dom/addEventListener';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Handle',
|
||||
mixins: [BaseMixin],
|
||||
inheritAttrs: false,
|
||||
props: {
|
||||
prefixCls: PropTypes.string,
|
||||
vertical: PropTypes.looseBool,
|
||||
offset: PropTypes.number,
|
||||
disabled: PropTypes.looseBool,
|
||||
min: PropTypes.number,
|
||||
max: PropTypes.number,
|
||||
value: PropTypes.number,
|
||||
tabindex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
||||
reverse: PropTypes.looseBool,
|
||||
ariaLabel: String,
|
||||
ariaLabelledBy: String,
|
||||
ariaValueTextFormatter: Function,
|
||||
// handleFocus: PropTypes.func.def(noop),
|
||||
// handleBlur: PropTypes.func.def(noop),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
clickFocused: false,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
// mouseup won't trigger if mouse moved out of handle
|
||||
// so we listen on document here.
|
||||
this.onMouseUpListener = addEventListener(document, 'mouseup', this.handleMouseUp);
|
||||
},
|
||||
beforeUnmount() {
|
||||
if (this.onMouseUpListener) {
|
||||
this.onMouseUpListener.remove();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setHandleRef(node) {
|
||||
this.handle = node;
|
||||
},
|
||||
setClickFocus(focused) {
|
||||
this.setState({ clickFocused: focused });
|
||||
},
|
||||
handleMouseUp() {
|
||||
if (document.activeElement === this.handle) {
|
||||
this.setClickFocus(true);
|
||||
}
|
||||
},
|
||||
handleBlur(e) {
|
||||
this.setClickFocus(false);
|
||||
this.__emit('blur', e);
|
||||
},
|
||||
handleKeyDown() {
|
||||
this.setClickFocus(false);
|
||||
},
|
||||
clickFocus() {
|
||||
this.setClickFocus(true);
|
||||
this.focus();
|
||||
},
|
||||
focus() {
|
||||
this.handle.focus();
|
||||
},
|
||||
blur() {
|
||||
this.handle.blur();
|
||||
},
|
||||
// when click can not focus in vue, use mousedown trigger focus
|
||||
handleMousedown(e) {
|
||||
e.preventDefault();
|
||||
this.focus();
|
||||
this.__emit('mousedown', e);
|
||||
},
|
||||
},
|
||||
render() {
|
||||
const {
|
||||
prefixCls,
|
||||
vertical,
|
||||
reverse,
|
||||
offset,
|
||||
disabled,
|
||||
min,
|
||||
max,
|
||||
value,
|
||||
tabindex,
|
||||
ariaLabel,
|
||||
ariaLabelledBy,
|
||||
ariaValueTextFormatter,
|
||||
} = getOptionProps(this);
|
||||
const className = classNames(this.$attrs.class, {
|
||||
[`${prefixCls}-handle-click-focused`]: this.clickFocused,
|
||||
});
|
||||
|
||||
const positionStyle = vertical
|
||||
? {
|
||||
[reverse ? 'top' : 'bottom']: `${offset}%`,
|
||||
[reverse ? 'bottom' : 'top']: 'auto',
|
||||
transform: reverse ? null : `translateY(+50%)`,
|
||||
}
|
||||
: {
|
||||
[reverse ? 'right' : 'left']: `${offset}%`,
|
||||
[reverse ? 'left' : 'right']: 'auto',
|
||||
transform: `translateX(${reverse ? '+' : '-'}50%)`,
|
||||
};
|
||||
|
||||
const ariaProps = {
|
||||
'aria-valuemin': min,
|
||||
'aria-valuemax': max,
|
||||
'aria-valuenow': value,
|
||||
'aria-disabled': !!disabled,
|
||||
};
|
||||
const elStyle = {
|
||||
...this.$attrs.style,
|
||||
...positionStyle,
|
||||
};
|
||||
let mergedTabIndex = tabindex || 0;
|
||||
if (disabled || tabindex === null) {
|
||||
mergedTabIndex = null;
|
||||
}
|
||||
|
||||
let ariaValueText;
|
||||
if (ariaValueTextFormatter) {
|
||||
ariaValueText = ariaValueTextFormatter(value);
|
||||
}
|
||||
|
||||
const handleProps = {
|
||||
...this.$attrs,
|
||||
role: 'slider',
|
||||
tabindex: mergedTabIndex,
|
||||
...ariaProps,
|
||||
class: className,
|
||||
onBlur: this.handleBlur,
|
||||
onKeydown: this.handleKeyDown,
|
||||
onMousedown: this.handleMousedown,
|
||||
ref: this.setHandleRef,
|
||||
style: elStyle,
|
||||
};
|
||||
return (
|
||||
<div
|
||||
{...handleProps}
|
||||
aria-label={ariaLabel}
|
||||
aria-labelledby={ariaLabelledBy}
|
||||
aria-valuetext={ariaValueText}
|
||||
/>
|
||||
);
|
||||
},
|
||||
});
|
||||
@ -0,0 +1,265 @@
|
||||
import { computed, CSSProperties, defineComponent, ref } from 'vue';
|
||||
import classNames from '../../_util/classNames';
|
||||
import PropTypes from '../../_util/vue-types';
|
||||
import addEventListener from '../../vc-util/Dom/addEventListener';
|
||||
import { onMounted } from 'vue';
|
||||
import { onBeforeUnmount } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Handle',
|
||||
inheritAttrs: false,
|
||||
props: {
|
||||
prefixCls: PropTypes.string,
|
||||
vertical: PropTypes.looseBool,
|
||||
offset: PropTypes.number,
|
||||
disabled: PropTypes.looseBool,
|
||||
min: PropTypes.number,
|
||||
max: PropTypes.number,
|
||||
value: PropTypes.number,
|
||||
tabindex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
||||
reverse: PropTypes.looseBool,
|
||||
ariaLabel: String,
|
||||
ariaLabelledBy: String,
|
||||
ariaValueTextFormatter: Function,
|
||||
},
|
||||
setup(props, { attrs, emit, expose }) {
|
||||
const clickFocused = ref(false);
|
||||
const handle = ref();
|
||||
const handleMouseUp = () => {
|
||||
if (document.activeElement === handle.value) {
|
||||
clickFocused.value = true;
|
||||
}
|
||||
};
|
||||
const handleBlur = () => {
|
||||
clickFocused.value = false;
|
||||
emit('blur');
|
||||
};
|
||||
const handleKeyDown = () => {
|
||||
clickFocused.value = false;
|
||||
};
|
||||
const focus = () => {
|
||||
handle.value?.focus();
|
||||
};
|
||||
const blur = () => {
|
||||
handle.value?.blur();
|
||||
};
|
||||
const clickFocus = () => {
|
||||
clickFocused.value = true;
|
||||
focus();
|
||||
};
|
||||
|
||||
// when click can not focus in vue, use mousedown trigger focus
|
||||
const handleMousedown = (e: MouseEvent) => {
|
||||
e.preventDefault();
|
||||
focus();
|
||||
emit('mousedown', e);
|
||||
};
|
||||
expose({
|
||||
focus,
|
||||
blur,
|
||||
clickFocus,
|
||||
});
|
||||
let onMouseUpListener = null;
|
||||
onMounted(() => {
|
||||
onMouseUpListener = addEventListener(document, 'mouseup', handleMouseUp);
|
||||
});
|
||||
onBeforeUnmount(() => {
|
||||
onMouseUpListener?.remove();
|
||||
});
|
||||
|
||||
const positionStyle = computed(() => {
|
||||
const { vertical, offset, reverse } = props;
|
||||
return vertical
|
||||
? {
|
||||
[reverse ? 'top' : 'bottom']: `${offset}%`,
|
||||
[reverse ? 'bottom' : 'top']: 'auto',
|
||||
transform: reverse ? null : `translateY(+50%)`,
|
||||
}
|
||||
: {
|
||||
[reverse ? 'right' : 'left']: `${offset}%`,
|
||||
[reverse ? 'left' : 'right']: 'auto',
|
||||
transform: `translateX(${reverse ? '+' : '-'}50%)`,
|
||||
};
|
||||
});
|
||||
return () => {
|
||||
const {
|
||||
prefixCls,
|
||||
disabled,
|
||||
min,
|
||||
max,
|
||||
value,
|
||||
tabindex,
|
||||
ariaLabel,
|
||||
ariaLabelledBy,
|
||||
ariaValueTextFormatter,
|
||||
} = props;
|
||||
const className = classNames(attrs.class, {
|
||||
[`${prefixCls}-handle-click-focused`]: clickFocused.value,
|
||||
});
|
||||
|
||||
const ariaProps = {
|
||||
'aria-valuemin': min,
|
||||
'aria-valuemax': max,
|
||||
'aria-valuenow': value,
|
||||
'aria-disabled': !!disabled,
|
||||
};
|
||||
const elStyle = {
|
||||
...(attrs.style as CSSProperties),
|
||||
...positionStyle.value,
|
||||
};
|
||||
let mergedTabIndex = tabindex || 0;
|
||||
if (disabled || tabindex === null) {
|
||||
mergedTabIndex = null;
|
||||
}
|
||||
|
||||
let ariaValueText;
|
||||
if (ariaValueTextFormatter) {
|
||||
ariaValueText = ariaValueTextFormatter(value);
|
||||
}
|
||||
|
||||
const handleProps = {
|
||||
...attrs,
|
||||
role: 'slider',
|
||||
tabindex: mergedTabIndex,
|
||||
...ariaProps,
|
||||
class: className,
|
||||
onBlur: handleBlur,
|
||||
onKeydown: handleKeyDown,
|
||||
onMousedown: handleMousedown,
|
||||
ref: handle,
|
||||
style: elStyle,
|
||||
};
|
||||
return (
|
||||
<div
|
||||
{...handleProps}
|
||||
aria-label={ariaLabel}
|
||||
aria-labelledby={ariaLabelledBy}
|
||||
aria-valuetext={ariaValueText}
|
||||
/>
|
||||
);
|
||||
};
|
||||
},
|
||||
// data() {
|
||||
// return {
|
||||
// clickFocused: false,
|
||||
// };
|
||||
// },
|
||||
// mounted() {
|
||||
// // mouseup won't trigger if mouse moved out of handle
|
||||
// // so we listen on document here.
|
||||
// this.onMouseUpListener = addEventListener(document, 'mouseup', this.handleMouseUp);
|
||||
// },
|
||||
// beforeUnmount() {
|
||||
// if (this.onMouseUpListener) {
|
||||
// this.onMouseUpListener.remove();
|
||||
// }
|
||||
// },
|
||||
// methods: {
|
||||
// setHandleRef(node) {
|
||||
// this.handle = node;
|
||||
// },
|
||||
// setClickFocus(focused) {
|
||||
// this.setState({ clickFocused: focused });
|
||||
// },
|
||||
// handleMouseUp() {
|
||||
// if (document.activeElement === this.handle) {
|
||||
// this.setClickFocus(true);
|
||||
// }
|
||||
// },
|
||||
// handleBlur(e) {
|
||||
// this.setClickFocus(false);
|
||||
// this.__emit('blur', e);
|
||||
// },
|
||||
// handleKeyDown() {
|
||||
// this.setClickFocus(false);
|
||||
// },
|
||||
// clickFocus() {
|
||||
// this.setClickFocus(true);
|
||||
// this.focus();
|
||||
// },
|
||||
// focus() {
|
||||
// this.handle.focus();
|
||||
// },
|
||||
// blur() {
|
||||
// this.handle.blur();
|
||||
// },
|
||||
// // when click can not focus in vue, use mousedown trigger focus
|
||||
// handleMousedown(e) {
|
||||
// e.preventDefault();
|
||||
// this.focus();
|
||||
// this.__emit('mousedown', e);
|
||||
// },
|
||||
// },
|
||||
// render() {
|
||||
// const {
|
||||
// prefixCls,
|
||||
// vertical,
|
||||
// reverse,
|
||||
// offset,
|
||||
// disabled,
|
||||
// min,
|
||||
// max,
|
||||
// value,
|
||||
// tabindex,
|
||||
// ariaLabel,
|
||||
// ariaLabelledBy,
|
||||
// ariaValueTextFormatter,
|
||||
// } = getOptionProps(this);
|
||||
// const className = classNames(this.$attrs.class, {
|
||||
// [`${prefixCls}-handle-click-focused`]: this.clickFocused,
|
||||
// });
|
||||
|
||||
// const positionStyle = vertical
|
||||
// ? {
|
||||
// [reverse ? 'top' : 'bottom']: `${offset}%`,
|
||||
// [reverse ? 'bottom' : 'top']: 'auto',
|
||||
// transform: reverse ? null : `translateY(+50%)`,
|
||||
// }
|
||||
// : {
|
||||
// [reverse ? 'right' : 'left']: `${offset}%`,
|
||||
// [reverse ? 'left' : 'right']: 'auto',
|
||||
// transform: `translateX(${reverse ? '+' : '-'}50%)`,
|
||||
// };
|
||||
|
||||
// const ariaProps = {
|
||||
// 'aria-valuemin': min,
|
||||
// 'aria-valuemax': max,
|
||||
// 'aria-valuenow': value,
|
||||
// 'aria-disabled': !!disabled,
|
||||
// };
|
||||
// const elStyle = {
|
||||
// ...this.$attrs.style,
|
||||
// ...positionStyle,
|
||||
// };
|
||||
// let mergedTabIndex = tabindex || 0;
|
||||
// if (disabled || tabindex === null) {
|
||||
// mergedTabIndex = null;
|
||||
// }
|
||||
|
||||
// let ariaValueText;
|
||||
// if (ariaValueTextFormatter) {
|
||||
// ariaValueText = ariaValueTextFormatter(value);
|
||||
// }
|
||||
|
||||
// const handleProps = {
|
||||
// ...this.$attrs,
|
||||
// role: 'slider',
|
||||
// tabindex: mergedTabIndex,
|
||||
// ...ariaProps,
|
||||
// class: className,
|
||||
// onBlur: this.handleBlur,
|
||||
// onKeydown: this.handleKeyDown,
|
||||
// onMousedown: this.handleMousedown,
|
||||
// ref: this.setHandleRef,
|
||||
// style: elStyle,
|
||||
// };
|
||||
// return (
|
||||
// <div
|
||||
// {...handleProps}
|
||||
// aria-label={ariaLabel}
|
||||
// aria-labelledby={ariaLabelledBy}
|
||||
// aria-valuetext={ariaValueText}
|
||||
// />
|
||||
// );
|
||||
// },
|
||||
});
|
||||
@ -1,87 +0,0 @@
|
||||
import PropTypes from '../../_util/vue-types';
|
||||
import BaseMixin from '../../_util/BaseMixin';
|
||||
import Tooltip from '../../vc-tooltip';
|
||||
import { getOptionProps } from '../../_util/props-util';
|
||||
import Handle from './Handle';
|
||||
|
||||
export default function createSliderWithTooltip(Component) {
|
||||
return {
|
||||
name: 'SliderTooltip',
|
||||
inheritAttrs: false,
|
||||
mixins: [BaseMixin, Component],
|
||||
props: {
|
||||
...Component.props,
|
||||
tipFormatter: PropTypes.func.def(value => {
|
||||
return value;
|
||||
}),
|
||||
handleStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.arrayOf(PropTypes.object)]),
|
||||
tipProps: PropTypes.object.def(() => ({})),
|
||||
getTooltipContainer: PropTypes.func.def(node => node.parentNode),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visibles: {},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleTooltipVisibleChange(index, visible) {
|
||||
this.setState(prevState => {
|
||||
return {
|
||||
visibles: {
|
||||
...prevState.visibles,
|
||||
[index]: visible,
|
||||
},
|
||||
};
|
||||
});
|
||||
},
|
||||
handleWithTooltip({ value, dragging, index, disabled, ...restProps }) {
|
||||
const { tipFormatter, tipProps, handleStyle, getTooltipContainer } = this.$props;
|
||||
|
||||
const {
|
||||
prefixCls = 'rc-slider-tooltip',
|
||||
overlay = tipFormatter(value),
|
||||
placement = 'top',
|
||||
visible = false,
|
||||
...restTooltipProps
|
||||
} = tipProps;
|
||||
|
||||
let handleStyleWithIndex;
|
||||
if (Array.isArray(handleStyle)) {
|
||||
handleStyleWithIndex = handleStyle[index] || handleStyle[0];
|
||||
} else {
|
||||
handleStyleWithIndex = handleStyle;
|
||||
}
|
||||
|
||||
const tooltipProps = {
|
||||
...restTooltipProps,
|
||||
getTooltipContainer,
|
||||
prefixCls,
|
||||
overlay,
|
||||
placement,
|
||||
visible: (!disabled && (this.visibles[index] || dragging)) || visible,
|
||||
key: index,
|
||||
};
|
||||
const handleProps = {
|
||||
value,
|
||||
...restProps,
|
||||
onMouseenter: () => this.handleTooltipVisibleChange(index, true),
|
||||
onMouseleave: () => this.handleTooltipVisibleChange(index, false),
|
||||
style: handleStyleWithIndex,
|
||||
};
|
||||
|
||||
return (
|
||||
<Tooltip {...tooltipProps}>
|
||||
<Handle {...handleProps} />
|
||||
</Tooltip>
|
||||
);
|
||||
},
|
||||
},
|
||||
render() {
|
||||
const componentProps = {
|
||||
...getOptionProps(this),
|
||||
handle: this.handleWithTooltip,
|
||||
};
|
||||
return <Component {...componentProps} />;
|
||||
},
|
||||
};
|
||||
}
|
||||
@ -1,10 +0,0 @@
|
||||
import Slider from './Slider';
|
||||
import Range from './Range';
|
||||
import Handle from './Handle';
|
||||
import createSliderWithTooltip from './createSliderWithTooltip';
|
||||
|
||||
Slider.Range = Range;
|
||||
Slider.Handle = Handle;
|
||||
Slider.createSliderWithTooltip = createSliderWithTooltip;
|
||||
export default Slider;
|
||||
export { Range, Handle, createSliderWithTooltip };
|
||||
@ -0,0 +1,8 @@
|
||||
import Slider from './Slider';
|
||||
import Range from './Range';
|
||||
import Handle from './Handle';
|
||||
|
||||
Slider.Range = Range;
|
||||
Slider.Handle = Handle;
|
||||
export default Slider;
|
||||
export { Range, Handle };
|
||||
@ -1 +1 @@
|
||||
Subproject commit 157cce105e1f0a369658dfb29cc802ebc09d0d93
|
||||
Subproject commit 36b2776cbf91e0db3b14d40d14879417490c56eb
|
||||
Loading…
Reference in new issue