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

package/dist/esm/Button.js

@@ -0,0 +1,280 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+import { classNames, getDefaultSlots, validatePackage, kendoThemeMaps } from '@progress/kendo-vue-common';
+import { packageMetadata } from './package-metadata.js';
+import util from './util.js';
+var styles = util.styles;
+/**
+ * @hidden
+ */
+
+var ButtonVue2 = {
+  name: 'KendoButton',
+  // @ts-ignore
+  emits: {
+    click: null,
+    mousedown: null,
+    mouseup: null,
+    pointerdown: null,
+    pointerup: null,
+    focus: null,
+    blur: null,
+    keypress: null,
+    keydown: null
+  },
+  props: {
+    ariaLabel: String,
+    dir: String,
+    selected: {
+      type: Boolean,
+      default: undefined
+    },
+    togglable: {
+      type: Boolean,
+      default: false
+    },
+    icon: {
+      type: String,
+      default: function _default() {
+        return undefined;
+      }
+    },
+    iconClass: {
+      type: String,
+      default: function _default() {
+        return undefined;
+      }
+    },
+    imageUrl: {
+      type: String,
+      default: function _default() {
+        return undefined;
+      }
+    },
+    imageAlt: String,
+    disabled: {
+      type: Boolean,
+      default: undefined
+    },
+    size: {
+      type: String,
+      default: 'medium'
+    },
+    shape: {
+      type: String,
+      default: 'rectangle',
+      validator: function validator(value) {
+        return [null, 'rectangle', 'square'].includes(value);
+      }
+    },
+    rounded: {
+      type: String,
+      default: 'medium'
+    },
+    fillMode: {
+      type: String,
+      default: 'solid'
+    },
+    // eslint-disable-next-line max-len
+    themeColor: {
+      type: String,
+      default: 'base'
+    }
+  },
+  created: function created() {
+    validatePackage(packageMetadata);
+    this.currentActive = this.$props.togglable === true && this.$props.selected === true;
+    this._activeTemp = undefined;
+  },
+  data: function data() {
+    return {
+      currentActive: null
+    };
+  },
+  computed: {
+    computedSelected: function computedSelected() {
+      return this._activeTemp !== undefined ? this._activeTemp : this.$props.selected !== undefined ? this.$props.selected : this.currentActive;
+    },
+    buttonClasses: function buttonClasses() {
+      var _a;
+
+      var _b = this.$props,
+          disabled = _b.disabled,
+          icon = _b.icon,
+          iconClass = _b.iconClass,
+          imageUrl = _b.imageUrl,
+          dir = _b.dir,
+          size = _b.size,
+          shape = _b.shape,
+          rounded = _b.rounded,
+          fillMode = _b.fillMode,
+          themeColor = _b.themeColor;
+      var hasIcon = icon !== undefined || iconClass !== undefined || imageUrl !== undefined;
+      var defaultSlot = getDefaultSlots(this);
+      var hasChildren = defaultSlot;
+      return _a = {}, _a[styles.button] = true, _a["k-button-".concat(kendoThemeMaps.sizeMap[size] || size)] = size, _a["k-button-".concat(shape)] = shape && shape !== 'rectangle', _a["k-rounded-".concat(kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded, _a['k-icon-button'] = !hasChildren && hasIcon, _a['k-disabled'] = disabled, _a['k-selected'] = this.computedSelected, _a['k-rtl'] = dir === 'rtl', _a["k-button-".concat(fillMode)] = fillMode, _a["k-button-".concat(fillMode, "-").concat(themeColor)] = fillMode && themeColor, _a;
+    }
+  },
+  updated: function updated() {
+    if (this.$props.togglable && this.$props.selected !== undefined && this.$props.selected !== this.currentActive) {
+      this.currentActive = this.$props.selected;
+    }
+  },
+  methods: {
+    focus: function focus(e) {
+      this.$el.focus(e);
+    },
+    toggleIfApplicable: function toggleIfApplicable() {
+      if (!this.disabled && this.$props.togglable && this.$props.selected === undefined) {
+        var active = !this.currentActive;
+        this._activeTemp = active;
+        this.currentActive = active;
+        this._activeTemp = undefined;
+      }
+    },
+    handleClick: function handleClick(event) {
+      this.toggleIfApplicable();
+
+      if (!this.disabled) {
+        this.$emit('click', event);
+      }
+    },
+    handleMouseDown: function handleMouseDown(event) {
+      if (!this.disabled) {
+        this.$emit('mousedown', event);
+      }
+    },
+    handlePointerDown: function handlePointerDown(event) {
+      if (!this.disabled) {
+        this.$emit('pointerdown', event);
+      }
+    },
+    handleMouseUp: function handleMouseUp(event) {
+      if (!this.disabled) {
+        this.$emit('mouseup', event);
+      }
+    },
+    handlePointerUp: function handlePointerUp(event) {
+      if (!this.disabled) {
+        this.$emit('pointerup', event);
+      }
+    },
+    handleFocus: function handleFocus(event) {
+      if (!this.disabled) {
+        this.$emit('focus', event);
+      }
+    },
+    handleBlur: function handleBlur(event) {
+      if (!this.disabled) {
+        this.$emit('blur', event);
+      }
+    },
+    handleKeypress: function handleKeypress(event) {
+      if (!this.disabled) {
+        this.$emit('keypress', event);
+      }
+    },
+    handleKeydown: function handleKeydown(event) {
+      if (!this.disabled) {
+        this.$emit('keydown', event);
+      }
+    }
+  },
+  // @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,
+        togglable = _a.togglable,
+        icon = _a.icon,
+        iconClass = _a.iconClass,
+        imageUrl = _a.imageUrl,
+        imageAlt = _a.imageAlt;
+    var defaultSlot = getDefaultSlots(this);
+
+    var iconElement = function iconElement() {
+      if (imageUrl) {
+        return h("img", {
+          role: "presentation",
+          attrs: this.v3 ? undefined : {
+            role: "presentation",
+            alt: imageAlt,
+            src: imageUrl
+          },
+          "class": 'k-image',
+          alt: imageAlt,
+          src: imageUrl
+        });
+      } else if (icon) {
+        var iconClasses = classNames('k-icon', 'k-button-icon', 'k-i-' + icon);
+        return h("span", {
+          role: "presentation",
+          attrs: this.v3 ? undefined : {
+            role: "presentation"
+          },
+          "class": iconClasses
+        });
+      } else if (iconClass) {
+        return h("span", {
+          role: "presentation",
+          attrs: this.v3 ? undefined : {
+            role: "presentation"
+          },
+          "class": iconClass
+        });
+      }
+
+      return null;
+    };
+
+    return h("button", {
+      "class": this.buttonClasses,
+      onClick: this.handleClick,
+      on: this.v3 ? undefined : {
+        "click": this.handleClick,
+        "mousedown": this.handleMouseDown,
+        "mouseup": this.handleMouseUp,
+        "pointerdown": this.handlePointerDown,
+        "pointerup": this.handlePointerUp,
+        "focus": this.handleFocus,
+        "blur": this.handleBlur,
+        "keypress": this.handleKeypress,
+        "keydown": this.handleKeydown
+      },
+      onMousedown: this.handleMouseDown,
+      onMouseup: this.handleMouseUp,
+      onPointerdown: this.handlePointerDown,
+      onPointerup: this.handlePointerUp,
+      onFocus: this.handleFocus,
+      onBlur: this.handleBlur,
+      onKeypress: this.handleKeypress,
+      onKeydown: this.handleKeydown // Accessibility properties
+      ,
+      role: togglable ? 'checkbox' : undefined,
+      attrs: this.v3 ? undefined : {
+        role: togglable ? 'checkbox' : undefined,
+        "aria-label": this.ariaLabel,
+        "aria-disabled": this.$props.disabled || undefined,
+        "aria-pressed": togglable ? this.currentActive ? true : undefined : undefined
+      },
+      "aria-label": this.ariaLabel,
+      "aria-disabled": this.$props.disabled || undefined,
+      "aria-pressed": togglable ? this.currentActive ? true : undefined : undefined
+    }, [iconElement.call(this), defaultSlot]);
+  }
+};
+/**
+ * @hidden
+ */
+
+var Button = ButtonVue2;
+export { Button, ButtonVue2 };

package/dist/esm/ButtonGroup.d.ts

@@ -0,0 +1,49 @@
+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 { ButtonGroupInterface } from './ButtonGroupInterface';
+/**
+ * Represents the props of the [Kendo UI for Vue ButtonGroup component]({% slug overview_buttongroup %}).
+ */
+export interface ButtonGroupProps extends ButtonGroupInterface {
+    /**
+     * Sets the `className` of the ButtonGroup component.
+     */
+    className?: string;
+}
+/**
+ * @hidden
+ */
+export interface ButtonGroupState {
+    v3: boolean;
+}
+/**
+ * @hidden
+ */
+export interface ButtonGroupMethods {
+    [key: string]: any;
+    mapButtons: (children: any) => any;
+    renderButton: (child: any, index: number, isLast: boolean, isRtl: boolean) => any;
+    isValidButton: (child: any) => any;
+}
+/**
+ * @hidden
+ */
+export interface ButtonGroupData {
+}
+/**
+ * @hidden
+ */
+export interface ButtonGroupAll extends Vue2type, ButtonGroupMethods, ButtonGroupData, ButtonGroupState {
+}
+/**
+ * @hidden
+ */
+declare let ButtonGroupVue2: ComponentOptions<ButtonGroupAll, DefaultData<ButtonGroupData>, DefaultMethods<ButtonGroupAll>, {}, RecordPropsDefinition<ButtonGroupProps>>;
+/**
+ * @hidden
+ */
+declare const ButtonGroup: DefineComponent<ButtonGroupProps, any, ButtonGroupData, {}, ButtonGroupMethods, {}, {}, {}, string, ButtonGroupProps, ButtonGroupProps, {}>;
+export { ButtonGroup, ButtonGroupVue2 };

package/dist/esm/ButtonGroup.js

@@ -0,0 +1,106 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+import { classNames, getDefaultSlots, validatePackage } from '@progress/kendo-vue-common';
+import { ButtonWrap } from './ButtonWrap.js';
+import { packageMetadata } from './package-metadata.js';
+import util from './util.js';
+var styles = util.styles;
+/**
+ * @hidden
+ */
+
+var ButtonGroupVue2 = {
+  name: 'KendoButtonGroup',
+  props: {
+    disabled: {
+      type: Boolean,
+      default: undefined
+    },
+    width: String,
+    dir: {
+      type: String,
+      default: function _default() {
+        return undefined;
+      }
+    }
+  },
+  created: function created() {
+    validatePackage(packageMetadata);
+  },
+  // @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 defaultSlot = getDefaultSlots(this);
+
+    var renderButton = function renderButton(child, index, isLast, isRtl) {
+      var _a;
+
+      var className = classNames((_a = {}, _a[styles['state-disabled']] = this.$props.disabled, _a[styles['group-start']] = isRtl ? isLast : index === 0, _a[styles['group-end']] = isRtl ? index === 0 : isLast, _a));
+      return h(ButtonWrap, {
+        class: className,
+        attrs: this.v3 ? undefined : {
+          'aria-disabled': this.$props.disabled
+        },
+        'aria-disabled': this.$props.disabled
+      }, this.v3 ? function () {
+        return [child];
+      } : [child]);
+    };
+
+    var mapButtons = function mapButtons(children) {
+      var _this = this;
+
+      var count = children.length;
+      var rtl = this.$props.dir !== undefined ? this.$props.dir === 'rtl' : this.$el && getComputedStyle(this.$el).direction === 'rtl' || false;
+      return children.map(function (child, index) {
+        if (_this.isValidButton(child)) {
+          return renderButton.call(_this, child, index, index === count - 1, rtl);
+        }
+
+        return child;
+      });
+    };
+
+    var groupClasses = classNames([styles['button-group']], (_a = {}, _a['k-disabled'] = this.$props.disabled, _a[styles['button-group-stretched']] = !!this.$props.width, _a));
+    return h("div", {
+      style: {
+        width: this.width
+      },
+      dir: this.$props.dir // Accessibility properties
+      ,
+      attrs: this.v3 ? undefined : {
+        dir: this.$props.dir,
+        role: 'group',
+        "aria-disabled": this.$props.disabled,
+        "aria-multiselectable": true
+      },
+      role: 'group',
+      "aria-disabled": this.$props.disabled,
+      "aria-multiselectable": true,
+      "class": groupClasses
+    }, [mapButtons.call(this, defaultSlot)]);
+  },
+  methods: {
+    isValidButton: function isValidButton(child) {
+      return child && child.tag && child.tag.toLowerCase().indexOf('button') !== -1 || child.componentOptions && child.componentOptions.tag && child.componentOptions.tag.toLowerCase().indexOf('button') !== -1 || child.type && child.type.name && child.type.name.toLowerCase().indexOf('kendobutton') !== -1;
+    }
+  }
+};
+/**
+ * @hidden
+ */
+
+var ButtonGroup = ButtonGroupVue2;
+export { ButtonGroup, ButtonGroupVue2 };

