open-index/open-npm huggingface dataset:
npm package: @mmt817/pixel-ui
Description: Pixel-UI Components library by Vue3 + TS
Author: mmt817
Latest version: 1.6.0

# 🐱 Pixel UI

> 🧱 A Retro Pixel-Style Component Library for Vue 3, Powered by TypeScript & CSS Houdini

<div align="center">

[![npm](https://img.shields.io/npm/v/@mmt817/pixel-ui)](https://www.npmjs.com/package/@mmt817/pixel-ui)
[![node](https://img.shields.io/badge/node-%20%3E%3D%2018-47c219)](https://github.com/maomentai817/pixel-ui)
[![downloads](https://img.shields.io/npm/dw/@mmt817/pixel-ui)](https://www.npmcharts.com/compare/@mmt817/pixel-ui)

</div>

<p align="center">Pixel UI - A Vue 3 UI library</p>

Pixel UI 是一个基于 **Vue 3** + **TypeScript** + **CSS Houdini** 打造的像素风组件库。  
从像素边框到复古字体, 力求还原游戏机时代的像素艺术，  
为现代 Web 应用注入复古科技感 🎮✨。

---
## 🌐 浏览器支持

Pixel UI 基于 CSS Houdini 实现像素风格渲染, 因此要求浏览器支持 Paint Worklet (`CSS.paintWorklet`) 能力

[![caniuse](https://img.shields.io/badge/caniuse-orange)](https://caniuse.com/?search=paint)

[![兼容表格](https://img.shields.io/badge/兼容表格-orange)](https://ishoudinireadyyet.com/?mode=light)

> **⚠️ 实验性警告**  
> `CSS.paintWorklet` 静态属性是一项**实验性技术**，在将其用于生产之前，请仔细检查[浏览器兼容性表格](https://ishoudinireadyyet.com/?mode=light)

> **🚨 安全上下文要求**  
> 此项功能仅在一些支持的浏览器的安全上下文 (HTTPS、localhost) 中可用。

## 📦 安装 Installation

```bash
# 使用 npm
npm i @mmt817/pixel-ui

# 或使用 pnpm / yarn
pnpm add @mmt817/pixel-ui
yarn add @mmt817/pixel-ui
```

## 🚀 项目启动 Quick Start

```bash
# 1. 安装依赖
pnpm i 

# 2. 项目打包
# 注意: 这里是对 hooks 及 components 分包进行打包, 请预先检查 libs 下插件是否已有打包
pnpm build

# 3. 项目运行
pnpm dev  # 启动 playground
pnpm docs:dev # 启动 vitepress 文档
pnpm docs:storybook # 启动 storybook

# 其他
pnpm test # 对 utils, hooks, components 分包进行单元测试
```

---

## ✨ 特性 Highlights

- 🎨 **Pixel-Art 风格渲染**  
  使用 CSS Houdini Paint Worklet 实现像素化边框、阴影、装饰等复古风格特效

- 🧩 **Vue 3 + TypeScript 全面支持**  
  使用 Composition API 与类型推导提升 DX，支持智能提示与类型校验

- 💡 **CSS 自定义属性调控**  
  可动态配置像素大小、颜色主题、边角样式，打造专属 UI 风格

- 🧪 **100% 覆盖率的单元测试**  
  每个组件都经过 Vitest 驱动的严格测试，保障稳定性与可维护性

- 📦 **Tree-shakable 与按需加载**  
  支持全量引入与 ES Module 按需加载，极致优化打包体积

- 📖 **双文档系统：VitePress + Storybook**  
  Markdown 文档 + 组件交互演示，一站式了解与使用

## 🔗 链接 Links

- [首页](https://maomentai817.github.io/pixel-ui/)
- [图标库](https://pixeliconlibrary.com/)
- [部分样式参考](https://nostalgic-css.github.io/NES.css/#)
- [paintWorklet 学习](https://jerosoler.github.io/css-houdini-pixel-box/)
- [MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/CSS/paintWorklet_static)

| 副产物 | 状态 | 描述 |
| --- | --- | --- |
| super-gif | [![npm](https://img.shields.io/npm/v/@mmt817/super-gif)](https://github.com/maomentai817/super-gif) | GIF 帧控制器 |


## 🖋️ 字体 Fonts

Pixel UI 采用以下字体

| Language  | Font                                                               |
| --------- | ------------------------------------------------------------------ |
| English   | [![PS2P](https://img.shields.io/badge/PS2P-n)](https://fonts.google.com/specimen/Press+Start+2P) |
| Chinese   | [![Zpix(最像素)](https://img.shields.io/badge/Zpix(最像素)-n)](https://github.com/SolidZORO/zpix-pixel-font)      |
npm package: @mmt817/super-gif
Description: @wizpanda/super-gif 的一个分支
Author: Shashank Agrawal
Latest version: 0.0.1

## @wizpanda/super-gif 的一个分支
[super-gif](https://github.com/wizpanda/super-gif/tree/master)

## 使用方法

```shell
npm install @mmt817/super-gif
```

## 功能
在 `super-gif` 的基础上, 修改 `SuperGif` 构造函数及 `init()` 方法, 使其接受一个 `canvas` 元素实例
npm package: @mmtdigital/stylelint-config
Description: MMT Digital's base stylelint config
Author: MMT Digital
Latest version: 1.0.4

# stylelint-config
![MMT-Digital](https://img.shields.io/badge/MMT-Digital-red.svg?style=flat-square) 
[![NPM version][npm-image]][npm-url]

All documentation for MMT repos and npm packages is located here: http://docs.mmt.digital

## Contribution & Changes
If you would like to suggest a change to a linting rule, please raise a Github issue here: https://github.com/MMTDigital/stylelint-config/issues

[npm-image]: https://img.shields.io/npm/v/@mmtdigital/stylelint-config.svg?style=flat-square
[npm-url]: https://www.npmjs.com/package/@mmtdigital/stylelint-config
npm package: @mmuehlberger/react-scripts
Description: Configuration and scripts for Create React App with Tailwind CSS.
Latest version: 3.0.2

# react-scripts

This package includes scripts and configuration used by [Create React App](https://github.com/facebook/create-react-app).<br>
Please refer to its documentation:

- [Getting Started](https://facebook.github.io/create-react-app/docs/getting-started) – How to create a new app.
- [User Guide](https://facebook.github.io/create-react-app/) – How to develop apps bootstrapped with Create React App.
npm package: @mmusa/hsl-to-hex
Description: Convert HSL colors to RGB colors in hex format.
Author: Mohammad Musa
Latest version: 1.0.1

# hsl-to-hex

Convert HSL colors to RGB colors in hex format.

## Install 

```sh
npm install --save @mmusa/hsl-to-hex
```

## API

```
require('hsl-to-hex') => Function
hsl(hue, saturation, luminosity)` => String
```

## Example

```js
var hsl = require('hsl-to-hex')
var hue = 133
var saturation = 40
var luminosity = 60
var hex = hsl(hue, saturation, luminosity)
console.log(hex) // #70c282
```

## License

ISC
npm package: @mmuscat/angular-auto
Description: Auto decorators for Angular
Latest version: 0.1.3

# Auto decorators for Angular

```ts
@Auto()
@Component({
   template: `{{ count }}`,
   changeDetection: ChangeDetectionStrategy.OnPush,
})
export class MyComponent {
   @Input()
   count = 0;

   object = new Resource()

   @Subscribe()
   autoIncrement = interval(1000).pipe(
      tap((value) => this.count = value + 1)
   );

   @Unsubscribe()
   subscription = new Subscription();

   ngOnInit() {
      console.log("I am called!")
   }
}
```

```ts
@Auto()
export class Resource {
   private http = inject(HttpClient)

   @Check()
   value

   ngOnInit() {
      console.log("I am also called!")
   }

   fetch(params) {
      this.http.get(endpoint, params)
         .subscribe((value) => this.value = value)
   }
}
```

## Decorators

### `Auto`

Automatically compose the decorated class. Lifecycle hooks cascade to any `Auto` decorated object created inside a field initializer or class constructor.

### `Check`

Automatically check the decorated value during `ngDoCheck` and mark the view dirty when it changes. Use with `OnPush` change detection strategy.

### `Subscribe`

Automatically subscribe to the decorated observable during `ngDoCheck` and mark the view dirty whenever a value is emitted. Use with `OnPush` change detection strategy.
Assigning new values will automatically cancel the previous subscription. Subscriptions are automatically unsubscribed when the context is destroyed.

### `Unsubscribe`

Automatically unsubscribe the decorated subject or subscription during `ngOnDestroy`. You must still manually call `complete` and/or `unsubscribe` before assigning a new value to prevent memory leaks.
npm package: @mmuscat/angular-composition-api
Description: Composition model for reactive Angular applications.
Latest version: 0.1309.0

# Angular Composition API

Composition model for functional reactive Angular applications.

**Features**

-  Small bundle size (4kb min gzipped)
-  Minimal API
-  Granular change detection
-  Better-than `OnPush` performance
-  Optional Zone.js
-  Observable inputs and queries
-  Reactive two-way bindings
-  Composable components, directives and services
-  Composable providers
-  Composable subscriptions
-  Lifecycle hooks
-  Computed values
-  Automatic teardown
-  RxJS interop (v6 and v7)
-  Incrementally adoptable

**What it looks like**

```ts
function setup() {
   const service = inject(Service)
   const count = use(0)

   subscribe(count, () => {
      service.log(count.value)
   })

   return {
      count,
   }
}

@Component({
   inputs: ["count"],
})
export class MyComponent extends ViewDef(setup) {}
```

## Quick Start

[Install via NPM](https://www.npmjs.com/package/@mmuscat/angular-composition-api)

```bash
npm install @mmuscat/angular-composition-api
```

[Install via Yarn](https://yarnpkg.com/package/@mmuscat/angular-composition-api)

```bash
yarn add @mmuscat/angular-composition-api
```

### Setup

Provide `ZonelessEventManager` in your root module. This is required
for proper change detection in event handlers.

```ts
@NgModule({
   providers: [
      {
         provide: EventManager,
         useClass: ZonelessEventManager,
      },
   ],
})
export class AppModule {}
```

## Api Reference

[Read the docs](https://mmuscat.github.io/angular-composition-api/docs/intro)
npm package: @mmuscat/angular-error-boundary
Description: Error Boundaries for Angular, with a bit of Suspense.
Latest version: 0.1300.1

# Angular Error Boundary

[Error Boundaries](https://reactjs.org/docs/error-boundaries.html) for Angular, with a bit of [Suspense](https://reactjs.org/docs/concurrent-mode-suspense.html). Click here to [Learn More](https://mmuscat.github.io/angular-composition-api/docs/boundary/setup)

## Quick Start

Install via NPM

```bash
npm install @mmuscat/angular-error-boundary
```

Install via Yarn

```bash
yarn add @mmuscat/angular-error-boundary
```

Add `BoundaryModule` to your `NgModule` imports to enable error boundaries.

**my.module.ts**

```ts
@NgModule({
    imports: [BoundaryModule],
    declarations: [MyComponent],
    ...
})
export class MyModule {}
```

Add error boundaries to your components.

**my.component.html**

```html
<error-boundary>
   <ng-template>
      <my-widget></my-widget>
   </ng-template>
   <fallback>Something went wrong</fallback>
</error-boundary>
```
npm package: @mmuscat/angular-phalanx
Description: Atomic states for Angular Composition API
Latest version: 0.1309.0

# Angular Phalanx

Atomic state management for Angular Composition API. [Learn More](https://mmuscat.github.io/angular-composition-api/docs/store/intro)

---

## Quick Start

Install via NPM

```bash
npm install @mmuscat/angular-phalanx
```

Install via Yarn

```bash
yarn add @mmuscat/angular-phalanx
```

## API Reference

[Read the docs](https://mmuscat.github.io/angular-composition-api/docs/store/intro)
npm package: @mmussadiq/react-search-bar
Description: Material style search bar
Author: Wertarbyte
Latest version: 2.0.0

# Material Search Bar

![Example](demo.gif)

See this component in [action](https://teamwertarbyte.github.io/material-ui-search-bar/)

## Installation

```shell
npm i --save material-ui-search-bar
```

Note: If you're still using Material-UI v3, please install v0.x of the search bar using `npm i --save material-ui-search-bar@beta`

## Usage

The `SearchBar` is a _controlled input_, meaning that _you_ need to keep the input state. This allows for much flexibility, e.g. you can change and clear the search input just by changing its props.

```js
import SearchBar from "material-ui-search-bar";
// *snip*

return (
  <SearchBar
    value={this.state.value}
    onChange={(newValue) => this.setState({ value: newValue })}
    onRequestSearch={() => doSomethingWith(this.state.value)}
  />
);
```

### SearchBar Properties

| Name            | Type     | Default                                       | Description                                             |
| --------------- | -------- | --------------------------------------------- | ------------------------------------------------------- |
| cancelOnEscape  | `bool`   |                                               | Whether to clear search on escape                       |
| classes\*       | `object` |                                               | Override or extend the styles applied to the component. |
| className       | `string` | `''`                                          | Custom top-level class                                  |
| closeIcon       | `node`   | `<ClearIcon style={{ color: grey[500] }} />`  | Override the close icon.                                |
| disabled        | `bool`   | `false`                                       | Disables text field.                                    |
| onCancelSearch  | `func`   |                                               | Fired when the search is cancelled.                     |
| onChange        | `func`   |                                               | Fired when the text value changes.                      |
| onRequestSearch | `func`   |                                               | Fired when the search icon is clicked.                  |
| placeholder     | `string` | `'Search'`                                    | Sets placeholder text for the embedded text field.      |
| searchIcon      | `node`   | `<SearchIcon style={{ color: grey[500] }} />` | Override the search icon.                               |
| style           | `object` | `null`                                        | Override the inline-styles of the root element.         |
| value           | `string` | `''`                                          | The value of the text field.                            |

\* required property

Any other properties supplied will be spread to the underlying [`Input`](https://material-ui.com/api/input/#input) component.

## License

The files included in this repository are licensed under the MIT license.
npm package: @mmutils/common
Description: Common reusable, typed, JavasScript utility functions built with TypeScript.
Author: Tihomir Trifonov
Latest version: 0.0.1

# Common JavaScript utility functions (npn)

Collection of reusable, typed, JavaScript utility functions built with TypeScript.

## Installation

### Install the package

```sh
npm install @mmutils/common
# or
yarn add @mmutils/common
```

### Load as module

```javascript
import { parsePath, parsedPathAsDir } from '@mmutils/common';
// or
import { parsePath, parsedPathAsDir } from '@mmutils/common/esm/';
```

### Load as commonjs

```javascript
const { parsePath, parsedPathAsDir } = require('@mmutils/common');
// or
const { parsePath, parsedPathAsDir } = require('@mmutils/common/cjs/');
```

## Changelog

### v0.0.1

Initial release.

## Usage

### `ParsedPathType`

Parsed path object type constant.

### `parsePath`

Parse path elements and make logical assumptions if it's dir, file or identifier. If it's not a dir nor a file it must be an identifier.

**examples**

```typescript
// windows output
console.log(parsePath('./some.relative.dir/with/file.jpg'));
{
  type: 'file',
  basePath: 'some.relative.dir\\with\\',
  baseName: 'file',
  extension: 'jpg',
  name: 'file.jpg',
  parent: [Getter]
}
console.log(parsePath('./some.relative.dir/with/dir/'));
{
  type: 'dir',
  basePath: 'some.relative.dir\\with\\',
  baseName: 'dir',
  extension: '',
  name: 'dir',
  parent: [Getter]
}
console.log(parsePath('./some.relative.dir/with/identifier'));
{
  type: 'identifier',
  basePath: 'some.relative.dir\\with\\',
  baseName: 'identifier',
  extension: '',
  name: 'identifier',
  parent: [Getter]
}
```

### `parsedPathAsDir`

Convert node parsed path object file to base dir.

## License

This project is licensed under the MIT License.
npm package: @mmyhs/vueuse
Description: 该插件提供常用的vue指令、hooks。
Author: mmyhs
Latest version: 0.0.5

# @mmyhs/vueuse

该插件提供常用的vue指令、hooks。

## Hooks
### useWebSocket
```js
const websocket = useWebSocket("ws://127.0.0.1:9501/asd3424");

// 发送消息
websocket.sendMessage("你好").then(res => {
  console.log(res)
})
```


## 指令


### v-waterMarker

提供背景水印的指令

| 参数  | 说明                          |
| ----- | ----------------------------- |
| text  | 水印文本信息                  |
| font  | 水印字体                      |
| color | 水印颜色                      |
| align | 对齐方式（left,center,right） |

使用案例

```vue
<template>
	<div class="demo-container" v-waterMarker="waterMarker">看，这是水印</div>
</template>

<script lang="ts">
import { ref } from 'vue';

const waterMarker = ref({
  text: "mmyhs 2023-02-07"
})
</script>

<style lang="scss" scoped>
    .demo-container{
        width: 100vw;
  		height: 100vh;
    }
</style>
```



### v-copy

提供复制文本的指令

接收参数：字符串类型

使用案例

```vue
<template>
	<div class="demo-container" v-copy="text">点击复制文本信息</div>
</template>

<script lang="ts">
import { ref } from 'vue';

const text = ref("需要复制的文本信息");
</script>

<style lang="scss" scoped>
    .demo-container{
        width: 100vw;
  		height: 100vh;
    }
</style>
```



### v-debounce

按钮防抖指令，无论点击多少次，在 500ms 内只响应最后一次点击事件

接收参数：function类型

使用案例

```vue
<template>
	<div class="demo-container">
    	<button v-debounce="debounceClick">防抖提交</button>
    </div>
</template>

<script lang="ts">
import { ref } from 'vue';
    
const debounceClick = () => {
  console.log("debounceClick")
  if (Math.random() > 0.5) {
    console.log("success");
  } else {
    console.log("fail");
  }
}
</script>

<style lang="scss" scoped>
    .demo-container{
        width: 100vw;
  		height: 100vh;
    }
</style>
```



### v-throttle

按钮节流指令，防止按钮在短时间内被多次点击，使用节流函数限制规定时间内只能点击一次

接收参数：function类型

使用案例

```vue
<template>
	<div class="demo-container">
    	<button v-throttle="throttleClick">防抖提交</button>
        <button v-throttle="throttleClick2">防抖提交(Promise)</button>
    </div>
</template>

<script lang="ts">
import { ref } from 'vue';
    
const throttleClick = () => {
  console.log("throttleClick")
  if (Math.random() > 0.5) {
    console.log("success");
  } else {
    console.log("fail");
  }
}

const throttleClick2 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (Math.random() > 0.5) {
        console.log("success");
        resolve("success");
      } else {
        console.log("fail")
        reject("fail");
      }
    }, 1000)
  })
}
</script>

<style lang="scss" scoped>
    .demo-container{
        width: 100vw;
  		height: 100vh;
    }
</style>
```



### v-draggable

拖拽指令，可在父元素区域任意拖拽元素（要求其父元素为relative）

使用案例

```vue
<template>
	<div class="demo-container" v-draggable>
    	<span v-draggable>试试拖动我</span>
    </div>
</template>

<script lang="ts">
import { } from 'vue';

</script>

<style lang="scss" scoped>
    .demo-container{
        width: 100vw;
  		height: 100vh;
    }
</style>
```
npm package: @mmyoji/object-validator
Description: Zero dependency, simple object validator library
Author: mmyoji
Latest version: 0.0.5

# object-validator

This is a learn-to-code repo. Production use is not recommended.

If you need a practical validation library, use [Yup](https://www.npmjs.com/package/yup) or [Zod](https://www.npmjs.com/package/zod) instead.

Breaking changes are often added during v0.

## Installation

```
$ npm install @mmyoji/object-validator
```

## Usage

```ts
import { initValidator } from "@mmyoji/object-validator";

type TargetObject = {
  name: string;
  age: number;
  isAdmin?: boolean;
};

const validate = initValidator<TargetObject>({
  name: {
    type: "string",
    required: true,
    minLength: 3,
  },
  age: {
    type: "number",
    required: true,
    min: 18,
    max: 65,
  },
  isAdmin: {
    type: "boolean",
  },
});

const errors = validate({
  name: "a",
  count: 22,
  isAdmin: true,
});
console.log(errors);
//=> [{key:"name",message:"name is too short. It must be 3 length at least."}]
```
npm package: @mmyung-npm/learnstorybook-design-system
Description: Storybook design systems tutorial
Author: Minhee Myung
Latest version: 0.1.0

# Storybook design system tutorial

The Storybook design system tutorial is a subset of the full [Storybook design system](https://github.com/storybookjs/design-system/), created as a learning resource for those interested in learning how to write and publish a design system using best in practice techniques.

Learn more in [Storybook tutorials](https://storybook.js.org/tutorials/).