126 lines
4.3 KiB
JavaScript
126 lines
4.3 KiB
JavaScript
import { createVNode as _createVNode } from "vue";
|
|
// Styles
|
|
import "./VSliderTrack.css";
|
|
|
|
// Components
|
|
import { VSliderSymbol } from "./slider.mjs"; // Composables
|
|
import { useBackgroundColor } from "../../composables/color.mjs";
|
|
import { makeComponentProps } from "../../composables/component.mjs";
|
|
import { useRounded } from "../../composables/rounded.mjs"; // Utilities
|
|
import { computed, inject } from 'vue';
|
|
import { convertToUnit, genericComponent, propsFactory, useRender } from "../../util/index.mjs"; // Types
|
|
export const makeVSliderTrackProps = propsFactory({
|
|
start: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
stop: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
...makeComponentProps()
|
|
}, 'VSliderTrack');
|
|
export const 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, '%') : undefined;
|
|
return _createVNode("div", {
|
|
"key": tick.value,
|
|
"class": ['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']) && _createVNode("div", {
|
|
"class": "v-slider-track__tick-label"
|
|
}, [slots['tick-label']?.({
|
|
tick,
|
|
index
|
|
}) ?? tick.label])]);
|
|
});
|
|
});
|
|
useRender(() => {
|
|
return _createVNode("div", {
|
|
"class": ['v-slider-track', roundedClasses.value, props.class],
|
|
"style": [{
|
|
'--v-slider-track-size': convertToUnit(trackSize.value),
|
|
'--v-slider-tick-size': convertToUnit(tickSize.value)
|
|
}, props.style]
|
|
}, [_createVNode("div", {
|
|
"class": ['v-slider-track__background', trackColorClasses.value, {
|
|
'v-slider-track__background--opacity': !!color.value || !trackFillColor.value
|
|
}],
|
|
"style": {
|
|
...backgroundStyles.value,
|
|
...trackColorStyles.value
|
|
}
|
|
}, null), _createVNode("div", {
|
|
"class": ['v-slider-track__fill', trackFillColorClasses.value],
|
|
"style": {
|
|
...trackFillStyles.value,
|
|
...trackFillColorStyles.value
|
|
}
|
|
}, null), showTicks.value && _createVNode("div", {
|
|
"class": ['v-slider-track__ticks', {
|
|
'v-slider-track__ticks--always-show': showTicks.value === 'always'
|
|
}]
|
|
}, [computedTicks.value])]);
|
|
});
|
|
return {};
|
|
}
|
|
});
|
|
//# sourceMappingURL=VSliderTrack.mjs.map
|