open-index/open-npm huggingface dataset:
npm package: @saberlayer/avatar-upload
Description: A React avatar upload component with image crop feature based on Ant Design
Author: saberlayer
Latest version: 1.1.0

# @saberlayer/avatar-upload

一个基于 Ant Design 的头像上传组件，支持图片裁剪功能。

## 更新日志

### v1.1.0
- 优化文件结构，统一构建输出到 dist 目录
- 简化包体积，移除冗余文件
- 保持对 CommonJS、ES Module 和 UMD 的完整支持
- 优化 TypeScript 类型声明文件位置

## 安装

```bash
npm install @saberlayer/avatar-upload
# 或
yarn add @saberlayer/avatar-upload
```

## 使用方法

支持多种导入方式：

### ES Modules

```jsx
import { AvatarUpload } from '@saberlayer/avatar-upload';
import '@saberlayer/avatar-upload/dist/index.css';
```

### CommonJS

```jsx
const { AvatarUpload } = require('@saberlayer/avatar-upload');
require('@saberlayer/avatar-upload/dist/index.css');
```

### UMD

```html
<link rel="stylesheet" href="https://unpkg.com/@saberlayer/avatar-upload/dist/index.css" />
<script src="https://unpkg.com/@saberlayer/avatar-upload/dist/index.umd.js"></script>
```

### 使用示例

```jsx
import React from 'react';
import { AvatarUpload } from '@saberlayer/avatar-upload';
import '@saberlayer/avatar-upload/dist/index.css';

const App = () => {
  const handleChange = (url) => {
    console.log('头像地址：', url);
  };

  return (
    <AvatarUpload
      value="https://example.com/avatar.jpg"
      onChange={handleChange}
      maxSize={2} // 最大文件大小，单位MB，默认2MB
    />
  );
};

export default App;
```

## API

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| value | 头像URL | string | - |
| onChange | 头像变化时的回调函数 | (url: string) => void | - |
| maxSize | 最大文件大小，单位MB | number | 2 |

## 特性

- 支持图片上传
- 支持图片裁剪
- 支持预览
- 支持文件大小限制
- 支持 JPG/PNG 格式
- 美观的 UI 界面
- 支持 TypeScript
- 支持 Tree Shaking
- 支持多种模块规范（ES Module/CommonJS/UMD）

## 开发

```bash
# 安装依赖
npm install

# 开发模式
npm run dev

# 构建
npm run build
```

## License

MIT 

## 目录结构

```
dist/
  ├── index.cjs.js      # CommonJS 版本
  ├── index.cjs.js.map
  ├── index.esm.js      # ES Module 版本
  ├── index.esm.js.map
  ├── index.umd.js      # UMD 版本
  ├── index.umd.js.map
  ├── index.d.ts        # TypeScript 类型声明
  └── index.css         # 样式文件
```
npm package: @saberlayer/vue3-phone-formatter
Description: Vue 3 手机号格式化组件
Latest version: 1.0.5

# Vue 3 手机号格式化组件

一个优雅的 Vue 3 手机号格式化组件，支持自动格式化、数字验证和美观的边框效果。

## 特性

- 📱 自动格式化手机号为 AAA-BBBB-CCCC 格式
- 🎨 每个数字都有独立的边框效果
- 🔒 只允许输入数字
- 📦 支持 ESM 和 CommonJS 两种模块格式
- 🔍 完整的 TypeScript 类型支持
- 🎯 零依赖，轻量级

## 安装

```bash
npm install vue3-phone-formatter
# 或者
yarn add vue3-phone-formatter
# 或者
pnpm add vue3-phone-formatter
```

## 使用方法

### 全局注册

```javascript
import { createApp } from 'vue'
import { PhoneFormatter } from 'vue3-phone-formatter'

const app = createApp(App)
app.component('PhoneFormatter', PhoneFormatter)
app.mount('#app')
```

### 局部注册

```vue
<template>
  <PhoneFormatter v-model="phoneNumber" />
</template>

<script setup>
import { PhoneFormatter } from 'vue3-phone-formatter'
import { ref } from 'vue'

const phoneNumber = ref('')
</script>
```

## 自定义样式

你可以通过覆盖以下 CSS 类来自定义样式：

```css
.phone-formatter {
  /* 容器样式 */
}

.phone-input {
  /* 输入框样式 */
}

.digit-box {
  /* 数字框样式 */
}
```

## 属性

| 属性名 | 类型 | 默认值 | 描述 |
|--------|------|--------|------|
| modelValue | String | '' | 输入值，支持 v-model |

## 事件

| 事件名 | 参数 | 描述 |
|--------|------|------|
| update:modelValue | (value: string) | 当输入值改变时触发 |

