@projectcaluma/ember-form-builder 11.0.0-beta.9 → 11.0.0

package/CHANGELOG.md

@@ -1,3 +1,85 @@
+# [@projectcaluma/ember-form-builder-v11.0.0-beta.16](https://github.com/projectcaluma/ember-caluma/compare/@projectcaluma/ember-form-builder-v11.0.0-beta.15...@projectcaluma/ember-form-builder-v11.0.0-beta.16) (2022-08-05)
+
+
+* feat!: add multi file upload (#2040) ([c4fd004](https://github.com/projectcaluma/ember-caluma/commit/c4fd0049654b2d2e5ea62e5909a45d89cb888b40)), closes [#2040](https://github.com/projectcaluma/ember-caluma/issues/2040)
+
+
+### BREAKING CHANGES
+
+* This requires the caluma backend version v8.0.0-beta.12
+or later.
+
+# [@projectcaluma/ember-form-builder-v11.0.0-beta.15](https://github.com/projectcaluma/ember-caluma/compare/@projectcaluma/ember-form-builder-v11.0.0-beta.14...@projectcaluma/ember-form-builder-v11.0.0-beta.15) (2022-08-02)
+
+
+### Features
+
+* **analytics:** adds analytics module for caluma ([#1655](https://github.com/projectcaluma/ember-caluma/issues/1655)) ([9573abe](https://github.com/projectcaluma/ember-caluma/commit/9573abe95cd39cb1467113026f2ab7773c3c9143))
+
+# [@projectcaluma/ember-form-builder-v11.0.0-beta.14](https://github.com/projectcaluma/ember-caluma/compare/@projectcaluma/ember-form-builder-v11.0.0-beta.13...@projectcaluma/ember-form-builder-v11.0.0-beta.14) (2022-06-09)
+
+
+### Features
+
+* **caluma:** use new filter syntax of caluma ([7a00c03](https://github.com/projectcaluma/ember-caluma/commit/7a00c03a103933d9e48dd88adb7382441a298742))
+
+
+### BREAKING CHANGES
+
+* **caluma:** `ember-caluma` now requires Caluma version >=
+8.0.0-beta.6
+
+# [@projectcaluma/ember-form-builder-v11.0.0-beta.13](https://github.com/projectcaluma/ember-caluma/compare/@projectcaluma/ember-form-builder-v11.0.0-beta.12...@projectcaluma/ember-form-builder-v11.0.0-beta.13) (2022-05-09)
+
+
+### Bug Fixes
+
+* **deps:** update ember-engines ([5aa5300](https://github.com/projectcaluma/ember-caluma/commit/5aa530074ea7dc08267d8ccc411eb1538537a1b5))
+* **resources:** fix deprecations of ember-resources ([7a84c5c](https://github.com/projectcaluma/ember-caluma/commit/7a84c5c78d5b28f7b5393c64722907728dd5f42b))
+
+# [@projectcaluma/ember-form-builder-v11.0.0-beta.12](https://github.com/projectcaluma/ember-caluma/compare/@projectcaluma/ember-form-builder-v11.0.0-beta.11...@projectcaluma/ember-form-builder-v11.0.0-beta.12) (2022-04-07)
+
+
+### Bug Fixes
+
+* **form-builder:** replace prismjs with highlight.js ([b92732c](https://github.com/projectcaluma/ember-caluma/commit/b92732c4586b2978dda80ad3643b6bd58c9605cb))
+
+
+### Features
+
+* **cf-field:** add optional hints for form fields ([d847fbf](https://github.com/projectcaluma/ember-caluma/commit/d847fbffa376ea60971fb9e91aff8bf54ce77d50))
+
+
+### BREAKING CHANGES
+
+* **cf-field:** Question hints requires Caluma >= v7.15.0
+
+Add option to create hints for certain question types. These
+are displayed below the input field and can be used to provide
+short, informative messages. Hints are available for all question
+types except for form, static and action button questions.
+
+# [@projectcaluma/ember-form-builder-v11.0.0-beta.11](https://github.com/projectcaluma/ember-caluma/compare/@projectcaluma/ember-form-builder-v11.0.0-beta.10...@projectcaluma/ember-form-builder-v11.0.0-beta.11) (2022-03-23)
+
+
+### Bug Fixes
+
+* **embroider:** add missing dependency on @ember/string ([3a6e6bb](https://github.com/projectcaluma/ember-caluma/commit/3a6e6bb39a8c1a40a2ae00b3d4ea00606a755e25))
+
+# [@projectcaluma/ember-form-builder-v11.0.0-beta.10](https://github.com/projectcaluma/ember-caluma/compare/@projectcaluma/ember-form-builder-v11.0.0-beta.9...@projectcaluma/ember-form-builder-v11.0.0-beta.10) (2022-03-11)
+
+
+### Bug Fixes
+
+* **form-builder:** fix typo in class for code editor ([b00014c](https://github.com/projectcaluma/ember-caluma/commit/b00014c9c7fd737f15fe3592daf85ba2ab89ab23))
+
+
+### Features
+
+* **form-builder:** add field for editing meta ([9176862](https://github.com/projectcaluma/ember-caluma/commit/91768623f98cfa438ee9f758a951e01da72ceb5d))
+* **form-builder:** add new categories published and unpublished ([52c1c1d](https://github.com/projectcaluma/ember-caluma/commit/52c1c1deaf15991e595e042f643889be64b425a0))
+* **form:** support passing component override classes ([9409c7c](https://github.com/projectcaluma/ember-caluma/commit/9409c7cb5901dcdffec1c0294046da64b74b9922))
+
 # [@projectcaluma/ember-form-builder-v11.0.0-beta.9](https://github.com/projectcaluma/ember-caluma/compare/@projectcaluma/ember-form-builder-v11.0.0-beta.8...@projectcaluma/ember-form-builder-v11.0.0-beta.9) (2022-02-23)
 
 

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

@@ -1,12 +1,28 @@
-{{component @labelComponent}}
+<div class="uk-margin">
+  <@labelComponent />
 
-<div
-  name={{@name}}
-  class="uk-textare 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"}}
+      {{on "blur" @setDirty}}
+    ></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-code-editor.js

@@ -1,25 +1,74 @@
 import { action } from "@ember/object";
+import { addObserver } from "@ember/object/observers";
 import Component from "@glimmer/component";
-import { tracked } from "@glimmer/tracking";
 import { CodeJar } from "codejar";
-import Prism from "prismjs";
-import "prismjs/components/prism-jexl.js";
-import "prismjs/components/prism-markdown.js";
+import hljs from "highlight.js/lib/core";
+import json from "highlight.js/lib/languages/json";
+import markdown from "highlight.js/lib/languages/markdown";
+import jexl from "highlightjs-jexl/src/languages/jexl";
+
+hljs.configure({ ignoreUnescapedHTML: true });
+
+hljs.registerLanguage("json", json);
+hljs.registerLanguage("markdown", markdown);
+hljs.registerLanguage("jexl", jexl);
 
 export default class CfbCodeEditorComponent extends Component {
-  editor;
-  @tracked show = false;
+  _editor = null;
+  _cursor = null;
+  _lastValue = null;
+
+  get value() {
+    const value = this.args.value;
+
+    if (this.args.language === "json" && typeof value === "object") {
+      return JSON.stringify(value?.unwrap?.() ?? value, null, 2);
+    }
+
+    return this.args.value;
+  }
+
+  @action
+  onUpdate(value) {
+    if (this._lastValue === value) return;
+
+    this._cursor = this._editor.save();
+
+    if (this.args.language === "json") {
+      try {
+        value = JSON.parse(value);
+      } catch {
+        // update value directly
+      }
+    }
+
+    this._lastValue = value;
+    this.args.update(value);
+  }
+
+  @action
+  updateCode() {
+    this._editor.updateCode(this.value);
+
+    if (this._cursor) {
+      this._editor.restore(this._cursor);
+      this._cursor = null;
+    }
+  }
 
   @action
   didInsertNode(element) {
-    const highlight = (editor) => Prism.highlightElement(editor);
-    this.editor = CodeJar(element, highlight);
-    this.editor.updateCode(this.args.value);
-    this.editor.onUpdate(this.args.update);
+    this._editor = CodeJar(element, (editor) => hljs.highlightElement(editor));
+    this._editor.onUpdate(this.onUpdate);
+
+    this.updateCode();
+
+    // eslint-disable-next-line ember/no-observers
+    addObserver(this.args, "value", this, "updateCode");
   }
 
   @action
   willDestroyNode() {
-    this.editor.destroy();
+    this._editor.destroy();
   }
 }

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

@@ -1,10 +1,10 @@
-import { getOwner } from "@ember/application";
 import { action } from "@ember/object";
 import { inject as service } from "@ember/service";
+import { macroCondition, isTesting } from "@embroider/macros";
 import Component from "@glimmer/component";
 import { queryManager } from "ember-apollo-client";
 import { timeout, restartableTask, dropTask } from "ember-concurrency";
-import { useTask } from "ember-resources";
+import { trackedTask } from "ember-resources/util/ember-concurrency";
 
 import FormValidations from "../../validations/form";
 
@@ -25,7 +25,7 @@ export default class CfbFormEditorGeneral extends Component {
     return this._data.value?.[0]?.node;
   }
 
-  _data = useTask(this, this.fetchData, () => [this.args.slug]);
+  _data = trackedTask(this, this.fetchData, () => [this.args.slug]);
 
   @restartableTask
   *fetchData() {
@@ -102,11 +102,10 @@ export default class CfbFormEditorGeneral extends Component {
 
   @restartableTask
   *validateSlug(slug, changeset) {
-    const { environment } =
-      getOwner(this).resolveRegistration("config:environment");
-
     /* istanbul ignore next */
-    if (environment !== "test") {
+    if (macroCondition(isTesting())) {
+      // no timeout
+    } else {
       yield timeout(500);
     }
 

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/default.js

@@ -1,6 +1,7 @@
 import { getOwner } from "@ember/application";
 import { action } from "@ember/object";
 import { inject as service } from "@ember/service";
+import { camelize } from "@ember/string";
 import Component from "@glimmer/component";
 
 import { TYPE_MAP } from "@projectcaluma/ember-form/lib/field";
@@ -60,16 +61,20 @@ export default class CfbFormEditorQuestionDefault extends Component {
       __typename: "Form",
     };
 
+    const typename = TYPE_MAP[this.args.model.__typename];
+    const valueKey = camelize(typename.replace(/Answer$/, "Value"));
+
     const newAnswer = {
       id: btoa(`Answer:dv-answer-${this.args.model.slug}`),
-      __typename: TYPE_MAP[this.args.model.__typename],
+      __typename: typename,
+      [valueKey]: undefined,
     };
 
     // The value depends on where it comes from. If there is a default value
     // present on load the `value.content` will be set. After an update through
     // this component the value will be a POJO on `value`.
     const answer = {
-      ...(this.args._value?.content || this.args._value || newAnswer),
+      ...(this.args.value?.content ?? this.args.value ?? newAnswer),
       question: this.question,
     };
 
@@ -115,8 +120,8 @@ export default class CfbFormEditorQuestionDefault extends Component {
 
     this.args.update({
       [this.field.answer._valueKey]: this.field.answer.serializedValue,
-      __typename: this.field.answer.__typename,
-      id: this.field.answer.id,
+      __typename: this.field.answer.raw.__typename,
+      id: this.field.answer.raw.id,
     });
 
     if (this.field.errors.length > 0) {

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/validation.js

@@ -2,7 +2,7 @@ import { action } from "@ember/object";
 import Component from "@glimmer/component";
 import { queryManager } from "ember-apollo-client";
 import { dropTask } from "ember-concurrency";
-import { useTask } from "ember-resources";
+import { trackedTask } from "ember-resources/util/ember-concurrency";
 
 import allFormatValidatorsQuery from "@projectcaluma/ember-form-builder/gql/queries/all-format-validators.graphql";
 
@@ -21,7 +21,7 @@ export default class CfbFormEditorQuestionValidation extends Component {
     );
   }
 
-  _validators = useTask(this, this.fetchFormatValidators, () => []);
+  _validators = trackedTask(this, this.fetchFormatValidators, () => []);
 
   @dropTask
   *fetchFormatValidators() {

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
@@ -80,12 +78,17 @@
 
     <span class="uk-position-relative uk-width-auto">
       <UkBadge
-        uk-tooltip="title: {{if
-          this.hidden
-          (t
-            (concat 'caluma.form-builder.question-list.hidden.' this.hiddenType)
+        {{uk-tooltip
+          (if
+            this.hidden
+            (t
+              (concat
+                "caluma.form-builder.question-list.hidden." this.hiddenType
+              )
+            )
           )
-        }}; pos: left"
+          pos="left"
+        }}
         class="cfb-form-editor__question-list__item__type
           {{if
             this.hidden
@@ -103,11 +106,14 @@
       />
       {{#if this.required}}
         <span
-          uk-tooltip="title: {{t
-            (concat
-              'caluma.form-builder.question-list.required.' this.requiredType
+          {{uk-tooltip
+            (t
+              (concat
+                "caluma.form-builder.question-list.required." this.requiredType
+              )
             )
-          }}; pos: top-left"
+            pos="top-left"
+          }}
           title={{t
             (concat
               "caluma.form-builder.question-list.required." this.requiredType

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

@@ -37,7 +37,7 @@
   </div>
 
   {{#if (includes this.mode (array "remove" "add"))}}
-    <form class="uk-search uk-search-default uk-width-1-1">
+    <div class="uk-search uk-search-default uk-width-1-1">
       <span class="uk-search-icon-flip" uk-search-icon></span>
       <input
         class="uk-search-input"
@@ -47,7 +47,7 @@
         value={{this.search}}
         {{on "input" (fn (mut this.search))}}
       />
-    </form>
+    </div>
   {{/if}}
 
   <ul

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

@@ -1,7 +1,7 @@
-import { getOwner } from "@ember/application";
 import { action } from "@ember/object";
 import { run } from "@ember/runloop";
 import { inject as service } from "@ember/service";
+import { macroCondition, isTesting } from "@embroider/macros";
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 import { queryManager } from "ember-apollo-client";
@@ -35,7 +35,7 @@ export default class ComponentsCfbFormEditorQuestionList extends Component {
   get questions() {
     return this.mode === "add"
       ? this.questionTaskValue
-      : this.questionTaskValue.firstObject?.node.questions.edges;
+      : this.questionTaskValue[0]?.node.questions.edges;
   }
 
   // Use built in input component when it works instead of this getter and setter
@@ -56,11 +56,13 @@ export default class ComponentsCfbFormEditorQuestionList extends Component {
     const mode = this.mode;
     const search = mode !== "reorder" ? this.search : "";
 
-    const { environment } =
-      getOwner(this).resolveRegistration("config:environment");
-
-    if (search && environment !== "test") {
-      yield timeout(500);
+    /* istanbul ignore next */
+    if (macroCondition(isTesting())) {
+      // no timeout
+    } else {
+      if (search) {
+        yield timeout(500);
+      }
     }
 
     if (mode === "add" && this.hasNextPage) {