@blueking/bk-user-selector 0.0.38 → 0.0.39-beta.2

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-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-49f3716b] {\n  position: relative;\n  width: 100%;\n}\n.multiple-selector.is-disabled[data-v-49f3716b] {\n  pointer-events: none;\n}\n.multiple-selector .tags-container[data-v-49f3716b] {\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-49f3716b] {\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-49f3716b] {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n}\n.multiple-selector .tag-list[data-v-49f3716b] {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n}\n.multiple-selector .tag-wrapper[data-v-49f3716b] {\n  display: inline-flex;\n  align-items: center;\n  max-width: 100%;\n}\n.multiple-selector .search-input[data-v-49f3716b] {\n  min-width: 10px;\n  height: 28px;\n  background: transparent;\n  border: none;\n  outline: none;\n}\n.multiple-selector .search-input[data-v-49f3716b]::placeholder {\n  color: #c4c6cc;\n}\n.multiple-selector .search-input.inline[data-v-49f3716b] {\n  min-width: 10px;\n}\n.multiple-selector .search-input.last[data-v-49f3716b], .multiple-selector .search-input.collapsed[data-v-49f3716b] {\n  flex: 1;\n}\n.hidden-users[data-v-49f3716b] {\n  padding: 6px 10px;\n}.single-selector[data-v-726a967e] {\n  position: relative;\n  width: 100%;\n}\n.single-selector.is-disabled[data-v-726a967e] {\n  pointer-events: none;\n}\n.input-container[data-v-726a967e] {\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-726a967e]: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-726a967e] {\n  flex: 1;\n  height: 30px;\n  background: transparent;\n  border: none;\n  outline: none;\n}\n.search-input[data-v-726a967e]::placeholder {\n  color: #c4c6cc;\n}.bk-user-selector[data-v-879a2fa1] {\n  position: relative;\n  width: 100%;\n  font-size: 12px;\n}\n.bk-user-selector.is-disabled[data-v-879a2fa1] {\n  cursor: not-allowed;\n  background-color: #dcdee5;\n}";
+  __vite_style__.textContent = ".me-tag[data-v-ef4a05c4] {\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  white-space: nowrap;\n  cursor: pointer;\n  background-color: #e1ecff;\n  border-radius: 50%;\n  transform: translateY(-50%);\n}\n.me-tag[data-v-ef4a05c4]:hover {\n  color: #3a84ff;\n  background-color: #cddffe;\n}\n.me-tag.disabled[data-v-ef4a05c4] {\n  color: #c4c6cc;\n  cursor: not-allowed;\n  background-color: #f0f1f5;\n}.dropdown-content[data-v-78875ea6] {\n  min-height: 40px;\n  max-height: 300px;\n  padding: 5px 0;\n  overflow-y: auto;\n}\n.dropdown-content .no-data[data-v-78875ea6] {\n  padding: 10px;\n  color: #979ba5;\n  text-align: center;\n}\n.dropdown-content .user-group .group-header[data-v-78875ea6] {\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-78875ea6] {\n  margin-left: 4px;\n}\n.dropdown-content .user-option[data-v-78875ea6] {\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-78875ea6]:hover {\n  background-color: #f5f7fa;\n}.user-tag[data-v-48ac8fc1] {\n  margin-right: 4px;\n  margin-left: 0;\n}\n.user-tag.draggable[data-v-48ac8fc1] {\n  cursor: move;\n}\n.user-tag.active[data-v-48ac8fc1] {\n  background-color: #e1ecff;\n  border-color: #3a84ff;\n}\n.user-tag.is-custom[data-v-48ac8fc1] {\n  color: #ea3636;\n  background-color: #feebea;\n  border-color: rgba(234, 53, 54, 0.3019607843);\n}\n.user-tag.is-custom[data-v-48ac8fc1]:hover {\n  background-color: #fedddc;\n}\n.user-tag .tag-content .user-name[data-v-48ac8fc1] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  font-size: 12px;\n  white-space: nowrap;\n}.multiple-selector[data-v-2a532f24] {\n  position: relative;\n  width: 100%;\n}\n.multiple-selector.is-disabled[data-v-2a532f24] {\n  pointer-events: none;\n}\n.multiple-selector .tags-container[data-v-2a532f24] {\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-2a532f24] {\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-2a532f24] {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n}\n.multiple-selector .tag-list[data-v-2a532f24] {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n}\n.multiple-selector .tag-wrapper[data-v-2a532f24] {\n  display: inline-flex;\n  align-items: center;\n  max-width: 100%;\n}\n.multiple-selector .search-input[data-v-2a532f24] {\n  min-width: 10px;\n  height: 28px;\n  outline: none;\n  background: transparent;\n  border: none;\n}\n.multiple-selector .search-input[data-v-2a532f24]::placeholder {\n  color: #c4c6cc;\n}\n.multiple-selector .search-input.inline[data-v-2a532f24] {\n  min-width: 10px;\n}\n.multiple-selector .search-input.last[data-v-2a532f24], .multiple-selector .search-input.collapsed[data-v-2a532f24] {\n  flex: 1;\n}\n.hidden-users[data-v-2a532f24] {\n  padding: 6px 10px;\n}.single-selector[data-v-cbe352a6] {\n  position: relative;\n  width: 100%;\n}\n.single-selector.is-disabled[data-v-cbe352a6] {\n  pointer-events: none;\n}\n.input-container[data-v-cbe352a6] {\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-cbe352a6]: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-cbe352a6] {\n  flex: 1;\n  height: 30px;\n  outline: none;\n  background: transparent;\n  border: none;\n}\n.search-input[data-v-cbe352a6]::placeholder {\n  color: #c4c6cc;\n}.bk-user-selector[data-v-f29cda5a] {\n  position: relative;\n  width: 100%;\n  font-size: 12px;\n}\n.bk-user-selector.is-disabled[data-v-f29cda5a] {\n  cursor: not-allowed;\n  background-color: #dcdee5;\n}.bk-user-selector-popover.bk-user-selector-pop2-content {\n  padding: 0;\n}";
   document.head.appendChild(__vite_style__);
   const generateCallbackName = () => {
     const timestamp = Date.now();
@@ -13,15 +13,11 @@
   const jsonpRequest = (requestUrl, options = {}) => {
     return new Promise((resolve, reject) => {
       const url = vue.unref(requestUrl);
-      const { timeout = 1e3 * 60 * 2, params, withCredentials = true } = options;
+      const { timeout = 1e3 * 60 * 2, params } = options;
       const callbackName = generateCallbackName();
       const script = document.createElement("script");
-      let timeoutId;
-      if (withCredentials) {
-        script.crossOrigin = "use-credentials";
-      } else {
-        script.crossOrigin = "anonymous";
-      }
+      let timeoutId = null;
+      script.setAttribute("type", "text/javascript");
       const cleanup = () => {
         if (timeoutId) {
           clearTimeout(timeoutId);
@@ -3267,7 +3263,7 @@
     }
     return target;
   };
-  const MeTag = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-44fec2ba"]]);
+  const MeTag = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-ef4a05c4"]]);
   const UserRender = vue.defineComponent({
     name: "UserRender",
     props: {
@@ -3442,22 +3438,22 @@
       };
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createBlock(vue.unref(bkuiVue.Popover), {
-          "ext-cls": "bk-user-selector-popover",
           arrow: false,
+          "ext-cls": "bk-user-selector-popover",
           "is-show": __props.isShow,
           offset: { mainAxis: 4, crossAxis: __props.crossAxisOffset },
-          width: __props.containerWidth,
           placement: "bottom-start",
           theme: "light",
           trigger: "manual",
+          width: __props.containerWidth,
           onClickoutside: handleClickOutside
         }, {
           content: vue.withCtx(() => [
             vue.createVNode(vue.unref(bkuiVue.Loading), {
               class: "dropdown-content",
               loading: __props.loading,
-              size: "mini",
-              mode: "spin"
+              mode: "spin",
+              size: "mini"
             }, {
               default: vue.withCtx(() => [
                 __props.options.length === 0 && __props.userGroup.length === 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [
@@ -3473,8 +3469,8 @@
                   { key: 1 },
                   vue.renderList(groupedUsers.value, (group, groupName) => {
                     return vue.openBlock(), vue.createElementBlock("div", {
-                      class: "user-group",
-                      key: groupName
+                      key: groupName,
+                      class: "user-group"
                     }, [
                       Object.keys(groupedUsers.value).length > 1 || group.some((user) => user.type === "userGroup") ? (vue.openBlock(), vue.createElementBlock("div", {
                         key: 0,
@@ -3502,8 +3498,8 @@
                         null,
                         vue.renderList(group, (user) => {
                           return vue.openBlock(), vue.createElementBlock("div", {
-                            class: "user-option",
                             key: user.id,
+                            class: "user-option",
                             onClick: vue.withModifiers(($event) => selectUser(user), ["prevent"])
                           }, [
                             vue.createVNode(vue.unref(UserRender), {
@@ -3536,20 +3532,20 @@
       };
     }
   });
-  const SelectionPopover = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-e11d7af7"]]);
+  const SelectionPopover = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-78875ea6"]]);
   const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "UserTag"
     },
     __name: "user-tag",
     props: {
-      user: {},
-      tenants: {},
+      active: { type: Boolean },
       currentTenantId: {},
       draggable: { type: Boolean },
-      active: { type: Boolean },
+      renderTag: { type: Function },
       showTenant: { type: Boolean },
-      renderTag: { type: Function }
+      tenants: {},
+      user: {}
     },
     emits: ["click", "close"],
     setup(__props, { emit: __emit }) {
@@ -3582,7 +3578,7 @@
       };
     }
   });
-  const UserTag = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-3ff46050"]]);
+  const UserTag = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-48ac8fc1"]]);
   const _hoisted_1$1 = ["onClick"];
   const _hoisted_2$1 = ["placeholder"];
   const _hoisted_3 = { class: "hidden-users" };
@@ -3593,24 +3589,25 @@
     },
     __name: "multiple-selector",
     props: {
-      modelValue: { default: () => [] },
       draggable: { type: Boolean, default: false },
+      freePaste: { type: Boolean, default: false },
+      modelValue: { default: () => [] },
       selectedUsers: { default: () => [] },
       tenants: { default: () => ({}) },
+      allowCreate: { type: Boolean, default: false },
       apiBaseUrl: { default: "" },
-      tenantId: { default: "" },
-      placeholder: { default: "" },
       currentUserId: { default: "" },
+      disabled: { type: Boolean },
+      emptyText: { default: "" },
+      enableMultiTenantMode: { type: Boolean },
       exactSearchKey: { default: "bk_username" },
-      userGroup: { default: () => [] },
+      excludeUserIds: { default: () => [] },
+      placeholder: { default: "" },
+      tenantId: { default: "" },
       userGroupName: { default: "" },
-      emptyText: { default: "" },
-      disabled: { type: Boolean },
       renderListItem: {},
       renderTag: {},
-      excludeUserIds: { default: () => [] },
-      enableMultiTenantMode: { type: Boolean },
-      allowCreate: { type: Boolean, default: false }
+      userGroup: { default: () => [] }
     },
     emits: [
       "update:selectedUsers",
@@ -3711,7 +3708,6 @@
         });
       };
       const handleClickOutside = (event) => {
-        event.stopPropagation();
         const target = event.target;
         const container = containerRef.value;
         if ((container == null ? void 0 : container.contains(target)) || container === target) {
@@ -3813,7 +3809,37 @@
                 }
               });
               const updatedUsers = Array.from(userMap.values());
-              emit("update:selectedUsers", updatedUsers);
+              if (props.freePaste) {
+                const pastedUsers = usersList.map((user) => ({
+                  id: user,
+                  name: user,
+                  type: "custom",
+                  tenantId: "",
+                  login_name: user
+                }));
+                pastedUsers.forEach((user) => {
+                  if (!updatedUsers.some((item) => item.login_name === user.login_name)) {
+                    addUser(user);
+                  }
+                });
+              } else {
+                emit("update:selectedUsers", updatedUsers);
+              }
+            } else {
+              if (props.freePaste) {
+                const pastedUsers = usersList.map((user) => ({
+                  id: user,
+                  name: user,
+                  type: "custom",
+                  tenantId: "",
+                  login_name: user
+                }));
+                pastedUsers.forEach((user) => {
+                  if (!props.selectedUsers.some((item) => item.login_name === user.login_name)) {
+                    addUser(user);
+                  }
+                });
+              }
             }
           } catch (error) {
             console.error("精准查找用户失败:", error);
@@ -3835,7 +3861,13 @@
             removeUser(lastUser);
           }
         } else if (event.key === "Enter" && props.allowCreate) {
-          addUser({ id: searchQuery.value, name: searchQuery.value, type: "custom", tenantId: "" });
+          addUser({
+            id: searchQuery.value,
+            name: searchQuery.value,
+            type: "custom",
+            tenantId: "",
+            login_name: searchQuery.value
+          });
         }
       };
       const addUser = (user) => {
@@ -3959,8 +3991,8 @@
                           null,
                           vue.renderList(_ctx.selectedUsers, (user, index) => {
                             return vue.openBlock(), vue.createElementBlock("div", {
-                              class: "tag-wrapper",
                               key: user.id,
+                              class: "tag-wrapper",
                               onClick: vue.withModifiers(($event) => handleTagClick(index), ["stop"])
                             }, [
                               vue.createVNode(UserTag, {
@@ -3981,8 +4013,8 @@
                                   ref_for: true,
                                   ref_key: "inlineInputRef",
                                   ref: inlineInputRef,
-                                  class: "search-input inline",
                                   "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.isRef(searchQuery) ? searchQuery.value = $event : null),
+                                  class: "search-input inline",
                                   onFocus: handleInputFocus,
                                   onInput: handleInput,
                                   onKeydown: handleKeyDown,
@@ -4004,8 +4036,8 @@
                           key: 0,
                           ref_key: "lastInputRef",
                           ref: lastInputRef,
-                          class: "search-input last",
                           "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => vue.isRef(searchQuery) ? searchQuery.value = $event : null),
+                          class: "search-input last",
                           placeholder: !_ctx.selectedUsers.length ? _ctx.placeholder : "",
                           onFocus: handleInputFocus,
                           onInput: handleInput,
@@ -4046,8 +4078,8 @@
                           null,
                           vue.renderList(visibleUsers.value, (user) => {
                             return vue.openBlock(), vue.createBlock(UserTag, {
-                              "current-tenant-id": _ctx.tenantId,
                               key: user.id,
+                              "current-tenant-id": _ctx.tenantId,
                               "render-tag": _ctx.renderTag,
                               "show-tenant": true,
                               tenants: _ctx.tenants,
@@ -4102,8 +4134,8 @@
                         vue.withDirectives(vue.createElementVNode("input", {
                           ref_key: "collapsedInputRef",
                           ref: collapsedInputRef,
-                          class: "search-input collapsed",
                           "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => vue.isRef(searchQuery) ? searchQuery.value = $event : null),
+                          class: "search-input collapsed",
                           placeholder: !_ctx.selectedUsers.length ? _ctx.placeholder : "",
                           onFocus: handleFocus
                         }, null, 40, _hoisted_4), [
@@ -4134,7 +4166,7 @@
       };
     }
   });
-  const MultipleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-49f3716b"]]);
+  const MultipleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-2a532f24"]]);
   const _hoisted_1 = { class: "input-container" };
   const _hoisted_2 = ["placeholder"];
   const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
@@ -4145,20 +4177,21 @@
     props: {
       modelValue: { default: "" },
       tenants: {},
+      allowCreate: { type: Boolean },
       apiBaseUrl: { default: "" },
-      tenantId: { default: "" },
-      placeholder: { default: "" },
       currentUserId: { default: "" },
+      disabled: { type: Boolean },
+      emptyText: { default: "" },
+      enableMultiTenantMode: { type: Boolean },
       exactSearchKey: { default: "bk_username" },
-      userGroup: { default: () => [] },
+      excludeUserIds: { default: () => [] },
+      freePaste: { type: Boolean },
+      placeholder: { default: "" },
+      tenantId: { default: "" },
       userGroupName: { default: "" },
-      emptyText: { default: "" },
-      disabled: { type: Boolean },
       renderListItem: {},
       renderTag: {},
-      excludeUserIds: { default: () => [] },
-      enableMultiTenantMode: { type: Boolean },
-      allowCreate: { type: Boolean }
+      userGroup: { default: () => [] }
     },
     emits: ["update:modelValue", "change", "focus", "blur"],
     setup(__props, { emit: __emit }) {
@@ -4256,6 +4289,7 @@
       const fetchUsers = async (keyword = "") => {
         if (!(keyword == null ? void 0 : keyword.length)) {
           options.value = [];
+          isLoading.value = false;
           return;
         }
         isLoading.value = true;
@@ -4288,6 +4322,18 @@
           }
         }
       };
+      const handlePaste = (event) => {
+        var _a;
+        event.preventDefault();
+        const pastedText = ((_a = event.clipboardData) == null ? void 0 : _a.getData("text").trim()) || "";
+        if (props.freePaste) {
+          const customUser = { id: pastedText, name: pastedText, type: "custom", tenantId: "", login_name: pastedText };
+          if (!options.value.some((item) => item.login_name === customUser.login_name)) {
+            options.value.push(customUser);
+          }
+          addUser(customUser);
+        }
+      };
       const addUser = (user) => {
         selectedUser.value = user.id;
         searchQuery.value = "";
@@ -4303,9 +4349,14 @@
         }
         emit("focus");
       };
+      let timer = null;
       const handleInput = () => {
-        fetchUsers(searchQuery.value);
         showDropdown.value = searchQuery.value.length >= 1;
+        isLoading.value = true;
+        clearTimeout(timer);
+        timer = setTimeout(() => {
+          fetchUsers(searchQuery.value);
+        }, 300);
       };
       const handleClickOutside = () => {
         setTimeout(() => {
@@ -4364,13 +4415,14 @@
                   vue.withDirectives(vue.createElementVNode("input", {
                     ref_key: "inputRef",
                     ref: inputRef,
-                    class: "search-input",
                     "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchQuery.value = $event),
+                    class: "search-input",
                     placeholder: selectedUserInfo.value ? "" : _ctx.placeholder,
                     onBlur: _cache[1] || (_cache[1] = ($event) => emit("blur")),
                     onFocus: handleInputFocus,
                     onInput: handleInput,
-                    onKeydown: handleKeyDown
+                    onKeydown: handleKeyDown,
+                    onPaste: handlePaste
                   }, null, 40, _hoisted_2), [
                     [vue.vModelText, searchQuery.value]
                   ]),
@@ -4394,30 +4446,31 @@
       };
     }
   });
-  const SingleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-726a967e"]]);
+  const SingleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-cbe352a6"]]);
   const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "BkUserSelector"
     },
     __name: "user-selector",
     props: {
-      modelValue: { default: "" },
       draggable: { type: Boolean, default: false },
+      modelValue: { default: "" },
       multiple: { type: Boolean, default: false },
+      allowCreate: { type: Boolean, default: false },
       apiBaseUrl: { default: "" },
-      tenantId: { default: "" },
-      placeholder: { default: "" },
       currentUserId: { default: "" },
+      disabled: { type: Boolean, default: false },
+      emptyText: { default: "" },
+      enableMultiTenantMode: { type: Boolean, default: true },
       exactSearchKey: { default: "bk_username" },
-      userGroup: { default: () => [] },
+      excludeUserIds: { default: () => [] },
+      freePaste: { type: Boolean, default: false },
+      placeholder: { default: "" },
+      tenantId: { default: "" },
       userGroupName: { default: "" },
-      emptyText: { default: "" },
-      disabled: { type: Boolean, default: false },
       renderListItem: {},
       renderTag: {},
-      excludeUserIds: { default: () => [] },
-      enableMultiTenantMode: { type: Boolean, default: true },
-      allowCreate: { type: Boolean, default: false }
+      userGroup: { default: () => [] }
     },
     emits: ["update:modelValue", "change", "dragStart", "dragEnd", "focus", "blur"],
     setup(__props, { emit: __emit }) {
@@ -4540,10 +4593,11 @@
               tenants: vue.unref(tenants),
               "user-group": _ctx.userGroup,
               "user-group-name": userGroupName.value,
+              "free-paste": _ctx.freePaste,
               onBlur: handleBlur,
               onChange: handleUpdateUser,
               onFocus: handleFocus
-            }, 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(
+            }, 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", "free-paste"])) : (vue.openBlock(), vue.createElementBlock(
               vue.Fragment,
               { key: 1 },
               [
@@ -4568,12 +4622,13 @@
                   tenants: vue.unref(tenants),
                   "user-group": _ctx.userGroup,
                   "user-group-name": userGroupName.value,
+                  "free-paste": _ctx.freePaste,
                   onBlur: handleBlur,
                   onDragEnd: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("dragEnd", $event)),
                   onDragStart: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("dragStart", $event)),
                   onFocus: handleFocus,
                   "onUpdate:selectedUsers": handleUpdateSelectedUsers
-                }, 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"])
+                }, 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", "free-paste"])
               ],
               2112
               /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
@@ -4585,7 +4640,7 @@
       };
     }
   });
-  const BkUserSelector = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-879a2fa1"]]);
+  const BkUserSelector = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f29cda5a"]]);
   exports2.BkUserSelector = BkUserSelector;
   exports2.default = BkUserSelector;
   Object.defineProperties(exports2, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });

package/vue3/vue3.css

@@ -1,4 +1,4 @@
-.me-tag[data-v-44fec2ba] {
+.me-tag[data-v-ef4a05c4] {
   position: absolute;
   top: 50%;
   right: 8px;
@@ -11,83 +11,81 @@
   padding: 0 8px;
   font-size: 12px;
   color: #4d4f56;
+  white-space: nowrap;
   cursor: pointer;
   background-color: #e1ecff;
   border-radius: 50%;
   transform: translateY(-50%);
-  white-space: nowrap;
 }
-.me-tag[data-v-44fec2ba]:hover {
+.me-tag[data-v-ef4a05c4]:hover {
   color: #3a84ff;
   background-color: #cddffe;
 }
-.me-tag.disabled[data-v-44fec2ba] {
+.me-tag.disabled[data-v-ef4a05c4] {
   color: #c4c6cc;
   cursor: not-allowed;
   background-color: #f0f1f5;
-}.dropdown-content[data-v-e11d7af7] {
+}.dropdown-content[data-v-78875ea6] {
   min-height: 40px;
   max-height: 300px;
   padding: 5px 0;
   overflow-y: auto;
 }
-.dropdown-content .no-data[data-v-e11d7af7] {
+.dropdown-content .no-data[data-v-78875ea6] {
   padding: 10px;
   color: #979ba5;
   text-align: center;
 }
-.dropdown-content .user-group .group-header[data-v-e11d7af7] {
+.dropdown-content .user-group .group-header[data-v-78875ea6] {
   display: flex;
   align-items: center;
   padding: 8px 12px;
   color: #979ba5;
 }
-.dropdown-content .user-group .group-header .group-count[data-v-e11d7af7] {
+.dropdown-content .user-group .group-header .group-count[data-v-78875ea6] {
   margin-left: 4px;
 }
-.dropdown-content .user-option[data-v-e11d7af7] {
+.dropdown-content .user-option[data-v-78875ea6] {
   display: flex;
   align-items: center;
   height: 32px;
   padding: 8px 12px;
   cursor: pointer;
 }
-.dropdown-content .user-option[data-v-e11d7af7]:hover {
+.dropdown-content .user-option[data-v-78875ea6]:hover {
   background-color: #f5f7fa;
-}.bk-user-selector-popover.bk-user-selector-pop2-content {
-  padding: 0;
-}.user-tag[data-v-3ff46050] {
+}.user-tag[data-v-48ac8fc1] {
   margin-right: 4px;
   margin-left: 0;
 }
-.user-tag.draggable[data-v-3ff46050] {
+.user-tag.draggable[data-v-48ac8fc1] {
   cursor: move;
 }
-.user-tag.active[data-v-3ff46050] {
+.user-tag.active[data-v-48ac8fc1] {
   background-color: #e1ecff;
   border-color: #3a84ff;
 }
-.user-tag.is-custom[data-v-3ff46050] {
+.user-tag.is-custom[data-v-48ac8fc1] {
   color: #ea3636;
   background-color: #feebea;
   border-color: rgba(234, 53, 54, 0.3019607843);
 }
-.user-tag.is-custom[data-v-3ff46050]:hover {
+.user-tag.is-custom[data-v-48ac8fc1]:hover {
   background-color: #fedddc;
 }
-.user-tag .tag-content .user-name[data-v-3ff46050] {
+.user-tag .tag-content .user-name[data-v-48ac8fc1] {
   overflow: hidden;
-  font-size: 12px;
   text-overflow: ellipsis;
+  font-size: 12px;
   white-space: nowrap;
-}.multiple-selector[data-v-49f3716b] {
+}.multiple-selector[data-v-2a532f24] {
   position: relative;
   width: 100%;
 }
-.multiple-selector.is-disabled[data-v-49f3716b] {
+.multiple-selector.is-disabled[data-v-2a532f24] {
   pointer-events: none;
 }
-.multiple-selector .tags-container[data-v-49f3716b] {
+.multiple-selector .tags-container[data-v-2a532f24] {
   min-height: 32px;
   padding: 1px 10px 1px 8px;
   background-color: #fff;
@@ -95,51 +93,51 @@
   border-radius: 2px;
   transition: all 0.2s ease;
 }
-.multiple-selector .tags-container.focused[data-v-49f3716b] {
+.multiple-selector .tags-container.focused[data-v-2a532f24] {
   border-color: #3a84ff;
   box-shadow: 0 0 0 2px rgba(58, 132, 255, 0.1);
 }
-.multiple-selector .tags-container.collapsed[data-v-49f3716b] {
+.multiple-selector .tags-container.collapsed[data-v-2a532f24] {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
 }
-.multiple-selector .tag-list[data-v-49f3716b] {
+.multiple-selector .tag-list[data-v-2a532f24] {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
 }
-.multiple-selector .tag-wrapper[data-v-49f3716b] {
+.multiple-selector .tag-wrapper[data-v-2a532f24] {
   display: inline-flex;
   align-items: center;
   max-width: 100%;
 }
-.multiple-selector .search-input[data-v-49f3716b] {
+.multiple-selector .search-input[data-v-2a532f24] {
   min-width: 10px;
   height: 28px;
+  outline: none;
   background: transparent;
   border: none;
-  outline: none;
 }
-.multiple-selector .search-input[data-v-49f3716b]::placeholder {
+.multiple-selector .search-input[data-v-2a532f24]::placeholder {
   color: #c4c6cc;
 }
-.multiple-selector .search-input.inline[data-v-49f3716b] {
+.multiple-selector .search-input.inline[data-v-2a532f24] {
   min-width: 10px;
 }
-.multiple-selector .search-input.last[data-v-49f3716b], .multiple-selector .search-input.collapsed[data-v-49f3716b] {
+.multiple-selector .search-input.last[data-v-2a532f24], .multiple-selector .search-input.collapsed[data-v-2a532f24] {
   flex: 1;
 }
-.hidden-users[data-v-49f3716b] {
+.hidden-users[data-v-2a532f24] {
   padding: 6px 10px;
-}.single-selector[data-v-726a967e] {
+}.single-selector[data-v-cbe352a6] {
   position: relative;
   width: 100%;
 }
-.single-selector.is-disabled[data-v-726a967e] {
+.single-selector.is-disabled[data-v-cbe352a6] {
   pointer-events: none;
 }
-.input-container[data-v-726a967e] {
+.input-container[data-v-cbe352a6] {
   position: relative;
   display: flex;
   align-items: center;
@@ -149,25 +147,27 @@
   border: 1px solid #c4c6cc;
   border-radius: 2px;
 }
-.input-container[data-v-726a967e]:focus-within {
+.input-container[data-v-cbe352a6]:focus-within {
   border-color: #3a84ff;
   box-shadow: 0 0 0 2px rgba(58, 132, 255, 0.1);
 }
-.search-input[data-v-726a967e] {
+.search-input[data-v-cbe352a6] {
   flex: 1;
   height: 30px;
+  outline: none;
   background: transparent;
   border: none;
-  outline: none;
 }
-.search-input[data-v-726a967e]::placeholder {
+.search-input[data-v-cbe352a6]::placeholder {
   color: #c4c6cc;
-}.bk-user-selector[data-v-879a2fa1] {
+}.bk-user-selector[data-v-f29cda5a] {
   position: relative;
   width: 100%;
   font-size: 12px;
 }
-.bk-user-selector.is-disabled[data-v-879a2fa1] {
+.bk-user-selector.is-disabled[data-v-f29cda5a] {
   cursor: not-allowed;
   background-color: #dcdee5;
+}.bk-user-selector-popover.bk-user-selector-pop2-content {
+  padding: 0;
 }