open-index/open-npm huggingface dataset:
npm package: @klnjs/biome-config
Description: Provides a collection of shareable [biome] configurations for JavaScript / TypeScript projects that can easily be reused across projects.
Author: Rune Klein
Latest version: 4.4.1

# @klnjs/biome-config

Provides a collection of shareable [biome] configurations for JavaScript / TypeScript projects that can easily be reused across projects.

These configurations aim to enforce consistent code formatting, improve code readability, and streamline the development process by eliminating the need for manual configuration.

## Installation

You can install the `@klnjs/biome-config` package using your preferred package manager

```bash
npm install @klnjs/biome-config --save-dev
```

## How to Use

You can use it by creating a `biome.json` config file, in the root of your project and extending this configuration:

```js
{
  "extends": ["@klnjs/biome-config/core"]
}
```

[biome]: https://github.com/biomejs/biome
npm package: @klnjs/browserslist-config
Description: Provides multiple shareable [Browserslist] configurations that can easily be reused across projects.
Author: Rune Klein
Latest version: 4.4.1

# @klnjs/browserslist-config

Provides multiple shareable [Browserslist] configurations that can easily be reused across projects.

These configurations are tailored for the most common project setups using modern JavaScript, ensuring compatibility and optimizing build processes accordingly.

## Installation

You can install the `@klnjs/browserslist-config` package using your preferred package manager

```bash
npm install @klnjs/browserslist-config --save-dev
```

## How to Use

You can use it by creating a config file `.browserslistrc`, in the root of your project and extending this configuration:

```yaml
extends @klnjs/browserslist-config/core
```

You can use it by referencing it in your `package.json` file:

```json
{
	"browserslist": ["extends @klnjs/browserslist-config/last-2-versions"]
}
```

[browserslist]: https://github.com/browserslist/browserslist
npm package: @klnjs/eslint-config
Description: Provides a collection of shareable [ESLint] configurations for JavaScript / TypeScript projects that can easily be reused across projects.
Author: Rune Klein
Latest version: 4.4.1

# @klnjs/eslint-config

Provides a collection of shareable [ESLint] configurations for JavaScript / TypeScript projects that can easily be reused across projects.

These configurations aim to provide consistency, code quality, and ensure coding standards are enforced throughout the development process, resulting in cleaner, more maintainable code.

## Installation

You can install the `@klnjs/eslint-config` package using your preferred package manager

```bash
npm install @klnjs/eslint-config --save-dev
```

## How to Use

To use a specific config from `@klnjs/eslint-config`, simply add it in your project's `eslint.config.js` file.

```js
import core from '@klnjs/eslint-config/core'

export default [core]
```

If you're using mutliple configurations, many configs provide extension rules that checks more thoroughly and therefore disables ESLint's built-in rule. Always make sure the extended configs are included after the core config or any other base ESLint configs.

When using frameworks, you should include them after both core and typescript, due to how parsers need to be overriden to handle proprietary file types, e.g. `.svelte`.

```js
import core from '@klnjs/eslint-config/core'
import typescript from '@klnjs/eslint-config/typescript'
import react from '@klnjs/eslint-config/react'
import svelte from '@klnjs/eslint-config/svelte'

export default [core, typescript, react, svelte]
```

Configurations only support the most common file types, if you want to include custom file types eg. `.mtsx`, you'll need to add them yourself by adjusting the 'files' property in the configurations.

They also don't assume specific environments, so they don't set up `languageOptions.globals`. In most cases, you'll likely need to configure some properties yourself.

```js
import core from '@klnjs/eslint-config/core'
import { serviceworker, browser } from 'globals'

export default [
	{
		files: ['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],
		...core,
		languageOptions: {
			...core.languageOptions,
			globals: {
				...serviceworker,
				...browser
			}
		}
	}
]
```

[eslint]: https://github.com/eslint/eslint
npm package: @klnjs/headers
Description: This module provides types and functionality for parsing and stringifying Permissions Policy.
Author: Rune Klein
Latest version: 1.0.0-beta.13

# @klnjs/permissions-policy

This module provides types and functionality for parsing and stringifying Permissions Policy.

## Installation

Install the `@klnjs/permissions-policy` package using your preferred package manager.

```bash
npm install @klnjs/permissions-policy
```

## How to Use

### Importing

Import the module, and optionally the `PermissionsPolicy` type.

```ts
import PP, { type PermissionsPolicy } from '@klnjs/permissions-policy'
```

### Parsing

Parse a permission policy string into a `PermissionsPolicy` object with the `parse` method:

```ts
const policy = PP.parse('camera=(self "https://trusted.com")')
```

### Stringifying

Serialize a `PermissionsPolicy` object with the `stringify` method:

```ts
const header = PP.stringify({ camera: ['self', '"https://trusted.com"'] })
```

### Validation

Parsing validates directives and allowlists. If an invalid directive or source list is encountered during parsing, a SyntaxError is thrown.

