@progress/kendo-vue-listbox 3.7.4-dev.202212300853

package/dist/es/ListBox.js

@@ -0,0 +1,253 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+import { classNames, guid, kendoThemeMaps, validatePackage, templateRendering, getListeners, getTemplate } from '@progress/kendo-vue-common';
+import { toolbarPosition } from './interfaces/Enums';
+import { packageMetadata } from './package-metadata';
+/**
+ * @hidden
+ */
+var ListBoxVue2 = {
+  name: 'KendoListBox',
+  // @ts-ignore
+  emits: {
+    dragstart: null,
+    itemclick: null,
+    drop: null,
+    dragover: null,
+    keydown: null,
+    dragleave: null
+  },
+  props: {
+    size: {
+      type: String,
+      default: 'medium',
+      validator: function validator(value) {
+        return [null, 'small', 'medium', 'large'].includes(value);
+      }
+    },
+    toolbarPosition: {
+      type: String,
+      default: toolbarPosition.RIGHT,
+      validator: function validator(value) {
+        return ['none', 'top', 'bottom', 'left', 'right'].includes(value);
+      }
+    },
+    textField: String,
+    valueField: String,
+    keyField: String,
+    selectedField: String,
+    item: [String, Object, Function],
+    toolbar: [String, Object, Function],
+    tabIndex: Number,
+    dataItems: {
+      type: Array,
+      default: function _default() {
+        return [];
+      }
+    },
+    draggable: {
+      type: Boolean,
+      default: true
+    }
+  },
+  created: function created() {
+    validatePackage(packageMetadata);
+  },
+  computed: {
+    wrapperClass: function wrapperClass() {
+      var _a;
+      var nonePosition = this.$props.toolbarPosition === toolbarPosition.NONE || this.$props.toolbar === undefined;
+      return _a = {
+        'k-listbox': true
+      }, _a["k-listbox-toolbar-".concat(this.$props.toolbarPosition)] = !nonePosition, _a;
+    }
+  },
+  // @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 toolbarTemplate = templateRendering.call(this, this.$props.toolbar, getListeners.call(this));
+    var toolbarRender = getTemplate.call(this, {
+      h: h,
+      template: toolbarTemplate
+    });
+    return h("div", {
+      "class": this.wrapperClass,
+      unselectable: "on",
+      attrs: this.v3 ? undefined : {
+        unselectable: "on"
+      }
+    }, [this.$props.toolbarPosition !== 'bottom' && toolbarRender, h("div", {
+      "class": 'k-list-scroller k-selectable',
+      "data-role": 'selectable',
+      attrs: this.v3 ? undefined : {
+        "data-role": 'selectable'
+      },
+      onDragover: function onDragover(e) {
+        return e.preventDefault();
+      },
+      on: this.v3 ? undefined : {
+        "dragover": function onDragover(e) {
+          return e.preventDefault();
+        },
+        "drop": this.handleContainerDrop,
+        "dragleave": this.handleOnDragLeave
+      },
+      onDrop: this.handleContainerDrop,
+      onDragleave: this.handleOnDragLeave
+    }, [h("div", {
+      "class": classNames('k-list', (_a = {}, _a["k-list-".concat(kendoThemeMaps.sizeMap[this.$props.size] || this.$props.size)] = this.$props.size, _a))
+    }, [h("div", {
+      "class": 'k-list-content'
+    }, [h("ul", {
+      "class": 'k-list-ul',
+      role: 'listbox',
+      attrs: this.v3 ? undefined : {
+        role: 'listbox',
+        "aria-label": 'listbox-container',
+        tabIndex: this.tabIndex
+      },
+      "aria-label": 'listbox-container',
+      tabIndex: this.tabIndex,
+      onKeydown: this.handleKeyDown,
+      on: this.v3 ? undefined : {
+        "keydown": this.handleKeyDown
+      }
+    }, [this.$props.dataItems.map(function (item, index) {
+      var _this = this;
+      var selectedValue = this.setSelected(item);
+      var itemGuid = guid();
+      var defaultRendering = h("span", {
+        "class": 'k-list-item-text'
+      }, [this.$props.textField ? item[this.$props.textField] : item.toString()]);
+      var itemTemplate = templateRendering.call(this, this.$props.item, getListeners.call(this));
+      var itemRender = getTemplate.call(this, {
+        h: h,
+        template: itemTemplate,
+        defaultRendering: defaultRendering,
+        additionalProps: {
+          dataItem: item,
+          index: index
+        }
+      });
+      return h("li", {
+        "class": classNames('k-list-item', {
+          'k-selected': selectedValue
+        }, item.class),
+        style: item.style,
+        role: 'option',
+        attrs: this.v3 ? undefined : {
+          role: 'option',
+          "aria-selected": selectedValue,
+          id: itemGuid + index,
+          "data-uid": itemGuid + index,
+          draggable: this.$props.draggable
+        },
+        "aria-selected": selectedValue,
+        key: this.$props.keyField ? item[this.$props.keyField] : index,
+        id: itemGuid + index,
+        "data-uid": itemGuid + index,
+        draggable: this.$props.draggable,
+        onDragstart: function onDragstart(event) {
+          return _this.dispatchEvent('dragstart', event, item);
+        },
+        on: this.v3 ? undefined : {
+          "dragstart": function onDragstart(event) {
+            return _this.dispatchEvent('dragstart', event, item);
+          },
+          "dragOver": function dragOver(event) {
+            event.preventDefault();
+            _this.dispatchEvent('dragover', event, item);
+          },
+          "drop": function drop(event) {
+            return _this.dispatchEvent('drop', event, item);
+          },
+          "click": function click(event) {
+            return _this.dispatchEvent('itemclick', event, item);
+          }
+        },
+        onDragOver: function dragOver(event) {
+          event.preventDefault();
+          _this.dispatchEvent('dragover', event, item);
+        },
+        onDrop: function drop(event) {
+          return _this.dispatchEvent('drop', event, item);
+        },
+        onClick: function click(event) {
+          return _this.dispatchEvent('itemclick', event, item);
+        }
+      }, [itemRender]);
+    }, this)])])])]), this.$props.toolbarPosition === 'bottom' && toolbarRender, h("select", {
+      style: {
+        display: 'none'
+      },
+      multiple: true,
+      attrs: this.v3 ? undefined : {
+        multiple: true,
+        "data-role": "listbox"
+      },
+      "data-role": "listbox"
+    }, [this.$props.dataItems.map(function (item, index) {
+      var value = item[this.$props.valueField || this.$props.textField];
+      return h("option", {
+        key: index,
+        value: this.v3 ? value : null,
+        domProps: this.v3 ? undefined : {
+          "value": value
+        }
+      }, [value]);
+    }, this)])]);
+  },
+  methods: {
+    dispatchEvent: function dispatchEvent(eventName, event, item) {
+      this.$emit(eventName, {
+        event: event,
+        component: this,
+        dataItem: item
+      });
+    },
+    setSelected: function setSelected(item) {
+      if (this.$props.selectedField) {
+        return item[this.$props.selectedField] ? true : false;
+      }
+    },
+    handleKeyDown: function handleKeyDown(event) {
+      this.$emit('keydown', {
+        event: event,
+        component: this
+      });
+    },
+    handleContainerDrop: function handleContainerDrop(event) {
+      var targetElement = event.target;
+      var isTargetContainer = targetElement.classList.contains('k-list-scroller');
+      var items = this.$props.dataItems;
+      if (isTargetContainer) {
+        this.$emit('drop', {
+          event: event,
+          component: this,
+          dataItem: items.length > 0 ? items[items.length - 1] : null
+        });
+      }
+    },
+    handleOnDragLeave: function handleOnDragLeave(event) {
+      if (this.$props.onDragLeave && event.target.classList.contains('k-list-scroller')) {
+        this.$emit('dragleave', {
+          event: event,
+          component: this
+        });
+      }
+    }
+  }
+};
+var ListBox = ListBoxVue2;
+export { ListBox, ListBoxVue2 };

