@kp-ui/lowcode-pc 1.0.0-alpha.1

package/assets/useField.mjs

@@ -0,0 +1,573 @@
+import { inject, ref, getCurrentInstance, computed, toRaw, onMounted, onBeforeUnmount } from "vue";
+import { get, eq, isArray } from "lodash-es";
+import { useExecFunction } from "tmgc2-share";
+import { a as useAppRef, b as useEmitter, c as useI18n, F as FormValidators, d as deepClone } from "./install.mjs";
+function useField(props, isInitModelValue = true) {
+  const formConfig = inject("formConfig", ref({}));
+  const formModel = inject("formData", ref({}));
+  const getReadMode = inject("getReadMode", () => false);
+  const isSubFormField = inject("isSubFormField", false);
+  const getSubFormName = inject("getSubFormName", () => "");
+  const designState = inject("designState", false);
+  const { registerToRefList, getWidgetRef, getFormRef, unregisterFromRefList } = useAppRef();
+  const { executeFunction, asyncExecuteFunction } = useExecFunction();
+  const { i18nt, i18n2t } = useI18n();
+  const { field } = props;
+  const fieldEditor = ref(null);
+  const oldFieldValue = ref(null);
+  const fieldReadonlyFlag = ref(false);
+  const loading = ref(false);
+  const rules = ref([]);
+  const uploadData = ref({});
+  const customToolbar = ref(null);
+  const instance = getCurrentInstance();
+  const { dispatch } = useEmitter();
+  const size = computed(() => {
+    var _a;
+    if ((_a = field == null ? void 0 : field.options) == null ? void 0 : _a.size) {
+      return field.options.size;
+    }
+    return formConfig.value.size || "middle";
+  });
+  const subFormName = computed(() => {
+    return getSubFormName ? getSubFormName() : "";
+  });
+  const fieldModel = computed({
+    get() {
+      return get(formModel.value, getPropName.value);
+    },
+    set(value) {
+      syncUpdateFormModel(value);
+    }
+  });
+  const subFormData = computed(() => formModel.value[subFormName.value]);
+  const isReadMode = computed(() => {
+    return getReadMode() ? true : fieldReadonlyFlag.value;
+  });
+  const handleHidden = computed(() => {
+    if (designState) {
+      return false;
+    }
+    const { onHidden, hidden } = props.field.options;
+    if (hidden) return true;
+    if (onHidden) {
+      try {
+        const result = executeFunction({
+          functionBody: onHidden
+        });
+        if (typeof result === "boolean") {
+          return result;
+        } else {
+          return false;
+        }
+      } catch {
+        return false;
+      }
+    }
+    return false;
+  });
+  const handleDisabled = computed(() => {
+    if (designState) {
+      return false;
+    }
+    const { onDisabled, disabled } = props.field.options;
+    if (disabled) return true;
+    if (onDisabled) {
+      try {
+        const result = executeFunction({
+          functionBody: onDisabled
+        });
+        if (typeof result === "boolean") {
+          return result;
+        } else {
+          return false;
+        }
+      } catch (error) {
+        console.log({ error });
+        return false;
+      }
+    }
+    return false;
+  });
+  const findInArray = (arrayObject, element) => {
+    if (!Array.isArray(arrayObject)) {
+      return -1;
+    }
+    let foundIdx = -1;
+    arrayObject.forEach((aItem, aIdx) => {
+      if (aItem === element) {
+        foundIdx = aIdx;
+      }
+    });
+    return foundIdx;
+  };
+  const getPropName = computed(() => {
+    if (isSubFormField && !designState) {
+      return subFormName.value + "." + props.subFormRowIndex + "." + props.field.options.name;
+    } else {
+      return props.field.options.name;
+    }
+  });
+  async function handleOnCreated() {
+    if (designState) {
+      return;
+    }
+    if (props.field.options.onCreated) {
+      await asyncExecuteFunction({
+        functionBody: props.field.options.onCreated
+      });
+    }
+  }
+  async function handleOnMounted() {
+    if (designState) {
+      return;
+    }
+    if (props.field.options.onMounted) {
+      await asyncExecuteFunction({
+        functionBody: props.field.options.onMounted
+      });
+    }
+  }
+  const refreshDefaultValue = () => {
+    fieldModel.value = props.field.options.defaultValue;
+  };
+  const clearFieldRules = () => {
+    if (!props.field.formItemFlag) {
+      return;
+    }
+    rules.value.splice(0, rules.value.length);
+  };
+  const buildFieldRules = () => {
+    if (!(props == null ? void 0 : props.field.formItemFlag) || (props == null ? void 0 : props.field.options.hidden)) {
+      return;
+    }
+    rules.value.splice(0, rules.value.length);
+    if (props.field.options.required) {
+      rules.value.push({
+        required: true,
+        // trigger: ['blur', 'change'],
+        trigger: [
+          "blur"
+        ],
+        message: props.field.options.requiredHint || i18nt("render.hint.fieldRequired")
+      });
+    }
+    if (props.field.options.validation) {
+      const vldName = props.field.options.validation;
+      if (FormValidators[vldName]) {
+        rules.value.push({
+          validator: FormValidators[vldName],
+          trigger: ["blur", "change"],
+          label: props.field.options.label,
+          errorMsg: props.field.options.validationHint
+        });
+      } else {
+        rules.value.push({
+          validator: FormValidators["regExp"],
+          trigger: ["blur", "change"],
+          regExp: vldName,
+          label: props.field.options.label,
+          errorMsg: props.field.options.validationHint
+        });
+      }
+    }
+    if (props.field.options.onValidate) {
+      const customFn = (rule, value) => {
+        return executeFunction({
+          functionBody: props.field.options.onValidate,
+          params: { rule, value },
+          keys: ["rule", "value"]
+        });
+      };
+      rules.value.push({
+        validator: customFn,
+        trigger: ["blur"],
+        label: props.field.options.label
+      });
+    }
+  };
+  const disableChangeValidate = () => {
+    if (!rules.value) {
+      return;
+    }
+    rules.value.forEach((rule) => {
+      if (rule.trigger) {
+        rule.trigger.splice(0, rule.trigger.length);
+      }
+    });
+  };
+  const enableChangeValidate = () => {
+    if (!rules.value) {
+      return;
+    }
+    rules.value.forEach((rule) => {
+      if (rule.trigger) {
+        rule.trigger.push("blur");
+        rule.trigger.push("change");
+      }
+    });
+  };
+  const disableOptionOfList = (optionList, optionValue) => {
+    if (optionList && optionList.length > 0) {
+      optionList.forEach((opt) => {
+        if (opt.value === optionValue) {
+          opt.disabled = true;
+        }
+      });
+    }
+  };
+  const enableOptionOfList = (optionList, optionValue) => {
+    if (optionList && optionList.length > 0) {
+      optionList.forEach((opt) => {
+        if (opt.value === optionValue) {
+          opt.disabled = false;
+        }
+      });
+    }
+  };
+  const emitFieldDataChange = (newValue, oldValue) => {
+    if (newValue) {
+      newValue = newValue.target ? newValue.target.value : newValue;
+    }
+    if (!instance) return;
+    dispatch("VFormRender", "fieldChange", [
+      props.field.options.name,
+      newValue,
+      oldValue,
+      subFormName.value,
+      props.subFormRowIndex
+    ]);
+  };
+  const syncUpdateFormModel = (value) => {
+    if (designState) {
+      dispatch("VFormDesigner", "fieldChange", {
+        fieldName: getPropName.value,
+        value,
+        field
+      });
+      return;
+    }
+    dispatch("VFormRender", "fieldValidation", [getPropName.value]);
+    const oldValue = toRaw(fieldModel.value);
+    dispatch("VFormRender", "fieldChange", {
+      fieldName: getPropName.value,
+      value,
+      oldValue,
+      field
+    });
+    handleOnChange(value, oldValue);
+  };
+  const handleFocusCustomEvent = (event) => {
+    if (designState) {
+      return;
+    }
+    oldFieldValue.value = deepClone(fieldModel.value);
+    if (props.field.options.onFocus) {
+      executeFunction({
+        functionBody: props.field.options.onFocus,
+        params: { event },
+        keys: ["event"]
+      });
+    }
+  };
+  const handleBlurCustomEvent = (event) => {
+    if (designState) {
+      return;
+    }
+    if (props.field.options.onBlur) {
+      executeFunction({
+        functionBody: props.field.options.onBlur,
+        params: { event },
+        keys: ["event"]
+      });
+    }
+  };
+  const emitAppendButtonClick = () => {
+    if (designState) {
+      return;
+    }
+    if (props.field.options.onAppendButtonClick) {
+      executeFunction({
+        functionBody: props.field.options.onAppendButtonClick
+      });
+    }
+  };
+  const handleOnChange = (val, oldVal) => {
+    if (designState) {
+      return;
+    }
+    if (props.field.options.onChange) {
+      executeFunction({
+        functionBody: props.field.options.onChange,
+        params: {
+          value: val,
+          oldValue: oldVal,
+          subFormData: subFormData.value,
+          rowId: props.subFormRowId
+        },
+        keys: ["value", "oldValue", "subFormData", "rowId"]
+      });
+    }
+  };
+  const onClick = async () => {
+    if (designState) {
+      return;
+    }
+    if (props.field.options.onClick) {
+      return await asyncExecuteFunction({
+        functionBody: props.field.options.onClick
+      });
+    }
+  };
+  const handleClickIcon = async () => {
+    if (designState) {
+      return;
+    }
+    if (handleDisabled.value) {
+      return;
+    }
+    if (field.options.onClickIcon) {
+      await asyncExecuteFunction({
+        functionBody: field.options.onClickIcon
+      });
+    }
+  };
+  const getFieldEditor = () => {
+    return fieldEditor.value;
+  };
+  const showFileList = (list) => {
+    if (typeof list === "string") {
+      list = JSON.parse(list);
+    }
+    if (!isArray(list)) return [];
+    const res = list.map((item, uid) => ({
+      ...item,
+      name: item.fileName,
+      uid
+    }));
+    return res;
+  };
+  const setValue = (newValue, disableChangeEvent = false) => {
+    if (newValue) {
+      newValue = newValue.target ? newValue.target.value : newValue;
+    }
+    if (eq(fieldModel.value, newValue)) return;
+    const oldValue = deepClone(fieldModel.value);
+    if (props.field.type === "file-upload") {
+      newValue = showFileList(newValue || []);
+    } else if (props.field.type === "code-editor") {
+      const fieldEditor2 = getFieldEditor();
+      if (fieldEditor2) {
+        fieldEditor2.setValue(newValue);
+      }
+    }
+    fieldModel.value = newValue;
+    if (!disableChangeEvent) {
+      emitFieldDataChange(newValue, oldValue);
+    }
+  };
+  const getValue = () => {
+    return fieldModel.value;
+  };
+  const resetField = () => {
+    const defaultValue = props.field.options.defaultValue;
+    setValue(defaultValue);
+    if (props.field.type === "picture-upload" || props.field.type === "file-upload") {
+      fieldModel.value.splice(0, fieldModel.value.length);
+    }
+  };
+  const setReadonly = (flag) => {
+    props.field.options.readonly = flag;
+  };
+  const setDisabled = (flag) => {
+    props.field.options.disabled = flag;
+  };
+  const setAppendButtonVisible = (flag) => {
+    props.field.options.appendButton = flag;
+  };
+  const setAppendButtonDisabled = (flag) => {
+    props.field.options.appendButtonDisabled = flag;
+  };
+  const setHidden = (flag) => {
+    props.field.options.hidden = flag;
+    if (flag) {
+      clearFieldRules();
+    } else {
+      buildFieldRules();
+    }
+  };
+  const setRequired = (flag) => {
+    props.field.options.required = flag;
+    buildFieldRules();
+    if (!designState && !flag) {
+      clearValidate();
+    }
+  };
+  const clearValidate = () => {
+    if (designState) {
+      return;
+    }
+    getFormRef().clearValidate(getPropName.value);
+  };
+  const getVfCtx = () => {
+    return getFormRef().vfCtx;
+  };
+  const setLabel = (newLabel) => {
+    props.field.options.label = newLabel;
+  };
+  const focus = () => {
+    const fieldEditor2 = getFieldEditor();
+    if (fieldEditor2 && fieldEditor2.focus) {
+      fieldEditor2.focus();
+    }
+  };
+  const setUploadData = (name, value) => {
+    uploadData.value[name] = value;
+  };
+  const setReadMode = (readonlyFlag = true) => {
+    fieldReadonlyFlag.value = readonlyFlag;
+  };
+  const addCssClass = (className) => {
+    if (!props.field.options.customClass) {
+      props.field.options.customClass = [className];
+    } else {
+      props.field.options.customClass.push(className);
+    }
+  };
+  const customClass = computed(() => props.field.options.customClass);
+  const removeCssClass = (className) => {
+    if (!props.field.options.customClass) {
+      return;
+    }
+    let foundIdx = -1;
+    props.field.options.customClass.map((cc, idx) => {
+      if (cc === className) {
+        foundIdx = idx;
+      }
+    });
+    if (foundIdx > -1) {
+      props.field.options.customClass.splice(foundIdx, 1);
+    }
+  };
+  const getEl = () => {
+    var _a;
+    return (_a = fieldEditor.value) == null ? void 0 : _a.$el;
+  };
+  const setWidgetOption = (optionName, optionValue) => {
+    props.field.options[optionName] = optionValue;
+  };
+  const options = computed({
+    get() {
+      return props.field.options;
+    },
+    set(value) {
+      props.field.options = value;
+    }
+  });
+  const initFieldModel = () => {
+    const defaultValue = typeof props.field.options.defaultValue === "undefined" ? "" : props.field.options.defaultValue;
+    dispatch("VFormRender", "fieldChange", {
+      fieldName: getPropName.value,
+      value: defaultValue,
+      oldValue: toRaw(fieldModel.value),
+      field
+    });
+  };
+  onMounted(async () => {
+    if (isInitModelValue) {
+      initFieldModel();
+    }
+    await registerToRefList();
+    await handleOnCreated();
+    await handleOnMounted();
+    buildFieldRules();
+  });
+  onBeforeUnmount(() => {
+    unregisterFromRefList();
+  });
+  const defineExposed = {
+    i18nt,
+    options,
+    proxy: instance == null ? void 0 : instance.proxy,
+    field,
+    widget: field,
+    fieldModel,
+    fieldEditor,
+    isReadMode,
+    setWidgetOption,
+    setReadonly,
+    setDisabled,
+    getVfCtx,
+    setLabel,
+    getEl,
+    setReadMode,
+    resetField,
+    setValue,
+    getValue,
+    getFieldEditor,
+    getFormRef,
+    getWidgetRef,
+    setHidden,
+    addCssClass,
+    removeCssClass,
+    setRequired,
+    clearValidate,
+    focus
+  };
+  return {
+    asyncExecuteFunction,
+    executeFunction,
+    options,
+    customClass,
+    fieldEditor,
+    // 状态
+    fieldModel,
+    oldFieldValue,
+    fieldReadonlyFlag,
+    loading,
+    rules,
+    uploadData,
+    designState,
+    customToolbar,
+    i18nt,
+    i18n2t,
+    size,
+    field,
+    // 计算属性
+    formConfig,
+    subFormName,
+    formModel,
+    isReadMode,
+    // 方法
+    handleHidden,
+    handleDisabled,
+    findInArray,
+    getPropName,
+    refreshDefaultValue,
+    clearFieldRules,
+    buildFieldRules,
+    disableChangeValidate,
+    enableChangeValidate,
+    disableOptionOfList,
+    enableOptionOfList,
+    emitFieldDataChange,
+    syncUpdateFormModel,
+    handleFocusCustomEvent,
+    handleBlurCustomEvent,
+    emitAppendButtonClick,
+    handleOnChange,
+    onClick,
+    handleClickIcon,
+    getFieldEditor,
+    showFileList,
+    setAppendButtonVisible,
+    setAppendButtonDisabled,
+    focus,
+    setUploadData,
+    isSubFormField,
+    defineExposed
+  };
+}
+export {
+  useField as u
+};