```ts
try {
	const policy = PP.parse("invalid-directive 'self'")
} catch (error) {
	console.error(error) // SyntaxError: PermissionsPolicy.parse: invalid directive "invalid-directive"
}
```
npm package: @klnjs/prettier-config
Description: Provides a collection of shareable [Prettier] configurations for JavaScript / TypeScript projects that can easily be reused across projects.
Author: Rune Klein
Latest version: 4.4.1

# @klnjs/prettier-config

Provides a collection of shareable [Prettier] configurations for JavaScript / TypeScript projects that can easily be reused across projects.

These configurations aim to enforce consistent code formatting, improve code readability, and streamline the development process by eliminating the need for manual configuration.

## Installation

You can install the `@klnjs/prettier-config` package using your preferred package manager

```bash
npm install @klnjs/prettier-config --save-dev
```

## How to Use

You can use it by creating a config file in any of the supported formats eg. `.prettierrc`, in the root of your project and extending this configuration:

```js
'@klnjs/prettier-config/core'
```

You can use it by referencing it in your `package.json` file:

```json
{
	"prettier": "@klnjs/prettier-config/core"
}
```

None of the above methods allow for extending the configuration. To overwrite specific properties or use multiple configs, import the configuration into a `prettier.config.js` file, in the root of your project, and export the modifications:

```js
import core from '@klnjs/prettier-config/core'
import svelte from '@klnjs/prettier-config/svelte'

export default {
	...core,
	...svelte,
	plugins: [...core.plugins, ...svelte.plugins],
	semi: true
}
```

[prettier]: https://github.com/prettier/prettier
npm package: @klnjs/react-avatar
Description: An avatar component for React.
Author: Rune Klein
Latest version: 1.0.0-beta.13

# @klnjs/react-avatar

An avatar component for React.

## Installation

Install the `@klnjs/react-avatar` package using your preferred package manager.

```bash
npm install @klnjs/react-avatar
```

## How to Use

