@progress/kendo-vue-inputs 4.3.4-dev.202405030811 → 4.4.0-dev.202405091413

package/dist/es/rating/RatingItem.js

@@ -0,0 +1,272 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+var ref = allVue.ref;
+import { Icon, classNames, getIconName, getTemplate } from '@progress/kendo-vue-common';
+import { starIcon, starOutlineIcon } from '@progress/kendo-svg-icons';
+/**
+ * @hidden
+ */
+var RatingItemVue2 = {
+  name: 'KendoReactRatingItem',
+  // @ts-ignore
+  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 validator(value) {
+        return [null, 'ltr', 'rtl'].includes(value);
+      }
+    },
+    value: {
+      type: Number,
+      required: true
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    var inputRef = ref(null);
+    return {
+      v3: v3,
+      inputRef: inputRef
+    };
+  },
+  computed: {
+    wrapperClass: function wrapperClass() {
+      return classNames("k-rating-item".concat(this.$props.dir === 'rtl' ? ' k-rtl' : '').concat(this.$props.haveSelectedValue || this.$props.selected ? ' k-selected' : '').concat(this.$props.hovered ? ' k-hover' : ''));
+    }
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var _a = this.$props,
+      id = _a.id,
+      dir = _a.dir,
+      half = _a.half,
+      tabIndex = _a.tabIndex,
+      title = _a.title,
+      icon = _a.icon,
+      svgIcon = _a.svgIcon,
+      svgIconOutline = _a.svgIconOutline,
+      hovered = _a.hovered,
+      selected = _a.selected,
+      haveSelectedValue = _a.haveSelectedValue,
+      item = _a.item,
+      itemTemplate = _a.itemTemplate;
+    var itemRender = getTemplate.call(this, {
+      h: h,
+      template: itemTemplate,
+      additionalProps: {
+        dir: dir,
+        half: half,
+        title: title,
+        icon: icon,
+        svgIcon: svgIcon,
+        svgIconOutline: svgIconOutline,
+        hovered: hovered,
+        selected: selected,
+        haveSelectedValue: haveSelectedValue
+      },
+      additionalListeners: {
+        onclick: this.handleClick,
+        onkeydown: this.handleKeyDown,
+        onfocus: this.handleFocus,
+        onblur: this.handleBlur,
+        onmouseenter: this.handleMouseEnter,
+        onmouseleave: this.handleMouseLeave,
+        onmousemove: this.handleMouseMove
+      }
+    });
+    return h("span", {
+      id: id,
+      attrs: this.v3 ? undefined : {
+        id: id,
+        dir: dir,
+        "data-half": half,
+        tabIndex: tabIndex,
+        title: title
+      },
+      dir: dir,
+      "data-half": half,
+      tabIndex: tabIndex,
+      title: title,
+      "class": this.wrapperClass,
+      onClick: this.handleClick,
+      on: this.v3 ? undefined : {
+        "click": this.handleClick,
+        "keyDown": this.handleKeyDown,
+        "focus": this.handleFocus,
+        "blur": this.handleBlur,
+        "mouseenter": this.handleMouseEnter,
+        "mouseleave": this.handleMouseLeave,
+        "mousemove": this.handleMouseMove
+      },
+      onKeyDown: this.handleKeyDown,
+      onFocus: this.handleFocus,
+      onBlur: this.handleBlur,
+      onMouseenter: this.handleMouseEnter,
+      onMouseleave: this.handleMouseLeave,
+      onMousemove: this.handleMouseMove
+    }, [item ? itemRender : [half && h("span", {
+      "class": 'k-rating-precision-complement'
+    }, [!(icon || svgIconOutline) && h(Icon, {
+      name: "star-outline",
+      attrs: this.v3 ? undefined : {
+        name: "star-outline",
+        icon: starOutlineIcon,
+        size: 'xlarge'
+      },
+      icon: starOutlineIcon,
+      style: dir === 'rtl' ? {
+        clipPath: 'inset(0 50% 0 0)'
+      } : {
+        clipPath: 'inset(0 0 0 50%)'
+      },
+      size: 'xlarge'
+    }), (icon || svgIconOutline) && h(Icon, {
+      name: getIconName("".concat(icon, "-outline")),
+      attrs: this.v3 ? undefined : {
+        name: getIconName("".concat(icon, "-outline")),
+        icon: svgIconOutline,
+        size: 'xlarge'
+      },
+      icon: svgIconOutline,
+      size: 'xlarge'
+    })]), half && h("span", {
+      "class": 'k-rating-precision-part'
+    }, [!(icon || svgIcon) && h(Icon, {
+      name: "star",
+      attrs: this.v3 ? undefined : {
+        name: "star",
+        icon: starIcon,
+        size: 'xlarge'
+      },
+      icon: starIcon,
+      style: dir === 'rtl' ? {
+        clipPath: 'inset(0 0 0 50%)'
+      } : {
+        clipPath: 'inset(0 50% 0 0)'
+      },
+      size: 'xlarge'
+    }), (icon || svgIcon) && h(Icon, {
+      name: icon ? getIconName(icon) : undefined,
+      attrs: this.v3 ? undefined : {
+        name: icon ? getIconName(icon) : undefined,
+        icon: svgIcon,
+        size: 'xlarge'
+      },
+      icon: svgIcon,
+      size: 'xlarge'
+    })]), half && h("span", {
+      style: {
+        width: '24px',
+        height: '24px',
+        display: 'block'
+      }
+    }), !half && (!(icon || svgIcon) && (hovered || selected && !hovered) && h(Icon, {
+      name: "star",
+      attrs: this.v3 ? undefined : {
+        name: "star",
+        icon: starIcon,
+        size: 'xlarge'
+      },
+      icon: starIcon,
+      size: 'xlarge'
+    }) || !(icon || svgIcon) && !hovered && !selected && h(Icon, {
+      name: "star-outline",
+      attrs: this.v3 ? undefined : {
+        name: "star-outline",
+        icon: starOutlineIcon,
+        size: 'xlarge'
+      },
+      icon: starOutlineIcon,
+      size: 'xlarge'
+    }) || (icon || svgIcon) && (hovered || selected && !hovered) && h(Icon, {
+      name: icon,
+      attrs: this.v3 ? undefined : {
+        name: icon,
+        icon: svgIcon,
+        size: 'xlarge'
+      },
+      icon: svgIcon,
+      size: 'xlarge'
+    }) || (icon || svgIcon) && !hovered && h(Icon, {
+      name: getIconName("".concat(icon, "-outline")),
+      attrs: this.v3 ? undefined : {
+        name: getIconName("".concat(icon, "-outline")),
+        icon: svgIconOutline,
+        size: 'xlarge'
+      },
+      icon: svgIconOutline,
+      size: 'xlarge'
+    }))]]);
+  },
+  methods: {
+    handleClick: function handleClick(event) {
+      this.$emit('click', {
+        value: this.$props.value,
+        target: this.$el,
+        event: event
+      });
+    },
+    handleMouseLeave: function handleMouseLeave(event) {
+      this.$emit('mouseleave', {
+        target: this.$el,
+        event: event
+      });
+    },
+    handleMouseMove: function handleMouseMove(event) {
+      this.$emit('mousemove', {
+        value: this.$props.value,
+        target: this.$el,
+        event: event
+      });
+    },
+    handleMouseEnter: function handleMouseEnter(event) {
+      this.$emit('mouseenter', {
+        target: this.$el,
+        event: event
+      });
+    },
+    handleKeyDown: function handleKeyDown(event) {
+      this.$emit('keydown', event);
+    },
+    handleFocus: function handleFocus(event) {
+      this.$emit('focus', event);
+    },
+    handleBlur: function handleBlur(event) {
+      this.$emit('blur', event);
+    }
+  }
+};
+var RatingItem = RatingItemVue2;
+export { RatingItem, RatingItemVue2 };

