OrderListItem

One tappable order row: product name, status badge, unit/item counts, headline total, payment reference and a truncated identifier. It is the row OrderList renders, and can be used standalone.

<script setup lang="ts">
import RyderOrderListItem from "@opeolluwa/ryder/components/orders/OrderListItem.vue"
</script>

<template>
  <RyderOrderListItem
    :order="order"
    :selected="selectedId === order.identifier"
    @select="openOrder"
  />
</template>

Examples

<script setup lang="ts">
import { ref } from "vue";
import OrderListItem from "../../../src/components/orders/OrderListItem.vue";
import { orders } from "./fixtures";

const selectedId = ref<string | null>(orders[1]?.identifier ?? null);

function select(identifier: string) {
  selectedId.value = identifier;
}
</script>

<template>
  <div class="flex w-full max-w-sm flex-col gap-2">
    <OrderListItem
      v-for="order in orders"
      :key="order.identifier"
      :order="order"
      :selected="selectedId === order.identifier"
      @select="select"
    />
  </div>
</template>

Props

Prop	Type	Default	Description
order	Order	—	The row's order.
selected	boolean	—	Tints the row and sets aria-current="true".
labels	Partial<Record<OrderStatus, string>>	() => ({})	Status label overrides for the embedded badge.

Emits

Event	Payload	Description
select	[identifier: string]	The row was clicked; payload is order.identifier.

Slots

None.

Notes

• The root is a real <button type="button">, so the whole row is clickable and keyboard focusable; click → $emit('select', order.identifier).
• The leading dot is the attention marker: solid primary for pending and conflicted (aria-label="Needs attention"), a hollow ring otherwise (aria-label="Settled").
• Title is order.items[0].product.name, falling back to Order #<identifier> when the order has no lines.
• Counts come from orderItemCount (total units) and the item-line count; the headline total is the first entry of totalsByCurrency formatted with formatPrice.
• The date is formatListDate(createdAt) — time for today, 14 Jan otherwise; identifiers longer than 14 characters are shortened to 10 + ….