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

package/dist/esm/radiobutton/RadioButton.d.ts

@@ -0,0 +1,55 @@
+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 { RadioButtonProps } from './interfaces/RadioButtonProps';
+/**
+ * @hidden
+ */
+export interface RadioButtonHandle {
+    input: HTMLInputElement | null;
+    focus: any;
+}
+/**
+ * @hidden
+ */
+export interface RadioButtonData {
+}
+export interface RadioButtonState {
+    calculatedId: string;
+    input: any;
+    inputRef: any;
+    v3: boolean;
+}
+/**
+ * @hidden
+ */
+export interface RadioButtonMethods {
+    [key: string]: any;
+    focusElement: () => void;
+    handleChange: (e: any) => void;
+    handleFocus: (e: any) => void;
+    handleBlur: (e: any) => void;
+}
+/**
+ * @hidden
+ */
+export interface RadioButtonComputed {
+    [key: string]: any;
+    inputClassName: object;
+}
+/**
+ * @hidden
+ */
+export interface RadioButtonAll extends Vue2type, RadioButtonMethods, RadioButtonComputed, RadioButtonState, RadioButtonData {
+}
+/**
+ * @hidden
+ */
+declare let RadioButtonVue2: ComponentOptions<RadioButtonAll, DefaultData<RadioButtonData>, DefaultMethods<RadioButtonAll>, RadioButtonComputed, RecordPropsDefinition<RadioButtonProps>>;
+/**
+ * @hidden
+ */
+declare let RadioButton: DefineComponent<RadioButtonProps, any, RadioButtonData, RadioButtonComputed, RadioButtonMethods, {}, {}, {}, string, RadioButtonProps, RadioButtonProps, {}>;
+export { RadioButton, RadioButtonVue2 };

package/dist/esm/radiobutton/RadioButton.js

