@kvass/widgets 1.1.8 → 1.2.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/.github/workflows/semantic-release.yml +2 -0
- package/dist/Flatfinder-xVhUSkxC.js +15 -0
- package/dist/_plugin-vue_export-helper.js +17 -1
- package/dist/contact.js +8 -8
- package/dist/flatfinder.js +180 -0
- package/dist/img-comparison-slider.js +2 -2
- package/dist/map.js +2029 -0
- package/dist/project-portal.js +6 -6
- package/dist/vimeo.js +1 -1
- package/dist/youtube.js +1 -1
- package/index.html +6 -2
- package/package.json +5 -4
- package/src/flatfinder/README.md +58 -0
- package/src/flatfinder/components/Flatfinder.ce.vue +31 -0
- package/src/flatfinder/main.js +4 -0
- package/src/map/README.md +59 -0
- package/src/map/components/Map.ce.vue +49 -0
- package/src/map/main.js +4 -0
- package/vite.config.js +13 -0
- package/.husky/pre-commit +0 -4
package/dist/project-portal.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import{_ as j,x as f,e as
|
|
2
|
-
`,O={__name:"Category.ce",props:{value:{type:String,default:"development"},component:{type:String,default:"div"},active:{type:Boolean}},setup(e){const
|
|
3
|
-
`,D={key:0,class:"project-selector-card__header-category"},H={class:"project-selector-card__content"},P={class:"project-selector-card__content-name"},
|
|
4
|
-
`,X={class:"project-selector-category"},Y={__name:"CategorySelector.ce",props:{items:{type:Array,default:()=>[]},value:{type:String}},setup(e){return(
|
|
5
|
-
`,ee={class:"project-type-selector__trigger"},te=["value","onChange"],re={__name:"ProjectTypeSelector.ce",props:{items:{type:Array,default:()=>[]},value:{type:String}},setup(e){function
|
|
6
|
-
`,ce={key:0,class:"project-selector__navigation"},ae={key:2,class:"project-selector__no-result"},se={created(){this.fetch()}},le=Object.assign(se,{__name:"App.ce",props:{source:{type:String,default:"https://feature.kvass.no"},startCategory:{type:String,default:"all",enums:["all","sale","upcoming","development","sold"]},enabledCategories:{type:String,default:"all,sale,upcoming,development,sold"},theme:{type:String,enum:["default","tiles"],default:"default"},sortOn:{type:String,enum:["status","name"],default:"status"},disableNav:{type:Boolean,default:!1}},setup(e){const
|
|
1
|
+
import{_ as j,x as f,o as t,e as m,w as b,a as u,t as h,v,n as x,f as B,c as l,j as L,d as g,y as M,F as w,k as C,r as y,b as S,T as N,p as V}from"./_plugin-vue_export-helper.js";const E=`.category{padding:1rem 1.5rem;border:none;border-radius:var(--kvass-project-selector-border-radius, 3px);font-size:.9em;background-color:var(--kvass-project-selector-light-grey, #efefef)}.category:focus-visible{outline:2px solid var(--kvass-project-selector-primary, #0523a8);outline-offset:2px}.category--primary.category--active{background-color:var(--kvass-project-selector-primary, #0523a8)}.category--sale.category--active{background-color:var(--kvass-project-selector-sale, #2da71d)}.category--sold.category--active{background-color:var(--kvass-project-selector-sold, #cc3434)}.category--development.category--active{background-color:var(--kvass-project-selector-development, #3d495b)}.category--upcoming.category--active{background-color:var(--kvass-project-selector-upcoming, #e9b03d)}.category--default.category--active{background-color:var(--kvass-project-selector-default, )}.category--active{color:#fff}
|
|
2
|
+
`,O={__name:"Category.ce",props:{value:{type:String,default:"development"},component:{type:String,default:"div"},active:{type:Boolean}},setup(e){const o={sale:"sale",upcoming:"upcoming",development:"development",sold:"sold"},a={sale:"Til salgs",upcoming:"Kommer for salg",development:"Under utvikling",all:"Alle",sold:"Utsolgt"},r=e,c=f(()=>o[r.value]?o[r.value]:"default"),s=f(()=>a[r.value]);return(d,p)=>(t(),m(B(e.component),{class:x(["category",[`category--${v(c)}`,{"category--active":e.active}]])},{default:b(()=>[u("span",null,h(v(s)),1)]),_:1},8,["class"]))}},z=j(O,[["styles",[E]]]),U=`.project-selector-card{position:relative;font-family:var(--kvass-project-selector-secondary-font, inherit);display:flex;flex-direction:column;border-radius:var(--kvass-project-selector-border-radius, 3px);background-color:#fff;text-decoration:none;color:inherit;overflow:hidden}.project-selector-card__header{min-height:var(--kvass-project-selector-header-min-height, 250px);background-color:var(--kvass-project-selector-dark, #272727)}@media (max-width: 767px){.project-selector-card__header{min-height:var(--kvass-project-selector-header-min-height-resposive, 150px)}}.project-selector-card__header-category{position:absolute;background-color:var(--kvass-project-selector-secondary, #3d495b);z-index:11;color:#fff;left:var(--kvass-project-selector-card-status-gap, .5rem);top:var(--kvass-project-selector-card-status-gap, .5rem);border-radius:var(--kvass-project-selector-border-radius, 3px)}.project-selector-card__header-category .category{font-size:var(--kvass-project-selector-card-status-font-size, .8em);padding:var(--kvass-project-selector-card-status-padding-x, .5rem) var(--kvass-project-selector-card-status-padding-x, 1rem)}.project-selector-card__header-cover{width:100%;background-repeat:no-repeat;height:100%;background-size:cover;background-position:center;transition:transform .62s cubic-bezier(.05,.2,.1,1)}.project-selector-card__header-cover:hover{transform:scale(1.11);-webkit-transform:scale(1.11)}.project-selector-card__title{font-weight:700;line-height:1;margin:0}.project-selector-card__content{background-color:var(--kvass-project-selector-background-color, #efeded);border-top:none;text-align:left;display:flex;flex-direction:column;gap:.5rem;padding:calc(var(--kvass-project-selector-card-spacing, 2.5rem) - .5rem);height:100%}.project-selector-card__content-name{color:var(--kvass-project-selector-dark, #272727);margin:0!important}.project-selector-card__content-url{color:var(--kvass-project-selector-primary, #0523a8);font-size:1.1em;margin-top:auto;text-decoration:underline;text-decoration-color:var(--kvass-project-selector-primary, #0523a8);text-underline-offset:.3em;text-decoration-thickness:1px}.project-selector-card__content-url:hover{color:var(--kvass-project-selector-secondary, #3d495b)}.project-selector-card__content-city{font-size:1.2rem}.project-selector-card__content-location{display:flex;align-items:center;align-content:center;gap:1rem;color:var(--kvass-project-selector-secondary, #3d495b)}.project-selector-card__content-location svg{opacity:.5;height:.9rem}.project-selector-card__content-location svg path{color:currentColor}@media (max-width: 767px){.project-selector-card__content{gap:.5rem;padding:calc(var(--kvass-project-selector-card-spacing, 2.5rem) - .5rem) calc(var(--kvass-project-selector-card-spacing, 2.5rem) - 1rem)}}.project-selector--theme-tiles .project-selector-card{border-radius:var(--kvass-project-selector-border-radius, 0px)}.project-selector--theme-tiles .project-selector-card:hover .project-selector-card__content{background:rgba(0,0,0,.2)!important}.project-selector--theme-tiles .project-selector-card__header{min-height:var(--kvass-project-selector-header-min-height, 400px)}@media (max-width: 767px){.project-selector--theme-tiles .project-selector-card__header{min-height:var(--kvass-project-selector-header-min-height-resposive, 250px)}}.project-selector--theme-tiles .project-selector-card__content{font-size:1.5rem;height:unset!important;position:absolute;inset:0;z-index:10;pointer-events:none;background:rgba(0,0,0,.4)!important;transition:background .2s ease;display:grid!important;place-content:center}.project-selector--theme-tiles .project-selector-card__content>*{color:#fff!important;text-align:center}.project-selector--theme-tiles .project-selector-card__content-url{text-decoration-color:currentColor;font-size:.8em}.project-selector--theme-tiles .project-selector-card__content-location{justify-content:center;margin-bottom:1rem}.project-selector--theme-tiles .project-selector-card__content-location svg{display:none}.project-selector--theme-tiles .project-selector-card__content-intro{font-size:.8em}
|
|
3
|
+
`,D={key:0,class:"project-selector-card__header-category"},H={class:"project-selector-card__content"},P={class:"project-selector-card__content-name"},G={key:0,class:"project-selector-card__content-location"},K=u("svg",{"aria-hidden":"true",focusable:"false","data-prefix":"fas","data-icon":"map-pin",role:"img",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 288 512"},[u("path",{fill:"currentColor",d:"M112 316.94v156.69l22.02 33.02c4.75 7.12 15.22 7.12 19.97 0L176 473.63V316.94c-10.39 1.92-21.06 3.06-32 3.06s-21.61-1.14-32-3.06zM144 0C64.47 0 0 64.47 0 144s64.47 144 144 144 144-64.47 144-144S223.53 0 144 0zm0 76c-37.5 0-68 30.5-68 68 0 6.62-5.38 12-12 12s-12-5.38-12-12c0-50.73 41.28-92 92-92 6.62 0 12 5.38 12 12s-5.38 12-12 12z"})],-1),W={class:"project-selector-card__content-city"},q=["innerHTML"],J=["href"],Q={__name:"Card.ce",props:{item:{type:Object,default:()=>({})},theme:{type:String,default:"default",enums:["default","primary","flat"]},disableLabel:{type:Boolean,default:!1}},setup(e){const o=e,a=f(()=>c(o.item.media&&o.item.media.cover?o.item.media.cover:null)||c(o.item.media&&o.item.media.gallery?o.item.media.gallery:null)),r=f(()=>o.item.status);function c(s){if(!s||!s.length)return;let d=s.find(p=>p.type?p.type.startsWith("image"):p);if(d)return d.url}return(s,d)=>(t(),l("div",{class:x(["project-selector-card","project-selector-card--"+e.theme])},[(t(),m(B(e.item.url&&!["development"].includes(v(r))?"a":"div"),{class:"project-selector-card__header",href:e.item.url},{default:b(()=>[e.disableLabel?g("",!0):(t(),l("div",D,[L(z,{value:v(r),component:"div",active:""},null,8,["value"])])),u("div",{class:"project-selector-card__header-cover",style:M({backgroundImage:`url(${v(a)})`})},null,4)]),_:1},8,["href"])),u("div",H,[u("h2",P,h(e.item.name),1),e.item.address&&e.item.address.city?(t(),l("span",G,[K,u("span",W,h(e.item.address?e.item.address.city:""),1)])):g("",!0),u("div",{class:"project-selector-card__content-intro",innerHTML:e.item.intro},null,8,q),e.item.url&&!["development"].includes(v(r))?(t(),l("a",{key:1,class:"project-selector-card__content-url",href:e.item.url}," Se prosjektet",8,J)):g("",!0)])],2))}},T=j(Q,[["styles",[U]]]),R=`.project-selector-category__selector{cursor:pointer}@media (max-width: 767px){.project-selector-category__selector{width:100%}}.project-selector-category__selector:hover{box-shadow:inset 0 0 0 2em #4a4a4a33}
|
|
4
|
+
`,X={class:"project-selector-category"},Y={__name:"CategorySelector.ce",props:{items:{type:Array,default:()=>[]},value:{type:String}},setup(e){return(o,a)=>(t(),l("div",X,[(t(!0),l(w,null,C(e.items,(r,c)=>(t(),m(z,{key:c,class:"project-selector-category__selector",value:r,active:e.value==r,component:"button",onClick:s=>o.$emit("input",r)},null,8,["value","active","onClick"]))),128))]))}},F=j(Y,[["styles",[R]]]),Z=`.project-type-selector .elder-dropdown__content{z-index:11}.project-type-selector__trigger{appearance:none;padding:1rem 2rem;border:none;border-radius:var(--kvass-project-selector-border-radius, 3px);font-size:.9em;background-color:var(--kvass-project-selector-primary, #0523a8);color:#fff}.project-type-selector__trigger:-ms-expand{display:none}@media (max-width: 767px){.project-type-selector__trigger{width:100%}}.project-type-selector__dropdown-item{text-align:center!important;padding:.5rem 1.5rem;font-size:.9em}.project-type-selector__dropdown-item--selected{background-color:#8f8f8f66}.project-type-selector__dropdown-item:hover{background-color:#24242466}
|
|
5
|
+
`,ee={class:"project-type-selector__trigger"},te=["value","onChange"],re={__name:"ProjectTypeSelector.ce",props:{items:{type:Array,default:()=>[]},value:{type:String}},setup(e){function o(a){return a.charAt(0).toUpperCase()+a.substring(1)}return(a,r)=>(t(),l("select",ee,[(t(!0),l(w,null,C(e.items,(c,s)=>(t(),l("option",{key:s,value:c,onChange:d=>a.$emit("input",c),class:"project-type-selector__dropdown-item"},h(o(c==="none"?"Velg type":c)),41,te))),128))]))}},I=j(re,[["styles",[Z]]]),oe=`.project-selector__navigation{display:flex;justify-content:var(--kvass-project-selector-nav-position, center);padding:0 2rem 3rem;gap:1.5rem}@media (max-width: 767px){.project-selector__navigation{flex-direction:column-reverse;justify-content:center;gap:.5rem}}.project-selector__navigation-category{display:flex;justify-content:center;gap:1.5rem}@media (max-width: 767px){.project-selector__navigation-category{flex-direction:column;gap:.5rem;align-items:center}}.project-selector__card{position:relative;display:grid;grid-template-columns:repeat(var(--kvass-project-selector-grid-columns, 4),1fr);gap:var(--kvass-project-selector-grid-gap, 2rem)}@media (max-width: 767px){.project-selector__card{grid-template-columns:1fr;padding-top:2rem}}.project-selector__no-result{font-size:1.2em;text-align:center;display:flex;justify-content:center;align-items:center;min-height:200px;margin:2rem 0;background-color:var(--kvass-project-selector-light-grey, #efefef)}@media (max-width: 767px){.project-selector__no-result{min-height:100px}}.project-selector .list-leave-active{position:absolute}.project-selector .list-move,.project-selector .list-enter-active,.project-selector .list-leave-active{transition:all .5s ease}.project-selector .list-enter{transform:scale(.95)}.project-selector .list-enter,.project-selector .list-leave-to{opacity:0}.project-selector--theme-tiles .project-selector__card{grid-template-columns:repeat(var(--kvass-project-selector-grid-columns, 2),1fr);gap:var(--kvass-project-selector-grid-gap, 0rem)}@media (max-width: 767px){.project-selector--theme-tiles .project-selector__card{grid-template-columns:1fr;padding-top:2rem}}
|
|
6
|
+
`,ce={key:0,class:"project-selector__navigation"},ae={key:2,class:"project-selector__no-result"},se={created(){this.fetch()}},le=Object.assign(se,{__name:"App.ce",props:{source:{type:String,default:"https://feature.kvass.no"},startCategory:{type:String,default:"all",enums:["all","sale","upcoming","development","sold"]},enabledCategories:{type:String,default:"all,sale,upcoming,development,sold"},theme:{type:String,enum:["default","tiles"],default:"default"},sortOn:{type:String,enum:["status","name"],default:"status"},disableNav:{type:Boolean,default:!1}},setup(e){const o=e,a=y(""),r=y("none"),c=y([]);var s=[];y(null);const d=S(()=>[...o.enabledCategories.split(",").filter(n=>n==="all"?!0:s.find(i=>i.status.includes(n)))]),p=S(()=>{let n=["none"].concat(s.map(i=>{if(i.customFields&&i.customFields["project-type"])return i.customFields["project-type"]}));return[...new Set(n||[])].filter(Boolean)});function $(){c.value=s.filter(n=>a.value==="all"?!0:n.status.includes(a.value)).filter(n=>{if(!p.length||r.value==="none")return!0;if(!(!n.customFields||!n.customFields["project-type"]))return n.customFields["project-type"].includes(r.value)})}return(n,i)=>(t(),l("div",{class:x(["project-selector",`project-selector--theme-${e.theme}`])},[!e.disableNav||!d.value.length?(t(),l("div",ce,[d.value.length?(t(),m(F,{key:0,class:"project-selector__navigation-category",items:d.value,value:a.value,onInput:i[0]||(i[0]=_=>{a.value=_,$()})},null,8,["items","value"])):g("",!0),p.value.length>1?(t(),m(I,{key:1,class:"project-selector__navigation-project-type",items:p.value,value:r.value,onInput:i[1]||(i[1]=_=>{r.value=_.target.value,$()})},null,8,["items","value"])):g("",!0)])):g("",!0),c.value&&c.value.length?(t(),m(N,{key:1,tag:"div",name:"list",appear:"",class:"project-selector__card"},{default:b(()=>[(t(!0),l(w,null,C(c.value,(_,A)=>(t(),m(T,{"disable-label":e.disableNav,key:A,item:_,theme:"border"},null,8,["disable-label","item"]))),128))]),_:1})):(t(),l("div",ae,"Ingen resultater"))],2))}}),k=j(le,[["styles",[oe]]]);k.styles=[...k.styles,...T.styles,...z.styles,...F.styles,...I.styles];customElements.define("kvass-project-portal",V(k));
|
package/dist/vimeo.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as f,o,c as r,z as l,A as m,
|
|
1
|
+
import{_ as f,o,c as r,z as l,A as m,j as v,w as g,a as d,y as c,B as y,C as k,t as u,d as w,p as b}from"./_plugin-vue_export-helper.js";import{E as p,L as _,W as S}from"./index.js";const x=`.widget-kvass-media-render-vimeo{height:100%;width:100%;position:relative}.widget-kvass-media-render-vimeo iframe{height:100%;width:100%}.widget-kvass-media-render-vimeo>*{position:absolute;top:0;left:0;width:100%;height:100%}.widget-kvass-media-render-vimeo__thumbnail{background-size:cover;background-repeat:no-repeat;background-position:center;filter:blur(10px);opacity:.7}.widget-kvass-media-render-vimeo__blocked{display:flex;justify-content:center;align-items:center;left:50%;top:50%;transform:translate(-50%,-50%)}.widget-kvass-media-render-vimeo__blocked svg{opacity:.3}@media (max-width: 992px){.widget-kvass-media-render-vimeo__blocked svg{font-size:2.5em}}.widget-kvass-media-render-vimeo__blocked-warning{pointer-events:initial;position:absolute;bottom:0;text-align:center;background-color:#f2f2f2;font-size:.6em;bottom:3rem;left:3rem;max-width:400px;font-size:.8em;padding:1.5em 2em}.widget-kvass-media-render-vimeo__blocked-warning-button{padding:.5rem;border:1px solid #818181;backdrop-filter:none;background-color:transparent}@media (max-width: 992px){.widget-kvass-media-render-vimeo__blocked-warning{left:.5rem;bottom:.5rem;font-size:.6em;max-width:200px}}.widget-kvass-media-render-vimeo .fade-enter-active,.widget-kvass-media-render-vimeo .fade-leave-active{transition:opacity .5s}.widget-kvass-media-render-vimeo .fade-enter,.widget-kvass-media-render-vimeo .fade-leave-to{opacity:0}
|
|
2
2
|
`,B={props:{url:{type:String,default:""},videoState:{type:String,default:"ready",enums:["ready ","play","pause"]},loop:{type:[String,Boolean],default:!0},autoplay:{type:[String,Boolean],default:!1},controls:{type:[String,Boolean],default:!0},mute:{type:[String,Boolean],default:!1},displayThumbnail:{type:[String,Boolean],default:!0},ignoreConsent:{type:[String,Boolean],default:!1},hideConsent:{type:[String,Boolean],default:!1},thumbnailSource:{type:String,default:""},consentBlockMessage:{type:String,default:"The video is blocked due to lack of consent to cookies"},consentButtonLabel:{type:String,default:"Edit consents"},aspectRatio:{type:String,default:"16/9"}},watch:{videoState:{handler(e,t){if(e!==t)switch(e){case"play":return this.play();case"pause":return this.pause();default:return}}}},data(){return{ready:!1,thumbnail:null,consents:[]}},computed:{kvassDefined(){return typeof Kvass<"u"},showConsent(){return this.hideConsent||!this.kvassDefined?!1:!this.ignoreConsent&&!this.consents.includes("statistics")},videoId(){if(!this.url)return;let e=[p(this.url,/https\:\/\/(w{3}\.)?vimeo\.com\/(.+)\/?/,{group:2}),p(this.url,/https\:\/\/(w{3}\.)?player\.vimeo\.com\/(video\/)?(.+)\/?/,{group:3})].find(t=>!!t);if(e)return e.split("&")[0]}},methods:{openConsent(){this.kvassDefined&&Kvass.emit("consent:show")},async play(){try{this.player.setVolume(0),await this.player.play()}catch(e){console.log(e)}},pause(){this.player.pause()},async init(){const e={url:`https://vimeo.com/${this.videoId}`,loop:this.loop,autoplay:this.autoplay,controls:this.controls,muted:this.mute||this.autoplay,playsinline:1,dnt:1};function t(i){return i==="false"?!1:i==="true"?!0:i}Object.entries(e).map(([i,s])=>e[i]=t(s)),_("https://player.vimeo.com/api/player.js");const a=await S(()=>window.Vimeo,{limit:100});this.player=new a.Player(this.$refs.vimeoPlayer,e),await this.player.ready().then(()=>{this.ready=!0}).catch(i=>{console.log(i)})}},async mounted(){if(this.displayThumbnail&&(this.thumbnail=`/api/media/thumbnail?url=${this.url}`),this.ignoreConsent||!this.kvassDefined)return this.init();let e=t=>{if(this.consents=t||[],!(!this.consents||!this.consents.length)&&this.consents.includes("statistics"))return this.init()};this.kvassDefined&&(Kvass.emit("consent:get",t=>e(t)),Kvass.on("consent:change",e))}},C={key:0,class:"widget-kvass-media-render-vimeo__blocked"},z={class:"widget-kvass-media-render-vimeo__blocked-warning"};function D(e,t,a,i,s,n){return o(),r("div",{class:"widget-kvass-media-render-vimeo",style:c(`aspect-ratio: ${a.aspectRatio};`)},[l((o(),r("div",{key:n.videoId,ref:"vimeoPlayer",class:"widget-kvass-media-render-vimeo__embed",frameborder:"0",allow:"autoplay; fullscreen;",webkitallowfullscreen:"",mozallowfullscreen:""})),[[m,s.ready]]),v(y,{name:"fade",mode:"in-out"},{default:g(()=>[l(d("div",{class:"widget-kvass-media-render-vimeo__thumbnail",style:c({backgroundImage:`url(${s.thumbnail})`})},null,4),[[m,!s.ready&&s.thumbnail]])]),_:1}),n.showConsent?(o(),r("div",C,[d("div",z,[k(u(a.consentBlockMessage)+" ",1),d("button",{class:"widget-kvass-media-render-vimeo__blocked-warning-button",onClick:t[0]||(t[0]=(...h)=>n.openConsent&&n.openConsent(...h))},u(a.consentButtonLabel),1)])])):w("",!0)],4)}const V=f(B,[["render",D],["styles",[x]]]);customElements.define("kvass-vimeo",b(V));
|
package/dist/youtube.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as p,o as d,c as u,a as i,
|
|
1
|
+
import{_ as p,o as d,c as u,a as i,j as h,w as y,z as f,y as l,A as b,B as g,C as w,t as c,d as v,p as k}from"./_plugin-vue_export-helper.js";import{E as a,L as _,W as S}from"./index.js";const B=`.widget-kvass-media-render-youtube{height:100%;width:100%;position:relative}.widget-kvass-media-render-youtube iframe{height:100%;width:100%}.widget-kvass-media-render-youtube>*{position:absolute;top:0;left:0;width:100%;height:100%}.widget-kvass-media-render-youtube__thumbnail{background-size:cover;background-repeat:no-repeat;background-position:center;filter:blur(10px);opacity:.7}.widget-kvass-media-render-youtube__blocked{display:flex;justify-content:center;align-items:center;left:50%;top:50%;transform:translate(-50%,-50%)}.widget-kvass-media-render-youtube__blocked svg{opacity:.3}@media (max-width: 992px){.widget-kvass-media-render-youtube__blocked svg{font-size:2.5em}}.widget-kvass-media-render-youtube__blocked-warning{pointer-events:initial;position:absolute;bottom:0;text-align:center;background-color:#f2f2f2;font-size:.6em;bottom:3rem;left:3rem;max-width:400px;font-size:.8em;padding:1.5em 2em}.widget-kvass-media-render-youtube__blocked-warning-button{padding:.5rem;border:1px solid #818181;backdrop-filter:none;background-color:transparent}@media (max-width: 992px){.widget-kvass-media-render-youtube__blocked-warning{left:.5rem;bottom:.5rem;font-size:.6em;max-width:200px}}.widget-kvass-media-render-youtube .fade-enter-active,.widget-kvass-media-render-youtube .fade-leave-active{transition:opacity .5s}.widget-kvass-media-render-youtube .fade-enter,.widget-kvass-media-render-youtube .fade-leave-to{opacity:0}
|
|
2
2
|
`,x={props:{url:{type:String,default:""},videoState:{type:String,default:"ready",enums:["ready ","play","pause"]},loop:{type:[String,Boolean],default:!0},autoplay:{type:[String,Boolean],default:!1},controls:{type:[String,Boolean],default:!0},mute:{type:[String,Boolean],default:!1},displayThumbnail:{type:[String,Boolean],default:!0},ignoreConsent:{type:[String,Boolean],default:!1},hideConsent:{type:[String,Boolean],default:!1},thumbnailSource:{type:String,default:""},consentBlockMessage:{type:String,default:"The video is blocked due to lack of consent to cookies"},consentButtonLabel:{type:String,default:"Edit consents"},aspectRatio:{type:String,default:"16/9"}},watch:{videoState:{handler(e,t){if(e!==t)switch(e){case"play":return this.play();case"pause":return this.pause();default:return}}}},data(){return{ready:!1,thumbnail:null,consents:[]}},computed:{kvassDefined(){return typeof Kvass<"u"},showConsent(){return this.hideConsent||!this.kvassDefined?!1:!this.ignoreConsent&&!this.consents.includes("statistics")},videoId(){if(!this.url)return;let e=this.url,t=[a(e,/https\:\/\/(w{3}\.)?youtube\.com\/watch\?v=(.+)\/?/,{group:2}),a(e,/https\:\/\/(w{3}\.)?youtube\.com\/embed\/(.+)\/?/,{group:2}),a(e,/https\:\/\/(w{3}\.)?youtube\.com\/watch\/(.+)\/?/,{group:2}),a(e,/https\:\/\/(w{3}\.)?youtu\.be\/(.+)\/?/,{group:2})].find(s=>!!s);if(t)return t.split("&")[0]}},methods:{openConsent(){this.kvassDefined&&Kvass.emit("consent:show")},play(){this.player.mute(),this.player.playVideo()},pause(){this.player.pauseVideo()},async init(){const e={loop:this.loop,autoplay:this.autoplay,controls:this.controls,muted:this.mute||this.autoplay,enablejsapi:1,playsinline:1};function t(s){return s==="false"?!1:s==="true"?!0:s}Object.entries(e).map(([s,r])=>e[s]=Number(t(r))),_("https://www.youtube.com/iframe_api"),await S(()=>window.YT&&window.YT.Player,{limit:200}),this.player=new YT.Player(this.$refs.youtubePlayer,{videoId:this.videoId,playerVars:{...e,videoId:this.videoId,origin:window.location.host},events:{onReady:s=>{this.ready=!0,e.mute&&this.player.mute(),e.autoplay&&this.play()}}})}},async mounted(){if(this.displayThumbnail&&(this.thumbnail=!this.thumbnailSource&&this.kvassDefined?`/api/media/thumbnail?url=${this.url}`:this.thumbnailSource),this.ignoreConsent||!this.kvassDefined)return this.init();let e=t=>{if(this.consents=t||[],!(!this.consents||!this.consents.length)&&this.consents.includes("statistics"))return this.init()};this.kvassDefined&&(Kvass.emit("consent:get",t=>e(t)),Kvass.on("consent:change",e))}},C={ref:"youtubePlayer",class:"kvass-media-render-youtube__embed",frameborder:"0",allow:"autoplay; fullscreen;",webkitallowfullscreen:"",mozallowfullscreen:""},T={key:0,class:"widget-kvass-media-render-youtube__blocked"},z={class:"widget-kvass-media-render-youtube__blocked-warning"};function D(e,t,s,r,n,o){return d(),u("div",{class:"widget-kvass-media-render-youtube",style:l(`aspect-ratio: ${s.aspectRatio};`)},[i("div",C,null,512),h(g,{name:"fade",mode:"in-out"},{default:y(()=>[f(i("div",{class:"widget-kvass-media-render-youtube__thumbnail",style:l({backgroundImage:`url(${n.thumbnail})`})},null,4),[[b,!n.ready&&n.thumbnail]])]),_:1}),o.showConsent?(d(),u("div",T,[i("div",z,[w(c(s.consentBlockMessage)+" ",1),i("button",{class:"widget-kvass-media-render-youtube__blocked-warning-button",onClick:t[0]||(t[0]=(...m)=>o.openConsent&&o.openConsent(...m))},c(s.consentButtonLabel),1)])])):v("",!0)],4)}const E=p(x,[["render",D],["styles",[B]]]);customElements.define("kvass-youtube",k(E));
|
package/index.html
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
<meta charset="UTF-8" />
|
|
5
5
|
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
-
<title>Kvass
|
|
7
|
+
<title>Kvass Web Components</title>
|
|
8
8
|
</head>
|
|
9
9
|
|
|
10
10
|
<body>
|
|
@@ -21,9 +21,13 @@
|
|
|
21
21
|
|
|
22
22
|
<!-- <kvass-img-comparison-slider
|
|
23
23
|
first-image="https://assets.lastdodo.com/image/ld_medium/plain/assets/catalog/assets/2013/12/2/2/8/7/pdf_287e8674-5b0f-11e3-90d5-a6d2687aed80.jpg,First image"
|
|
24
|
-
second-image="https://seeklogo.com/images/I/Ilguciema_Kvass-logo-227537F6D4-seeklogo.com.png,Second
|
|
24
|
+
second-image="https://seeklogo.com/images/I/Ilguciema_Kvass-logo-227537F6D4-seeklogo.com.png,Second imanr bge"
|
|
25
25
|
options="keyboard:disabled,direction:vertical"></kvass-img-comparison-slider>
|
|
26
26
|
|
|
27
27
|
<script type="module" src="/src/img-comparison-slider/main.js"></script> -->
|
|
28
|
+
<!-- <kvass-map coordinates="10.745,59.9123" address="Klokkergårdveien 5, 1711 Sarpsborg" show-address /> -->
|
|
29
|
+
<!-- <kvass-flatfinder project-url="https://alvebergtunet.production.kvass.no" project-id="65a4f48ed1ba5cd61468f235"
|
|
30
|
+
path-prefix="/residential" />
|
|
31
|
+
<script type="module" src="/dist/flatfinder.js"></script> -->
|
|
28
32
|
</body>
|
|
29
33
|
</html>
|
package/package.json
CHANGED
|
@@ -1,20 +1,21 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kvass/widgets",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.2.2",
|
|
4
|
+
"type": "module",
|
|
4
5
|
"scripts": {
|
|
5
6
|
"dev": "vite",
|
|
6
7
|
"build": "vite build",
|
|
7
|
-
"preview": "vite preview"
|
|
8
|
-
"prepare": "husky install"
|
|
8
|
+
"preview": "vite preview"
|
|
9
9
|
},
|
|
10
10
|
"dependencies": {
|
|
11
11
|
"@img-comparison-slider/vue": "^8.0.0",
|
|
12
|
+
"@kvass/map": "^1.0.3",
|
|
13
|
+
"@kvass/vue3-flatfinder": "^1.0.12",
|
|
12
14
|
"vue": "^3.2.47"
|
|
13
15
|
},
|
|
14
16
|
"devDependencies": {
|
|
15
17
|
"@vitejs/plugin-vue": "^4.1.0",
|
|
16
18
|
"dotenv-cli": "^7.1.0",
|
|
17
|
-
"husky": "^8.0.3",
|
|
18
19
|
"sass": "^1.59.3",
|
|
19
20
|
"vite": "^4.2.1"
|
|
20
21
|
},
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
# kvass-flatfinder
|
|
2
|
+
|
|
3
|
+
A simple, embeddable Web Component for navigating Kvass projects.
|
|
4
|
+
|
|
5
|
+
`https://unpkg.com/@kvass/widgets@latest/dist/flatfinder.js`
|
|
6
|
+
|
|
7
|
+
## Develop
|
|
8
|
+
|
|
9
|
+
To run in development mode, first install the neccessary packages.
|
|
10
|
+
|
|
11
|
+
```
|
|
12
|
+
npm install
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
Then, run in development mode.
|
|
16
|
+
|
|
17
|
+
```
|
|
18
|
+
npm run dev
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
Open `localhost:3000` in the browser of your choice, and you will see the form widget.
|
|
22
|
+
|
|
23
|
+
## Build
|
|
24
|
+
|
|
25
|
+
To build the widget for production, run `build` instead of `dev`.
|
|
26
|
+
|
|
27
|
+
```
|
|
28
|
+
npm run build
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
To use the widget, use the `<kvass-flatfinder />` element as shown here.
|
|
32
|
+
|
|
33
|
+
```html
|
|
34
|
+
<kvass-flatfinder
|
|
35
|
+
project-url="https://example.kvass.no"
|
|
36
|
+
project-id="88eda909-9a78-4c2a-8fe3-bc263c283984"
|
|
37
|
+
path-prefix="/residential"
|
|
38
|
+
/>
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
## Props
|
|
42
|
+
|
|
43
|
+
The component has several props for easy configuration.
|
|
44
|
+
|
|
45
|
+
| Name | Type | Description | Default |
|
|
46
|
+
| :--------------------- | :----- | :----------------------------------------------------------- | :------ |
|
|
47
|
+
| project-url `required` | String | Project URL where data will be fetched from. | |
|
|
48
|
+
| project-id `required` | String | The ID of the project specified in the `project-url` prop | |
|
|
49
|
+
| path-prefix | String | The prefix in the url path for each property when navigating | |
|
|
50
|
+
|
|
51
|
+
## Styling
|
|
52
|
+
|
|
53
|
+
The widget's styles are based on CSS custom properties, and can be overwritten.
|
|
54
|
+
These are the available CSS variables.
|
|
55
|
+
|
|
56
|
+
| Name | Description | Default |
|
|
57
|
+
| :---------------------------- | :-------------------------- | :-------- |
|
|
58
|
+
| --kvass-flatfinder-background | The form's background color | `#ffffff` |
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
import { Flatfinder as FlatfinderComponent } from '@kvass/vue3-flatfinder'
|
|
3
|
+
|
|
4
|
+
const props = defineProps({
|
|
5
|
+
projectUrl: {
|
|
6
|
+
type: String,
|
|
7
|
+
required: true,
|
|
8
|
+
},
|
|
9
|
+
projectId: {
|
|
10
|
+
type: String,
|
|
11
|
+
required: true,
|
|
12
|
+
},
|
|
13
|
+
pathPrefix: {
|
|
14
|
+
type: String,
|
|
15
|
+
default: '',
|
|
16
|
+
},
|
|
17
|
+
})
|
|
18
|
+
</script>
|
|
19
|
+
|
|
20
|
+
<template>
|
|
21
|
+
<FlatfinderComponent
|
|
22
|
+
class="kvass-flatfinder"
|
|
23
|
+
:project-url="projectUrl"
|
|
24
|
+
:project-id="projectId"
|
|
25
|
+
:path-prefix="pathPrefix"
|
|
26
|
+
/>
|
|
27
|
+
</template>
|
|
28
|
+
|
|
29
|
+
<style>
|
|
30
|
+
@import url('@kvass/vue3-flatfinder/style.css');
|
|
31
|
+
</style>
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
# kvass-map
|
|
2
|
+
|
|
3
|
+
A simple, embeddable Web Component for maps.
|
|
4
|
+
|
|
5
|
+
`https://unpkg.com/@kvass/widgets@latest/dist/map.js`
|
|
6
|
+
|
|
7
|
+
## Develop
|
|
8
|
+
|
|
9
|
+
To run in development mode, first install the neccessary packages.
|
|
10
|
+
|
|
11
|
+
```
|
|
12
|
+
npm install
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
Then, run in development mode.
|
|
16
|
+
|
|
17
|
+
```
|
|
18
|
+
npm run dev
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
Open `localhost:3000` in the browser of your choice, and you will see the form widget.
|
|
22
|
+
|
|
23
|
+
## Build
|
|
24
|
+
|
|
25
|
+
To build the widget for production, run `build` instead of `dev`.
|
|
26
|
+
|
|
27
|
+
```
|
|
28
|
+
npm run build
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
To use the widget, use the `<kvass-map />` element as shown here.
|
|
32
|
+
|
|
33
|
+
```html
|
|
34
|
+
<kvass-map coordinates="10.745,59.9123" />
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
## Props
|
|
38
|
+
|
|
39
|
+
The component has several props for easy configuration.
|
|
40
|
+
|
|
41
|
+
| Name | Type | Description | Default |
|
|
42
|
+
| :--------------------- | :------ | :-------------------------------------------------------------------------------------- | :------ |
|
|
43
|
+
| coordinates `required` | String | The coordinates for the main marker. | |
|
|
44
|
+
| markers | String | A list of markers formatted in `lon,lat`. Each marker is separated with `;` | |
|
|
45
|
+
| address | String | The address as a formatted string. This will be visible if `show-address` prop is true. | |
|
|
46
|
+
| show-address | Boolean | Show a panel with the formatted address string. | |
|
|
47
|
+
|
|
48
|
+
## Styling
|
|
49
|
+
|
|
50
|
+
The widget's styles are based on CSS custom properties, and can be overwritten.
|
|
51
|
+
These are the available CSS variables.
|
|
52
|
+
|
|
53
|
+
| Name | Description | Default |
|
|
54
|
+
| :----------------------------- | :---------------------------------------- | :------------------------ |
|
|
55
|
+
| --kvass-map-background | The map's background color | `rgb(0 0 0 / 0.2)` |
|
|
56
|
+
| --kvass-map-address-padding-x | The inline padding of the address panel | `0.5rem` |
|
|
57
|
+
| --kvass-map-address-padding-y | The block padding of the address panel | `1rem` |
|
|
58
|
+
| --kvass-map-address-background | The background color of the address panel | `rgb(0 0 0 / 0.2)` |
|
|
59
|
+
| --kvass-map-address-color | The text color of the address panel | `rgb(255 255 255 / 0.75)` |
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
import { Map as MapComponent } from '@kvass/map'
|
|
3
|
+
import { computed } from 'vue'
|
|
4
|
+
|
|
5
|
+
const props = defineProps({
|
|
6
|
+
/**
|
|
7
|
+
* The coordinates in the format of 'latitude,longitude'
|
|
8
|
+
*/
|
|
9
|
+
coordinates: {
|
|
10
|
+
type: String,
|
|
11
|
+
required: true,
|
|
12
|
+
},
|
|
13
|
+
|
|
14
|
+
/**
|
|
15
|
+
* Coordinates for additional map markers in the format of 'latitude,longitude;latitude,longitude'
|
|
16
|
+
*/
|
|
17
|
+
markers: {
|
|
18
|
+
type: String,
|
|
19
|
+
},
|
|
20
|
+
|
|
21
|
+
/**
|
|
22
|
+
* The map zoom level. Lower is more zoomed out
|
|
23
|
+
*/
|
|
24
|
+
zoom: {
|
|
25
|
+
type: String,
|
|
26
|
+
default: '8',
|
|
27
|
+
validator(value) {
|
|
28
|
+
return typeof parseInt(value) === 'number'
|
|
29
|
+
},
|
|
30
|
+
},
|
|
31
|
+
})
|
|
32
|
+
|
|
33
|
+
const coordinatesComp = computed(() => props.coordinates.split(','))
|
|
34
|
+
const markersComp = computed(() =>
|
|
35
|
+
props.markers?.split(';').map((m) => m.split(',')),
|
|
36
|
+
)
|
|
37
|
+
</script>
|
|
38
|
+
|
|
39
|
+
<template>
|
|
40
|
+
<MapComponent
|
|
41
|
+
:coordinates="coordinatesComp"
|
|
42
|
+
:zoom="parseInt(props.zoom)"
|
|
43
|
+
:markers="markersComp"
|
|
44
|
+
/>
|
|
45
|
+
</template>
|
|
46
|
+
|
|
47
|
+
<style>
|
|
48
|
+
@import url('@kvass/map/style.css');
|
|
49
|
+
</style>
|
package/src/map/main.js
ADDED
package/vite.config.js
CHANGED
|
@@ -5,7 +5,16 @@ import { defineConfig } from 'vite'
|
|
|
5
5
|
// https://vitejs.dev/config/
|
|
6
6
|
export default defineConfig({
|
|
7
7
|
plugins: [vue({ customElement: true })],
|
|
8
|
+
optimizeDeps: {
|
|
9
|
+
include: ['@kvass/vue3-flatfinder'],
|
|
10
|
+
esbuildOptions: {
|
|
11
|
+
supported: {
|
|
12
|
+
'top-level-await': true,
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
},
|
|
8
16
|
build: {
|
|
17
|
+
target: 'esnext',
|
|
9
18
|
rollupOptions: {
|
|
10
19
|
output: {
|
|
11
20
|
manualChunks: false,
|
|
@@ -27,6 +36,10 @@ export default defineConfig({
|
|
|
27
36
|
youtube: fileURLToPath(
|
|
28
37
|
new URL('./src/youtube/main.js', import.meta.url),
|
|
29
38
|
),
|
|
39
|
+
map: fileURLToPath(new URL('./src/map/main.js', import.meta.url)),
|
|
40
|
+
flatfinder: fileURLToPath(
|
|
41
|
+
new URL('./src/flatfinder/main.js', import.meta.url),
|
|
42
|
+
)
|
|
30
43
|
},
|
|
31
44
|
},
|
|
32
45
|
},
|
package/.husky/pre-commit
DELETED