@storefront-ui/shared - npm Package Compare versions

Comparing version 2.0.0-rc.1 to 2.0.0-rc.2

dist/index.d.ts

 export * from './progress';
-export * from './slider';
+export * from './scrollable';
 export * from './utils';
 export * from './types';
+export * from './trapFocus';
+//# sourceMappingURL=index.d.ts.map

dist/index.umd.js

@@ -1,2 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e||self).shared={})}(this,function(e){const t={reduceMotion:!1,snap:!1,drag:void 0,vertical:!1},o="vsf-slider__container--dragging";let s=-1;const i="undefined"!=typeof window,n=i&&window?.matchMedia("(prefers-reduced-motion: reduce)").matches;var r,l,c,a,d,h;e.VsfAlertVariant=void 0,(r=e.VsfAlertVariant||(e.VsfAlertVariant={})).gray="gray",r.secondary="secondary",r.positive="positive",r.warning="warning",r.error="error",e.VsfAlertType=void 0,(l=e.VsfAlertType||(e.VsfAlertType={})).temporary="temporary",l.persistent="persistent",e.VsfFooterColumnType=void 0,(c=e.VsfFooterColumnType||(e.VsfFooterColumnType={})).top="top",c.middle="middle",e.VsfFooterSectionType=void 0,(a=e.VsfFooterSectionType||(e.VsfFooterSectionType={})).top="top",a.middle="middle",a.bottom="bottom",e.VsfFooterLabelType=void 0,(d=e.VsfFooterLabelType||(e.VsfFooterLabelType={})).category="category",d.subcategory="subcategory",d.contact="contact",d.contactDescription="contact-description",d.socialMedia="social-media",d.bottomLinks="bottom-links",d.companyName="company-name",e.VsfLoaderSize=void 0,(h=e.VsfLoaderSize||(e.VsfLoaderSize={})).xs="xs",h.sm="sm",h.base="base",h.lg="lg",h.xl="xl",h["2xl"]="2xl",h["3xl"]="3xl",h["4xl"]="4xl",e.VSFSlider=class{constructor(e,o){if(this.container=void 0,this.options=void 0,this.debounceId=void 0,this.isDragged=void 0,this.dragScrollX=void 0,this.dragScrollLeft=void 0,this.dragScrollY=void 0,this.dragScrollTop=void 0,this.scrollListenerInstance=void 0,this.mouseDownListenerInstance=void 0,this.mouseUpListenerInstance=void 0,this.mouseMoveListenerInstance=void 0,this.mouseLeaveListenerInstance=void 0,!(e instanceof HTMLElement))throw new Error(`VSFSlider: Container is not a HTMLElement! Received: ${e}`);this.container=e,this.options={...t,...o},this.dragScrollX=0,this.dragScrollLeft=0,this.dragScrollY=0,this.dragScrollTop=0,this.init()}init(){this.addListeners(),this.onScrollHandler()}update(e){this.options={...t,...e},this.removeListeners(),this.init()}destroy(){this.removeListeners()}prev(){const{container:e,options:t}=this;this.scrollTo(t.vertical?{top:e.scrollTop-e.clientHeight}:{left:e.scrollLeft-e.clientWidth})}next(){const{container:e,options:t}=this;this.scrollTo(t.vertical?{top:e.scrollTop+e.clientHeight}:{left:e.scrollLeft+e.clientWidth})}scrollToIndex(e){const t=this.children();if(t[e]){const{container:o}=this,s=t[e].getBoundingClientRect(),i=s.left-o.getBoundingClientRect().left,n=s.top-o.getBoundingClientRect().top;this.scrollTo(this.options.vertical?{top:o.scrollTop+n}:{left:o.scrollLeft+i})}}refresh(e){requestAnimationFrame(()=>{const t=this.calculate();e?.(t)})}onMouseUp(){this.isDragged=!1,setTimeout(()=>{this.container.classList.remove(o)},50)}onMouseLeave(){this.isDragged=!1,this.container.classList.remove(o)}onMouseDown(e){e.preventDefault();const{container:t,options:s}=this;this.isDragged=!0,t.classList.add(o),s.vertical?(this.dragScrollY=e.pageY-t.offsetTop,this.dragScrollTop=t.scrollTop):(this.dragScrollX=e.pageX-t.offsetLeft,this.dragScrollLeft=t.scrollLeft)}onMouseMove(e){if(!this.isDragged)return;e.preventDefault();const t=this.options.drag?.sensitivity??4,{container:o,options:s}=this;s.vertical?o.scrollTop=this.dragScrollTop-(e.pageY-o.offsetTop-this.dragScrollY)*t:o.scrollLeft=this.dragScrollLeft-(e.pageX-o.offsetLeft-this.dragScrollX)*t}addListeners(){this.scrollListenerInstance=this.onScroll.bind(this),this.container.addEventListener("scroll",this.scrollListenerInstance,{passive:!0}),this.options.drag&&(this.mouseDownListenerInstance=this.onMouseDown.bind(this),this.mouseUpListenerInstance=this.onMouseUp.bind(this),this.mouseMoveListenerInstance=this.onMouseMove.bind(this),this.mouseLeaveListenerInstance=this.onMouseLeave.bind(this),this.container.addEventListener("mousedown",this.mouseDownListenerInstance,{passive:!1}),this.container.addEventListener("mouseup",this.mouseUpListenerInstance,{passive:!0}),this.container.addEventListener("mousemove",this.mouseMoveListenerInstance,{passive:!1}),this.container.addEventListener("mouseleave",this.mouseLeaveListenerInstance,{passive:!0}))}removeListeners(){this.container.removeEventListener("scroll",this.scrollListenerInstance),this.options.drag||(this.container.removeEventListener("mousedown",this.mouseDownListenerInstance),this.container.removeEventListener("mouseup",this.mouseUpListenerInstance),this.container.removeEventListener("mousemove",this.mouseMoveListenerInstance),this.container.removeEventListener("mouseleave",this.mouseLeaveListenerInstance))}children(){return this.container.children}scrollTo(e){let{left:t,top:o}=e;this.container.scrollTo({left:t,top:o,behavior:this.options.reduceMotion?"auto":"smooth"})}onScroll(){this.container&&(clearTimeout(this.debounceId),this.debounceId=setTimeout(this.onScrollHandler.bind(this),50))}onScrollHandler(){this.refresh(e=>this.options.onScroll?.(e))}calculate(){const{container:e,options:t}=this;return{left:e.scrollLeft,width:e.clientWidth,scrollWidth:e.scrollWidth,hasPrev:t.vertical?!!e.scrollTop:!!e.scrollLeft,hasNext:t.vertical?e.scrollHeight>e.scrollTop+e.clientHeight:e.scrollWidth>e.scrollLeft+e.clientWidth}}},e.clamp=function(e,t,o){return Math.min(Math.max(e,t),o)},e.equal=function e(t,o){if(t===o)return!0;const s=typeof t;if(s!==typeof o)return!1;if("object"!==s||null===t||null===o)return"function"===s&&t.toString()===o.toString();if(t.length!==o.length||Object.getOwnPropertyNames(t).length!==Object.getOwnPropertyNames(o).length)return!1;for(const s in t)if(!e(t[s],o[s]))return!1;return!0},e.generateId=e=>`vsf-${e}--${++s}`,e.isBrowser=i,e.isReduceMotionEnabled=n,e.noop=()=>{},e.progressSvgSizes={xs:{icon:16,r:7.2,dash:45.216},sm:{icon:20,r:9,dash:56.52},base:{icon:24,r:11,dash:69.08},lg:{icon:32,r:14.67,dash:92.127},xl:{icon:40,r:19,dash:119.32},"2xl":{icon:56,r:26,dash:163.28},"3xl":{icon:96,r:44,dash:276.32},"4xl":{icon:192,r:88,dash:552.64}},e.roundToNearest=function(e,t){return Math.round(e/t)*t}});
-//# sourceMappingURL=index.umd.js.map
+(function(i,c){typeof exports=="object"&&typeof module<"u"?c(exports):typeof define=="function"&&define.amd?define(["exports"],c):(i=typeof globalThis<"u"?globalThis:i||self,c(i["storefront-ui-shared"]={}))})(this,function(i){"use strict";var k=Object.defineProperty;var J=(i,c,a)=>c in i?k(i,c,{enumerable:!0,configurable:!0,writable:!0,value:a}):i[c]=a;var o=(i,c,a)=>(J(i,typeof c!="symbol"?c+"":c,a),a);const c={xs:{icon:16,r:7.2,dash:45.216},sm:{icon:20,r:9,dash:56.52},base:{icon:24,r:11,dash:69.08},lg:{icon:32,r:14.67,dash:92.127},xl:{icon:40,r:19,dash:119.32},"2xl":{icon:56,r:26,dash:163.28},"3xl":{icon:96,r:44,dash:276.32},"4xl":{icon:192,r:88,dash:552.64}},a={reduceMotion:!1,snap:!1,drag:void 0,vertical:!1},L="vsf-scrollable__container--dragging";class F{constructor(t,n){o(this,"container");o(this,"options");o(this,"debounceId");o(this,"isDragged");o(this,"dragScrollX");o(this,"dragScrollLeft");o(this,"dragScrollY");o(this,"dragScrollTop");o(this,"scrollListenerInstance",()=>{});o(this,"resizeListenerInstance",()=>{});o(this,"mouseDownListenerInstance",()=>{});o(this,"mouseUpListenerInstance",()=>{});o(this,"mouseMoveListenerInstance",()=>{});o(this,"mouseLeaveListenerInstance",()=>{});if(!(t instanceof HTMLElement))throw new Error(`VsfScrollable: Container is not a HTMLElement! Received: ${t}`);this.container=t,this.options={...a,...n},this.dragScrollX=0,this.dragScrollLeft=0,this.dragScrollY=0,this.dragScrollTop=0,this.init()}init(){this.addListeners(),this.onScrollHandler()}update(t){this.options={...a,...t},this.removeListeners(),this.init()}destroy(){this.removeListeners()}prev(){const{container:t,options:n}=this;n.vertical?this.scrollTo({top:t.scrollTop-t.clientHeight}):this.scrollTo({left:t.scrollLeft-t.clientWidth})}next(){const{container:t,options:n}=this;n.vertical?this.scrollTo({top:t.scrollTop+t.clientHeight}):this.scrollTo({left:t.scrollLeft+t.clientWidth})}scrollToIndex(t){const n=this.children();if(n[t]){const{container:s}=this,r=n[t].getBoundingClientRect(),l=r.left-s.getBoundingClientRect().left,u=r.top-s.getBoundingClientRect().top,d=s.clientWidth/2-r.width/2,K=s.clientHeight/2-r.height/2;this.options.vertical?this.scrollTo({top:s.scrollTop+u-K}):this.scrollTo({left:s.scrollLeft+l-d})}}refresh(t){requestAnimationFrame(()=>{const n=this.calculate();t==null||t(n)})}onMouseUp(){this.isDragged=!1,setTimeout(()=>{this.container.classList.remove(L)},50)}onMouseLeave(){this.isDragged=!1,this.container.classList.remove(L)}onMouseDown(t){t.preventDefault();const{container:n,options:s}=this;this.isDragged=!0,n.classList.add(L),s.vertical?(this.dragScrollY=t.pageY-n.offsetTop,this.dragScrollTop=n.scrollTop):(this.dragScrollX=t.pageX-n.offsetLeft,this.dragScrollLeft=n.scrollLeft)}onMouseMove(t){var l;if(!this.isDragged)return;t.preventDefault();const n=((l=this.options.drag)==null?void 0:l.sensitivity)??4,{container:s,options:r}=this;if(r.vertical){const d=(t.pageY-s.offsetTop-this.dragScrollY)*n;s.scrollTop=this.dragScrollTop-d}else{const d=(t.pageX-s.offsetLeft-this.dragScrollX)*n;s.scrollLeft=this.dragScrollLeft-d}}addListeners(){this.scrollListenerInstance=this.onScroll.bind(this),this.resizeListenerInstance=this.onResize.bind(this),this.container.addEventListener("scroll",this.scrollListenerInstance,{passive:!0}),window.addEventListener("resize",this.resizeListenerInstance),this.options.drag&&(this.mouseDownListenerInstance=this.onMouseDown.bind(this),this.mouseUpListenerInstance=this.onMouseUp.bind(this),this.mouseMoveListenerInstance=this.onMouseMove.bind(this),this.mouseLeaveListenerInstance=this.onMouseLeave.bind(this),this.container.addEventListener("mousedown",this.mouseDownListenerInstance,{passive:!1}),this.container.addEventListener("mouseup",this.mouseUpListenerInstance,{passive:!0}),this.container.addEventListener("mousemove",this.mouseMoveListenerInstance,{passive:!1}),this.container.addEventListener("mouseleave",this.mouseLeaveListenerInstance,{passive:!0}))}removeListeners(){this.container.removeEventListener("scroll",this.scrollListenerInstance),window.removeEventListener("resize",this.resizeListenerInstance),this.options.drag||(this.container.removeEventListener("mousedown",this.mouseDownListenerInstance),this.container.removeEventListener("mouseup",this.mouseUpListenerInstance),this.container.removeEventListener("mousemove",this.mouseMoveListenerInstance),this.container.removeEventListener("mouseleave",this.mouseLeaveListenerInstance))}children(){return this.container.children}scrollTo({left:t,top:n}){const s=this.options.reduceMotion?"auto":"smooth";this.container.scrollTo({left:t,top:n,behavior:s})}onScroll(){this.container&&(clearTimeout(this.debounceId),this.debounceId=setTimeout(this.onScrollHandler.bind(this),50))}onResize(){this.container&&this.refresh(n=>{var s,r;return(r=(s=this.options).onScroll)==null?void 0:r.call(s,n)})}onScrollHandler(){this.refresh(t=>{var n,s;return(s=(n=this.options).onScroll)==null?void 0:s.call(n,t)})}calculate(){const{container:t,options:n}=this;function s(){return n.vertical?t.scrollHeight>Math.ceil(t.scrollTop)+t.clientHeight:t.scrollWidth>Math.ceil(t.scrollLeft)+t.clientWidth}function r(){return n.vertical?!!t.scrollTop:!!t.scrollLeft}return{left:t.scrollLeft,width:t.clientWidth,scrollWidth:t.scrollWidth,hasPrev:r(),hasNext:s()}}}const v=typeof window<"u",H=v&&(window==null?void 0:window.matchMedia("(prefers-reduced-motion: reduce)").matches),f=v&&/^((?!chrome|android).)*safari/i.test(navigator==null?void 0:navigator.userAgent);let R=-1;const W=e=>`vsf-${e}--${++R}`,U=e=>e.key==="Tab"&&e.shiftKey,X=e=>e.key==="Tab"&&!e.shiftKey,Y=()=>{};function j(e,t,n){return Math.min(Math.max(e,t),n)}function z(e,t){return Math.round(e/t)*t}function p(e,t){if(e===t)return!0;const n=typeof e;if(n!==typeof t)return!1;if(n==="object"&&e!==null&&t!==null){if(e.length!==t.length||Object.getOwnPropertyNames(e).length!==Object.getOwnPropertyNames(t).length)return!1;for(const r in e)if(!p(e[r],t[r]))return!1}else return n==="function"?e.toString()===t.toString():!1;return!0}var I=(e=>(e.gray="gray",e.secondary="secondary",e.positive="positive",e.warning="warning",e.error="error",e))(I||{}),T=(e=>(e.temporary="temporary",e.persistent="persistent",e))(T||{}),M=(e=>(e.top="top",e.middle="middle",e))(M||{}),S=(e=>(e.top="top",e.middle="middle",e.bottom="bottom",e))(S||{}),w=(e=>(e.category="category",e.subcategory="subcategory",e.contact="contact",e.contactDescription="contact-description",e.socialMedia="social-media",e.bottomLinks="bottom-links",e.companyName="company-name",e))(w||{}),y=(e=>(e.xs="xs",e.sm="sm",e.base="base",e.lg="lg",e.xl="xl",e["2xl"]="2xl",e["3xl"]="3xl",e["4xl"]="4xl",e))(y||{});const m=(e,t)=>t.findIndex(n=>n===e),E=(e,t)=>{const n=m(e,t);return t[n+1]},D=(e,t)=>{const n=m(e,t);return t[n-1]},h=({focusables:e,event:t})=>{t==null||t.preventDefault();const n=e[0];return n==null||n.focus(),n},g=({focusables:e,event:t})=>{t==null||t.preventDefault();const n=e[e.length-1];return n==null||n.focus(),n},N=(e,t)=>{const n=E(e,t);return n==null||n.focus(),n},b=(e,t)=>{const n=D(e,t);return n==null||n.focus(),n},P=(e,t)=>m(e,t)===0,x=(e,t)=>m(e,t)===t.length-1,B=(e,t,n)=>{const s=[...n].reverse(),r=s.findIndex(l=>l===e);return s.find((l,u)=>{var d;if(u>r&&l.closest(t)&&e.closest(t)!==l.closest(t)&&((d=s[u+1])==null?void 0:d.closest(t))!==l.closest(t))return l})},G=(e,t,n)=>{const s=n.findIndex(r=>r===e);return n.find((r,l)=>{if(l>s&&r.closest(t)&&e.closest(t)!==r.closest(t))return r})},q=({current:e,focusables:t,arrowFocusGroupSelector:n})=>{if(!e)return h({focusables:t});const s=G(e,n,t);return e&&s?(s==null||s.focus(),s):h({focusables:t})},A=({current:e,focusables:t,arrowFocusGroupSelector:n})=>{if(!e)return h({focusables:t});const s=B(e,n,t);return e&&s?(s==null||s.focus(),s):g({focusables:t})},O=({current:e,focusables:t,event:n})=>{if(f&&(n==null||n.preventDefault()),e){if(x(e,t))return h({focusables:t,event:n});if(f||!n)return N(e,t)}else return h({focusables:t,event:n})},C=({current:e,focusables:t,event:n})=>{if(f&&(n==null||n.preventDefault()),e){if(P(e,t))return g({focusables:t,event:n});if(f||!n)return b(e,t)}else return g({focusables:t,event:n})},_=({current:e,event:t,focusables:n,arrowFocusGroupSelector:s})=>s?q({current:e,focusables:n,arrowFocusGroupSelector:s}):O({current:e,focusables:n,event:t}),$=({current:e,focusables:t,event:n,arrowFocusGroupSelector:s})=>s?A({current:e,focusables:t,arrowFocusGroupSelector:s}):C({current:e,focusables:t,event:n});i.VSFScrollable=F,i.VsfAlertType=T,i.VsfAlertVariant=I,i.VsfFooterColumnType=M,i.VsfFooterLabelType=w,i.VsfFooterSectionType=S,i.VsfLoaderSize=y,i.clamp=j,i.equal=p,i.findCurrentFocusableIndex=m,i.findNextFocusable=E,i.findPrevFocusable=D,i.focusFirstElement=h,i.focusLastElement=g,i.focusNext=_,i.focusNextElement=N,i.focusNextOrFirst=O,i.focusPrev=$,i.focusPrevElement=b,i.focusPrevOrLast=C,i.generateId=W,i.isBrowser=v,i.isCurrentFirstElement=P,i.isCurrentLastElement=x,i.isReduceMotionEnabled=H,i.isSafari=f,i.isTab=X,i.isTabAndShift=U,i.noop=Y,i.progressSvgSizes=c,i.roundToNearest=z,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});