@@ -0,0 +1,195 @@
+// @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 { guid, getTabIndex, getDefaultSlots, templateRendering, getTemplate, getListeners, kendoThemeMaps, setRef, getRef } from '@progress/kendo-vue-common';
+import { validatePackage } from '@progress/kendo-vue-common';
+import { packageMetadata } from '../package-metadata.js';
+/**
+ * @hidden
+ */
+
+var RadioButtonVue2 = {
+  name: 'KendoRadioButton',
+  props: {
+    ariaDescribedBy: String,
+    checked: Boolean,
+    disabled: Boolean,
+    className: String,
+    content: [String, Number, Boolean, Object],
+    id: String,
+    label: String,
+    labelRender: [String, Number, Boolean, Object],
+    item: [String, Number, Boolean, Object],
+    labelPlacement: String,
+    name: String,
+    tag: {
+      type: String,
+      default: 'div'
+    },
+    size: {
+      type: String,
+      default: 'medium',
+      validator: function validator(value) {
+        return [null, 'small', 'medium', 'large'].includes(value);
+      }
+    },
+    tabIndex: Number,
+    value: [String, Number, Object],
+    valid: {
+      type: Boolean,
+      default: undefined
+    }
+  },
+  // @ts-ignore
+  emits: {
+    change: null,
+    focus: null,
+    blur: null
+  },
+  created: function created() {
+    this.calculatedId = guid();
+    validatePackage(packageMetadata);
+  },
+  mounted: function mounted() {
+    this.input = getRef(this, 'input');
+  },
+  computed: {
+    inputClassName: function inputClassName() {
+      var _a;
+
+      return _a = {
+        'k-radio': true
+      }, _a["k-radio-".concat(kendoThemeMaps.sizeMap[this.$props.size])] = this.$props.size, _a['k-invalid'] = this.$props.valid === false, _a[this.$props.className] = this.$props.className, _a;
+    }
+  },
+  methods: {
+    focusElement: function focusElement() {
+      if (this.input) {
+        this.input.focus();
+      }
+    },
+    handleChange: function handleChange(event) {
+      this.$emit('change', {
+        event: event,
+        value: this.$props.value
+      });
+    },
+    handleFocus: function handleFocus(event) {
+      if (!this.$props.disabled) {
+        this.$emit('focus', event, undefined);
+      }
+    },
+    handleBlur: function handleBlur(event) {
+      if (!this.$props.disabled) {
+        this.$emit('blur', event, undefined);
+      }
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    var inputRef = ref(null);
+    return {
+      v3: v3,
+      inputRef: inputRef
+    };
+  },
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var defaultSlot = getDefaultSlots(this);
+    var _a = this.$props,
+        ariaDescribedBy = _a.ariaDescribedBy,
+        checked = _a.checked,
+        disabled = _a.disabled,
+        id = _a.id,
+        label = _a.label,
+        labelRender = _a.labelRender,
+        labelPlacement = _a.labelPlacement,
+        name = _a.name,
+        tabIndex = _a.tabIndex,
+        value = _a.value,
+        tag = _a.tag;
+    var renderedLabel = label;
+
+    if (labelRender) {
+      var renderTemplate = labelRender ? templateRendering.call(this, labelRender, getListeners.call(this)) : null;
+      renderedLabel = getTemplate.call(this, {
+        h: h,
+        template: renderTemplate
+      });
+    }
+
+    var content = getTemplate.call(this, {
+      h: h,
+      template: this.$props.content
+    });
+    var radioButtonLabel = renderedLabel !== undefined ? h("label", {
+      "class": 'k-radio-label',
+      "for": id || this.calculatedId,
+      attrs: this.v3 ? undefined : {
+        "for": id || this.calculatedId,
+        "aria-label": label
+      },
+      style: {
+        userSelect: 'none'
+      },
+      "aria-label": label
+    }, [renderedLabel]) : null;
+    var radio = h("input", {
+      type: 'radio',
+      attrs: this.v3 ? undefined : {
+        type: 'radio',
+        id: id || this.calculatedId,
+        name: name,
+        disabled: disabled,
+        tabindex: getTabIndex(tabIndex, disabled),
+        "aria-describedby": ariaDescribedBy
+      },
+      id: id || this.calculatedId,
+      name: name,
+      "class": this.inputClassName,
+      ref: setRef(this, 'input'),
+      disabled: disabled,
+      tabindex: getTabIndex(tabIndex, disabled),
+      checked: this.v3 ? checked : null,
+      domProps: this.v3 ? undefined : {
+        "checked": checked,
+        "value": value
+      },
+      style: this.$attrs.style,
+      "aria-describedby": ariaDescribedBy,
+      value: this.v3 ? value : null,
+      onChange: this.handleChange,
+      on: this.v3 ? undefined : {
+        "change": this.handleChange,
+        "focus": this.handleFocus,
+        "blur": this.handleBlur
+      },
+      onFocus: this.handleFocus,
+      onBlur: this.handleBlur
+    });
+    var defaultRendering = labelPlacement === 'before' ? h(tag, [radioButtonLabel, radio, content, defaultSlot]) : h(tag, [radio, radioButtonLabel, content, defaultSlot]);
+    return getTemplate.call(this, {
+      h: h,
+      template: this.$props.item,
+      defaultRendering: defaultRendering,
+      defaultSlots: defaultSlot,
+      additionalListeners: {
+        change: this.handleChange,
+        focus: this.handleFocus,
+        blur: this.handleBlur
+      },
+      additionalProps: {}
+    });
+  }
+};
+/**
+ * @hidden
+ */
+
+var RadioButton = RadioButtonVue2;
+export { RadioButton, RadioButtonVue2 };

package/dist/esm/radiobutton/RadioGroup.d.ts

