Need Package Maintenance

    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

    Install

    npm i vue-formulate-star-rating

    DownloadsWeekly Downloads

    2

    Version

    1.1.16

    License

    LGPL

    Unpacked Size

    425 kB

    Total Files

    12

    Last publish

    Collaborators

    • jamiesoncj