@blueking/bk-user-selector 0.0.33 → 0.0.35-beta.1

package/vue3/index.umd.min.js

@@ -3,7 +3,7 @@
 })(this, function(exports2, vue, bkuiVue) {
   "use strict";
   var __vite_style__ = document.createElement("style");
-  __vite_style__.textContent = ".me-tag[data-v-44fec2ba] {\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  white-space: nowrap;\n}\n.me-tag[data-v-44fec2ba]:hover {\n  color: #3a84ff;\n  background-color: #cddffe;\n}\n.me-tag.disabled[data-v-44fec2ba] {\n  color: #c4c6cc;\n  cursor: not-allowed;\n  background-color: #f0f1f5;\n}.dropdown-content[data-v-561a8644] {\n  min-height: 40px;\n  max-height: 300px;\n  padding: 5px 0;\n  overflow-y: auto;\n}\n.dropdown-content .no-data[data-v-561a8644] {\n  padding: 10px;\n  color: #979ba5;\n  text-align: center;\n}\n.dropdown-content .user-group .group-header[data-v-561a8644] {\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-561a8644] {\n  margin-left: 4px;\n}\n.dropdown-content .user-option[data-v-561a8644] {\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-561a8644]:hover {\n  background-color: #f5f7fa;\n}.bk-user-selector-popover.bk-user-selector-pop2-content {\n  padding: 0;\n}.user-tag[data-v-3ff46050] {\n  margin-right: 4px;\n  margin-left: 0;\n}\n.user-tag.draggable[data-v-3ff46050] {\n  cursor: move;\n}\n.user-tag.active[data-v-3ff46050] {\n  background-color: #e1ecff;\n  border-color: #3a84ff;\n}\n.user-tag.is-custom[data-v-3ff46050] {\n  color: #ea3636;\n  background-color: #feebea;\n  border-color: rgba(234, 53, 54, 0.3019607843);\n}\n.user-tag.is-custom[data-v-3ff46050]:hover {\n  background-color: #fedddc;\n}\n.user-tag .tag-content .user-name[data-v-3ff46050] {\n  overflow: hidden;\n  font-size: 12px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}.multiple-selector[data-v-d8aff9ea] {\n  position: relative;\n  width: 100%;\n}\n.multiple-selector.is-disabled[data-v-d8aff9ea] {\n  pointer-events: none;\n}\n.multiple-selector .tags-container[data-v-d8aff9ea] {\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-d8aff9ea] {\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-d8aff9ea] {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n}\n.multiple-selector .tag-list[data-v-d8aff9ea] {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n}\n.multiple-selector .tag-wrapper[data-v-d8aff9ea] {\n  display: inline-flex;\n  align-items: center;\n  max-width: 100%;\n}\n.multiple-selector .search-input[data-v-d8aff9ea] {\n  min-width: 10px;\n  height: 28px;\n  background: transparent;\n  border: none;\n  outline: none;\n}\n.multiple-selector .search-input[data-v-d8aff9ea]::placeholder {\n  color: #c4c6cc;\n}\n.multiple-selector .search-input.inline[data-v-d8aff9ea] {\n  min-width: 10px;\n}\n.multiple-selector .search-input.last[data-v-d8aff9ea], .multiple-selector .search-input.collapsed[data-v-d8aff9ea] {\n  flex: 1;\n}\n.hidden-users[data-v-d8aff9ea] {\n  padding: 6px 10px;\n}.single-selector[data-v-6b8c23c5] {\n  position: relative;\n  width: 100%;\n}\n.single-selector.is-disabled[data-v-6b8c23c5] {\n  pointer-events: none;\n}\n.input-container[data-v-6b8c23c5] {\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-6b8c23c5]: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-6b8c23c5] {\n  flex: 1;\n  height: 30px;\n  background: transparent;\n  border: none;\n  outline: none;\n}\n.search-input[data-v-6b8c23c5]::placeholder {\n  color: #c4c6cc;\n}.bk-user-selector[data-v-8a402cb7] {\n  position: relative;\n  width: 100%;\n  font-size: 12px;\n}\n.bk-user-selector.is-disabled[data-v-8a402cb7] {\n  cursor: not-allowed;\n  background-color: #dcdee5;\n}";
+  __vite_style__.textContent = ".me-tag[data-v-44fec2ba] {\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  white-space: nowrap;\n}\n.me-tag[data-v-44fec2ba]:hover {\n  color: #3a84ff;\n  background-color: #cddffe;\n}\n.me-tag.disabled[data-v-44fec2ba] {\n  color: #c4c6cc;\n  cursor: not-allowed;\n  background-color: #f0f1f5;\n}.dropdown-content[data-v-e11d7af7] {\n  min-height: 40px;\n  max-height: 300px;\n  padding: 5px 0;\n  overflow-y: auto;\n}\n.dropdown-content .no-data[data-v-e11d7af7] {\n  padding: 10px;\n  color: #979ba5;\n  text-align: center;\n}\n.dropdown-content .user-group .group-header[data-v-e11d7af7] {\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-e11d7af7] {\n  margin-left: 4px;\n}\n.dropdown-content .user-option[data-v-e11d7af7] {\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-e11d7af7]:hover {\n  background-color: #f5f7fa;\n}.bk-user-selector-popover.bk-user-selector-pop2-content {\n  padding: 0;\n}.user-tag[data-v-3ff46050] {\n  margin-right: 4px;\n  margin-left: 0;\n}\n.user-tag.draggable[data-v-3ff46050] {\n  cursor: move;\n}\n.user-tag.active[data-v-3ff46050] {\n  background-color: #e1ecff;\n  border-color: #3a84ff;\n}\n.user-tag.is-custom[data-v-3ff46050] {\n  color: #ea3636;\n  background-color: #feebea;\n  border-color: rgba(234, 53, 54, 0.3019607843);\n}\n.user-tag.is-custom[data-v-3ff46050]:hover {\n  background-color: #fedddc;\n}\n.user-tag .tag-content .user-name[data-v-3ff46050] {\n  overflow: hidden;\n  font-size: 12px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}.multiple-selector[data-v-7515c7a3] {\n  position: relative;\n  width: 100%;\n}\n.multiple-selector.is-disabled[data-v-7515c7a3] {\n  pointer-events: none;\n}\n.multiple-selector .tags-container[data-v-7515c7a3] {\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-7515c7a3] {\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-7515c7a3] {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n}\n.multiple-selector .tag-list[data-v-7515c7a3] {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n}\n.multiple-selector .tag-wrapper[data-v-7515c7a3] {\n  display: inline-flex;\n  align-items: center;\n  max-width: 100%;\n}\n.multiple-selector .search-input[data-v-7515c7a3] {\n  min-width: 10px;\n  height: 28px;\n  background: transparent;\n  border: none;\n  outline: none;\n}\n.multiple-selector .search-input[data-v-7515c7a3]::placeholder {\n  color: #c4c6cc;\n}\n.multiple-selector .search-input.inline[data-v-7515c7a3] {\n  min-width: 10px;\n}\n.multiple-selector .search-input.last[data-v-7515c7a3], .multiple-selector .search-input.collapsed[data-v-7515c7a3] {\n  flex: 1;\n}\n.hidden-users[data-v-7515c7a3] {\n  padding: 6px 10px;\n}.single-selector[data-v-6b8c23c5] {\n  position: relative;\n  width: 100%;\n}\n.single-selector.is-disabled[data-v-6b8c23c5] {\n  pointer-events: none;\n}\n.input-container[data-v-6b8c23c5] {\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-6b8c23c5]: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-6b8c23c5] {\n  flex: 1;\n  height: 30px;\n  background: transparent;\n  border: none;\n  outline: none;\n}\n.search-input[data-v-6b8c23c5]::placeholder {\n  color: #c4c6cc;\n}.bk-user-selector[data-v-20d45a5c] {\n  position: relative;\n  width: 100%;\n  font-size: 12px;\n}\n.bk-user-selector.is-disabled[data-v-20d45a5c] {\n  cursor: not-allowed;\n  background-color: #dcdee5;\n}";
   document.head.appendChild(__vite_style__);
   const generateCallbackName = () => {
     const timestamp = Date.now();
@@ -3536,7 +3536,7 @@
       };
     }
   });
