@opentiny/vue-renderless 3.13.2 → 3.14.1

package/types/user-head.type.d.ts

@@ -1,2 +1,147 @@
+import { ExtractPropTypes } from 'vue';
+import { ISharedRenderlessFunctionParams, ISharedRenderlessParamUtils } from './shared.type.js';
 
-export { }
+declare const $constants: {
+    ITEM_NAME: string;
+};
+declare const userHeadProps: {
+    _constants: {
+        type: ObjectConstructor;
+        default: () => {
+            ITEM_NAME: string;
+        };
+    };
+    /**
+     * @property {Boolean} [min=false] - 小尺寸模式
+     */
+    min: BooleanConstructor;
+    /**
+     * @property {Boolean} [round=true] - 圆形模式
+     */
+    round: BooleanConstructor;
+    /**
+     * @property {String} [color=#ffffff] - 文字颜色
+     */
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * @property {String} [backgroundColor=#BBBBBB] - 背景色
+     */
+    backgroundColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * @property {String} [type=label] - 头像类型，icon|image|label 可选
+     */
+    type: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    /**
+     * @property {String} - 头像资源
+     * type=icon 时为图标类名，type=label时为字体串，type=image时为资源路径
+     */
+    value: {
+        type: (StringConstructor | ObjectConstructor)[];
+        default: null;
+    };
+    /**
+     * @property {String} - 头像资源
+     * type=icon 时为图标类名，type=label时为字体串，type=image时为资源路径
+     */
+    modelValue: {
+        type: (StringConstructor | ObjectConstructor)[];
+        default: null;
+    };
+    /**
+     * @property {Number} - 消息计数
+     */
+    messageTotal: NumberConstructor;
+    /**
+     * @property {String} [messageType=details] - 消息类型 details|basic 可选
+     */
+    messageType: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    /**
+     * @property {Number} [messageUpperLimit=0] - 消息显示上限
+     */
+    messageUpperLimit: {
+        type: NumberConstructor;
+        default: number;
+    };
+    size: {
+        type: NumberConstructor;
+        default: number;
+    };
+    tiny_mode: StringConstructor;
+    tiny_mode_root: BooleanConstructor;
+    tiny_template: (FunctionConstructor | ObjectConstructor)[];
+    tiny_renderless: FunctionConstructor;
+    tiny_theme: StringConstructor;
+    tiny_chart_theme: ObjectConstructor;
+};
+
+/**
+ * Copyright (c) 2022 - present TinyVue Authors.
+ * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+
+declare const computedStyle: ({ state, props }: Pick<IUserHeadRenderlessParams, 'state' | 'props'>) => () => {
+    fill: string;
+    color: string;
+    backgroundColor: string;
+    backgroundImage: string;
+};
+declare const computedMessage: ({ props }: Pick<IUserHeadRenderlessParams, 'props'>) => () => string;
+declare const computedFontSize: ({ props, state, mode }: Pick<IUserHeadRenderlessParams, 'props' | 'state' | 'mode'>) => () => {
+    fontSize: string;
+};
+declare const computedLabel: ({ state, props }: Pick<IUserHeadRenderlessParams, 'state' | 'props'>) => () => any;
+declare const getInternalValue: ({ props }: Pick<IUserHeadRenderlessParams, 'props'>) => () => string | Record<string, any>;
+
+interface IUserHeadState {
+    internalValue: string | Record<string, any>;
+    label: string;
+    style: ReturnType<ReturnType<typeof computedStyle>>;
+    message: string;
+    fontSize: {
+        fontSize: string;
+    };
+    size: number;
+    color: string;
+    backgroundColor: string;
+}
+type IUserHeadProps = ExtractPropTypes<typeof userHeadProps>;
+type IUserHeadConstants = typeof $constants;
+type IUserHeadRenderlessParams = ISharedRenderlessFunctionParams<IUserHeadConstants> & {
+    api: IUserHeadApi;
+    state: IUserHeadState;
+    props: IUserHeadProps;
+};
+interface IUserHeadApi {
+    state: IUserHeadState;
+    computedLabel: ReturnType<typeof computedLabel>;
+    computedStyle: ReturnType<typeof computedStyle>;
+    computedMessage: ReturnType<typeof computedMessage>;
+    computedFontSize: ReturnType<typeof computedFontSize>;
+    getInternalValue: ReturnType<typeof getInternalValue>;
+    handleClick: (event: Event) => void;
+    mouseEnter: (event: Event) => void;
+}
+type IUserHeadRenderlessParamUtils = ISharedRenderlessParamUtils<IUserHeadConstants>;
+
+export { IUserHeadApi, IUserHeadConstants, IUserHeadProps, IUserHeadRenderlessParamUtils, IUserHeadRenderlessParams, IUserHeadState };

package/types/wizard.type.d.ts

@@ -62,6 +62,7 @@ interface IWizardState {
     doing: string;
     ready: string;
     wait: string;
+    iconYes: 'tiny-icon-yes' | 'tiny-icon-successful';
 }
 type IWizardConstants = typeof $constants;
 type IWizardRenderlessParams = ISharedRenderlessFunctionParams<IWizardConstants> & {

package/upload/index.js

@@ -95,11 +95,8 @@ const uploadFiles = ({
       }
       return folderAry.length < 7;
     });
-  }
-  if (!props.isFolder) {
-    if (!props.multiple) {
-      postFiles = postFiles.slice(0, 1);
-    }
+  } else if (!props.multiple) {
+    postFiles = postFiles.slice(0, 1);
   }
   if (postFiles.length === 0) {
     return;
@@ -147,16 +144,17 @@ const upload = ({ api, props, refs }) => (rawFile) => {
 const abort = ({ state, props, constants }) => (file) => {
   const { reqs } = state;
   const cancel = function(uid) {
-    if (reqs[uid]) {
-      reqs[uid].abort();
+    var _a;
+    if ((_a = reqs[uid]) == null ? void 0 : _a.abort) {
+      reqs[uid].abort("");
     } else if (state.cancelToken[uid]) {
-      state.cancelToken[uid]();
+      state.cancelToken[uid]("");
     }
     delete reqs[uid];
     delete state.cancelToken[uid];
   };
   if (file && file.isLargeFile && file.cancelToken) {
-    file.cancelToken && file.cancelToken.forEach((cancel2) => cancel2());
+    file.cancelToken && file.cancelToken.forEach((cancel2) => cancel2(""));
     delete file.cancelToken;
   } else if (file) {
     let uid = file;
@@ -166,9 +164,9 @@ const abort = ({ state, props, constants }) => (file) => {
     cancel(uid);
   } else {
     const { READY, UPLOADING, FAIL } = constants.FILE_STATUS;
-    Object.keys(reqs).forEach((uid) => cancel(uid));
+    Object.keys(reqs).forEach((uid) => cancel(uid || ""));
     props.fileList.forEach((file2) => {
-      file2.cancelToken && file2.cancelToken.forEach((cancel2) => cancel2());
+      file2.cancelToken && file2.cancelToken.forEach((cancel2) => cancel2(""));
       if ([READY, UPLOADING].includes(file2.status)) {
         file2.status = FAIL;
       }
@@ -265,31 +263,32 @@ const getOptionsOfHwh5 = ({
   uploaderInner,
   uid
 }) => {
-  return {
-    edmAuth: {
-      edmToken: props.edmToken.edmToken,
-      appId: uploaderInner.hwh5.appId
+  const edm = uploaderInner.edm;
+  const params = edm && edm.upload && edm.upload.params || {};
+  return Object.assign(
+    {
+      edmAuth: {
+        edmToken: props.edmToken.edmToken,
+        appId: uploaderInner.hwh5.appId
+      },
+      filePath: rawFile.filePath,
+      progress: 1
     },
-    filePath: rawFile.filePath,
-    progress: 1,
-    onProgress: (data) => {
-      if (props.onProgress) {
+    params,
+    {
+      onProgress: (data) => {
         props.onProgress(data, rawFile);
-      }
-    },
-    onSuccess: (res) => {
-      if (props.onSuccess) {
+      },
+      onSuccess: (res) => {
         props.onSuccess(res, rawFile);
+        delete state.reqs[uid];
+      },
+      onError: (error) => {
+        props.onError(error, rawFile);
+        delete state.reqs[uid];
       }
-      delete state.reqs[uid];
-    },
-    onError: (error) => {
-      if (props.onProgress) {
-        props.onProgress(error, rawFile);
-      }
-      delete state.reqs[uid];
     }
-  };
+  );
 };
 const post = ({
   api,
@@ -325,11 +324,42 @@ const post = ({
     excuteReq(options);
   }
 };
-const handleClick = ({ props, refs }) => ($event, type) => {
-  if (!props.disabled && !props.displayOnly) {
-    props.handleTriggerClick($event, type);
+const handleClick = ({ props, refs, state }) => ($event, type) => {
+  if (props.disabled || props.displayOnly || state.isStopPropagation) {
+    return;
+  }
+  const { uploader, uploadInner } = state;
+  const { encryptConfig = {} } = uploader;
+  const fileUploadVm = uploadInner.$parent;
+  const inputHandler = () => {
+    typeof props.handleTriggerClick === "function" && props.handleTriggerClick($event, type);
+    if (props.isHwh5) {
+      return;
+    }
     refs.input.value = null;
+    state.isStopPropagation = true;
     refs.input.click();
+    state.isStopPropagation = false;
+  };
+  if (typeof uploader.beforeAddFile === "function") {
+    $event.preventDefault();
+    let isPromise;
+    const promise = uploader.beforeAddFile(() => {
+      !isPromise && inputHandler();
+    });
+    isPromise = promise && typeof promise.then === "function";
+    if (isPromise) {
+      promise.then(() => inputHandler()).catch(() => null);
+    } else if (promise) {
+      inputHandler();
+    }
+  } else if (encryptConfig && encryptConfig.enabled && fileUploadVm) {
+    fileUploadVm.state.encryptDialogConfig.show = true;
+    fileUploadVm.state.encryptDialogConfig.selectFileMethod = () => {
+      inputHandler();
+    };
+  } else {
+    inputHandler();
   }
 };
 const handleKeydown = (api) => (event) => {

package/upload/vue.js

@@ -27,17 +27,20 @@ const api = [
   "handleKeydown",
   "handleUpdate"
 ];
-const renderless = (props, { computed, inject, reactive, onMounted, onBeforeUnmount }, { refs, service, t }, { Modal }) => {
+const renderless = (props, { computed, inject, reactive, onMounted, onBeforeUnmount }, { refs, service, t, useBreakpoint }, { Modal }) => {
   const api2 = {};
   const uploader = inject("uploader");
   const constants = uploader.$constants;
+  const { current } = useBreakpoint();
   const state = reactive({
+    currentBreakpoint: current,
     mouseover: false,
     reqs: {},
     uploader,
     accecpt: "",
-    isEdm: computed(() => state.uploader.$refs[constants.FILE_UPLOAD_INNER_TEMPLATE].state.isEdm),
-    openEdmDownload: computed(() => state.uploader.$refs[constants.FILE_UPLOAD_INNER_TEMPLATE].edm.download),
+    uploadInner: computed(() => state.uploader.$refs[constants.FILE_UPLOAD_INNER_TEMPLATE]),
+    isEdm: computed(() => state.uploadInner.state.isEdm),
+    openEdmDownload: computed(() => state.uploadInner.edm.download),
     headers: computed(() => {
       if (state.isEdm) {
         return {
@@ -49,14 +52,15 @@ const renderless = (props, { computed, inject, reactive, onMounted, onBeforeUnmo
     formData: {},
     cancelToken: {},
     updateId: "",
-    updateInput: null
+    updateInput: null,
+    isStopPropagation: false
   });
   Object.assign(api2, {
     state,
     isImage,
     abort: abort({ state, props, constants }),
     getFormData: getFormData({ state, constants, props }),
-    handleClick: handleClick({ props, refs }),
+    handleClick: handleClick({ props, refs, state }),
     onBeforeDestroy: onBeforeDestroy(state),
     handleUpdate: handleUpdate({ state, props }),
     uploadFiles: uploadFiles({ constants, Modal, props, state, t }),

package/upload-dragger/index.js

@@ -13,27 +13,29 @@ const onDrop = ({ emit, props, state }) => (event) => {
     return;
   }
   const notAcceptedFiles = [];
-  const filteredFile = [].slice.call(files).filter((file) => {
-    const { type, name } = file;
-    const extension = name.includes(".") ? `.${name.split(".").pop()}` : "";
-    const baseType = type.replace(/\/.*$/, "");
-    let isValid = accept.split(",").map((type2) => type2.trim()).filter((type2) => type2).some((type2) => {
-      if (/\..+$/.test(type2)) {
-        return extension === type2;
-      }
-      if (/\/\*$/.test(type2)) {
-        return baseType === type2.replace(/\/\*$/, "");
-      }
-      if (/^[^/]+\/[^/]+$/.test(type2)) {
-        return true;
-      }
-      return false;
+  if (files) {
+    Array.from(files).filter((file) => {
+      const { type, name } = file;
+      const extension = name.includes(".") ? `.${name.split(".").pop()}` : "";
+      const baseType = type.replace(/\/.*$/, "");
+      let isValid = accept.split(",").map((type2) => type2.trim()).filter((type2) => type2).some((type2) => {
+        if (/\..+$/.test(type2)) {
+          return extension === type2;
+        }
+        if (/\/\*$/.test(type2)) {
+          return baseType === type2.replace(/\/\*$/, "");
+        }
+        if (/^[^/]+\/[^/]+$/.test(type2)) {
+          return true;
+        }
+        return false;
+      });
+      !isValid && notAcceptedFiles.push(file);
+      return isValid;
     });
-    !isValid && notAcceptedFiles.push(file);
-    return isValid;
-  });
-  notAcceptedFiles.length && state.uploader.$emit("drop-error", notAcceptedFiles);
-  emit("file", filteredFile);
+    notAcceptedFiles.length && state.uploader.$emit("drop-error", notAcceptedFiles);
+  }
+  emit("file", files);
 };
 const watchDragover = ({ state, constants }) => () => {
   state.uploader.$refs[constants.FILE_UPLOAD_INNER_TEMPLATE].$emit("drag-over", state.dragover);

package/upload-list/index.js

@@ -40,7 +40,7 @@ const picturefilePreview = (state) => (index) => {
 const getDeleteData = (emit) => (data) => {
   emit("remove", data);
 };
-const showOperatePanel = ({ state }) => (file) => {
+const showOperatePanel = ({ state }) => ({ file }) => {
   state.currentFile = file;
   state.showPanel = true;
 };
@@ -96,43 +96,43 @@ const getFileIcon = ({ constants }) => ({ type }) => {
   let iconTypes = {
     [EXCEL]: {
       name: "icon-excel-type",
-      color: "#00A2B5"
+      color: "#09AA71"
     },
     [FILE]: {
       name: "icon-file-type",
-      color: "#71C14C"
+      color: "#09AA71"
     },
     [PDF]: {
       name: "icon-pdf-type",
-      color: "#FC916E"
+      color: "#E02128"
     },
     [PICTURE]: {
       name: "icon-picture-type",
-      color: "#2E94FF"
+      color: "#5531EB"
     },
     [PPT]: {
       name: "icon-ppt-type",
-      color: "#F46087"
+      color: "#E02128"
     },
     [TEXT]: {
       name: "icon-text-type",
-      color: "#9185F0"
+      color: "#2CB8C9"
     },
     [WORD]: {
       name: "icon-word-type",
-      color: "#2070F3"
+      color: "#0067D1"
     },
     [ZIP]: {
       name: "icon-zip-type",
-      color: "#FDC000"
+      color: "#2CB8C9"
     },
     [VIDEO]: {
       name: "icon-video-type",
-      color: "#2E94FF"
+      color: "#0067D1"
     },
     [AUDIO]: {
       name: "icon-audio",
-      color: "#2E94FF"
+      color: "#5531EB"
     },
     default: {
       name: "icon-other-type",
@@ -153,11 +153,11 @@ const calcUploadListLiWidth = ({ vm, nextTick, props, constants }) => () => {
   const { listType } = props;
   const { LIST_TYPE } = constants;
   nextTick(() => {
-    const uploadListEle = vm.$refs["upload-list"];
-    const uploadListLiEle = vm.$refs["upload-list-li"];
+    const uploadListEle = vm.$refs.uploadList;
+    const uploadListLiEle = uploadListEle && uploadListEle.querySelectorAll('[data-tag="tiny-upload-list-item"]');
     if (!uploadListEle || !(uploadListLiEle && uploadListLiEle[0]))
       return;
-    if (listType === LIST_TYPE.TEXT) {
+    if (listType === LIST_TYPE.TEXT || listType === LIST_TYPE.SAAS) {
       const { minWidth } = window.getComputedStyle(uploadListLiEle && uploadListLiEle[0]);
       const marginRight = 8;
       const num = Math.floor(uploadListEle.offsetWidth / (parseFloat(minWidth) + marginRight));
@@ -213,11 +213,17 @@ const handleTriggerClick = ({ state, props }) => ($event, type) => {
   });
 };
 const mounted = ({ api, vm }) => () => {
-  const el = vm.$refs["upload-list"];
-  el && addResizeListener(el, api.calcUploadListLiWidth);
+  const el = vm.$refs.uploadList;
+  if (el) {
+    addResizeListener(el, api.calcUploadListLiWidth);
+    vm._removeResizeListener = () => removeResizeListener(el, api.calcUploadListLiWidth);
+  }
 };
-const destroyed = ({ api, props, vm }) => () => {
-  removeResizeListener(vm.$refs["upload-list"], api.calcUploadListLiWidth);
+const destroyed = ({ props, vm }) => () => {
+  if (vm._removeResizeListener) {
+    vm._removeResizeListener();
+    vm._removeResizeListener = null;
+  }
   props.files.forEach((file) => {
     removePlayEventListener({ type: "ended", el: file.el }, file.playEvent);
     delete file.playEvent;

package/upload-list/vue.js

@@ -23,6 +23,7 @@ import {
   getNotSuccessFiles
 } from "./index";
 import { getToken, initService } from "../file-upload";
+import { formatFileSize } from "../common/string";
 import { getApi } from "../file-upload/vue";
 const api = [
   "t",
@@ -43,17 +44,20 @@ const api = [
   "reUpload",
   "remove",
   "handleTriggerClick",
-  "chooseFile"
+  "chooseFile",
+  "formatFileSize"
 ];
-const renderless = (props, { reactive, onMounted, onUnmounted, watch, inject, computed }, { t, parent, mode, emit, service, vm, nextTick, designConfig }, { Modal }) => {
+const renderless = (props, { reactive, onMounted, onUnmounted, watch, inject, computed }, { t, parent, mode, emit, service, vm, nextTick, designConfig, useBreakpoint }, { Modal }) => {
   var _a, _b, _c, _d, _e, _f;
   const api2 = { getApi };
   parent = inject("uploader").$children[0];
   const constants = parent.$constants;
   const $service = initService({ props, service });
+  const { current } = useBreakpoint();
   const state = reactive({
     focusing: false,
     shows: false,
+    currentBreakpoint: current,
     progressType: ((_a = designConfig == null ? void 0 : designConfig.state) == null ? void 0 : _a.progressType) || "circle",
     progressWidth: (_b = designConfig == null ? void 0 : designConfig.state) == null ? void 0 : _b.progressWidth,
     progressStrokeWidth: ((_c = designConfig == null ? void 0 : designConfig.state) == null ? void 0 : _c.progressStrokeWidth) || 6,
@@ -84,7 +88,7 @@ const renderless = (props, { reactive, onMounted, onUnmounted, watch, inject, co
     pause: pause({ vm, props }),
     handleLoadedmetadata: handleLoadedmetadata({ vm }),
     handleTimeupdate: handleTimeupdate(),
-    destroyed: destroyed({ api: api2, props, vm }),
+    destroyed: destroyed({ props, vm }),
     showOperatePanel: showOperatePanel({ state }),
     getFileType: getFileType(),
     getFileIcon: getFileIcon({ constants }),
@@ -95,7 +99,8 @@ const renderless = (props, { reactive, onMounted, onUnmounted, watch, inject, co
     handleTriggerClick: handleTriggerClick({ state, props }),
     chooseFile: chooseFile({ state, constants }),
     calcVisible: calcVisible({ props, constants, emit }),
-    getNotSuccessFiles: getNotSuccessFiles({ props, constants })
+    getNotSuccessFiles: getNotSuccessFiles({ props, constants }),
+    formatFileSize
   });
   props.listType === constants.LIST_TYPE.DRAG_SINGLE && watch(
     () => props.files && props.files[0],

package/user/index.js

@@ -17,8 +17,9 @@ const request = {
       this.group[valueField] = [];
     }
     queryIds.forEach((id) => {
-      if (!~this.group[valueField].indexOf(id))
-        !this.group[valueField].push(id);
+      if (!~this.group[valueField].indexOf(id)) {
+        this.group[valueField].push(id);
+      }
     });
   },
   removeRequest(item) {
@@ -78,22 +79,10 @@ const request = {
     const me = this;
     const reqParamsSeq = me.getParams();
     let reqLen = reqParamsSeq.length;
-    reqParamsSeq.map((params) => {
-      api.fetchW3Accounts(params).then((data) => {
-        me.setCache(data);
-        me.requests.slice().forEach((reqItem) => {
-          const { param, cb } = reqItem;
-          const { queryIds, valueField } = param;
-          queryIds.forEach((id) => {
-            const user = me.cache[valueField] && me.cache[valueField][id];
-            user && !reqItem.result.includes(user) && reqItem.result.push(user);
-          });
-          if (reqItem.result.length === queryIds.length) {
-            me.removeRequest(reqItem);
-            cb(reqItem.result);
-          }
-        });
-      }).finally(() => {
+    let final = true;
+    const onFinally = () => {
+      if (final) {
+        final = false;
         reqLen--;
         const errors = [];
         if (!reqLen) {
@@ -109,7 +98,24 @@ const request = {
           errors.length && log.logger.warn(`user [${errors.join(",")}] not found`);
           this.clearRequest();
         }
-      });
+      }
+    };
+    reqParamsSeq.forEach((params) => {
+      api.fetchW3Accounts(params).then((data) => {
+        me.setCache(data);
+        me.requests.slice().forEach((reqItem) => {
+          const { param, cb } = reqItem;
+          const { queryIds, valueField } = param;
+          queryIds.forEach((id) => {
+            const user = me.cache[valueField] && me.cache[valueField][id];
+            user && !reqItem.result.includes(user) && reqItem.result.push(user);
+          });
+          if (reqItem.result.length === queryIds.length) {
+            me.removeRequest(reqItem);
+            cb(reqItem.result);
+          }
+        });
+      }).then(onFinally).catch(onFinally);
     });
   },
   setBatch(batch) {
@@ -185,7 +191,7 @@ const updateOptions = ({ props, state, nextTick }) => (usersList) => {
   return nextTick();
 };
 const autoSelect = ({ props, state, nextTick }) => (usersList) => {
-  if (!usersList.length) {
+  if (!usersList.length || props.multiple && props.multipleLimit && state.user.length >= props.multipleLimit) {
     return nextTick();
   }
   const values = props.multiple ? [].concat(state.user) : [];
@@ -209,7 +215,7 @@ const autoSelect = ({ props, state, nextTick }) => (usersList) => {
   return nextTick();
 };
 const searchMethod = ({ api, props, state, emit }) => debounce(props.delay, (query) => {
-  if (query && query.length >= props.suggestLength) {
+  if (query && query.trim().length >= props.suggestLength) {
     state.loading = true;
     state.visible = true;
     const { multiple } = props;
@@ -247,13 +253,16 @@ const setSelected = ({ api, props, state }) => (value) => {
   });
   props.cache && api.cacheUser(state.selected);
 };
-const userChange = ({ api, emit, props, state }) => (value) => {
+const userChange = ({ api, emit, props, state, dispatch, constants }) => (value, emitChangeFlag = true) => {
   const { multiple } = props;
   let newVal = multiple && Array.isArray(value) ? value.join(props.valueSplit) : (value || "") + "";
   api.setSelected(newVal);
   if (typeof state.lastValue === "string" && state.lastValue !== null && state.lastValue.toLocaleLowerCase() !== newVal.toLocaleLowerCase()) {
     emit("update:modelValue", newVal);
-    emit("change", newVal, state.selected);
+    if (emitChangeFlag) {
+      emit("change", newVal, state.selected);
+      dispatch(constants.COMPONENT_NAME.FormItem, constants.EVENT_NAME.FormChange, newVal);
+    }
   }
   state.lastValue = newVal;
 };
@@ -402,7 +411,7 @@ const visibleChange = ({ state, emit }) => (show) => {
   emit("visible-change", show);
 };
 const initUser = ({ api, props, state }) => (value) => {
-  if (value === state.lastValue) {
+  if (value === state.lastValue && value !== null) {
     return;
   }
   state.user = !props.multiple ? "" : [];
@@ -412,7 +421,7 @@ const initUser = ({ api, props, state }) => (value) => {
   if (!value) {
     state.options = [];
     state.selected = [];
-    api.userChange(value);
+    api.userChange(value, props.changeCompat);
     return;
   }
   value && api.getUsers(value).then((info) => {
@@ -425,7 +434,7 @@ const initUser = ({ api, props, state }) => (value) => {
     });
     state.options = info;
     state.user = props.multiple ? list : list[0];
-    api.userChange(value);
+    api.userChange(value, props.changeCompat);
   });
 };
 const handleBlur = ({ constants, dispatch, state, emit }) => (e) => {