@kvass/widgets 1.1.1 → 1.1.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/contact.js +2 -2
- package/package.json +1 -1
package/dist/contact.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import{_ as w,c as v,a as k,m as U,n as j,o as l,b as P,r as m,t as g,d as y,e as _,w as z,f as E,u as A,g as M,h as H,i as I,j as J,F as q,k as b,l as R,p as D,q as W}from"./_plugin-vue_export-helper.js";const G=`@charset "UTF-8";.kvass-contact-checkbox{display:flex;align-items:start;gap:.75rem;cursor:pointer}.kvass-contact-checkbox__element{cursor:inherit;margin:0;appearance:none;background-color:var(--kvass-contact-input-background);flex-shrink:0;font:inherit;color:currentColor;width:var(--kvass-contact-checkbox-size, var(--kvass-contact-default-checkbox-size));aspect-ratio:1;border:var(--kvass-contact-checkbox-border-width, var(--kvass-contact-default-checkbox-border-width)) solid currentColor;border-radius:var(--kvass-contact-checkbox-border-radius, var(--kvass-contact-default-checkbox-border-radius))}.kvass-contact-checkbox__element:focus-visible{outline:var(--kvass-contact-outline-width, var(--kvass-contact-default-outline-width)) solid var(--kvass-contact-color, var(--kvass-contact-default-color));outline-offset:var(--kvass-contact-outline-offset, var(--kvass-contact-default-outline-offset))}.kvass-contact-checkbox__element:checked{position:relative;background-color:var(--kvass-contact-primary, var(--kvass-contact-default-primary));border-color:var(--kvass-contact-primary, var(--kvass-contact-default-primary))}.kvass-contact-checkbox__element:checked:before{content:"\\2713";font-size:.75em;position:absolute;top:50%;left:50%;translate:-50% -50%;color:var(--kvass-contact-color-inverted, var(--kvass-contact-default-color-inverted))}.kvass-contact-checkbox--required span:after{content:"*";color:var(--kvass-contact-error, var(--kvass-contact-default-error));margin-left:.3rem}
|
|
2
|
-
`,K=["value","checked"],Q=["innerHTML"],X={inheritAttrs:!1},Y=Object.assign(X,{__name:"Checkbox.ce",props:{modelValue:[Boolean,Array],state:String,label:String},emits:["update:modelValue"],setup(a,{emit:t}){const e=a;function u(s){return typeof e.modelValue=="boolean"?t("update:modelValue",s.target.checked):t("update:modelValue",s.target.checked?[...e.modelValue,e.state]:e.modelValue.filter(f=>f!==e.state))}return(s,f)=>(l(),v("label",{class:j(["kvass-contact-checkbox",[{"kvass-contact-checkbox--required":"required"in s.$attrs},s.$attrs.class]])},[k("input",U({class:"kvass-contact-checkbox__element",type:"checkbox"},s.$attrs,{value:a.modelValue,checked:s.$attrs.checked,onChange:u}),null,16,K),k("span",{class:"kvass-contact-checkbox__label",innerHTML:a.label},null,8,Q)],2))}}),x=w(Y,[["styles",[G]]]),Z=`.kvass-contact-field{display:flex;flex-direction:column;gap:.3rem}.kvass-contact-field__label{margin-left:var(--kvass-contact-label-transform, 0);font-weight:var(--kvass-contact-label-weight, initial)}.kvass-contact-field input{-webkit-appearance:none}.kvass-contact-field__element{padding:calc(var(--kvass-contact-spacing, var(--kvass-contact-default-spacing)) / 2);padding-left:var(--kvass-contact-field-input-tranform, calc(var(--kvass-contact-spacing, var(--kvass-contact-default-spacing)) / 2));border-radius:var(--kvass-contact-border-radius, var(--kvass-contact-default-border-radius));border:var(--kvass-contact-border-width, var(--kvass-contact-default-border-width)) solid var(--kvass-contact-border-color, var(--kvass-contact-default-border-color));resize:vertical;font:inherit;background-color:var(--kvass-contact-input-background, var(--kvass-contact-default-input-background))}.kvass-contact-field__element:focus-visible{outline:var(--kvass-contact-outline-width, var(--kvass-contact-default-outline-width)) solid var(--kvass-contact-color, var(--kvass-contact-default-color));outline-offset:var(--kvass-contact-outline-offset, var(--kvass-contact-default-outline-offset))}.kvass-contact-field--required .kvass-contact-field__label:after{content:"*";color:var(--kvass-contact-error, var(--kvass-contact-default-error));margin-left:.3rem}.kvass-contact-field--required.kvass-contact-field--focused .kvass-contact-field__element:invalid{border-color:var(--kvass-contact-error, var(--kvass-contact-default-error))}.kvass-contact-field--full-width{grid-column-end:span var(--kvass-contact-grid-columns, var(--kvass-contact-default-grid-columns))}
|
|
2
|
+
`,K=["value","checked"],Q=["innerHTML"],X={inheritAttrs:!1},Y=Object.assign(X,{__name:"Checkbox.ce",props:{modelValue:[Boolean,Array],state:String,label:String},emits:["update:modelValue"],setup(a,{emit:t}){const e=a;function u(s){return typeof e.modelValue=="boolean"?t("update:modelValue",s.target.checked):t("update:modelValue",s.target.checked?[...e.modelValue,e.state]:e.modelValue.filter(f=>f!==e.state))}return(s,f)=>(l(),v("label",{class:j(["kvass-contact-checkbox",[{"kvass-contact-checkbox--required":"required"in s.$attrs},s.$attrs.class]])},[k("input",U({class:"kvass-contact-checkbox__element",type:"checkbox"},s.$attrs,{value:a.modelValue,checked:s.$attrs.checked,onChange:u}),null,16,K),k("span",{class:"kvass-contact-checkbox__label",innerHTML:a.label},null,8,Q)],2))}}),x=w(Y,[["styles",[G]]]),Z=`.kvass-contact-field{display:flex;flex-direction:column;gap:.3rem}.kvass-contact-field__label{margin-left:var(--kvass-contact-label-transform, 0);font-weight:var(--kvass-contact-label-weight, initial)}.kvass-contact-field input{-webkit-appearance:none}.kvass-contact-field__element{padding:calc(var(--kvass-contact-spacing, var(--kvass-contact-default-spacing)) / 2);padding-left:var(--kvass-contact-field-input-tranform, calc(var(--kvass-contact-spacing, var(--kvass-contact-default-spacing)) / 2));border-radius:var(--kvass-contact-border-radius, var(--kvass-contact-default-border-radius));border:var(--kvass-contact-border-width, var(--kvass-contact-default-border-width)) solid var(--kvass-contact-border-color, var(--kvass-contact-default-border-color));resize:vertical;font:inherit;color:inherit;background-color:var(--kvass-contact-input-background, var(--kvass-contact-default-input-background))}.kvass-contact-field__element:focus-visible{outline:var(--kvass-contact-outline-width, var(--kvass-contact-default-outline-width)) solid var(--kvass-contact-color, var(--kvass-contact-default-color));outline-offset:var(--kvass-contact-outline-offset, var(--kvass-contact-default-outline-offset))}.kvass-contact-field--required .kvass-contact-field__label:after{content:"*";color:var(--kvass-contact-error, var(--kvass-contact-default-error));margin-left:.3rem}.kvass-contact-field--required.kvass-contact-field--focused .kvass-contact-field__element:invalid{border-color:var(--kvass-contact-error, var(--kvass-contact-default-error))}.kvass-contact-field--full-width{grid-column-end:span var(--kvass-contact-grid-columns, var(--kvass-contact-default-grid-columns))}
|
|
3
3
|
`,tt=["for"],at={key:0,class:"kvass-contact-field__label"},et={inheritAttrs:!1},st=Object.assign(et,{__name:"Field.ce",props:{modelValue:[String,Array],label:String,type:String},emits:["update:modelValue"],setup(a,{emit:t}){const e=a,u=P(()=>{switch(e.type){case"textarea":return"textarea";case"select":return"select";default:return"input"}}),s=m(!1),f=m(!1);function V(r){t("update:modelValue",r.target.value),s.value=!0}function n(){s.value&&(f.value=!0)}return(r,$)=>(l(),v("label",{class:j(["kvass-contact-field",[{"kvass-contact-field--required":"required"in r.$attrs,"kvass-contact-field--focused":f.value},r.$attrs.class]]),for:r.$attrs.id},[a.label?(l(),v("span",at,g(a.label),1)):y("",!0),(l(),_(E(A(u)),U({class:"kvass-contact-field__element"},r.$attrs,{value:a.modelValue,onInput:V,onBlur:n}),{default:z(()=>[M(r.$slots,"default")]),_:3},16,["value"]))],10,tt))}}),h=w(st,[["styles",[Z]]]),ct=`.kvass-contact-fieldset{position:relative;display:flex;flex-direction:column;gap:calc(var(--kvass-contact-spacing, var(--kvass-contact-default-spacing)) / 4);margin:calc(var(--kvass-contact-spacing, var(--kvass-contact-default-spacing)) / 1.5) 0 0 0;padding:calc(var(--kvass-contact-spacing, var(--kvass-contact-default-spacing)) / 2);border-radius:var(--kvass-contact-border-radius, var(--kvass-contact-default-border-radius));border:var(--kvass-contact-border-width, var(--kvass-contact-default-border-width)) solid var(--kvass-contact-border-color, var(--kvass-contact-default-border-color));font:inherit}.kvass-contact-fieldset:focus-visible{outline:var(--kvass-contact-outline-width, var(--kvass-contact-default-outline-width)) solid var(--kvass-contact-color, var(--kvass-contact-default-color));outline-offset:var(--kvass-contact-outline-offset, var(--kvass-contact-default-outline-offset))}.kvass-contact-fieldset__label{margin:0;padding:0;position:absolute;top:-1.4rem;left:0}
|
|
4
4
|
`,ot={class:"kvass-contact-fieldset"},nt={key:0,class:"kvass-contact-fieldset__label"},rt={__name:"Fieldset.ce",props:{label:String},setup(a){return(t,e)=>(l(),v("fieldset",ot,[a.label?(l(),v("legend",nt,g(a.label),1)):y("",!0),M(t.$slots,"default")]))}},F=w(rt,[["styles",[ct]]]);function L(a,t,e,u){return e&&e instanceof Array&&e.length?Promise.all(e.map(s=>L(a,{...t,project:s,references:[{onModel:"Project",ref:s},...t.references]}))):!(e!=null&&e.length)&&(u!=null&&u.length)?lt(a,{...t.contact,assignees:u},t.comment):fetch(`${a}/api/graphql`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({query:`
|
|
5
5
|
mutation ($data: LeadCreate!) {
|
|
@@ -21,5 +21,5 @@ import{_ as w,c as v,a as k,m as U,n as j,o as l,b as P,r as m,t as g,d as y,e a
|
|
|
21
21
|
isPublished
|
|
22
22
|
}
|
|
23
23
|
}
|
|
24
|
-
`})}).then(t=>t.json()).then(t=>t.data.Projects.filter(e=>e.isPublished))}const dt=a=>a.charAt(0).toUpperCase()+a.substring(1),ut=`.kvass-contact{--kvass-contact-default-background: #ffffff;--kvass-contact-default-spacing: 2rem;--kvass-contact-default-border-radius: 4px;--kvass-contact-default-border-color: #eaeaea;--kvass-contact-default-border-width: 1px;--kvass-contact-default-color: #222222;--kvass-contact-default-color-inverted: #ffffff;--kvass-contact-default-max-width: 720px;--kvass-contact-default-primary: #1d56d8;--kvass-contact-default-error: #d81d1d;--kvass-contact-default-grid-columns: 1;--kvass-contact-default-disabled: #eaeaea;--kvass-contact-default-input-background: #ffffff;--kvass-contact-default-outline-width: 2px;--kvass-contact-default-outline-offset: 0px;--kvass-contact-default-checkbox-size: 1em;--kvass-contact-default-label-transform: 0;--kvass-contact-default-checkbox-border-width: var( --kvass-contact-default-border-width );--kvass-contact-default-checkbox-border-radius: var( --kvass-contact-default-border-radius );background-color:var(--kvass-contact-background, var(--kvass-contact-default-background));padding:var(--kvass-contact-
|
|
24
|
+
`})}).then(t=>t.json()).then(t=>t.data.Projects.filter(e=>e.isPublished))}const dt=a=>a.charAt(0).toUpperCase()+a.substring(1),ut=`.kvass-contact{--kvass-contact-default-background: #ffffff;--kvass-contact-default-spacing: 2rem;--kvass-contact-default-padding: var( --kvass-contact-spacing, var(--kvass-contact-default-spacing) );--kvass-contact-default-border-radius: 4px;--kvass-contact-default-border-color: #eaeaea;--kvass-contact-default-border-width: 1px;--kvass-contact-default-color: #222222;--kvass-contact-default-color-inverted: #ffffff;--kvass-contact-default-max-width: 720px;--kvass-contact-default-primary: #1d56d8;--kvass-contact-default-error: #d81d1d;--kvass-contact-default-grid-columns: 1;--kvass-contact-default-disabled: #eaeaea;--kvass-contact-default-input-background: #ffffff;--kvass-contact-default-outline-width: 2px;--kvass-contact-default-outline-offset: 0px;--kvass-contact-default-checkbox-size: 1em;--kvass-contact-default-label-transform: 0;--kvass-contact-default-checkbox-border-width: var( --kvass-contact-default-border-width );--kvass-contact-default-checkbox-border-radius: var( --kvass-contact-default-border-radius );background-color:var(--kvass-contact-background, var(--kvass-contact-default-background));padding:var(--kvass-contact-padding, var(--kvass-contact-default-padding));border-radius:var(--kvass-contact-border-radius, var(--kvass-contact-default-border-radius));color:var(--kvass-contact-color, var(--kvass-contact-default-color));max-width:var(--kvass-contact-max-width, var(--kvass-contact-default-max-width));font:inherit;accent-color:var(--kvass-contact-primary, var(--kvass-contact-default-primary));font-size:var(--kvass-contact-font-size, inherit);height:inherit;min-height:inherit;max-height:inherit;display:flex;flex-direction:column;gap:var(--kvass-contact-spacing, var(--kvass-contact-default-spacing))}@media (max-width: 600px){.kvass-contact{--kvass-contact-grid-columns: 1;padding:calc(var(--kvass-contact-spacing, var(--kvass-contact-default-spacing)) / 2)}}.kvass-contact *:focus-visible{outline:2px solid var(--kvass-contact-color, var(--kvass-contact-default-color));outline-offset:2px}.kvass-contact--submitted.kvass-contact--theme-overlay{height:100%;width:100%;position:absolute;z-index:2000;max-width:100%;left:0;top:0}.kvass-contact__header{display:flex;flex-direction:column;gap:.5rem}.kvass-contact__fields{display:grid;grid-template-columns:repeat(var(--kvass-contact-grid-columns, var(--kvass-contact-default-grid-columns)),1fr);gap:calc(var(--kvass-contact-spacing, var(--kvass-contact-default-spacing)) / 2)}.kvass-contact__success--overlay{margin:auto;font-size:var(--kvass-contact-success-label-font-size, inherit)}.kvass-contact__title{font-size:2rem;margin:0}.kvass-contact__subtitle{opacity:.7;margin:0}.kvass-contact__submit{padding:calc(var(--kvass-contact-spacing, var(--kvass-contact-default-spacing)) / 2);border-radius:var(--kvass-contact-border-radius, var(--kvass-contact-default-border-radius));background-color:var(--kvass-contact-primary, var(--kvass-contact-default-primary));color:var(--kvass-contact-color-inverted, var(--kvass-contact-default-color-inverted));border:none;font:inherit;width:100%;cursor:pointer}.kvass-contact__submit:active{filter:brightness(.95)}.kvass-contact__submit:disabled{background-color:var(--kvass-contact-disabled, var(--kvass-contact-default-disabled));color:var(--kvass-contact-color, var(--kvass-contact-default-color));cursor:not-allowed}.kvass-contact a{color:inherit}
|
|
25
25
|
`,vt=["onSubmit"],ft={key:0,class:"kvass-contact__success--overlay"},kt=["innerHTML"],mt={class:"kvass-contact__header"},pt={class:"kvass-contact__title"},bt={key:0,class:"kvass-contact__subtitle"},ht={class:"kvass-contact__fields"},gt=["disabled"],yt={__name:"Form.ce",props:{lang:{type:String,default:()=>document.documentElement.getAttribute("lang")||"nb"},privacyUrl:String,upsell:{type:Boolean,default:!1},accountUrl:{type:String,required:!0},projects:{type:String,default:""},references:{type:String,default:""},tags:{type:String,default:""},defaultAssignees:String,successTheme:{type:String,default:"default",enums:["overlay","default"]},submitTimeout:{type:Number,default:2e3}},setup(a){const t=a,e={nb:{title:"Meld interesse",submit:"Meld interesse",name:"Navn",email:"E-post",phone:"Telefonnummer",message:"Melding",projects:"Hvilke prosjekter er du interessert i?",upsell:"Jeg ønsker informasjon om lignende prosjekter",privacy:"Jeg ønsker å bli kontaktet i samtykke med [personvernerklæringen]",success:"Takk for interessen!"},en:{title:"Contact agent",submit:"Submit",name:"Name",email:"Email",phone:"Phone",message:"Message",projects:"Which projects are you interested in?",upsell:"I want to know about other similar projects",privacy:"I agree to the [privacy policy]",success:"Thank you for your interest"}},u=H(),s=m(!1),f=P(()=>t.privacyUrl?t.privacyUrl:`${t.accountUrl}/api/legal/privacy/tenant`),V={contact:{name:null,email:null,phone:null,upsell:!1,tags:t.tags.split(",")},comment:null},n=I(structuredClone(V)),r=m(!1),$=m([]),p=m([]),T=m([]);function i(d){let c=u["label"+dt(d)]||e[t.lang][d];return d==="privacy"?c.replace(/\[(.+)\]/,`<a href="${f.value}" target="_blank">$1</a>`):c}function B(){n.comment=null,n.contact.upsell=!1,s.value=!1,p.value=[]}function N(){var d;L(t.accountUrl,{...n,references:T.value},p.value,(d=t.defaultAssignees)==null?void 0:d.split(",")).then(()=>{r.value=!0,B(),setTimeout(()=>r.value=!1,t.submitTimeout)})}function O(){const d=t.references.split(",").filter(Boolean).map(c=>{const[o,S]=c.split(":");return{onModel:o,ref:S}});T.value=d}return J(()=>{t.projects!=="disable"&&(t.projects?t.projects.split(",").forEach(d=>p.value.push(d)):it(t.accountUrl).then(d=>$.value=d)),O()}),(d,c)=>(l(),v("form",{class:j(["kvass-contact",[{"kvass-contact--submitted":r.value},`kvass-contact--theme-${a.successTheme}`]]),onSubmit:R(N,["prevent"])},[a.successTheme==="overlay"&&r.value?(l(),v("div",ft,[k("div",{innerHTML:i("success")},null,8,kt)])):(l(),v(q,{key:1},[k("div",mt,[k("h2",pt,g(i("title")),1),i("subtitle")?(l(),v("p",bt,g(i("subtitle")),1)):y("",!0)]),k("div",ht,[b(h,{label:i("name"),type:"text",required:"",modelValue:n.contact.name,"onUpdate:modelValue":c[0]||(c[0]=o=>n.contact.name=o)},null,8,["label","modelValue"]),b(h,{label:i("email"),type:"email",pattern:"\\b[\\w\\.-]+@[\\w\\.-]+\\.\\w{2,4}",required:"",modelValue:n.contact.email,"onUpdate:modelValue":c[1]||(c[1]=o=>n.contact.email=o)},null,8,["label","modelValue"]),b(h,{label:i("phone"),type:"tel",modelValue:n.contact.phone,"onUpdate:modelValue":c[2]||(c[2]=o=>n.contact.phone=o)},null,8,["label","modelValue"]),a.projects?y("",!0):(l(),_(F,{key:0,label:i("projects")},{default:z(()=>[(l(!0),v(q,null,D($.value,o=>(l(),_(x,{key:o.id,state:o.id,label:o.name,checked:p.value.includes(o.id),modelValue:p.value,"onUpdate:modelValue":c[3]||(c[3]=S=>p.value=S)},null,8,["state","label","checked","modelValue"]))),128))]),_:1},8,["label"])),b(h,{label:i("message"),type:"textarea",rows:"5",class:"kvass-contact-field--full-width",modelValue:n.comment,"onUpdate:modelValue":c[4]||(c[4]=o=>n.comment=o)},null,8,["label","modelValue"]),a.upsell?(l(),_(x,{key:1,label:i("upsell"),class:"kvass-contact-field--full-width",checked:n.contact.upsell,modelValue:n.contact.upsell,"onUpdate:modelValue":c[5]||(c[5]=o=>n.contact.upsell=o)},null,8,["label","checked","modelValue"])):y("",!0),b(x,{label:i("privacy"),class:"kvass-contact-field--full-width",required:"",checked:s.value,modelValue:s.value,"onUpdate:modelValue":c[6]||(c[6]=o=>s.value=o)},null,8,["label","checked","modelValue"])]),k("button",{class:"kvass-contact__submit",type:"submit",disabled:r.value},g(r.value?i("success"):i("submit")),9,gt)],64))],42,vt))}},C=w(yt,[["styles",[ut]]]);C.styles=[...C.styles,...h.styles,...F.styles,...x.styles];customElements.define("kvass-contact",W(C));
|