tera-system-ui 0.0.24 → 0.0.26

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

@@ -1,114 +1,114 @@
-<script lang="ts">
-    import {
-        SCREEN_BREAK_POINTS,
-        mainLayout,
-        setSideNavState,
-        type SideNavigationProps,
-        toggleSideNavigation
-    } from "./SideNavigation";
-    import {clickOutside} from "../../actions/clickOutside"
-    import {Button} from "../button";
-    import {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 {LightDarkToggle} from "../light-dark-toggle";
-    import * as m from '../../paraglide/messages.js'
-
-    import {getGlobalContext} from "../tera-ui-context/global-context";
-
-    let {children, ...props}: SideNavigationProps = $props();
-
-    let temporaryExpand: any = undefined
-
-
-    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) {
-        temporaryExpand = isHover ? true : undefined
-
-        if (temporaryExpand) {
-            mainLayout()?.setAttribute('data-side-nav-temporary-expand', temporaryExpand)
-        } else {
-            mainLayout()?.removeAttribute('data-side-nav-temporary-expand')
-        }
-    }
-
-    let globalContext = getGlobalContext()
-
-    console.log('SideNavigation get global context', globalContext)
-
-    function isSelected(href: string) {
-        const pathname = globalContext?.sideNavHref
-        return pathname?.startsWith(href)
-    }
-
-
-
-    const NAV_ITEM = [
-        {
-            href: '/calculator',
-            icon: IconCalculator,
-            title: m.text_calces_scientific_calculator(),
-        },
-        {
-            href: '/convert',
-            icon: IconTransform,
-            title: m.text_unit_converter(),
-        },
-        {
-            href: '/docs/calculator-usages/calces',
-            icon: IconBook,
-            title: m.text_calces_documentation(),
-        },
-    ]
-</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}
-                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}
-            <SideNavItem href={item.href} class={isSelected(item.href) ? 'selected' : ''}>
-                {#snippet icon()}
-                    <item.icon/>
-                {/snippet}
-                {item.title}
-            </SideNavItem>
-        {/each}
-    </ul>
-    <div>
-        <div class="w-[3rem] mb-8 flex justify-center">
-            <LightDarkToggle/>
-        </div>
-    </div>
-</nav>
+<script lang="ts">
+    import {
+        SCREEN_BREAK_POINTS,
+        mainLayout,
+        setSideNavState,
+        type SideNavigationProps,
+        toggleSideNavigation
+    } from "./SideNavigation";
+    import {clickOutside} from "../../actions/clickOutside"
+    import {Button} from "../button";
+    import {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 {LightDarkToggle} from "../light-dark-toggle";
+    import * as m from '../../paraglide/messages'
+
+    import {getGlobalContext} from "../tera-ui-context/global-context";
+
+    let {children, ...props}: SideNavigationProps = $props();
+
+    let temporaryExpand: any = undefined
+
+
+    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) {
+        temporaryExpand = isHover ? true : undefined
+
+        if (temporaryExpand) {
+            mainLayout()?.setAttribute('data-side-nav-temporary-expand', temporaryExpand)
+        } else {
+            mainLayout()?.removeAttribute('data-side-nav-temporary-expand')
+        }
+    }
+
+    let globalContext = getGlobalContext()
+
+    console.log('SideNavigation get global context', globalContext)
+
+    function isSelected(href: string) {
+        const pathname = globalContext?.sideNavHref
+        return pathname?.startsWith(href)
+    }
+
+
+
+    const NAV_ITEM = [
+        {
+            href: '/calculator',
+            icon: IconCalculator,
+            title: m.text_calces_scientific_calculator(),
+        },
+        {
+            href: '/convert',
+            icon: IconTransform,
+            title: m.text_unit_converter(),
+        },
+        {
+            href: '/docs/calculator-usages/calces',
+            icon: IconBook,
+            title: m.text_calces_documentation(),
+        },
+    ]
+</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}
+                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}
+            <SideNavItem href={item.href} class={isSelected(item.href) ? 'selected' : ''}>
+                {#snippet icon()}
+                    <item.icon/>
+                {/snippet}
+                {item.title}
+            </SideNavItem>
+        {/each}
+    </ul>
+    <div>
+        <div class="w-[3rem] mb-8 flex justify-center">
+            <LightDarkToggle/>
+        </div>
+    </div>
+</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="">
-        <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="">
+        <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,19 +1,19 @@
-<script lang="ts">
-    import {SideNavigation} from "./";
-    import './sidenav.scss'
-
-    let {children} = $props()
-</script>
-
-<main
-        id="side-nav_main-layout"
-        class="side-nav_main-layout relative"
-        data-side-nav-state="compact"
->
-    <SideNavigation/>
-
-    <section class="side-nav_main-content">
-        {@render children?.()}
-    </section>
-</main>
-
+<script lang="ts">
+    import {SideNavigation} from "./";
+    import './sidenav.scss'
+
+    let {children} = $props()
+</script>
+
+<main
+        id="side-nav_main-layout"
+        class="side-nav_main-layout relative"
+        data-side-nav-state="compact"
+>
+    <SideNavigation/>
+
+    <section class="side-nav_main-content">
+        {@render children?.()}
+    </section>
+</main>
+

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

@@ -1,149 +1,149 @@
-: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 theme('colors.neutral.token.5');
-  height: 100dvh;
-  position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-
-  transition: width var(--sidebar-transition-duration);
-  background: theme('colors.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_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;
-    }
-  }
-}
-
-@media (min-width: theme('screens.md')) {
-  :root {
-    --sidebar-main-margin-left: 3rem;
-    --sidebar-border-width: 1px;
-    --sidebar-width: 3rem;
-  }
-}
-
-@media (min-width: theme('screens.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: theme('colors.neutral.token.13');
-
-  a {
-    display: flex;
-    gap: 0.5rem;
-    align-items: center;
-    width: 100%;
-    position: relative;
-    white-space: nowrap;
-    @apply px-3 py-3 font-semibold;
-  }
-
-  svg {
-    &.icon {
-      min-width: 24px;
-    }
-  }
-
-  &.selected a {
-    //background-color: theme('colors.neutral.token.11');
-    color: theme('colors.neutral.token.1');
-    //@apply rounded-full;
-  }
-
-  &.selected {
-    a::after {
-      content: '';
-      position: absolute;
-      inset-inline: 0.25rem;
-      inset-block: 0.2rem;
-      background: theme('colors.neutral.token.11');
-      border-radius: theme('borderRadius.DEFAULT');
-      z-index: 0;
-    }
-  }
-
-  //&.selected {
-  //  a::after {
-  //    content: '';
-  //    position: absolute;
-  //    left: 0;
-  //    top: 0;
-  //    bottom: 0;
-  //    width: 4px;
-  //    height: 100%;
-  //    background: theme('colors.primary.token.4');
-  //    border-radius: 4px 0 0 4px;
-  //  }
-  //}
-
-  &:hover {
-    background-color: theme('colors.neutral.token.3');
-  }
-}
+: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 theme('colors.neutral.token.5');
+  height: 100dvh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+
+  transition: width var(--sidebar-transition-duration);
+  background: theme('colors.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_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;
+    }
+  }
+}
+
+@media (min-width: theme('screens.md')) {
+  :root {
+    --sidebar-main-margin-left: 3rem;
+    --sidebar-border-width: 1px;
+    --sidebar-width: 3rem;
+  }
+}
+
+@media (min-width: theme('screens.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: theme('colors.neutral.token.13');
+
+  a {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    width: 100%;
+    position: relative;
+    white-space: nowrap;
+    @apply px-3 py-3 font-semibold;
+  }
+
+  svg {
+    &.icon {
+      min-width: 24px;
+    }
+  }
+
+  &.selected a {
+    //background-color: theme('colors.neutral.token.11');
+    color: theme('colors.neutral.token.1');
+    //@apply rounded-full;
+  }
+
+  &.selected {
+    a::after {
+      content: '';
+      position: absolute;
+      inset-inline: 0.25rem;
+      inset-block: 0.2rem;
+      background: theme('colors.neutral.token.11');
+      border-radius: theme('borderRadius.DEFAULT');
+      z-index: 0;
+    }
+  }
+
+  //&.selected {
+  //  a::after {
+  //    content: '';
+  //    position: absolute;
+  //    left: 0;
+  //    top: 0;
+  //    bottom: 0;
+  //    width: 4px;
+  //    height: 100%;
+  //    background: theme('colors.primary.token.4');
+  //    border-radius: 4px 0 0 4px;
+  //  }
+  //}
+
+  &:hover {
+    background-color: theme('colors.neutral.token.3');
+  }
+}