feat(natural-date-input): hide raw input once date is parsed
The natural-language input box kept its placeholder visible after a date was parsed, with the green confirmation pill rendering below. Several admins read this as "the input is empty." Hide the input once parsedDate is set; show only the green pill with an Edit link that clears the parse and re-opens the input.
This commit is contained in:
parent
6fa3e08fe0
commit
f5b7a3eeba
1 changed files with 46 additions and 4 deletions
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="space-y-2">
|
<div class="space-y-2">
|
||||||
<div class="relative">
|
<div v-if="!parsedDate || hasError" class="relative">
|
||||||
<UInput
|
<UInput
|
||||||
v-model="naturalInput"
|
v-model="naturalInput"
|
||||||
:placeholder="placeholder"
|
:placeholder="placeholder"
|
||||||
|
|
@ -36,9 +36,18 @@
|
||||||
class="text-sm px-3 py-2"
|
class="text-sm px-3 py-2"
|
||||||
style="color: var(--candle); background: color-mix(in srgb, var(--candle) 15%, transparent); border: 1px solid var(--candle)"
|
style="color: var(--candle); background: color-mix(in srgb, var(--candle) 15%, transparent); border: 1px solid var(--candle)"
|
||||||
>
|
>
|
||||||
<div class="flex items-center gap-2">
|
<div class="flex items-center justify-between gap-2">
|
||||||
<Icon name="heroicons:calendar" class="w-4 h-4" />
|
<div class="flex items-center gap-2">
|
||||||
<span>{{ formatParsedDate(parsedDate) }}</span>
|
<Icon name="heroicons:calendar" class="w-4 h-4" />
|
||||||
|
<span>{{ formatParsedDate(parsedDate) }}</span>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="edit-link"
|
||||||
|
@click="clearAndEdit"
|
||||||
|
>
|
||||||
|
Edit
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -203,6 +212,23 @@ const setError = (message) => {
|
||||||
parsedDate.value = null;
|
parsedDate.value = null;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const clearAndEdit = () => {
|
||||||
|
// Pre-fill the input with a readable string so the user doesn't start over.
|
||||||
|
naturalInput.value = parsedDate.value
|
||||||
|
? parsedDate.value.toLocaleString("en-US", {
|
||||||
|
month: "long",
|
||||||
|
day: "numeric",
|
||||||
|
year: "numeric",
|
||||||
|
hour: "numeric",
|
||||||
|
minute: "2-digit",
|
||||||
|
hour12: true,
|
||||||
|
})
|
||||||
|
: "";
|
||||||
|
parsedDate.value = null;
|
||||||
|
isValidParse.value = false;
|
||||||
|
hasError.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
const formatForDatetimeLocal = (date) => {
|
const formatForDatetimeLocal = (date) => {
|
||||||
if (!date) return "";
|
if (!date) return "";
|
||||||
// Format as YYYY-MM-DDTHH:MM for datetime-local input
|
// Format as YYYY-MM-DDTHH:MM for datetime-local input
|
||||||
|
|
@ -246,3 +272,19 @@ const formatParsedDate = (date) => {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.edit-link {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
color: var(--candle);
|
||||||
|
cursor: pointer;
|
||||||
|
font-family: "Commit Mono", monospace;
|
||||||
|
font-size: 11px;
|
||||||
|
padding: 0;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
.edit-link:hover {
|
||||||
|
color: var(--ember);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue