增加admin管理帐号和项目的界面--初步实现
This commit is contained in:
Cheng Zhou
Generated
Vendored
+6
@@ -0,0 +1,6 @@
|
||||
export * from './use-lifecycle';
|
||||
export * from './use-marks';
|
||||
export * from './use-slide';
|
||||
export * from './use-slider-button';
|
||||
export * from './use-stops';
|
||||
export * from './use-watch';
|
||||
Generated
Vendored
+7
@@ -0,0 +1,7 @@
|
||||
export { useLifecycle } from './use-lifecycle.mjs';
|
||||
export { useMarks } from './use-marks.mjs';
|
||||
export { useSlide } from './use-slide.mjs';
|
||||
export { useSliderButton } from './use-slider-button.mjs';
|
||||
export { useStops } from './use-stops.mjs';
|
||||
export { useWatch } from './use-watch.mjs';
|
||||
//# sourceMappingURL=index.mjs.map
|
||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
|
||||
Generated
Vendored
+4
@@ -0,0 +1,4 @@
|
||||
import type { SliderInitData, SliderProps } from '../slider';
|
||||
export declare const useLifecycle: (props: SliderProps, initData: SliderInitData, resetSize: () => void) => {
|
||||
sliderWrapper: import("vue").Ref<HTMLElement | undefined>;
|
||||
};
|
||||
Generated
Vendored
+36
@@ -0,0 +1,36 @@
|
||||
import { ref, onMounted, nextTick } from 'vue';
|
||||
import { useEventListener } from '@vueuse/core';
|
||||
import { isArray } from '@vue/shared';
|
||||
import { isNumber } from '../../../../utils/types.mjs';
|
||||
|
||||
const useLifecycle = (props, initData, resetSize) => {
|
||||
const sliderWrapper = ref();
|
||||
onMounted(async () => {
|
||||
if (props.range) {
|
||||
if (isArray(props.modelValue)) {
|
||||
initData.firstValue = Math.max(props.min, props.modelValue[0]);
|
||||
initData.secondValue = Math.min(props.max, props.modelValue[1]);
|
||||
} else {
|
||||
initData.firstValue = props.min;
|
||||
initData.secondValue = props.max;
|
||||
}
|
||||
initData.oldValue = [initData.firstValue, initData.secondValue];
|
||||
} else {
|
||||
if (!isNumber(props.modelValue) || Number.isNaN(props.modelValue)) {
|
||||
initData.firstValue = props.min;
|
||||
} else {
|
||||
initData.firstValue = Math.min(props.max, Math.max(props.min, props.modelValue));
|
||||
}
|
||||
initData.oldValue = initData.firstValue;
|
||||
}
|
||||
useEventListener(window, "resize", resetSize);
|
||||
await nextTick();
|
||||
resetSize();
|
||||
});
|
||||
return {
|
||||
sliderWrapper
|
||||
};
|
||||
};
|
||||
|
||||
export { useLifecycle };
|
||||
//# sourceMappingURL=use-lifecycle.mjs.map
|
||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"use-lifecycle.mjs","sources":["../../../../../../../packages/components/slider/src/composables/use-lifecycle.ts"],"sourcesContent":["import { nextTick, onMounted, ref } from 'vue'\nimport { useEventListener } from '@vueuse/core'\nimport { isArray, isNumber } from '@element-plus/utils'\n\nimport type { SliderInitData, SliderProps } from '../slider'\n\nexport const useLifecycle = (\n props: SliderProps,\n initData: SliderInitData,\n resetSize: () => void\n) => {\n const sliderWrapper = ref<HTMLElement>()\n\n onMounted(async () => {\n if (props.range) {\n if (isArray(props.modelValue)) {\n initData.firstValue = Math.max(props.min, props.modelValue[0])\n initData.secondValue = Math.min(props.max, props.modelValue[1])\n } else {\n initData.firstValue = props.min\n initData.secondValue = props.max\n }\n initData.oldValue = [initData.firstValue, initData.secondValue]\n } else {\n if (!isNumber(props.modelValue) || Number.isNaN(props.modelValue)) {\n initData.firstValue = props.min\n } else {\n initData.firstValue = Math.min(\n props.max,\n Math.max(props.min, props.modelValue)\n )\n }\n initData.oldValue = initData.firstValue\n }\n\n useEventListener(window, 'resize', resetSize)\n\n await nextTick()\n resetSize()\n })\n\n return {\n sliderWrapper,\n }\n}\n"],"names":[],"mappings":";;;;;AAGY,MAAC,YAAY,GAAG,CAAC,KAAK,EAAE,QAAQ,EAAE,SAAS,KAAK;AAC5D,EAAE,MAAM,aAAa,GAAG,GAAG,EAAE,CAAC;AAC9B,EAAE,SAAS,CAAC,YAAY;AACxB,IAAI,IAAI,KAAK,CAAC,KAAK,EAAE;AACrB,MAAM,IAAI,OAAO,CAAC,KAAK,CAAC,UAAU,CAAC,EAAE;AACrC,QAAQ,QAAQ,CAAC,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,QAAQ,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;AACxE,OAAO,MAAM;AACb,QAAQ,QAAQ,CAAC,UAAU,GAAG,KAAK,CAAC,GAAG,CAAC;AACxC,QAAQ,QAAQ,CAAC,WAAW,GAAG,KAAK,CAAC,GAAG,CAAC;AACzC,OAAO;AACP,MAAM,QAAQ,CAAC,QAAQ,GAAG,CAAC,QAAQ,CAAC,UAAU,EAAE,QAAQ,CAAC,WAAW,CAAC,CAAC;AACtE,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,EAAE;AACzE,QAAQ,QAAQ,CAAC,UAAU,GAAG,KAAK,CAAC,GAAG,CAAC;AACxC,OAAO,MAAM;AACb,QAAQ,QAAQ,CAAC,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC;AACzF,OAAO;AACP,MAAM,QAAQ,CAAC,QAAQ,GAAG,QAAQ,CAAC,UAAU,CAAC;AAC9C,KAAK;AACL,IAAI,gBAAgB,CAAC,MAAM,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAC;AAClD,IAAI,MAAM,QAAQ,EAAE,CAAC;AACrB,IAAI,SAAS,EAAE,CAAC;AAChB,GAAG,CAAC,CAAC;AACL,EAAE,OAAO;AACT,IAAI,aAAa;AACjB,GAAG,CAAC;AACJ;;;;"}
|
||||
Generated
Vendored
+7
@@ -0,0 +1,7 @@
|
||||
import type { SliderProps } from '../slider';
|
||||
import type { SliderMarkerProps } from '../marker';
|
||||
export interface Mark extends SliderMarkerProps {
|
||||
point: number;
|
||||
position: number;
|
||||
}
|
||||
export declare const useMarks: (props: SliderProps) => import("vue").ComputedRef<Mark[]>;
|
||||
Generated
Vendored
+18
@@ -0,0 +1,18 @@
|
||||
import { computed } from 'vue';
|
||||
|
||||
const useMarks = (props) => {
|
||||
return computed(() => {
|
||||
if (!props.marks) {
|
||||
return [];
|
||||
}
|
||||
const marksKeys = Object.keys(props.marks);
|
||||
return marksKeys.map(Number.parseFloat).sort((a, b) => a - b).filter((point) => point <= props.max && point >= props.min).map((point) => ({
|
||||
point,
|
||||
position: (point - props.min) * 100 / (props.max - props.min),
|
||||
mark: props.marks[point]
|
||||
}));
|
||||
});
|
||||
};
|
||||
|
||||
export { useMarks };
|
||||
//# sourceMappingURL=use-marks.mjs.map
|
||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"use-marks.mjs","sources":["../../../../../../../packages/components/slider/src/composables/use-marks.ts"],"sourcesContent":["import { computed } from 'vue'\n\nimport type { SliderProps } from '../slider'\nimport type { SliderMarkerProps } from '../marker'\n\nexport interface Mark extends SliderMarkerProps {\n point: number\n position: number\n}\n\nexport const useMarks = (props: SliderProps) => {\n return computed(() => {\n if (!props.marks) {\n return []\n }\n\n const marksKeys = Object.keys(props.marks)\n return marksKeys\n .map(Number.parseFloat)\n .sort((a, b) => a - b)\n .filter((point) => point <= props.max && point >= props.min)\n .map(\n (point): Mark => ({\n point,\n position: ((point - props.min) * 100) / (props.max - props.min),\n mark: props.marks![point],\n })\n )\n })\n}\n"],"names":[],"mappings":";;AACY,MAAC,QAAQ,GAAG,CAAC,KAAK,KAAK;AACnC,EAAE,OAAO,QAAQ,CAAC,MAAM;AACxB,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE;AACtB,MAAM,OAAO,EAAE,CAAC;AAChB,KAAK;AACL,IAAI,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;AAC/C,IAAI,OAAO,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,KAAK,KAAK,KAAK,IAAI,KAAK,CAAC,GAAG,IAAI,KAAK,IAAI,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,MAAM;AAC9I,MAAM,KAAK;AACX,MAAM,QAAQ,EAAE,CAAC,KAAK,GAAG,KAAK,CAAC,GAAG,IAAI,GAAG,IAAI,KAAK,CAAC,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC;AACnE,MAAM,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;AAC9B,KAAK,CAAC,CAAC,CAAC;AACR,GAAG,CAAC,CAAC;AACL;;;;"}
|
||||
Generated
Vendored
+23
@@ -0,0 +1,23 @@
|
||||
import type { CSSProperties, Ref, SetupContext } from 'vue';
|
||||
import type { SliderEmits, SliderInitData, SliderProps } from '../slider';
|
||||
import type { SliderButtonInstance } from '../button';
|
||||
export declare const useSlide: (props: SliderProps, initData: SliderInitData, emit: SetupContext<SliderEmits>["emit"]) => {
|
||||
elFormItem: import("element-plus/es/components/form").FormItemContext | undefined;
|
||||
slider: import("vue").ShallowRef<HTMLElement | undefined>;
|
||||
firstButton: Ref<SliderButtonInstance | undefined>;
|
||||
secondButton: Ref<SliderButtonInstance | undefined>;
|
||||
sliderDisabled: import("vue").ComputedRef<boolean>;
|
||||
minValue: import("vue").ComputedRef<number>;
|
||||
maxValue: import("vue").ComputedRef<number>;
|
||||
runwayStyle: import("vue").ComputedRef<CSSProperties>;
|
||||
barStyle: import("vue").ComputedRef<CSSProperties>;
|
||||
resetSize: () => void;
|
||||
setPosition: (percent: number) => Ref<SliderButtonInstance | undefined>;
|
||||
emitChange: () => Promise<void>;
|
||||
onSliderWrapperPrevent: (event: TouchEvent) => void;
|
||||
onSliderClick: (event: MouseEvent | TouchEvent) => void;
|
||||
onSliderDown: (event: MouseEvent | TouchEvent) => Promise<void>;
|
||||
onSliderMarkerDown: (position: number) => void;
|
||||
setFirstValue: (firstValue: number | undefined) => void;
|
||||
setSecondValue: (secondValue: number) => void;
|
||||
};
|
||||
Generated
Vendored
+151
@@ -0,0 +1,151 @@
|
||||
import { shallowRef, ref, computed, nextTick } from 'vue';
|
||||
import { useFormItem } from '../../../form/src/hooks/use-form-item.mjs';
|
||||
import { useFormDisabled } from '../../../form/src/hooks/use-form-common-props.mjs';
|
||||
import { UPDATE_MODEL_EVENT, INPUT_EVENT, CHANGE_EVENT } from '../../../../constants/event.mjs';
|
||||
|
||||
const useSlide = (props, initData, emit) => {
|
||||
const { formItem: elFormItem } = useFormItem();
|
||||
const slider = shallowRef();
|
||||
const firstButton = ref();
|
||||
const secondButton = ref();
|
||||
const buttonRefs = {
|
||||
firstButton,
|
||||
secondButton
|
||||
};
|
||||
const sliderDisabled = useFormDisabled();
|
||||
const minValue = computed(() => {
|
||||
return Math.min(initData.firstValue, initData.secondValue);
|
||||
});
|
||||
const maxValue = computed(() => {
|
||||
return Math.max(initData.firstValue, initData.secondValue);
|
||||
});
|
||||
const barSize = computed(() => {
|
||||
return props.range ? `${100 * (maxValue.value - minValue.value) / (props.max - props.min)}%` : `${100 * (initData.firstValue - props.min) / (props.max - props.min)}%`;
|
||||
});
|
||||
const barStart = computed(() => {
|
||||
return props.range ? `${100 * (minValue.value - props.min) / (props.max - props.min)}%` : "0%";
|
||||
});
|
||||
const runwayStyle = computed(() => {
|
||||
return props.vertical ? { height: props.height } : {};
|
||||
});
|
||||
const barStyle = computed(() => {
|
||||
return props.vertical ? {
|
||||
height: barSize.value,
|
||||
bottom: barStart.value
|
||||
} : {
|
||||
width: barSize.value,
|
||||
left: barStart.value
|
||||
};
|
||||
});
|
||||
const resetSize = () => {
|
||||
if (slider.value) {
|
||||
const rect = slider.value.getBoundingClientRect();
|
||||
initData.sliderSize = rect[props.vertical ? "height" : "width"];
|
||||
}
|
||||
};
|
||||
const getButtonRefByPercent = (percent) => {
|
||||
const targetValue = props.min + percent * (props.max - props.min) / 100;
|
||||
if (!props.range) {
|
||||
return firstButton;
|
||||
}
|
||||
let buttonRefName;
|
||||
if (Math.abs(minValue.value - targetValue) < Math.abs(maxValue.value - targetValue)) {
|
||||
buttonRefName = initData.firstValue < initData.secondValue ? "firstButton" : "secondButton";
|
||||
} else {
|
||||
buttonRefName = initData.firstValue > initData.secondValue ? "firstButton" : "secondButton";
|
||||
}
|
||||
return buttonRefs[buttonRefName];
|
||||
};
|
||||
const setPosition = (percent) => {
|
||||
const buttonRef = getButtonRefByPercent(percent);
|
||||
buttonRef.value.setPosition(percent);
|
||||
return buttonRef;
|
||||
};
|
||||
const setFirstValue = (firstValue) => {
|
||||
initData.firstValue = firstValue != null ? firstValue : props.min;
|
||||
_emit(props.range ? [minValue.value, maxValue.value] : firstValue != null ? firstValue : props.min);
|
||||
};
|
||||
const setSecondValue = (secondValue) => {
|
||||
initData.secondValue = secondValue;
|
||||
if (props.range) {
|
||||
_emit([minValue.value, maxValue.value]);
|
||||
}
|
||||
};
|
||||
const _emit = (val) => {
|
||||
emit(UPDATE_MODEL_EVENT, val);
|
||||
emit(INPUT_EVENT, val);
|
||||
};
|
||||
const emitChange = async () => {
|
||||
await nextTick();
|
||||
emit(CHANGE_EVENT, props.range ? [minValue.value, maxValue.value] : props.modelValue);
|
||||
};
|
||||
const handleSliderPointerEvent = (event) => {
|
||||
var _a, _b, _c, _d, _e, _f;
|
||||
if (sliderDisabled.value || initData.dragging)
|
||||
return;
|
||||
resetSize();
|
||||
let newPercent = 0;
|
||||
if (props.vertical) {
|
||||
const clientY = (_c = (_b = (_a = event.touches) == null ? void 0 : _a.item(0)) == null ? void 0 : _b.clientY) != null ? _c : event.clientY;
|
||||
const sliderOffsetBottom = slider.value.getBoundingClientRect().bottom;
|
||||
newPercent = (sliderOffsetBottom - clientY) / initData.sliderSize * 100;
|
||||
} else {
|
||||
const clientX = (_f = (_e = (_d = event.touches) == null ? void 0 : _d.item(0)) == null ? void 0 : _e.clientX) != null ? _f : event.clientX;
|
||||
const sliderOffsetLeft = slider.value.getBoundingClientRect().left;
|
||||
newPercent = (clientX - sliderOffsetLeft) / initData.sliderSize * 100;
|
||||
}
|
||||
if (newPercent < 0 || newPercent > 100)
|
||||
return;
|
||||
return setPosition(newPercent);
|
||||
};
|
||||
const onSliderWrapperPrevent = (event) => {
|
||||
var _a, _b;
|
||||
if (((_a = buttonRefs["firstButton"].value) == null ? void 0 : _a.dragging) || ((_b = buttonRefs["secondButton"].value) == null ? void 0 : _b.dragging)) {
|
||||
event.preventDefault();
|
||||
}
|
||||
};
|
||||
const onSliderDown = async (event) => {
|
||||
const buttonRef = handleSliderPointerEvent(event);
|
||||
if (buttonRef) {
|
||||
await nextTick();
|
||||
buttonRef.value.onButtonDown(event);
|
||||
}
|
||||
};
|
||||
const onSliderClick = (event) => {
|
||||
const buttonRef = handleSliderPointerEvent(event);
|
||||
if (buttonRef) {
|
||||
emitChange();
|
||||
}
|
||||
};
|
||||
const onSliderMarkerDown = (position) => {
|
||||
if (sliderDisabled.value || initData.dragging)
|
||||
return;
|
||||
const buttonRef = setPosition(position);
|
||||
if (buttonRef) {
|
||||
emitChange();
|
||||
}
|
||||
};
|
||||
return {
|
||||
elFormItem,
|
||||
slider,
|
||||
firstButton,
|
||||
secondButton,
|
||||
sliderDisabled,
|
||||
minValue,
|
||||
maxValue,
|
||||
runwayStyle,
|
||||
barStyle,
|
||||
resetSize,
|
||||
setPosition,
|
||||
emitChange,
|
||||
onSliderWrapperPrevent,
|
||||
onSliderClick,
|
||||
onSliderDown,
|
||||
onSliderMarkerDown,
|
||||
setFirstValue,
|
||||
setSecondValue
|
||||
};
|
||||
};
|
||||
|
||||
export { useSlide };
|
||||
//# sourceMappingURL=use-slide.mjs.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+18
@@ -0,0 +1,18 @@
|
||||
import type { CSSProperties, ComputedRef, Ref, SetupContext } from 'vue';
|
||||
import type { SliderButtonEmits, SliderButtonInitData, SliderButtonProps } from '../button';
|
||||
import type { TooltipInstance } from 'element-plus/es/components/tooltip';
|
||||
export declare const useSliderButton: (props: SliderButtonProps, initData: SliderButtonInitData, emit: SetupContext<SliderButtonEmits>["emit"]) => {
|
||||
disabled: ComputedRef<boolean>;
|
||||
button: Ref<HTMLDivElement | undefined>;
|
||||
tooltip: Ref<TooltipInstance | undefined>;
|
||||
tooltipVisible: Ref<boolean>;
|
||||
showTooltip: Ref<import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>>;
|
||||
persistent: Ref<import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>>;
|
||||
wrapperStyle: ComputedRef<CSSProperties>;
|
||||
formatValue: ComputedRef<string | number>;
|
||||
handleMouseEnter: () => void;
|
||||
handleMouseLeave: () => void;
|
||||
onButtonDown: (event: MouseEvent | TouchEvent) => void;
|
||||
onKeyDown: (event: KeyboardEvent) => void;
|
||||
setPosition: (newPosition: number) => Promise<void>;
|
||||
};
|
||||
Generated
Vendored
+252
@@ -0,0 +1,252 @@
|
||||
import { inject, ref, computed, nextTick, watch } from 'vue';
|
||||
import { clamp, debounce } from 'lodash-unified';
|
||||
import { useEventListener } from '@vueuse/core';
|
||||
import { sliderContextKey } from '../constants.mjs';
|
||||
import { getEventCode } from '../../../../utils/dom/event.mjs';
|
||||
import { EVENT_CODE } from '../../../../constants/aria.mjs';
|
||||
import { UPDATE_MODEL_EVENT } from '../../../../constants/event.mjs';
|
||||
|
||||
const useTooltip = (props, formatTooltip, showTooltip) => {
|
||||
const tooltip = ref();
|
||||
const tooltipVisible = ref(false);
|
||||
const enableFormat = computed(() => {
|
||||
return formatTooltip.value instanceof Function;
|
||||
});
|
||||
const formatValue = computed(() => {
|
||||
return enableFormat.value && formatTooltip.value(props.modelValue) || props.modelValue;
|
||||
});
|
||||
const displayTooltip = debounce(() => {
|
||||
showTooltip.value && (tooltipVisible.value = true);
|
||||
}, 50);
|
||||
const hideTooltip = debounce(() => {
|
||||
showTooltip.value && (tooltipVisible.value = false);
|
||||
}, 50);
|
||||
return {
|
||||
tooltip,
|
||||
tooltipVisible,
|
||||
formatValue,
|
||||
displayTooltip,
|
||||
hideTooltip
|
||||
};
|
||||
};
|
||||
const useSliderButton = (props, initData, emit) => {
|
||||
const {
|
||||
disabled,
|
||||
min,
|
||||
max,
|
||||
step,
|
||||
showTooltip,
|
||||
persistent,
|
||||
precision,
|
||||
sliderSize,
|
||||
formatTooltip,
|
||||
emitChange,
|
||||
resetSize,
|
||||
updateDragging
|
||||
} = inject(sliderContextKey);
|
||||
const { tooltip, tooltipVisible, formatValue, displayTooltip, hideTooltip } = useTooltip(props, formatTooltip, showTooltip);
|
||||
const button = ref();
|
||||
const currentPosition = computed(() => {
|
||||
return `${(props.modelValue - min.value) / (max.value - min.value) * 100}%`;
|
||||
});
|
||||
const wrapperStyle = computed(() => {
|
||||
return props.vertical ? { bottom: currentPosition.value } : { left: currentPosition.value };
|
||||
});
|
||||
const handleMouseEnter = () => {
|
||||
initData.hovering = true;
|
||||
displayTooltip();
|
||||
};
|
||||
const handleMouseLeave = () => {
|
||||
initData.hovering = false;
|
||||
if (!initData.dragging) {
|
||||
hideTooltip();
|
||||
}
|
||||
};
|
||||
const onButtonDown = (event) => {
|
||||
if (disabled.value)
|
||||
return;
|
||||
event.preventDefault();
|
||||
onDragStart(event);
|
||||
window.addEventListener("mousemove", onDragging);
|
||||
window.addEventListener("touchmove", onDragging);
|
||||
window.addEventListener("mouseup", onDragEnd);
|
||||
window.addEventListener("touchend", onDragEnd);
|
||||
window.addEventListener("contextmenu", onDragEnd);
|
||||
button.value.focus();
|
||||
};
|
||||
const incrementPosition = (amount) => {
|
||||
if (disabled.value)
|
||||
return;
|
||||
initData.newPosition = Number.parseFloat(currentPosition.value) + amount / (max.value - min.value) * 100;
|
||||
setPosition(initData.newPosition);
|
||||
emitChange();
|
||||
};
|
||||
const onLeftKeyDown = () => {
|
||||
incrementPosition(-step.value);
|
||||
};
|
||||
const onRightKeyDown = () => {
|
||||
incrementPosition(step.value);
|
||||
};
|
||||
const onPageDownKeyDown = () => {
|
||||
incrementPosition(-step.value * 4);
|
||||
};
|
||||
const onPageUpKeyDown = () => {
|
||||
incrementPosition(step.value * 4);
|
||||
};
|
||||
const onHomeKeyDown = () => {
|
||||
if (disabled.value)
|
||||
return;
|
||||
setPosition(0);
|
||||
emitChange();
|
||||
};
|
||||
const onEndKeyDown = () => {
|
||||
if (disabled.value)
|
||||
return;
|
||||
setPosition(100);
|
||||
emitChange();
|
||||
};
|
||||
const onKeyDown = (event) => {
|
||||
const code = getEventCode(event);
|
||||
let isPreventDefault = true;
|
||||
switch (code) {
|
||||
case EVENT_CODE.left:
|
||||
case EVENT_CODE.down:
|
||||
onLeftKeyDown();
|
||||
break;
|
||||
case EVENT_CODE.right:
|
||||
case EVENT_CODE.up:
|
||||
onRightKeyDown();
|
||||
break;
|
||||
case EVENT_CODE.home:
|
||||
onHomeKeyDown();
|
||||
break;
|
||||
case EVENT_CODE.end:
|
||||
onEndKeyDown();
|
||||
break;
|
||||
case EVENT_CODE.pageDown:
|
||||
onPageDownKeyDown();
|
||||
break;
|
||||
case EVENT_CODE.pageUp:
|
||||
onPageUpKeyDown();
|
||||
break;
|
||||
default:
|
||||
isPreventDefault = false;
|
||||
break;
|
||||
}
|
||||
isPreventDefault && event.preventDefault();
|
||||
};
|
||||
const getClientXY = (event) => {
|
||||
let clientX;
|
||||
let clientY;
|
||||
if (event.type.startsWith("touch")) {
|
||||
clientY = event.touches[0].clientY;
|
||||
clientX = event.touches[0].clientX;
|
||||
} else {
|
||||
clientY = event.clientY;
|
||||
clientX = event.clientX;
|
||||
}
|
||||
return {
|
||||
clientX,
|
||||
clientY
|
||||
};
|
||||
};
|
||||
const onDragStart = (event) => {
|
||||
initData.dragging = true;
|
||||
initData.isClick = true;
|
||||
const { clientX, clientY } = getClientXY(event);
|
||||
if (props.vertical) {
|
||||
initData.startY = clientY;
|
||||
} else {
|
||||
initData.startX = clientX;
|
||||
}
|
||||
initData.startPosition = Number.parseFloat(currentPosition.value);
|
||||
initData.newPosition = initData.startPosition;
|
||||
};
|
||||
const onDragging = (event) => {
|
||||
if (initData.dragging) {
|
||||
initData.isClick = false;
|
||||
displayTooltip();
|
||||
resetSize();
|
||||
let diff;
|
||||
const { clientX, clientY } = getClientXY(event);
|
||||
if (props.vertical) {
|
||||
initData.currentY = clientY;
|
||||
diff = (initData.startY - initData.currentY) / sliderSize.value * 100;
|
||||
} else {
|
||||
initData.currentX = clientX;
|
||||
diff = (initData.currentX - initData.startX) / sliderSize.value * 100;
|
||||
}
|
||||
initData.newPosition = initData.startPosition + diff;
|
||||
setPosition(initData.newPosition);
|
||||
}
|
||||
};
|
||||
const onDragEnd = () => {
|
||||
if (initData.dragging) {
|
||||
setTimeout(() => {
|
||||
initData.dragging = false;
|
||||
if (!initData.hovering) {
|
||||
hideTooltip();
|
||||
}
|
||||
if (!initData.isClick) {
|
||||
setPosition(initData.newPosition);
|
||||
}
|
||||
emitChange();
|
||||
}, 0);
|
||||
window.removeEventListener("mousemove", onDragging);
|
||||
window.removeEventListener("touchmove", onDragging);
|
||||
window.removeEventListener("mouseup", onDragEnd);
|
||||
window.removeEventListener("touchend", onDragEnd);
|
||||
window.removeEventListener("contextmenu", onDragEnd);
|
||||
}
|
||||
};
|
||||
const setPosition = async (newPosition) => {
|
||||
if (newPosition === null || Number.isNaN(+newPosition))
|
||||
return;
|
||||
newPosition = clamp(newPosition, 0, 100);
|
||||
const fullSteps = Math.floor((max.value - min.value) / step.value);
|
||||
const fullRangePercentage = fullSteps * step.value / (max.value - min.value) * 100;
|
||||
const threshold = fullRangePercentage + (100 - fullRangePercentage) / 2;
|
||||
let value;
|
||||
if (newPosition < fullRangePercentage) {
|
||||
const valueBetween = fullRangePercentage / fullSteps;
|
||||
const steps = Math.round(newPosition / valueBetween);
|
||||
value = min.value + steps * step.value;
|
||||
} else if (newPosition < threshold) {
|
||||
value = min.value + fullSteps * step.value;
|
||||
} else {
|
||||
value = max.value;
|
||||
}
|
||||
value = Number.parseFloat(value.toFixed(precision.value));
|
||||
if (value !== props.modelValue) {
|
||||
emit(UPDATE_MODEL_EVENT, value);
|
||||
}
|
||||
if (!initData.dragging && props.modelValue !== initData.oldValue) {
|
||||
initData.oldValue = props.modelValue;
|
||||
}
|
||||
await nextTick();
|
||||
initData.dragging && displayTooltip();
|
||||
tooltip.value.updatePopper();
|
||||
};
|
||||
watch(() => initData.dragging, (val) => {
|
||||
updateDragging(val);
|
||||
});
|
||||
useEventListener(button, "touchstart", onButtonDown, { passive: false });
|
||||
return {
|
||||
disabled,
|
||||
button,
|
||||
tooltip,
|
||||
tooltipVisible,
|
||||
showTooltip,
|
||||
persistent,
|
||||
wrapperStyle,
|
||||
formatValue,
|
||||
handleMouseEnter,
|
||||
handleMouseLeave,
|
||||
onButtonDown,
|
||||
onKeyDown,
|
||||
setPosition
|
||||
};
|
||||
};
|
||||
|
||||
export { useSliderButton };
|
||||
//# sourceMappingURL=use-slider-button.mjs.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Generated
Vendored
+8
@@ -0,0 +1,8 @@
|
||||
import type { CSSProperties, ComputedRef } from 'vue';
|
||||
import type { SliderInitData, SliderProps } from '../slider';
|
||||
type Stops = {
|
||||
stops: ComputedRef<number[]>;
|
||||
getStopStyle: (position: number) => CSSProperties;
|
||||
};
|
||||
export declare const useStops: (props: SliderProps, initData: SliderInitData, minValue: ComputedRef<number>, maxValue: ComputedRef<number>) => Stops;
|
||||
export {};
|
||||
Generated
Vendored
+33
@@ -0,0 +1,33 @@
|
||||
import { computed } from 'vue';
|
||||
import { debugWarn } from '../../../../utils/error.mjs';
|
||||
|
||||
const useStops = (props, initData, minValue, maxValue) => {
|
||||
const stops = computed(() => {
|
||||
if (!props.showStops || props.min > props.max)
|
||||
return [];
|
||||
if (props.step === 0) {
|
||||
debugWarn("ElSlider", "step should not be 0.");
|
||||
return [];
|
||||
}
|
||||
const stopCount = Math.ceil((props.max - props.min) / props.step);
|
||||
const stepWidth = 100 * props.step / (props.max - props.min);
|
||||
const result = Array.from({ length: stopCount - 1 }).map((_, index) => (index + 1) * stepWidth);
|
||||
if (props.range) {
|
||||
return result.filter((step) => {
|
||||
return step < 100 * (minValue.value - props.min) / (props.max - props.min) || step > 100 * (maxValue.value - props.min) / (props.max - props.min);
|
||||
});
|
||||
} else {
|
||||
return result.filter((step) => step > 100 * (initData.firstValue - props.min) / (props.max - props.min));
|
||||
}
|
||||
});
|
||||
const getStopStyle = (position) => {
|
||||
return props.vertical ? { bottom: `${position}%` } : { left: `${position}%` };
|
||||
};
|
||||
return {
|
||||
stops,
|
||||
getStopStyle
|
||||
};
|
||||
};
|
||||
|
||||
export { useStops };
|
||||
//# sourceMappingURL=use-stops.mjs.map
|
||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"use-stops.mjs","sources":["../../../../../../../packages/components/slider/src/composables/use-stops.ts"],"sourcesContent":["import { computed } from 'vue'\nimport { debugWarn } from '@element-plus/utils'\n\nimport type { CSSProperties, ComputedRef } from 'vue'\nimport type { SliderInitData, SliderProps } from '../slider'\n\ntype Stops = {\n stops: ComputedRef<number[]>\n getStopStyle: (position: number) => CSSProperties\n}\n\nexport const useStops = (\n props: SliderProps,\n initData: SliderInitData,\n minValue: ComputedRef<number>,\n maxValue: ComputedRef<number>\n): Stops => {\n const stops = computed(() => {\n if (!props.showStops || props.min > props.max) return []\n if (props.step === 0) {\n debugWarn('ElSlider', 'step should not be 0.')\n return []\n }\n\n const stopCount = Math.ceil((props.max - props.min) / props.step)\n const stepWidth = (100 * props.step) / (props.max - props.min)\n const result = Array.from<number>({ length: stopCount - 1 }).map(\n (_, index) => (index + 1) * stepWidth\n )\n\n if (props.range) {\n return result.filter((step) => {\n return (\n step <\n (100 * (minValue.value - props.min)) / (props.max - props.min) ||\n step > (100 * (maxValue.value - props.min)) / (props.max - props.min)\n )\n })\n } else {\n return result.filter(\n (step) =>\n step >\n (100 * (initData.firstValue - props.min)) / (props.max - props.min)\n )\n }\n })\n\n const getStopStyle = (position: number): CSSProperties => {\n return props.vertical\n ? { bottom: `${position}%` }\n : { left: `${position}%` }\n }\n\n return {\n stops,\n getStopStyle,\n }\n}\n"],"names":[],"mappings":";;;AAEY,MAAC,QAAQ,GAAG,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,KAAK;AACjE,EAAE,MAAM,KAAK,GAAG,QAAQ,CAAC,MAAM;AAC/B,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,IAAI,KAAK,CAAC,GAAG,GAAG,KAAK,CAAC,GAAG;AACjD,MAAM,OAAO,EAAE,CAAC;AAChB,IAAI,IAAI,KAAK,CAAC,IAAI,KAAK,CAAC,EAAE;AAC1B,MAAM,SAAS,CAAC,UAAU,EAAE,uBAAuB,CAAC,CAAC;AACrD,MAAM,OAAO,EAAE,CAAC;AAChB,KAAK;AACL,IAAI,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,GAAG,GAAG,KAAK,CAAC,GAAG,IAAI,KAAK,CAAC,IAAI,CAAC,CAAC;AACtE,IAAI,MAAM,SAAS,GAAG,GAAG,GAAG,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC;AACjE,IAAI,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,SAAS,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,KAAK,CAAC,KAAK,GAAG,CAAC,IAAI,SAAS,CAAC,CAAC;AACpG,IAAI,IAAI,KAAK,CAAC,KAAK,EAAE;AACrB,MAAM,OAAO,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK;AACrC,QAAQ,OAAO,IAAI,GAAG,GAAG,IAAI,QAAQ,CAAC,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,IAAI,KAAK,CAAC,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC,IAAI,IAAI,GAAG,GAAG,IAAI,QAAQ,CAAC,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,IAAI,KAAK,CAAC,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC;AAC1J,OAAO,CAAC,CAAC;AACT,KAAK,MAAM;AACX,MAAM,OAAO,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK,IAAI,GAAG,GAAG,IAAI,QAAQ,CAAC,UAAU,GAAG,KAAK,CAAC,GAAG,CAAC,IAAI,KAAK,CAAC,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC;AAC/G,KAAK;AACL,GAAG,CAAC,CAAC;AACL,EAAE,MAAM,YAAY,GAAG,CAAC,QAAQ,KAAK;AACrC,IAAI,OAAO,KAAK,CAAC,QAAQ,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;AAClF,GAAG,CAAC;AACJ,EAAE,OAAO;AACT,IAAI,KAAK;AACT,IAAI,YAAY;AAChB,GAAG,CAAC;AACJ;;;;"}
|
||||
Generated
Vendored
+4
@@ -0,0 +1,4 @@
|
||||
import type { ComputedRef, SetupContext } from 'vue';
|
||||
import type { FormItemContext } from 'element-plus/es/components/form';
|
||||
import type { SliderEmits, SliderInitData, SliderProps } from '../slider';
|
||||
export declare const useWatch: (props: SliderProps, initData: SliderInitData, minValue: ComputedRef<number>, maxValue: ComputedRef<number>, emit: SetupContext<SliderEmits>["emit"], elFormItem: FormItemContext) => void;
|
||||
Generated
Vendored
+80
@@ -0,0 +1,80 @@
|
||||
import { watch } from 'vue';
|
||||
import { isArray } from '@vue/shared';
|
||||
import { throwError, debugWarn } from '../../../../utils/error.mjs';
|
||||
import { isNumber } from '../../../../utils/types.mjs';
|
||||
import { UPDATE_MODEL_EVENT, INPUT_EVENT } from '../../../../constants/event.mjs';
|
||||
|
||||
const useWatch = (props, initData, minValue, maxValue, emit, elFormItem) => {
|
||||
const _emit = (val) => {
|
||||
emit(UPDATE_MODEL_EVENT, val);
|
||||
emit(INPUT_EVENT, val);
|
||||
};
|
||||
const valueChanged = () => {
|
||||
if (props.range) {
|
||||
return ![minValue.value, maxValue.value].every((item, index) => item === initData.oldValue[index]);
|
||||
} else {
|
||||
return props.modelValue !== initData.oldValue;
|
||||
}
|
||||
};
|
||||
const setValues = () => {
|
||||
var _a, _b;
|
||||
if (props.min > props.max) {
|
||||
throwError("Slider", "min should not be greater than max.");
|
||||
}
|
||||
const val = props.modelValue;
|
||||
if (props.range && isArray(val)) {
|
||||
if (val[1] < props.min) {
|
||||
_emit([props.min, props.min]);
|
||||
} else if (val[0] > props.max) {
|
||||
_emit([props.max, props.max]);
|
||||
} else if (val[0] < props.min) {
|
||||
_emit([props.min, val[1]]);
|
||||
} else if (val[1] > props.max) {
|
||||
_emit([val[0], props.max]);
|
||||
} else {
|
||||
initData.firstValue = val[0];
|
||||
initData.secondValue = val[1];
|
||||
if (valueChanged()) {
|
||||
if (props.validateEvent) {
|
||||
(_a = elFormItem == null ? void 0 : elFormItem.validate) == null ? void 0 : _a.call(elFormItem, "change").catch((err) => debugWarn(err));
|
||||
}
|
||||
initData.oldValue = val.slice();
|
||||
}
|
||||
}
|
||||
} else if (!props.range && isNumber(val) && !Number.isNaN(val)) {
|
||||
if (val < props.min) {
|
||||
_emit(props.min);
|
||||
} else if (val > props.max) {
|
||||
_emit(props.max);
|
||||
} else {
|
||||
initData.firstValue = val;
|
||||
if (valueChanged()) {
|
||||
if (props.validateEvent) {
|
||||
(_b = elFormItem == null ? void 0 : elFormItem.validate) == null ? void 0 : _b.call(elFormItem, "change").catch((err) => debugWarn(err));
|
||||
}
|
||||
initData.oldValue = val;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
setValues();
|
||||
watch(() => initData.dragging, (val) => {
|
||||
if (!val) {
|
||||
setValues();
|
||||
}
|
||||
});
|
||||
watch(() => props.modelValue, (val, oldVal) => {
|
||||
if (initData.dragging || isArray(val) && isArray(oldVal) && val.every((item, index) => item === oldVal[index]) && initData.firstValue === val[0] && initData.secondValue === val[1]) {
|
||||
return;
|
||||
}
|
||||
setValues();
|
||||
}, {
|
||||
deep: true
|
||||
});
|
||||
watch(() => [props.min, props.max], () => {
|
||||
setValues();
|
||||
});
|
||||
};
|
||||
|
||||
export { useWatch };
|
||||
//# sourceMappingURL=use-watch.mjs.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user