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

package/dist/esm/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.js';
+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/esm/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/esm/interfaces/Enums.d.ts

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

package/dist/esm/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/esm/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/esm/interfaces/ListBoxEvents.js

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

package/dist/esm/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/esm/interfaces/ListBoxProps.js

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

package/dist/esm/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/esm/interfaces/ListBoxToolBarProps.js

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

package/dist/esm/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/esm/main.js

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

package/dist/esm/messages/main.d.ts

@@ -0,0 +1,40 @@
+/**
+ * @hidden
+ */
+export declare const moveUp = "listbox.moveUp";
+/**
+ * @hidden
+ */
+export declare const moveDown = "listbox.moveDown";
+/**
+ * @hidden
+ */
+export declare const transferTo = "listbox.transferTo";
+/**
+ * @hidden
+ */
+export declare const transferFrom = "listbox.transferFrom";
+/**
+ * @hidden
+ */
+export declare const transferAllTo = "listbox.transferAllTo";
+/**
+ * @hidden
+ */
+export declare const transferAllFrom = "listbox.transferAllFrom";
+/**
+ * @hidden
+ */
+export declare const remove = "listbox.remove";
+/**
+ * @hidden
+ */
+export declare const messages: {
+    "listbox.moveUp": string;
+    "listbox.moveDown": string;
+    "listbox.transferTo": string;
+    "listbox.transferFrom": string;
+    "listbox.transferAllTo": string;
+    "listbox.transferAllFrom": string;
+    "listbox.remove": string;
+};

package/dist/esm/messages/main.js

@@ -0,0 +1,41 @@
+var _a;
+/**
+ * @hidden
+ */
+export var moveUp = 'listbox.moveUp';
+/**
+ * @hidden
+ */
+export var moveDown = 'listbox.moveDown';
+/**
+ * @hidden
+ */
+export var transferTo = 'listbox.transferTo';
+/**
+ * @hidden
+ */
+export var transferFrom = 'listbox.transferFrom';
+/**
+ * @hidden
+ */
+export var transferAllTo = 'listbox.transferAllTo';
+/**
+ * @hidden
+ */
+export var transferAllFrom = 'listbox.transferAllFrom';
+/**
+ * @hidden
+ */
+export var remove = 'listbox.remove';
+/**
+ * @hidden
+ */
+export var messages = (_a = {},
+    _a[moveUp] = 'Move Up',
+    _a[moveDown] = 'Move Down',
+    _a[transferTo] = 'Transfer To',
+    _a[transferFrom] = 'Transfer From',
+    _a[transferAllTo] = 'Transfer All To',
+    _a[transferAllFrom] = 'Transfer All From',
+    _a[remove] = 'Delete',
+    _a);

package/dist/esm/package-metadata.d.ts

@@ -0,0 +1,5 @@
+import { PackageMetadata } from '@progress/kendo-licensing';
+/**
+ * @hidden
+ */
+export declare const packageMetadata: PackageMetadata;

package/dist/esm/package-metadata.js

@@ -0,0 +1,11 @@
+/**
+ * @hidden
+ */
+export var packageMetadata = {
+    name: '@progress/kendo-vue-listbox',
+    productName: 'Kendo UI for Vue',
+    productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
+    publishDate: 1672390045,
+    version: '',
+    licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
+};

package/dist/esm/package.json

@@ -0,0 +1,3 @@
+{
+                    "type": "module"
+                 }

package/dist/esm/utils.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Process the data collection/s based on the clicked ListBoxToolbar tool.
+ *
+ * @param {T[]} listBoxOneData - The first data collection.
+ * @param {T[]} listBoxTwoData - The second data collection. Pass an empty array if there is only one ListBox.
+ * @param {string} toolName - The tool that was clicked.
+ * @param {string} selectedField - The field that contains the selected information in the data object.
+ * @returns {{listBoxOneData: T[], listBoxTwoData: t[]}} - The object that contains the new data collections.
+ */
+export declare const processListBoxData: (listBoxOneData: Array<any>, listBoxTwoData: Array<any>, toolName: string, selectedField: string) => {
+    listBoxOneData: any[];
+    listBoxTwoData: any[];
+};
+/**
+ * @hidden
+ */
+export declare const moveItem: (from: number, to: number, data: Array<any>) => any[];
+/**
+ * Process the data collection/s based on the dragged and drop item.
+ *
+ * @param {T[]} listBoxOneData - The first data collection.
+ * @param {T[]} listBoxTwoData - The second data collection. Pass an empty array if there is only one ListBox.
+ * @param {any} dragItem - The item that was dragged.
+ * @param {any} dropItem - The drop target item.
+ * @param {string} valueField - The field which points to the unique value of each data item.
+ * @returns {{listBoxOneData: T[], listBoxTwoData: t[]}} - The object that contains the new data collections.
+ */
+export declare const processListBoxDragAndDrop: (listBoxOneData: Array<any>, listBoxTwoData: Array<any>, dragItem: any, dropItem: any, valueField: string) => {
+    listBoxOneData: any[];
+    listBoxTwoData: any[];
+};