@pazurite/prop-enhancers v1.0.1

Vue Prop Enhancers

A series of useful enhancements to Vue components props:

• Enum-type props
• Numeric-type props

Install

Package

# yarn
yarn add @pazurite/prop-enhancers

# npm
npm i @pazurite/prop-enhancers

Usage

Install mixin

Globally

// main.js
import Vue from 'vue';
import Enhancers from '@pazurite/prop-enhancers';

Vue.mixin(Enhancers);

Locally

// Component.vue
import Enhancers from '@pazurite/prop-enhancers';

export default {
  mixins: [Enhancers],
  // ...
};

Enum-type props

To define a enum-type prop, add a enum array to its descriptor, and its default value will be enum[0] if the descriptor doesn't contain default attribute. e.g.

before

export default {
  props: {
    size: {
      type: String,
      default: 'small',
      validator: (value) => ['small', 'large'].indexOf(value) >= 0,
    },
  },
};

after

export default {
  props: {
    size: {
      type: String,
      enum: ['small', 'large'],
    },
  },
};

Numeric-type props

To define a numeric-type prop, add numeric: true to its descriptor.

before

export default {
  props: {
    count: {
      type: [Number, String],
      default: 0,
      validator: (value) => !isNaN(value - parseFloat(value)),
    },
  },
};

after

export default {
  props: {
    count: {
      numeric: true,
      default: 0,
    },
  },
};