@projectcaluma/ember-form-builder 11.0.0-beta.28 → 11.0.0-beta.29

package/addon/components/cfb-code-editor.hbs

@@ -1,12 +1,27 @@
-{{component @labelComponent}}
+<div class="uk-margin">
+  <@labelComponent />
 
-<div
-  name={{@name}}
-  class="uk-textarea cfb-code-editor {{concat 'language-' @language}}"
-  {{did-insert this.didInsertNode}}
-  {{will-destroy this.willDestroyNode}}
-  {{autoresize mode="height"}}
-></div>
+  <div class="uk-form-controls">
+    <div
+      name={{@name}}
+      class="uk-textarea cfb-code-editor {{concat 'language-' @language}}"
+      {{did-insert this.didInsertNode}}
+      {{will-destroy this.willDestroyNode}}
+      {{autoresize mode="height"}}
+    ></div>
+  </div>
 
-{{component @hintComponent}}
-{{component @errorComponent}}
+  {{#if (eq @language "markdown")}}
+    <small class="uk-text-muted">
+      {{t "caluma.form-builder.question.supportsMarkdownPrefix"}}
+      <a
+        target="_blank"
+        rel="noopener noreferrer"
+        href="https://www.markdownguide.org/basic-syntax"
+      >{{t "caluma.form-builder.question.markdown"}}</a>
+    </small>
+  {{/if}}
+
+  <@hintComponent />
+  <@errorComponent />
+</div>

package/addon/components/cfb-form-editor/question/default.hbs

@@ -1,13 +1,15 @@
 <div class="uk-margin">
-  {{component @labelComponent}}
+  <@labelComponent />
 
-  {{component
-    (get-widget this.field.question)
-    field=this.field
-    disabled=false
-    onSave=this.onUpdate
-  }}
+  <div class="uk-form-controls">
+    {{component
+      (get-widget this.field.question)
+      field=this.field
+      disabled=false
+      onSave=this.onUpdate
+    }}
+  </div>
 
-  {{component @hintComponent}}
-  {{component @errorComponent}}
+  <@hintComponent />
+  <@errorComponent />
 </div>

package/addon/components/cfb-form-editor/question/options.hbs

@@ -1,5 +1,5 @@
 <div class="uk-margin">
-  {{component @labelComponent}}
+  <@labelComponent />
 
   <UkSortable
     @handle=".uk-sortable-handle"
@@ -84,6 +84,6 @@
     </li>
   </UkSortable>
 
-  {{component @hintComponent}}
-  {{component @errorComponent}}
+  <@hintComponent />
+  <@errorComponent />
 </div>

package/addon/components/cfb-form-editor/question/validation.hbs

@@ -1,17 +1,19 @@
 <div class="uk-margin">
-  {{component @labelComponent}}
+  <@labelComponent />
 
-  <PowerSelectMultiple
-    @selected={{this.selected}}
-    @placeholder={{@placeholder}}
-    @options={{this.validators}}
-    @onChange={{this.updateValidators}}
-    @renderInPlace={{true}}
-    as |item|
-  >
-    {{item.name}}
-  </PowerSelectMultiple>
+  <div class="uk-form-controls">
+    <PowerSelectMultiple
+      @selected={{this.selected}}
+      @placeholder={{@placeholder}}
+      @options={{this.validators}}
+      @onChange={{this.updateValidators}}
+      @renderInPlace={{true}}
+      as |item|
+    >
+      {{item.name}}
+    </PowerSelectMultiple>
+  </div>
 
-  {{component @hintComponent}}
-  {{component @errorComponent}}
+  <@hintComponent />
+  <@errorComponent />
 </div>

package/addon/components/cfb-form-editor/question-list/item.hbs

@@ -9,35 +9,33 @@
   ...attributes
 >
   <div class="uk-flex uk-flex-middle">
-    <span class="uk-width-auto uk-margin-small-right">
-      {{#if (eq @mode "reorder")}}
-        <i
-          role="button"
-          data-test-sort-handle
-          uk-icon="menu"
-          class="uk-sortable-handle"
-        >
-        </i>
-      {{else if (eq @mode "remove")}}
-        <i
-          role="button"
-          data-test-remove-item
-          uk-icon="minus"
-          class="cfb-pointer uk-text-danger"
-          {{on "click" (fn (optional @onRemoveQuestion) @question)}}
-        >
-        </i>
-      {{else if (eq @mode "add")}}
-        <i
-          role="button"
-          data-test-add-item
-          uk-icon="plus"
-          class="cfb-pointer uk-text-success"
-          {{on "click" (fn (optional @onAddQuestion) @question)}}
-        >
-        </i>
-      {{/if}}
-    </span>
+    {{#if (eq @mode "reorder")}}
+      <i
+        role="button"
+        data-test-sort-handle
+        uk-icon="menu"
+        class="uk-sortable-handle uk-margin-small-right"
+      >
+      </i>
+    {{else if (eq @mode "remove")}}
+      <i
+        role="button"
+        data-test-remove-item
+        uk-icon="minus"
+        class="cfb-pointer uk-text-danger uk-margin-small-right"
+        {{on "click" (fn (optional @onRemoveQuestion) @question)}}
+      >
+      </i>
+    {{else if (eq @mode "add")}}
+      <i
+        role="button"
+        data-test-add-item
+        uk-icon="plus"
+        class="cfb-pointer uk-text-success uk-margin-small-right"
+        {{on "click" (fn (optional @onAddQuestion) @question)}}
+      >
+      </i>
+    {{/if}}
 
     {{#if (eq @mode "reorder")}}
       <a

package/addon/components/cfb-form-editor/question.hbs

@@ -113,26 +113,11 @@
       {{/if}}
 
       {{#if (has-question-type f.model "static")}}
-        <div class="uk-margin">
-          <f.input
-            @label={{t "caluma.form-builder.question.staticContent"}}
-            @name="staticContent"
-            @renderComponent={{component
-              "cfb-code-editor"
-              language="markdown"
-              className="uk-margin-remove-bottom"
-            }}
-            class="uk-margin-remove-bottom"
-          />
-          <small class="uk-text-muted">
-            {{t "caluma.form-builder.question.supportsMarkdownPrefix"}}
-            <a
-              target="_blank"
-              rel="noopener noreferrer"
-              href="https://www.markdownguide.org/basic-syntax"
-            >{{t "caluma.form-builder.question.markdown"}}</a>
-          </small>
-        </div>
+        <f.input
+          @label={{t "caluma.form-builder.question.staticContent"}}
+          @name="staticContent"
+          @renderComponent={{component "cfb-code-editor" language="markdown"}}
+        />
       {{/if}}
 
       {{#if (has-question-type f.model "action-button")}}
@@ -143,25 +128,11 @@
           {{autoresize mode="height"}}
         />
       {{else}}
-        <div class="uk-margin">
-          <f.input
-            @label={{t "caluma.form-builder.question.infoText"}}
-            @name="infoText"
-            @renderComponent={{component
-              "cfb-code-editor"
-              language="markdown"
-              className="uk-margin-remove-bottom"
-            }}
-          />
-          <small class="uk-text-muted">
-            {{t "caluma.form-builder.question.supportsMarkdownPrefix"}}
-            <a
-              target="_blank"
-              rel="noopener noreferrer"
-              href="https://www.markdownguide.org/basic-syntax"
-            >{{t "caluma.form-builder.question.markdown"}}</a>
-          </small>
-        </div>
+        <f.input
+          @label={{t "caluma.form-builder.question.infoText"}}
+          @name="infoText"
+          @renderComponent={{component "cfb-code-editor" language="markdown"}}
+        />
       {{/if}}
 
       {{#if (not (has-question-type f.model "action-button" "static" "form"))}}
@@ -250,17 +221,18 @@
         <div uk-grid class="uk-grid-small uk-child-width-1-2 uk-margin">
           <div>
             <f.input
+              @type="number"
               @name="floatMinValue"
               @label={{t "caluma.form-builder.question.min-value"}}
-              @renderComponent={{component "cfb-float-input"}}
+              step="any"
             />
           </div>
-
           <div>
             <f.input
+              @type="number"
               @name="floatMaxValue"
               @label={{t "caluma.form-builder.question.max-value"}}
-              @renderComponent={{component "cfb-float-input"}}
+              step="any"
             />
           </div>
         </div>
@@ -367,33 +339,12 @@
         </div>
 
         {{#if @slug}}
-          <div class="uk-margin">
-            <f.input
-              @name="meta.columnsToDisplay"
-              @label={{t "caluma.form-builder.question.columnsToDisplay"}}
-            >
-              {{#each this.model.rowForm.questions.edges as |rowEdge|}}
-                {{#let rowEdge.node as |row|}}
-                  <label>
-                    <input
-                      type="checkbox"
-                      value={{row.slug}}
-                      checked={{includes
-                        row.slug
-                        this.model.meta.columnsToDisplay
-                      }}
-                      class="uk-checkbox uk-margin-small-right"
-                      {{on
-                        "change"
-                        (fn this.toggleColumnToDisplay row.slug f.model)
-                      }}
-                    />
-                    {{row.label}}
-                  </label>
-                {{/let}}
-              {{/each}}
-            </f.input>
-          </div>
+          <f.input
+            @type="checkbox-group"
+            @name="meta.columnsToDisplay"
+            @label={{t "caluma.form-builder.question.columnsToDisplay"}}
+            @options={{this.columnsToDisplayOptions}}
+          />
         {{/if}}
       {{/if}}
 
@@ -478,13 +429,11 @@
           />
         {{/if}}
 
-        <div class="uk-margin">
-          <f.input
-            @label={{t "caluma.form-builder.question.isHidden"}}
-            @name="isHidden"
-            @renderComponent={{component "cfb-code-editor" language="jexl"}}
-          />
-        </div>
+        <f.input
+          @label={{t "caluma.form-builder.question.isHidden"}}
+          @name="isHidden"
+          @renderComponent={{component "cfb-code-editor" language="jexl"}}
+        />
 
         {{#if
           (not
@@ -493,22 +442,18 @@
             )
           )
         }}
-          <div class="uk-margin">
-            <f.input
-              @label={{t "caluma.form-builder.question.isRequired"}}
-              @name="isRequired"
-              @renderComponent={{component "cfb-code-editor" language="jexl"}}
-            />
-          </div>
-        {{/if}}
-
-        <div class="uk-margin">
           <f.input
-            @label={{t "caluma.form-builder.question.meta"}}
-            @name="meta"
-            @renderComponent={{component "cfb-code-editor" language="json"}}
+            @label={{t "caluma.form-builder.question.isRequired"}}
+            @name="isRequired"
+            @renderComponent={{component "cfb-code-editor" language="jexl"}}
           />
-        </div>
+        {{/if}}
+
+        <f.input
+          @label={{t "caluma.form-builder.question.meta"}}
+          @name="meta"
+          @renderComponent={{component "cfb-code-editor" language="json"}}
+        />
       {{/if}}
 
       <div class="uk-text-right">

package/addon/components/cfb-form-editor/question.js

@@ -204,6 +204,13 @@ export default class CfbFormEditorQuestion extends Component {
       : "";
   }
 
+  get columnsToDisplayOptions() {
+    return this.model.rowForm?.questions.edges.map((edge) => ({
+      key: edge.node.slug,
+      label: edge.node.label,
+    }));
+  }
+
   getInput(changeset) {
     const slug =
       ((!this.args.slug && this.prefix) || "") + changeset.get("slug");
@@ -496,19 +503,6 @@ export default class CfbFormEditorQuestion extends Component {
     this.validateSlug.perform(this.prefix + value, changeset);
   }
 
-  /*
-   * This function adds the selected slugs to the columns to display
-   * list if it isnt present, otherwise it will remove the slug.
-   */
-  @action
-  toggleColumnToDisplay(value, changeset) {
-    const displayed = new Set(changeset.get("meta.columnsToDisplay"));
-
-    displayed.delete(value) || displayed.add(value);
-
-    changeset.set("meta.columnsToDisplay", [...displayed]);
-  }
-
   @action
   updateSubForm(value, changeset) {
     changeset.set("subForm.slug", value.slug);

package/addon/validators/gt-lt.js

@@ -1,47 +1,26 @@
-import getMessages from "ember-changeset-validations/utils/get-messages";
-import buildMessage from "ember-changeset-validations/utils/validation-errors";
+import { validateNumber } from "ember-changeset-validations/validators";
 
-export default function validateGtLt(options = { gt: null, lt: null }) {
+export default function validateGtLt(options = {}) {
   return (key, newValue, oldValue, changes, content) => {
-    newValue = Number(newValue);
-
-    if (!newValue) {
-      return true;
-    }
-
-    const messages = getMessages();
     const data = { ...content, ...changes };
 
-    if (options.gt) {
-      const dependentValue = data[options.gt];
-
-      return dependentValue
-        ? Number(newValue) > Number(dependentValue) ||
-            buildMessage(key, {
-              type: "greaterThan",
-              value: newValue,
-              context: {
-                gt: messages.getDescriptionFor(options.gt),
-              },
-            })
-        : true;
-    }
+    const parsedOptions = Object.entries(options).reduce((parsed, [k, v]) => {
+      const value =
+        /^(g|l)t(e)?$/.test(k) && typeof v === "string" ? data[v] : v;
 
-    if (options.lt) {
-      const dependentValue = data[options.lt];
+      if (value) {
+        return { ...parsed, [k]: value };
+      }
 
-      return dependentValue
-        ? Number(newValue) < Number(dependentValue) ||
-            buildMessage(key, {
-              type: "lessThan",
-              value: newValue,
-              context: {
-                lt: messages.getDescriptionFor(options.lt),
-              },
-            })
-        : true;
-    }
+      return parsed;
+    }, {});
 
-    return true;
+    return validateNumber(parsedOptions)(
+      key,
+      newValue,
+      oldValue,
+      changes,
+      content
+    );
   };
 }

package/config/environment.js

@@ -4,12 +4,5 @@ module.exports = function (environment) {
   return {
     modulePrefix: require("../package.json").name,
     environment,
-
-    "ember-validated-form": {
-      theme: "uikit",
-      defaults: {
-        label: "cfb-label",
-      },
-    },
   };
 };

package/index.js

@@ -9,4 +9,12 @@ module.exports = buildEngine({
   lazyLoading: {
     enabled: false,
   },
+
+  included(...args) {
+    const app = this._findHost(this);
+
+    app.options["ember-validated-form"] = { theme: "uikit" };
+
+    this._super.included.apply(this, args);
+  },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@projectcaluma/ember-form-builder",
-  "version": "11.0.0-beta.28",
+  "version": "11.0.0-beta.29",
   "description": "Ember engine for building Caluma forms.",
   "keywords": [
     "ember-addon",
@@ -18,13 +18,14 @@
     "ember-engines": ">= 0.8"
   },
   "dependencies": {
+    "@ember/legacy-built-in-components": "^0.4.1",
     "@ember/render-modifiers": "^2.0.4",
     "@ember/string": "^3.0.0",
     "@embroider/macros": "^1.8.3",
     "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.1.2",
-    "@projectcaluma/ember-core": "^11.0.0-beta.28",
-    "@projectcaluma/ember-form": "^11.0.0-beta.28",
+    "@projectcaluma/ember-core": "^11.0.0-beta.29",
+    "@projectcaluma/ember-form": "^11.0.0-beta.29",
     "codejar": "^3.6.0",
     "ember-apollo-client": "~4.0.2",
     "ember-auto-import": "^2.4.2",
@@ -40,10 +41,10 @@
     "ember-math-helpers": "^2.18.2",
     "ember-pikaday": "^4.0.0",
     "ember-power-select": "^6.0.1",
-    "ember-resources": "^5.3.2",
+    "ember-resources": "^5.4.0",
     "ember-test-selectors": "^6.0.0",
-    "ember-uikit": "^6.0.0",
-    "ember-validated-form": "^5.3.0",
+    "ember-uikit": "^6.1.0",
+    "ember-validated-form": "^6.1.2",
     "graphql": "^15.8.0",
     "graphql-tag": "^2.12.6",
     "highlight.js": "^11.6.0",
@@ -58,28 +59,26 @@
   ],
   "devDependencies": {
     "@ember/optional-features": "2.0.0",
-    "@ember/test-helpers": "2.8.1",
+    "@ember/test-helpers": "2.7.0",
     "@embroider/test-setup": "1.8.3",
     "@faker-js/faker": "7.5.0",
-    "@projectcaluma/ember-testing": "11.0.0-beta.28",
+    "@projectcaluma/ember-testing": "11.0.0-beta.29",
     "broccoli-asset-rev": "3.0.0",
     "ember-autoresize-modifier": "^0.5.0",
-    "ember-cli": "3.28.5",
+    "ember-cli": "4.7.0",
     "ember-cli-code-coverage": "1.0.3",
     "ember-cli-dependency-checker": "3.3.1",
     "ember-cli-inject-live-reload": "2.1.0",
     "ember-cli-mirage": "3.0.0-alpha.3",
     "ember-cli-sri": "2.1.1",
     "ember-cli-terser": "4.0.2",
-    "ember-data": "3.28.10",
+    "ember-data": "4.7.1",
     "ember-disable-prototype-extensions": "1.1.3",
     "ember-engines": "0.8.23",
-    "ember-export-application-global": "2.0.1",
     "ember-load-initializers": "2.1.2",
-    "ember-maybe-import-regenerator": "1.0.0",
     "ember-qunit": "5.1.5",
     "ember-resolver": "8.0.3",
-    "ember-source": "3.28.9",
+    "ember-source": "4.7.0",
     "ember-source-channel-url": "3.0.0",
     "ember-try": "2.0.0",
     "loader.js": "4.7.0",
@@ -90,12 +89,15 @@
     "webpack": "5.74.0"
   },
   "engines": {
-    "node": "12.* || 14.* || >= 16"
+    "node": "14.* || >= 16"
   },
   "ember": {
     "edition": "octane"
   },
   "ember-addon": {
-    "configPath": "tests/dummy/config"
+    "configPath": "tests/dummy/config",
+    "before": [
+      "ember-validated-form"
+    ]
   }
 }

package/addon/components/cfb-float-input.hbs

@@ -1,14 +0,0 @@
-{{component @labelComponent}}
-
-<input
-  class="uk-input"
-  name={{@name}}
-  ...attributes
-  step="any"
-  type="number"
-  value={{@value}}
-  {{on "change" this.onUpdate}}
-/>
-
-{{component @hintComponent}}
-{{component @errorComponent}}

package/addon/components/cfb-label.hbs

@@ -1,12 +0,0 @@
-<label
-  class="uk-form-label uk-flex uk-flex-between"
-  for={{@inputId}}
-  ...attributes
->
-  {{yield}}{{@label}}
-  {{#unless @required}}
-    <span class="uk-text-muted uk-text-lowercase">
-      ({{t "caluma.form-builder.global.optional"}})
-    </span>
-  {{/unless}}
-</label>

package/app/components/cfb-float-input.js

@@ -1 +0,0 @@
-export { default } from "@projectcaluma/ember-form-builder/components/cfb-float-input";

package/app/components/cfb-label.js

@@ -1 +0,0 @@
-export { default } from "@projectcaluma/ember-form-builder/components/cfb-label";