@stonecrop/aform 0.9.2 → 0.10.1

package/src/components/form/ADropdown.vue

@@ -1,9 +1,14 @@
 <template>
-	<div v-on-click-outside="onClickOutside" class="autocomplete" :class="{ isOpen: dropdown.open }">
+	<div v-if="mode === 'display'" class="input-wrapper">
+		<span class="aform_display-value">{{ search ?? '' }}</span>
+		<label>{{ label }}</label>
+	</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"
@@ -31,26 +36,33 @@
 
 <script setup lang="ts">
 import { vOnClickOutside } from '@vueuse/components'
-import { reactive } from 'vue'
+import { reactive, ref } from 'vue'
+
+import type { ComponentProps } from '../../types'
 
 const {
 	label,
-	items = [],
+	options = [],
 	isAsync = false,
 	filterFunction = undefined,
-} = defineProps<{
-	label: string
-	items?: string[]
-	isAsync?: boolean
-	filterFunction?: (search: string) => string[] | Promise<string[]>
-}>()
+	mode,
+} = defineProps<
+	ComponentProps & {
+		options?: string[]
+		isAsync?: boolean
+		filterFunction?: (search: string) => string[] | Promise<string[]>
+	}
+>()
 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: items,
+	results: options,
 })
 
 const onClickOutside = () => closeDropdown()
