@blueking/bk-user-selector 0.0.8 → 0.0.10

package/vue3/index.umd.min.js

@@ -3,7 +3,7 @@
 })(this, function(exports2, vue, bkuiVue) {
   "use strict";
   var __vite_style__ = document.createElement("style");
-  __vite_style__.textContent = ".me-tag[data-v-887b7c44] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background-color: #e1ecff;\n  color: #4d4f56;\n  border-radius: 50%;\n  padding: 0 8px;\n  height: 24px;\n  width: 24px;\n  cursor: pointer;\n  font-size: 12px;\n  position: absolute;\n  right: 8px;\n  top: 50%;\n  transform: translateY(-50%);\n  z-index: 1;\n}\n.me-tag[data-v-887b7c44]:hover {\n  background-color: #cddffe;\n  color: #3a84ff;\n}\n.me-tag.disabled[data-v-887b7c44] {\n  background-color: #f0f1f5;\n  color: #c4c6cc;\n  cursor: not-allowed;\n}.dropdown-content[data-v-c68dfcac] {\n  min-height: 40px;\n  max-height: 300px;\n  overflow-y: auto;\n  padding: 5px 0;\n}\n.dropdown-content .no-data[data-v-c68dfcac] {\n  padding: 10px;\n  text-align: center;\n  color: #979ba5;\n}\n.dropdown-content .user-group .group-header[data-v-c68dfcac] {\n  padding: 8px 12px;\n  color: #979ba5;\n  display: flex;\n  align-items: center;\n}\n.dropdown-content .user-group .group-header .group-count[data-v-c68dfcac] {\n  margin-left: 4px;\n}\n.dropdown-content .user-option[data-v-c68dfcac] {\n  padding: 8px 12px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  height: 32px;\n}\n.dropdown-content .user-option[data-v-c68dfcac]:hover {\n  background-color: #f5f7fa;\n}\n.dropdown-content .user-option .tenant-name[data-v-c68dfcac] {\n  color: #f59500;\n  margin-left: 4px;\n  padding: 0 4px;\n}.bk-user-selector-popover.bk-popover.bk-pop2-content {\n  padding: 0;\n}.user-tag[data-v-203c36cb] {\n  margin-right: 4px;\n}\n.user-tag.draggable[data-v-203c36cb] {\n  cursor: move;\n}\n.user-tag.active[data-v-203c36cb] {\n  background-color: #e1ecff;\n  border-color: #3a84ff;\n}\n.user-tag .tag-content .user-name[data-v-203c36cb] {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  font-size: 12px;\n}\n.user-tag .tag-content .tenant-name[data-v-203c36cb] {\n  color: #f59500;\n  margin-left: 3px;\n  white-space: nowrap;\n  padding: 0 3px;\n  border-radius: 2px;\n}.multiple-selector[data-v-a09f11c3] {\n  position: relative;\n  width: 100%;\n}\n.multiple-selector .tags-container[data-v-a09f11c3] {\n  min-height: 32px;\n  border: 1px solid #dcdee5;\n  border-radius: 2px;\n  padding: 1px 10px 1px 8px;\n  transition: all 0.2s ease;\n  background-color: #fff;\n}\n.multiple-selector .tags-container.focused[data-v-a09f11c3] {\n  border-color: #3a84ff;\n  box-shadow: 0 0 0 2px rgba(58, 132, 255, 0.1);\n}\n.multiple-selector .tags-container.collapsed[data-v-a09f11c3] {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n}\n.multiple-selector .tag-list[data-v-a09f11c3] {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n}\n.multiple-selector .tag-wrapper[data-v-a09f11c3] {\n  display: inline-flex;\n  align-items: center;\n  max-width: 100%;\n}\n.multiple-selector .search-input[data-v-a09f11c3] {\n  outline: none;\n  border: none;\n  height: 28px;\n  min-width: 10px;\n  background: transparent;\n}\n.multiple-selector .search-input[data-v-a09f11c3]::placeholder {\n  color: #c4c6cc;\n}\n.multiple-selector .search-input.inline[data-v-a09f11c3] {\n  min-width: 10px;\n}\n.multiple-selector .search-input.last[data-v-a09f11c3], .multiple-selector .search-input.collapsed[data-v-a09f11c3] {\n  flex: 1;\n  min-width: 60px;\n}.single-selector[data-v-8b8dd0fd] {\n  position: relative;\n  width: 100%;\n}\n.input-container[data-v-8b8dd0fd] {\n  position: relative;\n  display: flex;\n  align-items: center;\n  min-height: 32px;\n  border: 1px solid #dcdee5;\n  border-radius: 2px;\n  padding: 0 8px;\n  background-color: #fff;\n}\n.input-container[data-v-8b8dd0fd]:focus-within {\n  border-color: #3a84ff;\n  box-shadow: 0 0 0 2px rgba(58, 132, 255, 0.1);\n}\n.search-input[data-v-8b8dd0fd] {\n  flex: 1;\n  outline: none;\n  border: none;\n  height: 30px;\n  background: transparent;\n}\n.search-input[data-v-8b8dd0fd]::placeholder {\n  color: #c4c6cc;\n}\n.selected-user[data-v-8b8dd0fd] {\n  display: inline-flex;\n  align-items: center;\n  background-color: #f0f1f5;\n  border-radius: 2px;\n  padding: 0 8px;\n  margin-right: 8px;\n  height: 24px;\n  max-width: calc(100% - 32px);\n}\n.selected-user .tenant-name[data-v-8b8dd0fd] {\n  color: #f59500;\n  margin-left: 4px;\n}\n.selected-user .close-icon[data-v-8b8dd0fd] {\n  margin-left: 4px;\n  cursor: pointer;\n  font-style: normal;\n}.bk-user-selector[data-v-bc7b4ccd] {\n  width: 100%;\n  position: relative;\n  font-size: 12px;\n}/*$vite$:1*/";
+  __vite_style__.textContent = ".me-tag[data-v-887b7c44] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background-color: #e1ecff;\n  color: #4d4f56;\n  border-radius: 50%;\n  padding: 0 8px;\n  height: 24px;\n  width: 24px;\n  cursor: pointer;\n  font-size: 12px;\n  position: absolute;\n  right: 8px;\n  top: 50%;\n  transform: translateY(-50%);\n  z-index: 1;\n}\n.me-tag[data-v-887b7c44]:hover {\n  background-color: #cddffe;\n  color: #3a84ff;\n}\n.me-tag.disabled[data-v-887b7c44] {\n  background-color: #f0f1f5;\n  color: #c4c6cc;\n  cursor: not-allowed;\n}.dropdown-content[data-v-01b75e6e] {\n  min-height: 40px;\n  max-height: 300px;\n  overflow-y: auto;\n  padding: 5px 0;\n}\n.dropdown-content .no-data[data-v-01b75e6e] {\n  padding: 10px;\n  text-align: center;\n  color: #979ba5;\n}\n.dropdown-content .user-group .group-header[data-v-01b75e6e] {\n  padding: 8px 12px;\n  color: #979ba5;\n  display: flex;\n  align-items: center;\n}\n.dropdown-content .user-group .group-header .group-count[data-v-01b75e6e] {\n  margin-left: 4px;\n}\n.dropdown-content .user-option[data-v-01b75e6e] {\n  padding: 8px 12px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  height: 32px;\n}\n.dropdown-content .user-option[data-v-01b75e6e]:hover {\n  background-color: #f5f7fa;\n}\n.dropdown-content .user-option .tenant-name[data-v-01b75e6e] {\n  color: #f59500;\n  margin-left: 4px;\n  padding: 0 4px;\n}.bk-user-selector-popover.bk-popover.bk-pop2-content {\n  padding: 0;\n}.user-tag[data-v-203c36cb] {\n  margin-right: 4px;\n}\n.user-tag.draggable[data-v-203c36cb] {\n  cursor: move;\n}\n.user-tag.active[data-v-203c36cb] {\n  background-color: #e1ecff;\n  border-color: #3a84ff;\n}\n.user-tag .tag-content .user-name[data-v-203c36cb] {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  font-size: 12px;\n}\n.user-tag .tag-content .tenant-name[data-v-203c36cb] {\n  color: #f59500;\n  margin-left: 3px;\n  white-space: nowrap;\n  padding: 0 3px;\n  border-radius: 2px;\n}.multiple-selector[data-v-1a376d26] {\n  position: relative;\n  width: 100%;\n}\n.multiple-selector .tags-container[data-v-1a376d26] {\n  min-height: 32px;\n  border: 1px solid #dcdee5;\n  border-radius: 2px;\n  padding: 1px 10px 1px 8px;\n  transition: all 0.2s ease;\n  background-color: #fff;\n}\n.multiple-selector .tags-container.focused[data-v-1a376d26] {\n  border-color: #3a84ff;\n  box-shadow: 0 0 0 2px rgba(58, 132, 255, 0.1);\n}\n.multiple-selector .tags-container.collapsed[data-v-1a376d26] {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n}\n.multiple-selector .tag-list[data-v-1a376d26] {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n}\n.multiple-selector .tag-wrapper[data-v-1a376d26] {\n  display: inline-flex;\n  align-items: center;\n  max-width: 100%;\n}\n.multiple-selector .search-input[data-v-1a376d26] {\n  outline: none;\n  border: none;\n  height: 28px;\n  min-width: 10px;\n  background: transparent;\n}\n.multiple-selector .search-input[data-v-1a376d26]::placeholder {\n  color: #c4c6cc;\n}\n.multiple-selector .search-input.inline[data-v-1a376d26] {\n  min-width: 10px;\n}\n.multiple-selector .search-input.last[data-v-1a376d26], .multiple-selector .search-input.collapsed[data-v-1a376d26] {\n  flex: 1;\n  min-width: 60px;\n}.single-selector[data-v-22d9b76f] {\n  position: relative;\n  width: 100%;\n}\n.input-container[data-v-22d9b76f] {\n  position: relative;\n  display: flex;\n  align-items: center;\n  min-height: 32px;\n  border: 1px solid #dcdee5;\n  border-radius: 2px;\n  padding: 0 8px;\n  background-color: #fff;\n}\n.input-container[data-v-22d9b76f]:focus-within {\n  border-color: #3a84ff;\n  box-shadow: 0 0 0 2px rgba(58, 132, 255, 0.1);\n}\n.search-input[data-v-22d9b76f] {\n  flex: 1;\n  outline: none;\n  border: none;\n  height: 30px;\n  background: transparent;\n}\n.search-input[data-v-22d9b76f]::placeholder {\n  color: #c4c6cc;\n}\n.selected-user[data-v-22d9b76f] {\n  display: inline-flex;\n  align-items: center;\n  background-color: #f0f1f5;\n  border-radius: 2px;\n  padding: 0 8px;\n  margin-right: 8px;\n  height: 24px;\n  max-width: calc(100% - 32px);\n}\n.selected-user .tenant-name[data-v-22d9b76f] {\n  color: #f59500;\n  margin-left: 4px;\n}\n.selected-user .close-icon[data-v-22d9b76f] {\n  margin-left: 4px;\n  cursor: pointer;\n  font-style: normal;\n}.bk-user-selector[data-v-84252deb] {\n  width: 100%;\n  position: relative;\n  font-size: 12px;\n}/*$vite$:1*/";
   document.head.appendChild(__vite_style__);
   const getTenants = async (apiBaseUrl, tenantId) => {
     if (!apiBaseUrl || !tenantId) {
@@ -3104,7 +3104,6 @@
       const emit = __emit;
       const groupedUsers = vue.computed(() => {
         const groups = {};
-        console.log("props.options", props.options);
         if (Array.isArray(props.userGroup) && props.userGroup.length > 0) {
           groups[props.userGroupName] = props.userGroup.map((group) => ({
             id: group.id,
@@ -3158,9 +3157,10 @@
                       class: "user-group",
                       key: groupName
                     }, [
-                      vue.createElementVNode(
+                      Object.keys(groupedUsers.value).length > 1 ? (vue.openBlock(), vue.createElementBlock(
                         "div",
                         {
+                          key: 0,
                           class: "group-header",
                           onMousedown: _cache[0] || (_cache[0] = vue.withModifiers(() => {
                           }, ["prevent"]))
@@ -3183,7 +3183,7 @@
                         ],
                         32
                         /* NEED_HYDRATION */
-                      ),
+                      )) : vue.createCommentVNode("v-if", true),
                       (vue.openBlock(true), vue.createElementBlock(
                         vue.Fragment,
                         null,
@@ -3228,7 +3228,7 @@
       };
     }
   });
-  const SelectionPopover = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-c68dfcac"]]);
+  const SelectionPopover = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-01b75e6e"]]);
   const _hoisted_1$3 = { class: "tag-content" };
   const _hoisted_2$2 = { class: "user-name" };
   const _hoisted_3$2 = {
@@ -3298,83 +3298,17 @@
     },
     __name: "multiple-selector",
     props: {
-      /**
-       * 绑定值
-       */
-      modelValue: {
-        type: Array,
-        default: () => []
-      },
-      /**
-       * 占位文本
-       */
-      placeholder: {
-        type: String,
-        default: "请输入人员名称搜索"
-      },
-      /**
-       * 是否可拖拽
-       */
-      draggable: {
-        type: Boolean,
-        default: false
-      },
-      /**
-       * API 基础 URL
-       */
-      apiBaseUrl: {
-        type: String,
-        default: ""
-      },
-      /**
-       * 租户 ID
-       */
-      tenantId: {
-        type: String,
-        default: ""
-      },
-      /**
-       * 已选用户
-       */
-      selectedUsers: {
-        type: Array,
-        default: () => []
-      },
-      /**
-       * 租户信息映射
-       */
-      tenants: {
-        type: Object,
-        default: () => ({})
-      },
-      /**
-       * 当前用户ID
-       */
-      currentUserId: {
-        type: String,
-        default: ""
-      },
-      /**
-       * 精确查找key
-       */
-      exactSearchKey: {
-        type: String,
-        default: "bk_username"
-      },
-      /**
-       * 用户组
-       */
-      userGroup: {
-        type: Array,
-        default: () => []
-      },
-      /**
-       * 用户组名称
-       */
-      userGroupName: {
-        type: String,
-        default: "用户群组"
-      }
+      modelValue: { default: () => [] },
+      draggable: { type: Boolean, default: false },
+      selectedUsers: { default: () => [] },
+      tenants: { default: () => ({}) },
+      apiBaseUrl: { default: "" },
+      tenantId: { default: "" },
+      placeholder: { default: "请输入人员名称搜索" },
+      currentUserId: { default: "" },
+      exactSearchKey: { default: "bk_username" },
+      userGroup: { default: () => [] },
+      userGroupName: { default: "用户群组" }
     },
     emits: ["update:selectedUsers", "add-user", "remove-user"],
     setup(__props, { emit: __emit }) {
@@ -3637,7 +3571,7 @@
                   (vue.openBlock(true), vue.createElementBlock(
                     vue.Fragment,
                     null,
-                    vue.renderList(__props.selectedUsers, (user, index) => {
+                    vue.renderList(_ctx.selectedUsers, (user, index) => {
                       return vue.openBlock(), vue.createElementBlock("div", {
                         class: "tag-wrapper",
                         key: user.id,
@@ -3645,15 +3579,15 @@
                       }, [
                         vue.createVNode(UserTag, {
                           active: index === activeTagIndex.value,
-                          "current-tenant-id": __props.tenantId,
-                          draggable: __props.draggable,
-                          tenants: __props.tenants,
+                          "current-tenant-id": _ctx.tenantId,
+                          draggable: _ctx.draggable,
+                          tenants: _ctx.tenants,
                           user,
                           onClick: ($event) => handleTagClick(index),
                           onClose: ($event) => removeUser(user)
                         }, null, 8, ["active", "current-tenant-id", "draggable", "tenants", "user", "onClick", "onClose"]),
                         vue.createCommentVNode(" 在当前激活标签后插入输入框 "),
-                        index === activeTagIndex.value && activeTagIndex.value !== __props.selectedUsers.length - 1 ? vue.withDirectives((vue.openBlock(), vue.createElementBlock(
+                        index === activeTagIndex.value && activeTagIndex.value !== _ctx.selectedUsers.length - 1 ? vue.withDirectives((vue.openBlock(), vue.createElementBlock(
                           "input",
                           {
                             key: 0,
@@ -3679,13 +3613,13 @@
                     /* KEYED_FRAGMENT */
                   )),
                   vue.createCommentVNode(" 最后一个输入框 "),
-                  activeTagIndex.value === -1 || activeTagIndex.value === __props.selectedUsers.length - 1 ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
+                  activeTagIndex.value === -1 || activeTagIndex.value === _ctx.selectedUsers.length - 1 ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
                     key: 0,
                     ref_key: "lastInputRef",
                     ref: lastInputRef,
                     class: "search-input last",
                     "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => vue.isRef(searchQuery) ? searchQuery.value = $event : null),
-                    placeholder: !__props.selectedUsers.length ? __props.placeholder : "",
+                    placeholder: !_ctx.selectedUsers.length ? _ctx.placeholder : "",
                     onFocus: handleInputFocus,
                     onInput: handleInput,
                     onKeydown: handleKeyDown,
@@ -3695,8 +3629,8 @@
                   ]) : vue.createCommentVNode("v-if", true),
                   vue.createCommentVNode(' "我"标签 '),
                   vue.createVNode(MeTag, {
-                    "current-user-id": __props.currentUserId,
-                    "is-disabled": !!__props.currentUserId && __props.selectedUsers.some((user) => user.id === __props.currentUserId),
+                    "current-user-id": _ctx.currentUserId,
+                    "is-disabled": !!_ctx.currentUserId && _ctx.selectedUsers.some((user) => user.id === _ctx.currentUserId),
                     onClick: addCurrentUser
                   }, null, 8, ["current-user-id", "is-disabled"])
                 ],
@@ -3725,10 +3659,10 @@
                     null,
                     vue.renderList(visibleUsers.value, (user) => {
                       return vue.openBlock(), vue.createBlock(UserTag, {
-                        "current-tenant-id": __props.tenantId,
+                        "current-tenant-id": _ctx.tenantId,
                         key: user.id,
                         "show-tenant": true,
-                        tenants: __props.tenants,
+                        tenants: _ctx.tenants,
                         user,
                         onClick: handleFocus,
                         onClose: ($event) => removeUser(user)
@@ -3753,7 +3687,7 @@
                     /* STABLE */
                   })), [
                     [vue.unref(bkuiVue.bkTooltips), {
-                      content: __props.selectedUsers.slice(visibleUsers.value.length).map((user) => user.display_name).join(","),
+                      content: _ctx.selectedUsers.slice(visibleUsers.value.length).map((user) => user.display_name).join(","),
                       placement: "top"
                     }]
                   ]) : vue.createCommentVNode("v-if", true),
@@ -3763,15 +3697,15 @@
                     ref: collapsedInputRef,
                     class: "search-input collapsed",
                     "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => vue.isRef(searchQuery) ? searchQuery.value = $event : null),
-                    placeholder: !__props.selectedUsers.length ? __props.placeholder : "",
+                    placeholder: !_ctx.selectedUsers.length ? _ctx.placeholder : "",
                     onFocus: handleFocus
                   }, null, 40, _hoisted_3$1), [
                     [vue.vModelText, vue.unref(searchQuery)]
                   ]),
                   vue.createCommentVNode(' 未聚焦状态下的"我"标签 '),
                   vue.createVNode(MeTag, {
-                    "current-user-id": __props.currentUserId,
-                    "is-disabled": !!__props.currentUserId && __props.selectedUsers.some((user) => user[props.exactSearchKey] === __props.currentUserId),
+                    "current-user-id": _ctx.currentUserId,
+                    "is-disabled": !!_ctx.currentUserId && _ctx.selectedUsers.some((user) => user[props.exactSearchKey] === _ctx.currentUserId),
                     onClick: addCurrentUser
                   }, null, 8, ["current-user-id", "is-disabled"])
                 ],
@@ -3789,10 +3723,10 @@
             loading: vue.unref(searchLoading),
             options: options.value,
             "search-query": vue.unref(searchQuery),
-            "tenant-id": __props.tenantId,
-            tenants: __props.tenants,
-            "user-group": __props.userGroup,
-            "user-group-name": __props.userGroupName,
+            "tenant-id": _ctx.tenantId,
+            tenants: _ctx.tenants,
+            "user-group": _ctx.userGroup,
+            "user-group-name": _ctx.userGroupName,
             onSelectUser: addUser
           }, null, 8, ["container-width", "is-show", "loading", "options", "search-query", "tenant-id", "tenants", "user-group", "user-group-name"])
         ])), [
@@ -3801,8 +3735,8 @@
       };
     }
   });
-  const MultipleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-a09f11c3"]]);
-  const _withScopeId = (n) => (vue.pushScopeId("data-v-8b8dd0fd"), n = n(), vue.popScopeId(), n);
+  const MultipleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-1a376d26"]]);
+  const _withScopeId = (n) => (vue.pushScopeId("data-v-22d9b76f"), n = n(), vue.popScopeId(), n);
   const _hoisted_1$1 = { class: "input-container" };
   const _hoisted_2 = {
     key: 0,
@@ -3822,15 +3756,15 @@
     },
     __name: "single-selector",
     props: {
-      modelValue: {},
+      modelValue: { default: "" },
       tenants: {},
-      apiBaseUrl: {},
-      tenantId: {},
-      placeholder: {},
-      currentUserId: {},
-      exactSearchKey: {},
-      userGroup: {},
-      userGroupName: {}
+      apiBaseUrl: { default: "" },
+      tenantId: { default: "" },
+      placeholder: { default: "请输入人员名称搜索" },
+      currentUserId: { default: "" },
+      exactSearchKey: { default: "bk_username" },
+      userGroup: { default: () => [] },
+      userGroupName: { default: "用户群组" }
     },
     emits: ["update:modelValue", "change"],
     setup(__props, { emit: __emit }) {
@@ -3891,7 +3825,6 @@
         try {
           const result = await searchUsers(props.apiBaseUrl, props.tenantId, keyword);
           options.value = formatUsers(result).filter((user) => !selectedUser.value || user.id !== selectedUser.value);
-          console.log("options.value", options.value);
         } catch (error) {
           console.error("获取用户列表失败:", error);
           options.value = [];
@@ -3900,7 +3833,6 @@
         }
       };
       const addUser = (user) => {
-        console.log("addUser", user);
         selectedUser.value = user.id;
         searchQuery.value = "";
         showDropdown.value = false;
@@ -3915,7 +3847,6 @@
         }
       };
       const handleInput = () => {
-        console.log("handleInput", searchQuery.value);
         fetchUsers(searchQuery.value);
         showDropdown.value = searchQuery.value.length >= 2;
       };
@@ -3923,7 +3854,6 @@
         showDropdown.value = false;
       };
       vue.watch(selectedUser, (newVal) => {
-        console.log("selectedUser", newVal);
         emit("update:modelValue", newVal);
       });
       return (_ctx, _cache) => {
@@ -3969,10 +3899,10 @@
             ]),
             vue.createCommentVNode(' "我"标签 '),
             vue.createVNode(MeTag, {
-              "is-disabled": !!_ctx.currentUserId && !!selectedUserInfo.value && selectedUserInfo.value[_ctx.exactSearchKey || "bk_username"] === _ctx.currentUserId,
               "current-user-id": _ctx.currentUserId,
+              "is-disabled": !!_ctx.currentUserId && !!selectedUserInfo.value && selectedUserInfo.value[_ctx.exactSearchKey] === _ctx.currentUserId,
               onClick: addCurrentUser
-            }, null, 8, ["is-disabled", "current-user-id"])
+            }, null, 8, ["current-user-id", "is-disabled"])
           ]),
           vue.createCommentVNode(" 使用新的公共下拉选项组件 "),
           vue.createVNode(SelectionPopover, {
@@ -3993,8 +3923,11 @@
       };
     }
   });
