@blueking/bk-user-selector 0.0.39-beta.3 → 0.1.1

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 (29) hide show
  1. package/README.md +316 -88
  2. package/package.json +2 -2
  3. package/typings/api/user.d.ts +42 -21
  4. package/typings/components/me-tag.vue.d.ts +14 -35
  5. package/typings/components/selection-popover.vue.d.ts +48 -197
  6. package/typings/components/user-render.d.ts +20 -1
  7. package/typings/components/user-selector.vue.d.ts +23 -29
  8. package/typings/components/user-tag.vue.d.ts +16 -0
  9. package/typings/constants/index.d.ts +25 -0
  10. package/typings/hooks/use-current-user.d.ts +30 -0
  11. package/typings/hooks/use-focus-state.d.ts +48 -0
  12. package/typings/hooks/use-input-handler.d.ts +44 -0
  13. package/typings/hooks/use-resize-observer.d.ts +17 -0
  14. package/typings/hooks/use-selected-users.d.ts +78 -0
  15. package/typings/hooks/use-sortable.d.ts +41 -0
  16. package/typings/hooks/use-tenant-data.d.ts +17 -0
  17. package/typings/hooks/use-user-search.d.ts +38 -0
  18. package/typings/hooks/use-user-selection.d.ts +32 -0
  19. package/typings/hooks/use-visible-tags.d.ts +51 -0
  20. package/typings/types/index.d.ts +127 -98
  21. package/typings/utils/logger.d.ts +47 -0
  22. package/vue2/index.es.min.js +2992 -4564
  23. package/vue2/index.iife.min.js +2939 -4454
  24. package/vue2/index.umd.min.js +2984 -4556
  25. package/vue2/vue2.css +34 -81
  26. package/vue3/index.es.min.js +1390 -1597
  27. package/vue3/index.iife.min.js +2982 -4554
  28. package/vue3/index.umd.min.js +1389 -1596
  29. package/vue3/vue3.css +34 -67
