@progress/kendo-vue-inputs 3.5.0 → 3.5.1-dev.202208150613

package/dist/esm/range-slider/range-raducer.js

@@ -0,0 +1,157 @@
+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);
+};
+/**
+ * @hidden
+ */
+
+
+export var RANGE_ACTION;
+
+(function (RANGE_ACTION) {
+  RANGE_ACTION["start"] = "start";
+  RANGE_ACTION["end"] = "end";
+  RANGE_ACTION["min"] = "min";
+  RANGE_ACTION["max"] = "max";
+  RANGE_ACTION["increase"] = "increase";
+  RANGE_ACTION["decrease"] = "decrease";
+})(RANGE_ACTION || (RANGE_ACTION = {}));
+/**
+ * @hidden
+ */
+
+
+export var rangeReducer = function rangeReducer(state, action) {
+  var newState;
+  var newValue;
+
+  switch (action.type) {
+    case RANGE_ACTION.start:
+      if (action.payload === undefined) {
+        return state;
+      }
+
+      newState = {
+        start: action.payload > state.end ? state.end : Math.max(action.payload, action.min),
+        end: state.end
+      };
+      break;
+
+    case RANGE_ACTION.end:
+      if (action.payload === undefined) {
+        return state;
+      }
+
+      newState = {
+        start: state.start,
+        end: action.payload < state.start ? state.start : Math.min(action.payload, action.max)
+      };
+      break;
+
+    case RANGE_ACTION.min:
+      if (action.key === 'start') {
+        newState = __assign(__assign({}, state), {
+          start: action.min
+        });
+      } else {
+        newState = __assign(__assign({}, state), {
+          end: Math.max(action.min, state.start)
+        });
+      }
+
+      break;
+
+    case RANGE_ACTION.max:
+      if (action.key === 'start') {
+        newState = __assign(__assign({}, state), {
+          start: Math.min(action.max, state.end)
+        });
+      } else {
+        newState = __assign(__assign({}, state), {
+          end: action.max
+        });
+      }
+
+      break;
+
+    case RANGE_ACTION.increase:
+      if (action.step === undefined || action.key === undefined) {
+        return state;
+      }
+
+      newValue = state[action.key] + action.step;
+
+      if (action.key === 'start') {
+        if (newValue < action.min) {
+          newState = __assign(__assign({}, state), {
+            start: action.min
+          });
+        } else {
+          newState = __assign(__assign({}, state), {
+            start: Math.min(newValue, state.end)
+          });
+        }
+      } else {
+        if (newValue > action.max) {
+          newState = __assign(__assign({}, state), {
+            end: action.max
+          });
+        } else {
+          newState = __assign(__assign({}, state), {
+            end: Math.max(newValue, state.start)
+          });
+        }
+      }
+
+      break;
+
+    case RANGE_ACTION.decrease:
+      if (action.step === undefined || action.key === undefined) {
+        return state;
+      }
+
+      newValue = state[action.key] - action.step;
+
+      if (action.key === 'start') {
+        if (newValue < action.min) {
+          newState = __assign(__assign({}, state), {
+            start: action.min
+          });
+        } else {
+          newState = __assign(__assign({}, state), {
+            start: Math.min(newValue, state.end)
+          });
+        }
+      } else {
+        if (newValue > action.max) {
+          newState = __assign(__assign({}, state), {
+            end: action.max
+          });
+        } else {
+          newState = __assign(__assign({}, state), {
+            end: Math.max(newValue, state.start)
+          });
+        }
+      }
+
+      break;
+
+    default:
+      newState = state;
+      break;
+  }
+
+  return newState;
+};

package/dist/esm/slider/Slider.d.ts

