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

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

@@ -0,0 +1,65 @@
+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;
+};
+/**
+ * @hidden
+ */
+export declare const SLIDER_LABEL_ATTRIBUTE = "data-slider-label";
+/**
+ * Represents the props of the Kendo UI for Vue SliderLabel component.
+ */
+export interface SliderLabelProps {
+    /**
+     * The position in relative to the start of the SliderLabel component.
+     */
+    position: number;
+    /**
+     * The onClick event of the SliderLabel component.
+     */
+    onClick?: (event: any) => void;
+    /**
+     * The title of the SliderLabel component.
+     */
+    title?: string;
+    /**
+     * @hidden
+     */
+    vertical?: boolean;
+}
+/**
+ * @hidden
+ */
+export interface SliderLabelState {
+    sliderLabelRef: any;
+}
+/**
+ * @hidden
+ */
+export interface SliderLabelMethods {
+    [key: string]: any;
+    onClick: (event: any) => void;
+}
+/**
+ * @hidden
+ */
+export interface SliderLabelData {
+    currentDir: string;
+}
+/**
+ * @hidden
+ */
+export interface SliderLabelAll extends Vue2type, SliderLabelMethods, SliderLabelData, SliderLabelState {
+}
+/**
+ * @hidden
+ */
+declare let SliderLabelVue2: ComponentOptions<SliderLabelAll, DefaultData<SliderLabelData>, DefaultMethods<SliderLabelAll>, {}, RecordPropsDefinition<SliderLabelProps>>;
+/**
+ * Represents the Kendo UI for Vue Native SliderLabel component.
+ * ### props <span class='code'>[SliderLabelProps]({% slug api_inputs_sliderlabelprops %})</span>
+ * The props of the SliderLabel component.
+ */
+declare const SliderLabel: DefineComponent<SliderLabelProps, any, SliderLabelData, {}, SliderLabelMethods, {}, {}, {}, string, SliderLabelProps, SliderLabelProps, {}>;
+export { SliderLabel, SliderLabelVue2 };

package/dist/esm/slider/SliderLabel.js

