@litejs/ui 24.0.0-rc.2 → 24.0.0-rc.3

package/README.md

@@ -1,39 +1,31 @@
-[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
+[5]: https://badgen.net/badge/icon/Buy%20Me%20A%20Tea/orange?icon=kofi&label
+[6]: https://www.buymeacoffee.com/lauriro
 
 
-[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].
-
-
-LiteJS UI – [![size][size]][size-src]
+LiteJS UI – [![size][]][size-src] [![Buy Me A Tea][5]][6]
 =========
 
-UI engine for [LiteJS][] full-stack framework.
+LiteJS UI is an old-school framework for making high-quality web UIs.
+
+ - Dependency-free, weighs around 20KB (+8KB polyfills if needed).
+ - Written in ES5, compatible with all browsers (including IE5.5).
+ - No transpiling/compiling/bundling headache, simply write a working code.
 
-> See [wiki][] for more.
+See [wiki][] for more information.
 
 
 ## External links
 
 [GitHub repo](https://github.com/litejs/ui) |
-[npm package](https://npmjs.org/package/@litejs/ui)
+[npm package](https://npmjs.org/package/@litejs/ui) |
+[Buy Me A Tea][6]
 
 
 ## Licence
 
-Copyright (c) 2013-2021 Lauri Rooden <lauri@rooden.ee>  
-[The MIT License](http://lauri.rooden.ee/mit-license.txt)
-
+Copyright (c) 2006-2023 Lauri Rooden <lauri@rooden.ee>  
+[The MIT License](https://litejs.com/MIT-LICENSE.txt)
 

package/binding/_default.js

@@ -7,7 +7,6 @@
 	var hasOwn = Object.prototype.hasOwnProperty
 	, slice = Array.prototype.slice
 
-	fixReadonlyCheckbox.once =
 	bindingEvery.once =
 	emitForm.once =
 	bindingFn.once =
@@ -81,40 +80,11 @@
 		}
 	}
 
-	bindings.fixReadonlyCheckbox = fixReadonlyCheckbox
-	function fixReadonlyCheckbox(el) {
-		El.on(el, "click pointerdown", function(e) {
-			if ((this.firstChild || this).readOnly) {
-				return Event.stop(e)
-			}
-		})
-	}
-
 	bindings.fn = bindingFn
 	function bindingFn(el, fn) {
 		return fn.apply(el, slice.call(arguments, 3))
 	}
 
-	bindings["if"] = bindingsIf
-	function bindingsIf(el, enabled) {
-		var parent = el.parentNode
-		, scope = this
-		if (enabled) {
-			if (!parent && el._ifComm) el._ifComm.parentNode.replaceChild(el, el._ifComm)
-		} else {
-			if (parent) {
-				if (!el._ifComm) {
-					El.on(el, "kill", El.kill.bind(el, el._ifComm = document.createComment("if")))
-					el._ifComm.render = function() {
-						El.render(el, scope)
-					}
-				}
-				parent.replaceChild(el._ifComm, el)
-			}
-			return true
-		}
-	}
-
 	bindings.is = function bindingIs(node, model, path, list, state, prefix) {
 		var match
 		, scope = this

package/{svg.js → binding/svg.js}

@@ -4,20 +4,6 @@
 
 /* global El */
 !function(SVGElement, document, bindings) {
-	var ns = "http://www.w3.org/2000/svg"
-	, xlinkNs = "http://www.w3.org/1999/xlink"
-	, svg = document.createElementNS && document.createElementNS(ns, "svg").createSVGRect
-	, proto = SVGElement && SVGElement.prototype // From IE9
-
-	if (!svg || !proto) {
-		return
-	}
-
-	;(
-		"svg defs pattern g symbol use clipPath textPath marker mask stop linearGradient radialGradient " +
-		"circle ellipse image line mesh path polygon polyline rect text tspan " +
-		"filter feBlend feColorMatrix feComponentTransfer feComposite feConvolveMatrix feDiffuseLighting feDisplacementMap feDropShadow feFlood eFuncA feFuncB feFuncG feFuncR eGaussianBlur feImage feMerge feMergeNode feMorphology feOffset feSpecularLighting feTile feTurbulence"
-	).replace(/\w+/g, populateSvgElements)
 
 	//http://stackoverflow.com/questions/5736398/how-to-calculate-the-svg-path-for-an-arc-of-a-circle
 	function polarToCartesian(centerX, centerY, radius, angle/*InDegrees*/) {
@@ -30,7 +16,7 @@
 	function describeArc(x, y, radius, startAngle, endAngle) {
 		var start = polarToCartesian(x, y, radius, endAngle)
 		, end = polarToCartesian(x, y, radius, startAngle)
-		, arcSweep = endAngle - startAngle <= 180 ? "0" : "1"
+		, arcSweep = endAngle - startAngle <= 180 ? 0 : 1
 		, d = [
 			"M", start.x, start.y,
 			"A", radius, radius, 0, arcSweep, 0, end.x, end.y
@@ -48,11 +34,6 @@
 			3.6 * endAngle
 		))
 	}
-	bindings.xlink = function(el, href) {
-		// https://gist.github.com/leonderijke/c5cf7c5b2e424c0061d2
-		el.setAttributeNS(xlinkNs, "xlink:href", href)
-	}
-	bindings.xlink.once=1
 
 	function drawLine(node) {
 		var length = node.getTotalLength()
@@ -112,8 +93,5 @@
 	}
 	bindings.svgToLast.once =
 	bindings.initChart.once = 1
-	function populateSvgElements(name) {
-		El.cache[name] = document.createElementNS(ns, name)
-	}
 }(this.SVGElement, document, El.bindings) // jshint ignore:line
 

package/binding/topfloat.js

@@ -1,5 +1,5 @@
 
-/* global El */
+/* global El, window */
 El.bindings.topFloat = function(el, offset) {
 	var h = el.offsetHeight + offset
 	, lastAbs = 0

package/css/base.css

@@ -159,17 +159,8 @@ button,
 	opacity: 0 !important;
 	filter: alpha(opacity=0) !important;
 }
-.max {
-	top: 0px;
-	left: 0px;
-	width: 100%;
-	height: 100%;
-	overflow: hidden;
-}
 .abs {
 	position: absolute;
-	top: 0px;
-	left: 0px;
 }
 .absr {
 	position: absolute;
@@ -184,6 +175,13 @@ button,
 	position: relative;
 	height: 100%;
 }
+.max {
+	top: 0px;
+	left: 0px;
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+}
 
 
 /* establishes a new block formatting context */

package/css/form.css

@@ -0,0 +1,79 @@
+
+input[disabled],
+input[readonly] {
+	color: #666;
+	font-style: italic;
+}
+
+input, select, textarea {
+	color: #0F0D1B;
+	background: #c4c4c4;
+}
+body .btn:active, .btn:focus,
+input:active, input:focus,
+select:active, select:focus,
+textarea:active, textarea:focus {
+	box-shadow:
+		0 2px 5px rgba(0, 0, 0, .5) inset,
+		0 0 3px 3px #029FE3;
+}
+
+
+
+input.Toggle {
+	display: block;
+	position: relative;
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+	width: 36px;
+	height: 14px;
+	margin: 4px 0;
+	padding: 0;
+	border-radius: 7px;
+}
+input.Toggle:after {
+	display: block;
+	position: relative;
+	content: "";
+	width: 20px;
+	height: 20px;
+	border-radius: 10px;
+	left: -3px;
+	top: -4px;
+	transition: all .25s cubic-bezier(0, 0, .2, 1) 0s;
+}
+input.Toggle:checked:after {
+	left: 18px;
+}
+input.Toggle:active:after {
+	width: 30px;
+}
+input.Toggle:checked:active:after {
+	left: 8px;
+}
+
+
+/* THEME */
+
+input.Toggle:after {
+	background-color: #666;
+	box-shadow:
+		2px 2px 8px rgba(255, 255, 255, .3) inset,
+		0 1px 5px rgba(0, 0, 0, 1);
+}
+input.Toggle:focus:after {
+	box-shadow:
+		2px 2px 8px rgba(255, 255, 255, .3) inset,
+		0 1px 5px rgba(0, 0, 0, 1),
+		0 0 0 12px rgb(255, 255, 255, .2);
+}
+input.Toggle:checked:after {
+	background-color: #00a651;
+}
+
+
+
+
+
+

package/css/form2.css

@@ -0,0 +1,142 @@
+
+
+:focus {
+	outline: 0;
+	box-shadow:
+		0 0 0 .2rem #fff,
+		0 0 0 .35rem #069;
+}
+
+/* Remove focus for non-keyboard navigation */
+:focus:not(:focus-visible) {
+	box-shadow: none;
+}
+
+
+
+fieldset {
+	position: relative;
+}
+label {
+	cursor: pointer;
+	line-height: 32px;
+}
+
+input[type=checkbox].Toggle,
+input[type=submit] {
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+	position: relative;
+	text-align: center;
+	text-decoration: none;
+}
+
+select[disabled],
+input[disabled],
+input[readonly] {
+        background: red;
+        color: #666;
+        font-style: italic;
+}
+
+input, select, textarea {
+        color: #0F0D1B;
+        background: #c4c4c4;
+}
+body .btn:active, .btn:focus,
+input:active, input:focus,
+select:active, select:focus,
+textarea:active, textarea:focus {
+        box-shadow:
+                0 2px 5px rgba(0, 0, 0, .5) inset,
+                0 0 3px 3px #029FE3;
+}
+
+input {
+	vertical-align: middle;
+	margin: 1em;
+}
+
+
+input.Toggle {
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+	position: relative;
+	padding: 0;
+	outline: 0;
+	width: 36px;
+	height: 14px;
+	margin: 4px 0;
+	border-radius: 7px;
+}
+input.Toggle:after {
+	position: relative;
+	width: 20px;
+	height: 20px;
+	border-radius: 10px;
+}
+input.Toggle:after {
+	content: "";
+	display: block;
+	background-color: #666;
+	left: -3px;
+	top: -4px;
+	transition: all .25s cubic-bezier(0, 0, .2, 1) 0s;
+	box-shadow:
+	2px 2px 8px rgba(255, 255, 255, .3) inset,
+	0 1px 5px rgba(0, 0, 0, 1);
+}
+input.Toggle:focus:after {
+	box-shadow:
+	2px 2px 8px rgba(255, 255, 255, .3) inset,
+	0 1px 5px rgba(0, 0, 0, 1),
+	0 0 0 12px rgb(255, 255, 255, .2);
+}
+input.Toggle:checked:after {
+	background-color: #00a651;
+	left: 17px;
+}
+input.Toggle:active:after {
+	width: 30px;
+}
+input.Toggle:checked:active:after {
+	left: 7px;
+}
+
+
+
+.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;
+}
+/* THEME */
+
+input.Toggle:after {
+        background-color: #666;
+        box-shadow:
+                2px 2px 8px rgba(255, 255, 255, .3) inset,
+                0 1px 5px rgba(0, 0, 0, 1);
+}
+input.Toggle:focus:after {
+        box-shadow:
+                2px 2px 8px rgba(255, 255, 255, .3) inset,
+                0 1px 5px rgba(0, 0, 0, 1),
+                0 0 0 12px rgb(0, 0, 0, .2);
+}
+input.Toggle:checked:after {
+        background-color: #00a651;
+}
+

package/el/Pie.tpl

@@ -58,21 +58,21 @@
 		stroke-width: 1;
 	}
 
-%el Pie
+%svg Pie
 	svg.Pie[viewBox="0 0 60 60"]
 
 
 
-%el Chart
+%svg Chart
 	svg.Chart[viewBox="0 0 600 300"][preserveAspectRatio="xMinYMid meet"]
 		;initChart
 
-%el Chart-line
+%svg Chart-line
 	g.Chart-line
 		;svgToLast
 		path ;svgLine: points, {radius: radius}
 
-%el Chart-axes
+%svg Chart-axes
 	g.labels.x-labels
 		text[x="100"][y="400"] 2008
 		text[x="246"][y="400"] 2009

package/el/Slider.tpl

@@ -260,7 +260,6 @@
 
 %el Toggle
 	label.Toggle.reset[tabindex=0]
-		;fixReadonlyCheckbox
 		input[type=checkbox].hide
 			;readonly: row && !row.write
 			;checked: model && (row && row.opts ? row.opts === model.get(row.path) : !!model.get(row.path))

package/el/confirm.tpl

@@ -4,7 +4,6 @@
 		z-index: 9;
 	}
 	.Confirm-bg {
-		backdrop-filter: blur(5px);
 		background-color: rgba(0, 0, 0, .6);
 	}
 	.Confirm-content {
@@ -21,6 +20,7 @@
 		width: 94%;
 	}
 	.Confirm--blur {
+		filter: blur(5px);
 		transform: scale(.85);
 		transform-origin: 50% 100vh;
 	}
@@ -169,6 +169,6 @@
 						;txt:: _(action.title)
 						;class:: "w" + (12/actions.length)
 						;nop: this.focus()
-						;data: "action", action.action
+						;attr: "data-action", action.action
 						;class:: "is-" + action.action, action.action
 

package/el/form1.tpl

@@ -243,7 +243,7 @@
 	.input.p3.m2b.cf.js-del
 		a.right.Form1-del.hand ×
 			;if: !data.noAdd
-			;data:: "tooltip", _("Delete")
+			;attr:: "data-tooltip", _("Delete")
 			@click: data.del
 		b
 			;if: title