@es-joy/jsoe 0.29.0 → 0.30.0

package/src/search/searchElementUtils.js

@@ -1,10 +1,13 @@
 import {
   buildPathLabel, buildCheckbox, readCheckbox,
   buildLiteralRegexControls, readLiteralRegexQuery,
-  buildRangeInputsPair, readRangeInputsPair,
-  buildTriStateSelect, readTriStateSelect
+  buildRangeInputsPair, readRangeInputsPair, syncRangeValidity,
+  buildTriStateSelect, readTriStateSelect,
+  buildOptInFieldset, readOptInChecked, wireOptInFieldset,
+  buildAtLeastOneSentinel, syncAtLeastOneCheck
 } from './searchUtils.js';
 import {combineAnd, makeRangeLeaf, makeDomShapeLeaf} from './queryTreeBuilders.js';
+import regexpType from '../fundamentalTypes/regexpType.js';
 
 /**
  * Locates a built search element by the JSON-Pointer path it was built for.
@@ -62,7 +65,12 @@ export function hasGetQuery (el) {
  * leaves (`undefined`/`void`, `null`, `NaN`): the only meaningful question
  * is whether the path is present at all, which only matters once the path
  * is optional or nested in a union - so all three share one tiny, single-
- * checkbox implementation, differing only in tag name/label.
+ * checkbox implementation, differing only in tag name/label. Unlike every
+ * other leaf, this one is never left for the user to configure at all: its
+ * checkbox is pre-checked and `disabled` (`buildCheckbox`'s doc), since a
+ * type with only one possible value has nothing else worth offering a
+ * choice between - it's simply valid, unconditionally, the moment it
+ * exists, rather than needing a `required`-style rule of its own.
  * @param {{tagName: string}} cfg
  * @returns {import('./searchDispatch.js').SearchTypeObject}
  */
@@ -85,7 +93,9 @@ export function makePresenceOnlySearchType ({tagName}) {
         }
       }, [
         ['span', {class: 'searchLabel'}, [label]],
-        buildCheckbox({name, label: `Require ${label} present`})
+        buildCheckbox({
+          name, label: `Require ${label} present`, checked: true, disabled: true
+        })
       ]];
     },
     getQuery: getQueryViaElement
@@ -113,30 +123,51 @@ function buildErrorFamilyChildren ({label, name}) {
   /** @type {import('./searchUtils.js').JamilihArray[]} */
   const children = [['span', {class: 'searchLabel'}, [label]]];
   errorStringProps.forEach((prop) => {
-    children.push(['div', {class: `errorProp-${prop}`}, [
-      ['span', [`${prop}: `]],
-      buildLiteralRegexControls({name: `${name}-${prop}`, key: prop})
-    ]]);
+    children.push(...buildOptInFieldset({
+      name: `${name}-${prop}`, key: prop, label: prop,
+      children: [buildLiteralRegexControls({
+        name: `${name}-${prop}`, key: prop, flagOptions: regexpType.allowedFlags
+      })]
+    }));
   });
   errorNumberProps.forEach((prop) => {
-    children.push(['div', {class: `errorProp-${prop}`}, [
-      ['span', [`${prop}: `]],
-      ...buildRangeInputsPair({name: `${name}-${prop}`, key: prop})
-    ]]);
+    children.push(...buildOptInFieldset({
+      name: `${name}-${prop}`, key: prop, label: prop,
+      children: buildRangeInputsPair({name: `${name}-${prop}`, key: prop})
+    }));
   });
+  children.push(buildAtLeastOneSentinel());
   return children;
 }
 
