vxe-design/lib/form-design/widget-text/text-form.js

A PC-based visual designer based on Vxe UI, used for building zero-code and low-code platforms

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.WidgetTextFormComponent = void 0;
var _vue = require("vue");
var _comp = require("../../ui/src/comp");
var _xeUtils = _interopRequireDefault(require("xe-utils"));
var _core = require("@vxe-ui/core");
var _use = require("../../form-design/src/use");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const getFontSizeOptions = () => {
  return _xeUtils.default.range(12, 27).map(num => {
    return {
      label: `${num}px`,
      value: `${num}px`
    };
  });
};
const getAlignOptions = () => {
  return [{
    label: (0, _core.getI18n)('vxe.formDesign.widgetProp.textProp.alignLeft'),
    value: ''
  }, {
    label: (0, _core.getI18n)('vxe.formDesign.widgetProp.textProp.alignCenter'),
    value: 'center'
  }, {
    label: (0, _core.getI18n)('vxe.formDesign.widgetProp.textProp.alignRight'),
    value: 'right'
  }];
};
const getBoldOptions = () => {
  return [{
    label: (0, _core.getI18n)('vxe.formDesign.widgetProp.textProp.fontNormal'),
    value: false
  }, {
    label: (0, _core.getI18n)('vxe.formDesign.widgetProp.textProp.fontBold'),
    value: true
  }];
};
const WidgetTextFormComponent = exports.WidgetTextFormComponent = (0, _comp.defineVxeComponent)({
  props: {
    renderOpts: {
      type: Object,
      default: () => ({})
    },
    renderParams: {
      type: Object,
      default: () => ({})
    }
  },
  emits: [],
  setup(props) {
    const VxeUIFormComponent = _core.VxeUI.getComponent('vxe-form');
    const VxeUIFormItemComponent = _core.VxeUI.getComponent('vxe-form-item');
    const VxeUIInputComponent = _core.VxeUI.getComponent('vxe-input');
    const {
      computeKebabCaseName
    } = (0, _use.useWidgetName)(props);
    const alignOpts = (0, _vue.ref)(getAlignOptions());
    const boldOpts = (0, _vue.ref)(getBoldOptions());
    const fontSizeOpts = (0, _vue.ref)(getFontSizeOptions());
    return () => {
      const {
        renderParams
      } = props;
      const {
        widget
      } = renderParams;
      const kebabCaseName = computeKebabCaseName.value;
      return (0, _vue.h)(VxeUIFormComponent, {
        class: ['vxe-form-design--widget-render-form-wrapper', `widget-${kebabCaseName}`],
        vertical: true,
        span: 24,
        titleBold: true,
        titleOverflow: true,
        data: widget.options
      }, {
        default() {
          return [(0, _vue.h)(VxeUIFormItemComponent, {
            title: (0, _core.getI18n)('vxe.formDesign.widgetProp.textProp.name')
          }, {
            default() {
              return (0, _vue.h)(VxeUIInputComponent, {
                modelValue: widget.title,
                'onUpdate:modelValue'(val) {
                  widget.title = val;
                }
              });
            }
          }), (0, _vue.h)(VxeUIFormItemComponent, {
            title: (0, _core.getI18n)('vxe.formDesign.widgetProp.textProp.boldTitle'),
            field: 'bold',
            itemRender: {
              name: 'VxeRadioGroup',
              options: boldOpts.value
            }
          }), (0, _vue.h)(VxeUIFormItemComponent, {
            title: (0, _core.getI18n)('vxe.formDesign.widgetProp.textProp.alignTitle'),
            field: 'align',
            itemRender: {
              name: 'VxeRadioGroup',
              options: alignOpts.value
            }
          }), (0, _vue.h)(VxeUIFormItemComponent, {
            title: (0, _core.getI18n)('vxe.formDesign.widgetProp.textProp.sizeTitle'),
            field: 'fontSize',
            itemRender: {
              name: 'VxeSelect',
              options: fontSizeOpts.value
            }
          })];
        }
      });
    };
  }
});