https://github.com/nathanpeck/vue-window-component

https://github.com/nathanpeck/vue-window-component

Last synced: 26 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/nathanpeck/vue-window-component
• Owner: nathanpeck
• Created: 2024-04-19T17:29:45.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-04-19T19:51:35.000Z (9 months ago)
• Last Synced: 2024-10-28T21:11:46.515Z (2 months ago)
• Language: Vue
• Size: 399 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# vue-window-component

This is an example of a basic drag and drop window component implemented in Vue.

![](working.webp)

__Usage:__

```html

  

    Test Window

  

  

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore

    magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla

    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est

    laborum.

  

```

__Links:__

- [App.vue](./src/App.vue) for usage

- [Window.vue](./src/components/Window.vue) for the draggable component itself

__Features:__

- Basic styling.

- Normalization of drops. The window will not allow itself to be dropped partially off the screen.

- Close button that emits an `@close` event.

__Running demo:__

```

bun run dev

```

Open `localhost:5137` in your browser to view the application.