primevue/rating/index.mjs

PrimeVue is a premium UI library for Vue featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, wh

import Star from '@primeicons/vue/star';
import StarFill from '@primeicons/vue/star-fill';
import { uuid } from '@primeuix/utils';
import BaseEditableHolder from '@primevue/core/baseeditableholder';
import RatingStyle from 'primevue/rating/style';
import { openBlock, createElementBlock, mergeProps, Fragment, renderList, createCommentVNode, createElementVNode, withModifiers, renderSlot, createBlock, resolveDynamicComponent, normalizeClass } from 'vue';

var script$1 = {
  name: 'BaseRating',
  "extends": BaseEditableHolder,
  props: {
    readonly: {
      type: Boolean,
      "default": false
    },
    stars: {
      type: Number,
      "default": 5
    },
    allowHalf: {
      type: Boolean,
      "default": false
    },
    orientation: {
      type: String,
      "default": 'horizontal'
    },
    onIcon: {
      type: String,
      "default": undefined
    },
    offIcon: {
      type: String,
      "default": undefined
    }
  },
  style: RatingStyle,
  provide: function provide() {
    return {
      $pcRating: this,
      $parentInstance: this
    };
  }
};

var script = {
  name: 'Rating',
  "extends": script$1,
  inheritAttrs: false,
  emits: ['change', 'focus', 'blur'],
  optionEls: null,
  data: function data() {
    return {
      hovering: false,
      hoveringValue: 0
    };
  },
  beforeUpdate: function beforeUpdate() {
    this.optionEls = null;
  },
  methods: {
    getPTOptions: function getPTOptions(key, value) {
      return this.ptm(key, {
        context: {
          highlighted: this.isHighlighted(value),
          half: this.isHalf(value),
          checked: this.isChecked(value)
        }
      });
    },
    optionRef: function optionRef(el, index) {
      if (!this.optionEls) this.optionEls = [];
      this.optionEls[index] = el;
    },
    startHover: function startHover() {
      var _this$d_value;
      var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : (_this$d_value = this.d_value) !== null && _this$d_value !== void 0 ? _this$d_value : 0;
      if (!this.disabled && !this.readonly) {
        this.hoveringValue = value;
        this.hovering = true;
      }
    },
    stopHover: function stopHover() {
      if (!this.disabled && !this.readonly) {
        this.hovering = false;
        this.hoveringValue = 0;
      }
    },
    resolvePointerValue: function resolvePointerValue(event, optionEl, index) {
      if (this.allowHalf && optionEl) {
        var rect = optionEl.getBoundingClientRect();
        var isHalf = this.orientation === 'vertical' ? event.clientY < rect.top + rect.height / 2 : event.clientX < rect.left + rect.width / 2;
        return isHalf ? index + 0.5 : index + 1;
      }
      return index + 1;
    },
    resolveSelectedValue: function resolveSelectedValue(value) {
      return this.d_value === value ? null : value;
    },
    updateValue: function updateValue(event, value) {
      this.writeValue(value, event);
      this.$emit('change', {
        originalEvent: event,
        value: value
      });
    },
    onPointerEnter: function onPointerEnter() {
      if (this.disabled || this.readonly) return;
      this.startHover();
    },
    onPointerMove: function onPointerMove() {
      if (!this.disabled && !this.readonly && !this.hovering) this.startHover();
    },
    onPointerLeave: function onPointerLeave() {
      if (this.disabled || this.readonly) return;
      this.stopHover();
    },
    onFocusIn: function onFocusIn(event) {
      if (this.disabled || this.readonly) return;
      var target = event.target;
      if (target && target.type === 'radio' && target.name === this.inputName) {
        this.startHover(parseFloat(target.value));
        this.$emit('focus', event);
      }
    },
    onFocusOut: function onFocusOut(event) {
      if (this.disabled || this.readonly) return;
      if (!event.currentTarget.contains(event.relatedTarget)) {
        var _this$formField$onBlu, _this$formField;
        this.stopHover();
        (_this$formField$onBlu = (_this$formField = this.formField).onBlur) === null || _this$formField$onBlu === void 0 || _this$formField$onBlu.call(_this$formField);
        this.$emit('blur', event);
      }
    },
    onIconPointerMove: function onIconPointerMove(event, index) {
      var _this$optionEls;
      if (this.disabled || this.readonly) return;
      this.startHover(this.resolvePointerValue(event, (_this$optionEls = this.optionEls) === null || _this$optionEls === void 0 ? void 0 : _this$optionEls[index], index));
    },
    onIconClick: function onIconClick(event, index) {
      var _this$optionEls2;
      if (this.disabled || this.readonly) return;
      this.updateValue(event, this.resolveSelectedValue(this.resolvePointerValue(event, (_this$optionEls2 = this.optionEls) === null || _this$optionEls2 === void 0 ? void 0 : _this$optionEls2[index], index)));
    },
    onInputChange: function onInputChange(event, value) {
      if (this.disabled || this.readonly) return;
      this.updateValue(event, this.resolveSelectedValue(value));
    },
    starAriaLabel: function starAriaLabel(value) {
      var _this$$primevue;
      var locale = (_this$$primevue = this.$primevue) === null || _this$$primevue === void 0 || (_this$$primevue = _this$$primevue.config) === null || _this$$primevue === void 0 || (_this$$primevue = _this$$primevue.locale) === null || _this$$primevue === void 0 ? void 0 : _this$$primevue.aria;
      if (!locale) return String(value);
      if (value === 1) return locale.star;
      return locale.stars.replace(/{star}/g, value);
    }
  },
  computed: {
    inputName: function inputName() {
      return this.name || uuid('rating-');
    },
    activeValue: function activeValue() {
      var _this$d_value2;
      return this.hovering ? this.hoveringValue : (_this$d_value2 = this.d_value) !== null && _this$d_value2 !== void 0 ? _this$d_value2 : 0;
    },
    isHighlighted: function isHighlighted() {
      var _this = this;
      return function (value) {
        var idx = value - 1;
        return idx >= 0 && _this.activeValue > idx;
      };
    },
    isHalf: function isHalf() {
      var _this2 = this;
      return function (value) {
        var idx = value - 1;
        return _this2.allowHalf && idx >= 0 && _this2.activeValue > idx && _this2.activeValue === idx + 0.5;
      };
    },
    isChecked: function isChecked() {
      var _this3 = this;
      return function (value) {
        var idx = value - 1;
        return idx >= 0 && (_this3.activeValue === idx + 1 || _this3.allowHalf && _this3.activeValue === idx + 0.5);
      };
    }
  },
  components: {
    StarFill: StarFill,
    Star: Star
  }
};

