@canlooks/can-ui 0.0.150 → 0.0.152

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 (31) hide show
  1. package/dist/cjs/components/app/app.style.js +1 -0
  2. package/dist/cjs/components/sortableItem/sortableItem.d.ts +2 -2
  3. package/dist/cjs/components/sortableItem/sortableItem.js +1 -2
  4. package/dist/cjs/components/sortableItem/sortableItem.style.js +6 -4
  5. package/dist/cjs/components/tabs/lineIndicator.d.ts +1 -2
  6. package/dist/cjs/components/tabs/lineIndicator.js +3 -2
  7. package/dist/cjs/components/tabs/tab.d.ts +7 -3
  8. package/dist/cjs/components/tabs/tab.js +17 -6
  9. package/dist/cjs/components/tabs/tabs.d.ts +23 -9
  10. package/dist/cjs/components/tabs/tabs.js +28 -10
  11. package/dist/cjs/components/tabs/tabs.style.d.ts +2 -1
  12. package/dist/cjs/components/tabs/tabs.style.js +283 -271
  13. package/dist/cjs/utils/dnd.d.ts +1 -1
  14. package/dist/cjs/utils/utils.d.ts +2 -2
  15. package/dist/cjs/utils/utils.js +15 -4
  16. package/dist/esm/components/app/app.style.js +1 -0
  17. package/dist/esm/components/sortableItem/sortableItem.d.ts +2 -2
  18. package/dist/esm/components/sortableItem/sortableItem.js +2 -3
  19. package/dist/esm/components/sortableItem/sortableItem.style.js +6 -4
  20. package/dist/esm/components/tabs/lineIndicator.d.ts +1 -2
  21. package/dist/esm/components/tabs/lineIndicator.js +3 -2
  22. package/dist/esm/components/tabs/tab.d.ts +7 -3
  23. package/dist/esm/components/tabs/tab.js +17 -6
  24. package/dist/esm/components/tabs/tabs.d.ts +23 -9
  25. package/dist/esm/components/tabs/tabs.js +29 -11
  26. package/dist/esm/components/tabs/tabs.style.d.ts +2 -1
  27. package/dist/esm/components/tabs/tabs.style.js +283 -271
  28. package/dist/esm/utils/dnd.d.ts +1 -1
  29. package/dist/esm/utils/utils.d.ts +2 -2
  30. package/dist/esm/utils/utils.js +15 -4
  31. package/package.json +1 -1
package/dist/cjs/components/tabs/tabs.style.js CHANGED
@@ -16,386 +16,398 @@ exports.classes = (0, utils_1.defineInnerClasses)('tabs', [
16
16
  'label',
17
17
  'tabPrefix',
18
18
  'tabSuffix',
19
+ 'tabClose',
19
20
  'indicator'
20
21
  ]);
21
22
  exports.indicatorWidth = 2;
