@stonecrop/aform 0.21.0 → 0.23.0

package/src/components/form/ADateTimeInput.vue

@@ -0,0 +1,299 @@
+<template>
+	<div class="adate_time">
+		<div class="adate_time_fields">
+			<input
+				v-model="timeData.hours"
+				type="text"
+				inputmode="numeric"
+				@paste="pasteInput($event, true)"
+				@focus="focusInput"
+				@blur="confirmTime"
+				@keydown.enter.prevent="confirmTime"
+				@keydown.up.prevent="tick('hours')"
+				@keydown.down.prevent="tick('hours', -1)" />
+			<span class="colon">:</span>
+			<input
+				v-model="timeData.minutes"
+				type="text"
+				inputmode="numeric"
+				@paste="pasteInput"
+				@focus="focusInput"
+				@blur="confirmTime"
+				@keydown.enter.prevent="confirmTime"
+				@keydown.up.prevent="tick('minutes')"
+				@keydown.down.prevent="tick('minutes', -1)" />
+			<span v-if="useSeconds" class="colon">:</span>
+			<input
+				v-if="useSeconds"
+				v-model="timeData.seconds"
+				type="text"
+				inputmode="numeric"
+				@paste="pasteInput"
+				@focus="focusInput"
+				@blur="confirmTime"
+				@keydown.enter.prevent="confirmTime"
+				@keydown.up.prevent="tick('seconds')"
+				@keydown.down.prevent="tick('seconds', -1)" />
+			<select
+				v-if="!allowMilitaryTime"
+				ref="meridiem-selector"
+				v-model="meridiem"
+				class="aform-select meridiem-selector"
+				@change="confirmTime">
+				<option value="AM">AM</option>
+				<option value="PM">PM</option>
+			</select>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, useTemplateRef, watch, onMounted } from 'vue'
+
+const {
+	allowMilitaryTime = false,
+	defaultHours = 12,
+	defaultMinutes = 0,
+	defaultSeconds = 0,
+	defaultMeridiem = 'AM',
+	useSeconds = true,
+} = defineProps<{
+	allowMilitaryTime?: boolean
+	defaultHours?: number
+	defaultMinutes?: number
+	defaultSeconds?: number
+	defaultMeridiem?: string
+	useSeconds?: boolean
+}>()
+
+// `get-time` carries the widget's CURRENT VALUE, not a commit: it fires once as the widget
+// mounts and again on every blur, Enter, arrow key and meridiem change — five times during one
+// ordinary edit. `source` is what lets a parent tell the start-up announcement apart from a real
+// user edit; without it a parent has nothing to key on and must guess from the value alone.
+const emit = defineEmits<{
+	'get-time': [
+		{
+			hours: number
+			minutes: number
+			seconds: number
+			meridiem: string
+			militaryTime: number
+			source: 'init' | 'user'
+		},
+	]
+}>()
+
+const meridiemSelector = useTemplateRef<HTMLSelectElement>('meridiem-selector')
+
+const timeData = reactive({
+	hours: String(defaultHours).padStart(2, '0'),
+	minutes: String(defaultMinutes).padStart(2, '0'),
+	seconds: String(defaultSeconds).padStart(2, '0'),
+})
+
+const meridiem = ref(defaultMeridiem == 'AM' ? 'AM' : 'PM')
+
+onMounted(() => {
+	emitTime('init')
+})
+
+const confirmTime = () => {
+	const maxHours = allowMilitaryTime ? 23 : 12
+	const minHours = allowMilitaryTime ? 0 : 1
+	let hours = Number(timeData.hours)
+	let minutes = Number(timeData.minutes)
+	let seconds = Number(timeData.seconds)
+
+	if (isNaN(hours) || timeData.hours === '' || hours > maxHours) hours = maxHours
+	if (!allowMilitaryTime && hours < minHours) hours = minHours
+	if (isNaN(minutes) || timeData.minutes === '' || minutes > 59) minutes = 59
+	if (isNaN(seconds) || timeData.seconds === '' || seconds > 59) seconds = 59
+
+	timeData.hours = String(hours).padStart(2, '0')
+	timeData.minutes = String(minutes).padStart(2, '0')
+	timeData.seconds = String(seconds).padStart(2, '0')
+
+	emitTime('user')
+}
+
+const emitTime = (source: 'init' | 'user') => {
+	const hours = Number(timeData.hours)
+	const minutes = Number(timeData.minutes)
+	const seconds = Number(timeData.seconds)
+	emit('get-time', {
+		hours,
+		minutes,
+		seconds,
+		source,
+		meridiem: meridiem.value,
+		militaryTime: allowMilitaryTime ? hours : meridiem.value === 'PM' ? (hours === 12 ? 12 : hours + 12) : hours % 12,
+	})
+}
+
+const focusInput = (event: FocusEvent) => {
+	const target = event.target
+	if (target instanceof HTMLInputElement) {
+		target.select()
+	}
+}
+
+const tick = (target: 'hours' | 'minutes' | 'seconds', amount = 1) => {
+	const maxHours = allowMilitaryTime ? 23 : 12
+	const minHours = allowMilitaryTime ? 0 : 1
+
+	if (target == 'hours') {
+		const oldHours = Number(timeData.hours)
+		timeData.hours = String(oldHours + amount)
+		if ((oldHours == 11 && Number(timeData.hours) == 12) || (oldHours == 12 && Number(timeData.hours) == 11)) {
+			changeMeridiem()
+		}
+	} else if (target == 'minutes') {
+		timeData.minutes = String(Number(timeData.minutes) + amount)
+	} else if (target == 'seconds') {
+		timeData.seconds = String(Number(timeData.seconds) + amount)
+	}
+
+	const prevHours = Number(timeData.hours)
+
+	if (Number(timeData.seconds) < 0) timeData.minutes = String(Number(timeData.minutes) - 1)
+	else if (Number(timeData.seconds) > 59) timeData.minutes = String(Number(timeData.minutes) + 1)
+
+	if (Number(timeData.minutes) < 0) timeData.hours = String(prevHours - 1)
+	else if (Number(timeData.minutes) > 59) timeData.hours = String(prevHours + 1)
+
+	const newRawHours = Number(timeData.hours)
+	if (!allowMilitaryTime && newRawHours !== prevHours) {
+		if ((prevHours === 11 && newRawHours === 12) || (prevHours === 12 && newRawHours === 11)) {
+			changeMeridiem()
+		}
+	}
+
+	timeData.hours = String(formatTime(Number(timeData.hours), minHours, maxHours)).padStart(2, '0')
+	timeData.minutes = String(formatTime(Number(timeData.minutes), 0, 59)).padStart(2, '0')
+	timeData.seconds = String(formatTime(Number(timeData.seconds), 0, 59)).padStart(2, '0')
+}
+
+watch(
+	() => timeData.hours,
+	(newVal, oldVal) => {
+		timeData.hours = Number(newVal) > 99 ? oldVal : newVal
+	}
+)
+watch(
+	() => timeData.minutes,
+	(newVal, oldVal) => {
+		timeData.minutes = Number(newVal) > 99 ? oldVal : newVal
+	}
+)
+watch(
+	() => timeData.seconds,
+	(newVal, oldVal) => {
+		timeData.seconds = Number(newVal) > 99 ? oldVal : newVal
+	}
+)
+
+const formatTime = (target: number, min: number, max: number): number => {
+	if (target > max) return min
+	else if (target < min) return max
+	return target
+}
+
+const changeMeridiem = () => {
+	meridiem.value = meridiem.value == 'PM' ? 'AM' : 'PM'
+	emitTime('user')
+}
+
+const pasteInput = (event: ClipboardEvent, pasteAllFields = false) => {
+	event.stopPropagation()
+	event.preventDefault()
+
+	const clipboardData = event.clipboardData
+	if (!clipboardData) return
+	let pastedData: string = clipboardData.getData('Text')
+
+	pastedData = pastedData.replace(/[^0-9]/g, '')
+
+	if (pasteAllFields) {
+		if (pastedData.length % 2 != 0) pastedData = '0' + pastedData
+		if (pastedData.length < 3) pastedData += '00'
+		if (pastedData.length < 5) pastedData += '00'
+
+		const timeUnits = pastedData.match(/(..?)/g)
+		if (!timeUnits || timeUnits.length < 3) return
+
+		timeData.seconds = timeUnits[2]
+		timeData.minutes = timeUnits[1]
+		timeData.hours = timeUnits[0]
+		confirmTime()
+		if (!allowMilitaryTime) meridiemSelector.value?.focus()
+	} else {
+		if (pastedData.length > 2) pastedData = pastedData.slice(0, 2)
+		const target = event.target
+		if (target instanceof HTMLInputElement) {
+			target.value = pastedData
+			target.dispatchEvent(new Event('input'))
+		}
+	}
+}
+</script>
+
+<style scoped>
+.adate_time {
+	width: auto;
+	padding: 10px;
+	box-sizing: border-box;
+	font-size: 1rem;
+	background: var(--sc-gray-10);
+}
+.adate_time_fields {
+	display: flex;
+	align-items: stretch;
+	gap: 5px;
+	justify-content: flex-start;
+}
+.adate_time_fields > input {
+	min-width: 30px;
+	padding: 2px;
+	text-align: center;
+	display: inline-block;
+	flex-basis: 0;
+}
+.meridiem-selector {
+	cursor: pointer;
+	display: inline-block;
+	flex-basis: 0;
+	padding: 5px;
+	user-select: none;
+}
+.meridiem-selector:focus {
+	outline: 2px solid black;
+	outline-offset: -2px;
+}
+.adate_time_segment {
+	display: flex;
+	flex-direction: column;
+	width: 40px;
+}
+.colon {
+	display: flex;
+	align-items: normal;
+}
+.aform_form-btn {
+	cursor: pointer;
+}
+.aform-select {
+	border-radius: 0px;
+	border: 1px solid rgb(118, 118, 118);
+	font-size: 1rem;
+	padding: 0rem;
+	margin: 0;
+	border-radius: 0;
+	box-sizing: border-box;
+	min-height: auto;
+	position: relative;
+	color: var(--sc-cell-text-color);
+}
+.meridiem-selector {
+	margin-left: 6px;
+}
+</style>

