npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

grid-plan

v1.1.3

Published

A Vue3 dynamic 2d grid component ideal to view and arrange elements on a room, datacenter or rack blueprint.

Downloads

101

Readme

grid-plan

npm npm GitHub issues

grid-plan is a Vue3 component to create blueprints for rooms, datacenters, racks, etc.

Create available component types, and place, resize or delete them from the blueprint.

grid-plan ships with:

  • config options to customize the looks of your blueprint
  • slots to customize icons related to component types
  • slots to create your available components menu and your inventory

Installation

npm i grid-plan

You can declare the component globally in your main.js:

import { createApp } from "vue";
import App from "./App.vue";

import { GridPlan } from "grid-plan";

const app = createApp(App);

app.component("GridPlan", GridPlan);
app.mount("#app");

Or you can import it directly in your Vue file:

<script setup>
  import { GridPlan } from "grid-plan";
</script>

Props

| Prop name | TS type | Required | Description | | -------------- | ------------------ | ----------------------------------- | ----------------------------------------------------------- | | availableTypes | GridPlanItemType[] | YES | The types of components that can be placed on the blueprint | | placedItems | GridPlanItem[] | YES (can be empty) | Components already placed on the blueprint | | radonly | boolean | NO (default: false) | Blueprint will be readonly if true | | config | GridPlanConfig | NO (default config will be applied) | Configuration object to customize looks |

Example

  • Script:
import { ref } from "vue";
import { GridPlan } from "grid-plan";

const availableTypes = ref([
  {
    typeId: 1,
    color: "#3366DD",
    description: "server",
    icon: "server",
    iconColor: "#FFFFFF",
  },
  {
    typeId: 2,
    color: "#DD6633",
    description: "power",
    icon: "bolt",
    iconColor: "#FFFFFF",
  },
  {
    typeId: 3,
    color: "#71a4a8",
    description: "monitor",
    icon: "deviceLaptop",
    iconColor: "#1A1A1A",
  },
]);

const placedItems = ref([
  { x: 0, y: 0, h: 1, w: 12, typeId: 1 }, // it's a server component
  { x: 0, y: 1, h: 4, w: 12, typeId: 3 }, // it's a monitor component
]);

// Config is optional
// You can provide a partial config, as missing attributes will use defaults
const config = ref({
  abscissaType: "alphabetic",
  accordionMenuTitle: "Menu",
  coordinatesBackground: "#2A2A2A",
  coordinatesColor: "#8A8A8A",
  crosshairBackground: "#4A4A4A",
  fontFamily: "Arial",
  gridFill: "#3A3A3A",
  gridHeight: 42,
  gridHighlightColor: "#00FF00",
  gridStroke: "#1A1A1A",
  gridStrokeWidth: 0.02,
  gridWidth: 12,
  handleFill: "#FFFFFF",
  handleSize: 0.3,
  iconColor: "#1A1A1A",
  nonSelectedOpacity: 0.3
  ordinatesType: "numeric",
  showCrosshair: true,
  tooltipColor: "#FFFFFF",
  useAccordionMenu: true,
  useGradient: true,
  useShadow: true,
});

// Events

function selectType(menuItem) {
  // Triggered when a menu item is selected
  console.log("SELECT TYPE", menuItem);
}

function change(item) {
  // Triggered whenever an item is changed
  console.log("CHANGED", item);
}

function deleteItem(item) {
  // Triggered whenever an item is deleted
  console.log("DELETED", item);
}

function selectItem(item) {
  // Triggered whenever an item is selected
  console.log("SELECTED", item);
}

function createdItem(item) {
  // Triggered whenever an item is created
  console.log("CREATED", item);
}

function unselected() {
  // Triggered when an item is unselected
  // Pressing ESC will treigger unselect
  // Selecting an already selected item will trigger unselect
  console.log("BLUEPRINT IS NOW UNSELECTED");
}
  • Template:
<template>
  <GridPlan
    :availableTypes="availableTypes"
    ref="plan"
    :config="config"
    :placedItems="placedItems"
    @change="change"
    @delete="deleteItem"
    @select="selectItem"
    @created="createdItem"
    @unselect="unselected"
    @selectType="selectType"
  >
    <!-- Create your available types menu -->
    <template #availableType="{ availableType }">
      <!-- The click event is managed by the component, that will select the type to be used when adding a component to the blueprint -->
      <button>{{ availableType.description }}</button>
    </template>

    <!-- Create your inventory, which will be displayed inside a details element (target the .grid-plan-inventory css class to style) -->
    <template #inventory="{ item, deleteItem, focusItem, isFocused }">
      <div
        :style="`display: flex; flex-direction:row; flex-wrap: wrap; border: 1px solid ${item.color};width: fit-content; padding: 6px 12px; gap:6px; ${isFocused ? 'background: #FFFFFF20' : ''}`"
      >
        <span>{{ item.description }}</span>
        <span>x:{{ item.x }}</span>
        <span>y:{{ item.y }}</span>
        <span>h:{{ item.h }}</span>
        <span>w:{{ item.w }}</span>
        <button @click="deleteItem">DELETE</button>
        <button @click="focusItem">
          {{ isFocused ? 'UNFOCUS' : 'FOCUS' }}
        </button>
      </div>
    </template>

    <!-- Use your own svg icons for component types (not necessary if the icon provided is part of the available icons) -->
    <template #componentIcon="{ placedItem, maxSize }">
      <svg
        v-if="placedItem.description === 'server'"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="#FFFFFF"
        fill="none"
        stroke-linecap="round"
        stroke-linejoin="round"
        :style="`width:${maxSize}px; position: absolute; transform: scale(0.8, 0.8)`"
      >
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path
          d="M3 4m0 3a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v2a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3z"
        />
        <path
          d="M3 12m0 3a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v2a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3z"
        />
        <path d="M7 8l0 .01" />
        <path d="M7 16l0 .01" />
        <path d="M11 8h6" />
        <path d="M11 16h6" />
      </svg>
    </template>

    <!-- Or use this slot to display a single letter or an icon font -->
    <template #componentText="{ placedItem }"> {{ placedItem.icon }} </template>
  </GridPlan>