Docs available [here](https://klnjs.github.io/basique/components/avatar/avatar)
npm package: @klnjs/react-calendar
Description: An calendar component for React.
Author: Rune Klein
Latest version: 1.0.0-beta.13

# @klnjs/react-calendar

An calendar component for React.

## Installation

Install the `@klnjs/react-calendar` package using your preferred package manager.

```bash
npm install @klnjs/react-calendar
```

## How to Use

Docs available [here](https://klnjs.github.io/basique/docs/components/calendar)
npm package: @klnjs/react-core
Description: A library that simplifies implemention of React components that support the `asChild` paradigm. Ensures full [TypeScript](https://www.typescriptlang.org/) support for component props, and refs.
Author: Rune Klein
Latest version: 1.0.0-beta.13

# @klnjs/react-core

A library that simplifies implemention of React components that support the `asChild` paradigm. Ensures full [TypeScript](https://www.typescriptlang.org/) support for component props, and refs.

## Installation

Install the `@klnjs/react-core` package using your preferred package manager.

```bash
npm install @klnjs/react-core
```

## How to Use

```ts
import { poly, forwardRef, type CoreProps } from '@klnjs/react-core';

export type MyComponentProps = CoreProps<
  'div',
  {
    myCustomProp: string;
  }
>;

export const MyComponent = forwardRef<'div', MyComponentProps>(
  (props, forwardedRef) => <poly.div ref={forwardedRef} {...props} />
);

```
npm package: @klnjs/react-countdown
Description: An countdown component for React.
Author: Rune Klein
Latest version: 1.0.0-beta.13

# @klnjs/react-countdown

An countdown component for React.

## Installation

Install the `@klnjs/react-countdown` package using your preferred package manager.

```bash
npm install @klnjs/react-countdown
```

## How to Use

Docs available [here](https://klnjs.github.io/basique/components/countdown/countdown)
npm package: @klnjs/react-icon
Description: An icon component for React.
Author: Rune Klein
Latest version: 1.0.0-beta.13

# @klnjs/react-icon

An icon component for React.

## Installation

Install the `@klnjs/react-icon` package using your preferred package manager.

```bash
npm install @klnjs/react-icon
```

## How to Use

Docs available [here](https://klnjs.github.io/basique/docs/components/icon)
npm package: @klnjs/react-paginator
Description: An avatar component for React.
Author: Rune Klein
Latest version: 1.0.0-beta.13

# @klnjs/react-avatar

An avatar component for React.

## Installation

Install the `@klnjs/react-avatar` package using your preferred package manager.

```bash
npm install @klnjs/react-avatar
```

## How to Use

Docs available [here](https://klnjs.github.io/basique/docs/components/avatar)
npm package: @klnjs/react-pin
Description: An pin component for React.
Author: Rune Klein
Latest version: 1.0.0-beta.13

# @klnjs/react-pin

An pin component for React.

## Installation

Install the `@klnjs/react-pin` package using your preferred package manager.

```bash
npm install @klnjs/react-pin
```

## How to Use

Docs available [here](https://klnjs.github.io/basique/docs/components/pin)
npm package: @klnjs/react-popover
Description: An popover component for React.
Author: Rune Klein
Latest version: 1.0.0-beta.13

# @klnjs/react-popover

An popover component for React.

## Installation

Install the `@klnjs/react-popover` package using your preferred package manager.

```bash
npm install @klnjs/react-popover
```

## How to Use

Docs available [here](https://klnjs.github.io/basique/docs/components/popover)
npm package: @klnjs/react-spinner
Description: An spinner component for React.
Author: Rune Klein
Latest version: 1.0.0-beta.13

# @klnjs/react-spinner

An spinner component for React.

## Installation

Install the `@klnjs/react-spinner` package using your preferred package manager.

```bash
npm install @klnjs/react-spinner
```

## How to Use

Docs available [here](https://klnjs.github.io/basique/components/spinner/spinner)
npm package: @klnjs/react-textarea
Description: An textarea component for React.
Author: Rune Klein
Latest version: 1.0.0-beta.13

# @klnjs/react-textarea

An textarea component for React.

## Installation

Install the `@klnjs/react-textarea` package using your preferred package manager.

```bash
npm install @klnjs/react-textarea
```

## How to Use

Docs available [here](https://klnjs.github.io/basique/components/textarea/textarea)
npm package: @klnjs/typescript-config
Description: Provides a collection of shareable [TypeScript] configurations (tsconfigs) that can easily be reused across projects.
Author: Rune Klein
Latest version: 4.4.1

# @klnjs/typescript-config

Provides a collection of shareable [TypeScript] configurations (tsconfigs) that can easily be reused across projects.

These configurations are tailored for different types of projects, allowing you to easily set up your [TypeScript] environment without the need to manually configure every aspect.

## Installation

You can install the `@klnjs/typescript-config` package using your preferred package manager

```bash
npm install @klnjs/typescript-config --save-dev
```

## How to Use

To use a specific tsconfig from `@klnjs/typescript-config`, simply extend it in your project's `tsconfig.json` file. From here you can add or override properties, to create a tsconfig that is suitable for your project.

```json
{
	"$schema": "https://json.schemastore.org/tsconfig",
	"extends": "@klnjs/typescript-config/core",
	"compilerOptions": {
		"strict": true
	}
}
```

[typescript]: https://github.com/microsoft/TypeScript
npm package: @klocktecnologia/vue-js-modal
Description: Modal Component for Vue.js
Author: euvl
Latest version: 2.0.2

<p align="center">
  
# Vue.js modal

Easy to use, highly customizable Vue.js modal library.

### 😎 [Examples](http://vue-js-modal.yev.io/)

### 🤓 [Documentation](https://euvl.github.io/vue-js-modal/)

### 🤖 [Changelog](https://github.com/euvl/vue-js-modal/releases/tag/2.0.0-rc4)

### 🙌 [Looking for maintainers](https://github.com/euvl/vue-js-modal/issues/588)

### 💰 [Sponsorship](https://github.com/sponsors/euvl)

[![npm version](https://badge.fury.io/js/vue-js-modal.svg)](https://badge.fury.io/js/vue-js-modal)
[![npm](https://img.shields.io/npm/dm/vue-js-modal.svg)](https://www.npmjs.com/package/vue-js-modal)
[![npm](https://img.shields.io/npm/dt/vue-js-modal.svg)](https://www.npmjs.com/package/vue-js-modal)

# ⚠️⚠️⚠️ 2.0.0-rc.X version:

Version 2.0.0 release candidates will have breaking changes until it is 2.0.1. If you need a more stable version, please use 1.3.34.

If you notice any bugs or regressings please do not hesitate to report any issues.

<p align="right">
  <a href="https://www.buymeacoffee.com/yev" target="_blank">
  <img width="200" alt="screen shot 2018-03-01 at 10 33 39" src="https://user-images.githubusercontent.com/1577802/36840220-21beb89c-1d3c-11e8-98a4-45fc334842cf.png">
  </a>
</p>

<p align="center">
  <img src="https://media.giphy.com/media/3oKIPco1eNxAA1rD4Q/giphy.gif">
</p>

---

# Sponsorship & support

**If you are using this project please consider sponsoring it's further development & bug fixes**

Links: https://github.com/sponsors/euvl, https://www.buymeacoffee.com/yev

## This library is contributor-driven

**This library is contributor-driven**. It is not backed by any company, which means that all contributions are voluntary and done by the people who need them. If you need something improved, added, or fixed, please contribute it yourself. Please keep in mind that maintainers volunteer their free time to work on this project and have no obligation to reply on the issues, tailor library for specific use-cases or perform customer support.

## Other projects

Check out my other projects:

- https://github.com/euvl/vue-notification
- https://github.com/euvl/vue-js-toggle-button
- https://github.com/euvl/vue-js-popover
- https://github.com/euvl/v-clipboard