https://familiesforlife.sg/assets/ImageSetting.fe71fb75.js

1import{W as e,G as l,r as a,P as t,Q as o,H as u,b as d,d as i}from"./element-plus.80abf16b.js";import{c1 as n,bM as s,c2 as r,c7 as p,c8 as m,ca as v,cg as c,ce as g,cd as h,ep as V,eq as b}from"./commonmodules.b9c1dd40.js";import{D as f}from"./model.b2b31a9c.js";import{_ as U,a as y}from"./index.d3bd9396.js";import _ from"./UploadImage.ce0d4033.js";import"./lodash-es.480d1bd8.js";import"./axios.1263d4b1.js";import"./vue-router.5e13d197.js";import"./consts.99054894.js";const x=e=>(V("data-v-063e92d4"),e=e(),b(),e),w=x((()=>v("div",{class:"label-title"},[v("label",null,"Style"),v("em",{class:"bi bi-info-circle",title:'JSON format example: {"height":"80px","width":"80px"}.\nCSS format example: height:80px;width:80px;.'})],-1))),S=x((()=>v("label",null,"Top",-1))),I=x((()=>v("label",null,"Bottom",-1))),j=x((()=>v("label",null,"Left",-1))),T=x((()=>v("label",null,"Right",-1))),k={class:"dialog-footer"};var P=U(n({__name:"ImageSetting",props:{domId:null,title:null,componentData:null,save:{type:Function},isEditorSetting:{type:Boolean}},setup(n,{expose:V}){const b=n,U=s(JSON.parse(null==b?void 0:b.componentData)),x=y.newGuid(),P=s(!1),C=/[hH][tT]{2}[pP]([sS])?:\/\/([\w-])+[\w-]+(\/[\w- .\/?%&=]*)?/,D=s(""),E=s(""),L=["img","image","picture","photo","graphic"],R=s(location.pathname.toLowerCase().includes("emailbuildervue")),B=s(!1),F=s(!1),q=e=>{D.value="",E.value="",P.value=null!=e?e:!P.value,B.value=!1;const l=document.getElementById(x);l&&(l.value=""),P.value&&(null==b?void 0:b.componentData)&&(U.value={...f,...JSON.parse(b.componentData)})},H=()=>{let e=!0;if(!R.value){const l=(U.value.alt||"").trim().toLowerCase();l?L.includes(l)?(E.value="The image alt text set as 'img', 'image', 'picture', 'photo', or 'graphic' is confusing or not useful.",e=!1):l.length<25?(E.value="Please enter more than 25 characters.",e=!1):l.length>150?(E.value="Please enter within 150 characters.",e=!1):E.value="":(E.value="This field is required.",e=!1)}U.value.redirectUrl&&"external"===U.value.urlPathType&&(C.test(U.value.redirectUrl)?D.value="":(D.value="Please enter a valid URL with http:// or https:// as prefix.",e=!1)),e&&(b.save(U.value),q(!1))},J=e=>{U.value.paddingTop=e},N=e=>{U.value.paddingBottom=e},O=e=>{U.value.paddingLeft=e},G=e=>{U.value.paddingRight=e};return V({toggleDialog:q}),(s,V)=>{const b=e,f=l,y=a,x=t,C=o,L=u,B=d,W=i;return r(),p(W,{modelValue:P.value,"onUpdate:modelValue":V[16]||(V[16]=e=>P.value=e),title:n.title,width:"705px",class:"camps-setting-dialog","close-on-click-modal":!1},{footer:m((()=>[v("span",k,[c(B,{onClick:V[15]||(V[15]=e=>q())},{default:m((()=>[g("Cancel")])),_:1}),c(B,{type:"primary",onClick:H,disabled:F.value},{default:m((()=>[g("Save")])),_:1},8,["disabled"])])])),default:m((()=>[c(L,{"label-position":"top"},{default:m((()=>[n.isEditorSetting?(r(),p(f,{key:0,label:"Width"},{default:m((()=>[c(b,{modelValue:U.value.width,"onUpdate:modelValue":V[0]||(V[0]=e=>U.value.width=e),"controls-position":"right"},null,8,["modelValue"])])),_:1})):h("",!0),n.isEditorSetting?(r(),p(f,{key:1,label:"Height"},{default:m((()=>[c(b,{modelValue:U.value.height,"onUpdate:modelValue":V[1]||(V[1]=e=>U.value.height=e),"controls-position":"right"},null,8,["modelValue"])])),_:1})):h("",!0),c(f,null,{default:m((()=>[w,c(y,{modelValue:U.value.style,"onUpdate:modelValue":V[2]||(V[2]=e=>U.value.style=e)},null,8,["modelValue"])])),_:1}),P.value?(r(),p(f,{key:2,label:"Image"},{default:m((()=>[c(_,{modelValue:U.value.url,"onUpdate:modelValue":V[3]||(V[3]=e=>U.value.url=e),onUploading:V[4]||(V[4]=e=>F.value=!0),onUploaded:V[5]||(V[5]=e=>F.value=!1)},null,8,["modelValue"])])),_:1})):h("",!0),R.value?h("",!0):(r(),p(f,{key:3,label:"Alt Text (Image Description)",error:E.value,required:""},{default:m((()=>[c(y,{modelValue:U.value.alt,"onUpdate:modelValue":V[6]||(V[6]=e=>U.value.alt=e),onInput:V[7]||(V[7]=e=>E.value="")},null,8,["modelValue"])])),_:1},8,["error"])),n.isEditorSetting?h("",!0):(r(),p(f,{key:4,label:"Fit"},{default:m((()=>[c(C,{modelValue:U.value.objectFit,"onUpdate:modelValue":V[8]||(V[8]=e=>U.value.objectFit=e),style:{width:"100%"}},{default:m((()=>[c(x,{label:"Contain",value:"contain"}),c(x,{label:"Cover",value:"cover"}),c(x,{label:"Fill",value:"fill"}),c(x,{label:"Scale Down",value:"scale-down"})])),_:1},8,["modelValue"])])),_:1})),n.isEditorSetting?h("",!0):(r(),p(f,{key:5,label:"Redirect URL",error:D.value},{default:m((()=>[c(y,{modelValue:U.value.redirectUrl,"onUpdate:modelValue":V[10]||(V[10]=e=>U.value.redirectUrl=e)},{prepend:m((()=>[c(C,{modelValue:U.value.urlPathType,"onUpdate:modelValue":V[9]||(V[9]=e=>U.value.urlPathType=e),style:{width:"110px"}},{default:m((()=>[c(x,{label:"Internal",value:"internal"}),c(x,{label:"External",value:"external"})])),_:1},8,["modelValue"])])),_:1},8,["modelValue"])])),_:1},8,["error"])),n.isEditorSetting?h("",!0):(r(),p(f,{key:6,label:"Padding",class:"camps-padding-setting"},{default:m((()=>[v("div",null,[S,c(b,{modelValue:U.value.paddingTop,"onUpdate:modelValue":V[11]||(V[11]=e=>U.value.paddingTop=e),min:0,"controls-position":"right",onInput:J},null,8,["modelValue"])]),v("div",null,[I,c(b,{modelValue:U.value.paddingBottom,"onUpdate:modelValue":V[12]||(V[12]=e=>U.value.paddingBottom=e),min:0,"controls-position":"right",onInput:N},null,8,["modelValue"])]),v("div",null,[j,c(b,{modelValue:U.value.paddingLeft,"onUpdate:modelValue":V[13]||(V[13]=e=>U.value.paddingLeft=e),"controls-position":"right",min:0,onInput:O},null,8,["modelValue"])]),v("div",null,[T,c(b,{modelValue:U.value.paddingRight,"onUpdate:modelValue":V[14]||(V[14]=e=>U.value.paddingRight=e),"controls-position":"right",min:0,onInput:G},null,8,["modelValue"])])])),_:1}))])),_:1})])),_:1},8,["modelValue","title"])}}}),[["__scopeId","data-v-063e92d4"]]);export{P as default};