@blueking/bk-user-selector 0.0.29-beta.8 → 0.0.30

package/vue2/vue2.css

@@ -797,7 +797,7 @@ optgroup {
   line-height: 0;
   cursor: pointer;
 }
-.me-tag[data-v-9ccd9029] {
+.me-tag[data-v-ce388fae] {
   position: absolute;
   top: 50%;
   right: 8px;
@@ -815,42 +815,42 @@ optgroup {
   border-radius: 50%;
   transform: translateY(-50%);
 }
-.me-tag[data-v-9ccd9029]:hover {
+.me-tag[data-v-ce388fae]:hover {
   color: #3a84ff;
   background-color: #cddffe;
 }
-.me-tag.disabled[data-v-9ccd9029] {
+.me-tag.disabled[data-v-ce388fae] {
   color: #c4c6cc;
   cursor: not-allowed;
   background-color: #f0f1f5;
-}.dropdown-content[data-v-6380faf5] {
+}.dropdown-content[data-v-61e98a47] {
   min-height: 40px;
   max-height: 300px;
   padding: 5px 0;
   overflow-y: auto;
 }
-.dropdown-content .no-data[data-v-6380faf5] {
+.dropdown-content .no-data[data-v-61e98a47] {
   padding: 10px;
   color: #979ba5;
   text-align: center;
 }
-.dropdown-content .user-group .group-header[data-v-6380faf5] {
+.dropdown-content .user-group .group-header[data-v-61e98a47] {
   display: flex;
   align-items: center;
   padding: 8px 12px;
   color: #979ba5;
 }
-.dropdown-content .user-group .group-header .group-count[data-v-6380faf5] {
+.dropdown-content .user-group .group-header .group-count[data-v-61e98a47] {
   margin-left: 4px;
 }
-.dropdown-content .user-option[data-v-6380faf5] {
+.dropdown-content .user-option[data-v-61e98a47] {
   display: flex;
   align-items: center;
   height: 32px;
   padding: 8px 12px;
   cursor: pointer;
 }
-.dropdown-content .user-option[data-v-6380faf5]:hover {
+.dropdown-content .user-option[data-v-61e98a47]:hover {
   background-color: #f5f7fa;
 }.bk-user-selector-popover.bk-user-selector-pop2-content {
   padding: 0;
@@ -870,14 +870,14 @@ optgroup {
   font-size: 12px;
   text-overflow: ellipsis;
   white-space: nowrap;
-}.multiple-selector[data-v-bbacd5b7] {
+}.multiple-selector[data-v-1c358144] {
   position: relative;
   width: 100%;
 }
-.multiple-selector.is-disabled[data-v-bbacd5b7] {
+.multiple-selector.is-disabled[data-v-1c358144] {
   pointer-events: none;
 }
-.multiple-selector .tags-container[data-v-bbacd5b7] {
+.multiple-selector .tags-container[data-v-1c358144] {
   min-height: 32px;
   padding: 1px 10px 1px 8px;
   background-color: #fff;
@@ -885,49 +885,49 @@ optgroup {
   border-radius: 2px;
   transition: all 0.2s ease;
 }
-.multiple-selector .tags-container.focused[data-v-bbacd5b7] {
+.multiple-selector .tags-container.focused[data-v-1c358144] {
   border-color: #3a84ff;
   box-shadow: 0 0 0 2px rgba(58, 132, 255, 0.1);
 }
-.multiple-selector .tags-container.collapsed[data-v-bbacd5b7] {
+.multiple-selector .tags-container.collapsed[data-v-1c358144] {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
 }
-.multiple-selector .tag-list[data-v-bbacd5b7] {
+.multiple-selector .tag-list[data-v-1c358144] {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
 }
-.multiple-selector .tag-wrapper[data-v-bbacd5b7] {
+.multiple-selector .tag-wrapper[data-v-1c358144] {
   display: inline-flex;
   align-items: center;
   max-width: 100%;
 }
-.multiple-selector .search-input[data-v-bbacd5b7] {
+.multiple-selector .search-input[data-v-1c358144] {
   min-width: 10px;
   height: 28px;
   background: transparent;
   border: none;
   outline: none;
 }
-.multiple-selector .search-input[data-v-bbacd5b7]::placeholder {
+.multiple-selector .search-input[data-v-1c358144]::placeholder {
   color: #c4c6cc;
 }
-.multiple-selector .search-input.inline[data-v-bbacd5b7] {
+.multiple-selector .search-input.inline[data-v-1c358144] {
   min-width: 10px;
 }
-.multiple-selector .search-input.last[data-v-bbacd5b7], .multiple-selector .search-input.collapsed[data-v-bbacd5b7] {
+.multiple-selector .search-input.last[data-v-1c358144], .multiple-selector .search-input.collapsed[data-v-1c358144] {
   flex: 1;
   min-width: 60px;
-}.single-selector[data-v-48822637] {
+}.single-selector[data-v-7080eb2b] {
   position: relative;
   width: 100%;
 }
-.single-selector.is-disabled[data-v-48822637] {
+.single-selector.is-disabled[data-v-7080eb2b] {
   pointer-events: none;
 }
-.input-container[data-v-48822637] {
+.input-container[data-v-7080eb2b] {
   position: relative;
   display: flex;
   align-items: center;
@@ -937,25 +937,25 @@ optgroup {
   border: 1px solid #c4c6cc;
   border-radius: 2px;
 }
-.input-container[data-v-48822637]:focus-within {
+.input-container[data-v-7080eb2b]:focus-within {
   border-color: #3a84ff;
   box-shadow: 0 0 0 2px rgba(58, 132, 255, 0.1);
 }
-.search-input[data-v-48822637] {
+.search-input[data-v-7080eb2b] {
   flex: 1;
   height: 30px;
   background: transparent;
   border: none;
   outline: none;
 }
-.search-input[data-v-48822637]::placeholder {
+.search-input[data-v-7080eb2b]::placeholder {
   color: #c4c6cc;
-}.bk-user-selector[data-v-7ce51f9c] {
+}.bk-user-selector[data-v-c4574ead] {
   position: relative;
   width: 100%;
   font-size: 12px;
 }
-.bk-user-selector.is-disabled[data-v-7ce51f9c] {
+.bk-user-selector.is-disabled[data-v-c4574ead] {
   cursor: not-allowed;
   background-color: #dcdee5;
 }

package/vue3/index.es.min.js

@@ -1,4 +1,4 @@
-import { unref, ref, onBeforeMount, defineComponent, createElementBlock, createCommentVNode, openBlock, withModifiers, normalizeClass, h, computed, createBlock, withCtx, renderSlot, createVNode, createElementVNode, toDisplayString, Fragment, renderList, watch, nextTick, onMounted, withDirectives, isRef, vModelText, createTextVNode } from "vue";
+import { unref, ref, onBeforeMount, defineComponent, createElementBlock, createCommentVNode, openBlock, withModifiers, normalizeClass, toDisplayString, h, computed, createBlock, withCtx, renderSlot, createVNode, createElementVNode, Fragment, renderList, watch, nextTick, onMounted, withDirectives, isRef, vModelText, createTextVNode } from "vue";
 import { Popover, Loading, Tag, clickoutside, provideGlobalConfig } from "bkui-vue";
 const generateCallbackName = () => {
   const timestamp = Date.now();
@@ -114,7 +114,7 @@ const lookupUsers = async (params) => {
     }).catch(() => {
       return [];
     });
-    return userList;
+    return users.map((user) => userList.find((u) => u.username === user)).filter(Boolean);
   }
   if (users.length === 0 || !apiBaseUrl || !tenantId) {
     console.warn("批量查找用户需要提供有效的apiBaseUrl、租户ID和至少一个用户名");
@@ -169,6 +169,163 @@ const getUserList = async (url, params) => {
   });
   return (data == null ? void 0 : data.results) || [];
 };
+/*! js-cookie v3.0.5 | MIT */
+function assign(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i];
+    for (var key in source) {
+      target[key] = source[key];
+    }
+  }
+  return target;
+}
+var defaultConverter = {
+  read: function(value) {
+    if (value[0] === '"') {
+      value = value.slice(1, -1);
+    }
+    return value.replace(/(%[\dA-F]{2})+/gi, decodeURIComponent);
+  },
+  write: function(value) {
+    return encodeURIComponent(value).replace(
+      /%(2[346BF]|3[AC-F]|40|5[BDE]|60|7[BCD])/g,
+      decodeURIComponent
+    );
+  }
+};
+function init(converter, defaultAttributes) {
+  function set(name, value, attributes) {
+    if (typeof document === "undefined") {
+      return;
+    }
+    attributes = assign({}, defaultAttributes, attributes);
+    if (typeof attributes.expires === "number") {
+      attributes.expires = new Date(Date.now() + attributes.expires * 864e5);
+    }
+    if (attributes.expires) {
+      attributes.expires = attributes.expires.toUTCString();
+    }
+    name = encodeURIComponent(name).replace(/%(2[346B]|5E|60|7C)/g, decodeURIComponent).replace(/[()]/g, escape);
+    var stringifiedAttributes = "";
+    for (var attributeName in attributes) {
+      if (!attributes[attributeName]) {
+        continue;
+      }
+      stringifiedAttributes += "; " + attributeName;
+      if (attributes[attributeName] === true) {
+        continue;
+      }
+      stringifiedAttributes += "=" + attributes[attributeName].split(";")[0];
+    }
+    return document.cookie = name + "=" + converter.write(value, name) + stringifiedAttributes;
+  }
+  function get(name) {
+    if (typeof document === "undefined" || arguments.length && !name) {
+      return;
+    }
+    var cookies = document.cookie ? document.cookie.split("; ") : [];
+    var jar = {};
+    for (var i = 0; i < cookies.length; i++) {
+      var parts = cookies[i].split("=");
+      var value = parts.slice(1).join("=");
+      try {
+        var found = decodeURIComponent(parts[0]);
+        jar[found] = converter.read(value, found);
+        if (name === found) {
+          break;
+        }
+      } catch (e) {
+      }
+    }
+    return name ? jar[name] : jar;
+  }
+  return Object.create(
+    {
+      set,
+      get,
+      remove: function(name, attributes) {
+        set(
+          name,
+          "",
+          assign({}, attributes, {
+            expires: -1
+          })
+        );
+      },
+      withAttributes: function(attributes) {
+        return init(this.converter, assign({}, this.attributes, attributes));
+      },
+      withConverter: function(converter2) {
+        return init(assign({}, this.converter, converter2), this.attributes);
+      }
+    },
+    {
+      attributes: { value: Object.freeze(defaultAttributes) },
+      converter: { value: Object.freeze(converter) }
+    }
+  );
+}
+var api = init(defaultConverter, { path: "/" });
+const enUS = {
+  我: "Me",
+  请输入人员名称搜索: "Please enter the name of the user to search",
+  用户群组: "User Group",
+  无匹配人员: "No matching users"
+};
+const zhCN = {
+  我: "我",
+  请输入人员名称搜索: "请输入人员名称搜索",
+  用户群组: "用户群组",
+  无匹配人员: "无匹配人员"
+};
+const BLUEKINNG_LANGUAGE = "blueking_language";
+const languageMap = {
+  "en-US": enUS,
+  "zh-CN": zhCN
+};
+const getPath = (obj, path, variables) => {
+  const pathStack = /^\w/.test(path) ? path.split(".") : [path];
+  const { length } = pathStack;
+  let target = obj;
+  let i = 0;
+  while (i <= length && target) {
+    if (typeof target === "string") {
+      return target;
+    }
+    if (variables) {
+      target = target[pathStack[i]];
+      Object.keys(variables).forEach((key) => {
+        target = target.replace(`{${key}}`, variables[key]);
+      });
+    } else {
+      target = target[pathStack[i]];
+    }
+    i = i + 1;
+    if (!target) {
+      return target;
+    }
+  }
+  return target;
+};
+const useI18n = () => {
+  let localeLanguage = "zh-CN";
+  const bluekingLanguage = api.get(BLUEKINNG_LANGUAGE);
+  if (bluekingLanguage && bluekingLanguage.toLowerCase() === "en") {
+    localeLanguage = "en-US";
+  }
+  const languagePackage = languageMap[localeLanguage];
+  const t = (path, variable) => {
+    const value = getPath(languagePackage, path, variable);
+    if (value === void 0) {
+      console.warn(`缺少索引 * ${path} *`);
+    }
+    return value;
+  };
+  return {
+    local: localeLanguage,
+    t
+  };
+};
 const useTenantData = (apiBaseUrl, tenantId, enableMultiTenantMode = true) => {
   const tenants = ref({});
   const loading = ref(false);
@@ -3078,6 +3235,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   },
   emits: ["click"],
   setup(__props, { emit: __emit }) {
+    const { t } = useI18n();
     const props = __props;
     const emit = __emit;
     const handleClick = () => {
@@ -3092,9 +3250,9 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
           class: normalizeClass(["me-tag", { disabled: __props.isDisabled }]),
           onClick: withModifiers(handleClick, ["stop"])
         },
-        " 我 ",
-        2
-        /* CLASS */
+        toDisplayString(unref(t)("我")),
+        3
+        /* TEXT, CLASS */
       )) : createCommentVNode("v-if", true);
     };
   }
@@ -3106,7 +3264,7 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const MeTag = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-9ccd9029"]]);
+const MeTag = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-ce388fae"]]);
 const UserRender = defineComponent({
   name: "UserRender",
   props: {
@@ -3234,14 +3392,14 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
      */
     userGroupName: {
       type: String,
-      default: "用户群组"
+      default: ""
     },
     /**
      * 无匹配人员时的提示文本
      */
     emptyText: {
       type: String,
-      default: "无匹配人员"
+      default: ""
     },
     /**
      * 渲染列表项
@@ -3380,7 +3538,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const SelectionPopover = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-6380faf5"]]);
+const SelectionPopover = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-61e98a47"]]);
 const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   ...{
     name: "UserTag"
@@ -3442,12 +3600,12 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     tenants: { default: () => ({}) },
     apiBaseUrl: { default: "" },
     tenantId: { default: "" },
-    placeholder: { default: "请输入人员名称搜索" },
+    placeholder: { default: "" },
     currentUserId: { default: "" },
     exactSearchKey: { default: "bk_username" },
     userGroup: { default: () => [] },
-    userGroupName: { default: "用户群组" },
-    emptyText: { default: "无匹配人员" },
+    userGroupName: { default: "" },
+    emptyText: { default: "" },
     disabled: { type: Boolean },
     renderListItem: {},
     renderTag: {},
@@ -3482,7 +3640,14 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       return searchResults.value.filter((user) => !props.selectedUsers.some((selectedUser) => selectedUser.id === user.id)).filter((user) => !props.excludeUserIds.includes(user.id));
     });
     const userGroupFilter = computed(() => {
-      return props.userGroup.filter((group) => !props.selectedUsers.some((user) => user.id === group.id) && !group.hidden);
+      return props.userGroup.filter((group) => {
+        var _a, _b;
+        const filtered = !props.selectedUsers.some((user) => user.id === group.id) && !group.hidden;
+        if (filtered) {
+          return ((_a = group.id) == null ? void 0 : _a.includes(searchQuery.value)) || ((_b = group.name) == null ? void 0 : _b.includes(searchQuery.value));
+        }
+        return false;
+      });
     });
     const initSortable = () => {
       if (!props.draggable || !sortableContainerRef.value) return;
@@ -3938,7 +4103,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const MultipleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-bbacd5b7"]]);
+const MultipleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-1c358144"]]);
 const _hoisted_1 = { class: "input-container" };
 const _hoisted_2 = ["placeholder"];
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
@@ -3951,12 +4116,12 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     tenants: {},
     apiBaseUrl: { default: "" },
     tenantId: { default: "" },
-    placeholder: { default: "请输入人员名称搜索" },
+    placeholder: { default: "" },
     currentUserId: { default: "" },
     exactSearchKey: { default: "bk_username" },
     userGroup: { default: () => [] },
-    userGroupName: { default: "用户群组" },
-    emptyText: { default: "无匹配人员" },
+    userGroupName: { default: "" },
+    emptyText: { default: "" },
     disabled: { type: Boolean },
     renderListItem: {},
     renderTag: {},
@@ -3975,7 +4140,14 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const searchQuery = ref("");
     const showDropdown = ref(false);
     const userGroupFilter = computed(() => {
-      return props.userGroup.filter((group) => group.id !== selectedUser.value && !group.hidden);
+      return props.userGroup.filter((group) => {
+        var _a, _b;
+        const filtered = group.id !== selectedUser.value && !group.hidden;
+        if (filtered) {
+          return ((_a = group.id) == null ? void 0 : _a.includes(searchQuery.value)) || ((_b = group.name) == null ? void 0 : _b.includes(searchQuery.value));
+        }
+        return false;
+      });
     });
     const selectedUserInfo = computed(() => {
       const userGroup = (props.userGroup || []).map((group) => ({
@@ -4163,7 +4335,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const SingleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-48822637"]]);
+const SingleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-7080eb2b"]]);
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: "BkUserSelector"
@@ -4175,12 +4347,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     multiple: { type: Boolean, default: false },
     apiBaseUrl: { default: "" },
     tenantId: { default: "" },
-    placeholder: { default: "请输入人员名称搜索" },
+    placeholder: { default: "" },
     currentUserId: { default: "" },
     exactSearchKey: { default: "bk_username" },
     userGroup: { default: () => [] },
-    userGroupName: { default: "用户群组" },
-    emptyText: { default: "无匹配人员" },
+    userGroupName: { default: "" },
+    emptyText: { default: "" },
     disabled: { type: Boolean, default: false },
     renderListItem: {},
     renderTag: {},
@@ -4189,6 +4361,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   emits: ["update:modelValue", "change"],
   setup(__props, { emit: __emit }) {
+    const { t } = useI18n();
     provideGlobalConfig({
       prefix: "bk"
     });
@@ -4200,6 +4373,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const selectedUserIds = computed(() => {
       return props.multiple ? selectedUsers.value.map((user) => user.id) : [];
     });
+    const placeholder = computed(() => props.placeholder || t("请输入人员名称搜索"));
+    const userGroupName = computed(() => props.userGroupName || t("用户群组"));
+    const emptyText = computed(() => props.emptyText || t("无匹配人员"));
     const initSelectedUsers = async () => {
       if (props.multiple) {
         const ids = Array.isArray(props.modelValue) ? props.modelValue : [];
@@ -4221,7 +4397,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               usersList: ids,
               enableMultiTenantMode: props.enableMultiTenantMode
             });
-            selectedUsers.value = [...selected, ...formatUsers(result, props.enableMultiTenantMode)];
+            const selectedList = [...selected, ...formatUsers(result, props.enableMultiTenantMode)];
+            selectedUsers.value = ids.map((id) => selectedList.find((user) => user.id === id)).filter(Boolean);
           } catch (error) {
             console.error("获取选中用户信息失败:", error);
           }
@@ -4279,17 +4456,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             "api-base-url": _ctx.apiBaseUrl,
             "current-user-id": _ctx.currentUserId,
             disabled: _ctx.disabled,
-            "empty-text": _ctx.emptyText,
+            "empty-text": emptyText.value,
             "enable-multi-tenant-mode": _ctx.enableMultiTenantMode,
             "exact-search-key": _ctx.exactSearchKey,
             "exclude-user-ids": _ctx.excludeUserIds,
-            placeholder: _ctx.placeholder,
+            placeholder: placeholder.value,
             "render-list-item": _ctx.renderListItem,
             "render-tag": _ctx.renderTag,
             "tenant-id": _ctx.tenantId,
             tenants: unref(tenants),
             "user-group": _ctx.userGroup,
-            "user-group-name": _ctx.userGroupName,
+            "user-group-name": userGroupName.value,
             onChange: handleUpdateUser
           }, null, 8, ["modelValue", "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"])) : (openBlock(), createElementBlock(
             Fragment,
@@ -4303,18 +4480,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 "current-user-id": _ctx.currentUserId,
                 disabled: _ctx.disabled,
                 draggable: _ctx.draggable,
-                "empty-text": _ctx.emptyText,
+                "empty-text": emptyText.value,
                 "enable-multi-tenant-mode": _ctx.enableMultiTenantMode,
                 "exact-search-key": _ctx.exactSearchKey,
                 "exclude-user-ids": _ctx.excludeUserIds,
-                placeholder: _ctx.placeholder,
+                placeholder: placeholder.value,
                 "render-list-item": _ctx.renderListItem,
                 "render-tag": _ctx.renderTag,
                 "selected-users": selectedUsers.value,
                 "tenant-id": _ctx.tenantId,
                 tenants: unref(tenants),
                 "user-group": _ctx.userGroup,
-                "user-group-name": _ctx.userGroupName,
+                "user-group-name": userGroupName.value,
                 "onUpdate:selectedUsers": handleUpdateSelectedUsers
               }, null, 8, ["modelValue", "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"])
             ],
@@ -4328,7 +4505,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const BkUserSelector = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-7ce51f9c"]]);
+const BkUserSelector = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c4574ead"]]);
 export {
   BkUserSelector,
   BkUserSelector as default