sposchedule

1
export default {
2
  root: ({ props }) => ({
3
    class: [
4
      'inline-block relative',
5
      'w-10 h-6',
6
      'rounded-2xl',
7
      {
8
        'opacity-60 select-none pointer-events-none cursor-default':
9
          props.disabled,
10
      },
11
    ],
12
  }),
13
  slider: ({ props }) => ({
14
    class: [
15
      // Position
16
      'absolute top-0 left-0 right-0 bottom-0',
17
      {
18
        'before:transform before:translate-x-4':
19
          props.modelValue == props.trueValue,
20
      },
21

22
      // Shape
23
      'rounded-2xl',
24

25
      // Before:
26
      'before:absolute before:top-1/2 before:left-1',
27
      'before:-mt-2',
28
      'before:h-4 before:w-4',
29
      'before:rounded-full',
30
      'before:duration-200',
31
      'before:bg-surface-0 before:dark:bg-surface-500',
32

33
      // Colors
34
      'border',
35
      {
36
        'bg-surface-300 dark:bg-surface-800': !(
37
          props.modelValue == props.trueValue
38
        ),
39
        'bg-primary': props.modelValue == props.trueValue,
40
        'before:dark:bg-surface-950': props.modelValue == props.trueValue,
41
        'border-transparent': !props.invalid,
42
      },
43

44
      // Invalid State
45
      { 'border-red-500 dark:border-red-400': props.invalid },
46

47
      // States
48
      {
49
        'peer-hover:bg-surface-400 dark:peer-hover:bg-surface-700':
50
          !(props.modelValue == props.trueValue) &&
51
          !props.disabled &&
52
          !props.invalid,
53
      },
54
      {
55
        'peer-hover:bg-primary-hover':
56
          props.modelValue == props.trueValue &&
57
          !props.disabled &&
58
          !props.invalid,
59
      },
60
      'peer-focus-visible:ring-1 peer-focus-visible:ring-primary-500 dark:peer-focus-visible:ring-primary-400',
61

62
      // Transition
63
      'transition-colors duration-200',
64

65
      // Misc
66
      'cursor-pointer',
67
    ],
68
  }),
69
  input: {
70
    class: [
71
      'peer',
72

73
      // Size
74
      'w-full ',
75
      'h-full',
76

77
      // Position
78
      'absolute',
79
      'top-0 left-0',
80
      'z-10',
81

82
      // Spacing
83
      'p-0',
84
      'm-0',
85

86
      // Shape
87
      'opacity-0',
88
      'rounded-2xl',
89
      'outline-none',
90

91
      // Misc
92
      'appearance-none',
93
      'cursor-pointer',
94
    ],
95
  },
96
};
97