Add initial support for mv-list/mv-list-item, and rewrite mv-multiple to it (#735)

Closes #72

Author: LeaVerou

src-css/mavo.scss

@@ -27,7 +27,7 @@
 	right: 0;
 	margin: .2em 0;
 
-	tr[mv-multiple] > & { // Table rows cannot be relative, hack to fix that
+	tr[mv-list-item] > & { // Table rows cannot be relative, hack to fix that
 		bottom: auto;
 		right: auto;
 	}
@@ -145,7 +145,7 @@
 	}
 }
 
-[mv-multiple] {
+[mv-list-item] {
 	position: relative;
 
 	&.mv-highlight {  // basically &:has(> .mv-item-bar:hover)
@@ -234,7 +234,7 @@ button.mv-close {
 	}
 }
 
-[mv-progress="Loading"]:not(.mv-no-hiding-during-loading) [mv-multiple] {
+[mv-progress="Loading"]:not(.mv-no-hiding-during-loading) [mv-list-item] {
 	display: none;
 }
 
@@ -269,15 +269,15 @@ button.mv-close {
 [mv-mode=""]     { --mv-mode: initial; }
 
 // Primitives
-[property][mv-mode="edit"]:not([typeof]):not([mv-group]) {
+[property][mv-mode="edit"]:not([typeof], [mv-group], [mv-list]) {
 	input.mv-editor,
 	select.mv-editor,
 	textarea.mv-editor {
 		all: unset;
 		cursor: auto;
 	}
 
-	&:not(input):not(select):not(textarea):hover {
+	&:not(input, select, textarea):hover {
 		@include highlight(hsla(58, 100%, 50%, .2));
 	}
 
@@ -581,4 +581,41 @@ img[property]:where([mv-mode="edit"]:not([alt], [alt=""])) {
 	}
 }
 
+@property --mv-length {
+	syntax: "<length>";
+	initial-value: 0;
+	inherits: true;
+}
+
+.mv-container {
+	display: contents !important;
+}
+
+select,
+datalist {
+	--mv-length: 1em;
+}
+
+optgroup:where(.mv-container) {
+	& > option {
+		padding-inline-start: 2px; /* Remove Firefox gap */
+
+		/* Remove Chrome gap */
+		&::before {
+			content: none;
+		}
+	}
+
+	:where(:root.mv-supports-atproperty) & {
+		font-size: 0;
+		--mv-length: inherit;
+
+		& > * {
+			--mv-length: inherit;
+			font-size: var(--mv-length);
+		}
+	}
+}
+
+
 @import 'bar';

src/collection.js

@@ -1,6 +1,6 @@
 (function($, $$) {
 
-Mavo.attributes.push("mv-multiple", "mv-order", "mv-accepts", "mv-initial-items");
+Mavo.attributes.push("mv-list", "mv-list-item", "mv-order", "mv-accepts", "mv-initial-items");
 
 var _ = Mavo.Collection = class Collection extends Mavo.Node {
 	constructor (element, mavo, o) {
@@ -9,7 +9,8 @@ var _ = Mavo.Collection = class Collection extends Mavo.Node {
 		/*
 		 * Create the template, remove it from the DOM and store it
 		 */
-		this.templateElement = this.element;
+
+		this.firstItemElement = this.templateElement = $(Mavo.selectors.multiple, this.element);
 
 		this.children = [];
 		this.liveData = new Mavo.Data(this, []);
@@ -26,29 +27,27 @@ var _ = Mavo.Collection = class Collection extends Mavo.Node {
 		}
 
 		if (!this.fromTemplate("templateElement", "accepts", "initialItems")) {
-			this.accepts = this.templateElement.getAttribute("mv-accepts");
+			this.accepts = this.element.getAttribute("mv-accepts");
 			this.accepts = new Set(this.accepts?.split(/\s+/));
 
-			this.initialItems = +(this.templateElement.getAttribute("mv-initial-items") || 1);
+			this.initialItems = +(this.element.getAttribute("mv-initial-items") || 1);
 
 			// Must clone because otherwise once expressions are parsed on the template element
 			// we will not be able to pick them up from subsequent items
+
 			this.templateElement = this.templateElement.cloneNode(true);
 		}
 
-		if (this.initialItems > 0 || !this.template) {
-			var item = this.createItem(this.element);
-			this.add(item, undefined, {silent: true});
-		}
+		let item = this.add(this.firstItemElement, undefined, {silent: true});
 
 		this.mavo.treeBuilt.then(() => {
-			if (!this.initialItems) {
+			if (this.initialItems === 0) {
 				if (item) {
 					this.delete(item, {silent: true});
 				}
 				else {
 					// No item to delete
-					this.element.remove();
+					this.firstItemElement.remove();
 				}
 			}
 			else if (this.initialItems > 1) {
@@ -70,7 +69,7 @@ var _ = Mavo.Collection = class Collection extends Mavo.Node {
 		var group = this.parentGroup.element;
 
 		var button = $$(selector, group).filter(button => {
-			return !this.templateElement.contains(button)  // is outside the template element
+			return !this.element.contains(button)  // is outside the list element
 				&& !Mavo.data(button, "collection"); // and does not belong to another collection
 		})[0];
 
@@ -343,12 +342,9 @@ var _ = Mavo.Collection = class Collection extends Mavo.Node {
 
 		// Insert the add button if it's not already in the DOM
 		if (!this.addButton.parentNode) {
-			var tag = this.element.tagName.toLowerCase();
-
-			if (tag in Mavo.selectors.container) {
-				var rel = this.marker.parentNode.closest(Mavo.selectors.container[tag]);
-			}
-			else if (this.bottomUp && this.children[0]) {
+			// In bottom up collections, button goes before first item
+			// otherwise, it goes after the marker
+			if (this.bottomUp && this.children[0]) {
 				var rel = this.children[0].element;
 			}
 
@@ -599,7 +595,7 @@ $.Class(_, {
 			 * Add new items at the top or bottom?
 			 */
 
-			return /^desc\b/i.test(this.templateElement.getAttribute("mv-order"));
+			return /^desc\b/i.test(this.element.getAttribute("mv-order"));
 		}
 	},
 

src/data.js

@@ -185,6 +185,10 @@ var _ = Mavo.Data = $.Class(class Data {
 			return Array.isArray(data?.[Mavo.parent]);
 		},
 
+		isCollection (data) {
+			return Array.isArray(data) && data?.[Mavo.toNode] instanceof Mavo.Collection;
+		},
+
 		closest (obj, test) {
 			var path = [];
 			do {
@@ -326,6 +330,10 @@ var _ = Mavo.Data = $.Class(class Data {
 			if (property in data) {
 				ret = data[property];
 			}
+			else if (_.isCollection(data) && data[Mavo.property] === property) {
+				// On collections we want their property name to return the entire collection
+				return data;
+			}
 			else if (!propertyIsNumeric) {
 				// Property does not exist on data, if non-numeric, look for it elsewhere
 				if (property in _.special) { // $special properties
@@ -383,6 +391,10 @@ var _ = Mavo.Data = $.Class(class Data {
 				return Reflect.has(data, property);
 			}
 
+			if (_.getProperty(data) === property) {
+				return true;
+			}
+
 			var objects = [data, Mavo.all, _.special];
 
 			if (objects.some(obj => property in obj)) {