ember-validated-form 5.3.1 → 6.0.2

package/addon/components/validated-input.hbs

@@ -1,13 +1,11 @@
 {{#if (has-block)}}
-  {{#let (component this.labelComponent) as |LabelComponent|}}
-    <LabelComponent
-      @label={{@label}}
-      @required={{this.required}}
-      @isValid={{this.isValid}}
-      @isInvalid={{this.isInvalid}}
-      @inputId={{this.inputId}}
-    />
-  {{/let}}
+  <this.labelComponent
+    @label={{@label}}
+    @required={{this.required}}
+    @isValid={{this.isValid}}
+    @isInvalid={{this.isInvalid}}
+    @inputId={{this.inputId}}
+  />
 
   {{yield
     (hash
@@ -23,54 +21,54 @@
   }}
 
   {{#if @hint}}
-    {{component this.hintComponent hint=@hint}}
+    <this.hintComponent @hint={{@hint}} />
   {{/if}}
 
   {{#if (and this.showValidity this.errors)}}
-    {{component this.errorComponent errors=this.errors}}
+    <this.errorComponent @errors={{this.errors}} />
   {{/if}}
 {{else}}
-  {{#let (component this.renderComponent) as |RenderComponent|}}
-    <RenderComponent
-      @type={{this.type}}
-      @value={{this._val}}
-      @inputId={{this.inputId}}
-      @options={{@options}}
-      @name={{@name}}
-      @inputName={{@inputName}}
-      @disabled={{@disabled}}
-      @autofocus={{@autofocus}}
-      @autocomplete={{@autocomplete}}
-      @rows={{@rows}}
-      @cols={{@cols}}
-      @model={{@model}}
-      @isValid={{this.isValid}}
-      @isInvalid={{this.isInvalid}}
-      @placeholder={{@placeholder}}
-      @class={{@class}}
-      @prompt={{@prompt}}
-      @promptIsSelectable={{@promptIsSelectable}}
-      @optionLabelPath={{@optionLabelPath}}
-      @optionValuePath={{@optionValuePath}}
-      @optionTargetPath={{@optionTargetPath}}
-      @includeBlank={{@includeBlank}}
-      @multiple={{@multiple}}
-      @update={{this.update}}
-      @setDirty={{this.setDirty}}
-      @labelComponent={{component
-        this.labelComponent
-        label=@label
-        required=@required
-        isValid=this.isValid
-        isInvalid=this.isInvalid
-        inputId=this.inputId
-      }}
-      @hintComponent={{if @hint (component this.hintComponent hint=@hint)}}
-      @errorComponent={{if
-        (and this.showValidity this.errors)
-        (component this.errorComponent errors=this.errors)
-      }}
-      ...attributes
-    />
-  {{/let}}
+  <this.renderComponent
+    @type={{this.type}}
+    @value={{this._val}}
+    @inputId={{this.inputId}}
+    @options={{@options}}
+    @name={{@name}}
+    @inputName={{@inputName}}
+    @disabled={{@disabled}}
+    @autofocus={{@autofocus}}
+    @autocomplete={{@autocomplete}}
+    @rows={{@rows}}
+    @cols={{@cols}}
+    @model={{@model}}
+    @isValid={{this.isValid}}
+    @isInvalid={{this.isInvalid}}
+    @placeholder={{@placeholder}}
+    @class={{@class}}
+    @prompt={{@prompt}}
+    @promptIsSelectable={{@promptIsSelectable}}
+    @optionLabelPath={{@optionLabelPath}}
+    @optionValuePath={{@optionValuePath}}
+    @optionTargetPath={{@optionTargetPath}}
+    @multiple={{@multiple}}
+    @update={{this.update}}
+    @setDirty={{this.setDirty}}
+    @labelComponent={{component
+      (ensure-safe-component this.labelComponent)
+      label=@label
+      required=@required
+      isValid=this.isValid
+      isInvalid=this.isInvalid
+      inputId=this.inputId
+    }}
+    @hintComponent={{if
+      @hint
+      (component (ensure-safe-component this.hintComponent) hint=@hint)
+    }}
+    @errorComponent={{if
+      (and this.showValidity this.errors)
+      (component (ensure-safe-component this.errorComponent) errors=this.errors)
+    }}
+    ...attributes
+  />
 {{/if}}

package/addon/components/validated-input.js

@@ -3,7 +3,7 @@ import { guidFor } from "@ember/object/internals";
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 
-import themedComponent from "../-private/themed-component";
+import passedOrDefault from "ember-validated-form/passed-or-default";
 
 /**
  * This component wraps form inputs.
@@ -26,10 +26,10 @@ export default class ValidatedInputComponent extends Component {
   @tracked type;
   @tracked validateBeforeSubmit;
 
-  @themedComponent("validated-input/render") renderComponent;
-  @themedComponent("validated-input/label") labelComponent;
-  @themedComponent("validated-input/hint") hintComponent;
-  @themedComponent("validated-input/error") errorComponent;
+  @passedOrDefault("error") errorComponent;
+  @passedOrDefault("hint") hintComponent;
+  @passedOrDefault("label") labelComponent;
+  @passedOrDefault("render") renderComponent;
 
   constructor(...args) {
     super(...args);

package/addon/helpers/class-list.js

@@ -0,0 +1,9 @@
+import { helper } from "@ember/component/helper";
+import { isEmpty } from "@ember/utils";
+
+export default helper(function classList(classes) {
+  return classes
+    .filter((cls) => !isEmpty(cls))
+    .map((cls) => cls.trim())
+    .join(" ");
+});

package/addon/passed-or-default.js

@@ -0,0 +1,16 @@
+import { importSync, getOwnConfig } from "@embroider/macros";
+import { ensureSafeComponent } from "@embroider/util";
+
+export default function passedOrDefault(componentName) {
+  return function (target, property) {
+    return {
+      get() {
+        return ensureSafeComponent(
+          this.args[property] ??
+            importSync(getOwnConfig()[componentName]).default,
+          this
+        );
+      },
+    };
+  };
+}

package/app/components/validated-input/{-themes/uikit/hint.js → render/wrapper.js}

@@ -1 +1 @@
-export { default } from "ember-validated-form/components/validated-input/-themes/uikit/hint";
+export { default } from "ember-validated-form/components/validated-input/render/wrapper";

package/app/helpers/class-list.js

@@ -0,0 +1 @@
+export { default } from "ember-validated-form/helpers/class-list";

package/index.js

@@ -2,4 +2,67 @@
 
 module.exports = {
   name: require("./package").name,
+
+  included(...args) {
+    this._super.included.apply(this, ...args);
+
+    const app = this._findHost(this);
+
+    const {
+      theme = null,
+      scrollErrorIntoView = false,
+      defaults = {},
+    } = app.options["ember-validated-form"] ?? {};
+
+    // Theming options
+    this.options["@embroider/macros"].setOwnConfig.isDefault = ![
+      "uikit",
+      "bootstrap",
+    ].includes(theme);
+    this.options["@embroider/macros"].setOwnConfig.isUikit = theme === "uikit";
+    this.options["@embroider/macros"].setOwnConfig.isBootstrap =
+      theme === "bootstrap";
+
+    // Features
+    this.options["@embroider/macros"].setOwnConfig.scrollErrorIntoView =
+      scrollErrorIntoView;
+
+    // Component defaults
+    this.options["@embroider/macros"].setOwnConfig.error =
+      defaults.error ?? "ember-validated-form/components/validated-input/error";
+    this.options["@embroider/macros"].setOwnConfig.hint =
+      defaults.hint ?? "ember-validated-form/components/validated-input/hint";
+    this.options["@embroider/macros"].setOwnConfig.label =
+      defaults.label ?? "ember-validated-form/components/validated-input/label";
+    this.options["@embroider/macros"].setOwnConfig.render =
+      defaults.render ??
+      "ember-validated-form/components/validated-input/render";
+    this.options["@embroider/macros"].setOwnConfig.button =
+      defaults.button ??
+      "ember-validated-form/components/validated-button/button";
+    this.options["@embroider/macros"].setOwnConfig["types/checkbox-group"] =
+      defaults["types/checkbox-group"] ??
+      "ember-validated-form/components/validated-input/types/checkbox-group";
+    this.options["@embroider/macros"].setOwnConfig["types/checkbox"] =
+      defaults["types/checkbox"] ??
+      "ember-validated-form/components/validated-input/types/checkbox";
+    this.options["@embroider/macros"].setOwnConfig["types/input"] =
+      defaults["types/input"] ??
+      "ember-validated-form/components/validated-input/types/input";
+    this.options["@embroider/macros"].setOwnConfig["types/radio-group"] =
+      defaults["types/radio-group"] ??
+      "ember-validated-form/components/validated-input/types/radio-group";
+    this.options["@embroider/macros"].setOwnConfig["types/select"] =
+      defaults["types/select"] ??
+      "ember-validated-form/components/validated-input/types/select";
+    this.options["@embroider/macros"].setOwnConfig["types/textarea"] =
+      defaults["types/textarea"] ??
+      "ember-validated-form/components/validated-input/types/textarea";
+  },
+
+  options: {
+    "@embroider/macros": {
+      setOwnConfig: {},
+    },
+  },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-validated-form",
-  "version": "5.3.1",
+  "version": "6.0.2",
   "description": "Easily create forms with client-side validations",
   "keywords": [
     "ember-addon",
@@ -8,15 +8,15 @@
     "form validation",
     "validation messages"
   ],
-  "repository": "https://github.com/adfinis-sygroup/ember-validated-form",
+  "repository": "https://github.com/adfinis/ember-validated-form",
   "license": "MIT",
-  "author": "Adfinis SyGroup AG <info@adfinis-sygroup.ch>",
+  "author": "Adfinis AG <info@adfinis.com>",
   "directories": {
     "test": "tests"
   },
-  "homepage": "https://docs.adfinis.com/ember-validated-form",
+  "homepage": "https://adfinis.github.io/ember-validated-form",
   "bugs": {
-    "url": "https://github.com/adfinis-sygroup/ember-validated-form/issues"
+    "url": "https://github.com/adfinis/ember-validated-form/issues"
   },
   "scripts": {
     "build": "ember build --environment=production",
@@ -33,27 +33,29 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "@embroider/macros": "^1.8.3",
+    "@embroider/util": "^1.8.3",
     "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.1.2",
-    "ember-auto-import": "^2.4.2",
-    "ember-changeset": "^4.1.0",
+    "ember-changeset": "^4.1.1",
     "ember-changeset-validations": "^4.1.0",
     "ember-cli-babel": "^7.26.11",
-    "ember-cli-htmlbars": "^6.0.1",
-    "ember-truth-helpers": "^3.0.0"
+    "ember-cli-htmlbars": "^6.1.0",
+    "ember-truth-helpers": "^3.1.1"
   },
   "devDependencies": {
     "@adfinis-sygroup/eslint-config": "1.5.0",
     "@adfinis-sygroup/semantic-release-config": "3.4.0",
     "@ember/optional-features": "2.0.0",
     "@ember/test-helpers": "2.8.1",
-    "@embroider/test-setup": "1.6.0",
-    "@fortawesome/ember-fontawesome": "0.4.0",
-    "@fortawesome/free-solid-svg-icons": "6.1.1",
+    "@embroider/test-setup": "1.8.3",
+    "@fortawesome/ember-fontawesome": "0.4.1",
+    "@fortawesome/free-solid-svg-icons": "6.2.0",
     "babel-eslint": "10.1.0",
     "broccoli-asset-rev": "3.0.0",
-    "ember-cli": "4.3.0",
-    "ember-cli-addon-docs": "ember-learn/ember-cli-addon-docs#667701d60650cf7af51611dbff9abf1879776421",
+    "ember-auto-import": "2.4.2",
+    "ember-cli": "4.7.0",
+    "ember-cli-addon-docs": "5.0.0",
     "ember-cli-dependency-checker": "3.3.1",
     "ember-cli-deploy": "1.0.2",
     "ember-cli-deploy-build": "2.0.0",
@@ -63,24 +65,24 @@
     "ember-cli-sri": "2.1.1",
     "ember-cli-terser": "4.0.2",
     "ember-cli-test-loader": "3.0.0",
-    "ember-concurrency": "2.2.1",
-    "ember-data": "4.4.0",
+    "ember-concurrency": "2.3.6",
+    "ember-data": "4.4.1",
     "ember-disable-prototype-extensions": "1.1.3",
     "ember-load-initializers": "2.1.2",
     "ember-qunit": "5.1.5",
     "ember-resolver": "8.0.3",
-    "ember-source": "4.6.0",
+    "ember-source": "4.7.0",
     "ember-source-channel-url": "3.0.0",
-    "ember-template-lint": "4.12.0",
+    "ember-template-lint": "4.14.0",
     "ember-template-lint-plugin-prettier": "4.0.0",
     "ember-try": "2.0.0",
     "eslint": "7.32.0",
     "eslint-config-prettier": "8.5.0",
-    "eslint-plugin-ember": "10.6.1",
+    "eslint-plugin-ember": "11.0.6",
     "eslint-plugin-import": "2.26.0",
     "eslint-plugin-node": "11.1.0",
-    "eslint-plugin-prettier": "4.0.0",
-    "eslint-plugin-qunit": "7.2.0",
+    "eslint-plugin-prettier": "4.2.1",
+    "eslint-plugin-qunit": "7.3.1",
     "husky": "8.0.1",
     "lint-staged": "13.0.3",
     "loader.js": "4.7.0",
@@ -91,14 +93,14 @@
     "webpack": "5.74.0"
   },
   "engines": {
-    "node": "12.* || 14.* || >= 16"
+    "node": "14.* || >= 16"
   },
   "ember": {
     "edition": "octane"
   },
   "ember-addon": {
     "configPath": "tests/dummy/config",
-    "demoURL": "https://docs.adfinis.com/ember-validated-form"
+    "demoURL": "https://adfinis.github.io/ember-validated-form"
   },
   "release": {
     "extends": "@adfinis-sygroup/semantic-release-config"

package/addon/-private/themed-component.js

@@ -1,38 +0,0 @@
-import { getOwner } from "@ember/application";
-
-export default function (component) {
-  return function (_, propertyName) {
-    return {
-      get() {
-        const parts = component.split("/");
-        const componentName = parts.slice(1, parts.length).join("/");
-
-        if (this.args[propertyName]) {
-          return this.args[propertyName];
-        }
-
-        const config =
-          getOwner(this).resolveRegistration("config:environment")[
-            "ember-validated-form"
-          ] !== undefined
-            ? getOwner(this).resolveRegistration("config:environment")[
-                "ember-validated-form"
-              ]
-            : {};
-
-        const theme = config.theme;
-        const defaultComponent = config.defaults?.[componentName];
-
-        const name = parts.pop();
-        const basePath = parts.join("/");
-
-        return (
-          defaultComponent ||
-          (theme
-            ? `${basePath}/-themes/${theme}/${name}`
-            : `${basePath}/${name}`)
-        );
-      },
-    };
-  };
-}

package/addon/components/validated-button/-themes/bootstrap/button.js

@@ -1,10 +0,0 @@
-import Component from "../../button";
-
-export default class BootstrapButton extends Component {
-  get class() {
-    const style = this.args.type === "submit" ? "btn-primary" : "btn-default";
-    const loading = this.args.loading ? "loading" : "";
-
-    return `btn ${style} ${loading}`;
-  }
-}

package/addon/components/validated-button/-themes/uikit/button.js

@@ -1,10 +0,0 @@
-import Component from "../../button";
-
-export default class UikitButton extends Component {
-  get class() {
-    const style =
-      this.args.type === "submit" ? "uk-button-primary" : "uk-button-default";
-
-    return `uk-button ${style}`;
-  }
-}

package/addon/components/validated-button/button.js

@@ -1,4 +0,0 @@
-import Component from "@glimmer/component";
-
-// eslint-disable-next-line ember/no-empty-glimmer-component-classes
-export default class ButtonComponent extends Component {}

package/addon/components/validated-input/-themes/bootstrap/error.js

@@ -1,5 +0,0 @@
-import Component from "../../error";
-
-export default class BootstrapErrorComponent extends Component {
-  class = "invalid-feedback";
-}

package/addon/components/validated-input/-themes/bootstrap/hint.js

@@ -1,5 +0,0 @@
-import Component from "../../hint";
-
-export default class BootstrapHintComponent extends Component {
-  class = "form-text text-muted";
-}

package/addon/components/validated-input/-themes/bootstrap/label.js

@@ -1,3 +0,0 @@
-import Component from "../../label";
-
-export default class BootstrapLabelComponent extends Component {}

package/addon/components/validated-input/-themes/bootstrap/render.js

@@ -1,5 +0,0 @@
-import Component from "../../render";
-
-export default class BootstrapRenderComponent extends Component {
-  class = "form-group";
-}

package/addon/components/validated-input/-themes/uikit/error.hbs

@@ -1,4 +0,0 @@
-<small
-  class="uk-text-danger"
-  ...attributes
->{{yield}}{{this.errorString}}</small>

package/addon/components/validated-input/-themes/uikit/error.js

@@ -1,3 +0,0 @@
-import Component from "../../error";
-
-export default class UikitErrorComponent extends Component {}

package/addon/components/validated-input/-themes/uikit/hint.js

@@ -1,5 +0,0 @@
-import Component from "../../hint";
-
-export default class UikitHintComponent extends Component {
-  class = "uk-text-muted";
-}

package/addon/components/validated-input/-themes/uikit/label.js

@@ -1,5 +0,0 @@
-import Component from "../../label";
-
-export default class UikitLabelComponent extends Component {
-  class = "uk-form-label";
-}

package/addon/components/validated-input/-themes/uikit/render.hbs

@@ -1,118 +0,0 @@
-{{! template-lint-disable no-autofocus-attribute }}
-<div class={{this.class}}>
-  {{#if (not-eq @type "checkbox")}}
-    <@labelComponent />
-  {{/if}}
-
-  <div class="uk-form-controls">
-    {{#if (eq @type "select")}}
-      {{#let (component this.selectComponent) as |Select|}}
-        <Select
-          @disabled={{@disabled}}
-          @includeBlank={{@includeBlank}}
-          @inputId={{@inputId}}
-          @isInvalid={{@isInvalid}}
-          @isValid={{@isValid}}
-          @multiple={{@multiple}}
-          @name={{or @inputName @name}}
-          @optionLabelPath={{@optionLabelPath}}
-          @options={{@options}}
-          @optionTargetPath={{@optionTargetPath}}
-          @optionValuePath={{@optionValuePath}}
-          @prompt={{@prompt}}
-          @promptIsSelectable={{@promptIsSelectable}}
-          @setDirty={{@setDirty}}
-          @update={{@update}}
-          @value={{@value}}
-          ...attributes
-        />
-      {{/let}}
-    {{else if (or (eq @type "radioGroup") (eq @type "radio-group"))}}
-      {{#let (component this.radioGroupComponent) as |RadioGroup|}}
-        <RadioGroup
-          @disabled={{@disabled}}
-          @inputId={{@inputId}}
-          @isInvalid={{@isInvalid}}
-          @isValid={{@isValid}}
-          @name={{or @inputName @name}}
-          @options={{@options}}
-          @setDirty={{@setDirty}}
-          @update={{@update}}
-          @value={{@value}}
-          ...attributes
-        />
-      {{/let}}
-    {{else if (or (eq @type "checkboxGroup") (eq @type "checkbox-group"))}}
-      {{#let (component this.checkboxGroupComponent) as |CheckboxGroup|}}
-        <CheckboxGroup
-          @disabled={{@disabled}}
-          @inputId={{@inputId}}
-          @isInvalid={{@isInvalid}}
-          @isValid={{@isValid}}
-          @name={{or @inputName @name}}
-          @options={{@options}}
-          @setDirty={{@setDirty}}
-          @update={{@update}}
-          @value={{@value}}
-          ...attributes
-        />
-      {{/let}}
-    {{else if (eq @type "checkbox")}}
-      {{#let (component this.checkboxComponent) as |Checkbox|}}
-        <Checkbox
-          @disabled={{@disabled}}
-          @inputId={{@inputId}}
-          @isInvalid={{@isInvalid}}
-          @isValid={{@isValid}}
-          @labelComponent={{@labelComponent}}
-          @name={{or @inputName @name}}
-          @options={{@options}}
-          @setDirty={{@setDirty}}
-          @update={{@update}}
-          @value={{@value}}
-          ...attributes
-        />
-      {{/let}}
-    {{else if (eq @type "textarea")}}
-      {{#let (component this.textareaComponent) as |DynamicTextarea|}}
-        <DynamicTextarea
-          autocomplete={{@autocomplete}}
-          autofocus={{@autofocus}}
-          cols={{@cols}}
-          disabled={{@disabled}}
-          id={{@inputId}}
-          name={{or @inputName @name}}
-          placeholder={{@placeholder}}
-          rows={{@rows}}
-          value={{@value}}
-          @isInvalid={{@isInvalid}}
-          @isValid={{@isValid}}
-          @setDirty={{@setDirty}}
-          @update={{@update}}
-          ...attributes
-        />
-      {{/let}}
-    {{else}}
-      {{#let (component this.inputComponent) as |DynamicInput|}}
-        <DynamicInput
-          autocomplete={{@autocomplete}}
-          autofocus={{@autofocus}}
-          disabled={{@disabled}}
-          id={{@inputId}}
-          name={{or @inputName @name}}
-          placeholder={{@placeholder}}
-          type={{@type}}
-          value={{@value}}
-          @isInvalid={{@isInvalid}}
-          @isValid={{@isValid}}
-          @setDirty={{@setDirty}}
-          @update={{@update}}
-          ...attributes
-        />
-      {{/let}}
-    {{/if}}
-  </div>
-
-  <@hintComponent />
-  <@errorComponent />
-</div>

package/addon/components/validated-input/-themes/uikit/render.js

@@ -1,5 +0,0 @@
-import Component from "../../render";
-
-export default class UikitRenderComponent extends Component {
-  class = "uk-margin";
-}

package/addon/components/validated-input/hint.js

@@ -1,4 +0,0 @@
-import Component from "@glimmer/component";
-
-// eslint-disable-next-line ember/no-empty-glimmer-component-classes
-export default class HintComponent extends Component {}

package/addon/components/validated-input/label.js

@@ -1,4 +0,0 @@
-import Component from "@glimmer/component";
-
-// eslint-disable-next-line ember/no-empty-glimmer-component-classes
-export default class LabelComponent extends Component {}

package/addon/components/validated-input/types/-themes/bootstrap/checkbox-group.hbs

@@ -1,19 +0,0 @@
-{{#each @options as |option i|}}
-  <div class="custom-control custom-checkbox">
-    <input
-      type="checkbox"
-      class="custom-control-input
-        {{if @isValid 'is-valid'}}
-        {{if @isInvalid 'is-invalid'}}"
-      checked={{includes option.key @value}}
-      name={{@name}}
-      id="{{@inputId}}-{{i}}"
-      disabled={{@disabled}}
-      {{on "input" (fn this.onUpdate option.key)}}
-    />
-    <label
-      class="custom-control-label"
-      for="{{@inputId}}-{{i}}"
-    >{{option.label}}</label>
-  </div>
-{{/each}}

package/addon/components/validated-input/types/-themes/bootstrap/checkbox-group.js

@@ -1,3 +0,0 @@
-import Component from "../../checkbox-group";
-
-export default class BootstrapCheckboxGroupComponent extends Component {}