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

@pierodetomi/v-box-model-editor

v1.0.7

Published

A Vue 3 component for editing the box model of a DOM element

Downloads

61

Readme

Vue Box Model Editor

npm package version build

Box Model Editor is a Vue component that allows the editing of the box model of a DOM element. This is totally inspired to the Chrome Dev Tools component.

UI Screenshot

[!IMPORTANT]

FEATURE DISCLAIMER

This component does NOT actually manipulate the DOM in any way: its purpose it to receive input models describing the actual box model of an element, allowing the editing of this model and returning the manipulated model as output.

The typical intended use case for this component is inside an editor (or similar kind of product).

Installation

You can install the package in your project with the following command:

npm install @pierodetomi/v-box-model-editor

Usage

This library exports the BoxModelEditor component. You can use it as follows:

// INSIDE YOUR CODE
import { BoxModel, SizeModel, BorderModel, BoxModelEditorOptions, BoxModelEditor } from '@pierodetomi/v-box-model-editor'; // Import component
import '@pierodetomi/v-box-model-editor/style.css'; // Import component's style

[...]

margin = new BoxModel();
border = new BorderModel();
padding = new BoxModel();
size = new SizeModel();
options = new BoxModelEditorOptions();
options.availableUnits = [ /* you can override the default available units */ ]
options.style.[style_property] = ... // Replace [style_property] with one of the available options: see below
<!-- INSIDE YOUR TEMPLATE -->
<BoxModelEditor :options="options"
                :margin="margin"
                :border="border"
                :padding="padding"
                :size="size"
                @update:margin="value => margin = value"
                @update:border="value => border = value"
                @update:padding="value => padding = value"
                @update:size="value => size = value" />

Available options

The options property expects an instance of the BoxEditorModelOptions class. This class exposes the following options:

| Option | Type | Default Value | Description | | --- | --- | --- | --- | | availableUnits | string[] | ['px', 'em', 'rem', 'vw', 'vh', '%'] | The units that are available when the user opens the units dropdown | | style | BoxModelEditorStyleOptions | new BoxModelEditorStyleOptions() | The style options that can be used to personalize the appearance of the component |

The BoxModelEditorStyleOptions class exposes the following options:

| Option | Type | Default Value | Description | | --- | --- | --- | --- | | bordersColor | string | '#000' | The color of the borders of the visual containers | | marginBackgroundColor | string | '#f9cc9d' | The background color of the margin model container | | borderBackgroundColor | string | '#ffeebc' | The background color of the border model container | | paddingBackgroundColor | string | '#c4dfb8' | The background color of the padding model container | | sizeBackgroundColor | string | '#a0c6e8' | The background color of the size model container | | textColor | string | '#252525' | The color of the text (labels & numbers) | | inputFontSize | number | 11 | The font size of the inputs & values displayed | | unitDropdownBackgroundColor | string | '#f9f9f9' | The background color of the units dropdown | | unitDropdownTextColor | string | '#252525' | The text color of the units dropdown | | unitDropdownHoverBackgroundColor | string | '#d1d1d1' | The background color of an item of the units dropdown, when hovered | | unitDropdownHoverTextColor | string | '#252525' | The text color of an item of the units dropdown, when hovered | | unitDropdownFontSize | number | 12 | The font size of the text inside the units dropdown |

box, border and size models

The margin and padding properties use the same input/output model, the BoxModel, with the following structure:

class BoxModel {
  public isLinked: boolean = true;

  public top: number = null;

  public topUnit: string = 'px';
  
  public right: number = null;
  
  public rightUnit: string = 'px';

  public bottom: number = null;
  
  public bottomUnit: string = 'px';

  public left: number = null;

  public leftUnit: string = 'px';
}

The border property uses the BorderModel input/output model, that's an extension of the BoxModel model that adds only the style property (with default value 'solid'):

class BorderModel extends BoxModel {
  public style: string = 'solid';
}

The size property uses the SizeModel input/output model, with the following structure:

class SizeModel {
  public width: number = null;
  
  public widthUnit: string = 'px';
  
  public height: number = null;

  public heightUnit: string = 'px';
}