aio-popup 4.0.0 → 4.0.1
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.
- package/index.css +31 -18
- package/index.d.ts +2 -1
- package/index.js +5 -5
- package/package.json +1 -1
package/index.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
.aio-popup-backdrop.not-mounted {
|
|
2
2
|
background: none !important;
|
|
3
|
-
transition:
|
|
3
|
+
transition: .3s;
|
|
4
4
|
}
|
|
5
5
|
|
|
6
6
|
.aio-popup-backdrop {
|
|
@@ -8,55 +8,58 @@
|
|
|
8
8
|
display: flex;
|
|
9
9
|
width: 100%;
|
|
10
10
|
height: 100%;
|
|
11
|
-
left: 0;
|
|
12
|
-
top: 0;
|
|
11
|
+
left: 0 !important;
|
|
12
|
+
top: 0 !important;
|
|
13
13
|
align-items: center;
|
|
14
14
|
justify-content: center;
|
|
15
15
|
z-index: 10000;
|
|
16
16
|
background: rgba(0, 0, 0, 0.1);
|
|
17
|
-
transition:
|
|
17
|
+
transition: .3s;
|
|
18
18
|
pointer-events: all;
|
|
19
19
|
outline:none;
|
|
20
|
+
flex-shrink:0;
|
|
20
21
|
}
|
|
21
22
|
.aio-popup {
|
|
22
23
|
border-radius: 4px;
|
|
23
24
|
font-size: 14px;
|
|
24
|
-
transition:
|
|
25
|
+
transition: .3s;
|
|
25
26
|
max-width: 100vw;
|
|
26
27
|
max-height: 100vh;
|
|
27
28
|
pointer-events: auto;
|
|
28
29
|
display:flex;
|
|
29
30
|
flex-direction: column;
|
|
30
|
-
position: absolute;
|
|
31
31
|
outline:none;
|
|
32
|
+
z-index:10;
|
|
33
|
+
position:absolute;
|
|
32
34
|
}
|
|
33
35
|
.aio-popup.rtl {direction: rtl;}
|
|
34
|
-
.aio-popup.not-mounted {transition:
|
|
36
|
+
.aio-popup.not-mounted {transition: .3s;}
|
|
35
37
|
/**********position (fullscreen)*******/
|
|
36
38
|
.aio-popup-position-fullscreen>.aio-popup.not-mounted {transform: scale(0);}
|
|
37
39
|
.aio-popup-position-fullscreen>.aio-popup {width: 100%;height: 100%;}
|
|
38
40
|
/**********position (top)**************/
|
|
39
41
|
.aio-popup-position-top {align-items: flex-start;}
|
|
40
|
-
.aio-popup-position-top > .aio-popup.not-mounted {
|
|
41
|
-
.aio-popup-position-top > .aio-popup {width: 100%;max-height: 90vh;
|
|
42
|
+
.aio-popup-position-top > .aio-popup.not-mounted {transform: translateY(-500px);}
|
|
43
|
+
.aio-popup-position-top > .aio-popup {width: 100%;max-height: 90vh;transform: translateY(0px);}
|
|
42
44
|
/**********position (bottom)***********/
|
|
43
45
|
.aio-popup-position-bottom {align-items: flex-end;}
|
|
44
|
-
.aio-popup-position-bottom>.aio-popup.not-mounted {
|
|
45
|
-
.aio-popup-position-bottom>.aio-popup {width: 100%;
|
|
46
|
+
.aio-popup-position-bottom>.aio-popup.not-mounted {opacity: 0; bottom:-500px; transform: scaleY(0);}
|
|
47
|
+
.aio-popup-position-bottom>.aio-popup {width: 100%; bottom: 0; opacity: 1; transform: scaleY(1); }
|
|
48
|
+
|
|
46
49
|
/**********position (left)*************/
|
|
47
50
|
.aio-popup-position-left {justify-content: left;}
|
|
48
|
-
.aio-popup-position-left > .aio-popup.not-mounted {
|
|
49
|
-
.aio-popup-position-left > .aio-popup {height: 100%;max-width: 90vh;
|
|
51
|
+
.aio-popup-position-left > .aio-popup.not-mounted {transform: translateX(-500px);}
|
|
52
|
+
.aio-popup-position-left > .aio-popup {height: 100%;max-width: 90vh;transform: translateX(0px);}
|
|
50
53
|
/**********position (right)************/
|
|
51
54
|
.aio-popup-position-right {justify-content: right;}
|
|
52
|
-
.aio-popup-position-right > .aio-popup.not-mounted {
|
|
53
|
-
.aio-popup-position-right > .aio-popup {height: 100%;max-width: 90vh;
|
|
55
|
+
.aio-popup-position-right > .aio-popup.not-mounted {transform: translateX(500px) scaleX(0);}
|
|
56
|
+
.aio-popup-position-right > .aio-popup {height: 100%;max-width: 90vh;transform: translateX(0px) scaleX(1);;}
|
|
54
57
|
/**********position (popover)************/
|
|
55
58
|
.aio-popup-position-popover {opacity: 1;}
|
|
56
59
|
.aio-popup-position-popover>.aio-popup.not-mounted {opacity: 0;}
|
|
57
60
|
/**********position (center)***********/
|
|
58
|
-
.aio-popup-position-center>.aio-popup.not-mounted {transform: translateY(500px);opacity: 0;}
|
|
59
|
-
.aio-popup-position-center>.aio-popup {max-width: 100vw;width: fit-content;opacity: 1;max-height: 100vh;}
|
|
61
|
+
.aio-popup-position-center>.aio-popup.not-mounted {transform: translateY(-500px);opacity: 0;}
|
|
62
|
+
.aio-popup-position-center>.aio-popup {max-width: 100vw;width: fit-content;opacity: 1;max-height: 100vh;transform: translateY(0px); transform-origin:top;}
|
|
60
63
|
/**************************************/
|
|
61
64
|
|
|
62
65
|
.aio-popup-header {
|
|
@@ -68,13 +71,23 @@
|
|
|
68
71
|
font-size: 16px;
|
|
69
72
|
font-weight: bold;
|
|
70
73
|
min-height: 48px;
|
|
74
|
+
gap:12px;
|
|
71
75
|
}
|
|
72
76
|
|
|
73
77
|
.aio-popup-header-subtitle {
|
|
74
78
|
font-size: 85%;
|
|
75
79
|
opacity: 0.5;
|
|
76
80
|
}
|
|
77
|
-
|
|
81
|
+
.aio-popup-header-before{
|
|
82
|
+
display:flex;
|
|
83
|
+
align-items: center;
|
|
84
|
+
justify-content: center;
|
|
85
|
+
}
|
|
86
|
+
.aio-popup-header-after{
|
|
87
|
+
display:flex;
|
|
88
|
+
align-items: center;
|
|
89
|
+
justify-content: center;
|
|
90
|
+
}
|
|
78
91
|
.aio-popup-body {
|
|
79
92
|
background: #fff;
|
|
80
93
|
flex: 1;
|
package/index.d.ts
CHANGED
|
@@ -64,6 +64,7 @@ export type AP_alert = {
|
|
|
64
64
|
className?: string;
|
|
65
65
|
closeText?: string;
|
|
66
66
|
animate?: boolean;
|
|
67
|
+
onClose?: boolean | (() => void);
|
|
67
68
|
};
|
|
68
69
|
export type AP_snackebar = {
|
|
69
70
|
id?: string;
|
|
@@ -78,7 +79,7 @@ export type AP_snackebar = {
|
|
|
78
79
|
type: 'success' | 'error' | 'warning' | 'info';
|
|
79
80
|
verticalAlign?: 'start' | 'end';
|
|
80
81
|
horizontalAlign?: 'start' | 'center' | 'end';
|
|
81
|
-
onClose?:
|
|
82
|
+
onClose?: boolean | (() => void);
|
|
82
83
|
attrs?: any;
|
|
83
84
|
};
|
|
84
85
|
export type AP_confirm = {
|
package/index.js
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import t,{Component as e,createRef as o,useEffect as i,useState as r,createContext as a,useContext as n,useRef as l,forwardRef as d,useImperativeHandle as s}from"react";import*as p from"react-dom/server";import{Icon as c}from"@mdi/react";import{mdiClose as u}from"@mdi/js";import _ from"jquery";import"./index.css";import{AddToAttrs as m}from"aio-utils";import{jsx as h}from"react/jsx-runtime";import{Fragment as $}from"react/jsx-runtime";import{jsxs as f}from"react/jsx-runtime";import{createElement as g}from"react";function _defineProperty(t,e,o){return(e=_toPropertyKey(e))in t?Object.defineProperty(t,e,{value:o,enumerable:!0,configurable:!0,writable:!0}):t[e]=o,t}function _toPropertyKey(t){var e=_toPrimitive(t,"string");return"symbol"==typeof e?e:String(e)}function _toPrimitive(t,e){if("object"!=typeof t||null===t)return t;var o=t[Symbol.toPrimitive];if(void 0!==o){var i=o.call(t,e||"default");if("object"!=typeof i)return i;throw TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}export default class v{constructor(t){_defineProperty(this,"rtl",void 0),_defineProperty(this,"render",void 0),_defineProperty(this,"addModal",void 0),_defineProperty(this,"addAlert",void 0),_defineProperty(this,"removeModal",void 0),_defineProperty(this,"addSnackebar",void 0),_defineProperty(this,"getModals",void 0),_defineProperty(this,"addConfirm",void 0),_defineProperty(this,"addPrompt",void 0),_defineProperty(this,"popupId",void 0),_defineProperty(this,"popupsRef",void 0);let{rtl:e=!1}=t||{};this.rtl=e,this.addSnackebar=()=>{},this.popupsRef=o(),this.getModals=()=>{let t=this.popupsRef.current;return null===t?[]:t.getModals()||[]},this.addModal=t=>{let e=this.popupsRef.current;null!==e&&e.addModal(t)},this.removeModal=t=>{let e=this.popupsRef.current;null!==e&&e.removeModal(t)},this.render=()=>{let t={rtl:e,getActions:({add:t})=>this.addSnackebar=t};return f($,{children:[h(Popups,{rtl:e,ref:this.popupsRef}),h(Snackebar,{...t})]})},this.addAlert=t=>Alert(t),this.addConfirm=t=>{let{title:e,subtitle:o,text:i,submitText:r="Yes",canselText:a="No",onSubmit:n,onCansel:l=()=>{},setAttrs:d=()=>({})}=t,s={position:"center",setAttrs(t){let e=d(t);return"modal"===t?m(e,{className:"aio-popup-confirm"}):e},header:{title:e,subtitle:o},body:()=>i,footer:()=>f($,{children:[h("button",{type:"button",onClick:()=>{l(),this.removeModal()},children:a}),h("button",{type:"button",className:"active",onClick:async()=>{if(n)!1!==await n()&&this.removeModal()},children:r})]})};this.addModal(s)},this.addPrompt=t=>{let{title:e,subtitle:o,text:i,submitText:r="تایید",canselText:a="بستن",onSubmit:n,onCansel:l=()=>{},setAttrs:d=()=>({})}=t,s={position:"center",setAttrs(t){let e=d(t);return"modal"===t?m(e,{className:"aio-popup-prompt"}):e},state:{temp:""},header:{title:e,subtitle:o},body:({state:t,setState:e})=>h("textarea",{placeholder:i,value:t.temp,onChange(t){e&&e({temp:t.target.value})}}),footer:({state:t,setState:e})=>f($,{children:[h("button",{type:"button",onClick:()=>{l(),this.removeModal()},children:a}),h("button",{type:"button",className:"active",onClick:async()=>{if(n)!1!==await n(t.temp)?this.removeModal():e({temp:""})},disabled:!t.temp,children:r})]})};this.addModal(s)}}};let Popups=d((t,e)=>{let[o,i]=r([]),a=l(o);a.current=o;let{rtl:n}=t;function d(t){void 0===t.id&&(t.id="popup"+Math.round(1e6*Math.random()));let e=t;i(o=>[...o.filter(({id:e})=>e!==t.id),e])}async function p(t="last"){if("all"===t){i([]);return}if(!a.current.length)return;"last"===t&&(t=a.current[a.current.length-1].id);let e=a.current.find(e=>e.id===t);e&&(_(`[data-id=${t}]`).addClass("not-mounted"),setTimeout(()=>{"function"==typeof e.onClose&&e.onClose(),i(e=>e.filter(e=>e.id!==t))},300))}function c(){return a.current.map((t,e)=>h(Popup,{modal:t,rtl:n,isLast:e===a.current.length-1,onClose:()=>p(t.id)},t.id))}s(e,()=>({addModal:d,removeModal:p,getModals:()=>a.current}));let u=c();return u.length?h($,{children:u}):null}),CTX=a({});function Popup(t){let{modal:e,rtl:a,onClose:n,isLast:d}=t,{setAttrs:s=()=>({}),id:p,position:c="fullscreen",body:u,getTarget:$,maxHeight:g,fixStyle:v=t=>t,fitTo:b}=e,[y]=r({dom:o(),backdropDom:o(),dui:void 0,isDown:!1}),[k,C]=r({}),[M,w]=r(e.state),L=s("modal")||{},x=s("backdrop")||{},P=l(!1);async function N(){n()}function A(t){if(!y.dui)return;let e=_(t.target);"popover"===c&&e.attr("data-id")!==y.dui&&!e.parents(`[data-id=${y.dui}]`).length&&N()}i(()=>()=>{_(window).unbind("click",A)}),i(()=>{let t="popover"===c?function t(){if(!$)return{};let o=$();if(!o||!o.length)return{};let i={dom:_(y.dom.current),target:o,fitHorizontal:e.fitHorizontal,fixStyle:v,pageSelector:e.pageSelector,limitTo:e.limitTo,fitTo:b,attrs:L,rtl:a},r={...Align(i),position:"absolute"};return g&&(r.maxHeight=g),r}():{};if(console.log("updatedStyle.top",t.top),C(t),$){y.dui="a"+Math.round(1e7*Math.random());$().attr("data-id",y.dui)}setTimeout(()=>{let t=_(y.dom.current);t.removeClass("not-mounted"),_(y.backdropDom.current).removeClass("not-mounted"),t.focus()},0),_(window).unbind("click",A),_(window).bind("click",A)},[]);function H(t){if(d)27===t.keyCode&&n()}function S(){setTimeout(()=>y.isDown=!1,0)}let D,R,T,B;return h(CTX.Provider,{value:{close:N,state:M,setState:w},children:h("div",{...(D="aio-popup-backdrop",D+=` aio-popup-position-${c}`,D+=a?" rtl":" ltr",P&&(D+=" not-mounted"),m(x,{className:D,attrs:{ref:y.backdropDom,onKeyDown:H,tabIndex:0,"data-id":p,onClick:x.onClick?x.onClick:function t(e){if(!y.isDown){e.stopPropagation();_(e.target).hasClass("aio-popup-backdrop")&&N()}}}})),children:f("div",{...(R={...k,...L.style},T="ontouchstart"in document.documentElement?"onTouchStart":"onMouseDown",{...L,ref:y.dom,"data-id":e.id,tabIndex:0,onKeyDown:H,[T]:function t(e){_(window).unbind("mouseup",S),_(window).bind("mouseup",S),y.isDown=!0},className:(B="aio-popup",B+=a?" rtl":" ltr",P&&(B+=" not-mounted"),L.className&&(B+=" "+L.className),B),style:{...R}}),children:[!!e.header&&h(ModalHeader,{modal:e}),h(ModalBody,{modal:e}),!!e.footer&&h("div",{...m(s("footer"),{className:"aio-popup-footer"}),children:e.footer({state:M,setState:w,close:N})})]})})})}let ModalHeader=t=>{let e=n(CTX),{modal:o}=t,{state:i,setState:r}=e,{setAttrs:a=()=>({})}=o,l=a("modal")||{};if("function"==typeof o.header)return o.header({close:e.close,state:i,setState:r});if("object"!=typeof o.header)return null;let d="aio-popup-header",{title:s,subtitle:p,onClose:_,before:$,after:g}=o.header;function v(t){t.stopPropagation(),t.preventDefault(),"function"==typeof _?_({state:i,setState:r}):e.close()}function b(){return p?f("div",{style:{display:"flex",flexDirection:"column",justifyContent:"center",flex:1},children:[h("div",{className:`${d}-title`,children:s}),h("div",{className:`${d}-subtitle`,children:p})]}):h("div",{className:`${d}-title`,style:{display:"flex",alignItems:"center",flex:1},children:s})}return f("div",{...m(l,{className:d}),children:[void 0!==$&&h("div",{className:`${d}-before`,onClick:t=>v(t),children:$}),!!s&&b(),void 0!==g&&h("div",{className:`${d}-after`,onClick:t=>v(t),children:g}),!1!==_&&h("div",{className:`${d}-close-button`,onClick:t=>v(t),children:h(c,{path:u,size:.8})})]})},ModalBody=t=>{let{state:e,setState:o,close:i}=n(CTX),{modal:r}=t,{body:a=()=>null,setAttrs:l=()=>({})}=r,d=l("body")||{},s=a({close:i,state:e,setState:o});return s&&null!==s?h("div",{...m(d,{className:"aio-popup-body aio-popup-scroll"}),children:s}):null};function Alert(t){let{icon:e,type:o="",text:i="",subtext:r="",time:a=10,className:n,closeText:l="بستن",position:d="center"}=t,
|
|
2
|
-
<div class='aio-popup-alert-container not-mounted ${
|
|
1
|
+
import t,{Component as e,createRef as o,useEffect as i,useState as r,createContext as a,useContext as n,useRef as l,forwardRef as d,useImperativeHandle as s}from"react";import*as p from"react-dom/server";import{Icon as c}from"@mdi/react";import{mdiClose as u}from"@mdi/js";import _ from"jquery";import"./index.css";import{AddToAttrs as m}from"aio-utils";import{jsx as h}from"react/jsx-runtime";import{Fragment as $}from"react/jsx-runtime";import{jsxs as f}from"react/jsx-runtime";import{createElement as g}from"react";function _defineProperty(t,e,o){return(e=_toPropertyKey(e))in t?Object.defineProperty(t,e,{value:o,enumerable:!0,configurable:!0,writable:!0}):t[e]=o,t}function _toPropertyKey(t){var e=_toPrimitive(t,"string");return"symbol"==typeof e?e:String(e)}function _toPrimitive(t,e){if("object"!=typeof t||null===t)return t;var o=t[Symbol.toPrimitive];if(void 0!==o){var i=o.call(t,e||"default");if("object"!=typeof i)return i;throw TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}export default class v{constructor(t){_defineProperty(this,"rtl",void 0),_defineProperty(this,"render",void 0),_defineProperty(this,"addModal",void 0),_defineProperty(this,"addAlert",void 0),_defineProperty(this,"removeModal",void 0),_defineProperty(this,"addSnackebar",void 0),_defineProperty(this,"getModals",void 0),_defineProperty(this,"addConfirm",void 0),_defineProperty(this,"addPrompt",void 0),_defineProperty(this,"popupId",void 0),_defineProperty(this,"popupsRef",void 0);let{rtl:e=!1}=t||{};this.rtl=e,this.addSnackebar=()=>{},this.popupsRef=o(),this.getModals=()=>{let t=this.popupsRef.current;return null===t?[]:t.getModals()||[]},this.addModal=t=>{let e=this.popupsRef.current;null!==e&&e.addModal(t)},this.removeModal=t=>{let e=this.popupsRef.current;null!==e&&e.removeModal(t)},this.render=()=>{let t={rtl:e,getActions:({add:t})=>this.addSnackebar=t};return f($,{children:[h(Popups,{rtl:e,ref:this.popupsRef}),h(Snackebar,{...t})]})},this.addAlert=t=>Alert(t),this.addConfirm=t=>{let{title:e,subtitle:o,text:i,submitText:r="Yes",canselText:a="No",onSubmit:n,onCansel:l=()=>{},setAttrs:d=()=>({})}=t,s={position:"center",setAttrs(t){let e=d(t);return"modal"===t?m(e,{className:"aio-popup-confirm"}):e},header:{title:e,subtitle:o},body:()=>i,footer:()=>f($,{children:[h("button",{type:"button",onClick:()=>{l(),this.removeModal()},children:a}),h("button",{type:"button",className:"active",onClick:async()=>{if(n)!1!==await n()&&this.removeModal()},children:r})]})};this.addModal(s)},this.addPrompt=t=>{let{title:e,subtitle:o,text:i,submitText:r="تایید",canselText:a="بستن",onSubmit:n,onCansel:l=()=>{},setAttrs:d=()=>({})}=t,s={position:"center",setAttrs(t){let e=d(t);return"modal"===t?m(e,{className:"aio-popup-prompt"}):e},state:{temp:""},header:{title:e,subtitle:o},body:({state:t,setState:e})=>h("textarea",{placeholder:i,value:t.temp,onChange(t){e&&e({temp:t.target.value})}}),footer:({state:t,setState:e})=>f($,{children:[h("button",{type:"button",onClick:()=>{l(),this.removeModal()},children:a}),h("button",{type:"button",className:"active",onClick:async()=>{if(n)!1!==await n(t.temp)?this.removeModal():e({temp:""})},disabled:!t.temp,children:r})]})};this.addModal(s)}}};let Popups=d((t,e)=>{let[o,i]=r([]),a=l(o);a.current=o;let{rtl:n}=t;function d(t){void 0===t.id&&(t.id="popup"+Math.round(1e6*Math.random()));let e=t;i(o=>[...o.filter(({id:e})=>e!==t.id),e])}async function p(t="last"){if("all"===t){i([]);return}if(!a.current.length)return;"last"===t&&(t=a.current[a.current.length-1].id);let e=a.current.find(e=>e.id===t);e&&(_(`[data-id=${t}]`).addClass("not-mounted"),setTimeout(()=>{"function"==typeof e.onClose&&e.onClose(),i(e=>e.filter(e=>e.id!==t))},300))}function c(){return a.current.map((t,e)=>h(Popup,{modal:t,rtl:n,isLast:e===a.current.length-1,onClose:()=>p(t.id)},t.id))}s(e,()=>({addModal:d,removeModal:p,getModals:()=>a.current}));let u=c();return u.length?h($,{children:u}):null}),CTX=a({});function Popup(t){let{modal:e,rtl:a,onClose:n,isLast:d}=t,{setAttrs:s=()=>({}),id:p,position:c="fullscreen",body:u,getTarget:$,maxHeight:g,fixStyle:v=t=>t,fitTo:b}=e,[y]=r({dom:o(),backdropDom:o(),dui:void 0,isDown:!1}),[k,C]=r({}),[M,w]=r(e.state),L=s("modal")||{},x=s("backdrop")||{},P=l(!1);async function N(){n()}function A(t){if(!y.dui)return;let e=_(t.target);"popover"===c&&e.attr("data-id")!==y.dui&&!e.parents(`[data-id=${y.dui}]`).length&&N()}i(()=>()=>{_(window).unbind("click",A)}),i(()=>{let t="popover"===c?function t(){if(!$)return{};let o=$();if(!o||!o.length)return{};let i={dom:_(y.dom.current),target:o,fitHorizontal:e.fitHorizontal,fixStyle:v,pageSelector:e.pageSelector,limitTo:e.limitTo,fitTo:b,attrs:L,rtl:a},r={...Align(i),position:"absolute"};return g&&(r.maxHeight=g),r}():{};if(console.log("updatedStyle.top",t.top),C(t),$){y.dui="a"+Math.round(1e7*Math.random());$().attr("data-id",y.dui)}setTimeout(()=>{let t=_(y.dom.current);t.removeClass("not-mounted"),_(y.backdropDom.current).removeClass("not-mounted"),t.focus()},0),_(window).unbind("click",A),_(window).bind("click",A)},[]);function H(t){if(d)27===t.keyCode&&n()}function S(){setTimeout(()=>y.isDown=!1,0)}let D,R,T,B;return h(CTX.Provider,{value:{close:N,state:M,setState:w},children:h("div",{...(D="aio-popup-backdrop",D+=` aio-popup-position-${c}`,D+=a?" rtl":" ltr",P&&(D+=" not-mounted"),m(x,{className:D,attrs:{ref:y.backdropDom,onKeyDown:H,tabIndex:0,"data-id":p,onClick:x.onClick?x.onClick:function t(e){if(!y.isDown){e.stopPropagation();_(e.target).hasClass("aio-popup-backdrop")&&N()}}}})),children:f("div",{...(R={...k,...L.style},T="ontouchstart"in document.documentElement?"onTouchStart":"onMouseDown",{...L,ref:y.dom,"data-id":e.id,tabIndex:0,onKeyDown:H,[T]:function t(e){_(window).unbind("mouseup",S),_(window).bind("mouseup",S),y.isDown=!0},className:(B="aio-popup",B+=a?" rtl":" ltr",P&&(B+=" not-mounted"),L.className&&(B+=" "+L.className),B),style:{...R}}),children:[!!e.header&&h(ModalHeader,{modal:e}),h(ModalBody,{modal:e}),!!e.footer&&h("div",{...m(s("footer"),{className:"aio-popup-footer"}),children:e.footer({state:M,setState:w,close:N})})]})})})}let ModalHeader=t=>{let e=n(CTX),{modal:o}=t,{state:i,setState:r}=e,{setAttrs:a=()=>({})}=o,l=a("modal")||{};if("function"==typeof o.header)return o.header({close:e.close,state:i,setState:r});if("object"!=typeof o.header)return null;let d="aio-popup-header",{title:s,subtitle:p,onClose:_,before:$,after:g}=o.header;function v(t){t.stopPropagation(),t.preventDefault(),"function"==typeof _?_({state:i,setState:r}):e.close()}function b(){return p?f("div",{style:{display:"flex",flexDirection:"column",justifyContent:"center",flex:1},children:[h("div",{className:`${d}-title`,children:s}),h("div",{className:`${d}-subtitle`,children:p})]}):h("div",{className:`${d}-title`,style:{display:"flex",alignItems:"center",flex:1},children:s})}return f("div",{...m(l,{className:d}),children:[void 0!==$&&h("div",{className:`${d}-before`,onClick:t=>v(t),children:$}),!!s&&b(),void 0!==g&&h("div",{className:`${d}-after`,onClick:t=>v(t),children:g}),!1!==_&&h("div",{className:`${d}-close-button`,onClick:t=>v(t),children:h(c,{path:u,size:.8})})]})},ModalBody=t=>{let{state:e,setState:o,close:i}=n(CTX),{modal:r}=t,{body:a=()=>null,setAttrs:l=()=>({})}=r,d=l("body")||{},s=a({close:i,state:e,setState:o});return s&&null!==s?h("div",{...m(d,{className:"aio-popup-body aio-popup-scroll"}),children:s}):null};function Alert(t){let{icon:e,type:o="",text:i="",subtext:r="",time:a=10,className:n,closeText:l="بستن",position:d="center",onClose:s}=t,c={id:"",time:0,getId:()=>"aa"+Math.round(1e8*Math.random()),getBarRender:()=>`<div class='aio-popup-time-bar' style="width:${c.time}%;"></div>`,updateBarRender(){_(`.aio-popup-alert-container.${c.id} .aio-popup-time`).html(c.getBarRender())},getRender:()=>`
|
|
2
|
+
<div class='aio-popup-alert-container not-mounted ${c.id} aio-popup-alert-container-${d}'>
|
|
3
3
|
<div class='aio-popup-alert aio-popup-alert-${o}'>
|
|
4
|
-
<div class='aio-popup-alert-header'>${
|
|
4
|
+
<div class='aio-popup-alert-header'>${c.getIcon()}</div>
|
|
5
5
|
<div class='aio-popup-alert-body aio-popup-scroll'>
|
|
6
6
|
<div class='aio-popup-alert-text'>${p.renderToStaticMarkup(i)}</div>
|
|
7
7
|
<div class='aio-popup-alert-subtext'>${r}</div>
|
|
8
8
|
</div>
|
|
9
9
|
<div class='aio-popup-alert-footer'>
|
|
10
|
-
<button class='aio-popup-alert-close ${
|
|
10
|
+
<button class='aio-popup-alert-close ${c.id}'>${l}</button>
|
|
11
11
|
</div>
|
|
12
12
|
<div class='aio-popup-time'></div>
|
|
13
13
|
</div>
|
|
14
14
|
</div>
|
|
15
|
-
`,close(){
|
|
15
|
+
`,close(){c.toggleClass(!1),setTimeout(()=>{"function"==typeof s&&s(),!1!==s&&_("."+c.id).remove()},200)},getIcon:()=>!1===e?"":e||({error:'<svg viewBox="0 0 24 24" role="presentation" style="width: 4.5rem; height: 4.5rem;"><path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"></path></svg>',warning:'<svg viewBox="0 0 24 24" role="presentation" style="width: 4.5rem; height: 4.5rem;"><path d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16"></path></svg>',info:'<svg viewBox="0 0 24 24" role="presentation" style="width: 4.5rem; height: 4.5rem;"><path d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z"></path></svg>',success:'<svg viewBox="0 0 24 24" role="presentation" style="width: 4.5rem; height: 4.5rem;"><path d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z"></path></svg>'})[o]||"",startTimer(){setTimeout(()=>{if(c.time>=100){c.time=100,c.close();return}c.time+=2,c.updateBarRender(),c.startTimer()},a/50*1e3)},toggleClass(t){let e=_(`.${c.id}`);t?setTimeout(()=>e.removeClass("not-mounted"),0):e.addClass("not-mounted")},render(){_("body").append(c.getRender()),_("button."+c.id).off("click",c.close),_("button."+c.id).on("click",c.close),c.toggleClass(!0)}};c.id=c.getId(),c.render(),a&&c.startTimer()}class Snackebar extends e{constructor(t){super(t),this.state={items:[]},t.getActions({add:this.add.bind(this)})}add(t){let{items:e}=this.state,o=[...e,{...t,id:"a"+Math.round(1e9*Math.random())}];this.setState({items:o})}remove(t,e){if(!1===e)return;let{items:o}=this.state,i=o.filter((e,o)=>e.id!==t);this.setState({items:i}),"function"==typeof e&&e()}render(){let{items:t}=this.state,{rtl:e}=this.props;return h($,{children:t.map((t,o)=>g(SnackebarItem,{rtl:e,item:t,index:o,onRemove:e=>this.remove(e,t.onClose),key:t.id}))})}}function SnackebarItem(t){var e;let{item:o,onRemove:a,index:n,rtl:l}=t,{time:d=8,id:s,text:p,type:c,subtext:u,action:m,onClose:$,verticalAlign:g="end",horizontalAlign:v="center",icon:b,attrs:y={}}=o;"start"!==g&&"end"!==g&&(g="end",console.error('aio-popup error => snackebar item .verticalAlign should be "start" or "end"')),"start"!==v&&"end"!==v&&"center"!==v&&(v="center",console.error('aio-popup error => snackebar item .horizontalAlign should be "start" or "end" or "center"'));let[k,C]=r(!1);function M(){C(!1),setTimeout(()=>{a(s)},200)}i(()=>{setTimeout(()=>C(!0),0),setTimeout(()=>M(),1e3*d)},[]);let w,L,x,P;return w="aio-popup-snackebar-item-container",w+=` aio-popup-snackebar-item-container-horizontal-align-${v}`,k&&(w+=" mounted"),l&&(w+=" rtl"),L=function t(e){let o=_(".aio-popup-snackebar-item-container"),i={start:12,end:12};for(let r=0;r<e;r++){let a=o.eq(r),n=a.height()+6,l=a.attr("data-vertical-align");i[l]+=n}return{["start"===g?"top":"bottom"]:i[g]}}(n),x={"data-vertical-align":g,className:w,style:L,onClick:!1===$?void 0:()=>M()},h("div",{...x,children:(P="aio-popup-snackebar-item",P+=` aio-popup-snackebar-item-${c}`,y.className&&(P+=` ${y.className}`),f("div",{...{...y,className:P,style:y.style},children:[h("div",{className:"aio-popup-snackebar-item-icon",children:b||("error"===(e=c)||"warning"===e||"info"===e?h("svg",{viewBox:"0 0 24 24",role:"presentation",style:{width:"1.2rem",height:"1.2rem"},children:h("path",{d:"M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z",style:{fill:"currentcolor"}})}):h("svg",{viewBox:"0 0 24 24",role:"presentation",style:{width:"1.2rem",height:"1.2rem"},children:h("path",{d:"M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z",style:{fill:"currentcolor"}})}))})," ",f("div",{className:"aio-popup-snackebar-item-text",children:[h("div",{className:"aio-popup-snackebar-item-uptext",children:p}),!!u&&h("div",{className:"aio-popup-snackebar-item-subtext",children:u})]})," ",m&&m.text?h("button",{className:"aio-popup-snackebar-item-action",onClick(t){t.stopPropagation(),m.onClick(),M()},children:m.text}):null," ",h("div",{className:"aio-popup-snackebar-bar",style:{transition:`${d}s linear`}})," "]}))})}function Align(t){let{dom:e,target:o,fitHorizontal:i,fixStyle:r=t=>t,attrs:a={},fitTo:n,pageSelector:l,rtl:d,limitTo:s}=t,p={getDomLimit(t,e){if(n&&"popover"===e){let o=t.parents(n);if(o.length){let{left:i,top:r}=o.offset(),a=o.width(),d=o.height();return{left:i,top:r,right:i+a,bottom:r+d,width:a,height:d}}}let s=t.offset(),p=s.left-window.pageXOffset,c=s.top-window.pageYOffset;if(l&&"page"!==e){let u=_(l);try{let{left:m,top:h}=u.offset()||{left:0,top:0};p-=m,c-=h}catch{}}let $=t.outerWidth(),f=t.outerHeight(),g=p+$,v=c+f;return{left:p,top:c,right:g,bottom:v,width:$,height:f}},getPageLimit(){let t=l?_(l):void 0;t=Array.isArray(t)&&0===t.length?void 0:t;let e=window.innerWidth,o=window.innerHeight,i=t?p.getDomLimit(t,"page"):{left:0,top:0,right:e,bottom:o};return i.left<0&&(i.left=0),i.right>e&&(i.right=e),i.top<0&&(i.top=0),i.bottom>o&&(i.bottom=o),i},getRelatedToLmit(){if(!s)return;let t=e.parents(s);if(!t.length)return;let o=t.offset(),i=o.left-window.pageXOffset,r=o.top-window.pageYOffset,a=t.outerWidth(),n=t.outerHeight();return{left:i,top:r,right:i+a,bottom:r+n,width:a,height:n}},align(){let t=p.getPageLimit(),l=p.getDomLimit(o,"target"),s=p.getDomLimit(e,"popover"),c;if(!n){if(s.top=l.bottom,s.bottom=s.top+s.height,i)s.width=l.width,s.left=l.left,s.right=l.left+l.width;else{let u=p.getRelatedToLmit()||t;d?(s.right=l.right,s.left=s.right-s.width,s.left<u.left&&(s.left=u.left)):(s.left=l.left,s.right=s.left+s.width,s.right>u.right&&(s.left=u.right-s.width))}s.bottom>t.bottom?s.height>l.top-t.top?s.top=t.bottom-s.height:s.top=l.top-s.height:s.top=l.bottom,s.height>t.bottom-t.top&&(s.top=6,s.bottom=void 0,s.height=t.bottom-t.top-12,c="auto")}let _;return r({left:s.left,top:s.top,width:s.width,height:n?s.height:void 0,overflowY:c,...a.style},{targetLimit:l,pageLimit:t})}};return p.align()}
|