@stonecrop/aform 0.31.0 → 0.33.0

package/dist/src/index.js

@@ -1,58 +0,0 @@
-export { deserializeFunction } from './utils/deserialize';
-export { badgeInputAccentStyle, resolveFieldBadge } from './utils/badge';
-export { resolvedFieldsToColumns } from './utils/columns';
-import { install as installATable } from '@stonecrop/atable';
-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 ASegmentedControl from './components/form/ASegmentedControl.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';
-import AFieldset from './components/form/AFieldset.vue';
-import AFileAttach from './components/form/AFileAttach.vue';
-import AForm from './components/AForm.vue';
-import AFormLink from './components/form/AFormLink.vue';
-import ANumericInput from './components/form/ANumericInput.vue';
-import AQuantityInput from './components/form/AQuantityInput.vue';
-import ATextInput from './components/form/ATextInput.vue';
-import ATextboxInput from './components/form/ATextboxInput.vue';
-import Login from './components/utilities/Login.vue';
-import AFormLoading from './components/AFormLoading.vue';
-import ExpandButton from './components/base/ExpandButton.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('ACurrencyInput', ACurrencyInput);
-    app.component('ADate', ADate);
-    app.component('ADropdown', ADropdown);
-    app.component('ASegmentedControl', ASegmentedControl);
-    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);
-    app.component('AFileAttach', AFileAttach);
-    app.component('AForm', AForm);
-    app.component('AFormLink', AFormLink);
-    app.component('ANumericInput', ANumericInput);
-    app.component('AQuantityInput', AQuantityInput);
-    app.component('ATextInput', ATextInput);
-    app.component('ATextboxInput', ATextboxInput);
-    app.component('ADuration', ADuration);
-    app.component('AFormLoading', AFormLoading);
-    app.component('ExpandButton', ExpandButton);
-}
-export { ACheckbox, ACurrencyInput, ADate, ADropdown, ASegmentedControl, ABadge, ADatePicker, ADateRange, ADateSelection, ADuration, ADateTime, ADateTimeInput, AFieldset, AFileAttach, AForm, AFormLink, ANumericInput, AQuantityInput, ATextInput, ATextboxInput, Login, AFormLoading, ExpandButton, install, };

package/dist/src/utils/badge.js

@@ -1,71 +0,0 @@
-import { isBadgeDescriptor, lookupBadge } from '@stonecrop/schema';
-import { deserializeFunction } from './deserialize';
-/**
- * Resolve a field value to a badge descriptor using format (if present) then options map.
- * @public
- */
-export function resolveFieldBadge(value, options, format, context = {}) {
-    if (format) {
-        let formatted;
-        if (typeof format === 'function') {
-            formatted = format(value, context);
-        }
-        else {
-            const formatFn = deserializeFunction(format);
-            formatted = formatFn(value, context);
-        }
-        if (isBadgeDescriptor(formatted)) {
-            const label = formatted.label.trim();
-            return label ? formatted : undefined;
-        }
-        if (typeof formatted === 'string' && formatted !== '') {
-            return lookupBadge(options, formatted) ?? { label: formatted, variant: 'neutral' };
-        }
-    }
-    const key = badgeLookupKey(value);
-    if (key === undefined)
-        return undefined;
-    return lookupBadge(options, key);
-}
-/**
- * Stored choice value as an options-map key. Only primitives can match a declared choice, so
- * anything else yields undefined rather than the '[object Object]' that String() would produce.
- */
-function badgeLookupKey(value) {
-    switch (typeof value) {
-        case 'string':
-            return value === '' ? undefined : value;
-        case 'number':
-        case 'boolean':
-        case 'bigint':
-            return String(value);
-        default:
-            return undefined;
-    }
-}
-const BADGE_VARIANTS = new Set(['neutral', 'success', 'warning', 'danger', 'brand']);
-/**
- * CSS custom properties for input-accent styling on a native input.
- * @public
- */
-export function badgeInputAccentStyle(descriptor) {
-    if (!descriptor?.label?.trim())
-        return undefined;
-    const variant = descriptor.variant ?? 'neutral';
-    if (descriptor.color) {
-        return {
-            borderLeftWidth: '4px',
-            borderLeftStyle: 'solid',
-            borderLeftColor: descriptor.color,
-            paddingLeft: 'calc(1ch - 4px)',
-        };
-    }
-    if (!BADGE_VARIANTS.has(variant))
-        return undefined;
-    return {
-        borderLeftWidth: '4px',
-        borderLeftStyle: 'solid',
-        borderLeftColor: `var(--sc-badge-${variant}-accent)`,
-        paddingLeft: 'calc(1ch - 4px)',
-    };
-}