dist/progress/index.d.ts

@@ -43,1 +43,2 @@ export declare const progressSvgSizes: {
 };
+//# sourceMappingURL=index.d.ts.map

dist/types/index.d.ts

 export * from './VsfAlert';
 export * from './VsfFooter';
 export * from './VsfLoader';
+//# sourceMappingURL=index.d.ts.map

dist/types/VsfAlert.d.ts

@@ -12,1 +12,2 @@ export declare enum VsfAlertVariant {
 }
+//# sourceMappingURL=VsfAlert.d.ts.map

dist/types/VsfFooter.d.ts

@@ -19,1 +19,2 @@ export declare enum VsfFooterColumnType {
 }
+//# sourceMappingURL=VsfFooter.d.ts.map

dist/types/VsfLoader.d.ts

@@ -11,1 +11,2 @@ export declare enum VsfLoaderSize {
 }
+//# sourceMappingURL=VsfLoader.d.ts.map

dist/utils/browser.d.ts

 export declare const isBrowser: boolean;
 export declare const isReduceMotionEnabled: boolean;
+export declare const isSafari: boolean;
+//# sourceMappingURL=browser.d.ts.map

dist/utils/generateId.d.ts

 export declare const generateId: (prefix: string) => string;
+//# sourceMappingURL=generateId.d.ts.map

