najwer23morsels 0.9.7 → 0.10.0
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/CHANGELOG.md +6 -0
- package/lib/Slider.js +1 -1
- package/lib/Sliderscroll.js +1 -1
- package/lib/sliderscroll/SliderScroll.d.ts +1 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
package/lib/Slider.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as l,Fragment as r}from"react/jsx-runtime";import i,{useState as n,useRef as t,useLayoutEffect as o}from"react";import{s as d}from"./style-inject.es-BnTDb6vU.js";import{L as s}from"./Loader-CL-mm0LT.js";import{a,I as
|
|
1
|
+
import{jsxs as e,jsx as l,Fragment as r}from"react/jsx-runtime";import i,{useState as n,useRef as t,useLayoutEffect as o}from"react";import{s as d}from"./style-inject.es-BnTDb6vU.js";import{L as s}from"./Loader-CL-mm0LT.js";import{a,I as m}from"./IconArrowRight-Bs6HQ5lc.js";import{B as c}from"./Button-DP1hmI08.js";import{u as h}from"./useWindowSize-CAQRbyxi.js";import{T as u}from"./TextBox-B47QWA9m.js";var S={n23mSlider:"Slider-module_n23mSlider__YOEan",n23mSliderContainerSlider:"Slider-module_n23mSliderContainerSlider__-1M4s",n23mSliderSlideWrapper:"Slider-module_n23mSliderSlideWrapper__hbDsw",n23mSliderSlide:"Slider-module_n23mSliderSlide__Hv6uj",n23mSliderControls:"Slider-module_n23mSliderControls__DLrdZ",n23mSliderControlsButtons:"Slider-module_n23mSliderControlsButtons__C1ypH",n23mSliderCounter:"Slider-module_n23mSliderCounter__UJLZw"};d("@layer n23mSlider{.Slider-module_n23mSlider__YOEan{width:100%}.Slider-module_n23mSliderContainerSlider__-1M4s{display:flex;flex-direction:column;gap:10px;height:100%;position:relative;user-select:none;width:100%}.Slider-module_n23mSliderSlideWrapper__hbDsw{height:100%;overflow:hidden;position:relative;width:100%;will-change:transform}.Slider-module_n23mSliderSlide__Hv6uj{height:100%;overflow:hidden;position:absolute;top:0;will-change:transform;&>*{height:100%;width:100%}}.Slider-module_n23mSliderControls__DLrdZ{align-items:center;display:flex;margin-left:20px;margin-right:20px}.Slider-module_n23mSliderControlsButtons__C1ypH{display:flex;gap:10px;margin-top:10px}.Slider-module_n23mSliderCounter__UJLZw{align-items:center;align-items:flex-start;display:flex;height:50px;justify-content:center}}");const p=(e,l,r=!1,n)=>(r?e.slice(0,l):e.slice(-l)).map((e,l)=>i.cloneElement(e,{key:`${r?"clone-first":"clone-last"}-${l} ${n}`,className:e.props.className})),g=({isCircular:d=!1,children:g,className:f,loading:_=!1,loaderColor:x="black",slidesConfig:C={mobile:{items:1,slidesToScroll:1},tablet:{items:2,slidesToScroll:2},desktop:{items:3,slidesToScroll:3}},slideSpacingPx:b=10})=>{const w=i.Children.toArray(g).filter(i.isValidElement),{width:v}=h(),[y,E]=n(0),j=t(null),[T,k]=n(d?2*w.length:0),[$,F]=n(!1),L=t([]),[N,B]=n(null),[z,W]=n(0);let D,H,Z,M;v<767.98?(D=C.mobile.items,H=C.mobile.slidesToScroll,Z="transform 0.4s cubic-bezier(.4,0,.2,1)",M=450):v<1199.98?(D=C.tablet.items,H=C.tablet.slidesToScroll,Z="transform 0.4s cubic-bezier(.4,0,.2,1)",M=450):(D=C.desktop.items,H=C.desktop.slidesToScroll,Z="transform 0.4s cubic-bezier(.4,0,.2,1)",M=450),o(()=>{let e;const l=()=>{j.current&&E(j.current.offsetWidth),k(d?2*w.length:0)},r=()=>{clearTimeout(e),e=window.setTimeout(l,0),F(!1)};return l(),window.addEventListener("resize",r),()=>{clearTimeout(e),window.removeEventListener("resize",r)}},[_,d,D,w.length]);const X=(y-b*(D-1))/D;let A=d?[...p(w,w.length,!1,1),...p(w,w.length,!1,2),...w,...p(w,w.length,!0,3),...p(w,w.length,!0,4)]:w;o(()=>{L.current.forEach((e,l)=>{if(!e)return;let r=0,i=0;1==D&&1!=w.length?(r=40,i=40):2==D?(r=20,i=20):4==D?(r=10,i=10):3==D&&(r=12.5,i=12.5);const n=(l-T)*(X+b-i)+(y-(X-r)*D-b*(D-1))/2;e.style.transition=$?Z:"none",e.style.transform=`translateX(${n}px)`})},[T,y,$,A.length,D,X,b,_]),o(()=>{if(!$)return;let e;const l=()=>{let r=T;T<2*D&&d?r=T+2*w.length:T>=2*w.length+D&&d&&(r=T-w.length),r!==T&&d&&k(r),F(!1),L.current.forEach(e=>{e&&e.removeEventListener("transitionend",l)}),clearTimeout(e)};return L.current.forEach(e=>{e&&e.addEventListener("transitionend",l)}),e=window.setTimeout(()=>{F(!1),L.current.forEach(e=>{e&&e.removeEventListener("transitionend",l)})},M),()=>{L.current.forEach(e=>{e&&e.removeEventListener("transitionend",l)}),clearTimeout(e)}},[T,d,$,w.length,D,A.length,_]);const I=()=>{$||(F(!0),k(e=>e+H))},J=()=>{$||(F(!0),k(e=>e-H))};return e("div",{className:[S.n23mSlider,"n23mSlider",f].filter(Boolean).join(" "),style:{height:_?"calc(100% - 2px)":"calc(100% - 60px)"},onTouchStart:e=>{1===e.touches.length&&(B(e.touches[0].clientX),W(0))},onTouchMove:e=>{null!==N&&W(e.touches[0].clientX-N)},onTouchEnd:()=>{z>50&&!$&&(d||0!==T)?J():z<-50&&!($||!d&&T+D>=w.length)&&I(),B(null),W(0)},children:[_&&l(s,{loaderColor:x}),!_&&e(r,{children:[l("div",{className:[S.n23mSliderContainerSlider].filter(Boolean).join(" "),children:l("div",{className:[S.n23mSliderSlideWrapper,"n23mSliderSlideWrapper"].join(" "),ref:j,style:{display:"flex",gap:`${b}px`,overflow:"hidden",width:"100%",boxSizing:"border-box"},children:A.map((e,r)=>l("div",{ref:e=>{L.current[r]=e},className:S.n23mSliderSlide,style:{width:1==D&&1==w.length?"100%":1==D?`calc(${X}px - 40px)`:2==D?`calc(${X}px - 20px)`:3==D?`calc(${X}px - 12.5px)`:4==D?`calc(${X}px - 10px)`:`${X}px`},"aria-hidden":r<T||r>=T+D,children:e},e.key??r))})}),e("div",{className:[S.n23mSliderControls,"n23mSliderControls"].join(" "),style:{justifyContent:1==D?"space-between":"flex-end"},children:[1==D&&l("div",{className:[S.n23mSliderCounter,"n23mSliderCounter"].join(" "),children:l(u,{mobileSize:16,desktopSize:16,color:"black",children:d?`${(()=>{if(!d)return T;const e=w.length;return e<1?0:(T+e)%e})()+1} / ${w.length}`:`${T+1} / ${w.length}`})}),e("div",{className:[S.n23mSliderControlsButtons,"n23mSliderControlsButtons"].join(" "),children:[l(c,{height:"50px",width:"50px",backgroundColor:"#F2F0EF",padding:0,title:"Prev",onClick:J,borderColor:"black",backgroundColorDisabled:"#F2F0EF",disabled:$||!d&&0===T,children:l(a,{width:24,height:24})}),l(c,{height:"50px",width:"50px",backgroundColor:"#F2F0EF",padding:0,title:"Next",borderColor:"black",backgroundColorDisabled:"#F2F0EF",onClick:I,disabled:$||!d&&T+D>=w.length,children:l(m,{width:24,height:24})})]})]})]})]})};g.displayName="Slider";export{g as Slider};
|
package/lib/Sliderscroll.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as r,jsx as e}from"react/jsx-runtime";import{useRef as l,useState as o,useEffect as
|
|
1
|
+
import{jsxs as r,jsx as e}from"react/jsx-runtime";import{useRef as l,useState as o,Children as t,cloneElement as n,useEffect as i}from"react";import{B as c}from"./Button-DP1hmI08.js";import{s}from"./style-inject.es-BnTDb6vU.js";import{u as a}from"./useWindowSize-CAQRbyxi.js";import{a as d,I as u}from"./IconArrowRight-Bs6HQ5lc.js";import"./Loader-CL-mm0LT.js";import"./TextBox-B47QWA9m.js";var m={n23mSliderScrollWrapper:"SliderScroll-module_n23mSliderScrollWrapper__MqXIk",n23mSliderScrollTrack:"SliderScroll-module_n23mSliderScrollTrack__FcsTl",dragging:"SliderScroll-module_dragging__iE4mo",n23mSliderScrollControls:"SliderScroll-module_n23mSliderScrollControls__i64nM",n23mSliderScrollControlsButtons:"SliderScroll-module_n23mSliderScrollControlsButtons__W-5rb"};s("@layer n23mSliderScroll{.SliderScroll-module_n23mSliderScrollWrapper__MqXIk{display:grid;position:relative}.SliderScroll-module_n23mSliderScrollTrack__FcsTl{-ms-overflow-style:none;-webkit-overflow-scrolling:touch;display:flex;flex-wrap:nowrap;gap:var(--sliderscroll-gap);overflow-x:scroll;scrollbar-width:none;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;will-change:scroll-position;&::-webkit-scrollbar{display:none}&>*{flex-shrink:0}&.SliderScroll-module_dragging__iE4mo,&.SliderScroll-module_dragging__iE4mo a{cursor:grabbing}}.SliderScroll-module_n23mSliderScrollControls__i64nM{align-items:center;display:flex;justify-content:flex-end;margin-left:20px;margin-right:20px}.SliderScroll-module_n23mSliderScrollControlsButtons__W-5rb{display:flex;gap:10px;margin-top:10px}}");const f=({children:s,className:f,gap:S="5px",isCircular:p=!1})=>{const g=l(null),[h,_]=o(!1),[w,v]=o(!1),{width:b}=a(),[x,C]=o(!1),k=t.toArray(s),L=k.length,M=p?k.map((r,e)=>n(r,{key:`clone-before-${e}`})):[],F=p?k.map((r,e)=>n(r,{key:`clone-after-${e}`})):[],y=()=>{if(!g.current||!g.current.firstElementChild)return 0;const r=g.current.firstElementChild,e=getComputedStyle(r);return r.offsetWidth+parseInt(e.marginLeft||"0")+parseInt(e.marginRight||"0")+Number(S.slice(0,-2))},W=()=>{if(g.current)if(p)_(!0),v(!0);else{const r=g.current.scrollLeft,e=g.current.scrollWidth-g.current.clientWidth;r<=0?(_(!1),v(0!==e)):r>=e?(_(!0),v(!1)):(_(!0),v(!0))}};i(()=>{if(p){const r=y();g.current&&r&&(g.current.scrollLeft=r*L)}W()},[b,L,S,s,p]);const j=l(!1),D=l(null),T=()=>{j.current=!0,D.current&&clearTimeout(D.current),D.current=window.setTimeout(()=>{j.current=!1},150)},B=(r,e,l=300,o=!1)=>{if(j.current&&!o)return r.scrollLeft=e,void W();const t=r.scrollLeft,n=e-t,i=performance.now(),c=s=>{if(j.current&&!o)return r.scrollLeft=e,void W();const a=s-i,d=Math.min(a/l,1);var u;r.scrollLeft=t+n*((u=d)<.5?4*u*u*u:1-Math.pow(-2*u+2,3)/2),d<1?requestAnimationFrame(c):W()};requestAnimationFrame(c)},E=l({isDown:!1,startX:0,scrollLeft:0,isMove:!1});return r("div",{className:["n23mSliderScroll",f].filter(Boolean).join(" "),style:{"--sliderscroll-gap":S,height:"calc(100% - 60px)"},children:[e("div",{className:[m.n23mSliderScrollWrapper,"n23mSliderScrollWrapper"].join(" "),children:r("div",{className:[m.n23mSliderScrollTrack,x?m.dragging:""].join(" "),ref:g,onClick:r=>{E.current.isMove&&(r.preventDefault(),r.stopPropagation())},onScroll:()=>{if(g.current)if(T(),p){const r=y();if(!r)return;const e=r*(L+k.length),l=r*L,o=g.current.scrollLeft;o<l-r/2?g.current.scrollLeft=o+r*k.length:o>e+r/2&&(g.current.scrollLeft=o-r*k.length),_(!0),v(!0)}else W()},onMouseDown:r=>{E.current.isDown=!0,E.current.startX=r.pageX-(g.current?.offsetLeft||0),E.current.scrollLeft=g.current?.scrollLeft||0,C(!0)},onMouseLeave:()=>{E.current.isDown&&(E.current.isDown=!1,C(!1))},onMouseUp:()=>{E.current.isDown=!1,C(!1)},onMouseMove:r=>{if(!E.current.isDown)return void(E.current.isMove=!1);r.preventDefault(),T();var e;const l=("pageX"in(e=r)?e.pageX:"touches"in e?e.touches[0].pageX:0)-(g.current?.offsetLeft||0)-E.current.startX;Math.abs(l)>5&&(E.current.isMove=!0),g.current&&(g.current.scrollLeft=E.current.scrollLeft-l)},onTouchMove:r=>{T()},children:[p&&M,k,p&&F]})}),e("div",{className:[m.n23mSliderScrollControls,"n23mSliderScrollControls"].join(" "),children:r("div",{className:[m.n23mSliderScrollControlsButtons,"n23mSliderScrollControlsButtons"].join(" "),children:[e(c,{height:"50px",width:"50px",backgroundColor:"#F2F0EF",padding:0,title:"Prev",onClick:()=>{if(!g.current)return;const r=y();if(0===r)return;const e=Math.floor(g.current.offsetWidth/r)*r;let l=g.current.scrollLeft-e;p||(l=Math.max(l,0)),B(g.current,l,600,!0)},borderColor:"black",backgroundColorDisabled:"#F2F0EF",disabled:!h&&!p,children:e(d,{width:24,height:24})}),e(c,{height:"50px",width:"50px",backgroundColor:"#F2F0EF",padding:0,title:"Next",borderColor:"black",backgroundColorDisabled:"#F2F0EF",onClick:()=>{if(!g.current)return;const r=y();if(0===r)return;const e=Math.floor(g.current.offsetWidth/r)*r;let l=g.current.scrollLeft+e;if(!p){const r=g.current.scrollWidth-g.current.clientWidth;l=Math.min(l,r)}B(g.current,l,600,!0)},disabled:!w&&!p,children:e(u,{width:24,height:24})})]})})]})};f.displayName="SliderScroll";export{f as SliderScroll};
|