@kvass/widgets 1.0.17 → 1.0.18
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 +1 -1
- package/index.html +0 -18
- package/package.json +1 -1
- package/src/contact/components/Form.ce.vue +6 -17
package/dist/contact.js
CHANGED
|
@@ -21,5 +21,5 @@ function As(e,t){const s=Object.create(null),n=e.split(",");for(let r=0;r<n.leng
|
|
|
21
21
|
isPublished
|
|
22
22
|
}
|
|
23
23
|
}
|
|
24
|
-
`})}).then(t=>t.json()).then(t=>t.data.Projects.filter(s=>s.isPublished))}const Si=e=>e.charAt(0).toUpperCase()+e.substring(1);var $i=`.kvass-contact{--kvass-contact-default-background: #
|
|
24
|
+
`})}).then(t=>t.json()).then(t=>t.data.Projects.filter(s=>s.isPublished))}const Si=e=>e.charAt(0).toUpperCase()+e.substring(1);var $i=`.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-spacing, var(--kvass-contact-default-spacing));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
|
`;const Ni=["onSubmit"],ji={key:0,class:"kvass-contact__success--overlay"},Ri=["innerHTML"],Li={class:"kvass-contact__header"},Ui={class:"kvass-contact__title"},Hi={key:0,class:"kvass-contact__subtitle"},Bi={class:"kvass-contact__fields"},Ki=["disabled"],Di={__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(e){const t=e,s={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 \xF8nsker informasjon om lignende prosjekter",privacy:"Jeg \xF8nsker \xE5 bli kontaktet i samtykke med [personvernerkl\xE6ringen]",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"}},n=Bl(),r=We(!1),o=Zs(()=>t.privacyUrl?t.privacyUrl:`${t.accountUrl}/api/legal/privacy/tenant`),l={contact:{name:null,email:null,phone:null,upsell:!1,tags:t.tags.split(",")},comment:null},i=Xt(structuredClone(l)),a=We(!1),u=We([]),h=We([]),y=We([]);function b(N){let O=n["label"+Si(N)]||s[t.lang][N];return N==="privacy"?O.replace(/\[(.+)\]/,`<a href="${o.value}" target="_blank">$1</a>`):O}function P(){i.comment=null,i.contact.upsell=!1,r.value=!1,h.value=[]}function R(){var N;Ur(t.accountUrl,{...i,references:y.value},h.value,(N=t.defaultAssignees)==null?void 0:N.split(",")).then(()=>{a.value=!0,P(),setTimeout(()=>a.value=!1,t.submitTimeout)})}function T(){const N=t.references.split(",").filter(Boolean).map(O=>{const[L,F]=O.split(":");return{onModel:L,ref:F}});y.value=N}return qs(()=>{t.projects!=="disable"&&(t.projects?t.projects.split(",").forEach(N=>h.value.push(N)):Ii(t.accountUrl).then(N=>u.value=N)),T()}),(N,O)=>(ee(),Pe("form",{class:ft(["kvass-contact",[{"kvass-contact--submitted":a.value},`kvass-contact--theme-${e.successTheme}`]]),onSubmit:pi(R,["prevent"])},[e.successTheme==="overlay"&&a.value?(ee(),Pe("div",ji,[Ie("div",{innerHTML:b("success")},null,8,Ri)])):(ee(),Pe(ce,{key:1},[Ie("div",Li,[Ie("h2",Ui,vt(b("title")),1),b("subtitle")?(ee(),Pe("p",Hi,vt(b("subtitle")),1)):yt("",!0)]),Ie("div",Bi,[se(mt,{label:b("name"),type:"text",required:"",modelValue:i.contact.name,"onUpdate:modelValue":O[0]||(O[0]=L=>i.contact.name=L)},null,8,["label","modelValue"]),se(mt,{label:b("email"),type:"email",pattern:"\\b[\\w\\.-]+@[\\w\\.-]+\\.\\w{2,4}",required:"",modelValue:i.contact.email,"onUpdate:modelValue":O[1]||(O[1]=L=>i.contact.email=L)},null,8,["label","modelValue"]),se(mt,{label:b("phone"),type:"tel",modelValue:i.contact.phone,"onUpdate:modelValue":O[2]||(O[2]=L=>i.contact.phone=L)},null,8,["label","modelValue"]),e.projects?yt("",!0):(ee(),it(Lr,{key:0,label:b("projects")},{default:Vs(()=>[(ee(!0),Pe(ce,null,ul(u.value,L=>(ee(),it(Ut,{key:L.id,state:L.id,label:L.name,checked:h.value.includes(L.id),modelValue:h.value,"onUpdate:modelValue":O[3]||(O[3]=F=>h.value=F)},null,8,["state","label","checked","modelValue"]))),128))]),_:1},8,["label"])),se(mt,{label:b("message"),type:"textarea",rows:"5",class:"kvass-contact-field--full-width",modelValue:i.comment,"onUpdate:modelValue":O[4]||(O[4]=L=>i.comment=L)},null,8,["label","modelValue"]),e.upsell?(ee(),it(Ut,{key:1,label:b("upsell"),class:"kvass-contact-field--full-width",checked:i.contact.upsell,modelValue:i.contact.upsell,"onUpdate:modelValue":O[5]||(O[5]=L=>i.contact.upsell=L)},null,8,["label","checked","modelValue"])):yt("",!0),se(Ut,{label:b("privacy"),class:"kvass-contact-field--full-width",required:"",checked:r.value,modelValue:r.value,"onUpdate:modelValue":O[6]||(O[6]=L=>r.value=L)},null,8,["label","checked","modelValue"])]),Ie("button",{class:"kvass-contact__submit",type:"submit",disabled:a.value},vt(a.value?b("success"):b("submit")),9,Ki)],64))],42,Ni))}};var Ps=ns(Di,[["styles",[$i]]]);Ps.styles=[...Ps.styles,...mt.styles,...Lr.styles,...Ut.styles];customElements.define("kvass-contact",ai(Ps));
|
package/index.html
CHANGED
|
@@ -6,22 +6,4 @@
|
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
7
|
<title>Kvass Lead Form</title>
|
|
8
8
|
</head>
|
|
9
|
-
|
|
10
|
-
<body>
|
|
11
|
-
<div style="display: flex">
|
|
12
|
-
<kvass-contact
|
|
13
|
-
account-url="https://staging.kvass.no"
|
|
14
|
-
label-subtitle="Ønsker du å motta vårt nyhetsbrev?"
|
|
15
|
-
tags="Test side"
|
|
16
|
-
upsell
|
|
17
|
-
references="Residential:630f5c19ffd25600331dcd05"
|
|
18
|
-
default-assignees="630f5c19ffd25600331dcc06,627181d6009b8f0022b09ac8"
|
|
19
|
-
/>
|
|
20
|
-
<div>
|
|
21
|
-
<h1>hello</h1>
|
|
22
|
-
</div>
|
|
23
|
-
</div>
|
|
24
|
-
|
|
25
|
-
<script type="module" src="/src/contact/main.js"></script>
|
|
26
|
-
</body>
|
|
27
9
|
</html>
|
package/package.json
CHANGED
|
@@ -246,19 +246,19 @@ onMounted(() => {
|
|
|
246
246
|
.kvass-contact {
|
|
247
247
|
// default variables
|
|
248
248
|
|
|
249
|
-
--kvass-contact-default-background: #
|
|
250
|
-
--kvass-contact-default-spacing:
|
|
249
|
+
--kvass-contact-default-background: #ffffff;
|
|
250
|
+
--kvass-contact-default-spacing: 2rem;
|
|
251
251
|
--kvass-contact-default-border-radius: 4px;
|
|
252
252
|
--kvass-contact-default-border-color: #eaeaea;
|
|
253
|
-
--kvass-contact-default-border-width:
|
|
253
|
+
--kvass-contact-default-border-width: 1px;
|
|
254
254
|
--kvass-contact-default-color: #222222;
|
|
255
|
-
--kvass-contact-default-color-inverted: #
|
|
255
|
+
--kvass-contact-default-color-inverted: #ffffff;
|
|
256
256
|
--kvass-contact-default-max-width: 720px;
|
|
257
257
|
--kvass-contact-default-primary: #1d56d8;
|
|
258
258
|
--kvass-contact-default-error: #d81d1d;
|
|
259
259
|
--kvass-contact-default-grid-columns: 1;
|
|
260
260
|
--kvass-contact-default-disabled: #eaeaea;
|
|
261
|
-
--kvass-contact-default-input-background: #
|
|
261
|
+
--kvass-contact-default-input-background: #ffffff;
|
|
262
262
|
--kvass-contact-default-outline-width: 2px;
|
|
263
263
|
--kvass-contact-default-outline-offset: 0px;
|
|
264
264
|
--kvass-contact-default-checkbox-size: 1em;
|
|
@@ -266,22 +266,11 @@ onMounted(() => {
|
|
|
266
266
|
--kvass-contact-default-checkbox-border-width: var(
|
|
267
267
|
--kvass-contact-default-border-width
|
|
268
268
|
);
|
|
269
|
+
|
|
269
270
|
--kvass-contact-default-checkbox-border-radius: var(
|
|
270
271
|
--kvass-contact-default-border-radius
|
|
271
272
|
);
|
|
272
273
|
|
|
273
|
-
--kvass-contact-border-radius: 20px;
|
|
274
|
-
|
|
275
|
-
--kvass-contact-border-width: 0;
|
|
276
|
-
--kvass-contact-checkbox-border-width: 0;
|
|
277
|
-
--kvass-contact-max-width: 440px;
|
|
278
|
-
--kvass-contact-label-transform: 10px;
|
|
279
|
-
--kvass-contact-form-spacing: 0rem;
|
|
280
|
-
--kvass-contact-spacing: 1.3rem;
|
|
281
|
-
--kvass-contact-field-input-tranform: 10px;
|
|
282
|
-
--kvass-contact-label-weight: bold;
|
|
283
|
-
--kvass-contact-success-label-font-size: 1.2em;
|
|
284
|
-
|
|
285
274
|
background-color: var(
|
|
286
275
|
--kvass-contact-background,
|
|
287
276
|
var(--kvass-contact-default-background)
|