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

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-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*/";
+  __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}.bk-user-selector-popover.bk-popover.bk-pop2-content {\n  padding: 0;\n}.dropdown-content[data-v-54b68f9a] {\n  min-height: 40px;\n  max-height: 300px;\n  overflow-y: auto;\n  padding: 5px 0;\n}\n.dropdown-content .no-data[data-v-54b68f9a] {\n  padding: 10px;\n  text-align: center;\n  color: #979ba5;\n}\n.dropdown-content .user-group .group-header[data-v-54b68f9a] {\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-54b68f9a] {\n  margin-left: 4px;\n}\n.dropdown-content .user-option[data-v-54b68f9a] {\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-54b68f9a]:hover {\n  background-color: #f5f7fa;\n}.user-tag[data-v-487799ec] {\n  margin-right: 4px;\n  margin-left: 0;\n}\n.user-tag.draggable[data-v-487799ec] {\n  cursor: move;\n}\n.user-tag.active[data-v-487799ec] {\n  background-color: #e1ecff;\n  border-color: #3a84ff;\n}\n.user-tag .tag-content .user-name[data-v-487799ec] {\n  overflow: hidden;\n  font-size: 12px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}.multiple-selector[data-v-95b69442] {\n  position: relative;\n  width: 100%;\n}\n.multiple-selector .tags-container[data-v-95b69442] {\n  min-height: 32px;\n  padding: 1px 10px 1px 8px;\n  background-color: #fff;\n  border: 1px solid #c4c6cc;\n  border-radius: 2px;\n  transition: all 0.2s ease;\n}\n.multiple-selector .tags-container.focused[data-v-95b69442] {\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-95b69442] {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n}\n.multiple-selector .tag-list[data-v-95b69442] {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n}\n.multiple-selector .tag-wrapper[data-v-95b69442] {\n  display: inline-flex;\n  align-items: center;\n  max-width: 100%;\n}\n.multiple-selector .search-input[data-v-95b69442] {\n  min-width: 10px;\n  height: 28px;\n  background: transparent;\n  border: none;\n  outline: none;\n}\n.multiple-selector .search-input[data-v-95b69442]::placeholder {\n  color: #c4c6cc;\n}\n.multiple-selector .search-input.inline[data-v-95b69442] {\n  min-width: 10px;\n}\n.multiple-selector .search-input.last[data-v-95b69442], .multiple-selector .search-input.collapsed[data-v-95b69442] {\n  flex: 1;\n  min-width: 60px;\n}.single-selector[data-v-4fec9d7c] {\n  position: relative;\n  width: 100%;\n}\n.input-container[data-v-4fec9d7c] {\n  position: relative;\n  display: flex;\n  align-items: center;\n  min-height: 32px;\n  padding: 0 8px;\n  background-color: #fff;\n  border: 1px solid #c4c6cc;\n  border-radius: 2px;\n}\n.input-container[data-v-4fec9d7c]: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-4fec9d7c] {\n  flex: 1;\n  height: 30px;\n  background: transparent;\n  border: none;\n  outline: none;\n}\n.search-input[data-v-4fec9d7c]::placeholder {\n  color: #c4c6cc;\n}.bk-user-selector[data-v-78f5783f] {\n  position: relative;\n  width: 100%;\n  font-size: 12px;\n}/*$vite$:1*/";
   document.head.appendChild(__vite_style__);
   const getTenants = async (apiBaseUrl, tenantId) => {
     if (!apiBaseUrl || !tenantId) {
@@ -3021,39 +3021,56 @@
   const UserRender = vue.defineComponent({
     name: "UserRender",
     props: {
-      render: {
-        type: Function,
+      user: {
+        type: Object,
         required: true
       },
-      user: {
+      tenantId: {
+        type: String,
+        required: true
+      },
+      tenants: {
         type: Object,
         required: true
+      },
+      render: {
+        type: Function,
+        required: false
       }
     },
     setup(props) {
+      const defaultRender = (h2, props2) => {
+        return h2("div", [
+          h2("span", props2.user.name),
+          props2.user.tenantId !== props2.tenantId && props2.user.tenantId ? h2(
+            "span",
+            {
+              style: {
+                color: "#f59500",
+                marginLeft: "4px"
+              }
+            },
+            `@${props2.tenants[props2.user.tenantId] || props2.user.tenantId}`
+          ) : null
+        ]);
+      };
       return () => {
         try {
-          return props.render(vue.h, props.user);
+          return props.render ? props.render(vue.h, props.user) : defaultRender(vue.h, props);
         } catch (error) {
           console.error("Error rendering tag:", error);
-          return vue.h("div", props.user.name);
+          return defaultRender(vue.h, props);
         }
       };
     }
   });
-  const _hoisted_1$4 = {
+  const _hoisted_1$3 = {
     key: 0,
     class: "no-data"
   };
-  const _hoisted_2$3 = { class: "group-name" };
-  const _hoisted_3$2 = { class: "group-count" };
-  const _hoisted_4$1 = ["onMousedown"];
-  const _hoisted_5 = { key: 0 };
-  const _hoisted_6 = { key: 1 };
-  const _hoisted_7 = {
-    key: 0,
-    class: "tenant-name"
-  };
+  const _hoisted_2$2 = { class: "group-name" };
+  const _hoisted_3$1 = { class: "group-count" };
+  const _hoisted_4 = ["onMousedown"];
   const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "SelectionPopover"
@@ -3074,6 +3091,13 @@
         type: [Number, String],
         default: "auto"
       },
+      /**
+       * popover crossAxis 偏移量
+       */
+      crossAxisOffset: {
+        type: Number,
+        default: 0
+      },
       /**
        * 是否加载中
        */
@@ -3137,7 +3161,7 @@
         type: Function
       }
     },
-    emits: ["select-user"],
+    emits: ["select-user", "click-outside"],
     setup(__props, { emit: __emit }) {
       const props = __props;
       const emit = __emit;
@@ -3162,15 +3186,20 @@
       const selectUser = (user) => {
         emit("select-user", user);
       };
+      const handleClickOutside = ({ event }) => {
+        emit("click-outside", event);
+      };
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createBlock(vue.unref(bkuiVue.Popover), {
           "ext-cls": "bk-user-selector-popover",
           arrow: false,
           "is-show": __props.isShow,
+          offset: { mainAxis: 4, crossAxis: __props.crossAxisOffset },
           width: __props.containerWidth,
           placement: "bottom-start",
           theme: "light",
-          trigger: "manual"
+          trigger: "manual",
+          onClickoutside: handleClickOutside
         }, {
           content: vue.withCtx(() => [
             vue.createVNode(vue.unref(bkuiVue.Loading), {
@@ -3180,7 +3209,7 @@
               mode: "spin"
             }, {
               default: vue.withCtx(() => [
-                __props.options.length === 0 && __props.userGroup.length === 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, [
+                __props.options.length === 0 && __props.userGroup.length === 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [
                   vue.createElementVNode(
                     "span",
                     null,
@@ -3207,14 +3236,14 @@
                         [
                           vue.createElementVNode(
                             "span",
-                            _hoisted_2$3,
+                            _hoisted_2$2,
                             vue.toDisplayString(groupName),
                             1
                             /* TEXT */
                           ),
                           vue.createElementVNode(
                             "span",
-                            _hoisted_3$2,
+                            _hoisted_3$1,
                             "(" + vue.toDisplayString(group.length) + ")",
                             1
                             /* TEXT */
@@ -3232,28 +3261,13 @@
                             key: user.id,
                             onMousedown: vue.withModifiers(($event) => selectUser(user), ["prevent"])
                           }, [
-                            __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,
-                                vue.toDisplayString(user.name),
-                                1
-                                /* TEXT */
-                              ),
-                              user.tenantId !== __props.tenantId && user.tenantId && __props.tenants[user.tenantId] ? (vue.openBlock(), vue.createElementBlock(
-                                "span",
-                                _hoisted_7,
-                                "@" + vue.toDisplayString(__props.tenants[user.tenantId]),
-                                1
-                                /* TEXT */
-                              )) : vue.createCommentVNode("v-if", true)
-                            ]))
-                          ], 40, _hoisted_4$1);
+                            vue.createVNode(vue.unref(UserRender), {
+                              render: __props.renderListItem,
+                              "tenant-id": __props.tenantId,
+                              tenants: __props.tenants,
+                              user
+                            }, null, 8, ["render", "tenant-id", "tenants", "user"])
+                          ], 40, _hoisted_4);
                         }),
                         128
                         /* KEYED_FRAGMENT */
@@ -3270,21 +3284,11 @@
           ]),
           _: 1
           /* STABLE */
-        }, 8, ["is-show", "width"]);
+        }, 8, ["is-show", "offset", "width"]);
       };
     }
   });