package/src/components/form/ADropdown.vue

@@ -1,50 +1,62 @@
 <template>
-	<div v-if="mode === 'display'" class="input-wrapper">
-		<span class="aform_display-value">{{ search ?? '' }}</span>
-		<label>{{ label }}</label>
-		<p v-show="errorText" class="aform_error" v-html="errorText"></p>
-	</div>
-	<div v-else v-on-click-outside="onClickOutside" class="autocomplete" :class="{ isOpen: dropdown.open }">
-		<div class="input-wrapper">
-			<input
-				v-model="search"
-				type="text"
-				:disabled="mode === 'read'"
-				@input="filter"
-				@focus="openDropdown"
-				@keydown.down="selectNextResult"
-				@keydown.up="selectPrevResult"
-				@keydown.enter="setCurrentResult"
-				@keydown.esc="onClickOutside"
-				@keydown.tab="onClickOutside" />
-
-			<ul v-show="dropdown.open" id="autocomplete-results" class="autocomplete-results">
-				<li v-if="dropdown.loading" class="loading autocomplete-result">Loading results...</li>
-				<li
-					v-for="(result, i) in dropdown.results"
-					v-else
-					:key="result"
-					class="autocomplete-result"
-					:class="{ 'is-active': i === dropdown.activeItemIndex }"
-					@click.stop="setResult(result)">
-					{{ result }}
-				</li>
-			</ul>
-			<label>{{ label }}</label>
-		</div>
-		<p v-show="errorText" class="aform_error" v-html="errorText"></p>
+	<div class="aform_form-element">
+		<template v-if="mode === 'display'">
+			<span v-if="badgeDescriptor" class="aform_display-value" :style="displayAccentStyle">{{
+				badgeDescriptor.label
+			}}</span>
+			<span v-else class="aform_display-value">{{ search ?? '' }}</span>
+			<label class="aform_field-label">{{ label }}</label>
+		</template>
+		<template v-else>
+			<div v-on-click-outside="onClickOutside" class="autocomplete" :class="{ isOpen: dropdown.open }">
+				<input
+					v-model="search"
+					type="text"
+					class="aform_input-field"
+					:disabled="mode === 'read'"
+					:style="inputAccentStyle"
+					@input="filter"
+					@focus="openDropdown"
+					@keydown.down="selectNextResult"
+					@keydown.up="selectPrevResult"
+					@keydown.enter="setCurrentResult"
+					@keydown.esc="onClickOutside"
+					@keydown.tab="onClickOutside" />
+
+				<ul v-show="dropdown.open" id="autocomplete-results" class="autocomplete-results">
+					<li v-if="dropdown.loading" class="loading autocomplete-result">Loading results...</li>
+					<li
+						v-for="(result, i) in dropdown.results"
+						v-else
+						:key="result"
+						class="autocomplete-result"
+						:class="{ 'is-active': i === dropdown.activeItemIndex }"
+						@click.stop="setResult(result)">
+						{{ result }}
+					</li>
+				</ul>
+				<label class="aform_field-label">{{ label }}</label>
+			</div>
+			<p v-show="errorText" class="aform_error" v-html="errorText"></p>
+		</template>
 	</div>
 </template>
 
 <script setup lang="ts">
