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

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}.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*/";
+  __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-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}.bk-user-selector-popover.bk-popover.bk-pop2-content {\n  padding: 0;\n}.user-tag[data-v-655f7a5a] {\n  margin-right: 4px;\n  margin-left: 0;\n}\n.user-tag.draggable[data-v-655f7a5a] {\n  cursor: move;\n}\n.user-tag.active[data-v-655f7a5a] {\n  background-color: #e1ecff;\n  border-color: #3a84ff;\n}\n.user-tag .tag-content .user-name[data-v-655f7a5a] {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  font-size: 12px;\n}.multiple-selector[data-v-9fc5bebf] {\n  position: relative;\n  width: 100%;\n}\n.multiple-selector .tags-container[data-v-9fc5bebf] {\n  min-height: 32px;\n  border: 1px solid #c4c6cc;\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-9fc5bebf] {\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-9fc5bebf] {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n}\n.multiple-selector .tag-list[data-v-9fc5bebf] {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n}\n.multiple-selector .tag-wrapper[data-v-9fc5bebf] {\n  display: inline-flex;\n  align-items: center;\n  max-width: 100%;\n}\n.multiple-selector .search-input[data-v-9fc5bebf] {\n  outline: none;\n  border: none;\n  height: 28px;\n  min-width: 10px;\n  background: transparent;\n}\n.multiple-selector .search-input[data-v-9fc5bebf]::placeholder {\n  color: #c4c6cc;\n}\n.multiple-selector .search-input.inline[data-v-9fc5bebf] {\n  min-width: 10px;\n}\n.multiple-selector .search-input.last[data-v-9fc5bebf], .multiple-selector .search-input.collapsed[data-v-9fc5bebf] {\n  flex: 1;\n  min-width: 60px;\n}.single-selector[data-v-1454c121] {\n  position: relative;\n  width: 100%;\n}\n.input-container[data-v-1454c121] {\n  position: relative;\n  display: flex;\n  align-items: center;\n  min-height: 32px;\n  border: 1px solid #c4c6cc;\n  border-radius: 2px;\n  padding: 0 8px;\n  background-color: #fff;\n}\n.input-container[data-v-1454c121]: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-1454c121] {\n  flex: 1;\n  outline: none;\n  border: none;\n  height: 30px;\n  background: transparent;\n}\n.search-input[data-v-1454c121]::placeholder {\n  color: #c4c6cc;\n}.bk-user-selector[data-v-906da21c] {\n  width: 100%;\n  position: relative;\n  font-size: 12px;\n}/*$vite$:1*/";
   document.head.appendChild(__vite_style__);
   const getTenants = async (apiBaseUrl, tenantId) => {
     if (!apiBaseUrl || !tenantId) {
@@ -3333,7 +3333,7 @@
       };
     }
   });
-  const UserTag = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-487799ec"]]);
+  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"];
@@ -3356,7 +3356,8 @@
       userGroupName: { default: "用户群组" },
       emptyText: { default: "无匹配人员" },
       renderListItem: {},
-      renderTag: {}
+      renderTag: {},
+      excludeUserIds: { default: () => [] }
     },
     emits: ["update:selectedUsers", "add-user", "remove-user"],
     setup(__props, { emit: __emit }) {
@@ -3383,7 +3384,7 @@
       const visibleUsers = vue.ref([]);
       const hiddenCount = vue.ref(0);
       const options = vue.computed(() => {
-        return searchResults.value.filter((user) => !props.selectedUsers.some((selectedUser) => selectedUser.id === user.id));
+        return searchResults.value.filter((user) => !props.selectedUsers.some((selectedUser) => selectedUser.id === user.id)).filter((user) => !props.excludeUserIds.includes(user.id));
       });
       const userGroupFilter = vue.computed(() => {
         return props.userGroup.filter((group) => !props.selectedUsers.some((user) => user.id === group.id) && !group.hidden);
@@ -3825,7 +3826,7 @@
       };
     }
   });
-  const MultipleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-95b69442"]]);
+  const MultipleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-9fc5bebf"]]);
   const _hoisted_1$1 = { class: "input-container" };
   const _hoisted_2 = ["placeholder"];
   const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
