feat: migration to Svelte 5

src/lib/elements/element_sql_qry.svelte

@@ -14,22 +14,38 @@
 
     // *** Import Aether module components
 
-    // *** Export/Exposed variables and functions for component
-    export let api_cfg: any;
-    export let show_textarea = true;
-    export let button_label = 'Run SQL!';
-    export let show_record_count = true;
-    export let remove_breaks = false;
-    export let run_on_load = false;
+    
 
-    export let sql_statement: string;
-    export let sql_data = null;
-    export let as_list = false;
-    export let log_lvl: number = 0;
+    interface Props {
+        // *** Export/Exposed variables and functions for component
+        api_cfg: any;
+        show_textarea?: boolean;
+        button_label?: string;
+        show_record_count?: boolean;
+        remove_breaks?: boolean;
+        run_on_load?: boolean;
+        sql_statement: string;
+        sql_data?: any;
+        as_list?: boolean;
+        log_lvl?: number;
+    }
+
+    let {
+        api_cfg,
+        show_textarea = true,
+        button_label = 'Run SQL!',
+        show_record_count = true,
+        remove_breaks = false,
+        run_on_load = false,
+        sql_statement = $bindable(),
+        sql_data = null,
+        as_list = false,
+        log_lvl = 0
+    }: Props = $props();
 
     // *** Set initial variables
-    let ae_promises: key_val = {};
-    let sql_qry_result: any = null;
+    let ae_promises: key_val = $state({});
+    let sql_qry_result: any = $state(null);
 
     onMount(() => {
         console.log('** Element Mounted: ** Element SQL Query');
@@ -106,7 +122,7 @@
     <div class="text-center">
         <button
             type="button"
-            on:click={async () => {
+            onclick={async () => {
                 sql_qry_result = await handle_run_sql(sql_statement, sql_data, as_list, log_lvl);
             }}
             class="btn btn-md preset-tonal-primary hover:preset-tonal-primary border border-primary-500"