tera-system-ui 0.0.40 → 0.0.43

package/dist/components/command/command.js

@@ -284,9 +284,9 @@ export function createCommand(props) {
         // console.log('validItems', validItems)
         // console.log(validItems)
         // console.log(scores)
-        console.log(validItems.map(i => {
-            return scores.get(i.getAttribute('id') ?? '');
-        }));
+        // console.log(validItems.map(i => {
+        // 	return scores.get(i.getAttribute('id') ?? '');
+        // }))
         for (const item of validItems) {
             const group = item.closest(GROUP_ITEMS_SELECTOR);
             const closest = item.closest(`${GROUP_ITEMS_SELECTOR} > *`);

package/dist/components/command/components/CommandInput.svelte

@@ -40,7 +40,6 @@
         if (autofocus) {
             sleep(200).then(() => {
                 node.focus()
-                console.log('CommandInput autofocus')
             });
         }
     }

package/dist/components/dialog/Dialog.js

@@ -4,7 +4,7 @@ export const styles = tv({
         base: '',
         dialog: 'bg-transparent text-inherit',
         dialogContainer: 'py-4 rounded-container',
-        header: 'font-semibold px-4 mb-2',
+        header: 'font-bold px-4 mb-2',
         body: 'px-4',
         footer: 'mt-3 px-4 flex items-center justify-end gap-2.5'
     },

package/dist/components/dialog/Dialog.svelte

@@ -37,7 +37,6 @@
             ref?.close()
             sleep(200).then(() => {
                 stillAnimating = open
-                console.log('stillAnimating', stillAnimating)
             })
 
             if (focusTriggerAfterClose && hasOpened && triggerRef) {

package/dist/components/popover/Popover.svelte

@@ -42,7 +42,6 @@
                 offset(offsetAmount),
                 size({
                     apply({rects, elements}) {
-                        console.log(elements.reference)
                         Object.assign(elements.floating.style, {
                             minWidth: `${rects.reference.width}px`,
                             maxWidth: `${window.innerWidth - 16}px`,

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

@@ -51,8 +51,6 @@
             }
             openPopover = false
         }
-
-        console.log('toggleOpen Responsive Popover', open)
     }
 
     onMount(() => {

package/dist/components/slider/Slider.svelte

@@ -81,7 +81,6 @@
         // Calculate nearest step position
         const stepCount = Math.round(clampedPosition / stepSize);
 
-        console.log(stepCount)
         return min + stepCount
     };
 

package/dist/components/star-rating/StarRating.svelte

@@ -29,21 +29,21 @@
         }
 
         onchange?.(v)
-        console.log('setRating', e.type)
+        // console.log('setRating', e.type)
 
     }
 
     // Updates hover state when hovering over a star
     function setHover(v, e) {
         hoverRating = v;
-        console.log('setHover', v, e.type)
+        // console.log('setHover', v, e.type)
     }
 
     // Resets hover state when leaving the star area
     function resetHover(e) {
 
         hoverRating = 0;
-        console.log('resetHover', e.type)
+        // console.log('resetHover', e.type)
     }
 
 </script>

package/dist/components/tabs/components/Tabs.svelte

@@ -13,7 +13,7 @@
 
 
     function setValue(v: string) {
-        console.log('Change value', v)
+        // console.log('Change value', v)
         value = v
     }
 

package/dist/components/tabs/components/TabsItem.svelte

@@ -27,6 +27,6 @@
 
 <style>
     button[data-state="active"] {
-    color: hsl(var(--tw---token-color-primary-token-6))
+    color: hsl(var(--tw---token-color-primary-token-5))
 }
 </style>

package/dist/components/tabs/components/TabsList.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-    import {cn} from "../../../utils/utils";
+    import {cn, consoleLog, observeVisibility} from "../../../utils/utils";
     import {getCtx} from "../Tabs";
+    import {onMount} from "svelte";
 
     let {
         children,
@@ -11,7 +12,9 @@
     let tabIndicator = $state()
     let tabsList = $state()
 
-    function updateIndicator(button) {
+    function updateIndicator() {
+        let button = tabsList?.querySelector(`button[data-value="${context.state.currentTab}"]`)
+
         const rect = button.getBoundingClientRect();
         const containerRect = tabsList.getBoundingClientRect();
 
@@ -20,14 +23,27 @@
 
         tabIndicator.style.left = `${left}px`;
         tabIndicator.style.width = `${width}px`;
+
+        consoleLog('TabList', 'tabIndicator', tabIndicator)
     }
 
 
     let context = getCtx()
 
     $effect(() => {
-        let tabButton = tabsList?.querySelector(`button[data-value="${context.state.currentTab}"]`)
-        updateIndicator(tabButton);
+        context.state.currentTab
+        updateIndicator();
+    })
+
+    onMount(() => {
+        const stopObserving = observeVisibility(tabIndicator, (isVisible, entry) => {
+            if (isVisible) {
+                consoleLog('Element is visible:', entry.target);
+                updateIndicator()
+            }
+        });
+
+        return () => stopObserving()
     })
 </script>
 

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

@@ -16,11 +16,11 @@
         ...props
     })
 
-    console.log('tera-system-ui', 'TeraUIContext props', {
-        supportLanguages,
-        language,
-        ...props
-    })
+    // console.log('tera-system-ui', 'TeraUIContext props', {
+    //     supportLanguages,
+    //     language,
+    //     ...props
+    // })
 
     setLanguageTag(language)
 </script>

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

@@ -8,13 +8,13 @@ export function setGlobalContext(data) {
     else {
         setContext('globalContext', data);
     }
-    console.log('tera-system-ui', 'set global context', data);
+    // console.log('tera-system-ui', 'set global context', data);
 }
 export function getGlobalContext() {
     let context = getContext('globalContext') || get(globalContextStore);
-    console.log('tera-system-ui', 'getGlobalContext', context);
+    // console.log('tera-system-ui', 'getGlobalContext', context);
     if (!context) {
-        console.error('tera-system-ui', 'Not set global context yet!', 'Using default context data');
+        // console.error('tera-system-ui', 'Not set global context yet!', 'Using default context data')
         return {
             language: 'en',
             supportLanguages: ['en']

package/dist/utils/utils.d.ts

@@ -1,2 +1,4 @@
 import { type ClassValue } from "clsx";
 export declare function cn(...inputs: ClassValue[]): string;
+export declare function consoleLog(...params: any[]): void;
+export declare function observeVisibility(element: HTMLElement, callback: any): () => void;

package/dist/utils/utils.js

@@ -3,3 +3,22 @@ import { twMerge } from "tailwind-merge";
 export function cn(...inputs) {
     return twMerge(clsx(inputs));
 }
+export function consoleLog(...params) {
+    console.log('tera-system-ui', ...params);
+}
+export function observeVisibility(element, callback) {
+    if (!element) {
+        throw new Error("Invalid element provided.");
+    }
+    // Create an Intersection Observer
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach((entry) => {
+            // Check if the element is visible
+            callback(entry.isIntersecting, entry);
+        });
+    });
+    // Start observing the element
+    observer.observe(element);
+    // Return a function to stop observing
+    return () => observer.disconnect();
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "tera-system-ui",
-	"version": "0.0.40",
+	"version": "0.0.43",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "npm run customPrepublish && npm run generate-index && vite build && npm run package && npm run postpublish",