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/es5/components/VSlider/VSlider.js

520 lines
19 KiB
JavaScript
Raw Normal View History

2019-08-11 18:48:02 +00:00
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
require("../../../src/components/VSlider/VSlider.sass");
var _VInput = _interopRequireDefault(require("../VInput"));
var _transitions = require("../transitions");
var _mixins = _interopRequireDefault(require("../../util/mixins"));
var _loadable = _interopRequireDefault(require("../../mixins/loadable"));
var _clickOutside = _interopRequireDefault(require("../../directives/click-outside"));
var _helpers = require("../../util/helpers");
var _console = require("../../util/console");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
var _default2 = (0, _mixins.default)(_VInput.default, _loadable.default
/* @vue/component */
).extend({
name: 'v-slider',
directives: {
ClickOutside: _clickOutside.default
},
mixins: [_loadable.default],
props: {
disabled: Boolean,
inverseLabel: Boolean,
max: {
type: [Number, String],
default: 100
},
min: {
type: [Number, String],
default: 0
},
step: {
type: [Number, String],
default: 1
},
thumbColor: String,
thumbLabel: {
type: [Boolean, String],
default: null,
validator: function validator(v) {
return typeof v === 'boolean' || v === 'always';
}
},
thumbSize: {
type: [Number, String],
default: 32
},
tickLabels: {
type: Array,
default: function _default() {
return [];
}
},
ticks: {
type: [Boolean, String],
default: false,
validator: function validator(v) {
return typeof v === 'boolean' || v === 'always';
}
},
tickSize: {
type: [Number, String],
default: 2
},
trackColor: String,
trackFillColor: String,
value: [Number, String],
vertical: Boolean
},
data: function data() {
return {
app: null,
oldValue: null,
keyPressed: 0,
isFocused: false,
isActive: false,
lazyValue: 0
};
},
computed: {
classes: function classes() {
return _objectSpread({}, _VInput.default.options.computed.classes.call(this), {
'v-input__slider': true,
'v-input__slider--vertical': this.vertical,
'v-input__slider--inverse-label': this.inverseLabel
});
},
internalValue: {
get: function get() {
return this.lazyValue;
},
set: function set(val) {
val = isNaN(val) ? this.minValue : val; // Round value to ensure the
// entire slider range can
// be selected with step
var value = this.roundValue(Math.min(Math.max(val, this.minValue), this.maxValue));
if (value === this.lazyValue) return;
this.lazyValue = value;
this.$emit('input', value);
}
},
trackTransition: function trackTransition() {
return this.keyPressed >= 2 ? 'none' : '';
},
minValue: function minValue() {
return parseFloat(this.min);
},
maxValue: function maxValue() {
return parseFloat(this.max);
},
stepNumeric: function stepNumeric() {
return this.step > 0 ? parseFloat(this.step) : 0;
},
inputWidth: function inputWidth() {
var value = (this.roundValue(this.internalValue) - this.minValue) / (this.maxValue - this.minValue) * 100;
return value;
},
trackFillStyles: function trackFillStyles() {
var _ref;
var startDir = this.vertical ? 'bottom' : 'left';
var endDir = this.vertical ? 'top' : 'right';
var valueDir = this.vertical ? 'height' : 'width';
var start = this.$vuetify.rtl ? 'auto' : '0';
var end = this.$vuetify.rtl ? '0' : 'auto';
var value = this.disabled ? "calc(".concat(this.inputWidth, "% - 10px)") : "".concat(this.inputWidth, "%");
return _ref = {
transition: this.trackTransition
}, _defineProperty(_ref, startDir, start), _defineProperty(_ref, endDir, end), _defineProperty(_ref, valueDir, value), _ref;
},
trackStyles: function trackStyles() {
var _ref2;
var startDir = this.vertical ? this.$vuetify.rtl ? 'bottom' : 'top' : this.$vuetify.rtl ? 'left' : 'right';
var endDir = this.vertical ? 'height' : 'width';
var start = '0px';
var end = this.disabled ? "calc(".concat(100 - this.inputWidth, "% - 10px)") : "calc(".concat(100 - this.inputWidth, "%)");
return _ref2 = {
transition: this.trackTransition
}, _defineProperty(_ref2, startDir, start), _defineProperty(_ref2, endDir, end), _ref2;
},
showTicks: function showTicks() {
return this.tickLabels.length > 0 || !!(!this.disabled && this.stepNumeric && this.ticks);
},
numTicks: function numTicks() {
return Math.ceil((this.maxValue - this.minValue) / this.stepNumeric);
},
showThumbLabel: function showThumbLabel() {
return !this.disabled && !!(this.thumbLabel || this.$scopedSlots['thumb-label']);
},
computedTrackColor: function computedTrackColor() {
if (this.disabled) return undefined;
if (this.trackColor) return this.trackColor;
if (this.isDark) return this.validationState;
return this.validationState || 'primary lighten-3';
},
computedTrackFillColor: function computedTrackFillColor() {
if (this.disabled) return undefined;
if (this.trackFillColor) return this.trackFillColor;
return this.validationState || this.computedColor;
},
computedThumbColor: function computedThumbColor() {
if (this.thumbColor) return this.thumbColor;
return this.validationState || this.computedColor;
}
},
watch: {
min: function min(val) {
var parsed = parseFloat(val);
parsed > this.internalValue && this.$emit('input', parsed);
},
max: function max(val) {
var parsed = parseFloat(val);
parsed < this.internalValue && this.$emit('input', parsed);
},
value: {
handler: function handler(v) {
this.internalValue = v;
}
}
},
// If done in as immediate in
// value watcher, causes issues
// with vue-test-utils
beforeMount: function beforeMount() {
this.internalValue = this.value;
},
mounted: function mounted() {
// Without a v-app, iOS does not work with body selectors
this.app = document.querySelector('[data-app]') || (0, _console.consoleWarn)('Missing v-app or a non-body wrapping element with the [data-app] attribute', this);
},
methods: {
genDefaultSlot: function genDefaultSlot() {
var children = [this.genLabel()];
var slider = this.genSlider();
this.inverseLabel ? children.unshift(slider) : children.push(slider);
children.push(this.genProgress());
return children;
},
genSlider: function genSlider() {
return this.$createElement('div', {
class: _objectSpread({
'v-slider': true,
'v-slider--horizontal': !this.vertical,
'v-slider--vertical': this.vertical,
'v-slider--focused': this.isFocused,
'v-slider--active': this.isActive,
'v-slider--disabled': this.disabled,
'v-slider--readonly': this.readonly
}, this.themeClasses),
directives: [{
name: 'click-outside',
value: this.onBlur
}],
on: {
click: this.onSliderClick
}
}, this.genChildren());
},
genChildren: function genChildren() {
return [this.genInput(), this.genTrackContainer(), this.genSteps(), this.genThumbContainer(this.internalValue, this.inputWidth, this.isActive, this.isFocused, this.onThumbMouseDown, this.onFocus)];
},
genInput: function genInput() {
return this.$createElement('input', {
attrs: _objectSpread({
value: this.internalValue,
id: this.computedId,
disabled: this.disabled,
readonly: true,
tabindex: -1
}, this.$attrs)
});
},
genTrackContainer: function genTrackContainer() {
var children = [this.$createElement('div', this.setBackgroundColor(this.computedTrackColor, {
staticClass: 'v-slider__track-background',
style: this.trackStyles
})), this.$createElement('div', this.setBackgroundColor(this.computedTrackFillColor, {
staticClass: 'v-slider__track-fill',
style: this.trackFillStyles
}))];
return this.$createElement('div', {
staticClass: 'v-slider__track-container',
ref: 'track'
}, children);
},
genSteps: function genSteps() {
var _this = this;
if (!this.step || !this.showTicks) return null;
var tickSize = parseFloat(this.tickSize);
var range = (0, _helpers.createRange)(this.numTicks + 1);
var direction = this.vertical ? 'bottom' : 'left';
var offsetDirection = this.vertical ? 'right' : 'top';
if (this.vertical) range.reverse();
var ticks = range.map(function (i) {
var _style;
var index = _this.$vuetify.rtl ? _this.maxValue - i : i;
var children = [];
if (_this.tickLabels[index]) {
children.push(_this.$createElement('div', {
staticClass: 'v-slider__tick-label'
}, _this.tickLabels[index]));
}
var width = i * (100 / _this.numTicks);
var filled = _this.$vuetify.rtl ? 100 - _this.inputWidth < width : width < _this.inputWidth;
return _this.$createElement('span', {
key: i,
staticClass: 'v-slider__tick',
class: {
'v-slider__tick--filled': filled
},
style: (_style = {
width: "".concat(tickSize, "px"),
height: "".concat(tickSize, "px")
}, _defineProperty(_style, direction, "calc(".concat(width, "% - ").concat(tickSize / 2, "px)")), _defineProperty(_style, offsetDirection, "calc(50% - ".concat(tickSize / 2, "px)")), _style)
}, children);
});
return this.$createElement('div', {
staticClass: 'v-slider__ticks-container',
class: {
'v-slider__ticks-container--always-show': this.ticks === 'always' || this.tickLabels.length > 0
}
}, ticks);
},
genThumbContainer: function genThumbContainer(value, valueWidth, isActive, isFocused, onDrag, onFocus) {
var ref = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : 'thumb';
var children = [this.genThumb()];
var thumbLabelContent = this.genThumbLabelContent(value);
this.showThumbLabel && children.push(this.genThumbLabel(thumbLabelContent));
return this.$createElement('div', this.setTextColor(this.computedThumbColor, {
ref: ref,
staticClass: 'v-slider__thumb-container',
class: {
'v-slider__thumb-container--active': isActive,
'v-slider__thumb-container--focused': isFocused,
'v-slider__thumb-container--show-label': this.showThumbLabel
},
style: this.getThumbContainerStyles(valueWidth),
attrs: _objectSpread({
role: 'slider',
tabindex: this.disabled || this.readonly ? -1 : this.$attrs.tabindex ? this.$attrs.tabindex : 0,
'aria-label': this.label,
'aria-valuemin': this.min,
'aria-valuemax': this.max,
'aria-valuenow': this.internalValue,
'aria-readonly': String(this.readonly),
'aria-orientation': this.vertical ? 'vertical' : 'horizontal'
}, this.$attrs),
on: {
focus: onFocus,
blur: this.onBlur,
keydown: this.onKeyDown,
keyup: this.onKeyUp,
touchstart: onDrag,
mousedown: onDrag
}
}), children);
},
genThumbLabelContent: function genThumbLabelContent(value) {
return this.$scopedSlots['thumb-label'] ? this.$scopedSlots['thumb-label']({
value: value
}) : [this.$createElement('span', [String(value)])];
},
genThumbLabel: function genThumbLabel(content) {
var size = (0, _helpers.convertToUnit)(this.thumbSize);
var transform = this.vertical ? "translateY(20%) translateY(".concat(Number(this.thumbSize) / 3 - 1, "px) translateX(55%) rotate(135deg)") : "translateY(-20%) translateY(-12px) translateX(-50%) rotate(45deg)";
return this.$createElement(_transitions.VScaleTransition, {
props: {
origin: 'bottom center'
}
}, [this.$createElement('div', {
staticClass: 'v-slider__thumb-label-container',
directives: [{
name: 'show',
value: this.isFocused || this.isActive || this.thumbLabel === 'always'
}]
}, [this.$createElement('div', this.setBackgroundColor(this.computedThumbColor, {
staticClass: 'v-slider__thumb-label',
style: {
height: size,
width: size,
transform: transform
}
}), [this.$createElement('div', content)])])]);
},
genThumb: function genThumb() {
return this.$createElement('div', this.setBackgroundColor(this.computedThumbColor, {
staticClass: 'v-slider__thumb'
}));
},
getThumbContainerStyles: function getThumbContainerStyles(width) {
var direction = this.vertical ? 'top' : 'left';
var value = this.$vuetify.rtl ? 100 - width : width;
value = this.vertical ? 100 - value : value;
return _defineProperty({
transition: this.trackTransition
}, direction, "".concat(value, "%"));
},
onThumbMouseDown: function onThumbMouseDown(e) {
this.oldValue = this.internalValue;
this.keyPressed = 2;
this.isActive = true;
var mouseUpOptions = _helpers.passiveSupported ? {
passive: true,
capture: true
} : true;
var mouseMoveOptions = _helpers.passiveSupported ? {
passive: true
} : false;
if ('touches' in e) {
this.app.addEventListener('touchmove', this.onMouseMove, mouseMoveOptions);
(0, _helpers.addOnceEventListener)(this.app, 'touchend', this.onSliderMouseUp, mouseUpOptions);
} else {
this.app.addEventListener('mousemove', this.onMouseMove, mouseMoveOptions);
(0, _helpers.addOnceEventListener)(this.app, 'mouseup', this.onSliderMouseUp, mouseUpOptions);
}
this.$emit('start', this.internalValue);
},
onSliderMouseUp: function onSliderMouseUp(e) {
e.stopPropagation();
this.keyPressed = 0;
var mouseMoveOptions = _helpers.passiveSupported ? {
passive: true
} : false;
this.app.removeEventListener('touchmove', this.onMouseMove, mouseMoveOptions);
this.app.removeEventListener('mousemove', this.onMouseMove, mouseMoveOptions);
this.$emit('end', this.internalValue);
if (!(0, _helpers.deepEqual)(this.oldValue, this.internalValue)) {
this.$emit('change', this.internalValue);
}
this.isActive = false;
},
onMouseMove: function onMouseMove(e) {
var _this$parseMouseMove = this.parseMouseMove(e),
value = _this$parseMouseMove.value;
this.internalValue = value;
},
onKeyDown: function onKeyDown(e) {
if (this.disabled || this.readonly) return;
var value = this.parseKeyDown(e, this.internalValue);
if (value == null) return;
this.internalValue = value;
this.$emit('change', value);
},
onKeyUp: function onKeyUp() {
this.keyPressed = 0;
},
onSliderClick: function onSliderClick(e) {
var thumb = this.$refs.thumb;
thumb.focus();
this.onMouseMove(e);
this.$emit('change', this.internalValue);
},
onBlur: function onBlur(e) {
this.isFocused = false;
this.$emit('blur', e);
},
onFocus: function onFocus(e) {
this.isFocused = true;
this.$emit('focus', e);
},
parseMouseMove: function parseMouseMove(e) {
var start = this.vertical ? 'top' : 'left';
var length = this.vertical ? 'height' : 'width';
var click = this.vertical ? 'clientY' : 'clientX';
var _this$$refs$track$get = this.$refs.track.getBoundingClientRect(),
trackStart = _this$$refs$track$get[start],
trackLength = _this$$refs$track$get[length];
var clickOffset = 'touches' in e ? e.touches[0][click] : e[click]; // Can we get rid of any here?
// It is possible for left to be NaN, force to number
var clickPos = Math.min(Math.max((clickOffset - trackStart) / trackLength, 0), 1) || 0;
if (this.vertical) clickPos = 1 - clickPos;
if (this.$vuetify.rtl) clickPos = 1 - clickPos;
var isInsideTrack = clickOffset >= trackStart && clickOffset <= trackStart + trackLength;
var value = parseFloat(this.min) + clickPos * (this.maxValue - this.minValue);
return {
value: value,
isInsideTrack: isInsideTrack
};
},
parseKeyDown: function parseKeyDown(e, value) {
if (this.disabled) return;
var pageup = _helpers.keyCodes.pageup,
pagedown = _helpers.keyCodes.pagedown,
end = _helpers.keyCodes.end,
home = _helpers.keyCodes.home,
left = _helpers.keyCodes.left,
right = _helpers.keyCodes.right,
down = _helpers.keyCodes.down,
up = _helpers.keyCodes.up;
if (![pageup, pagedown, end, home, left, right, down, up].includes(e.keyCode)) return;
e.preventDefault();
var step = this.stepNumeric || 1;
var steps = (this.maxValue - this.minValue) / step;
if ([left, right, down, up].includes(e.keyCode)) {
this.keyPressed += 1;
var increase = this.$vuetify.rtl ? [left, up] : [right, up];
var direction = increase.includes(e.keyCode) ? 1 : -1;
var multiplier = e.shiftKey ? 3 : e.ctrlKey ? 2 : 1;
value = value + direction * step * multiplier;
} else if (e.keyCode === home) {
value = this.minValue;
} else if (e.keyCode === end) {
value = this.maxValue;
} else {
var _direction = e.keyCode === pagedown ? 1 : -1;
value = value - _direction * step * (steps > 100 ? steps / 10 : 10);
}
return value;
},
roundValue: function roundValue(value) {
if (!this.stepNumeric) return value; // Format input value using the same number
// of decimals places as in the step prop
var trimmedStep = this.step.toString().trim();
var decimals = trimmedStep.indexOf('.') > -1 ? trimmedStep.length - trimmedStep.indexOf('.') - 1 : 0;
var offset = this.minValue % this.stepNumeric;
var newValue = Math.round((value - offset) / this.stepNumeric) * this.stepNumeric + offset;
return parseFloat(Math.min(newValue, this.maxValue).toFixed(decimals));
}
}
});
exports.default = _default2;
//# sourceMappingURL=VSlider.js.map