237 lines
6.1 KiB
JavaScript
237 lines
6.1 KiB
JavaScript
|
"use strict";
|
||
|
|
||
|
Object.defineProperty(exports, "__esModule", {
|
||
|
value: true
|
||
|
});
|
||
|
exports.default = void 0;
|
||
|
|
||
|
require("../../../src/components/VRating/VRating.sass");
|
||
|
|
||
|
var _VIcon = _interopRequireDefault(require("../VIcon"));
|
||
|
|
||
|
var _colorable = _interopRequireDefault(require("../../mixins/colorable"));
|
||
|
|
||
|
var _delayable = _interopRequireDefault(require("../../mixins/delayable"));
|
||
|
|
||
|
var _sizeable = _interopRequireDefault(require("../../mixins/sizeable"));
|
||
|
|
||
|
var _rippleable = _interopRequireDefault(require("../../mixins/rippleable"));
|
||
|
|
||
|
var _themeable = _interopRequireDefault(require("../../mixins/themeable"));
|
||
|
|
||
|
var _helpers = require("../../util/helpers");
|
||
|
|
||
|
var _mixins = _interopRequireDefault(require("../../util/mixins"));
|
||
|
|
||
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||
|
|
||
|
// Styles
|
||
|
// Components
|
||
|
// Mixins
|
||
|
// Utilities
|
||
|
|
||
|
/* @vue/component */
|
||
|
var _default = (0, _mixins.default)(_colorable.default, _delayable.default, _rippleable.default, _sizeable.default, _themeable.default).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: function data() {
|
||
|
return {
|
||
|
hoverIndex: -1,
|
||
|
internalValue: this.value
|
||
|
};
|
||
|
},
|
||
|
computed: {
|
||
|
directives: function directives() {
|
||
|
if (this.readonly || !this.ripple) return [];
|
||
|
return [{
|
||
|
name: 'ripple',
|
||
|
value: {
|
||
|
circle: true
|
||
|
}
|
||
|
}];
|
||
|
},
|
||
|
iconProps: function iconProps() {
|
||
|
var _this$$props = this.$props,
|
||
|
dark = _this$$props.dark,
|
||
|
medium = _this$$props.medium,
|
||
|
large = _this$$props.large,
|
||
|
light = _this$$props.light,
|
||
|
small = _this$$props.small,
|
||
|
size = _this$$props.size,
|
||
|
xLarge = _this$$props.xLarge;
|
||
|
return {
|
||
|
dark: dark,
|
||
|
medium: medium,
|
||
|
large: large,
|
||
|
light: light,
|
||
|
size: size,
|
||
|
small: small,
|
||
|
xLarge: xLarge
|
||
|
};
|
||
|
},
|
||
|
isHovering: function isHovering() {
|
||
|
return this.hover && this.hoverIndex >= 0;
|
||
|
}
|
||
|
},
|
||
|
watch: {
|
||
|
internalValue: function internalValue(val) {
|
||
|
val !== this.value && this.$emit('input', val);
|
||
|
},
|
||
|
value: function value(val) {
|
||
|
this.internalValue = val;
|
||
|
}
|
||
|
},
|
||
|
methods: {
|
||
|
createClickFn: function createClickFn(i) {
|
||
|
var _this = this;
|
||
|
|
||
|
return function (e) {
|
||
|
if (_this.readonly) return;
|
||
|
|
||
|
var newValue = _this.genHoverIndex(e, i);
|
||
|
|
||
|
if (_this.clearable && _this.internalValue === newValue) {
|
||
|
_this.internalValue = 0;
|
||
|
} else {
|
||
|
_this.internalValue = newValue;
|
||
|
}
|
||
|
};
|
||
|
},
|
||
|
createProps: function createProps(i) {
|
||
|
var 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: function genHoverIndex(e, i) {
|
||
|
return i + (this.isHalfEvent(e) ? 0.5 : 1);
|
||
|
},
|
||
|
getIconName: function getIconName(props) {
|
||
|
var isFull = this.isHovering ? props.isHovered : props.isFilled;
|
||
|
var isHalf = this.isHovering ? props.isHalfHovered : props.isHalfFilled;
|
||
|
return isFull ? this.fullIcon : isHalf ? this.halfIcon : this.emptyIcon;
|
||
|
},
|
||
|
getColor: function 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: function isHalfEvent(e) {
|
||
|
if (this.halfIncrements) {
|
||
|
var rect = e.target && e.target.getBoundingClientRect();
|
||
|
if (rect && e.pageX - rect.left < rect.width / 2) return true;
|
||
|
}
|
||
|
|
||
|
return false;
|
||
|
},
|
||
|
onMouseEnter: function onMouseEnter(e, i) {
|
||
|
var _this2 = this;
|
||
|
|
||
|
this.runDelay('open', function () {
|
||
|
_this2.hoverIndex = _this2.genHoverIndex(e, i);
|
||
|
});
|
||
|
},
|
||
|
onMouseLeave: function onMouseLeave() {
|
||
|
var _this3 = this;
|
||
|
|
||
|
this.runDelay('close', function () {
|
||
|
return _this3.hoverIndex = -1;
|
||
|
});
|
||
|
},
|
||
|
genItem: function genItem(i) {
|
||
|
var _this4 = this;
|
||
|
|
||
|
var props = this.createProps(i);
|
||
|
if (this.$scopedSlots.item) return this.$scopedSlots.item(props);
|
||
|
var listeners = {
|
||
|
click: props.click
|
||
|
};
|
||
|
|
||
|
if (this.hover) {
|
||
|
listeners.mouseenter = function (e) {
|
||
|
return _this4.onMouseEnter(e, i);
|
||
|
};
|
||
|
|
||
|
listeners.mouseleave = this.onMouseLeave;
|
||
|
|
||
|
if (this.halfIncrements) {
|
||
|
listeners.mousemove = function (e) {
|
||
|
return _this4.onMouseEnter(e, i);
|
||
|
};
|
||
|
}
|
||
|
}
|
||
|
|
||
|
return this.$createElement(_VIcon.default, this.setTextColor(this.getColor(props), {
|
||
|
directives: this.directives,
|
||
|
props: this.iconProps,
|
||
|
on: listeners
|
||
|
}), [this.getIconName(props)]);
|
||
|
}
|
||
|
},
|
||
|
render: function render(h) {
|
||
|
var _this5 = this;
|
||
|
|
||
|
var children = (0, _helpers.createRange)(Number(this.length)).map(function (i) {
|
||
|
return _this5.genItem(i);
|
||
|
});
|
||
|
return h('div', {
|
||
|
staticClass: 'v-rating',
|
||
|
class: {
|
||
|
'v-rating--readonly': this.readonly,
|
||
|
'v-rating--dense': this.dense
|
||
|
}
|
||
|
}, children);
|
||
|
}
|
||
|
});
|
||
|
|
||
|
exports.default = _default;
|
||
|
//# sourceMappingURL=VRating.js.map
|