vuestic-ui
Version:
Vue 3 UI Framework
65 lines (64 loc) • 2.01 kB
JavaScript
import { ref, computed, getCurrentInstance } from "vue";
import { c as clamp } from "../../../utils/clamp.mjs";
import { R as RatingValue } from "../types.mjs";
import { u as useStatefulProps, b as useStateful } from "../../../composables/useStateful.mjs";
import { u as useHover } from "../../../composables/useHover.mjs";
const getContext = () => {
const instance = getCurrentInstance();
if (!instance) {
throw new Error("useRating hooks must be used on top of setup function");
}
return {
props: instance.props,
emit: instance.emit
};
};
const useRatingProps = {
...useStatefulProps,
modelValue: { type: Number, default: 0 },
clearable: { type: Boolean, default: false },
hover: { type: Boolean, default: false }
};
const useRating = (props) => {
const { emit } = getContext();
const { isHovered, onMouseEnter, onMouseLeave } = useHover();
const { valueComputed: modelValue } = useStateful(props, emit);
const hoveredValue = ref(0);
const visibleValue = computed(() => !props.disabled && !props.readonly && props.hover && isHovered.value ? hoveredValue.value : modelValue.value);
const onItemValueUpdate = (itemIndex, newValue) => {
const newModelValue = itemIndex + newValue;
if (props.clearable) {
if (modelValue.value === newModelValue) {
modelValue.value = 0;
return;
}
}
modelValue.value = newModelValue;
};
const onItemHoveredValueUpdate = (itemIndex, newValue) => {
if (!props.hover) {
return;
}
hoveredValue.value = itemIndex + newValue;
};
const getItemValue = (itemIndex) => {
const itemValue = visibleValue.value - itemIndex;
return clamp(itemValue, RatingValue.EMPTY, RatingValue.FULL);
};
return {
visibleValue,
modelValue,
hoveredValue,
isHovered,
onMouseEnter,
onMouseLeave,
onItemValueUpdate,
onItemHoveredValueUpdate,
getItemValue
};
};
export {
useRating as a,
useRatingProps as u
};
//# sourceMappingURL=useRating.mjs.map