Skip to content

Commit

Permalink
feat(addon/components/paper-tabs): converts to a glimmer component.
Browse files Browse the repository at this point in the history
  • Loading branch information
matthewhartstonge committed Dec 4, 2024
1 parent cd12ee2 commit 9e02b4a
Show file tree
Hide file tree
Showing 2 changed files with 319 additions and 171 deletions.
103 changes: 74 additions & 29 deletions addon/components/paper-tabs.hbs
Original file line number Diff line number Diff line change
@@ -1,31 +1,76 @@
{{! template-lint-disable no-action }}
<md-tabs-wrapper class={{if this.shouldStretch "md-stretch-tabs"}}>
<md-tabs
class='md-no-tab-content md-default-theme
{{~if @warn " md-warn"}}
{{~if @accent " md-accent"}}
{{~if @primary " md-primary"}}
{{@class}}'
md-border-bottom={{@borderBottom}}
aria-label={{@ariaLabel}}
{{did-insert this.didInsertNode}}
{{did-update
this.didUpdateNode
this.children
this.shouldCenter
this.shouldStretch
this.selected
}}
{{will-destroy this.willDestroyNode}}
...attributes
>
<md-tabs-wrapper class={{if this.shouldStretch 'md-stretch-tabs'}}>
{{#if this.shouldPaginate}}
<md-prev-button
role='button'
class={{unless this.canPageBack 'md-disabled'}}
{{on 'click' this.previousPage}}
>
<PaperIcon @icon='keyboard-arrow-left' />
</md-prev-button>
<md-next-button
role='button'
class={{unless this.canPageForward 'md-disabled'}}
{{on 'click' this.nextPage}}
>
{{!
md-next-button has a css rule that transforms the icon 180 degrees
to point the right way
}}
<PaperIcon @icon='keyboard-arrow-left' />
</md-next-button>
{{/if}}

{{#if this.shouldPaginate}}
<md-prev-button role="button" class={{unless this.canPageBack "md-disabled"}} onclick={{action "previousPage"}}>
{{paper-icon "keyboard-arrow-left"}}
</md-prev-button>
<md-next-button role="button" class={{unless this.canPageForward "md-disabled"}} onclick={{action "nextPage"}}>
{{paper-icon "keyboard-arrow-left"}}
</md-next-button>
{{/if}}
<md-tabs-canvas
class='{{if this.shouldPaginate "md-paginated"}}
{{~if this.shouldCenter " md-center-tabs"}}'
tabindex='-1'
role='tablist'
>
<md-pagination-wrapper
class={{if this.shouldCenter 'md-center-tabs'}}
style={{if this.shouldPaginate this.paginationStyle}}
>
{{yield
(hash
tab=(component
'paper-tab'
noInk=this.noInk
parentComponent=this
selected=this.selected
onSelect=this.localOnChange
)
)
}}

<md-tabs-canvas class="{{if this.shouldPaginate "md-paginated"}}{{if this.shouldCenter "md-center-tabs"}}" tabindex="-1" role="tablist">
<md-pagination-wrapper class={{if this.shouldCenter "md-center-tabs"}} style={{if this.shouldPaginate this.paginationStyle}}>

{{yield (hash
tab=(component "paper-tab"
noInk=this.noInk
selected=this.selected
onSelect=(action "localOnChange")
)
)}}

{{#if this.inkBar}}
<PaperInkBar @movingRight={{this.movingRight}} @left={{this.inkBar.left}} @right={{this.inkBar.right}} />
{{/if}}

</md-pagination-wrapper>
</md-tabs-canvas>

</md-tabs-wrapper>
{{#if this.inkBar}}
{{#let this.inkBar as |inkBar|}}
<PaperInkBar
@movingRight={{this.movingRight}}
@left={{inkBar.left}}
@right={{inkBar.right}}
/>
{{/let}}
{{/if}}
</md-pagination-wrapper>
</md-tabs-canvas>
</md-tabs-wrapper>
</md-tabs>
Loading

0 comments on commit 9e02b4a

Please sign in to comment.