@appoly/vue-sheet NPM

Vue Sheet

A flexible, accessible, and customizable Sheet component for Vue 3. Inspired by Shadcn.

Features

Multiple positioning options (left, right, top, bottom)
Customizable width and height
Easy to use with v-model/prop binding
Escape key support
Customizable trigger and close buttons

Dependencies

Vue 3.x

Installation

npm install @appoly/vue-sheet
# or
yarn add @appoly/vue-sheet

Usage

Basic Usage

<template>
  <Sheet 
    v-model:open="isOpen"
    @update:open="isOpen = $event"
    position="right"
    :can-close="canClose"
  >
    <template #trigger>
      <button>Open Sheet</button>
    </template>
    
    <div>
      <!-- Your sheet content here -->
      Sheet content
    </div>
  </Sheet>
</template>

<script setup>
import { ref } from 'vue'
import { Sheet } from '@appoly/vue-sheet'
import '@appoly/vue-sheet/dist/style.css'

const isOpen = ref(false)
const canClose = () => {
  return confirm('Are you sure you want to close the sheet?')
}
</script>

Try it out on StackBlitz

Expandable

<template>
  <Sheet
    position="left"
    expandable
    :expand-default="true"
  >
    <template #trigger>
      <button>Open Sheet</button>
    </template>
    
    <div>
      <!-- Your sheet content here -->
      Sheet content
    </div>
  </Sheet>
</template>

Try it out on StackBlitz

Custom Buttons

<template>
  <Sheet 
    position="bottom"
  >
    <template #trigger>
      <button>Open Sheet</button>
    </template>
    
    <template #maximize>
      <button>Maximize</button>
    </template>
    
    <template #minimize>
      <button>Minimize</button>
    </template>
    
    <template #close>
      <button>Close</button>
    </template>
    
    <div>
      <!-- Your sheet content here -->
      Sheet content
    </div>
  </Sheet>
</template>

Try it out on StackBlitz

Props

Prop	Type	Default	Description	Allowed Values
position	String	"right"	Sheet slide direction	"left", "right", "top", "bottom"
width	String	"500px"	Width of sheet (when left/right)	CSS width values (px, %, em, rem, vw, vh)
height	String	"500px"	Height of sheet (when top/bottom)	CSS height values (px, %, em, rem, vw, vh)
maxWidth	String	"90%"	Maximum width of sheet	Percentage values
maxHeight	String	"90%"	Maximum height of sheet	Percentage values
open	Boolean	false	Control sheet open state	true/false
closeOnEscape	Boolean	true	Close sheet when Escape is pressed	true/false
noTrigger	Boolean	false	Disable default trigger	true/false
canClose	Function	() => true	Custom function to determine if the sheet can be closed	Function returning boolean
expandable	Boolean	false	Allow the sheet to be expanded	true/false
expandDefault	Boolean	false	Default expand state (true means expanded)	true/false