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

package/dist/es/main.d.ts

@@ -41,3 +41,4 @@ export * from './textarea/interfaces/TextAreaChangeEvent';
 export * from './textarea/interfaces/TextAreaFocusEvent';
 export * from './signature/Signature';
 export * from './signature/interfaces/main';
+export * from './rating/Rating';

package/dist/es/main.js

@@ -39,3 +39,4 @@ export * from './textarea/interfaces/TextAreaChangeEvent';
 export * from './textarea/interfaces/TextAreaFocusEvent';
 export * from './signature/Signature';
 export * from './signature/interfaces/main';
+export * from './rating/Rating';

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-inputs',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1714723247,
+    publishDate: 1715263381,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
 };

package/dist/es/rating/Rating.d.ts

@@ -0,0 +1,61 @@
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
+import { RatingItemMouseEvent } from './interfaces/RatingEvents';
+import { RatingProps } from './interfaces/RatingProps';
+import { RatingActionDispatch } from './utils/rating-reducer';
+declare type DefaultData<V> = object | ((this: V) => RatingData);
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+/**
+ * @hidden
+ */
+export interface RatingData {
+    defaultValue: number;
+}
+/**
+ * @hidden
+ */
+export interface RatingState {
+    inputRef: any;
+}
+/**
+ * @hidden
+ */
+export interface RatingMethods {
+    [key: string]: any;
+    handleChange: (newValue: number, e: PointerEvent) => void;
+    handleKeyDown: (e: KeyboardEvent) => void;
+    handleFocus: (e: FocusEvent) => void;
+    handleBlur: (e: FocusEvent) => void;
+    handleItemClick: (eventData: RatingItemMouseEvent) => void;
+    handleMouseLeave: (eventData: RatingItemMouseEvent) => void;
+    handleMouseMove: (eventData: RatingItemMouseEvent) => void;
+    dispatchValue: (action: RatingActionDispatch) => void;
+    dispatchHover: (action: RatingActionDispatch) => void;
+}
+/**
+ * @hidden
+ */
+export interface RatingComputed {
+    [key: string]: any;
+    base: number;
+}
+/**
+ * @hidden
+ */
+export interface RatingHandle {
+}
+/**
+ * @hidden
+ */
+export interface RatingAllMethods extends Vue2type, RatingMethods, RatingComputed, RatingState {
+}
+/**
+ * @hidden
+ */
+declare let RatingVue2: ComponentOptions<RatingAllMethods, DefaultData<RatingData>, DefaultMethods<RatingAllMethods>, RatingComputed, RecordPropsDefinition<RatingProps>>;
+/**
+ * @hidden
+ */
+declare const Rating: DefineComponent<RatingProps, any, RatingData, RatingComputed, RatingMethods, {}, {}, {}, string, RatingProps, RatingProps, {}>;
+export { Rating, RatingVue2 };

package/dist/es/rating/Rating.js

