@lynx-js/web-elements 0.8.0 → 0.8.2

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @lynx-js/web-elements
 
+## 0.8.2
+
+### Patch Changes
+
+- Add crossorigin attribute support to x-image component ([#1340](https://github.com/lynx-family/lynx-stack/pull/1340))
+
+  - Added `crossorigin` to the `observedAttributes` array in `ImageSrc.ts`
+  - Implemented `#handleCrossorigin` handler using the `bindToAttribute` helper to forward the crossorigin attribute from the custom element to the internal `<img>` element
+  - Added comprehensive test coverage to verify the attribute is properly passed through to the shadow DOM
+
+  This enables CORS-enabled image loading when using `<x-image crossorigin="anonymous">` or similar configurations.
+
+- Updated dependencies []:
+  - @lynx-js/web-elements-template@0.8.2
+
+## 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/XImage/ImageSrc.js

@@ -15,12 +15,16 @@ let ImageSrc = (() => {
     let _private_handleBlurRadius_decorators;
     let _private_handleBlurRadius_initializers = [];
     let _private_handleBlurRadius_extraInitializers = [];
+    let _private_handleCrossorigin_decorators;
+    let _private_handleCrossorigin_initializers = [];
+    let _private_handleCrossorigin_extraInitializers = [];
     return class ImageSrc {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
             _private_handleSrc_decorators = [registerAttributeHandler('src', true)];
             _private_preloadPlaceholder_decorators = [registerAttributeHandler('placeholder', true)];
             _private_handleBlurRadius_decorators = [registerAttributeHandler('blur-radius', true)];
+            _private_handleCrossorigin_decorators = [registerAttributeHandler('crossorigin', true)];
             __esDecorate(this, _private_preloadPlaceholder_descriptor = { value: __setFunctionName(function (newVal) {
                     if (newVal) {
                         new Image().src = newVal;
@@ -28,9 +32,15 @@ let ImageSrc = (() => {
                 }, "#preloadPlaceholder") }, _private_preloadPlaceholder_decorators, { kind: "method", name: "#preloadPlaceholder", static: false, private: true, access: { has: obj => #preloadPlaceholder in obj, get: obj => obj.#preloadPlaceholder }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(null, null, _private_handleSrc_decorators, { kind: "field", name: "#handleSrc", static: false, private: true, access: { has: obj => #handleSrc in obj, get: obj => obj.#handleSrc, set: (obj, value) => { obj.#handleSrc = value; } }, metadata: _metadata }, _private_handleSrc_initializers, _private_handleSrc_extraInitializers);
             __esDecorate(null, null, _private_handleBlurRadius_decorators, { kind: "field", name: "#handleBlurRadius", static: false, private: true, access: { has: obj => #handleBlurRadius in obj, get: obj => obj.#handleBlurRadius, set: (obj, value) => { obj.#handleBlurRadius = value; } }, metadata: _metadata }, _private_handleBlurRadius_initializers, _private_handleBlurRadius_extraInitializers);
+            __esDecorate(null, null, _private_handleCrossorigin_decorators, { kind: "field", name: "#handleCrossorigin", static: false, private: true, access: { has: obj => #handleCrossorigin in obj, get: obj => obj.#handleCrossorigin, set: (obj, value) => { obj.#handleCrossorigin = value; } }, metadata: _metadata }, _private_handleCrossorigin_initializers, _private_handleCrossorigin_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
-        static observedAttributes = ['src', 'placeholder', 'blur-radius'];
+        static observedAttributes = [
+            'src',
+            'placeholder',
+            'blur-radius',
+            'crossorigin',
+        ];
         #dom = __runInitializers(this, _instanceExtraInitializers);
         #getImg = genDomGetter(() => this.#dom.shadowRoot, '#img');
         #handleSrc = __runInitializers(this, _private_handleSrc_initializers, bindToAttribute(this.#getImg, 'src', (newval) => {
@@ -38,7 +48,8 @@ let ImageSrc = (() => {
         }));
         get #preloadPlaceholder() { return _private_preloadPlaceholder_descriptor.value; }
         #handleBlurRadius = (__runInitializers(this, _private_handleSrc_extraInitializers), __runInitializers(this, _private_handleBlurRadius_initializers, bindToStyle(this.#getImg, '--blur-radius', undefined, true)));
-        #onImageError = (__runInitializers(this, _private_handleBlurRadius_extraInitializers), () => {
+        #handleCrossorigin = (__runInitializers(this, _private_handleBlurRadius_extraInitializers), __runInitializers(this, _private_handleCrossorigin_initializers, bindToAttribute(this.#getImg, 'crossorigin')));
+        #onImageError = (__runInitializers(this, _private_handleCrossorigin_extraInitializers), () => {
             const currentSrc = this.#getImg().src;
             const placeholder = this.#dom.getAttribute('placeholder');
             if (placeholder && currentSrc !== placeholder) {

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.2",
   "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.2"
   },
   "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) {