You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
112 lines
3.2 KiB
112 lines
3.2 KiB
<script lang="ts">
|
|
import { DateRangePickerProvider } from '$soma/components/date-range-picker';
|
|
|
|
// Footer for the DateRangePicker calendar. Lives inside the provider tree
|
|
// (rendered from the Calendar snippet) so it can pull options + helpers
|
|
// straight from context.
|
|
//
|
|
// Buttons are configured via props on the picker:
|
|
// - `clearButton` — Clear (reset value, keep open)
|
|
// - `cancelButton` — Cancel (revert to value-at-open, close)
|
|
// - `closeButton` — Close / Save (commit current value, close)
|
|
//
|
|
// In `mode='modal'` Close is forced on so the user always has a way out:
|
|
// modal popovers ignore outside-click and Escape.
|
|
//
|
|
// If no buttons are enabled (and the picker is not modal), this footer
|
|
// renders nothing.
|
|
const provider = DateRangePickerProvider.require();
|
|
const mode = $derived(provider.opts.mode.current);
|
|
const showClear = $derived(provider.opts.clearButton.current);
|
|
const showCancel = $derived(provider.opts.cancelButton.current);
|
|
const showClose = $derived(provider.opts.closeButton.current || mode === 'modal');
|
|
const visible = $derived(showClear || showCancel || showClose);
|
|
</script>
|
|
|
|
{#if visible}
|
|
<div class="picker-footer" data-date-range-picker-footer data-mode={mode}>
|
|
{#if showClear}
|
|
<button
|
|
type="button"
|
|
class="picker-footer-button"
|
|
data-tone="ghost"
|
|
onclick={() => provider.clear()}
|
|
>
|
|
Clear
|
|
</button>
|
|
{/if}
|
|
<div class="picker-footer-spacer"></div>
|
|
{#if showCancel}
|
|
<button
|
|
type="button"
|
|
class="picker-footer-button"
|
|
data-tone="ghost"
|
|
onclick={() => provider.cancel()}
|
|
>
|
|
Cancel
|
|
</button>
|
|
{/if}
|
|
{#if showClose}
|
|
<button
|
|
type="button"
|
|
class="picker-footer-button"
|
|
data-tone="solid"
|
|
onclick={() => provider.commit()}
|
|
>
|
|
Close
|
|
</button>
|
|
{/if}
|
|
</div>
|
|
{/if}
|
|
|
|
<style>
|
|
.picker-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--uix-space-2, 0.5rem);
|
|
padding-block-start: var(--uix-space-3, 0.75rem);
|
|
margin-block-start: var(--uix-space-3, 0.75rem);
|
|
border-block-start: 1px solid var(--color-border-subtle);
|
|
}
|
|
|
|
.picker-footer-spacer {
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.picker-footer-button {
|
|
inline-size: max-content;
|
|
min-block-size: var(--control-height-sm);
|
|
padding-inline: var(--uix-space-3, 0.75rem);
|
|
border-radius: var(--radius-md);
|
|
border: var(--border-width) solid transparent;
|
|
background: transparent;
|
|
color: var(--color-content-primary);
|
|
font: inherit;
|
|
font-size: var(--uix-text-sm);
|
|
cursor: pointer;
|
|
transition:
|
|
background var(--duration-fast) var(--ease-default),
|
|
border-color var(--duration-fast) var(--ease-default),
|
|
color var(--duration-fast) var(--ease-default);
|
|
}
|
|
|
|
.picker-footer-button[data-tone='ghost']:hover {
|
|
background: var(--color-surface-overlay);
|
|
}
|
|
|
|
.picker-footer-button[data-tone='solid'] {
|
|
border-color: var(--color-primary-border);
|
|
background: var(--color-primary-solid);
|
|
color: var(--color-content-on-solid);
|
|
}
|
|
|
|
.picker-footer-button[data-tone='solid']:hover {
|
|
background: var(--color-primary-solid-hover);
|
|
}
|
|
|
|
.picker-footer-button:focus-visible {
|
|
outline: var(--focus-ring-width) solid var(--color-primary-border);
|
|
outline-offset: var(--focus-ring-offset);
|
|
}
|
|
</style>
|