@lynx-js/web-elements 0.7.4 → 0.7.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +13 -0
- package/dist/XInput/XInput.d.ts +5 -0
- package/dist/XInput/XInput.js +8 -0
- package/dist/XInput/XInputEvents.js +39 -6
- package/dist/XTextarea/XTextarea.d.ts +5 -0
- package/dist/XTextarea/XTextarea.js +8 -0
- package/dist/XTextarea/XTextareaEvents.js +33 -0
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
# @lynx-js/web-elements
|
|
2
2
|
|
|
3
|
+
## 0.7.5
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 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))
|
|
8
|
+
|
|
9
|
+
- 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))
|
|
10
|
+
|
|
11
|
+
- 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))
|
|
12
|
+
|
|
13
|
+
- Updated dependencies []:
|
|
14
|
+
- @lynx-js/web-elements-template@0.7.5
|
|
15
|
+
|
|
3
16
|
## 0.7.4
|
|
4
17
|
|
|
5
18
|
### Patch Changes
|
package/dist/XInput/XInput.d.ts
CHANGED
|
@@ -10,6 +10,11 @@ export declare class XInput extends HTMLElement {
|
|
|
10
10
|
value: string;
|
|
11
11
|
index: number;
|
|
12
12
|
}): void;
|
|
13
|
+
getValue(): {
|
|
14
|
+
value: string;
|
|
15
|
+
selectionBegin: number | null;
|
|
16
|
+
selectionEnd: number | null;
|
|
17
|
+
};
|
|
13
18
|
sendDelEvent(params: {
|
|
14
19
|
action: number;
|
|
15
20
|
length: number;
|
package/dist/XInput/XInput.js
CHANGED
|
@@ -64,6 +64,14 @@ let XInput = (() => {
|
|
|
64
64
|
input.setSelectionRange(cursorIndex, cursorIndex);
|
|
65
65
|
}
|
|
66
66
|
}
|
|
67
|
+
getValue() {
|
|
68
|
+
const input = this.#getInput();
|
|
69
|
+
return {
|
|
70
|
+
value: input.value,
|
|
71
|
+
selectionBegin: input.selectionStart,
|
|
72
|
+
selectionEnd: input.selectionEnd,
|
|
73
|
+
};
|
|
74
|
+
}
|
|
67
75
|
sendDelEvent(params) {
|
|
68
76
|
let { action, length } = params;
|
|
69
77
|
const input = this.#getInput();
|
|
@@ -10,16 +10,19 @@ import { renameEvent } from '../common/renameEvent.js';
|
|
|
10
10
|
import { registerEventEnableStatusChangeHandler } from '@lynx-js/web-elements-reactive';
|
|
11
11
|
let XInputEvents = (() => {
|
|
12
12
|
let _instanceExtraInitializers = [];
|
|
13
|
-
let
|
|
14
|
-
let
|
|
13
|
+
let _private_handleEnableInputEvent_decorators;
|
|
14
|
+
let _private_handleEnableInputEvent_descriptor;
|
|
15
15
|
let _private_handleSendComposingInput_decorators;
|
|
16
16
|
let _private_handleSendComposingInput_descriptor;
|
|
17
|
+
let _private_handleEnableSelectionEvent_decorators;
|
|
18
|
+
let _private_handleEnableSelectionEvent_descriptor;
|
|
17
19
|
return class XInputEvents {
|
|
18
20
|
static {
|
|
19
21
|
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
|
|
20
|
-
|
|
22
|
+
_private_handleEnableInputEvent_decorators = [registerEventEnableStatusChangeHandler('input')];
|
|
21
23
|
_private_handleSendComposingInput_decorators = [registerAttributeHandler('send-composing-input', true)];
|
|
22
|
-
|
|
24
|
+
_private_handleEnableSelectionEvent_decorators = [registerEventEnableStatusChangeHandler('selection')];
|
|
25
|
+
__esDecorate(this, _private_handleEnableInputEvent_descriptor = { value: __setFunctionName(function (status) {
|
|
23
26
|
const input = this.#getInputElement();
|
|
24
27
|
if (status) {
|
|
25
28
|
input.addEventListener('input', this.#teleportInput, { passive: true });
|
|
@@ -29,10 +32,20 @@ let XInputEvents = (() => {
|
|
|
29
32
|
input.removeEventListener('input', this.#teleportInput);
|
|
30
33
|
input.removeEventListener('compositionend', this.#teleportCompositionendInput);
|
|
31
34
|
}
|
|
32
|
-
}, "#
|
|
35
|
+
}, "#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);
|
|
33
36
|
__esDecorate(this, _private_handleSendComposingInput_descriptor = { value: __setFunctionName(function (newVal) {
|
|
34
37
|
this.#sendComposingInput = newVal !== null;
|
|
35
38
|
}, "#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);
|
|
39
|
+
__esDecorate(this, _private_handleEnableSelectionEvent_descriptor = { value: __setFunctionName(function (status) {
|
|
40
|
+
if (status) {
|
|
41
|
+
this.#getInputElement().addEventListener('select', this.#selectEvent, {
|
|
42
|
+
passive: true,
|
|
43
|
+
});
|
|
44
|
+
}
|
|
45
|
+
else {
|
|
46
|
+
this.#getInputElement().removeEventListener('select', this.#selectEvent);
|
|
47
|
+
}
|
|
48
|
+
}, "#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);
|
|
36
49
|
if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
37
50
|
}
|
|
38
51
|
static observedAttributes = ['send-composing-input'];
|
|
@@ -40,7 +53,7 @@ let XInputEvents = (() => {
|
|
|
40
53
|
#sendComposingInput = false;
|
|
41
54
|
#getInputElement = genDomGetter(() => this.#dom.shadowRoot, '#input');
|
|
42
55
|
#getFormElement = genDomGetter(() => this.#dom.shadowRoot, '#form');
|
|
43
|
-
get #
|
|
56
|
+
get #handleEnableInputEvent() { return _private_handleEnableInputEvent_descriptor.value; }
|
|
44
57
|
get #handleSendComposingInput() { return _private_handleSendComposingInput_descriptor.value; }
|
|
45
58
|
#teleportEvent = (event) => {
|
|
46
59
|
const eventType = renameEvent[event.type] ?? event.type;
|
|
@@ -61,9 +74,13 @@ let XInputEvents = (() => {
|
|
|
61
74
|
...commonComponentEventSetting,
|
|
62
75
|
detail: {
|
|
63
76
|
value,
|
|
77
|
+
/** @deprecated */
|
|
64
78
|
textLength: value.length,
|
|
79
|
+
/** @deprecated */
|
|
65
80
|
cursor: input.selectionStart,
|
|
66
81
|
isComposing,
|
|
82
|
+
selectionStart: input.selectionStart,
|
|
83
|
+
selectionEnd: input.selectionEnd,
|
|
67
84
|
},
|
|
68
85
|
}));
|
|
69
86
|
};
|
|
@@ -76,12 +93,28 @@ let XInputEvents = (() => {
|
|
|
76
93
|
...commonComponentEventSetting,
|
|
77
94
|
detail: {
|
|
78
95
|
value,
|
|
96
|
+
/** @deprecated */
|
|
79
97
|
textLength: value.length,
|
|
98
|
+
/** @deprecated */
|
|
80
99
|
cursor: input.selectionStart,
|
|
100
|
+
isComposing: false,
|
|
101
|
+
selectionStart: input.selectionStart,
|
|
102
|
+
selectionEnd: input.selectionEnd,
|
|
81
103
|
},
|
|
82
104
|
}));
|
|
83
105
|
}
|
|
84
106
|
};
|
|
107
|
+
get #handleEnableSelectionEvent() { return _private_handleEnableSelectionEvent_descriptor.value; }
|
|
108
|
+
#selectEvent = () => {
|
|
109
|
+
const input = this.#getInputElement();
|
|
110
|
+
this.#dom.dispatchEvent(new CustomEvent('selection', {
|
|
111
|
+
...commonComponentEventSetting,
|
|
112
|
+
detail: {
|
|
113
|
+
selectionStart: input.selectionStart,
|
|
114
|
+
selectionEnd: input.selectionEnd,
|
|
115
|
+
},
|
|
116
|
+
}));
|
|
117
|
+
};
|
|
85
118
|
#blockHtmlEvent = (event) => {
|
|
86
119
|
if (event.target === this.#getInputElement()
|
|
87
120
|
&& typeof event.detail === 'number') {
|
|
@@ -9,6 +9,11 @@ export declare class XTextarea extends HTMLElement {
|
|
|
9
9
|
value: string;
|
|
10
10
|
index: number;
|
|
11
11
|
}): void;
|
|
12
|
+
getValue(): {
|
|
13
|
+
value: string;
|
|
14
|
+
selectionBegin: number;
|
|
15
|
+
selectionEnd: number;
|
|
16
|
+
};
|
|
12
17
|
sendDelEvent(params: {
|
|
13
18
|
action: number;
|
|
14
19
|
length: number;
|
|
@@ -62,6 +62,14 @@ let XTextarea = (() => {
|
|
|
62
62
|
input.setSelectionRange(cursorIndex, cursorIndex);
|
|
63
63
|
}
|
|
64
64
|
}
|
|
65
|
+
getValue() {
|
|
66
|
+
const input = this.#getTextarea();
|
|
67
|
+
return {
|
|
68
|
+
value: input.value,
|
|
69
|
+
selectionBegin: input.selectionStart,
|
|
70
|
+
selectionEnd: input.selectionEnd,
|
|
71
|
+
};
|
|
72
|
+
}
|
|
65
73
|
sendDelEvent(params) {
|
|
66
74
|
let { action, length } = params;
|
|
67
75
|
const input = this.#getTextarea();
|
|
@@ -14,11 +14,14 @@ let XTextareaEvents = (() => {
|
|
|
14
14
|
let _private_handleEnableConfirmEvent_descriptor;
|
|
15
15
|
let _private_handleSendComposingInput_decorators;
|
|
16
16
|
let _private_handleSendComposingInput_descriptor;
|
|
17
|
+
let _private_handleEnableSelectionEvent_decorators;
|
|
18
|
+
let _private_handleEnableSelectionEvent_descriptor;
|
|
17
19
|
return class XTextareaEvents {
|
|
18
20
|
static {
|
|
19
21
|
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
|
|
20
22
|
_private_handleEnableConfirmEvent_decorators = [registerEventEnableStatusChangeHandler('input')];
|
|
21
23
|
_private_handleSendComposingInput_decorators = [registerAttributeHandler('send-composing-input', true)];
|
|
24
|
+
_private_handleEnableSelectionEvent_decorators = [registerEventEnableStatusChangeHandler('selection')];
|
|
22
25
|
__esDecorate(this, _private_handleEnableConfirmEvent_descriptor = { value: __setFunctionName(function (status) {
|
|
23
26
|
const textareaElement = this.#getTextareaElement();
|
|
24
27
|
if (status) {
|
|
@@ -33,6 +36,16 @@ let XTextareaEvents = (() => {
|
|
|
33
36
|
__esDecorate(this, _private_handleSendComposingInput_descriptor = { value: __setFunctionName(function (newVal) {
|
|
34
37
|
this.#sendComposingInput = newVal !== null;
|
|
35
38
|
}, "#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);
|
|
39
|
+
__esDecorate(this, _private_handleEnableSelectionEvent_descriptor = { value: __setFunctionName(function (status) {
|
|
40
|
+
if (status) {
|
|
41
|
+
this.#getTextareaElement().addEventListener('select', this.#selectEvent, {
|
|
42
|
+
passive: true,
|
|
43
|
+
});
|
|
44
|
+
}
|
|
45
|
+
else {
|
|
46
|
+
this.#getTextareaElement().removeEventListener('select', this.#selectEvent);
|
|
47
|
+
}
|
|
48
|
+
}, "#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);
|
|
36
49
|
if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
37
50
|
}
|
|
38
51
|
static observedAttributes = ['send-composing-input'];
|
|
@@ -61,9 +74,13 @@ let XTextareaEvents = (() => {
|
|
|
61
74
|
...commonComponentEventSetting,
|
|
62
75
|
detail: {
|
|
63
76
|
value,
|
|
77
|
+
/** @deprecated */
|
|
64
78
|
textLength: value.length,
|
|
79
|
+
/** @deprecated */
|
|
65
80
|
cursor: input.selectionStart,
|
|
66
81
|
isComposing,
|
|
82
|
+
selectionStart: input.selectionStart,
|
|
83
|
+
selectionEnd: input.selectionEnd,
|
|
67
84
|
},
|
|
68
85
|
}));
|
|
69
86
|
};
|
|
@@ -76,12 +93,28 @@ let XTextareaEvents = (() => {
|
|
|
76
93
|
...commonComponentEventSetting,
|
|
77
94
|
detail: {
|
|
78
95
|
value,
|
|
96
|
+
/** @deprecated */
|
|
79
97
|
textLength: value.length,
|
|
98
|
+
/** @deprecated */
|
|
80
99
|
cursor: input.selectionStart,
|
|
100
|
+
isComposing: false,
|
|
101
|
+
selectionStart: input.selectionStart,
|
|
102
|
+
selectionEnd: input.selectionEnd,
|
|
81
103
|
},
|
|
82
104
|
}));
|
|
83
105
|
}
|
|
84
106
|
};
|
|
107
|
+
get #handleEnableSelectionEvent() { return _private_handleEnableSelectionEvent_descriptor.value; }
|
|
108
|
+
#selectEvent = () => {
|
|
109
|
+
const input = this.#getTextareaElement();
|
|
110
|
+
this.#dom.dispatchEvent(new CustomEvent('selection', {
|
|
111
|
+
...commonComponentEventSetting,
|
|
112
|
+
detail: {
|
|
113
|
+
selectionStart: input.selectionStart,
|
|
114
|
+
selectionEnd: input.selectionEnd,
|
|
115
|
+
},
|
|
116
|
+
}));
|
|
117
|
+
};
|
|
85
118
|
#blockHtmlEvent = (event) => {
|
|
86
119
|
if (event.target === this.#getTextareaElement()
|
|
87
120
|
&& typeof event.detail === 'number') {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lynx-js/web-elements",
|
|
3
|
-
"version": "0.7.
|
|
3
|
+
"version": "0.7.5",
|
|
4
4
|
"private": false,
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -101,7 +101,7 @@
|
|
|
101
101
|
],
|
|
102
102
|
"dependencies": {
|
|
103
103
|
"@lynx-js/web-elements-reactive": "0.2.2",
|
|
104
|
-
"@lynx-js/web-elements-template": "0.7.
|
|
104
|
+
"@lynx-js/web-elements-template": "0.7.5"
|
|
105
105
|
},
|
|
106
106
|
"devDependencies": {
|
|
107
107
|
"tslib": "^2.8.1"
|