@lynx-js/web-elements 0.7.2 → 0.7.3

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @lynx-js/web-elements
 
+## 0.7.3
+
+### Patch Changes
+
+- refactor: allow elements to be rendered before :defined ([#855](https://github.com/lynx-family/lynx-stack/pull/855))
+
+  Before this commit, we don't allow developers to render these elements before they're defined.
+
+  In this commit, we will remove these restrictions.
+
+- fix: remove the style `contain: content` of x-foldview-ng, otherwise it will cause the `position: fixed` elements to be positioned incorrectly after scrolling. ([#878](https://github.com/lynx-family/lynx-stack/pull/878))
+
+- fix: x-list should observe property list-type change. ([#862](https://github.com/lynx-family/lynx-stack/pull/862))
+
+  Before this commit, list-type only works when it was first assigned.
+
+  use `requestAnimationFrame` instead of `queueMicrotask` to layoutListItem, this is because it may cause crashes in webkit.
+
+- fix: list-item should support linear layout. ([#859](https://github.com/lynx-family/lynx-stack/pull/859))
+
+- Updated dependencies []:
+  - @lynx-js/web-elements-template@0.7.3
+
 ## 0.7.2
 
 ### Patch Changes

package/dist/XList/XListAttributes.js

@@ -5,7 +5,6 @@ import { __esDecorate, __runInitializers } from "tslib";
 // LICENSE file in the root directory of this source tree.
 */
 import { bindToStyle, boostedQueueMicrotask, registerAttributeHandler, } from '@lynx-js/web-elements-reactive';
-const WATERFALL_SLOT = 'waterfall-slot';
 let XListAttributes = (() => {
     let _private_handlerStickyOffset_decorators;
     let _private_handlerStickyOffset_initializers = [];

package/dist/XList/XListWaterfall.d.ts

@@ -2,7 +2,6 @@ import { type AttributeReactiveClass } from '@lynx-js/web-elements-reactive';
 import type { XList } from './XList.js';
 export declare class XListWaterfall implements InstanceType<AttributeReactiveClass<typeof HTMLElement>> {
     #private;
-    static observedAttributes: never[];
+    static observedAttributes: string[];
     constructor(dom: XList);
-    connectedCallback(): void;
 }

package/dist/XList/XListWaterfall.js

@@ -1,144 +1,169 @@
+import { __esDecorate, __runInitializers, __setFunctionName } from "tslib";
 /*
 // Copyright 2024 The Lynx Authors. All rights reserved.
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
 */
-import { boostedQueueMicrotask, genDomGetter, } from '@lynx-js/web-elements-reactive';
+import { genDomGetter, registerAttributeHandler, } from '@lynx-js/web-elements-reactive';
 const WATERFALL_SLOT = 'waterfall-slot';
 const WATERFALL_STYLE = 'waterfall-style';
-export class XListWaterfall {
-    static observedAttributes = [];
-    #dom;
-    #getListContainer = genDomGetter(() => this.#dom.shadowRoot, '#content');
-    #getLowerThresholdObserver = genDomGetter(() => this.#dom.shadowRoot, 'div[part="lower-threshold-observer"]');
-    #resizeObserver;
-    #childrenObserver;
-    #createWaterfallContainer = () => {
-        const waterfallSlot = document.createElement('slot');
-        waterfallSlot.setAttribute('name', `${WATERFALL_SLOT}`);
-        this.#dom.shadowRoot?.querySelector('[part=upper-threshold-observer]')
-            ?.insertAdjacentElement('afterend', waterfallSlot);
-    };
-    #layoutListItem = (spanCount, isScrollVertical) => {
-        const measurements = new Array(spanCount).fill(0);
-        for (let i = 0; i < this.#dom.children.length; i++) {
-            const listItem = this.#dom.children[i];
-            const mainAxisGap = getComputedStyle(listItem).getPropertyValue('--list-main-axis-gap');
-            const crossAxisGap = getComputedStyle(listItem).getPropertyValue('--list-cross-axis-gap');
-            const increasedMeasurement = isScrollVertical
-                ? listItem.getBoundingClientRect().height + parseFloat(mainAxisGap)
-                : listItem.getBoundingClientRect().width + parseFloat(mainAxisGap);
-            if (listItem.getAttribute('full-span') !== null) {
-                let longestMeasurement = measurements[0];
-                // Find the longest track.
-                for (let j = 1; j < spanCount; j++) {
-                    if (measurements[j] > longestMeasurement) {
-                        longestMeasurement = measurements[j];
+let XListWaterfall = (() => {
+    let _instanceExtraInitializers = [];
+    let _private_handlerListType_decorators;
+    let _private_handlerListType_descriptor;
+    return class XListWaterfall {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _private_handlerListType_decorators = [registerAttributeHandler('list-type', true)];
+            __esDecorate(this, _private_handlerListType_descriptor = { value: __setFunctionName(function (newVal) {
+                    if (newVal === 'waterfall') {
+                        const spanCount = parseFloat(this.#dom.getAttribute('span-count')
+                            || this.#dom.getAttribute('column-count')
+                            || '') || 1;
+                        const scrollOrientation = this.#dom.getAttribute('scroll-orientation')
+                            || 'vertical';
+                        this.#createWaterfallContainer();
+                        if (!this.#resizeObserver) {
+                            this.#resizeObserverInit(spanCount, scrollOrientation === 'vertical');
+                        }
+                        if (!this.#childrenObserver) {
+                            this.#childrenObserver = new MutationObserver((mutationList) => {
+                                const mutation = mutationList?.[0];
+                                if (mutation?.type === 'childList') {
+                                    this.#resizeObserverInit(spanCount, scrollOrientation === 'vertical');
+                                }
+                            });
+                            this.#childrenObserver.observe(this.#dom, {
+                                childList: true,
+                            });
+                        }
+                    }
+                    else {
+                        this.#resizeObserver?.disconnect();
+                        this.#resizeObserver = undefined;
+                        this.#childrenObserver?.disconnect();
+                        this.#childrenObserver = undefined;
+                        for (let i = 0; i < this.#dom.children.length; i++) {
+                            const listItem = this.#dom.children[i];
+                            listItem.removeAttribute('slot');
+                        }
+                        this.#dom.shadowRoot?.querySelector(`slot[name=${WATERFALL_SLOT}]`)
+                            ?.remove();
+                    }
+                }, "#handlerListType") }, _private_handlerListType_decorators, { kind: "method", name: "#handlerListType", static: false, private: true, access: { has: obj => #handlerListType in obj, get: obj => obj.#handlerListType }, metadata: _metadata }, null, _instanceExtraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static observedAttributes = ['list-type'];
+        #dom = __runInitializers(this, _instanceExtraInitializers);
+        #getListContainer = genDomGetter(() => this.#dom.shadowRoot, '#content');
+        #getLowerThresholdObserver = genDomGetter(() => this.#dom.shadowRoot, 'div[part="lower-threshold-observer"]');
+        #resizeObserver;
+        #childrenObserver;
+        #createWaterfallContainer = () => {
+            const waterfallSlot = document.createElement('slot');
+            waterfallSlot.setAttribute('name', `${WATERFALL_SLOT}`);
+            this.#dom.shadowRoot?.querySelector('[part=upper-threshold-observer]')
+                ?.insertAdjacentElement('afterend', waterfallSlot);
+        };
+        #layoutListItem = (spanCount, isScrollVertical) => {
+            const measurements = new Array(spanCount).fill(0);
+            for (let i = 0; i < this.#dom.children.length; i++) {
+                const listItem = this.#dom.children[i];
+                const mainAxisGap = getComputedStyle(listItem).getPropertyValue('--list-main-axis-gap');
+                const crossAxisGap = getComputedStyle(listItem).getPropertyValue('--list-cross-axis-gap');
+                const increasedMeasurement = isScrollVertical
+                    ? listItem.getBoundingClientRect().height + parseFloat(mainAxisGap)
+                    : listItem.getBoundingClientRect().width + parseFloat(mainAxisGap);
+                if (listItem.getAttribute('full-span') !== null) {
+                    let longestMeasurement = measurements[0];
+                    // Find the longest track.
+                    for (let j = 1; j < spanCount; j++) {
+                        if (measurements[j] > longestMeasurement) {
+                            longestMeasurement = measurements[j];
+                        }
+                    }
+                    for (let j = 0; j < spanCount; j++) {
+                        measurements[j] = longestMeasurement + increasedMeasurement;
+                    }
+                    if (isScrollVertical) {
+                        listItem.setAttribute(`${WATERFALL_STYLE}-left`, '0');
+                        listItem.setAttribute(`${WATERFALL_STYLE}-top`, `${longestMeasurement}px`);
+                    }
+                    else {
+                        listItem.setAttribute(`${WATERFALL_STYLE}-left`, `${longestMeasurement}px`);
+                        listItem.setAttribute(`${WATERFALL_STYLE}-top`, '0');
                     }
-                }
-                for (let j = 0; j < spanCount; j++) {
-                    measurements[j] = longestMeasurement + increasedMeasurement;
-                }
-                if (isScrollVertical) {
-                    listItem.setAttribute(`${WATERFALL_STYLE}-left`, '0');
-                    listItem.setAttribute(`${WATERFALL_STYLE}-top`, `${longestMeasurement}px`);
                 }
                 else {
-                    listItem.setAttribute(`${WATERFALL_STYLE}-left`, `${longestMeasurement}px`);
-                    listItem.setAttribute(`${WATERFALL_STYLE}-top`, '0');
-                }
-            }
-            else {
-                let shortestIndex = 0;
-                let shortestMeasurement = measurements[0];
-                // Find the shortest track.
-                for (let j = 1; j < spanCount; j++) {
-                    if (measurements[j] < shortestMeasurement) {
-                        shortestIndex = j;
-                        shortestMeasurement = measurements[j];
+                    let shortestIndex = 0;
+                    let shortestMeasurement = measurements[0];
+                    // Find the shortest track.
+                    for (let j = 1; j < spanCount; j++) {
+                        if (measurements[j] < shortestMeasurement) {
+                            shortestIndex = j;
+                            shortestMeasurement = measurements[j];
+                        }
                     }
+                    const crossOffset = `calc(${shortestIndex} * (100% - ${crossAxisGap} * (${spanCount} - 1))/ ${spanCount} + ${Math.max(0, shortestIndex)} * ${crossAxisGap})`;
+                    if (isScrollVertical) {
+                        listItem.setAttribute(`${WATERFALL_STYLE}-left`, crossOffset);
+                        listItem.setAttribute(`${WATERFALL_STYLE}-top`, `${shortestMeasurement}px`);
+                    }
+                    else {
+                        listItem.setAttribute(`${WATERFALL_STYLE}-left`, `${shortestMeasurement}px`);
+                        listItem.setAttribute(`${WATERFALL_STYLE}-top`, crossOffset);
+                    }
+                    measurements[shortestIndex] += increasedMeasurement;
                 }
-                const crossOffset = `calc(${shortestIndex} * (100% - ${crossAxisGap} * (${spanCount} - 1))/ ${spanCount} + ${Math.max(0, shortestIndex)} * ${crossAxisGap})`;
-                if (isScrollVertical) {
-                    listItem.setAttribute(`${WATERFALL_STYLE}-left`, crossOffset);
-                    listItem.setAttribute(`${WATERFALL_STYLE}-top`, `${shortestMeasurement}px`);
+            }
+            for (let i = 0; i < this.#dom.children.length; i++) {
+                const listItem = this.#dom.children[i];
+                listItem.style.setProperty('left', listItem.getAttribute(`${WATERFALL_STYLE}-left`));
+                listItem.style.setProperty('top', listItem.getAttribute(`${WATERFALL_STYLE}-top`));
+                listItem.setAttribute('slot', WATERFALL_SLOT);
+            }
+            // The reasons why it is not unified in #updateScrollToLowerEventSwitches is:
+            // It is impossible to ensure that list-item is not rendered, so it will cause incorrect listContent.scrollHeight/scrollWidth as height/width.
+            const enableScrollToLower = this.#dom.getAttribute('x-enable-scrolltolower-event');
+            if (enableScrollToLower !== null && enableScrollToLower !== 'false') {
+                const lower = this.#getLowerThresholdObserver();
+                const scrollOrientation = this.#dom.getAttribute('scroll-orientation')
+                    || 'vertical';
+                const listContent = this.#getListContainer();
+                if (scrollOrientation === 'vertical') {
+                    lower.style.setProperty('top', 
+                    // Firefox cannot trigger the bottom IntersectionObserver
+                    `${String(listContent.scrollHeight - 1)}px`, 'important');
+                    // Firefox needs this
+                    lower.style.setProperty('bottom', 'unset', 'important');
                 }
                 else {
-                    listItem.setAttribute(`${WATERFALL_STYLE}-left`, `${shortestMeasurement}px`);
-                    listItem.setAttribute(`${WATERFALL_STYLE}-top`, crossOffset);
+                    lower.style.setProperty('left', 
+                    // Firefox cannot trigger the bottom IntersectionObserver
+                    `${String(listContent.scrollHeight - 1)}px`);
+                    // Firefox needs this
+                    lower.style.setProperty('right', 'unset');
                 }
-                measurements[shortestIndex] += increasedMeasurement;
             }
+        };
+        constructor(dom) {
+            this.#dom = dom;
         }
-        for (let i = 0; i < this.#dom.children.length; i++) {
-            const listItem = this.#dom.children[i];
-            listItem.style.setProperty('left', listItem.getAttribute(`${WATERFALL_STYLE}-left`));
-            listItem.style.setProperty('top', listItem.getAttribute(`${WATERFALL_STYLE}-top`));
-            listItem.setAttribute('slot', WATERFALL_SLOT);
-        }
-        // The reasons why it is not unified in #updateScrollToLowerEventSwitches is:
-        // It is impossible to ensure that list-item is not rendered, so it will cause incorrect listContent.scrollHeight/scrollWidth as height/width.
-        const enableScrollToLower = this.#dom.getAttribute('x-enable-scrolltolower-event');
-        if (enableScrollToLower !== null && enableScrollToLower !== 'false') {
-            const lower = this.#getLowerThresholdObserver();
-            const scrollOrientation = this.#dom.getAttribute('scroll-orientation')
-                || 'vertical';
-            const listContent = this.#getListContainer();
-            if (scrollOrientation === 'vertical') {
-                lower.style.setProperty('top', 
-                // Firefox cannot trigger the bottom IntersectionObserver
-                `${String(listContent.scrollHeight - 1)}px`, 'important');
-                // Firefox needs this
-                lower.style.setProperty('bottom', 'unset', 'important');
-            }
-            else {
-                lower.style.setProperty('left', 
-                // Firefox cannot trigger the bottom IntersectionObserver
-                `${String(listContent.scrollHeight - 1)}px`);
-                // Firefox needs this
-                lower.style.setProperty('right', 'unset');
-            }
-        }
-    };
-    constructor(dom) {
-        this.#dom = dom;
-    }
-    #resizeObserverInit = (spanCount, isScrollVertical) => {
-        this.#resizeObserver?.disconnect();
-        this.#resizeObserver = new ResizeObserver(() => {
-            // may cause: Resizeobserver loop completed with undelivered notifications
-            // https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver#observation_errors
-            boostedQueueMicrotask(() => {
-                this.#layoutListItem(spanCount, isScrollVertical);
+        #resizeObserverInit = (spanCount, isScrollVertical) => {
+            this.#resizeObserver?.disconnect();
+            this.#resizeObserver = new ResizeObserver(() => {
+                // may cause: Resizeobserver loop completed with undelivered notifications
+                // https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver#observation_errors
+                requestAnimationFrame(() => {
+                    this.#layoutListItem(spanCount, isScrollVertical);
+                });
             });
-        });
-        Array.from(this.#dom.children).forEach(element => {
-            this.#resizeObserver?.observe(element);
-        });
+            Array.from(this.#dom.children).forEach(element => {
+                this.#resizeObserver?.observe(element);
+            });
+        };
+        get #handlerListType() { return _private_handlerListType_descriptor.value; }
     };
-    connectedCallback() {
-        if (this.#dom.getAttribute('list-type') === 'waterfall') {
-            const spanCount = parseFloat(this.#dom.getAttribute('span-count')
-                || this.#dom.getAttribute('column-count')
-                || '') || 1;
-            const scrollOrientation = this.#dom.getAttribute('scroll-orientation')
-                || 'vertical';
-            this.#createWaterfallContainer();
-            if (!this.#resizeObserver) {
-                this.#resizeObserverInit(spanCount, scrollOrientation === 'vertical');
-            }
-            if (!this.#childrenObserver) {
-                this.#childrenObserver = new MutationObserver((mutationList) => {
-                    const mutation = mutationList?.[0];
-                    if (mutation?.type === 'childList') {
-                        this.#resizeObserverInit(spanCount, scrollOrientation === 'vertical');
-                    }
-                });
-                this.#childrenObserver.observe(this.#dom, {
-                    childList: true,
-                });
-            }
-        }
-    }
-}
+})();
+export { XListWaterfall };
 //# sourceMappingURL=XListWaterfall.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-elements",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "private": false,
   "repository": {
     "type": "git",
@@ -101,7 +101,7 @@
   ],
   "dependencies": {
     "@lynx-js/web-elements-reactive": "0.2.2",
-    "@lynx-js/web-elements-template": "0.7.2"
+    "@lynx-js/web-elements-template": "0.7.3"
   },
   "devDependencies": {
     "tslib": "^2.8.1"

package/src/XFoldViewNg/x-foldview-ng.css

@@ -9,7 +9,6 @@ x-foldview-ng {
   overflow-x: clip;
   overflow-x: hidden;
   overscroll-behavior: contain;
-  contain: content;
   --foldview-header-height: 0px;
   scrollbar-width: none;
 }

package/src/XImage/x-image.css

@@ -13,9 +13,7 @@ x-image, filter-image {
 }
 
 x-image > *,
-filter-image > *,
-x-image:not(:defined),
-filter-image:not(:defined) {
+filter-image > * {
   display: none;
 }
 

package/src/XInput/x-input.css

@@ -4,10 +4,6 @@
 // LICENSE file in the root directory of this source tree.
 */
 x-input {
-  display: none;
-}
-
-x-input:defined {
   display: contents;
 }
 

package/src/XList/x-list.css

@@ -59,6 +59,7 @@ list-item {
   display: none;
   content-visibility: auto;
   flex: 0 0 auto !important;
+  position: static;
 }
 
 x-list > list-item, x-list > lynx-wrapper > list-item {

package/src/XOverlayNg/x-overlay-ng.css

@@ -3,9 +3,6 @@
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
 */
-x-overlay-ng:not(:defined) {
-  display: none;
-}
 x-overlay-ng::part(dialog) {
   padding: 0;
   border: 0;

package/src/XRefreshView/x-refresh-view.css

@@ -18,9 +18,6 @@ x-refresh-view {
   min-height: 0;
   border-style: solid;
 }
-x-refresh-view:not(:defined) {
-  display: none;
-}
 
 x-refresh-view::part(container),
 x-refresh-view::part(content),

package/src/XText/x-text.css

@@ -15,9 +15,6 @@ x-text:not(x-text > x-text):not(x-text > lynx-wrapper > x-text) {
   --lynx-color: canvastext;
   --lynx-text-bg-color: initial;
 }
-x-text:not(:defined) {
-  display: none;
-}
 
 x-text > * {
   display: none;
@@ -41,36 +38,35 @@ inline-text, inline-image, inline-truncation {
 }
 
 /* nested components */
-x-text > x-text:defined,
-x-text > inline-text:defined,
-x-text > x-text:defined,
-inline-text > inline-text:defined,
-inline-truncation > inline-text:defined,
-inline-truncation > x-text:defined,
-x-text > lynx-wrapper > x-text:defined,
-x-text > lynx-wrapper > inline-text:defined,
-x-text > lynx-wrapper > x-text:defined,
-inline-text > lynx-wrapper > inline-text:defined,
-x-text > lynx-wrapper > x:defined,
-inline-truncation > lynx-wrapper > inline-text:defined,
-inline-truncation > lynx-wrapper > x-text:defined {
+x-text > x-text,
+x-text > inline-text,
+inline-text > inline-text,
+inline-truncation > inline-text,
+inline-truncation > x-text,
+x-text > lynx-wrapper > x-text,
+x-text > lynx-wrapper > inline-text,
+x-text > lynx-wrapper > x-text,
+inline-text > lynx-wrapper > inline-text,
+x-text > lynx-wrapper > *,
+inline-truncation > lynx-wrapper > inline-text,
+inline-truncation > lynx-wrapper > x-text {
   display: inline;
   background-clip: inherit;
   -webkit-background-clip: inherit;
 }
 
-x-text > inline-image:defined,
-x-text > x-image:defined,
-inline-truncation > inline-image:defined,
-inline-truncation > x-image:defined,
-inline-text > inline-image:defined,
-inline-text > x-image:defined,
-x-text > lynx-wrapper > inline-image:defined,
-x-text > lynx-wrapper > x-image:defined,
-inline-truncation > lynx-wrapper > inline-image:defined,
-inline-truncation > lynx-wrapper > x-image:defined,
-inline-text > lynx-wrapper > inline-image:defined,
-inline-text > lynx-wrapper > x-image:defined {
+x-text > inline-image,
+x-text > x-image,
+inline-truncation > inline-image,
+inline-truncation > x-image,
+inline-text > inline-image,
+inline-text > x-image,
+x-text > lynx-wrapper > inline-image,
+x-text > lynx-wrapper > x-image,
+inline-truncation > lynx-wrapper > inline-image,
+inline-truncation > lynx-wrapper > x-image,
+inline-text > lynx-wrapper > inline-image,
+inline-text > lynx-wrapper > x-image {
   display: contents !important;
 }
 x-text > x-view, x-text > lynx-wrapper > x-view {
@@ -230,7 +226,7 @@ x-text[text-maxline][tail-color-convert="false"]::part(inner-box) {
 }
 
 raw-text {
-  display: none;
+  display: none; /* raw-text only works in x-text */
   white-space-collapse: preserve-breaks;
 }
 x-text > raw-text,
@@ -239,3 +235,8 @@ x-text > lynx-wrapper > raw-text,
 inline-text > lynx-wrapper > raw-text {
   display: contents !important;
 }
+
+raw-text:not(:defined)::before {
+  content: attr(text);
+  display: contents;
+}

package/src/XTextarea/x-textarea.css

@@ -4,10 +4,6 @@
 // LICENSE file in the root directory of this source tree.
 */
 x-textarea {
-  display: none;
-}
-
-x-textarea:defined {
   display: contents;
 }
 

package/src/XViewpagerNg/x-viewpager-ng.css

@@ -7,9 +7,9 @@ x-viewpager-ng, x-viewpager-item-ng {
   display: none;
 }
 
-x-viewpager-ng:defined,
-x-viewpager-ng > x-viewpager-item-ng:defined,
-x-viewpager-ng > lynx-wrapper > x-viewpager-item-ng:defined {
+x-viewpager-ng,
+x-viewpager-ng > x-viewpager-item-ng,
+x-viewpager-ng > lynx-wrapper > x-viewpager-item-ng {
   display: flex;
 }
 

package/src/common-css/linear.css

@@ -146,7 +146,8 @@ x-refresh-header,
 x-refresh-view,
 x-swiper-item,
 x-viewpager-item-ng,
-x-viewpager-ng {
+x-viewpager-ng,
+list-item {
   /*
   --lynx-display-toggle is compile-time generated.
   */
@@ -195,7 +196,8 @@ x-refresh-header,
 x-refresh-view,
 x-swiper-item,
 x-viewpager-item-ng,
-x-viewpager-ng {
+x-viewpager-ng,
+list-item {
   flex-wrap: var(--lynx-display-linear, nowrap)
     var(
       --lynx-display-flex,