@litejs/ui 24.11.0 → 25.5.0

package/bin/extract-lang.js

@@ -0,0 +1,56 @@
+#!/usr/bin/env node
+//-
+//-  Usage
+//-    lj-extract-lang [FILE..]
+//-
+//-  Options
+//-    --pretty, -p    Pretty print json output
+//-
+//-  Examples
+//-    lj-extract-translations translations.json
+//-
+
+var fs = require("fs")
+, path = require("path")
+, opts = require("@litejs/cli/opts.js").opts({
+	pretty: false,
+	version: false
+})
+, extractLang = require("../extract-lang.js").extractLang
+, package = require("../package.json")
+
+
+if (opts._unknown[0]) {
+	console.error("\nError: Unknown option: " + opts._unknown)
+	usage(true)
+	process.exit(1)
+} else if (opts._[0]) {
+	readJson(opts._[0])
+} else {
+	usage()
+}
+
+function usage(err) {
+	if (!err && opts.version) console.log("%s v%s", package.name, package.version)
+	var helpFile = module.filename
+	console.log(fs.readFileSync(helpFile, "utf8").match(/^\/\/-.*/gm).join("\n").replace(/^.../gm, ""))
+}
+
+function readJson(file) {
+	var lang
+	, all = require(path.resolve(file))
+	, i = 0
+	, locales = Object.keys(all.locales)
+
+	console.log("Extract translations: " + locales)
+
+	for (; lang = locales[i++]; ) {
+		writeJson(lang + ".json", extractLang(all, lang))
+	}
+}
+
+function writeJson(file, data) {
+	fs.writeFileSync(path.resolve(file), JSON.stringify(data, null, opts.pretty ? 2 : null) + "\n", "utf8")
+}
+
+

package/css/anim.css

@@ -0,0 +1,20 @@
+
+/**
+ *  1. Trigger GPU acceleration.
+ *     Remove first flicker on iphone.
+ */
+
+.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-transform: translate3d(0, 0, 0);     /* 1 */
+	        transform: translate3d(0, 0, 0);
+	-webkit-perspective: 1000;
+	        perspective: 1000;
+}
+

package/css/base.css

@@ -191,25 +191,6 @@ button,
 	white-space: nowrap;
 }
 
-/**
- *  1. Trigger GPU acceleration.
- *     Remove first flicker on iphone.
- */
-
-.anim,
-.anim:after,
-.anim:before {
-	-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);
-	-webkit-perspective: 1000;
-	        perspective: 1000;
-}
-
 .sm .sm-left,
 .md .md-left,
 .lg .lg-left,

package/css/grid-1of.css

@@ -23,3 +23,69 @@
 .h4of5, .md .md-h4of5, .lg .md-h4of5, .lg .lg-h4of5 { height: 80%; }
 /**/
 
