vue-ant-patterns/lib/d-detail-info/index.js

vue-ant-patterns

'use strict';

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

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

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 _propsUtil = require('ant-design-vue/lib/_util/props-util');

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

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

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

var _dContainer2 = _interopRequireDefault(_dContainer);

var _dTitleBar = require('../d-title-bar');

var _dTitleBar2 = _interopRequireDefault(_dTitleBar);

var _propsType = require('./propsType');

var _propsType2 = _interopRequireDefault(_propsType);

var _baseInfo = require('./baseInfo');

var _baseInfo2 = _interopRequireDefault(_baseInfo);

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

var Vertical = _dContainer2['default'].Vertical;

var DDetailInfo = {
  name: 'DDetailInfo',
  props: (0, _extends3['default'])({
    prefixCls: _vueTypes2['default'].string.def('depot-detail-info'),
    isWindow: false,
    navTitle: _vueTypes2['default'].string,
    getContainer: _vueTypes2['default'].func
  }, _propsType2['default']),
  data: function data() {
    var visible = this.visible;


    return {
      sIsWindow: this.$props.isWindow || false,
      sVisible: visible || false
    };
  },

  // model: {
  //   prop: 'visible',
  //   event: 'close',
  // },
  // watch: {
  //   visible (v) {
  //     this.sVisible = v;
  //   },
  // },
  watch: {
    isWindow: function isWindow(v) {
      this.sIsWindow = v;
    }
  },
  methods: {
    getBodyRef: function getBodyRef() {
      return this.$refs.bodyNode;
    },
    titleBarButtonsEvent: function titleBarButtonsEvent(e, item) {
      this.$emit('titleBarButtonsClick', e, item);
    },
    renderOtherInfo: function renderOtherInfo() {
      var h = this.$createElement;
      var $slots = this.$slots,
          otherInfo = this.otherInfo,
          sIsWindow = this.sIsWindow;
      var otherSlot = $slots['banner.other'];


      var otherInfoNode = sIsWindow ? null : otherSlot ? otherSlot : otherInfo ? h(
        'div',
        { 'class': 'banner-other-box' },
        [h(
          'ul',
          { 'class': 'd-list d-list-col-2' },
          [otherInfo.map(function (it, idx) {
            return h(
              'li',
              { 'class': 'item', key: it.value + '-' + idx },
              [h(
                'div',
                { 'class': 'label' },
                [it.label]
              ), h(_antDesignVue.Progress, {
                attrs: { percent: it.value, strokeColor: '#fff' }
              })]
            );
          })]
        )]
      ) : h('div', { 'class': 'banner-other-box' });
      return otherInfoNode;
    },
    renderIntegrity: function renderIntegrity() {
      var h = this.$createElement;
      var $slots = this.$slots,
          integrity = this.integrity,
          sIsWindow = this.sIsWindow;
      var integritySlot = $slots['banner.integrity'];


      var integrityNode = sIsWindow ? null : integritySlot ? integritySlot : integrity ? h(
        'div',
        { 'class': 'banner-integrity-box' },
        [h(_antDesignVue.Progress, {
          attrs: { type: 'circle', strokeColor: '#fff', percent: integrity.value, width: 140 }
        }), h(
          'span',
          { 'class': 'text' },
          [integrity.label]
        )]
      ) : h('div', { 'class': 'banner-integrity-box' });
      return integrityNode;
    },
    renderTags: function renderTags() {
      var h = this.$createElement;
      var $slots = this.$slots,
          tags = this.tags;
      var tagsSlot = $slots['banner.tags'];


      var tagNode = tagsSlot ? tagsSlot : h(
        'div',
        { 'class': 'banner-tags-box' },
        [tags && tags.length ? tags.map(function (item) {
          return h(
            'span',
            { 'class': 'tag', key: item.key },
            [item.name]
          );
        }) : null]
      );
      return tagNode;
    },
    renderBaseInfo: function renderBaseInfo() {
      var _this = this;

      var h = this.$createElement;
      var $slots = this.$slots,
          $listeners = this.$listeners,
          baseInfo = this.baseInfo,
          integrity = this.integrity;
      var baseInfoSlot = $slots['banner.baseinfo'];


      var baseInfoProps = {
        props: {
          baseInfo: baseInfo,
          integrity: integrity
        },
        on: {
          bannerButtonsClick: function bannerButtonsClick(e, item) {
            _this.$emit('bannerButtonsClick', e, item);
          }
        }
      };
      var node = baseInfoSlot ? baseInfoSlot : h(_baseInfo2['default'], baseInfoProps);
      return node;
    },
    renderBanner: function renderBanner() {
      var h = this.$createElement;
      var prefixCls = this.prefixCls,
          $slots = this.$slots,
          $listeners = this.$listeners,
          baseInfo = this.baseInfo,
          tags = this.tags,
          integrity = this.integrity,
          otherInfo = this.otherInfo;

      var props = {
        'class': prefixCls + '-banner'
      };

      var baseInfoSlot = $slots['banner.baseinfo'],
          tagsSlot = $slots['banner.tags'],
          integritySlot = $slots['banner.integrity'],
          otherSlot = $slots['banner.other'];


      var isBanner = baseInfoSlot || tagsSlot || integritySlot || otherSlot || baseInfo || tags || integrity || otherInfo;
      var bannerNode = isBanner ? h(
        _dContainer2['default'],
        props,
        [this.renderBaseInfo(), this.renderTags(), this.renderIntegrity(), this.renderOtherInfo()]
      ) : null;
      return bannerNode;
    },
    renderAnchor: function renderAnchor() {
      var h = this.$createElement;
      var anchorList = this.anchorList,
          $slots = this.$slots,
          getContainer = this.getContainer,
          navTitle = this.navTitle,
          prefixCls = this.prefixCls;

      var childArray = (0, _propsUtil.filterEmpty)($slots['anchor-nav']);
      var chd = void 0;

      if (childArray.length) {
        chd = childArray;
      } else {
        chd = anchorList ? h(
          _antDesignVue.Anchor,
          {
            attrs: { affix: false, getContainer: getContainer || this.getBodyRef, offsetBottom: 20 }
          },
          [(anchorList || []).map(function (it) {
            return h(_antDesignVue.Anchor.Link, { key: it.title, attrs: { href: '#' + it.title, title: it.title }
            });
          })]
        ) : null;
      }
      var wrapNode = chd ? h(
        'div',
        { 'class': prefixCls + '-anchor-nav' },
        [navTitle ? h('h3', [navTitle]) : null, h(
          'div',
          { 'class': prefixCls + '-fixed-sider' },
          [h(
            'span',
            { 'class': 'left' },
            [h('d-icon', {
              attrs: { type: 'left' }
            })]
          ), h(
            'span',
            { 'class': 'right' },
            [h('d-icon', {
              attrs: { type: 'right' }
            })]
          ), chd]
        )]
      ) : null;

      return wrapNode;
    },
    renderTitleBar: function renderTitleBar() {
      var h = this.$createElement;
      var prefixCls = this.prefixCls,
          $slots = this.$slots,
          isWindow = this.isWindow,
          titleBar = this.titleBar,
          titleBarButtonsEvent = this.titleBarButtonsEvent,
          isShowTitleBarSubArea = this.isShowTitleBarSubArea;
      var slotTitle = $slots.titleBar;

      var titleBarNode = slotTitle ? h(
        'div',
        { 'class': prefixCls + '-title' },
        [slotTitle]
      ) : titleBar ? h(
        'div',
        { 'class': prefixCls + '-title' },
        [h(
          _dTitleBar2['default'],
          {
            attrs: { title: titleBar.title, tagName: titleBar.tagName }
          },
          [h(
            'template',
            { slot: 'second' },
            [isShowTitleBarSubArea ? h('span', [titleBar.buttons.map(function (item, idx) {
              var buttonProps = {
                props: {
                  type: idx === 0 ? 'primary' : 'default'
                },
                on: {
                  click: function click(e) {
                    titleBarButtonsEvent(e, item);
                  }
                },
                key: item.key
              };
              return h(
                _antDesignVue.Button,
                buttonProps,
                [item.icon ? h(_antDesignVue.Icon, {
                  attrs: { type: item.icon }
                }) : null, item.text]
              );
            })]) : null]
          )]
        )]
      ) : null;

      return titleBarNode;
    },
    renderBody: function renderBody() {
      var h = this.$createElement;
      var $slots = this.$slots;

      return h(
        _dContainer2['default'],
        { 'class': 'reset-ant-collapse depot-detail-info-collapse' },
        [$slots['default']]
      );
    }
  },

  render: function render() {
    var _cx;

    var h = arguments[0];
    var prefixCls = this.prefixCls,
        $slots = this.$slots,
        $listeners = this.$listeners,
        sIsWindow = this.sIsWindow;


    var props = {
      'class': (0, _classnames2['default'])((_cx = {}, (0, _defineProperty3['default'])(_cx, prefixCls, 1), (0, _defineProperty3['default'])(_cx, prefixCls + '-window', sIsWindow), _cx))
    };

    return h(
      Vertical,
      props,
      [h(
        'div',
        { 'class': prefixCls + '-content' },
        [this.renderTitleBar(), this.renderBanner(), this.renderAnchor(), h(
          'div',
          { 'class': prefixCls + '-body', ref: 'bodyNode' },
          [h(
            'div',
            { 'class': prefixCls + '-body-inner' },
            [this.renderBody()]
          )]
        )]
      )]
    );
  }
};

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

exports['default'] = DDetailInfo;