sposchedule

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

6
      // Flex & Alignment
7
      { 'flex flex-col': props.scrollable && props.scrollHeight === 'flex' },
8

9
      // Size
10
      { 'h-full': props.scrollable && props.scrollHeight === 'flex' },
11
    ],
12
  }),
13
  mask: {
14
    class: [
15
      // Position
16
      'absolute',
17
      'top-0 left-0',
18
      'z-20',
19

20
      // Flex & Alignment
21
      'flex items-center justify-center',
22

23
      // Size
24
      'w-full h-full',
25

26
      // Color
27
      'bg-surface-100/40 dark:bg-surface-900/40',
28

29
      // Transition
30
      'transition duration-200',
31
    ],
32
  },
33
  loadingIcon: {
34
    class: 'w-8 h-8 animate-spin',
35
  },
36
  tableContainer: ({ props }) => ({
37
    class: [
38
      {
39
        relative: props.scrollable,
40
        'flex flex-col grow': props.scrollable && props.scrollHeight === 'flex',
41
      },
42

43
      // Size
44
      { 'h-full': props.scrollable && props.scrollHeight === 'flex' },
45
    ],
46
  }),
47
  header: ({ props }) => ({
48
    class: [
49
      'font-bold',
50

51
      // Shape
52
      props.showGridlines
53
        ? 'border-x border-t border-b-0'
54
        : 'border-y border-x-0',
55

56
      // Spacing
57
      'p-4',
58

59
      // Color
60
      'bg-surface-0 dark:bg-surface-900',
61
      'border-surface-200 dark:border-surface-700',
62
      'text-surface-700 dark:text-white/80',
63
    ],
64
  }),
65
  table: {
66
    class: 'w-full border-spacing-0 border-separate',
67
  },
68
  thead: ({ context }) => ({
69
    class: [
70
      {
71
        'bg-surface-0 dark:bg-surface-900 top-0 z-40 sticky':
72
          context.scrollable,
73
      },
74
    ],
75
  }),
76
  tbody: ({ instance, context }) => ({
77
    class: [
78
      {
79
        'sticky z-20': instance.frozenRow && context.scrollable,
80
      },
81
      'bg-surface-0 dark:bg-surface-900',
82
    ],
83
  }),
84
  tfoot: ({ context }) => ({
85
    class: [
86
      {
87
        'bg-surface-0 bottom-0 z-0': context.scrollable,
88
      },
89
    ],
90
  }),
91
  footer: {
92
    class: [
93
      'font-bold',
94

95
      // Shape
96
      'border-t-0 border-b border-x-0',
97

98
      // Spacing
99
      'p-4',
100

101
      // Color
102
      'bg-surface-0 dark:bg-surface-900',
103
      'border-surface-200 dark:border-surface-700',
104
      'text-surface-700 dark:text-white/80',
105
    ],
106
  },