@@ -0,0 +1,400 @@
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+// @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 { Keys, classNames, getListeners, getTabIndex, templateRendering, validatePackage } from '@progress/kendo-vue-common';
+import { packageMetadata } from '../package-metadata';
+import { RatingItem } from './RatingItem';
+import { calcIsFirstHalf, getRemainder, isHalf, isSelected, toRound } from './utils';
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { messages, ratingAriaLabel } from '../messages/main';
+import { RATING_ACTION, ratingReducer } from './utils/rating-reducer';
+/**
+ * @hidden
+ */
+var RatingVue2 = {
+  name: 'Rating',
+  // @ts-ignore
+  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: {
+      default: 'item',
+      validator: function validator(value) {
+        return ['item', 'half'].includes(value);
+      }
+    },
+    selection: {
+      default: 'continues',
+      validator: function validator(value) {
+        return ['continues', 'single'].includes(value);
+      }
+    },
+    value: Number,
+    icon: String,
+    svgIconOutline: Object,
+    svgIcon: Object,
+    tabIndex: Number,
+    disabled: Boolean,
+    readonly: Boolean,
+    id: String,
+    half: Boolean,
+    defaultValue: Number,
+    label: String
+  },
+  created: function created() {
+    validatePackage(packageMetadata);
+  },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  data: function data() {
+    return {
+      focused: false,
+      currentValue: this.defaultValue || null,
+      currentHovered: null
+    };
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    var inputRef = ref(null);
+    return {
+      v3: v3,
+      inputRef: inputRef
+    };
+  },
+  computed: {
+    base: function base() {
+      return this.$props.step / (this.$props.precision === 'half' ? 2 : 1);
+    },
+    computedValue: function computedValue() {
+      return this.$props.value !== undefined ? this.$props.value : this.$data.currentValue;
+    }
+  },
+  render: function render(createElement) {
+    var _this = this;
+    var h = gh || createElement;
+    var ls = provideLocalizationService(this);
+    var _a = this.$props,
+      min = _a.min,
+      max = _a.max,
+      step = _a.step,
+      id = _a.id,
+      dir = _a.dir,
+      label = _a.label,
+      selection = _a.selection,
+      precision = _a.precision,
+      svgIcon = _a.svgIcon,
+      icon = _a.icon,
+      item = _a.item,
+      value = _a.value,
+      tabIndex = _a.tabIndex,
+      disabled = _a.disabled,
+      readonly = _a.readonly,
+      ariaLabelledBy = _a.ariaLabelledBy,
+      ariaDescribedBy = _a.ariaDescribedBy,
+      svgIconOutline = _a.svgIconOutline;
+    var items = Array.from({
+      length: max - min + 1
+    }, function (_, i) {
+      return min + i;
+    });
+    var remainder = getRemainder(toRound(max - min, this.base), step);
+    var stateValue = this.computedValue;
+    var stateHover = this.$data.currentHovered;
+    return h("span", {
+      id: id,
+      attrs: this.v3 ? undefined : {
+        id: id,
+        role: "slider",
+        dir: dir,
+        tabIndex: getTabIndex(tabIndex, disabled, undefined),
+        "aria-valuemin": min,
+        "aria-valuemax": max,
+        "aria-valuenow": value !== null ? value : undefined,
+        "aria-disabled": disabled ? 'true' : undefined,
+        "aria-label": ls.toLanguageString(ratingAriaLabel, messages[ratingAriaLabel]),
+        "aria-labelledby": ariaLabelledBy,
+        "aria-describedby": ariaDescribedBy
+      },
+      ref: 'ratingRef',
+      role: "slider",
+      dir: dir,
+      tabIndex: getTabIndex(tabIndex, disabled, undefined),
+      "class": classNames('k-rating', {
+        'k-rtl': dir === 'rtl',
+        'k-readonly': readonly,
+        'k-disabled': disabled
+      }),
+      onKeydown: this.handleKeyDown,
+      on: this.v3 ? undefined : {
+        "keydown": this.handleKeyDown,
+        "focus": this.handleFocus,
+        "blur": this.handleBlur,
+        "click": function click() {
+          return _this.$data.focused = true;
+        }
+      },
+      onFocus: this.handleFocus,
+      onBlur: this.handleBlur,
+      onClick: function click() {
+        return _this.$data.focused = true;
+      },
+      "aria-valuemin": min,
+      "aria-valuemax": max,
+      "aria-valuenow": value !== null ? value : undefined,
+      "aria-disabled": disabled ? 'true' : undefined,
+      "aria-label": ls.toLanguageString(ratingAriaLabel, messages[ratingAriaLabel]),
+      "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": ariaDescribedBy
+    }, [h("input", {
+      id: 'rating',
+      attrs: this.v3 ? undefined : {
+        id: 'rating',
+        readOnly: readonly,
+        disabled: disabled
+      },
+      "class": 'k-hidden',
+      readOnly: readonly,
+      disabled: disabled
+    }), h("span", {
+      "class": 'k-rating-container'
+    }, [items.map(function (_itemRating) {
+      var itemValue = toRound(_itemRating + remainder, this.base);
+      var half = precision === 'half' ? isHalf(itemValue, stateHover !== null ? stateHover : stateValue !== null ? stateValue : 0, step) : false;
+      var haveSelectedValue = isSelected(itemValue, stateValue, step, selection);
+      var selected = isSelected(itemValue, stateHover !== null ? stateHover : stateValue, step, selection);
+      var hovered = isSelected(itemValue, stateHover, step, selection);
+      var itemTemplate = templateRendering.call(this, item, getListeners.call(this));
+      var defaultItemTemplate = h(RatingItem, {
+        afterHovered: stateHover,
+        attrs: this.v3 ? undefined : {
+          afterHovered: stateHover,
+          value: itemValue,
+          dir: dir,
+          title: String(half ? toRound(itemValue - step / 2, this.base) : itemValue),
+          icon: icon,
+          svgIcon: svgIcon,
+          svgIconOutline: svgIconOutline,
+          haveSelectedValue: haveSelectedValue,
+          half: half,
+          selected: selected,
+          hovered: hovered,
+          item: item,
+          itemTemplate: itemTemplate
+        },
+        key: itemValue,
+        value: itemValue,
+        dir: dir,
+        title: String(half ? toRound(itemValue - step / 2, this.base) : itemValue),
+        icon: icon,
+        svgIcon: svgIcon,
+        svgIconOutline: svgIconOutline,
+        haveSelectedValue: haveSelectedValue,
+        half: half,
+        selected: selected,
+        hovered: hovered,
+        item: item,
+        itemTemplate: itemTemplate,
+        onClick: this.handleItemClick,
+        on: this.v3 ? undefined : {
+          "click": this.handleItemClick,
+          "mousemove": this.handleMouseMove,
+          "mouseleave": this.handleMouseLeave
+        },
+        onMousemove: this.handleMouseMove,
+        onMouseleave: this.handleMouseLeave
+      });
+      return defaultItemTemplate;
+    }, this)]), label && h("span", {
+      "class": 'k-rating-label'
+    }, [label])]);
+  },
+  methods: {
+    handleFocus: function handleFocus(event) {
+      this.$emit('focus', event);
+    },
+    handleBlur: function handleBlur(event) {
+      this.$emit('blur', event);
+    },
+    handleChange: function handleChange(newValue, event) {
+      this.$emit('change', {
+        value: newValue,
+        target: this.$refs.ratingRef,
+        event: event
+      });
+    },
+    handleKeyDown: function handleKeyDown(event) {
+      if (this.$props.readonly || this.$props.disabled) {
+        return;
+      }
+      switch (event.keyCode) {
+        case Keys.right:
+          event.preventDefault();
+          this.dispatchValue({
+            type: this.$props.dir === 'rtl' ? RATING_ACTION.decrease : RATING_ACTION.increase,
+            event: event
+          });
+          break;
+        case Keys.left:
+          event.preventDefault();
+          this.dispatchValue({
+            type: this.$props.dir === 'rtl' ? RATING_ACTION.increase : RATING_ACTION.decrease,
+            event: event
+          });
+          break;
+        case Keys.home:
+          event.preventDefault();
+          this.dispatchValue({
+            type: this.$props.dir === 'rtl' ? RATING_ACTION.min : RATING_ACTION.max,
+            event: event
+          });
+          break;
+        case Keys.end:
+          event.preventDefault();
+          this.dispatchValue({
+            type: this.$props.dir === 'rtl' ? RATING_ACTION.max : RATING_ACTION.min,
+            event: event
+          });
+          break;
+        case Keys.esc:
+          event.preventDefault();
+          this.dispatchValue({
+            type: RATING_ACTION.deselect,
+            event: event
+          });
+          break;
+        default:
+          break;
+      }
+      this.$emit('keydown', {
+        value: this.$data.currentValue,
+        event: event
+      });
+    },
+    handleItemClick: function handleItemClick(eventData) {
+      var event = eventData.event,
+        value = eventData.value,
+        target = eventData.target;
+      if (!target || !value || this.$props.readonly || this.$props.disabled) {
+        return;
+      }
+      if (this.$props.precision === 'half') {
+        var rect = target.getBoundingClientRect();
+        var isFirstHalf = calcIsFirstHalf(this.$props.dir ? this.$props.dir : 'ltr', rect, eventData.event.clientX);
+        var payload = isFirstHalf ? toRound(value - this.$props.step / 2, this.base) : value;
+        this.dispatchValue({
+          type: RATING_ACTION.select,
+          payload: payload,
+          event: event
+        });
+      } else {
+        this.dispatchValue({
+          type: RATING_ACTION.select,
+          payload: value,
+          event: event
+        });
+      }
+      this.$emit('click', event);
+    },
+    handleMouseMove: function handleMouseMove(eventData) {
+      var event = eventData.event,
+        value = eventData.value,
+        target = eventData.target;
+      if (!target || !value) {
+        return;
+      }
+      if (this.$props.precision === 'half') {
+        var rect = target.getBoundingClientRect();
+        var isFirstHalf = calcIsFirstHalf(this.$props.dir ? this.$props.dir : 'ltr', rect, event.clientX);
+        var payload = isFirstHalf ? value - this.$props.step / 2 : value;
+        this.dispatchHover({
+          type: RATING_ACTION.select,
+          payload: payload,
+          event: event
+        });
+      } else {
+        this.dispatchHover({
+          type: RATING_ACTION.select,
+          payload: value,
+          event: event
+        });
+      }
+    },
+    handleMouseLeave: function handleMouseLeave(eventData) {
+      this.dispatchHover({
+        type: RATING_ACTION.reset,
+        event: eventData.event
+      });
+    },
+    dispatchValue: function dispatchValue(action) {
+      var args = {
+        state: this.$props.value,
+        min: this.$props.min,
+        max: this.$props.max,
+        step: this.base
+      };
+      var state = args.state || this.$data.currentValue;
+      var newState = ratingReducer(state, __assign(__assign({}, action), args));
+      var event = action.event;
+      this.handleChange(newState, event);
+      this.$data.currentValue = newState;
+    },
+    dispatchHover: function dispatchHover(action) {
+      var args = {
+        state: this.$props.value,
+        min: this.$props.min,
+        max: this.$props.max,
+        step: this.base,
+        precision: this.$props.precision
+      };
+      var state = args.state;
+      var newState = ratingReducer(state, __assign(__assign({}, action), args));
+      this.$data.currentHovered = newState;
+    }
+  }
+};
+/**
+ * @hidden
+ */
+var Rating = RatingVue2;
+export { Rating, RatingVue2 };

