sposchedule

1
export default {
2
  root: ({ props, context, parent, instance }) => ({
3
    class: [
4
      'relative',
5

6
      // Alignments
7
      'items-center inline-flex text-center align-bottom justify-center',
8
      {
9
        'flex-col':
10
          (props.iconPos === 'top' || props.iconPos === 'bottom') &&
11
          props.label,
12
      },
13

14
      // Sizes & Spacing
15
      'leading-[normal]',
16
      {
17
        'px-3 py-2': props.size === null,
18
        'text-sm py-1.5 px-3': props.size === 'small',
19
        'text-xl py-3 px-4': props.size === 'large',
20
      },
21
      { 'gap-2': props.label !== null },
22
      {
23
        'w-10 px-0 py-2': props.label == null && props.icon !== null,
24
      },
25
      {
26
        'w-10 px-0 gap-0': instance.hasIcon && !props.label && !props.badge,
27
        'rounded-[50%] h-10 [&>[data-pc-section=label]]:w-0 [&>[data-pc-section=label]]:invisible':
28
          instance.hasIcon && !props.label && !props.badge && props.rounded,
29
      },
30

31
      // Shapes
32
      { 'shadow-lg': props.raised },
33
      { 'rounded-md': !props.rounded, 'rounded-full': props.rounded },
34
      {
35
        'rounded-none first:rounded-l-md last:rounded-r-md':
36
          parent.instance.$name == 'InputGroup',
37
      },
38

39
      // Link Button
40
      { 'text-primary-600 bg-transparent border-transparent': props.link },
41

42
      // Plain Button
43
      {
44
        'text-white bg-gray-500 border border-gray-500':
45
          props.plain && !props.outlined && !props.text,
46
      },
47
      // Plain Text Button
48
      { 'text-surface-500': props.plain && props.text },
49
      // Plain Outlined Button
50
      {
51
        'text-surface-500 border border-gray-500':
52
          props.plain && props.outlined,
53
      },
54

55
      // Text Button
56
      { 'bg-transparent border-transparent': props.text && !props.plain },
57

58
      // Outlined Button
59
      { 'bg-transparent border': props.outlined && !props.plain },
60

61
      // --- Severity Buttons ---
62

63
      // Primary Button
64
      {
65
        'text-primary-contrast':
66
          !props.link &&
67
          props.severity === null &&
68
          !props.text &&
69
          !props.outlined &&
70
          !props.plain,
71
        'bg-primary':
72
          !props.link &&
73
          props.severity === null &&
74
          !props.text &&
75
          !props.outlined &&
76
          !props.plain,
77
        'border border-primary':
78
          !props.link &&
79
          props.severity === null &&
80
          !props.text &&
81
          !props.outlined &&
82
          !props.plain,
83
      },
84
      // Primary Text Button
85
      { 'text-primary': props.text && props.severity === null && !props.plain },
86
      // Primary Outlined Button
87
      {
88
        'text-primary border border-primary':
89
          props.outlined && props.severity === null && !props.plain,
90
      },
91

92
      // Secondary Button
93
      {
94
        'text-surface-900 dark:text-white':
95
          props.severity === 'secondary' &&
96
          !props.text &&
97
          !props.outlined &&
98
          !props.plain,
99
        'bg-surface-100 dark:bg-surface-700':
100
          props.severity === 'secondary' &&
101
          !props.text &&
102
          !props.outlined &&
103
          !props.plain,
104
        'border border-surface-100 dark:border-surface-700':
105
          props.severity === 'secondary' &&
106
          !props.text &&
107
          !props.outlined &&
108
          !props.plain,
109
      },
110
      // Secondary Text Button
111
      {
112
        'text-surface-500 dark:text-surface-300':
113
          props.text && props.severity === 'secondary' && !props.plain,
114
      },
115
      // Secondary Outlined Button
116
      {
117
        'text-surface-500 dark:text-surface-300 border border-surface-500 hover:bg-surface-300/10':
118
          props.outlined && props.severity === 'secondary' && !props.plain,
119
      },
120

121
      // Success Button
122
      {
123
        'text-white dark:text-green-900':
124
          props.severity === 'success' &&
125
          !props.text &&
126
          !props.outlined &&
127
          !props.plain,
128
        'bg-green-500 dark:bg-green-400':
129
          props.severity === 'success' &&
130
          !props.text &&
131
          !props.outlined &&
132
          !props.plain,
133
        'border border-green-500 dark:border-green-400':
134
          props.severity === 'success' &&
135
          !props.text &&
136
          !props.outlined &&
137
          !props.plain,
138
      },
139
      // Success Text Button
140
      {
141
        'text-green-500 dark:text-green-400':
142
          props.text && props.severity === 'success' && !props.plain,
143
      },
144
      // Success Outlined Button
145
      {
146
        'text-green-500 border border-green-500 hover:bg-green-300/10':
147
          props.outlined && props.severity === 'success' && !props.plain,
148
      },
149

150
      // Info Button
151
      {
152
        'text-white dark:text-surface-900':
153
          props.severity === 'info' &&
154
          !props.text &&
155
          !props.outlined &&
156
          !props.plain,
157
        'bg-blue-500 dark:bg-blue-400':
158
          props.severity === 'info' &&
159
          !props.text &&
160
          !props.outlined &&
161
          !props.plain,
162
        'border border-blue-500 dark:border-blue-400':
163
          props.severity === 'info' &&
164
          !props.text &&
165
          !props.outlined &&
166
          !props.plain,
167
      },
168
      // Info Text Button
169
      {
170
        'text-blue-500 dark:text-blue-400':
171
          props.text && props.severity === 'info' && !props.plain,
172
      },
173
      // Info Outlined Button
174
      {
175
        'text-blue-500 border border-blue-500 hover:bg-blue-300/10 ':
176
          props.outlined && props.severity === 'info' && !props.plain,
177
      },
178

179
      // Warning Button
180
      {
181
        'text-white dark:text-surface-900':
182
          props.severity === 'warn' &&
183
          !props.text &&
184
          !props.outlined &&
185
          !props.plain,
186
        'bg-orange-500 dark:bg-orange-400':
187
          props.severity === 'warn' &&
188
          !props.text &&
189
          !props.outlined &&
190
          !props.plain,
191
        'border border-orange-500 dark:border-orange-400':
192
          props.severity === 'warn' &&
193
          !props.text &&
194
          !props.outlined &&
195
          !props.plain,
196
      },
197
      // Warning Text Button
198
      {
199
        'text-orange-500 dark:text-orange-400':
200
          props.text && props.severity === 'warn' && !props.plain,
201
      },
202
      // Warning Outlined Button
203
      {
204
        'text-orange-500 border border-orange-500 hover:bg-orange-300/10':
205
          props.outlined && props.severity === 'warn' && !props.plain,
206
      },
207

208
      // Help Button
209
      {
210
        'text-white dark:text-surface-900':
211
          props.severity === 'help' &&
212
          !props.text &&
213
          !props.outlined &&
214
          !props.plain,
215
        'bg-purple-500 dark:bg-purple-400':
216
          props.severity === 'help' &&
217
          !props.text &&
218
          !props.outlined &&
219
          !props.plain,
220
        'border border-purple-500 dark:border-purple-400':
221
          props.severity === 'help' &&
222
          !props.text &&
223
          !props.outlined &&
224
          !props.plain,
225
      },
226
      // Help Text Button
227
      {
228
        'text-purple-500 dark:text-purple-400':
229
          props.text && props.severity === 'help' && !props.plain,
230
      },
231
      // Help Outlined Button
232
      {
233
        'text-purple-500 border border-purple-500 hover:bg-purple-300/10':
234
          props.outlined && props.severity === 'help' && !props.plain,
235
      },
236

237
      // Danger Button
238
      {
239
        'text-white dark:text-surface-900':
240
          props.severity === 'danger' &&
241
          !props.text &&
242
          !props.outlined &&
243
          !props.plain,
244
        'bg-red-500 dark:bg-red-400':
245
          props.severity === 'danger' &&
246
          !props.text &&
247
          !props.outlined &&
248
          !props.plain,
249
        'border border-red-500 dark:border-red-400':
250
          props.severity === 'danger' &&
251
          !props.text &&
252
          !props.outlined &&
253
          !props.plain,
254
      },
255
      // Danger Text Button
256
      {
257
        'text-red-500 dark:text-red-400':
258
          props.text && props.severity === 'danger' && !props.plain,
259
      },
260
      // Danger Outlined Button
261
      {
262
        'text-red-500 border border-red-500 hover:bg-red-300/10':
263
          props.outlined && props.severity === 'danger' && !props.plain,
264
      },
265

266
      // Contrast Button
267
      {
268
        'text-white dark:text-surface-900':
269
          props.severity === 'contrast' &&
270
          !props.text &&
271
          !props.outlined &&
272
          !props.plain,
273
        'bg-surface-900 dark:bg-surface-0':
274
          props.severity === 'contrast' &&
275
          !props.text &&
276
          !props.outlined &&
277
          !props.plain,
278
        'border border-surface-900 dark:border-surface-0':
279
          props.severity === 'contrast' &&
280
          !props.text &&
281
          !props.outlined &&
282
          !props.plain,
283
      },
284
      // Contrast Text Button
285
      {
286
        'text-surface-900 dark:text-surface-0':
287
          props.text && props.severity === 'contrast' && !props.plain,
288
      },
289
      // Contrast Outlined Button
290
      {
291
        'text-surface-900 dark:text-surface-0 border border-surface-900 dark:border-surface-0':
292
          props.outlined && props.severity === 'contrast' && !props.plain,
293
      },
294

295
      // --- Severity Button States ---
296
      'focus:outline-none focus:outline-offset-0 focus:ring-1',
297

298
      // Link
299
      { 'focus:ring-primary': props.link },
300

301
      // Plain
302
      {
303
        'hover:bg-gray-600 hover:border-gray-600':
304
          props.plain && !props.outlined && !props.text,
305
      },
306
      // Text & Outlined Button
307
      {
308
        'hover:bg-surface-300/10':
309
          props.plain && (props.text || props.outlined),
310
      },
311

312
      // Primary
313
      {
314
        'hover:bg-primary-emphasis hover:border-primary-emphasis':
315
          !props.link &&
316
          props.severity === null &&
317
          !props.text &&
318
          !props.outlined &&
319
          !props.plain,
320
      },
321
      { 'focus:ring-primary': props.severity === null },
322
      // Text & Outlined Button
323
      {
324
        'hover:bg-primary-300/10':
325
          (props.text || props.outlined) &&
326
          props.severity === null &&
327
          !props.plain,
328
      },
329

330
      // Secondary
331
      {
332
        'hover:bg-surface-200 dark:hover:bg-surface-600 hover:border-surface-200 dark:hover:border-surface-600':
333
          props.severity === 'secondary' &&
334
          !props.text &&
335
          !props.outlined &&
336
          !props.plain,
337
      },
338
      {
339
        'focus:ring-surface-500 dark:focus:ring-surface-400':
340
          props.severity === 'secondary',
341
      },
342
      // Text & Outlined Button
343
      {
344
        'hover:bg-surface-300/10':
345
          (props.text || props.outlined) &&
346
          props.severity === 'secondary' &&
347
          !props.plain,
348
      },
349

350
      // Success
351
      {
352
        'hover:bg-green-600 dark:hover:bg-green-300 hover:border-green-600 dark:hover:border-green-300':
353
          props.severity === 'success' &&
354
          !props.text &&
355
          !props.outlined &&
356
          !props.plain,
357
      },
358
      {
359
        'focus:ring-green-500 dark:focus:ring-green-400':
360
          props.severity === 'success',
361
      },
362
      // Text & Outlined Button
363
      {
364
        'hover:bg-green-300/10':
365
          (props.text || props.outlined) &&
366
          props.severity === 'success' &&
367
          !props.plain,
368
      },
369

370
      // Info
371
      {
372
        'hover:bg-blue-600 dark:hover:bg-blue-300 hover:border-blue-600 dark:hover:border-blue-300':
373
          props.severity === 'info' &&
374
          !props.text &&
375
          !props.outlined &&
376
          !props.plain,
377
      },
378
      {
379
        'focus:ring-blue-500 dark:focus:ring-blue-400':
380
          props.severity === 'info',
381
      },
382
      // Text & Outlined Button
383
      {
384
        'hover:bg-blue-300/10':
385
          (props.text || props.outlined) &&
386
          props.severity === 'info' &&
387
          !props.plain,
388
      },
389

390
      // Warning
391
      {
392
        'hover:bg-orange-600 dark:hover:bg-orange-300 hover:border-orange-600 dark:hover:border-orange-300':
393
          props.severity === 'warn' &&
394
          !props.text &&
395
          !props.outlined &&
396
          !props.plain,
397
      },
398
      {
399
        'focus:ring-orange-500 dark:focus:ring-orange-400':
400
          props.severity === 'warn',
401
      },
402
      // Text & Outlined Button
403
      {
404
        'hover:bg-orange-300/10':
405
          (props.text || props.outlined) &&
406
          props.severity === 'warn' &&
407
          !props.plain,
408
      },
409

410
      // Help
411
      {
412
        'hover:bg-purple-600 dark:hover:bg-purple-300 hover:border-purple-600 dark:hover:border-purple-300':
413
          props.severity === 'help' &&
414
          !props.text &&
415
          !props.outlined &&
416
          !props.plain,
417
      },
418
      {
419
        'focus:ring-purple-500 dark:focus:ring-purple-400':
420
          props.severity === 'help',
421
      },
422
      // Text & Outlined Button
423
      {
424
        'hover:bg-purple-300/10':
425
          (props.text || props.outlined) &&
426
          props.severity === 'help' &&
427
          !props.plain,
428
      },
429

430
      // Danger
431
      {
432
        'hover:bg-red-600 dark:hover:bg-red-300 hover:border-red-600 dark:hover:border-red-300':
433
          props.severity === 'danger' &&
434
          !props.text &&
435
          !props.outlined &&
436
          !props.plain,
437
      },
438
      {
439
        'focus:ring-red-500 dark:focus:ring-red-400':
440
          props.severity === 'danger',
441
      },
442
      // Text & Outlined Button
443
      {
444
        'hover:bg-red-300/10':
445
          (props.text || props.outlined) &&
446
          props.severity === 'danger' &&
447
          !props.plain,
448
      },
449

450
      // Contrast
451
      {
452
        'hover:bg-surface-800 dark:hover:bg-surface-100 hover:border-surface-800 dark:hover:border-surface-100':
453
          props.severity === 'contrast' &&
454
          !props.text &&
455
          !props.outlined &&
456
          !props.plain,
457
      },
458
      {
459
        'focus:ring-surface-500 dark:focus:ring-surface-400':
460
          props.severity === 'contrast',
461
      },
462
      // Text & Outlined Button
463
      {
464
        'hover:bg-surface-900/10 dark:hover:bg-[rgba(255,255,255,0.03)]':
465
          (props.text || props.outlined) &&
466
          props.severity === 'contrast' &&
467
          !props.plain,
468
      },
469

470
      // Disabled
471
      { 'opacity-60 pointer-events-none cursor-default': context.disabled },
472

473
      // Transitions
474
      'transition duration-200 ease-in-out',
475

476
      // Misc
477
      'cursor-pointer overflow-hidden select-none',
478

479
      // Badge
480
      '[&>[data-pc-name=badge]]:min-w-4 [&>[data-pc-name=badge]]:h-4 [&>[data-pc-name=badge]]:leading-4',
481
    ],
482
  }),
483
  label: ({ props }) => ({
484
    class: [
485
      'duration-200',
486
      'font-medium',
487
      {
488
        'hover:underline': props.link,
489
      },
490
      { 'flex-1': props.label !== null, 'invisible w-0': props.label == null },
491
    ],
492
  }),
493
  icon: ({ props }) => ({
494
    class: [
495
      'text-base leading-4',
496
      'mx-0',
497
      {
498
        'mr-2': props.iconPos == 'left' && props.label != null,
499
        'ml-2 order-1': props.iconPos == 'right' && props.label != null,
500
        'order-2': props.iconPos == 'bottom' && props.label != null,
501
      },
502
    ],
503
  }),
504
  loadingIcon: ({ props }) => ({
505
    class: [
506
      'h-4 w-4',
507
      'mx-0',
508
      {
509
        'mr-2': props.iconPos == 'left' && props.label != null,
510
        'ml-2 order-1': props.iconPos == 'right' && props.label != null,
511
        'mb-2': props.iconPos == 'top' && props.label != null,
512
        'mt-2': props.iconPos == 'bottom' && props.label != null,
513
      },
514
      'animate-spin',
515
    ],
516
  }),
517
  badge: ({ props }) => ({
518
    class: [
519
      {
520
        'ml-2 w-4 h-4 leading-none flex items-center justify-center':
521
          props.badge,
522
      },
523
    ],
524
  }),
525
};
526