Lot of updates to Svelte 5 syntax

2025-07-23 16:21:27 -04:00
parent 8504f4b79a
commit 4861ae0499
41 changed files with 998 additions and 1079 deletions
--- a/src/lib/ae_sponsorships/ae_sponsorships_functions.ts
+++ b/src/lib/ae_sponsorships/ae_sponsorships_functions.ts
@@ -6,10 +6,6 @@ import { db_sponsorships } from "$lib/ae_sponsorships/db_sponsorships";
 // import { liveQuery } from "dexie";
 // import { db_core } from "$lib/db_core";

-// let example_li = liveQuery(
-//     () => db_core.sponsorships.toArray()
-// );
-
 let ae_promises: key_val = {}; // Promise<any>;


--- a/src/lib/element_manage_event_file_li.svelte
+++ b/src/lib/element_manage_event_file_li.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 import { onMount } from 'svelte';
 // import { liveQuery } from "dexie";
-import { Clipboard } from "flowbite-svelte";
+import MyClipboard from '$lib/e_app_clipboard.svelte';

 import type { key_val } from '$lib/ae_stores';
 import { ae_util } from '$lib/ae_utils/ae_utils';
@@ -233,25 +233,21 @@ let clipboard_success = $state(false);
                    Download
                    </span>
                </a>
