@fe6/water-pro/es/container-collapse/container-collapse.js

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

import { createVNode as _createVNode, resolveDirective as _resolveDirective } from "vue";

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

/** @format */
import { defineComponent } from 'vue'; // component

import Skeleton from '../skeleton';
import { CollapseTransition } from '../transition';
import ContainerLazy from '../container-lazy/container-lazy';
import useConfigInject from '../_util/hooks/useConfigInject';
import { getSlot, getOptionProps } from '../_util/props-util';
import { triggerWindowResize } from '../_util/dom'; // hook

import { useTimeoutFn } from '../_util/hooks/use-timeout';
import PropTypes from '../_util/vue-types';
import { tuple } from '../_util/type';
import CollapseHeader from './collapse-header';
export default defineComponent({
  name: 'AContainerCollapse',
  props: {
    title: PropTypes.string.def(''),
    // Can it be expanded
    expanable: PropTypes.bool.def(true),
    // Warm reminder on the right side of the title
    helpMessage: {
      type: [Array, String],
      default: ''
    },
    value: PropTypes.bool,
    triggerWindowResize: PropTypes.bool,
    loading: PropTypes.bool,
    lazy: PropTypes.bool,
    lazyTime: PropTypes.number.def(0),
    titleLevel: PropTypes.number.def(5),
    prefixCls: PropTypes.string,
    mode: PropTypes.oneOf(tuple('simple', 'default')).def('default'),
    headerClassName: PropTypes.string,
    wrapClassName: PropTypes.string
  },
  emits: ['expand'],
  setup: function setup(props) {
    var _useConfigInject = useConfigInject('container-collapse', props),
        prefixClsNew = _useConfigInject.prefixCls;

    return {
      prefixClsNew: prefixClsNew
    };
  },
  data: function data() {
    return {
      show: this.value
    };
  },
  watch: {
    value: function value(newValue) {
      this.show = newValue;
    }
  },
  methods: {
    handleExpand: function handleExpand() {
      if (!this.lazy) {
        this.show = !this.show;
      }

      if (this.triggerWindowResize) {
        // 200 milliseconds here is because the expansion has animation,
        useTimeoutFn(triggerWindowResize, 200);
      }

      this.$emit('expand', this.lazy ? !this.show : this.show);
    }
  },
  render: function render() {
    var _this = this;

    var defChildren = getSlot(this);
    var titleChildren = getSlot(this, 'title');
    var skeletonChildren = getSlot(this, 'skeleton');
    var props = getOptionProps(this);

    var collapseHeaderNode = _createVNode(CollapseHeader, _objectSpread(_objectSpread(_objectSpread({}, this.$attrs), props), {}, {
      "prefix-cls": this.prefixClsNew,
      "show": this.show,
      "loading": this.loading,
      "onExpand": this.handleExpand,
      "level": this.titleLevel,
      "mode": this.mode,
      "headerClassName": this.headerClassName
    }), {
      default: function _default() {
        return [titleChildren];
      },
      action: function action(status) {
        return getSlot(_this, 'action', status);
      },
      icon: function icon(status) {
        return getSlot(_this, 'icon', status);
      }
    });

    var lazyNode = null;

    if (this.lazy) {
      lazyNode = _createVNode(ContainerLazy, {
        "timeout": this.lazyTime
      }, {
        default: function _default() {
          return [defChildren, skeletonChildren];
        }
      });
    } else {
      lazyNode = defChildren;
    }

    var childrenNode = null;

    if (this.loading) {
      childrenNode = _createVNode(Skeleton, null, null);
    } else {
      childrenNode = _createVNode("div", {
        "style": "display: ".concat(this.show ? 'block' : 'none'),
        "class": "".concat(this.prefixClsNew, "-body ").concat(this.prefixClsNew, "-body-").concat(this.mode).concat(this.wrapClassName ? " ".concat(this.wrapClassName) : '')
      }, [lazyNode]);
    }

    var collapseTransitionNode = _createVNode(CollapseTransition, {
      "enable": this.expanable
    }, {
      default: function _default() {
        return [childrenNode];
      }
    });

    return _createVNode("div", {
      "class": [this.prefixClsNew, "".concat(this.prefixClsNew, "-").concat(this.mode)]
    }, [collapseHeaderNode, collapseTransitionNode]);
  }
});