This repository has been archived on 2024-07-27. You can view files and clone it, but cannot push or open issues or pull requests.
keksAccountGUI/node_modulesOLD/vuetify/lib/components/VRating/VRating.js

217 lines
4.8 KiB
JavaScript
Raw Normal View History

2019-08-11 18:48:02 +00:00
// Styles
import "../../../src/components/VRating/VRating.sass"; // Components
import VIcon from '../VIcon'; // Mixins
import Colorable from '../../mixins/colorable';
import Delayable from '../../mixins/delayable';
import Sizeable from '../../mixins/sizeable';
import Rippleable from '../../mixins/rippleable';
import Themeable from '../../mixins/themeable'; // Utilities
import { createRange } from '../../util/helpers';
import mixins from '../../util/mixins';
/* @vue/component */
export default mixins(Colorable, Delayable, Rippleable, Sizeable, Themeable).extend({
name: 'v-rating',
props: {
backgroundColor: {
type: String,
default: 'accent'
},
color: {
type: String,
default: 'primary'
},
clearable: Boolean,
dense: Boolean,
emptyIcon: {
type: String,
default: '$vuetify.icons.ratingEmpty'
},
fullIcon: {
type: String,
default: '$vuetify.icons.ratingFull'
},
halfIcon: {
type: String,
default: '$vuetify.icons.ratingHalf'
},
halfIncrements: Boolean,
hover: Boolean,
length: {
type: [Number, String],
default: 5
},
readonly: Boolean,
size: [Number, String],
value: {
type: Number,
default: 0
}
},
data() {
return {
hoverIndex: -1,
internalValue: this.value
};
},
computed: {
directives() {
if (this.readonly || !this.ripple) return [];
return [{
name: 'ripple',
value: {
circle: true
}
}];
},
iconProps() {
const {
dark,
medium,
large,
light,
small,
size,
xLarge
} = this.$props;
return {
dark,
medium,
large,
light,
size,
small,
xLarge
};
},
isHovering() {
return this.hover && this.hoverIndex >= 0;
}
},
watch: {
internalValue(val) {
val !== this.value && this.$emit('input', val);
},
value(val) {
this.internalValue = val;
}
},
methods: {
createClickFn(i) {
return e => {
if (this.readonly) return;
const newValue = this.genHoverIndex(e, i);
if (this.clearable && this.internalValue === newValue) {
this.internalValue = 0;
} else {
this.internalValue = newValue;
}
};
},
createProps(i) {
const props = {
index: i,
value: this.internalValue,
click: this.createClickFn(i),
isFilled: Math.floor(this.internalValue) > i,
isHovered: Math.floor(this.hoverIndex) > i
};
if (this.halfIncrements) {
props.isHalfHovered = !props.isHovered && (this.hoverIndex - i) % 1 > 0;
props.isHalfFilled = !props.isFilled && (this.internalValue - i) % 1 > 0;
}
return props;
},
genHoverIndex(e, i) {
return i + (this.isHalfEvent(e) ? 0.5 : 1);
},
getIconName(props) {
const isFull = this.isHovering ? props.isHovered : props.isFilled;
const isHalf = this.isHovering ? props.isHalfHovered : props.isHalfFilled;
return isFull ? this.fullIcon : isHalf ? this.halfIcon : this.emptyIcon;
},
getColor(props) {
if (this.isHovering) {
if (props.isHovered || props.isHalfHovered) return this.color;
} else {
if (props.isFilled || props.isHalfFilled) return this.color;
}
return this.backgroundColor;
},
isHalfEvent(e) {
if (this.halfIncrements) {
const rect = e.target && e.target.getBoundingClientRect();
if (rect && e.pageX - rect.left < rect.width / 2) return true;
}
return false;
},
onMouseEnter(e, i) {
this.runDelay('open', () => {
this.hoverIndex = this.genHoverIndex(e, i);
});
},
onMouseLeave() {
this.runDelay('close', () => this.hoverIndex = -1);
},
genItem(i) {
const props = this.createProps(i);
if (this.$scopedSlots.item) return this.$scopedSlots.item(props);
const listeners = {
click: props.click
};
if (this.hover) {
listeners.mouseenter = e => this.onMouseEnter(e, i);
listeners.mouseleave = this.onMouseLeave;
if (this.halfIncrements) {
listeners.mousemove = e => this.onMouseEnter(e, i);
}
}
return this.$createElement(VIcon, this.setTextColor(this.getColor(props), {
directives: this.directives,
props: this.iconProps,
on: listeners
}), [this.getIconName(props)]);
}
},
render(h) {
const children = createRange(Number(this.length)).map(i => this.genItem(i));
return h('div', {
staticClass: 'v-rating',
class: {
'v-rating--readonly': this.readonly,
'v-rating--dense': this.dense
}
}, children);
}
});
//# sourceMappingURL=VRating.js.map