mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-18 16:01:40 +03:00
c3487fea41
refs https://github.com/TryGhost/Ghost/issues/14101 - migrated component to Glimmer - swapped usage of `ValidationState` mixin for `{{validation-status}}` modifier - updated modifier to accept custom error/success classes - removed unnecessary/unused code in the `gh-benefit-item.js` backing class
46 lines
1.8 KiB
Handlebars
46 lines
1.8 KiB
Handlebars
<div
|
|
class="gh-blognav-item {{unless @benefitItem.isNew "gh-blognav-item--sortable"}}"
|
|
{{validation-status errorClass="gh-blognav-item--error" errors=@benefitItem.errors}}
|
|
...attributes
|
|
>
|
|
{{#unless @benefitItem.isNew}}
|
|
<span class="gh-blognav-grab">
|
|
{{svg-jar "grab"}}
|
|
<span class="sr-only">Reorder</span>
|
|
</span>
|
|
{{/unless}}
|
|
|
|
<div class="gh-blognav-line {{unless @benefitItem.name "placeholder"}}">
|
|
{{svg-jar "check-2"}}
|
|
<span
|
|
class="gh-blognav-label"
|
|
{{validation-status errors=@benefitItem.errors property="name" hasValidated=@benefitItem.hasValidated}}
|
|
>
|
|
<GhTrimFocusInput
|
|
@shouldFocus={{@benefitItem.last}}
|
|
@placeholder={{if this.isFreeTier "Access to all public posts" "Expert analysis"}}
|
|
@value={{readonly @benefitItem.name}}
|
|
@input={{this.handleLabelInput}}
|
|
@keyPress={{this.clearLabelErrors}}
|
|
@stopEnterKeyDownPropagation={{true}}
|
|
@focus-out={{fn this.updateLabel @benefitItem.name}}
|
|
data-test-input="benefit-label" />
|
|
|
|
<GhErrorMessage
|
|
@errors={{@benefitItem.errors}}
|
|
@property="name"
|
|
data-test-error="benefit-label" />
|
|
</span>
|
|
</div>
|
|
|
|
{{#if @benefitItem.isNew}}
|
|
<button type="button" class="gh-blognav-add" {{on "click" (fn @addItem @benefitItem)}} data-test-button="add-benefit">
|
|
{{svg-jar "plus"}}<span class="sr-only">Add</span>
|
|
</button>
|
|
{{else}}
|
|
<button type="button" class="gh-blognav-delete" {{on "click" (fn @deleteItem @benefitItem)}} data-test-button="delete-benefit">
|
|
{{svg-jar "trash"}}<span class="sr-only">Delete</span>
|
|
</button>
|
|
{{/if}}
|
|
|
|
</div> |