107
  column: {
108
    headerCell: ({ context, props }) => ({
109
      class: [
110
        'font-semibold',
111
        'leading-[normal]',
112

113
        // Position
114
        { 'sticky z-20 border-b': props.frozen || props.frozen === '' },
115

116
        { relative: context.resizable },
117

118
        // Alignment
119
        'text-left',
120

121
        // Shape
122
        { 'first:border-l border-y border-r': context?.showGridlines },
123
        'border-0 border-b border-solid',
124

125
        // Spacing
126
        context?.size === 'small'
127
          ? 'py-[0.375rem] px-2'
128
          : context?.size === 'large'
129
            ? 'py-[0.9375rem] px-5'
130
            : 'py-3 px-4',
131

132
        // Color
133
        (props.sortable === '' || props.sortable) && context.sorted
134
          ? 'bg-highlight'
135
          : 'bg-surface-50 text-surface-700 dark:text-white/80 dark:bg-surface-800',
136
        'border-surface-200 dark:border-surface-700 ',
137

138
        // States
139
        {
140
          'hover:bg-surface-100 dark:hover:bg-surface-800/50':
141
            (props.sortable === '' || props.sortable) && !context?.sorted,
142
        },
143
        'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
144

145
        // Transition
146
        { 'transition duration-200': props.sortable === '' || props.sortable },
147

148
        // Misc
149
        { 'cursor-pointer': props.sortable === '' || props.sortable },
150
        {
151
          'overflow-hidden whitespace-nowrap border-y bg-clip-padding':
152
            context?.resizable, // Resizable
153
        },
154
      ],
155
    }),
156
    columnHeaderContent: {
157
      class: 'flex items-center gap-2',
158
    },
159
    sort: ({ context }) => ({
160
      class: [
161
        context.sorted ? 'text-primary-500' : 'text-surface-700',
162
        context.sorted ? 'dark:text-primary-400' : 'dark:text-white/80',
163
      ],
164
    }),
165
    bodyCell: ({ props, context, state, parent }) => ({
166
      class: [
167
        // Font
168
        'leading-[normal]',
169

170
        //Position
171
        { 'sticky box-border border-b': parent.instance.frozenRow },
172
        {
173
          'sticky box-border border-b z-20':
174
            props.frozen || props.frozen === '',
175
        },
176

177
        // Alignment
178
        'text-left',
179

180
        // Shape
181
        'border-0 border-b border-solid',
182
        { 'first:border-l border-r border-b': context?.showGridlines },
183
        {
184
          'bg-surface-0 dark:bg-surface-900':
185
            parent.instance.frozenRow || props.frozen || props.frozen === '',
186
        },
187

188
        // Spacing
189
        {
190
          'py-[0.375rem] px-2':
191
            context?.size === 'small' && !state['d_editing'],
192
        },
193
        {
194
          'py-[0.9375rem] px-5':
195
            context?.size === 'large' && !state['d_editing'],
196
        },
197
        {
198
          'py-3 px-4':
199
            context?.size !== 'large' &&
200
            context?.size !== 'small' &&
201
            !state['d_editing'],
202
        },
203
        { 'py-[0.6rem] px-2': state['d_editing'] },
204

205
        // Color
206
        'border-surface-200 dark:border-surface-700',
207

208
        {
209
          'overflow-hidden whitespace-nowrap border-y bg-clip-padding':
210
            parent.instance?.$parentInstance?.$parentInstance?.resizableColumns, // Resizable
211
        },
212
      ],
213
    }),
214
    footerCell: ({ context }) => ({
215
      class: [
216
        // Font
217
        'font-bold',
218

219
        // Alignment
220
        'text-left',
221

222
        // Shape
223
        'border-0 border-b border-solid',
224
        { 'border-x border-y': context?.showGridlines },
225

226
        // Spacing
227
        context?.size === 'small'
228
          ? 'p-2'
229
          : context?.size === 'large'
230
            ? 'p-5'
231
            : 'p-4',
232

233
        // Color
234
        'border-surface-200 dark:border-surface-700',
235
        'text-surface-700 dark:text-white/80',
236
        'bg-surface-0 dark:bg-surface-900',
237
      ],
238
    }),
239
    sortIcon: ({ context }) => ({
240
      class: [
241
        'ml-2',
242
        context.sorted ? 'text-inherit' : 'text-surface-700 dark:text-white/70',
243
      ],
244
    }),
245
    columnFilter: {
246
      class: 'inline-flex items-center ml-auto font-normal',
247
    },
248
    filterOverlay: {
249
      class: [
250
        'flex flex-col gap-2',
251

252
        // Position
253
        'absolute top-0 left-0',
254

255
        // Shape
256
        'border-0 dark:border',
257
        'rounded-md',
258
        'shadow-md',
259

260
        // Size
261
        'min-w-[12.5rem]',
262

263
        // Color
264
        'bg-surface-0 dark:bg-surface-900',
265
        'text-surface-800 dark:text-white/80',
266
        'dark:border-surface-700',
267
      ],
268
    },
269
    filterConstraintList: {
270
      class: 'm-0 p-0 py-3 list-none',
271
    },
272
    filterConstraint: ({ context }) => ({
273
      class: [
274
        // Font
275
        'font-normal',
276
        'leading-none',
277

278
        // Position
279
        'relative',
280

281
        // Shape
282
        'border-0',
283
        'rounded-none',
284

285
        // Spacing
286
        'm-0',
287
        'py-3 px-5',
288

289
        // Color
290
        { 'text-surface-700 dark:text-white/80': !context?.highlighted },
291
        {
292
          'bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-white/80':
293
            !context?.highlighted,
294
        },
295
        { 'bg-highlight': context?.highlighted },
296

297
        //States
298
        {
299
          'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]':
300
            !context?.highlighted,
301
        },
302
        {
303
          'hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-[rgba(255,255,255,0.03)]':
304
            !context?.highlighted,
305
        },
306
        'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
307

308
        // Transitions
309
        'transition-shadow',
310
        'duration-200',
311

312
        // Misc
313
        'cursor-pointer',
314
        'overflow-hidden',
315
        'whitespace-nowrap',
316
      ],
317
    }),
318
    filterOperator: {
319
      class: [
320
        // Shape
321
        'rounded-t-md',
322

323
        // Color
324
        'text-surface-700 dark:text-white/80',
325
        'bg-surface-0 dark:bg-surface-700',
326
        '[&>[data-pc-name=pcfilteroperatordropdown]]:w-full',
327
      ],
328
    },
329
    filter: ({ instance }) => ({
330
      class: [
331
        {
332
          'flex items-center w-full gap-2': instance.display === 'row',
333
          'inline-flex ml-auto': instance.display === 'menu',
334
        },
335
      ],
336
    }),
337
    filterRule: 'flex flex-col gap-2',
338
    filterButtonbar: 'flex items-center justify-between p-0',
339
    filterAddButtonContainer: '[&>[data-pc-name=pcfilteraddrulebutton]]:w-full',
340
    rowToggleButton: {
341
      class: [
342
        'relative',
343

344
        // Flex & Alignment
345
        'inline-flex items-center justify-center',
346
        'text-left',
347

348
        // Spacing
349
        'm-0 p-0',
350

351
        // Size
352
        'w-8 h-8',
353

354
        // Shape
355
        'border-0 rounded-full',
356

357
        // Color
358
        'text-surface-500 dark:text-white/70',
359
        'bg-transparent',
360
        'focus-visible:outline-none focus-visible:outline-offset-0',
361
        'focus-visible:ring-1 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
362

363
        // Transition
364
        'transition duration-200',
365

366
        // Misc
367
        'overflow-hidden',
368
        'cursor-pointer select-none',
369
      ],
370
    },
371
    columnResizer: {
372
      class: [
373
        'block',
374

375
        // Position
376
        'absolute top-0 right-0',
377

378
        // Sizing
379
        'w-2 h-full',
380

381
        // Spacing
382
        'm-0 p-0',
383

384
        // Color
385
        'border border-transparent',
386

387
        // Misc
388
        'cursor-col-resize',
389
      ],
390
    },
391
    transition: {
392
      class: 'p-4 flex flex-col gap-2',
393
      enterFromClass: 'opacity-0 scale-y-[0.8]',
394
      enterActiveClass:
395
        'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
396
      leaveActiveClass: 'transition-opacity duration-100 ease-linear',
397
      leaveToClass: 'opacity-0',
398
    },
399
  },
