u2ui 1.0.0

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 (440) hide show
  1. package/.htaccess +7 -0
  2. package/LICENSE +21 -0
  3. package/README.md +36 -0
  4. package/attr/behavior/README.md +25 -0
  5. package/attr/behavior/behavior.js +261 -0
  6. package/attr/behavior/manifest.json +43 -0
  7. package/attr/behavior/tests/minimal.html +19 -0
  8. package/attr/behavior/tests/test.html +98 -0
  9. package/attr/confirm/README.md +36 -0
  10. package/attr/confirm/confirm.js +90 -0
  11. package/attr/confirm/manifest.json +43 -0
  12. package/attr/confirm/tests/minimal.html +23 -0
  13. package/attr/confirm/tests/test.html +79 -0
  14. package/attr/draghandle/README.md +41 -0
  15. package/attr/draghandle/draghandle.js +42 -0
  16. package/attr/draghandle/tests/minimal.html +44 -0
  17. package/attr/focusgroup/README.md +49 -0
  18. package/attr/focusgroup/focusgroup.js +100 -0
  19. package/attr/focusgroup/manifest.json +38 -0
  20. package/attr/focusgroup/tests/minimal.html +27 -0
  21. package/attr/focusgroup/tests/test.html +154 -0
  22. package/attr/href/README.md +38 -0
  23. package/attr/href/href.js +42 -0
  24. package/attr/href/manifest.json +43 -0
  25. package/attr/href/tests/minimal.html +17 -0
  26. package/attr/href/tests/test.html +70 -0
  27. package/attr/intersect/README.md +42 -0
  28. package/attr/intersect/intersect.js +99 -0
  29. package/attr/intersect/manifest.json +57 -0
  30. package/attr/intersect/tests/minimal.html +30 -0
  31. package/attr/intersect/tests/test.html +64 -0
  32. package/attr/navigable/README.md +31 -0
  33. package/attr/navigable/TargetObserver.js +91 -0
  34. package/attr/navigable/U2TargetObserver.js +75 -0
  35. package/attr/navigable/manifest.json +42 -0
  36. package/attr/navigable/navigable.js +87 -0
  37. package/attr/navigable/tests/U1TargetObserver.html +56 -0
  38. package/attr/navigable/tests/minimal.html +17 -0
  39. package/attr/navigable/tests/targetObserver.html +106 -0
  40. package/attr/navigable/tests/test.html +84 -0
  41. package/attr/parallax/README.md +48 -0
  42. package/attr/parallax/parallax.js +119 -0
  43. package/attr/parallax/tests/minimal.html +25 -0
  44. package/attr/parallax/tests/performance.html +102 -0
  45. package/attr/parallax/tests/test.html +108 -0
  46. package/attr/skin/README.md +59 -0
  47. package/attr/skin/skin.css +51 -0
  48. package/attr/skin/tests/minimal.html +34 -0
  49. package/attr/skin/tests/test.html +96 -0
  50. package/class/badge/README.md +25 -0
  51. package/class/badge/badge.css +35 -0
  52. package/class/badge/tests/minimal.html +17 -0
  53. package/class/badge/tests/test.html +112 -0
  54. package/class/card1/README.md +45 -0
  55. package/class/card1/card1.css +30 -0
  56. package/class/card1/tests/minimal.html +33 -0
  57. package/class/card1/tests/test.html +78 -0
  58. package/class/flex/README.md +62 -0
  59. package/class/flex/flex.css +25 -0
  60. package/class/flex/tests/minimal.html +31 -0
  61. package/class/flex/tests/test.html +58 -0
  62. package/class/grid/README.md +52 -0
  63. package/class/grid/grid.css +40 -0
  64. package/class/grid/tests/minimal.html +34 -0
  65. package/class/grid/tests/test.html +78 -0
  66. package/class/input/README.md +49 -0
  67. package/class/input/input.css +33 -0
  68. package/class/input/tests/minimal.html +39 -0
  69. package/class/input/tests/test.html +29 -0
  70. package/class/reset/README.md +47 -0
  71. package/class/reset/reset.css +8 -0
  72. package/class/reset/tests/minimal.html +23 -0
  73. package/class/table/README.md +57 -0
  74. package/class/table/table.css +126 -0
  75. package/class/table/tests/minimal.html +40 -0
  76. package/class/table/tests/test.html +226 -0
  77. package/class/unstyle/README.md +32 -0
  78. package/class/unstyle/tests/minimal.html +22 -0
  79. package/class/unstyle/tests/test.html +32 -0
  80. package/class/unstyle/unstyle.css +12 -0
  81. package/class/width/README.md +48 -0
  82. package/class/width/tests/minimal.html +27 -0
  83. package/class/width/tests/test.html +101 -0
  84. package/class/width/width.css +22 -0
  85. package/css/base/README.md +25 -0
  86. package/css/base/base.css +127 -0
  87. package/css/base/beta.css +50 -0
  88. package/css/base/full.css +5 -0
  89. package/css/base/nomotion.css +9 -0
  90. package/css/base/print.css +36 -0
  91. package/css/base/tests/nomotion.html +89 -0
  92. package/css/base/tests/test.html +539 -0
  93. package/css/classes/README.md +17 -0
  94. package/css/classes/classes.css +78 -0
  95. package/css/classes/tests/test.html +63 -0
  96. package/css/classless/README.md +26 -0
  97. package/css/classless/aria.css +64 -0
  98. package/css/classless/classless.css +124 -0
  99. package/css/classless/full.css +11 -0
  100. package/css/classless/more.css +340 -0
  101. package/css/classless/simple.css +103 -0
  102. package/css/classless/snippeds/a/icons.css +12 -0
  103. package/css/classless/snippeds/experiments/conventions.css +41 -0
  104. package/css/classless/snippeds/hr/gradient.css +3 -0
  105. package/css/classless/snippeds/hr/section_sign.css +16 -0
  106. package/css/classless/snippeds/hr/tests.html +50 -0
  107. package/css/classless/tests/aria.html +101 -0
  108. package/css/classless/tests/foreign/classless-almond.css.html +445 -0
  109. package/css/classless/tests/foreign/classless-classless.css.html +831 -0
  110. package/css/classless/tests/foreign/classless-mvp.html +415 -0
  111. package/css/classless/tests/foreign/classless.sakura.html +224 -0
  112. package/css/classless/tests/foreign/stylestage.dev.html +304 -0
  113. package/css/classless/tests/foreign/test-homogenizer.html +433 -0
  114. package/css/classless/tests/foreign/test-html5-elements-tester.html +956 -0
  115. package/css/classless/tests/foreign/test-opinionated_css.html +148 -0
  116. package/css/classless/tests/list-bullet.html +110 -0
  117. package/css/classless/tests/more.html +246 -0
  118. package/css/classless/tests/oklch.experiments.html +280 -0
  119. package/css/classless/tests/test.html +106 -0
  120. package/css/classless/tests/variables.html +109 -0
  121. package/css/classless/variables.css +99 -0
  122. package/css/norm/README.md +37 -0
  123. package/css/norm/beta.css +40 -0
  124. package/css/norm/norm.css +98 -0
  125. package/css/norm/oldies.css +60 -0
  126. package/css/norm/tests/test.html +434 -0
  127. package/css/norm/tests/test.js +103 -0
  128. package/el/accordion/README.md +59 -0
  129. package/el/accordion/accordion.css +7 -0
  130. package/el/accordion/accordion.js +258 -0
  131. package/el/accordion/manifest.json +57 -0
  132. package/el/accordion/tests/minimal.html +44 -0
  133. package/el/accordion/tests/test.html +168 -0
  134. package/el/alert/README.md +67 -0
  135. package/el/alert/alert copy.js +224 -0
  136. package/el/alert/alert.css +73 -0
  137. package/el/alert/alert.js +187 -0
  138. package/el/alert/manifest.json +77 -0
  139. package/el/alert/tests/minimal.html +36 -0
  140. package/el/alert/tests/test.html +105 -0
  141. package/el/buttongroup/README.md +36 -0
  142. package/el/buttongroup/buttongroup.css +30 -0
  143. package/el/buttongroup/buttongroup.js +56 -0
  144. package/el/buttongroup/tests/minimal.html +31 -0
  145. package/el/buttongroup/tests/test.html +83 -0
  146. package/el/bytes/README.md +41 -0
  147. package/el/bytes/bytes.css +6 -0
  148. package/el/bytes/bytes.js +97 -0
  149. package/el/bytes/manifest.json +95 -0
  150. package/el/bytes/tests/minimal.html +19 -0
  151. package/el/bytes/tests/test.html +117 -0
  152. package/el/carousel/README.md +52 -0
  153. package/el/carousel/carousel.css +46 -0
  154. package/el/carousel/carousel.js +371 -0
  155. package/el/carousel/manifest.json +58 -0
  156. package/el/carousel/tests/experiments.html +77 -0
  157. package/el/carousel/tests/minimal.html +31 -0
  158. package/el/carousel/tests/nested.html +54 -0
  159. package/el/carousel/tests/test.html +136 -0
  160. package/el/carousel-nav/README.md +40 -0
  161. package/el/carousel-nav/carousel-nav.js +74 -0
  162. package/el/carousel-nav/tests/minimal.html +32 -0
  163. package/el/carousel-nav/tests/test.html +59 -0
  164. package/el/code/README.md +68 -0
  165. package/el/code/code.css +46 -0
  166. package/el/code/code.js +289 -0
  167. package/el/code/manifest.json +66 -0
  168. package/el/code/tests/minimal.html +35 -0
  169. package/el/code/tests/test.html +162 -0
  170. package/el/copy/README.md +35 -0
  171. package/el/copy/copy.css +3 -0
  172. package/el/copy/copy.js +118 -0
  173. package/el/copy/manifest.json +49 -0
  174. package/el/copy/tests/minimal.html +21 -0
  175. package/el/copy/tests/test.html +75 -0
  176. package/el/counter/README.md +47 -0
  177. package/el/counter/counter.css +8 -0
  178. package/el/counter/counter.js +95 -0
  179. package/el/counter/manifest.json +59 -0
  180. package/el/counter/tests/minimal.html +27 -0
  181. package/el/counter/tests/test.html +106 -0
  182. package/el/ico/README.md +162 -0
  183. package/el/ico/font/Font Awesome.css +22 -0
  184. package/el/ico/font/LigatureSymbols.css +7 -0
  185. package/el/ico/font/Material Icons.css +6 -0
  186. package/el/ico/font/RemixFilled.css +8 -0
  187. package/el/ico/font/RemixOutlined.css +8 -0
  188. package/el/ico/font/old/anicons.css +31 -0
  189. package/el/ico/font/old/devicons.css +210 -0
  190. package/el/ico/font/old/material.all.css +36 -0
  191. package/el/ico/font/old/remix.css +15 -0
  192. package/el/ico/font/old/utf8.css +54 -0
  193. package/el/ico/ico.css +111 -0
  194. package/el/ico/ico.js +189 -0
  195. package/el/ico/manifest.json +86 -0
  196. package/el/ico/tests/combinations.html +86 -0
  197. package/el/ico/tests/emojis.html +213 -0
  198. package/el/ico/tests/fonts.html +110 -0
  199. package/el/ico/tests/ico-directory.html +254 -0
  200. package/el/ico/tests/minimal.html +46 -0
  201. package/el/ico/tests/test.html +210 -0
  202. package/el/ico/tests/util-multi.svg +6 -0
  203. package/el/ico/tests/util.css +2 -0
  204. package/el/ico/tests/util.js +110 -0
  205. package/el/input/README.md +39 -0
  206. package/el/input/input.css +35 -0
  207. package/el/input/input.js +331 -0
  208. package/el/input/tests/formParticipation.html +113 -0
  209. package/el/input/tests/minimal.html +33 -0
  210. package/el/input/tests/test.html +258 -0
  211. package/el/masonry/README.md +51 -0
  212. package/el/masonry/manifest.json +60 -0
  213. package/el/masonry/masonry.css +27 -0
  214. package/el/masonry/masonry.js +92 -0
  215. package/el/masonry/tests/minimal.html +39 -0
  216. package/el/masonry/tests/test.html +42 -0
  217. package/el/number/README.md +47 -0
  218. package/el/number/manifest.json +121 -0
  219. package/el/number/number.css +6 -0
  220. package/el/number/number.js +67 -0
  221. package/el/number/tests/minimal.html +25 -0
  222. package/el/number/tests/test.html +138 -0
  223. package/el/out/README.md +32 -0
  224. package/el/out/manifest.json +38 -0
  225. package/el/out/out.css +2 -0
  226. package/el/out/out.js +59 -0
  227. package/el/out/tests/minimal.html +25 -0
  228. package/el/out/tests/test.html +37 -0
  229. package/el/parallax-bg/README.md +36 -0
  230. package/el/parallax-bg/parallax-bg.css +13 -0
  231. package/el/parallax-bg/parallax-bg.js +186 -0
  232. package/el/parallax-bg/tests/bg.jpg +0 -0
  233. package/el/parallax-bg/tests/bg1.jpg +0 -0
  234. package/el/parallax-bg/tests/bg2.jpg +0 -0
  235. package/el/parallax-bg/tests/demo.html +88 -0
  236. package/el/parallax-bg/tests/minimal.html +30 -0
  237. package/el/parallax-bg/tests/test.html +64 -0
  238. package/el/parallax-bg/tests/visible.html +90 -0
  239. package/el/qrcode/README.md +38 -0
  240. package/el/qrcode/manifest.json +43 -0
  241. package/el/qrcode/package.json +22 -0
  242. package/el/qrcode/qrcode.css +13 -0
  243. package/el/qrcode/qrcode.js +46 -0
  244. package/el/qrcode/tests/minimal.html +26 -0
  245. package/el/qrcode/tests/test.html +31 -0
  246. package/el/rating/README.md +45 -0
  247. package/el/rating/manifest.json +65 -0
  248. package/el/rating/rating.css +11 -0
  249. package/el/rating/rating.js +139 -0
  250. package/el/rating/tests/minimal.html +26 -0
  251. package/el/rating/tests/tests.html +77 -0
  252. package/el/rte/README.md +37 -0
  253. package/el/rte/rte.css +9 -0
  254. package/el/rte/rte.js +56 -0
  255. package/el/rte/tests/minimal.html +25 -0
  256. package/el/rte/tests/test.html +37 -0
  257. package/el/skeleton/README.md +30 -0
  258. package/el/skeleton/manifest.json +51 -0
  259. package/el/skeleton/skeleton.css +61 -0
  260. package/el/skeleton/skeleton.js +72 -0
  261. package/el/skeleton/tests/minimal.html +22 -0
  262. package/el/skeleton/tests/test.html +22 -0
  263. package/el/splitbutton/README.md +39 -0
  264. package/el/splitbutton/splitbutton.css +48 -0
  265. package/el/splitbutton/splitbutton.js +26 -0
  266. package/el/splitbutton/tests/minimal.html +30 -0
  267. package/el/splitbutton/tests/test.html +68 -0
  268. package/el/splitpanel/README.md +39 -0
  269. package/el/splitpanel/manifest.json +49 -0
  270. package/el/splitpanel/splitpanel.css +17 -0
  271. package/el/splitpanel/splitpanel.js +116 -0
  272. package/el/splitpanel/tests/minimal.html +31 -0
  273. package/el/splitpanel/tests/tests.html +121 -0
  274. package/el/table/README.md +68 -0
  275. package/el/table/manifest.json +43 -0
  276. package/el/table/table.css +59 -0
  277. package/el/table/table.js +194 -0
  278. package/el/table/tests/minimal.html +38 -0
  279. package/el/table/tests/test.html +108 -0
  280. package/el/tabs/README.md +50 -0
  281. package/el/tabs/manifest.json +59 -0
  282. package/el/tabs/tabs.css +23 -0
  283. package/el/tabs/tabs.js +210 -0
  284. package/el/tabs/tests/minimal.html +35 -0
  285. package/el/tabs/tests/test.html +180 -0
  286. package/el/textfit/README.md +34 -0
  287. package/el/textfit/manifest.json +45 -0
  288. package/el/textfit/tests/minimal.html +25 -0
  289. package/el/textfit/tests/test.html +26 -0
  290. package/el/textfit/textfit.css +6 -0
  291. package/el/textfit/textfit.js +80 -0
  292. package/el/time/README.md +72 -0
  293. package/el/time/manifest.json +118 -0
  294. package/el/time/tests/minimal.html +19 -0
  295. package/el/time/tests/test.html +160 -0
  296. package/el/time/time copy.js +141 -0
  297. package/el/time/time.js +168 -0
  298. package/el/time/time.old.uhtml.js +129 -0
  299. package/el/tooltip/README.md +48 -0
  300. package/el/tooltip/manifest.json +69 -0
  301. package/el/tooltip/tests/minimal.html +25 -0
  302. package/el/tooltip/tests/test.html +178 -0
  303. package/el/tooltip/tooltip.css +97 -0
  304. package/el/tooltip/tooltip.js +82 -0
  305. package/el/tree1/README.md +111 -0
  306. package/el/tree1/manifest.json +78 -0
  307. package/el/tree1/tests/animated.html +134 -0
  308. package/el/tree1/tests/custom.html +51 -0
  309. package/el/tree1/tests/minimal.html +44 -0
  310. package/el/tree1/tests/test.html +260 -0
  311. package/el/tree1/tree1.css +26 -0
  312. package/el/tree1/tree1.js +265 -0
  313. package/el/typewriter/README.md +62 -0
  314. package/el/typewriter/manifest.json +66 -0
  315. package/el/typewriter/tests/minimal.html +25 -0
  316. package/el/typewriter/tests/test.html +78 -0
  317. package/el/typewriter/typewriter.css +6 -0
  318. package/el/typewriter/typewriter.js +166 -0
  319. package/el/typewriter/typewriter.mp3 +0 -0
  320. package/js/Placer/Placer.js +156 -0
  321. package/js/Placer/README.md +62 -0
  322. package/js/Placer/tests/minimal.html +34 -0
  323. package/js/Placer/tests/test.html +49 -0
  324. package/js/PointerObserver/PointerObserver.js +130 -0
  325. package/js/PointerObserver/README.md +34 -0
  326. package/js/PointerObserver/tests/minimal.html +29 -0
  327. package/js/PointerObserver/tests/test.html +35 -0
  328. package/js/SelectorObserver/README.md +47 -0
  329. package/js/SelectorObserver/SelectorObserver.js +201 -0
  330. package/js/SelectorObserver/tests/minimal.html +21 -0
  331. package/js/SelectorObserver/tests/test.html +57 -0
  332. package/js/SelectorObserver/tests/tests.html +161 -0
  333. package/js/contextmenu/README.md +93 -0
  334. package/js/contextmenu/contextmenu.js +336 -0
  335. package/js/contextmenu/tests/minimal.html +44 -0
  336. package/js/contextmenu/tests/test.html +131 -0
  337. package/js/dialog/README.md +49 -0
  338. package/js/dialog/dialog.js +261 -0
  339. package/js/dialog/notification.mp3 +0 -0
  340. package/js/dialog/tests/minimal.html +29 -0
  341. package/js/dialog/tests/notification.mp3 +0 -0
  342. package/js/dialog/tests/test.html +135 -0
  343. package/js/rte/README.md +44 -0
  344. package/js/rte/old/NodeCleaner.js +315 -0
  345. package/js/rte/old/Rte/Rte.mjs +316 -0
  346. package/js/rte/old/Rte/Rte.ui.items.mjs +543 -0
  347. package/js/rte/old/Rte/Rte.ui.mjs +154 -0
  348. package/js/rte/old/Rte/crossbrowser.mjs +323 -0
  349. package/js/rte/old/Rte/font/tinymce.svg +98 -0
  350. package/js/rte/old/Rte/font/tinymce.woff +0 -0
  351. package/js/rte/old/Rte/helpers.mjs +159 -0
  352. package/js/rte/old/Rte/htmlparser.mjs +178 -0
  353. package/js/rte/old/Rte/index.mjs +5 -0
  354. package/js/rte/old/Rte/main.css +189 -0
  355. package/js/rte/old/old.rte.js +132 -0
  356. package/js/rte/old/range-selection.old.js +394 -0
  357. package/js/rte/rte.js +7 -0
  358. package/js/rte/src/behavior.js +228 -0
  359. package/js/rte/src/events.js +73 -0
  360. package/js/rte/src/fixes.js +251 -0
  361. package/js/rte/src/range.js +472 -0
  362. package/js/rte/src/rte.js +72 -0
  363. package/js/rte/src/ui/items/ai.js +167 -0
  364. package/js/rte/src/ui/items/code.js +93 -0
  365. package/js/rte/src/ui/items/undo.js +183 -0
  366. package/js/rte/src/ui.items.js +571 -0
  367. package/js/rte/src/ui.js +269 -0
  368. package/js/rte/src/util/htmlparser.js +178 -0
  369. package/js/rte/src/util/indentHtml.js +48 -0
  370. package/js/rte/tests/ai.html +81 -0
  371. package/js/rte/tests/behavior.html +88 -0
  372. package/js/rte/tests/events.html +69 -0
  373. package/js/rte/tests/fixes.html +95 -0
  374. package/js/rte/tests/minimal.html +34 -0
  375. package/js/rte/tests/notes.md +6 -0
  376. package/js/rte/tests/range.html +167 -0
  377. package/js/rte/tests/selection-explorer.html +222 -0
  378. package/js/rte/tests/test.html +92 -0
  379. package/js/shortcut/README.md +33 -0
  380. package/js/shortcut/shortcut.js +89 -0
  381. package/js/shortcut/tests/minimal.html +23 -0
  382. package/js/shortcut/tests/test.html +68 -0
  383. package/package.json +12 -0
  384. package/u2/README.md +4 -0
  385. package/u2/auto.js +161 -0
  386. package/u2/auto.ui.js +85 -0
  387. package/u2/experiments/Waiter/test.html +132 -0
  388. package/u2/experiments/getElementByIdPromise/test.html +76 -0
  389. package/u2/experiments/patchInputValue.html +124 -0
  390. package/u2/experiments/radiobutton/test.html +75 -0
  391. package/u2/experiments/tests/test.html +223 -0
  392. package/u2/experiments/u1-responsive/responsive.js +62 -0
  393. package/u2/experiments/u1-responsive/test.html +65 -0
  394. package/u2/experiments/u2Element.js +139 -0
  395. package/u2/experiments/u2Element.test.html +47 -0
  396. package/u2/old-stuff/IterableWeakMap/mod.js +70 -0
  397. package/u2/old-stuff/css/onStyleSheet/mod.js +114 -0
  398. package/u2/old-stuff/css/onStyleSheet/monkeypatches.js +28 -0
  399. package/u2/old-stuff/css/onStyleSheet/test/include.css +19 -0
  400. package/u2/old-stuff/css/onStyleSheet/test/style-has-include.css +6 -0
  401. package/u2/old-stuff/css/onStyleSheet/test/style-no-include.css +3 -0
  402. package/u2/old-stuff/css/onStyleSheet/test/test.html +48 -0
  403. package/u2/old-stuff/css/parser/mod.js +182 -0
  404. package/u2/old-stuff/css/parser/parser_old/mod.js +128 -0
  405. package/u2/old-stuff/css/parser/parser_old/test.html +43 -0
  406. package/u2/old-stuff/css/parser/parser_old/util.js +22 -0
  407. package/u2/old-stuff/css/parser/style.html +52 -0
  408. package/u2/old-stuff/css/parser/test.html +38 -0
  409. package/u2/old-stuff/el/ai-texter/README.md +23 -0
  410. package/u2/old-stuff/el/ai-texter/ai-texter.css +12 -0
  411. package/u2/old-stuff/el/ai-texter/ai-texter.js +153 -0
  412. package/u2/old-stuff/el/ai-texter/tests/minimal.html +47 -0
  413. package/u2/old-stuff/el/ai-texter/tests/test.html +71 -0
  414. package/u2/old-stuff/init.js +38 -0
  415. package/u2/old-stuff/markHashLinks.js +51 -0
  416. package/u2/old-stuff/onElement/mod.js +73 -0
  417. package/u2/old-stuff/test-helpers/mod.js +36 -0
  418. package/u2/old-stuff/test-helpers/test.html +4 -0
  419. package/u2/old-stuff/tests/init.js.html +51 -0
  420. package/u2/old-stuff/viewport.js +64 -0
  421. package/u2/projects.json +468 -0
  422. package/u2/tests/boilerplate.html +46 -0
  423. package/u2/tests/kacheln.html +245 -0
  424. package/u2/tests/showcase.html +270 -0
  425. package/u2/tests/showcase2.html +157 -0
  426. package/u2/tests/test-init.js +35 -0
  427. package/u2/tests/test.html +355 -0
  428. package/u2/tools/baseElement.js +95 -0
  429. package/u2/tools/baseElement.test.html +119 -0
  430. package/u2/tools/ce-inspector.js +308 -0
  431. package/u2/tools/ce-inspector.test.html +66 -0
  432. package/u2/tools/ce-manfest-from-element.js +207 -0
  433. package/u2/tools/dev-iframe.js +213 -0
  434. package/u2/tools/dev-iframe.test.html +75 -0
  435. package/u2/tools/eventsExplorer.js +101 -0
  436. package/u2/tools/logo/u1.svg +9 -0
  437. package/u2/tools/logo/u1ui.svg +6 -0
  438. package/u2/tools/update.repos.json.js +234 -0
  439. package/u2/u2.js +14 -0
  440. package/u2/utils.js +59 -0
