831 lines
24 KiB
JavaScript
831 lines
24 KiB
JavaScript
import {
|
|
VInput,
|
|
VLabel,
|
|
makeFocusProps,
|
|
makeVInputProps,
|
|
useFocus
|
|
} from "./chunk-IK67YVHF.js";
|
|
import {
|
|
useForm
|
|
} from "./chunk-GAYXO4FM.js";
|
|
import {
|
|
VScaleTransition
|
|
} from "./chunk-B4JFJDWM.js";
|
|
import {
|
|
forwardRefs
|
|
} from "./chunk-GUNW7S2L.js";
|
|
import {
|
|
makeElevationProps,
|
|
useElevation
|
|
} from "./chunk-YJD2PNP6.js";
|
|
import {
|
|
makeRoundedProps,
|
|
useRounded
|
|
} from "./chunk-AQK3CYVW.js";
|
|
import {
|
|
ripple_default
|
|
} from "./chunk-DS4J67XG.js";
|
|
import {
|
|
useBackgroundColor,
|
|
useTextColor
|
|
} from "./chunk-BHV5Z34M.js";
|
|
import {
|
|
useRtl
|
|
} from "./chunk-ENTLCOCZ.js";
|
|
import {
|
|
useProxiedModel
|
|
} from "./chunk-KA77II4V.js";
|
|
import {
|
|
clamp,
|
|
convertToUnit,
|
|
createRange,
|
|
filterInputAttrs,
|
|
genericComponent,
|
|
getDecimals,
|
|
keyValues,
|
|
makeComponentProps,
|
|
propsFactory,
|
|
useRender
|
|
} from "./chunk-LZ5T2ERG.js";
|
|
import {
|
|
Fragment,
|
|
computed,
|
|
createBaseVNode,
|
|
createVNode,
|
|
inject,
|
|
mergeProps,
|
|
nextTick,
|
|
normalizeClass,
|
|
normalizeStyle,
|
|
onScopeDispose,
|
|
provide,
|
|
ref,
|
|
shallowRef,
|
|
toRef,
|
|
vShow,
|
|
withDirectives
|
|
} from "./chunk-2MKFL3BX.js";
|
|
|
|
// node_modules/vuetify/lib/components/VSlider/VSlider.js
|
|
import "/home/david/gitea_repo/personal_development/ServerManagerWebApp/frontend/node_modules/vuetify/lib/components/VSlider/VSlider.css";
|
|
|
|
// node_modules/vuetify/lib/components/VSlider/VSliderThumb.js
|
|
import "/home/david/gitea_repo/personal_development/ServerManagerWebApp/frontend/node_modules/vuetify/lib/components/VSlider/VSliderThumb.css";
|
|
|
|
// node_modules/vuetify/lib/components/VSlider/slider.js
|
|
var VSliderSymbol = /* @__PURE__ */ Symbol.for("vuetify:v-slider");
|
|
function getOffset(e, el, direction) {
|
|
const vertical = direction === "vertical";
|
|
const rect = el.getBoundingClientRect();
|
|
const touch = "touches" in e ? e.touches[0] : e;
|
|
return vertical ? touch.clientY - (rect.top + rect.height / 2) : touch.clientX - (rect.left + rect.width / 2);
|
|
}
|
|
function getPosition(e, position) {
|
|
if ("touches" in e && e.touches.length) return e.touches[0][position];
|
|
else if ("changedTouches" in e && e.changedTouches.length) return e.changedTouches[0][position];
|
|
else return e[position];
|
|
}
|
|
var makeSliderProps = propsFactory({
|
|
disabled: {
|
|
type: Boolean,
|
|
default: null
|
|
},
|
|
error: Boolean,
|
|
readonly: {
|
|
type: Boolean,
|
|
default: null
|
|
},
|
|
max: {
|
|
type: [Number, String],
|
|
default: 100
|
|
},
|
|
min: {
|
|
type: [Number, String],
|
|
default: 0
|
|
},
|
|
step: {
|
|
type: [Number, String],
|
|
default: 0
|
|
},
|
|
thumbColor: String,
|
|
thumbLabel: {
|
|
type: [Boolean, String],
|
|
default: void 0,
|
|
validator: (v) => typeof v === "boolean" || v === "always"
|
|
},
|
|
thumbSize: {
|
|
type: [Number, String],
|
|
default: 20
|
|
},
|
|
showTicks: {
|
|
type: [Boolean, String],
|
|
default: false,
|
|
validator: (v) => typeof v === "boolean" || v === "always"
|
|
},
|
|
ticks: {
|
|
type: [Array, Object]
|
|
},
|
|
tickSize: {
|
|
type: [Number, String],
|
|
default: 2
|
|
},
|
|
color: String,
|
|
trackColor: String,
|
|
trackFillColor: String,
|
|
trackSize: {
|
|
type: [Number, String],
|
|
default: 4
|
|
},
|
|
direction: {
|
|
type: String,
|
|
default: "horizontal",
|
|
validator: (v) => ["vertical", "horizontal"].includes(v)
|
|
},
|
|
reverse: Boolean,
|
|
noKeyboard: Boolean,
|
|
...makeRoundedProps(),
|
|
...makeElevationProps({
|
|
elevation: 2
|
|
}),
|
|
ripple: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
}, "Slider");
|
|
var useSteps = (props) => {
|
|
const min = computed(() => parseFloat(props.min));
|
|
const max = computed(() => parseFloat(props.max));
|
|
const step = computed(() => Number(props.step) > 0 ? parseFloat(props.step) : 0);
|
|
const decimals = computed(() => Math.max(getDecimals(step.value), getDecimals(min.value)));
|
|
function roundValue(value) {
|
|
value = parseFloat(value);
|
|
if (step.value <= 0) return value;
|
|
const clamped = clamp(value, min.value, max.value);
|
|
const offset = min.value % step.value;
|
|
let newValue = Math.round((clamped - offset) / step.value) * step.value + offset;
|
|
if (clamped > newValue && newValue + step.value > max.value) {
|
|
newValue = max.value;
|
|
}
|
|
return parseFloat(Math.min(newValue, max.value).toFixed(decimals.value));
|
|
}
|
|
return {
|
|
min,
|
|
max,
|
|
step,
|
|
decimals,
|
|
roundValue
|
|
};
|
|
};
|
|
var useSlider = (_ref) => {
|
|
let {
|
|
props,
|
|
steps,
|
|
onSliderStart,
|
|
onSliderMove,
|
|
onSliderEnd,
|
|
getActiveThumb
|
|
} = _ref;
|
|
const form = useForm(props);
|
|
const {
|
|
isRtl
|
|
} = useRtl();
|
|
const isReversed = toRef(() => props.reverse);
|
|
const vertical = computed(() => props.direction === "vertical");
|
|
const indexFromEnd = computed(() => vertical.value !== isReversed.value);
|
|
const {
|
|
min,
|
|
max,
|
|
step,
|
|
decimals,
|
|
roundValue
|
|
} = steps;
|
|
const thumbSize = computed(() => parseInt(props.thumbSize, 10));
|
|
const tickSize = computed(() => parseInt(props.tickSize, 10));
|
|
const trackSize = computed(() => parseInt(props.trackSize, 10));
|
|
const numTicks = computed(() => (max.value - min.value) / step.value);
|
|
const thumbColor = computed(() => props.error || form.isDisabled.value ? void 0 : props.thumbColor ?? props.color);
|
|
const thumbLabelColor = computed(() => props.error || form.isDisabled.value ? void 0 : props.thumbColor);
|
|
const trackColor = computed(() => props.error || form.isDisabled.value ? void 0 : props.trackColor ?? props.color);
|
|
const trackFillColor = computed(() => props.error || form.isDisabled.value ? void 0 : props.trackFillColor ?? props.color);
|
|
const mousePressed = shallowRef(false);
|
|
const startOffset = shallowRef(0);
|
|
const trackContainerRef = ref();
|
|
const activeThumbRef = ref();
|
|
function parseMouseMove(e) {
|
|
const el = trackContainerRef.value?.$el;
|
|
if (!el) return;
|
|
const vertical2 = props.direction === "vertical";
|
|
const start = vertical2 ? "top" : "left";
|
|
const length = vertical2 ? "height" : "width";
|
|
const position2 = vertical2 ? "clientY" : "clientX";
|
|
const {
|
|
[start]: trackStart,
|
|
[length]: trackLength
|
|
} = el.getBoundingClientRect();
|
|
const clickOffset = getPosition(e, position2);
|
|
let clickPos = clamp((clickOffset - trackStart - startOffset.value) / trackLength) || 0;
|
|
if (vertical2 ? indexFromEnd.value : indexFromEnd.value !== isRtl.value) clickPos = 1 - clickPos;
|
|
return roundValue(min.value + clickPos * (max.value - min.value));
|
|
}
|
|
const handleStop = (e) => {
|
|
const value = parseMouseMove(e);
|
|
if (value != null) {
|
|
onSliderEnd({
|
|
value
|
|
});
|
|
}
|
|
mousePressed.value = false;
|
|
startOffset.value = 0;
|
|
};
|
|
const handleStart = (e) => {
|
|
const value = parseMouseMove(e);
|
|
activeThumbRef.value = getActiveThumb(e);
|
|
if (!activeThumbRef.value) return;
|
|
mousePressed.value = true;
|
|
if (activeThumbRef.value.contains(e.target)) {
|
|
startOffset.value = getOffset(e, activeThumbRef.value, props.direction);
|
|
} else {
|
|
startOffset.value = 0;
|
|
if (value != null) {
|
|
onSliderMove({
|
|
value
|
|
});
|
|
}
|
|
}
|
|
if (value != null) {
|
|
onSliderStart({
|
|
value
|
|
});
|
|
}
|
|
nextTick(() => activeThumbRef.value?.focus());
|
|
};
|
|
const moveListenerOptions = {
|
|
passive: true,
|
|
capture: true
|
|
};
|
|
function onMouseMove(e) {
|
|
const value = parseMouseMove(e);
|
|
if (value != null) {
|
|
onSliderMove({
|
|
value
|
|
});
|
|
}
|
|
}
|
|
function onSliderMouseUp(e) {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
handleStop(e);
|
|
window.removeEventListener("mousemove", onMouseMove, moveListenerOptions);
|
|
window.removeEventListener("mouseup", onSliderMouseUp);
|
|
}
|
|
function onSliderTouchend(e) {
|
|
handleStop(e);
|
|
window.removeEventListener("touchmove", onMouseMove, moveListenerOptions);
|
|
e.target?.removeEventListener("touchend", onSliderTouchend);
|
|
}
|
|
function onSliderTouchstart(e) {
|
|
handleStart(e);
|
|
window.addEventListener("touchmove", onMouseMove, moveListenerOptions);
|
|
e.target?.addEventListener("touchend", onSliderTouchend, {
|
|
passive: false
|
|
});
|
|
}
|
|
function onSliderMousedown(e) {
|
|
if (e.button !== 0) return;
|
|
e.preventDefault();
|
|
handleStart(e);
|
|
window.addEventListener("mousemove", onMouseMove, moveListenerOptions);
|
|
window.addEventListener("mouseup", onSliderMouseUp, {
|
|
passive: false
|
|
});
|
|
}
|
|
onScopeDispose(() => {
|
|
window.removeEventListener("touchmove", onMouseMove);
|
|
window.removeEventListener("mousemove", onMouseMove);
|
|
window.removeEventListener("mouseup", onSliderMouseUp);
|
|
});
|
|
const position = (val) => {
|
|
const percentage = (val - min.value) / (max.value - min.value) * 100;
|
|
return clamp(isNaN(percentage) ? 0 : percentage, 0, 100);
|
|
};
|
|
const showTicks = toRef(() => props.showTicks);
|
|
const parsedTicks = computed(() => {
|
|
if (!showTicks.value) return [];
|
|
if (!props.ticks) {
|
|
return numTicks.value !== Infinity ? createRange(numTicks.value + 1).map((t) => {
|
|
const value = min.value + t * step.value;
|
|
return {
|
|
value,
|
|
position: position(value)
|
|
};
|
|
}) : [];
|
|
}
|
|
if (Array.isArray(props.ticks)) return props.ticks.map((t) => ({
|
|
value: t,
|
|
position: position(t),
|
|
label: t.toString()
|
|
}));
|
|
return Object.keys(props.ticks).map((key) => ({
|
|
value: parseFloat(key),
|
|
position: position(parseFloat(key)),
|
|
label: props.ticks[key]
|
|
}));
|
|
});
|
|
const hasLabels = computed(() => parsedTicks.value.some((_ref2) => {
|
|
let {
|
|
label
|
|
} = _ref2;
|
|
return !!label;
|
|
}));
|
|
const data = {
|
|
activeThumbRef,
|
|
color: toRef(() => props.color),
|
|
decimals,
|
|
disabled: form.isDisabled,
|
|
direction: toRef(() => props.direction),
|
|
elevation: toRef(() => props.elevation),
|
|
hasLabels,
|
|
isReversed,
|
|
indexFromEnd,
|
|
min,
|
|
max,
|
|
mousePressed,
|
|
noKeyboard: toRef(() => props.noKeyboard),
|
|
numTicks,
|
|
onSliderMousedown,
|
|
onSliderTouchstart,
|
|
parsedTicks,
|
|
parseMouseMove,
|
|
position,
|
|
readonly: form.isReadonly,
|
|
rounded: toRef(() => props.rounded),
|
|
roundValue,
|
|
showTicks,
|
|
startOffset,
|
|
step,
|
|
thumbSize,
|
|
thumbColor,
|
|
thumbLabelColor,
|
|
thumbLabel: toRef(() => props.thumbLabel),
|
|
ticks: toRef(() => props.ticks),
|
|
tickSize,
|
|
trackColor,
|
|
trackContainerRef,
|
|
trackFillColor,
|
|
trackSize,
|
|
vertical
|
|
};
|
|
provide(VSliderSymbol, data);
|
|
return data;
|
|
};
|
|
|
|
// node_modules/vuetify/lib/components/VSlider/VSliderThumb.js
|
|
var makeVSliderThumbProps = propsFactory({
|
|
focused: Boolean,
|
|
max: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
min: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
modelValue: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
position: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
ripple: {
|
|
type: [Boolean, Object],
|
|
default: true
|
|
},
|
|
name: String,
|
|
noKeyboard: Boolean,
|
|
...makeComponentProps()
|
|
}, "VSliderThumb");
|
|
var VSliderThumb = genericComponent()({
|
|
name: "VSliderThumb",
|
|
directives: {
|
|
vRipple: ripple_default
|
|
},
|
|
props: makeVSliderThumbProps(),
|
|
emits: {
|
|
"update:modelValue": (v) => true
|
|
},
|
|
setup(props, _ref) {
|
|
let {
|
|
slots,
|
|
emit
|
|
} = _ref;
|
|
const slider = inject(VSliderSymbol);
|
|
const {
|
|
isRtl,
|
|
rtlClasses
|
|
} = useRtl();
|
|
if (!slider) throw new Error("[Vuetify] v-slider-thumb must be used inside v-slider or v-range-slider");
|
|
const {
|
|
min,
|
|
max,
|
|
thumbColor,
|
|
thumbLabelColor,
|
|
step,
|
|
disabled,
|
|
thumbSize,
|
|
thumbLabel,
|
|
direction,
|
|
isReversed,
|
|
vertical,
|
|
readonly,
|
|
elevation,
|
|
mousePressed,
|
|
decimals,
|
|
indexFromEnd
|
|
} = slider;
|
|
const elevationProps = computed(() => !disabled.value ? elevation.value : void 0);
|
|
const {
|
|
elevationClasses
|
|
} = useElevation(elevationProps);
|
|
const {
|
|
textColorClasses,
|
|
textColorStyles
|
|
} = useTextColor(thumbColor);
|
|
const {
|
|
backgroundColorClasses,
|
|
backgroundColorStyles
|
|
} = useBackgroundColor(thumbLabelColor);
|
|
const {
|
|
pageup,
|
|
pagedown,
|
|
end,
|
|
home,
|
|
left,
|
|
right,
|
|
down,
|
|
up
|
|
} = keyValues;
|
|
const relevantKeys = [pageup, pagedown, end, home, left, right, down, up];
|
|
const multipliers = computed(() => {
|
|
if (step.value) return [1, 2, 3];
|
|
else return [1, 5, 10];
|
|
});
|
|
function parseKeydown(e, value) {
|
|
if (props.noKeyboard || disabled.value) return;
|
|
if (!relevantKeys.includes(e.key)) return;
|
|
e.preventDefault();
|
|
const _step = step.value || 0.1;
|
|
const steps = (max.value - min.value) / _step;
|
|
if ([left, right, down, up].includes(e.key)) {
|
|
const increase = vertical.value ? [isRtl.value ? left : right, isReversed.value ? down : up] : indexFromEnd.value !== isRtl.value ? [left, up] : [right, up];
|
|
const direction2 = increase.includes(e.key) ? 1 : -1;
|
|
const multiplier = e.shiftKey ? 2 : e.ctrlKey ? 1 : 0;
|
|
if (direction2 === -1 && value === max.value && !multiplier && !Number.isInteger(steps)) {
|
|
value = value - steps % 1 * _step;
|
|
} else {
|
|
value = value + direction2 * _step * multipliers.value[multiplier];
|
|
}
|
|
} else if (e.key === home) {
|
|
value = min.value;
|
|
} else if (e.key === end) {
|
|
value = max.value;
|
|
} else {
|
|
const direction2 = e.key === pagedown ? 1 : -1;
|
|
value = value - direction2 * _step * (steps > 100 ? steps / 10 : 10);
|
|
}
|
|
return Math.max(props.min, Math.min(props.max, value));
|
|
}
|
|
function onKeydown(e) {
|
|
const newValue = parseKeydown(e, props.modelValue);
|
|
newValue != null && emit("update:modelValue", newValue);
|
|
}
|
|
useRender(() => {
|
|
const positionPercentage = convertToUnit(indexFromEnd.value ? 100 - props.position : props.position, "%");
|
|
return createBaseVNode("div", {
|
|
"class": normalizeClass(["v-slider-thumb", {
|
|
"v-slider-thumb--focused": props.focused,
|
|
"v-slider-thumb--pressed": props.focused && mousePressed.value
|
|
}, props.class, rtlClasses.value]),
|
|
"style": normalizeStyle([{
|
|
"--v-slider-thumb-position": positionPercentage,
|
|
"--v-slider-thumb-size": convertToUnit(thumbSize.value)
|
|
}, props.style]),
|
|
"role": "slider",
|
|
"tabindex": disabled.value ? -1 : 0,
|
|
"aria-label": props.name,
|
|
"aria-valuemin": min.value,
|
|
"aria-valuemax": max.value,
|
|
"aria-valuenow": props.modelValue,
|
|
"aria-readonly": !!readonly.value,
|
|
"aria-orientation": direction.value,
|
|
"onKeydown": !readonly.value ? onKeydown : void 0
|
|
}, [createBaseVNode("div", {
|
|
"class": normalizeClass(["v-slider-thumb__surface", textColorClasses.value, elevationClasses.value]),
|
|
"style": normalizeStyle(textColorStyles.value)
|
|
}, null), withDirectives(createBaseVNode("div", {
|
|
"class": normalizeClass(["v-slider-thumb__ripple", textColorClasses.value]),
|
|
"style": normalizeStyle(textColorStyles.value)
|
|
}, null), [[ripple_default, props.ripple, null, {
|
|
circle: true,
|
|
center: true
|
|
}]]), createVNode(VScaleTransition, {
|
|
"origin": "bottom center"
|
|
}, {
|
|
default: () => [withDirectives(createBaseVNode("div", {
|
|
"class": "v-slider-thumb__label-container"
|
|
}, [createBaseVNode("div", {
|
|
"class": normalizeClass(["v-slider-thumb__label", backgroundColorClasses.value]),
|
|
"style": normalizeStyle(backgroundColorStyles.value)
|
|
}, [createBaseVNode("div", null, [slots["thumb-label"]?.({
|
|
modelValue: props.modelValue
|
|
}) ?? props.modelValue.toFixed(step.value ? decimals.value : 1)]), createBaseVNode("div", {
|
|
"class": "v-slider-thumb__label-wedge"
|
|
}, null)])]), [[vShow, thumbLabel.value && props.focused || thumbLabel.value === "always"]])]
|
|
})]);
|
|
});
|
|
return {};
|
|
}
|
|
});
|
|
|
|
// node_modules/vuetify/lib/components/VSlider/VSliderTrack.js
|
|
import "/home/david/gitea_repo/personal_development/ServerManagerWebApp/frontend/node_modules/vuetify/lib/components/VSlider/VSliderTrack.css";
|
|
var makeVSliderTrackProps = propsFactory({
|
|
start: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
stop: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
...makeComponentProps()
|
|
}, "VSliderTrack");
|
|
var VSliderTrack = genericComponent()({
|
|
name: "VSliderTrack",
|
|
props: makeVSliderTrackProps(),
|
|
emits: {},
|
|
setup(props, _ref) {
|
|
let {
|
|
slots
|
|
} = _ref;
|
|
const slider = inject(VSliderSymbol);
|
|
if (!slider) throw new Error("[Vuetify] v-slider-track must be inside v-slider or v-range-slider");
|
|
const {
|
|
color,
|
|
parsedTicks,
|
|
rounded,
|
|
showTicks,
|
|
tickSize,
|
|
trackColor,
|
|
trackFillColor,
|
|
trackSize,
|
|
vertical,
|
|
min,
|
|
max,
|
|
indexFromEnd
|
|
} = slider;
|
|
const {
|
|
roundedClasses
|
|
} = useRounded(rounded);
|
|
const {
|
|
backgroundColorClasses: trackFillColorClasses,
|
|
backgroundColorStyles: trackFillColorStyles
|
|
} = useBackgroundColor(trackFillColor);
|
|
const {
|
|
backgroundColorClasses: trackColorClasses,
|
|
backgroundColorStyles: trackColorStyles
|
|
} = useBackgroundColor(trackColor);
|
|
const startDir = computed(() => `inset-${vertical.value ? "block" : "inline"}-${indexFromEnd.value ? "end" : "start"}`);
|
|
const endDir = computed(() => vertical.value ? "height" : "width");
|
|
const backgroundStyles = computed(() => {
|
|
return {
|
|
[startDir.value]: "0%",
|
|
[endDir.value]: "100%"
|
|
};
|
|
});
|
|
const trackFillWidth = computed(() => props.stop - props.start);
|
|
const trackFillStyles = computed(() => {
|
|
return {
|
|
[startDir.value]: convertToUnit(props.start, "%"),
|
|
[endDir.value]: convertToUnit(trackFillWidth.value, "%")
|
|
};
|
|
});
|
|
const computedTicks = computed(() => {
|
|
if (!showTicks.value) return [];
|
|
const ticks = vertical.value ? parsedTicks.value.slice().reverse() : parsedTicks.value;
|
|
return ticks.map((tick, index) => {
|
|
const directionValue = tick.value !== min.value && tick.value !== max.value ? convertToUnit(tick.position, "%") : void 0;
|
|
return createBaseVNode("div", {
|
|
"key": tick.value,
|
|
"class": normalizeClass(["v-slider-track__tick", {
|
|
"v-slider-track__tick--filled": tick.position >= props.start && tick.position <= props.stop,
|
|
"v-slider-track__tick--first": tick.value === min.value,
|
|
"v-slider-track__tick--last": tick.value === max.value
|
|
}]),
|
|
"style": {
|
|
[startDir.value]: directionValue
|
|
}
|
|
}, [(tick.label || slots["tick-label"]) && createBaseVNode("div", {
|
|
"class": "v-slider-track__tick-label"
|
|
}, [slots["tick-label"]?.({
|
|
tick,
|
|
index
|
|
}) ?? tick.label])]);
|
|
});
|
|
});
|
|
useRender(() => {
|
|
return createBaseVNode("div", {
|
|
"class": normalizeClass(["v-slider-track", roundedClasses.value, props.class]),
|
|
"style": normalizeStyle([{
|
|
"--v-slider-track-size": convertToUnit(trackSize.value),
|
|
"--v-slider-tick-size": convertToUnit(tickSize.value)
|
|
}, props.style])
|
|
}, [createBaseVNode("div", {
|
|
"class": normalizeClass(["v-slider-track__background", trackColorClasses.value, {
|
|
"v-slider-track__background--opacity": !!color.value || !trackFillColor.value
|
|
}]),
|
|
"style": {
|
|
...backgroundStyles.value,
|
|
...trackColorStyles.value
|
|
}
|
|
}, null), createBaseVNode("div", {
|
|
"class": normalizeClass(["v-slider-track__fill", trackFillColorClasses.value]),
|
|
"style": {
|
|
...trackFillStyles.value,
|
|
...trackFillColorStyles.value
|
|
}
|
|
}, null), showTicks.value && createBaseVNode("div", {
|
|
"class": normalizeClass(["v-slider-track__ticks", {
|
|
"v-slider-track__ticks--always-show": showTicks.value === "always"
|
|
}])
|
|
}, [computedTicks.value])]);
|
|
});
|
|
return {};
|
|
}
|
|
});
|
|
|
|
// node_modules/vuetify/lib/components/VSlider/VSlider.js
|
|
var makeVSliderProps = propsFactory({
|
|
...makeFocusProps(),
|
|
...makeSliderProps(),
|
|
...makeVInputProps(),
|
|
modelValue: {
|
|
type: [Number, String],
|
|
default: 0
|
|
}
|
|
}, "VSlider");
|
|
var VSlider = genericComponent()({
|
|
name: "VSlider",
|
|
inheritAttrs: false,
|
|
props: makeVSliderProps(),
|
|
emits: {
|
|
"update:focused": (value) => true,
|
|
"update:modelValue": (v) => true,
|
|
start: (value) => true,
|
|
end: (value) => true
|
|
},
|
|
setup(props, _ref) {
|
|
let {
|
|
slots,
|
|
emit,
|
|
attrs
|
|
} = _ref;
|
|
const thumbContainerRef = ref();
|
|
const inputRef = ref();
|
|
const {
|
|
rtlClasses
|
|
} = useRtl();
|
|
const steps = useSteps(props);
|
|
const model = useProxiedModel(props, "modelValue", void 0, (value) => {
|
|
return steps.roundValue(value == null ? steps.min.value : value);
|
|
});
|
|
const {
|
|
min,
|
|
max,
|
|
mousePressed,
|
|
roundValue,
|
|
onSliderMousedown,
|
|
onSliderTouchstart,
|
|
trackContainerRef,
|
|
position,
|
|
hasLabels,
|
|
disabled,
|
|
readonly,
|
|
noKeyboard
|
|
} = useSlider({
|
|
props,
|
|
steps,
|
|
onSliderStart: () => {
|
|
if (!disabled.value && !readonly.value) {
|
|
emit("start", model.value);
|
|
}
|
|
},
|
|
onSliderEnd: (_ref2) => {
|
|
let {
|
|
value
|
|
} = _ref2;
|
|
const roundedValue = roundValue(value);
|
|
if (!disabled.value && !readonly.value) {
|
|
model.value = roundedValue;
|
|
}
|
|
emit("end", roundedValue);
|
|
},
|
|
onSliderMove: (_ref3) => {
|
|
let {
|
|
value
|
|
} = _ref3;
|
|
if (!disabled.value && !readonly.value) {
|
|
model.value = roundValue(value);
|
|
}
|
|
},
|
|
getActiveThumb: () => thumbContainerRef.value?.$el
|
|
});
|
|
const {
|
|
isFocused,
|
|
focus,
|
|
blur
|
|
} = useFocus(props);
|
|
const trackStop = computed(() => position(model.value));
|
|
useRender(() => {
|
|
const inputProps = VInput.filterProps(props);
|
|
const [rootAttrs, inputAttrs] = filterInputAttrs(attrs);
|
|
const hasPrepend = !!(props.label || slots.label || slots.prepend);
|
|
return createVNode(VInput, mergeProps({
|
|
"ref": inputRef,
|
|
"class": ["v-slider", {
|
|
"v-slider--has-labels": !!slots["tick-label"] || hasLabels.value,
|
|
"v-slider--focused": isFocused.value,
|
|
"v-slider--pressed": mousePressed.value,
|
|
"v-slider--disabled": disabled.value
|
|
}, rtlClasses.value, props.class],
|
|
"style": props.style
|
|
}, inputProps, rootAttrs, {
|
|
"focused": isFocused.value
|
|
}), {
|
|
...slots,
|
|
prepend: hasPrepend ? (slotProps) => createBaseVNode(Fragment, null, [slots.label?.(slotProps) ?? (props.label ? createVNode(VLabel, {
|
|
"id": slotProps.id.value,
|
|
"class": "v-slider__label",
|
|
"text": props.label
|
|
}, null) : void 0), slots.prepend?.(slotProps)]) : void 0,
|
|
default: (_ref4) => {
|
|
let {
|
|
id,
|
|
messagesId
|
|
} = _ref4;
|
|
return createBaseVNode("div", {
|
|
"class": "v-slider__container",
|
|
"onMousedown": !readonly.value ? onSliderMousedown : void 0,
|
|
"onTouchstartPassive": !readonly.value ? onSliderTouchstart : void 0
|
|
}, [createBaseVNode("input", {
|
|
"id": id.value,
|
|
"name": props.name || id.value,
|
|
"disabled": disabled.value,
|
|
"readonly": readonly.value,
|
|
"tabindex": "-1",
|
|
"value": model.value
|
|
}, null), createVNode(VSliderTrack, {
|
|
"ref": trackContainerRef,
|
|
"start": 0,
|
|
"stop": trackStop.value
|
|
}, {
|
|
"tick-label": slots["tick-label"]
|
|
}), createVNode(VSliderThumb, mergeProps({
|
|
"ref": thumbContainerRef,
|
|
"aria-describedby": messagesId.value,
|
|
"focused": isFocused.value,
|
|
"noKeyboard": noKeyboard.value,
|
|
"min": min.value,
|
|
"max": max.value,
|
|
"modelValue": model.value,
|
|
"onUpdate:modelValue": (v) => model.value = v,
|
|
"position": trackStop.value,
|
|
"elevation": props.elevation,
|
|
"onFocus": focus,
|
|
"onBlur": blur,
|
|
"ripple": props.ripple,
|
|
"name": props.name
|
|
}, inputAttrs), {
|
|
"thumb-label": slots["thumb-label"]
|
|
})]);
|
|
}
|
|
});
|
|
});
|
|
return forwardRefs({
|
|
focus: () => thumbContainerRef.value?.$el.focus()
|
|
}, inputRef);
|
|
}
|
|
});
|
|
|
|
export {
|
|
getOffset,
|
|
makeSliderProps,
|
|
useSteps,
|
|
useSlider,
|
|
VSliderThumb,
|
|
VSliderTrack,
|
|
VSlider
|
|
};
|
|
//# sourceMappingURL=chunk-WGWEQK64.js.map
|