Responsive, Draggable & Resizable Dashboard (Grid) for Vue

Overview

vue-responsive-dash

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

netlify deps code-size repo-size open-issues pull-req lic npm

Example: Edit Vue Template

⚙️ Installation

$ npm install vue-responsive-dash

📄 Documents

Link

🚀 How to use in Vue

<template>
  <div id="app">
    <dashboard :id="'dashExample'">
      <dash-layout v-for="layout in dlayouts" v-bind="layout" :debug="true" :key="layout.breakpoint">
        <dash-item v-for="item in layout.items" v-bind.sync="item" :key="item.id">
          <div class="content"></div>
        </dash-item>
      </dash-layout>
    </dashboard>
  </div>
</template>

<script>
import { Dashboard, DashLayout, DashItem } from "vue-responsive-dash";

export default {
  name: "App",
  components: {
    Dashboard,
    DashLayout,
    DashItem
  },
  data() {
    return {
      dlayouts: [
        {
          breakpoint: "xl",
          numberOfCols: 12,
          items: [
            { id: "1", x: 0, y: 0, width: 1, height: 1 },
            { id: "2", x: 1, y: 0, width: 2, height: 1 },
          ]
        },
        {
          breakpoint: "lg",
          breakpointWidth: 1200,
          numberOfCols: 10,
          items: [
            { id: "1", x: 0, y: 0, width: 1, height: 1 },
            { id: "2", x: 1, y: 0, width: 2, height: 1 },
          ]
        },
        {
          breakpoint: "md",
          breakpointWidth: 996,
          numberOfCols: 8,
          items: [
            { id: "1", x: 0, y: 0, width: 1, height: 1 },
            { id: "2", x: 1, y: 0, width: 2, height: 1 },
          ]
        },
        {
          breakpoint: "sm",
          breakpointWidth: 768,
          numberOfCols: 4,
          items: [
            { id: "1", x: 0, y: 0, width: 1, height: 1 },
            { id: "2", x: 1, y: 0, width: 2, height: 1 },
          ]
        },
        {
          breakpoint: "xs",
          breakpointWidth: 480,
          numberOfCols: 2,
          items: [
            { id: "1", x: 0, y: 0, width: 1, height: 1 },
            { id: "2", x: 1, y: 0, width: 1, height: 1 },
          ]
        },
        {
          breakpoint: "xxs",
          breakpointWidth: 0,
          numberOfCols: 1,
          items: [
            {
              id: "1",
              x: 0,
              y: 0,
              width: 1,
              height: 1
            },
            { id: "2", x: 0, y: 1, width: 1, height: 1 }
          ]
        }
      ]
    };
  }
};
</script>

<style>
.content {
  height: 100%;
  width: 100%;
  border: 2px solid #42b983;
  border-radius: 5px;
}
</style>

Grid Item Child Component

Edit Vue Template

See example above. The Grid Item object can be passed to the child component via props or injection. Typically the child component will look at the grid Item ID (which is unique) and decide what to render via a data/computed variable/s or VUEX.

See Example/Docs Website for more information.

⭐️ Show Your Support

Please give a ⭐️ if this project helped you!

👏 Contributing

If you have any questions or requests or want to contribute to vue-responsive-dash or other packages, please write the issue or give me a Pull Request freely.

🐞 Bug Report

If you find a bug, please report to us opening a new Issue on GitHub.

⚙️ Development

npm run serve

Runs the app in the development mode.
Open http://localhost:8080 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

