@stonecrop/aform 0.13.14 → 0.15.0

package/src/components/form/ADatePicker.vue

@@ -2,74 +2,78 @@
 	<template v-if="mode === 'display' || mode === 'read'">
 		<span class="aform_display-value">{{ date ? new Date(date).toLocaleDateString() : '' }}</span>
 		<label v-if="label">{{ label }}</label>
+		<p v-show="errorText" class="aform_error" v-html="errorText"></p>
+	</template>
+	<template v-else>
+		<div ref="datepicker" class="adatepicker" tabindex="0">
+			<table>
+				<tbody>
+					<tr>
+						<td id="previous-month-btn" :tabindex="-1" @click="previousMonth">&lt;</td>
+						<th colspan="5" :tabindex="-1">{{ monthAndYear }}</th>
+						<td id="next-month-btn" :tabindex="-1" @click="nextMonth">&gt;</td>
+					</tr>
+					<tr v-if="selectRange">
+						<td colspan="7">
+							<div class="date-input">
+								<input
+									ref="start-date-input"
+									:value="getStartDate"
+									class="date-input-start aform_input-field"
+									type="text"
+									placeholder="start date"
+									@blur="enterInputDate()"
+									@keydown="enterDate" />
+								<div>-</div>
+								<input
+									ref="end-date-input"
+									:value="getEndDate"
+									class="date-input-end aform_input-field"
+									type="text"
+									placeholder="end date"
+									@blur="enterInputDate()"
+									@keydown="enterDate" />
+							</div>
+							<!-- {{ formattedDateRange }} -->
+						</td>
+					</tr>
+					<tr class="days-header">
+						<td>M</td>
+						<td>T</td>
+						<td>W</td>
+						<td>T</td>
+						<td>F</td>
+						<td>S</td>
+						<td>S</td>
+					</tr>
+					<tr v-for="rowNo in numberOfRows" :key="rowNo">
+						<!-- the 'ref' key is currently only used for test references -->
+						<td
+							v-for="colNo in numberOfColumns"
+							ref="celldate"
+							:key="getCurrentCell(rowNo, colNo)"
+							class="date-cell"
+							:contenteditable="false"
+							:spellcheck="false"
+							:tabindex="0"
+							:class="{
+								todaysDate: isTodaysDate(getCurrentDate(rowNo, colNo)),
+								selectedDate: isSelectedDate(getCurrentDate(rowNo, colNo)),
+								withinRange: selectRange ? isInDateRange(getCurrentDate(rowNo, colNo)) : false,
+								startDate: selectRange ? isStartDate(getCurrentDate(rowNo, colNo)) : false,
+								endDate: selectRange ? isEndDate(getCurrentDate(rowNo, colNo)) : false,
+							}"
+							@click.prevent.stop="selectDate(getCurrentCell(rowNo, colNo))"
+							@keydown.enter="selectDate(getCurrentCell(rowNo, colNo))"
+							@mouseover="hoverDate(getCurrentCell(rowNo, colNo))">
+							{{ new Date(getCurrentDate(rowNo, colNo)).getDate() }}
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+		<p v-show="errorText" class="aform_error" v-html="errorText"></p>
 	</template>
