@pageboard/html 0.14.9 → 0.14.10

package/elements/fieldsets.js

@@ -48,11 +48,23 @@ exports.fieldset_list = {
 	context: 'form//',
 	priority: 0,
 	properties: {
-		size: {
-			title: 'Minimum size',
+		min: {
+			title: 'Min items',
 			type: "integer",
 			minimum: 0,
 			default: 1
+		},
+		max: {
+			title: 'Max items',
+			type: "integer",
+			minimum: 1,
+			default: 100
+		},
+		at: {
+			title: 'Repeat selector',
+			description: 'css selector',
+			type: "string",
+			format: 'singleline'
 		}
 	},
 	contents: [{
@@ -60,7 +72,7 @@ exports.fieldset_list = {
 		nodes: 'block+',
 		expressions: true
 	}],
-	html: `<element-fieldset-list data-size="[size]">
+	html: `<element-fieldset-list data-max="[max]" data-min="[min]" data-at="[at]">
 		<template block-content="template"></template>
 		<div class="view"></div>
 	</element-fieldset-list>`,
@@ -97,13 +109,37 @@ exports.fieldlist_button = {
 			title: 'Full width',
 			type: 'boolean',
 			default: false
+		},
+		icon: {
+			title: 'Icon',
+			type: 'boolean',
+			default: false
+		},
+		compact: {
+			title: 'Compact',
+			type: 'boolean',
+			default: false
+		},
+		float: {
+			title: 'Float',
+			anyOf: [{
+				type: 'null',
+				title: 'No'
+			}, {
+				const: 'left',
+				title: 'Left'
+			}, {
+				const: 'right',
+				title: 'Right'
+			}],
+			default: null
 		}
 	},
 	contents: {
 		nodes: "inline*",
 		marks: "nolink"
 	},
-	html: '<button type="button" class="ui [full|alt:fluid:] button" value="[type]">Label</button>',
+	html: '<button type="button" class="ui [full|alt:fluid:] [icon] [compact] [float|post:%20floated] button" value="[type]">Label</button>',
 	stylesheets: [
 		'../lib/components/button.css',
 	]

package/elements/form.js

@@ -60,10 +60,9 @@ exports.query_form = {
 		'../ui/form.css'
 	],
 	scripts: [ // for asynchronous submits and automatic triggers
-		'../lib/formdata.js',
 		'../ui/form.js'
 	],
-	polyfills: ['fetch'] // unfortunately there is no formdata polyfill available right now
+	polyfills: ['fetch']
 };
 
 exports.api_form = {
@@ -191,9 +190,8 @@ exports.api_form = {
 		'../ui/form.css'
 	],
 	scripts: [ // for asynchronous submits and automatic triggers
-		'../lib/formdata.js',
 		'../ui/form.js'
 	],
-	polyfills: ['fetch'] // unfortunately there is no formdata polyfill available right now
+	polyfills: ['fetch']
 };
 

package/elements/grid.js

@@ -43,7 +43,7 @@ exports.grid = {
 			maximum: 16
 		}
 	},
-	html: '<div class="ui [responsive] [width|eq:min|alt::equal width] [columns|as:colnums|post: columns] grid [width|switch:contained:container]"></div>',
+	html: '<div class="ui [responsive] [width|neq:min|alt:equal width] [columns|as:colnums|post: columns] grid [width|switch:contained:container]"></div>',
 	stylesheets: [
 		'../lib/components/grid.css'
 	]

package/elements/image.js

@@ -11,7 +11,6 @@ exports.image = {
 		},
 		url: {
 			title: 'Address',
-			description: 'Local or remote URL',
 			anyOf: [{
 				type: "null"
 			}, {
@@ -141,7 +140,6 @@ exports.image = {
 		'../ui/image.css'
 	],
 	scripts: [
-		'../lib/object-fit-images.js',
 		'../ui/image.js'
 	]
 };
@@ -153,7 +151,6 @@ exports.inlineImage = {
 	properties: {
 		url: {
 			title: 'Address',
-			description: 'Local or remote URL',
 			anyOf: [{
 				type: "null"
 			}, {

package/elements/input-date.js

@@ -19,12 +19,6 @@ exports.input_date_time = {
 			type: "string",
 			format: "singleline"
 		},
-		placeholder: {
-			title: "Placeholder",
-			nullable: true,
-			type: "string",
-			format: "singleline"
-		},
 		required: {
 			title: 'Required',
 			type: 'boolean',
@@ -83,7 +77,7 @@ exports.input_date_time = {
 	html: `<div class="field">
 		<label block-content="label">Label</label>
 		<input is="element-input-date"
-			name="[name]" disabled="[disabled]" placeholder="[placeholder]"
+			name="[name]" disabled="[disabled]"
 			required="[required]" value="[value]" step="[step]"
 			type="[format|switch:datetime:datetime-local]"
 		/>

package/elements/input-file.js

@@ -13,12 +13,6 @@ exports.input_file = {
 			format: "singleline",
 			$helper: 'element-property'
 		},
-		placeholder: {
-			title: "Placeholder",
-			nullable: true,
-			type: "string",
-			format: "singleline"
-		},
 		required: {
 			title: 'Required',
 			type: 'boolean',
@@ -59,7 +53,7 @@ exports.input_file = {
 		<label block-content="label">Label</label>
 		<div class="ui basic label"></div>
 		<input is="element-input-file" type="file" id="[$id]" required="[required]"
-			disabled="[disabled]" accept="[limits.types|join:,]" name="[name]" placeholder="[placeholder]" />
+			disabled="[disabled]" accept="[limits.types|join:,]" name="[name]" />
 	</div>`,
 	stylesheets: [
 		'../lib/components/input.css',

package/elements/input-property.js

@@ -183,7 +183,6 @@ exports.input_property = {
 					data: {
 						name: name,
 						multiple: multiple,
-						placeholder: prop.description,
 						disabled: d.disabled,
 						required: required
 					},
@@ -312,7 +311,6 @@ exports.input_property = {
 				data: {
 					name: name,
 					disabled: d.disabled,
-					placeholder: propType.description,
 					required: required,
 					limits: limits
 				},
@@ -328,8 +326,7 @@ exports.input_property = {
 				data: {
 					name, type, required,
 					disabled: d.disabled,
-					default: propType.default,
-					placeholder: propType.description
+					default: propType.default
 				},
 				content: {
 					label: prop.title

package/elements/inputs.js

@@ -44,14 +44,39 @@ exports.input_button = {
 			default: false
 		},
 		full: {
-			title: 'Full width',
+			title: 'Fluid',
+			type: 'boolean',
+			default: false
+		},
+		icon: {
+			title: 'Icon',
+			type: 'boolean',
+			default: false
+		},
+		compact: {
+			title: 'Compact',
 			type: 'boolean',
 			default: false
+		},
+		float: {
+			title: 'Float',
+			anyOf: [{
+				type: 'null',
+				title: 'No'
+			}, {
+				const: 'left',
+				title: 'Left'
+			}, {
+				const: 'right',
+				title: 'Right'
+			}],
+			default: null
 		}
 	},
-	html: '<button type="[type]" disabled="[disabled]" class="ui [full|alt:fluid:] button" name="[name]" value="[value]">[type|schema:title]</button>',
+	html: '<button type="[type]" disabled="[disabled]" class="ui [full|alt:fluid:] [icon] [compact] [float|post:%20floated] button" name="[name]" value="[value]">[type|schema:title]</button>',
 	stylesheets: [
 		'../lib/components/button.css',
+		'../ui/button.css'
 	]
 };
 
@@ -113,12 +138,6 @@ exports.input_text = {
 			type: "string",
 			format: "singleline"
 		},
-		placeholder: {
-			title: "Placeholder",
-			nullable: true,
-			type: "string",
-			format: "singleline"
-		},
 		required: {
 			title: 'Required',
 			type: 'boolean',
@@ -180,7 +199,7 @@ exports.input_text = {
 		tel: /^(\(\d+\))? *\d+([ .-]?\d+)*$/.source,
 		email: /^[\w.!#$%&'*+/=?^`{|}~-]+@\w(?:[\w-]{0,61}\w)?(?:\.\w(?:[\w-]{0,61}\w)?)*$/.source
 	},
-	html: `<div class="[width|as:colnums|post: wide] field [type|eq:hidden]">
+	html: `<div class="[width|as:colnums|post: wide] field [type|if:eq:hidden]">
 		<label block-content="label">Label</label>
 		[type|eq:textarea|prune:*:1]<textarea
 			is="element-textarea"
@@ -188,17 +207,15 @@ exports.input_text = {
 			required="[required]"
 			readonly="[readonly]"
 			disabled="[disabled]"
-			placeholder="[placeholder]"
 		>[value|as:text]</textarea>
 		[type|neq:textarea|prune:*:1]<input name="[name]"
 			required="[required]"
 			readonly="[readonly]"
 			disabled="[disabled]"
-			placeholder="[placeholder]"
 			type="[type|switch:new-password:password]"
 			pattern="[$element.patterns.[type]]"
 			value="[value]"
-			autocomplete="[type|eq:new-password|fail:]" />
+			autocomplete="[type|if:eq:new-password]" />
 	</div>`,
 	scripts: ['../ui/textarea.js'],
 	stylesheets: ['../ui/textarea.css']
@@ -242,7 +259,6 @@ exports.input_number = {
 			required="[required]"
 			readonly="[readonly]"
 			disabled="[disabled]"
-			placeholder="[placeholder]"
 			type="number"
 			value="[value]"
 			min="[minimum]"
@@ -429,12 +445,6 @@ exports.input_select = {
 			format: "singleline",
 			$helper: 'element-property'
 		},
-		placeholder: {
-			title: "Placeholder",
-			nullable: true,
-			type: "string",
-			format: "singleline"
-		},
 		disabled: {
 			title: 'Disabled',
 			type: 'boolean',
@@ -469,10 +479,11 @@ exports.input_select = {
 	html: `<div class="field">
 		<label block-content="label">Label</label>
 		<element-select class="ui selection dropdown [multiple]"
-			data-name="[name]" data-disabled="[disabled]" data-required="[required]"
-			data-multiple="[multiple]" data-placeholder="[placeholder]"
-			data-value="[value]"
+			name="[name]" disabled="[disabled]" required="[required]"
+			multiple="[multiple]"
+			value="[value]"
 		>
+			<i class="dropdown icon"></i><div class="text"></div><select></select>
 			<div class="menu" block-content="options"></div>
 		</element-select>
 	</div>`,

package/elements/layout.js

@@ -116,7 +116,8 @@ exports.layout = {
 			nullable: true,
 			properties: {
 				inline: {
-					title: 'Inline (em)',
+					title: 'Inline',
+					description: 'Units: em',
 					type: 'number',
 					default: 0,
 					multipleOf: 0.01,
@@ -126,7 +127,8 @@ exports.layout = {
 					const: 'em'
 				},
 				block: {
-					title: 'Block (rem)',
+					title: 'Block',
+					description: 'Units: rem',
 					type: 'number',
 					default: 0,
 					multipleOf: 0.01,
@@ -143,7 +145,8 @@ exports.layout = {
 			nullable: true,
 			properties: {
 				inline: {
-					title: 'Inline (em)',
+					title: 'Inline',
+					description: 'Units: em',
 					type: 'number',
 					default: 0,
 					minimum: 0,
@@ -154,7 +157,8 @@ exports.layout = {
 					const: 'em'
 				},
 				block: {
-					title: 'Block (rem)',
+					title: 'Block',
+					description: 'Units: rem',
 					type: 'number',
 					default: 0,
 					minimum: 0,
@@ -172,8 +176,7 @@ exports.layout = {
 			nullable: true,
 			properties: {
 				invert: {
-					title: 'Invert',
-					description: 'Invert background',
+					title: 'Toggle inverted theme',
 					default: false,
 					type: 'boolean'
 				},
@@ -181,11 +184,13 @@ exports.layout = {
 					title: 'Color',
 					type: 'string',
 					format: 'hex-color',
-					$helper: 'color'
+					$helper: {
+						name: 'color',
+						alpha: true
+					}
 				},
 				image: {
 					title: 'Image',
-					description: 'Local or remote URL',
 					anyOf: [{
 						type: "null"
 					}, {

package/elements/link.js

@@ -43,3 +43,69 @@ exports.link = {
 	]
 };
 
+exports.link_button = {
+	priority: 11,
+	title: "Link Btn",
+	icon: '<i class="icons"><i class="linkify icon"></i><i class="corner hand pointer icon"></i></i>',
+	properties: {
+		url: {
+			title: 'Address',
+			description: 'Path without query or full url',
+			nullable: true,
+			type: 'string',
+			format: 'uri-reference',
+			$helper: {
+				name: 'href',
+				filter: {
+					type: ["link", "file", "archive"]
+				}
+			}
+		},
+		lang: {
+			title: 'Language',
+			type: 'string',
+			format: 'lang',
+			nullable: true,
+			$helper: {
+				name: 'datalist',
+				url: '/.api/languages'
+			}
+		},
+		full: {
+			title: 'Fluid',
+			type: 'boolean',
+			default: false
+		},
+		icon: {
+			title: 'Icon',
+			type: 'boolean',
+			default: false
+		},
+		compact: {
+			title: 'Compact',
+			type: 'boolean',
+			default: false
+		},
+		float: {
+			title: 'Float',
+			anyOf: [{
+				type: 'null',
+				title: 'No'
+			}, {
+				const: 'left',
+				title: 'Left'
+			}, {
+				const: 'right',
+				title: 'Right'
+			}],
+			default: null
+		}
+	},
+	contents: "text*",
+	group: "block",
+	tag: 'a.ui.button',
+	html: '<a href="[url]" hreflang="[lang]" class="ui [full|alt:fluid:] [icon] [compact] [float|post:%20floated] button"></a>',
+	stylesheets: [
+		'../lib/components/button.css'
+	]
+};

package/elements/media.js

@@ -7,7 +7,7 @@ exports.video = {
 	properties: {
 		url: {
 			title: 'Address',
-			description: 'Local or remote URL',
+			description: 'Local or remote',
 			anyOf: [{
 				type: "null"
 			}, {
@@ -88,7 +88,7 @@ exports.audio = {
 	properties: {
 		url: {
 			title: 'Address',
-			description: 'Local or remote URL',
+			description: 'Local or remote',
 			anyOf: [{
 				type: "null"
 			}, {

package/elements/menu.js

@@ -87,7 +87,7 @@ exports.menu_item_link = {
 	properties: {
 		url: {
 			title: 'Address',
-			description: 'Local or remote URL',
+			description: 'Local or remote',
 			nullable: true,
 			type: 'string',
 			format: 'uri-reference',

package/elements/navigation.js

@@ -58,7 +58,7 @@ exports.breadcrumb = {
 		<div class="divider"></div>
 		<a href="[$links.up|nth:-1|at:a::1|repeat:link]" class="section">[link.title]</a>
 		<div class="divider"></div>
-		<div class="active section">[$page.data.title|fail:div::1]</div>
+		<div class="active section">[$page.content.title|fail:div::1]</div>
 	</nav>`,
 	stylesheets: [
 		'../lib/components/breadcrumb.css'

package/elements/pagination.js

@@ -9,7 +9,7 @@ exports.pagination = {
 		fetch: {
 			title: 'Fetch block',
 			type: 'string',
-			format: 'id',
+			format: 'id', // FIXME this cannot work because fetch id changes on copy
 			$filter: {
 				name: 'action',
 				action: 'read'

package/elements/sitemap.js

@@ -1,61 +1,6 @@
 exports.sitemap = {
-	title: "Sitemap",
 	group: "block",
-	bundle: true,
 	icon: '<i class="sitemap icon"></i>',
 	menu: 'link',
-	contents: {
-		id: 'children',
-		nodes: "sitemap_item*",
-		virtual: true
-	},
-	html: `<element-sitemap>
-		<element-accordion class="ui accordion" block-content="children"></element-accordion>
-	</element-sitemap>`,
-	stylesheets: [
-		'../lib/components/accordion.css',
-		'../ui/sitemap.css'
-	],
-	scripts: [
-		'../ui/sitemap.js'
-	],
-	itemModel: function(name) {
-		const schema = exports[name];
-		return {
-			title: schema.title,
-			icon: schema.icon,
-			properties: schema.properties,
-			standalone: true,
-			menu: "link",
-			bundle: 'sitemap',
-			group: 'sitemap_item',
-			virtual: true,
-			contents: {
-				id: 'children',
-				nodes: "sitemap_item*",
-				virtual: true
-			},
-			alias: name,
-			context: 'sitemap/ | sitemap_item/',
-			html: `<element-sitepage class="item fold" data-url="[url]" data-index="[index]">
-				<div class="title caret-icon">
-					<span class="header">[title|or:-]</span>
-					<span class="ui mini type label">[$grants.webmaster|prune:*][$type|slice:4]</span>
-					<span class="ui mini grey label">[$grants.webmaster|prune:*][nositemap|prune:*]no sitemap</span>
-					<span class="ui mini orange label">[$grants.webmaster|prune:*][noindex|prune:*]no index</span>
-					<span class="ui mini red label">[$grants.webmaster|prune:*][$lock|fail:*]</span>
-					<br>
-					<a href="[url]" class="description">[url|or:-]</a>
-					<a href="[redirect|fail:*]" class="redirection"> ➜ [redirect]</a>
-				</div>
-				<div class="list content" block-content="children"></div>
-			</element-sitepage>`
-		};
-	}
+	html: `<element-sitemap>DEPRECATED</element-sitemap>`
 };
-
-if (exports.page) exports.sitepage = exports.sitemap.itemModel('page');
-if (exports.redirection) exports.siteredirection = exports.sitemap.itemModel('redirection');
-
-exports.editor?.scripts.push('../ui/sitemap-helper.js');
-

package/lib/object-fit-images.js

@@ -1,7 +1,10 @@
-this.window = this.window || {};
-this.window.objectFitImages = (function () {
+var objectFitImages = (function () {
 	'use strict';
 
+	function getDefaultExportFromCjs (x) {
+		return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+	}
+
 	/*! npm.im/object-fit-images 3.2.4 */
 
 	var OFI = 'bfred-it:object-fit-images';
@@ -233,6 +236,8 @@ this.window.objectFitImages = (function () {
 
 	var ofi_commonJs = fix;
 
-	return ofi_commonJs;
+	var ofi_commonJs$1 = /*@__PURE__*/getDefaultExportFromCjs(ofi_commonJs);
+
+	return ofi_commonJs$1;
 
 })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pageboard/html",
-  "version": "0.14.9",
+  "version": "0.14.10",
   "description": "",
   "main": "index.js",
   "repository": {
@@ -14,22 +14,17 @@
   },
   "homepage": "https://github.com/pageboard/client#readme",
   "dependencies": {
-    "postinstall": "^0.8.0",
     "semantic-ui-css": "^2.4.1"
   },
   "devDependencies": {
-    "formdata-polyfill": "^4.0.10",
     "nouislider": "^15.7.1",
-    "object-fit-images": "^3.2.4",
-    "postinstall-bundle": "^0.8.0"
+    "postinstall": "^0.8.0"
   },
   "postinstall": {
     "semantic-ui-css/components": "link lib/components",
     "semantic-ui-css/themes": "link lib/themes"
   },
   "prepare": {
-    "object-fit-images": "bundle --name=window.objectFitImages lib/object-fit-images.js",
-    "formdata-polyfill": "copy lib/formdata.js",
     "nouislider/dist/nouislider.js": "copy lib/",
     "nouislider/dist/nouislider.css": "copy lib/"
   },

package/ui/button.css

@@ -0,0 +1,11 @@
+.ui.button:not(.right) + .ui.button.right {
+	margin-left:auto;
+}
+
+[contenteditable] .ui.buttons .disabled.button,
+[contenteditable] .ui.disabled.button,
+[contenteditable] .ui.button:disabled,
+[contenteditable] .ui.disabled.button:hover,
+[contenteditable] .ui.disabled.active.button {
+	pointer-events: auto !important;
+}