sposchedule

1
export default {
2
  root: ({ props, state, parent }) => ({
3
    class: [
4
      // Display and Position
5
      'inline-flex',
6
      'relative',
7
      // Shape
8
      { 'rounded-md': parent.instance.$name !== 'InputGroup' },
9
      {
10
        'first:rounded-l-md rounded-none last:rounded-r-md':
11
          parent.instance.$name == 'InputGroup',
12
      },
13
      {
14
        'border-0 border-y border-l last:border-r':
15
          parent.instance.$name == 'InputGroup',
16
      },
17
      {
18
        'first:ml-0 ml-[-1px]':
19
          parent.instance.$name == 'InputGroup' && !props.showButtons,
20
      },
21

22
      // Color and Background
23
      { 'bg-surface-0 dark:bg-surface-950': !props.disabled },
24

25
      'border',
26
      { 'dark:border-surface-700': parent.instance.$name != 'InputGroup' },
27
      { 'dark:border-surface-600': parent.instance.$name == 'InputGroup' },
28
      { 'border-surface-300 dark:border-surface-600': !props.invalid },
29

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

35
      // Transitions
36
      'transition-all',
37
      'duration-200',
38

39
      // States
40
      {
41
        'hover:border-surface-400 dark:hover:border-surface-600':
42
          !props.invalid,
43
      },
44
      {
45
        'outline-none outline-offset-0 ring-1 ring-primary-500 dark:ring-primary-400 z-10':
46
          state.focused,
47
      },
48

49
      // Misc
50
      'cursor-pointer',
51
      'select-none',
52
      {
53
        'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default':
54
          props.disabled,
55
      },
56
    ],
57
  }),
58
  label: ({ props, parent }) => ({
59
    class: [
60
      //Font
61
      'leading-[normal]',
62

63
      // Display
64
      'block',
65
      'flex-auto',
66

67
      // Color and Background
68
      'bg-transparent',
69
      'border-0',
70
      {
71
        'text-surface-800 dark:text-white/80': props.modelValue != undefined,
72
        'text-surface-400 dark:text-surface-500': props.modelValue == undefined,
73
      },
74
      'placeholder:text-surface-400 dark:placeholder:text-surface-500',
75

76
      // Sizing and Spacing
77
      'w-[1%]',
78
      'py-2 px-3',
79
      { 'pr-7': props.showClear },
80

81
      //Shape
82
      'rounded-none',
83

84
      // Transitions
85
      'transition',
86
      'duration-200',
87

88
      // States
89
      'focus:outline-none focus:shadow-none',
90

91
      // Filled State *for FloatLabel
92
      {
93
        filled:
94
          parent.instance?.$name == 'FloatLabel' && props.modelValue !== null,
95
      },
96

97
      // Misc
98
      'relative',
99
      'cursor-pointer',
100
      'overflow-hidden overflow-ellipsis',
101
      'whitespace-nowrap',
102
      'appearance-none',
103
    ],
104
  }),
105
  dropdown: {
106
    class: [
107
      // Flexbox
108
      'flex items-center justify-center',
109
      'shrink-0',
110

111
      // Color and Background
112
      'bg-transparent',
113
      'text-surface-500',
114

115
      // Size
116
      'w-12',
117

118
      // Shape
119
      'rounded-r-md',
120
    ],
121
  },
122
  overlay: {
123
    class: [
124
      // Colors
125
      'bg-surface-0 dark:bg-surface-900',
126
      'text-surface-700 dark:text-white/80',
127

128
      // Shape
129
      'border border-surface-300 dark:border-surface-700',
130
      'rounded-md',
131
      'shadow-md',
132
    ],
133
  },
134
  listContainer: {
135
    class: [
136
      // Sizing
137
      'max-h-[200px]',
138

139
      // Misc
140
      'overflow-auto',
141
    ],
142
  },
143
  list: {
144
    class: 'p-1 list-none m-0',
145
  },
146
  option: ({ context }) => ({
147
    class: [
148
      'relative',
149
      'flex items-center',
150

151
      // Font
152
      'leading-none',
153

154
      // Spacing
155
      'm-0 px-3 py-2',
156
      'first:mt-0 mt-[2px]',
157

158
      // Shape
159
      'border-0 rounded',
160

161
      // Colors
162
      {
163
        'text-surface-700 dark:text-white/80':
164
          !context.focused && !context.selected,
165
        'bg-surface-200 dark:bg-surface-600/60':
166
          context.focused && !context.selected,
167
        'text-surface-700 dark:text-white/80':
168
          context.focused && !context.selected,
169
        'bg-highlight': context.selected,
170
      },
171

172
      //States
173
      {
174
        'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]':
175
          !context.focused && !context.selected,
176
      },
177
      { 'hover:bg-highlight-emphasis': context.selected },
178
      {
179
        'hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-[rgba(255,255,255,0.03)]':
180
          context.focused && !context.selected,
181
      },
182

183
      // Transition
184
      'transition-shadow duration-200',
185

186
      // Misc
187
      'cursor-pointer overflow-hidden whitespace-nowrap',
188
    ],
189
  }),
190
  optionGroup: {
191
    class: [
192
      'font-semibold',
193

194
      // Spacing
195
      'm-0 py-2 px-3',
196

197
      // Colors
198
      'text-surface-400 dark:text-surface-500',
199

200
      // Misc
201
      'cursor-auto',
202
    ],
203
  },
204
  optionCheckIcon:
205
    'relative -ms-1.5 me-1.5 text-surface-700 dark:text-white/80 w-4 h-4',
206
  optionBlankIcon: 'w-4 h-4',
207
  emptyMessage: {
208
    class: [
209
      // Font
210
      'leading-none',
211

212
      // Spacing
213
      'py-2 px-3',
214

215
      // Color
216
      'text-surface-800 dark:text-white/80',
217
      'bg-transparent',
218
    ],
219
  },
220
  header: {
221
    class: [
222
      // Spacing
223
      'pt-2 px-2 pb-0',
224
      'm-0',
225

226
      //Shape
227
      'border-b-0',
228
      'rounded-tl-md',
229
      'rounded-tr-md',
230

231
      // Color
232
      'text-surface-700 dark:text-white/80',
233
      'bg-surface-0 dark:bg-surface-900',
234
      'border-surface-300 dark:border-surface-700',
235
    ],
236
  },
237
  clearIcon: {
238
    class: [
239
      // Color
240
      'text-surface-400 dark:text-surface-500',
241

242
      // Position
243
      'absolute',
244
      'top-1/2',
245
      'right-12',
246

247
      // Spacing
248
      '-mt-2',
249
    ],
250
  },
251
  loadingIcon: {
252
    class: 'text-surface-400 dark:text-surface-500 animate-spin',
253
  },
254
  transition: {
255
    enterFromClass: 'opacity-0 scale-y-[0.8]',
256
    enterActiveClass:
257
      'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
258
    leaveActiveClass: 'transition-opacity duration-100 ease-linear',
259
    leaveToClass: 'opacity-0',
260
  },
261
};
262