package/dist/es/ListBoxToolbar.d.ts

@@ -0,0 +1,40 @@
+import { DefineComponent } from './additionalTypes';
+import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+import { ListBoxToolbarProps } from './interfaces/ListBoxToolBarProps';
+/**
+ * @hidden
+ */
+export interface ListBoxToolbarState {
+}
+/**
+ * @hidden
+ */
+export interface ListBoxToolbarComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface ListBoxToolbarMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface ListBoxToolbarData {
+}
+/**
+ * @hidden
+ */
+export interface ListBoxToolbarAll extends Vue, ListBoxToolbarMethods, ListBoxToolbarData, ListBoxToolbarComputed, ListBoxToolbarState {
+}
+/**
+ * @hidden
+ */
+declare let ListBoxToolbarVue2: ComponentOptions<ListBoxToolbarAll, DefaultData<ListBoxToolbarData>, DefaultMethods<ListBoxToolbarAll>, ListBoxToolbarComputed, RecordPropsDefinition<ListBoxToolbarProps>>;
+declare const ListBoxToolbar: DefineComponent<ListBoxToolbarProps, any, ListBoxToolbarData, ListBoxToolbarComputed, ListBoxToolbarMethods, {}, {}, {}, string, ListBoxToolbarProps, ListBoxToolbarProps, {}>;
+export { ListBoxToolbar, ListBoxToolbarVue2 };