-  const SelectionPopover = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-561a8644"]]);
+  const SelectionPopover = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-e11d7af7"]]);
   const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "UserTag"
@@ -3612,7 +3612,7 @@
       enableMultiTenantMode: { type: Boolean },
       allowCreate: { type: Boolean, default: false }
     },
-    emits: ["update:selectedUsers", "add-user", "remove-user"],
+    emits: ["update:selectedUsers", "add-user", "remove-user", "dragStart", "dragEnd"],
     setup(__props, { emit: __emit }) {
       const props = __props;
       const emit = __emit;
@@ -3657,6 +3657,9 @@
         sortableInstance.value = new Sortable(sortableContainerRef.value, {
           animation: 150,
           draggable: ".tag-wrapper",
+          onStart: (event) => {
+            emit("dragStart", event);
+          },
           onEnd: (evt) => {
             const { oldIndex, newIndex } = evt;
             if (oldIndex === newIndex || oldIndex === void 0 || newIndex === void 0) return;
@@ -3664,6 +3667,7 @@
             const [movedUser] = updatedUsers.splice(oldIndex, 1);
             updatedUsers.splice(newIndex, 0, movedUser);
             emit("update:selectedUsers", updatedUsers);
+            emit("dragEnd", evt);
           }
         });
       };
@@ -3686,7 +3690,11 @@
       };
       const handleFocus = () => {
         isFocused.value = true;
-        showDropdown.value = false;
+        if (props.userGroup.length > 0) {
+          showDropdown.value = true;
+        } else {
+          showDropdown.value = false;
+        }
         activeTagIndex.value = -1;
         vue.nextTick(() => {
           if (lastInputRef.value) {
@@ -3780,13 +3788,19 @@
             const result = await lookupUsers({
               apiBaseUrl: props.apiBaseUrl,
               tenantId: props.tenantId,
-              exactSearchKey: props.exactSearchKey,
+              exactSearchKey: "login_name",
               usersList: users,
               enableMultiTenantMode: props.enableMultiTenantMode
             });
             const formattedUsers = formatUsers(result, props.enableMultiTenantMode);
             if (formattedUsers.length > 0) {
-              const updatedUsers = [...props.selectedUsers, ...formattedUsers];
+              const userMap = /* @__PURE__ */ new Map();
+              [...props.selectedUsers, ...formattedUsers].forEach((user) => {
+                if (!userMap.has(user.id)) {
+                  userMap.set(user.id, user);
+                }
+              });
+              const updatedUsers = Array.from(userMap.values());
               emit("update:selectedUsers", updatedUsers);
             }
           } catch (error) {
@@ -4108,7 +4122,7 @@
       };
     }
   });
