├── .gitignore ├── .vscode └── extensions.json ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── add-dev-dep.cjs ├── cleanup.cjs ├── copy-types.cjs ├── cypress.config.js ├── cypress ├── e2e │ ├── example.cy.js │ └── jsconfig.json ├── fixtures │ └── example.json └── support │ ├── commands.js │ └── e2e.js ├── index.html ├── jsconfig.json ├── package-lock.json ├── package.json ├── src ├── App.vue ├── assets │ ├── base.css │ └── main.css ├── components │ ├── Grid.vue │ ├── Grid3d.vue │ ├── GridPlan.vue │ ├── __tests__ │ │ └── lib.test.js │ └── icons │ │ ├── IconCommunity.vue │ │ ├── IconDocumentation.vue │ │ ├── IconEcosystem.vue │ │ ├── IconSupport.vue │ │ └── IconTooling.vue ├── default_config.json ├── icons.js ├── index.js ├── lib │ └── index.js └── main.js ├── types └── grid-plan.d.ts ├── vite.config.js └── vitest.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | .DS_Store 12 | dist 13 | dist-ssr 14 | coverage 15 | *.local 16 | 17 | /cypress/videos/ 18 | /cypress/screenshots/ 19 | 20 | # Editor directories and files 21 | .vscode/* 22 | !.vscode/extensions.json 23 | .idea 24 | *.suo 25 | *.ntvs* 26 | *.njsproj 27 | *.sln 28 | *.sw? 29 | 30 | *.tsbuildinfo 31 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["Vue.volar"] 3 | } 4 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | We as members, contributors, and leaders pledge to make participation in our 6 | community a harassment-free experience for everyone, regardless of age, body 7 | size, visible or invisible disability, ethnicity, sex characteristics, gender 8 | identity and expression, level of experience, education, socio-economic status, 9 | nationality, personal appearance, race, religion, or sexual identity 10 | and orientation. 11 | 12 | We pledge to act and interact in ways that contribute to an open, welcoming, 13 | diverse, inclusive, and healthy community. 14 | 15 | ## Our Standards 16 | 17 | Examples of behavior that contributes to a positive environment for our 18 | community include: 19 | 20 | * Demonstrating empathy and kindness toward other people 21 | * Being respectful of differing opinions, viewpoints, and experiences 22 | * Giving and gracefully accepting constructive feedback 23 | * Accepting responsibility and apologizing to those affected by our mistakes, 24 | and learning from the experience 25 | * Focusing on what is best not just for us as individuals, but for the 26 | overall community 27 | 28 | Examples of unacceptable behavior include: 29 | 30 | * The use of sexualized language or imagery, and sexual attention or 31 | advances of any kind 32 | * Trolling, insulting or derogatory comments, and personal or political attacks 33 | * Public or private harassment 34 | * Publishing others' private information, such as a physical or email 35 | address, without their explicit permission 36 | * Other conduct which could reasonably be considered inappropriate in a 37 | professional setting 38 | 39 | ## Enforcement Responsibilities 40 | 41 | Community leaders are responsible for clarifying and enforcing our standards of 42 | acceptable behavior and will take appropriate and fair corrective action in 43 | response to any behavior that they deem inappropriate, threatening, offensive, 44 | or harmful. 45 | 46 | Community leaders have the right and responsibility to remove, edit, or reject 47 | comments, commits, code, wiki edits, issues, and other contributions that are 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation 49 | decisions when appropriate. 50 | 51 | ## Scope 52 | 53 | This Code of Conduct applies within all community spaces, and also applies when 54 | an individual is officially representing the community in public spaces. 55 | Examples of representing our community include using an official e-mail address, 56 | posting via an official social media account, or acting as an appointed 57 | representative at an online or offline event. 58 | 59 | ## Enforcement 60 | 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 62 | reported to the community leaders responsible for enforcement at 63 | . 64 | All complaints will be reviewed and investigated promptly and fairly. 65 | 66 | All community leaders are obligated to respect the privacy and security of the 67 | reporter of any incident. 68 | 69 | ## Enforcement Guidelines 70 | 71 | Community leaders will follow these Community Impact Guidelines in determining 72 | the consequences for any action they deem in violation of this Code of Conduct: 73 | 74 | ### 1. Correction 75 | 76 | **Community Impact**: Use of inappropriate language or other behavior deemed 77 | unprofessional or unwelcome in the community. 78 | 79 | **Consequence**: A private, written warning from community leaders, providing 80 | clarity around the nature of the violation and an explanation of why the 81 | behavior was inappropriate. A public apology may be requested. 82 | 83 | ### 2. Warning 84 | 85 | **Community Impact**: A violation through a single incident or series 86 | of actions. 87 | 88 | **Consequence**: A warning with consequences for continued behavior. No 89 | interaction with the people involved, including unsolicited interaction with 90 | those enforcing the Code of Conduct, for a specified period of time. This 91 | includes avoiding interactions in community spaces as well as external channels 92 | like social media. Violating these terms may lead to a temporary or 93 | permanent ban. 94 | 95 | ### 3. Temporary Ban 96 | 97 | **Community Impact**: A serious violation of community standards, including 98 | sustained inappropriate behavior. 99 | 100 | **Consequence**: A temporary ban from any sort of interaction or public 101 | communication with the community for a specified period of time. No public or 102 | private interaction with the people involved, including unsolicited interaction 103 | with those enforcing the Code of Conduct, is allowed during this period. 104 | Violating these terms may lead to a permanent ban. 105 | 106 | ### 4. Permanent Ban 107 | 108 | **Community Impact**: Demonstrating a pattern of violation of community 109 | standards, including sustained inappropriate behavior, harassment of an 110 | individual, or aggression toward or disparagement of classes of individuals. 111 | 112 | **Consequence**: A permanent ban from any sort of public interaction within 113 | the community. 114 | 115 | ## Attribution 116 | 117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], 118 | version 2.0, available at 119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html. 120 | 121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct 122 | enforcement ladder](https://github.com/mozilla/diversity). 123 | 124 | [homepage]: https://www.contributor-covenant.org 125 | 126 | For answers to common questions about this code of conduct, see the FAQ at 127 | https://www.contributor-covenant.org/faq. Translations are available at 128 | https://www.contributor-covenant.org/translations. 129 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | ## Contributing 2 | 3 | [fork]: /fork 4 | [pr]: /compare 5 | [style]: https://standardjs.com/ 6 | [code-of-conduct]: CODE_OF_CONDUCT.md 7 | 8 | Hi there! We're thrilled that you'd like to contribute to this project. Your help is essential for keeping it great. 9 | 10 | Please note that this project is released with a [Contributor Code of Conduct][code-of-conduct]. By participating in this project you agree to abide by its terms. 11 | 12 | ## Issues and PRs 13 | 14 | If you have suggestions for how this project could be improved, or want to report a bug, open an issue! We'd love all and any contributions. If you have questions, too, we'd love to hear them. 15 | 16 | We'd also love PRs. If you're thinking of a large PR, we advise opening up an issue first to talk about it, though! Look at the links below if you're not sure how to open a PR. 17 | 18 | ## Submitting a pull request 19 | 20 | 1. [Fork][fork] and clone the repository. 21 | 1. Configure and install the dependencies: `npm install`. 22 | 1. Make sure the tests pass on your machine: `npm test`. 23 | 1. Create a new branch: `git checkout -b my-branch-name`. 24 | 1. Make your change, add tests, and make sure the tests still pass. 25 | 1. Push to your fork and [submit a pull request][pr]. 26 | 1. Pat your self on the back and wait for your pull request to be reviewed and merged. 27 | 28 | Here are a few things you can do that will increase the likelihood of your pull request being accepted: 29 | 30 | - Follow the [style guide][style] which is using standard. Any linting errors should be shown when running `npm test`. 31 | - Write and update tests. 32 | - Keep your changes as focused as possible. If there are multiple changes you would like to make that are not dependent upon each other, consider submitting them as separate pull requests. 33 | - Write a [good commit message](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html). 34 | 35 | Work in Progress pull requests are also welcome to get feedback early on, or if there is something blocked you. 36 | 37 | ## Resources 38 | 39 | - [How to Contribute to Open Source](https://opensource.guide/how-to-contribute/) 40 | - [Using Pull Requests](https://help.github.com/articles/about-pull-requests/) 41 | - [GitHub Help](https://help.github.com) 42 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 ALEC LLOYD PROBERT 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 |
4 | 5 |
6 | 7 |

