🐛 refactor(misc): fixing reported issues

.github/workflows/unit.yml

@@ -20,7 +20,7 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v3
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v3
         with:
           version: 8.11
       - name: Install Node
@@ -40,7 +40,7 @@ jobs:
       - name: Run tests
         run: pnpm test
       - name: Upload artifacts
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v4
         if: failure()
         with:
           name: unit-tests

README.md

@@ -72,6 +72,7 @@ Try it in the [Svelte REPL](https://svelte.dev/repl/cae0ce6e92634878b6e1a587146d
 | isMultipane	      |	If true, two calendar months will be shown side-by-side instead of one.               | `boolean` (default: `false`)
 | isOpen            |	If true, the picker will be shown without user interaction.	                          | `boolean` (default: `false`)
 | showPresets	      |	If true, the picker will show the preset ranges for selection.	                      | `boolean` (default: `false`)
+| showPresetsOnly	  |	If true, the picker will show only preset ranges.	                                    | `boolean` (default: `false`)
 | showYearControls  |	If true, the picker will hide the year navigation controls.	                          | `boolean` (default: `false`)
 | showTimePicker	  |	If true, the picker will show the time picker.	                                      | `boolean` (default: `false`)
 | 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
 ### Events
 | Prop               | Description                                                                           | Default                     |
 | :----------------- | :------------------------------------------------------------------------------------ | :-------------------------- |
+| onDateChange	     | Callback function to handle date change events.	                                     | `function`
 | onDayClick	       | Callback function to handle day click events.	                                       | `function`
 | onNavigationChange | Callback function to handle the navigation click event for months and years           | `function`
 
@@ -162,6 +164,7 @@ DatePicker CSS variables:
   --datepicker-container-font-family: var(--datepicker-font-family);
   --datepicker-container-left: 0;
   --datepicker-container-position: absolute;
+  --datepicker-container-top: 105%;
   --datepicker-container-width: fit-content;
   --datepicker-container-zindex: 99;
 

docs/src/App.svelte

@@ -1,7 +1,7 @@
 <script>
   import { DatePicker } from '@svelte-plugins/datepicker';
 
-  import { RangePicker, SinglePicker, ThemePicker } from './examples';
+  import { PresetsOnlyPicker, RangePicker, SinglePicker, ThemePicker } from './examples';
 
   const today = new Date();
 
@@ -103,6 +103,12 @@
         <td>If <code>true</code>, the picker will show the preset ranges for selection.</td>
         <td><code>false</code></td>
       </tr>
+      <tr>
+        <td>showPresetsOnly</td>
+        <td><code>boolean</code></td>
+        <td>If <code>true</code>, the preset ranges will only show. Requires range and showPreset to be set.</td>
+        <td><code>false</code></td>
+      </tr>
       <tr>
         <td>showYearControls</td>
         <td><code>boolean</code></td>
@@ -300,6 +306,12 @@
         <th>Description</th>
         <th>Default</th>
       </tr>
+      <tr>
+        <td>onDateChange</td>
+        <td><code>function</code></td>
+        <td>Callback function to handle when date changes.</td>
+        <td><code>None</code></td>
+      </tr>
       <tr>
         <td>onDayClick</td>
         <td><code>function</code></td>
@@ -345,6 +357,12 @@
       <RangePicker showPresets days={6} />
     </div>
 
+    <h3>Presets Only</h3>
+
+    <div class="example">
+      <PresetsOnlyPicker />
+    </div>
+
     <h3>Time Picker</h3>
 
     <div class="example">

docs/src/examples/index.js

@@ -1,3 +1,4 @@
 export { SinglePicker } from './single';
+export { PresetsOnlyPicker } from './presets';
 export { RangePicker } from './range';
 export { ThemePicker } from './theme';

docs/src/examples/presets/index.js

@@ -0,0 +1 @@
+export { default as PresetsOnlyPicker } from './presets.svelte';

docs/src/examples/presets/presets.svelte

@@ -0,0 +1,174 @@
+<script>
+  import { DatePicker } from '@svelte-plugins/datepicker';
+  import { format } from 'date-fns';
+  import Prism from 'svelte-prismjs';
+
+  export let days = 29;
+
+  const today = new Date();
+
+  const MILLISECONDS_IN_DAY = 24 * 60 * 60 * 1000;
+
+  const getDateFromToday = (days) => {
+    return Date.now() - days * MILLISECONDS_IN_DAY;
+  };
+
+  let startDate = getDateFromToday(days);
+  let endDate = today;
+  let dateFormat = 'MMM d, yyyy';
+  let isOpen = false;
+
+  let formattedStartDate = '';
+
+  const onClearDates = () => {
+    startDate = '';
+    endDate = '';
+  };
+
+  const onNavigationChange = (e) => {
+    console.log(e, 'onNavigationChange');
+  };
+
+  const onDateChange = (args) => {
+    console.log(args, 'onDateChange');
+  };
+
+  const toggleDatePicker = () => (isOpen = !isOpen);
+  const formatDate = (dateString) => dateString && format(new Date(dateString), dateFormat) || '';
+
+  $: formattedStartDate = formatDate(startDate);
+  $: formattedEndDate = formatDate(endDate);
+</script>
+
+<div class="date-filter">
+  <DatePicker
+    bind:isOpen
+    bind:startDate
+    bind:endDate
+    {onNavigationChange}
+    {onDateChange}
+    isRange
+    showPresets
+    showPresetsOnly
+    {...$$restProps}
+  >
+    <div class="date-field" on:click={toggleDatePicker} role="button" tabindex="0" class:open={isOpen}>
+      <i class="icon-calendar" />
+      <div class="date">
+        {#if startDate}
+          {formattedStartDate} - {formattedEndDate}
+        {:else}
+          Pick a date
+        {/if}
+      </div>
+      {#if startDate}
+        <span role="button" tabindex="0" on:click={onClearDates}>
+          <i class="os-icon-x" />
+        </span>
+      {/if}
+    </div>
+  </DatePicker>
+</div>
+
+<Prism showLineNumbers={true} code={`
+<script>
+  import { DatePicker } from '@svelte-plugins/datepicker';
+  import { format } from 'date-fns';
+
+  const today = new Date();
+
+  const MILLISECONDS_IN_DAY = 24 * 60 * 60 * 1000;
+
+  const getDateFromToday = (days) => {
+    return Date.now() - days * MILLISECONDS_IN_DAY;
+  };
+
+  let startDate = getDateFromToday(29);
+  let endDate = today;
+  let dateFormat = 'MMM d, yyyy';
+  let isOpen = false;
+
+  let formattedStartDate = '';
+
+  const onClearDates = () => {
+    startDate = '';
+    endDate = '';
+  };
+
+  const onDateChange = (args) => {
+    console.log(args, 'onDateChange');
+  };
+
+  const toggleDatePicker = () => (isOpen = !isOpen);
+  const formatDate = (dateString) => dateString && format(new Date(dateString), dateFormat) || '';
+
+  $: formattedStartDate = formatDate(startDate);
+  $: formattedEndDate = formatDate(endDate);
+</script>
+
+<div class="date-filter">
+  <DatePicker bind:isOpen bind:startDate bind:endDate isRange showPresets showPresetsOnly {onDateChange}>
+    <div class="date-field" on:click={toggleDatePicker} class:open={isOpen}>
+      <i class="icon-calendar" />
+      <div class="date">
+        {#if startDate}
+          {formattedStartDate} - {formattedEndDate}
+        {:else}
+          Pick a date
+        {/if}
+      </div>
+      {#if startDate}
+        <span on:click={onClearDates}>
+          <i class="os-icon-x" />
+        </span>
+      {/if}
+    </div>
+  </DatePicker>
+</div>
+
+<style>
+  .date-field {
+    align-items: center;
+    background-color: #fff;
+    border-bottom: 1px solid #e8e9ea;
+    display: inline-flex;
+    gap: 8px;
+    min-width: 100px;
+    padding: 16px;
+  }
+
+  .date-field.open {
+    border-bottom: 1px solid #0087ff;
+  }
+
+  .date-field .icon-calendar {
+    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAEmSURBVHgB7ZcPzcIwEMUfXz4BSCgKwAGgACRMAg6YBBxsOMABOAAHFAXgAK5Z2Y6lHbfQ8SfpL3lZaY/1rb01N+BHUKSMNBfEJjZWISA56Uo6C2KvVpkgFn9oRx9vICFtUT1JKO3tvRtZdjBxXQs+YY+1FenIfuesPUGVVLzfRWKvmrSzbbN19wS+kAb2+sCEuUxrYzkbe4YvCVM2Vr5NPAkVa+van7Wn38U95uTpN5TJ/A8ZKemAakmbmJJGpI0gVmwA0huieFItjG19DgTHtwIZhCfZq3ztCuzQYh+FKBSvusjAGs8PnLYkLgMf34JoIBqIBqKBaIAb0Kw9RlhMCTbzzPWAqYq7LsuPaGDUsYmznaOk5zChUJTNQ4TFVMkrOL4HPsoNn26PxROHCggAAAAASUVORK5CYII=) no-repeat center center;
+    background-size: 14px 14px;
+    height: 14px;
+    width: 14px;
+  }
+</style>
+`} />
+
+<style>
+  .date-field {
+    align-items: center;
+    background-color: #fff;
+    border-bottom: 1px solid #e8e9ea;
+    display: inline-flex;
+    gap: 8px;
+    min-width: 100px;
+    padding: 16px;
+  }
+
+  .date-field.open {
+    border-bottom: 1px solid #0087ff;
+  }
+
+  .date-field .icon-calendar {
+    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAEmSURBVHgB7ZcPzcIwEMUfXz4BSCgKwAGgACRMAg6YBBxsOMABOAAHFAXgAK5Z2Y6lHbfQ8SfpL3lZaY/1rb01N+BHUKSMNBfEJjZWISA56Uo6C2KvVpkgFn9oRx9vICFtUT1JKO3tvRtZdjBxXQs+YY+1FenIfuesPUGVVLzfRWKvmrSzbbN19wS+kAb2+sCEuUxrYzkbe4YvCVM2Vr5NPAkVa+van7Wn38U95uTpN5TJ/A8ZKemAakmbmJJGpI0gVmwA0huieFItjG19DgTHtwIZhCfZq3ztCuzQYh+FKBSvusjAGs8PnLYkLgMf34JoIBqIBqKBaIAb0Kw9RlhMCTbzzPWAqYq7LsuPaGDUsYmznaOk5zChUJTNQ4TFVMkrOL4HPsoNn26PxROHCggAAAAASUVORK5CYII=) no-repeat center center;
+    background-size: 14px 14px;
+    height: 14px;
+    width: 14px;
+  }
+</style>

docs/src/examples/range/range.svelte

@@ -31,6 +31,10 @@
     console.log(e, 'onNavigationChange');
   };
 
+  const onDateChange = (args) => {
+    console.log(args, 'onDateChange');
+  };
+
   const toggleDatePicker = () => (isOpen = !isOpen);
   const formatDate = (dateString) => dateString && format(new Date(dateString), dateFormat) || '';
 
@@ -44,6 +48,7 @@
     bind:startDate
     bind:endDate
     {onNavigationChange}
+    {onDateChange}
     isRange
     {isMultipane}
     {showPresets}

docs/src/examples/single/single.svelte

@@ -29,10 +29,14 @@
     console.log(e, 'onNavigationChange');
   };
 
+  const onDateChange = (args) => {
+    console.log(args, 'onDateChange');
+  };
+
   $: formattedStartDate = formatDate(startDate);
 </script>
 
-<DatePicker bind:isOpen bind:startDate {...$$props} {onNavigationChange}>
+<DatePicker bind:isOpen bind:startDate {...$$props} {onNavigationChange} {onDateChange}>
   <input type="text" bind:value={formattedStartDate} on:change={onChange} on:click={toggleDatePicker} />
 </DatePicker>
 

docs/src/examples/theme/theme.svelte

@@ -209,6 +209,8 @@
     --datepicker-presets-button-color: #fff;
     --datepicker-presets-button-color-active: #fff;
     --datepicker-presets-button-color-hover: #333;
-    --datepicker-presets-button-color-focus: #333
+    --datepicker-presets-button-color-focus: #333;
+    --datepicker-spacing: 90px;
+
   }
 </style>