vue-ant-patterns/lib/d-header-menu/index.js

vue-ant-patterns

'use strict';

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

var _babelHelperVueJsxMergeProps = require('babel-helper-vue-jsx-merge-props');

var _babelHelperVueJsxMergeProps2 = _interopRequireDefault(_babelHelperVueJsxMergeProps);

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');

var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);

var _antDesignVue = require('ant-design-vue');

var _dIconButton = require('../d-icon-button');

var _dIconButton2 = _interopRequireDefault(_dIconButton);

var _dIcon = require('../d-icon');

var _dIcon2 = _interopRequireDefault(_dIcon);

var _vueTypes = require('ant-design-vue/lib/_util/vue-types');

var _vueTypes2 = _interopRequireDefault(_vueTypes);

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

var SubMenu = _antDesignVue.Menu.SubMenu;


function noop() {}
var LogoBox = {
  name: 'DHeaderMenu',
  props: {
    prefixCls: _vueTypes2['default'].string.def('depot-header-menu'),
    menuList: _vueTypes2['default'].array.def([]),
    defaultOpenKeys: _vueTypes2['default'].array.def([]),
    defaultSelectedKeys: _vueTypes2['default'].array.def([]),
    selectedKeys: _vueTypes2['default'].array.def([]),
    overlayClassName: _vueTypes2['default'].string.def(''),
    theme: _vueTypes2['default'].string.def('dark'),
    renderKeys: _vueTypes2['default'].object.def({})
    // isRoot: PropTypes.func,
  },
  model: {
    prop: 'selectedKeys',
    event: 'select'
  },
  data: function data() {
    var _$props = this.$props,
        selectedKeys = _$props.selectedKeys,
        defaultSelectedKeys = _$props.defaultSelectedKeys;

    return {
      vSelectedKeys: [].concat((0, _toConsumableArray3['default'])(defaultSelectedKeys), (0, _toConsumableArray3['default'])(selectedKeys))
    };
  },

  watch: {
    selectedKeys: function selectedKeys(v) {
      this.vSelectedKeys = [].concat((0, _toConsumableArray3['default'])(v || []));
    }
  },
  methods: {
    getMenuItem: function getMenuItem(menuList) {
      var h = this.$createElement;

      var _ = this;
      var prefixCls = this.prefixCls,
          renderKeys = this.renderKeys;

      var subMenuTitleClass = prefixCls + '-submenu-title';

      var title = renderKeys.title || 'name';
      var key = renderKeys.key || 'id';
      var url = renderKeys.url || 'url';
      var id = renderKeys.id || 'id';
      var parentId = renderKeys.parentId || 'parentId';
      var funcId = renderKeys.funcId || 'funcId';
      var icon = renderKeys.icon || 'icon';

      return menuList.map(function (it) {
        if (it.children && it.children.length) {
          return h(
            SubMenu,
            {
              key: it[key],
              attrs: { 'data-key': it[key],
                url: it[url],
                'func-id': it[funcId],
                'parent-id': it[parentId],
                disabled: !!it.disabled,
                title: it[title]
              }
            },
            [h(
              'span',
              { slot: 'title', 'class': subMenuTitleClass, attrs: { title: it[title] }
              },
              [it.icon ? h(_dIcon2['default'], {
                attrs: { type: it[icon] }
              }) : null, h(
                'span',
                { 'class': 'title-box' },
                [it[title]]
              )]
            ), _.getMenuItem(it.children)]
          );
        }
        return h(
          _antDesignVue.Menu.Item,
          {
            key: it[key],
            attrs: { 'data-key': it[key],
              title: it[title],
              url: it[url],
              'parent-id': it[parentId],
              'func-id': it[funcId],
              disabled: !!it.disabled
            }
          },
          [it[icon] ? h(_dIcon2['default'], {
            attrs: { type: it[icon] }
          }) : null, h(
            'span',
            { 'class': 'title-box' },
            [it[title]]
          )]
        );
      });
    },
    select: function select(_ref) {
      var item = _ref.item,
          key = _ref.key,
          selectedKeys = _ref.selectedKeys;

      this.vSelectedKeys = [].concat((0, _toConsumableArray3['default'])(selectedKeys));
      this.$emit('select', { item: item, key: key, selectedKeys: selectedKeys });
    }
  },
  render: function render() {
    var _this = this;

    var h = arguments[0];
    var prefixCls = this.prefixCls,
        $listeners = this.$listeners,
        overlayClassName = this.overlayClassName,
        defaultOpenKeys = this.defaultOpenKeys,
        defaultSelectedKeys = this.defaultSelectedKeys,
        vSelectedKeys = this.vSelectedKeys,
        theme = this.theme;


    var overlayCls = ['logo-box-overlay', 'depot-header-dropdown', overlayClassName];
    var divProps = {
      'class': prefixCls
    };

    var menuProps = {
      props: {
        theme: theme,
        defaultOpenKeys: defaultOpenKeys,
        defaultSelectedKeys: defaultSelectedKeys,
        selectedKeys: vSelectedKeys,
        selectable: true
      },
      on: (0, _extends3['default'])({}, $listeners, {
        select: function select(arg) {
          _this.select(arg);
        },
        visibleChange: function visibleChange(visible) {
          _this.$emit('visibleChange', visible);
        }
      })
    };

    var dropDownProps = {
      'class': prefixCls,
      props: {
        // trigger: ['click'],
        overlayClassName: overlayCls.join(' ')
      },
      on: (0, _extends3['default'])({}, $listeners)
    };
    return h(
      'div',
      divProps,
      [h(
        _antDesignVue.Dropdown,
        dropDownProps,
        [h(_dIconButton2['default'], [h(_dIcon2['default'], {
          attrs: { type: 'menu' }
        })]), h(
          _antDesignVue.Menu,
          (0, _babelHelperVueJsxMergeProps2['default'])([{ slot: 'overlay' }, menuProps]),
          [this.getMenuItem(this.menuList)]
        )]
      )]
    );
  }
};

LogoBox.install = function (Vue) {
  Vue.component(LogoBox.name, LogoBox);
};

exports['default'] = LogoBox;