style: Apply Prettier formatting with 4-space indentation
Applied consistent code formatting across the project using Prettier, now configured to use 4-space indentation instead of tabs.
This commit is contained in:
Scott Idem
@@ -1,23 +1,23 @@
|
||||
<script lang="ts">
|
||||
import { Moon, Sun } from '@lucide/svelte';
|
||||
import { Moon, Sun } from '@lucide/svelte';
|
||||
|
||||
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/stores/ae_stores';
|
||||
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/stores/ae_stores';
|
||||
|
||||
interface Props {
|
||||
log_lvl?: number;
|
||||
hide?: null | boolean;
|
||||
expand?: boolean;
|
||||
set_theme_mode: any;
|
||||
set_theme_name: any;
|
||||
}
|
||||
interface Props {
|
||||
log_lvl?: number;
|
||||
hide?: null | boolean;
|
||||
expand?: boolean;
|
||||
set_theme_mode: any;
|
||||
set_theme_name: any;
|
||||
}
|
||||
|
||||
let {
|
||||
log_lvl = $bindable(0),
|
||||
hide = $bindable(false),
|
||||
expand = $bindable(false),
|
||||
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>
|
||||
|
||||
<!-- Change light and dark mode -->
|
||||
@@ -31,8 +31,8 @@ if ($ae_loc.app_cfg.theme_mode == 'light') {
|
||||
}
|
||||
-->
|
||||
<section
|
||||
id="AE-App-Theme"
|
||||
class="
|
||||
id="AE-App-Theme"
|
||||
class="
|
||||
ae_app_theme
|
||||
hidden-print
|
||||
|
||||
@@ -49,175 +49,175 @@ if ($ae_loc.app_cfg.theme_mode == 'light') {
|
||||
duration-300 delay-150 hover:delay-1000 hover:ease-out
|
||||
transition-all
|
||||
"
|
||||
class:hidden={hide}
|
||||
class:hidden={hide}
|
||||
>
|
||||
<div
|
||||
class:hidden={!expand}
|
||||
class="flex flex-row flex-wrap gap-2 items-center justify-between w-full"
|
||||
>
|
||||
<!-- Theme Name: -->
|
||||
<span class="text-sm font-semibold">
|
||||
{$ae_loc.theme_name}
|
||||
</span>
|
||||
<select
|
||||
onchange={(event) => {
|
||||
// $slct_trigger = 'set_theme_name';
|
||||
<div
|
||||
class:hidden={!expand}
|
||||
class="flex flex-row flex-wrap gap-2 items-center justify-between w-full"
|
||||
>
|
||||
<!-- Theme Name: -->
|
||||
<span class="text-sm font-semibold">
|
||||
{$ae_loc.theme_name}
|
||||
</span>
|
||||
<select
|
||||
onchange={(event) => {
|
||||
// $slct_trigger = 'set_theme_name';
|
||||
|
||||
let new_theme_name = event.target.value;
|
||||
// document.documentElement.theme = new_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);
|
||||
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);
|
||||
// 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 w-32"
|
||||
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_IDAA_light">IDAA - light</option>
|
||||
<option value="AE_c_LCI">LCI</option>
|
||||
</select>
|
||||
</div>
|
||||
// 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 w-32"
|
||||
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_IDAA_light">IDAA - light</option>
|
||||
<option value="AE_c_LCI">LCI</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex flex-row flex-wrap gap-2 items-center w-full"
|
||||
class:justify-between={expand}
|
||||
class:justify-end={!expand}
|
||||
>
|
||||
{#if expand}
|
||||
<!-- Hide theme options -->
|
||||
<button
|
||||
class="
|
||||
<div
|
||||
class="flex flex-row flex-wrap gap-2 items-center w-full"
|
||||
class:justify-between={expand}
|
||||
class:justify-end={!expand}
|
||||
>
|
||||
{#if expand}
|
||||
<!-- Hide theme options -->
|
||||
<button
|
||||
class="
|
||||
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="
|
||||
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>
|
||||
>
|
||||
Hide Theme Options
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="
|
||||
<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';
|
||||
}
|
||||
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 class="m-1" />
|
||||
<span class="hidden md:inline-block group-hover:inline-block">Light Mode</span>
|
||||
{:else if $ae_loc.theme_mode == 'dark'}
|
||||
<Moon class="m-1" />
|
||||
<span class="hidden group-hover:inline-block">Dark Mode</span>
|
||||
{/if}
|
||||
<span
|
||||
class="
|
||||
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 class="m-1" />
|
||||
<span class="hidden md:inline-block group-hover:inline-block">Light Mode</span>
|
||||
{:else if $ae_loc.theme_mode == 'dark'}
|
||||
<Moon class="m-1" />
|
||||
<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';
|
||||
}
|
||||
>
|
||||
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');
|
||||
}
|
||||
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>
|
||||
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">
|
||||
<h2 class="strong">Theme:</h2> -->
|
||||
<!-- Light/Dark Theme: -->
|
||||
<!-- <div>
|
||||
<!-- Light/Dark Theme: -->
|
||||
<!-- <div>
|
||||
<RadioGroup
|
||||
active="variant-glass-success"
|
||||
hover="hover:variant-ringed-surface"
|
||||
|
||||
Reference in New Issue
Block a user