8 | 9 | # grid-plan 10 | 11 | ![npm](https://img.shields.io/npm/v/grid-plan) 12 | ![npm](https://img.shields.io/npm/dt/grid-plan) 13 | ![GitHub issues](https://img.shields.io/github/issues/graphieros/grid-plan) 14 | 15 | grid-plan is a Vue3 component to create blueprints for rooms, datacenters, racks, etc. 16 | 17 | Create available component types, and place, resize or delete them from the blueprint. 18 | 19 | grid-plan ships with: 20 | 21 | - config options to customize the looks of your blueprint 22 | - slots to customize icons related to component types 23 | - slots to create your available components menu and your inventory 24 | 25 | ## Installation 26 | 27 | ``` 28 | npm i grid-plan 29 | ``` 30 | 31 | You can declare the component globally in your main.js: 32 | 33 | ```js 34 | import { createApp } from "vue"; 35 | import App from "./App.vue"; 36 | 37 | import { GridPlan } from "grid-plan"; 38 | 39 | const app = createApp(App); 40 | 41 | app.component("GridPlan", GridPlan); 42 | app.mount("#app"); 43 | ``` 44 | 45 | Or you can import it directly in your Vue file: 46 | 47 | ```html 48 | 51 | ``` 52 | 53 | ## Props 54 | 55 | | Prop name | TS type | Required | Description | 56 | | -------------- | ------------------ | ----------------------------------- | ----------------------------------------------------------- | 57 | | availableTypes | GridPlanItemType[] | YES | The types of components that can be placed on the blueprint | 58 | | placedItems | GridPlanItem[] | YES (can be empty) | Components already placed on the blueprint | 59 | | readonly | boolean | NO (default: false) | Blueprint will be readonly if true | 60 | | config | GridPlanConfig | NO (default config will be applied) | Configuration object to customize looks | 61 | 62 | ## Example 63 | 64 | - Script: 65 | 66 | ```js 67 | import { ref } from "vue"; 68 | import { GridPlan } from "grid-plan"; 69 | 70 | const availableTypes = ref([ 71 | { 72 | typeId: 1, 73 | color: "#3366DD", 74 | description: "server", 75 | icon: "server", 76 | iconColor: "#FFFFFF", 77 | }, 78 | { 79 | typeId: 2, 80 | color: "#DD6633", 81 | description: "power", 82 | icon: "bolt", 83 | iconColor: "#FFFFFF", 84 | }, 85 | { 86 | typeId: 3, 87 | color: "#71a4a8", 88 | description: "monitor", 89 | icon: "deviceLaptop", 90 | iconColor: "#1A1A1A", 91 | }, 92 | ]); 93 | 94 | const placedItems = ref([ 95 | { x: 0, y: 0, h: 1, w: 12, typeId: 1 }, // it's a server component 96 | { x: 0, y: 1, h: 4, w: 12, typeId: 3 }, // it's a monitor component 97 | ]); 98 | 99 | // Config is optional 100 | // You can provide a partial config, as missing attributes will use defaults 101 | const config = ref({ 102 | abscissaType: "alphabetic", 103 | accordionMenuTitle: "Menu", 104 | coordinatesBackground: "#2A2A2A", 105 | coordinatesColor: "#8A8A8A", 106 | crosshairBackground: "#4A4A4A", 107 | fontFamily: "Arial", 108 | grid3dPosition: "top", 109 | gridFill: "#3A3A3A", 110 | gridHeight: 42, 111 | gridHighlightColor: "#00FF00", 112 | gridStroke: "#1A1A1A", 113 | gridStrokeWidth: 0.02, 114 | gridWidth: 12, 115 | handleFill: "#FFFFFF", 116 | handleSize: 0.3, 117 | iconColor: "#1A1A1A", 118 | nonSelectedOpacity: 0.3, 119 | ordinatesType: "numeric", 120 | showCrosshair: true, 121 | showGrid3d: true, 122 | tooltipColor: "#FFFFFF", 123 | useAccordionMenu: true, 124 | useGradient: true, 125 | useShadow: true, 126 | }); 127 | 128 | // Events 129 | 130 | function selectType(menuItem) { 131 | // Triggered when a menu item is selected 132 | console.log("SELECT TYPE", menuItem); 133 | } 134 | 135 | function change(item) { 136 | // Triggered whenever an item is changed 137 | console.log("CHANGED", item); 138 | } 139 | 140 | function deleteItem(item) { 141 | // Triggered whenever an item is deleted 142 | console.log("DELETED", item); 143 | } 144 | 145 | function selectItem(item) { 146 | // Triggered whenever an item is selected 147 | console.log("SELECTED", item); 148 | } 149 | 150 | function createdItem(item) { 151 | // Triggered whenever an item is created 152 | console.log("CREATED", item); 153 | } 154 | 155 | function unselected() { 156 | // Triggered when an item is unselected 157 | // Pressing ESC will trigger unselect 158 | // Selecting an already selected item will trigger unselect 159 | console.log("BLUEPRINT IS NOW UNSELECTED"); 160 | } 161 | ``` 162 | 163 | - Template: 164 | 165 | ```html 166 | 258 | ``` 259 | 260 | ## Config details 261 | 262 | | Attribute | TS type | Default | Description | 263 | | --------------------- | ------------------------- | ------------ | ------------------------------------------------------------------- | 264 | | abscissaType | "alphabetic" OR "numeric" | "alphabetic" | Display abscissa coordinates as letters or numbers | 265 | | accordionMenuTitle | string | "Menu" | Text content of detail summary | 266 | | coordinatesBackground | string | "#2A2A2A" | Background color of the coordinates cells | 267 | | coordinatesColor | string | "#8A8A8A" | Text color of the coordinates cells | 268 | | crosshairBackground | string | "#4A4A4A" | Background color of the crosshair | 269 | | fontFamily | string | "Arial" | Font used for all elements in the component | 270 | | grid3dPosition | "top" OR "bottom" | "top" | Display 3d blueprint on top or below | 271 | | gridFill | string | "#3A3A3A" | Background color of unused blueprint cells | 272 | | gridHeight | number | 20 | The height of the blueprint in cell units | 273 | | gridHighlightColor | string | "#FFFFFF" | The contour of available cells on hover | 274 | | gridStroke | string | "#1A1A1A" | The color of grid lines | 275 | | gridWidth | number | 20 | The width of the blueprint in cell units | 276 | | handleFill | string | "#FFFFFF" | The color of resize handles | 277 | | handleSize | number | 0.3 | The handle size | 278 | | iconColor | string | "#1A1A1A" | The text color when using the #componentText slot | 279 | | inventoryTitle | string | "Inventory" | The text content of the inventory details summary element | 280 | | nonSelectedOpacity | number | 0.3 | The opacity of non selected components when a component is selected | 281 | | ordinatesType | "alphabetic" OR "numeric" | "numeric" | Display ordinate coordinates as letters or numbers | 282 | | showCrosshair | boolean | true | Show crosshair when hovering available cells | 283 | | showGrid3d | boolean | true | Show the 3d blueprint | 284 | | showInventory | boolean | true | Show inventory of placed components inside a details HTML element | 285 | | tooltipColor | string | "#FFFFFF" | The tooltip text color | 286 | | useAccordionMenu | boolean | true | Display the menu inside a details HTML element | 287 | | useGradient | boolean | true | Shows components with a subtle gradient | 288 | | useShadow | boolean | true | Show selected item with a drop shadow | 289 | 290 | ## CSS classes 291 | 292 | Grid Plan does not ship css. 293 | To customize the styling of the menu and inventory, target the following css classes: 294 | 295 | ```css 296 | .grid-plan-main { 297 | } 298 | .grid-plan-menu { 299 | } 300 | .grid-plan-menu__summary { 301 | } /* If useAccordionMenu is true */ 302 | .grid-plan-menu__body { 303 | } /* If useAccordionMenu is true */ 304 | .grid-plan-inventory { 305 | } 306 | .grid-plan-inventory__summary { 307 | } 308 | .grid-plan-inventory__body { 309 | } 310 | .grid-plan-grid { 311 | } 312 | .grid-plan-grid-3d { 313 | } 314 | .grid-plan-grid-3d-label { 315 | } 316 | ``` 317 | 318 | ## Icons 319 | 320 | A set of icons is provided by grid-plan. These icons are adapted from the great [Tabler icons](https://tablericons.com/) open source icon library. 321 | 322 | Icons are used in availableTypes: 323 | 324 | ```js 325 | const availableTypes = ref([ 326 | { 327 | color: '#6376DD', 328 | description: 'router', 329 | icon: 'router', 330 | typeId: 1, 331 | iconColor: '#FFFFFF' 332 | }, 333 | {...} 334 | ]) 335 | ``` 336 | 337 | | Icon name | 338 | | ------------------- | 339 | | airConditioning | 340 | | alertTriangle | 341 | | analyze | 342 | | archive | 343 | | armchair | 344 | | award | 345 | | bath | 346 | | battery | 347 | | bed | 348 | | bell | 349 | | bellSchool | 350 | | bolt | 351 | | boltOff | 352 | | books | 353 | | bulb | 354 | | bulfOff | 355 | | burger | 356 | | calculator | 357 | | camera | 358 | | cctv | 359 | | chefHat | 360 | | circleKey | 361 | | circuitCapacitor | 362 | | circuitCell | 363 | | circuitGround | 364 | | circuitSwitchClosed | 365 | | circuitSwitchOpen | 366 | | clock | 367 | | cloud | 368 | | cloudComputing | 369 | | coffee | 370 | | cpu | 371 | | cricuitLoop | 372 | | database | 373 | | deviceDesktop | 374 | | deviceDesktopOff | 375 | | deviceDualScreen | 376 | | deviceImac | 377 | | deviceImacOff | 378 | | deviceLaptop | 379 | | deviceLaptopOff | 380 | | deviceTablet | 381 | | deviceTabletOff | 382 | | deviceTv | 383 | | deviceTvOff | 384 | | deviceUsb | 385 | | devicesPc | 386 | | devicesPcOff | 387 | | disabled | 388 | | door | 389 | | doorEnter | 390 | | doorExit | 391 | | elevator | 392 | | elevatorOff | 393 | | escalator | 394 | | escalatorDown | 395 | | escalatorUp | 396 | | fingerprint | 397 | | firstAidKit | 398 | | folder | 399 | | folders | 400 | | headphones | 401 | | headset | 402 | | hexagon | 403 | | home | 404 | | key | 405 | | keyboard | 406 | | leaf | 407 | | lock | 408 | | lockAccess | 409 | | man | 410 | | microphone | 411 | | microscope | 412 | | network | 413 | | networkOff | 414 | | package | 415 | | packages | 416 | | paperclip | 417 | | phone | 418 | | plant | 419 | | plugConnected | 420 | | power | 421 | | printer | 422 | | printerOff | 423 | | prism | 424 | | propeller | 425 | | propellerOff | 426 | | reportAnalytics | 427 | | robot | 428 | | router | 429 | | salad | 430 | | server | 431 | | serverBolt | 432 | | serverCog | 433 | | serverOff | 434 | | shredder | 435 | | sofa | 436 | | solarPanel | 437 | | soup | 438 | | squareKey | 439 | | stack | 440 | | toilet | 441 | | toiletPaper | 442 | | toolsKitchen | 443 | | trafficCone | 444 | | trash | 445 | | trolley | 446 | | volume | 447 | | wall | 448 | | washMachine | 449 | | wave | 450 | | wifi | 451 | | windMill | 452 | | windmillOff | 453 | | window | 454 | | world | 455 | -------------------------------------------------------------------------------- /add-dev-dep.cjs: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | 3 | fs.readFile('package.json', 'utf8', (err, data) => { 4 | if (err) { 5 | console.error('Error reading package.json:', err); 6 | return; 7 | } 8 | let packageJson = JSON.parse(data); 9 | 10 | packageJson.devDependencies = { 11 | ...packageJson.devDependencies, 12 | "grid-plan": "file:../grid-plan" 13 | }; 14 | 15 | fs.writeFile('package.json', JSON.stringify(packageJson, null, 2), 'utf8', (err) => { 16 | if (err) { 17 | console.error('Error writing to package.json:', err); 18 | return; 19 | } 20 | console.log('-- DEV MODE : Local grid-plan package added successfully --'); 21 | }); 22 | }); -------------------------------------------------------------------------------- /cleanup.cjs: -------------------------------------------------------------------------------- 1 | const fs = require("fs"); 2 | const path = require("path"); 3 | 4 | const currentDir = path.dirname(require.main.filename); 5 | 6 | function deleteFolderRecursive(path) { 7 | if (fs.existsSync(path) && fs.lstatSync(path).isDirectory()) { 8 | fs.readdirSync(path).forEach(function (file, index) { 9 | let curPath = path + "/" + file; 10 | 11 | if (fs.lstatSync(curPath).isDirectory()) { // recurse 12 | deleteFolderRecursive(curPath); 13 | } else { // delete file 14 | fs.unlinkSync(curPath); 15 | } 16 | }); 17 | 18 | console.log(`Deleting directory "${path}"...`); 19 | fs.rmdirSync(path); 20 | } 21 | } 22 | 23 | deleteFolderRecursive(`${currentDir}\\node_modules\\grid-plan`); 24 | deleteFolderRecursive(`${currentDir}\\node_modules\\.vite`); 25 | deleteFolderRecursive('dist'); -------------------------------------------------------------------------------- /copy-types.cjs: -------------------------------------------------------------------------------- 1 | const fs = require("fs"); 2 | const path = require("path"); 3 | 4 | // Get the directory path of the current module 5 | const currentDir = path.dirname(require.main.filename); 6 | 7 | // Resolve the paths to the types and dist directories 8 | const typesDir = path.resolve(currentDir, "types"); 9 | const distDir = path.resolve(currentDir, "dist"); 10 | 11 | // Create dist directory if it doesn't exist 12 | if (!fs.existsSync(distDir)) { 13 | fs.mkdirSync(distDir); 14 | } 15 | 16 | // Resolve the path to the dist/types directory 17 | const distTypesDir = path.join(distDir, "types"); 18 | 19 | // Create dist/types directory if it doesn't exist 20 | if (!fs.existsSync(distTypesDir)) { 21 | fs.mkdirSync(distTypesDir); 22 | } 23 | 24 | // Copy .d.ts files from types directory to dist/types directory 25 | fs.readdirSync(typesDir).forEach((file) => { 26 | const srcFile = path.join(typesDir, file); 27 | const distFile = path.join(distTypesDir, file); 28 | 29 | fs.copyFileSync(srcFile, distFile); 30 | fs.copyFileSync(srcFile, distFile.replace(/\.d\.ts$/, ".d.cts")); 31 | }); 32 | 33 | console.log("Types copied successfully."); 34 | -------------------------------------------------------------------------------- /cypress.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'cypress' 2 | 3 | export default defineConfig({ 4 | e2e: { 5 | specPattern: 'cypress/e2e/**/*.{cy,spec}.{js,jsx,ts,tsx}', 6 | baseUrl: 'http://localhost:4173' 7 | } 8 | }) 9 | -------------------------------------------------------------------------------- /cypress/e2e/example.cy.js: -------------------------------------------------------------------------------- 1 | // https://on.cypress.io/api 2 | 3 | describe('My First Test', () => { 4 | it('visits the app root url', () => { 5 | cy.visit('/') 6 | cy.contains('h1', 'You did it!') 7 | }) 8 | }) 9 | -------------------------------------------------------------------------------- /cypress/e2e/jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["es5", "dom"], 5 | "types": ["cypress"] 6 | }, 7 | "include": ["./**/*", "../support/**/*"] 8 | } 9 | -------------------------------------------------------------------------------- /cypress/fixtures/example.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Using fixtures to represent data", 3 | "email": "hello@cypress.io", 4 | "body": "Fixtures are a great way to mock data for responses to routes" 5 | } 6 | -------------------------------------------------------------------------------- /cypress/support/commands.js: -------------------------------------------------------------------------------- 1 | // *********************************************** 2 | // This example commands.js shows you how to 3 | // create various custom commands and overwrite 4 | // existing commands. 5 | // 6 | // For more comprehensive examples of custom 7 | // commands please read more here: 8 | // https://on.cypress.io/custom-commands 9 | // *********************************************** 10 | // 11 | // 12 | // -- This is a parent command -- 13 | // Cypress.Commands.add('login', (email, password) => { ... }) 14 | // 15 | // 16 | // -- This is a child command -- 17 | // Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... }) 18 | // 19 | // 20 | // -- This is a dual command -- 21 | // Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... }) 22 | // 23 | // 24 | // -- This will overwrite an existing command -- 25 | // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... }) 26 | -------------------------------------------------------------------------------- /cypress/support/e2e.js: -------------------------------------------------------------------------------- 1 | // *********************************************************** 2 | // This example support/index.js is processed and 3 | // loaded automatically before your test files. 4 | // 5 | // This is a great place to put global configuration and 6 | // behavior that modifies Cypress. 7 | // 8 | // You can change the location of this file or turn off 9 | // automatically serving support files with the 10 | // 'supportFile' configuration option. 11 | // 12 | // You can read more here: 13 | // https://on.cypress.io/configuration 14 | // *********************************************************** 15 | 16 | // Import commands.js using ES2015 syntax: 17 | import './commands' 18 | 19 | // Alternatively you can use CommonJS syntax: 20 | // require('./commands') 21 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "paths": { 4 | "@/*": ["./src/*"] 5 | } 6 | }, 7 | "exclude": ["node_modules", "dist"] 8 | } 9 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "grid-plan", 3 | "version": "2.0.16", 4 | "private": false, 5 | "type": "module", 6 | "description": "A Vue3 dynamic 2d grid component ideal to view and arrange elements on a room, datacenter or rack blueprint.", 7 | "keywords": [ 8 | "grid", 9 | "vue", 10 | "2d grid", 11 | "3d", 12 | "plan", 13 | "blueprint", 14 | "room", 15 | "datacenter", 16 | "rack", 17 | "component" 18 | ], 19 | "author": "Alec Lloyd Probert", 20 | "repository": { 21 | "type": "git", 22 | "url": "git+https://github.com/graphieros/grid-plan.git" 23 | }, 24 | "homepage": "https://grid-plan.graphieros.com/", 25 | "license": "MIT", 26 | "files": [ 27 | "dist" 28 | ], 29 | "exports": { 30 | ".": { 31 | "import": { 32 | "types": "./dist/types/grid-plan.d.ts", 33 | "default": "./dist/grid-plan.js" 34 | }, 35 | "default": { 36 | "types": "./dist/types/grid-plan.d.cts", 37 | "default": "./dist/grid-plan.cjs" 38 | } 39 | } 40 | }, 41 | "main": "./dist/grid-plan.cjs", 42 | "module": "./dist/grid-plan.js", 43 | "types": "./dist/types/grid-plan.d.ts", 44 | "scripts": { 45 | "clean": "node cleanup.cjs", 46 | "dev": "node add-dev-dep.cjs && npm i && vite", 47 | "build": "npm run clean && vite build --mode production && node copy-types.cjs", 48 | "preview": "vite preview", 49 | "test": "vitest", 50 | "test:e2e": "start-server-and-test preview http://localhost:4173 'cypress run --e2e'", 51 | "test:e2e:dev": "start-server-and-test 'vite dev --port 4173' http://localhost:4173 'cypress open --e2e'" 52 | }, 53 | "devDependencies": { 54 | "@vitejs/plugin-vue": "^5.2.1", 55 | "@vue/test-utils": "^2.4.6", 56 | "cypress": "^13.12.0", 57 | "jsdom": "^24.1.0", 58 | "start-server-and-test": "^2.0.4", 59 | "vite": "^6.2.4", 60 | "vitest": "^3.0.5", 61 | "vue": "^3.5.13", 62 | "three": "^0.173.0", 63 | "grid-plan": "file:../grid-plan" 64 | }, 65 | "peerDependencies": { 66 | "vue": "^3.3.0" 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 142 | 143 | 256 | 257 | 285 | 286 | -------------------------------------------------------------------------------- /src/assets/base.css: -------------------------------------------------------------------------------- 1 | /* color palette from */ 2 | :root { 3 | --vt-c-white: #ffffff; 4 | --vt-c-white-soft: #f8f8f8; 5 | --vt-c-white-mute: #f2f2f2; 6 | 7 | --vt-c-black: #181818; 8 | --vt-c-black-soft: #222222; 9 | --vt-c-black-mute: #282828; 10 | 11 | --vt-c-indigo: #2c3e50; 12 | 13 | --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); 14 | --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); 15 | --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); 16 | --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); 17 | 18 | --vt-c-text-light-1: var(--vt-c-indigo); 19 | --vt-c-text-light-2: rgba(60, 60, 60, 0.66); 20 | --vt-c-text-dark-1: var(--vt-c-white); 21 | --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); 22 | } 23 | 24 | /* semantic color variables for this project */ 25 | :root { 26 | --color-background: var(--vt-c-white); 27 | --color-background-soft: var(--vt-c-white-soft); 28 | --color-background-mute: var(--vt-c-white-mute); 29 | 30 | --color-border: var(--vt-c-divider-light-2); 31 | --color-border-hover: var(--vt-c-divider-light-1); 32 | 33 | --color-heading: var(--vt-c-text-light-1); 34 | --color-text: var(--vt-c-text-light-1); 35 | 36 | --section-gap: 160px; 37 | } 38 | 39 | @media (prefers-color-scheme: dark) { 40 | :root { 41 | --color-background: var(--vt-c-black); 42 | --color-background-soft: var(--vt-c-black-soft); 43 | --color-background-mute: var(--vt-c-black-mute); 44 | 45 | --color-border: var(--vt-c-divider-dark-2); 46 | --color-border-hover: var(--vt-c-divider-dark-1); 47 | 48 | --color-heading: var(--vt-c-text-dark-1); 49 | --color-text: var(--vt-c-text-dark-2); 50 | } 51 | } 52 | 53 | *, 54 | *::before, 55 | *::after { 56 | box-sizing: border-box; 57 | margin: 0; 58 | font-weight: normal; 59 | } 60 | 61 | body { 62 | min-height: 100vh; 63 | color: var(--color-text); 64 | background: var(--color-background); 65 | transition: 66 | color 0.5s, 67 | background-color 0.5s; 68 | line-height: 1.6; 69 | font-family: 70 | Inter, 71 | -apple-system, 72 | BlinkMacSystemFont, 73 | 'Segoe UI', 74 | Roboto, 75 | Oxygen, 76 | Ubuntu, 77 | Cantarell, 78 | 'Fira Sans', 79 | 'Droid Sans', 80 | 'Helvetica Neue', 81 | sans-serif; 82 | font-size: 15px; 83 | text-rendering: optimizeLegibility; 84 | -webkit-font-smoothing: antialiased; 85 | -moz-osx-font-smoothing: grayscale; 86 | } 87 | -------------------------------------------------------------------------------- /src/assets/main.css: -------------------------------------------------------------------------------- 1 | @import './base.css'; 2 | 3 | #app { 4 | max-width: 1280px; 5 | margin: 0 auto; 6 | padding: 2rem; 7 | font-weight: normal; 8 | } -------------------------------------------------------------------------------- /src/components/Grid.vue: -------------------------------------------------------------------------------- 1 | 309 | 310 | -------------------------------------------------------------------------------- /src/components/Grid3d.vue: -------------------------------------------------------------------------------- 1 | 389 | 390 | 403 | -------------------------------------------------------------------------------- /src/components/GridPlan.vue: -------------------------------------------------------------------------------- 1 | 165 | 166 | -------------------------------------------------------------------------------- /src/components/__tests__/lib.test.js: -------------------------------------------------------------------------------- 1 | import { describe, test, expect } from 'vitest' 2 | import * as LIB from '../../lib'; 3 | 4 | const svg = ` 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | ` 13 | const parsed = LIB.parseSVG(svg); 14 | 15 | describe('parseSVG', () => { 16 | test('parses a svg icon', () => { 17 | expect(parsed).toStrictEqual([ 18 | { 19 | "d": "M0 0h24v24H0z", 20 | "fill": "none", 21 | "stroke": "none", 22 | }, 23 | { 24 | "d": "M4 10a2 2 0 1 0 4 0a2 2 0 0 0 -4 0", 25 | }, 26 | { 27 | "d": "M6 4v4", 28 | }, 29 | { 30 | "d": "M6 12v8", 31 | }, 32 | { 33 | "d": "M13.366 14.54a2 2 0 1 0 -.216 3.097", 34 | }, 35 | ]) 36 | }) 37 | }) 38 | 39 | describe('scaleSVGPath', () => { 40 | const scaled0 = parsed[0] 41 | const scaled1 = parsed[1] 42 | const scaled2 = parsed[2] 43 | const scaled3 = parsed[3] 44 | const scaled4 = parsed[4] 45 | test('resized and places svg on shifted coordinates', () => { 46 | expect(LIB.scaleSVGPath(scaled0.d, 24, {x: 0, y: 11})).toStrictEqual("M0 11h1v1H0z") 47 | expect(LIB.scaleSVGPath(scaled1.d, 24, {x: 2, y: 3})).toStrictEqual("M2.1666666666666665 3.4166666666666665a0.08333333333333333 0.08333333333333333 0 1 0 0.16666666666666666 0a0.08333333333333333 0.08333333333333333 0 0 0 -0.16666666666666666 0") 48 | expect(LIB.scaleSVGPath(scaled2.d, 24, {x: 5, y: 4})).toStrictEqual("M5.25 4.166666666666667v0.16666666666666666") 49 | expect(LIB.scaleSVGPath(scaled3.d, 24, {x: 5, y: 4})).toStrictEqual("M5.25 4.5v0.3333333333333333") 50 | expect(LIB.scaleSVGPath(scaled4.d, 24, {x: 5, y: 4})).toStrictEqual("M5.556916666666667 4.605833333333333a0.08333333333333333 0.08333333333333333 0 1 0 -0.009 0.12904166666666667") 51 | }) 52 | }) 53 | 54 | describe("convertColorToHex", () => { 55 | test("returns HEX color format from RGB", () => { 56 | expect(LIB.convertColorToHex("rgb(255,0,0)")).toBe("#ff0000ff"); 57 | expect(LIB.convertColorToHex("rgb(0,255,0)")).toBe("#00ff00ff"); 58 | expect(LIB.convertColorToHex("rgb(0,0,255)")).toBe("#0000ffff"); 59 | expect(LIB.convertColorToHex("rgb(0,0,0)")).toBe("#000000ff"); 60 | expect(LIB.convertColorToHex("rgb(255,255,255)")).toBe("#ffffffff"); 61 | }); 62 | 63 | test("returns HEX color format from HSL", () => { 64 | expect(LIB.convertColorToHex("hsl(0,100%,50%)")).toBe("#ff0000ff"); 65 | expect(LIB.convertColorToHex("hsl(120,100%,50%)")).toBe("#00ff00ff"); 66 | expect(LIB.convertColorToHex("hsl(240,100%,50%)")).toBe("#0000ffff"); 67 | expect(LIB.convertColorToHex("hsl(0,0%,0%)")).toBe("#000000ff"); 68 | expect(LIB.convertColorToHex("hsl(0,0%,100%)")).toBe("#ffffffff"); 69 | }); 70 | 71 | test("returns HEX color from an HSL passed through hslToRgba", () => { 72 | const rgb = LIB.hslToRgba(50, 50, 50); 73 | expect(LIB.convertColorToHex(`rgb(${rgb[0]},${rgb[1]},${rgb[2]})`)).toBe( 74 | "#bfaa40ff" 75 | ); 76 | }); 77 | 78 | test("returns HEX color from a name color", () => { 79 | expect(LIB.convertColorToHex("red")).toBe("#FF0000ff"); 80 | expect(LIB.convertColorToHex("RED")).toBe("#FF0000ff"); 81 | expect(LIB.convertColorToHex("Red")).toBe("#FF0000ff"); 82 | }); 83 | 84 | test("should convert rgba to hex with alpha channel", () => { 85 | const result = LIB.convertColorToHex("rgba(255,0,0,0.5)"); 86 | expect(result).toBe("#ff000080"); 87 | }); 88 | 89 | test("should convert hsla to hex with alpha channel", () => { 90 | const result = LIB.convertColorToHex("hsla(0, 100%, 50%, 0.5)"); 91 | expect(result).toBe("#ff000080"); 92 | }); 93 | }); 94 | 95 | describe("hslToRgba", () => { 96 | test("converts hsl to RGBA", () => { 97 | expect(LIB.hslToRgba(50, 50, 50)).toStrictEqual([191, 170, 64, 1]); 98 | }); 99 | test("converts hsla to RGBA", () => { 100 | expect(LIB.hslToRgba(50, 50, 50, 0.5)).toStrictEqual([191, 170, 64, 0.5]); 101 | }); 102 | }); 103 | 104 | describe("convertNameColorToHex", () => { 105 | test("returns a hex color from a standard html color name", () => { 106 | expect(LIB.convertNameColorToHex("red")).toBe("#FF0000"); 107 | expect(LIB.convertNameColorToHex("Red")).toBe("#FF0000"); 108 | expect(LIB.convertNameColorToHex("RED")).toBe("#FF0000"); 109 | expect(LIB.convertNameColorToHex("sandybrown")).toBe("#F4A460"); 110 | expect(LIB.convertNameColorToHex("SandyBrown")).toBe("#F4A460"); 111 | expect(LIB.convertNameColorToHex("SANDYBROWN")).toBe("#F4A460"); 112 | }); 113 | }); -------------------------------------------------------------------------------- /src/components/icons/IconCommunity.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /src/components/icons/IconDocumentation.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /src/components/icons/IconEcosystem.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /src/components/icons/IconSupport.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /src/components/icons/IconTooling.vue: -------------------------------------------------------------------------------- 1 | 2 | 20 | -------------------------------------------------------------------------------- /src/default_config.json: -------------------------------------------------------------------------------- 1 | { 2 | "abscissaType": "alphabetic", 3 | "accordionMenuTitle": "Menu", 4 | "coordinatesBackground": "#2A2A2A", 5 | "coordinatesColor": "#8A8A8A", 6 | "crosshairBackground": "#4A4A4A", 7 | "fontFamily": "Arial", 8 | "grid3dPosition": "top", 9 | "gridFill": "#3A3A3A", 10 | "gridHeight": 20, 11 | "gridHighlightColor": "#FFFFFF", 12 | "gridStroke": "#1A1A1A", 13 | "gridStrokeWidth": 0.02, 14 | "gridWidth": 20, 15 | "handleFill": "#FFFFFF", 16 | "handleSize": 0.3, 17 | "iconColor": "#1A1A1A", 18 | "inventoryTitle": "Inventory", 19 | "nonSelectedOpacity": 0.3, 20 | "ordinatesType": "numeric", 21 | "showCrosshair": true, 22 | "showGrid3d": true, 23 | "showInventory": true, 24 | "tooltipColor": "#FFFFFF", 25 | "useAccordionMenu": true, 26 | "useGradient": true, 27 | "useShadow": true 28 | } -------------------------------------------------------------------------------- /src/icons.js: -------------------------------------------------------------------------------- 1 | export const icons = { 2 | cloudComputing: ` 3 | 4 | 5 | 6 | 7 | `, 8 | server: ` 9 | 10 | 11 | 12 | 13 | 14 | 15 | `, 16 | serverCog: ` 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | `, 29 | serverBolt: ` 30 | 31 | 32 | 33 | 34 | 35 | `, 36 | serverOff: ` 37 | 38 | 39 | 40 | 41 | 42 | `, 43 | deviceDesktop: ` 44 | 45 | 46 | 47 | 48 | `, 49 | deviceDesktopOff: ` 50 | 51 | 52 | 53 | 54 | 55 | `, 56 | deviceImac: ` 57 | 58 | 59 | 60 | 61 | 62 | `, 63 | deviceImacOff: ` 64 | 65 | 66 | 67 | 68 | 69 | 70 | `, 71 | devicesPc: ` 72 | 73 | 74 | 75 | 76 | 77 | 78 | `, 79 | devicesPcOff: ` 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | `, 88 | deviceLaptop: ` 89 | 90 | 91 | `, 92 | deviceLaptopOff: ` 93 | 94 | 95 | 96 | `, 97 | deviceTv: ` 98 | 99 | 100 | `, 101 | deviceTvOff: ` 102 | 103 | 104 | 105 | `, 106 | deviceTablet: ` 107 | 108 | 109 | `, 110 | deviceTabletOff: ` 111 | 112 | 113 | 114 | `, 115 | deviceDualScreen: ` 116 | 117 | 118 | `, 119 | battery: ` 120 | 121 | 122 | 123 | 124 | 125 | `, 126 | bolt: ` 127 | 128 | `, 129 | boltOff: ` 130 | 131 | 132 | `, 133 | bulb: ` 134 | 135 | 136 | 137 | `, 138 | bulfOff: ` 139 | 140 | 141 | 142 | 143 | `, 144 | circuitCell: ` 145 | 146 | 147 | 148 | 149 | `, 150 | cricuitLoop: ` 151 | 152 | `, 153 | plugConnected: ` 154 | 155 | 156 | 157 | 158 | 159 | 160 | `, 161 | power: ` 162 | 163 | 164 | `, 165 | propeller: ` 166 | 167 | 168 | 169 | 170 | `, 171 | propellerOff: ` 172 | 173 | 174 | 175 | 176 | 177 | `, 178 | solarPanel: ` 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | `, 190 | windMill: ` 191 | 192 | 193 | 194 | 195 | `, 196 | windmillOff: ` 197 | 198 | 199 | 200 | 201 | 202 | `, 203 | circleKey: ` 204 | 205 | 206 | 207 | 208 | `, 209 | squareKey: ` 210 | 211 | 212 | 213 | 214 | `, 215 | doorEnter: ` 216 | 217 | 218 | 219 | 220 | `, 221 | doorExit: ` 222 | 223 | 224 | 225 | 226 | `, 227 | door: ` 228 | 229 | 230 | 231 | `, 232 | elevator: ` 233 | 234 | 235 | 236 | `, 237 | elevatorOff: ` 238 | 239 | 240 | 241 | 242 | `, 243 | disabled: ` 244 | 245 | 246 | 247 | 248 | `, 249 | armchair: ` 250 | 251 | 252 | 253 | 254 | `, 255 | sofa: ` 256 | 257 | 258 | 259 | `, 260 | bed: ` 261 | 262 | 263 | 264 | 265 | `, 266 | salad: ` 267 | 268 | 269 | 270 | 271 | 272 | `, 273 | toilet: ` 274 | 275 | 276 | 277 | `, 278 | toiletPaper: ` 279 | 280 | 281 | 282 | 283 | 284 | `, 285 | chefHat: ` 286 | 287 | 288 | `, 289 | leaf: ` 290 | 291 | 292 | `, 293 | lockAccess: ` 294 | 295 | 296 | 297 | 298 | 299 | 300 | `, 301 | soup: ` 302 | 303 | 304 | 305 | 306 | `, 307 | toolsKitchen: ` 308 | 309 | `, 310 | airConditioning: ` 311 | 312 | 313 | 314 | 315 | 316 | `, 317 | alertTriangle: ` 318 | 319 | 320 | 321 | `, 322 | analyze: ` 323 | 324 | 325 | 326 | 327 | 328 | `, 329 | archive: ` 330 | 331 | 332 | 333 | `, 334 | award: ` 335 | 336 | 337 | 338 | `, 339 | bath: ` 340 | 341 | 342 | 343 | 344 | `, 345 | bellSchool: ` 346 | 347 | 348 | 349 | 350 | 351 | `, 352 | bell: ` 353 | 354 | 355 | `, 356 | wall: ` 357 | 358 | 359 | 360 | 361 | 362 | 363 | 364 | 365 | 366 | `, 367 | books: ` 368 | 369 | 370 | 371 | 372 | 373 | 374 | 375 | `, 376 | burger: ` 377 | 378 | 379 | 380 | `, 381 | calculator: ` 382 | 383 | 384 | 385 | 386 | 387 | 388 | 389 | 390 | `, 391 | camera: ` 392 | 393 | 394 | `, 395 | circuitCapacitor: ` 396 | 397 | 398 | 399 | 400 | `, 401 | circuitGround: ` 402 | 403 | 404 | 405 | 406 | `, 407 | circuitSwitchClosed: ` 408 | 409 | 410 | 411 | 412 | 413 | `, 414 | circuitSwitchOpen: ` 415 | 416 | 417 | 418 | 419 | 420 | `, 421 | clock: ` 422 | 423 | 424 | 425 | `, 426 | cloud: ` 427 | 428 | `, 429 | coffee: ` 430 | 431 | 432 | 433 | 434 | 435 | `, 436 | cpu: ` 437 | 438 | 439 | 440 | 441 | 442 | 443 | 444 | 445 | 446 | 447 | `, 448 | database: ` 449 | 450 | 451 | 452 | `, 453 | cctv: ` 454 | 455 | 456 | 457 | 458 | `, 459 | deviceUsb: ` 460 | 461 | 462 | `, 463 | escalator: ` 464 | 465 | `, 466 | escalatorUp: ` 467 | 468 | 469 | 470 | `, 471 | escalatorDown: ` 472 | 473 | 474 | 475 | `, 476 | fingerprint: ` 477 | 478 | 479 | 480 | 481 | 482 | `, 483 | firstAidKit: ` 484 | 485 | 486 | 487 | 488 | `, 489 | folder: ` 490 | 491 | `, 492 | folders: ` 493 | 494 | 495 | `, 496 | headphones: ` 497 | 498 | 499 | 500 | `, 501 | headset: ` 502 | 503 | 504 | 505 | 506 | `, 507 | hexagon: ` 508 | 509 | `, 510 | home: ` 511 | 512 | 513 | 514 | `, 515 | key: ` 516 | 517 | 518 | `, 519 | keyboard: ` 520 | 521 | 522 | 523 | 524 | 525 | 526 | 527 | 528 | `, 529 | lock: ` 530 | 531 | 532 | 533 | `, 534 | man: ` 535 | 536 | 537 | 538 | 539 | 540 | 541 | `, 542 | microphone: ` 543 | 544 | 545 | 546 | 547 | `, 548 | microscope: ` 549 | 550 | 551 | 552 | 553 | 554 | 555 | 556 | `, 557 | network: ` 558 | 559 | 560 | 561 | 562 | 563 | 564 | 565 | 566 | `, 567 | networkOff: ` 568 | 569 | 570 | 571 | 572 | 573 | 574 | 575 | 576 | 577 | `, 578 | package: ` 579 | 580 | 581 | 582 | 583 | 584 | `, 585 | packages: ` 586 | 587 | 588 | 589 | 590 | 591 | 592 | 593 | 594 | 595 | `, 596 | paperclip: ` 597 | 598 | `, 599 | phone: ` 600 | 601 | `, 602 | plant: ` 603 | 604 | 605 | 606 | 607 | `, 608 | printer: ` 609 | 610 | 611 | 612 | `, 613 | printerOff: ` 614 | 615 | 616 | 617 | 618 | `, 619 | prism: ` 620 | 621 | 622 | 623 | 624 | `, 625 | reportAnalytics: ` 626 | 627 | 628 | 629 | 630 | 631 | `, 632 | robot: ` 633 | 634 | 635 | 636 | 637 | 638 | 639 | 640 | 641 | 642 | `, 643 | router: ` 644 | 645 | 646 | 647 | 648 | 649 | 650 | `, 651 | shredder: ` 652 | 653 | 654 | `, 655 | stack: ` 656 | 657 | 658 | 659 | `, 660 | trafficCone: ` 661 | 662 | 663 | 664 | 665 | `, 666 | trash: ` 667 | 668 | 669 | 670 | 671 | 672 | `, 673 | trolley: ` 674 | 675 | 676 | 677 | 678 | 679 | `, 680 | volume: ` 681 | 682 | 683 | 684 | `, 685 | washMachine: ` 686 | 687 | 688 | 689 | 690 | 691 | 692 | `, 693 | wave: ` 694 | 695 | `, 696 | wifi: ` 697 | 698 | 699 | 700 | 701 | `, 702 | window: ` 703 | 704 | 705 | 706 | `, 707 | world: ` 708 | 709 | 710 | 711 | 712 | 713 | ` 714 | } -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import GridPlan from "./components/GridPlan.vue"; 2 | 3 | export { GridPlan } -------------------------------------------------------------------------------- /src/lib/index.js: -------------------------------------------------------------------------------- 1 | export function createUid() { 2 | return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx' 3 | .replace(/[xy]/g, function (c) { 4 | const r = Math.random() * 16 | 0, 5 | v = c == 'x' ? r : (r & 0x3 | 0x8); 6 | return v.toString(16); 7 | }); 8 | } 9 | 10 | export function treeShake({ defaultConfig, userConfig }) { 11 | const finalConfig = { ...defaultConfig }; 12 | 13 | Object.keys(finalConfig).forEach(key => { 14 | if (Object.hasOwn(userConfig, key)) { 15 | const currentVal = userConfig[key] 16 | if (['boolean', 'function'].includes(typeof currentVal)) { 17 | finalConfig[key] = currentVal; 18 | } else if (["string", "number"].includes(typeof currentVal)) { 19 | if (isValidUserValue(currentVal)) { 20 | finalConfig[key] = currentVal; 21 | } 22 | } else if (Array.isArray(finalConfig[key])) { 23 | if (checkArray({ userConfig, key })) { 24 | finalConfig[key] = currentVal; 25 | } 26 | } else if (checkObj({ userConfig, key })) { 27 | finalConfig[key] = treeShake({ 28 | defaultConfig: finalConfig[key], 29 | userConfig: currentVal 30 | }); 31 | } 32 | } 33 | }); 34 | return finalConfig; 35 | } 36 | 37 | export function isValidUserValue(val) { 38 | return ![null, undefined, NaN, Infinity, -Infinity].includes(val); 39 | } 40 | 41 | export function isSafeValue(val) { 42 | return ![undefined, NaN, Infinity, -Infinity].includes(val) 43 | } 44 | 45 | export function checkArray({ userConfig, key }) { 46 | return Object.hasOwn(userConfig, key) && Array.isArray(userConfig[key]) && userConfig[key].length >= 0; 47 | } 48 | 49 | export function checkObj({ userConfig, key }) { 50 | return Object.hasOwn(userConfig, key) && !Array.isArray(userConfig[key]) && typeof userConfig[key] === "object"; 51 | } 52 | 53 | export function useNestedProp({ defaultConfig, userConfig }) { 54 | if (!Object.keys(userConfig || {}).length) { 55 | return defaultConfig; 56 | } 57 | return treeShake({ 58 | defaultConfig: defaultConfig, 59 | userConfig 60 | }); 61 | } 62 | 63 | export function scaleSVGPath(pathString, divisor, coordinates = { x: 10, y: 3 }) { 64 | if (divisor === 0) { 65 | throw new Error("Divisor cannot be zero."); 66 | } 67 | const commands = 'MmLlHhVvCcSsQqTtAaZz'; 68 | 69 | let parts = pathString.split(new RegExp(`([${commands}])`, 'g')).filter(Boolean); 70 | let currentCommand = ''; 71 | 72 | for (let i = 0; i < parts.length; i += 1) { 73 | let part = parts[i]; 74 | 75 | if (commands.includes(part)) { 76 | currentCommand = part; 77 | } else { 78 | // Split coordinate pairs by spaces or commas 79 | let coords = part.split(/[\s,]+/).map(Number); 80 | 81 | if (['H', 'h'].includes(currentCommand)) { 82 | // Scale x coordinate for H or h commands 83 | for (let j = 0; j < coords.length; j += 1) { 84 | coords[j] /= divisor; 85 | } 86 | } else if (['V', 'v'].includes(currentCommand)) { 87 | // Scale y coordinate for V or v commands 88 | for (let j = 0; j < coords.length; j += 1) { 89 | coords[j] /= divisor; 90 | } 91 | } else if (['A', 'a'].includes(currentCommand)) { 92 | // Scale radii (1st and 2nd) and the x and y coordinates (5th and 6th) 93 | for (let j = 0; j < coords.length; j += 1) { 94 | if (j % 7 === 0 || j % 7 === 1 || j % 7 === 5 || j % 7 === 6) { 95 | coords[j] /= divisor; 96 | } 97 | } 98 | } else { 99 | // Scale x and y coordinates for other commands 100 | for (let j = 0; j < coords.length; j += 1) { 101 | coords[j] /= divisor; 102 | } 103 | } 104 | parts[i] = coords.join(' '); 105 | } 106 | } 107 | // Apply coordinates param on first pair after M 108 | parts = parts.map((p, i) => { 109 | if (i === 1) { 110 | const n = p.split(' '); 111 | return `${Number(n[0]) + coordinates.x} ${Number(n[1]) + coordinates.y}` 112 | } 113 | return p 114 | }) 115 | 116 | return parts.join(''); 117 | } 118 | 119 | export function parseSVG(svgString) { 120 | const pathRegex = /]*)\/?>/g; 121 | let paths = []; 122 | let match; 123 | 124 | while ((match = pathRegex.exec(svgString)) !== null) { 125 | let attributesString = match[1].trim(); 126 | let pathObj = {}; 127 | let attributesRegex = /(\S+?)="([^"]*)"/g; 128 | let attrMatch; 129 | 130 | while ((attrMatch = attributesRegex.exec(attributesString)) !== null) { 131 | let key = attrMatch[1]; 132 | let value = attrMatch[2]; 133 | pathObj[key] = value; 134 | } 135 | 136 | paths.push(pathObj); 137 | } 138 | 139 | return paths; 140 | } 141 | 142 | export function convertNameColorToHex(colorName) { 143 | const colorMap = { 144 | ALICEBLUE: "#F0F8FF", 145 | ANTIQUEWHITE: "#FAEBD7", 146 | AQUA: "#00FFFF", 147 | AQUAMARINE: "#7FFFD4", 148 | AZURE: "#F0FFFF", 149 | BEIGE: "#F5F5DC", 150 | BISQUE: "#FFE4C4", 151 | BLACK: "#000000", 152 | BLANCHEDALMOND: "#FFEBCD", 153 | BLUE: "#0000FF", 154 | BLUEVIOLET: "#8A2BE2", 155 | BROWN: "#A52A2A", 156 | BURLYWOOD: "#DEB887", 157 | CADETBLUE: "#5F9EA0", 158 | CHARTREUSE: "#7FFF00", 159 | CHOCOLATE: "#D2691E", 160 | CORAL: "#FF7F50", 161 | CORNFLOWERBLUE: "#6495ED", 162 | CORNSILK: "#FFF8DC", 163 | CRIMSON: "#DC143C", 164 | CYAN: "#00FFFF", 165 | DARKBLUE: "#00008B", 166 | DARKCYAN: "#008B8B", 167 | DARKGOLDENROD: "#B8860B", 168 | DARKGREY: "#A9A9A9", 169 | DARKGREEN: "#006400", 170 | DARKKHAKI: "#BDB76B", 171 | DARKMAGENTA: "#8B008B", 172 | DARKOLIVEGREEN: "#556B2F", 173 | DARKORANGE: "#FF8C00", 174 | DARKORCHID: "#9932CC", 175 | DARKRED: "#8B0000", 176 | DARKSALMON: "#E9967A", 177 | DARKSEAGREEN: "#8FBC8F", 178 | DARKSLATEBLUE: "#483D8B", 179 | DARKSLATEGREY: "#2F4F4F", 180 | DARKTURQUOISE: "#00CED1", 181 | DARKVIOLET: "#9400D3", 182 | DEEPPINK: "#FF1493", 183 | DEEPSKYBLUE: "#00BFFF", 184 | DIMGRAY: "#696969", 185 | DODGERBLUE: "#1E90FF", 186 | FIREBRICK: "#B22222", 187 | FLORALWHITE: "#FFFAF0", 188 | FORESTGREEN: "#228B22", 189 | FUCHSIA: "#FF00FF", 190 | GAINSBORO: "#DCDCDC", 191 | GHOSTWHITE: "#F8F8FF", 192 | GOLD: "#FFD700", 193 | GOLDENROD: "#DAA520", 194 | GREY: "#808080", 195 | GREEN: "#008000", 196 | GREENYELLOW: "#ADFF2F", 197 | HONEYDEW: "#F0FFF0", 198 | HOTPINK: "#FF69B4", 199 | INDIANRED: "#CD5C5C", 200 | INDIGO: "#4B0082", 201 | IVORY: "#FFFFF0", 202 | KHAKI: "#F0E68C", 203 | LAVENDER: "#E6E6FA", 204 | LAVENDERBLUSH: "#FFF0F5", 205 | LAWNGREEN: "#7CFC00", 206 | LEMONCHIFFON: "#FFFACD", 207 | LIGHTBLUE: "#ADD8E6", 208 | LIGHTCORAL: "#F08080", 209 | LIGHTCYAN: "#E0FFFF", 210 | LIGHTGOLDENRODYELLOW: "#FAFAD2", 211 | LIGHTGREY: "#D3D3D3", 212 | LIGHTGREEN: "#90EE90", 213 | LIGHTPINK: "#FFB6C1", 214 | LIGHTSALMON: "#FFA07A", 215 | LIGHTSEAGREEN: "#20B2AA", 216 | LIGHTSKYBLUE: "#87CEFA", 217 | LIGHTSLATEGREY: "#778899", 218 | LIGHTSTEELBLUE: "#B0C4DE", 219 | LIGHTYELLOW: "#FFFFE0", 220 | LIME: "#00FF00", 221 | LIMEGREEN: "#32CD32", 222 | LINEN: "#FAF0E6", 223 | MAGENTA: "#FF00FF", 224 | MAROON: "#800000", 225 | MEDIUMAQUAMARINE: "#66CDAA", 226 | MEDIUMBLUE: "#0000CD", 227 | MEDIUMORCHID: "#BA55D3", 228 | MEDIUMPURPLE: "#9370D8", 229 | MEDIUMSEAGREEN: "#3CB371", 230 | MEDIUMSLATEBLUE: "#7B68EE", 231 | MEDIUMSPRINGGREEN: "#00FA9A", 232 | MEDIUMTURQUOISE: "#48D1CC", 233 | MEDIUMVIOLETRED: "#C71585", 234 | MIDNIGHTBLUE: "#191970", 235 | MINTCREAM: "#F5FFFA", 236 | MISTYROSE: "#FFE4E1", 237 | MOCCASIN: "#FFE4B5", 238 | NAVAJOWHITE: "#FFDEAD", 239 | NAVY: "#000080", 240 | OLDLACE: "#FDF5E6", 241 | OLIVE: "#808000", 242 | OLIVEDRAB: "#6B8E23", 243 | ORANGE: "#FFA500", 244 | ORANGERED: "#FF4500", 245 | ORCHID: "#DA70D6", 246 | PALEGOLDENROD: "#EEE8AA", 247 | PALEGREEN: "#98FB98", 248 | PALETURQUOISE: "#AFEEEE", 249 | PALEVIOLETRED: "#D87093", 250 | PAPAYAWHIP: "#FFEFD5", 251 | PEACHPUFF: "#FFDAB9", 252 | PERU: "#CD853F", 253 | PINK: "#FFC0CB", 254 | PLUM: "#DDA0DD", 255 | POWDERBLUE: "#B0E0E6", 256 | PURPLE: "#800080", 257 | RED: "#FF0000", 258 | ROSYBROWN: "#BC8F8F", 259 | ROYALBLUE: "#4169E1", 260 | SADDLEBROWN: "#8B4513", 261 | SALMON: "#FA8072", 262 | SANDYBROWN: "#F4A460", 263 | SEAGREEN: "#2E8B57", 264 | SEASHELL: "#FFF5EE", 265 | SIENNA: "#A0522D", 266 | SILVER: "#C0C0C0", 267 | SKYBLUE: "#87CEEB", 268 | SLATEBLUE: "#6A5ACD", 269 | SLATEGREY: "#708090", 270 | SNOW: "#FFFAFA", 271 | SPRINGGREEN: "#00FF7F", 272 | STEELBLUE: "#4682B4", 273 | TAN: "#D2B48C", 274 | TEAL: "#008080", 275 | THISTLE: "#D8BFD8", 276 | TOMATO: "#FF6347", 277 | TURQUOISE: "#40E0D0", 278 | VIOLET: "#EE82EE", 279 | WHEAT: "#F5DEB3", 280 | WHITE: "#FFFFFF", 281 | WHITESMOKE: "#F5F5F5", 282 | YELLOW: "#FFFF00", 283 | YELLOWGREEN: "#9ACD32", 284 | REBECCAPURPLE: "#663399" 285 | }; 286 | return colorMap[colorName.toUpperCase()] || colorName; 287 | } 288 | 289 | export function decimalToHex(decimal) { 290 | const hex = Number(decimal).toString(16); 291 | return hex.length === 1 ? "0" + hex : hex; 292 | } 293 | 294 | export function hslToRgba(h, s, l, alpha = 1) { 295 | h /= 360; 296 | s /= 100; 297 | l /= 100; 298 | 299 | let r, g, b; 300 | 301 | if (s === 0) { 302 | r = g = b = l; // Achromatic (gray) 303 | } else { 304 | const hueToRgb = (p, q, t) => { 305 | if (t < 0) t += 1; 306 | if (t > 1) t -= 1; 307 | if (t < 1 / 6) return p + (q - p) * 6 * t; 308 | if (t < 1 / 2) return q; 309 | if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6; 310 | return p; 311 | }; 312 | 313 | const q = l < 0.5 ? l * (1 + s) : l + s - l * s; 314 | const p = 2 * l - q; 315 | r = hueToRgb(p, q, h + 1 / 3); 316 | g = hueToRgb(p, q, h); 317 | b = hueToRgb(p, q, h - 1 / 3); 318 | } 319 | 320 | return [ 321 | Math.round(r * 255), 322 | Math.round(g * 255), 323 | Math.round(b * 255), 324 | alpha, 325 | ]; 326 | } 327 | 328 | export function convertColorToHex(color) { 329 | const hexRegex = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i; 330 | const rgbRegex = /^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)$/i; 331 | const hslRegex = /^hsla?\((\d+),\s*([\d.]+)%,\s*([\d.]+)%(?:,\s*([\d.]+))?\)$/i; 332 | 333 | if ([undefined, null, NaN].includes(color)) { 334 | return null; 335 | } 336 | 337 | color = convertNameColorToHex(color); 338 | 339 | if (color === 'transparent') { 340 | return "#FFFFFF00"; 341 | } 342 | 343 | let match; 344 | let alpha = 1; 345 | 346 | if ((match = color.match(hexRegex))) { 347 | const [, r, g, b, a] = match; 348 | alpha = a ? parseInt(a, 16) / 255 : 1; 349 | return `#${r}${g}${b}${decimalToHex(Math.round(alpha * 255))}`; 350 | } else if ((match = color.match(rgbRegex))) { 351 | const [, r, g, b, a] = match; 352 | alpha = a ? parseFloat(a) : 1; 353 | return `#${decimalToHex(r)}${decimalToHex(g)}${decimalToHex(b)}${decimalToHex(Math.round(alpha * 255))}`; 354 | } else if ((match = color.match(hslRegex))) { 355 | const [, h, s, l, a] = match; 356 | alpha = a ? parseFloat(a) : 1; 357 | const rgb = hslToRgba(Number(h), Number(s), Number(l)); 358 | return `#${decimalToHex(rgb[0])}${decimalToHex(rgb[1])}${decimalToHex(rgb[2])}${decimalToHex(Math.round(alpha * 255))}`; 359 | } 360 | 361 | return null; 362 | } 363 | 364 | 365 | const lib = { 366 | createUid, 367 | treeShake, 368 | useNestedProp, 369 | parseSVG, 370 | scaleSVGPath 371 | } 372 | 373 | export default lib; -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import './assets/main.css' 2 | 3 | import { createApp } from 'vue' 4 | import App from './App.vue' 5 | import { GridPlan } from 'grid-plan' 6 | 7 | const app = createApp(App) 8 | app.component("GridPlan", GridPlan); 9 | app.mount('#app') -------------------------------------------------------------------------------- /types/grid-plan.d.ts: -------------------------------------------------------------------------------- 1 | declare module "grid-plan" { 2 | import { DefineComponent } from "vue"; 3 | 4 | export const GridPlan: DefineComponent<{ 5 | placedItems: GridPlanItem[], 6 | availableTypes: GridPlanItemType[], 7 | readonly?: boolean, 8 | config?: GridPlanConfig 9 | }> 10 | 11 | export type Coordinates = { 12 | x: number 13 | y: number 14 | } 15 | 16 | export type ItemSize = { 17 | h: number 18 | w: number 19 | } 20 | 21 | export type GridPlanItemType = { 22 | color?: string 23 | description: string 24 | icon?: string 25 | iconColor?: string 26 | typeId: string | number 27 | } 28 | 29 | export type GridPlanItem = 30 | Coordinates & 31 | ItemSize & 32 | { 33 | color?: string 34 | description?: string 35 | icon?: string 36 | typeId: number | string 37 | id?: string | number 38 | iconColor?: string; 39 | } 40 | 41 | export type GridPlanConfig = { 42 | abscissaType?: "alphabetic" | "numeric" 43 | accordionMenuTitle?: string 44 | coordinatesBackground?: string 45 | coordinatesColor?: string 46 | crosshairBackground?: string 47 | fontFamily?: string 48 | grid3dPosition?: "top" | "bottom" 49 | gridFill?: string 50 | gridHeight?: number 51 | gridHighlightColor?: string 52 | gridStroke?: string 53 | gridStrokeWidth?: number 54 | gridWidth?: number 55 | handleFill?: string 56 | handleSize?: number 57 | iconColor?: string 58 | inventoryTitle?: string 59 | nonSelectedOpacity?: number 60 | ordinatesType?: "alphabetic" | "numeric" 61 | showCrosshair?: boolean 62 | showGrid3d?: boolean 63 | showInventory?: boolean 64 | tooltipColor?: string 65 | useAccorionMenu?: boolean 66 | useGradient?: boolean 67 | useShadow?: boolean 68 | } 69 | } 70 | 71 | /** 72 | * Grid Plan utility 73 | * --- 74 | * Delete an entity 75 | * --- 76 | * 1. Usage in #inventory slot: 77 | * 78 | * @example 79 | * ```vue 80 | * 94 | * ``` 95 | * 96 | * 2. Usage in #before and #after slots: 97 | * 98 | * @example 99 | * ```vue 100 | * 111 | * ``` 112 | * 113 | * @param {Object} item - GridPlanItem 114 | */ 115 | export const deleteItem: (item: GridPlanItem) => void 116 | 117 | 118 | /** 119 | * Grid Plan utility 120 | * --- 121 | * Toggle focus on an entity. 122 | * --- 123 | * @param {Object} item - GridPlanItem 124 | */ 125 | export const focusItem: (item: GridPlanItem) => void 126 | 127 | /** 128 | * Grid Plan utility 129 | * --- 130 | * Returns the focus state of an entity: true if the entity is currently focused. 131 | * --- 132 | * @param {Object} item - GridPlanItem 133 | */ 134 | export const getFocusState: (item: GridPlanItem) => boolean -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import { resolve } from "path"; 3 | import vue from "@vitejs/plugin-vue"; 4 | 5 | 6 | // https://vitejs.dev/config/ 7 | export default defineConfig({ 8 | plugins: [ 9 | vue(), 10 | ], 11 | build: { 12 | lib: { 13 | // src/indext.ts is where we have exported the component(s) 14 | entry: resolve(__dirname, "src/index.js"), 15 | name: "VueDataUi", 16 | // the name of the output files when the build is run 17 | fileName: "grid-plan", 18 | formats: ['es'] 19 | }, 20 | rollupOptions: { 21 | // make sure to externalize deps that shouldn't be bundled 22 | // into your library 23 | external: ["vue", "grid-plan"], 24 | output: { 25 | // Provide global variables to use in the UMD build 26 | // for externalized deps 27 | globals: { 28 | vue: "Vue", 29 | }, 30 | }, 31 | }, 32 | types: [ 33 | { 34 | declarationDir: "dist/types", 35 | root: resolve(__dirname, "types"), 36 | entry: "grid-plan.d.ts", 37 | }, 38 | ], 39 | }, 40 | }); -------------------------------------------------------------------------------- /vitest.config.js: -------------------------------------------------------------------------------- 1 | import { fileURLToPath } from 'node:url' 2 | import { mergeConfig, defineConfig, configDefaults } from 'vitest/config' 3 | import viteConfig from './vite.config' 4 | 5 | export default mergeConfig( 6 | viteConfig, 7 | defineConfig({ 8 | test: { 9 | environment: 'jsdom', 10 | exclude: [...configDefaults.exclude, 'e2e/**'], 11 | root: fileURLToPath(new URL('./', import.meta.url)) 12 | } 13 | }) 14 | ) 15 | --------------------------------------------------------------------------------