@litejs/ui 21.6.0 → 22.8.0

package/README.md

@@ -5,10 +5,10 @@
 
 [size]: https://packagephobia.now.sh/badge?p=@litejs/ui
 [size-src]: https://packagephobia.now.sh/result?p=@litejs/ui
+[wiki]: https://github.com/litejs/ui/wiki
 
 
-[LiteJS][] is a full-stack web framework in a tiny package.
-It is split into three main packages by designated install location:
+[LiteJS][] full-stack framework is split into three main packages by designated install location:
 
  - **[litejs][LiteJS]** - Server and core libraries installed as `dependencies`
  - **[@litejs/ui][UI]** - UI engine installed as `devDependencies` and bundled into your app

package/binding/_default.js

@@ -115,19 +115,22 @@
 		}
 	}
 
-	bindings.is = function bindingIs(node, model, path, list, state) {
+	bindings.is = function bindingIs(node, model, path, list, state, prefix) {
 		var match
 		, scope = this
 		if (typeof model === "string") {
+			prefix = state
 			state = list
 			list = path
 			path = model
 			model = scope.model
 		}
 		if (model && path) {
-			match = i18n.pick(state != null ? state : model.get(path), list)
-			El.cls(node, scope["_is-" + path], 0)
-			El.cls(node, scope["_is-" + path] = match && "is-" + match)
+			if (!prefix) prefix = "is-"
+			match = i18n.pick(state !== match ? state : model.get(path), list)
+			path += "-" + list
+			El.cls(node, node[prefix + path], 0)
+			El.cls(node, node[prefix + path] = match && prefix + match)
 		}
 	}
 

package/binding/sticky.js

@@ -0,0 +1,16 @@
+
+// .sticky { position: sticky; top: -1px; }
+// .sticky.is-stuck { color: red; }
+
+El.bindings.sticky = function sticky(el) {
+	;(sticky._ob || (sticky._ob = new IntersectionObserver(function(entries) {
+		entries.forEach(function(entry) {
+			El.cls(entry.target, "is-stuck", entry.intersectionRatio < 1)
+		})
+	}, { threshold: 1 }))).observe(el)
+	El.cls(el, "sticky")
+}
+
+El.bindings.sticky.once = 1
+
+

package/css/base.css

@@ -194,7 +194,6 @@ button,
 .btn,
 .nowrap,
 .ellipsis {
-	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }

package/css/grid.css

@@ -7,8 +7,14 @@ Expects box-sizing: border-box;
 .row {
 	display: block;
 	clear: both;
+	contain: content;
+	*zoom: 1;
 }
-.row {
+
+.grid:after,
+.row:after {
+	content: " ";
+	display: block;
 	clear: both;
 }
 
@@ -21,13 +27,6 @@ Expects box-sizing: border-box;
 	clear: none;
 }
 
-.grid:after,
-.row:after {
-	content: " ";
-	display: block;
-	clear: both;
-}
-
 .col,
 .w12, .md .md-w12, .lg .md-w12, .lg .lg-w12 { width: 100%; }
 .w11, .md .md-w11, .lg .md-w11, .lg .lg-w11 { width: 91.6667%; }

package/{component → el}/Slider.tpl

@@ -144,21 +144,6 @@
 %js
 	var on = El.on
 	, off = El.off
-	El.bindings.SliderVal = function(el, model, path, range) {
-		if (range) {
-			El.attr(el, "range", range)
-		}
-		if (path) {
-			if (path.charAt(0)!=="/") path = "/" + path.replace(/\./g, "/")
-			model.on("change:" + path, set)
-			setTimeout(function(){
-				set(model.get(path))
-			}, 10)
-		}
-		function set(val) {
-			el.set(parseFloat(val) || 0)
-		}
-	}
 	El.bindings.SliderInit = function(el) {
 		var knobLen, offset, px, drag, min, max, step, minPx, maxPx, value
 		, vert = El.hasClass(el, "is-vertical")
@@ -167,9 +152,11 @@
 		, knob = fill.lastChild
 		, emit = El.emit.bind(el, el, "change").rate(500, true)
 		on(window, "blur", stop)
-		function load(e) {
-			var tmp
-			, attr = vert ? "offsetHeight" : "offsetWidth"
+		on(el, "pointerdown", start)
+		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
 			min = +(range[0] || 0)
 			max = +(range[1] || 100)
@@ -178,13 +165,15 @@
 			minPx = 0
 			maxPx = track[attr] - knobLen - knobLen
 			px = maxPx / (max - min)
-			offset = el.getBoundingClientRect()
-			offset = (vert ? offset.top + maxPx + El.scrollTop() : offset.left + El.scrollLeft()) + knobLen
-			if (e) {
-				tmp = offset - e.clientX + (value-min||0)*px
-				if (tmp < knobLen && tmp > -knobLen) offset -= tmp
-			}
-			if (e && track.childNodes.length > 1) {
+		}
+		function start(e) {
+			drag = true
+			load()
+			var tmp = el.getBoundingClientRect()
+			offset = (vert ? tmp.top + maxPx + El.scrollTop() + knobLen : tmp.left + El.scrollLeft()) + knobLen
+			tmp = offset - e.clientX + (value-min||0)*px
+			if (tmp < knobLen && tmp > -knobLen) offset -= tmp
+			if (track.childNodes.length > 1) {
 				fill = track.firstChild
 				var next
 				, x = maxPx
@@ -207,24 +196,21 @@
 					if (range[3]) minPx += px * range[3]
 				}
 			}
-		}
-		function start(e) {
-			drag = true
-			load(e)
 			move(e)
 			listen(on)
 		}
 		function move(e) {
 			var diff = vert ? offset - e.pageY : e.pageX - offset
 			diff = (diff > maxPx ? maxPx : (diff < minPx ? minPx : diff))
-			el.set((diff / px) + min, e, diff)
+			set((diff / px) + min, e, diff)
 			return Event.stop(e)
 		}
 		function stop(e) {
-			if (!drag) return
-			drag = false
-			listen(off)
-			el.set(value, e)
+			if (drag) {
+				drag = false
+				listen(off)
+				set(value)
+			}
 		}
 		function listen(on) {
 			El.cls(fill, "anim", !drag)
@@ -232,22 +218,21 @@
 			on(document, "pointerup", stop)
 			on(document, "pointermove", move)
 		}
-		el.set = function(val, e, pos) {
-			px || load()
-			val = (val < min ? min : val > max ? max : val).step(step)
+		function set(val, e, pos) {
+			load()
+			val = (val < min ? min : val > max ? max : val || 0).step(step)
+			if (value !== void 0 && (!drag || pos !== void 0)) {
+				El.css(fill, vert ? "height" : "width", ((pos || (val-min)*px)+knobLen) + "px", 0)
+			}
 			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.format({val:val}) : val)
-			}
-			if (!drag || pos !== void 0) {
-				fill.style[vert ? "height" : "width"] = ((pos || (value-min)*px)+knobLen) + "px"
+				El.attr(knob, "data-val", format ? _(format, {val:val}) : val)
 			}
 		}
-		on(el, "pointerdown", start)
 	}
