@lynx-js/web-elements 0.7.4 → 0.7.6

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @lynx-js/web-elements
 
+## 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
+
+- feat: x-input && x-textarea add new method: `getValue`, which returns the value of the input element, selectionStart and selectEnd when success. ([#982](https://github.com/lynx-family/lynx-stack/pull/982))
+
+- feat: x-input and x-textarea bindinput event return structures add `selectionStart`, `selectionEnd`, and `textLength`, `textLength` are marked as @deprecated ([#996](https://github.com/lynx-family/lynx-stack/pull/996))
+
+- feat: x-input and x-textarea support bindselection event, the returned type structure is `{ selectionStart: number; selectionEnd: number }`. ([#990](https://github.com/lynx-family/lynx-stack/pull/990))
+
+- Updated dependencies []:
+  - @lynx-js/web-elements-template@0.7.5
+
 ## 0.7.4
 
 ### 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/XInput.d.ts

@@ -10,6 +10,11 @@ export declare class XInput extends HTMLElement {
         value: string;
         index: number;
     }): void;
+    getValue(): {
+        value: string;
+        selectionBegin: number | null;
+        selectionEnd: number | null;
+    };
     sendDelEvent(params: {
         action: number;
         length: number;

package/dist/XInput/XInput.js

@@ -64,6 +64,14 @@ let XInput = (() => {
                 input.setSelectionRange(cursorIndex, cursorIndex);
             }
         }
+        getValue() {
+            const input = this.#getInput();
+            return {
+                value: input.value,
+                selectionBegin: input.selectionStart,
+                selectionEnd: input.selectionEnd,
+            };
+        }
         sendDelEvent(params) {
             let { action, length } = params;
             const input = this.#getInput();

package/dist/XInput/XInputEvents.js

@@ -10,16 +10,19 @@ import { renameEvent } from '../common/renameEvent.js';
 import { registerEventEnableStatusChangeHandler } from '@lynx-js/web-elements-reactive';
 let XInputEvents = (() => {
     let _instanceExtraInitializers = [];
-    let _private_handleEnableConfirmEvent_decorators;
-    let _private_handleEnableConfirmEvent_descriptor;
+    let _private_handleEnableInputEvent_decorators;
+    let _private_handleEnableInputEvent_descriptor;
     let _private_handleSendComposingInput_decorators;
     let _private_handleSendComposingInput_descriptor;
+    let _private_handleEnableSelectionEvent_decorators;
+    let _private_handleEnableSelectionEvent_descriptor;
     return class XInputEvents {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
-            _private_handleEnableConfirmEvent_decorators = [registerEventEnableStatusChangeHandler('input')];
+            _private_handleEnableInputEvent_decorators = [registerAttributeHandler('input-filter', true), registerEventEnableStatusChangeHandler('input')];
             _private_handleSendComposingInput_decorators = [registerAttributeHandler('send-composing-input', true)];
-            __esDecorate(this, _private_handleEnableConfirmEvent_descriptor = { value: __setFunctionName(function (status) {
+            _private_handleEnableSelectionEvent_decorators = [registerEventEnableStatusChangeHandler('selection')];
+            __esDecorate(this, _private_handleEnableInputEvent_descriptor = { value: __setFunctionName(function (status) {
                     const input = this.#getInputElement();
                     if (status) {
                         input.addEventListener('input', this.#teleportInput, { passive: true });
@@ -29,18 +32,28 @@ let XInputEvents = (() => {
                         input.removeEventListener('input', this.#teleportInput);
                         input.removeEventListener('compositionend', this.#teleportCompositionendInput);
                     }
-                }, "#handleEnableConfirmEvent") }, _private_handleEnableConfirmEvent_decorators, { kind: "method", name: "#handleEnableConfirmEvent", static: false, private: true, access: { has: obj => #handleEnableConfirmEvent in obj, get: obj => obj.#handleEnableConfirmEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
+                }, "#handleEnableInputEvent") }, _private_handleEnableInputEvent_decorators, { kind: "method", name: "#handleEnableInputEvent", static: false, private: true, access: { has: obj => #handleEnableInputEvent in obj, get: obj => obj.#handleEnableInputEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, _private_handleSendComposingInput_descriptor = { value: __setFunctionName(function (newVal) {
                     this.#sendComposingInput = newVal !== null;
                 }, "#handleSendComposingInput") }, _private_handleSendComposingInput_decorators, { kind: "method", name: "#handleSendComposingInput", static: false, private: true, access: { has: obj => #handleSendComposingInput in obj, get: obj => obj.#handleSendComposingInput }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, _private_handleEnableSelectionEvent_descriptor = { value: __setFunctionName(function (status) {
+                    if (status) {
+                        this.#getInputElement().addEventListener('select', this.#selectEvent, {
+                            passive: true,
+                        });
+                    }
+                    else {
+                        this.#getInputElement().removeEventListener('select', this.#selectEvent);
+                    }
+                }, "#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');
         #getFormElement = genDomGetter(() => this.#dom.shadowRoot, '#form');
-        get #handleEnableConfirmEvent() { return _private_handleEnableConfirmEvent_descriptor.value; }
+        get #handleEnableInputEvent() { return _private_handleEnableInputEvent_descriptor.value; }
         get #handleSendComposingInput() { return _private_handleSendComposingInput_descriptor.value; }
         #teleportEvent = (event) => {
             const eventType = renameEvent[event.type] ?? event.type;
@@ -53,35 +66,63 @@ 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', {
                 ...commonComponentEventSetting,
                 detail: {
-                    value,
-                    textLength: value.length,
+                    value: filterValue,
+                    /** @deprecated */
+                    textLength: filterValue.length,
+                    /** @deprecated */
                     cursor: input.selectionStart,
                     isComposing,
+                    selectionStart: input.selectionStart,
+                    selectionEnd: input.selectionEnd,
                 },
             }));
         };
         #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', {
                     ...commonComponentEventSetting,
                     detail: {
-                        value,
-                        textLength: value.length,
+                        value: filterValue,
+                        /** @deprecated */
+                        textLength: filterValue.length,
+                        /** @deprecated */
                         cursor: input.selectionStart,
+                        isComposing: false,
+                        selectionStart: input.selectionStart,
+                        selectionEnd: input.selectionEnd,
                     },
                 }));
             }
         };
+        get #handleEnableSelectionEvent() { return _private_handleEnableSelectionEvent_descriptor.value; }
+        #selectEvent = () => {
+            const input = this.#getInputElement();
+            this.#dom.dispatchEvent(new CustomEvent('selection', {
+                ...commonComponentEventSetting,
+                detail: {
+                    selectionStart: input.selectionStart,
+                    selectionEnd: input.selectionEnd,
+                },
+            }));
+        };
         #blockHtmlEvent = (event) => {
             if (event.target === this.#getInputElement()
                 && typeof event.detail === 'number') {

package/dist/XTextarea/XTextarea.d.ts

@@ -9,6 +9,11 @@ export declare class XTextarea extends HTMLElement {
         value: string;
         index: number;
     }): void;
+    getValue(): {
+        value: string;
+        selectionBegin: number;
+        selectionEnd: number;
+    };
     sendDelEvent(params: {
         action: number;
         length: number;

package/dist/XTextarea/XTextarea.js

@@ -62,6 +62,14 @@ let XTextarea = (() => {
                 input.setSelectionRange(cursorIndex, cursorIndex);
             }
         }
+        getValue() {
+            const input = this.#getTextarea();
+            return {
+                value: input.value,
+                selectionBegin: input.selectionStart,
+                selectionEnd: input.selectionEnd,
+            };
+        }
         sendDelEvent(params) {
             let { action, length } = params;
             const input = this.#getTextarea();

package/dist/XTextarea/XTextareaEvents.js

@@ -14,11 +14,14 @@ let XTextareaEvents = (() => {
     let _private_handleEnableConfirmEvent_descriptor;
     let _private_handleSendComposingInput_decorators;
     let _private_handleSendComposingInput_descriptor;
+    let _private_handleEnableSelectionEvent_decorators;
+    let _private_handleEnableSelectionEvent_descriptor;
     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('input')];
             _private_handleSendComposingInput_decorators = [registerAttributeHandler('send-composing-input', true)];
+            _private_handleEnableSelectionEvent_decorators = [registerEventEnableStatusChangeHandler('selection')];
             __esDecorate(this, _private_handleEnableConfirmEvent_descriptor = { value: __setFunctionName(function (status) {
                     const textareaElement = this.#getTextareaElement();
                     if (status) {
@@ -33,9 +36,19 @@ let XTextareaEvents = (() => {
             __esDecorate(this, _private_handleSendComposingInput_descriptor = { value: __setFunctionName(function (newVal) {
                     this.#sendComposingInput = newVal !== null;
                 }, "#handleSendComposingInput") }, _private_handleSendComposingInput_decorators, { kind: "method", name: "#handleSendComposingInput", static: false, private: true, access: { has: obj => #handleSendComposingInput in obj, get: obj => obj.#handleSendComposingInput }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, _private_handleEnableSelectionEvent_descriptor = { value: __setFunctionName(function (status) {
+                    if (status) {
+                        this.#getTextareaElement().addEventListener('select', this.#selectEvent, {
+                            passive: true,
+                        });
+                    }
+                    else {
+                        this.#getTextareaElement().removeEventListener('select', this.#selectEvent);
+                    }
+                }, "#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');
@@ -53,35 +66,63 @@ 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', {
                 ...commonComponentEventSetting,
                 detail: {
-                    value,
-                    textLength: value.length,
+                    value: filterValue,
+                    /** @deprecated */
+                    textLength: filterValue.length,
+                    /** @deprecated */
                     cursor: input.selectionStart,
                     isComposing,
+                    selectionStart: input.selectionStart,
+                    selectionEnd: input.selectionEnd,
                 },
             }));
         };
         #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', {
                     ...commonComponentEventSetting,
                     detail: {
-                        value,
-                        textLength: value.length,
+                        value: filterValue,
+                        /** @deprecated */
+                        textLength: filterValue.length,
+                        /** @deprecated */
                         cursor: input.selectionStart,
+                        isComposing: false,
+                        selectionStart: input.selectionStart,
+                        selectionEnd: input.selectionEnd,
                     },
                 }));
             }
         };
+        get #handleEnableSelectionEvent() { return _private_handleEnableSelectionEvent_descriptor.value; }
+        #selectEvent = () => {
+            const input = this.#getTextareaElement();
+            this.#dom.dispatchEvent(new CustomEvent('selection', {
+                ...commonComponentEventSetting,
+                detail: {
+                    selectionStart: input.selectionStart,
+                    selectionEnd: input.selectionEnd,
+                },
+            }));
+        };
         #blockHtmlEvent = (event) => {
             if (event.target === this.#getTextareaElement()
                 && typeof event.detail === 'number') {

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.4",
+  "version": "0.7.6",
   "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.4"
+    "@lynx-js/web-elements-template": "0.7.6"
   },
   "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;
 }