@gem-sdk/components 3.1.18 → 3.1.19
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/dist/cjs/dialog/common/classes.js +1 -1
- package/dist/cjs/dialog/common/helpers.js +1 -1
- package/dist/cjs/dialog/components/Dialog.js +1 -1
- package/dist/cjs/dialog/components/Dialog.liquid.js +1 -1
- package/dist/cjs/dialog/settings/configs/settings.js +1 -1
- package/dist/esm/dialog/common/classes.js +1 -1
- package/dist/esm/dialog/common/helpers.js +1 -1
- package/dist/esm/dialog/components/Dialog.js +1 -1
- package/dist/esm/dialog/components/Dialog.liquid.js +1 -1
- package/dist/esm/dialog/settings/configs/settings.js +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var helpers=require("../../helpers.js");function composeClasses(e){return e.split(" ").reduce((e,s)=>(e[s]=!0,e),{})}const getContainClasses=e=>{let
|
|
1
|
+
"use strict";var helpers=require("../../helpers.js"),helpers$1=require("./helpers.js");function composeClasses(e){return e.split(" ").reduce((e,s)=>(e[s]=!0,e),{})}const getContainClasses=(e,s,t)=>{let o="gp-dialog gp-bg-transparent gp-z-[999999]";return"0%"!=helpers$1.getOverlayOpacity(s)&&t&&"transparent"!=t||(o+=" backdrop:!gp-bg-transparent"),e&&(o+=` ${e}`),{...composeClasses(o)}},getBackdropClasses=e=>{let s="gp-fixed gp-inset-0 gp-z-50 gp-flex gp-overflow-y-auto gp-overflow-x-hidden gp-shadow-xl";return"center"===e&&(s+=" gp-items-center gp-justify-center"),"top"===e&&(s+=" gp-justify-center gp-items-start"),"top-right"===e&&(s+=" gp-justify-end gp-items-start"),"top-left"===e&&(s+=" gp-justify-start gp-items-start"),"bottom"===e&&(s+=" gp-items-end gp-justify-center"),"left"===e&&(s+=" gp-items-center gp-justify-start"),"right"===e&&(s+=" gp-items-center gp-justify-end"),"bottom-left"===e&&(s+=" gp-items-end gp-justify-start"),"bottom-right"===e&&(s+=" gp-items-end gp-justify-end"),{...composeClasses(s)}},getOverlayClasses=()=>({...composeClasses("gp-fixed gp-inset-0 gp-block gp-transition-all gp-duration-100")}),getDialogContentClasses=({setting:e,enableEffect:s,isILP:t})=>{let{effectType:o,background:n,closeButtonPosition:a}=e??{},g="gp-relative gp-max-h-full gp-max-w-full";return"fade"===o&&s&&(g+=" gp-animate-[fadeIn_0.4s_ease-in]"),"zoom"===o&&s&&(g+=" gp-animate-[zoomIn_0.3s_ease-in]"),"zoom-out"===o&&s&&(g+=" gp-animate-[zoomOut_0.3s_ease-in]"),"horizontal"===o&&s&&(g+=" gp-animate-[slideInLeft_0.3s_ease-in]"),"vertical"===o&&s&&(g+=" gp-animate-[slideInUp_0.3s_ease-in]"),"unfold"===o&&s&&(g+=" gp-animate-[unfold_0.3s_ease-in-out]"),"outside"!==a&&(g+=" gp-overflow-hidden"),helpers.isTransparentColor(n?.desktop?.color)||(g+=" gp-shadow-xl"),!s&&t&&(g+=" gp-animate-[fadeOut_0.2s_ease-out]"),{...composeClasses(g)}},getHeadContentClasses=()=>({...composeClasses("gp-inline-block gp-h-screen gp-align-middle")}),getButtonContentClasses=e=>{let s="gp-absolute gp-top-0 gp-right-0 gp-inline-flex gp-items-center gp-justify-center gp-outline-none focus-visible:gp-shadow-none focus-visible:gp-outline-none gp-overflow-hidden gp-z-1";return"outside"===e&&(s+=" gp-translate-x-1/2 -gp-translate-y-1/2 gp-shadow-md gp-z-[999999]"),{...composeClasses(s)}},getSvgContentClasses=()=>({...composeClasses("[&>svg]:!gp-w-auto [&>svg]:!gp-h-[var(--height-icon)]")}),getBodyContentClasses=()=>({...composeClasses("gp-h-full gp-w-full gp-overflow-y-auto gp-overflow-x-hidden !gp-max-h-screen")});exports.getBackdropClasses=getBackdropClasses,exports.getBodyContentClasses=getBodyContentClasses,exports.getButtonContentClasses=getButtonContentClasses,exports.getContainClasses=getContainClasses,exports.getDialogContentClasses=getDialogContentClasses,exports.getHeadContentClasses=getHeadContentClasses,exports.getOverlayClasses=getOverlayClasses,exports.getSvgContentClasses=getSvgContentClasses;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var core=require("@gem-sdk/core");const getDisplayStyle=e=>Object.keys(e??{}).filter(e=>["--d","--d-mobile","--d-tablet"].includes(e)).reduce((t,r)=>({...t,[r]:e?.[r]}),{}),pointerEventStyle=e=>Object.keys(e??{}).filter(e=>["--d","--d-mobile","--d-tablet"].includes(e)).reduce((t,r)=>({...t,[r.replace("--d","--pe")]:e?.[r]==="none"?"none":"auto"}),{}),getBorderStyle=e=>Object.keys(e??{}).filter(e=>["--bw","--bw-mobile","--bw-tablet","--bc","--bc-tablet","--bc-mobile","--b","--b-tablet","--b-mobile","--bs","--bs-tablet","--bs-mobile","--radius","--radius-tablet","--radius-mobile","--bblr","--bbrr","--btlr","--btrr","--bblr-tablet","--bbrr-tablet","--btlr-tablet","--btrr-tablet","--bblr-mobile","--bbrr-mobile","--btlr-mobile","--btrr-mobile"].includes(e)).reduce((t,r)=>({...t,[r]:e?.[r]}),{}),getWrapperDialogStyle=e=>Object.keys(e??{}).filter(e=>e.startsWith("--mt")||e.startsWith("--mb")||e.startsWith("--ml")||e.startsWith("--mr")).reduce((t,r)=>({...t,[r]:e?.[r]}),{}),getInnerStyle=e=>Object.keys(e??{}).filter(t=>!Object.keys(getWrapperDialogStyle(e)).includes(t)&&!Object.keys(getDisplayStyle(e)).includes(t)&&!Object.keys(getBorderStyle(e)).includes(t)).reduce((t,r)=>({...t,[r]:e?.[r]}),{}),createDialogKey=(e="",t="")=>({id:`dialog:${e}:${t}`,time:`dialog:${e}:${t}:time`}),isShowModal=(e,t=0)=>{let r=e?new Date(Number(e)):new Date,l=Date.now()-r.getTime(),i=Math.abs(l/24/60/60/1e3);return i>=t},isMobile=e=>!!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(e),getPropertyByDevice=(e,t)=>"tablet"===t?e?.tablet??e?.desktop:"mobile"===t?e?.mobile??e?.tablet??e?.desktop:e?.desktop,heightStyle=(e,t)=>({...e?.desktop?core.makeStyle({h:"100%"}):t?.desktop?core.makeStyle({h:t.desktop}):core.makeStyle({minh:"300px"}),"--h-tablet":getPropertyByDevice(e,"tablet")?"100%":getPropertyByDevice(t,"tablet")??"300px","--h-mobile":getPropertyByDevice(e,"mobile")?"100%":getPropertyByDevice(t,"mobile")??"300px","--maxh":getPropertyByDevice(e,"desktop")?"100%":"","--maxh-tablet":getPropertyByDevice(e,"tablet")?"100%":"","--maxh-mobile":getPropertyByDevice(e,"mobile")?"100%":""}),removeHeightPercentForContent=e=>({...e,"--h":e["--h"]?.includes("%")?"100%":e["--h"],"--h-tablet":e["--h-tablet"]?.includes("%")?"100%":e["--h-tablet"],"--h-mobile":e["--h-mobile"]?.includes("%")?"100%":e["--h-mobile"]}),parseNumber=e=>{let t=parseFloat(e?.toString()??"0");return isNaN(t)?0:t};exports.createDialogKey=createDialogKey,exports.getBorderStyle=getBorderStyle,exports.getDisplayStyle=getDisplayStyle,exports.getInnerStyle=getInnerStyle,exports.getPropertyByDevice=getPropertyByDevice,exports.getWrapperDialogStyle=getWrapperDialogStyle,exports.heightStyle=heightStyle,exports.isMobile=isMobile,exports.isShowModal=isShowModal,exports.parseNumber=parseNumber,exports.pointerEventStyle=pointerEventStyle,exports.removeHeightPercentForContent=removeHeightPercentForContent;
|
|
1
|
+
"use strict";var core=require("@gem-sdk/core");const getDisplayStyle=e=>Object.keys(e??{}).filter(e=>["--d","--d-mobile","--d-tablet"].includes(e)).reduce((t,r)=>({...t,[r]:e?.[r]}),{}),pointerEventStyle=e=>Object.keys(e??{}).filter(e=>["--d","--d-mobile","--d-tablet"].includes(e)).reduce((t,r)=>({...t,[r.replace("--d","--pe")]:e?.[r]==="none"?"none":"auto"}),{}),getBorderStyle=e=>Object.keys(e??{}).filter(e=>["--bw","--bw-mobile","--bw-tablet","--bc","--bc-tablet","--bc-mobile","--b","--b-tablet","--b-mobile","--bs","--bs-tablet","--bs-mobile","--radius","--radius-tablet","--radius-mobile","--bblr","--bbrr","--btlr","--btrr","--bblr-tablet","--bbrr-tablet","--btlr-tablet","--btrr-tablet","--bblr-mobile","--bbrr-mobile","--btlr-mobile","--btrr-mobile"].includes(e)).reduce((t,r)=>({...t,[r]:e?.[r]}),{}),getWrapperDialogStyle=e=>Object.keys(e??{}).filter(e=>e.startsWith("--mt")||e.startsWith("--mb")||e.startsWith("--ml")||e.startsWith("--mr")).reduce((t,r)=>({...t,[r]:e?.[r]}),{}),getInnerStyle=e=>Object.keys(e??{}).filter(t=>!Object.keys(getWrapperDialogStyle(e)).includes(t)&&!Object.keys(getDisplayStyle(e)).includes(t)&&!Object.keys(getBorderStyle(e)).includes(t)).reduce((t,r)=>({...t,[r]:e?.[r]}),{}),createDialogKey=(e="",t="")=>({id:`dialog:${e}:${t}`,time:`dialog:${e}:${t}:time`}),isShowModal=(e,t=0)=>{let r=e?new Date(Number(e)):new Date,l=Date.now()-r.getTime(),i=Math.abs(l/24/60/60/1e3);return i>=t},isMobile=e=>!!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(e),getPropertyByDevice=(e,t)=>"tablet"===t?e?.tablet??e?.desktop:"mobile"===t?e?.mobile??e?.tablet??e?.desktop:e?.desktop,heightStyle=(e,t)=>({...e?.desktop?core.makeStyle({h:"100%"}):t?.desktop?core.makeStyle({h:t.desktop}):core.makeStyle({minh:"300px"}),"--h-tablet":getPropertyByDevice(e,"tablet")?"100%":getPropertyByDevice(t,"tablet")??"300px","--h-mobile":getPropertyByDevice(e,"mobile")?"100%":getPropertyByDevice(t,"mobile")??"300px","--maxh":getPropertyByDevice(e,"desktop")?"100%":"","--maxh-tablet":getPropertyByDevice(e,"tablet")?"100%":"","--maxh-mobile":getPropertyByDevice(e,"mobile")?"100%":""}),removeHeightPercentForContent=e=>({...e,"--h":e["--h"]?.includes("%")?"100%":e["--h"],"--h-tablet":e["--h-tablet"]?.includes("%")?"100%":e["--h-tablet"],"--h-mobile":e["--h-mobile"]?.includes("%")?"100%":e["--h-mobile"]}),parseNumber=e=>{let t=parseFloat(e?.toString()??"0");return isNaN(t)?0:t},getOverlayOpacity=e=>"number"!=typeof e||isNaN(e)?"string"==typeof e?parseFloat(e)+"%":"0%":e+"%";exports.createDialogKey=createDialogKey,exports.getBorderStyle=getBorderStyle,exports.getDisplayStyle=getDisplayStyle,exports.getInnerStyle=getInnerStyle,exports.getOverlayOpacity=getOverlayOpacity,exports.getPropertyByDevice=getPropertyByDevice,exports.getWrapperDialogStyle=getWrapperDialogStyle,exports.heightStyle=heightStyle,exports.isMobile=isMobile,exports.isShowModal=isShowModal,exports.parseNumber=parseNumber,exports.pointerEventStyle=pointerEventStyle,exports.removeHeightPercentForContent=removeHeightPercentForContent;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),ChildrenDroppable=require("../../grid/components/ChildrenDroppable.js"),system=require("@gem-sdk/system"),attrs=require("../common/attrs.js"),styles=require("../common/styles.js"),classes=require("../common/classes.js"),ButtonIcon=require("../../button/components/ButtonIcon.js"),useDialog=require("../hooks/useDialog.js");const Dialog=e=>{let{setting:s,children:t,builderProps:l,style:a,advanced:r,builderAttrs:o}=e,n=r?.d,{name:i,fullScreen:c,width:y,height:m,position:d,overlayColor:u,overlayOpacity:g,iconSize:C,closeButtonPosition:j,iconSvg:x}=s??{},p=core.useEditorMode(),{ref:S,overlay:v,handleClickOverlay:b,closeModal:h,open:D,dialogId:f}=useDialog.useDialog(s,l,"edit"===p),B="edit"!==p,R=system.createAttr({...attrs.getAttr({uid:l?.uid||""})}),q=system.createStyle({...styles.getWrapperStyle(n)}),k=system.createClass({...classes.getContainClasses(r?.cssClass)}),A=system.createAttr({...attrs.getAttrContainer({uid:f||""})}),N=system.createStyle({...styles.getContainStyle()}),I=system.createClass({...classes.getBackdropClasses(d)}),L=system.createStyle({...styles.getBackdropStyle(a)}),O=system.createAttr({...attrs.getAttrOverlay()}),w=system.createClass({...classes.getOverlayClasses()}),E=system.createStyle({...styles.getOverlayStyle(g,u,a)}),M=system.createStyle({...styles.getDialogContentStyle({style:a,width:y,height:m,fullScreen:c})}),P=system.createClass({...classes.getDialogContentClasses({setting:s,enableEffect:D,isILP:B})}),T=system.createAttr({...attrs.getAttrClose()}),_=system.createClass({...classes.getHeadContentClasses()}),z=system.createStyle({...styles.getButtonContentStyle(s)}),H=system.createClass({...classes.getButtonContentClasses(j)}),W=system.createStyle({...styles.getSvgContentStyle(C)}),F=system.createClass({...classes.getSvgContentClasses()}),G=system.createStyle({...styles.getBodyContentStyle(s,a)}),J=system.createClass({...classes.getBodyContentClasses()});return jsxRuntime.jsx("div",{...R,style:q,children:(D||"edit"!==p)&&jsxRuntime.jsx("dialog",{ref:S,open:D,"aria-label":i,...A,className:k,style:N,children:jsxRuntime.jsxs("div",{"aria-label":"Backdrop",className:I,style:L,children:[system.If(!!u,jsxRuntime.jsx("div",{ref:v,...O,className:w,style:E,onClick:b,"aria-hidden":!0})),jsxRuntime.jsx("span",{className:_}),jsxRuntime.jsxs("div",{role:"dialog","aria-label":"Dialog content",...o,className:P,style:M,children:[jsxRuntime.jsx("button",{...T,type:"button",tabIndex:-1,className:H,style:z,onClick:h,children:jsxRuntime.jsx(ButtonIcon.default,{iconSvg:x??`<svg viewBox="0 0 12 12" fill="currentColor" style={svgContentStyle}>
|
|
2
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),ChildrenDroppable=require("../../grid/components/ChildrenDroppable.js"),system=require("@gem-sdk/system"),attrs=require("../common/attrs.js"),styles=require("../common/styles.js"),classes=require("../common/classes.js"),ButtonIcon=require("../../button/components/ButtonIcon.js"),useDialog=require("../hooks/useDialog.js");const Dialog=e=>{let{setting:s,children:t,builderProps:l,style:a,advanced:r,builderAttrs:o}=e,n=r?.d,{name:i,fullScreen:c,width:y,height:m,position:d,overlayColor:u,overlayOpacity:g,iconSize:C,closeButtonPosition:j,iconSvg:x}=s??{},p=core.useEditorMode(),{ref:S,overlay:v,handleClickOverlay:b,closeModal:h,open:D,dialogId:f}=useDialog.useDialog(s,l,"edit"===p),B="edit"!==p,R=system.createAttr({...attrs.getAttr({uid:l?.uid||""})}),q=system.createStyle({...styles.getWrapperStyle(n)}),k=system.createClass({...classes.getContainClasses(r?.cssClass,g,u)}),A=system.createAttr({...attrs.getAttrContainer({uid:f||""})}),N=system.createStyle({...styles.getContainStyle()}),I=system.createClass({...classes.getBackdropClasses(d)}),L=system.createStyle({...styles.getBackdropStyle(a)}),O=system.createAttr({...attrs.getAttrOverlay()}),w=system.createClass({...classes.getOverlayClasses()}),E=system.createStyle({...styles.getOverlayStyle(g,u,a)}),M=system.createStyle({...styles.getDialogContentStyle({style:a,width:y,height:m,fullScreen:c})}),P=system.createClass({...classes.getDialogContentClasses({setting:s,enableEffect:D,isILP:B})}),T=system.createAttr({...attrs.getAttrClose()}),_=system.createClass({...classes.getHeadContentClasses()}),z=system.createStyle({...styles.getButtonContentStyle(s)}),H=system.createClass({...classes.getButtonContentClasses(j)}),W=system.createStyle({...styles.getSvgContentStyle(C)}),F=system.createClass({...classes.getSvgContentClasses()}),G=system.createStyle({...styles.getBodyContentStyle(s,a)}),J=system.createClass({...classes.getBodyContentClasses()});return jsxRuntime.jsx("div",{...R,style:q,children:(D||"edit"!==p)&&jsxRuntime.jsx("dialog",{ref:S,open:D,"aria-label":i,...A,className:k,style:N,children:jsxRuntime.jsxs("div",{"aria-label":"Backdrop",className:I,style:L,children:[system.If(!!u,jsxRuntime.jsx("div",{ref:v,...O,className:w,style:E,onClick:b,"aria-hidden":!0})),jsxRuntime.jsx("span",{className:_}),jsxRuntime.jsxs("div",{role:"dialog","aria-label":"Dialog content",...o,className:P,style:M,children:[jsxRuntime.jsx("button",{...T,type:"button",tabIndex:-1,className:H,style:z,onClick:h,children:jsxRuntime.jsx(ButtonIcon.default,{iconSvg:x??`<svg viewBox="0 0 12 12" fill="currentColor" style={svgContentStyle}>
|
|
3
3
|
<path d="M7.1,6l4.5,4.5l-1.1,1.1L6,7.1l-4.5,4.5l-1.1-1.1L4.9,6L0.5,1.5l1.1-1.1L6,4.9l4.5-4.5l1.1,1.1L7.1,6z"></path>
|
|
4
4
|
</svg>`,styles:W,classes:F})}),jsxRuntime.jsx("div",{"aria-label":"Dialog body",style:G,className:J,children:core.isEmptyChildren(t)?jsxRuntime.jsx(ChildrenDroppable.default,{}):core.filterToolbarPreview(t)}),core.filterToolbarPreview(t,!0)]})]})})})};exports.default=Dialog;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),system=require("@gem-sdk/system"),attrs=require("../common/attrs.js"),styles=require("../common/styles.js"),classes=require("../common/classes.js"),helpers=require("../../helpers.js");const Dialog=e=>{let{setting:s,children:t,builderProps:a,style:l,advanced:r,builderAttrs:y}=e,c=r?.d,{frequency:o=3,triggerPercentage:i=0,trigger:n,triggerTime:g,frequencyMode:d="once",mobileTrigger:m,mobileTriggerTime:C,closeOnClickOutside:p}=s??{},{name:$,fullScreen:S,width:v,height:u,position:f,overlayColor:b,overlayOpacity:A,iconSize:B,closeButtonPosition:L,iconSvg:h}=s??{},j=s?.dialogId??a?.uid,D=system.createStateOrContext({dialogId:j,trigger:n,triggerTime:g,frequency:o,triggerPercentage:i,mobileTrigger:m,mobileTriggerTime:C,closeOnClickOutside:p,frequencyMode:d,display:c}),O=system.createAttr({...attrs.getAttr({uid:a?.uid||""})}),q=system.createStyle({...styles.getWrapperStyle(c)}),E=system.createClass({...classes.getContainClasses(r?.cssClass)}),k=system.createAttr({...attrs.getAttrContainer({uid:j||""})}),x=system.createStyle({...styles.getContainStyle()}),I=system.createClass({...classes.getBackdropClasses(f)}),P=system.createStyle({...styles.getBackdropStyle(l)}),_=system.createAttr({...attrs.getAttrOverlay()}),M=system.createClass({...classes.getOverlayClasses()}),R=system.createStyle({...styles.getOverlayStyle(A,b,l)}),z=system.createStyle({...styles.getDialogContentStyle({style:l,width:v,height:u,fullScreen:S})}),G=system.createClass({...classes.getDialogContentClasses({setting:s,enableEffect:!0,isILP:!1})}),N=system.createAttr({...attrs.getAttrClose()}),w=system.createClass({...classes.getHeadContentClasses()}),H=system.createStyle({...styles.getButtonContentStyle(s)}),J=system.createClass({...classes.getButtonContentClasses(L)}),T=system.createStyle({...styles.getSvgContentStyle(B)}),U=system.createClass({...classes.getSvgContentClasses()}),V=system.createStyle({...styles.getBodyContentStyle(s,l)}),W=system.createClass({...classes.getBodyContentClasses()}),F=()=>core.RenderIf(core.isLocalEnv,'<script src="{{ \'gp-dialog-v7-5.js\' | asset_url }}" defer="defer"></script>',`<script src="${core.baseAssetURL}/assets-v2/gp-dialog-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`);return core.template`
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),system=require("@gem-sdk/system"),attrs=require("../common/attrs.js"),styles=require("../common/styles.js"),classes=require("../common/classes.js"),helpers=require("../../helpers.js");const Dialog=e=>{let{setting:s,children:t,builderProps:a,style:l,advanced:r,builderAttrs:y}=e,c=r?.d,{frequency:o=3,triggerPercentage:i=0,trigger:n,triggerTime:g,frequencyMode:d="once",mobileTrigger:m,mobileTriggerTime:C,closeOnClickOutside:p}=s??{},{name:$,fullScreen:S,width:v,height:u,position:f,overlayColor:b,overlayOpacity:A,iconSize:B,closeButtonPosition:L,iconSvg:h}=s??{},j=s?.dialogId??a?.uid,D=system.createStateOrContext({dialogId:j,trigger:n,triggerTime:g,frequency:o,triggerPercentage:i,mobileTrigger:m,mobileTriggerTime:C,closeOnClickOutside:p,frequencyMode:d,display:c}),O=system.createAttr({...attrs.getAttr({uid:a?.uid||""})}),q=system.createStyle({...styles.getWrapperStyle(c)}),E=system.createClass({...classes.getContainClasses(r?.cssClass,A,b)}),k=system.createAttr({...attrs.getAttrContainer({uid:j||""})}),x=system.createStyle({...styles.getContainStyle()}),I=system.createClass({...classes.getBackdropClasses(f)}),P=system.createStyle({...styles.getBackdropStyle(l)}),_=system.createAttr({...attrs.getAttrOverlay()}),M=system.createClass({...classes.getOverlayClasses()}),R=system.createStyle({...styles.getOverlayStyle(A,b,l)}),z=system.createStyle({...styles.getDialogContentStyle({style:l,width:v,height:u,fullScreen:S})}),G=system.createClass({...classes.getDialogContentClasses({setting:s,enableEffect:!0,isILP:!1})}),N=system.createAttr({...attrs.getAttrClose()}),w=system.createClass({...classes.getHeadContentClasses()}),H=system.createStyle({...styles.getButtonContentStyle(s)}),J=system.createClass({...classes.getButtonContentClasses(L)}),T=system.createStyle({...styles.getSvgContentStyle(B)}),U=system.createClass({...classes.getSvgContentClasses()}),V=system.createStyle({...styles.getBodyContentStyle(s,l)}),W=system.createClass({...classes.getBodyContentClasses()}),F=()=>core.RenderIf(core.isLocalEnv,'<script src="{{ \'gp-dialog-v7-5.js\' | asset_url }}" defer="defer"></script>',`<script src="${core.baseAssetURL}/assets-v2/gp-dialog-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`);return core.template`
|
|
2
2
|
<gp-dialog
|
|
3
3
|
${{...O}}
|
|
4
4
|
class="${helpers.getSettingPreloadData("gps-lazy")}"
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";const DialogSettings=[{id:"setting",controls:[{id:"closeButtonPosition",type:"segment",options:[{label:"Inside",value:"inside"},{label:"Outside",value:"outside"}],default:"inside"},{id:"position",type:"position:square",default:"center"},{id:"effectType",type:"select",options:[{label:"Fade",value:"fade"},{label:"Zoom",value:"zoom"},{label:"Zoom out",value:"zoom-out"},{label:"Horizontal move",value:"horizontal"},{label:"Vertical move",value:"vertical"},{label:"3D unfold",value:"unfold"},{label:"None",value:"none"}],default:"fade"},{id:"closeOnClickOutside",type:"toggle",default:!0},{id:"name",type:"input",placeholder:"E.g. New popup",clearButton:!1,fallbackValue:"Popup",forceEmit:!0},{id:"width",type:"input:unit",placeholder:"Auto",units:["px","%"],devices:{desktop:{default:"600px"},mobile:{default:"100%"}}},{id:"height",type:"input:unit",placeholder:"Auto",units:["px","%"],devices:{desktop:{default:void 0}}},{id:"fullScreen",type:"toggle",devices:{desktop:{default:!1}}},{id:"isOverlay",type:"toggle",default:!0},{id:"overlayColor",type:"color-picker-v2",default:"#121212",compoDefaultValue:"#121212"},{id:"overlayOpacity",type:"input:slider",min:0,step:1,max:100,default:70,units:["%"],useOnlyUnitInit:!0,showDefaultUnit:!0},{id:"triggerTime",type:"input:slider",min:0,default:0,max:100,units:["s"],useOnlyUnitInit:!0,showDefaultUnit:!0,isNumber:!0},{id:"triggerPercentage",type:"input:slider",units:["%"],min:0,max:100,default:10,useOnlyUnitInit:!0,showDefaultUnit:!0,isNumber:!0},{id:"frequency",type:"input:slider",min:1,max:30,default:3,units:["days"],useOnlyUnitInit:!0,showDefaultUnit:!0,isNumber:!0},{id:"frequencyMode",type:"select",options:[{label:"Once per user",value:"once"},{label:"Each visit time",value:"every"},{label:"After a time",value:"after-period-time"}],default:"once"},{id:"btnSize",type:"input:stepper",default:32},{id:"iconSvg",label:"SVG Icon",type:"icon",default:`<svg height="20" width="20" data-name="x-bold" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" data-id="508817606065848680">
|
|
1
|
+
"use strict";const DialogSettings=[{id:"setting",controls:[{id:"closeButtonPosition",type:"segment",options:[{label:"Inside",value:"inside"},{label:"Outside",value:"outside"}],default:"inside"},{id:"position",type:"position:square",default:"center"},{id:"effectType",type:"select",options:[{label:"Fade",value:"fade"},{label:"Zoom",value:"zoom"},{label:"Zoom out",value:"zoom-out"},{label:"Horizontal move",value:"horizontal"},{label:"Vertical move",value:"vertical"},{label:"3D unfold",value:"unfold"},{label:"None",value:"none"}],default:"fade"},{id:"closeOnClickOutside",type:"toggle",default:!0},{id:"name",type:"input",placeholder:"E.g. New popup",clearButton:!1,fallbackValue:"Popup",forceEmit:!0},{id:"width",type:"input:unit",placeholder:"Auto",units:["px","%"],devices:{desktop:{default:"600px"},mobile:{default:"100%"}}},{id:"height",type:"input:unit",placeholder:"Auto",units:["px","%"],devices:{desktop:{default:void 0}}},{id:"fullScreen",type:"toggle",devices:{desktop:{default:!1}}},{id:"isOverlay",type:"toggle",default:!0},{id:"overlayColor",type:"color-picker-v2",default:"#121212",compoDefaultValue:"#121212"},{id:"overlayOpacity",type:"input:slider",min:0,step:1,max:100,default:70,units:["%"],useOnlyUnitInit:!0,showDefaultUnit:!0,isNumber:!0},{id:"triggerTime",type:"input:slider",min:0,default:0,max:100,units:["s"],useOnlyUnitInit:!0,showDefaultUnit:!0,isNumber:!0},{id:"triggerPercentage",type:"input:slider",units:["%"],min:0,max:100,default:10,useOnlyUnitInit:!0,showDefaultUnit:!0,isNumber:!0},{id:"frequency",type:"input:slider",min:1,max:30,default:3,units:["days"],useOnlyUnitInit:!0,showDefaultUnit:!0,isNumber:!0},{id:"frequencyMode",type:"select",options:[{label:"Once per user",value:"once"},{label:"Each visit time",value:"every"},{label:"After a time",value:"after-period-time"}],default:"once"},{id:"btnSize",type:"input:stepper",default:32},{id:"iconSvg",label:"SVG Icon",type:"icon",default:`<svg height="20" width="20" data-name="x-bold" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" data-id="508817606065848680">
|
|
2
2
|
<path fill="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M208.49,191.51a12,12,0,0,1-17,17L128,145,64.49,208.49a12,12,0,0,1-17-17L111,128,47.51,64.49a12,12,0,0,1,17-17L128,111l63.51-63.52a12,12,0,0,1,17,17L145,128Z"/>
|
|
3
3
|
</svg>`,compoDefaultValue:`<svg height="20" width="20" data-name="x-bold" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" data-id="508817606065848680">
|
|
4
4
|
<path fill="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M208.49,191.51a12,12,0,0,1-17,17L128,145,64.49,208.49a12,12,0,0,1-17-17L111,128,47.51,64.49a12,12,0,0,1,17-17L128,111l63.51-63.52a12,12,0,0,1,17,17L145,128Z"/>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{isTransparentColor as e}from"../../helpers.js";function composeClasses(e){return e.split(" ").reduce((e,
|
|
1
|
+
import{isTransparentColor as e}from"../../helpers.js";import{getOverlayOpacity as t}from"./helpers.js";function composeClasses(e){return e.split(" ").reduce((e,t)=>(e[t]=!0,e),{})}let getContainClasses=(e,s,o)=>{let g="gp-dialog gp-bg-transparent gp-z-[999999]";return"0%"!=t(s)&&o&&"transparent"!=o||(g+=" backdrop:!gp-bg-transparent"),e&&(g+=` ${e}`),{...composeClasses(g)}},getBackdropClasses=e=>{let t="gp-fixed gp-inset-0 gp-z-50 gp-flex gp-overflow-y-auto gp-overflow-x-hidden gp-shadow-xl";return"center"===e&&(t+=" gp-items-center gp-justify-center"),"top"===e&&(t+=" gp-justify-center gp-items-start"),"top-right"===e&&(t+=" gp-justify-end gp-items-start"),"top-left"===e&&(t+=" gp-justify-start gp-items-start"),"bottom"===e&&(t+=" gp-items-end gp-justify-center"),"left"===e&&(t+=" gp-items-center gp-justify-start"),"right"===e&&(t+=" gp-items-center gp-justify-end"),"bottom-left"===e&&(t+=" gp-items-end gp-justify-start"),"bottom-right"===e&&(t+=" gp-items-end gp-justify-end"),{...composeClasses(t)}},getOverlayClasses=()=>({...composeClasses("gp-fixed gp-inset-0 gp-block gp-transition-all gp-duration-100")}),getDialogContentClasses=({setting:t,enableEffect:s,isILP:o})=>{let{effectType:g,background:n,closeButtonPosition:p}=t??{},a="gp-relative gp-max-h-full gp-max-w-full";return"fade"===g&&s&&(a+=" gp-animate-[fadeIn_0.4s_ease-in]"),"zoom"===g&&s&&(a+=" gp-animate-[zoomIn_0.3s_ease-in]"),"zoom-out"===g&&s&&(a+=" gp-animate-[zoomOut_0.3s_ease-in]"),"horizontal"===g&&s&&(a+=" gp-animate-[slideInLeft_0.3s_ease-in]"),"vertical"===g&&s&&(a+=" gp-animate-[slideInUp_0.3s_ease-in]"),"unfold"===g&&s&&(a+=" gp-animate-[unfold_0.3s_ease-in-out]"),"outside"!==p&&(a+=" gp-overflow-hidden"),e(n?.desktop?.color)||(a+=" gp-shadow-xl"),!s&&o&&(a+=" gp-animate-[fadeOut_0.2s_ease-out]"),{...composeClasses(a)}},getHeadContentClasses=()=>({...composeClasses("gp-inline-block gp-h-screen gp-align-middle")}),getButtonContentClasses=e=>{let t="gp-absolute gp-top-0 gp-right-0 gp-inline-flex gp-items-center gp-justify-center gp-outline-none focus-visible:gp-shadow-none focus-visible:gp-outline-none gp-overflow-hidden gp-z-1";return"outside"===e&&(t+=" gp-translate-x-1/2 -gp-translate-y-1/2 gp-shadow-md gp-z-[999999]"),{...composeClasses(t)}},getSvgContentClasses=()=>({...composeClasses("[&>svg]:!gp-w-auto [&>svg]:!gp-h-[var(--height-icon)]")}),getBodyContentClasses=()=>({...composeClasses("gp-h-full gp-w-full gp-overflow-y-auto gp-overflow-x-hidden !gp-max-h-screen")});export{getBackdropClasses,getBodyContentClasses,getButtonContentClasses,getContainClasses,getDialogContentClasses,getHeadContentClasses,getOverlayClasses,getSvgContentClasses};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{makeStyle as e}from"@gem-sdk/core";let getDisplayStyle=e=>Object.keys(e??{}).filter(e=>["--d","--d-mobile","--d-tablet"].includes(e)).reduce((t,l)=>({...t,[l]:e?.[l]}),{}),pointerEventStyle=e=>Object.keys(e??{}).filter(e=>["--d","--d-mobile","--d-tablet"].includes(e)).reduce((t,l)=>({...t,[l.replace("--d","--pe")]:e?.[l]==="none"?"none":"auto"}),{}),getBorderStyle=e=>Object.keys(e??{}).filter(e=>["--bw","--bw-mobile","--bw-tablet","--bc","--bc-tablet","--bc-mobile","--b","--b-tablet","--b-mobile","--bs","--bs-tablet","--bs-mobile","--radius","--radius-tablet","--radius-mobile","--bblr","--bbrr","--btlr","--btrr","--bblr-tablet","--bbrr-tablet","--btlr-tablet","--btrr-tablet","--bblr-mobile","--bbrr-mobile","--btlr-mobile","--btrr-mobile"].includes(e)).reduce((t,l)=>({...t,[l]:e?.[l]}),{}),getWrapperDialogStyle=e=>Object.keys(e??{}).filter(e=>e.startsWith("--mt")||e.startsWith("--mb")||e.startsWith("--ml")||e.startsWith("--mr")).reduce((t,l)=>({...t,[l]:e?.[l]}),{}),getInnerStyle=e=>Object.keys(e??{}).filter(t=>!Object.keys(getWrapperDialogStyle(e)).includes(t)&&!Object.keys(getDisplayStyle(e)).includes(t)&&!Object.keys(getBorderStyle(e)).includes(t)).reduce((t,l)=>({...t,[l]:e?.[l]}),{}),createDialogKey=(e="",t="")=>({id:`dialog:${e}:${t}`,time:`dialog:${e}:${t}:time`}),isShowModal=(e,t=0)=>{let l=e?new Date(Number(e)):new Date,r=Date.now()-l.getTime(),
|
|
1
|
+
import{makeStyle as e}from"@gem-sdk/core";let getDisplayStyle=e=>Object.keys(e??{}).filter(e=>["--d","--d-mobile","--d-tablet"].includes(e)).reduce((t,l)=>({...t,[l]:e?.[l]}),{}),pointerEventStyle=e=>Object.keys(e??{}).filter(e=>["--d","--d-mobile","--d-tablet"].includes(e)).reduce((t,l)=>({...t,[l.replace("--d","--pe")]:e?.[l]==="none"?"none":"auto"}),{}),getBorderStyle=e=>Object.keys(e??{}).filter(e=>["--bw","--bw-mobile","--bw-tablet","--bc","--bc-tablet","--bc-mobile","--b","--b-tablet","--b-mobile","--bs","--bs-tablet","--bs-mobile","--radius","--radius-tablet","--radius-mobile","--bblr","--bbrr","--btlr","--btrr","--bblr-tablet","--bbrr-tablet","--btlr-tablet","--btrr-tablet","--bblr-mobile","--bbrr-mobile","--btlr-mobile","--btrr-mobile"].includes(e)).reduce((t,l)=>({...t,[l]:e?.[l]}),{}),getWrapperDialogStyle=e=>Object.keys(e??{}).filter(e=>e.startsWith("--mt")||e.startsWith("--mb")||e.startsWith("--ml")||e.startsWith("--mr")).reduce((t,l)=>({...t,[l]:e?.[l]}),{}),getInnerStyle=e=>Object.keys(e??{}).filter(t=>!Object.keys(getWrapperDialogStyle(e)).includes(t)&&!Object.keys(getDisplayStyle(e)).includes(t)&&!Object.keys(getBorderStyle(e)).includes(t)).reduce((t,l)=>({...t,[l]:e?.[l]}),{}),createDialogKey=(e="",t="")=>({id:`dialog:${e}:${t}`,time:`dialog:${e}:${t}:time`}),isShowModal=(e,t=0)=>{let l=e?new Date(Number(e)):new Date,r=Date.now()-l.getTime(),i=Math.abs(r/24/60/60/1e3);return i>=t},isMobile=e=>!!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(e),getPropertyByDevice=(e,t)=>"tablet"===t?e?.tablet??e?.desktop:"mobile"===t?e?.mobile??e?.tablet??e?.desktop:e?.desktop,heightStyle=(t,l)=>({...t?.desktop?e({h:"100%"}):l?.desktop?e({h:l.desktop}):e({minh:"300px"}),"--h-tablet":getPropertyByDevice(t,"tablet")?"100%":getPropertyByDevice(l,"tablet")??"300px","--h-mobile":getPropertyByDevice(t,"mobile")?"100%":getPropertyByDevice(l,"mobile")??"300px","--maxh":getPropertyByDevice(t,"desktop")?"100%":"","--maxh-tablet":getPropertyByDevice(t,"tablet")?"100%":"","--maxh-mobile":getPropertyByDevice(t,"mobile")?"100%":""}),removeHeightPercentForContent=e=>({...e,"--h":e["--h"]?.includes("%")?"100%":e["--h"],"--h-tablet":e["--h-tablet"]?.includes("%")?"100%":e["--h-tablet"],"--h-mobile":e["--h-mobile"]?.includes("%")?"100%":e["--h-mobile"]}),parseNumber=e=>{let t=parseFloat(e?.toString()??"0");return isNaN(t)?0:t},getOverlayOpacity=e=>"number"!=typeof e||isNaN(e)?"string"==typeof e?parseFloat(e)+"%":"0%":e+"%";export{createDialogKey,getBorderStyle,getDisplayStyle,getInnerStyle,getOverlayOpacity,getPropertyByDevice,getWrapperDialogStyle,heightStyle,isMobile,isShowModal,parseNumber,pointerEventStyle,removeHeightPercentForContent};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import{jsx as e,jsxs as l}from"react/jsx-runtime";import{useEditorMode as o,isEmptyChildren as s,filterToolbarPreview as t}from"@gem-sdk/core";import a from"../../grid/components/ChildrenDroppable.js";import{createAttr as i,createStyle as r,createClass as m,If as n}from"@gem-sdk/system";import{getAttr as c,getAttrContainer as d,getAttrOverlay as p,getAttrClose as f}from"../common/attrs.js";import{getWrapperStyle as g,getContainStyle as y,getBackdropStyle as u,getOverlayStyle as b,getDialogContentStyle as h,getButtonContentStyle as v,getSvgContentStyle as j,getBodyContentStyle as N}from"../common/styles.js";import{getContainClasses as k,getBackdropClasses as C,getOverlayClasses as D,getDialogContentClasses as L,getHeadContentClasses as x,getButtonContentClasses as B,getSvgContentClasses as I,getBodyContentClasses as S}from"../common/classes.js";import w from"../../button/components/ButtonIcon.js";import{useDialog as z}from"../hooks/useDialog.js";let Dialog=E=>{let{setting:M,children:q,builderProps:A,style:F,advanced:G,builderAttrs:H}=E,J=G?.d,{name:K,fullScreen:O,width:P,height:Q,position:R,overlayColor:T,overlayOpacity:U,iconSize:V,closeButtonPosition:W,iconSvg:X}=M??{},Y=o(),{ref:Z,overlay:$,handleClickOverlay:_,closeModal:ee,open:el,dialogId:eo}=z(M,A,"edit"===Y),es="edit"!==Y,et=i({...c({uid:A?.uid||""})}),ea=r({...g(J)}),ei=m({...k(G?.cssClass)}),er=i({...d({uid:eo||""})}),em=r({...y()}),en=m({...C(R)}),ec=r({...u(F)}),ed=i({...p()}),ep=m({...D()}),ef=r({...b(U,T,F)}),eg=r({...h({style:F,width:P,height:Q,fullScreen:O})}),ey=m({...L({setting:M,enableEffect:el,isILP:es})}),eu=i({...f()}),eb=m({...x()}),eh=r({...v(M)}),ev=m({...B(W)}),ej=r({...j(V)}),eN=m({...I()}),ek=r({...N(M,F)}),eC=m({...S()});return e("div",{...et,style:ea,children:(el||"edit"!==Y)&&e("dialog",{ref:Z,open:el,"aria-label":K,...er,className:ei,style:em,children:l("div",{"aria-label":"Backdrop",className:en,style:ec,children:[n(!!T,e("div",{ref:$,...ed,className:ep,style:ef,onClick:_,"aria-hidden":!0})),e("span",{className:eb}),l("div",{role:"dialog","aria-label":"Dialog content",...H,className:ey,style:eg,children:[e("button",{...eu,type:"button",tabIndex:-1,className:ev,style:eh,onClick:ee,children:e(w,{iconSvg:X??`<svg viewBox="0 0 12 12" fill="currentColor" style={svgContentStyle}>
|
|
2
|
+
import{jsx as e,jsxs as l}from"react/jsx-runtime";import{useEditorMode as o,isEmptyChildren as s,filterToolbarPreview as t}from"@gem-sdk/core";import a from"../../grid/components/ChildrenDroppable.js";import{createAttr as i,createStyle as r,createClass as m,If as n}from"@gem-sdk/system";import{getAttr as c,getAttrContainer as d,getAttrOverlay as p,getAttrClose as f}from"../common/attrs.js";import{getWrapperStyle as g,getContainStyle as y,getBackdropStyle as u,getOverlayStyle as b,getDialogContentStyle as h,getButtonContentStyle as v,getSvgContentStyle as j,getBodyContentStyle as N}from"../common/styles.js";import{getContainClasses as k,getBackdropClasses as C,getOverlayClasses as D,getDialogContentClasses as L,getHeadContentClasses as x,getButtonContentClasses as B,getSvgContentClasses as I,getBodyContentClasses as S}from"../common/classes.js";import w from"../../button/components/ButtonIcon.js";import{useDialog as z}from"../hooks/useDialog.js";let Dialog=E=>{let{setting:M,children:q,builderProps:A,style:F,advanced:G,builderAttrs:H}=E,J=G?.d,{name:K,fullScreen:O,width:P,height:Q,position:R,overlayColor:T,overlayOpacity:U,iconSize:V,closeButtonPosition:W,iconSvg:X}=M??{},Y=o(),{ref:Z,overlay:$,handleClickOverlay:_,closeModal:ee,open:el,dialogId:eo}=z(M,A,"edit"===Y),es="edit"!==Y,et=i({...c({uid:A?.uid||""})}),ea=r({...g(J)}),ei=m({...k(G?.cssClass,U,T)}),er=i({...d({uid:eo||""})}),em=r({...y()}),en=m({...C(R)}),ec=r({...u(F)}),ed=i({...p()}),ep=m({...D()}),ef=r({...b(U,T,F)}),eg=r({...h({style:F,width:P,height:Q,fullScreen:O})}),ey=m({...L({setting:M,enableEffect:el,isILP:es})}),eu=i({...f()}),eb=m({...x()}),eh=r({...v(M)}),ev=m({...B(W)}),ej=r({...j(V)}),eN=m({...I()}),ek=r({...N(M,F)}),eC=m({...S()});return e("div",{...et,style:ea,children:(el||"edit"!==Y)&&e("dialog",{ref:Z,open:el,"aria-label":K,...er,className:ei,style:em,children:l("div",{"aria-label":"Backdrop",className:en,style:ec,children:[n(!!T,e("div",{ref:$,...ed,className:ep,style:ef,onClick:_,"aria-hidden":!0})),e("span",{className:eb}),l("div",{role:"dialog","aria-label":"Dialog content",...H,className:ey,style:eg,children:[e("button",{...eu,type:"button",tabIndex:-1,className:ev,style:eh,onClick:ee,children:e(w,{iconSvg:X??`<svg viewBox="0 0 12 12" fill="currentColor" style={svgContentStyle}>
|
|
3
3
|
<path d="M7.1,6l4.5,4.5l-1.1,1.1L6,7.1l-4.5,4.5l-1.1-1.1L4.9,6L0.5,1.5l1.1-1.1L6,4.9l4.5-4.5l1.1,1.1L7.1,6z"></path>
|
|
4
4
|
</svg>`,styles:ej,classes:eN})}),e("div",{"aria-label":"Dialog body",style:ek,className:eC,children:s(q)?e(a,{}):t(q)}),t(q,!0)]})]})})})};export{Dialog as default};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{template as s,RenderIf as l,isLocalEnv as a,baseAssetURL as e}from"@gem-sdk/core";import{createStateOrContext as t,createAttr as i,createStyle as o,createClass as r,If as d}from"@gem-sdk/system";import{getAttr as $,getAttrContainer as p,getAttrOverlay as c,getAttrClose as g}from"../common/attrs.js";import{getWrapperStyle as m,getContainStyle as n,getBackdropStyle as v,getOverlayStyle as f,getDialogContentStyle as y,getButtonContentStyle as u,getSvgContentStyle as b,getBodyContentStyle as S}from"../common/styles.js";import{getContainClasses as j,getBackdropClasses as L,getOverlayClasses as h,getDialogContentClasses as E,getHeadContentClasses as D,getButtonContentClasses as k,getSvgContentClasses as x,getBodyContentClasses as C}from"../common/classes.js";import{getSettingPreloadData as I}from"../../helpers.js";let Dialog=z=>{let{setting:A,children:B,builderProps:G,style:M,advanced:N,builderAttrs:O}=z,P=N?.d,{frequency:_=3,triggerPercentage:w=0,trigger:J,triggerTime:R,frequencyMode:T="once",mobileTrigger:V,mobileTriggerTime:q,closeOnClickOutside:F}=A??{},{name:H,fullScreen:K,width:Q,height:U,position:W,overlayColor:X,overlayOpacity:Y,iconSize:Z,closeButtonPosition:ss,iconSvg:sl}=A??{},sa=A?.dialogId??G?.uid,se=t({dialogId:sa,trigger:J,triggerTime:R,frequency:_,triggerPercentage:w,mobileTrigger:V,mobileTriggerTime:q,closeOnClickOutside:F,frequencyMode:T,display:P}),st=i({...$({uid:G?.uid||""})}),si=o({...m(P)}),so=r({...j(N?.cssClass)}),sr=i({...p({uid:sa||""})}),sd=o({...n()}),s$=r({...L(W)}),sp=o({...v(M)}),sc=i({...c()}),sg=r({...h()}),sm=o({...f(Y,X,M)}),sn=o({...y({style:M,width:Q,height:U,fullScreen:K})}),sv=r({...E({setting:A,enableEffect:!0,isILP:!1})}),sf=i({...g()}),sy=r({...D()}),su=o({...u(A)}),sb=r({...k(ss)}),sS=o({...b(Z)}),sj=r({...x()}),sL=o({...S(A,M)}),sh=r({...C()}),sE=()=>l(a,'<script src="{{ \'gp-dialog-v7-5.js\' | asset_url }}" defer="defer"></script>',`<script src="${e}/assets-v2/gp-dialog-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`);return s`
|
|
1
|
+
import{template as s,RenderIf as l,isLocalEnv as a,baseAssetURL as e}from"@gem-sdk/core";import{createStateOrContext as t,createAttr as i,createStyle as o,createClass as r,If as d}from"@gem-sdk/system";import{getAttr as $,getAttrContainer as p,getAttrOverlay as c,getAttrClose as g}from"../common/attrs.js";import{getWrapperStyle as m,getContainStyle as n,getBackdropStyle as v,getOverlayStyle as f,getDialogContentStyle as y,getButtonContentStyle as u,getSvgContentStyle as b,getBodyContentStyle as S}from"../common/styles.js";import{getContainClasses as j,getBackdropClasses as L,getOverlayClasses as h,getDialogContentClasses as E,getHeadContentClasses as D,getButtonContentClasses as k,getSvgContentClasses as x,getBodyContentClasses as C}from"../common/classes.js";import{getSettingPreloadData as I}from"../../helpers.js";let Dialog=z=>{let{setting:A,children:B,builderProps:G,style:M,advanced:N,builderAttrs:O}=z,P=N?.d,{frequency:_=3,triggerPercentage:w=0,trigger:J,triggerTime:R,frequencyMode:T="once",mobileTrigger:V,mobileTriggerTime:q,closeOnClickOutside:F}=A??{},{name:H,fullScreen:K,width:Q,height:U,position:W,overlayColor:X,overlayOpacity:Y,iconSize:Z,closeButtonPosition:ss,iconSvg:sl}=A??{},sa=A?.dialogId??G?.uid,se=t({dialogId:sa,trigger:J,triggerTime:R,frequency:_,triggerPercentage:w,mobileTrigger:V,mobileTriggerTime:q,closeOnClickOutside:F,frequencyMode:T,display:P}),st=i({...$({uid:G?.uid||""})}),si=o({...m(P)}),so=r({...j(N?.cssClass,Y,X)}),sr=i({...p({uid:sa||""})}),sd=o({...n()}),s$=r({...L(W)}),sp=o({...v(M)}),sc=i({...c()}),sg=r({...h()}),sm=o({...f(Y,X,M)}),sn=o({...y({style:M,width:Q,height:U,fullScreen:K})}),sv=r({...E({setting:A,enableEffect:!0,isILP:!1})}),sf=i({...g()}),sy=r({...D()}),su=o({...u(A)}),sb=r({...k(ss)}),sS=o({...b(Z)}),sj=r({...x()}),sL=o({...S(A,M)}),sh=r({...C()}),sE=()=>l(a,'<script src="{{ \'gp-dialog-v7-5.js\' | asset_url }}" defer="defer"></script>',`<script src="${e}/assets-v2/gp-dialog-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`);return s`
|
|
2
2
|
<gp-dialog
|
|
3
3
|
${{...st}}
|
|
4
4
|
class="${I("gps-lazy")}"
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
let DialogSettings=[{id:"setting",controls:[{id:"closeButtonPosition",type:"segment",options:[{label:"Inside",value:"inside"},{label:"Outside",value:"outside"}],default:"inside"},{id:"position",type:"position:square",default:"center"},{id:"effectType",type:"select",options:[{label:"Fade",value:"fade"},{label:"Zoom",value:"zoom"},{label:"Zoom out",value:"zoom-out"},{label:"Horizontal move",value:"horizontal"},{label:"Vertical move",value:"vertical"},{label:"3D unfold",value:"unfold"},{label:"None",value:"none"}],default:"fade"},{id:"closeOnClickOutside",type:"toggle",default:!0},{id:"name",type:"input",placeholder:"E.g. New popup",clearButton:!1,fallbackValue:"Popup",forceEmit:!0},{id:"width",type:"input:unit",placeholder:"Auto",units:["px","%"],devices:{desktop:{default:"600px"},mobile:{default:"100%"}}},{id:"height",type:"input:unit",placeholder:"Auto",units:["px","%"],devices:{desktop:{default:void 0}}},{id:"fullScreen",type:"toggle",devices:{desktop:{default:!1}}},{id:"isOverlay",type:"toggle",default:!0},{id:"overlayColor",type:"color-picker-v2",default:"#121212",compoDefaultValue:"#121212"},{id:"overlayOpacity",type:"input:slider",min:0,step:1,max:100,default:70,units:["%"],useOnlyUnitInit:!0,showDefaultUnit:!0},{id:"triggerTime",type:"input:slider",min:0,default:0,max:100,units:["s"],useOnlyUnitInit:!0,showDefaultUnit:!0,isNumber:!0},{id:"triggerPercentage",type:"input:slider",units:["%"],min:0,max:100,default:10,useOnlyUnitInit:!0,showDefaultUnit:!0,isNumber:!0},{id:"frequency",type:"input:slider",min:1,max:30,default:3,units:["days"],useOnlyUnitInit:!0,showDefaultUnit:!0,isNumber:!0},{id:"frequencyMode",type:"select",options:[{label:"Once per user",value:"once"},{label:"Each visit time",value:"every"},{label:"After a time",value:"after-period-time"}],default:"once"},{id:"btnSize",type:"input:stepper",default:32},{id:"iconSvg",label:"SVG Icon",type:"icon",default:`<svg height="20" width="20" data-name="x-bold" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" data-id="508817606065848680">
|
|
1
|
+
let DialogSettings=[{id:"setting",controls:[{id:"closeButtonPosition",type:"segment",options:[{label:"Inside",value:"inside"},{label:"Outside",value:"outside"}],default:"inside"},{id:"position",type:"position:square",default:"center"},{id:"effectType",type:"select",options:[{label:"Fade",value:"fade"},{label:"Zoom",value:"zoom"},{label:"Zoom out",value:"zoom-out"},{label:"Horizontal move",value:"horizontal"},{label:"Vertical move",value:"vertical"},{label:"3D unfold",value:"unfold"},{label:"None",value:"none"}],default:"fade"},{id:"closeOnClickOutside",type:"toggle",default:!0},{id:"name",type:"input",placeholder:"E.g. New popup",clearButton:!1,fallbackValue:"Popup",forceEmit:!0},{id:"width",type:"input:unit",placeholder:"Auto",units:["px","%"],devices:{desktop:{default:"600px"},mobile:{default:"100%"}}},{id:"height",type:"input:unit",placeholder:"Auto",units:["px","%"],devices:{desktop:{default:void 0}}},{id:"fullScreen",type:"toggle",devices:{desktop:{default:!1}}},{id:"isOverlay",type:"toggle",default:!0},{id:"overlayColor",type:"color-picker-v2",default:"#121212",compoDefaultValue:"#121212"},{id:"overlayOpacity",type:"input:slider",min:0,step:1,max:100,default:70,units:["%"],useOnlyUnitInit:!0,showDefaultUnit:!0,isNumber:!0},{id:"triggerTime",type:"input:slider",min:0,default:0,max:100,units:["s"],useOnlyUnitInit:!0,showDefaultUnit:!0,isNumber:!0},{id:"triggerPercentage",type:"input:slider",units:["%"],min:0,max:100,default:10,useOnlyUnitInit:!0,showDefaultUnit:!0,isNumber:!0},{id:"frequency",type:"input:slider",min:1,max:30,default:3,units:["days"],useOnlyUnitInit:!0,showDefaultUnit:!0,isNumber:!0},{id:"frequencyMode",type:"select",options:[{label:"Once per user",value:"once"},{label:"Each visit time",value:"every"},{label:"After a time",value:"after-period-time"}],default:"once"},{id:"btnSize",type:"input:stepper",default:32},{id:"iconSvg",label:"SVG Icon",type:"icon",default:`<svg height="20" width="20" data-name="x-bold" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" data-id="508817606065848680">
|
|
2
2
|
<path fill="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M208.49,191.51a12,12,0,0,1-17,17L128,145,64.49,208.49a12,12,0,0,1-17-17L111,128,47.51,64.49a12,12,0,0,1,17-17L128,111l63.51-63.52a12,12,0,0,1,17,17L145,128Z"/>
|
|
3
3
|
</svg>`,compoDefaultValue:`<svg height="20" width="20" data-name="x-bold" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" data-id="508817606065848680">
|
|
4
4
|
<path fill="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M208.49,191.51a12,12,0,0,1-17,17L128,145,64.49,208.49a12,12,0,0,1-17-17L111,128,47.51,64.49a12,12,0,0,1,17-17L128,111l63.51-63.52a12,12,0,0,1,17,17L145,128Z"/>
|