@litejs/ui 21.11.0 → 22.12.0

package/binding/_default.js

@@ -115,20 +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) {
+			if (!prefix) prefix = "is-"
 			match = i18n.pick(state !== match ? state : model.get(path), list)
 			path += "-" + list
-			El.cls(node, node["_is-" + path], 0)
-			El.cls(node, node["_is-" + path] = match && "is-" + match)
+			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/accessible.css

@@ -0,0 +1,25 @@
+
+/* https://www.tpgi.com/short-note-on-making-your-mark-more-accessible/ */
+
+@media screen and (-ms-high-contrast: active) {
+	mark {
+		color: HighlightText;
+		background-color: Highlight;
+	}
+}
+
+mark::before, mark::after {
+	content:" [highlight start] ";
+	clip-path: inset(100%);
+	clip: rect(1px, 1px, 1px, 1px);
+	height: 1px;
+	width: 1px;
+	overflow: hidden;
+	position: absolute;
+	white-space: nowrap;
+}
+
+mark::after {
+	content:" [highlight end] ";
+}
+

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/css/prefers.css

@@ -0,0 +1,19 @@
+
+@media (prefers-color-scheme: dark) {
+	.day.dark-scheme   { background:  #333; color: white; }
+	.night.dark-scheme { background: black; color:  #ddd; }
+}
+
+@media (prefers-contrast: more) {
+	.contrast { outline: 2px solid black; }
+}
+
+@media screen and (prefers-reduced-motion: reduce), (update: slow) {
+	* {
+		animation-duration: 0.001ms !important;
+		/* Hat tip Nick/cssremedy (https://css-tricks.com/revisiting-prefers-reduced-motion-the-reduced-motion-media-query/#comment-1700170) */
+		animation-iteration-count: 1 !important;
+		transition-duration: 0.001ms !important;
+	}
+}
+

package/css/print.css

@@ -0,0 +1,33 @@
+
+/*
+ * Ensure you use dark text on a white background
+ * Use Borders Instead of Background Colors
+ */
+
+
+@media print {
+	table, img, svg {
+		break-inside: avoid;
+	}
+	img.dark {
+		filter: invert(100%) hue-rotate(180deg) brightness(120%) contrast(150%);
+	}
+
+	/* Not all printers will print in color, add some other style that isn’t too disruptive. */
+	mark {
+		border: 1pt dotted #000;
+	}
+	q:after {
+		content: " (Source: " attr(cite) ")";
+	}
+	a {
+		color: #000;
+	}
+	p a {
+		word-wrap: break-word;
+	}
+	p a[href^="https://"]:after, a[href^="https://"]:after {
+		content: " (" attr(href) ")";
+	}
+}
+

package/css/striped.css

@@ -0,0 +1,10 @@
+.striped45 {
+	background-color: currentColor;
+	background-image: repeating-linear-gradient(
+		45deg,
+		rgba(255, 255, 255, .5),
+		rgba(255, 255, 255, .5) 4px,
+		transparent 4px,
+		transparent 8px
+	);
+}

package/{component → el}/Slider.tpl

@@ -220,7 +220,7 @@
 		}
 		function set(val, e, pos) {
 			load()
-			val = (val < min ? min : val > max ? max : val).step(step)
+			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)
 			}

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 {
@@ -225,7 +228,7 @@
 
 %el form1-array
 	.col
-		.input.p13
+		.input.p13.cf
 			.left
 				= _(title||name)
 			.input__hint
@@ -237,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.11.0
+* @version  22.12.0
 * @author   Lauri Rooden <lauri@rooden.ee>
 * @license  MIT License
 */
@@ -329,10 +329,9 @@
 	var undef
 	, P = "prototype"
 	, A = Array[P]
-	, F = Function[P]
 	, S = String[P]
 	, N = Number[P]
-	, slice = F.call.bind(A.slice)
+	, slice = Function[P].call.bind(A.slice)
 	, fns = {}
 	, hasOwn = fns.hasOwnProperty
 	, fnRe = /('|")(?:\\?.)*?\1|\/(?:\\?.)+?\/[gim]*|\b(?:false|in|new|null|this|true|typeof|void|function|var|if|else|return)\b|\.\w+|\w+:/g
@@ -347,26 +346,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) {
@@ -403,6 +382,13 @@
 		return this.indexOf(item) < 0 && this.push(item)
 	}
 
+	A.pluck = function(name) {
+		for (var arr = this, i = arr.length, out = []; i--; ) {
+			out[i] = arr[i][name]
+		}
+		return out
+	}
+
 	// THANKS: Oliver Steele - Functional Javascript [http://www.osteele.com/sources/javascript/functional/]
 	function Fn(expr /*, scope, mask1, ..maskN */) {
 		var args = []
@@ -453,21 +439,6 @@
 		return "" + this
 	}
 
-	S.safe = function() {
-		return this
-		.replace(/&/g, "&amp;")
-		.replace(/</g, "&lt;")
-		.replace(/>/g, "&gt;")
-		.replace(/\"/g, "&quot;")
-	}
-
-	S.capitalize = function() {
-		return this.charAt(0).toUpperCase() + this.slice(1)
-	}
-
-	S.lower = S.toLowerCase
-	S.upper = S.toUpperCase
-
 	N.step = function(a, add) {
 		var x = ("" + a).split(".")
 		, steps = this / a
@@ -481,57 +452,6 @@
 		})
 	}
 
-	N.scale = words([1000, 1000, 1000], ["","k","M","G"], {"default": "{n}{u}"})
-
-	S.scale = function() {
-		return this.replace(numbersRe, function(num) {
-			return (+num).scale()
-		})
-	}
-
-	S.pick = N.pick = function() {
-		var val = this + "="
-		for (var s, a = arguments, i = 0, len = a.length; i < len;) {
-			s = a[i++]
-			if (s.indexOf(val) == 0) {
-				s = s.slice(val.length)
-				i = len
-			}
-		}
-		return s.replace("#", this)
-	}
-
-	S.plural = N.plural = function() {
-		// Plural-Forms: nplurals=2; plural=n != 1;
-		// http://www.gnu.org/software/gettext/manual/html_mono/gettext.html#Plural-forms
-		return arguments[ +Fn("n->" + (String.plural || "n!=1"))( parseFloat(this) ) ].replace("#", this)
-	}
-
-	A.pluck = function(name) {
-		for (var arr = this, i = arr.length, out = []; i--; ) {
-			out[i] = arr[i][name]
-		}
-		return out
-	}
-
-	function words(steps, units, strings, overflow) {
-		return function(input) {
-			var n = +(arguments.length ? input : this)
-			, i = 0
-			, s = strings || {"default": "{n} {u}{s}"}
-
-			for (; n>=steps[i]; ) {
-				n /= steps[i++]
-			}
-			if (i == steps.length && overflow) {
-				return overflow(this)
-			}
-			i = units[i]
-			return (s[n < 2 ? i : i + "s"] || s["default"]).format({n: n, u: i, s: n < 2 ? "" : "s"})
-		}
-	}
-	Fn.words = words
-
 	function wait(fn) {
 		var pending = 1
 		function resume() {
@@ -555,7 +475,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 +569,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
@@ -831,7 +752,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])
 				}
