vue-ant-patterns/lib/d-header-tools/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 _vueTypes = require('ant-design-vue/lib/_util/vue-types');

var _vueTypes2 = _interopRequireDefault(_vueTypes);

var _LocaleReceiver = require('ant-design-vue/lib/locale-provider/LocaleReceiver');

var _LocaleReceiver2 = _interopRequireDefault(_LocaleReceiver);

var _dContainer = require('../d-container');

var _dContainer2 = _interopRequireDefault(_dContainer);

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

var _dIconButton2 = _interopRequireDefault(_dIconButton);

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

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

var _dIcon2 = _interopRequireDefault(_dIcon);

var _dAutoComplete = require('../d-auto-complete');

var _dAutoComplete2 = _interopRequireDefault(_dAutoComplete);

var _zh_CN = require('../d-language/global/zh_CN');

var _zh_CN2 = _interopRequireDefault(_zh_CN);

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

/* babel-plugin-inline-import '../style/image/avatar.svg' */var avatarSvg = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTY4NjI3MTAwNjUxIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjY2MzIiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PC9zdHlsZT48L2RlZnM+PHBhdGggZD0iTTUxMiAyMjcuNDg4Yy03NC4xMTIgMC0xMzQuMzA0IDYwLjI4OC0xMzQuMzA0IDEzNC4zMDRzNjAuMTkyIDEzNC40IDEzNC4zMDQgMTM0LjQgMTM0LjMwNC02MC4yODggMTM0LjMwNC0xMzQuMzA0LTYwLjE5Mi0xMzQuNC0xMzQuMzA0LTEzNC40ek01MTIgMEMyMjkuMTg0IDAgMCAyMjkuMTg0IDAgNTEyczIyOS4xODQgNTEyIDUxMiA1MTJjMjgyLjc4NCAwIDUxMi0yMjkuMjE2IDUxMi01MTJTNzk0Ljc4NCAwIDUxMiAweiBtMjM3Ljg4OCA3ODAuMDk2YTI1LjI4IDI1LjI4IDAgMCAxLTI1LjMxMi0yNS4zMTJjMC0xMTYtOTMuNDA4LTIwNi44MTYtMjEyLjYwOC0yMDYuODE2cy0yMTIuNjA4IDkwLjc4NC0yMTIuNjA4IDIwNi43ODRjMCAxNC4wMTYtMTEuMjk2IDI1LjMxMi0yNS4zMTIgMjUuMzEycy0yNS4zMTItMTEuMjk2LTI1LjMxMi0yNS4zMTJjMC03MC4xMTIgMjcuNDg4LTEzNS4yOTYgNzcuNDA4LTE4My42MTZhMjU5LjM5MiAyNTkuMzkyIDAgMCAxIDg0LjUxMi01NC41OTIgMTg4LjM4NCAxODguMzg0IDAgMCAxLTI5LjQwOC0yNGMtMzQuOTEyLTM0LjkxMi01NC4yMDgtODEuNDA4LTU0LjIwOC0xMzAuODE2czE5LjItOTUuOTA0IDU0LjIwOC0xMzAuODE2YzM0LjkxMi0zNC45MTIgODEuNDA4LTU0LjIwOCAxMzAuNzg0LTU0LjIwOHM5NS45MDQgMTkuMiAxMzAuNzg0IDU0LjIwOGMzNC43ODQgMzUuMDA4IDU0LjExMiA4MS41MDQgNTQuMTEyIDEzMC45MTJzLTE5LjIgOTUuOTA0LTU0LjIwOCAxMzAuODE2YTE4Ni45MTIgMTg2LjkxMiAwIDAgMS0yOS40MDggMjQgMjYxLjc5MiAyNjEuNzkyIDAgMCAxIDg0LjUxMiA1NC41OTJjNDkuODg4IDQ4LjE5MiA3Ny40MDggMTEzLjQwOCA3Ny40MDggMTgzLjYxNmEyNS40MDggMjUuNDA4IDAgMCAxLTI1LjQwOCAyNS4yMTZ6IiBwLWlkPSI2NjMzIiBmaWxsPSIjY2NjIj48L3BhdGg+PC9zdmc+';
var Horizontal = _dContainer2['default'].Horizontal;
var renderOptions = _dAutoComplete2['default'].renderOptions;