+
+.w1-10 { width: 10%; }
+.w1-9 { width: 11.11%; }
+.w1-8 { width: 12.5%; }
+.w1-7 { width: 14.29%; }
+.w1-6 { width: 16.67%; }
+.w1-5 { width: 20%; }
+.w2-9 { width: 22.22%; }
+.w1-4 { width: 25%; }
+.w2-7 { width: 28.57%; }
+.w1-3 { width: 33.33%; }
+.w3-8 { width: 37.5%; }
+.w2-5 { width: 40%; }
+.w3-7 { width: 42.86%; }
+.w4-9 { width: 44.44%; }
+.w1-2 { width: 50%; }
+.w5-9 { width: 55.56%; }
+.w3-5 { width: 60%; }
+.w5-8 { width: 62.5%; }
+.w2-3 { width: 66.67%; }
+.w3-4 { width: 75%; }
+.w7-9 { width: 77.78%; }
+.w4-5 { width: 80%; }
+.w5-6 { width: 83.33%; }
+.w6-7 { width: 85.71%; }
+.w7-8 { width: 87.5%; }
+.w8-9 { width: 88.89%; }
+.w9-10 { width: 90%; }
+.w1-1 { width: 100%; }
+
+
+/*
+.w90, .md .md-w90, .lg .md-w90, .lg.lg .lg-w90 { width: 90%; }
+.w80, .md .md-w80, .lg .md-w80, .lg.lg .lg-w80 { width: 80%; }
+.w70, .md .md-w70, .lg .md-w70, .lg.lg .lg-w70 { width: 70%; }
+.w60, .md .md-w60, .lg .md-w60, .lg.lg .lg-w60 { width: 60%; }
+.w40, .md .md-w40, .lg .md-w40, .lg.lg .lg-w40 { width: 40%; }
+.w30, .md .md-w30, .lg .md-w30, .lg.lg .lg-w30 { width: 40%; }
+.w20, .md .md-w20, .lg .md-w20, .lg.lg .lg-w20 { width: 20%; }
+.w10, .md .md-w10, .lg .md-w10, .lg.lg .lg-w10 { width: 10%; }
+
+.h80, .md .md-h80, .lg .md-h80, .lg.lg .lg-h80 { height: 80%; }
+.h60, .md .md-h60, .lg .md-h60, .lg.lg .lg-h60 { height: 60%; }
+.h40, .md .md-h40, .lg .md-h40, .lg.lg .lg-h40 { height: 40%; }
+.h20, .md .md-h20, .lg .md-h20, .lg.lg .lg-h20 { height: 20%; }
+
+.l80, .md .md-l80, .lg .md-l80, .lg.lg .lg-l80 { left: 80%; }
+.l60, .md .md-l60, .lg .md-l60, .lg.lg .lg-l60 { left: 60%; }
+.l40, .md .md-l40, .lg .md-l40, .lg.lg .lg-l40 { left: 40%; }
+.l20, .md .md-l20, .lg .md-l20, .lg.lg .lg-l20 { left: 20%; }
+
+.col:first-child:nth-last-child(2), .col:first-child:nth-last-child(2) ~ .col {
+	width: 50%;
+}
+.col:first-child:nth-last-child(3), .col:first-child:nth-last-child(3) ~ .col {
+	width: 33.333%;
+}
+.col:first-child:nth-last-child(4), .col:first-child:nth-last-child(4) ~ .col {
+	width: 25%;
+}
+.col:first-child:nth-last-child(5), .col:first-child:nth-last-child(5) ~ .col {
+	width: 20%;
+}
+*/
+
+

package/css/grid.css

@@ -27,59 +27,43 @@ Expects box-sizing: border-box;
 }
 
 .col,
-.w12, .md .md-w12, .lg .md-w12, .lg .lg-w12 { width: 100%; }
-.w11, .md .md-w11, .lg .md-w11, .lg .lg-w11 { width: 91.6667%; }
-.w10, .md .md-w10, .lg .md-w10, .lg .lg-w10 { width: 83.3333%; }
-.w9 , .md .md-w9 , .lg .md-w9 , .lg .lg-w9  { width: 75%; }
-.w8 , .md .md-w8 , .lg .md-w8 , .lg .lg-w8  { width: 66.6667%; }
-.w7 , .md .md-w7 , .lg .md-w7 , .lg .lg-w7  { width: 58.3333%; }
-.w6 , .md .md-w6 , .lg .md-w6 , .lg .lg-w6  { width: 50%; }
-.w5 , .md .md-w5 , .lg .md-w5 , .lg .lg-w5  { width: 41.6667%; }
-.w4 , .md .md-w4 , .lg .md-w4 , .lg .lg-w4  { width: 33.3333%; }
-.w3 , .md .md-w3 , .lg .md-w3 , .lg .lg-w3  { width: 25%; }
-.w2 , .md .md-w2 , .lg .md-w2 , .lg .lg-w2  { width: 16.6667%; }
-.w1 , .md .md-w1 , .lg .md-w1 , .lg .lg-w1  { width: 8.3333%; }
+.w12, .md .md-w12, .lg .md-w12, .lg.lg .lg-w12 { width: 100%; }
+.w11, .md .md-w11, .lg .md-w11, .lg.lg .lg-w11 { width: 91.667%; }
+.w10, .md .md-w10, .lg .md-w10, .lg.lg .lg-w10 { width: 83.333%; }
+.w9 , .md .md-w9 , .lg .md-w9 , .lg.lg .lg-w9  { width: 75%; }
+.w8 , .md .md-w8 , .lg .md-w8 , .lg.lg .lg-w8  { width: 66.667%; }
+.w7 , .md .md-w7 , .lg .md-w7 , .lg.lg .lg-w7  { width: 58.333%; }
+.w6 , .md .md-w6 , .lg .md-w6 , .lg.lg .lg-w6  { width: 50%; }
+.w5 , .md .md-w5 , .lg .md-w5 , .lg.lg .lg-w5  { width: 41.667%; }
+.w4 , .md .md-w4 , .lg .md-w4 , .lg.lg .lg-w4  { width: 33.333%; }
+.w3 , .md .md-w3 , .lg .md-w3 , .lg.lg .lg-w3  { width: 25%; }
+.w2 , .md .md-w2 , .lg .md-w2 , .lg.lg .lg-w2  { width: 16.667%; }
+.w1 , .md .md-w1 , .lg .md-w1 , .lg.lg .lg-w1  { width: 8.333%; }
 
