{"_id":"square-me","_rev":"2-6ead3e5043ea67c557ab9b2a6024b392","name":"square-me","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0-0":{"name":"square-me","version":"1.0.0-0","description":"Universal web component to create resizable grid layouts","module":"dist/esm/index.js","main":"dist/index.js","types":"dist/types/components.d.ts","collection":"dist/collection/collection-manifest.json","scripts":{"build":"stencil build","docs":"stencil build --docs","start":"stencil build --dev --watch --serve","test":"stencil test --spec --e2e","test.watch":"stencil test --spec --e2e --watchAll","prepublishOnly":"rm -rf .stencil/ dist/ www/ && npm install && npm run build"},"dependencies":{"split-me":"^1.1.4"},"devDependencies":{"@stencil/core":"~0.14.1","husky":"^1.0.1","prettier":"^1.14.3","pretty-quick":"^1.7.0"},"repository":{"type":"git","url":"git+https://github.com/alesgenova/square-me.git"},"author":{"name":"Alessandro Genova"},"license":"MIT","bugs":{"url":"https://github.com/alesgenova/square-me"},"homepage":"https://github.com/alesgenova/square-me","keywords":["grid-layout","stenciljs","javascript","typescript","webcomponents","split-me"],"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"publishConfig":{"access":"public"},"gitHead":"b1f248222d268c08587d6344255bde4e794e8906","_id":"square-me@1.0.0-0","_npmVersion":"6.2.0","_nodeVersion":"10.8.0","_npmUser":{"name":"alesgenova","email":"ales.genova@gmail.com"},"dist":{"integrity":"sha512-9NcwEeVQVNHnbqKol6C15To9IfwOYXXwyQMkDer0ZCFFIPz5S4EjVNorOfCmezEnTcuceyez/NhbeLh5IoxVWA==","shasum":"7d8d4ac1aa2d816246a1855c885b7771d678652e","tarball":"https://registry.npmjs.org/square-me/-/square-me-1.0.0-0.tgz","fileCount":45,"unpackedSize":366666,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJby3ptCRA9TVsSAnZWagAAkh0P/AzyDaozXto+UAo/Knoy\naHIhhTKM6OH0KBsF1AJ9QQhRiD1/Ub39y3XSF4KcP1Puqts93Jsp8eKWAuAH\nmS/JVwzFsk24wH0qtTpUyVKD4n81jFfYJclKFe0bCgypnkjWos4oOQ+yVxs7\nVZMNJOSskVej85sn4iuMNYbdytRlN7Lwpf2PK6j5K02XTqb1H7l9rOojSAFk\nO2ytaDjGWtVaIulFr6iMbkP96xw0ot8aEHIp8DgNQ4SJUZr704Aa9meeVRIG\noQtShN57pqv3AvQqysE0A+3prcxipm130sBnJfSHoCA//aDmSyDOFXzNpN9/\nmSdpScgwX9lsk3k79XSCvBEb/IJfb4C9YR4qaewnMDAjKUPG/n1ii64n59Om\nMYaJP01bkgjH6Awgl3HMRpx64MB0EH1mDAnDkupK/JoT23rFXDnLmHF13CKK\n8dn1NzJtGInzJ/eCb8vQ79Nft6m6U8w3kDv0rhBPLSXJXpmJ/370GkpJm3yJ\nGGaPJq9RBo1fUVlOjAnrwiKBWKuGVQpL1iNPdujzQBymYh/utuPOftQ5ozuv\nbsMT+H1R9D9hh5pd19y6RD0BIBFmtK2YdMG/RdM8qRDmriKRGaTg5JV4h62X\n6shVwXe9i5x/w+3Tmz0P12MfEuinbj6GDq0kTezDNz6cwVqEeeCrd96V/wpn\njP+1\r\n=ePtJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCrQLUGpQIEfIGCZ9wYSB6lkHrYp1sg6Rh2a/1nm4zCjgIhAOanrSNgCc0EZfY5JtKbXdyJhTkt4dWrZ3MSUt0Zi5Oc"}]},"maintainers":[{"name":"alesgenova","email":"ales.genova@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/square-me_1.0.0-0_1540061804504_0.28690011354267164"},"_hasShrinkwrap":false},"1.0.0":{"name":"square-me","version":"1.0.0","description":"Universal web component to create resizable grid layouts","module":"dist/esm/index.js","main":"dist/index.js","types":"dist/types/components.d.ts","collection":"dist/collection/collection-manifest.json","scripts":{"build":"stencil build","docs":"stencil build --docs","start":"stencil build --dev --watch --serve","test":"stencil test --spec --e2e","test.watch":"stencil test --spec --e2e --watchAll","prepublishOnly":"rm -rf .stencil/ dist/ www/ && npm install && npm run build"},"dependencies":{"split-me":"^1.1.4"},"devDependencies":{"@stencil/core":"~0.14.1","husky":"^1.0.1","prettier":"^1.14.3","pretty-quick":"^1.7.0"},"repository":{"type":"git","url":"git+https://github.com/alesgenova/square-me.git"},"author":{"name":"Alessandro Genova"},"license":"MIT","bugs":{"url":"https://github.com/alesgenova/square-me"},"homepage":"https://github.com/alesgenova/square-me","keywords":["grid-layout","stenciljs","javascript","typescript","webcomponents","split-me"],"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"publishConfig":{"access":"public"},"gitHead":"4c98856cd018728a606223e19b9fff116537caca","_id":"square-me@1.0.0","_npmVersion":"6.2.0","_nodeVersion":"10.8.0","_npmUser":{"name":"alesgenova","email":"ales.genova@gmail.com"},"dist":{"integrity":"sha512-+xCEiPkzfcqaKM3vvEpPOA2TU57aaZvVU9QF4S2OI2L1kFEOVbWFuLgQeypd3cejT2Thw5kiDV5op6RKwTb/wg==","shasum":"c02c5a0af7a30b9bc10ea6bead89a2390efe113d","tarball":"https://registry.npmjs.org/square-me/-/square-me-1.0.0.tgz","fileCount":45,"unpackedSize":367578,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJby4BcCRA9TVsSAnZWagAASwoQAIK6Qc/BKz+9G/c2A66l\n06krx/MidbnUPDR0TVfl6htGFFpPrHKt7Eo7FbjbDbe9IsMueiMqwdlweyLP\nzATsdhxhHNcJbhkU/cfAwao+NRK7jtuKVqa9n0bhcwq7wo4dxmeTfvhQmYms\n0xdpX/4bQtj+C/ZGlIX9nNV1mxa5nbVQxZmYKI13tGRMRUGUW3eQcUeRQ2ZH\n+QzdH+joJL8GDqzfpWyI2yR+l76nitS/qJt4aNJgm0+HKwRSWFwyGNTIOGLu\n+FoSOvCl5UVpTdOsJB+rVXIYdnz4zqZsPWjnIh1VdIt20no1L2G4/rCZBxoo\nEc8xfej8EqPZ+eucEyIU97f15G3y869F7O5qR74skJVTBXextB/9fn+MVPlP\nPb+tu1xQSbvtRiH380HW6Qi1MDYoHRonOtUNHAeh/w5gzGNACNwZ8Ch7S+wH\nbnSxaqAXSsDLR8xNmQuH63dEfgjV1x+UMJIXtVshnbuixBXrFdCbsOKr6e4f\nPuIA2lQLq9XVrYASMrYIV0jLGGjIoNiaChsTUT49JX5qchd6SL04lzLh+OGY\ni9xvxUGLhr3K9oT9WboCI27FJJbsZq2XCvEL8L4forluMLC4SA8I6EkLIWsW\nlqYVcxEYC9VZDQRLZksxJ7UNssVCtnou2swSRm94d+FM73wgDVgOJIR2nmci\n57IO\r\n=ONow\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG8KAky9bR0MGnO/9L7q9i94WO2nJGcVp9xcA16ct3pxAiEA9x+nwpoBapCX0dsGWSaMuNBE2t/HTSeNE9SRRrCCc4M="}]},"maintainers":[{"name":"alesgenova","email":"ales.genova@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/square-me_1.0.0_1540063322789_0.8055126946969711"},"_hasShrinkwrap":false}},"time":{"created":"2018-10-20T18:56:44.334Z","1.0.0-0":"2018-10-20T18:56:44.656Z","modified":"2022-05-18T12:56:11.769Z","1.0.0":"2018-10-20T19:22:03.248Z"},"maintainers":[{"name":"alesgenova","email":"ales.genova@gmail.com"}],"description":"Universal web component to create resizable grid layouts","homepage":"https://github.com/alesgenova/square-me","keywords":["grid-layout","stenciljs","javascript","typescript","webcomponents","split-me"],"repository":{"type":"git","url":"git+https://github.com/alesgenova/square-me.git"},"author":{"name":"Alessandro Genova"},"bugs":{"url":"https://github.com/alesgenova/square-me"},"license":"MIT","readme":"[![npm package](https://img.shields.io/npm/v/square-me.svg)](https://www.npmjs.com/package/square-me)\n![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d)\n\n# SquareMe - Universal Resizable Grid\n\n`SquareMe` is a universal grid layout built with [Stencil](http://stenciljs.com). It can be embedded in projects using any framework or even plain HTML. Under the hood `SquareMe` leverages the [`SplitMe`](https://github.com/alesgenova/split-me) component.\n\nSee a [Live Demo](https://alesgenova.github.io/square-me/).\n\n\n\n[![demo](./demo.gif)](https://alesgenova.github.io/square-me/)\n\n## Installing\n\n### Option 1 (HTML)\n\nAdd the `SquareMe` script tag to your `index.html`:\n\n```\n\n```\n\n### Option 2 (React / Angular / Vue)\n\nAdd `SquareMe` to your project:\n\n```\nnpm install --save square-me\n```\n\nImport `SquareMe` in your `index.js`:\n\n```js\nimport { defineCustomElements as defineSquareMe } from 'square-me/dist/loader';\n\ndefineSquareMe(window);\n```\n\n## Basic Usage\n\nUse the `square-me` tag anywhere you like. Set the number of rows and columns in the layout through the `m` and `n` attributes respectively. Set where the inner elements should be placed through the `slot` attribute:\n\n```html\n\n \n \n \n \n\n\n\n```\n\n## Advanced Usage\n\n`SquareMe` uses [`SplitMe`](https://github.com/alesgenova/split-me) under the hood. Any property/attribute passed to `SquareMe` will be forwarded to the underlying `SplitMe` components.\n\nSimply append a `-h` or `-v` to the attribute name you would use in `SplitMe` and the property will be applied to the horizontal or vertical splitters respectively\n\n```html\n\n \n \n \n \n\n```\n\n### Properties\n\n| Property | Attribute | Description | Type |\n| ----------- | ------------- | ------------------------------------------------------------------------------------- | ------------------- |\n| `fixedH` | `fixed-h` | Prevent columns from being resized | `boolean` |\n| `fixedV` | `fixed-v` | Prevent rows from being resized | `boolean` |\n| `m` | `m` | The number of rows in the grid. | `number` |\n| `maxSizesH` | `max-sizes-h` | The columns maximum sizes | `number[] | string` |\n| `maxSizesV` | `max-sizes-v` | The rows maximum sizes | `number[] | string` |\n| `minSizesH` | `min-sizes-h` | The columns minimum sizes | `number[] | string` |\n| `minSizesV` | `min-sizes-v` | The rows minimum sizes | `number[] | string` |\n| `n` | `n` | The number of columns in the grid. | `number` |\n| `sizesH` | `sizes-h` | The initial column sizes. Acceptable formats are: `\"0.33, 0.67\"` or `\"50%, 25%, 25%\"` | `number[] | string` |\n| `sizesV` | `sizes-v` | The initial row sizes. Acceptable formats are: `\"0.33, 0.67\"` or `\"50%, 25%, 25%\"` | `number[] | string` |\n| `throttleH` | `throttle-h` | The minimum time (in ms) between column resize events while dragging. | `number` |\n| `throttleV` | `throttle-v` | The minimum time (in ms) between row resize events while dragging. | `number` |\n\n### Events\n\n| Event | Detail | Description |\n| -------------- | ------------ | -------------------------------------------------------- |\n| `slotResizedH` | IResizeEvent | Emitted every time dragging causes the columns to resize |\n| `slotResizedV` | IResizeEvent | Emitted every time dragging causes the rows to resize |\n","readmeFilename":"README.md"}