Template With State

Using the ui-state component with the template component.

The two components operate at different times. The template resolves props at stamp time, baking static data directly into the HTML. ui-state then takes over at runtime, reacting to user interaction. Because one runs before the other, they compose naturally without any coordination.

Placing wcp-ui-state inside the template means each stamped instance gets its own isolated scope automatically. No extra wiring, no shared state leaking between instances.

This also enables mixed bindings — expressions that combine a reactive atom with a stamped-in prop value:

bind-text="$qty * [[ price ]]"

By the time ui-state sees this attribute, the template has already resolved [[ price ]] to a plain number. What remains is a normal reactive expression.

Order:

Code

The following example assumes that you have imported the component and set up the theme.

<wcp-template id="order-item">
  <template>
31 collapsed lines
    <div class="item">
      <wcp-ui-state>
        <wcp-store type="number" name="$qty" value="1"></wcp-store>

        <div class="item-details">
          <span class="item-name">[[ name ]]</span>
          <span class="item-meta">$[[ price ]] per [[ unit ]]</span>
        </div>

        <div class="item-stepper">
          <button class="step-btn" bind-attr-toggle="disabled:$qty == 1" bind-event="click:$qty($qty - 1)">−</button>
          <input
            type="number"
            class="item-input"
            bind-event="
              input: Number.isFinite(EVENT.target.valueAsNumber)
                   ? $qty(Math.min(Math.max(EVENT.target.valueAsNumber, 1), [[ max ]]))
                   : null
            "
            bind-prop="value:$qty"
            max="[[ max ]]"
            min="1"
            name="quantity"
          />
          <span class="item-qty" bind-text="'[[ unit.toUpperCase() ]]' + ($qty > 1 ? 's' : '') "></span>
          <button class="step-btn" bind-attr-toggle="disabled:$qty >= [[ max ]]" bind-event="click:$qty($qty + 1)">+</button>
        </div>

        <span class="item-total" bind-text="'$' + $qty * [[ price ]]"></span>
      </wcp-ui-state>
    </div>
  </template>
</wcp-template>

<h3 style="margin-block-start: 0.5em">Order:</h3>
<div class="order-list">
  <wcp-template prop-max:json="10" prop-name="Apples" prop-price:json="2" prop-unit="kg" use="order-item"></wcp-template>
  <wcp-template prop-max:json="5" prop-name="Bread" prop-price:json="3" prop-unit="loaf" use="order-item"></wcp-template>
  <wcp-template prop-max:json="3" prop-name="Coffee" prop-price:json="12" prop-unit="bag" use="order-item"></wcp-template>
</div>

<style>
92 collapsed lines
  .order-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-block-start: 1em;

    .item {
      padding: 0.75rem 1rem;
      background-color: var(--sb-color-gray-6);
      border: 1px solid var(--sb-color-gray-5);
      border-radius: 0.5rem;

      wcp-ui-state {
        display: flex;
        gap: 1rem;
        align-items: center;
      }
    }

    .item-details {
      display: flex;
      flex: 1;
      flex-direction: column;
      gap: 0.15rem;
    }

    .item-name {
      font-size: var(--sb-text-sm);
      font-weight: 600;
      color: var(--sb-heading-color);
    }

    .item-meta {
      font-size: var(--sb-text-2xs);
      color: var(--sb-color-gray-4);
    }

    .item-stepper {
      display: flex;
      gap: 0.5rem;
      align-items: center;
      padding: 0.25rem;
      background: var(--sb-color-gray-6);
      border-radius: 0.375rem;
    }

    .item-input {
      inline-size: 3rem;
      padding: 0.25rem;
      font-size: var(--sb-text-base);
      color: var(--sb-color-text);
      text-align: center;
      background: var(--sb-color-gray-5);
      border: none;
      border-radius: 0.25rem;
    }

    .step-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      inline-size: 1.5rem;
      block-size: 1.5rem;
      font-size: var(--sb-text-base);
      color: var(--sb-color-text);
      cursor: pointer;
      background: var(--sb-color-black);
      border: none;
      border-radius: 0.25rem;

      &:disabled {
        cursor: not-allowed;
        opacity: 0.35;
      }
    }

    .item-qty {
      min-inline-size: 2.5rem;
      font-size: var(--sb-text-xs);
      font-weight: 600;
      color: var(--sb-color-text);
      text-align: center;
    }

    .item-total {
      min-inline-size: 2.5rem;
      font-size: var(--sb-text-sm);
      font-weight: 600;
      color: var(--sb-color-accent-high);
      text-align: end;
    }
  }
</style>