-  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"
-  };
+  const SelectionPopover = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-54b68f9a"]]);
   const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "UserTag"
@@ -3316,27 +3320,12 @@
           onClose: handleClose
         }, {
           default: vue.withCtx(() => [
-            _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_3$1,
-                vue.toDisplayString(_ctx.user.name),
-                1
-                /* TEXT */
-              ),
-              _ctx.user.tenantId !== _ctx.currentTenantId && _ctx.user.tenantId ? (vue.openBlock(), vue.createElementBlock(
-                "span",
-                _hoisted_4,
-                " @" + vue.toDisplayString(_ctx.tenants[_ctx.user.tenantId]),
-                1
-                /* TEXT */
-              )) : vue.createCommentVNode("v-if", true)
-            ]))
+            vue.createVNode(vue.unref(UserRender), {
+              render: _ctx.renderTag,
+              "tenant-id": _ctx.currentTenantId,
+              tenants: _ctx.tenants,
+              user: _ctx.user
+            }, null, 8, ["render", "tenant-id", "tenants", "user"])
           ]),
           _: 1
           /* STABLE */
@@ -3344,7 +3333,7 @@
       };
     }
   });
-  const UserTag = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-7099192b"]]);
+  const UserTag = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-487799ec"]]);
   const _hoisted_1$2 = ["onClick"];
   const _hoisted_2$1 = ["placeholder"];
   const _hoisted_3 = ["placeholder"];
