@stonecrop/aform 0.9.2 → 0.10.0

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/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
@@ -30,10 +36,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 +85,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
 }
 
 /**
@@ -232,12 +238,6 @@ export type DoctypeSchema = BaseSchema & {
 	 * @public
 	 */
 	schema?: SchemaTypes[]
-
-	/**
-	 * Indicate whether the nested form is read-only
-	 * @public
-	 */
-	readOnly?: boolean
 }
 
 /**
@@ -291,12 +291,6 @@ export type TableDoctypeSchema = BaseSchema & {
 	 * @public
 	 */
 	rows?: TableRow[]
-
-	/**
-	 * Indicate whether the table is read-only
-	 * @public
-	 */
-	readOnly?: boolean
 }
 
 /**