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-js-grid

v1.0.1

Published

Vue.js responsive grid plugin

Downloads

420

Readme

Vue.js Grid

npm version npm

Fixed size grid for Vue.js

This is very a first version of the plugin. If you find any bugs and/or want to contribute, feel free to create issues, PRs or reach me out on twitter! 👍 🚀

Thanks!

Install

npm install --save vue-js-grid
import Vue from 'vue'
import Grid from 'vue-js-grid'

Vue.use(Grid)

Usage

data () {
  return {
    items: [
      'a',
      'b',
      'c'
    ]
}
<grid
  :draggable="true"
  :sortable="true"
  :items="items"
  :height="100"
  :width="100">
  <template slot="cell" scope="props">
    <div>{{props.item}}</div>
  </template>
</grid>

Plugin does NOT modify the source data array.

  1. Every time permutation is performed you will get a new sorted array in event (items).
  2. The same works for removing elements, you will get a new "cleaned" array in your @remove event handler.
  3. Currently there is no way to extend data array after event handling. But hopefully I'll come up with a clean way to do it in nearest future.

Props

| Name | Type | Default | Description | | --- | --- | --- | --- | | items | Array | [] | Initial array of items | | cellWidth | Number | 80 | Cell width | | cellHeight | Number | 80 | Cell height | | draggable | Boolean | false | Flag that will let you drag grid's cells | | dragDelay | Number | 0 | @TODO | | sortable | Boolean | false | Flag that will let you reorder grid's cells, requires draggable to be true | | center | Boolean | false | @TODO |

Events

| Name | Description | | --- | --- | | @change | Occurs on every action that involves reordering array or changing it's length | | @remove | Occurs when an element is deleted through template | | @click | Occurs when cell is clicked | | @sort | Occurs when array item order is changed manually |

Cell template

Cell template is used to get access to list data, indexing and sorting params generated by plugin.

Template's scope contains:

props.item - list item value

props.index - initial index of the item

props.sort - current index of an item after sorting

props.remove() - method that will remove item from the arrey and resport list.

Example:

<template slot="cell" scope="props">
  <div @click="() => { props.remove() }">
    <div>Data: {{props.item}}</div>
    <div>{{props.index}} / {{props.sort}}</div>
</template>

Why do i need this?

A good example of using a plugin would be rending macOS' Launchpad or Dock. Check out a demo for a solid example of how the plugin behaves & feels.

Demo: https://euvl.github.io/vue-js-grid/

Roadmap

  1. Add element insertion
  2. Add tests