package/dist/es/ListBoxToolbar.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';
+import { Button } from '@progress/kendo-vue-buttons';
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { messages } from './messages/main';
+var tools = [{
+  name: 'moveUp',
+  iconName: 'caret-alt-up'
+}, {
+  name: 'moveDown',
+  iconName: 'caret-alt-down'
+}, {
+  name: 'transferTo',
+  iconName: 'caret-alt-right'
+}, {
+  name: 'transferFrom',
+  iconName: 'caret-alt-left'
+}, {
+  name: 'transferAllTo',
+  iconName: 'caret-double-alt-right'
+}, {
+  name: 'transferAllFrom',
+  iconName: 'caret-double-alt-left'
+}, {
+  name: 'remove',
+  iconName: 'x'
+}];
+/**
+ * @hidden
+ */
+var ListBoxToolbarVue2 = {
+  name: 'KendoListBoxToolbar',
+  props: {
+    dataItems: Array,
+    dataConnected: Array,
+    tools: Array,
+    selectedField: {
+      type: String,
+      default: 'selected'
+    }
+  },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var localizationService = provideLocalizationService(this);
+    return h("div", {
+      "class": 'k-listbox-toolbar'
+    }, [h("ul", {
+      "class": "k-reset"
+    }, [this.$props.tools && this.$props.tools.map(function (tool, index) {
+      var _this = this;
+      var indexOfTool = tools.findIndex(function (x) {
+        return x.name === tool;
+      });
+      var currentTool = tools[indexOfTool];
+      var isDisabled = this.isItemDisabled(currentTool.name);
+      var toolKey = "listbox.".concat(currentTool.name);
+      var title = localizationService.toLanguageString(toolKey, messages[toolKey]);
+      return h("li", {
+        key: index
+      }, [h(Button, {
+        disabled: isDisabled,
+        attrs: this.v3 ? undefined : {
+          disabled: isDisabled,
+          "data-command": currentTool.name,
+          title: title,
+          "aria-label": title,
+          icon: currentTool.iconName
+        },
+        "data-command": currentTool.name,
+        title: title,
+        "aria-label": title,
+        icon: currentTool.iconName,
+        onClick: function onClick(e) {
+          e.preventDefault();
+          _this.handleToolClick(e, currentTool.name || null);
+        },
+        on: this.v3 ? undefined : {
+          "click": function onClick(e) {
+            e.preventDefault();
+            _this.handleToolClick(e, currentTool.name || null);
+          }
+        }
+      })]);
+    }, this)])]);
+  },
+  methods: {
+    handleToolClick: function handleToolClick(event, name) {
+      this.$emit('toolclick', {
+        event: event,
+        component: this,
+        toolName: name
+      });
+    },
+    isItemDisabled: function isItemDisabled(tool) {
+      var disabled = true;
+      var selectedField = this.$props.selectedField || 'selected';
+      var dataLength = this.$props.dataItems.length;
+      var dataConnectedLength = this.$props.dataConnected.length;
+      var hasSelected = this.$props.dataItems.findIndex(function (item) {
+        return item[selectedField] === true;
+      }) >= 0;
+      var hasSelectedTwo = this.$props.dataConnected.findIndex(function (item) {
+        return item[selectedField] === true;
+      }) >= 0;
+      switch (tool) {
+        case 'moveUp':
+          if (hasSelected) {
+            disabled = this.$props.dataItems.length > 0 ? this.$props.dataItems[0].selected : true;
+          } else if (hasSelectedTwo) {
+            disabled = this.$props.dataConnected.length > 0 ? this.$props.dataConnected[0].selected : true;
+          } else {
+            disabled = true;
+          }
+          break;
+        case 'moveDown':
+          if (hasSelected) {
+            disabled = this.$props.dataItems[dataLength - 1] ? this.$props.dataItems[dataLength - 1].selectedField : true;
+          } else if (hasSelectedTwo) {
+            disabled = this.$props.dataConnected.length > 0 ? this.$props.dataConnected[dataConnectedLength - 1].selected : true;
+          } else {
+            disabled = true;
+          }
+          break;
+        case 'transferTo':
+          disabled = !(this.$props.dataConnected && hasSelected);
+          break;
+        case 'transferFrom':
+          if (this.$props.dataConnected) {
+            disabled = !(this.$props.dataConnected && hasSelectedTwo);
+          } else {
+            disabled = true;
+          }
+          break;
+        case 'transferAllTo':
+          disabled = !(this.$props.dataConnected && this.$props.dataItems.length > 0);
+          break;
+        case 'transferAllFrom':
+          disabled = !(this.$props.dataConnected && this.$props.dataConnected.length > 0);
+          break;
+        case 'remove':
+          disabled = !(hasSelected || hasSelectedTwo);
+          break;
+        default:
+      }
+      return disabled;
+    }
+  }
+};
+var ListBoxToolbar = ListBoxToolbarVue2;
+export { ListBoxToolbar, ListBoxToolbarVue2 };