package/dist/es/rating/interfaces/RatingEvents.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Represents the return type of the RatingItemMouseEvent.
+ */
+export interface RatingItemMouseEvent {
+    /**
+     * The event of the RatingItemMouseEvent.
+     */
+    event: MouseEvent;
+    /**
+     * The target of the RatingItemMouseEvent.
+     */
+    target: Element;
+    /**
+     * @hidden
+     */
+    value?: number | null;
+}
+/**
+ * Represents the return type of the RatingKeyboardEvent.
+ */
+export interface RatingKeyboardEvent {
+    /**
+     * The current Rating value.
+     */
+    value: number;
+    /**
+     * The event of the RatingKeyboardEvent.
+     */
+    event: KeyboardEvent;
+}
+/**
+ * Represents the return type of RatingChangeEvent.
+ */
+export interface RatingChangeEvent {
+    /**
+     * The event of the RatingChangeEvent.
+     */
+    event: PointerEvent;
+    /**
+     * The target of the RatingChangeEvent.
+     */
+    target: HTMLSpanElement;
+    /**
+     * The current Rating value.
+     */
+    value: number;
+}

package/dist/es/rating/interfaces/RatingEvents.js

@@ -0,0 +1 @@
+export {};

package/dist/es/rating/interfaces/RatingItemProps.d.ts

