@fe6/water-pro/lib/form-pro/src/hooks/use-label-width.js

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

"use strict";

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

var _vue = require("vue");

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

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

function useItemLabelWidth(schemaItemRef, propsRef) {
  return (0, _vue.computed)(function () {
    var schemaItem = (0, _vue.unref)(schemaItemRef);

    var _ref = schemaItem.itemProps || {},
        _ref$labelCol = _ref.labelCol,
        labelCol = _ref$labelCol === void 0 ? {} : _ref$labelCol,
        _ref$wrapperCol = _ref.wrapperCol,
        wrapperCol = _ref$wrapperCol === void 0 ? {} : _ref$wrapperCol;

    var labelWidth = schemaItem.labelWidth,
        disabledLabelWidth = schemaItem.disabledLabelWidth;
    var labelText = schemaItem.label || '';

    var _unref = (0, _vue.unref)(propsRef),
        globalLabelWidth = _unref.labelWidth,
        globalLabelCol = _unref.labelCol,
        globWrapperCol = _unref.wrapperCol; // If labelWidth is set globally, all items setting


    if (!globalLabelWidth && !labelWidth && !globalLabelCol || disabledLabelWidth) {
      labelCol.style = {
        textAlign: 'left'
      };
      return {
        labelCol: labelCol,
        wrapperCol: wrapperCol
      };
    }

    var width = labelWidth || globalLabelWidth;

    var col = _extends(_extends({}, globalLabelCol), labelCol);

    var wrapCol = _extends(_extends({}, globWrapperCol), wrapperCol);

    if (width && labelText) {
      width = (0, _shared.isNumber)(width) ? "".concat(width, "px") : width;
      return {
        labelCol: {
          style: {
            width: width
          }
        },
        wrapperCol: {
          style: {
            width: "calc(100% - ".concat(width, ")")
          }
        }
      };
    }

    return {
      labelCol: _extends({}, col),
      wrapperCol: _extends({}, wrapCol)
    };
  });
}

function useActionLabelWidth(schemasRef, propsRef) {
  return (0, _vue.computed)(function () {
    var schemas = (0, _vue.unref)(schemasRef);

    var _unref2 = (0, _vue.unref)(propsRef),
        globalLabelWidth = _unref2.labelWidth,
        globWrapperCol = _unref2.actionColOptions,
        actionAlgin = _unref2.actionAlgin; // If labelWidth is set globally, all items setting


    if (!globalLabelWidth) {
      return globWrapperCol;
    }

    var width = globalLabelWidth || 0;

    var wrapCol = _extends({}, globWrapperCol);

    var hasLabelInSchemas = schemas.every(function (sItem) {
      return !!sItem.label;
    });

    if (width && hasLabelInSchemas && actionAlgin != 'space-between') {
      width = (0, _shared.isNumber)(width) ? "".concat(width, "px") : width;
      return {
        style: {
          width: "calc(100% - ".concat(width, ")"),
          marginLeft: width
        }
      };
    } // fix: form pro 没有 label 的时候堆砌问题


    return hasLabelInSchemas ? _extends({}, wrapCol) : {};
  });
}