@progress/kendo-vue-listbox/ListBox.mjs

TODO

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { defineComponent as $, h as n, createVNode as o } from "vue";
import { validatePackage as k, templateRendering as p, getListeners as d, getTemplate as c, classNames as h, kendoThemeMaps as v, guid as f } from "@progress/kendo-vue-common";
import { toolbarPosition as u } from "./interfaces/Enums.mjs";
import { packageMetadata as y } from "./package-metadata.mjs";
const I = /* @__PURE__ */ $({
  name: "KendoListBox",
  emits: {
    dragstart: null,
    itemclick: null,
    drop: null,
    dragover: null,
    keydown: null,
    dragleave: null
  },
  props: {
    size: {
      type: String,
      default: "medium",
      validator: function(s) {
        return [null, "small", "medium", "large"].includes(s);
      }
    },
    toolbarPosition: {
      type: String,
      default: u.RIGHT,
      validator: function(s) {
        return ["none", "top", "bottom", "left", "right"].includes(s);
      }
    },
    textField: String,
    valueField: String,
    keyField: String,
    selectedField: String,
    item: [String, Object, Function],
    toolbar: [String, Object, Function],
    tabIndex: Number,
    dataItems: {
      type: Array,
      default: function() {
        return [];
      }
    },
    draggable: {
      type: Boolean,
      default: !1
    }
  },
  created() {
    k(y);
  },
  computed: {
    wrapperClass() {
      const e = this.$props.toolbarPosition === u.NONE || this.$props.toolbar === void 0;
      return {
        "k-listbox": !0,
        [`k-listbox-actions-${this.$props.toolbarPosition}`]: !e
      };
    }
  },
  render() {
    const e = p.call(this, this.$props.toolbar, d.call(this)), s = c.call(this, {
      h: n,
      template: e
    });
    return o("div", {
      class: this.wrapperClass,
      unselectable: "on"
    }, [this.$props.toolbarPosition !== "bottom" && s, o("div", {
      class: "k-list-scroller k-selectable",
      "data-role": "selectable",
      onDragover: (t) => t.preventDefault(),
      onDrop: this.handleContainerDrop,
      onDragleave: this.handleOnDragLeave
    }, [o("div", {
      class: h("k-list", {
        [`k-list-${v.sizeMap[this.$props.size] || this.$props.size}`]: this.$props.size
      })
    }, [o("div", {
      class: "k-list-content"
    }, [o("ul", {
      class: "k-list-ul",
      role: "listbox",
      "aria-label": "listbox-container",
      tabindex: this.tabIndex,
      onKeydown: this.handleKeyDown
    }, [this.$props.dataItems.map(function(t, l) {
      let i = this.setSelected(t), r = f();
      const m = o("span", {
        class: "k-list-item-text"
      }, [this.$props.textField ? t[this.$props.textField] : t.toString()]), g = p.call(this, this.$props.item, d.call(this)), b = c.call(this, {
        h: n,
        template: g,
        defaultRendering: m,
        additionalProps: {
          dataItem: t,
          index: l
        }
      });
      return o("li", {
        class: h("k-list-item", {
          "k-selected": i
        }, t.class),
        style: t.style,
        role: "option",
        "aria-selected": i,
        key: this.$props.keyField ? t[this.$props.keyField] : l,
        id: r + l,
        "data-uid": r + l,
        draggable: this.$props.draggable,
        onDragstart: (a) => this.dispatchEvent("dragstart", a, t),
        onDragover: (a) => {
          a.preventDefault(), this.dispatchEvent("dragover", a, t);
        },
        onDrop: (a) => this.dispatchEvent("drop", a, t),
        onClick: (a) => this.dispatchEvent("itemclick", a, t)
      }, [b]);
    }, this)])])])]), this.$props.toolbarPosition === "bottom" && s, o("select", {
      style: {
        display: "none"
      },
      multiple: !0,
      "data-role": "listbox"
    }, [this.$props.dataItems.map(function(t, l) {
      let i = t[this.$props.valueField || this.$props.textField];
      return o("option", {
        key: l,
        value: i
      }, [i]);
    }, this)])]);
  },
  methods: {
    dispatchEvent(e, s, t) {
      this.$emit(e, {
        event: s,
        component: this,
        dataItem: t
      });
    },
    setSelected(e) {
      if (this.$props.selectedField)
        return !!e[this.$props.selectedField];
    },
    handleKeyDown(e) {
      this.$emit("keydown", {
        event: e,
        component: this
      });
    },
    handleContainerDrop(e) {
      const s = e.target, t = s.closest(".k-list-scroller"), l = s.closest(".k-list-ul"), i = this.$props.dataItems;
      t && !l && this.$emit("drop", {
        event: e,
        component: this,
        dataItem: i.length > 0 ? i[i.length - 1] : null
      });
    },
    handleOnDragLeave(e) {
      e.target.classList.contains("k-list-content") && this.$emit("dragleave", {
        event: e,
        component: this
      });
    }
  }
});
export {
  I as ListBox
};