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

73
src/lib/ae_core/ae_comp__hosted_files_clip_video_v1.svelte
View File

@@ -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

74
src/lib/ae_core/ae_comp__hosted_files_upload.svelte
View File

@@ -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

8
src/lib/app_components/analytics.svelte
View File

@@ -1,7 +1,11 @@
<script lang="ts">
export let log_lvl: number = 0;
export let site_google_tracking_id: string = '';
interface Props {
log_lvl?: number;
site_google_tracking_id?: string;
}
let { log_lvl = 0, site_google_tracking_id = '' }: Props = $props();
if (log_lvl) {
console.log(`AE Analytics: site_google_tracking_id = `, site_google_tracking_id);
}

75
src/lib/app_components/e_app_codemirror_v5.svelte
View File

@@ -1,4 +1,6 @@
<script lang="ts">
import { run } from 'svelte/legacy';
// This will be the wrapper for the CodeMirror editor. It should hide most of the configuration requirements.
// WARNING: This has not been fully updated to Svelte version 5. It is a work in progress.
// *** Import Svelte version 5 specific
@@ -7,30 +9,49 @@
import { onMount, onDestroy } from 'svelte';
import { ensureCodeMirrorModules } from '../elements/codemirror_modules';
// Props
export let content: string = 'test test test test';
export let new_content: string = '';
// export let language: Extension = markdown(); // javascript()
export let theme_mode: string = 'light'; // 'dark' | 'light'
export let extensions: any[] = []; // Changed to any[] because Extension type is not directly available here
export let editable: boolean = true;
export let readonly: boolean = false;
export let placeholder: string = 'Start typing...';
export let show_line_numbers: boolean = false;
export let wrap_lines: boolean = true;
export let use_tab: boolean = true;
export let tab_size: number = 4;
let classes = '';
export { classes as class };
interface Props {
// Props
content?: string;
new_content?: string;
// export let language: Extension = markdown(); // javascript()
theme_mode?: string; // 'dark' | 'light'
extensions?: any[]; // Changed to any[] because Extension type is not directly available here
editable?: boolean;
readonly?: boolean;
placeholder?: string;
show_line_numbers?: boolean;
wrap_lines?: boolean;
use_tab?: boolean;
tab_size?: number;
class?: string;
}
let editor_element: HTMLDivElement;
let editorView: any; // Changed to any
let {
content = 'test test test test',
new_content = $bindable(''),
theme_mode = 'light',
extensions = [],
editable = true,
readonly = false,
placeholder = 'Start typing...',
show_line_numbers = false,
wrap_lines = true,
use_tab = true,
tab_size = 4,
class: classes = ''
}: Props = $props();
let cm_modules: any; // To hold the dynamically loaded CodeMirror modules
let editor_element: HTMLDivElement = $state();
let editorView: any = $state(); // Changed to any
let cm_modules: any = $state(); // To hold the dynamically loaded CodeMirror modules
async function initializeCodeMirror() {
if (!browser) return;
@@ -108,14 +129,16 @@
});
// Update editor content when `content` prop changes
$: if (cm_modules && editorView && editorView.state.doc.toString() !== content) {
editorView.setState(
cm_modules.EditorState.create({
doc: content,
extensions: editor_extensions // Use the reactive extensions
})
);
}
run(() => {
if (cm_modules && editorView && editorView.state.doc.toString() !== content) {
editorView.setState(
cm_modules.EditorState.create({
doc: content,
extensions: editor_extensions // Use the reactive extensions
})
);
}
});
</script>
{#if browser}

86
src/lib/element_qr_scanner_v2.svelte
View File

@@ -1,4 +1,6 @@
<script lang="ts">
import { run, preventDefault } from 'svelte/legacy';
// *** Import Svelte core
import { createEventDispatcher, onDestroy, onMount } from 'svelte';
// import 'html5-qrcode';
@@ -21,27 +23,41 @@
// *** Import Aether module components
// *** Export/Exposed variables and functions for component
export let start_qr_scanner: boolean = true;
export let show_pause_btn: boolean = false; // pause and resume buttons
export let show_qr_manual_text_entry_option: boolean = false;
export let show_qr_manual_badge_id_entry_option: boolean = false;
export let show_qr_scan_result: boolean = true;
export let qr_fps = 10;
export let qr_viewfinder_width = 275; // 275 seems good... Need to not let the this be larger than the container which changes based on the width of the screen/window.
export let qr_facing_mode = 'environment'; // environment, user, { exact: 'environment'}, { exact: 'user'}
interface Props {
// *** Export/Exposed variables and functions for component
start_qr_scanner?: boolean;
show_pause_btn?: boolean; // pause and resume buttons
show_qr_manual_text_entry_option?: boolean;
show_qr_manual_badge_id_entry_option?: boolean;
show_qr_scan_result?: boolean;
qr_fps?: number;
qr_viewfinder_width?: number; // 275 seems good... Need to not let the this be larger than the container which changes based on the width of the screen/window.
qr_facing_mode?: string; // environment, user, { exact: 'environment'}, { exact: 'user'}
}
let {
start_qr_scanner = $bindable(true),
show_pause_btn = false,
show_qr_manual_text_entry_option = false,
show_qr_manual_badge_id_entry_option = false,
show_qr_scan_result = true,
qr_fps = 10,
qr_viewfinder_width = 275,
qr_facing_mode = 'environment'
}: Props = $props();
const dispatch = createEventDispatcher();
// *** Set initial variables
let scanning_status: string = 'not_started';
let qr_scan_result: null | string = null;
let scanning_status: string = $state('not_started');
let qr_scan_result: null | string = $state(null);
let qr_found_text: null | string = null;
let qr_entered_text: null | string = null;
let qr_entered_badge_id: null | string = null;
let show_qr_manual_entry: null | boolean = null;
let disable_submit_badge_id_btn: boolean = true;
let qr_entered_text: null | string = $state(null);
let qr_entered_badge_id: null | string = $state(null);
let show_qr_manual_entry: null | boolean = $state(null);
let disable_submit_badge_id_btn: boolean = $state(true);
let user_media_status = 'not_requested';
@@ -258,16 +274,18 @@
}
}
$: if (
qr_entered_badge_id &&
qr_entered_badge_id.length >= 11 &&
qr_entered_badge_id &&
qr_entered_badge_id.length <= 14
) {
disable_submit_badge_id_btn = false;
} else {
disable_submit_badge_id_btn = true;
}
run(() => {
if (
qr_entered_badge_id &&
qr_entered_badge_id.length >= 11 &&
qr_entered_badge_id &&
qr_entered_badge_id.length <= 14
) {
disable_submit_badge_id_btn = false;
} else {
disable_submit_badge_id_btn = true;
}
});
function handle_qr_manual_entry() {
console.log('*** handle_qr_manual_entry() ***');
@@ -350,7 +368,7 @@
<div class="ae_options flex flex-row justify-center items-center gap-1 m-1">
<button
type="button"
on:click={() => {
onclick={() => {
navigator.mediaDevices
.getUserMedia({ video: true })
.then(get_user_media_success, get_user_media_error);
@@ -363,7 +381,7 @@
<button
type="button"
on:click={() => {
onclick={() => {
handle_start_qr_scanning_trust();
// Select back camera or fail with `OverconstrainedError`.
// html5_qr_code.start({ facingMode: { exact: "environment"} }, config, qrCodeSuccessCallback);
@@ -385,7 +403,7 @@
{#if scanning_status == 'scanning'}
<button
on:click={handle_stop_qr_scanning}
onclick={handle_stop_qr_scanning}
class="ae_btn__stop btn btn-sm preset-tonal-secondary"
>
<span class="fas fa-crosshairs fa-spin opacity-50 m-1"></span>
@@ -413,7 +431,7 @@
id="entered_text"
bind:value={qr_entered_text}
/>
<button on:click={handle_qr_manual_entry} class="btn btn-md preset-tonal-warning"
<button onclick={handle_qr_manual_entry} class="btn btn-md preset-tonal-warning"
><span class="fas fa-paper-plane"></span> Submit Text</button
>
@@ -424,12 +442,12 @@
label="Name or Email"
value={search_query_str}
focus={true}
on:oninput={handle_oninput_search_query_str}
ononinput={handle_oninput_search_query_str}
/>
</div>
{:else}
<button
on:click={() => {
onclick={() => {
handle_stop_qr_scanning();
show_qr_manual_entry = true;
}}
@@ -444,7 +462,7 @@
{#if show_qr_manual_badge_id_entry_option}
<div class="ae_container qr_manual_entry badge_id_entry">
{#if show_qr_manual_entry}
<form on:submit|preventDefault={() => handle_qr_manual_entry} class="flex">
<form onsubmit={preventDefault(() => handle_qr_manual_entry)} class="flex">
<!-- <label for="entered_badge_id" class="">Enter badge ID</label>
<input type="text" name="entered_badge_id" id="entered_badge_id" bind:value="{qr_entered_badge_id}"> -->
@@ -460,7 +478,7 @@
<button
type="submit"
on:click={handle_qr_manual_entry}
onclick={handle_qr_manual_entry}
disabled={disable_submit_badge_id_btn}
class="btn btn-md preset-tonal-primary border border-primary-500 m-1"
class:btn_default={disable_submit_badge_id_btn}
@@ -471,7 +489,7 @@
</form>
{:else}
<button
on:click={() => {
onclick={() => {
handle_stop_qr_scanning();
show_qr_manual_entry = true;
}}

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"

16
src/lib/elements/element_codemirror_editor.svelte
View File

@@ -3,10 +3,14 @@
import { browser } from '$app/environment';
import { ensureCodeMirrorModules } from './codemirror_modules';
export let content: string = '';
export let placeholder: string = 'Start typing...';
interface Props {
content?: string;
placeholder?: string;
}
let editor_container: HTMLDivElement;
let { content = $bindable(''), placeholder = 'Start typing...' }: Props = $props();
let editor_container: HTMLDivElement = $state();
let editor_view: any;
let cm: any; // Declare cm at the top level
@@ -141,15 +145,15 @@
<div class="toolbar p-1 bg-gray-100 border-b">
<button
type="button"
on:click={() => wrapSelection('**')}
onclick={() => wrapSelection('**')}
class="px-2 py-1 rounded hover:bg-gray-200"><b>B</b></button
>
<button
type="button"
on:click={() => wrapSelection('*')}
onclick={() => wrapSelection('*')}
class="px-2 py-1 rounded hover:bg-gray-200"><i>I</i></button
>
<button type="button" on:click={insertList} class="px-2 py-1 rounded hover:bg-gray-200"
<button type="button" onclick={insertList} class="px-2 py-1 rounded hover:bg-gray-200"
>List</button
>
</div>

10
src/lib/elements/element_codemirror_editor_wrapper.svelte
View File

@@ -2,9 +2,13 @@
import ElementCodemirrorEditor from './element_codemirror_editor.svelte';
import { browser } from '$app/environment';
export let html_text: string = '';
export let placeholder: string = 'Type your text here...';
export let classes: string = '';
interface Props {
html_text?: string;
placeholder?: string;
classes?: string;
}
let { html_text = $bindable(''), placeholder = 'Type your text here...', classes = '' }: Props = $props();
</script>
<div class="block w-full h-full {classes}">

120
src/lib/elements/element_data_store.svelte
View File

@@ -1,4 +1,6 @@
<script lang="ts">
import { run, preventDefault } from 'svelte/legacy';
import { onMount } from 'svelte';
import { api } from '$lib/api/api';
@@ -6,42 +8,25 @@
import { ae_util } from '$lib/ae_utils/ae_utils';
import type { key_val } from '$lib/stores/ae_stores';
export let expire_minutes: number = 10;
export let mount_reload_sec: number = 0;
export let ds_code: string;
export let ds_name: null | string = null;
export let ds_type: string = 'text';
export let for_type: null | string = null;
export let for_id: null | string = null;
console.log(
`ae_e_data_store ${ds_code} for_type=${for_type} for_id=${for_id} account_id=${$ae_loc.account_id}`
);
// export let store: string = 'local';
export let display: string = 'block'; // Avoid; Use class list instead
export let class_li: string = ''; // : string[] = [];
export let try_cache: boolean = true;
export let hide: boolean = false; // Hide the entire element
export let show_edit: boolean = false;
export let show_edit_btn: boolean = true;
export let show_view: boolean = true;
// export let show_delete_btn: boolean = false;
export let ds_loaded: boolean = false;
export let debug: boolean = false;
let ae_promises: key_val = {}; // Promise<any>;
let ds_get_results: Promise<any> | key_val;
let ds_get_results: Promise<any> | key_val = $state();
let ds_loading_status: string = 'starting...';
let ds_submit_results: Promise<any> | key_val;
let ds_submit_results: Promise<any> | key_val = $state();
let val_json: key_val;
let val_html: key_val;
let val_md: key_val;
export let val_sql: null | key_val = null;
let val_text: string;
let ds_code_obj = {
@@ -63,7 +48,7 @@
chk_account_id: null
};
let ae_ds_tmp: key_val;
let ae_ds_tmp: key_val = $state();
if (browser && localStorage.getItem(`ae_ds__${ds_code}`)) {
ae_ds_tmp = JSON.parse(localStorage.getItem(`ae_ds__${ds_code}`));
} else {
@@ -84,13 +69,54 @@
$ae_sess.ds.create_status = null;
$ae_sess.ds.update_status = null;
let trigger: null | string = null;
let trigger: null | string = $state(null);
// $: if (ae_ds_tmp) {
// console.log(`ae_e_data_store ae_ds_loc = `, ae_ds_tmp);
// }
import { browser } from '$app/environment';
interface Props {
expire_minutes?: number;
mount_reload_sec?: number;
ds_code: string;
ds_name?: null | string;
ds_type?: string;
for_type?: null | string;
for_id?: null | string;
// export let store: string = 'local';
display?: string; // Avoid; Use class list instead
class_li?: string; // : string[] = [];
try_cache?: boolean;
hide?: boolean; // Hide the entire element
show_edit?: boolean;
show_edit_btn?: boolean;
show_view?: boolean;
// export let show_delete_btn: boolean = false;
ds_loaded?: boolean;
debug?: boolean;
val_sql?: null | key_val;
}
let {
expire_minutes = 10,
mount_reload_sec = 0,
ds_code,
ds_name = null,
ds_type = 'text',
for_type = null,
for_id = null,
display = 'block',
class_li = '',
try_cache = true,
hide = false,
show_edit = $bindable(false),
show_edit_btn = true,
show_view = $bindable(true),
ds_loaded = $bindable(false),
debug = false,
val_sql = $bindable(null)
}: Props = $props();
let ae_ds_loc_test: any;
if (browser) {
@@ -152,24 +178,6 @@
}
});
// let ds_code_li = {}; //: key_val; // = ae_loc_tmp.ds;
// console.log(`ae_ ds_code_li = `, ds_code_li);
$: if (trigger == 'load__ds__code' && ds_code && ds_type) {
console.log(
`ae_e_data_store: ae_ load__ds__code: ${ds_code} ds_type=${ds_type} for_type=${for_type} for_id=${for_id} ${try_cache}`
);
trigger = null;
load_data_store({
code: ds_code,
type: ds_type,
for_type: for_type,
for_id: for_id,
try_cache: try_cache
});
}
async function load_data_store({
code,
@@ -476,6 +484,26 @@
return ae_promises.update__data_store_obj;
}
// let ds_code_li = {}; //: key_val; // = ae_loc_tmp.ds;
// console.log(`ae_ ds_code_li = `, ds_code_li);
run(() => {
if (trigger == 'load__ds__code' && ds_code && ds_type) {
console.log(
`ae_e_data_store: ae_ load__ds__code: ${ds_code} ds_type=${ds_type} for_type=${for_type} for_id=${for_id} ${try_cache}`
);
trigger = null;
load_data_store({
code: ds_code,
type: ds_type,
for_type: for_type,
for_id: for_id,
try_cache: try_cache
});
}
});
</script>
<div class="ae__elem__data_store relative {class_li}" class:hide>
@@ -503,7 +531,7 @@
<section class="edit z-50">
<form
class="ae__elem__data_store__form"
on:submit|preventDefault={handle_submit_form}
onsubmit={preventDefault(handle_submit_form)}
>
<input type="hidden" name="ds_id_random" value={ae_ds_tmp.id} />
@@ -637,7 +665,7 @@
<button
type="button"
class="btn preset-tonal-warning"
on:click={() => {
onclick={() => {
if (confirm('Are you sure you want to delete this data store?')) {
trigger = 'delete__ds__code';
// $slct_trigger = 'delete__ds__code';
@@ -653,7 +681,7 @@
<button
type="button"
class="btn preset-tonal-primary"
on:click={() => {
onclick={() => {
show_edit = false;
show_view = true;
}}
@@ -666,7 +694,7 @@
type="submit"
class="btn preset-tonal-primary"
disabled={ds_submit_results instanceof Promise && !ds_submit_results}
on:click={() => {
onclick={() => {
trigger = 'save__ds__code';
// $slct_trigger = 'save__ds__code';
}}
@@ -740,7 +768,7 @@
class="ae_btn_edit__ds btn hover:preset-tonal-warning text-xs absolute top-0 right-0 opacity-30 hover:opacity-100 transition delay-700 hover:delay-200 m-1 p-1"
class:opacity-5={!$ae_loc.manager_access}
class:hidden={!show_edit_btn || !$ae_loc.trusted_access}
on:dblclick={() => {
ondblclick={() => {
trigger = 'load__ds__code';
show_edit = true;
show_view = false;

145
src/lib/elements/element_data_store_v2.svelte
View File

@@ -1,4 +1,6 @@
<script lang="ts">
import { run, preventDefault } from 'svelte/legacy';
import { browser } from '$app/environment';
// import { liveQuery } from "dexie"; // Use this in the future???
@@ -9,46 +11,71 @@
import { ae_util } from '$lib/ae_utils/ae_utils';
import type { key_val } from '$lib/stores/ae_stores';
export let log_lvl: number = 0;
export let expire_minutes: number = 15;
export let mount_reload_sec: number = 0;
export let ds_code: string;
export let ds_name: null | string = null;
export let ds_type: string = 'text';
export let for_type: null | string = null;
export let for_id: null | string = null;
console.log(
`ae_e_data_store ${ds_code} account_id=${$ae_loc.account_id} for_type=${for_type} for_id=${for_id}`
);
// export let store: string = 'local';
// export let display: string = 'block'; // Avoid; Use class list instead
export let class_li: string = ''; // : string[] = [];
export let try_cache: boolean = true;
export let hide: boolean = false; // Hide the entire element
export let show_edit: boolean = false;
export let show_edit_btn: boolean = false; // You must still be at least an admin (vs a manager).
export let show_view: boolean = true;
// export let show_delete_btn: boolean = false;
export let ds_loaded: boolean = false;
export let debug: boolean = false;
let ae_promises: key_val = {};
// let ae_tmp: key_val = {};
// let ae_triggers: key_val = {};
let ds_get_results: Promise<any> | key_val;
export let ds_loading_status: string = 'starting';
let ds_submit_results: Promise<any> | key_val;
let ds_get_results: Promise<any> | key_val = $state();
let ds_submit_results: Promise<any> | key_val = $state();
let val_json: key_val;
let val_html: key_val;
let val_md: key_val;
export let val_sql: null | key_val = null;
interface Props {
log_lvl?: number;
expire_minutes?: number;
mount_reload_sec?: number;
ds_code: string;
ds_name?: null | string;
ds_type?: string;
for_type?: null | string;
for_id?: null | string;
// export let display: string = 'block'; // Avoid; Use class list instead
class_li?: string; // : string[] = [];
try_cache?: boolean;
hide?: boolean; // Hide the entire element
show_edit?: boolean;
show_edit_btn?: boolean; // You must still be at least an admin (vs a manager).
show_view?: boolean;
// export let show_delete_btn: boolean = false;
ds_loaded?: boolean;
debug?: boolean;
ds_loading_status?: string;
val_sql?: null | key_val;
}
let {
log_lvl = 0,
expire_minutes = 15,
mount_reload_sec = 0,
ds_code,
ds_name = null,
ds_type = 'text',
for_type = null,
for_id = null,
class_li = '',
try_cache = true,
hide = false,
show_edit = $bindable(false),
show_edit_btn = false,
show_view = $bindable(true),
ds_loaded = $bindable(false),
debug = false,
ds_loading_status = $bindable('starting'),
val_sql = $bindable(null)
}: Props = $props();
let val_text: string;
let ds_code_obj = {
@@ -70,7 +97,7 @@
chk_account_id: null
};
let ae_ds_tmp: key_val;
let ae_ds_tmp: key_val = $state();
if (browser && try_cache && localStorage.getItem(`ae_ds__${ds_code}`)) {
if (log_lvl) {
console.log(`ae_e_data_store: Found cached data for ${ds_code}`);
@@ -91,7 +118,7 @@
$ae_sess.ds.create_status = null;
$ae_sess.ds.update_status = null;
let trigger: null | string = null;
let trigger: null | string = $state(null);
// This is a quick check to make sure the data store is not stale. If it is, then we need to trigger a reload.
if (
@@ -139,23 +166,6 @@
}, random_ms);
}
$: if (trigger == 'load__ds__code' && ds_code && ds_type) {
if (log_lvl) {
console.log(
`ae_e_data_store: ae_ load__ds__code: ${ds_code} ds_type=${ds_type} for_type=${for_type} for_id=${for_id} ${try_cache}`
);
}
trigger = null;
load_data_store({
code: ds_code,
type: ds_type,
for_type: for_type,
for_id: for_id,
try_cache: try_cache
});
}
async function load_data_store({
code,
@@ -497,6 +507,25 @@
return ae_promises.update__data_store_obj;
}
run(() => {
if (trigger == 'load__ds__code' && ds_code && ds_type) {
if (log_lvl) {
console.log(
`ae_e_data_store: ae_ load__ds__code: ${ds_code} ds_type=${ds_type} for_type=${for_type} for_id=${for_id} ${try_cache}`
);
}
trigger = null;
load_data_store({
code: ds_code,
type: ds_type,
for_type: for_type,
for_id: for_id,
try_cache: try_cache
});
}
});
</script>
<div class="ae__elem__data_store relative {class_li}" class:hidden={hide}>
@@ -538,7 +567,7 @@
max-w-6xl
"
>
<form class="flex flex-col gap-1" on:submit|preventDefault={handle_submit_form}>
<form class="flex flex-col gap-1" onsubmit={preventDefault(handle_submit_form)}>
<input type="hidden" name="ds_id_random" value={ae_ds_tmp.id} />
<div class="flex flex-row gap-1">
@@ -682,7 +711,7 @@
<button
type="button"
class="btn preset-tonal-warning"
on:click={() => {
onclick={() => {
if (confirm('Are you sure you want to delete this data store?')) {
trigger = 'delete__ds__code';
// $slct_trigger = 'delete__ds__code';
@@ -711,7 +740,7 @@
type="submit"
class="btn preset-tonal-primary border border-primary-500"
disabled={ds_submit_results instanceof Promise && !ds_submit_results}
on:click={() => {
onclick={() => {
trigger = 'save__ds__code';
// $slct_trigger = 'save__ds__code';
}}
@@ -742,22 +771,24 @@
</div>
</form>
<svelte:fragment slot="footer">
<div class="text-center w-full">
<button
type="button"
on:click={() => {
{#snippet footer()}
<div class="text-center w-full">
<button
type="button"
onclick={() => {
console.log('Close modal edit data store.');
show_edit = false;
show_view = true;
}}
class="btn btn-sm preset-tonal-warning hover:preset-tonal-warning border border-warning-500"
>
<span class="fas fa-times mx-1"></span>
Close
</button>
</div>
</svelte:fragment>
class="btn btn-sm preset-tonal-warning hover:preset-tonal-warning border border-warning-500"
>
<span class="fas fa-times mx-1"></span>
Close
</button>
</div>
{/snippet}
</Modal>
<!-- </section> -->
@@ -807,7 +838,7 @@
($ae_loc.manager_access && $ae_loc.edit_mode) ||
(show_edit_btn && $ae_loc.administrator_access && $ae_loc.edit_mode)
)}
on:dblclick={() => {
ondblclick={() => {
trigger = 'load__ds__code';
show_edit = true;
show_view = false;

98
src/lib/elements/element_input_file.svelte
View File

@@ -1,4 +1,6 @@
<script lang="ts">
import { run, preventDefault } from 'svelte/legacy';
import { createEventDispatcher, onMount, tick } from 'svelte';
import type { key_val } from '$lib/stores/ae_stores';
@@ -7,52 +9,50 @@
import { check_hosted_file_obj_w_hash } from '$lib/ae_core/core__check_hosted_file_obj_w_hash';
import { ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/stores/ae_stores';
export let element_id = 'svelte_input_file_element';
export let input_name = 'file_list';
export let container_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 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 untrusted_extension_list = ['bin', 'dmg', 'exe', 'js', 'msi', 'php', 'py', 'sh'];
export let legacy_extension_list = ['avi', 'doc', 'ppt', 'xls', 'wmv'];
export let use_selected_file_table = true;
export let file_list_status: null | string = null;
export let processed_file_list: any[] = [];
const dispatch = createEventDispatcher();
export let input_file_list: any = null;
let input_file_list_processed: any[] = [];
interface Props {
element_id?: string;
input_name?: string;
container_class_li?: string[];
input_class_li?: string[];
table_class_li?: string[];
multiple?: boolean;
required?: boolean;
accept?: string;
untrusted_extension_list?: any;
legacy_extension_list?: any;
use_selected_file_table?: boolean;
file_list_status?: null | string;
processed_file_list?: any[];
input_file_list?: any;
}
let {
element_id = 'svelte_input_file_element',
input_name = 'file_list',
container_class_li = [],
input_class_li = ['file_drop_area'],
table_class_li = ['table', 'table-sm', 'table-striped', '', 'text-sm'],
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',
untrusted_extension_list = ['bin', 'dmg', 'exe', 'js', 'msi', 'php', 'py', 'sh'],
legacy_extension_list = ['avi', 'doc', 'ppt', 'xls', 'wmv'],
use_selected_file_table = true,
file_list_status = $bindable(null),
processed_file_list = $bindable([]),
input_file_list = $bindable(null)
}: Props = $props();
let input_file_list_processed: any[] = $state([]);
onMount(() => {
console.log('** Element Mounted: ** Element Input File');
});
$: if (input_file_list) {
console.log(input_file_list);
process_file_list(input_file_list).then(function (result) {
// console.log(result);
if (!result || !result.length) {
file_list_status = 'none';
}
// Save the results to the file upload list to be displayed as a table.
input_file_list_processed = result; // Includes file hash
dispatch('input_file_list_updated', {
element_id: element_id,
input_file_list: input_file_list,
input_file_list_processed: result // Includes file hash
});
});
}
async function process_file_list(file_list) {
console.log('*** process_file_list() ***');
@@ -309,6 +309,28 @@
return true;
}
run(() => {
if (input_file_list) {
console.log(input_file_list);
process_file_list(input_file_list).then(function (result) {
// console.log(result);
if (!result || !result.length) {
file_list_status = 'none';
}
// Save the results to the file upload list to be displayed as a table.
input_file_list_processed = result; // Includes file hash
dispatch('input_file_list_updated', {
element_id: element_id,
input_file_list: input_file_list,
input_file_list_processed: result // Includes file hash
});
});
}
});
</script>
<div
@@ -370,9 +392,9 @@
<tr>
<td class="file_remove">
<button
on:click|preventDefault={() => {
onclick={preventDefault(() => {
remove_file_from_filelist(file_index);
}}
})}
class="btn btn-md preset-tonal-warning hover:preset-filled-secondary-500 m-1"
title="Remove file from upload list"
>

94
src/lib/elements/element_input_files_tbl.svelte
View File

@@ -1,4 +1,6 @@
<script lang="ts">
import { run, preventDefault } from 'svelte/legacy';
import { createEventDispatcher, onMount, tick } from 'svelte';
import type { key_val } from '$lib/stores/ae_stores';
@@ -7,17 +9,31 @@
import { check_hosted_file_obj_w_hash } from '$lib/ae_core/core__check_hosted_file_obj_w_hash';
import { ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/stores/ae_stores';
// export let element_id = 'svelte_input_file_element';
export let container_class_li: string[] = [];
export let table_class_li: string[] = ['table', 'table-sm', 'table-striped', '', 'text-sm'];
export let untrusted_extension_list = ['bin', 'dmg', 'exe', 'js', 'msi', 'php', 'py', 'sh'];
export let legacy_extension_list = ['avi', 'doc', 'ppt', 'xls', 'wmv'];
export let use_selected_file_table = true;
export let input_file_list: any = null;
export let file_list_status: null | string = null;
export let processed_file_list: any[] = [];
interface Props {
// export let element_id = 'svelte_input_file_element';
container_class_li?: string[];
table_class_li?: string[];
untrusted_extension_list?: any;
legacy_extension_list?: any;
use_selected_file_table?: boolean;
input_file_list?: any;
file_list_status?: null | string;
processed_file_list?: any[];
}
let {
container_class_li = [],
table_class_li = ['table', 'table-sm', 'table-striped', '', 'text-sm'],
untrusted_extension_list = ['bin', 'dmg', 'exe', 'js', 'msi', 'php', 'py', 'sh'],
legacy_extension_list = ['avi', 'doc', 'ppt', 'xls', 'wmv'],
use_selected_file_table = true,
input_file_list = $bindable(null),
file_list_status = $bindable(null),
processed_file_list = $bindable([])
}: Props = $props();
// const dispatch = createEventDispatcher();
@@ -27,33 +43,6 @@
console.log('** Element Mounted: ** Element Input File');
});
$: if (input_file_list) {
console.log(input_file_list);
process_file_list(input_file_list).then(function (result) {
// console.log(result);
if (!result || !result.length) {
processed_file_list = [];
file_list_status = 'none';
}
// Save the results to the file upload list to be displayed as a table.
// input_file_list_processed = result; // Includes file hash
// dispatch(
// 'input_file_list_updated',
// {
// element_id: element_id,
// input_file_list: input_file_list,
// input_file_list_processed: result, // Includes file hash
// }
// );
});
} else {
processed_file_list = [];
file_list_status = 'none';
}
async function process_file_list(file_list) {
console.log('*** process_file_list() ***');
@@ -310,6 +299,35 @@
return true;
}
run(() => {
if (input_file_list) {
console.log(input_file_list);
process_file_list(input_file_list).then(function (result) {
// console.log(result);
if (!result || !result.length) {
processed_file_list = [];
file_list_status = 'none';
}
// Save the results to the file upload list to be displayed as a table.
// input_file_list_processed = result; // Includes file hash
// dispatch(
// 'input_file_list_updated',
// {
// element_id: element_id,
// input_file_list: input_file_list,
// input_file_list_processed: result, // Includes file hash
// }
// );
});
} else {
processed_file_list = [];
file_list_status = 'none';
}
});
</script>
<div
@@ -346,9 +364,9 @@
<tr>
<td class="file_remove">
<button
on:click|preventDefault={() => {
onclick={preventDefault(() => {
remove_file_from_filelist(file_index);
}}
})}
class="btn btn-md preset-tonal-warning hover:preset-filled-secondary-500 m-1"
title="Remove file from upload list"
>

344
src/lib/elements/element_input_v2.svelte
View File

@@ -1,37 +1,28 @@
<script lang="ts">
import { run } from 'svelte/legacy';
import { createEventDispatcher, onMount } from 'svelte';
import util from './utilities.js';
// import Select_element_lu from './element_select_lu.svelte';
/* *** BEGIN *** Core input settings */
export let id_random: string = ''; // OSIT Aether specific
export let obj_type: string = ''; // OSIT Aether specific
export let obj_prop_name: string = ''; // OSIT Aether specific
export let use_name_prefix: boolean = false;
export let name: string = use_name_prefix ? `${obj_type}__${obj_prop_name}` : obj_prop_name;
// console.log(name);
export let id: string = `${obj_type}__${obj_prop_name}--${id_random}`; // Same as the value for "for"
// console.log(id);
export let value: null | boolean | number | string = null; // The current value of the property
console.log(`Input name=${name} value=${value}`);
export let default_value: null | boolean | number | string = null; // The default value for when value is ''
// console.log('Default Value:', default_value);
export let original_value: null | boolean | number | string = value; // The original value
console.log('Original Value', original_value);
export let data_type: string = typeof value; // boolean, number, string, json
console.log('Data Type:', data_type);
// hidden, text, email, date, number, select, checkbox, radio, textarea, etc
export let type: string = 'text'; // Input type
let set_input_type = (node) => {
let set_input_type = $state((node) => {
node.type = 'text';
};
});
let input_element_type_list = ['checkbox', 'date', 'email', 'hidden', 'number', 'text'];
if (input_element_type_list.includes(type)) {
set_input_type = (node) => {
@@ -42,71 +33,142 @@
console.log(`Input name=${name} value=${value} type=${type}`);
export let disabled: boolean = false; // attribute format: disabled
export let readonly: boolean = false; // attribute format: readonly="readonly"
export let required: boolean = false; // attribute format: required="required"
export let pattern: null | string = null;
export let focus: boolean = false;
/* *** END *** Core input settings */
/* *** BEGIN *** Container content, layout, and behavior */
// Input element specific label and placeholder
export let label: string = '';
export let label_date: string = 'Date';
export let label_time: string = 'Time';
export let placeholder: string = label;
// Input description for container
export let description: string = ''; // Description
// Layout and style
export let content_layout: string = ''; // Default empty is label wrap first, label_start, label_end, floating_input
export let class_li: string[] = []; // Classes for the input element
export let style: string = ''; // Style for the input element
export let display: string = ''; // Default empty is inline. inline, block, inline-block, break (break after)
export let label_class_li: string[] = [];
export let label_style: string = '';
export let label_display: string = ''; // Default empty is inline. inline, block, inline-block, break (break after)
export let label_location: string = 'start'; // start, end
export let description_location: string = 'end'; // start, end
export let container_class_li: string[] = []; // Classes for the container element
export let container_style: string = '';
export let container_display: string = ''; // Default empty is div block. inline, block, inline-block, break (break after)
export let multipart_class_li: string[] = [];
export let input_mode: null | string = null; // This is for special/custom modes like a rich text editor or search.
console.log(`Input input_mode=${input_mode}`);
/* *** END *** Container content, layout, and behavior */
/* *** BEGIN *** Input type specific */
// For checkbox, radio, and select option
export let option_li: any[] = []; // For checkbox, radio, and select inputs. Not specific to select options. List of key value pairs.
export let option_none: boolean = false; // If set to true then it will add an option using the select_option_none_text value
export let option_none_text: string = '-- Not Selected --'; // If set to true then it will add an option using the select_option_none_text value
// For textarea
export let size: number = null;
export let rows: number = 3;
export let cols: number = 80;
if (type == 'textarea') {
console.log(`Input textarea size=${size} rows=${rows} cols=${cols}`);
}
// For custom date_time. Not "date" or "time" input type only.
export let date_time_tz: null | string = null;
interface Props {
/* *** BEGIN *** Core input settings */
id_random?: string; // OSIT Aether specific
obj_type?: string; // OSIT Aether specific
obj_prop_name?: string; // OSIT Aether specific
use_name_prefix?: boolean;
name?: string;
// console.log(name);
id?: string; // Same as the value for "for"
// console.log(id);
value?: null | boolean | number | string; // The current value of the property
default_value?: null | boolean | number | string; // The default value for when value is ''
// console.log('Default Value:', default_value);
original_value?: null | boolean | number | string; // The original value
data_type?: string; // boolean, number, string, json
// hidden, text, email, date, number, select, checkbox, radio, textarea, etc
type?: string; // Input type
disabled?: boolean; // attribute format: disabled
readonly?: boolean; // attribute format: readonly="readonly"
required?: boolean; // attribute format: required="required"
pattern?: null | string;
focus?: boolean;
// Input element specific label and placeholder
label?: string;
label_date?: string;
label_time?: string;
placeholder?: string;
// Input description for container
description?: string; // Description
// Layout and style
content_layout?: string; // Default empty is label wrap first, label_start, label_end, floating_input
class_li?: string[]; // Classes for the input element
style?: string; // Style for the input element
display?: string; // Default empty is inline. inline, block, inline-block, break (break after)
label_class_li?: string[];
label_style?: string;
label_display?: string; // Default empty is inline. inline, block, inline-block, break (break after)
label_location?: string; // start, end
description_location?: string; // start, end
container_class_li?: string[]; // Classes for the container element
container_style?: string;
container_display?: string; // Default empty is div block. inline, block, inline-block, break (break after)
multipart_class_li?: string[];
input_mode?: null | string; // This is for special/custom modes like a rich text editor or search.
// For checkbox, radio, and select option
option_li?: any[]; // For checkbox, radio, and select inputs. Not specific to select options. List of key value pairs.
option_none?: boolean; // If set to true then it will add an option using the select_option_none_text value
option_none_text?: string; // If set to true then it will add an option using the select_option_none_text value
// For textarea
size?: number;
rows?: number;
cols?: number;
// For custom date_time. Not "date" or "time" input type only.
date_time_tz?: null | string;
more_html?: import('svelte').Snippet;
}
let {
id_random = '',
obj_type = '',
obj_prop_name = '',
use_name_prefix = false,
name = use_name_prefix ? `${obj_type}__${obj_prop_name}` : obj_prop_name,
id = `${obj_type}__${obj_prop_name}--${id_random}`,
value = $bindable(null),
default_value = null,
original_value = value,
data_type = typeof value,
type = 'text',
disabled = $bindable(false),
readonly = $bindable(false),
required = $bindable(false),
pattern = null,
focus = false,
label = '',
label_date = 'Date',
label_time = 'Time',
placeholder = label,
description = '',
content_layout = '',
class_li = [],
style = $bindable(''),
display = '',
label_class_li = [],
label_style = '',
label_display = '',
label_location = 'start',
description_location = 'end',
container_class_li = [],
container_style = $bindable(''),
container_display = '',
multipart_class_li = [],
input_mode = null,
option_li = [],
option_none = false,
option_none_text = '-- Not Selected --',
size = null,
rows = 3,
cols = 80,
date_time_tz = null,
more_html
}: Props = $props();
let value_datetime = null;
let value_date = null;
let value_time = null;
let value_date = $state(null);
let value_time = $state(null);
if (type == 'date_time' && value) {
console.log(`date_time value: ${value}`);
@@ -135,7 +197,7 @@
let multipart_style;
let label_begin;
let checkbox_none;
let checked;
let checked = $state();
let checkbox_none_text;
let checkbox_li;
let radio_option_class_li;
@@ -187,28 +249,36 @@
// value = '';
// }
$: if (disabled) {
disabled = true;
} // else { disabled=false; }
$: if (readonly) {
readonly = true;
} // else { readonly=false; }
$: if (required) {
required = true;
} // else { required=true; }
$: if (data_type) {
console.log(`Input value data_type=${data_type}`);
} else if (data_type == 'json') {
console.log(`Need to convert JSON object to string.`);
if (typeof value === 'object') {
value = JSON.stringify(value);
console.log(`Value as data type (${data_type}): ${value}`);
} else {
console.log('Value is not an object type');
console.log(typeof value);
run(() => {
if (disabled) {
disabled = true;
}
}
}); // else { disabled=false; }
run(() => {
if (readonly) {
readonly = true;
}
}); // else { readonly=false; }
run(() => {
if (required) {
required = true;
}
}); // else { required=true; }
run(() => {
if (data_type) {
console.log(`Input value data_type=${data_type}`);
} else if (data_type == 'json') {
console.log(`Need to convert JSON object to string.`);
if (typeof value === 'object') {
value = JSON.stringify(value);
console.log(`Value as data type (${data_type}): ${value}`);
} else {
console.log('Value is not an object type');
console.log(typeof value);
}
}
});
// // input_mode options: null or '' assume 'text', 'none', 'text', 'tel', 'url', 'email', 'numeric', 'decimal', and 'search'
// $: if (input_mode === null || input_mode == '') {
@@ -218,51 +288,55 @@
// }
// console.log(`input_mode=${input_mode}`);
$: if (container_display == '' || container_display == 'block') {
console.log(`input name=${name} container_display=${container_display}`);
// NOTE: Using a div will be displayed as block by default
} else if (container_display == 'inline') {
console.log(`input name=${name} container_display=${container_display}`);
container_class_li.push('container_inline');
container_style = 'display: inline;';
} else if (container_display == 'inline-block') {
console.log(`input name=${name} container_display=${container_display}`);
container_class_li.push('container_inline_block');
container_style = 'display: inline-block;';
} else if (typeof container_display === 'undefined') {
console.log(`input name=${name} container_display=${container_display}`);
}
$: if (content_layout == '' || content_layout == 'label_begin') {
console.log(`input name=${name} content_layout=${content_layout}`);
// label_begin = true;
} else if (content_layout == 'label_end') {
console.log(`input name=${name} content_layout=${content_layout}`);
// label_begin = false;
} else if (content_layout == 'floating_input') {
console.log(`input name=${name} content_layout=${content_layout}`);
// label_begin = false;
if (type != 'date_time') {
container_class_li.push('form-floating'); // set the container class list
} else {
multipart_class_li.push('form-floating'); // set the container with multi input parts class list
run(() => {
if (container_display == '' || container_display == 'block') {
console.log(`input name=${name} container_display=${container_display}`);
// NOTE: Using a div will be displayed as block by default
} else if (container_display == 'inline') {
console.log(`input name=${name} container_display=${container_display}`);
container_class_li.push('container_inline');
container_style = 'display: inline;';
} else if (container_display == 'inline-block') {
console.log(`input name=${name} container_display=${container_display}`);
container_class_li.push('container_inline_block');
container_style = 'display: inline-block;';
} else if (typeof container_display === 'undefined') {
console.log(`input name=${name} container_display=${container_display}`);
}
});
if (type === 'select') {
class_li.push('form-select'); // set the select class list
} else {
console.log('Make form-control???');
class_li.push('form-control'); // set the input, select, textarea class list
}
run(() => {
if (content_layout == '' || content_layout == 'label_begin') {
console.log(`input name=${name} content_layout=${content_layout}`);
// label_begin = true;
} else if (content_layout == 'label_end') {
console.log(`input name=${name} content_layout=${content_layout}`);
// label_begin = false;
} else if (content_layout == 'floating_input') {
console.log(`input name=${name} content_layout=${content_layout}`);
// label_begin = false;
if (type === 'textarea') {
let estimate_row_rem = rows + 5.5;
style = `height: calc(2px + ${estimate_row_rem}rem);`;
if (type != 'date_time') {
container_class_li.push('form-floating'); // set the container class list
} else {
multipart_class_li.push('form-floating'); // set the container with multi input parts class list
}
if (type === 'select') {
class_li.push('form-select'); // set the select class list
} else {
console.log('Make form-control???');
class_li.push('form-control'); // set the input, select, textarea class list
}
if (type === 'textarea') {
let estimate_row_rem = rows + 5.5;
style = `height: calc(2px + ${estimate_row_rem}rem);`;
}
} else if (typeof content_layout === 'undefined') {
console.log(`input name=${name} content_layout=${content_layout}`);
}
} else if (typeof content_layout === 'undefined') {
console.log(`input name=${name} content_layout=${content_layout}`);
}
});
// function handle_oninput_dispatch() {
// console.log(input);
@@ -379,7 +453,7 @@
data-obj_type={obj_type}
data-obj_prop_name={obj_prop_name}
use:util.set_focus={focus}
on:input={handle_oninput_dispatch}
oninput={handle_oninput_dispatch}
bind:value
/>
@@ -415,7 +489,7 @@
data-id_random={id_random}
data-obj_type={obj_type}
data-obj_prop_name={obj_prop_name}
on:input={handle_oninput_dispatch}
oninput={handle_oninput_dispatch}
/>
{#if !label_begin}
@@ -446,7 +520,7 @@
data-id_random={id_random}
data-obj_type={obj_type}
data-obj_prop_name={obj_prop_name}
on:input={handle_oninput_dispatch}
oninput={handle_oninput_dispatch}
/>
{#if !label_begin}
@@ -477,7 +551,7 @@
{disabled}
{required}
{checked}
on:input={handle_oninput_dispatch}
oninput={handle_oninput_dispatch}
/>
</label>
{/if}
@@ -495,7 +569,7 @@
type="checkbox"
value={li_key}
checked
on:input={handle_oninput_dispatch}
oninput={handle_oninput_dispatch}
/>
</label>
{:else}
@@ -505,7 +579,7 @@
{name}
type="checkbox"
value={li_key}
on:input={handle_oninput_dispatch}
oninput={handle_oninput_dispatch}
/>
</label>
{/if}
@@ -534,7 +608,7 @@
data-obj_type={obj_type}
data-obj_prop_name={obj_prop_name}
{checked}
on:input={handle_oninput_dispatch}
oninput={handle_oninput_dispatch}
/>
{/if}
@@ -554,7 +628,7 @@
{disabled}
{required}
{checked}
on:input={handle_oninput_dispatch}
oninput={handle_oninput_dispatch}
/>
</label>
{/if}
@@ -574,7 +648,7 @@
type="radio"
bind:group={value}
value={li_key}
on:input={handle_oninput_dispatch}
oninput={handle_oninput_dispatch}
/>
</label>
{:else if li_key.toString() === value.toString() || (li_key == 'true' && value == true) || (li_key == 'false' && value == false)}
@@ -586,7 +660,7 @@
bind:group={value}
value={li_key}
checked
on:input={handle_oninput_dispatch}
oninput={handle_oninput_dispatch}
/> Z
</label>
{:else}
@@ -597,7 +671,7 @@
type="radio"
bind:group={value}
value={li_key}
on:input={handle_oninput_dispatch}
oninput={handle_oninput_dispatch}
/>
</label>
{/if}
@@ -633,7 +707,7 @@
data-obj_type={obj_type}
data-obj_prop_name={obj_prop_name}
{checked}
on:input={handle_oninput_dispatch}
oninput={handle_oninput_dispatch}
/>
{#if !label_begin}
@@ -665,7 +739,7 @@
data-id_random={id_random}
data-obj_type={obj_type}
data-obj_prop_name={obj_prop_name}
on:input={handle_oninput_dispatch}
oninput={handle_oninput_dispatch}
></textarea>
<!-- rows="" cols="" maxlength="" -->
@@ -708,7 +782,7 @@
data-id_random={id_random}
data-obj_type={obj_type}
data-obj_prop_name={obj_prop_name}
on:input={handle_oninput_dispatch}
oninput={handle_oninput_dispatch}
>
{#if select_option_none}
<option value="">{select_option_none_text}</option>
@@ -746,7 +820,7 @@
<span>{description}</span>
{/if}
<slot name="more_html"></slot>
{@render more_html?.()}
</div>
<style>

26
src/lib/elements/element_obj_tbl_row.svelte
View File

@@ -9,13 +9,17 @@
// import { slct_obj_id, slct_obj_li_type, slct_obj_type } from '../admin/stores_admin.js';
// Should these slct_* be exported???
let slct_obj_id = null;
let slct_obj_id = $state(null);
let slct_obj_li_type = null;
let slct_obj_type = null;
let slct_obj_type = $state(null);
export let row_header: boolean = false;
export let primary_obj_li_type: string = slct_obj_li_type; // account, person, user, event, event_session, membership_person
export let obj = null;
interface Props {
row_header?: boolean;
primary_obj_li_type?: string; // account, person, user, event, event_session, membership_person
obj?: any;
}
let { row_header = false, primary_obj_li_type = $bindable(slct_obj_li_type), obj = null }: Props = $props();
console.log(obj);
console.log(typeof obj);
@@ -60,7 +64,7 @@
<th
data-obj_type={primary_obj_li_type}
data-obj_prop_name={obj_prop_name}
on:click={() =>
onclick={() =>
(primary_obj_li_type = obj_prop_name.replace('_id_random', ''))}
>
{ae_util.set_obj_prop_display_name({
@@ -72,11 +76,11 @@
<td
data-obj_type={primary_obj_li_type}
data-obj_prop_name={obj_prop_name}
on:click={() => {
onclick={() => {
slct_obj_type = obj_prop_name.replace('_id_random', '');
slct_obj_id = obj_prop_value;
}}
on:keypress={() => {
onkeypress={() => {
slct_obj_type = obj_prop_name.replace('_id_random', '');
slct_obj_id = obj_prop_value;
}}
@@ -105,7 +109,7 @@
<th
data-obj_type={primary_obj_li_type}
data-obj_prop_name={obj_prop_name}
on:click={() =>
onclick={() =>
(primary_obj_li_type = obj_prop_name.replaceAll('[URL]', ''))}
>
{ae_util.set_obj_prop_display_name({
@@ -117,11 +121,11 @@
<td
data-obj_type={primary_obj_li_type}
data-obj_prop_name={obj_prop_name}
on:click={() => {
onclick={() => {
slct_obj_type = obj_prop_name.replaceAll('[URL]', '');
slct_obj_id = obj_prop_value;
}}
on:keypress={() => {
onkeypress={() => {
slct_obj_type = obj_prop_name.replaceAll('[URL]', '');
slct_obj_id = obj_prop_value;
}}

44
src/lib/elements/element_sql_qry.svelte
View File

@@ -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"