@lynx-js/web-elements 0.6.0 → 0.7.1

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @lynx-js/web-elements
 
+## 0.7.1
+
+### Patch Changes
+
+- fix(web): x-swiper-item threshold updated to 20 ([#639](https://github.com/lynx-family/lynx-stack/pull/639))
+
+- fix: In React19, setter and getter functions are treated as properties, making it impossible to retrieve the current value via attributes. ([#639](https://github.com/lynx-family/lynx-stack/pull/639))
+
+## 0.7.0
+
+### Minor Changes
+
+- fix: ([#629](https://github.com/lynx-family/lynx-stack/pull/629))
+
+  - typo of `initial-scroll-offset` in scroll-view.
+  - scroll-view's `initial-scroll-index` is changed to `initial-scroll-to-index`.
+
+### Patch Changes
+
+- fix: x-image border-radius setting has no effect. ([#638](https://github.com/lynx-family/lynx-stack/pull/638))
+
+- perf: late evaluate document.font.ready ([#604](https://github.com/lynx-family/lynx-stack/pull/604))
+
+- perf: improve raw-text performance ([#601](https://github.com/lynx-family/lynx-stack/pull/601))
+
+- fix: the scroll-x field of scroll-view needs to be handled correctly. ([#635](https://github.com/lynx-family/lynx-stack/pull/635))
+
+  Before this, scroll-x of '' would result in no scrolling along x-axis.
+
+- feat: x-list supports `need-visible-item-info`, now you can get visible cells info in `scroll`、`scrolltoupper`、`scrolltolower` event. ([#595](https://github.com/lynx-family/lynx-stack/pull/595))
+
 ## 0.6.0
 
 ### Minor Changes

package/dist/ScrollView/ScrollAttributes.js

@@ -14,8 +14,8 @@ let ScrollAttributes = (() => {
     return class ScrollAttributes {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
-            _private_handleInitialScrollOffset_decorators = [registerAttributeHandler('scroll-top', false), registerAttributeHandler('scroll-left', false), registerAttributeHandler('nitial-scroll-offset', false)];
-            _private_handleInitialScrollIndex_decorators = [registerAttributeHandler('scroll-to-index', false), registerAttributeHandler('initial-scroll-index', false)];
+            _private_handleInitialScrollOffset_decorators = [registerAttributeHandler('scroll-top', false), registerAttributeHandler('scroll-left', false), registerAttributeHandler('initial-scroll-offset', false)];
+            _private_handleInitialScrollIndex_decorators = [registerAttributeHandler('scroll-to-index', false), registerAttributeHandler('initial-scroll-to-index', false)];
             __esDecorate(this, _private_handleInitialScrollOffset_descriptor = { value: __setFunctionName(function (newVal, _, attributeName) {
                     if (newVal) {
                         const scrollValue = parseFloat(newVal);
@@ -49,7 +49,7 @@ let ScrollAttributes = (() => {
                         const scrollValue = parseFloat(newVal);
                         const childrenElement = this.#dom.children.item(scrollValue);
                         if (childrenElement && childrenElement instanceof HTMLElement) {
-                            const scrollX = !!this.#dom.getAttribute('scroll-x');
+                            const scrollX = this.#dom.getAttribute('scroll-x') !== null;
                             requestAnimationFrame(() => {
                                 if (scrollX) {
                                     this.#dom.scrollLeft = childrenElement.offsetLeft;
@@ -69,7 +69,7 @@ let ScrollAttributes = (() => {
             'scroll-left',
             'initial-scroll-offset',
             'scroll-to-index',
-            'initial-scroll-index',
+            'initial-scroll-to-index',
         ];
         constructor(dom) {
             this.#dom = dom;

package/dist/XList/XListEvents.js

@@ -101,6 +101,7 @@ let XListEvents = (() => {
         #getUpperThresholdObserverDom = genDomGetter(() => this.#dom.shadowRoot, '#upper-threshold-observer');
         #getLowerThresholdObserverDom = genDomGetter(() => this.#dom.shadowRoot, '#lower-threshold-observer');
         #getScrollDetail() {
+            const needVisibleItemInfo = this.#dom.getAttribute('need-visible-item-info') !== null;
             const { scrollTop, scrollLeft, scrollHeight, scrollWidth } = this
                 .#getListContainer();
             const detail = {
@@ -110,6 +111,9 @@ let XListEvents = (() => {
                 scrollWidth,
                 deltaX: scrollLeft - this.#prevX,
                 deltaY: scrollTop - this.#prevY,
+                attachedCells: needVisibleItemInfo
+                    ? this.#dom.getVisibleCells()
+                    : undefined,
             };
             this.#prevX = scrollLeft;
             this.#prevY = scrollTop;
@@ -276,9 +280,7 @@ let XListEvents = (() => {
             }
             this.#dom.dispatchEvent(new CustomEvent('lynxscroll', {
                 ...commonComponentEventSetting,
-                detail: {
-                    type: 'scroll',
-                },
+                detail: this.#getScrollDetail(),
             }));
         };
         #handleScrollEventsSwitches = __runInitializers(this, _private_handleScrollEventsSwitches_initializers, (enabled, name) => {

package/dist/XSwiper/XSwiper.d.ts

@@ -2,8 +2,8 @@ import { scrollContainerDom } from '../common/constants.js';
 export declare class XSwiper extends HTMLElement {
     #private;
     static notToFilterFalseAttributes: Set<string>;
-    get current(): number;
-    set current(newval: number);
+    get currentIndex(): number;
+    set currentIndex(newval: number);
     get snapDistance(): number;
     get isVertical(): boolean;
     get circularPlay(): boolean;

package/dist/XSwiper/XSwiper.js

@@ -136,12 +136,12 @@ let XSwiper = (() => {
                 minOffsetToMid,
             };
         }
-        get current() {
+        get currentIndex() {
             return this.#getNeatestElementIndexAndDistanceToMid().current;
         }
-        set current(newval) {
+        set currentIndex(newval) {
             // When current is specified and current is updated in bindchange, there is no need to respond to the update of current
-            if (this.current === newval) {
+            if (this.currentIndex === newval) {
                 return;
             }
             const smooth = this.getAttribute('smooth-scroll') === null; // smooth-scroll default true, it is set to be false
@@ -186,29 +186,29 @@ let XSwiper = (() => {
             return this.getAttribute('circular') !== null;
         }
         scrollToNext() {
-            const current = this.current;
+            const current = this.currentIndex;
             const count = this.childElementCount;
             if (current === count - 1) {
                 const circularPlay = this.circularPlay;
                 if (circularPlay) {
-                    this.current = 0;
+                    this.currentIndex = 0;
                 }
             }
             else {
-                this.current += 1;
+                this.currentIndex += 1;
             }
         }
         scrollToPrevious() {
-            const current = this.current;
+            const current = this.currentIndex;
             const count = this.childElementCount;
             if (current === 0) {
                 const circularPlay = this.circularPlay;
                 if (circularPlay) {
-                    this.current = count - 1;
+                    this.currentIndex = count - 1;
                 }
             }
             else {
-                this.current == count - 1;
+                this.currentIndex = count - 1;
             }
         }
         connectedCallback() {

package/dist/XSwiper/XSwiperAutoScroll.js

@@ -19,7 +19,7 @@ let XSwiperAutoScroll = (() => {
             __esDecorate(this, _private_handleCurrentChange_descriptor = { value: __setFunctionName(function (newVal) {
                     const newval = Number(newVal);
                     if (!Number.isNaN(newval)) {
-                        this.#dom.current = newval;
+                        this.#dom.currentIndex = newval;
                     }
                 }, "#handleCurrentChange") }, _private_handleCurrentChange_decorators, { kind: "method", name: "#handleCurrentChange", static: false, private: true, access: { has: obj => #handleCurrentChange in obj, get: obj => obj.#handleCurrentChange }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, _private_handleAutoplay_descriptor = { value: __setFunctionName(function () {

package/dist/XSwiper/XSwiperCircular.js

@@ -21,7 +21,7 @@ let XSwiperCircular = (() => {
                     if (newVal !== null) {
                         this.#changeEventHandler({
                             detail: {
-                                current: this.#dom.current,
+                                current: this.#dom.currentIndex,
                                 isDragged: false,
                                 __isFirstLayout: true,
                             },

package/dist/XSwiper/XSwiperEvents.js

@@ -77,7 +77,7 @@ let XSwipeEvents = (() => {
                 > pageLength / 4
                 || currentScrollDistance < 10
                 || Math.abs(currentScrollDistance - totalScrollDistance) <= pageLength) {
-                const current = this.#dom.current;
+                const current = this.#dom.currentIndex;
                 if (current !== this.#current) {
                     this.#dom.dispatchEvent(new CustomEvent('change', {
                         ...commonComponentEventSetting,

package/dist/XSwiper/XSwiperIndicator.js

@@ -103,7 +103,7 @@ let XSwiperIndicator = (() => {
                     }
                 }).bind(this));
                 boostedQueueMicrotask(() => {
-                    this.#getIndicatorContainer().children[this.#dom.current]?.style.setProperty('background-color', 'var(--indicator-active-color)', 'important');
+                    this.#getIndicatorContainer().children[this.#dom.currentIndex]?.style.setProperty('background-color', 'var(--indicator-active-color)', 'important');
                 });
             }
         }

package/dist/XText/RawText.js

@@ -14,17 +14,17 @@ let RawTextAttributes = (() => {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
             _private_handleText_decorators = [registerAttributeHandler('text', true)];
             __esDecorate(this, _private_handleText_descriptor = { value: __setFunctionName(function (newVal) {
+                    this.#text?.remove();
                     if (newVal) {
-                        this.#dom.innerHTML = newVal;
-                    }
-                    else {
-                        this.#dom.innerHTML = '';
+                        this.#text = new Text(newVal);
+                        this.#dom.append(this.#text);
                     }
                 }, "#handleText") }, _private_handleText_decorators, { kind: "method", name: "#handleText", static: false, private: true, access: { has: obj => #handleText in obj, get: obj => obj.#handleText }, metadata: _metadata }, null, _instanceExtraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         static observedAttributes = ['text'];
         #dom = __runInitializers(this, _instanceExtraInitializers);
+        #text;
         constructor(currentElement) {
             this.#dom = currentElement;
         }

package/dist/XText/XTextTruncation.js

@@ -127,20 +127,19 @@ let XTextTruncation = (() => {
             if (this.#scheduledTextLayout)
                 return;
             this.#scheduledTextLayout = true;
-            boostedQueueMicrotask(() => {
-                this.#layoutTextInner();
+            boostedQueueMicrotask(async () => {
+                await this.#layoutTextInner();
                 this.#startObservers();
-                queueMicrotask(() => {
-                    this.#scheduledTextLayout = false;
-                });
+                this.#scheduledTextLayout = false;
             });
         }
-        #layoutTextInner() {
+        async #layoutTextInner() {
             this.#inplaceEllipsisNode?.parentElement?.removeChild(this.#inplaceEllipsisNode);
             this.#revertTruncatedTextNodes();
             if (!this.#doExpensiveLineLayoutCalculation && isNaN(this.#maxLength)) {
                 return;
             }
+            await document.fonts.ready;
             const parentBondingRect = this.#getInnerBox().getBoundingClientRect();
             this.#textMeasure = new TextRenderingMeasureTool(this.#dom, parentBondingRect);
             const measure = this.#textMeasure;
@@ -338,9 +337,7 @@ let XTextTruncation = (() => {
         connectedCallback() {
             this.#componentConnected = true;
             this.#handleEnableLayoutEvent(this.#enableLayoutEvent);
-            document.fonts.ready.then(() => {
-                this.#handleAttributeChange();
-            });
+            this.#handleAttributeChange();
             boostedQueueMicrotask(() => {
                 this.#sendLayoutEvent();
             });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-elements",
-  "version": "0.6.0",
+  "version": "0.7.1",
   "private": false,
   "repository": {
     "type": "git",

package/src/XImage/x-image.css

@@ -68,6 +68,7 @@ x-image[auto-size]::part(img) {
   min-width: inherit;
   min-height: inherit;
   border: inherit;
+  border-radius: inherit;
   max-width: 100%;
   max-height: 100%;
   position: inherit;

package/src/XSwiper/x-swiper.css

@@ -74,7 +74,7 @@ x-swiper-item {
   flex-basis: var(--lynx-linear-weight-basis) !important;
 }
 
-x-swiper-item:nth-child(n+5) {
+x-swiper-item:nth-child(n+20) {
   contain: strict;
   content-visibility: auto;
 }

package/src/common-css/linear.css

@@ -196,14 +196,16 @@ x-refresh-view,
 x-swiper-item,
 x-viewpager-item-ng,
 x-viewpager-ng {
-  flex-wrap: var(--lynx-display-linear, nowrap) var(
-    --lynx-display-flex,
-    var(--flex-wrap)
-  );
-  flex-direction: var(--lynx-display-linear, var(--linear-flex-direction)) var(
-    --lynx-display-flex,
-    var(--flex-direction)
-  );
+  flex-wrap: var(--lynx-display-linear, nowrap)
+    var(
+      --lynx-display-flex,
+      var(--flex-wrap)
+    );
+  flex-direction: var(--lynx-display-linear, var(--linear-flex-direction))
+    var(
+      --lynx-display-flex,
+      var(--flex-direction)
+    );
   justify-content: var(--lynx-display-linear, var(--linear-justify-content));
 }