## 示例

### 基础用法

```vue
<template>
  <div class="app">
    <h1>手机号格式化示例</h1>
    <PhoneFormatter v-model="phoneNumber" />
    <p>当前输入：{{ phoneNumber }}</p>
  </div>
</template>

<script setup>
import { PhoneFormatter } from 'vue3-phone-formatter'
import { ref } from 'vue'

const phoneNumber = ref('')
</script>

<style>
.app {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
}
</style>
```

### 自定义样式

```vue
<template>
  <PhoneFormatter class="custom-formatter" />
</template>

<style>
.custom-formatter .digit-box {
  background-color: #f0f0f0;
  border-color: #666;
  color: #333;
}

.custom-formatter .phone-input {
  border: 2px solid #666;
  border-radius: 8px;
  padding: 8px;
}
</style>
```

## 浏览器支持

- Chrome >= 87
- Firefox >= 78
- Safari >= 14
- Edge >= 88

## 许可证

MIT

## 贡献

欢迎提交 Issue 和 Pull Request！

## 作者

[你的名字]

## 更新日志

### 1.0.0

- 初始版本发布
- 支持基本的手机号格式化功能
- 添加边框效果
- 支持 ESM 和 CommonJS
- 添加 TypeScript 支持
npm package: @sabertazimi/mass
Description: A minimal sass-based UI library
Author: sabertazimi
Latest version: 0.0.10

# mass

