Merge branch 'main' into toolbar

addons/rose/addon/components/rose/dropdown/link/index.hbs

@@ -1,20 +1,46 @@
+{{!
+  Ember's LinkTo component won't accept nullish @query or @model, so we have to
+  overcompensate by duplicating it four times, one for every combination.
+  This is really unpleasant.
+}}
 {{#if @model}}
-  <LinkTo
-    ...attributes
-    @route={{@route}}
-    @query={{@query}}
-    @model={{@model}}
-    class="rose-dropdown-link {{if  @style (concat "rose-dropdown-link-" @style)}}"
-  >
-    {{yield}}
-  </LinkTo>
+  {{#if @query}}
+    <LinkTo
+      ...attributes
+      @route={{@route}}
+      @query={{@query}}
+      @model={{@model}}
+      class="rose-dropdown-link {{if  @style (concat "rose-dropdown-link-" @style)}}"
+    >
+      {{yield}}
+    </LinkTo>
+  {{else}}
+    <LinkTo
+      ...attributes
+      @route={{@route}}
+      @model={{@model}}
+      class="rose-dropdown-link {{if  @style (concat "rose-dropdown-link-" @style)}}"
+    >
+      {{yield}}
+    </LinkTo>
+  {{/if}}
 {{else}}
-  <LinkTo
-    ...attributes
-    @route={{@route}}
-    @query={{@query}}
-    class="rose-dropdown-link {{if  @style (concat "rose-dropdown-link-" @style)}}"
-  >
-    {{yield}}
-  </LinkTo>
+  {{#if @query}}
+    <LinkTo
+      ...attributes
+      @route={{@route}}
+      @query={{@query}}
+      class="rose-dropdown-link {{if  @style (concat "rose-dropdown-link-" @style)}}"
+    >
+      {{yield}}
+    </LinkTo>
+  {{else}}
+    <LinkTo
+      ...attributes
+      @route={{@route}}
+      class="rose-dropdown-link {{if  @style (concat "rose-dropdown-link-" @style)}}"
+    >
+      {{yield}}
+    </LinkTo>
+  {{/if}}
 {{/if}}

addons/rose/addon/components/rose/form/checkbox/group/index.hbs

@@ -0,0 +1,12 @@
+{{#each @items as |item|}}
+  {{yield (hash
+    item=item
+    checkbox=(component 'rose/form/checkbox'
+      name=@name
+      disabled=@disabled
+      inline=@inline
+      checked=(includes item @selectedItems)
+      onChange=(fn this.toggleItem item)
+    )
+  )}}
+{{/each}}

addons/rose/addon/components/rose/form/checkbox/group/index.js

@@ -0,0 +1,37 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+/**
+ * A checkbox group represents an array of arbitrary items, which differs from
+ * single checkboxes which represent boolean values.  When checkboxes within a
+ * checkbox are toggled, their associated item is toggled within the group's
+ * array value.
+ *
+ * The term "item" is used to disambiguate it from "value", which has an
+ * existing meaning in the context of form fields.  However, items
+ * are just arbitrary values.
+ */
+export default class RoseFormCheckboxGroupComponent extends Component {
+  // =actions
+
+  /**
+   * Returns a new copy of the @selectedItems array where the given item is:
+   *   - removed from the array, if it was already present
+   *   - or added to the array, if it was not already present
+   */
+  @action
+  toggleItem(item) {
+    const selectedItems = this.args.selectedItems || [];
+    const currentItems = [...selectedItems];
+
+    if (currentItems.includes(item)) {
+      const i = currentItems.indexOf(item);
+      currentItems.splice(i, 1);
+    } else {
+      currentItems.push(item);
+    }
+
+    if (this.args.onChange) this.args.onChange(currentItems);
+  }
+}

addons/rose/addon/components/rose/form/checkbox/group/index.stories.mdx

@@ -0,0 +1,54 @@
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import { hbs } from 'ember-cli-htmlbars';
+import { action } from '@storybook/addon-actions';
+import { text, boolean, select, object } from '@storybook/addon-knobs';
+
+<Meta title="Rose|Form/Checkbox/Group" component="Form/Checkbox/Group" />
+
+# Form checkboxfield group
+
+Renders a form checkboxfield group.
+
+```htmlbars
+<Rose::Form::Checkbox::Group
+  @name='checkbox-group'
+  @items={{this.items}}
+  @selectedItems={{this.selectedItems}}
+  @onChange={{fn this.onChange}}
+  as |group|
+>
+  <group.checkbox
+    @label={{group.item.name}}
+    value={{group.item.id}} />
+</Rose::Form::Checkbox::Group>
+```
+<Preview>
+  <Story name="Basic" height="10rem">{{
+  template: hbs`
+    <Rose::Form::Checkbox::Group
+      @name={{name}}
+      @inline={{inline}}
+      @disabled={{disabled}}
+      @items={{items}}
+      @selectedItems={{selectedItems}}
+      @onChange={{onChange}}
+      as |group|
+    >
+      <group.checkbox
+        @label={{group.item.name}}
+        value={{group.item.id}} />
+    </Rose::Form::Checkbox::Group>
+  `,
+  context: {
+    inline: boolean('inline', true),
+    disabled: boolean('disabled', false),
+    items: object('items', [
+      { id: 1, name: 'Foo' },
+      { id: 2, name: 'Bar' },
+      { id: 3, name: 'Baz' },
+    ]),
+    selectedItems: object('selectedItems', []),
+    onChange: action('changed'),
+  }
+  }}</Story>
+</Preview>

addons/rose/addon/components/rose/form/checkbox/index.hbs

@@ -6,6 +6,7 @@
     id={{this.id}}
     name={{@name}}
     disabled={{@disabled}}
+    onChange={{@onChange}}
     @type="checkbox"
     @checked={{if @checked true false}}
     aria-describedby="{{if @helperText (concat 'helper-text-' this.id)}} {{if @error (concat 'errors-' this.id)}}" />