fix(all): explicitly specify none coerce

This silences the plugin warning and avoids "undefined" strings when usePropertyTypeForBindable is turned on
aurelia-ui-toolkits · Nov 5, 2022 · e91098f · e91098f
1 parent 1a54e9a
commit e91098f
Show file tree

Hide file tree

Showing 38 changed files with 103 additions and 96 deletions.
diff --git a/packages/app/src/elements/hljs/hljs.ts b/packages/app/src/elements/hljs/hljs.ts
@@ -12,7 +12,7 @@ export class Hljs {
   codeEl: HTMLElement;
   observer?: MutationObserver;
 
-  @bindable
+  @bindable.none
   language: string;
 
   attached() {

diff --git a/packages/banner/src/mdc-banner.ts b/packages/banner/src/mdc-banner.ts
@@ -27,13 +27,13 @@ export class MdcBanner extends MdcComponent<MDCBannerFoundation> {
   @bindable.booleanAttr
   centered: boolean;
 
-  @bindable
+  @bindable.none
   icon: string;
 
-  @bindable
+  @bindable.none
   primaryAction: string;
 
-  @bindable
+  @bindable.none
   secondaryAction: string;
 
   @bindable.booleanAttr

diff --git a/packages/base/src/attributes/mdc-focus-trap.ts b/packages/base/src/attributes/mdc-focus-trap.ts
@@ -13,7 +13,7 @@ export class MdcFocusTrap {
   @bindable.booleanAttr
   delay: boolean;
 
-  @bindable
+  @bindable.none
   initialFocusEl?: HTMLElement | (() => HTMLElement);
 
   @bindable.booleanAttr

diff --git a/packages/base/src/index.ts b/packages/base/src/index.ts
@@ -1,4 +1,5 @@
 import { FrameworkConfiguration, PLATFORM } from 'aurelia-framework';
+import { coerceFunctions, createTypedBindable } from 'aurelia-typed-observable-plugin';
 
 export { MdcComponent } from './mdc-component';
 export { MdcComponentAdapters } from './mdc-component-adapters';
@@ -15,3 +16,9 @@ export function configure(config: FrameworkConfiguration) {
     PLATFORM.moduleName('./elements/mdc-promisify-reference')
   ]);
 }
+
+coerceFunctions.none = function (a) {
+  return a;
+}
+
+createTypedBindable('none');
diff --git a/packages/button/src/mdc-button.ts b/packages/button/src/mdc-button.ts
@@ -39,7 +39,7 @@ export class MdcButton {
   /**
    * Set the button label
    */
-  @bindable
+  @bindable.none
   label: string;
 
   /**
@@ -56,7 +56,7 @@ export class MdcButton {
   }
 
   // this is necessary for the route-href to work
-  @bindable
+  @bindable.none
   href: string;
   hrefChanged() {
     if (this.href) {

diff --git a/packages/chips/src/mdc-chip-action/mdc-chip-action.ts b/packages/chips/src/mdc-chip-action/mdc-chip-action.ts
@@ -49,7 +49,7 @@ export class MdcChipAction extends MdcComponent<MDCChipActionFoundation> impleme
   @bindable.booleanAttr
   trailing: boolean;
 
-  @bindable
+  @bindable.none
   icon: string;
 
   @bindable.booleanAttr

diff --git a/packages/chips/src/mdc-chip/mdc-chip.ts b/packages/chips/src/mdc-chip/mdc-chip.ts
@@ -69,7 +69,7 @@ export class MdcChip extends MdcComponent<MDCChipFoundation> {
     }
   }
 
-  @bindable
+  @bindable.none
   icon: string;
 
   actions: Map<MDCChipActionType, MdcChipAction>;

diff --git a/packages/data-table/src/mdc-data-table.ts b/packages/data-table/src/mdc-data-table.ts
@@ -69,15 +69,15 @@ export class MdcDataTable extends MdcComponent<MDCDataTableFoundation> implement
   pagination: boolean;
 
   /** Caption for the page size selector */
-  @bindable
+  @bindable.none
   rowsPerPageLabel: string = 'Rows per page';
 
   /** Page sizes available for selection, e.g. [10, 25, 100, 'All'] */
-  @bindable
+  @bindable.none
   pageSizes: unknown[] = [10, 25, 100];
 
   /** Selected page size */
-  @bindable({ defaultBindingMode: bindingMode.twoWay })
+  @bindable.none({ defaultBindingMode: bindingMode.twoWay })
   pageSize: unknown = 10;
 
   /** Makes header row sticky (fixed) on vertical scroll.

diff --git a/packages/dialog/src/mdc-dialog.ts b/packages/dialog/src/mdc-dialog.ts
@@ -30,15 +30,15 @@ export class MdcDialog extends MdcComponent<MDCDialogFoundation> implements Even
   content_?: MdcDialogContent; // assigned in initialize()
 
   /** Action returned when the dialog is closed via the scrim click */
-  @bindable
+  @bindable.none
   scrimClickAction: string;
   async scrimClickActionChanged() {
     await this.initialised;
     this.foundation?.setScrimClickAction(this.scrimClickAction);
   }
 
   /** Action returned when the dialog is closed via the ESC key */
-  @bindable
+  @bindable.none
   escapeKeyAction: string;
   async escapeKeyActionChanged() {
     await this.initialised;

diff --git a/packages/expandable/src/mdc-expandable.ts b/packages/expandable/src/mdc-expandable.ts
@@ -29,7 +29,7 @@ export class MdcExpandable {
   }
 
   /** Set the expandable to be in an accordion group */
-  @bindable
+  @bindable.none
   accordion?: string;
 
   handleEvent(e: Event) {

diff --git a/packages/fab/src/mdc-fab.ts b/packages/fab/src/mdc-fab.ts
@@ -29,11 +29,11 @@ export class MdcFab {
   exited: boolean;
 
   /** Optional. Apply a Material Icon. */
-  @bindable
+  @bindable.none
   icon: string;
 
   /** Optional, for the text label. Applicable only for Extended FAB. */
-  @bindable
+  @bindable.none
   label: string;
 
   /** Set the button disabled */

diff --git a/packages/icon-button/src/mdc-icon-button-icon/mdc-icon-button-icon.ts b/packages/icon-button/src/mdc-icon-button-icon/mdc-icon-button-icon.ts
@@ -13,6 +13,6 @@ export class MdcIconButtonIcon {
   on: boolean;
 
   /** Optional. Set a Material icon. */
-  @bindable
+  @bindable.none
   icon: string;
 }
diff --git a/packages/icon-button/src/mdc-icon-button.ts b/packages/icon-button/src/mdc-icon-button.ts
@@ -18,14 +18,14 @@ export class MdcIconButton extends MdcComponent<MDCIconButtonToggleFoundation> {
   on: boolean;
 
   /** Optional. Set a Material icon as a non-toggle icon. */
-  @bindable
+  @bindable.none
   icon: string;
 
   @children('mdc-icon-button-icon')
   icons?: MdcIconButtonIcon[];
 
   // this is necessary for the route-href to work
-  @bindable
+  @bindable.none
   href: string;
   hrefChanged() {
     if (this.href) {

diff --git a/packages/image-list/src/mdc-image-list-item/mdc-image-list-item.ts b/packages/image-list/src/mdc-image-list-item/mdc-image-list-item.ts
@@ -12,11 +12,11 @@ export class MdcImageListItem {
   constructor(private root: HTMLElement) { }
 
   /** Image url */
-  @bindable
+  @bindable.none
   src: string;
 
   /** Image label */
-  @bindable
+  @bindable.none
   label: string;
 
   hasAspect: boolean;

diff --git a/packages/image-list/src/mdc-image-list.ts b/packages/image-list/src/mdc-image-list.ts
@@ -28,7 +28,7 @@ export class MdcImageList {
   textProtection: boolean;
 
   /** Number of columns in the list */
-  @bindable
+  @bindable.none
   columns: string | Partial<IColumnsOptions>[];
   columnsChanged() {
     if (!this.columns) {

diff --git a/packages/layout-grid/src/mdc-layout-grid-cell/mdc-layout-grid-cell.ts b/packages/layout-grid/src/mdc-layout-grid-cell/mdc-layout-grid-cell.ts
@@ -8,34 +8,34 @@ import { bindable } from 'aurelia-typed-observable-plugin';
 @customElement('mdc-layout-grid-cell')
 export class MdcLayoutGridCell {
   /** Optional, specifies the order of the cell */
-  @bindable
+  @bindable.none
   order: string;
 
   /** Optional, specifies the alignment of cell */
-  @bindable
+  @bindable.none
   position: 'top' | 'middle' | 'bottom';
 
   /** Optional, specifies the number of columns the cell spans */
-  @bindable
+  @bindable.none
   span: string;
 
   /** Optional, specifies the number of columns the cell spans on a desktop */
-  @bindable
+  @bindable.none
   desktopSpan: string;
 
   /** Optional, specifies the number of columns the cell spans on a tablet */
-  @bindable
+  @bindable.none
   tabletSpan: string;
 
   /** Optional, specifies the number of columns the cell spans on a phone */
-  @bindable
+  @bindable.none
   phoneSpan: string;
 
   @bindable.booleanAttr
   newRow: string;
 
   /** Optional, specifies the number of columns the cell spans for all screen sizes */
-  @bindable
+  @bindable.none
   spans: string;
   spansChanged() {
     [this.phoneSpan, this.tabletSpan, this.desktopSpan] = this.spans.split(' ');

diff --git a/packages/layout-grid/src/mdc-layout-grid.ts b/packages/layout-grid/src/mdc-layout-grid.ts
@@ -11,7 +11,7 @@ export class MdcLayoutGrid {
   constructor(private root: HTMLElement) { }
 
   /** Set grid alignment. Has no effect when the grid already fills its container. */
-  @bindable
+  @bindable.none
   position: 'left' | 'right';
 
   /** Specifies the grid should have fixed column width */

diff --git a/packages/list/src/mdc-deprecated-list/mdc-deprecated-list-item/mdc-deprecated-list-item.ts b/packages/list/src/mdc-deprecated-list/mdc-deprecated-list-item/mdc-deprecated-list-item.ts
@@ -54,15 +54,15 @@ export class MdcDeprecatedListItem {
   activated: boolean;
 
   /** Random data associated with the list item. Passed in events payload. */
-  @bindable
+  @bindable.none
   value: unknown;
 
   /** Disables ripple effect */
   @bindable.booleanAttr
   disableRipple: boolean;
 
   // this is necessary for the route-href to work
-  @bindable
+  @bindable.none
   href: string;
   hrefChanged() {
     if (this.href) {

diff --git a/packages/list/src/mdc-list-divider/mdc-list-divider.ts b/packages/list/src/mdc-list-divider/mdc-list-divider.ts
@@ -15,10 +15,10 @@ export class MdcListDivider {
   padded: boolean;
 
   /** Aligns the divider’s leading edge with the item’s content block */
-  @bindable
+  @bindable.none
   leadingType: MdcListItemLeading['value'];
 
   /** Aligns the divider’s leading edge with the item’s trailing padding */
-  @bindable
+  @bindable.none
   trailingType: MdcListItemTrailing['value'];
  }
diff --git a/packages/list/src/mdc-list-item/mdc-list-item.ts b/packages/list/src/mdc-list-item/mdc-list-item.ts
@@ -89,15 +89,15 @@ export class MdcListItem {
   threeLine: boolean;
 
   /** Random data associated with the list item. Passed in events payload. */
-  @bindable
+  @bindable.none
   value: unknown;
 
   /** Disables ripple effect */
   @bindable.booleanAttr
   disableRipple: boolean;
 
   // this is necessary for the route-href to work
-  @bindable
+  @bindable.none
   href: string;
   hrefChanged() {
     if (this.href) {

diff --git a/packages/lookup/src/mdc-lookup.ts b/packages/lookup/src/mdc-lookup.ts
@@ -29,7 +29,7 @@ export class MdcLookup implements EventListenerObject {
   public menu: MdcMenu;
 
   /** Reference to the input */
-  @bindable
+  @bindable.none
   public input?: HTMLInputElement & { isFocused: boolean };
 
   /** Sets the menu list to have two lines */
@@ -42,7 +42,7 @@ export class MdcLookup implements EventListenerObject {
    * When set to a function, it is called with an option as a parameter to retrieve the display string.
    * When undefined, an option.toString() is used.
    */
-  @bindable
+  @bindable.none
   displayField: string | undefined | ((option: unknown) => string);
   displayFieldChanged() {
     if (this.displayField instanceof Function) {
@@ -62,7 +62,7 @@ export class MdcLookup implements EventListenerObject {
    * When set to a function, it is called with an option as a parameter to retrieve the value.
    * When undefined, an option is used as a value.
    */
-  @bindable
+  @bindable.none
   valueField: string | undefined | ((option: unknown) => unknown);
   valueFieldChanged() {
     if (this.valueField instanceof Function) {
@@ -80,7 +80,7 @@ export class MdcLookup implements EventListenerObject {
    * Sets the array of options to display.
    * Can be an async function which returns an array.
    */
-  @bindable
+  @bindable.none
   options: unknown[] | undefined | ((filter: string, value: unknown) => Promise<unknown[]>);
   optionsChanged() {
     const shouldRefresh = this.getOptions !== undefined;
@@ -111,7 +111,7 @@ export class MdcLookup implements EventListenerObject {
   naturalWidth: boolean;
 
   /** The CSS class to set on the menu. Helps styling body hoisted menus */
-  @bindable
+  @bindable.none
   menuClass: string;
 
   getOptions: (filter: string | undefined, value: unknown) => Promise<unknown[]>;
@@ -126,7 +126,7 @@ export class MdcLookup implements EventListenerObject {
   }
 
   /** The selected value */
-  @bindable({ defaultBindingMode: bindingMode.twoWay })
+  @bindable.none({ defaultBindingMode: bindingMode.twoWay })
   value: unknown;
   suppressValueChanged: boolean;
   async valueChanged() {

diff --git a/packages/menu-surface/src/mdc-menu-surface.ts b/packages/menu-surface/src/mdc-menu-surface.ts
@@ -13,7 +13,7 @@ export class MdcMenuSurface extends MdcComponent<MDCMenuSurfaceFoundation> imple
   originalParent: HTMLElement | null;
   private previousFocus?: HTMLElement | SVGElement | null;
 
-  @bindable
+  @bindable.none
   anchor?: Element | null;
 
   /** Sets the foundation to use page offsets for an positioning when the menu is hoisted to the body. */
@@ -32,14 +32,14 @@ export class MdcMenuSurface extends MdcComponent<MDCMenuSurfaceFoundation> imple
     this.foundation?.setFixedPosition(this.fixed);
   }
 
-  @bindable
+  @bindable.none
   anchorCorner: keyof typeof Corner;
   async anchorCornerChanged() {
     await this.initialised;
     this.foundation?.setAnchorCorner(Corner[this.anchorCorner]);
   }
 
-  @bindable
+  @bindable.none
   anchorMargin: Partial<MDCMenuDistance>;
   async anchorMarginChanged(margin: Partial<MDCMenuDistance>) {
     await this.initialised;