@billgangcom/theme-lib 1.10.1 → 1.10.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.
- package/dist/ui.cjs.js +1 -1
- package/dist/ui.es.js +1 -1
- package/package.json +1 -1
package/dist/ui.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./index-C8nZ3s7u.cjs"),j=require("react"),et="_wrapper_1g82c_2",st="_alignmentBlock_1g82c_8",nt="_title_1g82c_15",ot="_subtitle_1g82c_22",it="_alignmentContent_1g82c_29",ct="_alignments_1g82c_35",lt="_alignment_1g82c_8",rt="_circle_1g82c_54",at="_paddings_1g82c_61",ut="_padding_1g82c_61",xt="_input_1g82c_79",T={wrapper:et,alignmentBlock:st,title:nt,subtitle:ot,alignmentContent:it,alignments:ct,alignment:lt,circle:rt,paddings:at,padding:ut,input:xt},dt=["topLeft","top","topRight","left","center","right","bottomLeft","bottom","bottomRight"],pt=["left","top","right","bottom"],mt=x=>{const{alignment:s,padding:o,setPadding:i,setAlignment:c}=x;function l(){switch(s){case"left":case"topLeft":case"bottomLeft":return"TextAlignLeft";case"right":case"topRight":case"bottomRight":return"TextAlignRight";case"center":case"top":case"bottom":return"TextAlignCenter";default:return"TextAlignCenter"}}function e(n){switch(n){case"left":return"AlignLeft";case"right":return"AlignRight";case"top":return"AlignTop";case"bottom":return"AlignBottom"}}return t.jsxRuntimeExports.jsxs("div",{className:T.layout,children:[t.jsxRuntimeExports.jsx("h3",{className:T.title,children:"Layout"}),t.jsxRuntimeExports.jsxs("div",{className:T.alignmentBlock,children:[t.jsxRuntimeExports.jsx("h5",{className:T.subtitle,children:"Alignment"}),t.jsxRuntimeExports.jsxs("div",{className:T.alignmentContent,children:[t.jsxRuntimeExports.jsx("div",{className:T.alignments,children:dt.map(n=>t.jsxRuntimeExports.jsxs("div",{onClick:()=>{c(n)},className:T.alignment,children:[n!==s&&t.jsxRuntimeExports.jsx("div",{className:T.circle}),n===s&&t.jsxRuntimeExports.jsx(t.Icon,{name:l(),fill:"#FF3F19",width:22,height:22})]},n))}),t.jsxRuntimeExports.jsx("div",{className:T.paddings,children:pt.map(n=>t.jsxRuntimeExports.jsxs("label",{className:T.padding,children:[t.jsxRuntimeExports.jsx("div",{children:t.jsxRuntimeExports.jsx(t.Icon,{name:e(n),width:20,height:20})}),t.jsxRuntimeExports.jsx(t.Input,{type:"text",value:String(o[n]),onChange:a=>i({...o,[n]:Number(a)}),paddingless:!0,borderless:!0})]}))})]})]})]})},_t="_subtitle_2zbxx_1",ht="_header_2zbxx_8",gt="_text_2zbxx_9",jt="_top_2zbxx_16",bt="_itemsBlock_2zbxx_23",H={subtitle:_t,header:ht,text:gt,top:jt,itemsBlock:bt},ft="_typeTexts_3zlec_1",Et="_block_3zlec_7",Rt="_active_3zlec_18",Y={typeTexts:ft,block:Et,active:Rt},vt=["bold","italic","underline","strike-through","code"],J=x=>{const{typesText:s,setTypesText:o}=x;function i(c){switch(c){case"bold":return"TextB";case"italic":return"TextItalic";case"code":return"CodeSimple";case"strike-through":return"TextStrikethrough";case"underline":return"TextUnderline"}}return t.jsxRuntimeExports.jsx("div",{className:Y.typeTexts,children:vt.map(c=>t.jsxRuntimeExports.jsx("div",{className:t.clx(Y.block,{[Y.active]:s.includes(c)}),onClick:()=>{const l=[...s];if(l.includes(c)){const e=l.filter(n=>n!==c);o(e)}else l.push(c),o(l)},children:t.jsxRuntimeExports.jsx(t.Icon,{name:i(c),fill:s.includes(c)?"#252525":"#757575",width:20,height:20})},String(c)))})},K=x=>{const{typesText:s,isActiveText:o,setIsActiveText:i,text:c,setText:l,setTypesText:e,title:n,subtitle:a="Items"}=x;return t.jsxRuntimeExports.jsxs("div",{className:H.text,children:[(n||o!==void 0)&&t.jsxRuntimeExports.jsxs("div",{className:H.top,children:[n&&t.jsxRuntimeExports.jsx("h3",{className:H.title,children:n}),o!==void 0&&i&&t.jsxRuntimeExports.jsx(t.Switch,{current:o,onChange:f=>i(f)})]}),t.jsxRuntimeExports.jsxs("div",{className:H.itemsBlock,children:[t.jsxRuntimeExports.jsx("h5",{className:H.subtitle,children:a}),t.jsxRuntimeExports.jsx(t.Textarea,{onChange:f=>l(f),value:c,maxLength:150}),t.jsxRuntimeExports.jsx(J,{typesText:s,setTypesText:e})]})]})},kt="_subtitle_11qr1_1",yt="_header_11qr1_8",$t="_text_11qr1_9",It="_productsBlock_11qr1_10",wt="_top_11qr1_22",Bt="_itemsBlock_11qr1_29",Ct="_typeTexts_11qr1_35",Nt="_block_11qr1_41",Tt="_active_11qr1_52",Pt="_products_11qr1_10",St="_product_11qr1_10",At="_button_11qr1_70",Ot="_disabled_11qr1_80",Dt="_image_11qr1_84",Lt="_info_11qr1_91",qt="_name_11qr1_102",Mt="_buttons_11qr1_106",Ht="_modal_11qr1_112",zt="_link_11qr1_130",Ft="_modalOptions_11qr1_136",v={subtitle:kt,header:yt,text:$t,productsBlock:It,top:wt,itemsBlock:Bt,typeTexts:Ct,block:Nt,active:Tt,products:Pt,product:St,button:At,disabled:Ot,image:Dt,info:Lt,name:qt,buttons:Mt,modal:Ht,link:zt,modalOptions:Ft},Gt=x=>{const{activeItem:s,setActiveItem:o,popupPosition:i,modalOptions:c,setIsOpenModal:l}=x;return t.jsxRuntimeExports.jsxs("div",{className:v.modal,onClick:e=>{e.stopPropagation()},style:{top:`${i.top}px`,left:`${i.left}px`},children:[t.jsxRuntimeExports.jsxs("div",{className:v.top,children:[t.jsxRuntimeExports.jsx("h3",{children:s.name}),t.jsxRuntimeExports.jsx(t.Icon,{name:"X",height:20,width:20,hoverable:!0,onClick:()=>{o(null),l(!1)}})]}),t.jsxRuntimeExports.jsx("div",{className:v.modalOptions,children:c.map(e=>{if(e.type==="image")return t.jsxRuntimeExports.jsx(t.ChooseImage,{label:"Put up an attractive image",onChange:n=>{const a={...s,[e.field]:n};o(a)}});if(e.type==="text")return t.jsxRuntimeExports.jsx(K,{typesText:s[e.field.type],setTypesText:n=>{const a={...s,[e.field.type]:n};o(a)},text:s[e.field.text]||"",setText:n=>{const a={...s,[e.field.text]:n};o(a)},subtitle:e.label});if(e.type==="input")return t.jsxRuntimeExports.jsx(t.Input,{onChange:n=>{const a={...s,[e.field]:n};o(a)},value:s[e.field]||"",label:e.label,placeholder:e.placeholder});if(e.type==="inputSwitch")return t.jsxRuntimeExports.jsxs("div",{className:v.link,children:[t.jsxRuntimeExports.jsx(t.Input,{onChange:n=>{const a={...s,[e.field.text]:n};o(a)},value:s[e.field.text]||"",label:e.inputLabel,placeholder:e.placeholder}),t.jsxRuntimeExports.jsx(t.Switch,{current:!!s[e.field.switch]||!1,label:e.switchLabel,onChange:n=>{const a={...s,[e.field.switch]:n};o(a)}})]});if(e.type==="list")return t.jsxRuntimeExports.jsx(W,{items:s[e.field]||[],setItems:n=>{const a={...s,[e.field]:n};o(a)},itemsType:"select",draggable:e.draggable||!1,itemsOptions:e.itemsOptions,deletable:e.deletable||!1,editable:!1,subtitle:e.label});if(e.type==="select")return t.jsxRuntimeExports.jsx(t.Select,{options:e.itemsOptions,onChange:n=>{const a={...s,[e.field]:n};o(a)},label:e.label,value:s[e.field]||"String",leftAddon:e.leftAddon&&e.leftAddon==="icon"&&t.jsxRuntimeExports.jsx(t.Icon,{name:s[e.field]})})})})]})},Ut="_other_1wtgi_1",Xt="_subtitle_1wtgi_7",Yt="_items_1wtgi_14",V={other:Ut,subtitle:Xt,items:Yt},Q=x=>{const{items:s,title:o="Other"}=x;return t.jsxRuntimeExports.jsxs("div",{className:V.other,children:[t.jsxRuntimeExports.jsx("h5",{className:V.subtitle,children:o}),t.jsxRuntimeExports.jsx("div",{className:V.items,children:s.map(i=>t.jsxRuntimeExports.jsx(t.Switch,{current:i.isItem,onChange:c=>i.setIsItem(c),label:i.label,hasBackground:!0,paddingless:!1}))})]})},Vt=x=>{const{index:s,moveProduct:o,children:i}=x,[,c]=t.useDrop({accept:"product",hover(n){n.index!==s&&(o(n.index,s),n.index=s)}}),[{isDragging:l},e]=t.useDrag({type:"product",item:{index:s},collect:n=>({isDragging:n.isDragging()})});return t.jsxRuntimeExports.jsx("div",{ref:n=>e(c(n)),className:`${v.product} ${l?v.dragging:""}`,children:i})},W=x=>{const{isActiveItems:s,setIsActiveItems:o,items:i,setItems:c,other:l,title:e,subtitle:n,editable:a=!0,draggable:f=!1,withImage:d=!1,deletable:b=!0,addable:g=!0,itemsType:k,itemsPlaceholder:m="",itemsOptions:p,hasRangeSelector:I=!1,rangeSelectorOptions:F,modalOptions:G,addableOptions:q={},limit:C}=x,[S,A]=j.useState(null),[X,U]=j.useState({top:0,left:0}),[u,_]=j.useState(!1),w=(r,y)=>{const B=[...i],[h]=B.splice(r,1);B.splice(y,0,h),c(B)};j.useEffect(()=>{const r=()=>{A(null),_(!1)};return document.body.addEventListener("click",r),A(null),_(!1),()=>{A(null),_(!1),document.body.removeEventListener("click",r)}},[]),j.useEffect(()=>{if(S){const r=[...i].map(y=>y.id===S.id?S:y);c(r)}},[S]);const E=(r,y)=>{r.stopPropagation(),_(!0);const B=r.target.getBoundingClientRect(),h=500,M=window.innerHeight;let P=B.top+window.scrollY;console.log(h),P+h>M&&(P=M-h-20),U({top:P-80,left:B.left-30}),A(y)};function D(r){if(d)return r?t.jsxRuntimeExports.jsx("img",{src:`https://imagedelivery.net/${r[0]}/w=1000`,alt:"image",width:16,height:16}):t.jsxRuntimeExports.jsx(t.Icon,{name:"Image",width:16,height:16,fill:"#757575"})}const N=(r,y)=>{const B=t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[f&&t.jsxRuntimeExports.jsx("div",{children:t.jsxRuntimeExports.jsx(t.Icon,{name:"DotsSixVertical",hoverable:!0,width:20,height:20})}),k==="select"&&t.jsxRuntimeExports.jsx(t.Select,{onChange:h=>{const P=[...i].map(O=>O.id===r.id?{...r,name:h}:O);A({...r,name:h}),c([...P])},value:r.name,options:p,leftAddon:D(r.images)}),k==="input"&&t.jsxRuntimeExports.jsx(t.Input,{onChange:h=>{const P=[...i].map(O=>O.id===r.id?{...r,name:h}:O);c([...P])},value:r.name,placeholder:m}),k==="image"&&t.jsxRuntimeExports.jsx(t.ChooseImage,{onChange:h=>{const P=[...i].map(O=>O.id===r.id?{...r,image:h[0]}:O);c([...P])}}),t.jsxRuntimeExports.jsxs("div",{className:v.buttons,children:[a&&t.jsxRuntimeExports.jsx(t.Icon,{name:"Sliders",hoverable:!0,width:20,height:20,onClick:h=>E(h,r)}),b&&t.jsxRuntimeExports.jsx(t.Icon,{name:"Trash",hoverable:!0,width:20,height:20,fill:"#C12A2A",onClick:()=>c(i.filter(h=>h.id!==r.id))})]})]});return f?t.jsxRuntimeExports.jsx(Vt,{product:r,index:y,moveProduct:w,children:B},r.id):t.jsxRuntimeExports.jsx("div",{className:v.product,children:B},r.id)};return t.jsxRuntimeExports.jsxs("div",{className:v.productsBlock,children:[(e||s!==void 0)&&t.jsxRuntimeExports.jsxs("div",{className:v.top,children:[e&&t.jsxRuntimeExports.jsx("h3",{className:v.title,children:e}),s!==void 0&&t.jsxRuntimeExports.jsx(t.Switch,{current:s,onChange:r=>o==null?void 0:o(r)})]}),S&&a&&G&&u&&t.jsxRuntimeExports.jsx(Gt,{activeItem:S,setActiveItem:A,popupPosition:X,modalOptions:G,setIsOpenModal:_}),I&&F&&t.jsxRuntimeExports.jsx(tt,{...F}),t.jsxRuntimeExports.jsxs("div",{className:v.products,children:[n&&t.jsxRuntimeExports.jsx("h5",{className:v.subtitle,children:n}),f?t.jsxRuntimeExports.jsx(t.DndProvider,{backend:t.HTML5Backend,children:i.map((r,y)=>N(r,y))}):i.map((r,y)=>N(r,y)),g&&t.jsxRuntimeExports.jsxs(t.Button,{className:t.clx(v.button,{[v.disabled]:!!(C&&C<=i.length)}),size:"s",disabled:!!(C&&C<=i.length),onClick:()=>{const r=[...i];k==="select"?r.push({name:p[0]||`Product ${i.length+1}`,id:t.v4(),...q}):k==="input"?r.push({name:"",id:t.v4(),...q}):r.push({name:`Image ${i.length+1}`,id:t.v4(),...q}),c(r)},children:[t.jsxRuntimeExports.jsx("span",{children:"Add Option"}),t.jsxRuntimeExports.jsx(t.Icon,{name:"Plus",width:16,height:16})]})]}),l!==void 0&&t.jsxRuntimeExports.jsx(Q,{items:l})]})},Jt="_subtitle_41klp_1",Kt="_header_41klp_8",Qt="_text_41klp_9",Wt="_productsBlock_41klp_10",Zt="_buttonsBlock_41klp_11",te="_top_41klp_21",ee="_itemsBlock_41klp_28",se="_typeTexts_41klp_34",ne="_block_41klp_40",oe="_active_41klp_51",ie="_products_41klp_10",ce="_product_41klp_10",le="_button_41klp_11",re="_image_41klp_79",ae="_info_41klp_86",ue="_name_41klp_97",xe="_buttons_41klp_11",de="_modal_41klp_107",pe="_other_41klp_124",me="_options_41klp_130",L={subtitle:Jt,header:Kt,text:Qt,productsBlock:Wt,buttonsBlock:Zt,top:te,itemsBlock:ee,typeTexts:se,block:ne,active:oe,products:ie,product:ce,button:le,image:re,info:ae,name:ue,buttons:xe,modal:de,other:pe,options:me},_e=x=>{const{activeButton:s,setActiveButton:o,popupPosition:i}=x,[c,l]=j.useState(s.typesText),[e,n]=j.useState(s.destination),[a,f]=j.useState(s.link||""),[d,b]=j.useState(s.text||"");return j.useEffect(()=>{o({...s,...{text:d,link:a,destination:e,typesText:c}})},[c,e,a,d]),t.jsxRuntimeExports.jsxs("div",{className:L.modal,onClick:g=>{g.stopPropagation()},style:{top:`${i.top}px`,left:`${i.left}px`},children:[t.jsxRuntimeExports.jsxs("div",{className:L.top,children:[t.jsxRuntimeExports.jsx("h3",{children:s.type}),t.jsxRuntimeExports.jsx(t.Icon,{name:"X",height:20,width:20,hoverable:!0,onClick:()=>o(null)})]}),t.jsxRuntimeExports.jsxs("div",{className:L.options,children:[t.jsxRuntimeExports.jsx(t.Select,{label:"Destination",onChange:g=>n(g),options:["Go to Page","Open Link"],value:e}),e==="Go to Page"?t.jsxRuntimeExports.jsx(t.Select,{label:"Go to",onChange:()=>{},options:[],value:"Homepage"}):t.jsxRuntimeExports.jsx(t.Input,{onChange:g=>f(g),value:a,placeholder:"https://",label:"Link"}),t.jsxRuntimeExports.jsx(t.Switch,{current:!1,label:"Open in new tab"}),t.jsxRuntimeExports.jsx(t.Textarea,{onChange:g=>b(g),value:d,label:"Text",maxLength:150}),t.jsxRuntimeExports.jsx(J,{typesText:c,setTypesText:l})]})]})},he="_subtitle_1y5sw_1",ge="_header_1y5sw_8",je="_text_1y5sw_9",be="_productsBlock_1y5sw_10",fe="_buttonsBlock_1y5sw_11",Ee="_top_1y5sw_22",Re="_itemsBlock_1y5sw_29",ve="_typeTexts_1y5sw_35",ke="_block_1y5sw_41",ye="_active_1y5sw_52",$e="_products_1y5sw_10",Ie="_product_1y5sw_10",we="_button_1y5sw_11",Be="_image_1y5sw_80",Ce="_info_1y5sw_87",Ne="_name_1y5sw_98",Te="_buttons_1y5sw_11",Pe="_modal_1y5sw_108",Se="_other_1y5sw_125",Ae="_options_1y5sw_131",z={subtitle:he,header:ge,text:je,productsBlock:be,buttonsBlock:fe,top:Ee,itemsBlock:Re,typeTexts:ve,block:ke,active:ye,products:$e,product:Ie,button:we,image:Be,info:Ce,name:Ne,buttons:Te,modal:Pe,other:Se,options:Ae},Z=x=>{const{buttons:s,setButtons:o,deletable:i=!0,addable:c=!0}=x,[l,e]=j.useState(null),[n,a]=j.useState({top:0,left:0});j.useEffect(()=>{const d=()=>{e(null)};return document.body.addEventListener("click",d),e(null),()=>{e(null),document.body.removeEventListener("click",d)}},[]),j.useEffect(()=>{if(l){const d=[...s].map(b=>b.id===l.id?l:b);o(d)}},[l]);const f=(d,b)=>{d.stopPropagation();const g=d.target.getBoundingClientRect(),k=490,m=window.innerHeight;let p=g.top+window.scrollY;p+k>m&&(p=m-k-20),a({top:p,left:g.left-30}),e(b)};return t.jsxRuntimeExports.jsxs("div",{className:z.products,children:[t.jsxRuntimeExports.jsx("h5",{className:z.subtitle,children:"Button Type"}),s.map(d=>t.jsxRuntimeExports.jsxs("div",{className:z.product,children:[t.jsxRuntimeExports.jsx(t.Select,{onChange:b=>{const k=[...s].map(m=>m.id===d.id?{...d,type:b}:m);o(k)},value:d.type,options:["Primary","Secondary","Tertiary"]}),t.jsxRuntimeExports.jsxs("div",{className:z.buttons,children:[t.jsxRuntimeExports.jsx(t.Icon,{name:"Sliders",hoverable:!0,width:20,height:20,onClick:b=>{f(b,d)}}),i&&t.jsxRuntimeExports.jsx(t.Icon,{name:"Trash",hoverable:!0,onClick:()=>{const b=s.filter(g=>g.id!==d.id);o(b)},width:20,height:20,fill:"#C12A2A"})]})]},d.id)),l&&t.jsxRuntimeExports.jsx(_e,{activeButton:l,setActiveButton:e,popupPosition:n}),c&&t.jsxRuntimeExports.jsxs(t.Button,{className:z.button,size:"s",onClick:()=>{const d=[...s];d.push({type:"Primary",id:t.v4(),typesText:[],destination:"Go to Page",text:""}),o(d)},children:[t.jsxRuntimeExports.jsx("span",{children:"Add Option"}),t.jsxRuntimeExports.jsx(t.Icon,{name:"Plus",width:16,height:16})]})]})},Oe=x=>{const{isActiveButtons:s,setIsActiveButtons:o,buttons:i,setButtons:c}=x;return t.jsxRuntimeExports.jsx(t.jsxRuntimeExports.Fragment,{children:t.jsxRuntimeExports.jsxs("div",{className:L.buttonsBlock,children:[t.jsxRuntimeExports.jsxs("div",{className:L.top,children:[t.jsxRuntimeExports.jsx("h3",{className:L.title,children:"Buttons"}),t.jsxRuntimeExports.jsx(t.Switch,{current:s,onChange:l=>o(l)})]}),t.jsxRuntimeExports.jsx(Z,{buttons:i,setButtons:c})]})})},De="_wrapper_tn7gb_1",Le="_subtitle_tn7gb_7",qe="_content_tn7gb_14",Me="_range_tn7gb_21",He="_track_tn7gb_26",ze="_progress_tn7gb_35",Fe="_dots_tn7gb_45",Ge="_dot_tn7gb_45",Ue="_active_tn7gb_62",Xe="_input_tn7gb_74",Ye="_countBlock_tn7gb_88",Ve="_count_tn7gb_88",Je="_controls_tn7gb_103",Ke="_button_tn7gb_108",R={wrapper:De,subtitle:Le,content:qe,range:Me,track:He,progress:ze,dots:Fe,dot:Ge,active:Ue,input:Xe,countBlock:Ye,count:Ve,controls:Je,button:Ke},tt=x=>{const{label:s,min:o=1,max:i=4,step:c=1,count:l,setCount:e}=x,[n,a]=j.useState(!1),f=Array.from({length:(i-o)/c+1}),d=(l-o)/(i-o)*100,b=()=>{l<i&&e(l+c)},g=()=>{l>o&&e(l-c)},k=m=>{const p=o+m*c;e(p)};return t.jsxRuntimeExports.jsxs("div",{className:R.wrapper,children:[s&&t.jsxRuntimeExports.jsx("h5",{className:R.subtitle,children:s}),t.jsxRuntimeExports.jsxs("div",{className:R.content,children:[t.jsxRuntimeExports.jsxs("div",{className:R.range,children:[t.jsxRuntimeExports.jsx("div",{className:R.track}),t.jsxRuntimeExports.jsx("div",{className:R.progress,style:{width:`${d}%`}}),t.jsxRuntimeExports.jsx("div",{className:R.dots,children:f.map((m,p)=>{const I=p<=(l-o)/c;return t.jsxRuntimeExports.jsx("button",{onClick:()=>k(p),className:t.clx(R.dot,{[R.active]:I,[R.inactive]:!I,[R.dragging]:n}),"aria-label":`Set value to ${o+p*c}`},p)})}),t.jsxRuntimeExports.jsx("input",{type:"range",min:o,max:i,step:c,value:l,onChange:m=>e(Number(m.target.value)),onMouseDown:()=>a(!0),onMouseUp:()=>a(!1),onTouchStart:()=>a(!0),onTouchEnd:()=>a(!1),className:R.input})]}),t.jsxRuntimeExports.jsxs("div",{className:R.countBlock,children:[t.jsxRuntimeExports.jsx(t.Input,{type:"number",min:o,max:i,paddingless:!0,onChange:m=>{const p=Number(m);p>i?e(i):p<o?e(o):e(p)},value:String(l)}),t.jsxRuntimeExports.jsxs("div",{className:R.controls,children:[t.jsxRuntimeExports.jsx("button",{onClick:b,disabled:l>=i,className:R.button,"aria-label":"Increment count",children:t.jsxRuntimeExports.jsx(t.Icon,{name:"CaretUp",width:15,height:15})}),t.jsxRuntimeExports.jsx("button",{onClick:g,disabled:l<=o,className:R.button,"aria-label":"Decrement count",children:t.jsxRuntimeExports.jsx(t.Icon,{name:"CaretDown",width:15,height:15})})]})]})]})]})},Qe="_subtitle_1nl8x_1",We="_header_1nl8x_8",Ze="_text_1nl8x_9",ts="_productsBlock_1nl8x_10",es="_top_1nl8x_22",ss="_itemsBlock_1nl8x_29",ns="_typeTexts_1nl8x_35",os="_block_1nl8x_41",is="_active_1nl8x_52",cs="_products_1nl8x_10",ls="_product_1nl8x_10",rs="_button_1nl8x_70",as="_image_1nl8x_80",us="_info_1nl8x_87",xs="_name_1nl8x_98",ds="_buttons_1nl8x_102",ps="_modal_1nl8x_108",ms="_link_1nl8x_126",_s="_modalOptions_1nl8x_132",$={subtitle:Qe,header:We,text:Ze,productsBlock:ts,top:es,itemsBlock:ss,typeTexts:ns,block:os,active:is,products:cs,product:ls,button:rs,image:as,info:us,name:xs,buttons:ds,modal:ps,link:ms,modalOptions:_s},hs=x=>{const{activeItem:s,setActiveItem:o,popupPosition:i,setIsOpenModal:c}=x;return t.jsxRuntimeExports.jsxs("div",{className:$.modal,onClick:l=>{l.stopPropagation()},style:{top:`${i.top}px`,left:`${i.left}px`},children:[t.jsxRuntimeExports.jsxs("div",{className:$.top,children:[t.jsxRuntimeExports.jsx("h3",{children:s.name}),t.jsxRuntimeExports.jsx(t.Icon,{name:"X",height:20,width:20,hoverable:!0,onClick:()=>{c(!1),o(null)}})]}),t.jsxRuntimeExports.jsx("div",{className:$.modalOptions,children:t.jsxRuntimeExports.jsx(t.ChooseImage,{label:"Put up an attractive image",onChange:l=>{const e={...s,images:l,imagePath:l[0]};o(e)}})})]})},gs=x=>{const{index:s,moveProduct:o,children:i}=x,[,c]=t.useDrop({accept:"product",hover(n){n.index!==s&&(o(n.index,s),n.index=s)}}),[{isDragging:l},e]=t.useDrag({type:"product",item:{index:s},collect:n=>({isDragging:n.isDragging()})});return t.jsxRuntimeExports.jsx("div",{ref:n=>e(c(n)),className:`${$.product} ${l?$.dragging:""}`,children:i})},js=x=>{const{isActiveItems:s,setIsActiveItems:o,items:i,setItems:c,other:l,title:e,subtitle:n,editable:a=!0,draggable:f=!1,withImage:d=!1,deletable:b=!0,addable:g=!0,itemsType:k,itemsOptions:m}=x,[p,I]=j.useState(null),[F,G]=j.useState({top:0,left:0}),[q,C]=j.useState(!1),S=(u,_)=>{const w=[...i],[E]=w.splice(u,1);w.splice(_,0,E),c(w)};j.useEffect(()=>{const u=()=>{I(null),C(!1)};return document.body.addEventListener("click",u),I(null),C(!1),()=>{I(null),C(!1),document.body.removeEventListener("click",u)}},[]),j.useEffect(()=>{if(p){const u=[...i].map(_=>_.id===p.id?p:_);c(u)}},[p]);const A=(u,_)=>{u.stopPropagation();const w=u.target.getBoundingClientRect(),E=100,D=window.innerHeight;let N=w.top+window.scrollY;N+E>D&&(N=D-E-20),C(!0),G({top:N-80,left:w.left-30}),I(_)};function X(u){if(d)return u?t.jsxRuntimeExports.jsx("img",{src:`https://imagedelivery.net/${u}/w=1000`,alt:"image",width:16,height:16}):t.jsxRuntimeExports.jsx(t.Icon,{name:"Image",width:16,height:16,fill:"#757575"})}const U=(u,_)=>{const w=t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[f&&t.jsxRuntimeExports.jsx("div",{children:t.jsxRuntimeExports.jsx(t.Icon,{name:"DotsSixVertical",hoverable:!0,width:20,height:20})}),k==="select"&&t.jsxRuntimeExports.jsx(t.Select,{onChange:E=>{const D=[...i],N=Number(E.split(" ")[1]),r=m.find(h=>h.id===N);if(!r)return;const y={...r.productData.stats,newPrice:r.productData.minPrice.amount,oldPrice:r.productData.compareAtPrice.amount},B=D.map(h=>h.id===u.id?{...u,name:E,listingId:N,stats:y}:h);I({...u,name:E,listingId:N}),c([...B])},value:u.name,options:[...m.map(E=>`Product ${E.id}`)],leftAddon:X(u.images[0])}),t.jsxRuntimeExports.jsxs("div",{className:$.buttons,children:[a&&t.jsxRuntimeExports.jsx(t.Icon,{name:"Sliders",hoverable:!0,width:20,height:20,onClick:E=>A(E,u)}),b&&t.jsxRuntimeExports.jsx(t.Icon,{name:"Trash",hoverable:!0,width:20,height:20,fill:"#C12A2A",onClick:()=>c(i.filter(E=>E.id!==u.id))})]})]});return f?t.jsxRuntimeExports.jsx(gs,{product:u,index:_,moveProduct:S,children:w},u.id):t.jsxRuntimeExports.jsx("div",{className:$.product,children:w},u.id)};return t.jsxRuntimeExports.jsxs("div",{className:$.productsBlock,children:[(e||s!==void 0)&&t.jsxRuntimeExports.jsxs("div",{className:$.top,children:[e&&t.jsxRuntimeExports.jsx("h3",{className:$.title,children:e}),s!==void 0&&t.jsxRuntimeExports.jsx(t.Switch,{current:s,onChange:u=>o==null?void 0:o(u)})]}),q&&p&&t.jsxRuntimeExports.jsx(hs,{activeItem:p,setActiveItem:I,setIsOpenModal:C,popupPosition:F}),t.jsxRuntimeExports.jsxs("div",{className:$.products,children:[n&&t.jsxRuntimeExports.jsx("h5",{className:$.subtitle,children:n}),f?t.jsxRuntimeExports.jsx(t.DndProvider,{backend:t.HTML5Backend,children:i.map((u,_)=>U(u,_))}):i.map((u,_)=>U(u,_)),g&&t.jsxRuntimeExports.jsxs(t.Button,{className:$.button,size:"s",onClick:()=>{const u=[...i],_=m[0].id;u.push({name:`Product ${_}`,id:t.v4(),listingId:_,imagePath:"",images:[],stats:{...m[0].productData.stats,newPrice:m[0].productData.minPrice.amount,oldPrice:m[0].productData.compareAtPrice.amount}}),c(u)},children:[t.jsxRuntimeExports.jsx("span",{children:"Add Option"}),t.jsxRuntimeExports.jsx(t.Icon,{name:"Plus",width:16,height:16})]})]}),l!==void 0&&t.jsxRuntimeExports.jsx(Q,{items:l})]})};exports.Button=t.Button;exports.Checkbox=t.Checkbox;exports.ChooseImage=t.ChooseImage;exports.ChooseImageModal=t.ChooseImageModal;exports.ColorPicker=t.ColorPicker;exports.Icon=t.Icon;exports.Input=t.Input;exports.Modal=t.Modal;exports.Picker=t.Picker;exports.Radio=t.Radio;exports.Select=t.Select;exports.Submodal=t.Submodal;exports.Switch=t.Switch;exports.Textarea=t.Textarea;exports.Tip=t.Tip;exports.ButtonTypeSettings=Z;exports.ButtonsSettings=Oe;exports.ItemsSettings=W;exports.LayoutSettings=mt;exports.ListingSelector=js;exports.RangeSelector=tt;exports.TextSettings=K;exports.TypesText=J;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./index-C8nZ3s7u.cjs"),j=require("react"),et="_wrapper_1g82c_2",st="_alignmentBlock_1g82c_8",nt="_title_1g82c_15",ot="_subtitle_1g82c_22",it="_alignmentContent_1g82c_29",ct="_alignments_1g82c_35",lt="_alignment_1g82c_8",rt="_circle_1g82c_54",at="_paddings_1g82c_61",ut="_padding_1g82c_61",xt="_input_1g82c_79",T={wrapper:et,alignmentBlock:st,title:nt,subtitle:ot,alignmentContent:it,alignments:ct,alignment:lt,circle:rt,paddings:at,padding:ut,input:xt},dt=["topLeft","top","topRight","left","center","right","bottomLeft","bottom","bottomRight"],pt=["left","top","right","bottom"],mt=x=>{const{alignment:s,padding:o,setPadding:i,setAlignment:c}=x;function l(){switch(s){case"left":case"topLeft":case"bottomLeft":return"TextAlignLeft";case"right":case"topRight":case"bottomRight":return"TextAlignRight";case"center":case"top":case"bottom":return"TextAlignCenter";default:return"TextAlignCenter"}}function e(n){switch(n){case"left":return"AlignLeft";case"right":return"AlignRight";case"top":return"AlignTop";case"bottom":return"AlignBottom"}}return t.jsxRuntimeExports.jsxs("div",{className:T.layout,children:[t.jsxRuntimeExports.jsx("h3",{className:T.title,children:"Layout"}),t.jsxRuntimeExports.jsxs("div",{className:T.alignmentBlock,children:[t.jsxRuntimeExports.jsx("h5",{className:T.subtitle,children:"Alignment"}),t.jsxRuntimeExports.jsxs("div",{className:T.alignmentContent,children:[t.jsxRuntimeExports.jsx("div",{className:T.alignments,children:dt.map(n=>t.jsxRuntimeExports.jsxs("div",{onClick:()=>{c(n)},className:T.alignment,children:[n!==s&&t.jsxRuntimeExports.jsx("div",{className:T.circle}),n===s&&t.jsxRuntimeExports.jsx(t.Icon,{name:l(),fill:"#FF3F19",width:22,height:22})]},n))}),t.jsxRuntimeExports.jsx("div",{className:T.paddings,children:pt.map(n=>t.jsxRuntimeExports.jsxs("label",{className:T.padding,children:[t.jsxRuntimeExports.jsx("div",{children:t.jsxRuntimeExports.jsx(t.Icon,{name:e(n),width:20,height:20})}),t.jsxRuntimeExports.jsx(t.Input,{type:"text",value:String(o[n]),onChange:a=>i({...o,[n]:Number(a)}),paddingless:!0,borderless:!0})]}))})]})]})]})},_t="_subtitle_2zbxx_1",ht="_header_2zbxx_8",gt="_text_2zbxx_9",jt="_top_2zbxx_16",bt="_itemsBlock_2zbxx_23",H={subtitle:_t,header:ht,text:gt,top:jt,itemsBlock:bt},ft="_typeTexts_3zlec_1",Et="_block_3zlec_7",Rt="_active_3zlec_18",Y={typeTexts:ft,block:Et,active:Rt},vt=["bold","italic","underline","strike-through","code"],J=x=>{const{typesText:s,setTypesText:o}=x;function i(c){switch(c){case"bold":return"TextB";case"italic":return"TextItalic";case"code":return"CodeSimple";case"strike-through":return"TextStrikethrough";case"underline":return"TextUnderline"}}return t.jsxRuntimeExports.jsx("div",{className:Y.typeTexts,children:vt.map(c=>t.jsxRuntimeExports.jsx("div",{className:t.clx(Y.block,{[Y.active]:s.includes(c)}),onClick:()=>{const l=[...s];if(l.includes(c)){const e=l.filter(n=>n!==c);o(e)}else l.push(c),o(l)},children:t.jsxRuntimeExports.jsx(t.Icon,{name:i(c),fill:s.includes(c)?"#252525":"#757575",width:20,height:20})},String(c)))})},K=x=>{const{typesText:s,isActiveText:o,setIsActiveText:i,text:c,setText:l,setTypesText:e,title:n,subtitle:a="Items"}=x;return t.jsxRuntimeExports.jsxs("div",{className:H.text,children:[(n||o!==void 0)&&t.jsxRuntimeExports.jsxs("div",{className:H.top,children:[n&&t.jsxRuntimeExports.jsx("h3",{className:H.title,children:n}),o!==void 0&&i&&t.jsxRuntimeExports.jsx(t.Switch,{current:o,onChange:f=>i(f)})]}),t.jsxRuntimeExports.jsxs("div",{className:H.itemsBlock,children:[t.jsxRuntimeExports.jsx("h5",{className:H.subtitle,children:a}),t.jsxRuntimeExports.jsx(t.Textarea,{onChange:f=>l(f),value:c,maxLength:150}),t.jsxRuntimeExports.jsx(J,{typesText:s,setTypesText:e})]})]})},kt="_subtitle_11qr1_1",yt="_header_11qr1_8",$t="_text_11qr1_9",It="_productsBlock_11qr1_10",wt="_top_11qr1_22",Bt="_itemsBlock_11qr1_29",Ct="_typeTexts_11qr1_35",Nt="_block_11qr1_41",Tt="_active_11qr1_52",Pt="_products_11qr1_10",St="_product_11qr1_10",At="_button_11qr1_70",Ot="_disabled_11qr1_80",Dt="_image_11qr1_84",Lt="_info_11qr1_91",qt="_name_11qr1_102",Mt="_buttons_11qr1_106",Ht="_modal_11qr1_112",zt="_link_11qr1_130",Ft="_modalOptions_11qr1_136",v={subtitle:kt,header:yt,text:$t,productsBlock:It,top:wt,itemsBlock:Bt,typeTexts:Ct,block:Nt,active:Tt,products:Pt,product:St,button:At,disabled:Ot,image:Dt,info:Lt,name:qt,buttons:Mt,modal:Ht,link:zt,modalOptions:Ft},Gt=x=>{const{activeItem:s,setActiveItem:o,popupPosition:i,modalOptions:c,setIsOpenModal:l}=x;return t.jsxRuntimeExports.jsxs("div",{className:v.modal,onClick:e=>{e.stopPropagation()},style:{top:`${i.top}px`,left:`${i.left}px`},children:[t.jsxRuntimeExports.jsxs("div",{className:v.top,children:[t.jsxRuntimeExports.jsx("h3",{children:s.name}),t.jsxRuntimeExports.jsx(t.Icon,{name:"X",height:20,width:20,hoverable:!0,onClick:()=>{o(null),l(!1)}})]}),t.jsxRuntimeExports.jsx("div",{className:v.modalOptions,children:c.map(e=>{if(e.type==="image")return t.jsxRuntimeExports.jsx(t.ChooseImage,{label:"Put up an attractive image",onChange:n=>{const a={...s,[e.field]:n};o(a)}});if(e.type==="text")return t.jsxRuntimeExports.jsx(K,{typesText:s[e.field.type],setTypesText:n=>{const a={...s,[e.field.type]:n};o(a)},text:s[e.field.text]||"",setText:n=>{const a={...s,[e.field.text]:n};o(a)},subtitle:e.label});if(e.type==="input")return t.jsxRuntimeExports.jsx(t.Input,{onChange:n=>{const a={...s,[e.field]:n};o(a)},value:s[e.field]||"",label:e.label,placeholder:e.placeholder});if(e.type==="inputSwitch")return t.jsxRuntimeExports.jsxs("div",{className:v.link,children:[t.jsxRuntimeExports.jsx(t.Input,{onChange:n=>{const a={...s,[e.field.text]:n};o(a)},value:s[e.field.text]||"",label:e.inputLabel,placeholder:e.placeholder}),t.jsxRuntimeExports.jsx(t.Switch,{current:!!s[e.field.switch]||!1,label:e.switchLabel,onChange:n=>{const a={...s,[e.field.switch]:n};o(a)}})]});if(e.type==="list")return t.jsxRuntimeExports.jsx(W,{items:s[e.field]||[],setItems:n=>{const a={...s,[e.field]:n};o(a)},itemsType:"select",draggable:e.draggable||!1,itemsOptions:e.itemsOptions,deletable:e.deletable||!1,editable:!1,subtitle:e.label});if(e.type==="select")return t.jsxRuntimeExports.jsx(t.Select,{options:e.itemsOptions,onChange:n=>{const a={...s,[e.field]:n};o(a)},label:e.label,value:s[e.field]||"String",leftAddon:e.leftAddon&&e.leftAddon==="icon"&&t.jsxRuntimeExports.jsx(t.Icon,{name:s[e.field]})})})})]})},Ut="_other_1wtgi_1",Xt="_subtitle_1wtgi_7",Yt="_items_1wtgi_14",V={other:Ut,subtitle:Xt,items:Yt},Q=x=>{const{items:s,title:o="Other"}=x;return t.jsxRuntimeExports.jsxs("div",{className:V.other,children:[t.jsxRuntimeExports.jsx("h5",{className:V.subtitle,children:o}),t.jsxRuntimeExports.jsx("div",{className:V.items,children:s.map(i=>t.jsxRuntimeExports.jsx(t.Switch,{current:i.isItem,onChange:c=>i.setIsItem(c),label:i.label,hasBackground:!0,paddingless:!1}))})]})},Vt=x=>{const{index:s,moveProduct:o,children:i}=x,[,c]=t.useDrop({accept:"product",hover(n){n.index!==s&&(o(n.index,s),n.index=s)}}),[{isDragging:l},e]=t.useDrag({type:"product",item:{index:s},collect:n=>({isDragging:n.isDragging()})});return t.jsxRuntimeExports.jsx("div",{ref:n=>e(c(n)),className:`${v.product} ${l?v.dragging:""}`,children:i})},W=x=>{const{isActiveItems:s,setIsActiveItems:o,items:i,setItems:c,other:l,title:e,subtitle:n,editable:a=!0,draggable:f=!1,withImage:d=!1,deletable:b=!0,addable:g=!0,itemsType:k,itemsPlaceholder:m="",itemsOptions:p,hasRangeSelector:I=!1,rangeSelectorOptions:F,modalOptions:G,addableOptions:q={},limit:C}=x,[S,A]=j.useState(null),[X,U]=j.useState({top:0,left:0}),[u,_]=j.useState(!1),w=(r,y)=>{const B=[...i],[h]=B.splice(r,1);B.splice(y,0,h),c(B)};j.useEffect(()=>{const r=()=>{A(null),_(!1)};return document.body.addEventListener("click",r),A(null),_(!1),()=>{A(null),_(!1),document.body.removeEventListener("click",r)}},[]),j.useEffect(()=>{if(S){const r=[...i].map(y=>y.id===S.id?S:y);c(r)}},[S]);const E=(r,y)=>{r.stopPropagation(),_(!0);const B=r.target.getBoundingClientRect(),h=500,M=window.innerHeight;let P=B.top+window.scrollY;console.log(h),P+h>M&&(P=M-h-20),U({top:P-80,left:B.left-30}),A(y)};function D(r){if(d)return r?t.jsxRuntimeExports.jsx("img",{src:`https://imagedelivery.net/${r[0]}/w=1000`,alt:"image",width:16,height:16}):t.jsxRuntimeExports.jsx(t.Icon,{name:"Image",width:16,height:16,fill:"#757575"})}const N=(r,y)=>{const B=t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[f&&t.jsxRuntimeExports.jsx("div",{children:t.jsxRuntimeExports.jsx(t.Icon,{name:"DotsSixVertical",hoverable:!0,width:20,height:20})}),k==="select"&&t.jsxRuntimeExports.jsx(t.Select,{onChange:h=>{const P=[...i].map(O=>O.id===r.id?{...r,name:h}:O);A({...r,name:h}),c([...P])},value:r.name,options:p,leftAddon:D(r.images)}),k==="input"&&t.jsxRuntimeExports.jsx(t.Input,{onChange:h=>{const P=[...i].map(O=>O.id===r.id?{...r,name:h}:O);c([...P])},value:r.name,placeholder:m}),k==="image"&&t.jsxRuntimeExports.jsx(t.ChooseImage,{onChange:h=>{const P=[...i].map(O=>O.id===r.id?{...r,images:h}:O);c([...P])}}),t.jsxRuntimeExports.jsxs("div",{className:v.buttons,children:[a&&t.jsxRuntimeExports.jsx(t.Icon,{name:"Sliders",hoverable:!0,width:20,height:20,onClick:h=>E(h,r)}),b&&t.jsxRuntimeExports.jsx(t.Icon,{name:"Trash",hoverable:!0,width:20,height:20,fill:"#C12A2A",onClick:()=>c(i.filter(h=>h.id!==r.id))})]})]});return f?t.jsxRuntimeExports.jsx(Vt,{product:r,index:y,moveProduct:w,children:B},r.id):t.jsxRuntimeExports.jsx("div",{className:v.product,children:B},r.id)};return t.jsxRuntimeExports.jsxs("div",{className:v.productsBlock,children:[(e||s!==void 0)&&t.jsxRuntimeExports.jsxs("div",{className:v.top,children:[e&&t.jsxRuntimeExports.jsx("h3",{className:v.title,children:e}),s!==void 0&&t.jsxRuntimeExports.jsx(t.Switch,{current:s,onChange:r=>o==null?void 0:o(r)})]}),S&&a&&G&&u&&t.jsxRuntimeExports.jsx(Gt,{activeItem:S,setActiveItem:A,popupPosition:X,modalOptions:G,setIsOpenModal:_}),I&&F&&t.jsxRuntimeExports.jsx(tt,{...F}),t.jsxRuntimeExports.jsxs("div",{className:v.products,children:[n&&t.jsxRuntimeExports.jsx("h5",{className:v.subtitle,children:n}),f?t.jsxRuntimeExports.jsx(t.DndProvider,{backend:t.HTML5Backend,children:i.map((r,y)=>N(r,y))}):i.map((r,y)=>N(r,y)),g&&t.jsxRuntimeExports.jsxs(t.Button,{className:t.clx(v.button,{[v.disabled]:!!(C&&C<=i.length)}),size:"s",disabled:!!(C&&C<=i.length),onClick:()=>{const r=[...i];k==="select"?r.push({name:p[0]||`Product ${i.length+1}`,id:t.v4(),...q}):k==="input"?r.push({name:"",id:t.v4(),...q}):r.push({name:`Image ${i.length+1}`,id:t.v4(),...q}),c(r)},children:[t.jsxRuntimeExports.jsx("span",{children:"Add Option"}),t.jsxRuntimeExports.jsx(t.Icon,{name:"Plus",width:16,height:16})]})]}),l!==void 0&&t.jsxRuntimeExports.jsx(Q,{items:l})]})},Jt="_subtitle_41klp_1",Kt="_header_41klp_8",Qt="_text_41klp_9",Wt="_productsBlock_41klp_10",Zt="_buttonsBlock_41klp_11",te="_top_41klp_21",ee="_itemsBlock_41klp_28",se="_typeTexts_41klp_34",ne="_block_41klp_40",oe="_active_41klp_51",ie="_products_41klp_10",ce="_product_41klp_10",le="_button_41klp_11",re="_image_41klp_79",ae="_info_41klp_86",ue="_name_41klp_97",xe="_buttons_41klp_11",de="_modal_41klp_107",pe="_other_41klp_124",me="_options_41klp_130",L={subtitle:Jt,header:Kt,text:Qt,productsBlock:Wt,buttonsBlock:Zt,top:te,itemsBlock:ee,typeTexts:se,block:ne,active:oe,products:ie,product:ce,button:le,image:re,info:ae,name:ue,buttons:xe,modal:de,other:pe,options:me},_e=x=>{const{activeButton:s,setActiveButton:o,popupPosition:i}=x,[c,l]=j.useState(s.typesText),[e,n]=j.useState(s.destination),[a,f]=j.useState(s.link||""),[d,b]=j.useState(s.text||"");return j.useEffect(()=>{o({...s,...{text:d,link:a,destination:e,typesText:c}})},[c,e,a,d]),t.jsxRuntimeExports.jsxs("div",{className:L.modal,onClick:g=>{g.stopPropagation()},style:{top:`${i.top}px`,left:`${i.left}px`},children:[t.jsxRuntimeExports.jsxs("div",{className:L.top,children:[t.jsxRuntimeExports.jsx("h3",{children:s.type}),t.jsxRuntimeExports.jsx(t.Icon,{name:"X",height:20,width:20,hoverable:!0,onClick:()=>o(null)})]}),t.jsxRuntimeExports.jsxs("div",{className:L.options,children:[t.jsxRuntimeExports.jsx(t.Select,{label:"Destination",onChange:g=>n(g),options:["Go to Page","Open Link"],value:e}),e==="Go to Page"?t.jsxRuntimeExports.jsx(t.Select,{label:"Go to",onChange:()=>{},options:[],value:"Homepage"}):t.jsxRuntimeExports.jsx(t.Input,{onChange:g=>f(g),value:a,placeholder:"https://",label:"Link"}),t.jsxRuntimeExports.jsx(t.Switch,{current:!1,label:"Open in new tab"}),t.jsxRuntimeExports.jsx(t.Textarea,{onChange:g=>b(g),value:d,label:"Text",maxLength:150}),t.jsxRuntimeExports.jsx(J,{typesText:c,setTypesText:l})]})]})},he="_subtitle_1y5sw_1",ge="_header_1y5sw_8",je="_text_1y5sw_9",be="_productsBlock_1y5sw_10",fe="_buttonsBlock_1y5sw_11",Ee="_top_1y5sw_22",Re="_itemsBlock_1y5sw_29",ve="_typeTexts_1y5sw_35",ke="_block_1y5sw_41",ye="_active_1y5sw_52",$e="_products_1y5sw_10",Ie="_product_1y5sw_10",we="_button_1y5sw_11",Be="_image_1y5sw_80",Ce="_info_1y5sw_87",Ne="_name_1y5sw_98",Te="_buttons_1y5sw_11",Pe="_modal_1y5sw_108",Se="_other_1y5sw_125",Ae="_options_1y5sw_131",z={subtitle:he,header:ge,text:je,productsBlock:be,buttonsBlock:fe,top:Ee,itemsBlock:Re,typeTexts:ve,block:ke,active:ye,products:$e,product:Ie,button:we,image:Be,info:Ce,name:Ne,buttons:Te,modal:Pe,other:Se,options:Ae},Z=x=>{const{buttons:s,setButtons:o,deletable:i=!0,addable:c=!0}=x,[l,e]=j.useState(null),[n,a]=j.useState({top:0,left:0});j.useEffect(()=>{const d=()=>{e(null)};return document.body.addEventListener("click",d),e(null),()=>{e(null),document.body.removeEventListener("click",d)}},[]),j.useEffect(()=>{if(l){const d=[...s].map(b=>b.id===l.id?l:b);o(d)}},[l]);const f=(d,b)=>{d.stopPropagation();const g=d.target.getBoundingClientRect(),k=490,m=window.innerHeight;let p=g.top+window.scrollY;p+k>m&&(p=m-k-20),a({top:p,left:g.left-30}),e(b)};return t.jsxRuntimeExports.jsxs("div",{className:z.products,children:[t.jsxRuntimeExports.jsx("h5",{className:z.subtitle,children:"Button Type"}),s.map(d=>t.jsxRuntimeExports.jsxs("div",{className:z.product,children:[t.jsxRuntimeExports.jsx(t.Select,{onChange:b=>{const k=[...s].map(m=>m.id===d.id?{...d,type:b}:m);o(k)},value:d.type,options:["Primary","Secondary","Tertiary"]}),t.jsxRuntimeExports.jsxs("div",{className:z.buttons,children:[t.jsxRuntimeExports.jsx(t.Icon,{name:"Sliders",hoverable:!0,width:20,height:20,onClick:b=>{f(b,d)}}),i&&t.jsxRuntimeExports.jsx(t.Icon,{name:"Trash",hoverable:!0,onClick:()=>{const b=s.filter(g=>g.id!==d.id);o(b)},width:20,height:20,fill:"#C12A2A"})]})]},d.id)),l&&t.jsxRuntimeExports.jsx(_e,{activeButton:l,setActiveButton:e,popupPosition:n}),c&&t.jsxRuntimeExports.jsxs(t.Button,{className:z.button,size:"s",onClick:()=>{const d=[...s];d.push({type:"Primary",id:t.v4(),typesText:[],destination:"Go to Page",text:""}),o(d)},children:[t.jsxRuntimeExports.jsx("span",{children:"Add Option"}),t.jsxRuntimeExports.jsx(t.Icon,{name:"Plus",width:16,height:16})]})]})},Oe=x=>{const{isActiveButtons:s,setIsActiveButtons:o,buttons:i,setButtons:c}=x;return t.jsxRuntimeExports.jsx(t.jsxRuntimeExports.Fragment,{children:t.jsxRuntimeExports.jsxs("div",{className:L.buttonsBlock,children:[t.jsxRuntimeExports.jsxs("div",{className:L.top,children:[t.jsxRuntimeExports.jsx("h3",{className:L.title,children:"Buttons"}),t.jsxRuntimeExports.jsx(t.Switch,{current:s,onChange:l=>o(l)})]}),t.jsxRuntimeExports.jsx(Z,{buttons:i,setButtons:c})]})})},De="_wrapper_tn7gb_1",Le="_subtitle_tn7gb_7",qe="_content_tn7gb_14",Me="_range_tn7gb_21",He="_track_tn7gb_26",ze="_progress_tn7gb_35",Fe="_dots_tn7gb_45",Ge="_dot_tn7gb_45",Ue="_active_tn7gb_62",Xe="_input_tn7gb_74",Ye="_countBlock_tn7gb_88",Ve="_count_tn7gb_88",Je="_controls_tn7gb_103",Ke="_button_tn7gb_108",R={wrapper:De,subtitle:Le,content:qe,range:Me,track:He,progress:ze,dots:Fe,dot:Ge,active:Ue,input:Xe,countBlock:Ye,count:Ve,controls:Je,button:Ke},tt=x=>{const{label:s,min:o=1,max:i=4,step:c=1,count:l,setCount:e}=x,[n,a]=j.useState(!1),f=Array.from({length:(i-o)/c+1}),d=(l-o)/(i-o)*100,b=()=>{l<i&&e(l+c)},g=()=>{l>o&&e(l-c)},k=m=>{const p=o+m*c;e(p)};return t.jsxRuntimeExports.jsxs("div",{className:R.wrapper,children:[s&&t.jsxRuntimeExports.jsx("h5",{className:R.subtitle,children:s}),t.jsxRuntimeExports.jsxs("div",{className:R.content,children:[t.jsxRuntimeExports.jsxs("div",{className:R.range,children:[t.jsxRuntimeExports.jsx("div",{className:R.track}),t.jsxRuntimeExports.jsx("div",{className:R.progress,style:{width:`${d}%`}}),t.jsxRuntimeExports.jsx("div",{className:R.dots,children:f.map((m,p)=>{const I=p<=(l-o)/c;return t.jsxRuntimeExports.jsx("button",{onClick:()=>k(p),className:t.clx(R.dot,{[R.active]:I,[R.inactive]:!I,[R.dragging]:n}),"aria-label":`Set value to ${o+p*c}`},p)})}),t.jsxRuntimeExports.jsx("input",{type:"range",min:o,max:i,step:c,value:l,onChange:m=>e(Number(m.target.value)),onMouseDown:()=>a(!0),onMouseUp:()=>a(!1),onTouchStart:()=>a(!0),onTouchEnd:()=>a(!1),className:R.input})]}),t.jsxRuntimeExports.jsxs("div",{className:R.countBlock,children:[t.jsxRuntimeExports.jsx(t.Input,{type:"number",min:o,max:i,paddingless:!0,onChange:m=>{const p=Number(m);p>i?e(i):p<o?e(o):e(p)},value:String(l)}),t.jsxRuntimeExports.jsxs("div",{className:R.controls,children:[t.jsxRuntimeExports.jsx("button",{onClick:b,disabled:l>=i,className:R.button,"aria-label":"Increment count",children:t.jsxRuntimeExports.jsx(t.Icon,{name:"CaretUp",width:15,height:15})}),t.jsxRuntimeExports.jsx("button",{onClick:g,disabled:l<=o,className:R.button,"aria-label":"Decrement count",children:t.jsxRuntimeExports.jsx(t.Icon,{name:"CaretDown",width:15,height:15})})]})]})]})]})},Qe="_subtitle_1nl8x_1",We="_header_1nl8x_8",Ze="_text_1nl8x_9",ts="_productsBlock_1nl8x_10",es="_top_1nl8x_22",ss="_itemsBlock_1nl8x_29",ns="_typeTexts_1nl8x_35",os="_block_1nl8x_41",is="_active_1nl8x_52",cs="_products_1nl8x_10",ls="_product_1nl8x_10",rs="_button_1nl8x_70",as="_image_1nl8x_80",us="_info_1nl8x_87",xs="_name_1nl8x_98",ds="_buttons_1nl8x_102",ps="_modal_1nl8x_108",ms="_link_1nl8x_126",_s="_modalOptions_1nl8x_132",$={subtitle:Qe,header:We,text:Ze,productsBlock:ts,top:es,itemsBlock:ss,typeTexts:ns,block:os,active:is,products:cs,product:ls,button:rs,image:as,info:us,name:xs,buttons:ds,modal:ps,link:ms,modalOptions:_s},hs=x=>{const{activeItem:s,setActiveItem:o,popupPosition:i,setIsOpenModal:c}=x;return t.jsxRuntimeExports.jsxs("div",{className:$.modal,onClick:l=>{l.stopPropagation()},style:{top:`${i.top}px`,left:`${i.left}px`},children:[t.jsxRuntimeExports.jsxs("div",{className:$.top,children:[t.jsxRuntimeExports.jsx("h3",{children:s.name}),t.jsxRuntimeExports.jsx(t.Icon,{name:"X",height:20,width:20,hoverable:!0,onClick:()=>{c(!1),o(null)}})]}),t.jsxRuntimeExports.jsx("div",{className:$.modalOptions,children:t.jsxRuntimeExports.jsx(t.ChooseImage,{label:"Put up an attractive image",onChange:l=>{const e={...s,images:l,imagePath:l[0]};o(e)}})})]})},gs=x=>{const{index:s,moveProduct:o,children:i}=x,[,c]=t.useDrop({accept:"product",hover(n){n.index!==s&&(o(n.index,s),n.index=s)}}),[{isDragging:l},e]=t.useDrag({type:"product",item:{index:s},collect:n=>({isDragging:n.isDragging()})});return t.jsxRuntimeExports.jsx("div",{ref:n=>e(c(n)),className:`${$.product} ${l?$.dragging:""}`,children:i})},js=x=>{const{isActiveItems:s,setIsActiveItems:o,items:i,setItems:c,other:l,title:e,subtitle:n,editable:a=!0,draggable:f=!1,withImage:d=!1,deletable:b=!0,addable:g=!0,itemsType:k,itemsOptions:m}=x,[p,I]=j.useState(null),[F,G]=j.useState({top:0,left:0}),[q,C]=j.useState(!1),S=(u,_)=>{const w=[...i],[E]=w.splice(u,1);w.splice(_,0,E),c(w)};j.useEffect(()=>{const u=()=>{I(null),C(!1)};return document.body.addEventListener("click",u),I(null),C(!1),()=>{I(null),C(!1),document.body.removeEventListener("click",u)}},[]),j.useEffect(()=>{if(p){const u=[...i].map(_=>_.id===p.id?p:_);c(u)}},[p]);const A=(u,_)=>{u.stopPropagation();const w=u.target.getBoundingClientRect(),E=100,D=window.innerHeight;let N=w.top+window.scrollY;N+E>D&&(N=D-E-20),C(!0),G({top:N-80,left:w.left-30}),I(_)};function X(u){if(d)return u?t.jsxRuntimeExports.jsx("img",{src:`https://imagedelivery.net/${u}/w=1000`,alt:"image",width:16,height:16}):t.jsxRuntimeExports.jsx(t.Icon,{name:"Image",width:16,height:16,fill:"#757575"})}const U=(u,_)=>{const w=t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[f&&t.jsxRuntimeExports.jsx("div",{children:t.jsxRuntimeExports.jsx(t.Icon,{name:"DotsSixVertical",hoverable:!0,width:20,height:20})}),k==="select"&&t.jsxRuntimeExports.jsx(t.Select,{onChange:E=>{const D=[...i],N=Number(E.split(" ")[1]),r=m.find(h=>h.id===N);if(!r)return;const y={...r.productData.stats,newPrice:r.productData.minPrice.amount,oldPrice:r.productData.compareAtPrice.amount},B=D.map(h=>h.id===u.id?{...u,name:E,listingId:N,stats:y}:h);I({...u,name:E,listingId:N}),c([...B])},value:u.name,options:[...m.map(E=>`Product ${E.id}`)],leftAddon:X(u.images[0])}),t.jsxRuntimeExports.jsxs("div",{className:$.buttons,children:[a&&t.jsxRuntimeExports.jsx(t.Icon,{name:"Sliders",hoverable:!0,width:20,height:20,onClick:E=>A(E,u)}),b&&t.jsxRuntimeExports.jsx(t.Icon,{name:"Trash",hoverable:!0,width:20,height:20,fill:"#C12A2A",onClick:()=>c(i.filter(E=>E.id!==u.id))})]})]});return f?t.jsxRuntimeExports.jsx(gs,{product:u,index:_,moveProduct:S,children:w},u.id):t.jsxRuntimeExports.jsx("div",{className:$.product,children:w},u.id)};return t.jsxRuntimeExports.jsxs("div",{className:$.productsBlock,children:[(e||s!==void 0)&&t.jsxRuntimeExports.jsxs("div",{className:$.top,children:[e&&t.jsxRuntimeExports.jsx("h3",{className:$.title,children:e}),s!==void 0&&t.jsxRuntimeExports.jsx(t.Switch,{current:s,onChange:u=>o==null?void 0:o(u)})]}),q&&p&&t.jsxRuntimeExports.jsx(hs,{activeItem:p,setActiveItem:I,setIsOpenModal:C,popupPosition:F}),t.jsxRuntimeExports.jsxs("div",{className:$.products,children:[n&&t.jsxRuntimeExports.jsx("h5",{className:$.subtitle,children:n}),f?t.jsxRuntimeExports.jsx(t.DndProvider,{backend:t.HTML5Backend,children:i.map((u,_)=>U(u,_))}):i.map((u,_)=>U(u,_)),g&&t.jsxRuntimeExports.jsxs(t.Button,{className:$.button,size:"s",onClick:()=>{const u=[...i],_=m[0].id;u.push({name:`Product ${_}`,id:t.v4(),listingId:_,imagePath:"",images:[],stats:{...m[0].productData.stats,newPrice:m[0].productData.minPrice.amount,oldPrice:m[0].productData.compareAtPrice.amount}}),c(u)},children:[t.jsxRuntimeExports.jsx("span",{children:"Add Option"}),t.jsxRuntimeExports.jsx(t.Icon,{name:"Plus",width:16,height:16})]})]}),l!==void 0&&t.jsxRuntimeExports.jsx(Q,{items:l})]})};exports.Button=t.Button;exports.Checkbox=t.Checkbox;exports.ChooseImage=t.ChooseImage;exports.ChooseImageModal=t.ChooseImageModal;exports.ColorPicker=t.ColorPicker;exports.Icon=t.Icon;exports.Input=t.Input;exports.Modal=t.Modal;exports.Picker=t.Picker;exports.Radio=t.Radio;exports.Select=t.Select;exports.Submodal=t.Submodal;exports.Switch=t.Switch;exports.Textarea=t.Textarea;exports.Tip=t.Tip;exports.ButtonTypeSettings=Z;exports.ButtonsSettings=Oe;exports.ItemsSettings=W;exports.LayoutSettings=mt;exports.ListingSelector=js;exports.RangeSelector=tt;exports.TextSettings=K;exports.TypesText=J;
|
package/dist/ui.es.js
CHANGED