@rkosafo/cai.components 0.0.68 → 0.0.69
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
import { onMount } from 'svelte';
|
|
3
3
|
import { fade } from 'svelte/transition';
|
|
4
4
|
import clsx from 'clsx';
|
|
5
|
-
// import { Button, ToolbarButton, type DatepickerProps } from '../..';
|
|
6
5
|
import { datepicker } from './index.js';
|
|
7
6
|
import {
|
|
8
7
|
parse,
|
|
@@ -50,7 +49,9 @@
|
|
|
50
49
|
monthBtn = 'text-gray-700 dark:text-gray-300',
|
|
51
50
|
class: className,
|
|
52
51
|
elementRef = $bindable(),
|
|
53
|
-
name
|
|
52
|
+
name,
|
|
53
|
+
// New placement prop
|
|
54
|
+
placement = 'bottom-start'
|
|
54
55
|
}: DatepickerProps = $props();
|
|
55
56
|
|
|
56
57
|
const theme = getTheme('datepicker');
|
|
@@ -450,7 +451,7 @@
|
|
|
450
451
|
nav,
|
|
451
452
|
dayButton,
|
|
452
453
|
monthButton
|
|
453
|
-
} = datepicker();
|
|
454
|
+
} = datepicker({ placement });
|
|
454
455
|
</script>
|
|
455
456
|
|
|
456
457
|
{#snippet navButton(forward: boolean)}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { Classes } from
|
|
2
|
-
import { type VariantProps } from
|
|
1
|
+
import type { Classes } from '../../themes/themeUtils.js';
|
|
2
|
+
import { type VariantProps } from 'tailwind-variants';
|
|
3
3
|
export type DatepickerVariants = VariantProps<typeof datepicker> & Classes<typeof datepicker>;
|
|
4
4
|
export declare const datepicker: import("tailwind-variants").TVReturnType<{
|
|
5
5
|
color: {
|
|
@@ -100,6 +100,47 @@ export declare const datepicker: import("tailwind-variants").TVReturnType<{
|
|
|
100
100
|
false: {
|
|
101
101
|
base: string;
|
|
102
102
|
};
|
|
103
|
+
true: {
|
|
104
|
+
base: string;
|
|
105
|
+
};
|
|
106
|
+
};
|
|
107
|
+
placement: {
|
|
108
|
+
'top-start': {
|
|
109
|
+
base: string;
|
|
110
|
+
};
|
|
111
|
+
top: {
|
|
112
|
+
base: string;
|
|
113
|
+
};
|
|
114
|
+
'top-end': {
|
|
115
|
+
base: string;
|
|
116
|
+
};
|
|
117
|
+
'bottom-start': {
|
|
118
|
+
base: string;
|
|
119
|
+
};
|
|
120
|
+
bottom: {
|
|
121
|
+
base: string;
|
|
122
|
+
};
|
|
123
|
+
'bottom-end': {
|
|
124
|
+
base: string;
|
|
125
|
+
};
|
|
126
|
+
'left-start': {
|
|
127
|
+
base: string;
|
|
128
|
+
};
|
|
129
|
+
left: {
|
|
130
|
+
base: string;
|
|
131
|
+
};
|
|
132
|
+
'left-end': {
|
|
133
|
+
base: string;
|
|
134
|
+
};
|
|
135
|
+
'right-start': {
|
|
136
|
+
base: string;
|
|
137
|
+
};
|
|
138
|
+
right: {
|
|
139
|
+
base: string;
|
|
140
|
+
};
|
|
141
|
+
'right-end': {
|
|
142
|
+
base: string;
|
|
143
|
+
};
|
|
103
144
|
};
|
|
104
145
|
current: {
|
|
105
146
|
true: {
|
|
@@ -227,6 +268,47 @@ export declare const datepicker: import("tailwind-variants").TVReturnType<{
|
|
|
227
268
|
false: {
|
|
228
269
|
base: string;
|
|
229
270
|
};
|
|
271
|
+
true: {
|
|
272
|
+
base: string;
|
|
273
|
+
};
|
|
274
|
+
};
|
|
275
|
+
placement: {
|
|
276
|
+
'top-start': {
|
|
277
|
+
base: string;
|
|
278
|
+
};
|
|
279
|
+
top: {
|
|
280
|
+
base: string;
|
|
281
|
+
};
|
|
282
|
+
'top-end': {
|
|
283
|
+
base: string;
|
|
284
|
+
};
|
|
285
|
+
'bottom-start': {
|
|
286
|
+
base: string;
|
|
287
|
+
};
|
|
288
|
+
bottom: {
|
|
289
|
+
base: string;
|
|
290
|
+
};
|
|
291
|
+
'bottom-end': {
|
|
292
|
+
base: string;
|
|
293
|
+
};
|
|
294
|
+
'left-start': {
|
|
295
|
+
base: string;
|
|
296
|
+
};
|
|
297
|
+
left: {
|
|
298
|
+
base: string;
|
|
299
|
+
};
|
|
300
|
+
'left-end': {
|
|
301
|
+
base: string;
|
|
302
|
+
};
|
|
303
|
+
'right-start': {
|
|
304
|
+
base: string;
|
|
305
|
+
};
|
|
306
|
+
right: {
|
|
307
|
+
base: string;
|
|
308
|
+
};
|
|
309
|
+
'right-end': {
|
|
310
|
+
base: string;
|
|
311
|
+
};
|
|
230
312
|
};
|
|
231
313
|
current: {
|
|
232
314
|
true: {
|
|
@@ -354,6 +436,47 @@ export declare const datepicker: import("tailwind-variants").TVReturnType<{
|
|
|
354
436
|
false: {
|
|
355
437
|
base: string;
|
|
356
438
|
};
|
|
439
|
+
true: {
|
|
440
|
+
base: string;
|
|
441
|
+
};
|
|
442
|
+
};
|
|
443
|
+
placement: {
|
|
444
|
+
'top-start': {
|
|
445
|
+
base: string;
|
|
446
|
+
};
|
|
447
|
+
top: {
|
|
448
|
+
base: string;
|
|
449
|
+
};
|
|
450
|
+
'top-end': {
|
|
451
|
+
base: string;
|
|
452
|
+
};
|
|
453
|
+
'bottom-start': {
|
|
454
|
+
base: string;
|
|
455
|
+
};
|
|
456
|
+
bottom: {
|
|
457
|
+
base: string;
|
|
458
|
+
};
|
|
459
|
+
'bottom-end': {
|
|
460
|
+
base: string;
|
|
461
|
+
};
|
|
462
|
+
'left-start': {
|
|
463
|
+
base: string;
|
|
464
|
+
};
|
|
465
|
+
left: {
|
|
466
|
+
base: string;
|
|
467
|
+
};
|
|
468
|
+
'left-end': {
|
|
469
|
+
base: string;
|
|
470
|
+
};
|
|
471
|
+
'right-start': {
|
|
472
|
+
base: string;
|
|
473
|
+
};
|
|
474
|
+
right: {
|
|
475
|
+
base: string;
|
|
476
|
+
};
|
|
477
|
+
'right-end': {
|
|
478
|
+
base: string;
|
|
479
|
+
};
|
|
357
480
|
};
|
|
358
481
|
current: {
|
|
359
482
|
true: {
|
|
@@ -1,56 +1,143 @@
|
|
|
1
|
-
import { tv } from
|
|
1
|
+
import { tv } from 'tailwind-variants';
|
|
2
2
|
export const datepicker = tv({
|
|
3
3
|
slots: {
|
|
4
|
-
base:
|
|
5
|
-
input:
|
|
6
|
-
titleVariant:
|
|
7
|
-
polite:
|
|
8
|
-
button:
|
|
9
|
-
actionButtons:
|
|
10
|
-
columnHeader:
|
|
11
|
-
grid:
|
|
12
|
-
nav:
|
|
13
|
-
dayButton:
|
|
14
|
-
monthButton:
|
|
4
|
+
base: 'inline-block rounded-lg bg-white dark:bg-gray-700 shadow-lg p-4',
|
|
5
|
+
input: 'w-full border-gray-300 rounded-md border px-4 py-2 text-sm focus:ring-2 focus:outline-none outline-none dark:border-gray-600 dark:bg-gray-700 dark:text-white disabled:cursor-not-allowed disabled:opacity-50',
|
|
6
|
+
titleVariant: 'mb-2 text-lg font-semibold text-gray-900 dark:text-white',
|
|
7
|
+
polite: 'text-sm rounded-lg text-gray-900 dark:text-white bg-white dark:bg-gray-700 font-semibold py-2.5 px-5 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-200',
|
|
8
|
+
button: 'absolute inset-y-0 right-0 flex items-center px-3 text-gray-500 focus:outline-hidden dark:text-gray-400',
|
|
9
|
+
actionButtons: 'mt-4 flex justify-between',
|
|
10
|
+
columnHeader: 'text-center text-sm font-medium text-gray-500 dark:text-gray-400',
|
|
11
|
+
grid: 'grid grid-cols-7 gap-1 w-64',
|
|
12
|
+
nav: 'mb-4 flex items-center justify-between',
|
|
13
|
+
dayButton: 'h-8 w-full block flex-1 leading-9 border-0 rounded-lg cursor-pointer text-center font-semibold text-sm day p-0',
|
|
14
|
+
monthButton: 'rounded-lg px-3 py-2 text-sm hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 dark:hover:bg-gray-700'
|
|
15
15
|
},
|
|
16
16
|
variants: {
|
|
17
17
|
color: {
|
|
18
|
-
primary: {
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
18
|
+
primary: {
|
|
19
|
+
input: 'focus:ring-primary-500 dark:focus:ring-primary-400',
|
|
20
|
+
dayButton: 'bg-primary-100 dark:bg-primary-900'
|
|
21
|
+
},
|
|
22
|
+
blue: {
|
|
23
|
+
input: 'focus:ring-blue-500 dark:focus:ring-blue-400',
|
|
24
|
+
dayButton: 'bg-blue-100 dark:bg-blue-900'
|
|
25
|
+
},
|
|
26
|
+
red: {
|
|
27
|
+
input: 'focus:ring-red-500 dark:focus:ring-red-400',
|
|
28
|
+
dayButton: 'bg-red-100 dark:bg-red-900'
|
|
29
|
+
},
|
|
30
|
+
green: {
|
|
31
|
+
input: 'focus:ring-green-500 dark:focus:ring-green-400',
|
|
32
|
+
dayButton: 'bg-green-100 dark:bg-green-900'
|
|
33
|
+
},
|
|
34
|
+
yellow: {
|
|
35
|
+
input: 'focus:ring-yellow-500 dark:focus:ring-yellow-400',
|
|
36
|
+
dayButton: 'bg-yellow-100 dark:bg-yellow-900'
|
|
37
|
+
},
|
|
38
|
+
purple: {
|
|
39
|
+
input: 'focus:ring-purple-500 dark:focus:ring-purple-400',
|
|
40
|
+
dayButton: 'bg-purple-100 dark:bg-purple-900'
|
|
41
|
+
},
|
|
42
|
+
dark: {
|
|
43
|
+
input: 'focus:ring-gray-500 dark:focus:ring-gray-400',
|
|
44
|
+
dayButton: 'bg-gray-100 dark:bg-gray-900'
|
|
45
|
+
},
|
|
46
|
+
light: {
|
|
47
|
+
input: 'focus:ring-gray-500 dark:focus:ring-gray-400',
|
|
48
|
+
dayButton: 'bg-gray-100 dark:bg-gray-900'
|
|
49
|
+
},
|
|
50
|
+
alternative: {
|
|
51
|
+
input: 'focus:ring-alternative-500 dark:focus:ring-alternative-400',
|
|
52
|
+
dayButton: 'bg-alternative-100 dark:bg-alternative-900'
|
|
53
|
+
},
|
|
54
|
+
secondary: {
|
|
55
|
+
input: 'focus:ring-secondary-500 dark:focus:ring-secondary-400',
|
|
56
|
+
dayButton: 'bg-secondary-100 dark:bg-secondary-900'
|
|
57
|
+
},
|
|
58
|
+
gray: {
|
|
59
|
+
input: 'focus:ring-gray-500 dark:focus:ring-gray-400',
|
|
60
|
+
dayButton: 'bg-gray-100 dark:bg-gray-900'
|
|
61
|
+
},
|
|
62
|
+
orange: {
|
|
63
|
+
input: 'focus:ring-orange-500 dark:focus:ring-orange-400',
|
|
64
|
+
dayButton: 'bg-orange-100 dark:bg-orange-900'
|
|
65
|
+
},
|
|
66
|
+
amber: {
|
|
67
|
+
input: 'focus:ring-amber-500 dark:focus:ring-amber-400',
|
|
68
|
+
dayButton: 'bg-amber-100 dark:bg-amber-900'
|
|
69
|
+
},
|
|
70
|
+
lime: {
|
|
71
|
+
input: 'focus:ring-lime-500 dark:focus:ring-lime-400',
|
|
72
|
+
dayButton: 'bg-lime-100 dark:bg-lime-900'
|
|
73
|
+
},
|
|
74
|
+
emerald: {
|
|
75
|
+
input: 'focus:ring-emerald-500 dark:focus:ring-emerald-400',
|
|
76
|
+
dayButton: 'bg-emerald-100 dark:bg-emerald-900'
|
|
77
|
+
},
|
|
78
|
+
teal: {
|
|
79
|
+
input: 'focus:ring-teal-500 dark:focus:ring-teal-400',
|
|
80
|
+
dayButton: 'bg-teal-100 dark:bg-teal-900'
|
|
81
|
+
},
|
|
82
|
+
cyan: {
|
|
83
|
+
input: 'focus:ring-cyan-500 dark:focus:ring-cyan-400',
|
|
84
|
+
dayButton: 'bg-cyan-100 dark:bg-cyan-900'
|
|
85
|
+
},
|
|
86
|
+
sky: {
|
|
87
|
+
input: 'focus:ring-sky-500 dark:focus:ring-sky-400',
|
|
88
|
+
dayButton: 'bg-sky-100 dark:bg-sky-900'
|
|
89
|
+
},
|
|
90
|
+
indigo: {
|
|
91
|
+
input: 'focus:ring-indigo-500 dark:focus:ring-indigo-400',
|
|
92
|
+
dayButton: 'bg-indigo-100 dark:bg-indigo-900'
|
|
93
|
+
},
|
|
94
|
+
violet: {
|
|
95
|
+
input: 'focus:ring-violet-500 dark:focus:ring-violet-400',
|
|
96
|
+
dayButton: 'bg-violet-100 dark:bg-violet-900'
|
|
97
|
+
},
|
|
98
|
+
fuchsia: {
|
|
99
|
+
input: 'focus:ring-fuchsia-500 dark:focus:ring-fuchsia-400',
|
|
100
|
+
dayButton: 'bg-fuchsia-100 dark:bg-fuchsia-900'
|
|
101
|
+
},
|
|
102
|
+
pink: {
|
|
103
|
+
input: 'focus:ring-pink-500 dark:focus:ring-pink-400',
|
|
104
|
+
dayButton: 'bg-pink-100 dark:bg-pink-900'
|
|
105
|
+
},
|
|
106
|
+
rose: {
|
|
107
|
+
input: 'focus:ring-rose-500 dark:focus:ring-rose-400',
|
|
108
|
+
dayButton: 'bg-rose-100 dark:bg-rose-900'
|
|
109
|
+
}
|
|
41
110
|
},
|
|
42
111
|
inline: {
|
|
43
|
-
false: { base:
|
|
112
|
+
false: { base: 'absolute z-50 mt-1' },
|
|
113
|
+
true: { base: 'inline-block' }
|
|
114
|
+
},
|
|
115
|
+
placement: {
|
|
116
|
+
'top-start': { base: 'bottom-full left-0 mb-1' },
|
|
117
|
+
top: { base: 'bottom-full left-1/2 transform -translate-x-1/2 mb-1' },
|
|
118
|
+
'top-end': { base: 'bottom-full right-0 mb-1' },
|
|
119
|
+
'bottom-start': { base: 'top-full left-0 mt-1' },
|
|
120
|
+
bottom: { base: 'top-full left-1/2 transform -translate-x-1/2 mt-1' },
|
|
121
|
+
'bottom-end': { base: 'top-full right-0 mt-1' },
|
|
122
|
+
'left-start': { base: 'right-full top-0 mr-1' },
|
|
123
|
+
left: { base: 'right-full top-1/2 transform -translate-y-1/2 mr-1' },
|
|
124
|
+
'left-end': { base: 'right-full bottom-0 mr-1' },
|
|
125
|
+
'right-start': { base: 'left-full top-0 ml-1' },
|
|
126
|
+
right: { base: 'left-full top-1/2 transform -translate-y-1/2 ml-1' },
|
|
127
|
+
'right-end': { base: 'left-full bottom-0 ml-1' }
|
|
44
128
|
},
|
|
45
129
|
current: {
|
|
46
|
-
true: { dayButton:
|
|
130
|
+
true: { dayButton: 'text-gray-400 dark:text-gray-500' }
|
|
47
131
|
},
|
|
48
132
|
today: {
|
|
49
|
-
true: { dayButton:
|
|
133
|
+
true: { dayButton: 'font-bold' }
|
|
50
134
|
},
|
|
51
135
|
unavailable: {
|
|
52
|
-
true: { dayButton:
|
|
136
|
+
true: { dayButton: 'opacity-50 cursor-not-allowed hover:bg-gray-100 dark:hover:bg-gray-700' }
|
|
53
137
|
}
|
|
54
138
|
},
|
|
55
|
-
|
|
139
|
+
defaultVariants: {
|
|
140
|
+
placement: 'bottom-start',
|
|
141
|
+
inline: false
|
|
142
|
+
}
|
|
56
143
|
});
|
package/dist/types/index.d.ts
CHANGED
|
@@ -329,6 +329,7 @@ export interface DatepickerProps extends DatepickerVariants, Omit<HTMLAttributes
|
|
|
329
329
|
translationLocale?: string;
|
|
330
330
|
elementRef?: HTMLInputElement;
|
|
331
331
|
name?: string | undefined | null;
|
|
332
|
+
placement?: 'top-start' | 'top' | 'top-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | 'right-start' | 'right' | 'right-end';
|
|
332
333
|
}
|
|
333
334
|
export interface DrawerProps extends DrawerVariants, HTMLAttributes<HTMLDivElement> {
|
|
334
335
|
hidden: boolean;
|