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

package/dist/esm/utils.js

@@ -0,0 +1,195 @@
+var __spreadArray = this && this.__spreadArray || function (to, from, pack) {
+  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+    if (ar || !(i in from)) {
+      if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+      ar[i] = from[i];
+    }
+  }
+  return to.concat(ar || Array.prototype.slice.call(from));
+};
+/**
+ * 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.
+ */
+// tslint:disable-next-line: max-line-length
+export var processListBoxData = function processListBoxData(listBoxOneData, listBoxTwoData, toolName, selectedField) {
+  if (listBoxOneData === void 0) {
+    listBoxOneData = [];
+  }
+  if (listBoxTwoData === void 0) {
+    listBoxTwoData = [];
+  }
+  var newFirstData = [];
+  var itemsForTransfer = [];
+  var newSecondData = [];
+  var result = {
+    listBoxOneData: listBoxOneData,
+    listBoxTwoData: listBoxTwoData
+  };
+  switch (toolName) {
+    case 'moveUp':
+      newFirstData = __spreadArray([], listBoxOneData, true);
+      newFirstData.forEach(function (item, index) {
+        if (item[selectedField]) {
+          newFirstData = moveItem(index, index - 1, newFirstData);
+        }
+      });
+      newSecondData = __spreadArray([], listBoxTwoData, true);
+      newSecondData.forEach(function (item, index) {
+        if (item[selectedField]) {
+          newSecondData = moveItem(index, index - 1, newSecondData);
+        }
+      });
+      result.listBoxOneData = newFirstData;
+      result.listBoxTwoData = newSecondData;
+      break;
+    case 'moveDown':
+      newFirstData = listBoxOneData.reverse();
+      newFirstData.forEach(function (item, index) {
+        if (item[selectedField]) {
+          newFirstData = moveItem(index, index - 1, newFirstData);
+        }
+      });
+      newSecondData = listBoxTwoData.reverse();
+      newSecondData.forEach(function (item, index) {
+        if (item[selectedField]) {
+          newSecondData = moveItem(index, index - 1, newSecondData);
+        }
+      });
+      result.listBoxOneData = __spreadArray([], newFirstData, true).reverse();
+      result.listBoxTwoData = __spreadArray([], newSecondData, true).reverse();
+      break;
+    case 'transferTo':
+      newFirstData = listBoxOneData.filter(function (item) {
+        return !item[selectedField];
+      });
+      itemsForTransfer = listBoxOneData.filter(function (item) {
+        return item[selectedField];
+      });
+      newSecondData = listBoxTwoData.concat(itemsForTransfer);
+      result.listBoxOneData = newFirstData;
+      result.listBoxTwoData = newSecondData;
+      break;
+    case 'transferFrom':
+      newSecondData = listBoxTwoData.filter(function (item) {
+        return !item[selectedField];
+      });
+      itemsForTransfer = listBoxTwoData.filter(function (item) {
+        return item[selectedField];
+      });
+      newFirstData = listBoxOneData.concat(itemsForTransfer);
+      result.listBoxOneData = newFirstData;
+      result.listBoxTwoData = newSecondData;
+      break;
+    case 'transferAllTo':
+      result.listBoxOneData = [];
+      result.listBoxTwoData = listBoxTwoData.concat(listBoxOneData);
+      break;
+    case 'transferAllFrom':
+      result.listBoxOneData = listBoxTwoData.concat(listBoxOneData);
+      result.listBoxTwoData = [];
+      break;
+    case 'remove':
+      newSecondData = listBoxTwoData.filter(function (item) {
+        return !item[selectedField];
+      });
+      newFirstData = listBoxOneData.filter(function (item) {
+        return !item[selectedField];
+      });
+      result.listBoxOneData = newFirstData;
+      result.listBoxTwoData = newSecondData;
+      break;
+    default:
+  }
+  return result;
+};
+/**
+ * @hidden
+ */
+export var moveItem = function moveItem(from, to, data) {
+  var f = data.splice(from, 1)[0];
+  data.splice(to, 0, f);
+  return data;
+};
+/**
+ * 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.
+ */
+// tslint:disable-next-line: max-line-length
+export var processListBoxDragAndDrop = function processListBoxDragAndDrop(listBoxOneData, listBoxTwoData, dragItem, dropItem, valueField) {
+  if (listBoxOneData === void 0) {
+    listBoxOneData = [];
+  }
+  if (listBoxTwoData === void 0) {
+    listBoxTwoData = [];
+  }
+  var dragItemIndexInFirstList = listBoxOneData.findIndex(function (item) {
+    return item[valueField] === dragItem[valueField];
+  });
+  var dragItemIndexInSecondList = listBoxTwoData.findIndex(function (item) {
+    return item[valueField] === dragItem[valueField];
+  });
+  var dropItemIndexInFirstList = dropItem !== null ? listBoxOneData.findIndex(function (item) {
+    return item[valueField] === dropItem[valueField];
+  }) : -1;
+  var dropItemIndexInSecondList = dropItem !== null ? listBoxTwoData.findIndex(function (item) {
+    return item[valueField] === dropItem[valueField];
+  }) : -1;
+  var isDragItemInFirstList = dragItemIndexInFirstList >= 0 ? true : false;
+  var isDragItemInSecondList = dragItemIndexInSecondList >= 0 ? true : false;
+  var isDropItemInFirstList = dropItemIndexInFirstList >= 0 ? true : false;
+  var isDropItemInSecondList = dropItemIndexInSecondList >= 0 ? true : false;
+  var firstDataSet = __spreadArray([], listBoxOneData, true);
+  var secondDataSet = __spreadArray([], listBoxTwoData, true);
+  if (isDragItemInFirstList && isDropItemInFirstList) {
+    return {
+      listBoxOneData: moveItem(dragItemIndexInFirstList, dropItemIndexInFirstList, listBoxOneData),
+      listBoxTwoData: listBoxTwoData
+    };
+  }
+  if (isDragItemInSecondList && isDropItemInSecondList) {
+    return {
+      listBoxOneData: listBoxOneData,
+      listBoxTwoData: moveItem(dragItemIndexInSecondList, dropItemIndexInSecondList, listBoxTwoData)
+    };
+  }
+  if (isDragItemInFirstList && (isDropItemInSecondList || dropItem === null)) {
+    if (dropItem === null) {
+      secondDataSet.push(listBoxOneData[dragItemIndexInFirstList]);
+    } else {
+      secondDataSet.splice(dropItemIndexInSecondList + 1, 0, listBoxOneData[dragItemIndexInFirstList]);
+    }
+    firstDataSet.splice(dragItemIndexInFirstList, 1);
+    return {
+      listBoxOneData: firstDataSet,
+      listBoxTwoData: secondDataSet
+    };
+  }
+  if (isDragItemInSecondList && (isDropItemInFirstList || dropItem === null)) {
+    if (dropItem === null) {
+      firstDataSet.push(listBoxTwoData[dragItemIndexInSecondList]);
+    } else {
+      firstDataSet.splice(dropItemIndexInFirstList + 1, 0, listBoxTwoData[dragItemIndexInSecondList]);
+    }
+    secondDataSet.splice(dragItemIndexInSecondList, 1);
+    return {
+      listBoxOneData: firstDataSet,
+      listBoxTwoData: secondDataSet
+    };
+  }
+  return {
+    listBoxOneData: listBoxOneData,
+    listBoxTwoData: listBoxTwoData
+  };
+};

