open-index/open-npm huggingface dataset:
npm package: @scriptedpixels/liquid-glass-vue
Description: Apple's Liquid Glass effect for Vue
Author: Scripted Pixels: Kam Banwait
Latest version: 0.0.10

# Liquid Glass Vue

Apple's Liquid Glass effect for Vue.

Card Example              |  Button Example
:-------------------------:|:-------------------------:
![](https://github.com/kambanwait/liquid-glass-vue/raw/master/assets/card.png)  |  ![](https://github.com/kambanwait/liquid-glass-vue/raw/master/assets/button.png)

## Demo

## Features

- Proper edgy bending and refraction
- Configurable frosty level
- Supports arbitrary child elements
- Configurable paddings
- Correct hover and click effects
- Edges and highlights take on the underlying light like Apple's does
- Configurable chromatic aberration
- Configurable elasticity, to mimic Apple's "liquid" feel

**⚠️ NOTE:** Safari only partially supports the effect (no displacement) and Firefox does not support it at all.

## Usage

### Installation

```bash
npm install @scriptedpixels/liquid-glass-vue
```

### Basic Usage

```tsx
import LiquidGlass from '@scriptedpixels/liquid-glass-vue'


```

### Button Example

```tsx
```

### Mouse Container Example

When you want the glass effect to respond to mouse movement over a larger area (like a parent container), use the `mouseContainer` prop:

```tsx

```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `children` | `Vue.VueNode` | - | The content to render inside the glass container |
| `displacementScale` | `number` | `70` | Controls the intensity of the displacement effect |
| `blurAmount` | `number` | `0.0625` | Controls the blur/frosting level |
| `saturation` | `number` | `140` | Controls color saturation of the glass effect |
| `aberrationIntensity` | `number` | `2` | Controls chromatic aberration intensity |
| `elasticity` | `number` | `0.15` | Controls the "liquid" elastic feel (0 = rigid, higher = more elastic) |
| `cornerRadius` | `number` | `999` | Border radius in pixels |
| `class` | `string` | `""` | Additional CSS classes |
| `padding` | `string` | - | CSS padding value |
| `style` | `Vue.CSSProperties` | - | Additional inline styles |
| `overLight` | `boolean` | `false` | Whether the glass is over a light background |
| `onClick` | `() => void` | - | Click handler |
| `mouseContainer` | `Vue.RefObject<HTMLElement \| null> \| null` | `null` | Container element to track mouse movement on (defaults to the glass component itself) |
npm package: @scripthungry/better-switch
Description: A simple alternative to the switch statement for matching strings and returning values
Latest version: 1.0.15

[![RelativeCI](https://badges.relative-ci.com/badges/srmcFg5C9OiqdlLYQCQw?branch=main)](https://app.relative-ci.com/projects/srmcFg5C9OiqdlLYQCQw)

# @scripthungry/better-switch
A simple alternative to the switch statement for matching strings and returning values

## To install and use

    npm i @scripthungry/better-switch

In your code:

    import betterSwitch from '@scripthungry/better-switch'

## Examples
### Javascript:

Simple example:

    const returnVal = betterSwitch('test', {
      test: () => 'test value', 
      default: () => 'default value' 
    }) // returnVal === 'test value'

Non-existent key returns default key value:

    const returnVal2 = betterSwitch('non existent key', { 
      test: () => 'test value', 
      default: () => true 
    }) // returnVal2 === true

Error due to non existent key and no default key:

    const returnVal3 = betterSwitch('non existent key', { 
      test: () => 'test value', 
      test2: 'test2 value' 
    })

### Typescript:

Enforcing a consistent return type using type inference from the first return value:

    const returnVal = betterSwitch('test', { 
      test: () => 'test value', 
      default: () => 'default value' 
    }) // returnVal === 'test value'

Enforcing a specified consistent return type:

    const returnVal = betterSwitch<string>('test', { 
      test: () => 'test value', 
      default: () => 'default value' 
    }) // returnVal === 'test value'

Typescript error because the default key does not return the same type as the first key:

    const returnVal = betterSwitch('test', { 
      test: () => 'test value', 
      default: () => true 
    })

Allowing unknown return types:

    const returnVal = betterSwitch<unknown>('non existent key', {
      test: () => 'test value', 
      default: () => true 
    }) // returnVal === true

Allowing multiple specified return types

    const returnVal = betterSwitch<string | boolean>('non existent key', { 
      test: () => 'test value', 
      default: () => true 
    }) // returnVal === true
npm package: @scriptin/jmdict-simplified-loader
Description: JSON loader for jmdict-simplified - JMdict, JMnedict, Kanjidic in JSON format
Author: Dmitry Shpika
Latest version: 3.6.1

# JSON loader for [jmdict-simplified](https://github.com/scriptin/jmdict-simplified)

[![Download JSON files](https://img.shields.io/static/v1?label=Download&message=JSON%20files&color=blue&style=for-the-badge)](https://github.com/scriptin/jmdict-simplified/releases/latest)

```shell
npm install @scriptin/jmdict-simplified-loader
```

This library is server-only, and allows you to import JSON files
(e.g. load into a database) using a streaming JSON parse
with a simple event API,  which doesn't load the whole file into memory.

This library handles JMdict, JMnedict and Kanjidic dictionary JSON files.
There are also JSON files for Kradfile and Radkfile, but those are small
enough to be fully loaded into memory, thus don't need a streaming parser.

You can also install the TypeScript types from
[`@scriptin/jmdict-simplified-types`](https://www.npmjs.com/package/@scriptin/jmdict-simplified-types):

```shell
npm install --save-dev @scriptin/jmdict-simplified-types
```

You can skip installing the types because `@scriptin/jmdict-simplified-loader` includes types
as a dependency. Unless you separate "loading" and "using" phases into separate apps/scripts
with separate dependencies.

Process the data using the simple event API (uses JSON streaming API under the hood):

```ts
// load-jmdict.ts
import { loadDictionary } from "@scriptin/jmdict-simplified-loader";

// Arguments:
// 1. dictionary type: 'jmdict' | 'jmnedict' | 'kanjidic'
// 2. path to a file: string
const loader = loadDictionary("jmdict", "path/to/jmdict-1.2.3.json")
  .onMetadata((metadata) => {
    // Process metadata
  })
  .onEntry((entry, metadata) => {
    // Load an entry into database
  })
  .onEnd(() => {
    console.log("Finished!");
  });

// To handle parsing errors:
loader.parser.on('error', (error) => {
  console.error(error);
});
```

The API is strongly typed. Based on the first argument of `loadDictionary()`
(`'jmdict' | 'jmnedict' | 'kanjidic'`), you'll get proper types
for dictionary metadata and entries.
npm package: @scriptin/jmdict-simplified-types
Description: TypeScript type definitions for jmdict-simplified - JMdict, JMnedict, Kanjidic in JSON format
Author: Dmitry Shpika
Latest version: 3.6.1

# TypeScript types for [jmdict-simplified][]

[![Download JSON files](https://img.shields.io/static/v1?label=Download&message=JSON%20files&color=blue&style=for-the-badge)](https://github.com/scriptin/jmdict-simplified/releases/latest)
[![Format documentation](https://img.shields.io/static/v1?label=Read&message=Format%20docs&color=blue&style=for-the-badge)](https://scriptin.github.io/jmdict-simplified/)

```shell
npm install --save-dev @scriptin/jmdict-simplified-types
```

Includes types for JSON files in [jmdict-simplified][]:

- JMdict
- JMnedict
- Kanjidic
- KRADFILE/RADKFILE

## Usage

### Option 1: using JSON files directly

Install the types:

```shell
npm install --save-dev @scriptin/jmdict-simplified-types
```

You should use `--save-dev` because this package only includes type definitions and no code.

With Node.js:

```ts
// app.ts
import type { Kanjidic2 } from "@scriptin/jmdict-simplified-types";

const json = JSON.parse(
  readFileSync('path/to/kanjidic2-1.2.3.json', { encoding: 'utf-8' })
) as Kanjidic2;
```

> **Note** Some JSON files can be large and won't fit into memory,
> but it should work fine for Kanjidic, JMnedict, KRADFILE/RADKFILE,
> and filtered (by language or "common-only") versions of JMdict

With bundlers (e.g. Webpack, Vite) which support importing JSON via loaders/plugins:

```ts
// app.ts
import type { Kanjidic2 } from "@scriptin/jmdict-simplified-types";
import kanjidicJson from "path/to/kanjidic2-1.2.3.json";

const kanjidic = kanjidicJson as Kanjidic2;
```

### Option 2: using [@scriptin/jmdict-simplified-loader](https://www.npmjs.com/package/@scriptin/jmdict-simplified-loader)

This method works with server only, and allows you to import JSON files
(e.g. load into a database) using a streaming JSON parser,
which doesn't load the whole file into memory.
This is ideal when working with full version of JMdict JSON file,
but works for JMnedict and Kanjidic as well.

Install the loader:

```shell
npm install @scriptin/jmdict-simplified-loader
```

You can skip installing the types because `@scriptin/jmdict-simplified-loader` includes types
as a dependency. Unless you separate "loading" and "using" phases into separate apps/scripts
with separate dependencies.

Process the data using the simple event API (uses JSON streaming API under the hood):

```ts
// load-jmdict.ts
import { loadDictionary } from "@scriptin/jmdict-simplified-loader";

const loader = loadDictionary("jmdict", "path/to/jmdict-1.2.3.json")
  .onMetadata((metadata) => {
    // Process metadata
  })
  .onEntry((entry, metadata) => {
    // Load an entry into database
  })
  .onEnd(() => {
    console.log("Finished!");
  });

// To handle parsing errors:
loader.parser.on('error', (error) => {
  console.error(error);
});
```

[jmdict-simplified]: https://github.com/scriptin/jmdict-simplified