package/dist/src/utils/columns.js

@@ -1,33 +0,0 @@
-/**
- * The resolved fields that can be columns in a list or table view, in declaration order.
- *
- * A cell renders one value, so only `kind: 'field'` qualifies. The other three kinds are
- * containers: a `fieldset` groups fields for layout and has no value of its own, while a `link`
- * and a `table` hold a nested record and an array of them. Neither has a `cellComponent`, so a
- * container reaching `ACell` falls through to plain-text rendering and stringifies its children —
- * no error and no log, just a wrong column.
- *
- * A fieldset's *children* are real columns, so it is flattened rather than dropped; losing them is
- * the same silent defect in the other direction.
- *
- * One definition, called by both consumers: `Registry.buildTableConfig` (a child table's columns,
- * from its target's resolved schema) and Desktop's records list. Re-deriving it at either call
- * site produced exactly one of the two failures above at each.
- *
- * @param fields - resolved fields, as produced by `resolveSchema`
- * @returns column definitions, with the `kind` discriminator stripped
- * @public
- */
-export function resolvedFieldsToColumns(fields) {
-    const columns = [];
-    for (const field of fields) {
-        if (field.kind === 'fieldset') {
-            columns.push(...resolvedFieldsToColumns(field.schema));
-        }
-        else if (field.kind === 'field') {
-            const { kind: _kind, ...column } = field;
-            columns.push(column);
-        }
-    }
-    return columns;
-}

package/dist/src/utils/deserialize.js

@@ -1,20 +0,0 @@
-/**
- * Deserializes a stringified function expression into a typed callable.
- *
- * Throws if the string cannot be parsed as a function (SyntaxError) or if the
- * resulting expression is not callable (TypeError), or if the expression references
- * an undefined variable (ReferenceError). Callers are responsible for try/catch.
- *
- * @example
- * ```ts
- * const fn = deserializeFunction<(x: number) => number>('(x) => x * 2')
- * fn(5) // 10
- * ```
- * @public
- */
-// T is intentionally a caller-supplied return type — this utility is unsafe by design (Function constructor).
-// oxlint-disable-next-line typescript/no-unnecessary-type-parameters
-export function deserializeFunction(source) {
-    // oxlint-disable-next-line typescript/no-unsafe-type-assertion, typescript/no-implied-eval
-    return Function(`"use strict"; return (${source})`)();
-}

package/src/components/AForm.vue

