` wrapper around the children components.
56 | All additional props are passed through to the to the `
` component.
57 |
58 | ### Example
59 |
60 | ```js
61 | import Split from 'react-split'
62 |
63 |
74 |
75 |
76 |
77 | ```
78 |
79 | ### Props
80 |
81 | #### `sizes`
82 |
83 | `sizes?: [number]` - [Docs](https://github.com/nathancahill/split/tree/master/packages/splitjs#sizes)
84 |
85 | #### `minSize`
86 |
87 | `minSize?: number | [number]` - [Docs](https://github.com/nathancahill/split/tree/master/packages/splitjs#minsize-default-100)
88 |
89 | #### `expandToMin`
90 |
91 | `expandToMin?: boolean` - [Docs](https://github.com/nathancahill/split/tree/master/packages/splitjs#expandtomin-default-false)
92 |
93 | #### `gutterSize`
94 |
95 | `gutterSize?: number` - [Docs](https://github.com/nathancahill/split/tree/master/packages/splitjs#guttersize-default-10)
96 |
97 | #### `gutterAlign`
98 |
99 | `gutterAlign?: 'center' | 'start' | 'end'` - [Docs](https://github.com/nathancahill/split/tree/master/packages/splitjs#gutteralign-default-center)
100 |
101 | #### `snapOffset`
102 |
103 | `snapOffset?: number` - [Docs](https://github.com/nathancahill/split/tree/master/packages/splitjs#snapoffset-default-30)
104 |
105 | #### `dragInterval`
106 |
107 | `dragInterval?: number` - [Docs](https://github.com/nathancahill/split/tree/master/packages/splitjs#draginterval-default-1)
108 |
109 | #### `direction`
110 |
111 | `direction?: 'horizontal' | 'vertical'` - [Docs](https://github.com/nathancahill/split/tree/master/packages/splitjs#direction-default-horizontal)
112 |
113 | #### `cursor`
114 |
115 | `cursor?: string` - [Docs](https://github.com/nathancahill/split/tree/master/packages/splitjs#cursor-default-col-resize)
116 |
117 | #### `gutter`
118 |
119 | `gutter?: (index, direction, pairElement) => HTMLElement` - [Docs](https://github.com/nathancahill/split/tree/master/packages/splitjs#gutter)
120 |
121 | #### `elementStyle`
122 |
123 | `elementStyle?: (dimension, elementSize, gutterSize, index) => Object` - [Docs](https://github.com/nathancahill/split/tree/master/packages/splitjs#elementstyle)
124 |
125 | #### `gutterStyle`
126 |
127 | `gutterStyle?: (dimension, gutterSize, index) => Object` - [Docs](https://github.com/nathancahill/split/tree/master/packages/splitjs#gutterstyle)
128 |
129 | #### `onDrag`
130 |
131 | `onDrag?: sizes => void` - [Docs](https://github.com/nathancahill/split/tree/master/packages/splitjs#ondrag-ondragstart-ondragend)
132 |
133 | #### `onDragStart`
134 |
135 | `onDragStart?: sizes => void` - [Docs](https://github.com/nathancahill/split/tree/master/packages/splitjs#ondrag-ondragstart-ondragend)
136 |
137 | #### `onDragEnd`
138 |
139 | `onDragEnd?: sizes => void` - [Docs](https://github.com/nathancahill/split/tree/master/packages/splitjs#ondrag-ondragstart-ondragend)
140 |
141 | ## Migrating from Split.js
142 |
143 | Refer to [Split.js documentation](https://github.com/nathancahill/split/tree/master/packages/splitjs#documentation) for the options the component accepts as props. The differences are noted below:
144 |
145 | A few props are exempt from updating. These props are functions, these props will not trigger a `componentDidUpdate`.
146 | Following React best practices, and do not create functions in the render method. Instead, create them once and pass them as props.
147 |
148 | - `gutter`
149 | - `elementStyle`
150 | - `gutterStyle`
151 | - `onDrag`
152 | - `onDragStart`
153 | - `onDragEnd`
154 |
155 | #### API
156 |
157 | - `.setSizes(sizes)` becomes the prop `sizes={sizes}`
158 | - `.getSizes()` is unavailable, but sizes are passed to `onDragStart` and `onDragEnd`
159 | - `.collapse(index)` becomes the prop: `collapsed={index}`
160 | - `.destroy()` is triggered automatically on `componentWillUnmount`
161 |
162 | ## License
163 |
164 | Copyright (c) 2019 Nathan Cahill
165 |
166 | Permission is hereby granted, free of charge, to any person obtaining a copy
167 | of this software and associated documentation files (the "Software"), to deal
168 | in the Software without restriction, including without limitation the rights
169 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
170 | copies of the Software, and to permit persons to whom the Software is
171 | furnished to do so, subject to the following conditions:
172 |
173 | The above copyright notice and this permission notice shall be included in
174 | all copies or substantial portions of the Software.
175 |
176 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
177 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
178 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
179 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
180 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
181 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
182 | THE SOFTWARE.
183 |
--------------------------------------------------------------------------------
/packages/react-split/index.d.ts:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Options } from 'split.js'
3 |
4 | export interface SplitProps extends Omit
, 'onDrag'|'onDragStart'|'onDragEnd'> {
5 | sizes?: Options["sizes"]
6 | minSize?: Options["minSize"]
7 | maxSize?: Options["maxSize"]
8 | expandToMin?: Options["expandToMin"]
9 | gutterSize?: Options["gutterSize"]
10 | gutterAlign?: Options["gutterAlign"]
11 | snapOffset?: Options["snapOffset"]
12 | dragInterval?: Options["dragInterval"]
13 | direction?: Options["direction"]
14 | cursor?: Options["cursor"]
15 | gutter?: Options["gutter"]
16 | elementStyle?: Options["elementStyle"]
17 | gutterStyle?: Options["gutterStyle"]
18 | onDrag?: Options["onDrag"]
19 | onDragStart?: Options["onDragStart"]
20 | onDragEnd?: Options["onDragEnd"]
21 | collapsed?: Number
22 | }
23 |
24 | declare class Split extends React.Component {}
25 |
26 | export default Split
27 |
--------------------------------------------------------------------------------
/packages/react-split/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-split",
3 | "version": "2.0.14",
4 | "description": "React component for Split.js",
5 | "main": "dist/react-split.js",
6 | "minified:main": "dist/react-split.min.js",
7 | "module": "dist/react-split.es.js",
8 | "types": "index.d.ts",
9 | "scripts": {
10 | "prepublish": "rollup -c",
11 | "build": "rollup -c && npm run size",
12 | "watch": "rollup -cw",
13 | "test": "jest",
14 | "size": "echo \"gzip size: $(gzip-size --raw $npm_package_minified_main) bytes\""
15 | },
16 | "repository": "https://github.com/nathancahill/split",
17 | "author": "Nathan Cahill ",
18 | "homepage": "https://split.js.org/",
19 | "files": [
20 | "dist",
21 | "index.d.ts"
22 | ],
23 | "license": "MIT",
24 | "dependencies": {
25 | "prop-types": "^15.5.7",
26 | "split.js": "^1.6.0"
27 | },
28 | "peerDependencies": {
29 | "react": "*"
30 | },
31 | "collective": {
32 | "type": "opencollective",
33 | "url": "https://opencollective.com/splitjs"
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/packages/react-split/rollup.config.js:
--------------------------------------------------------------------------------
1 | import buble from '@rollup/plugin-buble'
2 | import { terser } from 'rollup-plugin-terser'
3 |
4 | const pkg = require('./package.json')
5 |
6 | export default [
7 | {
8 | input: './src/index.js',
9 | output: [
10 | {
11 | name: 'ReactSplit',
12 | file: pkg.main,
13 | format: 'umd',
14 | sourcemap: false,
15 | banner: `/*! ${pkg.name} - v${pkg.version} */\n`,
16 | globals: {
17 | react: 'React',
18 | 'prop-types': 'PropTypes',
19 | 'split.js': 'Split',
20 | },
21 | },
22 | {
23 | file: pkg.module,
24 | format: 'esm',
25 | sourcemap: false,
26 | },
27 | ],
28 | external: ['split.js', 'react', 'prop-types'],
29 | plugins: [
30 | buble({
31 | exclude: 'node_modules/**',
32 | objectAssign: 'Object.assign',
33 | transforms: {
34 | forOf: false,
35 | },
36 | }),
37 | ],
38 | },
39 | {
40 | input: './src/index.js',
41 | output: {
42 | name: 'ReactSplit',
43 | file: pkg['minified:main'],
44 | format: 'umd',
45 | sourcemap: true,
46 | banner: `/*! ${pkg.name} - v${pkg.version} */\n`,
47 | globals: {
48 | react: 'React',
49 | 'prop-types': 'PropTypes',
50 | 'split.js': 'Split',
51 | },
52 | },
53 | external: ['split.js', 'react', 'prop-types'],
54 | plugins: [
55 | buble({
56 | exclude: 'node_modules/**',
57 | objectAssign: 'Object.assign',
58 | transforms: {
59 | forOf: false,
60 | },
61 | }),
62 | terser(),
63 | ],
64 | },
65 | ]
66 |
--------------------------------------------------------------------------------
/packages/react-split/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 | import Split from 'split.js'
4 |
5 | class SplitWrapper extends React.Component {
6 | componentDidMount() {
7 | const { children, gutter, ...options } = this.props
8 |
9 | options.gutter = (index, direction) => {
10 | let gutterElement
11 |
12 | if (gutter) {
13 | gutterElement = gutter(index, direction)
14 | } else {
15 | gutterElement = document.createElement('div')
16 | gutterElement.className = `gutter gutter-${direction}`
17 | }
18 |
19 | // eslint-disable-next-line no-underscore-dangle
20 | gutterElement.__isSplitGutter = true
21 | return gutterElement
22 | }
23 |
24 | this.split = Split(this.parent.children, options)
25 | }
26 |
27 | componentDidUpdate(prevProps) {
28 | const { children, minSize, sizes, collapsed, ...options } = this.props
29 | const {
30 | minSize: prevMinSize,
31 | sizes: prevSizes,
32 | collapsed: prevCollapsed,
33 | } = prevProps
34 |
35 | const otherProps = [
36 | 'maxSize',
37 | 'expandToMin',
38 | 'gutterSize',
39 | 'gutterAlign',
40 | 'snapOffset',
41 | 'dragInterval',
42 | 'direction',
43 | 'cursor',
44 | ]
45 |
46 | let needsRecreate = otherProps
47 | // eslint-disable-next-line react/destructuring-assignment
48 | .map(prop => this.props[prop] !== prevProps[prop])
49 | .reduce((accum, same) => accum || same, false)
50 |
51 | // Compare minSize when both are arrays, when one is an array and when neither is an array
52 | if (Array.isArray(minSize) && Array.isArray(prevMinSize)) {
53 | let minSizeChanged = false
54 |
55 | minSize.forEach((minSizeI, i) => {
56 | minSizeChanged = minSizeChanged || minSizeI !== prevMinSize[i]
57 | })
58 |
59 | needsRecreate = needsRecreate || minSizeChanged
60 | } else if (Array.isArray(minSize) || Array.isArray(prevMinSize)) {
61 | needsRecreate = true
62 | } else {
63 | needsRecreate = needsRecreate || minSize !== prevMinSize
64 | }
65 |
66 | // Destroy and re-create split if options changed
67 | if (needsRecreate) {
68 | options.minSize = minSize
69 | options.sizes = sizes || this.split.getSizes()
70 | this.split.destroy(true, true)
71 | options.gutter = (index, direction, pairB) => pairB.previousSibling
72 | this.split = Split(
73 | Array.from(this.parent.children).filter(
74 | // eslint-disable-next-line no-underscore-dangle
75 | element => !element.__isSplitGutter,
76 | ),
77 | options,
78 | )
79 | } else if (sizes) {
80 | // If only the size has changed, set the size. No need to do this if re-created.
81 | let sizeChanged = false
82 |
83 | sizes.forEach((sizeI, i) => {
84 | sizeChanged = sizeChanged || sizeI !== prevSizes[i]
85 | })
86 |
87 | if (sizeChanged) {
88 | // eslint-disable-next-line react/destructuring-assignment
89 | this.split.setSizes(this.props.sizes)
90 | }
91 | }
92 |
93 | // Collapse after re-created or when collapsed changed.
94 | if (
95 | Number.isInteger(collapsed) &&
96 | (collapsed !== prevCollapsed || needsRecreate)
97 | ) {
98 | this.split.collapse(collapsed)
99 | }
100 | }
101 |
102 | componentWillUnmount() {
103 | this.split.destroy()
104 | delete this.split
105 | }
106 |
107 | render() {
108 | const {
109 | sizes,
110 | minSize,
111 | maxSize,
112 | expandToMin,
113 | gutterSize,
114 | gutterAlign,
115 | snapOffset,
116 | dragInterval,
117 | direction,
118 | cursor,
119 | gutter,
120 | elementStyle,
121 | gutterStyle,
122 | onDrag,
123 | onDragStart,
124 | onDragEnd,
125 | collapsed,
126 | children,
127 | ...rest
128 | } = this.props
129 |
130 | return (
131 | {
133 | this.parent = parent
134 | }}
135 | {...rest}
136 | >
137 | {children}
138 |
139 | )
140 | }
141 | }
142 |
143 | SplitWrapper.propTypes = {
144 | sizes: PropTypes.arrayOf(PropTypes.number),
145 | minSize: PropTypes.oneOfType([
146 | PropTypes.number,
147 | PropTypes.arrayOf(PropTypes.number),
148 | ]),
149 | maxSize: PropTypes.oneOfType([
150 | PropTypes.number,
151 | PropTypes.arrayOf(PropTypes.number),
152 | ]),
153 | expandToMin: PropTypes.bool,
154 | gutterSize: PropTypes.number,
155 | gutterAlign: PropTypes.string,
156 | snapOffset: PropTypes.oneOfType([
157 | PropTypes.number,
158 | PropTypes.arrayOf(PropTypes.number),
159 | ]),
160 | dragInterval: PropTypes.number,
161 | direction: PropTypes.string,
162 | cursor: PropTypes.string,
163 | gutter: PropTypes.func,
164 | elementStyle: PropTypes.func,
165 | gutterStyle: PropTypes.func,
166 | onDrag: PropTypes.func,
167 | onDragStart: PropTypes.func,
168 | onDragEnd: PropTypes.func,
169 | collapsed: PropTypes.number,
170 | children: PropTypes.arrayOf(PropTypes.element),
171 | }
172 |
173 | SplitWrapper.defaultProps = {
174 | sizes: undefined,
175 | minSize: undefined,
176 | maxSize: undefined,
177 | expandToMin: undefined,
178 | gutterSize: undefined,
179 | gutterAlign: undefined,
180 | snapOffset: undefined,
181 | dragInterval: undefined,
182 | direction: undefined,
183 | cursor: undefined,
184 | gutter: undefined,
185 | elementStyle: undefined,
186 | gutterStyle: undefined,
187 | onDrag: undefined,
188 | onDragStart: undefined,
189 | onDragEnd: undefined,
190 | collapsed: undefined,
191 | children: undefined,
192 | }
193 |
194 | export default SplitWrapper
195 |
--------------------------------------------------------------------------------
/packages/react-split/src/index.test.js:
--------------------------------------------------------------------------------
1 | /* eslint-env jest */
2 |
3 | test('', () => {})
4 |
--------------------------------------------------------------------------------
/packages/split-generator/.dependabot/config.yml:
--------------------------------------------------------------------------------
1 | version: 1
2 |
3 | update_configs:
4 | - package_manager: "javascript"
5 | directory: "/"
6 | update_schedule: "live"
7 | automerged_updates:
8 | - match:
9 | update_type: "all"
10 | target_branch: master
11 |
--------------------------------------------------------------------------------
/packages/split-generator/.eslintignore:
--------------------------------------------------------------------------------
1 | /node_modules/*
2 | /dist/*
3 | /public/*
--------------------------------------------------------------------------------
/packages/split-generator/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "browser": true,
4 | "jest": true
5 | },
6 | "extends": ["airbnb-base", "prettier"],
7 | "rules": {
8 | "import/no-extraneous-dependencies": [
9 | "error",
10 | { "devDependencies": true }
11 | ],
12 | "no-new": 0
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/packages/split-generator/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
1 | name: CI
2 |
3 | on: [push, pull_request]
4 |
5 | jobs:
6 | build:
7 | runs-on: ubuntu-latest
8 |
9 | steps:
10 | - uses: actions/checkout@v2
11 | - uses: actions/setup-node@v2
12 | with:
13 | node-version: '14'
14 | - run: yarn install
15 | - run: yarn run test
16 | env:
17 | CI: true
18 |
--------------------------------------------------------------------------------
/packages/split-generator/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | lerna-debug.log*
8 |
9 | # Diagnostic reports (https://nodejs.org/api/report.html)
10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
11 |
12 | # Runtime data
13 | pids
14 | *.pid
15 | *.seed
16 | *.pid.lock
17 |
18 | # Directory for instrumented libs generated by jscoverage/JSCover
19 | lib-cov
20 |
21 | # Coverage directory used by tools like istanbul
22 | coverage
23 | *.lcov
24 |
25 | # nyc test coverage
26 | .nyc_output
27 |
28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
29 | .grunt
30 |
31 | # Bower dependency directory (https://bower.io/)
32 | bower_components
33 |
34 | # node-waf configuration
35 | .lock-wscript
36 |
37 | # Compiled binary addons (https://nodejs.org/api/addons.html)
38 | build/Release
39 |
40 | # Dependency directories
41 | node_modules/
42 | jspm_packages/
43 |
44 | # TypeScript v1 declaration files
45 | typings/
46 |
47 | # TypeScript cache
48 | *.tsbuildinfo
49 |
50 | # Optional npm cache directory
51 | .npm
52 |
53 | # Optional eslint cache
54 | .eslintcache
55 |
56 | # Microbundle cache
57 | .rpt2_cache/
58 | .rts2_cache_cjs/
59 | .rts2_cache_es/
60 | .rts2_cache_umd/
61 |
62 | # Optional REPL history
63 | .node_repl_history
64 |
65 | # Output of 'npm pack'
66 | *.tgz
67 |
68 | # Yarn Integrity file
69 | .yarn-integrity
70 |
71 | # dotenv environment variables file
72 | .env
73 | .env.test
74 |
75 | # parcel-bundler cache (https://parceljs.org/)
76 | .cache
77 |
78 | # Next.js build output
79 | .next
80 |
81 | # Nuxt.js build / generate output
82 | .nuxt
83 | dist
84 |
85 | # Gatsby files
86 | .cache/
87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js
88 | # https://nextjs.org/blog/next-9-1#public-directory-support
89 | public/*.js*
90 | public/*.css*
91 |
92 | # vuepress build output
93 | .vuepress/dist
94 |
95 | # Serverless directories
96 | .serverless/
97 |
98 | # FuseBox cache
99 | .fusebox/
100 |
101 | # DynamoDB Local files
102 | .dynamodb/
103 |
104 | # TernJS port file
105 | .tern-port
106 |
--------------------------------------------------------------------------------
/packages/split-generator/.prettierignore:
--------------------------------------------------------------------------------
1 | public/
--------------------------------------------------------------------------------
/packages/split-generator/README.md:
--------------------------------------------------------------------------------
1 | # mapgrid-svelte-tailwind
2 |
--------------------------------------------------------------------------------
/packages/split-generator/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "split-generator",
3 | "private": true,
4 | "version": "1.0.0",
5 | "repository": "git@github.com:nathancahill/split.git",
6 | "author": "Nathan Cahill ",
7 | "license": "MIT",
8 | "devDependencies": {
9 | "@fullhuman/postcss-purgecss": "^4.0.3",
10 | "@rollup/plugin-commonjs": "^18.0.0",
11 | "@rollup/plugin-node-resolve": "^11.2.1",
12 | "autoprefixer": "^10.2.5",
13 | "eslint": "^7.23.0",
14 | "eslint-config-airbnb-base": "^14.2.1",
15 | "eslint-config-prettier": "^8.1.0",
16 | "eslint-plugin-import": "^2.22.1",
17 | "jest": "^26.6.3",
18 | "postcss": "^8.2.8",
19 | "postcss-load-config": "^3.0.1",
20 | "prettier": "^2.2.1",
21 | "rollup": "^2.43.0",
22 | "rollup-plugin-css-only": "^3.1.0",
23 | "rollup-plugin-livereload": "^2.0.0",
24 | "rollup-plugin-svelte": "^7.1.0",
25 | "rollup-plugin-terser": "^7.0.2",
26 | "sirv-cli": "^1.0.11",
27 | "svelte": "^3.35.0",
28 | "svelte-preprocess": "^4.7.0",
29 | "tailwindcss": "^2.0.4"
30 | },
31 | "scripts": {
32 | "build": "NODE_ENV=production rollup -c",
33 | "watch": "rollup -cw",
34 | "format": "prettier --write \"**/*.js\" \"**/*.json\"",
35 | "lint": "eslint .",
36 | "test": "jest && yarn run lint",
37 | "serve": "sirv public --single --dev"
38 | },
39 | "dependencies": {
40 | "@tailwindcss/forms": "^0.3.2",
41 | "less": "^4.1.1",
42 | "qs": "^6.10.1",
43 | "split-grid": "^1.0.9",
44 | "split.js": "^1.6.2",
45 | "svelte-prismjs": "^1.0.1",
46 | "svelte-spa-router": "^3.1.0"
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/packages/split-generator/postcss.config.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable global-require */
2 | const purgecss = require('@fullhuman/postcss-purgecss')({
3 | content: ['./src/**/*.html', './src/**/*.svelte'],
4 |
5 | safelist: [/svelte-/],
6 |
7 | defaultExtractor: content =>
8 | content
9 | .match(/[A-Za-z0-9-_:./]+/g)
10 | .map(c => (c.startsWith('class:') ? c.substring(6) : c)) || [],
11 | })
12 |
13 | const plugins = [require('tailwindcss'), require('autoprefixer')]
14 |
15 | if (process.env.NODE_ENV === 'production') {
16 | plugins.push(purgecss)
17 | }
18 |
19 | module.exports = {
20 | plugins,
21 | }
22 |
--------------------------------------------------------------------------------
/packages/split-generator/prettier.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | printWidth: 80,
3 | trailingComma: 'all',
4 | tabWidth: 4,
5 | semi: false,
6 | singleQuote: true,
7 | arrowParens: 'avoid',
8 | }
9 |
--------------------------------------------------------------------------------
/packages/split-generator/public/horizontal.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nathancahill/split/48759432a50510e2ed762109d5a8d12a3aac9e63/packages/split-generator/public/horizontal.png
--------------------------------------------------------------------------------
/packages/split-generator/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/packages/split-generator/public/vertical.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nathancahill/split/48759432a50510e2ed762109d5a8d12a3aac9e63/packages/split-generator/public/vertical.png
--------------------------------------------------------------------------------
/packages/split-generator/rollup.config.js:
--------------------------------------------------------------------------------
1 | import commonjs from '@rollup/plugin-commonjs'
2 | import resolve from '@rollup/plugin-node-resolve'
3 | import svelte from 'rollup-plugin-svelte'
4 | import livereload from 'rollup-plugin-livereload'
5 | import { terser } from 'rollup-plugin-terser'
6 | import sveltePreprocess from 'svelte-preprocess'
7 | import css from 'rollup-plugin-css-only'
8 |
9 | const prod = process.env.NODE_ENV === 'production'
10 | const watch = process.env.ROLLUP_WATCH
11 |
12 | export default {
13 | input: 'src/index.js',
14 | output: {
15 | file: 'public/bundle.js',
16 | format: 'iife',
17 | },
18 | plugins: [
19 | svelte({
20 | preprocess: sveltePreprocess({
21 | postcss: true,
22 | }),
23 | compilerOptions: {
24 | dev: !prod,
25 | },
26 | }),
27 | css({
28 | output: 'bundle.css',
29 | }),
30 | resolve({
31 | dedupe: ['svelte', 'svelte/internal'],
32 | browser: true,
33 | }),
34 | commonjs(),
35 | !!watch && livereload(),
36 | !!prod && terser(),
37 | ],
38 | }
39 |
--------------------------------------------------------------------------------
/packages/split-generator/src/App.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 |
21 |
--------------------------------------------------------------------------------
/packages/split-generator/src/Dashboard.svelte:
--------------------------------------------------------------------------------
1 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 | Split.js
26 |
27 |
28 |
29 |
30 |
66 |
67 |
91 |
93 |
94 |
95 |
96 |
97 |
98 |
110 |
29 |
33 |
47 |
48 |
49 |
55 |
56 |
60 |
74 |
75 |
12 | {#each options as option, i}
13 |
48 | {/each}
49 |
308 |
Column One
309 |
310 |
Column Two
311 |
312 |
Column Three
313 |
Row One
314 |
315 |
Row Two
316 |
32 |
33 | ### Sponsors
34 |
35 | Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/splitjs#sponsor)]
36 |
37 | [
](https://saucelabs.com)
38 |
39 | 
40 | 
41 | 
42 | 
43 | 
44 | 
45 | 
46 | 
47 | 
48 | 
49 |
50 | ### Used By
51 |
52 | - [JSFiddle](https://jsfiddle.net/) - Code playground
53 | - [Viz.js](http://viz-js.com/) - Graphviz in your browser
54 | - [Perchance](https://perchance.org/welcome) - Platform for creating and sharing random text generators
55 | - [Babylon.js Playground](https://www.babylonjs-playground.com/)
56 | - And many more. Submit a PR to list your project here.
57 |
--------------------------------------------------------------------------------
/lerna.json:
--------------------------------------------------------------------------------
1 | {
2 | "version": "1.0.0",
3 | "npmClient": "yarn",
4 | "useWorkspaces": true
5 | }
6 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "private": true,
3 | "workspaces": [
4 | "packages/*"
5 | ],
6 | "scripts": {
7 | "build": "lerna run build",
8 | "test": "lerna run test",
9 | "lint": "eslint .",
10 | "saucelabs": "lerna run saucelabs",
11 | "deploy": "git push origin `git subtree split --prefix packages/split-generator/public master`:gh-pages --force"
12 | },
13 | "version": "1.0.0",
14 | "main": "index.js",
15 | "license": "MIT",
16 | "devDependencies": {
17 | "@babel/core": "^7.10.2",
18 | "@babel/preset-env": "^7.10.2",
19 | "@rollup/plugin-buble": "^0.21.3",
20 | "@rollup/plugin-node-resolve": "^11.0.0",
21 | "@types/react": "^17.0.3",
22 | "babel-jest": "^26.0.1",
23 | "eslint": "^5.16.0 || ^6.8.0 || ^7.2.0",
24 | "eslint-config-airbnb": "^18.2.0",
25 | "eslint-config-prettier": "^8.0.0",
26 | "eslint-plugin-import": "^2.21.2",
27 | "eslint-plugin-jsx-a11y": "^6.3.1",
28 | "eslint-plugin-react": "^7.20.0",
29 | "eslint-plugin-react-hooks": "^4.0.4",
30 | "gzip-size-cli": "^4.0.0",
31 | "jasmine-core": "3.7.1",
32 | "jest": "^26.0.1",
33 | "karma": "^6.0.4",
34 | "karma-chrome-launcher": "^3.1.0",
35 | "karma-firefox-launcher": "^2.0.0",
36 | "karma-jasmine": "^4.0.0",
37 | "karma-sauce-launcher": "^4.1.5",
38 | "lerna": "^4.0.0",
39 | "prettier": "^2.0.5",
40 | "react": "^17.0.0",
41 | "rollup": "^2.15.0",
42 | "rollup-plugin-terser": "^7.0.0"
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/packages/grid-template-utils/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["@babel/preset-env"]
3 | }
--------------------------------------------------------------------------------
/packages/grid-template-utils/LICENSE.txt:
--------------------------------------------------------------------------------
1 | Copyright (c) 2020 Nathan Cahill
2 |
3 | Permission is hereby granted, free of charge, to any person obtaining a copy
4 | of this software and associated documentation files (the "Software"), to deal
5 | in the Software without restriction, including without limitation the rights
6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
7 | copies of the Software, and to permit persons to whom the Software is
8 | furnished to do so, subject to the following conditions:
9 |
10 | The above copyright notice and this permission notice shall be included in
11 | all copies or substantial portions of the Software.
12 |
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
19 | THE SOFTWARE.
20 |
--------------------------------------------------------------------------------
/packages/grid-template-utils/README.md:
--------------------------------------------------------------------------------
1 | # Grid Template Utils [](https://circleci.com/gh/nathancahill/split)  [](https://unpkg.com/grid-template-utils/dist/grid-template-utils.min.js)
2 |
3 | ## Installation
4 |
5 | Yarn:
6 |
7 | ```
8 | $ yarn add grid-template-utils
9 | ```
10 |
11 | npm:
12 |
13 | ```
14 | $ npm install --save grid-template-utils
15 | ```
16 |
17 | Include with a module bundler like [rollup](http://rollupjs.org/) or [webpack](https://webpack.github.io/):
18 |
19 | ```js
20 | // using ES6 modules
21 | import { parse, combine, getSizeAtTrack } from 'grid-template-utils'
22 |
23 | // using CommonJS modules
24 | var utils = require('grid-template-utils')
25 | ```
26 |
27 | The [UMD](https://github.com/umdjs/umd) build is also available on [unpkg](http://unpkg.com/):
28 |
29 | ```html
30 |
31 | ```
32 |
33 | You can find the library on `window.GridTemplateUtils`.
34 |
35 | ## Example
36 |
37 | ```js
38 | import { parse, combine, getSizeAtTrack } from 'grid-template-utils'
39 |
40 | > parse('1fr 10px 1fr')
41 | [
42 | {
43 | value: '1fr',
44 | type: 'fr',
45 | numeric: 1,
46 | },
47 | {
48 | value: '10px',
49 | type: 'px',
50 | numeric: 10,
51 | },
52 | {
53 | value: '1fr',
54 | type: 'fr',
55 | numeric: 1,
56 | },
57 | ]
58 |
59 | > combine('1fr 10px 1fr', [,{ value: '20px' }])
60 | '1fr 20px 1fr'
61 |
62 |
63 | > getSizeAtTrack(1, parse('10px 10px 10px'))
64 | 20
65 |
66 | > getSizeAtTrack(1, parse('10px 10px 10px'), 20)
67 | 40
68 | ```
69 |
70 | ## Reference
71 |
72 | ##### `Track { value: string, type: 'fr' | 'px' | '%' | 'auto', numeric: number }`
73 |
74 | Object describing CSS values for a single track in a grid template.
75 |
76 | ##### `parse(rule: string) => Track[]`
77 |
78 | Parses a `grid-template-rows` or `grid-template-columns` CSS rule to
79 | an array of `Track` objects with `value`, `type` and `numeric` keys.
80 |
81 | ##### `combine(rule: string, tracks: Track[]) => string`
82 |
83 | Updates a CSS rule with values from an array of `Track` objects. The array can be sparse,
84 | only included indices will be updated. If `Track.value` is specified,
85 | that string value will be used directly. If not, `Track.numeric` and `Track.type` are
86 | joined before interpolation.
87 |
88 | ##### `getSizeAtTrack(index: number, tracks: Track[], gap?: number = 0, end?: boolean = false) => number`
89 |
90 | Returns the pixel size measured from the start of the grid layout up to the track
91 | specified by `index`. Each `Track.numeric` value should be a `px` value
92 | (for example, as returned by `parse(getComputedStyle())`).
93 | Optional argument `gap` is the pixel size of `grid-gap`. Optional agrument `end`
94 | is a flag that determines whether to measure up to the start or end of the track.
95 | Defaults to `false` (measure to the start of the track).
96 |
97 | ## License
98 |
99 | Copyright (c) 2018 Nathan Cahill
100 |
101 | Permission is hereby granted, free of charge, to any person obtaining a copy
102 | of this software and associated documentation files (the "Software"), to deal
103 | in the Software without restriction, including without limitation the rights
104 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
105 | copies of the Software, and to permit persons to whom the Software is
106 | furnished to do so, subject to the following conditions:
107 |
108 | The above copyright notice and this permission notice shall be included in
109 | all copies or substantial portions of the Software.
110 |
111 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
112 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
113 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
114 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
115 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
116 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
117 | THE SOFTWARE.
118 |
--------------------------------------------------------------------------------
/packages/grid-template-utils/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "grid-template-utils",
3 | "version": "1.0.1",
4 | "description": "Utility functions for working with grid templates",
5 | "main": "dist/grid-template-utils.js",
6 | "minified:main": "dist/grid-template-utils.min.js",
7 | "module": "dist/grid-template-utils.es.js",
8 | "scripts": {
9 | "build": "rollup -c && npm run size",
10 | "watch": "rollup -cw",
11 | "test": "jest",
12 | "size": "echo \"gzip size: $(gzip-size --raw $npm_package_minified_main) bytes\""
13 | },
14 | "repository": "https://github.com/nathancahill/split",
15 | "author": "Nathan Cahill