@@ -3845,7 +3846,8 @@
       userGroupName: { default: "用户群组" },
       emptyText: { default: "无匹配人员" },
       renderListItem: {},
-      renderTag: {}
+      renderTag: {},
+      excludeUserIds: { default: () => [] }
     },
     emits: ["update:modelValue", "change"],
     setup(__props, { emit: __emit }) {
@@ -3868,16 +3870,18 @@
           type: "userGroup"
         }));
         const list = [...options.value, ...userGroup];
-        return list.find((user) => user.id === selectedUser.value);
+        const selectedUserInfo2 = list.find((user) => user.id === selectedUser.value);
+        emit("change", selectedUserInfo2 || null);
+        return selectedUserInfo2;
       });
-      vue.onBeforeMount(async () => {
+      const initSelectedUser = async () => {
         if (typeof props.modelValue === "string" && props.modelValue) {
           try {
             isLoading.value = true;
             const result = await lookupUsers(props.apiBaseUrl || "", props.tenantId || "", props.exactSearchKey, [
               props.modelValue
             ]);
-            options.value = formatUsers(result);
+            options.value = formatUsers(result).filter((user) => !props.excludeUserIds.includes(user.id));
             if (props.userGroup.length > 0) {
               const groupResult = props.userGroup.filter((group) => group.id == props.modelValue);
               options.value = groupResult.map((group) => ({
@@ -3891,7 +3895,12 @@
           } finally {
             isLoading.value = false;
           }
+        } else {
+          options.value = [];
         }
+      };
+      vue.onBeforeMount(async () => {
+        initSelectedUser();
       });
       const addCurrentUser = async () => {
         if (!props.currentUserId || selectedUser.value === props.currentUserId) return;
@@ -3899,7 +3908,7 @@
           const result = await lookupUsers(props.apiBaseUrl, props.tenantId, props.exactSearchKey, [props.currentUserId]);
           const formattedResults = formatUsers(result);
           if (formattedResults.length > 0) {
-            options.value = formattedResults;
+            options.value = formattedResults.filter((user) => !props.excludeUserIds.includes(user.id));
             addUser(formattedResults[0]);
           }
         } catch (error) {
@@ -3914,7 +3923,7 @@
         isLoading.value = true;
         try {
           const result = await searchUsers(props.apiBaseUrl, props.tenantId, keyword);
-          options.value = formatUsers(result).filter((user) => !selectedUser.value || user.id !== selectedUser.value);
+          options.value = formatUsers(result).filter((user) => !selectedUser.value || user.id !== selectedUser.value).filter((user) => !props.excludeUserIds.includes(user.id));
         } catch (error) {
           console.error("获取用户列表失败:", error);
           options.value = [];
@@ -3943,9 +3952,15 @@
       const handleClickOutside = () => {
         showDropdown.value = false;
       };
-      vue.watch(selectedUserInfo, (newVal) => {
-        emit("change", newVal || null);
-      }, { immediate: true });
+      vue.watch(
+        () => props.modelValue,
+        (newVal) => {
+          selectedUser.value = newVal;
+        }
+      );
+      vue.watch(selectedUser, (newVal) => {
+        emit("update:modelValue", newVal);
+      });
       return (_ctx, _cache) => {
         return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
           ref_key: "containerRef",
@@ -4006,7 +4021,7 @@
       };
     }
   });
-  const SingleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-4fec9d7c"]]);
+  const SingleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-1454c121"]]);
   const _hoisted_1 = {
     ref: "containerRef",
     class: "bk-user-selector"
@@ -4029,7 +4044,8 @@
       userGroupName: { default: "用户群组" },
       emptyText: { default: "无匹配人员" },
       renderListItem: {},
-      renderTag: {}
+      renderTag: {},
+      excludeUserIds: { default: () => [] }
     },
     emits: ["update:modelValue", "change"],
     setup(__props, { emit: __emit }) {
@@ -4060,6 +4076,8 @@
             } catch (error) {
               console.error("获取选中用户信息失败:", error);
             }
+          } else {
+            selectedUsers.value = [];
           }
         } else {
           selectedUser.value = props.modelValue;
@@ -4079,15 +4097,19 @@
       vue.watch(selectedUser, (newVal) => {
         if (!props.multiple) {
           emit("update:modelValue", newVal);
-          emit("change", newVal);
         }
-      }, { immediate: true });
+      });
       vue.watch(
         () => props.userGroup,
         () => {
           initSelectedUsers();
-        },
-        { immediate: true }
+        }
+      );
+      vue.watch(
+        () => props.modelValue,
+        () => {
+          initSelectedUsers();
+        }
       );
       vue.onBeforeMount(() => {
         initSelectedUsers();
@@ -4106,6 +4128,7 @@
               "current-user-id": _ctx.currentUserId,
               "empty-text": _ctx.emptyText,
               "exact-search-key": _ctx.exactSearchKey,
+              "exclude-user-ids": _ctx.excludeUserIds,
               placeholder: _ctx.placeholder,
               "render-list-item": _ctx.renderListItem,
               "render-tag": _ctx.renderTag,
@@ -4114,7 +4137,7 @@
               "user-group": _ctx.userGroup,
               "user-group-name": _ctx.userGroupName,
               onChange: handleUpdateUser
-            }, null, 8, ["modelValue", "api-base-url", "current-user-id", "empty-text", "exact-search-key", "placeholder", "render-list-item", "render-tag", "tenant-id", "tenants", "user-group", "user-group-name"])) : (vue.openBlock(), vue.createElementBlock(
+            }, null, 8, ["modelValue", "api-base-url", "current-user-id", "empty-text", "exact-search-key", "exclude-user-ids", "placeholder", "render-list-item", "render-tag", "tenant-id", "tenants", "user-group", "user-group-name"])) : (vue.openBlock(), vue.createElementBlock(
               vue.Fragment,
               { key: 1 },
               [
@@ -4127,6 +4150,7 @@
                   draggable: _ctx.draggable,
                   "empty-text": _ctx.emptyText,
                   "exact-search-key": _ctx.exactSearchKey,
+                  "exclude-user-ids": _ctx.excludeUserIds,
                   placeholder: _ctx.placeholder,
                   "render-list-item": _ctx.renderListItem,
                   "render-tag": _ctx.renderTag,
@@ -4136,7 +4160,7 @@
                   "user-group": _ctx.userGroup,
                   "user-group-name": _ctx.userGroupName,
                   "onUpdate:selectedUsers": handleUpdateSelectedUsers
-                }, null, 8, ["modelValue", "api-base-url", "current-user-id", "draggable", "empty-text", "exact-search-key", "placeholder", "render-list-item", "render-tag", "selected-users", "tenant-id", "tenants", "user-group", "user-group-name"])
+                }, null, 8, ["modelValue", "api-base-url", "current-user-id", "draggable", "empty-text", "exact-search-key", "exclude-user-ids", "placeholder", "render-list-item", "render-tag", "selected-users", "tenant-id", "tenants", "user-group", "user-group-name"])
               ],
               2112
               /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
