chore: 🤖 Update the .template-lintrc.js file in addons/rose (#1073)
✅ Closes: ICU-4123
This commit is contained in:
Cameron Perera authored and 
GitHub committed
1 parent
07ed40ce03
commit
a2c6bc643d
64 files changed
+690
-603
No files matched your search
@@ -1,7 +1,8 @@
|
||||
'use strict';
|
||||
|
||||
module.exports = {
|
||||
extends: 'octane',
|
||||
plugins: ['ember-template-lint-plugin-prettier'],
|
||||
extends: ['octane', 'ember-template-lint-plugin-prettier:recommended'],
|
||||
overrides: [
|
||||
{
|
||||
files: [
|
||||
|
||||
@@ -1,14 +1,12 @@
|
||||
<span ...attributes
|
||||
class="rose-badge {{if @style (concat "rose-badge-" @style)}}"
|
||||
<span
|
||||
...attributes
|
||||
class='rose-badge {{if @style (concat 'rose-badge-' @style)}}'
|
||||
>
|
||||
{{#if @icon}}
|
||||
<Rose::Icon
|
||||
@name={{@icon}}
|
||||
@size="medium"
|
||||
/>
|
||||
<Rose::Icon @name={{@icon}} @size='medium' />
|
||||
{{/if}}
|
||||
|
||||
<span class="rose-badge-body">
|
||||
<span class='rose-badge-body'>
|
||||
{{yield}}
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
@@ -1,34 +1,29 @@
|
||||
<button
|
||||
...attributes
|
||||
type={{if @submit "submit" "button"}}
|
||||
disabled={{if @disabled "disabled"}}
|
||||
class="{{@classNames}} {{if @style (concat "rose-button-" @style)}} {{if @iconLeft "has-icon-left"}} {{if @iconRight "has-icon-right"}} {{if @iconOnly "has-icon-only"}}"
|
||||
>
|
||||
type={{if @submit 'submit' 'button'}}
|
||||
disabled={{if @disabled 'disabled'}}
|
||||
class='{{@classNames}}
|
||||
{{if @style (concat 'rose-button-' @style)}}
|
||||
{{if @iconLeft 'has-icon-left'}}
|
||||
{{if @iconRight 'has-icon-right'}}
|
||||
{{if @iconOnly 'has-icon-only'}}'
|
||||
>
|
||||
|
||||
<span class="rose-button-wrapper">
|
||||
<span class='rose-button-wrapper'>
|
||||
{{#if @iconLeft}}
|
||||
<Rose::Icon
|
||||
@name={{@iconLeft}}
|
||||
@size="medium"
|
||||
/>
|
||||
<Rose::Icon @name={{@iconLeft}} @size='medium' />
|
||||
{{/if}}
|
||||
|
||||
<span class="rose-button-body">
|
||||
<span class='rose-button-body'>
|
||||
{{yield}}
|
||||
</span>
|
||||
|
||||
{{#if @iconOnly}}
|
||||
<Rose::Icon
|
||||
@name={{@iconOnly}}
|
||||
@size="medium"
|
||||
/>
|
||||
<Rose::Icon @name={{@iconOnly}} @size='medium' />
|
||||
{{/if}}
|
||||
|
||||
{{#if @iconRight}}
|
||||
<Rose::Icon
|
||||
@name={{@iconRight}}
|
||||
@size="medium"
|
||||
/>
|
||||
<Rose::Icon @name={{@iconRight}} @size='medium' />
|
||||
{{/if}}
|
||||
</span>
|
||||
</button>
|
||||
</button>
|
||||
@@ -1,34 +1,32 @@
|
||||
<article ...attributes class="rose-card-link">
|
||||
<article ...attributes class='rose-card-link'>
|
||||
<LinkTo
|
||||
title={{@title}}
|
||||
@route={{if @route @route "index"}}
|
||||
@route={{if @route @route 'index'}}
|
||||
@model={{@model}}
|
||||
>
|
||||
<div class="rose-card-link-header">
|
||||
<div class='rose-card-link-header'>
|
||||
{{#if @title}}
|
||||
<h2 class="rose-card-link-title">
|
||||
<h2 class='rose-card-link-title'>
|
||||
{{#if @icon}}
|
||||
<Rose::Icon
|
||||
@name={{@icon}}
|
||||
@size="medium" />
|
||||
<Rose::Icon @name={{@icon}} @size='medium' />
|
||||
{{/if}}
|
||||
<span class="rose-card-link-title-text">{{@title}}</span>
|
||||
<span class='rose-card-link-title-text'>{{@title}}</span>
|
||||
</h2>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
<div class="rose-card-link-body">
|
||||
<div class='rose-card-link-body'>
|
||||
{{#if @description}}
|
||||
<p class="rose-card-link-description">{{@description}}</p>
|
||||
<p class='rose-card-link-description'>{{@description}}</p>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
<div class="rose-card-link-footer">
|
||||
<div class='rose-card-link-footer'>
|
||||
{{#if @id}}
|
||||
<p class="rose-card-link-footer-id">{{@id}}</p>
|
||||
<p class='rose-card-link-footer-id'>{{@id}}</p>
|
||||
{{/if}}
|
||||
</div>
|
||||
</LinkTo>
|
||||
|
||||
{{yield}}
|
||||
</article>
|
||||
</article>
|
||||
@@ -1,8 +1,3 @@
|
||||
<div
|
||||
...attributes
|
||||
class="rose-cards"
|
||||
>
|
||||
{{yield (hash
|
||||
link=(component "rose/card/link")
|
||||
)}}
|
||||
</div>
|
||||
<div ...attributes class='rose-cards'>
|
||||
{{yield (hash link=(component 'rose/card/link'))}}
|
||||
</div>
|
||||
@@ -1,3 +1,3 @@
|
||||
<div class="rose-dialog-body" tabindex="0">
|
||||
<div class='rose-dialog-body' tabindex='0'>
|
||||
{{yield}}
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,21 +1,21 @@
|
||||
<div class="rose-dialog-cover-modal-overlay"></div>
|
||||
<div class='rose-dialog-cover-modal-overlay'></div>
|
||||
|
||||
<section
|
||||
...attributes
|
||||
role="dialog"
|
||||
class="rose-dialog-cover"
|
||||
role='dialog'
|
||||
class='rose-dialog-cover'
|
||||
id={{this.id}}
|
||||
aria-describedby={{concat "dialog-cover-header-" this.id}}
|
||||
tabindex="0"
|
||||
aria-describedby={{concat 'dialog-cover-header-' this.id}}
|
||||
tabindex='0'
|
||||
{{focus-trap}}
|
||||
>
|
||||
<header
|
||||
class="rose-dialog-cover-header"
|
||||
id={{concat "dialog-cover-header-" this.id}}
|
||||
class='rose-dialog-cover-header'
|
||||
id={{concat 'dialog-cover-header-' this.id}}
|
||||
>
|
||||
{{yield to="header"}}
|
||||
{{yield to='header'}}
|
||||
</header>
|
||||
<div class="rose-dialog-cover-body">
|
||||
{{yield to="body"}}
|
||||
<div class='rose-dialog-cover-body'>
|
||||
{{yield to='body'}}
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
@@ -1,41 +1,44 @@
|
||||
{{#if @modal}}
|
||||
<div class="rose-dialog-modal-overlay"></div>
|
||||
<div class='rose-dialog-modal-overlay'></div>
|
||||
|
||||
<section
|
||||
...attributes
|
||||
role="dialog"
|
||||
class="rose-dialog {{if @style (concat "rose-dialog-" @style)}} {{if @modal 'modal'}}"
|
||||
role='dialog'
|
||||
class='rose-dialog
|
||||
{{if @style (concat 'rose-dialog-' @style)}}
|
||||
{{if @modal 'modal'}}'
|
||||
id={{this.id}}
|
||||
aria-describedby={{concat "dialog-header-" this.id}}
|
||||
aria-describedby={{concat 'dialog-header-' this.id}}
|
||||
{{focus-trap}}
|
||||
>
|
||||
|
||||
<header
|
||||
class="rose-dialog-header"
|
||||
id={{concat "dialog-header-" this.id}}
|
||||
>
|
||||
<header class='rose-dialog-header' id={{concat 'dialog-header-' this.id}}>
|
||||
|
||||
{{#if @icon}}
|
||||
<Rose::Icon @name={{@icon}} @size="medium" />
|
||||
<Rose::Icon @name={{@icon}} @size='medium' />
|
||||
{{/if}}
|
||||
|
||||
<h2 class="rose-dialog-heading">{{@heading}}</h2>
|
||||
<h2 class='rose-dialog-heading'>{{@heading}}</h2>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="rose-dialog-dismiss"
|
||||
type='button'
|
||||
class='rose-dialog-dismiss'
|
||||
title={{@dismissButtonText}}
|
||||
{{on "click" (fn this.dismiss @dismiss)}}
|
||||
{{on 'click' (fn this.dismiss @dismiss)}}
|
||||
>
|
||||
<Rose::Icon @name="flight-icons/svg/x-16" @size="small" />
|
||||
<Rose::Icon @name='flight-icons/svg/x-16' @size='small' />
|
||||
</button>
|
||||
|
||||
</header>
|
||||
|
||||
{{yield (hash
|
||||
body=(component 'rose/dialog/body')
|
||||
footer=(component 'rose/anonymous' tagName="footer" class="rose-dialog-footer")
|
||||
)}}
|
||||
{{yield
|
||||
(hash
|
||||
body=(component 'rose/dialog/body')
|
||||
footer=(component
|
||||
'rose/anonymous' tagName='footer' class='rose-dialog-footer'
|
||||
)
|
||||
)
|
||||
}}
|
||||
|
||||
</section>
|
||||
|
||||
@@ -43,36 +46,42 @@
|
||||
|
||||
<section
|
||||
...attributes
|
||||
role="dialog"
|
||||
class="rose-dialog {{if @style (concat "rose-dialog-" @style)}} {{if @modal 'modal'}}"
|
||||
role='dialog'
|
||||
class='rose-dialog
|
||||
{{if @style (concat 'rose-dialog-' @style)}}
|
||||
{{if @modal 'modal'}}'
|
||||
>
|
||||
|
||||
{{#if @heading}}
|
||||
<header class="rose-dialog-header">
|
||||
<header class='rose-dialog-header'>
|
||||
|
||||
{{#if @icon}}
|
||||
<Rose::Icon @name={{@icon}} @size="medium" />
|
||||
<Rose::Icon @name={{@icon}} @size='medium' />
|
||||
{{/if}}
|
||||
|
||||
<h2 class="rose-dialog-heading">{{@heading}}</h2>
|
||||
<h2 class='rose-dialog-heading'>{{@heading}}</h2>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="rose-dialog-dismiss"
|
||||
type='button'
|
||||
class='rose-dialog-dismiss'
|
||||
title={{@dismissButtonText}}
|
||||
{{on "click" (fn this.dismiss @dismiss)}}
|
||||
{{on 'click' (fn this.dismiss @dismiss)}}
|
||||
>
|
||||
<Rose::Icon @name="flight-icons/svg/x-16" @size="small" />
|
||||
<Rose::Icon @name='flight-icons/svg/x-16' @size='small' />
|
||||
</button>
|
||||
|
||||
</header>
|
||||
{{/if}}
|
||||
|
||||
{{yield (hash
|
||||
body=(component 'rose/dialog/body')
|
||||
footer=(component 'rose/anonymous' tagName="footer" class="rose-dialog-footer")
|
||||
)}}
|
||||
{{yield
|
||||
(hash
|
||||
body=(component 'rose/dialog/body')
|
||||
footer=(component
|
||||
'rose/anonymous' tagName='footer' class='rose-dialog-footer'
|
||||
)
|
||||
)
|
||||
}}
|
||||
|
||||
</section>
|
||||
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
@@ -1,19 +1,18 @@
|
||||
<button
|
||||
...attributes
|
||||
type={{if @submit "submit" "button"}}
|
||||
disabled={{if @disabled "disabled"}}
|
||||
class="rose-dropdown-button {{if @style (concat "rose-dropdown-button-" @style)}} {{if @iconOnly "has-icon-only"}}"
|
||||
>
|
||||
<span class="rose-dropdown-button-wrapper">
|
||||
<span class="rose-dropdown-button-body">
|
||||
type={{if @submit 'submit' 'button'}}
|
||||
disabled={{if @disabled 'disabled'}}
|
||||
class='rose-dropdown-button
|
||||
{{if @style (concat 'rose-dropdown-button-' @style)}}
|
||||
{{if @iconOnly 'has-icon-only'}}'
|
||||
>
|
||||
<span class='rose-dropdown-button-wrapper'>
|
||||
<span class='rose-dropdown-button-body'>
|
||||
{{yield}}
|
||||
</span>
|
||||
|
||||
{{#if @iconOnly}}
|
||||
<Rose::Icon
|
||||
@name={{@iconOnly}}
|
||||
@size="medium"
|
||||
/>
|
||||
<Rose::Icon @name={{@iconOnly}} @size='medium' />
|
||||
{{/if}}
|
||||
</span>
|
||||
</button>
|
||||
</button>
|
||||
@@ -1,22 +1,23 @@
|
||||
<details
|
||||
...attributes
|
||||
class="rose-dropdown {{if @dropdownRight "rose-dropdown-right"}} {{if @style (concat "rose-dropdown-" @style)}}"
|
||||
class='rose-dropdown
|
||||
{{if @dropdownRight 'rose-dropdown-right'}}
|
||||
{{if @style (concat 'rose-dropdown-' @style)}}'
|
||||
{{on-click-outside this.close}}
|
||||
>
|
||||
|
||||
<summary
|
||||
class="rose-dropdown-trigger {{if @iconOnly "has-icon-only"}} {{if this.showCaret "show-caret"}}"
|
||||
class='rose-dropdown-trigger
|
||||
{{if @iconOnly 'has-icon-only'}}
|
||||
{{if this.showCaret 'show-caret'}}'
|
||||
title={{@text}}
|
||||
>
|
||||
|
||||
{{#if @icon}}
|
||||
<Rose::Icon
|
||||
@name={{@icon}}
|
||||
@size="medium"
|
||||
/>
|
||||
<Rose::Icon @name={{@icon}} @size='medium' />
|
||||
{{/if}}
|
||||
|
||||
<span class="rose-dropdown-trigger-text">
|
||||
<span class='rose-dropdown-trigger-text'>
|
||||
{{@text}}
|
||||
{{#if @count}}
|
||||
<Rose::Badge>{{@count}}</Rose::Badge>
|
||||
@@ -26,27 +27,35 @@
|
||||
</summary>
|
||||
|
||||
{{#if @ignoreClickInside}}
|
||||
<div class="rose-dropdown-content">
|
||||
{{yield (hash
|
||||
link=(component "rose/dropdown/link" style=this.style)
|
||||
button=(component "rose/dropdown/button" style=this.style)
|
||||
item=(component "rose/anonymous" class="rose-dropdown-item")
|
||||
separator=(component "rose/anonymous" tagName="hr" class="rose-dropdown-separator")
|
||||
section=(component "rose/dropdown/section" style=this.style)
|
||||
key-value=(component "rose/dropdown/key-value")
|
||||
)}}
|
||||
<div class='rose-dropdown-content'>
|
||||
{{yield
|
||||
(hash
|
||||
link=(component 'rose/dropdown/link' style=this.style)
|
||||
button=(component 'rose/dropdown/button' style=this.style)
|
||||
item=(component 'rose/anonymous' class='rose-dropdown-item')
|
||||
separator=(component
|
||||
'rose/anonymous' tagName='hr' class='rose-dropdown-separator'
|
||||
)
|
||||
section=(component 'rose/dropdown/section' style=this.style)
|
||||
key-value=(component 'rose/dropdown/key-value')
|
||||
)
|
||||
}}
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="rose-dropdown-content" {{on-click-inside this.close}}>
|
||||
{{yield (hash
|
||||
link=(component "rose/dropdown/link" style=this.style)
|
||||
button=(component "rose/dropdown/button" style=this.style)
|
||||
item=(component "rose/anonymous" class="rose-dropdown-item")
|
||||
separator=(component "rose/anonymous" tagName="hr" class="rose-dropdown-separator")
|
||||
section=(component "rose/dropdown/section" style=this.style)
|
||||
key-value=(component "rose/dropdown/key-value")
|
||||
)}}
|
||||
<div class='rose-dropdown-content' {{on-click-inside this.close}}>
|
||||
{{yield
|
||||
(hash
|
||||
link=(component 'rose/dropdown/link' style=this.style)
|
||||
button=(component 'rose/dropdown/button' style=this.style)
|
||||
item=(component 'rose/anonymous' class='rose-dropdown-item')
|
||||
separator=(component
|
||||
'rose/anonymous' tagName='hr' class='rose-dropdown-separator'
|
||||
)
|
||||
section=(component 'rose/dropdown/section' style=this.style)
|
||||
key-value=(component 'rose/dropdown/key-value')
|
||||
)
|
||||
}}
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
</details>
|
||||
</details>
|
||||
@@ -4,6 +4,6 @@
|
||||
</dt>
|
||||
|
||||
<dd class='rose-dropdown-value'>
|
||||
{{yield to='value'}}
|
||||
{{yield to='value'}}
|
||||
</dd>
|
||||
</dl>
|
||||
</dl>
|
||||
@@ -10,7 +10,8 @@
|
||||
@route={{@route}}
|
||||
@query={{@query}}
|
||||
@model={{@model}}
|
||||
class="rose-dropdown-link {{if @style (concat "rose-dropdown-link-" @style)}}"
|
||||
class='rose-dropdown-link
|
||||
{{if @style (concat 'rose-dropdown-link-' @style)}}'
|
||||
>
|
||||
{{yield}}
|
||||
</LinkTo>
|
||||
@@ -19,7 +20,8 @@
|
||||
...attributes
|
||||
@route={{@route}}
|
||||
@model={{@model}}
|
||||
class="rose-dropdown-link {{if @style (concat "rose-dropdown-link-" @style)}}"
|
||||
class='rose-dropdown-link
|
||||
{{if @style (concat 'rose-dropdown-link-' @style)}}'
|
||||
>
|
||||
{{yield}}
|
||||
</LinkTo>
|
||||
@@ -30,7 +32,8 @@
|
||||
...attributes
|
||||
@route={{@route}}
|
||||
@query={{@query}}
|
||||
class="rose-dropdown-link {{if @style (concat "rose-dropdown-link-" @style)}}"
|
||||
class='rose-dropdown-link
|
||||
{{if @style (concat 'rose-dropdown-link-' @style)}}'
|
||||
>
|
||||
{{yield}}
|
||||
</LinkTo>
|
||||
@@ -38,9 +41,10 @@
|
||||
<LinkTo
|
||||
...attributes
|
||||
@route={{@route}}
|
||||
class="rose-dropdown-link {{if @style (concat "rose-dropdown-link-" @style)}}"
|
||||
class='rose-dropdown-link
|
||||
{{if @style (concat 'rose-dropdown-link-' @style)}}'
|
||||
>
|
||||
{{yield}}
|
||||
</LinkTo>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
@@ -1,12 +1,15 @@
|
||||
<section class="rose-dropdown-section" aria-labelledby={{concat "dropdown-section-title-" this.id}}>
|
||||
<section
|
||||
class='rose-dropdown-section'
|
||||
aria-labelledby={{concat 'dropdown-section-title-' this.id}}
|
||||
>
|
||||
{{#if @title}}
|
||||
<h2
|
||||
id={{concat "dropdown-section-title-" this.id}}
|
||||
class="rose-dropdown-section-title"
|
||||
id={{concat 'dropdown-section-title-' this.id}}
|
||||
class='rose-dropdown-section-title'
|
||||
>
|
||||
{{@title}}
|
||||
</h2>
|
||||
{{/if}}
|
||||
|
||||
{{yield}}
|
||||
</section>
|
||||
</section>
|
||||
@@ -1,12 +1,12 @@
|
||||
<LinkTo
|
||||
...attributes
|
||||
class="rose-footer-brand"
|
||||
class='rose-footer-brand'
|
||||
title={{@text}}
|
||||
@route={{if @route @route "index"}}
|
||||
@route={{if @route @route 'index'}}
|
||||
>
|
||||
|
||||
{{#if @logo}}
|
||||
{{inline-svg @logo}}
|
||||
{{/if}}
|
||||
|
||||
</LinkTo>
|
||||
</LinkTo>
|
||||
@@ -1,11 +1,11 @@
|
||||
<span class="rose-footer-copyright">
|
||||
<span class="rose-footer-copyright-symbol">
|
||||
<span class='rose-footer-copyright'>
|
||||
<span class='rose-footer-copyright-symbol'>
|
||||
©
|
||||
</span>
|
||||
<span class="rose-footer-copyright-year">
|
||||
<span class='rose-footer-copyright-year'>
|
||||
{{this.currentYear}}
|
||||
</span>
|
||||
<span class="rose-footer-copyright-text">
|
||||
<span class='rose-footer-copyright-text'>
|
||||
{{@text}}
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
@@ -1,10 +1,9 @@
|
||||
<footer
|
||||
...attributes
|
||||
class="rose-footer"
|
||||
>
|
||||
{{yield (hash
|
||||
nav=(component 'rose/footer/nav')
|
||||
brand=(component 'rose/footer/brand')
|
||||
text=(component "rose/anonymous" class="rose-footer-text")
|
||||
)}}
|
||||
</footer>
|
||||
<footer ...attributes class='rose-footer'>
|
||||
{{yield
|
||||
(hash
|
||||
nav=(component 'rose/footer/nav')
|
||||
brand=(component 'rose/footer/brand')
|
||||
text=(component 'rose/anonymous' class='rose-footer-text')
|
||||
)
|
||||
}}
|
||||
</footer>
|
||||
@@ -1,5 +1,3 @@
|
||||
<nav class="rose-footer-nav" aria-label="footer-nav">
|
||||
{{yield (hash
|
||||
link=(component 'rose/footer/nav/link')
|
||||
)}}
|
||||
<nav class='rose-footer-nav' aria-label='footer-nav'>
|
||||
{{yield (hash link=(component 'rose/footer/nav/link'))}}
|
||||
</nav>
|
||||
@@ -1,8 +1,9 @@
|
||||
{{#if @href}}
|
||||
<a target="_blank"
|
||||
<a
|
||||
target='_blank'
|
||||
href={{@href}}
|
||||
class="rose-footer-nav-link"
|
||||
rel="noopener noreferrer"
|
||||
class='rose-footer-nav-link'
|
||||
rel='noopener noreferrer'
|
||||
>
|
||||
{{yield}}
|
||||
</a>
|
||||
@@ -13,8 +14,8 @@
|
||||
...attributes
|
||||
@route={{@route}}
|
||||
@model={{@model}}
|
||||
class="rose-footer-nav-link"
|
||||
class='rose-footer-nav-link'
|
||||
>
|
||||
{{yield}}
|
||||
</LinkTo>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
@@ -1,10 +1,10 @@
|
||||
<span class="rose-footer-product">
|
||||
<span class="rose-footer-product-text">
|
||||
<span class='rose-footer-product'>
|
||||
<span class='rose-footer-product-text'>
|
||||
{{@text}}
|
||||
</span>
|
||||
|
||||
{{#if @version}}
|
||||
<span class="rose-footer-product-version">
|
||||
<span class='rose-footer-product-version'>
|
||||
v{{@version}}
|
||||
</span>
|
||||
{{/if}}
|
||||
|
||||
@@ -1,8 +1,5 @@
|
||||
<div class="rose-form-actions" ...attributes>
|
||||
<Rose::Button
|
||||
@style="secondary"
|
||||
{{on "click" @enableEdit}}
|
||||
>
|
||||
<div class='rose-form-actions' ...attributes>
|
||||
<Rose::Button @style='secondary' {{on 'click' @enableEdit}}>
|
||||
{{@enableEditText}}
|
||||
</Rose::Button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,19 +1,15 @@
|
||||
<div class="rose-form-actions" ...attributes>
|
||||
<Rose::Button
|
||||
@disabled={{@submitDisabled}}
|
||||
@submit={{true}}
|
||||
@style="primary"
|
||||
>
|
||||
<div class='rose-form-actions' ...attributes>
|
||||
<Rose::Button @disabled={{@submitDisabled}} @submit={{true}} @style='primary'>
|
||||
{{@submitText}}
|
||||
</Rose::Button>
|
||||
|
||||
{{#if this.showCancel}}
|
||||
<Rose::Button
|
||||
@disabled={{@cancelDisabled}}
|
||||
@style="secondary"
|
||||
{{on "click" @cancel}}
|
||||
@style='secondary'
|
||||
{{on 'click' @cancel}}
|
||||
>
|
||||
{{@cancelText}}
|
||||
</Rose::Button>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,12 +1,15 @@
|
||||
{{#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)
|
||||
{{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}}
|
||||
}}
|
||||
{{/each}}
|
||||
@@ -1,31 +1,35 @@
|
||||
<div class="rose-form-checkbox{{if @error " error"}} {{if @inline " inline"}}">
|
||||
<div class='rose-form-checkbox{{if @error ' error'}} {{if @inline ' inline'}}'>
|
||||
|
||||
<Input
|
||||
...attributes
|
||||
class="rose-form-checkbox-field"
|
||||
class='rose-form-checkbox-field'
|
||||
id={{this.id}}
|
||||
name={{@name}}
|
||||
disabled={{@disabled}}
|
||||
onChange={{@onChange}}
|
||||
@type="checkbox"
|
||||
@type='checkbox'
|
||||
@checked={{if @checked true false}}
|
||||
aria-describedby="{{if @helperText (concat 'helper-text-' this.id)}} {{if @error (concat 'errors-' this.id)}}" />
|
||||
aria-describedby='{{if @helperText (concat 'helper-text-' this.id)}} {{if
|
||||
@error
|
||||
(concat 'errors-' this.id)
|
||||
}}'
|
||||
/>
|
||||
|
||||
<label class="rose-form-checkbox-label" for={{this.id}}>
|
||||
<span class="rose-form-checkbox-label-text">{{@label}}</span>
|
||||
<label class='rose-form-checkbox-label' for={{this.id}}>
|
||||
<span class='rose-form-checkbox-label-text'>{{@label}}</span>
|
||||
{{#if @description}}
|
||||
<p class="rose-form-checkbox-label-description">{{@description}}</p>
|
||||
<p class='rose-form-checkbox-label-description'>{{@description}}</p>
|
||||
{{/if}}
|
||||
</label>
|
||||
|
||||
{{#if @helperText}}
|
||||
<Rose::Form::HelperText @id="helper-text-{{this.id}}" @error={{@error}}>
|
||||
<Rose::Form::HelperText @id='helper-text-{{this.id}}' @error={{@error}}>
|
||||
{{@helperText}}
|
||||
</Rose::Form::HelperText>
|
||||
{{/if}}
|
||||
|
||||
{{yield (hash
|
||||
errors=(component 'rose/form/errors' id=(concat 'errors-' this.id))
|
||||
)}}
|
||||
{{yield
|
||||
(hash errors=(component 'rose/form/errors' id=(concat 'errors-' this.id)))
|
||||
}}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,5 +1,3 @@
|
||||
<div class="rose-form-errors" id={{@id}} ...attributes>
|
||||
{{yield (hash
|
||||
message=(component 'rose/form/errors/message')
|
||||
)}}
|
||||
</div>
|
||||
<div class='rose-form-errors' id={{@id}} ...attributes>
|
||||
{{yield (hash message=(component 'rose/form/errors/message'))}}
|
||||
</div>
|
||||
@@ -1,4 +1,4 @@
|
||||
<p class="rose-form-error-message" ...attributes>
|
||||
<Rose::Icon @name="flight-icons/svg/x-square-16" @size="medium" />
|
||||
<p class='rose-form-error-message' ...attributes>
|
||||
<Rose::Icon @name='flight-icons/svg/x-square-16' @size='medium' />
|
||||
{{yield}}
|
||||
</p>
|
||||
</p>
|
||||
@@ -1,21 +1,25 @@
|
||||
<fieldset ...attributes class='rose-form-fieldset' aria-describedby={{if (has-block "description") (concat 'description-' this.id)}}>
|
||||
<legend
|
||||
id={{concat 'title-' this.id}}
|
||||
class='rose-form-fieldset-title'
|
||||
<fieldset
|
||||
...attributes
|
||||
class='rose-form-fieldset'
|
||||
aria-describedby={{if
|
||||
(has-block 'description')
|
||||
(concat 'description-' this.id)
|
||||
}}
|
||||
>
|
||||
<legend id={{concat 'title-' this.id}} class='rose-form-fieldset-title'>
|
||||
{{yield to='title'}}
|
||||
</legend>
|
||||
|
||||
{{#if (has-block 'description')}}
|
||||
<div
|
||||
id={{concat 'description-' this.id}}
|
||||
class='rose-form-fieldset-description'
|
||||
>
|
||||
{{yield to='title'}}
|
||||
</legend>
|
||||
|
||||
{{#if (has-block "description")}}
|
||||
<div
|
||||
id={{concat 'description-' this.id}}
|
||||
class='rose-form-fieldset-description'
|
||||
>
|
||||
{{yield to='description'}}
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
<div class='rose-form-fieldset-body'>
|
||||
{{yield to='body'}}
|
||||
{{yield to='description'}}
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
<div class='rose-form-fieldset-body'>
|
||||
{{yield to='body'}}
|
||||
</div>
|
||||
</fieldset>
|
||||
@@ -1,12 +1,16 @@
|
||||
<span
|
||||
class="rose-form-helper-text{{if @error " error"}}"
|
||||
class='rose-form-helper-text{{if @error ' error'}}'
|
||||
id={{@id}}
|
||||
...attributes
|
||||
>
|
||||
{{yield}}
|
||||
{{#if @link}}
|
||||
{{#if @link}}
|
||||
{{#if @linkText}}
|
||||
<a href={{@link}} target='_blank' rel='noreferrer noopener'>{{@linkText}}</a>
|
||||
<a
|
||||
href={{@link}}
|
||||
target='_blank'
|
||||
rel='noreferrer noopener'
|
||||
>{{@linkText}}</a>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
</span>
|
||||
</span>
|
||||
@@ -1,37 +1,42 @@
|
||||
<form
|
||||
...attributes
|
||||
novalidate
|
||||
method="post"
|
||||
class="rose-form"
|
||||
autocomplete="off"
|
||||
{{on "submit" this.handleSubmit}}
|
||||
method='post'
|
||||
class='rose-form'
|
||||
autocomplete='off'
|
||||
{{on 'submit' this.handleSubmit}}
|
||||
>
|
||||
{{!--
|
||||
{{!
|
||||
Only show the edit toggle button if the toggle is enabled in the first place
|
||||
AND the form is not already in editable mode.
|
||||
|
||||
The cancel button's disabled state depends on the mode. In edit mode,
|
||||
the cancel button is only disabled if the disabled argument is true,
|
||||
otherwise it is disabled based on the computed property this.disabled.
|
||||
--}}
|
||||
{{yield (hash
|
||||
radioGroup=(component 'rose/form/radio/group' disabled=this.disabled)
|
||||
checkbox=(component 'rose/form/checkbox' disabled=this.disabled)
|
||||
checkboxGroup=(component 'rose/form/checkbox/group' disabled=this.disabled)
|
||||
input=(component 'rose/form/input' disabled=this.disabled)
|
||||
select=(component 'rose/form/select' disabled=this.disabled)
|
||||
textarea=(component 'rose/form/textarea' disabled=this.disabled)
|
||||
fieldset=(component 'rose/form/fieldset')
|
||||
actions=(component
|
||||
(if this.showEditToggleButton
|
||||
'rose/form/actions/edit-toggle'
|
||||
'rose/form/actions'
|
||||
}}
|
||||
{{yield
|
||||
(hash
|
||||
radioGroup=(component 'rose/form/radio/group' disabled=this.disabled)
|
||||
checkbox=(component 'rose/form/checkbox' disabled=this.disabled)
|
||||
checkboxGroup=(component
|
||||
'rose/form/checkbox/group' disabled=this.disabled
|
||||
)
|
||||
submitDisabled=this.disabled
|
||||
cancelDisabled=(if @showEditToggle @disabled this.disabled)
|
||||
cancel=this.handleCancel
|
||||
enableEdit=this.enableEdit
|
||||
input=(component 'rose/form/input' disabled=this.disabled)
|
||||
select=(component 'rose/form/select' disabled=this.disabled)
|
||||
textarea=(component 'rose/form/textarea' disabled=this.disabled)
|
||||
fieldset=(component 'rose/form/fieldset')
|
||||
actions=(component
|
||||
(if
|
||||
this.showEditToggleButton
|
||||
'rose/form/actions/edit-toggle'
|
||||
'rose/form/actions'
|
||||
)
|
||||
submitDisabled=this.disabled
|
||||
cancelDisabled=(if @showEditToggle @disabled this.disabled)
|
||||
cancel=this.handleCancel
|
||||
enableEdit=this.enableEdit
|
||||
)
|
||||
isEditable=this.isEditable
|
||||
)
|
||||
isEditable=this.isEditable
|
||||
)}}
|
||||
</form>
|
||||
}}
|
||||
</form>
|
||||
@@ -1,44 +1,47 @@
|
||||
{{#if @contextual}}
|
||||
{{yield (hash
|
||||
label=(component 'rose/form/label'
|
||||
for=this.id
|
||||
error=@error
|
||||
{{yield
|
||||
(hash
|
||||
label=(component 'rose/form/label' for=this.id error=@error)
|
||||
helperText=(component
|
||||
'rose/form/helper-text' id=(concat 'helper-text-' this.id) error=@error
|
||||
)
|
||||
field=(component
|
||||
'rose/form/input/input'
|
||||
id=this.id
|
||||
name=@name
|
||||
value=@value
|
||||
type=@type
|
||||
disabled=@disabled
|
||||
error=@error
|
||||
aria-describedby=(concat
|
||||
(if @helperText (concat 'helper-text-' this.id))
|
||||
(if @error (concat ' errors-' this.id))
|
||||
)
|
||||
)
|
||||
errors=(component 'rose/form/errors' id=(concat 'errors-' this.id))
|
||||
)
|
||||
helperText=(component 'rose/form/helper-text'
|
||||
id=(concat 'helper-text-' this.id)
|
||||
error=@error
|
||||
)
|
||||
field=(component 'rose/form/input/input'
|
||||
id=this.id
|
||||
name=@name
|
||||
value=@value
|
||||
type=@type
|
||||
disabled=@disabled
|
||||
error=@error
|
||||
aria-describedby=(concat (if @helperText (concat 'helper-text-' this.id)) (if @error (concat ' errors-' this.id)))
|
||||
)
|
||||
errors=(component 'rose/form/errors'
|
||||
id=(concat 'errors-' this.id)
|
||||
)
|
||||
)}}
|
||||
}}
|
||||
{{else}}
|
||||
<div class="rose-form-input">
|
||||
<div class='rose-form-input'>
|
||||
|
||||
<Rose::Form::Label @for={{this.id}} @error={{@error}}>
|
||||
{{@label}}
|
||||
</Rose::Form::Label>
|
||||
|
||||
{{#if @helperText}}
|
||||
<Rose::Form::HelperText @id="helper-text-{{this.id}}" @error={{@error}} @link={{@link}} @linkText={{@linkText}}>
|
||||
<Rose::Form::HelperText
|
||||
@id='helper-text-{{this.id}}'
|
||||
@error={{@error}}
|
||||
@link={{@link}}
|
||||
@linkText={{@linkText}}
|
||||
>
|
||||
{{@helperText}}
|
||||
</Rose::Form::HelperText>
|
||||
{{/if}}
|
||||
|
||||
<div class="rose-input-wrapper">
|
||||
<div class='rose-input-wrapper'>
|
||||
{{#if @icon}}
|
||||
<Rose::Icon
|
||||
@name={{@icon}}
|
||||
@size="medium" />
|
||||
<Rose::Icon @name={{@icon}} @size='medium' />
|
||||
{{/if}}
|
||||
<Rose::Form::Input::Input
|
||||
...attributes
|
||||
@@ -48,13 +51,15 @@
|
||||
@type={{@type}}
|
||||
@disabled={{@disabled}}
|
||||
@error={{@error}}
|
||||
@aria-describedby="{{if @helperText (concat 'helper-text-' this.id)}} {{if @error (concat 'errors-' this.id)}}" />
|
||||
@aria-describedby='{{if
|
||||
@helperText
|
||||
(concat 'helper-text-' this.id)
|
||||
}} {{if @error (concat 'errors-' this.id)}}'
|
||||
/>
|
||||
</div>
|
||||
{{yield (hash
|
||||
errors=(component 'rose/form/errors'
|
||||
id=(concat 'errors-' this.id)
|
||||
)
|
||||
)}}
|
||||
{{yield
|
||||
(hash errors=(component 'rose/form/errors' id=(concat 'errors-' this.id)))
|
||||
}}
|
||||
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
@@ -1,9 +1,10 @@
|
||||
<Input
|
||||
...attributes
|
||||
class="rose-form-input-field{{if @error " error"}}"
|
||||
class='rose-form-input-field{{if @error ' error'}}'
|
||||
id={{@id}}
|
||||
disabled={{@disabled}}
|
||||
name={{@name}}
|
||||
@type={{@type}}
|
||||
@value={{@value}}
|
||||
aria-describedby={{@aria-describedby}} />
|
||||
aria-describedby={{@aria-describedby}}
|
||||
/>
|
||||
@@ -1,7 +1,3 @@
|
||||
<label
|
||||
class="rose-form-label{{if @error " error"}}"
|
||||
for={{@for}}
|
||||
...attributes
|
||||
>
|
||||
<label class='rose-form-label{{if @error ' error'}}' for={{@for}} ...attributes>
|
||||
{{yield}}
|
||||
</label>
|
||||
</label>
|
||||
@@ -1,4 +1,20 @@
|
||||
{{yield (hash
|
||||
radio=(component 'rose/form/radio/radio' name=@name selectedValue=@selectedValue disabled=@disabled changed=@changed inline=@inline)
|
||||
card=(component 'rose/form/radio/card' name=@name selectedValue=@selectedValue disabled=@disabled changed=@changed layout=@layout)
|
||||
)}}
|
||||
{{yield
|
||||
(hash
|
||||
radio=(component
|
||||
'rose/form/radio/radio'
|
||||
name=@name
|
||||
selectedValue=@selectedValue
|
||||
disabled=@disabled
|
||||
changed=@changed
|
||||
inline=@inline
|
||||
)
|
||||
card=(component
|
||||
'rose/form/radio/card'
|
||||
name=@name
|
||||
selectedValue=@selectedValue
|
||||
disabled=@disabled
|
||||
changed=@changed
|
||||
layout=@layout
|
||||
)
|
||||
)
|
||||
}}
|
||||
@@ -1,30 +1,33 @@
|
||||
<div class="{{this.className}} {{if @error " error"}} {{if @inline "inline"}}">
|
||||
<div class='{{this.className}} {{if @error ' error'}} {{if @inline 'inline'}}'>
|
||||
|
||||
<RadioButton
|
||||
...attributes
|
||||
@radioClass="rose-form-radio-field"
|
||||
@radioClass='rose-form-radio-field'
|
||||
@radioId={{this.id}}
|
||||
type="radio"
|
||||
type='radio'
|
||||
disabled={{@disabled}}
|
||||
@name={{@name}}
|
||||
@value={{@value}}
|
||||
@groupValue={{@selectedValue}}
|
||||
@disabled={{@disabled}}
|
||||
@changed={{@changed}} />
|
||||
@changed={{@changed}}
|
||||
/>
|
||||
|
||||
<label class="rose-form-radio-label" for={{this.id}}>
|
||||
<label class='rose-form-radio-label' for={{this.id}}>
|
||||
|
||||
{{#if @icon}}
|
||||
<Rose::Icon
|
||||
@name={{@icon}}
|
||||
@size="medium"
|
||||
/>
|
||||
<Rose::Icon @name={{@icon}} @size='medium' />
|
||||
{{/if}}
|
||||
|
||||
{{@label}}
|
||||
<span class="radio-card-overlay"></span>
|
||||
{{#if @helperText}}
|
||||
<Rose::Form::HelperText @id="helper-text-{{this.id}}" @error={{@error}} @link={{@link}} @linkText={{@linkText}}>
|
||||
<span class='radio-card-overlay'></span>
|
||||
{{#if @helperText}}
|
||||
<Rose::Form::HelperText
|
||||
@id='helper-text-{{this.id}}'
|
||||
@error={{@error}}
|
||||
@link={{@link}}
|
||||
@linkText={{@linkText}}
|
||||
>
|
||||
{{@helperText}}
|
||||
</Rose::Form::HelperText>
|
||||
{{/if}}
|
||||
@@ -32,4 +35,4 @@
|
||||
|
||||
{{yield}}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,51 +1,57 @@
|
||||
{{#if @contextual}}
|
||||
{{yield (hash
|
||||
label=(component 'rose/form/label'
|
||||
for=this.id
|
||||
error=@error
|
||||
)
|
||||
helperText=(component 'rose/form/helper-text'
|
||||
id=(concat 'helper-text-' this.id)
|
||||
error=@error
|
||||
)
|
||||
field=(component 'rose/form/select/select'
|
||||
id=this.id
|
||||
name=@name
|
||||
value=@value
|
||||
onChange=@onChange
|
||||
disabled=@disabled
|
||||
error=@error
|
||||
aria-describedby=(concat (if @helperText (concat 'helper-text-' this.id)) (if @error (concat ' errors-' this.id)))
|
||||
)
|
||||
errors=(component 'rose/form/errors'
|
||||
id=(concat 'errors-' this.id)
|
||||
)
|
||||
)}}
|
||||
{{else}}
|
||||
<div class="rose-form-select">
|
||||
|
||||
<Rose::Form::Label @for={{this.id}} @error={{@error}}>
|
||||
{{@label}}
|
||||
</Rose::Form::Label>
|
||||
|
||||
{{#if @helperText}}
|
||||
<Rose::Form::HelperText @id="helper-text-{{this.id}}" @error={{@error}}>
|
||||
{{@helperText}}
|
||||
</Rose::Form::HelperText>
|
||||
{{/if}}
|
||||
|
||||
{{yield (hash
|
||||
field=(component 'rose/form/select/select'
|
||||
{{yield
|
||||
(hash
|
||||
label=(component 'rose/form/label' for=this.id error=@error)
|
||||
helperText=(component
|
||||
'rose/form/helper-text' id=(concat 'helper-text-' this.id) error=@error
|
||||
)
|
||||
field=(component
|
||||
'rose/form/select/select'
|
||||
id=this.id
|
||||
name=@name
|
||||
value=@value
|
||||
onChange=@onChange
|
||||
disabled=@disabled
|
||||
error=@error
|
||||
aria-describedby=(concat (if @helperText (concat 'helper-text-' this.id)) (if @error (concat ' errors-' this.id)))
|
||||
aria-describedby=(concat
|
||||
(if @helperText (concat 'helper-text-' this.id))
|
||||
(if @error (concat ' errors-' this.id))
|
||||
)
|
||||
)
|
||||
errors=(component 'rose/form/errors' id=(concat 'errors-' this.id))
|
||||
)}}
|
||||
)
|
||||
}}
|
||||
{{else}}
|
||||
<div class='rose-form-select'>
|
||||
|
||||
<Rose::Form::Label @for={{this.id}} @error={{@error}}>
|
||||
{{@label}}
|
||||
</Rose::Form::Label>
|
||||
|
||||
{{#if @helperText}}
|
||||
<Rose::Form::HelperText @id='helper-text-{{this.id}}' @error={{@error}}>
|
||||
{{@helperText}}
|
||||
</Rose::Form::HelperText>
|
||||
{{/if}}
|
||||
|
||||
{{yield
|
||||
(hash
|
||||
field=(component
|
||||
'rose/form/select/select'
|
||||
id=this.id
|
||||
name=@name
|
||||
value=@value
|
||||
onChange=@onChange
|
||||
disabled=@disabled
|
||||
error=@error
|
||||
aria-describedby=(concat
|
||||
(if @helperText (concat 'helper-text-' this.id))
|
||||
(if @error (concat ' errors-' this.id))
|
||||
)
|
||||
)
|
||||
errors=(component 'rose/form/errors' id=(concat 'errors-' this.id))
|
||||
)
|
||||
}}
|
||||
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
@@ -1,6 +1,6 @@
|
||||
<XSelect
|
||||
...attributes
|
||||
class="rose-form-select-field{{if @error " error"}}"
|
||||
class='rose-form-select-field{{if @error ' error'}}'
|
||||
id={{@id}}
|
||||
name={{@name}}
|
||||
disabled={{@disabled}}
|
||||
@@ -10,4 +10,4 @@
|
||||
as |xs|
|
||||
>
|
||||
{{yield xs}}
|
||||
</XSelect>
|
||||
</XSelect>
|
||||
@@ -1,34 +1,39 @@
|
||||
{{#if @contextual}}
|
||||
{{yield (hash
|
||||
label=(component 'rose/form/label'
|
||||
for=this.id
|
||||
error=@error
|
||||
{{yield
|
||||
(hash
|
||||
label=(component 'rose/form/label' for=this.id error=@error)
|
||||
helperText=(component
|
||||
'rose/form/helper-text' id=(concat 'helper-text-' this.id) error=@error
|
||||
)
|
||||
field=(component
|
||||
'rose/form/textarea/textarea'
|
||||
id=this.id
|
||||
name=@name
|
||||
value=@value
|
||||
disabled=@disabled
|
||||
error=@error
|
||||
aria-describedby=(concat
|
||||
(if @helperText (concat 'helper-text-' this.id))
|
||||
(if @error (concat ' errors-' this.id))
|
||||
)
|
||||
)
|
||||
errors=(component 'rose/form/errors' id=(concat 'errors-' this.id))
|
||||
)
|
||||
helperText=(component 'rose/form/helper-text'
|
||||
id=(concat 'helper-text-' this.id)
|
||||
error=@error
|
||||
)
|
||||
field=(component 'rose/form/textarea/textarea'
|
||||
id=this.id
|
||||
name=@name
|
||||
value=@value
|
||||
disabled=@disabled
|
||||
error=@error
|
||||
aria-describedby=(concat (if @helperText (concat 'helper-text-' this.id)) (if @error (concat ' errors-' this.id)))
|
||||
)
|
||||
errors=(component 'rose/form/errors'
|
||||
id=(concat 'errors-' this.id)
|
||||
)
|
||||
)}}
|
||||
}}
|
||||
{{else}}
|
||||
<div class="rose-form-input">
|
||||
<div class='rose-form-input'>
|
||||
|
||||
<Rose::Form::Label @for={{this.id}} @error={{@error}}>
|
||||
{{@label}}
|
||||
</Rose::Form::Label>
|
||||
|
||||
{{#if @helperText}}
|
||||
<Rose::Form::HelperText @id="helper-text-{{this.id}}" @error={{@error}} @link={{@link}} @linkText={{@linkText}}>
|
||||
<Rose::Form::HelperText
|
||||
@id='helper-text-{{this.id}}'
|
||||
@error={{@error}}
|
||||
@link={{@link}}
|
||||
@linkText={{@linkText}}
|
||||
>
|
||||
{{@helperText}}
|
||||
</Rose::Form::HelperText>
|
||||
{{/if}}
|
||||
@@ -40,11 +45,15 @@
|
||||
@value={{@value}}
|
||||
@disabled={{@disabled}}
|
||||
@error={{@error}}
|
||||
@aria-describedby="{{if @helperText (concat 'helper-text-' this.id)}} {{if @error (concat 'errors-' this.id)}}" />
|
||||
@aria-describedby='{{if @helperText (concat 'helper-text-' this.id)}} {{if
|
||||
@error
|
||||
(concat 'errors-' this.id)
|
||||
}}'
|
||||
/>
|
||||
|
||||
{{yield (hash
|
||||
errors=(component 'rose/form/errors' id=(concat 'errors-' this.id))
|
||||
)}}
|
||||
{{yield
|
||||
(hash errors=(component 'rose/form/errors' id=(concat 'errors-' this.id)))
|
||||
}}
|
||||
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
@@ -1,8 +1,9 @@
|
||||
<Textarea
|
||||
...attributes
|
||||
class="rose-form-input-field{{if @error " error"}}"
|
||||
class='rose-form-input-field{{if @error ' error'}}'
|
||||
id={{@id}}
|
||||
name={{@name}}
|
||||
disabled={{@disabled}}
|
||||
@value={{@value}}
|
||||
aria-describedby={{@aria-describedby}} />
|
||||
aria-describedby={{@aria-describedby}}
|
||||
/>
|
||||
@@ -1,11 +1,11 @@
|
||||
<section ...attributes class="rose-frame">
|
||||
<section ...attributes class='rose-frame'>
|
||||
|
||||
<header class="rose-frame-header">
|
||||
{{yield to="header"}}
|
||||
<header class='rose-frame-header'>
|
||||
{{yield to='header'}}
|
||||
</header>
|
||||
|
||||
<div class="rose-frame-body">
|
||||
{{yield to="body"}}
|
||||
<div class='rose-frame-body'>
|
||||
{{yield to='body'}}
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</section>
|
||||
@@ -1,8 +1,8 @@
|
||||
<LinkTo
|
||||
...attributes
|
||||
class="rose-header-brand"
|
||||
class='rose-header-brand'
|
||||
title={{@text}}
|
||||
@route={{if @route @route "index"}}
|
||||
@route={{if @route @route 'index'}}
|
||||
>
|
||||
|
||||
{{#if @logo}}
|
||||
@@ -10,7 +10,7 @@
|
||||
{{/if}}
|
||||
|
||||
{{#if @text}}
|
||||
<h1 class="rose-header-brand-text">{{@text}}</h1>
|
||||
<h1 class='rose-header-brand-text'>{{@text}}</h1>
|
||||
{{/if}}
|
||||
|
||||
</LinkTo>
|
||||
</LinkTo>
|
||||
@@ -1,10 +1,9 @@
|
||||
<div
|
||||
...attributes
|
||||
class="rose-header"
|
||||
>
|
||||
{{yield (hash
|
||||
brand=(component 'rose/header/brand')
|
||||
utilities=(component 'rose/header/utilities')
|
||||
nav=(component 'rose/header/nav')
|
||||
)}}
|
||||
</div>
|
||||
<div ...attributes class='rose-header'>
|
||||
{{yield
|
||||
(hash
|
||||
brand=(component 'rose/header/brand')
|
||||
utilities=(component 'rose/header/utilities')
|
||||
nav=(component 'rose/header/nav')
|
||||
)
|
||||
}}
|
||||
</div>
|
||||
@@ -1,6 +1,8 @@
|
||||
<nav class="rose-header-nav" aria-label="header-nav">
|
||||
{{yield (hash
|
||||
link=(component 'link-to' class="rose-header-nav-link")
|
||||
dropdown=(component 'rose/dropdown')
|
||||
)}}
|
||||
</nav>
|
||||
<nav class='rose-header-nav' aria-label='header-nav'>
|
||||
{{yield
|
||||
(hash
|
||||
link=(component 'link-to' class='rose-header-nav-link')
|
||||
dropdown=(component 'rose/dropdown')
|
||||
)
|
||||
}}
|
||||
</nav>
|
||||
@@ -1,5 +1,3 @@
|
||||
<div class="rose-header-utilities">
|
||||
{{yield (hash
|
||||
dropdown=(component 'rose/dropdown' dropdownRight=true)
|
||||
)}}
|
||||
</div>
|
||||
<div class='rose-header-utilities'>
|
||||
{{yield (hash dropdown=(component 'rose/dropdown' dropdownRight=true))}}
|
||||
</div>
|
||||
@@ -1,3 +1,3 @@
|
||||
<span ...attributes class="rose-icon {{@size}}">
|
||||
<span ...attributes class='rose-icon {{@size}}'>
|
||||
{{inline-svg @name}}
|
||||
</span>
|
||||
</span>
|
||||
@@ -1,3 +1,3 @@
|
||||
<section ...attributes class="rose-layout-centered">
|
||||
<section ...attributes class='rose-layout-centered'>
|
||||
{{yield}}
|
||||
</section>
|
||||
</section>
|
||||
@@ -1,7 +1,11 @@
|
||||
<section ...attributes class="rose-layout-global">
|
||||
{{yield (hash
|
||||
header=(component "rose/anonymous" tagName="header" class="rose-layout-global-header")
|
||||
body=(component "rose/anonymous" class="rose-layout-global-body")
|
||||
footer=(component "rose/anonymous" class="rose-layout-global-footer")
|
||||
)}}
|
||||
</section>
|
||||
<section ...attributes class='rose-layout-global'>
|
||||
{{yield
|
||||
(hash
|
||||
header=(component
|
||||
'rose/anonymous' tagName='header' class='rose-layout-global-header'
|
||||
)
|
||||
body=(component 'rose/anonymous' class='rose-layout-global-body')
|
||||
footer=(component 'rose/anonymous' class='rose-layout-global-footer')
|
||||
)
|
||||
}}
|
||||
</section>
|
||||
@@ -1,9 +1,15 @@
|
||||
<div ...attributes class="rose-layout-page">
|
||||
{{yield (hash
|
||||
breadcrumbs=(component "rose/anonymous" class="rose-layout-page-breadcrumbs")
|
||||
header=(component "rose/anonymous" class="rose-layout-page-header")
|
||||
actions=(component "rose/anonymous" class="rose-layout-page-actions")
|
||||
navigation=(component "rose/anonymous" class="rose-layout-page-navigation")
|
||||
body=(component "rose/anonymous" class="rose-layout-page-body")
|
||||
)}}
|
||||
</div>
|
||||
<div ...attributes class='rose-layout-page'>
|
||||
{{yield
|
||||
(hash
|
||||
breadcrumbs=(component
|
||||
'rose/anonymous' class='rose-layout-page-breadcrumbs'
|
||||
)
|
||||
header=(component 'rose/anonymous' class='rose-layout-page-header')
|
||||
actions=(component 'rose/anonymous' class='rose-layout-page-actions')
|
||||
navigation=(component
|
||||
'rose/anonymous' class='rose-layout-page-navigation'
|
||||
)
|
||||
body=(component 'rose/anonymous' class='rose-layout-page-body')
|
||||
)
|
||||
}}
|
||||
</div>
|
||||
@@ -1,6 +1,10 @@
|
||||
<div ...attributes class="rose-layout-sidebar">
|
||||
{{yield (hash
|
||||
body=(component "rose/anonymous" class="rose-layout-sidebar-body")
|
||||
sidebar=(component "rose/anonymous" tagName="aside" class="rose-layout-sidebar-sidebar")
|
||||
)}}
|
||||
</div>
|
||||
<div ...attributes class='rose-layout-sidebar'>
|
||||
{{yield
|
||||
(hash
|
||||
body=(component 'rose/anonymous' class='rose-layout-sidebar-body')
|
||||
sidebar=(component
|
||||
'rose/anonymous' tagName='aside' class='rose-layout-sidebar-sidebar'
|
||||
)
|
||||
)
|
||||
}}
|
||||
</div>
|
||||
@@ -1,31 +1,27 @@
|
||||
<LinkTo
|
||||
class="rose-link-button {{if @style (concat "rose-button-" @style)}} {{if @iconOnly 'has-icon-only'}} {{if @iconLeft 'has-icon-left'}} {{if @iconRight 'has-icon-right'}}"
|
||||
class='rose-link-button
|
||||
{{if @style (concat 'rose-button-' @style)}}
|
||||
{{if @iconOnly 'has-icon-only'}}
|
||||
{{if @iconLeft 'has-icon-left'}}
|
||||
{{if @iconRight 'has-icon-right'}}'
|
||||
@route={{@route}}
|
||||
...attributes>
|
||||
<span class="rose-button-wrapper">
|
||||
...attributes
|
||||
>
|
||||
<span class='rose-button-wrapper'>
|
||||
{{#if @iconLeft}}
|
||||
<Rose::Icon
|
||||
@name={{@iconLeft}}
|
||||
@size="medium"
|
||||
/>
|
||||
<Rose::Icon @name={{@iconLeft}} @size='medium' />
|
||||
{{/if}}
|
||||
|
||||
<span class="rose-button-body">
|
||||
<span class='rose-button-body'>
|
||||
{{yield}}
|
||||
</span>
|
||||
|
||||
{{#if @iconOnly}}
|
||||
<Rose::Icon
|
||||
@name={{@iconOnly}}
|
||||
@size="medium"
|
||||
/>
|
||||
<Rose::Icon @name={{@iconOnly}} @size='medium' />
|
||||
{{/if}}
|
||||
|
||||
{{#if @iconRight}}
|
||||
<Rose::Icon
|
||||
@name={{@iconRight}}
|
||||
@size="medium"
|
||||
/>
|
||||
<Rose::Icon @name={{@iconRight}} @size='medium' />
|
||||
{{/if}}
|
||||
</span>
|
||||
</LinkTo>
|
||||
</LinkTo>
|
||||
@@ -1,5 +1,3 @@
|
||||
<ul class="rose-list-key-value">
|
||||
{{yield (hash
|
||||
item=(component 'rose/list/key-value/item')
|
||||
)}}
|
||||
</ul>
|
||||
<ul class='rose-list-key-value'>
|
||||
{{yield (hash item=(component 'rose/list/key-value/item'))}}
|
||||
</ul>
|
||||
@@ -1,13 +1,20 @@
|
||||
<li class="rose-list-key-value-item" aria-labelledby={{concat "item-key-" this.id}}>
|
||||
{{yield (hash
|
||||
key=(component 'rose/anonymous'
|
||||
id=(concat "item-key-" this.id)
|
||||
tagName='div'
|
||||
classNames='rose-list-key-value-item-cell'
|
||||
<li
|
||||
class='rose-list-key-value-item'
|
||||
aria-labelledby={{concat 'item-key-' this.id}}
|
||||
>
|
||||
{{yield
|
||||
(hash
|
||||
key=(component
|
||||
'rose/anonymous'
|
||||
id=(concat 'item-key-' this.id)
|
||||
tagName='div'
|
||||
classNames='rose-list-key-value-item-cell'
|
||||
)
|
||||
cell=(component
|
||||
'rose/anonymous'
|
||||
tagName='div'
|
||||
classNames='rose-list-key-value-item-cell'
|
||||
)
|
||||
)
|
||||
cell=(component 'rose/anonymous'
|
||||
tagName='div'
|
||||
classNames='rose-list-key-value-item-cell'
|
||||
)
|
||||
)}}
|
||||
</li>
|
||||
}}
|
||||
</li>
|
||||
@@ -1,27 +1,28 @@
|
||||
<article
|
||||
...attributes
|
||||
class="rose-message"
|
||||
>
|
||||
<article ...attributes class='rose-message'>
|
||||
|
||||
{{#if @title}}
|
||||
<header class="rose-message-header">
|
||||
<header class='rose-message-header'>
|
||||
{{#if @icon}}
|
||||
<Rose::Icon @name={{@icon}} />
|
||||
{{/if}}
|
||||
|
||||
<h2 class="rose-message-title">{{@title}}</h2>
|
||||
<h2 class='rose-message-title'>{{@title}}</h2>
|
||||
|
||||
{{#if @subtitle}}
|
||||
<h3 class="rose-message-subtitle">{{@subtitle}}</h3>
|
||||
<h3 class='rose-message-subtitle'>{{@subtitle}}</h3>
|
||||
{{/if}}
|
||||
</header>
|
||||
{{/if}}
|
||||
|
||||
<section class="rose-message-body">
|
||||
{{yield (hash
|
||||
description=(component "rose/anonymous" tagName="p" class="rose-message-description")
|
||||
link=(component "link-to" class="rose-message-link")
|
||||
)}}
|
||||
<section class='rose-message-body'>
|
||||
{{yield
|
||||
(hash
|
||||
description=(component
|
||||
'rose/anonymous' tagName='p' class='rose-message-description'
|
||||
)
|
||||
link=(component 'link-to' class='rose-message-link')
|
||||
)
|
||||
}}
|
||||
</section>
|
||||
|
||||
</article>
|
||||
</article>
|
||||
@@ -1,5 +1,3 @@
|
||||
<nav ...attributes class="rose-nav-breadcrumbs" aria-label="breadcrumbs">
|
||||
{{yield (hash
|
||||
link=(component "rose/nav/link")
|
||||
)}}
|
||||
</nav>
|
||||
<nav ...attributes class='rose-nav-breadcrumbs' aria-label='breadcrumbs'>
|
||||
{{yield (hash link=(component 'rose/nav/link'))}}
|
||||
</nav>
|
||||
@@ -1,9 +1,9 @@
|
||||
{{#if @model}}
|
||||
<LinkTo @route={{@route}} @model={{@model}} class="rose-nav-link">
|
||||
<LinkTo @route={{@route}} @model={{@model}} class='rose-nav-link'>
|
||||
{{yield}}
|
||||
</LinkTo>
|
||||
{{else}}
|
||||
<LinkTo @route={{@route}} class="rose-nav-link">
|
||||
<LinkTo @route={{@route}} class='rose-nav-link'>
|
||||
{{yield}}
|
||||
</LinkTo>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
@@ -1,18 +1,17 @@
|
||||
<nav
|
||||
...attributes
|
||||
class="rose-nav-sidebar"
|
||||
class='rose-nav-sidebar'
|
||||
id={{this.id}}
|
||||
title={{@title}}
|
||||
aria-labelledby={{if @title (concat "title-" this.id)}}>
|
||||
aria-labelledby={{if @title (concat 'title-' this.id)}}
|
||||
>
|
||||
|
||||
{{#if @title}}
|
||||
<span class="rose-nav-title" id="title-{{this.id}}">
|
||||
<span class='rose-nav-title' id='title-{{this.id}}'>
|
||||
{{@title}}
|
||||
</span>
|
||||
{{/if}}
|
||||
|
||||
{{yield (hash
|
||||
link=(component "rose/nav/link")
|
||||
)}}
|
||||
{{yield (hash link=(component 'rose/nav/link'))}}
|
||||
|
||||
</nav>
|
||||
</nav>
|
||||
@@ -1,9 +1,5 @@
|
||||
<nav
|
||||
...attributes
|
||||
class="rose-nav-tabs">
|
||||
<nav ...attributes class='rose-nav-tabs'>
|
||||
|
||||
{{yield (hash
|
||||
link=(component "rose/nav/link")
|
||||
)}}
|
||||
{{yield (hash link=(component 'rose/nav/link'))}}
|
||||
|
||||
</nav>
|
||||
</nav>
|
||||
@@ -1,37 +1,36 @@
|
||||
<section
|
||||
...attributes
|
||||
class="rose-notification is-{{@style}}{{if @dismiss " is-dismissible"}}"
|
||||
role="alert"
|
||||
aria-live="{{if @dismiss "assertive"}}"
|
||||
aria-atomic="true"
|
||||
class='rose-notification is-{{@style}}{{if @dismiss ' is-dismissible'}}'
|
||||
role='alert'
|
||||
aria-live='{{if @dismiss 'assertive'}}'
|
||||
aria-atomic='true'
|
||||
>
|
||||
|
||||
<header class="rose-notification-header">
|
||||
<header class='rose-notification-header'>
|
||||
<Rose::Icon
|
||||
class="rose-notification-icon"
|
||||
class='rose-notification-icon'
|
||||
@name={{this.icon}}
|
||||
@size="medium" />
|
||||
@size='medium'
|
||||
/>
|
||||
{{@heading}}
|
||||
</header>
|
||||
|
||||
<div class="rose-notification-body">
|
||||
<div class='rose-notification-body'>
|
||||
{{yield}}
|
||||
</div>
|
||||
|
||||
{{#if @dismiss}}
|
||||
<button
|
||||
type="button"
|
||||
class="rose-notification-dismiss"
|
||||
type='button'
|
||||
class='rose-notification-dismiss'
|
||||
title={{@dismissText}}
|
||||
{{on "click" @dismiss}}
|
||||
{{on 'click' @dismiss}}
|
||||
>
|
||||
<Rose::Icon
|
||||
@name="flight-icons/svg/x-16"
|
||||
@size="medium" />
|
||||
<span class="rose-notification-dismiss-text">
|
||||
<Rose::Icon @name='flight-icons/svg/x-16' @size='medium' />
|
||||
<span class='rose-notification-dismiss-text'>
|
||||
{{@dismissText}}
|
||||
</span>
|
||||
</button>
|
||||
{{/if}}
|
||||
|
||||
</section>
|
||||
</section>
|
||||
@@ -1 +1 @@
|
||||
<hr class="rose-separator" />
|
||||
<hr class='rose-separator' />
|
||||
@@ -1,17 +1,22 @@
|
||||
<table ...attributes class="rose-table {{if @style (concat "rose-table-" @style)}}">
|
||||
<table
|
||||
...attributes
|
||||
class='rose-table {{if @style (concat 'rose-table-' @style)}}'
|
||||
>
|
||||
{{#if @caption}}
|
||||
<caption>{{@caption}}</caption>
|
||||
{{/if}}
|
||||
|
||||
{{yield (hash
|
||||
header=(component 'rose/table/section'
|
||||
tagName='thead'
|
||||
classNames='rose-table-header')
|
||||
body=(component 'rose/table/section'
|
||||
tagName='tbody'
|
||||
classNames='rose-table-body')
|
||||
footer=(component 'rose/table/section'
|
||||
tagName='tfoot'
|
||||
classNames='rose-table-footer')
|
||||
)}}
|
||||
</table>
|
||||
{{yield
|
||||
(hash
|
||||
header=(component
|
||||
'rose/table/section' tagName='thead' classNames='rose-table-header'
|
||||
)
|
||||
body=(component
|
||||
'rose/table/section' tagName='tbody' classNames='rose-table-body'
|
||||
)
|
||||
footer=(component
|
||||
'rose/table/section' tagName='tfoot' classNames='rose-table-footer'
|
||||
)
|
||||
)
|
||||
}}
|
||||
</table>
|
||||
@@ -1,6 +1,13 @@
|
||||
<tr ...attributes class='rose-table-row {{if @hidden (concat "rose-table-row-visually-hidden")}} {{if @style (concat "rose-table-row-" @style)}}'>
|
||||
{{yield (hash
|
||||
cell=(component 'rose/table/row/cell')
|
||||
headerCell=(component 'rose/table/row/cell' tagName='th')
|
||||
)}}
|
||||
</tr>
|
||||
<tr
|
||||
...attributes
|
||||
class='rose-table-row
|
||||
{{if @hidden (concat 'rose-table-row-visually-hidden')}}
|
||||
{{if @style (concat 'rose-table-row-' @style)}}'
|
||||
>
|
||||
{{yield
|
||||
(hash
|
||||
cell=(component 'rose/table/row/cell')
|
||||
headerCell=(component 'rose/table/row/cell' tagName='th')
|
||||
)
|
||||
}}
|
||||
</tr>
|
||||
@@ -1,3 +1 @@
|
||||
{{yield (hash
|
||||
row=(component 'rose/table/row')
|
||||
)}}
|
||||
{{yield (hash row=(component 'rose/table/row'))}}
|
||||
@@ -1,3 +1,3 @@
|
||||
<div ...attributes class="rose-toolbar">
|
||||
{{yield}}
|
||||
<div ...attributes class='rose-toolbar'>
|
||||
{{yield}}
|
||||
</div>
|
||||
@@ -1 +1 @@
|
||||
{{outlet}}
|
||||
{{outlet}}
|
||||
@@ -1,4 +1,8 @@
|
||||
<Rose::LinkButton @route="index" @style="primary" @iconRight="flight-icons/svg/entry-point-16">
|
||||
<Rose::LinkButton
|
||||
@route='index'
|
||||
@style='primary'
|
||||
@iconRight='flight-icons/svg/entry-point-16'
|
||||
>
|
||||
Content
|
||||
</Rose::LinkButton>
|
||||
|
||||
@@ -9,9 +13,7 @@
|
||||
@onChange={{this.checkboxGroupChanged}}
|
||||
as |group|
|
||||
>
|
||||
<group.checkbox
|
||||
@label={{group.item.name}}
|
||||
value={{group.item.id}} />
|
||||
<group.checkbox @label={{group.item.name}} value={{group.item.id}} />
|
||||
</Rose::Form::Checkbox::Group>
|
||||
|
||||
<p>
|
||||
@@ -29,7 +31,7 @@
|
||||
|
||||
<h2>KeyValue Dropdown</h2>
|
||||
<Rose::Dropdown
|
||||
@text="Credential library details"
|
||||
@text='Credential library details'
|
||||
@showCaret={{true}}
|
||||
@ignoreClickInside={{true}}
|
||||
as |dropdown|
|
||||
@@ -50,62 +52,69 @@
|
||||
|
||||
<dropdown.key-value>
|
||||
<:key>Description</:key>
|
||||
<:value>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda illo ratione libero ducimus magnam, porro sed provident repellat mollitia a, repellendus placeat. Magni consequuntur cumque, debitis obcaecati dolores quasi natus?</:value>
|
||||
<:value>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda
|
||||
illo ratione libero ducimus magnam, porro sed provident repellat mollitia
|
||||
a, repellendus placeat. Magni consequuntur cumque, debitis obcaecati
|
||||
dolores quasi natus?</:value>
|
||||
</dropdown.key-value>
|
||||
|
||||
</Rose::Dropdown>
|
||||
|
||||
<h2>Condensed dropdown</h2>
|
||||
<Rose::Dropdown
|
||||
@style="condensed"
|
||||
@text="Credential library details"
|
||||
@style='condensed'
|
||||
@text='Credential library details'
|
||||
@showCaret={{true}}
|
||||
as |dropdown|
|
||||
>
|
||||
<dropdown.section @title="ID">
|
||||
<dropdown.section @title='ID'>
|
||||
<dropdown.item>cl_nbv9375hLHs</dropdown.item>
|
||||
</dropdown.section>
|
||||
|
||||
<dropdown.separator />
|
||||
|
||||
<dropdown.section @title="Name">
|
||||
<dropdown.section @title='Name'>
|
||||
<dropdown.item>Key/Value</dropdown.item>
|
||||
</dropdown.section>
|
||||
|
||||
<dropdown.separator />
|
||||
|
||||
<dropdown.section @title="Description">
|
||||
<dropdown.item>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet sem sodales neque ultrices sollicitudin vel sed justo. Vivamus vitae sollicitudin turpis.</dropdown.item>
|
||||
<dropdown.section @title='Description'>
|
||||
<dropdown.item>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam
|
||||
sit amet sem sodales neque ultrices sollicitudin vel sed justo. Vivamus
|
||||
vitae sollicitudin turpis.</dropdown.item>
|
||||
</dropdown.section>
|
||||
</Rose::Dropdown>
|
||||
|
||||
<h2>Normal Dropdown</h2>
|
||||
<Rose::Dropdown
|
||||
@text="Credential library details"
|
||||
@text='Credential library details'
|
||||
@showCaret={{true}}
|
||||
as |dropdown|
|
||||
>
|
||||
<dropdown.section @title="ID">
|
||||
<dropdown.section @title='ID'>
|
||||
<dropdown.item>cl_nbv9375hLHs</dropdown.item>
|
||||
</dropdown.section>
|
||||
<dropdown.separator />
|
||||
|
||||
<dropdown.section @title="Name">
|
||||
<dropdown.section @title='Name'>
|
||||
<dropdown.item>Key/Value</dropdown.item>
|
||||
</dropdown.section>
|
||||
<dropdown.separator />
|
||||
|
||||
<dropdown.section @title="Description">
|
||||
<dropdown.item>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet sem sodales neque ultrices sollicitudin vel sed justo. Vivamus vitae sollicitudin turpis.</dropdown.item>
|
||||
<dropdown.section @title='Description'>
|
||||
<dropdown.item>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam
|
||||
sit amet sem sodales neque ultrices sollicitudin vel sed justo. Vivamus
|
||||
vitae sollicitudin turpis.</dropdown.item>
|
||||
</dropdown.section>
|
||||
</Rose::Dropdown>
|
||||
|
||||
<h2>Normal Dropdown</h2>
|
||||
<Rose::Dropdown
|
||||
@text="Credential library details"
|
||||
@text='Credential library details'
|
||||
@showCaret={{true}}
|
||||
as |dropdown|
|
||||
>
|
||||
<dropdown.link @route="about">Menu item</dropdown.link>
|
||||
<dropdown.link @route="about">Menu item 2</dropdown.link>
|
||||
</Rose::Dropdown>
|
||||
<dropdown.link @route='about'>Menu item</dropdown.link>
|
||||
<dropdown.link @route='about'>Menu item 2</dropdown.link>
|
||||
</Rose::Dropdown>
|
||||
@@ -2,27 +2,27 @@
|
||||
<layout.header>
|
||||
<Rose::Header as |header|>
|
||||
|
||||
<header.brand @logo="logo" @text="Product Name" />
|
||||
<header.brand @logo='logo' @text='Product Name' />
|
||||
|
||||
<header.nav as |nav|>
|
||||
<nav.dropdown @text="org-name" as |dropdown|>
|
||||
<dropdown.link @route="index">Menu item</dropdown.link>
|
||||
<dropdown.link @route="about">Menu item</dropdown.link>
|
||||
<nav.dropdown @text='org-name' as |dropdown|>
|
||||
<dropdown.link @route='index'>Menu item</dropdown.link>
|
||||
<dropdown.link @route='about'>Menu item</dropdown.link>
|
||||
<dropdown.button>Button menu item</dropdown.button>
|
||||
</nav.dropdown>
|
||||
<nav.link @route="index">Section</nav.link>
|
||||
<nav.link @route="about">Section</nav.link>
|
||||
<nav.link @route='index'>Section</nav.link>
|
||||
<nav.link @route='about'>Section</nav.link>
|
||||
</header.nav>
|
||||
|
||||
|
||||
<header.utilities as |utilities|>
|
||||
<utilities.dropdown
|
||||
@text="user@example.net"
|
||||
@text='user@example.net'
|
||||
@iconOnly={{true}}
|
||||
@icon="flight-icons/svg/user-circle-16" as |dropdown|
|
||||
@icon='flight-icons/svg/user-circle-16'
|
||||
as |dropdown|
|
||||
>
|
||||
<dropdown.link @route="index">Menu item</dropdown.link>
|
||||
<dropdown.link @route="about">Menu item</dropdown.link>
|
||||
<dropdown.link @route='index'>Menu item</dropdown.link>
|
||||
<dropdown.link @route='about'>Menu item</dropdown.link>
|
||||
<dropdown.button>Button menu item</dropdown.button>
|
||||
</utilities.dropdown>
|
||||
</header.utilities>
|
||||
@@ -35,15 +35,15 @@
|
||||
<Rose::Layout::Sidebar as |layout|>
|
||||
|
||||
<layout.sidebar>
|
||||
<Rose::Nav::Sidebar @title="Title" as |nav|>
|
||||
<nav.link @route="index">Item Name</nav.link>
|
||||
<nav.link @route="about">Item Name</nav.link>
|
||||
<nav.link @route="about">Item Name</nav.link>
|
||||
<nav.link @route="about">Item Name</nav.link>
|
||||
<Rose::Nav::Sidebar @title='Title' as |nav|>
|
||||
<nav.link @route='index'>Item Name</nav.link>
|
||||
<nav.link @route='about'>Item Name</nav.link>
|
||||
<nav.link @route='about'>Item Name</nav.link>
|
||||
<nav.link @route='about'>Item Name</nav.link>
|
||||
</Rose::Nav::Sidebar>
|
||||
</layout.sidebar>
|
||||
|
||||
<layout.body @tagName="main">
|
||||
<layout.body @tagName='main'>
|
||||
|
||||
<Rose::List::KeyValue as |list|>
|
||||
<list.item as |item|>
|
||||
@@ -68,7 +68,7 @@
|
||||
<input.field />
|
||||
</item.cell>
|
||||
<item.cell>
|
||||
<Rose::Button @style="secondary">Add</Rose::Button>
|
||||
<Rose::Button @style='secondary'>Add</Rose::Button>
|
||||
</item.cell>
|
||||
</list.item>
|
||||
</Rose::Form::Input>
|
||||
@@ -82,7 +82,11 @@
|
||||
<input.field />
|
||||
</item.cell>
|
||||
<item.cell>
|
||||
<Rose::Button @style="secondary" @iconOnly="flight-icons/svg/trash-16" title="Remove">Remove</Rose::Button>
|
||||
<Rose::Button
|
||||
@style='secondary'
|
||||
@iconOnly='flight-icons/svg/trash-16'
|
||||
title='Remove'
|
||||
>Remove</Rose::Button>
|
||||
</item.cell>
|
||||
</list.item>
|
||||
</Rose::Form::Input>
|
||||
@@ -94,4 +98,4 @@
|
||||
</Rose::Layout::Sidebar>
|
||||
|
||||
</layout.body>
|
||||
</Rose::Layout::Global>
|
||||
</Rose::Layout::Global>
|
||||
Reference in new issue
Block a user