@ibobbyts/svelte-ui-utils 0.2.5 → 0.2.6

package/README.md

@@ -401,14 +401,17 @@ can clip the menu even when the menu has a high `z-index`. Keep the nearest
 filter container at `overflow: visible`, or move the clipping/scrolling behavior
 to a parent that does not wrap the dropdown menu directly.
 
-`dateRange` renders two browser date inputs plus preset buttons:
-`last 24 hours`, `last 7 days`, `last 30 days`, `today`, `this week`,
-`this month`, and `this year`. Manual changes emit `{ startDate, endDate,
-preset: null }`. Pass `defaultPreset` to apply a preset on mount when the
-current value is empty. Clicking the currently active preset clears both date
-inputs and emits an empty range. The `last24Hours` preset also emits
-`startDateTime` and `endDateTime` so a consuming app can run an exact timestamp
-query while still showing the covered dates in the inputs.
+`dateRange` renders two browser date inputs, preset buttons, and quick month/year
+selects. The presets are `last 24 hours`, `last 7 days`, `last 30 days`,
+`today`, `this week`, `this month`, and `this year`. Manual changes and quick
+month/year changes emit `{ startDate, endDate, preset: null }`. When the month is
+selected first, the year select fills with the most recent matching year. For
+example, in July 2026, July resolves to 2026 and August resolves to 2025. Pass
+`defaultPreset` to apply a preset on mount when the current value is empty.
+Clicking the currently active preset clears both date inputs and emits an empty
+range. The `last24Hours` preset also emits `startDateTime` and `endDateTime` so
+a consuming app can run an exact timestamp query while still showing the covered
+dates in the inputs.
 
 `numberRange` renders min/max number inputs and supports `prefixLabel`, for
 example `$` for currency filters.

package/dist/data-table/DateRangeFilter.svelte

@@ -28,10 +28,16 @@
     'thisMonth',
     'thisYear'
   ];
+  const monthNumbers = Array.from({ length: 12 }, (_, index) => index + 1);
+
+  let quickYear = '';
+  let quickMonth = '';
 
   $: messages = getUiMessages(language);
   $: resolvedStartLabel = startLabel ?? messages.dateRange.startLabel;
   $: resolvedEndLabel = endLabel ?? messages.dateRange.endLabel;
+  $: currentYear = startOfDay(now()).getFullYear();
+  $: quickYearOptions = Array.from({ length: 21 }, (_, index) => currentYear - index);
 
   function pad(value: number) {
     return String(value).padStart(2, '0');
@@ -62,6 +68,31 @@
     return addDays(start, -offset);
   }
 
+  function endOfMonth(year: number, month: number) {
+    return new Date(year, month, 0);
+  }
+
+  function resolveYearForMonth(month: number) {
+    const today = startOfDay(now());
+    return month <= today.getMonth() + 1 ? today.getFullYear() : today.getFullYear() - 1;
+  }
+
+  function resolveQuickRange(year: number, month: number | null): DateRangeFilterValue {
+    const start = month === null ? new Date(year, 0, 1) : new Date(year, month - 1, 1);
+    const end = month === null ? new Date(year, 11, 31) : endOfMonth(year, month);
+
+    return {
+      startDate: formatDate(start),
+      endDate: formatDate(end),
+      preset: null
+    };
+  }
+
+  function clearQuickSelection() {
+    quickYear = '';
+    quickMonth = '';
+  }
+
   function resolvePreset(preset: DateRangePreset): DateRangeFilterValue {
     const current = now();
     const today = startOfDay(current);
@@ -142,6 +173,7 @@
   }
 
   function updateDate(part: 'startDate' | 'endDate', nextValue: string) {
+    clearQuickSelection();
     emit({
       startDate: part === 'startDate' ? nextValue : value.startDate,
       endDate: part === 'endDate' ? nextValue : value.endDate,
@@ -149,7 +181,39 @@
     });
   }
 
