@spectrum-web-components/split-view - npm Package Compare versions

Comparing version 0.37.0 to 0.38.0

package.json

 {
     "name": "@spectrum-web-components/split-view",
-    "version": "0.37.0",
+    "version": "0.38.0",
     "publishConfig": {
@@ -64,3 +64,3 @@ "access": "public"
     "dependencies": {
-        "@spectrum-web-components/base": "^0.37.0"
+        "@spectrum-web-components/base": "^0.38.0"
     },
@@ -76,3 +76,3 @@ "devDependencies": {
     ],
-    "gitHead": "d771f62f0d8063070af43283bb0fd5e3400bad06"
+    "gitHead": "9a099b7543672f2fd4030833ab813b16c2cad62e"
 }

src/SplitView.dev.js

@@ -128,3 +128,3 @@ "use strict";
                                     <div id="gripper"></div>
-                                ` : html``}
+                                ` : nothing}
                       </div>
@@ -131,0 +131,0 @@ ` : nothing}

src/SplitView.js

@@ -1,2 +0,2 @@
-"use strict";var m=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var i=(h,a,t,e)=>{for(var s=e>1?void 0:e?v(a,t):a,o=h.length-1,l;o>=0;o--)(l=h[o])&&(s=(e?l(a,t,s):l(s))||s);return e&&s&&m(a,t,s),s};import{html as n,nothing as f,SpectrumElement as b}from"@spectrum-web-components/base";import{classMap as P,ifDefined as c}from"@spectrum-web-components/base/src/directives.js";import{property as r,query as d}from"@spectrum-web-components/base/src/decorators.js";import{streamingListener as y}from"@spectrum-web-components/base/src/streaming-listener.js";import z from"./split-view.css.js";const p=3840,S=2,g=10,E=50,u=50;export class SplitView extends b{constructor(){super();this.vertical=!1;this.resizable=!1;this.collapsible=!1;this.primaryMin=0;this.primaryMax=p;this.secondaryMin=0;this.secondaryMax=p;this.firstPaneSize="auto";this.enoughChildren=!1;this.viewSize=0;this.offset=0;this.minPos=0;this.maxPos=p;const t=window.ResizeObserver;t&&(this.observer=new t(()=>{this.rect=void 0,this.updateMinMax()}))}static get styles(){return[z]}connectedCallback(){var t;super.connectedCallback(),(t=this.observer)==null||t.observe(this)}disconnectedCallback(){var t;(t=this.observer)==null||t.unobserve(this),super.disconnectedCallback()}get splitterSize(){return this._splitterSize||(this._splitterSize=this.splitter&&Math.round(parseFloat(window.getComputedStyle(this.splitter).getPropertyValue(this.vertical?"height":"width")))||S),this._splitterSize}render(){const t={"is-resized-start":this.splitterPos===this.minPos,"is-resized-end":this.splitterPos&&this.splitterPos>this.splitterSize&&this.splitterPos===this.maxPos,"is-collapsed-start":this.splitterPos===0,"is-collapsed-end":this.splitterPos&&this.splitterPos>=Math.max(this.splitterSize,this.viewSize-this.splitterSize)};return n`
+"use strict";var v=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var i=(n,a,t,e)=>{for(var s=e>1?void 0:e?f(a,t):a,o=n.length-1,h;o>=0;o--)(h=n[o])&&(s=(e?h(a,t,s):h(s))||s);return e&&s&&v(a,t,s),s};import{html as l,nothing as c,SpectrumElement as b}from"@spectrum-web-components/base";import{classMap as P,ifDefined as d}from"@spectrum-web-components/base/src/directives.js";import{property as r,query as u}from"@spectrum-web-components/base/src/decorators.js";import{streamingListener as y}from"@spectrum-web-components/base/src/streaming-listener.js";import z from"./split-view.css.js";const p=3840,S=2,g=10,E=50,m=50;export class SplitView extends b{constructor(){super();this.vertical=!1;this.resizable=!1;this.collapsible=!1;this.primaryMin=0;this.primaryMax=p;this.secondaryMin=0;this.secondaryMax=p;this.firstPaneSize="auto";this.enoughChildren=!1;this.viewSize=0;this.offset=0;this.minPos=0;this.maxPos=p;const t=window.ResizeObserver;t&&(this.observer=new t(()=>{this.rect=void 0,this.updateMinMax()}))}static get styles(){return[z]}connectedCallback(){var t;super.connectedCallback(),(t=this.observer)==null||t.observe(this)}disconnectedCallback(){var t;(t=this.observer)==null||t.unobserve(this),super.disconnectedCallback()}get splitterSize(){return this._splitterSize||(this._splitterSize=this.splitter&&Math.round(parseFloat(window.getComputedStyle(this.splitter).getPropertyValue(this.vertical?"height":"width")))||S),this._splitterSize}render(){const t={"is-resized-start":this.splitterPos===this.minPos,"is-resized-end":this.splitterPos&&this.splitterPos>this.splitterSize&&this.splitterPos===this.maxPos,"is-collapsed-start":this.splitterPos===0,"is-collapsed-end":this.splitterPos&&this.splitterPos>=Math.max(this.splitterSize,this.viewSize-this.splitterSize)};return l`
             <slot
@@ -6,3 +6,3 @@ @slotchange=${this.onContentSlotChange}
             ></slot>
-            ${this.enoughChildren?n`
+            ${this.enoughChildren?l`
                       <div
@@ -12,14 +12,14 @@ id="splitter"
                           role="separator"
-                          aria-label=${c(this.label||void 0)}
+                          aria-label=${d(this.label||void 0)}
                           aria-valuenow=${Math.round(parseFloat(this.firstPaneSize)/this.viewSize*100)}
-                          tabindex=${c(this.resizable?"0":void 0)}
+                          tabindex=${d(this.resizable?"0":void 0)}
                           @keydown=${this.onKeydown}
                           ${y({start:["pointerdown",this.onPointerdown],streamInside:["pointermove",this.onPointermove],end:[["pointerup","pointercancel","pointerleave"],this.onPointerup]})}
                       >
-                          ${this.resizable?n`
+                          ${this.resizable?l`
                                     <div id="gripper"></div>
-                                `:n``}
+                                `:c}
                       </div>
-                  `:f}
-        `}onContentSlotChange(){this.enoughChildren=this.children.length>1,this.checkResize()}onPointerdown(t){if(!this.resizable||t.button&&t.button!==0){t.preventDefault();return}this.splitter.setPointerCapture(t.pointerId),this.offset=this.getOffset()}onPointermove(t){t.preventDefault();let e=this.vertical||this.isLTR?this.getPosition(t)-this.offset:this.offset-this.getPosition(t);this.collapsible&&e<this.minPos-u&&(e=0),this.collapsible&&e>this.maxPos+u&&(e=this.viewSize-this.splitterSize),this.updatePosition(e)}onPointerup(t){this.splitter.releasePointerCapture(t.pointerId)}getOffset(){this.rect||(this.rect=this.getBoundingClientRect());const t=this.isLTR?this.rect.left:this.rect.right;return this.vertical?this.rect.top:t}getPosition(t){return this.vertical?t.clientY:t.clientX}movePosition(t,e){t.preventDefault(),this.splitterPos!==void 0&&this.updatePosition(this.splitterPos+e)}onKeydown(t){if(!this.resizable)return;let e=0;const s=this.isLTR||this.vertical;switch(t.key){case"Home":t.preventDefault(),this.updatePosition(this.collapsible?0:this.minPos);return;case"End":t.preventDefault(),this.updatePosition(this.collapsible?this.viewSize-this.splitterSize:this.maxPos);return;case"ArrowLeft":e=s?-1:1;break;case"ArrowRight":e=s?1:-1;break;case"ArrowUp":e=this.vertical?-1:1;break;case"ArrowDown":e=this.vertical?1:-1;break;case"PageUp":e=this.vertical?-1:1;break;case"PageDown":e=this.vertical?1:-1;break}if(e!==0){const o=t.key.startsWith("Page")?E:g;this.movePosition(t,o*e)}}async checkResize(){if(this.enoughChildren&&(this.updateMinMax(),this.splitterPos===void 0)){const t=await this.calcStartPos();this.updatePosition(t)}}updateMinMax(){this.viewSize=this.vertical?this.offsetHeight:this.offsetWidth,this.minPos=Math.max(this.primaryMin,this.viewSize-this.secondaryMax),this.maxPos=Math.min(this.primaryMax,this.viewSize-Math.max(this.secondaryMin,this.splitterSize))}updatePosition(t){let e=this.getLimitedPosition(t);this.collapsible&&t<=0&&(e=0),this.collapsible&&t>this.maxPos&&t>=this.viewSize-this.splitterSize&&(e=this.viewSize-this.splitterSize),e!==this.splitterPos&&(this.splitterPos=e,this.dispatchChangeEvent())}getLimitedPosition(t){return t<=this.minPos?this.minPos:t>=this.maxPos?this.maxPos:Math.max(this.minPos,Math.min(this.maxPos,t))}async calcStartPos(){if(this.primarySize!==void 0&&/^\d+(px)?$/.test(this.primarySize))return parseInt(this.primarySize,10);if(this.primarySize!==void 0&&/^\d+%$/.test(this.primarySize))return parseInt(this.primarySize,10)*this.viewSize/100;if(this.primarySize==="auto"){this.firstPaneSize="auto";const e=this.paneSlot.assignedNodes({flatten:!0}).find(s=>s instanceof HTMLElement);if(typeof e.updateComplete!="undefined"&&await e.updateComplete,e){const s=window.getComputedStyle(e).getPropertyValue(this.vertical?"height":"width"),o=parseFloat(s);if(!isNaN(o))return this.getLimitedPosition(Math.ceil(o))}}return this.viewSize/2}dispatchChangeEvent(){const t=new Event("change",{bubbles:!0,composed:!0});this.dispatchEvent(t)}willUpdate(t){(!this.hasUpdated||t.has("primarySize"))&&(this.splitterPos=void 0,this.checkResize()),t.has("splitterPos")&&this.splitterPos!==void 0&&this.enoughChildren&&(this.firstPaneSize=`${Math.round(this.splitterPos)}px`)}}i([r({type:Boolean,reflect:!0})],SplitView.prototype,"vertical",2),i([r({type:Boolean,reflect:!0})],SplitView.prototype,"resizable",2),i([r({type:Boolean,reflect:!0})],SplitView.prototype,"collapsible",2),i([r({type:Number,attribute:"primary-min"})],SplitView.prototype,"primaryMin",2),i([r({type:Number,attribute:"primary-max"})],SplitView.prototype,"primaryMax",2),i([r({type:String,attribute:"primary-size"})],SplitView.prototype,"primarySize",2),i([r({type:Number,attribute:"secondary-min"})],SplitView.prototype,"secondaryMin",2),i([r({type:Number,attribute:"secondary-max"})],SplitView.prototype,"secondaryMax",2),i([r({type:Number,reflect:!0,attribute:"splitter-pos"})],SplitView.prototype,"splitterPos",2),i([r({type:String,attribute:!1})],SplitView.prototype,"firstPaneSize",2),i([r()],SplitView.prototype,"label",2),i([r({type:Boolean,attribute:!1})],SplitView.prototype,"enoughChildren",2),i([r({type:Number})],SplitView.prototype,"viewSize",2),i([d("slot")],SplitView.prototype,"paneSlot",2),i([d("#splitter")],SplitView.prototype,"splitter",2);
+                  `:c}
+        `}onContentSlotChange(){this.enoughChildren=this.children.length>1,this.checkResize()}onPointerdown(t){if(!this.resizable||t.button&&t.button!==0){t.preventDefault();return}this.splitter.setPointerCapture(t.pointerId),this.offset=this.getOffset()}onPointermove(t){t.preventDefault();let e=this.vertical||this.isLTR?this.getPosition(t)-this.offset:this.offset-this.getPosition(t);this.collapsible&&e<this.minPos-m&&(e=0),this.collapsible&&e>this.maxPos+m&&(e=this.viewSize-this.splitterSize),this.updatePosition(e)}onPointerup(t){this.splitter.releasePointerCapture(t.pointerId)}getOffset(){this.rect||(this.rect=this.getBoundingClientRect());const t=this.isLTR?this.rect.left:this.rect.right;return this.vertical?this.rect.top:t}getPosition(t){return this.vertical?t.clientY:t.clientX}movePosition(t,e){t.preventDefault(),this.splitterPos!==void 0&&this.updatePosition(this.splitterPos+e)}onKeydown(t){if(!this.resizable)return;let e=0;const s=this.isLTR||this.vertical;switch(t.key){case"Home":t.preventDefault(),this.updatePosition(this.collapsible?0:this.minPos);return;case"End":t.preventDefault(),this.updatePosition(this.collapsible?this.viewSize-this.splitterSize:this.maxPos);return;case"ArrowLeft":e=s?-1:1;break;case"ArrowRight":e=s?1:-1;break;case"ArrowUp":e=this.vertical?-1:1;break;case"ArrowDown":e=this.vertical?1:-1;break;case"PageUp":e=this.vertical?-1:1;break;case"PageDown":e=this.vertical?1:-1;break}if(e!==0){const o=t.key.startsWith("Page")?E:g;this.movePosition(t,o*e)}}async checkResize(){if(this.enoughChildren&&(this.updateMinMax(),this.splitterPos===void 0)){const t=await this.calcStartPos();this.updatePosition(t)}}updateMinMax(){this.viewSize=this.vertical?this.offsetHeight:this.offsetWidth,this.minPos=Math.max(this.primaryMin,this.viewSize-this.secondaryMax),this.maxPos=Math.min(this.primaryMax,this.viewSize-Math.max(this.secondaryMin,this.splitterSize))}updatePosition(t){let e=this.getLimitedPosition(t);this.collapsible&&t<=0&&(e=0),this.collapsible&&t>this.maxPos&&t>=this.viewSize-this.splitterSize&&(e=this.viewSize-this.splitterSize),e!==this.splitterPos&&(this.splitterPos=e,this.dispatchChangeEvent())}getLimitedPosition(t){return t<=this.minPos?this.minPos:t>=this.maxPos?this.maxPos:Math.max(this.minPos,Math.min(this.maxPos,t))}async calcStartPos(){if(this.primarySize!==void 0&&/^\d+(px)?$/.test(this.primarySize))return parseInt(this.primarySize,10);if(this.primarySize!==void 0&&/^\d+%$/.test(this.primarySize))return parseInt(this.primarySize,10)*this.viewSize/100;if(this.primarySize==="auto"){this.firstPaneSize="auto";const e=this.paneSlot.assignedNodes({flatten:!0}).find(s=>s instanceof HTMLElement);if(typeof e.updateComplete!="undefined"&&await e.updateComplete,e){const s=window.getComputedStyle(e).getPropertyValue(this.vertical?"height":"width"),o=parseFloat(s);if(!isNaN(o))return this.getLimitedPosition(Math.ceil(o))}}return this.viewSize/2}dispatchChangeEvent(){const t=new Event("change",{bubbles:!0,composed:!0});this.dispatchEvent(t)}willUpdate(t){(!this.hasUpdated||t.has("primarySize"))&&(this.splitterPos=void 0,this.checkResize()),t.has("splitterPos")&&this.splitterPos!==void 0&&this.enoughChildren&&(this.firstPaneSize=`${Math.round(this.splitterPos)}px`)}}i([r({type:Boolean,reflect:!0})],SplitView.prototype,"vertical",2),i([r({type:Boolean,reflect:!0})],SplitView.prototype,"resizable",2),i([r({type:Boolean,reflect:!0})],SplitView.prototype,"collapsible",2),i([r({type:Number,attribute:"primary-min"})],SplitView.prototype,"primaryMin",2),i([r({type:Number,attribute:"primary-max"})],SplitView.prototype,"primaryMax",2),i([r({type:String,attribute:"primary-size"})],SplitView.prototype,"primarySize",2),i([r({type:Number,attribute:"secondary-min"})],SplitView.prototype,"secondaryMin",2),i([r({type:Number,attribute:"secondary-max"})],SplitView.prototype,"secondaryMax",2),i([r({type:Number,reflect:!0,attribute:"splitter-pos"})],SplitView.prototype,"splitterPos",2),i([r({type:String,attribute:!1})],SplitView.prototype,"firstPaneSize",2),i([r()],SplitView.prototype,"label",2),i([r({type:Boolean,attribute:!1})],SplitView.prototype,"enoughChildren",2),i([r({type:Number})],SplitView.prototype,"viewSize",2),i([u("slot")],SplitView.prototype,"paneSlot",2),i([u("#splitter")],SplitView.prototype,"splitter",2);
 //# sourceMappingURL=SplitView.js.map

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

313486

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@spectrum-web-components/base@0.38.0(transitive)

• - Removed@spectrum-web-components/base@0.37.0(transitive)

• Updated@spectrum-web-components/base@^0.38.0