@blueking/bk-user-selector 0.0.3 → 0.0.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.
Files changed (15) hide show
  1. package/README.md +17 -12
  2. package/package.json +1 -1
  3. package/typings/api/user.d.ts +2 -1
  4. package/typings/components/multiple-selector.vue.d.ts +15 -0
  5. package/typings/components/user-selector.vue.d.ts +3 -0
  6. package/typings/types/index.d.ts +9 -1
  7. package/vue2/index.es.min.js +42 -21
  8. package/vue2/index.iife.min.js +43 -22
  9. package/vue2/index.umd.min.js +43 -22
  10. package/vue2/vue2.css +35 -35
  11. package/vue3/index.es.min.js +42 -21
  12. package/vue3/index.iife.min.js +43 -22
  13. package/vue3/index.umd.min.js +43 -22
  14. package/vue3/vue3.css +35 -35
  15. package/typings/hooks/useUserSelection.d.ts +0 -23
package/vue3/index.umd.min.js CHANGED
@@ -3,11 +3,11 @@
3
3
  })(this, function(exports2, vue, bkuiVue) {
4
4
  "use strict";
5
5
  var __vite_style__ = document.createElement("style");
6
- __vite_style__.textContent = ".user-tag[data-v-203c36cb] {\n margin-right: 4px;\n}\n.user-tag.draggable[data-v-203c36cb] {\n cursor: move;\n}\n.user-tag.active[data-v-203c36cb] {\n background-color: #e1ecff;\n border-color: #3a84ff;\n}\n.user-tag .tag-content .user-name[data-v-203c36cb] {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n font-size: 12px;\n}\n.user-tag .tag-content .tenant-name[data-v-203c36cb] {\n color: #f59500;\n margin-left: 3px;\n white-space: nowrap;\n padding: 0 3px;\n border-radius: 2px;\n}.bk-user-selector-popover.bk-popover.bk-pop2-content {\n padding: 0;\n}.multiple-selector[data-v-0bc02f6f] {\n position: relative;\n width: 100%;\n}\n.multiple-selector .tags-container[data-v-0bc02f6f] {\n min-height: 32px;\n border: 1px solid #dcdee5;\n border-radius: 2px;\n padding: 1px 4px;\n transition: all 0.2s ease;\n background-color: #fff;\n}\n.multiple-selector .tags-container.focused[data-v-0bc02f6f] {\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-0bc02f6f] {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n}\n.multiple-selector .tag-list[data-v-0bc02f6f] {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n}\n.multiple-selector .tag-wrapper[data-v-0bc02f6f] {\n display: inline-flex;\n align-items: center;\n max-width: 100%;\n}\n.multiple-selector .search-input[data-v-0bc02f6f] {\n outline: none;\n border: none;\n height: 28px;\n min-width: 10px;\n background: transparent;\n}\n.multiple-selector .search-input[data-v-0bc02f6f]::placeholder {\n color: #c4c6cc;\n}\n.multiple-selector .search-input.inline[data-v-0bc02f6f] {\n min-width: 10px;\n}\n.multiple-selector .search-input.last[data-v-0bc02f6f], .multiple-selector .search-input.collapsed[data-v-0bc02f6f] {\n flex: 1;\n min-width: 60px;\n}\n.dropdown-content[data-v-0bc02f6f] {\n min-height: 40px;\n max-height: 300px;\n overflow-y: auto;\n padding: 5px 0;\n}\n.dropdown-content .no-data[data-v-0bc02f6f] {\n padding: 10px;\n text-align: center;\n color: #979ba5;\n}\n.dropdown-content .user-option[data-v-0bc02f6f] {\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-0bc02f6f]:hover {\n background-color: #f5f7fa;\n}\n.dropdown-content .user-option .tenant-name[data-v-0bc02f6f] {\n color: #f59500;\n margin-left: 4px;\n padding: 0 4px;\n}\n.me-tag[data-v-0bc02f6f] {\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-0bc02f6f]:hover {\n background-color: #cddffe;\n color: #3a84ff;\n}\n.me-tag.disabled[data-v-0bc02f6f] {\n background-color: #f0f1f5;\n color: #c4c6cc;\n cursor: not-allowed;\n}.single-selector[data-v-02788d3d] {\n position: relative;\n width: 100%;\n}\n.input-container[data-v-02788d3d] {\n position: relative;\n display: flex;\n align-items: center;\n min-height: 32px;\n border: 1px solid #dcdee5;\n border-radius: 2px;\n padding: 0 8px;\n background-color: #fff;\n}\n.input-container[data-v-02788d3d]: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-02788d3d] {\n flex: 1;\n outline: none;\n border: none;\n height: 30px;\n background: transparent;\n}\n.search-input[data-v-02788d3d]::placeholder {\n color: #c4c6cc;\n}\n.selected-user[data-v-02788d3d] {\n display: inline-flex;\n align-items: center;\n background-color: #f0f1f5;\n border-radius: 2px;\n padding: 0 8px;\n margin-right: 8px;\n height: 24px;\n max-width: calc(100% - 32px);\n}\n.selected-user .tenant-name[data-v-02788d3d] {\n color: #f59500;\n margin-left: 4px;\n}\n.selected-user .close-icon[data-v-02788d3d] {\n margin-left: 4px;\n cursor: pointer;\n font-style: normal;\n}\n.dropdown-content[data-v-02788d3d] {\n min-height: 40px;\n max-height: 300px;\n overflow-y: auto;\n padding: 5px 0;\n}\n.dropdown-content .no-data[data-v-02788d3d] {\n padding: 10px;\n text-align: center;\n color: #979ba5;\n}\n.dropdown-content .user-option[data-v-02788d3d] {\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-02788d3d]:hover {\n background-color: #f5f7fa;\n}\n.dropdown-content .user-option .tenant-name[data-v-02788d3d] {\n color: #f59500;\n margin-left: 4px;\n padding: 0 4px;\n}\n.me-tag[data-v-02788d3d] {\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-02788d3d]:hover {\n background-color: #cddffe;\n color: #3a84ff;\n}\n.me-tag.disabled[data-v-02788d3d] {\n background-color: #f0f1f5;\n color: #c4c6cc;\n cursor: not-allowed;\n}.bk-user-selector[data-v-bb73e41f] {\n width: 100%;\n position: relative;\n font-size: 12px;\n}/*$vite$:1*/";
6
+ __vite_style__.textContent = ".user-tag[data-v-203c36cb] {\n margin-right: 4px;\n}\n.user-tag.draggable[data-v-203c36cb] {\n cursor: move;\n}\n.user-tag.active[data-v-203c36cb] {\n background-color: #e1ecff;\n border-color: #3a84ff;\n}\n.user-tag .tag-content .user-name[data-v-203c36cb] {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n font-size: 12px;\n}\n.user-tag .tag-content .tenant-name[data-v-203c36cb] {\n color: #f59500;\n margin-left: 3px;\n white-space: nowrap;\n padding: 0 3px;\n border-radius: 2px;\n}.bk-user-selector-popover.bk-popover.bk-pop2-content {\n padding: 0;\n}.multiple-selector[data-v-55945956] {\n position: relative;\n width: 100%;\n}\n.multiple-selector .tags-container[data-v-55945956] {\n min-height: 32px;\n border: 1px solid #dcdee5;\n border-radius: 2px;\n padding: 1px 4px;\n transition: all 0.2s ease;\n background-color: #fff;\n}\n.multiple-selector .tags-container.focused[data-v-55945956] {\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-55945956] {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n}\n.multiple-selector .tag-list[data-v-55945956] {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n}\n.multiple-selector .tag-wrapper[data-v-55945956] {\n display: inline-flex;\n align-items: center;\n max-width: 100%;\n}\n.multiple-selector .search-input[data-v-55945956] {\n outline: none;\n border: none;\n height: 28px;\n min-width: 10px;\n background: transparent;\n}\n.multiple-selector .search-input[data-v-55945956]::placeholder {\n color: #c4c6cc;\n}\n.multiple-selector .search-input.inline[data-v-55945956] {\n min-width: 10px;\n}\n.multiple-selector .search-input.last[data-v-55945956], .multiple-selector .search-input.collapsed[data-v-55945956] {\n flex: 1;\n min-width: 60px;\n}\n.dropdown-content[data-v-55945956] {\n min-height: 40px;\n max-height: 300px;\n overflow-y: auto;\n padding: 5px 0;\n}\n.dropdown-content .no-data[data-v-55945956] {\n padding: 10px;\n text-align: center;\n color: #979ba5;\n}\n.dropdown-content .user-option[data-v-55945956] {\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-55945956]:hover {\n background-color: #f5f7fa;\n}\n.dropdown-content .user-option .tenant-name[data-v-55945956] {\n color: #f59500;\n margin-left: 4px;\n padding: 0 4px;\n}\n.me-tag[data-v-55945956] {\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-55945956]:hover {\n background-color: #cddffe;\n color: #3a84ff;\n}\n.me-tag.disabled[data-v-55945956] {\n background-color: #f0f1f5;\n color: #c4c6cc;\n cursor: not-allowed;\n}.single-selector[data-v-d17d0282] {\n position: relative;\n width: 100%;\n}\n.input-container[data-v-d17d0282] {\n position: relative;\n display: flex;\n align-items: center;\n min-height: 32px;\n border: 1px solid #dcdee5;\n border-radius: 2px;\n padding: 0 8px;\n background-color: #fff;\n}\n.input-container[data-v-d17d0282]: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-d17d0282] {\n flex: 1;\n outline: none;\n border: none;\n height: 30px;\n background: transparent;\n}\n.search-input[data-v-d17d0282]::placeholder {\n color: #c4c6cc;\n}\n.selected-user[data-v-d17d0282] {\n display: inline-flex;\n align-items: center;\n background-color: #f0f1f5;\n border-radius: 2px;\n padding: 0 8px;\n margin-right: 8px;\n height: 24px;\n max-width: calc(100% - 32px);\n}\n.selected-user .tenant-name[data-v-d17d0282] {\n color: #f59500;\n margin-left: 4px;\n}\n.selected-user .close-icon[data-v-d17d0282] {\n margin-left: 4px;\n cursor: pointer;\n font-style: normal;\n}\n.dropdown-content[data-v-d17d0282] {\n min-height: 40px;\n max-height: 300px;\n overflow-y: auto;\n padding: 5px 0;\n}\n.dropdown-content .no-data[data-v-d17d0282] {\n padding: 10px;\n text-align: center;\n color: #979ba5;\n}\n.dropdown-content .user-option[data-v-d17d0282] {\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-d17d0282]:hover {\n background-color: #f5f7fa;\n}\n.dropdown-content .user-option .tenant-name[data-v-d17d0282] {\n color: #f59500;\n margin-left: 4px;\n padding: 0 4px;\n}\n.me-tag[data-v-d17d0282] {\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-d17d0282]:hover {\n background-color: #cddffe;\n color: #3a84ff;\n}\n.me-tag.disabled[data-v-d17d0282] {\n background-color: #f0f1f5;\n color: #c4c6cc;\n cursor: not-allowed;\n}.bk-user-selector[data-v-ee509d86] {\n width: 100%;\n position: relative;\n font-size: 12px;\n}/*$vite$:1*/";
7
7
  document.head.appendChild(__vite_style__);
8
8
  const getTenants = async (apiBaseUrl, tenantId) => {
9
9
  if (!apiBaseUrl || !tenantId) {
10
- console.warn("获取租户信息需要提供有效的API基础URL和租户ID");
10
+ console.warn("获取租户信息需要提供有效的apiBaseUrl和租户ID");
11
11
  return [];
12
12
  }
13
13
  try {
@@ -31,7 +31,7 @@
31
31
  };
32
32
  const searchUsers = async (apiBaseUrl = "", tenantId = "", keyword = "") => {
33
33
  if (!keyword || !apiBaseUrl || !tenantId) {
34
- console.warn("搜索用户需要提供有效的API基础URL、租户ID和关键词");
34
+ console.warn("搜索用户需要提供有效的apiBaseUrl、租户ID和关键词");
35
35
  return [];
36
36
  }
37
37
  try {
@@ -53,13 +53,13 @@
53
53
  return [];
54
54
  }
55
55
  };
56
- const lookupUsers = async (apiBaseUrl = "", tenantId = "", users = []) => {
56
+ const lookupUsers = async (apiBaseUrl = "", tenantId = "", exactKey = "bk_username", users = []) => {
57
57
  if (users.length === 0 || !apiBaseUrl || !tenantId) {
58
- console.warn("批量查找用户需要提供有效的API基础URL、租户ID和至少一个用户名");
58
+ console.warn("批量查找用户需要提供有效的apiBaseUrl、租户ID和至少一个用户名");
59
59
  return [];
60
60
  }
61
61
  try {
62
- const url = `${apiBaseUrl}/api/v3/open-web/tenant/users/-/lookup/?lookups=${users.join(",")}&lookup_fields=bk_username`;
62
+ const url = `${apiBaseUrl}/api/v3/open-web/tenant/users/-/lookup/?lookups=${users.join(",")}&lookup_fields=${exactKey}`;
63
63
  const response = await fetch(url, {
64
64
  method: "GET",
65
65
  headers: {
@@ -3104,6 +3104,13 @@
3104
3104
  currentUserId: {
3105
3105
  type: String,
3106
3106
  default: ""
3107
+ },
3108
+ /**
3109
+ * 精确查找key
3110
+ */
3111
+ exactKey: {
3112
+ type: String,
3113
+ default: "bk_username"
3107
3114
  }
3108
3115
  },
3109
3116
  emits: ["update:selectedUsers", "add-user", "remove-user"],
@@ -3144,7 +3151,6 @@
3144
3151
  const [movedUser] = updatedUsers.splice(oldIndex, 1);
3145
3152
  updatedUsers.splice(newIndex, 0, movedUser);
3146
3153
  emit("update:selectedUsers", updatedUsers);
3147
- activeTagIndex.value = newIndex;
3148
3154
  }
3149
3155
  });
3150
3156
  };
@@ -3220,7 +3226,7 @@
3220
3226
  const addCurrentUser = async () => {
3221
3227
  if (!props.currentUserId || props.selectedUsers.some((user) => user.id === props.currentUserId)) return;
3222
3228
  try {
3223
- const result = await lookupUsers(props.apiBaseUrl, props.tenantId, [props.currentUserId]);
3229
+ const result = await lookupUsers(props.apiBaseUrl, props.tenantId, props.exactKey, [props.currentUserId]);
3224
3230
  const formattedUsers = formatUsers(result);
3225
3231
  if (formattedUsers.length > 0) {
3226
3232
  if (!props.selectedUsers.some((item) => item.id === formattedUsers[0].id)) {
@@ -3241,7 +3247,7 @@
3241
3247
  if (pastedText.trim()) {
3242
3248
  try {
3243
3249
  const users = pastedText.trim().split(/[,，;\n\s]+/).filter(Boolean);
3244
- const result = await lookupUsers(props.apiBaseUrl, props.tenantId, users);
3250
+ const result = await lookupUsers(props.apiBaseUrl, props.tenantId, props.exactKey, users);
3245
3251
  const formattedUsers = formatUsers(result);
3246
3252
  if (formattedUsers.length > 0) {
3247
3253
  const updatedUsers = [...props.selectedUsers, ...formattedUsers];
@@ -3271,8 +3277,16 @@
3271
3277
  const addUser = (user) => {
3272
3278
  if (!(user == null ? void 0 : user.id)) return;
3273
3279
  if (!props.selectedUsers.some((item) => item.id === user.id)) {
3274
- const updatedUsers = [...props.selectedUsers, user];
3275
- emit("update:selectedUsers", updatedUsers);
3280
+ if (activeTagIndex.value !== -1) {
3281
+ const updatedUsers = [
3282
+ ...props.selectedUsers.slice(0, activeTagIndex.value + 1),
3283
+ user,
3284
+ ...props.selectedUsers.slice(activeTagIndex.value + 1)
3285
+ ];
3286
+ emit("update:selectedUsers", updatedUsers);
3287
+ } else {
3288
+ emit("update:selectedUsers", [...props.selectedUsers, user]);
3289
+ }
3276
3290
  emit("add-user", user);
3277
3291
  }
3278
3292
  searchQuery.value = "";
@@ -3571,8 +3585,8 @@
3571
3585
  };
3572
3586
  }
3573
3587
  });
3574
- const MultipleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-0bc02f6f"]]);
3575
- const _withScopeId = (n) => (vue.pushScopeId("data-v-02788d3d"), n = n(), vue.popScopeId(), n);
3588
+ const MultipleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-55945956"]]);
3589
+ const _withScopeId = (n) => (vue.pushScopeId("data-v-d17d0282"), n = n(), vue.popScopeId(), n);
3576
3590
  const _hoisted_1$1 = { class: "input-container" };
3577
3591
  const _hoisted_2 = {
3578
3592
  key: 0,
@@ -3606,7 +3620,8 @@
3606
3620
  apiBaseUrl: {},
3607
3621
  tenantId: {},
3608
3622
  tenants: {},
3609
- currentUserId: {}
3623
+ currentUserId: {},
3624
+ exactKey: {}
3610
3625
  },
3611
3626
  emits: ["update:modelValue", "change"],
3612
3627
  setup(__props, { emit: __emit }) {
@@ -3626,7 +3641,9 @@
3626
3641
  if (typeof props.modelValue === "string" && props.modelValue) {
3627
3642
  try {
3628
3643
  isLoading.value = true;
3629
- const result = await lookupUsers(props.apiBaseUrl || "", props.tenantId || "", [props.modelValue]);
3644
+ const result = await lookupUsers(props.apiBaseUrl || "", props.tenantId || "", props.exactKey, [
3645
+ props.modelValue
3646
+ ]);
3630
3647
  options.value = formatUsers(result);
3631
3648
  } catch (error) {
3632
3649
  console.error("获取用户信息失败:", error);
@@ -3638,7 +3655,7 @@
3638
3655
  const addCurrentUser = async () => {
3639
3656
  if (!props.currentUserId || selectedUser.value === props.currentUserId) return;
3640
3657
  try {
3641
- const result = await lookupUsers(props.apiBaseUrl, props.tenantId, [props.currentUserId]);
3658
+ const result = await lookupUsers(props.apiBaseUrl, props.tenantId, props.exactKey, [props.currentUserId]);
3642
3659
  const formattedResults = formatUsers(result);
3643
3660
  if (formattedResults.length > 0) {
3644
3661
  options.value = formattedResults;
@@ -3814,7 +3831,7 @@
3814
3831
  };
3815
3832
  }
3816
3833
  });
3817
- const SingleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-02788d3d"]]);
3834
+ const SingleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-d17d0282"]]);
3818
3835
  const _hoisted_1 = { class: "bk-user-selector" };
3819
3836
  const _sfc_main = /* @__PURE__ */ vue.defineComponent({
3820
3837
  ...{
@@ -3828,7 +3845,8 @@
3828
3845
  modelValue: { default: "" },
3829
3846
  draggable: { type: Boolean, default: false },
3830
3847
  multiple: { type: Boolean, default: false },
3831
- currentUserId: { default: "" }
3848
+ currentUserId: { default: "" },
3849
+ exactKey: { default: "" }
3832
3850
  },
3833
3851
  emits: ["update:modelValue", "change"],
3834
3852
  setup(__props, { emit: __emit }) {
@@ -3845,7 +3863,8 @@
3845
3863
  const ids = Array.isArray(props.modelValue) ? props.modelValue : [];
3846
3864
  if (ids.length > 0) {
3847
3865
  try {
3848
- const result = await lookupUsers(props.apiBaseUrl, props.tenantId, ids);
3866
+ console.log(props.exactKey);
3867
+ const result = await lookupUsers(props.apiBaseUrl, props.tenantId, props.exactKey, ids);
3849
3868
  selectedUsers.value = formatUsers(result);
3850
3869
  } catch (error) {
3851
3870
  console.error("获取选中用户信息失败:", error);
@@ -3883,11 +3902,12 @@
3883
3902
  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectedUser.value = $event),
3884
3903
  "api-base-url": _ctx.apiBaseUrl,
3885
3904
  "current-user-id": _ctx.currentUserId,
3905
+ "exact-key": _ctx.exactKey,
3886
3906
  placeholder: _ctx.placeholder,
3887
3907
  "tenant-id": _ctx.tenantId,
3888
3908
  tenants: vue.unref(tenants),
3889
3909
  onChange: handleUpdateUser
3890
- }, null, 8, ["modelValue", "api-base-url", "current-user-id", "placeholder", "tenant-id", "tenants"])) : (vue.openBlock(), vue.createElementBlock(
3910
+ }, null, 8, ["modelValue", "api-base-url", "current-user-id", "exact-key", "placeholder", "tenant-id", "tenants"])) : (vue.openBlock(), vue.createElementBlock(
3891
3911
  vue.Fragment,
3892
3912
  { key: 1 },
3893
3913
  [
@@ -3898,12 +3918,13 @@
3898
3918
  "api-base-url": _ctx.apiBaseUrl,
3899
3919
  "current-user-id": _ctx.currentUserId,
3900
3920
  draggable: _ctx.draggable,
3921
+ "exact-key": _ctx.exactKey,
3901
3922
  placeholder: _ctx.placeholder,
3902
3923
  "selected-users": selectedUsers.value,
3903
3924
  "tenant-id": _ctx.tenantId,
3904
3925
  tenants: vue.unref(tenants),
3905
3926
  "onUpdate:selectedUsers": handleUpdateSelectedUsers
3906
- }, null, 8, ["modelValue", "api-base-url", "current-user-id", "draggable", "placeholder", "selected-users", "tenant-id", "tenants"])
3927
+ }, null, 8, ["modelValue", "api-base-url", "current-user-id", "draggable", "exact-key", "placeholder", "selected-users", "tenant-id", "tenants"])
3907
3928
  ],
3908
3929
  2112
3909
3930
  /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
@@ -3912,7 +3933,7 @@
3912
3933
  };
3913
3934
  }
3914
3935
  });
3915
- const BkUserSelector = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-bb73e41f"]]);
3936
+ const BkUserSelector = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ee509d86"]]);
3916
3937
  exports2.BkUserSelector = BkUserSelector;
3917
3938
  exports2.default = BkUserSelector;
3918
3939
  Object.defineProperties(exports2, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
package/vue3/vue3.css CHANGED
@@ -22,11 +22,11 @@
22
22
  border-radius: 2px;
23
23
  }.bk-user-selector-popover.bk-popover.bk-pop2-content {
24
24
  padding: 0;
25
- }.multiple-selector[data-v-0bc02f6f] {
25
+ }.multiple-selector[data-v-55945956] {
26
26
  position: relative;
27
27
  width: 100%;
28
28
  }
29
- .multiple-selector .tags-container[data-v-0bc02f6f] {
29
+ .multiple-selector .tags-container[data-v-55945956] {
30
30
  min-height: 32px;
31
31
  border: 1px solid #dcdee5;
32
32
  border-radius: 2px;
@@ -34,69 +34,69 @@
34
34
  transition: all 0.2s ease;
35
35
  background-color: #fff;
36
36
  }
37
- .multiple-selector .tags-container.focused[data-v-0bc02f6f] {
37
+ .multiple-selector .tags-container.focused[data-v-55945956] {
38
38
  border-color: #3a84ff;
39
39
  box-shadow: 0 0 0 2px rgba(58, 132, 255, 0.1);
40
40
  }
41
- .multiple-selector .tags-container.collapsed[data-v-0bc02f6f] {
41
+ .multiple-selector .tags-container.collapsed[data-v-55945956] {
42
42
  display: flex;
43
43
  flex-wrap: wrap;
44
44
  align-items: center;
45
45
  }
46
- .multiple-selector .tag-list[data-v-0bc02f6f] {
46
+ .multiple-selector .tag-list[data-v-55945956] {
47
47
  display: flex;
48
48
  flex-wrap: wrap;
49
49
  align-items: center;
50
50
  }
51
- .multiple-selector .tag-wrapper[data-v-0bc02f6f] {
51
+ .multiple-selector .tag-wrapper[data-v-55945956] {
52
52
  display: inline-flex;
53
53
  align-items: center;
54
54
  max-width: 100%;
55
55
  }
56
- .multiple-selector .search-input[data-v-0bc02f6f] {
56
+ .multiple-selector .search-input[data-v-55945956] {
57
57
  outline: none;
58
58
  border: none;
59
59
  height: 28px;
60
60
  min-width: 10px;
61
61
  background: transparent;
62
62
  }
63
- .multiple-selector .search-input[data-v-0bc02f6f]::placeholder {
63
+ .multiple-selector .search-input[data-v-55945956]::placeholder {
64
64
  color: #c4c6cc;
65
65
  }
66
- .multiple-selector .search-input.inline[data-v-0bc02f6f] {
66
+ .multiple-selector .search-input.inline[data-v-55945956] {
67
67
  min-width: 10px;
68
68
  }
69
- .multiple-selector .search-input.last[data-v-0bc02f6f], .multiple-selector .search-input.collapsed[data-v-0bc02f6f] {
69
+ .multiple-selector .search-input.last[data-v-55945956], .multiple-selector .search-input.collapsed[data-v-55945956] {
70
70
  flex: 1;
71
71
  min-width: 60px;
72
72
  }
73
- .dropdown-content[data-v-0bc02f6f] {
73
+ .dropdown-content[data-v-55945956] {
74
74
  min-height: 40px;
75
75
  max-height: 300px;
76
76
  overflow-y: auto;
77
77
  padding: 5px 0;
78
78
  }
79
- .dropdown-content .no-data[data-v-0bc02f6f] {
79
+ .dropdown-content .no-data[data-v-55945956] {
80
80
  padding: 10px;
81
81
  text-align: center;
82
82
  color: #979ba5;
83
83
  }
84
- .dropdown-content .user-option[data-v-0bc02f6f] {
84
+ .dropdown-content .user-option[data-v-55945956] {
85
85
  padding: 8px 12px;
86
86
  cursor: pointer;
87
87
  display: flex;
88
88
  align-items: center;
89
89
  height: 32px;
90
90
  }
91
- .dropdown-content .user-option[data-v-0bc02f6f]:hover {
91
+ .dropdown-content .user-option[data-v-55945956]:hover {
92
92
  background-color: #f5f7fa;
93
93
  }
94
- .dropdown-content .user-option .tenant-name[data-v-0bc02f6f] {
94
+ .dropdown-content .user-option .tenant-name[data-v-55945956] {
95
95
  color: #f59500;
96
96
  margin-left: 4px;
97
97
  padding: 0 4px;
98
98
  }
99
- .me-tag[data-v-0bc02f6f] {
99
+ .me-tag[data-v-55945956] {
100
100
  display: inline-flex;
101
101
  align-items: center;
102
102
  justify-content: center;
@@ -114,19 +114,19 @@
114
114
  transform: translateY(-50%);
115
115
  z-index: 1;
116
116
  }
117
- .me-tag[data-v-0bc02f6f]:hover {
117
+ .me-tag[data-v-55945956]:hover {
118
118
  background-color: #cddffe;
119
119
  color: #3a84ff;
120
120
  }
121
- .me-tag.disabled[data-v-0bc02f6f] {
121
+ .me-tag.disabled[data-v-55945956] {
122
122
  background-color: #f0f1f5;
123
123
  color: #c4c6cc;
124
124
  cursor: not-allowed;
125
- }.single-selector[data-v-02788d3d] {
125
+ }.single-selector[data-v-d17d0282] {
126
126
  position: relative;
127
127
  width: 100%;
128
128
  }
129
- .input-container[data-v-02788d3d] {
129
+ .input-container[data-v-d17d0282] {
130
130
  position: relative;
131
131
  display: flex;
132
132
  align-items: center;
@@ -136,21 +136,21 @@
136
136
  padding: 0 8px;
137
137
  background-color: #fff;
138
138
  }
139
- .input-container[data-v-02788d3d]:focus-within {
139
+ .input-container[data-v-d17d0282]:focus-within {
140
140
  border-color: #3a84ff;
141
141
  box-shadow: 0 0 0 2px rgba(58, 132, 255, 0.1);
142
142
  }
143
- .search-input[data-v-02788d3d] {
143
+ .search-input[data-v-d17d0282] {
144
144
  flex: 1;
145
145
  outline: none;
146
146
  border: none;
147
147
  height: 30px;
148
148
  background: transparent;
149
149
  }
150
- .search-input[data-v-02788d3d]::placeholder {
150
+ .search-input[data-v-d17d0282]::placeholder {
151
151
  color: #c4c6cc;
152
152
  }
153
- .selected-user[data-v-02788d3d] {
153
+ .selected-user[data-v-d17d0282] {
154
154
  display: inline-flex;
155
155
  align-items: center;
156
156
  background-color: #f0f1f5;
@@ -160,42 +160,42 @@
160
160
  height: 24px;
161
161
  max-width: calc(100% - 32px);
162
162
  }
163
- .selected-user .tenant-name[data-v-02788d3d] {
163
+ .selected-user .tenant-name[data-v-d17d0282] {
164
164
  color: #f59500;
165
165
  margin-left: 4px;
166
166
  }
167
- .selected-user .close-icon[data-v-02788d3d] {
167
+ .selected-user .close-icon[data-v-d17d0282] {
168
168
  margin-left: 4px;
169
169
  cursor: pointer;
170
170
  font-style: normal;
171
171
  }
172
- .dropdown-content[data-v-02788d3d] {
172
+ .dropdown-content[data-v-d17d0282] {
173
173
  min-height: 40px;
174
174
  max-height: 300px;
175
175
  overflow-y: auto;
176
176
  padding: 5px 0;
177
177
  }
178
- .dropdown-content .no-data[data-v-02788d3d] {
178
+ .dropdown-content .no-data[data-v-d17d0282] {
179
179
  padding: 10px;
180
180
  text-align: center;
181
181
  color: #979ba5;
182
182
  }
183
- .dropdown-content .user-option[data-v-02788d3d] {
183
+ .dropdown-content .user-option[data-v-d17d0282] {
184
184
  padding: 8px 12px;
185
185
  cursor: pointer;
186
186
  display: flex;
187
187
  align-items: center;
188
188
  height: 32px;
189
189
  }
190
- .dropdown-content .user-option[data-v-02788d3d]:hover {
190
+ .dropdown-content .user-option[data-v-d17d0282]:hover {
191
191
  background-color: #f5f7fa;
192
192
  }
193
- .dropdown-content .user-option .tenant-name[data-v-02788d3d] {
193
+ .dropdown-content .user-option .tenant-name[data-v-d17d0282] {
194
194
  color: #f59500;
195
195
  margin-left: 4px;
196
196
  padding: 0 4px;
197
197
  }
198
- .me-tag[data-v-02788d3d] {
198
+ .me-tag[data-v-d17d0282] {
199
199
  display: inline-flex;
200
200
  align-items: center;
201
201
  justify-content: center;
@@ -213,15 +213,15 @@
213
213
  transform: translateY(-50%);
214
214
  z-index: 1;
215
215
  }
216
- .me-tag[data-v-02788d3d]:hover {
216
+ .me-tag[data-v-d17d0282]:hover {
217
217
  background-color: #cddffe;
218
218
  color: #3a84ff;
219
219
  }
220
- .me-tag.disabled[data-v-02788d3d] {
220
+ .me-tag.disabled[data-v-d17d0282] {
221
221
  background-color: #f0f1f5;
222
222
  color: #c4c6cc;
223
223
  cursor: not-allowed;
224
- }.bk-user-selector[data-v-bb73e41f] {
224
+ }.bk-user-selector[data-v-ee509d86] {
225
225
  width: 100%;
226
226
  position: relative;
227
227
  font-size: 12px;
package/typings/hooks/useUserSelection.d.ts DELETED
@@ -1,23 +0,0 @@
1
- /**
2
- * 用户选择 Hook
3
- * @module hooks/useUserSelection
4
- */
5
- import { type Ref } from 'vue';
6
- import { type FormattedUser } from '../types';
7
- /**
8
- * 使用用户选择的Hook
9
- * @param apiBaseUrl - API基础URL
10
- * @param tenantId - 租户ID
11
- * @param initialSelectedUsers - 初始选中的用户ID
12
- * @param multiple - 是否多选
13
- * @returns 用户选择相关状态和方法
14
- */
15
- export declare const useUserSelection: (apiBaseUrl: string, tenantId: string, initialSelectedUsers?: string | string[], multiple?: boolean) => {
16
- selectedUsers: Ref<FormattedUser[]>;
17
- selectedUserIds: import("vue").ComputedRef<string | string[]>;
18
- loading: Ref<boolean>;
19
- addUser: (user: FormattedUser) => void;
20
- removeUser: (user: FormattedUser) => void;
21
- removeUserAtIndex: (index: number) => void;
22
- clearSelection: () => void;
23
- };