open-index/open-npm huggingface dataset:
npm package: @ovyn/ng-form
Description: This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.2.0.
Author: Flavian Ovyn
Latest version: 0.0.1

# Form

This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.2.0.

## Code scaffolding

Angular CLI includes powerful code scaffolding tools. To generate a new component, run:

```bash
ng generate component component-name
```

For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:

```bash
ng generate --help
```

## Building

To build the library, run:

```bash
ng build form
```

This command will compile your project, and the build artifacts will be placed in the `dist/` directory.

### Publishing the Library

Once the project is built, you can publish your library by following these steps:

1. Navigate to the `dist` directory:

   ```bash
   cd dist/form
   ```

2. Run the `npm publish` command to publish your library to the npm registry:
   ```bash
   npm publish
   ```

## Running unit tests

To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:

```bash
ng test
```

## Running end-to-end tests

For end-to-end (e2e) testing, run:

```bash
ng e2e
```

Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.

## Additional Resources

For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
npm package: @ovyn/ng-menu
Description: This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.2.0.
Author: Flavian Ovyn
Latest version: 0.2.1

# Menu

This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.2.0.

## Code scaffolding

Angular CLI includes powerful code scaffolding tools. To generate a new component, run:

```bash
ng generate component component-name
```

For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:

```bash
ng generate --help
```

## Building

To build the library, run:

```bash
ng build menu
```

This command will compile your project, and the build artifacts will be placed in the `dist/` directory.

### Publishing the Library

Once the project is built, you can publish your library by following these steps:

1. Navigate to the `dist` directory:

   ```bash
   cd dist/menu
   ```

2. Run the `npm publish` command to publish your library to the npm registry:
   ```bash
   npm publish
   ```

## Running unit tests

To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:

```bash
ng test
```

## Running end-to-end tests

For end-to-end (e2e) testing, run:

```bash
ng e2e
```

Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.

## Additional Resources

For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
npm package: @ovyvo/cli-utils
Description: cli-utils
Author: vue12306@163.com
Latest version: 1.0.0

## 脚手架工具函数

## 安装

```bash
npm install @ovyvo/cli-utils
// or
yarn add @ovyvo/cli-utils
// or
pnpm add @ovyvo/cli-utils
```

## 使用

```bash
const u from "@ovyvo/cli-utils";
u.cPrimary('hello')
```

## 工具列表

- chalk模块：控制台打印带颜色的字符串
  | 函数 | 参数 | 描述 | 备注 |
  |--|--|--|--|
  | cPrimary | text:string | 打印默认文本 | #1890ff |
  | cError | text:string | 打印错误文本 | #f5222d |
  | cWarning | text:string | 打印警告文本 | #faad14 |
  | cSuccess | text:string | 打印成功文本 | #52c41a |
  | wPrimary | text:string | 默认文本 | #1890ff |
  | wError | text:string | 错误文本 | #f5222d |
  | wWarning | text:string | 警告文本 | #faad14 |
  | wSuccess | text:string | 成功文本 | #52c41a |

- file模块：文件系统的增删读写
  | 函数 | 参数 | 描述 | 备注 |
  |--|--|--|--|
  | existsDir | path:string | 目录是否存在 | - |
  | makeDir | path:string | 生成目录 | - |
  | removeDir | path:string | 移除目录 | - |
  | readFile | path:string | 读取文件 | - |
  | writeFile | path:string,flieName:string,fileContent:string | 写入文件 | - |

- loading模块：终端loading效果 (export: class loading)
  | 函数 | 参数 | 描述 | 备注 |
  |--|--|--|--|
  | start | config | loading开始 | - |
  | stop | - | loading结束 | - |
  | clear | - | loading清除 | - |
  | warn | - | 警告loading | - |
  | info | - | 信息loading | - |
  | succeed | - | loading成功 | - |
  | fail | - | loading失败 | - |