package/vue3/vue3.css CHANGED
@@ -1,4 +1,4 @@
1
- .me-tag[data-v-ef4a05c4] {
1
+ .me-tag[data-v-4f251ce1] {
2
2
  position: absolute;
3
3
  top: 50%;
4
4
  right: 8px;
@@ -17,75 +17,80 @@
17
17
  border-radius: 50%;
18
18
  transform: translateY(-50%);
19
19
  }
20
- .me-tag[data-v-ef4a05c4]:hover {
20
+ .me-tag[data-v-4f251ce1]:hover {
21
21
  color: #3a84ff;
22
22
  background-color: #cddffe;
23
23
  }
24
- .me-tag.disabled[data-v-ef4a05c4] {
24
+ .me-tag.disabled[data-v-4f251ce1] {
25
25
  color: #c4c6cc;
26
26
  cursor: not-allowed;
27
27
  background-color: #f0f1f5;
28
- }.dropdown-content[data-v-78875ea6] {
28
+ }.dropdown-content[data-v-d5a338f0] {
29
29
  min-height: 40px;
30
30
  max-height: 300px;
31
31
  padding: 5px 0;
32
32
  overflow-y: auto;
33
33
  }
34
- .dropdown-content .no-data[data-v-78875ea6] {
34
+ .dropdown-content .no-data[data-v-d5a338f0] {
35
35
  padding: 10px;
36
36
  color: #979ba5;
37
37
  text-align: center;
38
38
  }
39
- .dropdown-content .user-group .group-header[data-v-78875ea6] {
39
+ .dropdown-content .user-group .group-header[data-v-d5a338f0] {
40
40
  display: flex;
41
41
  align-items: center;
42
42
  padding: 8px 12px;
43
43
  color: #979ba5;
44
44
  }
45
- .dropdown-content .user-group .group-header .group-count[data-v-78875ea6] {
45
+ .dropdown-content .user-group .group-header .group-count[data-v-d5a338f0] {
46
46
  margin-left: 4px;
47
47
  }
48
- .dropdown-content .user-option[data-v-78875ea6] {
48
+ .dropdown-content .user-option[data-v-d5a338f0] {
49
49
  display: flex;
50
50
  align-items: center;
51
51
  height: 32px;
52
52
  padding: 8px 12px;
53
53
  cursor: pointer;
54
54
  }
55
- .dropdown-content .user-option[data-v-78875ea6]:hover {
55
+ .dropdown-content .user-option[data-v-d5a338f0]:hover {
56
56
  background-color: #f5f7fa;
57
- }.user-tag[data-v-48ac8fc1] {
57
+ }.user-tag[data-v-1f2e0737] {
58
58
  margin-right: 4px;
59
59
  margin-left: 0;
60
60
  }
61
- .user-tag.draggable[data-v-48ac8fc1] {
61
+ .user-tag.draggable[data-v-1f2e0737] {
62
62
  cursor: move;
63
63
  }
64
- .user-tag.active[data-v-48ac8fc1] {
64
+ .user-tag.active[data-v-1f2e0737] {
65
65
  background-color: #e1ecff;
66
66
  border-color: #3a84ff;
67
67
  }
68
- .user-tag.is-custom[data-v-48ac8fc1] {
68
+ .user-tag.is-custom[data-v-1f2e0737] {
69
69
  color: #ea3636;
70
70
  background-color: #feebea;
71
71
  border-color: rgba(234, 53, 54, 0.3019607843);
72
72
  }
73
- .user-tag.is-custom[data-v-48ac8fc1]:hover {
73
+ .user-tag.is-custom[data-v-1f2e0737]:hover {
74
74
  background-color: #fedddc;
75
75
  }
76
- .user-tag .tag-content .user-name[data-v-48ac8fc1] {
76
+ .user-tag .tag-content .user-name[data-v-1f2e0737] {
77
77
  overflow: hidden;
78
78
  text-overflow: ellipsis;
79
79
  font-size: 12px;
80
80
  white-space: nowrap;
81
- }.multiple-selector[data-v-2a532f24] {
81
+ }.bk-user-selector[data-v-9975c7e1] {
82
82
  position: relative;
83
83
  width: 100%;
84
+ height: 32px;
85
+ font-size: 12px;
84
86
  }
85
- .multiple-selector.is-disabled[data-v-2a532f24] {
87
+ .bk-user-selector.is-disabled[data-v-9975c7e1] {
86
88
  pointer-events: none;
89
+ cursor: not-allowed;
90
+ background-color: #dcdee5;
87
91
  }
88
- .multiple-selector .tags-container[data-v-2a532f24] {
92
+ .bk-user-selector .tags-container[data-v-9975c7e1] {
93
+ position: relative;
89
94
  min-height: 32px;
90
95
  padding: 1px 10px 1px 8px;
91
96
  background-color: #fff;
@@ -93,81 +98,43 @@
93
98
  border-radius: 2px;
94
99
  transition: all 0.2s ease;
95
100
  }
96
- .multiple-selector .tags-container.focused[data-v-2a532f24] {
101
+ .bk-user-selector .tags-container.focused[data-v-9975c7e1] {
97
102
  border-color: #3a84ff;
98
103
  box-shadow: 0 0 0 2px rgba(58, 132, 255, 0.1);
99
104
  }
100
- .multiple-selector .tags-container.collapsed[data-v-2a532f24] {
105
+ .bk-user-selector .tags-container.tags-container-collapsed[data-v-9975c7e1] {
101
106
  display: flex;
102
107
  flex-wrap: wrap;
103
108
  align-items: center;
104
109
  }
105
- .multiple-selector .tag-list[data-v-2a532f24] {
110
+ .bk-user-selector .tag-list[data-v-9975c7e1] {
106
111
  display: flex;
107
112
  flex-wrap: wrap;
108
113
  align-items: center;
109
114
  }
110
- .multiple-selector .tag-wrapper[data-v-2a532f24] {
115
+ .bk-user-selector .tag-wrapper[data-v-9975c7e1] {
111
116
  display: inline-flex;
112
117
  align-items: center;
113
118
  max-width: 100%;
114
119
  }
115
- .multiple-selector .search-input[data-v-2a532f24] {
116
- min-width: 10px;
120
+ .bk-user-selector .search-input[data-v-9975c7e1] {
121
+ min-width: 20px;
117
122
  height: 28px;
118
123
  outline: none;
119
124
  background: transparent;
120
125
  border: none;
121
126
  }
122
- .multiple-selector .search-input[data-v-2a532f24]::placeholder {
127
+ .bk-user-selector .search-input[data-v-9975c7e1]::placeholder {
123
128
  color: #c4c6cc;
124
129
  }
125
- .multiple-selector .search-input.inline[data-v-2a532f24] {
126
- min-width: 10px;
130
+ .bk-user-selector .search-input.input-inline[data-v-9975c7e1] {
131
+ min-width: 20px;
127
132
  }
128
- .multiple-selector .search-input.last[data-v-2a532f24], .multiple-selector .search-input.collapsed[data-v-2a532f24] {
133
+ .bk-user-selector .search-input.input-last[data-v-9975c7e1], .bk-user-selector .search-input.search-input-collapsed[data-v-9975c7e1] {
129
134
  flex: 1;
130
135
  }
131
- .hidden-users[data-v-2a532f24] {
136
+ .hidden-users[data-v-9975c7e1] {
132
137
  padding: 6px 10px;
133
- }.single-selector[data-v-cbe352a6] {
134
- position: relative;
135
- width: 100%;
136
- }
137
- .single-selector.is-disabled[data-v-cbe352a6] {
138
- pointer-events: none;
139
- }
140
- .input-container[data-v-cbe352a6] {
141
- position: relative;
142
- display: flex;
143
- align-items: center;
144
- min-height: 32px;
145
- padding: 0 8px;
146
- background-color: #fff;
147
- border: 1px solid #c4c6cc;
148
- border-radius: 2px;
149
- }
150
- .input-container[data-v-cbe352a6]:focus-within {
151
- border-color: #3a84ff;
152
- box-shadow: 0 0 0 2px rgba(58, 132, 255, 0.1);
153
- }
154
- .search-input[data-v-cbe352a6] {
155
- flex: 1;
156
- height: 30px;
157
- outline: none;
158
- background: transparent;
159
- border: none;
160
- }
161
- .search-input[data-v-cbe352a6]::placeholder {
162
- color: #c4c6cc;
163
- }.bk-user-selector[data-v-9c628c83] {
164
- position: relative;
165
- width: 100%;
166
- font-size: 12px;
167
- }
168
- .bk-user-selector.is-disabled[data-v-9c628c83] {
169
- cursor: not-allowed;
170
- background-color: #dcdee5;
171
138
  }.bk-user-selector-popover {
172
139
  padding: 0 !important;
173
140
  }