400
  bodyRow: ({ context, props }) => ({
401
    class: [
402
      // Color
403
      'dark:text-white/80',
404
      { 'bg-highlight': context.selected && props.highlightOnSelect },
405
      {
406
        'bg-surface-0 text-surface-600 dark:bg-surface-900': !context.selected,
407
      },
408
      { 'font-bold bg-surface-0 dark:bg-surface-900 z-20': props.frozenRow },
409
      {
410
        'odd:bg-surface-0 odd:text-surface-600 dark:odd:bg-surface-900 even:bg-surface-50 even:text-surface-600 dark:even:bg-surface-800/50':
411
          context.stripedRows,
412
      },
413

414
      // State
415
      {
416
        'hover:bg-surface-300/20 dark:hover:bg-surface-800/50 hover:text-surface-600':
417
          props.selectionMode && !context.selected,
418
      },
419

420
      // Transition
421
      {
422
        'transition duration-200':
423
          (props.selectionMode && !context.selected) || props.rowHover,
424
      },
425

426
      // Misc
427
      { 'cursor-pointer': props.selectionMode },
428
    ],
429
  }),
430
  rowExpansion: {
431
    class:
432
      'bg-surface-0 dark:bg-surface-900 text-surface-600 dark:text-white/80',
433
  },
434
  rowGroupHeader: {
435
    class: [
436
      'sticky z-20',
437
      'bg-surface-0 text-surface-600 dark:text-white/70',
438
      'dark:bg-surface-900',
439
    ],
440
  },
441
  rowGroupFooter: {
442
    class: [
443
      'sticky z-20',
444
      'bg-surface-0 text-surface-600 dark:text-white/70',
445
      'dark:bg-surface-900',
446
    ],
447
  },
448
  rowToggleButton: {
449
    class: [
450
      'relative',
451

452
      // Flex & Alignment
453
      'inline-flex items-center justify-center',
454
      'text-left',
455

456
      // Spacing
457
      'm-0 p-0',
458

459
      // Size
460
      'w-8 h-8',
461

462
      // Shape
463
      'border-0 rounded-full',
464

465
      // Color
466
      'text-surface-500 dark:text-white/70',
467
      'bg-transparent',
468
      'focus-visible:outline-none focus-visible:outline-offset-0',
469
      'focus-visible:ring-1 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
470

471
      // Transition
472
      'transition duration-200',
473

474
      // Misc
475
      'overflow-hidden',
476
      'cursor-pointer select-none',
477
    ],
478
  },
479
  rowToggleIcon: {
480
    class: 'inline-block w-4 h-4',
481
  },
482
  columnResizeIndicator: {
483
    class: 'absolute hidden w-[2px] z-20 bg-primary',
484
  },
485
};
486