open-index/open-npm huggingface dataset:
npm package: @stasies/js-validator
Description: A lightweight js form validator
Author: Anastasia Vyatkina
Latest version: 1.0.15

# js-validator

js-validator is a lightweight JavaScript library for client-side form validation. It supports real-time input validation, custom validation rules, and configurable error messages.

## Features

- Validates inputs based on HTML5 constraints (e.g., required, minLength, maxLength, pattern, etc.)
- Supports custom validation rules per input field
- Configurable validation events (submit, input, change, blur)
- Customizable error messages
- Automatic styling for valid and invalid inputs
- Non-intrusive, works with existing forms

## Installation

```sh
npm install @stasies/js-validator
```

Import the libary to your project:

```js
import { validateForm } from "@stasies/js-validator";
```

## Usage

### Basic Example

```html
<form id="myForm">
  <input type="text" name="username" required minlength="3" />
  <input type="email" name="email" required />
  <button type="submit">Submit</button>
</form>

<script>
  const form = document.querySelector("#myForm");
  validateForm(form);
</script>
```

## Configuration Options

You can pass an options object to `validateForm` to customize validation behavior.

```js
const options = {
  validate: "submit", // When to validate: "submit", "input", "change", or "blur"
  colors: {
    error: "red",
    success: "green",
  },
  errorMessages: {
    valueMissing: "This field is required",
    typeMismatch: "Invalid format",
    tooShort: "Input is too short",
  },
  rules: {
    username: [
      (value) => value.length < 3 && "Username must be at least 3 characters",
    ],
    email: [(value) => !value.includes("@") && "Invalid email format"],
  },
};

const form = document.querySelector("#myForm");
validateForm(form, options);
```

## Custom Validation Rules

You can define custom validation rules for specific inputs:

```js
const options = {
  rules: {
    password: [
      (value) => value.length < 6 && "Password must be at least 6 characters",
      (value) =>
        !/[A-Z]/.test(value) && "Password must contain an uppercase letter",
    ],
  },
};
```

## Styling

js-validator automatically applies styles to invalid and valid inputs:

- `.input-invalid` → Applied to invalid inputs (border color changes to `colors.error`).
- `.input-valid` → Applied to valid inputs (border color changes to `colors.success`).
- `.error-message` → Displays error messages below inputs.

You can override styles in your CSS:

```css
.input-invalid {
  border-color: red;
  color: red;
}
.input-valid {
  border-color: green;
  color: green;
}
.error-message {
  color: red;
  font-size: 12px;
}
```

## Events

The library listens to validation events based on the `validate` option:

- **submit** → Validates when the form is submitted.
- **input** → Validates as the user types.
- **change** → Validates when input loses focus.
- **blur** → Validates when the input field loses focus.

## License

MIT License © 2025 Stasies
npm package: @staski/vue-img-mapper
Description: Vue Component to highlight interactive zones in images
Author: Nisharg Shah
Latest version: 0.1.1

# Vue Img Mapper extension

