@pageboard/html 0.10.9 → 0.10.10

package/elements/form-input-property.js

@@ -64,6 +64,7 @@ exports.input_property = {
 			required = prop.required && prop.required.indexOf(propKey) >= 0;
 			if (cases) {
 				prop = cases[propKey];
+				name = list.slice(0, i - 1).concat(list.slice(i + 1)).join('.');
 				cases = null;
 			} else {
 				if (prop.select && prop.select.$data == `0/${propKey}`) {
@@ -133,6 +134,7 @@ exports.input_property = {
 				for (const item of listOf) {
 					content.appendChild(view.render({
 						type: multiple ? 'input_checkbox' : 'input_radio',
+						id,
 						data: {
 							name: name,
 							value: item.type == "null" ? null : item.const,

package/elements/form-inputs.js

@@ -359,8 +359,8 @@ exports.input_checkbox = {
 		<div class="ui [toggle|?] checkbox">
 			<input type="checkbox" required="[required]" disabled="[disabled]"
 				name="[name]" value="[value]" checked="[checked]"
-				id="for-[name][value|or:|pre:-]" />
-			<label block-content="label" for="for-[name][value|or:|pre:-]">Label</label>
+				id="for-[name][value|or:|pre:-]-[$id|slice:0:6]" />
+			<label block-content="label" for="for-[name][value|or:|pre:-]-[$id|slice:0:6]">Label</label>
 		</div>
 	</div>`,
 	stylesheets: [
@@ -405,8 +405,8 @@ exports.input_radio = {
 		<div class="ui radio checkbox">
 			<input type="radio" disabled="[disabled]"
 				name="[name]" value="[value|or:]" checked="[checked]"
-				id="for-[name][value|or:|pre:-]" />
-			<label block-content="label" for="for-[name][value|or:|pre:-]">Label</label>
+				id="for-[name][value|or:|pre:-]-[$id|slice:0:6]" />
+			<label block-content="label" for="for-[name][value|or:|pre:-]-[$id|slice:0:6]">Label</label>
 		</div>
 	</div>`,
 	stylesheets: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pageboard/html",
-  "version": "0.10.9",
+  "version": "0.10.10",
   "description": "",
   "main": "index.js",
   "scripts": {

package/ui/select.js

@@ -100,11 +100,15 @@ class HTMLElementSelect extends VirtualHTMLElement {
 	}
 	#setPlaceholder(str) {
 		const text = this.#text;
-		text.textContent = str || this.options.placeholder;
-		text.classList.add('default');
+		if (!str) str = this.options.placeholder;
 
 		const defaultOption = this.#select.querySelector('option[value=""]');
-		if (defaultOption) defaultOption.innerHTML = str || "-";
+		if (defaultOption) {
+			if (!str) str = defaultOption.innerHTML;
+			else defaultOption.innerHTML = str;
+		}
+		text.textContent = str;
+		text.classList.add('default');
 	}
 
 	#menuOption(val) {
@@ -124,11 +128,13 @@ class HTMLElementSelect extends VirtualHTMLElement {
 		const select = this.#select;
 		if (!select) return;
 		const menu = this.#menu;
-		select.innerHTML = '<option selected value="">-</option>';
-		menu.children.forEach(item => select.insertAdjacentHTML(
-			'beforeEnd',
-			`<option value="${item.dataset.value || item.innerText.trim()}">${item.innerHTML}</option>`
-		));
+		menu.children.forEach(item => {
+			const val = item.dataset.value || item.innerText != "-" && item.innerText.trim() || "";
+			select.insertAdjacentHTML(
+				'beforeEnd',
+				`<option value="${val}">${item.innerHTML}</option>`
+			);
+		});
 	}
 	setup(state) {
 		this.#observer = new MutationObserver((mutations) => this.#fillSelect());
@@ -154,6 +160,12 @@ class HTMLElementSelect extends VirtualHTMLElement {
 			for (const node of this.querySelectorAll('.ui.label')) node.remove();
 		}
 		select.name = this.options.name;
+		if (!select.required) {
+			const menu = this.#menu;
+			if (!menu.querySelector('element-select-option[data-value=""]')) {
+				menu.insertAdjacentHTML('afterBegin', `<element-select-option data-value="" block-type="input_select_option" class="item">-</element-select-option>`);
+			}
+		}
 		this.#fillSelect();
 	}