tinkiet 0.11.0 → 0.11.4

package/radio/index.js

@@ -109,6 +109,61 @@ let TkBox = class TkBox extends external_lit_.LitElement {
          * Activate ripple
          */
         this.ripple = false;
+        this.showRipple = (event) => {
+            const x = event.clientX;
+            const y = event.clientY;
+            const { offsetWidth, offsetHeight } = this;
+            const container = document.createElement("span");
+            container.classList.add("ripple", "open");
+            const element = document.createElement("span");
+            container.appendChild(element);
+            this.shadowRoot.appendChild(container);
+            const rect = this.getBoundingClientRect();
+            const diameter = Math.max(offsetWidth, offsetWidth) * 2;
+            element.style.width = element.style.height = diameter + "px";
+            element.style.left = x - rect.left - diameter / 2 + "px";
+            element.style.top = y - rect.top - diameter / 2 + "px";
+            const inAnimation = element.animate({
+                transform: [`scale(0)`, `scale(1)`]
+            }, {
+                easing: "ease-out",
+                fill: "both",
+                duration: 500
+            });
+            inAnimation.onfinish = () => {
+                container.classList.remove("open");
+                const outAnimation = element.animate({
+                    opacity: ["0.5", "0"]
+                }, {
+                    easing: "ease-in",
+                    fill: "both",
+                    duration: 300
+                });
+                outAnimation.onfinish = () => {
+                    requestAnimationFrame(() => {
+                        container.remove();
+                    });
+                };
+            };
+        };
+        this.hideRipple = (event) => {
+            var _a;
+            (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".ripple:not([open])").forEach(container => {
+                const element = container.querySelector("span");
+                const outAnimation = element.animate({
+                    opacity: ["0.5", "0"]
+                }, {
+                    easing: "ease-out",
+                    fill: "both",
+                    duration: 300
+                });
+                outAnimation.onfinish = () => {
+                    requestAnimationFrame(() => {
+                        container.remove();
+                    });
+                };
+            });
+        };
     }
     static get styles() {
         return [
@@ -124,14 +179,14 @@ let TkBox = class TkBox extends external_lit_.LitElement {
     }
     connectedCallback() {
         if (this.ripple) {
-            this.addEventListener("mousedown", this.showRipple.bind(this), { passive: true });
-            this.addEventListener("mouseup", this.hideRipple.bind(this), { passive: true });
+            this.addEventListener("mousedown", this.showRipple, { passive: true });
+            this.addEventListener("mouseup", this.hideRipple, { passive: true });
         }
         super.connectedCallback();
     }
     disconnectedCallback() {
         this.removeEventListener("mousedown", this.showRipple);
-        this.addEventListener("mouseup", this.hideRipple);
+        this.removeEventListener("mouseup", this.hideRipple);
         super.disconnectedCallback();
     }
     updated(props) {
@@ -141,61 +196,6 @@ let TkBox = class TkBox extends external_lit_.LitElement {
         // 	this.style.setProperty("color", this.color.toString());
         super.updated(props);
     }
-    showRipple(event) {
-        const x = event.clientX;
-        const y = event.clientY;
-        const { offsetWidth, offsetHeight } = this;
-        const container = document.createElement("span");
-        container.classList.add("ripple", "open");
-        const element = document.createElement("span");
-        container.appendChild(element);
-        this.shadowRoot.appendChild(container);
-        const rect = this.getBoundingClientRect();
-        const diameter = Math.max(offsetWidth, offsetWidth) * 2;
-        element.style.width = element.style.height = diameter + "px";
-        element.style.left = x - rect.left - diameter / 2 + "px";
-        element.style.top = y - rect.top - diameter / 2 + "px";
-        const inAnimation = element.animate({
-            transform: [`scale(0)`, `scale(1)`]
-        }, {
-            easing: "ease-out",
-            fill: "both",
-            duration: 500
-        });
-        inAnimation.onfinish = () => {
-            container.classList.remove("open");
-            const outAnimation = element.animate({
-                opacity: ["0.5", "0"]
-            }, {
-                easing: "ease-in",
-                fill: "both",
-                duration: 300
-            });
-            outAnimation.onfinish = () => {
-                requestAnimationFrame(() => {
-                    container.remove();
-                });
-            };
-        };
-    }
-    hideRipple(event) {
-        var _a;
-        (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".ripple:not([open])").forEach(container => {
-            const element = container.querySelector("span");
-            const outAnimation = element.animate({
-                opacity: ["0.5", "0"]
-            }, {
-                easing: "ease-out",
-                fill: "both",
-                duration: 300
-            });
-            outAnimation.onfinish = () => {
-                requestAnimationFrame(() => {
-                    container.remove();
-                });
-            };
-        });
-    }
 };
 __decorate([
     (0,decorators_js_.property)({ type: Boolean })
@@ -276,6 +276,25 @@ let TkRadio = class TkRadio extends external_lit_.LitElement {
         this.required = false;
         this.disabled = false;
         this.readonly = false;
+        this.onKeyDown = (e) => {
+            if (this.disabled)
+                return;
+            if (e.code === "Space" || e.code === "Enter") {
+                e.preventDefault();
+                e.stopPropagation();
+                this.click();
+            }
+        };
+        this.handleClick = () => {
+            if (this.disabled)
+                return;
+            this.checked = !this.checked;
+            if (this.checked && this.name)
+                this.getRootNode()
+                    .querySelectorAll(`tk-radio[name="${this.name}"]`)
+                    .forEach(el => (el != this ? (el.checked = false) : null));
+            setTimeout(() => this.dispatchEvent(new Event("change", { bubbles: true, composed: true })));
+        };
     }
     render() {
         return (0,external_lit_.html) `
@@ -305,8 +324,8 @@ let TkRadio = class TkRadio extends external_lit_.LitElement {
     }
     connectedCallback() {
         super.connectedCallback();
-        this.addEventListener("click", this.handleClick.bind(this));
-        this.addEventListener("keydown", this.onKeyDown.bind(this));
+        this.addEventListener("click", this.handleClick);
+        this.addEventListener("keydown", this.onKeyDown);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -316,25 +335,6 @@ let TkRadio = class TkRadio extends external_lit_.LitElement {
     firstUpdated() {
         this.appendChild(this.$input);
     }
-    onKeyDown(e) {
-        if (this.disabled)
-            return;
-        if (e.code === "Space" || e.code === "Enter") {
-            e.preventDefault();
-            e.stopPropagation();
-            this.click();
-        }
-    }
-    handleClick() {
-        if (this.disabled)
-            return;
-        this.checked = !this.checked;
-        if (this.checked && this.name)
-            this.getRootNode()
-                .querySelectorAll(`tk-radio[name="${this.name}"]`)
-                .forEach(el => (el != this ? (el.checked = false) : null));
-        setTimeout(() => this.dispatchEvent(new Event("change", { bubbles: true, composed: true })));
-    }
 };
 TkRadio.styles = (0,external_lit_.css) `
 		${(0,external_lit_.unsafeCSS)(radio_radio)}

package/radio/radio.d.ts

@@ -14,8 +14,8 @@ export declare class TkRadio extends LitElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     firstUpdated(): void;
-    protected onKeyDown(e: KeyboardEvent): void;
-    protected handleClick(): void;
+    protected onKeyDown: (e: KeyboardEvent) => void;
+    protected handleClick: () => void;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/router/index.d.ts

@@ -21,6 +21,8 @@ export interface NavigateOptions {
 export declare class Router {
     private layers;
     private started;
+    private handlePopState;
+    private handleDocumentClick;
     /**
      * Global middleware:
      * router.use((ctx, next) => { ... })
@@ -39,6 +41,10 @@ export declare class Router {
      * Start listening to history and link clicks, and dispatch initial URL.
      */
     start(): void;
+    /**
+     * Stop listening to history and link clicks.
+     */
+    stop(): void;
     /**
      * Shortcut to go back in history.
      */

package/router/index.js

@@ -30,22 +30,35 @@ function matchPath(pattern, pathname) {
     const patternParts = pattern.split('/').filter(Boolean);
     const pathParts = pathname.split('/').filter(Boolean);
     const params = {};
+    let pathIndex = 0;
     for (let i = 0; i < patternParts.length; i++) {
         const pat = patternParts[i];
-        const isLastPatternSegment = i === patternParts.length - 1;
-        const segment = pathParts[i];
+        const segment = pathParts[pathIndex];
+        const isRestParam = pat.startsWith(':') && pat.endsWith('*');
+        const isOptionalParam = pat.startsWith(':') && pat.endsWith('?');
+        const isParam = pat.startsWith(':') && !isRestParam && !isOptionalParam;
         // Wildcard "rest" param: :name*
-        if (pat.startsWith(':') && pat.endsWith('*')) {
+        if (isRestParam) {
             const name = pat.slice(1, -1); // remove ':' and '*'
-            params[name] = decodeURIComponent(pathParts.slice(i).join('/'));
+            params[name] = decodeURIComponent(pathParts.slice(pathIndex).join('/'));
             return { params };
         }
+        // Optional param :name?
+        if (isOptionalParam) {
+            if (segment != null) {
+                const name = pat.slice(1, -1); // remove ':' and '?'
+                params[name] = decodeURIComponent(segment);
+                pathIndex += 1;
+            }
+            continue;
+        }
         // Simple param :name
-        if (pat.startsWith(':')) {
+        if (isParam) {
             if (segment == null)
                 return null;
             const name = pat.slice(1);
             params[name] = decodeURIComponent(segment);
+            pathIndex += 1;
             continue;
         }
         // Plain wildcard "*"
@@ -56,13 +69,10 @@ function matchPath(pattern, pathname) {
         if (segment !== pat) {
             return null;
         }
-        // If we are at end of pattern but still have more path segments
-        if (isLastPatternSegment && pathParts.length > patternParts.length) {
-            return null;
-        }
+        pathIndex += 1;
     }
-    // Extra segments in path not matched by a rest param => no match
-    if (pathParts.length > patternParts.length) {
+    // Extra segments in path not matched by optional/rest params => no match
+    if (pathIndex < pathParts.length) {
         return null;
     }
     return { params };
@@ -84,6 +94,46 @@ class Router {
     constructor() {
         this.layers = [];
         this.started = false;
+        this.handlePopState = () => {
+            const url = new URL(window.location.href);
+            void this.dispatch(url);
+        };
+        this.handleDocumentClick = (event) => {
+            var _a, _b;
+            const path = event.composedPath();
+            // Find first element in the composed path that exposes an href
+            let linkEl = null;
+            let href = null;
+            for (const el of path) {
+                if (!(el instanceof HTMLElement))
+                    continue;
+                const elHref = (_a = el.href) !== null && _a !== void 0 ? _a : el.getAttribute('href');
+                if (elHref) {
+                    linkEl = el;
+                    href = elHref;
+                    break;
+                }
+            }
+            if (!linkEl || !href)
+                return;
+            const url = new URL(href, window.location.origin);
+            const sameOrigin = url.origin === window.location.origin;
+            const targetAttr = (_b = linkEl.target) !== null && _b !== void 0 ? _b : linkEl.getAttribute('target');
+            const isModifiedClick = event.metaKey ||
+                event.ctrlKey ||
+                event.shiftKey ||
+                event.altKey ||
+                event.button !== 0;
+            if (!sameOrigin || isModifiedClick || targetAttr === '_blank')
+                return;
+            if (linkEl.hasAttribute('download'))
+                return;
+            // Let browser handle hash-only navigation on same path
+            if (url.pathname === window.location.pathname && url.hash !== '')
+                return;
+            event.preventDefault();
+            this.navigate(url.pathname + url.search + url.hash);
+        };
     }
     use(patternOrHandler, handler) {
         if (typeof patternOrHandler === 'string') {
@@ -133,50 +183,22 @@ class Router {
             return;
         this.started = true;
         // Back/forward
-        window.addEventListener('popstate', () => {
-            const url = new URL(window.location.href);
-            void this.dispatch(url);
-        });
+        window.addEventListener('popstate', this.handlePopState);
         // Intercept <a> clicks for SPA navigation
-        document.addEventListener('click', (event) => {
-            var _a, _b;
-            const path = event.composedPath();
-            // Find first element in the composed path that exposes an href
-            let linkEl = null;
-            let href = null;
-            for (const el of path) {
-                if (!(el instanceof HTMLElement))
-                    continue;
-                const elHref = (_a = el.href) !== null && _a !== void 0 ? _a : el.getAttribute('href');
-                if (elHref) {
-                    linkEl = el;
-                    href = elHref;
-                    break;
-                }
-            }
-            if (!linkEl || !href)
-                return;
-            const url = new URL(href, window.location.origin);
-            const sameOrigin = url.origin === window.location.origin;
-            const targetAttr = (_b = linkEl.target) !== null && _b !== void 0 ? _b : linkEl.getAttribute('target');
-            const isModifiedClick = event.metaKey ||
-                event.ctrlKey ||
-                event.shiftKey ||
-                event.altKey ||
-                event.button !== 0;
-            if (!sameOrigin || isModifiedClick || targetAttr === '_blank')
-                return;
-            if (linkEl.hasAttribute('download'))
-                return;
-            // Let browser handle hash-only navigation on same path
-            if (url.pathname === window.location.pathname && url.hash !== '')
-                return;
-            event.preventDefault();
-            this.navigate(url.pathname + url.search + url.hash);
-        });
+        document.addEventListener('click', this.handleDocumentClick);
         const initialUrl = new URL(window.location.href);
         void this.dispatch(initialUrl);
     }
+    /**
+     * Stop listening to history and link clicks.
+     */
+    stop() {
+        if (!this.started)
+            return;
+        window.removeEventListener('popstate', this.handlePopState);
+        document.removeEventListener('click', this.handleDocumentClick);
+        this.started = false;
+    }
     /**
      * Shortcut to go back in history.
      */

package/select/index.js

@@ -109,6 +109,61 @@ let TkBox = class TkBox extends external_lit_.LitElement {
          * Activate ripple
          */
         this.ripple = false;
+        this.showRipple = (event) => {
+            const x = event.clientX;
+            const y = event.clientY;
+            const { offsetWidth, offsetHeight } = this;
+            const container = document.createElement("span");
+            container.classList.add("ripple", "open");
+            const element = document.createElement("span");
+            container.appendChild(element);
+            this.shadowRoot.appendChild(container);
+            const rect = this.getBoundingClientRect();
+            const diameter = Math.max(offsetWidth, offsetWidth) * 2;
+            element.style.width = element.style.height = diameter + "px";
+            element.style.left = x - rect.left - diameter / 2 + "px";
+            element.style.top = y - rect.top - diameter / 2 + "px";
+            const inAnimation = element.animate({
+                transform: [`scale(0)`, `scale(1)`]
+            }, {
+                easing: "ease-out",
+                fill: "both",
+                duration: 500
+            });
+            inAnimation.onfinish = () => {
+                container.classList.remove("open");
+                const outAnimation = element.animate({
+                    opacity: ["0.5", "0"]
+                }, {
+                    easing: "ease-in",
+                    fill: "both",
+                    duration: 300
+                });
+                outAnimation.onfinish = () => {
+                    requestAnimationFrame(() => {
+                        container.remove();
+                    });
+                };
+            };
+        };
+        this.hideRipple = (event) => {
+            var _a;
+            (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".ripple:not([open])").forEach(container => {
+                const element = container.querySelector("span");
+                const outAnimation = element.animate({
+                    opacity: ["0.5", "0"]
+                }, {
+                    easing: "ease-out",
+                    fill: "both",
+                    duration: 300
+                });
+                outAnimation.onfinish = () => {
+                    requestAnimationFrame(() => {
+                        container.remove();
+                    });
+                };
+            });
+        };
     }
     static get styles() {
         return [
@@ -124,14 +179,14 @@ let TkBox = class TkBox extends external_lit_.LitElement {
     }
     connectedCallback() {
         if (this.ripple) {
-            this.addEventListener("mousedown", this.showRipple.bind(this), { passive: true });
-            this.addEventListener("mouseup", this.hideRipple.bind(this), { passive: true });
+            this.addEventListener("mousedown", this.showRipple, { passive: true });
+            this.addEventListener("mouseup", this.hideRipple, { passive: true });
         }
         super.connectedCallback();
     }
     disconnectedCallback() {
         this.removeEventListener("mousedown", this.showRipple);
-        this.addEventListener("mouseup", this.hideRipple);
+        this.removeEventListener("mouseup", this.hideRipple);
         super.disconnectedCallback();
     }
     updated(props) {
@@ -141,61 +196,6 @@ let TkBox = class TkBox extends external_lit_.LitElement {
         // 	this.style.setProperty("color", this.color.toString());
         super.updated(props);
     }
-    showRipple(event) {
-        const x = event.clientX;
-        const y = event.clientY;
-        const { offsetWidth, offsetHeight } = this;
-        const container = document.createElement("span");
-        container.classList.add("ripple", "open");
-        const element = document.createElement("span");
-        container.appendChild(element);
-        this.shadowRoot.appendChild(container);
-        const rect = this.getBoundingClientRect();
-        const diameter = Math.max(offsetWidth, offsetWidth) * 2;
-        element.style.width = element.style.height = diameter + "px";
-        element.style.left = x - rect.left - diameter / 2 + "px";
-        element.style.top = y - rect.top - diameter / 2 + "px";
-        const inAnimation = element.animate({
-            transform: [`scale(0)`, `scale(1)`]
-        }, {
-            easing: "ease-out",
-            fill: "both",
-            duration: 500
-        });
-        inAnimation.onfinish = () => {
-            container.classList.remove("open");
-            const outAnimation = element.animate({
-                opacity: ["0.5", "0"]
-            }, {
-                easing: "ease-in",
-                fill: "both",
-                duration: 300
-            });
-            outAnimation.onfinish = () => {
-                requestAnimationFrame(() => {
-                    container.remove();
-                });
-            };
-        };
-    }
-    hideRipple(event) {
-        var _a;
-        (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".ripple:not([open])").forEach(container => {
-            const element = container.querySelector("span");
-            const outAnimation = element.animate({
-                opacity: ["0.5", "0"]
-            }, {
-                easing: "ease-out",
-                fill: "both",
-                duration: 300
-            });
-            outAnimation.onfinish = () => {
-                requestAnimationFrame(() => {
-                    container.remove();
-                });
-            };
-        });
-    }
 };
 __decorate([
     (0,decorators_js_.property)({ type: Boolean })