@@ -0,0 +1,57 @@
+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 { RadioGroupProps } from './interfaces/RadioGroupProps';
+/**
+ * @hidden
+ */
+export interface RadioGroupHandle {
+    element: HTMLUListElement | null;
+    focus: any;
+}
+/**
+ * @hidden
+ */
+export interface RadioGroupData {
+    stateChecked: any;
+    rtl: boolean;
+}
+export interface RadioGroupState {
+    radioGroupName: string;
+    v3: boolean;
+}
+/**
+ * @hidden
+ */
+export interface RadioGroupMethods {
+    [key: string]: any;
+    focusElement: () => void;
+    handleChange: (e: any) => void;
+    handleFocus: (e: any) => void;
+    handleBlur: (e: any) => void;
+}
+/**
+ * @hidden
+ */
+export interface RadioGroupComputed {
+    [key: string]: any;
+    checkedRadioValue: any;
+    radioGroupClasses: object;
+    currentDir: any;
+}
+/**
+ * @hidden
+ */
+export interface RadioGroupAll extends Vue2type, RadioGroupMethods, RadioGroupComputed, RadioGroupState, RadioGroupData {
+}
+/**
+ * @hidden
+ */
+declare let RadioGroupVue2: ComponentOptions<RadioGroupAll, DefaultData<RadioGroupData>, DefaultMethods<RadioGroupAll>, RadioGroupComputed, RecordPropsDefinition<RadioGroupProps>>;
+/**
+ * @hidden
+ */
+declare let RadioGroup: DefineComponent<RadioGroupProps, any, RadioGroupData, RadioGroupComputed, RadioGroupMethods, {}, {}, {}, string, RadioGroupProps, RadioGroupProps, {}>;
+export { RadioGroup, RadioGroupVue2 };

package/dist/esm/radiobutton/RadioGroup.js

