@lynx-js/web-elements-canary 0.5.2 → 0.5.3-canary-20250331-b8bb3d49

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @lynx-js/web-elements
 
+## 0.5.3-canary-20250331103529-b8bb3d499969b630b745b82953d1f1739d4b1edf
+
+### Patch Changes
+
+- feat: add `layoutchange` event support for x-view and x-text ([#408](https://github.com/lynx-family/lynx-stack/pull/408))
+
 ## 0.5.2
 
 ### Patch Changes
@@ -280,8 +286,8 @@
   For compating usage, `@lynx-js/web-elements-compat/LinearContainer` is provided.
 
   ```javascript
-  import '@lynx-js/web-elements-compat/LinearContainer';
-  import '@lynx-js/web-elements/all';
+  import "@lynx-js/web-elements-compat/LinearContainer";
+  import "@lynx-js/web-elements/all";
   ```
 
 - f8d1d98: break: rename the `blur` and `focus` event to `lynxblur` and `lynxfocus` for x-input element
@@ -303,11 +309,11 @@
   There is also a simple way to use this feature
 
   ```javascript
-  import { LynxCard } from '@lynx-js/web-core';
-  import { loadElement } from '@lynx-js/web-elements/lazy';
-  import '@lynx-js/web-elements/index.css';
-  import '@lynx-js/web-core/index.css';
-  import './index.css';
+  import { LynxCard } from "@lynx-js/web-core";
+  import { loadElement } from "@lynx-js/web-elements/lazy";
+  import "@lynx-js/web-elements/index.css";
+  import "@lynx-js/web-core/index.css";
+  import "./index.css";
 
   const lynxcard = new LynxCard({
     ...beforeConfigs,

package/dist/XText/XText.js

@@ -8,8 +8,9 @@ import { Component, html } from '@lynx-js/web-elements-reactive';
 import { LynxExposure } from '../common/Exposure.js';
 import { XTextTruncation } from './XTextTruncation.js';
 import { ScrollIntoView } from '../ScrollView/ScrollIntoView.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 let XText = (() => {
-    let _classDecorators = [Component('x-text', [LynxExposure, XTextTruncation], html `<div id="inner-box" part="inner-box"><slot></slot><slot name="inline-truncation"></slot></div>`)];
+    let _classDecorators = [Component('x-text', [LynxExposure, CommonEventsAndMethods, XTextTruncation], html `<div id="inner-box" part="inner-box"><slot></slot><slot name="inline-truncation"></slot></div>`)];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;

package/dist/XView/XView.js

@@ -7,8 +7,9 @@ import { __esDecorate, __runInitializers } from "tslib";
 import { Component } from '@lynx-js/web-elements-reactive';
 import { ScrollIntoView } from '../ScrollView/ScrollIntoView.js';
 import { LynxExposure } from '../common/Exposure.js';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 let XView = (() => {
-    let _classDecorators = [Component('x-view', [LynxExposure])];
+    let _classDecorators = [Component('x-view', [LynxExposure, CommonEventsAndMethods])];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;

package/dist/common/CommonEventsAndMethods.d.ts

@@ -0,0 +1,6 @@
+export declare class CommonEventsAndMethods {
+    #private;
+    static readonly observedAttributes: never[];
+    constructor(currentElement: HTMLElement);
+    __handleScrollUpperThresholdEventEnabled: (enabled: boolean) => void;
+}

package/dist/common/CommonEventsAndMethods.js

@@ -0,0 +1,61 @@
+// 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 { __esDecorate, __runInitializers } from "tslib";
+import { commonComponentEventSetting } from './commonEventInitConfiguration.js';
+import { registerEventEnableStatusChangeHandler } from '@lynx-js/web-elements-reactive';
+let CommonEventsAndMethods = (() => {
+    let ___handleScrollUpperThresholdEventEnabled_decorators;
+    let ___handleScrollUpperThresholdEventEnabled_initializers = [];
+    let ___handleScrollUpperThresholdEventEnabled_extraInitializers = [];
+    return class CommonEventsAndMethods {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            ___handleScrollUpperThresholdEventEnabled_decorators = [registerEventEnableStatusChangeHandler('layoutchange')];
+            __esDecorate(null, null, ___handleScrollUpperThresholdEventEnabled_decorators, { kind: "field", name: "__handleScrollUpperThresholdEventEnabled", static: false, private: false, access: { has: obj => "__handleScrollUpperThresholdEventEnabled" in obj, get: obj => obj.__handleScrollUpperThresholdEventEnabled, set: (obj, value) => { obj.__handleScrollUpperThresholdEventEnabled = value; } }, metadata: _metadata }, ___handleScrollUpperThresholdEventEnabled_initializers, ___handleScrollUpperThresholdEventEnabled_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static observedAttributes = [];
+        #dom;
+        #observing = false;
+        #resizeObserver;
+        constructor(currentElement) {
+            __runInitializers(this, ___handleScrollUpperThresholdEventEnabled_extraInitializers);
+            this.#dom = currentElement;
+        }
+        __handleScrollUpperThresholdEventEnabled = __runInitializers(this, ___handleScrollUpperThresholdEventEnabled_initializers, (enabled) => {
+            if (enabled) {
+                if (!this.#resizeObserver) {
+                    this.#resizeObserver = new ResizeObserver(([entry]) => {
+                        if (entry) {
+                            // The layoutchange event is the border box of the element
+                            const { width, height, left, right, top, bottom } = entry.contentRect;
+                            const id = this.#dom.id;
+                            this.#dom.dispatchEvent(new CustomEvent('layoutchange', {
+                                detail: {
+                                    width,
+                                    height,
+                                    left,
+                                    right,
+                                    top,
+                                    bottom,
+                                    id,
+                                },
+                                ...commonComponentEventSetting,
+                            }));
+                        }
+                    });
+                    if (!this.#observing) {
+                        this.#resizeObserver.observe(this.#dom);
+                        this.#observing = true;
+                    }
+                }
+            }
+            else {
+                this.#resizeObserver?.disconnect();
+            }
+        });
+    };
+})();
+export { CommonEventsAndMethods };
+//# sourceMappingURL=CommonEventsAndMethods.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-elements-canary",
-  "version": "0.5.2",
+  "version": "0.5.3-canary-20250331-b8bb3d49",
   "private": false,
   "repository": {
     "type": "git",