:bento: Vue.js 2.x responsive grid system with smooth sorting, drag-n-drop and reordering

Overview

Vue.js Grid ( Experiment )

⚠️ This an experement and not a production-ready plugin

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>

Codesandbox Demo

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 its 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 the item after sorting
  • props.remove(): method that removes the item from the array and resort 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
Comments
  • Extract css into a separate file

    Extract css into a separate file

    From what I see, the css is bundled together inside the final js output. This can be an issue if you want to customize the css later on. Also there is some css directly on the body https://github.com/euvl/vue-js-grid/blob/master/src/Grid.vue#L228

    enhancement todo 
    opened by cristijora 5
  • 安卓系统移动不好使

    安卓系统移动不好使

    错误原因在文件188行: https://github.com/euvl/vue-js-grid/blob/master/src/Grid.vue

    代码应该如下: var targetItem = {} var itemLength = this.list.length; for (var i = 0 ; i < itemLength ; i++) { if (this.list[i].index === itemIndex) { targetItem = this.list[i]; }

    question 
    opened by jiangshengxin 3
  • Make use of vue-npm-template

    Make use of vue-npm-template

    This is more of a suggestion to consider using vue-npm-template It provides by default:

    • rollup bundler (usually produces smaller bundles than webpack)
    • commonjs, esm and umd builds
    • sass support
    • development server with little configuration within the same package.json

    https://github.com/cristijora/vue-npm-template

    If you are interested I can make a PR to a separate branch so you can try it out

    opened by cristijora 3
  • error!

    error!

    your windowWidth is the all window,if I want to make a region,then do something ,just like many gridDiv , When the screen is zoomed out, the avalable windowWidth = windowWidth - other Field, so can you edit your code to perfect the problem

    opened by daodaolee 1
  • Is the prop 'center' still a todo?

    Is the prop 'center' still a todo?

    When I set the center prop to true the grid aligns all the items in the center, just as I expect.

    The readme still states this to be a @TODO.
    Is this still correct or is this feature implemented?

    opened by idelsink 1
  • Provide online demo

    Provide online demo

    I added a codesandbox demo based on your demo folder. This will allow people to edit and play with the demo code online. This can also be a very good starting point for reporting bugs/issues.

    opened by cristijora 1
  • Bump npm from 5.10.0 to 6.13.4 in /demo

    Bump npm from 5.10.0 to 6.13.4 in /demo

    Bumps npm from 5.10.0 to 6.13.4.

    Release notes

    Sourced from npm's releases.

    v6.13.4

    6.13.4 (2019-12-11)

    BUGFIXES

    DEPENDENCIES

    v6.13.3

    6.13.3 (2019-12-09)

    DEPENDENCIES

    v6.13.2

    6.13.2 (2019-12-03)

    BUG FIXES

    v6.13.1

    6.13.1 (2019-11-18)

    BUG FIXES

    TESTING

    ... (truncated)
    Changelog

    Sourced from npm's changelog.

    6.13.4 (2019-12-11)

    BUGFIXES

    DEPENDENCIES

    6.13.3 (2019-12-09)

    DEPENDENCIES

    6.13.2 (2019-12-03)

    BUG FIXES

    ... (truncated)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Vue npm template

    Vue npm template

    As discussed in #5 these changes basically replace webpack with POI and a rollup wrapper. You can easily:

    yarn install yarn run dev to run dev example yarn run build to produce 3 bundles (commonjs, esm and umd)

    Only the rollup bundler alone produces reduces the bundle from 12 to 7kb (minified) without any code changes

    opened by cristijora 0
  • Drag and drop doesn't scroll dwon / up.

    Drag and drop doesn't scroll dwon / up.

    Drag and drop doesn't scroll dwon / up. move bottom item > top area or move top item > bottom area can you please solve it?

    https://user-images.githubusercontent.com/15612852/138620500-fa1cab36-6cd8-4ba0-9fd3-2263d481c04b.mov

    opened by BaeksunYou 1
  • Items floating outside parent element boundaries

    Items floating outside parent element boundaries

    Problem with using window width from what I can see is the dynamic width of the grid is dependent on the window width not the parent so this causes items to float outside the parent div. How can I fix this so the grid stays within the parent width boundaries?

    Screenshot 2021-07-28 103914

    opened by Awatatah 1
  • Version 1.0.1 conflict

    Version 1.0.1 conflict

    When installing the package using npm (Version 1.0.1), the version is different from the cloned source from Github. You can verify this by accessing the source in the /node_modules (installed package) and the source from the cloned package.

    Not sure how to actually fix this?

    opened by lewweiming 0
  • Why is the click event executed twice when I click on the child element once?

    Why is the click event executed twice when I click on the child element once?

    It's not always done twice, `

             <grid  
                :draggable="true"
                :sortable="true"
                :items="dragnees"
                center
                @sort="dragnessChange"
                @click="dragnessClick"
                >
                <template slot="cell" slot-scope="props" >
                    <div class="imgs">
                    <img
                      class="imgItem"
                      :src="props.item.url"
                      alt=""
                    />
                    <img
                      class="icon"
                      @click="del(props)"
                      src="@/assets/images/publish/detele.png"
                      alt=""
                    />
                  </div>
                </template>
              </grid>
    

    `

    opened by thomasliew 0
  • Use vue-js-grid in production

    Use vue-js-grid in production

    Hello. Please I wish to know why I can't use this plugin in production. I am very interested in using this - it makes it easier for my project and I am very attracted to it

    opened by JosiasAurel 1
Owner
Yev Vlasenko
'); drop table users; --
Yev Vlasenko
vue-products-grid is a responsive Vue component to create a products grid for ecommerce apps.

| vue-products-grid vue-products-grid is a responsive Vue component to create a products grid for ecommerce apps. Fully configurable with different op

Antonio 4 Feb 14, 2020
Vue-grid-layout is a grid layout system, like Gridster, for Vue.js.

vue-grid-layout vue-grid-layout is a grid layout system, like Gridster, for Vue.js. Heavily inspired by React-Grid-Layout Current version: 2.3.9 (Supp

Danny Funkat 0 Feb 22, 2022
Responsive grid system based on Bootstrap for Vue

Vue Grid Responsive Responsive grid system based on Bootstrap for Vue. • • Installation NPM vue 2.0 npm i vue-grid-responsive // OR yarn add vue-grid-

André Lins 27 Sep 11, 2022
Flexbox based responsive fraction grid system

vue-fraction-grid Flexbox based responsive fraction grid system for Vue.js Live Demo and Full Documentation <container> <grid vertical="middle" :rwd

Bartłomiej Kozal 87 Dec 20, 2021
Layoutit grid is a CSS Grid layout generator

Layoutit grid is a CSS Grid layout generator. Quickly draw down web pages layouts with our clean editor, and get HTML and CSS code to quickstart your next project.

Leniolabs_ 1.3k Oct 4, 2022
Auto responsive grid layout library for Vue.

autoresponsive-vue Auto responsive grid layout library for Vue. Examples Live demo & docs: xudafeng.github.io/autoresponsive-vue Installation $ npm i

达峰的夏天 139 Aug 3, 2022
🧙‍♂️🔌 Responsive Magic Grid for Vue

Vue-Magic-Grid This is a Vue.js port of @e-oj's Magic Grid. Please check the /test folder for a example. If you use images, make sure they have a set

Emmanuel Olaojo 172 Aug 17, 2022
Responsive, Draggable & Resizable Dashboard (Grid) for Vue

vue-responsive-dash A Responsive, Draggable & Resizable Dashboard (grid) made with vue and typescript. Inspired by React-Grid-Layout & Vue-Grid-Layout

Ben Sladden 231 Oct 4, 2022
Auto responsive grid layout library for Vue.

autoresponsive-vue Auto responsive grid layout library for Vue. Examples Live demo & docs: xudafeng.github.io/autoresponsive-vue Installation $ npm i

达峰的夏天 138 Sep 30, 2022
A flexbox grid system.

VueFlex A flexbox grid system. demo Try it out! setup npm npm install @seregpie/vueflex Register the components globally. import Vue from 'vue'; impor

Sergej Sintschilin 13 Oct 3, 2020
A flexbox grid system.

VueFlex A flexbox grid system. demo Try it out! setup npm npm install @seregpie/vueflex Register the components globally. import Vue from 'vue'; impor

Sergej Sintschilin 13 Oct 3, 2020
🌊 A horizontal sorting waterfall layout component for Vue.js, realized by flex layout

vue-flex-waterfall A horizontal sorting waterfall layout component for Vue.js, realized by flex layout. Refer to CSS masonry with flexbox, :nth-child(

神代綺凛 27 Jul 13, 2022
A draggable and resizable grid layout, for Vue.js.

vue-grid-layout Documentation Website What is Vue Grid Layout? vue-grid-layout is a grid layout system, like Gridster, for Vue.js. Heavily inspired by

JBay Solutions 5.9k Oct 3, 2022
Simple, Light-weight and Flexible Vue.js component for grid layout.

vue-grd Simple, Light-weight and Flexible Vue.js component for grid layout. Vue.js port of grd. Install npm install --save vue-grd Usage You can use <

Shogo Sensui 43 Jun 30, 2022
A draggable and resizable grid layout, for Vue.js.

vue-grid-layout Documentation Website What is Vue Grid Layout? vue-grid-layout is a grid layout system, like Gridster, for Vue.js. Heavily inspired by

JBay Solutions 5.9k Sep 29, 2022
A draggable and resizable grid layout, for Vue.js.

vue-grid-layout is a grid layout system, like Gridster, for Vue.js. Heavily inspired by React-Grid-Layout

ibrahem kamal 0 Aug 26, 2020
A vuejs grid with draggable and resizable boxes

dnd-grid A vuejs grid with draggable and resizable boxes Demo page The demo requires Vue >= 2.3.0 because of the ":layout.sync" feature The components

null 308 Jul 17, 2022
Vue Repsonsive Grid Layout

VueResponsiveGridLayout 1.2.0 Responsive draggable and resizable grid layout for VueJS. Its responsiveness is based on breakpoints (similar to Bootstr

lukerem 82 Jan 18, 2022
Lightweight set of functional grid components

vue-grid-styled Vue.js port of @jxnblk's React library, grid-styled Installation yarn add vue-grid-styled Default Theme // Breakpoints const breakpoin

Matt Rothenberg 17 Aug 23, 2022