@blueking/bk-user-selector 0.0.6 → 0.0.7

package/README.md

@@ -9,6 +9,7 @@
 - 支持跨租户显示
 - 支持拖拽排序（多选模式）
 - 支持快速选择当前用户
+- 支持用户组显示
 
 ## 安装
 
@@ -118,6 +119,8 @@ import '@blueking/bk-user-selector/vue2/vue2.css';
 | tenantId             | 租户 ID                                                                 | String         | ''                   |
 | exactSearchKey       | 精确查找key,可选值为 bk_username、login_name、full_name, 多个以逗号分隔 | String         | 'bk_username'        |
 | currentUserId        | 当前用户ID（用于快速选择"我"）                                          | String         | ''                   |
+| userGroup            | 用户组列表，用于在下拉列表中显示用户组                                  | Array          | []                   |
+| userGroupName        | 用户组名称，用于在下拉列表中显示用户组名称                              | String         | '用户群组'           |
 
 ### 事件
 
@@ -136,6 +139,27 @@ import '@blueking/bk-user-selector/vue2/vue2.css';
 - 在多选模式下，点击"我"会将当前用户添加到已选列表中（如果尚未选择）
 - 当当前用户已被选中时，"我"标签会显示为灰色且不可点击
 
+### 用户组显示
+
+当设置了`userGroup`属性后，组件会在下拉列表中显示用户组信息。用户组数据格式如下：
+
+```javascript
+const userGroup = [
+  {
+    id: '1',
+    name: '运维人员',
+  },
+  {
+    id: '2',
+    name: '产品人员',
+  },
+];
+```
+
+- 用户组会显示在下拉列表的"用户群组"分组中
+- 用户组数据会展示在最前面
+- 有用户组信息，focus 时就会展示下拉框
+
 ## 开发
 
 ```bash

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blueking/bk-user-selector",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "蓝鲸用户选择器",
   "license": "MIT",
   "author": "Tencent BlueKing",

package/typings/components/me-tag.vue.d.ts

@@ -0,0 +1,39 @@
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * 当前用户ID
+     */
+    currentUserId: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * 是否禁用
+     */
+    isDisabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * 当前用户ID
+     */
+    currentUserId: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * 是否禁用
+     */
+    isDisabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    onClick?: ((...args: any[]) => any) | undefined;
+}, {
+    currentUserId: string;
+    isDisabled: boolean;
+}, {}>;
+export default _default;

package/typings/components/multiple-selector.vue.d.ts

@@ -63,6 +63,23 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    /**
+     * 用户组
+     */
+    userGroup: {
+        type: () => {
+            id: string;
+            name: string;
+        }[];
+        default: () => never[];
+    };
+    /**
+     * 用户组名称
+     */
+    userGroupName: {
+        type: StringConstructor;
+        default: string;
+    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:selectedUsers": (...args: any[]) => void;
     "add-user": (...args: any[]) => void;
@@ -131,19 +148,41 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    /**
+     * 用户组
+     */
+    userGroup: {
+        type: () => {
+            id: string;
+            name: string;
+        }[];
+        default: () => never[];
+    };
+    /**
+     * 用户组名称
+     */
+    userGroupName: {
+        type: StringConstructor;
+        default: string;
+    };
 }>> & {
     "onUpdate:selectedUsers"?: ((...args: any[]) => any) | undefined;
     "onAdd-user"?: ((...args: any[]) => any) | undefined;
     "onRemove-user"?: ((...args: any[]) => any) | undefined;
 }, {
     tenantId: string;
+    currentUserId: string;
     tenants: Record<string, string>;
+    userGroup: {
+        id: string;
+        name: string;
+    }[];
+    userGroupName: string;
     draggable: boolean;
     modelValue: unknown[];
     placeholder: string;
     apiBaseUrl: string;
     selectedUsers: FormattedUser[];
-    currentUserId: string;
     exactSearchKey: string;
 }, {}>;
 export default _default;

package/typings/components/selection-popover.vue.d.ts

@@ -0,0 +1,154 @@
+import { FormattedUser } from '../types';
+declare const _default: import("vue").DefineComponent<{
+    /**
+     * 是否显示下拉菜单
+     */
+    isShow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * 容器宽度
+     */
+    containerWidth: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    /**
+     * 是否加载中
+     */
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * 搜索结果选项
+     */
+    options: {
+        type: () => FormattedUser[];
+        default: () => never[];
+    };
+    /**
+     * 搜索关键词
+     */
+    searchQuery: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * 当前租户ID
+     */
+    tenantId: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * 租户信息映射
+     */
+    tenants: {
+        type: () => Record<string, string>;
+        default: () => {};
+    };
+    /**
+     * 用户组
+     */
+    userGroup: {
+        type: () => {
+            id: string;
+            name: string;
+        }[];
+        default: () => never[];
+    };
+    /**
+     * 用户组名称
+     */
+    userGroupName: {
+        type: StringConstructor;
+        default: string;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "select-user": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * 是否显示下拉菜单
+     */
+    isShow: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * 容器宽度
+     */
+    containerWidth: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    /**
+     * 是否加载中
+     */
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /**
+     * 搜索结果选项
+     */
+    options: {
+        type: () => FormattedUser[];
+        default: () => never[];
+    };
+    /**
+     * 搜索关键词
+     */
+    searchQuery: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * 当前租户ID
+     */
+    tenantId: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * 租户信息映射
+     */
+    tenants: {
+        type: () => Record<string, string>;
+        default: () => {};
+    };
+    /**
+     * 用户组
+     */
+    userGroup: {
+        type: () => {
+            id: string;
+            name: string;
+        }[];
+        default: () => never[];
+    };
+    /**
+     * 用户组名称
+     */
+    userGroupName: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & {
+    "onSelect-user"?: ((...args: any[]) => any) | undefined;
+}, {
+    tenantId: string;
+    isShow: boolean;
+    containerWidth: string | number;
+    loading: boolean;
+    options: FormattedUser[];
+    searchQuery: string;
+    tenants: Record<string, string>;
+    userGroup: {
+        id: string;
+        name: string;
+    }[];
+    userGroupName: string;
+}, {}>;
+export default _default;

package/typings/components/user-selector.vue.d.ts

@@ -8,6 +8,8 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     multiple: boolean;
     currentUserId: string;
     exactSearchKey: string;
+    userGroup: () => never[];
+    userGroupName: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (...args: any[]) => void;
     "update:modelValue": (...args: any[]) => void;
@@ -20,16 +22,23 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     multiple: boolean;
     currentUserId: string;
     exactSearchKey: string;
+    userGroup: () => never[];
+    userGroupName: string;
 }>>> & {
     onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     tenantId: string;
+    currentUserId: string;
+    userGroup: {
+        id: string;
+        name: string;
+    }[];
+    userGroupName: string;
     draggable: boolean;
     modelValue: string | string[];
     placeholder: string;
     apiBaseUrl: string;
-    currentUserId: string;
     exactSearchKey: string;
     multiple: boolean;
 }, {}>;

package/typings/types/index.d.ts

@@ -6,14 +6,18 @@ export interface User {
      * 用户名
      */
     bk_username: string;
-    /**
-     * 数据源类型
-     */
-    data_source_type: string;
     /**
      * 显示名称
      */
     display_name: string;
+    /**
+     * 所属租户ID
+     */
+    owner_tenant_id: string;
+    /**
+     * 数据源类型
+     */
+    data_source_type: string;
     /**
      * 全名
      */
@@ -22,10 +26,6 @@ export interface User {
      * 登录名, 对应内网企微英文名
      */
     login_name: string;
-    /**
-     * 所属租户ID
-     */
-    owner_tenant_id: string;
 }
 /**
  * 格式化后的用户信息
@@ -62,9 +62,9 @@ export interface Tenant {
     name: string;
 }
 /**
- * 用户选择器属性
+ * 基础选择器属性
  */
-export interface UserSelectorProps {
+interface BaseSelectorProps {
     /**
      * 接口基础URL
      */
@@ -77,6 +77,30 @@ export interface UserSelectorProps {
      * 占位文字
      */
     placeholder?: string;
+    /**
+     * 本人ID
+     */
+    currentUserId?: string;
+    /**
+     * 精确查找key
+     */
+    exactSearchKey?: string;
+    /**
+     * 用户组配置
+     */
+    userGroup?: {
+        id: string;
+        name: string;
+    }[];
+    /**
+     * 用户组名称
+     */
+    userGroupName?: string;
+}
+/**
+ * 用户选择器属性
+ */
+export interface UserSelectorProps extends BaseSelectorProps {
     /**
      * 默认选中的用户(单选时为字符串，多选时为数组)
      */
@@ -89,45 +113,18 @@ export interface UserSelectorProps {
      * 是否多选
      */
     multiple?: boolean;
-    /**
-     * 本人ID
-     */
-    currentUserId?: string;
-    /**
-     * 精确查找key, 默认是 bk_username, 可选值为 bk_username、login_name、full_name, 多个以逗号分隔
-     */
-    exactSearchKey?: string;
 }
 /**
  * 单选模式属性
  */
-export interface SingleSelectorProps {
+export interface SingleSelectorProps extends BaseSelectorProps {
     /**
      * 选中的用户ID
      */
     modelValue?: string;
-    /**
-     * 占位文字
-     */
-    placeholder?: string;
-    /**
-     * 接口基础URL
-     */
-    apiBaseUrl?: string;
-    /**
-     * 租户ID
-     */
-    tenantId?: string;
     /**
      * 租户信息映射
      */
     tenants: Record<string, string>;
-    /**
-     * 本人ID
-     */
-    currentUserId?: string;
-    /**
-     * 精确查找key
-     */
-    exactSearchKey: string;
 }
+export {};