Ermine UI

Action sheet

A short list of things to do with something, sliding up from the bottom of the screen with a Cancel button underneath.

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 action-sheet
pnpm dlx ermineui add action-sheet
yarn dlx ermineui add action-sheet
bunx ermineui add action-sheet

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

Use

import { ActionSheet, ActionSheetItem } from '@/components/ui/action-sheet'
<AppBar title="Orders" back @back="router.back()">
  <template #end><button class="er-app-bar-button" aria-label="Search"><Icon name="search" /></button></template>
</AppBar>

<Fab label="New"><template #actions><FabAction @select="newOrder">New order</FabAction></template></Fab>

<ActionSheet title="Wool throw">
  <template #trigger><Button>Options</Button></template>
  <ActionSheetItem @select="share">Share</ActionSheetItem>
  <ActionSheetItem destructive @select="remove">Remove</ActionSheetItem>
</ActionSheet>

<SwipeActions>
  <div class="row">…</div>
  <template #actions><button data-destructive @click="remove">Delete</button></template>
</SwipeActions>

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
ActionSheet.vuesrc/components/ui/action-sheet/ActionSheet.vue
ActionSheetItem.vuesrc/components/ui/action-sheet/ActionSheetItem.vue
index.tssrc/components/ui/action-sheet/index.ts

It is built from: Dialog, Sheet. 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.

ActionSheet.vue 130 lines
<script setup lang="ts">
import { Sheet, SheetClose, SheetContent, SheetDescription, SheetTitle, SheetTrigger } from '../sheet'

withDefaults(
  defineProps<{
    /** What the actions are for: "Wool throw", "3 photos selected". Read out as the sheet's name even when hidden. */
    title: string
    /** A line under the title, e.g. what cannot be undone. */
    description?: string
    /** Keep the title for screen readers only. */
    hideTitle?: boolean
    /** The words on the button that closes the sheet without doing anything. */
    cancelLabel?: string
  }>(),
  { cancelLabel: 'Cancel' },
)

const open = defineModel<boolean>('open', { default: false })
</script>

<template>
  <Sheet v-model:open="open">
    <!-- The button that opens the sheet. -->
    <SheetTrigger v-if="$slots.trigger" as-child><slot name="trigger" /></SheetTrigger>
    <SheetContent side="bottom" :show-close="false" class="er-action-sheet">
      <div class="er-action-sheet-head" :data-hidden="hideTitle ? '' : undefined">
        <SheetTitle>{{ title }}</SheetTitle>
        <SheetDescription v-if="description">{{ description }}</SheetDescription>
      </div>
      <!-- ActionSheetItem, one per action. -->
      <div class="er-action-sheet-items"><slot /></div>
      <SheetClose class="er-action-sheet-item er-action-sheet-cancel">{{ cancelLabel }}</SheetClose>
    </SheetContent>
  </Sheet>
</template>

<style>
@layer components {
  /* Narrower than the screen on anything wider than a phone, and clear of the home indicator. */
  .er-sheet-content.er-action-sheet {
    gap: 0.5rem;
    width: min(100%, 28rem);
    margin-inline: auto;
    padding: 0.75rem 0.75rem max(0.75rem, env(safe-area-inset-bottom));
    border: 1px solid var(--er-border);
    border-bottom: 0;
    border-radius: var(--er-radius-xl) var(--er-radius-xl) 0 0;
  }

  .er-action-sheet-head {
    display: grid;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
    text-align: center;
  }

  .er-action-sheet-head .er-sheet-title {
    font-size: 0.9375rem;
  }

  .er-action-sheet-head[data-hidden] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .er-action-sheet-items {
    display: grid;
    border: 1px solid var(--er-border);
    border-radius: var(--er-radius-lg);
    overflow: hidden;
  }

  .er-action-sheet-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 3rem;
    padding: 0.5rem 1rem;
    border: 0;
    background: transparent;
    color: var(--er-foreground);
    font: inherit;
    font-size: 1rem;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--er-duration);
  }

  .er-action-sheet-items .er-action-sheet-item + .er-action-sheet-item {
    border-top: 1px solid var(--er-border);
  }

  .er-action-sheet-item:hover {
    background: var(--er-accent);
  }

  .er-action-sheet-item:focus-visible {
    outline: 2px solid var(--er-ring);
    outline-offset: -2px;
  }

  .er-action-sheet-item:disabled {
    opacity: 0.5;
    pointer-events: none;
  }

  .er-action-sheet-item[data-destructive] {
    color: var(--er-destructive);
  }

  .er-action-sheet-item svg {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
  }

  .er-action-sheet-cancel {
    justify-content: center;
    border: 1px solid var(--er-border);
    border-radius: var(--er-radius-lg);
    font-weight: var(--er-weight-semibold);
  }
}
</style>
ActionSheetItem.vue 28 lines
<script setup lang="ts">
import { useDialog } from '../dialog/context'

defineProps<{
  /** Something that cannot be undone, such as deleting: shown in the warning colour. */
  destructive?: boolean
  disabled?: boolean
}>()

const emit = defineEmits<{
  /** The action was chosen. The sheet closes by itself. */
  select: []
}>()

const sheet = useDialog()

function choose() {
  sheet.setOpen(false)
  emit('select')
}
</script>

<template>
  <button type="button" class="er-action-sheet-item" :data-destructive="destructive ? '' : undefined" :disabled="disabled" @click="choose">
    <slot />
  </button>
</template>
index.ts 4 lines
/** Action sheet — a short list of things to do with something, sliding up from the bottom of the screen with a Cancel button underneath. */
export { default as ActionSheet } from './ActionSheet.vue'
export { default as ActionSheetItem } from './ActionSheetItem.vue'