@@ -1,314 +0,0 @@
-<template>
-	<form class="aform">
-		<template v-for="(componentObj, key) in schema" :key="key">
-			<!-- Nested schema field (Doctype or any field with resolved schema) -->
-			<div v-if="isNestedSection(componentObj)" class="aform-nested-section">
-				<!-- Suppress h4 for fieldsets — they render their own legend inside AFieldset -->
-				<h4 v-if="componentObj.label && componentObj.kind !== 'fieldset'" class="aform-nested-label">
-					{{ componentObj.label }}
-				</h4>
-				<component
-					:is="componentObj.component ?? 'AForm'"
-					:data="nestedData[componentObj.fieldname]"
-					:mode="resolvedMode(componentObj)"
-					:schema="componentObj.schema"
-					:label="componentObj.label"
-					:collapsible="componentObj.kind === 'fieldset' ? componentObj.collapsible : undefined"
-					:errors="errors"
-					@update:data="(val: any) => updateNestedData(componentObj.fieldname, val)" />
-			</div>
-
-			<!-- Regular field -->
-			<component
-				:is="componentObj.component"
-				v-else-if="!componentObj.hidden"
-				v-model="childModels[key].value"
-				:style="fieldStyle(componentObj)"
-				:schema="componentObj"
-				:data="dataModel[componentObj.fieldname]"
-				:mode="resolvedMode(componentObj)"
-				:errors="errors?.[componentObj.fieldname]"
-				v-bind="componentProps(componentObj)">
-			</component>
-		</template>
-	</form>
-</template>
-
-<script setup lang="ts">
-import { computed, watchEffect, watch, ref } from 'vue'
-
-import type { ResolvedField, ResolvedLink, ResolvedFieldset } from '../types'
-import type { InteractionMode } from '@stonecrop/schema'
-
-const emit = defineEmits(['update:schema', 'update:data'])
-const dataModel = defineModel<Record<string, any>>('data', { required: true })
-const {
-	schema,
-	mode = 'edit',
-	errors,
-} = defineProps<{
-	schema: ResolvedField[]
-	mode?: InteractionMode
-	/** Inline validation errors keyed by fieldname. Fed by the host; the form stays store-agnostic. */
-	errors?: Record<string, string[]>
-}>()
-
-const isNestedSection = (componentObj: ResolvedField): componentObj is ResolvedLink | ResolvedFieldset =>
-	(componentObj.kind === 'link' || componentObj.kind === 'fieldset') &&
-	'schema' in componentObj &&
-	Array.isArray(componentObj.schema) &&
-	componentObj.schema.length > 0
-
-// Reactive nested data refs for two-way binding with nested AForm instances
-const nestedData = ref<Record<string, any>>({})
-
-// Sync external dataModel changes into nestedData (one-way, no emit back).
-// Uses a shallow watch so only top-level object replacement (e.g. parent reset)
-// triggers a sync — property mutations from within are handled by updateNestedData.
-watch(
-	() => dataModel.value,
-	newData => {
-		if (!schema || !newData) return
-		schema.forEach(field => {
-			if (isNestedSection(field)) {
-				nestedData.value[field.fieldname] = newData[field.fieldname] ?? {}
-			}
-		})
-	},
-	{ immediate: true }
-)
-
-// Called by the nested <AForm>'s @update:data handler.
-// Updates nestedData locally and propagates upward in one step,
-// avoiding the watchEffect feedback loop that occurred with v-model.
-const updateNestedData = (fieldname: string, val: any) => {
-	nestedData.value[fieldname] = val
-	if (dataModel.value) {
-		dataModel.value[fieldname] = val
-		emit('update:data', { ...dataModel.value })
-	}
-}
-
-const componentProps = (componentObj: ResolvedField) => {
-	const propsToPass: Record<string, any> = {}
-	for (const [key, value] of Object.entries(componentObj)) {
-		// 'mode' is excluded here because it is handled by resolvedMode()
-		// and passed explicitly via :mode to avoid conflicting with the form-level defaults.
-		if (!['component', 'primaryKey', 'computed', 'language', 'hidden', 'mode', 'width', 'height'].includes(key)) {
-			propsToPass[key] = value
-		}
-	}
-
-	// A table sources its rows from the data model, never from the schema. `kind` is the only
-	// check: every path into AForm sets it (Zod's injectKind, Doctype.fromObject's
-	// normalizeFieldKind, and the registry), and hand-built ResolvedTable literals declare it.
-	if (componentObj.kind === 'table') {
-		propsToPass['rows'] = dataModel.value[componentObj.fieldname] || []
-	}
-
-	return propsToPass
-}
-
-const fieldStyle = (componentObj: ResolvedField): Record<string, string> => {
-	if (componentObj.kind !== 'field') return {}
-	const style: Record<string, string> = {}
-	if (componentObj.width) {
-		style.flexBasis = componentObj.width
-		style.width = componentObj.width
-	}
-	if (componentObj.height) {
-		style.height = componentObj.height
-		style.minHeight = '0'
-		style.flexGrow = '1'
-		style.alignSelf = 'stretch'
-	}
-	return style
-}
-
-const effectiveFormMode = computed(() => mode ?? 'edit')
-
-// Resolve the effective mode for a schema field, allowing per-field overrides
-function resolvedMode(componentObj: ResolvedField): InteractionMode {
-	const fieldMode = componentObj.mode
-	if (fieldMode) return fieldMode
-	return effectiveFormMode.value
-}
-
-// Create stable computed refs array to avoid recreation on every access
-const childModelsCache = ref<ReturnType<typeof computed>[]>([])
-
-// Watch for schema changes and update cache (avoiding side effects in computed)
-watchEffect(() => {
-	if (!schema) return
-
-	// Recreate cache only if length changed
-	if (childModelsCache.value.length !== schema.length) {
-		childModelsCache.value = schema.map((_val, i) => {
-			return computed({
-				get() {
-					return dataModel.value?.[schema[i].fieldname]
-				},
-				set: newValue => {
-					const fieldname = schema[i].fieldname
-					if (fieldname && dataModel.value) {
-						dataModel.value[fieldname] = newValue
-						emit('update:data', { ...dataModel.value })
-					}
-					emit('update:schema', schema)
-				},
-			})
-		})
-	}
-})
-
-// Computed just returns the cached models (no side effects)
-const childModels = computed(() => childModelsCache.value)
-</script>
-
-<style>
-/* global styles for aform */
-.aform input {
-	font-family: var(--sc-font-family);
-	border: none;
-}
-.aform_form-element {
-	padding: 0;
-	margin: 0;
-	position: relative;
-	box-sizing: border-box;
-	flex-grow: 1;
-	min-width: 20ch;
-	/* margin-bottom: 1rem; */
-}
-.aform__grid--full {
-	flex-basis: 100%;
-	width: 100%;
-}
-.aform_input-field {
-	outline: 1px solid var(--sc-input-border-color);
-	outline-offset: -1px;
-	font-size: 1rem;
-	padding: 0.5rem;
-	margin: 0 0 0 0;
-	border-radius: 0;
-	box-sizing: border-box;
-	width: 100%;
-	min-height: auto;
-	position: relative;
-	color: var(--sc-cell-text-color);
-	background: var(--sc-input-field-background);
-	font-family: var(--sc-font-family);
-}
-.aform_input-field:focus {
-	outline: 1px solid var(--sc-input-active-border-color);
-}
-
-.aform_display-value {
-	display: block;
-	padding: 0.5rem;
-	min-height: 2rem;
-	color: var(--sc-cell-text-color);
-	word-break: break-word;
-}
-
-.aform_input-field:focus + .aform_field-label {
-	color: var(--sc-input-active-label-color);
-}
-
-.aform_field-label {
-	color: var(--sc-input-label-color);
-	display: inline-block;
-	position: absolute;
-	padding: 0 0.25rem;
-	margin: 0rem;
-	z-index: 1;
-	font-size: 0.7rem;
-	font-weight: 300;
-	letter-spacing: 0.05rem;
-	background: linear-gradient(var(--sc-form-background) 50%, var(--sc-input-field-background) 50%);
-	width: auto;
-	box-sizing: border-box;
-	background: white;
-	margin: 0;
-	grid-row: 1;
-	top: 0;
-	left: 10px;
-	border: none;
-	line-height: 0;
-	transform: translateY(-50%);
-}
-.aform_input-field:disabled,
-.aform_checkbox-container:has(.aform_checkbox:disabled) {
-	background: var(--sc-input-field-disabled-background);
-}
-.aform_input-field:disabled + .aform_field-label,
-.aform_checkbox-container:has(.aform_checkbox:disabled) + .aform_field-label {
-	background: linear-gradient(var(--sc-form-background) 50%, var(--sc-input-field-disabled-background) 50%);
-}
-.aform_input-field:disabled ~ p.aform_error,
-.aform_checkbox-container:has(.aform_checkbox:disabled) ~ p.aform_error {
-	background: linear-gradient(var(--sc-form-background) 50%, var(--sc-input-field-disabled-background) 50%);
-}
-.aform_field-label::after {
-	margin: 0;
-	padding: 0;
-	box-sizing: border-box;
-	content: '';
-	line-height: normal;
-}
-p.aform_error {
-	/* v-show toggles visibility per field; base display must be visible (was stuck at `none`,
-	   which overrode v-show and left every field error dormant). */
-	display: inline-block;
-	background: linear-gradient(var(--sc-form-background) 50%, var(--sc-input-field-background) 50%);
-	padding: 0 0.25rem;
-	margin: 0rem;
-	width: auto;
-	color: var(--sc-brand-danger);
-	font-size: 0.7rem;
-	position: absolute;
-	right: 0;
-	top: 0;
-	line-height: 0;
-	background: white;
-	padding: 0.25rem;
-	transform: translate(-1rem, -50%);
-	margin: 0;
-}
-</style>
-
-<style scoped>
-.aform {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 1rem;
-	padding: 1rem;
-	border: 1px solid var(--sc-form-border);
-	border-left: 4px solid var(--sc-form-border);
-	margin-bottom: 1rem;
-	max-width: 100%;
-}
-@media screen and (max-width: 400px) {
-	.aform {
-		flex-direction: column;
-	}
-}
-
-/* Nested form section */
-.aform-nested-section {
-	width: 100%;
-	padding: 0.5rem 0;
-}
-
-.aform-nested-label {
-	font-size: 0.9rem;
-	font-weight: 600;
-	margin: 0 0 0.5rem 0;
-	color: var(--sc-input-label-color);
-}
-
-.aform-nested-section .aform {
-	border-left-width: 2px;
-	margin-left: 0.5rem;
-}
-</style>

