@jari-ace/element-plus-component 0.2.0 → 0.2.2

package/dist/components/userPicker/src/UserPicker.vue.js

@@ -1,4 +1,4 @@
-import { ElButton, ElIcon, ElInput, ElPopover, ElText, ElSpace } from "element-plus";
+import { ElButton, ElIcon, ElInput, ElPopover, ElText, ElSpace, } from "element-plus";
 import { computed, ref, shallowRef, watch } from "vue";
 import { Delete, Finished, Notebook, Plus, Search, Setting, StarFilled } from "@element-plus/icons-vue";
 import { createAxiosWithoutCache, QUser, useLoginUser, useUserApi, useUserQueryBuilder } from "@jari-ace/app-bolts";
@@ -11,44 +11,54 @@ import { JaScrollbar } from "../../scrollbar";
 import CustomGroupManager from "./CustomGroupManager.vue";
 import JaUserList from "./JaUserList.vue";
 import { useRealms } from '../../../hooks/useRealms';
-const props = defineProps({
-    /**
-     * 可选择用户的用户域ID
-     */
-    realmId: { type: String, required: false },
-    /**
-     * 弹出下拉选框的快捷键
-     */
-    shortcut: { type: String, required: false, default: "Ctrl+Alt+U" },
-    /**
-     * 是否多选模式
-     */
-    multiple: { type: Boolean, required: false, default: false },
-    /**
-     * 密级过滤
-     */
-    classificationLevel: { type: Number, required: false, default: false },
-    /**
-     * 自定义筛选过滤条件，可以在此回调方法内使用qUser参数构造自定义的查询条件。例如 qUser => qUser.fullName.startWith('王')
-     */
-    customFilter: {
-        type: Function,
-        required: false
-    },
-    /**
-     * 最多显示多少已选中的用户数量
-     */
-    maxShowCount: { type: Number, required: false, default: 20 },
-    /**
-     * 高度，默认100%
-     */
-    height: { type: [Number, String], required: false, default: '100%' },
-    /**
-     * 最大高度
-     */
-    maxHeight: { type: [Number, String], required: false },
+const props = withDefaults(defineProps(), {
+    trigger: 'hover',
+    shortcut: "Ctrl+Alt+U",
+    multiple: false,
+    classificationLevel: 0,
+    maxShowCount: 20,
+    maxHeight: '100%',
+    showUserTag: true,
 });
+// const props = defineProps({
+/**
+ * 可选择用户的用户域ID
+ */
+// realmId: {type: String, required: false},
+/**
+ * 弹出下拉选框的快捷键
+ */
+// shortcut: {type: String, required: false, default: "Ctrl+Alt+U"},
+/**
+ * 是否多选模式
+ */
+// multiple: {type: Boolean, required: false, default: false},
+/**
+ * 密级过滤
+ */
+// classificationLevel: {type: Number,  required: false, default: 0},
+/**
+ * 自定义筛选过滤条件，可以在此回调方法内使用qUser参数构造自定义的查询条件。例如 qUser => qUser.fullName.startWith('王')
+ */
+// customFilter: {
+//     type: Function as PropType<(qUser: InstanceType<typeof QUser>) => BooleanResultExpression>,
+//     required: false
+// },
+/**
+ * 最多显示多少已选中的用户数量
+ */
+// maxShowCount: {type: Number, required: false, default: 20},
+/**
+ * 高度，默认100%
+ */
+// height: {type: [Number, String], required: false, default: '100%'},
+/**
+ * 最大高度
+ */
+// maxHeight: {type: [Number, String], required: false},
+// })
 const localRealmId = ref();
+const bookmarkDropdown = ref();
 async function loadRealmId() {
     if (props.realmId) {
         localRealmId.value = props.realmId;
@@ -100,7 +110,15 @@ function switchUserSelect(u) {
         }
     }
     else {
-        selectedUsers.value = u;
+        if (Array.isArray(selectedUsers.value)) {
+            throw new Error("UserPicker组件设置为单选模式时，v-model必须绑定UserReference对象或者null");
+        }
+        if (selectedUsers.value !== null && u.id === selectedUsers.value.id) {
+            selectedUsers.value = null;
+        }
+        else {
+            selectedUsers.value = u;
+        }
     }
 }
 function onPopoverShow() {
@@ -123,6 +141,7 @@ function onPopoverShow() {
     }, 300);
 }
 function onPopoverHide() {
+    popoverVisible.value = false;
     btn.value?.$el.focus();
 }
 function onSaveToCustomGroupClick() {
@@ -188,11 +207,23 @@ function showUserSelectDialog() {
     dialogUserSelector.value?.show();
     popoverVisible.value = false;
 }
+function handleMouseOver() {
+    popoverVisible.value = true;
+}
 const selectedUsersForRender = computed(() => selectedForBinding.value.slice(0, props.maxShowCount));
 watch(() => props.classificationLevel, () => {
     queryParams.value.classificationLevel = props.classificationLevel;
 });
 debugger; /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_withDefaultsArg = (function (t) { return t; })({
+    trigger: 'hover',
+    shortcut: "Ctrl+Alt+U",
+    multiple: false,
+    classificationLevel: 0,
+    maxShowCount: 20,
+    maxHeight: '100%',
+    showUserTag: true,
+});
 const __VLS_defaults = {};
 const __VLS_modelEmit = defineEmits();
 const __VLS_ctx = {};
@@ -225,17 +256,19 @@ const __VLS_5 = __VLS_asFunctionalComponent(__VLS_4, new __VLS_4({
     ...{ 'onShow': {} },
     ...{ 'onHide': {} },
     ref: "bookmarkDropdown",
+    visible: (__VLS_ctx.popoverVisible),
     width: "auto",
     teleported: true,
-    visible: (__VLS_ctx.popoverVisible),
+    trigger: (props.trigger),
 }));
 const __VLS_6 = __VLS_5({
     ...{ 'onShow': {} },
     ...{ 'onHide': {} },
     ref: "bookmarkDropdown",
+    visible: (__VLS_ctx.popoverVisible),
     width: "auto",
     teleported: true,
-    visible: (__VLS_ctx.popoverVisible),
+    trigger: (props.trigger),
 }, ...__VLS_functionalComponentArgsRest(__VLS_5));
 let __VLS_8;
 let __VLS_9;
@@ -251,34 +284,40 @@ var __VLS_13 = {};
 __VLS_7.slots.default;
 {
     const { reference: __VLS_thisSlot } = __VLS_7.slots;
-    const __VLS_15 = {}.ElButton;
-    /** @type {[typeof __VLS_components.ElButton, typeof __VLS_components.elButton, typeof __VLS_components.ElButton, typeof __VLS_components.elButton, ]} */ ;
-    // @ts-ignore
-    const __VLS_16 = __VLS_asFunctionalComponent(__VLS_15, new __VLS_15({
-        ...{ 'onMouseover': {} },
-        circle: true,
-        icon: (__VLS_ctx.Plus),
-        size: ('small'),
-        ref: "btn",
-    }));
-    const __VLS_17 = __VLS_16({
-        ...{ 'onMouseover': {} },
-        circle: true,
-        icon: (__VLS_ctx.Plus),
-        size: ('small'),
-        ref: "btn",
-    }, ...__VLS_functionalComponentArgsRest(__VLS_16));
-    let __VLS_19;
-    let __VLS_20;
-    let __VLS_21;
-    const __VLS_22 = {
-        onMouseover: (...[$event]) => {
-            __VLS_ctx.popoverVisible = true;
-        }
-    };
-    /** @type {typeof __VLS_ctx.btn} */ ;
-    var __VLS_23 = {};
-    var __VLS_18;
+    __VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({
+        ...{ style: {} },
+    });
+    if (__VLS_ctx.$slots.default) {
+        var __VLS_15 = {};
+    }
+    else {
+        const __VLS_17 = {}.ElButton;
+        /** @type {[typeof __VLS_components.ElButton, typeof __VLS_components.elButton, typeof __VLS_components.ElButton, typeof __VLS_components.elButton, ]} */ ;
+        // @ts-ignore
+        const __VLS_18 = __VLS_asFunctionalComponent(__VLS_17, new __VLS_17({
+            ...{ 'onMouseover': {} },
+            circle: true,
+            icon: (__VLS_ctx.Plus),
+            size: ('small'),
+            ref: "btn",
+        }));
+        const __VLS_19 = __VLS_18({
+            ...{ 'onMouseover': {} },
+            circle: true,
+            icon: (__VLS_ctx.Plus),
+            size: ('small'),
+            ref: "btn",
+        }, ...__VLS_functionalComponentArgsRest(__VLS_18));
+        let __VLS_21;
+        let __VLS_22;
+        let __VLS_23;
+        const __VLS_24 = {
+            onMouseover: (__VLS_ctx.handleMouseOver)
+        };
+        /** @type {typeof __VLS_ctx.btn} */ ;
+        var __VLS_25 = {};
+        var __VLS_20;
+    }
 }
 {
     const { default: __VLS_thisSlot } = __VLS_7.slots;
@@ -288,20 +327,20 @@ __VLS_7.slots.default;
     __VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({
         ...{ style: {} },
     });
-    const __VLS_25 = {}.ElSpace;
+    const __VLS_27 = {}.ElSpace;
     /** @type {[typeof __VLS_components.ElSpace, typeof __VLS_components.elSpace, typeof __VLS_components.ElSpace, typeof __VLS_components.elSpace, ]} */ ;
     // @ts-ignore
-    const __VLS_26 = __VLS_asFunctionalComponent(__VLS_25, new __VLS_25({
+    const __VLS_28 = __VLS_asFunctionalComponent(__VLS_27, new __VLS_27({
         ...{ style: {} },
     }));
-    const __VLS_27 = __VLS_26({
+    const __VLS_29 = __VLS_28({
         ...{ style: {} },
-    }, ...__VLS_functionalComponentArgsRest(__VLS_26));
-    __VLS_28.slots.default;
-    const __VLS_29 = {}.JaButton;
+    }, ...__VLS_functionalComponentArgsRest(__VLS_28));
+    __VLS_30.slots.default;
+    const __VLS_31 = {}.JaButton;
     /** @type {[typeof __VLS_components.JaButton, typeof __VLS_components.jaButton, typeof __VLS_components.JaButton, typeof __VLS_components.jaButton, ]} */ ;
     // @ts-ignore
-    const __VLS_30 = __VLS_asFunctionalComponent(__VLS_29, new __VLS_29({
+    const __VLS_32 = __VLS_asFunctionalComponent(__VLS_31, new __VLS_31({
         ...{ 'onClick': {} },
         circle: true,
         size: "small",
@@ -311,7 +350,7 @@ __VLS_7.slots.default;
         shortcut: "Ctrl+Alt+I",
         icon: (__VLS_ctx.Notebook),
     }));
-    const __VLS_31 = __VLS_30({
+    const __VLS_33 = __VLS_32({
         ...{ 'onClick': {} },
         circle: true,
         size: "small",
@@ -320,18 +359,18 @@ __VLS_7.slots.default;
         tooltip: "对话框筛选(大批量选择)",
         shortcut: "Ctrl+Alt+I",
         icon: (__VLS_ctx.Notebook),
-    }, ...__VLS_functionalComponentArgsRest(__VLS_30));
-    let __VLS_33;
-    let __VLS_34;
+    }, ...__VLS_functionalComponentArgsRest(__VLS_32));
     let __VLS_35;
-    const __VLS_36 = {
+    let __VLS_36;
+    let __VLS_37;
+    const __VLS_38 = {
         onClick: (__VLS_ctx.showUserSelectDialog)
     };
-    var __VLS_32;
-    const __VLS_37 = {}.JaButton;
+    var __VLS_34;
+    const __VLS_39 = {}.JaButton;
     /** @type {[typeof __VLS_components.JaButton, typeof __VLS_components.jaButton, typeof __VLS_components.JaButton, typeof __VLS_components.jaButton, ]} */ ;
     // @ts-ignore
-    const __VLS_38 = __VLS_asFunctionalComponent(__VLS_37, new __VLS_37({
+    const __VLS_40 = __VLS_asFunctionalComponent(__VLS_39, new __VLS_39({
         ...{ 'onClick': {} },
         circle: true,
         size: "small",
@@ -341,7 +380,7 @@ __VLS_7.slots.default;
         tooltip: "清空选择",
         shortcut: "Alt+C",
     }));
-    const __VLS_39 = __VLS_38({
+    const __VLS_41 = __VLS_40({
         ...{ 'onClick': {} },
         circle: true,
         size: "small",
@@ -350,19 +389,19 @@ __VLS_7.slots.default;
         icon: (__VLS_ctx.Delete),
         tooltip: "清空选择",
         shortcut: "Alt+C",
-    }, ...__VLS_functionalComponentArgsRest(__VLS_38));
-    let __VLS_41;
-    let __VLS_42;
+    }, ...__VLS_functionalComponentArgsRest(__VLS_40));
     let __VLS_43;
-    const __VLS_44 = {
+    let __VLS_44;
+    let __VLS_45;
+    const __VLS_46 = {
         onClick: (__VLS_ctx.clearSelection)
     };
-    var __VLS_40;
+    var __VLS_42;
     if (props.multiple) {
-        const __VLS_45 = {}.JaButton;
+        const __VLS_47 = {}.JaButton;
         /** @type {[typeof __VLS_components.JaButton, typeof __VLS_components.jaButton, typeof __VLS_components.JaButton, typeof __VLS_components.jaButton, ]} */ ;
         // @ts-ignore
-        const __VLS_46 = __VLS_asFunctionalComponent(__VLS_45, new __VLS_45({
+        const __VLS_48 = __VLS_asFunctionalComponent(__VLS_47, new __VLS_47({
             ...{ 'onClick': {} },
             circle: true,
             size: "small",
@@ -372,7 +411,7 @@ __VLS_7.slots.default;
             tooltip: "全选(已加载的数据)",
             shortcut: "Ctrl+A",
         }));
-        const __VLS_47 = __VLS_46({
+        const __VLS_49 = __VLS_48({
             ...{ 'onClick': {} },
             circle: true,
             size: "small",
@@ -381,19 +420,19 @@ __VLS_7.slots.default;
             icon: (__VLS_ctx.Finished),
             tooltip: "全选(已加载的数据)",
             shortcut: "Ctrl+A",
-        }, ...__VLS_functionalComponentArgsRest(__VLS_46));
-        let __VLS_49;
-        let __VLS_50;
+        }, ...__VLS_functionalComponentArgsRest(__VLS_48));
         let __VLS_51;
-        const __VLS_52 = {
+        let __VLS_52;
+        let __VLS_53;
+        const __VLS_54 = {
             onClick: (__VLS_ctx.selectAll)
         };
-        var __VLS_48;
+        var __VLS_50;
     }
-    const __VLS_53 = {}.JaButton;
+    const __VLS_55 = {}.JaButton;
     /** @type {[typeof __VLS_components.JaButton, typeof __VLS_components.jaButton, typeof __VLS_components.JaButton, typeof __VLS_components.jaButton, ]} */ ;
     // @ts-ignore
-    const __VLS_54 = __VLS_asFunctionalComponent(__VLS_53, new __VLS_53({
+    const __VLS_56 = __VLS_asFunctionalComponent(__VLS_55, new __VLS_55({
         ...{ 'onClick': {} },
         circle: true,
         size: "small",
@@ -402,7 +441,7 @@ __VLS_7.slots.default;
         plain: true,
         tooltip: "将已选中用户保存为自定义组，方便以后选择使用",
     }));
-    const __VLS_55 = __VLS_54({
+    const __VLS_57 = __VLS_56({
         ...{ 'onClick': {} },
         circle: true,
         size: "small",
@@ -410,23 +449,23 @@ __VLS_7.slots.default;
         icon: (__VLS_ctx.Setting),
         plain: true,
         tooltip: "将已选中用户保存为自定义组，方便以后选择使用",
-    }, ...__VLS_functionalComponentArgsRest(__VLS_54));
-    let __VLS_57;
-    let __VLS_58;
+    }, ...__VLS_functionalComponentArgsRest(__VLS_56));
     let __VLS_59;
-    const __VLS_60 = {
+    let __VLS_60;
+    let __VLS_61;
+    const __VLS_62 = {
         onClick: (__VLS_ctx.onSaveToCustomGroupClick)
     };
-    var __VLS_56;
-    var __VLS_28;
+    var __VLS_58;
+    var __VLS_30;
     __VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({
         ...{ style: {} },
     });
     (props.shortcut);
-    const __VLS_61 = {}.ElInput;
+    const __VLS_63 = {}.ElInput;
     /** @type {[typeof __VLS_components.ElInput, typeof __VLS_components.elInput, typeof __VLS_components.ElInput, typeof __VLS_components.elInput, ]} */ ;
     // @ts-ignore
-    const __VLS_62 = __VLS_asFunctionalComponent(__VLS_61, new __VLS_61({
+    const __VLS_64 = __VLS_asFunctionalComponent(__VLS_63, new __VLS_63({
         ...{ 'onKeydown': {} },
         ...{ 'onKeydown': {} },
         ...{ 'onKeydown': {} },
@@ -436,7 +475,7 @@ __VLS_7.slots.default;
         placeholder: "请输入拼音名、姓名或手机号查询",
         autocomplete: "off",
     }));
-    const __VLS_63 = __VLS_62({
+    const __VLS_65 = __VLS_64({
         ...{ 'onKeydown': {} },
         ...{ 'onKeydown': {} },
         ...{ 'onKeydown': {} },
@@ -445,198 +484,206 @@ __VLS_7.slots.default;
         suffixIcon: (__VLS_ctx.Search),
         placeholder: "请输入拼音名、姓名或手机号查询",
         autocomplete: "off",
-    }, ...__VLS_functionalComponentArgsRest(__VLS_62));
-    let __VLS_65;
-    let __VLS_66;
+    }, ...__VLS_functionalComponentArgsRest(__VLS_64));
     let __VLS_67;
-    const __VLS_68 = {
+    let __VLS_68;
+    let __VLS_69;
+    const __VLS_70 = {
         onKeydown: (__VLS_ctx.onInputKeyEnter)
     };
-    const __VLS_69 = {
+    const __VLS_71 = {
         onKeydown: (__VLS_ctx.onInputArrowUp)
     };
-    const __VLS_70 = {
+    const __VLS_72 = {
         onKeydown: (__VLS_ctx.onInputArrowDown)
     };
     /** @type {typeof __VLS_ctx.inputSearchText} */ ;
-    var __VLS_71 = {};
-    var __VLS_64;
+    var __VLS_73 = {};
+    var __VLS_66;
     __VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({
         ...{ class: "dropdown-header" },
     });
-    const __VLS_73 = {}.ElText;
+    const __VLS_75 = {}.ElText;
     /** @type {[typeof __VLS_components.ElText, typeof __VLS_components.elText, typeof __VLS_components.ElText, typeof __VLS_components.elText, ]} */ ;
     // @ts-ignore
-    const __VLS_74 = __VLS_asFunctionalComponent(__VLS_73, new __VLS_73({}));
-    const __VLS_75 = __VLS_74({}, ...__VLS_functionalComponentArgsRest(__VLS_74));
-    __VLS_76.slots.default;
+    const __VLS_76 = __VLS_asFunctionalComponent(__VLS_75, new __VLS_75({}));
+    const __VLS_77 = __VLS_76({}, ...__VLS_functionalComponentArgsRest(__VLS_76));
+    __VLS_78.slots.default;
     if (__VLS_ctx.queryParams.name && __VLS_ctx.queryParams.name.length > __VLS_ctx.minLengthToTriggerUserQuery) {
-        const __VLS_77 = {}.ElIcon;
+        const __VLS_79 = {}.ElIcon;
         /** @type {[typeof __VLS_components.ElIcon, typeof __VLS_components.elIcon, typeof __VLS_components.ElIcon, typeof __VLS_components.elIcon, ]} */ ;
         // @ts-ignore
-        const __VLS_78 = __VLS_asFunctionalComponent(__VLS_77, new __VLS_77({}));
-        const __VLS_79 = __VLS_78({}, ...__VLS_functionalComponentArgsRest(__VLS_78));
-        __VLS_80.slots.default;
-        const __VLS_81 = {}.Search;
+        const __VLS_80 = __VLS_asFunctionalComponent(__VLS_79, new __VLS_79({}));
+        const __VLS_81 = __VLS_80({}, ...__VLS_functionalComponentArgsRest(__VLS_80));
+        __VLS_82.slots.default;
+        const __VLS_83 = {}.Search;
         /** @type {[typeof __VLS_components.Search, typeof __VLS_components.Search, ]} */ ;
         // @ts-ignore
-        const __VLS_82 = __VLS_asFunctionalComponent(__VLS_81, new __VLS_81({}));
-        const __VLS_83 = __VLS_82({}, ...__VLS_functionalComponentArgsRest(__VLS_82));
-        var __VLS_80;
+        const __VLS_84 = __VLS_asFunctionalComponent(__VLS_83, new __VLS_83({}));
+        const __VLS_85 = __VLS_84({}, ...__VLS_functionalComponentArgsRest(__VLS_84));
+        var __VLS_82;
     }
     else {
-        const __VLS_85 = {}.ElIcon;
+        const __VLS_87 = {}.ElIcon;
         /** @type {[typeof __VLS_components.ElIcon, typeof __VLS_components.elIcon, typeof __VLS_components.ElIcon, typeof __VLS_components.elIcon, ]} */ ;
         // @ts-ignore
-        const __VLS_86 = __VLS_asFunctionalComponent(__VLS_85, new __VLS_85({
+        const __VLS_88 = __VLS_asFunctionalComponent(__VLS_87, new __VLS_87({
             color: "#FFBF29",
         }));
-        const __VLS_87 = __VLS_86({
+        const __VLS_89 = __VLS_88({
             color: "#FFBF29",
-        }, ...__VLS_functionalComponentArgsRest(__VLS_86));
-        __VLS_88.slots.default;
-        const __VLS_89 = {}.StarFilled;
+        }, ...__VLS_functionalComponentArgsRest(__VLS_88));
+        __VLS_90.slots.default;
+        const __VLS_91 = {}.StarFilled;
         /** @type {[typeof __VLS_components.StarFilled, typeof __VLS_components.StarFilled, ]} */ ;
         // @ts-ignore
-        const __VLS_90 = __VLS_asFunctionalComponent(__VLS_89, new __VLS_89({}));
-        const __VLS_91 = __VLS_90({}, ...__VLS_functionalComponentArgsRest(__VLS_90));
-        var __VLS_88;
+        const __VLS_92 = __VLS_asFunctionalComponent(__VLS_91, new __VLS_91({}));
+        const __VLS_93 = __VLS_92({}, ...__VLS_functionalComponentArgsRest(__VLS_92));
+        var __VLS_90;
     }
     (__VLS_ctx.queryParams.name && __VLS_ctx.queryParams.name.length
         > __VLS_ctx.minLengthToTriggerUserQuery ? "查询结果" : "常用人员");
-    var __VLS_76;
+    var __VLS_78;
     /** @type {[typeof JaUserList, typeof JaUserList, ]} */ ;
     // @ts-ignore
-    const __VLS_93 = __VLS_asFunctionalComponent(JaUserList, new JaUserList({
+    const __VLS_95 = __VLS_asFunctionalComponent(JaUserList, new JaUserList({
         ...{ 'onItemClicked': {} },
         ...{ 'onArrowKeyDown': {} },
         ref: "userList",
         total: (__VLS_ctx.queryResult.total),
         emptyText: (__VLS_ctx.queryParams.name && __VLS_ctx.queryParams.name.length > __VLS_ctx.minLengthToTriggerUserQuery ? undefined : '无可选常用人员'),
-        multiple: true,
         pageSize: (__VLS_ctx.pageParams.pageSize),
         loading: (__VLS_ctx.loading),
         users: (__VLS_ctx.users),
         height: (300),
         modelValue: (__VLS_ctx.selectedUsers),
         page: (__VLS_ctx.pageParams.currentPage),
+        multiple: (props.multiple),
     }));
-    const __VLS_94 = __VLS_93({
+    const __VLS_96 = __VLS_95({
         ...{ 'onItemClicked': {} },
         ...{ 'onArrowKeyDown': {} },
         ref: "userList",
         total: (__VLS_ctx.queryResult.total),
         emptyText: (__VLS_ctx.queryParams.name && __VLS_ctx.queryParams.name.length > __VLS_ctx.minLengthToTriggerUserQuery ? undefined : '无可选常用人员'),
-        multiple: true,
         pageSize: (__VLS_ctx.pageParams.pageSize),
         loading: (__VLS_ctx.loading),
         users: (__VLS_ctx.users),
         height: (300),
         modelValue: (__VLS_ctx.selectedUsers),
         page: (__VLS_ctx.pageParams.currentPage),
-    }, ...__VLS_functionalComponentArgsRest(__VLS_93));
-    let __VLS_96;
-    let __VLS_97;
+        multiple: (props.multiple),
+    }, ...__VLS_functionalComponentArgsRest(__VLS_95));
     let __VLS_98;
-    const __VLS_99 = {
+    let __VLS_99;
+    let __VLS_100;
+    const __VLS_101 = {
         onItemClicked: (__VLS_ctx.onArrowKeyDown)
     };
-    const __VLS_100 = {
+    const __VLS_102 = {
         onArrowKeyDown: (__VLS_ctx.onArrowKeyDown)
     };
     /** @type {typeof __VLS_ctx.userList} */ ;
-    var __VLS_101 = {};
-    var __VLS_95;
+    var __VLS_103 = {};
+    var __VLS_97;
 }
 var __VLS_7;
-for (const [u] of __VLS_getVForSourceType((__VLS_ctx.selectedUsersForRender))) {
-    const __VLS_103 = {}.JaUserInfoTag;
-    /** @type {[typeof __VLS_components.JaUserInfoTag, typeof __VLS_components.jaUserInfoTag, typeof __VLS_components.JaUserInfoTag, typeof __VLS_components.jaUserInfoTag, ]} */ ;
-    // @ts-ignore
-    const __VLS_104 = __VLS_asFunctionalComponent(__VLS_103, new __VLS_103({
-        ...{ 'onClosed': {} },
-        key: (u.id),
-        userId: (u.id),
-        fullName: (u.fullName),
-        closable: true,
-        hasAvatar: (u.hasAvatar),
-    }));
-    const __VLS_105 = __VLS_104({
-        ...{ 'onClosed': {} },
-        key: (u.id),
-        userId: (u.id),
-        fullName: (u.fullName),
-        closable: true,
-        hasAvatar: (u.hasAvatar),
-    }, ...__VLS_functionalComponentArgsRest(__VLS_104));
-    let __VLS_107;
-    let __VLS_108;
-    let __VLS_109;
-    const __VLS_110 = {
-        onClosed: (__VLS_ctx.onDeselected)
-    };
-    var __VLS_106;
-}
-if (__VLS_ctx.selectedForBinding.length > props.maxShowCount) {
+if (props.showUserTag) {
     __VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({
-        ...{ class: "more-tag" },
+        ...{ class: "ja-user-picker__tag-container" },
     });
-    (__VLS_ctx.selectedForBinding.length - props.maxShowCount);
-}
-if (__VLS_ctx.selectedForBinding.length === 0) {
-    __VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({});
-    const __VLS_111 = {}.ElText;
-    /** @type {[typeof __VLS_components.ElText, typeof __VLS_components.elText, typeof __VLS_components.ElText, typeof __VLS_components.elText, ]} */ ;
-    // @ts-ignore
-    const __VLS_112 = __VLS_asFunctionalComponent(__VLS_111, new __VLS_111({
-        type: "info",
-    }));
-    const __VLS_113 = __VLS_112({
-        type: "info",
-    }, ...__VLS_functionalComponentArgsRest(__VLS_112));
-    __VLS_114.slots.default;
-    var __VLS_114;
+    for (const [u] of __VLS_getVForSourceType((__VLS_ctx.selectedUsersForRender))) {
+        const __VLS_105 = {}.JaUserInfoTag;
+        /** @type {[typeof __VLS_components.JaUserInfoTag, typeof __VLS_components.jaUserInfoTag, typeof __VLS_components.JaUserInfoTag, typeof __VLS_components.jaUserInfoTag, ]} */ ;
+        // @ts-ignore
+        const __VLS_106 = __VLS_asFunctionalComponent(__VLS_105, new __VLS_105({
+            ...{ 'onClosed': {} },
+            key: (u.id),
+            userId: (u.id),
+            fullName: (u.fullName),
+            closable: true,
+            hasAvatar: (u.hasAvatar),
+        }));
+        const __VLS_107 = __VLS_106({
+            ...{ 'onClosed': {} },
+            key: (u.id),
+            userId: (u.id),
+            fullName: (u.fullName),
+            closable: true,
+            hasAvatar: (u.hasAvatar),
+        }, ...__VLS_functionalComponentArgsRest(__VLS_106));
+        let __VLS_109;
+        let __VLS_110;
+        let __VLS_111;
+        const __VLS_112 = {
+            onClosed: (__VLS_ctx.onDeselected)
+        };
+        var __VLS_108;
+    }
+    if (__VLS_ctx.selectedForBinding.length > props.maxShowCount) {
+        __VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({
+            ...{ class: "more-tag" },
+        });
+        (__VLS_ctx.selectedForBinding.length - props.maxShowCount);
+    }
+    if (__VLS_ctx.selectedForBinding.length === 0) {
+        __VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({});
+        const __VLS_113 = {}.ElText;
+        /** @type {[typeof __VLS_components.ElText, typeof __VLS_components.elText, typeof __VLS_components.ElText, typeof __VLS_components.elText, ]} */ ;
+        // @ts-ignore
+        const __VLS_114 = __VLS_asFunctionalComponent(__VLS_113, new __VLS_113({
+            type: "info",
+        }));
+        const __VLS_115 = __VLS_114({
+            type: "info",
+        }, ...__VLS_functionalComponentArgsRest(__VLS_114));
+        __VLS_116.slots.default;
+        var __VLS_116;
+    }
 }
-const __VLS_115 = {}.JaUserSelectDialog;
+const __VLS_117 = {}.JaUserSelectDialog;
 /** @type {[typeof __VLS_components.JaUserSelectDialog, typeof __VLS_components.jaUserSelectDialog, typeof __VLS_components.JaUserSelectDialog, typeof __VLS_components.jaUserSelectDialog, ]} */ ;
 // @ts-ignore
-const __VLS_116 = __VLS_asFunctionalComponent(__VLS_115, new __VLS_115({
+const __VLS_118 = __VLS_asFunctionalComponent(__VLS_117, new __VLS_117({
     ref: "dialogUserSelector",
     multiple: (props.multiple),
     realmId: (__VLS_ctx.localRealmId),
+    classificationLevel: (props.classificationLevel),
     customFilter: (props.customFilter),
     modelValue: (__VLS_ctx.selectedUsers),
 }));
-const __VLS_117 = __VLS_116({
+const __VLS_119 = __VLS_118({
     ref: "dialogUserSelector",
     multiple: (props.multiple),
     realmId: (__VLS_ctx.localRealmId),
+    classificationLevel: (props.classificationLevel),
     customFilter: (props.customFilter),
     modelValue: (__VLS_ctx.selectedUsers),
-}, ...__VLS_functionalComponentArgsRest(__VLS_116));
+}, ...__VLS_functionalComponentArgsRest(__VLS_118));
 /** @type {typeof __VLS_ctx.dialogUserSelector} */ ;
-var __VLS_119 = {};
-var __VLS_118;
+var __VLS_121 = {};
+var __VLS_120;
 var __VLS_3;
 /** @type {[typeof CustomGroupManager, typeof CustomGroupManager, ]} */ ;
 // @ts-ignore
-const __VLS_121 = __VLS_asFunctionalComponent(CustomGroupManager, new CustomGroupManager({
+const __VLS_123 = __VLS_asFunctionalComponent(CustomGroupManager, new CustomGroupManager({
     ref: "dlgCustomGroupManager",
     users: (Array.isArray(__VLS_ctx.selectedUsers) ? __VLS_ctx.selectedUsers : (__VLS_ctx.selectedUsers ? [__VLS_ctx.selectedUsers] : null)),
 }));
-const __VLS_122 = __VLS_121({
+const __VLS_124 = __VLS_123({
     ref: "dlgCustomGroupManager",
     users: (Array.isArray(__VLS_ctx.selectedUsers) ? __VLS_ctx.selectedUsers : (__VLS_ctx.selectedUsers ? [__VLS_ctx.selectedUsers] : null)),
-}, ...__VLS_functionalComponentArgsRest(__VLS_121));
+}, ...__VLS_functionalComponentArgsRest(__VLS_123));
 /** @type {typeof __VLS_ctx.dlgCustomGroupManager} */ ;
-var __VLS_124 = {};
-var __VLS_123;
+var __VLS_126 = {};
+var __VLS_125;
 /** @type {__VLS_StyleScopedClasses['ja-user-picker__root']} */ ;
 /** @type {__VLS_StyleScopedClasses['ja-user-picker-bookmark__dropdown']} */ ;
 /** @type {__VLS_StyleScopedClasses['dropdown-header']} */ ;
+/** @type {__VLS_StyleScopedClasses['ja-user-picker__tag-container']} */ ;
 /** @type {__VLS_StyleScopedClasses['more-tag']} */ ;
 // @ts-ignore
-var __VLS_14 = __VLS_13, __VLS_24 = __VLS_23, __VLS_72 = __VLS_71, __VLS_102 = __VLS_101, __VLS_120 = __VLS_119, __VLS_125 = __VLS_124;
+var __VLS_14 = __VLS_13, __VLS_16 = __VLS_15, __VLS_26 = __VLS_25, __VLS_74 = __VLS_73, __VLS_104 = __VLS_103, __VLS_122 = __VLS_121, __VLS_127 = __VLS_126;
 [__VLS_dollars.$attrs,];
 var __VLS_dollars;
 const __VLS_self = (await import('vue')).defineComponent({
@@ -663,6 +710,7 @@ const __VLS_self = (await import('vue')).defineComponent({
             CustomGroupManager: CustomGroupManager,
             JaUserList: JaUserList,
             localRealmId: localRealmId,
+            bookmarkDropdown: bookmarkDropdown,
             minLengthToTriggerUserQuery: minLengthToTriggerUserQuery,
             users: users,
             selectedUsers: selectedUsers,
@@ -689,96 +737,22 @@ const __VLS_self = (await import('vue')).defineComponent({
             onArrowKeyDown: onArrowKeyDown,
             selectedForBinding: selectedForBinding,
             showUserSelectDialog: showUserSelectDialog,
+            handleMouseOver: handleMouseOver,
             selectedUsersForRender: selectedUsersForRender,
         };
     },
     __typeEmits: {},
-    props: {
-        ...{},
-        ...{
-            /**
-             * 可选择用户的用户域ID
-             */
-            realmId: { type: String, required: false },
-            /**
-             * 弹出下拉选框的快捷键
-             */
-            shortcut: { type: String, required: false, default: "Ctrl+Alt+U" },
-            /**
-             * 是否多选模式
-             */
-            multiple: { type: Boolean, required: false, default: false },
-            /**
-             * 密级过滤
-             */
-            classificationLevel: { type: Number, required: false, default: false },
-            /**
-             * 自定义筛选过滤条件，可以在此回调方法内使用qUser参数构造自定义的查询条件。例如 qUser => qUser.fullName.startWith('王')
-             */
-            customFilter: {
-                type: Function,
-                required: false
-            },
-            /**
-             * 最多显示多少已选中的用户数量
-             */
-            maxShowCount: { type: Number, required: false, default: 20 },
-            /**
-             * 高度，默认100%
-             */
-            height: { type: [Number, String], required: false, default: '100%' },
-            /**
-             * 最大高度
-             */
-            maxHeight: { type: [Number, String], required: false },
-        },
-    },
+    __typeProps: {},
+    props: {},
 });
-export default (await import('vue')).defineComponent({
+const __VLS_component = (await import('vue')).defineComponent({
     setup() {
         return {};
     },
     __typeEmits: {},
-    props: {
-        ...{},
-        ...{
-            /**
-             * 可选择用户的用户域ID
-             */
-            realmId: { type: String, required: false },
-            /**
-             * 弹出下拉选框的快捷键
-             */
-            shortcut: { type: String, required: false, default: "Ctrl+Alt+U" },
-            /**
-             * 是否多选模式
-             */
-            multiple: { type: Boolean, required: false, default: false },
-            /**
-             * 密级过滤
-             */
-            classificationLevel: { type: Number, required: false, default: false },
-            /**
-             * 自定义筛选过滤条件，可以在此回调方法内使用qUser参数构造自定义的查询条件。例如 qUser => qUser.fullName.startWith('王')
-             */
-            customFilter: {
-                type: Function,
-                required: false
-            },
-            /**
-             * 最多显示多少已选中的用户数量
-             */
-            maxShowCount: { type: Number, required: false, default: 20 },
-            /**
-             * 高度，默认100%
-             */
-            height: { type: [Number, String], required: false, default: '100%' },
-            /**
-             * 最大高度
-             */
-            maxHeight: { type: [Number, String], required: false },
-        },
-    },
+    __typeProps: {},
+    props: {},
 });
+export default {};
 ; /* PartiallyEnd: #4569/main.vue */
 //# sourceMappingURL=UserPicker.vue.js.map