@blueking/bk-user-selector 0.0.9 → 0.0.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/typings/vue2.d.ts +4 -0
- package/vue2/index.es.min.js +58 -51
- package/vue2/index.iife.min.js +59 -52
- package/vue2/index.umd.min.js +59 -52
- package/vue2/vue2.css +16 -16
- package/vue3/index.es.min.js +54 -51
- package/vue3/index.iife.min.js +55 -52
- package/vue3/index.umd.min.js +55 -52
- package/vue3/vue3.css +16 -16
package/vue3/index.umd.min.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
})(this, function(exports2, vue, bkuiVue) {
|
|
4
4
|
"use strict";
|
|
5
5
|
var __vite_style__ = document.createElement("style");
|
|
6
|
-
__vite_style__.textContent = ".me-tag[data-v-887b7c44] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n background-color: #e1ecff;\n color: #4d4f56;\n border-radius: 50%;\n padding: 0 8px;\n height: 24px;\n width: 24px;\n cursor: pointer;\n font-size: 12px;\n position: absolute;\n right: 8px;\n top: 50%;\n transform: translateY(-50%);\n z-index: 1;\n}\n.me-tag[data-v-887b7c44]:hover {\n background-color: #cddffe;\n color: #3a84ff;\n}\n.me-tag.disabled[data-v-887b7c44] {\n background-color: #f0f1f5;\n color: #c4c6cc;\n cursor: not-allowed;\n}.dropdown-content[data-v-
|
|
6
|
+
__vite_style__.textContent = ".me-tag[data-v-887b7c44] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n background-color: #e1ecff;\n color: #4d4f56;\n border-radius: 50%;\n padding: 0 8px;\n height: 24px;\n width: 24px;\n cursor: pointer;\n font-size: 12px;\n position: absolute;\n right: 8px;\n top: 50%;\n transform: translateY(-50%);\n z-index: 1;\n}\n.me-tag[data-v-887b7c44]:hover {\n background-color: #cddffe;\n color: #3a84ff;\n}\n.me-tag.disabled[data-v-887b7c44] {\n background-color: #f0f1f5;\n color: #c4c6cc;\n cursor: not-allowed;\n}.dropdown-content[data-v-01b75e6e] {\n min-height: 40px;\n max-height: 300px;\n overflow-y: auto;\n padding: 5px 0;\n}\n.dropdown-content .no-data[data-v-01b75e6e] {\n padding: 10px;\n text-align: center;\n color: #979ba5;\n}\n.dropdown-content .user-group .group-header[data-v-01b75e6e] {\n padding: 8px 12px;\n color: #979ba5;\n display: flex;\n align-items: center;\n}\n.dropdown-content .user-group .group-header .group-count[data-v-01b75e6e] {\n margin-left: 4px;\n}\n.dropdown-content .user-option[data-v-01b75e6e] {\n padding: 8px 12px;\n cursor: pointer;\n display: flex;\n align-items: center;\n height: 32px;\n}\n.dropdown-content .user-option[data-v-01b75e6e]:hover {\n background-color: #f5f7fa;\n}\n.dropdown-content .user-option .tenant-name[data-v-01b75e6e] {\n color: #f59500;\n margin-left: 4px;\n padding: 0 4px;\n}.bk-user-selector-popover.bk-popover.bk-pop2-content {\n padding: 0;\n}.user-tag[data-v-203c36cb] {\n margin-right: 4px;\n}\n.user-tag.draggable[data-v-203c36cb] {\n cursor: move;\n}\n.user-tag.active[data-v-203c36cb] {\n background-color: #e1ecff;\n border-color: #3a84ff;\n}\n.user-tag .tag-content .user-name[data-v-203c36cb] {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n font-size: 12px;\n}\n.user-tag .tag-content .tenant-name[data-v-203c36cb] {\n color: #f59500;\n margin-left: 3px;\n white-space: nowrap;\n padding: 0 3px;\n border-radius: 2px;\n}.multiple-selector[data-v-1a376d26] {\n position: relative;\n width: 100%;\n}\n.multiple-selector .tags-container[data-v-1a376d26] {\n min-height: 32px;\n border: 1px solid #dcdee5;\n border-radius: 2px;\n padding: 1px 10px 1px 8px;\n transition: all 0.2s ease;\n background-color: #fff;\n}\n.multiple-selector .tags-container.focused[data-v-1a376d26] {\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-1a376d26] {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n}\n.multiple-selector .tag-list[data-v-1a376d26] {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n}\n.multiple-selector .tag-wrapper[data-v-1a376d26] {\n display: inline-flex;\n align-items: center;\n max-width: 100%;\n}\n.multiple-selector .search-input[data-v-1a376d26] {\n outline: none;\n border: none;\n height: 28px;\n min-width: 10px;\n background: transparent;\n}\n.multiple-selector .search-input[data-v-1a376d26]::placeholder {\n color: #c4c6cc;\n}\n.multiple-selector .search-input.inline[data-v-1a376d26] {\n min-width: 10px;\n}\n.multiple-selector .search-input.last[data-v-1a376d26], .multiple-selector .search-input.collapsed[data-v-1a376d26] {\n flex: 1;\n min-width: 60px;\n}.single-selector[data-v-22d9b76f] {\n position: relative;\n width: 100%;\n}\n.input-container[data-v-22d9b76f] {\n position: relative;\n display: flex;\n align-items: center;\n min-height: 32px;\n border: 1px solid #dcdee5;\n border-radius: 2px;\n padding: 0 8px;\n background-color: #fff;\n}\n.input-container[data-v-22d9b76f]: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-22d9b76f] {\n flex: 1;\n outline: none;\n border: none;\n height: 30px;\n background: transparent;\n}\n.search-input[data-v-22d9b76f]::placeholder {\n color: #c4c6cc;\n}\n.selected-user[data-v-22d9b76f] {\n display: inline-flex;\n align-items: center;\n background-color: #f0f1f5;\n border-radius: 2px;\n padding: 0 8px;\n margin-right: 8px;\n height: 24px;\n max-width: calc(100% - 32px);\n}\n.selected-user .tenant-name[data-v-22d9b76f] {\n color: #f59500;\n margin-left: 4px;\n}\n.selected-user .close-icon[data-v-22d9b76f] {\n margin-left: 4px;\n cursor: pointer;\n font-style: normal;\n}.bk-user-selector[data-v-84252deb] {\n width: 100%;\n position: relative;\n font-size: 12px;\n}/*$vite$:1*/";
|
|
7
7
|
document.head.appendChild(__vite_style__);
|
|
8
8
|
const getTenants = async (apiBaseUrl, tenantId) => {
|
|
9
9
|
if (!apiBaseUrl || !tenantId) {
|
|
@@ -3104,7 +3104,6 @@
|
|
|
3104
3104
|
const emit = __emit;
|
|
3105
3105
|
const groupedUsers = vue.computed(() => {
|
|
3106
3106
|
const groups = {};
|
|
3107
|
-
console.log("props.options", props.options);
|
|
3108
3107
|
if (Array.isArray(props.userGroup) && props.userGroup.length > 0) {
|
|
3109
3108
|
groups[props.userGroupName] = props.userGroup.map((group) => ({
|
|
3110
3109
|
id: group.id,
|
|
@@ -3229,7 +3228,7 @@
|
|
|
3229
3228
|
};
|
|
3230
3229
|
}
|
|
3231
3230
|
});
|
|
3232
|
-
const SelectionPopover = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-
|
|
3231
|
+
const SelectionPopover = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-01b75e6e"]]);
|
|
3233
3232
|
const _hoisted_1$3 = { class: "tag-content" };
|
|
3234
3233
|
const _hoisted_2$2 = { class: "user-name" };
|
|
3235
3234
|
const _hoisted_3$2 = {
|
|
@@ -3737,7 +3736,7 @@
|
|
|
3737
3736
|
}
|
|
3738
3737
|
});
|
|
3739
3738
|
const MultipleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-1a376d26"]]);
|
|
3740
|
-
const _withScopeId = (n) => (vue.pushScopeId("data-v-
|
|
3739
|
+
const _withScopeId = (n) => (vue.pushScopeId("data-v-22d9b76f"), n = n(), vue.popScopeId(), n);
|
|
3741
3740
|
const _hoisted_1$1 = { class: "input-container" };
|
|
3742
3741
|
const _hoisted_2 = {
|
|
3743
3742
|
key: 0,
|
|
@@ -3826,7 +3825,6 @@
|
|
|
3826
3825
|
try {
|
|
3827
3826
|
const result = await searchUsers(props.apiBaseUrl, props.tenantId, keyword);
|
|
3828
3827
|
options.value = formatUsers(result).filter((user) => !selectedUser.value || user.id !== selectedUser.value);
|
|
3829
|
-
console.log("options.value", options.value);
|
|
3830
3828
|
} catch (error) {
|
|
3831
3829
|
console.error("获取用户列表失败:", error);
|
|
3832
3830
|
options.value = [];
|
|
@@ -3835,7 +3833,6 @@
|
|
|
3835
3833
|
}
|
|
3836
3834
|
};
|
|
3837
3835
|
const addUser = (user) => {
|
|
3838
|
-
console.log("addUser", user);
|
|
3839
3836
|
selectedUser.value = user.id;
|
|
3840
3837
|
searchQuery.value = "";
|
|
3841
3838
|
showDropdown.value = false;
|
|
@@ -3850,7 +3847,6 @@
|
|
|
3850
3847
|
}
|
|
3851
3848
|
};
|
|
3852
3849
|
const handleInput = () => {
|
|
3853
|
-
console.log("handleInput", searchQuery.value);
|
|
3854
3850
|
fetchUsers(searchQuery.value);
|
|
3855
3851
|
showDropdown.value = searchQuery.value.length >= 2;
|
|
3856
3852
|
};
|
|
@@ -3858,7 +3854,6 @@
|
|
|
3858
3854
|
showDropdown.value = false;
|
|
3859
3855
|
};
|
|
3860
3856
|
vue.watch(selectedUser, (newVal) => {
|
|
3861
|
-
console.log("selectedUser", newVal);
|
|
3862
3857
|
emit("update:modelValue", newVal);
|
|
3863
3858
|
});
|
|
3864
3859
|
return (_ctx, _cache) => {
|
|
@@ -3928,8 +3923,11 @@
|
|
|
3928
3923
|
};
|
|
3929
3924
|
}
|
|
3930
3925
|
});
|
|
3931
|
-
const SingleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-
|
|
3932
|
-
const _hoisted_1 = {
|
|
3926
|
+
const SingleSelector = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-22d9b76f"]]);
|
|
3927
|
+
const _hoisted_1 = {
|
|
3928
|
+
ref: "containerRef",
|
|
3929
|
+
class: "bk-user-selector"
|
|
3930
|
+
};
|
|
3933
3931
|
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
3934
3932
|
...{
|
|
3935
3933
|
name: "BkUserSelector"
|
|
@@ -3962,7 +3960,6 @@
|
|
|
3962
3960
|
const ids = Array.isArray(props.modelValue) ? props.modelValue : [];
|
|
3963
3961
|
if (ids.length > 0) {
|
|
3964
3962
|
try {
|
|
3965
|
-
console.log(props.exactSearchKey);
|
|
3966
3963
|
const result = await lookupUsers(props.apiBaseUrl, props.tenantId, props.exactSearchKey, ids);
|
|
3967
3964
|
selectedUsers.value = formatUsers(result);
|
|
3968
3965
|
} catch (error) {
|
|
@@ -3993,50 +3990,56 @@
|
|
|
3993
3990
|
initSelectedUsers();
|
|
3994
3991
|
});
|
|
3995
3992
|
return (_ctx, _cache) => {
|
|
3996
|
-
return vue.openBlock(), vue.createElementBlock(
|
|
3997
|
-
|
|
3998
|
-
|
|
3999
|
-
|
|
4000
|
-
|
|
4001
|
-
|
|
4002
|
-
|
|
4003
|
-
|
|
4004
|
-
|
|
4005
|
-
|
|
4006
|
-
|
|
4007
|
-
|
|
4008
|
-
|
|
4009
|
-
|
|
4010
|
-
|
|
4011
|
-
|
|
4012
|
-
|
|
4013
|
-
|
|
4014
|
-
[
|
|
4015
|
-
vue.
|
|
4016
|
-
|
|
4017
|
-
|
|
4018
|
-
"
|
|
4019
|
-
|
|
4020
|
-
|
|
4021
|
-
|
|
4022
|
-
|
|
4023
|
-
|
|
4024
|
-
|
|
4025
|
-
|
|
4026
|
-
|
|
4027
|
-
|
|
4028
|
-
|
|
4029
|
-
|
|
4030
|
-
|
|
4031
|
-
|
|
4032
|
-
|
|
4033
|
-
|
|
4034
|
-
|
|
4035
|
-
|
|
3993
|
+
return vue.openBlock(), vue.createElementBlock(
|
|
3994
|
+
"section",
|
|
3995
|
+
_hoisted_1,
|
|
3996
|
+
[
|
|
3997
|
+
vue.createCommentVNode(" 单选模式 "),
|
|
3998
|
+
!_ctx.multiple ? (vue.openBlock(), vue.createBlock(SingleSelector, {
|
|
3999
|
+
key: 0,
|
|
4000
|
+
modelValue: selectedUser.value,
|
|
4001
|
+
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectedUser.value = $event),
|
|
4002
|
+
"api-base-url": _ctx.apiBaseUrl,
|
|
4003
|
+
"current-user-id": _ctx.currentUserId,
|
|
4004
|
+
"exact-search-key": _ctx.exactSearchKey,
|
|
4005
|
+
placeholder: _ctx.placeholder,
|
|
4006
|
+
"tenant-id": _ctx.tenantId,
|
|
4007
|
+
tenants: vue.unref(tenants),
|
|
4008
|
+
"user-group": _ctx.userGroup,
|
|
4009
|
+
"user-group-name": _ctx.userGroupName,
|
|
4010
|
+
onChange: handleUpdateUser
|
|
4011
|
+
}, null, 8, ["modelValue", "api-base-url", "current-user-id", "exact-search-key", "placeholder", "tenant-id", "tenants", "user-group", "user-group-name"])) : (vue.openBlock(), vue.createElementBlock(
|
|
4012
|
+
vue.Fragment,
|
|
4013
|
+
{ key: 1 },
|
|
4014
|
+
[
|
|
4015
|
+
vue.createCommentVNode(" 多选模式 "),
|
|
4016
|
+
vue.createVNode(MultipleSelector, {
|
|
4017
|
+
modelValue: selectedUserIds.value,
|
|
4018
|
+
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => selectedUserIds.value = $event),
|
|
4019
|
+
"api-base-url": _ctx.apiBaseUrl,
|
|
4020
|
+
"current-user-id": _ctx.currentUserId,
|
|
4021
|
+
draggable: _ctx.draggable,
|
|
4022
|
+
"exact-search-key": _ctx.exactSearchKey,
|
|
4023
|
+
placeholder: _ctx.placeholder,
|
|
4024
|
+
"selected-users": selectedUsers.value,
|
|
4025
|
+
"tenant-id": _ctx.tenantId,
|
|
4026
|
+
tenants: vue.unref(tenants),
|
|
4027
|
+
"user-group": _ctx.userGroup,
|
|
4028
|
+
"user-group-name": _ctx.userGroupName,
|
|
4029
|
+
"onUpdate:selectedUsers": handleUpdateSelectedUsers
|
|
4030
|
+
}, null, 8, ["modelValue", "api-base-url", "current-user-id", "draggable", "exact-search-key", "placeholder", "selected-users", "tenant-id", "tenants", "user-group", "user-group-name"])
|
|
4031
|
+
],
|
|
4032
|
+
2112
|
|
4033
|
+
/* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
|
|
4034
|
+
))
|
|
4035
|
+
],
|
|
4036
|
+
512
|
|
4037
|
+
/* NEED_PATCH */
|
|
4038
|
+
);
|
|
4036
4039
|
};
|
|
4037
4040
|
}
|
|
4038
4041
|
});
|
|
4039
|
-
const BkUserSelector = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-
|
|
4042
|
+
const BkUserSelector = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-84252deb"]]);
|
|
4040
4043
|
exports2.BkUserSelector = BkUserSelector;
|
|
4041
4044
|
exports2.default = BkUserSelector;
|
|
4042
4045
|
Object.defineProperties(exports2, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
|
package/vue3/vue3.css
CHANGED
|
@@ -24,37 +24,37 @@
|
|
|
24
24
|
background-color: #f0f1f5;
|
|
25
25
|
color: #c4c6cc;
|
|
26
26
|
cursor: not-allowed;
|
|
27
|
-
}.dropdown-content[data-v-
|
|
27
|
+
}.dropdown-content[data-v-01b75e6e] {
|
|
28
28
|
min-height: 40px;
|
|
29
29
|
max-height: 300px;
|
|
30
30
|
overflow-y: auto;
|
|
31
31
|
padding: 5px 0;
|
|
32
32
|
}
|
|
33
|
-
.dropdown-content .no-data[data-v-
|
|
33
|
+
.dropdown-content .no-data[data-v-01b75e6e] {
|
|
34
34
|
padding: 10px;
|
|
35
35
|
text-align: center;
|
|
36
36
|
color: #979ba5;
|
|
37
37
|
}
|
|
38
|
-
.dropdown-content .user-group .group-header[data-v-
|
|
38
|
+
.dropdown-content .user-group .group-header[data-v-01b75e6e] {
|
|
39
39
|
padding: 8px 12px;
|
|
40
40
|
color: #979ba5;
|
|
41
41
|
display: flex;
|
|
42
42
|
align-items: center;
|
|
43
43
|
}
|
|
44
|
-
.dropdown-content .user-group .group-header .group-count[data-v-
|
|
44
|
+
.dropdown-content .user-group .group-header .group-count[data-v-01b75e6e] {
|
|
45
45
|
margin-left: 4px;
|
|
46
46
|
}
|
|
47
|
-
.dropdown-content .user-option[data-v-
|
|
47
|
+
.dropdown-content .user-option[data-v-01b75e6e] {
|
|
48
48
|
padding: 8px 12px;
|
|
49
49
|
cursor: pointer;
|
|
50
50
|
display: flex;
|
|
51
51
|
align-items: center;
|
|
52
52
|
height: 32px;
|
|
53
53
|
}
|
|
54
|
-
.dropdown-content .user-option[data-v-
|
|
54
|
+
.dropdown-content .user-option[data-v-01b75e6e]:hover {
|
|
55
55
|
background-color: #f5f7fa;
|
|
56
56
|
}
|
|
57
|
-
.dropdown-content .user-option .tenant-name[data-v-
|
|
57
|
+
.dropdown-content .user-option .tenant-name[data-v-01b75e6e] {
|
|
58
58
|
color: #f59500;
|
|
59
59
|
margin-left: 4px;
|
|
60
60
|
padding: 0 4px;
|
|
@@ -129,11 +129,11 @@
|
|
|
129
129
|
.multiple-selector .search-input.last[data-v-1a376d26], .multiple-selector .search-input.collapsed[data-v-1a376d26] {
|
|
130
130
|
flex: 1;
|
|
131
131
|
min-width: 60px;
|
|
132
|
-
}.single-selector[data-v-
|
|
132
|
+
}.single-selector[data-v-22d9b76f] {
|
|
133
133
|
position: relative;
|
|
134
134
|
width: 100%;
|
|
135
135
|
}
|
|
136
|
-
.input-container[data-v-
|
|
136
|
+
.input-container[data-v-22d9b76f] {
|
|
137
137
|
position: relative;
|
|
138
138
|
display: flex;
|
|
139
139
|
align-items: center;
|
|
@@ -143,21 +143,21 @@
|
|
|
143
143
|
padding: 0 8px;
|
|
144
144
|
background-color: #fff;
|
|
145
145
|
}
|
|
146
|
-
.input-container[data-v-
|
|
146
|
+
.input-container[data-v-22d9b76f]:focus-within {
|
|
147
147
|
border-color: #3a84ff;
|
|
148
148
|
box-shadow: 0 0 0 2px rgba(58, 132, 255, 0.1);
|
|
149
149
|
}
|
|
150
|
-
.search-input[data-v-
|
|
150
|
+
.search-input[data-v-22d9b76f] {
|
|
151
151
|
flex: 1;
|
|
152
152
|
outline: none;
|
|
153
153
|
border: none;
|
|
154
154
|
height: 30px;
|
|
155
155
|
background: transparent;
|
|
156
156
|
}
|
|
157
|
-
.search-input[data-v-
|
|
157
|
+
.search-input[data-v-22d9b76f]::placeholder {
|
|
158
158
|
color: #c4c6cc;
|
|
159
159
|
}
|
|
160
|
-
.selected-user[data-v-
|
|
160
|
+
.selected-user[data-v-22d9b76f] {
|
|
161
161
|
display: inline-flex;
|
|
162
162
|
align-items: center;
|
|
163
163
|
background-color: #f0f1f5;
|
|
@@ -167,15 +167,15 @@
|
|
|
167
167
|
height: 24px;
|
|
168
168
|
max-width: calc(100% - 32px);
|
|
169
169
|
}
|
|
170
|
-
.selected-user .tenant-name[data-v-
|
|
170
|
+
.selected-user .tenant-name[data-v-22d9b76f] {
|
|
171
171
|
color: #f59500;
|
|
172
172
|
margin-left: 4px;
|
|
173
173
|
}
|
|
174
|
-
.selected-user .close-icon[data-v-
|
|
174
|
+
.selected-user .close-icon[data-v-22d9b76f] {
|
|
175
175
|
margin-left: 4px;
|
|
176
176
|
cursor: pointer;
|
|
177
177
|
font-style: normal;
|
|
178
|
-
}.bk-user-selector[data-v-
|
|
178
|
+
}.bk-user-selector[data-v-84252deb] {
|
|
179
179
|
width: 100%;
|
|
180
180
|
position: relative;
|
|
181
181
|
font-size: 12px;
|