https://telex.hu/_nuxt/JDyntRP9.js

1import{E as a,G as s,H as h,e as d}from"./DikjsCuG.js";var c=Object.assign,p=a({name:"VueHorizontal",data:()=>({left:0,width:0,scrollWidth:0,hasPrev:!1,hasNext:!1,debounceId:void 0}),props:{button:{type:Boolean,default:()=>!0},buttonBetween:{type:Boolean,default:()=>!0},scroll:{type:Boolean,default:()=>!1},displacement:{type:Number,default:()=>1},snap:{type:String,default:()=>"start"}},mounted(){this.onScrollDebounce()},beforeDestroy(){clearTimeout(this.debounceId)},methods:{children(){return this.$refs.container.children},findPrevSlot(l){const t=this.children();for(let e=0;e<t.length;e++){const o=t[e].getBoundingClientRect();if(o.left<=l&&l<=o.right||l<=o.left)return t[e]}},findNextSlot(l){const t=this.children();for(let e=0;e<t.length;e++){const o=t[e].getBoundingClientRect();if(!(o.right<=l)&&(o.left<=l||l<=o.left))return t[e]}},prev(l){l.stopPropagation(),this.$emit("prev");const t=this.$refs.container,e=t.getBoundingClientRect().left,o=e+t.clientWidth*-this.displacement-2.5,n=this.findPrevSlot(o);if(n){const r=n.getBoundingClientRect().left-e;return void this.scrollToLeft(t.scrollLeft+r)}const i=t.clientWidth*this.displacement;this.scrollToLeft(t.scrollLeft-i)},next(l){l.stopPropagation(),this.$emit("next");const t=this.$refs.container,e=t.getBoundingClientRect().left,o=e+t.clientWidth*this.displacement+2.5,n=this.findNextSlot(o);if(n){const r=n.getBoundingClientRect().left-e;if(r>2.5)return void this.scrollToLeft(t.scrollLeft+r)}const i=t.clientWidth*this.displacement;this.scrollToLeft(t.scrollLeft+i)},scrollToIndex(l){const t=this.children();if(t[l]){const e=this.$refs.container,o=t[l].getBoundingClientRect().left-e.getBoundingClientRect().left;this.scrollToLeft(e.scrollLeft+o)}},scrollToLeft(l,t="smooth"){this.$refs.container.scrollTo({left:l,behavior:t})},onScroll(){const l=this.$refs.container;l&&(this.$emit("scroll",{left:l.scrollLeft}),clearTimeout(this.debounceId),this.debounceId=setTimeout(this.onScrollDebounce,100))},onScrollDebounce(){return this.refresh((l=>{this.$emit("scroll-debounce",l)}))},refresh(l){return h((()=>{const t=this.calculate();this.left=t.left,this.width=t.width,this.scrollWidth=t.scrollWidth,this.hasNext=t.hasNext,this.hasPrev=t.hasPrev,l?.(t)}))},calculate(){const l=this.$refs.container,t=this.children()[0];return{left:l.scrollLeft,width:l.clientWidth,scrollWidth:l.scrollWidth,hasNext:l.scrollWidth>l.scrollLeft+l.clientWidth+2.5,hasPrev:(function(){var e,o;if(l.scrollLeft===0)return!1;const n=l.getBoundingClientRect().left,i=(o=(e=t?.getBoundingClientRect())==null?void 0:e.left)!=null?o:0;return Math.abs(n-i)>=2.5})()}}},render(){const l=e=>{const o=s("path",{d:"m9.8 12 5 5a1 1 0 1 1-1.4 1.4l-5.7-5.7a1 1 0 0 1 0-1.4l5.7-5.7a1 1 0 0 1 1.4 1.4l-5 5z"}),n=s("path",{d:"m14.3 12.1-5-5a1 1 0 0 1 1.4-1.4l5.7 5.7a1 1 0 0 1 0 1.4l-5.7 5.7a1 1 0 0 1-1.4-1.4l5-5z"});return s("svg",{class:"v-hl-svg",viewBox:"0 0 24 24","aria-label":`horizontal scroll area button for navigation to ${e==="prev"?"previous":"next"} section`,style:{width:"40px",height:"40px",margin:"6px",padding:"6px","border-radius":"20px","box-sizing":"border-box",background:"white",color:"black",fill:"currentColor","box-shadow":"0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)"}},[e==="prev"?o:n])},t=e=>this.button&&(e!=="prev"||this.hasPrev)&&(e!=="next"||this.hasNext)?s("div",{key:e==="prev"?0:1,class:`v-hl-btn v-hl-btn-${e}`,onClick:e==="prev"?this.prev:this.next,role:"button",style:c(c(c({},e==="prev"?{left:0,transform:this.buttonBetween?"translateX(-50%)":"none"}:{right:0,transform:this.buttonBetween?"translateX(50%)":"none"}),{cursor:"pointer",position:"absolute",top:0,bottom:0,display:"flex","align-self":"center","z-index":1,"align-items":"center"}),this.scroll?{}:{"overflow-x":"scroll","scrollbar-width":"none","-ms-overflow-style":"none","padding-bottom":"30px","margin-bottom":"-30px","clip-path":"inset(0 0 30px 0)"})},[e==="prev"?this.$slots["btn-prev"]?this.$slots["btn-prev"]():l("prev"):this.$slots["btn-next"]?this.$slots["btn-next"]():l("next")]):d("",!0);return s("div",{class:"vue-horizontal",style:{position:"relative",display:"flex"}},[t("prev"),t("next"),s("div",{class:"v-hl-container",ref:"container",onScrollPassive:this.onScroll,style:c({display:"flex",width:"100%",margin:0,padding:0,border:"none","box-sizing":"content-box","overflow-x":"scroll","overflow-y":"hidden","scroll-snap-type":"x mandatory","-webkit-overflow-scrolling":"touch"},this.scroll?{}:{"scrollbar-width":"none","-ms-overflow-style":"none","padding-bottom":"30px","margin-bottom":"-30px","clip-path":"inset(0 0 30px 0)"})},(()=>{if(!this.$slots.default)return[];const e=n=>{n.props=n.props||{},n.props.style=n.props.style||{},n.props.style={"flex-shrink":0,"box-sizing":"border-box","min-height":"1px","scroll-snap-align":this.snap}},o=this.$slots.default();return o.forEach((n=>{if(n.el)return e(n);

1n.children&&Array.isArray(n.children)&&n.children.forEach((i=>{e(i)}))})),o})())])}});export{p as i};