@lynx-js/web-elements 0.2.4

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.
Files changed (204) hide show
  1. package/CHANGELOG.md +323 -0
  2. package/LICENSE.txt +202 -0
  3. package/Notice.txt +1 -0
  4. package/README.md +47 -0
  5. package/dist/LynxWrapper/LynxWrapper.d.ts +2 -0
  6. package/dist/LynxWrapper/LynxWrapper.js +27 -0
  7. package/dist/LynxWrapper/index.d.ts +1 -0
  8. package/dist/LynxWrapper/index.js +2 -0
  9. package/dist/ScrollView/FadeEdgeLengthAttribute.d.ts +10 -0
  10. package/dist/ScrollView/FadeEdgeLengthAttribute.js +43 -0
  11. package/dist/ScrollView/ScrollAttributes.d.ts +8 -0
  12. package/dist/ScrollView/ScrollAttributes.js +83 -0
  13. package/dist/ScrollView/ScrollIntoView.d.ts +9 -0
  14. package/dist/ScrollView/ScrollIntoView.js +71 -0
  15. package/dist/ScrollView/ScrollView.d.ts +31 -0
  16. package/dist/ScrollView/ScrollView.js +185 -0
  17. package/dist/ScrollView/ScrollViewEvents.d.ts +9 -0
  18. package/dist/ScrollView/ScrollViewEvents.js +146 -0
  19. package/dist/ScrollView/index.d.ts +1 -0
  20. package/dist/ScrollView/index.js +2 -0
  21. package/dist/XAudioTT/XAudioAttribute.d.ts +7 -0
  22. package/dist/XAudioTT/XAudioAttribute.js +93 -0
  23. package/dist/XAudioTT/XAudioEvents.d.ts +8 -0
  24. package/dist/XAudioTT/XAudioEvents.js +116 -0
  25. package/dist/XAudioTT/XAudioTT.d.ts +46 -0
  26. package/dist/XAudioTT/XAudioTT.js +183 -0
  27. package/dist/XAudioTT/index.d.ts +1 -0
  28. package/dist/XAudioTT/index.js +2 -0
  29. package/dist/XAudioTT/utils.d.ts +19 -0
  30. package/dist/XAudioTT/utils.js +66 -0
  31. package/dist/XCanvas/CanvasAttributes.d.ts +12 -0
  32. package/dist/XCanvas/CanvasAttributes.js +78 -0
  33. package/dist/XCanvas/XCanvas.d.ts +5 -0
  34. package/dist/XCanvas/XCanvas.js +32 -0
  35. package/dist/XCanvas/index.d.ts +1 -0
  36. package/dist/XCanvas/index.js +2 -0
  37. package/dist/XFoldViewNg/XFoldviewHeaderNg.d.ts +2 -0
  38. package/dist/XFoldViewNg/XFoldviewHeaderNg.js +32 -0
  39. package/dist/XFoldViewNg/XFoldviewHeaderNgFeatures.d.ts +9 -0
  40. package/dist/XFoldViewNg/XFoldviewHeaderNgFeatures.js +32 -0
  41. package/dist/XFoldViewNg/XFoldviewNg.d.ts +11 -0
  42. package/dist/XFoldViewNg/XFoldviewNg.js +52 -0
  43. package/dist/XFoldViewNg/XFoldviewNgEvents.d.ts +7 -0
  44. package/dist/XFoldViewNg/XFoldviewNgEvents.js +55 -0
  45. package/dist/XFoldViewNg/XFoldviewSlotDragNg.d.ts +2 -0
  46. package/dist/XFoldViewNg/XFoldviewSlotDragNg.js +30 -0
  47. package/dist/XFoldViewNg/XFoldviewSlotNg.d.ts +2 -0
  48. package/dist/XFoldViewNg/XFoldviewSlotNg.js +32 -0
  49. package/dist/XFoldViewNg/XFoldviewSlotNgTouchEventsHandler.d.ts +7 -0
  50. package/dist/XFoldViewNg/XFoldviewSlotNgTouchEventsHandler.js +105 -0
  51. package/dist/XFoldViewNg/XFoldviewToolbarNg.d.ts +2 -0
  52. package/dist/XFoldViewNg/XFoldviewToolbarNg.js +30 -0
  53. package/dist/XFoldViewNg/index.d.ts +5 -0
  54. package/dist/XFoldViewNg/index.js +6 -0
  55. package/dist/XImage/DropShadow.d.ts +6 -0
  56. package/dist/XImage/DropShadow.js +30 -0
  57. package/dist/XImage/FilterImage.d.ts +2 -0
  58. package/dist/XImage/FilterImage.js +31 -0
  59. package/dist/XImage/ImageEvents.d.ts +6 -0
  60. package/dist/XImage/ImageEvents.js +68 -0
  61. package/dist/XImage/ImageSrc.d.ts +7 -0
  62. package/dist/XImage/ImageSrc.js +61 -0
  63. package/dist/XImage/XImage.d.ts +2 -0
  64. package/dist/XImage/XImage.js +30 -0
  65. package/dist/XImage/index.d.ts +2 -0
  66. package/dist/XImage/index.js +3 -0
  67. package/dist/XInput/InputBaseAttributes.d.ts +9 -0
  68. package/dist/XInput/InputBaseAttributes.js +99 -0
  69. package/dist/XInput/Placeholder.d.ts +6 -0
  70. package/dist/XInput/Placeholder.js +60 -0
  71. package/dist/XInput/XInput.d.ts +28 -0
  72. package/dist/XInput/XInput.js +129 -0
  73. package/dist/XInput/XInputAttribute.d.ts +9 -0
  74. package/dist/XInput/XInputAttribute.js +52 -0
  75. package/dist/XInput/XInputEvents.d.ts +6 -0
  76. package/dist/XInput/XInputEvents.js +111 -0
  77. package/dist/XInput/index.d.ts +1 -0
  78. package/dist/XInput/index.js +2 -0
  79. package/dist/XList/ListItem.d.ts +2 -0
  80. package/dist/XList/ListItem.js +28 -0
  81. package/dist/XList/XList.d.ts +52 -0
  82. package/dist/XList/XList.js +257 -0
  83. package/dist/XList/XListAttributes.d.ts +8 -0
  84. package/dist/XList/XListAttributes.js +50 -0
  85. package/dist/XList/XListEvents.d.ts +7 -0
  86. package/dist/XList/XListEvents.js +356 -0
  87. package/dist/XList/index.d.ts +2 -0
  88. package/dist/XList/index.js +3 -0
  89. package/dist/XOverlayNg/XOverlayAttributes.d.ts +8 -0
  90. package/dist/XOverlayNg/XOverlayAttributes.js +80 -0
  91. package/dist/XOverlayNg/XOverlayNg.d.ts +2 -0
  92. package/dist/XOverlayNg/XOverlayNg.js +45 -0
  93. package/dist/XOverlayNg/index.d.ts +1 -0
  94. package/dist/XOverlayNg/index.js +2 -0
  95. package/dist/XRefreshView/XRefreshFooter.d.ts +3 -0
  96. package/dist/XRefreshView/XRefreshFooter.js +35 -0
  97. package/dist/XRefreshView/XRefreshHeader.d.ts +3 -0
  98. package/dist/XRefreshView/XRefreshHeader.js +35 -0
  99. package/dist/XRefreshView/XRefreshSubElementIntersectionObserver.d.ts +16 -0
  100. package/dist/XRefreshView/XRefreshSubElementIntersectionObserver.js +52 -0
  101. package/dist/XRefreshView/XRefreshView.d.ts +13 -0
  102. package/dist/XRefreshView/XRefreshView.js +125 -0
  103. package/dist/XRefreshView/XRefreshViewEventsEmitter.d.ts +8 -0
  104. package/dist/XRefreshView/XRefreshViewEventsEmitter.js +246 -0
  105. package/dist/XRefreshView/index.d.ts +3 -0
  106. package/dist/XRefreshView/index.js +4 -0
  107. package/dist/XSvg/XSvg.d.ts +8 -0
  108. package/dist/XSvg/XSvg.js +80 -0
  109. package/dist/XSvg/index.d.ts +1 -0
  110. package/dist/XSvg/index.js +2 -0
  111. package/dist/XSwiper/SwiperItem.d.ts +2 -0
  112. package/dist/XSwiper/SwiperItem.js +28 -0
  113. package/dist/XSwiper/XSwiper.d.ts +14 -0
  114. package/dist/XSwiper/XSwiper.js +231 -0
  115. package/dist/XSwiper/XSwiperAutoScroll.d.ts +8 -0
  116. package/dist/XSwiper/XSwiperAutoScroll.js +63 -0
  117. package/dist/XSwiper/XSwiperCircular.d.ts +8 -0
  118. package/dist/XSwiper/XSwiperCircular.js +191 -0
  119. package/dist/XSwiper/XSwiperEvents.d.ts +8 -0
  120. package/dist/XSwiper/XSwiperEvents.js +144 -0
  121. package/dist/XSwiper/XSwiperIndicator.d.ts +9 -0
  122. package/dist/XSwiper/XSwiperIndicator.js +118 -0
  123. package/dist/XSwiper/index.d.ts +2 -0
  124. package/dist/XSwiper/index.js +3 -0
  125. package/dist/XText/InlineImage.d.ts +11 -0
  126. package/dist/XText/InlineImage.js +56 -0
  127. package/dist/XText/InlineText.d.ts +5 -0
  128. package/dist/XText/InlineText.js +30 -0
  129. package/dist/XText/InlineTruncation.d.ts +5 -0
  130. package/dist/XText/InlineTruncation.js +42 -0
  131. package/dist/XText/RawText.d.ts +7 -0
  132. package/dist/XText/RawText.js +54 -0
  133. package/dist/XText/XText.d.ts +5 -0
  134. package/dist/XText/XText.js +49 -0
  135. package/dist/XText/XTextTruncation.d.ts +11 -0
  136. package/dist/XText/XTextTruncation.js +604 -0
  137. package/dist/XText/index.d.ts +5 -0
  138. package/dist/XText/index.js +6 -0
  139. package/dist/XTextarea/Placeholder.d.ts +7 -0
  140. package/dist/XTextarea/Placeholder.js +59 -0
  141. package/dist/XTextarea/TextareaBaseAttributes.d.ts +6 -0
  142. package/dist/XTextarea/TextareaBaseAttributes.js +70 -0
  143. package/dist/XTextarea/XTextarea.d.ts +21 -0
  144. package/dist/XTextarea/XTextarea.js +101 -0
  145. package/dist/XTextarea/XTextareaAttributes.d.ts +6 -0
  146. package/dist/XTextarea/XTextareaAttributes.js +81 -0
  147. package/dist/XTextarea/XTextareaEvents.d.ts +6 -0
  148. package/dist/XTextarea/XTextareaEvents.js +111 -0
  149. package/dist/XTextarea/index.d.ts +1 -0
  150. package/dist/XTextarea/index.js +2 -0
  151. package/dist/XView/BlurRadius.d.ts +7 -0
  152. package/dist/XView/BlurRadius.js +38 -0
  153. package/dist/XView/XBlurView.d.ts +2 -0
  154. package/dist/XView/XBlurView.js +29 -0
  155. package/dist/XView/XView.d.ts +4 -0
  156. package/dist/XView/XView.js +45 -0
  157. package/dist/XView/index.d.ts +2 -0
  158. package/dist/XView/index.js +3 -0
  159. package/dist/XViewpagerNg/XViewpagerItemNg.d.ts +2 -0
  160. package/dist/XViewpagerNg/XViewpagerItemNg.js +30 -0
  161. package/dist/XViewpagerNg/XViewpagerNg.d.ts +10 -0
  162. package/dist/XViewpagerNg/XViewpagerNg.js +98 -0
  163. package/dist/XViewpagerNg/XViewpagerNgEvents.d.ts +9 -0
  164. package/dist/XViewpagerNg/XViewpagerNgEvents.js +118 -0
  165. package/dist/XViewpagerNg/index.d.ts +2 -0
  166. package/dist/XViewpagerNg/index.js +3 -0
  167. package/dist/all.d.ts +16 -0
  168. package/dist/all.js +17 -0
  169. package/dist/common/Exposure.d.ts +28 -0
  170. package/dist/common/Exposure.js +193 -0
  171. package/dist/common/bindToIntersectionObserver.d.ts +1 -0
  172. package/dist/common/bindToIntersectionObserver.js +23 -0
  173. package/dist/common/commonEventInitConfiguration.d.ts +5 -0
  174. package/dist/common/commonEventInitConfiguration.js +9 -0
  175. package/dist/common/constants.d.ts +4 -0
  176. package/dist/common/constants.js +14 -0
  177. package/dist/common/convertLengthToPx.d.ts +1 -0
  178. package/dist/common/convertLengthToPx.js +25 -0
  179. package/dist/common/renameEvent.d.ts +1 -0
  180. package/dist/common/renameEvent.js +6 -0
  181. package/dist/common/throttle.d.ts +4 -0
  182. package/dist/common/throttle.js +40 -0
  183. package/dist/index.d.ts +4 -0
  184. package/dist/index.js +8 -0
  185. package/dist/lazy.d.ts +1 -0
  186. package/dist/lazy.js +106 -0
  187. package/index.css +19 -0
  188. package/package.json +110 -0
  189. package/src/LynxWrapper/lynx-wrapper.css +12 -0
  190. package/src/ScrollView/scroll-view.css +121 -0
  191. package/src/XAudioTT/x-audio-tt.css +3 -0
  192. package/src/XCanvas/x-canvas.css +16 -0
  193. package/src/XFoldViewNg/x-foldview-ng.css +80 -0
  194. package/src/XImage/x-image.css +82 -0
  195. package/src/XInput/x-input.css +48 -0
  196. package/src/XList/x-list.css +147 -0
  197. package/src/XOverlayNg/x-overlay-ng.css +56 -0
  198. package/src/XRefreshView/x-refresh-view.css +61 -0
  199. package/src/XSvg/x-svg.css +10 -0
  200. package/src/XSwiper/x-swiper.css +319 -0
  201. package/src/XText/x-text.css +272 -0
  202. package/src/XTextarea/x-textarea.css +49 -0
  203. package/src/XViewpagerNg/x-viewpager-ng.css +68 -0
  204. package/src/common-css/linear.css +386 -0
