Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: migration to Svelte 5

Browse Source
This commit is contained in:
Scott Idem
2025-11-19 12:38:03 -05:00
parent d99e9ee1b0
commit f25b9ccd8f
46 changed files with 9578 additions and 9095 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
src/lib/elements/element_ae_crud.svelte
View File

@@ -1,4 +1,6 @@
<script lang="ts">
import { run } from 'svelte/legacy';
// *** Import Svelte core
import { createEventDispatcher, onMount } from 'svelte';
@@ -13,45 +15,77 @@
// *** Import Aether module variables and functions
// *** Import Aether module components
// *** Export/Exposed variables and functions for component
export let log_lvl: number = 0;
export let trigger_patch: any = null;
export let api_cfg: key_val = { api_crud_super_key: null };
// export let api_crud_super_key: null|string = api_cfg.api_crud_super_key;
export let object_type: string;
export let object_id: string;
export let field_name: string;
export let field_type: string = 'text'; // button, text, textarea, template (older method), select (in progress method)
export let field_value: any;
export let allow_null: boolean = false;
export let select_option_li: key_val = {};
export let val_empty_is_null: boolean = false; // This was added to help with a select option list. If the value is empty (''), it will be set to null.
export let edit_label: string = 'Edit';
export let display_inline: boolean = false;
export let display_block_edit: boolean = false;
export let textarea_cols: number = 80;
export let textarea_rows: number = 5;
// export let input_field_template: null|object = null;
export let hide_edit_btn = false;
export let outline_element = false;
export let show_crud = false;
export let btn_label = null; // '<span class="fas fa-check mx-1"></span> Save'; // PATCH
// export let show_field_name = true;
// export let show_original_value = true;
// export let trim_string = false;
// export let remove_breaks = false;
export let class_li: string = '';
interface Props {
// *** Export/Exposed variables and functions for component
log_lvl?: number;
trigger_patch?: any;
api_cfg?: key_val;
// export let api_crud_super_key: null|string = api_cfg.api_crud_super_key;
object_type: string;
object_id: string;
field_name: string;
field_type?: string; // button, text, textarea, template (older method), select (in progress method)
field_value: any;
allow_null?: boolean;
select_option_li?: key_val;
val_empty_is_null?: boolean; // This was added to help with a select option list. If the value is empty (''), it will be set to null.
edit_label?: string;
display_inline?: boolean;
display_block_edit?: boolean;
textarea_cols?: number;
textarea_rows?: number;
// export let input_field_template: null|object = null;
hide_edit_btn?: boolean;
outline_element?: boolean;
show_crud?: boolean;
btn_label?: any; // '<span class="fas fa-check mx-1"></span> Save'; // PATCH
// export let remove_breaks = false;
class_li?: string;
children?: import('svelte').Snippet;
}
let {
log_lvl = 0,
trigger_patch = $bindable(null),
api_cfg = { api_crud_super_key: null },
object_type,
object_id,
field_name,
field_type = 'text',
field_value = $bindable(),
allow_null = false,
select_option_li = {},
val_empty_is_null = false,
edit_label = 'Edit',
display_inline = false,
display_block_edit = false,
textarea_cols = 80,
textarea_rows = 5,
hide_edit_btn = false,
outline_element = false,
show_crud = $bindable(false),
btn_label = null,
class_li = '',
children
}: Props = $props();
// *** Set initial variables
let ae_promises: key_val = {}; // Promise<any>;
let patch_result: null | Promise<any> | key_val | string;
let ae_promises: key_val = $state({}); // Promise<any>;
let patch_result: null | Promise<any> | key_val | string = $state();
let original_field_value = field_value;
let original_field_value = $state(field_value);
const dispatch = createEventDispatcher();
@@ -64,11 +98,6 @@
}
});
$: if (trigger_patch == true) {
console.log('AE CRUD: Patch triggered!');
trigger_patch = null;
handle_obj_field_patch(field_value);
}
// Updated 2024-03-22
async function handle_obj_field_patch(new_field_value: any) {
@@ -144,17 +173,24 @@
return ae_promises.api_update__ae_obj;
}
run(() => {
if (trigger_patch == true) {
console.log('AE CRUD: Patch triggered!');
trigger_patch = null;
handle_obj_field_patch(field_value);
}
});
</script>
<div class="{class_li} ae_crud" class:show_crud class:display_inline class:outline_element>
<span class="field_viewing_wrapper">
<slot></slot>
{@render children?.()}
<button
class="btn btn-sm font-normal preset-tonal-warning hover:preset-tonal-error border border-error-500 field_show_btn"
class:hide_edit_btn
class:show_crud
on:dblclick={() => {
ondblclick={() => {
show_crud = true;
}}
title="Double click to edit property"
@@ -176,7 +212,7 @@
<button
class="btn btn-md font-normal ae_btn_surface_outlined m-1"
class:show_crud
on:click={() => {
onclick={() => {
show_crud = false;
}}
title="Close field editing"
@@ -222,7 +258,7 @@
{#if allow_null}
<button
class="btn btn-sm ae_btn_warning m-1"
on:click={() => {
onclick={() => {
field_value = null;
}}
title="Set value to NULL"
@@ -236,7 +272,7 @@
class="btn btn-lg ae_btn_warning_outlined m-1"
class:show_crud
disabled={field_value == original_field_value}
on:click={async () => {
onclick={async () => {
handle_obj_field_patch(field_value);
}}
title="Save new field value"