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

v-input-sevenseg

v1.0.3

Published

A vue numeric input using a seven segment display inspired by Sevenseg.js from https://github.com/BrandonLWhite/sevenSeg.js

Downloads

15

Readme

vue-input-sevenseg

Vue input numeric input component that uses a a Seven Segment Display

Compile UMD javascript library that can be included on a web page

yarn build-lib

Compile example vue app that uses the component

yarn serve

Project setup (have not checked if this works)

npm install --save vue-input-sevenseg

Usage

Use up/down arrow keys to increment value by step size
Use shift-up arrow or shift-down arrow to multiply or divide step size by 10
Use mouse wheel to increment value
Look in the files ex1.html, ex2.html or ex_ff.html for firefox for examples.\

Example of parameters for component:

<v-input-sevenseg v-model="variable" color-back="transparent" color-on="green" color-off="rgb(255, 240, 255)" height=80 digits=7 slant=10 buttons=false></v-input-sevenseg>

v-model

  • variable name, seems like it can actually be a number as well
  • Use this parameter to bind it to a javascript variable

color-on

  • String. Default is Red.
  • Color when a segment is on

color-off

  • String. Default is rgb(50, 0, 0)
  • Color when a segment is off

color-back

  • String. Default is Black
  • Color for the box/background of the display

height

  • Number. Default is 100
  • Height in pixels of a box the includes the display.

width

  • Number. Default is 400
  • Width in pixels of a box the includes the display.

digits

  • Number. Default is 4
  • Number of digits in the display

precision

  • Number. Default is undefined
  • Number of digits of precision, positive number after decimal point, negative before decimal point

step

  • Number. Default 1
  • Step size to increment/decrement using arrow keys or mouse wheel

slant

  • Number. Default is 0
  • Degrees slant of the digits in the display

buttons

  • Boolean / String. Default is true
  • Add buttons to the widget to use mouse clicks to increment / decrement the value, hold the nouse button to automatically continue to increase / decrease the number

Things to do:

  • Add ctrl-a, ctrl-e, cut, paste support
  • Add double click support to highlight entire number
  • Add mouse selection capability to number input

Caveat

This is my second vue project. Any suggestions to improve the code is welcome.

Based on code and instructions from