@spectrum-web-components/split-view 0.0.0-20241209155954

package/README.md

@@ -0,0 +1,200 @@
+## Description
+
+An `sp-split-view` element delivers its first two direct child elements in a horizontal or vertical (`<sp-split-view vertical>`) orientation that distributes the available page real estate as per the supplied attribute API. When leveraging the resizable attribute a pointer and keyboard accessible affordance is provided for the user to customize the distribution of that area between the available children.
+
+### Usage
+
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/split-view?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/split-view)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/split-view?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/split-view)
+[![Try it on webcomponents.dev](https://img.shields.io/badge/Try%20it%20on-webcomponents.dev-green?style=for-the-badge)](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/WzGXekJkbnJjUiBjwUEb/src/index.ts)
+
+```
+yarn add @spectrum-web-components/split-view
+```
+
+Import the side effectful registration of `<sp-split-view>` via:
+
+```
+import '@spectrum-web-components/split-view/sp-split-view.js';
+```
+
+When looking to leverage the `SplitView` base class as a type and/or for extension purposes, do so via:
+
+```
+import { SplitView } from '@spectrum-web-components/split-view';
+```
+
+## Variants
+
+### Horizontal
+
+```html
+<sp-split-view>
+    <div>Left panel</div>
+    <div>Right panel</div>
+</sp-split-view>
+```
+
+### Horizontal Resizable
+
+```html
+<sp-split-view
+    resizable
+    primary-min="50"
+    secondary-min="50"
+    primary-size="100"
+    label="Resize the horizontal panels"
+>
+    <div>
+        <h1>Left panel</h1>
+        <p>
+            Lorem Ipsum is simply dummy text of the printing and typesetting
+            industry.
+        </p>
+    </div>
+    <div>
+        <h2>Right panel</h2>
+        <p>
+            It is a long established fact that a reader will be distracted by
+            the readable content of a page when looking at its layout.
+        </p>
+    </div>
+</sp-split-view>
+```
+
+### Horizontal Resizable & Collapsible
+
+```html
+<sp-split-view resizable label="Resize the horizontal collapsible panels">
+    <div>
+        <h1>Left panel</h1>
+        <p>
+            Lorem Ipsum is simply dummy text of the printing and typesetting
+            industry.
+        </p>
+    </div>
+    <div>
+        <h2>Right panel</h2>
+        <p>
+            It is a long established fact that a reader will be distracted by
+            the readable content of a page when looking at its layout.
+        </p>
+    </div>
+</sp-split-view>
+```
+
+### Vertical
+
+```html
+<sp-split-view vertical>
+    <div>Top panel</div>
+    <div>Bottom panel</div>
+</sp-split-view>
+```
+
+### Vertical Resizable
+
+```html
+<sp-split-view
+    vertical
+    resizable
+    primary-min="50"
+    primary-max="150"
+    secondary-min="50"
+    label="Resize the vertical panels"
+>
+    <div>
+        <h1>Top panel</h1>
+        <p>
+            Lorem Ipsum is simply dummy text of the printing and typesetting
+            industry.
+        </p>
+    </div>
+    <div>
+        <h2>Bottom panel</h2>
+        <p>
+            It is a long established fact that a reader will be distracted by
+            the readable content of a page when looking at its layout.
+        </p>
+    </div>
+</sp-split-view>
+```
+
+### Vertical Resizable & Collapsible
+
+```html
+<sp-split-view
+    vertical
+    resizable
+    style="height: 300px;"
+    label="Resize the vertical collapsible panels"
+>
+    <div>
+        <h1>Top panel</h1>
+        <p>
+            Lorem Ipsum is simply dummy text of the printing and typesetting
+            industry.
+        </p>
+    </div>
+    <div>
+        <h2>Bottom panel</h2>
+        <p>
+            It is a long established fact that a reader will be distracted by
+            the readable content of a page when looking at its layout.
+        </p>
+    </div>
+</sp-split-view>
+```
+
+### Multiple Levels
+
+```html
+<sp-split-view
+    resizable
+    primary-min="50"
+    primary-max="200"
+    secondary-min="50"
+    style="height: 400px; width: 600px;"
+>
+    <div>
+        <h1>First panel - Level 1</h1>
+        <p>
+            Lorem Ipsum is simply dummy text of the printing and typesetting
+            industry. Lorem Ipsum has been the industry's standard dummy text
+            ever since the 1500s, when an unknown printer took a galley of type
+            and scrambled it to make a type specimen book.
+        </p>
+    </div>
+    <div>
+        <h2>Second panel - Level 1</h2>
+        <sp-split-view
+            vertical
+            resizable
+            primary-min="50"
+            primary-size="100"
+            secondary-min="50"
+            style="height: 300px;"
+        >
+            <div>
+                <h3>First panel - Level 2</h3>
+                <p>
+                    Lorem Ipsum is simply dummy text of the printing and
+                    typesetting industry.
+                </p>
+            </div>
+            <div>
+                <h4>Second panel - Level 2</h4>
+                <p>
+                    It is a long established fact that a reader will be
+                    distracted by the readable content of a page when looking at
+                    its layout.
+                </p>
+            </div>
+        </sp-split-view>
+    </div>
+</sp-split-view>
+```
+
+## Accessibility
+
+By default, the "separator" element within an `<sp-split-view>` is given the label "Resize the panels". A label is required to surface the interaction correctly to screen readers. You can customize or internationalize this with the `label` attribute.

package/package.json

@@ -0,0 +1,76 @@
+{
+    "name": "@spectrum-web-components/split-view",
+    "version": "0.0.0-20241209155954",
+    "publishConfig": {
+        "access": "public"
+    },
+    "description": "",
+    "license": "Apache-2.0",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/adobe/spectrum-web-components.git",
+        "directory": "packages/split-view"
+    },
+    "author": "",
+    "homepage": "https://opensource.adobe.com/spectrum-web-components/components/split-view",
+    "bugs": {
+        "url": "https://github.com/adobe/spectrum-web-components/issues"
+    },
+    "main": "src/index.js",
+    "module": "src/index.js",
+    "type": "module",
+    "exports": {
+        ".": {
+            "development": "./src/index.dev.js",
+            "default": "./src/index.js"
+        },
+        "./package.json": "./package.json",
+        "./src/SplitView.js": {
+            "development": "./src/SplitView.dev.js",
+            "default": "./src/SplitView.js"
+        },
+        "./src/index.js": {
+            "development": "./src/index.dev.js",
+            "default": "./src/index.js"
+        },
+        "./src/split-view-overrides.css.js": "./src/split-view-overrides.css.js",
+        "./src/split-view.css.js": "./src/split-view.css.js",
+        "./src/types.js": {
+            "development": "./src/types.dev.js",
+            "default": "./src/types.js"
+        },
+        "./sp-split-view.js": {
+            "development": "./sp-split-view.dev.js",
+            "default": "./sp-split-view.js"
+        }
+    },
+    "scripts": {
+        "test": "echo \"Error: run tests from mono-repo root.\" && exit 1"
+    },
+    "files": [
+        "**/*.d.ts",
+        "**/*.js",
+        "**/*.js.map",
+        "custom-elements.json",
+        "!stories/",
+        "!test/"
+    ],
+    "keywords": [
+        "spectrum css",
+        "web components",
+        "lit-element",
+        "lit-html"
+    ],
+    "dependencies": {
+        "@spectrum-web-components/base": "0.0.0-20241209155954"
+    },
+    "devDependencies": {
+        "@spectrum-css/splitview": "^6.0.0-s2-foundations.15"
+    },
+    "types": "./src/index.d.ts",
+    "customElements": "custom-elements.json",
+    "sideEffects": [
+        "./sp-*.js",
+        "./**/*.dev.js"
+    ]
+}

package/sp-split-view.d.ts

@@ -0,0 +1,6 @@
+import { SplitView } from './src/SplitView.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'sp-split-view': SplitView;
+    }
+}

