@es-joy/jsoe 0.29.0 → 0.31.0

package/src/search/fundamentalTypes/domexceptionSearchType.js

@@ -1,19 +1,37 @@
 import {domExceptionNames} from '../../fundamentalTypes/domexceptionType.js';
-import {buildPathLabel, buildMultiSelect, readMultiSelect, buildLiteralRegexControls, readLiteralRegexQuery} from '../searchUtils.js';
+import {
+  buildPathLabel, buildMultiSelect, readMultiSelect, buildLiteralRegexControls,
+  readLiteralRegexQuery, buildOptInFieldset, readOptInChecked, wireOptInFieldset,
+  buildAtLeastOneSentinel, syncAtLeastOneCheck
+} from '../searchUtils.js';
 import {makeMultiSelectLeaf, combineAnd} from '../queryTreeBuilders.js';
 import {getQueryViaElement} from '../searchElementUtils.js';
+import regexpType from '../../fundamentalTypes/regexpType.js';
 
 /**
  * @typedef {import('../searchDispatch.js').SearchTypeObject} SearchTypeObject
  */
 
+/**
+ * @param {Element} root - a `jsoe-search-domexception` element
+ * @returns {void}
+ */
+function syncDomexceptionValidity (root) {
+  syncAtLeastOneCheck(
+    root, () => readMultiSelect(root).length > 0 || readOptInChecked(root, 'message')
+  );
+}
+
 /**
  * DOMException: Literal/Regex search of child string properties; also
  * pull-down of name for DOMException (README) - `.name` gets the
  * multi-select pull-down (its standard predefined values, imported as-is
  * from `domexceptionType.js`'s own `domExceptionNames` export rather than a
- * second copy of the list), `.message` gets the usual literal/regex/
- * does-not-contain control, combined via `$and`.
+ * second copy of the list, and already properly optional on its own - an
+ * empty selection needs no opt-in gate), `.message` gets the usual literal/
+ * regex/does-not-contain control (wrapped in `buildOptInFieldset`, since
+ * that one *does* carry a `required` Value input), combined via `$and`.
+ * `buildAtLeastOneSentinel` requires at least one of the two.
  * @type {SearchTypeObject}
  */
 const domexceptionSearchType = {
@@ -24,6 +42,14 @@ const domexceptionSearchType = {
       dataset: {searchPath: path, searchKind: 'domexception'},
       title: label,
       $define: {
+        /** @this {HTMLElement} */
+        connectedCallback () {
+          this.querySelector('select.jsoeSearchMultiSelect')?.addEventListener(
+            'change', () => syncDomexceptionValidity(this)
+          );
+          wireOptInFieldset(this, 'message', () => syncDomexceptionValidity(this));
+          syncDomexceptionValidity(this);
+        },
         /** @this {HTMLElement} */
         getQuery () {
           const searchPath = this.dataset.searchPath ?? '';
@@ -31,9 +57,9 @@ const domexceptionSearchType = {
           const nameLeaf = selectedNames.length
             ? makeMultiSelectLeaf(`${searchPath}/name`, {$in: selectedNames})
             : undefined;
-          const messageLeaf = readLiteralRegexQuery(
-            this, `${searchPath}/message`, 'message'
-          );
+          const messageLeaf = readOptInChecked(this, 'message')
+            ? readLiteralRegexQuery(this, `${searchPath}/message`, 'message')
+            : undefined;
           return combineAnd([nameLeaf, messageLeaf]);
         }
       }
@@ -43,10 +69,13 @@ const domexceptionSearchType = {
         ['span', ['Name: ']],
         buildMultiSelect({name: `${name}-name`, options: domExceptionNames})
       ]],
-      ['div', {class: 'domexceptionMessage'}, [
-        ['span', ['Message: ']],
-        buildLiteralRegexControls({name: `${name}-message`, key: 'message'})
-      ]]
+      ...buildOptInFieldset({
+        name: `${name}-message`, key: 'message', label: 'Message',
+        children: [buildLiteralRegexControls({
+          name: `${name}-message`, key: 'message', flagOptions: regexpType.allowedFlags
+        })]
+      }),
+      buildAtLeastOneSentinel()
     ]];
   },
   getQuery: getQueryViaElement

package/src/search/fundamentalTypes/enumSearchType.js

