@opentiny/vue-search-box 2.27.0 → 2.27.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 (7) hide show
  1. package/index.css +404 -0
  2. package/{es/index.es.js → index.js} +840 -808
  3. package/index.js.map +1 -0
  4. package/package.json +6 -4
  5. package/es/index.es.js.map +0 -1
  6. package/lib/index.cjs.js +0 -2
  7. package/lib/index.cjs.js.map +0 -1
package/index.css ADDED
@@ -0,0 +1,404 @@
1
+ .tiny-popper.tvp-search-box__dropdown-menu,
2
+ .tvp-search-box__popover {
3
+ --tvp-SearchBox-bg-color: var(--tv-color-bg-secondary, #ffffff);
4
+ --tvp-SearchBox-border-color: var(--tv-color-bg-control-unactive, #c2c2c2);
5
+ --tvp-SearchBox-focus-border-color: var(--tv-color-bg-active-primary, #191919);
6
+ --tvp-SearchBox-border-radius: var(--tv-border-radius-md, 6px);
7
+ --tvp-SearchBox-tag-hover-text-color: var(--tv-color-icon-hover, #191919);
8
+ --tvp-SearchBox-tag-hover-fill-color: var(--tvp-SearchBox-tag-hover-text-color);
9
+ --tvp-SearchBox-dropdown-header-text-color: var(--tv-color-text-weaken, #808080);
10
+ --tvp-SearchBox-search-filter-text-color: var(--tv-color-info-text-primary, #191919);
11
+ --tvp-SearchBox-close-icon-margin-right: var(--tv-space-sm, 4px);
12
+ --tvp-SearchBox-separator-icon-margin-right: var(--tv-space-sm, 4px);
13
+ --tvp-SearchBox-right-icon-color: var(--tv-color-icon, #808080);
14
+ --tvp-SearchBox-right-icon-color-hover: var(--tv-color-icon-hover, #191919);
15
+ --tvp-SearchBox-left-icon-font-size: var(--tv-font-size-heading-xs, 16px);
16
+ --tvp-SearchBox-min-height: var(--tv-size-height-md, 32px);
17
+ --tvp-SearchBox-small-min-height: var(--tv-size-height-sm, 28px);
18
+ --tvp-SearchBox-padding-left: var(--tv-size-height-md, 32px);
19
+ --tvp-SearchBox-small-padding-left: var(--tv-size-height-sm, 28px);
20
+ --tvp-SearchBox-dropdown-keyword-text-color: var(--tv-color-act-info-text-active, #1476ff);
21
+ --tvp-SearchBox-dropdown-btn-group-border-color: var(--tv-color-bg-header, #f0f0f0);
22
+ --tvp-SearchBox-dropdown-btn-group-margin-top: var(--tv-space-md, 8px);
23
+ --tvp-SearchBox-dropdown-btn-group-padding-top: var(--tv-space-l, 12px);
24
+ --tvp-SearchBox-dropdown-btn-group-padding-bottom: var(--tv-space-md, 8px);
25
+ --tvp-SearchBox-dropdown-num-title-text-color: var(--tv-color-text-weaken, #808080);
26
+ --tvp-SearchBox-tag-margin-right: var(--tv-space-sm, 4px);
27
+ --tvp-SearchBox-place-padding-right: var(--tv-space-sm, 4px);
28
+ --tvp-SearchBox-tag-bottom-border-color: var(--tv-color-act-primary-text-active, #191919);
29
+ --tvp-SearchBox-tag-font-size: var(--tv-font-size-md, 14px);
30
+ --tvp-SearchBox-small-tag-font-size: var(--tv-font-size-sm, 12px);
31
+ --tvp-SearchBox-dropdown-desc-font-size: var(--tv-font-size-md, 14px);
32
+ --tvp-SearchBox-dropdown-desc-text-color: var(--tv-color-info-text-primary, #191919);
33
+ --tvp-SearchBox-color-bg-scrollbar-thumb: var(--tv-color-bg-scrollbar-thumb, #dbdbdb);
34
+ --tvp-SearchBox-border-radius-scrollbar-thumb: var(--tv-border-radius-scrollbar-thumb, 4px);
35
+ --tvp-SearchBox-color-bg-scrollbar-thumb-active: var(--tv-co lor-bg-scrollbar-thumb-active, #dbdbdb);
36
+ --tvp-SearchBox-date-picker-clear-icon-bg: var(--tv-color-bg-1, #ffffff);
37
+ --tvp-SearchBox-color-border-divider: var(--tv-color-bg-control-unactive, #c2c2c2);
38
+ width: 232px;
39
+ overflow: auto;
40
+ }
41
+ .tiny-popper.tvp-search-box__dropdown-menu::-webkit-scrollbar,
42
+ .tvp-search-box__popover::-webkit-scrollbar {
43
+ width: 8px;
44
+ height: 8px;
45
+ }
46
+ .tiny-popper.tvp-search-box__dropdown-menu::-webkit-scrollbar-corner,
47
+ .tvp-search-box__popover::-webkit-scrollbar-corner {
48
+ background: transparent;
49
+ }
50
+ .tiny-popper.tvp-search-box__dropdown-menu::-webkit-scrollbar-track,
51
+ .tvp-search-box__popover::-webkit-scrollbar-track {
52
+ background: transparent;
53
+ }
54
+ .tiny-popper.tvp-search-box__dropdown-menu::-webkit-scrollbar-thumb,
55
+ .tvp-search-box__popover::-webkit-scrollbar-thumb {
56
+ background: var(--tvp-SearchBox-color-bg-scrollbar-thumb);
57
+ border-radius: var(--tvp-SearchBox-border-radius-scrollbar-thumb);
58
+ }
59
+ .tiny-popper.tvp-search-box__dropdown-menu::-webkit-scrollbar-thumb:hover,
60
+ .tvp-search-box__popover::-webkit-scrollbar-thumb:hover {
61
+ background: var(--tv-color-bg-scrollbar-thumb-hover);
62
+ }
63
+ .tiny-popper.tvp-search-box__dropdown-menu::-webkit-scrollbar-thumb:active,
64
+ .tvp-search-box__popover::-webkit-scrollbar-thumb:active {
65
+ background: var(--tvp-SearchBox-color-bg-scrollbar-thumb-active);
66
+ }
67
+ .tiny-popper.tvp-search-box__dropdown-menu.tiny-popper.tvp-search-box__dropdown-menu .tvp-search-box__date-picker .baseClearicon,
68
+ .tiny-popper.tvp-search-box__dropdown-menu.tvp-search-box__popover .tvp-search-box__date-picker .baseClearicon,
69
+ .tvp-search-box__popover.tiny-popper.tvp-search-box__dropdown-menu .tvp-search-box__date-picker .baseClearicon,
70
+ .tvp-search-box__popover.tvp-search-box__popover .tvp-search-box__date-picker .baseClearicon {
71
+ background-color: var(--tvp-SearchBox-date-picker-clear-icon-bg);
72
+ }
73
+ .tiny-popper.tvp-search-box__dropdown-menu .tiny-form-item.is-error .tvp-search-box-select .tiny-select__tags-group,
74
+ .tvp-search-box__popover .tiny-form-item.is-error .tvp-search-box-select .tiny-select__tags-group {
75
+ border-color: #f23030;
76
+ }
77
+ .tiny-popper.tvp-search-box__dropdown-menu .tvp-search-box-select .tiny-select .tiny-svg,
78
+ .tvp-search-box__popover .tvp-search-box-select .tiny-select .tiny-svg {
79
+ z-index: 1000;
80
+ }
81
+ .tiny-popper.tvp-search-box__dropdown-menu .tvp-search-box-select .tiny-select__tags-group,
82
+ .tvp-search-box__popover .tvp-search-box-select .tiny-select__tags-group {
83
+ min-height: 32px;
84
+ max-height: 82px;
85
+ width: 100%;
86
+ border: 1px solid #c2c2c2;
87
+ border-radius: 6px;
88
+ }
89
+ .tiny-popper.tvp-search-box__dropdown-menu .tvp-search-box-select .tiny-select__tags.is-show-tag,
90
+ .tvp-search-box__popover .tvp-search-box-select .tiny-select__tags.is-show-tag {
91
+ max-width: 276px !important;
92
+ width: calc(100% - 8px) !important;
93
+ min-height: 30px;
94
+ padding-right: 20px;
95
+ max-height: 76px;
96
+ overflow: auto;
97
+ }
98
+ .tiny-popper.tvp-search-box__dropdown-menu .tvp-search-box-select .tiny-input__suffix,
99
+ .tvp-search-box__popover .tvp-search-box-select .tiny-input__suffix {
100
+ z-index: 1000;
101
+ }
102
+ .tiny-popper.tvp-search-box__dropdown-menu .tvp-search-box-select .tiny-input__inner,
103
+ .tvp-search-box__popover .tvp-search-box-select .tiny-input__inner {
104
+ border: 0px;
105
+ overflow: hidden;
106
+ }
107
+ .tiny-popper.tvp-search-box__dropdown-menu input[type='number'],
108
+ .tvp-search-box__popover input[type='number'] {
109
+ -moz-appearance: textfield;
110
+ /* Firefox */
111
+ appearance: textfield;
112
+ }
113
+ .tiny-popper.tvp-search-box__dropdown-menu input[type='number']::-webkit-inner-spin-button,
114
+ .tvp-search-box__popover input[type='number']::-webkit-inner-spin-button,
115
+ .tiny-popper.tvp-search-box__dropdown-menu input[type='number']::-webkit-outer-spin-button,
116
+ .tvp-search-box__popover input[type='number']::-webkit-outer-spin-button {
117
+ -webkit-appearance: none;
118
+ /* Safari */
119
+ margin: 0;
120
+ }
121
+ .tvp-search-box__popover.tiny-popover[x-placement^='bottom'] {
122
+ margin-top: 0;
123
+ }
124
+ .tvp-search-box {
125
+ --tvp-SearchBox-bg-color: var(--tv-color-bg-secondary, #ffffff);
126
+ --tvp-SearchBox-border-color: var(--tv-color-bg-control-unactive, #c2c2c2);
127
+ --tvp-SearchBox-focus-border-color: var(--tv-color-bg-active-primary, #191919);
128
+ --tvp-SearchBox-border-radius: var(--tv-border-radius-md, 6px);
129
+ --tvp-SearchBox-tag-hover-text-color: var(--tv-color-icon-hover, #191919);
130
+ --tvp-SearchBox-tag-hover-fill-color: var(--tvp-SearchBox-tag-hover-text-color);
131
+ --tvp-SearchBox-dropdown-header-text-color: var(--tv-color-text-weaken, #808080);
132
+ --tvp-SearchBox-search-filter-text-color: var(--tv-color-info-text-primary, #191919);
133
+ --tvp-SearchBox-close-icon-margin-right: var(--tv-space-sm, 4px);
134
+ --tvp-SearchBox-separator-icon-margin-right: var(--tv-space-sm, 4px);
135
+ --tvp-SearchBox-right-icon-color: var(--tv-color-icon, #808080);
136
+ --tvp-SearchBox-right-icon-color-hover: var(--tv-color-icon-hover, #191919);
137
+ --tvp-SearchBox-left-icon-font-size: var(--tv-font-size-heading-xs, 16px);
138
+ --tvp-SearchBox-min-height: var(--tv-size-height-md, 32px);
139
+ --tvp-SearchBox-small-min-height: var(--tv-size-height-sm, 28px);
140
+ --tvp-SearchBox-padding-left: var(--tv-size-height-md, 32px);
141
+ --tvp-SearchBox-small-padding-left: var(--tv-size-height-sm, 28px);
142
+ --tvp-SearchBox-dropdown-keyword-text-color: var(--tv-color-act-info-text-active, #1476ff);
143
+ --tvp-SearchBox-dropdown-btn-group-border-color: var(--tv-color-bg-header, #f0f0f0);
144
+ --tvp-SearchBox-dropdown-btn-group-margin-top: var(--tv-space-md, 8px);
145
+ --tvp-SearchBox-dropdown-btn-group-padding-top: var(--tv-space-l, 12px);
146
+ --tvp-SearchBox-dropdown-btn-group-padding-bottom: var(--tv-space-md, 8px);
147
+ --tvp-SearchBox-dropdown-num-title-text-color: var(--tv-color-text-weaken, #808080);
148
+ --tvp-SearchBox-tag-margin-right: var(--tv-space-sm, 4px);
149
+ --tvp-SearchBox-place-padding-right: var(--tv-space-sm, 4px);
150
+ --tvp-SearchBox-tag-bottom-border-color: var(--tv-color-act-primary-text-active, #191919);
151
+ --tvp-SearchBox-tag-font-size: var(--tv-font-size-md, 14px);
152
+ --tvp-SearchBox-small-tag-font-size: var(--tv-font-size-sm, 12px);
153
+ --tvp-SearchBox-dropdown-desc-font-size: var(--tv-font-size-md, 14px);
154
+ --tvp-SearchBox-dropdown-desc-text-color: var(--tv-color-info-text-primary, #191919);
155
+ --tvp-SearchBox-color-bg-scrollbar-thumb: var(--tv-color-bg-scrollbar-thumb, #dbdbdb);
156
+ --tvp-SearchBox-border-radius-scrollbar-thumb: var(--tv-border-radius-scrollbar-thumb, 4px);
157
+ --tvp-SearchBox-color-bg-scrollbar-thumb-active: var(--tv-co lor-bg-scrollbar-thumb-active, #dbdbdb);
158
+ --tvp-SearchBox-date-picker-clear-icon-bg: var(--tv-color-bg-1, #ffffff);
159
+ --tvp-SearchBox-color-border-divider: var(--tv-color-bg-control-unactive, #c2c2c2);
160
+ display: flex;
161
+ position: relative;
162
+ flex-wrap: wrap;
163
+ align-items: center;
164
+ justify-content: flex-start;
165
+ border: 1px solid var(--tvp-SearchBox-border-color);
166
+ border-radius: var(--tvp-SearchBox-border-radius);
167
+ min-height: var(--tvp-SearchBox-min-height);
168
+ padding-left: var(--tvp-SearchBox-padding-left);
169
+ background-color: var(--tvp-SearchBox-bg-color);
170
+ }
171
+ .tvp-search-box__form {
172
+ width: auto;
173
+ flex: 1;
174
+ min-width: 200px;
175
+ }
176
+ .tvp-search-box__form-popover {
177
+ position: absolute;
178
+ }
179
+ .tvp-search-box:focus-within {
180
+ border-color: var(--tvp-SearchBox-focus-border-color);
181
+ }
182
+ .tvp-search-box > .tvp-search-box__prefix {
183
+ position: absolute;
184
+ top: calc((var(--tvp-SearchBox-min-height) - var(--tvp-SearchBox-left-icon-font-size)) / 2 - 1px);
185
+ left: 12px;
186
+ display: inline;
187
+ font-size: var(--tvp-SearchBox-left-icon-font-size);
188
+ fill: #808080;
189
+ }
190
+ .tvp-search-box__text-highlight {
191
+ color: var(--tvp-SearchBox-dropdown-keyword-text-color);
192
+ }
193
+ .tvp-search-box__placeholder {
194
+ padding-right: var(--tvp-SearchBox-place-padding-right);
195
+ }
196
+ .tvp-search-box__tag {
197
+ margin: 1px var(--tvp-SearchBox-tag-margin-right) 1px 0;
198
+ max-width: 100%;
199
+ }
200
+ .tvp-search-box__tag > .tvp-search-box__tag-value {
201
+ overflow: hidden;
202
+ text-overflow: ellipsis;
203
+ }
204
+ .tvp-search-box__tag:hover {
205
+ cursor: pointer;
206
+ color: var(--tvp-SearchBox-tag-hover-text-color);
207
+ fill: var(--tvp-SearchBox-tag-hover-fill-color);
208
+ }
209
+ .tvp-search-box__tag-editor span {
210
+ border-bottom: 1px dashed var(--tvp-SearchBox-tag-bottom-border-color);
211
+ line-height: 1;
212
+ }
213
+ .tvp-search-box__input .tiny-input-display-only {
214
+ width: calc(100% - var(--tv-Input-suffix-right) - 63px);
215
+ }
216
+ .tvp-search-box__input .tiny-svg {
217
+ margin-left: 0;
218
+ }
219
+ .tvp-search-box__input-close {
220
+ margin-right: var(--tvp-SearchBox-close-icon-margin-right);
221
+ }
222
+ .tvp-search-box__input-separator {
223
+ display: inline-block;
224
+ margin-right: var(--tvp-SearchBox-separator-icon-margin-right);
225
+ height: 14px;
226
+ width: 1px;
227
+ background-color: var(--tvp-SearchBox-color-border-divider);
228
+ }
229
+ .tvp-search-box__input-help {
230
+ margin-right: 0px;
231
+ }
232
+ .tvp-search-box__input .tvp-search-box__input-search {
233
+ display: none;
234
+ margin-right: 2px;
235
+ }
236
+ .tvp-search-box__input-wrapper {
237
+ display: flex;
238
+ align-items: center;
239
+ width: 100%;
240
+ }
241
+ .tvp-search-box .tvp-search-box__dropdown:not(.is-disabled) .tvp-search-box__input:not(.is-disabled) .tiny-input__suffix .tiny-svg {
242
+ font-size: 16px;
243
+ margin-top: 0;
244
+ fill: var(--tvp-SearchBox-right-icon-color);
245
+ }
246
+ .tvp-search-box .tvp-search-box__dropdown:not(.is-disabled) .tvp-search-box__input:not(.is-disabled) .tiny-input__suffix .tiny-svg:hover {
247
+ fill: var(--tvp-SearchBox-right-icon-color-hover);
248
+ }
249
+ .tvp-search-box .tvp-search-box__dropdown:not(.is-disabled) .tvp-search-box__input:not(.is-disabled) .tiny-input__suffix-inner {
250
+ display: flex;
251
+ align-items: center;
252
+ }
253
+ .tvp-search-box__prop {
254
+ white-space: nowrap;
255
+ vertical-align: middle;
256
+ font-size: var(--tvp-SearchBox-tag-font-size);
257
+ color: var(--tvp-SearchBox-dropdown-desc-text-color);
258
+ }
259
+ .tvp-search-box__prop span {
260
+ padding-left: 8px;
261
+ }
262
+ .tvp-search-box .tiny-dropdown__trigger {
263
+ display: block;
264
+ }
265
+ .tvp-search-box .tiny-dropdown__trigger:focus-visible {
266
+ outline: none;
267
+ }
268
+ .tvp-search-box .tiny-dropdown__trigger .tiny-dropdown__title {
269
+ width: 100%;
270
+ }
271
+ .tvp-search-box__dropdown {
272
+ display: block;
273
+ flex: 1;
274
+ }
275
+ .tvp-search-box__loading-box {
276
+ min-height: 32px;
277
+ }
278
+ .tvp-search-box__radio-wrap {
279
+ max-height: 240px;
280
+ overflow: auto;
281
+ }
282
+ .tvp-search-box__checkbox-wrap {
283
+ max-height: 186px;
284
+ overflow: auto;
285
+ }
286
+ .tvp-search-box__checkbox {
287
+ flex-direction: column;
288
+ }
289
+ .tvp-search-box__bottom-btn,
290
+ .tvp-search-box__checkbox-btn {
291
+ display: flex;
292
+ margin: 0 10px;
293
+ border-top: 1px solid var(--tvp-SearchBox-dropdown-btn-group-border-color);
294
+ margin-top: var(--tvp-SearchBox-dropdown-btn-group-margin-top);
295
+ padding-top: var(--tvp-SearchBox-dropdown-btn-group-padding-top);
296
+ justify-content: flex-end;
297
+ padding-bottom: var(--tvp-SearchBox-dropdown-btn-group-padding-bottom);
298
+ }
299
+ .tvp-search-box__bottom-btn .tiny-button,
300
+ .tvp-search-box__checkbox-btn .tiny-button {
301
+ min-width: 72px;
302
+ }
303
+ .tvp-search-box__bottom-btn {
304
+ margin-right: 0px;
305
+ margin-left: 0px;
306
+ }
307
+ .tvp-search-box__filter-type {
308
+ display: inline-block;
309
+ padding: 0 16px;
310
+ margin-top: 12px;
311
+ height: 18px;
312
+ line-height: 18px;
313
+ font-weight: 500;
314
+ white-space: nowrap;
315
+ overflow: hidden;
316
+ text-overflow: ellipsis;
317
+ color: var(--tvp-SearchBox-dropdown-header-text-color);
318
+ }
319
+ .tvp-search-box__potential-box {
320
+ min-height: 30px;
321
+ }
322
+ .tvp-search-box__filter-item {
323
+ color: var(--tvp-SearchBox-search-filter-text-color);
324
+ background-color: var(--tvp-SearchBox-bg-color);
325
+ }
326
+ .tvp-search-box__dropdown-item.tiny-dropdown-item .tiny-dropdown-item__content.tiny-dropdown-menu__item-content {
327
+ white-space: nowrap;
328
+ overflow: hidden;
329
+ text-overflow: ellipsis;
330
+ }
331
+ .tvp-search-box__dropdown-item.tiny-dropdown-item.tvp-search-box__checkbox-item .tiny-checkbox__inner > .tiny-svg {
332
+ margin-right: 0;
333
+ }
334
+ .tvp-search-box__checkbox-item .tvp-search-box__checkbox-item-label,
335
+ .tvp-search-box__checkbox-item .tiny-checkbox,
336
+ .tvp-search-box__checkbox-item .tiny-dropdown-item__label {
337
+ width: 100%;
338
+ }
339
+ .tvp-search-box__checkbox-item-label .tiny-checkbox__label {
340
+ width: 100%;
341
+ overflow: hidden;
342
+ text-overflow: ellipsis;
343
+ padding-top: 4px;
344
+ }
345
+ .tvp-search-box__checkbox-item .tiny-dropdown-item__wrap {
346
+ padding: 0;
347
+ }
348
+ .tvp-search-box__checkbox-item .tiny-checkbox {
349
+ padding: 6px 10px;
350
+ padding-left: 0;
351
+ }
352
+ .tvp-search-box__dropdown-title {
353
+ margin: 8px 0px;
354
+ line-height: 18px;
355
+ color: var(--tvp-SearchBox-dropdown-num-title-text-color);
356
+ font-size: 12px;
357
+ }
358
+ .tvp-search-box__dropdown-start,
359
+ .tvp-search-box__dropdown-end {
360
+ margin: 8px 0px;
361
+ font-size: var(--tvp-SearchBox-dropdown-desc-font-size);
362
+ color: var(--tvp-SearchBox-dropdown-desc-text-color);
363
+ letter-spacing: 0;
364
+ line-height: 1.5;
365
+ }
366
+ .tvp-search-box__panel-box {
367
+ padding: 0px 10px;
368
+ overflow: hidden;
369
+ color: var(--tvp-SearchBox-dropdown-desc-text-color);
370
+ }
371
+ .tvp-search-box__date-item.tiny-form-item,
372
+ .tvp-search-box__number-item.tiny-form-item {
373
+ padding-bottom: 8px;
374
+ margin-bottom: 0;
375
+ }
376
+ .tvp-search-box__date-item.tiny-form-item > div,
377
+ .tvp-search-box__number-item.tiny-form-item > div {
378
+ width: 100%;
379
+ white-space: nowrap;
380
+ }
381
+ .tvp-search-box__date-item.tiny-form-item .tiny-form-item__error,
382
+ .tvp-search-box__number-item.tiny-form-item .tiny-form-item__error {
383
+ font-size: 12px;
384
+ }
385
+ .tvp-search-box__input input {
386
+ border: 0;
387
+ }
388
+ .tvp-search-box__input-wrapper .tvp-search-box__dropdown .tvp-search-box__input .tiny-input__inner {
389
+ padding-left: 0px;
390
+ }
391
+ .tvp-search-box--small {
392
+ min-height: var(--tvp-SearchBox-small-min-height);
393
+ padding-left: var(--tvp-SearchBox-small-padding-left);
394
+ }
395
+ .tvp-search-box--small > .tvp-search-box__prefix {
396
+ top: calc((var(--tvp-SearchBox-small-min-height) - var(--tvp-SearchBox-left-icon-font-size)) / 2 - 1px);
397
+ left: 10px;
398
+ }
399
+ .tvp-search-box--small .tvp-search-box__prop {
400
+ font-size: var(--tvp-SearchBox-small-tag-font-size);
401
+ }
402
+ .tvp-search-box--small .tvp-search-box__prop span {
403
+ padding-left: 8px;
404
+ }