@progress/kendo-vue-inputs/rating/Rating.mjs

TODO

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { defineComponent as j, ref as A, createVNode as d } from "vue";
import { validatePackage as K, getTabIndex as z, classNames as X, templateRendering as _, getListeners as G, Keys as u } from "@progress/kendo-vue-common";
import { packageMetadata as P } from "../package-metadata.mjs";
import { RatingItem as q } from "./RatingItem.mjs";
import { getRemainder as E, toRound as m, isHalf as J, isSelected as g, calcIsFirstHalf as V } from "./utils/main.mjs";
import { provideLocalizationService as Q } from "@progress/kendo-vue-intl";
import { ratingAriaLabel as I, messages as U } from "../messages/main.mjs";
import { RATING_ACTION as i, ratingReducer as S } from "./utils/rating-reducer.mjs";
const le = /* @__PURE__ */ j({
  name: "Rating",
  emits: {
    change: null,
    keydown: null,
    focus: null,
    blur: null,
    click: null,
    mouseleave: null,
    mousemove: null
  },
  props: {
    min: {
      type: Number,
      default: 1
    },
    max: {
      type: Number,
      default: 5
    },
    step: {
      type: Number,
      default: 1
    },
    item: {
      type: [String, Object, Function]
    },
    precision: {
      type: String,
      default: "item",
      validator: function(e) {
        return ["item", "half"].includes(e);
      }
    },
    selection: {
      type: String,
      default: "continues",
      validator: function(e) {
        return ["continues", "single"].includes(e);
      }
    },
    value: Number,
    icon: String,
    svgIconOutline: Object,
    svgIcon: Object,
    tabIndex: Number,
    disabled: Boolean,
    readonly: Boolean,
    id: String,
    half: Boolean,
    defaultValue: Number,
    label: String
  },
  created() {
    K(P);
  },
  inject: {
    kendoLocalizationService: {
      default: null
    }
  },
  data: function() {
    return {
      focused: !1,
      currentValue: this.defaultValue || null,
      currentHovered: null
    };
  },
  setup() {
    return {
      inputRef: A(null)
    };
  },
  computed: {
    base() {
      return this.$props.step / (this.$props.precision === "half" ? 2 : 1);
    },
    computedValue() {
      return this.$props.value !== void 0 ? this.$props.value : this.$data.currentValue;
    }
  },
  render() {
    const e = Q(this), {
      min: t,
      max: s,
      step: a,
      id: l,
      dir: o,
      label: r,
      selection: f,
      precision: x,
      svgIcon: H,
      icon: R,
      item: v,
      value: b,
      tabIndex: C,
      disabled: p,
      readonly: $,
      ariaLabelledBy: B,
      ariaDescribedBy: N,
      svgIconOutline: w
    } = this.$props, F = Array.from({
      length: s - t + 1
    }, (y, n) => t + n), M = E(m(s - t, this.base), a), h = this.computedValue, c = this.$data.currentHovered;
    return d("span", {
      id: l,
      ref: "ratingRef",
      role: "slider",
      dir: o,
      tabindex: z(C, p, void 0),
      class: X("k-rating", {
        "k-rtl": o === "rtl",
        "k-readonly": $,
        "k-disabled": p
      }),
      onKeydown: this.handleKeyDown,
      onFocus: this.handleFocus,
      onBlur: this.handleBlur,
      onClick: () => this.$data.focused = !0,
      "aria-valuemin": t,
      "aria-valuemax": s,
      "aria-valuenow": b !== null ? b : void 0,
      "aria-disabled": p ? "true" : void 0,
      "aria-label": e.toLanguageString(I, U[I]),
      "aria-labelledby": B,
      "aria-describedby": N
    }, [d("input", {
      id: "rating",
      class: "k-hidden",
      readonly: $,
      disabled: p
    }, null), d("span", {
      class: "k-rating-container"
    }, [F.map(function(y) {
      const n = m(y + M, this.base), k = x === "half" ? J(n, c !== null ? c : h !== null ? h : 0, a) : !1, L = g(n, h, a, f), D = g(n, c !== null ? c : h, a, f), O = g(n, c, a, f), T = _.call(this, v, G.call(this));
      return d(q, {
        key: n,
        value: n,
        dir: o,
        title: String(k ? m(n - a / 2, this.base) : n),
        icon: R,
        svgIcon: H,
        svgIconOutline: w,
        haveSelectedValue: L,
        half: k,
        selected: D,
        hovered: O,
        item: v,
        itemTemplate: T,
        onClick: this.handleItemClick,
        onMousemove: this.handleMouseMove,
        onMouseleave: this.handleMouseLeave
      }, null);
    }, this)]), r && d("span", {
      class: "k-rating-label"
    }, [r])]);
  },
  methods: {
    handleFocus(e) {
      this.$emit("focus", e);
    },
    handleBlur(e) {
      this.$emit("blur", e);
    },
    handleChange(e, t) {
      this.$emit("change", {
        value: e,
        target: this.$refs.ratingRef,
        event: t
      });
    },
    handleKeyDown(e) {
      if (!(this.$props.readonly || this.$props.disabled)) {
        switch (e.keyCode) {
          case u.right:
            e.preventDefault(), this.dispatchValue({
              type: this.$props.dir === "rtl" ? i.decrease : i.increase,
              event: e
            });
            break;
          case u.left:
            e.preventDefault(), this.dispatchValue({
              type: this.$props.dir === "rtl" ? i.increase : i.decrease,
              event: e
            });
            break;
          case u.home:
            e.preventDefault(), this.dispatchValue({
              type: this.$props.dir === "rtl" ? i.min : i.max,
              event: e
            });
            break;
          case u.end:
            e.preventDefault(), this.dispatchValue({
              type: this.$props.dir === "rtl" ? i.max : i.min,
              event: e
            });
            break;
          case u.esc:
            e.preventDefault(), this.dispatchValue({
              type: i.deselect,
              event: e
            });
            break;
        }
        this.$emit("keydown", {
          value: this.$data.currentValue,
          event: e
        });
      }
    },
    handleItemClick(e) {
      const {
        event: t,
        value: s,
        target: a
      } = e;
      if (!(!a || !s || this.$props.readonly || this.$props.disabled)) {
        if (this.$props.precision === "half") {
          const l = a.getBoundingClientRect(), r = V(this.$props.dir ? this.$props.dir : "ltr", l, e.event.clientX) ? m(s - this.$props.step / 2, this.base) : s;
          this.dispatchValue({
            type: i.select,
            payload: r,
            event: t
          });
        } else
          this.dispatchValue({
            type: i.select,
            payload: s,
            event: t
          });
        this.$emit("click", t);
      }
    },
    handleMouseMove(e) {
      const {
        event: t,
        value: s,
        target: a
      } = e;
      if (!(!a || !s))
        if (this.$props.precision === "half") {
          const l = a.getBoundingClientRect(), r = V(this.$props.dir ? this.$props.dir : "ltr", l, t.clientX) ? s - this.$props.step / 2 : s;
          this.dispatchHover({
            type: i.select,
            payload: r,
            event: t
          });
        } else
          this.dispatchHover({
            type: i.select,
            payload: s,
            event: t
          });
    },
    handleMouseLeave(e) {
      this.dispatchHover({
        type: i.reset,
        event: e.event
      });
    },
    dispatchValue(e) {
      const t = {
        state: this.$props.value,
        min: this.$props.min,
        max: this.$props.max,
        step: this.base
      }, s = t.state || this.$data.currentValue, a = S(s, {
        ...e,
        ...t
      }), l = e.event;
      this.handleChange(a, l), this.$data.currentValue = a;
    },
    dispatchHover(e) {
      const t = {
        state: this.$props.value,
        min: this.$props.min,
        max: this.$props.max,
        step: this.base,
        precision: this.$props.precision
      }, s = t.state, a = S(s, {
        ...e,
        ...t
      });
      this.$data.currentHovered = a;
    }
  }
});
export {
  le as Rating
};