</template>

Config details

| Attribute | TS type | Default | Description | | --------------------- | ------------------------- | ------------ | ------------------------------------------------------------------- | | abscissaType | "alphabetic" OR "numeric" | "alphabetic" | Display abscissa coordinates as letters or numbers | | accordionMenuTitle | string | "Menu" | Text content of detail summary | | coordinatesBackground | string | "#2A2A2A" | Background color of the coordinates cells | | coordinatesColor | string | "#8A8A8A" | Text color of the coordinates cells | | crosshairBackground | string | "#4A4A4A" | Background color of the crosshair | | fontFamily | string | "Arial" | Font used for all elements in the component | | gridFill | string | "#3A3A3A" | Background color of unused blueprint cells | | gridHeight | number | 20 | The height of the blueprint in cell units | | gridHighlightColor | string | "#FFFFFF" | The contour of available cells on hover | | gridStroke | string | "#1A1A1A" | The color of grid lines | | gridWidth | number | 20 | The width of the blueprint in cell units | | handleFill | string | "#FFFFFF" | The color of resize handles | | handleSize | number | 0.3 | The handle size | | iconColor | string | "#1A1A1A" | The text color when using the #componentText slot | | inventoryTitle | string | "Inventory" | The text content of the inventory details summary element | | nonSelectedOpacity | number | 0.3 | The opacity of non selected components when a component is selected | | ordinatesType | "alphabetic" OR "numeric" | "numeric" | Display ordinate coordinates as letters or numbers | | showCrosshair | boolean | true | Show crosshair when hovering available cells | | showInventory | boolean | true | Show inventory of placed components inside a details HTML element | | tooltipColor | string | "#FFFFFF" | The tooltip text color | | useAccordionMenu | boolean | true | Display the menu inside a details HTML element | | useGradient | boolean | true | Shows components with a subtle gradient | | useShadow | boolean | true | Show selected item with a drop shadow |

CSS classes

Grid Plan does not ship css. To customize the styling of the menu and inventory, target the following css classes:

.grid-plan-menu {
}
.grid-plan-menu__summary {
} /* If useAccordionMenu is true */
.grid-plan-menu__body {
} /* If useAccordionMenu is true */
.grid-plan-inventory {
}
.grid-plan-inventory__summary {
}
.grid-plan-inventory__body {
}

Icons

A set of icons is provided by grid-plan. These icons are adapted from the great Tabler icons open source icon library.

Icons are used in availableTypes:

const availableTypes = ref([
  {
    color: '#6376DD',
    description: 'router',
    icon: 'router',
    typeId: 1,
    iconColor: '#FFFFFF'
  },
  {...}
])

| Icon name | | ------------------- | | airConditioning | | alertTriangle | | analyze | | archive | | armchair | | award | | bath | | battery | | bed | | bell | | bellSchool | | bolt | | boltOff | | books | | bulb | | bulfOff | | burger | | calculator | | camera | | cctv | | chefHat | | circleKey | | circuitCapacitor | | circuitCell | | circuitGround | | circuitSwitchClosed | | circuitSwitchOpen | | clock | | cloud | | cloudComputing | | coffee | | cpu | | cricuitLoop | | database | | deviceDesktop | | deviceDesktopOff | | deviceDualScreen | | deviceImac | | deviceImacOff | | deviceLaptop | | deviceLaptopOff | | deviceTablet | | deviceTabletOff | | deviceTv | | deviceTvOff | | deviceUsb | | devicesPc | | devicesPcOff | | disabled | | door | | doorEnter | | doorExit | | elevator | | elevatorOff | | escalator | | escalatorDown | | escalatorUp | | fingerprint | | firstAidKit | | folder | | folders | | headphones | | headset | | hexagon | | home | | key | | keyboard | | leaf | | lock | | lockAccess | | man | | microphone | | microscope | | network | | networkOff | | package | | packages | | paperclip | | phone | | plant | | plugConnected | | power | | printer | | printerOff | | prism | | propeller | | propellerOff | | reportAnalytics | | robot | | router | | salad | | server | | serverBolt | | serverCog | | serverOff | | shredder | | sofa | | solarPanel | | soup | | squareKey | | stack | | toilet | | toiletPaper | | toolsKitchen | | trafficCone | | trash | | trolley | | volume | | wall | | washMachine | | wave | | wifi | | windMill | | windmillOff | | window | | world |