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

Comparing version 0.40.0 to 0.40.1

package.json

 {
     "name": "@spectrum-web-components/split-view",
-    "version": "0.40.0",
+    "version": "0.40.1",
     "publishConfig": {
@@ -64,3 +64,3 @@ "access": "public"
     "dependencies": {
-        "@spectrum-web-components/base": "^0.40.0"
+        "@spectrum-web-components/base": "^0.40.1"
     },
@@ -76,3 +76,3 @@ "devDependencies": {
     ],
-    "gitHead": "24d5569a839da94892ecfd125428779587ffb1f5"
+    "gitHead": "a75c4f83094c505d64658dbc7de20b5f18a8fde1"
 }

README.md

@@ -41,3 +41,9 @@ ## Description
 ```html
-<sp-split-view resizable primary-min="50" secondary-min="50" primary-size="100">
+<sp-split-view
+    resizable
+    primary-min="50"
+    secondary-min="50"
+    primary-size="100"
+    label="Resize the horizontal panels"
+>
     <div>
@@ -63,3 +69,3 @@ <h1>Left panel</h1>
 ```html
-<sp-split-view resizable>
+<sp-split-view resizable label="Resize the horizontal collapsible panels">
     <div>
@@ -100,2 +106,3 @@ <h1>Left panel</h1>
     secondary-min="50"
+    label="Resize the vertical panels"
 >
@@ -122,3 +129,8 @@ <div>
 ```html
-<sp-split-view vertical resizable style="height: 300px;">
+<sp-split-view
+    vertical
+    resizable
+    style="height: 300px;"
+    label="Resize the vertical collapsible panels"
+>
     <div>
@@ -125,0 +137,0 @@ <h1>Top panel</h1>

src/spectrum-split-view.css.dev.js

@@ -78,6 +78,2 @@ "use strict";
 )
-);outline:none}:host([resizable]) #splitter.focus-visible{background-color:var(
---highcontrast-splitview-handle-background-color-focus,var(
---mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
-)
 );outline:none}:host([resizable]) #splitter:focus-visible{background-color:var(
@@ -95,10 +91,2 @@ --highcontrast-splitview-handle-background-color-focus,var(
 )
-)}:host([resizable]) #splitter.focus-visible #gripper{border-color:var(
---highcontrast-splitview-handle-background-color-focus,var(
---mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
-)
-);box-shadow:0 0 0 1px var(
---highcontrast-splitview-handle-background-color-focus,var(
---mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
-)
 )}:host([resizable]) #splitter:focus-visible #gripper{border-color:var(
@@ -116,6 +104,2 @@ --highcontrast-splitview-handle-background-color-focus,var(
 )
-)}:host([resizable]) #splitter.focus-visible #gripper:before{background-color:var(
---highcontrast-splitview-handle-background-color-focus,var(
---mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
-)
 )}:host([resizable]) #splitter:focus-visible #gripper:before{background-color:var(
@@ -122,0 +106,0 @@ --highcontrast-splitview-handle-background-color-focus,var(

src/spectrum-split-view.css.js

@@ -76,6 +76,2 @@ "use strict";import{css as r}from"@spectrum-web-components/base";const e=r`
 )
-);outline:none}:host([resizable]) #splitter.focus-visible{background-color:var(
---highcontrast-splitview-handle-background-color-focus,var(
---mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
-)
 );outline:none}:host([resizable]) #splitter:focus-visible{background-color:var(
@@ -93,10 +89,2 @@ --highcontrast-splitview-handle-background-color-focus,var(
 )
-)}:host([resizable]) #splitter.focus-visible #gripper{border-color:var(
---highcontrast-splitview-handle-background-color-focus,var(
---mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
-)
-);box-shadow:0 0 0 1px var(
---highcontrast-splitview-handle-background-color-focus,var(
---mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
-)
 )}:host([resizable]) #splitter:focus-visible #gripper{border-color:var(
@@ -114,6 +102,2 @@ --highcontrast-splitview-handle-background-color-focus,var(
 )
-)}:host([resizable]) #splitter.focus-visible #gripper:before{background-color:var(
---highcontrast-splitview-handle-background-color-focus,var(
---mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
-)
 )}:host([resizable]) #splitter:focus-visible #gripper:before{background-color:var(
@@ -120,0 +104,0 @@ --highcontrast-splitview-handle-background-color-focus,var(

src/split-view.css.dev.js

@@ -78,6 +78,2 @@ "use strict";
 )
-);outline:none}:host([resizable]) #splitter.focus-visible{background-color:var(
---highcontrast-splitview-handle-background-color-focus,var(
---mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
-)
 );outline:none}:host([resizable]) #splitter:focus-visible{background-color:var(
@@ -95,10 +91,2 @@ --highcontrast-splitview-handle-background-color-focus,var(
 )
-)}:host([resizable]) #splitter.focus-visible #gripper{border-color:var(
---highcontrast-splitview-handle-background-color-focus,var(
---mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
-)
-);box-shadow:0 0 0 1px var(
---highcontrast-splitview-handle-background-color-focus,var(
---mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
-)
 )}:host([resizable]) #splitter:focus-visible #gripper{border-color:var(
@@ -116,6 +104,2 @@ --highcontrast-splitview-handle-background-color-focus,var(
 )
