plus-pro-components/es/components/form-item/src/index.vue2.mjs

Page level components developed based on Element Plus.

import { defineComponent, ref, computed, inject, unref, watch, openBlock, createBlock, mergeProps, createSlots, withCtx, createElementBlock, Fragment, createCommentVNode, renderSlot, renderList, resolveDynamicComponent, normalizeProps, createTextVNode, toDisplayString, guardReactiveProps, createElementVNode, createVNode } from 'vue';
import { getLabel, versionIsLessThan260, getCustomProps, getFieldSlotName, getLabelSlotName, getTooltip } from '../../utils/index.mjs';
import { QuestionFilled } from '@element-plus/icons-vue';
import '../../../hooks/index.mjs';
import { PlusRender } from '../../render/index.mjs';
import { ElFormItem, ElTooltip, ElIcon, ElInput, ElSelect, ElOption, ElText, ElDivider } from 'element-plus';
import '../../../constants/index.mjs';
import { getFieldComponent, hasFieldComponent } from './form-item.mjs';
import { useLocale } from '../../../hooks/useLocale.mjs';
import { useGetOptions } from '../../../hooks/useGetOptions.mjs';
import { TableFormFieldRefInjectionKey, TableFormRowInfoInjectionKey, ValueIsArrayList, DatePickerValueIsArrayList, ValueIsNumberList } from '../../../constants/form.mjs';
import { isArray, isDate, isFunction } from '../../utils/is.mjs';

