@blueking/bk-user-selector 0.0.21 → 0.0.22

package/package.json

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

package/typings/components/selection-popover.vue.d.ts

@@ -18,6 +18,13 @@ declare const _default: import("vue").DefineComponent<{
         type: (StringConstructor | NumberConstructor)[];
         default: string;
     };
+    /**
+     * popover crossAxis 偏移量
+     */
+    crossAxisOffset: {
+        type: NumberConstructor;
+        default: number;
+    };
     /**
      * 是否加载中
      */
@@ -86,6 +93,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "select-user": (...args: any[]) => void;
+    "click-outside": (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     /**
      * 是否显示下拉菜单
@@ -101,6 +109,13 @@ declare const _default: import("vue").DefineComponent<{
         type: (StringConstructor | NumberConstructor)[];
         default: string;
     };
+    /**
+     * popover crossAxis 偏移量
+     */
+    crossAxisOffset: {
+        type: NumberConstructor;
+        default: number;
+    };
     /**
      * 是否加载中
      */
@@ -169,14 +184,16 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>> & {
     "onSelect-user"?: ((...args: any[]) => any) | undefined;
+    "onClick-outside"?: ((...args: any[]) => any) | undefined;
 }, {
     tenantId: string;
+    tenants: Record<string, string>;
     isShow: boolean;
     containerWidth: string | number;
+    crossAxisOffset: number;
     loading: boolean;
     options: FormattedUser[];
     searchQuery: string;
-    tenants: Record<string, string>;
     userGroup: {
         id: string;
         name: string;

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

@@ -1,21 +1,37 @@
 import type { FormattedUser } from '../types';
 declare const _default: import("vue").DefineComponent<{
-    render: {
-        type: FunctionConstructor;
-        required: true;
-    };
     user: {
         type: () => FormattedUser;
         required: true;
     };
-}, () => any, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    tenantId: {
+        type: StringConstructor;
+        required: true;
+    };
+    tenants: {
+        type: () => Record<string, string>;
+        required: true;
+    };
     render: {
         type: FunctionConstructor;
-        required: true;
+        required: false;
     };
+}, () => any, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     user: {
         type: () => FormattedUser;
         required: true;
     };
+    tenantId: {
+        type: StringConstructor;
+        required: true;
+    };
+    tenants: {
+        type: () => Record<string, string>;
+        required: true;
+    };
+    render: {
+        type: FunctionConstructor;
+        required: false;
+    };
 }>>, {}, {}>;
 export default _default;

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

@@ -12,7 +12,7 @@ declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<{
     /**
      * 当前租户ID
      */
-    currentTenantId?: string;
+    currentTenantId: string;
     /**
      * 是否可拖拽
      */
@@ -44,7 +44,7 @@ declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<{
     /**
      * 当前租户ID
      */
-    currentTenantId?: string;
+    currentTenantId: string;
     /**
      * 是否可拖拽
      */

package/vue2/index.es.min.js

@@ -13639,7 +13639,7 @@ var __webpack_exports__$1 = {};
 })();
 __webpack_exports__$1.bkEllipsis;
 __webpack_exports__$1.bkEllipsisInstance;
-var __webpack_exports__bkTooltips = __webpack_exports__$1.bkTooltips;
+__webpack_exports__$1.bkTooltips;
 var __webpack_exports__clickoutside = __webpack_exports__$1.clickoutside;
 __webpack_exports__$1.mousewheel;
 __webpack_exports__$1.overflowTitle;
@@ -16693,39 +16693,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(props2) {
+    const defaultRender = (h2, props22) => {
+      return h2("div", [
+        h2("span", props22.user.name),
+        props22.user.tenantId !== props22.tenantId && props22.user.tenantId ? h2(
+          "span",
+          {
+            style: {
+              color: "#f59500",
+              marginLeft: "4px"
+            }
+          },
+          `@${props22.tenants[props22.user.tenantId] || props22.user.tenantId}`
+        ) : null
+      ]);
+    };
     return () => {
       try {
-        return props2.render(h$1, props2.user);
+        return props2.render ? props2.render(h$1, props2.user) : defaultRender(h$1, props2);
       } catch (error3) {
         console.error("Error rendering tag:", error3);
-        return h$1("div", props2.user.name);
+        return defaultRender(h$1, props2);
       }
     };
   }
 });
-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"
@@ -16746,6 +16763,13 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       type: [Number, String],
       default: "auto"
     },
+    /**
+     * popover crossAxis 偏移量
+     */
+    crossAxisOffset: {
+      type: Number,
+      default: 0
+    },
     /**
      * 是否加载中
      */
@@ -16809,7 +16833,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       type: Function
     }
   },
-  emits: ["select-user"],
+  emits: ["select-user", "click-outside"],
   setup(__props, { emit: __emit }) {
     const props2 = __props;
     const emit = __emit;
@@ -16834,15 +16858,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(__webpack_exports__default$1), {
         "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(__webpack_exports__default$3), {
@@ -16852,7 +16881,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,
@@ -16879,14 +16908,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 */
@@ -16904,28 +16933,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 */
@@ -16942,21 +16956,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"
@@ -16988,27 +16992,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 */
@@ -17016,7 +17005,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-655f7a5a"]]);
 const _hoisted_1$2 = ["onClick"];
 const _hoisted_2$1 = ["placeholder"];
 const _hoisted_3 = ["placeholder"];
@@ -17120,7 +17109,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         }
       });
     };
-    const handleClickOutside = ({ event }) => {
+    const handleClickOutside = (event) => {
       event.stopPropagation();
       const target = event.target;
       const container = containerRef.value;
@@ -17255,6 +17244,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         });
       }
     };
+    const crossAxisOffset = ref(0);
     watch(
       () => props2.selectedUsers,
       () => {
@@ -17422,25 +17412,42 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                     /* KEYED_FRAGMENT */
                   )),
                   createCommentVNode(" 显示折叠标签数量 "),
-                  hiddenCount.value > 0 ? withDirectives((openBlock(), createBlock(unref(__webpack_exports__default), {
+                  hiddenCount.value > 0 ? (openBlock(), createBlock(unref(__webpack_exports__default$1), {
                     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(__webpack_exports__default), null, {
+                        default: withCtx(() => [
+                          createTextVNode(
+                            " +" + toDisplayString(hiddenCount.value),
+                            1
+                            /* TEXT */
+                          )
+                        ]),
+                        _: 1
+                        /* STABLE */
+                      })
                     ]),
                     _: 1
                     /* STABLE */
-                  })), [
-                    [unref(__webpack_exports__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",
@@ -17469,6 +17476,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),
@@ -17479,9 +17487,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 */
@@ -17489,7 +17497,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-d9743f6d"]]);
 const _hoisted_1$1 = { class: "input-container" };
 const _hoisted_2 = ["placeholder"];
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
@@ -17626,11 +17634,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",
@@ -17671,7 +17680,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-b20a7499"]]);
 const _hoisted_1 = {
   ref: "containerRef",
   class: "bk-user-selector"