@blueking/bk-user-selector 0.0.19 → 0.0.21

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-f47cc878] {\n  min-height: 40px;\n  max-height: 300px;\n  overflow-y: auto;\n  padding: 5px 0;\n}\n.dropdown-content .no-data[data-v-f47cc878] {\n  padding: 10px;\n  text-align: center;\n  color: #979ba5;\n}\n.dropdown-content .user-group .group-header[data-v-f47cc878] {\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-f47cc878] {\n  margin-left: 4px;\n}\n.dropdown-content .user-option[data-v-f47cc878] {\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-f47cc878]:hover {\n  background-color: #f5f7fa;\n}\n.dropdown-content .user-option .tenant-name[data-v-f47cc878] {\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-87c12feb] {\n  margin-right: 4px;\n  margin-left: 0;\n}\n.user-tag.draggable[data-v-87c12feb] {\n  cursor: move;\n}\n.user-tag.active[data-v-87c12feb] {\n  background-color: #e1ecff;\n  border-color: #3a84ff;\n}\n.user-tag .tag-content .user-name[data-v-87c12feb] {\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-87c12feb] {\n  color: #f59500;\n  margin-left: 3px;\n  white-space: nowrap;\n  padding: 0 3px;\n  border-radius: 2px;\n}.multiple-selector[data-v-1b988eae] {\n  position: relative;\n  width: 100%;\n}\n.multiple-selector .tags-container[data-v-1b988eae] {\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-1b988eae] {\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-1b988eae] {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n}\n.multiple-selector .tag-list[data-v-1b988eae] {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n}\n.multiple-selector .tag-wrapper[data-v-1b988eae] {\n  display: inline-flex;\n  align-items: center;\n  max-width: 100%;\n}\n.multiple-selector .search-input[data-v-1b988eae] {\n  outline: none;\n  border: none;\n  height: 28px;\n  min-width: 10px;\n  background: transparent;\n}\n.multiple-selector .search-input[data-v-1b988eae]::placeholder {\n  color: #c4c6cc;\n}\n.multiple-selector .search-input.inline[data-v-1b988eae] {\n  min-width: 10px;\n}\n.multiple-selector .search-input.last[data-v-1b988eae], .multiple-selector .search-input.collapsed[data-v-1b988eae] {\n  flex: 1;\n  min-width: 60px;\n}.single-selector[data-v-5040d42f] {\n  position: relative;\n  width: 100%;\n}\n.input-container[data-v-5040d42f] {\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-5040d42f]: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-5040d42f] {\n  flex: 1;\n  outline: none;\n  border: none;\n  height: 30px;\n  background: transparent;\n}\n.search-input[data-v-5040d42f]::placeholder {\n  color: #c4c6cc;\n}\n.selected-user[data-v-5040d42f] {\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-5040d42f] {\n  color: #f59500;\n  margin-left: 4px;\n}\n.selected-user .close-icon[data-v-5040d42f] {\n  margin-left: 4px;\n  cursor: pointer;\n  font-style: normal;\n}.bk-user-selector[data-v-c23f5bc9] {\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-a1278ff6] {\n  min-height: 40px;\n  max-height: 300px;\n  overflow-y: auto;\n  padding: 5px 0;\n}\n.dropdown-content .no-data[data-v-a1278ff6] {\n  padding: 10px;\n  text-align: center;\n  color: #979ba5;\n}\n.dropdown-content .user-group .group-header[data-v-a1278ff6] {\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-a1278ff6] {\n  margin-left: 4px;\n}\n.dropdown-content .user-option[data-v-a1278ff6] {\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-a1278ff6]:hover {\n  background-color: #f5f7fa;\n}\n.dropdown-content .user-option .tenant-name[data-v-a1278ff6] {\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-7099192b] {\n  margin-right: 4px;\n  margin-left: 0;\n}\n.user-tag.draggable[data-v-7099192b] {\n  cursor: move;\n}\n.user-tag.active[data-v-7099192b] {\n  background-color: #e1ecff;\n  border-color: #3a84ff;\n}\n.user-tag .tag-content .user-name[data-v-7099192b] {\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-7099192b] {\n  color: #f59500;\n  margin-left: 3px;\n  white-space: nowrap;\n  padding: 0 3px;\n  border-radius: 2px;\n}.multiple-selector[data-v-d4f489c3] {\n  position: relative;\n  width: 100%;\n}\n.multiple-selector .tags-container[data-v-d4f489c3] {\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-d4f489c3] {\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-d4f489c3] {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n}\n.multiple-selector .tag-list[data-v-d4f489c3] {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n}\n.multiple-selector .tag-wrapper[data-v-d4f489c3] {\n  display: inline-flex;\n  align-items: center;\n  max-width: 100%;\n}\n.multiple-selector .search-input[data-v-d4f489c3] {\n  outline: none;\n  border: none;\n  height: 28px;\n  min-width: 10px;\n  background: transparent;\n}\n.multiple-selector .search-input[data-v-d4f489c3]::placeholder {\n  color: #c4c6cc;\n}\n.multiple-selector .search-input.inline[data-v-d4f489c3] {\n  min-width: 10px;\n}\n.multiple-selector .search-input.last[data-v-d4f489c3], .multiple-selector .search-input.collapsed[data-v-d4f489c3] {\n  flex: 1;\n  min-width: 60px;\n}.single-selector[data-v-91a75bba] {\n  position: relative;\n  width: 100%;\n}\n.input-container[data-v-91a75bba] {\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-91a75bba]: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-91a75bba] {\n  flex: 1;\n  outline: none;\n  border: none;\n  height: 30px;\n  background: transparent;\n}\n.search-input[data-v-91a75bba]::placeholder {\n  color: #c4c6cc;\n}.bk-user-selector[data-v-c23f5bc9] {\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) {
@@ -2929,7 +2929,7 @@
     const loading = vue.ref(false);
     const searchQuery = vue.ref("");
     const performSearch = async (keyword) => {
-      if (!keyword || keyword.length < 2) {
+      if (!(keyword == null ? void 0 : keyword.length)) {
         searchResults.value = [];
         return;
       }
@@ -3018,14 +3018,39 @@
     return target;
   };
   const MeTag = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-887b7c44"]]);
+  const UserRender = vue.defineComponent({
+    name: "UserRender",
+    props: {
+      render: {
+        type: Function,
+        required: true
+      },
+      user: {
+        type: Object,
+        required: true
+      }
+    },
+    setup(props) {
+      return () => {
+        try {
+          return props.render(vue.h, props.user);
+        } catch (error) {
+          console.error("Error rendering tag:", error);
+          return vue.h("div", props.user.name);
+        }
+      };
+    }
+  });
   const _hoisted_1$4 = {
     key: 0,
     class: "no-data"
   };
   const _hoisted_2$3 = { class: "group-name" };
-  const _hoisted_3$3 = { class: "group-count" };
+  const _hoisted_3$2 = { class: "group-count" };
   const _hoisted_4$1 = ["onMousedown"];
-  const _hoisted_5 = {
+  const _hoisted_5 = { key: 0 };
+  const _hoisted_6 = { key: 1 };
+  const _hoisted_7 = {
     key: 0,
     class: "tenant-name"
   };
@@ -3104,6 +3129,12 @@
       emptyText: {
         type: String,
         default: "无匹配人员"
+      },
+      /**
+       * 渲染列表项
+       */
+      renderListItem: {
+        type: Function
       }
     },
     emits: ["select-user"],
@@ -3113,7 +3144,7 @@
       const groupedUsers = vue.computed(() => {
         const groups = {};
         if (Array.isArray(props.userGroup) && props.userGroup.length > 0) {
-          groups[props.userGroupName] = props.userGroup.filter((group) => !group.hidden).map((group) => ({
+          groups[props.userGroupName] = props.userGroup.map((group) => ({
             ...group,
             tenantId: "",
             type: "userGroup"
@@ -3153,7 +3184,7 @@
                   vue.createElementVNode(
                     "span",
                     null,
-                    vue.toDisplayString(__props.searchQuery.length > 1 ? __props.emptyText : "请至少输入2个字符搜索"),
+                    vue.toDisplayString(__props.emptyText),
                     1
                     /* TEXT */
                   )
@@ -3183,7 +3214,7 @@
                           ),
                           vue.createElementVNode(
                             "span",
-                            _hoisted_3$3,
+                            _hoisted_3$2,
                             "(" + vue.toDisplayString(group.length) + ")",
                             1
                             /* TEXT */
@@ -3201,7 +3232,12 @@
                             key: user.id,
                             onMousedown: vue.withModifiers(($event) => selectUser(user), ["prevent"])
                           }, [
-                            vue.createElementVNode("div", null, [
+                            __props.renderListItem ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
+                              vue.createVNode(vue.unref(UserRender), {
+                                render: __props.renderListItem,
+                                user
+                              }, null, 8, ["render", "user"])
+                            ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, [
                               vue.createElementVNode(
                                 "span",
                                 null,
@@ -3211,12 +3247,12 @@
                               ),
                               user.tenantId !== __props.tenantId && user.tenantId && __props.tenants[user.tenantId] ? (vue.openBlock(), vue.createElementBlock(
                                 "span",
-                                _hoisted_5,
+                                _hoisted_7,
                                 "@" + vue.toDisplayString(__props.tenants[user.tenantId]),
                                 1
                                 /* TEXT */
                               )) : vue.createCommentVNode("v-if", true)
-                            ])
+                            ]))
                           ], 40, _hoisted_4$1);
                         }),
                         128
@@ -3238,10 +3274,14 @@
       };
     }
   });
-  const SelectionPopover = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-f47cc878"]]);
-  const _hoisted_1$3 = { class: "tag-content" };
-  const _hoisted_2$2 = { class: "user-name" };
-  const _hoisted_3$2 = {
+  const SelectionPopover = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-a1278ff6"]]);
+  const _hoisted_1$3 = { key: 0 };
+  const _hoisted_2$2 = {
+    key: 1,
+    class: "tag-content"
+  };
+  const _hoisted_3$1 = { class: "user-name" };
+  const _hoisted_4 = {
     key: 0,
     class: "tenant-name"
   };
@@ -3256,7 +3296,8 @@
       currentTenantId: {},
       draggable: { type: Boolean },
       active: { type: Boolean },
-      showTenant: { type: Boolean }
+      showTenant: { type: Boolean },
+      renderTag: { type: Function }
     },
     emits: ["click", "close"],
     setup(__props, { emit: __emit }) {
@@ -3275,22 +3316,27 @@
           onClose: handleClose
         }, {
           default: vue.withCtx(() => [
-            vue.createElementVNode("div", _hoisted_1$3, [
+            _ctx.renderTag ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [
+              vue.createVNode(vue.unref(UserRender), {
+                render: _ctx.renderTag,
+                user: _ctx.user
+              }, null, 8, ["render", "user"])
+            ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$2, [
               vue.createElementVNode(
                 "span",
-                _hoisted_2$2,
+                _hoisted_3$1,
                 vue.toDisplayString(_ctx.user.name),
                 1
                 /* TEXT */
               ),
               _ctx.user.tenantId !== _ctx.currentTenantId && _ctx.user.tenantId ? (vue.openBlock(), vue.createElementBlock(
                 "span",
-                _hoisted_3$2,
+                _hoisted_4,
                 " @" + vue.toDisplayString(_ctx.tenants[_ctx.user.tenantId]),
                 1
                 /* TEXT */
               )) : vue.createCommentVNode("v-if", true)
-            ])
+            ]))
           ]),
           _: 1
           /* STABLE */
@@ -3298,10 +3344,10 @@
       };
     }
   });