@@ -4148,7 +4172,7 @@
       };
     }
   });
-  const BkUserSelector = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-78f5783f"]]);
+  const BkUserSelector = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-906da21c"]]);
   exports2.BkUserSelector = BkUserSelector;
   exports2.default = BkUserSelector;
   Object.defineProperties(exports2, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });

package/vue3/vue3.css

@@ -24,8 +24,6 @@
   background-color: #f0f1f5;
   color: #c4c6cc;
   cursor: not-allowed;
-}.bk-user-selector-popover.bk-popover.bk-pop2-content {
-  padding: 0;
 }.dropdown-content[data-v-54b68f9a] {
   min-height: 40px;
   max-height: 300px;
@@ -55,98 +53,100 @@
 }
 .dropdown-content .user-option[data-v-54b68f9a]:hover {
   background-color: #f5f7fa;
-}.user-tag[data-v-487799ec] {
+}.bk-user-selector-popover.bk-popover.bk-pop2-content {
+  padding: 0;
+}.user-tag[data-v-655f7a5a] {
   margin-right: 4px;
   margin-left: 0;
 }
-.user-tag.draggable[data-v-487799ec] {
+.user-tag.draggable[data-v-655f7a5a] {
   cursor: move;
 }
-.user-tag.active[data-v-487799ec] {
+.user-tag.active[data-v-655f7a5a] {
   background-color: #e1ecff;
   border-color: #3a84ff;
 }
-.user-tag .tag-content .user-name[data-v-487799ec] {
+.user-tag .tag-content .user-name[data-v-655f7a5a] {
+  white-space: nowrap;
   overflow: hidden;
-  font-size: 12px;
   text-overflow: ellipsis;
-  white-space: nowrap;
-}.multiple-selector[data-v-95b69442] {
+  font-size: 12px;
+}.multiple-selector[data-v-9fc5bebf] {
   position: relative;
   width: 100%;
 }
-.multiple-selector .tags-container[data-v-95b69442] {
+.multiple-selector .tags-container[data-v-9fc5bebf] {
   min-height: 32px;
-  padding: 1px 10px 1px 8px;
-  background-color: #fff;
   border: 1px solid #c4c6cc;
   border-radius: 2px;
+  padding: 1px 10px 1px 8px;
   transition: all 0.2s ease;
+  background-color: #fff;
 }
-.multiple-selector .tags-container.focused[data-v-95b69442] {
+.multiple-selector .tags-container.focused[data-v-9fc5bebf] {
   border-color: #3a84ff;
   box-shadow: 0 0 0 2px rgba(58, 132, 255, 0.1);
 }
-.multiple-selector .tags-container.collapsed[data-v-95b69442] {
+.multiple-selector .tags-container.collapsed[data-v-9fc5bebf] {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
 }
-.multiple-selector .tag-list[data-v-95b69442] {
+.multiple-selector .tag-list[data-v-9fc5bebf] {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
 }
-.multiple-selector .tag-wrapper[data-v-95b69442] {
+.multiple-selector .tag-wrapper[data-v-9fc5bebf] {
   display: inline-flex;
   align-items: center;
   max-width: 100%;
 }
-.multiple-selector .search-input[data-v-95b69442] {
-  min-width: 10px;
+.multiple-selector .search-input[data-v-9fc5bebf] {
+  outline: none;
+  border: none;
   height: 28px;
+  min-width: 10px;
   background: transparent;
-  border: none;
-  outline: none;
 }
-.multiple-selector .search-input[data-v-95b69442]::placeholder {
+.multiple-selector .search-input[data-v-9fc5bebf]::placeholder {
   color: #c4c6cc;
 }
-.multiple-selector .search-input.inline[data-v-95b69442] {
+.multiple-selector .search-input.inline[data-v-9fc5bebf] {
   min-width: 10px;
 }
-.multiple-selector .search-input.last[data-v-95b69442], .multiple-selector .search-input.collapsed[data-v-95b69442] {
+.multiple-selector .search-input.last[data-v-9fc5bebf], .multiple-selector .search-input.collapsed[data-v-9fc5bebf] {
   flex: 1;
   min-width: 60px;
-}.single-selector[data-v-4fec9d7c] {
+}.single-selector[data-v-1454c121] {
   position: relative;
   width: 100%;
 }
-.input-container[data-v-4fec9d7c] {
+.input-container[data-v-1454c121] {
   position: relative;
   display: flex;
   align-items: center;
   min-height: 32px;
-  padding: 0 8px;
-  background-color: #fff;
   border: 1px solid #c4c6cc;
   border-radius: 2px;
+  padding: 0 8px;
+  background-color: #fff;
 }
-.input-container[data-v-4fec9d7c]:focus-within {
+.input-container[data-v-1454c121]:focus-within {
   border-color: #3a84ff;
   box-shadow: 0 0 0 2px rgba(58, 132, 255, 0.1);
 }
-.search-input[data-v-4fec9d7c] {
+.search-input[data-v-1454c121] {
   flex: 1;
+  outline: none;
+  border: none;
   height: 30px;
   background: transparent;
-  border: none;
-  outline: none;
 }
-.search-input[data-v-4fec9d7c]::placeholder {
+.search-input[data-v-1454c121]::placeholder {
   color: #c4c6cc;
-}.bk-user-selector[data-v-78f5783f] {
-  position: relative;
+}.bk-user-selector[data-v-906da21c] {
   width: 100%;
+  position: relative;
   font-size: 12px;
 }