@lynx-js/web-elements 0.7.5 → 0.7.7

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @lynx-js/web-elements
 
+## 0.7.7
+
+### Patch Changes
+
+- fix: the param `index` of list scrollToPosition function should be `position`. ([#1135](https://github.com/lynx-family/lynx-stack/pull/1135))
+
+- fix: in lynx-view all-on-ui mode, the input event of input and textarea is triggered twice, and the first e.detail is a string, which does not conform to the expected data format. ([#1179](https://github.com/lynx-family/lynx-stack/pull/1179))
+
+- Updated dependencies []:
+  - @lynx-js/web-elements-template@0.7.7
+
+## 0.7.6
+
+### Patch Changes
+
+- fix: incorrect syntax for x-canvas part ([#1067](https://github.com/lynx-family/lynx-stack/pull/1067))
+
+- feat: x-input && x-textarea add attribute input-filter, which can filter input value. ([#1037](https://github.com/lynx-family/lynx-stack/pull/1037))
+
+- fix: incorrect top style of x-foldview-slot-ng if the toolbar is wrapped in lynx-wrapper ([#1101](https://github.com/lynx-family/lynx-stack/pull/1101))
+
+- perf: add loading="lazy" for image element ([#1056](https://github.com/lynx-family/lynx-stack/pull/1056))
+
+  https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#loading
+
+- fix: --lynx-color will be removed, and if color contains `gradient` it will be processed as transparent. ([#1069](https://github.com/lynx-family/lynx-stack/pull/1069))
+
+- Updated dependencies [[`62d1078`](https://github.com/lynx-family/lynx-stack/commit/62d1078e67f2aba216a0d97bf1ad9ece624e498e)]:
+  - @lynx-js/web-elements-template@0.7.6
+
 ## 0.7.5
 
 ### Patch Changes

package/dist/XFoldViewNg/XFoldviewHeaderNg.d.ts

@@ -1,4 +1,5 @@
 export declare class XFoldviewHeaderNg extends HTMLElement {
+    #private;
     connectedCallback(): void;
     dispose(): void;
 }

package/dist/XFoldViewNg/XFoldviewHeaderNg.js

@@ -7,6 +7,7 @@ import { __esDecorate, __runInitializers } from "tslib";
 import { Component } from '@lynx-js/web-elements-reactive';
 import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { resizeObserver } from './XFoldviewNg.js';
+import { getCombinedDirectParentElement } from '../common/getCombinedParentElement.js';
 let XFoldviewHeaderNg = (() => {
     let _classDecorators = [Component('x-foldview-header-ng', [
             CommonEventsAndMethods,
@@ -24,11 +25,14 @@ let XFoldviewHeaderNg = (() => {
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
             __runInitializers(_classThis, _classExtraInitializers);
         }
+        #parentResizeObserver = undefined;
         connectedCallback() {
-            this.parentElement?.[resizeObserver]?.observe(this);
+            const parentElement = getCombinedDirectParentElement(this, 'X-FOLDVIEW-NG');
+            this.#parentResizeObserver = parentElement?.[resizeObserver];
+            this.#parentResizeObserver?.observe(this);
         }
         dispose() {
-            this.parentElement?.[resizeObserver]?.unobserve(this);
+            this.#parentResizeObserver?.unobserve(this);
         }
     };
     return XFoldviewHeaderNg = _classThis;

package/dist/XFoldViewNg/XFoldviewToolbarNg.d.ts

@@ -1,4 +1,5 @@
 export declare class XFoldviewToolbarNg extends HTMLElement {
+    #private;
     connectedCallback(): void;
     dispose(): void;
 }

package/dist/XFoldViewNg/XFoldviewToolbarNg.js

@@ -7,6 +7,7 @@ import { __esDecorate, __runInitializers } from "tslib";
 import { Component } from '@lynx-js/web-elements-reactive';
 import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
 import { resizeObserver } from './XFoldviewNg.js';
+import { getCombinedDirectParentElement } from '../common/getCombinedParentElement.js';
 let XFoldviewToolbarNg = (() => {
     let _classDecorators = [Component('x-foldview-toolbar-ng', [
             CommonEventsAndMethods,
@@ -24,11 +25,14 @@ let XFoldviewToolbarNg = (() => {
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
             __runInitializers(_classThis, _classExtraInitializers);
         }
+        #parentResizeObserver = undefined;
         connectedCallback() {
-            this.parentElement?.[resizeObserver]?.observe(this);
+            const parentElement = getCombinedDirectParentElement(this, 'X-FOLDVIEW-NG');
+            this.#parentResizeObserver = parentElement?.[resizeObserver];
+            this.#parentResizeObserver?.observe(this);
         }
         dispose() {
-            this.parentElement?.[resizeObserver]?.unobserve(this);
+            this.#parentResizeObserver?.unobserve(this);
         }
     };
     return XFoldviewToolbarNg = _classThis;

package/dist/XInput/XInputEvents.js

@@ -19,7 +19,7 @@ let XInputEvents = (() => {
     return class XInputEvents {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
-            _private_handleEnableInputEvent_decorators = [registerEventEnableStatusChangeHandler('input')];
+            _private_handleEnableInputEvent_decorators = [registerAttributeHandler('input-filter', true), registerEventEnableStatusChangeHandler('lynxinput')];
             _private_handleSendComposingInput_decorators = [registerAttributeHandler('send-composing-input', true)];
             _private_handleEnableSelectionEvent_decorators = [registerEventEnableStatusChangeHandler('selection')];
             __esDecorate(this, _private_handleEnableInputEvent_descriptor = { value: __setFunctionName(function (status) {
@@ -48,7 +48,7 @@ let XInputEvents = (() => {
                 }, "#handleEnableSelectionEvent") }, _private_handleEnableSelectionEvent_decorators, { kind: "method", name: "#handleEnableSelectionEvent", static: false, private: true, access: { has: obj => #handleEnableSelectionEvent in obj, get: obj => obj.#handleEnableSelectionEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
-        static observedAttributes = ['send-composing-input'];
+        static observedAttributes = ['send-composing-input', 'input-filter'];
         #dom = __runInitializers(this, _instanceExtraInitializers);
         #sendComposingInput = false;
         #getInputElement = genDomGetter(() => this.#dom.shadowRoot, '#input');
@@ -66,16 +66,20 @@ let XInputEvents = (() => {
         };
         #teleportInput = (event) => {
             const input = this.#getInputElement();
-            const value = input.value;
+            const inputFilter = this.#dom.getAttribute('input-filter');
+            const filterValue = inputFilter
+                ? input.value.replace(new RegExp(inputFilter, 'g'), '')
+                : input.value;
             const isComposing = event.isComposing;
+            input.value = filterValue;
             if (isComposing && !this.#sendComposingInput)
                 return;
-            this.#dom.dispatchEvent(new CustomEvent('input', {
+            this.#dom.dispatchEvent(new CustomEvent('lynxinput', {
                 ...commonComponentEventSetting,
                 detail: {
-                    value,
+                    value: filterValue,
                     /** @deprecated */
-                    textLength: value.length,
+                    textLength: filterValue.length,
                     /** @deprecated */
                     cursor: input.selectionStart,
                     isComposing,
@@ -86,15 +90,19 @@ let XInputEvents = (() => {
         };
         #teleportCompositionendInput = () => {
             const input = this.#getInputElement();
-            const value = input.value;
+            const inputFilter = this.#dom.getAttribute('input-filter');
+            const filterValue = inputFilter
+                ? input.value.replace(new RegExp(inputFilter, 'g'), '')
+                : input.value;
+            input.value = filterValue;
             // if #sendComposingInput set true, #teleportInput will send detail
             if (!this.#sendComposingInput) {
-                this.#dom.dispatchEvent(new CustomEvent('input', {
+                this.#dom.dispatchEvent(new CustomEvent('lynxinput', {
                     ...commonComponentEventSetting,
                     detail: {
-                        value,
+                        value: filterValue,
                         /** @deprecated */
-                        textLength: value.length,
+                        textLength: filterValue.length,
                         /** @deprecated */
                         cursor: input.selectionStart,
                         isComposing: false,

package/dist/XList/XList.d.ts

@@ -8,7 +8,7 @@ export declare class XList extends HTMLElement {
     get __scrollTop(): number;
     get __scrollLeft(): number;
     scrollToPosition(params: {
-        index: number;
+        position: number;
         smooth?: boolean;
         /**
          * @description The offset of the content

package/dist/XList/XList.js

@@ -61,13 +61,13 @@ let XList = (() => {
             else if (typeof params.offset === 'number') {
                 offset = { left: params.offset, top: params.offset };
             }
-            if (typeof params.index === 'number') {
-                if (params.index === 0) {
+            if (typeof params.position === 'number') {
+                if (params.position === 0) {
                     this.#getListContainer().scrollTop = 0;
                     this.#getListContainer().scrollLeft = 0;
                 }
-                else if (params.index > 0 && params.index < this.childElementCount) {
-                    const targetKid = this.children.item(params.index);
+                else if (params.position > 0 && params.position < this.childElementCount) {
+                    const targetKid = this.children.item(params.position);
                     if (targetKid instanceof HTMLElement) {
                         if (offset) {
                             offset = {

package/dist/XList/XListAttributes.js

@@ -37,7 +37,7 @@ let XListAttributes = (() => {
         connectedCallback() {
             const initialScrollIndex = this.#dom.getAttribute('initial-scroll-index');
             if (initialScrollIndex !== null) {
-                const index = parseFloat(initialScrollIndex);
+                const position = parseFloat(initialScrollIndex);
                 const scrollToInitialIndex = () => {
                     if (this.#dom.clientHeight === 0) {
                         // In Safari, there is the potential race condition between the browser's layout and clientWidth calculate.
@@ -45,7 +45,7 @@ let XListAttributes = (() => {
                         requestAnimationFrame(scrollToInitialIndex);
                     }
                     else {
-                        this.#dom.scrollToPosition({ index });
+                        this.#dom.scrollToPosition({ position });
                     }
                 };
                 // The reason for using microtasks is that the width and height of the child element may not be rendered at this time, so it will not be able to scroll.

package/dist/XTextarea/XTextareaEvents.js

@@ -19,7 +19,7 @@ let XTextareaEvents = (() => {
     return class XTextareaEvents {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
-            _private_handleEnableConfirmEvent_decorators = [registerEventEnableStatusChangeHandler('input')];
+            _private_handleEnableConfirmEvent_decorators = [registerAttributeHandler('input-filter', true), registerEventEnableStatusChangeHandler('lynxinput')];
             _private_handleSendComposingInput_decorators = [registerAttributeHandler('send-composing-input', true)];
             _private_handleEnableSelectionEvent_decorators = [registerEventEnableStatusChangeHandler('selection')];
             __esDecorate(this, _private_handleEnableConfirmEvent_descriptor = { value: __setFunctionName(function (status) {
@@ -48,7 +48,7 @@ let XTextareaEvents = (() => {
                 }, "#handleEnableSelectionEvent") }, _private_handleEnableSelectionEvent_decorators, { kind: "method", name: "#handleEnableSelectionEvent", static: false, private: true, access: { has: obj => #handleEnableSelectionEvent in obj, get: obj => obj.#handleEnableSelectionEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
-        static observedAttributes = ['send-composing-input'];
+        static observedAttributes = ['send-composing-input', 'input-filter'];
         #dom = __runInitializers(this, _instanceExtraInitializers);
         #sendComposingInput = false;
         #getTextareaElement = genDomGetter(() => this.#dom.shadowRoot, '#textarea');
@@ -66,16 +66,20 @@ let XTextareaEvents = (() => {
         };
         #teleportInput = (event) => {
             const input = this.#getTextareaElement();
-            const value = input.value;
+            const inputFilter = this.#dom.getAttribute('input-filter');
+            const filterValue = inputFilter
+                ? input.value.replace(new RegExp(inputFilter, 'g'), '')
+                : input.value;
             const isComposing = event.isComposing;
+            input.value = filterValue;
             if (isComposing && !this.#sendComposingInput)
                 return;
-            this.#dom.dispatchEvent(new CustomEvent('input', {
+            this.#dom.dispatchEvent(new CustomEvent('lynxinput', {
                 ...commonComponentEventSetting,
                 detail: {
-                    value,
+                    value: filterValue,
                     /** @deprecated */
-                    textLength: value.length,
+                    textLength: filterValue.length,
                     /** @deprecated */
                     cursor: input.selectionStart,
                     isComposing,
@@ -86,15 +90,19 @@ let XTextareaEvents = (() => {
         };
         #teleportCompositionendInput = () => {
             const input = this.#getTextareaElement();
-            const value = input.value;
+            const inputFilter = this.#dom.getAttribute('input-filter');
+            const filterValue = inputFilter
+                ? input.value.replace(new RegExp(inputFilter, 'g'), '')
+                : input.value;
+            input.value = filterValue;
             // if #sendComposingInput set true, #teleportInput will send detail
             if (!this.#sendComposingInput) {
-                this.#dom.dispatchEvent(new CustomEvent('input', {
+                this.#dom.dispatchEvent(new CustomEvent('lynxinput', {
                     ...commonComponentEventSetting,
                     detail: {
-                        value,
+                        value: filterValue,
                         /** @deprecated */
-                        textLength: value.length,
+                        textLength: filterValue.length,
                         /** @deprecated */
                         cursor: input.selectionStart,
                         isComposing: false,

package/dist/common/getCombinedParentElement.d.ts

@@ -0,0 +1 @@
+export declare const getCombinedDirectParentElement: <T extends HTMLElement>(element: HTMLElement, parentTagName: string) => T | undefined;

package/dist/common/getCombinedParentElement.js

@@ -0,0 +1,11 @@
+export const getCombinedDirectParentElement = (element, parentTagName) => {
+    let parentElement = element.parentElement;
+    if (parentElement?.tagName === 'LYNX-WRAPPER') {
+        parentElement = parentElement.parentElement;
+    }
+    if (parentElement?.tagName === parentTagName) {
+        return parentElement;
+    }
+    return;
+};
+//# sourceMappingURL=getCombinedParentElement.js.map

package/package.json

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

package/src/XCanvas/x-canvas.css

@@ -10,7 +10,7 @@ x-canvas {
 x-canvas > * {
   display: none !important;
 }
-x-canvas::part {
+x-canvas::part(canvas) {
   height: 100%;
   width: 100%;
 }

package/src/XText/x-text.css

@@ -8,11 +8,15 @@ x-text {
   display: flex;
   overflow-wrap: break-word;
   align-items: stretch;
-  color: var(--lynx-color);
   background-image: var(--lynx-text-bg-color);
+  color: initial;
 }
+
+x-text > x-text, x-text > lynx-wrapper > x-text {
+  color: inherit;
+}
+
 x-text:not(x-text > x-text):not(x-text > lynx-wrapper > x-text) {
-  --lynx-color: canvastext;
   --lynx-text-bg-color: initial;
 }