-	<div v-else ref="datepicker" class="adatepicker" tabindex="0">
-		<table>
-			<tbody>
-				<tr>
-					<td id="previous-month-btn" :tabindex="-1" @click="previousMonth">&lt;</td>
-					<th colspan="5" :tabindex="-1">{{ monthAndYear }}</th>
-					<td id="next-month-btn" :tabindex="-1" @click="nextMonth">&gt;</td>
-				</tr>
-				<tr v-if="selectRange">
-					<td colspan="7">
-						<div class="date-input">
-							<input
-								ref="start-date-input"
-								:value="getStartDate"
-								class="date-input-start aform_input-field"
-								type="text"
-								placeholder="start date"
-								@blur="enterInputDate()"
-								@keydown="enterDate" />
-							<div>-</div>
-							<input
-								ref="end-date-input"
-								:value="getEndDate"
-								class="date-input-end aform_input-field"
-								type="text"
-								placeholder="end date"
-								@blur="enterInputDate()"
-								@keydown="enterDate" />
-						</div>
-						<!-- {{ formattedDateRange }} -->
-					</td>
-				</tr>
-				<tr class="days-header">
-					<td>M</td>
-					<td>T</td>
-					<td>W</td>
-					<td>T</td>
-					<td>F</td>
-					<td>S</td>
-					<td>S</td>
-				</tr>
-				<tr v-for="rowNo in numberOfRows" :key="rowNo">
-					<!-- the 'ref' key is currently only used for test references -->
-					<td
-						v-for="colNo in numberOfColumns"
-						ref="celldate"
-						:key="getCurrentCell(rowNo, colNo)"
-						class="date-cell"
-						:contenteditable="false"
-						:spellcheck="false"
-						:tabindex="0"
-						:class="{
-							todaysDate: isTodaysDate(getCurrentDate(rowNo, colNo)),
-							selectedDate: isSelectedDate(getCurrentDate(rowNo, colNo)),
-							withinRange: selectRange ? isInDateRange(getCurrentDate(rowNo, colNo)) : false,
-							startDate: selectRange ? isStartDate(getCurrentDate(rowNo, colNo)) : false,
-							endDate: selectRange ? isEndDate(getCurrentDate(rowNo, colNo)) : false,
-						}"
-						@click.prevent.stop="selectDate(getCurrentCell(rowNo, colNo))"
-						@keydown.enter="selectDate(getCurrentCell(rowNo, colNo))"
-						@mouseover="hoverDate(getCurrentCell(rowNo, colNo))">
-						{{ new Date(getCurrentDate(rowNo, colNo)).getDate() }}
-					</td>
-				</tr>
-			</tbody>
-		</table>
-	</div>
 </template>
 
 <script setup lang="ts">
@@ -82,7 +86,10 @@ import type { ComponentProps } from '../../types'
 const numberOfRows = 6
 const numberOfColumns = 7
 
-const { mode, label, selectRange = false } = defineProps<ComponentProps>()
+const { mode, label, selectRange = false, errors, validation = { errorMessage: '' } } = defineProps<ComponentProps>()
+
+// Dynamic trigger errors take precedence over a static schema errorMessage; empty means the slot hides.
+const errorText = computed(() => (errors?.length ? errors.join('; ') : (validation.errorMessage ?? '')))
 
 const date = defineModel<number | Date>({ default: new Date() })
 const selectedDate = ref(new Date(date.value))
@@ -351,7 +358,6 @@ defineExpose({ currentMonth, currentYear, selectedDate })
 </script>
 
 <style scoped>
-/* @import url('@stonecrop/themes/default.css'); */
 .adatepicker {
 	font-size: var(--sc-table-font-size);
 	display: inline-table;
@@ -432,4 +438,14 @@ defineExpose({ currentMonth, currentYear, selectedDate })
 	width: 50%;
 	padding: 2px;
 }
