@blueking/bk-user-selector 0.0.19 → 0.0.20

package/vue2/vue2.css

@@ -1340,70 +1340,70 @@ optgroup {
   background-color: #f0f1f5;
   color: #c4c6cc;
   cursor: not-allowed;
-}.dropdown-content[data-v-f47cc878] {
+}.dropdown-content[data-v-a24bd074] {
   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-a24bd074] {
   padding: 10px;
   text-align: center;
   color: #979ba5;
 }
-.dropdown-content .user-group .group-header[data-v-f47cc878] {
+.dropdown-content .user-group .group-header[data-v-a24bd074] {
   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-a24bd074] {
   margin-left: 4px;
 }
-.dropdown-content .user-option[data-v-f47cc878] {
+.dropdown-content .user-option[data-v-a24bd074] {
   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-a24bd074]:hover {
   background-color: #f5f7fa;
 }
-.dropdown-content .user-option .tenant-name[data-v-f47cc878] {
+.dropdown-content .user-option .tenant-name[data-v-a24bd074] {
   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-5e95d86c] {
   position: relative;
   width: 100%;
 }
-.multiple-selector .tags-container[data-v-1b988eae] {
+.multiple-selector .tags-container[data-v-5e95d86c] {
   min-height: 32px;
   border: 1px solid #dcdee5;
   border-radius: 2px;
@@ -1411,46 +1411,46 @@ optgroup {
   transition: all 0.2s ease;
   background-color: #fff;
 }
-.multiple-selector .tags-container.focused[data-v-1b988eae] {
+.multiple-selector .tags-container.focused[data-v-5e95d86c] {
   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-5e95d86c] {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
 }
-.multiple-selector .tag-list[data-v-1b988eae] {
+.multiple-selector .tag-list[data-v-5e95d86c] {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
 }
-.multiple-selector .tag-wrapper[data-v-1b988eae] {
+.multiple-selector .tag-wrapper[data-v-5e95d86c] {
   display: inline-flex;
   align-items: center;
   max-width: 100%;
 }
-.multiple-selector .search-input[data-v-1b988eae] {
+.multiple-selector .search-input[data-v-5e95d86c] {
   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-5e95d86c]::placeholder {
   color: #c4c6cc;
 }
-.multiple-selector .search-input.inline[data-v-1b988eae] {
+.multiple-selector .search-input.inline[data-v-5e95d86c] {
   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-5e95d86c], .multiple-selector .search-input.collapsed[data-v-5e95d86c] {
   flex: 1;
   min-width: 60px;
-}.single-selector[data-v-5040d42f] {
+}.single-selector[data-v-02021e20] {
   position: relative;
   width: 100%;
 }
-.input-container[data-v-5040d42f] {
+.input-container[data-v-02021e20] {
   position: relative;
   display: flex;
   align-items: center;
@@ -1460,38 +1460,19 @@ optgroup {
   padding: 0 8px;
   background-color: #fff;
 }
-.input-container[data-v-5040d42f]:focus-within {
+.input-container[data-v-02021e20]: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-02021e20] {
   flex: 1;
   outline: none;
   border: none;
   height: 30px;
   background: transparent;
 }
-.search-input[data-v-5040d42f]::placeholder {
+.search-input[data-v-02021e20]::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;

package/vue3/index.es.min.js

@@ -1,4 +1,4 @@
-import { ref, onBeforeMount, defineComponent, createElementBlock, createCommentVNode, openBlock, withModifiers, normalizeClass, computed, createBlock, unref, withCtx, createVNode, createElementVNode, toDisplayString, Fragment, renderList, watch, nextTick, onMounted, withDirectives, isRef, vModelText, createTextVNode, pushScopeId, popScopeId } from "vue";
+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";
 const getTenants = async (apiBaseUrl, tenantId) => {
   if (!apiBaseUrl || !tenantId) {
@@ -3013,14 +3013,39 @@ const _export_sfc = (sfc, props) => {
   return target;
 };
 const MeTag = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-887b7c44"]]);
+const UserRender = defineComponent({
+  name: "UserRender",
+  props: {
+    render: {
+      type: Function,
+      required: true
+    },
+    user: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props) {
+    return () => {
+      try {
+        return props.render(h, props.user);
+      } catch (error) {
+        console.error("Error rendering tag:", error);
+        return 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"
 };
@@ -3099,6 +3124,12 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     emptyText: {
       type: String,
       default: "无匹配人员"
+    },
+    /**
+     * 渲染列表项
+     */
+    renderListItem: {
+      type: Function
     }
   },
   emits: ["select-user"],
@@ -3108,7 +3139,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     const groupedUsers = 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"
@@ -3178,7 +3209,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                         ),
                         createElementVNode(
                           "span",
-                          _hoisted_3$3,
+                          _hoisted_3$2,
                           "(" + toDisplayString(group.length) + ")",
                           1
                           /* TEXT */
@@ -3196,7 +3227,12 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                           key: user.id,
                           onMousedown: withModifiers(($event) => selectUser(user), ["prevent"])
                         }, [
-                          createElementVNode("div", null, [
+                          __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,
@@ -3206,12 +3242,12 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                             ),
                             user.tenantId !== __props.tenantId && user.tenantId && __props.tenants[user.tenantId] ? (openBlock(), createElementBlock(
                               "span",
-                              _hoisted_5,
+                              _hoisted_7,
                               "@" + toDisplayString(__props.tenants[user.tenantId]),
                               1
                               /* TEXT */
                             )) : createCommentVNode("v-if", true)
-                          ])
+                          ]))
                         ], 40, _hoisted_4$1);
                       }),
                       128
@@ -3233,10 +3269,14 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-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-a24bd074"]]);
+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"
 };
@@ -3251,7 +3291,8 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     currentTenantId: {},
     draggable: { type: Boolean },
     active: { type: Boolean },
-    showTenant: { type: Boolean }
+    showTenant: { type: Boolean },
+    renderTag: { type: Function }
   },
   emits: ["click", "close"],
   setup(__props, { emit: __emit }) {
@@ -3270,22 +3311,27 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
         onClose: handleClose
       }, {
         default: withCtx(() => [
-          createElementVNode("div", _hoisted_1$3, [
+          _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_2$2,
+              _hoisted_3$1,
               toDisplayString(_ctx.user.name),
               1
               /* TEXT */
             ),
             _ctx.user.tenantId !== _ctx.currentTenantId && _ctx.user.tenantId ? (openBlock(), createElementBlock(
               "span",
-              _hoisted_3$2,
+              _hoisted_4,
               " @" + toDisplayString(_ctx.tenants[_ctx.user.tenantId]),
               1
               /* TEXT */
             )) : createCommentVNode("v-if", true)
-          ])
+          ]))
         ]),
         _: 1
         /* STABLE */
@@ -3293,10 +3339,10 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-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__ */ defineComponent({
   ...{
     name: "BkUserSelectorMultiple"
@@ -3345,6 +3391,9 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     const options = computed(() => {
       return searchResults.value.filter((user) => !props.selectedUsers.some((selectedUser) => selectedUser.id === user.id));
     });
+    const userGroupFilter = 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) {
@@ -3603,11 +3652,12 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                           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"]),
                         createCommentVNode(" 在当前激活标签后插入输入框 "),
                         index === activeTagIndex.value && activeTagIndex.value !== _ctx.selectedUsers.length - 1 ? withDirectives((openBlock(), createElementBlock(
                           "input",
@@ -3683,12 +3733,13 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                       return openBlock(), 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 */
@@ -3721,7 +3772,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                     "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isRef(searchQuery) ? searchQuery.value = $event : null),
                     placeholder: !_ctx.selectedUsers.length ? _ctx.placeholder : "",
                     onFocus: handleFocus
-                  }, null, 40, _hoisted_3$1), [
+                  }, null, 40, _hoisted_3), [
                     [vModelText, unref(searchQuery)]
                   ]),
                   createCommentVNode(' 未聚焦状态下的"我"标签 '),
@@ -3745,14 +3796,15 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
             "is-show": showDropdown.value,
             loading: unref(searchLoading),
             options: options.value,
+            "render-list-item": _ctx.renderListItem,
             "search-query": 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 */
@@ -3760,21 +3812,9 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const MultipleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-1b988eae"]]);
-const _withScopeId = (n) => (pushScopeId("data-v-5040d42f"), n = n(), popScopeId(), n);
+const MultipleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-5e95d86c"]]);
 const _hoisted_1$1 = { class: "input-container" };
-const _hoisted_2 = {
-  key: 0,
-  class: "tenant-name"
-};
-const _hoisted_3 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode(
-  "i",
-  { class: "close-icon" },
-  "×",
-  -1
-  /* HOISTED */
-));
-const _hoisted_4 = ["placeholder"];
+const _hoisted_2 = ["placeholder"];
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   ...{
     name: "BkUserSelectorSingle"
@@ -3805,6 +3845,9 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const selectedUser = ref(props.modelValue || "");
     const searchQuery = ref("");
     const showDropdown = ref(false);
+    const userGroupFilter = computed(() => {
+      return props.userGroup.filter((group) => group.id !== selectedUser.value && !group.hidden);
+    });
     const selectedUserInfo = computed(() => {
       const userGroup = (props.userGroup || []).map((group) => ({
         ...group,
@@ -3903,24 +3946,14 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           createCommentVNode(" 用户标签显示 "),
           selectedUserInfo.value ? (openBlock(), createElementBlock("div", {
             key: 0,
-            class: "selected-user",
             onClick: withModifiers(removeSelectedUser, ["stop"])
           }, [
-            createElementVNode(
-              "span",
-              null,
-              toDisplayString(selectedUserInfo.value.name),
-              1
-              /* TEXT */
-            ),
-            selectedUserInfo.value.tenantId !== _ctx.tenantId && selectedUserInfo.value.tenantId && _ctx.tenants[selectedUserInfo.value.tenantId] ? (openBlock(), createElementBlock(
-              "span",
-              _hoisted_2,
-              "@" + toDisplayString(_ctx.tenants[selectedUserInfo.value.tenantId]),
-              1
-              /* TEXT */
-            )) : createCommentVNode("v-if", true),
-            _hoisted_3
+            createVNode(UserTag, {
+              "render-tag": _ctx.renderTag,
+              tenants: _ctx.tenants,
+              user: selectedUserInfo.value,
+              onClose: removeSelectedUser
+            }, null, 8, ["render-tag", "tenants", "user"])
           ])) : createCommentVNode("v-if", true),
           withDirectives(createElementVNode("input", {
             ref_key: "inputRef",
@@ -3930,7 +3963,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             placeholder: selectedUserInfo.value ? "" : _ctx.placeholder,
             onFocus: handleInputFocus,
             onInput: handleInput
-          }, null, 40, _hoisted_4), [
+          }, null, 40, _hoisted_2), [
             [vModelText, searchQuery.value]
           ]),
           createCommentVNode(' "我"标签 '),
@@ -3947,20 +3980,21 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           "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"])
       ])), [
         [unref(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-02021e20"]]);
 const _hoisted_1 = {
   ref: "containerRef",
   class: "bk-user-selector"