Ermine UI

Shipping method

The ways an order can be delivered as a list of cards to pick one from, each with when it arrives and what it costs.

See it liveSource on GitHub

Install

If this is the first component in the project, set up once. This writes ermine.json and copies the theme stylesheet. The installation guide covers Vue, Nuxt and Astro.

npx ermineui init
pnpm dlx ermineui init
yarn dlx ermineui init
bunx ermineui init

Then add the component:

npx ermineui add shipping-method
pnpm dlx ermineui add shipping-method
yarn dlx ermineui add shipping-method
bunx ermineui add shipping-method

That copies 3 files into src/components/ui/shipping-method/, and the 3 components it is built from. Files you already have are kept.

Use

import { ShippingMethod } from '@/components/ui/shipping-method'
<ShippingMethod v-model="method" :methods="[{ id: 'standard', title: 'Standard', eta: '3 to 5 working days', price: 0 }]" />

<OrderTracker :current="3" :stages="[{ label: 'Ordered', date: 'Oct 12' }, 'Packed', 'Shipped', 'Delivered']">Arriving Friday.</OrderTracker>

<MiniCart v-model:open="open" v-model:items="items" cart-href="/cart" @checkout="goToCheckout">
  <template #trigger="{ count }"><Button variant="outline">Cart ({{ count }})</Button></template>
</MiniCart>

In Nuxt, with the auto-import setting, the tags work in templates without the import. In Astro, use it inside a Vue island.

What gets copied

FileWhere it goes
ShippingMethod.vuesrc/components/ui/shipping-method/ShippingMethod.vue
index.tssrc/components/ui/shipping-method/index.ts
types.tssrc/components/ui/shipping-method/types.ts

It is built from: Option card, Price, Radio group. These are added with it.

The folders are the suggested ones. ermine.json says where yours are.

Source

This is exactly what the command copies. To install by hand, create each file below and the helpers listed above.

ShippingMethod.vue 34 lines
<script setup lang="ts">
import { OptionCard } from '../option-card'
import { formatMoney } from '../price'
import { RadioGroup } from '../radio-group'
import type { ShippingMethodOption } from './types'

withDefaults(
  defineProps<{
    methods: readonly ShippingMethodOption[]
    /** Accessible name of the group. */
    label?: string
    /** Submit the choice with a form under this name. */
    name?: string
    currency?: string
    locale?: string
    /** What a price of zero is written as. */
    freeLabel?: string
    disabled?: boolean
  }>(),
  { label: 'Delivery method', currency: 'USD', locale: 'en-US', freeLabel: 'Free' },
)

/** The id of the chosen method. */
const method = defineModel<string>()
</script>

<template>
  <RadioGroup v-model="method" class="er-shipping-method" :name="name" :disabled="disabled" :aria-label="label">
    <OptionCard v-for="option in methods" :key="option.id" :value="option.id" :title="option.title" :description="option.eta" :disabled="option.disabled">
      <template #end>{{ option.price > 0 ? formatMoney(option.price, currency, locale) : freeLabel }}</template>
    </OptionCard>
  </RadioGroup>
</template>
index.ts 4 lines
/** Shipping method — the ways an order can be delivered as a list of cards to pick one from, each with when it arrives and what it costs. */
export { default as ShippingMethod } from './ShippingMethod.vue'
export type { ShippingMethodOption } from './types'
types.ts 11 lines
export interface ShippingMethodOption {
  id: string
  title: string
  /** When it arrives, e.g. "3 to 5 working days" or "Tomorrow before noon". */
  eta?: string
  /** What it costs, in whole units of the currency. 0 is written as "Free". */
  price: number
  /** Cannot be chosen, e.g. not offered at this address. Say why in `eta`. */
  disabled?: boolean
}