-)}:host([resizable]) #splitter.focus-visible #gripper:before{background-color:var(
---highcontrast-splitview-handle-background-color-focus,var(
---mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
-)
 )}:host([resizable]) #splitter:focus-visible #gripper:before{background-color:var(
@@ -122,0 +106,0 @@ --highcontrast-splitview-handle-background-color-focus,var(

src/split-view.css.js

@@ -76,6 +76,2 @@ "use strict";import{css as r}from"@spectrum-web-components/base";const e=r`
 )
-);outline:none}:host([resizable]) #splitter.focus-visible{background-color:var(
---highcontrast-splitview-handle-background-color-focus,var(
---mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
-)
 );outline:none}:host([resizable]) #splitter:focus-visible{background-color:var(
@@ -93,10 +89,2 @@ --highcontrast-splitview-handle-background-color-focus,var(
 )
-)}:host([resizable]) #splitter.focus-visible #gripper{border-color:var(
---highcontrast-splitview-handle-background-color-focus,var(
---mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
-)
-);box-shadow:0 0 0 1px var(
---highcontrast-splitview-handle-background-color-focus,var(
---mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
-)
 )}:host([resizable]) #splitter:focus-visible #gripper{border-color:var(
@@ -114,6 +102,2 @@ --highcontrast-splitview-handle-background-color-focus,var(
 )
-)}:host([resizable]) #splitter.focus-visible #gripper:before{background-color:var(
---highcontrast-splitview-handle-background-color-focus,var(
---mod-splitview-handle-background-color-focus,var(--spectrum-splitview-handle-background-color-focus)
-)
 )}:host([resizable]) #splitter:focus-visible #gripper:before{background-color:var(
@@ -120,0 +104,0 @@ --highcontrast-splitview-handle-background-color-focus,var(

src/SplitView.dev.js

@@ -98,3 +98,3 @@ "use strict";
     };
-    const label = this.label || this.resizable ? "Resize the panels" : void 0;
+    const label = this.label || (this.resizable ? "Resize the panels" : void 0);
     return html`
@@ -101,0 +101,0 @@ <slot

src/SplitView.js

@@ -1,2 +0,2 @@
-"use strict";var v=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var s=(l,a,t,e)=>{for(var i=e>1?void 0:e?f(a,t):a,o=l.length-1,h;o>=0;o--)(h=l[o])&&(i=(e?h(a,t,i):h(i))||i);return e&&i&&v(a,t,i),i};import{html as p,nothing as c,SpectrumElement as b}from"@spectrum-web-components/base";import{classMap as P,ifDefined as n}from"@spectrum-web-components/base/src/directives.js";import{property as r,query as u,state as z}from"@spectrum-web-components/base/src/decorators.js";import{streamingListener as y}from"@spectrum-web-components/base/src/streaming-listener.js";import E from"./split-view.css.js";const d=3840,S=2,g=10,M=50,m=50;export class SplitView extends b{constructor(){super();this.vertical=!1;this.resizable=!1;this.collapsible=!1;this.primaryMin=0;this.primaryMax=d;this.secondaryMin=0;this.secondaryMax=d;this.firstPaneSize="auto";this.enoughChildren=!1;this.viewSize=0;this.offset=0;this.minPos=0;this.maxPos=d;this.controlledElIDApplied=!1;const t=window.ResizeObserver;t&&(this.observer=new t(()=>{this.rect=void 0,this.updateMinMax()}))}static get styles(){return[E]}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(){var i,o;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)},e=this.label||this.resizable?"Resize the panels":void 0;return p`
+"use strict";var v=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var s=(l,a,t,e)=>{for(var i=e>1?void 0:e?f(a,t):a,o=l.length-1,h;o>=0;o--)(h=l[o])&&(i=(e?h(a,t,i):h(i))||i);return e&&i&&v(a,t,i),i};import{html as p,nothing as c,SpectrumElement as b}from"@spectrum-web-components/base";import{classMap as P,ifDefined as n}from"@spectrum-web-components/base/src/directives.js";import{property as r,query as u,state as z}from"@spectrum-web-components/base/src/decorators.js";import{streamingListener as y}from"@spectrum-web-components/base/src/streaming-listener.js";import E from"./split-view.css.js";const d=3840,S=2,g=10,M=50,m=50;export class SplitView extends b{constructor(){super();this.vertical=!1;this.resizable=!1;this.collapsible=!1;this.primaryMin=0;this.primaryMax=d;this.secondaryMin=0;this.secondaryMax=d;this.firstPaneSize="auto";this.enoughChildren=!1;this.viewSize=0;this.offset=0;this.minPos=0;this.maxPos=d;this.controlledElIDApplied=!1;const t=window.ResizeObserver;t&&(this.observer=new t(()=>{this.rect=void 0,this.updateMinMax()}))}static get styles(){return[E]}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(){var i,o;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)},e=this.label||(this.resizable?"Resize the panels":void 0);return p`
             <slot
@@ -3,0 +3,0 @@ id=${n(this.resizable?(i=this.controlledEl)==null?void 0:i.id:void 0)}

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

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

Number of lines in readme file

201

increased by6.35%

Worsened metrics

Total package byte prevSize

331796

decreased by-2.22%

Lines of code

3127

decreased by-2.01%

Dependency changes

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