https://github.com/appoly/vue-sheet
https://github.com/appoly/vue-sheet
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/appoly/vue-sheet
- Owner: appoly
- Created: 2024-11-21T12:31:41.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-05-21T14:49:32.000Z (about 1 year ago)
- Last Synced: 2025-10-14T07:57:55.325Z (8 months ago)
- Language: Vue
- Size: 92.8 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vue Sheet
A flexible, accessible, and customizable Sheet component for Vue 3. Inspired by [Shadcn](https://ui.shadcn.com/).
## 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
```bash
npm install @appoly/vue-sheet
# or
yarn add @appoly/vue-sheet
```
## Usage
Basic Usage
```vue
Open Sheet
Sheet content
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?')
}
```
[Try it out on StackBlitz](https://stackblitz.com/edit/vue-sheet-basic?file=src%2FApp.vue)
Expandable
```vue
Open Sheet
Sheet content
```
[Try it out on StackBlitz](https://stackblitz.com/edit/vue-sheet-basic-zmh3ukfn?file=src%2FApp.vue)
Custom Buttons
```vue
Open Sheet
Maximize
Minimize
Close
Sheet content
```
[Try it out on StackBlitz](https://stackblitz.com/edit/vue-sheet-basic-br4j7zo3?file=src%2FApp.vue)
## 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 |
## Slots
- `trigger`: Custom trigger element
- `close`: Custom close button
- `maximize`: Custom maximize button
- `minimize`: Custom minimize button
- Default slot: Sheet content