open-index/open-npm huggingface dataset:
npm package: @mryuramr/country-list
Description: Maps ISO 3166-1-alpha-2 codes to English country names and vice versa.
Author: Yurii Mudryi
Latest version: 1.0.5

# country-list

## List of countries for internal usage

## Example

``` js
import getCountryList from '@mryuramr/country-list'

const COUNTRY_LIST = getCountryList()

const { alpha2, euMember, name } = COUNTRY_LIST[0]

console.log('alpha2', alpha2) // DE
console.log('euMember', euMember) // true
console.log('name', name) // Deutschland

```
npm package: @mryx/cli
Description: Mryx Cli 是一个 Vue 组件库构建工具，通过 Mryx Cli 可以快速搭建一套功能完备的 Vue 组件库。
Author: chenjiahan
Latest version: 3.0.0-beta.14

# Mryx Cli

Mryx Cli 是一个 Vue 组件库构建工具，通过 Mryx Cli 可以快速搭建一套功能完备的 Vue 组件库。

### 特性

- 提供丰富的命令，涵盖从开发测试到构建发布的完整流程
- 基于约定的目录结构，自动生成优雅的文档站点和组件示例
- 内置 ESlint、Stylelint 校验规则，提交代码时自动执行校验
- 构建后的组件库默认支持按需引入、主题定制、Tree Shaking

### 快速上手

执行以下命令可以快速创建一个基于 Mryx Cli 的项目：

```bash
npx create-mryx-cli-app
```

### 手动安装

```shell
# 通过 npm 安装
npm i @mryx/cli -D

# 通过 yarn 安装
yarn add @mryx/cli --dev
```

安装完成后，请将以下配置添加到 package.json 文件中

```json
{
  "scripts": {
    "dev": "mryx-cli dev",
    "test": "mryx-cli test",
    "lint": "mryx-cli lint",
    "build": "mryx-cli build",
    "release": "mryx-cli release",
    "build-site": "mryx-cli build-site"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "commit-msg": "mryx commit-lint"
    }
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx,vue}": "eslint --fix",
    "*.{vue,css,less,scss}": "stylelint --fix"
  },
  "eslintConfig": {
    "root": true,
    "extends": ["@mryx"]
  },
  "stylelint": {
    "extends": ["@mryx/stylelint-config"]
  },
  "prettier": {
    "singleQuote": true
  },
  "browserslist": ["Android >= 4.0", "iOS >= 8"]
}
```

## 详细文档

