136 lines
4.4 KiB
JavaScript
136 lines
4.4 KiB
JavaScript
'use strict';
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
|
|
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
|
|
|
require('../../../src/stylus/components/_expansion-panel.styl');
|
|
|
|
var _themeable = require('../../mixins/themeable');
|
|
|
|
var _themeable2 = _interopRequireDefault(_themeable);
|
|
|
|
var _registrable = require('../../mixins/registrable');
|
|
|
|
var _mixins = require('../../util/mixins');
|
|
|
|
var _mixins2 = _interopRequireDefault(_mixins);
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
|
|
/* @vue/component */
|
|
exports.default = (0, _mixins2.default)(_themeable2.default, (0, _registrable.provide)('expansionPanel')).extend({
|
|
name: 'v-expansion-panel',
|
|
provide: function provide() {
|
|
return {
|
|
expansionPanel: this
|
|
};
|
|
},
|
|
|
|
props: {
|
|
disabled: Boolean,
|
|
readonly: Boolean,
|
|
expand: Boolean,
|
|
focusable: Boolean,
|
|
inset: Boolean,
|
|
popout: Boolean,
|
|
value: {
|
|
type: [Number, Array],
|
|
default: function _default() {
|
|
return null;
|
|
}
|
|
}
|
|
},
|
|
data: function data() {
|
|
return {
|
|
items: [],
|
|
open: []
|
|
};
|
|
},
|
|
computed: {
|
|
classes: function classes() {
|
|
return _extends({
|
|
'v-expansion-panel--focusable': this.focusable,
|
|
'v-expansion-panel--popout': this.popout,
|
|
'v-expansion-panel--inset': this.inset
|
|
}, this.themeClasses);
|
|
}
|
|
},
|
|
watch: {
|
|
expand: function expand(v) {
|
|
var openIndex = -1;
|
|
if (!v) {
|
|
// Close all panels unless only one is open
|
|
var openCount = this.open.reduce(function (acc, val) {
|
|
return val ? acc + 1 : acc;
|
|
}, 0);
|
|
var open = Array(this.items.length).fill(false);
|
|
if (openCount === 1) {
|
|
openIndex = this.open.indexOf(true);
|
|
}
|
|
if (openIndex > -1) {
|
|
open[openIndex] = true;
|
|
}
|
|
this.open = open;
|
|
}
|
|
this.$emit('input', v ? this.open : openIndex > -1 ? openIndex : null);
|
|
},
|
|
value: function value(v) {
|
|
this.updateFromValue(v);
|
|
}
|
|
},
|
|
mounted: function mounted() {
|
|
this.value !== null && this.updateFromValue(this.value);
|
|
},
|
|
|
|
methods: {
|
|
updateFromValue: function updateFromValue(v) {
|
|
if (Array.isArray(v) && !this.expand) return;
|
|
var open = Array(this.items.length).fill(false);
|
|
if (typeof v === 'number') {
|
|
open[v] = true;
|
|
} else if (v !== null) {
|
|
open = v;
|
|
}
|
|
this.updatePanels(open);
|
|
},
|
|
updatePanels: function updatePanels(open) {
|
|
this.open = open;
|
|
for (var i = 0; i < this.items.length; i++) {
|
|
this.items[i].toggle(open && open[i]);
|
|
}
|
|
},
|
|
panelClick: function panelClick(uid) {
|
|
var open = this.expand ? this.open.slice() : Array(this.items.length).fill(false);
|
|
for (var i = 0; i < this.items.length; i++) {
|
|
if (this.items[i]._uid === uid) {
|
|
open[i] = !this.open[i];
|
|
!this.expand && this.$emit('input', open[i] ? i : null);
|
|
}
|
|
}
|
|
this.updatePanels(open);
|
|
if (this.expand) this.$emit('input', open);
|
|
},
|
|
register: function register(content) {
|
|
var i = this.items.push(content) - 1;
|
|
this.value !== null && this.updateFromValue(this.value);
|
|
content.toggle(!!this.open[i]);
|
|
},
|
|
unregister: function unregister(content) {
|
|
var index = this.items.findIndex(function (i) {
|
|
return i._uid === content._uid;
|
|
});
|
|
this.items.splice(index, 1);
|
|
this.open.splice(index, 1);
|
|
}
|
|
},
|
|
render: function render(h) {
|
|
return h('ul', {
|
|
staticClass: 'v-expansion-panel',
|
|
class: this.classes
|
|
}, this.$slots.default);
|
|
}
|
|
});
|
|
//# sourceMappingURL=VExpansionPanel.js.map
|