@litejs/ui 23.3.1 → 23.3.2

package/css/base.css

@@ -231,13 +231,24 @@ button,
 	float: right !important;
 }
 
+.sm .sm-t-left,
+.md .md-t-left,
+.lg .md-t-left,
+.lg .lg-t-left,
 .t-left {
 	text-align: left;
 }
-
+.sm .sm-t-center,
+.md .md-t-center,
+.lg .md-t-center,
+.lg .lg-t-center,
 .t-center {
 	text-align: center;
 }
+.sm .sm-t-right,
+.md .md-t-right,
+.lg .md-t-right,
+.lg .lg-t-right,
 .t-right {
 	text-align: right;
 }

package/index.js

@@ -506,6 +506,8 @@
 	, templateRe = /([ \t]*)(%?)((?:("|')(?:\\\4|.)*?\4|[-\w:.#[\]]=?)*)[ \t]*([>^;@|\\\/]|!?=|)(([\])}]?).*?([[({]?))(?=\x1f|\n|$)+/g
 	, renderRe = /[;\s]*(\w+)(?:(::?| )((?:(["'\/])(?:\\\3|.)*?\3|[^;])*))?/g
 	, selectorRe = /([.#:[])([-\w]+)(?:\(((?:[^()]|\([^)]+\))+?)\)|([~^$*|]?)=(("|')(?:\\.|[^\\])*?\6|[-\w]+))?]?/g
+	, fnRe = /('|")(?:\\\1|.)*?\1|\/(?:\\?.)+?\/[gim]*|\b(?:n|data|b|s|B|r|false|in|new|null|this|true|typeof|void|function|var|if|else|return)\b|\.\w+|\w+:/g
+	, wordRe = /\b[a-z_$][\w$]*/ig
 	, splitRe = /[,\s]+/
 	, camelRe = /\-([a-z])/g
 	, bindings = El.bindings = {
@@ -616,7 +618,8 @@
 
 		// NOTE: IE-s cloneNode consolidates the two text nodes together as one
 		// http://brooknovak.wordpress.com/2009/08/23/ies-clonenode-doesnt-actually-clone/
-		el = (elCache[name] || (elCache[name] = document.createElement(name))).cloneNode(true)
+		el = (name = elCache[name] || (elCache[name] = document.createElement(name))).cloneNode(true)
+		el._s = name._s
 
 		if (pres) {
 			setAttr(el, pre)
@@ -723,7 +726,7 @@
 			// Read-only checkboxes can be changed by the user
 
 			for (opts = {}; (input = el.elements[i++]); ) if (!input.disabled && (key = input.name || input.id)) {
-				value = valFn(input)
+				value = valFn(input, val != UNDEF ? val[key] : UNDEF)
 				if (value !== UNDEF) {
 					step = opts
 					key.replace(/\[(.*?)\]/g, replacer)
@@ -734,7 +737,7 @@
 			return opts
 		}
 
-		if (arguments.length > 1) {
+		if (val !== UNDEF) {
 			if (opts) {
 				value = (isArray(val) ? val : [ val ]).map(String)
 				for (; (input = opts[i++]); ) {
@@ -795,8 +798,12 @@
 
 			if (child.nodeType) {
 				tmp = el.insertBefore ? el : el[el.length - 1]
-				if ((i = getAttr(tmp, "data-child"))) {
-					before = findCom(tmp, i) || tmp
+				if ((i = getAttr(child, "slot"))) {
+					child.removeAttribute("slot")
+					before = findCom(tmp, "%slot-" + i) || tmp
+					tmp = before.parentNode
+				} else if ((i = getAttr(tmp, "data-slot"))) {
+					before = findCom(tmp, "%slot-" + i) || tmp
 					tmp = before.parentNode
 					// TODO:2016-07-05:lauri:handle numeric befores
 				}
@@ -1068,14 +1075,30 @@
 		if (!node) return
 		var bind, fn
 		, scope = elScope(node, 0, _scope)
-		, i = 0
 
 		if (node.nodeType != 1) {
 			if (node.render) node.render(scope)
 			return
 		}
 
-		if ((bind = getAttr(node, BIND_ATTR))) {
+		hydrate(node, BIND_ATTR, scope)
+		for (bind = node.firstChild; bind; bind = fn) {
+			fn = bind.nextSibling
+			render(bind, scope)
+		}
+		hydrate(node, "data-out", scope)
+
+		/*** ie8 ***/
+		if (ie678 && node.tagName === "SELECT") {
+			node.parentNode.insertBefore(node, node)
+		}
+		/**/
+	}
+
+	function hydrate(node, attr, scope) {
+		var bind, fn
+		, i = 0
+		if ((bind = getAttr(node, attr))) {
 			scope._m = bindMatch
 			scope._t = bind
 			// i18n(bind, lang).format(scope)
@@ -1097,7 +1120,13 @@
 			}) + "r)"
 
 			try {
-				if (Function("n,data,b,s,B,r", "with(data||{})return " + fn).call(node, node, scope, bindings, setAttr, BIND_ATTR)) {
+				var vars = fn.replace(fnRe, "").match(wordRe) || []
+				for (i = vars.length; i--; ) if (vars.indexOf(vars[i]) !== i) vars.splice(i, 1)
+				if (Function(
+					"n,data,b,s,B,r",
+					(vars[0] ? "var " + vars.join("='',") + "='';" : "") +
+					"with(data||{})return " + fn
+				).call(node, node, scope, bindings, setAttr, attr)) {
 					return
 				}
 			} catch (e) {
@@ -1110,21 +1139,17 @@
 				}
 			}
 		}
-
-		for (bind = node.firstChild; bind; bind = fn) {
-			fn = bind.nextSibling
-			render(bind, scope)
-		}
-		/*** ie8 ***/
-		if (ie678 && node.tagName === "SELECT") {
-			node.parentNode.insertBefore(node, node)
-		}
-		/**/
 	}
 
+
 	El.empty = empty
 	El.kill = kill
 	El.render = render
+	El.replace = replace
+	function replace(oldEl, newEl) {
+		var parent = oldEl && oldEl.parentNode
+		if (parent && newEl) return parent.replaceChild(oldEl, newEl)
+	}
 
 	for (var key in El) wrap(key)
 
@@ -1145,10 +1170,8 @@
 
 	wrapProto.append = function(el) {
 		var elWrap = this
-		if (elWrap._ca > -1) {
-			append(elWrap[elWrap._ca], el)
-		// } else if (elWrap._cb > -1) {
-		// elWrap.splice(elWrap._cb, 0, el)
+		if (elWrap._s) {
+			append(elWrap[elWrap._s[getAttr(el, "slot") || elWrap._s._] || 0], el)
 		} else {
 			elWrap.push(el)
 		}
@@ -1157,8 +1180,7 @@
 
 	wrapProto.cloneNode = function(deep) {
 		deep = new ElWrap(this, deep)
-		deep._ca = this._ca
-		//deep._cb = this._cb
+		deep._s = this._s
 		return deep
 	}
 
@@ -1210,8 +1232,8 @@
 							text = text.replace(/(\w+):?/, "on:'$1',")
 						} else if (op != ";" && op != "^") {
 							text = (parent.tagName === "INPUT" ? "val" : "txt") + (
-								op === "=" ? ":" + text.replace(/\\|'/g, "\\$&") :
-								":_('" + text.replace(/\\|'/g, "\\$&") + "',data)"
+								op === "=" ? ":" + text.replace(/'/g, "\\'") :
+								":_('" + text.replace(/'/g, "\\'") + "',data)"
 							)
 						}
 						appendBind(parent, text, ";", op)
@@ -1248,8 +1270,10 @@
 			, el = childNodes[1] ? new ElWrap(childNodes) : childNodes[0]
 
 			if (i > -1) {
-				if (childNodes[i].nodeType == 1) setAttr(childNodes[el._ca = i], "data-child", t.el._ck)
-				// else el._cb = i
+				if (childNodes[i].nodeType == 1 && t.el._sk) {
+					setAttr(childNodes[i], "data-slot", t.el._sk)
+				}
+				el._s = t.el._s
 			}
 
 			t.el.plugin = t.el = t.parent = null
@@ -1281,12 +1305,14 @@
 				Object.assign(bindings, Function("return({" + this.txt + "})")())
 			}
 		}),
-		child: extend(plugin, {
+		slot: extend(plugin, {
 			done: function() {
-				var key = "@child-" + (++seq)
+				var name = this.name || ++seq
+				var key = "%slot-" + name
 				, root = append(this.parent, document.createComment(key))
 				for (; root.parentNode; root = root.parentNode);
-				root._ck = key
+				;(root._s || (root._s = {}))[name] = root.childNodes.length - 1
+				if (!this.name) root._s._ = root._sk = name
 				root._cp = root.childNodes.length - 1
 			}
 		}),
@@ -1352,6 +1378,7 @@
 			}
 		})
 	}
+	El.plugins.child = El.plugins.slot
 
 	xhr.view = xhr.tpl = El.tpl = parseTemplate
 	xhr.css = function(str) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@litejs/ui",
-  "version": "23.3.1",
+  "version": "23.3.2",
   "description": "UI engine for LiteJS full-stack framework",
   "license": "MIT",
   "author": "Lauri Rooden <lauri@rooden.ee>",
@@ -25,7 +25,7 @@
     "test": "TZ='Europe/Tallinn' lj test test/index.js --brief --coverage && jshint --verbose *.js src/*.js binding/*.js polyfill/*.js"
   },
   "devDependencies": {
-    "@litejs/cli": "23.3.0",
+    "@litejs/cli": "23.3.2",
     "jshint": "2.13.6"
   },
   "litejs": {

package/el/Segment7.tpl.js

@@ -1 +0,0 @@
-El.tpl('%css	.Segment7 {		position: relative;		height: 1em;		width: .5em;		margin-right: 8px;	}	.Seg-V, .Seg-H {		position: absolute;		top: 0;		left: .105em;		height: .098em;		width: .28em;		background-color: currentColor;	}	.Seg-V + .Seg-V { top: .392em; }	.Seg-V + .Seg-V + .Seg-V { top: .784em; }	.Seg:before, .Seg:after {		position: absolute;		content: "";		border: .049em solid transparent;	}	.Seg-V:before {	    	left: -.098em;		border-right-color: currentColor;	}	.Seg-V:after {		right: -.098em;		border-left-color: currentColor;	}	.Seg-H:before {	    	top: -.098em;		border-bottom-color: currentColor;	}	.Seg-H:after {		bottom: -.098em;		border-top-color: currentColor;	}	.Seg-H {		top: .105em;		left: 0;		height: .28em;		width: .098em;	}	.Seg-H + .Seg-H {		left: .392em;	}	.Seg-H + .Seg-H + .Seg-H {		top: .497em;	}	.Seg-H + .Seg-H + .Seg-H + .Seg-H {		left: 0;	}	[data-value="0"]>[off~="0"],	[data-value="1"]>[off~="1"],	[data-value="2"]>[off~="2"],	[data-value="3"]>[off~="3"],	[data-value="4"]>[off~="4"],	[data-value="5"]>[off~="5"],	[data-value="6"]>[off~="6"],	[data-value="7"]>[off~="7"],	[data-value="8"]>[off~="8"],	[data-value="9"]>[off~="9"],	[data-value="a"]>[off~="a"],	[data-value="b"]>[off~="b"],	[data-value="c"]>[off~="c"],	[data-value="d"]>[off~="d"],	[data-value="e"]>[off~="e"],	[data-value="f"]>[off~="f"] {		color: rgba(0,0,0,0.07);	}%el Segment7	.Segment7.left		.Seg.Seg-V.Seg-A[off="1 4 b d"]		.Seg.Seg-V.Seg-G[off="0 1 7 c"]		.Seg.Seg-V.Seg-D[off="1 4 7 a f"]		.Seg.Seg-H.Seg-F[off="1 2 3 7 d"]		.Seg.Seg-H.Seg-B[off="5 6 b c e f"]		.Seg.Seg-H.Seg-C[off="2 c e f"]		.Seg.Seg-H.Seg-E[off="1 3 4 5 7 9"]')

package/el/confirm.tpl.js

@@ -1 +0,0 @@
-El.tpl('%css	.Confirm {		z-index: 9;	}	.Confirm-bg {		backdrop-filter: blur(5px);		background-color: rgba(0, 0, 0, .6);	}	.Confirm-content {		position: absolute;		left: 0;		right: 0;		margin: 0 auto;		top: 4%;		width: 600px;		background-color: #fff;		box-shadow: 0 2px 10px 2px rgba(255,255,255,.5);	}	.sm .Confirm-content {		width: 94%;	}	.Confirm--blur {		transform: scale(.85);		transform-origin: 50% 100vh;	}// reverse animation: x1, y1, x2, y2 -> (1 - x2), (1 - y2), (1 - x1), (1 - y1)// https://developer.mozilla.org/en-US/docs/Web/API/Notification// https://developers.google.com/web/fundamentals/push-notifications/display-a-notification// var n = new Notification(title, options);// {//   "//": "Visual Options",//   "body": "Did you make a $1,000,000 purchase at Dr. Evil...",//   "icon": "images/ccard.png",  // 192px or more is a safe bet//   "image": "<URL String>",     // width 1350px or more, ratio of 4:3 for desktop and Android will crop the image//   "badge": "<URL String>", // 72px or more should be good//   "vibrate": "<Array of Integers>",//   "sound": "<URL String>",//   "dir": "<String of \'auto\' | \'ltr\' | \'rtl\'>",//   "//": "Behavioural Options",//   "tag": "<String>", // group messages so that any old notifications that are currently displayed will be closed if they have the same tag as a new notification.//   "data": "<Anything>",//   "requireInteraction": "<boolean>", // for Chrome on desktop//   "renotify": "<Boolean>",//   "silent": "<Boolean>",//   "//": "Both Visual & Behavioural Options",//   "actions": "<Array of Strings>",//   "//": "Information Option. No visual affect.",//   "timestamp": "<Long>" // ms// }// Star Wars shamelessly taken from the awesome Peter Beverloo// https://tests.peter.sh/notification-generator///   "vibrate": [500,110,500,110,450,110,200,110,170,40,450,110,200,110,170,40,500]//   "actions": [//     { "action": "yes", "title": "Yes", "icon": "images/yes.png" },//     { "action": "no", "title": "No", "icon": "images/no.png" }//   ]%js	View.on("confirm", function(title, opts, next) {		View.blur()		if (!next && typeof opts === "function") {			next = opts			opts = null		}		var sound, vibrate		, code = ""		, el = El("Confirm")		, scope = El.scope(el, El.data)		, kbMap = {}		, body = document.body		, blurEl = body.lastChild		Object.assign(scope, opts)		scope.title = title || "Confirm?"		if (!scope.actions) scope.actions = [			{ 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}			if (a.key) kbMap[a.key] = resolve.bind(el, el, a.action)		}		El.cls(blurEl, "Confirm--blur")		El.cls(el.lastChild, "Confirm--blur", 0, 1)		El.append(body, el)		El.render(el, scope)		if (scope.code) {			El.findAll(el, ".js-numpad").on("click", numpad)			kbMap.backspace = kbMap.del = kbMap.num = numpad		}		El.addKb(kbMap, el)		El.findAll(el, ".js-btn").on("click", resolve)		View.one("navigation", resolve)		if (scope.bgClose) El.on(el, "click", resolve)		El.on(el, "wheel", Event.stop)		El.on(el.lastChild, "click", Event.stop)		if (scope.vibrate && navigator.vibrate) {			vibrate = navigator.vibrate(scope.vibrate)		}		if (scope.sound && window.Audio) {			sound = new Audio(scope.sound)			sound.play()		}		function numpad(e, _num) {			// Enter pressed on focused element			if (_num == void 0 && e.clientX == 0) return			var num = _num == void 0 ? e.target[El.T] : _num			code += num			if (num == "CLEAR" || num == "del" || num == "backspace") code = ""			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)				if (action && next) {					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	.Confirm.max.fix.anim		.Confirm-bg.max.abs		.Confirm-content.Confirm--blur.grid.p2.anim			.col.ts3 ;txt:: _(title, 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						;txt:: _(action.title)						;class:: "w" + (12/actions.length)						;nop: this.focus()						;data: "action", action.action						;class:: "is-" + action.action, action.action')

package/el/form1.tpl.js

@@ -1 +0,0 @@
-El.tpl('%css	::-moz-focus-inner {		border: 0;		padding: 0;	}	.Form1-del.right {		display: block;		margin: -10px -10px 0 0;		opacity: .2;	}	.Form1-del {		font-size: 20px;		font-weight: 700;		border: 1px solid transparent;		line-height: 16px;		width: 20px;		height: 20px;		text-align: center;		border-radius: 4px;	}	.Form1-del:hover {		opacity: 1;		border: 1px solid #aaa;		background-image: linear-gradient(to bottom, #ddd, #888);	}	/**	 *  1. avoid ios styling the submit button	 */	.input {		display: block;		border-radius: 4px;		border: 1px solid #aaa;	}	.field {		width: 100%;	}	.btn,	input,	select,	textarea {		display: block;		border-radius: 4px;		border: 1px solid #aaa;		font-size: 14px;		font-weight: 400;		line-height: 30px;		height: 32px;		padding: 0 8px;		margin: 0;	}	input[type=checkbox] {		height: auto;	}	input[type=time] {		padding: 0 0 0 8px;	}	textarea {		height: 64px;		padding: 8px;		margin: 0;		line-height: 1.1;	}	select {		padding-right: 0;	}	select[multiple] {		height: auto;		padding: 0;	}	input[type=radio],	input[type=checkbox] {		width: auto;		display: inline;		margin-top: -2px;	}	.btn,	input[type=submit] {                /* 1 */		-webkit-appearance: none;   /* 1 */		position: relative;		padding: 0px 14px;		text-align: center;		text-decoration: none;		/* default look */		background-color: #ddd;		color: #444;		cursor: pointer;	}	option[disabled],	.btn.disabled,	.btn[disabled] {		box-shadow: none;		cursor: not-allowed;		font-style: italic;		opacity: .6;		pointer-events: none;	}	.group {		overflow: auto;	}	.group > .btn {		border-radius: 0;		float: left;	}	.group > .btn:first-child {		border-top-left-radius: 4px;		border-bottom-left-radius: 4px;	}	.group > .btn:last-child {		border-top-right-radius: 4px;		border-bottom-right-radius: 4px;	}	.btn--narrow {		line-height: 1.6;		margin: .7em 0;	}	.btn__spacer {		height: 33px;	}	.md .input__label,	.lg .input__label {		padding-right: 8px;		text-align: right;		line-height: 28px;	}	.input__hint {		text-align: right;		color: #444;	}	input[type=checkbox]+.input__hint {		display: inline-block;		margin-left: 8px;	}	.btn:active, .btn:focus,	input:active, input:focus,	select:active, select:focus,	textarea:active, textarea:focus {		border-color: #257;		outline: 0 none;		box-shadow:			0 2px 5px rgba(0, 0, 0, .5) inset,			0 0 2px 2px #6ae;		z-index: 1;	}	.btn:hover,	.btn:focus {		filter: brightness(1.3) saturate(1.2);		text-decoration: none;	}	.btn:active,	.btn.is-active {		box-shadow: inset 0 0 8px rgba(0, 0, 0, .5);	}%el form1-row	label.row		.col.md-w4.input__label			= _(title||name)		.col.md-w8			%child			.input__hint				= _(description)				;if: description%el form1-subheader	.col		= _(title)%el form1-fieldset	fieldset.grid.b2		legend			= _(schema.title || _link.title || "")%el form1	form1-row		input.field%el form1-ro	form1-row>span ;txt: value%el form1-hidden	div>input.field[type=hidden]%el form1-boolean	form1-row		input.field[type=checkbox] ;value: value%el form1-boolean-ro	form1-row>span		= _(!!value)%el form1-password	form1-row		input.field[type=password]%el form1-new-password	form1-row		input.field[type=password][autocomplete=new-password]%el form1-text	form1-row		textarea.field%el form1-text-ro	form1-ro%el form1-enum	form1-row		select.field ;each:val in data["enum"]			option				;val:: val				= _("" + val)%el form1-enum-ro	form1-ro%el form1-list	form1-row		select.field			;list: api(resourceCollection.format(data.params, data)), required ? 0 : [""], value			option				;val:: item.id				;txt:: _(item.name)%el form1-list-ro	form1-row>span		= _(item.name)%el form1-array	.col		.input.p13.cf			.left				= _(title||name)			.input__hint				= _(description)			.js-items.cf			a.btn.right				;if: !data.noAdd				;txt: _(data.name + ".Add")				@click: data.add%el form1-array-item	.input.p3.m2b.cf.js-del		a.right.Form1-del.hand ×			;if: !data.noAdd			;data:: "tooltip", _("Delete")			@click: data.del		b			;if: title			;txt: title		.grid.b2.js-item')