open-index/open-npm huggingface dataset:
npm package: @sergtyapkin/modals-popups
Description: ![Static Badge](https://img.shields.io/badge/Vue.js-components-green) ![npm](https://img.shields.io/npm/dt/%40sergtyapkin%2Fmodals-popups)
Author: Sergey Tyapkin
Latest version: 1.1.4

# Modals and Popups Vue.js components
![Static Badge](https://img.shields.io/badge/Vue.js-components-green)
![npm](https://img.shields.io/npm/dt/%40sergtyapkin%2Fmodals-popups)

Modals and popups components for your Vue.js app

----

Usage: In your entrypoint .vue component (may be `App.vue`):
```VUE

<template>
  <!-- Router component -->

  <Popups ref="popups"></Popups>
  <Modals ref="modals"></Modals>
</template>

<script>
  import {getCurrentInstance} from "vue";
  import {Modals, Popups} from "@sergtyapkin/modals-popups";

  export default {
    components: {Modals, Popups},

    mounted() {
      const global = getCurrentInstance().appContext.config.globalProperties;

      global.$modals = this.$refs.modals;
      global.$popups = this.$refs.popups;
      global.$app = this;
    },
  };
</script>
```

Now you can use in any child components:
```JS
this.$modals.alert(title, description='');
this.$modals.prompt(title, description='', defaultText='');
this.$modals.confirm(title, description='');
// Returns:
// 'modals.alert' -> null (window closed) / true ('OK' pressed)
// 'modals.prompt' -> null (window closed) / 'some text' ('OK' pressed)
// 'modals.confirm' -> null (window closed) / false ('No' pressed) / true ('Yes' pressed)

this.$popups.error(title, description='', timeToDisappear=3000);
this.$popups.alert(title, description='', timeToDisappear=3000);
this.$popups.success(title, description='', timeToDisappear=3000);
// Returns undefined
```
npm package: @sergtyapkin/reconnecting-websocket
Description: ![Static Badge](https://img.shields.io/badge/Vue.js-plugin-green) ![npm](https://img.shields.io/npm/dt/%40sergtyapkin%2Freconnecting-websocket)
Author: Sergey Tyapkin
Latest version: 1.0.5

# Reconnecting WebSocket
![Static Badge](https://img.shields.io/badge/Vue.js-plugin-green)
![npm](https://img.shields.io/npm/dt/%40sergtyapkin%2Freconnecting-websocket)


WebSocket that will try to reconnects to server when lost connection.

First reconnection attempt after `reconnectTimeout` milliseconds.
With each subsequent reconnection, the timeout will increase by `x2` but max reconnection timeout is `maxReconnectTimeout`.

Default values:
```JS
reconnectTimeout = 1000
maxReconnectTimeout = 4000
```

----
Example without Vue framework:
```JS
import WS from "@sergtyapkin/reconnecting-websocket";

WS.handlers.some_event = (jsonData) => {console.log(jsonData)};
// WS.onopen = (event) => {};
// WS.onerror = (event) => {};
// WS.onclose = (event) => {};

// to disable some handler
delete WS.handlers.some_event;
```

Example entrypoint using **Vue.js**:
```JS 
// index.js

import { createApp } from 'vue';
import App from './App.vue';
import WS from "@sergtyapkin/reconnecting-websocket";

const app = createApp(App)
  .use(WS, `wss://${location.host}/ws`)
  .mount('#app');

// Now WS class available in any child component by:
// this.$ws
```
npm package: @sergtyapkin/rest-api
Description: ![npm](https://img.shields.io/npm/dt/%40sergtyapkin%2Frest-api)
Author: Sergey Tyapkin
Latest version: 1.0.8

# REST API
![npm](https://img.shields.io/npm/dt/%40sergtyapkin%2Frest-api)

REST API module for your app with pretty documenting

----

Example user-service API for your app:
```JS
import REST_API from "@sergtyapkin/rest-api"

export default class MY_API extends REST_API {
    login = (email, password, clientBrowser, clientOS) => this.post('/api/user/auth', {email, password, clientBrowser, clientOS});
    register = (name, group, telegram, vk, email, phone_number, password, clientBrowser, clientOS) => this.post('/api/user', {name, group, telegram, vk, email, phone_number, password, clientBrowser, clientOS});
    logout = () => this.delete('/api/user/session');
    getUser = () => this.get('/api/user');
    getUserById = (id) => this.get(`/api/user`, {id});
    sendConfirmationLetter = (name, email) => this.post('/api/email/confirm', {name, email});
    confirmRegistrationByCode = (secretCode) => this.put('/api/user/email/confirm', {secretCode});
    changePassword = (oldPassword, newPassword) => this.put('/api/user/password', {oldPassword, newPassword});
    editProfile = (name, group, telegram, vk, email, phone_number) => this.put('/api/user', {name, group, telegram, vk, email, phone_number});
    sendRestorePasswordLetter = (secretCode, newPassword) => this.post('/api/user/password/restore', {secretCode, newPassword});
    restorePassword = (secretCode, newPassword) => this.put('/api/user/password', {secretCode, newPassword});
    authCode = (secretCode, clientBrowser, clientOS) => this.post('/api/user/auth/code', {secretCode, clientBrowser, clientOS});
}
```
npm package: @sergtyapkin/scroll-restore
Description: ![Static Badge](https://img.shields.io/badge/Vue.js-plugin-green) ![npm](https://img.shields.io/npm/dt/%40sergtyapkin%2Fscroll-restore)
Author: Sergey Tyapkin
Latest version: 1.1.0

# Scroll restore
![Static Badge](https://img.shields.io/badge/Vue.js-plugin-green)
![npm](https://img.shields.io/npm/dt/%40sergtyapkin%2Fscroll-restore)



----
Example on Vue framework:

```JS 
// index.ts

import { createApp } from 'vue';
import createVueRouter from './Router.js'
import { ScrollRestore } from "@sergtyapkin/scroll-restore";

import App from './App.vue';

const Router = createVueRouter(Store);
const app = createApp(App)
  .use(Router)
  .use(ScrollRestore, Router, [
    'events',
    'docs',
  ], document.body)
  .mount('#app');

// now ScrollRestore class available in any child component by:
// this.$scroll
```

```JS
// Docs.vue

<script>
export default {
  data() {
    return {
      // ... some data ... 
    }
  },

  async mounted() {
    // ... some logic ...
  
    this.$scroll.restore(); // !!!!!!!!! RESTORE !!!!!!!!!!
  },
}
</script>
```
npm package: @sergtyapkin/vue3-markdown
Description: ![Static Badge](https://img.shields.io/badge/Vue.js-components-green) ![npm](https://img.shields.io/npm/dt/%40sergtyapkin%2Fmarkdown)
Author: Sergey Tyapkin
Latest version: 0.1.0

# Markdown Redactor & Renderer
![Static Badge](https://img.shields.io/badge/Vue.js-components-green)
![npm](https://img.shields.io/npm/dt/%40sergtyapkin%2Fmarkdown)


**Markdown redactor and renderer as Vue.js component.**

- Includes HTML sanitizer that prevents any XSS.
- Allows videos in `<iframe>` only from: [YouTube](https://www.youtube.com), [TikTok](https://www.tiktok.com), [Instagram](https://instagram.com), [Facebook](https://facebook.com), [Dailymotion](https://dailymotion.com), [Hulu](https://hulu.com), [Crunchyroll](https://www.crunchyroll.com), [NETFLIX](https://www.netflix.com), [Vimeo](https://vimeo.com), [Kinescope](https://kinescope.io), [9GAG](https://9gag.com), [Twitch](https://www.twitch.tv), [Veoh](https://www.veoh.com).
- Allows media tags `<video>`, `<audio>`, `<img>` with `src` attribute.
- Allows all text decorating tags.
npm package: @serguun42/khaleesi-js
Description: Скрипт для имитирования речи Кхалиси. Работает на JS без сторонних библиотек, поддерживает Typescript (TS declarations)
Author: serguun42
Latest version: 3.0.1

# Khaleesi-JS

Скрипт для имитирования речи Кхалиси. Работает на JS без сторонних библиотек, поддерживает Typescript (_TS declarations_).

## Использование

Установить через npm – `npm i @serguun42/khaleesi-js`

Можно импортировать и как ESM, и как CommonJS-модуль, в т.ч. в Typescript-проекты:

```javascript
import Khaleesi from "khaleesi-js"; // ESM
const Khaleesi = require("khaleesi-js"); // Или CommonJS

const phrase = "Кхалиси – худший из ботов в мире";
const remade = Khaleesi(phrase);

console.log(remade);
```

## Credit

Изначально [@pongo](https://github.com/pongo/rapturebot) реализовал как модуль-команду для бота в Telegram.

---

-   Кхяиси – хюдфий из ботёв в мийе
-   Кхяиси – хюдший из ботёв в мийе
-   Кхяеси – хюдший из потёв в мийи
npm package: @serguun42/pdf-parse
Description: Fork of pdf-parse
Author: Mehmet Kozan
Latest version: 2.1.3

# @serguun42/pdf-parse

Fork of [pdf-parse](https://www.npmjs.com/package/pdf-parse)

## Installation

`npm install @serguun42/pdf-parse`

## Basic Usage - Local Files

```js
const fs = require("fs");
const PdfParse = require("@serguun42/pdf-parse");

let dataBuffer = fs.readFileSync("path/to/file.pdf");

PdfParse(dataBuffer).then((data) => {
	// number of pages
	console.log(data.numpages);
	// number of rendered pages
	console.log(data.numrender);
	// PDF info
	console.log(data.info);
	// PDF metadata
	console.log(data.metadata);
	// PDF.js version
	// check https://mozilla.github.io/pdf.js/getting_started/
	console.log(data.version);
	// PDF text
	console.log(data.text);
});
```

## Basic Usage - HTTP

You can use [crawler-request](https://www.npmjs.com/package/crawler-request) which uses the `pdf-parse`

## Exception Handling

```js
const fs = require("fs");
const PdfParse = require("@serguun42/pdf-parse");

const dataBuffer = fs.readFileSync("path/to/file.pdf");

PdfParse(dataBuffer)
	.then((data) => {
		// use data
	})
	.catch((error) => {
		// handle exceptions
	});
```

## Extend

-   v1.0.9 and above break pagerender callback [changelog](https://github.com/serguun42/pdf-parse/blob/master/CHANGELOG.md)
-   If you need another format like json, you can change page render behaviour with a callback
-   Check out https://mozilla.github.io/pdf.js/

```js
// default render callback
function render_page(pageData) {
	//check documents https://mozilla.github.io/pdf.js/
	let render_options = {
		//replaces all occurrences of whitespace with standard spaces (0x20). The default value is `false`.
		normalizeWhitespace: false,
		//do not attempt to combine same line TextItem's. The default value is `false`.
		disableCombineTextItems: false
	};

	return pageData.getTextContent(render_options).then((textContent) => {
		let lastY,
			text = "";
		for (let item of textContent.items) {
			if (lastY == item.transform[5] || !lastY) {
				text += item.str;
			} else {
				text += "\n" + item.str;
			}
			lastY = item.transform[5];
		}
		return text;
	});
}

let options = {
	pagerender: render_page
};

const dataBuffer = fs.readFileSync("path/to/file.pdf");

PdfParse(dataBuffer, options).then((data) => {
	// use new format
});
```

## Options

```js
const DEFAULT_OPTIONS = {
	// internal page parser callback
	// you can set this option, if you need another format except raw text
	pagerender: render_page,

	// max page number to parse
	max: 0,
};
```

### _pagerender_ (callback)

If you need another format except raw text.

### _max_ (number)

Max number of page to parse. If the value is less than or equal to 0, parser renders all pages.

## Tests

Removed

## License

[MIT licensed](https://gitlab.com/autokent/pdf-parse/blob/master/LICENSE) and all it's dependencies are MIT or BSD licensed.
This fork is also under MIT license.
npm package: @serh11p/tailwindcss-alpha
Description: Automatic alpha variants for your Tailwind CSS colors
Latest version: 0.2.0

> This [patch](https://github.com/bradlc/tailwindcss-alpha/pull/7) for [this](https://github.com/bradlc/tailwindcss-alpha) module.

# @serh11p/tailwindcss-alpha

> Automatic alpha variants for your Tailwind CSS colors

## Why?

If you’re like me your Tailwind CSS color configuration often ends up looking something like this:

```js
module.exports = {
  // ...
  backgroundColors: {
    red: "#f00",
    "red-10": "rgba(255, 0, 0, 0.1)",
    "red-20": "rgba(255, 0, 0, 0.2)",
    "red-50": "rgba(255, 0, 0, 0.5)",
    "red-80": "rgba(255, 0, 0, 0.8)"
    // ...
  }
  // ...
};
```

`tailwindcss-alpha` automatically generates alpha variations for each of your background, text, and border colors.

## Install

```
npm install --save-dev @serh11p/tailwindcss-alpha
```

```js
// tailwind.js
module.exports = {
  // ...
  plugins: [
    require("@serh11p/tailwindcss-alpha")({
      modules: {
        backgroundColors: true
      },
      alpha: {
        "10": 0.1,
        "30": 0.3
      }
    })
  ]
  // ...
};
```

## Options

### `modules` (optional)

**Default:** `{ backgroundColors: true, textColors: false, borderColors: false }`

Here is where you define which Tailwind modules you would like to generate alpha variants for, and which state variants (responsive, hover, etc.) to generate for each. This option behaves in the same way as the [`modules` property in the main Tailwind configuration](https://tailwindcss.com/docs/configuration#modules), with one difference: a value of `true` means "inherit from the main Tailwind `modules` configuration."

### `alpha` (optional)

This is an object containing the alpha values for your new color utilities. If this is not specified in the plugin options the `alpha` property in your main Tailwind configuration will be used. If there is no `alpha` property then the `opacity` property is used.

The keys of this object appear at the end of the utility class names. For example if you have a background color with a key of `red` and an alpha with a key of `25` then a `bg-red-25` class would be generated.

## Example

```js
module.exports = {
  // ...
  backgroundColors: {
    red: "#f00"
  },
  // ...
  plugins: [
    require("@serh11p/tailwindcss-alpha")({
      modules: {
        backgroundColors: []
      },
      alpha: {
        "25": 0.25,
        "50": 0.5,
        "75": 0.75
      }
    })
  ]
  // ...
};
```

The configuration above yields the following utilities:

```css
.bg-red-25 {
  background-color: rgba(255, 0, 0, 0.25);
}

.bg-red-50 {
  background-color: rgba(255, 0, 0, 0.5);
}

.bg-red-75 {
  background-color: rgba(255, 0, 0, 0.75);
}
```
npm package: @serhatkaya/daypicker-timeline
Description: example
Latest version: 1.0.2

example

```javascript
   <script>
      const dpt = new DPT.DayPickerTimeline({
        selector: ".container",
        startFromToday: true,
        onSelect: (selected) => {
          console.log(selected);
        },
      });
      dpt.init();
    </script>
```
npm package: @serhii-yakymuk/react-scripts
Description: Configuration and scripts for Create React App.
Latest version: 1.1.5

# react-scripts

This package includes scripts and configuration used by [Create React App](https://github.com/facebookincubator/create-react-app).<br>
Please refer to its documentation:

* [Getting Started](https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started) – How to create a new app.
* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) – How to develop apps bootstrapped with Create React App.
npm package: @serhiiseregin/material-icons
Description: Updated material icons
Author: Serhii Seregin
Latest version: 1.1.20

# Welcome to `@serhiiseregin/material-icons`

## Overview

`@serhiiseregin/material-icons` is a powerful collection of beautifully crafted icons designed to enhance the visual appeal of your projects. Whether you're working on a website, web application, or any other frontend project, these icons are here to add a touch of elegance and creativity to your user interfaces.

## Features

- **Smaller Bundle Size:** We've optimized our icons to minimize the impact on your application's bundle size, ensuring efficient performance.
- **mapIcon Function:** The `mapIcon` function provides flexibility for your project by allowing you to easily map icon names to components of your choice.
- **Fix for Linux OS:** We've addressed the issue of repeating icon names on Linux OS, ensuring a seamless experience across all platforms.

## Installation

To get started, install `@serhiiseregin/material-icons` using your package manager of choice:

```sh
npm install @serhiiseregin/material-icons
```

## Usage

### Basic Usage

```javascript
import { MdClose } from '@serhiiseregin/material-icons/icons/MdClose';

const MyComponent = () => (
  <div>
    <MdClose />
    {/* ... */}
  </div>
);
```

### Dynamic icons
```javascript
import { mapIcon } from '@serhiiseregin/material-icons';

const Icon = mapIcon('MdClose')

const MyComponent = () => (
  <div>
    {/* Will render close icon */}
    <Icon />
  </div>
);
```

**Note**: The `mapIcon` function allows you to dynamically create icon components by passing their names as arguments. This provides flexibility in rendering icons based on runtime conditions.

### Accessing All Icon Names
You can access an array of all icon names using the iconNames export:

```javascript
import { iconNames } from '@serhiiseregin/material-icons';

console.log(iconNames); <!-- An array of all available icon names -->
```
This array includes all the icon names you can use with the mapIcon function. It's useful for various scenarios where you need to work with icon names programmatically.
npm package: @serial-as/borsh
Description: Borsh Serializer for Assemblyscript
Author: Guillermo Gallardo and Willem Wyndham
Latest version: 2.0.0

# Borsh-as

**borsh-as** is an assemblyscript implementation of the [borsh](borsh.io) serializer.

## How to use it

```ts
import { Borsh } from '@serial-as/borsh'

@serializable
class Pair{
  x: i32 = 0,
  y: i32 = 0
}

let pair:Pair = {x:1, y:2}

// serialized is the u8 buffer [0, 0, 0, 1, 0, 0, 0, 2]
let serialized:ArrayBuffer = Borsh.serialize(object)  

// decoded is the Pair = {x:1, y:2}
let decoded:Pair = Borsh.deserialize<Pair>(serialized)  
```

## Limitations
Assemblyscript does not have Enums, nor allows to predefine the lenght of an array. Because of this, Borsh-as has the following limitations:

- Does **not** deserialize Enums.
- Does **not** deserialize fixed-size arrays.
npm package: @serial-as/json
Description: JSON Serializer for Assemblyscript
Author: Guillermo Gallardo and Willem Wyndham
Latest version: 2.0.0

# JSON-as

**json-as** is an assemblyscript implementation of the [JSON](https://json.org) serializer.


## How to use it

Install the package via `yarn add @serial-as/json` and add the `--transform @serial-as/transform` flag to your `asc` command.

```ts
import { stringify, parse } from '@serial-as/json'

@serializable
class Pair{
  x: i32 = 0,
  y: i32 = 0
}

let pair:Pair = {x:1, y:2}

// `serialized` is the string "{"x":1,"y":2}"
let serialized: string = stringify(object)  

// `decoded` is the Pair = {x:1, y:2}
let decoded: Pair = parse<Pair>(serialized)  
```
npm package: @serialized/create
Description: A CLI for scaffolding Serialized projects using Typescript or Javascript
Author: Mattias Holmqvist
Latest version: 1.5.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Node starter kit for Serialized

Bootstraps the creation of [Serialized](https://serialized.io) apps.  

## Usage

```bash
mkdir game-project
cd game-project
npm init @serialized -n game-project -a game typescript
npm install
npm run start
```
npm package: @serializedowen/egg-shell-decorator
Description: <img width="100" src="https://super-github.oss-cn-shenzhen.aliyuncs.com/package/egg-shell-decorators.png"/>
Author: @serializedowen
Latest version: 0.2.0

<img width="100" src="https://super-github.oss-cn-shenzhen.aliyuncs.com/package/egg-shell-decorators.png"/>

<p>
  <img src="https://img.shields.io/badge/version-1.5.0-ff69b4.svg"/>
  <img src="https://img.shields.io/packagist/l/doctrine/orm.svg"/>
</p>

> 蛋壳\~给你的Egg加个壳\~（该项目本人会持续维护，欢迎大家提Issues和加入微信群~）

# 快速开始
```ts
import { Controller } from 'egg';
import { Get, Middleware } from 'egg-shell-decorators';
import JwtValidator from '../middleware/jwt-validator';

export default class UserController extends Controller {

  @Get('/')
  @Middleware([ JwtValidator() ])
  public getUser() {
    this.ctx.body = { name: 'super2god' };
  }

}
```

# 版本
| 版本 | 文档 | 上线时间 |
| ---- | ---- | ----  |
| v1.5.0 | [点击跳转](https://www.yuque.com/super2god/open-source/egg-shell-decorators-v1.5.0) | 2020-07-28 |
| v1.5.0-beta | [点击跳转](https://www.yuque.com/super2god/open-source/egg-shell-decorators-v1.5.0-beta) | 2020-07-13 |
| v1.0.7 | [点击跳转](https://www.yuque.com/super2god/open-source/egg-shell-decorators-v1.0.7) | 2018-12-29 |

# 示例代码
蛋壳示例代码请查看该项目：[egg-shell-example](https://github.com/super2god/egg-shell-example)（蛋壳示例代码）。

```ts
import { Controller } from 'egg';
import { Get, Post } from 'egg-shell-decorators';

export default class UserController extends Controller {

  @Get('/:id')
  public getUser({ params: { id } }) {
    this.ctx.body = `getUser:${id}`;
  }

  @Post('/')
  public createUser({ request: { body: { name, phone, age } } }) {
    this.ctx.body = { name, phone, age };
  }
}
```

# 加入小组来面基~
由于本人很少上QQ，所以建的是微信群，而微信群码很快就失效，所以想进交流群的小伙伴加我微信噢\~~我拉你进群，欢迎大佬们加入☺️

<img width="300" src="https://super-github.oss-cn-shenzhen.aliyuncs.com/common/wxqrcode.jpeg"/>
npm package: @serializedowen/vue-img-watermark
Description: add watermark for your image with only a single directive
Author: @serializedowen
Latest version: 1.1.0

# vue-img-watermark :maple_leaf:

## Demo 
 http://serializedowen.github.io/vue-img-watermark/

## Installation
```sh
npm install --save @serializedowen/vue-img-watermark
```

```
yarn add @serializedowen/vue-img-watermark
```



## Usage
```js
import plugin from '@serializedowen/vue-img-watermark'

Vue.use(plugin)
```



* put `v-watermark` on your `<img>` tag to generate watermark for your image
* fully customizable with configuration object. 
  * use `setScopedConfig()` in `beforeCreate` hook in your vue component to scope configuration to that particular vue component
  * use `v-watermark={{config: OptionConfig}}` to customize watermark behavior
  * The order of precedance will be directive value > component scoped options > global options
* register your custom rendering strategy with `registerCustomStrategy()` which you can later on use with `{mode: name of your strategy}` :grinning:


## Known Issues:
- [x] currently `canvas.drawImage()` has to be wrapped in a `setTimeout()` call to work, reason to be identified.