Skip to content
This repository has been archived by the owner on Jun 25, 2022. It is now read-only.

socheatsok78/quick-prop

Repository files navigation

QuickProp

If you are familiar with Vue.js component's prop, you already knows how to use QuickProp. QuickProp is a JavaScript data model made easy.

npm-version npm-download Jest CI Total alerts

Installation

npm i quick-prop

Usage

import QuickProp from 'quick-prop'
import { v4 as uuidv4 } from 'uuid';

class Todo extends QuickProp {
    constructor(todo = {}) {
        super({
            id: {
                type: [Number, String],
                default() {
                    return uuidv4()
                }
            },
            title: {
                type: String,
                required: true
            },
            completed: {
                type: Boolean,
                default: () => false
            }
        }, todo)
    }
}

const todo = new Todo({
    title: 'Example todo'
})

todo.completed = true

console.log(JSON.stringify(todo))

Result:

{
    "id": "f24b19a2-e327-4199-88e9-1c5c8e4b8b82",
    "title": "Example todo",
    "completed": true
}

Reactivity \w Vue

In some case where data reactivity is needed, you could use the Vuejs plugin to make quick-prop reactive.

import Vue from 'vue'
import { QuickPropVue } from 'quick-prop'

Vue.use(QuickPropVue)

Todo

  • Better implementation
  • Add Type Decorator
  • Vue Reactive

License

License under MIT

About

QuickProp is a JavaScript data model made easy. If you are familiar with Vue.js component's prop, you already knows how to use QuickProp.

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published