@es-joy/jsoe 0.29.0 → 0.30.0

package/src/search/subTypes/blobHTMLSearchType.js

@@ -1,4 +1,6 @@
-import {buildPathLabel, findOwnControl} from '../searchUtils.js';
+import {
+  buildPathLabel, findOwnControl, isExemptedByAncestorHasProperty
+} from '../searchUtils.js';
 import {makeBlobHTMLLeaf} from '../queryTreeBuilders.js';
 import {getQueryViaElement} from '../searchElementUtils.js';
 
@@ -8,11 +10,31 @@ import {getQueryViaElement} from '../searchElementUtils.js';
 
 /**
  * Blob HTML: XPath, CSS selectors, full text search, regex search of raw
- * HTML (README) - a mode `<select>` plus one text `<input>`, the same
+ * HTML (README) - a mode `<select>` plus one value control, the same
  * "pick a mode, give it one value" shape as `buildLiteralRegexControls`
  * (`searchUtils.js`), but not built through it: the four modes and the
  * `blobHTML` leaf kind they produce are specific to this one type, with no
- * second caller to share the helper with.
+ * second caller to share the helper with. The value control is a single-line
+ * `<input>` for XPath/CSS-selector/regex, but swaps to a `<textarea>` for
+ * "Full text search" mode alone, since a search phrase in a body of text is
+ * the one mode actually expected to run to more than one line - both share
+ * the same class, so the mode `<select>`'s `change` handler (and `getQuery`)
+ * only need the tag name to tell them apart. Only the currently-visible one
+ * of the pair is ever `required` (toggled alongside `hidden` by the mode
+ * `change` handler): a `required` field that's merely hidden, rather than
+ * also un-required, still blocks the form's validity even though the user
+ * has no way to see or fill it.
+ *
+ * The `change` handler also checks `isExemptedByAncestorHasProperty` before
+ * (re-)asserting `required` on the now-visible control: nested as an
+ * optional object property's own child widget, an enclosing "Has property"
+ * already provides a complete constraint on its own (the same relief
+ * `setDescendantsRequired` gives other `required`-attribute controls), but
+ * that relief is a one-time toggle applied *before* `revalidateDescendants`
+ * re-dispatches a synthetic `change` on this very `<select>` - without this
+ * check, that synthetic event would immediately reassert `required` on
+ * whichever control the current mode makes visible, undoing the exemption
+ * `setDescendantsRequired` had just granted.
  * @type {SearchTypeObject}
  */
 const blobHTMLSearchType = {
@@ -29,8 +51,11 @@ const blobHTMLSearchType = {
           const mode = /** @type {HTMLSelectElement|undefined} */ (
             findOwnControl(this, 'select.jsoeSearchBlobHTMLMode')
           )?.value;
-          const value = /** @type {HTMLInputElement|undefined} */ (
-            findOwnControl(this, 'input.jsoeSearchBlobHTMLValue')
+          const value = /** @type {HTMLInputElement|HTMLTextAreaElement|undefined} */ (
+            findOwnControl(
+              this,
+              `${mode === 'fullText' ? 'textarea' : 'input'}.jsoeSearchBlobHTMLValue`
+            )
           )?.value;
           if (!value || !mode) {
             return undefined;
@@ -46,7 +71,33 @@ const blobHTMLSearchType = {
       ['span', {class: 'searchLabel'}, [label]],
       ['label', [
         'Mode: ',
-        ['select', {name: `${name}-mode`, class: 'jsoeSearchBlobHTMLMode'}, [
+        ['select', {
+          name: `${name}-mode`,
+          class: 'jsoeSearchBlobHTMLMode',
+          $on: {
+            change () {
+              const container = this.closest('jsoe-search-blob-html');
+              const input = /** @type {HTMLInputElement|null|undefined} */ (
+                container?.querySelector('input.jsoeSearchBlobHTMLValue')
+              );
+              const textarea = /** @type {HTMLTextAreaElement|null|undefined} */ (
+                container?.querySelector('textarea.jsoeSearchBlobHTMLValue')
+              );
+              const isFullText = /** @type {HTMLSelectElement} */ (this).value ===
+                'fullText';
+              const exempted = container !== null &&
+                isExemptedByAncestorHasProperty(container);
+              if (input) {
+                input.hidden = isFullText;
+                input.required = !isFullText && !exempted;
+              }
+              if (textarea) {
+                textarea.hidden = !isFullText;
+                textarea.required = isFullText && !exempted;
+              }
+            }
+          }
+        }, [
           ['option', {value: 'xpath'}, ['XPath']],
           ['option', {value: 'cssSelector'}, ['CSS selector']],
           ['option', {value: 'fullText'}, ['Full text search']],
@@ -55,7 +106,13 @@ const blobHTMLSearchType = {
       ]],
       ['label', [
         'Value: ',
-        ['input', {type: 'text', name: `${name}-value`, class: 'jsoeSearchBlobHTMLValue'}]
+        ['input', {
+          type: 'text', name: `${name}-value`, class: 'jsoeSearchBlobHTMLValue',
+          required: true
+        }],
+        ['textarea', {
+          name: `${name}-value`, class: 'jsoeSearchBlobHTMLValue', hidden: true
+        }]
       ]]
     ]];
   },

package/src/search/subTypes/recordSearchType.js

@@ -1,4 +1,7 @@
-import {buildPathLabel, buildCheckbox, readCheckbox} from '../searchUtils.js';
+import {
+  buildPathLabel, buildCheckbox, readCheckbox, buildOptInFieldset,
+  readOptInChecked, wireOptInFieldset, buildAtLeastOneSentinel, syncAtLeastOneCheck
+} from '../searchUtils.js';
 import {makeMapRecordJointLeaf} from '../queryTreeBuilders.js';
 import {findSearchElement, getQueryViaElement, hasGetQuery} from '../searchElementUtils.js';
 import {buildSearchWidget} from '../searchDispatch.js';
@@ -7,6 +10,16 @@ import {buildSearchWidget} from '../searchDispatch.js';
  * @typedef {import('../searchDispatch.js').SearchTypeObject} SearchTypeObject
  */
 
+/**
+ * @param {Element} root - a `jsoe-search-record` element
+ * @returns {void}
+ */
+function syncKeyValueValidity (root) {
+  syncAtLeastOneCheck(
+    root, () => readOptInChecked(root, 'key') || readOptInChecked(root, 'value')
+  );
+}
+
 /**
  * Record search is "key-schema search AND/OR value-schema search,"
  * structurally unlike object's additive "has property" (search plan §1) -
@@ -15,7 +28,10 @@ import {buildSearchWidget} from '../searchDispatch.js';
  * whether a match must come from the *same* entry ("has key 2-4 and value
  * 7-9", README) via the "joint" toggle on the resulting `mapRecordJoint`
  * leaf - also used for `looseRecord`, aliased to this same module in
- * `searchDispatch.js` since the search semantics are identical.
+ * `searchDispatch.js` since the search semantics are identical. Key and
+ * value each get their own `buildOptInFieldset` (see `mapSearchType.js`'s
+ * matching doc for why), but leaving *both* unopted-in is itself invalid via
+ * `buildAtLeastOneSentinel`.
  * @type {SearchTypeObject}
  */
 const recordSearchType = {
@@ -47,15 +63,21 @@ const recordSearchType = {
       dataset: {searchPath: path, searchKind: 'record'},
       title: label,
       $define: {
+        /** @this {HTMLElement} */
+        connectedCallback () {
+          wireOptInFieldset(this, 'key', () => syncKeyValueValidity(this));
+          wireOptInFieldset(this, 'value', () => syncKeyValueValidity(this));
+          syncKeyValueValidity(this);
+        },
         /** @this {HTMLElement} */
         getQuery () {
           const searchPath = this.dataset.searchPath ?? '';
           const keyEl = findSearchElement(this, `${searchPath}/*key`);
           const valueEl = findSearchElement(this, `${searchPath}/*value`);
-          const keyQuery = keyEl && hasGetQuery(keyEl)
+          const keyQuery = keyEl && hasGetQuery(keyEl) && readOptInChecked(this, 'key')
             ? keyEl.getQuery()
             : undefined;
-          const valueQuery = valueEl && hasGetQuery(valueEl)
+          const valueQuery = valueEl && hasGetQuery(valueEl) && readOptInChecked(this, 'value')
             ? valueEl.getQuery()
             : undefined;
           if (!keyQuery && !valueQuery) {
@@ -67,15 +89,14 @@ const recordSearchType = {
       }
     }, [
       ['span', {class: 'searchLabel'}, [label]],
-      ['div', {class: 'searchRecordKey'}, [
-        ['span', ['Key matches: ']],
-        keyArr
-      ]],
-      ['div', {class: 'searchRecordValue'}, [
-        ['span', ['Value matches: ']],
-        valueArr
-      ]],
-      buildCheckbox({name: `${name}-joint`, label: 'Require same entry'})
+      ...buildOptInFieldset({
+        name: `${name}-key`, key: 'key', label: 'Key matches', children: [keyArr]
+      }),
+      ...buildOptInFieldset({
+        name: `${name}-value`, key: 'value', label: 'Value matches', children: [valueArr]
+      }),
+      buildCheckbox({name: `${name}-joint`, label: 'Require same entry'}),
+      buildAtLeastOneSentinel()
     ]];
   },
   getQuery: getQueryViaElement

package/src/search/subTypes/tupleSearchType.js

@@ -1,4 +1,8 @@
-import {buildPathLabel, buildLengthSizeControls, readLengthSizeQuery} from '../searchUtils.js';
+import {
+  buildPathLabel, buildLengthSizeControls, readLengthSizeQuery,
+  buildOptInFieldset, readOptInChecked, wireOptInFieldset,
+  buildAtLeastOneSentinel, syncAtLeastOneCheck
+} from '../searchUtils.js';
 import {combineAnd} from '../queryTreeBuilders.js';
 import {findSearchElement, getQueryViaElement, hasGetQuery} from '../searchElementUtils.js';
 import {buildSearchWidget} from '../searchDispatch.js';
@@ -7,6 +11,21 @@ import {buildSearchWidget} from '../searchDispatch.js';
  * @typedef {import('../searchDispatch.js').SearchTypeObject} SearchTypeObject
  */
 
+/**
+ * @param {Element} root - a `jsoe-search-tuple` element
+ * @returns {void}
+ */
+function syncTupleValidity (root) {
+  const itemCount = Number(/** @type {HTMLElement} */ (root).dataset.itemCount ?? '0');
+  const hasRest = /** @type {HTMLElement} */ (root).dataset.hasRest === 'true';
+  syncAtLeastOneCheck(root, () => (
+    Array.from({length: itemCount}, (_, idx) => String(idx)).some(
+      (key) => readOptInChecked(root, key)
+    ) ||
+    (hasRest && (readOptInChecked(root, 'rest') || readLengthSizeQuery(root, '') !== undefined))
+  ));
+}
+
 /**
  * Each fixed position gets its own control from `.items[i]`, not one
  * control repeated per element (search plan §1 - unlike the value-editing
@@ -19,6 +38,9 @@ import {buildSearchWidget} from '../searchDispatch.js';
  * items.length`, no sparse toggle - not applicable to a tuple), and the
  * `rest` element itself recurses into its own search widget under the same
  * `*` path-segment convention `arraySearchType.js` uses for its element.
+ * Leaving every position, the rest element, and (when present) the length
+ * unconfigured at once is invalid (`buildAtLeastOneSentinel`), the same as
+ * `arraySearchType.js`/`setSearchType.js`/`filelistSearchType.js`.
  * @type {SearchTypeObject}
  */
 const tupleSearchType = {
@@ -54,22 +76,24 @@ const tupleSearchType = {
     /** @type {import('../../types.js').JamilihArray[]} */
     const children = [['span', {class: 'searchLabel'}, [label]]];
     itemArrs.forEach((itemArr, idx) => {
-      children.push(['div', {class: 'searchTupleItem'}, [
-        ['span', [`Position ${idx}: `]],
-        itemArr
-      ]]);
+      children.push(...buildOptInFieldset({
+        name: `${name}-${idx}`, key: String(idx), label: `Position ${idx} matches`,
+        children: [itemArr]
+      }));
     });
     if (rest) {
+      const restChild = /** @type {import('../../types.js').JamilihArray} */ (restArr);
       children.push(
         ...buildLengthSizeControls({
           name, min: items.length, max: undefined, includeSparse: false
         }),
-        ['div', {class: 'searchTupleRest'}, [
-          ['span', ['Rest element matches: ']],
-          /** @type {import('../../types.js').JamilihArray} */ (restArr)
-        ]]
+        ...buildOptInFieldset({
+          name: `${name}-rest`, key: 'rest', label: 'Rest element matches',
+          children: [restChild]
+        })
       );
     }
+    children.push(buildAtLeastOneSentinel());
 
     return ['jsoe-search-tuple', {
       dataset: {
@@ -84,11 +108,28 @@ const tupleSearchType = {
         //   defined, so a second tuple widget on the same page would
         //   otherwise silently reuse the first tuple's item count/rest-ness.
         /** @this {HTMLElement} */
+        connectedCallback () {
+          const itemCount = Number(this.dataset.itemCount ?? '0');
+          Array.from({length: itemCount}, (_, idx) => String(idx)).forEach(
+            (key) => wireOptInFieldset(this, key, () => syncTupleValidity(this))
+          );
+          if (this.dataset.hasRest === 'true') {
+            wireOptInFieldset(this, 'rest', () => syncTupleValidity(this));
+            this.querySelector('input.jsoeSearchSize')?.addEventListener(
+              'input', () => syncTupleValidity(this)
+            );
+          }
+          syncTupleValidity(this);
+        },
+        /** @this {HTMLElement} */
         getQuery () {
           const searchPath = this.dataset.searchPath ?? '';
           const itemCount = Number(this.dataset.itemCount ?? '0');
           const hasRest = this.dataset.hasRest === 'true';
           const itemLeaves = Array.from({length: itemCount}, (_, idx) => {
+            if (!readOptInChecked(this, String(idx))) {
+              return undefined;
+            }
             const itemEl = findSearchElement(this, `${searchPath}/${idx}`);
             return itemEl && hasGetQuery(itemEl) ? itemEl.getQuery() : undefined;
           });
@@ -97,7 +138,7 @@ const tupleSearchType = {
           }
           const lengthLeaf = readLengthSizeQuery(this, searchPath);
           const restEl = findSearchElement(this, `${searchPath}/*`);
-          const restLeaf = restEl && hasGetQuery(restEl)
+          const restLeaf = restEl && hasGetQuery(restEl) && readOptInChecked(this, 'rest')
             ? restEl.getQuery()
             : undefined;
           return combineAnd([...itemLeaves, lengthLeaf, restLeaf]);

package/src/search/superTypes/SpecialRealNumberSearchType.js

@@ -32,7 +32,7 @@ const SpecialRealNumberSearchType = {
     }, [
       ['span', {class: 'searchLabel'}, [label]],
       buildMultiSelect({
-        name, options: ['Infinity', '-Infinity', '-0']
+        name, options: ['Infinity', '-Infinity', '-0'], required: true
       })
     ]];
   },

package/src/search/superTypes/buffersourceSearchType.js

@@ -1,4 +1,6 @@
-import {buildPathLabel, buildRangeInputsPair, readRangeInputsPair} from '../searchUtils.js';
+import {
+  buildPathLabel, buildRangeInputsPair, readRangeInputsPair, syncRangeValidity
+} from '../searchUtils.js';
 import {makeRangeLeaf} from '../queryTreeBuilders.js';
 import {getQueryViaElement} from '../searchElementUtils.js';
 
@@ -24,6 +26,10 @@ const buffersourceSearchType = {
       dataset: {searchPath: path, searchKind: 'buffersource'},
       title: label,
       $define: {
+        /** @this {HTMLElement} */
+        connectedCallback () {
+          syncRangeValidity(this);
+        },
         /** @this {HTMLElement} */
         getQuery () {
           const {gte, lte} = readRangeInputsPair(this);

package/src/search/unions/unionFamilySearchType.js

@@ -110,6 +110,14 @@ export function makeUnionFamilySearchType ({tagName, discriminated}) {
           ['select', {
             name,
             class: 'jsoeSearchTypeOf',
+            // The "(any)" placeholder's `value: ''` below is exactly what
+            // native `required` treats as "nothing selected", so choosing
+            // any real branch already satisfies it - no custom validity
+            // code needed. A union/xor/discriminatedUnion has no other
+            // possible constraint (unlike `mapSearchType.js`'s key/value or
+            // `objectSearchType.js`'s properties), so this alone is "no
+            // absent values" for the whole widget, not just one facet of it.
+            required: true,
             $on: {
               change () {
                 if (!isSelectElement(this)) {