package/src/components/AFormLoading.vue

@@ -1,76 +0,0 @@
-<template>
-	<div class="aform-loading">
-		<div class="aform-loading__label">
-			<slot></slot>
-		</div>
-		<div class="aform-loading__bar"></div>
-	</div>
-</template>
-
-<style scoped>
-.aform-loading {
-	width: 100%;
-	border: 1px solid var(--sc-form-border);
-	border-left: 4px solid var(--sc-form-border);
-	padding: 1rem;
-	margin-bottom: 1rem;
-	box-sizing: border-box;
-	position: relative;
-	overflow: hidden;
-	background: var(--sc-input-field-background);
-}
-
-.aform-loading__label {
-	font-size: 0.9rem;
-	color: var(--sc-cell-text-color);
-	z-index: 1;
-	position: relative;
-}
-
-.aform-loading__label:not(:empty)::after {
-	content: '...';
-	animation: ellipsis 2s infinite;
-}
-
-.aform-loading__bar {
-	width: 100%;
-	height: 100%;
-	position: absolute;
-	left: -100%;
-	top: 0;
-	background: linear-gradient(
-		90deg,
-		rgba(var(--sc-table-loading-color), 0) 0%,
-		rgba(var(--sc-table-loading-color), 1) 50%,
-		rgba(var(--sc-table-loading-color), 0) 100%
-	);
-	animation: bar-sweep 2s infinite;
-	z-index: 0;
-}
-
-@keyframes bar-sweep {
-	0% {
-		left: -100%;
-	}
-	100% {
-		left: 100%;
-	}
-}
-
-@keyframes ellipsis {
-	0%,
-	20% {
-		content: '';
-	}
-	40% {
-		content: '.';
-	}
-	60% {
-		content: '..';
-	}
-	80%,
-	100% {
-		content: '...';
-	}
-}
-</style>

