File size: 2,778 Bytes
bc20498 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 |
<script>import { derived } from "svelte/store";
import { setCtx } from "../ctx.js";
export let value = void 0;
export let onValueChange = void 0;
export let placeholder = void 0;
export let onPlaceholderChange = void 0;
export let disabled = void 0;
export let isDateUnavailable = void 0;
export let granularity = void 0;
export let hideTimeZone = void 0;
export let hourCycle = void 0;
export let locale = void 0;
export let maxValue = void 0;
export let minValue = void 0;
export let readonly = void 0;
export let validationId = void 0;
export let descriptionId = void 0;
const {
states: { value: localValue, placeholder: localPlaceholder, isInvalid: localIsInvalid },
updateOption,
ids
} = setCtx({
defaultValue: value,
defaultPlaceholder: placeholder,
disabled,
granularity,
hideTimeZone,
hourCycle,
locale,
maxValue,
minValue,
readonly,
isDateUnavailable,
onValueChange: ({ next }) => {
if (value !== next) {
onValueChange?.(next);
value = next;
}
return next;
},
onPlaceholderChange: ({ next }) => {
if (placeholder !== next) {
onPlaceholderChange?.(next);
placeholder = next;
}
return next;
}
});
const idValues = derived(
[
ids.dateField.day,
ids.dateField.description,
ids.dateField.dayPeriod,
ids.dateField.field,
ids.dateField.hour,
ids.dateField.minute,
ids.dateField.month,
ids.dateField.second,
ids.dateField.year,
ids.dateField.validation,
ids.dateField.label,
ids.dateField.timeZoneName
],
([
$dayId,
$descriptionId,
$dayPeriodId,
$fieldId,
$hourId,
$minuteId,
$monthId,
$secondId,
$yearId,
$validationId,
$labelId,
$timeZoneNameId
]) => ({
day: $dayId,
description: $descriptionId,
dayPeriod: $dayPeriodId,
field: $fieldId,
hour: $hourId,
minute: $minuteId,
month: $monthId,
second: $secondId,
year: $yearId,
validation: $validationId,
label: $labelId,
timeZoneName: $timeZoneNameId
})
);
$:
if (validationId) {
ids.dateField.validation.set(validationId);
}
$:
if (descriptionId) {
ids.dateField.description.set(descriptionId);
}
$:
value !== void 0 && localValue.set(value);
$:
placeholder !== void 0 && localPlaceholder.set(placeholder);
$:
updateOption("disabled", disabled);
$:
updateOption("isDateUnavailable", isDateUnavailable);
$:
updateOption("granularity", granularity);
$:
updateOption("hideTimeZone", hideTimeZone);
$:
updateOption("hourCycle", hourCycle);
$:
updateOption("locale", locale);
$:
updateOption("maxValue", maxValue);
$:
updateOption("minValue", minValue);
$:
updateOption("readonly", readonly);
</script>
<slot ids={$idValues} isInvalid={$localIsInvalid} />
|