vue-ant-patterns/es/d-header-tools/index.js

vue-ant-patterns

import _mergeJSXProps from 'babel-helper-vue-jsx-merge-props';
import _extends from 'babel-runtime/helpers/extends';
import PropTypes from 'ant-design-vue/es/_util/vue-types';
import LocaleReceiver from 'ant-design-vue/es/locale-provider/LocaleReceiver';

import DContainer from '../d-container';
import IconButton from '../d-icon-button';
import { Dropdown, Menu, Badge } from 'ant-design-vue';
import Icon from '../d-icon';
import AutoComplete from '../d-auto-complete';
/* babel-plugin-inline-import '../style/image/avatar.svg' */var avatarSvg = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTY4NjI3MTAwNjUxIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjY2MzIiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PC9zdHlsZT48L2RlZnM+PHBhdGggZD0iTTUxMiAyMjcuNDg4Yy03NC4xMTIgMC0xMzQuMzA0IDYwLjI4OC0xMzQuMzA0IDEzNC4zMDRzNjAuMTkyIDEzNC40IDEzNC4zMDQgMTM0LjQgMTM0LjMwNC02MC4yODggMTM0LjMwNC0xMzQuMzA0LTYwLjE5Mi0xMzQuNC0xMzQuMzA0LTEzNC40ek01MTIgMEMyMjkuMTg0IDAgMCAyMjkuMTg0IDAgNTEyczIyOS4xODQgNTEyIDUxMiA1MTJjMjgyLjc4NCAwIDUxMi0yMjkuMjE2IDUxMi01MTJTNzk0Ljc4NCAwIDUxMiAweiBtMjM3Ljg4OCA3ODAuMDk2YTI1LjI4IDI1LjI4IDAgMCAxLTI1LjMxMi0yNS4zMTJjMC0xMTYtOTMuNDA4LTIwNi44MTYtMjEyLjYwOC0yMDYuODE2cy0yMTIuNjA4IDkwLjc4NC0yMTIuNjA4IDIwNi43ODRjMCAxNC4wMTYtMTEuMjk2IDI1LjMxMi0yNS4zMTIgMjUuMzEycy0yNS4zMTItMTEuMjk2LTI1LjMxMi0yNS4zMTJjMC03MC4xMTIgMjcuNDg4LTEzNS4yOTYgNzcuNDA4LTE4My42MTZhMjU5LjM5MiAyNTkuMzkyIDAgMCAxIDg0LjUxMi01NC41OTIgMTg4LjM4NCAxODguMzg0IDAgMCAxLTI5LjQwOC0yNGMtMzQuOTEyLTM0LjkxMi01NC4yMDgtODEuNDA4LTU0LjIwOC0xMzAuODE2czE5LjItOTUuOTA0IDU0LjIwOC0xMzAuODE2YzM0LjkxMi0zNC45MTIgODEuNDA4LTU0LjIwOCAxMzAuNzg0LTU0LjIwOHM5NS45MDQgMTkuMiAxMzAuNzg0IDU0LjIwOGMzNC43ODQgMzUuMDA4IDU0LjExMiA4MS41MDQgNTQuMTEyIDEzMC45MTJzLTE5LjIgOTUuOTA0LTU0LjIwOCAxMzAuODE2YTE4Ni45MTIgMTg2LjkxMiAwIDAgMS0yOS40MDggMjQgMjYxLjc5MiAyNjEuNzkyIDAgMCAxIDg0LjUxMiA1NC41OTJjNDkuODg4IDQ4LjE5MiA3Ny40MDggMTEzLjQwOCA3Ny40MDggMTgzLjYxNmEyNS40MDggMjUuNDA4IDAgMCAxLTI1LjQwOCAyNS4yMTZ6IiBwLWlkPSI2NjMzIiBmaWxsPSIjY2NjIj48L3BhdGg+PC9zdmc+';

import zhCN from '../d-language/global/zh_CN';

var Horizontal = DContainer.Horizontal;
var renderOptions = AutoComplete.renderOptions;


var HeaderTools = {
  name: 'DHeaderTools',
  props: {
    prefixCls: PropTypes.string.def('depot-header-tools'),
    avatar: PropTypes.string,
    userName: PropTypes.string,
    locale: PropTypes.object,
    search: PropTypes.bool.def(true),
    searchDataSource: PropTypes.array,
    userDropmenuItems: PropTypes.array.def([{
      title: '设置',
      icon: 'setting',
      key: 'setting'
    }, {
      title: '切换自助',
      icon: 'swap',
      key: 'swap'
    }, {
      title: '退出',
      icon: 'logout',
      key: 'logout'
    }]),
    theme: PropTypes.string.def('dark'),
    funcs: PropTypes.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 = _extends({}, zhCN, this.locale);
      result.lang = _extends({}, 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(
          IconButton,
          props,
          [isCount ? h(Icon, {
            attrs: { type: icon }
          }) : h(
            Badge,
            {
              attrs: { count: count }
            },
            [h(Icon, {
              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(
        AutoComplete,
        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(
            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(
              Menu,
              _mergeJSXProps([menuProps, { slot: 'overlay' }]),
              [userDropmenuItems.map(function (it) {
                if (it === null) {
                  return h(Menu.Divider, { key: 'null' });
                }
                return h(
                  Menu.Item,
                  { key: it.key },
                  [it.icon ? h(Icon, {
                    attrs: { type: it.icon }
                  }) : null, contextLocale[it.key] || it.title]
                );
              })]
            )]
          )]
        )]
      );
    }
  },
  render: function render() {
    var h = arguments[0];

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

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

export default HeaderTools;