Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@spectrum-web-components/split-view
Advanced tools
@spectrum-web-components/split-view - npm Package Compare versions
Comparing version 0.2.8-alpha.59 to 0.2.8
| { | ||
| "version": "experimental", | ||
| "tags": [ | ||
| "schemaVersion": "1.0.0", | ||
| "readme": "", | ||
| "modules": [ | ||
| { | ||
| "name": "sp-split-view", | ||
| "path": "./sp-split-view.d.ts", | ||
| "attributes": [ | ||
| "kind": "javascript-module", | ||
| "path": "src/SplitView.ts", | ||
| "declarations": [ | ||
| { | ||
| "name": "vertical", | ||
| "type": "boolean", | ||
| "default": "false" | ||
| }, | ||
| { | ||
| "name": "resizable", | ||
| "type": "boolean", | ||
| "default": "false" | ||
| }, | ||
| { | ||
| "name": "collapsible", | ||
| "type": "boolean", | ||
| "default": "false" | ||
| }, | ||
| { | ||
| "name": "primary-min", | ||
| "description": "The minimum size of the primary pane", | ||
| "type": "number", | ||
| "default": "0" | ||
| }, | ||
| { | ||
| "name": "primary-max", | ||
| "description": "The maximum size of the primary pane", | ||
| "type": "number", | ||
| "default": "3840" | ||
| }, | ||
| { | ||
| "name": "primary-size", | ||
| "description": "The start size of the primary pane, can be a real pixel number|string, percentage or \"auto\"\nFor example: \"100\", \"120px\", \"75%\" or \"auto\" are valid values", | ||
| "type": "number | number + \"px\" | number + \"%\" | \"auto\"" | ||
| }, | ||
| { | ||
| "name": "secondary-min", | ||
| "description": "The minimum size of the secondary pane", | ||
| "type": "number", | ||
| "default": "0" | ||
| }, | ||
| { | ||
| "name": "secondary-max", | ||
| "description": "The maximum size of the secondary pane", | ||
| "type": "number", | ||
| "default": "3840" | ||
| }, | ||
| { | ||
| "name": "splitter-pos", | ||
| "description": "The current splitter position of split-view", | ||
| "type": "number | undefined" | ||
| }, | ||
| { | ||
| "name": "label", | ||
| "type": "string | undefined" | ||
| "kind": "class", | ||
| "description": "", | ||
| "name": "SplitView", | ||
| "slots": [ | ||
| { | ||
| "description": "sibling elements to be sized by the element attritubes", | ||
| "name": "Two" | ||
| } | ||
| ], | ||
| "members": [ | ||
| { | ||
| "kind": "field", | ||
| "name": "vertical", | ||
| "type": { | ||
| "text": "boolean" | ||
| }, | ||
| "privacy": "public", | ||
| "default": "false", | ||
| "attribute": "vertical", | ||
| "reflects": true | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "resizable", | ||
| "type": { | ||
| "text": "boolean" | ||
| }, | ||
| "privacy": "public", | ||
| "default": "false", | ||
| "attribute": "resizable", | ||
| "reflects": true | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "collapsible", | ||
| "type": { | ||
| "text": "boolean" | ||
| }, | ||
| "privacy": "public", | ||
| "default": "false", | ||
| "attribute": "collapsible", | ||
| "reflects": true | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "primaryMin", | ||
| "type": { | ||
| "text": "number" | ||
| }, | ||
| "privacy": "public", | ||
| "default": "0", | ||
| "description": "The minimum size of the primary pane", | ||
| "attribute": "primary-min" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "primaryMax", | ||
| "privacy": "public", | ||
| "default": "3840", | ||
| "description": "The maximum size of the primary pane", | ||
| "attribute": "primary-max", | ||
| "type": { | ||
| "text": "number" | ||
| } | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "primarySize", | ||
| "type": { | ||
| "text": "number | number" | ||
| }, | ||
| "privacy": "public", | ||
| "description": "+ \"px\" | number + \"%\" | \"auto\"}", | ||
| "attribute": "primary-size" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "secondaryMin", | ||
| "type": { | ||
| "text": "number" | ||
| }, | ||
| "privacy": "public", | ||
| "default": "0", | ||
| "description": "The minimum size of the secondary pane", | ||
| "attribute": "secondary-min" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "secondaryMax", | ||
| "privacy": "public", | ||
| "default": "3840", | ||
| "description": "The maximum size of the secondary pane", | ||
| "attribute": "secondary-max", | ||
| "type": { | ||
| "text": "number" | ||
| } | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "splitterPos", | ||
| "type": { | ||
| "text": "number" | ||
| }, | ||
| "privacy": "public", | ||
| "description": "The current splitter position of split-view", | ||
| "attribute": "splitter-pos", | ||
| "reflects": true | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "firstPaneSize", | ||
| "type": { | ||
| "text": "string" | ||
| }, | ||
| "privacy": "private", | ||
| "default": "'auto'", | ||
| "description": "The current size of first pane of split-view" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "label", | ||
| "type": { | ||
| "text": "string" | ||
| }, | ||
| "privacy": "public", | ||
| "attribute": "label" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "enoughChildren", | ||
| "type": { | ||
| "text": "boolean" | ||
| }, | ||
| "privacy": "private", | ||
| "default": "false" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "viewSize", | ||
| "type": { | ||
| "text": "number" | ||
| }, | ||
| "privacy": "private", | ||
| "default": "0", | ||
| "attribute": "viewSize" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "paneSlot", | ||
| "type": { | ||
| "text": "HTMLSlotElement" | ||
| }, | ||
| "privacy": "private" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "splitter", | ||
| "type": { | ||
| "text": "HTMLDivElement" | ||
| }, | ||
| "privacy": "private" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "offset", | ||
| "type": { | ||
| "text": "number" | ||
| }, | ||
| "privacy": "private", | ||
| "default": "0" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "minPos", | ||
| "type": { | ||
| "text": "number" | ||
| }, | ||
| "privacy": "private", | ||
| "default": "0" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "maxPos", | ||
| "privacy": "private", | ||
| "default": "3840", | ||
| "type": { | ||
| "text": "number" | ||
| } | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "observer", | ||
| "type": { | ||
| "text": "WithSWCResizeObserver['ResizeObserver']" | ||
| }, | ||
| "privacy": "private" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "rect", | ||
| "type": { | ||
| "text": "DOMRect" | ||
| }, | ||
| "privacy": "private" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "_splitterSize", | ||
| "type": { | ||
| "text": "number" | ||
| }, | ||
| "privacy": "private" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "splitterSize", | ||
| "type": { | ||
| "text": "number" | ||
| }, | ||
| "privacy": "private" | ||
| }, | ||
| { | ||
| "kind": "method", | ||
| "name": "onContentSlotChange", | ||
| "privacy": "private", | ||
| "return": { | ||
| "type": { | ||
| "text": "void" | ||
| } | ||
| } | ||
| }, | ||
| { | ||
| "kind": "method", | ||
| "name": "onPointerdown", | ||
| "privacy": "private", | ||
| "return": { | ||
| "type": { | ||
| "text": "void" | ||
| } | ||
| }, | ||
| "parameters": [ | ||
| { | ||
| "name": "event", | ||
| "type": { | ||
| "text": "PointerEvent" | ||
| } | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "kind": "method", | ||
| "name": "onPointermove", | ||
| "privacy": "private", | ||
| "return": { | ||
| "type": { | ||
| "text": "void" | ||
| } | ||
| }, | ||
| "parameters": [ | ||
| { | ||
| "name": "event", | ||
| "type": { | ||
| "text": "PointerEvent" | ||
| } | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "kind": "method", | ||
| "name": "onPointerup", | ||
| "privacy": "private", | ||
| "return": { | ||
| "type": { | ||
| "text": "void" | ||
| } | ||
| }, | ||
| "parameters": [ | ||
| { | ||
| "name": "event", | ||
| "type": { | ||
| "text": "PointerEvent" | ||
| } | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "kind": "method", | ||
| "name": "getOffset", | ||
| "privacy": "private", | ||
| "return": { | ||
| "type": { | ||
| "text": "number" | ||
| } | ||
| } | ||
| }, | ||
| { | ||
| "kind": "method", | ||
| "name": "getPosition", | ||
| "privacy": "private", | ||
| "return": { | ||
| "type": { | ||
| "text": "number" | ||
| } | ||
| }, | ||
| "parameters": [ | ||
| { | ||
| "name": "event", | ||
| "type": { | ||
| "text": "PointerEvent" | ||
| } | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "kind": "method", | ||
| "name": "movePosition", | ||
| "privacy": "private", | ||
| "return": { | ||
| "type": { | ||
| "text": "void" | ||
| } | ||
| }, | ||
| "parameters": [ | ||
| { | ||
| "name": "event", | ||
| "type": { | ||
| "text": "KeyboardEvent" | ||
| } | ||
| }, | ||
| { | ||
| "name": "offset", | ||
| "type": { | ||
| "text": "number" | ||
| } | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "kind": "method", | ||
| "name": "onKeydown", | ||
| "privacy": "private", | ||
| "return": { | ||
| "type": { | ||
| "text": "void" | ||
| } | ||
| }, | ||
| "parameters": [ | ||
| { | ||
| "name": "event", | ||
| "type": { | ||
| "text": "KeyboardEvent" | ||
| } | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "kind": "method", | ||
| "name": "checkResize", | ||
| "privacy": "private", | ||
| "return": { | ||
| "type": { | ||
| "text": "Promise<void>" | ||
| } | ||
| } | ||
| }, | ||
| { | ||
| "kind": "method", | ||
| "name": "updateMinMax", | ||
| "privacy": "private", | ||
| "return": { | ||
| "type": { | ||
| "text": "void" | ||
| } | ||
| } | ||
| }, | ||
| { | ||
| "kind": "method", | ||
| "name": "updatePosition", | ||
| "privacy": "private", | ||
| "return": { | ||
| "type": { | ||
| "text": "void" | ||
| } | ||
| }, | ||
| "parameters": [ | ||
| { | ||
| "name": "x", | ||
| "type": { | ||
| "text": "number" | ||
| } | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "kind": "method", | ||
| "name": "getLimitedPosition", | ||
| "privacy": "private", | ||
| "return": { | ||
| "type": { | ||
| "text": "number" | ||
| } | ||
| }, | ||
| "parameters": [ | ||
| { | ||
| "name": "input", | ||
| "type": { | ||
| "text": "number" | ||
| } | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "kind": "method", | ||
| "name": "calcStartPos", | ||
| "privacy": "private", | ||
| "return": { | ||
| "type": { | ||
| "text": "Promise<number>" | ||
| } | ||
| } | ||
| }, | ||
| { | ||
| "kind": "method", | ||
| "name": "dispatchChangeEvent", | ||
| "privacy": "private", | ||
| "return": { | ||
| "type": { | ||
| "text": "void" | ||
| } | ||
| } | ||
| } | ||
| ], | ||
| "attributes": [ | ||
| { | ||
| "name": "primarySize", | ||
| "type": { | ||
| "text": "number | number" | ||
| }, | ||
| "description": "+ \"px\" | number + \"%\" | \"auto\"}", | ||
| "fieldName": "primarySize" | ||
| }, | ||
| { | ||
| "name": "vertical", | ||
| "type": { | ||
| "text": "boolean" | ||
| }, | ||
| "default": "false", | ||
| "fieldName": "vertical" | ||
| }, | ||
| { | ||
| "name": "resizable", | ||
| "type": { | ||
| "text": "boolean" | ||
| }, | ||
| "default": "false", | ||
| "fieldName": "resizable" | ||
| }, | ||
| { | ||
| "name": "collapsible", | ||
| "type": { | ||
| "text": "boolean" | ||
| }, | ||
| "default": "false", | ||
| "fieldName": "collapsible" | ||
| }, | ||
| { | ||
| "name": "primary-min", | ||
| "type": { | ||
| "text": "number" | ||
| }, | ||
| "default": "0", | ||
| "description": "The minimum size of the primary pane", | ||
| "fieldName": "primaryMin" | ||
| }, | ||
| { | ||
| "name": "primary-max", | ||
| "default": "DEFAULT_MAX_SIZE", | ||
| "description": "The maximum size of the primary pane", | ||
| "resolveInitializer": { | ||
| "module": "src/SplitView.ts" | ||
| }, | ||
| "fieldName": "primaryMax" | ||
| }, | ||
| { | ||
| "name": "primary-size", | ||
| "type": { | ||
| "text": "number | number" | ||
| }, | ||
| "description": "+ \"px\" | number + \"%\" | \"auto\"}", | ||
| "attribute": "primarySize", | ||
| "fieldName": "primarySize" | ||
| }, | ||
| { | ||
| "name": "secondary-min", | ||
| "type": { | ||
| "text": "number" | ||
| }, | ||
| "default": "0", | ||
| "description": "The minimum size of the secondary pane", | ||
| "fieldName": "secondaryMin" | ||
| }, | ||
| { | ||
| "name": "secondary-max", | ||
| "default": "DEFAULT_MAX_SIZE", | ||
| "description": "The maximum size of the secondary pane", | ||
| "resolveInitializer": { | ||
| "module": "src/SplitView.ts" | ||
| }, | ||
| "fieldName": "secondaryMax" | ||
| }, | ||
| { | ||
| "name": "splitter-pos", | ||
| "type": { | ||
| "text": "number" | ||
| }, | ||
| "description": "The current splitter position of split-view", | ||
| "fieldName": "splitterPos" | ||
| }, | ||
| { | ||
| "name": "label", | ||
| "type": { | ||
| "text": "string" | ||
| }, | ||
| "fieldName": "label" | ||
| }, | ||
| { | ||
| "name": "viewSize", | ||
| "type": { | ||
| "text": "number" | ||
| }, | ||
| "default": "0", | ||
| "fieldName": "viewSize" | ||
| } | ||
| ], | ||
| "superclass": { | ||
| "name": "SpectrumElement", | ||
| "package": "@spectrum-web-components/base" | ||
| }, | ||
| "tagName": "sp-split-view", | ||
| "customElement": true | ||
| } | ||
| ], | ||
| "properties": [ | ||
| "exports": [ | ||
| { | ||
| "name": "vertical", | ||
| "attribute": "vertical", | ||
| "type": "boolean", | ||
| "default": "false" | ||
| }, | ||
| "kind": "js", | ||
| "name": "SplitView", | ||
| "declaration": { | ||
| "name": "SplitView", | ||
| "module": "src/SplitView.ts" | ||
| } | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "kind": "javascript-module", | ||
| "path": "src/index.ts", | ||
| "declarations": [], | ||
| "exports": [ | ||
| { | ||
| "name": "resizable", | ||
| "attribute": "resizable", | ||
| "type": "boolean", | ||
| "default": "false" | ||
| }, | ||
| "kind": "js", | ||
| "name": "*", | ||
| "declaration": { | ||
| "name": "*", | ||
| "package": "./SplitView.js" | ||
| } | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "kind": "javascript-module", | ||
| "path": "src/spectrum-split-view.css.ts", | ||
| "declarations": [ | ||
| { | ||
| "name": "collapsible", | ||
| "attribute": "collapsible", | ||
| "type": "boolean", | ||
| "default": "false" | ||
| }, | ||
| { | ||
| "name": "primaryMin", | ||
| "attribute": "primary-min", | ||
| "description": "The minimum size of the primary pane", | ||
| "type": "number", | ||
| "default": "0" | ||
| }, | ||
| { | ||
| "name": "primaryMax", | ||
| "attribute": "primary-max", | ||
| "description": "The maximum size of the primary pane", | ||
| "type": "number", | ||
| "default": "3840" | ||
| }, | ||
| { | ||
| "name": "primarySize", | ||
| "attribute": "primary-size", | ||
| "description": "The start size of the primary pane, can be a real pixel number|string, percentage or \"auto\"\nFor example: \"100\", \"120px\", \"75%\" or \"auto\" are valid values", | ||
| "type": "number | number + \"px\" | number + \"%\" | \"auto\"" | ||
| }, | ||
| { | ||
| "name": "secondaryMin", | ||
| "attribute": "secondary-min", | ||
| "description": "The minimum size of the secondary pane", | ||
| "type": "number", | ||
| "default": "0" | ||
| }, | ||
| { | ||
| "name": "secondaryMax", | ||
| "attribute": "secondary-max", | ||
| "description": "The maximum size of the secondary pane", | ||
| "type": "number", | ||
| "default": "3840" | ||
| }, | ||
| { | ||
| "name": "splitterPos", | ||
| "attribute": "splitter-pos", | ||
| "description": "The current splitter position of split-view", | ||
| "type": "number | undefined" | ||
| }, | ||
| { | ||
| "name": "label", | ||
| "attribute": "label", | ||
| "type": "string | undefined" | ||
| "kind": "variable", | ||
| "name": "styles", | ||
| "default": "css`\n:host{--spectrum-splitview-vertical-width:100%;--spectrum-splitview-vertical-gripper-width:50%;--spectrum-splitview-vertical-gripper-outer-width:100%;--spectrum-splitview-vertical-gripper-reset:0;display:flex;overflow:hidden}::slotted(*){height:100%}:host([dir=ltr]) #gripper{left:calc((var(--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)))/2*-1)}:host([dir=rtl]) #gripper{right:calc((var(--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)))/2*-1)}#gripper{content:\"\";display:block;position:absolute;border-style:solid;border-radius:var(--spectrum-dragbar-gripper-border-radius,var(--spectrum-alias-border-radius-small));top:50%;transform:translateY(-50%);width:var(--spectrum-dragbar-gripper-width,var(--spectrum-global-dimension-static-size-50));height:var(--spectrum-dragbar-gripper-height,var(--spectrum-global-dimension-static-size-200));border-width:var(--spectrum-dragbar-gripper-border-width-vertical,4px) var(--spectrum-dragbar-gripper-border-width-horizontal,3px)}#splitter{position:relative;-webkit-user-select:none;user-select:none;width:var(--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25));height:100%;z-index:1}:host([dir=ltr]) #splitter.is-collapsed-end #gripper:before,:host([dir=ltr]) #splitter.is-collapsed-start #gripper:before{left:calc(50% - var(--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25))/2)}:host([dir=rtl]) #splitter.is-collapsed-end #gripper:before,:host([dir=rtl]) #splitter.is-collapsed-start #gripper:before{right:calc(50% - var(--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25))/2)}#splitter.is-collapsed-end #gripper:before,#splitter.is-collapsed-start #gripper:before{content:\"\";position:absolute;top:0;width:var(--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25));height:100%}:host([dir=ltr]) #splitter.is-collapsed-start #gripper{left:0}:host([dir=rtl]) #splitter.is-collapsed-start #gripper{right:0}:host([dir=ltr]) #splitter.is-collapsed-end #gripper{right:0}:host([dir=rtl]) #splitter.is-collapsed-end #gripper{left:0}:host([dir=ltr]) #splitter.is-collapsed-end #gripper{left:auto}:host([dir=rtl]) #splitter.is-collapsed-end #gripper{right:auto}:host([vertical]){flex-direction:column}:host([vertical]) ::slotted(*){height:auto;width:var(--spectrum-splitview-vertical-width)}:host([dir=ltr][vertical]) #gripper{left:var(--spectrum-splitview-vertical-gripper-width)}:host([dir=rtl][vertical]) #gripper{right:var(--spectrum-splitview-vertical-gripper-width)}:host([vertical]) #gripper{top:calc((var(--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)))/2*-1);transform:translate(calc(-1*var(--spectrum-splitview-vertical-gripper-width)));width:var(--spectrum-dragbar-gripper-height,var(--spectrum-global-dimension-static-size-200));height:var(--spectrum-dragbar-gripper-width,var(--spectrum-global-dimension-static-size-50));border-width:var(--spectrum-dragbar-gripper-border-width-horizontal,3px) var(--spectrum-dragbar-gripper-border-width-vertical,4px)}:host([vertical]) #splitter{width:var(--spectrum-splitview-vertical-width);height:var(--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25))}:host([dir=ltr][vertical]) #splitter.is-collapsed-end #gripper,:host([dir=ltr][vertical]) #splitter.is-collapsed-start #gripper{left:var(--spectrum-splitview-vertical-gripper-width)}:host([dir=rtl][vertical]) #splitter.is-collapsed-end #gripper,:host([dir=rtl][vertical]) #splitter.is-collapsed-start #gripper{right:var(--spectrum-splitview-vertical-gripper-width)}:host([dir=ltr][vertical]) #splitter.is-collapsed-end #gripper:before,:host([dir=ltr][vertical]) #splitter.is-collapsed-start #gripper:before{left:var(--spectrum-splitview-vertical-gripper-reset)}:host([dir=rtl][vertical]) #splitter.is-collapsed-end #gripper:before,:host([dir=rtl][vertical]) #splitter.is-collapsed-start #gripper:before{right:var(--spectrum-splitview-vertical-gripper-reset)}:host([vertical]) #splitter.is-collapsed-end #gripper:before,:host([vertical]) #splitter.is-collapsed-start #gripper:before{top:calc(var(--spectrum-splitview-vertical-gripper-width) - var(--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25))/2);width:var(--spectrum-splitview-vertical-gripper-outer-width);height:var(--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25))}:host([vertical]) #splitter.is-collapsed-start #gripper{top:var(--spectrum-splitview-vertical-gripper-reset)}:host([vertical]) #splitter.is-collapsed-end #gripper{top:auto;bottom:var(--spectrum-splitview-vertical-gripper-reset)}::slotted(*){background-color:var(--spectrum-panel-background-color,var(--spectrum-global-color-gray-100))}#splitter{background-color:var(--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300))}#gripper{border-color:var(--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300))}#gripper:before{background-color:var(--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300))}:host([resizable]) #splitter.is-hovered,:host([resizable]) #splitter:hover{background-color:var(--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400))}:host([resizable]) #splitter.is-hovered #gripper,:host([resizable]) #splitter:hover #gripper{border-color:var(--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400))}:host([resizable]) #splitter.is-hovered #gripper:before,:host([resizable]) #splitter:hover #gripper:before{background-color:var(--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400))}:host([resizable]) #splitter.is-active,:host([resizable]) #splitter:active{background-color:var(--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800))}:host([resizable]) #splitter.is-active #gripper,:host([resizable]) #splitter:active #gripper{border-color:var(--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800))}:host([resizable]) #splitter.is-active #gripper:before,:host([resizable]) #splitter:active #gripper:before{background-color:var(--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800))}:host([resizable]) #splitter:focus{outline:none}:host([resizable]) #splitter.focus-visible{background-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible{background-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter:focus-visible{background-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible #gripper{border-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400));box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible #gripper{border-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400));box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter:focus-visible #gripper{border-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400));box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible #gripper:before{background-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible #gripper:before{background-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter:focus-visible #gripper:before{background-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}\n`" | ||
| } | ||
| ], | ||
| "events": [ | ||
| "exports": [ | ||
| { | ||
| "name": "change" | ||
| "kind": "js", | ||
| "name": "default", | ||
| "declaration": { | ||
| "name": "styles", | ||
| "module": "src/spectrum-split-view.css.ts" | ||
| } | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "kind": "javascript-module", | ||
| "path": "src/split-view.css.ts", | ||
| "declarations": [ | ||
| { | ||
| "kind": "variable", | ||
| "name": "styles", | ||
| "default": "css`\n:host{--spectrum-splitview-vertical-width:100%;--spectrum-splitview-vertical-gripper-width:50%;--spectrum-splitview-vertical-gripper-outer-width:100%;--spectrum-splitview-vertical-gripper-reset:0;display:flex;overflow:hidden}::slotted(*){height:100%}:host([dir=ltr]) #gripper{left:calc((var(--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)))/2*-1)}:host([dir=rtl]) #gripper{right:calc((var(--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)))/2*-1)}#gripper{content:\"\";display:block;position:absolute;border-style:solid;border-radius:var(--spectrum-dragbar-gripper-border-radius,var(--spectrum-alias-border-radius-small));top:50%;transform:translateY(-50%);width:var(--spectrum-dragbar-gripper-width,var(--spectrum-global-dimension-static-size-50));height:var(--spectrum-dragbar-gripper-height,var(--spectrum-global-dimension-static-size-200));border-width:var(--spectrum-dragbar-gripper-border-width-vertical,4px) var(--spectrum-dragbar-gripper-border-width-horizontal,3px)}#splitter{position:relative;-webkit-user-select:none;user-select:none;width:var(--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25));height:100%;z-index:1}:host([dir=ltr]) #splitter.is-collapsed-end #gripper:before,:host([dir=ltr]) #splitter.is-collapsed-start #gripper:before{left:calc(50% - var(--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25))/2)}:host([dir=rtl]) #splitter.is-collapsed-end #gripper:before,:host([dir=rtl]) #splitter.is-collapsed-start #gripper:before{right:calc(50% - var(--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25))/2)}#splitter.is-collapsed-end #gripper:before,#splitter.is-collapsed-start #gripper:before{content:\"\";position:absolute;top:0;width:var(--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25));height:100%}:host([dir=ltr]) #splitter.is-collapsed-start #gripper{left:0}:host([dir=rtl]) #splitter.is-collapsed-start #gripper{right:0}:host([dir=ltr]) #splitter.is-collapsed-end #gripper{right:0}:host([dir=rtl]) #splitter.is-collapsed-end #gripper{left:0}:host([dir=ltr]) #splitter.is-collapsed-end #gripper{left:auto}:host([dir=rtl]) #splitter.is-collapsed-end #gripper{right:auto}:host([vertical]){flex-direction:column}:host([vertical]) ::slotted(*){height:auto;width:var(--spectrum-splitview-vertical-width)}:host([dir=ltr][vertical]) #gripper{left:var(--spectrum-splitview-vertical-gripper-width)}:host([dir=rtl][vertical]) #gripper{right:var(--spectrum-splitview-vertical-gripper-width)}:host([vertical]) #gripper{top:calc((var(--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)))/2*-1);transform:translate(calc(-1*var(--spectrum-splitview-vertical-gripper-width)));width:var(--spectrum-dragbar-gripper-height,var(--spectrum-global-dimension-static-size-200));height:var(--spectrum-dragbar-gripper-width,var(--spectrum-global-dimension-static-size-50));border-width:var(--spectrum-dragbar-gripper-border-width-horizontal,3px) var(--spectrum-dragbar-gripper-border-width-vertical,4px)}:host([vertical]) #splitter{width:var(--spectrum-splitview-vertical-width);height:var(--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25))}:host([dir=ltr][vertical]) #splitter.is-collapsed-end #gripper,:host([dir=ltr][vertical]) #splitter.is-collapsed-start #gripper{left:var(--spectrum-splitview-vertical-gripper-width)}:host([dir=rtl][vertical]) #splitter.is-collapsed-end #gripper,:host([dir=rtl][vertical]) #splitter.is-collapsed-start #gripper{right:var(--spectrum-splitview-vertical-gripper-width)}:host([dir=ltr][vertical]) #splitter.is-collapsed-end #gripper:before,:host([dir=ltr][vertical]) #splitter.is-collapsed-start #gripper:before{left:var(--spectrum-splitview-vertical-gripper-reset)}:host([dir=rtl][vertical]) #splitter.is-collapsed-end #gripper:before,:host([dir=rtl][vertical]) #splitter.is-collapsed-start #gripper:before{right:var(--spectrum-splitview-vertical-gripper-reset)}:host([vertical]) #splitter.is-collapsed-end #gripper:before,:host([vertical]) #splitter.is-collapsed-start #gripper:before{top:calc(var(--spectrum-splitview-vertical-gripper-width) - var(--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25))/2);width:var(--spectrum-splitview-vertical-gripper-outer-width);height:var(--spectrum-dragbar-handle-width,var(--spectrum-global-dimension-static-size-25))}:host([vertical]) #splitter.is-collapsed-start #gripper{top:var(--spectrum-splitview-vertical-gripper-reset)}:host([vertical]) #splitter.is-collapsed-end #gripper{top:auto;bottom:var(--spectrum-splitview-vertical-gripper-reset)}::slotted(*){background-color:var(--spectrum-panel-background-color,var(--spectrum-global-color-gray-100))}#splitter{background-color:var(--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300))}#gripper{border-color:var(--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300))}#gripper:before{background-color:var(--spectrum-dragbar-handle-background-color,var(--spectrum-global-color-gray-300))}:host([resizable]) #splitter.is-hovered,:host([resizable]) #splitter:hover{background-color:var(--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400))}:host([resizable]) #splitter.is-hovered #gripper,:host([resizable]) #splitter:hover #gripper{border-color:var(--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400))}:host([resizable]) #splitter.is-hovered #gripper:before,:host([resizable]) #splitter:hover #gripper:before{background-color:var(--spectrum-dragbar-handle-background-color-hover,var(--spectrum-global-color-gray-400))}:host([resizable]) #splitter.is-active,:host([resizable]) #splitter:active{background-color:var(--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800))}:host([resizable]) #splitter.is-active #gripper,:host([resizable]) #splitter:active #gripper{border-color:var(--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800))}:host([resizable]) #splitter.is-active #gripper:before,:host([resizable]) #splitter:active #gripper:before{background-color:var(--spectrum-dragbar-handle-background-color-down,var(--spectrum-global-color-gray-800))}:host([resizable]) #splitter:focus{outline:none}:host([resizable]) #splitter.focus-visible{background-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible{background-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter:focus-visible{background-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible #gripper{border-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400));box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible #gripper{border-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400));box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter:focus-visible #gripper{border-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400));box-shadow:0 0 0 1px var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible #gripper:before{background-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter.focus-visible #gripper:before{background-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host([resizable]) #splitter:focus-visible #gripper:before{background-color:var(--spectrum-alias-focus-color,var(--spectrum-global-color-blue-400))}:host{--spectrum-split-view-first-pane-size:50%}::slotted(*){overflow:auto}::slotted(:first-child){order:1}:host(:not([vertical])) ::slotted(:first-child:not(:last-child)){width:var(--spectrum-split-view-first-pane-size)}:host([vertical]) ::slotted(:first-child:not(:last-child)){height:var(--spectrum-split-view-first-pane-size)}::slotted(:nth-child(2)){order:3;flex:1}::slotted(:nth-child(n+3)){display:none}#splitter{order:2;height:auto}:host([resizable]) #splitter{padding:0 var(--spectrum-global-dimension-static-size-125);margin:0 calc(-1*var(--spectrum-global-dimension-static-size-125));background-clip:content-box;cursor:ew-resize}:host([vertical][resizable]) #splitter{padding:var(--spectrum-global-dimension-static-size-125) 0;margin:calc(-1*var(--spectrum-global-dimension-static-size-125)) 0;background-clip:content-box;cursor:ns-resize}:host([resizable][dir=ltr]) #splitter.is-resized-start,:host([resizable][dir=rtl]) #splitter.is-resized-end{cursor:e-resize}:host([resizable][dir=ltr]) #splitter.is-resized-end,:host([resizable][dir=rtl]) #splitter.is-resized-start{cursor:w-resize}:host([vertical][resizable]) #splitter.is-resized-start{cursor:s-resize}:host([vertical][resizable]) #splitter.is-resized-end{cursor:n-resize}:host([resizable][collapsible]) #splitter.is-resized-end,:host([resizable][collapsible]) #splitter.is-resized-start{cursor:ew-resize}:host([resizable][dir=ltr][collapsible]) #splitter.is-collapsed-start,:host([resizable][dir=rtl][collapsible]) #splitter.is-collapsed-end{cursor:e-resize}:host([resizable][dir=ltr][collapsible]) #splitter.is-collapsed-end,:host([resizable][dir=rtl][collapsible]) #splitter.is-collapsed-start{cursor:w-resize}:host([vertical][resizable][collapsible]) #splitter.is-collapsed-start{cursor:s-resize}:host([vertical][resizable][collapsible]) #splitter.is-collapsed-end{cursor:n-resize}:host([vertical][resizable][collapsible]) #splitter.is-resized-end,:host([vertical][resizable][collapsible]) #splitter.is-resized-start{cursor:ns-resize}:host([dir=ltr][resizable]) #gripper{left:calc(var(--spectrum-global-dimension-static-size-125) + (var(--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)))/2*-1)}:host([dir=rtl][resizable]) #gripper{right:calc(var(--spectrum-global-dimension-static-size-125) + (var(--spectrum-dragbar-gripper-width,\nvar(--spectrum-global-dimension-static-size-50)) + 2*var(--spectrum-dragbar-gripper-border-width-horizontal, 3px) - var(--spectrum-dragbar-handle-width,\nvar(--spectrum-global-dimension-static-size-25)))/2*-1)}:host([vertical][resizable]) #gripper{margin-top:var(--spectrum-global-dimension-static-size-125);left:50%;right:50%}:host([dir=ltr][resizable]) #splitter.is-collapsed-start #gripper{left:var(--spectrum-global-dimension-static-size-125)}:host([dir=rtl][resizable]) #splitter.is-collapsed-start #gripper{right:var(--spectrum-global-dimension-static-size-125)}:host([vertical][resizable]) #splitter.is-collapsed-start #gripper{left:50%;right:50%}:host([dir=ltr][resizable]) #splitter.is-collapsed-end #gripper{left:var(--spectrum-global-dimension-static-size-25)}:host([dir=rtl][resizable]) #splitter.is-collapsed-end #gripper{right:var(--spectrum-global-dimension-static-size-25)}:host([vertical][resizable]) #splitter.is-collapsed-end #gripper{margin-top:0;top:var(--spectrum-global-dimension-static-size-25);left:50%;right:50%}\n`" | ||
| } | ||
| ], | ||
| "slots": [ | ||
| "exports": [ | ||
| { | ||
| "name": "", | ||
| "description": "Two sibling elements to be sized by the element attritubes" | ||
| "kind": "js", | ||
| "name": "default", | ||
| "declaration": { | ||
| "name": "styles", | ||
| "module": "src/split-view.css.ts" | ||
| } | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "kind": "javascript-module", | ||
| "path": "src/types.ts", | ||
| "declarations": [], | ||
| "exports": [] | ||
| }, | ||
| { | ||
| "kind": "javascript-module", | ||
| "path": "test/split-view.test-vrt.ts", | ||
| "declarations": [], | ||
| "exports": [] | ||
| } | ||
| ] | ||
| } | ||
| } |
| { | ||
| "name": "@spectrum-web-components/split-view", | ||
| "version": "0.2.8-alpha.59+7b33b99a3", | ||
| "version": "0.2.8", | ||
| "publishConfig": { | ||
@@ -47,3 +47,3 @@ "access": "public" | ||
| "dependencies": { | ||
| "@spectrum-web-components/base": "^0.4.5-alpha.59+7b33b99a3", | ||
| "@spectrum-web-components/base": "^0.4.5", | ||
| "tslib": "^2.0.0" | ||
@@ -55,7 +55,7 @@ }, | ||
| "types": "./src/index.d.ts", | ||
| "customElementsManifest": "custom-elements.json", | ||
| "customElements": "custom-elements.json", | ||
| "sideEffects": [ | ||
| "./sp-*.js" | ||
| ], | ||
| "gitHead": "7b33b99a3b1747fffb387f4e6696dcaa4a3618a4" | ||
| "gitHead": "fbd509e0f30f1da0dcb972fa9ac5492acc00d96e" | ||
| } |
@@ -1,2 +0,2 @@ | ||
| declare const styles: import("@spectrum-web-components/base").CSSResultGroup; | ||
| declare const styles: import("@spectrum-web-components/base").CSSResult; | ||
| export default styles; |
@@ -1,2 +0,2 @@ | ||
| declare const styles: import("@spectrum-web-components/base").CSSResultGroup; | ||
| declare const styles: import("@spectrum-web-components/base").CSSResult; | ||
| export default styles; |
@@ -14,3 +14,2 @@ /* | ||
| import { html, SpectrumElement, property, ifDefined, query, nothing, classMap, } from '@spectrum-web-components/base'; | ||
| import { streamingListener } from '@spectrum-web-components/base/src/streaming-listener.js'; | ||
| import styles from './split-view.css.js'; | ||
@@ -109,10 +108,4 @@ const DEFAULT_MAX_SIZE = 3840; | ||
| @keydown=${this.onKeydown} | ||
| ${streamingListener({ | ||
| start: ['pointerdown', this.onPointerdown], | ||
| streamInside: ['pointermove', this.onPointermove], | ||
| end: [ | ||
| ['pointerup', 'pointercancel'], | ||
| this.onPointerup, | ||
| ], | ||
| })} | ||
| @pointerdown=${this.onPointerdown} | ||
| @pointerup=${this.onPointerup} | ||
| > | ||
@@ -135,6 +128,6 @@ ${this.resizable | ||
| if (!this.resizable || (event.button && event.button !== 0)) { | ||
| event.preventDefault(); | ||
| return; | ||
| } | ||
| this.splitter.setPointerCapture(event.pointerId); | ||
| this.onpointermove = this.onPointermove; | ||
| this.offset = this.getOffset(); | ||
@@ -157,2 +150,3 @@ } | ||
| this.splitter.releasePointerCapture(event.pointerId); | ||
| this.onpointermove = null; | ||
| } | ||
@@ -297,2 +291,6 @@ getOffset() { | ||
| super.updated(changed); | ||
| if (changed.has('primarySize')) { | ||
| this.splitterPos = undefined; | ||
| this.checkResize(); | ||
| } | ||
| if (changed.has('splitterPos') && | ||
@@ -299,0 +297,0 @@ this.splitterPos !== undefined && |
@@ -17,6 +17,23 @@ /* | ||
| component: 'sp-split-view', | ||
| args: { | ||
| primarySize: 100, | ||
| }, | ||
| argTypes: { | ||
| primarySize: { | ||
| name: 'primarySize', | ||
| type: { name: 'number', required: false }, | ||
| description: 'Size of the primary panel.', | ||
| table: { | ||
| type: { summary: 'number' }, | ||
| defaultValue: { summary: undefined }, | ||
| }, | ||
| control: { | ||
| type: 'number', | ||
| }, | ||
| }, | ||
| }, | ||
| }; | ||
| export const Horizontal = () => { | ||
| export const Horizontal = (args) => { | ||
| return html ` | ||
| <sp-split-view style="height: 200px" primary-size="100"> | ||
| <sp-split-view style="height: 200px" .primarySize="${args.primarySize}"> | ||
| <div>First panel</div> | ||
@@ -27,3 +44,3 @@ <div>Second panel</div> | ||
| }; | ||
| export const HorizontalResizable = () => { | ||
| export const HorizontalResizable = (args) => { | ||
| return html ` | ||
@@ -33,3 +50,3 @@ <sp-split-view | ||
| primary-min="50" | ||
| primary-size="100" | ||
| .primarySize="${args.primarySize}" | ||
| secondary-min="50" | ||
@@ -55,3 +72,3 @@ > | ||
| }; | ||
| export const HorizontalResizableCollapsible = () => { | ||
| export const HorizontalResizableCollapsible = (args) => { | ||
| return html ` | ||
@@ -64,2 +81,3 @@ <sp-split-view | ||
| style="height: 500px;" | ||
| .primarySize="${args.primarySize}" | ||
| > | ||
@@ -100,5 +118,8 @@ <div> | ||
| }; | ||
| export const Vertical = () => { | ||
| HorizontalResizableCollapsible.args = { | ||
| primarySize: undefined, | ||
| }; | ||
| export const Vertical = (args) => { | ||
| return html ` | ||
| <sp-split-view vertical> | ||
| <sp-split-view vertical .primarySize="${args.primarySize}"> | ||
| <div>First panel</div> | ||
@@ -109,3 +130,6 @@ <div>Second panel</div> | ||
| }; | ||
| export const VerticalResizable = () => { | ||
| Vertical.args = { | ||
| primarySize: undefined, | ||
| }; | ||
| export const VerticalResizable = (args) => { | ||
| return html ` | ||
@@ -119,2 +143,3 @@ <sp-split-view | ||
| style="height: 400px;" | ||
| .primarySize="${args.primarySize}" | ||
| > | ||
@@ -155,3 +180,6 @@ <div> | ||
| }; | ||
| export const VerticalResizableCollapsible = () => { | ||
| VerticalResizable.args = { | ||
| primarySize: undefined, | ||
| }; | ||
| export const VerticalResizableCollapsible = (args) => { | ||
| return html ` | ||
@@ -163,5 +191,5 @@ <sp-split-view | ||
| primary-min="50" | ||
| primary-size="250" | ||
| secondary-min="40" | ||
| style="height: 400px;" | ||
| .primarySize="${args.primarySize}" | ||
| > | ||
@@ -202,3 +230,6 @@ <div> | ||
| }; | ||
| export const MultipleLevels = () => { | ||
| VerticalResizableCollapsible.args = { | ||
| primarySize: 250, | ||
| }; | ||
| export const MultipleLevels = (args) => { | ||
| return html ` | ||
@@ -233,3 +264,3 @@ <sp-split-view | ||
| primary-min="50" | ||
| primary-size="100" | ||
| .primarySize="${args.primarySize}" | ||
| secondary-min="50" | ||
@@ -258,5 +289,5 @@ style="height: 300px;" | ||
| }; | ||
| export const OnePaneNoSplitter = () => { | ||
| export const OnePaneNoSplitter = (args) => { | ||
| return html ` | ||
| <sp-split-view style="height: 200px"> | ||
| <sp-split-view style="height: 200px" .primarySize="${args.primarySize}"> | ||
| <div>First panel</div> | ||
@@ -266,5 +297,5 @@ </sp-split-view> | ||
| }; | ||
| export const ShowFirstTwoPanes = () => { | ||
| export const ShowFirstTwoPanes = (args) => { | ||
| return html ` | ||
| <sp-split-view style="height: 200px"> | ||
| <sp-split-view style="height: 200px" .primarySize="${args.primarySize}"> | ||
| <div>First panel</div> | ||
@@ -276,2 +307,5 @@ <div>Second panel</div> | ||
| }; | ||
| ShowFirstTwoPanes.args = { | ||
| primarySize: undefined, | ||
| }; | ||
| //# sourceMappingURL=split-view.stories.js.map |
@@ -736,3 +736,20 @@ /* | ||
| }); | ||
| it('resizes when primarySize changes', async () => { | ||
| const el = await fixture(html ` | ||
| <sp-split-view | ||
| resizable | ||
| primary-size="100" | ||
| style=${`height: 200px; width: 500px;`} | ||
| > | ||
| <div>First panel</div> | ||
| <div>Second panel</div> | ||
| </sp-split-view> | ||
| `); | ||
| await elementUpdated(el); | ||
| expect(el.splitterPos || 0).to.equal(100); | ||
| el.primarySize = '300'; | ||
| await elementUpdated(el); | ||
| expect(el.splitterPos || 0).to.equal(300); | ||
| }); | ||
| }); | ||
| //# sourceMappingURL=split-view.test.js.map |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Unidentified License
License(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Manifest confusion
Supply chain riskThis package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.
Found 1 instance in 1 package
Unidentified License
License(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by16.64%
277904
- Number of package files
- increased by6.67%
32
- Lines of code
- increased by35.44%
2419
- Number of medium supply chain risk alerts
- decreased by-100%
0