thefoot / vue-grid-designer Goto Github PK

The CSS vars used by the component:

<style lang="scss">
:root {
	--color-highlight: 55, 114, 255;
	--color-highlight-faded: 215, 227, 255;
	--color-active: 150, 5, 5;
	--color-black: 0, 0, 0;
	--color-white: 255, 255, 255;
	--color-lightgrey: 240, 240, 240;
	--color-darkgrey: 76, 76, 76;
}
</style>

.. are applied to the host application, however - they aren't named with any reference to VDG - so there is potential for a clash.

Including them in a scoped doesn't work at all - not even withing local component development, hence why they exist in a globally scoped block atm.

Hopefully Vue will include support soon for a :host selector - to be applied to the component root: vuejs/vue-loader#1601

Include scope information.

There is currently no way to create custom blocks or rows structures.

Why is this needed? Because otherwise custom grid properties won't be applied to new objects. Doh.

Vue is now a dev dependency.

If a Vue application using this component chooses to include Vue as a browser script tag (to keep bundle size small for example), it may use a different version than this component uses.

Problems occur with vue-template-compiler which must match the Vue version. NPM can sort this out normally (if the App uses the Vue NPM module).

Easiest to just assume that a Vue app will already include Vue as it needs it :) Well der ...

[!] Error: 

Vue packages version mismatch:

- [email protected] ([...]/node_modules/vue/dist/vue.runtime.common.js)
- [email protected] ([...]/node_modules/vue-template-compiler/package.json)

This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.

When you drag a block from one row to the next, into the last position on the row, the ghost element shows on the next "line" (correct row).

Expected behavior
The ghost element should appear as the last block in the row.

Actual behavior
The toolbar element (even though it is filtered out of the draggable list) is causing SortableJS to get confused, because it is a child element of the row.

Could file a bug with SortableJS.. 🤔 Would rather fix the toolbar placement though.

Main issue is making sure we don't resort to DOM hacks (not very Vuey), and also being able to pass current row/block scope vars to the toolbar action buttons.

@rorysmorris suggested to move the element outside the row, and position it using a style binding for x/y coords. On row hover - store the current row/block as component data, as well as x/y coords.

Describe the bug
A single block can never reach full size

To Reproduce
Steps to reproduce the behavior:

1. Go to demo page https://thefoot.github.io/vue-grid-designer/ Basic Props tab
2. Delete second block (click X button of block)
3. Expand first row (click plus button of block twice)

Expected behavior
A block to reach full size

Actual behavior
Row remains 3 block width (instead of 4)

Currently can only specify a single value for the block margin.

There is currently no way to re-order rows, other than to delete and recreate!

Option 1 - Implement grid sortable to facilitate drag and drop for rows. UX issues though - too many drop zones, need additional row drag handle..

Option 2 - Implement move up / down buttons on the row toolbar. Not in line with the whole DnD ethos. But probably far more usable and easier to implement.

Is it currently possible to render vue components within each block?