epic-modals 1.0.0 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (114) hide show
  1. package/dist/core.d.ts +1558 -0
  2. package/dist/core.js +1 -1
  3. package/dist/react.d.ts +101 -12
  4. package/dist/react.js +1 -1
  5. package/dist/styles/basic.css +1 -0
  6. package/dist/styles/showcase.css +1 -0
  7. package/dist/svelte.d.ts +227 -19
  8. package/dist/svelte.js +1 -1
  9. package/dist/vanilla.d.ts +148 -3
  10. package/dist/vanilla.js +1 -1
  11. package/package.json +8 -13
  12. package/dist/core/animation/controller.d.ts +0 -58
  13. package/dist/core/animation/flip.d.ts +0 -8
  14. package/dist/core/animation/genie.d.ts +0 -14
  15. package/dist/core/animation/index.d.ts +0 -6
  16. package/dist/core/animation/timing.d.ts +0 -34
  17. package/dist/core/behaviors/drag.d.ts +0 -34
  18. package/dist/core/behaviors/focusTrap.d.ts +0 -23
  19. package/dist/core/behaviors/index.d.ts +0 -6
  20. package/dist/core/behaviors/parentChild.d.ts +0 -27
  21. package/dist/core/behaviors/resize.d.ts +0 -49
  22. package/dist/core/config/defaults.d.ts +0 -90
  23. package/dist/core/config/index.d.ts +0 -4
  24. package/dist/core/config/resolution.d.ts +0 -25
  25. package/dist/core/index.d.ts +0 -9
  26. package/dist/core/modal/Controller.d.ts +0 -70
  27. package/dist/core/modal/Controller.types.d.ts +0 -77
  28. package/dist/core/modal/Interactions.d.ts +0 -67
  29. package/dist/core/modal/Lifecycle.d.ts +0 -20
  30. package/dist/core/modal/Positioning.d.ts +0 -40
  31. package/dist/core/modal/StateManager.d.ts +0 -91
  32. package/dist/core/modal/Styling.d.ts +0 -42
  33. package/dist/core/modal/index.d.ts +0 -8
  34. package/dist/core/state/effects.d.ts +0 -16
  35. package/dist/core/state/events.d.ts +0 -15
  36. package/dist/core/state/getters.d.ts +0 -37
  37. package/dist/core/state/index.d.ts +0 -17
  38. package/dist/core/state/internal.d.ts +0 -105
  39. package/dist/core/state/layout.d.ts +0 -17
  40. package/dist/core/state/minimize.d.ts +0 -18
  41. package/dist/core/state/open-close.d.ts +0 -21
  42. package/dist/core/state/parent-child.d.ts +0 -17
  43. package/dist/core/state/pending.d.ts +0 -55
  44. package/dist/core/state/position.d.ts +0 -15
  45. package/dist/core/state/registration.d.ts +0 -15
  46. package/dist/core/state/stacking.d.ts +0 -10
  47. package/dist/core/state/zindex.d.ts +0 -8
  48. package/dist/core/types.d.ts +0 -191
  49. package/dist/core/utils/backdrop.d.ts +0 -8
  50. package/dist/core/utils/constants.d.ts +0 -193
  51. package/dist/core/utils/dock.d.ts +0 -12
  52. package/dist/core/utils/dom.d.ts +0 -31
  53. package/dist/core/utils/helpers.d.ts +0 -8
  54. package/dist/core/utils/index.d.ts +0 -8
  55. package/dist/core/utils/viewport/constraints.d.ts +0 -7
  56. package/dist/core/utils/viewport/index.d.ts +0 -7
  57. package/dist/core/utils/viewport/overlap.d.ts +0 -30
  58. package/dist/core/utils/viewport/smart-layout.d.ts +0 -3
  59. package/dist/core/utils/viewport/smart-position.d.ts +0 -36
  60. package/dist/core/utils/viewport/types.d.ts +0 -56
  61. package/dist/core/utils/viewport.d.ts +0 -3
  62. package/dist/epic-modals.css +0 -47
  63. package/dist/index.d.ts +0 -2
  64. package/dist/index.js +0 -1
  65. package/dist/react/components/Backdrop.d.ts +0 -7
  66. package/dist/react/components/ModalProvider.d.ts +0 -10
  67. package/dist/react/components/Portal.d.ts +0 -10
  68. package/dist/react/components/dock/Dock.d.ts +0 -7
  69. package/dist/react/components/dock/DockItem.d.ts +0 -16
  70. package/dist/react/components/modal/Modal.d.ts +0 -10
  71. package/dist/react/components/modal/ModalHeader.d.ts +0 -13
  72. package/dist/react/components/modal/ModalInner.d.ts +0 -17
  73. package/dist/react/components/modal/ResizeHandles.d.ts +0 -9
  74. package/dist/react/components/wizard/WizardModal.d.ts +0 -33
  75. package/dist/react/components/wizard/WizardStep.d.ts +0 -15
  76. package/dist/react/context.d.ts +0 -11
  77. package/dist/react/hooks/useConfig.d.ts +0 -25
  78. package/dist/react/useModal.d.ts +0 -23
  79. package/dist/runtime.js +0 -1
  80. package/dist/styles/animations.css +0 -1
  81. package/dist/styles/backdrop.css +0 -1
  82. package/dist/styles/dock.css +0 -1
  83. package/dist/styles/index.css +0 -1
  84. package/dist/styles/modal.css +0 -1
  85. package/dist/styles/themes/dark.css +0 -1
  86. package/dist/styles/themes/light.css +0 -1
  87. package/dist/styles/variables.css +0 -1
  88. package/dist/styles/wizard.css +0 -1
  89. package/dist/svelte/actions/appendElement.d.ts +0 -6
  90. package/dist/svelte/components/Backdrop.svelte.d.ts +0 -1
  91. package/dist/svelte/components/ModalProvider.svelte.d.ts +0 -1
  92. package/dist/svelte/components/Portal.svelte.d.ts +0 -1
  93. package/dist/svelte/components/dock/Dock.svelte.d.ts +0 -1
  94. package/dist/svelte/components/modal/Modal.svelte.d.ts +0 -1
  95. package/dist/svelte/components/modal/ModalHeader.svelte.d.ts +0 -1
  96. package/dist/svelte/components/modal/ModalInner.svelte.d.ts +0 -1
  97. package/dist/svelte/components/modal/ResizeHandles.svelte.d.ts +0 -1
  98. package/dist/svelte/components/wizard/WizardModal.svelte.d.ts +0 -1
  99. package/dist/svelte/components/wizard/WizardStep.svelte.d.ts +0 -1
  100. package/dist/svelte/context.d.ts +0 -8
  101. package/dist/svelte/hooks/index.d.ts +0 -10
  102. package/dist/svelte/hooks/useFocusTrap.svelte.d.ts +0 -11
  103. package/dist/svelte/hooks/useModal.svelte.d.ts +0 -37
  104. package/dist/svelte/hooks/useModalConfig.svelte.d.ts +0 -27
  105. package/dist/svelte/hooks/useModalZIndex.svelte.d.ts +0 -10
  106. package/dist/svelte/hooks/usePortal.svelte.d.ts +0 -8
  107. package/dist/svelte/hooks/useWindowEvent.svelte.d.ts +0 -7
  108. package/dist/svelte/stores.svelte.d.ts +0 -6
  109. package/dist/svelte/wizardContext.svelte.d.ts +0 -36
  110. package/dist/ui.js +0 -1
  111. package/dist/vanilla/VanillaBackdrop.d.ts +0 -14
  112. package/dist/vanilla/VanillaDock.d.ts +0 -24
  113. package/dist/vanilla/VanillaModal.d.ts +0 -76
  114. package/dist/vanilla/index.d.ts +0 -47
