vueless/ui.container-modal/config.ts

Vue Styleless UI Component Library, powered by Tailwind CSS.

export default /*tw*/ {
  wrapper: "fixed inset-0 z-50 outline-none",
  wrapperTransition: {
    enterActiveClass: "ease-out duration-300",
    enterFromClass: "opacity-0 translate-y-4 sm:translate-y-0 transform sm:scale-95",
    enterToClass: "opacity-100 translate-y-0 transform sm:scale-100",
    leaveActiveClass: "ease-in duration-200",
    leaveFromClass: "opacity-100 translate-y-0 transform sm:scale-100",
    leaveToClass: "opacity-0 translate-y-4 sm:translate-y-0 transform sm:scale-95",
  },
  overlay: "fixed inset-0 z-40 bg-gray-900/75",
  overlayTransition: {
    enterActiveClass: "ease-out duration-300",
    enterFromClass: "opacity-0",
    enterToClass: "opacity-100",
    leaveActiveClass: "ease-in duration-200",
    leaveFromClass: "opacity-100",
    leaveToClass: "opacity-0",
  },
  innerWrapper: "py-12 w-full h-full overflow-auto",
  header: "flex justify-between px-4 md:px-8 pb-6 pt-8",
  headerLeft: "flex items-center gap-4",
  headerLeftFallback: "flex flex-col",
  backLinkWrapper: "flex items-center gap-0.5 mb-0.5",
  backLink: "{ULink} flex items-center gap-0.5",
  backLinkIcon: "{UIcon}",
  title: "{UHeader}",
  description: "mt-1.5 text-sm font-normal text-gray-500",
  closeIcon: "{UIcon}",
  body: "space-y-4 px-4 md:px-8 text-sm",
  modalDivider: "{UDivider} pt-8",
  footer: "flex justify-between px-4 md:px-8 py-8 max-md:flex-col max-md:gap-4",
  footerLeft: "flex flex-col md:flex-row space-y-4 md:space-x-4 md:space-y-0 w-full",
  footerRight: "flex flex-col md:flex-row space-y-4 md:space-x-4 md:space-y-0 w-full justify-end",
  modal: {
    base: "mx-auto rounded-dynamic-lg bg-white",
    variants: {
      size: {
        xs: "md:w-[25rem]",
        sm: "md:w-[31.25rem]",
        md: "md:w-[37.5rem]",
        lg: "md:w-[43.75rem]",
        xl: "md:w-[50rem]",
        "2xl": "md:w-[56.25rem]",
        "3xl": "md:w-[62.5rem]",
        "4xl": "md:w-[68.75rem]",
        "5xl": "md:w-[75rem]",
      },
      inner: {
        true: "!my-[4.5rem]",
      },
    },
  },
  defaults: {
    size: "sm",
    inner: false,
    divider: false,
    closeOnEsc: true,
    closeOnCross: true,
    closeOnOverlay: true,
    mobileStickBottom: false,
    /* icons */
    backIcon: "arrow_back",
    closeIcon: "close",
  },
};