@stonecrop/aform 0.31.0 → 0.32.0

package/src/components/form/AQuantityInput.vue

@@ -1,349 +0,0 @@
-<template>
-	<div class="aform_form-element aquantity">
-		<template v-if="mode === 'display'">
-			<span class="aform_display-value">{{ displayText }}</span>
-			<label class="aform_field-label">{{ label }}</label>
-		</template>
-		<template v-else>
-			<div class="aquantity__row">
-				<div class="aquantity__field aquantity__field--qty">
-					<div class="aquantity__group">
-						<input
-							:id="uuid"
-							v-model.number="qty"
-							class="aquantity__qty"
-							type="number"
-							:disabled="mode === 'read'"
-							:required="required"
-							@keydown="onQtyKeydown"
-							@paste="onQtyPaste" />
-						<div v-on-click-outside="closeDropdown" class="aquantity__uom">
-							<button
-								:id="`${uuid}-uom`"
-								type="button"
-								class="aquantity__uom-toggle"
-								:disabled="mode === 'read'"
-								aria-haspopup="listbox"
-								:aria-expanded="dropdown.open"
-								:aria-activedescendant="
-									dropdown.open && dropdown.activeIndex >= 0 ? `${uuid}-uom-opt-${dropdown.activeIndex}` : undefined
-								"
-								@click="toggleDropdown"
-								@keydown.down.prevent="moveActive(1)"
-								@keydown.up.prevent="moveActive(-1)"
-								@keydown.enter.prevent="selectActive"
-								@keydown.esc="closeDropdown">
-								<span class="aquantity__uom-value">{{ uom || uomLabel }}</span>
-								<span class="aquantity__caret" aria-hidden="true"></span>
-							</button>
-							<ul v-show="dropdown.open" class="aquantity__uom-menu" role="listbox" :aria-label="uomLabel">
-								<li
-									v-for="(option, i) in uoms"
-									:id="`${uuid}-uom-opt-${i}`"
-									:key="option"
-									role="option"
-									:aria-selected="option === uom"
-									class="aquantity__uom-option"
-									:class="{ 'is-active': i === dropdown.activeIndex }"
-									@mouseenter="dropdown.activeIndex = i"
-									@click="selectUom(option)">
-									{{ option }}
-								</li>
-							</ul>
-						</div>
-					</div>
-					<label class="aform_field-label" :for="uuid">{{ label }}</label>
-				</div>
-			</div>
-			<div class="aquantity__row aquantity__row--stock">
-				<div class="aquantity__field aquantity__field--stock-uom">
-					<input :value="modelValue.stockUom" class="aform_input-field aquantity__stock-field" type="text" disabled />
-					<label class="aform_field-label">{{ stockUomLabel }}</label>
-				</div>
-				<div class="aquantity__field aquantity__field--stock-qty">
-					<input :value="modelValue.stockQty" class="aform_input-field aquantity__stock-field" type="number" disabled />
-					<label class="aform_field-label">{{ stockQtyLabel }}</label>
-				</div>
-				<div class="aquantity__field aquantity__field--conversion">
-					<input
-						:value="modelValue.conversionFactor"
-						class="aform_input-field aquantity__stock-field"
-						type="number"
-						disabled />
-					<label class="aform_field-label">{{ conversionFactorLabel }}</label>
-				</div>
-			</div>
-			<p v-show="validation.errorMessage" class="aform_error" v-html="validation.errorMessage"></p>
-		</template>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { vOnClickOutside } from '@vueuse/components'
-import { computed, reactive } from 'vue'
-
-import type { ComponentProps, QuantityOptions, QuantityValue } from '../../types'
-
-const {
-	label,
-	required,
-	mode,
-	uuid,
-	validation = { errorMessage: '&nbsp;' },
-	options = {},
-	uomLabel = 'UOM',
-	stockUomLabel = 'Stock UOM',
-	stockQtyLabel = 'Stock Qty',
-	conversionFactorLabel = 'Conversion Factor',
-} = defineProps<
-	ComponentProps & {
-		options?: QuantityOptions
-		uomLabel?: string
-		stockUomLabel?: string
-		stockQtyLabel?: string
-		conversionFactorLabel?: string
-	}
->()
-
-const modelValue = defineModel<QuantityValue>({
-	default: () => ({ qty: 0, uom: '', stockQty: 0, stockUom: '', conversionFactor: 1 }),
-})
-
-const uoms = computed(() => options.uoms ?? [])
-
-// Round to shed binary floating-point noise (e.g. 0.1 * 3 → 0.30000000000000004) while
-// preserving any legitimate decimal places.
-const roundQty = (value: number): number => Number(value.toFixed(6))
-
-const resolveConversionFactor = (uom: string): number => {
-	const stockUom = options.stockUom ?? modelValue.value.stockUom
-	if (!uom || uom === stockUom) return 1
-	const mapped = options.conversionFactors?.[uom]
-	if (mapped !== undefined) return mapped
-	// UOM absent from the conversion map: keep the stored factor only when the unit is
-	// unchanged (e.g. editing qty on a loaded value, so the factor round-trips). Switching
-	// to a new, unmapped unit resets to 1 rather than silently reusing the previous factor.
-	if (uom === modelValue.value.uom) return modelValue.value.conversionFactor ?? 1
-	return 1
-}
-
-const recompute = (qty: number, uom: string) => {
-	const conversionFactor = resolveConversionFactor(uom)
-	modelValue.value = {
-		qty,
-		uom,
-		conversionFactor,
-		stockUom: options.stockUom ?? modelValue.value.stockUom,
-		stockQty: roundQty(qty * conversionFactor),
-	}
-}
-
-const qty = computed({
-	get: () => modelValue.value?.qty ?? 0,
-	set: (value: number) => recompute(value, modelValue.value?.uom ?? ''),
-})
-
-const uom = computed({
-	get: () => modelValue.value?.uom ?? '',
-	set: (value: string) => recompute(modelValue.value?.qty ?? 0, value),
-})
-
-const qtyNavigationKeys = new Set([
-	'Backspace',
-	'Delete',
-	'Tab',
-	'Escape',
-	'Enter',
-	'ArrowLeft',
-	'ArrowRight',
-	'ArrowUp',
-	'ArrowDown',
-	'Home',
-	'End',
-])
-
-const onQtyKeydown = (event: KeyboardEvent) => {
-	if (event.ctrlKey || event.metaKey || event.altKey) 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
-	event.preventDefault()
-}
-
-const onQtyPaste = (event: ClipboardEvent) => {
-	const pasted = event.clipboardData?.getData('text') ?? ''
-	if (!/^\d*\.?\d*$/.test(pasted)) event.preventDefault()
-}
-
-const dropdown = reactive({ open: false, activeIndex: -1 })
-
-const openDropdown = () => {
-	dropdown.activeIndex = Math.max(uoms.value.indexOf(uom.value), 0)
-	dropdown.open = true
-}
-
-const closeDropdown = () => {
-	dropdown.open = false
-}
-
-const toggleDropdown = () => {
-	if (dropdown.open) closeDropdown()
-	else openDropdown()
-}
-
-const selectUom = (value: string) => {
-	uom.value = value
-	closeDropdown()
-}
-
-const moveActive = (delta: number) => {
-	if (!dropdown.open) {
-		openDropdown()
-		return
-	}
-	const length = uoms.value.length
-	if (!length) return
-	dropdown.activeIndex = (dropdown.activeIndex + delta + length) % length
-}
-
-const selectActive = () => {
-	if (!dropdown.open) {
-		openDropdown()
-		return
-	}
-	const option = uoms.value[dropdown.activeIndex]
-	if (option !== undefined) selectUom(option)
-}
-
-const showStock = computed(() => {
-	const v = modelValue.value
-	return !!v?.stockUom && (v.uom !== v.stockUom || v.qty !== v.stockQty)
-})
-
-const displayText = computed(() => {
-	const v = modelValue.value
-	if (!v || !v.uom) return '—'
-	const base = `${v.qty} ${v.uom}`
-	return showStock.value ? `${base} (${v.stockQty} ${v.stockUom})` : base
-})
-</script>
-
-<style scoped>
-.aquantity__row {
-	display: flex;
-	gap: 1ch;
-}
-
-.aquantity__row--stock {
-	margin-top: 1.5rem;
-}
-
-.aquantity__field {
-	position: relative;
-	flex: 1;
-	min-width: 0;
-}
-
-.aquantity__group {
-	display: flex;
-	align-items: stretch;
-	width: 100%;
-	border: 1px solid var(--sc-input-border-color);
-	border-radius: 0.25rem;
-}
-
-.aquantity__group:focus-within {
-	border-color: var(--sc-input-active-border-color);
-}
-
-.aquantity__qty {
-	flex: 1;
-	min-width: 0;
-	border: none;
-	outline: none;
-	padding: 0.5ch 1ch;
-	background: transparent;
-	border-radius: 0.25rem 0 0 0.25rem;
-	appearance: textfield;
-	-moz-appearance: textfield;
-}
-
-.aquantity__qty::-webkit-outer-spin-button,
-.aquantity__qty::-webkit-inner-spin-button {
-	appearance: none;
-	-webkit-appearance: none;
-	margin: 0;
-}
-
-.aquantity__uom {
-	position: relative;
-	flex: 0 0 auto;
-	border-left: 1px solid var(--sc-input-border-color);
-}
-
-.aquantity__uom-toggle {
-	display: flex;
-	align-items: center;
-	gap: 0.75ch;
-	height: 100%;
-	padding: 0.5ch 1ch;
-	background: var(--sc-gray-5);
-	border: none;
-	border-radius: 0 0.25rem 0.25rem 0;
-	white-space: nowrap;
-	cursor: pointer;
-}
-
-.aquantity__uom-toggle:disabled {
-	cursor: not-allowed;
-	color: var(--sc-gray-50);
-}
-
-.aquantity__caret {
-	display: inline-block;
-	width: 0;
-	height: 0;
-	border-left: 0.3em solid transparent;
-	border-right: 0.3em solid transparent;
-	border-top: 0.3em solid currentColor;
-}
-
-.aquantity__uom-menu {
-	position: absolute;
-	top: 100%;
-	right: 0;
-	z-index: 100;
-	min-width: 100%;
-	margin: 0.15rem 0 0 0;
-	padding: 0.25rem 0;
-	list-style: none;
-	background: var(--sc-input-field-background);
-	border: 1px solid var(--sc-input-active-border-color);
-	border-radius: 0.25rem;
-}
-
-.aquantity__uom-option {
-	padding: 0.4ch 1ch;
-	white-space: nowrap;
-	cursor: pointer;
-}
-
-.aquantity__uom-option.is-active,
-.aquantity__uom-option:hover {
-	background-color: var(--sc-row-color-zebra-light);
-}
-
-.aquantity__stock-field {
-	width: 100%;
-	font-size: 1rem;
-	padding: 0.5ch 1ch;
-	border: 1px solid var(--sc-input-border-color);
-	border-radius: 0.25rem;
-	outline: none;
-}
-
-.aquantity__stock-field:disabled {
-	color: var(--sc-gray-50);
-}
-</style>

