@xdam/ember-partials 2.0.3 → 3.0.0

package/addon/components/xep-button.hbs

@@ -0,0 +1,33 @@
+<button
+  class={{concat
+    "xep-button mdc-button "
+    this.dense
+    " "
+    this.active
+    " "
+    this.variantClassNames
+    " "
+    this.colorClassNames
+    " "
+    this.dialogDefaultAction
+  }}
+  data-test-button={{@testSelector}}
+  data-mdc-dialog-action={{@dialogActionName}}
+  title={{@title}}
+  tabindex={{@tabindex}}
+  type={{@type}}
+  name={{@name}}
+  value={{@value}}
+  disabled={{this.disabled}}
+  {{on "click" this.onClick}}
+>
+  {{#if this.includeRipple}}
+    <span class="mdc-button__ripple"></span>
+  {{/if}}
+  <span class="mdc-button__label">
+    {{yield
+      (hash
+        active=@active)
+    }}
+  </span>
+</button>

package/addon/components/xep-button.js

@@ -1,11 +1,6 @@
-import Component from '@ember/component';
-import {
-  classNames, attribute, className, tagName, layout,
-} from '@ember-decorators/component';
-import EmberObject, { computed } from '@ember/object';
-import template from '@xdam/ember-partials/templates/components/xep-button';
+import Component from '@glimmer/component';
+import EmberObject, { action } from '@ember/object';
 import { inject as service } from '@ember/service';
-import classic from 'ember-classic-decorator';
 
 const VARIANT_TYPES = {
   // Defaults to a text button that is flush with the surface.
@@ -30,10 +25,6 @@ const VARIANT_TYPES = {
  * @yield {Hash} button
  * @yield {Boolean} button.active
  */
-@classic
-@layout(template)
-@tagName('button')
-@classNames('xep-button', 'mdc-button')
 export default class XepButtonComponent extends Component {
   @service
   xepManager;
@@ -43,64 +34,56 @@ export default class XepButtonComponent extends Component {
    * @argument [testSelector]
    * @type {String}
    */
-  @attribute('data-test-button')
-  testSelector;
 
   /**
    * Define the buttons `title` attribute.
    * @argument [tabindex]
    * @type {String}
    */
-  @attribute
-  title;
 
   /**
    * Define the `tabindex` attribute.
    * @argument [tabindex]
    * @type {Number}
    */
-  @attribute
-  tabindex;
 
   /**
    * Define the `type` attribute.
    * @argument [type]
    * @type {String}
    */
-  @attribute
-  type;
 
   /**
    * Define the `name` attribute.
    * @argument [name]
    * @type {String}
    */
-  @attribute
-  name;
 
   /**
    * Define the `value` attribute.
    * @argument [value]
    * @type {*}
    */
-  @attribute
-  value;
 
   /**
    * Define the `disabled` attribute.
    * @argument [disabled]
    * @type {Boolean}
    */
-  @attribute
-  disabled;
+  get disabled() {
+    const returnVal = this.args.disabled != true ? null : true;
+
+    return returnVal;
+  }
 
   /**
    * Makes the button text and container slightly smaller.
    * @argument [dense]
    * @type {Boolean}
    */
-  @className('mdc-button--dense')
-  dense;
+  get dense() {
+    return this.args.dense ? 'mdc-button--dense' : '';
+  }
 
   /**
    * Gives button an "xep-button--active" className for custom styling. Buttons also yield the `active` state,
@@ -108,45 +91,51 @@ export default class XepButtonComponent extends Component {
    * @argument [active]
    * @type {Boolean}
    */
-  @className('xep-button--active')
-  active;
+  get active() {
+    return this.args.active ? 'xep-button--active' : '';
+  }
 
   /**
    * Define an action name for use with xep-dialog.
    * @argument [dialogActionName]
    * @type {String}
    */
-  @attribute('data-mdc-dialog-action')
-  dialogActionName;
 
   /**
    * Define xep-dialog default action button.
    * @argument [dialogActionName]
    * @type {Boolean}
    */
-  @className('mdc-dialog__button--default')
-  dialogDefaultAction;
+  get dialogDefaultAction() {
+    return this.args.dialogDefaultAction ? 'mdc-dialog__button--default' : '';
+  }
 
   /**
    * Specify a string which the component should be registered with xepManager. Defaults to `null`.
    * @argument [register]
    * @type {String}
    */
-  register;
 
   /**
    * Provide an action for when the component is clicked.
    * @argument [click]
    * @type {Action}
    */
-  click;
+  @action
+  async onClick(evt) {
+    if (this.args.click) {
+      await this.args.click(evt);
+    }
+  }
 
   /**
    * Define the variant type for the button. Defaults to `"standard"`.
    * @argument variant
    * @type {String}
    */
-  variant = 'standard';
+  get variant() {
+    return this.args.variant || 'standard';
+  }
 
   // Map of classNames for each variant type
   variantTypeMap = EmberObject.create(VARIANT_TYPES);
@@ -158,9 +147,6 @@ export default class XepButtonComponent extends Component {
    * @type {String}
    * @readOnly
    */
-  @className
-  // eslint-disable-next-line ember/require-computed-property-dependencies
-  @computed('variant')
   get variantClassNames() {
     return this.variantTypeMap[this.variant];
   }
@@ -172,7 +158,9 @@ export default class XepButtonComponent extends Component {
    * @argument color
    * @type {String}
    */
-  color = 'primary';
+  get color() {
+    return this.args.color || 'primary';
+  }
 
   /**
    * Returns color classNames
@@ -181,22 +169,35 @@ export default class XepButtonComponent extends Component {
    * @type {String}
    * @readOnly
    */
-  @className
-  @computed('color')
   get colorClassNames() {
     return `xep-button--${this.color}-color`;
   }
 
-  init() {
-    super.init(...arguments);
-    if (this.register) {
-      this.xepManager.registerComponent(this, this.register);
+  /**
+   * Indicate whether a hover/click response ("ripple") should be
+   * included on the button. Default is to include the "ripple".
+   *
+   * @argument includeRipple
+   * @type {Boolean}
+   * @readOnly
+   */
+  get includeRipple() {
+    if (this.args.includeRipple !== null && (this.args.includeRipple === false || this.args.includeRipple === 'false')) {
+      return false;
+    }
+    return true;
+  }
+
+  constructor() {
+    super(...arguments);
+    if (this.args.register) {
+      this.xepManager.registerComponent(this, this.args.register);
     }
   }
 
   willDestroy() {
-    if (this.register) {
-      this.xepManager.deregisterComponent(this, this.register);
+    if (this.args.register) {
+      this.xepManager.deregisterComponent(this, this.args.register);
     }
 
     super.willDestroy(...arguments);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xdam/ember-partials",
-  "version": "2.0.3",
+  "version": "3.0.0",
   "description": "Xdam Ember Partials https://xdam.github.io/ember-partials/versions/development/",
   "keywords": [
     "ember-addon"

package/addon/templates/components/xep-button.hbs

@@ -1,7 +0,0 @@
-<span class="mdc-button__ripple"></span>
-<span class="mdc-button__label">
-  {{yield
-    (hash
-      active=@active)
-  }}
-</span>