vue-formulate-star-rating

1.1.16 • Public • Published

Vue Formulate Star Rating Input

Version Shield Licence Shield

A simple wrapper component for the excellent vue-star-rating package by craigh411.

This component allows you to use a star rating as a custom input as a Vue Formulate Plugin.

Installation

Using NPM and webpack

  1. npm install --save vue-formulate-star-rating

  2. Register the component

    import Vue from "vue";
    import VueFormulate from "@braid/vue-formulate";
    
    import VueFormulateStarRating from "vue-formulate-star-rating";
    
    // add plugin to VueFormulate
    Vue.use(VueFormulate, {
      plugins: [VueFormulateStarRating],
    });
  3. Use in a Formulate form

    <FormulateInput
      type="star-rating"
      name="productRating"
      label="Rate this product"
      help="How would you rate this product?"
      :max-rating="5"
      :show-rating="false"
      validation="required|min:4"
    />

Using script tags

  1. Include the vue-formulate-star-rating.
    <script src="https://unpkg.com/vue-formulate-star-rating/dist/VueFormulateStarRating.umd.min.js"></script>
  2. Register a custom Formulate input
    Vue.use(VueFormulate, {
      plugins: [VueFormulateStarRating.default],
    });
  3. Use in your form
    <formulate-input type="star-rating" label="Product rating" name="rating" help="Rate this" :show-rating="false" validation="required"></formulate-input>

Note: as per the Vue Formulate docs:

Due to DOM limitations, when mounting Vue Formulate in DOM templates (outside of single-file components) all the component names will need to be lower-cased, hyphen separated and with a closing tag.

Usage

You can pass props to the input, they will be bound using v-bind.

See vue-star-rating documentation for list of available props.

Validation rules work as normal.

For example, this would set the max rating to 10 and hide the rating, while requiring a minimum rating of 4:

   <FormulateInput
     type="rating"
     name="productRating"
     label="Rate this product"
     help="How would you rate this product?"
     :max-rating="10"
     :show-rating="false"
     validation="required|min:4"
   />

Contribute

Contributions and issues welcome, please file a PR or raise an issue on GitHub.

Development

  • npm install
  • make your changes
  • npm run build
  • npm version patch
  • npm publish

Package Sidebar

Install

npm i vue-formulate-star-rating

Weekly Downloads

1

Version

1.1.16

License

LGPL

Unpacked Size

425 kB

Total Files

12

Last publish

Collaborators

  • jamiesoncj