@litejs/ui 24.0.0-rc.6 → 24.7.0

package/README.md

@@ -1,26 +1,30 @@
 
-[3]: https://badgen.net/packagephobia/install/@litejs/ui
+[3]: https://packagephobia.now.sh/badge?p=@litejs/ui
 [4]: https://packagephobia.now.sh/result?p=@litejs/ui
 [5]: https://badgen.net/badge/icon/Buy%20Me%20A%20Tea/orange?icon=kofi&label
 [6]: https://www.buymeacoffee.com/lauriro
-[wiki]: https://github.com/litejs/ui/wiki
 
 
 LiteJS UI – [![Size][3]][4] [![Buy Me A Tea][5]][6]
 =========
 
-LiteJS UI is an old-school framework for making high-quality web UIs.
+LiteJS UI is an old-school framework for high-quality web UIs,
+used on heavy-traffic websites since 2006.
 
- - Dependency-free, weighs around 20KB (+8KB polyfills if needed).
+ - Dependency-free, weighs around 20KB (+8KB polyfills for ancient browsers).
  - Written in ES5, compatible with all browsers (including IE5.5).
- - No transpiling/compiling/bundling headache, simply write a working code.
+ - No transpiling/compiling/bundling headache, just write a working code.
 
-See [wiki][] for more information.
+For usage instructions, see [wiki](https://github.com/litejs/ui/wiki)
+and [Quick-Start](https://github.com/litejs/litejs/wiki/Quick-Start) guide.
 
 
-## Licence
+## Contributing
 
-Copyright (c) 2006-2023 Lauri Rooden <lauri@rooden.ee>  
+Follow [Coding Style Guide](https://github.com/litejs/litejs/wiki/Style-Guide),
+run tests `npm install; npm test`.
+
+> Copyright (c) 2006-2024 Lauri Rooden <lauri@rooden.ee>  
 [MIT License](https://litejs.com/MIT-LICENSE.txt) |
 [GitHub repo](https://github.com/litejs/ui) |
 [npm package](https://npmjs.org/package/@litejs/ui) |

package/binding/persist.js

@@ -3,22 +3,12 @@
 
 
 
-/* global El */
-!function(bindings, window) {
-	bindings.persist = bindingPersist
-
-	function bindingPersist(el, _key, surviveReboot) {
-		var stor = (surviveReboot ? "local" : "session") + "Storage"
-		, key = _key || el.id || el.name
-		, value = window[stor].getItem(key)
-
-		if (value) {
-			El.val(el, value)
-		}
-		El.on(el, "keyup change blur", function() {
-			window[stor].setItem(key, El.val(el))
-		})
-	}
-	bindingPersist.once = bindingPersist
-}(El.bindings, window) // jshint ignore:line
+/* global El, window */
+El.$b.persist = function bindingPersist(el, key, surviveReboot) {
+	var stor = window[(surviveReboot ? "local" : "session") + "Storage"]
+	El.val(el, stor[key = key || el.id || el.name] || "")
+	El.on(el, "keyup change blur", function() {
+		stor[key] = El.val(el)
+	})
+}
 

package/binding/svg.js

@@ -85,7 +85,7 @@
 	bindings.svgToLast = function(el) {
 		El.on(el, "mouseover", function() {
 			if (!svgToLastActive || el != el.parentNode.lastChild) {
-				El.cls(svgToLastActive, "line-active", 0)
+				El.cls(svgToLastActive, "is-active", 0)
 				El.append(el.parentNode, el)
 				El.cls(el, "is-active", svgToLastActive = el)
 			}
@@ -93,5 +93,5 @@
 	}
 	bindings.svgToLast.once =
 	bindings.initChart.once = 1
-}(this.SVGElement, document, El.bindings) // jshint ignore:line
+}(this.SVGElement, document, El.$b) // jshint ignore:line
 

package/css/base.css

@@ -35,6 +35,7 @@ html {
 	touch-action: manipulation;           /* 4 */
 	-webkit-backface-visibility: hidden;  /* 5 */
 	        backface-visibility: hidden;
+	text-rendering: optimizeLegibility;
 }
 
 html,

package/css/form.css

@@ -87,13 +87,13 @@ option:disabled,
 textarea:disabled,
 select:disabled {
 	opacity: .6;
-        font-style: italic;
+	font-style: italic;
 	box-shadow: none;
 	cursor: not-allowed;
 }
 input[readonly] {
 	opacity: .6;
-        font-style: italic;
+	font-style: italic;
 }
 
 input.Toggle {
@@ -122,14 +122,14 @@ input.Toggle:after {
 	top: -4px;
 	transition: all .25s cubic-bezier(0, 0, .2, 1) 0s;
 	box-shadow:
-	2px 2px 8px rgba(255, 255, 255, .3) inset,
-	0 1px 5px rgba(0, 0, 0, 1);
+		2px 2px 8px rgba(255, 255, 255, .3) inset,
+		0 1px 5px rgba(0, 0, 0, 1);
 }
 input.Toggle:focus:after {
 	box-shadow:
-	2px 2px 8px rgba(255, 255, 255, .3) inset,
-	0 1px 5px rgba(0, 0, 0, 1),
-	0 0 0 12px rgb(255, 255, 255, .2);
+		2px 2px 8px rgba(255, 255, 255, .3) inset,
+		0 1px 5px rgba(0, 0, 0, 1),
+		0 0 0 12px rgb(255, 255, 255, .2);
 }
 input.Toggle:checked:after {
 	background-color: #00a651;
@@ -170,10 +170,10 @@ input.Toggle:checked:active:after {
 
 :focus {
 	outline: 0;
-        box-shadow: 0 0 6px -1px inset, 0 0 6px 1px;
+	box-shadow: 0 0 6px -1px inset, 0 0 6px 1px;
 }
 :focus:not(:focus-visible) {
-        box-shadow: 0;
+	box-shadow: 0;
 }
 
 .btn:active,
@@ -181,7 +181,7 @@ button:active,
 select:active,
 textarea:active,
 input:active {
-        box-shadow: 0 0 8px 1px inset, 0 0 8px 2px;
+	box-shadow: 0 0 8px 1px inset, 0 0 8px 2px;
 }
 input, textarea, select {
 	background: #eee;
@@ -194,25 +194,25 @@ input[type=submit] {
 	background: #aaa;
 }
 ::file-selector-button {
-        box-shadow: 0 0 26px -5px inset;
+	box-shadow: 0 0 26px -5px inset;
 }
 :focus::file-selector-button {
 }
 
 input.Toggle:after {
-        background-color: #666;
-        box-shadow:
-                2px 2px 8px rgba(255, 255, 255, .3) inset,
-                0 1px 5px rgba(0, 0, 0, 1);
+	background-color: #666;
+	box-shadow:
+		2px 2px 8px rgba(255, 255, 255, .3) inset,
+		0 1px 5px rgba(0, 0, 0, 1);
 }
 input.Toggle:focus:after {
-        box-shadow:
-                2px 2px 8px rgba(255, 255, 255, .3) inset,
-                0 1px 5px rgba(0, 0, 0, 1),
-                0 0 0 12px rgb(0, 0, 0, .2);
+	box-shadow:
+		2px 2px 8px rgba(255, 255, 255, .3) inset,
+		0 1px 5px rgba(0, 0, 0, 1),
+		0 0 0 12px rgb(0, 0, 0, .2);
 }
 input.Toggle:checked:after {
-        background-color: #00a651;
+	background-color: #00a651;
 }
 /**/
 

package/el/Slider.tpl

@@ -14,12 +14,12 @@
 		width: 4px;
 		height: 100%;
 	}
-	.is-vertical > .Slider-track > .Slider-fill {
+	.is-vertical > * > .Slider-fill {
 		top: auto;
 		bottom: 0;
 		width: 4px;
 	}
-	.is-vertical > .Slider-track > .Slider-fill > .Slider-knob {
+	.is-vertical > * > * > .Slider-knob {
 		margin: -10px -8px 0 0;
 	}
 	.Slider-track {
@@ -31,10 +31,10 @@
 		height: 4px;
 		border-radius: 2px;
 		overflow: visible;
-		background: #666;
+		background: #999;
 	}
 	.Slider-fill {
-		background: rgba(255,255,255,.57);
+		background: rgba(0,0,0,.5);
 	}
 	.Slider-knob,
 	.Toggle-knob {
@@ -43,6 +43,7 @@
 		height: 20px;
 		border-radius: 50%;
 		box-shadow:
+			0 0 0 0 rgb(0, 0, 0, .2),
 			0 1px 4px rgba(0, 0, 0, .2);
 	}
 	.Slider-knob {
@@ -52,9 +53,10 @@
 		background: #f5f5f5;
 		background-color: rgb(245, 245, 245);
 	}
-	.Slider-knob:hover,
-	.Slider-knob:focus,
-	:hover>.Toggle-knob {
+	:hover > * > * > .Slider-knob,
+	:focus > * > * > .Slider-knob,
+	:focus > .Toggle-knob,
+	:hover > .Toggle-knob {
 		box-shadow:
 			0 0 0 8px rgb(0, 0, 0, .2),
 			0 1px 4px rgba(0, 0, 0, .3);
@@ -64,6 +66,7 @@
 			0 0 0 12px rgb(0, 0, 0, .2),
 			0 1px 5px 5px rgba(0, 0, 0, .3);
 	}
+	/* value bubble */
 	.Slider-knob.is-active:before,
 	.Slider-knob.is-active:after {
 		position: absolute;
@@ -144,8 +147,8 @@
 %js
 	var on = El.on
 	, off = El.off
-	El.bindings.SliderInit = function(el) {
-		var knobLen, offset, px, drag, min, max, step, minPx, maxPx, value
+	El.$b.SliderInit = function(el) {
+		var attr, range, knobLen, offset, px, drag, min, max, step, minPx, maxPx, value
 		, vert = El.hasClass(el, "is-vertical")
 		, track = el.firstChild
 		, fill = track.firstChild
@@ -156,8 +159,8 @@
 		el.val = set
 		setTimeout(function() { set(value||0) }, 10)
 		function load() {
-			var attr = vert ? "offsetHeight" : "offsetWidth"
-			, range = (El.attr(el, "range") || "").split(/[^+\-\d.]/) // min:max:step:margin
+			attr = vert ? "offsetHeight" : "offsetWidth"
+			range = (El.get(el, "range") || "").split(/[^+\-\d.]/) // min:max:step:margin
 			min = +(range[0] || 0)
 			max = +(range[1] || 100)
 			step = +(range[2] || 1)
@@ -227,21 +230,20 @@
 			if (value !== val) {
 				el.value = value = val
 				if (drag && e) emit(e)
-				var format = El.attr(el, "format")
-				El.attr(knob, "data-val", format ? _(format, {val:val}) : val)
+				var format = El.get(el, "format")
+				El.set(knob, "data-val", format ? _(format, {val:val}) : val)
 			}
 		}
 	}
-	El.bindings.SliderInit.once = 1
 
 %el Slider
-	button.Slider.reset ;SliderInit
+	button.Slider.reset ;SliderInit!
 		.Slider-track
 			.Slider-fill.abs.anim
 				.Slider-knob.anim[tabindex=0]
 
 /%el Slider2
-/	button.Slider.reset ;SliderInit
+/	button.Slider.reset ;SliderInit!
 /		.Slider-track
 /			.Slider-fill.abs.anim
 /				.Slider-knob.anim[tabindex=0]
@@ -249,7 +251,7 @@
 /				.Slider-knob.anim[tabindex=0]
 /
 /%el Slider3
-/	button.Slider.reset ;SliderInit
+/	button.Slider.reset ;SliderInit!
 /		.Slider-track
 /			.Slider-fill.abs.anim
 /				.Slider-knob.anim[tabindex=0]

package/el/crop.ui

@@ -26,14 +26,15 @@
 
 %el Crop
 	.Crop
-		@pan function(e){}
+		@pan function(e, touchEv, touchEl) {
+			El.css(touchEl, "top,left", [touchEv.topPos + "px", touchEv.leftPos + "px"],"img")
+			return El.stop(e)
+		}
 		@pinch function(zoom){
 			var imgWidth = $el.offsetWidth
 			scale(0,0)
-			El.on($el, "wheel", scale)
 			return scale
 			function scale(e, delta) {
-				console.log("pinch", arguments)
 				zoom += delta / 5
 				if (zoom < .5) zoom = .5
 				else if (zoom > 50) zoom = 50

package/el/dialog.ui

@@ -67,8 +67,8 @@
 		}
 		var sound, vibrate
 		, code = ""
-		, el = El("Modal")
-		, scope = Object.assign(El.scope(el, El.data), opts)
+		, el = El("Dialog")
+		, scope = Object.assign(El.scope(el, el), opts)
 		, kbMap = {}
 		, body = document.body
 		, blurEl = $(scope.blur) || $ui.root.lastChild
@@ -81,9 +81,10 @@
 			if (a.key) kbMap[a.key] = resolve.bind(el, el, a.action)
 		}
 		El.cls(blurEl, "Modal--blur")
-		El.cls(el.lastChild, "Modal--blur", false, 1)
-		El.append(body, el)
-		El.render(el, scope)
+		var mm = El("Modal")
+		El.append(mm, el)
+		El.append(body, mm)
+		El.render(mm)
 		if (scope.code) {
 			$$(".js-numpad", el).on("click", numpad)
 			kbMap.backspace = kbMap.del = kbMap.num = numpad
@@ -112,14 +113,14 @@
 		}
 		function resolve(e, key) {
 			if (el) {
-				var action = key || El.attr(this, "data-action")
+				var action = key || El.get(this, "data-action")
 				, result = {
 					code: code,
 					input: El.val($(".js-input", el)),
 					inputMd: El.val($(".js-inputMd", el)),
 					select: El.val($(".js-select", el))
 				}
-				El.kill(el, "transparent")
+				El.kill(mm, "transparent")
 				El.cls(blurEl, "Modal--blur", el = false)
 				if (action && next) {
 					if (typeof next === "function") next(action, result)
@@ -147,7 +148,7 @@
 	})
 
 %el Dialog
-.Dialog.grid.p2.anim Dialog
+.Dialog.grid.p2.anim
 	.col.ts3 ;txt!_(title, map)
 	.col.js-body ;md!_(body, map)
 	.col
@@ -156,31 +157,13 @@
 				;txt!_(action.title)
 				;class!"w" + (12/actions.length)
 				;nop: this.focus()
-				;attr: "data-action", action.action
+				;set: "data-action", action.action
 				;class!"is-" + action.action, action.action
 
 %el Modal
-	.Modal.max.fix.anim
-		.Modal-bg.max.abs
-		.Modal-content.Modal--blur.grid.p2.anim
-			.row
-				;if: input
-				.col>input.field.js-input
-			.row
-				;if: data.inputMd!=null
-				.col
-					textarea.field.js-inputMd
-						@keyup [this.parentNode.nextSibling.nextSibling], "renderMd"
-						;val: inputMd
-				.col.ts3 Preview
-				.p4
-					;md: inputMd
-			.row
-				;if: select
-				.col
-					select.field.js-select
-						;list: select, [""]
-						option
-							;val:: item.id
-							;txt:: _(item.name)
+.Modal.max.fix.anim
+	.Modal-bg.max.abs
+	.Modal-content.Modal--blur.grid.p2.anim
+		;cls!"Modal--blur",!1,1
+		%slot
 

package/el/form.ui

@@ -206,7 +206,7 @@ Form-ro
 
 %el Form-enum
 Form-row
-	select.field ;each:val in data["enum"]
+	select.field ;each:val in $d["enum"]
 		option
 			;val:: val
 			= _("" + val)
@@ -217,7 +217,7 @@ Form-ro
 %el Form-list
 Form-row
 	select.field
-		;list: api(resourceCollection.format(data.params, data)), required ? 0 : [""], value
+		;list: api(resourceCollection.format(params, $d)), required ? 0 : [""], value
 		option
 			;val:: item.id
 			;txt:: _(item.name)
@@ -235,16 +235,16 @@ Form-row>span
 			= _(description)
 		.js-items.cf
 		a.btn.right
-			;if: !data.noAdd
-			;txt: _(data.name + ".Add")
-			@click: data.add
+			;if: !$d.noAdd
+			;txt: _($d.name + ".Add")
+			@click: $d.add
 
 %el Form-array-item
 .input.p3.m2b.cf.js-del
 	a.right.Form-del.hand ×
-		;if: !data.noAdd
-		;attr:: "data-tooltip", _("Delete")
-		@click: data.del
+		;if !$d.noAdd
+		;set "data-tooltip", _("Delete")
+		@click $d.del
 	b
 		;if: title
 		;txt: title

package/el/material.tpl

@@ -248,7 +248,7 @@
 		function onOver(e) {
 			var x, y, pos
 			, target = e.target
-			, text = El.attr(target, "data-tooltip")
+			, text = El.get(target, "data-tooltip")
 			, relTarg = e.relatedTarget || e.fromElement
 			// without relTarg is event on click
 			if (!relTarg && e.type !== "focusin" || target === tipTarget) return
@@ -260,19 +260,19 @@
 			closeTooltip()
 			if (!text) return
 			tipEl = openVisible("pre.tooltip", tipTarget = target)
-			pos = El.attr(target, "data-tooltip-pos") || "top"
+			pos = El.get(target, "data-tooltip-pos") || "top"
 			El.txt(tipEl, text)
 			if (pos === "left" || pos === "right") {
 				x = pos
 			} else {
 				y = pos
 			}
-			El.attr(tipEl, "data-pos", pos)
+			El.set(tipEl, "data-pos", pos)
 			near(tipEl, target, x, y, 6)
 		}
 		function openVisible(tag, target) {
 			var el = typeof tag == "string" ? El(tag) : tag
-			, scope = El.scope(el, El.scope(target))
+			, scope = El.scope(el, target)
 			scope.openTarget = target
 			El.render(el)
 			El.append(document.body, el)
@@ -313,7 +313,7 @@
 				})
 			} else {
 				El.cls(menuTarget = target, "is-active")
-				near(menuEl, target, x, y, 4)
+				near(menuEl, target, x, y, margin)
 			}
 			if (menuEl.style.transform !== void 0) {
 				El.cls(menuEl, "no-events")

package/load.js

@@ -24,8 +24,9 @@
 		//!{loadRewrite}
 	}
 	// Move setTimeout from window.prototype to window object for future patching in IE9.
-	// Fallback to global.setTimeout and expose xhr._c for tests.
-	, setTimeout_ = (window.setTimeout = window.setTimeout) /*** debug ***/ || setTimeout
+	, setTimeout_ = window.setTimeout = setTimeout
+	/*** debug ***/
+	// Expose xhr._c for tests.
 	, loaded = xhr._c = {}
 	/*/
 	, loaded = {}
@@ -48,6 +49,7 @@
 	/*/
 		eval
 	/**/
+	, nop = Function()
 
 	/*** reuse ***/
 	// XHR memory leak mitigation
@@ -178,25 +180,23 @@
 	function load(files, next, raw) {
 		files = [].concat(files)
 		var file
-		, i = 0
 		, pos = 0
 		, len = files.length
 		, res = []
 
-		for (; i < len; i++) if ((file = files[i]) && loaded[file] !== 2) {
-			if (loaded[file]) {
+		for (; pos < len; pos++) if ((file = files[pos])) {
+			if (loaded[file] === 2) files[pos] = 0
+			else if (loaded[file]) {
 				// Same file requested again before responce
-				;(loaded[file].x || (loaded[file].x = [])).push(exec, res, i)
+				;(loaded[file].x || (loaded[file].x = [])).push(exec, res, pos)
 			} else {
 				// FireFox 3 throws on `xhr.send()` without arguments
-				xhr("GET", file, loaded[file] = cb, i).send(null)
+				xhr("GET", file, loaded[file] = cb, pos).send(null)
 			}
-			pos++
 		}
 		exec(pos = 0)
 
 		function cb(err, str, fileName, filePos) {
-			;(xhr._l || (xhr._l = [])).push(fileName)
 			loaded[fileName] = 2
 			res[filePos] = err ? (onerror(err, fileName), "") : str
 			exec()
@@ -207,7 +207,7 @@
 					files[pos] = 0
 				} else {
 					try {
-						var execResult = (xhr[files[pos].replace(/[^?]+\.|\?.*/g, "")] || execScript)(res[pos])
+						var execResult = (xhr[files[pos].replace(/[^?]+\.|\?.*/g, "")] || execScript)(res[pos], files[pos])
 						if (execResult && execResult.then) {
 							res[pos] = 0
 							return execResult.then(function() {
@@ -230,7 +230,7 @@
 				else {
 					if (next) next(res)
 					if ((next = cb.x)) {
-						for (i = 0; next[i]; ) next[i++](next[i++][next[i++]] = "")
+						for (pos = 0; next[pos]; ) next[pos++](next[pos++][next[pos++]] = "")
 					}
 				}
 			}
@@ -242,6 +242,5 @@
 	])
 	/**/
 
-	function nop() {}
 }(this, Function) // jshint ignore:line
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@litejs/ui",
-  "version": "24.0.0-rc.6",
+  "version": "24.7.0",
   "description": "UI engine for LiteJS full-stack framework",
   "license": "MIT",
   "author": "Lauri Rooden <lauri@rooden.ee>",
@@ -13,7 +13,7 @@
   "homepage": "https://litejs.com",
   "repository": "github:litejs/ui",
   "bugs": "https://github.com/litejs/dev/issues",
-  "main": "index.js",
+  "main": "ui.js",
   "files": [
     "*.js",
     "binding",
@@ -26,6 +26,7 @@
     "test": "lj test test/index.js --tz='Europe/Tallinn' --brief --sources=load.js,require.js,index.js"
   },
   "devDependencies": {
-    "@litejs/cli": "24.0.0-rc.2"
+    "@litejs/cli": "24.6.2",
+    "@litejs/dom": "24.7.0"
   }
 }