@@ -19,6 +19,10 @@ import {getQueryViaElement} from '../searchElementUtils.js';
  * from its values (unlike a plain `z.enum([...])`, where they're the same)
  * still gets a usable widget here, just not that extra key-vs-value mode
  * yet; `values`'s keys are shown alongside their value as a hint.
+ * `buildMultiSelect`'s `required` leaves the whole selection invalid until
+ * at least one value is picked, natively (no build-time-empty gap like
+ * `buildRangeInputsPair`'s custom validity needed a `connectedCallback`
+ * for - `<select multiple required>` is evaluated by the browser itself).
  * @type {SearchTypeObject}
  */
 const enumSearchType = {
@@ -49,7 +53,7 @@ const enumSearchType = {
       }
     }, [
       ['span', {class: 'searchLabel'}, [label]],
-      buildMultiSelect({name, options})
+      buildMultiSelect({name, options, required: true})
     ]];
   },
   getQuery: getQueryViaElement

package/src/search/fundamentalTypes/fileSearchType.js

@@ -1,20 +1,48 @@
-import {buildPathLabel, buildLiteralRegexControls, readLiteralRegexQuery} from '../searchUtils.js';
+import {
+  buildPathLabel, buildLiteralRegexControls, readLiteralRegexQuery,
+  buildOptInFieldset, readOptInChecked, wireOptInFieldset,
+  buildAtLeastOneSentinel, syncAtLeastOneCheck
+} from '../searchUtils.js';
+import {combineAnd} from '../queryTreeBuilders.js';
 import {getQueryViaElement} from '../searchElementUtils.js';
+import regexpType from '../../fundamentalTypes/regexpType.js';
 
 /**
  * @typedef {import('../searchDispatch.js').SearchTypeObject} SearchTypeObject
  */
 
+/**
+ * @param {Element} root - a `jsoe-search-file` element
+ * @returns {void}
+ */
+function syncFileValidity (root) {
+  syncAtLeastOneCheck(
+    root, () => readOptInChecked(root, 'name') || readOptInChecked(root, 'type')
+  );
+}
+
 /**
  * File: OR literal or regex search/Does Not contain search (README, grouped
  * with string/StringObject/Blob/regexp-source/symbol-description) - against
- * the File's `.name`, a value-level facet the schema itself carries no
- * constraint for (`SzFile` only has `min`/`max`/`mime`), the same way
- * `symbolSearchType.js` targets `.description` rather than anything the
- * schema declares. `SzFile`'s own `min`/`max` (byte size) is left for a
- * later pass - the README's literal/regex bullet doesn't ask for a size
- * range here, and README explicitly reserves that shape of control
- * ("OR Range/Is Not Range") for `buffersource` instead.
+ * both the File's `.name` and its `.type` (content/MIME type, the same
+ * facet `blobSearchType.js` targets for `Blob`), each a value-level facet
+ * the schema itself carries no constraint for (`SzFile` only has
+ * `min`/`max`/`mime`, and `mime` is a fixed *allow-list* for validation, not
+ * a per-instance value to search against). `name`/`type` sub-paths
+ * distinguish the two facets (`${path}/name`, `${path}/type`, matching the
+ * real `File` property each reads back), the same convention
+ * `errorSearchType.js` uses for its own multiple flat facets, combined via
+ * `$and`. Each facet is independently opt-in (`buildOptInFieldset`, so
+ * checking against just the name, or just the content type, is as easy as
+ * checking against both), but leaving *both* unopted-in is itself invalid
+ * (`buildAtLeastOneSentinel`) - the same "key or value, not necessarily
+ * both" shape `mapSearchType.js`/`recordSearchType.js` use. `SzFile`'s own
+ * `min`/`max` (byte size) is left for a later pass - the README's literal/
+ * regex bullet doesn't ask for a size range here, and README explicitly
+ * reserves that shape of control ("OR Range/Is Not Range") for
+ * `buffersource` instead. `filelistSearchType.js` recurses its element
+ * schema through this same module, so a `FileList`'s per-file search gets
+ * both facets for free.
  * @type {SearchTypeObject}
  */
 const fileSearchType = {
@@ -25,14 +53,39 @@ const fileSearchType = {
       dataset: {searchPath: path, searchKind: 'file'},
       title: label,
       $define: {
+        /** @this {HTMLElement} */
+        connectedCallback () {
+          wireOptInFieldset(this, 'name', () => syncFileValidity(this));
+          wireOptInFieldset(this, 'type', () => syncFileValidity(this));
+          syncFileValidity(this);
+        },
         /** @this {HTMLElement} */
         getQuery () {
-          return readLiteralRegexQuery(this, this.dataset.searchPath ?? '');
+          const searchPath = this.dataset.searchPath ?? '';
+          const nameLeaf = readOptInChecked(this, 'name')
+            ? readLiteralRegexQuery(this, `${searchPath}/name`, 'name')
+            : undefined;
+          const typeLeaf = readOptInChecked(this, 'type')
+            ? readLiteralRegexQuery(this, `${searchPath}/type`, 'type')
+            : undefined;
+          return combineAnd([nameLeaf, typeLeaf]);
         }
       }
     }, [
-      ['span', {class: 'searchLabel'}, [`${label} (name)`]],
-      buildLiteralRegexControls({name})
+      ['span', {class: 'searchLabel'}, [label]],
+      ...buildOptInFieldset({
+        name: `${name}-name`, key: 'name', label: 'Name',
+        children: [buildLiteralRegexControls({
+          name: `${name}-name`, key: 'name', flagOptions: regexpType.allowedFlags
+        })]
+      }),
+      ...buildOptInFieldset({
+        name: `${name}-type`, key: 'type', label: 'Content type',
+        children: [buildLiteralRegexControls({
+          name: `${name}-type`, key: 'type', flagOptions: regexpType.allowedFlags
+        })]
+      }),
+      buildAtLeastOneSentinel()
     ]];
   },
   getQuery: getQueryViaElement

