@lynx-js/web-elements 0.8.7 → 0.8.9

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @lynx-js/web-elements
 
+## 0.8.9
+
+### Patch Changes
+
+- fix: layoutchange event result `detail.top` and `detail.left` was `0` incorrectly ([#1887](https://github.com/lynx-family/lynx-stack/pull/1887))
+
+- textarea placeholder inherits font-size by default ([#1874](https://github.com/lynx-family/lynx-stack/pull/1874))
+
+- feat: support <x-text text="content"></x-text> ([#1881](https://github.com/lynx-family/lynx-stack/pull/1881))
+
+- Updated dependencies []:
+  - @lynx-js/web-elements-template@0.8.9
+
+## 0.8.8
+
+### Patch Changes
+
+- fix: ([#1837](https://github.com/lynx-family/lynx-stack/pull/1837))
+
+  1. `LynxView.updateData()` cannot trigger `dataProcessor`.
+
+  2. **This is a break change:** The second parameter of `LynxView.updateData()` has been changed from `UpdateDataType` to `string`, which is the `processorName` (default is `default` which will use `defaultDataProcessor`). This change is to better align with Native. The current complete type is as follows:
+
+  ```ts
+  LynxView.updateData(data: Cloneable, processorName?: string | undefined, callback?: (() => void) | undefined): void
+  ```
+
+- Updated dependencies []:
+  - @lynx-js/web-elements-template@0.8.8
+
 ## 0.8.7
 
 ### Patch Changes

package/dist/XSwiper/XSwiperCircular.js

@@ -46,13 +46,13 @@ let XSwiperCircular = (() => {
         #getCircularFirstSlot = genDomGetter(() => this.#dom.shadowRoot, '#circular-start').bind(this);
         #getCircularLastSlot = genDomGetter(() => this.#dom.shadowRoot, '#circular-end').bind(this);
         #changeEventHandler(eventLikeObject) {
-            const numberOfChlidren = this.#dom.childElementCount;
-            if (numberOfChlidren > 2) {
+            const numberOfChildren = this.#dom.childElementCount;
+            if (numberOfChildren > 2) {
                 const { current, isDragged, __isFirstLayout } = eventLikeObject.detail;
                 if (current === 0
-                    || current === numberOfChlidren - 1
+                    || current === numberOfChildren - 1
                     || current === 2
-                    || current === numberOfChlidren - 2) {
+                    || current === numberOfChildren - 2) {
                     /**
                      * for current = 0
                      * start:[lastElement]
@@ -77,7 +77,7 @@ let XSwiperCircular = (() => {
                         lastElement.setAttribute('slot', 'circular-start');
                         targetElement = firstElement;
                     }
-                    else if (current === numberOfChlidren - 1) {
+                    else if (current === numberOfChildren - 1) {
                         elementsAtStart.forEach((e) => e.removeAttribute('slot'));
                         firstElement.setAttribute('slot', 'circular-end');
                         targetElement = lastElement;

package/dist/XText/XText.js

@@ -7,10 +7,11 @@ import { __esDecorate, __runInitializers } from "tslib";
 import { Component } from '@lynx-js/web-elements-reactive';
 import { XTextTruncation } from './XTextTruncation.js';
 import { ScrollIntoView } from '../ScrollView/ScrollIntoView.js';
+import { RawTextAttributes } from './RawText.js';
 import { CommonEventsAndMethods, layoutChangeTarget, } from '../common/CommonEventsAndMethods.js';
 import { templateXText } from '@lynx-js/web-elements-template';
 let XText = (() => {
-    let _classDecorators = [Component('x-text', [CommonEventsAndMethods, XTextTruncation], templateXText)];
+    let _classDecorators = [Component('x-text', [CommonEventsAndMethods, XTextTruncation, RawTextAttributes], templateXText)];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;

package/dist/common/CommonEventsAndMethods.js

@@ -29,9 +29,10 @@ let CommonEventsAndMethods = (() => {
                 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;
+                            // Reuse getBoundingClientRect to get left and top, because ResizeObserver-contentRect is calculated based on padding box
+                            const { top, bottom, left, right, width, height } = entry.target
+                                .getBoundingClientRect();
                             this.#dom.dispatchEvent(new CustomEvent('layoutchange', {
                                 detail: {
                                     width,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-elements",
-  "version": "0.8.7",
+  "version": "0.8.9",
   "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.7"
+    "@lynx-js/web-elements-template": "0.8.9"
   },
   "devDependencies": {
     "tslib": "^2.8.1"

package/src/XInput/x-input.css

@@ -5,6 +5,7 @@
 */
 x-input {
   display: contents;
+  font-size: 14px;
 }
 
 x-input::part(form) {
@@ -32,13 +33,12 @@ x-input::part(input), x-input::part(form) {
 
 x-input::part(input) {
   --placeholder-color: grey;
-  --placeholder-font-size: 14px;
   --placeholder-font-weight: normal;
 }
 
 x-input::part(input)::placeholder {
   color: var(--placeholder-color);
   font-family: var(--placeholder-font-family);
-  font-size: var(--placeholder-font-size);
+  font-size: var(--placeholder-font-size, inherit);
   font-weight: var(--placeholder-font-weight);
 }

package/src/XText/x-text.css

@@ -240,7 +240,8 @@ inline-text > lynx-wrapper > raw-text {
   display: contents !important;
 }
 
-raw-text:not(:defined)::before {
+raw-text:not(:defined)::before,
+x-text:not(:has(x-text, raw-text)):not(:defined)::before {
   content: attr(text);
   display: contents;
 }

package/src/XTextarea/x-textarea.css

@@ -5,6 +5,7 @@
 */
 x-textarea {
   display: contents;
+  font-size: 14px;
 }
 
 x-textarea::part(form) {
@@ -32,7 +33,6 @@ x-textarea::part(textarea), x-textarea::part(form) {
 }
 x-textarea::part(textarea) {
   --placeholder-color: grey;
-  --placeholder-font-size: 14px;
   --placeholder-font-weight: normal;
   --placeholder-font-family: inherit;
   resize: none;
@@ -40,7 +40,7 @@ x-textarea::part(textarea) {
 
 x-textarea::part(textarea)::placeholder {
   color: var(--placeholder-color);
-  font-size: var(--placeholder-font-size);
+  font-size: var(--placeholder-font-size, inherit);
   font-weight: var(--placeholder-font-weight);
   font-family: var(--placeholder-font-family);
 }