Skip to content

Commit 827ebda

Browse files
dysfuncdysfunc
authored
Merge pull request #41 from svelte-plugins/new-bugs
🐛 refactor(misc): fixing reported issues
2 parents 8543a93 + 5feb83b commit 827ebda

File tree

12 files changed

+1014
-740
lines changed

12 files changed

+1014
-740
lines changed

‎.github/workflows/unit.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ jobs:
2020
- name: Checkout repository
2121
uses: actions/checkout@v3
2222
- name: Install pnpm
23-
uses: pnpm/action-setup@v2
23+
uses: pnpm/action-setup@v3
2424
with:
2525
version: 8.11
2626
- name: Install Node
@@ -40,7 +40,7 @@ jobs:
4040
- name: Run tests
4141
run: pnpm test
4242
- name: Upload artifacts
43-
uses: actions/upload-artifact@v2
43+
uses: actions/upload-artifact@v4
4444
if: failure()
4545
with:
4646
name: unit-tests

‎README.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@ Try it in the [Svelte REPL](https://svelte.dev/repl/cae0ce6e92634878b6e1a587146d
7272
| isMultipane | If true, two calendar months will be shown side-by-side instead of one. | `boolean` (default: `false`)
7373
| isOpen | If true, the picker will be shown without user interaction. | `boolean` (default: `false`)
7474
| showPresets | If true, the picker will show the preset ranges for selection. | `boolean` (default: `false`)
75+
| showPresetsOnly | If true, the picker will show only preset ranges. | `boolean` (default: `false`)
7576
| showYearControls | If true, the picker will hide the year navigation controls. | `boolean` (default: `false`)
7677
| showTimePicker | If true, the picker will show the time picker. | `boolean` (default: `false`)
7778
| enableFutureDates | If true, the picker will allow the user to select future dates. | `boolean` (default: `false`)
@@ -83,6 +84,7 @@ Try it in the [Svelte REPL](https://svelte.dev/repl/cae0ce6e92634878b6e1a587146d
8384
### Events
8485
| Prop | Description | Default |
8586
| :----------------- | :------------------------------------------------------------------------------------ | :-------------------------- |
87+
| onDateChange | Callback function to handle date change events. | `function`
8688
| onDayClick | Callback function to handle day click events. | `function`
8789
| onNavigationChange | Callback function to handle the navigation click event for months and years | `function`
8890

@@ -162,6 +164,7 @@ DatePicker CSS variables:
162164
--datepicker-container-font-family: var(--datepicker-font-family);
163165
--datepicker-container-left: 0;
164166
--datepicker-container-position: absolute;
167+
--datepicker-container-top: 105%;
165168
--datepicker-container-width: fit-content;
166169
--datepicker-container-zindex: 99;
167170

‎docs/package-lock.json‎

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/src/App.svelte‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script>
22
import { DatePicker } from '@svelte-plugins/datepicker';
33
4-
import { RangePicker, SinglePicker, ThemePicker } from './examples';
4+
import { PresetsOnlyPicker, RangePicker, SinglePicker, ThemePicker } from './examples';
55
66
const today = new Date();
77
@@ -103,6 +103,12 @@
103103
<td>If <code>true</code>, the picker will show the preset ranges for selection.</td>
104104
<td><code>false</code></td>
105105
</tr>
106+
<tr>
107+
<td>showPresetsOnly</td>
108+
<td><code>boolean</code></td>
109+
<td>If <code>true</code>, the preset ranges will only show. Requires range and showPreset to be set.</td>
110+
<td><code>false</code></td>
111+
</tr>
106112
<tr>
107113
<td>showYearControls</td>
108114
<td><code>boolean</code></td>
@@ -300,6 +306,12 @@
300306
<th>Description</th>
301307
<th>Default</th>
302308
</tr>
309+
<tr>
310+
<td>onDateChange</td>
311+
<td><code>function</code></td>
312+
<td>Callback function to handle when date changes.</td>
313+
<td><code>None</code></td>
314+
</tr>
303315
<tr>
304316
<td>onDayClick</td>
305317
<td><code>function</code></td>
@@ -345,6 +357,12 @@
345357
<RangePicker showPresets days={6} />
346358
</div>
347359

360+
<h3>Presets Only</h3>
361+
362+
<div class="example">
363+
<PresetsOnlyPicker />
364+
</div>
365+
348366
<h3>Time Picker</h3>
349367

350368
<div class="example">

‎docs/src/examples/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
export { SinglePicker } from './single';
2+
export { PresetsOnlyPicker } from './presets';
23
export { RangePicker } from './range';
34
export { ThemePicker } from './theme';

‎docs/src/examples/presets/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as PresetsOnlyPicker } from './presets.svelte';

‎docs/src/examples/presets/presets.svelte‎

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
<script>
2+
import { DatePicker } from '@svelte-plugins/datepicker';
3+
import { format } from 'date-fns';
4+
import Prism from 'svelte-prismjs';
5+
6+
export let days = 29;
7+
8+
const today = new Date();
9+
10+
const MILLISECONDS_IN_DAY = 24 * 60 * 60 * 1000;
11+
12+
const getDateFromToday = (days) => {
13+
return Date.now() - days * MILLISECONDS_IN_DAY;
14+
};
15+
16+
let startDate = getDateFromToday(days);
17+
let endDate = today;
18+
let dateFormat = 'MMM d, yyyy';
19+
let isOpen = false;
20+
21+
let formattedStartDate = '';
22+
23+
const onClearDates = () => {
24+
startDate = '';
25+
endDate = '';
26+
};
27+
28+
const onNavigationChange = (e) => {
29+
console.log(e, 'onNavigationChange');
30+
};
31+
32+
const onDateChange = (args) => {
33+
console.log(args, 'onDateChange');
34+
};
35+
36+
const toggleDatePicker = () => (isOpen = !isOpen);
37+
const formatDate = (dateString) => dateString && format(new Date(dateString), dateFormat) || '';
38+
39+
$: formattedStartDate = formatDate(startDate);
40+
$: formattedEndDate = formatDate(endDate);
41+
</script>
42+
43+
<div class="date-filter">
44+
<DatePicker
45+
bind:isOpen
46+
bind:startDate
47+
bind:endDate
48+
{onNavigationChange}
49+
{onDateChange}
50+
isRange
51+
showPresets
52+
showPresetsOnly
53+
{...$$restProps}
54+
>
55+
<div class="date-field" on:click={toggleDatePicker} role="button" tabindex="0" class:open={isOpen}>
56+
<i class="icon-calendar" />
57+
<div class="date">
58+
{#if startDate}
59+
{formattedStartDate} - {formattedEndDate}
60+
{:else}
61+
Pick a date
62+
{/if}
63+
</div>
64+
{#if startDate}
65+
<span role="button" tabindex="0" on:click={onClearDates}>
66+
<i class="os-icon-x" />
67+
</span>
68+
{/if}
69+
</div>
70+
</DatePicker>
71+
</div>
72+
73+
<Prism showLineNumbers={true} code={`
74+
<script>
75+
import { DatePicker } from '@svelte-plugins/datepicker';
76+
import { format } from 'date-fns';
77+
78+
const today = new Date();
79+
80+
const MILLISECONDS_IN_DAY = 24 * 60 * 60 * 1000;
81+
82+
const getDateFromToday = (days) => {
83+
return Date.now() - days * MILLISECONDS_IN_DAY;
84+
};
85+
86+
let startDate = getDateFromToday(29);
87+
let endDate = today;
88+
let dateFormat = 'MMM d, yyyy';
89+
let isOpen = false;
90+
91+
let formattedStartDate = '';
92+
93+
const onClearDates = () => {
94+
startDate = '';
95+
endDate = '';
96+
};
97+
98+
const onDateChange = (args) => {
99+
console.log(args, 'onDateChange');
100+
};
101+
102+
const toggleDatePicker = () => (isOpen = !isOpen);
103+
const formatDate = (dateString) => dateString && format(new Date(dateString), dateFormat) || '';
104+
105+
$: formattedStartDate = formatDate(startDate);
106+
$: formattedEndDate = formatDate(endDate);
107+
</script>
108+
109+
<div class="date-filter">
110+
<DatePicker bind:isOpen bind:startDate bind:endDate isRange showPresets showPresetsOnly {onDateChange}>
111+
<div class="date-field" on:click={toggleDatePicker} class:open={isOpen}>
112+
<i class="icon-calendar" />
113+
<div class="date">
114+
{#if startDate}
115+
{formattedStartDate} - {formattedEndDate}
116+
{:else}
117+
Pick a date
118+
{/if}
119+
</div>
120+
{#if startDate}
121+
<span on:click={onClearDates}>
122+
<i class="os-icon-x" />
123+
</span>
124+
{/if}
125+
</div>
126+
</DatePicker>
127+
</div>
128+
129+
<style>
130+
.date-field {
131+
align-items: center;
132+
background-color: #fff;
133+
border-bottom: 1px solid #e8e9ea;
134+
display: inline-flex;
135+
gap: 8px;
136+
min-width: 100px;
137+
padding: 16px;
138+
}
139+
140+
.date-field.open {
141+
border-bottom: 1px solid #0087ff;
142+
}
143+
144+
.date-field .icon-calendar {
145+
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAEmSURBVHgB7ZcPzcIwEMUfXz4BSCgKwAGgACRMAg6YBBxsOMABOAAHFAXgAK5Z2Y6lHbfQ8SfpL3lZaY/1rb01N+BHUKSMNBfEJjZWISA56Uo6C2KvVpkgFn9oRx9vICFtUT1JKO3tvRtZdjBxXQs+YY+1FenIfuesPUGVVLzfRWKvmrSzbbN19wS+kAb2+sCEuUxrYzkbe4YvCVM2Vr5NPAkVa+van7Wn38U95uTpN5TJ/A8ZKemAakmbmJJGpI0gVmwA0huieFItjG19DgTHtwIZhCfZq3ztCuzQYh+FKBSvusjAGs8PnLYkLgMf34JoIBqIBqKBaIAb0Kw9RlhMCTbzzPWAqYq7LsuPaGDUsYmznaOk5zChUJTNQ4TFVMkrOL4HPsoNn26PxROHCggAAAAASUVORK5CYII=) no-repeat center center;
146+
background-size: 14px 14px;
147+
height: 14px;
148+
width: 14px;
149+
}
150+
</style>
151+
`} />
152+
153+
<style>
154+
.date-field {
155+
align-items: center;
156+
background-color: #fff;
157+
border-bottom: 1px solid #e8e9ea;
158+
display: inline-flex;
159+
gap: 8px;
160+
min-width: 100px;
161+
padding: 16px;
162+
}
163+
164+
.date-field.open {
165+
border-bottom: 1px solid #0087ff;
166+
}
167+
168+
.date-field .icon-calendar {
169+
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAEmSURBVHgB7ZcPzcIwEMUfXz4BSCgKwAGgACRMAg6YBBxsOMABOAAHFAXgAK5Z2Y6lHbfQ8SfpL3lZaY/1rb01N+BHUKSMNBfEJjZWISA56Uo6C2KvVpkgFn9oRx9vICFtUT1JKO3tvRtZdjBxXQs+YY+1FenIfuesPUGVVLzfRWKvmrSzbbN19wS+kAb2+sCEuUxrYzkbe4YvCVM2Vr5NPAkVa+van7Wn38U95uTpN5TJ/A8ZKemAakmbmJJGpI0gVmwA0huieFItjG19DgTHtwIZhCfZq3ztCuzQYh+FKBSvusjAGs8PnLYkLgMf34JoIBqIBqKBaIAb0Kw9RlhMCTbzzPWAqYq7LsuPaGDUsYmznaOk5zChUJTNQ4TFVMkrOL4HPsoNn26PxROHCggAAAAASUVORK5CYII=) no-repeat center center;
170+
background-size: 14px 14px;
171+
height: 14px;
172+
width: 14px;
173+
}
174+
</style>

‎docs/src/examples/range/range.svelte‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,10 @@
3131
console.log(e, 'onNavigationChange');
3232
};
3333
34+
const onDateChange = (args) => {
35+
console.log(args, 'onDateChange');
36+
};
37+
3438
const toggleDatePicker = () => (isOpen = !isOpen);
3539
const formatDate = (dateString) => dateString && format(new Date(dateString), dateFormat) || '';
3640
@@ -44,6 +48,7 @@
4448
bind:startDate
4549
bind:endDate
4650
{onNavigationChange}
51+
{onDateChange}
4752
isRange
4853
{isMultipane}
4954
{showPresets}

‎docs/src/examples/single/single.svelte‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,14 @@
2929
console.log(e, 'onNavigationChange');
3030
};
3131
32+
const onDateChange = (args) => {
33+
console.log(args, 'onDateChange');
34+
};
35+
3236
$: formattedStartDate = formatDate(startDate);
3337
</script>
3438

35-
<DatePicker bind:isOpen bind:startDate {...$$props} {onNavigationChange}>
39+
<DatePicker bind:isOpen bind:startDate {...$$props} {onNavigationChange} {onDateChange}>
3640
<input type="text" bind:value={formattedStartDate} on:change={onChange} on:click={toggleDatePicker} />
3741
</DatePicker>
3842

‎docs/src/examples/theme/theme.svelte‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -209,6 +209,8 @@
209209
--datepicker-presets-button-color: #fff;
210210
--datepicker-presets-button-color-active: #fff;
211211
--datepicker-presets-button-color-hover: #333;
212-
--datepicker-presets-button-color-focus: #333
212+
--datepicker-presets-button-color-focus: #333;
213+
--datepicker-spacing: 90px;
214+
213215
}
214216
</style>

0 commit comments

Comments
 (0)