lucos_search_component 1.0.52 → 1.0.54

package/dist/index.js

@@ -5646,7 +5646,7 @@ var tomSelectStylesheet = "/**\n * tom-select.css (v2.5.2)\n * Copyright (c) con
 
 class LucosSearchComponent extends HTMLSpanElement {
 	static get observedAttributes() {
-		return ['data-api-key','data-types','data-exclude-types','data-no-lang'];
+		return ['data-api-key','data-types','data-exclude-types','data-no-lang','data-common'];
 	}
 	constructor() {
 		super();
@@ -5794,7 +5794,7 @@ class LucosSearchComponent extends HTMLSpanElement {
 		if (!selector) throw new Error("Can't find select element in lucos-search");
 		selector.setAttribute("multiple", "multiple");
 		new TomSelect(selector, {
-			...(component.isLanguageMode ? { optgroupField: 'lang_family', lockOptgroupOrder: true } : {}),
+			...(component.isLanguageMode || component.getAttribute("data-common") ? { optgroupField: 'lang_family', lockOptgroupOrder: true } : {}),
 			valueField: 'id',
 			labelField: 'pref_label',
 			searchField: [],
@@ -5818,14 +5818,22 @@ class LucosSearchComponent extends HTMLSpanElement {
 					queryParams.set("filter_by",`type:![${component.getAttribute("data-exclude_types")}]`);
 				}
 				try {
-					const results = await component.searchRequest(queryParams, abortController.signal);
+					let results = await component.searchRequest(queryParams, abortController.signal);
 					if (abortController.signal.aborted) return;
 					this.clearOptions();
 					if (component.isLanguageMode) {
 						results.forEach(r => { if (!r.lang_family) r.lang_family = 'qli'; });
 					}
+					// Remove common items from results to avoid duplication (they're always shown separately)
+					if (component._commonOptions) {
+						const commonIds = new Set(component._commonOptions.map(o => o.id));
+						results = results.filter(r => !commonIds.has(r.id));
+						component._commonOptions.forEach(opt => this.addOption(opt));
+					}
 					const noLang = component.noLangOption;
-					if (noLang) results.unshift(noLang);
+					// Don't add noLang as standalone if it's already covered by a common item
+					const noLangIsCommon = noLang && component._commonOptions && component._commonOptions.some(o => o.id === noLang.id);
+					if (noLang && !noLangIsCommon) results.unshift(noLang);
 					callback(results);
 				} catch(err) {
 					if (err.name === 'AbortError') return;
@@ -5846,15 +5854,35 @@ class LucosSearchComponent extends HTMLSpanElement {
 			},
 			onFocus: function() {
 				this.clearOptions();
+				// Re-add common items first so they own any shared IDs (e.g. zxx in both data-no-lang and data-common)
+				if (component._commonOptions) {
+					component._commonOptions.forEach(opt => this.addOption(opt));
+				}
 				const noLang = component.noLangOption;
-				if (noLang) this.addOption(noLang);
+				// Skip noLang if its ID is already a common item (would be silently discarded as a duplicate)
+				const noLangIsCommon = noLang && component._commonOptions && component._commonOptions.some(o => o.id === noLang.id);
+				if (noLang && !noLangIsCommon) this.addOption(noLang);
 			},
 			// On startup, update any existing options with latest data from search
 			onInitialize: async function() {
 				const ids = Object.keys(this.options);
 				const noLang = component.noLangOption;
-				// Always make the no-lang option available for new selections
-				if (noLang) this.addOption(noLang);
+				// Fetch and register common items (x-common group goes first)
+				const commonIds = component.commonIds;
+				if (commonIds.length > 0) {
+					this.addOptionGroup('x-common', { label: 'Common' });
+					const commonParams = new URLSearchParams({
+						q: '*',
+						filter_by: `id:[${commonIds.join(",")}]`,
+						per_page: commonIds.length,
+					});
+					const commonResults = await component.searchRequest(commonParams);
+					component._commonOptions = commonResults.map(r => ({...r, lang_family: 'x-common'}));
+					component._commonOptions.forEach(opt => this.addOption(opt));
+				}
+				// Add noLang option now (after common items) so we can check for overlap
+				const noLangIsCommon = noLang && component._commonOptions && component._commonOptions.some(o => o.id === noLang.id);
+				if (noLang && !noLangIsCommon) this.addOption(noLang);
 				// In language mode, fetch families and register option groups
 				if (component.isLanguageMode) {
 					const families = await component.getLanguageFamilies();
@@ -5864,8 +5892,9 @@ class LucosSearchComponent extends HTMLSpanElement {
 					});
 				}
 				if (ids.length < 1) return;
-				// Fetch real options from Typesense, excluding the synthetic no-lang option
-				const idsToFetch = noLang ? ids.filter(id => id !== noLang.id) : ids;
+				// Fetch real options from Typesense, excluding the synthetic no-lang option and common items
+				const excludeIds = new Set([...(noLang ? [noLang.id] : []), ...commonIds]);
+				const idsToFetch = ids.filter(id => !excludeIds.has(id));
 				if (idsToFetch.length > 0) {
 					const searchParams = new URLSearchParams({
 						q: '*',
@@ -5882,6 +5911,12 @@ class LucosSearchComponent extends HTMLSpanElement {
 				if (noLang && ids.includes(noLang.id)) {
 					this.updateOption(noLang.id, noLang);
 				}
+				// Update any pre-selected common items with fresh data
+				if (component._commonOptions) {
+					component._commonOptions.forEach(opt => {
+						if (ids.includes(opt.id)) this.updateOption(opt.id, opt);
+					});
+				}
 			},
 			onItemSelect: function (item) {
 				// Tom-select prevents clicking on link in an item to work as normal, so force it here
@@ -5911,6 +5946,37 @@ class LucosSearchComponent extends HTMLSpanElement {
 			shadow.append(selector.nextElementSibling);
 		}
 	}
+	connectedCallback() {
+		const form = this.closest('form');
+		if (!form) return;
+		this._form = form;
+		this._formdataHandler = (event) => {
+			const selector = this.querySelector('select');
+			if (!selector || !selector.name) return;
+			const ts = selector.tomselect;
+			if (!ts) return;
+			const name = selector.name;
+			const values = ts.getValue();
+			const valueArray = Array.isArray(values) ? values : (values ? [values] : []);
+			// Remove the native select values so consumers only receive the structured pairs
+			event.formData.delete(name);
+			valueArray.forEach((id, idx) => {
+				const option = ts.options[id];
+				if (option) {
+					event.formData.append(`${name}[${idx}][uri]`, id);
+					event.formData.append(`${name}[${idx}][name]`, option.pref_label);
+				}
+			});
+		};
+		form.addEventListener('formdata', this._formdataHandler);
+	}
+	disconnectedCallback() {
+		if (this._form && this._formdataHandler) {
+			this._form.removeEventListener('formdata', this._formdataHandler);
+			this._form = null;
+			this._formdataHandler = null;
+		}
+	}
 	get noLangOption() {
 		const label = this.getAttribute("data-no-lang");
 		if (!label) return null;
@@ -5928,6 +5994,11 @@ class LucosSearchComponent extends HTMLSpanElement {
 		if (!types) return false;
 		return types.split(",").map(t => t.trim()).includes("Language");
 	}
+	get commonIds() {
+		const common = this.getAttribute("data-common");
+		if (!common) return [];
+		return common.split(",").map(s => s.trim()).filter(Boolean);
+	}
 	async getLanguageFamilies() {
 		if (this._langFamilies) return this._langFamilies;
 		const key = this.getAttribute("data-api-key");

package/example/index.html

@@ -14,6 +14,7 @@
 			<option selected>https://eolas.l42.eu/metadata/language/ain/</option>
 		</select></span>
 		<label for="search8">Languages grouped by family:</label><span is="lucos-search" data-api-key="${KEY_LUCOS_ARACHNE}" data-types="Language"><select id="search8"></select></span>
+		<label for="search9">Languages with common pinned:</label><span is="lucos-search" data-api-key="${KEY_LUCOS_ARACHNE}" data-types="Language" data-no-lang="No Language" data-common="https://eolas.l42.eu/metadata/language/en/,https://eolas.l42.eu/metadata/language/ga/,https://eolas.l42.eu/metadata/language/zxx/"><select id="search9"></select></span>
 		<label for="search6">Languages with no-lang option:</label><span is="lucos-search" data-api-key="${KEY_LUCOS_ARACHNE}" data-types="Language" data-no-lang="No Language"><select id="search6"></select></span>
 		<label for="search7">Languages with no-lang pre-selected:</label><span is="lucos-search" data-api-key="${KEY_LUCOS_ARACHNE}" data-types="Language" data-no-lang="No Language"><select id="search7" multiple><option selected>https://eolas.l42.eu/metadata/language/zxx/</option></select></span>
 		<label for="search5">More than 10:</label>
@@ -45,6 +46,24 @@
 		<label for="lang3">Common languages option</label><span is="lucos-lang" data-api-key="${KEY_LUCOS_ARACHNE}" data-no-lang="No Language" data-common="en,ga,zxx">
 			<select id="lang3"></select>
 		</span>
+		<h1>Form submission</h1>
+		<form id="test-form" onsubmit="handleSubmit(event)">
+			<label for="tags">Tags:</label><span is="lucos-search" data-api-key="${KEY_LUCOS_ARACHNE}"><select id="tags" name="tags" multiple></select></span>
+			<button type="submit">Submit</button>
+		</form>
+		<pre id="form-output"></pre>
+		<script>
+			function handleSubmit(event) {
+				event.preventDefault();
+				const data = new FormData(event.target);
+				const output = {};
+				for (const [key, value] of data.entries()) {
+					if (!output[key]) output[key] = [];
+					output[key].push(value);
+				}
+				document.getElementById('form-output').textContent = JSON.stringify(output, null, 2);
+			}
+		</script>
 		<script src="./built.js"></script>
 	</body>
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lucos_search_component",
-  "version": "1.0.52",
+  "version": "1.0.54",
   "description": "Web Components for searching lucOS data",
   "type": "module",
   "main": "dist/index.js",

package/web-components/lucos-search.js

@@ -3,7 +3,7 @@ import tomSelectStylesheet from 'tom-select/dist/css/tom-select.default.css';
 
 class LucosSearchComponent extends HTMLSpanElement {
 	static get observedAttributes() {
-		return ['data-api-key','data-types','data-exclude-types','data-no-lang'];
+		return ['data-api-key','data-types','data-exclude-types','data-no-lang','data-common'];
 	}
 	constructor() {
 		super();
@@ -151,7 +151,7 @@ class LucosSearchComponent extends HTMLSpanElement {
 		if (!selector) throw new Error("Can't find select element in lucos-search");
 		selector.setAttribute("multiple", "multiple");
 		new TomSelect(selector, {
-			...(component.isLanguageMode ? { optgroupField: 'lang_family', lockOptgroupOrder: true } : {}),
+			...(component.isLanguageMode || component.getAttribute("data-common") ? { optgroupField: 'lang_family', lockOptgroupOrder: true } : {}),
 			valueField: 'id',
 			labelField: 'pref_label',
 			searchField: [],
@@ -175,14 +175,22 @@ class LucosSearchComponent extends HTMLSpanElement {
 					queryParams.set("filter_by",`type:![${component.getAttribute("data-exclude_types")}]`);
 				}
 				try {
-					const results = await component.searchRequest(queryParams, abortController.signal);
+					let results = await component.searchRequest(queryParams, abortController.signal);
 					if (abortController.signal.aborted) return;
 					this.clearOptions();
 					if (component.isLanguageMode) {
 						results.forEach(r => { if (!r.lang_family) r.lang_family = 'qli'; });
 					}
+					// Remove common items from results to avoid duplication (they're always shown separately)
+					if (component._commonOptions) {
+						const commonIds = new Set(component._commonOptions.map(o => o.id));
+						results = results.filter(r => !commonIds.has(r.id));
+						component._commonOptions.forEach(opt => this.addOption(opt));
+					}
 					const noLang = component.noLangOption;
-					if (noLang) results.unshift(noLang);
+					// Don't add noLang as standalone if it's already covered by a common item
+					const noLangIsCommon = noLang && component._commonOptions && component._commonOptions.some(o => o.id === noLang.id);
+					if (noLang && !noLangIsCommon) results.unshift(noLang);
 					callback(results);
 				} catch(err) {
 					if (err.name === 'AbortError') return;
@@ -203,15 +211,35 @@ class LucosSearchComponent extends HTMLSpanElement {
 			},
 			onFocus: function() {
 				this.clearOptions();
+				// Re-add common items first so they own any shared IDs (e.g. zxx in both data-no-lang and data-common)
+				if (component._commonOptions) {
+					component._commonOptions.forEach(opt => this.addOption(opt));
+				}
 				const noLang = component.noLangOption;
-				if (noLang) this.addOption(noLang);
+				// Skip noLang if its ID is already a common item (would be silently discarded as a duplicate)
+				const noLangIsCommon = noLang && component._commonOptions && component._commonOptions.some(o => o.id === noLang.id);
+				if (noLang && !noLangIsCommon) this.addOption(noLang);
 			},
 			// On startup, update any existing options with latest data from search
 			onInitialize: async function() {
 				const ids = Object.keys(this.options);
 				const noLang = component.noLangOption;
-				// Always make the no-lang option available for new selections
-				if (noLang) this.addOption(noLang);
+				// Fetch and register common items (x-common group goes first)
+				const commonIds = component.commonIds;
+				if (commonIds.length > 0) {
+					this.addOptionGroup('x-common', { label: 'Common' });
+					const commonParams = new URLSearchParams({
+						q: '*',
+						filter_by: `id:[${commonIds.join(",")}]`,
+						per_page: commonIds.length,
+					});
+					const commonResults = await component.searchRequest(commonParams);
+					component._commonOptions = commonResults.map(r => ({...r, lang_family: 'x-common'}));
+					component._commonOptions.forEach(opt => this.addOption(opt));
+				}
+				// Add noLang option now (after common items) so we can check for overlap
+				const noLangIsCommon = noLang && component._commonOptions && component._commonOptions.some(o => o.id === noLang.id);
+				if (noLang && !noLangIsCommon) this.addOption(noLang);
 				// In language mode, fetch families and register option groups
 				if (component.isLanguageMode) {
 					const families = await component.getLanguageFamilies();
@@ -221,8 +249,9 @@ class LucosSearchComponent extends HTMLSpanElement {
 					});
 				}
 				if (ids.length < 1) return;
-				// Fetch real options from Typesense, excluding the synthetic no-lang option
-				const idsToFetch = noLang ? ids.filter(id => id !== noLang.id) : ids;
+				// Fetch real options from Typesense, excluding the synthetic no-lang option and common items
+				const excludeIds = new Set([...(noLang ? [noLang.id] : []), ...commonIds]);
+				const idsToFetch = ids.filter(id => !excludeIds.has(id));
 				if (idsToFetch.length > 0) {
 					const searchParams = new URLSearchParams({
 						q: '*',
@@ -239,6 +268,12 @@ class LucosSearchComponent extends HTMLSpanElement {
 				if (noLang && ids.includes(noLang.id)) {
 					this.updateOption(noLang.id, noLang);
 				}
+				// Update any pre-selected common items with fresh data
+				if (component._commonOptions) {
+					component._commonOptions.forEach(opt => {
+						if (ids.includes(opt.id)) this.updateOption(opt.id, opt);
+					});
+				}
 			},
 			onItemSelect: function (item) {
 				// Tom-select prevents clicking on link in an item to work as normal, so force it here
@@ -268,6 +303,37 @@ class LucosSearchComponent extends HTMLSpanElement {
 			shadow.append(selector.nextElementSibling);
 		}
 	}
+	connectedCallback() {
+		const form = this.closest('form');
+		if (!form) return;
+		this._form = form;
+		this._formdataHandler = (event) => {
+			const selector = this.querySelector('select');
+			if (!selector || !selector.name) return;
+			const ts = selector.tomselect;
+			if (!ts) return;
+			const name = selector.name;
+			const values = ts.getValue();
+			const valueArray = Array.isArray(values) ? values : (values ? [values] : []);
+			// Remove the native select values so consumers only receive the structured pairs
+			event.formData.delete(name);
+			valueArray.forEach((id, idx) => {
+				const option = ts.options[id];
+				if (option) {
+					event.formData.append(`${name}[${idx}][uri]`, id);
+					event.formData.append(`${name}[${idx}][name]`, option.pref_label);
+				}
+			});
+		};
+		form.addEventListener('formdata', this._formdataHandler);
+	}
+	disconnectedCallback() {
+		if (this._form && this._formdataHandler) {
+			this._form.removeEventListener('formdata', this._formdataHandler);
+			this._form = null;
+			this._formdataHandler = null;
+		}
+	}
 	get noLangOption() {
 		const label = this.getAttribute("data-no-lang");
 		if (!label) return null;
@@ -285,6 +351,11 @@ class LucosSearchComponent extends HTMLSpanElement {
 		if (!types) return false;
 		return types.split(",").map(t => t.trim()).includes("Language");
 	}
+	get commonIds() {
+		const common = this.getAttribute("data-common");
+		if (!common) return [];
+		return common.split(",").map(s => s.trim()).filter(Boolean);
+	}
 	async getLanguageFamilies() {
 		if (this._langFamilies) return this._langFamilies;
 		const key = this.getAttribute("data-api-key");