@rkosafo/cai.components 0.0.46 → 0.0.48

package/dist/forms/FormFileUpload/FormFileUplad.svelte

@@ -0,0 +1,134 @@
+<script lang="ts" module>
+	import { registerPlugin, supported } from 'svelte-filepond';
+	import FilePondPluginImageExifOrientation from 'filepond-plugin-image-exif-orientation';
+	import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
+	import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
+	registerPlugin(
+		FilePondPluginImageExifOrientation,
+		FilePondPluginImagePreview,
+		FilePondPluginFileValidateType
+	);
+</script>
+
+<script lang="ts">
+	import { key, Label } from '../../index.js';
+	import type { FormFileUploadProps } from '../../types/index.js';
+	import { nanoid } from 'nanoid';
+	import { getContext } from 'svelte';
+	import FilePond from 'svelte-filepond';
+
+	let {
+		title = 'Click Browse or drop the file to upload',
+		subTitle = '',
+		url = '',
+		name = 'file',
+		allowMultiple = false,
+		acceptedFileTypes = [
+			'image/png',
+			'image/jpeg',
+			'application/pdf',
+			'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+		],
+		files = [],
+		label = '',
+		required = false,
+		showError = false,
+		imageOnly = false,
+		contextKey = null,
+		onChange
+	}: FormFileUploadProps = $props();
+
+	// State
+	let pond = $state<any>();
+
+	// Context
+	const { touched, errors, data, setData }: any = getContext(contextKey || key);
+
+	// Derived state
+	let id = nanoid();
+	let hasError = $derived($touched[name] && $errors[name]?.length);
+	let error = $derived($errors[name]?.join(', '));
+
+	// Constants
+	const uploadServerConfig = {};
+
+	// Effects
+	$effect(() => {
+		if (imageOnly && acceptedFileTypes?.length === 3) {
+			acceptedFileTypes = ['image/png', 'image/jpeg'];
+		}
+	});
+
+	function checkFiles(files: any) {
+		if (files.length > 1) {
+			const newFiles = files.map((x: any) => x.file);
+			setData({ ...$data, [name]: newFiles });
+			onChange?.({ name, value: newFiles });
+		} else if (files.length === 1) {
+			const { file } = files[0];
+			setData({ ...$data, [name]: file });
+			onChange?.({ name, value: file });
+		} else if (files.length == 0) {
+			onChange?.(null);
+		}
+	}
+
+	function customFileTypeDetection(source: File, type: string) {
+		return new Promise((resolve, reject) => {
+			const fileName = source.name;
+			if (fileName.endsWith('.frx')) {
+				resolve('.frx');
+			} else {
+				resolve(type);
+			}
+		});
+	}
+</script>
+
+<div class="relative my-2 flex flex-grow flex-col">
+	<Label
+		>{label}
+		{#if required}
+			<span class="pl-1 text-red-500">*</span>
+		{/if}
+	</Label>
+
+	<FilePond
+		{name}
+		required={true}
+		allowReplace={true}
+		instantUpload={false}
+		server={uploadServerConfig}
+		{allowMultiple}
+		allowRevert={true}
+		allowImagePreview={true}
+		allowImageResize={true}
+		bind:this={pond}
+		onupdatefiles={checkFiles}
+		{files}
+		{acceptedFileTypes}
+		fileValidateTypeDetectType={customFileTypeDetection}
+		credits={false}
+	/>
+
+	{#if hasError}
+		<Label
+			class="v-error-container absolute top-9 right-2 flex items-center gap-1 text-sm {hasError &&
+				'text-red-600'}"
+		>
+			<span class="v-error-message hidden backdrop-blur-sm">
+				{error}
+			</span>
+			<iconify-icon
+				icon="solar:danger-circle-bold-duotone"
+				class="v-error-svg ml-auto cursor-pointer text-red-500 select-none hover:text-red-600"
+				style="font-size: 18px;"
+			></iconify-icon>
+		</Label>
+	{/if}
+</div>
+
+<style>
+	@import 'filepond/dist/filepond.css';
+	@import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css';
+</style>

package/dist/forms/FormFileUpload/FormFileUplad.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { FormFileUploadProps } from '../../types/index.js';
+declare const FormFileUplad: import("svelte").Component<FormFileUploadProps, {}, "">;
+type FormFileUplad = ReturnType<typeof FormFileUplad>;
+export default FormFileUplad;

package/dist/forms/FormFileUpload/index.d.ts

@@ -0,0 +1 @@
+export { default as FormFileUpload } from './FormFileUplad.svelte';

package/dist/forms/FormFileUpload/index.js

@@ -0,0 +1 @@
+export { default as FormFileUpload } from './FormFileUplad.svelte';

package/dist/index.d.ts

@@ -35,6 +35,7 @@ export * from './forms/textarea/index.js';
 export * from './forms/select/index.js';
 export * from './forms/radio/index.js';
 export * from './forms/checkbox/index.js';
+export * from './forms/FormFileUpload/index.js';
 export * from './forms/form/index.js';
 export * from './forms/FormInput/index.js';
 export * from './forms/FormDatepicker/index.js';

package/dist/index.js

@@ -36,6 +36,7 @@ export * from './forms/textarea/index.js';
 export * from './forms/select/index.js';
 export * from './forms/radio/index.js';
 export * from './forms/checkbox/index.js';
+export * from './forms/FormFileUpload/index.js';
 export * from './forms/form/index.js';
 export * from './forms/FormInput/index.js';
 export * from './forms/FormDatepicker/index.js';

package/dist/types/index.d.ts

@@ -761,6 +761,7 @@ export interface ITab {
 export interface RemoveTabEvent {
     tabId: string | number;
     tabData?: any;
+    refresh?: boolean;
 }
 export interface TabChildrenProps extends ITab {
     onTabChange?: (tabId: number | string) => void;
@@ -855,3 +856,18 @@ export interface IDocumentCanvasProps {
     close: (val: IDocumentCanvasClose) => void;
     toggleCollapse: (id: string) => void;
 }
+export interface FormFileUploadProps {
+    title: string;
+    subTitle?: string;
+    url?: string;
+    name: string;
+    allowMultiple?: boolean;
+    acceptedFileTypes?: string[];
+    files?: any[];
+    label: string;
+    required?: boolean;
+    showError?: boolean;
+    imageOnly?: boolean;
+    contextKey?: any;
+    onChange?: (val: any) => void;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rkosafo/cai.components",
-  "version": "0.0.46",
+  "version": "0.0.48",
   "files": [
     "dist",
     "!dist/**/*.test.*",
@@ -59,12 +59,17 @@
     "date-fns": "^4.1.0",
     "dayjs": "^1.11.18",
     "felte": "^1.3.0",
+    "filepond": "^4.32.9",
+    "filepond-plugin-file-validate-type": "^1.2.9",
+    "filepond-plugin-image-exif-orientation": "^1.0.11",
+    "filepond-plugin-image-preview": "^4.6.12",
     "iconify-icon": "^3.0.0",
     "keycloak-js": "^26.2.0",
     "lodash": "^4.17.21",
     "mdsvex": "^0.12.6",
     "nanoid": "^5.1.5",
     "svelecte": "^5.3.0",
+    "svelte-filepond": "^0.2.2",
     "svelte-french-toast": "^1.2.0",
     "svelte-headless-table": "^0.18.3",
     "svelte-meta-tags": "^4.4.0",