@@ -0,0 +1,121 @@
+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 { getDefaultSlots } from '@progress/kendo-vue-common';
+/**
+ * @hidden
+ */
+
+export var SLIDER_LABEL_ATTRIBUTE = 'data-slider-label';
+/**
+ * @hidden
+ */
+
+var SliderLabelVue2 = {
+  name: 'KendoSliderLabel',
+  // @ts-ignore
+  emits: {
+    click: null
+  },
+  props: {
+    position: Number,
+    title: String,
+    vertical: Boolean
+  },
+  data: function data() {
+    return {
+      currentDir: 'ltr'
+    };
+  },
+  inject: ['kendoMax', 'kendoMin', 'kendoVertical'],
+  mounted: function mounted() {
+    this.sliderLabelRef = this.$refs.sliderLabelRef;
+
+    if (!this.currentDir && window && this.$el) {
+      // Note: getComputedStyle forces reflow
+      var direction = window.getComputedStyle(this.$el).direction;
+
+      if (direction) {
+        this.currentDir = direction;
+      }
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var _a;
+
+    var h = gh || createElement;
+    var dir = this.currentDir;
+    var defaultSlot = getDefaultSlots(this);
+    var position = 100 * (this.$props.position - this.kendoMin) / (this.kendoMax - this.kendoMin);
+    var vertical = this.kendoVertical;
+    var style = vertical ? {
+      bottom: "".concat(position, "%"),
+      height: '1px',
+      width: '100%'
+    } : (_a = {}, _a[dir === 'rtl' ? 'right' : 'left'] = "".concat(position, "%"), _a.width = '1px', _a.height = '100%', _a);
+    return h("li", {
+      ref: 'sliderLabelRef',
+      role: "presentation",
+      attrs: this.v3 ? undefined : {
+        role: "presentation",
+        title: this.$props.title
+      },
+      "class": "k-tick k-tick-large",
+      title: this.$props.title,
+      style: __assign({
+        zIndex: 1,
+        position: 'absolute'
+      }, style)
+    }, [h("span", {
+      "data-slider-label": true,
+      attrs: this.v3 ? undefined : {
+        "data-slider-label": true
+      },
+      "class": "k-label",
+      onClick: this.onClick,
+      on: this.v3 ? undefined : {
+        "click": this.onClick
+      }
+    }, [defaultSlot])]);
+  },
+  methods: {
+    onClick: function onClick(event) {
+      this.$emit('click', event);
+    }
+  }
+};
+/**
+ * Represents the Kendo UI for Vue Native SliderLabel component.
+ * ### props <span class='code'>[SliderLabelProps]({% slug api_inputs_sliderlabelprops %})</span>
+ * The props of the SliderLabel component.
+ */
+
+var SliderLabel = SliderLabelVue2;
+export { SliderLabel, SliderLabelVue2 };

package/dist/esm/switch/Switch.d.ts

@@ -0,0 +1,182 @@
+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 } from '@progress/kendo-vue-common';
+import { ToggleBaseProps } from '../interfaces/ToggleBaseProps';
+import { LocalizationService } from '@progress/kendo-vue-intl';
+/**
+ * The arguments for the `onChange` Switch event.
+ */
+export interface SwitchChangeEvent {
+    /**
+     * The new value of the Switch.
+     */
+    value: boolean;
+}
+/**
+ * Represents the props of the [Kendo UI for Vue Switch component]({% slug overview_switch %}).
+ */
+export interface SwitchProps extends ToggleBaseProps, FormComponentProps {
+    /**
+     * Specifies the `name` of the Switch.
+     */
+    name?: string;
+    /**
+     * Specifies the `accessKey` of the Switch.
+     */
+    accessKey?: string;
+    /**
+     * Sets the current value of the Switch ([see example]({% slug controlled_switch %})).
+     */
+    checked?: boolean;
+    /**
+     * Sets the `className` of the wrapping element of the Switch.
+     */
+    className?: string;
+    /**
+     * Sets the value of the Switch when it is initially displayed ([see example]({% slug default_state %})).
+     */
+    defaultChecked?: boolean;
+    /**
+     * Sets the default value of the Switch.
+     */
+    defaultValue?: any;
+    /**
+     * Disables the Switch when set to `true` ([see example]({% slug disabled_switch %})).
+     */
+    disabled?: boolean;
+    /**
+     * Sets the `dir` property of the wrapping element of the Switch.
+     */
+    dir?: string;
+    /**
+     * Sets the `id` of the Switch.
+     */
+    id?: string;
+    /**
+     * Configures the `size` of the Switch.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null&mdash;Does not set a size `className`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large' | string;
+    /**
+     * Configures the `trackRounded` of the Switch.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - full
+     * - circle
+     * - null&mdash;Does not set a trackRounded `className`.
+     *
+     * @default `full`
+     */
+    trackRounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
+    /**
+     * Configures the `thumbRounded` of the Switch.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - full
+     * - circle
+     * - null&mdash;Does not set a thumbRounded `className`.
+     *
+     * @default `circle`
+     */
+    thumbRounded?: null | 'small' | 'medium' | 'large' | 'full' | 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;
+    /**
+     * Changes the **Off** label([see example]({% slug labels_switch %})).
+     */
+    offLabel?: string;
+    /**
+     * Fires each time the Switch gets blurred.
+     */
+    onBlur?: (event: any) => void;
+    /**
+     * Fires each time the user selects a new value ([see example]({% slug controlled_switch %})).
+     */
+    onChange?: (event: SwitchChangeEvent) => void;
+    /**
+     * Fires each time the Switch component gets focused.
+     */
+    onFocus?: (event: any) => void;
+    /**
+     * Changes the **On** label ([see example]({% slug labels_switch %})).
+     */
+    onLabel?: string;
+    /**
+     * Specifies the [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of the component.
+     */
+    tabIndex?: number;
+    /**
+     * Sets the value of the Switch. It can either be of the primitive (string, number, boolean) or of the complex (array) type.
+     */
+    value?: string | number | string[] | boolean | null;
+    modelValue?: string | number | string[] | boolean | null;
+}
+/**
+ * @hidden
+ */
+export interface SwitchState {
+    _element: HTMLSpanElement | null;
+    _input: HTMLInputElement | null;
+    _id: string;
+    dir?: string;
+    defaultValidationMessage: LocalizationService;
+    eventTimeStamp?: number;
+}
+/**
+ * @hidden
+ */
+export interface SwitchComputed {
+}
+/**
+ * @hidden
+ */
+export interface SwitchMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface SwitchData {
+    valueDuringOnChange?: boolean;
+    currentChecked: boolean;
+    focused: boolean;
+}
+/**
+ * @hidden
+ */
+export interface SwitchAll extends Vue2type, SwitchMethods, SwitchData, SwitchComputed, SwitchState {
+}
+/**
+ * @hidden
+ */
+declare let SwitchVue2: ComponentOptions<SwitchAll, DefaultData<SwitchData>, DefaultMethods<SwitchAll>, SwitchComputed, RecordPropsDefinition<SwitchProps>>;
+/**
+ * Represents the [Kendo UI for Vue Native Switch component]({% slug overview_switch %}).
+ * Accepts properties of type [SwitchProps]({% slug api_inputs_switchprops %}).
+ * Obtaining the `ref` returns an object of type [SwitchHandle]({% slug api_inputs_switchhandle %}).
+ */
+declare const Switch: DefineComponent<SwitchProps, any, SwitchData, SwitchComputed, SwitchMethods, {}, {}, {}, string, SwitchProps, SwitchProps, {}>;
+export { Switch, SwitchVue2 };