package/dist/es/rating/RatingItem.d.ts

@@ -0,0 +1,46 @@
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
+import { RatingItemProps } from './interfaces/RatingItemProps';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+/**
+ * @hidden
+ */
+export interface RatingItemState {
+}
+/**
+ * @hidden
+ */
+export interface RatingItemComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface RatingItemMethods {
+    [key: string]: any;
+    handleClick: (e: MouseEvent) => void;
+    handleKeyDown: (e: KeyboardEvent) => void;
+    handleFocus: (e: FocusEvent) => void;
+    handleBlur: (e: FocusEvent) => void;
+    handleMouseEnter: (e: MouseEvent) => void;
+    handleMouseLeave: (e: MouseEvent) => void;
+    handleMouseMove: (e: MouseEvent) => void;
+}
+/**
+ * @hidden
+ */
+export interface RatingItemData {
+}
+/**
+ * @hidden
+ */
+export interface RatingItemAll extends Vue2type, RatingItemMethods, RatingItemData, RatingItemComputed, RatingItemState {
+}
+/**
+ * @hidden
+ */
+declare let RatingItemVue2: ComponentOptions<RatingItemAll, DefaultData<RatingItemData>, DefaultMethods<RatingItemAll>, RatingItemComputed, RecordPropsDefinition<RatingItemProps>>;
+declare const RatingItem: DefineComponent<RatingItemProps, any, RatingItemData, RatingItemComputed, RatingItemMethods, {}, {}, {}, string, RatingItemProps, RatingItemProps, {}>;
+export { RatingItem, RatingItemVue2 };