@@ -0,0 +1,218 @@
+// @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 { RadioButton } from './RadioButton.js';
+import { guid, classNames, focusFirstFocusableChild, validatePackage, isRtl, templateRendering, getListeners } from '@progress/kendo-vue-common';
+import { packageMetadata } from '../package-metadata.js';
+/**
+ * @hidden
+ */
+
+var RadioGroupVue2 = {
+  name: 'KendoRadioGroup',
+  props: {
+    ariaLabelledBy: String,
+    ariaDescribedBy: String,
+    dataItems: Array,
+    defaultValue: [String, Number, Object],
+    dir: String,
+    disabled: Boolean,
+    labelPlacement: String,
+    item: {
+      type: String,
+      default: undefined
+    },
+    layout: {
+      type: String,
+      default: 'vertical',
+      validator: function validator(value) {
+        return ['horizontal', 'vertical'].includes(value);
+      }
+    },
+    name: String,
+    modelValue: [String, Number, Object],
+    value: [String, Number, Object],
+    valid: {
+      type: Boolean,
+      default: undefined
+    }
+  },
+  // @ts-ignore
+  emits: {
+    'changemodel': null,
+    'update:modelValue': null,
+    change: null,
+    focus: null,
+    blur: null
+  },
+  model: {
+    event: 'changemodel'
+  },
+  created: function created() {
+    this.radioGroupName = guid();
+    validatePackage(packageMetadata);
+    this.stateChecked = this.$props.defaultValue;
+  },
+  watch: {
+    value: function value(newValue) {
+      if (newValue === undefined) {
+        this.stateChecked = this.$props.defaultValue;
+      }
+    }
+  },
+  mounted: function mounted() {
+    this.rtl = isRtl(this.$el);
+  },
+  computed: {
+    radioGroupClasses: function radioGroupClasses() {
+      var layout = this.$props.layout;
+      return {
+        'k-radio-list': true,
+        'k-list-horizontal': layout === 'horizontal',
+        'k-list-vertical': layout === 'vertical' || layout === undefined
+      };
+    },
+    checkedRadioValue: function checkedRadioValue() {
+      var value = this.$props.value;
+      return value !== undefined ? value : this.$props.modelValue !== undefined ? this.$props.modelValue : this.stateChecked;
+    },
+    currentDir: function currentDir() {
+      var dir = this.$props.dir;
+      return dir ? dir : this.rtl ? 'rtl' : undefined;
+    }
+  },
+  data: function data() {
+    return {
+      rtl: false,
+      stateChecked: undefined
+    };
+  },
+  methods: {
+    focusElement: function focusElement() {
+      if (this.$el) {
+        focusFirstFocusableChild(this.$el);
+      }
+    },
+    handleChange: function handleChange(event) {
+      var currentValue = event.value;
+
+      if (!(this.$props.value !== undefined) && !this.$props.disabled) {
+        this.stateChecked = currentValue;
+      }
+
+      if (!this.$props.disabled) {
+        this.$emit('changemodel', currentValue);
+        this.$emit('update:modelValue', currentValue);
+        this.$emit('change', {
+          event: event,
+          value: currentValue
+        });
+      }
+    },
+    handleFocus: function handleFocus(event) {
+      if (!this.$props.disabled) {
+        this.$emit('focus', event);
+      }
+    },
+    handleBlur: function handleBlur(event) {
+      if (!this.$props.disabled) {
+        this.$emit('blur', event);
+      }
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    var inputRef = ref(null);
+    return {
+      v3: v3,
+      inputRef: inputRef
+    };
+  },
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var _a = this.$props,
+        ariaLabelledBy = _a.ariaLabelledBy,
+        ariaDescribedBy = _a.ariaDescribedBy,
+        dataItems = _a.dataItems,
+        disabled = _a.disabled,
+        name = _a.name,
+        labelPlacement = _a.labelPlacement,
+        valid = _a.valid;
+    var radioOptions = dataItems && dataItems.map(function (option, index) {
+      var isCurrentlyChecked = this.checkedRadioValue === option.value;
+      var noOptionChecked = this.checkedRadioValue === null || this.checkedRadioValue === undefined;
+      var item = templateRendering.call(this, this.$props.item || option.item, getListeners.call(this));
+      return (// @ts-ignore function children
+        h(RadioButton, {
+          "class": classNames('k-radio-item', {
+            'k-disabled': option.disabled || disabled
+          }),
+          style: option.style,
+          key: index,
+          item: item,
+          attrs: this.v3 ? undefined : {
+            item: item,
+            role: 'radio',
+            tag: 'li',
+            valid: valid,
+            className: option.className,
+            label: option.label,
+            value: option.value,
+            checked: isCurrentlyChecked,
+            disabled: option.disabled || disabled ? true : false,
+            labelPlacement: option.labelPlacement ? option.labelPlacement : labelPlacement,
+            tabIndex: option.tabIndex ? option.tabIndex : noOptionChecked && index === 0 || isCurrentlyChecked ? 0 : -1,
+            index: index,
+            name: name || option.name || this.radioGroupName
+          },
+          role: 'radio',
+          tag: 'li',
+          valid: valid,
+          className: option.className,
+          label: option.label,
+          value: option.value,
+          checked: isCurrentlyChecked,
+          disabled: option.disabled || disabled ? true : false,
+          labelPlacement: option.labelPlacement ? option.labelPlacement : labelPlacement,
+          tabIndex: option.tabIndex ? option.tabIndex : noOptionChecked && index === 0 || isCurrentlyChecked ? 0 : -1,
+          index: index,
+          name: name || option.name || this.radioGroupName,
+          onChange: this.handleChange,
+          on: this.v3 ? undefined : {
+            "change": this.handleChange,
+            "focus": this.handleFocus,
+            "blur": this.handleBlur
+          },
+          onFocus: this.handleFocus,
+          onBlur: this.handleBlur
+        }, this.v3 ? function () {
+          return [option.content];
+        } : [option.content])
+      );
+    }, this);
+    return h("ul", {
+      role: "radiogroup",
+      attrs: this.v3 ? undefined : {
+        role: "radiogroup",
+        dir: this.currentDir,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-describedby": ariaDescribedBy
+      },
+      "class": this.radioGroupClasses,
+      dir: this.currentDir,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": ariaDescribedBy
+    }, [radioOptions]);
+  }
+};
+/**
+ * @hidden
+ */
+
+var RadioGroup = RadioGroupVue2;
+export { RadioGroup, RadioGroupVue2 };

package/dist/esm/radiobutton/interfaces/RadioButtonBlurEvent.d.ts

@@ -0,0 +1,5 @@
+/**
+ * The arguments for the `onBlur` RadioButton event.
+ */
+export interface RadioButtonBlurEvent {
+}

package/dist/esm/radiobutton/interfaces/RadioButtonBlurEvent.js

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

package/dist/esm/radiobutton/interfaces/RadioButtonChangeEvent.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The arguments for the `onChange` RadioButton event.
+ */
+export interface RadioButtonChangeEvent {
+    /**
+     * The value of the selected RadioButton.
+     */
+    value: any;
+}

package/dist/esm/radiobutton/interfaces/RadioButtonChangeEvent.js

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

