@projectcaluma/ember-form-builder 11.0.0-beta.10 → 11.0.0-beta.13

package/CHANGELOG.md

@@ -1,3 +1,40 @@
+# [@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)
 
 

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

@@ -2,11 +2,14 @@ import { action } from "@ember/object";
 import { addObserver } from "@ember/object/observers";
 import Component from "@glimmer/component";
 import { CodeJar } from "codejar";
-import Prism from "prismjs";
+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";
 
-import "prismjs/components/prism-json.js";
-import "prismjs/components/prism-jexl.js";
-import "prismjs/components/prism-markdown.js";
+hljs.registerLanguage("json", json);
+hljs.registerLanguage("markdown", markdown);
+hljs.registerLanguage("jexl", jexl);
 
 export default class CfbCodeEditorComponent extends Component {
   _editor = null;
@@ -54,7 +57,7 @@ export default class CfbCodeEditorComponent extends Component {
 
   @action
   didInsertNode(element) {
-    this._editor = CodeJar(element, (editor) => Prism.highlightElement(editor));
+    this._editor = CodeJar(element, (editor) => hljs.highlightElement(editor));
     this._editor.onUpdate(this.onUpdate);
 
     this.updateCode();

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

@@ -4,7 +4,7 @@ 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() {

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.hbs

@@ -164,6 +164,13 @@
         </div>
       {{/if}}
 
+      {{#if (not (has-question-type f.model "action-button" "static" "form"))}}
+        <f.input
+          @name="hintText"
+          @label={{t "caluma.form-builder.question.hintText"}}
+        />
+      {{/if}}
+
       {{#if (has-question-type f.model "text" "textarea" "integer" "float")}}
         <f.input
           @name="placeholder"
@@ -367,7 +374,7 @@
             >
               {{#each this.model.rowForm.questions.edges as |rowEdge|}}
                 {{#let rowEdge.node as |row|}}
-                  <label class="cf-checkbox_label">
+                  <label>
                     <input
                       type="checkbox"
                       value={{row.slug}}

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

@@ -238,6 +238,7 @@ export default class CfbFormEditorQuestion extends Component {
       minValue: parseInt(changeset.get("integerMinValue")),
       maxValue: parseInt(changeset.get("integerMaxValue")),
       placeholder: changeset.get("placeholder"),
+      hintText: changeset.get("hintText"),
     };
   }
 
@@ -246,6 +247,7 @@ export default class CfbFormEditorQuestion extends Component {
       minValue: parseFloat(changeset.get("floatMinValue")),
       maxValue: parseFloat(changeset.get("floatMaxValue")),
       placeholder: changeset.get("placeholder"),
+      hintText: changeset.get("hintText"),
     };
   }
 
@@ -257,6 +259,7 @@ export default class CfbFormEditorQuestion extends Component {
       formatValidators: changeset
         .get("formatValidators")
         ?.edges.map((edge) => edge.node.slug),
+      hintText: changeset.get("hintText"),
     };
   }
 
@@ -268,36 +271,48 @@ export default class CfbFormEditorQuestion extends Component {
       formatValidators: changeset
         .get("formatValidators")
         ?.edges.map((edge) => edge.node.slug),
+      hintText: changeset.get("hintText"),
+    };
+  }
+
+  _getDateQuestionInput(changeset) {
+    return {
+      hintText: changeset.get("hintText"),
     };
   }
 
   _getMultipleChoiceQuestionInput(changeset) {
     return {
       options: changeset.get("options.edges").map(({ node: { slug } }) => slug),
+      hintText: changeset.get("hintText"),
     };
   }
 
   _getChoiceQuestionInput(changeset) {
     return {
       options: changeset.get("options.edges").map(({ node: { slug } }) => slug),
+      hintText: changeset.get("hintText"),
     };
   }
 
   _getDynamicMultipleChoiceQuestionInput(changeset) {
     return {
       dataSource: changeset.get("dataSource"),
+      hintText: changeset.get("hintText"),
     };
   }
 
   _getDynamicChoiceQuestionInput(changeset) {
     return {
       dataSource: changeset.get("dataSource"),
+      hintText: changeset.get("hintText"),
     };
   }
 
   _getTableQuestionInput(changeset) {
     return {
       rowForm: changeset.get("rowForm.slug"),
+      hintText: changeset.get("hintText"),
     };
   }
 
@@ -316,6 +331,13 @@ export default class CfbFormEditorQuestion extends Component {
   _getCalculatedFloatQuestionInput(changeset) {
     return {
       calcExpression: changeset.get("calcExpression"),
+      hintText: changeset.get("hintText"),
+    };
+  }
+
+  _getFileQuestionInput(changeset) {
+    return {
+      hintText: changeset.get("hintText"),
     };
   }
 

package/addon/gql/fragments/field.graphql

@@ -19,6 +19,7 @@ fragment SimpleQuestion on Question {
       value
     }
     placeholder
+    hintText
   }
   ... on TextareaQuestion {
     textareaMinLength: minLength
@@ -28,6 +29,7 @@ fragment SimpleQuestion on Question {
       value
     }
     placeholder
+    hintText
   }
   ... on IntegerQuestion {
     integerMinValue: minValue
@@ -37,6 +39,7 @@ fragment SimpleQuestion on Question {
       value
     }
     placeholder
+    hintText
   }
   ... on FloatQuestion {
     floatMinValue: minValue
@@ -46,6 +49,7 @@ fragment SimpleQuestion on Question {
       value
     }
     placeholder
+    hintText
   }
   ... on ChoiceQuestion {
     choiceOptions: options {
@@ -62,6 +66,7 @@ fragment SimpleQuestion on Question {
       id
       value
     }
+    hintText
   }
   ... on MultipleChoiceQuestion {
     multipleChoiceOptions: options {
@@ -78,18 +83,24 @@ fragment SimpleQuestion on Question {
       id
       value
     }
+    hintText
   }
   ... on DateQuestion {
     dateDefaultAnswer: defaultAnswer {
       id
       value
     }
+    hintText
   }
   ... on StaticQuestion {
     staticContent
   }
   ... on CalculatedFloatQuestion {
     calcExpression
+    hintText
+  }
+  ... on FileQuestion {
+    hintText
   }
   ... on ActionButtonQuestion {
     action
@@ -112,6 +123,7 @@ fragment FieldTableQuestion on Question {
         }
       }
     }
+    hintText
     tableDefaultAnswer: defaultAnswer {
       id
       value {

package/addon/gql/mutations/save-calculated-float-question.graphql

@@ -9,6 +9,7 @@ mutation SaveCalculatedFloatQuestion(
       ...QuestionInfo
       ... on CalculatedFloatQuestion {
         calcExpression
+        hintText
       }
     }
     clientMutationId

package/addon/gql/mutations/save-choice-question.graphql

@@ -15,6 +15,7 @@ mutation SaveChoiceQuestion($input: SaveChoiceQuestionInput!) {
             }
           }
         }
+        hintText
       }
     }
     clientMutationId

package/addon/gql/mutations/save-date-question.graphql

@@ -5,6 +5,9 @@ mutation SaveDateQuestion($input: SaveDateQuestionInput!) {
     question {
       id
       ...QuestionInfo
+      ... on DateQuestion {
+        hintText
+      }
     }
     clientMutationId
   }

package/addon/gql/mutations/save-dynamic-choice-question.graphql

@@ -7,6 +7,7 @@ mutation SaveDynamicChoiceQuestion($input: SaveDynamicChoiceQuestionInput!) {
       ...QuestionInfo
       ... on DynamicChoiceQuestion {
         dataSource
+        hintText
       }
     }
     clientMutationId

package/addon/gql/mutations/save-dynamic-multiple-choice-question.graphql

@@ -9,6 +9,7 @@ mutation SaveDynamicMultipleChoiceQuestion(
       ...QuestionInfo
       ... on DynamicMultipleChoiceQuestion {
         dataSource
+        hintText
       }
     }
     clientMutationId

package/addon/gql/mutations/save-file-question.graphql

@@ -5,6 +5,9 @@ mutation SaveFileQuestion($input: SaveFileQuestionInput!) {
     question {
       id
       ...QuestionInfo
+      ... on FileQuestion {
+        hintText
+      }
     }
     clientMutationId
   }

package/addon/gql/mutations/save-float-question.graphql

@@ -8,6 +8,7 @@ mutation SaveFloatQuestion($input: SaveFloatQuestionInput!) {
       ... on FloatQuestion {
         floatMinValue: minValue
         floatMaxValue: maxValue
+        hintText
       }
     }
     clientMutationId

package/addon/gql/mutations/save-integer-question.graphql

@@ -8,6 +8,7 @@ mutation SaveIntegerQuestion($input: SaveIntegerQuestionInput!) {
       ... on IntegerQuestion {
         integerMinValue: minValue
         integerMaxValue: maxValue
+        hintText
       }
     }
     clientMutationId

package/addon/gql/mutations/save-multiple-choice-question.graphql

@@ -15,6 +15,7 @@ mutation SaveMultipleChoiceQuestion($input: SaveMultipleChoiceQuestionInput!) {
             }
           }
         }
+        hintText
       }
     }
     clientMutationId

package/addon/gql/mutations/save-table-question.graphql

@@ -10,6 +10,7 @@ mutation SaveTableQuestion($input: SaveTableQuestionInput!) {
           id
           slug
         }
+        hintText
       }
     }
     clientMutationId

package/addon/gql/mutations/save-text-question.graphql

@@ -8,6 +8,7 @@ mutation SaveTextQuestion($input: SaveTextQuestionInput!) {
       ... on TextQuestion {
         minLength
         maxLength
+        hintText
       }
     }
     clientMutationId

package/addon/gql/mutations/save-textarea-question.graphql

@@ -8,6 +8,7 @@ mutation SaveTextareaQuestion($input: SaveTextareaQuestionInput!) {
       ... on TextareaQuestion {
         minLength
         maxLength
+        hintText
       }
     }
     clientMutationId

package/addon/gql/queries/form-editor-question.graphql

@@ -11,6 +11,7 @@ query FormEditorQuestion($slug: String!) {
           integerMaxValue: maxValue
           integerMinValue: minValue
           placeholder
+          hintText
           defaultAnswer {
             id
             integerValue: value
@@ -20,6 +21,7 @@ query FormEditorQuestion($slug: String!) {
           floatMaxValue: maxValue
           floatMinValue: minValue
           placeholder
+          hintText
           defaultAnswer {
             id
             floatValue: value
@@ -29,6 +31,7 @@ query FormEditorQuestion($slug: String!) {
           minLength
           maxLength
           placeholder
+          hintText
           defaultAnswer {
             id
             stringValue: value
@@ -52,12 +55,14 @@ query FormEditorQuestion($slug: String!) {
               }
             }
           }
+          hintText
           defaultAnswer {
             id
             stringValue: value
           }
         }
         ... on DateQuestion {
+          hintText
           defaultAnswer {
             id
             dateValue: value
@@ -74,6 +79,7 @@ query FormEditorQuestion($slug: String!) {
               }
             }
           }
+          hintText
           defaultAnswer {
             id
             listValue: value
@@ -90,6 +96,7 @@ query FormEditorQuestion($slug: String!) {
               }
             }
           }
+          hintText
           defaultAnswer {
             id
             stringValue: value
@@ -97,9 +104,11 @@ query FormEditorQuestion($slug: String!) {
         }
         ... on DynamicMultipleChoiceQuestion {
           dataSource
+          hintText
         }
         ... on DynamicChoiceQuestion {
           dataSource
+          hintText
         }
         ... on TableQuestion {
           rowForm {
@@ -115,6 +124,7 @@ query FormEditorQuestion($slug: String!) {
               }
             }
           }
+          hintText
           defaultAnswer {
             id
             tableValue: value {
@@ -151,6 +161,10 @@ query FormEditorQuestion($slug: String!) {
         }
         ... on CalculatedFloatQuestion {
           calcExpression
+          hintText
+        }
+        ... on FileQuestion {
+          hintText
         }
         ... on ActionButtonQuestion {
           action

package/addon/validations/question.js

@@ -16,6 +16,12 @@ export default {
   label: and(validatePresence(true), validateLength({ max: 1024 })),
   slug: validateSlug(),
 
+  hintText: or(
+    validateType("FormQuestion", true),
+    validateType("StaticQuestion", true),
+    validateType("FileQuestion", true),
+    validateLength({ max: 1024, allowBlank: true })
+  ),
   integerMinValue: or(
     validateType("IntegerQuestion", false),
     and(

package/index.js

@@ -9,10 +9,4 @@ module.exports = buildEngine({
   lazyLoading: {
     enabled: false,
   },
-
-  included(...args) {
-    this._super.included.apply(this, args);
-
-    this.import("node_modules/prismjs/themes/prism.css");
-  },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@projectcaluma/ember-form-builder",
-  "version": "11.0.0-beta.10",
+  "version": "11.0.0-beta.13",
   "description": "Ember engine for building Caluma forms.",
   "keywords": [
     "ember-addon",
@@ -19,16 +19,17 @@
   },
   "dependencies": {
     "@ember/render-modifiers": "^2.0.4",
-    "@embroider/macros": "^1.5.0",
-    "@glimmer/component": "^1.0.4",
-    "@glimmer/tracking": "^1.0.4",
-    "@projectcaluma/ember-core": "^11.0.0-beta.5",
-    "@projectcaluma/ember-form": "^11.0.0-beta.13",
-    "codejar": "^3.5.0",
-    "ember-apollo-client": "^3.2.0",
-    "ember-auto-import": "^2.4.0",
-    "ember-changeset": "^4.0.0-beta.5",
-    "ember-changeset-validations": "^4.0.0-beta.3",
+    "@ember/string": "^3.0.0",
+    "@embroider/macros": "^1.6.0",
+    "@glimmer/component": "^1.1.2",
+    "@glimmer/tracking": "^1.1.2",
+    "@projectcaluma/ember-core": "^11.0.0-beta.7",
+    "@projectcaluma/ember-form": "^11.0.0-beta.19",
+    "codejar": "^3.6.0",
+    "ember-apollo-client": "^4.0.2",
+    "ember-auto-import": "^2.4.1",
+    "ember-changeset": "^4.1.0",
+    "ember-changeset-validations": "^4.1.0",
     "ember-cli-babel": "^7.26.11",
     "ember-cli-htmlbars": "^6.0.1",
     "ember-composable-helpers": "^5.0.0",
@@ -39,48 +40,54 @@
     "ember-math-helpers": "^2.18.1",
     "ember-pikaday": "^4.0.0",
     "ember-power-select": "^5.0.4",
-    "ember-resources": "^4.4.0",
+    "ember-resources": "^4.7.1",
     "ember-test-selectors": "^6.0.0",
-    "ember-uikit": "^5.0.0",
+    "ember-uikit": "^5.1.3",
     "ember-validated-form": "^5.3.0",
     "graphql": "^15.8.0",
     "graphql-tag": "^2.12.6",
-    "jexl": "^2.3.0",
-    "prismjs": "^1.27.0"
+    "highlight.js": "^11.5.1",
+    "highlightjs-jexl": "^0.0.5",
+    "jexl": "^2.3.0"
   },
-  "//": "TODO: remove ember-data when https://github.com/ember-engines/ember-engines/pull/794 is released",
+  "//": [
+    "TODO: remove obsolete dependency to `ember-data` which is only necessary",
+    "because @embroider/macros `dependencySatisfies` still resolves to `true`",
+    "even if the dependency is only present in the workspace (because of the",
+    "docs app) but not as direct dependency of the package."
+  ],
   "devDependencies": {
     "@ember/optional-features": "2.0.0",
-    "@ember/test-helpers": "2.6.0",
-    "@embroider/test-setup": "1.5.0",
-    "@faker-js/faker": "6.0.0-beta.0",
-    "@projectcaluma/ember-testing": "11.0.0-beta.4",
+    "@ember/test-helpers": "2.7.0",
+    "@embroider/test-setup": "1.6.0",
+    "@faker-js/faker": "6.3.1",
+    "@projectcaluma/ember-testing": "11.0.0-beta.7",
     "broccoli-asset-rev": "3.0.0",
     "ember-autoresize-modifier": "^0.5.0",
     "ember-cli": "3.28.5",
     "ember-cli-code-coverage": "1.0.3",
-    "ember-cli-dependency-checker": "3.2.0",
+    "ember-cli-dependency-checker": "3.3.1",
     "ember-cli-inject-live-reload": "2.1.0",
-    "ember-cli-mirage": "3.0.0-alpha.2",
+    "ember-cli-mirage": "3.0.0-alpha.3",
     "ember-cli-sri": "2.1.1",
     "ember-cli-terser": "4.0.2",
-    "ember-data": "3.28.8",
+    "ember-data": "3.28.9",
     "ember-disable-prototype-extensions": "1.1.3",
-    "ember-engines": "0.8.20",
+    "ember-engines": "0.8.22",
     "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.8",
+    "ember-source": "3.28.9",
     "ember-source-channel-url": "3.0.0",
     "ember-try": "2.0.0",
     "loader.js": "4.7.0",
     "miragejs": "0.1.43",
     "npm-run-all": "4.1.5",
-    "qunit": "2.18.0",
+    "qunit": "2.19.1",
     "qunit-dom": "2.0.0",
-    "webpack": "5.70.0"
+    "webpack": "5.72.0"
   },
   "engines": {
     "node": "12.* || 14.* || >= 16"

package/translations/de.yaml

@@ -51,6 +51,7 @@ caluma:
       isRequired: "Pflichtfeld"
       staticContent: "Statischer Inhalt"
       infoText: "Infotext"
+      hintText: "Hinweistext"
       confirmationText: "Bestätigungstext"
       placeholder: "Platzhalter"
       isHidden: "Versteckt (JEXL)"

package/translations/en.yaml

@@ -51,6 +51,7 @@ caluma:
       isRequired: "Required"
       staticContent: "Static content"
       infoText: "Information text"
+      hintText: "Hint text"
       confirmationText: "Confirmation text"
       placeholder: "Placeholder"
       isHidden: "Hidden (JEXL)"