> config参数详见：[ora关于config的配置](https://www.npmjs.com/package/ora#options)

- pkg模块：读取package.json文件
  | 函数 | 参数 | 描述 | 备注 |
  |--|--|--|--|
  | resolvePkg | context:cwd | 获取当前目录下的package.json文件 | - |

- terminal模块：命令行执行
  | 函数 | 参数 | 描述 | 备注 |
  |--|--|--|--|
  | commandSpawn | ...args | node spawn Api的封装 | - |
npm package: @ovyvo/eslint-config
Description: A shared configuration package for ESLint
Author: vue12306@163.com
Latest version: 2.0.0

## ESLint Config Of RyanYan

> @ovyvo/elsint-config当前版本v2.1.0。相较v1.x，本次版本使用ts重构所有的项目代码，并全面拥抱eslint.config.js扁平化配置，工具内置vue2,vue3及对应的javascript、typescrit语言开发支持。当然您也可以不使用任何框架，只需要简单配置即可。

> [!WARNING]
> 本次更新弃用了v1.1.0命令交互式配置，受限于访问npm外网仓库及交互体验问题，现阶段不再支持。

## 使用须知

- 使用该插件您需要使用 Node.js（^18.18.0、^20.9.0 或 >=21.1.0）并支持 SSL。
- 使用该插件您的eslint版本应>=9，如您对此有疑问请参考 [eslint配置迁移指南](https://eslint.nodejs.cn/docs/latest/use/configure/migration-guide#google_vignette)
- 请务必保证代码编辑器安装eslint@3.x插件
- 启动eslint服务时如报错vsCode版本低请升级vsCode版本以获得完整的功能支持

## 安装

```bash
npm install @ovyvo/eslint-config@latest -D
// or
yarn add @ovyvo/eslint-config@latest -D
// or
pnpm add @ovyvo/eslint-config@latest -D
```

## .eslint.config.js配置

```javascript
import { defineConfig } from "@ovyvo/eslint-config";

export default defineConfig(options);
```

## options参数

| 属性         | 描述                             | 类型                             | 默认值       |
| ------------ | -------------------------------- | -------------------------------- | ------------ |
| frameType    | 框架类型                         | enum<'vue'\|'pure'>              | 'vue'        |
| frameVersion | 框架版本(frameType为vue时可选)   | enum<2\|3>                       | 3            |
| scriptType   | script类型                       | enum<'javascript'\|'typescript'> | 'javascript' |
| ignores      | 忽略文件(插件内置忽略文件见下表) | string[]                         | -            |
| overrides    | 重置或定制rules                  | String[]                         | -            |

## 内置忽略文件

```javascript
"*.sh",
"*.md",
"*.woff",
"*.ttf",
".vscode",
".husky",
".github",
"**/node_modules",
"**/dist",
"**/package-lock.json",
"**/yarn.lock",
"**/pnpm-lock.yaml",
"**/bun.lockb",
"**/CHANGELOG*.md",
"**/LICENSE*",
"**/auto-import?(s).d.ts",
"**/components.d.ts",
```
npm package: @ovyvo/prettier-config
Description: A shared configuration package for Prettier
Author: vue12306@163.com
Latest version: 1.0.1

## Prettier Config Of RyanYan

## Install

```bash
npm install @ovyvo/prettier-config -D
// or
yarn add @ovyvo/prettier-config -D
// or
pnpm install @ovyvo/prettier-config -D
```

## Usage

```javascript
// package.json
{
  "prettier": "@ovyvo/prettier-config"
}
```
npm package: @ovyvo/stylelint-config
Description: A shared configuration package for StyleLint
Author: vue12306@163.com
Latest version: 1.0.1

## Prettier Config Of RyanYan

## Install

```bash
npm install @ovyvo/stylelint-config -D
// or
yarn add @ovyvo/stylelint-config -D
// or
pnpm install @ovyvo/stylelint-config -D
```

## Usage

> 注意：@yan/stylelint-config 中已引入"stylelint-config-standard"，"stylelint-order"，"stylelint-config-rational-order"常规配置，如您需要支持 less 或 scss 请安装相关 plugin 及 extends。

```javascript
// .stylelintrc.js
module.exports = {
  extends: [
    //配置已引入,
    "@ovyvo/stylelint-config",
    // ...
  ],
  rules: {
    // 自定义规则或覆盖继承来的规则
  },
  // 其他 Stylelint 配置项
};
```

> 注意：如您想要配合 vscode 实现更加优雅的样式代码格式化，请安装推荐插件，并在您的项目工作区中增加以下配置

```javascript
// .vscode/settings.json
{
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": "explicit"
  },
  "stylelint.validate": ["css", "scss", "less", "postcss"]
}
//.vscode/extensions.json
{
  "recommendations": ["stylelint.vscode-stylelint"]
}

```
npm package: @ow-framework/core
Description: <img src="../../_media/ow-logo.png" width="100" />
Author: flipace
Latest version: 4.0.0

<img src="../../_media/ow-logo.png" width="100" />

# @ow-framework/core

**ow** [pronounced: oouhh] is a node.js framework which enforces certain patterns and restrictions in order to provide you with a stable, testable and modular application architecture.

It's aim is to provide you with a small set of core functions and a diverse set of **ow modules** which can be added and replaced depending on the needs of your application.

The way you write modules for **ow** is also straightforward and kept as simple as possible.

If you adhere to **ow**s patterns, you'll end up with applications that are modular, stable and easy to test as well as custom modules which can easily be extracted and reused in different applications.

# Quick Start

First, install  **@ow-framework/core** in your application.
You may use either yarn or npm for this step.

```bash
yarn add @ow-framework/core
```

## Usage

Creating and starting a new app is as simple as writing 3 lines (or 1, if you dare to do so) of code.

```js
import Ow from '@ow-framework/core';

const app = new Ow();

app.start();
```

```bash
yarn start
```

Okay, that won't do much yet - except logging that your app started - but read on to see how **ow**s module system works.

## Adding your first module

To try out **ow**s module system, you may add the ```@ow-framework/hello-world``` module. It's small, simple and
easy to use. So go ahead and follow these steps:

```bash
yarn add @ow-framework/hello-world
```

```js
import Ow from '@ow-framework/core';
import HelloWorld from '@ow-framework/hello-world';

const app = new Ow();

app.addModules([
  HelloWorld
]);

app.start();
```

```bash
yarn start
```

If you're trying this with node.js you should see something like:

```bash
Hello World!
Started ow application...
Hello World!
```
npm package: @ow-framework/koa
Description: The power and elegance of [koa](https://github.com/koajs/koa) in your [@ow-framework](https://github.com/ow-framework/ow-packages) application.
Author: flipace
Latest version: 4.0.0

# @ow-framework/koa

The power and elegance of [koa](https://github.com/koajs/koa) in your [@ow-framework](https://github.com/ow-framework/ow-packages) application.

## Install

```bash
yarn add @ow-framework/koa
```

## Usage

```js
import Ow from '@ow-framework/core';
import OwKoa from '@ow-framework/koa';

const app = new Ow();

app.addModules([
  OwKoa
]);

app.start();
```

This will start a server, listening on `process.env.port` or some random port if it's not specified.

## Usage with options

```js
import Ow from '@ow-framework/core';
import OwKoa from '@ow-framework/koa';

const app = new Ow();
const Koa = new OwKoa(app, {
  port: 7777
})

app.addModules([
  Koa
]);

app.start();
```
npm package: @ow3/deep-unref-vue
Description: Easily remove all refs from an object using the `deepUnref`-composable.
Author: Chris Breuer
Latest version: 0.1.3

# Vue - Deep Unrefs

Similar to `unref()`, easily remove all refs recursively from an object using the `deepUnref`-composable.

## 💡 Get Started

Luckily, it's incredibly easy to get your package development started with this slightly opinionated starter kit.

```bash
npm install @ow3/deep-unref-vue
```

## 👩🏽‍💻 Usage

```js
import { deepUnref } from '@ow3/deep-unref-vue'

const form = {
  name: ref('Jane Doe'),
  email: ref('jane@doe.com'),
}

save(deepUnref(form))
```

## 🧪 Testing

```bash
pnpm test
```

## 📈 Changelog

Please see our [releases](https://github.com/openweb/deep-unref-vue/releases) page for more information on what has changed recently.

## 💪🏼 Contributing

Please see [CONTRIBUTING](.github/CONTRIBUTING.md) for details.

## 🏝 Community

For help, discussion about best practices, or any other conversation that would benefit from being searchable:

[Discussions on GitHub](https://github.com/openweblabs/deep-unref-vue/discussions)

For casual chit-chat with others using this package:

[Join the Open Web Discord Server](https://discord.ow3.org)

## 📄 License

The MIT License (MIT). Please see [LICENSE](LICENSE.md) for more information.

Made with ❤️ by Open Web Labs.
npm package: @ow3/renovate-config
Description: Open Web Stacks preset for the Renovate bot.
Author: Chris Breuer
Latest version: 0.6.1

# Renovate Bot — Open Web Preset

Open Web preset for the [Renovate bot](https://github.com/renovatebot/renovate).

## 💡 Usage

Add the following into your `renovate.json` file:

```json
{
  "extends": [
    "@ow3"
  ]
}
```

## 🤝 Useful Links

- [Configuration Options](https://renovatebot.com/docs/configuration-options)
- [Renovate Presets](https://github.com/renovatebot/presets/tree/master/packages)

## 📄 License

The MIT License (MIT). Please see [LICENSE](LICENSE.md) for more information.

Made with ❤️
npm package: @ow3/stacks-core
Description: The Stacks framework core.
Author: Chris Breuer
Latest version: 0.33.3

# @ow3/stacks-core

This package contains the "core" logic of the framework/monorepo setup, e.g. the build logic (excluding the IDE setup).

## ☘️ Features

The ultimate goal of this framework, Stacks, is to _help you_ create a component and/or function library. Stacks is a toolkit of composables, methods, and other goodies required to build optimized libraries. A highly optimized build process that automatically generates `.mjs` & `.cjs` library distributions for you, including its TypeScript types.

Other included core features are:

- ⚡️ Vite plugins to build the component library
- 🏎 Blazing fast, empowered by a beautiful DX
- 👣 Tiny foot-print in production builds
- 💬 Fully-typed TypeScript definitions
- 🌳 Treeshaking for Vue & Web Components
- 🎨 Optimized UnoCSS build for Vue & Web Components _(defaults to Tailwind CSS utility classes)_
- 🧙🏼‍♀️ Unified way to access hundreds of [icon sets](https://icon-sets.iconify.design)
 — [Icons in Pure CSS](https://antfu.me/posts/icons-in-pure-css)

And all of this in a zero-config, yet configurable, way.

## 🤖 Usage

If you want to use Stacks outside of this framework, install it as a dev dependency:

```bash
pnpm i -D @ow3/stacks
```

Now, you can use it in your project:

```js
import {
  Stacks,
  atomicCssEngine,
  autoImports,
  components,
  createApp,
  defineConfig,
  defineTestConfig,
  inspect,
  resolve,
  uiEngine
} from '@ow3/stacks'

// you are now free to use any of the imported methods
```

Learn more in the docs.

## 🧪 Testing

```bash
pnpm test
```

## 📈 Changelog

Please see our [releases](https://github.com/ow3org/vue-components-library-starter/releases) page for more information on what has changed recently.

## 💪🏼 Contributing

Please see [CONTRIBUTING](../../.github/CONTRIBUTING.md) for details.

## 🏝 Community

For help, discussion about best practices, or any other conversation that would benefit from being searchable:

[Discussions on GitHub](https://github.com/openweblabs/web-components-library-starter/discussions)

For casual chit-chat with others using this package:

[Join the Open Web Discord Server](https://discord.ow3.org)

## 📄 License

The MIT License (MIT). Please see [LICENSE](../../LICENSE.md) for more information.

Made with ❤️
npm package: @ow3/table-elements
Description: The easy & modern way to work with tables. Facet filtering, searching, pagination, ...
Author: Open Web Labs
Latest version: 0.0.1

# Table Elements

The easiest way to integrate Laravel Scout or Meilisearch into your frontend. These components will allow you to kick-start the development of your next beautiful table UIs, including a blazing-fast UX.

## 🐙 Features

This cross-framework compatible (React, Vue, Svelte, Angular, HTML, etc.) web component library comes with the following features & "improvements" to the table element:

- `<table-v2 />`
  - quickly & simply develop a highly-configurable table UI without worrying about the backend
  - "facet filtering" & "table head sorting" natively built in
  - Meilisearch & Laravel Scout API compatible

- `<table-configure />`
  - simple way to configure the table in a HTML semantic fashion

Read more about these features in their respective [docs](https://meema.xyz/docs).

## 💡 Usage

It's incredibly easy to use a Web Components within your own project. Check out the `index.html` to get an idea how it can be done.

```html
<!-- the following props are required to be set either on this `table-configure` or `table-v2 element` -->
<table-configure
  source="127.0.0.1:7700"
  index="collections"
  cols="name, collection_published_at, created_at"
/>

<table-v2 />

<!-- optional props -->
<table-v2
  searchable="true"
  sorts="name, price, created_at"
  filters="traits_Head, traits_Body, traits_Background"
  actionable="true"
  per-page="20"
  use-pagination="true"
/>
```

## 🖥️ Browsers

Meema Elements is built for the modern web and avoids bloated polyfills and outdated environments as much as possible. Currently, it supports all browsers that fully implement the [Custom Elements V1][caniuse-custom-el-v1].

- Edge 79+
- Firefox 63+
- Chrome 67+
- Safari 13.1+
- Opera 64+
- iOS Safari 13.7+
- Android Browser 81+
- Opera Mobile 59+
- Chrome for Android 88+

[caniuse-custom-el-v1]: https://caniuse.com/custom-elementsv1

## 🧪 Testing

```bash
yarn test
```

## 📈 Changelog

Please see our [releases](https://github.com/meemalabs/table-elements/releases) page for more information on what has changed recently.

## 💪🏼 Contributing

Please see [CONTRIBUTING](.github/CONTRIBUTING.md) for details.

## 🏝 Community

For help, discussion about best practices, or any other conversation that would benefit from being searchable:

[Table Elements on GitHub](https://github.com/meemalabs/table-elements/discussions)

For casual chit-chat with others using this package:

[Join the Meema Discord Server](https://discord.meema.io)

## 📄 License

The MIT License (MIT). Please see [LICENSE](LICENSE.md) for more information.

Made with ❤️ by Meema, Inc.
npm package: @owaf/absinthe-socket-graphiql
Description: Socket GraphiQL Utilities
Author: Mauro Titimoli
Latest version: 10.0.1

# @owaf/absinthe-socket-graphiql

> Socket GraphiQL Utilities

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
<!-- END doctoc -->

- [Installation](#installation)
  - [Using npm](#using-npm)
  - [Using yarn](#using-yarn)
- [API](#api)
  - [createFetcher](#createfetcher)
    - [Parameters](#parameters)
- [License](#license)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

## Installation

### Using [npm](https://docs.npmjs.com/cli/npm)

    $ npm install --save phoenix @owaf/absinthe-socket-graphiql

### Using [yarn](https://yarnpkg.com)

    $ yarn add phoenix @owaf/absinthe-socket-graphiql

## API

<!-- Generated by documentation.js. Update this documentation by updating the source code. -->

### createFetcher

Creates a Fetcher using the given arguments

#### Parameters

-   `apiUrl` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** 
-   `subscriptionsClient` **SubscriptionClient** 
-   `subscriptionSentMessage` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** 

## License

[MIT](LICENSE.txt) :copyright: Jumpn Limited.
npm package: @owaiswiz/react-tiny-toast
Description: # Installation Install this package by running on your project root directory.
Latest version: 0.2.7

##### Play around with the toast component [here](https://playground.ashr81.now.sh). Find readymade code and demo for the message invoker [here](https://playground.ashr81.now.sh).

# Installation
Install this package by running on your project root directory.

`yarn install react-tiny-toast`

# Usage
Once installed, render this component onto your root component.
```
import { ToastContainer } from 'react-tiny-toast';

const App = () => {
  return (
    <div>
    <ToastContainer />
    </div>
  )
}
```

once above step is done. you can call in the toast from anywhere in your application(Make sure `ToastContainer` is in your component tree).
```
import React, { useEffect } from 'react';
import { toast } from 'react-tiny-toast';

const ChildComponent = () => {
  useEffect(() => {
     toast.show('You have successfully seen the toast notification.', { timeout: 3000 })
  }, [])
}
```

#### `toast.show` accepts two arguments
1. `string` or a valid react component which renders onto the displayed toast component.
2. `object` which accepts different options for the toast notification.

##### Accepted Options:
```js
{
  variant: 'success' | 'danger' | 'warning' | 'default',
  position: 'top-center' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'bottom-center',
  delay: number, // time in milli seconds
  timeout: number, // time in mulli seconds
  uniqueCode: string | number // helps in avoiding duplicate toast message when triggered multiple times by user actions.
}
```
npm package: @owaiswiz/use-in-view
Description: Check if your component is in viewport using this simple hook!
Latest version: 1.0.16

## useInView

Check if your component is in viewport using this simple hook!

[![Build Status](https://travis-ci.org/elinadenfina/useInView.svg?branch=master)](https://travis-ci.org/elinadenfina/useInView)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
![GitHub top language](https://img.shields.io/github/languages/top/elinadenfina/useinview.svg)
![npm bundle size (scoped)](https://img.shields.io/bundlephobia/minzip/use-in-view/1.0.7.svg)
![David](https://img.shields.io/david/elinadenfina/useinview.svg)

⭐ ⭐ Check out a working demo [here](https://elinadenfina.github.io/useInView/) ⭐ ⭐

## Install

```
$ yarn add use-in-view
```

## Usage

```jsx
import useInView from 'use-in-view';

const AnimatedComponent = () => {
	const offset = 30;
	const [ref, inView] = useInView(offset);

	return (
		<div className={`${inView && 'in-view'}`} ref={ref}>
			Animate me!
		</div>
	);
};
```