package/src/search/fundamentalTypes/filelistSearchType.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';
@@ -16,6 +20,16 @@ import {buildSearchWidget} from '../searchDispatch.js';
  * }} FilelistOutputSchema
  */
 
+/**
+ * @param {Element} root - a `jsoe-search-filelist` element
+ * @returns {void}
+ */
+function syncFilelistValidity (root) {
+  syncAtLeastOneCheck(
+    root, () => readLengthSizeQuery(root, '') !== undefined || readOptInChecked(root)
+  );
+}
+
 /**
  * Has length/size of <number> (README, grouped with array/set/
  * tuple-with-rest) - no sparse toggle, matching `setSearchType.js`. A
@@ -24,7 +38,10 @@ import {buildSearchWidget} from '../searchDispatch.js';
  * (`src/formats/schema.js`'s `codec`/`filelist` handling); the length
  * bounds and element schema both live on that `output` array shape, whose
  * element recurses into `fileSearchType.js` under the same `*` path-segment
- * convention `arraySearchType.js` uses.
+ * convention `arraySearchType.js` uses. Leaving *both* length/size and the
+ * element match unconfigured is still invalid, though
+ * (`buildAtLeastOneSentinel`), same as `arraySearchType.js`/
+ * `setSearchType.js`.
  * @type {SearchTypeObject}
  */
 const filelistSearchType = {
@@ -47,12 +64,20 @@ const filelistSearchType = {
       dataset: {searchPath: path, searchKind: 'filelist'},
       title: label,
       $define: {
+        /** @this {HTMLElement} */
+        connectedCallback () {
+          wireOptInFieldset(this, '', () => syncFilelistValidity(this));
+          this.querySelector('input.jsoeSearchSize')?.addEventListener(
+            'input', () => syncFilelistValidity(this)
+          );
+          syncFilelistValidity(this);
+        },
         /** @this {HTMLElement} */
         getQuery () {
           const searchPath = this.dataset.searchPath ?? '';
           const lengthLeaf = readLengthSizeQuery(this, searchPath);
           const elementEl = findSearchElement(this, `${searchPath}/*`);
-          const elementLeaf = elementEl && hasGetQuery(elementEl)
+          const elementLeaf = elementEl && hasGetQuery(elementEl) && readOptInChecked(this)
             ? elementEl.getQuery()
             : undefined;
           return combineAnd([lengthLeaf, elementLeaf]);
@@ -66,10 +91,10 @@ const filelistSearchType = {
         max: outputSchema.maxLength,
         includeSparse: false
       }),
-      ['div', {class: 'searchFilelistElement'}, [
-        ['span', ['File matches: ']],
-        elementArr
-      ]]
+      ...buildOptInFieldset({
+        name: `${name}-element`, label: 'File matches', children: [elementArr]
+      }),
+      buildAtLeastOneSentinel()
     ]];
   },
   getQuery: getQueryViaElement

