@litejs/ui 24.0.0-rc.4 → 24.5.0

package/README.md

@@ -1,11 +1,12 @@
-[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
+
+[3]: https://badgen.net/packagephobia/install/@litejs/ui
+[4]: https://packagephobia.now.sh/result?p=@litejs/ui
 [5]: https://badgen.net/badge/icon/Buy%20Me%20A%20Tea/orange?icon=kofi&label
 [6]: https://www.buymeacoffee.com/lauriro
+[wiki]: https://github.com/litejs/ui/wiki
 
 
-LiteJS UI – [![size][]][size-src] [![Buy Me A Tea][5]][6]
+LiteJS UI – [![Size][3]][4] [![Buy Me A Tea][5]][6]
 =========
 
 LiteJS UI is an old-school framework for making high-quality web UIs.
@@ -17,15 +18,11 @@ LiteJS UI is an old-school framework for making high-quality web UIs.
 See [wiki][] for more information.
 
 
-## External links
+## Licence
 
+Copyright (c) 2006-2024 Lauri Rooden <lauri@rooden.ee>  
+[MIT License](https://litejs.com/MIT-LICENSE.txt) |
 [GitHub repo](https://github.com/litejs/ui) |
 [npm package](https://npmjs.org/package/@litejs/ui) |
 [Buy Me A Tea][6]
 
-
-## Licence
-
-Copyright (c) 2006-2023 Lauri Rooden <lauri@rooden.ee>  
-[The MIT License](https://litejs.com/MIT-LICENSE.txt)
-

package/binding/persist.js

@@ -3,22 +3,12 @@
 
 
 
-/* global El */
-!function(bindings, window) {
-	bindings.persist = bindingPersist
-
-	function bindingPersist(el, _key, surviveReboot) {
-		var stor = (surviveReboot ? "local" : "session") + "Storage"
-		, key = _key || el.id || el.name
-		, value = window[stor].getItem(key)
-
-		if (value) {
-			El.val(el, value)
-		}
-		El.on(el, "keyup change blur", function() {
-			window[stor].setItem(key, El.val(el))
-		})
-	}
-	bindingPersist.once = bindingPersist
-}(El.bindings, window) // jshint ignore:line
+/* global El, window */
+El.$b.persist = function bindingPersist(el, key, surviveReboot) {
+	var stor = window[(surviveReboot ? "local" : "session") + "Storage"]
+	El.val(el, stor[key = key || el.id || el.name] || "")
+	El.on(el, "keyup change blur", function() {
+		stor[key] = El.val(el)
+	})
+}
 

package/binding/sticky.js

@@ -2,8 +2,8 @@
 // .sticky { position: sticky; top: -1px; }
 // .sticky.is-stuck { color: red; }
 
-/* global El */
-El.bindings.sticky = function sticky(el) {
+/* global El, IntersectionObserver */
+El.$b.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)
@@ -12,6 +12,4 @@ El.bindings.sticky = function sticky(el) {
 	El.cls(el, "sticky")
 }
 
-El.bindings.sticky.once = 1
-
 

package/binding/svg.js

@@ -85,7 +85,7 @@
 	bindings.svgToLast = function(el) {
 		El.on(el, "mouseover", function() {
 			if (!svgToLastActive || el != el.parentNode.lastChild) {
-				El.cls(svgToLastActive, "line-active", 0)
+				El.cls(svgToLastActive, "is-active", 0)
 				El.append(el.parentNode, el)
 				El.cls(el, "is-active", svgToLastActive = el)
 			}
@@ -93,5 +93,5 @@
 	}
 	bindings.svgToLast.once =
 	bindings.initChart.once = 1
-}(this.SVGElement, document, El.bindings) // jshint ignore:line
+}(this.SVGElement, document, El.$b) // jshint ignore:line
 

package/binding/topfloat.js

@@ -1,6 +1,6 @@
 
 /* global El, window */
-El.bindings.topFloat = function(el, offset) {
+El.$b.topFloat = function(el, offset) {
 	var h = el.offsetHeight + offset
 	, lastAbs = 0
 	, lastTop = 0
@@ -32,6 +32,5 @@ El.bindings.topFloat = function(el, offset) {
 	})
 }
 
-El.bindings.topFloat.once = 1
 
 

package/css/base.css

@@ -17,6 +17,7 @@
 
 *, *:before, *:after {
 	color: inherit;
+	text-decoration: inherit;
 	-webkit-box-sizing: inherit;          /* 3 */
 	   -moz-box-sizing: inherit;
 	        box-sizing: inherit;
@@ -34,6 +35,7 @@ html {
 	touch-action: manipulation;           /* 4 */
 	-webkit-backface-visibility: hidden;  /* 5 */
 	        backface-visibility: hidden;
+	text-rendering: optimizeLegibility;
 }
 
 html,
@@ -50,20 +52,12 @@ img,
 	outline: 0;
 }
 
-/**
- *  1. Alternate cursor for IE
- *  2. Fixes extra padding issue in IE6/7
- *  3. Firefox default is: b, strong { font-weight: bolder; }
- *     and it does not render well with some fonts (Helvetica Neue on macs for example).
- */
-
-a,
+a[href],
 button,
 label,
 .btn,
 .hand {
 	cursor: pointer;
-	*cursor: hand;       /* 1 */
 	pointer-events: auto;
 }
 
@@ -72,14 +66,16 @@ label,
 }
 
 button {
-	width: auto;         /* 2 */
-	overflow: visible;   /* 2 */
+	/* Fix extra padding issue in IE6/7 */
+	width: auto;
+	overflow: visible;
 }
 
 b,
 strong,
 th {
-	font-weight: bold;   /* 3 */
+	/* Firefox default {font-weight:bolder} does not render well with some fonts (Helvetica Neue on macs). */
+	font-weight: bold;
 }
 
 audio,
@@ -91,7 +87,7 @@ input,
 select,
 svg,
 video {
-	vertical-align: middle;
+	vertical-align: top;
 }
 
 /**
@@ -120,7 +116,7 @@ textarea {
 button,
 [draggable=true],
 .btn,
-.noselect {
+.no-select {
 	-webkit-user-select: none;
 	 -khtml-user-select: none;
 	   -moz-user-select: none;
@@ -190,7 +186,7 @@ button,
 }
 
 .btn,
-.nowrap,
+.no-wrap,
 .ellipsis {
 	text-overflow: ellipsis;
 	white-space: nowrap;

package/css/form.css

@@ -1,60 +1,203 @@
 
-input[disabled],
-input[readonly] {
-	color: #666;
-	font-style: italic;
+
+::-moz-focus-inner {
+	border: 0;
+	padding: 0;
 }
 
-input, select, textarea {
-	color: #0F0D1B;
-	background: #c4c4c4;
+fieldset {
+	position: relative;
 }
-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;
+label {
+	cursor: pointer;
+	line-height: 32px;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+input, select, textarea {
+	width: 100%;
 }
 
-
-
-input.Toggle {
+.btn, button,
+input,
+select,
+textarea {
+	font: inherit;
+	line-height: 30px;
 	display: block;
+	border-radius: 5px;
+	border: 1px solid;
+	padding: 0 8px;
+	margin: 0;
+}
+select {
+	padding: 0 4px;
+}
+select[multiple] {
+	height: auto;
+	padding: 4px 0;
+}
+option {
+	padding: 2px 8px;
+}
+textarea {
+	height: 64px;
+	padding: 8px;
+	line-height: 1.2;
+}
+.btn,
+button,
+input[type=button],
+input[type=submit] {
+	-webkit-appearance: none;   /* remove ios styling */
+	-moz-appearance: none;
+	appearance: none;
 	position: relative;
+	padding: 0px 14px;
+	text-align: center;
+	text-decoration: none;
+	cursor: pointer;
+}
+input[type=radio],
+input[type=checkbox] {
+	border-radius: 10px;
+	width: auto;
+	height: auto;
+	display: inline;
+	margin-top: 6px;
+}
+input[type=file] {
+	cursor: pointer;
+	padding: 0;
+}
+::file-selector-button {
+	font: inherit;
+	border: 0;
+	border-right: 1px solid;
+	padding: 0 8px;
+	margin: 0 8px 0 0;
+	background: transparent;
+}
+input[type=time] {
+	padding: 0 0 0 8px;
+}
+.btn:disabled,
+input:disabled,
+option:disabled,
+textarea:disabled,
+select:disabled {
+	opacity: .6;
+	font-style: italic;
+	box-shadow: none;
+	cursor: not-allowed;
+}
+input[readonly] {
+	opacity: .6;
+	font-style: italic;
+}
+
+input.Toggle {
 	-webkit-appearance: none;
 	-moz-appearance: none;
 	appearance: none;
+	position: relative;
+	padding: 0;
+	outline: 0;
 	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;
+}
+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 {
-	left: 18px;
+	background-color: #00a651;
+	left: 17px;
 }
 input.Toggle:active:after {
 	width: 30px;
 }
 input.Toggle:checked:active:after {
-	left: 8px;
+	left: 7px;
 }
 
 
-/* THEME */
+
+
+
+
+
+.group {
+	padding: 0 1px;
+}
+.group > .btn {
+	display: inline-block;
+	border-radius: 0;
+	margin: 0 -1px;
+}
+.group > .btn:first-child {
+	border-top-left-radius: 5px;
+	border-bottom-left-radius: 5px;
+}
+.group > .btn:last-child {
+	border-top-right-radius: 5px;
+	border-bottom-right-radius: 5px;
+}
+
+
+/*** theme ***/
+
+:focus {
+	outline: 0;
+	box-shadow: 0 0 6px -1px inset, 0 0 6px 1px;
+}
+:focus:not(:focus-visible) {
+	box-shadow: 0;
+}
+
+.btn:active,
+button:active,
+select:active,
+textarea:active,
+input:active {
+	box-shadow: 0 0 8px 1px inset, 0 0 8px 2px;
+}
+input, textarea, select {
+	background: #eee;
+}
+.btn,
+button,
+option:checked,
+input[type=button],
+input[type=submit] {
+	background: #aaa;
+}
+::file-selector-button {
+	box-shadow: 0 0 26px -5px inset;
+}
+:focus::file-selector-button {
+}
 
 input.Toggle:after {
 	background-color: #666;
@@ -66,14 +209,11 @@ 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);
+		0 0 0 12px rgb(0, 0, 0, .2);
 }
 input.Toggle:checked:after {
 	background-color: #00a651;
 }
-
-
-
-
+/**/
 
 

package/css/grid.css

@@ -12,7 +12,7 @@ Expects box-sizing: border-box;
 
 .grid:after,
 .row:after {
-	content: " ";
+	content: "";
 	display: block;
 	clear: both;
 }

package/css/hr-label.css

@@ -0,0 +1,21 @@
+
+/*
+<hr label="or continue with">
+*/
+
+hr {
+	border: none;
+	border-top: currentColor solid 1px;
+	overflow: visible;
+	text-align: center;
+	height: 1px;
+	margin: 1em 0;
+}
+hr[label]:after {
+	background-color: inherit;
+	content: attr(label);
+	padding: 0 1em;
+	position: relative;
+	top: -12px;
+}
+

package/css/smooth-scroll.css

@@ -0,0 +1,8 @@
+
+
+@media not (prefers-reduced-motion) {
+	.smooth-scroll {
+		scroll-behavior: smooth;
+	}
+}
+

package/el/Slider.tpl

@@ -14,12 +14,12 @@
 		width: 4px;
 		height: 100%;
 	}
-	.is-vertical > .Slider-track > .Slider-fill {
+	.is-vertical > * > .Slider-fill {
 		top: auto;
 		bottom: 0;
 		width: 4px;
 	}
-	.is-vertical > .Slider-track > .Slider-fill > .Slider-knob {
+	.is-vertical > * > * > .Slider-knob {
 		margin: -10px -8px 0 0;
 	}
 	.Slider-track {
@@ -31,10 +31,10 @@
 		height: 4px;
 		border-radius: 2px;
 		overflow: visible;
-		background: #666;
+		background: #999;
 	}
 	.Slider-fill {
-		background: rgba(255,255,255,.57);
+		background: rgba(0,0,0,.5);
 	}
 	.Slider-knob,
 	.Toggle-knob {
@@ -43,6 +43,7 @@
 		height: 20px;
 		border-radius: 50%;
 		box-shadow:
+			0 0 0 0 rgb(0, 0, 0, .2),
 			0 1px 4px rgba(0, 0, 0, .2);
 	}
 	.Slider-knob {
@@ -52,9 +53,10 @@
 		background: #f5f5f5;
 		background-color: rgb(245, 245, 245);
 	}
-	.Slider-knob:hover,
-	.Slider-knob:focus,
-	:hover>.Toggle-knob {
+	:hover > * > * > .Slider-knob,
+	:focus > * > * > .Slider-knob,
+	:focus > .Toggle-knob,
+	:hover > .Toggle-knob {
 		box-shadow:
 			0 0 0 8px rgb(0, 0, 0, .2),
 			0 1px 4px rgba(0, 0, 0, .3);
@@ -64,6 +66,7 @@
 			0 0 0 12px rgb(0, 0, 0, .2),
 			0 1px 5px 5px rgba(0, 0, 0, .3);
 	}
+	/* value bubble */
 	.Slider-knob.is-active:before,
 	.Slider-knob.is-active:after {
 		position: absolute;
@@ -144,8 +147,8 @@
 %js
 	var on = El.on
 	, off = El.off
-	El.bindings.SliderInit = function(el) {
-		var knobLen, offset, px, drag, min, max, step, minPx, maxPx, value
+	El.$b.SliderInit = function(el) {
+		var attr, range, knobLen, offset, px, drag, min, max, step, minPx, maxPx, value
 		, vert = El.hasClass(el, "is-vertical")
 		, track = el.firstChild
 		, fill = track.firstChild
@@ -156,8 +159,8 @@
 		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
+			attr = vert ? "offsetHeight" : "offsetWidth"
+			range = (El.get(el, "range") || "").split(/[^+\-\d.]/) // min:max:step:margin
 			min = +(range[0] || 0)
 			max = +(range[1] || 100)
 			step = +(range[2] || 1)
@@ -227,21 +230,20 @@
 			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, {val:val}) : val)
+				var format = El.get(el, "format")
+				El.set(knob, "data-val", format ? _(format, {val:val}) : val)
 			}
 		}
 	}
-	El.bindings.SliderInit.once = 1
 
 %el Slider
-	button.Slider.reset ;SliderInit
+	button.Slider.reset ;SliderInit!
 		.Slider-track
 			.Slider-fill.abs.anim
 				.Slider-knob.anim[tabindex=0]
 
 /%el Slider2
-/	button.Slider.reset ;SliderInit
+/	button.Slider.reset ;SliderInit!
 /		.Slider-track
 /			.Slider-fill.abs.anim
 /				.Slider-knob.anim[tabindex=0]
@@ -249,7 +251,7 @@
 /				.Slider-knob.anim[tabindex=0]
 /
 /%el Slider3
-/	button.Slider.reset ;SliderInit
+/	button.Slider.reset ;SliderInit!
 /		.Slider-track
 /			.Slider-fill.abs.anim
 /				.Slider-knob.anim[tabindex=0]

package/el/crop.ui

@@ -0,0 +1,49 @@
+
+%css
+	.Crop {
+		position: relative;
+		width: 400px;
+		height: 300px;
+		overflow: hidden;
+	}
+	.Crop-img {
+		position: absolute;
+		pointer-events: none;
+	}
+	.Crop:after {
+		position: absolute;
+		content: "";
+		width: 150px;
+		height: 150px;
+		top: 75px;
+		left: 125px;
+		border: 2px solid #fff;
+		border-radius: 50%;
+		box-shadow: 0 0 2000px 2000px rgba(0, 0, 0, 0.5);
+		pointer-events: none;
+	}
+
+
+%el Crop
+	.Crop
+		@pan function(e){}
+		@pinch function(zoom){
+			var imgWidth = $el.offsetWidth
+			scale(0,0)
+			El.on($el, "wheel", scale)
+			return scale
+			function scale(e, delta) {
+				console.log("pinch", arguments)
+				zoom += delta / 5
+				if (zoom < .5) zoom = .5
+				else if (zoom > 50) zoom = 50
+				El.css($el.firstChild, "width", (imgWidth * zoom) + "px")
+			}
+		}(1)
+		img.Crop-img[src="img/pixabay.com-mountain-8330401_640.jpg"]
+
+%view test/crop public
+anim-page
+	h2 Crop image
+	Crop
+