-  const MultipleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-d8aff9ea"]]);
+  const MultipleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-7515c7a3"]]);
   const _hoisted_1 = { class: "input-container" };
   const _hoisted_2 = ["placeholder"];
   const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
@@ -4391,7 +4405,7 @@
       enableMultiTenantMode: { type: Boolean, default: true },
       allowCreate: { type: Boolean, default: false }
     },
-    emits: ["update:modelValue", "change"],
+    emits: ["update:modelValue", "change", "dragStart", "dragEnd"],
     setup(__props, { emit: __emit }) {
       const { t } = useI18n();
       bkuiVue.provideGlobalConfig({
@@ -4471,6 +4485,7 @@
       vue.watch(
         () => props.modelValue,
         () => {
+          initSelectedUsers();
         }
       );
       vue.onBeforeMount(() => {
@@ -4489,8 +4504,8 @@
               key: 0,
               modelValue: selectedUser.value,
               "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectedUser.value = $event),
-              "api-base-url": _ctx.apiBaseUrl,
               "allow-create": _ctx.allowCreate,
+              "api-base-url": _ctx.apiBaseUrl,
               "current-user-id": _ctx.currentUserId,
               disabled: _ctx.disabled,
               "empty-text": emptyText.value,
@@ -4505,7 +4520,7 @@
               "user-group": _ctx.userGroup,
               "user-group-name": userGroupName.value,
               onChange: handleUpdateUser
-            }, null, 8, ["modelValue", "api-base-url", "allow-create", "current-user-id", "disabled", "empty-text", "enable-multi-tenant-mode", "exact-search-key", "exclude-user-ids", "placeholder", "render-list-item", "render-tag", "tenant-id", "tenants", "user-group", "user-group-name"])) : (vue.openBlock(), vue.createElementBlock(
+            }, null, 8, ["modelValue", "allow-create", "api-base-url", "current-user-id", "disabled", "empty-text", "enable-multi-tenant-mode", "exact-search-key", "exclude-user-ids", "placeholder", "render-list-item", "render-tag", "tenant-id", "tenants", "user-group", "user-group-name"])) : (vue.openBlock(), vue.createElementBlock(
               vue.Fragment,
               { key: 1 },
               [
@@ -4513,8 +4528,8 @@
                 vue.createVNode(MultipleSelector, {
                   modelValue: selectedUserIds.value,
                   "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => selectedUserIds.value = $event),
-                  "api-base-url": _ctx.apiBaseUrl,
                   "allow-create": _ctx.allowCreate,
+                  "api-base-url": _ctx.apiBaseUrl,
                   "current-user-id": _ctx.currentUserId,
                   disabled: _ctx.disabled,
                   draggable: _ctx.draggable,
@@ -4530,8 +4545,10 @@
                   tenants: vue.unref(tenants),
                   "user-group": _ctx.userGroup,
                   "user-group-name": userGroupName.value,
+                  onDragEnd: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("dragEnd", $event)),
+                  onDragStart: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("dragStart", $event)),
                   "onUpdate:selectedUsers": handleUpdateSelectedUsers
-                }, null, 8, ["modelValue", "api-base-url", "allow-create", "current-user-id", "disabled", "draggable", "empty-text", "enable-multi-tenant-mode", "exact-search-key", "exclude-user-ids", "placeholder", "render-list-item", "render-tag", "selected-users", "tenant-id", "tenants", "user-group", "user-group-name"])
+                }, null, 8, ["modelValue", "allow-create", "api-base-url", "current-user-id", "disabled", "draggable", "empty-text", "enable-multi-tenant-mode", "exact-search-key", "exclude-user-ids", "placeholder", "render-list-item", "render-tag", "selected-users", "tenant-id", "tenants", "user-group", "user-group-name"])
               ],
               2112
               /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