@@ -0,0 +1,92 @@
+import { SVGIcon } from '@progress/kendo-vue-common';
+import { RatingItemMouseEvent } from './RatingEvents';
+/**
+ * Represents the properties of [RatingItem](% slug api_inputs_ratingitem %) component.
+ */
+export interface RatingItemProps {
+    /**
+     * Sets the `id` property of the top div element of the RatingItem.
+     */
+    id?: string;
+    /**
+     * Sets the `tabIndex` attribute.
+     */
+    tabIndex?: number;
+    /**
+     * Determines if icon is partly selected.
+     */
+    half?: boolean;
+    /**
+     * Determines the RatingItem direction `ltr` - by default, or `rtl`.
+     */
+    dir?: string;
+    /**
+     * Sets the current value of the RatingItem, used in controlled mode.
+     */
+    value: number;
+    /**
+     * Sets the title of current RatingItem component. [See example]({% slug controlled_rating %})
+     */
+    title?: string;
+    /**
+     * Sets the icon of current RatingItem component. [See example]({% slug label_rating %})
+     */
+    icon?: any;
+    /**
+     * Sets custom Rating SVG icon.
+     */
+    svgIcon?: SVGIcon;
+    /**
+     * Sets custom Rating SVG icon.
+     */
+    svgIconOutline?: SVGIcon;
+    /**
+     * Determines if current RatingItem is selected. [See example]({% slug item_customization_ratingitem %})
+     */
+    selected?: boolean;
+    /**
+     * Determines if some of the RatingItems are selected.
+     *  [See example]({% slug item_customization_ratingitem %})
+     */
+    haveSelectedValue?: boolean;
+    /**
+     * Determines if current RatingItem is hovered.
+     */
+    hovered?: boolean;
+    /**
+     * @hidden
+     */
+    item?: any;
+    /**
+     * @hidden
+     */
+    itemTemplate?: any;
+    /**
+     * Triggered after `onClick` event. Gets outside access to the target element, the new value and the event type.
+     */
+    onClick?: (event: RatingItemMouseEvent) => void;
+    /**
+     * Triggered after `onKeyDown` event. Gets outside access to the target element, the new value and the event type.
+     */
+    onKeyDown?: (event: KeyboardEvent) => void;
+    /**
+     * Triggered after `onFocus` event. Gets outside access to the target element and the event type.
+     */
+    onFocus?: (event: FocusEvent) => void;
+    /**
+     * Triggered after `onBlur` event. Gets outside access to the target element and the event type.
+     */
+    onBlur?: (event: FocusEvent) => void;
+    /**
+     * Triggered after `onMouseEnter` event. Gets outside access to the target element and the event type.
+     */
+    onMouseEnter?: (event: RatingItemMouseEvent) => void;
+    /**
+     * Triggered after `onMouseLeave` event. Gets outside access to the target element and the event type.
+     */
+    onMouseLeave?: (event: RatingItemMouseEvent) => void;
+    /**
+     * Triggered after `onMouseMove` event. Gets outside access to the target element and the event type.
+     */
+    onMouseMove?: (event: RatingItemMouseEvent) => void;
+}

