om/node_modules/vuetify/es5/components/VTreeview/VTreeviewNode.js

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.VTreeviewNodeProps = undefined;

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; }; // Components

// Mixins

// Utils


var _transitions = require('../transitions');

var _VIcon = require('../VIcon');

var _VTreeviewNode = require('./VTreeviewNode');

var _VTreeviewNode2 = _interopRequireDefault(_VTreeviewNode);

var _registrable = require('../../mixins/registrable');

var _mixins = require('../../util/mixins');

var _mixins2 = _interopRequireDefault(_mixins);

var _helpers = require('../../util/helpers');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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 VTreeviewNodeProps = exports.VTreeviewNodeProps = {
    activatable: Boolean,
    activeClass: {
        type: String,
        default: 'v-treeview-node--active'
    },
    selectable: Boolean,
    selectedColor: {
        type: String,
        default: 'accent'
    },
    indeterminateIcon: {
        type: String,
        default: '$vuetify.icons.checkboxIndeterminate'
    },
    onIcon: {
        type: String,
        default: '$vuetify.icons.checkboxOn'
    },
    offIcon: {
        type: String,
        default: '$vuetify.icons.checkboxOff'
    },
    expandIcon: {
        type: String,
        default: '$vuetify.icons.subgroup'
    },
    loadingIcon: {
        type: String,
        default: '$vuetify.icons.loading'
    },
    itemKey: {
        type: String,
        default: 'id'
    },
    itemText: {
        type: String,
        default: 'name'
    },
    itemChildren: {
        type: String,
        default: 'children'
    },
    loadChildren: Function,
    openOnClick: Boolean,
    transition: Boolean
};
exports.default = (0, _mixins2.default)((0, _registrable.inject)('treeview')
/* @vue/component */
).extend({
    name: 'v-treeview-node',
    inject: {
        treeview: {
            default: null
        }
    },
    props: _extends({
        item: {
            type: Object,
            default: function _default() {
                return null;
            }
        }
    }, VTreeviewNodeProps),
    data: function data() {
        return {
            isOpen: false,
            isSelected: false,
            isIndeterminate: false,
            isActive: false,
            isLoading: false,
            hasLoaded: false
        };
    },
    computed: {
        key: function key() {
            return (0, _helpers.getObjectValueByPath)(this.item, this.itemKey);
        },
        children: function children() {
            return (0, _helpers.getObjectValueByPath)(this.item, this.itemChildren);
        },
        text: function text() {
            return (0, _helpers.getObjectValueByPath)(this.item, this.itemText);
        },
        scopedProps: function scopedProps() {
            return {
                item: this.item,
                leaf: !this.children,
                selected: this.isSelected,
                indeterminate: this.isIndeterminate,
                active: this.isActive,
                open: this.isOpen
            };
        },
        computedIcon: function computedIcon() {
            if (this.isIndeterminate) return this.indeterminateIcon;else if (this.isSelected) return this.onIcon;else return this.offIcon;
        },
        hasChildren: function hasChildren() {
            return !!this.children && (!!this.children.length || !!this.loadChildren);
        }
    },
    created: function created() {
        this.treeview.register(this);
    },
    beforeDestroy: function beforeDestroy() {
        this.treeview.unregister(this);
    },

    methods: {
        checkChildren: function checkChildren() {
            var _this = this;

            return new Promise(function (resolve) {
                // TODO: Potential issue with always trying
                // to load children if response is empty?
                if (!_this.children || _this.children.length || !_this.loadChildren || _this.hasLoaded) return resolve();
                _this.isLoading = true;
                resolve(_this.loadChildren(_this.item));
            }).then(function () {
                _this.isLoading = false;
                _this.hasLoaded = true;
            });
        },
        open: function open() {
            this.isOpen = !this.isOpen;
            this.treeview.updateOpen(this.key, this.isOpen);
            this.treeview.emitOpen();
        },
        genLabel: function genLabel() {
            var children = [];
            if (this.$scopedSlots.label) children.push(this.$scopedSlots.label(this.scopedProps));else children.push(this.text);
            return this.$createElement('div', {
                slot: 'label',
                staticClass: 'v-treeview-node__label'
            }, children);
        },
        genContent: function genContent() {
            var children = [this.$scopedSlots.prepend && this.$scopedSlots.prepend(this.scopedProps), this.genLabel(), this.$scopedSlots.append && this.$scopedSlots.append(this.scopedProps)];
            return this.$createElement('div', {
                staticClass: 'v-treeview-node__content'
            }, children);
        },
        genToggle: function genToggle() {
            var _this2 = this;

            return this.$createElement(_VIcon.VIcon, {
                staticClass: 'v-treeview-node__toggle',
                class: {
                    'v-treeview-node__toggle--open': this.isOpen,
                    'v-treeview-node__toggle--loading': this.isLoading
                },
                slot: 'prepend',
                on: {
                    click: function click(e) {
                        e.stopPropagation();
                        if (_this2.isLoading) return;
                        _this2.checkChildren().then(function () {
                            return _this2.open();
                        });
                    }
                }
            }, [this.isLoading ? this.loadingIcon : this.expandIcon]);
        },
        genCheckbox: function genCheckbox() {
            var _this3 = this;

            return this.$createElement(_VIcon.VIcon, {
                staticClass: 'v-treeview-node__checkbox',
                props: {
                    color: this.isSelected ? this.selectedColor : undefined
                },
                on: {
                    click: function click(e) {
                        e.stopPropagation();
                        if (_this3.isLoading) return;
                        _this3.checkChildren().then(function () {
                            // We nextTick here so that items watch in VTreeview has a chance to run first
                            _this3.$nextTick(function () {
                                _this3.isSelected = !_this3.isSelected;
                                _this3.isIndeterminate = false;
                                _this3.treeview.updateSelected(_this3.key, _this3.isSelected);
                                _this3.treeview.emitSelected();
                            });
                        });
                    }
                }
            }, [this.computedIcon]);
        },
        genNode: function genNode() {
            var _this4 = this;

            var children = [this.genContent()];
            if (this.selectable) children.unshift(this.genCheckbox());
            if (this.hasChildren) children.unshift(this.genToggle());
            return this.$createElement('div', {
                staticClass: 'v-treeview-node__root',
                class: _defineProperty({}, this.activeClass, this.isActive),
                on: {
                    click: function click() {
                        if (_this4.openOnClick && _this4.children) {
                            _this4.open();
                        } else if (_this4.activatable) {
                            _this4.isActive = !_this4.isActive;
                            _this4.treeview.updateActive(_this4.key, _this4.isActive);
                            _this4.treeview.emitActive();
                        }
                    }
                }
            }, children);
        },
        genChild: function genChild(item) {
            return this.$createElement(_VTreeviewNode2.default, {
                key: (0, _helpers.getObjectValueByPath)(item, this.itemKey),
                props: {
                    activatable: this.activatable,
                    activeClass: this.activeClass,
                    item: item,
                    selectable: this.selectable,
                    selectedColor: this.selectedColor,
                    expandIcon: this.expandIcon,
                    indeterminateIcon: this.indeterminateIcon,
                    offIcon: this.offIcon,
                    onIcon: this.onIcon,
                    loadingIcon: this.loadingIcon,
                    itemKey: this.itemKey,
                    itemText: this.itemText,
                    itemChildren: this.itemChildren,
                    loadChildren: this.loadChildren,
                    transition: this.transition,
                    openOnClick: this.openOnClick
                },
                scopedSlots: this.$scopedSlots
            });
        },
        genChildrenWrapper: function genChildrenWrapper() {
            if (!this.isOpen || !this.children) return null;
            var children = [this.children.map(this.genChild)];
            return this.$createElement('div', {
                staticClass: 'v-treeview-node__children'
            }, children);
        },
        genTransition: function genTransition() {
            return this.$createElement(_transitions.VExpandTransition, [this.genChildrenWrapper()]);
        }
    },
    render: function render(h) {
        var children = [this.genNode()];
        if (this.transition) children.push(this.genTransition());else children.push(this.genChildrenWrapper());
        return h('div', {
            staticClass: 'v-treeview-node',
            class: {
                'v-treeview-node--leaf': !this.hasChildren,
                'v-treeview-node--click': this.openOnClick,
                'v-treeview-node--selected': this.isSelected,
                'v-treeview-node--excluded': this.treeview.isExcluded(this.key)
            }
        }, children);
    }
});
//# sourceMappingURL=VTreeviewNode.js.map