{"id":42712794,"url":"https://github.com/bimdata/areas","last_synced_at":"2026-01-29T15:13:10.968Z","repository":{"id":40668169,"uuid":"257956456","full_name":"bimdata/areas","owner":"bimdata","description":"A Vue.js Blender style area manager to create custom layouts","archived":false,"fork":false,"pushed_at":"2023-03-04T18:52:18.000Z","size":2529,"stargazers_count":27,"open_issues_count":21,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-10-26T20:57:46.892Z","etag":null,"topics":["tiling","tiling-layout","tiling-managers","tiling-window","tiling-window-manager","vue","vuejs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bimdata.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-04-22T16:23:01.000Z","updated_at":"2025-03-30T11:36:08.000Z","dependencies_parsed_at":"2023-02-05T07:00:58.598Z","dependency_job_id":null,"html_url":"https://github.com/bimdata/areas","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"purl":"pkg:github/bimdata/areas","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bimdata%2Fareas","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bimdata%2Fareas/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bimdata%2Fareas/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bimdata%2Fareas/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bimdata","download_url":"https://codeload.github.com/bimdata/areas/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bimdata%2Fareas/sbom","scorecard":{"id":238342,"data":{"date":"2025-08-11","repo":{"name":"github.com/bimdata/areas","commit":"c29b3f682b5c20df92a2c0dd16a7e633aee803cf"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.5,"checks":[{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Code-Review","score":0,"reason":"Found 0/30 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/ci.yml:1","Warn: no topLevel permission defined: .github/workflows/publish.yml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Pinned-Dependencies","score":0,"reason":"dependency not pinned by hash detected -- score normalized to 0","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/bimdata/areas/ci.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/bimdata/areas/ci.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/bimdata/areas/ci.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/bimdata/areas/publish.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/bimdata/areas/publish.yml/master?enable=pin","Warn: npmCommand not pinned by hash: .github/workflows/ci.yml:27","Warn: npmCommand not pinned by hash: .github/workflows/publish.yml:20","Info:   0 out of   5 GitHub-owned GitHubAction dependencies pinned","Info:   0 out of   2 npmCommand dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Vulnerabilities","score":0,"reason":"37 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-jc84-3g44-wf2q","Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q","Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c","Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc","Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-8hfj-j24r-96c4","Warn: Project is vulnerable to: GHSA-wc69-rhjr-hc9g","Warn: Project is vulnerable to: GHSA-566m-qj78-rww5","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-3965-hpx2-q597","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-5j4c-8p2g-v4jx","Warn: Project is vulnerable to: GHSA-g3ch-rx76-35fx","Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-17T06:10:21.130Z","repository_id":40668169,"created_at":"2025-08-17T06:10:21.130Z","updated_at":"2025-08-17T06:10:21.130Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28880017,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-29T10:31:27.438Z","status":"ssl_error","status_checked_at":"2026-01-29T10:31:01.017Z","response_time":59,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["tiling","tiling-layout","tiling-managers","tiling-window","tiling-window-manager","vue","vuejs"],"created_at":"2026-01-29T15:13:10.857Z","updated_at":"2026-01-29T15:13:10.955Z","avatar_url":"https://github.com/bimdata.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\u003cp align=\"center\"\u003e\u003cimg width=\"150\" src=\"./assets/areas-logo.png\" alt=\"Areas logo\"\u003e\u003c/p\u003e\n\u003cp align=\"center\"\u003e\u003cimg width=\"200\" src=\"./assets/areas-title.png\" alt=\"Areas title\"\u003e\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e A \u003ca href=\"https://vuejs.org/\"\u003eVue.js\u003c/a\u003e \u003ca href=\"https://www.blender.org/\"\u003e Blender\u003c/a\u003e \u003ca href=\"https://docs.blender.org/manual/en/latest/interface/window_system/areas.html\"\u003estyle\u003c/a\u003e area manager to create custom layouts.\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"300\" height=\"150\" src=\"./assets/split.gif\" alt=\"Areas split\"\u003e\n  \u003cimg width=\"300\" height=\"150\" src=\"./assets/resize.gif\" alt=\"Areas resize\"\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"300\" height=\"150\" src=\"./assets/swap.gif\" alt=\"Areas swap\"\u003e\n  \u003cimg width=\"300\" height=\"150\" src=\"./assets/delete.gif\" alt=\"Areas delete\"\u003e\n\u003c/p\u003e\n\nAreas aims to provide a flexible and customizable environment to create custom UI layouts using [Vue.js](https://vuejs.org/).\n\nIt is possible to **split** (vertical/horizontal), **resize**, **swap** and **delete** areas as needed. The current layout can be **saved** and **loaded** later. Components in areas are **cached** and not rerendered when the layout is edited. Areas width and height are **percentage ratio based** so resizing the viewport resizes areas accordingly. Styles can be customized using [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties).\n\n![CI](https://github.com/bimdata/areas/workflows/CI/badge.svg)\n\n# Install\n\nUse npm:\n\n```\nnpm i @bimdata/areas\n```\n\n# Usage\n\nImport Areas in your Vue.js app:\n\n```javascript\n\nimport Areas from \"@bimdata/areas\";\n\n```\n\nUse it in your component:\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv class=\"yourComponent\"\u003e\n    \u003cAreas :cfg=\"areasCfg\" /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\nConfiguration example:\n\n```javascript\nconst areasCfg = {\n  // The available components that will be used in areas.\n  components: [\n    { render: h =\u003e h(\"div\", \"Content I\") },\n    { render: h =\u003e h(\"div\", \"Content II\") },\n    { render: h =\u003e h(\"div\", \"Content III\") }\n  ],\n  // The layout divided in areas, composed by areas or area containers.\n  layout: {\n    // area container\n    direction: \"row\",\n    ratios: [20, 80],\n    children: [\n      {\n        // area\n        componentIndex: 0,\n      },\n      {\n        // area container\n        direction: \"column\",\n        ratios: [40, 60],\n        children: [\n          {\n            // area\n            componentIndex: 1,\n          },\n          {\n            // area\n            componentIndex: 2\n          }\n        ]\n      }\n    ]\n  }\n};\n```\n\nResult:\n\n\u003cimg width=\"400\" src=\"./assets/areas-simple-example.png\" alt=\"Areas simple example\"\u003e\n\n# API\n\n## Configuration\n\nAreas needs an object as `cfg` props:\n\n### `cfg`:\n| Property | Type | Description |\n| :--- | :--- | :--- |\n| `components` | `array` | **Required**. An array of Vue.js components. |\n| `layout` | `array` | **Required**. An [`area`](#area) or an [`area container`](#area-container). |\n| `separatorThickness` | `number` | **Optional**. Default to 2. The thickness of separators. |\n| `separatorDetectionMargin` | `number` | **Optional**. Default to 10. Margin of the detection region on separators. This helps the user to get the separator with the mouse even if it is small. |\n| `areaMinRatio` | `number` | **Optional**. Default to 0. The minimal ratio of an area. |\n| `defaultComponent` | `object` | **Optional**. Default to a component that renders nothing. The default component is used when splitting the window or using componentIndex = null. |\n| `dragImage` | `object` | **Optional**. An object to customize drag image. Properties are img, xOffset and yOffset and match [setDragImage web API](https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/setDragImage). |\n\n### `area`:\n| Property | Type | Description |\n| :--- | :--- | :--- |\n| `componentIndex` | `number` | **Required**. A valid index of the `cfg.components` array, or `null` for the default component. |\n| `name` | `string` | **Optional**. A name, used to retrieve area content. |\n| `cfg` | `object` | **Optional**. A [data object](https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth) used to pass props, event listener,... to the component instance. |\n\n### `area container`:\n| Property | Type | Description |\n| :--- | :--- | :--- |\n| `ratios` | `array` | **Required**. An array of integers representing the percentage of the corresponding children in the container. Length must be \u003e 1. |\n| `children` | `array` | **Required**. An array of [`area`](#area) or [`area container`](#area-container). Must have the same length as ratios. |\n| `direction` | `string` | **Optional**. Default to `row`. Can be changed to `column`. The way areas is displayed in the container. |\n\n## Modes\n\nAreas component instance can be set with *modes*:\n- `split-vertical`: a vertical bar is displayed on top of the hovered (active) area. Clicking splits the area vertically.\n- `split-horizontal`: a horizontal bar is displayed on top of the hovered (active) area. Clicking splits the area horizontally.\n- `swap`: areas can be dragged and dropped to swap them.\n- `delete`: clicking area deletes it. (It is impossible to delete the last remaining area.)\n\nTo set a mode, use `setMode` on areas instance: (usage example with [ref](https://vuejs.org/v2/api/#ref))\n\n```javascript\nthis.$refs.areas.setMode(mode); // mode must be \"split-vertical\", \"split-horizontal\", \"swap\", \"delete\" or null to exit modes\n```\n\nWhen the mode is different from `null`, overlays is displayed on areas. To change overlays style, use [corresponding css variables](#style).\n\n## Events\n\nSplitting, deletting and swapping fire events that can be listened on areas component.\n\n| Name | Arguments |\n| :--- | :--- |\n| `area-splitted` | `{ areaId, newAreaId, way, percentage, insertNewAfter }` |\n| `area-deletted` | `{ areaId }` |\n| `areas-swapped` | `{ areaId1, areaId2 }` |\n\n\n## Public Methods\n\nMethods on Areas instance:\n\n| Name | Arguments | Description |\n| :--- | :--- | :--- |\n| `getCurrentLayout()` | none | Get the current layout. |\n| `loadLayout(layout)` | `layout`: **Required**. A layout object get by calling getCurrentLayout. | Load a saved layout. |\n| `changeAreaContent(areaId, contentCfg)` | `areaId`: **Required**. The id of the area to change the content. `contentCfg`: **Required**. An [`area content`](#area) object.  | Change the content of an area. |\n| `setMode(mode)` | `mode`: **Required**. See [Modes](#Modes) | Change Areas mode. |\n| `deleteArea(areaId)` | `areaId`: **Required**. | Delete area with this id. |\n| `splitArea(areaId, way, percentage = 50, insertNewAfter = true)` | `areaId`: **Required**. `way`: **Required**. \"vertical\" or \"horizontal\". `percentage`, the percentage from left or top. `insertNewAfter`, if the new area is inserted after or before the splitted one. | Split area. |\n| `swapAreas(areaId1, areaId2)` | `areaId1` \u0026 `areaId2`: **Required** numbers | Swap areas. |\n| `getAreaContentByName(name)` | `name`: **Required** string | Get [`area content`](#area) by name. |\n\n## Style\n\nIt is possible to customize areas style declaring CSS variables:\n\n```css\n/* Cursors */\n--areas-delete-cursor some-valid-cursor;\n--areas-vertical-resize-cursor some-valid-cursor;\n--areas-horizontal-resize-cursor some-valid-cursor;\n--areas-vertical-split-cursor: some-valid-cursor;\n--areas-horizontal-split-cursor: some-valid-cursor;\n--areas-drag-cursor some-valid-cursor;\n--areas-dragging-cursor: some-valid-cursor;\n--areas-delete-cursor some-valid-cursor;\n\n/* Areas basics */\n--areas-background-color: color;\n--areas-separator-color: color;\n--areas-split-line-color: color;\n--areas-active-box-shadow: box-shadow;\n\n/* Areas modes overlays */\n--areas-overlay-color: color;\n--areas-overlay-outline-offset: outline-offset-px;\n--areas-overlay-outline: css-outline-properties;\n\n--areas-overlay-split-color: color;\n--areas-overlay-split-outline-offset: outline-offset-px;\n--areas-overlay-split-outline: css-outline-properties;\n\n--areas-overlay-delete-color: color;\n--areas-overlay-delete-outline-offset: outline-offset-px;\n--areas-overlay-delete-outline: css-outline-properties;\n\n--areas-overlay-swap-color: color;\n--areas-overlay-swap-outline-offset: outline-offset-px;\n--areas-overlay-swap-outline: css-outline-properties;\n\n--areas-overlay-swapover-color: color;\n--areas-overlay-swapover-outline-offset: outline-offset-px;\n--areas-overlay-swapover-outline: css-outline-properties;\n```\n\n[css-outline-properties](https://developer.mozilla.org/en-US/docs/Web/CSS/outline)\n[some-valid-cursor](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor)\n\n## Area injection\n\nEach child component in an area is able to get some area utilities from the area it lives in by [injecting](https://vuejs.org/v2/guide/components-edge-cases.html#Dependency-Injection) $area:\n\n```javascript\n{\n  // Your Vue.js component\n  inject: [\"$area\"]\n}\n```\n\nThe `$area` object provides the following properties:\n\n| Property | Description |\n| :--- | :--- |\n| id | The id of the area. |\n| domElement | The domElement of the area. |\n| component | The Vue.js component instance of the area. |\n| contentComponent | The Vue.js component instance of the first child of the area. (It is different from area.$children[0] due to implementation) |\n| areas | The Areas Vue.js component instance. |\n| onChange(handler) | A method that accepts a callback (handler) as parameter. The handler is called when area change (swap) with newAreaId and OldAreaId as parameters. |\n| offChange(handler) | A method that accepts a callback (handler) as parameter to stop listening to area change with this handler. |\n\n## Size\n\nTo know areas size (number of areas) :\n```javascript\n// The host component\n{\n  data() {\n    return {\n      areasSize: null,\n    }\n  },\n  mounted() {\n    this.$watch(() =\u003e this.$refs.areas.size, size =\u003e { // ref=\"areas\" must be placed on Areas component\n      this.areasSize = size;\n    }, {\n      immediate: true\n    });\n  },\n  // ...\n}\n```\n\n# Development\n\nBuild on-change for development and serve:\n```\nnpm run dev\n```\n\nAll Tests:\n```\nnpm run build:prod\nnpm run test\n```\n\nUnit tests:\n```\nnpm run build:prod\nnpm run test:unit\n```\n\nE2e tests:\n```\nnpm run build:prod\nnpm run test:e2e\n```\n\nTo e2e test on development (this builds in production mode and open cypress instead of running it):\n```\nnpm run test:e2e-dev\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbimdata%2Fareas","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbimdata%2Fareas","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbimdata%2Fareas/lists"}