@blueking/bk-user-selector 0.0.2-beta.1 → 0.0.3

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.
Files changed (21) hide show
  1. package/README.md +60 -38
  2. package/package.json +1 -1
  3. package/typings/api/user.d.ts +3 -3
  4. package/typings/components/multiple-selector.vue.d.ts +31 -1
  5. package/typings/components/single-selector.vue.d.ts +2 -2
  6. package/typings/components/user-selector.vue.d.ts +10 -13
  7. package/typings/hooks/useTenantData.d.ts +1 -1
  8. package/typings/hooks/useUserSearch.d.ts +2 -2
  9. package/typings/hooks/useUserSelection.d.ts +2 -2
  10. package/typings/types/index.d.ts +11 -11
  11. package/typings/utils/common.d.ts +2 -2
  12. package/typings/vue2.d.ts +15 -1
  13. package/vue2/index.es.min.js +10434 -29768
  14. package/vue2/index.iife.min.js +8079 -27487
  15. package/vue2/index.umd.min.js +7138 -26472
  16. package/vue2/vue2.css +189 -1722
  17. package/vue3/index.es.min.js +3079 -2264
  18. package/vue3/index.iife.min.js +8521 -27853
  19. package/vue3/index.umd.min.js +3078 -2263
  20. package/vue3/vue3.css +148 -48
  21. package/typings/index.d.ts +0 -18
