sposchedule

1
export default {
2
  root: ({ props }) => ({
3
    class: [
4
      'relative',
5
      { '[&>input]:pr-10': props.toggleMask },
6
      { 'flex [&>input]:w-full': props.fluid, 'inline-flex': !props.fluid },
7
    ],
8
  }),
9
  overlay: {
10
    class: [
11
      // Spacing
12
      'p-3',
13

14
      // Shape
15
      'border',
16
      'shadow-md rounded-md',
17

18
      // Colors
19
      'bg-surface-0 dark:bg-surface-900',
20
      'text-surface-700 dark:text-white/80',
21
      'border-surface-200 dark:border-surface-700',
22
    ],
23
  },
24
  meter: {
25
    class: [
26
      // Position and Overflow
27
      'overflow-hidden',
28
      'relative',
29

30
      // Shape and Size
31
      'border-0',
32
      'h-[10px]',
33
      'rounded-md',
34

35
      // Spacing
36
      'mb-3',
37

38
      // Colors
39
      'bg-surface-100 dark:bg-surface-700',
40
    ],
41
  },
42
  meterLabel: ({ instance }) => ({
43
    class: [
44
      // Size
45
      'h-full',
46

47
      // Colors
48
      {
49
        'bg-red-500 dark:bg-red-400/50': instance?.meter?.strength == 'weak',
50
        'bg-orange-500 dark:bg-orange-400/50':
51
          instance?.meter?.strength == 'medium',
52
        'bg-green-500 dark:bg-green-400/50':
53
          instance?.meter?.strength == 'strong',
54
      },
55

56
      // Transitions
57
      'transition-all duration-1000 ease-in-out',
58
    ],
59
  }),
60
  maskIcon: {
61
    class: [
62
      'absolute top-1/2 right-3 -mt-2 z-10',
63
      'text-surface-600 dark:text-white/70',
64
    ],
65
  },
66
  unmaskIcon: {
67
    class: [
68
      'absolute top-1/2 right-3 -mt-2 z-10',
69
      'text-surface-600 dark:text-white/70',
70
    ],
71
  },
72
  transition: {
73
    enterFromClass: 'opacity-0 scale-y-[0.8]',
74
    enterActiveClass:
75
      'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
76
    leaveActiveClass: 'transition-opacity duration-100 ease-linear',
77
    leaveToClass: 'opacity-0',
78
  },
79
};
80