feat: migration to Svelte 5
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
<script lang="ts">
|
||||
export let log_lvl: number = 0;
|
||||
import { preventDefault } from 'svelte/legacy';
|
||||
|
||||
|
||||
// Imports
|
||||
// Import components and elements
|
||||
@@ -20,32 +21,54 @@
|
||||
} from '$lib/stores/ae_stores';
|
||||
|
||||
// Exports
|
||||
// Expecting these for link_to_type: 'event', 'event_location', 'archive_content', etc
|
||||
export let link_to_type: string;
|
||||
export let link_to_id: string;
|
||||
|
||||
|
||||
export let input_name = 'file_list';
|
||||
export let multiple: boolean = true;
|
||||
export let required: boolean = true;
|
||||
export let accept: string =
|
||||
'audio/*, image/*, video/*, .bak, .cfg, .css, .csv, .doc, .docx, .gz, .htm, .html, .ini, .iso, .j2, .json, .key, .keynote, .md, .pdf, .ppt, .pptx, .rar, .rtf, .sql, .svelte, ttf, .txt, .xls, .xlsx, .xz, .zip, .bin, .dmg, .exe, .js, .msi, .php, .py, .sh';
|
||||
|
||||
export let class_li_default: string =
|
||||
'flex flex-col gap-1 items-center justify-center w-full max-w-2xl mx-auto my-1';
|
||||
export let class_li: string = '';
|
||||
export let input_class_li: string[] = ['file_drop_area'];
|
||||
export let table_class_li: string[] = ['table', 'table-sm', 'table-striped', '', 'text-sm'];
|
||||
|
||||
export let upload_complete: boolean = false;
|
||||
export let submit_status: null | string = null;
|
||||
|
||||
export let hosted_file_id_li: string[] = [];
|
||||
export let hosted_file_obj_li: any[] = [];
|
||||
interface Props {
|
||||
log_lvl?: number;
|
||||
// Expecting these for link_to_type: 'event', 'event_location', 'archive_content', etc
|
||||
link_to_type: string;
|
||||
link_to_id: string;
|
||||
input_name?: string;
|
||||
multiple?: boolean;
|
||||
required?: boolean;
|
||||
accept?: string;
|
||||
class_li_default?: string;
|
||||
class_li?: string;
|
||||
input_class_li?: string[];
|
||||
table_class_li?: string[];
|
||||
upload_complete?: boolean;
|
||||
submit_status?: null | string;
|
||||
hosted_file_id_li?: string[];
|
||||
hosted_file_obj_li?: any[];
|
||||
label?: import('svelte').Snippet;
|
||||
}
|
||||
|
||||
let {
|
||||
log_lvl = 0,
|
||||
link_to_type,
|
||||
link_to_id,
|
||||
input_name = 'file_list',
|
||||
multiple = true,
|
||||
required = true,
|
||||
accept = 'audio/*, image/*, video/*, .bak, .cfg, .css, .csv, .doc, .docx, .gz, .htm, .html, .ini, .iso, .j2, .json, .key, .keynote, .md, .pdf, .ppt, .pptx, .rar, .rtf, .sql, .svelte, ttf, .txt, .xls, .xlsx, .xz, .zip, .bin, .dmg, .exe, .js, .msi, .php, .py, .sh',
|
||||
class_li_default = 'flex flex-col gap-1 items-center justify-center w-full max-w-2xl mx-auto my-1',
|
||||
class_li = '',
|
||||
input_class_li = ['file_drop_area'],
|
||||
table_class_li = ['table', 'table-sm', 'table-striped', '', 'text-sm'],
|
||||
upload_complete = $bindable(false),
|
||||
submit_status = $bindable(null),
|
||||
hosted_file_id_li = $bindable([]),
|
||||
hosted_file_obj_li = $bindable([]),
|
||||
label
|
||||
}: Props = $props();
|
||||
|
||||
// Local Variables
|
||||
let task_id = link_to_id;
|
||||
let input_file_list: any = null;
|
||||
let ae_promises: key_val = {}; // Promise<any>;
|
||||
let task_id = $state(link_to_id);
|
||||
let input_file_list: any = $state(null);
|
||||
let ae_promises: key_val = $state({}); // Promise<any>;
|
||||
let ae_triggers: key_val = {};
|
||||
|
||||
let input_element_id = 'ae_comp__hosted_files_upload__input';
|
||||
@@ -56,7 +79,7 @@
|
||||
reencode: null,
|
||||
video_file: null
|
||||
};
|
||||
let download_clip_src: string;
|
||||
let download_clip_src: string = $state();
|
||||
let download_clip_filename: string;
|
||||
|
||||
// *** Functions and Logic
|
||||
@@ -269,7 +292,7 @@
|
||||
|
||||
<div>
|
||||
<!-- class:hidden={!$ae_loc.trusted_access} -->
|
||||
<form on:submit|preventDefault={handle_submit_form_files} class="{class_li_default} {class_li}">
|
||||
<form onsubmit={preventDefault(handle_submit_form_files)} class="{class_li_default} {class_li}">
|
||||
<label class="label"
|
||||
>Start time (HH:MM:SS) <input
|
||||
type="text"
|
||||
@@ -316,7 +339,7 @@
|
||||
class="svelte_input_file_label text-center"
|
||||
class:hidden={$ae_sess.files.disable_submit__hosted_file_obj}
|
||||
>
|
||||
<slot name="label">
|
||||
{#if label}{@render label()}{:else}
|
||||
<div>
|
||||
<span class="fas fa-upload"></span>
|
||||
<!-- Select files to upload -->
|
||||
@@ -328,7 +351,7 @@
|
||||
<strong>Video files only</strong><br />
|
||||
(mp4 or mkv)
|
||||
</span>
|
||||
</slot>
|
||||
{/if}
|
||||
</label>
|
||||
|
||||
<input
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<script lang="ts">
|
||||
export let log_lvl: number = 0;
|
||||
import { preventDefault } from 'svelte/legacy';
|
||||
|
||||
|
||||
// Imports
|
||||
// Import components and elements
|
||||
@@ -20,33 +21,56 @@
|
||||
} from '$lib/stores/ae_stores';
|
||||
|
||||
// Exports
|
||||
// Expecting these for link_to_type: 'event', 'event_location', 'archive_content', etc
|
||||
export let link_to_type: string;
|
||||
export let link_to_id: string;
|
||||
|
||||
|
||||
export let input_name = 'file_list';
|
||||
export let multiple: boolean = true;
|
||||
export let required: boolean = true;
|
||||
export let accept: string =
|
||||
'audio/*, image/*, video/*, .bak, .cfg, .css, .csv, .doc, .docx, .gz, .htm, .html, .ini, .iso, .j2, .json, .key, .keynote, .md, .pdf, .ppt, .pptx, .rar, .rtf, .sql, .svelte, ttf, .txt, .xls, .xlsx, .xz, .zip, .bin, .dmg, .exe, .js, .msi, .php, .py, .sh';
|
||||
|
||||
export let class_li_default: string =
|
||||
'flex flex-col gap-1 items-center justify-center w-full max-w-2xl mx-auto my-1';
|
||||
export let class_li: string = '';
|
||||
export let input_class_li: string[] = ['file_drop_area'];
|
||||
export let table_class_li: string[] = ['table', 'table-sm', 'table-striped', '', 'text-sm'];
|
||||
|
||||
export let upload_complete: boolean = false;
|
||||
export let submit_status: null | string = null;
|
||||
|
||||
export let hosted_file_id_li: string[] = [];
|
||||
export let hosted_file_obj_li: any[] = [];
|
||||
export let hosted_file_obj_kv: key_val = {};
|
||||
interface Props {
|
||||
log_lvl?: number;
|
||||
// Expecting these for link_to_type: 'event', 'event_location', 'archive_content', etc
|
||||
link_to_type: string;
|
||||
link_to_id: string;
|
||||
input_name?: string;
|
||||
multiple?: boolean;
|
||||
required?: boolean;
|
||||
accept?: string;
|
||||
class_li_default?: string;
|
||||
class_li?: string;
|
||||
input_class_li?: string[];
|
||||
table_class_li?: string[];
|
||||
upload_complete?: boolean;
|
||||
submit_status?: null | string;
|
||||
hosted_file_id_li?: string[];
|
||||
hosted_file_obj_li?: any[];
|
||||
hosted_file_obj_kv?: key_val;
|
||||
label?: import('svelte').Snippet;
|
||||
}
|
||||
|
||||
let {
|
||||
log_lvl = 0,
|
||||
link_to_type,
|
||||
link_to_id,
|
||||
input_name = 'file_list',
|
||||
multiple = true,
|
||||
required = true,
|
||||
accept = 'audio/*, image/*, video/*, .bak, .cfg, .css, .csv, .doc, .docx, .gz, .htm, .html, .ini, .iso, .j2, .json, .key, .keynote, .md, .pdf, .ppt, .pptx, .rar, .rtf, .sql, .svelte, ttf, .txt, .xls, .xlsx, .xz, .zip, .bin, .dmg, .exe, .js, .msi, .php, .py, .sh',
|
||||
class_li_default = 'flex flex-col gap-1 items-center justify-center w-full max-w-2xl mx-auto my-1',
|
||||
class_li = '',
|
||||
input_class_li = ['file_drop_area'],
|
||||
table_class_li = ['table', 'table-sm', 'table-striped', '', 'text-sm'],
|
||||
upload_complete = $bindable(false),
|
||||
submit_status = $bindable(null),
|
||||
hosted_file_id_li = $bindable([]),
|
||||
hosted_file_obj_li = $bindable([]),
|
||||
hosted_file_obj_kv = $bindable({}),
|
||||
label
|
||||
}: Props = $props();
|
||||
|
||||
// Local Variables
|
||||
let task_id = link_to_id;
|
||||
let input_file_list: any = null;
|
||||
let ae_promises: key_val = {}; // Promise<any>;
|
||||
let task_id = $state(link_to_id);
|
||||
let input_file_list: any = $state(null);
|
||||
let ae_promises: key_val = $state({}); // Promise<any>;
|
||||
let ae_triggers: key_val = {};
|
||||
|
||||
let input_element_id = 'ae_comp__hosted_files_upload__input';
|
||||
@@ -234,7 +258,7 @@
|
||||
</script>
|
||||
|
||||
<!-- class:hidden={!$ae_loc.trusted_access} -->
|
||||
<form on:submit|preventDefault={handle_submit_form_files} class="{class_li_default} {class_li}">
|
||||
<form onsubmit={preventDefault(handle_submit_form_files)} class="{class_li_default} {class_li}">
|
||||
{#await ae_promises.upload__hosted_file_obj}
|
||||
<div class="text-lg flex flex-row gap-1 items-center justify-center">
|
||||
<span class="fas fa-spinner fa-spin m-1"></span>
|
||||
@@ -252,7 +276,7 @@
|
||||
class="svelte_input_file_label text-center"
|
||||
class:hidden={$ae_sess.files.disable_submit__hosted_file_obj}
|
||||
>
|
||||
<slot name="label">
|
||||
{#if label}{@render label()}{:else}
|
||||
<div>
|
||||
<span class="fas fa-upload"></span>
|
||||
<!-- Select files to upload -->
|
||||
@@ -264,7 +288,7 @@
|
||||
<strong>Presentation related files only</strong><br />
|
||||
(PowerPoint, Keynote, PDF, mp4, Word Doc, Excel, txt, etc)
|
||||
</span>
|
||||
</slot>
|
||||
{/if}
|
||||
</label>
|
||||
|
||||
<input
|
||||
|
||||
Reference in New Issue
Block a user