@projectcaluma/ember-form 11.0.0-beta.13 → 11.0.0-beta.16

package/CHANGELOG.md

@@ -1,3 +1,26 @@
+# [@projectcaluma/ember-form-v11.0.0-beta.16](https://github.com/projectcaluma/ember-caluma/compare/@projectcaluma/ember-form-v11.0.0-beta.15...@projectcaluma/ember-form-v11.0.0-beta.16) (2022-03-23)
+
+
+### Bug Fixes
+
+* **embroider:** add missing dependency on @ember/string ([3a6e6bb](https://github.com/projectcaluma/ember-caluma/commit/3a6e6bb39a8c1a40a2ae00b3d4ea00606a755e25))
+* **embroider:** fix dynamic component usage ([1cf0f6e](https://github.com/projectcaluma/ember-caluma/commit/1cf0f6e2914651bbb0ec70d1f7485fd9db90c9b5))
+* **embroider:** remove obsolete export for getWidget helper function ([94fb461](https://github.com/projectcaluma/ember-caluma/commit/94fb461aaa7cac6af9f5612b8f34ad047a2b67bb))
+
+# [@projectcaluma/ember-form-v11.0.0-beta.15](https://github.com/projectcaluma/ember-caluma/compare/@projectcaluma/ember-form-v11.0.0-beta.14...@projectcaluma/ember-form-v11.0.0-beta.15) (2022-03-16)
+
+
+### Bug Fixes
+
+* **form:** make sure dynamic options are loaded before validating ([2713b37](https://github.com/projectcaluma/ember-caluma/commit/2713b3718b64f9111ca3e7bec2a6c60fafcb183a))
+
+# [@projectcaluma/ember-form-v11.0.0-beta.14](https://github.com/projectcaluma/ember-caluma/compare/@projectcaluma/ember-form-v11.0.0-beta.13...@projectcaluma/ember-form-v11.0.0-beta.14) (2022-03-11)
+
+
+### Bug Fixes
+
+* **form:** make sure table controls are always visible ([8cd97d2](https://github.com/projectcaluma/ember-caluma/commit/8cd97d204539f2e84b9baf9841591460bddf145a))
+
 # [@projectcaluma/ember-form-v11.0.0-beta.13](https://github.com/projectcaluma/ember-caluma/compare/@projectcaluma/ember-form-v11.0.0-beta.12...@projectcaluma/ember-form-v11.0.0-beta.13) (2022-03-11)
 
 

package/addon/components/cf-field/input/action-button.hbs

@@ -1,17 +1,23 @@
-<DocumentValidity
-  @document={{@field.document}}
-  @validateOnEnter={{this.validateOnEnter}}
-  as |isValid validate|
->
-  <WorkItemButton
-    @workItemId={{this.workItem}}
-    @mutation={{this.action}}
-    @label={{@field.question.raw.label}}
-    @disabled={{or (and (not-eq isValid null) (not isValid)) @disabled}}
-    @color={{this.color}}
-    @beforeMutate={{fn this.beforeMutate validate}}
-    @onSuccess={{this.onSuccess}}
-    @onError={{this.onError}}
-    class={{if @disabled "uk-hidden"}}
-  />
-</DocumentValidity>
+{{#if
+  (macroCondition
+    (macroDependencySatisfies "@projectcaluma/ember-workflow" "*")
+  )
+}}
+  <DocumentValidity
+    @document={{@field.document}}
+    @validateOnEnter={{this.validateOnEnter}}
+    as |isValid validate|
+  >
+    <WorkItemButton
+      @workItemId={{this.workItem}}
+      @mutation={{this.action}}
+      @label={{@field.question.raw.label}}
+      @disabled={{or (and (not-eq isValid null) (not isValid)) @disabled}}
+      @color={{this.color}}
+      @beforeMutate={{fn this.beforeMutate validate}}
+      @onSuccess={{this.onSuccess}}
+      @onError={{this.onError}}
+      class={{if @disabled "uk-hidden"}}
+    />
+  </DocumentValidity>
+{{/if}}

package/addon/components/cf-field/input/action-button.js

@@ -1,71 +1,78 @@
 import { assert } from "@ember/debug";
 import { action } from "@ember/object";
+import { dependencySatisfies, macroCondition } from "@embroider/macros";
 import Component from "@glimmer/component";
-import UIkit from "uikit";
+import { confirm } from "ember-uikit";
 
-async function confirm(text) {
-  try {
-    await UIkit.modal.confirm(text);
+let CfFieldInputActionButtonComponent;
 
-    return true;
-  } catch (error) {
-    return false;
-  }
-}
+if (macroCondition(dependencySatisfies("@projectcaluma/ember-workflow", ""))) {
+  CfFieldInputActionButtonComponent = class extends Component {
+    constructor(...args) {
+      super(...args);
+
+      assert(
+        "The document must have a `workItemUuid` for `<CfField::Input::ActionButton />` to work.",
+        this.args.field.document.workItemUuid
+      );
+    }
 
-export default class CfFieldInputActionButtonComponent extends Component {
-  constructor(...args) {
-    super(...args);
+    get workItem() {
+      return (
+        this.args.context?.actionButtonWorkItemId ||
+        this.args.field.document.workItemUuid
+      );
+    }
 
-    assert(
-      "The document must have a `workItemUuid` for `<CfField::Input::ActionButton />` to work.",
-      this.args.field.document.workItemUuid
-    );
-  }
+    get action() {
+      return this.args.field.question.raw.action.toLowerCase();
+    }
 
-  get workItem() {
-    return (
-      this.args.context?.actionButtonWorkItemId ||
-      this.args.field.document.workItemUuid
-    );
-  }
+    get color() {
+      return this.args.field.question.raw.color.toLowerCase();
+    }
 
-  get action() {
-    return this.args.field.question.raw.action.toLowerCase();
-  }
+    get validateOnEnter() {
+      return (
+        this.args.field.question.raw.action === "COMPLETE" &&
+        this.args.field.question.raw.validateOnEnter
+      );
+    }
 
-  get color() {
-    return this.args.field.question.raw.color.toLowerCase();
-  }
+    @action
+    async beforeMutate(validateFn) {
+      if (
+        this.args.field.question.raw.action === "COMPLETE" &&
+        !(await validateFn())
+      ) {
+        return false;
+      }
 
-  get validateOnEnter() {
-    return (
-      this.args.field.question.raw.action === "COMPLETE" &&
-      this.args.field.question.raw.validateOnEnter
-    );
-  }
+      const confirmText = this.args.field.question.raw.infoText;
 
-  @action
-  async beforeMutate(validateFn) {
-    if (
-      this.args.field.question.raw.action === "COMPLETE" &&
-      !(await validateFn())
-    ) {
-      return false;
+      return !confirmText || confirm(confirmText);
     }
 
-    const confirmText = this.args.field.question.raw.infoText;
-
-    return !confirmText || confirm(confirmText);
-  }
+    @action
+    onSuccess() {
+      return this.args.context?.actionButtonOnSuccess?.();
+    }
 
-  @action
-  onSuccess() {
-    return this.args.context?.actionButtonOnSuccess?.();
-  }
+    @action
+    onError(error) {
+      return this.args.context?.actionButtonOnError?.(error);
+    }
+  };
+} else {
+  CfFieldInputActionButtonComponent = class extends Component {
+    constructor(...args) {
+      super(...args);
 
-  @action
-  onError(error) {
-    return this.args.context?.actionButtonOnError?.(error);
-  }
+      assert(
+        "@projectcaluma/ember-workflow must be installed to enable the usage of the action button questions"
+      );
+    }
+  };
 }
+
+export default CfFieldInputActionButtonComponent;

package/addon/components/cf-field/input/checkbox.hbs

@@ -1,8 +1,7 @@
 {{#each @field.options as |option i|}}
-  {{#if (gt i 0)}}<br />{{/if}}
+  {{#if (and (gt i 0) (not @field.raw.question.meta.vertical))}}<br />{{/if}}
   <label
-    class="cf-checkbox_label
-      {{if @field.isInvalid 'uk-form-danger'}}
+    class="{{if @field.isInvalid 'uk-form-danger'}}
       {{if @field.raw.question.meta.vertical 'uk-margin-large-right'}}"
   >
     <input

package/addon/components/cf-field/input/powerselect.hbs

@@ -1,29 +1,27 @@
-{{#let (component this.componentName) as |DynamicSelect|}}
-  <DynamicSelect
-    @options={{@field.options}}
-    @selected={{@field.selected}}
-    @disabled={{@disabled}}
-    @allowClear={{true}}
-    @preventScroll={{true}}
-    @searchEnabled={{this.searchEnabled}}
-    @searchField="label"
-    @triggerId={{@field.pk}}
-    @renderInPlace={{true}}
-    @placeholder={{this.placeholder}}
-    @loadingMessage={{t "caluma.form.power-select.options-loading"}}
-    @searchMessage={{t "caluma.form.power-select.options-empty"}}
-    @searchPlaceholder={{t "caluma.form.power-select.search-placeholder"}}
-    @noMatchesMessage={{t "caluma.form.power-select.search-empty"}}
-    @onChange={{this.change}}
-    as |option|
-  >
-    {{#if (and option.disabled (not @disabled))}}
-      <del
-        class="uk-text-muted"
-        title={{t "caluma.form.optionNotAvailable"}}
-      >{{option.label}}</del>
-    {{else}}
-      {{option.label}}
-    {{/if}}
-  </DynamicSelect>
-{{/let}}
+<this.selectComponent
+  @options={{@field.options}}
+  @selected={{@field.selected}}
+  @disabled={{@disabled}}
+  @allowClear={{true}}
+  @preventScroll={{true}}
+  @searchEnabled={{this.searchEnabled}}
+  @searchField="label"
+  @triggerId={{@field.pk}}
+  @renderInPlace={{true}}
+  @placeholder={{this.placeholder}}
+  @loadingMessage={{t "caluma.form.power-select.options-loading"}}
+  @searchMessage={{t "caluma.form.power-select.options-empty"}}
+  @searchPlaceholder={{t "caluma.form.power-select.search-placeholder"}}
+  @noMatchesMessage={{t "caluma.form.power-select.search-empty"}}
+  @onChange={{this.change}}
+  as |option|
+>
+  {{#if (and option.disabled (not @disabled))}}
+    <del
+      class="uk-text-muted"
+      title={{t "caluma.form.optionNotAvailable"}}
+    >{{option.label}}</del>
+  {{else}}
+    {{option.label}}
+  {{/if}}
+</this.selectComponent>

package/addon/components/cf-field/input/powerselect.js

@@ -1,7 +1,10 @@
 import { getOwner } from "@ember/application";
 import { action } from "@ember/object";
 import { inject as service } from "@ember/service";
+import { ensureSafeComponent } from "@embroider/util";
 import Component from "@glimmer/component";
+import PowerSelectComponent from "ember-power-select/components/power-select";
+import PowerSelectMultipleComponent from "ember-power-select/components/power-select-multiple";
 
 /**
  * Dropdown component for the single and multiple choice question type
@@ -16,8 +19,11 @@ export default class CfFieldInputPowerselectComponent extends Component {
     return this.args.field?.question.isMultipleChoice;
   }
 
-  get componentName() {
-    return this.multiple ? "power-select-multiple" : "power-select";
+  get selectComponent() {
+    return ensureSafeComponent(
+      this.multiple ? PowerSelectMultipleComponent : PowerSelectComponent,
+      this
+    );
   }
 
   get searchEnabled() {

package/addon/components/cf-field/input/radio.hbs

@@ -1,5 +1,5 @@
 {{#each @field.options as |option i|}}
-  {{#if (gt i 0)}}<br />{{/if}}
+  {{#if (and (gt i 0) (not @field.raw.question.meta.vertical))}}<br />{{/if}}
   <label
     class="{{if @field.isInvalid 'uk-form-danger'}}
       {{if @field.raw.question.meta.vertical 'uk-margin-large-right'}}"

package/addon/components/cf-field/input/table.hbs

@@ -29,7 +29,7 @@
               @color="link"
               @onClick={{fn this.edit document}}
               title={{t "caluma.form.edit"}}
-              class="uk-flex-inline uk-margin-small-left"
+              class="uk-flex-inline uk-margin-small-left table-controls"
               data-test-edit-row
             >
               <UkIcon @icon="pencil" />
@@ -40,7 +40,7 @@
                 @color="link"
                 @onClick={{fn (perform this.delete) document}}
                 title={{t "caluma.form.delete"}}
-                class="uk-flex-inline uk-margin-small-left"
+                class="uk-flex-inline uk-margin-small-left table-controls"
                 data-test-delete-row
               >
                 <UkIcon @icon="trash" />

package/addon/components/cf-field/input/table.js

@@ -5,22 +5,12 @@ import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 import { queryManager } from "ember-apollo-client";
 import { dropTask } from "ember-concurrency";
-import UIkit from "uikit";
+import { confirm } from "ember-uikit";
 
 import removeDocumentMutation from "@projectcaluma/ember-form/gql/mutations/remove-document.graphql";
 import saveDocumentMutation from "@projectcaluma/ember-form/gql/mutations/save-document.graphql";
 import { parseDocument } from "@projectcaluma/ember-form/lib/parsers";
 
-async function confirm(text) {
-  try {
-    await UIkit.modal.confirm(text);
-
-    return true;
-  } catch (error) {
-    return false;
-  }
-}
-
 export default class CfFieldInputTableComponent extends Component {
   @service notification;
   @service intl;

package/addon/components/cf-field/input.hbs

@@ -1,21 +1,8 @@
-{{#if this.type}}
-  {{#let (component (concat "cf-field/input/" this.type)) as |InputComponent|}}
-    <div
-      class="uk-form-controls
-        {{if
-          (and
-            (has-question-type @field.question 'multiple-choice' 'choice')
-            @field.question.raw.meta.vertical
-          )
-          'uk-flex'
-        }}"
-    >
-      <InputComponent
-        @field={{@field}}
-        @disabled={{@disabled}}
-        @onSave={{@onSave}}
-        @context={{@context}}
-      />
-    </div>
-  {{/let}}
-{{/if}}
+<div class="uk-form-controls">
+  <this.inputComponent
+    @field={{@field}}
+    @disabled={{@disabled}}
+    @onSave={{@onSave}}
+    @context={{@context}}
+  />
+</div>

package/addon/components/cf-field/input.js

@@ -1,12 +1,33 @@
-import { dasherize } from "@ember/string";
+import { ensureSafeComponent } from "@embroider/util";
 import Component from "@glimmer/component";
 
-const mapping = {
-  MultipleChoiceQuestion: "checkbox",
-  ChoiceQuestion: "radio",
-  DynamicMultipleChoiceQuestion: "checkbox",
-  DynamicChoiceQuestion: "radio",
-  CalculatedFloatQuestion: "float",
+import ActionButtonComponent from "@projectcaluma/ember-form/components/cf-field/input/action-button";
+import CheckboxComponent from "@projectcaluma/ember-form/components/cf-field/input/checkbox";
+import DateComponent from "@projectcaluma/ember-form/components/cf-field/input/date";
+import FileComponent from "@projectcaluma/ember-form/components/cf-field/input/file";
+import FloatComponent from "@projectcaluma/ember-form/components/cf-field/input/float";
+import IntegerComponent from "@projectcaluma/ember-form/components/cf-field/input/integer";
+import RadioComponent from "@projectcaluma/ember-form/components/cf-field/input/radio";
+import StaticComponent from "@projectcaluma/ember-form/components/cf-field/input/static";
+import TableComponent from "@projectcaluma/ember-form/components/cf-field/input/table";
+import TextComponent from "@projectcaluma/ember-form/components/cf-field/input/text";
+import TextareaComponent from "@projectcaluma/ember-form/components/cf-field/input/textarea";
+
+const COMPONENT_MAPPING = {
+  ActionButtonQuestion: ActionButtonComponent,
+  CalculatedFloatQuestion: FloatComponent,
+  ChoiceQuestion: RadioComponent,
+  DateQuestion: DateComponent,
+  DynamicChoiceQuestion: RadioComponent,
+  DynamicMultipleChoiceQuestion: CheckboxComponent,
+  FileQuestion: FileComponent,
+  FloatQuestion: FloatComponent,
+  IntegerQuestion: IntegerComponent,
+  MultipleChoiceQuestion: CheckboxComponent,
+  StaticQuestion: StaticComponent,
+  TableQuestion: TableComponent,
+  TextareaQuestion: TextareaComponent,
+  TextQuestion: TextComponent,
 };
 
 /**
@@ -16,17 +37,14 @@ const mapping = {
  */
 export default class CfFieldInputComponent extends Component {
   /**
-   * The input component type
+   * The input component
    *
-   * @property {String} type
+   * @property {Component} inputComponent
    * @accessor
    */
-  get type() {
+  get inputComponent() {
     const typename = this.args.field?.question.raw.__typename;
 
-    return (
-      typename &&
-      (mapping[typename] || dasherize(typename.replace(/Question$/, "")))
-    );
+    return ensureSafeComponent(COMPONENT_MAPPING[typename], this);
   }
 }

package/addon/lib/field.js

@@ -777,6 +777,8 @@ export default class Field extends Base {
    * @private
    */
   async _validateDynamicChoiceQuestion() {
+    await this.question.dynamicOptions;
+
     return validate("inclusion", this.answer.value, {
       in: (this.options || []).map(({ slug }) => slug),
     });
@@ -797,6 +799,8 @@ export default class Field extends Base {
       return true;
     }
 
+    await this.question.dynamicOptions;
+
     return value.map((value) => {
       return validate("inclusion", value, {
         in: (this.options || []).map(({ slug }) => slug),

package/app/helpers/get-widget.js

@@ -1,4 +1 @@
-export {
-  default,
-  getWidget,
-} from "@projectcaluma/ember-form/helpers/get-widget";
+export { default } from "@projectcaluma/ember-form/helpers/get-widget";

package/app/styles/@projectcaluma/ember-form.scss

@@ -5,19 +5,7 @@
 
 @import "../uikit-overwrites";
 
-.cf-checkbox_label {
-  display: block;
-  position: relative;
-  padding-left: 26px;
-
-  .uk-checkbox {
-    position: absolute;
-    top: 0.25em;
-    left: 0;
-    margin: 0;
-  }
-
-  & + br {
-    display: none;
-  }
+.table-controls > .uk-icon {
+  min-height: 20px;
+  min-width: 20px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@projectcaluma/ember-form",
-  "version": "11.0.0-beta.13",
+  "version": "11.0.0-beta.16",
   "description": "Ember addon for rendering Caluma forms.",
   "keywords": [
     "ember-addon"
@@ -14,11 +14,13 @@
     "test:ember-compatibility": "ember try:each"
   },
   "dependencies": {
+    "@ember/string": "^3.0.0",
     "@embroider/macros": "^1.5.0",
+    "@embroider/util": "^1.5.0",
     "@glimmer/component": "^1.0.4",
     "@glimmer/tracking": "^1.0.4",
-    "@projectcaluma/ember-core": "^11.0.0-beta.5",
-    "ember-apollo-client": "^3.2.0",
+    "@projectcaluma/ember-core": "^11.0.0-beta.6",
+    "ember-apollo-client": "^4.0.2",
     "ember-auto-import": "^2.4.0",
     "ember-autoresize-modifier": "^0.5.0",
     "ember-cli-babel": "^7.26.11",
@@ -33,7 +35,7 @@
     "ember-pikaday": "^4.0.0",
     "ember-power-select": "^5.0.4",
     "ember-resources": "^4.4.0",
-    "ember-uikit": "^5.0.0",
+    "ember-uikit": "^5.1.1",
     "ember-validators": "^4.1.2",
     "graphql": "^15.8.0",
     "jexl": "^2.3.0",
@@ -45,9 +47,9 @@
     "@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",
-    "@projectcaluma/ember-workflow": "11.0.0-beta.4",
+    "@faker-js/faker": "6.0.0",
+    "@projectcaluma/ember-testing": "11.0.0-beta.5",
+    "@projectcaluma/ember-workflow": "11.0.0-beta.5",
     "broccoli-asset-rev": "3.0.0",
     "ember-cli": "3.28.5",
     "ember-cli-code-coverage": "1.0.3",
@@ -73,6 +75,14 @@
     "uuid": "8.3.2",
     "webpack": "5.70.0"
   },
+  "peerDependencies": {
+    "@projectcaluma/ember-workflow": "^11.0.0-beta.5"
+  },
+  "peerDependenciesMeta": {
+    "@projectcaluma/ember-workflow": {
+      "optional": true
+    }
+  },
   "engines": {
     "node": "12.* || 14.* || >= 16"
   },