package/dist/vanilla.js CHANGED
@@ -1 +1 @@
1
- var e=Object.defineProperty,t=(t,n,i)=>((t,n,i)=>n in t?e(t,n,{enumerable:!0,configurable:!0,writable:!0,value:i}):t[n]=i)(t,"symbol"!=typeof n?n+"":n,i);import{J as n,r as i,d as o,b as s,M as a,u as r,K as l,L as d,R as c,v as h,w as p,x as m,j as u,A as b,t as E,p as g,s as C,q as f,k as y,B as k,f as A,N as v,h as H,O as w,l as I,m as N,o as z}from"./runtime.js";import{E as L,P as M,Q as $,S as D,I as O,F as S,G as T,D as x,T as P,U as B,V as W}from"./runtime.js";class F{constructor(e){t(this,"controller"),t(this,"dialogEl"),t(this,"headerEl"),t(this,"bodyEl"),t(this,"footerEl",null),t(this,"resizeHandlesContainer",null),t(this,"container"),t(this,"options"),t(this,"configHelper"),t(this,"unsubscribe",null),t(this,"abortController",new AbortController),this.options=e,this.container=e.container,this.configHelper=n(e.config),i(o({id:e.id,title:e.title,icon:e.icon,autoOpen:e.autoOpen??!0,glow:e.glow})),(e.autoOpen??1)&&s(e.id),this.dialogEl=this.createDialogElement(),this.headerEl=this.createHeaderElement(),this.bodyEl=this.createBodyElement(),e.footer&&(this.footerEl=this.createFooterElement(),this.footerEl.appendChild(e.footer)),this.configHelper.isFeatureEnabled("resize")&&(this.resizeHandlesContainer=this.createResizeHandles()),this.dialogEl.appendChild(this.headerEl),this.dialogEl.appendChild(this.bodyEl),this.footerEl&&this.dialogEl.appendChild(this.footerEl),this.resizeHandlesContainer&&this.dialogEl.appendChild(this.resizeHandlesContainer),e.content&&this.bodyEl.appendChild(e.content);const r={id:e.id,title:e.title,icon:e.icon,config:e.config,maxWidth:e.maxWidth,preferredHeight:e.preferredHeight,glow:e.glow,closeOnEscape:e.closeOnEscape??!0,autoOpen:e.autoOpen??!0,openSourcePosition:e.openSourcePosition,onClose:e.onClose,skipRegistration:!0,configHelper:this.configHelper};this.controller=new a(r),this.container.appendChild(this.dialogEl),this.controller.mount(this.dialogEl),this.unsubscribe=this.controller.subscribe(e=>{this.updateFromState(e)}),this.updateFromState(this.controller.getState()),this.setupEventHandlers()}destroy(){var e;this.abortController.abort(),null==(e=this.unsubscribe)||e.call(this),this.controller.destroy(),r(this.options.id),this.dialogEl.remove()}createDialogElement(){const e=document.createElement("div");return e.className=l.dialog,e.setAttribute(d.modalId,String(this.options.id)),e.setAttribute("role","dialog"),e.setAttribute("aria-modal","true"),e.setAttribute("aria-labelledby",`${this.options.id}-title`),e.setAttribute("tabindex","-1"),e}createHeaderElement(){const e=document.createElement("header"),t=this.configHelper.isFeatureEnabled("drag"),n=this.configHelper.getAppearance("headerLayout"),i=this.configHelper.isFeatureEnabled("minimize"),o=!this.configHelper.isFeatureEnabled("dock"),s=this.configHelper.isFeatureEnabled("transparency");e.className=t?`${l.header} ${l.headerDraggable}`:l.header;const a=this.getIconElement();return"macos"===n?this.createMacOSHeader(e,a,i,o,s):this.createWindowsHeader(e,a,i,o,s),e}getIconElement(){return this.options.iconElement?this.options.iconElement:this.options.icon&&this.options.renderIcon?this.options.renderIcon(this.options.icon):null}createMacOSHeader(e,t,n,i,o){const s=document.createElement("div");s.className=l.headerTrafficLights;const a=document.createElement("button");if(a.type="button",a.className=`${l.headerLight} ${l.headerLightClose}`,a.setAttribute("aria-label","Close"),a.setAttribute("data-control","close"),s.appendChild(a),n){const e=document.createElement("button");e.type="button",e.className=`${l.headerLight} ${l.headerLightMinimize}${i?` ${l.headerLightDisabled}`:""}`,e.setAttribute("aria-label","Minimize"),e.setAttribute("data-control","minimize"),i&&(e.disabled=!0,e.title="Enable dock to minimize"),s.appendChild(e)}if(o){const e=document.createElement("button");e.type="button",e.className=`${l.headerLight} ${l.headerLightStyle}`,e.setAttribute("aria-label","Toggle style"),e.setAttribute("data-control","style"),s.appendChild(e)}e.appendChild(s);const r=document.createElement("div");if(r.className=l.headerMacCenter,t){const e=document.createElement("div");e.className=l.headerIcon,e.appendChild(t),r.appendChild(e)}const d=document.createElement("div");d.className=l.headerTitleGroup;const c=document.createElement("h2");c.className=l.headerTitle,c.id=`${this.options.id}-title`,c.textContent=this.options.title,d.appendChild(c),r.appendChild(d),e.appendChild(r);const h=document.createElement("div");h.className=l.headerMacSpacer,e.appendChild(h)}createWindowsHeader(e,t,n,i,o){const s=document.createElement("div");if(s.className=l.headerTitleGroup,t){const e=document.createElement("div");e.className=l.headerIcon,e.appendChild(t),s.appendChild(e)}const a=document.createElement("h2");a.className=l.headerTitle,a.id=`${this.options.id}-title`,a.textContent=this.options.title,s.appendChild(a),e.appendChild(s);const r=document.createElement("div");if(r.className=l.headerActions,o){const e=document.createElement("button");e.type="button",e.className=`${l.headerBtnWindows} ${l.headerBtnWindowsStyle}`,e.setAttribute("aria-label","Toggle style"),e.setAttribute("data-control","style"),e.innerHTML="◇",r.appendChild(e)}if(n){const e=document.createElement("button");e.type="button",e.className=`${l.headerBtnWindows}${i?` ${l.headerBtnWindowsDisabled}`:""}`,e.setAttribute("aria-label","Minimize"),e.setAttribute("data-control","minimize"),e.innerHTML="–",i&&(e.disabled=!0,e.title="Enable dock to minimize"),r.appendChild(e)}const d=document.createElement("button");d.type="button",d.className=`${l.headerBtnWindows} ${l.headerBtnWindowsClose}`,d.setAttribute("aria-label","Close"),d.setAttribute("data-control","close"),d.innerHTML="×",r.appendChild(d),e.appendChild(r)}createBodyElement(){const e=document.createElement("div");return e.className=l.body,e}createFooterElement(){const e=document.createElement("div");return e.className=l.footer,e}createResizeHandles(){const e=document.createElement("div");e.className=l.resizeHandles,e.setAttribute("role","group"),e.setAttribute("aria-label","Resize handles");for(const t of c){const n=document.createElement("div");n.className=`${l.resizeHandle} ${l.resizePrefix}${t}`,n.setAttribute("role","separator"),n.setAttribute("tabindex","0"),n.setAttribute("aria-label",`Resize ${t}`),n.setAttribute("aria-orientation","n"===t||"s"===t?"horizontal":"vertical"),n.setAttribute(d.resizeDirection,t),e.appendChild(n)}return e}updateFromState(e){this.dialogEl.className=e.cssClasses.join(" "),this.updateStyles(e.style),this.dialogEl.setAttribute("data-state",e.dataState),this.dialogEl.setAttribute("data-animation-phase",e.dataAnimationPhase)}updateStyles(e){for(const[t,n]of Object.entries(e))t.startsWith("--")?this.dialogEl.style.setProperty(t,String(n)):this.dialogEl.style.setProperty(t,"number"==typeof n?String(n):n)}setupEventHandlers(){const e=this.abortController.signal,t="macos"===this.configHelper.getAppearance("headerLayout")?`.${l.headerLight}`:`.${l.headerBtnWindows}`;this.headerEl.addEventListener("pointerdown",e=>{e.target.closest(t)||this.controller.startDrag(e)},{signal:e}),this.dialogEl.addEventListener("pointermove",e=>{this.controller.handlePointerMove(e)},{signal:e}),this.dialogEl.addEventListener("pointerup",e=>{this.controller.handlePointerUp(e)},{signal:e}),this.headerEl.addEventListener("click",e=>{const t=e.target.closest("button");if(!t)return;const n=t.getAttribute("data-control");"close"===n?this.controller.close():"minimize"===n?this.controller.minimize():"style"===n&&this.controller.toggleTransparency()},{signal:e}),this.resizeHandlesContainer&&this.resizeHandlesContainer.addEventListener("pointerdown",e=>{const t=e.target.closest(`.${l.resizeHandle}`);if(!t)return;const n=t.getAttribute(d.resizeDirection);n&&this.controller.startResize(e,n)},{signal:e}),this.dialogEl.addEventListener("keydown",e=>{this.controller.handleKeyDown(e)},{signal:e}),this.dialogEl.addEventListener("pointerdown",()=>{this.controller.bringToFront()},{signal:e})}}class R{constructor(e){t(this,"containerEl"),t(this,"dockEl"),t(this,"parentContainer"),t(this,"unsubscribe"),t(this,"abortController",new AbortController),t(this,"isAttached",!1),t(this,"options"),this.options=e,this.parentContainer=e.container,this.containerEl=this.createContainerDOM(),this.dockEl=this.createDockDOM(),this.containerEl.appendChild(this.dockEl),this.unsubscribe=h(()=>{this.render()}),this.render()}createContainerDOM(){const e=document.createElement("div");return e.setAttribute("data-dock-container","true"),e}createDockDOM(){const e=document.createElement("div");return e.className=l.dock,e}render(){const e=y();if(!e.features.dock)return void(this.isAttached&&(this.containerEl.remove(),this.isAttached=!1));const t=p();if(0===t.length)return void(this.isAttached&&(this.containerEl.remove(),this.isAttached=!1));this.isAttached||(this.parentContainer.appendChild(this.containerEl),this.isAttached=!0);const n=e.dock.position;if(this.containerEl.className=m(n,0===t.length),this.containerEl.style.zIndex=String(u("DOCK")),this.dockEl.className=b(n,"horizontal"),this.dockEl.innerHTML="","free"===n){const e=this.createDockHandle();this.dockEl.appendChild(e)}const i=k(),o=e.dock.labelMode;for(const e of t){const t=e.lastChildId?i.get(e.lastChildId):null,n=this.createDockItem(e,t??null,o);this.dockEl.appendChild(n)}}createDockHandle(){const e=document.createElement("button");return e.type="button",e.className=l.dockHandle,e.setAttribute("aria-label","Drag dock"),e}createDockItem(e,t,n){const i=document.createElement("button"),o=[l.dockItem,e.glow&&l.dockItemHasGlow,e.lastChildId&&l.dockItemHasChild,"beside"===n&&l.dockItemLabelBeside,"below"===n&&l.dockItemLabelBelow].filter(Boolean).join(" ");i.className=o,i.setAttribute(d.modalId,E(e.id)),i.setAttribute("aria-label",`Restore ${e.title}`),e.glow&&i.style.setProperty("--modal-dock-glow-color",e.glow.color);const s=document.createElement("span");if(s.className=l.dockItemIcon,e.icon&&this.options.renderIcon){const t=this.options.renderIcon(e.icon);t?s.appendChild(t):s.appendChild(this.createIconPlaceholder(e.title))}else s.appendChild(this.createIconPlaceholder(e.title));if(i.appendChild(s),"hidden"!==n){const t=document.createElement("span");t.className=l.dockItemLabel,t.textContent=e.title,i.appendChild(t)}const a=document.createElement("span");if(a.className=l.dockItemGlow,i.appendChild(a),e.lastChildId&&t){const e=document.createElement("span");if(e.className=l.dockChildIndicator,t.icon&&this.options.renderIcon){const n=this.options.renderIcon(t.icon);n?e.appendChild(n):e.textContent="+"}else e.textContent="+";i.appendChild(e)}return i.addEventListener("click",t=>{g(e.id)?C(t.currentTarget):f(e.id)},{signal:this.abortController.signal}),i}createIconPlaceholder(e){const t=document.createElement("span");return t.className=l.dockItemIconPlaceholder,t.textContent=e.charAt(0),t}destroy(){this.abortController.abort(),this.unsubscribe(),this.isAttached&&(this.containerEl.remove(),this.isAttached=!1)}}class j{constructor(e){t(this,"element"),t(this,"unsubscribe"),t(this,"abortController",new AbortController),this.element=this.createDOM(),e.container.appendChild(this.element),this.unsubscribe=h(()=>{this.render()}),this.render()}createDOM(){const e=document.createElement("div");return e.className=l.backdrop,e.addEventListener("click",()=>{A().blockClicks&&v()},{signal:this.abortController.signal}),e}render(){A().visible?H()?(this.element.classList.add(l.backdropVisible),this.element.style.display=""):(this.element.classList.remove(l.backdropVisible),this.element.style.display="none"):this.element.style.display="none"}destroy(){this.abortController.abort(),this.unsubscribe(),this.element.remove()}}function G(e){if("string"==typeof e){const t=document.createElement("div");return t.innerHTML=e,t}return e}function K(e){const{content:t,footer:n,customIcon:i,...o}=e,s=t?G(t):void 0,a=n?G(n):void 0,r=new F({...o,container:document.body,content:s,footer:a});return{destroy:()=>r.destroy(),update:e=>{}}}function V(){const e=new R({container:document.body});return{destroy:()=>e.destroy()}}function q(){const e=new j({container:document.body});return{destroy:()=>e.destroy()}}function J(e={}){const{config:t}=e;t&&w(t),I(),N();const n=y(),i=e.backdrop??n.features.backdrop?q():null,o=e.dock??n.features.dock?V():null;return{backdrop:i,dock:o,destroy:()=>{null==i||i.destroy(),null==o||o.destroy(),z()}}}export{s as bringToFront,v as closeAllModals,L as closeModal,q as createBackdrop,V as createDock,K as createModal,y as getConfig,M as getDockOrder,$ as getModalState,k as getModalsStore,J as init,D as isModalOpen,O as isModalRegistered,S as minimizeModal,T as openChildModal,x as openModal,P as reorderDock,B as restoreAllMinimizedModals,f as restoreModal,w as setConfig,W as toggleModalTransparency};
1
+ var e=Object.defineProperty,t=(t,o,i)=>((t,o,i)=>o in t?e(t,o,{enumerable:!0,configurable:!0,writable:!0,value:i}):t[o]=i)(t,"symbol"!=typeof o?o+"":o,i);import{CSS_CLASSES as o,DATA_ATTRIBUTES as i,RESIZE_DIRECTIONS as s}from"./core.js";import{ModalController as n}from"./core.js";import{registerModal as a,createModalRegistration as r,bringToFront as l,unregisterModal as d,subscribe as c,getModalsStore as h,isModalAnimating as m,shakeElement as p,restoreModal as u,closeAllModals as b}from"./core.js";import{bringToFront as g,closeAllModals as E,closeModal as C,getDockOrder as f,getModalState as y,getModalsStore as k,isModalOpen as A,isModalRegistered as M,minimizeModal as v,openChildModal as H,openModal as I,reorderDock as z,restoreAllMinimizedModals as N,restoreModal as w,toggleModalTransparency as L}from"./core.js";import{createConfigHelper as D,getConfig as S,setConfig as $}from"./core.js";import{getConfig as T,setConfig as O}from"./core.js";import{getMinimizedModals as j,getDockContainerClasses as B,getDockClasses as R}from"./core.js";import{getLayerZIndex as x,initializeStacking as F}from"./core.js";import{toDataId as P}from"./core.js";import{getBackdropConfig as W,hasOpenModals as G}from"./core.js";import{initializeResizeListener as _,cleanupResizeListener as K}from"./core.js";class U{constructor(e){t(this,"controller"),t(this,"dialogEl"),t(this,"headerEl"),t(this,"bodyEl"),t(this,"footerEl",null),t(this,"resizeHandlesContainer",null),t(this,"container"),t(this,"options"),t(this,"configHelper"),t(this,"unsubscribe",null),t(this,"abortController",new AbortController),this.options=e,this.container=e.container,this.configHelper=D(e.config),a(r({id:e.id,title:e.title,icon:e.icon,autoOpen:e.autoOpen??!0,glow:e.glow})),(e.autoOpen??!0)&&l(e.id),this.dialogEl=this.createDialogElement(),this.headerEl=this.createHeaderElement(),this.bodyEl=this.createBodyElement(),e.footer&&(this.footerEl=this.createFooterElement(),this.footerEl.appendChild(e.footer)),this.configHelper.isFeatureEnabled("resize")&&(this.resizeHandlesContainer=this.createResizeHandles()),this.dialogEl.appendChild(this.headerEl),this.dialogEl.appendChild(this.bodyEl),this.footerEl&&this.dialogEl.appendChild(this.footerEl),this.resizeHandlesContainer&&this.dialogEl.appendChild(this.resizeHandlesContainer),e.content&&this.bodyEl.appendChild(e.content);const o={id:e.id,title:e.title,icon:e.icon,config:e.config,maxWidth:e.maxWidth,preferredHeight:e.preferredHeight,glow:e.glow,closeOnEscape:e.closeOnEscape??!0,autoOpen:e.autoOpen??!0,openSourcePosition:e.openSourcePosition,onClose:e.onClose,skipRegistration:!0,configHelper:this.configHelper};this.controller=new n(o),this.container.appendChild(this.dialogEl),this.controller.mount(this.dialogEl),this.unsubscribe=this.controller.subscribe(e=>{this.updateFromState(e)}),this.updateFromState(this.controller.getState()),this.setupEventHandlers()}destroy(){var e;this.abortController.abort(),null==(e=this.unsubscribe)||e.call(this),this.controller.destroy(),d(this.options.id),this.dialogEl.remove()}createDialogElement(){const e=document.createElement("div");return e.className=o.dialog,e.setAttribute(i.modalId,String(this.options.id)),e.setAttribute("role","dialog"),e.setAttribute("aria-modal","true"),e.setAttribute("aria-labelledby",`${this.options.id}-title`),e.setAttribute("tabindex","-1"),e}createHeaderElement(){const e=document.createElement("header"),t=this.configHelper.isFeatureEnabled("drag"),i=this.configHelper.getAppearance("headerLayout"),s=this.configHelper.isFeatureEnabled("minimize"),n=!this.configHelper.isFeatureEnabled("dock"),a=this.configHelper.isFeatureEnabled("transparency");e.className=t?`${o.header} ${o.headerDraggable}`:o.header;const r=this.getIconElement();return"macos"===i?this.createMacOSHeader(e,r,s,n,a):this.createWindowsHeader(e,r,s,n,a),e}getIconElement(){return this.options.iconElement?this.options.iconElement:this.options.icon&&this.options.renderIcon?this.options.renderIcon(this.options.icon):null}createMacOSHeader(e,t,i,s,n){const a=document.createElement("div");a.className=o.headerTrafficLights;const r=document.createElement("button");if(r.type="button",r.className=`${o.headerLight} ${o.headerLightClose}`,r.setAttribute("aria-label","Close"),r.setAttribute("data-control","close"),a.appendChild(r),i){const e=document.createElement("button");e.type="button",e.className=`${o.headerLight} ${o.headerLightMinimize}${s?` ${o.headerLightDisabled}`:""}`,e.setAttribute("aria-label","Minimize"),e.setAttribute("data-control","minimize"),s&&(e.disabled=!0,e.title="Enable dock to minimize"),a.appendChild(e)}if(n){const e=document.createElement("button");e.type="button",e.className=`${o.headerLight} ${o.headerLightStyle}`,e.setAttribute("aria-label","Toggle style"),e.setAttribute("data-control","style"),a.appendChild(e)}e.appendChild(a);const l=document.createElement("div");if(l.className=o.headerMacCenter,t){const e=document.createElement("div");e.className=o.headerIcon,e.appendChild(t),l.appendChild(e)}const d=document.createElement("div");d.className=o.headerTitleGroup;const c=document.createElement("h2");c.className=o.headerTitle,c.id=`${this.options.id}-title`,c.textContent=this.options.title,d.appendChild(c),l.appendChild(d),e.appendChild(l);const h=document.createElement("div");h.className=o.headerMacSpacer,e.appendChild(h)}createWindowsHeader(e,t,i,s,n){const a=document.createElement("div");if(a.className=o.headerTitleGroup,t){const e=document.createElement("div");e.className=o.headerIcon,e.appendChild(t),a.appendChild(e)}const r=document.createElement("h2");r.className=o.headerTitle,r.id=`${this.options.id}-title`,r.textContent=this.options.title,a.appendChild(r),e.appendChild(a);const l=document.createElement("div");if(l.className=o.headerActions,n){const e=document.createElement("button");e.type="button",e.className=`${o.headerBtnWindows} ${o.headerBtnWindowsStyle}`,e.setAttribute("aria-label","Toggle style"),e.setAttribute("data-control","style"),e.innerHTML="◇",l.appendChild(e)}if(i){const e=document.createElement("button");e.type="button",e.className=`${o.headerBtnWindows}${s?` ${o.headerBtnWindowsDisabled}`:""}`,e.setAttribute("aria-label","Minimize"),e.setAttribute("data-control","minimize"),e.innerHTML="–",s&&(e.disabled=!0,e.title="Enable dock to minimize"),l.appendChild(e)}const d=document.createElement("button");d.type="button",d.className=`${o.headerBtnWindows} ${o.headerBtnWindowsClose}`,d.setAttribute("aria-label","Close"),d.setAttribute("data-control","close"),d.innerHTML="×",l.appendChild(d),e.appendChild(l)}createBodyElement(){const e=document.createElement("div");return e.className=o.body,e}createFooterElement(){const e=document.createElement("div");return e.className=o.footer,e}createResizeHandles(){const e=document.createElement("div");e.className=o.resizeHandles,e.setAttribute("role","group"),e.setAttribute("aria-label","Resize handles");for(const t of s){const s=document.createElement("div");s.className=`${o.resizeHandle} ${o.resizePrefix}${t}`,s.setAttribute("role","separator"),s.setAttribute("tabindex","0"),s.setAttribute("aria-label",`Resize ${t}`),s.setAttribute("aria-orientation","n"===t||"s"===t?"horizontal":"vertical"),s.setAttribute(i.resizeDirection,t),e.appendChild(s)}return e}updateFromState(e){this.dialogEl.className=e.cssClasses.join(" "),this.updateStyles(e.style),this.dialogEl.setAttribute("data-state",e.dataState),this.dialogEl.setAttribute("data-animation-phase",e.dataAnimationPhase)}updateStyles(e){for(const[t,o]of Object.entries(e))t.startsWith("--")?this.dialogEl.style.setProperty(t,String(o)):this.dialogEl.style.setProperty(t,"number"==typeof o?String(o):o)}setupEventHandlers(){const e=this.abortController.signal,t="macos"===this.configHelper.getAppearance("headerLayout")?`.${o.headerLight}`:`.${o.headerBtnWindows}`;this.headerEl.addEventListener("pointerdown",e=>{e.target.closest(t)||this.controller.startDrag(e)},{signal:e}),this.dialogEl.addEventListener("pointermove",e=>{this.controller.handlePointerMove(e)},{signal:e}),this.dialogEl.addEventListener("pointerup",e=>{this.controller.handlePointerUp(e)},{signal:e}),this.headerEl.addEventListener("click",e=>{const t=e.target.closest("button");if(!t)return;const o=t.getAttribute("data-control");"close"===o?this.controller.close():"minimize"===o?this.controller.minimize():"style"===o&&this.controller.toggleTransparency()},{signal:e}),this.resizeHandlesContainer&&this.resizeHandlesContainer.addEventListener("pointerdown",e=>{const t=e.target.closest(`.${o.resizeHandle}`);if(!t)return;const s=t.getAttribute(i.resizeDirection);s&&this.controller.startResize(e,s)},{signal:e}),this.dialogEl.addEventListener("keydown",e=>{this.controller.handleKeyDown(e)},{signal:e}),this.dialogEl.addEventListener("pointerdown",()=>{this.controller.bringToFront()},{signal:e})}}class V{constructor(e){t(this,"containerEl"),t(this,"dockEl"),t(this,"parentContainer"),t(this,"unsubscribe"),t(this,"abortController",new AbortController),t(this,"isAttached",!1),t(this,"options"),this.options=e,this.parentContainer=e.container,this.containerEl=this.createContainerDOM(),this.dockEl=this.createDockDOM(),this.containerEl.appendChild(this.dockEl),this.unsubscribe=c(()=>{this.render()}),this.render()}createContainerDOM(){const e=document.createElement("div");return e.setAttribute("data-dock-container","true"),e}createDockDOM(){const e=document.createElement("div");return e.className=o.dock,e}render(){const e=S();if(!e.features.dock)return void(this.isAttached&&(this.containerEl.remove(),this.isAttached=!1));const t=j();if(0===t.length)return void(this.isAttached&&(this.containerEl.remove(),this.isAttached=!1));this.isAttached||(this.parentContainer.appendChild(this.containerEl),this.isAttached=!0);const o=e.dock.position;if(this.containerEl.className=B(o,0===t.length),this.containerEl.style.zIndex=String(x("DOCK")),this.dockEl.className=R(o,"horizontal"),this.dockEl.innerHTML="","free"===o){const e=this.createDockHandle();this.dockEl.appendChild(e)}const i=h(),s=e.dock.labelMode;for(const e of t){const t=e.lastChildId?i.get(e.lastChildId):null,o=this.createDockItem(e,t??null,s);this.dockEl.appendChild(o)}}createDockHandle(){const e=document.createElement("button");return e.type="button",e.className=o.dockHandle,e.setAttribute("aria-label","Drag dock"),e}createDockItem(e,t,s){const n=document.createElement("button"),a=[o.dockItem,e.glow&&o.dockItemHasGlow,e.lastChildId&&o.dockItemHasChild,"beside"===s&&o.dockItemLabelBeside,"below"===s&&o.dockItemLabelBelow].filter(Boolean).join(" ");n.className=a,n.setAttribute(i.modalId,P(e.id)),n.setAttribute("aria-label",`Restore ${e.title}`),e.glow&&n.style.setProperty("--modal-dock-glow-color",e.glow.color);const r=document.createElement("span");if(r.className=o.dockItemIcon,e.icon&&this.options.renderIcon){const t=this.options.renderIcon(e.icon);t?r.appendChild(t):r.appendChild(this.createIconPlaceholder(e.title))}else r.appendChild(this.createIconPlaceholder(e.title));if(n.appendChild(r),"hidden"!==s){const t=document.createElement("span");t.className=o.dockItemLabel,t.textContent=e.title,n.appendChild(t)}const l=document.createElement("span");if(l.className=o.dockItemGlow,n.appendChild(l),e.lastChildId&&t){const e=document.createElement("span");if(e.className=o.dockChildIndicator,t.icon&&this.options.renderIcon){const o=this.options.renderIcon(t.icon);o?e.appendChild(o):e.textContent="+"}else e.textContent="+";n.appendChild(e)}return n.addEventListener("click",t=>{m(e.id)?p(t.currentTarget):u(e.id)},{signal:this.abortController.signal}),n}createIconPlaceholder(e){const t=document.createElement("span");return t.className=o.dockItemIconPlaceholder,t.textContent=e.charAt(0),t}destroy(){this.abortController.abort(),this.unsubscribe(),this.isAttached&&(this.containerEl.remove(),this.isAttached=!1)}}class Z{constructor(e){t(this,"element"),t(this,"unsubscribe"),t(this,"abortController",new AbortController),this.element=this.createDOM(),e.container.appendChild(this.element),this.unsubscribe=c(()=>{this.render()}),this.render()}createDOM(){const e=document.createElement("div");return e.className=o.backdrop,e.addEventListener("click",()=>{W().blockClicks&&b()},{signal:this.abortController.signal}),e}render(){W().visible?G()?(this.element.classList.add(o.backdropVisible),this.element.style.display=""):(this.element.classList.remove(o.backdropVisible),this.element.style.display="none"):this.element.style.display="none"}destroy(){this.abortController.abort(),this.unsubscribe(),this.element.remove()}}function q(e){if("string"==typeof e){const t=document.createElement("div");return t.innerHTML=e,t}return e}function J(e){const{content:t,footer:o,customIcon:i,...s}=e,n=t?q(t):void 0,a=o?q(o):void 0,r=new U({...s,container:document.body,content:n,footer:a});return{destroy:()=>r.destroy(),update:e=>{}}}function Q(){const e=new V({container:document.body});return{destroy:()=>e.destroy()}}function X(){const e=new Z({container:document.body});return{destroy:()=>e.destroy()}}function Y(e={}){const{config:t}=e;t&&$(t),F(),_();const o=S(),i=e.backdrop??o.features.backdrop?X():null,s=e.dock??o.features.dock?Q():null;return{backdrop:i,dock:s,destroy:()=>{null==i||i.destroy(),null==s||s.destroy(),K()}}}export{g as bringToFront,E as closeAllModals,C as closeModal,X as createBackdrop,Q as createDock,J as createModal,T as getConfig,f as getDockOrder,y as getModalState,k as getModalsStore,Y as init,A as isModalOpen,M as isModalRegistered,v as minimizeModal,H as openChildModal,I as openModal,z as reorderDock,N as restoreAllMinimizedModals,w as restoreModal,O as setConfig,L as toggleModalTransparency};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "epic-modals",
3
- "version": "1.0.0",
3
+ "version": "1.0.2",
4
4
  "description": "A stunning modal library with macOS-style animations, drag, resize, and dock. Supports Svelte 5, React, and vanilla JS.",
