@aotearoan/neon/dist/components/user-input/chip/NeonChip.es.js

Neon is a lightweight design library of Vue 3 components with minimal dependencies.

import { defineComponent as u, useAttrs as f, ref as n, computed as d } from "vue";
import { NeonSize as m } from "../../../model/common/size/NeonSize.es.js";
import { NeonFunctionalColor as p } from "../../../model/common/color/NeonFunctionalColor.es.js";
import k from "../../presentation/icon/NeonIcon.vue.es.js";
import { NeonChipAction as t } from "../../../model/user-input/chip/NeonChipAction.es.js";
const N = u({
  name: "NeonChip",
  components: {
    NeonIcon: k
  },
  props: {
    /**
     * The chip label
     */
    label: { type: String, required: !0 },
    /**
     * The size of the chip.
     */
    size: { type: String, default: m.Medium },
    /**
     * The chip color.
     */
    color: { type: String, default: p.Primary },
    /**
     * The action when clicking on a chip. Can be click or remove.
     */
    action: { type: String, default: t.Click },
    /**
     * The chip disabled state.
     */
    disabled: { type: Boolean, default: !1 },
    /**
     * This is the name of an icon which can optionally be added to the chip.
     */
    icon: { type: String, default: null }
  },
  emits: [
    /**
     * Emitted when the chip is closed by the user.
     *
     * @type {void}
     */
    "close",
    /**
     * Emitted when the chip is clicked on.
     *
     * @type {void}
     */
    "click"
  ],
  setup(e, { emit: i }) {
    const r = f(), a = n(null), c = n(!0), o = n(!1), s = d(() => {
      if (!e.disabled)
        switch (e.action) {
          case t.Remove:
            return "button";
          case t.Click:
            return "link";
        }
    }), l = () => {
      if (!e.disabled)
        switch (e.action) {
          case t.Remove:
            c.value = !1, i("close");
            break;
          case t.Click:
            i("click");
            break;
        }
    };
    return {
      chip: a,
      open: c,
      active: o,
      role: s,
      attrs: r,
      keyUp: () => {
        o.value = !1;
      },
      keyDown: () => {
        e.disabled || (o.value = !0, l());
      },
      clicked: l
    };
  }
});
export {
  N as default
};
//# sourceMappingURL=NeonChip.es.js.map