tera-system-ui 0.0.5 → 0.0.8

package/dist/components/dialog/Dialog.svelte

@@ -77,17 +77,17 @@
             onmousedown={handleClickOutside}
     >
         <button class=""></button>
-        <div class={"dialog-box " + dialogContainer()}>
-            {#if (closeButton)}
-                <form method="dialog">
-                    <Button class="absolute right-1 top-1 [&>svg]:opacity-45 [&>svg]:hover:opacity-90 z-10" icon
-                            variant="ghost"
-                            size="sm">
-                        <IconX/>
-                    </Button>
-                </form>
-            {/if}
+        {#if (closeButton)}
+            <form method="dialog">
+                <Button class="absolute right-1 top-1 [&>svg]:opacity-45 [&>svg]:hover:opacity-90 z-10" icon
+                        variant="ghost"
+                        size="sm">
+                    <IconX/>
+                </Button>
+            </form>
+        {/if}
 
+        <div class={"dialog-box " + dialogContainer()}>
             {#if header}
                 <header class={headerStyle()}>
                     {@render header?.()}

package/dist/components/dialog/dialog.scss

@@ -1,10 +1,10 @@
 .dialog-box {
-    max-height: min(calc(100svh - 2rem), 50rem);
+    max-height: calc(100svh - 1rem);
     overflow-y: auto;
     overscroll-behavior: contain;
     display: grid;
     grid-template-rows: auto 1fr auto;
-    @apply bg-neutral-token-1 relative;
+    @apply bg-neutral-token-1 relative top-0 left-0 bottom-0;
 
 }
 
@@ -13,12 +13,16 @@ dialog, dialog:modal {
     max-height: 100svh;
 }
 
+dialog[open] {
+    @apply grid place-content-center grid-cols-1;
+}
+
 dialog {
     &[data-position="top"] {
         position: fixed;
         top: 0;
         left: 50%;
-        transform: translateX(-50%) translateY(-1rem);
+        transform: translateX(-50%) translateY(0.5rem);
         margin: 0;
     }
 

package/dist/components/language-picker-button/LanguagePickerButton.svelte

@@ -4,6 +4,8 @@
     import {Dialog} from "../dialog";
     import IconCheck from "../icons/IconCheck.svelte";
     import {getGlobalContext} from "../tera-ui-context/global-context";
+    import * as m from '../../paraglide/messages.js'
+    import {languageTag} from "../../paraglide/runtime";
 
     let {
         children,
@@ -81,9 +83,9 @@
     <img class="size-6 flag-img" src={getFlagUrl(currentLangItem.flag)} alt={currentLangItem.flag}>
 </button>
 
-<Dialog bind:open={openDialog} class="text-neutral-token-13" size="xs">
+<Dialog bind:open={openDialog} class="text-neutral-token-13" size="xs" staticRender>
     {#snippet header()}
-        Select language
+        {m.text_select_language()}
     {/snippet}
     <div class="grid grid-cols-1 mx-auto gap-2">
         {#each LANGUAGE_LIST as lang}

package/dist/components/popover-responsive/PopoverResponsive.svelte

@@ -56,7 +56,8 @@
     }
 
     onMount(() => {
-        triggerRef?.addEventListener('click', () => {
+        triggerRef?.addEventListener('click', (e) => {
+            e.stopPropagation()
             toggleOpen()
         })
     })

package/dist/components/tera-ui-context/TeraUiContext.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
     import {type TeraUiContextProps} from "./TeraUiContext";
     import {setGlobalContext} from "./global-context";
+    import {setLanguageTag} from "../../paraglide/runtime";
+    import * as m from '../../paraglide/messages.js'
 
 
     let {
@@ -16,6 +18,11 @@
         language,
         ...props
     })
+
+    setLanguageTag(language)
+    console.log('setLanguageTag', language)
+    console.log('test translate', m.text_select_language())
+
 </script>
 
 {@render children()}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tera-system-ui",
-  "version": "0.0.5",
+  "version": "0.0.8",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run package",
@@ -10,7 +10,8 @@
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "lang-compile": "paraglide-js compile --project ./project.inlang --outdir ./src/lib/paraglide"
   },
   "bin": {
     "ui": "./scripts/add-component-template.js",