@lynx-js/web-elements 0.12.4 → 0.12.6
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 +12 -0
- package/dist/elements/XAudioTT/XAudioTT.js +28 -11
- package/dist/elements/XText/XTextTruncation.js +6 -0
- package/dist/elements/htmlTemplates.d.ts +1 -1
- package/dist/elements/htmlTemplates.js +0 -31
- package/package.json +3 -3
- package/src/elements/ScrollView/scroll-view.css +32 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @lynx-js/web-elements
|
|
2
2
|
|
|
3
|
+
## 0.12.6
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Fix `x-text` custom inline truncation so inline `x-view` children are measured as one inline box instead of double-counting their descendants as extra lines. ([#2917](https://github.com/lynx-family/lynx-stack/pull/2917))
|
|
8
|
+
|
|
9
|
+
## 0.12.5
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- Fix web element compatibility issues surfaced by Playwright 1.61 snapshots. ([#2898](https://github.com/lynx-family/lynx-stack/pull/2898))
|
|
14
|
+
|
|
3
15
|
## 0.12.4
|
|
4
16
|
|
|
5
17
|
### Patch Changes
|
|
@@ -31,6 +31,17 @@ let XAudioTT = (() => {
|
|
|
31
31
|
#setAudioSrc = bindToAttribute(this.#getAudioElement, 'src');
|
|
32
32
|
[xAudioSrc];
|
|
33
33
|
[xAudioBlob];
|
|
34
|
+
#dispatchError(code, from) {
|
|
35
|
+
this.dispatchEvent(new CustomEvent('error', {
|
|
36
|
+
...commonComponentEventSetting,
|
|
37
|
+
detail: {
|
|
38
|
+
code,
|
|
39
|
+
msg: '',
|
|
40
|
+
from,
|
|
41
|
+
currentSrcID: this[xAudioSrc]?.id,
|
|
42
|
+
},
|
|
43
|
+
}));
|
|
44
|
+
}
|
|
34
45
|
#fetchAudio = () => {
|
|
35
46
|
const parsedSrc = this[xAudioSrc];
|
|
36
47
|
if (!parsedSrc || !parsedSrc.id || !parsedSrc.play_url) {
|
|
@@ -58,16 +69,9 @@ let XAudioTT = (() => {
|
|
|
58
69
|
headers: parsedHeaders,
|
|
59
70
|
});
|
|
60
71
|
if (!response.ok) {
|
|
61
|
-
this.
|
|
62
|
-
...commonComponentEventSetting,
|
|
63
|
-
detail: {
|
|
64
|
-
code: XAudioErrorCode.DownloadError,
|
|
65
|
-
msg: '',
|
|
66
|
-
from: 'res loader',
|
|
67
|
-
currentSrcID: parsedSrc.id,
|
|
68
|
-
},
|
|
69
|
-
}));
|
|
72
|
+
this.#dispatchError(XAudioErrorCode.DownloadError, 'res loader');
|
|
70
73
|
reject();
|
|
74
|
+
return;
|
|
71
75
|
}
|
|
72
76
|
this.dispatchEvent(new CustomEvent('srcloadingstatechanged', {
|
|
73
77
|
...commonComponentEventSetting,
|
|
@@ -77,11 +81,17 @@ let XAudioTT = (() => {
|
|
|
77
81
|
currentSrcID: parsedSrc.id,
|
|
78
82
|
},
|
|
79
83
|
}));
|
|
84
|
+
if (response.headers.get('content-type')?.toLowerCase().startsWith('text/html')) {
|
|
85
|
+
this.#dispatchError(XAudioErrorCode.PlayerPlaybackError, 'player');
|
|
86
|
+
reject();
|
|
87
|
+
return;
|
|
88
|
+
}
|
|
80
89
|
const blob = await response.blob();
|
|
81
90
|
const blobUrl = URL.createObjectURL(blob);
|
|
82
91
|
this.#setAudioSrc(blobUrl);
|
|
83
92
|
resolve();
|
|
84
93
|
});
|
|
94
|
+
void this[xAudioBlob].catch(() => { });
|
|
85
95
|
};
|
|
86
96
|
play() {
|
|
87
97
|
// If prepare method is not called, needs to fetch first
|
|
@@ -91,8 +101,15 @@ let XAudioTT = (() => {
|
|
|
91
101
|
this[xAudioBlob]?.then(() => {
|
|
92
102
|
const audio = this.#getAudio();
|
|
93
103
|
audio.currentTime = 0;
|
|
94
|
-
|
|
95
|
-
|
|
104
|
+
try {
|
|
105
|
+
void audio.play().catch(() => {
|
|
106
|
+
this.#dispatchError(XAudioErrorCode.PlayerPlaybackError, 'player');
|
|
107
|
+
});
|
|
108
|
+
}
|
|
109
|
+
catch {
|
|
110
|
+
this.#dispatchError(XAudioErrorCode.PlayerPlaybackError, 'player');
|
|
111
|
+
}
|
|
112
|
+
}, () => { });
|
|
96
113
|
return {
|
|
97
114
|
currentSrcID: this[xAudioSrc]?.id,
|
|
98
115
|
loadingSrcID: '',
|
|
@@ -543,6 +543,12 @@ class LazyNodesList {
|
|
|
543
543
|
#treeWalker;
|
|
544
544
|
constructor(dom) {
|
|
545
545
|
this.#treeWalker = document.createTreeWalker(dom, NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT, (node) => {
|
|
546
|
+
for (let element = node.parentElement; element && element !== dom; element = element.parentElement) {
|
|
547
|
+
if (element.tagName === 'X-VIEW') {
|
|
548
|
+
// x-view is measured as a single inline box, so skip its subtree.
|
|
549
|
+
return NodeFilter.FILTER_REJECT;
|
|
550
|
+
}
|
|
551
|
+
}
|
|
546
552
|
if (node.nodeType === Node.ELEMENT_NODE) {
|
|
547
553
|
const tagName = node.tagName;
|
|
548
554
|
if (tagName === 'X-TEXT'
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export declare const templateScrollView = "<style>\n .placeholder-dom {\n display: none;\n flex: 0 0 0;\n align-self: stretch;\n min-height: 0;\n min-width: 0;\n }\n .mask {\n z-index: 1;\n position: sticky;\n }\n .observer-container {\n flex-direction: inherit;\n overflow: visible;\n }\n .observer {\n display: flex;\n }\n ::-webkit-scrollbar {\n display: none;\n }\n
|
|
1
|
+
export declare const templateScrollView = "<style>\n .placeholder-dom {\n display: none;\n flex: 0 0 0;\n align-self: stretch;\n min-height: 0;\n min-width: 0;\n }\n .mask {\n z-index: 1;\n position: sticky;\n }\n .observer-container {\n flex-direction: inherit;\n overflow: visible;\n }\n .observer {\n display: flex;\n }\n ::-webkit-scrollbar {\n display: none;\n }\n</style>\n <div\n class=\"mask placeholder-dom\"\n id=\"top-fade-mask\"\n part=\"top-fade-mask\"\n ></div>\n <div\n class=\"observer-container placeholder-dom\"\n part=\"upper-threshold-observer\"\n >\n <div\n class=\"observer placeholder-dom\"\n id=\"upper-threshold-observer\"\n ></div>\n </div>\n <slot></slot>\n <div\n class=\"observer-container placeholder-dom\"\n part=\"lower-threshold-observer\"\n >\n <div\n class=\"observer placeholder-dom\"\n id=\"lower-threshold-observer\"\n ></div>\n </div>\n <div\n class=\"mask placeholder-dom\"\n id=\"bot-fade-mask\"\n part=\"bot-fade-mask\"\n ></div>";
|
|
2
2
|
export declare const templateXAudioTT = "<audio id=\"audio\"></audio>";
|
|
3
3
|
export declare const templateXImage: (attributes: {
|
|
4
4
|
src?: string;
|
|
@@ -29,37 +29,6 @@ export const templateScrollView = `<style>
|
|
|
29
29
|
::-webkit-scrollbar {
|
|
30
30
|
display: none;
|
|
31
31
|
}
|
|
32
|
-
|
|
33
|
-
@keyframes topFading {
|
|
34
|
-
0% {
|
|
35
|
-
box-shadow: transparent 0px 0px 0px 0px;
|
|
36
|
-
}
|
|
37
|
-
5% {
|
|
38
|
-
box-shadow: var(--scroll-view-bg-color) 0px 0px
|
|
39
|
-
var(--scroll-view-fading-edge-length)
|
|
40
|
-
var(--scroll-view-fading-edge-length);
|
|
41
|
-
}
|
|
42
|
-
100% {
|
|
43
|
-
box-shadow: var(--scroll-view-bg-color) 0px 0px
|
|
44
|
-
var(--scroll-view-fading-edge-length)
|
|
45
|
-
var(--scroll-view-fading-edge-length);
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
@keyframes botFading {
|
|
49
|
-
0% {
|
|
50
|
-
box-shadow: var(--scroll-view-bg-color) 0px 0px
|
|
51
|
-
var(--scroll-view-fading-edge-length)
|
|
52
|
-
var(--scroll-view-fading-edge-length);
|
|
53
|
-
}
|
|
54
|
-
95% {
|
|
55
|
-
box-shadow: var(--scroll-view-bg-color) 0px 0px
|
|
56
|
-
var(--scroll-view-fading-edge-length)
|
|
57
|
-
var(--scroll-view-fading-edge-length);
|
|
58
|
-
}
|
|
59
|
-
100% {
|
|
60
|
-
box-shadow: transparent 0px 0px 0px 0px;
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
32
|
</style>
|
|
64
33
|
<div
|
|
65
34
|
class="mask placeholder-dom"
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lynx-js/web-elements",
|
|
3
|
-
"version": "0.12.
|
|
3
|
+
"version": "0.12.6",
|
|
4
4
|
"private": false,
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -138,8 +138,8 @@
|
|
|
138
138
|
"markdown-it": "^14.1.0"
|
|
139
139
|
},
|
|
140
140
|
"devDependencies": {
|
|
141
|
-
"@playwright/test": "^1.
|
|
142
|
-
"@rsbuild/core": "2.
|
|
141
|
+
"@playwright/test": "^1.61.1",
|
|
142
|
+
"@rsbuild/core": "2.1.4",
|
|
143
143
|
"@rsbuild/plugin-source-build": "1.0.5",
|
|
144
144
|
"@types/markdown-it": "^14.1.1",
|
|
145
145
|
"nyc": "^17.1.0",
|
|
@@ -86,13 +86,43 @@ scroll-view[scroll-orientation="horizontal"][enable-scroll="false"] {
|
|
|
86
86
|
https://chromestatus.com/feature/6752840701706240 It notes that this feature is actively implementing in webkit and gecko.
|
|
87
87
|
chrome 115, firefox no, safari no
|
|
88
88
|
*/
|
|
89
|
+
@keyframes scrollViewTopFading {
|
|
90
|
+
0% {
|
|
91
|
+
box-shadow: transparent 0px 0px 0px 0px;
|
|
92
|
+
}
|
|
93
|
+
5% {
|
|
94
|
+
box-shadow: var(--scroll-view-bg-color) 0px 0px
|
|
95
|
+
var(--scroll-view-fading-edge-length)
|
|
96
|
+
var(--scroll-view-fading-edge-length);
|
|
97
|
+
}
|
|
98
|
+
100% {
|
|
99
|
+
box-shadow: var(--scroll-view-bg-color) 0px 0px
|
|
100
|
+
var(--scroll-view-fading-edge-length)
|
|
101
|
+
var(--scroll-view-fading-edge-length);
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
@keyframes scrollViewBotFading {
|
|
105
|
+
0% {
|
|
106
|
+
box-shadow: var(--scroll-view-bg-color) 0px 0px
|
|
107
|
+
var(--scroll-view-fading-edge-length)
|
|
108
|
+
var(--scroll-view-fading-edge-length);
|
|
109
|
+
}
|
|
110
|
+
95% {
|
|
111
|
+
box-shadow: var(--scroll-view-bg-color) 0px 0px
|
|
112
|
+
var(--scroll-view-fading-edge-length)
|
|
113
|
+
var(--scroll-view-fading-edge-length);
|
|
114
|
+
}
|
|
115
|
+
100% {
|
|
116
|
+
box-shadow: transparent 0px 0px 0px 0px;
|
|
117
|
+
}
|
|
118
|
+
}
|
|
89
119
|
scroll-view[fading-edge-length]::part(top-fade-mask) {
|
|
90
120
|
top: 0;
|
|
91
|
-
animation-name:
|
|
121
|
+
animation-name: scrollViewTopFading;
|
|
92
122
|
}
|
|
93
123
|
scroll-view[fading-edge-length]::part(bot-fade-mask) {
|
|
94
124
|
bottom: 0;
|
|
95
|
-
animation-name:
|
|
125
|
+
animation-name: scrollViewBotFading;
|
|
96
126
|
}
|
|
97
127
|
scroll-view[fading-edge-length]::part(top-fade-mask),
|
|
98
128
|
scroll-view[fading-edge-length]::part(bot-fade-mask) {
|