@blueking/bk-user-selector 0.1.5 → 0.1.6

package/README.md

@@ -22,6 +22,7 @@
 | 🎭 **自定义渲染** | 支持自定义标签和列表项渲染           |
 | 📝 **多行输入**   | 支持 textarea 模式，完整展示所有标签 |
 | ⌨️ **键盘导航**   | 支持上下键切换选项、Enter 快速选中   |
+| 🎯 **焦点控制**   | 支持自动聚焦和手动 focus/blur 方法   |
 
 ## 📦 安装
 
@@ -294,33 +295,34 @@ export default {
 
 ### Props 属性
 
-| 参数                  | 说明                              | 类型                                             | 默认值                 | 必填 |
-| --------------------- | --------------------------------- | ------------------------------------------------ | ---------------------- | ---- |
-| modelValue / v-model  | 绑定值，单选为字符串，多选为数组  | `string` / `string[]`                            | `''` / `[]`            | 是   |
-| apiBaseUrl            | API 基础 URL                      | `string`                                         | `''`                   | 是   |
-| tenantId              | 租户 ID                           | `string`                                         | `'default'`            | 否   |
-| hasAvatar             | 是否显示头像                      | `boolean`                                        | `false`                | 否   |
-| avatarBaseUrl         | 头像基础 URL                      | `string`                                         | ``                     | 否   |
-| label                 | 文本标签                          | `string`                                         | `'人员选择'`           | 否   |
-| placeholder           | 占位文本                          | `string`                                         | `'请输入人员名称搜索'` | 否   |
-| multiple              | 是否多选                          | `boolean`                                        | `false`                | 否   |
-| draggable             | 是否可拖拽排序（仅多选模式有效）  | `boolean`                                        | `false`                | 否   |
-| exactSearchKey        | 精确查找 key                      | `'bk_username'` / `'login_name'` / `'full_name'` | `'bk_username'`        | 否   |
-| currentUserId         | 当前用户 ID（用于快速选择"我"）   | `string`                                         | `''`                   | 否   |
-| userGroup             | 用户组列表                        | `UserGroupItem[]`                                | `[]`                   | 否   |
-| userGroupName         | 用户组分类名称                    | `string`                                         | `'用户群组'`           | 否   |
-| emptyText             | 无匹配人员时的提示文本            | `string`                                         | `'无匹配人员'`         | 否   |
-| disabled              | 是否禁用                          | `boolean`                                        | `false`                | 否   |
-| renderTag             | 自定义标签渲染函数                | `(h, userInfo) => VNode`                         | -                      | 否   |
-| renderListItem        | 自定义列表项渲染函数              | `(h, userInfo) => VNode`                         | -                      | 否   |
-| excludeUserIds        | 排除的用户 ID 列表                | `string[]`                                       | `[]`                   | 否   |
-| enableMultiTenantMode | 是否启用多租户模式                | `boolean`                                        | `true`                 | 否   |
-| allowCreate           | 是否允许自定义输入，按 Enter 确认 | `boolean`                                        | `false`                | 否   |
-| freePaste             | 是否允许粘贴任意文本              | `boolean`                                        | `false`                | 否   |
-| maxCount              | 最大可选数量（0 表示不限制）      | `number`                                         | `0`                    | 否   |
-| type                  | 输入框类型                        | `'input'` / `'textarea'`                         | `'input'`              | 否   |
-| rows                  | 默认行数（仅 textarea 模式生效）  | `number`                                         | `4`                    | 否   |
-| resize                | 是否允许拖拽调整高度（仅 textarea 模式生效） | `boolean`                              | `true`                 | 否   |
+| 参数                  | 说明                                         | 类型                                             | 默认值                 | 必填 |
+| --------------------- | -------------------------------------------- | ------------------------------------------------ | ---------------------- | ---- |
+| modelValue / v-model  | 绑定值，单选为字符串，多选为数组             | `string` / `string[]`                            | `''` / `[]`            | 是   |
+| apiBaseUrl            | API 基础 URL                                 | `string`                                         | `''`                   | 是   |
+| tenantId              | 租户 ID                                      | `string`                                         | `'default'`            | 否   |
+| hasAvatar             | 是否显示头像                                 | `boolean`                                        | `false`                | 否   |
+| avatarBaseUrl         | 头像基础 URL                                 | `string`                                         | ``                     | 否   |
+| label                 | 文本标签                                     | `string`                                         | `'人员选择'`           | 否   |
+| placeholder           | 占位文本                                     | `string`                                         | `'请输入人员名称搜索'` | 否   |
+| multiple              | 是否多选                                     | `boolean`                                        | `false`                | 否   |
+| draggable             | 是否可拖拽排序（仅多选模式有效）             | `boolean`                                        | `false`                | 否   |
+| exactSearchKey        | 精确查找 key                                 | `'bk_username'` / `'login_name'` / `'full_name'` | `'bk_username'`        | 否   |
+| currentUserId         | 当前用户 ID（用于快速选择"我"）              | `string`                                         | `''`                   | 否   |
+| userGroup             | 用户组列表                                   | `UserGroupItem[]`                                | `[]`                   | 否   |
+| userGroupName         | 用户组分类名称                               | `string`                                         | `'用户群组'`           | 否   |
+| emptyText             | 无匹配人员时的提示文本                       | `string`                                         | `'无匹配人员'`         | 否   |
+| disabled              | 是否禁用                                     | `boolean`                                        | `false`                | 否   |
+| renderTag             | 自定义标签渲染函数                           | `(h, userInfo) => VNode`                         | -                      | 否   |
+| renderListItem        | 自定义列表项渲染函数                         | `(h, userInfo) => VNode`                         | -                      | 否   |
+| excludeUserIds        | 排除的用户 ID 列表                           | `string[]`                                       | `[]`                   | 否   |
+| enableMultiTenantMode | 是否启用多租户模式                           | `boolean`                                        | `true`                 | 否   |
+| allowCreate           | 是否允许自定义输入，按 Enter 确认            | `boolean`                                        | `false`                | 否   |
+| freePaste             | 是否允许粘贴任意文本                         | `boolean`                                        | `false`                | 否   |
+| maxCount              | 最大可选数量（0 表示不限制）                 | `number`                                         | `0`                    | 否   |
+| type                  | 输入框类型                                   | `'input'` / `'textarea'`                         | `'input'`              | 否   |
+| rows                  | 默认行数（仅 textarea 模式生效）             | `number`                                         | `4`                    | 否   |
+| resize                | 是否允许拖拽调整高度（仅 textarea 模式生效） | `boolean`                                        | `true`                 | 否   |
+| autoFocus             | 是否自动聚焦                                 | `boolean`                                        | `false`                | 否   |
 
 #### exactSearchKey 说明
 
@@ -339,8 +341,36 @@ export default {
 | ----------------- | -------------------- | ------------------------------------ |
 | update:modelValue | 绑定值变化时触发     | `(value: string \| string[])`        |
 | change            | 选中值变化时触发     | `(userInfo: UserInfo \| UserInfo[])` |
-| focus             | 输入框获得焦点时触发 | `(event: FocusEvent)`                |
-| blur              | 输入框失去焦点时触发 | `(event: FocusEvent)`                |
+| focus             | 输入框获得焦点时触发 | -                                    |
+| blur              | 输入框失去焦点时触发 | -                                    |
+
+### Methods 方法
+
+通过模板 ref 调用组件方法：
+
+| 方法名 | 说明       | 参数 |
+| ------ | ---------- | ---- |
+| focus  | 使组件聚焦 | -    |
+| blur   | 使组件失焦 | -    |
+
+```vue
+<template>
+  <BkUserSelector
+    ref="selectorRef"
+    v-model="value"
+    :api-base-url="apiBaseUrl"
+  />
+  <button @click="selectorRef?.focus()">聚焦</button>
+  <button @click="selectorRef?.blur()">失焦</button>
+</template>
+
+<script setup>
+  import { ref } from 'vue';
+  const selectorRef = ref(null);
+  const value = ref('');
+  const apiBaseUrl = 'https://api.example.com';
+</script>
+```
 
 ### 类型定义
 
@@ -462,7 +492,7 @@ A: 通过 `change` 事件获取，它会返回完整的用户信息对象，而
 
 ### Q: 多选模式下如何限制选择数量？
 
-A: 目前组件暂不支持直接限制，可以通过 `change` 事件监听并在超出数量时给出提示。
+A: 使用 `maxCount` 属性设置最大可选数量，`0` 表示不限制。
 
 ### Q: 搜索没有结果怎么办？
 

package/package.json

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

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

@@ -1,5 +1,8 @@
 import { FormattedUser, UserSelectorProps } from '../types';
-declare const __VLS_export: import("vue").DefineComponent<UserSelectorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_export: import("vue").DefineComponent<UserSelectorProps, {
+    focus: () => void;
+    blur: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     blur: () => any;
     change: (user: FormattedUser | FormattedUser[] | null) => any;
     focus: () => any;
@@ -32,6 +35,7 @@ declare const __VLS_export: import("vue").DefineComponent<UserSelectorProps, {},
     userGroupName: string;
     disabled: boolean;
     draggable: boolean;
+    autoFocus: boolean;
     modelValue: string | string[];
     multiple: boolean;
     rows: number;

package/typings/types/index.d.ts

@@ -204,6 +204,11 @@ export interface UserGroupConfig {
  * 用户选择器属性
  */
 export interface UserSelectorProps extends BaseSelectorProps {
+    /**
+     * 是否自动聚焦
+     * @default false
+     */
+    autoFocus?: boolean;
     /**
      * 是否支持拖拽排序
      */

package/vue2/index.es.min.js

@@ -11317,6 +11317,11 @@ var user_selector_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 	name: "BkUserSelector",
 	__name: "user-selector",
 	props: {
+		autoFocus: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
 		draggable: {
 			type: Boolean,
 			required: false,
@@ -11445,12 +11450,11 @@ var user_selector_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 		"update:modelValue"
 	],
 	setup(__props, { expose: __expose, emit: __emit }) {
-		__expose();
 		const { t: t$1 } = use_i18n_default();
 		__webpack_exports__provideGlobalConfig({ prefix: "bk-user-selector" });
 		const props = __props;
 		const emit = __emit;
-		const { tenants = {} } = useTenantData(props.apiBaseUrl, props.tenantId, props.enableMultiTenantMode);
+		const { tenants } = useTenantData(props.apiBaseUrl, props.tenantId, props.enableMultiTenantMode);
 		const { searchResults, loading: searchLoading, searchQuery, clearSearch, handleSearchInput } = useUserSearch(props.apiBaseUrl, props.tenantId, props.enableMultiTenantMode);
 		const { fetchCurrentUser } = useCurrentUser({
 			apiBaseUrl: props.apiBaseUrl,
@@ -11506,7 +11510,7 @@ var user_selector_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 			currentTenantId: props.tenantId,
 			hasAvatar: props.hasAvatar,
 			renderTag: props.renderTag,
-			tenants
+			tenants: tenants.value
 		}));
 		const { filteredUserGroup, filterOptions, createCustomUser } = useUserSelection({
 			selectedUserIds,
@@ -11644,10 +11648,7 @@ var user_selector_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 		const scheduleVisibleUsersCalculation = () => {
 			if (!isFocused.value) nextTick(calculateVisibleUsers);
 		};
-		const handleClickOutside = (event) => {
-			const target = event.target;
-			const container = containerRef.value;
-			if (container?.contains(target) || container === target) return;
+		const blur = () => {
 			if (isFocused.value) emit("blur");
 			isFocused.value = false;
 			activeTagIndex.value = selectedUsers.value.length - 1;
@@ -11655,6 +11656,12 @@ var user_selector_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 			highlightedIndex.value = -1;
 			scheduleVisibleUsersCalculation();
 		};
+		const handleClickOutside = (event) => {
+			const target = event.target;
+			const container = containerRef.value;
+			if (container?.contains(target) || container === target) return;
+			blur();
+		};
 		const handleContainerClick = () => {
 			activeTagIndex.value = selectedUsers.value.length - 1;
 			nextTick(() => focusCurrentInput());
@@ -11804,16 +11811,26 @@ var user_selector_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 		useResizeObserver(containerRef, () => {
 			scheduleVisibleUsersCalculation();
 		});
+		let initPromise;
 		onBeforeMount(() => {
-			initSelectedUsers();
+			initPromise = initSelectedUsers();
 		});
-		onMounted(() => {
+		onMounted(async () => {
 			initSortable();
 			nextTick(calculateVisibleUsers);
+			if (props.autoFocus && !props.disabled) {
+				await initPromise;
+				await nextTick();
+				handleFocus();
+			}
 		});
 		onUnmounted(() => {
 			sortableInstance.value?.destroy();
 		});
+		__expose({
+			focus: handleFocus,
+			blur
+		});
 		const __returned__ = {
 			t: t$1,
 			props,
@@ -11864,6 +11881,7 @@ var user_selector_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 			calculateVisibleUsers,
 			handleFocus,
 			scheduleVisibleUsersCalculation,
+			blur,
 			handleClickOutside,
 			handleContainerClick,
 			focusCurrentInput,
@@ -11875,6 +11893,12 @@ var user_selector_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 			handleKeyDown,
 			addUser,
 			removeUser,
+			get initPromise() {
+				return initPromise;
+			},
+			set initPromise(v$1) {
+				initPromise = v$1;
+			},
 			get Popover() {
 				return __webpack_exports__default;
 			},

package/vue2/index.iife.min.js

@@ -17000,6 +17000,11 @@ Expected function or array of functions, received type ${typeof value}.`);
 		name: "BkUserSelector",
 		__name: "user-selector",
 		props: {
+			autoFocus: {
+				type: Boolean,
+				required: false,
+				default: false
+			},
 			draggable: {
 				type: Boolean,
 				required: false,
@@ -17128,12 +17133,11 @@ Expected function or array of functions, received type ${typeof value}.`);
 			"update:modelValue"
 		],
 		setup(__props, { expose: __expose, emit: __emit }) {
-			__expose();
 			const { t: t$1 } = use_i18n_default();
 			__webpack_exports__provideGlobalConfig({ prefix: "bk-user-selector" });
 			const props = __props;
 			const emit$2 = __emit;
-			const { tenants = {} } = useTenantData(props.apiBaseUrl, props.tenantId, props.enableMultiTenantMode);
+			const { tenants } = useTenantData(props.apiBaseUrl, props.tenantId, props.enableMultiTenantMode);
 			const { searchResults, loading: searchLoading, searchQuery, clearSearch, handleSearchInput } = useUserSearch(props.apiBaseUrl, props.tenantId, props.enableMultiTenantMode);
 			const { fetchCurrentUser } = useCurrentUser({
 				apiBaseUrl: props.apiBaseUrl,
@@ -17189,7 +17193,7 @@ Expected function or array of functions, received type ${typeof value}.`);
 				currentTenantId: props.tenantId,
 				hasAvatar: props.hasAvatar,
 				renderTag: props.renderTag,
-				tenants
+				tenants: tenants.value
 			}));
 			const { filteredUserGroup, filterOptions, createCustomUser } = useUserSelection({
 				selectedUserIds,
@@ -17327,10 +17331,7 @@ Expected function or array of functions, received type ${typeof value}.`);
 			const scheduleVisibleUsersCalculation = () => {
 				if (!isFocused.value) nextTick(calculateVisibleUsers);
 			};
-			const handleClickOutside = (event) => {
-				const target = event.target;
-				const container = containerRef.value;
-				if (container?.contains(target) || container === target) return;
+			const blur = () => {
 				if (isFocused.value) emit$2("blur");
 				isFocused.value = false;
 				activeTagIndex.value = selectedUsers.value.length - 1;
@@ -17338,6 +17339,12 @@ Expected function or array of functions, received type ${typeof value}.`);
 				highlightedIndex.value = -1;
 				scheduleVisibleUsersCalculation();
 			};
+			const handleClickOutside = (event) => {
+				const target = event.target;
+				const container = containerRef.value;
+				if (container?.contains(target) || container === target) return;
+				blur();
+			};
 			const handleContainerClick = () => {
 				activeTagIndex.value = selectedUsers.value.length - 1;
 				nextTick(() => focusCurrentInput());
@@ -17487,16 +17494,26 @@ Expected function or array of functions, received type ${typeof value}.`);
 			useResizeObserver(containerRef, () => {
 				scheduleVisibleUsersCalculation();
 			});
+			let initPromise;
 			onBeforeMount(() => {
-				initSelectedUsers();
+				initPromise = initSelectedUsers();
 			});
-			onMounted(() => {
+			onMounted(async () => {
 				initSortable();
 				nextTick(calculateVisibleUsers);
+				if (props.autoFocus && !props.disabled) {
+					await initPromise;
+					await nextTick();
+					handleFocus();
+				}
 			});
 			onUnmounted(() => {
 				sortableInstance.value?.destroy();
 			});
+			__expose({
+				focus: handleFocus,
+				blur
+			});
 			const __returned__ = {
 				t: t$1,
 				props,
@@ -17547,6 +17564,7 @@ Expected function or array of functions, received type ${typeof value}.`);
 				calculateVisibleUsers,
 				handleFocus,
 				scheduleVisibleUsersCalculation,
+				blur,
 				handleClickOutside,
 				handleContainerClick,
 				focusCurrentInput,
@@ -17558,6 +17576,12 @@ Expected function or array of functions, received type ${typeof value}.`);
 				handleKeyDown,
 				addUser,
 				removeUser,
+				get initPromise() {
+					return initPromise;
+				},
+				set initPromise(v$1) {
+					initPromise = v$1;
+				},
 				get Popover() {
 					return __webpack_exports__default;
 				},

package/vue2/index.umd.min.js

@@ -11326,6 +11326,11 @@
 		name: "BkUserSelector",
 		__name: "user-selector",
 		props: {
+			autoFocus: {
+				type: Boolean,
+				required: false,
+				default: false
+			},
 			draggable: {
 				type: Boolean,
 				required: false,
@@ -11454,12 +11459,11 @@
 			"update:modelValue"
 		],
 		setup(__props, { expose: __expose, emit: __emit }) {
-			__expose();
 			const { t: t$1 } = use_i18n_default();
 			__webpack_exports__provideGlobalConfig({ prefix: "bk-user-selector" });
 			const props = __props;
 			const emit = __emit;
-			const { tenants = {} } = useTenantData(props.apiBaseUrl, props.tenantId, props.enableMultiTenantMode);
+			const { tenants } = useTenantData(props.apiBaseUrl, props.tenantId, props.enableMultiTenantMode);
 			const { searchResults, loading: searchLoading, searchQuery, clearSearch, handleSearchInput } = useUserSearch(props.apiBaseUrl, props.tenantId, props.enableMultiTenantMode);
 			const { fetchCurrentUser } = useCurrentUser({
 				apiBaseUrl: props.apiBaseUrl,
@@ -11515,7 +11519,7 @@
 				currentTenantId: props.tenantId,
 				hasAvatar: props.hasAvatar,
 				renderTag: props.renderTag,
-				tenants
+				tenants: tenants.value
 			}));
 			const { filteredUserGroup, filterOptions, createCustomUser } = useUserSelection({
 				selectedUserIds,
@@ -11653,10 +11657,7 @@
 			const scheduleVisibleUsersCalculation = () => {
 				if (!isFocused.value) (0, __blueking_bkui_library.nextTick)(calculateVisibleUsers);
 			};
-			const handleClickOutside = (event) => {
-				const target = event.target;
-				const container = containerRef.value;
-				if (container?.contains(target) || container === target) return;
+			const blur = () => {
 				if (isFocused.value) emit("blur");
 				isFocused.value = false;
 				activeTagIndex.value = selectedUsers.value.length - 1;
@@ -11664,6 +11665,12 @@
 				highlightedIndex.value = -1;
 				scheduleVisibleUsersCalculation();
 			};
+			const handleClickOutside = (event) => {
+				const target = event.target;
+				const container = containerRef.value;
+				if (container?.contains(target) || container === target) return;
+				blur();
+			};
 			const handleContainerClick = () => {
 				activeTagIndex.value = selectedUsers.value.length - 1;
 				(0, __blueking_bkui_library.nextTick)(() => focusCurrentInput());
@@ -11813,16 +11820,26 @@
 			useResizeObserver(containerRef, () => {
 				scheduleVisibleUsersCalculation();
 			});
+			let initPromise;
 			(0, __blueking_bkui_library.onBeforeMount)(() => {
-				initSelectedUsers();
+				initPromise = initSelectedUsers();
 			});
-			(0, __blueking_bkui_library.onMounted)(() => {
+			(0, __blueking_bkui_library.onMounted)(async () => {
 				initSortable();
 				(0, __blueking_bkui_library.nextTick)(calculateVisibleUsers);
+				if (props.autoFocus && !props.disabled) {
+					await initPromise;
+					await (0, __blueking_bkui_library.nextTick)();
+					handleFocus();
+				}
 			});
 			(0, __blueking_bkui_library.onUnmounted)(() => {
 				sortableInstance.value?.destroy();
 			});
+			__expose({
+				focus: handleFocus,
+				blur
+			});
 			const __returned__ = {
 				t: t$1,
 				props,
@@ -11873,6 +11890,7 @@
 				calculateVisibleUsers,
 				handleFocus,
 				scheduleVisibleUsersCalculation,
+				blur,
 				handleClickOutside,
 				handleContainerClick,
 				focusCurrentInput,
@@ -11884,6 +11902,12 @@
 				handleKeyDown,
 				addUser,
 				removeUser,
+				get initPromise() {
+					return initPromise;
+				},
+				set initPromise(v$1) {
+					initPromise = v$1;
+				},
 				get Popover() {
 					return __webpack_exports__default;
 				},

package/vue3/index.es.min.js

@@ -3328,6 +3328,11 @@ var user_selector_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 	name: "BkUserSelector",
 	__name: "user-selector",
 	props: {
+		autoFocus: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
 		draggable: {
 			type: Boolean,
 			required: false,
@@ -3456,12 +3461,11 @@ var user_selector_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 		"update:modelValue"
 	],
 	setup(__props, { expose: __expose, emit: __emit }) {
-		__expose();
 		const { t } = use_i18n_default();
 		provideGlobalConfig({ prefix: "bk" });
 		const props = __props;
 		const emit = __emit;
-		const { tenants = {} } = useTenantData(props.apiBaseUrl, props.tenantId, props.enableMultiTenantMode);
+		const { tenants } = useTenantData(props.apiBaseUrl, props.tenantId, props.enableMultiTenantMode);
 		const { searchResults, loading: searchLoading, searchQuery, clearSearch, handleSearchInput } = useUserSearch(props.apiBaseUrl, props.tenantId, props.enableMultiTenantMode);
 		const { fetchCurrentUser } = useCurrentUser({
 			apiBaseUrl: props.apiBaseUrl,
@@ -3517,7 +3521,7 @@ var user_selector_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 			currentTenantId: props.tenantId,
 			hasAvatar: props.hasAvatar,
 			renderTag: props.renderTag,
-			tenants
+			tenants: tenants.value
 		}));
 		const { filteredUserGroup, filterOptions, createCustomUser } = useUserSelection({
 			selectedUserIds,
@@ -3655,10 +3659,7 @@ var user_selector_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 		const scheduleVisibleUsersCalculation = () => {
 			if (!isFocused.value) nextTick(calculateVisibleUsers);
 		};
-		const handleClickOutside = (event) => {
-			const target = event.target;
-			const container = containerRef.value;
-			if (container?.contains(target) || container === target) return;
+		const blur = () => {
 			if (isFocused.value) emit("blur");
 			isFocused.value = false;
 			activeTagIndex.value = selectedUsers.value.length - 1;
@@ -3666,6 +3667,12 @@ var user_selector_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 			highlightedIndex.value = -1;
 			scheduleVisibleUsersCalculation();
 		};
+		const handleClickOutside = (event) => {
+			const target = event.target;
+			const container = containerRef.value;
+			if (container?.contains(target) || container === target) return;
+			blur();
+		};
 		const handleContainerClick = () => {
 			activeTagIndex.value = selectedUsers.value.length - 1;
 			nextTick(() => focusCurrentInput());
@@ -3815,16 +3822,26 @@ var user_selector_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 		useResizeObserver(containerRef, () => {
 			scheduleVisibleUsersCalculation();
 		});
+		let initPromise;
 		onBeforeMount(() => {
-			initSelectedUsers();
+			initPromise = initSelectedUsers();
 		});
-		onMounted(() => {
+		onMounted(async () => {
 			initSortable();
 			nextTick(calculateVisibleUsers);
+			if (props.autoFocus && !props.disabled) {
+				await initPromise;
+				await nextTick();
+				handleFocus();
+			}
 		});
 		onUnmounted(() => {
 			sortableInstance.value?.destroy();
 		});
+		__expose({
+			focus: handleFocus,
+			blur
+		});
 		const __returned__ = {
 			t,
 			props,
@@ -3875,6 +3892,7 @@ var user_selector_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 			calculateVisibleUsers,
 			handleFocus,
 			scheduleVisibleUsersCalculation,
+			blur,
 			handleClickOutside,
 			handleContainerClick,
 			focusCurrentInput,
@@ -3886,6 +3904,12 @@ var user_selector_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 			handleKeyDown,
 			addUser,
 			removeUser,
+			get initPromise() {
+				return initPromise;
+			},
+			set initPromise(v) {
+				initPromise = v;
+			},
 			get Popover() {
 				return Popover;
 			},

package/vue3/index.iife.min.js

@@ -11332,6 +11332,11 @@ var lesscodeCustomComponentLibrary = (function(exports, vue) {
 		name: "BkUserSelector",
 		__name: "user-selector",
 		props: {
+			autoFocus: {
+				type: Boolean,
+				required: false,
+				default: false
+			},
 			draggable: {
 				type: Boolean,
 				required: false,
@@ -11460,12 +11465,11 @@ var lesscodeCustomComponentLibrary = (function(exports, vue) {
 			"update:modelValue"
 		],
 		setup(__props, { expose: __expose, emit: __emit }) {
-			__expose();
 			const { t: t$1 } = use_i18n_default();
 			__webpack_exports__provideGlobalConfig({ prefix: "bk-user-selector" });
 			const props = __props;
 			const emit = __emit;
-			const { tenants = {} } = useTenantData(props.apiBaseUrl, props.tenantId, props.enableMultiTenantMode);
+			const { tenants } = useTenantData(props.apiBaseUrl, props.tenantId, props.enableMultiTenantMode);
 			const { searchResults, loading: searchLoading, searchQuery, clearSearch, handleSearchInput } = useUserSearch(props.apiBaseUrl, props.tenantId, props.enableMultiTenantMode);
 			const { fetchCurrentUser } = useCurrentUser({
 				apiBaseUrl: props.apiBaseUrl,
@@ -11521,7 +11525,7 @@ var lesscodeCustomComponentLibrary = (function(exports, vue) {
 				currentTenantId: props.tenantId,
 				hasAvatar: props.hasAvatar,
 				renderTag: props.renderTag,
-				tenants
+				tenants: tenants.value
 			}));
 			const { filteredUserGroup, filterOptions, createCustomUser } = useUserSelection({
 				selectedUserIds,
@@ -11659,10 +11663,7 @@ var lesscodeCustomComponentLibrary = (function(exports, vue) {
 			const scheduleVisibleUsersCalculation = () => {
 				if (!isFocused.value) (0, vue.nextTick)(calculateVisibleUsers);
 			};
-			const handleClickOutside = (event) => {
-				const target = event.target;
-				const container = containerRef.value;
-				if (container?.contains(target) || container === target) return;
+			const blur = () => {
 				if (isFocused.value) emit("blur");
 				isFocused.value = false;
 				activeTagIndex.value = selectedUsers.value.length - 1;
@@ -11670,6 +11671,12 @@ var lesscodeCustomComponentLibrary = (function(exports, vue) {
 				highlightedIndex.value = -1;
 				scheduleVisibleUsersCalculation();
 			};
+			const handleClickOutside = (event) => {
+				const target = event.target;
+				const container = containerRef.value;
+				if (container?.contains(target) || container === target) return;
+				blur();
+			};
 			const handleContainerClick = () => {
 				activeTagIndex.value = selectedUsers.value.length - 1;
 				(0, vue.nextTick)(() => focusCurrentInput());
@@ -11819,16 +11826,26 @@ var lesscodeCustomComponentLibrary = (function(exports, vue) {
 			useResizeObserver(containerRef, () => {
 				scheduleVisibleUsersCalculation();
 			});
+			let initPromise;
 			(0, vue.onBeforeMount)(() => {
-				initSelectedUsers();
+				initPromise = initSelectedUsers();
 			});
-			(0, vue.onMounted)(() => {
+			(0, vue.onMounted)(async () => {
 				initSortable();
 				(0, vue.nextTick)(calculateVisibleUsers);
+				if (props.autoFocus && !props.disabled) {
+					await initPromise;
+					await (0, vue.nextTick)();
+					handleFocus();
+				}
 			});
 			(0, vue.onUnmounted)(() => {
 				sortableInstance.value?.destroy();
 			});
+			__expose({
+				focus: handleFocus,
+				blur
+			});
 			const __returned__ = {
 				t: t$1,
 				props,
@@ -11879,6 +11896,7 @@ var lesscodeCustomComponentLibrary = (function(exports, vue) {
 				calculateVisibleUsers,
 				handleFocus,
 				scheduleVisibleUsersCalculation,
+				blur,
 				handleClickOutside,
 				handleContainerClick,
 				focusCurrentInput,
@@ -11890,6 +11908,12 @@ var lesscodeCustomComponentLibrary = (function(exports, vue) {
 				handleKeyDown,
 				addUser,
 				removeUser,
+				get initPromise() {
+					return initPromise;
+				},
+				set initPromise(v$1) {
+					initPromise = v$1;
+				},
 				get Popover() {
 					return __webpack_exports__default;
 				},

package/vue3/index.umd.min.js

@@ -3340,6 +3340,11 @@
 		name: "BkUserSelector",
 		__name: "user-selector",
 		props: {
+			autoFocus: {
+				type: Boolean,
+				required: false,
+				default: false
+			},
 			draggable: {
 				type: Boolean,
 				required: false,
@@ -3468,12 +3473,11 @@
 			"update:modelValue"
 		],
 		setup(__props, { expose: __expose, emit: __emit }) {
-			__expose();
 			const { t } = use_i18n_default();
 			(0, bkui_vue.provideGlobalConfig)({ prefix: "bk" });
 			const props = __props;
 			const emit = __emit;
-			const { tenants = {} } = useTenantData(props.apiBaseUrl, props.tenantId, props.enableMultiTenantMode);
+			const { tenants } = useTenantData(props.apiBaseUrl, props.tenantId, props.enableMultiTenantMode);
 			const { searchResults, loading: searchLoading, searchQuery, clearSearch, handleSearchInput } = useUserSearch(props.apiBaseUrl, props.tenantId, props.enableMultiTenantMode);
 			const { fetchCurrentUser } = useCurrentUser({
 				apiBaseUrl: props.apiBaseUrl,
@@ -3529,7 +3533,7 @@
 				currentTenantId: props.tenantId,
 				hasAvatar: props.hasAvatar,
 				renderTag: props.renderTag,
-				tenants
+				tenants: tenants.value
 			}));
 			const { filteredUserGroup, filterOptions, createCustomUser } = useUserSelection({
 				selectedUserIds,
@@ -3667,10 +3671,7 @@
 			const scheduleVisibleUsersCalculation = () => {
 				if (!isFocused.value) (0, vue.nextTick)(calculateVisibleUsers);
 			};
-			const handleClickOutside = (event) => {
-				const target = event.target;
-				const container = containerRef.value;
-				if (container?.contains(target) || container === target) return;
+			const blur = () => {
 				if (isFocused.value) emit("blur");
 				isFocused.value = false;
 				activeTagIndex.value = selectedUsers.value.length - 1;
@@ -3678,6 +3679,12 @@
 				highlightedIndex.value = -1;
 				scheduleVisibleUsersCalculation();
 			};
+			const handleClickOutside = (event) => {
+				const target = event.target;
+				const container = containerRef.value;
+				if (container?.contains(target) || container === target) return;
+				blur();
+			};
 			const handleContainerClick = () => {
 				activeTagIndex.value = selectedUsers.value.length - 1;
 				(0, vue.nextTick)(() => focusCurrentInput());
@@ -3827,16 +3834,26 @@
 			useResizeObserver(containerRef, () => {
 				scheduleVisibleUsersCalculation();
 			});
+			let initPromise;
 			(0, vue.onBeforeMount)(() => {
-				initSelectedUsers();
+				initPromise = initSelectedUsers();
 			});
-			(0, vue.onMounted)(() => {
+			(0, vue.onMounted)(async () => {
 				initSortable();
 				(0, vue.nextTick)(calculateVisibleUsers);
+				if (props.autoFocus && !props.disabled) {
+					await initPromise;
+					await (0, vue.nextTick)();
+					handleFocus();
+				}
 			});
 			(0, vue.onUnmounted)(() => {
 				sortableInstance.value?.destroy();
 			});
+			__expose({
+				focus: handleFocus,
+				blur
+			});
 			const __returned__ = {
 				t,
 				props,
@@ -3887,6 +3904,7 @@
 				calculateVisibleUsers,
 				handleFocus,
 				scheduleVisibleUsersCalculation,
+				blur,
 				handleClickOutside,
 				handleContainerClick,
 				focusCurrentInput,
@@ -3898,6 +3916,12 @@
 				handleKeyDown,
 				addUser,
 				removeUser,
+				get initPromise() {
+					return initPromise;
+				},
+				set initPromise(v) {
+					initPromise = v;
+				},
 				get Popover() {
 					return bkui_vue.Popover;
 				},