@lynx-js/web-elements 0.11.0 → 0.11.2

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @lynx-js/web-elements
 
+## 0.11.2
+
+### Patch Changes
+
+- Add scrollHeight/scrollWidth getters to XList. ([#2156](https://github.com/lynx-family/lynx-stack/pull/2156))
+
+- Inherit padding styles for x-input elements. ([#2199](https://github.com/lynx-family/lynx-stack/pull/2199))
+
+- Remove the default lazy-loading attribute from x-image elements. ([#2186](https://github.com/lynx-family/lynx-stack/pull/2186))
+
+- Fix x-input number type forwarding to the inner input element. ([#2193](https://github.com/lynx-family/lynx-stack/pull/2193))
+
+## 0.11.1
+
+### Patch Changes
+
+- feat: add wheel event handling and corresponding tests for x-foldview-ng ([#2145](https://github.com/lynx-family/lynx-stack/pull/2145))
+
 ## 0.11.0
 
 ### Minor Changes

package/dist/elements/XFoldViewNg/XFoldviewSlotNgTouchEventsHandler.js

@@ -12,7 +12,7 @@ export class XFoldviewSlotNgTouchEventsHandler {
     static observedAttributes = [];
     constructor(dom) {
         this.#dom = dom;
-        this.#dom.addEventListener('touchmove', this.#scroller, {
+        this.#dom.addEventListener('touchmove', this.#handleTouch, {
             passive: false,
         });
         this.#dom.addEventListener('touchstart', this.#touchStart, {
@@ -21,6 +21,9 @@ export class XFoldviewSlotNgTouchEventsHandler {
         this.#dom.addEventListener('touchend', this.#touchEnd, {
             passive: true,
         });
+        this.#dom.addEventListener('wheel', this.#handleWheel, {
+            passive: false,
+        });
     }
     #getTheMostScrollableKid(delta) {
         const scrollableKid = this.#elements?.find((element) => {
@@ -42,8 +45,11 @@ export class XFoldviewSlotNgTouchEventsHandler {
         this.#childrenElemsntsScrollTop.set(scrollableKid, targetKidScrollDistance);
         scrollableKid.scrollTop = targetKidScrollDistance;
     }
-    #scroller = (event) => {
+    #handleTouch = (event) => {
         const parentElement = this.#getParentElement();
+        if (!parentElement) {
+            return;
+        }
         const touch = event.touches.item(0);
         const { pageY, pageX } = touch;
         const deltaY = this.#previousPageY - pageY;
@@ -54,33 +60,34 @@ export class XFoldviewSlotNgTouchEventsHandler {
         if (this.#scrollingVertically === false) {
             return;
         }
-        const scrollableKidY = this.#getTheMostScrollableKid(deltaY);
-        if (parentElement) {
-            if (event.cancelable) {
-                event.preventDefault();
-            }
-            if ((parentElement[isHeaderShowing] && deltaY > 0
-                || (deltaY < 0 && !scrollableKidY))
-                // deltaY > 0: swipe up (folding header)
-                // scroll the foldview if its scrollable
-                || (!parentElement[isHeaderShowing] && !scrollableKidY)
-            // all sub doms are scrolled
-            ) {
-                parentElement.scrollBy({
-                    top: deltaY,
-                    behavior: 'smooth',
-                });
-                this.#parentScrollTop += deltaY;
-                parentElement.scrollTop = this.#parentScrollTop;
-                this.#currentScrollingElement = parentElement;
-            }
-            else if (scrollableKidY) {
-                this.#currentScrollingElement = scrollableKidY;
-                this.#scrollKid(scrollableKidY, deltaY);
-            }
+        if (event.cancelable) {
+            event.preventDefault();
         }
+        this.#handleScrollDelta(deltaY, parentElement);
         this.#previousPageY = pageY;
-        this.#deltaY = deltaY;
+    };
+    #handleWheel = (event) => {
+        const parentElement = this.#getParentElement();
+        if (!parentElement) {
+            return;
+        }
+        if (Math.abs(event.deltaY) <= Math.abs(event.deltaX)) {
+            return;
+        }
+        const pathElements = event.composedPath().filter((element) => element instanceof Element && this.#dom.contains(element));
+        const { clientX, clientY } = event;
+        const pointElements = document.elementsFromPoint(clientX, clientY).filter(e => this.#dom.contains(e));
+        this.#elements = [...new Set([...pathElements, ...pointElements])];
+        this.#parentScrollTop = parentElement.scrollTop;
+        if (this.#elements) {
+            for (const element of this.#elements) {
+                this.#childrenElemsntsScrollTop.set(element, element.scrollTop);
+            }
+        }
+        if (event.cancelable) {
+            event.preventDefault();
+        }
+        this.#handleScrollDelta(event.deltaY, parentElement);
     };
     #getParentElement() {
         const parentElement = this.#dom.parentElement;
@@ -114,5 +121,28 @@ export class XFoldviewSlotNgTouchEventsHandler {
             });
         }
     };
+    #handleScrollDelta(deltaY, parentElement) {
+        const scrollableKidY = this.#getTheMostScrollableKid(deltaY);
+        if ((parentElement[isHeaderShowing] && deltaY > 0
+            || (deltaY < 0 && !scrollableKidY))
+            // deltaY > 0: swipe up (folding header)
+            // scroll the foldview if its scrollable
+            || (!parentElement[isHeaderShowing] && !scrollableKidY)
+        // all sub doms are scrolled
+        ) {
+            parentElement.scrollBy({
+                top: deltaY,
+                behavior: 'smooth',
+            });
+            this.#parentScrollTop += deltaY;
+            parentElement.scrollTop = this.#parentScrollTop;
+            this.#currentScrollingElement = parentElement;
+        }
+        else if (scrollableKidY) {
+            this.#currentScrollingElement = scrollableKidY;
+            this.#scrollKid(scrollableKidY, deltaY);
+        }
+        this.#deltaY = deltaY;
+    }
 }
 //# sourceMappingURL=XFoldviewSlotNgTouchEventsHandler.js.map

package/dist/elements/XInput/XInputEvents.js

@@ -27,6 +27,7 @@ let XInputEvents = (() => {
         static observedAttributes = ['send-composing-input', 'input-filter'];
         #dom = __runInitializers(this, _instanceExtraInitializers);
         #sendComposingInput = false;
+        #numberInputFilter = /[^0-9.]|\.(?=.*\.)/g;
         #getInputElement = genDomGetter(() => this.#dom.shadowRoot, '#input');
         #getFormElement = genDomGetter(() => this.#dom.shadowRoot, '#form');
         _handleEnableInputEvent(status) {
@@ -54,10 +55,7 @@ let XInputEvents = (() => {
         };
         #teleportInput = (event) => {
             const input = this.#getInputElement();
-            const inputFilter = this.#dom.getAttribute('input-filter');
-            const filterValue = inputFilter
-                ? input.value.replace(new RegExp(inputFilter, 'g'), '')
-                : input.value;
+            const filterValue = this.#filterInputValue(input.value);
             const isComposing = event.isComposing;
             input.value = filterValue;
             if (isComposing && !this.#sendComposingInput)
@@ -78,10 +76,7 @@ let XInputEvents = (() => {
         };
         #teleportCompositionendInput = () => {
             const input = this.#getInputElement();
-            const inputFilter = this.#dom.getAttribute('input-filter');
-            const filterValue = inputFilter
-                ? input.value.replace(new RegExp(inputFilter, 'g'), '')
-                : input.value;
+            const filterValue = this.#filterInputValue(input.value);
             input.value = filterValue;
             // if #sendComposingInput set true, #teleportInput will send detail
             if (!this.#sendComposingInput) {
@@ -100,6 +95,17 @@ let XInputEvents = (() => {
                 }));
             }
         };
+        #filterInputValue(value) {
+            let filterValue = value;
+            if (this.#dom.getAttribute('type') === 'number') {
+                filterValue = filterValue.replace(this.#numberInputFilter, '');
+            }
+            const inputFilter = this.#dom.getAttribute('input-filter');
+            if (inputFilter) {
+                filterValue = filterValue.replace(new RegExp(inputFilter, 'g'), '');
+            }
+            return filterValue;
+        }
         _handleEnableSelectionEvent(status) {
             if (status) {
                 this.#getInputElement().addEventListener('select', this.#selectEvent, {

package/dist/elements/XList/XList.d.ts

@@ -5,6 +5,8 @@ export declare class XList extends HTMLElement {
     set scrollTop(val: number);
     get scrollLeft(): number;
     set scrollLeft(val: number);
+    get scrollHeight(): number;
+    get scrollWidth(): number;
     get __scrollTop(): number;
     get __scrollLeft(): number;
     scrollToPosition(params: {

package/dist/elements/XList/XList.js

@@ -46,6 +46,12 @@ let XList = (() => {
         set scrollLeft(val) {
             this.#getListContainer().scrollLeft = val;
         }
+        get scrollHeight() {
+            return this.#getListContainer().scrollHeight;
+        }
+        get scrollWidth() {
+            return this.#getListContainer().scrollWidth;
+        }
         get __scrollTop() {
             return super.scrollTop;
         }

package/dist/elements/htmlTemplates.js

@@ -91,7 +91,7 @@ export const templateXImage = (attributes) => {
     if (src && XSSDetector.test(src)) {
         throw new Error('detected <script, this is a potential XSS attack, please check your src');
     }
-    return `<img part="img" alt="" loading="lazy" id="img" ${src ? `src="${src}"` : ''}/> `;
+    return `<img part="img" alt="" id="img" ${src ? `src="${src}"` : ''}/> `;
 };
 export const templateFilterImage = templateXImage;
 export const templateXInput = `<style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-elements",
-  "version": "0.11.0",
+  "version": "0.11.2",
   "private": false,
   "repository": {
     "type": "git",
@@ -127,9 +127,9 @@
     "**/*.css"
   ],
   "devDependencies": {
-    "@playwright/test": "^1.57.0",
-    "@rsbuild/core": "1.7.1",
-    "@rsbuild/plugin-source-build": "^1.0.3",
+    "@playwright/test": "^1.58.2",
+    "@rsbuild/core": "1.7.3",
+    "@rsbuild/plugin-source-build": "1.0.4",
     "nyc": "^17.1.0",
     "tslib": "^2.8.1",
     "@lynx-js/playwright-fixtures": "0.0.0"

package/src/elements/XInput/x-input.css

@@ -28,6 +28,7 @@ x-input::part(input), x-input::part(form) {
   background-color: inherit;
   z-index: inherit;
   margin: inherit;
+  padding: inherit;
   color: inherit;
 }