Update the material item to use the incrementer component

This commit is contained in:
Oliver-Akins 2024-04-13 17:10:42 -06:00
parent 44eaec2d38
commit 050fecd4f6
2 changed files with 7 additions and 48 deletions

View file

@ -49,7 +49,7 @@
&__list {
&--material {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
@ -164,8 +164,8 @@
@include material.elevate(1);
padding: 8px;
gap: 8px;
display: grid;
grid-template-columns: 1fr min-content 50px min-content;
display: flex;
justify-content: space-between;
align-items: center;
border-radius: 4px;

View file

@ -7,52 +7,11 @@
>
{{item.name}}
</label>
{{#if (eq item.system.quantity 0)}}
<button
type="button"
class="material__button material__button--delete icon"
data-embedded-delete
data-embedded-id="{{item.uuid}}"
>
<div aria-hidden="true" class="icon icon--14">
{{{ icons.garbage-bin }}}
</div>
</button>
{{else}}
<button
type="button"
aria-hidden="true"
tabindex="-1"
class="material__button material__button--decrement icon"
data-embedded-decrement="system.quantity"
data-embedded-id="{{item.uuid}}"
>
<div aria-hidden="true" class="icon icon--14">
{{{ icons.minus }}}
</div>
</button>
{{/if}}
<input
type="number"
id="{{meta.idp}}-{{item.uuid}}-quantity-input"
class="material__input"
min="0"
<dd-incrementer
class="material__quantity"
value="{{item.system.quantity}}"
aria-label="The number of {{item.name}} you have"
data-embedded-id="{{item.uuid}}"
data-embedded-update="system.quantity"
data-embedded-update-on="blur"
>
<button
type="button"
aria-hidden="true"
tabindex="-1"
class="material__button material__button--increment icon"
data-embedded-increment="system.quantity"
data-embedded-update-on="change"
data-embedded-id="{{item.uuid}}"
>
<div aria-hidden="true" class="icon icon--14">
{{{ icons.create }}}
</div>
</button>
></dd-incrementer>
</div>