@litejs/ui 21.3.1 → 21.11.0

package/README.md

@@ -1,32 +1,39 @@
-[LiteJS]: https://www.litejs.com/
-[npm package]: https://npmjs.org/package/@litejs/ui
-[GitHub repo]: https://github.com/litejs/ui
-[LiteJS wiki]: https://github.com/litejs/litejs/wiki
+[LiteJS]: https://github.com/litejs/litejs
+[UI]: https://github.com/litejs/ui
+[CLI]: https://github.com/litejs/cli
+[Quick-Start]: https://github.com/litejs/litejs/wiki/Quick-Start
 
 [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 UI – [![size][size]][size-src]
-=========
 
-UI engine for LiteJS full-stack framework.
+[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
+ - **[@litejs/cli][CLI]** - Command line tool installed as global package (or as `devDependencies`)
+
+> Build your first [LiteJS][] app with in 5 minute [Quick Start Guide][Quick-Start].
 
 
-## Get Started
+LiteJS UI – [![size][size]][size-src]
+=========
+
+UI engine for [LiteJS][] full-stack framework.
 
-Build your first LiteJS app with in 5 minute [Quick Start Guide](https://github.com/litejs/litejs/wiki/Quick-Start).
-See [LiteJS wiki][] for more.
+> See [wiki][] for more.
 
 
 ## External links
 
-[GitHub repo][] |
-[npm package][]
+[GitHub repo](https://github.com/litejs/ui) |
+[npm package](https://npmjs.org/package/@litejs/ui)
 
 
 ## Licence
 
-Copyright (c) 2013-2020 Lauri Rooden <lauri@rooden.ee>  
+Copyright (c) 2013-2021 Lauri Rooden <lauri@rooden.ee>  
 [The MIT License](http://lauri.rooden.ee/mit-license.txt)
 
 

package/binding/_default.js

@@ -125,9 +125,10 @@
 			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)
+			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)
 		}
 	}
 

package/component/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()
+		function set(val, e, pos) {
+			load()
 			val = (val < min ? min : val > max ? max : val).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/confirm.tpl

@@ -4,31 +4,25 @@
 		z-index: 9;
 	}
 	.Confirm-bg {
-		background-color: #000;
-		opacity: .6;
+		backdrop-filter: blur(5px);
+		background-color: rgba(0, 0, 0, .6);
 	}
 	.Confirm-content {
 		position: absolute;
 		left: 0;
 		right: 0;
 		margin: 0 auto;
-		top: 60px;
+		top: 4%;
 		width: 400px;
 		background-color: #fff;
 		box-shadow: 0 2px 10px 2px rgba(255,255,255,.5);
-		animation: .2s cubic-bezier(.2, -.3, .8, 0) reverse Confirm--blur;
 	}
 	.sm .Confirm-content {
-		width: 100%;
+		width: 94%;
 	}
 	.Confirm--blur {
-		animation: .2s cubic-bezier(.2, 1, .8, 1.3) forwards Confirm--blur;
-	}
-	@keyframes Confirm--blur {
-		to {
-			filter: blur(4px);
-			transform: scale(.9);
-		}
+		transform: scale(.85);
+		transform-origin: 50% 100vh;
 	}
 
 // reverse animation: x1, y1, x2, y2 -> (1 - x2), (1 - y2), (1 - x1), (1 - y1)
@@ -75,6 +69,7 @@
 		, 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 = [
@@ -84,7 +79,8 @@
 			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(body.lastChild, "Confirm--blur")
+		El.cls(blurEl, "Confirm--blur")
+		El.cls(el.lastChild, "Confirm--blur", 0, 1)
 		El.append(body, el)
 		El.render(el, scope)
 		if (scope.code) {
@@ -115,10 +111,8 @@
 		}
 		function resolve(e, key) {
 			if (el) {
-				El.rmKb(kbMap)
-				El.kill(el)
-				El.cls(body.lastChild, "Confirm--blur", 0)
-				el = null
+				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)
@@ -132,11 +126,11 @@
 	})
 
 %el Confirm
-	.Confirm.max.fix
+	.Confirm.max.fix.anim
 		.Confirm-bg.max.abs
-		.Confirm-content.grid.p2
-			.col.ts3 ;txt:: _(title)
-			.col.js-body ;txt:: _(body)
+		.Confirm-content.Confirm--blur.grid.p2.anim
+			.col.ts3 ;txt:: _(title, map)
+			.col.js-body ;txt:: _(body, map)
 			.row.js-numpad
 				;if: code
 				;each: num in [1,2,3,4,5,6,7,8,9,"CLEAR",0]

package/component/form1.tpl

@@ -140,13 +140,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);
 	}
 

package/css/base.css