package/dist/es/rating/interfaces/RatingItemProps.js

@@ -0,0 +1 @@
+export {};

package/dist/es/rating/interfaces/RatingProps.d.ts

@@ -0,0 +1,116 @@
+import { FormComponentProps, SVGIcon } from '@progress/kendo-vue-common';
+import { RatingKeyboardEvent, RatingItemMouseEvent, RatingChangeEvent } from './RatingEvents';
+/**
+ * Represents the properties of [Rating](% slug api_inputs_rating %) component.
+ */
+export interface RatingProps extends FormComponentProps {
+    /**
+     * Sets the `id` property of the top div element of the Rating.
+     */
+    id?: string;
+    /**
+     * Sets additional classes to the Rating.
+     */
+    className?: string;
+    /**
+     * Sets the `tabIndex` attribute.
+     */
+    tabIndex?: number;
+    /**
+     * Sets additional CSS styles to the Rating.
+     */
+    style?: any;
+    /**
+     * Represents the rendered Rating item.
+     */
+    item?: any;
+    /**
+     * Sets the current value of the Rating, used in controlled mode. [See example]({% slug item_customization_ratingitem %})
+     */
+    value?: number;
+    /**
+     * Sets the default value of the Rating, used in uncontrolled mode. [See example]({% slug controlled_rating %})
+     */
+    defaultValue?: number;
+    /**
+     * Sets the min possible icon value or star value in the main use-case.
+     */
+    min?: number;
+    /**
+     * Sets the max possible icon value or star value in the main use-case.
+     */
+    max?: number;
+    /**
+     * Sets the step value between the min and max value.
+     */
+    step?: number;
+    /**
+     * Determines the Rating direction `ltr` - by default, or `rtl`.
+     */
+    dir?: string;
+    /**
+     * Determines if the Rating has a label and is it a custom one.
+     */
+    label?: string;
+    /**
+     * Sets the `readonly` mode of the Rating, if it is set to `true`. [See example]({% slug label_rating %})
+     */
+    readonly?: boolean;
+    /**
+     * Sets the `disabled` mode of the Rating, if it is set to `true`. [See example]({% slug readonly_rating %})
+     */
+    disabled?: boolean;
+    /**
+     * Sets custom Rating icon, by default - star. [See example]({% slug disabled_rating %})
+     */
+    icon?: string;
+    /**
+     * Sets custom Rating SVG icon.
+     */
+    svgIcon?: SVGIcon;
+    /**
+     * Sets custom Rating SVG icon.
+     */
+    svgIconOutline?: SVGIcon;
+    /**
+     * Determines the selection mode. By default set to `continues`. [See example]({% slug icon_rating %})
+     */
+    selection?: 'continues' | 'single';
+    /**
+     * Determines the precision of the Rating. By default set to `item`. [See example]({% slug selection_rating %})
+     */
+    precision?: 'half' | 'item';
+    /**
+     * Determines if value represents half icon -> true, or not -> false. [See example]({% slug precision_rating %})
+     */
+    half?: boolean;
+    /**
+     * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
+     * For example these elements could contain error or hint message.
+     */
+    ariaDescribedBy?: string;
+    /**
+     * Identifies the element(s) which will label the component.
+     */
+    ariaLabelledBy?: string;
+    /**
+     * Triggered after value change. Gets outside access to the target element, the new value and the event type.
+     */
+    onChange?: (event: RatingChangeEvent) => void;
+    /**
+     * Triggered after `onClick` event. Gets outside access to the target element, the new value and the event type.
+     */
+    onClick?: (event: RatingItemMouseEvent) => void;
+    /**
+     * Triggered after `onKeyDown` event. Gets outside access to the target element, the new value and the event type.
+     */
+    onKeyDown?: (event: RatingKeyboardEvent) => void;
+    /**
+     * Triggered after `onFocus` event. Gets outside access to the target element and the event type.
+     */
+    onFocus?: (event: FocusEvent) => void;
+    /**
+     * Triggered after `onBlur` event. Gets outside access to the target element and the event type.
+     */
+    onBlur?: (event: FocusEvent) => void;
+}

