vxe-pc-ui/lib/form/src/render.js

A vue based PC component library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.renderItemContent = exports.getItemContentClass = exports.getItemClass = void 0;
exports.renderTitle = renderTitle;
var _vue = require("vue");
var _ui = require("../../ui");
var _utils = require("../../ui/src/utils");
var _dom = require("../../ui/src/dom");
var _vn = require("../../ui/src/vn");
var _util = require("./util");
var _tooltip = _interopRequireDefault(require("../../tooltip/src/tooltip"));
var _icon = _interopRequireDefault(require("../../icon/src/icon"));
var _xeUtils = _interopRequireDefault(require("xe-utils"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function renderPrefixIcon(titlePrefix) {
  return (0, _vue.h)('span', {
    class: 'vxe-form--item-title-prefix'
  }, [(0, _vue.h)(_icon.default, {
    class: titlePrefix.icon || (0, _ui.getIcon)().FORM_PREFIX,
    status: titlePrefix.iconStatus
  })]);
}
function renderSuffixIcon(titleSuffix) {
  return (0, _vue.h)('span', {
    class: 'vxe-form--item-title-suffix'
  }, [(0, _vue.h)(_icon.default, {
    class: titleSuffix.icon || (0, _ui.getIcon)().FORM_SUFFIX,
    status: titleSuffix.iconStatus
  })]);
}
const getItemClass = ($xeForm, item, isGroup) => {
  const formProps = $xeForm.props;
  const formReactData = $xeForm.reactData;
  const $xeGrid = $xeForm.xeGrid;
  const {
    data,
    rules,
    readonly,
    disabled,
    span: allSpan,
    titleBackground: allTitleBackground,
    titleBold: allTitleBold,
    titleColon: allTitleColon,
    titleAsterisk: allTitleAsterisk,
    vertical: allVertical,
    padding: allPadding
  } = formProps;
  const {
    collapseAll
  } = formReactData;
  const {
    folding,
    field,
    itemRender,
    showError,
    className,
    vertical,
    padding,
    children,
    showContent
  } = item;
  const compConf = (0, _utils.isEnableConf)(itemRender) ? _ui.renderer.get(itemRender.name) : null;
  const itemClassName = compConf ? compConf.formItemClassName || compConf.itemClassName : '';
  const span = item.span || allSpan;
  const itemPadding = _xeUtils.default.eqNull(padding) ? allPadding : padding;
  const itemVertical = _xeUtils.default.eqNull(vertical) ? allVertical : vertical;
  const titleBackground = _xeUtils.default.eqNull(item.titleBackground) ? allTitleBackground : item.titleBackground;
  const titleBold = _xeUtils.default.eqNull(item.titleBold) ? allTitleBold : item.titleBold;
  const titleColon = _xeUtils.default.eqNull(item.titleColon) ? allTitleColon : item.titleColon;
  const titleAsterisk = _xeUtils.default.eqNull(item.titleAsterisk) ? allTitleAsterisk : item.titleAsterisk;
  const params = {
    data,
    disabled,
    readonly,
    field,
    property: field,
    item,
    $form: $xeForm,
    $grid: $xeGrid
  };
  const hasGroup = children && children.length > 0;
  let isRequired = false;
  let isValid = false;
  if (!readonly && rules) {
    const itemRules = rules[field];
    if (itemRules && itemRules.length) {
      isValid = true;
      isRequired = itemRules.some(rule => rule.required);
    }
  }
  return [isGroup || hasGroup ? 'vxe-form--group' : '', 'vxe-form--item', item.id, span ? `vxe-form--item-col_${span} is--span` : '', className ? _xeUtils.default.isFunction(className) ? className(params) : className : '', itemClassName ? _xeUtils.default.isFunction(itemClassName) ? itemClassName(params) : itemClassName : '', {
    'is--colon': titleColon,
    'is--tbg': titleBackground,
    'is--bold': titleBold,
    'is--padding': itemPadding,
    'is--vertical': itemVertical,
    'is--asterisk': titleAsterisk,
    'hide--content': showContent === false,
    'is--valid': isValid,
    'is--required': isRequired,
    'is--hidden': folding && collapseAll,
    'is--active': (0, _util.isActiveItem)($xeForm, item),
    'is--error': showError
  }];
};
exports.getItemClass = getItemClass;
const getItemContentClass = ($xeForm, item, isGroup) => {
  const formProps = $xeForm.props;
  const $xeGrid = $xeForm.xeGrid;
  const {
    data,
    readonly,
    disabled,
    align: allAlign,
    verticalAlign: allVerticalAlign
  } = formProps;
  const {
    field,
    itemRender,
    contentClassName,
    children
  } = item;
  const compConf = (0, _utils.isEnableConf)(itemRender) ? _ui.renderer.get(itemRender.name) : null;
  const itemContentClassName = compConf ? compConf.formItemContentClassName || compConf.itemContentClassName : '';
  const align = _xeUtils.default.eqNull(item.align) ? allAlign : item.align;
  const verticalAlign = _xeUtils.default.eqNull(item.verticalAlign) ? allVerticalAlign : item.verticalAlign;
  const params = {
    data,
    disabled,
    readonly,
    field,
    property: field,
    item,
    $form: $xeForm,
    $grid: $xeGrid
  };
  const hasGroup = children && children.length > 0;
  return [isGroup || hasGroup ? 'vxe-form--group-content vxe-form--item-row' : '', 'vxe-form--item-content', align ? `align--${align}` : '', verticalAlign ? `vertical-align--${verticalAlign}` : '', itemContentClassName ? _xeUtils.default.isFunction(itemContentClassName) ? itemContentClassName(params) : itemContentClassName : '', contentClassName ? _xeUtils.default.isFunction(contentClassName) ? contentClassName(params) : contentClassName : ''];
};
exports.getItemContentClass = getItemContentClass;
function renderTitle($xeForm, item, isGroup) {
  const formProps = $xeForm.props;
  const $xeGrid = $xeForm.xeGrid;
  const {
    data,
    readonly,
    disabled,
    titleAlign: allTitleAlign,
    titleWidth: allTitleWidth,
    titleOverflow: allTitleOverflow,
    vertical: allVertical
  } = formProps;
  const {
    slots,
    title,
    field,
    itemRender,
    titleOverflow,
    vertical,
    showTitle,
    titleClassName,
    titleStyle,
    titlePrefix,
    titleSuffix,
    children,
    showContent
  } = item;
  const {
    computeTooltipOpts
  } = $xeForm.getComputeMaps();
  const tooltipOpts = computeTooltipOpts.value;
  const compConf = (0, _utils.isEnableConf)(itemRender) ? _ui.renderer.get(itemRender.name) : null;
  const itemTitleClassName = compConf ? compConf.formItemTitleClassName || compConf.itemTitleClassName : '';
  const itemTitleStyle = compConf ? compConf.formItemTitleStyle || compConf.itemTitleStyle : null;
  const itemVertical = _xeUtils.default.eqNull(vertical) ? allVertical : vertical;
  const titleAlign = _xeUtils.default.eqNull(item.titleAlign) ? allTitleAlign : item.titleAlign;
  const titleWidth = itemVertical ? null : _xeUtils.default.eqNull(item.titleWidth) ? allTitleWidth : item.titleWidth;
  const itemOverflow = _xeUtils.default.eqNull(titleOverflow) ? allTitleOverflow : titleOverflow;
  const ovEllipsis = itemOverflow === 'ellipsis';
  const ovTitle = itemOverflow === 'title';
  const ovTooltip = itemOverflow === true || itemOverflow === 'tooltip';
  const hasEllipsis = ovTitle || ovTooltip || ovEllipsis;
  const params = {
    data,
    disabled,
    readonly,
    field,
    property: field,
    item,
    $form: $xeForm,
    $grid: $xeGrid
  };
  const titleSlot = slots ? slots.title : null;
  const extraSlot = slots ? slots.extra : null;
  const isTitle = showTitle !== false && (title || titleSlot);
  const hasGroup = children && children.length > 0;
  const titVNs = [];
  if (titlePrefix) {
    titVNs.push(titlePrefix.content || titlePrefix.message ? (0, _vue.h)(_tooltip.default, Object.assign(Object.assign(Object.assign({}, tooltipOpts), titlePrefix), {
      content: (0, _utils.getFuncText)(titlePrefix.content || titlePrefix.message)
    }), {
      default: () => renderPrefixIcon(titlePrefix)
    }) : renderPrefixIcon(titlePrefix));
  }
  const rftTitle = compConf ? compConf.renderFormItemTitle || compConf.renderItemTitle : null;
  titVNs.push((0, _vue.h)('span', {
    class: 'vxe-form--item-title-label'
  }, titleSlot ? $xeForm.callSlot(titleSlot, params) : rftTitle ? (0, _vn.getSlotVNs)(rftTitle(itemRender, params)) : (0, _utils.getFuncText)(item.title)));
  const fixVNs = [];
  if (titleSuffix) {
    fixVNs.push(titleSuffix.content || titleSuffix.message ? (0, _vue.h)(_tooltip.default, Object.assign(Object.assign(Object.assign({}, tooltipOpts), titleSuffix), {
      content: (0, _utils.getFuncText)(titleSuffix.content || titleSuffix.message)
    }), {
      default: () => renderSuffixIcon(titleSuffix)
    }) : renderSuffixIcon(titleSuffix));
  }
  const ons = ovTooltip ? {
    onMouseenter(evnt) {
      $xeForm.triggerTitleTipEvent(evnt, params);
    },
    onMouseleave: $xeForm.handleTitleTipLeaveEvent
  } : {};
  return isTitle ? (0, _vue.h)('div', Object.assign({
    class: [isGroup || hasGroup ? 'vxe-form--group-title' : '', 'vxe-form--item-title', titleAlign ? `align--${titleAlign}` : '', hasEllipsis ? 'is--ellipsis' : '', itemTitleClassName ? _xeUtils.default.isFunction(itemTitleClassName) ? itemTitleClassName(params) : itemTitleClassName : '', titleClassName ? _xeUtils.default.isFunction(titleClassName) ? titleClassName(params) : titleClassName : ''],
    style: Object.assign({}, _xeUtils.default.isFunction(itemTitleStyle) ? itemTitleStyle(params) : itemTitleStyle, _xeUtils.default.isFunction(titleStyle) ? titleStyle(params) : titleStyle, titleWidth && showContent !== false ? {
      width: (0, _dom.toCssUnit)(titleWidth)
    } : null),
    title: ovTitle ? (0, _utils.getFuncText)(title) : null
  }, ons), [(0, _vue.h)('div', {
    class: 'vxe-form--item-title-content'
  }, titVNs), (0, _vue.h)('div', {
    class: 'vxe-form--item-title-postfix'
  }, fixVNs), extraSlot ? (0, _vue.h)('div', {
    class: 'vxe-form--item-title-extra'
  }, $xeForm.callSlot(extraSlot, params)) : (0, _vue.createCommentVNode)()]) : (0, _vue.createCommentVNode)();
}
const renderItemContent = ($xeForm, item) => {
  const formProps = $xeForm.props;
  const formReactData = $xeForm.reactData;
  const $xeGrid = $xeForm.xeGrid;
  const {
    computeCollapseOpts,
    computeValidOpts
  } = $xeForm.getComputeMaps();
  const {
    data,
    readonly,
    disabled
  } = formProps;
  const {
    collapseAll
  } = formReactData;
  const {
    slots,
    field,
    itemRender,
    collapseNode,
    errRule
  } = item;
  const defaultSlot = slots ? slots.default : null;
  const validSlot = slots ? slots.valid : null;
  const collapseOpts = computeCollapseOpts.value;
  const validOpts = computeValidOpts.value;
  const compConf = (0, _utils.isEnableConf)(itemRender) ? _ui.renderer.get(itemRender.name) : null;
  const params = {
    data,
    disabled,
    readonly,
    field,
    property: field,
    item,
    $form: $xeForm,
    $grid: $xeGrid
  };
  let contentVNs = [];
  const rftContent = compConf ? compConf.renderFormItemContent || compConf.renderItemContent : null;
  if (defaultSlot) {
    contentVNs = $xeForm.callSlot(defaultSlot, params);
  } else if (rftContent) {
    contentVNs = (0, _vn.getSlotVNs)(rftContent(itemRender, params));
  } else if (field) {
    const itemValue = _xeUtils.default.get(data, field);
    contentVNs = [(0, _utils.eqEmptyValue)(itemValue) ? '' : `${itemValue}`];
  }
  if (collapseNode) {
    contentVNs.push((0, _vue.h)('div', {
      class: 'vxe-form--item-trigger-node',
      onClick: $xeForm.toggleCollapseEvent
    }, [(0, _vue.h)('span', {
      class: 'vxe-form--item-trigger-text'
    }, collapseAll ? collapseOpts.unfoldButtonText || (0, _ui.getI18n)('vxe.form.unfolding') : collapseOpts.foldButtonText || (0, _ui.getI18n)('vxe.form.folding')), (0, _vue.h)('i', {
      class: ['vxe-form--item-trigger-icon', collapseAll ? collapseOpts.foldIcon || (0, _ui.getIcon)().FORM_FOLDING : collapseOpts.unfoldIcon || (0, _ui.getIcon)().FORM_UNFOLDING]
    })]));
  }
  if (errRule && validOpts.showMessage) {
    const validParams = Object.assign(Object.assign({}, params), {
      rule: errRule
    });
    contentVNs.push((0, _vue.h)('div', {
      class: 'vxe-form-item--valid-error-tip',
      style: errRule.maxWidth ? {
        width: (0, _dom.toCssUnit)(errRule.maxWidth)
      } : null
    }, [(0, _vue.h)('div', {
      class: `vxe-form-item--valid-error-wrapper vxe-form-item--valid-error-theme-${validOpts.theme || 'normal'}`
    }, [validSlot ? $xeForm.callSlot(validSlot, validParams) : [(0, _vue.h)('span', {
      class: 'vxe-form--item--valid-error-msg'
    }, errRule.content || errRule.message)]])]));
  }
  return (0, _vue.h)('div', {
    class: 'vxe-form--item-inner'
  }, contentVNs);
};
exports.renderItemContent = renderItemContent;