Comments
  • Vue component definition causing duplicate vue instances

    Vue component definition causing duplicate vue instances

    I'm not sure why I can't seen to get this component to work ... coping and pasting the example results in a nothingness .. inspecting the layout instance I noticed that is due to the breaking point always being null:

    image

    How is this breakpoint calculate and why it is null?

    opened by milewski 15
  • Drag Drop into move mode

    Drag Drop into move mode

    Hi

    I am trying to get dragging a item from a list into dashboard and have it automatically add the new item and also go into moving mode without having to let go of the mouse button. So i can drag into the postion i want.

    I have got the dragging working and the auto creating the dash-item, but i am having trouble going directly into move mode.

    Here is a sample of where i am up to, you can drag the item at the top into the dashboard and it creates the dash-item, but if you continue to move the mouse around without letting of the mouse button, it doesnt drag the new dash-item around. (Not at least unles you let go and click mouse down again - which i am trying to avoid)

    https://codesandbox.io/s/vue-responsive-dash-wn52w

    Note i am using a simulate mouse function to try and trigger the change to move mode, but the mouse event doesn't seem to do the trick. Do you have any suggestions on how to go into move mode from javascript ?

    Thanks Peter

    question awaiting reply 
    opened by peterjslater 13
  • Doesn't appear to work on Windows

    Doesn't appear to work on Windows

    Hi, this project is exactly what I was looking for, but unfortunately your demo bugs out completely on my Windows machine. I've tried both Firefox and Chrome. It works perfectly on my Mac though.

    bug good first issue awaiting reply 
    opened by opeik 13
  • [Feature Request] min/max column and row height/width and min/max item height/width

    [Feature Request] min/max column and row height/width and min/max item height/width

    So I just found this component today and I really love it. It is simple to use and works pretty well. But I really miss the option to set a minimum width and height vor Grid fields and also for items. I am creating a currently nesting grids so that within an Item, there is another grid with just one column but each of the nested items do have same height as width and this is a bit annoying :)

    Is this already planned for future and can I look forward to see this feature soon?

    Greetings Jan :)

    enhancement question awaiting reply 
    opened by jxn-30 8
  • Possible Positioning error

    Possible Positioning error

    Hi

    I found a strange case where the positions of the dash-items are not where they are meant to be from the layout config. see example

    https://codesandbox.io/s/vue-responsive-dash-fhkwx?file=/src/App.vue

    The box 2 should be at the top at y=0 however it is positioned at y=6 in code it is items: [ { id: "1", x: 6, y: 3, width: 6, height: 3 }, { id: "2", x: 9, y: 0, width: 3, height: 3 }, { id: "3", x: 0, y: 0, width: 8, height: 3 }, ]

    in debug it is {"id":"2","x":9,"y":6,"top":386,"left":573,"width":3,"widthPx":178,"height":3,"heightPx":178,"draggable":true,"resizable":true},

    There seems to be enough space at the top for it to fit.

    I also found if i changed the order it seemed to fix it, e.g. following seems to work.

          items: [
            { id: "3", x: 0, y: 0, width: 8, height: 3 },
            { id: "1", x: 6, y: 3, width: 6, height: 3 },
            { id: "2", x: 9, y: 0, width: 3, height: 3 },
          ]
    

    In my case the order is user defined so I can't control the order of the items, so this is an issue for me.

    Hopefully you can find a fix.

    Regards Peter

    opened by peterjslater 7
  • Trying to stack two dashboards on top of each other causes each item to be drawn on top of each other

    Trying to stack two dashboards on top of each other causes each item to be drawn on top of each other

    I want to allow users to create new items in the spaces that there is no item already. I want to fill the empty spaces with items that let you create a panel there, like so:

    image

    The green panels would be draggable and resizable, but the gray ones would not be. Since adding gray items to the item array causes the green items to go crazy when trying to move them, I think the best way of doing this would be to draw two dashboards, the green one on top and the gray one on bottom. However, using position: absolute and setting the z-index on the layouts cause each item to be drawn on top of each other and each item becomes huge.

    position: relative image

    position: absolute image

    Is there anything going on in the code that would be messed up by using position: absolute? Is there any way you can see to accomplish what I'm trying to do?

    question awaiting reply 
    opened by TheBraveBunny 7
  • Lock Dash Item coordinates

    Lock Dash Item coordinates

    Hey it is easy or possible to add a feature to avoid one DashItem from moving out of this position if the draggable, resizable is set to false?

    For example I may have something like this:

    <dash-item id=1 draggable=false resizable=false/>
    <dash-item id=2 draggable=true resizable=true/>
    

    When I drag the item 2 to the place of item 1, the item one shifts its position to the next available slot... Ideally, I would like the item 1 to always stay at the given coordinates 0,0 and not allow item 2 to ever be on its place.. does it make sense?

    enhancement awaiting reply 
    opened by milewski 6
  • Autosize item height to grid item content

    Autosize item height to grid item content

    I didnt see anything for this in the documentation, unless I missed it Is there a way to have a grid item autosize itself to the content's height? My use case is fetching data from my API and populating widgets with it, so they're bound to be different heights

    question awaiting reply 
    opened by ghost 5
  • Cannot set property id of #<DashItem> which has only a getter

    Cannot set property id of # which has only a getter

    Hi I have started getting the following error when changing layouts dynamically since updating to 0.3.26 Do you have any ideas ? If not, I'll try and replicate the issue in https://codesandbox.io/ so you can have a look, hopefully I will be able to replicate the issue in a simple case.

    I get the error when changing from one set of layouts to a completly separate set of layouts at the same breakpoint (screen size). The id's are different so its not a duplicate id issue. The crash caues the debug view not to update, but the error still occurs with debug turned off.

    TypeError: Cannot set property id of #<DashItem> which has only a getter at VueComponent.handler (vue-responsive-dash.common.js?e6d2:10032) at Watcher.run (vue.runtime.esm.js?2b0e:4568) at flushSchedulerQueue (vue.runtime.esm.js?2b0e:4310) at Array.eval (vue.runtime.esm.js?2b0e:1980) at flushCallbacks (vue.runtime.esm.js?2b0e:1906)

    opened by peterjslater 5
  • How to make Dash Items overlap

    How to make Dash Items overlap

    Hi @bensladden, for a specific application I would like to have the Dash Items overlappable.

    User will be able to add new Items in the Layout and draw and resize them freely even if they are colliding with other Items. Is there any way to disable the collision detection so that other Items are not moved around when the new Item is added/moved/resized?

    Thank you

    question 
    opened by bscbrn 5
  • Create a slot for a

    Create a slot for a "drag handle"?

    Hi, we're enjoying this library, thanks for creating it! We need to make only the top part of a dash item draggable because we have other UI going on inside the item. What I did as a hack was just to select the drag listener for each dash item in CSS and resize it like so:

    .item > div:first-of-type {
        bottom: auto !important;
        height: 24px !important;
    }
    

    This works, but I would rather be able to define specific styles with a slot for the drag handle like we can currently do with the resize slots. Seem like a heavy lift?

    Thanks again!

    enhancement 
    opened by youraerials 4
  • Bump vuetify from 2.2.17 to 2.6.10 in /examples/vuetify

    Bump vuetify from 2.2.17 to 2.6.10 in /examples/vuetify

    Bumps vuetify from 2.2.17 to 2.6.10.

    Release notes

    Sourced from vuetify's releases.

    v2.6.10

    :wrench: Bug Fixes

    • VCalendar: prevent XSS from eventName function (ade1434), closes #15757
    • VDialog: don't try to focus tabindex="-1" or hidden inputs (89e3850), closes #15745
    • VMenu: disable activatorFixed when attach is enabled (#15709) (464529a), closes #14922
    • VTextField: only show clear icon on hover or when focused (7a51ad0)
    • VTextField: prevent tabbing to clear button (f8ee680), closes #11202
    • web-types: add support for VDataTable pattern slots (#15694) (ac45c98)

    :microscope: Code Refactoring

    • VSelect: render highlight with vnodes instead of innerHTML (4468e3c)

    BREAKING CHANGES

    • VCalendar: eventName function can no longer render arbitrary HTML, convert to VNodes instead. eventSummary can no longer be used with v-html, replace with <component :is="{ render: eventSummary }" />

    v2.6.9

    :wrench: Bug Fixes

    • VCalendar: add aria roles to monthly calendar (#14640) (2cd34b4), closes #14604
    • VCalendar: forward all bound events to internal elements (#15592) (299330c)
    • VCarousel: add keys to delimiter buttons (#15459) (8d3895b)
    • VPagination: ignore invalid length values (f3f8d15), closes #15499
    • VRadio: change icon color when disabled (0cc43e2)
    • VSwitch: only affect control opacity when disabled (1e0a4ad)

    v2.6.8

    :wrench: Bug Fixes

    • VDataTable: display header text instead of value in group headers (100053f), closes #11516
    • VItemGroup: use valueComparator when updating value (#15395) (8bedb7c), closes #15394
    • VSimpleCheckbox: directly specify ripple directive definition (00a9668), closes #12224

    v2.6.7

    :wrench: Bug Fixes

    ... (truncated)

    Commits
    • fdfb6fc chore(release): publish v2.6.10
    • cd193e4 fix(VSelectList): correct mask class
    • 89e3850 fix(VDialog): don't try to focus tabindex="-1" or hidden inputs
    • 4468e3c refactor(VSelect): render highlight with vnodes instead of innerHTML
    • ade1434 fix(VCalendar): prevent XSS from eventName function
    • 464529a fix(VMenu): disabled activatorFixed when attach is enabled (#15709)
    • 7a51ad0 fix(VTextField): only show clear icon on hover or when focused
    • f8ee680 fix(VTextField): prevent tabbing to clear button
    • 170c7d1 chore(release): publish v2.6.9
    • 2cd34b4 fix(VCalendar): add aria roles to monthly calendar (#14640)
    • Additional commits viewable in compare view

    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 close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor 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
  • Bump terser from 4.8.0 to 4.8.1

    Bump terser from 4.8.0 to 4.8.1

    Bumps terser from 4.8.0 to 4.8.1.

    Changelog

    Sourced from terser's changelog.

    v4.8.1 (backport)

    • Security fix for RegExps that should not be evaluated (regexp DDOS)
    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 close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor 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
  • Bump terser from 4.8.0 to 4.8.1 in /plugins/packages/chartjs

    Bump terser from 4.8.0 to 4.8.1 in /plugins/packages/chartjs

    Bumps terser from 4.8.0 to 4.8.1.

    Changelog

    Sourced from terser's changelog.

    v4.8.1 (backport)

    • Security fix for RegExps that should not be evaluated (regexp DDOS)
    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 close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor 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
  • Bump terser from 4.7.0 to 4.8.1 in /plugins/packages/apexCharts

    Bump terser from 4.7.0 to 4.8.1 in /plugins/packages/apexCharts

    Bumps terser from 4.7.0 to 4.8.1.

    Changelog

    Sourced from terser's changelog.

    v4.8.1 (backport)

    • Security fix for RegExps that should not be evaluated (regexp DDOS)

    v4.8.0

    • Support for numeric separators (million = 1_000_000) was added.
    • Assigning properties to a class is now assumed to be pure.
    • Fixed bug where yield wasn't considered a valid property key in generators.
    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 close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor 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
  • Bump terser from 4.6.7 to 4.8.1 in /plugins

    Bump terser from 4.6.7 to 4.8.1 in /plugins

    Bumps terser from 4.6.7 to 4.8.1.

    Changelog

    Sourced from terser's changelog.

    v4.8.1 (backport)

    • Security fix for RegExps that should not be evaluated (regexp DDOS)

    v4.8.0

    • Support for numeric separators (million = 1_000_000) was added.
    • Assigning properties to a class is now assumed to be pure.
    • Fixed bug where yield wasn't considered a valid property key in generators.

    v4.7.0

    • A bug was fixed where an arrow function would have the wrong size
    • arguments object is now considered safe to retrieve properties from (useful for length, or 0) even when pure_getters is not set.
    • Fixed erroneous const declarations without value (which is invalid) in some corner cases when using collapse_vars.

    v4.6.13

    • Fixed issue where ES5 object properties were being turned into ES6 object properties due to more lax unicode rules.
    • Fixed parsing of BigInt with lowercase e in them.

    v4.6.12

    • Fixed subtree comparison code, making it see that [1,[2, 3]] is different from [1, 2, [3]]
    • Printing of unicode identifiers has been improved

    v4.6.11

    • Read unused classes' properties and method keys, to figure out if they use other variables.
    • Prevent inlining into block scopes when there are name collisions
    • Functions are no longer inlined into parameter defaults, because they live in their own special scope.
    • When inlining identity functions, take into account the fact they may be used to drop this in function calls.
    • Nullish coalescing operator (x ?? y), plus basic optimization for it.
    • Template literals in binary expressions such as + have been further optimized

    v4.6.10

    • Do not use reduce_vars when classes are present

    v4.6.9

    • Check if block scopes actually exist in blocks

    v4.6.8

    • Take into account "executed bits" of classes like static properties or computed keys, when checking if a class evaluation might throw or have side effects.
    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 close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor 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
  • Bump terser from 4.6.7 to 4.8.1 in /plugins/packages/epic-spinners

    Bump terser from 4.6.7 to 4.8.1 in /plugins/packages/epic-spinners

    Bumps terser from 4.6.7 to 4.8.1.

    Changelog

    Sourced from terser's changelog.

    v4.8.1 (backport)

    • Security fix for RegExps that should not be evaluated (regexp DDOS)

    v4.8.0

    • Support for numeric separators (million = 1_000_000) was added.
    • Assigning properties to a class is now assumed to be pure.
    • Fixed bug where yield wasn't considered a valid property key in generators.

    v4.7.0

    • A bug was fixed where an arrow function would have the wrong size
    • arguments object is now considered safe to retrieve properties from (useful for length, or 0) even when pure_getters is not set.
    • Fixed erroneous const declarations without value (which is invalid) in some corner cases when using collapse_vars.

    v4.6.13

    • Fixed issue where ES5 object properties were being turned into ES6 object properties due to more lax unicode rules.
    • Fixed parsing of BigInt with lowercase e in them.

    v4.6.12

    • Fixed subtree comparison code, making it see that [1,[2, 3]] is different from [1, 2, [3]]
    • Printing of unicode identifiers has been improved

    v4.6.11

    • Read unused classes' properties and method keys, to figure out if they use other variables.
    • Prevent inlining into block scopes when there are name collisions
    • Functions are no longer inlined into parameter defaults, because they live in their own special scope.
    • When inlining identity functions, take into account the fact they may be used to drop this in function calls.
    • Nullish coalescing operator (x ?? y), plus basic optimization for it.
    • Template literals in binary expressions such as + have been further optimized

    v4.6.10

    • Do not use reduce_vars when classes are present

    v4.6.9

    • Check if block scopes actually exist in blocks

    v4.6.8

    • Take into account "executed bits" of classes like static properties or computed keys, when checking if a class evaluation might throw or have side effects.
    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 close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor 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
Releases(v0.4.00)
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-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
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
:bento: Vue.js 2.x responsive grid system with smooth sorting, drag-n-drop and reordering

Vue.js Grid ( Experiment ) ⚠️ This an experement and not a production-ready plugin Fixed size grid for Vue.js This is very a first version of the plug

Yev Vlasenko 935 Sep 28, 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
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
Vue.js 2.x responsive grid system with smooth sorting, drag-n-drop and reordering

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

Yev Vlasenko 935 Sep 28, 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
Starter responsive dashboard layout built with tailwindcss & vue 3 (vitejs)

Starter Responsive Dashboard Layout Starter responsive dashboard layout built with tailwindcss & vue 3 (vitejs) See live Another projects Alpine versi

Ahmed Kamel 26 Aug 22, 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
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
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
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
grid layout,support flex

simple-grid a simple grid layout(Vue Component) Installation use npm $ npm i simple-xgrid --save import Grid from 'simple-xgrid' import 'simple-xgrid

zhoulin 26 May 30, 2022