+
+/* Keep the field error in-flow below the calendar. The shared .aform_error is absolutely
+   positioned against a .aform_form-element anchor, which this grid 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/ADateRange.vue

@@ -17,7 +17,7 @@
 				@click="openPicker" />
 			<label :for="uuid">{{ label }}</label>
 
-			<p v-show="validation.errorMessage" v-html="validation.errorMessage"></p>
+			<p v-show="errorText" v-html="errorText"></p>
 
 			<ADateSelection
 				v-if="showPicker"
@@ -38,7 +38,10 @@ import type { ComponentProps } from '../../types'
 
 const fmt = (d: string) => new Date(d).toLocaleDateString()
 
-const { label = 'Date Range', mode, uuid, validation = { errorMessage: '&nbsp;' } } = defineProps<ComponentProps>()
+const { label = 'Date Range', mode, uuid, errors, validation = { errorMessage: '' } } = defineProps<ComponentProps>()
+
+// Dynamic trigger errors take precedence over a static schema errorMessage; empty means the slot hides.
+const errorText = computed(() => (errors?.length ? errors.join('; ') : (validation.errorMessage ?? '')))
 
 export interface DateRangeValue {
 	start_date: string | null

package/src/components/form/ADropdown.vue

@@ -2,6 +2,7 @@
 	<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">
@@ -31,12 +32,13 @@
 			</ul>
 			<label>{{ label }}</label>
 		</div>
+		<p v-show="errorText" class="aform_error" v-html="errorText"></p>
 	</div>
 </template>
 
 <script setup lang="ts">
 import { vOnClickOutside } from '@vueuse/components'
-import { reactive, ref } from 'vue'
+import { computed, reactive, ref } from 'vue'
 
 import type { ComponentProps } from '../../types'
 
@@ -46,6 +48,8 @@ const {
 	isAsync = false,
 	filterFunction = undefined,
 	mode,
+	errors,
+	validation = { errorMessage: '' },
 } = defineProps<
 	ComponentProps & {
 		options?: string[]
@@ -53,6 +57,9 @@ const {
 		filterFunction?: (search: string) => string[] | Promise<string[]>
 	}
 >()
+
+// Dynamic trigger errors take precedence over a static schema errorMessage; empty means the slot hides.
+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
@@ -219,4 +226,14 @@ 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/ANumericInput.vue

@@ -13,14 +13,20 @@
 				:disabled="mode === 'read'"
 				:required="required" />
 			<label class="aform_field-label" :for="uuid">{{ label }}</label>
-			<p v-show="validation.errorMessage" class="aform_error" v-html="validation.errorMessage"></p>
+			<p v-show="errorText" class="aform_error" v-html="errorText"></p>
 		</template>
 	</div>
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
+
 import { ComponentProps } from '../../types'
 
-const { label, required, mode, uuid, validation = { errorMessage: '&nbsp;' } } = defineProps<ComponentProps>()
+const { label, required, mode, uuid, errors, validation = { errorMessage: '' } } = defineProps<ComponentProps>()
+
+// Dynamic trigger errors take precedence over a static schema errorMessage; empty means the slot hides.
+const errorText = computed(() => (errors?.length ? errors.join('; ') : (validation.errorMessage ?? '')))
+
 const inputNumber = defineModel<number>()
 </script>

package/src/components/form/ATextInput.vue

@@ -14,18 +14,21 @@
 				:maxlength="mask ? (maskFilled ? mask.length : undefined) : undefined"
 				:required="required" />
 			<label class="aform_field-label" :for="uuid">{{ label }} </label>
-			<p v-show="validation.errorMessage" class="aform_error" v-html="validation.errorMessage"></p>
+			<p v-show="errorText" class="aform_error" v-html="errorText"></p>
 		</template>
 	</div>
 </template>
 
 <script setup lang="ts">
-import { /* inject, */ ref } from 'vue'
+import { /* inject, */ computed, ref } from 'vue'
 
 import { useStringMask as vMask } from '../../directives/mask'
 import { ComponentProps } from '../../types'
 
-const { label, mask, required, mode, uuid, validation = { errorMessage: '&nbsp;' } } = defineProps<ComponentProps>()
+const { label, mask, required, mode, uuid, errors, validation = { errorMessage: '' } } = defineProps<ComponentProps>()
+
+// Dynamic trigger errors take precedence over a static schema errorMessage; empty means the slot hides.
+const errorText = computed(() => (errors?.length ? errors.join('; ') : (validation.errorMessage ?? '')))
 
 // TODO: setup maskFilled as a computed property
 const maskFilled = ref(true)

package/src/components/form/ATextarea.vue