@@ -3448,7 +3437,7 @@
           }
         });
       };
-      const handleClickOutside = ({ event }) => {
+      const handleClickOutside = (event) => {
         event.stopPropagation();
         const target = event.target;
         const container = containerRef.value;
@@ -3583,6 +3572,7 @@
           });
         }
       };
+      const crossAxisOffset = vue.ref(0);
       vue.watch(
         () => props.selectedUsers,
         () => {
@@ -3750,25 +3740,42 @@
                       /* KEYED_FRAGMENT */
                     )),
                     vue.createCommentVNode(" 显示折叠标签数量 "),
-                    hiddenCount.value > 0 ? vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(bkuiVue.Tag), {
+                    hiddenCount.value > 0 ? (vue.openBlock(), vue.createBlock(vue.unref(bkuiVue.Popover), {
                       key: 0,
-                      onClick: vue.withModifiers(handleFocus, ["stop"])
+                      placement: "top"
                     }, {
+                      content: vue.withCtx(() => [
+                        (vue.openBlock(true), vue.createElementBlock(
+                          vue.Fragment,
+                          null,
+                          vue.renderList(_ctx.selectedUsers.slice(visibleUsers.value.length), (user) => {
+                            return vue.openBlock(), vue.createBlock(vue.unref(UserRender), {
+                              key: user.id,
+                              "tenant-id": _ctx.tenantId,
+                              tenants: _ctx.tenants,
+                              user
+                            }, null, 8, ["tenant-id", "tenants", "user"]);
+                          }),
+                          128
+                          /* KEYED_FRAGMENT */
+                        ))
+                      ]),
                       default: vue.withCtx(() => [
-                        vue.createTextVNode(
-                          " +" + vue.toDisplayString(hiddenCount.value),
-                          1
-                          /* TEXT */
-                        )
+                        vue.createVNode(vue.unref(bkuiVue.Tag), null, {
+                          default: vue.withCtx(() => [
+                            vue.createTextVNode(
+                              " +" + vue.toDisplayString(hiddenCount.value),
+                              1
+                              /* TEXT */
+                            )
+                          ]),
+                          _: 1
+                          /* STABLE */
+                        })
                       ]),
                       _: 1
                       /* STABLE */
-                    })), [
-                      [vue.unref(bkuiVue.bkTooltips), {
-                        content: _ctx.selectedUsers.slice(visibleUsers.value.length).map((user) => user.display_name).join(","),
-                        placement: "top"
-                      }]
-                    ]) : vue.createCommentVNode("v-if", true),
+                    })) : vue.createCommentVNode("v-if", true),
                     vue.createCommentVNode(" 搜索输入框 "),
                     vue.withDirectives(vue.createElementVNode("input", {
                       ref_key: "collapsedInputRef",
@@ -3797,6 +3804,7 @@
             vue.createCommentVNode(" 下拉选项列表 "),
             vue.createVNode(SelectionPopover, {
               "container-width": containerRef.value ? containerRef.value.offsetWidth : "auto",
+              "cross-axis-offset": crossAxisOffset.value,
               "empty-text": _ctx.emptyText,
               "is-show": showDropdown.value,
               loading: vue.unref(searchLoading),
@@ -3807,9 +3815,9 @@
               tenants: _ctx.tenants,
               "user-group": userGroupFilter.value,
               "user-group-name": _ctx.userGroupName,
-              onClickoutside: handleClickOutside,
+              onClickOutside: handleClickOutside,
               onSelectUser: addUser
-            }, null, 8, ["container-width", "empty-text", "is-show", "loading", "options", "render-list-item", "search-query", "tenant-id", "tenants", "user-group", "user-group-name"])
+            }, null, 8, ["container-width", "cross-axis-offset", "empty-text", "is-show", "loading", "options", "render-list-item", "search-query", "tenant-id", "tenants", "user-group", "user-group-name"])
           ],
           512
           /* NEED_PATCH */
