@indielayer/ui/lib/components/modal/theme/Modal.base.theme.js

Indielayer UI Components with Tailwind CSS build for Vue 3

const a = {
  classes: {
    wrapper: "fixed z-40 inset-0 overflow-y-auto transition-all",
    backdrop: ({ data: e }) => {
      const s = ["fixed inset-0 bg-secondary-500 dark:bg-black transition-opacity"];
      return e.visible ? s.push("ease-out duration-200 opacity-30 dark:opacity-70") : s.push("ease-in duration-100 opacity-0"), s;
    },
    modalWrapper: ({ props: e }) => {
      const s = ["flex justify-center p-4 sm:p-8 h-screen"];
      return e.position === "top" ? s.push("items-start") : e.position === "bottom" ? s.push("items-end") : s.push("items-end sm:items-center"), s;
    },
    modal: ({ props: e, data: s }) => {
      const t = ["relative flex flex-col z-10 bg-white dark:bg-secondary-900 rounded-md shadow-lg transform transition-all overflow-hidden max-h-full w-full"];
      return s.visible ? t.push("ease-out duration-200 opacity-100 translate-y-0 sm:scale-100") : t.push("ease-in duration-200 opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"), e.size === "xs" ? t.push("sm:max-w-xs") : e.size === "sm" ? t.push("sm:max-w-sm") : e.size === "md" ? t.push("sm:max-w-lg") : e.size === "lg" ? t.push("sm:max-w-3xl") : e.size === "xl" ? t.push("sm:max-w-6xl") : e.size === "full" && t.push("h-full"), t;
    },
    closeIcon: "!absolute top-2 z-10 right-2",
    header: "text-lg pl-6 py-4 border-b pr-12",
    content: "px-6 py-4",
    actions: ({ props: e, slots: s }) => ["flex gap-4 bg-secondary-50 dark:bg-secondary-800 p-4 justify-end"],
    label: "text-xs text-secondary-500 mb-1",
    title: "text-xl font-semibold",
    description: "text-sm mb-8"
  }
}, l = a;
export {
  l as default
};