+/**
+ * @param {Element} root - a `jsoe-search-error`/`jsoe-search-errors-special`
+ *   element
+ * @returns {void}
+ */
+function syncErrorFamilyValidity (root) {
+  syncAtLeastOneCheck(
+    root,
+    () => [...errorStringProps, ...errorNumberProps].some(
+      (prop) => readOptInChecked(root, prop)
+    )
+  );
+}
+
 /**
  * Factory for `errorSearchType.js`/`errorsSpecialSearchType.js`, offering
  * literal/regex search of child string properties, numeric of number
- * children (README) - one `buildLiteralRegexControls`/`buildRangeInputsPair` pair
- * per known property (`key`-distinguished so they coexist in one widget;
- * see those helpers' docs), combined via `$and`. `.cause` (a recursive,
- * arbitrarily-typed property) and `errorsSpecial`'s `AggregateError.errors`
- * array are deliberately left out of this pass - the README's bullet asks
- * only for the flat string/number children, and open-ended recursion into
- * an arbitrary `cause` chain is a materially bigger feature than "the same
+ * children (README) - one `buildLiteralRegexControls`/`buildRangeInputsPair`
+ * pair per known property (`key`-distinguished so they coexist in one
+ * widget; see those helpers' docs), each wrapped in its own
+ * `buildOptInFieldset` (so picking, say, just `message` doesn't also force
+ * `name`/`fileName`/`stack`/`lineNumber`/`columnNumber` to be filled in),
+ * combined via `$and`, with `buildAtLeastOneSentinel` requiring at least one
+ * of the six to actually be opted into. `.cause` (a recursive, arbitrarily-
+ * typed property) and `errorsSpecial`'s `AggregateError.errors` array are
+ * deliberately left out of this pass - the README's bullet asks only for
+ * the flat string/number children, and open-ended recursion into an
+ * arbitrary `cause` chain is a materially bigger feature than "the same
  * shape, twice more".
  * @param {{tagName: string}} cfg
  * @returns {import('./searchDispatch.js').SearchTypeObject}
@@ -150,13 +181,26 @@ export function makeErrorFamilySearchType ({tagName}) {
         dataset: {searchPath: path, searchKind: tagName},
         title: label,
         $define: {
+          /** @this {HTMLElement} */
+          connectedCallback () {
+            errorNumberProps.forEach((prop) => syncRangeValidity(this, prop));
+            [...errorStringProps, ...errorNumberProps].forEach((prop) => (
+              wireOptInFieldset(this, prop, () => syncErrorFamilyValidity(this))
+            ));
+            syncErrorFamilyValidity(this);
+          },
           /** @this {HTMLElement} */
           getQuery () {
             const searchPath = this.dataset.searchPath ?? '';
             const stringLeaves = errorStringProps.map((prop) => (
-              readLiteralRegexQuery(this, `${searchPath}/${prop}`, prop)
+              readOptInChecked(this, prop)
+                ? readLiteralRegexQuery(this, `${searchPath}/${prop}`, prop)
+                : undefined
             ));
             const numberLeaves = errorNumberProps.map((prop) => {
+              if (!readOptInChecked(this, prop)) {
+                return undefined;
+              }
               const {gte, lte} = readRangeInputsPair(this, prop);
               if (gte === '' && lte === '') {
                 return undefined;
@@ -188,10 +232,10 @@ function buildDomShapeChildren ({
   /** @type {import('./searchUtils.js').JamilihArray[]} */
   const children = [['span', {class: 'searchLabel'}, [label]]];
   dimensionKeys.forEach((dim) => {
-    children.push(['div', {class: `domShapeDimension-${dim}`}, [
-      ['span', [`${dim}: `]],
-      ...buildRangeInputsPair({name: `${name}-${dim}`, key: dim})
-    ]]);
+    children.push(...buildOptInFieldset({
+      name: `${name}-${dim}`, key: dim, label: dim,
+      children: buildRangeInputsPair({name: `${name}-${dim}`, key: dim})
+    }));
   });
   if (includeReadonly) {
     children.push(['label', [
@@ -211,9 +255,25 @@ function buildDomShapeChildren ({
       })
     ]]);
   }
+  children.push(buildAtLeastOneSentinel());
   return children;
 }
 
+/**
+ * @param {{
+ *   root: Element, dimensionKeys: string[], includeReadonly: boolean,
+ *   includeDimensionCheck: boolean
+ * }} cfg
+ * @returns {void}
+ */
+function syncDomShapeValidity ({root, dimensionKeys, includeReadonly, includeDimensionCheck}) {
+  syncAtLeastOneCheck(root, () => (
+    dimensionKeys.some((dim) => readOptInChecked(root, dim)) ||
+    (includeReadonly && readTriStateSelect(root, 'readonly') !== undefined) ||
+    (includeDimensionCheck && readTriStateSelect(root, 'dimension') !== undefined)
+  ));
+}
+
 /**
  * Factory for `domrectSearchType.js`/`dompointSearchType.js`/
  * `dommatrixSearchType.js`: numeric search ranges for children; "Is/Is not
@@ -245,12 +305,36 @@ export function makeDomShapeSearchType ({
         dataset: {searchPath: path, searchKind: tagName},
         title: label,
         $define: {
+          /** @this {HTMLElement} */
+          connectedCallback () {
+            const syncValidity = () => syncDomShapeValidity({
+              root: this, dimensionKeys, includeReadonly, includeDimensionCheck
+            });
+            dimensionKeys.forEach((dim) => {
+              syncRangeValidity(this, dim);
+              wireOptInFieldset(this, dim, syncValidity);
+            });
+            if (includeReadonly) {
+              this.querySelector('select.jsoeSearchTriState--readonly')?.addEventListener(
+                'change', syncValidity
+              );
+            }
+            if (includeDimensionCheck) {
+              this.querySelector('select.jsoeSearchTriState--dimension')?.addEventListener(
+                'change', syncValidity
+              );
+            }
+            syncValidity();
+          },
           /** @this {HTMLElement} */
           getQuery () {
             const searchPath = this.dataset.searchPath ?? '';
             /** @type {{[dim: string]: import('./queryTree.js').QueryRangeLeaf}} */
             const dimensions = {};
             dimensionKeys.forEach((dim) => {
+              if (!readOptInChecked(this, dim)) {
+                return;
+              }
               const {gte, lte} = readRangeInputsPair(this, dim);
               if (gte === '' && lte === '') {
                 return;