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