-.h12, .md .md-h12, .lg .md-h12, .lg .lg-h12 { height: 100%; }
-.h11, .md .md-h11, .lg .md-h11, .lg .lg-h11 { height: 91.6667%; }
-.h10, .md .md-h10, .lg .md-h10, .lg .lg-h10 { height: 83.3333%; }
-.h9 , .md .md-h9 , .lg .md-h9 , .lg .lg-h9  { height: 75%; }
-.h8 , .md .md-h8 , .lg .md-h8 , .lg .lg-h8  { height: 66.6667%; }
-.h7 , .md .md-h7 , .lg .md-h7 , .lg .lg-h7  { height: 58.3333%; }
-.h6 , .md .md-h6 , .lg .md-h6 , .lg .lg-h6  { height: 50%; }
-.h5 , .md .md-h5 , .lg .md-h5 , .lg .lg-h5  { height: 41.6667%; }
-.h4 , .md .md-h4 , .lg .md-h4 , .lg .lg-h4  { height: 33.3333%; }
-.h3 , .md .md-h3 , .lg .md-h3 , .lg .lg-h3  { height: 25%; }
-.h2 , .md .md-h2 , .lg .md-h2 , .lg .lg-h2  { height: 16.6667%; }
-.h1 , .md .md-h1 , .lg .md-h1 , .lg .lg-h1  { height: 8.3333%; }
+.h12, .md .md-h12, .lg .md-h12, .lg.lg .lg-h12 { height: 100%; }
+.h11, .md .md-h11, .lg .md-h11, .lg.lg .lg-h11 { height: 91.667%; }
+.h10, .md .md-h10, .lg .md-h10, .lg.lg .lg-h10 { height: 83.333%; }
+.h9 , .md .md-h9 , .lg .md-h9 , .lg.lg .lg-h9  { height: 75%; }
+.h8 , .md .md-h8 , .lg .md-h8 , .lg.lg .lg-h8  { height: 66.667%; }
+.h7 , .md .md-h7 , .lg .md-h7 , .lg.lg .lg-h7  { height: 58.333%; }
+.h6 , .md .md-h6 , .lg .md-h6 , .lg.lg .lg-h6  { height: 50%; }
+.h5 , .md .md-h5 , .lg .md-h5 , .lg.lg .lg-h5  { height: 41.667%; }
+.h4 , .md .md-h4 , .lg .md-h4 , .lg.lg .lg-h4  { height: 33.333%; }
+.h3 , .md .md-h3 , .lg .md-h3 , .lg.lg .lg-h3  { height: 25%; }
+.h2 , .md .md-h2 , .lg .md-h2 , .lg.lg .lg-h2  { height: 16.667%; }
+.h1 , .md .md-h1 , .lg .md-h1 , .lg.lg .lg-h1  { height: 8.333%; }
 
