@vkm-js/closeable/dist/module.cjs.js

An Alpinejs plugin that adds a closeable directive to close or fade the element.

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// packages/closeable/builds/module.js
var module_exports = {};
__export(module_exports, {
  closeable: () => src_default,
  default: () => module_default
});
module.exports = __toCommonJS(module_exports);

// packages/closeable/src/index.js
function src_default(Alpine) {
  Alpine.directive("closeable", (el, { modifiers, expression }, { cleanup }) => {
    if (!el.id) {
      el.id = crypto.getRandomValues(new Uint32Array(1))[0].toString(36) + Date.now().toString(36);
    }
    const getIcon = () => {
      if (modifiers.includes("icon")) {
        const iconClass = expression || "ti ti-x";
        return `<i class="${iconClass}"></i>`;
      }
      return `
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                    viewBox="0 0 24 24" fill="none" stroke="currentColor"
                    stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                    class="icon icon-tabler icons-tabler-outline icon-tabler-x">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                    <path d="M18 6l-12 12" />
                    <path d="M6 6l12 12" />
                </svg>
            `;
    };
    const button = document.createElement("button");
    button.id = `closeable-${el.id}`;
    button.type = "button";
    button.className = "absolute top-3 right-1.5 flex items-center justify-center transition-all w-8 h-8 rounded-md text-inherit active:bg-dark/10 hover:bg-dark/5 dark:hover:bg-white/5 shadow-none!";
    button.innerHTML = getIcon();
    el.appendChild(button);
    const handleClick = () => {
      if (modifiers.includes("confirm")) {
        confirm(() => el.remove(), "You are about to close this window!");
      } else if (modifiers.includes("remove")) {
        const idx = modifiers.findIndex((i) => i === "remove");
        const className = modifiers[idx + 1] || "show";
        el.classList.remove(className);
      } else if (modifiers.includes("none")) {
        el.style.display = "none";
      } else if (modifiers.includes("hidden")) {
        el.style.visibility = "hidden";
      } else {
        el.remove();
      }
    };
    button.addEventListener("click", handleClick);
    cleanup(() => button.removeEventListener("click", handleClick));
  });
}

// packages/closeable/builds/module.js
var module_default = src_default;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  closeable
});