adverich-kun-ui/dist/components/KunChip/src/composables/useChip.js

Una librería de componentes Vue.js con Tailwind CSS

import { computed as r } from "vue";
function d(e, l) {
  const n = r(() => !!e.to || !!e.href), o = r(() => e.href ? "a" : e.to ? "router-link" : "div"), a = r(() => e.href ? {
    href: e.href,
    target: e.target ?? "_self",
    rel: e.target === "_blank" ? "noopener noreferrer" : null
  } : e.to ? {
    to: e.to,
    replace: e.replace
  } : {}), u = r(() => {
    const t = [];
    switch (e.density === "compact" ? t.push("px-2 py-0.5 text-xs") : e.density === "comfortable" ? t.push("px-2.5 py-1 text-sm") : t.push("px-3 py-1.5 text-sm"), e.clickable ? e.disabled ? t.push("opacity-50 cursor-not-allowed") : t.push("cursor-pointer") : t.push("cursor-default"), e.variant) {
      case "flat":
        t.push(`${e.color} ${e.textColor} shadow-none`);
        break;
      case "outlined":
        t.push(`border border-current ${e.textColor} bg-transparent hover:bg-gray-100`);
        break;
      case "pill":
        t.push(`${e.color} ${e.textColor} rounded-full`);
        break;
      default:
        t.push(`${e.color} ${e.textColor} rounded-md shadow`);
    }
    return t;
  });
  return {
    isLink: n,
    componentTag: o,
    componentAttrs: a,
    computedClass: u,
    handleClose: (t) => {
      e.disabled || (l("update:modelValue", !1), l("click:close", t));
    }
  };
}
export {
  d as useChip
};