package/vue3/vue3.css CHANGED
@@ -1,34 +1,20 @@
1
- .user-option[data-v-0ae61279] {
2
- display: flex;
3
- align-items: center;
4
- }
5
- .user-option .user-name[data-v-0ae61279] {
6
- font-size: 14px;
7
- }
8
- .user-option .tenant-name[data-v-0ae61279] {
9
- font-size: 12px;
10
- color: #f59500;
11
- margin-left: 4px;
12
- padding: 0 4px;
13
- background: rgba(245, 149, 0, 0.1);
14
- border-radius: 2px;
15
- }.user-tag[data-v-cf26d9e2] {
1
+ .user-tag[data-v-203c36cb] {
16
2
  margin-right: 4px;
17
3
  }
18
- .user-tag.draggable[data-v-cf26d9e2] {
4
+ .user-tag.draggable[data-v-203c36cb] {
19
5
  cursor: move;
20
6
  }
21
- .user-tag.active[data-v-cf26d9e2] {
7
+ .user-tag.active[data-v-203c36cb] {
22
8
  background-color: #e1ecff;
23
9
  border-color: #3a84ff;
24
10
  }
25
- .user-tag .tag-content .user-name[data-v-cf26d9e2] {
11
+ .user-tag .tag-content .user-name[data-v-203c36cb] {
26
12
  white-space: nowrap;
27
13
  overflow: hidden;
28
14
  text-overflow: ellipsis;
29
15
  font-size: 12px;
30
16
  }
31
- .user-tag .tag-content .tenant-name[data-v-cf26d9e2] {
17
+ .user-tag .tag-content .tenant-name[data-v-203c36cb] {
32
18
  color: #f59500;
33
19
  margin-left: 3px;
34
20
  white-space: nowrap;
@@ -36,11 +22,11 @@
36
22
  border-radius: 2px;
37
23
  }.bk-user-selector-popover.bk-popover.bk-pop2-content {
38
24
  padding: 0;
39
- }.multiple-selector[data-v-6a1779a9] {
25
+ }.multiple-selector[data-v-0bc02f6f] {
40
26
  position: relative;
41
27
  width: 100%;
42
28
  }
43
- .multiple-selector .tags-container[data-v-6a1779a9] {
29
+ .multiple-selector .tags-container[data-v-0bc02f6f] {
44
30
  min-height: 32px;
45
31
  border: 1px solid #dcdee5;
46
32
  border-radius: 2px;
@@ -48,81 +34,195 @@
48
34
  transition: all 0.2s ease;
49
35
  background-color: #fff;
50
36
  }
51
- .multiple-selector .tags-container.focused[data-v-6a1779a9] {
37
+ .multiple-selector .tags-container.focused[data-v-0bc02f6f] {
52
38
  border-color: #3a84ff;
53
39
  box-shadow: 0 0 0 2px rgba(58, 132, 255, 0.1);
54
40
  }
55
- .multiple-selector .tags-container.collapsed[data-v-6a1779a9] {
41
+ .multiple-selector .tags-container.collapsed[data-v-0bc02f6f] {
56
42
  display: flex;
57
43
  flex-wrap: wrap;
58
44
  align-items: center;
59
45
  }
60
- .multiple-selector .tag-list[data-v-6a1779a9] {
46
+ .multiple-selector .tag-list[data-v-0bc02f6f] {
61
47
  display: flex;
62
48
  flex-wrap: wrap;
63
49
  align-items: center;
64
50
  }
65
- .multiple-selector .tag-wrapper[data-v-6a1779a9] {
51
+ .multiple-selector .tag-wrapper[data-v-0bc02f6f] {
66
52
  display: inline-flex;
67
53
  align-items: center;
68
54
  max-width: 100%;
69
55
  }
70
- .multiple-selector .search-input[data-v-6a1779a9] {
56
+ .multiple-selector .search-input[data-v-0bc02f6f] {
71
57
  outline: none;
72
58
  border: none;
73
- font-size: 14px;
74
59
  height: 28px;
60
+ min-width: 10px;
75
61
  background: transparent;
76
62
  }
77
- .multiple-selector .search-input[data-v-6a1779a9]::placeholder {
78
- color: #C4C6CC;
63
+ .multiple-selector .search-input[data-v-0bc02f6f]::placeholder {
64
+ color: #c4c6cc;
79
65
  }
80
- .multiple-selector .search-input.inline[data-v-6a1779a9] {
81
- width: 4px;
82
- min-width: 4px;
66
+ .multiple-selector .search-input.inline[data-v-0bc02f6f] {
67
+ min-width: 10px;
83
68
  }
84
- .multiple-selector .search-input.last[data-v-6a1779a9], .multiple-selector .search-input.collapsed[data-v-6a1779a9] {
69
+ .multiple-selector .search-input.last[data-v-0bc02f6f], .multiple-selector .search-input.collapsed[data-v-0bc02f6f] {
85
70
  flex: 1;
86
71
  min-width: 60px;
87
72
  }
88
- .multiple-selector .tag-more[data-v-6a1779a9] {
73
+ .dropdown-content[data-v-0bc02f6f] {
74
+ min-height: 40px;
75
+ max-height: 300px;
76
+ overflow-y: auto;
77
+ padding: 5px 0;
78
+ }
79
+ .dropdown-content .no-data[data-v-0bc02f6f] {
80
+ padding: 10px;
81
+ text-align: center;
82
+ color: #979ba5;
83
+ }
84
+ .dropdown-content .user-option[data-v-0bc02f6f] {
85
+ padding: 8px 12px;
86
+ cursor: pointer;
87
+ display: flex;
88
+ align-items: center;
89
+ height: 32px;
90
+ }
91
+ .dropdown-content .user-option[data-v-0bc02f6f]:hover {
92
+ background-color: #f5f7fa;
93
+ }
94
+ .dropdown-content .user-option .tenant-name[data-v-0bc02f6f] {
95
+ color: #f59500;
96
+ margin-left: 4px;
97
+ padding: 0 4px;
98
+ }
99
+ .me-tag[data-v-0bc02f6f] {
100
+ display: inline-flex;
101
+ align-items: center;
102
+ justify-content: center;
103
+ background-color: #e1ecff;
104
+ color: #4d4f56;
105
+ border-radius: 50%;
106
+ padding: 0 8px;
107
+ height: 24px;
108
+ width: 24px;
109
+ cursor: pointer;
110
+ font-size: 12px;
111
+ position: absolute;
112
+ right: 8px;
113
+ top: 50%;
114
+ transform: translateY(-50%);
115
+ z-index: 1;
116
+ }
117
+ .me-tag[data-v-0bc02f6f]:hover {
118
+ background-color: #cddffe;
119
+ color: #3a84ff;
120
+ }
121
+ .me-tag.disabled[data-v-0bc02f6f] {
89
122
  background-color: #f0f1f5;
90
- color: #63656e;
91
- margin: 0 4px 4px 0;
123
+ color: #c4c6cc;
124
+ cursor: not-allowed;
125
+ }.single-selector[data-v-02788d3d] {
126
+ position: relative;
127
+ width: 100%;
128
+ }
129
+ .input-container[data-v-02788d3d] {
130
+ position: relative;
131
+ display: flex;
132
+ align-items: center;
133
+ min-height: 32px;
134
+ border: 1px solid #dcdee5;
135
+ border-radius: 2px;
136
+ padding: 0 8px;
137
+ background-color: #fff;
138
+ }
139
+ .input-container[data-v-02788d3d]:focus-within {
140
+ border-color: #3a84ff;
141
+ box-shadow: 0 0 0 2px rgba(58, 132, 255, 0.1);
142
+ }
143
+ .search-input[data-v-02788d3d] {
144
+ flex: 1;
145
+ outline: none;
146
+ border: none;
147
+ height: 30px;
148
+ background: transparent;
149
+ }
150
+ .search-input[data-v-02788d3d]::placeholder {
151
+ color: #c4c6cc;
152
+ }
153
+ .selected-user[data-v-02788d3d] {
154
+ display: inline-flex;
155
+ align-items: center;
156
+ background-color: #f0f1f5;
157
+ border-radius: 2px;
158
+ padding: 0 8px;
159
+ margin-right: 8px;
160
+ height: 24px;
161
+ max-width: calc(100% - 32px);
162
+ }
163
+ .selected-user .tenant-name[data-v-02788d3d] {
164
+ color: #f59500;
165
+ margin-left: 4px;
166
+ }
167
+ .selected-user .close-icon[data-v-02788d3d] {
168
+ margin-left: 4px;
92
169
  cursor: pointer;
170
+ font-style: normal;
93
171
  }
94
- .dropdown-content[data-v-6a1779a9] {
172
+ .dropdown-content[data-v-02788d3d] {
95
173
  min-height: 40px;
96
174
  max-height: 300px;
97
175
  overflow-y: auto;
98
176
  padding: 5px 0;
99
177
  }
100
- .dropdown-content .no-data[data-v-6a1779a9] {
178
+ .dropdown-content .no-data[data-v-02788d3d] {
101
179
  padding: 10px;
102
180
  text-align: center;
103
181
  color: #979ba5;
104
182
  }
105
- .dropdown-content .user-option[data-v-6a1779a9] {
183
+ .dropdown-content .user-option[data-v-02788d3d] {
106
184
  padding: 8px 12px;
107
185
  cursor: pointer;
108
186
  display: flex;
109
187
  align-items: center;
110
188
  height: 32px;
111
189
  }
112
- .dropdown-content .user-option[data-v-6a1779a9]:hover {
190
+ .dropdown-content .user-option[data-v-02788d3d]:hover {
113
191
  background-color: #f5f7fa;
114
192
  }
115
- .dropdown-content .user-option .user-name[data-v-6a1779a9] {
116
- font-size: 14px;
117
- }
118
- .dropdown-content .user-option .tenant-name[data-v-6a1779a9] {
119
- font-size: 12px;
193
+ .dropdown-content .user-option .tenant-name[data-v-02788d3d] {
120
194
  color: #f59500;
121
195
  margin-left: 4px;
122
196
  padding: 0 4px;
123
- background: rgba(245, 149, 0, 0.1);
124
- border-radius: 2px;
125
- }.bk-user-selector[data-v-144c2518] {
197
+ }
198
+ .me-tag[data-v-02788d3d] {
199
+ display: inline-flex;
200
+ align-items: center;
201
+ justify-content: center;
202
+ background-color: #e1ecff;
203
+ color: #4d4f56;
204
+ border-radius: 50%;
205
+ padding: 0 8px;
206
+ height: 24px;
207
+ width: 24px;
208
+ cursor: pointer;
209
+ font-size: 12px;
210
+ position: absolute;
211
+ right: 8px;
212
+ top: 50%;
213
+ transform: translateY(-50%);
214
+ z-index: 1;
215
+ }
216
+ .me-tag[data-v-02788d3d]:hover {
217
+ background-color: #cddffe;
218
+ color: #3a84ff;
219
+ }
220
+ .me-tag.disabled[data-v-02788d3d] {
221
+ background-color: #f0f1f5;
222
+ color: #c4c6cc;
223
+ cursor: not-allowed;
224
+ }.bk-user-selector[data-v-bb73e41f] {
126
225
  width: 100%;
127
226
  position: relative;
227
+ font-size: 12px;
128
228
  }
package/typings/index.d.ts DELETED
@@ -1,18 +0,0 @@
1
- /**
2
- * 蓝鲸用户选择器
3
- * @module bk-user-selector
4
- */
5
- import { type App } from 'vue';
6
- import UserSelector from './components/user-selector.vue';
7
- export { UserSelector };
8
- /**
9
- * 默认导出
10
- */
11
- declare const _default: {
12
- /**
13
- * 安装插件
14
- * @param app - Vue 应用实例
15
- */
16
- install(app: App): void;
17
- };
18
- export default _default;