- [命令](https://github.com/youzan/mryx/tree/dev/packages/mryx-cli/docs/commands.md)
- [配置指南](https://github.com/youzan/mryx/tree/dev/packages/mryx-cli/docs/config.md)
- [目录结构](https://github.com/youzan/mryx/tree/dev/packages/mryx-cli/docs/directory.md)
- [更新日志](https://github.com/youzan/mryx/tree/dev/packages/mryx-cli/changelog.md)

## 关于桌面端组件

目前 Mryx Cli 仅支持移动端组件的预览，桌面端组件暂不支持预览（欢迎 PR）。
npm package: @mryx/eslint-config
Description: eslint config of mryx
Latest version: 3.0.0-beta.0

# Eslint Config of Mryx

## Install

#### NPM

```shell
npm i @mryx/eslint-config -D
```

#### YARN

```shell
yarn add @mryx/eslint-config --dev
```

## Usage

```js
{
  "extends": ["@mryx"]
}
```
npm package: @mryx/icons
Description: mryx icons
Latest version: 1.3.2

# Mryx Icons

## Install

#### NPM

```shell
npm i @mryx/icons -S
```

#### YARN

```shell
yarn add @mryx/icons
```

## Document

- [Usage in Vue](https://youzan.github.io/mryx/#/zh-CN/icon)
- [Usage in Weapp](https://youzan.github.io/mryx-weapp/#/icon)

## Contribution

### Update Icons

1. Update assets/icons.sketch
2. Make a Pull Request

### Add New Icon

1. Add new icon to assets/icons.sketch
2. Add icon name to src/config.js
3. Add icon codepoints to build/codepoints.js
4. Make a Pull Request
npm package: @mryx/markdown-loader
Description: Simple and fast vue markdown loader
Latest version: 3.0.0

# mryx-markdown-loader

Simple and fast vue markdown loader, transform markdown to vue component.

## Install

### NPM

```shell
npm i @mryx/markdown-loader -S
```

### YARN

```shell
yarn add @mryx/markdown-loader
```

## Options

- `enableMetaData`: Default `false`. Whether to use [front-matter](https://github.com/jxson/front-matter) to extract markdown meta data

- `linkOpen`: Default `true`. Whether to add target="_blank" to all links

- `wrapper(html, fm)`: Format the returned content using a custom function
    - `html`: The result of [markdown-it](https://github.com/markdown-it/markdown-it)'s render
    - `fm`: See [fm(string)](https://github.com/jxson/front-matter#fmstring). If `enableMetaData` option is `false`, the value is `undefined`. 
        - `attributes`
        - `body`
        - `frontmatter`
npm package: @mryx/markdown-vetur
Description: simple parse markdown to vue component description for vetur auto-completion
Author: zhangshuai
Latest version: 2.0.3

# Mryx Markdown Vetur

将 .md 文件转换成能描述 vue 组件的 .json 文件，供 WebStorm 和 vscode 的 `vetur` 插件读取，从而可以在 vue 模版语法中拥有自动补全的功能。

## Install

#### NPM

```shell
npm i @mryx/markdown-vetur -D
```

#### YARN

```shell
yarn add @mryx/markdown-vetur --dev
```

## API

#### parseAndWrite

解析目录下所有匹配的文件，并输出为 tags.json 和 attributes.json

```ts
interface Options {
  // 需要解析的文件夹路径
  path: PathLike;
  // 文件匹配正则
  test: RegExp;
  // 输出目录
  outputDir: string;
  // 递归的目录最大深度
  maxDeep?: number;
  // 解析出来的组件名前缀
  tagPrefix?: string;
}
```
npm package: @mryx/stylelint-config
Description: stylelint config of mryx.
Latest version: 1.3.0

# Stylelint Config of Mryx

## Install

#### NPM

```shell
npm i @mryx/stylelint-config -D
```

#### YARN

```shell
yarn add @mryx/stylelint-config --dev
```

## Usage

```js
{
  "extends": ["@mryx/stylelint-config"]
}
```
npm package: @mryx/touch-emulator
Description: Mryx touch emulator
Latest version: 1.2.0

# Mryx Touch Emulator

在桌面端上模拟移动端 touch 事件，实现方式来自于 [hammerjs/touchemulator](https://github.com/hammerjs/touchemulator).

## Install

#### NPM

```shell
npm i @mryx/touch-emulator -S
```

#### YARN

```shell
yarn add @mryx/touch-emulator
```

## 使用指南

直接在代码中引入模块即可，模块会自动完成初始化并生效

```js
import '@mryx/touch-emulator';
```

## CDN 引入

```html
<script src="https://cdn.jsdelivr.net/npm/@mryx/touch-emulator"></script>
```
npm package: @mryx/use
Description: Mryx Composition API
Latest version: 0.0.9

# Mryx Use

Mryx Use 是 Mryx 团队提供的 Vue Composition API 库。

## 特性

- 从 Mryx 实际应用场景中沉淀
- 基于 TypeScript 开发，提供完备的类型定义
- 完善的单元测试，提供稳定性保障

## 安装

如果项目中已经安装了 Mryx 3，则无须手动安装 Mryx Use。

如果项目中未使用 Mryx，可以通过 `npm` 或 `yarn` 手动安装 Mryx Use。

```bash
# 通过 npm 安装
npm i @mryx/use -S

# 通过 yarn 安装
yarn add @mryx/use
```

## 贡献代码

修改代码请阅读我们的[开发指南](https://youzan.github.io/mryx/#/zh-CN/contribution)。

使用过程中发现任何问题都可以提 [Issue](https://github.com/youzan/mryx/issues) 给我们，当然，我们也非常欢迎你给我们发 [PR](https://github.com/youzan/mryx/pulls)。

## 开源协议

本项目基于 [MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89) 协议，请自由地享受和参与开源。
npm package: @mryx/waterfall
Description: mryx waterfall component
Latest version: 1.0.2

# Waterfall 瀑布流

### Install

#### NPM

```shell
npm i @mryx/waterfall -S
```

#### YARN

```shell
yarn add @mryx/waterfall
```

### 使用指南

#### 全局注册

```js
import Vue from 'vue';
import Waterfall from '@mryx/waterfall';

Vue.use(Waterfall);
```

#### 局部注册

如果你只是想在某个组件中使用`Waterfall`，可以在对应组件中注册`Waterfall`指令，这样只能在你注册的组件中使用`Waterfall`：

```js
import Waterfall from '@mryx/waterfall';

export default {
  directives: {
    WaterfallLower: Waterfall('lower'),
    WaterfallUpper: Waterfall('upper')
  }
};
```

### 代码演示

#### 基础用法
使用 `v-waterfall-lower` 监听滚动到达底部，并执行相应函数。若是函数执行中需要异步加载数据，可以将 `waterfall-disabled` 指定的值置为 true，禁止 `v-waterfall-lower` 监听滚动事件

注意：`waterfall-disabled` 传入的是 vue 对象中表示是否禁止瀑布流触发 key 值，类型是字符串

```html
<ul
  v-waterfall-lower="loadMore"
  waterfall-disabled="disabled"
  waterfall-offset="400"
>
  <li v-for="item in list">{{ item }}</li>
</ul>
```

```js
export default {
  data() {
    return {
      list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
      disabled: false
    };
  },

  directives: {
    WaterfallLower: Waterfall('lower')
  },

  methods: {
    loadMore() {
      this.disabled = true;
      setTimeout(() => {
        for (let i = 0; i < 5; i++) {
          this.list.push(this.list.length);
        }
        this.disabled = false;
      }, 200);
    }
  }
};
```

### API

| 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------|
| v-waterfall-lower | 滚动到底部, 触发执行的函数 | *Function* | - | - |
| v-waterfall-upper | 滚动到顶部, 触发执行的函数 | *Function* | - | - |
| waterfall-disabled | 在 vue 对象中表示是否禁止瀑布流触发的 key 值 | *string* | - | - |
| waterfall-offset | 触发瀑布流加载的阈值 | *number* | `300` | - |
npm package: @mrzaghar/node-currency-converter
Description: Node Currency Converter library unlimited requests no API needs
Author: MrZaghar
Latest version: 1.0.2

<div align="center">
<h1>Node Currency Converter</h1>
<p>Node Currency Converter library unlimited requests no API needs.</p>
    <a title="@mrzaghar/node-currency-converter" href="https://www.npmjs.com/package/@mrzaghar/node-currency-converter" target="_blank"><img src="https://img.shields.io/static/v1?label=npm&message=v.1.0.1&color=brightgreen" /></a>
</div>




### Installation

```bash
npm install @mrzaghar/node-currency-converter
```

### Usage

```javascript
const currencyConverter = new (require('@mrzaghar/node-currency-converter'))
```

```javascript
(async () => {
    var toGbp =await currencyConverter.from('USD').to('GBP').convert(300);
    
    // from USD to GBP
    console.log(toGbp.result) // 216.88
    console.log(toGbp.beautify) // £216.88

})()
```


### Example

```javascript
const currencyConverter = new (require('@mrzaghar/node-currency-converter'));
(async () => {
    var toGbp =await currencyConverter.from('USD').to('GBP').convert(300);
    var toEUR =await currencyConverter.from('GBP').to('EUR').convert(300);
    
    // from USD to GBP
    console.log(toGbp.result) // 216.88
    console.log(toGbp.beautify) // £216.88

    // from GBP to EUR
    console.log(toEUR.result) // 352.38
    console.log(toEUR.beautify) // €352.38

    // Convert from Bitcoin to USD
    var btcToUSD = await currencyConverter.from('BTC').to('USD').convert(1);

    console.log(btcToUSD.result) // 58855.9
    console.log(btcToUSD.beautify) // $58,855.90
})()


```
npm package: @mrzeddem/react-input
Description: A modern, customizable React input component with TypeScript support.
Author: Shaminas
Latest version: 0.1.2

# React Input Component

A modern, customizable React input component with TypeScript support.

## Features

- 🎨 Fully styled with Tailwind CSS
- 📱 Responsive design
- 🔒 Password toggle support
- ⌨️ Keyboard accessible
- 💪 TypeScript support
- 🎯 Error handling
- 🏷️ Label support

## Installation

```bash
npm install @mrzeddem/react-input
```

## Usage

```tsx
import { Input } from '@mrzeddem/react-input';

// Basic usage
<Input
  label="Username"
  placeholder="Enter your username"
  onChange={(e) => console.log(e.target.value)}
/>

// Password input with toggle
<Input
  type="password"
  label="Password"
  placeholder="Enter your password"
  showPasswordToggle
/>

// Input with error
<Input
  label="Email"
  placeholder="Enter your email"
  error="Please enter a valid email"
/>
```

## Props

The component accepts all standard HTML input props plus the following:

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| label | string | undefined | Label text above the input |
| error | string | undefined | Error message below the input |
| showPasswordToggle | boolean | false | Show/hide password toggle button |

## License

MIT
npm package: @mrzhiin/ga-beacon
Description: Google Analytics Beacon
Author: MrZhiin
Latest version: 0.2.0

# ga-beacon

Google Analytics Beacon

## 安装

使用 NPM 或 Yarn

```shell
npm i @mrzhiin/ga-beacon

yarn add @mrzhiin/ga-beacon
```

## 使用

```js
import GaBeacon from "@mrzhiin/ga-beacon";

const gab = new GaBeacon({
  tid: "", // Google Analytics 跟踪 ID
  proxy: "", // 后端地址
});
```

## 方法

### pageview

```js
gab.pageview();
```

发送页面浏览记录。在使用 React、Vue 时可能无法正确获取页面信息，例如网页标题等，此时可以主动传入参数

| 选项 | 类型   | 描述             |
| ---- | ------ | ---------------- |
| sr   | string | 屏幕分辨率       |
| vp   | string | 视口大小         |
| de   | string | 文档编码         |
| sd   | string | 屏幕颜色         |
| ul   | string | 用户语言         |
| dl   | string | 文档位置网址     |
| dt   | string | 文档标题         |
| tid  | string | 跟踪 ID          |
| ua   | string | 用户代理         |
| dr   | string | 文档引荐来源网址 |
| t    | string | 匹配类型         |

```js
gab.pageview({
  dt: "",
});
```
npm package: @mrzhiin/modis
Description: Comment service for web
Author: MrZhiin
Latest version: 2.0.3

# Modis

![npm (scoped)](https://img.shields.io/npm/v/@mrzhiin/modis)
![npm bundle size (scoped)](https://img.shields.io/bundlephobia/minzip/@mrzhiin/modis)

Comment service for web

## Getting Started

### Installation

Use NPM or Yarn

```shell
npm i @mrzhiin/modis

yarn add @mrzhiin/modis
```

Use Browser

- Full

```html
<script src="path/modis.js"></script>
```

- Lite

```html
<script src="//cdn.jsdelivr.net/npm/leancloud-storage@3.11.0/dist/av-min.js"></script>
<script src="path/modis.slim.js"></script>
```

### Usage

```html
<div id="modis"></div>
<script>
  new Modis({
    el: "#modis",
    backend: "leancloud",
    backendConfig: {
      appId: "",
      appKey: ""
    }
  });
</script>
```

## Options

| Option               | Type           | Description                                              | Default                            |
| -------------------- | -------------- | -------------------------------------------------------- | ---------------------------------- |
| `el`                 | string/Element | CSS selector or Element                                  |                                    |
| `locale`             | string         | Language                                                 | `zh-CN`                            |
| `gravatar`           | string         | Gravatar request URL                                     | `https://www.gravatar.com/avatar/` |
| `gravatarParameters` | string         | Gravatar request URL's combining parameters(Don't use s) | `?d=mp&s=60`                       |
| `pageSize`           | number         | Number of comment displayed per page                     | `10`                               |
| `pathnameGenerator`  | function       |                                                          |                                    |
| `theme`              | string         | Theme                                                    | `auto`                             |
| `backend`            | string         | Backend service                                          | `leancloud`                        |
| `backendConfig`      | object         | Backend service config                                   |                                    |

## Backend service

### leancloud

| Option   | Type    | Description          | Default |
| -------- | ------- | -------------------- | ------- |
| `appId`  | string  | Leancloud App appId  | ``      |
| `appKey` | string  | Leancloud App appKey | ``      |
| `spa`    | boolean |                      | `false` |

### valine

| Option   | Type    | Description          | Default |
| -------- | ------- | -------------------- | ------- |
| `appId`  | string  | Leancloud App appId  | ``      |
| `appKey` | string  | Leancloud App appKey | ``      |
| `spa`    | boolean |                      | `false` |

## [Document](https://modis.netlify.com/)
npm package: @mrzhov/create-app
Description: ## Install
Author: mrzhov
Latest version: 1.0.7

## This package is a cli for creating initial Frontend app.

## Install

1. Install the latest version of the package globally
```shell
npm i -g @mrzhov/create-app
```

2. Congratulation! Now you can use `@mrzhov/create-app`. Just type `create-app` in your terminal.
npm package: @mrzlanx532/nuxt-3-backoffice-ui
Description: Nuxt 3 backoffice components
Latest version: 0.1.7

## Готовые layouts

Находятся в папке `./playground/layouts`

## Темы

#### Как выставить тему?

```ts
// nuxt.config.ts
...
css: [
    '@mrzlanx532/nuxt-3-backoffice-ui/dist/runtime/assets/scss/themes/default.scss',
]
...
```

#### Доступные темы:
1. `default.scss`
2. `alt-1.scss`
3. `alt-2.scss`

## Правила построения архитектуры

#### Создание компонента формы (input, select и подобное)

1. При удалении (очищении) значения из компонента `update:modelValue` отправляет `null`
npm package: @mrzlanx532/nuxt-3-laravel-auth-module
Description: Laravel auth nuxt 3 module
Latest version: 0.0.31

# Конфигурация nuxt.config.js

```ts
export default defineNuxtConfig({
  laravelAuth: {
    domain: 'http://subdomain.domain',
    redirects: {
      auth: '/',
      guest: '/login',
    },
    endpoints: {
      login: 'managers/self/auth',
      logout: 'managers/self/logout',
      fetchUser: 'managers/self/detail',
      register: 'managers/self/register', // Опционально
    },
  },
})
```