This repository is is a small extension to [vue-img-mapper](https://github.com/img-mapper/vue-img-mapper), containing ids in the rendered image areas and a target attribute. The ids are required for the [@staski/panel-map](https://www.npmjs.com/package/@staski/panel-map) component, when setting up popup elements once the document is mounted. The target attribute allows to open a link in a new window or tab if the user clicks on a highlighted area. 

## Installation

Package: [@staski/vue-img-mapper](https://www.npmjs.com/package/@staski/vue-img-mapper)

**NPM**

```  
npm install @staski/vue-img-mapper
```
## License

Distributed with an MIT License. See LICENSE.txt for more details!

Copyright (c) 2023 staski, 2021 Nisharg Shah
npm package: @staskozin/ui-kit
Description: Этот репозиторий содержит UI Kit для моих личных проектов. Я использую его для создания интерфейсов своих приложений.
Latest version: 1.11.3

# UI Kit для моих проектов

Этот репозиторий содержит UI Kit для моих личных проектов. Я использую его для создания интерфейсов своих приложений.

В нем есть набор компонентов, таких как кнопки, формы, карточки и другие элементы, которые я могу использовать для быстрого прототипирования и разработки своих проектов. Я также обновляю этот репозиторий по мере необходимости, добавляя новые компоненты и улучшая существующие.

А еще весь текст сверху — это нейрослоп, который сгенерировал бесплатный ИИ.
npm package: @stastwiztah/test-react-library
Description: Made with create-react-library
Author: StasTwiztah
Latest version: 3.0.2

# test-react-library

> Made with create-react-library

[![NPM](https://img.shields.io/npm/v/test-react-library.svg)](https://www.npmjs.com/package/test-react-library) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save test-react-library
```

## Usage

```tsx
import React, { Component } from 'react'

import MyComponent from 'test-react-library'
import 'test-react-library/dist/index.css'

class Example extends Component {
  render() {
    return <MyComponent />
  }
}
```

## License

MIT © [StasTwiztah](https://github.com/StasTwiztah)
npm package: @stasusov/ngx-gallery-core
Description: Angular gallery directive that hooks the lightbox with the images automatically.
Author: Stanislav Usov
Latest version: 3.3.1
Deprecated: Do not use this package, since it was made as a temporary fix. Please refer to the original package: @ngx-gallery/core

<p align="center">
  <img width="150px" src="https://user-images.githubusercontent.com/8130692/36171173-ad0da54c-1112-11e8-85bf-843c5f70efdc.png" style="max-width:100%;">
</p>
<h1 align="center">Angular Gallery</h1>

<p align="center">Simplifies the process of creating beautiful image galleries for the web and mobile devices.</p>


[![npm](https://img.shields.io/badge/demo-online-ed1c46.svg)](https://murhafsousli.github.io/ngx-gallery/)
[![npm](https://img.shields.io/badge/stackblitz-online-orange.svg)](https://stackblitz.com/edit/ngx-gallery)
[![npm](https://img.shields.io/npm/v/@ngx-gallery/core.svg?maxAge=2592000?style=plastic)](https://www.npmjs.com/package/@ngx-gallery/core)
[![Travis branch](https://travis-ci.org/MurhafSousli/ngx-gallery.svg?branch=master)](https://travis-ci.org/MurhafSousli/ngx-gallery)
[![npm](https://img.shields.io/npm/dt/@ngx-gallery/core.svg?maxAge=2592000?style=plastic)](https://www.npmjs.com/package/@ngx-gallery/core)
[![npm](https://img.shields.io/npm/l/express.svg?maxAge=2592000)](/LICENSE)


- **For version 3.x**, see the [WIKI](https://github.com/MurhafSousli/ngx-gallery/wiki)
- **For version 2.x**, see the [WIKI](https://github.com/MurhafSousli/ngx-gallery/wiki) and check the [changelog](/CHANGELOG.md) for the changes
- **For version 1.x**, see this [DOCS](/README_V1.md)

## Support

[![npm](https://c5.patreon.com/external/logo/become_a_patron_button.png)](https://www.patreon.com/bePatron?u=5594898)

## Issues

If you identify any errors in this module, or have an idea for an improvement, please open an [issue](https://github.com/MurhafSousli/@ngx-gallery/core/issues).

## Author

 **[Murhaf Sousli](http://murhafsousli.com)**

- [github/murhafsousli](https://github.com/MurhafSousli)
- [twitter/murhafsousli](https://twitter.com/MurhafSousli)
npm package: @stasusov/ngx-gallery-gallerize
Description: Angular gallery directive that hooks the lightbox with the images automatically.
Author: Stanislav Usov
Latest version: 3.3.2

<p align="center">
  <img width="150px" src="https://user-images.githubusercontent.com/8130692/36171173-ad0da54c-1112-11e8-85bf-843c5f70efdc.png" style="max-width:100%;">
</p>
<h1 align="center">Angular Gallery</h1>

<p align="center">Simplifies the process of creating beautiful image galleries for the web and mobile devices.</p>


[![npm](https://img.shields.io/badge/demo-online-ed1c46.svg)](https://murhafsousli.github.io/ngx-gallery/)
[![npm](https://img.shields.io/badge/stackblitz-online-orange.svg)](https://stackblitz.com/edit/ngx-gallery)
[![npm](https://img.shields.io/npm/v/@ngx-gallery/core.svg?maxAge=2592000?style=plastic)](https://www.npmjs.com/package/@ngx-gallery/core)
[![Travis branch](https://travis-ci.org/MurhafSousli/ngx-gallery.svg?branch=master)](https://travis-ci.org/MurhafSousli/ngx-gallery)
[![npm](https://img.shields.io/npm/dt/@ngx-gallery/core.svg?maxAge=2592000?style=plastic)](https://www.npmjs.com/package/@ngx-gallery/core)
[![npm](https://img.shields.io/npm/l/express.svg?maxAge=2592000)](/LICENSE)


- **For version 3.x**, see the [WIKI](https://github.com/MurhafSousli/ngx-gallery/wiki)
- **For version 2.x**, see the [WIKI](https://github.com/MurhafSousli/ngx-gallery/wiki) and check the [changelog](/CHANGELOG.md) for the changes
- **For version 1.x**, see this [DOCS](/README_V1.md)

## Support

[![npm](https://c5.patreon.com/external/logo/become_a_patron_button.png)](https://www.patreon.com/bePatron?u=5594898)

## Issues

If you identify any errors in this module, or have an idea for an improvement, please open an [issue](https://github.com/MurhafSousli/@ngx-gallery/core/issues).

## Author

 **[Murhaf Sousli](http://murhafsousli.com)**

- [github/murhafsousli](https://github.com/MurhafSousli)
- [twitter/murhafsousli](https://twitter.com/MurhafSousli)
npm package: @stasusov/ngx-gallery-lightbox
Description: Angular gallery directive that hooks the lightbox with the images automatically.
Author: Stanislav Usov
Latest version: 3.3.2

<p align="center">
  <img width="150px" src="https://user-images.githubusercontent.com/8130692/36171173-ad0da54c-1112-11e8-85bf-843c5f70efdc.png" style="max-width:100%;">
</p>
<h1 align="center">Angular Gallery</h1>

<p align="center">Simplifies the process of creating beautiful image galleries for the web and mobile devices.</p>


[![npm](https://img.shields.io/badge/demo-online-ed1c46.svg)](https://murhafsousli.github.io/ngx-gallery/)
[![npm](https://img.shields.io/badge/stackblitz-online-orange.svg)](https://stackblitz.com/edit/ngx-gallery)
[![npm](https://img.shields.io/npm/v/@ngx-gallery/core.svg?maxAge=2592000?style=plastic)](https://www.npmjs.com/package/@ngx-gallery/core)
[![Travis branch](https://travis-ci.org/MurhafSousli/ngx-gallery.svg?branch=master)](https://travis-ci.org/MurhafSousli/ngx-gallery)
[![npm](https://img.shields.io/npm/dt/@ngx-gallery/core.svg?maxAge=2592000?style=plastic)](https://www.npmjs.com/package/@ngx-gallery/core)
[![npm](https://img.shields.io/npm/l/express.svg?maxAge=2592000)](/LICENSE)


- **For version 3.x**, see the [WIKI](https://github.com/MurhafSousli/ngx-gallery/wiki)
- **For version 2.x**, see the [WIKI](https://github.com/MurhafSousli/ngx-gallery/wiki) and check the [changelog](/CHANGELOG.md) for the changes
- **For version 1.x**, see this [DOCS](/README_V1.md)

## Support

[![npm](https://c5.patreon.com/external/logo/become_a_patron_button.png)](https://www.patreon.com/bePatron?u=5594898)

## Issues

If you identify any errors in this module, or have an idea for an improvement, please open an [issue](https://github.com/MurhafSousli/@ngx-gallery/core/issues).

## Author

 **[Murhaf Sousli](http://murhafsousli.com)**

- [github/murhafsousli](https://github.com/MurhafSousli)
- [twitter/murhafsousli](https://twitter.com/MurhafSousli)