@bugsworld85/neocomponents v0.2.13

Neo VueJS Components

Pre built VueJS components to make developer's life easier.

Available Components!

• NeoTable - with first row and multiple column freezing.
• NeoWindow - movable, drag and drop window component.
• NeoPaginator - pagination component.

Upcoming components:

• NeoFloater - an element that is draggable across the screen.

Pre-Requisite

• VueJS 2.x - core frontend framework.

Dependencies

• Lodash - A modern JavaScript utility library delivering modularity, performance & extras.
• MomentJS - Parse, validate, manipulate, and display dates and times in JavaScript.

Dev-Dependencies

• Vue-CLI
• Vue-CLI-Service
• Vue-CLI Service Global
• Bootstrap 4
• FontAwesome 4.7

Install global or within package, its up to you.

Installation

NeoComponents requires Node.js v12+ to run.

Install the dependencies and devDependencies and start the server.

$ npm install --save @bugsworld85/neocomponents

Include into your component.

import { NeoTable, NeoWindow, NeoPaginator } from "@bugsworld85/neocomponents"

Component Testing

$ npm run serve

Components

NeoTable

Dynamic table component

<neo-table
    :data="data"
    :columns="columns"
></neo-table>

import { NeoTable } from "@bugsworld85/neocomponents";
import moment from "moment";

export default {
    components: {
        NeoTable
    },
    data() {
        return {
            data: [], // array of object data
            columns: [
                {
                    key: "id",
                    title: "ID",
                    freeze: true
                },
                {
                    key: "sku",
                    title: "SKU",
                    searchable: true,
                    sortable: true,
                    freeze: true, // freezed initially
                    type: 'template',
                    template: Vue.components("your-component", {
                        template: `<span>${row.sku}</span>`,
                        props: ["row", "column", "index"],
                    }),
                    // ---- OR ----
                    // template: YourComponent
                },
                {
                    key: "name",
                    title: "Name",
                    searchable: true,
                    sortable: true,
                    type: 'text' // double click to edit
                    // available events
                    change(e, row, column) {},
                    keydown(e, row, column) {},
                    keyup(e, row, column) {},
                    input(e, row, column) {},
                    blur(e, row, column) {},
                    doubleClick(e, row, column) {},
                },
                {
                    key: "qty",
                    title: "Quantity",
                    searchable: true,
                    sortable: true,
                    type: 'number' // double click to edit
                    disableFreezing: true // do not show freeze button in this column
                },
                {
                    key: "created_at",
                    title: "Date Created",
                    sortable: true,
                    mutate: (value) => {
                        return moment(value).format("DD-MM-YYYY");
                    },
                },
                {
                    key: "actions",
                    type: "actions",
                    textAlign: "right",
                    width: 10,
                    actions: [
                        Vue.component("view-product", {
                            template: `<a class="btn" :href="link"><i class="fa fa-edit"></i></a>`,
                            props: ["column", "row"],
                            computed: {
                                link() {
                                    return `https://test.com/product/${this.row.id}`;
                                },
                            },
                        }),
                    ],
                },
            ],
        }
    }
}

Component Properties

Component Events

Column Properties

Column Methods

Column Available Events (text and number column types only)

Column Types

Coming Soon!

Slots

Todos

• Write documentation on NeoWindow
• Write documentation on NeoPaginator
• Include textarea in column types.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

MIT © Jovanni G