npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-ts-responsive-grid-layout

v1.2.9

Published

Vue 3 Responsive & Dynamic Grid / Dashboard layout with drag, drop and resizable actions.

Downloads

1,126

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

gwinnemgwinnem

Keywords

griddynamic-gridgrid-layoutresponsive-grid-layoutdynamic-grid-layoutlayoutresizedragdropdrag-and-dropresponsivetypescriptes6vue-pluginvitevue-3composition-apivue-component-librarydashboarddashboard-layoutdashboard-responsive-layoutdynamic-dashboard

Readme

code style: prettier npm bundle size npm NPM Commitizen friendly

What is vue-ts-responsive-grid-layout

VUE 3 responsive grid layout is based on the original work by JBaysolution's vue-grid-layout.

This new and refactored component has more features, typesafe Emits, Props and a strict linting rule setup.

A proper App developed for testing purposes.

Documentation website contains 13 examples. Will be updated when new features are added to the component.

Donate

If you enjoyed this project — or just feeling generous, consider buying me a 🍺. Cheers!

Features:

  • Prop in GridLayout for distributing GridItem's equally.
  • GridLayout now has slot for GridItem.
  • Prop for displaying grid lines in GridLayout.
  • Prop for setting edit mode in GridLayout. Shortcuts the isDraggable and isResizable props.
  • Prop for adding border radius in GridLayout. Adds a 8px radius to each GridItem.
  • Prop in GridLayout for shifting GridItems horizontally when dragging instead of vertical.
  • Separated out style variables, so it is easier to restyle the component.
  • Added tab navigation support.
  • Close button in GridItem for removing the GridItem from the GridLayout.
  • Added more events to GridLayout and GridItem.
  • Support for resize Bottom, Bottom Right and Right in GridIem.
  • Draggable widgets
  • Resizable widgets
  • Static widgets
  • Bounds checking for dragging and resizing
  • Widgets may be added or removed without rebuilding grid
  • Layout can be serialized and restored
  • Automatic RTL support
  • Responsive using predefined layout's for different breakpoints.
  • GridItem automatically resizes when content change(Useful when displaying charts).

Testing:

Changelog

v: 1.2.9 (2024-02-03)

v: 1.2.8 (2024-01-25)

v: 1.2.7 (2024-01-10)

v: 1.2.6 (2023-12-28)

  • Fixed Issue Problem if layout doesnt have static item PullRequest

v: 1.2.5 (2023-12-14)

  • Fixed Issue editMode not working as expected
  • Documentation Updated config so when refreshing a page it loads the correct page and not the 404 page.
  • Demo App Added inputs for Margins.
  • Refactor Updated style for gridlines in GridLayout.vue.
  • Config Added style linting to project.
  • Config Updated scripts section in package.json.
  • Demo App Fixed index value when dropping a new GridItem onto the layout. This only works when index is a numeric value.
  • Demo App Added checks so number input can not have less than 1.
  • Tests Added more unit tests and refactored code so it is easier to test.

v: 1.2.4 (2023-10-23)

  • Fixed Issue Layout update event is raised before update is finished. Tnxs to SamGeems
  • Fixed issue Close button css is different from the example. Tnxs to SamGeems
  • Feature Added event drag-end to GridLayout.
  • Feature Added event drag-move to GridLayout.
  • Feature Added event drag-start to GridLayout.
  • Codebase Renamed EGridLayoutEvent value UPDATE_LAYOUT to LAYOUT_UPDATE.
  • Codebase Removed file EDragEvents and updated GridLayout. Values are implemented in EGridLayoutEvent.
  • Codebase Added documentation to file DOM.ts
  • Codebase Added new enum for drag events and refactored GridLayout to use new enum.
  • Refactor Removed obsolete enum EMovingDirections.
  • Demo App Added button for clearing the event log.
  • Demo App Added Dropdown for filtering on events.

v: 1.2.2 (2023-09-19)

Thanks to UTing1119 for his contribution to this release.

v: 1.2.1 (2023-05-07)

Setting up vue-ts-responsive-grid-layout in your project

Howto

Auditing the package

 npm audit --registry=https://registry.npmjs.org/

References