├── .npmrc
├── src
├── lib
│ ├── index.js
│ ├── types.d.ts
│ └── SplitPane.svelte
├── index.test.js
├── app.d.ts
├── app.html
└── routes
│ └── +page.svelte
├── static
└── favicon.png
├── .gitignore
├── .prettierignore
├── vite.config.js
├── .prettierrc
├── svelte.config.js
├── tsconfig.json
├── CHANGELOG.md
├── package.json
├── README.md
└── pnpm-lock.yaml
/.npmrc:
--------------------------------------------------------------------------------
1 | engine-strict=true
2 |
--------------------------------------------------------------------------------
/src/lib/index.js:
--------------------------------------------------------------------------------
1 | export { default as SplitPane } from './SplitPane.svelte';
--------------------------------------------------------------------------------
/static/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rich-Harris/svelte-split-pane/HEAD/static/favicon.png
--------------------------------------------------------------------------------
/src/index.test.js:
--------------------------------------------------------------------------------
1 | import { describe, it, expect } from 'vitest';
2 |
3 | describe('sum test', () => {
4 | it('adds 1 + 2 to equal 3', () => {
5 | expect(1 + 2).toBe(3);
6 | });
7 | });
8 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | /build
4 | /dist
5 | /.svelte-kit
6 | /package
7 | .env
8 | .env.*
9 | !.env.example
10 | vite.config.js.timestamp-*
11 | vite.config.ts.timestamp-*
12 |
--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | /build
4 | /.svelte-kit
5 | /package
6 | .env
7 | .env.*
8 | !.env.example
9 |
10 | # Ignore files for PNPM, NPM and YARN
11 | pnpm-lock.yaml
12 | package-lock.json
13 | yarn.lock
14 |
--------------------------------------------------------------------------------
/src/lib/types.d.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * A length expressed as `${number}px`, `${number}%`, `${number}em` or `${number}rem`
3 | */
4 | export type Length = `${number}px` | `${number}%` | `${number}em` | `${number}rem`;
5 |
6 | export * from './index';
7 |
--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
1 | import { sveltekit } from '@sveltejs/kit/vite';
2 | import { defineConfig } from 'vitest/config';
3 |
4 | export default defineConfig({
5 | plugins: [sveltekit()],
6 | test: {
7 | include: ['src/**/*.{test,spec}.{js,ts}']
8 | }
9 | });
10 |
--------------------------------------------------------------------------------
/src/app.d.ts:
--------------------------------------------------------------------------------
1 | // See https://kit.svelte.dev/docs/types#app
2 | // for information about these interfaces
3 | declare global {
4 | namespace App {
5 | // interface Error {}
6 | // interface Locals {}
7 | // interface PageData {}
8 | // interface Platform {}
9 | }
10 | }
11 |
12 | export {};
13 |
--------------------------------------------------------------------------------
/src/app.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | %sveltekit.head%
8 |
9 |
10 | %sveltekit.body%
11 |
12 |
13 |
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "useTabs": true,
3 | "singleQuote": true,
4 | "trailingComma": "none",
5 | "printWidth": 100,
6 | "plugins": ["prettier-plugin-svelte"],
7 | "pluginSearchDirs": ["."],
8 | "overrides": [
9 | {
10 | "files": "*.svelte",
11 | "options": { "parser": "svelte" }
12 | },
13 | {
14 | "files": "*.md",
15 | "options": { "requirePragma": true }
16 | }
17 | ]
18 | }
19 |
--------------------------------------------------------------------------------
/svelte.config.js:
--------------------------------------------------------------------------------
1 | import adapter from '@sveltejs/adapter-vercel';
2 |
3 | /** @type {import('@sveltejs/kit').Config} */
4 | const config = {
5 | kit: {
6 | // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
7 | // If your environment is not supported or you settled on a specific environment, switch out the adapter.
8 | // See https://kit.svelte.dev/docs/adapters for more information about adapters.
9 | adapter: adapter()
10 | }
11 | };
12 |
13 | export default config;
14 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./.svelte-kit/tsconfig.json",
3 | "compilerOptions": {
4 | "allowJs": true,
5 | "checkJs": true,
6 | "esModuleInterop": true,
7 | "forceConsistentCasingInFileNames": true,
8 | "resolveJsonModule": true,
9 | "skipLibCheck": true,
10 | "sourceMap": true,
11 | "strict": true
12 | }
13 | // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias and https://kit.svelte.dev/docs/configuration#files
14 | //
15 | // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
16 | // from the referenced tsconfig.json - TypeScript does not merge them in
17 | }
18 |
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # changelog
2 |
3 | ## 3.0.0
4 |
5 | - Change `vertical` and `horizontal` to `rows` and `columns` ([#10](https://github.com/Rich-Harris/svelte-split-pane/pull/10))
6 | - `pos` binding reflects constraints ([#10](https://github.com/Rich-Harris/svelte-split-pane/pull/10))
7 |
8 | ## 2.0.0
9 |
10 | - Modernise ([#8](https://github.com/Rich-Harris/svelte-split-pane/pull/8)
11 |
12 | ## 1.1.3
13 |
14 | - Remove `z-index` from dividers
15 |
16 | ## 1.1.2
17 |
18 | - Mark as compatible with Svelte 4 and 5
19 |
20 | ## 1.1.1
21 |
22 | - Use pointer events instead of separate mouse/touch events
23 |
24 | ## 1.1.0
25 |
26 | - Allow `em` and `rem` lengths
27 |
28 | ## 1.0.2
29 |
30 | - Expose an `id` property for CSS overrides
31 |
32 | ## 1.0.1
33 |
34 | - React to prop changes
35 |
36 | ## 1.0.0
37 |
38 | - First release
39 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@rich_harris/svelte-split-pane",
3 | "version": "3.0.0",
4 | "scripts": {
5 | "dev": "vite dev",
6 | "build": "vite build && npm run package",
7 | "preview": "vite preview",
8 | "package": "svelte-kit sync && svelte-package && publint",
9 | "prepublishOnly": "npm run package",
10 | "check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
11 | "check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
12 | "test:unit": "vitest",
13 | "lint": "prettier --plugin-search-dir . --check .",
14 | "format": "prettier --plugin-search-dir . --write ."
15 | },
16 | "exports": {
17 | ".": {
18 | "types": "./dist/types.d.ts",
19 | "svelte": "./dist/index.js"
20 | }
21 | },
22 | "files": [
23 | "dist"
24 | ],
25 | "peerDependencies": {
26 | "svelte": "^5.43.6"
27 | },
28 | "devDependencies": {
29 | "@sveltejs/adapter-vercel": "^6.1.1",
30 | "@sveltejs/kit": "^2.5.27",
31 | "@sveltejs/package": "^2.3.7",
32 | "@sveltejs/vite-plugin-svelte": "^4.0.0",
33 | "prettier": "^3.4.2",
34 | "prettier-plugin-svelte": "^3.3.2",
35 | "publint": "^0.1.9",
36 | "svelte": "^5.43.6",
37 | "svelte-check": "^4.0.0",
38 | "tslib": "^2.4.1",
39 | "typescript": "^5.5.0",
40 | "vite": "^5.4.4",
41 | "vitest": "^1.0.0"
42 | },
43 | "svelte": "./dist/index.js",
44 | "types": "./dist/index.d.ts",
45 | "type": "module"
46 | }
47 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # svelte-split-pane
2 |
3 | A `` component.
4 |
5 | ## Usage
6 |
7 | ```svelte
8 |
14 |
15 |
24 | {#snippet a()}
25 |
26 | {/snippet}
27 |
28 | {#snippet b()}
29 |
30 | {/snippet}
31 |
32 | ```
33 |
34 | Of the properties that can be set on the component, only `type` is required:
35 |
36 | - `type` can be `columns`, in which case the panes will be split left-right, or `rows` in which case it will be split top-bottom
37 | - `id` will be added to the element as a `data-pane={id}` attribute, allowing you to (for example) override the `--pos` CSS custom property on mobile
38 | - `min`, `max` and `pos` can be expressed as `${number}%`, `${number}px`, `${number}em` or `${number}rem`. Positive numbers are measured from the left/top, negative numbers are measured from the right/bottom
39 | - `disabled` turns off the interactive dragging
40 | - `--color` determines the color of the divider between panes, and defaults to `transparent`
41 | - `--thickness` determines how thick the 'hit area' is for the divider, and defaults to `8px`
42 |
--------------------------------------------------------------------------------
/src/routes/+page.svelte:
--------------------------------------------------------------------------------
1 |
8 |
9 |
10 |
11 | svelte-split-pane
12 |
13 |
14 |
15 |
16 | {#snippet a()}
17 |
18 | {#snippet a()}
19 |
20 |
width: {width}
21 |
height: {height}
22 |
27 |
28 |
29 | {/snippet}
30 |
31 | {/snippet}
32 |
33 | {#snippet b()}
34 |
35 |
36 |
37 | {/snippet}
38 |
39 |
40 |