package/dist/es/additionalTypes.ts

@@ -0,0 +1,21 @@
+// @ts-ignore
+import { DefineComponent } from 'vue';
+// @ts-ignore
+import * as Vue from 'vue';
+
+/**
+ * @hidden
+ */
+// @ts-ignore
+type Vue2type = Vue.default;
+
+/**
+ * @hidden
+ */
+// @ts-ignore
+import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
+/**
+ * @hidden
+ */
+// @ts-ignore
+export { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type };

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

@@ -0,0 +1,7 @@
+export declare enum toolbarPosition {
+    TOP = "top",
+    BOTTOM = "bottom",
+    LEFT = "left",
+    RIGHT = "right",
+    NONE = "none"
+}

package/dist/es/interfaces/Enums.js

@@ -0,0 +1,8 @@
+export var toolbarPosition;
+(function (toolbarPosition) {
+  toolbarPosition["TOP"] = "top";
+  toolbarPosition["BOTTOM"] = "bottom";
+  toolbarPosition["LEFT"] = "left";
+  toolbarPosition["RIGHT"] = "right";
+  toolbarPosition["NONE"] = "none";
+})(toolbarPosition || (toolbarPosition = {}));

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

@@ -0,0 +1,13 @@
+export interface ListBoxItemClickEvent {
+    dataItem?: any;
+}
+export interface ListBoxKeyDownEvent {
+}
+export interface ListBoxDragLeaveEvent {
+}
+export interface ListBoxToolbarClickEvent {
+    toolName?: string;
+}
+export interface ListBoxDragEvent {
+    dataItem?: any;
+}

package/dist/es/interfaces/ListBoxEvents.js

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

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

