diff --git a/package.json b/package.json index 09044c7a..35a62cdf 100644 --- a/package.json +++ b/package.json @@ -67,6 +67,7 @@ "packageManager": "pnpm@10.15.1+sha512.34e538c329b5553014ca8e8f4535997f96180a1d0f614339357449935350d924e22f8614682191264ec33d1462ac21561aff97f6bb18065351c162c7e8f6de67", "dependencies": { "@friendofsvelte/tipex": "^0.0.9", + "@internationalized/date": "^3.10.0", "@tanstack/svelte-query": "^6.0.9", "@tiptap/core": "^3.5.1", "@tiptap/extension-highlight": "^3.5.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9935c7aa..055d92bb 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -11,6 +11,9 @@ importers: '@friendofsvelte/tipex': specifier: ^0.0.9 version: 0.0.9(highlight.js@11.8.0)(svelte@5.38.7) + '@internationalized/date': + specifier: ^3.10.0 + version: 3.10.0 '@tanstack/svelte-query': specifier: ^6.0.9 version: 6.0.9(svelte@5.38.7) @@ -31,7 +34,7 @@ importers: version: 3.5.1 bits-ui: specifier: ^2.9.6 - version: 2.9.6(@internationalized/date@3.9.0)(svelte@5.38.7) + version: 2.9.6(@internationalized/date@3.10.0)(svelte@5.38.7) fluid-dnd: specifier: ^2.6.2 version: 2.6.2 @@ -430,8 +433,8 @@ packages: resolution: {integrity: sha512-cvz/C1rF5WBxzHbEoiBoI6Sz6q6M+TdxfWkEGBYTD77opY8i8WN01prUWXEM87GPF4SZcyIySez9U0Ccm12oFQ==} engines: {node: '>=18.0.0'} - '@internationalized/date@3.9.0': - resolution: {integrity: sha512-yaN3brAnHRD+4KyyOsJyk49XUvj2wtbNACSqg0bz3u8t2VuzhC8Q5dfRnrSxjnnbDb+ienBnkn1TzQfE154vyg==} + '@internationalized/date@3.10.0': + resolution: {integrity: sha512-oxDR/NTEJ1k+UFVQElaNIk65E/Z83HK1z1WI3lQyhTtnNg4R5oVXaPzK3jcpKG8UHKDVuDQHzn+wsxSz8RP3aw==} '@jridgewell/gen-mapping@0.3.13': resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==} @@ -3094,7 +3097,7 @@ snapshots: transitivePeerDependencies: - babel-plugin-macros - '@internationalized/date@3.9.0': + '@internationalized/date@3.10.0': dependencies: '@swc/helpers': 0.5.17 @@ -4145,11 +4148,11 @@ snapshots: balanced-match@1.0.2: {} - bits-ui@2.9.6(@internationalized/date@3.9.0)(svelte@5.38.7): + bits-ui@2.9.6(@internationalized/date@3.10.0)(svelte@5.38.7): dependencies: '@floating-ui/core': 1.7.3 '@floating-ui/dom': 1.7.4 - '@internationalized/date': 3.9.0 + '@internationalized/date': 3.10.0 esm-env: 1.2.2 runed: 0.29.2(svelte@5.38.7) svelte: 5.38.7 diff --git a/src/lib/components/ui/DatePicker.svelte b/src/lib/components/ui/DatePicker.svelte new file mode 100644 index 00000000..b26193eb --- /dev/null +++ b/src/lib/components/ui/DatePicker.svelte @@ -0,0 +1,438 @@ + + + + +{#if label} +
+ {label} + + +
+ + {#snippet children({ segments })} + {#each segments as { part, value: segValue }} + + {segValue} + + {/each} + {/snippet} + + + + + +
+ + + + {#snippet children({ months, weekdays })} + + + + + + + + + + + {#each months as month} + + + + {#each weekdays as day} + + {day} + + {/each} + + + + {#each month.weeks as weekDates} + + {#each weekDates as date} + + + {date.day} + + + {/each} + + {/each} + + + {/each} + {/snippet} + + + +
+{:else} + +
+ + {#snippet children({ segments })} + {#each segments as { part, value: segValue }} + + {segValue} + + {/each} + {/snippet} + + + + + +
+ + + + {#snippet children({ months, weekdays })} + + + + + + + + + + + {#each months as month} + + + + {#each weekdays as day} + + {day} + + {/each} + + + + {#each month.weeks as weekDates} + + {#each weekDates as date} + + + {date.day} + + + {/each} + + {/each} + + + {/each} + {/snippet} + + + +{/if} + + diff --git a/src/lib/components/ui/DetailItem.svelte b/src/lib/components/ui/DetailItem.svelte index 8d9366ea..3d898079 100644 --- a/src/lib/components/ui/DetailItem.svelte +++ b/src/lib/components/ui/DetailItem.svelte @@ -5,6 +5,7 @@ import Input from './Input.svelte' import Select from './Select.svelte' import Checkbox from './checkbox/Checkbox.svelte' + import DatePicker from './DatePicker.svelte' interface SelectOption { value: string | number @@ -31,7 +32,7 @@ value?: string | number | boolean | null | undefined children?: Snippet editable?: boolean - type?: 'text' | 'number' | 'select' | 'checkbox' + type?: 'text' | 'number' | 'select' | 'checkbox' | 'date' options?: SelectOption[] placeholder?: string element?: 'wind' | 'fire' | 'water' | 'earth' | 'dark' | 'light' @@ -85,6 +86,8 @@ {placeholder} alignRight={true} /> + {:else if type === 'date'} + {:else} {/if} diff --git a/src/lib/components/ui/SuggestionDetailItem.svelte b/src/lib/components/ui/SuggestionDetailItem.svelte index 925bf103..e7f3467e 100644 --- a/src/lib/components/ui/SuggestionDetailItem.svelte +++ b/src/lib/components/ui/SuggestionDetailItem.svelte @@ -5,6 +5,7 @@ import Input from './Input.svelte' import Select from './Select.svelte' import Checkbox from './checkbox/Checkbox.svelte' + import DatePicker from './DatePicker.svelte' import SuggestionBadge from './SuggestionBadge.svelte' interface SelectOption { @@ -38,7 +39,7 @@ value?: string | number | boolean | null | undefined children?: Snippet editable?: boolean - type?: 'text' | 'number' | 'select' | 'checkbox' + type?: 'text' | 'number' | 'select' | 'checkbox' | 'date' options?: SelectOption[] placeholder?: string element?: 'wind' | 'fire' | 'water' | 'earth' | 'dark' | 'light' @@ -133,6 +134,8 @@ {placeholder} alignRight={true} /> + {:else if type === 'date'} + {:else} {/if}