@lynx-js/web-elements 0.6.0 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @lynx-js/web-elements
 
+## 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/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.0",
   "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/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));
 }