@lynx-js/web-elements 0.7.3 → 0.7.5

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @lynx-js/web-elements
 
+## 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
+
+- fix: x-foldview-ng `overflow-y: scroll` add !important to avoid being covered. ([#932](https://github.com/lynx-family/lynx-stack/pull/932))
+
+- Updated dependencies []:
+  - @lynx-js/web-elements-template@0.7.4
+
 ## 0.7.3
 
 ### Patch Changes

package/README.md

@@ -4,26 +4,25 @@ It provides the custom-element implementation of Lynx Elements in Web.
 
 So far, support compared to Lynx Elements on the client:
 
-| Elements       | Whether support | Details                                                                        |
-| -------------- | --------------- | ------------------------------------------------------------------------------ |
-| Elements       |                 |                                                                                |
-| canvas         | ❌              | No                                                                             |
-| image          | ✅              | Full Support                                                                   |
-| list           | ✅              | list-type with single and flow are available, and waterfall is being supported |
-| scroll-view    | ✅              | Full Support                                                                   |
-| text           | ✅              | Full Support                                                                   |
-| view           | ✅              | Full Support                                                                   |
-| X-Elements     |                 |                                                                                |
-| svg            | ✅              | Full Support                                                                   |
-| x-blur-view    | ✅              | Full Support                                                                   |
-| x-input        | ✅              | Full Support                                                                   |
-| x-textarea     | ✅              | Full Support                                                                   |
-| x-swiper       | ✅              | Full Support                                                                   |
-| x-viewpager-ng | ✅              | Full Support                                                                   |
-| x-foldview-ng  | ✅              | Full Support                                                                   |
-| x-refresh-view | ✅              | Full Support                                                                   |
-| x-overlay-ng   | ✅              | Full Support                                                                   |
-| x-audio-tt     | ✅              | Full Support                                                                   |
+| Elements       | Whether support | Details      |
+| -------------- | --------------- | ------------ |
+| Elements       |                 |              |
+| image          | ✅              | Full Support |
+| list           | ✅              | Full Support |
+| scroll-view    | ✅              | Full Support |
+| text           | ✅              | Full Support |
+| view           | ✅              | Full Support |
+| X-Elements     |                 |              |
+| svg            | ✅              | Full Support |
+| x-blur-view    | ✅              | Full Support |
+| x-input        | ✅              | Full Support |
+| x-textarea     | ✅              | Full Support |
+| x-swiper       | ✅              | Full Support |
+| x-viewpager-ng | ✅              | Full Support |
+| x-foldview-ng  | ✅              | Full Support |
+| x-refresh-view | ✅              | Full Support |
+| x-overlay-ng   | ✅              | Full Support |
+| x-audio-tt     | ✅              | Full Support |
 
 ## Usage
 

package/dist/XFoldViewNg/XFoldviewNgEvents.js

@@ -46,16 +46,16 @@ let XFoldviewNgEvents = (() => {
         get #handleGranularity() { return _private_handleGranularity_descriptor.value; }
         get #enableOffsetEvent() { return _private_enableOffsetEvent_descriptor.value; }
         #handleScroll = () => {
-            const curentScrollTop = this.#dom.scrollTop;
-            const scrollLength = Math.abs(this.#pervScroll - curentScrollTop);
+            const currentScrollTop = this.#dom.scrollTop;
+            const scrollLength = Math.abs(this.#pervScroll - currentScrollTop);
             if (scrollLength > this.#granularity
                 || this.#dom.scrollTop === 0
                 || Math.abs(this.#dom.scrollHeight - this.#dom.clientHeight - this.#dom.scrollTop) <= 1) {
-                this.#pervScroll = curentScrollTop;
+                this.#pervScroll = currentScrollTop;
                 this.#dom.dispatchEvent(new CustomEvent('offset', {
                     ...commonComponentEventSetting,
                     detail: {
-                        offset: curentScrollTop,
+                        offset: currentScrollTop,
                         height: this.#dom[scrollableLength],
                     },
                 }));

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 = [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,10 +32,20 @@ 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'];
@@ -40,7 +53,7 @@ let XInputEvents = (() => {
         #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;
@@ -61,9 +74,13 @@ let XInputEvents = (() => {
                 ...commonComponentEventSetting,
                 detail: {
                     value,
+                    /** @deprecated */
                     textLength: value.length,
+                    /** @deprecated */
                     cursor: input.selectionStart,
                     isComposing,
+                    selectionStart: input.selectionStart,
+                    selectionEnd: input.selectionEnd,
                 },
             }));
         };
@@ -76,12 +93,28 @@ let XInputEvents = (() => {
                     ...commonComponentEventSetting,
                     detail: {
                         value,
+                        /** @deprecated */
                         textLength: value.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/XText/XTextTruncation.js

@@ -110,16 +110,16 @@ let XTextTruncation = (() => {
             this.#dom.removeAttribute(XTextTruncation.exceedMathLengthAttribute);
             this.#dom.removeAttribute(XTextTruncation.showInlineTruncation);
         }
-        #getAllSibilings(targetNode) {
-            const sibilingNodes = [];
-            let targetNodeSibiling = targetNode;
-            while ((targetNodeSibiling = targetNodeSibiling.nextSibling)) {
-                if (targetNodeSibiling.nodeType === Node.TEXT_NODE
-                    || targetNodeSibiling.nodeType === Node.ELEMENT_NODE) {
-                    sibilingNodes.push(targetNodeSibiling);
+        #getAllSiblings(targetNode) {
+            const siblingNodes = [];
+            let targetNodeSibling = targetNode;
+            while ((targetNodeSibling = targetNodeSibling.nextSibling)) {
+                if (targetNodeSibling.nodeType === Node.TEXT_NODE
+                    || targetNodeSibling.nodeType === Node.ELEMENT_NODE) {
+                    siblingNodes.push(targetNodeSibling);
                 }
             }
-            return sibilingNodes;
+            return siblingNodes;
         }
         #layoutText() {
             if (!this.#componentConnected || this.#dom.matches('x-text>x-text'))
@@ -208,10 +208,10 @@ let XTextTruncation = (() => {
                     else {
                         toBeHideNodes.push(targetNode);
                     }
-                    toBeHideNodes = toBeHideNodes.concat(this.#getAllSibilings(targetNode));
+                    toBeHideNodes = toBeHideNodes.concat(this.#getAllSiblings(targetNode));
                     let targetNodeParentElement = targetNode.parentElement;
                     while (targetNodeParentElement !== this.#dom) {
-                        toBeHideNodes = toBeHideNodes.concat(this.#getAllSibilings(targetNodeParentElement));
+                        toBeHideNodes = toBeHideNodes.concat(this.#getAllSiblings(targetNodeParentElement));
                         targetNodeParentElement = targetNodeParentElement.parentElement;
                     }
                     toBeHideNodes.forEach((node) => {
@@ -450,7 +450,7 @@ class TextRenderingMeasureTool {
     getLineInfo(lineIndex) {
         this.#genLinesInfoUntil(lineIndex + 1);
         if (lineIndex < this.#lazyLinesInfo.length) {
-            // get catched info first
+            // get caught info first
             const pervLineInfo = lineIndex > 0
                 ? this.#cachedLineInfo[lineIndex - 1] ?? {}
                 : undefined;

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_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,6 +36,16 @@ 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'];
@@ -61,9 +74,13 @@ let XTextareaEvents = (() => {
                 ...commonComponentEventSetting,
                 detail: {
                     value,
+                    /** @deprecated */
                     textLength: value.length,
+                    /** @deprecated */
                     cursor: input.selectionStart,
                     isComposing,
+                    selectionStart: input.selectionStart,
+                    selectionEnd: input.selectionEnd,
                 },
             }));
         };
@@ -76,12 +93,28 @@ let XTextareaEvents = (() => {
                     ...commonComponentEventSetting,
                     detail: {
                         value,
+                        /** @deprecated */
                         textLength: value.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/CommonEventsAndMethods.js

@@ -40,7 +40,7 @@ let CommonEventsAndMethods = (() => {
         /**
          * If this dom is already exposured
          */
-        #exposureTriggerd = false;
+        #exposureTriggered = false;
         /**
          * keeps the observer of current dom
          */
@@ -158,11 +158,11 @@ let CommonEventsAndMethods = (() => {
                             root = root.parentElement;
                         }
                     }
-                    this.#exposureTriggerd = false;
+                    this.#exposureTriggered = false;
                     this.#exposureObserver = new IntersectionObserver(([entry]) => {
                         if (entry) {
                             if (entry.isIntersecting) {
-                                this.#exposureTriggerd = true;
+                                this.#exposureTriggered = true;
                             }
                             this.#sendOneExposureEvent(entry);
                         }
@@ -179,7 +179,7 @@ let CommonEventsAndMethods = (() => {
             }
         }
         #sendOneExposureEvent(entry, overrideExposureId) {
-            if (!this.#exposureTriggerd) {
+            if (!this.#exposureTriggered) {
                 return;
             }
             const exposureID = overrideExposureId

package/package.json

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

package/src/XFoldViewNg/x-foldview-ng.css

@@ -5,7 +5,7 @@
 */
 x-foldview-ng {
   display: flex;
-  overflow-y: scroll;
+  overflow-y: scroll !important;
   overflow-x: clip;
   overflow-x: hidden;
   overscroll-behavior: contain;

package/src/XText/x-text.css

@@ -179,7 +179,7 @@ x-text[x-text-clipped][x-text-custom-overflow]::part(inner-box)::after {
  * 1. without customized inline-truncation
  * 2. users do not force we apply styles on the ellipsis
  *
- * Overall, we do calculate the layout of texts with (dispaly:block) for
+ * Overall, we do calculate the layout of texts with (display:block) for
  * 1. analyze the truncation length for a customized inline-truncation (attribute x-text-custom-overflow, selector :has())
  * 2. users explicit declare that we have to put the ellipsis in place. (with attribute tail-color-convert='false')
  */