sposchedule

1
export default {
2
  root: ({ props, parent }) => ({
3
    class: [
4
      // Flex
5
      'inline-flex',
6
      'relative',
7
      { 'flex-col': props.showButtons && props.buttonLayout === 'vertical' },
8
      { 'flex-1 w-[1%]': parent.instance.$name === 'InputGroup' },
9
      { 'w-full': props.fluid },
10

11
      // Shape
12
      {
13
        'first:rounded-l-md rounded-none last:rounded-r-md':
14
          parent.instance.$name === 'InputGroup' && !props.showButtons,
15
      },
16
      {
17
        'border-0 border-y border-l last:border-r border-surface-300 dark:border-surface-700':
18
          parent.instance.$name === 'InputGroup' && !props.showButtons,
19
      },
20
      {
21
        'first:ml-0 -ml-px':
22
          parent.instance.$name === 'InputGroup' && !props.showButtons,
23
      },
24

25
      //Sizing
26
      { '!w-16': props.showButtons && props.buttonLayout == 'vertical' },
27
    ],
28
  }),
29
  pcInput: {
30
    root: ({ parent, context }) => ({
31
      class: [
32
        // Font
33
        'leading-none',
34

35
        // Display
36
        'flex-auto',
37
        { 'w-[1%]': parent.props.fluid },
38

39
        //Text
40
        {
41
          'text-center':
42
            parent.props.showButtons && parent.props.buttonLayout == 'vertical',
43
        },
44

45
        // Spacing
46
        'py-2 px-3',
47
        'm-0',
48

49
        // Shape
50
        'rounded-md',
51
        {
52
          'rounded-l-none rounded-r-none':
53
            parent.props.showButtons &&
54
            parent.props.buttonLayout === 'horizontal',
55
        },
56
        {
57
          'rounded-none':
58
            parent.props.showButtons &&
59
            parent.props.buttonLayout === 'vertical',
60
        },
61

62
        {
63
          'border-0':
64
            parent.instance.$parentInstance?.$name === 'InputGroup' &&
65
            !parent.props.showButtons,
66
        },
67

68
        // Colors
69
        'text-surface-800 dark:text-white/80',
70
        'placeholder:text-surface-400 dark:placeholder:text-surface-500',
71
        { 'bg-surface-0 dark:bg-surface-950': !context.disabled },
72
        'border',
73
        { 'border-surface-300 dark:border-surface-700': !parent.props.invalid },
74

75
        // Invalid State
76
        'invalid:focus:ring-red-200',
77
        'invalid:hover:border-red-500',
78
        { 'border-red-500 dark:border-red-400': parent.props.invalid },
79

80
        // States
81
        { 'hover:border-primary': !parent.props.invalid },
82
        'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10',
83
        {
84
          'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default':
85
            context.disabled,
86
        },
87

88
        // Filled State *for FloatLabel
89
        {
90
          filled:
91
            parent.instance?.$parentInstance?.$name === 'FloatLabel' &&
92
            parent.state.d_modelValue !== null,
93
        },
94

95
        //Position
96
        {
97
          'order-2':
98
            parent.props.buttonLayout == 'horizontal' ||
99
            parent.props.buttonLayout === 'vertical',
100
        },
101
      ],
102
    }),
103
  },
104
  buttonGroup: ({ props }) => ({
105
    class: [
106
      'absolute',
107

108
      // Flex
109
      'flex',
110
      'flex-col',
111

112
      'top-px right-px',
113

114
      {
115
        'h-[calc(100%-2px)]':
116
          props.showButtons && props.buttonLayout === 'stacked',
117
      },
118
    ],
119
  }),
120
  incrementButton: ({ props }) => ({
121
    class: [
122
      // Display
123
      {
124
        'flex flex-initial shrink-0':
125
          props.showButtons && props.buttonLayout === 'horizontal',
126
      },
127
      {
128
        'flex flex-auto': props.showButtons && props.buttonLayout === 'stacked',
129
      },
130

131
      // Alignment
132
      'items-center',
133
      'justify-center',
134
      'text-center align-bottom',
135

136
      //Position
137
      'relative',
138
      { 'order-3': props.showButtons && props.buttonLayout === 'horizontal' },
139
      { 'order-1': props.showButtons && props.buttonLayout === 'vertical' },
140

141
      //Color
142
      'text-surface-800 dark:text-surface-0',
143
      'bg-transparent',
144
      {
145
        'dark:bg-surface-900':
146
          props.showButtons && props.buttonLayout !== 'stacked',
147
      },
148
      'border border-surface-300 dark:border-surface-700',
149
      { 'border-0': props.showButtons && props.buttonLayout === 'stacked' },
150
      {
151
        'border-l-0':
152
          props.showButtons &&
153
          props.buttonLayout !== 'stacked' &&
154
          props.buttonLayout === 'horizontal',
155
      },
156
      {
157
        'border-b-0':
158
          props.showButtons &&
159
          props.buttonLayout !== 'stacked' &&
160
          props.buttonLayout === 'vertical',
161
      },
162

163
      // Sizing
164
      'w-[3rem]',
165
      { 'px-3 py-2': props.showButtons && props.buttonLayout !== 'stacked' },
166
      { 'p-0': props.showButtons && props.buttonLayout === 'stacked' },
167
      { 'w-full': props.showButtons && props.buttonLayout === 'vertical' },
168

169
      // Shape
170
      'rounded-md',
171
      { 'rounded-md': props.showButtons && props.buttonLayout == 'stacked' },
172
      {
173
        'rounded-bl-none rounded-tl-none':
174
          props.showButtons && props.buttonLayout === 'horizontal',
175
      },
176
      {
177
        'rounded-bl-none rounded-br-none':
178
          props.showButtons && props.buttonLayout === 'vertical',
179
      },
180

181
      //States
182
      'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]',
183

184
      //Misc
185
      'cursor-pointer overflow-hidden select-none',
186
    ],
187
  }),
188
  incrementIcon: 'inline-block w-4 h-4',
189
  decrementButton: ({ props }) => ({
190
    class: [
191
      // Display
192
      {
193
        'flex flex-initial shrink-0':
194
          props.showButtons && props.buttonLayout === 'horizontal',
195
      },
196
      {
197
        'flex flex-auto': props.showButtons && props.buttonLayout === 'stacked',
198
      },
199

200
      // Alignment
201
      'items-center',
202
      'justify-center',
203
      'text-center align-bottom',
204

205
      //Position
206
      'relative',
207
      { 'order-1': props.showButtons && props.buttonLayout === 'horizontal' },
208
      { 'order-3': props.showButtons && props.buttonLayout === 'vertical' },
209

210
      //Color
211
      'text-surface-800 dark:text-surface-0',
212
      'bg-transparent',
213
      {
214
        'dark:bg-surface-900':
215
          props.showButtons && props.buttonLayout !== 'stacked',
216
      },
217
      'border border-surface-300 dark:border-surface-700',
218
      { 'border-0': props.showButtons && props.buttonLayout === 'stacked' },
219
      {
220
        'border-r-0':
221
          props.showButtons &&
222
          props.buttonLayout !== 'stacked' &&
223
          props.buttonLayout === 'horizontal',
224
      },
225
      {
226
        'border-t-0':
227
          props.showButtons &&
228
          props.buttonLayout !== 'stacked' &&
229
          props.buttonLayout === 'vertical',
230
      },
231

232
      // Sizing
233
      'w-[3rem]',
234
      { 'px-3 py-2': props.showButtons && props.buttonLayout !== 'stacked' },
235
      { 'p-0': props.showButtons && props.buttonLayout === 'stacked' },
236
      { 'w-full': props.showButtons && props.buttonLayout === 'vertical' },
237

238
      // Shape
239
      'rounded-md',
240
      {
241
        'rounded-tr-none rounded-tl-none rounded-bl-none':
242
          props.showButtons && props.buttonLayout === 'stacked',
243
      },
244
      {
245
        'rounded-tr-none rounded-br-none ':
246
          props.showButtons && props.buttonLayout === 'horizontal',
247
      },
248
      {
249
        'rounded-tr-none rounded-tl-none ':
250
          props.showButtons && props.buttonLayout === 'vertical',
251
      },
252

253
      //States
254
      'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]',
255

256
      //Misc
257
      'cursor-pointer overflow-hidden select-none',
258
    ],
259
  }),
260
  decrementIcon: 'inline-block w-4 h-4',
261
};
262