+import type { FieldOptions } from '@stonecrop/schema'
+import { selectChoices } from '@stonecrop/schema'
 import { vOnClickOutside } from '@vueuse/components'
-import { computed, reactive, ref } from 'vue'
+import { computed, reactive, ref, watch } from 'vue'
 
 import type { ComponentProps } from '../../types'
+import type { BadgeFormatFn } from '../../utils/badge'
+import { badgeInputAccentStyle, resolveFieldBadge } from '../../utils/badge'
+import { deserializeFunction } from '../../utils/deserialize'
 
 const {
 	label,
 	options = [],
+	format,
 	isAsync = false,
 	filterFunction = undefined,
 	mode,
@@ -52,26 +64,46 @@ const {
 	validation = { errorMessage: '' },
 } = defineProps<
 	ComponentProps & {
-		options?: string[]
+		options?: FieldOptions
+		format?: string
 		isAsync?: boolean
 		filterFunction?: (search: string) => string[] | Promise<string[]>
 	}
 >()
 
-// Dynamic trigger errors take precedence over a static schema errorMessage; empty means the slot hides.
+const choiceList = computed(() => selectChoices(options))
+
+// Compile the serialized formatter once per `format` string, not once per keystroke:
+// badgeDescriptor re-evaluates on every input event and deserializeFunction runs the
+// Function constructor.
+const formatFn = computed(() => (format ? deserializeFunction<BadgeFormatFn>(format) : undefined))
+
+const badgeDescriptor = computed(() => resolveFieldBadge(search.value, options, formatFn.value))
+
+const inputAccentStyle = computed(() => badgeInputAccentStyle(badgeDescriptor.value))
+
+const displayAccentStyle = computed(() => badgeInputAccentStyle(badgeDescriptor.value))
+
 const errorText = computed(() => (errors?.length ? errors.join('; ') : (validation.errorMessage ?? '')))
 const search = defineModel<string>()
 
-// tracks the last explicitly-committed value so outside-click reverts instead of clears
 const committedValue = ref(search.value ?? '')
 
 const dropdown = reactive({
 	activeItemIndex: null as number | null,
 	open: false,
 	loading: false,
-	results: options,
+	results: [] as string[],
 })
 
+watch(
+	choiceList,
+	choices => {
+		dropdown.results = choices
+	},
+	{ immediate: true }
+)
+
 const onClickOutside = () => closeDropdown()
 
 const filter = async () => {
@@ -99,26 +131,25 @@ const setResult = (result: string) => {
 }
 
 const openDropdown = () => {
-	const idx = options?.indexOf(search.value ?? '') ?? -1
+	const idx = choiceList.value.indexOf(search.value ?? '')
 	dropdown.activeItemIndex = isAsync ? null : idx >= 0 ? idx : null
 	dropdown.open = true
-	// TODO: this should probably call the async function if it's async
-	dropdown.results = isAsync ? [] : options
+	dropdown.results = isAsync ? [] : choiceList.value
 }
 
 const closeDropdown = (result?: string) => {
 	dropdown.activeItemIndex = null
 	dropdown.open = false
-	if (!options?.includes(result || search.value || '')) {
+	if (!choiceList.value.includes(result || search.value || '')) {
 		search.value = committedValue.value
 	}
 }
 
 const filterResults = () => {
 	if (!search.value) {
-		dropdown.results = options
+		dropdown.results = choiceList.value
 	} else {
-		dropdown.results = options?.filter(item => item.toLowerCase().includes((search.value ?? '').toLowerCase()))
+		dropdown.results = choiceList.value.filter(item => item.toLowerCase().includes((search.value ?? '').toLowerCase()))
 	}
 }
 
@@ -157,65 +188,26 @@ const setCurrentResult = () => {
 </script>
 
 <style scoped>
-/* variables taken from here: https://github.com/frappe/frappe/blob/version-13/frappe/public/scss/common/awesomeplete.scss */
 .autocomplete {
 	position: relative;
 }
 
-.input-wrapper {
-	border: 1px solid transparent;
-	padding: 0rem;
-	margin: 0rem;
-	margin-right: 1ch;
-}
-
-input {
-	width: calc(100% - 1ch);
-	outline: 1px solid transparent;
-	border: 1px solid var(--sc-input-border-color);
-	padding: 1ch 0.5ch 0.5ch 1ch;
-	margin: calc(1.15rem / 2) 0 0 0;
-	min-height: 1.15rem;
-	border-radius: 0.25rem;
-	font-family: var(--sc-font-family);
-}
-
-input:focus {
-	border: 1px solid var(--sc-input-active-border-color);
-	border-radius: 0.25rem 0.25rem 0 0;
-	border-bottom: none;
-}
-
-label {
-	display: block;
-	min-height: 1.15rem;
-	padding: 0rem;
-	margin: 0rem;
-	border: 1px solid transparent;
-	margin-bottom: 0.25rem;
-	z-index: 0;
-	font-size: 80%;
-	position: absolute;
-	background: white;
-	margin: calc(-1.5rem - calc(2.15rem / 2)) 0 0 1ch;
-	padding: 0 0.25ch 0 0.25ch;
-}
-
 .autocomplete-results {
 	position: absolute;
-	width: calc(100% - 1ch + 1.5px);
+	left: 0;
+	right: 0;
 	z-index: 100;
 	padding: 0;
 	margin: 0;
 	color: var(--sc-input-active-border-color);
 	border: 1px solid var(--sc-input-active-border-color);
-	border-radius: 0 0 0.25rem 0.25rem;
+	border-radius: 0;
 	border-top: none;
-	background-color: #fff;
+	background-color: var(--sc-input-field-background, #fff);
+	list-style: none;
 }
 
 .autocomplete-result {
-	list-style: none;
 	text-align: left;
 	padding: 4px 6px;
 	cursor: pointer;
@@ -227,14 +219,4 @@ label {
 	background-color: var(--sc-row-color-zebra-light);
 	color: var(--sc-input-active-border-color);
 }
-
-/* Keep the field error in-flow below the control. The shared .aform_error is absolutely
-   positioned against a .aform_form-element anchor, which this component does not use. */
-p.aform_error {
-	position: static;
-	display: block;
-	color: var(--sc-brand-danger, red);
-	font-size: 0.7rem;
-	margin: 0.25rem 0 0;
-}
 </style>

package/src/components/form/ADuration.vue

@@ -57,7 +57,12 @@ watch(duration, newMs => {
 	modelValue.value = newMs
 })
 
-const handleRange = (data: { start: Date; end: Date }) => {
+const handleRange = (data: { start: Date; end: Date; source?: 'init' | 'user' }) => {
+	// Both time widgets announce their starting values as they mount, which ADateSelection turns
+	// into a range. That is not a range the user picked: acting on it wrote a 0ms duration into the
+	// model, and lit the summary strip, on first render.
+	if (data.source === 'init') return
+
 	startDatetime.value = data.start
 	endDatetime.value = data.end
 	modelValue.value = duration.value

package/src/index.ts

@@ -1,5 +1,7 @@
 export type * from '@stonecrop/atable/types'
 export { deserializeFunction } from './utils/deserialize'
+export { badgeInputAccentStyle, resolveFieldBadge } from './utils/badge'
+export type { BadgeFormatContext, BadgeFormatFn } from './utils/badge'
 import { install as installATable } from '@stonecrop/atable'
 import type { App } from 'vue'
 
@@ -7,8 +9,10 @@ import ACheckbox from './components/form/ACheckbox.vue'
 import ACurrencyInput from './components/form/ACurrencyInput.vue'
 import ADate from './components/form/ADate.vue'
 import ADropdown from './components/form/ADropdown.vue'
+import ABadge from './components/form/ABadge.vue'
 import ADatePicker from './components/form/ADatePicker.vue'
 import ADateTime from './components/form/ADateTime.vue'
+import ADateTimeInput from './components/form/ADateTimeInput.vue'
 import ADateSelection from './components/form/ADateSelection.vue'
 import ADuration from './components/form/ADuration.vue'
 import ADateRange from './components/form/ADateRange.vue'
@@ -37,8 +41,10 @@ function install(app: App /* options */) {
 	app.component('ACurrencyInput', ACurrencyInput)
 	app.component('ADate', ADate)
 	app.component('ADropdown', ADropdown)
+	app.component('ABadge', ABadge)
 	app.component('ADatePicker', ADatePicker)
 	app.component('ADateTime', ADateTime)
+	app.component('ADateTimeInput', ADateTimeInput)
 	app.component('ADateRange', ADateRange)
 	app.component('ADateSelection', ADateSelection)
 	app.component('AFieldset', AFieldset)
@@ -58,11 +64,13 @@ export {
 	ACurrencyInput,
 	ADate,
 	ADropdown,
+	ABadge,
 	ADatePicker,
 	ADateRange,
 	ADateSelection,
 	ADuration,
 	ADateTime,
+	ADateTimeInput,
 	AFieldset,
 	AFileAttach,
 	AForm,