@fe6/water-pro/lib/form-pro/src/components/form-action.js

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

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _vue = require("vue");

var _shared = require("@fe6/shared");

var _lodash = require("lodash");

var _button = _interopRequireDefault(require("../../../button"));

var _grid = require("../../../grid");

var _basicArrow = _interopRequireDefault(require("../../../basic-arrow"));

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

var _useConfigInject2 = _interopRequireDefault(require("../../../_util/hooks/useConfigInject"));

var _useLabelWidth = require("../hooks/use-label-width");

var _useFormContext2 = require("../hooks/use-form-context");

var _propsUtil = require("../../../_util/props-util");

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

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; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

var _default2 = (0, _vue.defineComponent)({
  name: 'AFormProAction',
  props: {
    schemas: {
      type: Array,
      default: function _default() {
        return [];
      }
    },
    formProps: {
      type: Object,
      default: {}
    },
    layout: _vueTypes.default.oneOf(['horizontal', 'vertical', 'inline']).def('horizontal'),
    actionAffix: _vueTypes.default.looseBool,
    actionTarget: _vueTypes.default.func,
    showActionButtonGroup: _vueTypes.default.bool.def(true),
    showResetButton: _vueTypes.default.bool.def(true),
    showSubmitButton: _vueTypes.default.bool.def(true),
    showAdvancedButton: _vueTypes.default.bool.def(true),
    resetButtonOptions: {
      type: Object,
      default: function _default() {
        return {};
      }
    },
    submitButtonOptions: {
      type: Object,
      default: function _default() {
        return {};
      }
    },
    actionColOptions: {
      type: Object,
      default: function _default() {
        return {};
      }
    },
    actionSpan: _vueTypes.default.number.def(6),
    isAdvanced: _vueTypes.default.bool,
    hideAdvanceBtn: _vueTypes.default.bool,
    actionAlgin: _vueTypes.default.oneOf(['left', 'right', 'center', 'space-between']).def('left'),
    resetText: _vueTypes.default.string,
    okText: _vueTypes.default.string,
    prefixCls: _vueTypes.default.string,
    labelWidth: {
      type: [Number, String]
    }
  },
  emits: ['toggle-advanced'],
  setup: function setup(props, _ref) {
    var emit = _ref.emit;

    var _useConfigInject = (0, _useConfigInject2.default)('form-pro', props),
        prefixClsNew = _useConfigInject.prefixCls,
        configProvider = _useConfigInject.configProvider;

    var _toRefs = (0, _vue.toRefs)(props),
        formProps = _toRefs.formProps,
        schemas = _toRefs.schemas;

    var itemLabelWidthProp = (0, _useLabelWidth.useActionLabelWidth)(schemas, formProps);
    var hasLabel = (0, _vue.computed)(function () {
      return !!props.schemas.filter(function (sItem) {
        return sItem.label || sItem.subLabel;
      }).length;
    });
    var actionColOpt = (0, _vue.computed)(function () {
      var showAdvancedButton = props.showAdvancedButton,
          span = props.actionSpan,
          actionColOptions = props.actionColOptions;
      var actionSpan = 24 - span;
      var advancedSpanObj = showAdvancedButton ? {
        span: actionSpan < 6 ? 24 : actionSpan
      } : {};

      var actionInnerColOpt = _extends(_extends({
        span: showAdvancedButton ? 6 : 4
      }, advancedSpanObj), actionColOptions);

      if (props.layout !== 'vertical' && (!hasLabel.value || !(0, _shared.isNaN)(parseFloat(props.labelWidth)))) {
        actionInnerColOpt = {};
      }

      return actionInnerColOpt;
    });
    var getResetBtnOptions = (0, _vue.computed)(function () {
      var _a;

      return _extends({
        text: props.resetText || ((_a = configProvider.locale) === null || _a === void 0 ? void 0 : _a.FormPro.resetText) || '重置'
      }, props.resetButtonOptions);
    });
    var getSubmitBtnOptions = (0, _vue.computed)(function () {
      var _a;

      return _extends({
        text: props.okText || ((_a = configProvider.locale) === null || _a === void 0 ? void 0 : _a.FormPro.okText) || '查询'
      }, props.submitButtonOptions);
    });

    function toggleAdvanced() {
      emit('toggle-advanced');
    }

    var _useFormContext = (0, _useFormContext2.useFormContext)(),
        resetAction = _useFormContext.resetAction,
        submitAction = _useFormContext.submitAction;

    var hasChildrenInSchemas = schemas.value.some(function (sItem) {
      return sItem.children && sItem.children.length > 0;
    });
    return {
      hasLabel: hasLabel,
      hasChildrenInSchemas: hasChildrenInSchemas,
      actionColOpt: actionColOpt,
      getResetBtnOptions: getResetBtnOptions,
      getSubmitBtnOptions: getSubmitBtnOptions,
      toggleAdvanced: toggleAdvanced,
      prefixClsNew: prefixClsNew,
      resetAction: resetAction,
      submitAction: submitAction,
      itemLabelWidthProp: itemLabelWidthProp
    };
  },
  render: function render() {
    var _this = this;

    var rootNode = null;

    if (this.showActionButtonGroup) {
      var widthStyle = (0, _shared.isNaN)(parseFloat(this.labelWidth)) ? '' : "padding-left: ".concat((0, _lodash.isNumber)(this.labelWidth) ? "".concat(this.labelWidth, "px") : this.labelWidth, ";");

      var rootProps = _extends(_extends({}, this.itemLabelWidthProp || this.actionColOpt), {
        style: "".concat(this.hasLabel && !this.actionAffix ? widthStyle : '', "textAlign: ").concat(this.actionAlgin)
      });

      var childColProps = {
        span: 24
      };
      var resetButtonNode = null;

      if (this.showResetButton) {
        resetButtonNode = (0, _vue.createVNode)(_button.default, _objectSpread(_objectSpread({
          "type": "default",
          "class": "".concat(this.prefixClsNew, "-action-button")
        }, this.getResetBtnOptions), {}, {
          "style": {
            marginRight: this.showSubmitButton ? '12px' : 0
          },
          "onClick": this.resetAction
        }), {
          default: function _default() {
            return [_this.getResetBtnOptions.text];
          }
        });
      }

      var submitButtonNode = null;

      if (this.showSubmitButton) {
        submitButtonNode = (0, _vue.createVNode)(_button.default, _objectSpread(_objectSpread({
          "type": "primary",
          "class": "".concat(this.prefixClsNew, "-action-button")
        }, this.getSubmitBtnOptions), {}, {
          "onClick": this.submitAction
        }), {
          default: function _default() {
            return [_this.getSubmitBtnOptions.text];
          }
        });
      }

      var advancedButtonNode = null;

      if (this.showAdvancedButton && !this.hideAdvanceBtn) {
        advancedButtonNode = (0, _vue.createVNode)(_button.default, {
          "type": "link",
          "size": "small",
          "onClick": this.toggleAdvanced
        }, {
          default: function _default() {
            return [_this.isAdvanced ? '收起' : '展开', (0, _vue.createVNode)(_basicArrow.default, {
              "expand": !_this.isAdvanced,
              "top": _this.isAdvanced,
              "style": "margin-left: 4px"
            }, null)];
          }
        });
      }

      rootNode = (0, _vue.createVNode)(_grid.Col, rootProps, {
        default: function _default() {
          return [(0, _vue.createVNode)(_grid.Row, {
            "class": "".concat(_this.prefixClsNew, "-item-action")
          }, {
            default: function _default() {
              return [(0, _vue.createVNode)(_grid.Col, childColProps, {
                default: function _default() {
                  return [(0, _vue.createVNode)("div", {
                    "class": _this.actionAlgin === 'space-between' ? '' : 'ant-form-item-control',
                    "style": _this.actionAlgin === 'space-between' ? 'display: flex; justify-content: space-between;' : ''
                  }, [(0, _propsUtil.getSlot)(_this, 'resetBefore'), resetButtonNode, (0, _propsUtil.getSlot)(_this, 'submitBefore'), submitButtonNode, (0, _propsUtil.getSlot)(_this, 'advanceBefore'), advancedButtonNode, (0, _propsUtil.getSlot)(_this, 'advanceAfter')])];
                }
              })];
            }
          })];
        }
      });
    }

    return rootNode;
  }
});

exports.default = _default2;