vxe-design/lib/form-design/widget-select/select-view.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.WidgetSelectViewComponent = void 0;
var _vue = require("vue");
var _comp = require("../../ui/src/comp");
var _core = require("@vxe-ui/core");
var _use = require("../../form-design/src/use");
const WidgetSelectViewComponent = exports.WidgetSelectViewComponent = (0, _comp.defineVxeComponent)({
  props: {
    renderOpts: {
      type: Object,
      default: () => ({})
    },
    renderParams: {
      type: Object,
      default: () => ({})
    }
  },
  emits: [],
  setup(props) {
    const VxeUIFormItemComponent = _core.VxeUI.getComponent('vxe-form-item');
    const $xeFormView = (0, _vue.inject)('$xeFormView', null);
    const {
      computeKebabCaseName
    } = (0, _use.useWidgetName)(props);
    const changeEvent = () => {
      const {
        renderParams
      } = props;
      const {
        widget
      } = renderParams;
      if ($xeFormView) {
        const itemValue = $xeFormView ? $xeFormView.getItemValue(widget) : null;
        $xeFormView.updateWidgetStatus(widget, itemValue);
      }
    };
    const renderOptions = () => {
      const {
        renderParams
      } = props;
      const {
        widget
      } = renderParams;
      const {
        options
      } = widget.options;
      return options ? options.map(group => {
        if (group.options) {
          return (0, _vue.h)('optgroup', {
            label: group.value
          }, group.options.map(item => {
            return (0, _vue.h)('option', {
              value: item.value
            }, item.value);
          }));
        }
        return (0, _vue.h)('option', {}, group.value);
      }) : [];
    };
    return () => {
      const {
        renderParams
      } = props;
      const {
        widget,
        isViewMode
      } = renderParams;
      const kebabCaseName = computeKebabCaseName.value;
      return (0, _vue.h)(VxeUIFormItemComponent, {
        class: ['vxe-form-design--widget-render-form-item', `widget-${kebabCaseName}`],
        field: widget.field,
        title: widget.title,
        itemRender: {}
      }, {
        default() {
          return (0, _vue.h)('select', {
            class: 'vxe-default-select',
            value: $xeFormView ? $xeFormView.getItemValue(widget) : null,
            onChange: changeEvent
          }, isViewMode ? renderOptions() : []);
        }
      });
    };
  }
});