@@ -75,29 +87,31 @@ const filter = async () => {
 
 const setResult = (result: string) => {
 	search.value = result
+	committedValue.value = result
 	closeDropdown(result)
 }
 
 const openDropdown = () => {
-	dropdown.activeItemIndex = isAsync ? null : search.value ? items?.indexOf(search.value) || null : null
+	const idx = options?.indexOf(search.value ?? '') ?? -1
+	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 ? [] : items
+	dropdown.results = isAsync ? [] : options
 }
 
 const closeDropdown = (result?: string) => {
 	dropdown.activeItemIndex = null
 	dropdown.open = false
-	if (!items?.includes(result || search.value || '')) {
-		search.value = ''
+	if (!options?.includes(result || search.value || '')) {
+		search.value = committedValue.value
 	}
 }
 
 const filterResults = () => {
 	if (!search.value) {
-		dropdown.results = items
+		dropdown.results = options
 	} else {
-		dropdown.results = items?.filter(item => item.toLowerCase().includes((search.value ?? '').toLowerCase()))
+		dropdown.results = options?.filter(item => item.toLowerCase().includes((search.value ?? '').toLowerCase()))
 	}
 }
 

package/src/components/form/AFieldset.vue

@@ -5,7 +5,7 @@
 			<CollapseButton v-if="collapsible" :collapsed="collapsed" />
 		</legend>
 		<slot :collapsed="collapsed">
-			<AForm v-show="!collapsed" :schema="formSchema" v-model:data="formData" />
+			<AForm v-show="!collapsed" v-model:data="formData" :schema="formSchema" :mode="mode" />
 		</slot>
 	</fieldset>
 </template>
@@ -15,18 +15,21 @@ import { ref } from 'vue'
 
 import CollapseButton from '../base/CollapseButton.vue'
 import AForm from '../AForm.vue'
-import { SchemaTypes } from '../../types'
+import type { SchemaTypes, FormMode } from '../../types'
 
 const {
 	schema,
 	label,
 	collapsible,
 	data = {},
+	mode = 'edit',
 } = defineProps<{
 	schema: SchemaTypes[]
 	label: string
 	collapsible?: boolean
 	data?: Record<string, any>
+	/** Rendering mode forwarded to the inner AForm */
+	mode?: FormMode
 }>()
 
 const collapsed = ref(false)

package/src/components/form/AFileAttach.vue

@@ -1,20 +1,32 @@
 <template>
 	<div class="aform_form-element aform_file-attach aform__grid--full">
-		<template v-if="files">
-			<div class="aform_file-attach-feedback">
-				<p>
-					You have selected: <b>{{ fileLengthText }}</b>
-				</p>
-				<li v-for="file of files" :key="file.name">
-					{{ file.name }}
-				</li>
-			</div>
+		<template v-if="mode === 'display'">
+			<template v-if="files">
+				<div class="aform_file-attach-feedback">
+					<p>
+						<b>{{ fileLengthText }}</b>
+					</p>
+					<li v-for="file of files" :key="file.name">{{ file.name }}</li>
+				</div>
+			</template>
+			<span v-else class="aform_display-value">No file selected</span>
+		</template>
+		<template v-else>
+			<template v-if="files">
+				<div class="aform_file-attach-feedback">
+					<p>
+						You have selected: <b>{{ fileLengthText }}</b>
+					</p>
+					<li v-for="file of files" :key="file.name">
+						{{ file.name }}
+					</li>
+				</div>
+			</template>
+			<button type="button" class="aform_form-btn" :disabled="mode === 'read'" @click="open()">
+				{{ label }}
+			</button>
+			<button type="button" :disabled="!files || mode === 'read'" class="aform_form-btn" @click="reset()">Reset</button>
 		</template>
-
-		<button type="button" class="aform_form-btn" @click="open()">
-			{{ label }}
-		</button>
-		<button type="button" :disabled="!files" class="aform_form-btn" @click="reset()">Reset</button>
 	</div>
 </template>
 
@@ -22,11 +34,14 @@
 import { useFileDialog } from '@vueuse/core'
 import { computed } from 'vue'
 
-const { label } = defineProps<{ label: string }>()
+import type { ComponentProps } from '../../types'
+
+const { label, mode } = defineProps<ComponentProps>()
 const { files, open, reset, onChange } = useFileDialog()
 
 const fileLengthText = computed(() => {
-	return `${files.value.length} ${files.value.length === 1 ? 'file' : 'files'}`
+	const count = files.value?.length ?? 0
+	return `${count} ${count === 1 ? 'file' : 'files'}`
 })
 
 onChange(files => files)

package/src/components/form/ANumericInput.vue

@@ -1,20 +1,26 @@
 <template>
 	<div class="aform_form-element">
-		<input
-			:id="uuid"
-			v-model="inputNumber"
-			class="aform_input-field"
-			type="number"
-			:disabled="readOnly"
-			:required="required" />
-		<label class="aform_field-label" :for="uuid">{{ label }}</label>
-		<p v-show="validation.errorMessage" class="aform_error" v-html="validation.errorMessage"></p>
+		<template v-if="mode === 'display'">
+			<span class="aform_display-value">{{ inputNumber ?? '' }}</span>
+			<label class="aform_field-label">{{ label }}</label>
+		</template>
+		<template v-else>
+			<input
+				:id="uuid"
+				v-model="inputNumber"
+				class="aform_input-field"
+				type="number"
+				: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>
+		</template>
 	</div>
 </template>
 
 <script setup lang="ts">
 import { ComponentProps } from '../../types'
 
-const { label, required, readOnly, uuid, validation = { errorMessage: '&nbsp;' } } = defineProps<ComponentProps>()
+const { label, required, mode, uuid, validation = { errorMessage: '&nbsp;' } } = defineProps<ComponentProps>()
 const inputNumber = defineModel<number>()
 </script>

package/src/components/form/ATextInput.vue

@@ -1,15 +1,21 @@
 <template>
 	<div class="aform_form-element">
-		<input
-			:id="uuid"
-			v-model="inputText"
-			v-mask="mask"
-			class="aform_input-field"
-			:disabled="readOnly"
-			: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>
+		<template v-if="mode === 'display'">
+			<span class="aform_display-value">{{ inputText ?? '' }}</span>
+			<label class="aform_field-label">{{ label }}</label>
+		</template>
+		<template v-else>
+			<input
+				:id="uuid"
+				v-model="inputText"
+				v-mask="mask"
+				class="aform_input-field"
+				:disabled="mode === 'read'"
+				: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>
+		</template>
 	</div>
 </template>
 
@@ -19,7 +25,7 @@ import { /* inject, */ ref } from 'vue'
 import { useStringMask as vMask } from '../../directives/mask'
 import { ComponentProps } from '../../types'
 
-const { label, mask, required, readOnly, uuid, validation = { errorMessage: '&nbsp;' } } = defineProps<ComponentProps>()
+const { label, mask, required, mode, uuid, validation = { errorMessage: '&nbsp;' } } = defineProps<ComponentProps>()
 
 // TODO: setup maskFilled as a computed property
 const maskFilled = ref(true)

package/src/directives/mask.ts

@@ -1,19 +1,5 @@
 import type { DirectiveBinding } from 'vue'
 
-import type { FormSchema } from '../types'
-
-/**
- * Named masks for common input types
- */
-const NAMED_MASKS = {
-	date: '##/##/####',
-	datetime: '####/##/## ##:##',
-	time: '##:##',
-	fulltime: '##:##:##',
-	phone: '(###) ### - ####',
-	card: '#### #### #### ####',
-}
-
 /**
  * Extracts a mask function from a stringified function
  * @param mask - Mask string
@@ -36,23 +22,15 @@ function extractMaskFn(mask: string): ((args: any) => string) | void {
  * @returns Mask string
  */
 function getMask(binding: DirectiveBinding<string>) {
-	let mask = binding.value
-
-	if (mask) {
-		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']
-			mask = maskFn(locale)
-		}
-	} else {
-		// TODO: (state) handle using state management
-		const schema = binding.instance?.['schema'] as FormSchema
-		const fieldType: string | undefined = schema?.fieldtype?.toLowerCase()
-		if (fieldType && NAMED_MASKS[fieldType]) {
-			mask = NAMED_MASKS[fieldType]
-		}
+	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) as string
 	}
 
 	return mask

package/src/types/index.ts

@@ -1,5 +1,11 @@
 import type { TableColumn, TableConfig, TableRow } from '@stonecrop/atable'
 
+/**
+ * The rendering mode for AForm components
+ * @public
+ */
+export type FormMode = 'edit' | 'read' | 'display'
+
 /**
  * Defined props for AForm components
  * @public
@@ -18,7 +24,10 @@ export type ComponentProps = {
 	label?: string
 
 	/**
-	 * The masking string to apply to inputs inside the component
+	 * The mask to apply to inputs inside the component. Accepts either a plain
+	 * mask string (e.g. `"(###) ###-####"`) or a stringified arrow function that
+	 * receives `locale` and returns a mask string
+	 * (e.g. `"(locale) => locale === 'en-US' ? '(###) ###-####' : '####-######'"`).
 	 * @public
 	 */
 	mask?: string
@@ -30,10 +39,10 @@ export type ComponentProps = {
 	required?: boolean
 
 	/**
-	 * Indicate whether elements inside the component are read-only
+	 * The rendering mode for the component
 	 * @public
 	 */
-	readOnly?: boolean
+	mode?: FormMode
 
 	/**
 	 * Set a unique identifier for elements inside the component
@@ -79,10 +88,10 @@ export type BaseSchema = {
 	component?: string
 
 	/**
-	 * A placeholder value for the field
-	 * @beta
+	 * Per-field rendering mode override; takes precedence over the AForm-level `mode` prop
+	 * @public
 	 */
-	value?: any
+	mode?: FormMode
 }
 
 /**
@@ -104,17 +113,6 @@ export type FormSchema = BaseSchema & {
 
 	/**
 	 * The field type for the schema field
-	 *
-	 * @remarks
-	 * This must be a string that represents the field type. A mask string will be automatically
-	 * applied for the following field types:
-	 * - Date ('##/##/####')
-	 * - Datetime ('####/##/## ##:##')
-	 * - Time ('##:##')
-	 * - Fulltime ('##:##:##')
-	 * - Phone ('(###) ### - ####')
-	 * - Card ('#### #### #### ####')
-	 *
 	 * @public
 	 */
 	fieldtype?: string
@@ -138,8 +136,11 @@ export type FormSchema = BaseSchema & {
 	width?: string
 
 	/**
-	 * The mask string for the field
-	 * @beta
+	 * The mask to apply to the field. Accepts either a plain mask string
+	 * (e.g. `"##/##/####"`) or a stringified arrow function that receives `locale`
+	 * and returns a mask string
+	 * (e.g. `"(locale) => locale === 'en-US' ? '(###) ###-####' : '####-######'"`).
+	 * @public
 	 */
 	mask?: string
 }
@@ -232,12 +233,6 @@ export type DoctypeSchema = BaseSchema & {
 	 * @public
 	 */
 	schema?: SchemaTypes[]
-
-	/**
-	 * Indicate whether the nested form is read-only
-	 * @public
-	 */
-	readOnly?: boolean
 }
 
 /**
@@ -291,12 +286,6 @@ export type TableDoctypeSchema = BaseSchema & {
 	 * @public
 	 */
 	rows?: TableRow[]
-
-	/**
-	 * Indicate whether the table is read-only
-	 * @public
-	 */
-	readOnly?: boolean
 }
 
 /**