var HeaderTools = {
  name: 'DHeaderTools',
  props: {
    prefixCls: _vueTypes2['default'].string.def('depot-header-tools'),
    avatar: _vueTypes2['default'].string,
    userName: _vueTypes2['default'].string,
    locale: _vueTypes2['default'].object,
    search: _vueTypes2['default'].bool.def(true),
    searchDataSource: _vueTypes2['default'].array,
    userDropmenuItems: _vueTypes2['default'].array.def([{
      title: '设置',
      icon: 'setting',
      key: 'setting'
    }, {
      title: '切换自助',
      icon: 'swap',
      key: 'swap'
    }, {
      title: '退出',
      icon: 'logout',
      key: 'logout'
    }]),
    theme: _vueTypes2['default'].string.def('dark'),
    funcs: _vueTypes2['default'].array.def([{
      type: 'task',
      count: 0,
      title: '任务',
      icon: 'alert'
    }, {
      type: 'notifications',
      title: '通知',
      icon: 'notification'
    }, {
      type: 'star',
      title: '收藏',
      icon: 'star'
    }, {
      type: 'help',
      title: '帮助',
      icon: 'question-circle'
    }])
  },
  methods: {
    getDefaultLocale: function getDefaultLocale() {
      var result = (0, _extends3['default'])({}, _zh_CN2['default'], this.locale);
      result.lang = (0, _extends3['default'])({}, result.lang, (this.locale || {}).lang);
      return result;
    },
    getFuncs: function getFuncs(locale) {
      var h = this.$createElement;
      var funcs = this.funcs,
          $slots = this.$slots;

      var _ = this;
      if ($slots.funcs) {
        return $slots.funcs;
      }
      if (!funcs || !funcs.length) return null;
      return funcs.map(function (it) {
        var type = it.type,
            count = it.count,
            title = it.title,
            icon = it.icon;


        var props = {
          key: type,
          attrs: { title: locale[type] || title },
          on: {
            click: function click(e) {
              _.$emit('fnClick', e, it);
            }
          }
        };
        var isCount = !it.hasOwnProperty('count');
        return h(
          _dIconButton2['default'],
          props,
          [isCount ? h(_dIcon2['default'], {
            attrs: { type: icon }
          }) : h(
            _antDesignVue.Badge,
            {
              attrs: { count: count }
            },
            [h(_dIcon2['default'], {
              attrs: { type: icon }
            })]
          )]
        );
      });
    },
    renderSearch: function renderSearch() {
      var _this = this;

      var h = this.$createElement;
      var searchDataSource = this.$props.searchDataSource;
      var $slots = this.$slots;
      /* serch event
      searchSelect,
      searchChange,
      searchSearch, 
      */

      var props = {
        on: {
          change: function change(value) {
            _this.$emit('searchChange', value);
          },
          blur: function blur() {
            _this.$emit('blur');
          },
          search: function search(value) {
            _this.$emit('search', value);
          },
          select: function select(value, option) {
            _this.$emit('searchSelect', value, option);
          }
        },
        props: {
          dataSource: searchDataSource
        }
      };
      if ($slots.search) {
        return $slots.search;
      }
      return h(
        _dAutoComplete2['default'],
        props,
        [$slots.searchOptions]
      );
    },
    renderComponent: function renderComponent(contextLocale, locale) {
      var _this2 = this;

      var h = this.$createElement;
      var prefixCls = this.prefixCls,
          userDropmenuItems = this.userDropmenuItems,
          search = this.search,
          theme = this.theme,
          avatar = this.avatar,
          userName = this.userName;

      var containerProps = {
        props: {
          align: 'center',
          justify: 'end'
        },
        'class': prefixCls
      };

      var menuProps = {
        props: {
          theme: theme
          // selectable: true,
        },
        on: {
          click: function click(_ref) {
            var item = _ref.item,
                key = _ref.key,
                selectedKeys = _ref.selectedKeys;

            /* avatar menu select */
            _this2.$emit('userDropMenuSelect', { item: item, key: key, selectedKeys: selectedKeys });
          }
        }
      };

      return h(
        Horizontal,
        containerProps,
        [search ? this.renderSearch() : null, this.getFuncs(contextLocale), h(
          'span',
          { 'class': 'avatar-button' },
          [h(
            _antDesignVue.Dropdown,
            { 'class': 'icon-button icon-button-avatar', attrs: { overlayClassName: 'depot-header-dropdown avatar-dropdown' }
            },
            [h('span', [h('img', { 'class': 'avatar', attrs: { src: avatar || avatarSvg, alt: userName }
            })]), h(
              _antDesignVue.Menu,
              (0, _babelHelperVueJsxMergeProps2['default'])([menuProps, { slot: 'overlay' }]),
              [userDropmenuItems.map(function (it) {
                if (it === null) {
                  return h(_antDesignVue.Menu.Divider, { key: 'null' });
                }
                return h(
                  _antDesignVue.Menu.Item,
                  { key: it.key },
                  [it.icon ? h(_dIcon2['default'], {
                    attrs: { type: it.icon }
                  }) : null, contextLocale[it.key] || it.title]
                );
              })]
            )]
          )]
        )]
      );
    }
  },
  render: function render() {
    var h = arguments[0];

    return h(_LocaleReceiver2['default'], {
      attrs: {
        componentName: 'Global',
        defaultLocale: this.getDefaultLocale
      },
      scopedSlots: { 'default': this.renderComponent }
    });
  }
};

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

exports['default'] = HeaderTools;