+  function updateQuickYear(nextValue: string) {
+    quickYear = nextValue;
+
+    if (!nextValue) {
+      clearQuickSelection();
+      emit(emptyRange());
+      return;
+    }
+
+    emit(resolveQuickRange(Number(nextValue), quickMonth ? Number(quickMonth) : null));
+  }
+
+  function updateQuickMonth(nextValue: string) {
+    quickMonth = nextValue;
+
+    if (!nextValue) {
+      if (quickYear) {
+        emit(resolveQuickRange(Number(quickYear), null));
+      } else {
+        emit(emptyRange());
+      }
+      return;
+    }
+
+    if (!quickYear) {
+      quickYear = String(resolveYearForMonth(Number(nextValue)));
+    }
+
+    emit(resolveQuickRange(Number(quickYear), Number(nextValue)));
+  }
+
   function applyPreset(preset: DateRangePreset) {
+    clearQuickSelection();
     if (value.preset === preset) {
       emit(emptyRange());
       return;
@@ -162,6 +226,10 @@
     return presetLabels[preset] ?? messages.dateRange.presetLabels[preset];
   }
 
+  function monthLabel(month: number) {
+    return messages.dateRange.monthLabels[month - 1] ?? String(month);
+  }
+
   onMount(() => {
     if (defaultPreset && isEmptyRange(value)) {
       emit(resolvePreset(defaultPreset));
@@ -196,6 +264,33 @@
       >
         {labelFor(preset)}
       </button>
+      {#if preset === 'last30Days' || preset === 'thisYear'}
+        <span class="suu-filter-preset-divider" aria-hidden="true"></span>
+      {/if}
     {/each}
+    <label class="suu-filter-preset-select">
+      <span class="suu-visually-hidden">{messages.dateRange.quickMonthLabel}</span>
+      <select
+        aria-label={messages.dateRange.quickMonthLabel}
+        on:change={(event) => updateQuickMonth((event.currentTarget as HTMLSelectElement).value)}
+      >
+        <option value="" selected={quickMonth === ''}>{messages.dateRange.quickMonthPlaceholder}</option>
+        {#each monthNumbers as month}
+          <option value={month} selected={quickMonth === String(month)}>{monthLabel(month)}</option>
+        {/each}
+      </select>
+    </label>
+    <label class="suu-filter-preset-select">
+      <span class="suu-visually-hidden">{messages.dateRange.quickYearLabel}</span>
+      <select
+        aria-label={messages.dateRange.quickYearLabel}
+        on:change={(event) => updateQuickYear((event.currentTarget as HTMLSelectElement).value)}
+      >
+        <option value="" selected={quickYear === ''}>{messages.dateRange.quickYearPlaceholder}</option>
+        {#each quickYearOptions as year}
+          <option value={year} selected={quickYear === String(year)}>{year}</option>
+        {/each}
+      </select>
+    </label>
   </div>
 </div>

package/dist/data-table/DateRangeFilter.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangeFilter.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/data-table/DateRangeFilter.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,YAAY,CAAC;AAC5D,OAAO,KAAK,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAiMxE,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,eAAe;YAVkN,oBAAoB;eAAa,UAAU;iBAAe,MAAM,GAAG,SAAS;eAAa,MAAM,GAAG,SAAS;mBAAiB,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;oBAAkB,eAAe,GAAG,SAAS;UAAQ,MAAM,IAAI;mBAAiB,CAAC,GAAG,CAAC;eAAa,CAAC,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAC,GAAG,SAAS;;;kBAU5b,CAAC;AACnF,KAAK,eAAe,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC;AAC9D,eAAe,eAAe,CAAC"}
+{"version":3,"file":"DateRangeFilter.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/data-table/DateRangeFilter.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,YAAY,CAAC;AAC5D,OAAO,KAAK,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AA0RxE,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,eAAe;YAVkN,oBAAoB;eAAa,UAAU;iBAAe,MAAM,GAAG,SAAS;eAAa,MAAM,GAAG,SAAS;mBAAiB,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;oBAAkB,eAAe,GAAG,SAAS;UAAQ,MAAM,IAAI;mBAAiB,CAAC,GAAG,CAAC;eAAa,CAAC,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAC,GAAG,SAAS;;;kBAU5b,CAAC;AACnF,KAAK,eAAe,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC;AAC9D,eAAe,eAAe,CAAC"}

package/dist/i18n.d.ts

@@ -19,6 +19,11 @@ export interface UiMessages {
         startLabel: string;
         endLabel: string;
         presetLabels: Record<DateRangePresetKey, string>;
+        quickMonthLabel: string;
+        quickMonthPlaceholder: string;
+        quickYearLabel: string;
+        quickYearPlaceholder: string;
+        monthLabels: string[];
     };
     numberRange: {
         minLabel: string;

package/dist/i18n.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../src/lib/i18n.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW,sCAAuC,CAAC;AAEhE,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AAEtD,KAAK,kBAAkB,GACnB,aAAa,GACb,WAAW,GACX,YAAY,GACZ,OAAO,GACP,UAAU,GACV,WAAW,GACX,UAAU,CAAC;AAEf,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE;QACL,UAAU,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,cAAc,EAAE;QACd,aAAa,EAAE,MAAM,CAAC;QACtB,WAAW,EAAE,MAAM,CAAC;QACpB,UAAU,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,KAAK,EAAE;QACL,SAAS,EAAE,MAAM,CAAC;QAClB,aAAa,EAAE,MAAM,CAAC;QACtB,eAAe,EAAE,MAAM,CAAC;KACzB,CAAC;IACF,SAAS,EAAE;QACT,UAAU,EAAE,MAAM,CAAC;QACnB,QAAQ,EAAE,MAAM,CAAC;QACjB,YAAY,EAAE,MAAM,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC;KAClD,CAAC;IACF,WAAW,EAAE;QACX,QAAQ,EAAE,MAAM,CAAC;QACjB,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;CACH;AAqGD,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,UAAU,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,UAAU,CAiB9F;AAED,wBAAgB,aAAa,CAAC,QAAQ,EAAE,UAAU,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,UAAU,CAE1F"}
+{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../src/lib/i18n.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW,sCAAuC,CAAC;AAEhE,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AAEtD,KAAK,kBAAkB,GACnB,aAAa,GACb,WAAW,GACX,YAAY,GACZ,OAAO,GACP,UAAU,GACV,WAAW,GACX,UAAU,CAAC;AAEf,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE;QACL,UAAU,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,cAAc,EAAE;QACd,aAAa,EAAE,MAAM,CAAC;QACtB,WAAW,EAAE,MAAM,CAAC;QACpB,UAAU,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,KAAK,EAAE;QACL,SAAS,EAAE,MAAM,CAAC;QAClB,aAAa,EAAE,MAAM,CAAC;QACtB,eAAe,EAAE,MAAM,CAAC;KACzB,CAAC;IACF,SAAS,EAAE;QACT,UAAU,EAAE,MAAM,CAAC;QACnB,QAAQ,EAAE,MAAM,CAAC;QACjB,YAAY,EAAE,MAAM,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC;QACjD,eAAe,EAAE,MAAM,CAAC;QACxB,qBAAqB,EAAE,MAAM,CAAC;QAC9B,cAAc,EAAE,MAAM,CAAC;QACvB,oBAAoB,EAAE,MAAM,CAAC;QAC7B,WAAW,EAAE,MAAM,EAAE,CAAC;KACvB,CAAC;IACF,WAAW,EAAE;QACX,QAAQ,EAAE,MAAM,CAAC;QACjB,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;CACH;AAoHD,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,UAAU,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,UAAU,CAiB9F;AAED,wBAAgB,aAAa,CAAC,QAAQ,EAAE,UAAU,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,UAAU,CAE1F"}

package/dist/i18n.js

@@ -25,7 +25,12 @@ const messages = {
                 thisWeek: 'This Week',
                 thisMonth: 'This Month',
                 thisYear: 'This Year'
-            }
+            },
+            quickMonthLabel: 'Month',
+            quickMonthPlaceholder: 'Month',
+            quickYearLabel: 'Year',
+            quickYearPlaceholder: 'Year',
+            monthLabels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
         },
         numberRange: {
             minLabel: 'Min',
@@ -57,7 +62,12 @@ const messages = {
                 thisWeek: '本周',
                 thisMonth: '本月',
                 thisYear: '今年'
-            }
+            },
+            quickMonthLabel: '月份',
+            quickMonthPlaceholder: '月份',
+            quickYearLabel: '年份',
+            quickYearPlaceholder: '年份',
+            monthLabels: ['1 月', '2 月', '3 月', '4 月', '5 月', '6 月', '7 月', '8 月', '9 月', '10 月', '11 月', '12 月']
         },
         numberRange: {
             minLabel: '最小值',
@@ -89,7 +99,12 @@ const messages = {
                 thisWeek: '本週',
                 thisMonth: '本月',
                 thisYear: '今年'
-            }
+            },
+            quickMonthLabel: '月份',
+            quickMonthPlaceholder: '月份',
+            quickYearLabel: '年份',
+            quickYearPlaceholder: '年份',
+            monthLabels: ['1 月', '2 月', '3 月', '4 月', '5 月', '6 月', '7 月', '8 月', '9 月', '10 月', '11 月', '12 月']
         },
         numberRange: {
             minLabel: '最小值',

package/dist/style.css

@@ -33,6 +33,18 @@
   --suu-shadow: 0 16px 34px rgb(0 0 0 / 0.32);
 }
 
+.suu-visually-hidden {
+  position: absolute;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  border: 0;
+  margin: -1px;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
 .suu-toast-region {
   position: fixed;
   z-index: 1000;
@@ -551,6 +563,7 @@
 .suu-filter-preset-row {
   display: flex;
   flex-wrap: wrap;
+  align-items: center;
   gap: 6px;
 }
 
@@ -582,6 +595,34 @@
   background: color-mix(in srgb, var(--suu-color-accent) 12%, var(--suu-color-bg));
 }
 
+.suu-filter-preset-divider {
+  width: 1px;
+  height: 22px;
+  margin: 0 3px;
+  background: var(--suu-color-border);
+}
+
+.suu-filter-preset-select select {
+  min-height: 30px;
+  border: 1px solid var(--suu-color-border);
+  border-radius: var(--suu-radius);
+  background: var(--suu-color-bg);
+  color: var(--suu-color-text);
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.8125rem;
+}
+
+.suu-filter-preset-select select {
+  padding: 4px 28px 4px 8px;
+}
+
+.suu-filter-preset-select select:focus {
+  border-color: var(--suu-color-accent);
+  outline: 2px solid color-mix(in srgb, var(--suu-color-accent) 22%, transparent);
+  outline-offset: 1px;
+}
+
 .suu-input-affix {
   display: flex;
   align-items: stretch;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ibobbyts/svelte-ui-utils",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "description": "Reusable Svelte 5 UI utilities for dialogs, toast notifications, dropdown search, and data tables.",
   "type": "module",
   "license": "MIT",