ant-design-x-vue-next/es/sender/components/Skill.mjs

Ant Design X for Vue — community continuation aligned with @ant-design/x

import { defineComponent as d, computed as t, createVNode as s } from "vue";
import { Tooltip as v } from "ant-design-vue";
import { H as m, b } from "../../chunks/module-chunk.mjs";
const k = /* @__PURE__ */ d({
  name: "AXSenderSkill",
  __name: "Skill",
  props: {
    title: null,
    value: null,
    toolTip: null,
    closable: {
      type: Boolean
    },
    prefixCls: null,
    removeSkill: {
      type: Function
    }
  },
  setup(c) {
    const l = c, o = t(() => `${l.prefixCls}-skill`), r = t(() => {
      if (!l.closable)
        return null;
      const e = typeof l.closable == "boolean" ? {} : l.closable, u = (n) => {
        var i;
        e.disabled || (n.stopPropagation(), l.removeSkill(), (i = e.onClose) == null || i.call(e, n));
      }, p = e.closeIcon || s(m, {
        class: `${o.value}-close-icon`
      }, null);
      return s("div", {
        class: b(`${o.value}-close`, {
          [`${o.value}-close-disabled`]: e.disabled
        }),
        onClick: u,
        role: "button",
        "aria-label": "Close skill",
        tabindex: 0
      }, [p]);
    }), a = t(() => l.title || l.value);
    return () => {
      const e = l.toolTip ? s(v, l.toolTip, {
        default: () => [a.value]
      }) : a.value;
      return s("div", {
        class: `${o.value}-wrapper`
      }, [s("div", {
        class: `${o.value}-tag`,
        role: "button",
        tabindex: 0
      }, [s("span", {
        class: `${o.value}-tag-text`
      }, [e]), r.value]), s("div", {
        class: `${o.value}-holder`
      }, null)]);
    };
  }
});
export {
  k as default
};