-  const SingleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-8b8dd0fd"]]);
-  const _hoisted_1 = { class: "bk-user-selector" };
+  const SingleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-22d9b76f"]]);
+  const _hoisted_1 = {
+    ref: "containerRef",
+    class: "bk-user-selector"
+  };
   const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "BkUserSelector"
@@ -4027,7 +3960,6 @@
           const ids = Array.isArray(props.modelValue) ? props.modelValue : [];
           if (ids.length > 0) {
             try {
-              console.log(props.exactSearchKey);
               const result = await lookupUsers(props.apiBaseUrl, props.tenantId, props.exactSearchKey, ids);
               selectedUsers.value = formatUsers(result);
             } catch (error) {
@@ -4058,50 +3990,56 @@
         initSelectedUsers();
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("section", _hoisted_1, [
-          vue.createCommentVNode(" 单选模式 "),
-          !_ctx.multiple ? (vue.openBlock(), vue.createBlock(SingleSelector, {
-            key: 0,
-            modelValue: selectedUser.value,
-            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectedUser.value = $event),
-            "api-base-url": _ctx.apiBaseUrl,
-            "current-user-id": _ctx.currentUserId,
-            "exact-search-key": _ctx.exactSearchKey,
-            placeholder: _ctx.placeholder,
-            "tenant-id": _ctx.tenantId,
-            tenants: vue.unref(tenants),
-            "user-group": _ctx.userGroup,
-            "user-group-name": _ctx.userGroupName,
-            onChange: handleUpdateUser
-          }, null, 8, ["modelValue", "api-base-url", "current-user-id", "exact-search-key", "placeholder", "tenant-id", "tenants", "user-group", "user-group-name"])) : (vue.openBlock(), vue.createElementBlock(
-            vue.Fragment,
-            { key: 1 },
-            [
-              vue.createCommentVNode(" 多选模式 "),
-              vue.createVNode(MultipleSelector, {
-                modelValue: selectedUserIds.value,
-                "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => selectedUserIds.value = $event),
-                "api-base-url": _ctx.apiBaseUrl,
-                "current-user-id": _ctx.currentUserId,
-                draggable: _ctx.draggable,
-                "exact-search-key": _ctx.exactSearchKey,
-                placeholder: _ctx.placeholder,
-                "selected-users": selectedUsers.value,
-                "tenant-id": _ctx.tenantId,
-                tenants: vue.unref(tenants),
-                "user-group": _ctx.userGroup,
-                "user-group-name": _ctx.userGroupName,
-                "onUpdate:selectedUsers": handleUpdateSelectedUsers
-              }, null, 8, ["modelValue", "api-base-url", "current-user-id", "draggable", "exact-search-key", "placeholder", "selected-users", "tenant-id", "tenants", "user-group", "user-group-name"])
-            ],
-            2112
-            /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
-          ))
-        ]);
+        return vue.openBlock(), vue.createElementBlock(
+          "section",
+          _hoisted_1,
+          [
+            vue.createCommentVNode(" 单选模式 "),
+            !_ctx.multiple ? (vue.openBlock(), vue.createBlock(SingleSelector, {
+              key: 0,
+              modelValue: selectedUser.value,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectedUser.value = $event),
+              "api-base-url": _ctx.apiBaseUrl,
+              "current-user-id": _ctx.currentUserId,
+              "exact-search-key": _ctx.exactSearchKey,
+              placeholder: _ctx.placeholder,
+              "tenant-id": _ctx.tenantId,
+              tenants: vue.unref(tenants),
+              "user-group": _ctx.userGroup,
+              "user-group-name": _ctx.userGroupName,
+              onChange: handleUpdateUser
+            }, null, 8, ["modelValue", "api-base-url", "current-user-id", "exact-search-key", "placeholder", "tenant-id", "tenants", "user-group", "user-group-name"])) : (vue.openBlock(), vue.createElementBlock(
+              vue.Fragment,
+              { key: 1 },
+              [
+                vue.createCommentVNode(" 多选模式 "),
+                vue.createVNode(MultipleSelector, {
+                  modelValue: selectedUserIds.value,
+                  "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => selectedUserIds.value = $event),
+                  "api-base-url": _ctx.apiBaseUrl,
+                  "current-user-id": _ctx.currentUserId,
+                  draggable: _ctx.draggable,
+                  "exact-search-key": _ctx.exactSearchKey,
+                  placeholder: _ctx.placeholder,
+                  "selected-users": selectedUsers.value,
+                  "tenant-id": _ctx.tenantId,
+                  tenants: vue.unref(tenants),
+                  "user-group": _ctx.userGroup,
+                  "user-group-name": _ctx.userGroupName,
+                  "onUpdate:selectedUsers": handleUpdateSelectedUsers
+                }, null, 8, ["modelValue", "api-base-url", "current-user-id", "draggable", "exact-search-key", "placeholder", "selected-users", "tenant-id", "tenants", "user-group", "user-group-name"])
+              ],
+              2112
+              /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
+            ))
+          ],
+          512
+          /* NEED_PATCH */
+        );
       };
     }
   });