@@ -858,7 +779,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 ?
@@ -881,13 +802,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
@@ -901,7 +823,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")
 						}
@@ -913,7 +835,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
@@ -926,7 +848,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) {
@@ -959,7 +881,7 @@
 		if (params._d = params._v = view.child) {
 			bubbleDown(params, close)
 		}
-		if (lastView == view) {
+		if (lastView === view) {
 			emit(view, "show", params)
 			blur()
 		}
@@ -1007,7 +929,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)
 		}
@@ -1058,20 +980,20 @@
 /* litejs.com/MIT-LICENSE.txt */
 
 
-!function(window, document, Object, Event, protoStr) {
+!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
@@ -1089,6 +1011,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
 		},
@@ -1152,14 +1079,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) {
-		if (typeof name != "string") {
+		if (!isString(name)) {
 			return new ElWrap(name)
 		}
 		var el, pres
@@ -1168,14 +1091,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"
@@ -1256,11 +1179,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) {
@@ -1272,6 +1195,7 @@
 	}
 
 	function valFn(el, val) {
+		if (!el) return ""
 		var input, step, key, value
 		, i = 0
 		, type = el.type
@@ -1279,8 +1203,6 @@
 		, checkbox = type === "checkbox" || type === "radio"
 
 		if (el.tagName === "FORM") {
-			opts = {}
-
 			// Disabled controls do not receive focus,
 			// are skipped in tabbing navigation, cannot be successfully posted.
 			//
@@ -1289,15 +1211,11 @@
 			//
 			// Read-only checkboxes can be changed by the user
 
-			for (; input = el.elements[i++]; ) if (!input.disabled && (key = input.name || input.id)) {
+			for (opts = {}; input = el.elements[i++]; ) if (!input.disabled && (key = input.name || input.id)) {
 				value = valFn(input)
 				if (value !== UNDEF) {
 					step = opts
-					key.replace(/\[(.*?)\]/g, function(_, _key, offset) {
-						if (step == opts) key = key.slice(0, offset)
-						step = step[key] || (step[key] = step[key] === null || _key && +_key != _key ? {} : [])
-						key = _key
-					})
+					key.replace(/\[(.*?)\]/g, replacer)
 					step[key || step.length] = value
 				}
 			}
@@ -1336,17 +1254,22 @@
 		return checkbox && !el.checked ?
 		(type === "radio" ? UNDEF : null) :
 		el.valObject !== UNDEF ? el.valObject : el.value
+
+		function replacer(_, _key, offset) {
+			if (step == opts) key = key.slice(0, offset)
+			step = step[key] || (step[key] = step[key] === null || _key && +_key != _key ? {} : [])
+			key = _key
+		}
 	}
 
 	function append(el, child, before) {
 		if (!el.nodeType) {
 			return el.append ? el.append(child, before) : el
 		}
-		var fragment
+		var fragment, tmp
 		, i = 0
-		, tmp = typeof child
 		if (child) {
-			if (tmp == "string" || tmp == "number") child = document.createTextNode(child)
+			if (isString(child) || isNumber(child)) 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")
@@ -1371,7 +1294,7 @@
 				/**/
 				tmp.insertBefore(child,
 					(before === true ? tmp.firstChild :
-					typeof before == "number" ? tmp.childNodes[
+					isNumber(before) ? tmp.childNodes[
 						before < 0 ? tmp.childNodes.length - before - 2 : before
 					] : before) || null
 				)
@@ -1436,7 +1359,7 @@
 	function hasClass(el, name) {
 		var current = el.className || ""
 
-		if (typeof current !== "string") {
+		if (!isString(current)) {
 			current = el.getAttribute("class") || ""
 		}
 
@@ -1445,7 +1368,7 @@
 
 	function cls(el, name, set) {
 		var current = el.className || ""
-		, useAttr = typeof current !== "string"
+		, useAttr = !isString(current)
 
 		if (useAttr) {
 			current = el.getAttribute("class") || ""
@@ -1524,14 +1447,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 && isNumber(data)) {
 			delay = data
 			handler = selector
 			selector = data = null
-		} else if (argi == 4 || argi == 5 && typeof handler == "number") {
+		} else if (argi == 4 || argi == 5 && isNumber(handler)) {
 			delay = handler
 			handler = data
-			if (typeof selector == "string") {
+			if (isString(selector)) {
 				data = null
 			} else {
 				data = selector
@@ -1543,7 +1466,7 @@
 			return
 		}
 		var fn = (
-			typeof handler == "string" ? function(e) {
+			isString(handler) ? function(e) {
 				var target = selector ? El.closest(e.target, selector) : el
 				if (target) View.emit.apply(View, [handler, e, target].concat(data))
 			} :
@@ -1628,6 +1551,7 @@
 	}
 
 	function render(node, _scope) {
+		if (!node) return
 		var bind, fn
 		, scope = elScope(node, 0, _scope)
 		, i = 0
@@ -1648,7 +1572,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++)+ "],''))||" :
 					""
 				) + (
@@ -1678,7 +1602,7 @@
 			render(bind, scope)
 		}
 		/*** ie8 ***/
-		if (ie678 && node.tagName == "SELECT") {
+		if (ie678 && node.tagName === "SELECT") {
 			node.parentNode.insertBefore(node, node)
 		}
 		/**/
@@ -1760,16 +1684,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)"
 							)
 						}
@@ -1785,7 +1709,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))
@@ -1799,7 +1723,7 @@
 		t.el.plugin = t
 	}
 
-	plugin[protoStr] = {
+	plugin[P] = {
 		_done: function() {
 			var t = this
 			, childNodes = t.el.childNodes
@@ -1832,15 +1756,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))
@@ -1849,13 +1773,13 @@
 				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
 
@@ -1867,7 +1791,7 @@
 		}),
 		el: plugin,
 		js: js,
-		map: js.extend({
+		map: extend(js, {
 			done: function() {
 				var self = this
 				, txt = (self.params + self.txt)
@@ -1879,7 +1803,7 @@
 			}
 		}),
 		template: plugin,
-		view: plugin.extend({
+		view: extend(plugin,{
 			done: function() {
 				var fn
 				, t = this
@@ -1889,7 +1813,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
 						) + "),"
@@ -1898,7 +1822,7 @@
 				}
 			}
 		}),
-		"view-link": plugin.extend({
+		"view-link": extend(plugin, {
 			done: function() {
 				var t = this
 				, arr = t.name.split(splitRe)
@@ -1958,7 +1882,7 @@
 			map.bubble
 		););
 		if (fn) {
-			typeof fn === "string" ? View.emit(fn, e, chr, el) : fn(e, chr, el)
+			isString(fn) ? View.emit(fn, e, chr, el) : fn(e, chr, el)
 		}
 	}
 
@@ -2049,4 +1973,26 @@
 	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
+	}
+
+	function isNumber(num) {
+		return typeof num === "number"
+	}
+
+	function isObject(obj) {
+		return !!obj && obj.constructor === Object
+	}
+
+	function isString(str) {
+		return typeof str === "string"
+	}
 }(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.11.0",
+  "version": "22.12.0",
   "description": "UI engine for LiteJS full-stack framework",
   "license": "MIT",
   "author": "Lauri Rooden <lauri@rooden.ee>",
@@ -17,9 +17,9 @@
   "files": [
     "*.js",
     "binding",
-    "component",
-    "polyfill",
-    "css"
+    "css",
+    "el",
+    "polyfill"
   ],
   "litejs": {
     "build": "lj b --out=test/index.html test/dev.html"

package/polyfill/index.js

@@ -200,7 +200,7 @@
 		/**/
 		var data = {
 			setItem: function(id, val) {
-				return data[id] = String(val)
+				return data[id] = "" + val
 			},
 			getItem: function(id) {
 				return data[id]
@@ -239,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
 			)
 		}
@@ -290,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)
@@ -303,13 +303,15 @@
 
 	// 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;"
+	b = "i+=b|0;while(++i<l)"
 	c = "if(t[i]===a)return i;return -1"
-	patch("indexOf",     a + "i+=b|0;while(++i<l)" + c)
+	patch("includes",    a + b + "if(t[i]===a||(a!==a&&t[i]!==t[i]))return!0;return!1")
+	patch("indexOf",     a + b + c)
 	patch("lastIndexOf", a + "i=(b|0)||l;i>--l&&(i=l)||i<0&&(i+=l);++i;while(--i>-1)" + c)
 
 	b = a + "if(A.length<2)b=t"
@@ -329,6 +331,7 @@
 	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]}}}")
 
 
@@ -406,7 +409,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)
@@ -423,7 +426,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
@@ -432,15 +435,18 @@
 		} 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" ?
+			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) {