-	El.bindings.SliderInit.once = El.bindings.SliderVal.once = 1
+	El.bindings.SliderInit.once = 1
 
 %el Slider
 	button.Slider.reset ;SliderInit

package/{component → el}/confirm.tpl

@@ -13,7 +13,7 @@
 		right: 0;
 		margin: 0 auto;
 		top: 4%;
-		width: 400px;
+		width: 600px;
 		background-color: #fff;
 		box-shadow: 0 2px 10px 2px rgba(255,255,255,.5);
 	}
@@ -73,7 +73,7 @@
 		Object.assign(scope, opts)
 		scope.title = title || "Confirm?"
 		if (!scope.actions) scope.actions = [
-			{ action: "close", title: "Close" }
+			{ action: "close", title: "Close", key: "esc" }
 		]
 		for (var a, i = 0; a = scope.actions[i++]; ) {
 			if (typeof a == "string") a = scope.actions[i-1] = {title:a,action:a}
@@ -106,23 +106,31 @@
 			var num = _num == void 0 ? e.target[El.T] : _num
 			code += num
 			if (num == "CLEAR" || num == "del" || num == "backspace") code = ""
-			El.txt(El.find(el, ".js-body"), code.replace(/./g, "•") || opts.body)
-			// if (code.length == 4 && id && !sent) next(sent = code, id, resolve, reject)
+			El.md(El.find(el, ".js-body"), code.replace(/./g, "•") || opts.body)
+			if (typeof scope.code == "number" && code.length == scope.code && id && !sent) next(sent = code, id, resolve, reject)
 		}
 		function resolve(e, key) {
 			if (el) {
+				var action = key || El.attr(this, "data-action")
+				, result = {
+					code: code,
+					input: El.val(El.find(el, ".js-input")),
+					inputMd: El.val(El.find(el, ".js-inputMd")),
+					select: El.val(El.find(el, ".js-select"))
+				}
 				El.kill(el, "transparent")
 				El.cls(blurEl, "Confirm--blur", el = 0)
-				var action = key || El.attr(this, "data-action")
 				if (action && next) {
-					if (typeof next === "function") next(action, code)
-					else if (typeof next[action] === "function") next[action](code)
-					else if (next[action]) View.emit(next[action], code)
+					if (typeof next === "function") next(action, result)
+					else if (typeof next[action] === "function") next[action](result)
+					else if (next[action]) View.emit(next[action], result)
 				}
 				if (vibrate) navigator.vibrate(0)
 				if (sound) sound.pause()
 			}
 		}
+		scope.resolve = resolve
+		View.emit("confirm:open", scope)
 	})
 
 %el Confirm
@@ -130,11 +138,31 @@
 		.Confirm-bg.max.abs
 		.Confirm-content.Confirm--blur.grid.p2.anim
 			.col.ts3 ;txt:: _(title, map)
-			.col.js-body ;txt:: _(body, map)
+			.col.js-body ;md:: _(body, map)
 			.row.js-numpad
 				;if: code
 				;each: num in [1,2,3,4,5,6,7,8,9,"CLEAR",0]
 				.col.w4>.btn {num}
+			.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)
 			.col
 				.group ;each: action in actions
 					.btn.js-btn

package/{component → el}/form1.tpl

@@ -3,12 +3,14 @@
 		border: 0;
 		padding: 0;
 	}
