flowbite-svelte 0.46.23 → 0.47.0
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.
- package/dist/datepicker/Datepicker.svelte +276 -50
- package/dist/datepicker/Datepicker.svelte.d.ts +39 -29
- package/dist/forms/Fileupload.svelte +1 -3
- package/dist/forms/Fileupload.svelte.d.ts +0 -2
- package/package.json +4 -11
- package/dist/datepicker/Calender.svelte +0 -3
- package/dist/datepicker/Calender.svelte.d.ts +0 -23
- package/dist/datepicker/DateCalender.svelte +0 -150
- package/dist/datepicker/DateCalender.svelte.d.ts +0 -55
|
@@ -1,65 +1,291 @@
|
|
|
1
|
-
<script
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
<script>import { createEventDispatcher, onMount } from "svelte";
|
|
2
|
+
import { fade } from "svelte/transition";
|
|
3
|
+
import { Button } from "..";
|
|
4
|
+
import { ChevronLeftOutline, ChevronRightOutline, CalendarMonthSolid } from "flowbite-svelte-icons";
|
|
5
|
+
export let value = null;
|
|
6
|
+
export let defaultDate = null;
|
|
4
7
|
export let range = false;
|
|
5
|
-
export let
|
|
6
|
-
export let
|
|
7
|
-
export let
|
|
8
|
-
export let
|
|
9
|
-
export let
|
|
10
|
-
export let
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
8
|
+
export let rangeFrom = null;
|
|
9
|
+
export let rangeTo = null;
|
|
10
|
+
export let locale = "default";
|
|
11
|
+
export let firstDayOfWeek = 0;
|
|
12
|
+
export let dateFormat = { year: "numeric", month: "long", day: "numeric" };
|
|
13
|
+
export let placeholder = "Select date";
|
|
14
|
+
export let disabled = false;
|
|
15
|
+
export let required = false;
|
|
16
|
+
export let inputClass = "";
|
|
17
|
+
export let color = "primary";
|
|
18
|
+
export let inline = false;
|
|
19
|
+
export let autohide = true;
|
|
20
|
+
export let showActionButtons = false;
|
|
21
|
+
export let title = "";
|
|
22
|
+
const dispatch = createEventDispatcher();
|
|
23
|
+
let isOpen = inline;
|
|
24
|
+
let inputElement;
|
|
25
|
+
let currentMonth = value || defaultDate || /* @__PURE__ */ new Date();
|
|
26
|
+
currentMonth.setDate(1);
|
|
27
|
+
let focusedDate = null;
|
|
28
|
+
let calendarRef;
|
|
29
|
+
$: daysInMonth = getDaysInMonth(currentMonth);
|
|
30
|
+
$: weekdays = getWeekdays();
|
|
31
|
+
onMount(() => {
|
|
32
|
+
if (!inline) {
|
|
33
|
+
document.addEventListener("click", handleClickOutside);
|
|
34
|
+
return () => {
|
|
35
|
+
document.removeEventListener("click", handleClickOutside);
|
|
36
|
+
};
|
|
37
|
+
}
|
|
38
|
+
});
|
|
39
|
+
function getFocusRingClass(color2) {
|
|
40
|
+
switch (color2) {
|
|
41
|
+
case "primary":
|
|
42
|
+
return "focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400";
|
|
43
|
+
case "blue":
|
|
44
|
+
return "focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400";
|
|
45
|
+
case "red":
|
|
46
|
+
return "focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400";
|
|
47
|
+
case "green":
|
|
48
|
+
return "focus:ring-2 focus:ring-green-500 dark:focus:ring-green-400";
|
|
49
|
+
case "yellow":
|
|
50
|
+
return "focus:ring-2 focus:ring-yellow-500 dark:focus:ring-yellow-400";
|
|
51
|
+
case "purple":
|
|
52
|
+
return "focus:ring-2 focus:ring-purple-500 dark:focus:ring-purple-400";
|
|
53
|
+
default:
|
|
54
|
+
return "";
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
function getRangeBackgroundClass(color2) {
|
|
58
|
+
switch (color2) {
|
|
59
|
+
case "primary":
|
|
60
|
+
return "bg-primary-100 dark:bg-primary-900";
|
|
61
|
+
case "blue":
|
|
62
|
+
return "bg-blue-100 dark:bg-blue-900";
|
|
63
|
+
case "red":
|
|
64
|
+
return "bg-red-100 dark:bg-red-900";
|
|
65
|
+
case "green":
|
|
66
|
+
return "bg-green-100 dark:bg-green-900";
|
|
67
|
+
case "yellow":
|
|
68
|
+
return "bg-yellow-100 dark:bg-yellow-900";
|
|
69
|
+
case "purple":
|
|
70
|
+
return "bg-purple-100 dark:bg-purple-900";
|
|
71
|
+
default:
|
|
72
|
+
return "";
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
function getDaysInMonth(date) {
|
|
76
|
+
const year = date.getFullYear();
|
|
77
|
+
const month = date.getMonth();
|
|
78
|
+
const firstDay = new Date(year, month, 0);
|
|
79
|
+
const lastDay = new Date(year, month + 1, 0);
|
|
80
|
+
const daysArray = [];
|
|
81
|
+
let start = firstDay.getDay() - firstDayOfWeek;
|
|
82
|
+
if (start < 0) start += 7;
|
|
83
|
+
for (let i = 0; i < start; i++) {
|
|
84
|
+
daysArray.push(new Date(year, month, -i));
|
|
85
|
+
}
|
|
86
|
+
for (let i = 1; i <= lastDay.getDate(); i++) {
|
|
87
|
+
daysArray.push(new Date(year, month, i));
|
|
88
|
+
}
|
|
89
|
+
const remainingDays = 7 - daysArray.length % 7;
|
|
90
|
+
if (remainingDays < 7) {
|
|
91
|
+
for (let i = 1; i <= remainingDays; i++) {
|
|
92
|
+
daysArray.push(new Date(year, month + 1, i));
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
return daysArray;
|
|
96
|
+
}
|
|
97
|
+
function getWeekdays() {
|
|
98
|
+
const weekdays2 = [];
|
|
99
|
+
for (let i = 0; i < 7; i++) {
|
|
100
|
+
const day = new Date(2021, 5, i + firstDayOfWeek);
|
|
101
|
+
weekdays2.push(day.toLocaleString(locale, { weekday: "short" }));
|
|
102
|
+
}
|
|
103
|
+
return weekdays2;
|
|
104
|
+
}
|
|
105
|
+
function changeMonth(increment) {
|
|
106
|
+
currentMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth() + increment, 1);
|
|
107
|
+
}
|
|
108
|
+
function handleDaySelect(day) {
|
|
109
|
+
if (range) {
|
|
110
|
+
if (!rangeFrom || rangeFrom && rangeTo) {
|
|
111
|
+
rangeFrom = day;
|
|
112
|
+
rangeTo = null;
|
|
113
|
+
} else if (day < rangeFrom) {
|
|
114
|
+
rangeTo = rangeFrom;
|
|
115
|
+
rangeFrom = day;
|
|
116
|
+
} else {
|
|
117
|
+
rangeTo = day;
|
|
118
|
+
}
|
|
119
|
+
dispatch("select", { from: rangeFrom, to: rangeTo });
|
|
120
|
+
} else {
|
|
121
|
+
value = day;
|
|
122
|
+
dispatch("select", value);
|
|
123
|
+
if (autohide && !inline) isOpen = false;
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
function handleInputChange() {
|
|
127
|
+
const date = new Date(inputElement.value);
|
|
128
|
+
if (!isNaN(date.getTime())) {
|
|
129
|
+
handleDaySelect(date);
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
function handleClickOutside(event) {
|
|
133
|
+
if (isOpen && !inputElement.contains(event.target)) {
|
|
134
|
+
isOpen = false;
|
|
14
135
|
}
|
|
15
|
-
}
|
|
136
|
+
}
|
|
137
|
+
function formatDate(date) {
|
|
138
|
+
if (!date) return "";
|
|
139
|
+
return date.toLocaleDateString(locale, dateFormat);
|
|
140
|
+
}
|
|
141
|
+
function isSelected(day) {
|
|
142
|
+
if (range) {
|
|
143
|
+
return !!(rangeFrom && day.toDateString() === rangeFrom.toDateString()) || !!(rangeTo && day.toDateString() === rangeTo.toDateString());
|
|
144
|
+
}
|
|
145
|
+
return !!(value && day.toDateString() === value.toDateString());
|
|
146
|
+
}
|
|
147
|
+
function isInRange(day) {
|
|
148
|
+
if (!range || !rangeFrom || !rangeTo) return false;
|
|
149
|
+
return day > rangeFrom && day < rangeTo;
|
|
150
|
+
}
|
|
151
|
+
function isToday(day) {
|
|
152
|
+
const today = /* @__PURE__ */ new Date();
|
|
153
|
+
return day.toDateString() === today.toDateString();
|
|
154
|
+
}
|
|
155
|
+
function handleCalendarKeydown(event) {
|
|
156
|
+
if (!isOpen) return;
|
|
157
|
+
if (!focusedDate) {
|
|
158
|
+
focusedDate = value || /* @__PURE__ */ new Date();
|
|
159
|
+
}
|
|
160
|
+
switch (event.key) {
|
|
161
|
+
case "ArrowLeft":
|
|
162
|
+
focusedDate = new Date(focusedDate.getFullYear(), focusedDate.getMonth(), focusedDate.getDate() - 1);
|
|
163
|
+
break;
|
|
164
|
+
case "ArrowRight":
|
|
165
|
+
focusedDate = new Date(focusedDate.getFullYear(), focusedDate.getMonth(), focusedDate.getDate() + 1);
|
|
166
|
+
break;
|
|
167
|
+
case "ArrowUp":
|
|
168
|
+
focusedDate = new Date(focusedDate.getFullYear(), focusedDate.getMonth(), focusedDate.getDate() - 7);
|
|
169
|
+
break;
|
|
170
|
+
case "ArrowDown":
|
|
171
|
+
focusedDate = new Date(focusedDate.getFullYear(), focusedDate.getMonth(), focusedDate.getDate() + 7);
|
|
172
|
+
break;
|
|
173
|
+
case "Enter":
|
|
174
|
+
handleDaySelect(focusedDate);
|
|
175
|
+
break;
|
|
176
|
+
case "Escape":
|
|
177
|
+
isOpen = false;
|
|
178
|
+
inputElement.focus();
|
|
179
|
+
break;
|
|
180
|
+
default:
|
|
181
|
+
return;
|
|
182
|
+
}
|
|
183
|
+
event.preventDefault();
|
|
184
|
+
if (focusedDate.getMonth() !== currentMonth.getMonth()) {
|
|
185
|
+
currentMonth = new Date(focusedDate.getFullYear(), focusedDate.getMonth(), 1);
|
|
186
|
+
}
|
|
187
|
+
setTimeout(() => {
|
|
188
|
+
const focusedButton = calendarRef.querySelector(`button[aria-label="${focusedDate.toLocaleDateString(locale, { weekday: "long", year: "numeric", month: "long", day: "numeric" })}"]`);
|
|
189
|
+
focusedButton?.focus();
|
|
190
|
+
}, 0);
|
|
191
|
+
}
|
|
192
|
+
function handleInputKeydown(event) {
|
|
193
|
+
if (event.key === "Enter" || event.key === " ") {
|
|
194
|
+
event.preventDefault();
|
|
195
|
+
isOpen = !isOpen;
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
function handleToday() {
|
|
199
|
+
handleDaySelect(/* @__PURE__ */ new Date());
|
|
200
|
+
}
|
|
201
|
+
function handleClear() {
|
|
202
|
+
value = null;
|
|
203
|
+
rangeFrom = null;
|
|
204
|
+
rangeTo = null;
|
|
205
|
+
dispatch("clear");
|
|
206
|
+
}
|
|
207
|
+
function handleApply() {
|
|
208
|
+
dispatch("apply", range ? { from: rangeFrom, to: rangeTo } : value);
|
|
209
|
+
if (!inline) isOpen = false;
|
|
210
|
+
}
|
|
16
211
|
</script>
|
|
17
212
|
|
|
18
|
-
<
|
|
19
|
-
|
|
20
|
-
<script src="https://unpkg.com/flowbite@1.5.1/dist/datepicker.js"></script>
|
|
21
|
-
</svelte:head>
|
|
22
|
-
|
|
23
|
-
{#if range}
|
|
24
|
-
<div date-rangepicker class="flex items-center">
|
|
213
|
+
<div class="relative {inline ? 'inline-block' : ''}">
|
|
214
|
+
{#if !inline}
|
|
25
215
|
<div class="relative">
|
|
26
|
-
<
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
216
|
+
<input bind:this={inputElement} type="text" class="w-full px-4 py-2 text-sm border rounded-md focus:outline-none dark:bg-gray-700 dark:text-white dark:border-gray-600 {getFocusRingClass(color)} {inputClass}" {placeholder} value={range ? `${formatDate(rangeFrom)} - ${formatDate(rangeTo)}` : formatDate(value)} on:focus={() => (isOpen = true)} on:input={handleInputChange} on:keydown={handleInputKeydown} {disabled} {required} aria-haspopup="dialog" />
|
|
217
|
+
<button type="button" class="absolute inset-y-0 right-0 flex items-center px-3 text-gray-500 dark:text-gray-400 focus:outline-none" on:click={() => (isOpen = !isOpen)} {disabled} aria-label={isOpen ? 'Close date picker' : 'Open date picker'}>
|
|
218
|
+
<CalendarMonthSolid class="w-5 h-5" />
|
|
219
|
+
</button>
|
|
30
220
|
</div>
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
221
|
+
{/if}
|
|
222
|
+
|
|
223
|
+
{#if isOpen || inline}
|
|
224
|
+
<div
|
|
225
|
+
bind:this={calendarRef}
|
|
226
|
+
id="datepicker-dropdown"
|
|
227
|
+
class="
|
|
228
|
+
{inline ? '' : 'absolute z-10 mt-1'}
|
|
229
|
+
bg-white dark:bg-gray-800 rounded-md shadow-lg"
|
|
230
|
+
transition:fade={{ duration: 100 }}
|
|
231
|
+
role="dialog"
|
|
232
|
+
aria-label="Calendar">
|
|
233
|
+
<div class="p-4" role="application">
|
|
234
|
+
{#if title}
|
|
235
|
+
<h2 class="text-lg font-semibold mb-4 dark:text-white">{title}</h2>
|
|
236
|
+
{/if}
|
|
237
|
+
<div class="flex items-center justify-between mb-4">
|
|
238
|
+
<Button on:click={() => changeMonth(-1)} {color} size="sm" aria-label="Previous month">
|
|
239
|
+
<ChevronLeftOutline class="w-4 h-4" />
|
|
240
|
+
</Button>
|
|
241
|
+
<h3 class="text-lg font-semibold dark:text-white" aria-live="polite">
|
|
242
|
+
{currentMonth.toLocaleString(locale, { month: 'long', year: 'numeric' })}
|
|
243
|
+
</h3>
|
|
244
|
+
<Button on:click={() => changeMonth(1)} {color} size="sm" aria-label="Next month">
|
|
245
|
+
<ChevronRightOutline class="w-4 h-4" />
|
|
246
|
+
</Button>
|
|
247
|
+
</div>
|
|
248
|
+
<div class="grid grid-cols-7 gap-1" role="grid">
|
|
249
|
+
{#each weekdays as day}
|
|
250
|
+
<div class="text-center text-sm font-medium text-gray-500 dark:text-gray-400" role="columnheader">{day}</div>
|
|
251
|
+
{/each}
|
|
252
|
+
{#each daysInMonth as day}
|
|
253
|
+
<Button color={isSelected(day) ? color : 'alternative'} size="sm" class="w-full h-8 {day.getMonth() !== currentMonth.getMonth() ? 'text-gray-300 dark:text-gray-600' : ''} {isToday(day) ? 'font-bold' : ''} {isInRange(day) ? getRangeBackgroundClass(color) : ''}" on:click={() => handleDaySelect(day)} on:keydown={handleCalendarKeydown} aria-label={day.toLocaleDateString(locale, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })} aria-selected={isSelected(day)} role="gridcell">
|
|
254
|
+
{day.getDate()}
|
|
255
|
+
</Button>
|
|
256
|
+
{/each}
|
|
257
|
+
</div>
|
|
258
|
+
{#if showActionButtons}
|
|
259
|
+
<div class="mt-4 flex justify-between">
|
|
260
|
+
<Button on:click={handleToday} {color} size="sm">Today</Button>
|
|
261
|
+
<Button on:click={handleClear} color="red" size="sm">Clear</Button>
|
|
262
|
+
<Button on:click={handleApply} {color} size="sm">Apply</Button>
|
|
263
|
+
</div>
|
|
264
|
+
{/if}
|
|
35
265
|
</div>
|
|
36
|
-
<input name="end" type="text" class={inputClass} placeholder="Select date end" />
|
|
37
|
-
</div>
|
|
38
|
-
</div>
|
|
39
|
-
{:else}
|
|
40
|
-
<div class="relative">
|
|
41
|
-
<div class="flex absolute inset-y-0 start-0 items-center ps-3 pointer-events-none">
|
|
42
|
-
<Calendar />
|
|
43
266
|
</div>
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
{:else}
|
|
47
|
-
<input {...$$restProps} datepicker datepicker-format={datepickerFormat} datepicker-orientation={datepickerOrientation} datepicker-title={datepickerTitle} use:setAttribute={attribute} type="text" class={inputClass} placeholder="Select date" />
|
|
48
|
-
{/if}
|
|
49
|
-
<slot />
|
|
50
|
-
</div>
|
|
51
|
-
{/if}
|
|
267
|
+
{/if}
|
|
268
|
+
</div>
|
|
52
269
|
|
|
53
270
|
<!--
|
|
54
271
|
@component
|
|
55
272
|
[Go to docs](https://flowbite-svelte.com/)
|
|
56
273
|
## Props
|
|
274
|
+
@prop export let value: Date | null = null;
|
|
275
|
+
@prop export let defaultDate: Date | null = null;
|
|
57
276
|
@prop export let range: boolean = false;
|
|
58
|
-
@prop export let
|
|
59
|
-
@prop export let
|
|
60
|
-
@prop export let
|
|
61
|
-
@prop export let
|
|
62
|
-
@prop export let
|
|
63
|
-
@prop export let
|
|
64
|
-
@prop export let
|
|
277
|
+
@prop export let rangeFrom: Date | null = null;
|
|
278
|
+
@prop export let rangeTo: Date | null = null;
|
|
279
|
+
@prop export let locale: string = 'default';
|
|
280
|
+
@prop export let firstDayOfWeek: number = 0;
|
|
281
|
+
@prop export let dateFormat: Intl.DateTimeFormatOptions = { year: 'numeric', month: 'long', day: 'numeric' };
|
|
282
|
+
@prop export let placeholder: string = 'Select date';
|
|
283
|
+
@prop export let disabled: boolean = false;
|
|
284
|
+
@prop export let required: boolean = false;
|
|
285
|
+
@prop export let inputClass: string = '';
|
|
286
|
+
@prop export let color: Button['color'] = 'primary';
|
|
287
|
+
@prop export let inline: boolean = false;
|
|
288
|
+
@prop export let autohide: boolean = true;
|
|
289
|
+
@prop export let showActionButtons: boolean = false;
|
|
290
|
+
@prop export let title: string = '';
|
|
65
291
|
-->
|
|
@@ -1,32 +1,33 @@
|
|
|
1
1
|
import { SvelteComponentTyped } from "svelte";
|
|
2
|
-
|
|
3
|
-
interface HTMLAttributes<T> {
|
|
4
|
-
[x: `data-${string}`]: any;
|
|
5
|
-
'date-rangepicker'?: boolean;
|
|
6
|
-
datepicker?: boolean;
|
|
7
|
-
'datepicker-buttons'?: boolean;
|
|
8
|
-
'datepicker-format'?: string;
|
|
9
|
-
'datepicker-orientation'?: string;
|
|
10
|
-
'datepicker-title'?: string;
|
|
11
|
-
}
|
|
12
|
-
}
|
|
2
|
+
import { Button } from '..';
|
|
13
3
|
declare const __propDef: {
|
|
14
4
|
props: {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
5
|
+
value?: Date | null;
|
|
6
|
+
defaultDate?: Date | null;
|
|
7
|
+
range?: boolean;
|
|
8
|
+
rangeFrom?: Date | null;
|
|
9
|
+
rangeTo?: Date | null;
|
|
10
|
+
locale?: string;
|
|
11
|
+
firstDayOfWeek?: number;
|
|
12
|
+
dateFormat?: Intl.DateTimeFormatOptions;
|
|
13
|
+
placeholder?: string;
|
|
14
|
+
disabled?: boolean;
|
|
15
|
+
required?: boolean;
|
|
16
|
+
inputClass?: string;
|
|
17
|
+
color?: Button["color"];
|
|
18
|
+
inline?: boolean;
|
|
19
|
+
autohide?: boolean;
|
|
20
|
+
showActionButtons?: boolean;
|
|
21
|
+
title?: string;
|
|
23
22
|
};
|
|
24
23
|
events: {
|
|
24
|
+
select: CustomEvent<any>;
|
|
25
|
+
clear: CustomEvent<any>;
|
|
26
|
+
apply: CustomEvent<any>;
|
|
27
|
+
} & {
|
|
25
28
|
[evt: string]: CustomEvent<any>;
|
|
26
29
|
};
|
|
27
|
-
slots: {
|
|
28
|
-
default: {};
|
|
29
|
-
};
|
|
30
|
+
slots: {};
|
|
30
31
|
};
|
|
31
32
|
export type DatepickerProps = typeof __propDef.props;
|
|
32
33
|
export type DatepickerEvents = typeof __propDef.events;
|
|
@@ -34,14 +35,23 @@ export type DatepickerSlots = typeof __propDef.slots;
|
|
|
34
35
|
/**
|
|
35
36
|
* [Go to docs](https://flowbite-svelte.com/)
|
|
36
37
|
* ## Props
|
|
38
|
+
* @prop export let value: Date | null = null;
|
|
39
|
+
* @prop export let defaultDate: Date | null = null;
|
|
37
40
|
* @prop export let range: boolean = false;
|
|
38
|
-
* @prop export let
|
|
39
|
-
* @prop export let
|
|
40
|
-
* @prop export let
|
|
41
|
-
* @prop export let
|
|
42
|
-
* @prop export let
|
|
43
|
-
* @prop export let
|
|
44
|
-
* @prop export let
|
|
41
|
+
* @prop export let rangeFrom: Date | null = null;
|
|
42
|
+
* @prop export let rangeTo: Date | null = null;
|
|
43
|
+
* @prop export let locale: string = 'default';
|
|
44
|
+
* @prop export let firstDayOfWeek: number = 0;
|
|
45
|
+
* @prop export let dateFormat: Intl.DateTimeFormatOptions = { year: 'numeric', month: 'long', day: 'numeric' };
|
|
46
|
+
* @prop export let placeholder: string = 'Select date';
|
|
47
|
+
* @prop export let disabled: boolean = false;
|
|
48
|
+
* @prop export let required: boolean = false;
|
|
49
|
+
* @prop export let inputClass: string = '';
|
|
50
|
+
* @prop export let color: Button['color'] = 'primary';
|
|
51
|
+
* @prop export let inline: boolean = false;
|
|
52
|
+
* @prop export let autohide: boolean = true;
|
|
53
|
+
* @prop export let showActionButtons: boolean = false;
|
|
54
|
+
* @prop export let title: string = '';
|
|
45
55
|
*/
|
|
46
56
|
export default class Datepicker extends SvelteComponentTyped<DatepickerProps, DatepickerEvents, DatepickerSlots> {
|
|
47
57
|
}
|
|
@@ -1,19 +1,17 @@
|
|
|
1
1
|
<script>import { twMerge } from "tailwind-merge";
|
|
2
2
|
import Input from "./Input.svelte";
|
|
3
|
-
export let value = "";
|
|
4
3
|
export let files = void 0;
|
|
5
4
|
export let inputClass = "border !p-0 dark:text-gray-400";
|
|
6
5
|
</script>
|
|
7
6
|
|
|
8
7
|
<Input {...$$restProps} class={twMerge(inputClass, $$props.class)} let:props>
|
|
9
|
-
<input type="file" on:change on:keyup on:keydown on:keypress on:focus on:blur on:click on:mouseover on:mouseenter on:mouseleave on:paste bind:
|
|
8
|
+
<input type="file" on:change on:keyup on:keydown on:keypress on:focus on:blur on:click on:mouseover on:mouseenter on:mouseleave on:paste bind:files {...props} />
|
|
10
9
|
</Input>
|
|
11
10
|
|
|
12
11
|
<!--
|
|
13
12
|
@component
|
|
14
13
|
[Go to docs](https://flowbite-svelte.com/)
|
|
15
14
|
## Props
|
|
16
|
-
@prop export let value: $$Props['value'] = '';
|
|
17
15
|
@prop export let files: $$Props['files'] = undefined;
|
|
18
16
|
@prop export let inputClass: $$Props['inputClass'] = 'border !p-0 dark:text-gray-400';
|
|
19
17
|
-->
|
|
@@ -9,7 +9,6 @@ declare const __propDef: {
|
|
|
9
9
|
color?: "base" | "green" | "red";
|
|
10
10
|
floatClass?: string;
|
|
11
11
|
} & {
|
|
12
|
-
value?: string;
|
|
13
12
|
files?: FileList | undefined;
|
|
14
13
|
inputClass?: string;
|
|
15
14
|
};
|
|
@@ -36,7 +35,6 @@ export type FileuploadSlots = typeof __propDef.slots;
|
|
|
36
35
|
/**
|
|
37
36
|
* [Go to docs](https://flowbite-svelte.com/)
|
|
38
37
|
* ## Props
|
|
39
|
-
* @prop export let value: $$Props['value'] = '';
|
|
40
38
|
* @prop export let files: $$Props['files'] = undefined;
|
|
41
39
|
* @prop export let inputClass: $$Props['inputClass'] = 'border !p-0 dark:text-gray-400';
|
|
42
40
|
*/
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "flowbite-svelte",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.47.0",
|
|
4
4
|
"description": "Flowbite components for Svelte",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"author": {
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
"homepage": "https://flowbite-svelte.com/",
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"devDependencies": {
|
|
15
|
-
"@changesets/cli": "
|
|
15
|
+
"@changesets/cli": "2.27.9",
|
|
16
16
|
"@docsearch/css": "^3.6.2",
|
|
17
17
|
"@docsearch/js": "^3.6.2",
|
|
18
18
|
"@playwright/test": "^1.48.0",
|
|
@@ -27,8 +27,9 @@
|
|
|
27
27
|
"esbuild": "0.23.1",
|
|
28
28
|
"eslint": "^9.12.0",
|
|
29
29
|
"eslint-config-prettier": "^9.1.0",
|
|
30
|
-
"eslint-plugin-svelte": "^2.
|
|
30
|
+
"eslint-plugin-svelte": "^2.45.0",
|
|
31
31
|
"flowbite-svelte-icons": "^1.6.1",
|
|
32
|
+
"globals": "^15.11.0",
|
|
32
33
|
"mdsvex": "^0.12.3",
|
|
33
34
|
"mdsvexamples": "^0.4.1",
|
|
34
35
|
"postcss": "^8.4.47",
|
|
@@ -218,14 +219,6 @@
|
|
|
218
219
|
"types": "./dist/darkmode/DarkMode.svelte.d.ts",
|
|
219
220
|
"svelte": "./dist/darkmode/DarkMode.svelte"
|
|
220
221
|
},
|
|
221
|
-
"./Calender.svelte": {
|
|
222
|
-
"types": "./dist/datepicker/Calender.svelte.d.ts",
|
|
223
|
-
"svelte": "./dist/datepicker/Calender.svelte"
|
|
224
|
-
},
|
|
225
|
-
"./DateCalender.svelte": {
|
|
226
|
-
"types": "./dist/datepicker/DateCalender.svelte.d.ts",
|
|
227
|
-
"svelte": "./dist/datepicker/DateCalender.svelte"
|
|
228
|
-
},
|
|
229
222
|
"./Datepicker.svelte": {
|
|
230
223
|
"types": "./dist/datepicker/Datepicker.svelte.d.ts",
|
|
231
224
|
"svelte": "./dist/datepicker/Datepicker.svelte"
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
<svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
-
<path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd" />
|
|
3
|
-
</svg>
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
/** @typedef {typeof __propDef.props} CalenderProps */
|
|
2
|
-
/** @typedef {typeof __propDef.events} CalenderEvents */
|
|
3
|
-
/** @typedef {typeof __propDef.slots} CalenderSlots */
|
|
4
|
-
export default class Calender extends SvelteComponentTyped<{
|
|
5
|
-
[x: string]: never;
|
|
6
|
-
}, {
|
|
7
|
-
[evt: string]: CustomEvent<any>;
|
|
8
|
-
}, {}> {
|
|
9
|
-
}
|
|
10
|
-
export type CalenderProps = typeof __propDef.props;
|
|
11
|
-
export type CalenderEvents = typeof __propDef.events;
|
|
12
|
-
export type CalenderSlots = typeof __propDef.slots;
|
|
13
|
-
import { SvelteComponentTyped } from "svelte";
|
|
14
|
-
declare const __propDef: {
|
|
15
|
-
props: {
|
|
16
|
-
[x: string]: never;
|
|
17
|
-
};
|
|
18
|
-
events: {
|
|
19
|
-
[evt: string]: CustomEvent<any>;
|
|
20
|
-
};
|
|
21
|
-
slots: {};
|
|
22
|
-
};
|
|
23
|
-
export {};
|
|
@@ -1,150 +0,0 @@
|
|
|
1
|
-
<script>import { createEventDispatcher } from "svelte";
|
|
2
|
-
import { Button, Modal } from "..";
|
|
3
|
-
import { ChevronLeftOutline, ChevronRightOutline } from "flowbite-svelte-icons";
|
|
4
|
-
export let currentDate = /* @__PURE__ */ new Date();
|
|
5
|
-
export let open = false;
|
|
6
|
-
export let locale = "default";
|
|
7
|
-
export let firstDayOfWeek = 0;
|
|
8
|
-
export let showToday = true;
|
|
9
|
-
export let showClose = true;
|
|
10
|
-
export let dateFormat = { month: "long", year: "numeric" };
|
|
11
|
-
export let dayLabelFormat = "short";
|
|
12
|
-
export let customClass = "";
|
|
13
|
-
export let primaryColor = "blue";
|
|
14
|
-
export let secondaryColor = "gray";
|
|
15
|
-
const dispatch = createEventDispatcher();
|
|
16
|
-
let currentMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
|
|
17
|
-
let daysInMonth = getDaysInMonth(currentMonth);
|
|
18
|
-
function getDaysInMonth(date) {
|
|
19
|
-
const year = date.getFullYear();
|
|
20
|
-
const month = date.getMonth();
|
|
21
|
-
const firstDay = new Date(year, month, 1);
|
|
22
|
-
const lastDay = new Date(year, month + 1, 0);
|
|
23
|
-
const daysArray = [];
|
|
24
|
-
let start = firstDay.getDay() - firstDayOfWeek;
|
|
25
|
-
if (start < 0) start += 7;
|
|
26
|
-
for (let i = 0; i < start; i++) {
|
|
27
|
-
const prevMonthDay = new Date(year, month, -i);
|
|
28
|
-
daysArray.unshift(prevMonthDay);
|
|
29
|
-
}
|
|
30
|
-
for (let i = 1; i <= lastDay.getDate(); i++) {
|
|
31
|
-
daysArray.push(new Date(year, month, i));
|
|
32
|
-
}
|
|
33
|
-
const remainingDays = 7 - daysArray.length % 7;
|
|
34
|
-
if (remainingDays < 7) {
|
|
35
|
-
for (let i = 1; i <= remainingDays; i++) {
|
|
36
|
-
daysArray.push(new Date(year, month + 1, i));
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
return daysArray;
|
|
40
|
-
}
|
|
41
|
-
function changeMonth(increment) {
|
|
42
|
-
currentMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth() + increment, 1);
|
|
43
|
-
daysInMonth = getDaysInMonth(currentMonth);
|
|
44
|
-
}
|
|
45
|
-
function handleDaySelect(day) {
|
|
46
|
-
dispatch("selectDay", day);
|
|
47
|
-
open = false;
|
|
48
|
-
}
|
|
49
|
-
function isCurrentMonth(day) {
|
|
50
|
-
return day.getMonth() === currentMonth.getMonth();
|
|
51
|
-
}
|
|
52
|
-
function handleClose() {
|
|
53
|
-
open = false;
|
|
54
|
-
dispatch("close");
|
|
55
|
-
}
|
|
56
|
-
function goToToday() {
|
|
57
|
-
const today = /* @__PURE__ */ new Date();
|
|
58
|
-
currentMonth = new Date(today.getFullYear(), today.getMonth(), 1);
|
|
59
|
-
daysInMonth = getDaysInMonth(currentMonth);
|
|
60
|
-
currentDate = today;
|
|
61
|
-
handleDaySelect(today);
|
|
62
|
-
}
|
|
63
|
-
function isToday(day) {
|
|
64
|
-
const today = /* @__PURE__ */ new Date();
|
|
65
|
-
return day.getDate() === today.getDate() && day.getMonth() === today.getMonth() && day.getFullYear() === today.getFullYear();
|
|
66
|
-
}
|
|
67
|
-
$: weekdays = [...Array(7)].map((_, i) => {
|
|
68
|
-
const day = new Date(2021, 5, i + firstDayOfWeek);
|
|
69
|
-
return day.toLocaleString(locale, { weekday: dayLabelFormat });
|
|
70
|
-
});
|
|
71
|
-
export function setDate(date) {
|
|
72
|
-
currentDate = date;
|
|
73
|
-
currentMonth = new Date(date.getFullYear(), date.getMonth(), 1);
|
|
74
|
-
daysInMonth = getDaysInMonth(currentMonth);
|
|
75
|
-
}
|
|
76
|
-
export function nextMonth() {
|
|
77
|
-
changeMonth(1);
|
|
78
|
-
}
|
|
79
|
-
export function previousMonth() {
|
|
80
|
-
changeMonth(-1);
|
|
81
|
-
}
|
|
82
|
-
export function setMonth(month) {
|
|
83
|
-
currentMonth = new Date(currentMonth.getFullYear(), month, 1);
|
|
84
|
-
daysInMonth = getDaysInMonth(currentMonth);
|
|
85
|
-
}
|
|
86
|
-
export function setYear(year) {
|
|
87
|
-
currentMonth = new Date(year, currentMonth.getMonth(), 1);
|
|
88
|
-
daysInMonth = getDaysInMonth(currentMonth);
|
|
89
|
-
}
|
|
90
|
-
</script>
|
|
91
|
-
|
|
92
|
-
<Modal bind:open size="xs" autoclose={false} class={`w-full ${customClass}`}>
|
|
93
|
-
<div class="w-full max-w-md rounded-lg p-6">
|
|
94
|
-
<div class="mb-4 flex items-center justify-between">
|
|
95
|
-
<Button size="sm" on:click={() => changeMonth(-1)} color={primaryColor}>
|
|
96
|
-
<ChevronLeftOutline size="md" />
|
|
97
|
-
</Button>
|
|
98
|
-
<span class="text-lg font-semibold">
|
|
99
|
-
{currentMonth.toLocaleString(locale, dateFormat)}
|
|
100
|
-
</span>
|
|
101
|
-
<Button size="sm" on:click={() => changeMonth(1)} color={primaryColor}>
|
|
102
|
-
<ChevronRightOutline size="md" />
|
|
103
|
-
</Button>
|
|
104
|
-
</div>
|
|
105
|
-
<div class="grid grid-cols-7 gap-2">
|
|
106
|
-
{#each weekdays as day}
|
|
107
|
-
<div class="text-center text-sm font-medium">{day}</div>
|
|
108
|
-
{/each}
|
|
109
|
-
{#each daysInMonth as day}
|
|
110
|
-
<Button
|
|
111
|
-
size="sm"
|
|
112
|
-
color={currentDate.toDateString() === day.toDateString()
|
|
113
|
-
? primaryColor
|
|
114
|
-
: isToday(day)
|
|
115
|
-
? secondaryColor
|
|
116
|
-
: 'alternative'}
|
|
117
|
-
class={!isCurrentMonth(day) ? 'opacity-50' : ''}
|
|
118
|
-
on:click={() => handleDaySelect(day)}
|
|
119
|
-
>
|
|
120
|
-
{day.getDate()}
|
|
121
|
-
</Button>
|
|
122
|
-
{/each}
|
|
123
|
-
</div>
|
|
124
|
-
<div class="mt-4 flex justify-between">
|
|
125
|
-
{#if showToday}
|
|
126
|
-
<Button size="sm" color={primaryColor} on:click={goToToday}>Today</Button>
|
|
127
|
-
{/if}
|
|
128
|
-
{#if showClose}
|
|
129
|
-
<Button size="sm" color={primaryColor} on:click={handleClose}>Close</Button>
|
|
130
|
-
{/if}
|
|
131
|
-
</div>
|
|
132
|
-
</div>
|
|
133
|
-
</Modal>
|
|
134
|
-
|
|
135
|
-
<!--
|
|
136
|
-
@component
|
|
137
|
-
[Go to docs](https://flowbite-svelte.com/)
|
|
138
|
-
## Props
|
|
139
|
-
@prop export let currentDate: Date = new Date();
|
|
140
|
-
@prop export let open = false;
|
|
141
|
-
@prop export let locale: string = 'default';
|
|
142
|
-
@prop export let firstDayOfWeek: number = 0;
|
|
143
|
-
@prop export let showToday: boolean = true;
|
|
144
|
-
@prop export let showClose: boolean = true;
|
|
145
|
-
@prop export let dateFormat: Intl.DateTimeFormatOptions = { month: 'long', year: 'numeric' };
|
|
146
|
-
@prop export let dayLabelFormat: 'short' | 'narrow' | 'long' = 'short';
|
|
147
|
-
@prop export let customClass: string = '';
|
|
148
|
-
@prop export let primaryColor: Button['color'] = 'blue';
|
|
149
|
-
@prop export let secondaryColor: string = 'gray';
|
|
150
|
-
-->
|
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
import { SvelteComponentTyped } from "svelte";
|
|
2
|
-
import { Button } from '..';
|
|
3
|
-
declare const __propDef: {
|
|
4
|
-
props: {
|
|
5
|
-
currentDate?: Date;
|
|
6
|
-
open?: boolean;
|
|
7
|
-
locale?: string;
|
|
8
|
-
firstDayOfWeek?: number;
|
|
9
|
-
showToday?: boolean;
|
|
10
|
-
showClose?: boolean;
|
|
11
|
-
dateFormat?: Intl.DateTimeFormatOptions;
|
|
12
|
-
dayLabelFormat?: "short" | "narrow" | "long";
|
|
13
|
-
customClass?: string;
|
|
14
|
-
primaryColor?: Button["color"];
|
|
15
|
-
secondaryColor?: string;
|
|
16
|
-
setDate?: (date: Date) => void;
|
|
17
|
-
nextMonth?: () => void;
|
|
18
|
-
previousMonth?: () => void;
|
|
19
|
-
setMonth?: (month: number) => void;
|
|
20
|
-
setYear?: (year: number) => void;
|
|
21
|
-
};
|
|
22
|
-
events: {
|
|
23
|
-
selectDay: CustomEvent<any>;
|
|
24
|
-
close: CustomEvent<any>;
|
|
25
|
-
} & {
|
|
26
|
-
[evt: string]: CustomEvent<any>;
|
|
27
|
-
};
|
|
28
|
-
slots: {};
|
|
29
|
-
};
|
|
30
|
-
export type DateCalenderProps = typeof __propDef.props;
|
|
31
|
-
export type DateCalenderEvents = typeof __propDef.events;
|
|
32
|
-
export type DateCalenderSlots = typeof __propDef.slots;
|
|
33
|
-
/**
|
|
34
|
-
* [Go to docs](https://flowbite-svelte.com/)
|
|
35
|
-
* ## Props
|
|
36
|
-
* @prop export let currentDate: Date = new Date();
|
|
37
|
-
* @prop export let open = false;
|
|
38
|
-
* @prop export let locale: string = 'default';
|
|
39
|
-
* @prop export let firstDayOfWeek: number = 0;
|
|
40
|
-
* @prop export let showToday: boolean = true;
|
|
41
|
-
* @prop export let showClose: boolean = true;
|
|
42
|
-
* @prop export let dateFormat: Intl.DateTimeFormatOptions = { month: 'long', year: 'numeric' };
|
|
43
|
-
* @prop export let dayLabelFormat: 'short' | 'narrow' | 'long' = 'short';
|
|
44
|
-
* @prop export let customClass: string = '';
|
|
45
|
-
* @prop export let primaryColor: Button['color'] = 'blue';
|
|
46
|
-
* @prop export let secondaryColor: string = 'gray';
|
|
47
|
-
*/
|
|
48
|
-
export default class DateCalender extends SvelteComponentTyped<DateCalenderProps, DateCalenderEvents, DateCalenderSlots> {
|
|
49
|
-
get setDate(): (date: Date) => void;
|
|
50
|
-
get nextMonth(): () => void;
|
|
51
|
-
get previousMonth(): () => void;
|
|
52
|
-
get setMonth(): (month: number) => void;
|
|
53
|
-
get setYear(): (year: number) => void;
|
|
54
|
-
}
|
|
55
|
-
export {};
|