5
5
  "keywords": [
6
6
  "modal",
@@ -18,14 +18,10 @@
18
18
  "license": "MIT",
19
19
  "homepage": "https://epicmodals.eu",
20
20
  "type": "module",
21
- "main": "./dist/index.js",
22
- "module": "./dist/index.js",
23
- "types": "./dist/index.d.ts",
21
+ "sideEffects": [
22
+ "*.css"
23
+ ],
24
24
  "exports": {
25
- ".": {
26
- "types": "./dist/index.d.ts",
27
- "default": "./dist/index.js"
28
- },
29
25
  "./svelte": {
30
26
  "types": "./dist/svelte.d.ts",
31
27
  "svelte": "./dist/svelte.js",
@@ -39,9 +35,8 @@
39
35
  "types": "./dist/vanilla.d.ts",
40
36
  "default": "./dist/vanilla.js"
41
37
  },
42
- "./styles": "./dist/styles/index.css",
43
- "./styles/themes/light": "./dist/styles/themes/light.css",
44
- "./styles/themes/dark": "./dist/styles/themes/dark.css"
38
+ "./styles/basic": "./dist/styles/basic.css",
39
+ "./styles/showcase": "./dist/styles/showcase.css"
45
40
  },
46
41
  "files": [
47
42
  "dist/**/*.js",
@@ -54,8 +49,8 @@
54
49
  "scripts": {
55
50
  "dev": "vite dev",
56
51
  "dev:fixtures": "vite --config e2e/fixtures/vite.config.ts",
57
- "build": "vite build && BUILD_TYPE=standalone vite build && node scripts/build-css.js",
58
- "build:dev": "vite build --mode development && BUILD_TYPE=standalone vite build --mode development && node scripts/build-css.js",
52
+ "build": "BUILD_PHASE=core vite build && BUILD_PHASE=adapters vite build && node scripts/build-css.js",
53
+ "build:dev": "BUILD_PHASE=core vite build --mode development && BUILD_PHASE=adapters vite build --mode development && node scripts/build-css.js",
59
54
  "check": "svelte-check --tsconfig ./tsconfig.json",
60
55
  "lint": "eslint src --ext .ts,.tsx,.svelte",
61
56
  "test": "vitest run",
@@ -1,58 +0,0 @@
1
- import { Position, Dimensions, AnimationTransform } from '../types';
2
- import { AnimationType } from './timing';
3
- export interface AnimationState {
4
- type: AnimationType;
5
- isAnimating: boolean;
6
- transform: AnimationTransform | null;
7
- }
8
- export interface AnimationEvents {
9
- change: AnimationState;
10
- animationStart: {
11
- type: AnimationType;
12
- };
13
- animationEnd: {
14
- type: AnimationType;
15
- };
16
- }
17
- export interface AnimationControllerOptions {
18
-
19
- getId: () => string;
20
-
21
- getElement: () => HTMLElement | null;
22
-
23
- getPosition: () => Position;
24
-
25
- setPosition: (pos: Position) => void;
26
-
27
- getHasBeenDragged: () => boolean;
28
-
29
- setHasBeenDragged: (value: boolean) => void;
30
-
31
- getHasBeenResized: () => boolean;
32
-
33
- getSize: () => Dimensions;
34
-
35
- areAnimationsEnabled?: () => boolean;
36
-
37
- onMinimizeComplete?: (position: Position, hasBeenDragged: boolean, size: Dimensions) => void;
38
-
39
- onOpenStart?: () => void;
40
- }
41
- export interface AnimationController {
42
- getState(): AnimationState;
43
- isAnimating(): boolean;
44
- getAnimationType(): AnimationType;
45
- getTransform(): AnimationTransform | null;
46
- getPendingOpenSource(): Position | null;
47
- setPendingOpenSource(source: Position | null): void;
48
- startMinimize(customTarget?: Position, onComplete?: () => void): boolean;
49
- startRestore(storePosition: Position | undefined, modalSize: Dimensions | undefined): void;
50
- startOpen(): boolean;
51
- startClose(onComplete: () => void): boolean;
52
- forceClearMinimize(): void;
53
- destroy(): void;
54
- subscribe(callback: (state: AnimationState) => void): () => void;
55
- }
56
-
57
- export declare function createAnimationController(options: AnimationControllerOptions): AnimationController;
58
- //# sourceMappingURL=controller.d.ts.map
@@ -1,8 +0,0 @@
1
- import { Position } from '../types';
2
-
3
- export declare function flipAnimate(element: HTMLElement, oldPosition: Position, newPosition: Position, options?: {
4
- duration?: number;
5
- easing?: string;
6
- onComplete?: () => void;
7
- }): () => void;
8
- //# sourceMappingURL=flip.d.ts.map
@@ -1,14 +0,0 @@
1
- import { Position, Dimensions, AnimationTransform } from '../types';
2
-
3
- export declare function calculateMinimizeTransform(modalPosition: Position, modalSize: Dimensions, targetPosition: Position): AnimationTransform;
4
-
5
- export declare function calculateRestoreTransform(modalPosition: Position, modalSize: Dimensions, sourcePosition: Position): AnimationTransform;
6
-
7
- export declare function calculateOpenTransform(modalPosition: Position, modalSize: Dimensions, sourcePosition: Position): AnimationTransform;
8
-
9
- export declare function transformToCSSVars(transform: AnimationTransform): Record<string, string>;
10
-
11
- export declare function getDefaultDockTarget(): Position;
12
-
13
- export declare function getDockItemPosition(modalId: string, fallback?: Position): Position;
14
- //# sourceMappingURL=genie.d.ts.map
@@ -1,6 +0,0 @@
1
-
2
- export { DURATIONS, EASINGS, getDuration, getEasing, type AnimationType } from './timing';
3
- export { calculateMinimizeTransform, calculateRestoreTransform, calculateOpenTransform, transformToCSSVars, getDefaultDockTarget, getDockItemPosition, } from './genie';
4
- export { createAnimationController, type AnimationController, type AnimationState, type AnimationEvents, type AnimationControllerOptions, } from './controller';
5
- export { flipAnimate } from './flip';
6
- //# sourceMappingURL=index.d.ts.map
@@ -1,34 +0,0 @@
1
-
2
-
3
- export declare const DURATIONS: {
4
- readonly minimize: 500;
5
- readonly restore: 400;
6
- readonly open: 400;
7
- readonly close: 250;
8
- readonly attention: 300;
9
- readonly parentMove: 300;
10
-
11
- readonly parentRetargetInterval: 100;
12
- readonly centerAfterResize: 200;
13
- readonly glowStabilize: 1000;
14
- readonly overlayFade: 200;
15
- };
16
-
17
- export declare const TIMEOUT_SAFETY_MARGIN = 100;
18
-
19
- export declare const EASINGS: {
20
-
21
- readonly easeOut: "ease-out";
22
-
23
- readonly easeOutCubic: "cubic-bezier(0.25, 0.1, 0.25, 1)";
24
-
25
- readonly linear: "linear";
26
-
27
- readonly easeInOut: "ease-in-out";
28
- };
29
- export type AnimationType = 'open' | 'close' | 'minimize' | 'restore' | 'attention' | 'none';
30
-
31
- export declare function getDuration(type: AnimationType): number;
32
-
33
- export declare function getEasing(type: AnimationType): string;
34
- //# sourceMappingURL=timing.d.ts.map
@@ -1,34 +0,0 @@
1
- import { Position, Dimensions } from '../types';
2
- export interface DragState {
3
- isDragging: boolean;
4
- position: Position;
5
- hasBeenDragged: boolean;
6
- }
7
- export interface DragEvents {
8
- change: DragState;
9
- dragStart: Position;
10
- dragMove: Position;
11
- dragEnd: Position;
12
- }
13
- export interface DragBehaviorOptions {
14
- initialPosition?: Position;
15
- constrain?: boolean;
16
- }
17
- export interface DragBehavior {
18
- getState(): DragState;
19
- getPosition(): Position;
20
- isDragging(): boolean;
21
- hasBeenDragged(): boolean;
22
- setPosition(position: Position): void;
23
- setHasBeenDragged(value: boolean): void;
24
- reset(): void;
25
- constrainToViewport(modalSize: Dimensions): void;
26
- onPointerDown(e: PointerEvent, element: HTMLElement): void;
27
- onPointerMove(e: PointerEvent, modalSize: Dimensions): void;
28
- onPointerUp(e: PointerEvent, element: HTMLElement): void;
29
- subscribe(callback: (state: DragState) => void): () => void;
30
- destroy(): void;
31
- }
32
-
33
- export declare function createDragBehavior(options?: DragBehaviorOptions): DragBehavior;
34
- //# sourceMappingURL=drag.d.ts.map
@@ -1,23 +0,0 @@
1
-
2
-
3
- export declare function getFocusableElements(container: HTMLElement): HTMLElement[];
4
-
5
- export declare function trapFocus(event: KeyboardEvent, container: HTMLElement): void;
6
-
7
- export declare function focusFirstElement(container: HTMLElement): boolean;
8
-
9
- export declare function focusLastElement(container: HTMLElement): boolean;
10
-
11
- export declare function containsFocus(container: HTMLElement): boolean;
12
-
13
- export declare function createFocusTrap(container: HTMLElement): {
14
-
15
- activate(): void;
16
-
17
- deactivate(): void;
18
-
19
- handleKeyDown(event: KeyboardEvent): void;
20
-
21
- containsFocus(): boolean;
22
- };
23
- //# sourceMappingURL=focusTrap.d.ts.map
@@ -1,6 +0,0 @@
1
-
2
- export { createDragBehavior, type DragBehavior, type DragState, type DragEvents, type DragBehaviorOptions } from './drag';
3
- export { createResizeBehavior, type ResizeBehavior, type ResizeState, type ResizeEvents, type ResizeBehaviorOptions, type ResizeDirection } from './resize';
4
- export { trapFocus, focusFirstElement, focusLastElement, getFocusableElements, containsFocus, createFocusTrap } from './focusTrap';
5
- export { calculateOffsetFromParent, calculateChildPosition, calculateParentPosition, calculateCenteredChildPosition, getModalBounds, findParentModalElement, findChildModalElement, shouldChildBeVisible, getDescendantIds, getAncestorIds, findRootAncestor, } from './parentChild';
6
- //# sourceMappingURL=index.d.ts.map
@@ -1,27 +0,0 @@
1
- import { Position, Dimensions } from '../types';
2
-
3
- export declare function calculateOffsetFromParent(childPosition: Position, parentPosition: Position): Position;
4
-
5
- export declare function calculateChildPosition(parentPosition: Position, offset: Position): Position;
6
-
7
- export declare function calculateParentPosition(childPosition: Position, offset: Position): Position;
8
-
9
- export declare function calculateCenteredChildPosition(parentPosition: Position, parentSize: Dimensions, childSize: Dimensions): Position;
10
-
11
- export declare function getModalBounds(element: HTMLElement): {
12
- position: Position;
13
- size: Dimensions;
14
- };
15
-
16
- export declare function findParentModalElement(parentId: string): HTMLElement | null;
17
-
18
- export declare function findChildModalElement(childId: string): HTMLElement | null;
19
-
20
- export declare function shouldChildBeVisible(parentIsOpen: boolean, parentIsMinimized: boolean, parentIsHiddenWithParent: boolean): boolean;
21
-
22
- export declare function getDescendantIds(modalId: string, getChildId: (id: string) => string | undefined): string[];
23
-
24
- export declare function getAncestorIds(modalId: string, getParentId: (id: string) => string | undefined): string[];
25
-
26
- export declare function findRootAncestor(modalId: string, getParentId: (id: string) => string | undefined): string;
27
- //# sourceMappingURL=parentChild.d.ts.map
@@ -1,49 +0,0 @@
1
- import { Position, Dimensions } from '../types';
2
- export type ResizeDirection = 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw' | '';
3
- export interface ResizeState {
4
- isResizing: boolean;
5
- direction: ResizeDirection;
6
- size: Dimensions;
7
- hasBeenResized: boolean;
8
- }
9
- export interface ResizeEvents {
10
- change: ResizeState;
11
- resizeStart: {
12
- direction: ResizeDirection;
13
- };
14
- resizeMove: {
15
- size: Dimensions;
16
- position: Position;
17
- };
18
- resizeEnd: {
19
- size: Dimensions;
20
- position: Position;
21
- };
22
- }
23
- export interface ResizeBehaviorOptions {
24
- minWidth?: number;
25
- minHeight?: number;
26
- getPosition: () => Position;
27
- setPosition: (pos: Position) => void;
28
- getHasBeenDragged: () => boolean;
29
- setHasBeenDragged: (value: boolean) => void;
30
- getElement: () => HTMLElement | null;
31
- getSymmetricResize?: () => boolean;
32
- onResizeEnd?: (position: Position, size: Dimensions) => void;
33
- }
34
- export interface ResizeBehavior {
35
- getState(): ResizeState;
36
- getSize(): Dimensions;
37
- isResizing(): boolean;
38
- hasBeenResized(): boolean;
39
- justFinishedResizing(): boolean;
40
- setSize(size: Dimensions): void;
41
- reset(): void;
42
- constrainToViewport(): void;
43
- startResize(e: PointerEvent, direction: ResizeDirection): void;
44
- subscribe(callback: (state: ResizeState) => void): () => void;
45
- destroy(): void;
46
- }
47
-
48
- export declare function createResizeBehavior(options: ResizeBehaviorOptions): ResizeBehavior;
49
- //# sourceMappingURL=resize.d.ts.map
@@ -1,90 +0,0 @@
1
- import { DockPosition, DockLabelMode, ModalFeatures, AppearanceConfig, DeepPartial, BackdropConfig } from '../types';
2
- export type { ModalFeatures, AppearanceConfig, BackdropConfig } from '../types';
3
- export type { DeepPartial } from '../types';
4
-
5
- export declare function normalizeBackdropConfig(backdrop: boolean | BackdropConfig): BackdropConfig;
6
- export interface DockConfig {
7
-
8
- position: DockPosition;
9
-
10
- labelMode: DockLabelMode;
11
-
12
- enableReorder: boolean;
13
-
14
- enableFreeDrag: boolean;
15
- }
16
- export interface AnimationDurations {
17
-
18
- open: number;
19
-
20
- close: number;
21
-
22
- minimize: number;
23
-
24
- restore: number;
25
-
26
- easing: string;
27
- }
28
- export interface ZIndexConfig {
29
-
30
- base: number;
31
-
32
- dock: number;
33
-
34
- toast: number;
35
- }
36
- export interface ParentChildConfig {
37
-
38
- movementMode: 'realtime' | 'animated';
39
-
40
- animationDuration: number;
41
- }
42
- export interface PositioningConfig {
43
-
44
- strategy: 'centered' | 'smart';
45
-
46
- modalGap: number;
47
-
48
- avoidElements: string[];
49
- }
50
- export interface ModalLibraryConfig {
51
- features: ModalFeatures;
52
- dock: DockConfig;
53
- animations: AnimationDurations;
54
- appearance: AppearanceConfig;
55
- zIndex: ZIndexConfig;
56
- parentChild: ParentChildConfig;
57
- positioning: PositioningConfig;
58
-
59
- portalTarget: string | HTMLElement;
60
- }
61
- export type PartialModalLibraryConfig = DeepPartial<ModalLibraryConfig>;
62
- export declare const defaultConfig: ModalLibraryConfig;
63
-
64
- export declare function subscribeToConfig(callback: () => void): () => void;
65
-
66
- export declare function getConfigVersion(): number;
67
-
68
- export declare function getConfig(): ModalLibraryConfig;
69
-
70
- export declare function setConfig(config: PartialModalLibraryConfig): void;
71
-
72
- export declare function resetConfig(): void;
73
-
74
- export declare function mergeConfig(base: ModalLibraryConfig, override: PartialModalLibraryConfig): ModalLibraryConfig;
75
-
76
- export declare function isFeatureEnabled(feature: keyof ModalFeatures): boolean;
77
-
78
- export interface ModalConfigHelper {
79
- isFeatureEnabled: (feature: keyof ModalFeatures) => boolean;
80
- getAppearance: <K extends keyof AppearanceConfig>(key: K) => AppearanceConfig[K];
81
- getPositioning: <K extends keyof PositioningConfig>(key: K) => PositioningConfig[K];
82
- getEffectiveConfig: () => ModalLibraryConfig;
83
- }
84
-
85
- export declare function createConfigHelper(modalConfig?: DeepPartial<{
86
- features?: Partial<ModalFeatures>;
87
- appearance?: Partial<AppearanceConfig>;
88
- positioning?: Partial<PositioningConfig>;
89
- }>, providerConfig?: PartialModalLibraryConfig): ModalConfigHelper;
90
- //# sourceMappingURL=defaults.d.ts.map
@@ -1,4 +0,0 @@
1
-
2
- export * from './defaults';
3
- export * from './resolution';
4
- //# sourceMappingURL=index.d.ts.map
@@ -1,25 +0,0 @@
1
- import { ModalLibraryConfig, ModalFeatures, AppearanceConfig, AnimationDurations, PositioningConfig, ParentChildConfig, PartialModalLibraryConfig } from './defaults';
2
- import { ModalConfigOverrides } from '../types';
3
- export interface ConfigResolverOptions {
4
-
5
- getModalConfig: () => ModalConfigOverrides | undefined;
6
-
7
- getProviderConfig: () => PartialModalLibraryConfig | undefined;
8
- }
9
- export interface ConfigResolver {
10
-
11
- getEffectiveConfig: () => ModalLibraryConfig;
12
-
13
- isFeatureEnabled: (feature: keyof ModalFeatures) => boolean;
14
-
15
- getAppearance: <K extends keyof AppearanceConfig>(key: K) => AppearanceConfig[K];
16
-
17
- getAnimation: <K extends keyof AnimationDurations>(key: K) => AnimationDurations[K];
18
-
19
- getPositioning: <K extends keyof PositioningConfig>(key: K) => PositioningConfig[K];
20
-
21
- getParentChild: <K extends keyof ParentChildConfig>(key: K) => ParentChildConfig[K];
22
- }
23
-
24
- export declare function createConfigResolver(options: ConfigResolverOptions): ConfigResolver;
25
- //# sourceMappingURL=resolution.d.ts.map
@@ -1,9 +0,0 @@
1
-
2
- export * from './types';
3
- export * from './config';
4
- export * from './state';
5
- export { CSS, CSS_CLASSES, DATA_ATTRS, DATA_ATTRIBUTES, RESIZE_DIRECTIONS, RESIZE_DIRECTION_LABELS, ANIMATION_DURATIONS, DEFAULTS, FOCUSABLE_SELECTORS, onAnimationEnd, setupAnimationEndListener, whenHasDimensions, ANIMATION_NAMES, constrainToViewport, constrainSizeToViewport, calculateOverlap, calculateTotalOverlap, calculateMinDistance, getElementBounds, calculateEqualSpaceLayout, calculateSmartLayout, computeAvailableArea, type ModalBounds, type ViewportConstraintOptions, type SmartPositionOptions, type ModalBoundsWithId, type ModalLayoutInfo, type SmartLayoutOptions, type SmartLayoutResult, toDataId, getMinimizedModals, calculateDockDragPosition, constrainDockPosition, getDockContainerClasses, getDockClasses, isBackdropEnabled, hasOpenModals, getBackdropConfig, } from './utils';
6
- export * from './behaviors';
7
- export * from './animation';
8
- export * from './modal';
9
- //# sourceMappingURL=index.d.ts.map
@@ -1,70 +0,0 @@
1
- import { Position, ModalId } from '../types';
2
- import { ResizeDirection } from '../behaviors/resize';
3
- import { ModalControllerOptions, ComputedModalState } from './Controller.types';
4
- export type { ModalControllerOptions, ComputedModalState, ModalControllerEvents, ModalConfigHelper, } from './Controller.types';
5
- export declare class ModalController {
6
- private id;
7
- private dataId;
8
- private options;
9
- private drag;
10
- private resize;
11
- private animation;
12
- private positioning;
13
- private lifecycle;
14
- private interactions;
15
- private stateManager;
16
- private overlayClosing;
17
- private emitter;
18
- private unsubscribeState;
19
- private cachedState;
20
- constructor(options: ModalControllerOptions);
21
-
22
- mount(element: HTMLElement): void;
23
-
24
- destroy(): void;
25
-
26
- private get element();
27
-
28
- private handleWindowResize;
29
-
30
- private register;
31
-
32
- getState(): ComputedModalState;
33
-
34
- subscribe(callback: (state: ComputedModalState) => void): () => void;
35
- private notifyStateChange;
36
-
37
- startDrag(e: PointerEvent): void;
38
-
39
- startResize(e: PointerEvent, direction: ResizeDirection): void;
40
-
41
- handlePointerMove(e: PointerEvent): void;
42
-
43
- handlePointerUp(e: PointerEvent): void;
44
-
45
- handleKeyDown(e: KeyboardEvent): void;
46
-
47
- handleTabKey(e: KeyboardEvent): void;
48
-
49
- minimize(): void;
50
-
51
- close(): void;
52
-
53
- toggleTransparency(): void;
54
-
55
- bringToFront(): void;
56
-
57
- setOpenSourcePosition(position: Position | null): void;
58
-
59
- updateGlow(glow: ModalControllerOptions['glow']): void;
60
-
61
- focusFirst(): void;
62
- private handleResizeEnd;
63
- private handleStateChange;
64
- private handlePendingStates;
65
- getId(): ModalId;
66
- getDataId(): string;
67
- getElement(): HTMLElement | null;
68
- }
69
- export declare function createModalController(options: ModalControllerOptions): ModalController;
70
- //# sourceMappingURL=Controller.d.ts.map