package/dist/esm/ButtonGroupInterface.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Represents the properties which can be set to a ButtonGroup.
+ */
+export interface ButtonGroupInterface {
+    /**
+     * By default, the ButtonGroup is enabled ([see example]({% slug disabledstate_buttongroup %})). To disable the whole group of buttons,
+     * set its `disabled` attribute to `true`. To disable a specific button, set its own `disabled` attribute to `true` and leave the `disabled` attribute of the ButtonGroup undefined.
+     *
+     * If you define the `disabled` attribute of the ButtonGroup, it will take precedence over the `disabled` attributes
+     *  of the underlying buttons and they will be ignored.
+     */
+    disabled?: boolean;
+    /**
+     * Sets the width of the ButtonGroup.
+     *
+     * If the width of the ButtonGroup is set:
+     * - The buttons resize automatically to fill the full width of the group wrapper.
+     * - The buttons acquire the same width.
+     */
+    width?: string;
+    /**
+     * Sets the direction of the ButtonGroup ([more information](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir)).
+     *
+     * The available options are:
+     * * `rtl`
+     * * `ltr`
+     * * `auto`
+     */
+    dir?: string;
+}

package/dist/esm/ButtonGroupInterface.js

@@ -0,0 +1,2 @@
+export {};
+// tslint:enable:max-line-length

