@progress/kendo-vue-buttons/Chip/ChipList.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 r, createVNode as i, h as l, ref as n } from "vue";
import { classNames as u, getTabIndex as d, setRef as p, kendoThemeMaps as o, templateRendering as h, getListeners as c, getTemplate as m, validatePackage as f } from "@progress/kendo-vue-common";
import { selectionReducer as $ } from "./selection-reducer.mjs";
import { focusReducer as v } from "./focus-reducer.mjs";
import { dataReducer as g } from "./data-reducer.mjs";
import { Chip as D } from "./Chip.mjs";
import { packageMetadata as y } from "../package-metadata.mjs";
const V = /* @__PURE__ */ r({
  name: "KendoVueChipList",
  inheritAttrs: !1,
  props: {
    id: String,
    tabIndex: Number,
    dataItems: Array,
    defaultDataItems: {
      type: Array,
      default: function() {
        return [];
      }
    },
    value: [Object, Array, String, Number],
    defaultValue: {
      type: [Object, Array, String, Number],
      default: function() {
        return null;
      }
    },
    size: {
      type: String,
      default: "medium"
    },
    rounded: {
      type: String,
      default: "medium"
    },
    fillMode: {
      type: String,
      default: "solid",
      validator: function(e) {
        return [null, "flat", "outline", "solid"].includes(e);
      }
    },
    selection: {
      type: String,
      default: function() {
        return "none";
      }
    },
    textField: {
      type: String,
      default: function() {
        return "text";
      }
    },
    valueField: {
      type: String,
      default: function() {
        return "value";
      }
    },
    avatarField: {
      type: String,
      default: function() {
        return "avatar";
      }
    },
    disabled: {
      type: Boolean,
      default: !1
    },
    dir: {
      type: String,
      default: function() {
        return "ltr";
      }
    },
    chip: [String, Function, Object],
    ariaLabelledBy: String,
    ariaDescribedBy: String
  },
  emits: {
    change: (e) => !0,
    datachange: (e) => !0
  },
  provide() {
    return {
      kendoSelection: this.currentValue,
      kendoFocused: this.currentFocused,
      kendoDataItems: this.computedDataItems,
      handleDispatchDataItems: this.handleDispatchDataItems,
      handleDispatchSelection: this.handleDispatchSelection,
      handleDispatchFocus: this.handleDispatchFocus
    };
  },
  created() {
    f(y), this.currentDataItems = this.$props.dataItems || this.$props.defaultDataItems, this.currentValue.value = this.$props.value || this.$props.defaultValue;
  },
  data() {
    return {
      currentDataItems: [],
      currentDir: "ltr",
      isRtl: !1,
      currentFocused: {
        value: !1
      },
      currentValue: {
        value: null
      }
    };
  },
  mounted() {
    this.chipList = this.chipListRef, this.currentDir = this.$props.dir !== void 0 ? this.$props.dir : this.$el && getComputedStyle(this.$el).direction === "rtl" || !1, this.isRtl = this.currentDir === "rtl";
  },
  computed: {
    computedDataItems() {
      return this.$props.dataItems || this.currentDataItems;
    },
    computedValue() {
      return this.$props.value || this.currentValue.value;
    },
    items() {
      return this.computedDataItems.reduce(this.itemsReducer, []);
    }
  },
  methods: {
    handleDispatchSelection(e) {
      const t = $(this.computedValue, {
        ...e,
        selection: this.$props.selection,
        state: this.computedValue
      });
      this.handleChange(t, e.event), this.currentValue.value = t;
    },
    handleDispatchFocus(e) {
      const t = v(e.payload, {
        ...e,
        items: this.items
      });
      this.currentFocused.value = t;
    },
    handleDispatchDataItems(e) {
      const t = g(this.computedDataItems, {
        ...e,
        state: this.computedDataItems,
        valueField: this.$props.valueField
      });
      this.handleDataChange(t, e.event), this.currentDataItems = t;
    },
    handleChange(e, t) {
      this.$el && this.$emit("change", {
        value: e,
        target: this.$el,
        event: t
      });
    },
    handleDataChange(e, t) {
      this.$el && this.$emit("datachange", {
        value: e,
        target: this.$el,
        event: t
      });
    },
    itemsReducer(e, t) {
      return e.push(t[this.$props.valueField || this.$props.valueField]), e;
    }
  },
  setup() {
    return {
      chipListRef: n(null)
    };
  },
  render() {
    const {
      size: e
    } = this.$props;
    return i("div", {
      ref: p(this, "chipList"),
      role: "listbox",
      id: this.$props.id,
      dir: this.currentDir,
      style: this.$attrs.style,
      tabindex: d(this.$props.tabIndex, this.$props.disabled, void 0),
      class: u("k-chip-list", {
        [`k-chip-list-${o.sizeMap[e] || e}`]: e,
        "k-rtl": this.currentDir === "rtl",
        "k-selection-single": this.$props.selection === "single",
        "k-selection-multiple": this.$props.selection === "multiple",
        "k-disabled": this.$props.disabled
      }),
      "aria-labelledby": this.$props.ariaLabelledBy,
      "aria-describedby": this.$props.ariaDescribedBy,
      "aria-orientation": "horizontal",
      "aria-multiselectable": this.$props.selection === "multiple" ? !0 : void 0
    }, [this.computedDataItems.map(function(t) {
      const s = h.call(this, this.$props.chip, c.call(this)), a = i(D, {
        role: "option",
        dataItem: t,
        key: t[this.$props.valueField],
        text: t[this.$props.textField],
        value: t[this.$props.valueField],
        avatar: t[this.$props.avatarField],
        size: this.$props.size,
        rounded: this.$props.rounded,
        fillMode: this.$props.fillMode
      }, null);
      return m.call(this, {
        h: l,
        template: s,
        defaultRendering: a,
        additionalProps: {
          dataItem: t,
          key: t[this.$props.valueField],
          text: t[this.$props.textField],
          value: t[this.$props.valueField],
          size: this.$props.size
        }
      });
    }, this)]);
  }
});
export {
  V as ChipList
};