@stonecrop/aform 0.9.1 → 0.10.0

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/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
 }
 
 /**