fix: file input validation

Author: vis97c

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

@@ -52,6 +52,12 @@ const inputs: FormInput[] = [
 		name: "nullable",
 		title: "Is this field optional in the offer?",
 	}),
+	new FormInput({
+		name: "logo",
+		type: eFormType.FILE,
+		title: "Business logo",
+		max: 3,
+	}),
 ];
 
 const meta = {

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

@@ -36,11 +36,11 @@
 		</LoaderContentFetch>
 		<slot v-else>
 			<!-- No inputs given -->
-			<BoxMessage :theme="theme" class="--width">
+			<BaseBox class="--width" :theme="theme" button dashed transparent>
 				<div class="flx --flxRow --flx-center">
 					<span>{{ emptyMessage || t("nothing_to_show") }}</span>
 				</div>
-			</BoxMessage>
+			</BaseBox>
 		</slot>
 	</BaseErrorBoundary>
 </template>
@@ -54,7 +54,7 @@
 	import { type FormInput as FormInputClass, useI18n } from "@open-xamu-co/ui-common-helpers";
 
 	import BaseErrorBoundary from "../base/ErrorBoundary.vue";
-	import BoxMessage from "../box/Message.vue";
+	import BaseBox from "../base/Box.vue";
 	import FormInput from "./Input.vue";
 	import LoaderContentFetch from "../loader/ContentFetch.vue";
 

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

@@ -157,6 +157,8 @@
 		 * submit fn
 		 */
 		submitFn?: (values: FormInputClass[], event?: Event) => Promise<boolean | iInvalidInput[]>;
+		/** Perform additional actions if submit succeds */
+		successFn?: () => void;
 		/**
 		 * Omit requiring filling up the form
 		 */
@@ -213,7 +215,11 @@
 		if (Array.isArray(successOrInvalid)) invalid.value = successOrInvalid;
 		else {
 			emit("submited", successOrInvalid);
-			resetStages(props.stages); // reset form
+
+			if (successOrInvalid) {
+				resetStages(props.stages); // reset form
+				props.successFn?.();
+			}
 		}
 	});
 

packages/components-vue/src/components/input/File.vue

@@ -1,6 +1,6 @@
 <template>
 	<BaseBox
-		class="flx --flxColumn --flx-start-stretch --gap-10"
+		class="flx --flxColumn --flx-start-stretch --gap-10 --width"
 		button
 		v-bind="{ ...props, theme: fileInputTheme.themeValues }"
 	>
@@ -32,7 +32,7 @@
 			<span class="--txtWrap-nowrap">
 				{{
 					t("file_one_of_amount", {
-						count: modelValue.length,
+						count: thumbnails.length,
 						amount: maxAmount,
 					})
 				}}
@@ -54,7 +54,7 @@
 		>
 			<template v-if="!isLoading">
 				<BaseBox
-					v-if="modelValue.length < maxAmount"
+					v-if="thumbnails.length < maxAmount"
 					:for="id"
 					class="flx --flxColumn --flx-center --minHeight-90"
 					el="label"
@@ -245,7 +245,7 @@
 		isLoading.value = true;
 
 		// copy the files
-		const savedFiles = [...props.modelValue];
+		const savedFiles = [...props.modelValue].filter((v) => v instanceof File);
 		const savedThumbs = [...thumbnails.value];
 
 		try {
@@ -269,7 +269,14 @@
 				const isImage = await fileMatchesMimeTypes(files[i], standardImageMimeTypes);
 
 				// 50MB max file size
-				if (isImage) {
+				if (!isImage) {
+					// not image
+					Swal.fire({
+						title: t("swal.file_wrong_format_image"),
+						text: t("swal.file_wrong_format_image_text"),
+						icon: "warning",
+					});
+				} else {
 					// is image file
 					if (files[i].size < maxFileSize.value) {
 						const fileName = `${props.filePrefix ?? "image"}_${i}`;
@@ -284,13 +291,6 @@
 							icon: "warning",
 						});
 					}
-				} else {
-					// not image
-					Swal.fire({
-						title: t("swal.file_wrong_format_image"),
-						text: t("swal.file_wrong_format_image_text"),
-						icon: "warning",
-					});
 				}
 			}
 

packages/components-vue/src/components/loader/ContentFetch.vue

@@ -154,12 +154,6 @@
 		loading.value = false;
 	}
 
-	// lifecycle
-	if (!props.preventAutoload) refresh();
-
-	// Allow the parent to manually force an update
-	emit("refresh", refresh);
-
 	function validatePromiseLike(newPromise: any, oldPromise: any) {
 		/**
 		 * The same promise would trigger the watcher
@@ -174,7 +168,13 @@
 		if (!loading.value && !!newPromise) refresh();
 	}
 
-	// lifecycle, refetch on url or promise change
+	// lifecycle
+	if (!props.preventAutoload) refresh();
+
+	// Allow the parent to manually force an update
+	emit("refresh", refresh);
+
+	// refetch on url or promise change
 	watch(
 		() => props.url,
 		(newUrl, oldUrl) => {

packages/components-vue/src/components/pagination/Content.vue

@@ -4,6 +4,7 @@
 		:promise="patchedPromise"
 		:payload="[{ ...pagination, ...defaults }]"
 		v-bind="{ ...$attrs, preventAutoload, theme, noContentMessage, label, isContent }"
+		@refresh="$emit('refresh', $event)"
 	>
 		<slot
 			v-bind="{
@@ -92,6 +93,8 @@
 
 	const props = defineProps<iPCProps<T, C> | iPCWithTransformProps<T, C, R>>();
 
+	defineEmits(["refresh"]);
+
 	const xamuOptions = inject<iPluginOptions>("xamu");
 	const router = getCurrentInstance()?.appContext.config.globalProperties.$router;
 

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

@@ -529,7 +529,7 @@
 				const options = (props.properties || []).map(toOption);
 				const property = toOption(options.find((p) => p.value === key) || key);
 				const aliasKey = _.snakeCase(key);
-				const canSort = typeof value === "string" || typeof value === "number";
+				const canSort = ["string", "number", "boolean"].includes(typeof value);
 
 				return {
 					...property,

packages/styles/src/layouts/_scroll.scss

@@ -43,6 +43,20 @@
 				&.#{utils.$prefix-default}--always {
 					max-width: min(100%, 100vw);
 					overflow: auto hidden;
+					box-sizing: content-box;
+
+					@media (max-width: utils.$querie-tablet) {
+						&:has(:only-child) {
+							width: calc(min(100%, 100vw) + 2rem);
+							max-width: none;
+							margin: 0 -1rem;
+
+							> :only-child {
+								border-right: 1rem solid transparent;
+								border-left: 1rem solid transparent;
+							}
+						}
+					}
 
 					> * {
 						min-width: 100%;

packages/styles/src/layouts/_table.scss

@@ -59,6 +59,10 @@
 							padding: 0.4rem 1rem;
 							transition: color 0.1s ease-out;
 							font-weight: utils.weight();
+
+							@media (max-width: utils.$querie-tablet) {
+								padding: 0.4rem 0.6667rem;
+							}
 						}
 
 						td {