package/CHANGELOG.md ADDED
@@ -0,0 +1,323 @@
1
+ # @lynx-js/web-elements
2
+
3
+ ## 0.2.4
4
+
5
+ ### Patch Changes
6
+
7
+ - 1abf8f0: feat: `inline-text` is deprecated, now you can use `x-text` instead in `x-text`.
8
+ - 1abf8f0: fix: Removed the list-item style `contain: strict`. Previously we thought it would affect `content-visibility: auto`, but it turns out that this is wrong.
9
+
10
+ Now, you don't need to specify the width and height of list-item, it will be stretched by the child elements.
11
+
12
+ - 1abf8f0: fix: do truncation layout calculation after fonts loaded
13
+ - 1abf8f0: refractor: x-foldview-ng gesture use pageX&pageY to replace the screenX&screenY
14
+ - 1abf8f0: fix: x-input should inherit color style
15
+ - 1abf8f0: feat: `inline-image` is deprecated, now you can use `x-image` instead in `x-text`.
16
+
17
+ ## 0.2.3
18
+
19
+ ### Patch Changes
20
+
21
+ - 5a19264: feat: x-canvas is deprecated.
22
+
23
+ Since other platforms do not implement it and do not plan to implement it, we deprecate it.
24
+
25
+ - b26ed57: fix: x-foldview-ng \_\_headershowing add compatibility criteria for Android WebView.
26
+ - 1d4f831: fix: the x-input should inherit margin properties
27
+
28
+ ## 0.2.2
29
+
30
+ ### Patch Changes
31
+
32
+ - 7ac2b1c: fix: remote `x-overlay-ng #dialog[open] { display: contents; }` && add top for chrome87.
33
+
34
+ dialog[open].style.display is actually not allowed to be set to contents, it is always block.
35
+ But in chrome87 it is allowed to be set to contents by mistake, which will cause it to not occupy any space, so we remove `display: contents;` of x-overlay-ng.
36
+
37
+ - d17e7e5: fix: add `position: fixed` for x-overlay-ng dialog[open].
38
+
39
+ The `position` property of the x-overlay-ng dialog (when open) defaults to `absolute` other than `fixed` on some devices.
40
+
41
+ ## 0.2.1
42
+
43
+ ### Patch Changes
44
+
45
+ - 46a18cd: chore: fix scrollbar style for scroll-view
46
+ - f068dce: fix: rename vertical property to isVertical for x-swiepr
47
+
48
+ ## 0.2.0
49
+
50
+ ### Minor Changes
51
+
52
+ - 49f7f0b: break: remove `bounces` support for <scroll-view>
53
+
54
+ We removed the bounces support for scroll-view.
55
+
56
+ ### Patch Changes
57
+
58
+ - 0c6e1bb: fix: set width&height with DPR
59
+ - a72b50f: fix: set background-color inherit of x-input::part(input), otherwise its background may cover its parent node.
60
+
61
+ ## 0.1.6
62
+
63
+ ### Patch Changes
64
+
65
+ - 5649861: fix(web): x-image the style of position, left, right, top, bottom should be inherit only when auto-size.
66
+ - 65ac6a2: fix: add transform, opacity, z-index, filter CSS Properties inherit when x-image auto-size is set.
67
+ - 875cfd3: fix(web): x-textarea is supposed to be not resizeable
68
+
69
+ ## 0.1.5
70
+
71
+ ### Patch Changes
72
+
73
+ - b2fd603: fix(web): pin the `justify-content` of x-swiper to be `flex-start`
74
+ - 3ebcb99: fix(web): the first child of `<x-overlay-ng />` should have `position: absolute`.
75
+
76
+ On Safari 16.1, We should have `position: absolute` to show the overlay content correctly.
77
+
78
+ The parent `<dialog />` already have `position: fixed`, therefore we could use a absolute position.
79
+
80
+ - c19bba8: fix: the default justify-content value should be `flex-start`
81
+
82
+ ## 0.1.4
83
+
84
+ ### Patch Changes
85
+
86
+ - 5c3f447: fix(web): x-image::part(img)img style position, tip, left, right, bottom change to be inherit, to fix the problem that x-image setting location does not work.
87
+ - addc058: fix: incorrect linear detect after chrome 130
88
+
89
+ see https://chromestatus.com/feature/5242724333387776
90
+
91
+ - 90131cc: feat(web): x-text support scrollIntoView method.
92
+ - 75877ed: fix(web): the scroll-view is always a linear container
93
+
94
+ After this commit, we don't need to use `@container` queries to apply linear container styles for `scroll-view`'s kids
95
+
96
+ we use type selector directly.
97
+
98
+ ## 0.1.3
99
+
100
+ ### Patch Changes
101
+
102
+ - 9b99484: fix: blank inline-text in color:linear-gradient text element
103
+
104
+ Before this commit, those parent text element with style `color:linear-gradient()` will cause empty content in children inline-text element
105
+
106
+ - f650509: fix: browser compatibility issues
107
+
108
+ 1. safari 17.2~18.0 issue
109
+
110
+ `display:linear` doesn't work
111
+
112
+ 2. chrome < 99 issue
113
+
114
+ text may be blank on these browsers
115
+
116
+ ## 0.1.2
117
+
118
+ ### Patch Changes
119
+
120
+ - 6a97751: fix: x-folview-ng x-axis scrolling on safari/firefox
121
+ - 55f73a2: fix: x-foldview-ng block y-axis js scroll for x-axis gesture
122
+
123
+ ## 0.1.1
124
+
125
+ ### Patch Changes
126
+
127
+ - ddc8c5a: fix(web): add @supports of @container to avoid crash less chrome 117.
128
+
129
+ ## 0.1.0
130
+
131
+ ### Minor Changes
132
+
133
+ - 3547621: feat(web): use `<lynx-wrapper/>` to replace `<div style="display:content"/>`
134
+ - bed4f24: feat(web): implement <x-list> with list-type="single"
135
+
136
+ ## 1. RFC
137
+
138
+ https://github.com/lynx-wg/lynx-stack/issues/106
139
+
140
+ ## 2. Implementation differences with RFC
141
+
142
+ ### paging-enabled
143
+
144
+ deprecated, no need to implement
145
+
146
+ ### layoutcomplete
147
+
148
+ Triggered only after the first screen because using contentvisibilityautostatechange.
149
+
150
+ Here, a setTimeout is set to trigger layoutcomplete 100ms after the content-visible property of **content** changes.
151
+
152
+ > This is because content is the parent container of list-item, and content is always visible before list-item.
153
+ > We cannot obtain the timing of all the successfully visible list-items on the screen, so 100ms is used to delay this behavior.
154
+
155
+ ### event-scrolltoedge
156
+
157
+ split bindscrolltoupperedge and bindscrooltolowerdge.
158
+
159
+ ### event-scrolltoupper/lower
160
+
161
+ Can be used with upper/lower-threshold-item-count.
162
+
163
+ Attention, when the number of x-list children changes, scrolltoupper/lower will be re-triggered (if the new node is on the screen).
164
+
165
+ ### getVisibleCells, layoutcomplete
166
+
167
+ The returned cells may be an empty array, because there is a high probability that the contentvisibilityautostatechange event of list-item will not be captured when the first screen is displayed.
168
+
169
+ ## 3. Tests not implemented
170
+
171
+ ### HTML Tests
172
+
173
+ 1. event-layoutcomplete skipped webkit, firefox due to contentvisibilityautostatechange not propagate
174
+ 2. get-visible-cells skipped webkit, firefox due to contentvisibilityautostatechange not propagate
175
+
176
+ ### React Tests
177
+
178
+ 1. lynx.createQuery not supported.
179
+
180
+ - b323923: feat(web): support **ReplaceElement, **CreateImage, \_\_CreateScrollView
181
+ - 39cf3ae: feat: improve performance for supporting linear layout
182
+
183
+ Before this commit, we'll use `getComputedStyle()` to find out if a dom is a linear container.
184
+
185
+ After this commit, we'll use the css variable cyclic toggle pattern and `@container style()`
186
+
187
+ This feature requires **Chrome 111, Safari 18**.
188
+
189
+ We'll provide a fallback implementation for firefox and legacy browsers.
190
+
191
+ After this commit, your `flex-direction`, `flex-shrink`, `flex`, `flex-grow`, `flex-basis` will be transformed to a css variable expression.
192
+
193
+ - 2e0a780: feat: move LinearContainer to web-elements-compat
194
+
195
+ In this commit, we're going to remove all LinearContainer Class from custom elements.
196
+
197
+ It now relies on the `@container style(){}`, which is supported by chrome 111 and safari 18.
198
+
199
+ For compating usage, `@lynx-js/web-elements-compat/LinearContainer` is provided.
200
+
201
+ ```javascript
202
+ import '@lynx-js/web-elements-compat/LinearContainer';
203
+ import '@lynx-js/web-elements/all';
204
+ ```
205
+
206
+ - f8d1d98: break: rename the `blur` and `focus` event to `lynxblur` and `lynxfocus` for x-input element
207
+
208
+ To avoid sending duplicated events for focus, we'll rename them.
209
+
210
+ **This is a breaking change**
211
+
212
+ - 81be6cf: feat(web): support `load` and `error` events for x-image and filter-image
213
+ fix #66
214
+ - f8d1d98: feat: allow custom elements to be lazy loaded
215
+
216
+ After this commit, we'll allow developer to define custom elements lazy.
217
+
218
+ A new api `onElementLoad` will be added to the `LynxCard`.
219
+
220
+ Once a new element is creating, it will be called with the tag name.
221
+
222
+ There is also a simple way to use this feature
223
+
224
+ ```javascript
225
+ import { LynxCard } from '@lynx-js/web-core';
226
+ import { loadElement } from '@lynx-js/web-elements/lazy';
227
+ import '@lynx-js/web-elements/index.css';
228
+ import '@lynx-js/web-core/index.css';
229
+ import './index.css';
230
+
231
+ const lynxcard = new LynxCard({
232
+ ...beforeConfigs,
233
+ onElementLoad: loadElement,
234
+ });
235
+ ```
236
+
237
+ - 5018d8f: feat: export more objects of web-elements
238
+ - 8c6eeb9: fix(web): rename x-swiper-itrm to swiper-item
239
+ - 1fe49a2: feat(web): add custom element x-audio-tt
240
+
241
+ ## The behavior is different from the native x-audio-tt:
242
+
243
+ - When src changes, resources will not be loaded immediately. Resources will only be loaded when the play and prepare methods are triggered.
244
+
245
+ > This is because resource loading and decoding are two steps in native lynx, while only resource loading can be controlled in web.
246
+ > So loading and decoding are handled on one side.
247
+
248
+ - The code returned by the binderror event does not include -4
249
+
250
+ ## Unimplemented properties:
251
+
252
+ - autoplay
253
+ - playertype
254
+ - experimental-ios-async-prepare
255
+
256
+ ## Unimplemented methods:
257
+
258
+ - requestFocus
259
+ - releaseFocus
260
+
261
+ ### Patch Changes
262
+
263
+ - 987da15: fix: x-foldview-ng scrolling behavior
264
+
265
+ - fix scrolling behavior on its sub dom-tree has x-refresh-view
266
+ - fix scrolling behavior on its sub dom-tree has x-viewpager-ng
267
+
268
+ - 3e66349: fix: x-viewpager bindchange use scrollEnd to trigger; bindoffsetchange use scroll to trigger.
269
+ - 2b7a4fe: fix: exposure should track the interaction with the closest scroll able ancestor
270
+ - 461d965: fix(web): swiper specifies current and bindchange, may cause jitter problem and some layout problems.
271
+
272
+ 1. swiper specifies current and bindchange, may cause jitter problem.
273
+ 2. When there are current not 0 && circular, the first layout is not correct.
274
+ 3. When there are circular mode='carousel' attributes, the first paint position is not correct.
275
+ 4. swiper-item with border is not right, should use offsetWidth/offsetHeight.
276
+
277
+ - 7ee0dc1: fix(web): rename swiper-item to x-swiper-item
278
+ - 7c752d9: fix(web): two bugs of x-textarea and x-input:
279
+
280
+ 1. When inputting Chinese characters, you need to send an input event again after the input is completed.
281
+
282
+ 2. When the business input event is bound to the input event inside web-elements, the input event will be triggered twice by mistake, so stopImmediatePropagation needs to be prevented in the form
283
+
284
+ - 29e4684: fix: list use debounce scroll in safari instead of scrollend
285
+ - 33691cd: fix(web): the lynx-wrapper should not have any impact on layout and style
286
+
287
+ Before this commit, there exists some css selectors like `custome-element > another-custom-element`
288
+
289
+ This may cause an issue of the direct child is a `lynx-wrapper`
290
+
291
+ We submit this commit to fix it.
292
+
293
+ - 2047658: fix: exposure
294
+
295
+ fix the error on triggering exposure event
296
+
297
+ - 917e496: fix: x-viewpager-item-ng should not respond to position:absoulte
298
+
299
+ add `position:relateive !important` for it.
300
+
301
+ - 532380d: fix: ::part()::after selector not work on chrome 100
302
+ - a41965d: fix: foldview horizontal scroll in safari
303
+ - a7a222b: fix(web): x-view-pager-ng
304
+
305
+ 1. select-index, initial-select-index should only selectTab if the element has a connectedCallback.
306
+ 2. add scroll-snap-stop to x-view-pager-ng, to slide only one element at one time.
307
+
308
+ - c0a482a: fix(web): split flex, because flex-basis of undefined will cause the property to invalid
309
+ - 314cb44: fix(web): x-textarea replace blur,focus with lynxblur,lynxfocus.
310
+ - e0854a8: fix(web): add scroll-snap-stop of viewpager-item
311
+ - e86bba0: fix(web): do not remove `"false"` value for dataset attributes
312
+
313
+ fix #77
314
+
315
+ - f0a50b6: chore: add tolerence for ios 14
316
+
317
+ close #81
318
+
319
+ - Updated dependencies [2e0a780]
320
+ - Updated dependencies [a1d0070]
321
+ - Updated dependencies [e170052]
322
+ - Updated dependencies [e86bba0]
323
+ - @lynx-js/web-elements-reactive@0.1.0
package/LICENSE.txt ADDED
@@ -0,0 +1,202 @@
1
+
2
+ Apache License
3
+ Version 2.0, January 2004
4
+ http://www.apache.org/licenses/
5
+
6
+ TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
7
+
8
+ 1. Definitions.
9
+
10
+ "License" shall mean the terms and conditions for use, reproduction,
11
+ and distribution as defined by Sections 1 through 9 of this document.
12
+
13
+ "Licensor" shall mean the copyright owner or entity authorized by
14
+ the copyright owner that is granting the License.
15
+
16
+ "Legal Entity" shall mean the union of the acting entity and all
17
+ other entities that control, are controlled by, or are under common
18
+ control with that entity. For the purposes of this definition,
19
+ "control" means (i) the power, direct or indirect, to cause the
20
+ direction or management of such entity, whether by contract or
21
+ otherwise, or (ii) ownership of fifty percent (50%) or more of the
22
+ outstanding shares, or (iii) beneficial ownership of such entity.
23
+
24
+ "You" (or "Your") shall mean an individual or Legal Entity
25
+ exercising permissions granted by this License.
26
+
27
+ "Source" form shall mean the preferred form for making modifications,
28
+ including but not limited to software source code, documentation
29
+ source, and configuration files.
30
+
31
+ "Object" form shall mean any form resulting from mechanical
32
+ transformation or translation of a Source form, including but
33
+ not limited to compiled object code, generated documentation,
34
+ and conversions to other media types.
35
+
36
+ "Work" shall mean the work of authorship, whether in Source or
37
+ Object form, made available under the License, as indicated by a
38
+ copyright notice that is included in or attached to the work
39
+ (an example is provided in the Appendix below).
40
+
41
+ "Derivative Works" shall mean any work, whether in Source or Object
42
+ form, that is based on (or derived from) the Work and for which the
43
+ editorial revisions, annotations, elaborations, or other modifications
44
+ represent, as a whole, an original work of authorship. For the purposes
45
+ of this License, Derivative Works shall not include works that remain
46
+ separable from, or merely link (or bind by name) to the interfaces of,
47
+ the Work and Derivative Works thereof.
48
+
49
+ "Contribution" shall mean any work of authorship, including
50
+ the original version of the Work and any modifications or additions
51
+ to that Work or Derivative Works thereof, that is intentionally
52
+ submitted to Licensor for inclusion in the Work by the copyright owner
53
+ or by an individual or Legal Entity authorized to submit on behalf of
54
+ the copyright owner. For the purposes of this definition, "submitted"
55
+ means any form of electronic, verbal, or written communication sent
56
+ to the Licensor or its representatives, including but not limited to
57
+ communication on electronic mailing lists, source code control systems,
58
+ and issue tracking systems that are managed by, or on behalf of, the
59
+ Licensor for the purpose of discussing and improving the Work, but
60
+ excluding communication that is conspicuously marked or otherwise
61
+ designated in writing by the copyright owner as "Not a Contribution."
62
+
63
+ "Contributor" shall mean Licensor and any individual or Legal Entity
64
+ on behalf of whom a Contribution has been received by Licensor and
65
+ subsequently incorporated within the Work.
66
+
67
+ 2. Grant of Copyright License. Subject to the terms and conditions of
68
+ this License, each Contributor hereby grants to You a perpetual,
69
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
70
+ copyright license to reproduce, prepare Derivative Works of,
71
+ publicly display, publicly perform, sublicense, and distribute the
72
+ Work and such Derivative Works in Source or Object form.
73
+
74
+ 3. Grant of Patent License. Subject to the terms and conditions of
75
+ this License, each Contributor hereby grants to You a perpetual,
76
+ worldwide, non-exclusive, no-charge, royalty-free, irrevocable
77
+ (except as stated in this section) patent license to make, have made,
78
+ use, offer to sell, sell, import, and otherwise transfer the Work,
79
+ where such license applies only to those patent claims licensable
80
+ by such Contributor that are necessarily infringed by their
81
+ Contribution(s) alone or by combination of their Contribution(s)
82
+ with the Work to which such Contribution(s) was submitted. If You
83
+ institute patent litigation against any entity (including a
84
+ cross-claim or counterclaim in a lawsuit) alleging that the Work
85
+ or a Contribution incorporated within the Work constitutes direct
86
+ or contributory patent infringement, then any patent licenses
87
+ granted to You under this License for that Work shall terminate
88
+ as of the date such litigation is filed.
89
+
90
+ 4. Redistribution. You may reproduce and distribute copies of the
91
+ Work or Derivative Works thereof in any medium, with or without
92
+ modifications, and in Source or Object form, provided that You
93
+ meet the following conditions:
94
+
95
+ (a) You must give any other recipients of the Work or
96
+ Derivative Works a copy of this License; and
97
+
98
+ (b) You must cause any modified files to carry prominent notices
99
+ stating that You changed the files; and
100
+
101
+ (c) You must retain, in the Source form of any Derivative Works
102
+ that You distribute, all copyright, patent, trademark, and
103
+ attribution notices from the Source form of the Work,
104
+ excluding those notices that do not pertain to any part of
105
+ the Derivative Works; and
106
+
107
+ (d) If the Work includes a "NOTICE" text file as part of its
108
+ distribution, then any Derivative Works that You distribute must
109
+ include a readable copy of the attribution notices contained
110
+ within such NOTICE file, excluding those notices that do not
111
+ pertain to any part of the Derivative Works, in at least one
112
+ of the following places: within a NOTICE text file distributed
113
+ as part of the Derivative Works; within the Source form or
114
+ documentation, if provided along with the Derivative Works; or,
115
+ within a display generated by the Derivative Works, if and
116
+ wherever such third-party notices normally appear. The contents
117
+ of the NOTICE file are for informational purposes only and
118
+ do not modify the License. You may add Your own attribution
119
+ notices within Derivative Works that You distribute, alongside
120
+ or as an addendum to the NOTICE text from the Work, provided
121
+ that such additional attribution notices cannot be construed
122
+ as modifying the License.
123
+
124
+ You may add Your own copyright statement to Your modifications and
125
+ may provide additional or different license terms and conditions
126
+ for use, reproduction, or distribution of Your modifications, or
127
+ for any such Derivative Works as a whole, provided Your use,
128
+ reproduction, and distribution of the Work otherwise complies with
129
+ the conditions stated in this License.
130
+
131
+ 5. Submission of Contributions. Unless You explicitly state otherwise,
132
+ any Contribution intentionally submitted for inclusion in the Work
133
+ by You to the Licensor shall be under the terms and conditions of
134
+ this License, without any additional terms or conditions.
135
+ Notwithstanding the above, nothing herein shall supersede or modify
136
+ the terms of any separate license agreement you may have executed
137
+ with Licensor regarding such Contributions.
138
+
139
+ 6. Trademarks. This License does not grant permission to use the trade
140
+ names, trademarks, service marks, or product names of the Licensor,
141
+ except as required for reasonable and customary use in describing the
142
+ origin of the Work and reproducing the content of the NOTICE file.
143
+
144
+ 7. Disclaimer of Warranty. Unless required by applicable law or
145
+ agreed to in writing, Licensor provides the Work (and each
146
+ Contributor provides its Contributions) on an "AS IS" BASIS,
147
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
148
+ implied, including, without limitation, any warranties or conditions
149
+ of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
150
+ PARTICULAR PURPOSE. You are solely responsible for determining the
151
+ appropriateness of using or redistributing the Work and assume any
152
+ risks associated with Your exercise of permissions under this License.
153
+
154
+ 8. Limitation of Liability. In no event and under no legal theory,
155
+ whether in tort (including negligence), contract, or otherwise,
156
+ unless required by applicable law (such as deliberate and grossly
157
+ negligent acts) or agreed to in writing, shall any Contributor be
158
+ liable to You for damages, including any direct, indirect, special,
159
+ incidental, or consequential damages of any character arising as a
160
+ result of this License or out of the use or inability to use the
161
+ Work (including but not limited to damages for loss of goodwill,
162
+ work stoppage, computer failure or malfunction, or any and all
163
+ other commercial damages or losses), even if such Contributor
164
+ has been advised of the possibility of such damages.
165
+
166
+ 9. Accepting Warranty or Additional Liability. While redistributing
167
+ the Work or Derivative Works thereof, You may choose to offer,
168
+ and charge a fee for, acceptance of support, warranty, indemnity,
169
+ or other liability obligations and/or rights consistent with this
170
+ License. However, in accepting such obligations, You may act only
171
+ on Your own behalf and on Your sole responsibility, not on behalf
172
+ of any other Contributor, and only if You agree to indemnify,
173
+ defend, and hold each Contributor harmless for any liability
174
+ incurred by, or claims asserted against, such Contributor by reason
175
+ of your accepting any such warranty or additional liability.
176
+
177
+ END OF TERMS AND CONDITIONS
178
+
179
+ APPENDIX: How to apply the Apache License to your work.
180
+
181
+ To apply the Apache License to your work, attach the following
182
+ boilerplate notice, with the fields enclosed by brackets "[]"
183
+ replaced with your own identifying information. (Don't include
184
+ the brackets!) The text should be enclosed in the appropriate
185
+ comment syntax for the file format. We also recommend that a
186
+ file or class name and description of purpose be included on the
187
+ same "printed page" as the copyright notice for easier
188
+ identification within third-party archives.
189
+
190
+ Copyright 2023-2024 The Lynx Authors.
191
+
192
+ Licensed under the Apache License, Version 2.0 (the "License");
193
+ you may not use this file except in compliance with the License.
194
+ You may obtain a copy of the License at
195
+
196
+ http://www.apache.org/licenses/LICENSE-2.0
197
+
198
+ Unless required by applicable law or agreed to in writing, software
199
+ distributed under the License is distributed on an "AS IS" BASIS,
200
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
201
+ See the License for the specific language governing permissions and
202
+ limitations under the License.
package/Notice.txt ADDED
@@ -0,0 +1 @@
1
+ Copyright 2023-2024 The Lynx Authors. All rights reserved.
package/README.md ADDED
@@ -0,0 +1,47 @@
1
+ # @lynx-js/web-elements
2
+
3
+ It provides the custom-element implementation of Lynx Elements in Web.
4
+
5
+ So far, support compared to Lynx Elements on the client:
6
+
7
+ | Elements | Whether support | Details |
8
+ | -------------- | --------------- | -------------------------------------------------------------------------------- |
9
+ | Elements | | |
10
+ | canvas | ❌ | No |
11
+ | image | ✅ | Full Support |
12
+ | list | ✅ | Only single layout type is supported, flow and waterfall will be supported later |
13
+ | scroll-view | ✅ | Full Support |
14
+ | text | ✅ | Full Support |
15
+ | view | ✅ | Full Support |
16
+ | X-Elements | | |
17
+ | svg | ✅ | Full Support |
18
+ | x-blur-view | ✅ | Full Support |
19
+ | x-input | ✅ | Full Support |
20
+ | x-textarea | ✅ | Full Support |
21
+ | x-swiper | ✅ | Full Support |
22
+ | x-viewpager-ng | ✅ | Full Support |
23
+ | x-foldview-ng | ✅ | Full Support |
24
+ | x-refresh-view | ✅ | Full Support |
25
+ | x-overlay-ng | ✅ | Full Support |
26
+ | x-audio-tt | ✅ | Full Support |
27
+
28
+ ## Usage
29
+
30
+ Normally, you don't need to import `@lynx-js/web-elements` directly, because the `@lynx-js/web-core` has included it.
31
+
32
+ But if you want to use it separately, you can import it like this:
33
+
34
+ ```javascript
35
+ import '@lynx-js/web-elements/all';
36
+ import '@lynx-js/web-elements/index.css';
37
+
38
+ document.body.innerHTML = `
39
+ <x-text style="font-size: 24px;font-weight: bold">
40
+ Hello lynx.
41
+ </x-text>
42
+ `;
43
+ ```
44
+
45
+ ## Document
46
+
47
+ See our website for more information.
@@ -0,0 +1,2 @@
1
+ export declare class LynxWrapper extends HTMLElement {
2
+ }
@@ -0,0 +1,27 @@
1
+ import { __esDecorate, __runInitializers } from "tslib";
2
+ /**
3
+ // Copyright 2024 The Lynx Authors. All rights reserved.
4
+ // Licensed under the Apache License Version 2.0 that can be found in the
5
+ // LICENSE file in the root directory of this source tree.
6
+ */
7
+ import { Component } from '@lynx-js/web-elements-reactive';
8
+ let LynxWrapper = (() => {
9
+ let _classDecorators = [Component('lynx-wrapper', [])];
10
+ let _classDescriptor;
11
+ let _classExtraInitializers = [];
12
+ let _classThis;
13
+ let _classSuper = HTMLElement;
14
+ var LynxWrapper = class extends _classSuper {
15
+ static { _classThis = this; }
16
+ static {
17
+ const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
18
+ __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
19
+ LynxWrapper = _classThis = _classDescriptor.value;
20
+ if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
21
+ __runInitializers(_classThis, _classExtraInitializers);
22
+ }
23
+ };
24
+ return LynxWrapper = _classThis;
25
+ })();
26
+ export { LynxWrapper };
27
+ //# sourceMappingURL=LynxWrapper.js.map
@@ -0,0 +1 @@
1
+ export { LynxWrapper } from './LynxWrapper.js';
@@ -0,0 +1,2 @@
1
+ export { LynxWrapper } from './LynxWrapper.js';
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1,10 @@
1
+ import { AttributeReactiveClass } from '@lynx-js/web-elements-reactive';
2
+ import { ScrollView } from './ScrollView.js';
3
+ export declare class FadeEdgeLengthAttribute implements InstanceType<AttributeReactiveClass<typeof ScrollView>> {
4
+ #private;
5
+ static observedAttributes: string[];
6
+ static observedCSSProperties: string[];
7
+ constructor(dom: ScrollView);
8
+ connectedCallback?(): void;
9
+ dispose(): void;
10
+ }
@@ -0,0 +1,43 @@
1
+ import { __esDecorate, __runInitializers, __setFunctionName } from "tslib";
2
+ /*
3
+ // Copyright 2024 The Lynx Authors. All rights reserved.
4
+ // Licensed under the Apache License Version 2.0 that can be found in the
5
+ // LICENSE file in the root directory of this source tree.
6
+ */
7
+ import { bindToStyle, genDomGetter, registerAttributeHandler, registerStyleChangeHandler, } from '@lynx-js/web-elements-reactive';
8
+ let FadeEdgeLengthAttribute = (() => {
9
+ let _instanceExtraInitializers = [];
10
+ let _private_handleFadingEdgeLength_decorators;
11
+ let _private_handleFadingEdgeLength_initializers = [];
12
+ let _private_handleFadingEdgeLength_extraInitializers = [];
13
+ let _private_backgroundColorToVariable_decorators;
14
+ let _private_backgroundColorToVariable_descriptor;
15
+ return class FadeEdgeLengthAttribute {
16
+ static {
17
+ const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
18
+ _private_handleFadingEdgeLength_decorators = [registerAttributeHandler('fading-edge-length', true)];
19
+ _private_backgroundColorToVariable_decorators = [registerStyleChangeHandler('background'), registerStyleChangeHandler('background-color')];
20
+ __esDecorate(this, _private_backgroundColorToVariable_descriptor = { value: __setFunctionName(function (backGroundColor) {
21
+ this.#getTopFadeMask().style.setProperty('--scroll-view-bg-color', backGroundColor);
22
+ this.#getBotFadeMask().style.setProperty('--scroll-view-bg-color', backGroundColor);
23
+ }, "#backgroundColorToVariable") }, _private_backgroundColorToVariable_decorators, { kind: "method", name: "#backgroundColorToVariable", static: false, private: true, access: { has: obj => #backgroundColorToVariable in obj, get: obj => obj.#backgroundColorToVariable }, metadata: _metadata }, null, _instanceExtraInitializers);
24
+ __esDecorate(null, null, _private_handleFadingEdgeLength_decorators, { kind: "field", name: "#handleFadingEdgeLength", static: false, private: true, access: { has: obj => #handleFadingEdgeLength in obj, get: obj => obj.#handleFadingEdgeLength, set: (obj, value) => { obj.#handleFadingEdgeLength = value; } }, metadata: _metadata }, _private_handleFadingEdgeLength_initializers, _private_handleFadingEdgeLength_extraInitializers);
25
+ if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
26
+ }
27
+ #dom = __runInitializers(this, _instanceExtraInitializers);
28
+ #getTopFadeMask = genDomGetter(() => this.#dom.shadowRoot, '#top-fade-mask');
29
+ #getBotFadeMask = genDomGetter(() => this.#dom.shadowRoot, '#bot-fade-mask');
30
+ static observedAttributes = ['fading-edge-length'];
31
+ static observedCSSProperties = ['background', 'background-color'];
32
+ constructor(dom) {
33
+ __runInitializers(this, _private_handleFadingEdgeLength_extraInitializers);
34
+ this.#dom = dom;
35
+ }
36
+ #handleFadingEdgeLength = __runInitializers(this, _private_handleFadingEdgeLength_initializers, bindToStyle(() => this.#dom, '--scroll-view-fading-edge-length', (v) => `${parseFloat(v)}px`));
37
+ get #backgroundColorToVariable() { return _private_backgroundColorToVariable_descriptor.value; }
38
+ connectedCallback() { }
39
+ dispose() { }
40
+ };
41
+ })();
42
+ export { FadeEdgeLengthAttribute };
43
+ //# sourceMappingURL=FadeEdgeLengthAttribute.js.map