tosijs-ui 1.5.6 → 1.5.8

package/dist/doc-browser.js

@@ -288,8 +288,8 @@ export function createDocBrowser(options) {
             }
             testResultsResolve(allResults);
             testResultsResolve = undefined;
-            // Post results to dev server on localhost
-            if (isLocalhost) {
+            // Post results to dev server on localhost (not from test iframes)
+            if (isLocalhost && !isTestFrame) {
                 fetch('/report', {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
@@ -680,17 +680,46 @@ export function createDocBrowser(options) {
         lines.unshift(`**Summary: ${totalPassed} passed, ${totalFailed} failed**`, '');
         return lines.join('\n');
     }
+    // Detect if running as background test iframe
+    const searchParams = new URLSearchParams(window.location.search);
+    const isTestFrame = searchParams.get('_testMode') === '1';
+    const testFrameFilename = isTestFrame
+        ? window.location.search.substring(1).split('&')[0]
+        : null;
     // Listen for test completion events
     container.addEventListener('testcomplete', ((event) => {
         handleTestComplete(event);
         updateTestWidget();
+        // If running in test iframe, post results to parent
+        if (isTestFrame && window.parent !== window && testFrameFilename) {
+            const { results } = event.detail;
+            window.parent.postMessage({ type: 'tosi-test-results', filename: testFrameFilename, results }, '*');
+        }
     }));
+    // If running as test iframe, signal when all tests on this page are done
+    if (isTestFrame && testFrameFilename) {
+        const signalDone = () => {
+            const examples = container.querySelectorAll('tosi-example');
+            const withTests = [...examples].filter((ex) => ex.classList.contains('-has-tests'));
+            const running = withTests.filter((ex) => ex.classList.contains('-test-running'));
+            if (withTests.length > 0 && running.length === 0) {
+                window.parent.postMessage({ type: 'tosi-tests-done', filename: testFrameFilename }, '*');
+            }
+            else {
+                setTimeout(signalDone, 100);
+            }
+        };
+        // Give time for examples to start running
+        setTimeout(signalDone, 500);
+    }
     // Background test runner for all doc pages
     const runBackgroundTests = async () => {
         if (backgroundTestsStarted)
             return;
         if (!testManager.enabled.value)
             return;
+        if (isTestFrame)
+            return; // Don't run background tests in test iframe
         backgroundTestsStarted = true;
         // Find all docs that have test blocks
         const docsWithTests = docs.filter((doc) => doc.text.includes('```test'));
@@ -699,89 +728,71 @@ export function createDocBrowser(options) {
             setTestWidgetRunning();
         }
         if (pagesWithTests === 0) {
-            // No tests to run, resolve immediately
             if (testResultsResolve) {
                 testResultsResolve({ passed: 0, failed: 0, pages: {} });
                 testResultsResolve = undefined;
             }
             return;
         }
-        // Create a hidden iframe to run tests in background
+        const currentFilename = String(app.currentDoc.filename);
+        // Create a hidden iframe that loads the full page
         const testFrame = document.createElement('iframe');
         testFrame.style.cssText =
             'position: fixed; left: 0; top: 0; width: 800px; height: 600px; opacity: 0; pointer-events: none;';
         document.body.appendChild(testFrame);
-        const currentFilename = String(app.currentDoc.filename);
+        // Listen for test results posted from the iframe
+        const messageHandler = (event) => {
+            if (event.data?.type !== 'tosi-test-results')
+                return;
+            const { filename, results } = event.data;
+            if (!pageTestResults[filename]) {
+                pageTestResults[filename] = {
+                    passed: true,
+                    tests: [],
+                    totalPassed: 0,
+                    totalFailed: 0,
+                };
+            }
+            const pageResults = pageTestResults[filename];
+            pageResults.tests.push(...results.tests);
+            pageResults.totalPassed += results.passed;
+            pageResults.totalFailed += results.failed;
+            pageResults.passed = pageResults.totalFailed === 0;
+            updateDocTestStatus(filename);
+            updateTestWidget();
+        };
+        window.addEventListener('message', messageHandler);
         for (const doc of docsWithTests) {
-            // Skip current page - it will run tests naturally
-            if (doc.filename === currentFilename) {
+            // Skip current page — it runs tests naturally
+            if (doc.filename === currentFilename)
                 continue;
-            }
-            // Reset page results for this doc
-            pageTestResults[doc.filename] = {
-                passed: true,
-                tests: [],
-                totalPassed: 0,
-                totalFailed: 0,
-            };
-            // Create a container and render the doc content
-            const testContainer = document.createElement('div');
-            const viewer = tosiMd({
-                value: doc.text,
-                didRender() {
-                    LiveExample.insertExamples(this, context);
-                },
+            // Navigate iframe to the page
+            const base = window.location.origin + window.location.pathname;
+            testFrame.src = `${base}?${doc.filename}&_testMode=1`;
+            // Wait for the iframe to signal it's done (max 30s per page)
+            await new Promise((resolve) => {
+                const deadline = Date.now() + 30_000;
+                const onDone = (event) => {
+                    if (event.data?.type === 'tosi-tests-done' &&
+                        event.data.filename === doc.filename) {
+                        window.removeEventListener('message', onDone);
+                        resolve();
+                    }
+                };
+                window.addEventListener('message', onDone);
+                setTimeout(() => {
+                    window.removeEventListener('message', onDone);
+                    resolve();
+                }, deadline - Date.now());
             });
-            testContainer.appendChild(viewer);
-            // Listen for test results from this container
-            const handleBgTest = (event) => {
-                const { results } = event.detail;
-                const pageResults = pageTestResults[doc.filename];
-                pageResults.tests.push(...results.tests);
-                pageResults.totalPassed += results.passed;
-                pageResults.totalFailed += results.failed;
-                pageResults.passed = pageResults.totalFailed === 0;
-                updateDocTestStatus(doc.filename);
-                updateTestWidget();
-            };
-            testContainer.addEventListener('testcomplete', handleBgTest);
-            // Append to iframe for execution
-            const frameDoc = testFrame.contentDocument;
-            if (frameDoc) {
-                frameDoc.body.innerHTML = '';
-                frameDoc.body.appendChild(testContainer);
-                // Wait for all live examples with tests to finish (max 30s per page)
-                await new Promise((resolve) => {
-                    const deadline = Date.now() + 30_000;
-                    const checkDone = () => {
-                        if (Date.now() > deadline) {
-                            resolve();
-                            return;
-                        }
-                        const examples = testContainer.querySelectorAll('tosi-example');
-                        const withTests = [...examples].filter((ex) => ex.classList.contains('-has-tests'));
-                        const running = withTests.filter((ex) => ex.classList.contains('-test-running'));
-                        if (withTests.length > 0 && running.length === 0) {
-                            resolve();
-                        }
-                        else {
-                            setTimeout(checkDone, 100);
-                        }
-                    };
-                    // Give initial render time to start
-                    setTimeout(checkDone, 200);
-                });
-            }
             markPageTested(doc.filename);
         }
         // Clean up
+        window.removeEventListener('message', messageHandler);
         testFrame.remove();
         // Mark current page as tested if it has tests
         if (docsWithTests.some((d) => d.filename === currentFilename)) {
-            // Current page tests will complete naturally, just wait a bit
-            setTimeout(() => {
-                markPageTested(currentFilename);
-            }, 1000);
+            setTimeout(() => markPageTested(currentFilename), 1000);
         }
     };
     // Run background tests when enabled (initially or when toggled on)

package/dist/form.d.ts

@@ -96,6 +96,7 @@ export declare class TosiForm extends XinComponent {
     }, isValid: boolean) => void;
     connectedCallback(): void;
     private handleElementChange;
+    private syncFieldValues;
     private initializeNamedElements;
 }
 /** @deprecated Use TosiField instead */

package/dist/form.js

@@ -669,7 +669,8 @@ export class TosiForm extends XinComponent {
     handleSubmit = (event) => {
         event.preventDefault();
         event.stopPropagation();
-        // Access fields to ensure value is parsed from JSON string if needed
+        // Sync field values before submitting
+        this.syncFieldValues();
         const value = this.fields;
         this.submitCallback(value, this.isValid);
     };
@@ -696,13 +697,30 @@ export class TosiForm extends XinComponent {
             this.fields[name] = target.value;
         }
     };
+    syncFieldValues() {
+        const formValue = this.fields;
+        const namedElements = this.querySelectorAll('[name], [key]');
+        for (const el of namedElements) {
+            const key = el.getAttribute('name') || el.getAttribute('key');
+            if (!key)
+                continue;
+            if (formValue[key] === undefined) {
+                const val = el.value ?? el.getAttribute('value');
+                if (val != null) {
+                    formValue[key] = val;
+                }
+            }
+        }
+    }
     initializeNamedElements() {
         const formValue = this.fields;
         // Handle both 'name' (formAssociated) and 'key' (tosi-field) attributes
         const namedElements = this.querySelectorAll('[name], [key]');
         for (const el of namedElements) {
             const key = el.getAttribute('name') || el.getAttribute('key');
-            if (key && formValue[key] !== undefined) {
+            if (!key)
+                continue;
+            if (formValue[key] !== undefined) {
                 ;
                 el.value = formValue[key];
             }

package/dist/icon-data.js

@@ -68,7 +68,7 @@ export default {
     zapOff: "<svg class=\"stroked\" viewBox=\"0 0 24 24\"><polyline points=\"12.41 6.75 13 2 10.57 4.92\"></polyline><polyline points=\"18.57 12.91 21 10 15.66 10\"></polyline><polyline points=\"8 8 3 14 12 14 11 22 16 16\"></polyline><line x1=\"1\" y1=\"1\" x2=\"23\" y2=\"23\"></line></svg>",
     x: "<svg class=\"stroked\" viewBox=\"0 0 24 24\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line></svg>",
     barChart: "<svg class=\"stroked\" viewBox=\"0 0 24 24\"><line x1=\"12\" y1=\"20\" x2=\"12\" y2=\"10\"></line><line x1=\"18\" y1=\"20\" x2=\"18\" y2=\"4\"></line><line x1=\"6\" y1=\"20\" x2=\"6\" y2=\"16\"></line></svg>",
-    lock: "<svg class=\"stroked\" viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"></rect><path d=\"M7 11V7a5 5 0 0 1 10 0v4\"></path></svg>",
+    lock: "<svg class=\"stroked\" viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"></rect><path d=\"M7 11V7a5 5 0 0 1 10 0v4\"></path></svg> ",
     logIn: "<svg class=\"stroked\" viewBox=\"0 0 24 24\"><path d=\"M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4\"></path><polyline points=\"10 17 15 12 10 7\"></polyline><line x1=\"15\" y1=\"12\" x2=\"3\" y2=\"12\"></line></svg>",
     shoppingBag: "<svg class=\"stroked\" viewBox=\"0 0 24 24\"><path d=\"M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z\"></path><line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"></line><path d=\"M16 10a4 4 0 0 1-8 0\"></path></svg>",
     divide: "<svg class=\"stroked\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"6\" r=\"2\"></circle><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"></line><circle cx=\"12\" cy=\"18\" r=\"2\"></circle></svg>",
@@ -142,7 +142,7 @@ export default {
     rss: "<svg class=\"stroked\" viewBox=\"0 0 24 24\"><path d=\"M4 11a9 9 0 0 1 9 9\"></path><path d=\"M4 4a16 16 0 0 1 16 16\"></path><circle cx=\"5\" cy=\"19\" r=\"1\"></circle></svg>",
     wifi: "<svg class=\"stroked\" viewBox=\"0 0 24 24\"><path d=\"M5 12.55a11 11 0 0 1 14.08 0\"></path><path d=\"M1.42 9a16 16 0 0 1 21.16 0\"></path><path d=\"M8.53 16.11a6 6 0 0 1 6.95 0\"></path><line x1=\"12\" y1=\"20\" x2=\"12.01\" y2=\"20\"></line></svg>",
     watch: "<svg class=\"stroked\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"7\"></circle><polyline points=\"12 9 12 12 13.5 13.5\"></polyline><path d=\"M16.51 17.35l-.35 3.83a2 2 0 0 1-2 1.82H9.83a2 2 0 0 1-2-1.82l-.35-3.83m.01-10.7l.35-3.83A2 2 0 0 1 9.83 1h4.35a2 2 0 0 1 2 1.82l.35 3.83\"></path></svg>",
-    info: "<svg class=\"stroked\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"></circle><line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\"></line><line x1=\"12\" y1=\"8\" x2=\"12.01\" y2=\"8\"></line></svg>",
+    info: "<svg class=\"stroked\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"></circle><line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\"></line><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"7.75\"></line></svg>",
     userX: "<svg class=\"stroked\" viewBox=\"0 0 24 24\"><path d=\"M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"></path><circle cx=\"8.5\" cy=\"7\" r=\"4\"></circle><line x1=\"18\" y1=\"8\" x2=\"23\" y2=\"13\"></line><line x1=\"23\" y1=\"8\" x2=\"18\" y2=\"13\"></line></svg>",
     loader: "<svg class=\"stroked\" viewBox=\"0 0 24 24\"><line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"6\"></line><line x1=\"12\" y1=\"18\" x2=\"12\" y2=\"22\"></line><line x1=\"4.93\" y1=\"4.93\" x2=\"7.76\" y2=\"7.76\"></line><line x1=\"16.24\" y1=\"16.24\" x2=\"19.07\" y2=\"19.07\"></line><line x1=\"2\" y1=\"12\" x2=\"6\" y2=\"12\"></line><line x1=\"18\" y1=\"12\" x2=\"22\" y2=\"12\"></line><line x1=\"4.93\" y1=\"19.07\" x2=\"7.76\" y2=\"16.24\"></line><line x1=\"16.24\" y1=\"7.76\" x2=\"19.07\" y2=\"4.93\"></line></svg>",
     folderPlus: "<svg class=\"stroked\" viewBox=\"0 0 24 24\"><path d=\"M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z\"></path><line x1=\"12\" y1=\"11\" x2=\"12\" y2=\"17\"></line><line x1=\"9\" y1=\"14\" x2=\"15\" y2=\"14\"></line></svg>",

package/dist/icons.d.ts

@@ -6,8 +6,10 @@ export declare const defineIcons: (newIcons: {
 export declare const svg2DataUrl: (icon: Element, fill?: string, stroke?: string, strokeWidth?: number) => string;
 export interface IconRule {
     prefix: string | RegExp;
-    apply: (baseName: string, match: RegExpMatchArray | string, parts: ElementPart[]) => Element | null;
+    apply: (baseName: string, match: RegExpMatchArray | string, parts: ElementPart[]) => Element | string | null;
 }
+/** Returns icon name safe for suffix concatenation (appends _ if name ends in digit) */
+export declare const safeIconSuffix: (name: string) => string;
 export declare const iconRules: IconRule[];
 export declare const icons: SVGIconMap;
 export declare class SvgIcon extends WebComponent {
@@ -20,6 +22,7 @@ export declare class SvgIcon extends WebComponent {
             '--tosi-icon-stroke-linecap': string;
             '--tosi-icon-fill': string;
             display: string;
+            verticalAlign: string;
             stroke: string;
             strokeWidth: string;
             strokeLinejoin: string;