Form Components

2026-07-25 00:24:35 +00:00 · 2024-01-23 09:29:47 +01:00
parent e90f0c75fa
commit d66a6567b0
4 changed files with 564 additions and 0 deletions
@@ -0,0 +1,87 @@
+export default {
+	emits: [
+		'update:modelValue'
+	],
+	props: {
+		modelValue: {
+			type: [ FileList, Array ],
+			required: true
+		},
+		multiple: Boolean,
+		id: String,
+		name: String,
+		inputClass: [String, Array, Object],
+		noList: Boolean
+	},
+	methods: {
+		stringifyFile(file) {
+			return JSON.stringify({
+				lastModified: file.lastModified,
+				lastModifiedDate: file.lastModifiedDate,
+				name: file.name,
+				size: file.size,
+				type: file.type
+			});
+		},
+		addFiles(event) {
+			if (!this.multiple)
+				return this.$emit('update:modelValue', event.target.files);
+			
+			const dt = new DataTransfer();
+			const doubles = [];
+			for (var file of this.modelValue) {
+				dt.items.add(file);
+				doubles.push(this.stringifyFile(file));
+			}
+			for (var file of event.target.files) {
+				// NOTE(chris): deep check (with FileReader) would require an async function so we only check the basic attributes
+				if (doubles.indexOf(this.stringifyFile(file)) < 0)
+					dt.items.add(file);
+			}
+			this.$emit('update:modelValue', dt.files);
+		},
+		removeFile(id) {
+			const fileToRemove = Array.from(this.modelValue)[id];
+			
+			const dt = new DataTransfer();
+			for (var file of this.modelValue) {
+				if (file !== fileToRemove)
+					dt.items.add(file);
+			}
+			this.$emit('update:modelValue', dt.files);
+		}
+	},
+	watch: {
+		modelValue(n) {
+			if (n instanceof FileList)
+				return this.$refs.upload.files = n;
+
+			const dt = new DataTransfer();
+			const dms = [];
+			for (var file of n) {
+				if (file instanceof File) {
+					dt.items.add(file);
+				} else {
+					const dmsFile = new File([JSON.stringify(file)], file.name, {
+						type: 'application/x.fhc-dms+json'
+					});
+					dt.items.add(dmsFile);
+				}
+			}
+			this.$emit('update:modelValue', dt.files);
+		}
+	},
+	template: `
+	<div class="form-upload-dms">
+		<input ref="upload" class="form-control" :class="inputClass" :id="id" :name="name" :multiple="multiple" type="file" @change="addFiles">
+		<ul v-if="modelValue.length && multiple && !noList" class="list-unstyled m-0">
+			<li v-for="(file, index) in modelValue" :key="index" class="d-flex mx-1 mt-1">
+				<span class="col-auto"><i class="fa fa-file me-1"></i></span>
+				<span class="col">{{ file.name }}</span>
+				<button class="col-auto btn btn-outline-secondary btn-p-0" @click="removeFile(index)">
+					<i class="fa fa-close"></i>
+				</button>
+			</li>
+		</ul>
+	</div>`
+}
@@ -0,0 +1,62 @@
+export default {
+	emits: [
+		'update:modelValue'
+	],
+	props: {
+		modelValue: String
+	},
+	computed: {
+		valueAsBase64DataString() {
+			if (!this.modelValue || this.modelValue.substring(0, 10) == 'data:image')
+				return this.modelValue;
+			return 'data:image/jpeg;charset=utf-8;base64,' + this.modelValue;
+		}
+	},
+	methods: {
+		openUploadDialog() {
+			this.$refs.fileInput.click();
+		},
+		pickFile() {
+			let file = this.$refs.fileInput.files;
+			if (file && file[0]) {
+				let reader = new FileReader();
+				reader.onload = e => {
+					this.$emit('update:modelValue', e.target.result);
+				}
+				reader.readAsDataURL(file[0]);
+			}
+		},
+		deleteImage() {
+			this.$emit('update:modelValue', '');
+		}
+	},
+	template: `
+	<div class="form-upload-image">
+		<template v-if="modelValue">
+			<img class="img-thumbnail" :src="valueAsBase64DataString" />
+			<div class="fotobutton">
+				<div class="d-grid gap-2 d-md-flex">
+					<button type="button" class="btn btn-outline-dark btn-sm" @click="deleteImage">
+						<i class="fa fa-close"></i>
+					</button>
+					<button type="button" class="btn btn-outline-dark btn-sm" @click="openUploadDialog">
+						<i class="fa fa-pen"></i>
+					</button>
+				</div>
+			</div>
+		</template>
+		<template v-else>
+			<slot>
+				<svg class="bd-placeholder-img img-thumbnail" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera: 200x200" preserveAspectRatio="xMidYMid slice" focusable="false"><title>A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em"></text></svg>
+			</slot>
+			<div class="fotobutton-visible">
+				<div class="d-grid gap-2 d-md-flex">
+					<button type="button" class="btn btn-outline-dark btn-sm" @click="openUploadDialog">
+						<i class="fa fa-pen"></i>
+					</button>
+				</div>
+			</div>
+		</template>
+		<input :id="$attrs.id" class="d-none" type="file" ref="fileInput" @input="pickFile" accept="image/*">
+	</div>`
+}