dist/utils/index.d.ts

@@ -5,3 +5,5 @@ export declare const noop: () => void;
 export declare function equal(v1: any, v2: any): boolean;
+export * from './browser';
 export * from './generateId';
-export * from './browser';
+export * from './events';
+//# sourceMappingURL=index.d.ts.map

package.json

 {
   "name": "@storefront-ui/shared",
   "description": "Shared set of utils and typings used by `@storefront-ui/*` packages",
-  "version": "2.0.0-rc.1",
+  "version": "2.0.0-rc.2",
   "sideEffects": false,
   "exports": {
     ".": {
-      "import": "./dist/index.esm.mjs",
-      "require": "./dist/index.js"
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js"
     },
@@ -14,8 +14,8 @@ "./*": "./*"
   "source": "index.ts",
-  "main": "dist/index.js",
+  "main": "dist/index.es.js",
   "unpkg": "dist/index.umd.js",
   "types": "dist/index.d.ts",
   "scripts": {
-    "dev": "microbundle watch",
-    "build:shared": "microbundle --compress"
+    "dev": "vite build --watch",
+    "build:shared": "vite build"
   },
@@ -31,4 +31,7 @@ "homepage": "https://docs.storefrontui.io/v2/",
   "devDependencies": {
-    "microbundle": "0.15.1",
-    "typescript": "~4.7.4"
+    "tabbable": "^6.0.1",
+    "typescript": "~4.7.4",
+    "vite": "^4.1.1",
+    "vite-plugin-dts": "^1.7.2",
+    "vue-tsc": "^1.0.24"
   },
@@ -35,0 +38,0 @@ "publishConfig": {

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Number of package files

38

increased by90%

Lines of code

578

increased by156.89%

Worsened metrics

Total package byte prevSize

35459

decreased by-51.32%

Dev dependency count

5

increased by150%

No dependency changes