@@ -3817,7 +3825,7 @@
       };
     }
   });
-  const MultipleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-d4f489c3"]]);
+  const MultipleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-95b69442"]]);
   const _hoisted_1$1 = { class: "input-container" };
   const _hoisted_2 = ["placeholder"];
   const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
@@ -3860,9 +3868,7 @@
           type: "userGroup"
         }));
         const list = [...options.value, ...userGroup];
-        const selectedUserInfo2 = list.find((user) => user.id === selectedUser.value);
-        emit("change", selectedUserInfo2 || null);
-        return selectedUserInfo2;
+        return list.find((user) => user.id === selectedUser.value);
       });
       vue.onBeforeMount(async () => {
         if (typeof props.modelValue === "string" && props.modelValue) {
@@ -3937,9 +3943,9 @@
       const handleClickOutside = () => {
         showDropdown.value = false;
       };
-      vue.watch(selectedUser, (newVal) => {
-        emit("update:modelValue", newVal);
-      });
+      vue.watch(selectedUserInfo, (newVal) => {
+        emit("change", newVal || null);
+      }, { immediate: true });
       return (_ctx, _cache) => {
         return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
           ref_key: "containerRef",
@@ -3954,11 +3960,12 @@
               onClick: vue.withModifiers(removeSelectedUser, ["stop"])
             }, [
               vue.createVNode(UserTag, {
+                "current-tenant-id": _ctx.tenantId,
                 "render-tag": _ctx.renderTag,
                 tenants: _ctx.tenants,
                 user: selectedUserInfo.value,
                 onClose: removeSelectedUser
-              }, null, 8, ["render-tag", "tenants", "user"])
+              }, null, 8, ["current-tenant-id", "render-tag", "tenants", "user"])
             ])) : vue.createCommentVNode("v-if", true),
             vue.withDirectives(vue.createElementVNode("input", {
               ref_key: "inputRef",
@@ -3999,7 +4006,7 @@
       };
     }
   });
-  const SingleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-91a75bba"]]);
+  const SingleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-4fec9d7c"]]);
   const _hoisted_1 = {
     ref: "containerRef",
     class: "bk-user-selector"
@@ -4072,13 +4079,15 @@
       vue.watch(selectedUser, (newVal) => {
         if (!props.multiple) {
           emit("update:modelValue", newVal);
+          emit("change", newVal);
         }
-      });
+      }, { immediate: true });
       vue.watch(
         () => props.userGroup,
         () => {
           initSelectedUsers();
-        }
+        },
+        { immediate: true }
       );
       vue.onBeforeMount(() => {
         initSelectedUsers();
@@ -4139,7 +4148,7 @@
       };
     }
   });
-  const BkUserSelector = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c23f5bc9"]]);
+  const BkUserSelector = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-78f5783f"]]);
   exports2.BkUserSelector = BkUserSelector;
   exports2.default = BkUserSelector;
   Object.defineProperties(exports2, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });

package/vue3/vue3.css

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

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

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