mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-12-08 06:59:13 +08:00
256 lines
7.8 KiB
Vue
256 lines
7.8 KiB
Vue
import type { CSSProperties, VNodeTypes, ExtractPropTypes } from 'vue';
|
|
import { computed, ref, defineComponent } from 'vue';
|
|
import VcSlider from '../vc-slider/src/Slider';
|
|
import VcRange from '../vc-slider/src/Range';
|
|
import VcHandle from '../vc-slider/src/Handle';
|
|
|
|
import type { VueNode, CustomSlotsType } from '../_util/type';
|
|
import {
|
|
stringType,
|
|
booleanType,
|
|
someType,
|
|
objectType,
|
|
withInstall,
|
|
functionType,
|
|
} from '../_util/type';
|
|
import type { TooltipPlacement } from '../tooltip/Tooltip';
|
|
import useConfigInject from '../config-provider/hooks/useConfigInject';
|
|
import SliderTooltip from './SliderTooltip';
|
|
import classNames from '../_util/classNames';
|
|
import { useInjectFormItemContext } from '../form/FormItemContext';
|
|
import type { FocusEventHandler } from '../_util/EventInterface';
|
|
|
|
// CSSINJS
|
|
import useStyle from './style';
|
|
import devWarning from '../vc-util/devWarning';
|
|
|
|
export type SliderValue = number | [number, number];
|
|
|
|
export interface SliderMarks {
|
|
[key: number]:
|
|
| VueNode
|
|
| {
|
|
style: CSSProperties;
|
|
label: any;
|
|
};
|
|
}
|
|
|
|
interface HandleGeneratorInfo {
|
|
value?: number;
|
|
dragging?: boolean;
|
|
index: number;
|
|
}
|
|
export interface SliderRange {
|
|
draggableTrack?: boolean;
|
|
}
|
|
export type HandleGeneratorFn = (config: {
|
|
tooltipPrefixCls?: string;
|
|
prefixCls?: string;
|
|
info: HandleGeneratorInfo;
|
|
}) => VNodeTypes;
|
|
type Value = [number, number] | number;
|
|
|
|
const defaultTipFormatter = (value: number) => (typeof value === 'number' ? value.toString() : '');
|
|
export const sliderProps = () => ({
|
|
id: String,
|
|
prefixCls: String,
|
|
tooltipPrefixCls: String,
|
|
range: someType<boolean | SliderRange>([Boolean, Object]),
|
|
reverse: booleanType(),
|
|
min: Number,
|
|
max: Number,
|
|
step: someType<null | number>([Object, Number]),
|
|
marks: objectType<SliderMarks>(),
|
|
dots: booleanType(),
|
|
value: someType<Value>([Array, Number]),
|
|
defaultValue: someType<Value>([Array, Number]),
|
|
included: booleanType(),
|
|
disabled: booleanType(),
|
|
vertical: booleanType(),
|
|
tipFormatter: someType<((value?: number) => any) | null>(
|
|
[Function, Object],
|
|
() => defaultTipFormatter,
|
|
),
|
|
tooltipOpen: booleanType(),
|
|
/** @deprecated `tooltipVisible` is deprecated. Please use `tooltipOpen` instead. */
|
|
tooltipVisible: booleanType(),
|
|
tooltipPlacement: stringType<TooltipPlacement>(),
|
|
getTooltipPopupContainer: functionType<(triggerNode: HTMLElement) => HTMLElement>(),
|
|
autofocus: booleanType(),
|
|
handleStyle: someType<CSSProperties[] | CSSProperties>([Array, Object]),
|
|
trackStyle: someType<CSSProperties[] | CSSProperties>([Array, Object]),
|
|
onChange: functionType<(value: Value) => void>(),
|
|
onAfterChange: functionType<(value: Value) => void>(),
|
|
onFocus: functionType<FocusEventHandler>(),
|
|
onBlur: functionType<FocusEventHandler>(),
|
|
'onUpdate:value': functionType<(value: Value) => void>(),
|
|
});
|
|
|
|
export type SliderProps = Partial<ExtractPropTypes<ReturnType<typeof sliderProps>>>;
|
|
export type Visibles = { [index: number]: boolean };
|
|
|
|
const Slider = defineComponent({
|
|
compatConfig: { MODE: 3 },
|
|
name: 'ASlider',
|
|
inheritAttrs: false,
|
|
props: sliderProps(),
|
|
// emits: ['update:value', 'change', 'afterChange', 'blur'],
|
|
slots: Object as CustomSlotsType<{
|
|
mark?: any;
|
|
default?: any;
|
|
}>,
|
|
setup(props, { attrs, slots, emit, expose }) {
|
|
// Warning for deprecated usage
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
[['tooltipVisible', 'tooltipOpen']].forEach(([deprecatedName, newName]) => {
|
|
devWarning(
|
|
props.tooltipVisible === undefined,
|
|
'Slider',
|
|
`\`${deprecatedName}\` is deprecated, please use \`${newName}\` instead.`,
|
|
);
|
|
});
|
|
}
|
|
const { prefixCls, rootPrefixCls, direction, getPopupContainer, configProvider } =
|
|
useConfigInject('slider', props);
|
|
|
|
// style
|
|
const [wrapSSR, hashId] = useStyle(prefixCls);
|
|
|
|
const formItemContext = useInjectFormItemContext();
|
|
const sliderRef = ref();
|
|
const visibles = ref<Visibles>({});
|
|
const toggleTooltipOpen = (index: number, visible: boolean) => {
|
|
visibles.value[index] = visible;
|
|
};
|
|
const tooltipPlacement = computed(() => {
|
|
if (props.tooltipPlacement) {
|
|
return props.tooltipPlacement;
|
|
}
|
|
if (!props.vertical) {
|
|
return 'top';
|
|
}
|
|
return direction.value === 'rtl' ? 'left' : 'right';
|
|
});
|
|
|
|
const focus = () => {
|
|
sliderRef.value?.focus();
|
|
};
|
|
const blur = () => {
|
|
sliderRef.value?.blur();
|
|
};
|
|
const handleChange = (val: SliderValue) => {
|
|
emit('update:value', val);
|
|
emit('change', val);
|
|
formItemContext.onFieldChange();
|
|
};
|
|
const handleBlur = (e: FocusEvent) => {
|
|
emit('blur', e);
|
|
};
|
|
expose({
|
|
focus,
|
|
blur,
|
|
});
|
|
const handleWithTooltip: HandleGeneratorFn = ({
|
|
tooltipPrefixCls,
|
|
info: { value, dragging, index, ...restProps },
|
|
}) => {
|
|
const { tipFormatter, tooltipOpen = props.tooltipVisible, getTooltipPopupContainer } = props;
|
|
const isTipFormatter = tipFormatter ? visibles.value[index] || dragging : false;
|
|
const open = tooltipOpen || (tooltipOpen === undefined && isTipFormatter);
|
|
return (
|
|
<SliderTooltip
|
|
prefixCls={tooltipPrefixCls}
|
|
title={tipFormatter ? tipFormatter(value) : ''}
|
|
open={open}
|
|
placement={tooltipPlacement.value}
|
|
transitionName={`${rootPrefixCls.value}-zoom-down`}
|
|
key={index}
|
|
overlayClassName={`${prefixCls.value}-tooltip`}
|
|
getPopupContainer={getTooltipPopupContainer || getPopupContainer?.value}
|
|
>
|
|
<VcHandle
|
|
{...restProps}
|
|
value={value}
|
|
onMouseenter={() => toggleTooltipOpen(index, true)}
|
|
onMouseleave={() => toggleTooltipOpen(index, false)}
|
|
/>
|
|
</SliderTooltip>
|
|
);
|
|
};
|
|
return () => {
|
|
const {
|
|
tooltipPrefixCls: customizeTooltipPrefixCls,
|
|
range,
|
|
id = formItemContext.id.value,
|
|
...restProps
|
|
} = props;
|
|
const tooltipPrefixCls = configProvider.getPrefixCls('tooltip', customizeTooltipPrefixCls);
|
|
const cls = classNames(
|
|
attrs.class,
|
|
{
|
|
[`${prefixCls.value}-rtl`]: direction.value === 'rtl',
|
|
},
|
|
hashId.value,
|
|
);
|
|
|
|
// make reverse default on rtl direction
|
|
if (direction.value === 'rtl' && !restProps.vertical) {
|
|
restProps.reverse = !restProps.reverse;
|
|
}
|
|
|
|
// extrack draggableTrack from range={{ ... }}
|
|
let draggableTrack: boolean | undefined;
|
|
if (typeof range === 'object') {
|
|
draggableTrack = range.draggableTrack;
|
|
}
|
|
|
|
if (range) {
|
|
return wrapSSR(
|
|
<VcRange
|
|
{...attrs}
|
|
{...restProps}
|
|
step={restProps.step!}
|
|
draggableTrack={draggableTrack}
|
|
class={cls}
|
|
ref={sliderRef}
|
|
handle={(info: HandleGeneratorInfo) =>
|
|
handleWithTooltip({
|
|
tooltipPrefixCls,
|
|
prefixCls: prefixCls.value,
|
|
info,
|
|
})
|
|
}
|
|
prefixCls={prefixCls.value}
|
|
onChange={handleChange}
|
|
onBlur={handleBlur}
|
|
v-slots={{ mark: slots.mark }}
|
|
/>,
|
|
);
|
|
}
|
|
return wrapSSR(
|
|
<VcSlider
|
|
{...attrs}
|
|
{...restProps}
|
|
id={id}
|
|
step={restProps.step!}
|
|
class={cls}
|
|
ref={sliderRef}
|
|
handle={(info: HandleGeneratorInfo) =>
|
|
handleWithTooltip({
|
|
tooltipPrefixCls,
|
|
prefixCls: prefixCls.value,
|
|
info,
|
|
})
|
|
}
|
|
prefixCls={prefixCls.value}
|
|
onChange={handleChange}
|
|
onBlur={handleBlur}
|
|
v-slots={{ mark: slots.mark }}
|
|
/>,
|
|
);
|
|
};
|
|
},
|
|
});
|
|
|
|
export default withInstall(Slider);
|