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

View file

@ -7,52 +7,11 @@
> >
{{item.name}} {{item.name}}
</label> </label>
{{#if (eq item.system.quantity 0)}} <dd-incrementer
<button class="material__quantity"
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"
value="{{item.system.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="system.quantity"
data-embedded-update-on="blur" data-embedded-update-on="change"
>
<button
type="button"
aria-hidden="true"
tabindex="-1"
class="material__button material__button--increment icon"
data-embedded-increment="system.quantity"
data-embedded-id="{{item.uuid}}" data-embedded-id="{{item.uuid}}"
> ></dd-incrementer>
<div aria-hidden="true" class="icon icon--14">
{{{ icons.create }}}
</div>
</button>
</div> </div>