tera-system-ui 0.0.28 → 0.0.33

package/dist/components/avatar/Avatar.d.ts

@@ -78,5 +78,6 @@ export interface AvatarProps extends AvatarVariants {
     src?: string;
     ref?: any;
     userUid?: string;
+    apiUrl?: string;
 }
 export {};

package/dist/components/avatar/Avatar.svelte

@@ -12,6 +12,7 @@
         border = true,
         ref = $bindable(),
         userUid,
+        apiUrl,
         ...props
     }: AvatarProps = $props();
 
@@ -21,7 +22,7 @@
         isError = true
     }
 
-    let imgUrl = src ? src : userUid ? getUserAvatarUrl(userUid) : undefined
+    let imgUrl = src ? src : userUid ? getUserAvatarUrl(userUid, apiUrl) : undefined
 </script>
 
 <div bind:this={ref}

package/dist/components/language-picker-button/LanguagePickerButton.d.ts

@@ -4,5 +4,8 @@ type LanguagePickerButtonVariants = VariantProps<typeof styles>;
 export interface LanguagePickerButtonProps extends LanguagePickerButtonVariants {
     children?: any;
     class?: string;
+    language?: string;
+    supportLanguages?: string[];
+    basePath?: string;
 }
 export {};

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

@@ -9,6 +9,10 @@
     let {
         children,
         onLangSelect,
+
+        language,
+        supportLanguages,
+        basePath,
         ...props
     }: LanguagePickerButtonProps & {
         onLangSelect: (langCode: string) => void
@@ -16,6 +20,10 @@
 
     let context = getGlobalContext()
 
+    supportLanguages = supportLanguages ?? context.supportLanguages!;
+    language = language ?? context.language
+    basePath = basePath ?? context.basePath
+
 
     const LANGUAGE_LIST = [
         {
@@ -59,27 +67,29 @@
             flag: 'vietnam'
         }
         // @ts-ignore
-    ].filter(lang => context.supportLanguages!.includes(lang.code))
+    ].filter(lang => supportLanguages.includes(lang.code))
 
 
-    let currentLangItem = $derived(LANGUAGE_LIST.find(l => l.code === context.language)!)
+    let currentLangItem = $derived(LANGUAGE_LIST.find(l => l.code === language)!)
 
 
     function getFlagUrl(flag: string) {
         if (flag === 'spain') {
-            return `${context.basePath ?? ''}/world-flags/${flag}.png`
+            return `${basePath ?? ''}/world-flags/${flag}.png`
         }
-        return `${context.basePath ?? ''}/world-flags/${flag}.svg`
+        return `${basePath ?? ''}/world-flags/${flag}.svg`
     }
 
     let openDialog = $state(false)
+
+    let flagUrl = $derived(getFlagUrl(currentLangItem.flag))
 </script>
 
 <!--add component here-->
 <button onclick={() => {openDialog = true}}
         class="h-8 flex items-center bg-neutral-token-4 text-neutral-token-9 rounded-full ps-2 pe-1 hover:bg-neutral-token-5 transition-all duration-element-react">
     <IconLanguage class="size-icon-xs"/>
-    <img class="size-6 flag-img" src={getFlagUrl(currentLangItem.flag)} alt={currentLangItem.flag}>
+    <img class="size-6 flag-img" src={flagUrl} alt={currentLangItem.flag}>
 </button>
 
 <Dialog bind:open={openDialog} class="text-neutral-token-13" size="xs" staticRender>
@@ -93,7 +103,7 @@
                         onLangSelect?.(lang.code)
                         openDialog = false
                     }}
-                    data-selected={lang.code === context.language ? '' : undefined}>
+                    data-selected={lang.code === language ? '' : undefined}>
                 <div class="flex items-center gap-2">
                     <img class="size-8 flag-img" src={getFlagUrl(lang.flag)} alt={currentLangItem.flag} loading="lazy">
                     {lang.label}

package/dist/components/side-navigation/SideNavigation.d.ts