-
-.l12, .md .md-l12, .lg .md-l12, .lg .lg-l12 { left: 100%; }
-.l11, .md .md-l11, .lg .md-l11, .lg .lg-l11 { left: 91.6667%; }
-.l10, .md .md-l10, .lg .md-l10, .lg .lg-l10 { left: 83.3333%; }
-.l9,  .md .md-l9,  .lg .md-l9,  .lg .lg-l9  { left: 75%; }
-.l8,  .md .md-l8,  .lg .md-l8,  .lg .lg-l8  { left: 66.6667%; }
-.l7,  .md .md-l7,  .lg .md-l7,  .lg .lg-l7  { left: 58.3333%; }
-.l6,  .md .md-l6,  .lg .md-l6,  .lg .lg-l6  { left: 50%; }
-.l5,  .md .md-l5,  .lg .md-l5,  .lg .lg-l5  { left: 41.6667%; }
-.l4,  .md .md-l4,  .lg .md-l4,  .lg .lg-l4  { left: 33.3333%; }
-.l3,  .md .md-l3,  .lg .md-l3,  .lg .lg-l3  { left: 25%; }
-.l2,  .md .md-l2,  .lg .md-l2,  .lg .lg-l2  { left: 16.6667%; }
-.l1,  .md .md-l1,  .lg .md-l1,  .lg .lg-l1  { left: 8.3333%; }
-
-/*
-.col:first-child:nth-last-child(2), .col:first-child:nth-last-child(2) ~ .col {
-	width: 50%;
-}
-.col:first-child:nth-last-child(3), .col:first-child:nth-last-child(3) ~ .col {
-	width: 33.333%;
-}
-.col:first-child:nth-last-child(4), .col:first-child:nth-last-child(4) ~ .col {
-	width: 25%;
-}
-.col:first-child:nth-last-child(5), .col:first-child:nth-last-child(5) ~ .col {
-	width: 20%;
-}
-*/
+.l12, .md .md-l12, .lg .md-l12, .lg.lg .lg-l12 { left: 100%; }
+.l11, .md .md-l11, .lg .md-l11, .lg.lg .lg-l11 { left: 91.667%; }
+.l10, .md .md-l10, .lg .md-l10, .lg.lg .lg-l10 { left: 83.333%; }
+.l9,  .md .md-l9,  .lg .md-l9,  .lg.lg .lg-l9  { left: 75%; }
+.l8,  .md .md-l8,  .lg .md-l8,  .lg.lg .lg-l8  { left: 66.667%; }
+.l7,  .md .md-l7,  .lg .md-l7,  .lg.lg .lg-l7  { left: 58.333%; }
+.l6,  .md .md-l6,  .lg .md-l6,  .lg.lg .lg-l6  { left: 50%; }
+.l5,  .md .md-l5,  .lg .md-l5,  .lg.lg .lg-l5  { left: 41.667%; }
+.l4,  .md .md-l4,  .lg .md-l4,  .lg.lg .lg-l4  { left: 33.333%; }
+.l3,  .md .md-l3,  .lg .md-l3,  .lg.lg .lg-l3  { left: 25%; }
+.l2,  .md .md-l2,  .lg .md-l2,  .lg.lg .lg-l2  { left: 16.667%; }
+.l1,  .md .md-l1,  .lg .md-l1,  .lg.lg .lg-l1  { left: 8.333%; }
 
 

package/el/Slider.ui