package/src/search/fundamentalTypes/functionSearchType.js

@@ -1,4 +1,7 @@
-import {buildPathLabel} from '../searchUtils.js';
+import {
+  buildPathLabel, 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 +10,16 @@ import {buildSearchWidget} from '../searchDispatch.js';
  * @typedef {import('../searchDispatch.js').SearchTypeObject} SearchTypeObject
  */
 
+/**
+ * @param {Element} root - a `jsoe-search-function` element
+ * @returns {void}
+ */
+function syncFunctionValidity (root) {
+  syncAtLeastOneCheck(
+    root, () => readOptInChecked(root, 'args') || readOptInChecked(root, 'output')
+  );
+}
+
 /**
  * Function; pass on args, return type (README) - recurses into both
  * `.input` (itself a tuple, so its own per-position controls come for free
@@ -15,12 +28,16 @@ import {buildSearchWidget} from '../searchDispatch.js';
  * note that `function` is "fuzzy" in the README and could ship as a
  * minimal stub predates `tupleSearchType.js` existing; now that it does,
  * recursing into `.input` through it is no more work than `.output` alone
- * would have been.
+ * would have been. Each is wrapped in its own `buildOptInFieldset` (an args
+ * tuple's own positions are themselves individually opt-in, so args as a
+ * whole needs the same treatment one level up), with
+ * `buildAtLeastOneSentinel` requiring at least one of the two.
  * @type {SearchTypeObject}
  */
 const functionSearchType = {
   buildUI ({schemaObject, path, typeNamespace, topRoot, types, originalJSON}) {
     const label = buildPathLabel(schemaObject, path);
+    const name = `${typeNamespace}-function`;
     const functionSchemaObject = /** @type {import('zodexy').SzFunction<any, any>} */ (
       schemaObject
     );
@@ -46,15 +63,22 @@ const functionSearchType = {
       dataset: {searchPath: path, searchKind: 'function'},
       title: label,
       $define: {
+        /** @this {HTMLElement} */
+        connectedCallback () {
+          wireOptInFieldset(this, 'args', () => syncFunctionValidity(this));
+          wireOptInFieldset(this, 'output', () => syncFunctionValidity(this));
+          syncFunctionValidity(this);
+        },
         /** @this {HTMLElement} */
         getQuery () {
           const searchPath = this.dataset.searchPath ?? '';
           const argsEl = findSearchElement(this, `${searchPath}/*args`);
           const outputEl = findSearchElement(this, `${searchPath}/*output`);
-          const argsQuery = argsEl && hasGetQuery(argsEl)
+          const argsQuery = argsEl && hasGetQuery(argsEl) && readOptInChecked(this, 'args')
             ? argsEl.getQuery()
             : undefined;
-          const outputQuery = outputEl && hasGetQuery(outputEl)
+          const outputQuery = outputEl && hasGetQuery(outputEl) &&
+            readOptInChecked(this, 'output')
             ? outputEl.getQuery()
             : undefined;
           return combineAnd([argsQuery, outputQuery]);
@@ -62,14 +86,14 @@ const functionSearchType = {
       }
     }, [
       ['span', {class: 'searchLabel'}, [label]],
-      ['div', {class: 'searchFunctionArgs'}, [
-        ['span', ['Args match: ']],
-        argsArr
-      ]],
-      ['div', {class: 'searchFunctionOutput'}, [
-        ['span', ['Return value matches: ']],
-        outputArr
-      ]]
+      ...buildOptInFieldset({
+        name: `${name}-args`, key: 'args', label: 'Args match', children: [argsArr]
+      }),
+      ...buildOptInFieldset({
+        name: `${name}-output`, key: 'output', label: 'Return value matches',
+        children: [outputArr]
+      }),
+      buildAtLeastOneSentinel()
     ]];
   },
   getQuery: getQueryViaElement

package/src/search/fundamentalTypes/mapSearchType.js

@@ -1,4 +1,8 @@
-import {buildPathLabel, buildCheckbox, readCheckbox, buildLengthSizeControls, readLengthSizeQuery} from '../searchUtils.js';
+import {
+  buildPathLabel, buildCheckbox, readCheckbox, buildLengthSizeControls,
+  readLengthSizeQuery, buildOptInFieldset, readOptInChecked, wireOptInFieldset,
+  buildAtLeastOneSentinel, syncAtLeastOneCheck
+} from '../searchUtils.js';
 import {makeMapRecordJointLeaf, combineAnd} from '../queryTreeBuilders.js';
 import {findSearchElement, getQueryViaElement, hasGetQuery} from '../searchElementUtils.js';
 import {buildSearchWidget} from '../searchDispatch.js';
@@ -7,6 +11,17 @@ import {buildSearchWidget} from '../searchDispatch.js';
  * @typedef {import('../searchDispatch.js').SearchTypeObject} SearchTypeObject
  */
 
+/**
+ * @param {Element} root - a `jsoe-search-map` element
+ * @returns {void}
+ */
+function syncMapValidity (root) {
+  syncAtLeastOneCheck(
+    root, () => readOptInChecked(root, 'key') || readOptInChecked(root, 'value') ||
+      readLengthSizeQuery(root, '') !== undefined
+  );
+}
+
 /**
  * Map, Record: string-type searches of keys, values; ideally would allow
  * search to insist on match of key and value (README) - structurally the
@@ -15,7 +30,14 @@ import {buildSearchWidget} from '../searchDispatch.js';
  * leaf), plus a `lengthSize` control for `min`/`max` (a `Map`, unlike a
  * `Record`, carries its own size bounds in the schema - the same
  * affordance `setSearchType.js` gets for the analogous reason), combined
- * with the joint leaf via `$and`.
+ * with the joint leaf via `$and`. Key and value are each wrapped in their
+ * own `buildOptInFieldset` (so leaving either at "no constraint" doesn't
+ * force it via a `required` control inside), but *leaving all three*
+ * (key, value, and size) unconfigured is itself invalid via
+ * `buildAtLeastOneSentinel` - unlike `recordSearchType.js` (which has no
+ * size control of its own and so needs key or value specifically), a
+ * length/size-only search is already meaningful here, the same as
+ * `arraySearchType.js`/`setSearchType.js`.
  * @type {SearchTypeObject}
  */
 const mapSearchType = {
@@ -47,16 +69,25 @@ const mapSearchType = {
       dataset: {searchPath: path, searchKind: 'map'},
       title: label,
       $define: {
+        /** @this {HTMLElement} */
+        connectedCallback () {
+          wireOptInFieldset(this, 'key', () => syncMapValidity(this));
+          wireOptInFieldset(this, 'value', () => syncMapValidity(this));
+          this.querySelector('input.jsoeSearchSize')?.addEventListener(
+            'input', () => syncMapValidity(this)
+          );
+          syncMapValidity(this);
+        },
         /** @this {HTMLElement} */
         getQuery () {
           const searchPath = this.dataset.searchPath ?? '';
           const lengthLeaf = readLengthSizeQuery(this, 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;
           const jointLeaf = keyQuery || valueQuery
@@ -70,15 +101,14 @@ const mapSearchType = {
       ...buildLengthSizeControls({
         name, min: mapSchemaObject.min, max: mapSchemaObject.max, includeSparse: false
       }),
-      ['div', {class: 'searchMapKey'}, [
-        ['span', ['Key matches: ']],
-        keyArr
-      ]],
-      ['div', {class: 'searchMapValue'}, [
-        ['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/fundamentalTypes/numberSearchType.js

@@ -1,4 +1,7 @@
-import {buildPathLabel, buildRangeInputsPair, readRangeInputsPair, buildTriStateSelect, readTriStateSelect} from '../searchUtils.js';
+import {
+  buildPathLabel, buildRangeInputsPair, readRangeInputsPair, buildTriStateSelect,
+  readTriStateSelect, syncRangeValidity
+} from '../searchUtils.js';
 import {makeRangeLeaf, makeIntegerCheckLeaf, combineAnd} from '../queryTreeBuilders.js';
 import {getQueryViaElement} from '../searchElementUtils.js';
 
@@ -18,6 +21,10 @@ const numberSearchType = {
       dataset: {searchPath: path, searchKind: 'number'},
       title: label,
       $define: {
+        /** @this {HTMLElement} */
+        connectedCallback () {
+          syncRangeValidity(this);
+        },
         /** @this {HTMLElement} */
         getQuery () {
           const searchPath = this.dataset.searchPath ?? '';