@@ -4,6 +4,7 @@ type SideNavigationVariants = VariantProps<typeof styles>;
 export interface SideNavigationProps extends SideNavigationVariants {
     children?: any;
     class?: string;
+    sideNavHref?: string;
 }
 export declare const SCREEN_BREAK_POINTS: {
     sm: number;

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

@@ -19,7 +19,7 @@
 
     import {getGlobalContext} from "../tera-ui-context/global-context";
 
-    let {children, ...props}: SideNavigationProps = $props();
+    let {children, sideNavHref, ...props}: SideNavigationProps = $props();
 
     let temporaryExpand: any = undefined
 
@@ -47,15 +47,12 @@
 
     let globalContext = getGlobalContext()
 
-    console.log('SideNavigation get global context', globalContext)
+    sideNavHref = sideNavHref || globalContext?.sideNavHref
 
     function isSelected(href: string) {
-        const pathname = globalContext?.sideNavHref
-        return pathname?.startsWith(href)
+        return sideNavHref?.startsWith(href)
     }
 
-
-
     const NAV_ITEM = [
         {
             href: '/calculator',

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

@@ -2,8 +2,6 @@
     import {type TeraUiContextProps} from "./TeraUiContext";
     import {setGlobalContext} from "./global-context";
     import {setLanguageTag} from "../../paraglide/runtime";
-    import * as m from '../../paraglide/messages'
-
 
     let {
         children,
@@ -12,17 +10,19 @@
         ...props
     }: TeraUiContextProps = $props();
 
-
     setGlobalContext({
         supportLanguages,
         language,
         ...props
     })
 
-    setLanguageTag(language)
-    console.log('setLanguageTag', language)
-    console.log('test translate', m.text_select_language())
+    console.log('tera-system-ui', 'TeraUIContext props', {
+        supportLanguages,
+        language,
+        ...props
+    })
 
+    setLanguageTag(language)
 </script>
 
 {@render children()}

package/dist/components/tera-ui-context/global-context.js

@@ -12,6 +12,7 @@ export function setGlobalContext(data) {
 }
 export function getGlobalContext() {
     let context = getContext('globalContext') || get(globalContextStore);
+    console.log('tera-system-ui', 'getGlobalContext', context);
     if (!context) {
         console.error('tera-system-ui', 'Not set global context yet!', 'Using default context data');
         return {

package/dist/internal/service/user.service.d.ts

@@ -1,2 +1,2 @@
 export declare function extractShortUsernameFromEmail(email: string): string;
-export declare function getUserAvatarUrl(userUid: string): string;
+export declare function getUserAvatarUrl(userUid: string, apiUrl?: string): string;

package/dist/internal/service/user.service.js

@@ -14,7 +14,7 @@ export function extractShortUsernameFromEmail(email) {
     shortForm = shortForm.slice(0, 4).toUpperCase();
     return shortForm || '?';
 }
-export function getUserAvatarUrl(userUid) {
-    let baseUrl = `${getGlobalContext().apiUrl || 'https://hoidap.xyz/api/v1'}/users`;
+export function getUserAvatarUrl(userUid, apiUrl) {
+    let baseUrl = `${apiUrl || getGlobalContext().apiUrl || 'https://hoidap.xyz/api/v1'}/users`;
     return `${baseUrl}/avatar/${encodeURI(userUid)}`;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tera-system-ui",
-  "version": "0.0.28",
+  "version": "0.0.33",
   "scripts": {
     "dev": "vite dev",
     "build": "npm run customPrepublish && npm run generate-index && vite build && npm run package && npm run postpublish",
@@ -65,7 +65,7 @@
     "@storybook/addon-interactions": "^8.4.4",
     "@storybook/addon-links": "^8.4.4",
     "@storybook/addon-styling": "^1.3.7",
-    "@storybook/addon-svelte-csf": "^5.0.0-next.8",
+    "@storybook/addon-svelte-csf": "^5.0.0-next.11",
     "@storybook/addon-themes": "^8.4.4",
     "@storybook/addon-viewport": "^8.4.4",
     "@storybook/blocks": "^8.4.4",