Basic Setup

Author: simonihmig

packages/ember-bootstrap-constraint-validations/package.json

@@ -57,11 +57,17 @@
     "version": 2,
     "type": "addon",
     "main": "addon-main.js",
-    "app-js": {}
+    "app-js": {
+      "./components/bs-form.js": "./dist/_app_/components/bs-form.js",
+      "./components/bs-form/element.js": "./dist/_app_/components/bs-form/element.js"
+    }
   },
   "exports": {
     ".": "./dist/index.js",
     "./*": "./dist/*",
     "./addon-main.js": "./addon-main.js"
+  },
+  "peerDependencies": {
+    "ember-bootstrap": "^5.1.0"
   }
 }

packages/ember-bootstrap-constraint-validations/rollup.config.js

@@ -14,7 +14,7 @@ export default {
   plugins: [
     // These are the modules that users should be able to import from your
     // addon. Anything not listed here may get optimized away.
-    addon.publicEntrypoints(['components/**/*.js', 'index.js']),
+    addon.publicEntrypoints(['components/**/*.js']),
 
     // These are the modules that should get reexported into the traditional
     // "app" tree. Things in here should also be in publicEntrypoints above, but

packages/ember-bootstrap-constraint-validations/src/components/bs-form.js

@@ -0,0 +1,13 @@
+import BaseBsForm from 'ember-bootstrap/components/bs-form';
+
+export default class BsForm extends BaseBsForm {
+  '__ember-bootstrap_subclass' = true;
+
+  get hasValidator() {
+    return true;
+  }
+
+  async validate(model) {
+    throw new Error();
+  }
+}

packages/ember-bootstrap-constraint-validations/src/components/bs-form/element.js

@@ -0,0 +1,15 @@
+import BaseBsFormElement from 'ember-bootstrap/components/bs-form/element';
+
+export default class BsFormElement extends BaseBsFormElement {
+  '__ember-bootstrap_subclass' = true;
+
+  get errors() {
+    // let { model, property } = this.args;
+
+    return ['dummy error'];
+  }
+
+  get hasValidator() {
+    return true;
+  }
+}

packages/ember-bootstrap-constraint-validations/src/index.js

@@ -0,0 +1,21 @@
+import Controller from '@ember/controller';
+import { action } from '@ember/object';
+
+class Model {
+  name = null;
+  email = null;
+}
+
+export default class ApplicationController extends Controller {
+  model = new Model();
+
+  @action
+  submit() {
+    window.alert('Submitted!');
+  }
+
+  @action
+  invalid() {
+    window.alert('Invalid!');
+  }
+}

packages/test-app/app/controllers/.gitkeep

@@ -1,5 +1,9 @@
-{{page-title "TestApp"}}
+<div class="container mt-4">
 
-<h2 id="title">Welcome to Ember</h2>
+  <BsForm @model={{this.model}} @onSubmit={{this.submit}} @onInvalid={{this.invalid}} as |form|>
+    <form.element @label="Name" @property="name" />
+    <form.element @label="Email" @property="email" />
+    <form.submitButton>Submit</form.submitButton>
+  </BsForm>
 
-{{outlet}}
+</div>

packages/test-app/app/controllers/application.js

@@ -4,7 +4,10 @@ const EmberApp = require('ember-cli/lib/broccoli/ember-app');
 
 module.exports = function (defaults) {
   let app = new EmberApp(defaults, {
-    // Add options here
+    'ember-bootstrap': {
+      bootstrapVersion: 5,
+      importBootstrapCSS: true,
+    },
   });
 
   // Use `app.import` to add additional libraries to the generated

packages/test-app/app/templates/application.hbs

@@ -30,8 +30,10 @@
     "@glimmer/component": "^1.0.4",
     "@glimmer/tracking": "^1.0.4",
     "babel-eslint": "^10.1.0",
+    "bootstrap": "^5.0.0",
     "broccoli-asset-rev": "^3.0.0",
     "ember-auto-import": "^2.4.1",
+    "ember-bootstrap": "^5.1.0",
     "ember-bootstrap-constraint-validations": "^0.0.0",
     "ember-cli": "~4.3.0",
     "ember-cli-app-version": "^5.0.0",
@@ -71,4 +73,4 @@
   "ember": {
     "edition": "octane"
   }
-}
+}