@@ -0,0 +1,77 @@
1
+ <!DOCTYPE HTML>
2
+ <html lang=en>
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name=viewport content="width=device-width">
6
+ <!--script src="../../../u2/tests/test-init.js" type=module async></script-->
7
+ <script src="../../../u2/auto.js" type=module async></script>
8
+
9
+ <link rel=stylesheet href="../../../css/classless/full.css">
10
+ <link rel=stylesheet href="../../../css/classless/aria.css">
11
+ <link rel=stylesheet href="../../../css/classless/simple.css">
12
+
13
+ <link rel=stylesheet href="../carousel.css">
14
+ <script src="../carousel.js" type=module async></script>
15
+
16
+ </head>
17
+
18
+ <body>
19
+
20
+ <u2-code editable trim>
21
+ <style>
22
+ u2-carousel {
23
+ box-shadow: var(--shadow);
24
+ }
25
+ u2-carousel::part(control) {
26
+ color:var(--color);
27
+ stroke-linecap: butt;
28
+ position: static;
29
+ }
30
+ u2-carousel > * {
31
+ transition:1s;
32
+ }
33
+ u2-carousel > [aria-hidden=true] {
34
+ opacity:.05;
35
+ }
36
+ </style>
37
+ </u2-code>
38
+
39
+ <section>
40
+ <h2>Change attributes:</h2>
41
+
42
+ <label>
43
+ autoplay <input type=checkbox checked onclick="ss.toggleAttribute('autoplay', this.checked)">
44
+ </label>
45
+
46
+ <form onchange="ss.setAttribute('mode', this.elements.mode.value)">
47
+ Mode:<br>
48
+ <label>
49
+ fade: <input type=radio name=mode value="fade">
50
+ </label>
51
+ <label>
52
+ slide: <input type=radio name=mode value="slide">
53
+ </label>
54
+ <label>
55
+ scroll: <input type=radio name=mode value="scroll">
56
+ </label>
57
+ </form>
58
+
59
+ <br>
60
+
61
+ <u2-carousel id=ss mode=slide autoplay style="--u2-carousel-slideshow-speed:2s;" tabindex="0">
62
+ <img src="https://picsum.photos/500/200?random=1" width="500" height="200" alt="picsum">
63
+ <img src="https://picsum.photos/500/200?random=2" width="500" height="200" alt="picsum">
64
+ <img src="https://picsum.photos/500/200?random=3" width="500" height="200" alt="picsum">
65
+ <img src="https://picsum.photos/500/200?random=4" width="500" height="200" alt="picsum">
66
+ <img src="https://picsum.photos/500/200?random=5" width="500" height="200" alt="picsum">
67
+
68
+ <svg slot=prev fill="currentColor" viewBox="0 0 48 48" width=40 style="transform:rotate(180deg)">
69
+ <path d="M4 24c0-.69.56-1.25 1.25-1.25H37.7l-12.83-12.6a1.25 1.25 0 1 1 1.76-1.8L41.6 23.1l.03.02a1.25 1.25 0 0 1-.04 1.8L26.63 39.64a1.25 1.25 0 1 1-1.76-1.78L37.7 25.25H5.25C4.56 25.25 4 24.69 4 24z"></path>
70
+ </svg>
71
+ <svg slot=next fill="currentColor" viewBox="0 0 48 48" width=40>
72
+ <path d="M4 24c0-.69.56-1.25 1.25-1.25H37.7l-12.83-12.6a1.25 1.25 0 1 1 1.76-1.8L41.6 23.1l.03.02a1.25 1.25 0 0 1-.04 1.8L26.63 39.64a1.25 1.25 0 1 1-1.76-1.78L37.7 25.25H5.25C4.56 25.25 4 24.69 4 24z"></path>
73
+ </svg>
74
+
75
+ </u2-carousel>
76
+
77
+ </section>
@@ -0,0 +1,31 @@
1
+ <!DOCTYPE html>
2
+ <html lang=en>
3
+ <head>
4
+ <meta charset=utf-8>
5
+ <meta name=viewport content="width=device-width">
6
+ <script src="../../../u2/tests/test-init.js" type=module async></script>
7
+
8
+ <link rel=stylesheet href="../../../css/classless/full.css">
9
+ <link rel=stylesheet href="../../../css/classless/simple.css">
10
+
11
+ <link rel=stylesheet href="../carousel.css">
12
+ <script src="../carousel.js" type=module async></script>
13
+
14
+ <body>
15
+
16
+ <section class=main>
17
+ <u2-carousel autoplay controls>
18
+ <div>Carousel<br>Demo<br>Item 1</div>
19
+ <div>Item 2</div>
20
+ </u2-carousel>
21
+ </section>
22
+
23
+ <style class=main>
24
+ u2-carousel {
25
+ background:var(--color-light);
26
+ }
27
+ u2-carousel > :not([slot]) {
28
+ padding:3rem;
29
+ text-align:center;
30
+ }
31
+ </style>
@@ -0,0 +1,54 @@
1
+ <!DOCTYPE HTML>
2
+ <html lang=en>
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name=viewport content="width=device-width">
6
+ <script src="../../../u2/tests/test-init.js" type=module async></script>
7
+ <script src="../../../u2/auto.js" type=module></script>
8
+
9
+ <link rel=stylesheet href="../../../css/classless/full.css">
10
+ <link rel=stylesheet href="../../../css/classless/aria.css">
11
+ <link rel=stylesheet href="../../../css/classless/simple.css">
12
+
13
+ <link rel=stylesheet href="../carousel.css">
14
+ <script src="../carousel.js" type=module async></script>
15
+
16
+ </head>
17
+ <body>
18
+
19
+ <u2-code trim editable>
20
+ <style>
21
+ u2-carousel {
22
+ box-shadow: var(--shadow);
23
+ }
24
+ u2-carousel > * {
25
+ transition:.3s;
26
+ }
27
+ u2-carousel > [aria-hidden=true] {
28
+ opacity:.1;
29
+ }
30
+ </style>
31
+ </u2-code>
32
+
33
+ <section>
34
+ <h2>mode = slide</h2>
35
+ <u2-carousel mode=slide autoplay style="--u2-carousel-slideshow-speed:2s; padding:3rem" tabindex="0">
36
+
37
+ <u2-carousel mode=fade>
38
+ <img src="https://picsum.photos/500/200?random=1" width=500 height=200 alt="">
39
+ <img src="https://picsum.photos/500/200?random=2" width=500 height=200 alt="">
40
+ <img src="https://picsum.photos/500/200?random=3" width=500 height=200 alt="">
41
+ <img src="https://picsum.photos/500/200?random=4" width=500 height=200 alt="">
42
+ <img src="https://picsum.photos/500/200?random=5" width=500 height=200 alt="">
43
+ </u2-carousel>
44
+
45
+ <u2-carousel mode=fade>
46
+ <img src="https://picsum.photos/500/200?random=1" width=500 height=200 alt="">
47
+ <img src="https://picsum.photos/500/200?random=2" width=500 height=200 alt="">
48
+ <img src="https://picsum.photos/500/200?random=3" width=500 height=200 alt="">
49
+ <img src="https://picsum.photos/500/200?random=4" width=500 height=200 alt="">
50
+ <img src="https://picsum.photos/500/200?random=5" width=500 height=200 alt="">
51
+ </u2-carousel>
52
+
53
+ </u2-carousel>
54
+ </section>
@@ -0,0 +1,136 @@
1
+ <!DOCTYPE HTML>
2
+ <html lang=en>
3
+ <head>
4
+ <meta charset=utf-8>
5
+ <meta name=viewport content="width=device-width">
6
+ <script src="../../../u2/tests/test-init.js" type=module async></script>
7
+ <script src="../../../u2/auto.js" type=module></script>
8
+
9
+ <link rel=stylesheet href="../../../css/classless/full.css">
10
+ <link rel=stylesheet href="../../../css/classless/simple.css">
11
+
12
+ <link rel=stylesheet href="../carousel.css">
13
+ <script src="../carousel.js" type=module async></script>
14
+
15
+ <body>
16
+
17
+ <u2-code editable trim>
18
+ <style>
19
+ u2-carousel {
20
+ box-shadow: var(--shadow);
21
+ border:5px solid var(--color-text);
22
+ padding:.3rem;
23
+ margin:.3rem;
24
+ }
25
+ u2-carousel > *:not(img) {
26
+ border:5px solid var(--color);
27
+ padding:.3rem;
28
+ padding:2rem;
29
+ margin:.3rem;
30
+ }
31
+ </style>
32
+ </u2-code>
33
+
34
+ <section>
35
+ <h2>mode = slide</h2>
36
+ <u2-carousel mode=slide autoplay style="--u2-carousel-slideshow-speed:2s" tabindex="0">
37
+ <section>
38
+ <h2 slot="title">Title</h2>
39
+ <label>
40
+ If input focused, dont continue to play
41
+ <input>
42
+ </label>
43
+ </section>
44
+ <section>
45
+ <h2 slot="title">Title 2</h2>
46
+ <label>
47
+ Lorem Ipsum
48
+ <input>
49
+ </label>
50
+ </section>
51
+ <section>
52
+ <h2 slot="title">Title 3</h2>
53
+ <label>
54
+ <input>
55
+ Dolor Sit
56
+ </label>
57
+ </section>
58
+ </u2-carousel>
59
+ </section>
60
+
61
+ <section>
62
+ <h2>mode=scroll</h2>
63
+ <u2-carousel mode=scroll>
64
+ <section>
65
+ <h2 slot="title">Title</h2>
66
+ Lorem Ipsum
67
+ </section>
68
+ <section>
69
+ <h2 slot="title">Title 2</h2>
70
+ Lorem Ipsum
71
+ </section>
72
+ <section>
73
+ <h2 slot="title">Title 3</h2>
74
+ Lorem Ipsum
75
+ </section>
76
+ </u2-carousel>
77
+ </section>
78
+
79
+ <section>
80
+ <h2>mode=fade</h2>
81
+ <u2-carousel mode=fade>
82
+ <section>
83
+ <h2 slot="title">Title</h2>
84
+ Lorem Ipsum
85
+ </section>
86
+ <section>
87
+ <h2 slot="title">Title 2</h2>
88
+ Lorem Ipsum
89
+ </section>
90
+ <section>
91
+ <h2 slot="title">Title 3</h2>
92
+ Lorem Ipsum
93
+ </section>
94
+ </u2-carousel>
95
+ </section>
96
+
97
+
98
+
99
+ <section>
100
+ <h2>Compare modes</h2>
101
+ <table>
102
+ <thead>
103
+ <tr>
104
+ <th>Mode
105
+ <th>How it works
106
+ <th>Custom Speed
107
+ <th>Visible Overflow
108
+ <tbody>
109
+ <tr>
110
+ <td>slide
111
+ <td>moves using translateX
112
+ <td>yes
113
+ <td>possible (todo)
114
+ <tr>
115
+ <td>fade
116
+ <td>fades using opacity
117
+ <td>yes
118
+ <td>no
119
+ <tr>
120
+ <td>scroll
121
+ <td>moves using native scroll
122
+ <td>no
123
+ <td>no
124
+ </table>
125
+ </section>
126
+
127
+ <section>
128
+ <h2>Using images</h2>
129
+ <u2-carousel mode=slide autoplay style="--u2-carousel-slideshow-speed:2.2s">
130
+ <img src="https://picsum.photos/500/200?random=1" width="500" height="200" alt="demo image 1">
131
+ <img src="https://picsum.photos/500/200?random=2" width="500" height="200" alt="demo image 1">
132
+ <img src="https://picsum.photos/500/200?random=3" width="500" height="200" alt="demo image 1">
133
+ <img src="https://picsum.photos/500/200?random=4" width="500" height="200" alt="demo image 1">
134
+ <img src="https://picsum.photos/500/200?random=5" width="500" height="200" alt="demo image 1">
135
+ </u2-carousel>
136
+ </section>
@@ -0,0 +1,40 @@
1
+ # &lt;u2-carousel-nav&gt; - element
2
+ null
3
+
4
+ ## Usage
5
+
6
+ ```html
7
+ <u2-carousel-nav></u2-carousel-nav>
8
+ <u2-carousel>
9
+ <div>Item 1</div>
10
+ <div>Item 2</div>
11
+ <div>Item 3</div>
12
+ </u2-carousel>
13
+ ```
14
+
15
+ ```css
16
+ u2-carousel-nav > * {
17
+ transition:.3s;
18
+ }
19
+ u2-carousel-nav > .-active {
20
+ transform:scale(1.2);
21
+ }
22
+ ```
23
+
24
+ ## Install
25
+
26
+ ```html
27
+ <link href="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/carousel-nav/carousel-nav.min.css" rel=stylesheet>
28
+ <script src="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/carousel-nav/carousel-nav.min.js" type=module async></script>
29
+ ```
30
+
31
+ ## Demos
32
+
33
+ [minimal.html](http://gcdn.li/u2ui/u2@main/el/carousel-nav/tests/minimal.html)
34
+ [test.html](http://gcdn.li/u2ui/u2@main/el/carousel-nav/tests/test.html)
35
+
36
+ ## About
37
+
38
+ - MIT License, Copyright (c) 2022 <u2> (like all repositories in this organization) <br>
39
+ - Suggestions, ideas, finding bugs and making pull requests make us very happy. ♥
40
+
@@ -0,0 +1,74 @@
1
+
2
+ const style = document.createElement('style');
3
+ style.innerHTML = `
4
+ u2-carousel-nav {
5
+ display:flex;
6
+ justify-content:center;
7
+ margin:.5rem;
8
+ }
9
+ u2-carousel-nav > * {
10
+ width:1.2rem;
11
+ height:1.2rem;
12
+ margin:.2rem;
13
+ border-radius:100%;
14
+ background-color:#0003;
15
+ cursor:pointer;
16
+
17
+ display:flex;
18
+ font-size:.5rem;
19
+ padding-bottom:.035rem;
20
+ color:transparent;
21
+ justify-content:center;
22
+ align-items:center;
23
+ opacity:.3;
24
+ }
25
+ u2-carousel-nav > :hover {
26
+ opacity:.6;
27
+ }
28
+ u2-carousel-nav > .-active {
29
+ opacity:1;
30
+ }
31
+ `
32
+ document.head.prepend(style);
33
+
34
+ function refSlideshows(el) {
35
+ const grp = el.getAttribute('sync-group');
36
+ if (grp) {
37
+ const slides = [];
38
+ document.body.c1FindAll('u2-carousel[sync-group="'+grp+'"]').forEach(function(ssEl){
39
+ slides.push(ssEl);
40
+ });
41
+ return slides;
42
+ } else {
43
+ return [el.parentNode.querySelector('u2-carousel')];
44
+ }
45
+ }
46
+
47
+ class u2CarouselNav extends HTMLElement {
48
+ constructor() {
49
+ super();
50
+ }
51
+
52
+ connectedCallback() {
53
+ customElements.whenDefined('u2-carousel').then(()=>{
54
+ const SS = refSlideshows(this)[0];
55
+
56
+ const items = SS._items();
57
+
58
+ if (items.length < 2) this.style.display = 'none';
59
+
60
+ items.forEach((item, index)=>{
61
+ const button = document.createElement('span');
62
+ button.addEventListener('click',()=>SS.slideTo(index));
63
+ button.innerHTML = index+1;
64
+ this.append(button);
65
+ });
66
+ SS.addEventListener('u2-carousel.slide', e=>{
67
+ Array.from(this.children).forEach((button, index)=>{
68
+ button.classList.toggle('-active', e.detail.index === index);
69
+ });
70
+ });
71
+ })
72
+ }
73
+ }
74
+ customElements.define('u2-carousel-nav', u2CarouselNav)
@@ -0,0 +1,32 @@
1
+ <!DOCTYPE html>
2
+ <html lang=en>
3
+ <head>
4
+ <meta charset=utf-8>
5
+ <meta name=viewport content="width=device-width">
6
+ <script src="../../../u2/tests/test-init.js" type=module async></script>
7
+
8
+
9
+ <link href="../../../el/carousel/carousel.css" rel=stylesheet>
10
+ <script src="../../../el/carousel/carousel.js" type=module async></script>
11
+
12
+ <script src="../carousel-nav.js" type=module async></script>
13
+
14
+ <body>
15
+
16
+ <section class="main">
17
+ <u2-carousel-nav></u2-carousel-nav>
18
+ <u2-carousel>
19
+ <div>Item 1</div>
20
+ <div>Item 2</div>
21
+ <div>Item 3</div>
22
+ </u2-carousel>
23
+ </section>
24
+
25
+ <style class="main">
26
+ u2-carousel-nav > * {
27
+ transition:.3s;
28
+ }
29
+ u2-carousel-nav > .-active {
30
+ transform:scale(1.2);
31
+ }
32
+ </style>
@@ -0,0 +1,59 @@
1
+ <!DOCTYPE HTML>
2
+ <html lang=en>
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name=viewport content="width=device-width">
6
+ <script src="../../../u2/tests/test-init.js" type=module async></script>
7
+ <script src="../../../u2/auto.js" type=module async></script>
8
+
9
+ <link rel=stylesheet href="../../../css/classless/full.css">
10
+ <link rel=stylesheet href="../../../css/classless/aria.css">
11
+ <link rel=stylesheet href="../../../css/classless/simple.css">
12
+
13
+
14
+ <link href="../../../el/carousel/carousel.css" rel=stylesheet>
15
+ <script src="../../../el/carousel/carousel.js" type=module async></script>
16
+
17
+ <script src="../carousel-nav.js" type=module async></script>
18
+
19
+ </head>
20
+
21
+ <body>
22
+
23
+ <section>
24
+
25
+ <div style="display:flex;">
26
+ <u2-carousel id=ss mode=slide play style="--u2-carousel-slideshow-speed:2s; flex:1 1 auto" tabindex="0">
27
+ <img src="https://picsum.photos/500/200?random=1" width="500" height="200" alt="picsum">
28
+ <img src="https://picsum.photos/500/200?random=2" width="500" height="200" alt="picsum">
29
+ <img src="https://picsum.photos/500/200?random=3" width="500" height="200" alt="picsum">
30
+ <img src="https://picsum.photos/500/200?random=4" width="500" height="200" alt="picsum">
31
+ <img src="https://picsum.photos/500/200?random=5" width="500" height="200" alt="picsum">
32
+
33
+ <svg slot=prev fill="currentColor" viewBox="0 0 48 48" width=40 style="transform:rotate(180deg)">
34
+ <path d="M4 24c0-.69.56-1.25 1.25-1.25H37.7l-12.83-12.6a1.25 1.25 0 1 1 1.76-1.8L41.6 23.1l.03.02a1.25 1.25 0 0 1-.04 1.8L26.63 39.64a1.25 1.25 0 1 1-1.76-1.78L37.7 25.25H5.25C4.56 25.25 4 24.69 4 24z"></path>
35
+ </svg>
36
+ <svg slot=next fill="currentColor" viewBox="0 0 48 48" width=40>
37
+ <path d="M4 24c0-.69.56-1.25 1.25-1.25H37.7l-12.83-12.6a1.25 1.25 0 1 1 1.76-1.8L41.6 23.1l.03.02a1.25 1.25 0 0 1-.04 1.8L26.63 39.64a1.25 1.25 0 1 1-1.76-1.78L37.7 25.25H5.25C4.56 25.25 4 24.69 4 24z"></path>
38
+ </svg>
39
+
40
+ </u2-carousel>
41
+ <u2-carousel-nav style="flex-direction:column; flex:0 0 auto"></u2-carousel-nav>
42
+ </div>
43
+
44
+ <u2-carousel-nav></u2-carousel-nav>
45
+
46
+ </section>
47
+
48
+
49
+ <u2-code editable trim>
50
+ <style>
51
+ u2-carousel-nav > * {
52
+ transition:.3s;
53
+ color:inherit;
54
+ }
55
+ u2-carousel-nav > .-active {
56
+ transform:scale(1.3);
57
+ }
58
+ </style>
59
+ </u2-code>
@@ -0,0 +1,68 @@
1
+ # &lt;u2-code&gt; - element
2
+ Highlighted, editable code-blocks.
3
+
4
+ ## Usage
5
+
6
+ ```js
7
+ // Code-Element
8
+ if (de) {
9
+ alert('Hallo, Welt!');
10
+ } else {
11
+ alert('Hello, World!');
12
+ }
13
+ ```
14
+
15
+ ```html
16
+ <u2-code trim editable>
17
+ <script>
18
+ // Code-Element
19
+ if (de) {
20
+ alert('Hallo, Welt!');
21
+ } else {
22
+ alert('Hello, World!');
23
+ }
24
+ </script>
25
+ </u2-code>
26
+ ```
27
+
28
+ ```css
29
+ u2-code {
30
+ font-size:15px;
31
+ max-block-size:11rem;
32
+ }
33
+ ```
34
+
35
+ ## API
36
+
37
+ Attributes:
38
+ - `trim`: This will trim empty first and last lines, and most importantly, indentation.
39
+ - `editable`: This will make the code editable.
40
+ - `language`: Define the code-language (auto-detect if not set)
41
+ - `element`: ID of the element its innerHTML should be used as code.
42
+
43
+ Slots:
44
+ - `tools`: Elements that will be placed in the top-right corner of the code-block.
45
+
46
+ ## Install
47
+
48
+ ```html
49
+ <link href="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/code/code.min.css" rel=stylesheet>
50
+ <script src="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/code/code.min.js" type=module async></script>
51
+ ```
52
+
53
+ ## Demos
54
+
55
+ [minimal.html](http://gcdn.li/u2ui/u2@main/el/code/tests/minimal.html)
56
+ [test.html](http://gcdn.li/u2ui/u2@main/el/code/tests/test.html)
57
+
58
+ ## Attributes
59
+
60
+ `trim`: This will trim empty first and last lines, and most importantly, indentation.
61
+ `editable`: This will make the code editable.
62
+ `language`: Define the code-language (auto-detect if not set)
63
+
64
+ ## About
65
+
66
+ - MIT License, Copyright (c) 2022 <u2> (like all repositories in this organization) <br>
67
+ - Suggestions, ideas, finding bugs and making pull requests make us very happy. ♥
68
+
@@ -0,0 +1,46 @@
1
+ u2-code {
2
+ font-family: Consolas, "Courier New", Courier, monospace;
3
+ display:block;
4
+ overflow:auto;
5
+ text-align:left;
6
+ background-color: #fff;
7
+ color: #000;
8
+ }
9
+
10
+ u2-code > :where(script, style) {
11
+ display:block;
12
+ white-space: pre;
13
+ }
14
+
15
+ /* new */
16
+ u2-code:not(:has(>*)) {
17
+ white-space: pre;
18
+ }
19
+ u2-code > :is(pre, code, style, script, textarea),
20
+ u2-code > pre > code {
21
+ padding:0;
22
+ margin:0;
23
+ font: inherit;
24
+ display:block;
25
+ background:transparent;
26
+ }
27
+ u2-code > :where(textarea) {
28
+ inline-size:100%;
29
+ border:0;
30
+ block-size:10rem;
31
+
32
+ @supports (field-sizing:content) {
33
+ field-sizing:content;
34
+ block-size:auto;
35
+ resize: none;
36
+ }
37
+
38
+ /* does not work
39
+ min-height: -webkit-fill-available;
40
+ min-height: stretch;
41
+ */
42
+ }
43
+
44
+ u2-code:not(:defined) > [slot="tools"]{
45
+ display:none;
46
+ }