feat: support readonly forms

Author: vis97c

packages/components-vue/src/components/Table.vue

@@ -145,7 +145,7 @@
 										value: node[property.value],
 										property,
 										node,
-										readOnly: isReadOnly,
+										readonly: isReadOnly,
 										theme,
 										modalTheme,
 										classes,
@@ -355,7 +355,7 @@
 		 * read only table
 		 * @old editable(inverse)
 		 */
-		readOnly?: boolean;
+		readonly?: boolean;
 		/**
 		 * Do nodes support pagination?
 		 */
@@ -440,7 +440,7 @@
 	});
 	const isReadOnly = computed<boolean>(() => {
 		return (
-			props.readOnly ||
+			props.readonly ||
 			!props.nodes.length ||
 			(!props.updateNode && !props.cloneNode && !props.deleteNode)
 		);

packages/components-vue/src/components/form/Input.vue

@@ -17,7 +17,7 @@
 					:theme="theme"
 					:aria-label="option.alias || option.value"
 					:active="modelValue.includes(option.value)"
-					:disabled="!input.multiple && modelValue.includes(option.value)"
+					:disabled="readonly || (!input.multiple && modelValue.includes(option.value))"
 					@click="choose(option.value)"
 				>
 					<span>{{ option.alias || option.value }}</span>
@@ -40,6 +40,7 @@
 		<InputFile
 			v-else-if="!input.defaults && input.type === eFT.FILE"
 			:theme="theme"
+			:disabled="readonly"
 			class="--flx"
 			:min="input.min"
 			:max="input.max"
@@ -48,7 +49,14 @@
 			@update:model-value="$emit('update:model-value', $event)"
 		/>
 		<!-- Future inner loop input -->
-		<FormInputLoop v-else v-slot="{ i }" :models="models" :input="input" :theme="theme">
+		<FormInputLoop
+			v-else
+			v-slot="{ i }"
+			:models="models"
+			:input="input"
+			:theme="theme"
+			:readonly="readonly"
+		>
 			<div
 				v-if="input.defaults && input.defaults.length >= 2"
 				class="flx --flxColumn --flxRow-wrap:md --flx-start-stretch --flx"
@@ -71,6 +79,7 @@
 					class="--width-180 --flx"
 					:invalid="invalid"
 					:model-value="[model]"
+					:disabled="readonly"
 					@update:model-value="
 						models[i].value = models[i].value.toSpliced(index, 1, $event[0])
 					"
@@ -85,6 +94,7 @@
 					v-model="models[i].value[0]"
 					v-bind="inputProps"
 					:theme="theme"
+					:disabled="readonly"
 					:placeholder="getInputPlaceholder()"
 					type="password"
 					class="--width-180 --flx"
@@ -93,6 +103,7 @@
 					v-model="models[i].value[1]"
 					v-bind="inputProps"
 					:theme="theme"
+					:disabled="readonly"
 					:placeholder="getInputPlaceholder()"
 					type="password"
 					class="--width-180 --flx"
@@ -106,12 +117,14 @@
 				<SelectSimple
 					v-model="models[i].value[0]"
 					v-bind="{ options: input.options, theme }"
+					:disabled="readonly"
 					class="--width-180 --flx"
 				/>
 				<InputText
 					v-model="models[i].value[1]"
 					v-bind="inputProps"
 					:theme="theme"
+					:disabled="readonly"
 					:placeholder="getInputPlaceholder()"
 					type="number"
 					class="--width-180 --flx"
@@ -125,13 +138,15 @@
 				<SelectSimple
 					v-model="models[i].value[0]"
 					:theme="theme"
+					:disabled="readonly"
 					:options="indicativesArr"
 					class="--width-180 --flx"
 				/>
 				<InputText
 					v-model="models[i].value[1]"
 					v-bind="inputProps"
 					:theme="theme"
+					:disabled="readonly"
 					:placeholder="getInputPlaceholder()"
 					type="tel"
 					class="--width-180 --flx"
@@ -152,6 +167,7 @@
 					:value="defaultCountry"
 					icon="earth-americas"
 					:theme="theme"
+					:disabled="readonly"
 					:placeholder="getInputPlaceholder()"
 					class="--width-180 --flx"
 				/>
@@ -165,7 +181,7 @@
 						name="state"
 						icon="mountain-sun"
 						:theme="theme"
-						:disabled="!(models[i].value[0] || defaultCountry)"
+						:disabled="readonly || !(models[i].value[0] || defaultCountry)"
 						:placeholder="getInputPlaceholder(1)"
 						class="--width-180 --flx"
 					/>
@@ -175,7 +191,7 @@
 						name="city"
 						icon="city"
 						:theme="theme"
-						:disabled="!models[i].value[1]"
+						:disabled="readonly || !models[i].value[1]"
 						:placeholder="getInputPlaceholder(2)"
 						class="--width-180 --flx"
 					/>
@@ -198,6 +214,7 @@
 						:placeholder="getInputPlaceholder()"
 						type="checkbox"
 						:theme="theme"
+						:disabled="readonly"
 						full-width
 						show-placeholder
 					>
@@ -216,6 +233,7 @@
 					v-model="models[i].value"
 					v-bind="inputProps"
 					:theme="theme"
+					:disabled="readonly"
 					:placeholder="input.placeholder"
 					:options="options"
 					class="--flx"
@@ -230,6 +248,7 @@
 					v-model="models[i].value"
 					v-bind="inputProps"
 					:theme="theme"
+					:disabled="readonly"
 					:placeholder="input.placeholder"
 					:options="options"
 					class="--flx"
@@ -240,6 +259,7 @@
 				v-model="models[i].value"
 				v-bind="inputProps"
 				:theme="theme"
+				:disabled="readonly"
 			/>
 			<!-- Future outer loop input -->
 			<InputText
@@ -252,6 +272,7 @@
 						: { type: getInputTextType() }),
 				}"
 				:theme="theme"
