@stonecrop/aform 0.16.2 → 0.16.4

package/src/components/form/AFormLink.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="aform_form-element">
+	<div :class="['aform_form-element', { 'aform_form-element--embedded': embedded }]">
 		<span v-if="mode === 'display'" class="aform_display-value">{{ displayedText }}</span>
 		<template v-else>
 			<div v-on-click-outside="onClickOutside" class="aform_form-link-wrapper">
@@ -7,7 +7,16 @@
 					<input
 						v-model="searchText"
 						type="text"
-						class="aform_input-field"
+						role="combobox"
+						autocomplete="off"
+						aria-autocomplete="list"
+						:class="['aform_input-field', { 'aform_input-field--embedded': embedded }]"
+						:placeholder="placeholder"
+						:aria-label="ariaLabel"
+						:required="required"
+						:aria-expanded="dropdownOpen"
+						:aria-controls="dropdownOpen ? listboxId : undefined"
+						:aria-activedescendant="activeIndex === null ? undefined : `${listboxId}-opt-${activeIndex}`"
 						:disabled="disabled || mode === 'read'"
 						@input="onInput"
 						@focus="onFocus"
@@ -17,7 +26,7 @@
 						@keydown.esc="closeDropdown"
 						@keydown.tab="closeDropdown" />
 					<button
-						v-if="hasValidId && !disabled"
+						v-if="hasValidId && !disabled && !embedded"
 						type="button"
 						class="aform_form-btn"
 						@click="handleNavigate"
@@ -25,27 +34,30 @@
 						<span>{{ icon === 'chevron-right' ? '›' : '→' }}</span>
 					</button>
 				</div>
-				<ul v-if="dropdownOpen" class="autocomplete-results">
+				<ul v-if="dropdownOpen" :id="listboxId" class="autocomplete-results" role="listbox" :aria-label="ariaLabel">
 					<li v-if="loading" class="autocomplete-result loading">Loading…</li>
 					<li
 						v-for="(option, i) in dropdownResults"
 						v-else
+						:id="`${listboxId}-opt-${i}`"
 						:key="String(option.id)"
+						role="option"
+						:aria-selected="i === activeIndex"
 						class="autocomplete-result"
 						:class="{ 'is-active': i === activeIndex }"
 						@mousedown.prevent="selectOption(option)">
-						{{ option.displayText ?? String(option.id) }}
+						<slot name="option" :option="option">{{ option.displayText ?? String(option.id) }}</slot>
 					</li>
 				</ul>
 			</div>
-			<label v-if="label" class="aform_field-label">{{ label }}</label>
+			<label v-if="label && !embedded" class="aform_field-label">{{ label }}</label>
 		</template>
 	</div>
 </template>
 
 <script setup lang="ts">
 import { vOnClickOutside } from '@vueuse/components'
-import { computed, inject, ref, watch } from 'vue'
+import { computed, inject, ref, useId, watch } from 'vue'
 
 import type { AFormLinkNavigator, AFormLinkValue, ComponentProps } from '../../types'
 import { deserializeFunction } from '../../utils/deserialize'