-  const BkUserSelector = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-bc7b4ccd"]]);
+  const BkUserSelector = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-84252deb"]]);
   exports2.BkUserSelector = BkUserSelector;
   exports2.default = BkUserSelector;
   Object.defineProperties(exports2, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });

package/vue3/vue3.css

@@ -24,37 +24,37 @@
   background-color: #f0f1f5;
   color: #c4c6cc;
   cursor: not-allowed;
-}.dropdown-content[data-v-c68dfcac] {
+}.dropdown-content[data-v-01b75e6e] {
   min-height: 40px;
   max-height: 300px;
   overflow-y: auto;
   padding: 5px 0;
 }
-.dropdown-content .no-data[data-v-c68dfcac] {
+.dropdown-content .no-data[data-v-01b75e6e] {
   padding: 10px;
   text-align: center;
   color: #979ba5;
 }
-.dropdown-content .user-group .group-header[data-v-c68dfcac] {
+.dropdown-content .user-group .group-header[data-v-01b75e6e] {
   padding: 8px 12px;
   color: #979ba5;
   display: flex;
   align-items: center;
 }
-.dropdown-content .user-group .group-header .group-count[data-v-c68dfcac] {
+.dropdown-content .user-group .group-header .group-count[data-v-01b75e6e] {
   margin-left: 4px;
 }
-.dropdown-content .user-option[data-v-c68dfcac] {
+.dropdown-content .user-option[data-v-01b75e6e] {
   padding: 8px 12px;
   cursor: pointer;
   display: flex;
   align-items: center;
   height: 32px;
 }
-.dropdown-content .user-option[data-v-c68dfcac]:hover {
+.dropdown-content .user-option[data-v-01b75e6e]:hover {
   background-color: #f5f7fa;
 }
-.dropdown-content .user-option .tenant-name[data-v-c68dfcac] {
+.dropdown-content .user-option .tenant-name[data-v-01b75e6e] {
   color: #f59500;
   margin-left: 4px;
   padding: 0 4px;
@@ -82,11 +82,11 @@
   white-space: nowrap;
   padding: 0 3px;
   border-radius: 2px;
-}.multiple-selector[data-v-a09f11c3] {
+}.multiple-selector[data-v-1a376d26] {
   position: relative;
   width: 100%;
 }
-.multiple-selector .tags-container[data-v-a09f11c3] {
+.multiple-selector .tags-container[data-v-1a376d26] {
   min-height: 32px;
   border: 1px solid #dcdee5;
   border-radius: 2px;
@@ -94,46 +94,46 @@
   transition: all 0.2s ease;
   background-color: #fff;
 }
-.multiple-selector .tags-container.focused[data-v-a09f11c3] {
+.multiple-selector .tags-container.focused[data-v-1a376d26] {
   border-color: #3a84ff;
   box-shadow: 0 0 0 2px rgba(58, 132, 255, 0.1);
 }
-.multiple-selector .tags-container.collapsed[data-v-a09f11c3] {
+.multiple-selector .tags-container.collapsed[data-v-1a376d26] {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
 }
-.multiple-selector .tag-list[data-v-a09f11c3] {
+.multiple-selector .tag-list[data-v-1a376d26] {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
 }
-.multiple-selector .tag-wrapper[data-v-a09f11c3] {
+.multiple-selector .tag-wrapper[data-v-1a376d26] {
   display: inline-flex;
   align-items: center;
   max-width: 100%;
 }
-.multiple-selector .search-input[data-v-a09f11c3] {
+.multiple-selector .search-input[data-v-1a376d26] {
   outline: none;
   border: none;
   height: 28px;
   min-width: 10px;
   background: transparent;
 }
-.multiple-selector .search-input[data-v-a09f11c3]::placeholder {
+.multiple-selector .search-input[data-v-1a376d26]::placeholder {
   color: #c4c6cc;
 }
-.multiple-selector .search-input.inline[data-v-a09f11c3] {
+.multiple-selector .search-input.inline[data-v-1a376d26] {
   min-width: 10px;
 }
-.multiple-selector .search-input.last[data-v-a09f11c3], .multiple-selector .search-input.collapsed[data-v-a09f11c3] {
+.multiple-selector .search-input.last[data-v-1a376d26], .multiple-selector .search-input.collapsed[data-v-1a376d26] {
   flex: 1;
   min-width: 60px;
-}.single-selector[data-v-8b8dd0fd] {
+}.single-selector[data-v-22d9b76f] {
   position: relative;
   width: 100%;
 }
-.input-container[data-v-8b8dd0fd] {
+.input-container[data-v-22d9b76f] {
   position: relative;
   display: flex;
   align-items: center;
@@ -143,21 +143,21 @@
   padding: 0 8px;
   background-color: #fff;
 }
-.input-container[data-v-8b8dd0fd]:focus-within {
+.input-container[data-v-22d9b76f]:focus-within {
   border-color: #3a84ff;
   box-shadow: 0 0 0 2px rgba(58, 132, 255, 0.1);
 }
-.search-input[data-v-8b8dd0fd] {
+.search-input[data-v-22d9b76f] {
   flex: 1;
   outline: none;
   border: none;
   height: 30px;
   background: transparent;
 }
-.search-input[data-v-8b8dd0fd]::placeholder {
+.search-input[data-v-22d9b76f]::placeholder {
   color: #c4c6cc;
 }
-.selected-user[data-v-8b8dd0fd] {
+.selected-user[data-v-22d9b76f] {
   display: inline-flex;
   align-items: center;
   background-color: #f0f1f5;
@@ -167,15 +167,15 @@
   height: 24px;
   max-width: calc(100% - 32px);
 }
-.selected-user .tenant-name[data-v-8b8dd0fd] {
+.selected-user .tenant-name[data-v-22d9b76f] {
   color: #f59500;
   margin-left: 4px;
 }
-.selected-user .close-icon[data-v-8b8dd0fd] {
+.selected-user .close-icon[data-v-22d9b76f] {
   margin-left: 4px;
   cursor: pointer;
   font-style: normal;
-}.bk-user-selector[data-v-bc7b4ccd] {
+}.bk-user-selector[data-v-84252deb] {
   width: 100%;
   position: relative;
   font-size: 12px;