var _hoisted_1 = ["data-orientation", "data-disabled", "data-readonly"];
var _hoisted_2 = ["data-index", "data-highlighted", "data-half", "data-checked"];
var _hoisted_3 = ["name", "value", "checked", "disabled", "readonly", "aria-readonly", "aria-label", "onChange"];
var _hoisted_4 = ["name", "value", "checked", "disabled", "readonly", "aria-readonly", "aria-label", "onChange"];
var _hoisted_5 = ["data-orientation", "onPointermove", "onClick"];
var _hoisted_6 = ["onPointermove", "onClick"];
function render(_ctx, _cache, $props, $setup, $data, $options) {
  return openBlock(), createElementBlock("span", mergeProps({
    "class": _ctx.cx('root'),
    "data-orientation": _ctx.orientation,
    "data-disabled": _ctx.disabled ? '' : undefined,
    "data-readonly": _ctx.readonly ? '' : undefined
  }, _ctx.ptmi('root'), {
    onPointerenter: _cache[2] || (_cache[2] = function () {
      return $options.onPointerEnter && $options.onPointerEnter.apply($options, arguments);
    }),
    onPointermove: _cache[3] || (_cache[3] = function () {
      return $options.onPointerMove && $options.onPointerMove.apply($options, arguments);
    }),
    onPointerleave: _cache[4] || (_cache[4] = function () {
      return $options.onPointerLeave && $options.onPointerLeave.apply($options, arguments);
    }),
    onFocusin: _cache[5] || (_cache[5] = function () {
      return $options.onFocusIn && $options.onFocusIn.apply($options, arguments);
    }),
    onFocusout: _cache[6] || (_cache[6] = function () {
      return $options.onFocusOut && $options.onFocusOut.apply($options, arguments);
    })
  }), [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.stars, function (value) {
    return openBlock(), createElementBlock("span", mergeProps({
      key: value,
      ref_for: true,
      ref: function ref(el) {
        return $options.optionRef(el, value - 1);
      },
      "class": _ctx.cx('option'),
      "data-index": value - 1,
      "data-highlighted": $options.isHighlighted(value) ? '' : undefined,
      "data-half": $options.isHalf(value) ? '' : undefined,
      "data-checked": $options.isChecked(value) ? '' : undefined
    }, {
      ref_for: true
    }, $options.getPTOptions('option', value)), [_ctx.allowHalf ? (openBlock(), createElementBlock("input", mergeProps({
      key: 0,
      type: "radio",
      "class": "p-hidden-accessible",
      name: $options.inputName,
      value: value - 0.5,
      checked: _ctx.d_value === value - 0.5,
      disabled: _ctx.disabled,
      readonly: _ctx.readonly,
      "aria-readonly": _ctx.readonly || undefined,
      "aria-label": $options.starAriaLabel(value - 0.5),
      onChange: function onChange($event) {
        return $options.onInputChange($event, value - 0.5);
      },
      "data-p-hidden-accessible": true
    }, {
      ref_for: true
    }, _ctx.ptm('halfInput')), null, 16, _hoisted_3)) : createCommentVNode("", true), createElementVNode("input", mergeProps({
      type: "radio",
      "class": "p-hidden-accessible",
      name: $options.inputName,
      value: value,
      checked: _ctx.d_value === value,
      disabled: _ctx.disabled,
      readonly: _ctx.readonly,
      "aria-readonly": _ctx.readonly || undefined,
      "aria-label": $options.starAriaLabel(value),
      onChange: function onChange($event) {
        return $options.onInputChange($event, value);
      },
      "data-p-hidden-accessible": true
    }, {
      ref_for: true
    }, _ctx.ptm('fullInput')), null, 16, _hoisted_4), createElementVNode("span", mergeProps({
      "class": _ctx.cx('onIcon'),
      "data-orientation": _ctx.orientation,
      onPointermove: function onPointermove($event) {
        return $options.onIconPointerMove($event, value - 1);
      },
      onClick: function onClick($event) {
        return $options.onIconClick($event, value - 1);
      },
      onMousedown: _cache[0] || (_cache[0] = withModifiers(function () {}, ["prevent"]))
    }, {
      ref_for: true
    }, _ctx.ptm('onIcon')), [renderSlot(_ctx.$slots, "onicon", {
      value: value
    }, function () {
      return [(openBlock(), createBlock(resolveDynamicComponent(_ctx.onIcon ? 'span' : 'StarFill'), {
        "class": normalizeClass(_ctx.onIcon)
      }, null, 8, ["class"]))];
    })], 16, _hoisted_5), createElementVNode("span", mergeProps({
      "class": _ctx.cx('offIcon'),
      onPointermove: function onPointermove($event) {
        return $options.onIconPointerMove($event, value - 1);
      },
      onClick: function onClick($event) {
        return $options.onIconClick($event, value - 1);
      },
      onMousedown: _cache[1] || (_cache[1] = withModifiers(function () {}, ["prevent"]))
    }, {
      ref_for: true
    }, _ctx.ptm('offIcon')), [renderSlot(_ctx.$slots, "officon", {
      value: value
    }, function () {
      return [(openBlock(), createBlock(resolveDynamicComponent(_ctx.offIcon ? 'span' : 'Star'), {
        "class": normalizeClass(_ctx.offIcon)
      }, null, 8, ["class"]))];
    })], 16, _hoisted_6)], 16, _hoisted_2);
  }), 128))], 16, _hoisted_1);
}

script.render = render;

export { script as default };