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

Moving on to the user sign in/out

Browse Source
This commit is contained in:
Scott Idem
2025-07-15 17:55:53 -04:00
parent 8692771efb
commit 7b853ede8c
5 changed files with 360 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/lib/ae_stores.ts
View File

@@ -168,10 +168,15 @@ const ae_app_local_data_defaults: key_val = {
hide: false, hide: false,
expand: false, expand: false,
hide_access_type: false, hide_access_type: false,
expand_access_type: false,
hide_edit_mode: false, hide_edit_mode: false,
expand_edit_mode: false,
hide_user: false, hide_user: false,
expand_user: false,
hide_theme: false, hide_theme: false,
hide_cfg: false, expand_theme: false,
hide_app_cfg: false,
expand_app_cfg: false,
}, },
debug_menu: { debug_menu: {
hide: false, hide: false,

139
src/lib/e_app_cfg.svelte
View File

@@ -1,31 +1,47 @@
<script lang="ts"> <script lang="ts">
import { onMount } from 'svelte';
import {
Settings
} from '@lucide/svelte';
import { ae_util } from '$lib/ae_utils/ae_utils'; import { ae_util } from '$lib/ae_utils/ae_utils';
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores'; import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
import Element_theme from '$lib/e_app_theme.svelte'; // import Element_theme from '$lib/e_app_theme.svelte';
let notes: null|string = null; let notes: null|string = null;
let all: boolean = false; let all: boolean = false;
// export let theme_mode: null|string = null; interface Props {
export let set_theme_mode: null|boolean = null; log_lvl?: number;
// export let theme_name: null|string = null; hide?: null|boolean;
export let set_theme_name: null|boolean = null; expand?: boolean;
// export let theme_mode: null|string = null;
// set_theme_mode?: null|boolean;
// export let theme_name: null|string = null;
// set_theme_name?: null|boolean;
}
let {
log_lvl = $bindable(0),
hide = $bindable(false),
expand = $bindable(false),
// set_theme_mode = null,
// set_theme_name = null
}: Props = $props();
// const dispatch = createEventDispatcher(); // const dispatch = createEventDispatcher();
onMount(() => { // onMount(() => {
// console.log('** Element Mounted: ** Element App Config'); // // console.log('** Element Mounted: ** Element App Config');
if (set_theme_mode) { // if (set_theme_mode) {
$slct_trigger = 'set_theme_mode'; // $slct_trigger = 'set_theme_mode';
} // }
if (set_theme_name) { // if (set_theme_name) {
$slct_trigger = 'set_theme_name'; // $slct_trigger = 'set_theme_name';
} // }
}); // });
// $: if ($slct_trigger == 'set_theme_mode' && $ae_loc?.app_cfg?.theme_mode) { // $: if ($slct_trigger == 'set_theme_mode' && $ae_loc?.app_cfg?.theme_mode) {
// console.log(`$ae_loc.app_cfg.theme_mode=${$ae_loc?.app_cfg?.theme_mode}`); // console.log(`$ae_loc.app_cfg.theme_mode=${$ae_loc?.app_cfg?.theme_mode}`);
@@ -93,7 +109,7 @@ function handle_clear_storage(item: null|string) {
<!-- transition duration-500 delay-1000 hover:duration-500 hover:delay-1000 hover:transition-all --> <!-- transition duration-500 delay-1000 hover:duration-500 hover:delay-1000 hover:transition-all -->
<section <section
id="xAE-App-Cfg" id="AE-App-Cfg"
class=" class="
ae_app_cfg ae_app_cfg
hidden-print hidden-print
@@ -108,11 +124,12 @@ function handle_clear_storage(item: null|string) {
p-1 my-1 p-1 my-1
border-2 border-gray-200 border-2 border-gray-200
" "
class:hidden={hide}
> >
<header <header
class:hidden={!$ae_loc.app_cfg.show_element__cfg_detail} class:hidden={!expand}
class="ae_header w-64 " class="ae_header w-full"
> >
<h2 class="text-sm text-center font-semibold"> <h2 class="text-sm text-center font-semibold">
Config Config
@@ -122,7 +139,7 @@ function handle_clear_storage(item: null|string) {
<div <div
class="ae_cfg_content text-xs space-y-4 my-4" class="ae_cfg_content text-xs space-y-4 my-4"
class:hidden={!$ae_loc.app_cfg.show_element__cfg_detail} class:hidden={!expand}
data-sveltekit-preload-data="false" data-sveltekit-preload-data="false"
> >
@@ -163,12 +180,7 @@ function handle_clear_storage(item: null|string) {
</section> </section>
<!-- END: Access Type --> <!-- END: Access Type -->
<Element_theme
set_theme_mode={set_theme_mode}
set_theme_name={set_theme_name}
/>
<!-- END: Theme -->
<section class="space-y-2"> <section class="space-y-2">
@@ -204,7 +216,7 @@ function handle_clear_storage(item: null|string) {
<button <button
class="btn btn-sm preset-tonal-warning" class="btn btn-sm preset-tonal-warning"
title="Reload and clear the page cache" title="Reload and clear the page cache"
on:click={() => { onclick={() => {
// $ae_loc. // $ae_loc.
window.location.reload(true); window.location.reload(true);
}} }}
@@ -218,7 +230,7 @@ function handle_clear_storage(item: null|string) {
<button <button
class="btn btn-sm preset-tonal-warning" class="btn btn-sm preset-tonal-warning"
title="Clear the browser storage for this page" title="Clear the browser storage for this page"
on:click={() => { onclick={() => {
if (!confirm('Are you sure you want to clear the local and session storage?')) { if (!confirm('Are you sure you want to clear the local and session storage?')) {
return false; return false;
} }
@@ -246,17 +258,72 @@ function handle_clear_storage(item: null|string) {
</div> </div>
<!-- class:justify-between={expand}
class:justify-end={!expand} -->
<div
class="flex flex-row gap-2 items-center justify-between w-full"
<button
class="btn btn-sm preset-tonal-warning ae_cfg_btn hover:transition-all"
on:click={() => {
$ae_loc.app_cfg.show_element__cfg_detail = !$ae_loc.app_cfg.show_element__cfg_detail;
}}
> >
<span class="fas fa-cog mx-1"></span> <!-- {#if !expand} -->
<span class="cfg_text">Config</span> <span>
</button> {#if $ae_loc.access_type && $ae_loc.access_type != 'anonymous'}
{#if $ae_loc.access_type == 'super'}
<span class="fas fa-secret mx-1"></span> Super Access
{:else if $ae_loc.access_type == 'manager'}
<span class="fas fa-user-shield mx-1"></span> Manager Access
{:else if $ae_loc.access_type == 'administrator'}
<span class="fas fa-user-ninja mx-1"></span> Administrator Access
{:else if $ae_loc.access_type == 'trusted'}
<span class="fas fa-user-nurse mx-1"></span> Trusted Access
{:else if $ae_loc.access_type == 'authenticated'}
<span class="fas fa-user-friends mx-1"></span> Authenticated Access
{:else if $ae_loc.access_type == 'anonymous'}
<span class="fas fa-users mx-1"></span> Anonymous Access
{:else}
<span class="fas fa-unlock mx-1"></span> Unknown Access
{/if}
<!-- <button
class="btn btn-sm variant-glass-secondary access_type_lock_btn hover:transition-all"
on:click={() => {
handle_clear_access();
}}
title="Access mode is currently enabled/unlocked. Click to exit and lock."
>
<span class="fas fa-lock mx-1"></span> Lock
</button> -->
{:else}
Not logged in
{/if}
</span>
<!-- {/if} -->
<button
class="
ae_cfg_btn
btn btn-sm
preset-tonal-warning
group transition-all
"
onclick={() => {
expand = !expand;
}}
>
<!-- <span class="fas fa-cog m-1"></span> -->
<span class="inline-block" title="Settings">
<Settings />
</span>
<span
class="
cfg_text
hidden
group-hover:inline
"
>
Settings
</span>
</button>
</div>
</section> </section>
@@ -264,11 +331,11 @@ function handle_clear_storage(item: null|string) {
<style lang="postcss"> <style lang="postcss">
.ae_cfg_btn .cfg_text { .ae_cfg_btn .cfg_text {
display: none; /* display: none; */
} }
.ae_cfg_btn:hover .cfg_text { .ae_cfg_btn:hover .cfg_text {
display: initial; /* display: initial; */
/* outline: solid thin red; */ /* outline: solid thin red; */
} }

2
src/lib/e_app_sign_in_out.svelte
View File

@@ -341,7 +341,7 @@ async function handle_change_password() {
<!-- It is important to keep in mind that a Person can only fully sign in if they have a linked User record. --> <!-- It is important to keep in mind that a Person can only fully sign in if they have a linked User record. -->
<!-- *:hover:inline --> <!-- *:hover:inline -->
<section <section
id="xAE-Sign-In-Out" id="AE-Sign-In-Out"
class=" class="
ae_sign_in_out ae_sign_in_out
hidden-print hidden-print

118
src/lib/e_app_sys_menu.svelte
View File

@@ -27,6 +27,7 @@ import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
import Element_access_type from '$lib/e_app_access_type.svelte'; import Element_access_type from '$lib/e_app_access_type.svelte';
import Element_app_cfg from '$lib/e_app_cfg.svelte'; import Element_app_cfg from '$lib/e_app_cfg.svelte';
import Element_sign_in_out from '$lib/e_app_sign_in_out.svelte'; import Element_sign_in_out from '$lib/e_app_sign_in_out.svelte';
import Element_theme from '$lib/e_app_theme.svelte';
// *** Setup Svelte properties // *** Setup Svelte properties
interface Props { interface Props {
@@ -73,13 +74,13 @@ max-w-max -->
transition hover:transition-all transition hover:transition-all
z-10 hover:z-20 z-10 hover:z-20
" "
class:hidden={!$ae_loc?.app_cfg?.show_element__menu_btn} class:hidden={!$ae_loc?.sys_menu?.expand_btn}
> --> > -->
<!-- && !$ae_loc?.app_cfg?.show_element__menu --> <!-- && !$ae_loc?.sys_menu?.expand -->
<!-- !$ae_loc <!-- !$ae_loc
?.app_cfg?.show_element__menu_btn --> ?.sys_menu?.expand_btn -->
<!-- bg-blue-100/60 dark:bg-blue-800/50 --> <!-- bg-blue-100/60 dark:bg-blue-800/50 -->
<!-- class:hover:border-transparent={!$ae_loc?.app_cfg?.show_element__menu} --> <!-- class:hover:border-transparent={!$ae_loc?.sys_menu?.expand} -->
<!-- mx-1 my-2 --> <!-- mx-1 my-2 -->
<!-- We need to be able to hide the menu button in certain situations. Mainly iframes. --> <!-- We need to be able to hide the menu button in certain situations. Mainly iframes. -->
<section <section
@@ -116,19 +117,19 @@ max-w-max -->
duration-500 hover:duration-200 duration-500 hover:duration-200
ease-in-out ease-in-out
" "
class:top-0={$ae_loc?.app_cfg?.show_element__menu & 1 == 3} class:top-0={$ae_loc?.sys_menu?.expand & 1 == 3}
class:w-full={$ae_loc?.app_cfg?.show_element__menu} class:w-full={$ae_loc?.sys_menu?.expand}
class:hidden={false} class:hidden={false}
class:border-transparent={!$ae_loc?.app_cfg?.show_element__menu} class:border-transparent={!$ae_loc?.sys_menu?.expand}
class:hover:bg-transparent={!$ae_loc?.app_cfg?.show_element__menu} class:hover:bg-transparent={!$ae_loc?.sys_menu?.expand}
> >
<div <div
class:hidden={!$ae_loc?.show_element__menu && 1 == 3} class:hidden={!$ae_loc?.expand && 1 == 3}
class:border-green-200={$ae_loc?.show_element__menu} class:border-green-200={$ae_loc?.expand}
class:dark:border-green-800={$ae_loc?.show_element__menu} class:dark:border-green-800={$ae_loc?.expand}
class=" class="
hidden-print hidden-print
flex flex-col items-end justify-end flex flex-col items-end justify-end
@@ -160,9 +161,9 @@ max-w-max -->
{#if $ae_loc?.person_id || $ae_loc?.user_id} {#if $ae_loc?.person_id || $ae_loc?.user_id}
<span <span
class:hidden={!$ae_loc?.app_cfg?.show_element__menu} class:hidden={!$ae_loc?.sys_menu?.expand}
class:hover:visible={$ae_loc?.app_cfg?.show_element__menu} class:hover:visible={$ae_loc?.sys_menu?.expand}
class:invisible={!$ae_loc?.app_cfg?.show_element__menu} class:invisible={!$ae_loc?.sys_menu?.expand}
class="w-48" class="w-48"
title=" title="
@@ -263,14 +264,14 @@ max-w-max -->
// trigger_clear_access = true; // trigger_clear_access = true;
// $ae_loc.app_cfg.show_element__passcode_input = !$ae_loc.app_cfg.show_element__passcode_input; // $ae_loc.app_cfg.show_element__passcode_input = !$ae_loc.app_cfg.show_element__passcode_input;
if (!$ae_loc?.app_cfg?.show_element__menu) { if (!$ae_loc?.sys_menu?.expand) {
$ae_loc.app_cfg.show_element__menu = true; $ae_loc.sys_menu.expand = true;
// $ae_loc.app_cfg.show_element__menu_btn = false; // $ae_loc.sys_menu.expand_btn = false;
$ae_loc.app_cfg.show_element__access_type = true; $ae_loc.app_cfg.show_element__access_type = true;
$ae_loc.app_cfg.show_element__passcode_input = true; $ae_loc.app_cfg.show_element__passcode_input = true;
} else { } else {
$ae_loc.app_cfg.show_element__menu = false; $ae_loc.sys_menu.expand = false;
// $ae_loc.app_cfg.show_element__menu_btn = true; // $ae_loc.sys_menu.expand_btn = true;
} }
}} }}
class="btn btn-sm variant-outline-surface hover:variant-ghost-warning transition-all *:hover:inline" class="btn btn-sm variant-outline-surface hover:variant-ghost-warning transition-all *:hover:inline"
@@ -288,9 +289,9 @@ max-w-max -->
onclick={() => { onclick={() => {
trigger_clear_access = true; trigger_clear_access = true;
if ($ae_loc?.app_cfg?.show_element__menu_btn) { if ($ae_loc?.sys_menu?.expand_btn) {
$ae_loc.app_cfg.show_element__menu = true; $ae_loc.sys_menu.expand = true;
$ae_loc.app_cfg.show_element__menu_btn = false; $ae_loc.sys_menu.expand_btn = false;
$ae_loc.app_cfg.show_element__access_type = true; $ae_loc.app_cfg.show_element__access_type = true;
$ae_loc.app_cfg.show_element__passcode_input = true; $ae_loc.app_cfg.show_element__passcode_input = true;
@@ -300,8 +301,8 @@ max-w-max -->
// const to_focus = document.getElementById('access_passcode_input'); // const to_focus = document.getElementById('access_passcode_input');
// to_focus?.focus(); // to_focus?.focus();
} else { } else {
$ae_loc.app_cfg.show_element__menu = false; $ae_loc.sys_menu.expand = false;
$ae_loc.app_cfg.show_element__menu_btn = true; $ae_loc.sys_menu.expand_btn = true;
} }
}} }}
class="btn btn-sm variant-outline-surface hover:variant-ghost-warning transition-all hidden" class="btn btn-sm variant-outline-surface hover:variant-ghost-warning transition-all hidden"
@@ -316,9 +317,9 @@ max-w-max -->
<button <button
type="button" type="button"
onclick={async () => { onclick={async () => {
if ($ae_loc?.app_cfg?.show_element__menu_btn) { if ($ae_loc?.sys_menu?.expand_btn) {
$ae_loc.app_cfg.show_element__menu = true; $ae_loc.sys_menu.expand = true;
$ae_loc.app_cfg.show_element__menu_btn = false; $ae_loc.sys_menu.expand_btn = false;
$ae_loc.app_cfg.show_element__access_type = true; $ae_loc.app_cfg.show_element__access_type = true;
$ae_loc.app_cfg.show_element__passcode_input = true; $ae_loc.app_cfg.show_element__passcode_input = true;
await tick(); await tick();
@@ -327,10 +328,10 @@ max-w-max -->
const to_focus = document.getElementById('access_passcode_input'); const to_focus = document.getElementById('access_passcode_input');
to_focus?.focus(); to_focus?.focus();
} else { } else {
$ae_loc.app_cfg.show_element__menu = false; $ae_loc.sys_menu.expand = false;
$ae_loc.app_cfg.show_element__menu_btn = true; $ae_loc.sys_menu.expand_btn = true;
} }
// $ae_loc.app_cfg.show_element__menu_btn = !$ae_loc?.app_cfg?.show_element__menu_btn; // $ae_loc.sys_menu.expand_btn = !$ae_loc?.sys_menu?.expand_btn;
}} }}
class=" class="
btn btn-sm variant-outline-surface hover:variant-ghost-success transition-all btn btn-sm variant-outline-surface hover:variant-ghost-success transition-all
@@ -348,13 +349,13 @@ max-w-max -->
</span> </span>
<!-- <div> --> <!-- <div> -->
<!-- class:visible={$ae_loc?.app_cfg?.show_element__menu} --> <!-- class:visible={$ae_loc?.sys_menu?.expand} -->
<!-- class:invisible={!$ae_loc?.app_cfg?.show_element__menu} --> <!-- class:invisible={!$ae_loc?.sys_menu?.expand} -->
<!-- class:hover:visible={true} --> <!-- class:hover:visible={true} -->
<!-- invisible --> <!-- invisible -->
<button <button
type="button" type="button"
class:w-48={$ae_loc?.app_cfg?.show_element__menu} class:w-48={$ae_loc?.sys_menu?.expand}
class=" class="
btn btn-sm btn btn-sm
@@ -364,9 +365,9 @@ max-w-max -->
" "
title="Show or hide the menu" title="Show or hide the menu"
onclick={async () => { onclick={async () => {
if (!$ae_loc?.app_cfg?.show_element__menu) { if (!$ae_loc?.sys_menu?.expand) {
$ae_loc.app_cfg.show_element__menu = true; $ae_loc.sys_menu.expand = true;
// $ae_loc.app_cfg.show_element__menu_btn = false; // $ae_loc.sys_menu.expand_btn = false;
$ae_loc.app_cfg.show_element__access_type = true; $ae_loc.app_cfg.show_element__access_type = true;
if ($ae_loc?.access_type == 'anonymous') { if ($ae_loc?.access_type == 'anonymous') {
@@ -381,15 +382,15 @@ max-w-max -->
const to_focus = document.getElementById('access_passcode_input'); const to_focus = document.getElementById('access_passcode_input');
to_focus?.focus(); to_focus?.focus();
} else { } else {
$ae_loc.app_cfg.show_element__menu = false; $ae_loc.sys_menu.expand = false;
// $ae_loc.app_cfg.show_element__menu_btn = true; // $ae_loc.sys_menu.expand_btn = true;
$ae_loc.app_cfg.show_element__passcode_input = false; $ae_loc.app_cfg.show_element__passcode_input = false;
} }
// $ae_loc.app_cfg.show_element__menu_btn = !$ae_loc?.app_cfg?.show_element__menu_btn; // $ae_loc.sys_menu.expand_btn = !$ae_loc?.sys_menu?.expand_btn;
}} }}
> >
<span class=" *:hover:inline-block"> <span class=" *:hover:inline-block">
{#if $ae_loc?.app_cfg?.show_element__menu} {#if $ae_loc?.sys_menu?.expand}
<CircleX class="inline-block" /> <CircleX class="inline-block" />
<span class="inline-block"> <span class="inline-block">
Hide Menu Hide Menu
@@ -439,7 +440,7 @@ max-w-max -->
z-20 hover:z-30 z-20 hover:z-30
" "
class:hidden={!$ae_loc?.app_cfg?.show_element__menu} class:hidden={!$ae_loc?.sys_menu?.expand}
> >
<button <button
@@ -447,18 +448,18 @@ max-w-max -->
class="btn btn-sm variant-outline-tertiary hover:variant-ghost-success *:hover:inline px-6 py-1" class="btn btn-sm variant-outline-tertiary hover:variant-ghost-success *:hover:inline px-6 py-1"
title="Sign In" title="Sign In"
onclick={() => { onclick={() => {
if (!$ae_loc?.app_cfg?.show_element__menu) { if (!$ae_loc?.sys_menu?.expand) {
$ae_loc.app_cfg.show_element__menu = true; $ae_loc.sys_menu.expand = true;
// $ae_loc.app_cfg.show_element__menu_btn = false; // $ae_loc.sys_menu.expand_btn = false;
} else { } else {
$ae_loc.app_cfg.show_element__menu = false; $ae_loc.sys_menu.expand = false;
// $ae_loc.app_cfg.show_element__menu_btn = true; // $ae_loc.sys_menu.expand_btn = true;
} }
// $ae_loc.app_cfg.show_element__menu_btn = !$ae_loc?.app_cfg?.show_element__menu_btn; // $ae_loc.sys_menu.expand_btn = !$ae_loc?.sys_menu?.expand_btn;
// $ae_loc.app_cfg.show_element__menu = !$ae_loc?.app_cfg?.show_element__menu; // $ae_loc.sys_menu.expand = !$ae_loc?.sys_menu?.expand;
}} }}
> >
{#if $ae_loc?.app_cfg?.show_element__menu} {#if $ae_loc?.sys_menu?.expand}
<CircleX class="mx-1 inline-block" /> <CircleX class="mx-1 inline-block" />
<!-- <span class="hidden"> --> <!-- <span class="hidden"> -->
Hide Menu Hide Menu
@@ -473,17 +474,28 @@ max-w-max -->
<!-- {#if $ae_loc?.app_cfg?.show_element__cfg} --> <!-- {#if $ae_loc?.app_cfg?.show_element__cfg} -->
<span <span
class:hidden={!$ae_loc?.app_cfg?.show_element__cfg || !$ae_loc.edit_mode} class:hidden={!$ae_loc.edit_mode}
> >
<Element_app_cfg <Element_app_cfg
hide={$ae_loc.sys_menu.hide_app_cfg}
expand={$ae_loc.sys_menu.expand_app_cfg}
/>
<Element_theme
hide={$ae_loc.sys_menu.hide_app_cfg}
expand={$ae_loc.sys_menu.expand_app_cfg}
set_theme_mode={true} set_theme_mode={true}
set_theme_name={true} set_theme_name={true}
/> />
<!-- END: Theme -->
</span> </span>
<!-- {/if} --> <!-- {/if} -->
{#if $ae_loc?.app_cfg?.show_element__sign_in_out} {#if $ae_loc?.app_cfg?.show_element__sign_in_out}
<Element_sign_in_out <Element_sign_in_out
hide={$ae_loc.sys_menu.hide_user}
expand={$ae_loc.sys_menu.expand_user}
data={data} data={data}
hidden={$ae_loc.iframe || !$ae_loc.app_cfg?.show_element__sign_in_out} hidden={$ae_loc.iframe || !$ae_loc.app_cfg?.show_element__sign_in_out}
/> />
@@ -491,9 +503,11 @@ max-w-max -->
{#if $ae_loc?.app_cfg?.show_element__access_type} {#if $ae_loc?.app_cfg?.show_element__access_type}
<Element_access_type <Element_access_type
hide={$ae_loc.sys_menu.hide_access_type}
expand={$ae_loc.sys_menu.expand_access_type}
show_passcode_input={$ae_loc?.app_cfg?.show_element__passcode_input} show_passcode_input={$ae_loc?.app_cfg?.show_element__passcode_input}
trigger_clear_access={trigger_clear_access} trigger_clear_access={trigger_clear_access}
hidden={$ae_loc?.iframe && !$ae_loc?.trusted_access && !$ae_loc?.app_cfg?.show_element__menu} hidden={$ae_loc?.iframe && !$ae_loc?.trusted_access && !$ae_loc?.sys_menu?.expand}
/> />
{/if} {/if}

275
src/lib/e_app_theme.svelte
View File

@@ -7,11 +7,20 @@ import {
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores'; import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
interface Props { interface Props {
log_lvl?: number;
hide?: null|boolean;
expand?: boolean;
set_theme_mode: any; set_theme_mode: any;
set_theme_name: any; set_theme_name: any;
} }
let { set_theme_mode, set_theme_name }: Props = $props(); let {
log_lvl = $bindable(0),
hide = $bindable(false),
expand = $bindable(false),
set_theme_mode,
set_theme_name
}: Props = $props();
</script> </script>
@@ -25,54 +34,183 @@ if ($ae_loc.app_cfg.theme_mode == 'light') {
document.documentElement.classList.add('dark'); document.documentElement.classList.add('dark');
} }
--> -->
<section class="space-y-2"> <section
<button id="AE-App-Theme"
class="btn btn-sm preset-tonal-secondary hover:preset-filled-secondary-500" class="
onclick={() => { ae_app_theme
if ($ae_loc.theme_mode == 'light') { hidden-print
$ae_loc.theme_mode = 'dark';
} else if ($ae_loc.theme_mode == 'dark') {
$ae_loc.theme_mode = 'light';
}
if ($ae_loc.theme_mode == 'light') { bg-blue-100 text-gray-900
document.documentElement.classList.remove('dark'); dark:bg-blue-800 dark:text-gray-200
document.documentElement.classList.add('light');
} else if ($ae_loc.theme_mode == 'dark') { flex flex-col flex-wrap gap-1
document.documentElement.classList.remove('light'); items-end justify-end
document.documentElement.classList.add('dark'); w-72 max-w-72
} p-1 my-1
border-2 border-gray-200
transition-all
"
class:hidden={hide}
>
<div>
<!-- Theme Name: -->
<select
onchange={(event) => {
// $slct_trigger = 'set_theme_name';
let new_theme_name = event.target.value;
// document.documentElement.theme = new_theme_name;
console.log(`$ae_loc?.theme_name=${$ae_loc?.theme_name}`);
// $slct_trigger = null;
// Update the body attribute named "data-theme" to the current theme name.
// document.body.setAttribute('data-theme', new_theme_name);
// document.body.setAttribute('data-theme', $ae_loc?.theme_name);
// NEW for Tailwind v4: Update the html attribute named "data-theme" to the current theme name.
document.documentElement.setAttribute('data-theme', new_theme_name);
// if ($ae_loc.theme_mode == 'light') {
// document.documentElement.classList.remove('dark');
// document.documentElement.classList.add('light');
// } else if ($ae_loc.theme_mode == 'dark') {
// document.documentElement.classList.remove('light');
// document.documentElement.classList.add('dark');
// }
}} }}
title="Change light and dark mode" bind:value={$ae_loc.theme_name}
class="select"
class:hidden={!expand}
title="Theme name"
> >
<!-- <span class="fas fa-adjust"></span> --> <option value="">-- None --</option>
{#if $ae_loc.theme_mode == 'light'} <option value="cerberus">Cerberus</option>
<Sun /> <option value="concord">Concord</option>
<span class="hidden md:inline-block">Light Mode</span> <option value="crimson">Crimson</option>
{:else if $ae_loc.theme_mode == 'dark'} <option value="hamlindigo">Hamlindigo</option>
<Moon /> <option value="modern">Modern</option>
<span class="hidden md:inline-block">Dark Mode</span> <option value="nouveau">Nouveau</option>
{/if} <option value="rocket">Rocket</option>
<span class="hidden md:inline-block"> <option value="terminus">Terminus</option>
Change Theme <option value="vintage">Vintage</option>
</span> <option value="wintry">Wintry</option>
</button> <!-- <option value="ae_c_osit">OSIT</option> -->
<!-- <button <option value="AE_OSIT_default">OSIT</option>
class="btn btn-sm variant-ghost-surface hover:variant-filled-success" <option value="AE_c_LCI">LCI</option>
onclick={() => { </select>
if ($ae_loc.app_cfg.theme_mode == 'light') { </div>
$ae_loc.app_cfg.theme_mode = 'dark';
} else if ($ae_loc.app_cfg.theme_mode == 'dark') { <div
$ae_loc.app_cfg.theme_mode = 'light'; class="flex flex-row flex-wrap gap-2 items-center w-full"
} class:justify-between={expand}
}} class:justify-end={!expand}
title="Change light and dark mode" >
>
<span class="fas fa-adjust"></span> {#if expand}
<span class="hidden md:inline"> <!-- Hide theme options -->
Change Theme <button
</span> class="
</button> --> btn btn-sm text-xs
preset-tonal-secondary hover:preset-filled-secondary-500
transition-all group
"
onclick={() => {
expand = !expand;
}}
title="Hide Theme Options"
>
<!-- <span class="fas fa-compress-alt"></span> -->
<span class="fas fa-compress-arrows-alt m-1"></span>
<span
class="
hidden
group-hover:inline-block
text-xs
"
>
Hide Theme Options
</span>
</button>
<button
class="
btn btn-sm text-xs
preset-tonal-secondary hover:preset-filled-secondary-500
transition-all group
"
onclick={() => {
if ($ae_loc.theme_mode == 'light') {
$ae_loc.theme_mode = 'dark';
} else if ($ae_loc.theme_mode == 'dark') {
$ae_loc.theme_mode = 'light';
}
if ($ae_loc.theme_mode == 'light') {
document.documentElement.classList.remove('dark');
document.documentElement.classList.add('light');
} else if ($ae_loc.theme_mode == 'dark') {
document.documentElement.classList.remove('light');
document.documentElement.classList.add('dark');
}
}}
title="Change light and dark mode"
>
<!-- <span class="fas fa-adjust"></span> -->
{#if $ae_loc.theme_mode == 'light'}
<Sun />
<span class="hidden md:inline-block group-hover:inline-block">Light Mode</span>
{:else if $ae_loc.theme_mode == 'dark'}
<Moon />
<span class="hidden group-hover:inline-block">Dark Mode</span>
{/if}
<span
class="
hidden
group-hover:inline-block
text-xs
"
>
Change
</span>
</button>
{:else}
<button
class="btn btn-sm preset-tonal-secondary hover:preset-filled-secondary-500 group"
onclick={() => {
if ($ae_loc.theme_mode == 'light') {
$ae_loc.theme_mode = 'dark';
} else if ($ae_loc.theme_mode == 'dark') {
$ae_loc.theme_mode = 'light';
}
if ($ae_loc.theme_mode == 'light') {
document.documentElement.classList.remove('dark');
document.documentElement.classList.add('light');
} else if ($ae_loc.theme_mode == 'dark') {
document.documentElement.classList.remove('light');
document.documentElement.classList.add('dark');
}
expand = !expand;
}}
title="Change light and dark mode"
>
{#if $ae_loc.theme_mode == 'light'}
<span class="inline-block" title="Light Mode">
<Sun />
</span>
<span class="hidden group-hover:inline-block">Light Mode</span>
{:else if $ae_loc.theme_mode == 'dark'}
<span class="inline-block" title="Dark Mode">
<Moon />
</span>
<span class="hidden group-hover:inline-block">Dark Mode</span>
{/if}
</button>
{/if}
</div>
<!-- <section class="space-y-2"> <!-- <section class="space-y-2">
@@ -106,51 +244,6 @@ if ($ae_loc.app_cfg.theme_mode == 'light') {
</RadioGroup> </RadioGroup>
</div> --> </div> -->
<div>
<!-- Theme Name: -->
<select
onchange={(event) => {
// $slct_trigger = 'set_theme_name';
let new_theme_name = event.target.value;
// document.documentElement.theme = new_theme_name;
console.log(`$ae_loc?.theme_name=${$ae_loc?.theme_name}`);
// $slct_trigger = null;
// Update the body attribute named "data-theme" to the current theme name.
// document.body.setAttribute('data-theme', new_theme_name);
// document.body.setAttribute('data-theme', $ae_loc?.theme_name);
// NEW for Tailwind v4: Update the html attribute named "data-theme" to the current theme name.
document.documentElement.setAttribute('data-theme', new_theme_name);
// if ($ae_loc.theme_mode == 'light') {
// document.documentElement.classList.remove('dark');
// document.documentElement.classList.add('light');
// } else if ($ae_loc.theme_mode == 'dark') {
// document.documentElement.classList.remove('light');
// document.documentElement.classList.add('dark');
// }
}}
bind:value={$ae_loc.theme_name}
class="select"
title="Theme name"
>
<option value="">-- None --</option>
<option value="cerberus">Cerberus</option>
<option value="concord">Concord</option>
<option value="crimson">Crimson</option>
<option value="hamlindigo">Hamlindigo</option>
<option value="modern">Modern</option>
<option value="nouveau">Nouveau</option>
<option value="rocket">Rocket</option>
<option value="terminus">Terminus</option>
<option value="vintage">Vintage</option>
<option value="wintry">Wintry</option>
<!-- <option value="ae_c_osit">OSIT</option> -->
<option value="AE_OSIT_default">OSIT</option>
<option value="AE_c_LCI">LCI</option>
</select>
</div>
</section> </section>