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

package/dist/esm/Chip/Chip.d.ts

@@ -0,0 +1,199 @@
+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 { ChipRemoveEvent, ChipMouseEvent, ChipFocusEvent, ChipKeyboardEvent } from './../models/index';
+/**
+ * Represents the properties of [Chip]({% slug api_buttons_chip %}) component.
+ */
+export interface ChipProps {
+    /**
+     * Sets the `id` property of the top div element of the Chip.
+     */
+    id?: string;
+    /**
+     * Sets the `tabIndex` attribute.
+     */
+    tabIndex?: number;
+    /**
+     * Sets the label text of the Chip.
+     */
+    text?: string;
+    /**
+     * Sets the `id` value of the Chip.
+     */
+    value?: any;
+    /**
+     * Sets the `type` of the Chip element - 'warning', 'error', 'success', 'info', by default - 'none'.
+     */
+    type?: string;
+    /**
+     * The Chip direction 'ltr' as default or 'rtl'.
+     */
+    dir?: string;
+    /**
+     * Determines if the Chip could be removed.
+     */
+    removable?: boolean;
+    /**
+     * Determines if the Chip has custom `removeIcon`.
+     */
+    removeIcon?: string;
+    /**
+     * Determines if the Chip is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Determines if the Chip has an `icon`.
+     */
+    icon?: string;
+    /**
+     * Determines if the Chip has custom selection `icon`.
+     */
+    selectedIcon?: string;
+    /**
+     * Determines if the Chip style is `filled` or `outlined`.
+     */
+    look?: string;
+    /**
+     * Configures the `size` of the Chip.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null&mdash;Does not set a size `class`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large' | string;
+    /**
+     * Configures the `roundness` of the Chip.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - full
+     * - null&mdash;Does not set a rounded `class`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
+    /**
+     * Configures the `fillMode` of the Chip.
+     *
+     * The available options are:
+     * - solid
+     * - outline
+     * - flat
+     * - null&mdash;Does not set a fillMode `class`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'outline' | 'flat' | string;
+    /**
+     * Configures the `themeColor` of the Chip.
+     *
+     * The available options are:
+     * - base
+     * - info
+     * - success
+     * - warning
+     * - error
+     * - null&mdash;Does not set a themeColor `class`.
+     *
+     * @default `base`
+     */
+    themeColor?: null | 'base' | 'info' | 'success' | 'warning' | 'error' | string;
+    /**
+     * Triggered on Chip removing.
+     */
+    onRemove?: (event: ChipRemoveEvent) => void;
+    /**
+     * Triggered on onClick event.
+     */
+    onClick?: (event: ChipMouseEvent) => void;
+    /**
+     * Triggered on onKeyDown event.
+     */
+    onKeydown?: (event: ChipKeyboardEvent) => void;
+    /**
+     * Triggered on onFocus event.
+     */
+    onFocus?: (event: ChipFocusEvent) => void;
+    /**
+     * Triggered on onBlur event.
+     */
+    onBlur?: (event: ChipFocusEvent) => void;
+    /**
+     * Represents the item data, coming from the `ChipList` component.
+     */
+    dataItem?: any;
+    /**
+     * Determines if the Chip is selected.
+     */
+    selected?: boolean;
+    /**
+     * Identifies the element(s) which will describe the component, similar to HTML aria-describedby attribute.
+     * For example these elements could contain error or hint message.
+     */
+    ariaDescribedBy?: string;
+    /**
+     * @hidden
+     */
+    role?: string;
+}
+/**
+ * Represents the target(element and props) of the ChipRemoveEvent.
+ */
+export interface ChipHandle {
+    /**
+     * The current element or `null` if there is no one.
+     */
+    element: HTMLDivElement | null;
+    /**
+     * The props values of the Chip.
+     */
+    props: ChipProps;
+}
+/**
+ * @hidden
+ */
+export interface ChipMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface ChipState {
+    v3: boolean;
+    target: any;
+    currentRtl: boolean;
+}
+/**
+ * @hidden
+ */
+export interface ChipData {
+}
+/**
+ * @hidden
+ */
+export interface ChipComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface ChipAll extends ChipMethods, ChipState, ChipData, ChipComputed, Vue2type {
+}
+/**
+ * @hidden
+ */
+declare let ChipVue2: ComponentOptions<Vue2type, DefaultData<ChipData>, DefaultMethods<ChipAll>, ChipComputed, RecordPropsDefinition<ChipProps>>;
+/**
+ * @hidden
+ */
+declare const Chip: DefineComponent<ChipProps, any, ChipData, ChipComputed, ChipMethods, {}, {}, {}, string, ChipProps, ChipProps, {}>;
+export { Chip, ChipVue2 };