package/dist/esm/radiobutton/interfaces/RadioButtonFocusEvent.d.ts

@@ -0,0 +1,5 @@
+/**
+ * The arguments for the `onFocus` RadioButton event.
+ */
+export interface RadioButtonFocusEvent {
+}

package/dist/esm/radiobutton/interfaces/RadioButtonFocusEvent.js

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

package/dist/esm/radiobutton/interfaces/RadioButtonProps.d.ts

@@ -0,0 +1,107 @@
+import { RadioButtonBlurEvent } from './RadioButtonBlurEvent';
+import { RadioButtonChangeEvent } from './RadioButtonChangeEvent';
+import { RadioButtonFocusEvent } from './RadioButtonFocusEvent';
+/**
+ * Represents the props of the [Kendo UI for Vue RadioButton component]({% slug overview_radiobutton %}).
+ * Extends the [native input props](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement).
+ */
+export interface RadioButtonProps {
+    /**
+     * 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;
+    /**
+     * Specifies if the Radio button is checked.
+     */
+    checked?: boolean;
+    /**
+     * Specifies the class applied to the input element.
+     */
+    className?: string;
+    /**
+     * Specifies if the Radio button is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Specifies the current index of the Radio button.
+     */
+    index?: number;
+    /**
+     * Sets the `id` of the Radio button.
+     */
+    id?: string;
+    /**
+     * Sets the label of the Radio button ([see example]({% slug labels_radiobutton %})).
+     */
+    label?: string;
+    /**
+     * Sets the label render template of the Radio button component.
+     * Accepts a slot name, a `render` function, or a Vue component.
+     */
+    labelRender?: any;
+    /**
+     * Sets the item content template of the Radio button component.
+     * Accepts a slot name, a `render` function, or a Vue component.
+     */
+    content?: any;
+    /**
+     * Sets the item render template of the Radio button component.
+     * Accepts a slot name, a `render` function, or a Vue component.
+     */
+    item?: any;
+    /**
+     * Sets the label position of the Radio button ([see example]({% slug labels_radiobutton %})).
+     * Accepts two options: `before` or `after`. Defaults to `after`.
+     */
+    labelPlacement?: string;
+    /**
+     * Sets the `name` property of the Radio button.
+     */
+    name?: string;
+    /**
+     * Sets the `tag` property of the Radio button wrapping element.
+     */
+    tag?: string;
+    /**
+     * Configures the `size` of the RadioButton.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null—Does not set a size `class`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large' | string;
+    /**
+     * Sets the `tabIndex` property of the Radio button.
+     * Defaults to `0`.
+     */
+    tabIndex?: number;
+    /**
+     * Overrides the validity state of the component.
+     * If `valid` is set, the `required` property will be ignored.
+     *
+     * This property is part of the [FormComponentProps]({% slug api_common_formcomponentprops %}) interface.
+     */
+    valid?: boolean;
+    /**
+     * Sets the value to be submitted.
+     */
+    value?: any;
+    /**
+     * The event handler that will be fired when the changes the selected value.
+     */
+    onChange?: (event: RadioButtonChangeEvent) => void;
+    /**
+     * The event handler that will be fired when RadioButton is focused.
+     */
+    onFocus?: (event: RadioButtonFocusEvent) => void;
+    /**
+     * The event handler that will be fired when RadioButton is blurred.
+     */
+    onBlur?: (event: RadioButtonBlurEvent) => void;
+}

package/dist/esm/radiobutton/interfaces/RadioButtonProps.js

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

package/dist/esm/radiobutton/interfaces/RadioGroupChangeEvent.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The arguments for the `onChange` RadioGroup event.
+ */
+export interface RadioGroupChangeEvent {
+    /**
+     * The value of the selected RadioButton.
+     */
+    value: any;
+}

package/dist/esm/radiobutton/interfaces/RadioGroupChangeEvent.js

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

package/dist/esm/radiobutton/interfaces/RadioGroupFocusEvent.d.ts

@@ -0,0 +1,5 @@
+/**
+ * The arguments for the `onFocus` RadioGroup event.
+ */
+export interface RadioGroupFocusEvent {
+}

package/dist/esm/radiobutton/interfaces/RadioGroupFocusEvent.js

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