package/sp-split-view.dev.js

@@ -0,0 +1,5 @@
+"use strict";
+import { SplitView } from "./src/SplitView.dev.js";
+import { defineElement } from "@spectrum-web-components/base/src/define-element.js";
+defineElement("sp-split-view", SplitView);
+//# sourceMappingURL=sp-split-view.dev.js.map

package/sp-split-view.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["sp-split-view.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { SplitView } from './src/SplitView.dev.js'\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-split-view', SplitView);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-split-view': SplitView;\n    }\n}\n"],
+  "mappings": ";AAYA,SAAS,iBAAiB;AAC1B,SAAS,qBAAqB;AAE9B,cAAc,iBAAiB,SAAS;",
+  "names": []
+}

package/sp-split-view.js

@@ -0,0 +1,2 @@
+"use strict";import{SplitView as e}from"./src/SplitView.js";import{defineElement as i}from"@spectrum-web-components/base/src/define-element.js";i("sp-split-view",e);
+//# sourceMappingURL=sp-split-view.js.map

package/sp-split-view.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["sp-split-view.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { SplitView } from './src/SplitView.js';\nimport { defineElement } from '@spectrum-web-components/base/src/define-element.js';\n\ndefineElement('sp-split-view', SplitView);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-split-view': SplitView;\n    }\n}\n"],
+  "mappings": "aAYA,OAAS,aAAAA,MAAiB,qBAC1B,OAAS,iBAAAC,MAAqB,sDAE9BA,EAAc,gBAAiBD,CAAS",
+  "names": ["SplitView", "defineElement"]
+}