-	.Form1-del {
+	.Form1-del.right {
 		display: block;
 		margin: -10px -10px 0 0;
+		opacity: .2;
+	}
+	.Form1-del {
 		font-size: 20px;
 		font-weight: 700;
-		opacity: .2;
 		border: 1px solid transparent;
 		line-height: 16px;
 		width: 20px;
@@ -28,7 +30,6 @@
 		display: block;
 		border-radius: 4px;
 		border: 1px solid #aaa;
-		overflow: auto;
 	}
 	.field {
 		width: 100%;
@@ -93,9 +94,11 @@
 		opacity: .6;
 		pointer-events: none;
 	}
+	.group {
+		overflow: auto;
+	}
 	.group > .btn {
 		border-radius: 0;
-		margin-left: -1px;
 		float: left;
 	}
 	.group > .btn:first-child {
@@ -140,13 +143,11 @@
 	}
 	.btn:hover,
 	.btn:focus {
-		background-color: #eee;
-		color: #333;
+		filter: brightness(1.3) saturate(1.2);
 		text-decoration: none;
 	}
 	.btn:active,
 	.btn.is-active {
-		background-color: #ccc;
 		box-shadow: inset 0 0 8px rgba(0, 0, 0, .5);
 	}
 
@@ -227,7 +228,7 @@
 
 %el form1-array
 	.col
-		.input.p13
+		.input.p13.cf
 			.left
 				= _(title||name)
 			.input__hint
@@ -239,10 +240,11 @@
 				@click: data.add
 
 %el form1-array-item
-	.input.p3.m2b.js-del
+	.input.p3.m2b.cf.js-del
 		a.right.Form1-del.hand ×
 			;if: !data.noAdd
-			;on: "click", data.del
+			;data:: "tooltip", _("Delete")
+			@click: data.del
 		b
 			;if: title
 			;txt: title

package/{component → el}/material.tpl

@@ -202,8 +202,8 @@
 		El.near = near
 		function near(source, target, x, y, margin) {
 			var rect = target.getBoundingClientRect()
-			, top  = rect.top
-			, left = rect.left
+			, top  = rect.top + El.scrollTop()
+			, left = rect.left + El.scrollLeft()
 			// svg elements dont have offsetWidth, IE8 does not have rect.width
 			, width = rect.width || target.offsetWidth || 0
 			, height = rect.height || target.offsetHeight || 0
@@ -229,12 +229,15 @@
 			} else if (y == "bottom") {
 				top += height + margin
 				y = " -50%"
+				setTimeout(function(){
+				//document.scrollingElement.scrollHeight
+				var overflow = top + source.offsetHeight - El.scrollTop() - document.documentElement.offsetHeight
+				if (overflow > 0) scrollBy({ top: overflow, left: 0, behavior: "smooth" })
+				}, 400)
 			} else {
 				top += (height / 2) - (source.offsetHeight/2)
 				y = " 50%"
 			}
-			left += El.scrollLeft()
-			top += El.scrollTop()
 			El.css(source, {
 				"transform-origin": x + y,
 				top: (top < 0 ? 0 : top) + "px",
@@ -271,7 +274,8 @@
 		}
 		function openVisible(tag, target) {
 			var el = typeof tag == "string" ? El(tag) : tag
-			El.scope(el, El.scope(target))
+			, scope = El.scope(el, El.scope(target))
+			scope.openTarget = target
 			El.render(el)
 			El.append(document.body, el)
 			El.cls(el, "is-visible", 1, 5)
@@ -296,7 +300,7 @@
 				El.cls(menuTarget, "is-active", menuEl = menuTarget = null)
 			}
 		}
-		View.on("resize", closeMenu)
+		View.on("ping", closeMenu)
 		View.on("closeMenu", closeMenu)
 		View.on("showMenu", function(e, target, menu, x, y, margin) {
 			Event.stop(e)

package/index.js

@@ -1,5 +1,5 @@
 /*
-* @version  21.6.0
+* @version  22.8.0
 * @author   Lauri Rooden <lauri@rooden.ee>
 * @license  MIT License
 */
@@ -347,26 +347,6 @@
 	Fn.wait = wait
 
 
-	// Function extensions
-	// -------------------
-
-	F.extend = function() {
-		var arg
-		, fn = this
-		, i = 0
-
-		function wrapper() {
-			return fn.apply(this, arguments)
-		}
-
-		for (wrapper[P] = Object.create(fn[P]); arg = arguments[i++]; ) {
-			Object.assign(wrapper[P], arg)
-		}
-		wrapper[P].constructor = wrapper
-		return wrapper
-	}
-
-
 	// Non-standard
 	Object.each = function(obj, fn, scope, key) {
 		if (obj) for (key in obj) {
@@ -555,7 +535,8 @@
 		for (k in obj) if (typeof obj[k] == "function" && ignore.indexOf(k) < 0) !function(k) {
 			hooked.push(k, hasOwn.call(obj, k) && obj[k])
 			obj[k] = function() {
-				hooks.push(k, arguments)
+				if (hooks === null) obj[k].apply(this, arguments)
+				else hooks.push(k, arguments)
 				return obj
 			}
 		}(k)
@@ -648,9 +629,9 @@
 		, emitter = this === exports ? empty : this
 		, _e = emitter._e
 		, arr = _e ? (_e[type] || empty).concat(_e["*"] || empty) : empty
-		if (i = _e = arr.length) {
-			for (args = arr.slice.call(arguments, 1); i--; ) {
-				arr[i--].apply(arr[--i] || emitter, args)
+		if ((_e = arr.length)) {
+			for (i = _e - 1, args = arr.slice.call(arguments, 1); i > 1; i -= 3) {
+				arr[i] && arr[i].apply(arr[i - 2] || emitter, args)
 			}
 		}
 		return _e / 3
@@ -731,12 +712,13 @@
 		/*** PUSH ***/
 		}
 		/**/
-		checkUrl()
+		return checkUrl()
 	}
 
 	function checkUrl() {
-		if (lastRoute != (lastRoute = getUrl()) && cb) {
-			cb(lastRoute)
+		if (lastRoute != (lastRoute = getUrl())) {
+			if (cb) cb(lastRoute)
+			return true
 		}
 	}
 
@@ -805,13 +787,14 @@
 
 
 !function(exports) {
-	var fn, lastView, lastParams, lastStr, lastUrl, syncResume
+	var fn, lastView, lastStr, lastUrl, syncResume
 	, isArray = Array.isArray
 	, capture = 1
 	, fnStr = ""
 	, reStr = ""
 	, views = View.views = {}
 	, paramCb = {}
+	, lastParams = paramCb
 	, hasOwn = views.hasOwnProperty
 	, escapeRe = /[.*+?^=!:${}()|\[\]\/\\]/g
 	, parseRe = /\{([\w%.]+?)\}|.[^{\\]*?/g
@@ -829,7 +812,7 @@
 		var key, name
 		, opts = Object.assign({}, defaults, _opts)
 		for (key in opts) if (hasOwn.call(opts, key)) {
-			if (typeof View[key] == "function") {
+			if (typeof View[key] === "function") {
 				for (name in opts[key]) if (hasOwn.call(opts[key], name)) {
 					View[key](name, opts[key][name])
 				}
@@ -856,7 +839,7 @@
 		view.el = el
 		view.parent = parent && View(parent)
 
-		if (route.charAt(0) != "#") {
+		if (route.charAt(0) !== "#") {
 			var params = "m[" + (view.seq = capture++) + "]?("
 			, _re = route.replace(parseRe, function(_, key) {
 				return key ?
@@ -879,13 +862,14 @@
 			, close = view.isOpen && view
 
 			View.route = view.route
+			emit(view, "init")
 
 			for (; tmp; tmp = parent) {
 				emit(syncResume = params._v = tmp, "ping", params, View)
 				syncResume = null
-				if (lastParams != params) return
+				if (lastParams !== params) return
 				if (parent = tmp.parent) {
-					if (parent.child && parent.child != tmp) {
+					if (parent.child && parent.child !== tmp) {
 						close = parent.child
 					}
 					parent.child = tmp
@@ -899,7 +883,7 @@
 							view.wait(tmp.file = null)
 						)
 					} else {
-						if (tmp.route == "404") {
+						if (tmp.route === "404") {
 							El.txt(tmp = El("h3"), "# Error 404")
 							View("404", tmp, "#body")
 						}
@@ -911,7 +895,7 @@
 
 			if (view !== close) emit(view, "change", close)
 
-			for (tmp in params) if (tmp.charAt(0) != "_") {
+			for (tmp in params) if (tmp.charAt(0) !== "_") {
 				if (syncResume = hasOwn.call(paramCb, tmp) && paramCb[tmp] || paramCb["*"]) {
 					syncResume.call(view, params[tmp], tmp, params)
 					syncResume = null
@@ -924,7 +908,7 @@
 			var params = lastParams
 			params._p = 1 + (params._p | 0)
 			return function() {
-				if (--params._p || lastParams != params || syncResume) return
+				if (--params._p || lastParams !== params || syncResume) return
 				if (params._d) {
 					bubbleDown(params)
 				} else if (params._v) {
@@ -957,7 +941,7 @@
 		if (params._d = params._v = view.child) {
 			bubbleDown(params, close)
 		}
-		if (lastView == view) {
+		if (lastView === view) {
 			emit(view, "show", params)
 			blur()
 		}
@@ -990,7 +974,7 @@
 				"return function(i,o,d){var m=r.exec(i);return m!==null?(" + fnStr + "d):d}"
 			)()
 		}
-		return View(fn(url || View.home, params || {}, "404"))
+		return View(url ? fn(url, params || {}, "404") : View.home)
 	}
 
 	View.ping = function(name, fn) {
@@ -1005,7 +989,7 @@
 		}
 		var params = _params || {}
 		, view = get(url, params)
-		if (!view.isOpen || lastUrl != url) {
+		if (!view.isOpen || lastUrl !== url) {
 			params._u = lastUrl = url
 			view.show(El.data.params = params)
 		}
@@ -1056,20 +1040,20 @@
 /* litejs.com/MIT-LICENSE.txt */
 
 
-!function(window, document, Object, Event, protoStr) {
-	var styleNode
+!function(window, document, Object, Event, P) {
+	var UNDEF, styleNode
 	, BIND_ATTR = "data-bind"
 	, isArray = Array.isArray
 	, seq = 0
 	, elCache = El.cache = {}
-	, wrapProto = ElWrap[protoStr] = []
+	, wrapProto = ElWrap[P] = []
 	, slice = wrapProto.slice
 	, hasOwn = elCache.hasOwnProperty
 	, body = document.body
 	, root = document.documentElement
 	, txtAttr = El.T = "textContent" in body ? "textContent" : "innerText"
 	, templateRe = /([ \t]*)(%?)((?:("|')(?:\\?.)*?\4|[-\w:.#[\]]=?)*)[ \t]*([>^;@|\\\/]|!?=|)(([\])}]?).*?([[({]?))(?=\x1f+|\n+|$)/g
-	, renderRe = /[;\s]*(\w+)(?:\s*(:?):((?:(["'\/])(?:\\?.)*?\3|[^;])*))?/g
+	, renderRe = /[;\s]*(\w+)(?:(::?| )((?:(["'\/])(?:\\?.)*?\3|[^;])*))?/g
 	, selectorRe = /([.#:[])([-\w]+)(?:\((.+?)\)|([~^$*|]?)=(("|')(?:\\?.)*?\6|[-\w]+))?]?/g
 	, splitRe = /[,\s]+/
 	, camelRe = /\-([a-z])/g
@@ -1087,6 +1071,11 @@
 		html: function(el, html) {
 			el.innerHTML = html
 		},
+		md: El.md = function(el, txt) {
+			txt = txt.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;")
+			txt = txt.replace(/\n/g, "<br>")
+			el.innerHTML = txt
+		},
 		ref: function(el, name) {
 			this[name] = el
 		},
@@ -1150,6 +1139,10 @@
 	 * <input id="12" class="nice class" type="checkbox" checked="checked" disabled="disabled" data-lang="en">
 	 */
 
+	function isObject(obj) {
+		return obj && obj.constructor === Object
+	}
+
 	window.El = El
 
 	function El(name) {
@@ -1162,14 +1155,14 @@
 			pres = 1
 			val = quotation ? val.slice(1, -1) : val || key
 			pre[op =
-				op == "." ?
+				op === "." ?
 				(fn = "~", "class") :
-				op == "#" ?
+				op === "#" ?
 				"id" :
 				key
 			] = fn && pre[op] ?
-				fn == "^" ? val + pre[op] :
-				pre[op] + (fn == "~" ? " " : "") + val :
+				fn === "^" ? val + pre[op] :
+				pre[op] + (fn === "~" ? " " : "") + val :
 				val
 			return ""
 		}) || "div"
@@ -1214,7 +1207,7 @@
 	function setAttr(el, key, val) {
 		var current
 
-		if (key && key.constructor == Object) {
+		if (isObject(key)) {
 			for (current in key) {
 				setAttr(el, current, key[current])
 			}
@@ -1250,11 +1243,11 @@
 
 		/*** ie8 ***/
 		// istanbul ignore next: IE fix
-		if (ie67 && (key == "id" || key == "name" || key == "checked")) {
+		if (ie67 && (key === "id" || key === "name" || key === "checked")) {
 			el.mergeAttributes(document.createElement('<INPUT ' + key + '="' + val + '">'), false)
 		} else
 		/**/
-		if (key == "class") {
+		if (key === "class") {
 			cls(el, val)
 		} else if (val || val === 0) {
 			if (current != val) {
@@ -1266,6 +1259,7 @@
 	}
 
 	function valFn(el, val) {
+		if (!el) return ""
 		var input, step, key, value
 		, i = 0
 		, type = el.type
@@ -1285,7 +1279,7 @@
 
 			for (; input = el.elements[i++]; ) if (!input.disabled && (key = input.name || input.id)) {
 				value = valFn(input)
-				if (value !== void 0) {
+				if (value !== UNDEF) {
 					step = opts
 					key.replace(/\[(.*?)\]/g, function(_, _key, offset) {
 						if (step == opts) key = key.slice(0, offset)
@@ -1328,8 +1322,8 @@
 		}
 
 		return checkbox && !el.checked ?
-		(type === "radio" ? void 0 : null) :
-		el.valObject !== void 0 ? el.valObject : el.value
+		(type === "radio" ? UNDEF : null) :
+		el.valObject !== UNDEF ? el.valObject : el.value
 	}
 
 	function append(el, child, before) {
@@ -1340,7 +1334,7 @@
 		, i = 0
 		, tmp = typeof child
 		if (child) {
-			if (tmp == "string" || tmp == "number") child = document.createTextNode(child)
+			if (tmp === "string" || tmp === "number") child = document.createTextNode(child)
 			else if ( !("nodeType" in child) && "length" in child ) {
 				// document.createDocumentFragment is unsupported in IE5.5
 				// fragment = "createDocumentFragment" in document ? document.createDocumentFragment() : El("div")
@@ -1365,7 +1359,7 @@
 				/**/
 				tmp.insertBefore(child,
 					(before === true ? tmp.firstChild :
-					typeof before == "number" ? tmp.childNodes[
+					typeof before === "number" ? tmp.childNodes[
 						before < 0 ? tmp.childNodes.length - before - 2 : before
 					] : before) || null
 				)
@@ -1393,7 +1387,7 @@
 					})
 					return
 				}
-				if (name.constructor === Object) {
+				if (isObject(name)) {
 					for (i in name) {
 						if (hasOwn.call(name, i)) f(el, i, name[i], val)
 					}
@@ -1482,7 +1476,7 @@
 		var fn = fixFn[ev] && fixFn[ev](el, _fn, ev) || _fn
 		, fix = prefix ? function() {
 			var e = new Event(ev)
-			if (e.clientX !== void 0) {
+			if (e.clientX !== UNDEF) {
 				e.pageX = e.clientX + scrollLeft()
 				e.pageY = e.clientY + scrollTop()
 			}
@@ -1518,14 +1512,14 @@
 
 	function bindingOn(el, events, selector, data, handler, delay) {
 		var argi = arguments.length
-		if (argi == 3 || argi == 4 && typeof data == "number") {
+		if (argi == 3 || argi == 4 && typeof data === "number") {
 			delay = data
 			handler = selector
 			selector = data = null
-		} else if (argi == 4 || argi == 5 && typeof handler == "number") {
+		} else if (argi == 4 || argi == 5 && typeof handler === "number") {
 			delay = handler
 			handler = data
-			if (typeof selector == "string") {
+			if (typeof selector === "string") {
 				data = null
 			} else {
 				data = selector
@@ -1537,7 +1531,7 @@
 			return
 		}
 		var fn = (
-			typeof handler == "string" ? function(e) {
+			typeof handler === "string" ? function(e) {
 				var target = selector ? El.closest(e.target, selector) : el
 				if (target) View.emit.apply(View, [handler, e, target].concat(data))
 			} :
@@ -1597,11 +1591,11 @@
 				return el.kill && el.kill()
 			}
 			empty(el)
-			if (id = el._scope) {
-				delete elScope[id]
+			if (el._scope !== UNDEF) {
+				delete elScope[el._scope]
 			}
-			if (el.valObject) {
-				el.valObject = null
+			if (el.valObject !== UNDEF) {
+				el.valObject = UNDEF
 			}
 		}
 	}
@@ -1622,6 +1616,7 @@
 	}
 
 	function render(node, _scope) {
+		if (!node) return
 		var bind, fn
 		, scope = elScope(node, 0, _scope)
 		, i = 0
@@ -1642,7 +1637,7 @@
 				scope._m[i] = match
 				match = bindings[name]
 				return (
-					(op == ":" || match && hasOwn.call(match, "once")) ?
+					(op === "::" || match && hasOwn.call(match, "once")) ?
 					"s(this,B,data._t=data._t.replace(data._m[" + (i++)+ "],''))||" :
 					""
 				) + (
@@ -1672,7 +1667,7 @@
 			render(bind, scope)
 		}
 		/*** ie8 ***/
-		if (ie678 && node.tagName == "SELECT") {
+		if (ie678 && node.tagName === "SELECT") {
 			node.parentNode.insertBefore(node, node)
 		}
 		/**/
@@ -1754,16 +1749,16 @@
 					append(parent, parent = q = El(name))
 				}
 				if (text && op != "/") {
-					if (op == ">") {
+					if (op === ">") {
 						(indent + " " + text).replace(templateRe, work)
-					} else if (op == "|" || op == "\\") {
+					} else if (op === "|" || op === "\\") {
 						append(parent, text) // + "\n")
 					} else {
-						if (op == "@") {
+						if (op === "@") {
 							text = text.replace(/(\w+):?/, "on:'$1',")
 						} else if (op != ";" && op != "^") {
-							text = (parent.tagName == "INPUT" ? "val" : "txt") + (
-								op == "=" ? ":" + text.replace(/'/g, "\\'") :
+							text = (parent.tagName === "INPUT" ? "val" : "txt") + (
+								op === "=" ? ":" + text.replace(/'/g, "\\'") :
 								":_('" + text.replace(/'/g, "\\'") + "', data)"
 							)
 						}
@@ -1779,7 +1774,7 @@
 	function appendBind(el, val, sep, q) {
 		var current = getAttr(el, BIND_ATTR)
 		setAttr(el, BIND_ATTR, (current ? (
-			q == "^" ?
+			q === "^" ?
 			val + sep + current :
 			current + sep + val
 		) : val))
@@ -1793,7 +1788,7 @@
 		t.el.plugin = t
 	}
 
-	plugin[protoStr] = {
+	plugin[P] = {
 		_done: function() {
 			var t = this
 			, childNodes = t.el.childNodes
@@ -1826,15 +1821,15 @@
 		t.a = attr1
 	}
 
-	js[protoStr].done = Fn("Function(this.txt)()")
+	js[P].done = Fn("Function(this.txt)()")
 
 	El.plugins = {
-		binding: js.extend({
+		binding: extend(js, {
 			done: function() {
 				Object.assign(bindings, Function("return({" + this.txt + "})")())
 			}
 		}),
-		child: plugin.extend({
+		child: extend(plugin, {
 			done: function() {
 				var key = "@child-" + (++seq)
 				, root = append(this.parent, document.createComment(key))
@@ -1843,28 +1838,25 @@
 				root._cp = root.childNodes.length - 1
 			}
 		}),
-		css: js.extend({
+		css: extend(js, {
 			done: Fn("xhr.css(this.txt)")
 		}),
-		def: js.extend({
+		def: extend(js, {
 			done: Fn("View.def(this.params||this.txt)")
 		}),
-		each: js.extend({
+		each: extend(js, {
 			done: function() {
 				var txt = this.txt
 
 				JSON.parse(this.params)
 				.each(function(val) {
-					if (!val || val.constructor != Object) {
-						val = { item: val }
-					}
-					parseTemplate(txt.format(val))
+					parseTemplate(txt.format(isObject(val) ? val : { item: val }))
 				})
 			}
 		}),
 		el: plugin,
 		js: js,
-		map: js.extend({
+		map: extend(js, {
 			done: function() {
 				var self = this
 				, txt = (self.params + self.txt)
@@ -1876,7 +1868,7 @@
 			}
 		}),
 		template: plugin,
-		view: plugin.extend({
+		view: extend(plugin,{
 			done: function() {
 				var fn
 				, t = this
@@ -1886,7 +1878,7 @@
 				if (bind) {
 					fn = bind.replace(renderRe, function(match, name, op, args) {
 						return "(this['" + name + "']" + (
-							typeof view[name] == "function" ?
+							typeof view[name] === "function" ?
 							"(" + (args || "") + ")" :
 							"=" + args
 						) + "),"
@@ -1895,7 +1887,7 @@
 				}
 			}
 		}),
-		"view-link": plugin.extend({
+		"view-link": extend(plugin, {
 			done: function() {
 				var t = this
 				, arr = t.name.split(splitRe)
@@ -1931,7 +1923,7 @@
 	/*** kb ***/
 	var kbMaps = []
 	, kbMod = El.kbMod = iOS ? "metaKey" : "ctrlKey"
-	, kbKeys = {
+	, kbMap = El.kbMap = {
 		  8: "backspace", 9: "tab",
 		 13: "enter",    16: "shift", 17: "ctrl",  18: "alt",  19: "pause",
 		 20: "caps",     27: "esc",
@@ -1964,7 +1956,7 @@
 			var c = e.keyCode || e.which
 			, numpad = c > 95 && c < 106
 			, code = numpad ? c - 48 : c
-			, key = kbKeys[code] || String.fromCharCode(code).toLowerCase() || code
+			, key = kbMap[code] || String.fromCharCode(code).toLowerCase() || code
 
 			// Otherwise IE backspace navigates back
 			if (code == 8 && kbMaps[0].backspace) {
@@ -2046,4 +2038,14 @@
 	addEvent(window, "orientationchange", setBreakpointsRated)
 	addEvent(window, "load", setBreakpointsRated)
 	/**/
+
+	function extend(fn, opts) {
+		function wrapper() {
+			return fn.apply(this, arguments)
+		}
+		wrapper[P] = Object.create(fn[P])
+		Object.assign(wrapper[P], opts)
+		wrapper[P].constructor = wrapper
+		return wrapper
+	}
 }(window, document, Object, Event, "prototype")

package/load.js

@@ -28,7 +28,7 @@
 // MSXML 6.0 has improved XSD, deprecated several legacy features
 // What's New in MSXML 6.0: https://msdn.microsoft.com/en-us/library/ms753751.aspx
 
-!function(window, Function) {
+!function(window, Function, setTimeout) {
 	xhr._s = new Date
 	var loaded = {}
 	, urlEscRe = /[+#\s]+/g
@@ -275,5 +275,5 @@
 	/**/
 
 	function nop() {}
-}(this, Function)
+}(this, Function, setTimeout)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@litejs/ui",
-  "version": "21.6.0",
+  "version": "22.8.0",
   "description": "UI engine for LiteJS full-stack framework",
   "license": "MIT",
   "author": "Lauri Rooden <lauri@rooden.ee>",
@@ -17,12 +17,12 @@
   "files": [
     "*.js",
     "binding",
-    "component",
-    "polyfill",
-    "css"
+    "css",
+    "el",
+    "polyfill"
   ],
   "litejs": {
-    "build": "--out=test/index.html test/dev.html"
+    "build": "lj b --out=test/index.html test/dev.html"
   },
   "jshintConfig": {
     "asi": true,

package/polyfill/index.js

@@ -21,6 +21,7 @@
 
 !function(window, Function) {
 
+	// Array#flat()         - Chrome69, Edge79, Firefox62, Safari12
 	// window.PointerEvent  - Chrome55, Edge12, Firefox59, Safari13,   IE11
 	// navigator.sendBeacon - Chrome39, Edge14, Firefox31, Safari11.1
 	// Object.fromEntries   - Chrome73, Edge79, Firefox63, Safari12.1, Opera60, Node.js12.0.0
@@ -30,7 +31,6 @@
 	, P = "prototype"
 	, O = window
 	, patched = (window.xhr || window)._p = []
-	, aSlice = patched.slice
 	, jsonRe = /[\x00-\x1f\x22\x5c]/g
 	, JSONmap = {"\b":"\\b","\f":"\\f","\n":"\\n","\r":"\\r","\t":"\\t",'"':'\\"',"\\":"\\\\"}
 	, hasOwn = JSONmap.hasOwnProperty
@@ -88,6 +88,9 @@
 		c: "touchcancel"
 	}
 
+	// Missing PointerEvents with Scribble enable on Safari 14
+	// https://mikepk.com/2020/10/iOS-safari-scribble-bug/
+	// https://bugs.webkit.org/show_bug.cgi?id=217430
 
 	if (!window.PointerEvent) {
 		// IE10
@@ -161,7 +164,7 @@
 	patch("escape", "return X(a)", esc("a", 0) != "a", esc)
 
 	// Patch parameters support for setTimeout callback
-	patch("setTimeout", (a = "var A=arguments;return O(X(a)&&A.length>2?a.apply.bind(a,null,S.call(A,2)):a,b)"), ie6789, isFn)
+	patch("setTimeout", (a = "return O(X(a)&&A.length>2?a.apply.bind(a,null,S.call(A,2)):a,b)"), ie6789, isFn)
 	patch("setInterval", a, ie6789, isFn)
 
 	function createStorage(name) {
@@ -197,7 +200,7 @@
 		/**/
 		var data = {
 			setItem: function(id, val) {
-				return data[id] = String(val)
+				return data[id] = "" + val
 			},
 			getItem: function(id) {
 				return data[id]
@@ -236,15 +239,14 @@
 		},
 		stringify: function stringify(o) {
 			// IE 8 serializes `undefined` as `"undefined"`
-			var c = typeof o
 			return (
-				c == "string" ? '"' + o.replace(jsonRe, jsonFn) + '"' :
-				o && c == "object" ? (
+				isStr(o) ? '"' + o.replace(jsonRe, jsonFn) + '"' :
+				o && typeof o == "object" ? (
 					isFn(o.toJSON) ? stringify(o.toJSON()) :
 					isArr(o) ? "[" + o.map(stringify) + "]" :
 					"{" + oKeys(o).map(function(a){return stringify(a) + ":" + stringify(o[a])}) + "}"
 				) :
-				c == "number" && !isFinite(o) ? "null" :
+				typeof o == "number" && !isFinite(o) ? "null" :
 				"" + o
 			)
 		}
@@ -261,21 +263,24 @@
 	O = Date
 	patch("d:now", a)
 
+	/*** toISOString ***/
 	O = O[P]
 	// IE8 toJSON does not return milliseconds
+	// ISO 8601 format is always 24 or 27 characters long,
+	// YYYY-MM-DDTHH:mm:ss.sssZ or ±YYYYYY-MM-DDTHH:mm:ss.sssZ
 	patch("toISOString", patch("toJSON", [
-		"return t.getUTCFullYear(", "Month()+1,'-'", "Date(),'-'",
-		"Hours(),'T'", "Minutes(),':'", "Seconds(),':'", "Milliseconds(),'.')+'Z'"
-	].join(")+X(t.getUTC"), ie678, function(n, b){ return b + ("00" + n).slice((b !== ".")-3) }))
-
+		"a=t.getUTCFullYear();if(a!==a)throw RangeError('Invalid time');return(b=a<0?'-':a>9999?'+':'')+X(a<0?-a:a,'-',b?6:4", "Month()+1,'-'", "Date(),'T'",
+		"Hours(),':'", "Minutes(),':'", "Seconds(),'.'", "Milliseconds(),'Z',3)"
+	].join(")+X(t.getUTC"), ie678, function(a, b, c){ return ("00000" + a).slice(-c || -2) + b }))
+	/**/
 
 	O = Function[P]
 	// Chrome7, FF4, IE9, Opera 11.60, Safari 5.1.4
-	patch("bind", "b=S.call(arguments,1);c=function(){return t.apply(this instanceof c?this:a,b.concat(S.call(arguments)))};if(t[P])c[P]=t[P];return c")
+	patch("bind", "b=S.call(A,1);c=function(){return t.apply(this instanceof c?this:a,b.concat(S.call(arguments)))};if(t[P])c[P]=t[P];return c")
 
 
 	O = Object
-	patch("assign", "var k,i=1,A=arguments,l=A.length;for(;i<l;)if(t=A[i++])for(k in t)if(o.call(t,k))a[k]=t[k];return a")
+	patch("assign", "var k,i=1,l=A.length;for(;i<l;)if(t=A[i++])for(k in t)if(o.call(t,k))a[k]=t[k];return a")
 	patch("create", "X[P]=a||Y;return new X", 0, nop, {
 		// oKeys is undefined at this point
 		constructor: oKeys, hasOwnProperty: oKeys, isPrototypeOf: oKeys, propertyIsEnumerable: oKeys,
@@ -284,6 +289,7 @@
 	a = "c=[];for(b in a)o.call(a,b)&&c.push("
 	b = ");return c"
 	patch("entries", a + "[b,a[b]]" + b)
+	patch("hasOwn", "return!!(a&&o.call(a,b))")
 	oKeys = patch("keys", a + "b" + b)
 	patch("values", a + "a[b]" + b)
 	//patch("fromEntries", "for(a=a.entries(),c={};!(b=a.next()).done;c[b[0]]=b[1]" + b)
@@ -297,7 +303,8 @@
 
 	// TODO:2021-02-25:lauri:Accept iterable objects
 	//patch("from", "a=S.call(a);return b?a.map(b,c):a")
-	patch("from", "a=typeof a==='string'?a.split(''):b?a:S.call(a);return b?a.map(b,c):a")
+	patch("from", "a=X(a)?a.split(''):b?a:S.call(a);return b?a.map(b,c):a", 0, isStr)
+	patch("of", "return S.call(A)")
 
 	O = O[P]
 	a = "var l=t.length,o=[],i=-1;"
@@ -305,7 +312,7 @@
 	patch("indexOf",     a + "i+=b|0;while(++i<l)" + c)
 	patch("lastIndexOf", a + "i=(b|0)||l;i>--l&&(i=l)||i<0&&(i+=l);++i;while(--i>-1)" + c)
 
-	b = a + "if(arguments.length<2)b=t"
+	b = a + "if(A.length<2)b=t"
 	c = "b=a.call(null,b,t[i],i,t);return b"
 	patch("reduce",      b + "[++i];while(++i<l)" + c)
 	patch("reduceRight", b + "[--l];i=l;while(i--)" + c)
@@ -321,6 +328,8 @@
 	patch("filter",      b + "o.push(t[i])" + c)
 	patch("some",        b + "return!0;return!1")
 
+	patch("flat",        "return a<1?S.call(t):(b=t.concat.apply([],t))&&a>1&&b.some(X)?b.flat(a-1):b", 0, isArr)
+	patch("flatMap",     "return X.apply(t,A).flat()", 0, O.map)
 	//patch("entries", "a=this;b=-1;return{next:function(){c=a.length<=++b;return{done:c,value:c?void 0:a[b]}}}")
 
 
@@ -398,7 +407,7 @@
 	}
 	function walk(el, by, sel, first, nextFn) {
 		var out = []
-		if (typeof sel !== "function") sel = selectorFn(sel)
+		if (!isFn(sel)) sel = selectorFn(sel)
 		for (; el; el = el[by] || nextFn && nextFn(el)) if (sel(el)) {
 			if (first === 1) return el
 			out.push(el)
@@ -415,7 +424,7 @@
 
 	// ie6789
 	// The documentMode is an IE only property, supported from IE8.
-	if (ie678 || document.documentMode <= 9) {
+	if (ie678) {
 		try {
 			// Remove background image flickers on hover in IE6
 			// You could also use CSS
@@ -424,16 +433,19 @@
 		} catch(e){}
 	}
 
-	function isFn(f) {
-		return typeof f === "function"
+	function isFn(value) {
+		return typeof value === "function"
+	}
+	function isStr(value) {
+		return typeof value === "string"
 	}
 	function nop() {}
 
 	function patch(key_, src, force, arg1, arg2) {
 		var key = key_.split(":").pop()
 		return !force && O[key] || (O[patched.push(key_), key] = (
-			typeof src === "string" ?
-			Function("o,O,P,S,F,X,Y", "return function(a,b,c){var t=this;" + src + "}")(hasOwn, O[key], P, aSlice, force, arg1, arg2) :
+			isStr(src) ?
+			Function("o,O,P,S,F,X,Y", "return function(a,b,c){var t=this,A=arguments;" + src + "}")(hasOwn, O[key], P, patched.slice, force, arg1, arg2) :
 			src || {}
 		))
 	}

package/schema-apply.js

@@ -46,6 +46,9 @@
 		} else if (type == "string") {
 			if (type !== actualType) data = "" + data
 		} else if (type === "number" || type == "integer") {
+			if (schema["ui:el"] == "date-time") {
+				data = Date.parse(data)
+			}
 			data = (data + "").replace(",", ".")
 			data = type === "number" ? parseFloat(data) : parseInt(data, 10)
 
@@ -75,7 +78,7 @@
 					return memo
 				}, []) :
 				null
-		} else {
+		} else if (data) {
 			var reqArr = Array.isArray(schema.required) && schema.required
 			Object.each(schema.properties, function(propSchema, prop) {
 				if (data[prop] !== void 0) {