@lynx-js/web-elements 0.12.3 → 0.12.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 +12 -0
- package/dist/element-reactive/component.js +6 -4
- package/dist/elements/XAudioTT/XAudioTT.js +28 -11
- package/dist/elements/htmlTemplates.d.ts +1 -1
- package/dist/elements/htmlTemplates.js +0 -31
- package/package.json +4 -4
- 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.5
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Fix web element compatibility issues surfaced by Playwright 1.61 snapshots. ([#2898](https://github.com/lynx-family/lynx-stack/pull/2898))
|
|
8
|
+
|
|
9
|
+
## 0.12.4
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- Preserve custom element false-attribute filtering metadata when applying the component decorator. ([#2603](https://github.com/lynx-family/lynx-stack/pull/2603))
|
|
14
|
+
|
|
3
15
|
## 0.12.3
|
|
4
16
|
|
|
5
17
|
### Patch Changes
|
|
@@ -11,6 +11,7 @@ export function Component(tag, attributeReactiveClassesOptional, template) {
|
|
|
11
11
|
let templateElement;
|
|
12
12
|
const attributeReactiveClasses = attributeReactiveClassesOptional.filter((e) => Boolean(e));
|
|
13
13
|
return (target, { addInitializer }) => {
|
|
14
|
+
var _a;
|
|
14
15
|
const observedStyleProperties = new Set([
|
|
15
16
|
...attributeReactiveClasses
|
|
16
17
|
.filter((e) => e.observedCSSProperties)
|
|
@@ -20,7 +21,7 @@ export function Component(tag, attributeReactiveClassesOptional, template) {
|
|
|
20
21
|
// @ts-ignore
|
|
21
22
|
class CustomElement extends target {
|
|
22
23
|
static registerPlugin(reactiveClass) {
|
|
23
|
-
|
|
24
|
+
_a.observedAttributes.push(...reactiveClass.observedAttributes);
|
|
24
25
|
if (reactiveClass.observedCSSProperties) {
|
|
25
26
|
for (const property of reactiveClass.observedCSSProperties) {
|
|
26
27
|
observedStyleProperties.add(property);
|
|
@@ -83,7 +84,7 @@ export function Component(tag, attributeReactiveClassesOptional, template) {
|
|
|
83
84
|
/** handle attribute='false' */
|
|
84
85
|
setAttribute(qualifiedName, value) {
|
|
85
86
|
if (value.toString() === 'false'
|
|
86
|
-
&& !
|
|
87
|
+
&& !_a.notToFilterFalseAttributes?.has(qualifiedName)
|
|
87
88
|
&& !qualifiedName.startsWith('data-')) {
|
|
88
89
|
this.removeAttribute(qualifiedName);
|
|
89
90
|
return;
|
|
@@ -94,7 +95,7 @@ export function Component(tag, attributeReactiveClassesOptional, template) {
|
|
|
94
95
|
const attributes = this.attributes;
|
|
95
96
|
for (let index = 0, attr; (attr = attributes.item(index)); index++) {
|
|
96
97
|
if (attr.value === 'false'
|
|
97
|
-
&& !
|
|
98
|
+
&& !_a.notToFilterFalseAttributes?.has(attr.name)
|
|
98
99
|
&& !attr.name.startsWith('data-')) {
|
|
99
100
|
this.removeAttributeNode(attr);
|
|
100
101
|
}
|
|
@@ -105,7 +106,7 @@ export function Component(tag, attributeReactiveClassesOptional, template) {
|
|
|
105
106
|
attributeChangedCallback(name, oldValue, newValue) {
|
|
106
107
|
super.attributeChangedCallback
|
|
107
108
|
&& super.attributeChangedCallback(name, oldValue, newValue);
|
|
108
|
-
if (!
|
|
109
|
+
if (!_a.notToFilterFalseAttributes?.has(name)
|
|
109
110
|
&& !name.startsWith('data-')) {
|
|
110
111
|
if (oldValue === 'false')
|
|
111
112
|
oldValue = null;
|
|
@@ -219,6 +220,7 @@ export function Component(tag, attributeReactiveClassesOptional, template) {
|
|
|
219
220
|
}
|
|
220
221
|
}
|
|
221
222
|
}
|
|
223
|
+
_a = CustomElement;
|
|
222
224
|
addInitializer(() => {
|
|
223
225
|
customElements.define(tag, CustomElement);
|
|
224
226
|
});
|
|
@@ -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: '',
|
|
@@ -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.5",
|
|
4
4
|
"private": false,
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -138,9 +138,9 @@
|
|
|
138
138
|
"markdown-it": "^14.1.0"
|
|
139
139
|
},
|
|
140
140
|
"devDependencies": {
|
|
141
|
-
"@playwright/test": "^1.
|
|
142
|
-
"@rsbuild/core": "
|
|
143
|
-
"@rsbuild/plugin-source-build": "1.0.
|
|
141
|
+
"@playwright/test": "^1.61.1",
|
|
142
|
+
"@rsbuild/core": "2.0.11",
|
|
143
|
+
"@rsbuild/plugin-source-build": "1.0.5",
|
|
144
144
|
"@types/markdown-it": "^14.1.1",
|
|
145
145
|
"nyc": "^17.1.0",
|
|
146
146
|
"tslib": "^2.8.1",
|
|
@@ -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) {
|