@ekzo-dev/bootstrap-addons 5.3.11 → 5.3.13

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ekzo-dev/bootstrap-addons",
   "description": "Aurelia Bootstrap additional component",
-  "version": "5.3.11",
+  "version": "5.3.13",
   "homepage": "https://github.com/ekzo-dev/aurelia-components/tree/main/packages/bootstrap-addons",
   "repository": {
     "type": "git",
@@ -9,21 +9,21 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@ekzo-dev/bootstrap": "~5.3.0",
-    "@ekzo-dev/vanilla-jsoneditor": "^3.10.0",
+    "@ekzo-dev/bootstrap": "~5.3.3",
+    "@ekzo-dev/vanilla-jsoneditor": "~3.11.0",
     "@ekzo-dev/toolkit": "^1.2.4",
-    "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@fortawesome/free-solid-svg-icons": "^7.0.1",
     "@types/json-schema": "^7.0.14",
     "@js-temporal/polyfill": "^0.5.1",
     "ajv": "^8.17.1",
     "ajv-formats": "^3.0.1",
-    "json-schema-library": "^10.5.1"
+    "json-schema-library": "^10.5.2"
   },
   "peerDependencies": {
     "aurelia": "^2.0.0-rc.0",
     "bootstrap": "~5.3.7",
     "@popperjs/core": "^2.11.8",
-    "vanilla-jsoneditor": "~3.7.0",
+    "vanilla-jsoneditor": "~3.11.0",
     "immutable-json-patch": "^6.0.1"
   },
   "main": "src/index.ts",

package/src/forms/duration-input/duration-input.html

@@ -1,9 +1,9 @@
 <template class="${floatingLabel ? 'form-floating' : ''}">
-  <label for="${id}" if.bind="label && !floatingLabel" class="form-label">${label}</label>
+  <label for.one-time="id" if.bind="label && !floatingLabel" class="form-label">${label}</label>
   <fieldset class="${classes}" disabled.bind="disabled">
     <input
       type="text"
-      id="${id}"
+      id.one-time="id"
       required.bind="required"
       value.bind="value"
       form.bind="form & attr"
@@ -22,7 +22,7 @@
     <input type="number" min="0" value.bind="duration.seconds" placeholder="--" />
     <span>${labels.seconds}</span>
   </fieldset>
-  <label for="${id}" if.bind="label && floatingLabel"><span>${label}</span></label>
+  <label for.one-time="id" if.bind="label && floatingLabel"><span>${label}</span></label>
   <div class="invalid-feedback" if.bind="invalidFeedback">${invalidFeedback}</div>
   <div class="valid-feedback" if.bind="validFeedback">${validFeedback}</div>
 </template>

package/src/forms/json-input/json-input.ts

@@ -17,16 +17,17 @@ import type {
   Validator,
 } from 'vanilla-jsoneditor';
 
+import { ProxyObservable } from '@aurelia/runtime';
 import { coerceBoolean } from '@ekzo-dev/toolkit';
 import { JsonEditor } from '@ekzo-dev/vanilla-jsoneditor';
 import { faUpRightAndDownLeftFromCenter } from '@fortawesome/free-solid-svg-icons/faUpRightAndDownLeftFromCenter';
-import Ajv, { ErrorObject, Options, ValidateFunction } from 'ajv';
+import Ajv, { ErrorObject, Options } from 'ajv';
 import Ajv2019 from 'ajv/dist/2019';
 import Ajv2020 from 'ajv/dist/2020';
 import addFormats from 'ajv-formats';
 import { bindable, BindingMode, customElement } from 'aurelia';
 import { parsePath } from 'immutable-json-patch';