[![Build Status](https://travis-ci.org/sabertazimi/mass.svg?branch=master)](https://travis-ci.org/sabertazimi/mass)

A minimal sass-based UI library - [mass.css](https://sabertazimi.github.io/mass)

## Documentation

- [mass.css documentation](https://sabertazimi.github.io/mass)
- [Sass API documentation](https://sabertazimi.github.io/mass/api)

## Structure

- `build`: for `exmaples` building result
- `lib`: for `src` building result (publish to npm)

## Development

```bash
npm install
npm start
```

## Component

### Container

#### Normal Container

`.container`

#### Text Container

`.text-container`

#### Grid Container

`.grid-container`

#### Flex Container

`.flex-container`

## Reference

- [Sass Boilerplate](https://github.com/HugoGiraudel/sass-boilerplate)
- [normalize.css](https://github.com/Alsiso/normalize-zh)
- [Typography](https://medium.com/codyhouse/create-your-design-system-part-1-typography-7c630d9092bd)
- [Web Typography Resources](https://betterwebtype.com/web-typography-resources)
- [Open Color](https://yeun.github.io/open-color)
- [Media Query for Responsive Design](https://medium.freecodecamp.org/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862)
- [Grid System](https://medium.com/codyhouse/create-your-design-system-part-2-grid-layout-aa961d59b8d6)
npm package: @sabertazimi/vitepress
Description: Vite & Vue powered static site generator
Author: Evan You
Latest version: 0.17.0

# (WIP) VitePress 📝💨

[![Test](https://github.com/vuejs/vitepress/workflows/Test/badge.svg)](https://github.com/vuejs/vitepress/actions)
[![npm](https://img.shields.io/npm/v/vitepress)](https://www.npmjs.com/package/vitepress)

---

**:fire: Note this is early WIP! Currently the focus is on making Vite stable and feature complete first. It is not recommended to use this for anything serious yet.**

---

VitePress is [VuePress](http://vuepress.vuejs.org/)' little brother, built on top of [vite](https://github.com/vuejs/vite).

## Documentation

To check out docs, visit [vitepress.vuejs.org](https://vitepress.vuejs.org).

## Changelog

Detailed changes for each release are documented in the [release notes](https://github.com/vuejs/vitepress/releases).

## Contribution

Please make sure to read the [Contributing Guide](./.github/contributing.md) before making a pull request.

## License

[MIT](https://opensource.org/licenses/MIT)

Copyright (c) 2019-present, Yuxi (Evan) You
npm package: @sabier/ms
Description: Milliseconds conversion
Author: sabier
Latest version: 1.0.0

# ms

Convert string to milliseconds.

## Install

```sh
$ npm install @sabier/ms
```

## Examples

```js
const { ms } = require('@sabier/ms')

ms('1h') // 3600000
ms('2h 30m') // 9000000
ms('3d 4h', true) // { name: '3 days, 4 hours', value: 273600000 }
ms('Hello world!', true) // null
```

## License

[MIT © Cristo](./LICENSE.md)
npm package: @sabin411/api_hook
Description: ## Overview
Latest version: 1.0.1

# Query Hook CLI

## Overview

This CLI tool allows developers to easily create query or mutation hooks that integrate React Query and Axios, while ensuring proper type safety. The primary goal of this CLI is to provide a boilerplate setup for creating hooks, minimizing repetitive tasks and allowing developers to focus on specific logic or customizations. With minimal tweaks, developers can generate ready-to-use hooks effortlessly.

---

## Features

- Seamless integration with React Query and Axios.
- Auto-generated hooks with proper type definitions.
- Simplifies repetitive setup tasks for developers.
- Configurable paths for imports and exports.

---

## Installation

Install the CLI globally on your device:

```bash
npm install -g query-hook-cli
```

---

## Configuration

1. Create a JSON file named `hookApi.json` in your project root directory.
2. Configure the JSON file as follows:

```json
{
  "importPath": {
    "typeScript": "@/types",
    "service": "@/services",
    "hook": "@/hooks"
  },
  "exportPath": {
    "typeScript": "/types",
    "service": "/services",
    "hook": "/hooks/apiHooks"
  }
}
```

- **`importPath`**: Specifies the paths to import dependencies like types, services, and hooks.
- **`exportPath`**: Specifies the paths where generated files will be placed.

---

## Usage

To create a new hook, simply run the following command:

```bash
ah -c
```

The CLI will guide you through a series of prompts to gather information about your hook and generate the required files.

---

## Example Workflow

1. Configure the `hookApi.json` file as shown above.
2. Run the CLI using the command `ah -c`.
3. Follow the prompts to specify details like:
   - Hook name
   - Service name
   - TypeScript file for type definitions
   - API endpoint and method
4. The CLI generates a fully functional hook with minimal effort.

---

## Benefits

- Saves development time by automating boilerplate creation.
- Ensures consistency across hooks.
- Simplifies integration with React Query and Axios.

---

Feel free to extend or customize this CLI as per your project's requirements. Happy coding! 🚀
npm package: @sabinayakc/tui-image-editor
Description: TOAST UI Component: ImageEditor
Author: Sabinaya KC
Latest version: 1.0.9

# Fork of Tui-Image-Editor
`npm install @sabinayakc/tui.image-editor`

## Added Functionalities
- Zoom
- Pan
- Undo/Redo Data
- Arrow Shape
- Resize

### Zoom 
`setZoom(value: number, reset: boolean = false);` 

- value > 1 & value < n 
- reset = true (resets zoom and transform) 

### Pan
- Listen to image panned event. 
```
imageEditor.on(
    imagePanned: (pan) => { 
        if (pan.x) {
          //If Pan.X is true, this means the width of image is not inside pan boundary
        }
        if (pan.y) {
          //If Pan.Y is true, this means the height of image is not inside pan boundary
        }
      }
   );
```  
- Hold Shift Key + Mouse Drag (Zoom must be greater than 1) to pan the image. 

### Undo/Redo Data
`imageEditor.undo().then(undoData => console.log(undoData));`
`imageEditor.redo().then(redoData => console.log(redoData));`

- Useful for updating UI to last redo or undo change. 

### Arrow Shape
- New arrow shape type. 
` imageEditor.setDrawingShape('arrow');`
- To create an arrow, click on the canvas to create the arrow orign and drag the mouse to where you want the arrow to point. 

### Resize 
`imageEditor.resize({width: 640, height : 480})`
- Listen to image resized event
`imageEditor.on(imageResized: img => console.log('Resized image', img));`
npm package: @sabios/vue-translations-extractor
Description: extract words into vue files to send to a template pot file
Author: Sabios
Latest version: 1.3.0

# vue-translations-extractor

[NPM](https://www.npmjs.com/package/vue-translations-extractor)

## Introduction
Project goal is to get words into the attributes and functions of vue files to send to a template pot file

## Installation
```
npm install @sabios/vue-translations-extractor
```

## Usage
```
$ node ./node_modules/@sabios/vue-translations-extractor -o TEMPLATE.pot -s SOURCE -s ANOTHER_SOURCE
```
* TEMPLATE.pot: location of template.pot file
* SOURCE/ANOTHER_SOURCE: src of vue files

## Examples of code that will be extracted from vue files
HTML
```
<div v-translate="'key1'"></div>
<input :placeholder="$t('key2')">
<div>{{$t('key3')}}</div>
```
JS
```
{
    data() {
        foo: this.$t('key')
    }
}
```

## All credits go to
* [lukasgeiter](https://github.com/lukasgeiter) for create a great library [gettext-extractor](https://github.com/lukasgeiter/gettext-extractor)
* [paumoreno](https://github.com/paumoreno) for the [gist](https://gist.github.com/paumoreno/cdfa14942424e895168a269a2deef1f3)
* [mathvaleriano](https://github.com/mathvaleriano) for update code enable another parsers and more