package/src/components/form/ASegmentedControl.vue

@@ -1,342 +0,0 @@
-<template>
-	<div
-		class="aform_form-element aform_segmented-control"
-		:class="{
-			'aform_segmented-control--xs': size === 'xs',
-			'aform_segmented-control--sm': size === 'sm',
-			'aform_segmented-control--equal': equal,
-		}">
-		<template v-if="mode === 'display'">
-			<label class="aform_field-label" :class="{ 'aform_segmented-sr-label': hideLabel }">{{ label }}</label>
-			<ABadge
-				v-if="displayBadge"
-				class="aform_display-value aform_segmented-display-badge"
-				:value="displayBadgeValue"
-				:options="options"
-				presentation="input-accent" />
-			<span v-else class="aform_display-value">{{ displayText }}</span>
-		</template>
-		<template v-else>
-			<label :id="labelId" class="aform_field-label" :class="{ 'aform_segmented-sr-label': hideLabel }">
-				{{ label }}
-			</label>
-			<div
-				:role="multiple ? 'group' : 'radiogroup'"
-				class="aform_segmented-track"
-				:aria-labelledby="groupAriaLabel ? undefined : labelId"
-				:aria-label="groupAriaLabel"
-				:aria-busy="busy || undefined">
-				<label
-					v-for="choice in choices"
-					:key="choice"
-					class="aform_segmented-segment"
-					:class="segmentClasses(choice)"
-					:style="segmentStyle(choice)"
-					:data-segment-value="choice">
-					<input
-						v-if="multiple"
-						v-model="selectedMany"
-						type="checkbox"
-						class="aform_segmented-input"
-						:name="groupName"
-						:value="choice"
-						:disabled="mode === 'read'" />
-					<input
-						v-else
-						v-model="selected"
-						type="radio"
-						class="aform_segmented-input"
-						:name="groupName"
-						:value="choice"
-						:disabled="mode === 'read'" />
-					<span class="aform_segmented-label">{{ segmentLabel(choice) }}</span>
-				</label>
-			</div>
-			<p v-show="errorText" class="aform_error" v-html="errorText"></p>
-		</template>
-	</div>
-</template>
-
-<script setup lang="ts">
-import type { BadgeVariant, FieldOptions } from '@stonecrop/schema'
-import { hasBadgeOptions, lookupBadge, selectChoices } from '@stonecrop/schema'
-import { computed, useId, type CSSProperties } from 'vue'
-
-import type { ComponentProps } from '../../types'
-import ABadge from './ABadge.vue'
-
-const {
-	label,
-	options = undefined,
-	mode,
-	uuid,
-	errors,
-	validation = { errorMessage: '' },
-	size = 'sm',
-	equal = false,
-	hideLabel = false,
-	ariaLabel = undefined,
-	busy = false,
-	multiple = false,
-} = defineProps<
-	ComponentProps & {
-		options?: FieldOptions
-		size?: 'xs' | 'sm'
-		equal?: boolean
-		hideLabel?: boolean
-		ariaLabel?: string
-		busy?: boolean
-		multiple?: boolean
-	}
->()
-
-const selected = defineModel<string | string[]>({ default: '' })
-
-const selectedMany = computed({
-	get: () => (Array.isArray(selected.value) ? selected.value : []),
-	set: (value: string[]) => {
-		selected.value = value
-	},
-})
-
-const errorText = computed(() => (errors?.length ? errors.join('; ') : (validation.errorMessage ?? '')))
-
-const fallbackId = useId()
-const groupName = computed(() => uuid ?? `aform-segmented-${fallbackId}`)
-const labelId = computed(() => `${groupName.value}-label`)
-
-// aria-labelledby outranks aria-label in the accessible-name algorithm, so the two are mutually
-// exclusive here: emitting both would silently leave `ariaLabel` inert. It only applies while the
-// label element is visually hidden — overriding a *visible* label would break WCAG 2.5.3.
-const groupAriaLabel = computed(() => (hideLabel ? ariaLabel : undefined))
-
-const choices = computed(() => selectChoices(options))
-const badgeOptions = computed(() => hasBadgeOptions(options))
-
-function segmentLabel(choice: string): string {
-	return lookupBadge(options, choice)?.label ?? choice
-}
-
-function segmentVariant(choice: string): BadgeVariant {
-	return lookupBadge(options, choice)?.variant ?? 'neutral'
-}
-
-function isChoiceSelected(choice: string): boolean {
-	if (multiple) return selectedMany.value.includes(choice)
-	return selected.value === choice
-}
-
-function segmentClasses(choice: string): Record<string, boolean> {
-	if (!badgeOptions.value) return {}
-	return {
-		'aform_segmented-segment--badge': true,
-		[`aform_segmented-segment--${segmentVariant(choice)}`]: isChoiceSelected(choice),
-	}
-}
-
-function segmentStyle(choice: string): CSSProperties {
-	if (!badgeOptions.value || !isChoiceSelected(choice)) return {}
-	const color = lookupBadge(options, choice)?.color
-	if (!color) return {}
-	return {
-		'--sc-badge-bg': color,
-		'--sc-badge-text': color,
-	} as CSSProperties
-}
-
-const displayText = computed(() => {
-	if (multiple) {
-		return selectedMany.value.map(segmentLabel).filter(Boolean).join(', ')
-	}
-	const value = selected.value
-	if (typeof value !== 'string' || value === '') return ''
-	return segmentLabel(value)
-})
-
-const displayBadge = computed(() => {
-	if (!badgeOptions.value) return false
-	if (multiple) return selectedMany.value.length === 1
-	return typeof selected.value === 'string' && selected.value !== ''
-})
-
-const displayBadgeValue = computed(() => {
-	if (multiple) return selectedMany.value[0] ?? ''
-	return typeof selected.value === 'string' ? selected.value : ''
-})
-</script>
-
-<style scoped>
-.aform_segmented-control--xs.aform_form-element {
-	min-width: 0;
-	padding-top: 0;
-	max-width: none;
-}
-
-.aform_segmented-control--xs:not(:has(.aform_segmented-sr-label)) {
-	padding-top: 0.5rem;
-}
-
-.aform_segmented-sr-label {
-	position: absolute;
-	width: 1px;
-	height: 1px;
-	padding: 0;
-	margin: -1px;
-	overflow: hidden;
-	clip: rect(0, 0, 0, 0);
-	white-space: nowrap;
-	border: 0;
-}
-
-.aform_segmented-track {
-	display: inline-flex;
-	flex-wrap: wrap;
-	align-items: stretch;
-	gap: 0.125rem;
-	padding: 0.125rem;
-	width: auto;
-	min-width: 0;
-	min-height: 2rem;
-	outline: 1px solid var(--sc-input-border-color);
-	outline-offset: -1px;
-	border-radius: 0;
-	box-sizing: border-box;
-	background: var(--sc-input-field-disabled-background);
-	font-family: var(--sc-font-family);
-}
-
-.aform_segmented-control--xs .aform_segmented-track {
-	min-height: 1.5rem;
-	font-size: 0.875rem;
-}
-
-.aform_segmented-control--equal .aform_segmented-track {
-	display: flex;
-	width: 100%;
-}
-
-.aform_segmented-segment {
-	position: relative;
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	flex: none;
-	margin: 0;
-	padding: 0.125rem 0.5rem;
-	min-height: 1.5rem;
-	border-radius: 0;
-	color: var(--sc-input-label-color);
-	font-family: inherit;
-	font-size: inherit;
-	font-weight: 400;
-	line-height: 1.25;
-	cursor: pointer;
-	user-select: none;
-	box-sizing: border-box;
-}
-
-.aform_segmented-control--sm .aform_segmented-segment {
-	min-height: 1.75rem;
-	padding: 0.125rem 0.75rem;
-	font-size: var(--sc-font-size);
-}
-
-.aform_segmented-control--equal .aform_segmented-segment {
-	flex: 1 1 0;
-}
-
-.aform_segmented-input {
-	position: absolute;
-	inline-size: 1px;
-	block-size: 1px;
-	padding: 0;
-	margin: -1px;
-	overflow: hidden;
-	clip: rect(0, 0, 0, 0);
-	white-space: nowrap;
-	border: 0;
-}
-
-.aform_segmented-label {
-	pointer-events: none;
-}
-
-.aform_segmented-segment:not(.aform_segmented-segment--badge):has(.aform_segmented-input:checked) {
-	background: var(--sc-input-field-background);
-	color: var(--sc-cell-text-color);
-	font-weight: 500;
-}
-
-.aform_segmented-segment--badge:has(.aform_segmented-input:checked) {
-	font-weight: 500;
-}
-
-.aform_segmented-segment--badge:has(.aform_segmented-input:checked).aform_segmented-segment--neutral {
-	background: var(--sc-badge-neutral-bg);
-	color: var(--sc-badge-neutral-text);
-}
-
-.aform_segmented-segment--badge:has(.aform_segmented-input:checked).aform_segmented-segment--success {
-	background: var(--sc-badge-success-bg);
-	color: var(--sc-badge-success-text);
-}
-
-.aform_segmented-segment--badge:has(.aform_segmented-input:checked).aform_segmented-segment--warning {
-	background: var(--sc-badge-warning-bg);
-	color: var(--sc-badge-warning-text);
-}
-
-.aform_segmented-segment--badge:has(.aform_segmented-input:checked).aform_segmented-segment--danger {
-	background: var(--sc-badge-danger-bg);
-	color: var(--sc-badge-danger-text);
-}
-
-.aform_segmented-segment--badge:has(.aform_segmented-input:checked).aform_segmented-segment--brand {
-	background: var(--sc-badge-brand-bg);
-	color: var(--sc-badge-brand-text);
-}
-
-.aform_segmented-segment--badge:has(.aform_segmented-input:checked)[style*='--sc-badge-bg'] {
-	background: var(--sc-badge-bg);
-	color: var(--sc-badge-text);
-}
-
-.aform_segmented-segment:has(.aform_segmented-input:focus-visible) {
-	outline: 1px solid var(--sc-input-active-border-color);
-	outline-offset: -1px;
-}
-
-.aform_segmented-segment:hover:has(.aform_segmented-input:not(:disabled):not(:checked)) {
-	background: color-mix(in srgb, var(--sc-input-field-background) 50%, transparent);
-}
-
-.aform_segmented-segment:has(.aform_segmented-input:disabled) {
-	cursor: not-allowed;
-	opacity: 0.5;
-}
-
-.aform_segmented-track:has(.aform_segmented-input:focus-visible) {
-	outline-color: var(--sc-input-active-border-color);
-}
-
-.aform_segmented-display-badge {
-	display: block;
-	padding: 0.5rem;
-	min-height: 2rem;
-	box-sizing: border-box;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-	.aform_segmented-segment {
-		transition:
-			background-color 0.1s ease-out,
-			color 0.1s ease-out;
-	}
-}
-
-@media (prefers-reduced-motion: reduce) {
-	.aform_segmented-segment {
-		transition: none;
-	}
-}
-</style>