@pageboard/html 0.12.13 → 0.12.14

package/elements/embed.js

@@ -40,8 +40,8 @@ exports.embed = {
 		};
 	},
 	tag: 'iframe,element-embed',
-	html: `<element-embed data-src="[url]" data-query="[query|as:query]" id="[id]">
-		<a aria-hidden="true" class="linkable" href="[$loc.pathname][$loc.search][id|pre:%23]">[linkable|prune:*]#</a>
+	html: `<element-embed data-src="[url|url:query:query]" id="[id]">
+		<a aria-hidden="true" class="linkable" href="[$loc|as:url|set:hash:[id]]">[linkable|prune:*]#</a>
 		<iframe loading="lazy" allowfullscreen frameborder="0" scrolling="no"></iframe>
 	</element-embed>`,
 	scripts: [

package/elements/form.js

@@ -47,7 +47,7 @@ exports.query_form = {
 	contents: 'block+',
 	tag: 'form[method="get"]',
 	html: `<form is="element-form" method="get" name="[name]"
-		action="[redirection|urltpl:url:parameters]"
+		action="[redirection.url][redirection.parameters|as:query]"
 		autocomplete="off" class="ui form"></form>`,
 	stylesheets: [
 		'../lib/components/form.css',

package/elements/inputs.js

@@ -346,18 +346,13 @@ exports.input_radio = {
 			format: "singleline",
 			$helper: 'element-property'
 		},
-		checked: {
-			title: "Checked",
-			type: "boolean",
-			default: false
-		},
 		value: {
 			title: "Value",
 			type: "string",
 			format: "singleline"
 		},
-		disabled: {
-			title: "Disabled",
+		checked: {
+			title: "Checked",
 			type: "boolean",
 			default: false
 		},
@@ -365,14 +360,25 @@ exports.input_radio = {
 			title: 'Required',
 			type: 'boolean',
 			default: false
+		},
+		disabled: {
+			title: "Disabled",
+			type: "boolean",
+			default: false
+		},
+		button: {
+			title: 'Button',
+			description:'hide radio toggle opacity',
+			type: "boolean",
+			default: false
 		}
 	},
 	contents: {
 		id: 'label',
 		nodes: 'inline*'
 	},
-	html: `<div class="field">
-		<div class="ui radio checkbox">
+	html: `<div class="field [button]">
+		<div class="ui radio [button|alt::checkbox]">
 			<input type="radio" disabled="[disabled]" required="[required]"
 				name="[name]" value="[value|or:]" checked="[checked]"
 				id="for-[name][value|pre:-]" />
@@ -380,7 +386,8 @@ exports.input_radio = {
 		</div>
 	</div>`,
 	stylesheets: [
-		'../lib/components/checkbox.css'
+		'../lib/components/checkbox.css',
+		'../ui/input_radio.css'
 	]
 };
 

package/elements/layout.js

@@ -58,6 +58,19 @@ exports.layout = {
 				title: "Row"
 			}]
 		},
+		wrap: {
+			title: 'Wrap',
+			anyOf: [{
+				type: 'null',
+				title: 'No wrap'
+			}, {
+				const: 'wrap',
+				title: 'Wrap'
+			}, {
+				const: 'wrap-reverse',
+				title: 'Reverse'
+			}]
+		},
 		width: {
 			title: 'Width',
 			anyOf: [{
@@ -293,6 +306,7 @@ exports.layout = {
 		[width|switch:full:fullwidth:contained:ui container]
 		[horizontal]
 		[vertical]
+		[wrap]
 		[direction]
 		[background.invert|alt:inverted]"
 		is="element-layout"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pageboard/html",
-  "version": "0.12.13",
+  "version": "0.12.14",
   "description": "",
   "main": "index.js",
   "repository": {

package/ui/embed.js

@@ -1,7 +1,6 @@
 class HTMLElementEmbed extends Page.Element {
 	static defaults = {
 		src: null,
-		query: null,
 		hash: null
 	};
 	static revealRatio = 0.2;

package/ui/input_radio.css

@@ -0,0 +1,15 @@
+.field.button > .radio > input {
+	display:none;
+}
+.field.button > .radio > input + label {
+	opacity:0.7;
+	padding: 0.5em;
+	display: block;
+	position: relative;
+}
+.field.button > .radio > input + label:hover {
+	opacity:1;
+}
+.field.button > .radio > input:checked + label {
+	opacity:1;
+}

package/ui/layout.css

@@ -1,7 +1,16 @@
-.layout,
-.ui.container.layout {
+.layout {
+	display:flex;
 	flex: 0 0 auto;
+}
+.ui.container.layout {
 	display:flex;
+	flex: 1 0 auto;
+}
+.layout.wrap {
+	flex-wrap:wrap;
+}
+.layout.wrap-reverse {
+	flex-wrap:wrap-reverse;
 }
 .layout.column {
 	flex-direction: column;