@litejs/ui 24.0.0-rc.4 → 24.5.0

package/el/{confirm.tpl → dialog.ui}

@@ -1,12 +1,14 @@
 
 %css
-	.Confirm {
+	.Modal {
 		z-index: 9;
 	}
-	.Confirm-bg {
+	.Modal-bg {
+		position: absolute;
+		position: static;
 		background-color: rgba(0, 0, 0, .6);
 	}
-	.Confirm-content {
+	.Modal-content {
 		position: absolute;
 		left: 0;
 		right: 0;
@@ -16,10 +18,10 @@
 		background-color: #fff;
 		box-shadow: 0 2px 10px 2px rgba(255,255,255,.5);
 	}
-	.sm .Confirm-content {
+	.sm .Modal-content {
 		width: 94%;
 	}
-	.Confirm--blur {
+	.Modal--blur {
 		filter: blur(5px);
 		transform: scale(.85);
 		transform-origin: 50% 100vh;
@@ -57,7 +59,7 @@
 //     { "action": "no", "title": "No", "icon": "images/no.png" }
 //   ]
 %js
-	View.on("confirm", function(title, opts, next) {
+	$ui.on("modal", function(title, opts, next) {
 		El.blur()
 		if (!next && typeof opts === "function") {
 			next = opts
@@ -65,12 +67,11 @@
 		}
 		var sound, vibrate
 		, code = ""
-		, el = El("Confirm")
-		, scope = El.scope(el, El.data)
+		, el = El("Modal")
+		, scope = Object.assign(El.scope(el, el), opts)
 		, kbMap = {}
 		, body = document.body
-		, blurEl = body.lastChild
-		Object.assign(scope, opts)
+		, blurEl = $(scope.blur) || $ui.root.lastChild
 		scope.title = title || "Confirm?"
 		if (!scope.actions) scope.actions = [
 			{ action: "close", title: "Close", key: "esc" }
@@ -79,17 +80,17 @@
 			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.cls(blurEl, "Modal--blur")
+		El.cls(el.lastChild, "Modal--blur", false, 1)
 		El.append(body, el)
 		El.render(el, scope)
 		if (scope.code) {
-			El.$$(".js-numpad", el).on("click", numpad)
+			$$(".js-numpad", el).on("click", numpad)
 			kbMap.backspace = kbMap.del = kbMap.num = numpad
 		}
 		El.addKb(kbMap, el)
-		El.$$(".js-btn", el).on("click", resolve)
-		View.one("navigation", resolve)
+		$$(".js-btn", el).on("click", resolve)
+		$ui.one("show", resolve)
 		if (scope.bgClose) El.on(el, "click", resolve)
 		El.on(el, "wheel", Event.stop)
 		El.on(el.lastChild, "click", Event.stop)
@@ -106,48 +107,67 @@
 			var num = _num == void 0 ? e.target[El.T] : _num
 			code += num
 			if (num == "CLEAR" || num == "del" || num == "backspace") code = ""
-			El.md(El.$(".js-body", el), code.replace(/./g, "•") || opts.body)
+			El.md($(".js-body", el), 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")
+				var action = key || El.get(this, "data-action")
 				, result = {
 					code: code,
-					input: El.val(El.$(".js-input", el)),
-					inputMd: El.val(El.$(".js-inputMd", el)),
-					select: El.val(El.$(".js-select". el))
+					input: El.val($(".js-input", el)),
+					inputMd: El.val($(".js-inputMd", el)),
+					select: El.val($(".js-select", el))
 				}
 				El.kill(el, "transparent")
-				El.cls(blurEl, "Confirm--blur", el = 0)
+				El.cls(blurEl, "Modal--blur", el = false)
 				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)
+					else if (next[action]) $ui.emit(next[action], result)
 				}
 				if (vibrate) navigator.vibrate(0)
 				if (sound) sound.pause()
 			}
 		}
 		scope.resolve = resolve
-		View.emit("confirm:open", scope)
+		$ui.emit("modal:open", scope)
+	})
+
+%el Dialog-numpad
+.row.js-numpad
+	@click ".btn", function(){}
+	;each: num in [1,2,3,4,5,6,7,8,9,"CLEAR",0]
+	.col.w4>.btn {num}
+
+%js
+	$ui.on("showDialog", function(e, el, dialog) {
+		console.log("showDialog", El.scope(el), arguments)
+		El.kill(dialog)
 	})
 
-%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}
+%el Dialog
+.Dialog.grid.p2.anim Dialog
+	.col.ts3 ;txt!_(title, map)
+	.col.js-body ;md!_(body, map)
+	.col
+		.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
+
+%el Modal
+	.Modal.max.fix.anim
+		.Modal-bg.max.abs
+		.Modal-content.Modal--blur.grid.p2.anim
 			.row
 				;if: input
 				.col>input.field.js-input
 			.row
-				;if: data.inputMd!=null
+				;if: $d.inputMd!=null
 				.col
 					textarea.field.js-inputMd
 						@keyup [this.parentNode.nextSibling.nextSibling], "renderMd"
@@ -163,12 +183,4 @@
 						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()
-						;attr: "data-action", action.action
-						;class:: "is-" + action.action, action.action
 

package/el/{form1.tpl → form.ui}

@@ -3,12 +3,12 @@
 		border: 0;
 		padding: 0;
 	}
-	.Form1-del.right {
+	.Form-del.right {
 		display: block;
 		margin: -10px -10px 0 0;
 		opacity: .2;
 	}
-	.Form1-del {
+	.Form-del {
 		font-size: 20px;
 		font-weight: 700;
 		border: 1px solid transparent;
@@ -18,7 +18,7 @@
 		text-align: center;
 		border-radius: 4px;
 	}
-	.Form1-del:hover {
+	.Form-del:hover {
 		opacity: 1;
 		border: 1px solid #aaa;
 		background-image: linear-gradient(to bottom, #ddd, #888);
@@ -152,101 +152,101 @@
 	}
 
 
-%el form1-row
-	label.row
-		.col.md-w4.input__label
+%el Form-row
+label.row
+	.col.md-w4.input__label
+		= _(title||name)
+	.col.md-w8
+		%child
+		.input__hint
+			= _(description)
+			;if: description
+
+%el Form-subheader
+.col
+	= _(title)
+
+%el Form-fieldset
+fieldset.grid.b2
+	legend
+		= _(schema.title || _link.title || "")
+
+%el Form
+Form-row
+	input.field
+
+%el Form-ro
+Form-row>span ;txt: value
+
+%el Form-hidden
+div>input.field[type=hidden]
+
+%el Form-boolean
+Form-row
+	input.field[type=checkbox] ;value: value
+
+%el Form-boolean-ro
+Form-row>span
+	= _(!!value)
+
+%el Form-password
+Form-row
+	input.field[type=password]
+
+%el Form-new-password
+Form-row
+	input.field[type=password][autocomplete=new-password]
+
+%el Form-text
+Form-row
+	textarea.field
+
+%el Form-text-ro
+Form-ro
+
+%el Form-enum
+Form-row
+	select.field ;each:val in $d["enum"]
+		option
+			;val:: val
+			= _("" + val)
+
+%el Form-enum-ro
+Form-ro
+
+%el Form-list
+Form-row
+	select.field
+		;list: api(resourceCollection.format(params, $d)), required ? 0 : [""], value
+		option
+			;val:: item.id
+			;txt:: _(item.name)
+
+%el Form-list-ro
+Form-row>span
+	= _(item.name)
+
+%el Form-array
+.col
+	.input.p13.cf
+		.left
 			= _(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
-			;attr:: "data-tooltip", _("Delete")
-			@click: data.del
-		b
-			;if: title
-			;txt: title
-		.grid.b2.js-item
+		.input__hint
+			= _(description)
+		.js-items.cf
+		a.btn.right
+			;if: !$d.noAdd
+			;txt: _($d.name + ".Add")
+			@click: $d.add
+
+%el Form-array-item
+.input.p3.m2b.cf.js-del
+	a.right.Form-del.hand ×
+		;if !$d.noAdd
+		;set "data-tooltip", _("Delete")
+		@click $d.del
+	b
+		;if: title
+		;txt: title
+	.grid.b2.js-item
 

package/el/material.tpl

@@ -194,7 +194,7 @@
 	}
 
 %js
-	!function(View) {
+	!function($ui) {
 		var menuTarget, menuEl, tipTarget, tipEl, tick, wait
 		, ripple = El(".waves-ripple")
 		El.near = near
@@ -244,11 +244,11 @@
 		}
 		El.on(document.body, "mouseover", onOver)
 		El.on(window, "focusin", onOver)
-		View.on("show", closeTooltip)
+		$ui.on("show", closeTooltip)
 		function onOver(e) {
 			var x, y, pos
 			, target = e.target
-			, text = El.attr(target, "data-tooltip")
+			, text = El.get(target, "data-tooltip")
 			, relTarg = e.relatedTarget || e.fromElement
 			// without relTarg is event on click
 			if (!relTarg && e.type !== "focusin" || target === tipTarget) return
@@ -260,19 +260,19 @@
 			closeTooltip()
 			if (!text) return
 			tipEl = openVisible("pre.tooltip", tipTarget = target)
-			pos = El.attr(target, "data-tooltip-pos") || "top"
+			pos = El.get(target, "data-tooltip-pos") || "top"
 			El.txt(tipEl, text)
 			if (pos === "left" || pos === "right") {
 				x = pos
 			} else {
 				y = pos
 			}
-			El.attr(tipEl, "data-pos", pos)
+			El.set(tipEl, "data-pos", pos)
 			near(tipEl, target, x, y, 6)
 		}
 		function openVisible(tag, target) {
 			var el = typeof tag == "string" ? El(tag) : tag
-			, scope = El.scope(el, El.scope(target))
+			, scope = El.scope(el, target)
 			scope.openTarget = target
 			El.render(el)
 			El.append(document.body, el)
@@ -298,9 +298,9 @@
 				El.cls(menuTarget, "is-active", menuEl = menuTarget = null)
 			}
 		}
-		View.on("ping", closeMenu)
-		View.on("closeMenu", closeMenu)
-		View.on("showMenu", function(e, target, menu, x, y, margin) {
+		$ui.on("ping", closeMenu)
+		$ui.on("closeMenu", closeMenu)
+		$ui.on("showMenu", function(e, target, menu, x, y, margin) {
 			Event.stop(e)
 			var close = menuEl && menuTarget == target
 			closeMenu()
@@ -313,7 +313,7 @@
 				})
 			} else {
 				El.cls(menuTarget = target, "is-active")
-				near(menuEl, target, x, y, 4)
+				near(menuEl, target, x, y, margin)
 			}
 			if (menuEl.style.transform !== void 0) {
 				El.cls(menuEl, "no-events")
@@ -355,7 +355,7 @@
 				El.cls(ripple, "waves-ripple--play", 0)
 			}
 		}
-	}(View)
+	}($ui)
 
 
 %el Checkbox