@pusula/layout-row-based
v1.0.3
Published
Row based dynamic layout creater.
Downloads
79
Readme
layout-row-based
Row based dynamic layout creater.
Rows can be divided to columns and can contain any number of items.
Items can be moved from column to column and sorted inside columns by drag and drop.
For drag and drop used shopify/draggable.
Project setup
yarn install
Compiles and hot-reloads for development
yarn serve
Example Usage
<template>
<layout-container
:rows="rows"
@update:rows="updateRows"
:layout-items.sync="items"
@update:layoutItems="updateLayout"
edit-mode
sortable
>
<template #default="{id}">
<div style="padding:40px;background:pink;">id : {{id}} , order :{{getItem(id).order}}</div>
</template>
</layout-container>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { LayoutContainerComponent } from "@sabasayer/layout-row-based";
import { LayoutItem, LayoutRow } from "@sabasayer/layout-row-based/types/lib/layout-row";
@Component({
components: {
"layout-container": LayoutContainerComponent
}
})
export default class App extends Vue {
rows: LayoutRow[] = [
{ row: 1, columns: 2 },
{ row: 2, columns: 3 },
{ row: 3, columns: 1 }
];
items: LayoutItem[] = [
{ row: 1, column: 1, order: 0, id: 1 },
{ row: 1, column: 1, order: 1, id: 2 },
];
get getItem(){
return (id:number) => this.items.find(e=>e.id == id);
}
updateRows(rows: LayoutRow[]) {
}
updateLayout(layout: LayoutItem[]) {
console.log('layout',layout)
}
}
</script>
Compiles and minifies for production
yarn build
Run your unit tests
yarn test:unit
Lints and fixes files
yarn lint