@@ -4543,7 +4560,7 @@
       };
     }
   });
-  const BkUserSelector = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-8a402cb7"]]);
+  const BkUserSelector = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-20d45a5c"]]);
   exports2.BkUserSelector = BkUserSelector;
   exports2.default = BkUserSelector;
   Object.defineProperties(exports2, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });

package/vue3/vue3.css

@@ -25,34 +25,34 @@
   color: #c4c6cc;
   cursor: not-allowed;
   background-color: #f0f1f5;
-}.dropdown-content[data-v-561a8644] {
+}.dropdown-content[data-v-e11d7af7] {
   min-height: 40px;
   max-height: 300px;
   padding: 5px 0;
   overflow-y: auto;
 }
-.dropdown-content .no-data[data-v-561a8644] {
+.dropdown-content .no-data[data-v-e11d7af7] {
   padding: 10px;
   color: #979ba5;
   text-align: center;
 }
-.dropdown-content .user-group .group-header[data-v-561a8644] {
+.dropdown-content .user-group .group-header[data-v-e11d7af7] {
   display: flex;
   align-items: center;
   padding: 8px 12px;
   color: #979ba5;
 }
-.dropdown-content .user-group .group-header .group-count[data-v-561a8644] {
+.dropdown-content .user-group .group-header .group-count[data-v-e11d7af7] {
   margin-left: 4px;
 }
-.dropdown-content .user-option[data-v-561a8644] {
+.dropdown-content .user-option[data-v-e11d7af7] {
   display: flex;
   align-items: center;
   height: 32px;
   padding: 8px 12px;
   cursor: pointer;
 }
-.dropdown-content .user-option[data-v-561a8644]:hover {
+.dropdown-content .user-option[data-v-e11d7af7]:hover {
   background-color: #f5f7fa;
 }.bk-user-selector-popover.bk-user-selector-pop2-content {
   padding: 0;
@@ -80,14 +80,14 @@
   font-size: 12px;
   text-overflow: ellipsis;
   white-space: nowrap;
-}.multiple-selector[data-v-d8aff9ea] {
+}.multiple-selector[data-v-7515c7a3] {
   position: relative;
   width: 100%;
 }
-.multiple-selector.is-disabled[data-v-d8aff9ea] {
+.multiple-selector.is-disabled[data-v-7515c7a3] {
   pointer-events: none;
 }
-.multiple-selector .tags-container[data-v-d8aff9ea] {
+.multiple-selector .tags-container[data-v-7515c7a3] {
   min-height: 32px;
   padding: 1px 10px 1px 8px;
   background-color: #fff;
@@ -95,42 +95,42 @@
   border-radius: 2px;
   transition: all 0.2s ease;
 }
-.multiple-selector .tags-container.focused[data-v-d8aff9ea] {
+.multiple-selector .tags-container.focused[data-v-7515c7a3] {
   border-color: #3a84ff;
   box-shadow: 0 0 0 2px rgba(58, 132, 255, 0.1);
 }
-.multiple-selector .tags-container.collapsed[data-v-d8aff9ea] {
+.multiple-selector .tags-container.collapsed[data-v-7515c7a3] {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
 }
-.multiple-selector .tag-list[data-v-d8aff9ea] {
+.multiple-selector .tag-list[data-v-7515c7a3] {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
 }
-.multiple-selector .tag-wrapper[data-v-d8aff9ea] {
+.multiple-selector .tag-wrapper[data-v-7515c7a3] {
   display: inline-flex;
   align-items: center;
   max-width: 100%;
 }
-.multiple-selector .search-input[data-v-d8aff9ea] {
+.multiple-selector .search-input[data-v-7515c7a3] {
   min-width: 10px;
   height: 28px;
   background: transparent;
   border: none;
   outline: none;
 }
-.multiple-selector .search-input[data-v-d8aff9ea]::placeholder {
+.multiple-selector .search-input[data-v-7515c7a3]::placeholder {
   color: #c4c6cc;
 }
-.multiple-selector .search-input.inline[data-v-d8aff9ea] {
+.multiple-selector .search-input.inline[data-v-7515c7a3] {
   min-width: 10px;
 }
-.multiple-selector .search-input.last[data-v-d8aff9ea], .multiple-selector .search-input.collapsed[data-v-d8aff9ea] {
+.multiple-selector .search-input.last[data-v-7515c7a3], .multiple-selector .search-input.collapsed[data-v-7515c7a3] {
   flex: 1;
 }
-.hidden-users[data-v-d8aff9ea] {
+.hidden-users[data-v-7515c7a3] {
   padding: 6px 10px;
 }.single-selector[data-v-6b8c23c5] {
   position: relative;
@@ -162,12 +162,12 @@
 }
 .search-input[data-v-6b8c23c5]::placeholder {
   color: #c4c6cc;
-}.bk-user-selector[data-v-8a402cb7] {
+}.bk-user-selector[data-v-20d45a5c] {
   position: relative;
   width: 100%;
   font-size: 12px;
 }
-.bk-user-selector.is-disabled[data-v-8a402cb7] {
+.bk-user-selector.is-disabled[data-v-20d45a5c] {
   cursor: not-allowed;
   background-color: #dcdee5;
 }