@@ -0,0 +1,93 @@
+import { ListBoxItemClickEvent, ListBoxKeyDownEvent, ListBoxDragEvent, ListBoxDragLeaveEvent } from './ListBoxEvents';
+import { toolbarPosition } from './Enums';
+/**
+ * Represents the props of the [Kendo UI for Vue ListBox component]({% slug overview_listbox %}).
+ */
+export interface ListBoxProps {
+    /**
+     * Sets a class of the Tooltip animation container.
+     */
+    className?: string;
+    /**
+     * Configures the `size` of the ListBox.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null—Does not set a size `className`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large' | string;
+    /**
+     * Set the data of the ListBox.
+     */
+    dataItems: Array<any>;
+    /**
+     * Makes the items of the ListBox draggable. The items are draggable by default.
+     */
+    draggable?: boolean;
+    /**
+     * Set the selected field of the ListBox. Based on that value of that field, an item will be selected or not.
+     */
+    selectedField?: string;
+    /**
+     * Sets the data item field that represents the item text. If the data contains only primitive values, do not define it.
+     */
+    textField: string;
+    /**
+     * The field that be used during form submit. Defaults to the textField if not set.
+     */
+    valueField?: string;
+    /**
+     * The field that is used for rendering key of the items.
+     */
+    keyField?: string;
+    /**
+     * Sets the position of the toolbar of the ListBox if one is set. The ListBox may have no toolbar.
+     * * The possible values are:
+     * * `top`
+     * * `bottom`
+     * * `left`
+     * * `right` (Default)
+     * * `none`
+     */
+    toolbarPosition?: toolbarPosition | string;
+    /**
+     * Renders a toolbar component next to the ListBox.
+     */
+    toolbar?: string | object | Function;
+    /**
+     * Sets the `tabIndex` attribute of the ListBox.
+     */
+    tabIndex?: number;
+    /**
+     * Defines the component that will be rendered for each item of the data collection.
+     */
+    item?: string | object | Function;
+    /**
+     * Fires when an item from the ListBox is clicked. Contains the clicked item.
+     */
+    onItemclick?: (event: ListBoxItemClickEvent) => void;
+    /**
+     * Fires on keydown over the ListBox list items. It can be use to add keyboard extra keyboard navigation option.
+     */
+    onKeydown?: (event: ListBoxKeyDownEvent) => void;
+    /**
+     * Fires when an the user start to drag an item from the ListBox. The event contains information for the item that is being dragged.
+     */
+    onDragstart?: (event: ListBoxDragEvent) => void;
+    /**
+     * Fires when an the user drags over an item from the ListBox. The event contains information for the item that is dragged over.
+     */
+    onDragover?: (event: ListBoxDragEvent) => void;
+    /**
+     * Fires when an the user drops an item. The event contains information for the drop target item.
+     */
+    onDrop?: (event: ListBoxDragEvent) => void;
+    /**
+     * Fires when a dragged element or text selection leaves the ListBox element.
+     */
+    onDragleave?: (event: ListBoxDragLeaveEvent) => void;
+}

package/dist/es/interfaces/ListBoxProps.js

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

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

@@ -0,0 +1,32 @@
+import { ListBoxToolbarClickEvent } from './ListBoxEvents';
+export interface ListBoxToolbarProps {
+    /**
+     * Sets the tools of the ListBoxToolbar. By default, the ListBoxToolbar renders no tools.
+     * The built-in tools are:
+     * * `moveUp`
+     * * `moveDown`
+     * * `transferTo`
+     * * `transferFrom`
+     * * `transferAllTo`
+     * * `transferAllFrom`
+     * * `remove`
+     */
+    tools?: Array<string>;
+    /**
+     * The data of the main ListBox.
+     */
+    dataItems: Array<any>;
+    /**
+     * The data of the connected ListBox.
+     */
+    dataConnected: Array<any>;
+    /**
+     * Set the selected field of the ListBoxToolbar.
+     * Based on that value of that field the ListBoxToolbar will determine which actions are allowed and which disabled.
+     */
+    selectedField?: string;
+    /**
+     * Fires when one of the ListBoxToolbar tools is clicked.
+     */
+    onToolclick?: (event: ListBoxToolbarClickEvent) => void;
+}

package/dist/es/interfaces/ListBoxToolBarProps.js

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

package/dist/es/main.d.ts

@@ -0,0 +1,7 @@
+import { ListBox } from './ListBox';
+import { ListBoxProps } from './interfaces/ListBoxProps';
+import { ListBoxToolbar } from './ListBoxToolbar';
+import { ListBoxToolbarProps } from './interfaces/ListBoxToolBarProps';
+import { processListBoxData, moveItem, processListBoxDragAndDrop } from './utils';
+import { ListBoxDragEvent, ListBoxItemClickEvent, ListBoxKeyDownEvent, ListBoxToolbarClickEvent } from './interfaces/ListBoxEvents';
+export { ListBox, ListBoxProps, ListBoxToolbar, ListBoxToolbarProps, processListBoxData, moveItem, processListBoxDragAndDrop, ListBoxDragEvent, ListBoxItemClickEvent, ListBoxKeyDownEvent, ListBoxToolbarClickEvent };

package/dist/es/main.js

@@ -0,0 +1,4 @@
+import { ListBox } from './ListBox';
+import { ListBoxToolbar } from './ListBoxToolbar';
+import { processListBoxData, moveItem, processListBoxDragAndDrop } from './utils';
+export { ListBox, ListBoxToolbar, processListBoxData, moveItem, processListBoxDragAndDrop };