@@ -194,7 +194,6 @@ button,
 .btn,
 .nowrap,
 .ellipsis {
-	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
@@ -207,10 +206,10 @@ button,
 .anim,
 .anim:after,
 .anim:before {
-	-webkit-transition: all .2s cubic-bezier(0, 0, .2, 1) 0s;
-	   -moz-transition: all .2s cubic-bezier(0, 0, .2, 1) 0s;
-	     -o-transition: all .2s cubic-bezier(0, 0, .2, 1) 0s;
-	        transition: all .2s cubic-bezier(0, 0, .2, 1) 0s;
+	-webkit-transition: all .25s cubic-bezier(0, 0, .2, 1) 0s;
+	   -moz-transition: all .25s cubic-bezier(0, 0, .2, 1) 0s;
+	     -o-transition: all .25s cubic-bezier(0, 0, .2, 1) 0s;
+	        transition: all .25s cubic-bezier(0, 0, .2, 1) 0s;
 
 	-webkit-transform: translate3d(0, 0, 0);     /* 1 */
 	        transform: translate3d(0, 0, 0);

package/css/contrast.css

@@ -0,0 +1,58 @@
+
+/**
+ *  1. IE10 from Windows 7 and legacy Microsoft Edge
+ *     Microsoft Edge79 supports the new standards
+ *  2. As with all other keywords, these names are ASCII case-insensitive.
+ *     They are shown here with mixed capitalization for legibility.
+ *  3. Use transparent outline instead of removing it,
+ *     in forced color modes, you'll get a visual outline,
+ *     as the color will be overridden by the system colors.
+ *
+ * https://drafts.csswg.org/css-color-4/#css-system-colors
+ * https://www.a11yproject.com/posts/2020-01-23-operating-system-and-browser-accessibility-display-modes/
+ * https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/
+ *
+ * Internet Explorer and legacy Microsoft Edge    | New Microsoft Edge and web standards
+ * @media (-ms-high-contrast: active) {}          | @media (forced-colors: active) {}
+ * @media (-ms-high-contrast: black-on-white) {}  | @media (forced-colors: active) and (prefers-color-scheme: light) {}
+ * @media (-ms-high-contrast: white-on-black) {}  | @media (forced-colors: active) and (prefers-color-scheme: dark) {}
+ * -ms-high-contrast-adjust: none;                | forced-color-adjust: none;
+ */
+
+@media (-ms-high-contrast: active), (forced-colors: active) {
+	.preserveOriginalColors {
+		-ms-high-contrast-adjust: none;      /* 1 */
+		forced-color-adjust: none;
+	}
+	.useSystemColors {
+		background-color: Window;            /* 1 */
+		background-color: Canvas;            /* 2 */
+		border-color: -ms-hotlight;          /* 1 */
+		border-color: LinkText;
+		color: WindowText;                   /* 1 */
+		color: CanvasText;
+	}
+}
+@media (prefers-color-scheme: dark) {
+	body {
+		background-color: #000;
+		color: #fff;
+	}
+}
+@media (inverted-colors: inverted) {
+	img,
+	video {
+		filter: invert(100%);
+	}
+}
+@media (prefers-reduced-motion: reduce) {
+	.anim {
+		animation: none;
+	}
+}
+
+:focus {
+	outline: 2px solid transparent;              /* 3 */
+	box-shadow: 0 0 10px 2px rgba(0, 0, 0, .8);
+}
+

package/css/font-mono.css

@@ -0,0 +1,7 @@
+
+.mono {
+	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
+}
+
+
+

package/css/font-native.css

@@ -1,9 +1,22 @@
 
+/**
+ * https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
+ *
+ *  - Segoe UI before system-ui (system-ui is Microsoft YaHei UI in Win10 in Simplified Chinese)
+ */
+
 body {
-	/* https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/ */
 	font-family:
-		system-ui, -apple-system, BlinkMacSystemFont,
-		"Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans",
-		"Helvetica Neue", sans-serif;
+		"Segoe UI",
+		system-ui,
+		-apple-system,
+		Oxygen,             /* KDE */
+		Cantarell,          /* GNOME */
+		Ubuntu,
+		Roboto,
+		"Droid Sans",
+		"Helvetica Neue",   /* macOS versions < 10.11 */
+		sans-serif;
+		/* Apple Color Emoji, Segoe UI Emoji; */
 }
 

package/css/font-numbers.css

@@ -0,0 +1,8 @@
+
+
+@font-face {
+	font-family: "sans-num";
+	src: local(sans-serif);
+	unicode-range: U+30-39 /* numbers */, U+2070-207F /* superscript \d+-=()n */, U+2080-208F /* subscript \d+-=()n */;
+}
+

package/framekiller.js

@@ -0,0 +1,8 @@
+
+// Clickjacking defense
+//  - If JavaScript is disabled, the site will not display at all
+//  - Top-level navigation requires a user gesture
+//    https://github.com/WICG/interventions/issues/16
+if (self !== top) throw "Framed: " + document.referrer
+
+