@blueking/bk-user-selector 0.0.29-beta.2 → 0.0.29-beta.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,4 +1,4 @@
1
- import { shallowRef, watchEffect, unref, onScopeDispose, ref, onBeforeMount, defineComponent, openBlock, createElementBlock, normalizeClass, withModifiers, createCommentVNode, h, computed, createBlock, withCtx, createVNode, createElementVNode, toDisplayString, Fragment, renderList, watch, nextTick, onMounted, withDirectives, isRef, vModelText, createTextVNode } from "vue";
1
+ import { unref, ref, onBeforeMount, defineComponent, openBlock, createElementBlock, normalizeClass, withModifiers, createCommentVNode, h, computed, createBlock, withCtx, createVNode, createElementVNode, toDisplayString, Fragment, renderList, watch, nextTick, onMounted, withDirectives, isRef, vModelText, createTextVNode } from "vue";
2
2
  import { Popover, Loading, Tag, clickoutside, provideGlobalConfig } from "bkui-vue";
3
3
  const generateCallbackName = () => {
4
4
  const timestamp = Date.now();
@@ -8,10 +8,15 @@ const generateCallbackName = () => {
8
8
  const jsonpRequest = (requestUrl, options = {}) => {
9
9
  return new Promise((resolve, reject) => {
10
10
  const url = unref(requestUrl);
11
- const { timeout = 1e3 * 60 * 2, params } = options;
11
+ const { timeout = 1e3 * 60 * 2, params, withCredentials = true } = options;
12
12
  const callbackName = generateCallbackName();
13
13
  const script = document.createElement("script");
14
14
  let timeoutId;
15
+ if (withCredentials) {
16
+ script.crossOrigin = "use-credentials";
17
+ } else {
18
+ script.crossOrigin = "anonymous";
19
+ }
15
20
  const cleanup = () => {
16
21
  if (timeoutId) {
17
22
  clearTimeout(timeoutId);
@@ -25,7 +30,7 @@ const jsonpRequest = (requestUrl, options = {}) => {
25
30
  };
26
31
  window[callbackName] = (data) => {
27
32
  cleanup();
28
- resolve(data);
33
+ resolve(data.data || data);
29
34
  };
30
35
  timeoutId = setTimeout(() => {
31
36
  cleanup();
@@ -41,48 +46,6 @@ const jsonpRequest = (requestUrl, options = {}) => {
41
46
  document.head.appendChild(script);
42
47
  });
43
48
  };
44
- const useJSONP = (url, options = {}) => {
45
- const data = shallowRef(null);
46
- const loading = shallowRef(false);
47
- const error = shallowRef(null);
48
- let abortFlag = false;
49
- const executeRequest = async (requestUrl) => {
50
- if (!requestUrl) return;
51
- loading.value = true;
52
- error.value = null;
53
- abortFlag = false;
54
- try {
55
- const result = await jsonpRequest(requestUrl, options);
56
- if (!abortFlag) {
57
- data.value = result;
58
- }
59
- } catch (err) {
60
- if (!abortFlag) {
61
- const errorObj = err instanceof Error ? err : new Error(String(err));
62
- error.value = errorObj;
63
- }
64
- } finally {
65
- if (!abortFlag) {
66
- loading.value = false;
67
- }
68
- }
69
- };
70
- const stopWatcher = watchEffect(() => {
71
- executeRequest(unref(url));
72
- });
73
- onScopeDispose(() => {
74
- abortFlag = true;
75
- stopWatcher();
76
- });
77
- return {
78
- data,
79
- loading,
80
- error,
81
- refetch: () => {
82
- executeRequest(unref(url));
83
- }
84
- };
85
- };
86
49
  const getTenants = async (apiBaseUrl, tenantId) => {
87
50
  if (!apiBaseUrl || !tenantId) {
88
51
  console.warn("获取租户信息需要提供有效的apiBaseUrl和租户ID");
@@ -109,7 +72,7 @@ const getTenants = async (apiBaseUrl, tenantId) => {
109
72
  };
110
73
  const searchUsers = async (params) => {
111
74
  const { apiBaseUrl, tenantId, keyword, enableMultiTenantMode = true } = params;
112
- if (enableMultiTenantMode) {
75
+ if (!enableMultiTenantMode) {
113
76
  const userList = await getUserList(apiBaseUrl, {
114
77
  keyword,
115
78
  pageSize: 100,
@@ -145,7 +108,7 @@ const searchUsers = async (params) => {
145
108
  const lookupUsers = async (params) => {
146
109
  const { apiBaseUrl, tenantId, exactSearchKey = "bk_username", usersList = [], enableMultiTenantMode = true } = params;
147
110
  const users = usersList.filter((user) => user).map((user) => user.trim());
148
- if (enableMultiTenantMode) {
111
+ if (!enableMultiTenantMode) {
149
112
  const userList = await getUserList(apiBaseUrl, {
150
113
  userIds: users
151
114
  }).catch(() => {
@@ -176,18 +139,26 @@ const lookupUsers = async (params) => {
176
139
  return [];
177
140
  }
178
141
  };
179
- const formatUsers = (users) => {
142
+ const formatUsers = (users, enableMultiTenantMode = true) => {
180
143
  if (!users || !Array.isArray(users)) return [];
144
+ if (!enableMultiTenantMode) {
145
+ return users.map((user) => ({
146
+ ...user,
147
+ id: user.username,
148
+ name: `${user.display_name}(${user.username})`,
149
+ tenantId: user.owner_tenant_id
150
+ }));
151
+ }
181
152
  return users.map((user) => ({
182
- id: user.bk_username || user.username,
153
+ id: user.bk_username,
183
154
  name: user.display_name,
184
155
  tenantId: user.owner_tenant_id,
185
156
  ...user
186
157
  }));
187
158
  };
188
159
  const getUserList = async (url, params) => {
189
- const { userIds, keyword, pageSize, page, appCode } = params;
190
- const { data: userList } = await useJSONP(url, {
160
+ const { userIds, keyword, pageSize = 20, page, appCode } = params;
161
+ const data = await jsonpRequest(url, {
191
162
  params: {
192
163
  exact_lookups: (userIds == null ? void 0 : userIds.join(",")) || void 0,
193
164
  fuzzy_lookups: keyword || void 0,
@@ -196,7 +167,7 @@ const getUserList = async (url, params) => {
196
167
  app_code: appCode || "bk-magicbox"
197
168
  }
198
169
  });
199
- return userList.value || [];
170
+ return (data == null ? void 0 : data.results) || [];
200
171
  };
201
172
  const useTenantData = (apiBaseUrl, tenantId, enableMultiTenantMode = true) => {
202
173
  const tenants = ref({});
@@ -3031,7 +3002,7 @@ const calculateVisibleTags = (container, items, containerWidth) => {
3031
3002
  }
3032
3003
  return Math.max(1, visibleCount);
3033
3004
  };
3034
- const useUserSearch = (apiBaseUrl, tenantId) => {
3005
+ const useUserSearch = (apiBaseUrl, tenantId, enableMultiTenantMode = true) => {
3035
3006
  const searchResults = ref([]);
3036
3007
  const loading = ref(false);
3037
3008
  const searchQuery = ref("");
@@ -3050,9 +3021,9 @@ const useUserSearch = (apiBaseUrl, tenantId) => {
3050
3021
  apiBaseUrl,
3051
3022
  tenantId,
3052
3023
  keyword,
3053
- enableMultiTenantMode: true
3024
+ enableMultiTenantMode
3054
3025
  });
3055
- searchResults.value = formatUsers(results);
3026
+ searchResults.value = formatUsers(results, enableMultiTenantMode);
3056
3027
  } catch (error) {
3057
3028
  console.error("用户搜索失败:", error);
3058
3029
  searchResults.value = [];
@@ -3484,7 +3455,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
3484
3455
  searchQuery,
3485
3456
  // clearSearch,
3486
3457
  handleSearchInput
3487
- } = useUserSearch(props.apiBaseUrl, props.tenantId);
3458
+ } = useUserSearch(props.apiBaseUrl, props.tenantId, props.enableMultiTenantMode);
3488
3459
  const containerRef = ref(null);
3489
3460
  const tagsContainerRef = ref(null);
3490
3461
  const sortableContainerRef = ref(null);
@@ -3611,7 +3582,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
3611
3582
  usersList: [props.currentUserId],
3612
3583
  enableMultiTenantMode: props.enableMultiTenantMode
3613
3584
  });
3614
- const formattedUsers = formatUsers(result);
3585
+ const formattedUsers = formatUsers(result, props.enableMultiTenantMode);
3615
3586
  if (formattedUsers.length > 0) {
3616
3587
  if (!props.selectedUsers.some((item) => item.id === formattedUsers[0].id)) {
3617
3588
  emit("update:selectedUsers", [...props.selectedUsers, formattedUsers[0]]);
@@ -3639,7 +3610,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
3639
3610
  usersList: users,
3640
3611
  enableMultiTenantMode: props.enableMultiTenantMode
3641
3612
  });
3642
- const formattedUsers = formatUsers(result);
3613
+ const formattedUsers = formatUsers(result, props.enableMultiTenantMode);
3643
3614
  if (formattedUsers.length > 0) {
3644
3615
  const updatedUsers = [...props.selectedUsers, ...formattedUsers];
3645
3616
  emit("update:selectedUsers", updatedUsers);
@@ -3953,7 +3924,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
3953
3924
  };
3954
3925
  }
3955
3926
  });
3956
- const MultipleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-bebe517d"]]);
3927
+ const MultipleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-7ff53892"]]);
3957
3928
  const _hoisted_1 = { class: "input-container" };
3958
3929
  const _hoisted_2 = ["placeholder"];
3959
3930
  const _sfc_main$1 = /* @__PURE__ */ defineComponent({
@@ -4014,7 +3985,9 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
4014
3985
  usersList: [props.modelValue],
4015
3986
  enableMultiTenantMode: props.enableMultiTenantMode
4016
3987
  });
4017
- options.value = formatUsers(result).filter((user) => !props.excludeUserIds.includes(user.id));
3988
+ options.value = formatUsers(result, props.enableMultiTenantMode).filter(
3989
+ (user) => !props.excludeUserIds.includes(user.id)
3990
+ );
4018
3991
  if (props.userGroup.length > 0) {
4019
3992
  const groupResult = props.userGroup.filter((group) => group.id == props.modelValue);
4020
3993
  options.value = groupResult.map((group) => ({
@@ -4045,7 +4018,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
4045
4018
  usersList: [props.currentUserId],
4046
4019
  enableMultiTenantMode: props.enableMultiTenantMode
4047
4020
  });
4048
- const formattedResults = formatUsers(result);
4021
+ const formattedResults = formatUsers(result, props.enableMultiTenantMode);
4049
4022
  if (formattedResults.length > 0) {
4050
4023
  options.value = formattedResults.filter((user) => !props.excludeUserIds.includes(user.id));
4051
4024
  addUser(formattedResults[0]);
@@ -4067,7 +4040,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
4067
4040
  keyword,
4068
4041
  enableMultiTenantMode: props.enableMultiTenantMode
4069
4042
  });
4070
- options.value = formatUsers(result).filter((user) => !selectedUser.value || user.id !== selectedUser.value).filter((user) => !props.excludeUserIds.includes(user.id));
4043
+ options.value = formatUsers(result, props.enableMultiTenantMode).filter((user) => !selectedUser.value || user.id !== selectedUser.value).filter((user) => !props.excludeUserIds.includes(user.id));
4071
4044
  } catch (error) {
4072
4045
  console.error("获取用户列表失败:", error);
4073
4046
  options.value = [];
@@ -4171,7 +4144,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
4171
4144
  };
4172
4145
  }
4173
4146
  });
4174
- const SingleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-67f2ee6a"]]);
4147
+ const SingleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-d56195a1"]]);
4175
4148
  const _sfc_main = /* @__PURE__ */ defineComponent({
4176
4149
  ...{
4177
4150
  name: "BkUserSelector"
@@ -4229,7 +4202,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
4229
4202
  usersList: ids,
4230
4203
  enableMultiTenantMode: props.enableMultiTenantMode
4231
4204
  });
4232
- selectedUsers.value = [...selected, ...formatUsers(result)];
4205
+ selectedUsers.value = [...selected, ...formatUsers(result, props.enableMultiTenantMode)];
4233
4206
  } catch (error) {
4234
4207
  console.error("获取选中用户信息失败:", error);
4235
4208
  }
@@ -4336,7 +4309,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
4336
4309
  };
4337
4310
  }
4338
4311
  });
4339
- const BkUserSelector = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-617ed278"]]);
4312
+ const BkUserSelector = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-812cbe5a"]]);
4340
4313
  export {
4341
4314
  BkUserSelector,
4342
4315
  BkUserSelector as default
@@ -3,7 +3,7 @@
3
3
  try {
4
4
  if (typeof document != "undefined") {
5
5
  var elementStyle = document.createElement("style");
6
- elementStyle.appendChild(document.createTextNode(".scroll-bar-style::-webkit-scrollbar {\n width: 4px;\n height: 4px;\n}\n.scroll-bar-style::-webkit-scrollbar-thumb {\n background: #ddd;\n border-radius: 20px;\n box-shadow: inset 0 0 6px rgba(204, 204, 204, 0.3);\n}\nhtml,\nbody {\n padding: 0;\n margin: 0;\n}\n* {\n box-sizing: border-box;\n}\n/**\n * HTML5 display definitions\n * ==========================================================================\n *\n * Correct `block` display not defined for any HTML5 element in IE 8/9.\n * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.\n * Correct `block` display not defined for `main` in IE 11.\n */\narticle,\naside,\ndetails,\nfigcaption,\nfigure,\nfooter,\nheader,\nhgroup,\nmain,\nmenu,\nnav,\nsection,\nsummary {\n display: block;\n}\n/**\n * 1. Correct `inline-block` display not defined in IE 8/9.\n * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.\n */\naudio,\ncanvas,\nprogress,\nvideo {\n /* 1 */\n display: inline-block;\n /* 2 */\n vertical-align: baseline;\n}\n/**\n * Prevent modern browsers from displaying `audio` without controls.\n * Remove excess height in iOS 5 devices.\n */\naudio:not([controls]) {\n display: none;\n height: 0;\n}\n/**\n * Address `[hidden]` styling not present in IE 8/9/10.\n * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.\n */\n[hidden],\ntemplate {\n display: none;\n}\n/**\n * Links\n * ==========================================================================\n *\n * Remove the gray background color from active links in IE 10.\n */\na {\n background-color: transparent;\n}\n/**\n * Improve readability of focused elements when they are also in an\n * active/hover state.\n */\na:active,\na:hover {\n outline: 0;\n}\n/**\n * Text-level semantics\n * ==========================================================================\n *\n * Address styling not present in IE 8/9/10/11, Safari, and Chrome.\n */\nabbr[title] {\n border-bottom: 1px dotted;\n}\n/**\n * Embedded content\n * ==========================================================================\n *\n * Remove border when inside `a` element in IE 8/9/10.\n */\nimg {\n border: 0;\n}\n/**\n * Correct overflow not hidden in IE 9/10/11.\n */\nsvg:not(:root) {\n overflow: hidden;\n}\n/**\n * Grouping content\n * ==========================================================================\n *\n * Address margin not present in IE 8/9 and Safari.\n */\nfigure {\n margin: 1em 40px;\n}\n/**\n * Address differences between Firefox and other browsers.\n */\nhr {\n height: 0;\n box-sizing: content-box;\n}\n/**\n * Address odd `em`-unit font size rendering in all browsers.\n *\n * Forms\n * ==========================================================================\n *\n * Known limitation: by default, Chrome and Safari on OS X allow very limited\n * styling of `select`, unless a `border` property is set.\n *\n * 1. Correct color not being inherited.\n * Known issue: affects color of disabled elements.\n * 2. Correct font properties not being inherited.\n * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.\n */\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n /* 3 */\n margin: 0;\n /* 2 */\n font: inherit;\n /* 1 */\n color: inherit;\n}\n/**\n * Address `overflow` set to `hidden` in IE 8/9/10/11.\n */\nbutton {\n overflow: visible;\n}\n/**\n * Address inconsistent `text-transform` inheritance for `button` and `select`.\n * All other form control elements do not inherit `text-transform` values.\n * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.\n * Correct `select` style inheritance in Firefox.\n */\nbutton,\nselect {\n text-transform: none;\n}\n/**\n * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls.\n * 2. Correct inability to style clickable `input` types in iOS.\n * 3. Improve usability and consistency of cursor style between image-type `input` and others.\n */\nbutton,\nhtml input[type='button'],\ninput[type='reset'],\ninput[type='submit'] {\n /* 3 */\n cursor: pointer;\n /* 2 */\n appearance: button;\n}\n/* Re-set default cursor for disabled elements. */\nbutton[disabled],\nhtml input[disabled] {\n cursor: default;\n}\n/* Remove inner padding and border in Firefox 4+. */\nbutton::-moz-focus-inner,\ninput::-moz-focus-inner {\n padding: 0;\n border: 0;\n}\n/**\n * Address Firefox 4+ setting `line-height` on `input` using `!important` in the UA stylesheet.\n */\ninput {\n line-height: normal;\n}\n/**\n * It's recommended that you don't attempt to style these elements.\n * Firefox's implementation doesn't respect box-sizing, padding, or width.\n *\n * 1. Address box sizing set to `content-box` in IE 8/9/10.\n * 2. Remove excess padding in IE 8/9/10.\n */\ninput[type='checkbox'],\ninput[type='radio'] {\n /* 2 */\n padding: 0;\n /* 1 */\n box-sizing: border-box;\n}\n/**\n * Fix the cursor style for Chrome's increment/decrement buttons. For certain\n * `font-size` values of the `input`, it causes the cursor style of the\n * decrement button to change from `default` to `text`.\n */\ninput[type='number']::-webkit-inner-spin-button,\ninput[type='number']::-webkit-outer-spin-button {\n height: auto;\n}\n::-ms-clear,\n::-ms-reveal {\n display: none;\n}\ninput[type='text']::-ms-clear {\n display: none;\n}\ninput[type='text']::-ms-reveal {\n display: none;\n}\n/**\n * 1. Address `appearance` set to `searchfield` in Safari and Chrome.\n * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.\n */\ninput[type='search'] {\n /* 2 */\n box-sizing: content-box;\n /* 1 */\n appearance: textfield;\n}\n/**\n * Remove inner padding and search cancel button in Safari and Chrome on OS X.\n * Safari (but not Chrome) clips the cancel button when the search input has\n * padding (and `textfield` appearance).\n */\ninput[type='search']::-webkit-search-cancel-button,\ninput[type='search']::-webkit-search-decoration {\n appearance: none;\n}\n/**\n * Define consistent border, margin, and padding.\n */\nfieldset {\n padding: 0.35em 0.625em 0.75em;\n margin: 0 2px;\n border: 1px solid #c0c0c0;\n}\n/**\n * 1. Correct `color` not being inherited in IE 8/9/10/11.\n * 2. Remove padding so people aren't caught out if they zero out fieldsets.\n */\nlegend {\n /* 2 */\n padding: 0;\n /* 1 */\n border: 0;\n}\n/**\n * Remove default vertical scrollbar in IE 8/9/10/11.\n */\ntextarea {\n overflow: auto;\n}\n/**\n * Don't inherit the `font-weight` (applied by a rule above).\n * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.\n */\noptgroup {\n font-weight: bold;\n}\n/**\n* BK-Scroll-Style\n*/\n.bk-scroll-y {\n overflow-y: auto;\n}\n.bk-scroll-y::-webkit-scrollbar {\n width: 4px;\n height: 4px;\n}\n.bk-scroll-y::-webkit-scrollbar-thumb {\n background: #ddd;\n border-radius: 20px;\n box-shadow: inset 0 0 6px rgba(204, 204, 204, 0.3);\n}\n.bk-scroll-x {\n overflow-x: auto;\n}\n.bk-scroll-x::-webkit-scrollbar {\n width: 4px;\n height: 4px;\n}\n.bk-scroll-x::-webkit-scrollbar-thumb {\n background: #ddd;\n border-radius: 20px;\n box-shadow: inset 0 0 6px rgba(204, 204, 204, 0.3);\n}\n@keyframes loading-scale-animate {\n 0% {\n transform: scale(1);\n }\n 100% {\n transform: scale(0.6);\n }\n}\n@keyframes fade {\n 100% {\n background-color: transparent;\n }\n}\n.bk-user-selector-transition .bk-user-selector-fade-enter-active,\n.bk-user-selector-transition .bk-user-selector-fade-leave-active {\n transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);\n}\n.bk-user-selector-transition .bk-user-selector-fade-enter,\n.bk-user-selector-transition .bk-user-selector-fade-leave-to {\n opacity: 0;\n}\n.clearfix-style::after {\n display: block;\n height: 0;\n clear: both;\n font-size: 0;\n content: '';\n visibility: hidden;\n}\n.bk-user-selector-popper {\n display: none;\n padding: 7px 14px;\n font-size: 12px;\n color: #fff;\n background: #333;\n border-radius: 4px;\n}\n.bk-user-selector-popper.light {\n color: #63656e;\n background: #fff;\n box-shadow: #dcdee5 0 0 6px 0;\n}\n.bk-user-selector-popper .bk-user-selector-popper-arrow,\n.bk-user-selector-popper .bk-user-selector-popper-arrow::before {\n position: absolute;\n width: 8px;\n height: 8px;\n background: inherit;\n}\n.bk-user-selector-popper .bk-user-selector-popper-arrow {\n visibility: hidden;\n}\n.bk-user-selector-popper .bk-user-selector-popper-arrow::before {\n content: '';\n visibility: visible;\n transform: rotate(45deg);\n}\n.bk-user-selector-popper[data-show] {\n display: block;\n}\n.bk-user-selector-popper[data-popper-placement^='top'] > .bk-user-selector-popper-arrow {\n bottom: -4px;\n}\n.bk-user-selector-popper[data-popper-placement^='bottom'] > .bk-user-selector-popper-arrow {\n top: -4px;\n}\n.bk-user-selector-popper[data-popper-placement^='left'] > .bk-user-selector-popper-arrow {\n right: -4px;\n}\n.bk-user-selector-popper[data-popper-placement^='right'] > .bk-user-selector-popper-arrow {\n left: -4px;\n}\n.bk-user-selector-loading-wrapper {\n position: static;\n vertical-align: middle;\n}\n.bk-user-selector-loading-wrapper:not(.bk-user-selector-nested-loading):not(.bk-user-selector-directive-loading) {\n display: inline-flex;\n}\n.bk-user-selector-loading-wrapper.bk-user-selector-directive-loading {\n width: 100%;\n height: 100%;\n}\n.bk-user-selector-loading-wrapper.bk-user-selector-directive-loading,\n.bk-user-selector-loading-wrapper.bk-user-selector-nested-loading {\n position: relative;\n}\n.bk-user-selector-loading-wrapper.bk-user-selector-directive-loading.is-block,\n.bk-user-selector-loading-wrapper.bk-user-selector-nested-loading.is-block {\n display: block;\n}\n.bk-user-selector-loading-wrapper.bk-user-selector-directive-loading .bk-user-selector-loading-indicator,\n.bk-user-selector-loading-wrapper.bk-user-selector-nested-loading .bk-user-selector-loading-indicator {\n position: absolute;\n top: 50%;\n left: 50%;\n z-index: 11;\n text-align: center;\n transform: translate(-50%, -50%);\n}\n.bk-user-selector-loading-wrapper .dot {\n display: inline-flex;\n width: 14px;\n height: 14px;\n margin-right: 10px;\n border-radius: 50%;\n transform: scale(0.6);\n animation-duration: 0.8s;\n animation-iteration-count: infinite;\n animation-name: loading-scale-animate;\n animation-direction: normal;\n}\n.bk-user-selector-loading-wrapper .oval {\n position: absolute;\n width: 6px;\n height: 8px;\n background-color: #63656e;\n border-radius: 8px;\n animation-duration: 1.2s;\n animation-iteration-count: infinite;\n animation-name: fade;\n transform-origin: center 24px;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-mask {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator {\n display: flex;\n line-height: 1;\n text-align: center;\n flex-direction: column;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-success .oval,\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-success .dot,\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-success .dot-1,\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-success .dot-2,\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-success .dot-3,\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-success .dot-4 {\n background-color: #2dcb56;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-danger .oval,\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-danger .dot,\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-danger .dot-1,\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-danger .dot-2,\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-danger .dot-3,\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-danger .dot-4 {\n background-color: #ea3636;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-warning .oval,\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-warning .dot,\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-warning .dot-1,\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-warning .dot-2,\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-warning .dot-3,\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-warning .dot-4 {\n background-color: #ff9c01;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-primary .oval,\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-primary .dot,\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-primary .dot-1,\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-primary .dot-2,\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-primary .dot-3,\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-primary .dot-4 {\n background-color: #3a84ff;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-white .oval,\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-white .dot,\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-white .dot-1,\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-white .dot-2,\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-white .dot-3,\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-white .dot-4 {\n background-color: white;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-default .oval,\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-default .dot,\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-default .dot-1,\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-default .dot-2,\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-default .dot-3,\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-default .dot-4 {\n background-color: #c4c6cc;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator .dot-1 {\n background-color: #ea3636;\n animation-delay: 0.1s;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator .dot-2 {\n background-color: #ff9c01;\n animation-delay: 0.25s;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator .dot-3 {\n background-color: #2dcb56;\n animation-delay: 0.4s;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator .dot-4 {\n background-color: #3a84ff;\n animation-delay: 0.55s;\n margin-right: 0px;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator .oval-1 {\n transform: rotate(135deg);\n animation-delay: -0.45s;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator .oval-2 {\n transform: rotate(90deg);\n animation-delay: -0.6s;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator .oval-3 {\n transform: rotate(45deg);\n animation-delay: -0.75s;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator .oval-4 {\n transform: rotate(0deg);\n animation-delay: -0.9s;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator .oval-5 {\n transform: rotate(-45deg);\n animation-delay: -1.05s;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator .oval-6 {\n transform: rotate(-90deg);\n animation-delay: -1.2s;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator .oval-7 {\n transform: rotate(-135deg);\n animation-delay: -1.35s;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator .oval-8 {\n transform: rotate(-180deg);\n animation-delay: -1.5s;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator .bk-user-selector-normal-indicator {\n display: inline-flex;\n justify-content: center;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator .bk-user-selector-spin-indicator {\n position: relative;\n display: inline-flex;\n justify-content: center;\n width: 48px;\n height: 48px;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-size-mini .bk-user-selector-spin-indicator {\n height: 16px;\n width: 16px;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-size-mini .dot {\n width: 3px;\n height: 3px;\n margin-right: 3px;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-size-mini .dot.dot-4 {\n margin-right: 0;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-size-mini .oval {\n width: 2px;\n height: 3px;\n border-radius: 3px;\n transform-origin: center 8px;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-size-mini .bk-user-selector-loading-title {\n font-size: 14px;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-size-small .bk-user-selector-spin-indicator {\n height: 32px;\n width: 32px;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-size-small .dot {\n width: 6px;\n height: 6px;\n margin-right: 6px;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-size-small .dot.dot-4 {\n margin-right: 0;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-size-small .oval {\n width: 4px;\n height: 5px;\n border-radius: 5px;\n transform-origin: center 16px;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-size-small .bk-user-selector-loading-title {\n font-size: 12px;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-size-large .bk-user-selector-spin-indicator {\n height: 68px;\n width: 68px;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-size-large .dot {\n width: 20px;\n height: 20px;\n margin-right: 12px;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-size-large .dot.dot-4 {\n margin-right: 0;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-size-large .oval {\n width: 8px;\n height: 12px;\n border-radius: 12px;\n transform-origin: center 34px;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-size-large .bk-user-selector-loading-title {\n font-size: 14px;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator .bk-user-selector-loading-title {\n margin-top: 8px;\n font-size: 14px;\n line-height: normal;\n color: #63656e;\n text-align: center;\n}\n.bk-user-selector-popover.bk-user-selector-pop2-content {\n position: absolute;\n padding: 12px;\n font-size: 12px;\n color: #fff;\n background: #26323d;\n border-radius: 4px;\n box-sizing: border-box;\n}\n.bk-user-selector-popover.bk-user-selector-pop2-content.hidden {\n display: none;\n}\n.bk-user-selector-popover.bk-user-selector-pop2-content .bk-user-selector-pop2-arrow {\n position: absolute;\n z-index: -1;\n width: 8px;\n height: 8px;\n background: #333;\n transform: rotate(45deg);\n}\n.bk-user-selector-popover.bk-user-selector-pop2-content[data-theme^='light'] {\n color: #26323d;\n background-color: #fff;\n box-shadow: 0 0 6px 0 #dcdee5;\n}\n.bk-user-selector-popover.bk-user-selector-pop2-content[data-theme^='light'] .bk-user-selector-pop2-arrow {\n background-color: #fff;\n}\n.text-ov {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.position-relative {\n position: relative;\n}\n.position-absolute {\n position: absolute;\n}\n.overflow-popover-reference {\n width: 100%;\n}\n.bk-user-selector-tag {\n display: inline-flex;\n align-items: center;\n height: 22px;\n padding: 0 10px;\n font-size: 12px;\n line-height: 22px;\n color: #63656e;\n cursor: default;\n background-color: #f0f1f5;\n border-color: rgba(151, 155, 165, 0.3);\n box-sizing: border-box;\n}\n.bk-user-selector-tag.bk-user-selector-tag-success {\n color: #14a568;\n border-color: rgba(20, 165, 104, 0.3);\n background-color: #E4FAF0;\n}\n.bk-user-selector-tag.bk-user-selector-tag-success.bk-user-selector-tag-filled {\n background-color: #14A568;\n}\n.bk-user-selector-tag.bk-user-selector-tag-success.bk-user-selector-tag-filled:hover {\n background-color: #42B685;\n}\n.bk-user-selector-tag.bk-user-selector-tag-success:hover:not(.bk-user-selector-tag-filled) {\n background-color: #C9F5E2;\n}\n.bk-user-selector-tag.bk-user-selector-tag-info {\n color: #3a84ff;\n border-color: rgba(58, 132, 255, 0.3);\n background-color: #EDF4FF;\n}\n.bk-user-selector-tag.bk-user-selector-tag-info.bk-user-selector-tag-filled {\n background-color: #3A84FF;\n}\n.bk-user-selector-tag.bk-user-selector-tag-info.bk-user-selector-tag-filled:hover {\n background-color: #609CFE;\n}\n.bk-user-selector-tag.bk-user-selector-tag-info:hover:not(.bk-user-selector-tag-filled) {\n background-color: #E1ECFF;\n}\n.bk-user-selector-tag.bk-user-selector-tag-warning {\n color: #fe9c00;\n border-color: rgba(254, 165, 0, 0.3);\n background-color: #FFF1DB;\n}\n.bk-user-selector-tag.bk-user-selector-tag-warning.bk-user-selector-tag-filled {\n background-color: #FE9C00;\n}\n.bk-user-selector-tag.bk-user-selector-tag-warning.bk-user-selector-tag-filled:hover {\n background-color: #FDAF32;\n}\n.bk-user-selector-tag.bk-user-selector-tag-warning:hover:not(.bk-user-selector-tag-filled) {\n background-color: #FFE8C3;\n}\n.bk-user-selector-tag.bk-user-selector-tag-danger {\n color: #ea3636;\n border-color: rgba(234, 53, 54, 0.3);\n background-color: #FEEBEA;\n}\n.bk-user-selector-tag.bk-user-selector-tag-danger.bk-user-selector-tag-filled {\n background-color: #EA3536;\n}\n.bk-user-selector-tag.bk-user-selector-tag-danger.bk-user-selector-tag-filled:hover {\n background-color: #ED5C5D;\n}\n.bk-user-selector-tag.bk-user-selector-tag-danger:hover:not(.bk-user-selector-tag-filled) {\n background-color: #FEDDDC;\n}\n.bk-user-selector-tag:hover {\n background-color: #dcdee5;\n}\n.bk-user-selector-tag.bk-user-selector-tag-filled {\n color: #fff;\n background-color: #979BA5;\n}\n.bk-user-selector-tag.bk-user-selector-tag-filled:hover {\n background-color: #ACAFB6;\n}\n.bk-user-selector-tag.bk-user-selector-tag-stroke {\n padding: 0 9px;\n line-height: 20px;\n border-style: solid;\n border-width: 1px;\n}\n.bk-user-selector-tag.bk-user-selector-tag-closable {\n padding: 0 4px 0 10px;\n}\n.bk-user-selector-tag.bk-user-selector-tag-checkable {\n cursor: pointer;\n background: none;\n}\n.bk-user-selector-tag.bk-user-selector-tag-checkable:hover {\n background: #F0F1F5;\n}\n.bk-user-selector-tag.bk-user-selector-tag-check {\n color: #fff;\n background: #3a84ff;\n}\n.bk-user-selector-tag.bk-user-selector-tag-check:hover {\n color: #fff;\n background: #3a84ff;\n opacity: 1;\n}\n.bk-user-selector-tag--default {\n padding: 0 8px;\n}\n.bk-user-selector-tag--small {\n height: 16px;\n padding: 0 4px;\n line-height: 16px;\n}\n.bk-user-selector-tag--small .bk-user-selector-tag-text {\n font-size: 10px;\n}\n.bk-user-selector-tag-text {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.bk-user-selector-tag-icon {\n flex-shrink: 0;\n margin-right: 4px;\n font-size: 14px;\n line-height: 0;\n}\n.bk-user-selector-tag-close {\n flex-shrink: 0;\n margin-left: 4px;\n font-size: 12px;\n line-height: 0;\n cursor: pointer;\n}\n.me-tag[data-v-9ccd9029] {\n position: absolute;\n top: 50%;\n right: 8px;\n z-index: 1;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n padding: 0 8px;\n font-size: 12px;\n color: #4d4f56;\n cursor: pointer;\n background-color: #e1ecff;\n border-radius: 50%;\n transform: translateY(-50%);\n}\n.me-tag[data-v-9ccd9029]:hover {\n color: #3a84ff;\n background-color: #cddffe;\n}\n.me-tag.disabled[data-v-9ccd9029] {\n color: #c4c6cc;\n cursor: not-allowed;\n background-color: #f0f1f5;\n}.dropdown-content[data-v-a4132257] {\n min-height: 40px;\n max-height: 300px;\n padding: 5px 0;\n overflow-y: auto;\n}\n.dropdown-content .no-data[data-v-a4132257] {\n padding: 10px;\n color: #979ba5;\n text-align: center;\n}\n.dropdown-content .user-group .group-header[data-v-a4132257] {\n display: flex;\n align-items: center;\n padding: 8px 12px;\n color: #979ba5;\n}\n.dropdown-content .user-group .group-header .group-count[data-v-a4132257] {\n margin-left: 4px;\n}\n.dropdown-content .user-option[data-v-a4132257] {\n display: flex;\n align-items: center;\n height: 32px;\n padding: 8px 12px;\n cursor: pointer;\n}\n.dropdown-content .user-option[data-v-a4132257]:hover {\n background-color: #f5f7fa;\n}.bk-user-selector-popover.bk-user-selector-pop2-content {\n padding: 0;\n}.user-tag[data-v-51944a49] {\n margin-right: 4px;\n margin-left: 0;\n}\n.user-tag.draggable[data-v-51944a49] {\n cursor: move;\n}\n.user-tag.active[data-v-51944a49] {\n background-color: #e1ecff;\n border-color: #3a84ff;\n}\n.user-tag .tag-content .user-name[data-v-51944a49] {\n overflow: hidden;\n font-size: 12px;\n text-overflow: ellipsis;\n white-space: nowrap;\n}.multiple-selector[data-v-bebe517d] {\n position: relative;\n width: 100%;\n}\n.multiple-selector.is-disabled[data-v-bebe517d] {\n pointer-events: none;\n}\n.multiple-selector .tags-container[data-v-bebe517d] {\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-bebe517d] {\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-bebe517d] {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n}\n.multiple-selector .tag-list[data-v-bebe517d] {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n}\n.multiple-selector .tag-wrapper[data-v-bebe517d] {\n display: inline-flex;\n align-items: center;\n max-width: 100%;\n}\n.multiple-selector .search-input[data-v-bebe517d] {\n min-width: 10px;\n height: 28px;\n background: transparent;\n border: none;\n outline: none;\n}\n.multiple-selector .search-input[data-v-bebe517d]::placeholder {\n color: #c4c6cc;\n}\n.multiple-selector .search-input.inline[data-v-bebe517d] {\n min-width: 10px;\n}\n.multiple-selector .search-input.last[data-v-bebe517d], .multiple-selector .search-input.collapsed[data-v-bebe517d] {\n flex: 1;\n min-width: 60px;\n}.single-selector[data-v-67f2ee6a] {\n position: relative;\n width: 100%;\n}\n.single-selector.is-disabled[data-v-67f2ee6a] {\n pointer-events: none;\n}\n.input-container[data-v-67f2ee6a] {\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-67f2ee6a]: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-67f2ee6a] {\n flex: 1;\n height: 30px;\n background: transparent;\n border: none;\n outline: none;\n}\n.search-input[data-v-67f2ee6a]::placeholder {\n color: #c4c6cc;\n}.bk-user-selector[data-v-617ed278] {\n position: relative;\n width: 100%;\n font-size: 12px;\n}\n.bk-user-selector.is-disabled[data-v-617ed278] {\n cursor: not-allowed;\n background-color: #dcdee5;\n}"));
6
+ elementStyle.appendChild(document.createTextNode(".scroll-bar-style::-webkit-scrollbar {\n width: 4px;\n height: 4px;\n}\n.scroll-bar-style::-webkit-scrollbar-thumb {\n background: #ddd;\n border-radius: 20px;\n box-shadow: inset 0 0 6px rgba(204, 204, 204, 0.3);\n}\nhtml,\nbody {\n padding: 0;\n margin: 0;\n}\n* {\n box-sizing: border-box;\n}\n/**\n * HTML5 display definitions\n * ==========================================================================\n *\n * Correct `block` display not defined for any HTML5 element in IE 8/9.\n * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.\n * Correct `block` display not defined for `main` in IE 11.\n */\narticle,\naside,\ndetails,\nfigcaption,\nfigure,\nfooter,\nheader,\nhgroup,\nmain,\nmenu,\nnav,\nsection,\nsummary {\n display: block;\n}\n/**\n * 1. Correct `inline-block` display not defined in IE 8/9.\n * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.\n */\naudio,\ncanvas,\nprogress,\nvideo {\n /* 1 */\n display: inline-block;\n /* 2 */\n vertical-align: baseline;\n}\n/**\n * Prevent modern browsers from displaying `audio` without controls.\n * Remove excess height in iOS 5 devices.\n */\naudio:not([controls]) {\n display: none;\n height: 0;\n}\n/**\n * Address `[hidden]` styling not present in IE 8/9/10.\n * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.\n */\n[hidden],\ntemplate {\n display: none;\n}\n/**\n * Links\n * ==========================================================================\n *\n * Remove the gray background color from active links in IE 10.\n */\na {\n background-color: transparent;\n}\n/**\n * Improve readability of focused elements when they are also in an\n * active/hover state.\n */\na:active,\na:hover {\n outline: 0;\n}\n/**\n * Text-level semantics\n * ==========================================================================\n *\n * Address styling not present in IE 8/9/10/11, Safari, and Chrome.\n */\nabbr[title] {\n border-bottom: 1px dotted;\n}\n/**\n * Embedded content\n * ==========================================================================\n *\n * Remove border when inside `a` element in IE 8/9/10.\n */\nimg {\n border: 0;\n}\n/**\n * Correct overflow not hidden in IE 9/10/11.\n */\nsvg:not(:root) {\n overflow: hidden;\n}\n/**\n * Grouping content\n * ==========================================================================\n *\n * Address margin not present in IE 8/9 and Safari.\n */\nfigure {\n margin: 1em 40px;\n}\n/**\n * Address differences between Firefox and other browsers.\n */\nhr {\n height: 0;\n box-sizing: content-box;\n}\n/**\n * Address odd `em`-unit font size rendering in all browsers.\n *\n * Forms\n * ==========================================================================\n *\n * Known limitation: by default, Chrome and Safari on OS X allow very limited\n * styling of `select`, unless a `border` property is set.\n *\n * 1. Correct color not being inherited.\n * Known issue: affects color of disabled elements.\n * 2. Correct font properties not being inherited.\n * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.\n */\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n /* 3 */\n margin: 0;\n /* 2 */\n font: inherit;\n /* 1 */\n color: inherit;\n}\n/**\n * Address `overflow` set to `hidden` in IE 8/9/10/11.\n */\nbutton {\n overflow: visible;\n}\n/**\n * Address inconsistent `text-transform` inheritance for `button` and `select`.\n * All other form control elements do not inherit `text-transform` values.\n * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.\n * Correct `select` style inheritance in Firefox.\n */\nbutton,\nselect {\n text-transform: none;\n}\n/**\n * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls.\n * 2. Correct inability to style clickable `input` types in iOS.\n * 3. Improve usability and consistency of cursor style between image-type `input` and others.\n */\nbutton,\nhtml input[type='button'],\ninput[type='reset'],\ninput[type='submit'] {\n /* 3 */\n cursor: pointer;\n /* 2 */\n appearance: button;\n}\n/* Re-set default cursor for disabled elements. */\nbutton[disabled],\nhtml input[disabled] {\n cursor: default;\n}\n/* Remove inner padding and border in Firefox 4+. */\nbutton::-moz-focus-inner,\ninput::-moz-focus-inner {\n padding: 0;\n border: 0;\n}\n/**\n * Address Firefox 4+ setting `line-height` on `input` using `!important` in the UA stylesheet.\n */\ninput {\n line-height: normal;\n}\n/**\n * It's recommended that you don't attempt to style these elements.\n * Firefox's implementation doesn't respect box-sizing, padding, or width.\n *\n * 1. Address box sizing set to `content-box` in IE 8/9/10.\n * 2. Remove excess padding in IE 8/9/10.\n */\ninput[type='checkbox'],\ninput[type='radio'] {\n /* 2 */\n padding: 0;\n /* 1 */\n box-sizing: border-box;\n}\n/**\n * Fix the cursor style for Chrome's increment/decrement buttons. For certain\n * `font-size` values of the `input`, it causes the cursor style of the\n * decrement button to change from `default` to `text`.\n */\ninput[type='number']::-webkit-inner-spin-button,\ninput[type='number']::-webkit-outer-spin-button {\n height: auto;\n}\n::-ms-clear,\n::-ms-reveal {\n display: none;\n}\ninput[type='text']::-ms-clear {\n display: none;\n}\ninput[type='text']::-ms-reveal {\n display: none;\n}\n/**\n * 1. Address `appearance` set to `searchfield` in Safari and Chrome.\n * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.\n */\ninput[type='search'] {\n /* 2 */\n box-sizing: content-box;\n /* 1 */\n appearance: textfield;\n}\n/**\n * Remove inner padding and search cancel button in Safari and Chrome on OS X.\n * Safari (but not Chrome) clips the cancel button when the search input has\n * padding (and `textfield` appearance).\n */\ninput[type='search']::-webkit-search-cancel-button,\ninput[type='search']::-webkit-search-decoration {\n appearance: none;\n}\n/**\n * Define consistent border, margin, and padding.\n */\nfieldset {\n padding: 0.35em 0.625em 0.75em;\n margin: 0 2px;\n border: 1px solid #c0c0c0;\n}\n/**\n * 1. Correct `color` not being inherited in IE 8/9/10/11.\n * 2. Remove padding so people aren't caught out if they zero out fieldsets.\n */\nlegend {\n /* 2 */\n padding: 0;\n /* 1 */\n border: 0;\n}\n/**\n * Remove default vertical scrollbar in IE 8/9/10/11.\n */\ntextarea {\n overflow: auto;\n}\n/**\n * Don't inherit the `font-weight` (applied by a rule above).\n * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.\n */\noptgroup {\n font-weight: bold;\n}\n/**\n* BK-Scroll-Style\n*/\n.bk-scroll-y {\n overflow-y: auto;\n}\n.bk-scroll-y::-webkit-scrollbar {\n width: 4px;\n height: 4px;\n}\n.bk-scroll-y::-webkit-scrollbar-thumb {\n background: #ddd;\n border-radius: 20px;\n box-shadow: inset 0 0 6px rgba(204, 204, 204, 0.3);\n}\n.bk-scroll-x {\n overflow-x: auto;\n}\n.bk-scroll-x::-webkit-scrollbar {\n width: 4px;\n height: 4px;\n}\n.bk-scroll-x::-webkit-scrollbar-thumb {\n background: #ddd;\n border-radius: 20px;\n box-shadow: inset 0 0 6px rgba(204, 204, 204, 0.3);\n}\n@keyframes loading-scale-animate {\n 0% {\n transform: scale(1);\n }\n 100% {\n transform: scale(0.6);\n }\n}\n@keyframes fade {\n 100% {\n background-color: transparent;\n }\n}\n.bk-user-selector-transition .bk-user-selector-fade-enter-active,\n.bk-user-selector-transition .bk-user-selector-fade-leave-active {\n transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);\n}\n.bk-user-selector-transition .bk-user-selector-fade-enter,\n.bk-user-selector-transition .bk-user-selector-fade-leave-to {\n opacity: 0;\n}\n.clearfix-style::after {\n display: block;\n height: 0;\n clear: both;\n font-size: 0;\n content: '';\n visibility: hidden;\n}\n.bk-user-selector-popper {\n display: none;\n padding: 7px 14px;\n font-size: 12px;\n color: #fff;\n background: #333;\n border-radius: 4px;\n}\n.bk-user-selector-popper.light {\n color: #63656e;\n background: #fff;\n box-shadow: #dcdee5 0 0 6px 0;\n}\n.bk-user-selector-popper .bk-user-selector-popper-arrow,\n.bk-user-selector-popper .bk-user-selector-popper-arrow::before {\n position: absolute;\n width: 8px;\n height: 8px;\n background: inherit;\n}\n.bk-user-selector-popper .bk-user-selector-popper-arrow {\n visibility: hidden;\n}\n.bk-user-selector-popper .bk-user-selector-popper-arrow::before {\n content: '';\n visibility: visible;\n transform: rotate(45deg);\n}\n.bk-user-selector-popper[data-show] {\n display: block;\n}\n.bk-user-selector-popper[data-popper-placement^='top'] > .bk-user-selector-popper-arrow {\n bottom: -4px;\n}\n.bk-user-selector-popper[data-popper-placement^='bottom'] > .bk-user-selector-popper-arrow {\n top: -4px;\n}\n.bk-user-selector-popper[data-popper-placement^='left'] > .bk-user-selector-popper-arrow {\n right: -4px;\n}\n.bk-user-selector-popper[data-popper-placement^='right'] > .bk-user-selector-popper-arrow {\n left: -4px;\n}\n.bk-user-selector-loading-wrapper {\n position: static;\n vertical-align: middle;\n}\n.bk-user-selector-loading-wrapper:not(.bk-user-selector-nested-loading):not(.bk-user-selector-directive-loading) {\n display: inline-flex;\n}\n.bk-user-selector-loading-wrapper.bk-user-selector-directive-loading {\n width: 100%;\n height: 100%;\n}\n.bk-user-selector-loading-wrapper.bk-user-selector-directive-loading,\n.bk-user-selector-loading-wrapper.bk-user-selector-nested-loading {\n position: relative;\n}\n.bk-user-selector-loading-wrapper.bk-user-selector-directive-loading.is-block,\n.bk-user-selector-loading-wrapper.bk-user-selector-nested-loading.is-block {\n display: block;\n}\n.bk-user-selector-loading-wrapper.bk-user-selector-directive-loading .bk-user-selector-loading-indicator,\n.bk-user-selector-loading-wrapper.bk-user-selector-nested-loading .bk-user-selector-loading-indicator {\n position: absolute;\n top: 50%;\n left: 50%;\n z-index: 11;\n text-align: center;\n transform: translate(-50%, -50%);\n}\n.bk-user-selector-loading-wrapper .dot {\n display: inline-flex;\n width: 14px;\n height: 14px;\n margin-right: 10px;\n border-radius: 50%;\n transform: scale(0.6);\n animation-duration: 0.8s;\n animation-iteration-count: infinite;\n animation-name: loading-scale-animate;\n animation-direction: normal;\n}\n.bk-user-selector-loading-wrapper .oval {\n position: absolute;\n width: 6px;\n height: 8px;\n background-color: #63656e;\n border-radius: 8px;\n animation-duration: 1.2s;\n animation-iteration-count: infinite;\n animation-name: fade;\n transform-origin: center 24px;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-mask {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator {\n display: flex;\n line-height: 1;\n text-align: center;\n flex-direction: column;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-success .oval,\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-success .dot,\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-success .dot-1,\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-success .dot-2,\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-success .dot-3,\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-success .dot-4 {\n background-color: #2dcb56;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-danger .oval,\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-danger .dot,\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-danger .dot-1,\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-danger .dot-2,\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-danger .dot-3,\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-danger .dot-4 {\n background-color: #ea3636;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-warning .oval,\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-warning .dot,\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-warning .dot-1,\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-warning .dot-2,\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-warning .dot-3,\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-warning .dot-4 {\n background-color: #ff9c01;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-primary .oval,\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-primary .dot,\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-primary .dot-1,\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-primary .dot-2,\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-primary .dot-3,\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-primary .dot-4 {\n background-color: #3a84ff;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-white .oval,\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-white .dot,\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-white .dot-1,\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-white .dot-2,\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-white .dot-3,\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-white .dot-4 {\n background-color: white;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-default .oval,\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-default .dot,\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-default .dot-1,\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-default .dot-2,\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-default .dot-3,\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-default .dot-4 {\n background-color: #c4c6cc;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator .dot-1 {\n background-color: #ea3636;\n animation-delay: 0.1s;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator .dot-2 {\n background-color: #ff9c01;\n animation-delay: 0.25s;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator .dot-3 {\n background-color: #2dcb56;\n animation-delay: 0.4s;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator .dot-4 {\n background-color: #3a84ff;\n animation-delay: 0.55s;\n margin-right: 0px;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator .oval-1 {\n transform: rotate(135deg);\n animation-delay: -0.45s;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator .oval-2 {\n transform: rotate(90deg);\n animation-delay: -0.6s;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator .oval-3 {\n transform: rotate(45deg);\n animation-delay: -0.75s;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator .oval-4 {\n transform: rotate(0deg);\n animation-delay: -0.9s;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator .oval-5 {\n transform: rotate(-45deg);\n animation-delay: -1.05s;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator .oval-6 {\n transform: rotate(-90deg);\n animation-delay: -1.2s;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator .oval-7 {\n transform: rotate(-135deg);\n animation-delay: -1.35s;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator .oval-8 {\n transform: rotate(-180deg);\n animation-delay: -1.5s;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator .bk-user-selector-normal-indicator {\n display: inline-flex;\n justify-content: center;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator .bk-user-selector-spin-indicator {\n position: relative;\n display: inline-flex;\n justify-content: center;\n width: 48px;\n height: 48px;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-size-mini .bk-user-selector-spin-indicator {\n height: 16px;\n width: 16px;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-size-mini .dot {\n width: 3px;\n height: 3px;\n margin-right: 3px;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-size-mini .dot.dot-4 {\n margin-right: 0;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-size-mini .oval {\n width: 2px;\n height: 3px;\n border-radius: 3px;\n transform-origin: center 8px;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-size-mini .bk-user-selector-loading-title {\n font-size: 14px;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-size-small .bk-user-selector-spin-indicator {\n height: 32px;\n width: 32px;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-size-small .dot {\n width: 6px;\n height: 6px;\n margin-right: 6px;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-size-small .dot.dot-4 {\n margin-right: 0;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-size-small .oval {\n width: 4px;\n height: 5px;\n border-radius: 5px;\n transform-origin: center 16px;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-size-small .bk-user-selector-loading-title {\n font-size: 12px;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-size-large .bk-user-selector-spin-indicator {\n height: 68px;\n width: 68px;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-size-large .dot {\n width: 20px;\n height: 20px;\n margin-right: 12px;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-size-large .dot.dot-4 {\n margin-right: 0;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-size-large .oval {\n width: 8px;\n height: 12px;\n border-radius: 12px;\n transform-origin: center 34px;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator.bk-user-selector-loading-size-large .bk-user-selector-loading-title {\n font-size: 14px;\n}\n.bk-user-selector-loading-wrapper .bk-user-selector-loading-indicator .bk-user-selector-loading-title {\n margin-top: 8px;\n font-size: 14px;\n line-height: normal;\n color: #63656e;\n text-align: center;\n}\n.bk-user-selector-popover.bk-user-selector-pop2-content {\n position: absolute;\n padding: 12px;\n font-size: 12px;\n color: #fff;\n background: #26323d;\n border-radius: 4px;\n box-sizing: border-box;\n}\n.bk-user-selector-popover.bk-user-selector-pop2-content.hidden {\n display: none;\n}\n.bk-user-selector-popover.bk-user-selector-pop2-content .bk-user-selector-pop2-arrow {\n position: absolute;\n z-index: -1;\n width: 8px;\n height: 8px;\n background: #333;\n transform: rotate(45deg);\n}\n.bk-user-selector-popover.bk-user-selector-pop2-content[data-theme^='light'] {\n color: #26323d;\n background-color: #fff;\n box-shadow: 0 0 6px 0 #dcdee5;\n}\n.bk-user-selector-popover.bk-user-selector-pop2-content[data-theme^='light'] .bk-user-selector-pop2-arrow {\n background-color: #fff;\n}\n.text-ov {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.position-relative {\n position: relative;\n}\n.position-absolute {\n position: absolute;\n}\n.overflow-popover-reference {\n width: 100%;\n}\n.bk-user-selector-tag {\n display: inline-flex;\n align-items: center;\n height: 22px;\n padding: 0 10px;\n font-size: 12px;\n line-height: 22px;\n color: #63656e;\n cursor: default;\n background-color: #f0f1f5;\n border-color: rgba(151, 155, 165, 0.3);\n box-sizing: border-box;\n}\n.bk-user-selector-tag.bk-user-selector-tag-success {\n color: #14a568;\n border-color: rgba(20, 165, 104, 0.3);\n background-color: #E4FAF0;\n}\n.bk-user-selector-tag.bk-user-selector-tag-success.bk-user-selector-tag-filled {\n background-color: #14A568;\n}\n.bk-user-selector-tag.bk-user-selector-tag-success.bk-user-selector-tag-filled:hover {\n background-color: #42B685;\n}\n.bk-user-selector-tag.bk-user-selector-tag-success:hover:not(.bk-user-selector-tag-filled) {\n background-color: #C9F5E2;\n}\n.bk-user-selector-tag.bk-user-selector-tag-info {\n color: #3a84ff;\n border-color: rgba(58, 132, 255, 0.3);\n background-color: #EDF4FF;\n}\n.bk-user-selector-tag.bk-user-selector-tag-info.bk-user-selector-tag-filled {\n background-color: #3A84FF;\n}\n.bk-user-selector-tag.bk-user-selector-tag-info.bk-user-selector-tag-filled:hover {\n background-color: #609CFE;\n}\n.bk-user-selector-tag.bk-user-selector-tag-info:hover:not(.bk-user-selector-tag-filled) {\n background-color: #E1ECFF;\n}\n.bk-user-selector-tag.bk-user-selector-tag-warning {\n color: #fe9c00;\n border-color: rgba(254, 165, 0, 0.3);\n background-color: #FFF1DB;\n}\n.bk-user-selector-tag.bk-user-selector-tag-warning.bk-user-selector-tag-filled {\n background-color: #FE9C00;\n}\n.bk-user-selector-tag.bk-user-selector-tag-warning.bk-user-selector-tag-filled:hover {\n background-color: #FDAF32;\n}\n.bk-user-selector-tag.bk-user-selector-tag-warning:hover:not(.bk-user-selector-tag-filled) {\n background-color: #FFE8C3;\n}\n.bk-user-selector-tag.bk-user-selector-tag-danger {\n color: #ea3636;\n border-color: rgba(234, 53, 54, 0.3);\n background-color: #FEEBEA;\n}\n.bk-user-selector-tag.bk-user-selector-tag-danger.bk-user-selector-tag-filled {\n background-color: #EA3536;\n}\n.bk-user-selector-tag.bk-user-selector-tag-danger.bk-user-selector-tag-filled:hover {\n background-color: #ED5C5D;\n}\n.bk-user-selector-tag.bk-user-selector-tag-danger:hover:not(.bk-user-selector-tag-filled) {\n background-color: #FEDDDC;\n}\n.bk-user-selector-tag:hover {\n background-color: #dcdee5;\n}\n.bk-user-selector-tag.bk-user-selector-tag-filled {\n color: #fff;\n background-color: #979BA5;\n}\n.bk-user-selector-tag.bk-user-selector-tag-filled:hover {\n background-color: #ACAFB6;\n}\n.bk-user-selector-tag.bk-user-selector-tag-stroke {\n padding: 0 9px;\n line-height: 20px;\n border-style: solid;\n border-width: 1px;\n}\n.bk-user-selector-tag.bk-user-selector-tag-closable {\n padding: 0 4px 0 10px;\n}\n.bk-user-selector-tag.bk-user-selector-tag-checkable {\n cursor: pointer;\n background: none;\n}\n.bk-user-selector-tag.bk-user-selector-tag-checkable:hover {\n background: #F0F1F5;\n}\n.bk-user-selector-tag.bk-user-selector-tag-check {\n color: #fff;\n background: #3a84ff;\n}\n.bk-user-selector-tag.bk-user-selector-tag-check:hover {\n color: #fff;\n background: #3a84ff;\n opacity: 1;\n}\n.bk-user-selector-tag--default {\n padding: 0 8px;\n}\n.bk-user-selector-tag--small {\n height: 16px;\n padding: 0 4px;\n line-height: 16px;\n}\n.bk-user-selector-tag--small .bk-user-selector-tag-text {\n font-size: 10px;\n}\n.bk-user-selector-tag-text {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.bk-user-selector-tag-icon {\n flex-shrink: 0;\n margin-right: 4px;\n font-size: 14px;\n line-height: 0;\n}\n.bk-user-selector-tag-close {\n flex-shrink: 0;\n margin-left: 4px;\n font-size: 12px;\n line-height: 0;\n cursor: pointer;\n}\n.me-tag[data-v-9ccd9029] {\n position: absolute;\n top: 50%;\n right: 8px;\n z-index: 1;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n padding: 0 8px;\n font-size: 12px;\n color: #4d4f56;\n cursor: pointer;\n background-color: #e1ecff;\n border-radius: 50%;\n transform: translateY(-50%);\n}\n.me-tag[data-v-9ccd9029]:hover {\n color: #3a84ff;\n background-color: #cddffe;\n}\n.me-tag.disabled[data-v-9ccd9029] {\n color: #c4c6cc;\n cursor: not-allowed;\n background-color: #f0f1f5;\n}.dropdown-content[data-v-a4132257] {\n min-height: 40px;\n max-height: 300px;\n padding: 5px 0;\n overflow-y: auto;\n}\n.dropdown-content .no-data[data-v-a4132257] {\n padding: 10px;\n color: #979ba5;\n text-align: center;\n}\n.dropdown-content .user-group .group-header[data-v-a4132257] {\n display: flex;\n align-items: center;\n padding: 8px 12px;\n color: #979ba5;\n}\n.dropdown-content .user-group .group-header .group-count[data-v-a4132257] {\n margin-left: 4px;\n}\n.dropdown-content .user-option[data-v-a4132257] {\n display: flex;\n align-items: center;\n height: 32px;\n padding: 8px 12px;\n cursor: pointer;\n}\n.dropdown-content .user-option[data-v-a4132257]:hover {\n background-color: #f5f7fa;\n}.bk-user-selector-popover.bk-user-selector-pop2-content {\n padding: 0;\n}.user-tag[data-v-51944a49] {\n margin-right: 4px;\n margin-left: 0;\n}\n.user-tag.draggable[data-v-51944a49] {\n cursor: move;\n}\n.user-tag.active[data-v-51944a49] {\n background-color: #e1ecff;\n border-color: #3a84ff;\n}\n.user-tag .tag-content .user-name[data-v-51944a49] {\n overflow: hidden;\n font-size: 12px;\n text-overflow: ellipsis;\n white-space: nowrap;\n}.multiple-selector[data-v-7ff53892] {\n position: relative;\n width: 100%;\n}\n.multiple-selector.is-disabled[data-v-7ff53892] {\n pointer-events: none;\n}\n.multiple-selector .tags-container[data-v-7ff53892] {\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-7ff53892] {\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-7ff53892] {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n}\n.multiple-selector .tag-list[data-v-7ff53892] {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n}\n.multiple-selector .tag-wrapper[data-v-7ff53892] {\n display: inline-flex;\n align-items: center;\n max-width: 100%;\n}\n.multiple-selector .search-input[data-v-7ff53892] {\n min-width: 10px;\n height: 28px;\n background: transparent;\n border: none;\n outline: none;\n}\n.multiple-selector .search-input[data-v-7ff53892]::placeholder {\n color: #c4c6cc;\n}\n.multiple-selector .search-input.inline[data-v-7ff53892] {\n min-width: 10px;\n}\n.multiple-selector .search-input.last[data-v-7ff53892], .multiple-selector .search-input.collapsed[data-v-7ff53892] {\n flex: 1;\n min-width: 60px;\n}.single-selector[data-v-d56195a1] {\n position: relative;\n width: 100%;\n}\n.single-selector.is-disabled[data-v-d56195a1] {\n pointer-events: none;\n}\n.input-container[data-v-d56195a1] {\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-d56195a1]: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-d56195a1] {\n flex: 1;\n height: 30px;\n background: transparent;\n border: none;\n outline: none;\n}\n.search-input[data-v-d56195a1]::placeholder {\n color: #c4c6cc;\n}.bk-user-selector[data-v-812cbe5a] {\n position: relative;\n width: 100%;\n font-size: 12px;\n}\n.bk-user-selector.is-disabled[data-v-812cbe5a] {\n cursor: not-allowed;\n background-color: #dcdee5;\n}"));
7
7
  document.head.appendChild(elementStyle);
8
8
  }
9
9
  } catch (e) {
@@ -10707,10 +10707,15 @@ ${$(r2)}`), n2;
10707
10707
  const jsonpRequest = (requestUrl, options = {}) => {
10708
10708
  return new Promise((resolve, reject) => {
10709
10709
  const url = __WEBPACK_EXTERNAL_MODULE_vue__.unref(requestUrl);
10710
- const { timeout = 1e3 * 60 * 2, params } = options;
10710
+ const { timeout = 1e3 * 60 * 2, params, withCredentials = true } = options;
10711
10711
  const callbackName = generateCallbackName();
10712
10712
  const script = document.createElement("script");
10713
10713
  let timeoutId;
10714
+ if (withCredentials) {
10715
+ script.crossOrigin = "use-credentials";
10716
+ } else {
10717
+ script.crossOrigin = "anonymous";
10718
+ }
10714
10719
  const cleanup = () => {
10715
10720
  if (timeoutId) {
10716
10721
  clearTimeout(timeoutId);
@@ -10724,7 +10729,7 @@ ${$(r2)}`), n2;
10724
10729
  };
10725
10730
  window[callbackName] = (data2) => {
10726
10731
  cleanup();
10727
- resolve(data2);
10732
+ resolve(data2.data || data2);
10728
10733
  };
10729
10734
  timeoutId = setTimeout(() => {
10730
10735
  cleanup();
@@ -10740,48 +10745,6 @@ ${$(r2)}`), n2;
10740
10745
  document.head.appendChild(script);
10741
10746
  });
10742
10747
  };
10743
- const useJSONP = (url, options = {}) => {
10744
- const data2 = __WEBPACK_EXTERNAL_MODULE_vue__.shallowRef(null);
10745
- const loading2 = __WEBPACK_EXTERNAL_MODULE_vue__.shallowRef(false);
10746
- const error2 = __WEBPACK_EXTERNAL_MODULE_vue__.shallowRef(null);
10747
- let abortFlag = false;
10748
- const executeRequest = async (requestUrl) => {
10749
- if (!requestUrl) return;
10750
- loading2.value = true;
10751
- error2.value = null;
10752
- abortFlag = false;
10753
- try {
10754
- const result = await jsonpRequest(requestUrl, options);
10755
- if (!abortFlag) {
10756
- data2.value = result;
10757
- }
10758
- } catch (err) {
10759
- if (!abortFlag) {
10760
- const errorObj = err instanceof Error ? err : new Error(String(err));
10761
- error2.value = errorObj;
10762
- }
10763
- } finally {
10764
- if (!abortFlag) {
10765
- loading2.value = false;
10766
- }
10767
- }
10768
- };
10769
- const stopWatcher = __WEBPACK_EXTERNAL_MODULE_vue__.watchEffect(() => {
10770
- executeRequest(__WEBPACK_EXTERNAL_MODULE_vue__.unref(url));
10771
- });
10772
- __WEBPACK_EXTERNAL_MODULE_vue__.onScopeDispose(() => {
10773
- abortFlag = true;
10774
- stopWatcher();
10775
- });
10776
- return {
10777
- data: data2,
10778
- loading: loading2,
10779
- error: error2,
10780
- refetch: () => {
10781
- executeRequest(__WEBPACK_EXTERNAL_MODULE_vue__.unref(url));
10782
- }
10783
- };
10784
- };
10785
10748
  const getTenants = async (apiBaseUrl, tenantId) => {
10786
10749
  if (!apiBaseUrl || !tenantId) {
10787
10750
  console.warn("获取租户信息需要提供有效的apiBaseUrl和租户ID");
@@ -10808,7 +10771,7 @@ ${$(r2)}`), n2;
10808
10771
  };
10809
10772
  const searchUsers = async (params) => {
10810
10773
  const { apiBaseUrl, tenantId, keyword, enableMultiTenantMode = true } = params;
10811
- if (enableMultiTenantMode) {
10774
+ if (!enableMultiTenantMode) {
10812
10775
  const userList = await getUserList(apiBaseUrl, {
10813
10776
  keyword,
10814
10777
  pageSize: 100,
@@ -10844,7 +10807,7 @@ ${$(r2)}`), n2;
10844
10807
  const lookupUsers = async (params) => {
10845
10808
  const { apiBaseUrl, tenantId, exactSearchKey = "bk_username", usersList = [], enableMultiTenantMode = true } = params;
10846
10809
  const users = usersList.filter((user) => user).map((user) => user.trim());
10847
- if (enableMultiTenantMode) {
10810
+ if (!enableMultiTenantMode) {
10848
10811
  const userList = await getUserList(apiBaseUrl, {
10849
10812
  userIds: users
10850
10813
  }).catch(() => {
@@ -10875,18 +10838,26 @@ ${$(r2)}`), n2;
10875
10838
  return [];
10876
10839
  }
10877
10840
  };
10878
- const formatUsers = (users) => {
10841
+ const formatUsers = (users, enableMultiTenantMode = true) => {
10879
10842
  if (!users || !Array.isArray(users)) return [];
10843
+ if (!enableMultiTenantMode) {
10844
+ return users.map((user) => ({
10845
+ ...user,
10846
+ id: user.username,
10847
+ name: `${user.display_name}(${user.username})`,
10848
+ tenantId: user.owner_tenant_id
10849
+ }));
10850
+ }
10880
10851
  return users.map((user) => ({
10881
- id: user.bk_username || user.username,
10852
+ id: user.bk_username,
10882
10853
  name: user.display_name,
10883
10854
  tenantId: user.owner_tenant_id,
10884
10855
  ...user
10885
10856
  }));
10886
10857
  };
10887
10858
  const getUserList = async (url, params) => {
10888
- const { userIds, keyword, pageSize, page, appCode } = params;
10889
- const { data: userList } = await useJSONP(url, {
10859
+ const { userIds, keyword, pageSize = 20, page, appCode } = params;
10860
+ const data2 = await jsonpRequest(url, {
10890
10861
  params: {
10891
10862
  exact_lookups: (userIds == null ? void 0 : userIds.join(",")) || void 0,
10892
10863
  fuzzy_lookups: keyword || void 0,
@@ -10895,7 +10866,7 @@ ${$(r2)}`), n2;
10895
10866
  app_code: appCode || "bk-magicbox"
10896
10867
  }
10897
10868
  });
10898
- return userList.value || [];
10869
+ return (data2 == null ? void 0 : data2.results) || [];
10899
10870
  };
10900
10871
  const useTenantData = (apiBaseUrl, tenantId, enableMultiTenantMode = true) => {
10901
10872
  const tenants = __WEBPACK_EXTERNAL_MODULE_vue__.ref({});
@@ -13726,7 +13697,7 @@ ${$(r2)}`), n2;
13726
13697
  }
13727
13698
  return Math.max(1, visibleCount);
13728
13699
  };
13729
- const useUserSearch = (apiBaseUrl, tenantId) => {
13700
+ const useUserSearch = (apiBaseUrl, tenantId, enableMultiTenantMode = true) => {
13730
13701
  const searchResults = __WEBPACK_EXTERNAL_MODULE_vue__.ref([]);
13731
13702
  const loading2 = __WEBPACK_EXTERNAL_MODULE_vue__.ref(false);
13732
13703
  const searchQuery = __WEBPACK_EXTERNAL_MODULE_vue__.ref("");
@@ -13745,9 +13716,9 @@ ${$(r2)}`), n2;
13745
13716
  apiBaseUrl,
13746
13717
  tenantId,
13747
13718
  keyword,
13748
- enableMultiTenantMode: true
13719
+ enableMultiTenantMode
13749
13720
  });
13750
- searchResults.value = formatUsers(results);
13721
+ searchResults.value = formatUsers(results, enableMultiTenantMode);
13751
13722
  } catch (error2) {
13752
13723
  console.error("用户搜索失败:", error2);
13753
13724
  searchResults.value = [];
@@ -14179,7 +14150,7 @@ ${$(r2)}`), n2;
14179
14150
  searchQuery,
14180
14151
  // clearSearch,
14181
14152
  handleSearchInput
14182
- } = useUserSearch(props2.apiBaseUrl, props2.tenantId);
14153
+ } = useUserSearch(props2.apiBaseUrl, props2.tenantId, props2.enableMultiTenantMode);
14183
14154
  const containerRef = __WEBPACK_EXTERNAL_MODULE_vue__.ref(null);
14184
14155
  const tagsContainerRef = __WEBPACK_EXTERNAL_MODULE_vue__.ref(null);
14185
14156
  const sortableContainerRef = __WEBPACK_EXTERNAL_MODULE_vue__.ref(null);
@@ -14306,7 +14277,7 @@ ${$(r2)}`), n2;
14306
14277
  usersList: [props2.currentUserId],
14307
14278
  enableMultiTenantMode: props2.enableMultiTenantMode
14308
14279
  });
14309
- const formattedUsers = formatUsers(result);
14280
+ const formattedUsers = formatUsers(result, props2.enableMultiTenantMode);
14310
14281
  if (formattedUsers.length > 0) {
14311
14282
  if (!props2.selectedUsers.some((item) => item.id === formattedUsers[0].id)) {
14312
14283
  emit("update:selectedUsers", [...props2.selectedUsers, formattedUsers[0]]);
@@ -14334,7 +14305,7 @@ ${$(r2)}`), n2;
14334
14305
  usersList: users,
14335
14306
  enableMultiTenantMode: props2.enableMultiTenantMode
14336
14307
  });
14337
- const formattedUsers = formatUsers(result);
14308
+ const formattedUsers = formatUsers(result, props2.enableMultiTenantMode);
14338
14309
  if (formattedUsers.length > 0) {
14339
14310
  const updatedUsers = [...props2.selectedUsers, ...formattedUsers];
14340
14311
  emit("update:selectedUsers", updatedUsers);
@@ -14648,7 +14619,7 @@ ${$(r2)}`), n2;
14648
14619
  };
14649
14620
  }
14650
14621
  });
14651
- const MultipleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-bebe517d"]]);
14622
+ const MultipleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-7ff53892"]]);
14652
14623
  const _hoisted_1 = { class: "input-container" };
14653
14624
  const _hoisted_2 = ["placeholder"];
14654
14625
  const _sfc_main$1 = /* @__PURE__ */ __WEBPACK_EXTERNAL_MODULE_vue__.defineComponent({
@@ -14709,7 +14680,9 @@ ${$(r2)}`), n2;
14709
14680
  usersList: [props2.modelValue],
14710
14681
  enableMultiTenantMode: props2.enableMultiTenantMode
14711
14682
  });
14712
- options.value = formatUsers(result).filter((user) => !props2.excludeUserIds.includes(user.id));
14683
+ options.value = formatUsers(result, props2.enableMultiTenantMode).filter(
14684
+ (user) => !props2.excludeUserIds.includes(user.id)
14685
+ );
14713
14686
  if (props2.userGroup.length > 0) {
14714
14687
  const groupResult = props2.userGroup.filter((group) => group.id == props2.modelValue);
14715
14688
  options.value = groupResult.map((group) => ({
@@ -14740,7 +14713,7 @@ ${$(r2)}`), n2;
14740
14713
  usersList: [props2.currentUserId],
14741
14714
  enableMultiTenantMode: props2.enableMultiTenantMode
14742
14715
  });
14743
- const formattedResults = formatUsers(result);
14716
+ const formattedResults = formatUsers(result, props2.enableMultiTenantMode);
14744
14717
  if (formattedResults.length > 0) {
14745
14718
  options.value = formattedResults.filter((user) => !props2.excludeUserIds.includes(user.id));
14746
14719
  addUser(formattedResults[0]);
@@ -14762,7 +14735,7 @@ ${$(r2)}`), n2;
14762
14735
  keyword,
14763
14736
  enableMultiTenantMode: props2.enableMultiTenantMode
14764
14737
  });
14765
- options.value = formatUsers(result).filter((user) => !selectedUser.value || user.id !== selectedUser.value).filter((user) => !props2.excludeUserIds.includes(user.id));
14738
+ options.value = formatUsers(result, props2.enableMultiTenantMode).filter((user) => !selectedUser.value || user.id !== selectedUser.value).filter((user) => !props2.excludeUserIds.includes(user.id));
14766
14739
  } catch (error2) {
14767
14740
  console.error("获取用户列表失败:", error2);
14768
14741
  options.value = [];
@@ -14866,7 +14839,7 @@ ${$(r2)}`), n2;
14866
14839
  };
14867
14840
  }
14868
14841
  });
14869
- const SingleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-67f2ee6a"]]);
14842
+ const SingleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-d56195a1"]]);
14870
14843
  const _sfc_main = /* @__PURE__ */ __WEBPACK_EXTERNAL_MODULE_vue__.defineComponent({
14871
14844
  ...{
14872
14845
  name: "BkUserSelector"
@@ -14924,7 +14897,7 @@ ${$(r2)}`), n2;
14924
14897
  usersList: ids,
14925
14898
  enableMultiTenantMode: props2.enableMultiTenantMode
14926
14899
  });
14927
- selectedUsers.value = [...selected, ...formatUsers(result)];
14900
+ selectedUsers.value = [...selected, ...formatUsers(result, props2.enableMultiTenantMode)];
14928
14901
  } catch (error2) {
14929
14902
  console.error("获取选中用户信息失败:", error2);
14930
14903
  }
@@ -15031,7 +15004,7 @@ ${$(r2)}`), n2;
15031
15004
  };
15032
15005
  }
15033
15006
  });
15034
- const BkUserSelector = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-617ed278"]]);
15007
+ const BkUserSelector = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-812cbe5a"]]);
15035
15008
  exports.BkUserSelector = BkUserSelector;
15036
15009
  exports.default = BkUserSelector;
15037
15010
  Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });