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

@digithia/input

v0.14.2

Published

Digithia input package.

Downloads

26

Readme

Digithia Input

This library provides ready to use input fields. It use lit-element to create native web components.

Disclaimer : this library is not ready for production yet. Breaking changes are expected and some components may not works as expected.

pipeline status coverage report

Install

With NPM

If your project is setuped with npm, you just have to run this command :

npm install @digithia/input

On simple HTML

If you want to import directly into an HTML file :

<!-- index.html -->
<html>
  ...
  <body>
    ...
    <script src="https://unpkg.com/@digithia/input" defer></script>
  </body>
</html>

Use

In order to import this lib, you have to copy this in your project :

// index.js
import '@digithia/input' // Imports all components

The above line import all components to your project, but some components are pretty heavy. So you could use the following syntax to only import needed components :

// index.js
import '@digithia/input/text' // Imports only dig-input-text component
import '@digithia/input/select' // Imports only dig-input-select-picker and dig-input-select-picker-option components
...

Once imported, you could simply use them in your template like native html :

<!-- index.html -->
<body>
  ...
  <dig-input-text value="my value">My label</dig-input-text>
  ...
</body>

Typescript

This lib is written entierly in Typescript so you can retrieve its types.

import { DigInputText, DigInputRadio } from '@digithia/input'
// Or
import { DigInputText } from '@digithia/input/text'
import { DigInputRadio } from '@digithia/input/radio'

const inputText = document.querySelector('dig-input-text') as DigInputText
inputText.hint = 'My text hint'
const inputRadio = document.querySelector('dig-input-radio') as DigInputRadio
inputRadio.value = 'My radio value'

Behaviors

You might want to enable some build in functionalities. You can enable them simply with an attribute :

<dig-input-text value="my value" hint="My hint">My label</dig-input-text>

will show an hint below text field.

Same in a js file :

const input = document.querySelector('dig-input-text')
input.hint = 'My hint'

Some attribute are interactive. Whenever you type into this field, the value attribute will reflects changes.

This text field will be filled with "another value" but everytime you type in the field, value attribute will reflect your changes.

<dig-input-text value="another value">My label</dig-input-text>

You can also listen to the events sent by the input field like this :

const input = document.querySelector('dig-input-text')
input.addEventListener('blur', (event) => {
  alert('You leave the field with the value : ', event.target.value)
})

With a framework like Vue, you could use event binding like so :

<dig-input-text value="another value" @blur="myFunction">My label</dig-input-text>

Styles

Each component uses css variables to handle its own style. You can override them to style your components :

dig-input-text {
  --dig-input-text-font-size: 22px;
  --dig-input-text-border-color: orange;
  ...
}

By modifing css variables, the complete design should be preserved, thanks to css calculations. In this example, changing input font size will also adapt input height, thus the text will not overflow.

More

For further information, go to the git page and look at doc/ folder or e2e/ tests.