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
package/el/input/tests/test.html ADDED
@@ -0,0 +1,258 @@
1
+ <!DOCTYPE html>
2
+ <html lang=en>
3
+ <head>
4
+ <meta charset=utf-8>
5
+ <meta name=viewport content="width=device-width">
6
+ <title>test</title>
7
+ <!-- <script src="../../../u2/tests/test-init.js" type=module async></script> -->
8
+ <script src="../../../u2/auto.js" type=module async></script>
9
+ <link href="../../../css/classless/full.css" rel=stylesheet>
10
+ <link href="../../../css/classless/simple.css" rel=stylesheet>
11
+
12
+ <style>
13
+ body {
14
+ --u2-ico-dir:'https://cdn.jsdelivr.net/npm/@material-icons/svg@1.0.11/svg/{icon}/baseline.svg';
15
+ }
16
+ label {
17
+ display:block;
18
+ margin-block:1rem;
19
+ }
20
+ </style>
21
+
22
+ <link href="../input.css" rel=stylesheet>
23
+ <script src="../input.js" type=module async></script>
24
+
25
+ <body>
26
+
27
+ <section>
28
+
29
+ <h3>test</h3>
30
+ <input name=normal type=text value="Normal">
31
+
32
+ <u2-input>
33
+ <input name=u2 value="u2" type="number" placeholder="same height">
34
+ </u2-input>
35
+
36
+ <br><br>
37
+
38
+ <u2-input>
39
+ <input name=u2 value="u2" type="number" placeholder="same width">
40
+ </u2-input>
41
+
42
+ <u2-input type="stepper">
43
+ <input type="number" name=stepper value="stepper" step="0.5" min="0" max="10">
44
+ </u2-input>
45
+
46
+ <u2-input type=checkbox>
47
+ <select><option value="">off<option value=on>on</select>
48
+ </u2-input>
49
+
50
+ <u2-input type=checkbox>
51
+ <select><option value="">off<option value=on selected>on</select>
52
+ </u2-input>
53
+
54
+ <u2-input>
55
+ <select slot="start">
56
+ <option>076
57
+ <option>077
58
+ <option>078
59
+ </select>
60
+ <input type="tel" name=tel value="" placeholder="3212321">
61
+ </u2-input>
62
+
63
+ <h2>File</h2>
64
+
65
+ <input>
66
+ <u2-input type="file"><input type="file" name=file placeholder="auto"></u2-input>
67
+ <br><br>
68
+ Normal: <input type="file" name=normalFile multiple>
69
+
70
+ <h2>Cycle</h2>
71
+
72
+ <u2-input type="cycle">
73
+ <label>
74
+ <u2-ico icon=star>★</u2-ico>
75
+ <input type=radio name=xyz value="3">
76
+ </label>
77
+ <label>
78
+ <u2-ico icon=check>✔</u2-ico>
79
+ <input type=radio name=xyz value="1" checked>
80
+ </label>
81
+ <label>
82
+ <u2-ico icon=close>✖</u2-ico>
83
+ <input type=radio name=xyz value="2">
84
+ </label>
85
+ </u2-input>
86
+ <style>
87
+ u2-input[type=cycle] label {
88
+ transition:.4s;
89
+ rotate:0;
90
+ &:has(:checked) {
91
+ rotate:360deg;
92
+ }
93
+ }
94
+ </style>
95
+
96
+
97
+ <br><br><br><br>
98
+
99
+ <form method=get id=form>
100
+ <table style="xwidth:auto" class="u2-table -Fields">
101
+ <tr>
102
+ <td> <input name=normal type=text>
103
+ <th> Normal input
104
+ <tr>
105
+ <td> <u2-input name=u2-text type=text>inhalt</u2-input>
106
+ <th> u2-input text
107
+ <tr>
108
+ <td>
109
+ <u2-input name=u2-tel type=text>
110
+ <span slot=start>☎</span>
111
+ <input type="tel">
112
+ </u2-input>
113
+ <th> u2-input with start slot
114
+ <tr>
115
+ <td> <u2-input name=textarea type=textarea>inhalt</u2-input>
116
+ <th> u2-input textarea
117
+ <tr>
118
+ <td>
119
+ <u2-input type=checkbox>
120
+ <select name="checkbox">
121
+ <option value="off">off
122
+ <option value=on>on
123
+ </select>
124
+ </u2-input>
125
+ <th> u2-input checkbox
126
+ <tr>
127
+ <td>
128
+ <u2-input name=select type=select></u2-input>
129
+ <th> u2-input select
130
+ <tr>
131
+ <td> <u2-input><input type=text></u2-input>
132
+ <th> text with inner
133
+ <tr>
134
+ <td>
135
+ <u2-input name=checkbox-inner>
136
+ <input type=checkbox value="yes" checked>
137
+ </u2-input>
138
+ <th> input with inner
139
+ <tr>
140
+ <td>
141
+ <u2-input name="select_inner">
142
+ <select>
143
+ <option value="1">One
144
+ <option value="2" selected>Two
145
+ <option value="3">Three
146
+ </select>
147
+ </u2-input>
148
+ <th> Select with inner
149
+
150
+ <tr>
151
+ <td>
152
+ <u2-input>
153
+ <textarea name="test">
154
+ diest ist
155
+ der Inhalt
156
+ </textarea>
157
+ </u2-input>
158
+ <th> Textarea with inner
159
+ <tr>
160
+ <td>
161
+ <u2-input>
162
+ <input type="date">
163
+ </u2-input>
164
+ <th> Date with inner
165
+ <tr>
166
+ <td>
167
+ <u2-input type="file">
168
+ <input type="file">
169
+ </u2-input>
170
+ <th> File with inner
171
+
172
+ </table>
173
+ <button name=submitBtn value="1">Submit 1</button>
174
+ <button name=submitBtn value="2">Submit 2</button>
175
+ </form>
176
+
177
+
178
+ <section id="dataOut"></section>
179
+
180
+ <section id="eventsOut"></section>
181
+
182
+ <script type="module">
183
+ function updateData(e) {
184
+ const data = new FormData(form, e?.submitter);
185
+ dataOut.innerHTML = dump(Object.fromEntries(data));
186
+ }
187
+ import {dump} from 'https://cdn.jsdelivr.net/gh/nuxodin/dump.js@main/mod.min.js';
188
+ form.addEventListener('input', updateData);
189
+ form.addEventListener('submit', e => {
190
+ e.preventDefault();
191
+ updateData(e);
192
+ });
193
+ updateData();
194
+
195
+
196
+ import {EventsExplorer} from '../../../u2/tools/eventsExplorer.js';
197
+ const eventsExpl = new EventsExplorer(
198
+ eventsOut,
199
+ form,
200
+ ['input', 'change', 'focus', 'blur', 'focusin', 'focusout', 'select', 'submit']
201
+ );
202
+ eventsExpl.start();
203
+ </script>
204
+
205
+
206
+ <h3>u2-input with combinations</h3>
207
+ <br>
208
+ before
209
+ <u2-input>
210
+ <u2-ico slot=start icon=person inline></u2-ico>
211
+ <u2-tooltip>Username</u2-tooltip>
212
+ <input type="text">
213
+ <button slot=end style="border-radius:0; padding:0 .4em; align-self:stretch; display:flex; align-items:center; justify-content:center;">
214
+ <u2-ico icon=save inline></u2-ico>
215
+ </button>
216
+ </u2-input>
217
+ baseline correct?
218
+ <u2-input>
219
+ <button slot=start style="border-radius:0; padding:0 .4em; align-self:stretch; display:flex; align-items:center; justify-content:center;">
220
+ <u2-ico icon=minus inline></u2-ico>
221
+ </button>
222
+ <input type=number style="text-align:center; appearance: textfield;">
223
+ <button slot=end style="border-radius:0; padding:0 .4em; align-self:stretch; display:flex; align-items:center; justify-content:center;">
224
+ <u2-ico icon=plus inline></u2-ico>
225
+ </button>
226
+ </u2-input>
227
+ after
228
+
229
+ <h3>font-size</h3>
230
+ <u2-input style="font-size:10px">
231
+ <u2-ico slot=start inline icon=person></u2-ico>
232
+ <u2-tooltip>Username</u2-tooltip>
233
+ <input type="text">
234
+ <button slot=end style="padding:0 .4em; align-self:stretch; display:flex; align-items:center; justify-content:center;">
235
+ <u2-ico icon=save inline></u2-ico>
236
+ </button>
237
+ </u2-input>
238
+
239
+ <br>
240
+
241
+ <u2-input style="font-size:40px; inline-size:auto;">
242
+ <button slot=start style="padding:0 .4em; align-self:stretch; display:flex; align-items:center; justify-content:center;">
243
+ <u2-ico icon=minus inline></u2-ico>
244
+ </button>
245
+ <input type=number style="text-align:center; appearance: textfield; flex:0 0 3em; width:3em">
246
+ <button slot=end style="padding:0 .4em; align-self:stretch; display:flex; align-items:center; justify-content:center;">
247
+ <u2-ico icon=plus inline></u2-ico>
248
+ </button>
249
+ </u2-input>
250
+
251
+ </section>
252
+
253
+ <style>
254
+ xu2-input:has(:focus-visible) {
255
+ transition: .15s;
256
+ outline: .4rem solid hsl(130 90% 60% / .2);
257
+ }
258
+ </style>
package/el/masonry/README.md ADDED
@@ -0,0 +1,51 @@
1
+ # &lt;u2-masonry&gt; - element
2
+ Masonry layout with CSS grid fallback
3
+
4
+ - default gap
5
+ - grid fallback
6
+ - grid masonry fallback if supported
7
+ - reorder is animatable
8
+
9
+ ## Usage
10
+
11
+ ```html
12
+ <u2-masonry style="max-width:19rem; margin:auto; gap:.5rem; --u2-Items-width:4rem;">
13
+ <div contenteditable>Masonry layout</div>
14
+ <div contenteditable>item2</div>
15
+ <div contenteditable>item3</div>
16
+ <div contenteditable>item4</div>
17
+ <div contenteditable>item5</div>
18
+ <div contenteditable>item6</div>
19
+ <div contenteditable>item7</div>
20
+ </u2-masonry>
21
+ ```
22
+
23
+ ```css
24
+ u2-masonry {
25
+ gap:1rem;
26
+ column-gap:2rem;
27
+ --u2-Items-width:8rem;
28
+ }
29
+ u2-masonry > * {
30
+ border:1px solid black;
31
+ padding:.5em;
32
+ }
33
+ ```
34
+
35
+ ## Install
36
+
37
+ ```html
38
+ <link href="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/masonry/masonry.min.css" rel=stylesheet>
39
+ <script src="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/masonry/masonry.min.js" type=module async></script>
40
+ ```
41
+
42
+ ## Demos
43
+
44
+ [minimal.html](http://gcdn.li/u2ui/u2@main/el/masonry/tests/minimal.html)
45
+ [test.html](http://gcdn.li/u2ui/u2@main/el/masonry/tests/test.html)
46
+
47
+ ## About
48
+
49
+ - MIT License, Copyright (c) 2022 <u2> (like all repositories in this organization) <br>
50
+ - Suggestions, ideas, finding bugs and making pull requests make us very happy. ♥
51
+
package/el/masonry/manifest.json ADDED
@@ -0,0 +1,60 @@
1
+ {
2
+ "schemaVersion": "1.0.0",
3
+ "readme": "README.md",
4
+ "modules": [
5
+ {
6
+ "kind": "javascript-module",
7
+ "path": "masonry.js",
8
+ "declarations": [
9
+ {
10
+ "kind": "class",
11
+ "description": "Masonry Layout",
12
+ "name": "u2-masonry",
13
+ "members": [],
14
+ "events": [],
15
+ "attributes": [],
16
+ "cssProperties": [
17
+ {
18
+ "name": "--u2-Items-width",
19
+ "description": "The max-width (if available) of the masonry items",
20
+ "syntax": "<length>",
21
+ "u2Examples": ["10rem","100px","10%"]
22
+ },{
23
+ "name": "--u2-Gap",
24
+ "description": "The gap between the masonry items",
25
+ "syntax": "<length>",
26
+ "u2Examples": ["1rem","10px","1%"]
27
+ },{
28
+ "name": "--u2-Col-gap",
29
+ "description": "The gap between the masonry columns",
30
+ "syntax": "<length>",
31
+ "u2Examples": ["1rem","10px","1%"]
32
+ },{
33
+ "name": "--u2-Row-gap",
34
+ "description": "The gap between the masonry rows",
35
+ "syntax": "<length>",
36
+ "u2Examples": ["1rem","10px","1%"]
37
+ }
38
+ ],
39
+ "cssParts": [],
40
+ "superclass": {
41
+ "name": "HTMLElement"
42
+ },
43
+ "tagName": "u2-masonry",
44
+ "customElement": true
45
+ }
46
+ ],
47
+ "exports": [
48
+ {
49
+ "kind": "custom-element-definition",
50
+ "name": "u2-masonry",
51
+ "declaration": {
52
+ "name": "u2-masonry",
53
+ "module": "masonry.js"
54
+ }
55
+ }
56
+ ]
57
+ }
58
+ ]
59
+ }
60
+
package/el/masonry/masonry.css ADDED
@@ -0,0 +1,27 @@
1
+ u2-masonry {
2
+ --u2-Items-width: 10rem;
3
+ --u2-Gap: 1rem;
4
+ --u2-Col-gap: var(--u2-Gap);
5
+ --u2-Row-gap: var(--u2-Gap);
6
+ display: grid;
7
+ column-gap: var(--u2-Col-gap);
8
+ row-gap: var(--u2-Row-gap);
9
+ position: relative !important; /* items are placed absolute */
10
+ }
11
+
12
+ u2-masonry > * {
13
+ position:relative !important;
14
+ margin:0 !important;
15
+ box-sizing:border-box !important;
16
+ }
17
+
18
+ u2-masonry.-Js > * {
19
+ position: absolute !important;
20
+ }
21
+
22
+ u2-masonry:not(:defined) {
23
+ /* grid-template-columns: repeat(auto-fill, minmax( var(--u2-Items-width), 1fr) ); /* min() not supported everywhere? */
24
+ grid-template-columns: repeat(auto-fill, minmax( min(var(--u2-Items-width), 100%) , 1fr) );
25
+ /* grid-auto-flow:dense; /* why */
26
+ grid-template-rows: masonry; /* native css only fallback (firefox, safari?) */
27
+ }
package/el/masonry/masonry.js ADDED
@@ -0,0 +1,92 @@
1
+
2
+
3
+ class masonry extends HTMLElement{
4
+ constructor(){
5
+ super();
6
+ this.classList.add('-Js');
7
+ this.rObserver = new ResizeObserver(() => this.render());
8
+ }
9
+ connectedCallback(){
10
+ this.render();
11
+ this.rObserver.observe(this);
12
+ }
13
+ disconnectedCallback(){
14
+ this.rObserver.unobserve(this);
15
+ }
16
+ render(){
17
+ const widthContainer = this.clientWidth;
18
+ if (!widthContainer) return;
19
+ let minWidth = cssLengthToPixelsStyle(this, '--u2-Items-width') || 200;
20
+ const rowGap = cssLengthToPixelsStyle(this, 'row-gap') ?? 0;
21
+ const columnGap = cssLengthToPixelsStyle(this, 'column-gap') ?? 0;
22
+
23
+ minWidth = Math.min(widthContainer, minWidth);
24
+
25
+ const columns = Math.floor((widthContainer + columnGap) / (minWidth + columnGap));
26
+ const columnWidth = (widthContainer - columnGap * (columns - 1)) / columns;
27
+ const columnHeights = [];
28
+ for (let i = 0; i < columns; i++){
29
+ columnHeights[i] = [i, 0];
30
+ }
31
+
32
+ requestAnimationFrame(() => { // todo: prevent reflow: set all widths first
33
+ for (const current of this.children){
34
+ if (current.offsetParent === null) continue;
35
+ current.style.width = columnWidth + 'px';
36
+ current.style.left = columnHeights[0][0] * (columnWidth + columnGap) + 'px';
37
+ current.style.top = columnHeights[0][1] + 'px';
38
+ columnHeights[0][1] += current.offsetHeight + rowGap;
39
+ columnHeights.sort(sortByHeight);
40
+ this.rObserver.observe(current); // performance ok?
41
+ }
42
+ this.style.height = columnHeights[columns - 1][1] - rowGap + 'px';
43
+ });
44
+ }
45
+ }
46
+
47
+ customElements.define('u2-masonry', masonry);
48
+
49
+
50
+ function sortByHeight(a, b){
51
+ return a[1] - b[1] || a[0] - b[0];
52
+ }
53
+
54
+
55
+ /* helper */
56
+ function cssLengthToPixelsStyle(element, property) {
57
+ const length = getComputedStyle(element).getPropertyValue(property);
58
+ return cssLengthToPixels(length, element);
59
+ }
60
+ function cssLengthToPixels(length, element) {
61
+ if (length === undefined) return undefined;
62
+ length = length.trim();
63
+ const value = parseFloat(length);
64
+ const unit = length.match(/\D+$/)[0];
65
+ switch (unit) {
66
+ case '':
67
+ case 'px':
68
+ return value;
69
+ case 'em':
70
+ const fontSize = parseFloat(getComputedStyle(element).fontSize);
71
+ return value * fontSize;
72
+ case 'rem':
73
+ const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
74
+ return value * rootFontSize;
75
+ case '%':
76
+ const parentSize = parseFloat(getComputedStyle(element.parentNode).width);
77
+ return (value / 100) * parentSize;
78
+ case 'vh':
79
+ return value * (innerHeight / 100);
80
+ case 'vw':
81
+ return value * (innerWidth / 100);
82
+ case 'vmin':
83
+ return value * (Math.min(innerHeight, innerWidth) / 100);
84
+ case 'vmax':
85
+ return value * (Math.max(innerHeight, innerWidth) / 100);
86
+ case 'pt':
87
+ return value * 96 / 72;
88
+ default:
89
+ console.error('Unsupported length unit:', unit);
90
+ return NaN;
91
+ }
92
+ }
package/el/masonry/tests/minimal.html ADDED
@@ -0,0 +1,39 @@
1
+ <!DOCTYPE html>
2
+ <html lang=en>
3
+ <head>
4
+ <meta charset=utf-8>
5
+ <meta name=viewport content="width=device-width">
6
+ <title>test</title>
7
+ <script src="../../../u2/tests/test-init.js" type=module async></script>
8
+
9
+ <link rel=stylesheet href="../../../css/classless/full.css">
10
+ <link rel=stylesheet href="../../../css/classless/simple.css">
11
+
12
+ <link href="../masonry.css" rel=stylesheet>
13
+ <script src="../masonry.js" type=module async></script>
14
+
15
+ <body>
16
+
17
+ <section class=main>
18
+ <u2-masonry style="max-width:19rem; margin:auto; gap:.5rem; --u2-Items-width:4rem;">
19
+ <div contenteditable>Masonry layout</div>
20
+ <div contenteditable>item2</div>
21
+ <div contenteditable>item3</div>
22
+ <div contenteditable>item4</div>
23
+ <div contenteditable>item5</div>
24
+ <div contenteditable>item6</div>
25
+ <div contenteditable>item7</div>
26
+ </u2-masonry>
27
+ </section>
28
+
29
+ <style class=main>
30
+ u2-masonry {
31
+ gap:1rem;
32
+ column-gap:2rem;
33
+ --u2-Items-width:8rem;
34
+ }
35
+ u2-masonry > * {
36
+ border:1px solid black;
37
+ padding:.5em;
38
+ }
39
+ </style>
package/el/masonry/tests/test.html ADDED
@@ -0,0 +1,42 @@
1
+ <!DOCTYPE html>
2
+ <html lang=en>
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width">
6
+ <title>test</title>
7
+
8
+ <script src="../../../u2/tests/test-init.js" type=module async></script>
9
+ <script src="../../../u2/auto.js" type=module async></script>
10
+
11
+ <link rel=stylesheet href="../../../css/classless/full.css">
12
+ <link rel=stylesheet href="../../../css/classless/simple.css">
13
+
14
+ <link href="../masonry.css" rel=stylesheet>
15
+ <script src="../masonry.js" type=module async></script>
16
+ <body>
17
+
18
+ <section class=main>
19
+ <h1>masonry element</h1>
20
+ <div style="resize:both; overflow: auto; background:var(--color-area); padding:1rem;">
21
+ <u2-masonry>
22
+ <div contenteditable>item1 all items are contenteditable</div>
23
+ <div contenteditable>item2</div>
24
+ <div contenteditable>item3</div>
25
+ <div contenteditable>item4</div>
26
+ <div contenteditable>item5</div>
27
+ <div contenteditable>item6</div>
28
+ <div contenteditable>item7</div>
29
+ </u2-masonry>
30
+ </div>
31
+ </section>
32
+
33
+ <u2-code trim editable>
34
+ <style class=main>
35
+ u2-masonry > * {
36
+ border:1rem solid black;
37
+ background: #fff;
38
+ padding:.5em;
39
+ transition:.4s;
40
+ }
41
+ </style>
42
+ </u2-code>
package/el/number/README.md ADDED
@@ -0,0 +1,47 @@
1
+ # &lt;u2-number&gt; - element
2
+ Displays formatted numbers
3
+
4
+ ## Usage
5
+
6
+ ```html
7
+ Number: <u2-number value="8987.2345" digits="2">8'987.23</u2-number>
8
+ ```
9
+
10
+ ```css
11
+ u2-number {
12
+ font-size: 2em;
13
+ }
14
+ ```
15
+
16
+ ## Install
17
+
18
+ ```html
19
+ <link href="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/number/number.min.css" rel=stylesheet>
20
+ <script src="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/number/number.min.js" type=module async></script>
21
+ ```
22
+
23
+ ## Demos
24
+
25
+ [minimal.html](http://gcdn.li/u2ui/u2@main/el/number/tests/minimal.html)
26
+ [test.html](http://gcdn.li/u2ui/u2@main/el/number/tests/test.html)
27
+
28
+ ## Attributes
29
+
30
+ Attribute | Options | Default | Description
31
+ --- | --- | --- | ---
32
+ `lang` | language | parent lang | If not present navigator.language is used
33
+ `value` | number | | The number to display
34
+ `digits` | number | | The number of digits after the decimal point
35
+ `currency` | string | | The currency of the number
36
+ `unit` | string | | The unit of the number
37
+ `percent` | boolean | | The number is a percentage
38
+
39
+ `currency`, `unit` and `percent` are mutually exclusive.
40
+
41
+ innerHTML is evaluated as value if value-attribute is not present, else its simply a fallback for when no javascript is available
42
+
43
+ ## About
44
+
45
+ - MIT License, Copyright (c) 2022 <u2> (like all repositories in this organization) <br>
46
+ - Suggestions, ideas, finding bugs and making pull requests make us very happy. ♥
47
+