feat(app): use attributed features

aurelia-ui-toolkits · Jul 12, 2021 · 4ed7ac9 · 4ed7ac9
1 parent c41dc99
commit 4ed7ac9
Show file tree

Hide file tree

Showing 101 changed files with 1,513 additions and 1,879 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -56,10 +56,10 @@
     "update-versions": "npm run update-versions:root && lage run update-versions"
   },
   "devDependencies": {
-    "@aurelia/plugin-gulp": "^2.1.0-dev.202106282211",
-    "@aurelia/validation": "^2.1.0-dev.202106282211",
-    "@aurelia/validation-html": "^2.1.0-dev.202106282211",
-    "@aurelia/webpack-loader": "^2.1.0-dev.202106282211",
+    "@aurelia/plugin-gulp": "^2.0.0-alpha.12",
+    "@aurelia/validation": "^2.0.0-alpha.12",
+    "@aurelia/validation-html": "^2.0.0-alpha.12",
+    "@aurelia/webpack-loader": "^2.0.0-alpha.12",
     "@material/button": "^11.0.0",
     "@material/card": "^11.0.0",
     "@material/checkbox": "^11.0.0",
@@ -99,7 +99,7 @@
     "@material/typography": "^11.0.0",
     "@typescript-eslint/eslint-plugin": "^4.28.1",
     "@typescript-eslint/parser": "^4.28.1",
-    "aurelia": "^2.1.0-dev.202106282211",
+    "aurelia": "^2.0.0-alpha.12",
     "autoprefixer": "^10.2.6",
     "concurrently": "^6.2.0",
     "conventional-changelog-cli": "^2.1.1",

diff --git a/packages/app/src/elements/example-viewer/example-viewer.html b/packages/app/src/elements/example-viewer/example-viewer.html
@@ -1,5 +1,5 @@
 <import from="./example-viewer.scss"></import>
-<button as-element="mdc-button" raised class="example-opener" if.bind="!open" click.delegate="toggle()">
+<button mdc-button raised class="example-opener" if.bind="!open" click.delegate="toggle()">
   View source
 </button>
 <mdc-tab-bar fixed if.bind="open">
@@ -8,9 +8,9 @@
 </mdc-tab-bar>
 <div class="example-code-container" if.bind="open && selectedTab">
   <div class="example-code-container__buttons">
-    <mdc-icon-button as-element="mdc-icon-button" click.delegate="copyCode()" title="Copy to clipboard"
+    <mdc-icon-button mdc-icon-button click.delegate="copyCode()" title="Copy to clipboard"
       class="material-icons">file_copy</mdc-icon-button>
-    <mdc-icon-button as-element="mdc-icon-button" click.delegate="toggle()" title="Close" class="material-icons">close</mdc-icon-button>
+    <mdc-icon-button mdc-icon-button click.delegate="toggle()" title="Close" class="material-icons">close</mdc-icon-button>
   </div>
   <hljs language.bind="selectedTab.language">${selectedTab.code}</hljs>
 </div>
diff --git a/packages/app/src/views/button/accessibility/accessibility.html b/packages/app/src/views/button/accessibility/accessibility.html
@@ -1,5 +1,5 @@
 <div class="demo-layout__row">
   <div class="mdc-touch-target-wrapper">
-    <button as-element="mdc-button" touch>My Accessible Button</button>
+    <button mdc-button touch>My Accessible Button</button>
   </div>
 </div>
diff --git a/packages/app/src/views/button/button-examples.html b/packages/app/src/views/button/button-examples.html
@@ -35,10 +35,10 @@ <h3 class="demo-content__headline">Shaped</h3>
   <h3 class="demo-content__headline">Trailing icon</h3>
   <p>
     Certain icons make more sense to appear after the button's text label rather than before. This can be accomplished
-    by putting the icon markup <i>after</i> the element with the as-element="mdc-button"-label attribute.
+    by putting the icon markup <i>after</i> the element with the mdc-button-label attribute.
   </p>
   <p>
-    NOTE: The as-element="mdc-button"-label attribute is required in order for the trailing icon to be styled appropriately.
+    NOTE: The mdc-button-label attribute is required in order for the trailing icon to be styled appropriately.
   </p>
   <au-compose view-model.bind="trailing" containerless></au-compose>
   <example-viewer html.bind="trailingHtml" sass.bind="trailingSass"></example-viewer>

diff --git a/packages/app/src/views/button/default/default.html b/packages/app/src/views/button/default/default.html
@@ -1,33 +1,33 @@
 <import from="./default.scss"></import>
 <div class="demo-layout__row">
   <div class="demo-container">
-    <button as-element="mdc-button">Default</button>
+    <button mdc-button>Default</button>
   </div>
   <div class="demo-container">
-    <a as-element="mdc-button" href="#/button/examples">Href link</a>
+    <a mdc-button href="#/button/examples">Href link</a>
   </div>
   <div class="demo-container">
-    <a as-element="mdc-button" raised href="#/button/examples">Href link</a>
+    <a mdc-button raised href="#/button/examples">Href link</a>
   </div>
   <div class="demo-container">
-    <button as-element="mdc-button" raised>Raised</button>
+    <button mdc-button raised>Raised</button>
   </div>
   <div class="demo-container">
-    <button as-element="mdc-button" unelevated>Unelevated</button>
+    <button mdc-button unelevated>Unelevated</button>
   </div>
   <div class="demo-container">
-    <button as-element="mdc-button" outlined>Outlined</button>
+    <button mdc-button outlined>Outlined</button>
   </div>
   <div class="demo-container">
-    <button as-element="mdc-button" outlined class="demo-thick-outline-button">Thick Outlined</button>
+    <button mdc-button outlined class="demo-thick-outline-button">Thick Outlined</button>
   </div>
   <div class="demo-container">
-    <button as-element="mdc-button" disabled>Disabled</button>
+    <button mdc-button disabled>Disabled</button>
   </div>
   <div class="demo-container">
-    <button as-element="mdc-button" class="demo-button-primary">Primary Color</button>
+    <button mdc-button class="demo-button-primary">Primary Color</button>
   </div>
   <div class="demo-container">
-    <button as-element="mdc-button" class="demo-button-secondary">Secondary Color</button>
+    <button mdc-button class="demo-button-secondary">Secondary Color</button>
   </div>
 </div>
diff --git a/packages/app/src/views/button/density/density.html b/packages/app/src/views/button/density/density.html
@@ -1,12 +1,12 @@
 <import from="./density.scss"></import>
 <div class="demo-layout__row">
   <div class="demo-container">
-    <button as-element="mdc-button" class="demo-density-button">Density (-3)</button>
+    <button mdc-button class="demo-density-button">Density (-3)</button>
   </div>
   <div class="demo-container">
-    <button as-element="mdc-button" raised class="demo-density-button">Density (-3)</button>
+    <button mdc-button raised class="demo-density-button">Density (-3)</button>
   </div>
   <div class="demo-container">
-    <button as-element="mdc-button" outlined class="demo-density-button">Density (-3)</button>
+    <button mdc-button outlined class="demo-density-button">Density (-3)</button>
   </div>
 </div>
diff --git a/packages/app/src/views/button/icon/icon.html b/packages/app/src/views/button/icon/icon.html
@@ -1,22 +1,22 @@
 <import from="./icon.scss"></import>
 <div class="demo-layout__row">
   <div class="demo-container">
-    <button as-element="mdc-button">
+    <button mdc-button>
       <mdc-icon>favorite</mdc-icon>Icon
     </button>
   </div>
   <div class="demo-container">
-    <button as-element="mdc-button" outlined>
+    <button mdc-button outlined>
       <mdc-icon>favorite</mdc-icon>Icon
     </button>
   </div>
   <div class="demo-container">
-    <button as-element="mdc-button" raised class="demo-button-primary">
+    <button mdc-button raised class="demo-button-primary">
       <mdc-icon>favorite</mdc-icon>Icon
     </button>
   </div>
   <div class="demo-container">
-    <button as-element="mdc-button" raised class="demo-button-secondary">
+    <button mdc-button raised class="demo-button-secondary">
       <mdc-icon>favorite</mdc-icon>Icon
     </button>
   </div>

diff --git a/packages/app/src/views/button/shaped/shaped.html b/packages/app/src/views/button/shaped/shaped.html
@@ -1,11 +1,11 @@
 <import from="./shaped.scss"></import>
 <div class="demo-layout__row">
   <div class="demo-container">
-    <button as-element="mdc-button" unelevated class="big-round-shape-button">Corner
+    <button mdc-button unelevated class="big-round-shape-button">Corner
       Radius</button>
   </div>
   <div class="demo-container">
-    <button as-element="mdc-button" raised class="big-round-shape-button">
+    <button mdc-button raised class="big-round-shape-button">
       <mdc-icon>favorite</mdc-icon>Icon
     </button>
   </div>

diff --git a/packages/app/src/views/button/svg-example/svg-example.html b/packages/app/src/views/button/svg-example/svg-example.html
@@ -1,5 +1,5 @@
 <div class="demo-layout__row">
-  <button as-element="mdc-button" raised>
+  <button mdc-button raised>
     <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000" class="mdc-button__icon">
       <path fill="none" d="M0 0h24v24H0z" />
       <path

diff --git a/packages/app/src/views/button/theme/theme.html b/packages/app/src/views/button/theme/theme.html
@@ -1,12 +1,12 @@
 <import from="./theme.scss"></import>
 <div class="demo-layout__row">
   <div class="demo-container">
-    <button as-element="mdc-button" unelevated class="demo-button-ink-color">
+    <button mdc-button unelevated class="demo-button-ink-color">
       <mdc-icon>favorite</mdc-icon>Ink Color
     </button>
   </div>
   <div class="demo-container">
-    <button as-element="mdc-button" outlined class="demo-button-icon-color">
+    <button mdc-button outlined class="demo-button-icon-color">
       <mdc-icon>favorite</mdc-icon>Icon Color
     </button>
   </div>

diff --git a/packages/app/src/views/button/trailing/trailing.html b/packages/app/src/views/button/trailing/trailing.html
@@ -1,19 +1,19 @@
 <import from="./trailing.scss"></import>
 <div class="demo-layout__row">
   <div class="demo-container">
-    <button as-element="mdc-button">
-      <span as-element="mdc-button"-label>Trailing Icon</span>
+    <button mdc-button>
+      <span mdc-button-label>Trailing Icon</span>
       <mdc-icon>favorite</mdc-icon>
     </button>
   </div>
   <div class="demo-container">
-    <button as-element="mdc-button" raised class="demo-button-secondary">
-      <span as-element="mdc-button"-label>Trailing Icon</span>
+    <button mdc-button raised class="demo-button-secondary">
+      <span mdc-button-label>Trailing Icon</span>
       <mdc-icon>favorite</mdc-icon>
     </button>
   </div>
   <div class="demo-container">
-    <button as-element="mdc-button" outlined label="Trailing Icon">
+    <button mdc-button outlined label="Trailing Icon">
       <mdc-icon>favorite</mdc-icon>
     </button>
   </div>

diff --git a/packages/app/src/views/card/default/default.html b/packages/app/src/views/card/default/default.html
@@ -13,16 +13,16 @@ <h3 class="demo-card__subtitle" mdc-subtitle2>by Kurt Wagner</h3>
     </mdc-card-primary-action>
     <mdc-card-actions>
       <mdc-card-action-buttons>
-        <button as-element="mdc-button">Read</button>
-        <button as-element="mdc-button">Bookmark</button>
+        <button mdc-button>Read</button>
+        <button mdc-button>Bookmark</button>
       </mdc-card-action-buttons>
       <mdc-card-action-icons>
-        <button as-element="mdc-icon-button">
+        <button mdc-icon-button>
           <mdc-icon-button-icon icon="favorite_border"></mdc-icon-button-icon>
           <mdc-icon-button-icon on icon="favorite"></mdc-icon-button-icon>
         </button>
-        <button as-element="mdc-icon-button" icon="share"></button>
-        <button as-element="mdc-icon-button" icon="more_vert"></button>
+        <button mdc-icon-button icon="share"></button>
+        <button mdc-icon-button icon="more_vert"></button>
       </mdc-card-action-icons>
     </mdc-card-actions>
   </mdc-card>

diff --git a/packages/app/src/views/card/headlines/headlines.html b/packages/app/src/views/card/headlines/headlines.html
@@ -27,7 +27,7 @@ <h2 class="demo-card-article__title" mdc-headline5>Asia's clean energy ambitions
     </mdc-card-primary-action>
     <mdc-list-divider></mdc-list-divider>
     <mdc-card-actions full-bleed>
-      <button as-element="mdc-button" mdcCardAction="button">
+      <button mdc-button mdcCardAction="button">
         All Business Headlines <mdc-icon>arrow_forward</mdc-icon>
       </button>
     </mdc-card-actions>

diff --git a/packages/app/src/views/card/music/music.html b/packages/app/src/views/card/music/music.html
@@ -15,39 +15,39 @@
     <mdc-card-actions>
       <mdc-card-action-buttons class="demo-card__action-buttons--text-only">Rate album</mdc-card-action-buttons>
       <mdc-card-action-icons>
-        <button as-element="mdc-icon-button">
+        <button mdc-icon-button>
           <mdc-icon-button-icon>
             <mdc-icon>star_border</mdc-icon>
           </mdc-icon-button-icon>
           <mdc-icon-button-icon on>
             <mdc-icon>star</mdc-icon>
           </mdc-icon-button-icon>
         </button>
-        <button as-element="mdc-icon-button">
+        <button mdc-icon-button>
           <mdc-icon-button-icon>
             <mdc-icon>star_border</mdc-icon>
           </mdc-icon-button-icon>
           <mdc-icon-button-icon on>
             <mdc-icon>star</mdc-icon>
           </mdc-icon-button-icon>
         </button>
-        <button as-element="mdc-icon-button">
+        <button mdc-icon-button>
           <mdc-icon-button-icon>
             <mdc-icon>star_border</mdc-icon>
           </mdc-icon-button-icon>
           <mdc-icon-button-icon on>
             <mdc-icon>star</mdc-icon>
           </mdc-icon-button-icon>
         </button>
-        <button as-element="mdc-icon-button">
+        <button mdc-icon-button>
           <mdc-icon-button-icon>
             <mdc-icon>star_border</mdc-icon>
           </mdc-icon-button-icon>
           <mdc-icon-button-icon on>
             <mdc-icon>star</mdc-icon>
           </mdc-icon-button-icon>
         </button>
-        <button as-element="mdc-icon-button">
+        <button mdc-icon-button>
           <mdc-icon-button-icon>
             <mdc-icon>star_border</mdc-icon>
           </mdc-icon-button-icon>

diff --git a/packages/app/src/views/card/photos/photos.html b/packages/app/src/views/card/photos/photos.html
@@ -8,23 +8,23 @@
     </mdc-card-primary-action>
     <mdc-card-actions>
       <mdc-card-action-icons>
-        <button as-element="mdc-icon-button">
+        <button mdc-icon-button>
           <mdc-icon-button-icon>
             <mdc-icon>favorite_border</mdc-icon>
           </mdc-icon-button-icon>
           <mdc-icon-button-icon on>
             <mdc-icon>favorite</mdc-icon>
           </mdc-icon-button-icon>
         </button>
-        <button as-element="mdc-icon-button">
+        <button mdc-icon-button>
           <mdc-icon-button-icon>
             <mdc-icon>bookmark_border</mdc-icon>
           </mdc-icon-button-icon>
           <mdc-icon-button-icon on>
             <mdc-icon>bookmark</mdc-icon>
           </mdc-icon-button-icon>
         </button>
-        <button as-element="mdc-icon-button">
+        <button mdc-icon-button>
           <mdc-icon>share</mdc-icon>
         </button>
       </mdc-card-action-icons>

diff --git a/packages/app/src/views/checkbox/indeterminate/indeterminate.html b/packages/app/src/views/checkbox/indeterminate/indeterminate.html
@@ -1,19 +1,19 @@
 <template>
   <div class="demo-layout__row">
-    <button as-element="mdc-button" click.delegate="indeterminate = true">Indeterminate</button>
-    <button as-element="mdc-button" click.delegate="checked = !checked">Toggle</button>
+    <button mdc-button click.delegate="indeterminate = true">Indeterminate</button>
+    <button mdc-button click.delegate="checked = !checked">Toggle</button>
   </div>
   <div class="demo-layout__row">
-    <button as-element="mdc-button" click.delegate="indeterminateToChecked = !indeterminateToChecked">
+    <button mdc-button click.delegate="indeterminateToChecked = !indeterminateToChecked">
       Indeterminate To Checked: ${indeterminateToChecked ? 'On' : 'Off'}
     </button>
-    <button as-element="mdc-button" click.delegate="alignEnd = !alignEnd">
+    <button mdc-button click.delegate="alignEnd = !alignEnd">
       RTL: ${alignEnd ? 'On' : 'Off'}
     </button>
-    <button as-element="mdc-button" click.delegate="disabled = !disabled">
+    <button mdc-button click.delegate="disabled = !disabled">
       Disabled: ${disabled ? 'On' : 'Off'}
     </button>
-    <button as-element="mdc-button" click.delegate="disableRipple = !disableRipple">
+    <button mdc-button click.delegate="disableRipple = !disableRipple">
       Ripple: ${!disableRipple ? 'On' : 'Off'}
     </button>
   </div>

diff --git a/packages/app/src/views/chips/filter-binding/filter-binding.html b/packages/app/src/views/chips/filter-binding/filter-binding.html
@@ -5,6 +5,6 @@
   </mdc-chip-set>
 </div>
 <div class="demo-layout__row">
-  <label as-element="mdc-text-field" value.bind="newChip"></label>
-  <button as-element="mdc-button" raised click.delegate="add()">Add</button>
+  <mdc-text-field value.bind="newChip"></label>
+  <button mdc-button raised click.delegate="add()">Add</button>
 </div>
diff --git a/packages/app/src/views/component-viewer/component-viewer.html b/packages/app/src/views/component-viewer/component-viewer.html
@@ -7,7 +7,7 @@ <h1 class="demo-panel-title">${template.title}</h1>
     <div if.bind="template.references.length">
       <h2 class="demo-panel-heading">References</h2>
       <div repeat.for="ref of template.references">
-        <a as-element="mdc-button" href.bind="ref.url" target="_blank" rel="noopener">
+        <a mdc-button href.bind="ref.url" target="_blank" rel="noopener">
           <i class="material-icons mdc-button__icon">link</i> ${ref.name}
         </a>
       </div>
@@ -24,7 +24,7 @@ <h2 class="demo-panel-heading">Styles</h2>
     </div>
 
     <div repeat.for="mdcUrl of template.mdcUrls" class="viewer-mdc-urls">
-      <a as-element="mdc-button" href.bind="mdcUrl.url" target="_blank" rel="noopener">
+      <a mdc-button href.bind="mdcUrl.url" target="_blank" rel="noopener">
         <i class="material-icons mdc-button__icon">link</i> ${mdcUrl.name}
       </a>
     </div>

diff --git a/packages/app/src/views/data-table/standard/standard.html b/packages/app/src/views/data-table/standard/standard.html
@@ -1,5 +1,5 @@
 <div class="demo-layout__row">
-  <button as-element="mdc-button" click.delegate="busy = !busy">Toggle Busy</button>
+  <button mdc-button click.delegate="busy = !busy">Toggle Busy</button>
 </div>
 <mdc-data-table busy.bind="busy">
   <table>

diff --git a/packages/app/src/views/dialog/inline/inline.html b/packages/app/src/views/dialog/inline/inline.html
@@ -1,13 +1,13 @@
-<button as-element="mdc-button" click.delegate="dialog.open()">Open</button>
+<button mdc-button click.delegate="dialog.open()">Open</button>
 <mdc-dialog view-model.ref="dialog" mdcdialog:closing.trigger="handleClosing($event)">
   <mdc-dialog-title>
     Enter your value
   </mdc-dialog-title>
   <mdc-dialog-content>
-    <label as-element="mdc-text-field" data-mdc-dialog-initial-focus></label>
+    <mdc-text-field data-mdc-dialog-initial-focus></mdc-text-field>
   </mdc-dialog-content>
   <mdc-dialog-actions>
-    <button as-element="mdc-button" data-mdc-dialog-action="cancel">Cancel</button>
-    <button as-element="mdc-button" data-mdc-dialog-action="ok" data-mdc-dialog-button-default>Ok</button>
+    <button mdc-button data-mdc-dialog-action="cancel">Cancel</button>
+    <button mdc-button data-mdc-dialog-action="ok" data-mdc-dialog-button-default>Ok</button>
   </mdc-dialog-actions>
 </mdc-dialog>
diff --git a/packages/app/src/views/dialog/via-service/via-service.html b/packages/app/src/views/dialog/via-service/via-service.html
@@ -1 +1 @@
-<button as-element="mdc-button" click.delegate="open()">Via service</button>
+<button mdc-button click.delegate="open()">Via service</button>