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/u2/tests/test-init.js ADDED
@@ -0,0 +1,35 @@
1
+ import 'https://cdn.jsdelivr.net/gh/nuxodin/lazyfill/mod.min.js';
2
+ import 'https://cdn.jsdelivr.net/gh/nuxodin/lazyfill/htmlfills.min.js';
3
+ import 'https://cdn.jsdelivr.net/gh/nuxodin/cleanup.js/mod.min.js'
4
+
5
+ document.head.insertAdjacentHTML(
6
+ 'afterend',`
7
+ <style>
8
+ button[onclick] {
9
+ text-align: left;
10
+ --line-height:1.3em;
11
+ padding-inline: .75em;
12
+ padding-block: .5em;
13
+ margin-inline: 0;
14
+ margin-block: .5em;
15
+ }
16
+ button[onclick]::after {
17
+ content: attr(onclick);
18
+ display: block;
19
+ font-size: .7rem;
20
+ font-family:monospace;
21
+ opacity:.8;
22
+ }
23
+ :is(style,script)[contenteditable] {
24
+ display:block;
25
+ }
26
+ u2-code {
27
+ margin-block: 2em;
28
+ max-height: 40em;
29
+ font-size:13.5px;
30
+ border:1px solid #ccc;
31
+ padding:1em;
32
+ box-shadow: 0 0 10px rgba(0,0,0,.1);
33
+ }
34
+ </style>
35
+ `);
package/u2/tests/test.html ADDED
@@ -0,0 +1,355 @@
1
+ <!DOCTYPE html>
2
+ <html lang=en>
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width">
6
+ <title>Demo Page | U2-Design-System</title>
7
+ <script src="./test-init.js" type=module async></script>
8
+ <script src="../auto.js" type=module async></script>
9
+
10
+ <script type="module">
11
+ import {contextMenu} from '../../js/contextmenu/contextmenu.js';
12
+ contextMenu.add([{
13
+ label:'About u2-ui',
14
+ shortcut:'ctrl+F1',
15
+ action(e) { alert('todo') },
16
+ icon: 'info'
17
+ },{
18
+ label:'View Source',
19
+ action(e) { open('https://github.com/u2ui/u2/blob/main/tests/test.html') },
20
+ icon: 'code'
21
+ }]);
22
+ </script>
23
+
24
+ <body>
25
+ <style>
26
+ section,
27
+ body > footer,
28
+ body > header {
29
+ padding-top:2rem;
30
+ padding-bottom:2rem;
31
+ }
32
+ body > footer {
33
+ border-top:.1em solid var(--color);
34
+ text-align:center;
35
+ }
36
+ .u2-card1 {
37
+ text-align:center;
38
+ background-color:var(--color-bg);
39
+ background-color:var(--color-light);
40
+ font-size:.9rem;
41
+ }
42
+ u2-tabs [role=tabpanel] {
43
+ border: 1px solid var(--color-line);
44
+ margin-top:-1px;
45
+ max-height:30rem;
46
+ }
47
+ </style>
48
+
49
+
50
+ <div class=u2-card1 u2-parallax style="position:absolute; top:200px; right:20px; width:13em; --u2-parallax-speed:.1; font-size:12px; padding:10px;">
51
+ <h2>Costumize</h2>
52
+ <label>
53
+ Hue<br>
54
+ <input type=range min=0 max=360 oninput="document.documentElement.style.setProperty('--hsl-h', this.value)">
55
+ </label>
56
+ <label>
57
+ Saturation<br>
58
+ <input type=range min=0 max=100 oninput="document.documentElement.style.setProperty('--hsl-s', this.value+'%')">
59
+ </label>
60
+ <label>
61
+ Lightness<br>
62
+ <input type=range min=0 max=60 oninput="document.documentElement.style.setProperty('--hsl-l', this.value+'%')">
63
+ </label>
64
+ <label>
65
+ Font Size<br>
66
+ <input type=range min=7 max=20 step=".25" oninput="document.documentElement.style.setProperty('font-size', 'calc('+this.value+'px + .7vmin)')">
67
+ </label>
68
+ </div>
69
+
70
+ <header role=banner style="text-align:center; box-shadow:var(--shadow);" class=u2-parallax-bg-stage>
71
+ <u2-parallax-bg style="background-color:black">
72
+ <u2-carousel autoplay tabindex=0 style="position:absolute; inset:0">
73
+ <img src="https://picsum.photos/2000/700?random=1" alt="x" loading=lazy width=2000 height=700>
74
+ <img src="https://picsum.photos/2000/700?random=2" alt="x" loading=lazy width=2000 height=700>
75
+ <img src="https://picsum.photos/2000/700?random=3" alt="x" loading=lazy width=2000 height=700>
76
+ <img src="https://picsum.photos/2000/700?random=4" alt="x" loading=lazy width=2000 height=700>
77
+ <img src="https://picsum.photos/2000/700?random=5" alt="x" loading=lazy width=2000 height=700>
78
+ <img src="https://picsum.photos/2000/700?random=6" alt="x" loading=lazy width=2000 height=700>
79
+ <img src="https://picsum.photos/2000/700?random=7" alt="x" loading=lazy width=2000 height=700>
80
+ </u2-carousel>
81
+ </u2-parallax-bg>
82
+ <h1 class=u2-width style="color:white; margin-top:20rem; margin-bottom:1rem; filter:drop-shadow(0 0 10px black)">
83
+ <u2-typewriter autoplay loop>
84
+ <u2-textfit contenteditable style="font-weight:bold">U2 Design System</u2-textfit>
85
+ <u2-textfit contenteditable>Presentation</u2-textfit></u2-typewriter>
86
+ </h1>
87
+ </header>
88
+
89
+ <main class=u2-width>
90
+
91
+ <section class=u2-grid>
92
+ <div class=u2-card1 u2-href="#feaures">
93
+ <u2-ico>♥</u2-ico>
94
+ <h3>Features</h3>
95
+ <p>Progressive, declarative, responsive, easy...</p>
96
+ <a href="#feaures">more</a>
97
+ </div>
98
+ <div class=u2-card1 u2-href="#reposSec">
99
+ <u2-ico>🍽</u2-ico>
100
+ <h3>Repos</h3>
101
+ <p>Browse the overview of all modules...</p>
102
+ <a href="#repos">more</a>
103
+ </div>
104
+ <div class=u2-card1 u2-href="#customize">
105
+ <u2-ico>📱</u2-ico>
106
+ <script>
107
+ const esc = html => html.replace(/[<>"']/g, c => `&${{'<':'lt', '>':'gt', '"':'quot', "'":'#039'}[c]};`);
108
+ document.write('<u2-qrcode style="width:8rem; margin:auto">'+esc(location.href)+'</u2-qrcode>')
109
+ </script>
110
+ </div>
111
+ </section>
112
+
113
+ <section id=reposSec>
114
+ <h2>Usage</h2>
115
+ <p>For fast prototyping just insert this:</p>
116
+ <u2-code trim style="font-size:max(13px, .7rem); padding:.5rem">
117
+ <script type=text/html>
118
+ <script src="../../../u2/auto.min.js" type=module crossorigin async><\/script>
119
+ </script>
120
+ </u2-code>
121
+ <u2-alert open dismissible icon=star>
122
+ Don't forget to start the Project on Github
123
+ <a href="https://github.com/u2ui/u2" slot="action">Github</a>
124
+ </u2-alert>
125
+ </section>
126
+ <section id=reposSec>
127
+ <h2>Repos</h2>
128
+ <script type=module>
129
+ const repos = await fetch('../projects.json').then(res=>res.json());
130
+ const entries = repos.sort((r1,r2)=>{
131
+ const ext1 = r1.name.replace(/^.*\.([^.]+)/,'$1');
132
+ const ext2 = r2.name.replace(/^.*\.([^.]+)/,'$1');
133
+ if (ext1 === 'el') return -1;
134
+ if (ext2 === 'el') return 1;
135
+ if(ext1 < ext2) return -1;
136
+ if(ext1 > ext2) return 1;
137
+ return 0;
138
+ });
139
+ let str = ''
140
+ for (let repo of entries) {
141
+ let url = `https://github.com/u2ui/${repo.name}`;
142
+ let release = repo.release_latest;
143
+
144
+ let repoDate = new Date(repo.pushed_at);
145
+ let releaseDate = new Date(release.published_at);
146
+
147
+ const masterNotPushed = repoDate > releaseDate
148
+ str +=
149
+ `<tr u2-href="${url}" style="--line-height:1.3">
150
+ <td ${repo.description?`xaria-label="${repo.description}"`:''}>
151
+ <a href="${url}"><b>${repo.name}</b></a>
152
+ <br><small>${repo.description??''}</small>
153
+ <td ${masterNotPushed?'style="color:#800"':''}>
154
+ ${release.tag_name}
155
+ <br><small><u2-time datetime="${repoDate.toISOString()}"></small>
156
+ <td> <u2-counter>${repo.stargazers_count}</u2-counter> ⭐
157
+ <td> ${repo.open_issues} 🐞
158
+ `
159
+ }
160
+ document.getElementById('repos').innerHTML = str;
161
+
162
+ </script>
163
+ <figure style="max-height:60vh; overflow:auto; padding:0">
164
+ <table class="u2-table -Sticky">
165
+ <thead>
166
+ <tr>
167
+ <th> Repo
168
+ <th> Version
169
+ <th> Stars
170
+ <th> Issues
171
+ <tbody id=repos>
172
+ </table>
173
+ </figure>
174
+ </section>
175
+
176
+ <section id=feaures>
177
+ <h2>Features</h2>
178
+ <ul>
179
+ <li>Easy to implement</li>
180
+ <li>Tooling optional</li>
181
+ <li>Small</li>
182
+ <li>Accessible</li>
183
+ <li>Responsive</li>
184
+ <li>No media-queries</li>
185
+ </ul>
186
+ </section>
187
+
188
+
189
+ <section>
190
+ <h2>Default Styles</h2>
191
+ <u2-tabs>
192
+ <h2 slot="title">Inline Elements</h2>
193
+ <section>
194
+ This is a paragraph with multiple inline elements. The <span>span</span> is not styled,
195
+ but you may have <a href="#">some links with the a tag</a>; also you can
196
+ <em>add emphasis with em</em> or <i>also with i</i>; Highlight the words by
197
+ <strong>using strong</strong> or just <b>bold with the b tag</b>; of course, you can
198
+ <u>underline</u> or <s>strikethrough text</s>; abbreviations are great, as you may have
199
+ <abbr title="too many abbreviations">TMA</abbr>; <code>inline code</code> is cool too;
200
+ <mark>Highlight text with mark</mark> or display a <kbd>Key</kbd>. You can also have
201
+ <q>inline quotes with q</q>, or <samp>results from an operation with samp</samp> or a
202
+ <var>variable</var>, also there's <small>small text</small>, text
203
+ with<sup>superscript</sup>, or text with<sub>subscript</sub>... not to mention you can
204
+ have time too. For example, this paragraph was originally written in <time>2020</time>.
205
+ Not to forget about <dfn>definitions</dfn>! Also <del>del was deleted</del> and
206
+ <ins>ins was inserted</ins>.
207
+ </section>
208
+
209
+ <h2 slot="title">Headings / Paragraphs</h2>
210
+ <section>
211
+ <h1>Header 1 demo<br>with line break</h1>
212
+ <p>A paragraph Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium delectus voluptatum ex excepturi ducimus sunt soluta? Omnis harum molestiae nisi facere veritatis? Laudantium repellat temporibus, molestiae rerum aperiam odio doloremque!</p>
213
+ <p>One more paragarph dolor sit amet consectetur adipisicing elit. Accusantium delectus voluptatum ex excepturi ducimus sunt soluta? Omnis harum molestiae nisi facere veritatis? Laudantium repellat temporibus, molestiae rerum aperiam odio doloremque!</p>
214
+ <h2>Header 2 demo<br>with line break</h2>
215
+ <h3>Header 3 demo<br>with line break</h3>
216
+ <h4>Header 4 demo<br>with line break</h4>
217
+ <h5>Header 5 demo<br>with line break</h5>
218
+ <h6>Header 6 demo<br>with line break</h6>
219
+ </section>
220
+
221
+ <h2 slot="title">Form</h2>
222
+ <section>
223
+ <div class="u2-table -Fields -Flex">
224
+ <div>
225
+ <label>
226
+ <span>Select</span>
227
+ <span>
228
+ <select>
229
+ <option>Black</option>
230
+ <option>White</option>
231
+ </select>
232
+ </span>
233
+ </label>
234
+ <label>
235
+ <span>Input</span>
236
+ <span><input></span>
237
+ </label>
238
+ <label>
239
+ <span>Checkbox</span>
240
+ <span><input type=checkbox></span>
241
+ </label>
242
+ <label>
243
+ <span>Textfield</span>
244
+ <span><textarea></textarea></span>
245
+ </label>
246
+ <label>
247
+ <span>Range</span>
248
+ <span><input type=range></span>
249
+ </label>
250
+ <label>
251
+ <span>Date</span>
252
+ <span><input type=date></span>
253
+ </label>
254
+ <label>
255
+ <span>Time</span>
256
+ <span><input type=time></span>
257
+ </label>
258
+ <label>
259
+ <span></span>
260
+ <span>
261
+ <button u2-confirm>
262
+ <u2-tooltip>
263
+ <small>A request for confirmation follows</small>
264
+ </u2-tooltip>
265
+ Button
266
+ </button>
267
+ </span>
268
+ </label>
269
+ </div>
270
+ </div>
271
+ </section>
272
+
273
+ </u2-tabs>
274
+
275
+ </section>
276
+
277
+
278
+ <section id=compat>
279
+ <h2>Compatibility</h2>
280
+ <figure>
281
+ <table class=u2-table>
282
+ <thead>
283
+ <tr>
284
+ <th> Browser
285
+ <th> Version
286
+ <tbody>
287
+ <tr>
288
+ <td> Firefox
289
+ <td> latest 3
290
+ <tr>
291
+ <td> Edge
292
+ <td> latest 3
293
+ <tr>
294
+ <td> Chrome
295
+ <td> latest 3
296
+ <tr>
297
+ <td> Safari
298
+ <td> 10.3
299
+ <tr>
300
+ <td> IE
301
+ <td> no
302
+ </table>
303
+ </figure>
304
+ </section>
305
+
306
+ <section>
307
+ <h2>FAQ</h2>
308
+ <details>
309
+ <summary>no IE11?</summary>
310
+ <p>Since IE11 is slowly dying, we will no longer support it. When your next project goes online, this browser will no longer be relevant. Or your project without IE11 support, helps to kill IE11.</p>
311
+ </details>
312
+ <details>
313
+ <summary>What if JS is disabled?</summary>
314
+ <p>We make sure that there is always a usable CSS-only fallback.<br> Try our Demos without JS</p>
315
+ </details>
316
+ <details>
317
+ <summary>Compatibility with other Frameworks</summary>
318
+ <p>
319
+ We try to make as few style breaks as possible.
320
+ Nevertheless, we have useful default styles that could influence third code.
321
+ For example, we have <code>* { box-sizing:border-box };</code>
322
+ and line-heigths should be defined as "--line-height:1.3em";
323
+ The inheritance of line-height is pretty broken, with our method we fix that.
324
+ </p>
325
+ </details>
326
+ </section>
327
+
328
+ </main>
329
+
330
+ <footer role=contentinfo>
331
+ <div class=u2-width>
332
+ <div class=u2-flex style="justify-content: space-between">
333
+ <div>
334
+ <form class=u2-input aria-label="newsletter registration">
335
+ <input placeholder="john@doh.com">
336
+ <button>
337
+ los <u2-ico inline>🚀</u2-ico>
338
+ </button>
339
+ </form>
340
+ </div>
341
+ <div style="text-align:end">
342
+ <ul class=u2-unstyle>
343
+ <li>
344
+ <button class=u2-unstyle onclick="this.nextElementSibling.showModal()">About</button>
345
+ <dialog u2-parallax>
346
+ Made with ♥ by Tobias Buschor
347
+ </dialog>
348
+ <li> <a href="https://github.com/u2ui/" target=_blank>Github</a>
349
+ <li> <a href="https://twitter.com/tobiasbu" target=_blank>Twitter</a>
350
+ <li> <a href="#">Top</a>
351
+ </ul>
352
+ </div>
353
+ </div>
354
+ </div>
355
+ </footer>
package/u2/tools/baseElement.js ADDED
@@ -0,0 +1,95 @@
1
+
2
+ export class BaseElement extends HTMLElement {
3
+
4
+ constructor() {
5
+ super();
6
+ if (typeof this.childListChangedCallback === 'function') {
7
+ this.mutationObserver = new MutationObserver((mutations) => {
8
+ this.childListChangedCallback(mutations);
9
+ });
10
+ }
11
+ }
12
+ connectedCallback() {
13
+ this.mutationObserver?.observe(this, {childList:true});
14
+ this.scheduleRender();
15
+ }
16
+ disconnectedCallback() {
17
+ this.mutationObserver?.disconnect();
18
+ }
19
+
20
+ static _initBase() {
21
+
22
+ /* properties */
23
+ this.attributesMap ??= new Map();
24
+ this.propertiesMap ??= new Map();
25
+
26
+ for (const [key, options] of Object.entries(this.properties)) {
27
+ if (options.attribute === true) options.attribute = key;
28
+ options.property = key;
29
+ this.propertiesMap.set(key, options);
30
+ Object.defineProperty(this.prototype, key, {
31
+ get() {
32
+ return this['_' + key];
33
+ },
34
+ set(value) {
35
+ this['_' + key] = value;
36
+ if (options.attribute && options.reflect) {
37
+ const attrVal = propToAttr(value, options);
38
+ attrVal == null ? this.removeAttribute(options.attribute) : this.setAttribute(options.attribute, attrVal);
39
+ }
40
+ this.requestUpdate();
41
+ }
42
+ });
43
+ if (options.attribute) this.attributesMap.set(options.attribute, options);
44
+ }
45
+
46
+ /* only once */
47
+ this._initBase = null;
48
+ }
49
+
50
+ static get observedAttributes() {
51
+ this._initBase?.();
52
+ return [...this.attributesMap.keys()];
53
+ }
54
+
55
+ attributeChangedCallback(name, oldValue, newValue) {
56
+ if (oldValue === newValue) return;
57
+ const config = this.constructor.attributesMap.get(name);
58
+ const propValue = attrToProp(newValue, config);
59
+ const propName = config.property;
60
+ if (this['_'+propName] !== propValue) this[propName] = propValue;
61
+ }
62
+
63
+ requestUpdate() {
64
+ this.scheduledRender();
65
+ }
66
+
67
+ scheduledRender() {
68
+ if ( this._isRendering ) return;
69
+ this._isRendering = true;
70
+ requestAnimationFrame(() => {
71
+ this._isRendering = false;
72
+ this.render();
73
+ });
74
+ }
75
+
76
+ locales() { // todo? for tables i should check col and colgroup https://www.w3.org/TR/1999/REC-html401-19991224/struct/tables.html#alignment-inheritance
77
+ let langEl = this.closest('[lang]')||document.documentElement;
78
+ return Intl.getCanonicalLocales([langEl.lang, ...navigator.languages,'en']);
79
+ }
80
+ }
81
+
82
+
83
+
84
+ function attrToProp(value, {type}) {
85
+ if (type === 'boolean') return value != null;
86
+ if (type === 'number') return parseFloat(value);
87
+ if (type === 'tokens') return new Set(value.split(' '));
88
+ return value;
89
+ }
90
+ function propToAttr(value, {type}) {
91
+ if (type === 'boolean') return value ? '' : null;
92
+ if (type === 'number') return value.toString();
93
+ if (type === 'tokens') return [...value].join(' ');
94
+ return String(value);
95
+ }
package/u2/tools/baseElement.test.html ADDED
@@ -0,0 +1,119 @@
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></script-->
8
+
9
+ <script src="../../u2/auto.js" type=module></script>
10
+
11
+ <link rel=stylesheet href="../../css/classless/full.css">
12
+ <link rel=stylesheet href="../../css/classless/simple.css">
13
+
14
+
15
+ <body>
16
+
17
+ <section>
18
+
19
+ <script type=module>
20
+ import {dump, domRender} from 'https://cdn.jsdelivr.net/gh/nuxodin/dump.js@x.x/mod.min.js';
21
+ import './ce-inspector.js';
22
+
23
+ import {BaseElement} from './baseElement.js';
24
+
25
+ class TestElement extends BaseElement {
26
+
27
+ static properties = {
28
+ number: {
29
+ attribute: true,
30
+ type: 'number',
31
+ },
32
+ boolean: {
33
+ attribute: true,
34
+ type: 'boolean',
35
+ },
36
+ string: {
37
+ attribute: true,
38
+ type: 'string',
39
+ },
40
+ tokens: {
41
+ attribute: true,
42
+ type: 'tokens',
43
+ },
44
+ propAttr: {
45
+ attribute: 'prop-attr',
46
+ type: 'string',
47
+ },
48
+ }
49
+
50
+ constructor() {
51
+ super();
52
+ this.attachShadow({mode: 'open'});
53
+ }
54
+
55
+ connectedCallback() {
56
+ this.shadowRoot.innerHTML = `
57
+ <style>
58
+ :host {
59
+ display: block;
60
+ border: 1px solid;
61
+ padding: 1em;
62
+ }
63
+ slot {
64
+ display: block;
65
+ border: 1px solid;
66
+ padding: 1em;
67
+ }
68
+ </style>
69
+ Slot:<slot></slot>
70
+ <div id=data></div>
71
+ `;
72
+ }
73
+ render() {
74
+ this.renderCount = (this.renderCount ?? 0) + 1;
75
+
76
+ const propsObj = {};
77
+ Object.entries(this.constructor.properties).forEach( ([name, config]) => {
78
+ propsObj[name] = {
79
+ value: this[name],
80
+ type: config.type,
81
+ attribute: config.attribute,
82
+ attributeValue: this.getAttribute(config.attribute),
83
+ };
84
+ });
85
+
86
+
87
+ this.shadowRoot.getElementById('data').innerHTML = `
88
+ <h3>Properties</h3>
89
+ ${dump(propsObj)}
90
+ <h3>el.locales()</h3>
91
+ ${dump(this.locales())}
92
+
93
+ <h3>el.innerHTML</h3>
94
+ ${dump(this.innerHTML)}
95
+ <h3>Metrics</h3>
96
+ <div>${this.renderCount}</div>
97
+ `;
98
+
99
+
100
+ }
101
+ }
102
+ customElements.define('test-element', TestElement);
103
+ </script>
104
+
105
+
106
+ </section>
107
+
108
+ <div id="wrapper">
109
+
110
+ <test-element id=testEl number="1234.567" boolean string="hello World" tokens="a b c" prop-attr="test">
111
+ Content
112
+ </test-element>
113
+
114
+ </div>
115
+
116
+ outer:
117
+ <u2-code trim editable element="wrapper"></u2-code>
118
+ inner:
119
+ <u2-code trim editable element="testEl"></u2-code>