22
23
  function useStyle({ color, variant }) {
23
24
  const colorValue = (0, utils_1.useColor)(color);
24
25
  return (0, utils_1.useCss)(({ divider, text, easing, background, spacing, borderRadius, gray }) => {
25
- const commonStyle = (0, react_1.css) `
26
- display: flex;
27
- position: relative;
28
- overflow: hidden;
29
-
30
- .${exports.classes.scroll} {
31
- flex: 1;
32
- display: flex;
33
- overflow: auto;
34
- scrollbar-width: none;
35
- position: relative;
36
-
37
- &::-webkit-scrollbar {
38
- display: none;
39
- }
40
-
41
- .${exports.classes.scrollWrap} {
42
- flex: 1;
26
+ return [
27
+ (0, react_1.css) `
28
+ @layer reset {
43
29
  display: flex;
44
30
  position: relative;
45
- }
46
- }
31
+ overflow: hidden;
47
32
 
48
- .${exports.classes.start}, .${exports.classes.end} {
49
- display: flex;
50
- z-index: 2;
51
- border-bottom: 1px solid ${divider};
52
- transition: box-shadow .25s ${easing.easeOut};
53
-
54
- &[data-show=true] {
55
- box-shadow: 0 0 12px rgba(0, 0, 0, .2);
56
- }
57
- }
58
-
59
- .${exports.classes.prefix}, .${exports.classes.suffix} {
60
- flex: 1;
61
- display: flex;
62
- align-items: center;
63
- justify-content: center;
64
- background-color: ${background.content};
65
- }
66
-
67
- .${exports.classes.ellipsis} {
68
- height: 100%;
69
- display: flex;
70
- align-items: center;
71
- margin-right: ${spacing[6]}px;
72
- cursor: pointer;
73
-
74
- &:hover {
75
- color: ${colorValue};
76
- }
77
- }
33
+ .${exports.classes.scroll} {
34
+ flex: 1;
35
+ display: flex;
36
+ scrollbar-width: none;
37
+ position: relative;
78
38
 
79
- &[data-position=top],
80
- &[data-position=bottom] {
81
- .${exports.classes.prefix}, .${exports.classes.suffix} {
82
- padding: 0 16px;
83
- }
39
+ &::-webkit-scrollbar {
40
+ display: none;
41
+ }
84
42
 
85
- &[data-size=small] {
86
- .${exports.classes.prefix}, .${exports.classes.suffix} {
87
- padding: 0 14px;
43
+ .${exports.classes.scrollWrap} {
44
+ flex: 1;
45
+ display: flex;
46
+ position: relative;
47
+ }
88
48
  }
89
- }
90
-
91
- &[data-size=large] {
92
- .${exports.classes.prefix}, .${exports.classes.suffix} {
93
- padding: 0 18px;
49
+
50
+ &:not(:has([data-dragging=true])) {
51
+ overflow: auto;
94
52
  }
95
- }
96
- }
97
53
 
98
- &[data-position=left],
99
- &[data-position=right] {
100
- .${exports.classes.prefix}, .${exports.classes.suffix} {
101
- padding: 12px 0;
102
- }
54
+ .${exports.classes.start}, .${exports.classes.end} {
55
+ display: flex;
56
+ z-index: 2;
57
+ border-bottom: 1px solid ${divider};
58
+ transition: box-shadow .25s ${easing.easeOut};
103
59
 
104
- &[data-size=small] {
105
- .${exports.classes.prefix}, .${exports.classes.suffix} {
106
- padding: 10px 0;
60
+ &[data-show=true] {
61
+ box-shadow: 0 0 12px rgba(0, 0, 0, .2);
62
+ }
107
63
  }
108
- }
109
64
 
110
- &[data-size=large] {
111
65
  .${exports.classes.prefix}, .${exports.classes.suffix} {
112
- padding: 14px 0;
66
+ flex: 1;
67
+ display: flex;
68
+ align-items: center;
69
+ justify-content: center;
70
+ background-color: ${background.content};
113
71
  }
114
- }
115
- }
116
-
117
- &::after {
118
- content: '';
119
- background-color: ${divider};
120
- position: absolute;
121
- }
122
-
123
- .${exports.classes.tab} {
124
- display: flex;
125
- align-items: center;
126
- justify-content: center;
127
- flex-shrink: 0;
128
- gap: 6px;
129
- white-space: nowrap;
130
- text-overflow: ellipsis;
131
- overflow: hidden;
132
- z-index: 1;
133
- -webkit-tap-highlight-color: transparent;
134
-
135
- &[data-orientation=vertical] {
136
- flex-direction: column;
137
- }
138
72
 
139
- &[data-disabled=true] {
140
- cursor: not-allowed;
141
- color: ${text.disabled};
142
- }
143
- }
73
+ .${exports.classes.ellipsis} {
74
+ height: 100%;
75
+ display: flex;
76
+ align-items: center;
77
+ margin-right: ${spacing[6]}px;
78
+ cursor: pointer;
144
79
 
145
- &[data-full-width=true] {
146
- .${exports.classes.tab} {
147
- flex: 1;
148
- }
149
- }
80
+ &:hover {
81
+ color: ${colorValue};
82
+ }
83
+ }
150
84
 
151
- &[data-position=top],
152
- &[data-position=bottom] {
153
- &::after {
154
- height: 1px;
155
- }
85
+ &[data-position=top],
86
+ &[data-position=bottom] {
87
+ .${exports.classes.prefix}, .${exports.classes.suffix} {
88
+ padding: 0 ${borderRadius}px;
89
+ }
156
90
 
157
- &[data-position=top] {
158
- &::after {
159
- inset: auto 0 0 0;
160
- }
161
- }
91
+ &[data-size=small] {
92
+ .${exports.classes.prefix}, .${exports.classes.suffix} {
93
+ padding: 0 14px;
94
+ }
95
+ }
162
96
 
163
- &[data-position=bottom] {
164
- &::after {
165
- inset: 0 0 auto 0;
97
+ &[data-size=large] {
98
+ .${exports.classes.prefix}, .${exports.classes.suffix} {
99
+ padding: 0 18px;
100
+ }
101
+ }
166
102
  }
167
- }
168
- }
169
103
 
170
- &[data-position=left],
171
- &[data-position=right] {
172
- &, .${exports.classes.scrollWrap} {
173
- flex-direction: column;
174
- }
104
+ &[data-position=left],
105
+ &[data-position=right] {
106
+ .${exports.classes.prefix}, .${exports.classes.suffix} {
107
+ padding: 12px 0;
108
+ }
175
109
 
176
- &::after {
177
- width: 1px;
178
- }
110
+ &[data-size=small] {
111
+ .${exports.classes.prefix}, .${exports.classes.suffix} {
112
+ padding: 10px 0;
113
+ }
114
+ }
179
115
 
180
- &[data-position=left] {
181
- &::after {
182
- inset: 0 0 0 auto;
116
+ &[data-size=large] {
117
+ .${exports.classes.prefix}, .${exports.classes.suffix} {
118
+ padding: 14px 0;
119
+ }
120
+ }
183
121
  }
184
- }
185
122
 
186
- &[data-position=right] {
187
123
  &::after {
188
- inset: 0 auto 0 0;
124
+ content: '';
125
+ background-color: ${divider};
126
+ position: absolute;
189
127
  }
190
- }
191
- }
192
128
 
193
- &:not([data-read-only=true]):not([data-disabled=true]) {
194
- .${exports.classes.tab}:not([data-disabled=true]) {
195
- cursor: pointer;
129
+ .${exports.classes.tab} {
130
+ display: flex;
131
+ align-items: center;
132
+ justify-content: center;
133
+ flex-shrink: 0;
134
+ gap: 6px;
135
+ white-space: nowrap;
136
+ text-overflow: ellipsis;
137
+ overflow: hidden;
138
+ z-index: 1;
139
+ -webkit-tap-highlight-color: transparent;
140
+
141
+ &[data-orientation=vertical] {
142
+ flex-direction: column;
143
+ }
196
144
 
197
- &:not([data-active=true]):hover {
198
- color: ${gray(.65)};
145
+ &[data-disabled=true] {
146
+ cursor: not-allowed;
147
+ color: ${text.disabled};
148
+ }
199
149
  }
200
150
 
201
- &:not([data-active=true]):active {
202
- transition: color 0s;
203
- color: ${text.primary};
151
+ &[data-full-width=true] {
152
+ .${exports.classes.tab} {
153
+ flex: 1;
154
+ }
204
155
  }
205
- }
206
- }
207
156
 
208
- &[data-disabled=true] {
209
- .${exports.classes.tab} {
210
- cursor: not-allowed;
211
- }
212
- }
213
- `;
214
- return variant === 'line'
215
- ? (0, react_1.css) `
216
- @layer reset {
217
- ${commonStyle}
218
- .${exports.classes.scrollWrap} {
219
- gap: 0 ${spacing[10]}px;
157
+ &[data-position=top],
158
+ &[data-position=bottom] {
159
+ &::after {
160
+ height: 1px;
220
161
  }
221
162
 
222
- .${exports.classes.tab} {
223
- transition: color .25s ${easing.easeOut};
163
+ &[data-position=top] {
164
+ &::after {
165
+ inset: auto 0 0 0;
166
+ }
224
167
  }
225
168
 
226
- &[data-position=top],
227
169
  &[data-position=bottom] {
228
- .${exports.classes.tab} {
229
- padding: 10px 0;
230
- }
231
-
232
- &[data-size=small] {
233
- .${exports.classes.tab} {
234
- padding: 6px 0;
235
- }
170
+ &::after {
171
+ inset: 0 0 auto 0;
236
172
  }
173
+ }
174
+ }
237
175
 
238
- &[data-size=large] {
239
- .${exports.classes.tab} {
240
- padding: 14px 0;
241
- }
242
- }
176
+ &[data-position=left],
177
+ &[data-position=right] {
178
+ &, .${exports.classes.scrollWrap} {
179
+ flex-direction: column;
243
180
  }
244
181
 
245
- &[data-position=top] {
246
- .${exports.classes.tab} {
247
- border-bottom: ${exports.indicatorWidth}px solid transparent;
248
- }
182
+ &::after {
183
+ width: 1px;
249
184
  }
250
185
 
251
- &[data-position=bottom] {
252
- .${exports.classes.tab} {
253
- border-top: ${exports.indicatorWidth}px solid transparent;
186
+ &[data-position=left] {
187
+ &::after {
188
+ inset: 0 0 0 auto;
254
189
  }
255
190
  }
256
191
 
257
- &[data-position=left],
258
192
  &[data-position=right] {
259
- .${exports.classes.tab} {
260
- padding: 10px 18px;
193
+ &::after {
194
+ inset: 0 auto 0 0;
261
195
  }
196
+ }
197
+ }
262
198
 
263
- &[data-size=small] {
264
- .${exports.classes.tab} {
265
- padding: 6px 18px;
266
- }
199
+ &:not([data-read-only=true]):not([data-disabled=true]) {
200
+ .${exports.classes.tab}:not([data-disabled=true]) {
201
+ cursor: pointer;
202
+
203
+ &:not([data-active=true]):hover {
204
+ color: ${gray(.65)};
267
205
  }
268
206
 
269
- &[data-size=large] {
270
- .${exports.classes.tab} {
271
- padding: 14px 18px;
272
- }
207
+ &:not([data-active=true]):active {
208
+ transition: color 0s;
209
+ color: ${text.primary};
273
210
  }
274
211
  }
212
+ }
275
213
 
276
- &[data-position=left] {
277
- .${exports.classes.tab} {
278
- border-right: ${exports.indicatorWidth}px solid transparent;
279
- }
214
+ &[data-disabled=true] {
215
+ .${exports.classes.tab} {
216
+ cursor: not-allowed;
280
217
  }
218
+ }
219
+ }
220
+
221
+ @layer override {
222
+ .${exports.classes.tabClose} {
223
+ padding: 0 3px;
224
+ }
225
+ }
226
+ `,
227
+ variant === 'line'
228
+ ? (0, react_1.css) `
229
+ @layer reset {
230
+ .${exports.classes.scrollWrap} {
231
+ gap: 0 ${spacing[10]}px;
232
+ }
281
233
 
282
- &[data-position=right] {
283
234
  .${exports.classes.tab} {
284
- border-left: ${exports.indicatorWidth}px solid transparent;
235
+ transition: color .25s ${easing.easeOut};
285
236
  }
286
- }
287
237
 
288
- .${exports.classes.indicator} {
289
- position: absolute;
290
- z-index: 1;
291
- transition-property: width, height, left, top;
292
- transition-duration: .3s;
293
- transition-timing-function: ${easing.bounce};
294
- }
238
+ &[data-position=top],
239
+ &[data-position=bottom] {
240
+ .${exports.classes.tab} {
241
+ padding: 10px 0;
242
+ }
295
243
 
296
- &:not([data-animating=true]) {
297
- .${exports.classes.indicator} {
298
- display: none;
244
+ &[data-size=small] {
245
+ .${exports.classes.tab} {
246
+ padding: 6px 0;
247
+ }
248
+ }
249
+
250
+ &[data-size=large] {
251
+ .${exports.classes.tab} {
252
+ padding: 14px 0;
253
+ }
254
+ }
299
255
  }
300
- }
301
- }
302
- `
303
- // variant === 'card'
304
- : (0, react_1.css) `
305
- @layer reset {
306
- ${commonStyle}
307
- .${exports.classes.scrollWrap} {
308
- gap: ${spacing[1]}px;
309
- }
310
256
 
311
- .${exports.classes.tab} {
312
- border: 1px solid ${gray(.1)};
313
- background-color: ${background.body};
314
- transition: color .25s ${easing.easeOut}, background-color .25s ${easing.easeOut};
257
+ &[data-position=top] {
258
+ .${exports.classes.tab} {
259
+ border-bottom: ${exports.indicatorWidth}px solid transparent;
260
+ }
261
+ }
315
262
 
316
- &[data-active=true] {
317
- background-color: ${background.content};
263
+ &[data-position=bottom] {
264
+ .${exports.classes.tab} {
265
+ border-top: ${exports.indicatorWidth}px solid transparent;
266
+ }
318
267
  }
319
- }
320
268
 
321
- &[data-position=top],
322
- &[data-position=bottom] {
323
- .${exports.classes.tab} {
324
- padding: 10px 15px;
269
+ &[data-position=left],
270
+ &[data-position=right] {
271
+ .${exports.classes.tab} {
272
+ padding: 10px 18px;
273
+ }
274
+
275
+ &[data-size=small] {
276
+ .${exports.classes.tab} {
277
+ padding: 6px 18px;
278
+ }
279
+ }
280
+
281
+ &[data-size=large] {
282
+ .${exports.classes.tab} {
283
+ padding: 14px 18px;
284
+ }
285
+ }
325
286
  }
326
287
 
327
- &[data-size=small] {
288
+ &[data-position=left] {
328
289
  .${exports.classes.tab} {
329
- padding: 6px 15px;
290
+ border-right: ${exports.indicatorWidth}px solid transparent;
330
291
  }
331
292
  }
332
293
 
333
- &[data-size=large] {
294
+ &[data-position=right] {
334
295
  .${exports.classes.tab} {
335
- padding: 14px 15px;
296
+ border-left: ${exports.indicatorWidth}px solid transparent;
336
297
  }
337
298
  }
338
- }
339
299
 
340
- &[data-position=top] {
341
- .${exports.classes.tab} {
342
- border-radius: ${borderRadius}px ${borderRadius}px 0 0;
300
+ .${exports.classes.indicator} {
301
+ position: absolute;
302
+ z-index: 1;
303
+ transition-property: width, height, left, top;
304
+ transition-duration: .3s;
305
+ transition-timing-function: ${easing.bounce};
306
+ }
343
307
 
344
- &[data-active=true] {
345
- border-bottom-color: ${background.content};
308
+ &:not([data-animating=true]) {
309
+ .${exports.classes.indicator} {
310
+ display: none;
346
311
  }
347
312
  }
348
313
  }
314
+ `
315
+ // variant === 'card'
316
+ : (0, react_1.css) `
317
+ @layer reset {
318
+ .${exports.classes.scrollWrap} {
319
+ gap: ${spacing[1]}px;
320
+ }
349
321
 
350
- &[data-position=bottom] {
351
322
  .${exports.classes.tab} {
352
- border-radius: 0 0 ${borderRadius}px ${borderRadius}px;
323
+ border: 1px solid ${gray(.1)};
324
+ background-color: ${background.body};
325
+ transition: color .25s ${easing.easeOut}, background-color .25s ${easing.easeOut};
353
326
 
354
327
  &[data-active=true] {
355
- border-top-color: ${background.content};
328
+ background-color: ${background.content};
356
329
  }
357
330
  }
358
- }
359
331
 
360
- &[data-position=left],
361
- &[data-position=right] {
362
- .${exports.classes.tab} {
363
- padding: 9px 18px;
332
+ &[data-position=top],
333
+ &[data-position=bottom] {
334
+ .${exports.classes.tab} {
335
+ padding: 10px 15px;
336
+ }
337
+
338
+ &[data-size=small] {
339
+ .${exports.classes.tab} {
340
+ padding: 6px 15px;
341
+ }
342
+ }
343
+
344
+ &[data-size=large] {
345
+ .${exports.classes.tab} {
346
+ padding: 14px 15px;
347
+ }
348
+ }
364
349
  }
365
350
 
366
- &[data-size=small] {
351
+ &[data-position=top] {
367
352
  .${exports.classes.tab} {
368
- padding: 5px 18px;
353
+ border-radius: ${borderRadius}px ${borderRadius}px 0 0;
354
+
355
+ &[data-active=true] {
356
+ border-bottom-color: ${background.content};
357
+ }
369
358
  }
370
359
  }
371
360
 
372
- &[data-size=large] {
361
+ &[data-position=bottom] {
373
362
  .${exports.classes.tab} {
374
- padding: 13px 18px;
363
+ border-radius: 0 0 ${borderRadius}px ${borderRadius}px;
364
+
365
+ &[data-active=true] {
366
+ border-top-color: ${background.content};
367
+ }
375
368
  }
376
369
  }
377
- }
378
370
 
379
- &[data-position=left] {
380
- .${exports.classes.tab} {
381
- border-radius: ${borderRadius}px 0 0 ${borderRadius}px;
371
+ &[data-position=left],
372
+ &[data-position=right] {
373
+ .${exports.classes.tab} {
374
+ padding: 9px 18px;
375
+ }
382
376
 
383
- &[data-active=true] {
384
- border-right-color: ${background.content};
377
+ &[data-size=small] {
378
+ .${exports.classes.tab} {
379
+ padding: 5px 18px;
380
+ }
381
+ }
382
+
383
+ &[data-size=large] {
384
+ .${exports.classes.tab} {
385
+ padding: 13px 18px;
386
+ }
385
387
  }
386
388
  }
387
- }
388
389
 
389
- &[data-position=right] {
390
- .${exports.classes.tab} {
391
- border-radius: 0 ${borderRadius}px ${borderRadius}px 0;
390
+ &[data-position=left] {
391
+ .${exports.classes.tab} {
392
+ border-radius: ${borderRadius}px 0 0 ${borderRadius}px;
392
393
 
393
- &[data-active=true] {
394
- border-left-color: ${background.content};
394
+ &[data-active=true] {
395
+ border-right-color: ${background.content};
396
+ }
397
+ }
398
+ }
399
+
400
+ &[data-position=right] {
401
+ .${exports.classes.tab} {
402
+ border-radius: 0 ${borderRadius}px ${borderRadius}px 0;
403
+
404
+ &[data-active=true] {
405
+ border-left-color: ${background.content};
406
+ }
395
407
  }
396
408
  }
397
409
  }
398
- }
399
- `;
410
+ `
411
+ ];
400
412
  }, [colorValue, variant]);
401
413
  }