@lynx-js/web-elements 0.8.0 → 0.8.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @lynx-js/web-elements
 
+## 0.8.1
+
+### Patch Changes
+
+- fix: indicator dots' bg-color on safari 26 ([#1298](https://github.com/lynx-family/lynx-stack/pull/1298))
+
+  https://bugs.webkit.org/show_bug.cgi?id=296048
+  The animation name should be defined in the template
+
+- fix: list may only render only one column in ReactLynx. ([#1280](https://github.com/lynx-family/lynx-stack/pull/1280))
+
+  This is because `span-count` may not be specified when `list-type` is specified, resulting in layout according to `span-count="1"`. Postponing the acquisition of `span-count` until layoutListItem can solve this problem.
+
+- Updated dependencies [[`443f3d5`](https://github.com/lynx-family/lynx-stack/commit/443f3d57fc9ac41c3e845bdba5adfa4df16e5519)]:
+  - @lynx-js/web-elements-template@0.8.1
+
 ## 0.8.0
 
 ### Minor Changes

package/dist/XList/XListWaterfall.js

@@ -17,20 +17,15 @@ let XListWaterfall = (() => {
             _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');
+                            this.#resizeObserverInit();
                         }
                         if (!this.#childrenObserver) {
                             this.#childrenObserver = new MutationObserver((mutationList) => {
                                 const mutation = mutationList?.[0];
                                 if (mutation?.type === 'childList') {
-                                    this.#resizeObserverInit(spanCount, scrollOrientation === 'vertical');
+                                    this.#resizeObserverInit();
                                 }
                             });
                             this.#childrenObserver.observe(this.#dom, {
@@ -65,7 +60,12 @@ let XListWaterfall = (() => {
             this.#dom.shadowRoot?.querySelector('[part=upper-threshold-observer]')
                 ?.insertAdjacentElement('afterend', waterfallSlot);
         };
-        #layoutListItem = (spanCount, isScrollVertical) => {
+        #layoutListItem = () => {
+            const spanCount = parseFloat(this.#dom.getAttribute('span-count')
+                || this.#dom.getAttribute('column-count')
+                || '') || 1;
+            const isScrollVertical = (this.#dom.getAttribute('scroll-orientation')
+                || 'vertical') === 'vertical';
             const measurements = new Array(spanCount).fill(0);
             for (let i = 0; i < this.#dom.children.length; i++) {
                 const listItem = this.#dom.children[i];
@@ -149,13 +149,13 @@ let XListWaterfall = (() => {
         constructor(dom) {
             this.#dom = dom;
         }
-        #resizeObserverInit = (spanCount, isScrollVertical) => {
+        #resizeObserverInit = () => {
             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);
+                    this.#layoutListItem();
                 });
             });
             Array.from(this.#dom.children).forEach(element => {

package/package.json

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

package/src/XSwiper/x-swiper.css

@@ -171,8 +171,6 @@ x-swiper::part(indicator-item) {
   flex: 0 0 var(--indicator-size);
   margin: 0 calc(var(--indicator-size) / 5) 0 calc(var(--indicator-size) / 5);
   border-radius: 100%;
-  animation-name: indicator-dot;
-  animation-duration: 100ms;
 }
 
 x-swiper[vertical]::part(indicator-item) {