-                <!-- <button
-                    type="button"
-                    use:clipboard={encodeURI(`${$ae_api.base_url}/event/file/${event_file_obj?.event_file_id_random}/download?filename=${ae_util.clean_filename(event_file_obj?.filename)}&x_no_account_id_token=direct-download`)}
-                    class="btn btn-sm p-1 preset-tonal-secondary *:hover:inline lg:text-xs"
-                    title="Copy the direct download file link: {ae_util.clean_filename(event_file_obj?.filename ?? 'unknown')}"
-                    >
-                    <span class="fas fa-copy mx-1"></span>
-                    <span class="hidden">
-                    Copy Link
-                    </span>
-                </button> -->
-
-                <Clipboard
+                <!-- {#if clipboard_success}Copied!{:else}Copy Access Link{/if} -->
+                <!-- <span class="fas fa-copy mx-1"></span> -->
+                <!-- <Clipboard
                    value={encodeURI(`${$ae_api.base_url}/event/file/${event_file_obj?.event_file_id_random}/download?filename=${ae_util.clean_filename(event_file_obj?.filename)}&x_no_account_id_token=direct-download`)}
                    bind:success={clipboard_success}
                    class="w-24"
                    >
                    {#if clipboard_success}Copied!{:else}Copy Link{/if}
-                </Clipboard>
+                </Clipboard> -->
+                <MyClipboard
+                    value={encodeURI(`${$ae_api.base_url}/event/file/${event_file_obj?.event_file_id_random}/download?filename=${ae_util.clean_filename(event_file_obj?.filename)}&x_no_account_id_token=direct-download`)}
+                    btn_text="Copy Link"
+                    btn_title="Copy the direct download link to the clipboard."
+                    btn_class="btn btn-sm preset-tonal-warning hover:preset-filled-warning-500 float-right m-1"
+                    ></MyClipboard>
            </div>

            <div class="flex flex-row gap-0.5">
@@ -268,24 +264,19 @@ let clipboard_success = $state(false);
                    Renamed
                    </span>
                </a>
-                <!-- <button
-                    type="button"
-                    use:clipboard={encodeURI(`${$ae_api.base_url}/event/file/${event_file_obj?.event_file_id_random}/download?filename=${event_file_obj?.event_session_code}-${ae_util.clean_filename(event_file_obj?.event_session_name).substring(0, 20)}-${ae_util.clean_filename(event_file_obj?.event_presenter_full_name)}.${event_file_obj?.extension}&x_no_account_id_token=direct-download`)}
-                    class="btn btn-sm p-1 preset-tonal-secondary *:hover:inline lg:text-xs"
-                    title="Copy the renamed file link"
-                    >
-                    <span class="fas fa-copy mx-1"></span>
-                    <span class="hidden">
-                    Copy Renamed
-                    </span>
-                </button> -->
-                <Clipboard
+                <!-- <Clipboard
                    value={encodeURI(`${$ae_api.base_url}/event/file/${event_file_obj?.event_file_id_random}/download?filename=${event_file_obj?.event_session_code}-${ae_util.clean_filename(event_file_obj?.event_session_name).substring(0, 20)}-${ae_util.clean_filename(event_file_obj?.event_presenter_full_name)}.${event_file_obj?.extension}&x_no_account_id_token=direct-download`)}
                    bind:success={clipboard_success}
                    class="w-24"
                    >
                    {#if clipboard_success}Copied!{:else}Copy Renamed{/if}
-                </Clipboard>
+                </Clipboard> -->
+                <MyClipboard
+                    value={encodeURI(`${$ae_api.base_url}/event/file/${event_file_obj?.event_file_id_random}/download?filename=${event_file_obj?.event_session_code}-${ae_util.clean_filename(event_file_obj?.event_session_name).substring(0, 20)}-${ae_util.clean_filename(event_file_obj?.event_presenter_full_name)}.${event_file_obj?.extension}&x_no_account_id_token=direct-download`)}
+                    btn_text="Copy Renamed"
+                    btn_title="Copy the renamed download link to the clipboard."
+                    btn_class="btn btn-sm preset-tonal-warning hover:preset-filled-warning-500 float-right m-1"
+                    ></MyClipboard>
            </div>

            <div class="flex flex-row gap-0.5">
@@ -302,24 +293,21 @@ let clipboard_success = $state(false);
                    Renamed
                    </span>
                </a>
-                <!-- <button
-                    type="button"
-                    use:clipboard={encodeURI(`${$ae_api.base_url}/event/file/${event_file_obj?.event_file_id_random}/download?filename=${event_file_obj?.event_session_code}-${ae_util.clean_filename(event_file_obj?.event_presentation_name).substring(0, 20)}-${ae_util.clean_filename(event_file_obj?.event_presenter_full_name)}.${event_file_obj?.extension}&x_no_account_id_token=direct-download`)}
-                    class="btn btn-sm p-1 preset-tonal-secondary *:hover:inline lg:text-xs"
-                    title="Copy the renamed file link"
-                    >
-                    <span class="fas fa-copy mx-1"></span>
-                    <span class="hidden">
-                    Copy Renamed
-                    </span>
-                </button> -->
-                <Clipboard
+                <!-- {#if clipboard_success}Copied!{:else}Copy Access Link{/if} -->
+                <!-- <span class="fas fa-copy mx-1"></span> -->
+                <!-- <Clipboard
                    value={encodeURI(`${$ae_api.base_url}/event/file/${event_file_obj?.event_file_id_random}/download?filename=${event_file_obj?.event_session_code}-${ae_util.clean_filename(event_file_obj?.event_presentation_name).substring(0, 20)}-${ae_util.clean_filename(event_file_obj?.event_presenter_full_name)}.${event_file_obj?.extension}&x_no_account_id_token=direct-download`)}
                    bind:success={clipboard_success}
                    class="w-24"
                    >
                    {#if clipboard_success}Copied!{:else}Copy Renamed{/if}
-                </Clipboard>
+                </Clipboard> -->
+                <MyClipboard
+                    value={encodeURI(`${$ae_api.base_url}/event/file/${event_file_obj?.event_file_id_random}/download?filename=${event_file_obj?.event_session_code}-${ae_util.clean_filename(event_file_obj?.event_presentation_name).substring(0, 20)}-${ae_util.clean_filename(event_file_obj?.event_presenter_full_name)}.${event_file_obj?.extension}&x_no_account_id_token=direct-download`)}
+                    btn_text="Copy Renamed"
+                    btn_title="Copy the renamed download link to the clipboard."
+                    btn_class="btn btn-sm preset-tonal-warning hover:preset-filled-warning-500 float-right m-1"
+                    ></MyClipboard>
            </div>
        </span>

--- a/src/lib/element_manage_event_file_li_all.svelte
+++ b/src/lib/element_manage_event_file_li_all.svelte
@@ -1,4 +1,23 @@
 <script lang="ts">
+interface Props {
+    // import { events_func } from '$lib/ae_events_functions';
+    container_class_li?: string|Array<string>;
+    link_to_type: string;
+    link_to_id: string;
+    allow_basic?: boolean;
+    allow_moderator?: boolean;
+    display_mode?: string; // 'default', 'compact', 'minimal', 'launcher'
+}
+
+let {
+    container_class_li = [],
+    link_to_type,
+    link_to_id,
+    allow_basic = false,
+    allow_moderator = false,
+    display_mode = 'default'
+}: Props = $props();
+
 import { liveQuery } from "dexie";

 import type { key_val } from '$lib/ae_stores';
@@ -9,17 +28,9 @@ import type { key_val } from '$lib/ae_stores';
 import Element_manage_event_file_li from '$lib/element_manage_event_file_li.svelte';

 // import { core_func } from '$lib/ae_core_functions';
-import { ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
+// import { ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
 import { db_events } from "$lib/ae_events/db_events";
 // import { events_loc, events_sess, events_slct, events_trigger } from '$lib/ae_events_stores';
-// import { events_func } from '$lib/ae_events_functions';
-
-export let container_class_li: string|Array<string> = [];
-export let link_to_type: string;
-export let link_to_id: string;
-export let allow_basic: boolean = false;
-export let allow_moderator: boolean = false;
-export let display_mode: string = 'default'; // 'default', 'compact', 'minimal', 'launcher'

 // export let show_convert_btn: null|boolean = null;

@@ -35,14 +46,17 @@ let dq__where_eq_val: string = link_to_id;

 // This should include all files that are associated with an object (event, location, session, presenter, etc.)
 // I am not sure why, but doing reverse() and then sortBy() seems to sort in descending order.
-let lq__event_file_obj_li = liveQuery(
-    async () => await db_events.files
+let lq__event_file_obj_li = $derived(liveQuery(async () => {
+    let results = await db_events.files
    .where(dq__where_val)
    .equals(dq__where_eq_val)
    .reverse()
    .sortBy('created_on')
    // .toArray()
-);
+    ;
+
+    return results;
+}));
 </script>


--- a/src/lib/element_manage_event_file_li_direct.svelte
+++ b/src/lib/element_manage_event_file_li_direct.svelte
@@ -1,5 +1,25 @@
 <script lang="ts">
-export let log_lvl: number = 0;
+interface Props {
+    log_lvl?: number;
+    // import { events_func } from '$lib/ae_events_functions';
+    container_class_li?: string|Array<string>;
+    link_to_type: string;
+    link_to_id: string;
+    allow_basic?: boolean;
+    allow_moderator?: boolean;
+    display_mode?: string; // 'default', 'compact', 'minimal', 'launcher'
+}
+
+let {
+    log_lvl = 0,
+    container_class_li = [],
+    link_to_type,
+    link_to_id,
+    allow_basic = false,
+    allow_moderator = false,
+    display_mode = 'default'
+}: Props = $props();
+
 import { liveQuery } from "dexie";

 import type { key_val } from '$lib/ae_stores';
@@ -13,14 +33,7 @@ import Element_manage_event_file_li from '$lib/element_manage_event_file_li.svel
 // import { ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
 import { db_events } from "$lib/ae_events/db_events";
 // import { events_loc, events_sess, events_slct, events_trigger } from '$lib/ae_events_stores';
-// import { events_func } from '$lib/ae_events_functions';

-export let container_class_li: string|Array<string> = [];
-export let link_to_type: string;
-export let link_to_id: string;
-export let allow_basic: boolean = false;
-export let allow_moderator: boolean = false;
-export let display_mode: string = 'default'; // 'default', 'compact', 'minimal', 'launcher'
 // export let show_convert_btn: null|boolean = null;

 // let ae_promises: key_val = {};
@@ -35,7 +48,7 @@ let dq__where_for_id_eq_val: string = link_to_id;

 // This should only include files that are directly linked to an object (event, location, session, presenter, etc.).
 // I am not sure why, but doing reverse() and then sortBy() seems to sort in descending order.
-$: lq__event_file_obj_li = liveQuery(async () => {
+let lq__event_file_obj_li = $derived(liveQuery(async () => {
    let results = await db_events.files
        .where(dq__where_val)
        .equals(dq__where_eq_val)
@@ -45,7 +58,7 @@ $: lq__event_file_obj_li = liveQuery(async () => {
        // .toArray()
        ;
    return results;
-});
+}));
 </script>