package/dist/esm/switch/Switch.js

@@ -0,0 +1,342 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+import { guid, noop, Keys, getTabIndex, validatePackage, isRtl, kendoThemeMaps, setRef, getRef } from '@progress/kendo-vue-common';
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { messages, switchValidation } from './../messages.js';
+import { packageMetadata } from '../package-metadata.js';
+/**
+ * @hidden
+ */
+
+var SwitchVue2 = {
+  name: 'KendoSwitch',
+  model: {
+    event: 'changemodel'
+  },
+  // @ts-ignore
+  emits: {
+    'change': null,
+    'changemodel': null,
+    'update:modelValue': null,
+    'focus': null,
+    'blur': null
+  },
+  props: {
+    name: String,
+    accessKey: String,
+    checked: {
+      type: Boolean,
+      default: undefined
+    },
+    className: String,
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    defaultChecked: {
+      type: Boolean,
+      default: false
+    },
+    size: {
+      type: String,
+      default: 'medium',
+      validator: function validator(value) {
+        return [null, 'small', 'medium', 'large'].includes(value);
+      }
+    },
+    trackRounded: {
+      type: String,
+      default: 'full',
+      validator: function validator(value) {
+        return [null, 'small', 'medium', 'large', 'full'].includes(value);
+      }
+    },
+    thumbRounded: {
+      type: String,
+      default: 'full',
+      validator: function validator(value) {
+        return [null, 'small', 'medium', 'large', 'full'].includes(value);
+      }
+    },
+    dir: String,
+    id: String,
+    ariaLabelledBy: String,
+    ariaDescribedBy: String,
+    offLabel: {
+      type: String,
+      default: 'OFF'
+    },
+    onLabel: {
+      type: String,
+      default: 'ON'
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    tabIndex: Number,
+    valid: Boolean,
+    validityStyles: {
+      type: Boolean,
+      default: false
+    },
+    validationMessage: String,
+    value: {
+      type: [String, Number, Boolean],
+      default: undefined
+    },
+    modelValue: {
+      type: Boolean,
+      default: undefined
+    }
+  },
+  created: function created() {
+    validatePackage(packageMetadata);
+    this._id = guid();
+    this.defaultValidationMessage = provideLocalizationService(this);
+  },
+  data: function data() {
+    return {
+      currentChecked: this.$props.defaultChecked,
+      valueDuringOnChange: undefined,
+      focused: false,
+      currentDir: undefined
+    };
+  },
+  computed: {
+    computedValue: function computedValue() {
+      return this.valueDuringOnChange !== undefined ? this.valueDuringOnChange : this.$props.checked !== undefined ? this.$props.checked : this.$props.value !== undefined ? this.$props.value : this.$props.modelValue !== undefined ? this.$props.modelValue : this.currentChecked;
+    },
+    switchClassName: function switchClassName() {
+      var _a;
+
+      var isValid = !this.validityStyles || this.validity().valid;
+      var rounded = this.$props.trackRounded;
+      return _a = {
+        'k-switch': true
+      }, _a["k-switch-".concat(kendoThemeMaps.sizeMap[this.$props.size])] = this.$props.size, _a["k-rounded-".concat(kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded, _a['k-switch-on'] = this.computedValue, _a['k-switch-off'] = !this.computedValue, _a['k-focus'] = this.focused, _a['k-disabled'] = this.$props.disabled, _a['k-invalid'] = !isValid, _a;
+    },
+    switchTrackClass: function switchTrackClass() {
+      var _a;
+
+      var rounded = this.$props.trackRounded;
+      return _a = {
+        'k-switch-track': true
+      }, _a["k-rounded-".concat(kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded, _a;
+    },
+    switchThumbClass: function switchThumbClass() {
+      var _a;
+
+      var rounded = this.$props.thumbRounded;
+      return _a = {
+        'k-switch-thumb': true
+      }, _a["k-rounded-".concat(kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded, _a;
+    }
+  },
+  mounted: function mounted() {
+    this._element = getRef(this, 'element');
+    this.input = getRef(this, 'input');
+    this.currentDir = this.$props.dir !== undefined ? this.$props.dir : isRtl(this.$el) ? 'rtl' : 'ltr';
+    this.setValidity();
+  },
+  updated: function updated() {
+    this.setValidity();
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var _a = this.$props,
+        disabled = _a.disabled,
+        id = _a.id,
+        offLabel = _a.offLabel,
+        onLabel = _a.onLabel,
+        tabIndex = _a.tabIndex,
+        required = _a.required;
+    return h("span", {
+      "class": this.switchClassName,
+      dir: this.currentDir,
+      attrs: this.v3 ? undefined : {
+        dir: this.currentDir
+      },
+      onKeydown: this.handleKeyDown,
+      on: this.v3 ? undefined : {
+        "keydown": this.handleKeyDown,
+        "click": this.handleClick,
+        "focusout": this.handleWrapperBlur,
+        "focusin": this.handleWrapperFocus
+      },
+      onClick: this.handleClick,
+      onFocusout: this.handleWrapperBlur,
+      onFocusin: this.handleWrapperFocus
+    }, [h("span", {
+      "class": this.switchTrackClass,
+      id: id || this._id,
+      attrs: this.v3 ? undefined : {
+        id: id || this._id,
+        role: 'switch',
+        "aria-checked": this.computedValue,
+        "aria-disabled": disabled || undefined,
+        "aria-labelledby": this.$props.ariaLabelledBy,
+        "aria-describedby": this.$props.ariaDescribedBy,
+        tabindex: getTabIndex(tabIndex, disabled, undefined),
+        accesskey: this.$props.accessKey
+      },
+      role: 'switch',
+      "aria-checked": this.computedValue,
+      "aria-disabled": disabled || undefined,
+      "aria-labelledby": this.$props.ariaLabelledBy,
+      "aria-describedby": this.$props.ariaDescribedBy,
+      ref: setRef(this, 'element'),
+      tabindex: getTabIndex(tabIndex, disabled, undefined),
+      accesskey: this.$props.accessKey
+    }, [h("input", {
+      type: "checkbox",
+      attrs: this.v3 ? undefined : {
+        type: "checkbox",
+        tabindex: -1,
+        name: this.$props.name,
+        required: required !== undefined ? required : false,
+        "aria-hidden": true
+      },
+      checked: this.v3 ? this.$props.checked : null,
+      domProps: this.v3 ? undefined : {
+        "checked": this.$props.checked,
+        "value": this.computedValue
+      },
+      ref: setRef(this, 'input'),
+      tabindex: -1,
+      name: this.$props.name,
+      required: required !== undefined ? required : false,
+      "aria-hidden": true,
+      value: this.v3 ? this.computedValue : null,
+      style: {
+        opacity: 0,
+        width: 1,
+        border: 0,
+        zIndex: -1,
+        position: 'absolute',
+        left: '50%'
+      },
+      onChange: noop,
+      on: this.v3 ? undefined : {
+        "change": noop
+      }
+    }), h("span", {
+      "class": 'k-switch-label-on'
+    }, [onLabel]), h("span", {
+      "class": 'k-switch-label-off'
+    }, [offLabel]), h("span", {
+      "class": 'k-switch-thumb-wrap'
+    }, [h("span", {
+      "class": this.switchThumbClass
+    })])])]);
+  },
+  methods: {
+    focus: function focus() {
+      if (this._element) {
+        this._element.focus();
+      }
+    },
+    element: function element() {
+      return this._element;
+    },
+    validity: function validity() {
+      var customError = this.$props.validationMessage !== undefined;
+      var isValid = this.$props.valid !== undefined ? this.$props.valid : !this.$props.required ? true : this.computedValue ? true : false;
+      var valid = this.$props.valid !== undefined ? this.$props.valid : isValid;
+      return {
+        customError: customError,
+        valid: valid,
+        valueMissing: this.computedValue === null
+      };
+    },
+    setValidity: function setValidity() {
+      if (this.input && this.input.setCustomValidity) {
+        this.input.setCustomValidity(this.validity().valid ? '' : this.$props.validationMessage || this.defaultValidationMessage.toLanguageString(switchValidation, messages[switchValidation]));
+      }
+    },
+    limit: function limit(offset, drag, wrapper) {
+      var wrapperWidth = wrapper.offsetWidth;
+      var margin = drag.offsetWidth;
+
+      if (offset < 0) {
+        return 0;
+      } else if (offset > wrapperWidth - margin) {
+        return wrapperWidth - margin;
+      }
+
+      return offset;
+    },
+    toggle: function toggle(value, event) {
+      this.currentChecked = value;
+      this.valueDuringOnChange = value;
+      this.$emit('changemodel', value);
+      this.$emit('update:modelValue', value);
+      this.$emit('change', {
+        event: event,
+        component: this,
+        target: {
+          value: value
+        },
+        name: this.$props.name,
+        value: value,
+        validity: this.validity()
+      });
+      this.valueDuringOnChange = undefined;
+    },
+    handleClick: function handleClick(event) {
+      if (this.eventTimeStamp === event.timeStamp) {
+        // This is guard against the case when wrapped in label, click event is emmited twice
+        return;
+      }
+
+      this.eventTimeStamp = event.timeStamp;
+      this.toggle(!this.computedValue, event);
+    },
+    handleKeyDown: function handleKeyDown(event) {
+      if (this.$props.disabled) {
+        return;
+      }
+
+      var keyCode = event.keyCode;
+
+      if (keyCode === Keys.space || keyCode === Keys.enter) {
+        this.toggle(!this.computedValue, event);
+      }
+    },
+    handleWrapperFocus: function handleWrapperFocus(event) {
+      if (this.$props.disabled) {
+        return;
+      }
+
+      this.focused = true;
+      this.$emit('focus', event);
+    },
+    handleWrapperBlur: function handleWrapperBlur(event) {
+      if (this.$props.disabled) {
+        return;
+      }
+
+      this.focused = false;
+      this.$emit('blur', event);
+    }
+  }
+};
+/**
+ * Represents the [Kendo UI for Vue Native Switch component]({% slug overview_switch %}).
+ * Accepts properties of type [SwitchProps]({% slug api_inputs_switchprops %}).
+ * Obtaining the `ref` returns an object of type [SwitchHandle]({% slug api_inputs_switchhandle %}).
+ */
+
+var Switch = SwitchVue2;
+export { Switch, SwitchVue2 };