@@ -0,0 +1,229 @@
+
+%css
+	.Slider,
+	.Toggle {
+		background: none;
+		height: 32px;
+		position: relative;
+		touch-action: none;
+		width: 200px;
+		color: #000;
+		font-size: 14px;
+		line-height: 32px;
+	}
+	.Slider-fill,
+	.Slider:before,
+	.Toggle:before {
+		background: rgba(0, 0, 0, .5);
+		border-radius: 2px;
+		height: 4px;
+		position: absolute;
+		top: 14px;
+		transition: inherit;
+	}
+	.Slider:before,
+	.Toggle:before {
+		background: #ccc;
+		content: "";
+		display: block;
+		width: 100%;
+	}
+	.Slider-knob,
+	.Toggle-knob {
+		border-radius: 50%;
+		box-shadow: 0 0 0 0 rgb(0, 0, 0, .2), 0 1px 4px rgba(0, 0, 0, .2);
+		height: 20px;
+		position: relative; /* for IE6 overflow:visible bug */
+		transition: inherit;
+		width: 20px;
+	}
+	.Slider-knob {
+		float: right;
+		margin: -8px -10px 0 0;
+		outline: none;
+		background: #f5f5f5;
+	}
+	:hover > * > .Slider-knob,
+	:focus > * > .Slider-knob {
+		box-shadow: 0 0 0 8px rgb(0, 0, 0, .2), 0 1px 4px rgba(0, 0, 0, .3);
+	}
+	.Slider-knob.is-active {
+		box-shadow: 0 0 0 12px rgb(0, 0, 0, .2), 0 1px 5px 5px rgba(0, 0, 0, .3);
+	}
+	/* value bubble */
+	.Slider-knob:before,
+	.Slider-knob:after {
+		background: inherit;
+		border-radius: 16px;
+		content: "";
+		height: 32px;
+		left: -6px;
+		min-width: 32px;
+		opacity: 0;
+		pointer-events: none;
+		position: absolute;
+		top: 0px;
+		transform: rotate(45deg);
+		transition: inherit;
+	}
+	.Slider-knob:after {
+		content: attr(data-val);
+		left: 10px;
+		padding: 0 4px;
+		transform: translate(-50%, 0);
+	}
+	:focus > * > .Slider-knob:before,
+	:hover > * > .Slider-knob:before,
+	.Slider-knob.is-active:before {
+		border-radius: 50% 50% 0 50%;
+		box-shadow: 3px 3px 3px 1px rgba(0, 0, 0, .3);
+		opacity: 1;
+		top: -43px;
+	}
+	:focus > * > .Slider-knob:after,
+	:hover > * > .Slider-knob:after,
+	.Slider-knob.is-active:after {
+		box-shadow: -4px -3px 3px -2px rgba(0, 0, 0, .15), 4px -3px 3px -2px rgba(0, 0, 0, .15);
+		opacity: 1;
+		top: -43px;
+	}
+	input:checked + .Toggle-knob {
+		background-color: #00a651;
+		left: 16px;
+	}
+	.Slider.color .Slider-fill {
+		background: red;
+	}
+	.Slider.color .Slider-fill+.Slider-fill {
+		background: green;
+	}
+	.Slider.color .Slider-fill+.Slider-fill+.Slider-fill {
+		background: blue;
+	}
+	.Slider.no-first > .Slider-fill:last-child {
+		background: #ccc;
+	}
+
+%js
+	var elOn = El.on
+	, elOff = El.off
+	, elCls = El.cls
+	, elGet = El.get
+	El.$b.SliderInit = function(el, range) {
+		range = (range || elGet(el, "range") || "").split(/[^+\-\d.]/) // min:max:step:margin
+		var knobLen, offset, px, drag, min, max, minPx, maxPx, value
+		//, vert = El.hasClass(el, "is-vertical")
+		, vert = false
+		, attr = vert ? "offsetHeight" : "offsetWidth"
+		, fill = el.firstChild
+		, knob = fill.lastChild
+		, emit = El.rate(El.emit.bind(el, el, "change"), 500)
+		elOn(window, "blur", stop)
+		setTimeout(el.val = set, 10, value||0)
+		function load() {
+			min = +(range[0] || 0)
+			max = +(range[1] || 100)
+			knobLen = knob[attr]>>1
+			minPx = 0
+			maxPx = el[attr] - knobLen - knobLen
+			px = maxPx / (max - min)
+		}
+		elOn(el, "pointerdown", function(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 (el.childNodes.length > 1) {
+				var next
+				, x = maxPx
+				, diff = vert ? offset - e.pageY : e.pageX - offset
+				for (tmp = fill = el.firstChild; tmp; tmp = tmp.nextSibling) {
+					next = diff - tmp[attr] + knobLen
+					if (next < 0 ? -next <= x : next < x) {
+						fill = tmp
+						knob = tmp.firstChild
+						x = next < 0 ? -next : next
+					}
+				}
+				if (fill.previousSibling) {
+					maxPx = fill.previousSibling[attr] - knobLen
+					if (range[3]) maxPx -= px * range[3]
+				}
+				if (fill.nextSibling) {
+					minPx = fill.nextSibling[attr] - knobLen
+					if (range[3]) minPx += px * range[3]
+				}
+			}
+			move(e)
+			listen(elOn)
+		})
+		function move(e) {
+			var diff = vert ? offset - e.pageY : e.pageX - offset
+			diff = (diff > maxPx ? maxPx : (diff < minPx ? minPx : diff))
+			set((diff / px) + min, e, diff)
+			return El.stop(e)
+		}
+		function stop(e) {
+			if (drag) {
+				drag = false
+				listen(elOff)
+				set(value)
+			}
+		}
+		function listen(onOff) {
+			elCls(el, "anim", !drag)
+			elCls(knob, "is-active", drag)
+			onOff(document, "pointerup", stop)
+			onOff(document, "pointermove", move)
+		}
+		function set(val, e, pos) {
+			load()
+			val = El.step(val < min ? min : val > max ? max : val || 0, +(range[2] || 1))
+			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 = elGet(el, "format")
+				El.set(knob, "data-val", format ? $d._(format, {val:val}) : val)
+			}
+		}
+	}
+
+%el Slider
+button.Slider.anim.reset ;SliderInit!
+	.Slider-fill
+		.Slider-knob[tabindex=0]
+
+%el Slider2
+button.Slider.anim.reset ;SliderInit!
+	.Slider-fill
+		.Slider-knob[tabindex=0]
+	.Slider-fill
+		.Slider-knob[tabindex=0]
+
+%el Slider3
+button.Slider.reset ;SliderInit!
+	.Slider-fill
+		.Slider-knob[tabindex=0]
+	.Slider-fill
+		.Slider-knob[tabindex=0]
+	.Slider-fill
+		.Slider-knob[tabindex=0]
+
+%el Toggle
+button.Toggle.reset ;SliderInit! "0:1"
+	;css: "width","36px"
+	.Slider-fill.anim
+		.Slider-knob.anim[tabindex=0]
+
+%el Togglea
+label.Toggle.reset[tabindex=0]
+	input[type=checkbox].hide
+		;readonly! row && !row.write
+		;checked! model && (row && row.opts ? row.opts === model.get(row.path) : !!model.get(row.path))
+	.Toggle-knob.anim
+

