tera-system-ui 0.1.18 → 0.1.30

package/dist/components/side-navigation/SideNavigation.svelte

@@ -1,127 +1,131 @@
-<script lang="ts">
-    import {
-        SCREEN_BREAK_POINTS,
-        mainLayout,
-        setSideNavState,
-        type SideNavigationProps,
-        toggleSideNavigation, getSideNavState, type SideNavigationItem
-    } from "./SideNavigation";
-    import {clickOutside} from "../../actions/clickOutside"
-    import {Button} from "../button";
-    import {IconCoin, IconCoinConvert, IconHamburger} from "../icons";
-    import {BrandLogo} from "../brand-logo";
-    import SideNavItem from "./SideNavigationItem.svelte";
-    import IconBook from "../icons/IconBook.svelte";
-    import IconTransform from "../icons/IconTransform.svelte";
-    import IconCalculator from "../icons/IconCalculator.svelte";
-    import * as m from '../../paraglide/messages.js'
-
-    import {getGlobalContext} from "../tera-ui-context/global-context";
-    import {SupportedLanguage as CalculatorSupportedLanguage} from "../../tera-i18n/projects/tera-calculator/supported-language";
-    import {SupportedLanguage as ConverterSupportedLanguage} from "../../tera-i18n/projects/tera-converter/supported-language";
-
-    let {children, sideNavHref, language, items, ...props}: SideNavigationProps = $props();
-
-
-    function handleClickOutside() {
-        let screenWidth = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
-        if (screenWidth < SCREEN_BREAK_POINTS.md) {
-            setSideNavState(undefined)
-        } else if (screenWidth >= SCREEN_BREAK_POINTS.md && screenWidth < SCREEN_BREAK_POINTS.xl) {
-            setSideNavState(undefined)
-        } else if (screenWidth >= SCREEN_BREAK_POINTS.xl) {
-
-        }
-    }
-
-    function handleHover(isHover: boolean) {
-        let temporaryExpand = isHover ? true : undefined
-
-        if (temporaryExpand) {
-            mainLayout()?.setAttribute('data-side-nav-temporary-expand', temporaryExpand.toString())
-        } else {
-            mainLayout()?.removeAttribute('data-side-nav-temporary-expand')
-        }
-    }
-
-    let globalContext = getGlobalContext()
-
-    sideNavHref = sideNavHref || globalContext?.sideNavHref
-    language = language || globalContext?.language
-
-    let langPath = (language === 'en' || !language) ? '' : `/${language}`
-
-    let langForCalculator = (language && CalculatorSupportedLanguage.includes(language)) ? language : 'en'
-    let langPathForCalculator =  (langForCalculator === 'en' || !langForCalculator) ? '' : `/${langForCalculator}`
-
-    let langForConverter = (language && ConverterSupportedLanguage.includes(language)) ? language : 'en'
-    let langPathForConverter =  (langForConverter === 'en' || !langForConverter) ? '' : `/${langForConverter}`
-
-    const NAV_ITEM: SideNavigationItem[] = items ?? [
-        {
-            href: `/calculator${langPathForCalculator}`,
-            exactHref: '/calculator',
-            icon: IconCalculator,
-            title: m.text_calces_scientific_calculator(),
-        },
-        {
-            href: `/convert${langPathForConverter}`,
-            exactHref: '/convert',
-            icon: IconTransform,
-            title: m.text_unit_converter(),
-        },
-        {
-            href: `/convert${langPathForConverter}/currency`,
-            exactHref: '/convert/currency',
-            icon: IconCoinConvert,
-            title: m.text_currency_converter(),
-        },
-        {
-            href: '/docs/calculator-usages/calces',
-            icon: IconBook,
-            title: m.text_calces_documentation(),
-        },
-    ]
-
-    let selectedIndex = (() => {
-        return NAV_ITEM.findIndex((item, index) => {
-            return (item.exactHref ?? item.href) === sideNavHref;
-        })
-    })();
-
-</script>
-
-<nav class="side-nav_main-side-bar grid grid-rows-[auto_1fr_auto]"
-     use:clickOutside
-     onclick_outside={handleClickOutside}
->
-    <div class="flex mt-2 gap-1 items-center">
-        <Button variant="ghost" ring={false}
-                aria-label="Toggle side navigation"
-                onclick={toggleSideNavigation}
-        >
-            <IconHamburger/>
-        </Button>
-        <div class="sm-hidden">
-            <BrandLogo/>
-        </div>
-    </div>
-    <ul class="mt-12"
-        onmouseenter={() => {
-                handleHover(true)
-             }}
-        onmouseleave={() => {
-                handleHover(false)
-             }}
-    >
-        {#each NAV_ITEM as item, index}
-            <SideNavItem href={item.href} class={selectedIndex === index ? 'selected' : ''}>
-                {#snippet icon()}
-                    <item.icon/>
-                {/snippet}
-                {item.title}
-            </SideNavItem>
-        {/each}
-    </ul>
-
-</nav>
+<script lang="ts">
+    import {
+        SCREEN_BREAK_POINTS,
+        mainLayout,
+        setSideNavState,
+        type SideNavigationProps,
+        toggleSideNavigation, getSideNavState, type SideNavigationItem
+    } from "./SideNavigation";
+    import {clickOutside} from "../../actions/clickOutside"
+    import {Button} from "../button";
+    import {IconCoinConvert, IconHamburger} from "../icons";
+    import {BrandLogo} from "../brand-logo";
+    import SideNavItem from "./SideNavigationItem.svelte";
+    import IconBook from "../icons/IconBook.svelte";
+    import IconTransform from "../icons/IconTransform.svelte";
+    import IconCalculator from "../icons/IconCalculator.svelte";
+    import {m} from '../../paraglide/messages.js'
+
+    import {getGlobalContext} from "../tera-ui-context/global-context";
+    import {
+        SupportedLanguage as CalculatorSupportedLanguage
+    } from "../../tera-i18n/projects/tera-calculator/supported-language";
+    import {
+        SupportedLanguage as ConverterSupportedLanguage
+    } from "../../tera-i18n/projects/tera-converter/supported-language";
+
+    let {children, sideNavHref, language, items, bottomChildren, ...props}: SideNavigationProps = $props();
+
+
+    function handleClickOutside() {
+        let screenWidth = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
+        if (screenWidth < SCREEN_BREAK_POINTS.md) {
+            setSideNavState(undefined)
+        } else if (screenWidth >= SCREEN_BREAK_POINTS.md && screenWidth < SCREEN_BREAK_POINTS.xl) {
+            setSideNavState(undefined)
+        } else if (screenWidth >= SCREEN_BREAK_POINTS.xl) {
+
+        }
+    }
+
+    function handleHover(isHover: boolean) {
+        let temporaryExpand = isHover ? true : undefined
+
+        if (temporaryExpand) {
+            mainLayout()?.setAttribute('data-side-nav-temporary-expand', temporaryExpand.toString())
+        } else {
+            mainLayout()?.removeAttribute('data-side-nav-temporary-expand')
+        }
+    }
+
+    let globalContext = getGlobalContext()
+
+    sideNavHref = sideNavHref || globalContext?.sideNavHref
+    language = language || globalContext?.language
+
+    let langPath = (language === 'en' || !language) ? '' : `/${language}`
+
+    let langForCalculator = (language && CalculatorSupportedLanguage.includes(language)) ? language : 'en'
+    let langPathForCalculator = (langForCalculator === 'en' || !langForCalculator) ? '' : `/${langForCalculator}`
+
+    let langForConverter = (language && ConverterSupportedLanguage.includes(language)) ? language : 'en'
+    let langPathForConverter = (langForConverter === 'en' || !langForConverter) ? '' : `/${langForConverter}`
+
+    const NAV_ITEM: SideNavigationItem[] = items ?? [
+        {
+            href: `/calculator${langPathForCalculator}`,
+            exactHref: '/calculator',
+            icon: IconCalculator,
+            title: m.text_calces_scientific_calculator(),
+        },
+        {
+            href: `/convert${langPathForConverter}`,
+            exactHref: '/convert',
+            icon: IconTransform,
+            title: m.text_unit_converter(),
+        },
+        {
+            href: `/convert${langPathForConverter}/currency`,
+            exactHref: '/convert/currency',
+            icon: IconCoinConvert,
+            title: m.text_currency_converter(),
+        },
+        {
+            href: '/docs/calculator-usages/calces',
+            icon: IconBook,
+            title: m.text_calces_documentation(),
+        },
+    ]
+
+    let selectedIndex = (() => {
+        return NAV_ITEM.findIndex((item, index) => {
+            return (item.exactHref ?? item.href) === sideNavHref;
+        })
+    })();
+
+</script>
+
+<nav class="side-nav_main-side-bar grid grid-rows-[auto_1fr_auto]"
+     use:clickOutside
+     onclick_outside={handleClickOutside}
+>
+    <div class="flex mt-2 gap-1 items-center">
+        <Button variant="ghost" ring={false}
+                aria-label="Toggle side navigation"
+                onclick={toggleSideNavigation}
+        >
+            <IconHamburger/>
+        </Button>
+        <div class="sm-hidden">
+            <BrandLogo/>
+        </div>
+    </div>
+    <ul class="mt-12"
+        onmouseenter={() => {
+                handleHover(true)
+             }}
+        onmouseleave={() => {
+                handleHover(false)
+             }}
+    >
+        {#each NAV_ITEM as item, index}
+            <SideNavItem href={item.href} class={selectedIndex === index ? 'selected' : ''}>
+                {#snippet icon()}
+                    <item.icon/>
+                {/snippet}
+                {item.title}
+            </SideNavItem>
+        {/each}
+    </ul>
+    {@render bottomChildren?.()}
+</nav>

package/dist/components/side-navigation/SideNavigationItem.svelte

@@ -1,18 +1,18 @@
-<script lang="ts">
-    const {class: className, href, children, icon} = $props()
-</script>
-
-<li class="{className + ' side-nav_item'}">
-    <a href="{href || '#'}" class="" data-no-translate data-sveltekit-reload>
-        <div class="min-w-icon-sm z-10">
-            {@render icon?.()}
-        </div>
-        <div class="sm-hidden z-10 truncate">
-            {@render children?.()}
-        </div>
-    </a>
-</li>
-
-<style>
-
+<script lang="ts">
+    const {class: className, href, children, icon} = $props()
+</script>
+
+<li class="{className + ' side-nav_item'}">
+    <a href="{href || '#'}" class="" data-no-translate data-sveltekit-reload>
+        <div class="min-w-icon-sm z-10">
+            {@render icon?.()}
+        </div>
+        <div class="sm-hidden z-10 truncate">
+            {@render children?.()}
+        </div>
+    </a>
+</li>
+
+<style>
+
 </style>

package/dist/components/side-navigation/SideNavigationLayout.svelte

@@ -1,21 +1,21 @@
-<script lang="ts">
-    import {SideNavigation} from "./";
-    import './sidenav.scss'
-
-    let {children, language, items} = $props()
-</script>
-
-<main
-        id="side-nav_main-layout"
-        class="side-nav_main-layout relative"
-        data-side-nav-state="compact"
->
-    <SideNavigation language={language} items={items}/>
-    <div class="side-nav-backdrop">
-
-    </div>
-    <section class="side-nav_main-content">
-        {@render children?.()}
-    </section>
-</main>
-
+<script lang="ts">
+    import {SideNavigation} from "./";
+    import './sidenav.scss'
+
+    let {children, language, items, bottomChildren} = $props()
+</script>
+
+<main
+        id="side-nav_main-layout"
+        class="side-nav_main-layout relative"
+        data-side-nav-state="compact"
+>
+    <SideNavigation language={language} items={items} bottomChildren={bottomChildren}/>
+    <div class="side-nav-backdrop">
+
+    </div>
+    <section class="side-nav_main-content">
+        {@render children?.()}
+    </section>
+</main>
+

package/dist/components/side-navigation/SideNavigationLayout.svelte.d.ts

@@ -3,6 +3,7 @@ declare const SideNavigationLayout: import("svelte").Component<{
     children: any;
     language: any;
     items: any;
+    bottomChildren: any;
 }, {}, "">;
 type SideNavigationLayout = ReturnType<typeof SideNavigationLayout>;
 export default SideNavigationLayout;

package/dist/components/side-navigation/sidenav.scss

@@ -1,161 +1,161 @@
-@reference "tailwindcss/theme";
-
-:root {
-    --sidebar-width: 0;
-    --sidebar-transition-duration: 0.2s;
-    --sidebar-main-margin-left: 0;
-    --sidebar-border-width: 0;
-}
-
-.side-nav_main-layout {
-    transition: padding-left var(--sidebar-transition-duration);
-}
-
-.side-nav_main-side-bar {
-    container-type: inline-size;
-    z-index: 50;
-    width: var(--sidebar-width);
-    overflow-x: hidden;
-    border-right: var(--sidebar-border-width) solid var(--color-neutral-token-5);
-    height: 100dvh;
-    position: fixed;
-    top: 0;
-    left: 0;
-    bottom: 0;
-
-    transition: width var(--sidebar-transition-duration);
-    background: var(--color-neutral-token-1);
-
-    ul {
-        width: var(--sidebar-width);
-        transition: width var(--sidebar-transition-duration);
-    }
-}
-
-
-.sm-hidden {
-    opacity: 0;
-    transition: opacity var(--sidebar-transition-duration);
-}
-
-@container (min-width: 3rem) {
-    .sm-hidden {
-        opacity: 1;
-    }
-}
-
-.side-nav_main-content {
-    margin-left: var(--sidebar-main-margin-left);
-    transition: margin-left var(--sidebar-transition-duration);
-}
-
-.side-nav-backdrop {
-    //display: none;
-    z-index: -1;
-    position: fixed;
-    opacity: 0;
-    left: 0;
-    transition: opacity var(--sidebar-transition-duration),
-    left var(--sidebar-transition-duration);
-
-}
-
-.side-nav_main-layout {
-    &[data-side-nav-state="expand"], &[data-side-nav-temporary-expand="true"] {
-        --sidebar-width: 16.5rem;
-        --sidebar-border-width: 1px;
-
-        .header-brand-logo {
-            display: none;
-        }
-    }
-
-    &[data-side-nav-state="expand"] {
-        .side-nav-backdrop {
-            display: block;
-            top: 0;
-            bottom: 0;
-            right: 0;
-            left: var(--sidebar-width);
-            z-index: 100;
-            background: --alpha(var(--color-neutral-token-12) / 30%);
-            backdrop-filter: blur(var(--blur-sm));
-            opacity: 1;
-        }
-    }
-}
-
-@media (min-width: theme(--breakpoint-md)) {
-    :root {
-        --sidebar-main-margin-left: 3rem;
-        --sidebar-border-width: 1px;
-        --sidebar-width: 3rem;
-    }
-}
-
-@media (min-width: theme(--breakpoint-xl)) {
-    :root {
-        --sidebar-main-margin-left: var(--sidebar-width);
-        --sidebar-width: 16.5rem;
-    }
-    .header-brand-logo {
-        display: none;
-    }
-    .side-nav_main-layout {
-        &[data-side-nav-state="compact"] {
-            --sidebar-main-margin-left: 3rem;
-            --sidebar-width: 3rem;
-
-            .header-brand-logo {
-                display: block;
-            }
-        }
-
-        &[data-side-nav-temporary-expand="true"] {
-            --sidebar-width: 16.5rem;
-
-        }
-    }
-}
-
-
-.side-nav_item {
-    color: var(--color-neutral-token-13);
-
-    a {
-        display: flex;
-        gap: 0.5rem;
-        align-items: center;
-        width: 100%;
-        position: relative;
-        white-space: nowrap;
-        padding: --spacing(3);
-        font-weight: var(--font-weight-semibold);
-    }
-
-    svg {
-        &.icon {
-            min-width: 24px;
-        }
-    }
-
-    &.selected a {
-        color: var(--color-neutral-token-1);
-    }
-
-    &.selected {
-        a::after {
-            content: '';
-            position: absolute;
-            inset-inline: 0.25rem;
-            inset-block: 0.2rem;
-            background: var(--color-neutral-token-11);
-            border-radius: var(--radius-sm);
-            z-index: 0;
-        }
-    }
-
-    &:hover {
-        background-color: var(--color-neutral-token-3);
-    }
-}
+@reference "tailwindcss/theme";
+
+:root {
+    --sidebar-width: 0;
+    --sidebar-transition-duration: 0.2s;
+    --sidebar-main-margin-left: 0;
+    --sidebar-border-width: 0;
+}
+
+.side-nav_main-layout {
+    transition: padding-left var(--sidebar-transition-duration);
+}
+
+.side-nav_main-side-bar {
+    container-type: inline-size;
+    z-index: 50;
+    width: var(--sidebar-width);
+    overflow-x: hidden;
+    border-right: var(--sidebar-border-width) solid var(--color-neutral-token-5);
+    height: 100dvh;
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+
+    transition: width var(--sidebar-transition-duration);
+    background: var(--color-neutral-token-1);
+
+    ul {
+        width: var(--sidebar-width);
+        transition: width var(--sidebar-transition-duration);
+    }
+}
+
+
+.sm-hidden {
+    opacity: 0;
+    transition: opacity var(--sidebar-transition-duration);
+}
+
+@container (min-width: 3rem) {
+    .sm-hidden {
+        opacity: 1;
+    }
+}
+
+.side-nav_main-content {
+    margin-left: var(--sidebar-main-margin-left);
+    transition: margin-left var(--sidebar-transition-duration);
+}
+
+.side-nav-backdrop {
+    //display: none;
+    z-index: -1;
+    position: fixed;
+    opacity: 0;
+    left: 0;
+    transition: opacity var(--sidebar-transition-duration),
+    left var(--sidebar-transition-duration);
+
+}
+
+.side-nav_main-layout {
+    &[data-side-nav-state="expand"], &[data-side-nav-temporary-expand="true"] {
+        --sidebar-width: 16.5rem;
+        --sidebar-border-width: 1px;
+
+        .header-brand-logo {
+            display: none;
+        }
+    }
+
+    &[data-side-nav-state="expand"] {
+        .side-nav-backdrop {
+            display: block;
+            top: 0;
+            bottom: 0;
+            right: 0;
+            left: var(--sidebar-width);
+            z-index: 100;
+            background: --alpha(var(--color-neutral-token-12) / 30%);
+            backdrop-filter: blur(var(--blur-sm));
+            opacity: 1;
+        }
+    }
+}
+
+@media (min-width: theme(--breakpoint-md)) {
+    :root {
+        --sidebar-main-margin-left: 3rem;
+        --sidebar-border-width: 1px;
+        --sidebar-width: 3rem;
+    }
+}
+
+@media (min-width: theme(--breakpoint-xl)) {
+    :root {
+        --sidebar-main-margin-left: var(--sidebar-width);
+        --sidebar-width: 16.5rem;
+    }
+    .header-brand-logo {
+        display: none;
+    }
+    .side-nav_main-layout {
+        &[data-side-nav-state="compact"] {
+            --sidebar-main-margin-left: 3rem;
+            --sidebar-width: 3rem;
+
+            .header-brand-logo {
+                display: block;
+            }
+        }
+
+        &[data-side-nav-temporary-expand="true"] {
+            --sidebar-width: 16.5rem;
+
+        }
+    }
+}
+
+
+.side-nav_item {
+    color: var(--color-neutral-token-13);
+
+    a {
+        display: flex;
+        gap: 0.5rem;
+        align-items: center;
+        width: 100%;
+        position: relative;
+        white-space: nowrap;
+        padding: --spacing(3);
+        font-weight: var(--font-weight-semibold);
+    }
+
+    svg {
+        &.icon {
+            min-width: 24px;
+        }
+    }
+
+    &.selected a {
+        color: var(--color-neutral-token-1);
+    }
+
+    &.selected {
+        a::after {
+            content: '';
+            position: absolute;
+            inset-inline: 0.25rem;
+            inset-block: 0.2rem;
+            background: var(--color-neutral-token-11);
+            border-radius: var(--radius-sm);
+            z-index: 0;
+        }
+    }
+
+    &:hover {
+        background-color: var(--color-neutral-token-3);
+    }
+}