139 lines
4 KiB
JavaScript
139 lines
4 KiB
JavaScript
|
"use strict";
|
||
|
|
|
||
|
|
Object.defineProperty(exports, "__esModule", {
|
||
|
|
value: true
|
||
|
|
});
|
||
|
|
exports.default = void 0;
|
||
|
|
|
||
|
|
var _delayable = _interopRequireDefault(require("../delayable"));
|
||
|
|
|
||
|
|
var _toggleable = _interopRequireDefault(require("../toggleable"));
|
||
|
|
|
||
|
|
var _mixins = _interopRequireDefault(require("../../util/mixins"));
|
||
|
|
|
||
|
|
var _helpers = require("../../util/helpers");
|
||
|
|
|
||
|
|
var _console = require("../../util/console");
|
||
|
|
|
||
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||
|
|
|
||
|
|
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
||
|
|
|
||
|
|
var baseMixins = (0, _mixins.default)(_delayable.default, _toggleable.default);
|
||
|
|
/* @vue/component */
|
||
|
|
|
||
|
|
var _default = baseMixins.extend({
|
||
|
|
name: 'activatable',
|
||
|
|
props: {
|
||
|
|
activator: {
|
||
|
|
default: null,
|
||
|
|
validator: function validator(val) {
|
||
|
|
return ['string', 'object'].includes(_typeof(val));
|
||
|
|
}
|
||
|
|
},
|
||
|
|
disabled: Boolean,
|
||
|
|
internalActivator: Boolean,
|
||
|
|
openOnHover: Boolean
|
||
|
|
},
|
||
|
|
data: function data() {
|
||
|
|
return {
|
||
|
|
activatorElement: null,
|
||
|
|
activatorNode: []
|
||
|
|
};
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
activator: function activator() {
|
||
|
|
this.activatorElement = null;
|
||
|
|
this.getActivator();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted: function mounted() {
|
||
|
|
var slotType = (0, _helpers.getSlotType)(this, 'activator', true);
|
||
|
|
|
||
|
|
if (slotType && ['v-slot', 'normal'].includes(slotType)) {
|
||
|
|
(0, _console.consoleError)("The activator slot must be bound, try '<template v-slot:activator=\"{ on }\"><v-btn v-on=\"on\">'", this);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
getValueProxy: function getValueProxy() {
|
||
|
|
var self = this;
|
||
|
|
return {
|
||
|
|
get value() {
|
||
|
|
return self.isActive;
|
||
|
|
},
|
||
|
|
|
||
|
|
set value(isActive) {
|
||
|
|
self.isActive = isActive;
|
||
|
|
}
|
||
|
|
|
||
|
|
};
|
||
|
|
},
|
||
|
|
genActivator: function genActivator() {
|
||
|
|
var node = (0, _helpers.getSlot)(this, 'activator', Object.assign(this.getValueProxy(), {
|
||
|
|
on: this.genActivatorListeners(),
|
||
|
|
attrs: this.genActivatorAttributes()
|
||
|
|
})) || [];
|
||
|
|
this.activatorNode = node;
|
||
|
|
return node;
|
||
|
|
},
|
||
|
|
getContentSlot: function getContentSlot() {
|
||
|
|
return (0, _helpers.getSlot)(this, 'default', this.getValueProxy(), true);
|
||
|
|
},
|
||
|
|
genActivatorAttributes: function genActivatorAttributes() {
|
||
|
|
return {
|
||
|
|
role: 'button',
|
||
|
|
'aria-haspopup': true,
|
||
|
|
'aria-expanded': String(this.isActive)
|
||
|
|
};
|
||
|
|
},
|
||
|
|
genActivatorListeners: function genActivatorListeners() {
|
||
|
|
var _this = this;
|
||
|
|
|
||
|
|
if (this.disabled) return {};
|
||
|
|
var listeners = {};
|
||
|
|
|
||
|
|
if (this.openOnHover) {
|
||
|
|
listeners.mouseenter = function (e) {
|
||
|
|
_this.getActivator(e);
|
||
|
|
|
||
|
|
_this.runDelay('open');
|
||
|
|
};
|
||
|
|
|
||
|
|
listeners.mouseleave = function (e) {
|
||
|
|
_this.getActivator(e);
|
||
|
|
|
||
|
|
_this.runDelay('close');
|
||
|
|
};
|
||
|
|
} else {
|
||
|
|
listeners.click = function (e) {
|
||
|
|
var activator = _this.getActivator(e);
|
||
|
|
|
||
|
|
if (activator) activator.focus();
|
||
|
|
_this.isActive = !_this.isActive;
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
return listeners;
|
||
|
|
},
|
||
|
|
getActivator: function getActivator(e) {
|
||
|
|
// If we've already fetched the activator, re-use
|
||
|
|
if (this.activatorElement) return this.activatorElement;
|
||
|
|
var activator = null;
|
||
|
|
|
||
|
|
if (this.activator) {
|
||
|
|
var target = this.internalActivator ? this.$el : document;
|
||
|
|
activator = typeof this.activator === 'string' ? target.querySelector(this.activator) : this.activator;
|
||
|
|
} else if (e) {
|
||
|
|
activator = e.currentTarget || e.target;
|
||
|
|
} else if (this.activatorNode.length) {
|
||
|
|
activator = this.activatorNode[0].elm;
|
||
|
|
}
|
||
|
|
|
||
|
|
this.activatorElement = activator;
|
||
|
|
return this.activatorElement;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
exports.default = _default;
|
||
|
|
//# sourceMappingURL=index.js.map
|