package/el/dialog.ui

@@ -138,7 +138,7 @@
 %el Dialog-numpad
 .row.js-numpad
 	@click ".btn", function(){}
-	;each: num in [1,2,3,4,5,6,7,8,9,"CLEAR",0]
+	;each! "num",[1,2,3,4,5,6,7,8,9,"CLEAR",0]
 	.col.w4>.btn {num}
 
 %js
@@ -149,21 +149,21 @@
 
 %el Dialog
 .Dialog.grid.p2.anim
-	.col.ts3 ;txt!_(title, map)
-	.col.js-body ;md!_(body, map)
+	.col.ts3 ;txt! _(title, map)
+	.col.js-body ;md! _(body, map)
 	.col
-		.group ;each: action in actions
+		.group ;each! action in actions
 			.btn.js-btn
-				;txt!_(action.title)
-				;class!"w" + (12/actions.length)
-				;nop: this.focus()
-				;set: "data-action", action.action
-				;class!"is-" + action.action, action.action
+				;txt! _(action.title)
+				;class! "w" + (12/actions.length)
+				;nop! this.focus()
+				;set! "data-action", action.action
+				;class! "is-" + action.action, action.action
 
 %el Modal
 .Modal.max.fix.anim
 	.Modal-bg.max.abs
 	.Modal-content.Modal--blur.grid.p2.anim
-		;cls!"Modal--blur",!1,1
+		;cls! "Modal--blur",!1,1
 		%slot
 

