@meve/ui/es/menu/index.js

Argon design system components library

import _extends from "@babel/runtime/helpers/esm/extends";
import MenuItemGroup from '../menu-item-group';
import MenuItem from '../menu-item';
import { createNamespace } from '../utils/create';
import { props } from './props';
import { createParentMixin } from '../utils/mixins/relation';
import { isArray, removeItem } from '../utils/shared';
import { warn } from '../utils/logger';





var _createNamespace = createNamespace('menu'),
    createComponent = _createNamespace.createComponent,
    namespace = _createNamespace.namespace;

var MenuPlugin = createComponent({
  mixins: [createParentMixin('menu', {
    childrenKey: 'menuItemGroups'
  }), createParentMixin('menu', {
    childrenKey: 'menuItems'
  })],
  props: props,
  watch: {
    expandedNames: function expandedNames() {
      this.syncExpand();
    },
    selectedNames: function selectedNames(newValue) {
      if (!this.multiple && newValue.length > 1) {
        warn('Not in multiple mode, it is detected that multiple menu-items are selected');
      }

      this.syncSelect();
    },
    menuItemGroups: function menuItemGroups() {
      this.syncExpand();
      this.syncSelect();
    },
    menuItems: function menuItems() {
      this.syncExpand();
      this.syncSelect();
    }
  },
  mounted: function mounted() {
    window.menu = this;
  },
  methods: {
    onGroupChange: function onGroupChange(group) {
      var shouldExpand = !this.expandedNames.includes(group.name);
      var shouldReduce = !shouldExpand;
      var expandedNames = [].concat(this.expandedNames);

      if (this.accordion && shouldExpand) {
        var expandedSiblingGroups = this.getExpandedSiblingGroups(group);
        expandedNames = this.removeGroupsNames(expandedSiblingGroups, expandedNames);
        expandedNames.push(group.name);
      } else if (shouldExpand) {
        expandedNames.push(group.name);
      } else if (shouldReduce) {
        expandedNames = this.removeGroupNames(group, expandedNames);
      }

      this.$emit('update:expanded-names', expandedNames);
    },
    onItemChange: function onItemChange(item) {
      var selectedNames = [].concat(this.selectedNames);

      if (this.multiple) {
        var shouldSelect = !selectedNames.includes(item.name);

        if (shouldSelect) {
          selectedNames.push(item.name);
          this.$emit('update:selected-names', selectedNames);
        } else {
          removeItem(selectedNames, item.name);
          this.$emit('update:selected-names', selectedNames);
        }
      } else {
        this.$emit('update:selected-names', [item.name]);
      }
    },
    syncExpand: function syncExpand() {
      var _this = this;

      this.menuItemGroups.forEach(function (child) {
        _this.expandedNames.includes(child.name) ? child.expand() : child.reduce();
      });
    },
    syncSelect: function syncSelect() {
      var _this2 = this;

      this.menuItems.forEach(function (child) {
        child.selected = _this2.selectedNames.includes(child.name);
      });
    },
    getExpandedSiblingGroups: function getExpandedSiblingGroups(group) {
      return this.menuItemGroups.filter(function (child) {
        return group !== child && child.expanded && child.level === group.level;
      });
    },
    collectChildrenNames: function collectChildrenNames(group, names) {
      var _this3 = this;

      group.menuItemGroups.forEach(function (child) {
        names.push(child.name);

        if (child.menuItemGroups.length) {
          _this3.collectChildrenNames(child, names);
        }
      });
    },
    findGroupChildrenNames: function findGroupChildrenNames(group) {
      var names = [];
      this.collectChildrenNames(group, names);
      return names;
    },
    removeGroupNames: function removeGroupNames(group, rawNames) {
      var shouldRemovedNames = [group.name].concat(this.findGroupChildrenNames(group));
      return rawNames.filter(function (name) {
        return !shouldRemovedNames.includes(name);
      });
    },
    removeGroupsNames: function removeGroupsNames(groups, rawNames) {
      var _this4 = this;

      return groups.reduce(function (names, group) {
        return _this4.removeGroupNames(group, names);
      }, rawNames);
    },
    normalizeOption: function normalizeOption(option) {
      return _extends({}, option, {
        name: option[this.nameField],
        label: option[this.labelField]
      });
    },
    renderOptions: function renderOptions(options) {
      var _this5 = this;

      var h = this.$createElement;

      var isGroup = function isGroup(children) {
        return isArray(children) && children.length;
      };

      return options.map(function (option) {
        var _this5$normalizeOptio = _this5.normalizeOption(option),
            children = _this5$normalizeOptio.children,
            icon = _this5$normalizeOptio.icon,
            disabled = _this5$normalizeOptio.disabled,
            name = _this5$normalizeOptio.name,
            label = _this5$normalizeOptio.label;

        if (isGroup(children)) {
          return h(MenuItemGroup, {
            "attrs": {
              "name": name,
              "icon": icon,
              "label": label,
              "disabled": disabled
            }
          }, [_this5.renderOptions(children)]);
        }

        return h(MenuItem, {
          "attrs": {
            "name": name,
            "icon": icon,
            "label": label,
            "disabled": disabled
          }
        });
      });
    }
  },
  render: function render() {
    var h = arguments[0];
    return h("div", {
      "class": [namespace(), 'm--box']
    }, [this.hasSlots() ? this.slots() : this.renderOptions(this.options)]);
  }
});
export var _MenuComponent = MenuPlugin;
export default MenuPlugin;