@@ -0,0 +1,140 @@
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+import { FormComponentProps, DraggableDragEvent, DraggablePressEvent } from '@progress/kendo-vue-common';
+import { Direction } from '../interfaces/Direction';
+/**
+ * The arguments for the `change` Slider event.
+ */
+export interface SliderChangeEvent {
+    /**
+     * The current value of the Slider.
+     */
+    value: number;
+    /**
+     * The native event.
+     */
+    event: any;
+}
+/**
+ * Represents the props of the [Kendo UI for Vue Slider component]({% slug overview_slider %}).
+ */
+export interface SliderProps extends FormComponentProps {
+    /**
+     * The value of the Slider.
+     */
+    value?: number;
+    /**
+     * @hidden
+     */
+    modelValue?: number;
+    /**
+     * The default value of the Slider.
+     */
+    defaultValue?: number;
+    /**
+     * The minimum value of the Slider.
+     */
+    min: number;
+    /**
+     * The maximum value of the Slider.
+     */
+    max: number;
+    /**
+     * Specifies the step of the value increase and decrease.
+     */
+    step?: number;
+    /**
+     * Determines the event handler that will be fired when the user edits the value.
+     */
+    onChange?: (event: SliderChangeEvent) => void;
+    /**
+     * Renders the arrow side buttons of the Slider if set to true.
+     */
+    buttons?: boolean;
+    /**
+     * Specifies the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)
+     * of the Slider.
+     */
+    tabIndex?: number;
+    /**
+     * Determines whether the Slider is disabled.
+     *
+     */
+    disabled?: boolean;
+    /**
+     * If `vertical` is set to `true`, the orientation of the Slider changes from horizontal to vertical
+     * ([see example]({% slug orientation_slider %})).
+     */
+    vertical?: boolean;
+    /**
+     * Specifies the id of the component.
+     */
+    id?: string;
+    /**
+     * 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;
+    dir?: String;
+}
+/**
+ * @hidden
+ */
+export interface SliderData {
+    currentValue: number;
+    currentFocused: boolean;
+    currentDir?: Direction;
+}
+/**
+ * @hidden
+ */
+export interface SliderState {
+    _sliderTrack: any;
+    draggable: any;
+}
+/**
+ * @hidden
+ */
+export interface SliderMethods {
+    [key: string]: any;
+    focus: () => void;
+    isLabel: (target: any) => boolean;
+    onFocus: () => void;
+    onBlur: () => void;
+    onKeyDown: (e: any) => void;
+    decrement: (e: any) => void;
+    increment: (e: any) => void;
+    dragStart: (e: DraggablePressEvent) => void;
+    dragOver: (e: DraggableDragEvent) => void;
+    drag: (e: any) => void;
+    change: (e: any, value: number) => void;
+}
+/**
+ * @hidden
+ */
+export interface SliderComputed {
+    [key: string]: any;
+    sliderTrack: any;
+    computedValue: number;
+}
+/**
+ * @hidden
+ */
+export interface SliderAll extends Vue2type, SliderMethods, SliderComputed, SliderState, SliderData {
+}
+/**
+ * @hidden
+ */
+declare let SliderVue2: ComponentOptions<SliderAll, DefaultData<SliderData>, DefaultMethods<SliderAll>, SliderComputed, RecordPropsDefinition<SliderProps>>;
+/**
+ * @hidden
+ */
+declare const Slider: DefineComponent<SliderProps, any, SliderData, SliderComputed, SliderMethods, {}, {}, {}, string, SliderProps, SliderProps, {}>;
+export { Slider, SliderVue2 };

package/dist/esm/slider/Slider.js

@@ -0,0 +1,395 @@
+// @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;
+var inject = allVue.inject;
+import { Button } from '@progress/kendo-vue-buttons';
+import { Keys, classNames, Draggable, getTabIndex, validatePackage, getDefaultSlots } from '@progress/kendo-vue-common';
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { messages, sliderIncreaseValue, sliderDecreaseValue, sliderDragTitle } from './../messages.js';
+import { SLIDER_LABEL_ATTRIBUTE } from './SliderLabel.js';
+import { packageMetadata } from '../package-metadata.js';
+/**
+ * @hidden
+ */
+
+var SliderVue2 = {
+  name: 'KendoSlider',
+  model: {
+    event: 'changemodel'
+  },
+  // @ts-ignore
+  emits: {
+    'changemodel': null,
+    'update:modelValue': null,
+    'change': null,
+    'blur': null,
+    'focus': null
+  },
+  props: {
+    modelValue: {
+      type: Number,
+      default: undefined
+    },
+    defaultValue: {
+      type: Number,
+      default: undefined
+    },
+    name: String,
+    buttons: Boolean,
+    tabIndex: Number,
+    disabled: Boolean,
+    dir: String,
+    step: Number,
+    min: {
+      type: Number,
+      required: true
+    },
+    max: {
+      type: Number,
+      required: true
+    },
+    value: Number,
+    vertical: Boolean,
+    id: String,
+    ariaLabelledBy: String,
+    ariaDescribedBy: String
+  },
+  provide: function provide() {
+    return {
+      kendoMin: this.$props.min,
+      kendoMax: this.$props.max,
+      kendoVertical: this.$props.vertical
+    };
+  },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  data: function data() {
+    return {
+      currentValue: undefined,
+      currentFocused: false,
+      currentDir: 'ltr'
+    };
+  },
+  computed: {
+    computedValue: function computedValue() {
+      var value = this.$props.value !== undefined ? this.$props.value : this.currentValue;
+      var _a = this.$props,
+          min = _a.min,
+          max = _a.max;
+      return value === undefined ? value : Math.min(Math.max(value, min), max);
+    },
+    sliderTrack: function sliderTrack() {
+      return this._sliderTrack;
+    }
+  },
+  created: function created() {
+    validatePackage(packageMetadata);
+
+    if (this.$props.value !== undefined) {
+      this.$data.currentValue = this.$props.value;
+    } else if (this.$props.modelValue !== undefined) {
+      this.$data.currentValue = this.$props.modelValue;
+    } else if (this.$props.defaultValue !== undefined) {
+      this.$data.currentValue = this.$props.defaultValue;
+    } else {
+      this.$data.currentValue = this.$props.min;
+    }
+
+    this.currentFocused = false;
+    this.currentDir = this.$props.dir;
+  },
+  mounted: function mounted() {
+    this._sliderTrack = this.$refs.sliderTrack;
+
+    if (this.$el) {
+      this.draggable = this.$refs.draggable;
+    }
+
+    if (!this.currentDir && window && this.$el) {
+      // Note: getComputedStyle forces reflow
+      var direction = window.getComputedStyle(this.$el).direction;
+
+      if (direction) {
+        this.currentDir = direction;
+      }
+    }
+  },
+  updated: function updated() {
+    if (this.$el) {
+      this.draggable = this.$refs.draggable;
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    var inputRef = ref(null);
+    var kendoLocalizationService = inject('kendoLocalizationService', {});
+    return {
+      v3: v3,
+      inputRef: inputRef,
+      kendoLocalizationService: kendoLocalizationService
+    };
+  },
+  render: function render(createElement) {
+    var _this = this;
+
+    var _a;
+
+    var h = gh || createElement;
+    var lS = provideLocalizationService(this);
+    var percentValue = (this.computedValue - this.$props.min) / (this.$props.max - this.$props.min) * 100;
+    var defaultSlot = getDefaultSlots(this);
+    return h("div", {
+      "aria-valuemin": this.$props.min,
+      attrs: this.v3 ? undefined : {
+        "aria-valuemin": this.$props.min,
+        "aria-valuemax": this.$props.max,
+        "aria-valuenow": this.computedValue,
+        "aria-disabled": this.$props.disabled ? 'true' : undefined,
+        "aria-labelledby": this.$props.ariaLabelledBy,
+        "aria-describedby": this.$props.ariaDescribedBy,
+        dir: this.currentDir,
+        role: "slider",
+        id: this.$props.id,
+        tabindex: getTabIndex(this.$props.tabIndex, this.$props.disabled, undefined)
+      },
+      "aria-valuemax": this.$props.max,
+      "aria-valuenow": this.computedValue,
+      "aria-disabled": this.$props.disabled ? 'true' : undefined,
+      "aria-labelledby": this.$props.ariaLabelledBy,
+      "aria-describedby": this.$props.ariaDescribedBy,
+      dir: this.currentDir,
+      role: "slider",
+      id: this.$props.id,
+      style: this.$props.style,
+      tabindex: getTabIndex(this.$props.tabIndex, this.$props.disabled, undefined),
+      onFocus: this.onFocus,
+      on: this.v3 ? undefined : {
+        "focus": this.onFocus,
+        "blur": this.onBlur,
+        "keydown": this.onKeyDown
+      },
+      onBlur: this.onBlur,
+      onKeydown: this.onKeyDown,
+      "class": classNames('k-slider k-widget', {
+        'k-focus': this.currentFocused,
+        'k-disabled': this.$props.disabled,
+        'k-slider-horizontal': !this.$props.vertical,
+        'k-slider-vertical': this.$props.vertical
+      }, this.$props.className)
+    }, [h("div", {
+      "class": classNames('k-slider-wrap')
+    }, [this.$props.buttons && // @ts-ignore
+    h(Button, {
+      type: "button",
+      attrs: this.v3 ? undefined : {
+        type: "button",
+        tabIndex: -1,
+        icon: this.$props.vertical ? 'arrow-s' : 'arrow-w',
+        rounded: 'full',
+        title: lS.toLanguageString(sliderDecreaseValue, messages[sliderDecreaseValue])
+      },
+      tabIndex: -1,
+      icon: this.$props.vertical ? 'arrow-s' : 'arrow-w',
+      style: {
+        position: 'relative'
+      },
+      rounded: 'full',
+      "class": "k-button-decrease",
+      title: lS.toLanguageString(sliderDecreaseValue, messages[sliderDecreaseValue]),
+      onClick: this.decrement,
+      on: this.v3 ? undefined : {
+        "click": this.decrement
+      }
+    }), // @ts-ignore  function children
+    h(Draggable, {
+      onDrag: this.dragOver,
+      on: this.v3 ? undefined : {
+        "drag": this.dragOver,
+        "press": this.dragStart
+      },
+      onPress: this.dragStart,
+      ref: 'draggable'
+    }, this.v3 ? function () {
+      return [h("div", {
+        "class": "k-slider-track-wrap",
+        style: {
+          touchAction: 'none'
+        }
+      }, [defaultSlot && h("ul", {
+        "class": "k-reset k-slider-items"
+      }, [defaultSlot]), h("div", {
+        "class": "k-slider-track",
+        ref: 'sliderTrack'
+      }, [h("div", {
+        "class": "k-slider-selection",
+        style: _this.$props.vertical ? {
+          height: percentValue + '%'
+        } : {
+          width: percentValue + '%'
+        }
+      }), h("a", {
+        "class": "k-draghandle",
+        title: lS.toLanguageString(sliderDragTitle, messages[sliderDragTitle]),
+        attrs: _this.v3 ? undefined : {
+          title: lS.toLanguageString(sliderDragTitle, messages[sliderDragTitle])
+        },
+        style: _this.$props.vertical ? {
+          bottom: percentValue + '%',
+          zIndex: 1
+        } : (_a = {}, _a[_this.currentDir === 'rtl' ? 'right' : 'left'] = percentValue + '%', _a.zIndex = 1, _a)
+      })])])];
+    } : [h("div", {
+      "class": "k-slider-track-wrap",
+      style: {
+        touchAction: 'none'
+      }
+    }, [defaultSlot && h("ul", {
+      "class": "k-reset k-slider-items"
+    }, [defaultSlot]), h("div", {
+      "class": "k-slider-track",
+      ref: 'sliderTrack'
+    }, [h("div", {
+      "class": "k-slider-selection",
+      style: _this.$props.vertical ? {
+        height: percentValue + '%'
+      } : {
+        width: percentValue + '%'
+      }
+    }), h("a", {
+      "class": "k-draghandle",
+      title: lS.toLanguageString(sliderDragTitle, messages[sliderDragTitle]),
+      attrs: _this.v3 ? undefined : {
+        title: lS.toLanguageString(sliderDragTitle, messages[sliderDragTitle])
+      },
+      style: _this.$props.vertical ? {
+        bottom: percentValue + '%',
+        zIndex: 1
+      } : (_a = {}, _a[_this.currentDir === 'rtl' ? 'right' : 'left'] = percentValue + '%', _a.zIndex = 1, _a)
+    })])])]), this.$props.buttons && // @ts-ignore
+    h(Button, {
+      type: "button",
+      attrs: this.v3 ? undefined : {
+        type: "button",
+        tabIndex: -1,
+        icon: this.$props.vertical ? 'arrow-n' : 'arrow-e',
+        rounded: 'full',
+        title: lS.toLanguageString(sliderIncreaseValue, messages[sliderIncreaseValue])
+      },
+      tabIndex: -1,
+      icon: this.$props.vertical ? 'arrow-n' : 'arrow-e',
+      rounded: 'full',
+      style: {
+        position: 'relative'
+      },
+      "class": "k-button-increase",
+      title: lS.toLanguageString(sliderIncreaseValue, messages[sliderIncreaseValue]),
+      onClick: this.increment,
+      on: this.v3 ? undefined : {
+        "click": this.increment
+      }
+    })])]);
+  },
+  methods: {
+    focus: function focus() {
+      if (this.$el) {
+        // @ts-ignore
+        this.$el.focus();
+      }
+    },
+    isLabel: function isLabel(target) {
+      var currentTarget = target;
+
+      while (currentTarget) {
+        if (Boolean(currentTarget.getAttribute(SLIDER_LABEL_ATTRIBUTE))) {
+          return true;
+        }
+
+        currentTarget = currentTarget.parentElement;
+      }
+
+      return false;
+    },
+    onFocus: function onFocus(event) {
+      this.currentFocused = true;
+      this.$emit('focus', event);
+    },
+    onBlur: function onBlur(event) {
+      this.currentFocused = false;
+      this.$emit('blur', event);
+    },
+    onKeyDown: function onKeyDown(e) {
+      var newValue = undefined;
+
+      if (e.keyCode === Keys.left || e.keyCode === Keys.down) {
+        newValue = this.currentValue - (this.$props.step || 0);
+      } else if (e.keyCode === Keys.right || e.keyCode === Keys.up) {
+        newValue = this.currentValue + (this.$props.step || 0);
+      } else if (e.keyCode === Keys.home) {
+        newValue = this.$props.min;
+      } else if (e.keyCode === Keys.end) {
+        newValue = this.$props.max;
+      }
+
+      if (newValue !== undefined) {
+        e.preventDefault();
+        this.change(e, newValue);
+      }
+    },
+    decrement: function decrement(e) {
+      e.preventDefault();
+      this.change(e, this.currentValue - (this.$props.step || 0));
+    },
+    increment: function increment(e) {
+      e.preventDefault();
+      this.change(e, this.currentValue + (this.$props.step || 0));
+    },
+    dragStart: function dragStart(e) {
+      if (!this.isLabel(e.originalEvent.target)) {
+        if (e.isTouch) {
+          e.originalEvent.preventDefault();
+        }
+
+        this.drag(e);
+      }
+    },
+    dragOver: function dragOver(e) {
+      e.originalEvent.preventDefault();
+      this.drag(e);
+    },
+    drag: function drag(e) {
+      var computed = this.draggable.element.getBoundingClientRect();
+      var distance = this.$props.vertical ? computed.bottom - e.clientY : this.currentDir === 'rtl' ? computed.right - e.clientX : e.clientX - computed.left;
+      var size = this.$props.vertical ? computed.height : computed.width;
+      var percentage = distance / size;
+      this.change(e, this.$props.min + percentage * (this.$props.max - this.$props.min));
+    },
+    change: function change(e, value) {
+      value = Math.min(Math.max(value, this.$props.min), this.$props.max);
+      this.currentValue = value;
+      this.$emit('changemodel', value);
+      this.$emit('update:modelValue', value);
+      this.$emit('change', {
+        event: e,
+        value: value,
+        component: this,
+        target: {
+          name: this.$props.name,
+          value: value
+        }
+      });
+    }
+  }
+};
+/**
+ * @hidden
+ */
+
+var Slider = SliderVue2;
+export { Slider, SliderVue2 };