-  const UserTag = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-87c12feb"]]);
+  const UserTag = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-7099192b"]]);
   const _hoisted_1$2 = ["onClick"];
   const _hoisted_2$1 = ["placeholder"];
-  const _hoisted_3$1 = ["placeholder"];
+  const _hoisted_3 = ["placeholder"];
   const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "BkUserSelectorMultiple"
@@ -3350,6 +3396,9 @@
       const options = vue.computed(() => {
         return searchResults.value.filter((user) => !props.selectedUsers.some((selectedUser) => selectedUser.id === user.id));
       });
+      const userGroupFilter = vue.computed(() => {
+        return props.userGroup.filter((group) => !props.selectedUsers.some((user) => user.id === group.id) && !group.hidden);
+      });
       const initSortable = () => {
         if (!props.draggable || !sortableContainerRef.value) return;
         if (sortableInstance.value) {
@@ -3439,7 +3488,7 @@
         if (!isFocused.value) {
           isFocused.value = true;
         }
-        if (searchQuery.value.length >= 2) {
+        if (searchQuery.value.length >= 1) {
           showDropdown.value = true;
         }
       };
@@ -3608,11 +3657,12 @@
                             active: index === activeTagIndex.value,
                             "current-tenant-id": _ctx.tenantId,
                             draggable: _ctx.draggable,
+                            "render-tag": _ctx.renderTag,
                             tenants: _ctx.tenants,
                             user,
                             onClick: ($event) => handleTagClick(index),
                             onClose: ($event) => removeUser(user)
-                          }, null, 8, ["active", "current-tenant-id", "draggable", "tenants", "user", "onClick", "onClose"]),
+                          }, null, 8, ["active", "current-tenant-id", "draggable", "render-tag", "tenants", "user", "onClick", "onClose"]),
                           vue.createCommentVNode(" 在当前激活标签后插入输入框 "),
                           index === activeTagIndex.value && activeTagIndex.value !== _ctx.selectedUsers.length - 1 ? vue.withDirectives((vue.openBlock(), vue.createElementBlock(
                             "input",
@@ -3688,12 +3738,13 @@
                         return vue.openBlock(), vue.createBlock(UserTag, {
                           "current-tenant-id": _ctx.tenantId,
                           key: user.id,
+                          "render-tag": _ctx.renderTag,
                           "show-tenant": true,
                           tenants: _ctx.tenants,
                           user,
                           onClick: handleFocus,
                           onClose: ($event) => removeUser(user)
-                        }, null, 8, ["current-tenant-id", "tenants", "user", "onClose"]);
+                        }, null, 8, ["current-tenant-id", "render-tag", "tenants", "user", "onClose"]);
                       }),
                       128
                       /* KEYED_FRAGMENT */
