Feature/2824 date input #2864
Feature/2824 date input #2864
Conversation
|
fixes #2824 |
|
Date Input w/ calendar (@steeze-ui/svelte-icon)
Date Input w/ inline title
Date Input w/ range + title (no calendar icon)
|
|
Added more margin between icon and text (m1 --> m2).
Date range for reference
|
|
calendar icon is improved The separating bar between the Date Input and Jan 1, 1970 looks different to that used in the Dropdown to me (too heavy, does not extend high or low enough) Can we match the styling |
|
Moved some functions used both in DateRange and DateInput, into a helper.js I tried moving some of the query-building logic/ input store, but it felt like my changes were making the code more complicated, so I left them in the respective components. |
packages/ui/core-components/src/lib/atoms/inputs/date-input/DateInput.svelte
Outdated
Show resolved
Hide resolved
packages/ui/core-components/src/lib/atoms/inputs/date-input/DateInput.svelte
Outdated
Show resolved
Hide resolved
packages/ui/core-components/src/lib/atoms/inputs/date-input/DateInput.svelte
Outdated
Show resolved
Hide resolved
packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte
Outdated
Show resolved
Hide resolved
packages/ui/core-components/src/lib/atoms/inputs/date-input/_DateInput.svelte
Outdated
Show resolved
Hide resolved
|
|
||
| $: range = toBoolean(range); | ||
|
|
||
| const exec = getQueryFunction(); |
There was a problem hiding this comment.
@ItsMeBrianD is there an alternative we should prefer to direct Query.create/getQueryFunction here
There was a problem hiding this comment.
Yes you should use the utilities provided in buildQuery.js, Query.create should almost never be used in a component directly
packages/ui/core-components/src/lib/atoms/inputs/date-input/DateInput.stories.svelte
Show resolved
Hide resolved
packages/ui/core-components/src/lib/atoms/inputs/date-input/DateInput.svelte
Outdated
Show resolved
Hide resolved
| @@ -39,6 +36,9 @@ | |||
| /** @type {string | undefined} */ | |||
| export let defaultValue; | |||
|
|
|||
| /** @type {boolean} */ | |||
| let range = true; | |||
There was a problem hiding this comment.
Why do we need a range prop on DateRange? DateRange should always be a range in my opinion
There was a problem hiding this comment.
removed prop, is something like this better
There was a problem hiding this comment.
Yes, remove the range variable entirely.
You can also use the shorthand for boolean props:
<DateInput
bind:selectedDateInput
start={startString}
end={endString}
loaded={loaded?.ready ?? true}
{presetRanges}
{defaultValue}
range <!-- this is equivalent to range={true} -->
/>
packages/ui/core-components/src/lib/atoms/inputs/date-input/DateInput.svelte
Show resolved
Hide resolved
|
To dos: Take DateRange themes styling and apply them to _Date Input |
|
|
||
| $: range = toBoolean(range); | ||
|
|
||
| $: console.log(range); |
|
|
||
| $: range = toBoolean(range); | ||
|
|
||
| const exec = getQueryFunction(); |
There was a problem hiding this comment.
Yes you should use the utilities provided in buildQuery.js, Query.create should almost never be used in a component directly
| selectedPreset = targetPreset; | ||
| console.log(targetPreset); |
There was a problem hiding this comment.
Remove debug log
| console.log(targetPreset); |
Description
Created DateInput component that builds off the DateRange structure. Redirects /components/date-range/ --> /components/date-input/
Allows users to access a single date or ranged date input calendar
Checklist