package/dist/npm/ListBox.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 { ListBoxProps } from './interfaces/ListBoxProps';
+/**
+ * @hidden
+ */
+export interface ListBoxState {
+}
+/**
+ * @hidden
+ */
+export interface ListBoxComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface ListBoxMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface ListBoxData {
+}
+/**
+ * @hidden
+ */
+export interface ListBoxAll extends Vue, ListBoxMethods, ListBoxData, ListBoxComputed, ListBoxState {
+}
+/**
+ * @hidden
+ */
+declare let ListBoxVue2: ComponentOptions<ListBoxAll, DefaultData<ListBoxData>, DefaultMethods<ListBoxAll>, ListBoxComputed, RecordPropsDefinition<ListBoxProps>>;
+declare const ListBox: DefineComponent<ListBoxProps, any, ListBoxData, ListBoxComputed, ListBoxMethods, {}, {}, {}, string, ListBoxProps, ListBoxProps, {}>;
+export { ListBox, ListBoxVue2 };

package/dist/npm/ListBox.js

@@ -0,0 +1,260 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListBoxVue2 = exports.ListBox = void 0;
+// @ts-ignore
+var Vue = require("vue");
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+var kendo_vue_common_1 = require("@progress/kendo-vue-common");
+var Enums_1 = require("./interfaces/Enums");
+var package_metadata_1 = require("./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: Enums_1.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() {
+    (0, kendo_vue_common_1.validatePackage)(package_metadata_1.packageMetadata);
+  },
+  computed: {
+    wrapperClass: function wrapperClass() {
+      var _a;
+      var nonePosition = this.$props.toolbarPosition === Enums_1.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 = kendo_vue_common_1.templateRendering.call(this, this.$props.toolbar, kendo_vue_common_1.getListeners.call(this));
+    var toolbarRender = kendo_vue_common_1.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": (0, kendo_vue_common_1.classNames)('k-list', (_a = {}, _a["k-list-".concat(kendo_vue_common_1.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 = (0, kendo_vue_common_1.guid)();
+      var defaultRendering = h("span", {
+        "class": 'k-list-item-text'
+      }, [this.$props.textField ? item[this.$props.textField] : item.toString()]);
+      var itemTemplate = kendo_vue_common_1.templateRendering.call(this, this.$props.item, kendo_vue_common_1.getListeners.call(this));
+      var itemRender = kendo_vue_common_1.getTemplate.call(this, {
+        h: h,
+        template: itemTemplate,
+        defaultRendering: defaultRendering,
+        additionalProps: {
+          dataItem: item,
+          index: index
+        }
+      });
+      return h("li", {
+        "class": (0, kendo_vue_common_1.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
+        });
+      }
+    }
+  }
+};
+exports.ListBoxVue2 = ListBoxVue2;
+var ListBox = ListBoxVue2;
+exports.ListBox = ListBox;

package/dist/npm/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 };