primevue/rating/rating.js

[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue) [![Discord Chat](https://img.shields.io/discord/55794023

this.primevue = this.primevue || {};
this.primevue.rating = (function (vue) {
    'use strict';

    var script = {
        name: 'Rating',
        emits: ['update:modelValue', 'change'],
        props: {
            modelValue: {
                type: Number,
                default: null
            },
    		disabled: {
                type: Boolean,
                default: false
            },
    		readonly: {
                type: Boolean,
                default: false
            },
            stars: {
                type: Number,
                default: 5
            },
            cancel: {
                type: Boolean,
                default: true
            }
        },
        methods: {
            onStarClick(event, value) {
                if (!this.readonly && !this.disabled) {
                    this.updateModel(event, value);
                }
            },
            onCancelClick() {
                if (!this.readonly && !this.disabled) {
                    this.updateModel(event, null);
                }
            },
            updateModel(event, value) {
                this.$emit('update:modelValue', value);
                this.$emit('change', {
                    originalEvent: event,
                    value: value
                });
            }
        },
        computed: {
            containerClass() {
                return [
                    'p-rating',
                    {
                        'p-readonly': this.readonly,
                        'p-disabled': this.disabled
                    }
                ];
            },
            focusIndex() {
                return (this.disabled || this.readonly) ? null : '0';
            }
        }
    };

    function render(_ctx, _cache, $props, $setup, $data, $options) {
      return (vue.openBlock(), vue.createBlock("div", { class: $options.containerClass }, [
        ($props.cancel)
          ? (vue.openBlock(), vue.createBlock("span", {
              key: 0,
              class: "p-rating-icon p-rating-cancel pi pi-ban",
              tabindex: $options.focusIndex,
              onClick: _cache[1] || (_cache[1] = (...args) => ($options.onCancelClick && $options.onCancelClick(...args)))
            }, null, 8, ["tabindex"]))
          : vue.createCommentVNode("", true),
        (vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList($props.stars, (i) => {
          return (vue.openBlock(), vue.createBlock("span", {
            key: i,
            onClick: $event => ($options.onStarClick($event,i)),
            tabindex: $options.focusIndex,
            onKeydown: vue.withKeys(vue.withModifiers($event => ($options.onStarClick($event,i)), ["prevent"]), ["enter"]),
            class: ['p-rating-icon', {'pi pi-star-o': (i > $props.modelValue), 'pi pi-star': (i <= $props.modelValue)}]
          }, null, 42, ["onClick", "tabindex", "onKeydown"]))
        }), 128))
      ], 2))
    }

    function styleInject(css, ref) {
      if ( ref === void 0 ) ref = {};
      var insertAt = ref.insertAt;

      if (!css || typeof document === 'undefined') { return; }

      var head = document.head || document.getElementsByTagName('head')[0];
      var style = document.createElement('style');
      style.type = 'text/css';

      if (insertAt === 'top') {
        if (head.firstChild) {
          head.insertBefore(style, head.firstChild);
        } else {
          head.appendChild(style);
        }
      } else {
        head.appendChild(style);
      }

      if (style.styleSheet) {
        style.styleSheet.cssText = css;
      } else {
        style.appendChild(document.createTextNode(css));
      }
    }

    var css_248z = "\n.p-rating-icon {\n    cursor: pointer;\n}\n.p-rating.p-rating-readonly .p-rating-icon {\n    cursor: default;\n}\n";
    styleInject(css_248z);

    script.render = render;

    return script;

}(Vue));