-import { compileSchema, JsonError, JsonSchema, SchemaNode } from 'json-schema-library';
+import { CompileOptions, compileSchema, JsonError, SchemaNode } from 'json-schema-library';
 
 const patternMap: Record<string, string> = {
   '^[A-Za-z_][-A-Za-z0-9._]*$': '^[A-Za-z_][\\-A-Za-z0-9._]*$',
@@ -48,11 +49,11 @@ export class BsJsonInput {
   @bindable(coerceBoolean)
   disabled: boolean = false;
 
-  @bindable({ set: (v) => (v === '' || v === true || v === 'true' ? true : v) })
-  jsonSchema?: JSONSchema | boolean;
+  @bindable({ set: (v: BsJsonInput['jsonSchema'] | string) => (v === '' || v === true || v === 'true' ? true : v) })
+  jsonSchema?: JSONSchema | SchemaNode | boolean;
 
   @bindable()
-  ajvOptions: Options = {};
+  validatorOptions?: CompileOptions;
 
   @bindable()
   jsonEditorOptions: JSONEditorPropsOptional = {};
@@ -148,52 +149,24 @@ export class BsJsonInput {
   }
 
   get validator(): Validator | undefined {
-    const { schemaVersion, disabled, ajvOptions, jsonSchema } = this;
-    // use raw object because proxies don't work with private properties
-    const rawThis = this['__raw__'] as BsJsonInput;
-    // use jsonSchema from raw object to pass original (non-proxied) object to AJV
-    const { jsonSchema: rawJsonSchema } = rawThis;
+    const { schemaVersion, disabled, jsonSchema } = this;
+    const rawThis = ProxyObservable.getRaw<BsJsonInput>(this);
 
-    if (jsonSchema && typeof jsonSchema === 'object' && !disabled) {
-      const ajv = rawThis.#initAjv(jsonSchema.$schema as string, ajvOptions);
+    if (disabled) return;
 
-      addFormats(ajv);
-      let validate: ValidateFunction;
-      let schema: SchemaNode;
-
-      try {
-        schema = compileSchema(rawJsonSchema as JsonSchema);
-      } catch (e) {
-        console.error('json-schema-library validator compilation error', e);
-      }
-
-      try {
-        validate = ajv.compile(rawJsonSchema);
-      } catch (e) {
-        console.error('AJV validator compilation error', e);
-      }
+    if (jsonSchema && typeof jsonSchema === 'object') {
+      const schema = rawThis.#initJsonSchemaLibrary();
 
       return (json: unknown): ValidationError[] => {
         // do not validate empty documents
-        if (json === undefined) return [];
+        if (json === undefined || !schema) return [];
 
-        let allErrors: ValidationError[] = [];
-
-        if (schema) {
-          const { errors } = schema.validate(json);
-
-          allErrors = rawThis.#processErrors(errors, json);
-        }
+        const { errors } = schema.validate(json);
 
-        if (validate) {
-          validate(json);
-          allErrors = allErrors.concat(rawThis.#processErrorsAjv(validate.errors, json));
-        }
-
-        return allErrors;
+        return rawThis.#processErrors(errors, json);
       };
-    } else if (schemaVersion != null && !disabled) {
-      const ajv = rawThis.#initAjv(schemaVersion, ajvOptions);
+    } else if (schemaVersion != null) {
+      const ajv = rawThis.#initAjv(schemaVersion);
 
       return (json: unknown): ValidationError[] => {
         // do not validate empty documents
@@ -216,7 +189,7 @@ export class BsJsonInput {
     }
   }
 
-  #initAjv($schema: string, ajvOptions: Options): Ajv {
+  #initAjv($schema: string): Ajv {
     // some regexp's in 2019-09/2020-12 meta-schemas are not compatible with 'v' flag, so update them
     const regExp = (pattern: string) => new RegExp(patternMap[pattern] ?? pattern, 'v');
 
@@ -228,7 +201,7 @@ export class BsJsonInput {
       code: {
         regExp,
       },
-      ...ajvOptions,
+      allErrors: true,
     };
     let ajv: Ajv;
 
@@ -245,9 +218,28 @@ export class BsJsonInput {
         ajv = new Ajv(options);
     }
 
+    addFormats(ajv);
+
     return ajv;
   }
 
+  #initJsonSchemaLibrary(): SchemaNode | undefined {
+    const { jsonSchema } = this;
+
+    // already a SchemaNode
+    if ((jsonSchema as SchemaNode).evaluationPath) {
+      return jsonSchema as SchemaNode;
+    }
+
+    try {
+      return compileSchema(jsonSchema as JSONSchema, this.validatorOptions);
+    } catch (e) {
+      console.error('json-schema-library validator compilation error', e);
+
+      return;
+    }
+  }
+
   #getSchemaDefinitions(schema: JSONSchema): JSONSchemaDefinitions {
     return (schema.$defs ?? schema.definitions) as JSONSchemaDefinitions;
   }
@@ -272,7 +264,7 @@ export class BsJsonInput {
     return (errors || []).map((error) => ({
       path: parsePath(json, error.data.pointer),
       message: error.message || 'Unknown error',
-      severity: 'error' as ValidationSeverity,
+      severity: 'warning' as ValidationSeverity,
     }));
   }
 }

package/src/forms/select/select.html

@@ -1,16 +1,11 @@
 <template class="addon ${floatingLabel ? 'form-floating' : ''}" bs-dropdown>
-  <label for="${id}" if.bind="label && !floatingLabel" class="form-label">${label}</label>
+  <label for.one-time="id" if.bind="label && !floatingLabel" class="form-label">${label}</label>
   <input
-    id="${id}"
+    id.one-time="id"
     class="form-select ${bsSize ? `form-select-${bsSize}` : ''} ${valid ? 'is-valid' : valid === false ? 'is-invalid' : ''}"
     bs-dropdown-toggle="arrow.bind: false"
     value="${valueText}"
     placeholder="${emptyOption?.text ?? ''}"
-    disabled.bind="disabled"
-    required.bind="required"
-    form.bind="form & attr"
-    name.bind="name & attr"
-    title.bind="title & attr"
     autocomplete="off"
     keydown.trigger="$event.preventDefault()"
     ref="control"
@@ -33,12 +28,12 @@
             class="form-check-input"
             type="checkbox"
             checked.bind="value"
-            model.bind="option.value"
-            disabled.bind="option.disabled"
             matcher.bind="matcher"
-            id="${optionId($index)}"
+            model.one-time="option.value"
+            disabled.one-time="option.disabled"
+            id.one-time="optionId($index)"
           />
-          <label class="form-check-label" for="${optionId($index)}">${option.text || '&nbsp;'}</label>
+          <label class="form-check-label" for.one-time="optionId($index)">${option.text || '&nbsp;'}</label>
         </div>
       </div>
       <template repeat.for="[k, v] of groupedOptions | filter:filter">
@@ -49,12 +44,14 @@
               class="form-check-input"
               type="checkbox"
               checked.bind="value"
-              model.bind="option.value"
-              disabled.bind="option.disabled"
               matcher.bind="matcher"
-              id="${optionId($index, $parent.$index)}"
+              model.one-time="option.value"
+              disabled.one-time="option.disabled"
+              id.one-time="optionId($index, $parent.$index)"
             />
-            <label class="form-check-label" for="${optionId($index, $parent.$index)}">${option.text || '&nbsp;'}</label>
+            <label class="form-check-label" for.one-time="optionId($index, $parent.$index)"
+              >${option.text || '&nbsp;'}</label
+            >
           </div>
         </div>
       </template>
@@ -64,7 +61,7 @@
         type="button"
         repeat.for="option of ungroupedOptions | filter:filter:emptyOption"
         class="dropdown-item ${option.value === selectedOption?.value ? 'active' : ''}"
-        disabled.bind="option.disabled"
+        disabled.one-time="option.disabled"
         click.trigger="selectOption(option)"
       >
         ${option.text || '&nbsp;'}
@@ -75,7 +72,7 @@
           type="button"
           repeat.for="option of v"
           class="ps-4 dropdown-item ${option.value === selectedOption?.value ? 'active' : ''}"
-          disabled.bind="option.disabled"
+          disabled.one-time="option.disabled"
           click.trigger="selectOption(option)"
         >
           ${option.text || '&nbsp;'}
@@ -83,7 +80,7 @@
       </template>
     </template>
   </bs-dropdown-menu>
-  <label for="${id}" if.bind="label && floatingLabel"><span>${label}</span></label>
+  <label for.one-time="id" if.bind="label && floatingLabel"><span>${label}</span></label>
   <div class="invalid-feedback" if.bind="invalidFeedback">${invalidFeedback}</div>
   <div class="valid-feedback" if.bind="validFeedback">${validFeedback}</div>
 </template>

package/src/forms/select/select.ts

@@ -29,8 +29,6 @@ export class BsSelect extends BaseBsSelect implements ICustomElementViewModel {
 
   host = resolve(HTMLElement);
 
-  control!: HTMLFieldSetElement;
-
   filter: string = '';
 
   emptyOption?: ISelectOption;
@@ -97,8 +95,6 @@ export class BsSelect extends BaseBsSelect implements ICustomElementViewModel {
   }
 
   get showClear(): boolean {
-    console.warn(`BsSelect #${this.id}: get showClear`);
-
     return (
       !this.disabled &&
       ((this.emptyOption && this.selectedOption?.value !== this.emptyOption.value) ||
@@ -126,7 +122,6 @@ export class BsSelect extends BaseBsSelect implements ICustomElementViewModel {
   }
 
   get selectedOption(): ISelectOption | undefined {
-    console.warn(`BsSelect #${this.id}: get selectedOption`);
     if (this.multiple) return;
 
     const { value, emptyValue, matcher } = this;