@@ -3726,7 +3777,7 @@
                       "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => vue.isRef(searchQuery) ? searchQuery.value = $event : null),
                       placeholder: !_ctx.selectedUsers.length ? _ctx.placeholder : "",
                       onFocus: handleFocus
-                    }, null, 40, _hoisted_3$1), [
+                    }, null, 40, _hoisted_3), [
                       [vue.vModelText, vue.unref(searchQuery)]
                     ]),
                     vue.createCommentVNode(' 未聚焦状态下的"我"标签 '),
@@ -3750,14 +3801,15 @@
               "is-show": showDropdown.value,
               loading: vue.unref(searchLoading),
               options: options.value,
+              "render-list-item": _ctx.renderListItem,
               "search-query": vue.unref(searchQuery),
               "tenant-id": _ctx.tenantId,
               tenants: _ctx.tenants,
-              "user-group": _ctx.userGroup,
+              "user-group": userGroupFilter.value,
               "user-group-name": _ctx.userGroupName,
               onClickoutside: handleClickOutside,
               onSelectUser: addUser
-            }, null, 8, ["container-width", "empty-text", "is-show", "loading", "options", "search-query", "tenant-id", "tenants", "user-group", "user-group-name"])
+            }, null, 8, ["container-width", "empty-text", "is-show", "loading", "options", "render-list-item", "search-query", "tenant-id", "tenants", "user-group", "user-group-name"])
           ],
           512
           /* NEED_PATCH */