@@ -53,12 +65,17 @@ import { deserializeFunction } from '../../utils/deserialize'
 const {
 	label,
 	mode,
+	uuid,
+	required,
 	doctype = undefined,
 	formatter = undefined,
 	icon = 'arrow-right',
 	disabled = false,
 	filterFunction = undefined,
 	isAsync = false,
+	embedded = false,
+	placeholder = undefined,
+	ariaLabel = undefined,
 } = defineProps<
 	ComponentProps & {
 		doctype?: string
@@ -67,10 +84,24 @@ const {
 		disabled?: boolean
 		filterFunction?: string | ((search: string) => AFormLinkValue[] | Promise<AFormLinkValue[]>)
 		isAsync?: boolean
+		// Bare rendering for compositing into another component's own bordered container
+		// (e.g. ACurrencyInput's merged amount+currency group): suppresses this component's
+		// own outline/border and floating label so the parent supplies both exactly once.
+		embedded?: boolean
+		placeholder?: string
+		// Accessible name for the search input. Needed in `embedded` mode, where the visible
+		// <label> is suppressed and a placeholder is not a dependable accessible name — it is
+		// not exposed consistently across screen readers and vanishes once a value is picked.
+		ariaLabel?: string
 	}
 >()
 
-const modelValue = defineModel<AFormLinkValue>({ default: { id: '', displayText: '' } })
+// Ties the input to its listbox and to the active option (aria-controls / aria-activedescendant).
+// `uuid` is per-field when AForm supplies it; the fallback keeps the ids unique for a standalone
+// mount so two pickers on one page can't cross-wire their ARIA relationships.
+const listboxId = `${uuid ?? `aform-link-${useId()}`}-listbox`
+
+const modelValue = defineModel<AFormLinkValue>({ default: () => ({ id: '', displayText: '' }) })
 
 const hasValidId = computed(() => {
 	const id = modelValue.value?.id
@@ -115,12 +146,14 @@ watch(
 	async id => {
 		if (!id || modelValue.value.displayText) return
 		try {
+			let match: AFormLinkValue | undefined
 			let displayText: string | undefined
 			if (filterFunction) {
 				const fn: FilterFn =
 					typeof filterFunction === 'string' ? deserializeFunction<FilterFn>(filterFunction) : filterFunction
 				const results = await fn(String(id))
-				displayText = results.find(r => String(r.id) === String(id))?.displayText
+				match = results.find(r => String(r.id) === String(id))
+				displayText = match?.displayText
 				if (displayText === undefined) {
 					console.warn(
 						`[AFormLink] filterFunction returned no matching result for id "${id}". ` +
@@ -131,8 +164,17 @@ watch(
 				displayText = (await resolver(doctype, id.toString())) ?? undefined
 			}
 			if (displayText) {
-				searchText.value = displayText
-				modelValue.value = { ...modelValue.value, displayText }
+				// Merge the whole matched record, not just its display text — the extra properties
+				// an AFormLinkValue carries are part of the value (ACurrencyInput's `symbol`, which
+				// its formatter renders, is one). `id` is pinned to the value we already hold so a
+				// loosely-typed match (1 vs '1') can't change the FK's type underneath the record.
+				const resolved: AFormLinkValue = { ...modelValue.value, ...match, id: modelValue.value.id, displayText }
+				// Format for the same reason selectOption does: the input shows `formatter`'s output
+				// everywhere else (initial render, blur), so assigning the raw displayText here would
+				// make a value that arrived as a bare id render differently from the identical value
+				// picked by hand — e.g. "Euro" instead of "€".
+				searchText.value = formatter ? formatter(resolved) : displayText
+				modelValue.value = resolved
 			}
 		} catch {
 			// silent — fall back to showing the raw id
@@ -184,7 +226,11 @@ const onInput = () => openDropdown(searchText.value)
 
 const selectOption = (option: AFormLinkValue) => {
 	modelValue.value = option
-	searchText.value = option.displayText ?? String(option.id)
+	// Format `option` directly rather than reading back displayedText/modelValue: under a real
+	// two-way v-model (e.g. ACurrencyInput binding to a computed with a side-effecting setter),
+	// modelValue.value still reflects the *prop* until the parent's update round-trips back,
+	// so reading it synchronously here would show stale (pre-selection) text for a tick.
+	searchText.value = formatter ? formatter(option) : (option.displayText ?? String(option.id))
 	dropdownOpen.value = false
 	activeIndex.value = null
 }
@@ -227,6 +273,27 @@ const selectCurrent = () => {
 	min-width: 0;
 }
 
+.aform_form-element--embedded {
+	min-width: 0;
+	flex-grow: 0;
+}
+
+/* Embedded mode: the host component's own container supplies the border, so this input
+   goes borderless and inherits the host's padding scale instead of the standalone default. */
+.aform_input-field--embedded {
+	outline: none;
+	background: transparent;
+	padding: 0.5ch 1ch;
+}
+
+/* Only in embedded mode is the trigger deliberately narrower than its options (e.g. a currency
+   symbol box): let the dropdown grow past it rather than truncate. Standalone pickers keep the
+   dropdown flush with the input, so a long display text can't overhang a narrow form column. */
+.aform_form-element--embedded .autocomplete-results {
+	min-width: 100%;
+	width: max-content;
+}
+
 /* Give the button the same outline as the input, then slide it 2px left so the outlines
    overlap exactly at the join: input right outline sits at (input_right - 1px),
    button left outline also sits at (button_left + 1px) = (input_right - 2px + 1px) = same pixel. */

package/src/components/form/AQuantityInput.vue

@@ -106,7 +106,7 @@ const {
 >()
 
 const modelValue = defineModel<QuantityValue>({
-	default: { qty: 0, uom: '', stockQty: 0, stockUom: '', conversionFactor: 1 },
+	default: () => ({ qty: 0, uom: '', stockQty: 0, stockUom: '', conversionFactor: 1 }),
 })
 
 const uoms = computed(() => options.uoms ?? [])
@@ -148,7 +148,7 @@ const uom = computed({
 	set: (value: string) => recompute(modelValue.value?.qty ?? 0, value),
 })
 
-const qtyNavigationKeys = [
+const qtyNavigationKeys = new Set([
 	'Backspace',
 	'Delete',
 	'Tab',
@@ -160,11 +160,11 @@ const qtyNavigationKeys = [
 	'ArrowDown',
 	'Home',
 	'End',
-]
+])
 
 const onQtyKeydown = (event: KeyboardEvent) => {
 	if (event.ctrlKey || event.metaKey || event.altKey) return
-	if (qtyNavigationKeys.includes(event.key)) return
+	if (qtyNavigationKeys.has(event.key)) return
 	if (/^[0-9]$/.test(event.key)) return
 	const input = event.target as HTMLInputElement
 	if (event.key === '.' && !input.value.includes('.')) return

package/src/index.ts

@@ -4,6 +4,7 @@ import { install as installATable } from '@stonecrop/atable'
 import type { App } from 'vue'
 
 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 ADatePicker from './components/form/ADatePicker.vue'
@@ -33,6 +34,7 @@ function install(app: App /* options */) {
 	app.use(installATable) // Install ATable components for use within AForm
 
 	app.component('ACheckbox', ACheckbox)
+	app.component('ACurrencyInput', ACurrencyInput)
 	app.component('ADate', ADate)
 	app.component('ADropdown', ADropdown)
 	app.component('ADatePicker', ADatePicker)
@@ -53,6 +55,7 @@ function install(app: App /* options */) {
 
 export {
 	ACheckbox,
+	ACurrencyInput,
 	ADate,
 	ADropdown,
 	ADatePicker,

package/src/types/index.ts

@@ -268,3 +268,42 @@ export interface QuantityOptions {
 	/** Conversion factor lookup for each non-stock UOM, relative to `stockUom` (which is implicitly `1`) */
 	conversionFactors?: Record<string, number>
 }
+
+/**
+ * The value shape for ACurrencyInput — an amount paired with its currency (an
+ * {@link AFormLinkValue} FK reference), plus the derived base-currency-equivalent amount.
+ * `exchangeRate` is carried on the value so it round-trips with the record even though it is
+ * never directly edited by the user.
+ * @public
+ */
+export interface CurrencyValue {
+	/** The entered amount, in `currency` units */
+	amount: number
+	/** FK reference to the Currency doctype the user entered `amount` in */
+	currency: AFormLinkValue
+	/** `amount` converted into `baseCurrency` units — `amount * exchangeRate` */
+	baseAmount: number
+	/** The record's base currency — fixed, not user-editable */
+	baseCurrency: AFormLinkValue
+	/** Multiplier from `currency` to `baseCurrency` — hidden from the UI, drives `baseAmount` */
+	exchangeRate: number
+}
+
+/**
+ * Type-specific configuration for ACurrencyInput, passed via the field's `options` property.
+ * @public
+ */
+export interface CurrencyOptions {
+	/** Currency doctype name, used for FK resolution via `aformLinkResolver`. The currency picker is embedded, so it renders no navigate button. */
+	doctype?: string
+	/** The record's base currency — fixed, not user-editable. A bare id resolves to displayText via `aformLinkResolver`. */
+	baseCurrency?: AFormLinkValue | string
+	/** Exchange rate lookup for each non-base currency id, relative to `baseCurrency` (which is implicitly `1`) */
+	exchangeRates?: Record<string, number>
+	/** Decimal places to round the derived `baseAmount` to — the base currency's scale (JPY carries 0, most carry 2, KWD 3). Applies only to `baseAmount`; the entered `amount` is left as typed. Omit to round only enough to shed binary floating-point noise, which never discards a digit the rate actually produced. A non-integer or out-of-range value falls back to that default. */
+	precision?: number
+	/** Search function backing the `currency` autocomplete dropdown — see AFormLink's `filterFunction` */
+	filterFunction?: string | ((search: string) => AFormLinkValue[] | Promise<AFormLinkValue[]>)
+	/** Whether `filterFunction` results should show a loading state — see AFormLink's `isAsync` */
+	isAsync?: boolean
+}