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

Argon design system components library

import _extends from "@babel/runtime/helpers/esm/extends";
import Icon from '../icon';
import Ripple from '../ripple';
import { isFunction, isPlainObject, isString } from '../utils/shared';
import { createNamespace } from '../utils/create';
import { createChildrenMixin } from '../utils/mixins/relation';
import { toPxNum } from '../utils/elements';
import { props } from './props';





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

var MenuItemPlugin = createComponent({
  mixins: [createChildrenMixin('menu', {
    parentKey: 'menuParent',
    childrenKey: 'menuItems'
  }), createChildrenMixin('menuItemGroup', {
    parentKey: 'menuItemGroupParent',
    childrenKey: 'menuItems'
  })],
  directives: {
    Ripple: Ripple
  },
  props: props,
  data: function data() {
    return {
      selected: false
    };
  },
  methods: {
    renderIcon: function renderIcon() {
      var h = this.$createElement;

      if (this.hasSlots('icon')) {
        return this.slots('icon');
      }

      var icon = this.icon;

      if (isFunction(icon)) {
        return icon(this.$createElement);
      }

      if (isPlainObject(icon)) {
        return h(Icon, {
          "class": namespace('__icon'),
          "attrs": {
            "menu-item-cover": true
          },
          "props": _extends({}, icon)
        });
      }

      if (isString(icon)) {
        return h(Icon, {
          "class": namespace('__icon'),
          "attrs": {
            "menu-item-cover": true,
            "name": icon
          }
        });
      }
    },
    renderLabel: function renderLabel() {
      var h = this.$createElement;

      if (this.hasSlots('label')) {
        return this.slots('label');
      }

      var label = this.label;

      if (isFunction(label)) {
        return label(this.$createElement);
      }

      return h("div", {
        "class": namespace('__label')
      }, [label]);
    },
    handleClick: function handleClick() {
      if (this.disabled) {
        return;
      }

      this.menuParent.onItemChange(this);
    }
  },
  render: function render() {
    var _this = this;

    var h = arguments[0];
    var disabled = this.disabled,
        selected = this.selected,
        menuParent = this.menuParent,
        menuItemGroupParent = this.menuItemGroupParent;
    return h("div", {
      "class": [namespace(), 'm--box', selected ? namespace('--selected') : null, disabled ? namespace('--disabled') : null],
      "directives": [{
        name: "ripple",
        value: {
          disabled: disabled
        }
      }],
      "on": _extends({}, {
        "click": function click($event) {
          for (var _len = arguments.length, attrs = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
            attrs[_key - 1] = arguments[_key];
          }

          _this.handleClick.apply(_this, [$event].concat(attrs));
        }
      })
    }, [h("div", {
      "class": namespace('__indent'),
      "style": {
        paddingLeft: menuItemGroupParent ? menuItemGroupParent.level * toPxNum(menuParent.indent) + "px" : undefined
      }
    }), this.renderIcon(), this.renderLabel()]);
  }
});
export var _MenuItemComponent = MenuItemPlugin;
export default MenuItemPlugin;