sposchedule

1
export default {
2
  root: ({ state }) => ({
3
    class: [
4
      // Shape
5
      'rounded-lg',
6
      'shadow-lg',
7
      'border-0',
8

9
      // Size
10
      'max-h-[90vh]',
11
      'm-0',
12

13
      // Color
14
      'bg-surface-0 dark:bg-surface-900',
15
      '[&:last-child]:border-b',
16
      'border-surface-200 dark:border-surface-700',
17

18
      // Transitions
19
      'transform',
20
      'scale-100',
21

22
      // Maximized State
23
      {
24
        'transition-none': state.maximized,
25
        'transform-none': state.maximized,
26
        '!w-screen': state.maximized,
27
        '!h-screen': state.maximized,
28
        '!max-h-full': state.maximized,
29
        '!top-0': state.maximized,
30
        '!left-0': state.maximized,
31
      },
32
    ],
33
  }),
34
  header: {
35
    class: [
36
      // Flexbox and Alignment
37
      'flex items-center justify-between',
38
      'shrink-0',
39

40
      // Spacing
41
      'p-6',
42

43
      // Shape
44
      'rounded-tl-lg',
45
      'rounded-tr-lg',
46

47
      // Colors
48
      'text-surface-700 dark:text-surface-0/80',
49
      'border border-b-0',
50
      'border-surface-200 dark:border-surface-700',
51
    ],
52
  },
53
  title: {
54
    class: ['font-semibold text-xl leading-[normal]'],
55
  },
56
  headerActions: {
57
    class: ['flex items-center'],
58
  },
59
  content: ({ state, instance }) => ({
60
    class: [
61
      // Spacing
62
      'px-6',
63
      'pb-6',
64
      'pt-0',
65

66
      // Shape
67
      {
68
        grow: state.maximized,
69
        'rounded-bl-lg': !instance.$slots.footer,
70
        'rounded-br-lg': !instance.$slots.footer,
71
      },
72

73
      // Colors
74
      'text-surface-700 dark:text-surface-0/80',
75
      'border border-t-0 border-b-0',
76
      'border-surface-200 dark:border-surface-700',
77

78
      // Misc
79
      'overflow-y-auto',
80
    ],
81
  }),
82
  footer: {
83
    class: [
84
      // Flexbox and Alignment
85
      'flex items-center justify-end',
86
      'shrink-0',
87
      'text-right',
88
      'gap-2',
89

90
      // Spacing
91
      'px-6',
92
      'pb-6',
93

94
      // Shape
95
      'border-t-0',
96
      'rounded-b-lg',
97

98
      // Colors
99
      'bg-surface-0 dark:bg-surface-900',
100
      'text-surface-700 dark:text-surface-0/80',
101
      'border border-t-0 border-b-0',
102
      'border-surface-200 dark:border-surface-700',
103
    ],
104
  },
105
  mask: ({ props }) => ({
106
    class: [
107
      // Transitions
108
      'transition-all',
109
      'duration-300',
110
      { 'p-5': !props.position == 'full' },
111

112
      // Background and Effects
113
      { 'has-[.mask-active]:bg-transparent bg-black/40': props.modal },
114
    ],
115
  }),
116
  transition: ({ props }) => {
117
    return props.position === 'top'
118
      ? {
119
          enterFromClass:
120
            'opacity-0 scale-75 translate-x-0 -translate-y-full translate-z-0 mask-active',
121
          enterActiveClass: 'transition-all duration-200 ease-out',
122
          leaveActiveClass: 'transition-all duration-200 ease-out',
123
          leaveToClass:
124
            'opacity-0 scale-75 translate-x-0 -translate-y-full translate-z-0 mask-active',
125
        }
126
      : props.position === 'bottom'
127
        ? {
128
            enterFromClass: 'opacity-0 scale-75 translate-y-full mask-active',
129
            enterActiveClass: 'transition-all duration-200 ease-out',
130
            leaveActiveClass: 'transition-all duration-200 ease-out',
131
            leaveToClass:
132
              'opacity-0 scale-75 translate-x-0 translate-y-full translate-z-0 mask-active',
133
          }
134
        : props.position === 'left' ||
135
            props.position === 'topleft' ||
136
            props.position === 'bottomleft'
137
          ? {
138
              enterFromClass:
139
                'opacity-0 scale-75 -translate-x-full translate-y-0 translate-z-0 mask-active',
140
              enterActiveClass: 'transition-all duration-200 ease-out',
141
              leaveActiveClass: 'transition-all duration-200 ease-out',
142
              leaveToClass:
143
                'opacity-0 scale-75  -translate-x-full translate-y-0 translate-z-0 mask-active',
144
            }
145
          : props.position === 'right' ||
146
              props.position === 'topright' ||
147
              props.position === 'bottomright'
148
            ? {
149
                enterFromClass:
150
                  'opacity-0 scale-75 translate-x-full translate-y-0 translate-z-0 mask-active',
151
                enterActiveClass: 'transition-all duration-200 ease-out',
152
                leaveActiveClass: 'transition-all duration-200 ease-out',
153
                leaveToClass:
154
                  'opacity-0 scale-75 translate-x-full translate-y-0 translate-z-0 mask-active',
155
              }
156
            : {
157
                enterFromClass: 'opacity-0 scale-75 mask-active',
158
                enterActiveClass: 'transition-all duration-200 ease-out',
159
                leaveActiveClass: 'transition-all duration-200 ease-out',
160
                leaveToClass: 'opacity-0 scale-75 mask-active',
161
              };
162
  },
163
};
164