sposchedule

1
export default {
2
  root: ({ props, state }) => ({
3
    class: [
4
      // Font
5
      'leading-none',
6

7
      // Display and Position
8
      'inline-flex',
9
      'relative',
10

11
      // Shape
12
      'rounded-md',
13

14
      // Color and Background
15
      { 'bg-surface-0 dark:bg-surface-950': !props.disabled },
16
      'border',
17
      { 'border-surface-300 dark:border-surface-600': !props.invalid },
18

19
      // Invalid State
20
      'invalid:focus:ring-red-200',
21
      'invalid:hover:border-red-500',
22
      { 'border-red-500 dark:border-red-400': props.invalid },
23

24
      // Transitions
25
      'transition-all',
26
      'duration-200',
27

28
      // States
29
      {
30
        'hover:border-surface-400 dark:hover:border-surface-700':
31
          !props.invalid,
32
      },
33
      {
34
        'outline-none outline-offset-0 z-10 ring-1 ring-primary-500 dark:ring-primary-400':
35
          state.focused,
36
      },
37

38
      // Misc
39
      'cursor-pointer',
40
      'select-none',
41
      {
42
        'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default':
43
          props.disabled,
44
      },
45
    ],
46
  }),
47
  labelContainer: 'overflow-hidden flex flex-auto cursor-pointer',
48
  label: ({ props }) => ({
49
    class: [
50
      'text-base leading-[normal]',
51

52
      // Spacing
53
      {
54
        'py-2 px-3':
55
          props.display === 'comma' ||
56
          (props.display === 'chip' && !props?.modelValue?.length),
57
        'py-1 px-1': props.display === 'chip' && props?.modelValue?.length > 0,
58
      },
59

60
      // Color
61
      {
62
        'text-surface-800 dark:text-white/80': props.modelValue?.length,
63
        'text-surface-400 dark:text-surface-500': !props.modelValue?.length,
64
      },
65
      'placeholder:text-surface-400 dark:placeholder:text-surface-500',
66

67
      // Transitions
68
      'transition duration-200',
69

70
      // Misc
71
      'overflow-hidden whitespace-nowrap cursor-pointer overflow-ellipsis',
72
    ],
73
  }),
74
  dropdown: {
75
    class: [
76
      // Flexbox
77
      'flex items-center justify-center',
78
      'shrink-0',
79

80
      // Color and Background
81
      'bg-transparent',
82
      'text-surface-500',
83

84
      // Size
85
      'w-12',
86

87
      // Shape
88
      'rounded-r-md',
89
    ],
90
  },
91
  overlay: {
92
    class: [
93
      // Colors
94
      'bg-surface-0 dark:bg-surface-900',
95
      'text-surface-700 dark:text-white/80',
96

97
      // Shape
98
      'border border-surface-300 dark:border-surface-700',
99
      'rounded-md',
100
      'shadow-md',
101
      'mt-[2px]',
102
    ],
103
  },
104
  header: {
105
    class: [
106
      //Flex
107
      'flex items-center justify-between',
108

109
      // Spacing
110
      'pt-2 px-4 pb-0 gap-2',
111
      'm-0',
112

113
      //Shape
114
      'border-b-0',
115
      'rounded-tl-md',
116
      'rounded-tr-md',
117

118
      // Color
119
      'text-surface-700 dark:text-white/80',
120
      'bg-surface-0 dark:bg-surface-900',
121
      'border-surface-300 dark:border-surface-700',
122

123
      '[&_[data-pc-name=pcfiltercontainer]]:!flex-auto',
124
      '[&_[data-pc-name=pcfilter]]:w-full',
125
    ],
126
  },
127
  listContainer: {
128
    class: [
129
      // Sizing
130
      'max-h-[200px]',
131

132
      // Misc
133
      'overflow-auto',
134
    ],
135
  },
136
  list: {
137
    class: 'p-1 list-none m-0',
138
  },
139
  option: ({ context }) => ({
140
    class: [
141
      'relative',
142
      'flex items-center',
143

144
      // Font
145
      'leading-none',
146

147
      // Spacing
148
      'm-0 px-3 py-2 gap-2',
149
      'first:mt-0 mt-[2px]',
150

151
      // Shape
152
      'border-0 rounded',
153

154
      // Colors
155
      {
156
        'text-surface-700 dark:text-white/80':
157
          !context.focused && !context.selected,
158
        'bg-surface-200 dark:bg-surface-600/60':
159
          context.focused && !context.selected,
160
        'text-surface-700 dark:text-white/80':
161
          context.focused && !context.selected,
162
        'bg-highlight': context.selected,
163
      },
164

165
      //States
166
      {
167
        'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]':
168
          !context.focused && !context.selected,
169
      },
170
      { 'hover:bg-highlight-emphasis': context.selected },
171
      {
172
        'hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-[rgba(255,255,255,0.03)]':
173
          context.focused && !context.selected,
174
      },
175

176
      // Transition
177
      'transition-shadow duration-200',
178

179
      // Misc
180
      'cursor-pointer overflow-hidden whitespace-nowrap',
181
    ],
182
  }),
183
  optionGroup: {
184
    class: [
185
      'font-semibold',
186

187
      // Spacing
188
      'm-0 py-2 px-3',
189

190
      // Colors
191
      'text-surface-400 dark:text-surface-500',
192

193
      // Misc
194
      'cursor-auto',
195
    ],
196
  },
197
  emptyMessage: {
198
    class: [
199
      // Font
200
      'leading-none',
201

202
      // Spacing
203
      'py-2 px-3',
204

205
      // Color
206
      'text-surface-800 dark:text-white/80',
207
      'bg-transparent',
208
    ],
209
  },
210
  loadingIcon: {
211
    class: 'text-surface-400 dark:text-surface-500 animate-spin',
212
  },
213
  transition: {
214
    enterFromClass: 'opacity-0 scale-y-[0.8]',
215
    enterActiveClass:
216
      'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
217
    leaveActiveClass: 'transition-opacity duration-100 ease-linear',
218
    leaveToClass: 'opacity-0',
219
  },
220
};
221