vue-ant-patterns/lib/d-layout/Sider.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 _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

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 _debounceHandler = require('../_utils/debounceHandler');

var _debounceHandler2 = _interopRequireDefault(_debounceHandler);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

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

var _dContainer2 = _interopRequireDefault(_dContainer);

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

var _dIconButton2 = _interopRequireDefault(_dIconButton);

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

// import Icon from '../d-icon';
exports['default'] = {
  name: 'DSider',
  props: {
    prefixCls: _vueTypes2['default'].string.def('depot-sider'),
    // 是否可收起
    collapsible: _vueTypes2['default'].bool.def(true),
    // 当前收起状态
    collapsed: _vueTypes2['default'].bool.def(false),
    direction: _vueTypes2['default'].string.def('left'),
    vLine: _vueTypes2['default'].bool.def(false),
    gutter: _vueTypes2['default'].number.def(16)
  },

  data: function data() {
    var props = (0, _propsUtil.getOptionProps)(this);
    var state = {
      sCollapsed: false,
      collapseIng: false
    };

    if ('collapsed' in props) {
      state.sCollapsed = props.collapsed;
    }

    return state;
  },

  watch: {
    collapsed: function collapsed(v) {
      this.sCollapsed = v;
    }
  },
  created: function created() {
    this.debounceClickHandler = (0, _debounceHandler2['default'])(this.clickHandler);
  },
  mounted: function mounted() {},

  methods: {
    clickHandler: function clickHandler() {
      this.sCollapsed = !this.sCollapsed;
      this.$emit('onCollapse', this.sCollapsed);
    },
    renderButton: function renderButton() {
      var h = this.$createElement;
      var _$props = this.$props,
          direction = _$props.direction,
          gutter = _$props.gutter;
      var sCollapsed = this.sCollapsed;

      var buttonProps = {
        props: {
          icon: sCollapsed ? 'menu-unfold' : 'menu-fold',
          size: 'small'
        },
        'class': {
          'sider-collapse-button': 1
        },
        on: {
          click: this.debounceClickHandler
        }
      };
      return h(_dIconButton2['default'], buttonProps);
    }
  },
  render: function render() {
    var _cx;

    var h = arguments[0];
    var prefixCls = this.prefixCls,
        collapsible = this.collapsible,
        direction = this.direction,
        vLine = this.vLine,
        padding = this.padding,
        $slots = this.$slots;

    var cls = (0, _classnames2['default'])((_cx = {}, (0, _defineProperty3['default'])(_cx, '' + prefixCls, 1), (0, _defineProperty3['default'])(_cx, 'v-line', vLine), (0, _defineProperty3['default'])(_cx, prefixCls + '-' + direction, 1), _cx));
    var divProps = {
      'class': cls
    };
    var innerProps = {
      'class': prefixCls + '-inner',
      props: {
        // grow: true,
      }
    };
    var collapseButton = this.renderButton();
    return h(
      _dContainer2['default'],
      (0, _babelHelperVueJsxMergeProps2['default'])([divProps, { ref: 'sideroot' }]),
      [h(
        _dContainer2['default'],
        innerProps,
        [$slots['default'], collapsible ? collapseButton : null]
      )]
    );
  }
};
// import { Button } from 'ant-design-vue';