@fewangsit/wangsvue-presets 1.0.88 → 1.0.89-alpha.0

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,9 +1,7 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- var timepickerlabel = {
4
- class: '[&_span]:w-[37px] [&_span]:h-[26px] [&_span]:flex [&_span]:justify-center [&_span]:items-center [&_span]:border [&_span]:border-general-200 [&_span]:rounded [&_span]:',
5
- };
6
- exports.default = {
3
+ var isFirefoxBased = navigator.userAgent.includes('Firefox');
4
+ var preset = {
7
5
  root: function (_a) {
8
6
  var props = _a.props;
9
7
  return ({
@@ -25,23 +23,17 @@ exports.default = {
25
23
  var props = _a.props;
26
24
  return ({
27
25
  class: [
28
- 'w-full peer',
26
+ 'w-full h-full peer',
29
27
  // Font
30
- 'text-xs font-normal placeholder:font-normal leading-6',
28
+ 'text-xs font-normal placeholder:font-normal',
31
29
  // Colors
32
- 'text-grayscale-900',
30
+ {
31
+ 'text-grayscale-900': !props.disabled,
32
+ 'text-general-200': props.disabled,
33
+ },
33
34
  'placeholder:text-general-200',
34
35
  // Shape
35
36
  'appearance-none',
36
- // { 'rounded-md': !props.showIcon || props.iconDisplay == 'input' },
37
- // {
38
- // 'rounded-l-md flex-1 pr-9 ':
39
- // props.showIcon && props.iconDisplay !== 'input',
40
- // },
41
- // {
42
- // 'rounded-md flex-1 pr-9':
43
- // props.showIcon && props.iconDisplay === 'input',
44
- // },
45
37
  // Transitions
46
38
  'transition-colors',
47
39
  'duration-200',
@@ -51,7 +43,7 @@ exports.default = {
51
43
  });
52
44
  },
53
45
  inputicon: {
54
- class: ['text-grayscale-900 peer-disabled:bg-general-300'],
46
+ class: ['w-4 h-4 text-grayscale-900 peer-disabled:text-general-300'],
55
47
  },
56
48
  dropdownbutton: {
57
49
  root: {
@@ -74,31 +66,20 @@ exports.default = {
74
66
  ],
75
67
  },
76
68
  },
77
- panel: function (_a) {
78
- var props = _a.props;
79
- return ({
80
- class: [
81
- 'datepicker-panel',
82
- // Display & Position
83
- 'inline-flex',
84
- 'flex-col justify-start items-center gap-2.5',
85
- {
86
- 'absolute': !props.inline,
87
- 'inline-block': props.inline,
88
- },
89
- // Size
90
- '!w-[272px] !min-w-[272px] h-max p-6 shadow-panel',
91
- { 'min-w-[80vw] w-auto p-2 ': props.touchUI },
92
- { 'p-2 min-w-full': props.inline },
93
- // Shape
94
- 'rounded-[7px]',
95
- // Colors
96
- 'bg-white',
97
- //Misc
98
- { 'overflow-x-auto': props.inline },
99
- ],
100
- });
101
- },
69
+ panel: function () { return ({
70
+ class: [
71
+ 'datepicker-panel',
72
+ // Display & Position
73
+ 'flex flex-col justify-start items-center',
74
+ // Size
75
+ 'h-max p-6 gap-2.5',
76
+ 'bg-white w-[272px] !min-w-[272px]',
77
+ // Shape
78
+ 'rounded-lg',
79
+ // Colors
80
+ 'bg-white shadow-panel',
81
+ ],
82
+ }); },
102
83
  datepickerMask: {
103
84
  class: [
104
85
  'fixed top-0 left-0 w-full h-full',
@@ -111,7 +92,7 @@ exports.default = {
111
92
  var props = _a.props, state = _a.state;
112
93
  return ({
113
94
  class: [
114
- 'min-h-[26.8px]',
95
+ 'h-6 w-full',
115
96
  {
116
97
  hidden: !((_b = props.dateFormat) === null || _b === void 0 ? void 0 : _b.toString().toLowerCase().includes('y')) &&
117
98
  state.currentView === 'month',
@@ -119,13 +100,7 @@ exports.default = {
119
100
  //Font
120
101
  'text-xs font-normal',
121
102
  // Flexbox and Alignment
122
- 'flex justify-between items-start gap-1',
123
- // Spacing
124
- 'm-0 mb-2',
125
- // {
126
- // 'py-2 pl-2 pb-4': props.numberOfMonths <= 1,
127
- // 'py-2 pb-4': props.numberOfMonths > 1,
128
- // },
103
+ 'flex justify-between items-center gap-1',
129
104
  // Shape
130
105
  'rounded-t-md',
131
106
  // Colors
@@ -134,46 +109,44 @@ exports.default = {
134
109
  ],
135
110
  });
136
111
  },
137
- previousbutton: function (_a) {
138
- var props = _a.props;
139
- return ({
140
- class: [
141
- 'relative',
142
- // Flexbox and Alignment
143
- 'inline-flex items-center justify-center',
144
- 'order-1',
145
- // {
146
- // ' order-2': !(props.numberOfMonths > 1),
147
- // 'order-1': props.numberOfMonths > 1,
148
- // },
149
- // Size
150
- 'p-1.5 m-0',
151
- // Colors
152
- 'text-grayscale-900',
153
- 'border-0 ',
154
- 'bg-transparent',
155
- // States
156
- 'hover:bg-general-50',
157
- // Misc
158
- 'cursor-pointer overflow-hidden',
159
- ],
160
- });
161
- },
162
- title: function (_a) {
163
- var props = _a.props;
164
- return ({
165
- class: [
166
- // Text
167
- 'leading-6',
168
- 'my-0',
169
- 'order-2',
170
- // {
171
- // 'mr-auto': !(props.numberOfMonths > 1),
172
- // ' mx-auto': props.numberOfMonths > 1,
173
- // },
174
- ],
175
- });
176
- },
112
+ previousbutton: function () { return ({
113
+ class: [
114
+ 'relative',
115
+ // Flexbox and Alignment
116
+ 'inline-flex items-center justify-center',
117
+ 'order-1',
118
+ /*
119
+ * {
120
+ * ' order-2': !(props.numberOfMonths > 1),
121
+ * 'order-1': props.numberOfMonths > 1,
122
+ * },
123
+ */
124
+ // Size
125
+ 'p-1.5 m-0',
126
+ // Colors
127
+ 'text-grayscale-900',
128
+ 'border-0 ',
129
+ 'bg-transparent',
130
+ // States
131
+ 'hover:bg-general-50',
132
+ // Misc
133
+ 'cursor-pointer overflow-hidden',
134
+ ],
135
+ }); },
136
+ title: function () { return ({
137
+ class: [
138
+ // Text
139
+ 'leading-6',
140
+ 'my-0',
141
+ 'order-2',
142
+ /*
143
+ * {
144
+ * 'mr-auto': !(props.numberOfMonths > 1),
145
+ * ' mx-auto': props.numberOfMonths > 1,
146
+ * },
147
+ */
148
+ ],
149
+ }); },
177
150
  monthTitle: {
178
151
  class: [
179
152
  //Font
@@ -215,30 +188,30 @@ exports.default = {
215
188
  ],
216
189
  });
217
190
  },
218
- nextbutton: function (_a) {
219
- var props = _a.props;
220
- return ({
221
- class: [
222
- 'relative',
223
- // Flexbox and Alignment
224
- 'inline-flex items-center justify-center order-3',
225
- // {
226
- // ' order-3': !(props.numberOfMonths > 1),
227
- // 'order-1': props.numberOfMonths > 1,
228
- // },
229
- // Size
230
- 'p-1.5 m-0',
231
- // Colors
232
- 'text-grayscale-900',
233
- 'border-0 ',
234
- 'bg-transparent',
235
- // States
236
- 'hover:bg-general-50',
237
- // Misc
238
- 'cursor-pointer overflow-hidden',
239
- ],
240
- });
241
- },
191
+ nextbutton: function () { return ({
192
+ class: [
193
+ 'relative',
194
+ // Flexbox and Alignment
195
+ 'inline-flex items-center justify-center order-3',
196
+ /*
197
+ * {
198
+ * ' order-3': !(props.numberOfMonths > 1),
199
+ * 'order-1': props.numberOfMonths > 1,
200
+ * },
201
+ */
202
+ // Size
203
+ 'p-1.5 m-0',
204
+ // Colors
205
+ 'text-grayscale-900',
206
+ 'border-0 ',
207
+ 'bg-transparent',
208
+ // States
209
+ 'hover:bg-general-50',
210
+ // Misc
211
+ 'cursor-pointer overflow-hidden',
212
+ ],
213
+ }); },
214
+ // Unused
242
215
  table: {
243
216
  class: [
244
217
  // Size & Shape
@@ -253,17 +226,20 @@ exports.default = {
253
226
  '[&_[data-p-other-month="true"]]:invisible',
254
227
  ],
255
228
  },
229
+ // Unused
256
230
  tableheadercell: {
257
231
  class: [
258
232
  // Spacing
259
233
  'px-2 py-[5.4px]',
260
234
  ],
261
235
  },
236
+ // Unused
262
237
  tablebodyrow: {
263
238
  class: [
264
239
  // 'border-b border-surface-200 last:border-b-0',
265
240
  ],
266
241
  },
242
+ // Unused
267
243
  weekheader: {
268
244
  class: [
269
245
  'leading-6 text-sm font-normal',
@@ -277,8 +253,10 @@ exports.default = {
277
253
  },
278
254
  weekday: {
279
255
  class: [
280
- // Colors
281
- // 'text-surface-500/60 font-normal',
256
+ /*
257
+ * Colors
258
+ * 'text-surface-500/60 font-normal',
259
+ */
282
260
  ],
283
261
  },
284
262
  day: {
@@ -324,9 +302,12 @@ exports.default = {
324
302
  // 'mx-auto',
325
303
  // Shape & Size
326
304
  'w-8 h-8',
305
+ { hidden: context.date.otherMonth },
327
306
  // Colors
328
307
  {
329
- 'bg-primary-400 text-white rounded-none': (context.selected && !context.disabled) || context.date.today,
308
+ 'bg-general-100': context.date.today && !context.selected,
309
+ 'bg-primary-200 rounded-none': context.selected && !context.disabled,
310
+ '!rounded-full bg-primary-500 text-white': context.firstSelected || context.lastSelected,
330
311
  },
331
312
  {
332
313
  '!rounded-full': !context.selected,
@@ -334,8 +315,10 @@ exports.default = {
334
315
  // States
335
316
  'focus:outline-none focus-visible:outline-none',
336
317
  {
337
- 'hover:bg-primary-400/90': context.selected || context.date.today,
338
- 'hover:bg-primary-200': !context.selected,
318
+ 'hover:bg-primary-200/90': context.selected,
319
+ 'hover:!bg-primary-500/90': context.lastSelected || context.firstSelected,
320
+ 'hover:bg-general-50': !context.selected && !context.date.today,
321
+ 'hover:bg-general-100/90': context.date.today,
339
322
  },
340
323
  {
341
324
  'opacity-40 cursor-default': context.disabled,
@@ -347,13 +330,13 @@ exports.default = {
347
330
  monthpicker: {
348
331
  class: [
349
332
  // Layout
350
- 'w-full grid grid-cols-3 grid-rows-4 gap-y-4 gap-x-0',
333
+ 'w-full grid grid-cols-2 grid-rows-5 gap-y-1 gap-x-0 mt-1',
351
334
  ],
352
335
  },
353
336
  month: function (_a) {
354
337
  var context = _a.context;
355
338
  return ({
356
- 'class': [
339
+ class: [
357
340
  // Flexbox and Alignment
358
341
  'inline-flex items-center justify-center',
359
342
  // Size
@@ -366,21 +349,25 @@ exports.default = {
366
349
  {
367
350
  'text-grayscale-900 bg-transparent': !context.selected && !context.disabled,
368
351
  'bg-primary-400 text-white': context.selected && !context.disabled,
352
+ 'cursor-default text-general-200': context.disabled,
353
+ },
354
+ /*
355
+ * States
356
+ * 'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-400',
357
+ */
358
+ {
359
+ 'hover:bg-primary-50': !context.selected && !context.disabled,
360
+ 'hover:bg-primary-400/90': context.selected && !context.disabled,
369
361
  },
370
- // States
371
- // 'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-400',
372
- 'hover:bg-primary-50',
373
- 'hover:text-grayscale-900',
374
362
  // Misc
375
363
  'cursor-pointer',
376
364
  ],
377
- 'data-month-in-future': parseInt(context === null || context === void 0 ? void 0 : context.monthIndex) > new Date().getMonth(),
378
365
  });
379
366
  },
380
367
  yearpicker: {
381
368
  class: [
382
369
  // Layout
383
- 'w-full grid grid-cols-2 grid-rows-5 gap-y-1 gap-x-0',
370
+ 'w-full grid grid-cols-2 grid-rows-5 gap-y-1 gap-x-0 mt-1',
384
371
  ],
385
372
  },
386
373
  year: function (_a) {
@@ -399,15 +386,20 @@ exports.default = {
399
386
  {
400
387
  'text-grayscale-900 bg-transparent': !context.selected && !context.disabled,
401
388
  'bg-primary-400 text-white': context.selected && !context.disabled,
389
+ 'cursor-default text-general-200': context.disabled,
390
+ },
391
+ /*
392
+ * States
393
+ * 'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-400',
394
+ */
395
+ {
396
+ 'hover:bg-primary-50': !context.selected && !context.disabled,
397
+ 'hover:bg-primary-400/90': context.selected && !context.disabled,
402
398
  },
403
- // States
404
- // 'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-400',
405
- 'hover:text-grayscale-900',
406
- 'hover:bg-primary-50',
407
399
  // Misc
408
400
  'cursor-pointer',
409
401
  ],
410
- 'data-year-in-future': parseInt(context === null || context === void 0 ? void 0 : context.year.value) > new Date().getFullYear(),
402
+ 'data-year-in-future': parseInt(context === null || context === void 0 ? void 0 : context.year.value.toString()) > new Date().getFullYear(),
411
403
  });
412
404
  },
413
405
  timepicker: {
@@ -426,8 +418,10 @@ exports.default = {
426
418
  'flex',
427
419
  'items-center',
428
420
  'flex-col',
429
- // Spacing
430
- // 'px-2',
421
+ /*
422
+ * Spacing
423
+ * 'px-2',
424
+ */
431
425
  ],
432
426
  },
433
427
  separator: {
@@ -443,12 +437,12 @@ exports.default = {
443
437
  'items-center',
444
438
  'flex-col',
445
439
  'gap-3',
446
- // Spacing
447
- // 'px-2',
440
+ /*
441
+ * Spacing
442
+ * 'px-2',
443
+ */
448
444
  // Sizing
449
445
  'text-xs',
450
- // Misc
451
- timepickerlabel.class,
452
446
  ],
453
447
  },
454
448
  minutepicker: {
@@ -458,12 +452,12 @@ exports.default = {
458
452
  'items-center',
459
453
  'flex-col',
460
454
  'gap-3',
461
- // Spacing
462
- // 'px-2',
455
+ /*
456
+ * Spacing
457
+ * 'px-2',
458
+ */
463
459
  // Sizing
464
460
  'text-xs',
465
- // Misc
466
- timepickerlabel.class,
467
461
  ],
468
462
  },
469
463
  secondPicker: {
@@ -473,12 +467,23 @@ exports.default = {
473
467
  'items-center',
474
468
  'flex-col',
475
469
  'gap-3',
476
- // Spacing
477
- // 'px-2',
470
+ /*
471
+ * Spacing
472
+ * 'px-2',
473
+ */
478
474
  // Sizing
479
475
  'text-xs',
480
476
  ],
481
477
  },
478
+ timepickerlabel: {
479
+ class: [
480
+ 'w-[39px] h-[26px] flex justify-center items-center ring-general-200 rounded',
481
+ {
482
+ 'ring-1': isFirefoxBased,
483
+ 'ring-[0.5px]': !isFirefoxBased,
484
+ },
485
+ ],
486
+ },
482
487
  incrementbutton: {
483
488
  class: [
484
489
  'relative',
@@ -487,20 +492,24 @@ exports.default = {
487
492
  // Size
488
493
  'p-0.5 m-0',
489
494
  '!h-6 !w-6',
490
- '[&_i]:w-5',
491
- '[&_i]:h-5',
492
- '[&_i]:shrink-0',
493
- '',
494
495
  // Colors
495
496
  'text-grayscale-900',
496
497
  'border-0',
497
498
  'bg-transparent',
498
- // States
499
- // 'hover:text-surface-700',
499
+ /*
500
+ * States
501
+ * 'hover:text-surface-700',
502
+ */
500
503
  // Misc
501
504
  'cursor-pointer overflow-hidden',
502
505
  ],
503
506
  },
507
+ incrementicon: {
508
+ class: ['w-5 h-5 shrink-0'],
509
+ },
510
+ decrementicon: {
511
+ class: ['w-5 h-5 shrink-0'],
512
+ },
504
513
  decrementbutton: {
505
514
  class: [
506
515
  'relative',
@@ -509,43 +518,30 @@ exports.default = {
509
518
  // Size
510
519
  'p-0.5 m-0',
511
520
  '!h-6 !w-6',
512
- '[&_i]:w-5',
513
- '[&_i]:h-5',
514
- '[&_i]:shrink-0',
515
- '',
516
521
  // Colors
517
522
  'text-grayscale-900',
518
523
  'border-0',
519
524
  'bg-transparent',
520
- // States
521
- // 'hover:text-surface-700',
525
+ /*
526
+ * States
527
+ * 'hover:text-surface-700',
528
+ */
522
529
  // Misc
523
530
  'cursor-pointer overflow-hidden',
524
531
  ],
525
532
  },
533
+ // TODO: Removed this after new calendar released
526
534
  groupcontainer: {
527
535
  class: [
528
536
  // Flexbox
529
537
  'flex w-full',
530
538
  ],
531
539
  },
540
+ container: {
541
+ class: ['text-grayscale-900 text-xs flex flex-col gap-1 w-full'],
542
+ },
532
543
  group: {
533
- class: [
534
- // // Flexbox and Sizing
535
- // 'flex-1',
536
- 'w-full',
537
- // // Borders
538
- // 'border-l',
539
- // 'border-surface-200',
540
- // // Spacing
541
- // 'pr-0.5',
542
- // 'pl-0.5',
543
- // 'pt-0',
544
- // 'pb-0',
545
- // // Pseudo-Classes
546
- // 'first:pl-0',
547
- // 'first:border-l-0',
548
- ],
544
+ class: [],
549
545
  },
550
546
  buttonbar: {
551
547
  class: [
@@ -571,9 +567,11 @@ exports.default = {
571
567
  'text-primary-400',
572
568
  // Transitions
573
569
  'transition-colors duration-200 ease-in-out',
574
- // States
575
- // 'focus:outline-none focus:outline-offset-0 focus:ring-2 ring-inset',
576
- // 'focus:ring-primary-400',
570
+ /*
571
+ * States
572
+ * 'focus:outline-none focus:outline-offset-0 focus:ring-2 ring-inset',
573
+ * 'focus:ring-primary-400',
574
+ */
577
575
  // Misc
578
576
  'cursor-pointer',
579
577
  ],
@@ -608,3 +606,4 @@ exports.default = {
608
606
  leaveToClass: 'opacity-0',
609
607
  },
610
608
  };
609
+ exports.default = preset;
@@ -110,7 +110,7 @@ import inputcurrency from './inputcurrency';
110
110
  import inputotp from './inputotp/index.js';
111
111
  import inputtext from './inputtext/index.js';
112
112
  import inputbadge from './inputbadge/index.js';
113
- import calendar from './calendar/index.js';
113
+ import calendar from './calendar/index';
114
114
  import checkbox from './checkbox/index.js';
115
115
  import buttonradio from './buttonradio/index.js';
116
116
  import selectbutton from './selectbutton/index.js';