DateRange fixes / improvements

.changeset/major-turkeys-ask.md

@@ -0,0 +1,5 @@
+---
+'svelte-ux': patch
+---
+
+fix(Menu): Support `bind:open` (underlying Popover)

.changeset/nice-onions-sell.md

@@ -0,0 +1,5 @@
+---
+'svelte-ux': patch
+---
+
+feat(DateRangeField): Add `quickPresets` support

.changeset/wide-months-rescue.md

@@ -0,0 +1,5 @@
+---
+'svelte-ux': patch
+---
+
+fix(DateRange): Fix selection gradient

packages/svelte-ux/src/lib/components/DateButton.svelte

@@ -84,15 +84,13 @@
 </script>
 
 <div
-  style="--tw-gradient-stops: var(--tw-gradient-from) 50%, var(--tw-gradient-to) 50%"
   class={cls(
     'DateButton',
     'inline-flex items-center justify-center',
-    isSelectedStart
-      ? '[--tw-gradient-from:transparent]'
-      : '[--tw-gradient-from:var(--color-primary)]',
-    isSelectedEnd ? '[--tw-gradient-to:transparent]' : '[--tw-gradient-to:var(--color-primary)]',
-    isSelected && (isVerticalSelection ? 'bg-linear-to-b' : 'bg-linear-to-r'),
+    isSelectedStart ? 'from-transparent' : 'from-primary',
+    isSelectedEnd ? 'to-transparent' : 'to-primary',
+    isSelected &&
+      (isVerticalSelection ? 'bg-linear-to-b from-50% to-50%' : 'bg-linear-to-r from-50% to-50%'),
     hidden && 'opacity-0 pointer-events-none',
     settingsClasses.root,
     className

packages/svelte-ux/src/lib/components/DateRangeField.svelte

@@ -13,6 +13,8 @@
   import DateRangeDisplay from './DateRangeDisplay.svelte';
   import Dialog from './Dialog.svelte';
   import Field from './Field.svelte';
+  import Menu from './Menu.svelte';
+  import MenuItem from './MenuItem.svelte';
 
   import { getComponentSettings, getSettings } from './settings.js';
 
@@ -41,6 +43,11 @@
   ];
   export let getPeriodTypePresets = getDateRangePresets;
 
+  /**
+   * Quick presets to show in menu
+   */
+  export let quickPresets: { label: string; value: DateRangeType }[] = [];
+
   /**
    * Dates to disable (not selectable)
    */
@@ -63,7 +70,8 @@
   export let dense = false;
   export let icon: string | null = null;
 
-  let open: boolean = false;
+  let showDialog = false;
+  let showQuickPresetsMenu = false;
 
   let currentValue = value;
 
@@ -116,7 +124,13 @@
       'text-sm whitespace-nowrap w-full focus:outline-hidden',
       center ? 'text-center' : 'text-left'
     )}
-    on:click={() => (open = true)}
+    on:click={() => {
+      if (quickPresets.length > 0) {
+        showQuickPresetsMenu = !showQuickPresetsMenu;
+      } else {
+        showDialog = true;
+      }
+    }}
     {id}
   >
     <DateRangeDisplay {value} />
@@ -159,14 +173,39 @@
       />
     {/if}
   </div>
+
+  <svelte:fragment slot="root">
+    <Menu classes={{ menu: 'p-1' }} bind:open={showQuickPresetsMenu} matchWidth>
+      {#each quickPresets as preset}
+        <MenuItem
+          on:click={() => {
+            value = preset.value;
+            dispatch('change', preset.value);
+          }}
+        >
+          {preset.label}
+        </MenuItem>
+      {/each}
+
+      <div class="h-px bg-surface-content/20 my-1"></div>
+
+      <MenuItem
+        on:click={() => {
+          showDialog = true;
+        }}
+      >
+        Custom...
+      </MenuItem>
+    </Menu>
+  </svelte:fragment>
 </Field>
 
 <Dialog
   classes={{
     ...classes.dialog,
     dialog: cls('max-h-[90vh] grid grid-rows-[auto_1fr_auto]', classes.dialog?.dialog),
   }}
-  bind:open
+  bind:open={showDialog}
 >
   <div class="flex flex-col justify-center bg-primary text-primary-content px-6 h-24">
     <div class="text-sm opacity-50">
@@ -191,7 +230,7 @@
     <Button
       icon={mdiCheck}
       on:click={() => {
-        open = false;
+        showDialog = false;
         value = currentValue;
         dispatch('change', value);
       }}
@@ -203,7 +242,7 @@
 
     <Button
       on:click={() => {
-        open = false;
+        showDialog = false;
         currentValue = value;
       }}
     >

packages/svelte-ux/src/lib/components/Menu.svelte

@@ -64,7 +64,7 @@
   {offset}
   {matchWidth}
   {resize}
-  {open}
+  bind:open
   class={cls(
     'Menu',
     'bg-surface-100 rounded-sm shadow-sm border overflow-auto',

packages/svelte-ux/src/routes/docs/components/DateRangeField/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { subDays } from 'date-fns';
+  import { subDays, subMonths, subYears } from 'date-fns';
   import { mdiCalendarRange } from '@mdi/js';
 
   import { DateRangeField } from 'svelte-ux';
@@ -56,6 +56,37 @@
   <DateRangeField bind:value periodTypes={[PeriodType.Day]} getPeriodTypePresets={() => []} />
 </Preview>
 
+<h2>Quick Presets</h2>
+
+<Preview>
+  <DateRangeField
+    bind:value
+    quickPresets={[
+      { label: 'Today', value: { from: today, to: today, periodType: PeriodType.Day } },
+      {
+        label: 'Yesterday',
+        value: { from: subDays(today, 1), to: subDays(today, 1), periodType: PeriodType.Day },
+      },
+      {
+        label: 'Last 7 days',
+        value: { from: subDays(today, 7), to: today, periodType: PeriodType.Day },
+      },
+      {
+        label: 'Last 30 days',
+        value: { from: subDays(today, 30), to: today, periodType: PeriodType.Day },
+      },
+      {
+        label: 'Last 6 months',
+        value: { from: subMonths(today, 6), to: today, periodType: PeriodType.Month },
+      },
+      {
+        label: 'Last year',
+        value: { from: subYears(today, 1), to: today, periodType: PeriodType.CalendarYear },
+      },
+    ]}
+  />
+</Preview>
+
 <h2>Icon</h2>
 
 <Preview>