Add multiple style improvements to new date picker and add actions
This commit is contained in:
parent
819df964bc
commit
989f54783c
|
@ -2,6 +2,7 @@
|
|||
import { cleanInput } from "./utils"
|
||||
import Select from "../../Select.svelte"
|
||||
import dayjs from "dayjs"
|
||||
import NumberInput from "./NumberInput.svelte"
|
||||
|
||||
export let value
|
||||
export let onChange
|
||||
|
@ -80,13 +81,10 @@
|
|||
on:change={e => (calendarDate = calendarDate.month(e.detail))}
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
class="custom-num-input"
|
||||
type="number"
|
||||
<NumberInput
|
||||
value={calendarDate.year()}
|
||||
min="0"
|
||||
max="9999"
|
||||
onclick="this.select()"
|
||||
min={0}
|
||||
max={9999}
|
||||
on:change={handleCalendarYearChange}
|
||||
on:input={cleanYear}
|
||||
/>
|
||||
|
@ -173,7 +171,6 @@
|
|||
<style>
|
||||
/* Calendar overrides */
|
||||
.spectrum-Calendar {
|
||||
padding: 8px;
|
||||
width: auto;
|
||||
}
|
||||
.spectrum-Calendar-title {
|
||||
|
@ -209,7 +206,7 @@
|
|||
.spectrum-Calendar-nextMonth,
|
||||
.spectrum-Calendar-prevMonth {
|
||||
order: 1;
|
||||
padding: 4px 6px;
|
||||
padding: 4px;
|
||||
}
|
||||
.spectrum-Calendar-date {
|
||||
color: var(--spectrum-alias-text-color);
|
||||
|
@ -217,4 +214,19 @@
|
|||
.spectrum-Calendar-date.is-selected {
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Style select */
|
||||
.month-selector :global(.spectrum-Picker) {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 4px 6px;
|
||||
}
|
||||
.month-selector :global(.spectrum-Picker:hover),
|
||||
.month-selector :global(.spectrum-Picker.is-open) {
|
||||
background: var(--spectrum-global-color-gray-200);
|
||||
}
|
||||
.month-selector :global(.spectrum-Picker-label) {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -8,6 +8,7 @@
|
|||
import TimePicker from "./TimePicker.svelte"
|
||||
import Calendar from "./Calendar.svelte"
|
||||
import DateTimeInput from "./DateTimeField.svelte"
|
||||
import ActionButton from "../../../ActionButton/ActionButton.svelte"
|
||||
|
||||
export let id = null
|
||||
export let disabled = false
|
||||
|
@ -125,47 +126,46 @@
|
|||
{#if showCalendar}
|
||||
<Calendar value={parsedValue} onChange={handleChange} />
|
||||
{/if}
|
||||
{#if showCalendar && showTime}
|
||||
<hr />
|
||||
{/if}
|
||||
{#if showTime}
|
||||
<TimePicker value={parsedValue} onChange={handleChange} />
|
||||
{/if}
|
||||
<div class="footer" class:spaced={showCalendar}>
|
||||
{#if showTime}
|
||||
<TimePicker value={parsedValue} onChange={handleChange} />
|
||||
{/if}
|
||||
<div class="actions">
|
||||
<ActionButton
|
||||
disabled={!value}
|
||||
size="S"
|
||||
on:click={() => handleChange(null)}
|
||||
>
|
||||
Clear
|
||||
</ActionButton>
|
||||
<ActionButton size="S" on:click={() => handleChange(dayjs())}>
|
||||
{showTime ? "Now" : "Today"}
|
||||
</ActionButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</Popover>
|
||||
|
||||
<style>
|
||||
hr {
|
||||
margin: 4px 0 0 0;
|
||||
height: 0;
|
||||
border: none;
|
||||
border-top: 1px solid var(--spectrum-global-color-gray-200);
|
||||
.date-time-popover {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
/* Style inputs */
|
||||
.date-time-popover :global(.spectrum-Picker),
|
||||
.date-time-popover :global(input[type="number"]) {
|
||||
background: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: var(--spectrum-alias-text-color);
|
||||
padding: 4px 6px;
|
||||
border-radius: 4px;
|
||||
transition: background 130ms ease-out;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
font-family: var(--font-sans);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
.footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 32px;
|
||||
}
|
||||
.date-time-popover :global(.spectrum-Picker:hover),
|
||||
.date-time-popover :global(.spectrum-Picker.is-open),
|
||||
.date-time-popover :global(input[type="number"]:hover) {
|
||||
background: var(--spectrum-global-color-gray-200);
|
||||
.footer.spaced {
|
||||
padding-top: 14px;
|
||||
}
|
||||
.date-time-popover :global(.spectrum-Picker-label) {
|
||||
font-size: var(--spectrum-calendar-title-text-size);
|
||||
font-weight: bold;
|
||||
color: var(--spectrum-alias-text-color);
|
||||
.actions {
|
||||
padding: 4px 0;
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 6px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -0,0 +1,54 @@
|
|||
<script>
|
||||
export let value
|
||||
export let min
|
||||
export let max
|
||||
export let onChange
|
||||
export let hideArrows = false
|
||||
export let width
|
||||
|
||||
$: style = width ? `width:${width}px;` : ""
|
||||
</script>
|
||||
|
||||
<input
|
||||
class:hide-arrows={hideArrows}
|
||||
type="number"
|
||||
{style}
|
||||
{value}
|
||||
{min}
|
||||
{max}
|
||||
onclick="this.select()"
|
||||
on:change
|
||||
on:input
|
||||
/>
|
||||
|
||||
<style>
|
||||
input {
|
||||
background: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: var(--spectrum-alias-text-color);
|
||||
padding: 4px 6px 5px 6px;
|
||||
border-radius: 4px;
|
||||
transition: background 130ms ease-out;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
font-family: var(--font-sans);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
input:focus,
|
||||
input:hover {
|
||||
--space: 30px;
|
||||
background: var(--spectrum-global-color-gray-200);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Hide built-in arrows */
|
||||
input.hide-arrows::-webkit-outer-spin-button,
|
||||
input.hide-arrows::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
input.hide-arrows {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
</style>
|
|
@ -1,6 +1,7 @@
|
|||
<script>
|
||||
import { cleanInput } from "./utils"
|
||||
import dayjs from "dayjs"
|
||||
import NumberInput from "./NumberInput.svelte"
|
||||
|
||||
export let value
|
||||
export let onChange
|
||||
|
@ -22,22 +23,22 @@
|
|||
</script>
|
||||
|
||||
<div class="time-picker">
|
||||
<input
|
||||
type="number"
|
||||
<NumberInput
|
||||
hideArrows
|
||||
value={displayValue.hour().toString().padStart(2, "0")}
|
||||
min="0"
|
||||
max="23"
|
||||
onclick="this.select()"
|
||||
min={0}
|
||||
max={23}
|
||||
width={20}
|
||||
on:input={cleanHour}
|
||||
on:change={handleHourChange}
|
||||
/>
|
||||
<span>:</span>
|
||||
<input
|
||||
type="number"
|
||||
<NumberInput
|
||||
hideArrows
|
||||
value={displayValue.minute().toString().padStart(2, "0")}
|
||||
min="0"
|
||||
max="59"
|
||||
onclick="this.select()"
|
||||
min={0}
|
||||
max={59}
|
||||
width={20}
|
||||
on:input={cleanMinute}
|
||||
on:change={handleMinuteChange}
|
||||
/>
|
||||
|
@ -45,7 +46,6 @@
|
|||
|
||||
<style>
|
||||
.time-picker {
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
@ -54,12 +54,6 @@
|
|||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
z-index: -1;
|
||||
color: var(--spectrum-global-color-gray-700);
|
||||
}
|
||||
.time-picker input:first-child {
|
||||
margin-right: -16px;
|
||||
}
|
||||
.time-picker input:last-child {
|
||||
margin-left: 8px;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -0,0 +1,53 @@
|
|||
<script>
|
||||
import { CoreDatePicker } from "@budibase/bbui"
|
||||
import Field from "./Field.svelte"
|
||||
|
||||
export let field
|
||||
export let label
|
||||
export let placeholder
|
||||
export let disabled = false
|
||||
export let enableTime = true
|
||||
export let timeOnly = false
|
||||
export let time24hr = false
|
||||
export let ignoreTimezones = false
|
||||
export let validation
|
||||
export let defaultValue
|
||||
export let onChange
|
||||
|
||||
let fieldState
|
||||
let fieldApi
|
||||
|
||||
const handleChange = e => {
|
||||
const changed = fieldApi.setValue(e.detail)
|
||||
if (onChange && changed) {
|
||||
onChange({ value: e.detail })
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<Field
|
||||
{label}
|
||||
{field}
|
||||
{disabled}
|
||||
{validation}
|
||||
{defaultValue}
|
||||
type="datetime"
|
||||
bind:fieldState
|
||||
bind:fieldApi
|
||||
>
|
||||
{#if fieldState}
|
||||
<CoreDatePicker
|
||||
value={fieldState.value}
|
||||
on:change={handleChange}
|
||||
disabled={fieldState.disabled}
|
||||
error={fieldState.error}
|
||||
id={fieldState.fieldId}
|
||||
appendTo={document.getElementById("flatpickr-root")}
|
||||
{enableTime}
|
||||
{timeOnly}
|
||||
{time24hr}
|
||||
{ignoreTimezones}
|
||||
{placeholder}
|
||||
/>
|
||||
{/if}
|
||||
</Field>
|
Loading…
Reference in New Issue