package/dist/esm/Chip/Chip.js

@@ -0,0 +1,339 @@
+// @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 { ChipListSelectionContext, ChipListFocusContext, ChipListDataContext } from './ChipList.js';
+
+import { classNames, getTabIndex, Keys, noop, validatePackage, kendoThemeMaps, setRef, getRef } from '@progress/kendo-vue-common';
+import { FOCUS_ACTION } from './focus-reducer.js';
+import { DATA_ACTION } from './data-reducer.js';
+import { SELECTION_ACTION } from './selection-reducer.js';
+import { packageMetadata } from '../package-metadata.js';
+/**
+ * @hidden
+ */
+
+var ChipVue2 = {
+  name: 'KendoVueChip',
+  props: {
+    id: String,
+    text: String,
+    value: [String, Object],
+    type: String,
+    dir: {
+      type: String,
+      default: function _default() {
+        return 'ltr';
+      }
+    },
+    removable: {
+      type: Boolean,
+      default: false
+    },
+    removeIcon: {
+      type: String,
+      default: function _default() {
+        return 'k-i-close-circle';
+      }
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    icon: String,
+    selectedIcon: {
+      type: String,
+      default: function _default() {
+        return 'k-i-check';
+      }
+    },
+    look: {
+      type: String,
+      default: function _default() {
+        return 'solid';
+      }
+    },
+    size: {
+      type: String,
+      default: 'medium'
+    },
+    rounded: {
+      type: String,
+      default: 'medium'
+    },
+    fillMode: {
+      type: String,
+      default: 'solid',
+      validator: function validator(value) {
+        return [null, 'flat', 'outline', 'solid'].includes(value);
+      }
+    },
+    // eslint-disable-next-line max-len
+    themeColor: {
+      type: String,
+      default: 'base',
+      validator: function validator(value) {
+        return [null, 'base', 'error', 'info', 'success', 'warning'].includes(value);
+      }
+    },
+    dataItem: Object,
+    selected: Boolean,
+    ariaDescribedBy: String
+  },
+  // @ts-ignore
+  emits: {
+    'click': null,
+    'keydown': null,
+    'blur': null,
+    'focus': null,
+    'remove': null
+  },
+  inject: {
+    kendoSelection: {
+      default: {
+        value: null
+      }
+    },
+    kendoFocused: {
+      default: {
+        value: null
+      }
+    },
+    kendoDataItems: {
+      default: null
+    },
+    handleDispatchDataItems: {
+      default: noop
+    },
+    handleDispatchSelection: {
+      default: noop
+    },
+    handleDispatchFocus: {
+      default: noop
+    }
+  },
+  created: function created() {
+    this.currentDir = undefined;
+    validatePackage(packageMetadata);
+  },
+  mounted: function mounted() {
+    this.chip = getRef(this, 'chip');
+    this.currentDir = this.$props.dir !== undefined ? this.$props.dir === 'rtl' : this.$el && getComputedStyle(this.$el).direction === 'rtl' || false;
+  },
+  updated: function updated() {
+    if (this.kendoFocused.value === this.$props.value && this.$el) {
+      this.$el.focus();
+    }
+  },
+  computed: {
+    currentSelected: function currentSelected() {
+      var _this = this;
+
+      return this.$props.selected || (Array.isArray(this.kendoSelection.value) ? this.kendoSelection.value.some(function (i) {
+        return i === _this.$props.value;
+      }) : this.kendoSelection.value === this.$props.value);
+    }
+  },
+  methods: {
+    computedFocused: function computedFocused() {
+      return this.kendoFocused.value === this.$props.value;
+    },
+    handleClick: function handleClick(event) {
+      if (this.handleDispatchSelection) {
+        this.handleDispatchSelection({
+          type: SELECTION_ACTION.toggle,
+          payload: this.$props.value,
+          event: event
+        });
+      }
+
+      this.$emit('click', {
+        target: this.target,
+        event: event
+      });
+    },
+    handleRemove: function handleRemove(event) {
+      event.stopPropagation();
+
+      if (!this.$props.removable) {
+        return;
+      }
+
+      if (this.handleDispatchFocus) {
+        this.handleDispatchDataItems({
+          type: DATA_ACTION.remove,
+          payload: this.$props.value,
+          event: event
+        });
+        this.handleDispatchFocus({
+          type: FOCUS_ACTION.reset,
+          payload: this.$props.value,
+          event: event
+        });
+        this.handleDispatchSelection({
+          type: SELECTION_ACTION.remove,
+          payload: this.$props.value,
+          event: event
+        });
+      }
+
+      this.$emit('remove', {
+        target: this.target,
+        event: event
+      });
+    },
+    handleKeyDown: function handleKeyDown(event) {
+      switch (event.keyCode) {
+        case Keys.left:
+          if (this.handleDispatchFocus) {
+            this.handleDispatchFocus({
+              type: FOCUS_ACTION.prev,
+              payload: this.$props.value,
+              event: event
+            });
+          }
+
+          break;
+
+        case Keys.right:
+          if (this.handleDispatchFocus) {
+            this.handleDispatchFocus({
+              type: FOCUS_ACTION.next,
+              payload: this.$props.value,
+              event: event
+            });
+          }
+
+          break;
+
+        case Keys.enter:
+          if (this.handleDispatchFocus) {
+            this.handleDispatchSelection({
+              type: SELECTION_ACTION.toggle,
+              payload: this.$props.value,
+              event: event
+            });
+          }
+
+          break;
+
+        case Keys.delete:
+          this.handleRemove(event);
+          break;
+
+        default:
+          break;
+      }
+
+      this.$emit('keydown', {
+        target: this.target,
+        event: event
+      });
+    },
+    handleFocus: function handleFocus(event) {
+      if (this.handleDispatchFocus) {
+        this.handleDispatchFocus({
+          payload: this.$props.value,
+          type: FOCUS_ACTION.current,
+          event: event
+        });
+      }
+
+      this.$emit('focus', {
+        target: this.target,
+        event: event
+      });
+    },
+    handleBlur: function handleBlur(event) {
+      this.$emit('blur', {
+        target: this.target,
+        event: event
+      });
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    var chipRef = ref(null);
+    return {
+      v3: v3,
+      chipRef: chipRef
+    };
+  },
+  render: function render(createElement) {
+    var _a;
+
+    var h = gh || createElement;
+    var _b = this.$props,
+        size = _b.size,
+        rounded = _b.rounded,
+        themeColor = _b.themeColor,
+        fillMode = _b.fillMode,
+        look = _b.look,
+        type = _b.type;
+    return h("div", {
+      role: this.$props.role,
+      attrs: this.v3 ? undefined : {
+        role: this.$props.role,
+        id: this.$props.value,
+        dir: this.currentDir,
+        tabindex: getTabIndex(this.$props.tabIndex, this.$props.disabled, undefined),
+        "aria-checked": this.currentSelected,
+        "aria-disabled": this.$props.disabled,
+        "aria-describedby": this.$props.ariaDescribedBy
+      },
+      id: this.$props.value,
+      ref: setRef(this, 'chip'),
+      dir: this.currentDir,
+      tabindex: getTabIndex(this.$props.tabIndex, this.$props.disabled, undefined),
+      "class": classNames('k-chip', (_a = {
+        'k-rtl': this.currentDir === 'rtl',
+        'k-disabled': this.$props.disabled,
+        'k-selected': this.currentSelected,
+        'k-focus': this.computedFocused()
+      }, _a["k-chip-".concat(kendoThemeMaps.sizeMap[size] || size)] = size, _a["k-rounded-".concat(kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded, _a["k-chip-".concat(fillMode)] = fillMode, _a["k-chip-".concat(fillMode, "-").concat(themeColor)] = Boolean(fillMode && themeColor), _a['k-chip-success'] = type === 'success', _a['k-chip-warning'] = type === 'warning', _a['k-chip-error'] = type === 'error', _a['k-chip-info'] = type === 'info', _a['k-chip-outline'] = look === 'outline' || look === 'outlined', _a['k-chip-solid'] = look === 'solid' || look === 'filled', _a)),
+      "aria-checked": this.currentSelected,
+      "aria-disabled": this.$props.disabled,
+      "aria-describedby": this.$props.ariaDescribedBy,
+      onFocus: this.handleFocus,
+      on: this.v3 ? undefined : {
+        "focus": this.handleFocus,
+        "blur": this.handleBlur,
+        "click": this.handleClick,
+        "keydown": this.handleKeyDown
+      },
+      onBlur: this.handleBlur,
+      onClick: this.handleClick,
+      onKeydown: this.handleKeyDown
+    }, [this.currentSelected && this.$props.selectedIcon && h("span", {
+      "class": classNames('k-chip-icon', 'k-icon', this.$props.selectedIcon)
+    }), this.$props.icon && h("span", {
+      "class": classNames('k-chip-icon', 'k-icon', this.$props.icon)
+    }), h("span", {
+      "class": 'k-chip-content'
+    }, [this.$props.text && h("span", {
+      "aria-label": this.$props.text,
+      attrs: this.v3 ? undefined : {
+        "aria-label": this.$props.text
+      },
+      "class": 'k-chip-label'
+    }, [this.$props.text])]), this.$props.removable && h("span", {
+      "class": "k-chip-actions"
+    }, [h("span", {
+      "class": "k-chip-action k-chip-remove-action"
+    }, [h("span", {
+      "class": classNames('k-chip-icon', 'k-icon', this.$props.removeIcon),
+      onClick: this.handleRemove,
+      on: this.v3 ? undefined : {
+        "click": this.handleRemove
+      }
+    })])])]);
+  }
+};
+/**
+ * @hidden
+ */
+
+var Chip = ChipVue2;
+export { Chip, ChipVue2 };

package/dist/esm/Chip/ChipList.d.ts

@@ -0,0 +1,174 @@
+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 { ChipListChangeEvent, ChipListDataChangeEvent } from './../models/index';
+/**
+ * Represents the properties of [ChipList]({% slug api_buttons_chiplist %}) component.
+ */
+export interface ChipListProps extends FormComponentProps {
+    /**
+     * Sets the `id` property of the top div element of the ChipList.
+     */
+    id?: string;
+    /**
+     * Sets additional classes to the ChipList.
+     */
+    className?: string;
+    /**
+     * Sets the `tabIndex` attribute.
+     */
+    tabIndex?: number;
+    /**
+     * Represents Chip component.
+     */
+    chip?: any;
+    /**
+     * Represents the data about the child Chips.
+     */
+    dataItems?: any;
+    /**
+     * Represents the default data about the child Chips.
+     */
+    defaultDataItems?: any[];
+    /**
+     * Triggered after Chip data change.
+     */
+    onDatachange?: (event: ChipListDataChangeEvent) => void;
+    /**
+     * Represents the selection state of Chip component.
+     */
+    value?: any | any[];
+    /**
+     * Represents the default value of the selection state of Chip component.
+     */
+    defaultValue?: any | any[];
+    /**
+     * Triggered after value change.
+     */
+    onChange?: (event: ChipListChangeEvent) => void;
+    /**
+     * Configures the `size` of the Chip.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null&mdash;Does not set a size `class`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large' | string;
+    /**
+     * Configures the `roundness` of the Chip.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - full
+     * - null&mdash;Does not set a rounded `class`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
+    /**
+     * Configures the `fillMode` of the Chip.
+     *
+     * The available options are:
+     * - solid
+     * - outline
+     * - flat
+     * - null&mdash;Does not set a fillMode `class`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'outline' | 'flat' | string;
+    /**
+     * Represents the selection state of Chip component.
+     */
+    selection?: string;
+    /**
+     * Represents the `text` field of Chip, used for the `label`.
+     */
+    textField?: string;
+    /**
+     * Represents the `value` field of Chip, used for setting the Chip `id`.
+     */
+    valueField?: string;
+    /**
+     * Determines of ChipList is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The ChipList direction 'ltr' as default or 'rtl'.
+     */
+    dir?: string;
+    /**
+     * Identifies the element(s) which will describe the component, similar to HTML 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;
+}
+/**
+ * Represents the target(element and props) of the ChipListChangeEvent.
+ */
+export interface ChipListHandle {
+    /**
+     * The current element or `null` if there is no one.
+     */
+    element: HTMLDivElement | null;
+    /**
+     * The props values of the ChipList.
+     */
+    props: ChipListProps;
+}
+/**
+ * @hidden
+ */
+export interface ChipListMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface ChipListState {
+    v3: boolean;
+    target: any;
+    currentRtl: boolean;
+}
+/**
+ * @hidden
+ */
+export interface ChipListData {
+    currentDataItems: Array<any>;
+    currentDir: string;
+    isRtl: boolean;
+    currentFocused: any;
+}
+/**
+ * @hidden
+ */
+export interface ChipListComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface ChipListAll extends ChipListMethods, ChipListState, ChipListData, ChipListComputed, Vue2type {
+}
+/**
+ * @hidden
+ */
+declare let ChipListVue2: ComponentOptions<Vue2type, DefaultData<ChipListData>, DefaultMethods<ChipListAll>, ChipListComputed, RecordPropsDefinition<ChipListProps>>;
+/**
+ * @hidden
+ */
+declare const ChipList: DefineComponent<ChipListProps, any, ChipListData, ChipListComputed, ChipListMethods, {}, {}, {}, string, ChipListProps, ChipListProps, {}>;
+export { ChipList, ChipListVue2 };