package/dist/es/rating/interfaces/RatingProps.js

@@ -0,0 +1 @@
+export {};

package/dist/es/rating/utils/index.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @hidden
+ */
+export declare const toRound: (num: number, base: number) => number;
+/**
+ * @hidden
+ */
+export declare const getRemainder: (x: number, y: number) => number;
+/**
+ * @hidden
+ */
+export declare const isHalf: (index: number, value: number, step: number) => boolean;
+/**
+ * @hidden
+ */
+export declare const isSelected: (index: number, value: number | null, step: number, selection: 'single' | 'continues') => boolean;
+/**
+ * @hidden
+ */
+export declare const calcIsFirstHalf: (dir: string, rect: any, clientX: number) => boolean;
+/**
+ * @hidden
+ */
+export declare const isCorrectValue: (min: number, max: number, step: number, value: number) => boolean;

package/dist/es/rating/utils/index.js

@@ -0,0 +1,60 @@
+/**
+ * @hidden
+ */
+export var toRound = function toRound(num, base) {
+  if (num % 1) {
+    var percent = Math.pow(10, (base.toString().split('.')[1] || base.toString().split('.')[0]).length);
+    return Math.round(num * percent) / percent;
+  }
+  return num;
+};
+// Opting out of JS `modulo` calculation due to floating-point problems in JS
+// We're looking for the reminder - R.
+// x / y = a + R
+// R = (x / y) - a | *y
+// R = x - (y * a)
+// : a = Math.floor(x /y );
+/**
+ * @hidden
+ */
+export var getRemainder = function getRemainder(x, y) {
+  return x - y * Math.floor(x / y);
+};
+/**
+ * @hidden
+ */
+export var isHalf = function isHalf(index, value, step) {
+  return toRound(index - step, step) < value && value < index;
+};
+/**
+ * @hidden
+ */
+export var isSelected = function isSelected(index, value, step, selection) {
+  if (value === null) {
+    return false;
+  }
+  if (selection === 'continues') {
+    return isHalf(index, value, step) ? toRound(index - step / 2, step / 2) <= value : index <= value;
+  }
+  if (selection === 'single') {
+    return isHalf(index, value, step) ? toRound(index - step / 2, step / 2) === value : index === value;
+  }
+  return false;
+};
+/**
+ * @hidden
+ */
+export var calcIsFirstHalf = function calcIsFirstHalf(dir, rect, clientX) {
+  return dir === 'ltr' ? clientX < rect.x + rect.width / 2 : clientX > rect.x + rect.width / 2;
+};
+/**
+ * @hidden
+ */
+export var isCorrectValue = function isCorrectValue(min, max, step, value) {
+  for (var i = min; i <= max; i += step) {
+    if (value === i) {
+      return true;
+    }
+  }
+  return false;
+};

package/dist/es/rating/utils/rating-reducer.d.ts

@@ -0,0 +1,32 @@
+/**
+ * @hidden
+ */
+export declare enum RATING_ACTION {
+    select = "select",
+    deselect = "deselect",
+    increase = "increase",
+    decrease = "decrease",
+    min = "min",
+    max = "max",
+    reset = "reset"
+}
+/**
+ * @hidden
+ */
+export declare type RatingActionDispatch = {
+    type: RATING_ACTION;
+    payload?: number;
+    event?: any;
+};
+/**
+ * @hidden
+ */
+export declare type RatingAction = {
+    min: number;
+    max: number;
+    step?: number;
+};
+/**
+ * @hidden
+ */
+export declare const ratingReducer: (state: any, action: RatingAction & RatingActionDispatch) => any;