@@ -3765,21 +3817,9 @@
       };
     }
   });
-  const MultipleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-1b988eae"]]);
-  const _withScopeId = (n) => (vue.pushScopeId("data-v-5040d42f"), n = n(), vue.popScopeId(), n);
+  const MultipleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-d4f489c3"]]);
   const _hoisted_1$1 = { class: "input-container" };
-  const _hoisted_2 = {
-    key: 0,
-    class: "tenant-name"
-  };
-  const _hoisted_3 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ vue.createElementVNode(
-    "i",
-    { class: "close-icon" },
-    "×",
-    -1
-    /* HOISTED */
-  ));
-  const _hoisted_4 = ["placeholder"];
+  const _hoisted_2 = ["placeholder"];
   const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "BkUserSelectorSingle"
@@ -3810,6 +3850,9 @@
       const selectedUser = vue.ref(props.modelValue || "");
       const searchQuery = vue.ref("");
       const showDropdown = vue.ref(false);
+      const userGroupFilter = vue.computed(() => {
+        return props.userGroup.filter((group) => group.id !== selectedUser.value && !group.hidden);
+      });
       const selectedUserInfo = vue.computed(() => {
         const userGroup = (props.userGroup || []).map((group) => ({
           ...group,
@@ -3858,7 +3901,7 @@
         }
       };
       const fetchUsers = async (keyword = "") => {
-        if (!keyword || keyword.length < 2) {
+        if (!(keyword == null ? void 0 : keyword.length)) {
           options.value = [];
           return;
         }
@@ -3883,13 +3926,13 @@
         searchQuery.value = "";
       };
       const handleInputFocus = () => {
-        if (searchQuery.value.length >= 2 || Array.isArray(props.userGroup) && props.userGroup.length > 0) {
+        if (searchQuery.value.length >= 1 || Array.isArray(props.userGroup) && props.userGroup.length > 0) {
           showDropdown.value = true;
         }
       };
       const handleInput = () => {
         fetchUsers(searchQuery.value);
-        showDropdown.value = searchQuery.value.length >= 2;
+        showDropdown.value = searchQuery.value.length >= 1;
       };
       const handleClickOutside = () => {
         showDropdown.value = false;
@@ -3908,24 +3951,14 @@
             vue.createCommentVNode(" 用户标签显示 "),
             selectedUserInfo.value ? (vue.openBlock(), vue.createElementBlock("div", {
               key: 0,
-              class: "selected-user",
               onClick: vue.withModifiers(removeSelectedUser, ["stop"])
             }, [
-              vue.createElementVNode(
-                "span",
-                null,
-                vue.toDisplayString(selectedUserInfo.value.name),
-                1
-                /* TEXT */
-              ),
-              selectedUserInfo.value.tenantId !== _ctx.tenantId && selectedUserInfo.value.tenantId && _ctx.tenants[selectedUserInfo.value.tenantId] ? (vue.openBlock(), vue.createElementBlock(
-                "span",
-                _hoisted_2,
-                "@" + vue.toDisplayString(_ctx.tenants[selectedUserInfo.value.tenantId]),
-                1
-                /* TEXT */
-              )) : vue.createCommentVNode("v-if", true),
-              _hoisted_3
+              vue.createVNode(UserTag, {
+                "render-tag": _ctx.renderTag,
+                tenants: _ctx.tenants,
+                user: selectedUserInfo.value,
+                onClose: removeSelectedUser
+              }, null, 8, ["render-tag", "tenants", "user"])
             ])) : vue.createCommentVNode("v-if", true),
             vue.withDirectives(vue.createElementVNode("input", {
               ref_key: "inputRef",
@@ -3935,7 +3968,7 @@
               placeholder: selectedUserInfo.value ? "" : _ctx.placeholder,
               onFocus: handleInputFocus,
               onInput: handleInput
-            }, null, 40, _hoisted_4), [
+            }, null, 40, _hoisted_2), [
               [vue.vModelText, searchQuery.value]
             ]),
             vue.createCommentVNode(' "我"标签 '),
@@ -3952,20 +3985,21 @@
             "is-show": showDropdown.value,
             loading: isLoading.value,
             options: options.value,
+            "render-list-item": _ctx.renderListItem,
             "search-query": searchQuery.value,
             "tenant-id": _ctx.tenantId,
             tenants: _ctx.tenants,
-            "user-group": _ctx.userGroup,
+            "user-group": userGroupFilter.value,
             "user-group-name": _ctx.userGroupName,
             onSelectUser: addUser
-          }, null, 8, ["container-width", "empty-text", "is-show", "loading", "options", "search-query", "tenant-id", "tenants", "user-group", "user-group-name"])
+          }, null, 8, ["container-width", "empty-text", "is-show", "loading", "options", "render-list-item", "search-query", "tenant-id", "tenants", "user-group", "user-group-name"])
         ])), [
           [vue.unref(bkuiVue.clickoutside), handleClickOutside]
         ]);
       };
     }
   });
