@progress/kendo-vue-treelist 3.5.1 → 3.5.2-dev.202209020458

package/dist/es/cells/TreeListCell.js

@@ -0,0 +1,220 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+var inject = allVue.inject;
+import { provideIntlService } from '@progress/kendo-vue-intl';
+import { getTemplate, noop, getNestedValue, Keys } from '@progress/kendo-vue-common';
+import { KEYBOARD_NAV_DATA_ID, KEYBOARD_NAV_DATA_LEVEL } from '@progress/kendo-vue-data-tools';
+/**
+ * @hidden
+ */
+
+var TreeListCellVue2 = {
+  name: 'TreeListCell',
+  // @ts-ignore
+  emits: {
+    cellclick: null,
+    cellkeydown: null,
+    expandchange: null
+  },
+  props: {
+    id: String,
+    field: String,
+    dataItem: Object,
+    format: String,
+    colSpan: Number,
+    colIndex: Number,
+    level: Array,
+    expanded: Boolean,
+    expandable: Boolean,
+    hasChildren: Boolean,
+    isSelected: Boolean,
+    ariaColumnIndex: Number,
+    render: [String, Function, Object]
+  },
+  inject: {
+    kendoIntlService: {
+      default: null
+    },
+    getKeyboardNavigationAttributes: {
+      default: noop
+    }
+  },
+  methods: {
+    onKeyDownHandler: function onKeyDownHandler(event) {
+      var _a = this.$props,
+          expandable = _a.expandable,
+          dataItem = _a.dataItem,
+          level = _a.level;
+
+      if (event.isDefaultPrevented()) {
+        return;
+      }
+
+      if (event.keyCode === Keys.enter && expandable) {
+        event.preventDefault();
+        this.$emit('expandchange', event, dataItem, level);
+      }
+    },
+    triggerClick: function triggerClick() {
+      this.$emit('cellclick', {
+        dataItem: this.$props.dataItem,
+        field: this.$props.field
+      });
+    },
+    triggerKeydown: function triggerKeydown(e) {
+      this.$emit('cellkeydown', {
+        event: e,
+        dataItem: this.$props.dataItem,
+        field: this.$props.field
+      });
+    },
+    triggerEdit: function triggerEdit(dataItem) {
+      this.$emit('edit', dataItem);
+    },
+    triggerAdd: function triggerAdd(dataItem) {
+      this.$emit('add', dataItem);
+    },
+    triggerCancel: function triggerCancel(dataItem) {
+      this.$emit('cancel', dataItem);
+    },
+    triggerSave: function triggerSave(dataItem) {
+      this.$emit('save', dataItem);
+    },
+    triggerRemove: function triggerRemove(dataItem) {
+      this.$emit('remove', dataItem);
+    },
+    triggerExpandChange: function triggerExpandChange(event) {
+      var _a = this.$props,
+          dataItem = _a.dataItem,
+          level = _a.level;
+      this.$emit('expandchange', event, dataItem, level);
+    }
+  },
+  computed: {
+    wrapperClass: function wrapperClass() {
+      var _a;
+
+      var _b = this.$props,
+          expandable = _b.expandable,
+          isSelected = _b.isSelected;
+      return _a = {}, _a['k-text-nowrap'] = expandable, _a['k-selected'] = isSelected, _a;
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    var kendoIntlService = inject('kendoIntlService', {});
+    return {
+      v3: v3,
+      kendoIntlService: kendoIntlService
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var _a = this.$props,
+        hasChildren = _a.hasChildren,
+        _b = _a.level,
+        level = _b === void 0 ? [0] : _b,
+        expanded = _a.expanded,
+        dataItem = _a.dataItem,
+        format = _a.format,
+        id = _a.id,
+        colSpan = _a.colSpan,
+        ariaColumnIndex = _a.ariaColumnIndex,
+        isSelected = _a.isSelected,
+        expandable = _a.expandable,
+        field = _a.field;
+    var data = getNestedValue(field, dataItem);
+    var navAttrs = this.getKeyboardNavigationAttributes(this.$props.id);
+    var intl = provideIntlService(this);
+    var dataAsString = '';
+
+    if (data !== undefined && data !== null) {
+      dataAsString = format ? intl.format(format, data) : data.toString();
+    }
+
+    var icons = [];
+
+    if (expandable) {
+      icons.push.apply(icons, level.slice(1).map(function (_x, i) {
+        return h("span", {
+          "class": "k-icon k-i-none",
+          key: i
+        });
+      }, this));
+
+      if (hasChildren) {
+        icons.push(h("span", {
+          "class": "k-icon k-i-".concat(expanded ? 'collapse' : 'expand'),
+          key: "expand-collapse",
+          onClick: this.triggerExpandChange,
+          on: this.v3 ? undefined : {
+            "click": this.triggerExpandChange
+          },
+          "data-prevent-selection": true,
+          attrs: this.v3 ? undefined : {
+            "data-prevent-selection": true
+          }
+        }));
+      } else {
+        icons.push(h("span", {
+          "class": "k-icon k-i-none",
+          key: icons.length
+        }));
+      }
+    }
+
+    var defaultRendering = h("td", {
+      "class": this.wrapperClass,
+      colSpan: colSpan,
+      attrs: this.v3 ? undefined : {
+        colSpan: colSpan,
+        "aria-colindex": ariaColumnIndex,
+        "aria-expanded": hasChildren ? expanded : undefined,
+        "aria-selected": isSelected,
+        role: 'gridcell',
+        "data-grid-col-index": this.$props.colIndex,
+        tabindex: navAttrs.tabIndex,
+        "data-keyboardnavlevel": navAttrs[KEYBOARD_NAV_DATA_LEVEL],
+        "data-keyboardnavid": navAttrs[KEYBOARD_NAV_DATA_ID]
+      },
+      "aria-colindex": ariaColumnIndex,
+      "aria-expanded": hasChildren ? expanded : undefined,
+      "aria-selected": isSelected,
+      role: 'gridcell',
+      onKeydown: this.onKeyDownHandler,
+      on: this.v3 ? undefined : {
+        "keydown": this.onKeyDownHandler
+      },
+      "data-grid-col-index": this.$props.colIndex,
+      tabindex: navAttrs.tabIndex,
+      "data-keyboardnavlevel": navAttrs[KEYBOARD_NAV_DATA_LEVEL],
+      "data-keyboardnavid": navAttrs[KEYBOARD_NAV_DATA_ID]
+    }, [icons, dataAsString]);
+    return getTemplate.call(this, {
+      h: h,
+      template: this.$props.render,
+      defaultRendering: defaultRendering,
+      additionalProps: this.$props,
+      additionalListeners: {
+        click: this.triggerClick,
+        keydown: this.triggerKeydown,
+        edit: this.triggerEdit,
+        add: this.triggerAdd,
+        cancel: this.triggerCancel,
+        save: this.triggerSave,
+        remove: this.triggerRemove
+      }
+    });
+  }
+};
+/**
+ * @hidden
+ */
+
+var TreeListCell = TreeListCellVue2;
+export { TreeListCell, TreeListCellVue2 };

package/dist/es/cells/TreeListSelectionCell.d.ts

@@ -0,0 +1,41 @@
+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 { TreeListCellProps } from '../interfaces/TreeListCellProps';
+/**
+ * @hidden
+ */
+export interface TreeListSelectionCellComputed {
+    [key: string]: any;
+    wrapperClasses: object;
+}
+/**
+ * @hidden
+ */
+export interface TreeListSelectionCellMethods {
+    [key: string]: any;
+    triggerKeydown: (e: any) => void;
+    triggerClick: () => void;
+    triggerEdit: (dataItem: any) => void;
+    triggerAdd: (dataItem: any) => void;
+    triggerCancel: (dataItem: any) => void;
+    triggerSave: (dataItem: any) => void;
+    triggerRemove: (dataItem: any) => void;
+    getKeyboardNavigationAttributes: (id: string) => any;
+}
+/**
+ * @hidden
+ */
+export interface TreeListSelectionCellAll extends TreeListSelectionCellComputed, TreeListSelectionCellMethods, Vue2type {
+}
+/**
+ * @hidden
+ */
+declare let TreeListSelectionCellVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<TreeListSelectionCellAll>, {}, RecordPropsDefinition<TreeListCellProps>>;
+/**
+ * @hidden
+ */
+declare const TreeListSelectionCell: DefineComponent<TreeListCellProps, any, {}, {}, {}, {}, {}, {}, string, TreeListCellProps, TreeListCellProps, {}>;
+export { TreeListSelectionCell, TreeListSelectionCellVue2 };

package/dist/es/cells/TreeListSelectionCell.js

@@ -0,0 +1,166 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+var inject = allVue.inject;
+import { provideIntlService } from '@progress/kendo-vue-intl';
+import { getTemplate, noop, getNestedValue, guid } from '@progress/kendo-vue-common';
+import { KEYBOARD_NAV_DATA_ID, KEYBOARD_NAV_DATA_LEVEL } from '@progress/kendo-vue-data-tools';
+/**
+ * @hidden
+ */
+
+var TreeListSelectionCellVue2 = {
+  name: 'TreeListSelectionCell',
+  // @ts-ignore
+  emits: {
+    cellclick: null,
+    cellkeydown: null,
+    expandchange: null
+  },
+  props: {
+    id: String,
+    field: String,
+    dataItem: Object,
+    format: String,
+    colSpan: Number,
+    colIndex: Number,
+    level: Array,
+    expanded: Boolean,
+    isSelected: Boolean,
+    ariaColumnIndex: Number,
+    render: [String, Function, Object]
+  },
+  created: function created() {
+    this.inputId = guid();
+  },
+  inject: {
+    kendoIntlService: {
+      default: null
+    },
+    getKeyboardNavigationAttributes: {
+      default: noop
+    }
+  },
+  methods: {
+    triggerClick: function triggerClick() {
+      this.$emit('cellclick', {
+        dataItem: this.$props.dataItem,
+        field: this.$props.field
+      });
+    },
+    triggerKeydown: function triggerKeydown(e) {
+      this.$emit('cellkeydown', {
+        event: e,
+        dataItem: this.$props.dataItem,
+        field: this.$props.field
+      });
+    },
+    triggerEdit: function triggerEdit(dataItem) {
+      this.$emit('edit', dataItem);
+    },
+    triggerAdd: function triggerAdd(dataItem) {
+      this.$emit('add', dataItem);
+    },
+    triggerCancel: function triggerCancel(dataItem) {
+      this.$emit('cancel', dataItem);
+    },
+    triggerSave: function triggerSave(dataItem) {
+      this.$emit('save', dataItem);
+    },
+    triggerRemove: function triggerRemove(dataItem) {
+      this.$emit('remove', dataItem);
+    },
+    handleOnChange: function handleOnChange(event) {
+      this.$emit('selectionchange', {
+        event: event
+      });
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    var kendoIntlService = inject('kendoIntlService', {});
+    return {
+      v3: v3,
+      kendoIntlService: kendoIntlService
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var _a = this.$props,
+        dataItem = _a.dataItem,
+        colSpan = _a.colSpan,
+        ariaColumnIndex = _a.ariaColumnIndex,
+        isSelected = _a.isSelected,
+        field = _a.field;
+    var selectedValue = getNestedValue(field, dataItem);
+    var navAttrs = this.getKeyboardNavigationAttributes(this.$props.id);
+    var intl = provideIntlService(this);
+    var defaultRendering = h("td", {
+      role: 'gridcell',
+      attrs: this.v3 ? undefined : {
+        role: 'gridcell',
+        colSpan: colSpan,
+        "aria-selected": isSelected,
+        "aria-colindex": ariaColumnIndex,
+        "data-grid-col-index": this.$props.colIndex,
+        tabindex: navAttrs.tabIndex,
+        "data-keyboardnavlevel": navAttrs[KEYBOARD_NAV_DATA_LEVEL],
+        "data-keyboardnavid": navAttrs[KEYBOARD_NAV_DATA_ID]
+      },
+      colSpan: colSpan,
+      "aria-selected": isSelected,
+      "aria-colindex": ariaColumnIndex,
+      "data-grid-col-index": this.$props.colIndex,
+      tabindex: navAttrs.tabIndex,
+      "data-keyboardnavlevel": navAttrs[KEYBOARD_NAV_DATA_LEVEL],
+      "data-keyboardnavid": navAttrs[KEYBOARD_NAV_DATA_ID]
+    }, [h("input", {
+      checked: this.v3 ? typeof selectedValue === 'boolean' && selectedValue : null,
+      domProps: this.v3 ? undefined : {
+        "checked": typeof selectedValue === 'boolean' && selectedValue
+      },
+      id: this.inputId,
+      attrs: this.v3 ? undefined : {
+        id: this.inputId,
+        type: "checkbox"
+      },
+      type: "checkbox",
+      "class": "k-checkbox k-checkbox-md k-rounded-md",
+      onChange: this.handleOnChange,
+      on: this.v3 ? undefined : {
+        "change": this.handleOnChange
+      }
+    }), h("label", {
+      "class": "k-checkbox-label",
+      "for": this.inputId,
+      attrs: this.v3 ? undefined : {
+        "for": this.inputId
+      }
+    })]);
+    return getTemplate.call(this, {
+      h: h,
+      template: this.$props.render,
+      defaultRendering: defaultRendering,
+      additionalProps: this.$props,
+      additionalListeners: {
+        click: this.triggerClick,
+        keydown: this.triggerKeydown,
+        edit: this.triggerEdit,
+        add: this.triggerAdd,
+        cancel: this.triggerCancel,
+        save: this.triggerSave,
+        remove: this.triggerRemove
+      }
+    });
+  }
+};
+/**
+ * @hidden
+ */
+
+var TreeListSelectionCell = TreeListSelectionCellVue2;
+export { TreeListSelectionCell, TreeListSelectionCellVue2 };

package/dist/es/constants/main.d.ts

@@ -0,0 +1,6 @@
+/** The attribute required by the TreeList selection on TreeList `tr` elements. */
+export declare const TREELIST_ROW_INDEX_ATTRIBUTE = "data-grid-row-index";
+/** The attribute required by the TreeList selection on TreeList `td` elements. */
+export declare const TREELIST_COL_INDEX_ATTRIBUTE = "data-grid-col-index";
+/** Attribute which disable selection start from this element. */
+export declare const TREELIST_PREVENT_SELECTION_ELEMENT = "data-prevent-selection";

package/dist/es/constants/main.js

@@ -0,0 +1,7 @@
+import { TABLE_COL_INDEX_ATTRIBUTE, TABLE_ROW_INDEX_ATTRIBUTE, TABLE_PREVENT_SELECTION_ELEMENT } from '@progress/kendo-vue-data-tools';
+/** The attribute required by the TreeList selection on TreeList `tr` elements. */
+export var TREELIST_ROW_INDEX_ATTRIBUTE = TABLE_ROW_INDEX_ATTRIBUTE;
+/** The attribute required by the TreeList selection on TreeList `td` elements. */
+export var TREELIST_COL_INDEX_ATTRIBUTE = TABLE_COL_INDEX_ATTRIBUTE;
+/** Attribute which disable selection start from this element. */
+export var TREELIST_PREVENT_SELECTION_ELEMENT = TABLE_PREVENT_SELECTION_ELEMENT;

package/dist/es/header/TreeListHeaderCell.d.ts

@@ -0,0 +1 @@
+

package/dist/es/header/TreeListHeaderCell.js

@@ -0,0 +1,4 @@
+// import { HeaderCell } from '@progress/kendo-vue-data-tools';
+// import { TreeListHeaderCellProps } from '../interfaces/TreeListHeaderCellProps';
+// export const TreeListHeaderCell: React.FunctionComponent<TreeListHeaderCellProps> =
+//     (props: TreeListHeaderCellProps) => <HeaderCell {...props} />;

package/dist/es/header/TreeListHeaderSelectionCell.d.ts

@@ -0,0 +1 @@
+

package/dist/es/header/TreeListHeaderSelectionCell.js

@@ -0,0 +1,12 @@
+// import { guid } from '@progress/kendo-vue-common';
+// import { HeaderCellProps, HeaderSelectionCell } from '@progress/kendo-vue-data-tools';
+// export interface TreeListHeaderSelectionCellProps extends HeaderCellProps { }
+// export class TreeListHeaderSelectionCell extends React.Component<TreeListHeaderSelectionCellProps> {
+//     private _inputId: string = guid();
+//     /**
+//      * @hidden
+//      */
+//     render() {
+//         return <HeaderSelectionCell inputId={this._inputId} {...this.props} />;
+//     }
+// }

package/dist/es/interfaces/DataItemWrapper.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @hidden
+ */
+export interface DataItemWrapper {
+    dataItem: any;
+    level: number[];
+    height: number;
+    offsetTop: number;
+    levelCount: number;
+}

package/dist/es/interfaces/DataItemWrapper.js

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

package/dist/es/interfaces/TreeListCellProps.d.ts

@@ -0,0 +1,31 @@
+import { CellProps } from '@progress/kendo-vue-data-tools';
+/**
+ * Represents the props of the TreeListCell component.
+ */
+export interface TreeListCellProps extends CellProps {
+    /**
+     * An array of indexes of each parent and current item in the data tree.
+     */
+    level: number[];
+    /**
+     * Indicates that the data item of the cell has subitems.
+     */
+    hasChildren?: boolean;
+    /**
+     * If set to `true`, the cell will render indentation based on its level prop and
+     * the icons that are used for expanding and collapsing child rows.
+     */
+    expandable?: boolean;
+    /**
+     * The index of the column. Useful for applying `aria-colindex` accessibility attribute.
+     */
+    colIndex: number;
+    /**
+     * The event that is fired when the expand or collapse icon of the cell is clicked.
+     */
+    onExpandchange?: (event: any, dataItem: any, level: number[]) => void;
+    /**
+     * A function for overriding the default rendering of the cell.
+     */
+    render?: any;
+}

package/dist/es/interfaces/TreeListCellProps.js

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

package/dist/es/interfaces/TreeListColumnProps.d.ts

@@ -0,0 +1,33 @@
+import { TreeColumnBaseProps } from '@progress/kendo-vue-data-tools';
+/**
+ * The props of the columns of the TreeList component.
+ */
+export interface TreeListColumnProps extends TreeColumnBaseProps {
+    /**
+     * Defines the component that will be rendered as a cell. If not set, a `TreeListCell` will be rendered by default.
+     */
+    cell?: any;
+    /**
+     * Defines the component that will be rendered as an edit cell.
+     */
+    editCell?: any;
+    /**
+     * Defines the component that will be rendered as a header cell.
+     * If not set, a `TreeListHeaderCell` will be rendered by default.
+     */
+    headerCell?: any;
+    /**
+     * Defines the component that will be rendered as a filter cell.
+     */
+    filterCell?: any;
+    /**
+     * A collection of child columns.
+     */
+    children?: TreeListColumnProps[];
+    /**
+     * Defines if the column is locked (frozen or sticky).
+     * Locked columns are the columns that are visible at all times while the user scrolls the component horizontally.
+     * Defaults to `false`.
+     */
+    locked?: boolean;
+}

package/dist/es/interfaces/TreeListColumnProps.js

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

package/dist/es/interfaces/TreeListFilterCellProps.d.ts

@@ -0,0 +1,6 @@
+import { FilterCellProps } from '@progress/kendo-vue-data-tools';
+/**
+ * @hidden
+ */
+export interface TreeListFilterCellProps extends FilterCellProps {
+}

package/dist/es/interfaces/TreeListFilterCellProps.js

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

package/dist/es/interfaces/TreeListFilterOperator.d.ts

@@ -0,0 +1,6 @@
+import { FilterOperator } from '@progress/kendo-vue-data-tools';
+/**
+ * The filter operator for the TreeList filters.
+ */
+export interface TreeListFilterOperator extends FilterOperator {
+}

package/dist/es/interfaces/TreeListFilterOperator.js

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

package/dist/es/interfaces/TreeListHeaderCellProps.d.ts

@@ -0,0 +1,6 @@
+import { HeaderCellProps } from '@progress/kendo-vue-data-tools';
+/**
+ * The props of the TreeListHeaderCell component.
+ */
+export interface TreeListHeaderCellProps extends HeaderCellProps {
+}

package/dist/es/interfaces/TreeListHeaderCellProps.js

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

package/dist/es/interfaces/TreeListNoRecordsProps.d.ts

@@ -0,0 +1,5 @@
+/**
+ * The props of the TreeListNoRecords component.
+ */
+export interface TreeListNoRecordsProps {
+}

package/dist/es/interfaces/TreeListNoRecordsProps.js

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