https://familiesforlife.sg/assets/TabSetting.aaaadb4a.js

1import{r as e,G as l,b as a,p as t,q as o,P as d,Q as n,M as u,X as s,F as i,H as r,d as p}from"./element-plus.80abf16b.js";import{c1 as c,bM as m,bK as v,c2 as b,c7 as f,c8 as V,ca as g,cg as _,ce as h,cc as C,cf as x,bP as j,c3 as y,cI as D,bI as U,cd as A}from"./commonmodules.b9c1dd40.js";import{D as S}from"./model.3d7b3a01.js";import k from"./Editor.55912a5f.js";import{_ as w,a as I}from"./index.d3bd9396.js";import"./lodash-es.480d1bd8.js";import"./axios.1263d4b1.js";import"./@progress.f46c2525.js";import"./ImageSetting.fe71fb75.js";import"./model.b2b31a9c.js";import"./UploadImage.ce0d4033.js";import"./consts.99054894.js";import"./vue-router.5e13d197.js";import"./VideoSetting.32156b82.js";import"./Setting.4d5824df.js";import"./UploadFile.0c31b3c9.js";import"./FlagSetting.fe20b0e2.js";const O={key:0,class:"camps-tabsetting-errortips"},B={key:1,class:"camps-tabsetting-errortips"},T={class:"dialog-footer"};var M=w(c({__name:"TabSetting",props:{domId:null,title:null,componentData:null,save:{type:Function}},setup(c,{expose:w}){const M=c,z=m(JSON.parse(null==M?void 0:M.componentData)),F=m(!1),J=m(""),N=m(!1),E=m(!1),G=m([]),H=v((()=>{const e=z.value.style||"",l=e.indexOf("{"),a=e.indexOf("}");return l>0&&a>l?e:""})),P=e=>{F.value=null!=e?e:!F.value,E.value=!1,N.value=!1,F.value&&(null==M?void 0:M.componentData)&&(z.value={...I.deepCopy(S),...JSON.parse(M.componentData)},J.value=z.value.panelData[0].id),G.value=[]},q=()=>{if(z.value.panelData.length<4){const e={title:"",content:"",id:I.newGuid()};z.value.panelData.push(e),E.value=!1}else N.value=!0},K=()=>{z.value.panelData.forEach((e=>{const l=G.value.find((l=>l.id===e.id));e.content=l.el.getHtml()})),M.save(z.value),P(!1)};return w({toggleDialog:P}),(m,v)=>{const S=e,w=l,I=a,M=t,Q=o,R=d,X=n,L=u,W=s,Y=i,Z=r,$=p;return b(),f($,{modelValue:F.value,"onUpdate:modelValue":v[8]||(v[8]=e=>F.value=e),title:c.title,width:"800px",class:"camps-setting-dialog","close-on-click-modal":!1},{footer:V((()=>[g("span",T,[_(I,{type:"primary",onClick:K},{default:V((()=>[h("Save")])),_:1}),_(I,{onClick:v[7]||(v[7]=e=>P())},{default:V((()=>[h("Cancel")])),_:1})])])),default:V((()=>[_(Z,{"label-width":"auto"},{default:V((()=>[_(Q,{modelValue:J.value,"onUpdate:modelValue":v[0]||(v[0]=e=>J.value=e),class:"builder-collapse camps-tab-collapse",accordion:""},{default:V((()=>[(b(),f(C("style"),null,{default:V((()=>[h(x(j(H)),1)])),_:1})),(b(!0),y(U,null,D(z.value.panelData,((e,l)=>(b(),f(M,{key:e.id,name:e.id,title:e.title},{default:V((()=>[_(w,{label:"title"},{default:V((()=>[_(S,{modelValue:e.title,"onUpdate:modelValue":l=>e.title=l},null,8,["modelValue","onUpdate:modelValue"])])),_:2},1024),_(w,{label:"content"},{default:V((()=>[_(k,{ref_for:!0,ref:l=>((e,l)=>{l&&G.value.push({id:e,el:l})})(e.id,l),modelValue:e.content,"onUpdate:modelValue":l=>e.content=l},null,8,["modelValue","onUpdate:modelValue"])])),_:2},1024),_(w,null,{default:V((()=>[_(I,{onClick:l=>(e=>{if(z.value.panelData.length>1){const l=z.value.panelData.findIndex((l=>l.id===e));z.value.panelData.splice(l,1),N.value=!1}else E.value=!0})(e.id)},{default:V((()=>[h("RemoveTab")])),_:2},1032,["onClick"])])),_:2},1024)])),_:2},1032,["name","title"])))),128))])),_:1},8,["modelValue"]),_(w,null,{default:V((()=>[_(I,{onClick:q},{default:V((()=>[h("AddTab")])),_:1})])),_:1}),_(w,{label:"Tab Control on Mobile"},{default:V((()=>[_(X,{modelValue:z.value.tabControlOnMobile,"onUpdate:modelValue":v[1]||(v[1]=e=>z.value.tabControlOnMobile=e)},{default:V((()=>[_(R,{label:"Dropdown",value:0}),_(R,{label:"Tab",value:1})])),_:1},8,["modelValue"])])),_:1}),_(w,{label:"Tab horizontal alignment"},{default:V((()=>[_(X,{modelValue:z.value.horizontalAlign,"onUpdate:modelValue":v[2]||(v[2]=e=>z.value.horizontalAlign=e)},{default:V((()=>[_(R,{label:"Space Between",value:"space-between"}),_(R,{label:"Space Around",value:"space-around"}),_(R,{label:"Center",value:"center"})])),_:1},8,["modelValue"])])),_:1}),_(w,{label:"Active Color"},{default:V((()=>[_(L,{modelValue:z.value.activeColor,"onUpdate:modelValue":v[3]||(v[3]=e=>z.value.activeColor=e)},null,8,["modelValue"])])),_:1}),_(w,{label:"Inactive Border Color"},{default:V((()=>[_(Y,{direction:"vertical",size:16,alignment:"normal"},{default:V((()=>[g("div",null,[_(W,{modelValue:z.value.inactiveBorderColor.sameAsActiveColor,"onUpdate:modelValue":v[4]||(v[4]=e=>z.value.inactiveBorderColor.sameAsActiveColor=e)},null,8,["modelValue"]),h(" Use the same color as the active color ")]),z.value.inactiveBorderColor.sameAsActiveColor?A("",!0):(b(),f(L,{key:0,modelValue:z.value.inactiveBorderColor.color,"onUpdate:modelValue":v[5]||(v[5]=e=>z.value.inactiveBorderColor.color=e)},null,8,["modelValue"]))])),_:1})])),_:1}),_(w,{label:"style for all tab"},{default:V((()=>[_(S,{type:"textarea",modelValue:z.value.style,"onUpdate:modelValue":v[6]||(v[6]=e=>

1z.value.style=e),placeholder:'class format example:.paragraph {height: 80px;width:80px;}\n  \r\nJSON format example: {"height": "80px","width":"80px";}\n  \r\nstyle example: height: 80px,width:80px'},null,8,["modelValue"])])),_:1}),_(w,null,{default:V((()=>[E.value?(b(),y("p",O,"At least one tab exists")):A("",!0),N.value?(b(),y("p",B,"Only 4 tabs can be added at most")):A("",!0)])),_:1})])),_:1})])),_:1},8,["modelValue","title"])}}}),[["__scopeId","data-v-2c5d0942"]]);export{M as default};