@opentiny/vue-renderless/form-item/vue.js

An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.

import "../chunk-G2ADBYYC.js";
import {
  validate,
  clearValidate,
  resetField,
  getRules,
  getFilteredRule,
  onFieldBlur,
  onFieldChange,
  updateComputedLabelWidth,
  addValidateEvents,
  removeValidateEvents,
  mounted,
  unmounted,
  watchError,
  watchValidateStatus,
  computedLabelStyle,
  computedValueStyle,
  computedContentStyle,
  computedForm,
  computedIsRequired,
  computedFieldValue,
  computedGetValidateType,
  computedValidateIcon,
  computedIsErrorInline,
  computedIsErrorBlock,
  updateTip,
  wrapValidate,
  getDisplayedValue,
  clearDisplayedValue,
  handleLabelMouseenter,
  handleMouseenter,
  handleMouseleave
} from "./index";
import { nanoid } from "@opentiny/utils";
const api = [
  "state",
  "validate",
  "validateOrigin",
  "clearValidate",
  "resetField",
  "getRules",
  "getFilteredRule",
  "onFieldBlur",
  "onFieldChange",
  "updateComputedLabelWidth",
  "addValidateEvents",
  "removeValidateEvents",
  "updateTip",
  "getDisplayedValue",
  "handleLabelMouseenter",
  "handleMouseenter",
  "handleMouseleave"
];
const initState = ({
  reactive,
  computed,
  api: api2,
  mode,
  inject,
  props
}) => {
  const uniqueId = nanoid.api.nanoid(8);
  const errorId = `tiny-form-item-error-${uniqueId}`;
  const labelId = `tiny-form-item-label-${uniqueId}`;
  const state = reactive({
    mode,
    validateState: "",
    validateMessage: "",
    validateDisabled: false,
    validator: {},
    isNested: false,
    computedLabelWidth: "",
    initialValue: null,
    canShowTip: false,
    // 兼容 2.0 validation 的 required
    validationRequired: false,
    validateType: "text",
    tooltip: "",
    displayedValue: "",
    isBasicComp: false,
    showTooltip: false,
    typeName: "",
    formInstance: inject("form"),
    // 无障碍支持：为错误信息和标签生成唯一 ID
    errorId,
    labelId,
    labelFor: computed(() => props.for || props.prop || ""),
    labelStyle: computed(() => api2.computedLabelStyle()),
    valueStyle: computed(() => api2.computedValueStyle()),
    contentStyle: computed(() => api2.computedContentStyle()),
    form: computed(() => api2.computedForm()),
    fieldValue: computed(() => api2.computedFieldValue()),
    isRequired: computed(() => api2.computedIsRequired()),
    formInline: computed(() => {
      var _a;
      return (_a = state.formInstance) == null ? void 0 : _a.inline;
    }),
    formSize: computed(() => {
      var _a;
      return (_a = state.formInstance) == null ? void 0 : _a.size;
    }),
    formItemSize: computed(() => props.size || state.formSize),
    isDisplayOnly: computed(() => {
      var _a, _b;
      return (_b = (_a = state.formInstance) == null ? void 0 : _a.displayOnly) != null ? _b : false;
    }),
    labelPosition: computed(() => {
      var _a, _b;
      return (_b = (_a = state.formInstance) == null ? void 0 : _a.labelPosition) != null ? _b : "right";
    }),
    hideRequiredAsterisk: computed(() => {
      var _a, _b, _c;
      return (_c = (_b = (_a = state.formInstance) == null ? void 0 : _a.state) == null ? void 0 : _b.hideRequiredAsterisk) != null ? _c : false;
    }),
    labelSuffix: computed(() => {
      var _a, _b;
      return (_b = (_a = state.formInstance) == null ? void 0 : _a.labelSuffix) != null ? _b : "";
    }),
    labelWidth: computed(() => {
      var _a, _b;
      return (_b = (_a = state.formInstance) == null ? void 0 : _a.labelWidth) != null ? _b : "";
    }),
    showMessage: computed(() => {
      var _a, _b;
      return (_b = (_a = state.formInstance) == null ? void 0 : _a.showMessage) != null ? _b : true;
    }),
    sizeClass: computed(() => state.formItemSize),
    getValidateType: computed(() => api2.computedGetValidateType()),
    validateIcon: computed(() => api2.computedValidateIcon()),
    isErrorInline: computed(() => api2.computedIsErrorInline()),
    isErrorBlock: computed(() => api2.computedIsErrorBlock()),
    /**
     * TODO: There is a potential issue here. Need to confirm whether to keep this logic.
     * There does not have disabled prop in form-item, but disabled is used here, I think it is a mistake.
     * If not, need to add disabled prop in form-item component.
     */
    // @ts-expect-error Need to confirm whether to keep this logic
    disabled: computed(() => {
      var _a;
      return ((_a = state.formInstance) == null ? void 0 : _a.disabled) || props.disabled;
    }),
    tooltipType: computed(() => {
      var _a, _b;
      return (_b = (_a = state.formInstance) == null ? void 0 : _a.state.tooltipType) != null ? _b : "normal";
    }),
    // 标记表单项下是否有多个子节点
    isMultiple: false
  });
  return state;
};
const initApi = ({ api: api2, state, dispatch, broadcast, props, constants, vm, t, nextTick, slots }) => {
  const validateOriginFunc = validate({ api: api2, props, state, t });
  Object.assign(api2, {
    state,
    dispatch,
    broadcast,
    watchError: watchError(state),
    updateTip: updateTip({ vm, state }),
    watchValidateStatus: watchValidateStatus(state),
    computedLabelStyle: computedLabelStyle({ props, state }),
    computedValueStyle: computedValueStyle({ props, state }),
    computedContentStyle: computedContentStyle({ props, state }),
    computedForm: computedForm({ constants, vm, state }),
    computedFieldValue: computedFieldValue({ props, state }),
    computedGetValidateType: computedGetValidateType({ props, state }),
    computedValidateIcon: computedValidateIcon({ props, state }),
    computedIsErrorInline: computedIsErrorInline({ props, state }),
    computedIsErrorBlock: computedIsErrorBlock({ props, state }),
    clearValidate: clearValidate(state),
    getRules: getRules({ props, state }),
    updateComputedLabelWidth: updateComputedLabelWidth(state),
    removeValidateEvents: removeValidateEvents(vm),
    unmounted: unmounted({ api: api2, vm, state }),
    mounted: mounted({ api: api2, vm, props, state }),
    computedIsRequired: computedIsRequired({ api: api2, state }),
    resetField: resetField({ api: api2, nextTick, props, state }),
    getFilteredRule: getFilteredRule(api2),
    onFieldBlur: onFieldBlur(api2),
    onFieldChange: onFieldChange({ api: api2, state }),
    addValidateEvents: addValidateEvents({ api: api2, vm, props, state }),
    validateOrigin: validateOriginFunc,
    validate: wrapValidate({ validateFunc: validateOriginFunc, props }),
    getDisplayedValue: getDisplayedValue({ state }),
    clearDisplayedValue: clearDisplayedValue({ state }),
    handleLabelMouseenter: handleLabelMouseenter({ props, state, slots }),
    handleMouseenter: handleMouseenter({ state }),
    handleMouseleave: handleMouseleave(state)
  });
};
const initWatch = ({ watch, api: api2, props, state }) => {
  watch(() => props.error, api2.watchError, { immediate: true });
  watch(() => props.validateStatus, api2.watchValidateStatus);
  watch(() => {
    var _a;
    return (_a = state.formInstance) == null ? void 0 : _a.displayOnly;
  }, api2.clearDisplayedValue);
};
const renderless = (props, { computed, inject, onMounted, onUnmounted, provide, reactive, watch }, { vm, constants, t, nextTick, broadcast, dispatch, mode, slots }) => {
  const api2 = {};
  const state = initState({ reactive, computed, api: api2, mode, inject, props });
  provide("formItem", vm);
  initApi({ api: api2, state, dispatch, broadcast, props, constants, vm, t, nextTick, slots });
  initWatch({ watch, api: api2, props, state });
  onMounted(api2.mounted);
  vm.$on("displayed-value-changed", (param) => {
    api2.getDisplayedValue(param);
  });
  onUnmounted(api2.unmounted);
  return api2;
};
export {
  api,
  renderless
};