@blueking/bk-user-selector 0.0.23-beta.1 → 0.0.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blueking/bk-user-selector",
-  "version": "0.0.23-beta.1",
+  "version": "0.0.23",
   "description": "蓝鲸用户选择器",
   "license": "MIT",
   "author": "Tencent BlueKing",

package/typings/components/me-tag.vue.d.ts

@@ -1,4 +1,4 @@
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+declare const _default: import("vue").DefineComponent<{
     /**
      * 当前用户ID
      */
@@ -13,7 +13,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     /**
@@ -30,10 +30,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
-}>> & Readonly<{
+}>> & {
     onClick?: ((...args: any[]) => any) | undefined;
-}>, {
+}, {
     currentUserId: string;
     isDisabled: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}, {}>;
 export default _default;

package/typings/components/multiple-selector.vue.d.ts

@@ -1,13 +1,39 @@
 import { FormattedUser, MultipleSelectorProps } from '../types';
-declare const _default: import("vue").DefineComponent<MultipleSelectorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<MultipleSelectorProps>, {
+    modelValue: () => never[];
+    placeholder: string;
+    draggable: boolean;
+    apiBaseUrl: string;
+    tenantId: string;
+    selectedUsers: () => never[];
+    tenants: () => {};
+    currentUserId: string;
+    exactSearchKey: string;
+    userGroup: () => never[];
+    userGroupName: string;
+    emptyText: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:selectedUsers": (...args: any[]) => void;
     "add-user": (...args: any[]) => void;
     "remove-user": (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<MultipleSelectorProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<MultipleSelectorProps>, {
+    modelValue: () => never[];
+    placeholder: string;
+    draggable: boolean;
+    apiBaseUrl: string;
+    tenantId: string;
+    selectedUsers: () => never[];
+    tenants: () => {};
+    currentUserId: string;
+    exactSearchKey: string;
+    userGroup: () => never[];
+    userGroupName: string;
+    emptyText: string;
+}>>> & {
     "onUpdate:selectedUsers"?: ((...args: any[]) => any) | undefined;
     "onAdd-user"?: ((...args: any[]) => any) | undefined;
     "onRemove-user"?: ((...args: any[]) => any) | undefined;
-}>, {
+}, {
     tenantId: string;
     currentUserId: string;
     tenants: Record<string, string>;
@@ -28,5 +54,22 @@ declare const _default: import("vue").DefineComponent<MultipleSelectorProps, {},
     apiBaseUrl: string;
     placeholder: string;
     exactSearchKey: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}, {}>;
 export default _default;
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/typings/components/render-tag.d.ts

@@ -0,0 +1,8 @@
+declare const _default: import("vue").DefineComponent<{
+    renderTag: FunctionConstructor;
+    userInfo: ObjectConstructor;
+}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    renderTag: FunctionConstructor;
+    userInfo: ObjectConstructor;
+}>>, {}, {}>;
+export default _default;

package/typings/components/selection-popover.vue.d.ts

@@ -3,7 +3,7 @@
  */
 import { createVNode, VNode } from 'vue';
 import { FormattedUser } from '../types';
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+declare const _default: import("vue").DefineComponent<{
     /**
      * 是否显示下拉菜单
      */
@@ -91,7 +91,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     renderListItem: {
         type: () => (h: typeof createVNode, item: FormattedUser) => VNode;
     };
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "select-user": (...args: any[]) => void;
     "click-outside": (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -182,10 +182,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     renderListItem: {
         type: () => (h: typeof createVNode, item: FormattedUser) => VNode;
     };
-}>> & Readonly<{
+}>> & {
     "onSelect-user"?: ((...args: any[]) => any) | undefined;
     "onClick-outside"?: ((...args: any[]) => any) | undefined;
-}>, {
+}, {
     tenantId: string;
     tenants: Record<string, string>;
     isShow: boolean;
@@ -201,5 +201,5 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     }[];
     userGroupName: string;
     emptyText: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}, {}>;
 export default _default;

package/typings/components/single-selector.vue.d.ts

@@ -1,11 +1,31 @@
 import { SingleSelectorProps } from '../types';
-declare const _default: import("vue").DefineComponent<SingleSelectorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<SingleSelectorProps>, {
+    apiBaseUrl: string;
+    tenantId: string;
+    placeholder: string;
+    modelValue: string;
+    currentUserId: string;
+    exactSearchKey: string;
+    userGroup: () => never[];
+    userGroupName: string;
+    emptyText: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (...args: any[]) => void;
     "update:modelValue": (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<SingleSelectorProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<SingleSelectorProps>, {
+    apiBaseUrl: string;
+    tenantId: string;
+    placeholder: string;
+    modelValue: string;
+    currentUserId: string;
+    exactSearchKey: string;
+    userGroup: () => never[];
+    userGroupName: string;
+    emptyText: string;
+}>>> & {
     onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-}>, {
+}, {
     tenantId: string;
     currentUserId: string;
     userGroup: {
@@ -23,5 +43,22 @@ declare const _default: import("vue").DefineComponent<SingleSelectorProps, {}, {
     apiBaseUrl: string;
     placeholder: string;
     exactSearchKey: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}, {}>;
 export default _default;
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/typings/components/user-render.d.ts

@@ -1,5 +1,5 @@
 import type { FormattedUser } from '../types';
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+declare const _default: import("vue").DefineComponent<{
     user: {
         type: () => FormattedUser;
         required: true;
@@ -16,7 +16,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: FunctionConstructor;
         required: false;
     };
-}>, () => any, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, () => any, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     user: {
         type: () => FormattedUser;
         required: true;
@@ -33,5 +33,5 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: FunctionConstructor;
         required: false;
     };
-}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}>>, {}, {}>;
 export default _default;

package/typings/components/user-selector.vue.d.ts

@@ -1,11 +1,35 @@
 import { UserSelectorProps } from '../types';
-declare const _default: import("vue").DefineComponent<UserSelectorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<UserSelectorProps>, {
+    apiBaseUrl: string;
+    tenantId: string;
+    placeholder: string;
+    modelValue: string;
+    draggable: boolean;
+    multiple: boolean;
+    currentUserId: string;
+    exactSearchKey: string;
+    userGroup: () => never[];
+    userGroupName: string;
+    emptyText: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (...args: any[]) => void;
     "update:modelValue": (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<UserSelectorProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<UserSelectorProps>, {
+    apiBaseUrl: string;
+    tenantId: string;
+    placeholder: string;
+    modelValue: string;
+    draggable: boolean;
+    multiple: boolean;
+    currentUserId: string;
+    exactSearchKey: string;
+    userGroup: () => never[];
+    userGroupName: string;
+    emptyText: string;
+}>>> & {
     onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-}>, {
+}, {
     tenantId: string;
     currentUserId: string;
     userGroup: {
@@ -26,5 +50,22 @@ declare const _default: import("vue").DefineComponent<UserSelectorProps, {}, {},
     placeholder: string;
     exactSearchKey: string;
     multiple: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}, {}>;
 export default _default;
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/typings/components/user-tag.vue.d.ts

@@ -1,9 +1,6 @@
 import { createVNode, VNode } from 'vue';
 import { FormattedUser } from '../types';
-/**
- * 组件属性
- */
-type __VLS_Props = {
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<{
     /**
      * 用户信息
      */
@@ -32,12 +29,49 @@ type __VLS_Props = {
      * 渲染标签
      */
     renderTag?: (h: typeof createVNode, userInfo: FormattedUser) => VNode;
-};
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (...args: any[]) => void;
     close: (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
+    /**
+     * 用户信息
+     */
+    user: FormattedUser;
+    /**
+     * 租户数据映射
+     */
+    tenants: Record<string, string>;
+    /**
+     * 当前租户ID
+     */
+    currentTenantId: string;
+    /**
+     * 是否可拖拽
+     */
+    draggable?: boolean;
+    /**
+     * 是否激活状态
+     */
+    active?: boolean;
+    /**
+     * 是否显示租户信息
+     */
+    showTenant?: boolean;
+    /**
+     * 渲染标签
+     */
+    renderTag?: (h: typeof createVNode, userInfo: FormattedUser) => VNode;
+}>>> & {
     onClick?: ((...args: any[]) => any) | undefined;
     onClose?: ((...args: any[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}, {}, {}>;
 export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/typings/hooks/useTenantData.d.ts

@@ -10,7 +10,7 @@ import { type Ref } from 'vue';
  * @returns 租户数据和加载状态
  */
 export declare const useTenantData: (apiBaseUrl: string, tenantId: string) => {
-    tenants: Ref<Record<string, string>, Record<string, string>>;
-    loading: Ref<boolean, boolean>;
+    tenants: Ref<Record<string, string>>;
+    loading: Ref<boolean>;
     fetchTenants: () => Promise<void>;
 };

package/typings/hooks/useUserSearch.d.ts

@@ -11,9 +11,9 @@ import { type FormattedUser } from '../types';
  * @returns 用户搜索相关状态和方法
  */
 export declare const useUserSearch: (apiBaseUrl: string, tenantId: string) => {
-    searchResults: Ref<FormattedUser[], FormattedUser[]>;
-    loading: Ref<boolean, boolean>;
-    searchQuery: Ref<string, string>;
+    searchResults: Ref<FormattedUser[]>;
+    loading: Ref<boolean>;
+    searchQuery: Ref<string>;
     performSearch: (keyword: string) => Promise<void>;
     handleSearchInput: (value: string) => void;
     clearSearch: () => void;

package/typings/vue2.d.ts

@@ -1,10 +1,16 @@
 import BkUserSelector from './components/user-selector.vue';
 declare const _default: {
-    created(): void;
     model: {
         prop: string;
         event: string;
     };
+    beforeDestroy(): void;
+    created(): void;
+    data(): {
+        app: null;
+        unWatchStack: never[];
+    };
+    mounted(): void;
     name: string;
     props: any;
     render(createElement: any): any;

package/vue2/index.es.min.js

@@ -1,5 +1,5 @@
 import * as __WEBPACK_EXTERNAL_MODULE_vue__ from "@blueking/bkui-library";
-import { ref, onBeforeMount, defineComponent, createElementBlock, createCommentVNode, openBlock, withModifiers, normalizeClass, h as h$1, computed, createBlock, unref, withCtx, createVNode, createElementVNode, toDisplayString, Fragment, renderList, watch, nextTick, onMounted, withDirectives, isRef, vModelText, createTextVNode, createApp, getCurrentInstance, onBeforeUnmount } from "@blueking/bkui-library";
+import { ref, onBeforeMount, defineComponent, createElementBlock, createCommentVNode, openBlock, withModifiers, normalizeClass, h as h$1, computed, createBlock, unref, withCtx, createVNode, createElementVNode, toDisplayString, Fragment, renderList, watch, nextTick, onMounted, withDirectives, isRef, vModelText, createTextVNode, createApp } from "@blueking/bkui-library";
 const getTenants = async (apiBaseUrl, tenantId) => {
   if (!apiBaseUrl || !tenantId) {
     console.warn("获取租户信息需要提供有效的apiBaseUrl和租户ID");
@@ -17005,7 +17005,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const UserTag = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-487799ec"]]);
+const UserTag = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-655f7a5a"]]);
 const _hoisted_1$2 = ["onClick"];
 const _hoisted_2$1 = ["placeholder"];
 const _hoisted_3 = ["placeholder"];
@@ -17497,7 +17497,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const MultipleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-95b69442"]]);
+const MultipleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-d9743f6d"]]);
 const _hoisted_1$1 = { class: "input-container" };
 const _hoisted_2 = ["placeholder"];
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
@@ -17540,9 +17540,11 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         type: "userGroup"
       }));
       const list = [...options.value, ...userGroup];
-      return list.find((user) => user.id === selectedUser.value);
+      const selectedUserInfo2 = list.find((user) => user.id === selectedUser.value);
+      emit("change", selectedUserInfo2 || null);
+      return selectedUserInfo2;
     });
-    onBeforeMount(async () => {
+    const initSelectedUser = async () => {
       if (typeof props2.modelValue === "string" && props2.modelValue) {
         try {
           isLoading.value = true;
@@ -17563,7 +17565,12 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         } finally {
           isLoading.value = false;
         }
+      } else {
+        options.value = [];
       }
+    };
+    onBeforeMount(async () => {
+      initSelectedUser();
     });
     const addCurrentUser = async () => {
       if (!props2.currentUserId || selectedUser.value === props2.currentUserId) return;
@@ -17615,9 +17622,15 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const handleClickOutside = () => {
       showDropdown.value = false;
     };
-    watch(selectedUserInfo, (newVal) => {
-      emit("change", newVal || null);
-    }, { immediate: true });
+    watch(
+      () => props2.modelValue,
+      (newVal) => {
+        selectedUser.value = newVal;
+      }
+    );
+    watch(selectedUser, (newVal) => {
+      emit("update:modelValue", newVal);
+    });
     return (_ctx, _cache) => {
       return withDirectives((openBlock(), createElementBlock("div", {
         ref_key: "containerRef",
@@ -17678,7 +17691,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const SingleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-4fec9d7c"]]);
+const SingleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-75a8e031"]]);
 const _hoisted_1 = {
   ref: "containerRef",
   class: "bk-user-selector"
@@ -17732,6 +17745,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           } catch (error3) {
             console.error("获取选中用户信息失败:", error3);
           }
+        } else {
+          selectedUsers.value = [];
         }
       } else {
         selectedUser.value = props2.modelValue;
@@ -17751,15 +17766,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     watch(selectedUser, (newVal) => {
       if (!props2.multiple) {
         emit("update:modelValue", newVal);
-        emit("change", newVal);
       }
-    }, { immediate: true });
+    });
     watch(
       () => props2.userGroup,
       () => {
         initSelectedUsers();
-      },
-      { immediate: true }
+      }
+    );
+    watch(
+      () => props2.modelValue,
+      () => {
+        initSelectedUsers();
+      }
     );
     onBeforeMount(() => {
       initSelectedUsers();
@@ -17820,52 +17839,54 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const BkUserSelector = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-78f5783f"]]);
+const BkUserSelector = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-53d8b462"]]);
 const vue2 = {
+  model: {
+    prop: "modelValue",
+    event: "change"
+  },
+  beforeDestroy() {
+    var _a;
+    this.unWatchStack.forEach((unWatch) => unWatch == null ? void 0 : unWatch());
+    (_a = this.app) == null ? void 0 : _a.unmount();
+  },
   created() {
-    const that = this;
-    let app = createApp({
-      setup() {
-        const currentInstance = getCurrentInstance();
-        const unwatchList = Object.keys(that.$props).map((key) => {
-          return that.$watch(key, () => {
-            currentInstance.proxy.$forceUpdate();
-          });
-        });
-        onBeforeUnmount(() => {
-          unwatchList.forEach((unwatch) => unwatch());
-        });
-        return () => h$1(BkUserSelector, {
-          ...that.$props,
-          "onUpdate:modelValue": (value) => {
-            that.$emit("update:modelValue", value);
-            that.$emit("change", value);
+    const props2 = this.$props;
+    const emit = this.$emit.bind(this);
+    let userSelectorInstance;
+    this.app = createApp({
+      render() {
+        userSelectorInstance = this;
+        return h$1(BkUserSelector, {
+          ...props2,
+          "onUpdate:modelValue"() {
+            emit("update:modelValue", ...arguments);
+            emit("change", ...arguments);
           },
-          onChange: (value) => {
-            console.info("onChange", value);
-            that.$emit("change", value);
-          }
+          ref: "userSelectorRef"
         });
       }
     });
-    this.$once("hook:mounted", () => {
-      app.mount(this.$el);
-      console.info("app", app);
-    });
-    this.$once("hook:beforeDestroy", () => {
-      app.unmount();
-      console.info("unmount", app);
-      app = null;
+    this.unWatchStack = Object.keys(this.$props).map((k2) => {
+      return this.$watch(k2, (v2) => {
+        userSelectorInstance[k2] = v2;
+        userSelectorInstance.$forceUpdate();
+      });
     });
   },
-  model: {
-    prop: "modelValue",
-    event: "change"
+  data() {
+    return {
+      app: null,
+      unWatchStack: []
+    };
+  },
+  mounted() {
+    var _a;
+    (_a = this.app) == null ? void 0 : _a.mount(this.$el);
   },
   name: "BkUserSelector",
   props: BkUserSelector.props || {},
   render(createElement) {
-    console.info("render", createElement);
     return createElement("div");
   }
 };