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

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

@@ -1,11 +1,37 @@
+import { FormattedUser, RenderFunction, TenantMap, UserGroupConfig } from '../types';
 /**
- * 用户选择器下拉菜单组件
+ * 组件属性
  */
-import { createVNode, VNode } from 'vue';
-import { FormattedUser } from '../types';
+interface SelectionPopoverProps {
+    /** 容器宽度 */
+    containerWidth?: number | string;
+    /** 无匹配人员时的提示文本 */
+    emptyText?: string;
+    /** 是否显示下拉菜单 */
+    isShow?: boolean;
+    /** 是否加载中 */
+    loading?: boolean;
+    /** 搜索结果选项 */
+    options?: FormattedUser[];
+    /** 渲染列表项 */
+    renderListItem?: RenderFunction;
+    /** 搜索关键词 */
+    searchQuery?: string;
+    /** 当前租户ID */
+    tenantId?: string;
+    /** 租户信息映射 */
+    tenants?: TenantMap;
+    /** 用户组 */
+    userGroup?: UserGroupConfig[];
+    /** 用户组名称 */
+    userGroupName?: string;
+}
 declare var __VLS_20: {};
 declare var __VLS_inheritedAttrs: {};
-declare const __VLS_refs: {};
+declare const __VLS_refs: {
+    contentContainerRef: any;
+    slotContainerRef: any;
+};
 declare const __VLS_templateResult: {
     slots: {
         default?(_: typeof __VLS_20): any;
@@ -14,205 +40,24 @@ declare const __VLS_templateResult: {
     attrs: Partial<typeof __VLS_inheritedAttrs>;
 };
 type __VLS_Slots = typeof __VLS_templateResult['slots'];
-declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    /**
-     * 是否显示下拉菜单
-     */
-    isShow: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    /**
-     * 容器宽度
-     */
-    containerWidth: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: string;
-    };
-    /**
-     * popover crossAxis 偏移量
-     */
-    crossAxisOffset: {
-        type: NumberConstructor;
-        default: number;
-    };
-    /**
-     * 是否加载中
-     */
-    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: () => {
-            hidden?: boolean;
-            id: string;
-            name: string;
-        }[];
-        default: () => never[];
-    };
-    /**
-     * 用户组名称
-     */
-    userGroupName: {
-        type: StringConstructor;
-        default: string;
-    };
-    /**
-     * 无匹配人员时的提示文本
-     */
-    emptyText: {
-        type: StringConstructor;
-        default: string;
-    };
-    /**
-     * 渲染列表项
-     */
-    renderListItem: {
-        type: () => (h: typeof createVNode, item: FormattedUser) => VNode;
-    };
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "select-user": (...args: any[]) => void;
-    "click-outside": (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    /**
-     * 是否显示下拉菜单
-     */
-    isShow: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    /**
-     * 容器宽度
-     */
-    containerWidth: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: string;
-    };
-    /**
-     * popover crossAxis 偏移量
-     */
-    crossAxisOffset: {
-        type: NumberConstructor;
-        default: number;
-    };
-    /**
-     * 是否加载中
-     */
-    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: () => {
-            hidden?: boolean;
-            id: string;
-            name: string;
-        }[];
-        default: () => never[];
-    };
-    /**
-     * 用户组名称
-     */
-    userGroupName: {
-        type: StringConstructor;
-        default: string;
-    };
-    /**
-     * 无匹配人员时的提示文本
-     */
-    emptyText: {
-        type: StringConstructor;
-        default: string;
-    };
-    /**
-     * 渲染列表项
-     */
-    renderListItem: {
-        type: () => (h: typeof createVNode, item: FormattedUser) => VNode;
-    };
-}>> & Readonly<{
-    "onSelect-user"?: ((...args: any[]) => any) | undefined;
-    "onClick-outside"?: ((...args: any[]) => any) | undefined;
+declare const __VLS_component: import("vue").DefineComponent<SelectionPopoverProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "click-outside": (event: MouseEvent) => any;
+    "select-user": (user: FormattedUser) => any;
+}, string, import("vue").PublicProps, Readonly<SelectionPopoverProps> & Readonly<{
+    "onClick-outside"?: ((event: MouseEvent) => any) | undefined;
+    "onSelect-user"?: ((user: FormattedUser) => any) | undefined;
 }>, {
+    userGroup: UserGroupConfig[];
     tenantId: string;
-    tenants: Record<string, string>;
+    searchQuery: string;
+    tenants: TenantMap;
+    containerWidth: number | string;
+    emptyText: string;
     isShow: boolean;
-    containerWidth: string | number;
-    crossAxisOffset: number;
     loading: boolean;
     options: FormattedUser[];
-    searchQuery: string;
-    userGroup: {
-        hidden?: boolean;
-        id: string;
-        name: string;
-    }[];
     userGroupName: string;
-    emptyText: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_PickRefsExpose<T> = T extends object ? {

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

@@ -1,43 +1,35 @@
-import { UserSelectorProps } from '../types';
+import { FormattedUser, UserSelectorProps } from '../types';
 declare const _default: import("vue").DefineComponent<UserSelectorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    blur: (...args: any[]) => void;
-    change: (...args: any[]) => void;
-    focus: (...args: any[]) => void;
-    dragStart: (...args: any[]) => void;
-    dragEnd: (...args: any[]) => void;
-    "update:modelValue": (...args: any[]) => void;
+    blur: () => any;
+    change: (user: FormattedUser | FormattedUser[] | null) => any;
+    focus: () => any;
+    dragEnd: (event: Sortable.SortableEvent) => any;
+    dragStart: (event: Sortable.SortableEvent) => any;
+    "update:modelValue": (value: string | string[]) => any;
 }, string, import("vue").PublicProps, Readonly<UserSelectorProps> & Readonly<{
-    onBlur?: ((...args: any[]) => any) | undefined;
-    onChange?: ((...args: any[]) => any) | undefined;
-    onFocus?: ((...args: any[]) => any) | undefined;
-    onDragStart?: ((...args: any[]) => any) | undefined;
-    onDragEnd?: ((...args: any[]) => any) | undefined;
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onBlur?: (() => any) | undefined;
+    onChange?: ((user: FormattedUser | FormattedUser[] | null) => any) | undefined;
+    onFocus?: (() => any) | undefined;
+    onDragEnd?: ((event: Sortable.SortableEvent) => any) | undefined;
+    onDragStart?: ((event: Sortable.SortableEvent) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | string[]) => any) | undefined;
 }>, {
-    tenantId: string;
+    userGroup: import("../types").UserGroupConfig[];
     apiBaseUrl: string;
+    tenantId: string;
     enableMultiTenantMode: boolean;
     exactSearchKey: string;
     currentUserId: string;
+    allowCreate: boolean;
+    freePaste: boolean;
+    maxCount: number;
+    excludeUserIds: string[];
     disabled: boolean;
-    userGroup: {
-        hidden
-        /**
-         * 蓝鲸用户选择器组件
-         * @module components/UserSelector
-         */
-        ?: boolean;
-        id: string;
-        name: string;
-    }[];
-    userGroupName: string;
     emptyText: string;
+    userGroupName: string;
     draggable: boolean;
-    freePaste: boolean;
     modelValue: string | string[];
-    allowCreate: boolean;
-    excludeUserIds: string[];
-    placeholder: string;
     multiple: boolean;
+    placeholder: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/typings/constants/index.d.ts

@@ -0,0 +1,25 @@
+/**
+ * 常量定义
+ * @module constants
+ */
+/** 为输入框和更多标签预留的空间 */
+export declare const RESERVED_SPACE_FOR_INPUT = 100;
+/** 搜索防抖延迟时间（毫秒） */
+export declare const SEARCH_DEBOUNCE_DELAY = 300;
+/** 默认精确搜索字段 */
+export declare const DEFAULT_EXACT_SEARCH_KEY = "bk_username";
+/** 用户类型 */
+export declare const USER_TYPE: {
+    /** 普通用户 */
+    readonly USER: "user";
+    /** 虚拟账号 */
+    readonly VIRTUAL: "virtual";
+    /** 自定义用户 */
+    readonly CUSTOM: "custom";
+    /** 用户群组 */
+    readonly USER_GROUP: "userGroup";
+};
+/** API 请求超时时间（毫秒） */
+export declare const API_TIMEOUT: number;
+/** 默认分页大小 */
+export declare const DEFAULT_PAGE_SIZE = 100;

package/typings/hooks/use-current-user.d.ts

@@ -0,0 +1,30 @@
+/**
+ * 当前用户处理 Hook
+ * @module hooks/useCurrentUser
+ */
+import { ref } from 'vue';
+import type { FormattedUser } from '../types';
+export interface UseCurrentUserOptions {
+    /** API 基础 URL */
+    apiBaseUrl: string;
+    /** 当前用户 ID */
+    currentUserId: string;
+    /** 是否启用多租户模式 */
+    enableMultiTenantMode?: boolean;
+    /** 精确搜索字段 */
+    exactSearchKey?: string;
+    /** 租户 ID */
+    tenantId: string;
+}
+export interface UseCurrentUserReturn {
+    /** 加载状态 */
+    loading: ReturnType<typeof ref<boolean>>;
+    /** 获取当前用户信息 */
+    fetchCurrentUser: () => Promise<FormattedUser | null>;
+}
+/**
+ * 当前用户处理 Hook
+ * @param options - 配置选项
+ * @returns 当前用户相关方法
+ */
+export declare const useCurrentUser: (options: UseCurrentUserOptions) => UseCurrentUserReturn;

package/typings/hooks/use-focus-state.d.ts

@@ -0,0 +1,48 @@
+import { type Ref } from 'vue';
+export interface UseFocusStateOptions {
+    /**
+     * 当前激活的标签索引
+     */
+    activeTagIndex: Ref<number>;
+    /**
+     * 容器引用
+     */
+    containerRef: Ref<HTMLDivElement | null>;
+    /**
+     * 最后一个输入框引用
+     */
+    lastInputRef: Ref<HTMLInputElement | null>;
+    /**
+     * 用户群组长度
+     */
+    userGroupLength: number;
+    /**
+     * 失焦事件回调
+     */
+    onBlur: () => void;
+    /**
+     * 清除搜索回调
+     */
+    onClearSearch: () => void;
+    /**
+     * 聚焦事件回调
+     */
+    onFocus: () => void;
+    /**
+     * 可见用户计算回调
+     */
+    onScheduleVisibleUsersCalculation: () => void;
+}
+/**
+ * 聚焦状态管理 hook
+ */
+export declare function useFocusState(options: UseFocusStateOptions): {
+    isFocused: Ref<boolean, boolean>;
+    showDropdown: Ref<boolean, boolean>;
+    handleFocus: () => void;
+    handleClickOutside: (event: MouseEvent) => void;
+    handleContainerClick: () => void;
+    handleInputFocus: () => void;
+    setShowDropdown: (value: boolean) => void;
+    setIsFocused: (value: boolean) => void;
+};

package/typings/hooks/use-input-handler.d.ts

@@ -0,0 +1,44 @@
+/**
+ * 输入处理公共逻辑 Hook
+ * @module hooks/useInputHandler
+ */
+import { type Ref } from 'vue';
+import type { FormattedUser } from '../types';
+export interface UseInputHandlerOptions {
+    /** 是否允许创建自定义用户 */
+    allowCreate?: boolean;
+    /** API 基础 URL */
+    apiBaseUrl: string;
+    /** 是否启用多租户模式 */
+    enableMultiTenantMode?: boolean;
+    /** 是否允许自由粘贴 */
+    freePaste?: boolean;
+    /** 最大可选数量（0 表示不限制） */
+    maxCount?: number;
+    /** 搜索关键词 */
+    searchQuery: Ref<string>;
+    /** 已选用户列表（用于去重） */
+    selectedUsers: Ref<FormattedUser[]>;
+    /** 租户 ID */
+    tenantId: string;
+    /** 添加用户回调 */
+    onAddUser: (user: FormattedUser) => void;
+    /** 批量添加用户回调（用于粘贴） */
+    onBatchAddUsers?: (users: FormattedUser[]) => void;
+}
+export interface UseInputHandlerReturn {
+    /** 粘贴处理中状态 */
+    isPasting: Ref<boolean>;
+    /** 处理 Enter 键创建自定义用户 */
+    handleEnterCreate: (event: KeyboardEvent) => void;
+    /** 处理粘贴事件 */
+    handlePaste: (event: ClipboardEvent) => Promise<void>;
+    /** 解析粘贴文本为用户列表 */
+    parsePastedText: (text: string) => string[];
+}
+/**
+ * 输入处理公共逻辑 Hook
+ * @param options - 配置选项
+ * @returns 输入处理相关方法
+ */
+export declare const useInputHandler: (options: UseInputHandlerOptions) => UseInputHandlerReturn;

package/typings/hooks/use-resize-observer.d.ts

@@ -0,0 +1,17 @@
+/**
+ * ResizeObserver Hook
+ * @module hooks/useResizeObserver
+ */
+import { type Ref } from 'vue';
+export interface UseResizeObserverOptions {
+    /** 是否立即执行回调 */
+    immediate?: boolean;
+}
+/**
+ * 监听元素大小变化的 Hook
+ * @param target - 目标元素引用
+ * @param callback - 大小变化时的回调函数
+ * @param options - 配置选项
+ * @returns 停止观察的函数
+ */
+export declare const useResizeObserver: (target: Ref<HTMLElement | null | undefined>, callback: (entry: ResizeObserverEntry) => void, options?: UseResizeObserverOptions) => (() => void);

package/typings/hooks/use-selected-users.d.ts

@@ -0,0 +1,78 @@
+import type { FormattedUser, UserGroupConfig } from '../types';
+export interface UseSelectedUsersOptions {
+    /**
+     * 是否允许创建
+     */
+    allowCreate: boolean;
+    /**
+     * 接口基础URL
+     */
+    apiBaseUrl: string;
+    /**
+     * 是否启用多租户模式
+     */
+    enableMultiTenantMode: boolean;
+    /**
+     * 模型值
+     */
+    modelValue: string | string[];
+    /**
+     * 是否多选
+     */
+    multiple: boolean;
+    /**
+     * 租户ID
+     */
+    tenantId: string;
+    /**
+     * 用户群组
+     */
+    userGroup: UserGroupConfig[];
+    /**
+     * 变更回调
+     */
+    onChange: (user: FormattedUser | FormattedUser[] | null) => void;
+    /**
+     * 更新模型值回调
+     */
+    onUpdateModelValue: (value: string | string[]) => void;
+}
+/**
+ * 选中用户状态管理 hook
+ */
+export declare function useSelectedUsers(options: UseSelectedUsersOptions): {
+    selectedUsers: import("vue").Ref<{
+        bk_username?: string | undefined;
+        data_source_type?: string | undefined;
+        display_name?: string | undefined;
+        full_name?: string | undefined;
+        hidden?: boolean | undefined;
+        id: string;
+        login_name?: string | undefined;
+        name: string;
+        owner_tenant_id?: string | undefined;
+        tenantId: string;
+        type?: import("../types").UserType | undefined;
+        username?: string | undefined;
+    }[], FormattedUser[] | {
+        bk_username?: string | undefined;
+        data_source_type?: string | undefined;
+        display_name?: string | undefined;
+        full_name?: string | undefined;
+        hidden?: boolean | undefined;
+        id: string;
+        login_name?: string | undefined;
+        name: string;
+        owner_tenant_id?: string | undefined;
+        tenantId: string;
+        type?: import("../types").UserType | undefined;
+        username?: string | undefined;
+    }[]>;
+    selectedUserIds: import("vue").ComputedRef<string[]>;
+    activeTagIndex: import("vue").Ref<number, number>;
+    modelValueIds: import("vue").ComputedRef<string[]>;
+    initSelectedUsers: () => Promise<void>;
+    updateSelectedUsers: (users: FormattedUser[]) => void;
+    addUser: (user: FormattedUser) => void;
+    removeUser: (user: FormattedUser) => void;
+};

package/typings/hooks/use-sortable.d.ts

@@ -0,0 +1,41 @@
+import { type Ref } from 'vue';
+import Sortable from 'sortablejs/Sortable.js';
+import type { FormattedUser } from '../types';
+export interface UseSortableOptions {
+    /**
+     * 是否可拖拽
+     */
+    draggable: boolean;
+    /**
+     * 是否多选
+     */
+    multiple: boolean;
+    /**
+     * 已选用户列表
+     */
+    selectedUsers: Ref<FormattedUser[]>;
+    /**
+     * 排序容器引用
+     */
+    sortableContainerRef: Ref<HTMLDivElement | null>;
+    /**
+     * 拖拽结束回调
+     */
+    onDragEnd: (event: Sortable.SortableEvent) => void;
+    /**
+     * 拖拽开始回调
+     */
+    onDragStart: (event: Sortable.SortableEvent) => void;
+    /**
+     * 更新选中用户回调
+     */
+    onUpdateSelectedUsers: (users: FormattedUser[]) => void;
+}
+/**
+ * 拖拽排序 hook
+ */
+export declare function useSortable(options: UseSortableOptions): {
+    sortableInstance: any;
+    initSortable: () => void;
+    destroySortable: () => void;
+};

package/typings/hooks/use-tenant-data.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 租户数据处理 Hook
+ * @module hooks/useTenantData
+ */
+import { type Ref } from 'vue';
+/**
+ * 使用租户数据的Hook
+ * @param apiBaseUrl - API基础URL
+ * @param tenantId - 租户ID
+ * @param enableMultiTenantMode - 是否启用多租户模式
+ * @returns 租户数据和加载状态
+ */
+export declare const useTenantData: (apiBaseUrl: string, tenantId: string, enableMultiTenantMode?: boolean) => {
+    tenants: Ref<Record<string, string>, Record<string, string>>;
+    loading: Ref<boolean, boolean>;
+    fetchTenants: () => Promise<void>;
+};

package/typings/hooks/use-user-search.d.ts

@@ -0,0 +1,38 @@
+/**
+ * 用户搜索 Hook
+ * @module hooks/useUserSearch
+ */
+import { type Ref } from 'vue';
+import type { FormattedUser } from '../types';
+export interface UseUserSearchOptions {
+    /** API 基础 URL */
+    apiBaseUrl: string;
+    /** 防抖延迟时间（毫秒） */
+    debounceDelay?: number;
+    /** 是否启用多租户模式 */
+    enableMultiTenantMode?: boolean;
+    /** 租户 ID */
+    tenantId: string;
+}
+export interface UseUserSearchReturn {
+    /** 加载状态 */
+    loading: Ref<boolean>;
+    /** 搜索关键词 */
+    searchQuery: Ref<string>;
+    /** 搜索结果 */
+    searchResults: Ref<FormattedUser[]>;
+    /** 清空搜索 */
+    clearSearch: () => void;
+    /** 处理输入变化（带防抖） */
+    handleSearchInput: (value: string) => void;
+    /** 执行搜索 */
+    performSearch: (keyword: string) => Promise<void>;
+}
+/**
+ * 使用用户搜索的Hook
+ * @param apiBaseUrl - API基础URL
+ * @param tenantId - 租户ID
+ * @param enableMultiTenantMode - 是否启用多租户模式
+ * @returns 用户搜索相关状态和方法
+ */
+export declare const useUserSearch: (apiBaseUrl: string, tenantId: string, enableMultiTenantMode?: boolean) => UseUserSearchReturn;