sposchedule

1
export default {
2
  root: ({ props }) => ({
3
    class: [
4
      // Display and Position
5
      {
6
        flex: props.fluid,
7
        'inline-flex': !props.fluid,
8
      },
9
      'max-w-full',
10
      'relative',
11
    ],
12
  }),
13
  pcInput: ({ props, parent }) => ({
14
    root: {
15
      class: [
16
        // Display
17
        'flex-auto w-[1%]',
18

19
        // Font
20
        'leading-none',
21

22
        // Colors
23
        'text-surface-600 dark:text-surface-200',
24
        'placeholder:text-surface-400 dark:placeholder:text-surface-500',
25
        { 'bg-surface-0 dark:bg-surface-950': !props.disabled },
26
        'border',
27
        { 'border-surface-300 dark:border-surface-600': !props.invalid },
28

29
        // Invalid State
30
        'invalid:focus:ring-red-200',
31
        'invalid:hover:border-red-500',
32
        { 'border-red-500 dark:border-red-400': props.invalid },
33

34
        // Spacing
35
        'm-0 py-2 px-3',
36

37
        // Shape
38
        'appearance-none',
39
        { 'rounded-md': !props.showIcon || props.iconDisplay == 'input' },
40
        {
41
          'rounded-l-md  flex-1 pr-9':
42
            props.showIcon && props.iconDisplay !== 'input',
43
        },
44
        {
45
          'rounded-md flex-1 pr-9':
46
            props.showIcon && props.iconDisplay === 'input',
47
        },
48

49
        // Transitions
50
        'transition-colors',
51
        'duration-200',
52

53
        // States
54
        {
55
          'hover:border-surface-400 dark:hover:border-surface-600':
56
            !props.disabled && !props.invalid,
57
          'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10':
58
            !props.disabled,
59
          'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default':
60
            props.disabled,
61
        },
62

63
        // Filled State *for FloatLabel
64
        {
65
          filled:
66
            parent.instance?.$name == 'FloatLabel' && props.modelValue !== null,
67
        },
68
      ],
69
    },
70
  }),
71
  dropdownIcon: {
72
    class: [
73
      'absolute top-1/2 -mt-2',
74
      'text-surface-600 dark:text-surface-200',
75
      'right-3',
76
    ],
77
  },
78
  dropdown: {
79
    class: [
80
      'relative',
81

82
      // Alignments
83
      'items-center inline-flex text-center align-bottom justify-center',
84

85
      // Shape
86
      'rounded-r-md',
87

88
      // Size
89
      'py-2 px-0',
90
      'w-10',
91
      'leading-[normal]',
92

93
      // Colors
94
      'border border-l-0 border-surface-300 dark:border-surface-600',
95

96
      // States
97
      'focus:outline-none focus:outline-offset-0 focus:ring-1',
98
      'hover:bg-primary-hover hover:border-primary-hover',
99
      'focus:ring-primary-500 dark:focus:ring-primary-400',
100
    ],
101
  },
102
  inputIconContainer:
103
    'absolute cursor-pointer top-1/2 right-3 -translate-y-2/4',
104
  inputIcon: 'inline-block text-base',
105
  panel: ({ props }) => ({
106
    class: [
107
      // Display & Position
108
      {
109
        absolute: !props.inline,
110
        'inline-block': props.inline,
111
      },
112

113
      // Size
114
      { 'w-auto p-3 ': !props.inline },
115
      { 'min-w-[80vw] w-auto p-3 ': props.touchUI },
116
      { 'p-3 min-w-full': props.inline },
117

118
      // Shape
119
      'border rounded-lg',
120
      {
121
        'shadow-md': !props.inline,
122
      },
123

124
      // Colors
125
      'bg-surface-0 dark:bg-surface-900',
126
      'border-surface-200 dark:border-surface-700',
127

128
      //misc
129
      { 'overflow-x-auto': props.inline },
130
    ],
131
  }),
132
  header: {
133
    class: [
134
      //Font
135
      'font-medium',
136

137
      // Flexbox and Alignment
138
      'flex items-center justify-between',
139

140
      // Spacing
141
      'p-0 pb-2',
142
      'm-0',
143

144
      // Shape
145
      'border-b',
146
      'rounded-t-md',
147

148
      // Colors
149
      'text-surface-700 dark:text-white/80',
150
      'bg-surface-0 dark:bg-surface-900',
151
      'border-surface-200 dark:border-surface-700',
152
    ],
153
  },
154
  title: {
155
    class: [
156
      // Text
157
      'leading-7',
158
      'mx-auto my-0',
159
    ],
160
  },
161
  selectMonth: {
162
    class: [
163
      // Font
164
      'text-base leading-[normal]',
165
      'font-medium',
166

167
      //shape
168
      'rounded-md',
169

170
      // Colors
171
      'text-surface-700 dark:text-white/80',
172

173
      // Transitions
174
      'transition duration-200',
175

176
      // Spacing
177
      'p-1',
178
      'm-0 mr-2',
179

180
      // States
181
      'hover:text-primary-500 dark:hover:text-primary-400',
182
      'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10',
183

184
      // Misc
185
      'cursor-pointer',
186
    ],
187
  },
188
  selectYear: {
189
    class: [
190
      // Font
191
      'text-base leading-[normal]',
192
      'font-medium',
193

194
      //shape
195
      'rounded-md',
196

197
      // Colors
198
      'text-surface-700 dark:text-white/80',
199

200
      // Transitions
201
      'transition duration-200',
202

203
      // Spacing
204
      'p-1',
205
      'm-0 mr-2',
206

207
      // States
208
      'hover:text-primary-500 dark:hover:text-primary-400',
209
      'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10',
210

211
      // Misc
212
      'cursor-pointer',
213
    ],
214
  },
215
  table: {
216
    class: [
217
      // Font
218
      'text-base leading-[normal]',
219
      // Size & Shape
220
      'border-collapse',
221
      'w-full',
222

223
      // Spacing
224
      'm-0 mt-2',
225
    ],
226
  },
227
  tableHeaderCell: {
228
    class: [
229
      // Spacing
230
      'p-1',
231
      'font-medium',
232
    ],
233
  },
234
  weekHeader: {
235
    class: [
236
      'leading-5',
237
      'text-surface-600 dark:text-white/70',
238
      'opacity-60 cursor-default',
239
    ],
240
  },
241
  weekNumber: {
242
    class: ['text-surface-600 dark:text-white/70', 'opacity-60 cursor-default'],
243
  },
244
  weekday: {
245
    class: [
246
      // Colors
247
      'text-surface-500 dark:text-white/60',
248
      'p-1',
249
    ],
250
  },
251
  dayCell: {
252
    class: [
253
      // Spacing
254
      'p-1',
255
    ],
256
  },
257
  weekLabelContainer: {
258
    class: [
259
      // Flexbox and Alignment
260
      'flex items-center justify-center',
261
      'mx-auto',
262

263
      // Shape & Size
264
      'w-8 h-8',
265
      'rounded-full',
266
      'border-transparent border',
267
      'leading-[normal]',
268

269
      // Colors
270
      'opacity-60 cursor-default',
271
    ],
272
  },
273
  dayView: 'w-full',
274
  day: ({ context }) => ({
275
    class: [
276
      // Flexbox and Alignment
277
      'flex items-center justify-center',
278
      'mx-auto',
279

280
      // Shape & Size
281
      'w-8 h-8',
282
      'rounded-full',
283
      'border-transparent border',
284
      'leading-[normal]',
285

286
      // Colors
287
      {
288
        'bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-white/70':
289
          context.date.today && !context.selected && !context.disabled,
290
        'bg-transparent text-surface-600 dark:text-white/70':
291
          !context.selected && !context.disabled && !context.date.today,
292
        'bg-highlight': context.selected && !context.disabled,
293
      },
294

295
      // States
296
      'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10',
297
      {
298
        'hover:bg-surface-50 dark:hover:bg-surface-500/10':
299
          !context.selected && !context.disabled,
300
      },
301
      {
302
        'opacity-60 cursor-default': context.disabled,
303
        'cursor-pointer': !context.disabled,
304
      },
305
    ],
306
  }),
307
  monthView: {
308
    class: [
309
      // Spacing
310
      'mt-2',
311
    ],
312
  },
313
  month: ({ context }) => ({
314
    class: [
315
      // Flexbox and Alignment
316
      'inline-flex items-center justify-center',
317

318
      // Size
319
      'w-1/3',
320
      'p-1',
321

322
      // Shape
323
      'rounded-md',
324

325
      // Colors
326
      {
327
        'text-surface-600 dark:text-white/70 bg-transparent':
328
          !context.selected && !context.disabled,
329
        'bg-highlight': context.selected && !context.disabled,
330
      },
331

332
      // States
333
      'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10',
334
      {
335
        'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]':
336
          !context.selected && !context.disabled,
337
      },
338

339
      // Misc
340
      'cursor-pointer',
341
    ],
342
  }),
343
  yearView: {
344
    class: [
345
      // Spacing
346
      'mt-2',
347
    ],
348
  },
349
  year: ({ context }) => ({
350
    class: [
351
      // Flexbox and Alignment
352
      'inline-flex items-center justify-center',
353

354
      // Size
355
      'w-1/2',
356
      'p-1',
357

358
      // Shape
359
      'rounded-md',
360

361
      // Colors
362
      {
363
        'text-surface-600 dark:text-white/70 bg-transparent':
364
          !context.selected && !context.disabled,
365
        'bg-highlight': context.selected && !context.disabled,
366
      },
367

368
      // States
369
      'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10',
370
      {
371
        'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]':
372
          !context.selected && !context.disabled,
373
      },
374

375
      // Misc
376
      'cursor-pointer',
377
    ],
378
  }),
379
  timePicker: {
380
    class: [
381
      // Flexbox
382
      'flex',
383
      'justify-center items-center',
384

385
      // Borders
386
      'border-t-1',
387
      'border-solid border-surface-200',
388

389
      // Spacing
390
      'pt-2 mt-2',
391
    ],
392
  },
393
  separatorContainer: {
394
    class: [
395
      // Flexbox and Alignment
396
      'flex',
397
      'items-center',
398
      'flex-col',
399

400
      // Spacing
401
      'px-2',
402
      'text-surface-600 dark:text-white/70',
403
    ],
404
  },
405
  separator: {
406
    class: [
407
      // Text
408
      'text-xl',
409
    ],
410
  },
411
  hourPicker: {
412
    class: [
413
      // Flexbox and Alignment
414
      'flex',
415
      'items-center',
416
      'flex-col',
417

418
      // Spacing
419
      'px-2',
420
      'text-surface-600 dark:text-white/70',
421
    ],
422
  },
423
  minutePicker: {
424
    class: [
425
      // Flexbox and Alignment
426
      'flex',
427
      'items-center',
428
      'flex-col',
429

430
      // Spacing
431
      'px-2',
432
      'text-surface-600 dark:text-white/70',
433
    ],
434
  },
435
  secondPicker: {
436
    class: [
437
      // Flexbox and Alignment
438
      'flex',
439
      'items-center',
440
      'flex-col',
441

442
      // Spacing
443
      'px-2',
444
    ],
445
  },
446
  ampmPicker: {
447
    class: [
448
      // Flexbox and Alignment
449
      'flex',
450
      'items-center',
451
      'flex-col',
452

453
      // Spacing
454
      'px-2',
455
    ],
456
  },
457
  calendarContainer: 'flex',
458
  calendar: 'flex-auto border-l first:border-l-0 border-surface-200',
459
  buttonbar: {
460
    class: [
461
      // Flexbox
462
      'flex justify-between items-center',
463

464
      // Spacing
465
      'pt-2',
466

467
      // Shape
468
      'border-t border-surface-200 dark:border-surface-700',
469
    ],
470
  },
471
  transition: {
472
    enterFromClass: 'opacity-0 scale-y-[0.8]',
473
    enterActiveClass:
474
      'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
475
    leaveActiveClass: 'transition-opacity duration-100 ease-linear',
476
    leaveToClass: 'opacity-0',
477
  },
478
};
479