package/el/form.ui

@@ -160,7 +160,7 @@ label.row
 		%child
 		.input__hint
 			= _(description)
-			;if: description
+			;if! description
 
 %el Form-subheader
 .col
@@ -176,14 +176,14 @@ Form-row
 	input.field
 
 %el Form-ro
-Form-row>span ;txt: value
+Form-row>span ;txt! value
 
 %el Form-hidden
 div>input.field[type=hidden]
 
 %el Form-boolean
 Form-row
-	input.field[type=checkbox] ;value: value
+	input.field[type=checkbox] ;value! value
 
 %el Form-boolean-ro
 Form-row>span
@@ -206,9 +206,9 @@ Form-ro
 
 %el Form-enum
 Form-row
-	select.field ;each:val in $d["enum"]
+	select.field ;each! "val", $d["enum"]
 		option
-			;val:: val
+			;val! val
 			= _("" + val)
 
 %el Form-enum-ro
@@ -217,10 +217,10 @@ Form-ro
 %el Form-list
 Form-row
 	select.field
-		;list: api(resourceCollection.format(params, $d)), required ? 0 : [""], value
+		;list api(resourceCollection.format(params, $d)), required ? 0 : [""], value
 		option
-			;val:: item.id
-			;txt:: _(item.name)
+			;val! item.id
+			;txt! _(item.name)
 
 %el Form-list-ro
 Form-row>span
@@ -235,8 +235,8 @@ Form-row>span
 			= _(description)
 		.js-items.cf
 		a.btn.right
-			;if: !$d.noAdd
-			;txt: _($d.name + ".Add")
+			;if! !$d.noAdd
+			;txt! _($d.name + ".Add")
 			@click: $d.add
 
 %el Form-array-item
@@ -246,7 +246,7 @@ Form-row>span
 		;set "data-tooltip", _("Delete")
 		@click $d.del
 	b
-		;if: title
-		;txt: title
+		;if! title
+		;txt! title
 	.grid.b2.js-item
 

package/extract-lang.js

@@ -0,0 +1,33 @@
+
+!function(exports) {
+	exports.extractLang = extractLang
+
+	function extractLang(translations, lang) {
+		var missing = []
+		, out = extract(translations, "")
+		if (missing[0]) {
+			console.error("WARNING! Missing '%s' translations: %s [%s]", lang, missing.length, missing+"")
+		}
+		return out
+
+		function extract(map, path) {
+			var key
+			, out = {}
+			, translations = map.translations
+			if (!translations) return map[lang]
+			for (key in translations) {
+				out[key] = extract(translations[key], path + key + ".")
+				if (
+					out[key] === key ||
+					out[key] === void 0 && missing.push(path + key) ||
+					isObject(out[key]) && Object.keys(out[key]).length < 1
+				) delete out[key]
+			}
+			return out
+		}
+		function isObject(obj) {
+			return obj && obj.constructor === Object
+		}
+	}
+}(this) // jshint ignore:line
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@litejs/ui",
-  "version": "24.11.0",
+  "version": "25.5.0",
   "description": "UI engine for LiteJS full-stack framework",
   "license": "MIT",
   "author": "Lauri Rooden <lauri@rooden.ee>",
@@ -12,21 +12,21 @@
   ],
   "homepage": "https://litejs.com",
   "repository": "github:litejs/ui",
-  "bugs": "https://github.com/litejs/dev/issues",
   "main": "ui.js",
   "files": [
     "*.js",
+    "bin",
     "binding",
     "css",
-    "el",
-    "shim"
+    "el"
   ],
+  "bin": {
+    "lj-extract-lang": "./bin/extract-lang.js"
+  },
   "scripts": {
-    "lint": "jshint --config=.github/jshint.json *.js",
-    "test": "lj test test/index.js --tz='Europe/Tallinn' --brief --sources=load.js,require.js,index.js"
+    "test": "lj t"
   },
   "devDependencies": {
-    "@litejs/cli": "24.10.0",
-    "@litejs/dom": "24.8.0"
+    "@litejs/cli": "25.5.0"
   }
 }