@progress/kendo-vue-inputs/rating/RatingItem.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 f, h as M, createVNode as n, ref as x } from "vue";
import { getTemplate as y, Icon as i, getIconName as h, classNames as b } from "@progress/kendo-vue-common";
import { starOutlineIcon as d, starIcon as m } from "@progress/kendo-svg-icons";
const B = /* @__PURE__ */ f({
  name: "KendoVueRatingItem",
  emits: {
    click: null,
    keydown: null,
    focus: null,
    blur: null,
    mouseenter: null,
    mouseleave: null,
    mousemove: null
  },
  props: {
    id: String,
    tabIndex: Number,
    half: Boolean,
    title: String,
    icon: Object,
    selected: Boolean,
    hovered: Boolean,
    onClick: Function,
    onKeyDown: Function,
    onFocus: Function,
    onBlur: Function,
    onMouseEnter: Function,
    svgIconOutline: Object,
    svgIcon: Object,
    haveSelectedValue: Boolean,
    item: String,
    itemTemplate: Object,
    dir: {
      type: String,
      default: "ltr",
      validator: function(e) {
        return [null, "ltr", "rtl"].includes(e);
      }
    },
    value: {
      type: Number,
      required: !0
    }
  },
  setup() {
    return {
      inputRef: x(null)
    };
  },
  computed: {
    wrapperClass() {
      return b(`k-rating-item${this.$props.dir === "rtl" ? " k-rtl" : ""}${this.$props.haveSelectedValue || this.$props.selected ? " k-selected" : ""}${this.$props.hovered ? " k-hover" : ""}`);
    }
  },
  render() {
    const {
      id: e,
      dir: r,
      half: s,
      tabIndex: p,
      title: c,
      icon: t,
      svgIcon: l,
      svgIconOutline: a,
      hovered: o,
      selected: u,
      haveSelectedValue: v,
      item: g,
      itemTemplate: $
    } = this.$props, k = y.call(this, {
      h: M,
      template: $,
      additionalProps: {
        dir: r,
        half: s,
        title: c,
        icon: t,
        svgIcon: l,
        svgIconOutline: a,
        hovered: o,
        selected: u,
        haveSelectedValue: v
      },
      additionalListeners: {
        onclick: this.handleClick,
        onkeydown: this.handleKeyDown,
        onfocus: this.handleFocus,
        onblur: this.handleBlur,
        onmouseenter: this.handleMouseEnter,
        onmouseleave: this.handleMouseLeave,
        onmousemove: this.handleMouseMove
      }
    });
    return n("span", {
      id: e,
      dir: r,
      "data-half": s,
      tabindex: p,
      title: c,
      class: this.wrapperClass,
      onClick: this.handleClick,
      onKeydown: this.handleKeyDown,
      onFocus: this.handleFocus,
      onBlur: this.handleBlur,
      onMouseenter: this.handleMouseEnter,
      onMouseleave: this.handleMouseLeave,
      onMousemove: this.handleMouseMove
    }, [g ? k : [s && n("span", {
      class: "k-rating-precision-complement"
    }, [!(t || a) && n(i, {
      name: "star-outline",
      icon: d,
      style: r === "rtl" ? {
        clipPath: "inset(0 50% 0 0)"
      } : {
        clipPath: "inset(0 0 0 50%)"
      },
      size: "xlarge"
    }, null), (t || a) && n(i, {
      name: h(`${t}-outline`),
      icon: a,
      size: "xlarge"
    }, null)]), s && n("span", {
      class: "k-rating-precision-part"
    }, [!(t || l) && n(i, {
      name: "star",
      icon: m,
      style: r === "rtl" ? {
        clipPath: "inset(0 0 0 50%)"
      } : {
        clipPath: "inset(0 50% 0 0)"
      },
      size: "xlarge"
    }, null), (t || l) && n(i, {
      name: t ? h(t) : void 0,
      icon: l,
      size: "xlarge"
    }, null)]), s && n("span", {
      style: {
        width: "24px",
        height: "24px",
        display: "block"
      }
    }, null), !s && (!(t || l) && (o || u && !o) && n(i, {
      name: "star",
      icon: m,
      size: "xlarge"
    }, null) || !(t || l) && !o && !u && n(i, {
      name: "star-outline",
      icon: d,
      size: "xlarge"
    }, null) || (t || l) && (o || u && !o) && n(i, {
      name: t,
      icon: l,
      size: "xlarge"
    }, null) || (t || l) && !o && n(i, {
      name: h(`${t}-outline`),
      icon: a,
      size: "xlarge"
    }, null))]]);
  },
  methods: {
    handleClick(e) {
      this.$emit("click", {
        value: this.$props.value,
        target: this.$el,
        event: e
      });
    },
    handleMouseLeave(e) {
      this.$emit("mouseleave", {
        target: this.$el,
        event: e
      });
    },
    handleMouseMove(e) {
      this.$emit("mousemove", {
        value: this.$props.value,
        target: this.$el,
        event: e
      });
    },
    handleMouseEnter(e) {
      this.$emit("mouseenter", {
        target: this.$el,
        event: e
      });
    },
    handleKeyDown(e) {
      this.$emit("keydown", e);
    },
    handleFocus(e) {
      this.$emit("focus", e);
    },
    handleBlur(e) {
      this.$emit("blur", e);
    }
  }
});
export {
  B as RatingItem
};