-  const SingleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-5040d42f"]]);
+  const SingleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-91a75bba"]]);
   const _hoisted_1 = {
     ref: "containerRef",
     class: "bk-user-selector"

package/vue3/vue3.css

@@ -24,70 +24,70 @@
   background-color: #f0f1f5;
   color: #c4c6cc;
   cursor: not-allowed;
-}.dropdown-content[data-v-f47cc878] {
+}.dropdown-content[data-v-a1278ff6] {
   min-height: 40px;
   max-height: 300px;
   overflow-y: auto;
   padding: 5px 0;
 }
-.dropdown-content .no-data[data-v-f47cc878] {
+.dropdown-content .no-data[data-v-a1278ff6] {
   padding: 10px;
   text-align: center;
   color: #979ba5;
 }
-.dropdown-content .user-group .group-header[data-v-f47cc878] {
+.dropdown-content .user-group .group-header[data-v-a1278ff6] {
   padding: 8px 12px;
   color: #979ba5;
   display: flex;
   align-items: center;
 }
-.dropdown-content .user-group .group-header .group-count[data-v-f47cc878] {
+.dropdown-content .user-group .group-header .group-count[data-v-a1278ff6] {
   margin-left: 4px;
 }
-.dropdown-content .user-option[data-v-f47cc878] {
+.dropdown-content .user-option[data-v-a1278ff6] {
   padding: 8px 12px;
   cursor: pointer;
   display: flex;
   align-items: center;
   height: 32px;
 }
-.dropdown-content .user-option[data-v-f47cc878]:hover {
+.dropdown-content .user-option[data-v-a1278ff6]:hover {
   background-color: #f5f7fa;
 }
-.dropdown-content .user-option .tenant-name[data-v-f47cc878] {
+.dropdown-content .user-option .tenant-name[data-v-a1278ff6] {
   color: #f59500;
   margin-left: 4px;
   padding: 0 4px;
 }.bk-user-selector-popover.bk-popover.bk-pop2-content {
   padding: 0;
-}.user-tag[data-v-87c12feb] {
+}.user-tag[data-v-7099192b] {
   margin-right: 4px;
   margin-left: 0;
 }
-.user-tag.draggable[data-v-87c12feb] {
+.user-tag.draggable[data-v-7099192b] {
   cursor: move;
 }
-.user-tag.active[data-v-87c12feb] {
+.user-tag.active[data-v-7099192b] {
   background-color: #e1ecff;
   border-color: #3a84ff;
 }
-.user-tag .tag-content .user-name[data-v-87c12feb] {
+.user-tag .tag-content .user-name[data-v-7099192b] {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   font-size: 12px;
 }
-.user-tag .tag-content .tenant-name[data-v-87c12feb] {
+.user-tag .tag-content .tenant-name[data-v-7099192b] {
   color: #f59500;
   margin-left: 3px;
   white-space: nowrap;
   padding: 0 3px;
   border-radius: 2px;
-}.multiple-selector[data-v-1b988eae] {
+}.multiple-selector[data-v-d4f489c3] {
   position: relative;
   width: 100%;
 }
-.multiple-selector .tags-container[data-v-1b988eae] {
+.multiple-selector .tags-container[data-v-d4f489c3] {
   min-height: 32px;
   border: 1px solid #dcdee5;
   border-radius: 2px;
@@ -95,46 +95,46 @@
   transition: all 0.2s ease;
   background-color: #fff;
 }
-.multiple-selector .tags-container.focused[data-v-1b988eae] {
+.multiple-selector .tags-container.focused[data-v-d4f489c3] {
   border-color: #3a84ff;
   box-shadow: 0 0 0 2px rgba(58, 132, 255, 0.1);
 }
-.multiple-selector .tags-container.collapsed[data-v-1b988eae] {
+.multiple-selector .tags-container.collapsed[data-v-d4f489c3] {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
 }
-.multiple-selector .tag-list[data-v-1b988eae] {
+.multiple-selector .tag-list[data-v-d4f489c3] {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
 }
-.multiple-selector .tag-wrapper[data-v-1b988eae] {
+.multiple-selector .tag-wrapper[data-v-d4f489c3] {
   display: inline-flex;
   align-items: center;
   max-width: 100%;
 }
-.multiple-selector .search-input[data-v-1b988eae] {
+.multiple-selector .search-input[data-v-d4f489c3] {
   outline: none;
   border: none;
   height: 28px;
   min-width: 10px;
   background: transparent;
 }
-.multiple-selector .search-input[data-v-1b988eae]::placeholder {
+.multiple-selector .search-input[data-v-d4f489c3]::placeholder {
   color: #c4c6cc;
 }
-.multiple-selector .search-input.inline[data-v-1b988eae] {
+.multiple-selector .search-input.inline[data-v-d4f489c3] {
   min-width: 10px;
 }
-.multiple-selector .search-input.last[data-v-1b988eae], .multiple-selector .search-input.collapsed[data-v-1b988eae] {
+.multiple-selector .search-input.last[data-v-d4f489c3], .multiple-selector .search-input.collapsed[data-v-d4f489c3] {
   flex: 1;
   min-width: 60px;
-}.single-selector[data-v-5040d42f] {
+}.single-selector[data-v-91a75bba] {
   position: relative;
   width: 100%;
 }
-.input-container[data-v-5040d42f] {
+.input-container[data-v-91a75bba] {
   position: relative;
   display: flex;
   align-items: center;
@@ -144,38 +144,19 @@
   padding: 0 8px;
   background-color: #fff;
 }
-.input-container[data-v-5040d42f]:focus-within {
+.input-container[data-v-91a75bba]:focus-within {
   border-color: #3a84ff;
   box-shadow: 0 0 0 2px rgba(58, 132, 255, 0.1);
 }
-.search-input[data-v-5040d42f] {
+.search-input[data-v-91a75bba] {
   flex: 1;
   outline: none;
   border: none;
   height: 30px;
   background: transparent;
 }
-.search-input[data-v-5040d42f]::placeholder {
+.search-input[data-v-91a75bba]::placeholder {
   color: #c4c6cc;
-}
-.selected-user[data-v-5040d42f] {
-  display: inline-flex;
-  align-items: center;
-  background-color: #f0f1f5;
-  border-radius: 2px;
-  padding: 0 8px;
-  margin-right: 8px;
-  height: 24px;
-  max-width: calc(100% - 32px);
-}
-.selected-user .tenant-name[data-v-5040d42f] {
-  color: #f59500;
-  margin-left: 4px;
-}
-.selected-user .close-icon[data-v-5040d42f] {
-  margin-left: 4px;
-  cursor: pointer;
-  font-style: normal;
 }.bk-user-selector[data-v-c23f5bc9] {
   width: 100%;
   position: relative;