package/src/SplitView.d.ts

@@ -0,0 +1,68 @@
+import { CSSResultArray, PropertyValues, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
+/**
+ * @element sp-split-view
+ *
+ * @slot Two sibling elements to be sized by the element attritubes
+ * @fires change - Announces the new position of the splitter
+ */
+export declare class SplitView extends SpectrumElement {
+    static get styles(): CSSResultArray;
+    controlledEl?: HTMLElement;
+    vertical: boolean;
+    resizable: boolean;
+    collapsible: boolean;
+    /** The minimum size of the primary pane */
+    primaryMin: number;
+    /** The maximum size of the primary pane */
+    primaryMax: number;
+    /**
+     * The start size of the primary pane, can be a real pixel number|string, percentage or "auto"
+     * For example: "100", "120px", "75%" or "auto" are valid values
+     * @type {number | number + "px" | number + "%" | "auto"}
+     * @attr
+     */
+    primarySize?: string;
+    /** The minimum size of the secondary pane */
+    secondaryMin: number;
+    /** The maximum size of the secondary pane */
+    secondaryMax: number;
+    /** The current splitter position of split-view */
+    splitterPos?: number;
+    /** The current size of first pane of split-view */
+    private firstPaneSize;
+    label?: string;
+    private enoughChildren;
+    private viewSize;
+    private paneSlot;
+    private splitter;
+    private offset;
+    private minPos;
+    private maxPos;
+    private observer?;
+    private rect?;
+    private _splitterSize?;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * @private
+     **/
+    get splitterSize(): number;
+    protected render(): TemplateResult;
+    private controlledElIDApplied;
+    private onContentSlotChange;
+    private onPointerdown;
+    private onPointermove;
+    private onPointerup;
+    private getOffset;
+    private getPosition;
+    private movePosition;
+    private onKeydown;
+    private checkResize;
+    private updateMinMax;
+    private updatePosition;
+    private getLimitedPosition;
+    private calcStartPos;
+    private dispatchChangeEvent;
+    protected willUpdate(changed: PropertyValues): void;
+}