open-index/open-npm huggingface dataset:
npm package: @nib/control
Description: A form control. Validate user input, display an error message and save data to the model.
Latest version: 2.4.0

# control

A form control. Validate user input, display an error message and save data to the model.

## Example

The HTML:

    <div class="js-name-control">
        <label>
            Your name:
            <input class="control-input js-input" autofocus/>
        </label>
        <span class="js-feedback-message"></span>
    </div>

The JS:
    
    var Control = require('control');
    
    var nameControl = Control.create({
        el:             document.querySelector('.js-name-control'),
        filters:        [trim],
        validators:     [[required, 'Your name is required so we can contact you.']]
    });
    
See `example/index.html` for a working example.

## Methods

### Control.create(options) : ControlPresenter

Create and wire up a new control.

#### Options

 - `el` - The control element. Must contain a `.js-input` element and should probably also contain a `.js-feedback-message` element.
 - `type` - The type of the control. Used for creating an input view. Optional. Defaults to `text`.
 - `name` - The name of the control. Used for retrieving the control from a collection. e.g. `first-name`. Optional. 
 - `event` - The event(s) emitted by the input view which should trigger validation. Optional. Defaults to `blur`.
 - `filters` - The filters. Optional. 
 - `validators` - The validators. Optional. 

### ControlPresenter.getName() : String

Get the control name.

### ControlPresenter.getValue() : String

Get the control value.

### ControlPresenter.setValue(value : String)

Set the control value.

### ControlPresenter.isValid() : Boolean

Get the result of the last call to `validate()`. 

### ControlPresenter.focus()

Focus the input.

### ControlPresenter.clear()

Clear the value and validation state.

### ControlPresenter.validate()

Filters the input value, validates the input value and updates the control view accordingly.

### ControlPresenter.on(type : String, callback : Function)

### ControlPresenter.off(type : String, callback : Function)

## Events

### change

Emitted after the input value has changed.

### validate

Emitted after each call to `validate()`.

#### Arguments

- `valid` - Whether the input is valid.
- `value` - The filtered value.

## Advanced

If you want to display your feedback messages in a different way e.g. in a popup, you can create your own `ControlView` 
and pass it to a new `ControlPresenter` instance.
npm package: @nib/css-framework
Description: CSS utilities and component styles for non-react projects
Author: @nib
Latest version: 1.0.0

[![Build status](https://badge.buildkite.com/d10236ade7c4093a984b1c17a2a3d3f297ea45d42166ddf1c4.svg?branch=master)](https://buildkite.com/nib-health-funds-ltd/css-framework)

# CSS Framework

Tailwind-powered CSS Framework.

This documentation was written using [Svelte](https://svelte.dev/).

## Guidelines

- We have removed some of the default variants in the `tailwind.config.js` file (to save space)
- Breakpoints: Currently only have 2 (`md` (640px), `xl` (960px))
- Tailwind Intellisense vscode plugin is mint
- Spacing in the theme determines the `w-*` utilities

## Adding the CSS Framework to your App

### Using _CDN_

1. Add the `styles.min.css` via _CDN_ into your `index.html`:

   ```html
   <link
     href="https://unpkg.com/@nib/css-framework@^1.0.0/dist/styles.min.css"
     rel="stylesheet"
   />
   ```

   This will give you version `1.0.0`. To get the latest version, remove `@^1.0.0` from the `href`.

## Getting started

To get started:

1. Clone the repository:

   ```bash
    git clone git@github.com:nib-group/css-framework.git
   ```

1. Install the dependencies:

   ```bash
   # Using npm
   npm install

   # Using Yarn
   yarn
   ```

1. Build the `dist` folder:

   ```bash
   # Using npm
   npm run build

   # Using Yarn
   yarn run build
   ```

   This will build out the `dist/styles.css` and `dist/styles.min.css` files used by the docs.

   To optimise the CSS for production, [cssnano](https://cssnano.co/) has been used for the minified styles.

1. Start the development server:

   ```bash
   # Using npm
   npm run dev

   # Using Yarn
   yarn run dev
   ```

Now you should be able to see the project running at [localhost:5000](http://localhost:5000).

## Any questions?

If there are any questions about this process you can ask us at the [#designops](https://app.slack.com/client/T04G2NPUL/C8W3UEY5C) slack channel.