package/dist/esm/ButtonInterface.d.ts

@@ -0,0 +1,56 @@
+/**
+ * Inherits the native HTML Button. Represents the properties which can be set to a Button.
+ */
+export interface ButtonInterface {
+    /**
+     * **Deprecated**. Use [`fillMode`]({% slug api_buttons_buttonprops %}#toc-fillmode) prop instead.
+     *
+     * The available values are:
+     * `flat` | `outline`
+     * * `clear`
+     */
+    look?: string;
+    /**
+     * Adds visual weight to the Button and makes it primary ([see example]({% slug primary_button %})).
+     * **Deprecated**. Use [`themeColor`]({% slug api_buttons_buttonprops %}#toc-themecolor) prop instead.
+     *
+     * @deprecated
+     */
+    primary?: boolean;
+    /**
+     * Specifies if the Button is disabled ([see example]({% slug disabled_button %})). Defaults to `false`.
+     */
+    disabled?: boolean;
+    /**
+     * Sets the aria-label of the Button.
+     */
+    ariaLabel?: string;
+    /**
+     * Sets the direction of the Button.
+     */
+    dir?: string;
+    /**
+     * Sets the selected state of the Button. Can be used for controlled state.
+     */
+    selected?: boolean;
+    /**
+     * Provides visual styling that indicates if the Button is selected ([see example]({% slug toggleable_button %})). Defaults to `false`.
+     */
+    togglable?: boolean;
+    /**
+     * Defines the name for an existing icon in a Kendo UI for Vue theme ([see example]({% slug icons_button %})). The icon is rendered inside the Button by a `span.k-icon` element.
+     */
+    icon?: string;
+    /**
+     * Defines a CSS class—or multiple classes separated by spaces—which are applied to a `span` element inside the Button ([see example]({% slug icons_button %})). Allows the usage of custom icons.
+     */
+    iconClass?: string;
+    /**
+     * Defines a URL which is used as an `img` element inside the Button ([see example]({% slug icons_button %})). The URL can be relative or absolute. If relative, it is evaluated with relation to the URL of the web page.
+     */
+    imageUrl?: string;
+    /**
+     * Defines the alternative text of the image rendered inside the Button component.
+     */
+    imageAlt?: string;
+}