package/src/components/base/CollapseButton.vue

@@ -1,36 +0,0 @@
-<template>
-	<button class="collapse-button" :class="collapsed ? 'rotated' : 'unrotated'">×</button>
-</template>
-
-<script setup lang="ts">
-defineProps<{ collapsed: boolean }>()
-</script>
-
-<style scoped>
-.collapse-button {
-	width: 2ch;
-	min-width: calc(66px - 4ch);
-	background-color: transparent;
-	font-size: 150%;
-	text-align: center;
-	border: none;
-	margin-top: -0.5rem;
-}
-.rotated {
-	transform: rotate(45deg);
-	-webkit-transform: rotate(45deg);
-	-moz-transform: rotate(45deg);
-	-ms-transform: rotate(45deg);
-	-o-transform: rotate(45deg);
-	transition: transform 250ms;
-	transform-origin: center center;
-}
-.unrotated {
-	transform: rotate(0deg);
-	-webkit-transform: rotate(0deg);
-	-moz-transform: rotate(0deg);
-	-ms-transform: rotate(0deg);
-	-o-transform: rotate(0deg);
-	transition: transform 250ms;
-}
-</style>

package/src/components/base/ExpandButton.vue

@@ -1,34 +0,0 @@
-<template>
-	<button
-		type="button"
-		class="expansion-index"
-		:aria-expanded="expanded"
-		:aria-label="expanded ? 'Collapse' : 'Expand'">
-		{{ expanded ? '▼' : '►' }}
-	</button>
-</template>
-
-<script setup lang="ts">
-defineProps<{
-	expanded: boolean
-}>()
-</script>
-
-<style scoped>
-.expansion-index {
-	color: var(--sc-header-text-color);
-	font-weight: bold;
-	font-size: 11px;
-	line-height: 1;
-	text-align: center;
-	user-select: none;
-	width: 2ch;
-	min-width: 1.25rem;
-	height: 1.25rem;
-	padding: 0;
-	border: none;
-	background: transparent;
-	cursor: pointer;
-	box-sizing: border-box;
-}
-</style>