iep-ui/lib/iep-tab-tree-select/TreeSelectInput.js

An enterprise-class UI design language and Vue-based implementation

'use strict';

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

var _vueTypes = require('../_util/vue-types');

var _vueTypes2 = _interopRequireDefault(_vueTypes);

var _rkWebIcon = require('rk-web-icon');

var _tag = require('../tag');

var _tag2 = _interopRequireDefault(_tag);

var _lodash = require('lodash');

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

exports['default'] = {
  name: 'TreeSelectInput',
  props: {
    prefix: _vueTypes2['default'].string,
    active: _vueTypes2['default'].bool,
    placeholder: _vueTypes2['default'].string,
    select: _vueTypes2['default'].array
  },
  data: function data() {
    return {
      _localSelect: []
    };
  },

  watch: {
    '$props.select': {
      handler: function handler(e) {
        this._localSelect = e;
      },

      immediate: true,
      deep: true
    }
  },
  methods: {
    handleClose: function handleClose(e) {
      this.$emit('close', e);
    }
  },
  render: function render() {
    var _this = this;

    var h = arguments[0];
    var _$props = this.$props,
        prefix = _$props.prefix,
        placeholder = _$props.placeholder,
        active = _$props.active;

    var prefixCls = prefix + '-input';
    var InputNodes = !(0, _lodash.isEmpty)(this._localSelect.flat()) ? this._localSelect.flat().map(function (item) {
      return h(
        _tag2['default'],
        {
          attrs: { closable: true, visible: true },
          on: {
            'close': function close() {
              return _this.handleClose(item);
            }
          }
        },
        [item.title]
      );
    }) : h('span', [placeholder]);
    return h(
      'div',
      { 'class': prefixCls },
      [h(
        'div',
        {
          'class': [prefixCls + '-box', (0, _lodash.isEmpty)(this._localSelect.flat()) ? prefixCls + '-box-placeholder' : '', active ? prefixCls + '-box-active' : '']
        },
        [InputNodes]
      ), h(
        'div',
        { 'class': prefixCls + '-suffix' },
        [h(_rkWebIcon.IepIcon, {
          attrs: { type: 'basic_linear_directive_down4' }
        })]
      )]
    );
  }
};