@litejs/ui 22.8.0 → 23.3.0

package/binding/_default.js

@@ -2,7 +2,7 @@
 /* litejs.com/MIT-LICENSE.txt */
 
 
-
+/* global El, View, i18n */
 !function(bindings) {
 	var hasOwn = Object.prototype.hasOwnProperty
 	, slice = Array.prototype.slice
@@ -47,7 +47,7 @@
 			for (; len; len--) {
 				remove(len)
 			}
-			_list = typeof list === "string" ? data.model.get(list, []) : list
+			var _list = typeof list === "string" ? data.model.get(list, []) : list
 			if (typeof _list === "string") _list.split(",")
 			Object.each(_list, add, (
 				_list.constructor === Object ? Object.keys(_list) : _list
@@ -100,7 +100,7 @@
 		var parent = el.parentNode
 		, scope = this
 		if (enabled) {
-			parent || el._ifComm && el._ifComm.parentNode.replaceChild(el, el._ifComm)
+			if (!parent && el._ifComm) el._ifComm.parentNode.replaceChild(el, el._ifComm)
 		} else {
 			if (parent) {
 				if (!el._ifComm) {
@@ -147,7 +147,7 @@
 		var child
 		, childs = node._childs
 		if (!childs) {
-			for (node._childs = childs = []; child = node.firstChild;) {
+			for (node._childs = childs = []; (child = node.firstChild); ) {
 				childs.push(child);
 				node.removeChild(child)
 			}
@@ -161,18 +161,18 @@
 		var node = el
 		, child = getChilds(node)[0]
 		, match = /^\s*(\w+) in (\w*)(.*)/.exec(expr)
-		, fn = "with(data){var out=[],loop={i:0,offset:0},_1,_2=" + match[2]
-		+ match[3].replace(/ (limit|offset):\s*(\d+)/ig, ";loop.$1=$2")
-		+ ";if(_2)for(_1 in _2)if(hasOwn.call(_2,_1)&&!(loop.offset&&loop.offset--)){"
-		+     "loop.i++;"
-		+     "if(loop.limit&&loop.i-loop.offset>loop.limit)break;"
-		+     "var clone=el.cloneNode(true)"
-		+     ",scope=El.scope(clone,data);"
-		+     "scope.loopKey=loop.key=_1;"
-		+     "scope.loop=loop;"
-		+     "scope." + match[1] + "=_2[_1];"
-		+     "out.push(clone);"
-		+ "};return out}"
+		, fn = "with(data){var out=[],loop={i:0,offset:0},_1,_2=" + match[2] +
+			match[3].replace(/ (limit|offset):\s*(\d+)/ig, ";loop.$1=$2") +
+			";if(_2)for(_1 in _2)if(hasOwn.call(_2,_1)&&!(loop.offset&&loop.offset--)){" +
+			"loop.i++;" +
+			"if(loop.limit&&loop.i-loop.offset>loop.limit)break;" +
+			"var clone=el.cloneNode(true)" +
+			",scope=El.scope(clone,data);" +
+			"scope.loopKey=loop.key=_1;" +
+			"scope.loop=loop;" +
+			"scope." + match[1] + "=_2[_1];" +
+			"out.push(clone);" +
+			"};return out}"
 
 		var childs = Function("hasOwn,el,data", fn)(hasOwn, child, this)
 
@@ -191,5 +191,5 @@
 			El.attr(el, "href", chr === "+" || chr === "%" ? "#" + View.expand(url) : url)
 		}
 	}
-}(El.bindings)
+}(El.bindings) // jshint ignore:line
 

package/binding/list.js

@@ -3,6 +3,7 @@
 
 
 
+/* global El */
 El.bindings.list = function(node, list, extra, val) {
 	var child = node._child
 	, data = this

package/binding/persist.js

@@ -3,6 +3,7 @@
 
 
 
+/* global El */
 !function(bindings, window) {
 	bindings.persist = bindingPersist
 
@@ -19,5 +20,5 @@
 		})
 	}
 	bindingPersist.once = bindingPersist
-}(El.bindings, window)
+}(El.bindings, window) // jshint ignore:line
 

package/binding/sticky.js

@@ -2,6 +2,7 @@
 // .sticky { position: sticky; top: -1px; }
 // .sticky.is-stuck { color: red; }
 
+/* global El */
 El.bindings.sticky = function sticky(el) {
 	;(sticky._ob || (sticky._ob = new IntersectionObserver(function(entries) {
 		entries.forEach(function(entry) {

package/binding/topfloat.js

@@ -1,11 +1,12 @@
 
+/* global El */
 El.bindings.topFloat = function(el, offset) {
 	var h = el.offsetHeight + offset
 	, lastAbs = 0
 	, lastTop = 0
 	, toFix = 0
 
-	El.on(window, "scroll", function(e) {
+	El.on(window, "scroll", function() {
 		var pos
 		, top = El.scrollTop()
 

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,7 +7,6 @@ Expects box-sizing: border-box;
 .row {
 	display: block;
 	clear: both;
-	contain: content;
 	*zoom: 1;
 }
 

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/el/Segment7.tpl.js

@@ -0,0 +1 @@
+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/Slider.tpl

@@ -150,7 +150,7 @@
 		, track = el.firstChild
 		, fill = track.firstChild
 		, knob = fill.lastChild
-		, emit = El.emit.bind(el, el, "change").rate(500, true)
+		, emit = El.rate(El.emit.bind(el, el, "change"), 500)
 		on(window, "blur", stop)
 		on(el, "pointerdown", start)
 		el.val = set
@@ -220,7 +220,7 @@
 		}
 		function set(val, e, pos) {
 			load()
-			val = (val < min ? min : val > max ? max : val || 0).step(step)
+			val = El.step(val < min ? min : val > max ? max : val || 0, step)
 			if (value !== void 0 && (!drag || pos !== void 0)) {
 				El.css(fill, vert ? "height" : "width", ((pos || (val-min)*px)+knobLen) + "px", 0)
 			}

package/el/confirm.tpl.js

@@ -0,0 +1 @@
+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

@@ -0,0 +1 @@
+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')

package/el/material.tpl

@@ -2,7 +2,6 @@
 %css
 	.mat-Menu,
 	.tooltip {
-		font-family: "Roboto", "Helvetica", "Arial", sans-serif;
 		border-radius: 2px;
 		position: absolute;
 		margin: 0;
@@ -117,7 +116,6 @@
 	.Checkbox,
 	.Fab,
 	.material {
-		font-family: "Roboto", "Helvetica", "Arial", sans-serif;
 		font-size: 14px;
 		font-weight: 500;
 		position: relative;

package/framekiller.js

@@ -1,3 +1,4 @@
+/* globals self */
 
 // Clickjacking defense
 //  - If JavaScript is disabled, the site will not display at all