open-index/open-npm huggingface dataset:
npm package: @readapt/app-container
Description: This package contains Vue.js components shared between readapt apps.
Latest version: 1.4.4
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @readapt/app-container

This package contains Vue.js components shared between readapt apps.

## Installation

### Prerequisites

Install peer-dependencies

1. `vue`

### npm

2. Install `@readapt/app-container`

```bash
  npm install @readapt/app-container
```

## Usage

Register shared components  in your Vue.js app typically your `main.ts`

```javascript
import ReadaptComponents from '@readapt/app-container'

Vue.use(ReadaptComponents)
```
Add the ReadaptComponent in your template for example:

```html
<template>
  <readapt-color-picker :value="bar" @selectColor="fooFn" />
</template>
```

Or add it individually in your components (for smaller bundles)

```javascript
import { defineComponent } from 'vue'
import { ColorPicker } from '@readapt/app-container'

const MyComponent = defineComponent({
  components: { ColorPicker },
  setup() {
    // ...
  }
})
```
npm package: @readapt/settings
Description: Readapt adaptations are based on a settings profile. This package contains Settings models, type definitions and a few utility functions to easily build Settings in order to adapt text.
Latest version: 1.8.4

# @readapt/settings

Readapt adaptations are based on a settings profile. This package contains Settings models, type definitions and a few
utility functions to easily build Settings in order to adapt text.

## Installation

1. Install `@readapt/settings` package:

```bash
     npm install @readapt/settings
```

## How to build settings?

Use `buildDefaultSettings()` to build default settings

```typescript

    import { buildDefaultSettings } from '@readapt/settings'

    const defaultSettings = buildDefaultSettings('en')
```

Then you can customize it using available options. For example:

```typescript
    import { colors, lineSpacingOptions, opacityOptions, silentLetterOpacityOptions, overrideDefaultLetters } from '@readapt/settings'

    const mySettings = {
      ...defaultSettingsEn,
      shadeAlternateLinesActive: true,
      shadeAlternateLinesOpacity: opacityOptions[1].value,
      silentLetterActive: true,
      silentLetterOpacity: silentLetterOpacityOptions[2].value,
      lineSpacing: lineSpacingOptions[1].value,
      letters: overrideDefaultLetters('en', [
        { key: '2', value: 'd', bold: false, color: colors[0], active: true },
        { key: '8', value: 'm', bold: false, color: colors[1], active: true },
        { key: '7', value: 'n', bold: false, color: colors[2], active: true },
        { key: '3', value: 'p', bold: false, color: colors[3], active: true },
        { key: '1', value: 'b', bold: false, color: colors[4], active: true },
        { key: '24', value: 'w', bold: false, color: colors[7], active: true },
        { key: '19', value: 'u', bold: false, color: colors[8], active: true },
        { key: '4', value: 'q', bold: false, color: colors[11], active: true }
      ])
    }
```

Each Option is typed to easily know available values. Explore our source code to check all available options.

`overrideDefaultLetters()` and `overrideDefaultPhonemes()` are two methods to easily customize letters and phonemes.

`getLangConfig()` returns available phonemes and letters for each language.
npm package: @readapt/shared-components
Description: This package contains Vue.js components shared between readapt apps.
Latest version: 1.8.4

# @readapt/shared-components

This package contains Vue.js components shared between readapt apps.

## Installation

### Prerequisites

Install peer-dependencies

1. `vue`
2. `bootstrap`
3. `bootstrap-vue`
4. `@readapt/settings`
5. `core-js`

### npm

2. Install `@readapt/shared-component`

```bash
  npm install @readapt/shared-components
```

## Usage

Register shared components  in your Vue.js app typically your `main.ts`

```javascript
import ReadaptComponents from '@readapt/shared-components'

Vue.use(ReadaptComponents)
```
Add the ReadaptComponent in your template for example:

```html
<template>
  <readapt-color-picker :value="bar" @selectColor="fooFn" />
</template>
```

Or add it individually in your components (for smaller bundles)

```javascript
import { defineComponent } from 'vue'
import { ColorPicker } from '@readapt/shared-components'

const MyComponent = defineComponent({
  components: { ColorPicker },
  setup() {
    // ...
  }
})
```
npm package: @readapt/visual-engine
Description: ## Installation
Latest version: 1.8.4

# @readapt/visual-engine

## Installation

### npm

1. Install `@readapt/visual-engine` package:

```bash
     npm install @readapt/visual-engine
```

## Usage

```javascript
//import analyse function from text-engine
import { analyse } from "@readapt/text-engine"
// import the builder function
import { buildAdaptHtmlElement } from '@readapt/visual-engine'

// build the adaptHtmlElement function
const adaptHtmlElement: AdaptHtmlElementFn = buildAdaptHtmlElement(analyse)

// pass as param the HTMLElement to be adapted and the user settings
adaptHtmlElement(element, settings)
```