package/dist/esm/ButtonInterface.js

@@ -0,0 +1,2 @@
+export {};
+// tslint:enable:max-line-length

package/dist/esm/ButtonWrap.d.ts

@@ -0,0 +1,19 @@
+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 interface ButtonAll extends Vue2type {
+}
+/**
+ * @hidden
+ */
+declare let ButtonWrapVue2: ComponentOptions<ButtonAll, DefaultData<{}>, DefaultMethods<ButtonAll>, {}, RecordPropsDefinition<{}>>;
+/**
+ * @hidden
+ */
+declare const ButtonWrap: DefineComponent<{}, any, {}, {}, {}, {}, {}, {}, string, {}, {}, {}>;
+export { ButtonWrap, ButtonWrapVue2 };

package/dist/esm/ButtonWrap.js

@@ -0,0 +1,33 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+import { getDefaultSlots } from '@progress/kendo-vue-common';
+/**
+ * @hidden
+ */
+
+var ButtonWrapVue2 = {
+  name: 'KendoButtonWrap',
+  props: {},
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var defaultSlot = getDefaultSlots(this);
+    return defaultSlot[0];
+  }
+};
+/**
+ * @hidden
+ */
+
+var ButtonWrap = ButtonWrapVue2;
+export { ButtonWrap, ButtonWrapVue2 };