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

package/vue2/vue2.css

@@ -1340,141 +1340,129 @@ optgroup {
   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/vue3/index.es.min.js

@@ -1,5 +1,5 @@
 import { ref, onBeforeMount, defineComponent, createElementBlock, createCommentVNode, openBlock, withModifiers, normalizeClass, h, computed, createBlock, unref, withCtx, createVNode, createElementVNode, toDisplayString, Fragment, renderList, watch, nextTick, onMounted, withDirectives, isRef, vModelText, createTextVNode } from "vue";
-import { Popover, Loading, Tag, bkTooltips, clickoutside } from "bkui-vue";
+import { Popover, Loading, Tag, clickoutside } from "bkui-vue";
 const getTenants = async (apiBaseUrl, tenantId) => {
   if (!apiBaseUrl || !tenantId) {
     console.warn("获取租户信息需要提供有效的apiBaseUrl和租户ID");
@@ -3016,39 +3016,56 @@ const MeTag = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-88
 const UserRender = 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(h, props.user);
+        return props.render ? props.render(h, props.user) : defaultRender(h, props);
       } catch (error) {
         console.error("Error rendering tag:", error);
-        return h("div", props.user.name);
+        return defaultRender(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__ */ defineComponent({
   ...{
     name: "SelectionPopover"
@@ -3069,6 +3086,13 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       type: [Number, String],
       default: "auto"
     },
+    /**
+     * popover crossAxis 偏移量
+     */
+    crossAxisOffset: {
+      type: Number,
+      default: 0
+    },
     /**
      * 是否加载中
      */
@@ -3132,7 +3156,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       type: Function
     }
   },
-  emits: ["select-user"],
+  emits: ["select-user", "click-outside"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
@@ -3157,15 +3181,20 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     const selectUser = (user) => {
       emit("select-user", user);
     };
+    const handleClickOutside = ({ event }) => {
+      emit("click-outside", event);
+    };
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(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: withCtx(() => [
           createVNode(unref(Loading), {
@@ -3175,7 +3204,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
             mode: "spin"
           }, {
             default: withCtx(() => [
-              __props.options.length === 0 && __props.userGroup.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_1$4, [
+              __props.options.length === 0 && __props.userGroup.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_1$3, [
                 createElementVNode(
                   "span",
                   null,
@@ -3202,14 +3231,14 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                       [
                         createElementVNode(
                           "span",
-                          _hoisted_2$3,
+                          _hoisted_2$2,
                           toDisplayString(groupName),
                           1
                           /* TEXT */
                         ),
                         createElementVNode(
                           "span",
-                          _hoisted_3$2,
+                          _hoisted_3$1,
                           "(" + toDisplayString(group.length) + ")",
                           1
                           /* TEXT */
@@ -3227,28 +3256,13 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                           key: user.id,
                           onMousedown: withModifiers(($event) => selectUser(user), ["prevent"])
                         }, [
-                          __props.renderListItem ? (openBlock(), createElementBlock("div", _hoisted_5, [
-                            createVNode(unref(UserRender), {
-                              render: __props.renderListItem,
-                              user
-                            }, null, 8, ["render", "user"])
-                          ])) : (openBlock(), createElementBlock("div", _hoisted_6, [
-                            createElementVNode(
-                              "span",
-                              null,
-                              toDisplayString(user.name),
-                              1
-                              /* TEXT */
-                            ),
-                            user.tenantId !== __props.tenantId && user.tenantId && __props.tenants[user.tenantId] ? (openBlock(), createElementBlock(
-                              "span",
-                              _hoisted_7,
-                              "@" + toDisplayString(__props.tenants[user.tenantId]),
-                              1
-                              /* TEXT */
-                            )) : createCommentVNode("v-if", true)
-                          ]))
-                        ], 40, _hoisted_4$1);
+                          createVNode(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 */
@@ -3265,21 +3279,11 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         ]),
         _: 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__ */ defineComponent({
   ...{
     name: "UserTag"
@@ -3311,27 +3315,12 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
         onClose: handleClose
       }, {
         default: withCtx(() => [
-          _ctx.renderTag ? (openBlock(), createElementBlock("div", _hoisted_1$3, [
-            createVNode(unref(UserRender), {
-              render: _ctx.renderTag,
-              user: _ctx.user
-            }, null, 8, ["render", "user"])
-          ])) : (openBlock(), createElementBlock("div", _hoisted_2$2, [
-            createElementVNode(
-              "span",
-              _hoisted_3$1,
-              toDisplayString(_ctx.user.name),
-              1
-              /* TEXT */
-            ),
-            _ctx.user.tenantId !== _ctx.currentTenantId && _ctx.user.tenantId ? (openBlock(), createElementBlock(
-              "span",
-              _hoisted_4,
-              " @" + toDisplayString(_ctx.tenants[_ctx.user.tenantId]),
-              1
-              /* TEXT */
-            )) : createCommentVNode("v-if", true)
-          ]))
+          createVNode(unref(UserRender), {
+            render: _ctx.renderTag,
+            "tenant-id": _ctx.currentTenantId,
+            tenants: _ctx.tenants,
+            user: _ctx.user
+          }, null, 8, ["render", "tenant-id", "tenants", "user"])
         ]),
         _: 1
         /* STABLE */
@@ -3339,7 +3328,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-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"];
@@ -3443,7 +3432,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         }
       });
     };
-    const handleClickOutside = ({ event }) => {
+    const handleClickOutside = (event) => {
       event.stopPropagation();
       const target = event.target;
       const container = containerRef.value;
@@ -3578,6 +3567,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         });
       }
     };
+    const crossAxisOffset = ref(0);
     watch(
       () => props.selectedUsers,
       () => {
@@ -3745,25 +3735,42 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                     /* KEYED_FRAGMENT */
                   )),
                   createCommentVNode(" 显示折叠标签数量 "),
-                  hiddenCount.value > 0 ? withDirectives((openBlock(), createBlock(unref(Tag), {
+                  hiddenCount.value > 0 ? (openBlock(), createBlock(unref(Popover), {
                     key: 0,
-                    onClick: withModifiers(handleFocus, ["stop"])
+                    placement: "top"
                   }, {
+                    content: withCtx(() => [
+                      (openBlock(true), createElementBlock(
+                        Fragment,
+                        null,
+                        renderList(_ctx.selectedUsers.slice(visibleUsers.value.length), (user) => {
+                          return openBlock(), createBlock(unref(UserRender), {
+                            key: user.id,
+                            "tenant-id": _ctx.tenantId,
+                            tenants: _ctx.tenants,
+                            user
+                          }, null, 8, ["tenant-id", "tenants", "user"]);
+                        }),
+                        128
+                        /* KEYED_FRAGMENT */
+                      ))
+                    ]),
                     default: withCtx(() => [
-                      createTextVNode(
-                        " +" + toDisplayString(hiddenCount.value),
-                        1
-                        /* TEXT */
-                      )
+                      createVNode(unref(Tag), null, {
+                        default: withCtx(() => [
+                          createTextVNode(
+                            " +" + toDisplayString(hiddenCount.value),
+                            1
+                            /* TEXT */
+                          )
+                        ]),
+                        _: 1
+                        /* STABLE */
+                      })
                     ]),
                     _: 1
                     /* STABLE */
-                  })), [
-                    [unref(bkTooltips), {
-                      content: _ctx.selectedUsers.slice(visibleUsers.value.length).map((user) => user.display_name).join(","),
-                      placement: "top"
-                    }]
-                  ]) : createCommentVNode("v-if", true),
+                  })) : createCommentVNode("v-if", true),
                   createCommentVNode(" 搜索输入框 "),
                   withDirectives(createElementVNode("input", {
                     ref_key: "collapsedInputRef",
@@ -3792,6 +3799,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
           createCommentVNode(" 下拉选项列表 "),
           createVNode(SelectionPopover, {
             "container-width": containerRef.value ? containerRef.value.offsetWidth : "auto",
+            "cross-axis-offset": crossAxisOffset.value,
             "empty-text": _ctx.emptyText,
             "is-show": showDropdown.value,
             loading: unref(searchLoading),
@@ -3802,9 +3810,9 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
             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 */
@@ -3812,7 +3820,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-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__ */ defineComponent({
@@ -3855,9 +3863,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         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);
     });
     onBeforeMount(async () => {
       if (typeof props.modelValue === "string" && props.modelValue) {
@@ -3932,9 +3938,9 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const handleClickOutside = () => {
       showDropdown.value = false;
     };
-    watch(selectedUser, (newVal) => {
-      emit("update:modelValue", newVal);
-    });
+    watch(selectedUserInfo, (newVal) => {
+      emit("change", newVal || null);
+    }, { immediate: true });
     return (_ctx, _cache) => {
       return withDirectives((openBlock(), createElementBlock("div", {
         ref_key: "containerRef",
@@ -3949,11 +3955,12 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             onClick: withModifiers(removeSelectedUser, ["stop"])
           }, [
             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"])
           ])) : createCommentVNode("v-if", true),
           withDirectives(createElementVNode("input", {
             ref_key: "inputRef",
@@ -3994,7 +4001,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-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"
@@ -4067,13 +4074,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     watch(selectedUser, (newVal) => {
       if (!props.multiple) {
         emit("update:modelValue", newVal);
+        emit("change", newVal);
       }
-    });
+    }, { immediate: true });
     watch(
       () => props.userGroup,
       () => {
         initSelectedUsers();
-      }
+      },
+      { immediate: true }
     );
     onBeforeMount(() => {
       initSelectedUsers();
@@ -4134,7 +4143,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const BkUserSelector = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c23f5bc9"]]);
+const BkUserSelector = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-78f5783f"]]);
 export {
   BkUserSelector,
   BkUserSelector as default