@@ -0,0 +1,31 @@
+<template>
+	<div class="aform_form-element">
+		<template v-if="mode === 'display'">
+			<span class="aform_display-value">{{ inputText ?? '' }}</span>
+			<label class="aform_field-label">{{ label }}</label>
+		</template>
+		<template v-else>
+			<textarea
+				:id="uuid"
+				v-model="inputText"
+				class="aform_input-field aform_textarea"
+				:disabled="mode === 'read'"
+				:required="required"></textarea>
+			<label class="aform_field-label" :for="uuid">{{ label }} </label>
+			<p v-show="errorText" class="aform_error" v-html="errorText"></p>
+		</template>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { ComponentProps } from '../../types'
+
+const { label, required, mode, uuid, errors, validation = { errorMessage: '' } } = defineProps<ComponentProps>()
+
+// Dynamic trigger errors take precedence over a static schema errorMessage; empty means the slot hides.
+const errorText = computed(() => (errors?.length ? errors.join('; ') : (validation.errorMessage ?? '')))
+
+const inputText = defineModel<number | string>()
+</script>

package/src/components/utilities/Login.vue

@@ -84,7 +84,6 @@ function onSubmit(event: Event) {
 </script>
 
 <style scoped>
-/* @import url('@stonecrop/themes/default.css'); */
 .login-container {
 	width: 100%;
 	position: relative;

package/src/index.ts

@@ -4,7 +4,6 @@ import { install as installATable } from '@stonecrop/atable'
 import type { App } from 'vue'
 
 import ACheckbox from './components/form/ACheckbox.vue'
-import AComboBox from './components/form/AComboBox.vue'
 import ADate from './components/form/ADate.vue'
 import ADropdown from './components/form/ADropdown.vue'
 import ADatePicker from './components/form/ADatePicker.vue'
@@ -18,6 +17,7 @@ import AForm from './components/AForm.vue'
 import AFormLink from './components/form/AFormLink.vue'
 import ANumericInput from './components/form/ANumericInput.vue'
 import ATextInput from './components/form/ATextInput.vue'
+import ATextarea from './components/form/ATextarea.vue'
 import Login from './components/utilities/Login.vue'
 export type * from './types'
 
@@ -30,7 +30,6 @@ function install(app: App /* options */) {
 	app.use(installATable) // Install ATable components for use within AForm
 
 	app.component('ACheckbox', ACheckbox)
-	app.component('AComboBox', AComboBox)
 	app.component('ADate', ADate)
 	app.component('ADropdown', ADropdown)
 	app.component('ADatePicker', ADatePicker)
@@ -43,12 +42,12 @@ function install(app: App /* options */) {
 	app.component('AFormLink', AFormLink)
 	app.component('ANumericInput', ANumericInput)
 	app.component('ATextInput', ATextInput)
+	app.component('ATextarea', ATextarea)
 	app.component('ADuration', ADuration)
 }
 
 export {
 	ACheckbox,
-	AComboBox,
 	ADate,
 	ADropdown,
 	ADatePicker,
@@ -62,6 +61,7 @@ export {
 	AFormLink,
 	ANumericInput,
 	ATextInput,
+	ATextarea,
 	Login,
 	install,
 }

package/src/theme/login.css

@@ -1,2 +1 @@
-@import url('@stonecrop/themes/default.css');
 @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

package/src/types/index.ts

@@ -14,7 +14,18 @@ export type { InteractionMode } from '@stonecrop/schema'
 
 // ---------------------------------------------------------------------------
 // ResolvedField — the output-space type that AForm consumes
-// Produced by resolveSchema(); never authored directly.
+//
+// Usually produced by resolveSchema() from an authoring-space DoctypeField[].
+// It may also be hand-authored, for view chrome that has no backing doctype
+// (see Desktop.vue's doctype list) — annotate such literals with `satisfies
+// ResolvedTable`/`satisfies ResolvedField` so they stay checked.
+//
+// Authoring space and output space are NOT interchangeable. The trap is tables:
+// an authoring TableField carries its columns under `columns`, while resolveSchema
+// renames that key to `schema` (registry.ts) because `schema` is the ATable prop
+// that runs schemaToColumns(). Hand-authoring `columns` here — or feeding an
+// authoring-space field straight to AForm — produces a field AForm does not
+// recognise as a table.
 // ---------------------------------------------------------------------------
 
 /**
@@ -60,6 +71,14 @@ export interface ResolvedLink {
  * A resolved table — either from a Link with `noneOrMany`/`atLeastOne` cardinality,
  * or from an inline TableField. ATable receives columns via `:schema` (ColumnSchema[])
  * and row data via `:rows` from formData at render time.
+ *
+ * Note the key rename: an authoring `TableField` declares its columns under `columns`;
+ * `resolveSchema` moves them to `schema` here, because `schema` is the ATable prop that
+ * runs `schemaToColumns()` (ATable's own `columns` prop means already-converted
+ * `TableColumn[]`). A hand-authored table must therefore use `schema`, not `columns`.
+ *
+ * Rows are never part of the schema. AForm sources them from the data model at
+ * `dataModel[fieldname]`, so a `rows` key placed on this object is ignored.
  * @public
  */
 export interface ResolvedTable {
@@ -111,9 +130,13 @@ export interface ResolvedFieldset {
 }
 
 /**
- * The discriminated union of all resolved field types — what AForm consumes
- * after `resolveSchema()` has transformed the authoring `DoctypeField[]`.
+ * The discriminated union of all resolved field types — what AForm consumes,
+ * usually after `resolveSchema()` has transformed the authoring `DoctypeField[]`,
+ * but also valid hand-authored for view chrome with no backing doctype.
  * Narrowed by `kind`: `'field'` | `'link'` | `'table'` | `'fieldset'`.
+ *
+ * `kind` is required — AForm dispatches on it alone and does not infer a field's
+ * type from its structure.
  * @public
  */
 export type ResolvedField = ResolvedScalar | ResolvedLink | ResolvedTable | ResolvedFieldset
@@ -182,6 +205,14 @@ export type ComponentProps = {
 
 		[key: string]: any
 	}
+
+	/**
+	 * Inline validation error messages to display on this field. Fed by the host
+	 * (e.g. mapped from the core validation store) — the renderer stays dumb and just
+	 * shows what it is given. Takes precedence over the static `validation.errorMessage`.
+	 * @public
+	 */
+	errors?: string[]
 }
 
 /**

package/dist/directives/mask.js

@@ -1,102 +0,0 @@
-/**
- * Extracts a mask function from a stringified function
- * @param mask - Mask string
- * @returns Mask function
- */
-function extractMaskFn(mask) {
-    try {
-        // eslint-disable-next-line @typescript-eslint/no-implied-eval, @typescript-eslint/no-unsafe-call
-        return Function(`"use strict";return (${mask})`)();
-    }
-    catch (error) {
-        if (error instanceof ReferenceError) {
-            // assume mask is a string
-        }
-    }
-}
-/**
- * Gets the mask for a given directive binding
- * @param binding - Binding object from directive hook
- * @returns Mask string
- */
-function getMask(binding) {
-    const mask = binding.value;
-    if (!mask)
-        return undefined;
-    const maskFn = extractMaskFn(mask);
-    if (maskFn) {
-        // TODO: (state) replace with state management;
-        // pass the entire form/table data to the function
-        const locale = binding.instance?.['locale'];
-        return maskFn(locale);
-    }
-    return mask;
-}
-/**
- * Unmasks the input string
- * @param input - Input string
- * @param maskToken - Mask token character
- * @returns Unmasked input string
- */
-function unmaskInput(input, maskToken) {
-    if (!maskToken) {
-        maskToken = '#';
-    }
-    let unmaskedInput = input;
-    const maskChars = [maskToken, '/', '-', '(', ')', ' '];
-    for (const char of maskChars) {
-        unmaskedInput = unmaskedInput.replaceAll(char, '');
-    }
-    return unmaskedInput;
-}
-/**
- * Fills the mask with the input string
- * @param input - Input string
- * @param mask - Mask string
- * @param maskToken - Mask token character
- * @returns Masked input string
- */
-function fillMask(input, mask, maskToken) {
-    if (!maskToken) {
-        maskToken = '#';
-    }
-    let replacement = mask;
-    for (const inputChar of input) {
-        const replaceIndex = replacement.indexOf(maskToken);
-        if (replaceIndex !== -1) {
-            const prefix = replacement.substring(0, replaceIndex);
-            const suffix = replacement.substring(replaceIndex + 1);
-            replacement = prefix + inputChar + suffix;
-        }
-    }
-    return replacement.slice(0, mask.length);
-}
-/**
- * Applies a mask to an input element
- * @param el - Input element
- * @param binding - Binding object from directive hook
- * @returns void
- * @public
- */
-export function useStringMask(el, binding) {
-    const mask = getMask(binding);
-    if (!mask)
-        return;
-    const maskToken = '#';
-    const inputText = el.value;
-    // process input value with mask
-    const unmaskedInput = unmaskInput(inputText, maskToken);
-    if (unmaskedInput) {
-        const replacement = fillMask(unmaskedInput, mask, maskToken);
-        // TODO: (state) this is very opinionated;
-        // most likely fixed with state management;
-        // a better way could be to emit back to instance;
-        if (binding.instance?.['maskFilled']) {
-            binding.instance['maskFilled'] = !replacement.includes(maskToken);
-        }
-        el.value = replacement;
-    }
-    else {
-        el.value = mask;
-    }
-}

package/dist/index.js

@@ -1,31 +0,0 @@
-import { install as installATable } from '@stonecrop/atable';
-import ACheckbox from './components/form/ACheckbox.vue';
-import AComboBox from './components/form/AComboBox.vue';
-import ADate from './components/form/ADate.vue';
-import ADropdown from './components/form/ADropdown.vue';
-import ADatePicker from './components/form/ADatePicker.vue';
-import AFieldset from './components/form/AFieldset.vue';
-import AFileAttach from './components/form/AFileAttach.vue';
-import AForm from './components/AForm.vue';
-import ANumericInput from './components/form/ANumericInput.vue';
-import ATextInput from './components/form/ATextInput.vue';
-import Login from './components/utilities/Login.vue';
-/**
- * Install all AForm components
- * @param app - Vue app instance
- * @public
- */
-function install(app /* options */) {
-    app.use(installATable); // Install ATable components for use within AForm
-    app.component('ACheckbox', ACheckbox);
-    app.component('AComboBox', AComboBox);
-    app.component('ADate', ADate);
-    app.component('ADropdown', ADropdown);
-    app.component('ADatePicker', ADatePicker);
-    app.component('AFieldset', AFieldset);
-    app.component('AFileAttach', AFileAttach);
-    app.component('AForm', AForm);
-    app.component('ANumericInput', ANumericInput);
-    app.component('ATextInput', ATextInput);
-}
-export { ACheckbox, AComboBox, ADate, ADropdown, ADatePicker, AFieldset, AFileAttach, AForm, ANumericInput, ATextInput, Login, install, };

package/src/components/form/AComboBox.vue

@@ -1,17 +0,0 @@
-<template>
-	<ATableModal :event="event" :cell-data="cellData" class="amodal">
-		<div>
-			<input type="text" />
-			<input type="text" />
-			<input type="text" />
-		</div>
-	</ATableModal>
-</template>
-
-<script setup lang="ts">
-import type { ComponentProps } from '../../types'
-
-// TODO: change props from individual elements to the store object
-// TODO: implement full mode/display support
-defineProps<ComponentProps & { event?: any; cellData?: any; tableID?: string }>()
-</script>