const _hoisted_1 = { class: "el-form-item__error" };
const _hoisted_2 = { class: "plus-form-item__label" };
var _sfc_main = /* @__PURE__ */ defineComponent({
  ...{
    name: "PlusFormItem"
  },
  __name: "index",
  props: {
    modelValue: { default: "" },
    hasLabel: { default: true },
    label: { default: "" },
    prop: {},
    fieldProps: { default: () => ({}) },
    valueType: { default: void 0 },
    options: { default: () => [] },
    formItemProps: { default: () => ({}) },
    renderField: { default: void 0 },
    renderLabel: { default: void 0 },
    tooltip: { default: "" },
    fieldSlots: { default: () => ({}) },
    fieldChildrenSlot: { default: void 0 },
    renderErrorMessage: { default: void 0 },
    optionsMap: { default: void 0 },
    index: { default: 0 },
    clearable: { type: Boolean, default: true }
  },
  emits: ["update:modelValue", "change"],
  setup(__props, { expose: __expose, emit: __emit }) {
    const ElFormItem$1 = ElFormItem;
    const ElTooltip$1 = ElTooltip;
    const ElIcon$1 = ElIcon;
    const ElInput$1 = ElInput;
    const ElSelect$1 = ElSelect;
    const ElOption$1 = ElOption;
    const props = __props;
    const emit = __emit;
    const { t } = useLocale();
    const { customOptions, customOptionsIsReady } = useGetOptions(props);
    const formItemInstance = ref();
    const fieldInstance = ref();
    const customFormItemProps = ref({});
    const customFieldProps = ref({});
    const state = ref();
    const customFieldPropsIsReady = ref(false);
    const valueIsReady = ref(false);
    const labelValue = computed(() => getLabel(props.label));
    const formFieldRefs = inject(TableFormFieldRefInjectionKey, {});
    const tableRowInfo = inject(TableFormRowInfoInjectionKey, {});
    const params = computed(() => ({
      ...props,
      ...unref(tableRowInfo),
      label: labelValue.value,
      fieldProps: customFieldProps.value,
      formItemProps: customFormItemProps.value,
      options: customOptions.value
    }));
    const isArrayValue = computed(() => {
      var _a, _b, _c, _d, _e, _f;
      if (props.valueType === "cascader" && ((_b = (_a = customFieldProps.value) == null ? void 0 : _a.props) == null ? void 0 : _b.emitPath) === false) {
        return false;
      }
      if (ValueIsArrayList.includes(props.valueType)) {
        return true;
      }
      if (props.valueType === "select" && ((_c = customFieldProps.value) == null ? void 0 : _c.multiple) === true) {
        return true;
      }
      if (props.valueType === "date-picker" && DatePickerValueIsArrayList.includes((_d = customFieldProps.value) == null ? void 0 : _d.type)) {
        return true;
      }
      if (props.valueType === "time-picker" && ((_e = customFieldProps.value) == null ? void 0 : _e.isRange) === true) {
        return true;
      }
      if (props.valueType === "tree-select" && ((_f = customFieldProps.value) == null ? void 0 : _f.multiple) === true) {
        return true;
      }
      return false;
    });
    const isNumberValue = computed(() => {
      if (ValueIsNumberList.includes(props.valueType)) {
        return true;
      }
      return false;
    });
    const setValue = (val) => {
      if (isArrayValue.value) {
        if (isArray(val)) {
          const [start, end] = val;
          if (isDate(start) || isDate(end)) {
            state.value = [String(start), String(end)];
          } else {
            state.value = val;
          }
        } else {
          state.value = [];
        }
      } else if (isNumberValue.value) {
        state.value = val === null || val === void 0 || val === "" ? null : typeof val === "string" ? Number(val) : val;
      } else if (isDate(val)) {
        state.value = String(val);
      } else {
        state.value = val;
      }
      valueIsReady.value = true;
    };
    const commonProps = computed(() => {
      const { hasOptions, hasSelectEvent, props: componentProps } = getFieldComponent(props.valueType);
      return {
        ...hasOptions ? {
          options: customOptions.value
        } : null,
        ...hasSelectEvent ? {
          onSelect: handleSelect
        } : null,
        ...componentProps,
        placeholder: (componentProps == null ? void 0 : componentProps.placeholder) ? t(componentProps == null ? void 0 : componentProps.placeholder) + labelValue.value : t("plus.field.pleaseSelect") + labelValue.value,
        ...props.valueType === "date-picker" ? {
          startPlaceholder: (componentProps == null ? void 0 : componentProps.startPlaceholder) ? t(componentProps == null ? void 0 : componentProps.startPlaceholder) : "",
          endPlaceholder: (componentProps == null ? void 0 : componentProps.startPlaceholder) ? t(componentProps == null ? void 0 : componentProps.endPlaceholder) : ""
        } : null,
        ...customFieldProps.value
      };
    });
    const getChildrenProps = (item) => {
      return {
        ...props.valueType === "select" ? {
          label: item.label,
          value: item.value
        } : versionIsLessThan260 ? {
          label: item.value
        } : {
          label: item.label,
          value: item.value
        },
        ...item.fieldItemProps
      };
    };
    const index = computed(() => {
      var _a;
      return (_a = params.value.index) != null ? _a : props.index;
    });
    watch(
      () => [props.formItemProps, state.value],
      () => {
        getCustomProps(props.formItemProps, state.value, unref(params), unref(index), "formItemProps").then((data) => {
          customFormItemProps.value = data;
        }).catch((err) => {
          throw err;
        });
      },
      {
        immediate: true,
        deep: true,
        flush: "post"
      }
    );
    watch(
      () => [props.fieldProps, state.value],
      () => {
        getCustomProps(props.fieldProps, state.value, unref(params), unref(index), "fieldProps").then((data) => {
          customFieldProps.value = data;
          customFieldPropsIsReady.value = true;
        }).catch((err) => {
          throw err;
        });
      },
      {
        immediate: true,
        deep: true,
        flush: "post"
      }
    );
    watch(
      computed(() => [props.modelValue, customFieldPropsIsReady.value, customOptionsIsReady.value]),
      ([val, fieldPropsIsReady, optionsIsReady]) => {
        if (fieldPropsIsReady && optionsIsReady) {
          setValue(val);
        }
      },
      {
        immediate: true,
        flush: "post"
      }
    );
    const handleChange = (val) => {
      emit("update:modelValue", val);
      emit("change", val);
    };
    const handleSelect = ({ value }) => {
      handleChange(value);
    };
    watch(fieldInstance, () => {
      formFieldRefs.value = {
        fieldInstance: fieldInstance.value,
        valueIsReady
      };
    });
    __expose({
      formItemInstance,
      fieldInstance
    });
    return (_ctx, _cache) => {
      var _a;
      return valueIsReady.value ? (openBlock(), createBlock(unref(ElFormItem$1), mergeProps({
        key: 0,
        ref_key: "formItemInstance",
        ref: formItemInstance,
        label: _ctx.hasLabel ? labelValue.value : "",
        prop: _ctx.prop,
        class: "plus-form-item"
      }, customFormItemProps.value, {
        "label-width": _ctx.hasLabel ? (_a = customFormItemProps.value) == null ? void 0 : _a.labelWidth : "0px"
      }), createSlots({
        default: withCtx(() => [
          _ctx.renderField && unref(isFunction)(_ctx.renderField) ? (openBlock(), createElementBlock(
            Fragment,
            { key: 0 },
            [
              valueIsReady.value ? (openBlock(), createBlock(unref(PlusRender), {
                key: 0,
                render: _ctx.renderField,
                params: params.value,
                "callback-value": state.value,
                "custom-field-props": customFieldProps.value,
                "render-type": "form",
                "handle-change": handleChange
              }, null, 8, ["render", "params", "callback-value", "custom-field-props"])) : createCommentVNode("v-if", true)
            ],
            64
            /* STABLE_FRAGMENT */
          )) : _ctx.$slots[unref(getFieldSlotName)(_ctx.prop)] ? renderSlot(_ctx.$slots, unref(getFieldSlotName)(_ctx.prop), mergeProps({ key: 1 }, params.value, { column: props })) : _ctx.valueType === "select" && customFieldProps.value.multiple === true ? (openBlock(), createBlock(unref(ElSelect$1), mergeProps({
            key: 2,
            ref_key: "fieldInstance",
            ref: fieldInstance,
            modelValue: state.value,
            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => state.value = $event),
            placeholder: unref(t)("plus.field.pleaseSelect") + labelValue.value,
            class: "plus-form-item-field",
            clearable: _ctx.clearable
          }, customFieldProps.value, { "onUpdate:modelValue": handleChange }), createSlots({
            default: withCtx(() => [
              (openBlock(true), createElementBlock(
                Fragment,
                null,
                renderList(unref(customOptions), (item) => {
                  return openBlock(), createBlock(unref(ElOption$1), mergeProps({
                    key: item.label,
                    label: item.label,
                    value: item.value
                  }, item.fieldItemProps), {
                    default: withCtx(() => [
                      unref(isFunction)(item.fieldSlot) ? (openBlock(), createBlock(
                        resolveDynamicComponent(item.fieldSlot),
                        normalizeProps(mergeProps({ key: 0 }, item)),
                        null,
                        16
                        /* FULL_PROPS */
                      )) : unref(isFunction)(_ctx.fieldChildrenSlot) ? (openBlock(), createBlock(
                        resolveDynamicComponent(_ctx.fieldChildrenSlot),
                        normalizeProps(mergeProps({ key: 1 }, item)),
                        null,
                        16
                        /* FULL_PROPS */
                      )) : (openBlock(), createElementBlock(
                        Fragment,
                        { key: 2 },
                        [
                          createTextVNode(
                            toDisplayString(item.label),
                            1
                            /* TEXT */
                          )
                        ],
                        64
                        /* STABLE_FRAGMENT */
                      ))
                    ]),
                    _: 2
                    /* DYNAMIC */
                  }, 1040, ["label", "value"]);
                }),
                128
                /* KEYED_FRAGMENT */
              ))
            ]),
            _: 2
            /* DYNAMIC */
          }, [
            renderList(_ctx.fieldSlots, (fieldSlot, key) => {
              return {
                name: key,
                fn: withCtx((data) => [
                  (openBlock(), createBlock(
                    resolveDynamicComponent(fieldSlot),
                    normalizeProps(guardReactiveProps(data)),
                    null,
                    16
                    /* FULL_PROPS */
                  ))
                ])
              };
            })
          ]), 1040, ["modelValue", "placeholder", "clearable"])) : unref(hasFieldComponent)(_ctx.valueType) ? (openBlock(), createElementBlock(
            Fragment,
            { key: 3 },
            [
              createCommentVNode(" \u7EDF\u4E00\u5904\u7406 "),
              createCommentVNode(" has-children  "),
              unref(getFieldComponent)(_ctx.valueType).children ? (openBlock(), createBlock(resolveDynamicComponent(unref(getFieldComponent)(_ctx.valueType).component), mergeProps({
                key: 0,
                ref_key: "fieldInstance",
                ref: fieldInstance,
                modelValue: state.value,
                "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => state.value = $event),
                class: "plus-form-item-field",
                clearable: _ctx.clearable
              }, commonProps.value, { "onUpdate:modelValue": handleChange }), createSlots({
                default: withCtx(() => [
                  (openBlock(true), createElementBlock(
                    Fragment,
                    null,
                    renderList(unref(customOptions), (item) => {
                      return openBlock(), createBlock(
                        resolveDynamicComponent(unref(getFieldComponent)(_ctx.valueType).children),
                        mergeProps({
                          key: item.label
                        }, getChildrenProps(item)),
                        {
                          default: withCtx(() => [
                            unref(isFunction)(item.fieldSlot) ? (openBlock(), createBlock(resolveDynamicComponent(item.fieldSlot), mergeProps({
                              key: 0,
                              "model-value": state.value,
                              column: params.value
                            }, item), null, 16, ["model-value", "column"])) : unref(isFunction)(_ctx.fieldChildrenSlot) ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.fieldChildrenSlot), mergeProps({
                              key: 1,
                              "model-value": state.value,
                              column: params.value
                            }, item), null, 16, ["model-value", "column"])) : (openBlock(), createElementBlock(
                              Fragment,
                              { key: 2 },
                              [
                                createTextVNode(
                                  toDisplayString(item.label),
                                  1
                                  /* TEXT */
                                )
                              ],
                              64
                              /* STABLE_FRAGMENT */
                            ))
                          ]),
                          _: 2
                          /* DYNAMIC */
                        },
                        1040
                        /* FULL_PROPS, DYNAMIC_SLOTS */
                      );
                    }),
                    128
                    /* KEYED_FRAGMENT */
                  ))
                ]),
                _: 2
                /* DYNAMIC */
              }, [
                renderList(_ctx.fieldSlots, (fieldSlot, key) => {
                  return {
                    name: key,
                    fn: withCtx((data) => [
                      (openBlock(), createBlock(resolveDynamicComponent(fieldSlot), mergeProps({
                        value: state.value,
                        column: params.value
                      }, data), null, 16, ["value", "column"]))
                    ])
                  };
                })
              ]), 1040, ["modelValue", "clearable"])) : (openBlock(), createElementBlock(
                Fragment,
                { key: 1 },
                [
                  createCommentVNode(" no-children  "),
                  (openBlock(), createBlock(resolveDynamicComponent(unref(getFieldComponent)(_ctx.valueType).component), mergeProps({
                    ref_key: "fieldInstance",
                    ref: fieldInstance,
                    modelValue: state.value,
                    "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => state.value = $event),
                    class: "plus-form-item-field",
                    clearable: _ctx.clearable,
                    "field-children-slot": _ctx.fieldChildrenSlot
                  }, commonProps.value, { "onUpdate:modelValue": handleChange }), createSlots({
                    _: 2
                    /* DYNAMIC */
                  }, [
                    renderList(_ctx.fieldSlots, (fieldSlot, key) => {
                      return {
                        name: key,
                        fn: withCtx((data) => [
                          (openBlock(), createBlock(resolveDynamicComponent(fieldSlot), mergeProps({
                            "model-value": state.value,
                            column: params.value
                          }, data), null, 16, ["model-value", "column"]))
                        ])
                      };
                    })
                  ]), 1040, ["modelValue", "clearable", "field-children-slot"]))
                ],
                2112
                /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
              ))
            ],
            64
            /* STABLE_FRAGMENT */
          )) : _ctx.valueType === "text" ? (openBlock(), createBlock(
            unref(ElText),
            mergeProps({
              key: 4,
              ref_key: "fieldInstance",
              ref: fieldInstance,
              class: "plus-form-item-field"
            }, customFieldProps.value),
            {
              default: withCtx(() => [
                createTextVNode(
                  toDisplayString(state.value),
                  1
                  /* TEXT */
                )
              ]),
              _: 1
              /* STABLE */
            },
            16
            /* FULL_PROPS */
          )) : _ctx.valueType === "divider" ? (openBlock(), createBlock(
            unref(ElDivider),
            mergeProps({
              key: 5,
              ref_key: "fieldInstance",
              ref: fieldInstance,
              class: "plus-form-item-field"
            }, customFieldProps.value),
            {
              default: withCtx(() => [
                createTextVNode(
                  toDisplayString(state.value),
                  1
                  /* TEXT */
                )
              ]),
              _: 1
              /* STABLE */
            },
            16
            /* FULL_PROPS */
          )) : (openBlock(), createBlock(unref(ElInput$1), mergeProps({
            key: 6,
            ref_key: "fieldInstance",
            ref: fieldInstance,
            modelValue: state.value,
            "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => state.value = $event),
            class: "plus-form-item-field",
            placeholder: unref(t)("plus.field.pleaseEnter") + labelValue.value,
            autocomplete: "off",
            clearable: _ctx.clearable
          }, customFieldProps.value, { "onUpdate:modelValue": handleChange }), createSlots({
            _: 2
            /* DYNAMIC */
          }, [
            renderList(_ctx.fieldSlots, (fieldSlot, key) => {
              return {
                name: key,
                fn: withCtx((data) => [
                  (openBlock(), createBlock(resolveDynamicComponent(fieldSlot), mergeProps({
                    "model-value": state.value,
                    column: params.value
                  }, data), null, 16, ["model-value", "column"]))
                ])
              };
            })
          ]), 1040, ["modelValue", "placeholder", "clearable"]))
        ]),
        _: 2
        /* DYNAMIC */
      }, [
        unref(isFunction)(_ctx.renderErrorMessage) ? {
          name: "error",
          fn: withCtx(({ error }) => [
            createElementVNode("div", _hoisted_1, [
              (openBlock(), createBlock(resolveDynamicComponent(_ctx.renderErrorMessage), mergeProps(props, {
                value: state.value,
                error,
                label: labelValue.value
              }), null, 16, ["value", "error", "label"]))
            ])
          ]),
          key: "0"
        } : void 0,
        _ctx.hasLabel ? {
          name: "label",
          fn: withCtx(({ label: currentLabel }) => [
            createElementVNode("span", _hoisted_2, [
              _ctx.renderLabel && unref(isFunction)(_ctx.renderLabel) ? (openBlock(), createElementBlock(
                Fragment,
                { key: 0 },
                [
                  valueIsReady.value ? (openBlock(), createBlock(unref(PlusRender), {
                    key: 0,
                    render: _ctx.renderLabel,
                    params: params.value,
                    "callback-value": currentLabel,
                    "custom-field-props": customFieldProps.value
                  }, null, 8, ["render", "params", "callback-value", "custom-field-props"])) : createCommentVNode("v-if", true)
                ],
                64
                /* STABLE_FRAGMENT */
              )) : renderSlot(_ctx.$slots, unref(getLabelSlotName)(_ctx.prop), normalizeProps(mergeProps({ key: 1 }, params.value)), () => [
                createTextVNode(
                  toDisplayString(currentLabel),
                  1
                  /* TEXT */
                )
              ]),
              _ctx.tooltip ? (openBlock(), createBlock(
                unref(ElTooltip$1),
                mergeProps({
                  key: 2,
                  placement: "top"
                }, unref(getTooltip)(_ctx.tooltip)),
                {
                  default: withCtx(() => [
                    renderSlot(_ctx.$slots, "tooltip-icon", {}, () => [
                      createVNode(unref(ElIcon$1), {
                        class: "plus-table-column__label__icon",
                        size: 16
                      }, {
                        default: withCtx(() => [
                          createVNode(unref(QuestionFilled))
                        ]),
                        _: 1
                        /* STABLE */
                      })
                    ])
                  ]),
                  _: 3
                  /* FORWARDED */
                },
                16
                /* FULL_PROPS */
              )) : createCommentVNode("v-if", true)
            ])
          ]),
          key: "1"
        } : void 0
      ]), 1040, ["label", "prop", "label-width"])) : createCommentVNode("v-if", true);
    };
  }
});

export { _sfc_main as default };