2 lines
15 KiB
JavaScript
2 lines
15 KiB
JavaScript
import{_ as ge,c as y,o as b,b as f,a as M,F as fe,r as me,p as m,n as F,t as R,s as we,q as ye,v as be,K as Se,d as u,e as S,w as q,u as he,f as Ie,g as _e,k as ke}from"./main-D6qyxymd.js";const $={props:{uid:{type:String,required:!0},content:{type:Object,required:!0}},emits:["trigger-event"],setup(e,{emit:a}){const d=u(()=>{var t;return(t=e.wwEditorState)==null?void 0:t.isEditing}),{value:n,setValue:I}=wwLib.wwVariable.useComponentVariable({uid:e.uid,name:"items",type:"array",defaultValue:u(()=>{var t;return((t=e.content)==null?void 0:t.initialItems)||[]})}),{value:O,setValue:c}=wwLib.wwVariable.useComponentVariable({uid:e.uid,name:"selectedItem",type:"object",defaultValue:null}),s=S(""),v=S(-1),{getIcon:V}=wwLib.useIcons(),H=S(""),P=S("");q(()=>e.content.addIcon,async()=>{H.value=await V(e.content.addIcon||"plus-circle")},{immediate:!0}),q(()=>e.content.removeIcon,async()=>{P.value=await V(e.content.removeIcon||"trash")},{immediate:!0});const _=u(()=>n.value||[]),B=u(()=>{var t;return((t=e.content)==null?void 0:t.displayField)||null}),k=t=>{var o;if(!((o=e.content)!=null&&o.isObjectItems))return String(t);if(!B.value)return JSON.stringify(t);const l=wwLib.wwUtils.resolveObjectPropertyPath(t,B.value);return l==null?"":typeof l=="object"?JSON.stringify(l):String(l)},D=(t,l="")=>t?typeof t=="object"?t[wwLib.wwLang.lang]||t.en||l:String(t):l,z=u(()=>{var l,o;const t=((l=e.content)==null?void 0:l.addPlaceholder)||((o=e.content)==null?void 0:o.addFieldPlaceholder);return D(t,"Add new item...")}),K=u(()=>{var t;return D((t=e.content)==null?void 0:t.emptyMessage,"No items in the list")}),N=u(()=>{var t,l,o,i,h,L;return{backgroundColor:((t=e.content)==null?void 0:t.listBackgroundColor)||"transparent",borderRadius:((l=e.content)==null?void 0:l.borderRadius)||"4px",border:(o=e.content)!=null&&o.showBorder?`1px solid ${((i=e.content)==null?void 0:i.borderColor)||"#ddd"}`:"none",maxHeight:((h=e.content)==null?void 0:h.maxHeight)||"none",overflow:(L=e.content)!=null&&L.maxHeight?"auto":"visible"}}),Q=t=>{var o,i,h,L,E;const l=v.value===t;return{padding:((o=e.content)==null?void 0:o.itemPadding)||"10px",backgroundColor:l?((i=e.content)==null?void 0:i.selectedItemBackgroundColor)||"rgba(0, 123, 255, 0.1)":((h=e.content)==null?void 0:h.itemBackgroundColor)||"transparent",borderBottom:(L=e.content)!=null&&L.showItemDividers?`1px solid ${((E=e.content)==null?void 0:E.dividerColor)||"#eee"}`:"none"}},J=t=>{var o,i;return{color:v.value===t&&((o=e.content)!=null&&o.selectedItemTextColor)?e.content.selectedItemTextColor:((i=e.content)==null?void 0:i.itemTextColor)||"inherit"}},W=u(()=>{var t;return{color:((t=e.content)==null?void 0:t.emptyMessageColor)||"#999"}}),G=u(()=>{var t;return{marginTop:((t=e.content)==null?void 0:t.addSectionSpacing)||"10px"}}),X=u(()=>{var t,l,o,i,h;return{padding:((t=e.content)==null?void 0:t.inputPadding)||"8px 12px",borderRadius:((l=e.content)==null?void 0:l.inputBorderRadius)||"4px",border:`1px solid ${((o=e.content)==null?void 0:o.inputBorderColor)||"#ddd"}`,backgroundColor:((i=e.content)==null?void 0:i.inputBackgroundColor)||"#fff",color:((h=e.content)==null?void 0:h.inputTextColor)||"inherit",width:"100%"}}),Y=u(()=>{var o;const t=((o=e.content)==null?void 0:o.buttonPadding)||"8px";return`${(parseInt(t,10)||8)*4}px`}),Z=u(()=>{var t;return{"--button-size":Y.value,"--button-margin":((t=e.content)==null?void 0:t.buttonMargin)||"8px"}}),j=u(()=>{var t,l,o;return{backgroundColor:((t=e.content)==null?void 0:t.addButtonColor)||"#4CAF50",color:((l=e.content)==null?void 0:l.addButtonTextColor)||"#fff",borderRadius:((o=e.content)==null?void 0:o.buttonBorderRadius)||"4px"}}),x=u(()=>{var t,l,o;return{backgroundColor:((t=e.content)==null?void 0:t.removeButtonColor)||"#f44336",color:((l=e.content)==null?void 0:l.removeButtonTextColor)||"#fff",borderRadius:((o=e.content)==null?void 0:o.buttonBorderRadius)||"4px"}});return{items:_,newItemText:s,selectedIndex:v,normalizedDisplayField:B,getItemDisplayText:k,addIconHTML:H,removeIconHTML:P,rootStyle:Z,listContainerStyle:N,getItemStyle:Q,getItemTextStyle:J,emptyMessageStyle:W,addSectionStyle:G,inputStyle:X,addButtonStyle:j,removeButtonStyle:x,addItem:()=>{var o;if(d.value||!s.value.trim())return;let t;if((o=e.content)!=null&&o.isObjectItems){let i=B.value;typeof i=="object"?i=i.path||i.field||Object.values(i)[0]||"field":typeof i=="string"?i=i.replace(/\[['"]?([^'"\]]+)['"]?\]/,"$1"):i="field",t={[i]:s.value.trim()}}else t=s.value.trim();const l=[..._.value,t];I(l),s.value="",a("trigger-event",{name:"itemAdded",event:{value:t}}),a("trigger-event",{name:"change",event:{value:l}})},removeItem:t=>{if(d.value)return;const l=_.value[t],o=[..._.value];o.splice(t,1),I(o),v.value===t?(v.value=-1,c(null),s.value=""):v.value>t&&v.value--,a("trigger-event",{name:"itemRemoved",event:{value:l}}),a("trigger-event",{name:"change",event:{value:o}})},selectItem:t=>{var l;if(!d.value){if(v.value===t)v.value=-1,c(null),s.value="";else{v.value=t;const o=_.value[t];c(o),s.value=(l=e.content)!=null&&l.isObjectItems?k(o):o}a("trigger-event",{name:"selectionChange",event:{value:v.value>=0?_.value[v.value]:null,index:v.value}})}},clearItems:()=>{d.value||(I([]),v.value=-1,c(null),s.value="",a("trigger-event",{name:"change",event:{value:[]}}))},resolvedAddPlaceholder:z,resolvedEmptyMessage:K}}},de=()=>{he(e=>({"4f5fbf64":e.content.hoverBackgroundColor||"rgba(0, 0, 0, 0.03)","68d394d3":e.content.inputFocusBoxShadow||"0 0 0 3px rgba(0, 123, 255, 0.25)"}))},se=$.setup;$.setup=se?(e,a)=>(de(),se(e,a)):de;const xe=["onClick"],Be={class:"main-cell"},Le={key:0,class:"button-cell"},Te=["onClick"],Oe=["innerHTML"],Pe={class:"main-cell"},Re=["placeholder"],Me={class:"button-cell"},Ve={class:"button-wrap"},He=["innerHTML"];function je(e,a,d,n,I,O){return b(),y("div",{class:"editable-list",style:m(n.rootStyle)},[f("div",{class:"list-container",style:m(n.listContainerStyle)},[(b(!0),y(fe,null,me(n.items,(c,s)=>(b(),y("div",{key:s,class:F(["row list-item",{selected:n.selectedIndex===s}]),style:m(n.getItemStyle(s)),onClick:v=>n.selectItem(s)},[f("div",Be,[f("div",{class:"item-text",style:m(n.getItemTextStyle(s))},R(n.getItemDisplayText(c)),5)]),d.content.showRemoveButton?(b(),y("div",Le,[f("button",{class:"remove-button",style:m(n.removeButtonStyle),onClick:we(v=>n.removeItem(s),["stop"])},[f("span",{innerHTML:n.removeIconHTML},null,8,Oe)],12,Te)])):M("",!0)],14,xe))),128)),n.items.length?M("",!0):(b(),y("div",{key:0,class:"empty-message",style:m(n.emptyMessageStyle)},R(n.resolvedEmptyMessage),5))],4),d.content.showAddField?(b(),y("div",{key:0,class:"row add-item-section",style:m(n.addSectionStyle)},[f("div",Pe,[ye(f("input",{"onUpdate:modelValue":a[0]||(a[0]=c=>n.newItemText=c),class:"add-item-input",placeholder:n.resolvedAddPlaceholder,style:m(n.inputStyle),onKeyup:a[1]||(a[1]=Se((...c)=>n.addItem&&n.addItem(...c),["enter"]))},null,44,Re),[[be,n.newItemText]])]),f("div",Me,[f("div",Ve,[f("button",{class:"add-button",style:m(n.addButtonStyle),onClick:a[2]||(a[2]=(...c)=>n.addItem&&n.addItem(...c))},[f("span",{innerHTML:n.addIconHTML},null,8,He)],4)])])],4)):M("",!0)],4)}const Ke=ge($,[["render",je],["__scopeId","data-v-0fc79a1c"]]),ee={props:{content:{type:Object,required:!0},uid:{type:String,required:!0}},emits:["trigger-event"],setup(e,{emit:a}){const d=u(()=>e.wwEditorState.isEditing),n=S(null),I=S(null),O=S(null),c=S(!1),s=S(!1),v=S(""),V=S(!1),H=S({}),{value:P,setValue:_}=wwLib.wwVariable.useComponentVariable({uid:e.uid,name:"value",type:"any",defaultValue:u(()=>e.content.initialValue??null)}),B=(r,w="")=>r?typeof r=="object"?r[wwLib.wwLang.lang]||r.en||w:String(r):w,k=u(()=>{var oe,le,ae,re,ce;const r=Array.isArray((oe=e.content)==null?void 0:oe.options)?e.content.options.slice():[],w=(le=e.content)==null?void 0:le.labelPropertyPath,t=(ae=e.content)==null?void 0:ae.valuePropertyPath,l=(re=e.content)==null?void 0:re.iconPropertyPath,o=(ce=e.content)==null?void 0:ce.parentPropertyPath,i=r.map((g,T)=>{var ie;const C=w?wwLib.wwUtils.resolveObjectPropertyPath(g,w):g.label??"",A=typeof C=="object"?B(C):C,p=t?wwLib.wwUtils.resolveObjectPropertyPath(g,t):g.value??g.id??null,Ce=(ie=e.content)!=null&&ie.enableIcons&&l?wwLib.wwUtils.resolveObjectPropertyPath(g,l):g.icon??null;return{_raw:g,_ww_key:p!=null?String(p):`__idx_${T}`,label:A,value:p,icon:Ce,_parentRaw:o?wwLib.wwUtils.resolveObjectPropertyPath(g,o):g.parent_id??g.parent}});if(e.content.enableNoValue&&i.unshift({_raw:null,_ww_key:"__no_value",label:B(e.content.noValueLabel,"Not selected"),value:null,icon:null,_parentRaw:null,level:0}),!e.content.showHierarchy||!e.content.parentPropertyPath)return i.map(g=>({...g,level:0}));const h=Object.create(null);i.forEach(g=>{h[g._ww_key]={...g,children:[],level:0}});const L=[];i.forEach(g=>{const T=g._ww_key,C=g._parentRaw==null?null:String(g._parentRaw);C&&h[C]?h[C].children.push(h[T]):L.push(h[T])});const E=[],ne=(g,T=0)=>{g.forEach(C=>{var A;C.level=T,E.push(C),(A=C.children)!=null&&A.length&&ne(C.children,T+1)})};return ne(L,0),E}),D=u(()=>{if(!e.content.enableSearch||!v.value)return k.value;const r=v.value.toLowerCase();return k.value.filter(w=>String(w.label||"").toLowerCase().includes(r))}),z=async()=>{const{getIcon:r}=wwLib.useIcons(),w={};for(const t of k.value)if(t.icon)try{w[t.icon]=await r(t.icon)}catch{w[t.icon]=""}H.value=w};q(()=>k.value,z,{deep:!0}),Ie(z);const K=u(()=>k.value.find(r=>String(r.value)===String(P.value))||null),N=r=>String(r.value)===String(P.value),Q=u(()=>({fontFamily:e.content.fontFamily||"inherit",fontSize:e.content.fontSize||"14px"})),J=u(()=>({backgroundColor:e.content.triggerBackgroundColor||"#fff",borderColor:s.value?e.content.focusBorderColor||"#4a90e2":e.content.borderColor||"#ddd",borderRadius:e.content.inputBorderRadius||"4px",padding:e.content.triggerPadding||"8px 12px",boxShadow:s.value?e.content.focusShadow||"0 0 1px #4a90e2":"none"})),W=u(()=>({backgroundColor:e.content.menuBackgroundColor||"#fff",borderColor:e.content.menuBorderColor||e.content.borderColor||"#ddd",borderRadius:e.content.menuBorderRadius||"4px",boxShadow:e.content.menuShadow||"0 2px 10px rgba(0,0,0,0.1)"})),G=u(()=>({backgroundColor:e.content.triggerBackgroundColor||"#ffffff",color:e.content.triggerTextColor||"#000000",borderColor:c.value?e.content.focusBorderColor||"#4a90e2":e.content.borderColor||"#dddddd",borderRadius:e.content.inputBorderRadius||"4px",padding:e.content.triggerPadding||"8px 12px",fontFamily:e.content.fontFamily||"inherit",fontSize:e.content.fontSize||"14px"})),X=r=>{var t,l,o,i;const w=N(r);return{padding:((t=e.content)==null?void 0:t.optionPadding)||"8px 12px",color:w?((l=e.content)==null?void 0:l.selectedOptionTextColor)||"#4a90e2":((o=e.content)==null?void 0:o.optionTextColor)||"#000",backgroundColor:w?((i=e.content)==null?void 0:i.selectedOptionBgColor)||"#e6f0fd":"transparent"}},Y=()=>{!d.value&&!e.content.disabled&&(s.value?j():Z())},Z=async()=>{s.value=!0,v.value="",await ke(),x(),e.content.enableSearch&&O.value&&O.value.focus(),document.addEventListener("click",U),window.addEventListener("scroll",x,!0),window.addEventListener("resize",x)},j=()=>{s.value=!1,document.removeEventListener("click",U),window.removeEventListener("scroll",x,!0),window.removeEventListener("resize",x)},x=()=>{if(!n.value||!I.value)return;const r=n.value.getBoundingClientRect(),w=I.value.offsetHeight,l=window.innerHeight-r.bottom,o=r.top;V.value=l<w&&o>l},U=r=>{n.value&&!n.value.contains(r.target)&&j()},te=r=>{d.value||(_(r.value),a("trigger-event",{name:"change",event:{value:r.value}}),j())};return q(()=>e.content.initialValue,r=>{r!=null&&String(P.value)!==String(r)&&(_(r),a("trigger-event",{name:"initValueChange",event:{value:r}}))}),_e(()=>{document.removeEventListener("click",U),window.removeEventListener("scroll",x,!0),window.removeEventListener("resize",x)}),{dropdownRef:n,menuRef:I,searchInputRef:O,isOpen:s,isDropUp:V,searchQuery:v,selectedOption:K,displayOptions:k,filteredDisplayOptions:D,toggleDropdown:Y,selectOption:te,isOptionSelected:N,containerStyle:Q,triggerStyle:J,menuStyle:W,searchInputStyle:G,getOptionStyle:X,iconHTML:H,searchInputFocused:c,resolveMultilang:B}}},ue=()=>{he(e=>({"540e8aa0":e.content.focusBorderColor||"#4a90e2","1bdc6aa2":e.content.caretIconSize||"16px","3f2f833a":e.content.triggerBackgroundColor||"#ffffff","36e4a622":e.content.triggerTextColor||"#000000","72b060aa":e.content.borderColor||"#dddddd","9b15b1be":e.content.inputBorderRadius||"4px","51200ca0":e.content.placeholderColor||"#999999",16999685:e.content.hoverBorderColor||"#aaaaaa",e2d4f57e:e.content.focusShadow||"0 0 0 2px rgba(74,144,226,0.3)","404ed997":e.content.optionHoverColor||"#f5f5f5","3a35751e":e.content.optionHoverTextColor||"#000000","403005f4":e.content.optionHoverFontWeight||"normal","204cf98a":e.content.selectedOptionBgColor||"#e6f0fd","4ed60caa":e.content.selectedOptionTextColor||"#4a90e2"}))},ve=ee.setup;ee.setup=ve?(e,a)=>(ue(),ve(e,a)):ue;const Ee={class:"dropdown-value"},Fe=["placeholder"],De={class:"dropdown-options"},ze=["onClick"],Ne={key:0,class:"option-icon"},Ue=["innerHTML"];function Ae(e,a,d,n,I,O){return b(),y("div",{class:F(["dropdown-with-search",{"is-open":n.isOpen,"is-disabled":d.content.disabled}]),ref:"dropdownRef",style:m(n.containerStyle)},[f("div",{class:F(["dropdown-trigger",{"is-active":n.isOpen}]),onClick:a[0]||(a[0]=(...c)=>n.toggleDropdown&&n.toggleDropdown(...c)),style:m(n.triggerStyle)},[f("div",Ee,[n.selectedOption?(b(),y("span",{key:0,style:m({color:d.content.triggerTextColor||"#000"})},R(n.selectedOption.label),5)):(b(),y("span",{key:1,class:"placeholder",style:m({color:d.content.placeholderColor||"#999",fontStyle:d.content.placeholderFontStyle||"normal"})},R(d.content.enableNoValue?n.resolveMultilang(d.content.noValueLabel,"Not selected"):n.resolveMultilang(d.content.placeholder,"Select an option")),5))]),f("div",{class:"dropdown-icon",style:m({color:d.content.triggerTextColor||"#666",width:d.content.caretIconSize||"16px",height:d.content.caretIconSize||"16px"})},a[5]||(a[5]=[f("svg",{viewBox:"0 0 24 24",fill:"none"},[f("path",{d:"M6 9L12 15L18 9",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"})],-1)]),4)],6),n.isOpen?(b(),y("div",{key:0,class:F(["dropdown-menu",{"dropdown-menu-up":n.isDropUp}]),style:m(n.menuStyle),ref:"menuRef"},[d.content.enableSearch?(b(),y("div",{key:0,class:"dropdown-search",style:m({borderColor:d.content.menuBorderColor||d.content.borderColor||"#ddd"})},[ye(f("input",{type:"text","onUpdate:modelValue":a[1]||(a[1]=c=>n.searchQuery=c),placeholder:n.resolveMultilang(d.content.searchPlaceholder,"Search..."),onClick:a[2]||(a[2]=we(()=>{},["stop"])),ref:"searchInputRef",style:m(n.searchInputStyle),onFocus:a[3]||(a[3]=c=>n.searchInputFocused=!0),onBlur:a[4]||(a[4]=c=>n.searchInputFocused=!1)},null,44,Fe),[[be,n.searchQuery]])],4)):M("",!0),f("div",De,[n.displayOptions.length?(b(!0),y(fe,{key:0},me(n.filteredDisplayOptions,(c,s)=>(b(),y("div",{key:c._ww_key||s,class:F(["dropdown-option",{"is-selected":n.isOptionSelected(c)}]),onClick:v=>n.selectOption(c),style:m(n.getOptionStyle(c))},[d.content.enableIcons&&c.icon?(b(),y("div",Ne,[f("span",{innerHTML:n.iconHTML[c.icon]},null,8,Ue)])):M("",!0),f("span",{style:m({marginLeft:d.content.showHierarchy?(c.level||0)*16+"px":"0"})},R(c.label),5)],14,ze))),128)):(b(),y("div",{key:1,class:"dropdown-no-results",style:m({color:d.content.placeholderColor||"#999"})},R(n.resolveMultilang(d.content.noResultsText,"No options found")),5))])],6)):M("",!0)],6)}const Qe=ge(ee,[["render",Ae],["__scopeId","data-v-a7b5853c"]]);export{Qe as a,Ke as e};
|