u2ui 1.0.1 → 1.4.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -21
- package/README.md +36 -36
- package/attr/behavior/README.md +6 -4
- package/attr/behavior/behavior.js +265 -261
- package/attr/behavior/manifest.json +42 -42
- package/attr/confirm/README.md +8 -8
- package/attr/confirm/confirm.js +86 -90
- package/attr/confirm/manifest.json +42 -42
- package/attr/disableif/README.md +37 -0
- package/attr/disableif/disableif.js +59 -0
- package/attr/disableif/manifest.json +38 -0
- package/attr/draghandle/README.md +15 -15
- package/attr/draghandle/draghandle.js +24 -42
- package/attr/draghandle/manifest.json +30 -0
- package/attr/dropzone/README.md +32 -0
- package/attr/dropzone/dropzone.js +485 -0
- package/attr/dropzone/manifest.json +36 -0
- package/attr/focusgroup/README.md +9 -9
- package/attr/focusgroup/focusgroup.js +97 -100
- package/attr/focusgroup/manifest.json +30 -38
- package/attr/href/README.md +5 -5
- package/attr/href/href.js +50 -42
- package/attr/href/manifest.json +42 -42
- package/attr/intersect/README.md +15 -15
- package/attr/intersect/intersect.js +98 -98
- package/attr/intersect/manifest.json +44 -57
- package/attr/lightbox/README.md +27 -0
- package/attr/lightbox/lightbox.js +120 -0
- package/attr/lightbox/manifest.json +29 -0
- package/attr/movable/README.md +27 -0
- package/attr/movable/manifest.json +47 -0
- package/attr/movable/movable.js +111 -0
- package/attr/navigable/README.md +9 -9
- package/attr/navigable/TargetObserver.js +90 -91
- package/attr/navigable/U2TargetObserver.js +75 -75
- package/attr/navigable/manifest.json +34 -42
- package/attr/navigable/navigable.js +85 -87
- package/attr/parallax/README.md +10 -10
- package/attr/parallax/manifest.json +36 -0
- package/attr/parallax/parallax.js +119 -119
- package/attr/scrollspy/README.md +43 -0
- package/attr/scrollspy/manifest.json +28 -0
- package/attr/scrollspy/scrollspy.js +85 -0
- package/attr/selectable/README.md +42 -0
- package/attr/selectable/SelectionManager.js +171 -0
- package/attr/selectable/manifest.json +33 -0
- package/attr/selectable/selectable.js +28 -0
- package/attr/skin/README.md +15 -16
- package/attr/skin/manifest.json +40 -0
- package/attr/skin/skin.css +49 -50
- package/attr/store/README.md +41 -0
- package/attr/store/manifest.json +28 -0
- package/attr/store/store.js +62 -0
- package/class/badge/README.md +2 -2
- package/class/badge/badge.css +34 -34
- package/class/card/README.md +51 -0
- package/class/card/card.css +31 -0
- package/class/flex/README.md +16 -16
- package/class/flex/flex.css +15 -25
- package/class/grid/README.md +18 -18
- package/class/grid/grid.css +38 -40
- package/class/reset/README.md +6 -6
- package/class/reset/reset.css +8 -8
- package/class/table/README.md +22 -21
- package/class/table/table.css +125 -125
- package/class/unstyle/README.md +7 -5
- package/class/unstyle/unstyle.css +14 -12
- package/class/width/README.md +18 -18
- package/class/width/width.css +21 -22
- package/css/README.md +11 -0
- package/css/base/README.md +8 -2
- package/css/base/base.css +153 -127
- package/css/base/beta.css +34 -50
- package/css/base/full.css +5 -5
- package/css/base/nomotion.css +8 -8
- package/css/base/print.css +36 -36
- package/css/classless/README.md +10 -4
- package/css/classless/aria.css +51 -64
- package/css/classless/classless.css +118 -124
- package/css/classless/full.css +11 -11
- package/css/classless/more.css +314 -340
- package/css/classless/simple.css +314 -103
- package/css/classless/snippeds/a/icons.css +66 -12
- package/css/classless/snippeds/a/tests.html +118 -0
- package/css/classless/snippeds/blockquote/big-quotes.css +36 -0
- package/css/classless/snippeds/blockquote/tests.html +62 -0
- package/css/classless/snippeds/button/square.css +22 -0
- package/css/classless/snippeds/button/tests.html +53 -0
- package/css/classless/snippeds/experiments/aria-header-nav-dropdown.css +46 -0
- package/css/classless/snippeds/hr/gradient.css +2 -2
- package/css/classless/snippeds/hr/section_sign.css +16 -16
- package/css/classless/snippeds/hr/tests.html +49 -49
- package/css/classless/snippeds/p/indent.css +9 -0
- package/css/classless/snippeds/p/initial.css +9 -0
- package/css/classless/snippeds/p/tests.html +60 -0
- package/css/classless/variables.css +132 -99
- package/css/norm/README.md +7 -1
- package/css/norm/beta.css +41 -39
- package/css/norm/norm.css +89 -98
- package/css/norm/oldies.css +71 -60
- package/css/{classes → utils}/README.md +10 -4
- package/css/{classes/classes.css → utils/utils.css} +78 -78
- package/el/accordion/README.md +60 -59
- package/el/accordion/accordion.css +11 -7
- package/el/accordion/accordion.js +211 -258
- package/el/accordion/manifest.json +44 -57
- package/el/alert/README.md +86 -67
- package/el/alert/alert.css +72 -73
- package/el/alert/alert.js +206 -187
- package/el/alert/manifest.json +59 -77
- package/el/breadcrumb/README.md +41 -0
- package/el/breadcrumb/breadcrumb.css +22 -0
- package/el/breadcrumb/breadcrumb.js +119 -0
- package/el/breadcrumb/manifest.json +42 -0
- package/el/buttongroup/README.md +36 -36
- package/el/buttongroup/buttongroup.css +38 -30
- package/el/buttongroup/buttongroup.js +68 -56
- package/el/buttongroup/manifest.json +28 -0
- package/el/bytes/README.md +4 -4
- package/el/bytes/bytes.css +6 -6
- package/el/bytes/bytes.js +98 -97
- package/el/bytes/manifest.json +90 -95
- package/el/calendar/README.md +64 -0
- package/el/calendar/calendar.css +36 -0
- package/el/calendar/calendar.js +391 -0
- package/el/calendar/ext/drag.js +69 -0
- package/el/calendar/ext/keyNavigation.js +101 -0
- package/el/calendar/manifest.json +69 -0
- package/el/carousel/README.md +14 -14
- package/el/carousel/carousel.css +45 -46
- package/el/carousel/carousel.js +398 -371
- package/el/carousel/manifest.json +44 -58
- package/el/carousel-nav/README.md +13 -14
- package/el/carousel-nav/carousel-nav.js +74 -74
- package/el/carousel-nav/manifest.json +31 -0
- package/el/chart/README.md +46 -0
- package/el/chart/chart.css +7 -0
- package/el/chart/chart.js +188 -0
- package/el/chart/engines/apexcharts.js +103 -0
- package/el/chart/engines/billboard.js +79 -0
- package/el/chart/engines/chart.js.js +32 -0
- package/el/chart/engines/chartist.js +74 -0
- package/el/chart/engines/echarts.js +65 -0
- package/el/chart/engines/frappe.js +49 -0
- package/el/chart/engines/nvd3.js +139 -0
- package/el/chart/engines/plotly.js +73 -0
- package/el/chart/manifest.json +54 -0
- package/el/code/README.md +21 -21
- package/el/code/code.css +46 -46
- package/el/code/code.js +291 -289
- package/el/code/manifest.json +59 -66
- package/el/cookiebanner/README.md +70 -0
- package/el/cookiebanner/cookiebanner.css +42 -0
- package/el/cookiebanner/cookiebanner.js +161 -0
- package/el/cookiebanner/extensions/googleConsentMode.js +36 -0
- package/el/cookiebanner/knownItems.js +291 -0
- package/el/cookiebanner/manifest.json +85 -0
- package/el/cookiebanner/ui.js +426 -0
- package/el/copy/README.md +9 -7
- package/el/copy/copy.css +3 -3
- package/el/copy/copy.js +89 -117
- package/el/copy/manifest.json +37 -49
- package/el/counter/README.md +12 -9
- package/el/counter/counter.css +8 -8
- package/el/counter/counter.js +96 -95
- package/el/counter/manifest.json +50 -59
- package/el/drawer/README.md +35 -0
- package/el/drawer/drawer.css +77 -0
- package/el/drawer/drawer.js +166 -0
- package/el/drawer/manifest.json +27 -0
- package/el/fields/README.md +34 -0
- package/el/fields/fields.css +5 -0
- package/el/fields/fields.js +133 -0
- package/el/fields/manifest.json +32 -0
- package/el/ico/README.md +119 -118
- package/el/ico/debug.js +86 -0
- package/el/ico/font/Font Awesome.css +22 -22
- package/el/ico/font/LigatureSymbols.css +7 -7
- package/el/ico/font/Material Icons.css +6 -6
- package/el/ico/font/RemixFilled.css +8 -8
- package/el/ico/font/RemixOutlined.css +8 -8
- package/el/ico/font/old/anicons.css +31 -31
- package/el/ico/font/old/devicons.css +210 -210
- package/el/ico/font/old/material.all.css +36 -36
- package/el/ico/font/old/remix.css +15 -15
- package/el/ico/font/old/utf8.css +54 -54
- package/el/ico/ico.css +122 -110
- package/el/ico/ico.js +163 -189
- package/el/ico/manifest.json +68 -86
- package/el/input/README.md +41 -39
- package/el/input/input.css +95 -35
- package/el/input/input.js +682 -331
- package/el/input/manifest.json +54 -0
- package/el/maintitlebar/README.md +39 -0
- package/el/maintitlebar/maintitlebar.css +40 -0
- package/el/maintitlebar/maintitlebar.js +17 -0
- package/el/maintitlebar/manifest.json +32 -0
- package/el/masonry/README.md +19 -19
- package/el/masonry/manifest.json +49 -60
- package/el/masonry/masonry.css +27 -27
- package/el/masonry/masonry.js +93 -92
- package/el/menubutton/README.md +39 -0
- package/el/menubutton/manifest.json +44 -0
- package/el/{splitbutton/splitbutton.css → menubutton/menubutton.css} +51 -47
- package/el/menubutton/menubutton.js +90 -0
- package/el/number/README.md +9 -6
- package/el/number/manifest.json +162 -121
- package/el/number/number.css +6 -6
- package/el/number/number.js +67 -67
- package/el/out/README.md +5 -5
- package/el/out/manifest.json +26 -38
- package/el/out/out.css +2 -2
- package/el/out/out.js +42 -59
- package/el/pagination/README.md +32 -0
- package/el/pagination/manifest.json +47 -0
- package/el/pagination/pagination.css +27 -0
- package/el/pagination/pagination.js +147 -0
- package/el/parallax-bg/README.md +26 -6
- package/el/parallax-bg/manifest.json +32 -0
- package/el/parallax-bg/parallax-bg.css +13 -13
- package/el/parallax-bg/parallax-bg.js +197 -186
- package/el/qrcode/README.md +7 -7
- package/el/qrcode/manifest.json +32 -43
- package/el/qrcode/package.json +22 -22
- package/el/qrcode/qrcode.css +13 -13
- package/el/qrcode/qrcode.js +53 -45
- package/el/rating/README.md +9 -20
- package/el/rating/manifest.json +52 -65
- package/el/rating/rating.css +10 -10
- package/el/rating/rating.js +148 -139
- package/el/responsive/README.md +43 -0
- package/el/responsive/manifest.json +41 -0
- package/el/responsive/responsive.css +4 -0
- package/el/responsive/responsive.js +143 -0
- package/el/rte/README.md +10 -10
- package/el/rte/manifest.json +33 -0
- package/el/rte/rte.css +9 -9
- package/el/rte/rte.js +56 -56
- package/el/skeleton/README.md +3 -3
- package/el/skeleton/manifest.json +37 -51
- package/el/skeleton/skeleton.css +67 -60
- package/el/skeleton/skeleton.js +71 -72
- package/el/splitpanel/README.md +33 -13
- package/el/splitpanel/manifest.json +36 -49
- package/el/splitpanel/splitpanel.css +20 -17
- package/el/splitpanel/splitpanel.js +117 -116
- package/el/spot/README.md +36 -0
- package/el/spot/manifest.json +55 -0
- package/el/spot/spot.css +23 -0
- package/el/spot/spot.js +106 -0
- package/el/system/README.md +29 -0
- package/el/system/demoHtml.html +660 -0
- package/el/system/manifest.json +32 -0
- package/el/system/styler.js +661 -0
- package/el/system/system.js +84 -0
- package/el/table/README.md +80 -68
- package/el/table/ext/autoFormatTable.js +228 -0
- package/el/table/manifest.json +32 -43
- package/el/table/table.css +4 -59
- package/el/table/table.js +468 -194
- package/el/tabs/README.md +17 -17
- package/el/tabs/manifest.json +44 -59
- package/el/tabs/tabs.css +22 -22
- package/el/tabs/tabs.js +192 -210
- package/el/textfit/README.md +7 -7
- package/el/textfit/manifest.json +33 -45
- package/el/textfit/textfit.css +5 -5
- package/el/textfit/textfit.js +80 -80
- package/el/time/README.md +6 -5
- package/el/time/manifest.json +79 -118
- package/el/time/time.js +179 -168
- package/el/toc/README.md +27 -0
- package/el/toc/manifest.json +36 -0
- package/el/toc/toc.css +3 -0
- package/el/toc/toc.js +85 -0
- package/el/tooltip/README.md +13 -10
- package/el/tooltip/manifest.json +56 -69
- package/el/tooltip/tooltip.css +100 -97
- package/el/tooltip/tooltip.js +146 -82
- package/el/tree/README.md +133 -0
- package/el/tree/ext/dnd.js +53 -0
- package/el/tree/ext/item.js +35 -0
- package/el/tree/manifest.json +61 -0
- package/el/tree/tree.css +18 -0
- package/el/tree/tree.js +236 -0
- package/el/typewriter/README.md +11 -11
- package/el/typewriter/manifest.json +45 -66
- package/el/typewriter/typewriter.css +6 -6
- package/el/typewriter/typewriter.js +161 -166
- package/el/video/README.md +37 -0
- package/el/video/manifest.json +96 -0
- package/el/video/video.js +550 -0
- package/js/Placer/Placer.js +156 -156
- package/js/Placer/README.md +14 -16
- package/js/PointerObserver/PointerObserver-no-scroll.js +146 -0
- package/js/PointerObserver/PointerObserver.js +161 -130
- package/js/PointerObserver/README.md +6 -7
- package/js/SelectorObserver/README.md +9 -9
- package/js/SelectorObserver/SelectorObserver.js +199 -200
- package/js/Tour/README.md +56 -0
- package/js/Tour/Tour.js +156 -0
- package/js/contextmenu/README.md +6 -31
- package/js/contextmenu/contextmenu.js +338 -336
- package/js/dialog/README.md +8 -7
- package/js/dialog/dialog.js +228 -261
- package/js/drag/README.md +28 -0
- package/js/drag/drag.js +38 -0
- package/js/drag/indicateDrop.js +80 -0
- package/js/loading/README.md +24 -0
- package/js/loading/loading.js +139 -0
- package/js/navigator/README.md +26 -0
- package/js/navigator/navigator.js +430 -0
- package/js/navigator/url-change-event.js +29 -0
- package/js/rte/README.md +13 -14
- package/js/rte/old/NodeCleaner.js +315 -315
- package/js/rte/old/Rte/Rte.ui.mjs +154 -154
- package/js/rte/old/Rte/index.mjs +5 -5
- package/js/rte/old/Rte/main.css +189 -189
- package/js/rte/old/old.rte.js +131 -131
- package/js/rte/old/range-selection.old.js +394 -394
- package/js/rte/rte.js +7 -7
- package/js/rte/src/behavior.js +228 -228
- package/js/rte/src/events.js +73 -73
- package/js/rte/src/fixes.js +250 -250
- package/js/rte/src/range.js +469 -472
- package/js/rte/src/rte.js +71 -71
- package/js/rte/src/ui/items/ai.js +166 -167
- package/js/rte/src/ui/items/code.js +93 -93
- package/js/rte/src/ui/items/undo.js +183 -183
- package/js/rte/src/ui.items.js +6 -7
- package/js/rte/src/ui.js +268 -268
- package/js/rte/src/util/indentHtml.js +21 -15
- package/js/serviceWorker/README.md +17 -0
- package/js/serviceWorker/serviceWorker.js +84 -0
- package/js/serviceWorker/sw.js +221 -0
- package/js/shortcut/README.md +6 -6
- package/js/shortcut/shortcut.js +53 -89
- package/package.json +2 -4
- package/theme/brutalist/README.md +10 -0
- package/theme/brutalist/theme.css +98 -0
- package/theme/elegance/README.md +10 -0
- package/theme/elegance/theme.css +120 -0
- package/theme/luxury/README.md +10 -0
- package/theme/luxury/theme.css +107 -0
- package/theme/minimalism/README.md +10 -0
- package/theme/minimalism/theme.css +103 -0
- package/theme/natur/README.md +10 -0
- package/theme/natur/theme.css +101 -0
- package/theme/pastell/README.md +10 -0
- package/theme/pastell/theme.css +99 -0
- package/theme/pop/README.md +10 -0
- package/theme/pop/theme.css +101 -0
- package/theme/prompt.css +175 -0
- package/theme/retro/README.md +10 -0
- package/theme/retro/theme.css +99 -0
- package/theme/soft/README.md +10 -0
- package/theme/soft/theme.css +84 -0
- package/theme/tech/README.md +10 -0
- package/theme/tech/theme.css +98 -0
- package/theme/test/README.md +10 -0
- package/theme/test/theme.css +109 -0
- package/theme/test.html +284 -0
- package/theme/tmp/README.md +10 -0
- package/theme/tmp/theme.css +323 -0
- package/u2/auto.js +156 -161
- package/u2/auto.ui.js +82 -85
- package/u2/plan-scoped-refactoring.md +236 -0
- package/u2/projects.json +757 -467
- package/u2/tools/baseElement.js +217 -95
- package/u2/tools/baseElement.test.html +139 -119
- package/u2/tools/ce-inspector.js +307 -307
- package/u2/tools/ce-inspector.test.html +67 -65
- package/u2/tools/ce-manfest-from-element.js +207 -207
- package/u2/tools/dev-iframe.js +212 -213
- package/u2/tools/dev-iframe.test.html +72 -74
- package/u2/tools/eventsExplorer.js +102 -101
- package/u2/tools/logo/u1.svg +9 -9
- package/u2/tools/promiseElementById.js +14 -0
- package/u2/tools/update.repos.json.js +259 -234
- package/u2/tools/update.skill.js +176 -0
- package/u2/tools/variable-styler.js +317 -0
- package/u2/u2.js +30 -14
- package/u2/utils.js +61 -59
- package/.htaccess +0 -7
- package/attr/behavior/tests/minimal.html +0 -19
- package/attr/behavior/tests/test.html +0 -98
- package/attr/confirm/tests/minimal.html +0 -23
- package/attr/confirm/tests/test.html +0 -79
- package/attr/draghandle/tests/minimal.html +0 -44
- package/attr/focusgroup/tests/minimal.html +0 -27
- package/attr/focusgroup/tests/test.html +0 -154
- package/attr/href/tests/minimal.html +0 -17
- package/attr/href/tests/test.html +0 -70
- package/attr/intersect/tests/minimal.html +0 -30
- package/attr/intersect/tests/test.html +0 -64
- package/attr/navigable/tests/U1TargetObserver.html +0 -56
- package/attr/navigable/tests/minimal.html +0 -17
- package/attr/navigable/tests/targetObserver.html +0 -106
- package/attr/navigable/tests/test.html +0 -84
- package/attr/parallax/tests/minimal.html +0 -25
- package/attr/parallax/tests/performance.html +0 -102
- package/attr/parallax/tests/test.html +0 -108
- package/attr/skin/tests/minimal.html +0 -34
- package/attr/skin/tests/test.html +0 -96
- package/class/badge/tests/minimal.html +0 -17
- package/class/badge/tests/test.html +0 -112
- package/class/card1/README.md +0 -45
- package/class/card1/card1.css +0 -30
- package/class/card1/tests/minimal.html +0 -33
- package/class/card1/tests/test.html +0 -78
- package/class/flex/tests/minimal.html +0 -31
- package/class/flex/tests/test.html +0 -58
- package/class/grid/tests/minimal.html +0 -34
- package/class/grid/tests/test.html +0 -78
- package/class/input/README.md +0 -49
- package/class/input/input.css +0 -33
- package/class/input/tests/minimal.html +0 -39
- package/class/input/tests/test.html +0 -29
- package/class/reset/tests/minimal.html +0 -23
- package/class/table/tests/minimal.html +0 -40
- package/class/table/tests/test.html +0 -226
- package/class/unstyle/tests/minimal.html +0 -22
- package/class/unstyle/tests/test.html +0 -32
- package/class/width/tests/minimal.html +0 -27
- package/class/width/tests/test.html +0 -101
- package/css/base/tests/nomotion.html +0 -89
- package/css/base/tests/test.html +0 -539
- package/css/classes/tests/test.html +0 -63
- package/css/classless/snippeds/experiments/conventions.css +0 -41
- package/css/classless/tests/aria.html +0 -101
- package/css/classless/tests/foreign/classless-almond.css.html +0 -445
- package/css/classless/tests/foreign/classless-classless.css.html +0 -831
- package/css/classless/tests/foreign/classless-mvp.html +0 -415
- package/css/classless/tests/foreign/classless.sakura.html +0 -224
- package/css/classless/tests/foreign/stylestage.dev.html +0 -304
- package/css/classless/tests/foreign/test-homogenizer.html +0 -433
- package/css/classless/tests/foreign/test-html5-elements-tester.html +0 -956
- package/css/classless/tests/foreign/test-opinionated_css.html +0 -148
- package/css/classless/tests/list-bullet.html +0 -110
- package/css/classless/tests/more.html +0 -246
- package/css/classless/tests/oklch.experiments.html +0 -280
- package/css/classless/tests/test.html +0 -106
- package/css/classless/tests/variables.html +0 -109
- package/css/norm/tests/test.html +0 -434
- package/css/norm/tests/test.js +0 -103
- package/el/accordion/tests/minimal.html +0 -44
- package/el/accordion/tests/test.html +0 -168
- package/el/alert/alert copy.js +0 -224
- package/el/alert/tests/minimal.html +0 -36
- package/el/alert/tests/test.html +0 -105
- package/el/buttongroup/tests/minimal.html +0 -31
- package/el/buttongroup/tests/test.html +0 -83
- package/el/bytes/tests/minimal.html +0 -19
- package/el/bytes/tests/test.html +0 -117
- package/el/carousel/tests/experiments.html +0 -77
- package/el/carousel/tests/minimal.html +0 -31
- package/el/carousel/tests/nested.html +0 -54
- package/el/carousel/tests/test.html +0 -136
- package/el/carousel-nav/tests/minimal.html +0 -32
- package/el/carousel-nav/tests/test.html +0 -59
- package/el/code/tests/minimal.html +0 -35
- package/el/code/tests/test.html +0 -162
- package/el/copy/tests/minimal.html +0 -21
- package/el/copy/tests/test.html +0 -75
- package/el/counter/tests/minimal.html +0 -27
- package/el/counter/tests/test.html +0 -106
- package/el/ico/tests/combinations.html +0 -86
- package/el/ico/tests/emojis.html +0 -213
- package/el/ico/tests/fonts.html +0 -110
- package/el/ico/tests/ico-directory.html +0 -254
- package/el/ico/tests/minimal.html +0 -46
- package/el/ico/tests/test.html +0 -210
- package/el/ico/tests/util-multi.svg +0 -6
- package/el/ico/tests/util.css +0 -2
- package/el/ico/tests/util.js +0 -110
- package/el/input/tests/formParticipation.html +0 -113
- package/el/input/tests/minimal.html +0 -33
- package/el/input/tests/test.html +0 -258
- package/el/masonry/tests/minimal.html +0 -39
- package/el/masonry/tests/test.html +0 -42
- package/el/number/tests/minimal.html +0 -25
- package/el/number/tests/test.html +0 -138
- package/el/out/tests/minimal.html +0 -25
- package/el/out/tests/test.html +0 -37
- package/el/parallax-bg/tests/bg.jpg +0 -0
- package/el/parallax-bg/tests/bg1.jpg +0 -0
- package/el/parallax-bg/tests/bg2.jpg +0 -0
- package/el/parallax-bg/tests/demo.html +0 -88
- package/el/parallax-bg/tests/minimal.html +0 -30
- package/el/parallax-bg/tests/test.html +0 -64
- package/el/parallax-bg/tests/visible.html +0 -90
- package/el/qrcode/tests/minimal.html +0 -26
- package/el/qrcode/tests/test.html +0 -31
- package/el/rating/tests/minimal.html +0 -26
- package/el/rating/tests/tests.html +0 -77
- package/el/rte/tests/minimal.html +0 -25
- package/el/rte/tests/test.html +0 -37
- package/el/skeleton/tests/minimal.html +0 -22
- package/el/skeleton/tests/test.html +0 -22
- package/el/splitbutton/README.md +0 -39
- package/el/splitbutton/splitbutton.js +0 -26
- package/el/splitbutton/tests/minimal.html +0 -30
- package/el/splitbutton/tests/test.html +0 -68
- package/el/splitpanel/tests/minimal.html +0 -31
- package/el/splitpanel/tests/tests.html +0 -121
- package/el/table/tests/minimal.html +0 -38
- package/el/table/tests/test.html +0 -108
- package/el/tabs/tests/minimal.html +0 -35
- package/el/tabs/tests/test.html +0 -180
- package/el/textfit/tests/minimal.html +0 -25
- package/el/textfit/tests/test.html +0 -26
- package/el/time/tests/minimal.html +0 -19
- package/el/time/tests/test.html +0 -160
- package/el/time/time copy.js +0 -141
- package/el/time/time.old.uhtml.js +0 -129
- package/el/tooltip/tests/minimal.html +0 -25
- package/el/tooltip/tests/test.html +0 -178
- package/el/tree1/README.md +0 -111
- package/el/tree1/manifest.json +0 -78
- package/el/tree1/tests/animated.html +0 -134
- package/el/tree1/tests/custom.html +0 -51
- package/el/tree1/tests/minimal.html +0 -44
- package/el/tree1/tests/test.html +0 -260
- package/el/tree1/tree1.css +0 -26
- package/el/tree1/tree1.js +0 -265
- package/el/typewriter/tests/minimal.html +0 -25
- package/el/typewriter/tests/test.html +0 -78
- package/js/Placer/tests/minimal.html +0 -34
- package/js/Placer/tests/test.html +0 -49
- package/js/PointerObserver/tests/minimal.html +0 -29
- package/js/PointerObserver/tests/test.html +0 -35
- package/js/SelectorObserver/tests/minimal.html +0 -21
- package/js/SelectorObserver/tests/test.html +0 -57
- package/js/SelectorObserver/tests/tests.html +0 -161
- package/js/contextmenu/tests/minimal.html +0 -44
- package/js/contextmenu/tests/test.html +0 -131
- package/js/dialog/tests/minimal.html +0 -29
- package/js/dialog/tests/notification.mp3 +0 -0
- package/js/dialog/tests/test.html +0 -135
- package/js/rte/tests/ai.html +0 -81
- package/js/rte/tests/behavior.html +0 -88
- package/js/rte/tests/events.html +0 -69
- package/js/rte/tests/fixes.html +0 -95
- package/js/rte/tests/minimal.html +0 -34
- package/js/rte/tests/notes.md +0 -6
- package/js/rte/tests/range.html +0 -167
- package/js/rte/tests/selection-explorer.html +0 -222
- package/js/rte/tests/test.html +0 -92
- package/js/shortcut/tests/minimal.html +0 -23
- package/js/shortcut/tests/test.html +0 -68
- package/u2/experiments/Waiter/test.html +0 -132
- package/u2/experiments/getElementByIdPromise/test.html +0 -76
- package/u2/experiments/patchInputValue.html +0 -124
- package/u2/experiments/radiobutton/test.html +0 -75
- package/u2/experiments/tests/test.html +0 -223
- package/u2/experiments/u1-responsive/responsive.js +0 -62
- package/u2/experiments/u1-responsive/test.html +0 -65
- package/u2/experiments/u2Element.js +0 -139
- package/u2/experiments/u2Element.test.html +0 -47
- package/u2/old-stuff/IterableWeakMap/mod.js +0 -70
- package/u2/old-stuff/css/onStyleSheet/mod.js +0 -114
- package/u2/old-stuff/css/onStyleSheet/monkeypatches.js +0 -28
- package/u2/old-stuff/css/onStyleSheet/test/include.css +0 -19
- package/u2/old-stuff/css/onStyleSheet/test/style-has-include.css +0 -6
- package/u2/old-stuff/css/onStyleSheet/test/style-no-include.css +0 -3
- package/u2/old-stuff/css/onStyleSheet/test/test.html +0 -48
- package/u2/old-stuff/css/parser/mod.js +0 -182
- package/u2/old-stuff/css/parser/parser_old/mod.js +0 -128
- package/u2/old-stuff/css/parser/parser_old/test.html +0 -43
- package/u2/old-stuff/css/parser/parser_old/util.js +0 -22
- package/u2/old-stuff/css/parser/style.html +0 -52
- package/u2/old-stuff/css/parser/test.html +0 -38
- package/u2/old-stuff/el/ai-texter/README.md +0 -23
- package/u2/old-stuff/el/ai-texter/ai-texter.css +0 -12
- package/u2/old-stuff/el/ai-texter/ai-texter.js +0 -153
- package/u2/old-stuff/el/ai-texter/tests/minimal.html +0 -47
- package/u2/old-stuff/el/ai-texter/tests/test.html +0 -71
- package/u2/old-stuff/init.js +0 -38
- package/u2/old-stuff/markHashLinks.js +0 -51
- package/u2/old-stuff/onElement/mod.js +0 -73
- package/u2/old-stuff/test-helpers/mod.js +0 -36
- package/u2/old-stuff/test-helpers/test.html +0 -4
- package/u2/old-stuff/tests/init.js.html +0 -51
- package/u2/old-stuff/viewport.js +0 -64
- package/u2/tests/boilerplate.html +0 -46
- package/u2/tests/kacheln.html +0 -245
- package/u2/tests/showcase.html +0 -270
- package/u2/tests/showcase2.html +0 -157
- package/u2/tests/test-init.js +0 -35
- package/u2/tests/test.html +0 -355
- package/u2/tools/logo/u1ui.svg +0 -6
|
@@ -1,168 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE HTML>
|
|
2
|
-
<html lang=en>
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8">
|
|
5
|
-
<meta name=viewport content="width=device-width">
|
|
6
|
-
|
|
7
|
-
<link rel=stylesheet href="../../../css/classless/full.css">
|
|
8
|
-
<!--link rel=stylesheet href="../../../css/classless/aria.css"-->
|
|
9
|
-
<link rel=stylesheet href="../../../css/classless/simple.css">
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
<link rel=stylesheet href="../accordion.css">
|
|
13
|
-
<script src="../accordion.js" type=module async></script>
|
|
14
|
-
|
|
15
|
-
<script type=module async src=../../../attr/navigable/navigable.js crossorigin></script>
|
|
16
|
-
|
|
17
|
-
</head>
|
|
18
|
-
|
|
19
|
-
<body>
|
|
20
|
-
|
|
21
|
-
<header>
|
|
22
|
-
<h1>u2-accordion tests</h1>
|
|
23
|
-
As you use the browsers search funktion, you find the contents of the tab-panels. (chrome for now)
|
|
24
|
-
</header>
|
|
25
|
-
|
|
26
|
-
<section>
|
|
27
|
-
<h2>Simple</h2>
|
|
28
|
-
<u2-accordion>
|
|
29
|
-
Content bevore first heading
|
|
30
|
-
<h2>H2 as Tab</h2>
|
|
31
|
-
Heading Elements (h1-h6) are automatically used as accordion
|
|
32
|
-
<h3>H3 creates no new Panel, its always the highest heading level</h3>
|
|
33
|
-
<p>A Paragraph</p>
|
|
34
|
-
<h2>H2 as Tab</h2>
|
|
35
|
-
Heading Elements (h1-h6) are automatically used as accordion
|
|
36
|
-
<h2>Title 3, its a very long title to test the wrapping of the title text</h2>
|
|
37
|
-
content panel 3 <span>test</span>
|
|
38
|
-
<p>A Paragraph</p>
|
|
39
|
-
</u2-accordion>
|
|
40
|
-
</section>
|
|
41
|
-
|
|
42
|
-
<section>
|
|
43
|
-
<h2>Tablist browser-navigable accordion (beta)</h2>
|
|
44
|
-
<u2-accordion>
|
|
45
|
-
<h2 u2-navigable id="nav1">H2 as Tab</h2>
|
|
46
|
-
Heading Elements (h1-h6) are automatically used as accordion
|
|
47
|
-
If you like to use other Elements as accordion, you have to add the attribute <code>slot="title"</code
|
|
48
|
-
<h2 u2-navigable id="nav3">Title 3</h2>
|
|
49
|
-
content panel 3
|
|
50
|
-
</u2-accordion>
|
|
51
|
-
</section>
|
|
52
|
-
|
|
53
|
-
<section>
|
|
54
|
-
<h2>Nested</h2>
|
|
55
|
-
<u2-accordion>
|
|
56
|
-
<h2>Title 1</h2>
|
|
57
|
-
|
|
58
|
-
<u2-accordion>
|
|
59
|
-
<h3>Item 1.1</h3>
|
|
60
|
-
Item 1 content
|
|
61
|
-
<h3>Item 1.2</h3>
|
|
62
|
-
Item 2 content
|
|
63
|
-
<h3>Item 1.3</h3>
|
|
64
|
-
Item 3 content
|
|
65
|
-
<h3>Item 1.4</h3>
|
|
66
|
-
Item 1 content
|
|
67
|
-
</u2-accordion>
|
|
68
|
-
|
|
69
|
-
<h2>Title 2</h2>
|
|
70
|
-
content panel 2
|
|
71
|
-
</u2-accordion>
|
|
72
|
-
</section>
|
|
73
|
-
|
|
74
|
-
<section>
|
|
75
|
-
<h2>Single</h2>
|
|
76
|
-
<u2-accordion single>
|
|
77
|
-
<h2>Title 1</h2>
|
|
78
|
-
content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>
|
|
79
|
-
content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>content panel 1, huge content <br>to test scroll to the active panel <br>
|
|
80
|
-
<h2>Title 2</h2>
|
|
81
|
-
content panel 2
|
|
82
|
-
<h2>Title 3</h2>
|
|
83
|
-
content panel 3
|
|
84
|
-
<h2>Title</h2>
|
|
85
|
-
content panel 1
|
|
86
|
-
</u2-accordion>
|
|
87
|
-
</section>
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
<section>
|
|
91
|
-
<h2>Compare with details</h2>
|
|
92
|
-
<details name="details1">
|
|
93
|
-
<summary>Details 1</summary>
|
|
94
|
-
<div>
|
|
95
|
-
<details name="details2">
|
|
96
|
-
<summary>Details 1.1</summary>
|
|
97
|
-
<p>Details 1.1 content</p>
|
|
98
|
-
</details>
|
|
99
|
-
<details name="details2">
|
|
100
|
-
<summary>Details 1.1</summary>
|
|
101
|
-
<p>Details 1.1 content</p>
|
|
102
|
-
</details>
|
|
103
|
-
</div>
|
|
104
|
-
</details>
|
|
105
|
-
<details name="details1">
|
|
106
|
-
<summary>Details 2</summary>
|
|
107
|
-
Details 2 content
|
|
108
|
-
</details>
|
|
109
|
-
</section>
|
|
110
|
-
|
|
111
|
-
<style>
|
|
112
|
-
#styled u2-accordion {
|
|
113
|
-
border-radius: .5rem;
|
|
114
|
-
padding:.5rem;
|
|
115
|
-
border:1px solid;
|
|
116
|
-
box-shadow:var(--shadow);
|
|
117
|
-
background:#fff;
|
|
118
|
-
}
|
|
119
|
-
#styled u2-accordion::part(title) {
|
|
120
|
-
background:var(--color);
|
|
121
|
-
border-radius: .3rem;
|
|
122
|
-
color: white;
|
|
123
|
-
}
|
|
124
|
-
#styled u2-accordion::part(panels) {
|
|
125
|
-
background:#eee8;
|
|
126
|
-
}
|
|
127
|
-
#styled u2-accordion [role="tab"] {
|
|
128
|
-
padding:.5rem 1rem;
|
|
129
|
-
}
|
|
130
|
-
#styled u2-accordion [role="tab"][aria-selected="true"] {
|
|
131
|
-
border-bottom-color: transparent;
|
|
132
|
-
background:#0003;
|
|
133
|
-
}
|
|
134
|
-
#styled u2-accordion [role="tab"]:focus {
|
|
135
|
-
border-bottom-color: transparent;
|
|
136
|
-
background:#0005;
|
|
137
|
-
}
|
|
138
|
-
#styled [role=tabpanel] {
|
|
139
|
-
transition:.6s;
|
|
140
|
-
}
|
|
141
|
-
</style>
|
|
142
|
-
|
|
143
|
-
<section id=styled>
|
|
144
|
-
<h2>Nested, styled</h2>
|
|
145
|
-
<u2-accordion>
|
|
146
|
-
<h2>Title 1</h2>
|
|
147
|
-
|
|
148
|
-
<div>
|
|
149
|
-
<u2-accordion>
|
|
150
|
-
<h3>Item 1.1</h3>
|
|
151
|
-
<section>Item 1 content</section>
|
|
152
|
-
<h3>Item 1.2</h3>
|
|
153
|
-
<section>Item 2 content</section>
|
|
154
|
-
<h3>Item 1.3</h3>
|
|
155
|
-
<section>Item 3 content</section>
|
|
156
|
-
<h3>Item 1.4</h3>
|
|
157
|
-
<section>Item 1 content</section>
|
|
158
|
-
</u2-accordion>
|
|
159
|
-
</div>
|
|
160
|
-
|
|
161
|
-
<h2>Title 2</h2>
|
|
162
|
-
<section>content panel 2</section>
|
|
163
|
-
<h2>Title 3</h2>
|
|
164
|
-
<section>content panel 3</section>
|
|
165
|
-
<h2>Title</h2>
|
|
166
|
-
<section>content panel 1</section>
|
|
167
|
-
</u2-accordion>
|
|
168
|
-
</section>
|
package/el/alert/alert copy.js
DELETED
|
@@ -1,224 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
const icoCssUrl = import.meta.resolve('../../el/ico/ico.css');
|
|
3
|
-
|
|
4
|
-
const style = `
|
|
5
|
-
@import url('${icoCssUrl}');
|
|
6
|
-
:host:not([dismissable])::part(close) { display:none; } /* TODO: does not work in chrome */
|
|
7
|
-
:host(:not([dismissable]))::part(close) { display:none; } /* TODO: does not work in chrome */
|
|
8
|
-
:host {
|
|
9
|
-
--u2-ico-dir:'https://cdn.jsdelivr.net/npm/@material-icons/svg@1.0.11/svg/{icon}/baseline.svg';
|
|
10
|
-
}
|
|
11
|
-
#container {
|
|
12
|
-
display:flex;
|
|
13
|
-
flex-direction: row-reverse;
|
|
14
|
-
flex-wrap:wrap;
|
|
15
|
-
gap: 0 1em;
|
|
16
|
-
}
|
|
17
|
-
#body {
|
|
18
|
-
display:flex;
|
|
19
|
-
align-items: center;
|
|
20
|
-
flex: 1 1 20rem;
|
|
21
|
-
flex-wrap: wrap;
|
|
22
|
-
gap: 1em;
|
|
23
|
-
}
|
|
24
|
-
#close {
|
|
25
|
-
flex: 0 0 auto;
|
|
26
|
-
padding: 0;
|
|
27
|
-
border: 0;
|
|
28
|
-
background: none;
|
|
29
|
-
font-size: 1.5em;
|
|
30
|
-
cursor: pointer;
|
|
31
|
-
line-height: 1;
|
|
32
|
-
}
|
|
33
|
-
#content {
|
|
34
|
-
flex:1 1 15em;
|
|
35
|
-
}
|
|
36
|
-
slot {
|
|
37
|
-
display:block;
|
|
38
|
-
}
|
|
39
|
-
slot[name=icon] {
|
|
40
|
-
font-size:1.7em;
|
|
41
|
-
color:var(--color);
|
|
42
|
-
&::slotted(*), & > u2-ico {
|
|
43
|
-
display:block;
|
|
44
|
-
font-size:inherit;
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
slot[name=action] {
|
|
48
|
-
display: flex;
|
|
49
|
-
justify-content: end;
|
|
50
|
-
flex-wrap: wrap;
|
|
51
|
-
gap: .5em;
|
|
52
|
-
flex: 0 1 auto;
|
|
53
|
-
margin-inline-start: auto;
|
|
54
|
-
}
|
|
55
|
-
/* slot[name=action]:empty-slot { display:none; } not possible */`;
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
class alert extends HTMLElement {
|
|
59
|
-
constructor() {
|
|
60
|
-
super();
|
|
61
|
-
|
|
62
|
-
import('../../attr/focusgroup/focusgroup.js');
|
|
63
|
-
import('../ico/ico.js');
|
|
64
|
-
|
|
65
|
-
this.attachShadow({mode: 'open'});
|
|
66
|
-
this.shadowRoot.innerHTML = `
|
|
67
|
-
<style>${style}</style>
|
|
68
|
-
<div id=container>
|
|
69
|
-
<button id=close part=close aria-label=close>
|
|
70
|
-
<svg viewBox="0 0 15 15" style="display:block;width:.7em" aria-hidden="true"><path d="M1.5 1.5l12 12m-12 0l12-12" stroke="currentColor"></path></svg>
|
|
71
|
-
</button>
|
|
72
|
-
<div id=body>
|
|
73
|
-
<slot name=icon part=icon></slot>
|
|
74
|
-
<slot id=content></slot>
|
|
75
|
-
<slot name=action u2-focusgroup></slot>
|
|
76
|
-
</div>
|
|
77
|
-
</div>
|
|
78
|
-
`;
|
|
79
|
-
}
|
|
80
|
-
connectedCallback() {
|
|
81
|
-
// const variant = this.getAttribute('variant');
|
|
82
|
-
// const icon = this.getAttribute('icon') || variantData[variant]?.icon || 'info';
|
|
83
|
-
// this.shadowRoot.querySelector('[name=icon]').innerHTML = `<u2-ico icon=${icon}></u2-ico>`;
|
|
84
|
-
// this.shadowRoot.getElementById('container').setAttribute('role', variantData[variant]?.role || 'status');
|
|
85
|
-
this.shadowRoot.querySelector('#close').onclick = () => this.hide();
|
|
86
|
-
}
|
|
87
|
-
static observedAttributes = ['icon', 'variant'];
|
|
88
|
-
attributeChangedCallback(name, oldValue, newValue) {
|
|
89
|
-
if (oldValue === newValue) return;
|
|
90
|
-
if (name==='variant') {
|
|
91
|
-
const variant = this.getAttribute('variant');
|
|
92
|
-
this.shadowRoot.getElementById('container').setAttribute('role', variantData[variant]?.role || 'status');
|
|
93
|
-
}
|
|
94
|
-
if (name==='variant' || name==='icon') {
|
|
95
|
-
const variant = this.getAttribute('variant');
|
|
96
|
-
const icon = this.getAttribute('icon') || variantData[variant]?.icon || 'info';
|
|
97
|
-
this.shadowRoot.querySelector('[name=icon]').innerHTML = `<u2-ico icon=${icon}></u2-ico>`;
|
|
98
|
-
}
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
// show() { // todo
|
|
102
|
-
// this.setAttribute('open', '');
|
|
103
|
-
// this.setAttribute('aria-live', 'assertive');
|
|
104
|
-
// getToolsContainer().appendChild(this);
|
|
105
|
-
|
|
106
|
-
// // autohide and role=alertdialog if no actions
|
|
107
|
-
// const hasActions = this.querySelector('[slot=action]')?.assignedElements().length > 0;
|
|
108
|
-
// if (hasActions) {
|
|
109
|
-
// this.setAttribute('role', 'alertdialog');
|
|
110
|
-
// } else {
|
|
111
|
-
// clearTimeout(this.hideTimeout);
|
|
112
|
-
// this.hideTimeout = setTimeout(() => this.hide(), 5000);
|
|
113
|
-
// }
|
|
114
|
-
// return new Promise((resolve) => {
|
|
115
|
-
// this.resolve = resolve;
|
|
116
|
-
// });
|
|
117
|
-
// }
|
|
118
|
-
hide() {
|
|
119
|
-
this.removeAttribute('open');
|
|
120
|
-
this.resolve?.();
|
|
121
|
-
}
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
const variant2Icon = {info:'info',success:'check',warn:'warning',error:'error'};
|
|
125
|
-
const variantData = {
|
|
126
|
-
info: {
|
|
127
|
-
icon: 'info',
|
|
128
|
-
role: 'status',
|
|
129
|
-
},
|
|
130
|
-
success: {
|
|
131
|
-
icon: 'check',
|
|
132
|
-
role: 'status',
|
|
133
|
-
},
|
|
134
|
-
warn: {
|
|
135
|
-
icon: 'warning',
|
|
136
|
-
role: 'alert',
|
|
137
|
-
},
|
|
138
|
-
error: {
|
|
139
|
-
icon: 'error',
|
|
140
|
-
role: 'alert',
|
|
141
|
-
}
|
|
142
|
-
};
|
|
143
|
-
|
|
144
|
-
customElements.define('u2-alert', alert);
|
|
145
|
-
|
|
146
|
-
/*
|
|
147
|
-
alert = function(message, type, options) {
|
|
148
|
-
const el = document.createElement('u2-alert');
|
|
149
|
-
el.textContent = message;
|
|
150
|
-
options.icon && el.setAttribute('icon', options.icon);
|
|
151
|
-
el.setAttribute('type', type??'info');
|
|
152
|
-
return el.show();
|
|
153
|
-
}
|
|
154
|
-
export info = (message, options) => alert(message, 'info', options);
|
|
155
|
-
export success = (message, options) => alert(message, 'success', options);
|
|
156
|
-
export warn = (message, options) => alert(message, 'warn', options);
|
|
157
|
-
export error = (message, options) => alert(message, 'error', options);
|
|
158
|
-
*/
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
/*
|
|
163
|
-
function getToolsContainer() {
|
|
164
|
-
const el = document.getElementById('u2-notification-stack');
|
|
165
|
-
if (el) return el;
|
|
166
|
-
const div = document.createElement('div');
|
|
167
|
-
div.id = 'u2-notification-stack';
|
|
168
|
-
document.body.appendChild(div);
|
|
169
|
-
return div;
|
|
170
|
-
}
|
|
171
|
-
*/
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
// class Waiter {
|
|
175
|
-
// constructor(callback, duration) {
|
|
176
|
-
// this.callback = callback;
|
|
177
|
-
// this.duration = duration;
|
|
178
|
-
// this.startTime = null;
|
|
179
|
-
// this.timerId = null;
|
|
180
|
-
// this.onProgress = null;
|
|
181
|
-
// this.pauseTime = false; // Zeitpunkt, zu dem die Pause gestartet wurde
|
|
182
|
-
// this.remaining = duration; // Verbleibende Zeit bis zum Ablauf des Timers
|
|
183
|
-
// }
|
|
184
|
-
// start() {
|
|
185
|
-
// this.pauseTime = null;
|
|
186
|
-
// this.startTime = Date.now();
|
|
187
|
-
// this._startTimer();
|
|
188
|
-
// return new Promise((resolve) => {
|
|
189
|
-
// this.resolve = resolve;
|
|
190
|
-
// });
|
|
191
|
-
// }
|
|
192
|
-
// pause() {
|
|
193
|
-
// if (this.pauseTime) return;
|
|
194
|
-
// clearTimeout(this.timerId);
|
|
195
|
-
// this.pauseTime = Date.now();
|
|
196
|
-
// this.remaining -= this.pauseTime - this.startTime; // Aktualisiere die verbleibende Zeit
|
|
197
|
-
// }
|
|
198
|
-
// _startTimer() {
|
|
199
|
-
// this.timerId = setTimeout(() => {
|
|
200
|
-
// this.callback?.();
|
|
201
|
-
// this._clear();
|
|
202
|
-
// }, this.remaining);
|
|
203
|
-
// if (this.onProgress) this._emitProgress();
|
|
204
|
-
// }
|
|
205
|
-
// _emitProgress() {
|
|
206
|
-
// const interval = 100; // Wie oft der Fortschritt aktualisiert wird (in ms)
|
|
207
|
-
// const intervalId = setInterval(() => {
|
|
208
|
-
// const now = Date.now();
|
|
209
|
-
// const passed = now - this.startTime;
|
|
210
|
-
// const left = this.duration - passed;
|
|
211
|
-
// const progress = Math.min((passed / this.duration), 1);
|
|
212
|
-
// this.onProgress({ left, passed, progress });
|
|
213
|
-
// if (passed >= this.duration) clearInterval(intervalId);
|
|
214
|
-
// }, interval);
|
|
215
|
-
// }
|
|
216
|
-
// _clear() {
|
|
217
|
-
// clearTimeout(this.timerId);
|
|
218
|
-
// this.resolve();
|
|
219
|
-
// this.startTime = null;
|
|
220
|
-
// this.timerId = null;
|
|
221
|
-
// this.pauseTime = false;
|
|
222
|
-
// this.remaining = this.duration; // Zurücksetzen der verbleibenden Zeit
|
|
223
|
-
// }
|
|
224
|
-
// }
|
|
@@ -1,36 +0,0 @@
|
|
|
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
|
-
<script src="../alert.js" type=module async></script>
|
|
12
|
-
<link rel=stylesheet href="../alert.css">
|
|
13
|
-
|
|
14
|
-
<body>
|
|
15
|
-
|
|
16
|
-
<section class=main>
|
|
17
|
-
|
|
18
|
-
<u2-alert open variant="" dismissable icon="bug_report">
|
|
19
|
-
This is a dismissable alert with an custom icon.
|
|
20
|
-
<button slot=action>OK</button>
|
|
21
|
-
</u2-alert>
|
|
22
|
-
|
|
23
|
-
</section>
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
<style class=main>
|
|
27
|
-
u2-alert {
|
|
28
|
-
border-width: 0 0 0 3px;
|
|
29
|
-
}
|
|
30
|
-
u2-alert::part(close) {
|
|
31
|
-
opacity:0.3;
|
|
32
|
-
}
|
|
33
|
-
u2-alert::part(icon) {
|
|
34
|
-
font-size:2em;
|
|
35
|
-
}
|
|
36
|
-
</style>
|
package/el/alert/tests/test.html
DELETED
|
@@ -1,105 +0,0 @@
|
|
|
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
|
-
<title>Test</title>
|
|
9
|
-
|
|
10
|
-
<link rel=stylesheet href="../../../css/classless/full.css">
|
|
11
|
-
<link rel=stylesheet href="../../../css/classless/simple.css">
|
|
12
|
-
|
|
13
|
-
<link href="../../../el/code/code.css" rel=stylesheet>
|
|
14
|
-
<script src="../../../el/code/code.js" type=module async></script>
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
<!--script src="../../../el/tooltip/tooltip.js" type=module async></script>
|
|
19
|
-
<link href="../../../el/tooltip/tooltip.css" rel=stylesheet>
|
|
20
|
-
<script src="../../../el/ico/ico.js" type=module async></script>
|
|
21
|
-
<link href="../../../el/ico/ico.css" rel=stylesheet> -->
|
|
22
|
-
|
|
23
|
-
<style>
|
|
24
|
-
body {
|
|
25
|
-
place-content: initial;
|
|
26
|
-
}
|
|
27
|
-
</style>
|
|
28
|
-
|
|
29
|
-
<link href="../alert.css" rel=stylesheet>
|
|
30
|
-
<script src="../alert.js" type=module async></script>
|
|
31
|
-
|
|
32
|
-
<body>
|
|
33
|
-
|
|
34
|
-
<section>
|
|
35
|
-
|
|
36
|
-
<h2>[variant]</h2>
|
|
37
|
-
<u2-alert open>This is an alert without a variant</u2-alert>
|
|
38
|
-
<u2-alert open variant="success">This is a "success" alert</u2-alert>
|
|
39
|
-
<u2-alert open variant="warn">This is a "warn" alert</u2-alert>
|
|
40
|
-
<u2-alert open variant="error">This is an "error" alert</u2-alert>
|
|
41
|
-
<u2-alert open variant="info">This is an "info" alert</u2-alert>
|
|
42
|
-
|
|
43
|
-
<h2>[dismissable]</h2>
|
|
44
|
-
<u2-alert open dismissable variant=success>This is a dismissable success alert</u2-alert>
|
|
45
|
-
|
|
46
|
-
<h2>[icon]</h2>
|
|
47
|
-
<u2-alert open icon="home">This is a success alert with an icon (home)</u2-alert>
|
|
48
|
-
|
|
49
|
-
<h2>buttons</h2>
|
|
50
|
-
<u2-alert open dismissable>
|
|
51
|
-
This is a dismissable alert with no icon
|
|
52
|
-
<button slot=action>OK</button>
|
|
53
|
-
<button slot=action>Cancel</button>
|
|
54
|
-
</u2-alert>
|
|
55
|
-
|
|
56
|
-
<h2>Toast</h2>
|
|
57
|
-
Show an existing alert as a toast:
|
|
58
|
-
<button onclick="toastDemo.toast()">Show as Toast</button>
|
|
59
|
-
<u2-alert dismissable variant=error id="toastDemo">
|
|
60
|
-
This is a Toast error alert
|
|
61
|
-
<button slot=action>OK</button>
|
|
62
|
-
</u2-alert>
|
|
63
|
-
|
|
64
|
-
<button onclick="u2Toast.info('This is an info toast')">Show info toast</button>
|
|
65
|
-
<button onclick="u2Toast.success('This is a success toast')">Show success toast</button>
|
|
66
|
-
<script type=module>
|
|
67
|
-
import * as toast from '../alert.js';
|
|
68
|
-
window.u2Toast = toast;
|
|
69
|
-
</script>
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
<u2-code trim editable>
|
|
73
|
-
<style>
|
|
74
|
-
u2-alert {
|
|
75
|
-
border-width: 0 0 0 3px;
|
|
76
|
-
background: color-mix(in srgb, var(--color), #fff 90%);
|
|
77
|
-
box-shadow: none;
|
|
78
|
-
}
|
|
79
|
-
u2-alert::part(close) {
|
|
80
|
-
opacity:0.3;
|
|
81
|
-
border-left: 1px solid #0002;
|
|
82
|
-
&:hover {
|
|
83
|
-
opacity:1;
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
u2-alert::part(icon) {
|
|
87
|
-
font-size:2em;
|
|
88
|
-
opacity:.7;
|
|
89
|
-
}
|
|
90
|
-
</style>
|
|
91
|
-
</u2-code>
|
|
92
|
-
|
|
93
|
-
<h2>Playground (everything)</h2>
|
|
94
|
-
|
|
95
|
-
<div id=play>
|
|
96
|
-
<u2-alert open variant="info" dismissable icon="home">
|
|
97
|
-
This is a dismissable success alert with an icon, and a lot of text to make it wrap. More text to make it wrap and just more and more
|
|
98
|
-
<button slot=action>OK</button>
|
|
99
|
-
<button slot=action>Cancel</button>
|
|
100
|
-
</u2-alert>
|
|
101
|
-
</div>
|
|
102
|
-
|
|
103
|
-
<u2-code trim editable element="play"> </u2-code>
|
|
104
|
-
|
|
105
|
-
</section>
|
|
@@ -1,31 +0,0 @@
|
|
|
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 rel=stylesheet href="../buttongroup.css">
|
|
13
|
-
<xscript src="../buttongroup.js" type=module async></script>
|
|
14
|
-
|
|
15
|
-
<body>
|
|
16
|
-
|
|
17
|
-
<section class="main">
|
|
18
|
-
|
|
19
|
-
<u2-buttongroup>
|
|
20
|
-
<button type=button>Button</button>
|
|
21
|
-
<button type=button>Group</button>
|
|
22
|
-
<button type=button>Demo</button>
|
|
23
|
-
</u2-buttongroup>
|
|
24
|
-
|
|
25
|
-
</section>
|
|
26
|
-
|
|
27
|
-
<style>
|
|
28
|
-
u2-buttongroup:focus-within {
|
|
29
|
-
border-color: green;
|
|
30
|
-
}
|
|
31
|
-
</style>
|
|
@@ -1,83 +0,0 @@
|
|
|
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="../buttongroup.css" rel=stylesheet>
|
|
23
|
-
<script src="../buttongroup.js" type=module async></script>
|
|
24
|
-
|
|
25
|
-
<body>
|
|
26
|
-
|
|
27
|
-
<section style="background:var(--color-light, #eee)">
|
|
28
|
-
|
|
29
|
-
<u2-buttongroup>
|
|
30
|
-
<button type=button>Button</button>
|
|
31
|
-
<button type=button>Group</button>
|
|
32
|
-
<button type=button>Component</button>
|
|
33
|
-
</u2-buttongroup>
|
|
34
|
-
|
|
35
|
-
<h3>Too mutch</h3>
|
|
36
|
-
<u2-buttongroup style="justify-content: center; display:flex;">
|
|
37
|
-
<button type=button>Button 1</button>
|
|
38
|
-
<button type=button>Button 2</button>
|
|
39
|
-
<button type=button>Button 3</button>
|
|
40
|
-
<button type=button>Button 4</button>
|
|
41
|
-
<button type=button>Button 5</button>
|
|
42
|
-
<button type=button>Button 6</button>
|
|
43
|
-
<button type=button>Button 7</button>
|
|
44
|
-
<button type=button>Button 8</button>
|
|
45
|
-
<button type=button>Button 9</button>
|
|
46
|
-
<button type=button>Button 10</button>
|
|
47
|
-
<button type=button>Button 11</button>
|
|
48
|
-
<button type=button>Button 12</button>
|
|
49
|
-
</u2-buttongroup>
|
|
50
|
-
|
|
51
|
-
<h3>Expamles</h3>
|
|
52
|
-
<label>Stepper
|
|
53
|
-
<u2-buttongroup>
|
|
54
|
-
<button type=button style="padding-inline:.2em">
|
|
55
|
-
<u2-ico inline>add</u2-ico>
|
|
56
|
-
</button>
|
|
57
|
-
<input type=number value=0 style="width:3em; text-align:center; border-left:0; appearance: textfield; border:0;">
|
|
58
|
-
<button type=button style="padding-inline:.2em">
|
|
59
|
-
<u2-ico inline>remove</u2-ico>
|
|
60
|
-
</button>
|
|
61
|
-
</u2-buttongroup>
|
|
62
|
-
</label>
|
|
63
|
-
|
|
64
|
-
<u2-buttongroup>
|
|
65
|
-
<button type=button>update</button>
|
|
66
|
-
<u2-splitbutton>
|
|
67
|
-
<button type=button style="padding-inline:.2em">
|
|
68
|
-
<u2-ico inline>more_vert</u2-ico>
|
|
69
|
-
</button>
|
|
70
|
-
<menu>
|
|
71
|
-
<li><button>update all</button>
|
|
72
|
-
<li><button>update selected</button>
|
|
73
|
-
</menu>
|
|
74
|
-
</u2-splitbutton>
|
|
75
|
-
</u2-buttongroup>
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
</section>
|
|
80
|
-
|
|
81
|
-
<style>
|
|
82
|
-
|
|
83
|
-
</style>
|
|
@@ -1,19 +0,0 @@
|
|
|
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/aria.css">
|
|
10
|
-
<link rel=stylesheet href="../../../css/classless/simple.css">
|
|
11
|
-
|
|
12
|
-
<script src="../bytes.js" type=module async></script>
|
|
13
|
-
<link href="../bytes.css" rel=stylesheet>
|
|
14
|
-
|
|
15
|
-
<body>
|
|
16
|
-
|
|
17
|
-
<section class="main">
|
|
18
|
-
<u2-bytes>89887987</u2-bytes>
|
|
19
|
-
</section>
|