@progress/kendo-vue-buttons/Chip/Chip.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 D, createVNode as t, h as I, ref as F } from "vue";
import { noop as r, templateRendering as C, getListeners as w, kendoThemeMaps as c, getTemplate as x, classNames as M, getTabIndex as O, setRef as R, Icon as d, getIconName as h, Keys as l, getRef as B, validatePackage as T } from "@progress/kendo-vue-common";
import { checkIcon as A, xCircleIcon as N } from "@progress/kendo-svg-icons";
import { FOCUS_ACTION as o } from "./focus-reducer.mjs";
import { DATA_ACTION as j } from "./data-reducer.mjs";
import { SELECTION_ACTION as p } from "./selection-reducer.mjs";
import { packageMetadata as z } from "../package-metadata.mjs";
const q = /* @__PURE__ */ D({
  name: "KendoVueChip",
  props: {
    id: String,
    text: String,
    avatar: {
      type: [String, Function, Object],
      default: function() {
      }
    },
    value: [String, Object],
    dir: {
      type: String,
      default: function() {
        return "ltr";
      }
    },
    removable: {
      type: Boolean,
      default: !1
    },
    removeIcon: {
      type: String,
      default: function() {
        return "x-circle";
      }
    },
    removeSvgIcon: {
      type: Object,
      default: function() {
        return N;
      }
    },
    disabled: {
      type: Boolean,
      default: !1
    },
    icon: String,
    svgIcon: Object,
    selectedIcon: {
      type: String,
      default: function() {
        return "check";
      }
    },
    selectedSvgIcon: {
      type: Object,
      default: function() {
        return A;
      }
    },
    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);
      }
    },
    themeColor: {
      type: String,
      default: "base",
      validator: function(e) {
        return [null, "base", "error", "info", "success", "warning"].includes(e);
      }
    },
    dataItem: Object,
    selected: Boolean,
    ariaDescribedBy: String,
    role: {
      type: String,
      default: "button"
    },
    tabIndex: Number,
    onMousedown: Function
  },
  emits: {
    click: null,
    keydown: null,
    blur: null,
    focus: null,
    remove: null
  },
  inject: {
    kendoSelection: {
      default: {
        value: null
      }
    },
    kendoFocused: {
      default: {
        value: null
      }
    },
    kendoDataItems: {
      default: null
    },
    handleDispatchDataItems: {
      default: r
    },
    handleDispatchSelection: {
      default: r
    },
    handleDispatchFocus: {
      default: r
    }
  },
  created() {
    this.currentDir = void 0, T(z);
  },
  mounted() {
    this.chip = B(this, "chip"), this.currentDir = this.$props.dir !== void 0 ? this.$props.dir === "rtl" : this.$el && getComputedStyle(this.$el).direction === "rtl" || !1;
  },
  updated() {
    this.kendoFocused.value === this.$props.value && this.$el && this.$el.focus();
  },
  computed: {
    currentSelected() {
      return this.$props.selected || (Array.isArray(this.kendoSelection.value) ? this.kendoSelection.value.some((e) => e === this.$props.value) : this.kendoSelection.value === this.$props.value);
    },
    chipLabelClass() {
      return {
        "k-chip-label": !0
      };
    }
  },
  methods: {
    computedFocused() {
      return this.kendoFocused.value === this.$props.value;
    },
    handleMouseDown(e) {
      this.$emit("mousedown", e);
    },
    handleClick(e) {
      this.handleDispatchSelection && this.handleDispatchSelection({
        type: p.toggle,
        payload: this.$props.value,
        event: e
      }), this.$emit("click", {
        target: this.target,
        event: e
      });
    },
    handleRemove(e) {
      e.stopPropagation(), this.$props.removable && (this.handleDispatchFocus && (this.handleDispatchDataItems({
        type: j.remove,
        payload: this.$props.value,
        event: e
      }), this.handleDispatchFocus({
        type: o.reset,
        payload: this.$props.value,
        event: e
      }), this.handleDispatchSelection({
        type: p.remove,
        payload: this.$props.value,
        event: e
      })), this.$emit("remove", {
        target: this.target,
        event: e
      }));
    },
    handleKeyDown(e) {
      switch (e.keyCode) {
        case l.left:
          this.handleDispatchFocus && this.handleDispatchFocus({
            type: o.prev,
            payload: this.$props.value,
            event: e
          });
          break;
        case l.right:
          this.handleDispatchFocus && this.handleDispatchFocus({
            type: o.next,
            payload: this.$props.value,
            event: e
          });
          break;
        case l.enter:
          this.handleDispatchFocus && this.handleDispatchSelection({
            type: p.toggle,
            payload: this.$props.value,
            event: e
          });
          break;
        case l.delete:
          this.handleRemove(e);
          break;
      }
      this.$emit("keydown", {
        target: this.target,
        event: e
      });
    },
    handleFocus(e) {
      this.handleDispatchFocus && this.handleDispatchFocus({
        payload: this.$props.value,
        type: o.current,
        event: e
      }), this.$emit("focus", {
        target: this.target,
        event: e
      });
    },
    handleBlur(e) {
      this.$emit("blur", {
        target: this.target,
        event: e
      });
    }
  },
  setup() {
    return {
      chipRef: F(null)
    };
  },
  render() {
    const {
      size: e,
      rounded: n,
      themeColor: u,
      fillMode: a,
      look: s,
      avatar: i,
      icon: m,
      svgIcon: f,
      selectedIcon: v,
      selectedSvgIcon: g,
      removeIcon: k,
      removeSvgIcon: $
    } = this.$props, y = C.call(this, i, w.call(this)), b = i ? t("div", {
      class: `k-chip-avatar k-avatar k-rounded-${i.rounded || "medium"} k-avatar-${c.sizeMap[e] || e} k-avatar-solid k-avatar-solid-primary`,
      style: i.style
    }, [t("span", {
      class: "k-avatar-image"
    }, [t("img", {
      src: i.imageUrl,
      alt: i.imageAlt
    }, null)])]) : null, S = x.call(this, {
      h: I,
      template: y
    });
    return t("div", {
      role: this.$props.role,
      id: this.$props.value,
      ref: R(this, "chip"),
      dir: this.currentDir,
      tabindex: O(this.$props.tabIndex, this.$props.disabled, void 0),
      class: M("k-chip", {
        "k-rtl": this.currentDir === "rtl",
        "k-disabled": this.$props.disabled,
        "k-selected": this.currentSelected,
        "k-focus": this.computedFocused(),
        [`k-chip-${c.sizeMap[e] || e}`]: e,
        [`k-rounded-${c.roundedMap[n] || n}`]: n,
        [`k-chip-${a}`]: a,
        [`k-chip-${a}-${u}`]: !!(a && u),
        "k-chip-outline": s === "outline" || s === "outlined",
        "k-chip-solid": s === "solid" || s === "filled" || a === "solid"
      }),
      "aria-pressed": this.$props.role === "button" ? this.currentSelected : void 0,
      "aria-selected": this.$props.role === "option" ? this.currentSelected : void 0,
      "aria-disabled": this.$props.disabled,
      "aria-describedby": this.$props.ariaDescribedBy,
      onFocus: this.handleFocus,
      onBlur: this.handleBlur,
      onClick: this.handleClick,
      onKeydown: this.handleKeyDown,
      onMousedown: this.handleMouseDown
    }, [this.currentSelected && (v || g) && t(d, {
      name: h(v),
      icon: g,
      size: "small"
    }, null), (m || f) && t(d, {
      name: h(m),
      icon: f,
      size: "small"
    }, null), i ? i.imageUrl ? b : S : null, t("span", {
      class: "k-chip-content"
    }, [this.$props.text && t("span", {
      "aria-label": this.$props.text,
      class: this.chipLabelClass
    }, [this.$props.text])]), this.$props.removable && t("span", {
      class: "k-chip-actions"
    }, [t("span", {
      class: "k-chip-action k-chip-remove-action"
    }, [t(d, {
      name: h(k),
      icon: $,
      size: "small",
      onClick: this.handleRemove
    }, null)])])]);
  }
});
export {
  q as Chip
};