+				:disabled="readonly"
 				:placeholder="getInputPlaceholder()"
 				class="--flx"
 			/>
@@ -306,6 +327,8 @@
 		invalid?: iInvalidInput;
 		countries?: iCountry[];
 		states?: iState[];
+		/** Make all inputs read only by disabling them */
+		readonly?: boolean;
 	}
 
 	/**

packages/components-vue/src/components/form/InputLoop.vue

@@ -10,6 +10,7 @@
 				v-if="input.multiple && input.min < input.values.length"
 				:aria-label="t('clear')"
 				:theme="theme"
+				:disabled="readonly"
 				@click="input.removeValue(i)"
 			>
 				<IconFa name="trash-can" size="20" />
@@ -26,6 +27,7 @@
 		v-if="input.multiple && input.max > models.length"
 		:aria-label="t('add')"
 		:theme="theme"
+		:disabled="readonly"
 		@click="input.addValue()"
 	>
 		{{ t("add") }}
@@ -53,6 +55,8 @@
 	export interface iFormInputLoop<Ti> extends iUseThemeProps {
 		input: FormInputClass;
 		models: WritableComputedRef<Ti | Ti[]>[];
+		/** Make all inputs read only by disabling them */
+		readonly?: boolean;
 	}
 
 	/**

packages/components-vue/src/components/form/Simple.vue

@@ -30,6 +30,7 @@
 					{{ getSuggestedTitle(input) }}
 				</p>
 				<FormInput
+					:readonly="readonly"
 					:theme="theme"
 					:input="input"
 					:invalid="getInvalid(input.name)"
@@ -67,6 +68,8 @@
 		 * Make model
 		 */
 		make?: FormInputClass[];
+		/** Make all inputs read only by disabling them */
+		readonly?: boolean;
 	}
 
 	/**

packages/components-vue/src/components/form/Stages.vue

@@ -21,6 +21,7 @@
 				:invalid="invalid"
 				no-form
 				:title="form.title"
+				:readonly="form.readonly"
 				@update:invalid="invalid = $event"
 			/>
 		</div>
@@ -123,6 +124,8 @@
 		title?: string;
 		inputs: FormInputClass[];
 		listen?: boolean;
+		/** Make all inputs read only by disabling them */
+		readonly?: boolean;
 	}
 
 	interface iFormStages extends iUseThemeProps {

packages/components-vue/src/components/select/Filter.vue

@@ -45,6 +45,7 @@
 		<ActionLink
 			v-if="model && selectOptions.length > 1"
 			:theme="theme"
+			:disabled="disabled"
 			:aria-label="t('select_restablish_field')"
 			:title="t('select_restablish_field')"
 			@click.prevent="resetModel"

packages/components-vue/src/components/value/Complex.vue

@@ -6,7 +6,7 @@
 		:title="value.length ? t('table_quantity', value.length) : ''"
 	>
 		<ActionButton
-			v-if="!readOnly && property?.createNode"
+			v-if="!readonly && property?.createNode"
 			:theme="theme"
 			:tooltip="t('table_create_new')"
 			tooltip-as-text
@@ -108,7 +108,7 @@
 								value: childValueName,
 								alias: _.capitalize(_.startCase(childValueName)),
 							},
-							readOnly,
+							readonly,
 							theme,
 							modalTheme,
 							modalTarget,
@@ -122,7 +122,7 @@
 	<!-- Plain value -->
 	<ValueSimple
 		v-else
-		v-bind="{ value, property, readOnly, theme, modalTheme, classes, modalTarget }"
+		v-bind="{ value, property, readonly, theme, modalTheme, classes, modalTarget }"
 	/>
 </template>
 <script setup lang="ts" generic="P extends Record<string, any>, T">
@@ -165,7 +165,7 @@
 		 * The value prop will be a property of this node
 		 */
 		node?: Pi;
-		readOnly?: boolean;
+		readonly?: boolean;
 		classes?: tProps<string>;
 		/**
 		 * Refresh the content

packages/components-vue/src/components/value/Simple.vue

@@ -101,7 +101,7 @@
 		 * Cell column property
 		 */
 		property?: iProperty<Pi>;
-		readOnly?: boolean;
+		readonly?: boolean;
 		classes?: tProps<string>;
 		modalTarget?: string | RendererElement;
 		modalTheme?: tThemeTuple | tProp<tThemeModifier>;