open-index/open-npm huggingface dataset:
npm package: @lbdudc/map-viewer
Description: Set of classes encapsulating a Leaflet map with methods to facilitate some operations. Examples of use in `index.html`.
Author: Álex Cortiñas
Latest version: 1.0.15

# map-viewer

Set of classes encapsulating a Leaflet map with methods to facilitate some operations. Examples of use in `index.html`.

## Dev

```
npm install    <-- install npm
npm run serve  <-- web server to load index.html
npm run build <-- creating dist
npm run watch  <-- watch version of the previous one
npm run test   <-- run unit testing
```
npm package: @lbello/i18n-diff
Description: Check i18n translation files for missing and extra keys
Latest version: 1.1.1

# @lbello/i18n-diff

A CLI tool to check i18n translation files for missing and extra keys.

## Installation

```bash
npm install -g @lbello/i18n-diff
```

Or run directly with npx:

```bash
npx @lbello/i18n-diff --folder ./locales
```

## Usage

```bash
i18n-diff --folder ./i18n --source en.json
```

### Options

| Option | Alias | Description | Default |
|--------|-------|-------------|---------|
| `--folder <path>` | `-f` | Folder containing translation files | `./i18n` |
| `--source <file>` | `-s` | Source language file | `en.json` |
| `--format <type>` | | JSON structure: `flat` or `nested` | `flat` |
| `--output <type>` | `-o` | Output format: `text`, `json`, or `table` | `text` |
| `--watch` | `-w` | Watch mode: re-run on file changes | `false` |
| `--verbose` | `-v` | Show all keys instead of truncating | `false` |
| `--strict` | | Exit with code 1 for extra keys too | `false` |

### Examples

Basic check:
```bash
i18n-diff --folder ./locales --source en.json
```

Table output:
```bash
i18n-diff -f ./locales -o table
```

JSON output (for CI/CD):
```bash
i18n-diff -f ./locales -o json
```

Watch mode:
```bash
i18n-diff -f ./locales -w
```

Strict mode (fail on extra keys):
```bash
i18n-diff -f ./locales --strict
```

## Output Formats

### Text (default)

```
✓ it: OK

✗ de:
  Missing keys (2):
    - farewell
    - buttons.cancel
  Extra keys (1):
    - extra_key
```

### Table

```
┌──────────┬────────┬─────────┬───────┐
│ Language │ Status │ Missing │ Extra │
├──────────┼────────┼─────────┼───────┤
│ de       │ FAIL   │ 2       │ 1     │
├──────────┼────────┼─────────┼───────┤
│ it       │ OK     │ 0       │ 0     │
└──────────┴────────┴─────────┴───────┘
```

### JSON

```json
{
  "summary": {
    "total": 2,
    "ok": 1,
    "withIssues": 1
  },
  "results": [
    {
      "language": "de",
      "filePath": "/path/to/de.json",
      "status": "fail",
      "missingKeys": ["farewell", "buttons.cancel"],
      "extraKeys": ["extra_key"]
    },
    {
      "language": "it",
      "filePath": "/path/to/it.json",
      "status": "ok",
      "missingKeys": [],
      "extraKeys": []
    }
  ]
}
```

## Supported JSON Formats

### Flat

```json
{
  "greeting": "Hello",
  "buttons.submit": "Submit",
  "buttons.cancel": "Cancel"
}
```

### Nested

```json
{
  "greeting": "Hello",
  "buttons": {
    "submit": "Submit",
    "cancel": "Cancel"
  }
}
```

Both formats are automatically flattened for comparison.

## Exit Codes

| Code | Description |
|------|-------------|
| `0` | All translations are complete |
| `1` | Missing keys found (or extra keys with `--strict`) |

## Programmatic Usage

```javascript
import { check, discoverLanguages } from '@lbello/i18n-diff';

const { sourceLang, targetLangs } = await discoverLanguages('./locales', 'en.json');

const results = await check({
  folder: './locales',
  sourceLang,
  targetLangs
});

console.log(results);
```

## License

MIT
npm package: @lbenie/linting
Description: my opiniated rules
Latest version: 2.1.11

# @lbenie/linting

My personal opinionated linting configuration for biome

## Usage

Inside your project install the package

| Package Manager | Command |
|-----------------|---------|
| npm | `npm i -D @lbenie/linting` |
| yarn | `yarn add -D @lbenie/linting` |
| pnpm | `pnpm add -D @lbenie/linting` |
| bun | `bun add -d @lbenie/linting` |

Then create a `biome.jsonc` file at the root of your project and add the following

```jsonc
{
  "extends": [
    "@lbenie/linting/biome"
  ],
}
```

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<table>
  <tr>
    <td align="center"><a href="https://lbenie.xyz/"><img src="https://avatars.githubusercontent.com/u/7316046?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Lucien Bénié</b></sub></a><br /><a href="https://github.com/lbenie/ts-vite/commits?author=lbenie" title="Code">💻</a> <a href="https://github.com/lbenie/ts-vite/commits?author=lbenie" title="Documentation">📖</a></td>
  </tr>
</table>

<!-- markdownlint-restore -->
<!-- prettier-ignore-end -->

<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
npm package: @lbennett/diff-strings
Description: Diff 2 strings CLI tool
Author: Luke Bennett
Latest version: 1.0.1

# @lbennett/diff-strings

Diff 2 strings CLI tool

## Installation

```
npm install --global @lbennett/diff-strings
# OR
yarn global add @lbennett/diff-strings
```

## Usage

```
> diff-strings "long-string" "other long string"
> other long- string
> # $green(other) $grey(long)$red(-) $grey(string)
```
npm package: @lbennett/eslint-plugin-turbolinks-event-handling
Description: ESLint plugin to avoid registering vanilla or jquery event listeners multiple times when using turbolinks
Author: Luke Bennett
Latest version: 0.0.3
Deprecated: No longer maintained

# @lbennett/eslint-plugin-turbolinks-event-handling

ESLint plugin to avoid registering vanilla or jquery event listeners multiple times when using turbolinks

## Installation

```
$ npm install @lbennett/eslint-plugin-turbolinks-event-handling --save-dev
```

```
$ yarn add @lbennett/eslint-plugin-turbolinks-event-handling --dev
```

## Usage

Add `@lbennett/turbolinks-event-handling` to the plugins section of your `.eslintrc` configuration file.

```json
{
  "plugins": [
    "@lbennett/turbolinks-event-handling"
  ]
}
```

Then configure the rules you want to use under the rules section.

```json
{
  "rules": {
    "@lbennett/turbolinks-event-handling/jquery-off-before-on": 2,
    "@lbennett/turbolinks-event-handling/jquery-use-event-namespaces": 2,
    "@lbennett/turbolinks-event-handling/vanilla-addeventlistener-needs-function-reference": 2
  }
}
```
npm package: @lbennett/git-allyias
Description: A cli ally to help you learn your overly complex git aliases by notifying you when you could have used an alias command.
Latest version: 1.0.1

# git-allyias

A cli ally to help you learn your overly complex git aliases by notifying you when you could have used an alias command.

## Install

```bash
npm install --global @lbennett/git-allyias
# OR
yarn global add @lbennett/git-allyias
```

## Usage

You can now use the `g` or `git-allyias` commands.

```
> g rebase origin/master --autosquash -i
> ...
> Successfully rebased and updated refs/heads/master.

> 🧞‍♂️  Woah there buddy, easy on the keys! Next time you can use `git romas` instead.
```

assumimg you had a `romas` alias like so...

```
[alias]
    romas = rebase -i --autosquash origin/master
```
npm package: @lbennett/grape-jelly
Description: JavaScript serializer library inspired by ruby-grape/grape-entity
Author: Luke Bennett
Latest version: 1.0.1

# GrapeJelly

I was jelly of ruby-grape's grape-entity gem so here we have a JavaScript
serializer framework inspired by grape-entity. It is not intended to be a
complete implementation of grape-entity.

## Install

```bash
npm install @lbennett/grape-jelly
# OR
yarn add @lbennett/grape-jelly
```

## Usage

Define entities by extending the `Entity` class.
You must implement a `define` method that defines the entity using
`Entity.prototype.expose`.

```js
import { Entity } from '@lbennett/grape-jelly';

class UserEntity extends Entity {
  define() {
    this.expose('username', { as: 'not_username' });
    this.expose('password', user => user.notPassword);
  }
}
```

You can use `Entity.prototype.represent` to serialize your object.

```js
import UserEntity from './UserEntity';

const data = {
    username: 'foo',
    password: 'bar',
    notPassword: 'raboof',
    otherValue: 'not included',
};

const entity = new UserEntity();
const serializedData = entity.represent(data);

console.log(serializedData);

// { not_username: 'foo', password: 'raboof' }
```
npm package: @lbennett/reflection
Description: > Copy files from external storage to internal storage, then move them back and trash when you're done. > ## Installation
Latest version: 1.0.1

# @lbennett/reflection

> Copy files from external storage to internal storage, then move them back and trash when you're done.
>
## Installation

```
npm install --global @lbennett/reflection
# OR
yarn global add @lbennett/reflection
```

Uses a `trash` command instead of `rm` to delete local files/directories. _I would like to change this._

`brew install trash` - http://hasseg.org/trash/

## Usage

1\. Set environment variables for external and internal storage locations.

```
REFLECTION_EXTERNAL_STORAGE_LOCATION="/Volumes/external/reflection-workspace"
REFLECTION_INTERNAL_STORAGE_LOCATION="/Users/me/reflection-workspace"
```

2\. Execute commands

`reflection summon useless-project`
* copy directory `useless-project` from external location to internal location

`reflection banish useless-project`
* copy directory `useless-project` from internal location to external location and
trash the internal version
npm package: @lbennett/stylelint-error-string-formatter
Description: stringFormatter from stylelint with a re-print of error messages on completion
Author: Luke Bennett
Latest version: 1.0.6

# @lbennett/stylelint-error-string-formatter

`stringFormatter` from `stylelint` with a re-print of error messages on completion.

## Installation and usage

```bash
npm install --save-dev @lbennett/stylelint-error-string-formatter
# OR
yarn add --dev @lbennett/stylelint-error-string-formatter
```

Add to `stylelint` as a custom formatter using the [API](https://stylelint.io/user-guide/node-api/#formatter).

Or CLI...

```bash
stylelint.js src/* --custom-formatter node_modules/stylelint-error-string-formatter
```
npm package: @lbergeron/uuid-cli
Description: Command-line utility to generate, and validate UUIDs.
Author: bergeronl
Latest version: 2.0.0

# uuid-cli
Command-line tool for generating and validating UUIDs.

## Installation

    > npm install -g @lbergeron/uuid-cli

## Generating a random UUID

Simply call the executable with no arguments. A random UUID v4 will be generated and copied to the clipboard.

    > uuid
    
    8de8ac0e-a75d-41af-a982-c35d30b36670

## Generating a scoped UUID

To generate a scoped UUID using a name and namespace, you can call the executable like this.

    > uuid --ns 8de8ac0e-a75d-41af-a982-c35d30b36670 --name "Put the name here"

    b6103b34-ba45-5a81-8399-f41e7a5b0d6a

If you omit the `ns` argument, a random namespace UUID will be generated.
npm package: @lbernardo/adminlte-vue
Description: Use https://adminlte.io/ with VueJS
Latest version: 1.0.0

# adminlte-vue
Use https://adminlte.io/ with VueJS

### Example

```js
<template>
  <Container>
    <Navbar />  
    <Sidebar>
      <div class="user-panel mt-3 pb-3 mb-3 d-flex">
        <div class="image">
          <img src="dist/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image">
        </div>
        <div class="info">
          <a href="#" class="d-block">Alexander Pierce</a>
        </div>
      </div>
      <Menubar>
        <MenubarItem text="Dashboard" icon="fas fa-chart-pie" />
      </Menubar>
    </Sidebar>
    <Content title="Dashboard" :breadcrumb="['Home', 'Dashboard']" />
  </Container>
</template>

<script>
import {
  Container, 
  Navbar, 
  Sidebar, 
  Menubar, 
  MenubarItem,
  Content,
} from 'adminlte-vue';

export default {
  name: 'App',
  components: {
    Container,
    Navbar,
    Sidebar,
    Menubar,
    MenubarItem,
    Content
  }
}
</script>
```
npm package: @lbertenasco/bonded-stealth-tx
Description: bonded stealth tx vault smart contracts
Latest version: 0.3.1

# Bonded Stealth TX

> name is not final, all suggestions are welcome

### How does it work

- keeper calls `bond` with `msg.value`
- keeper calls contract with a random `_stealthHash`
- contract uses [`validateStealthTx`](https://github.com/lbertenasco/contract-utils/blob/main/contracts/utils/StealthTx.sol) modifier to `validateHash` with `msg.sender`, `hash` and `penalty`
  - if valid (no one reported it) execution continues.
  - if invalid (hash was reported) `msg.sender` loses it's `bond` and execution stops.

## Improvements:

- update README (how does it work)

- tests

- check remaining gas on validate hash to avoid gasLimit-error exploit to avoid getting penalized
npm package: @lbertenasco/y-oracle
Description: simple oracles for on-chain use
Latest version: 0.1.5

# YUnsafeOracleV1

### Wrappers:

- [x] [`Keep3rV2OracleFactory`](./contracts/oracle/Keep3rV2OracleFactoryWrapper.sol)
  > [`0xa07662C041C4F7B31Fd61C13C44212fF35b5296D`](https://etherscan.io/address/0xa07662C041C4F7B31Fd61C13C44212fF35b5296D#code)
- [x] [`UniswapV3`](./contracts/oracle/UniswapV3OracleWrapper.sol)
  > [`0x71bdC5Ca931Ca9C11C5d19375cA6C0aAe5F5eA5f`](https://etherscan.io/address/0x71bdC5Ca931Ca9C11C5d19375cA6C0aAe5F5eA5f#code)
- [ ] UniswapV2
- [ ] (define next on-chain oracles to wrap)

### Supported pairs:

- [x] ETH-KP3R:
  - pair: [`0xaf988afF99d3d0cb870812C325C588D8D8CB7De8`](https://etherscan.io/address/0xaf988afF99d3d0cb870812C325C588D8D8CB7De8#code)
  - oracle: **default!** [`0xa07662C041C4F7B31Fd61C13C44212fF35b5296D`](https://etherscan.io/address/0xa07662C041C4F7B31Fd61C13C44212fF35b5296D#code)
- [ ] ETH-example
  - pair: [`0xETH_EXAMPLE_PAIR`](https://etherscan.io/address/0xETH_EXAMPLE_PAIR#code)
  - oracle: [`0xORACLE`](https://etherscan.io/address/0xORACLE#code)

### [`YUnsafeOracleV1`](./contracts/oracle/YUnsafeOracleV1.sol)

> [`0xD1f5aEe3f025d2f4e42dd74DEC17d5FaA4707CbC`](https://etherscan.io/address/0xD1f5aEe3f025d2f4e42dd74DEC17d5FaA4707CbC#code)

```ts
    function getAmountOut(
        address _pair,
        address _tokenIn,
        uint256 _amountIn,
        address _tokenOut
    ) external view override returns (uint256 _amountOut) {
        if (pairOracle[_pair] != address(0)) return ISimpleOracle(pairOracle[_pair]).getAmountOut(_pair, _tokenIn, _amountIn, _tokenOut);
        return ISimpleOracle(defaultOracle).getAmountOut(_pair, _tokenIn, _amountIn, _tokenOut);
    }
```

### How to add new pairs + custom wrappers

- add a PR to this repo that adds the pair(s) needed under `### Supported pairs:`
  - each pair should have the name (in symbols), the address and the wrapper-oracle that supports that pair
  - a yMechanic member will answer on the PR if there are any comments or after the pair is added
    > take into account that the defaultOracle should handle MOST of the pairs out there. if you have an improvement for the defaultOracle feel free to create a PR too :)

```ts
    function setPairOracle(address _pair, address _oracle) external override onlyGovernor {
        pairOracle[_pair] = _oracle;
    }
```

### Changing default oracle and considerations

> [IMPORTANT] remember that when changing the default oracle, some pairs might stop working. make sure new default oracle supports same tokens as previous one.

```ts
    function setDefaultOracle(address _defaultOracle) external override onlyGovernor {
        _setOracle(_defaultOracle);
    }
    function _setOracle(address _defaultOracle) internal {
        defaultOracle = _defaultOracle;
    }
```
npm package: @lbfalvy/array-utils
Description: A collection of useful utility functions for working with arrays
Author: Lawrence Bethlenfalvy
Latest version: 1.0.0

# Array-utils

A collection of utility functions for working with arrays.

## zip, unzip

Zip takes two arrays and creates an array of tuples from their elements.
Unzip does the same thing backwards; takes an array of tuples and returns
a tuple of arrays.

## mapMax, mapMaxIndex

Find the element (or its index) for which a custom mapped value is the
highest.

## divide

Sort an array into two separate arrays according to a filter.

If the second flag is set, leave holes in the arrays such that the
positions are preserved. Useful if you want to recombine them later.

## combine

Combines multiple arrays (with holes) into one. The inverse of divide
with the second flag set.

## applyWithCache

Takes a mapping function and optionally an initial state, returns a
function that takes an array and applies the mapper on any indices that
changed since the immediate last invocation.
npm package: @lbfalvy/react-context-menu
Description: Convenient and flexible custom context menus in React
Author: Lawrence Bethlenfalvy
Latest version: 1.0.2

# React Context Menu

Custom context menu for React, with a Provider-like interface as well as direct access to the menu for maximum flexibility

## usage

The data is structured in a tree of tuples
where the first element is the displayed name, and the second describes what
the element does:

```TS
type ContextMenuOption = [ReactNode, (() => void) | ContextMenuOption[] | null | undefined]
```

The component itself is called like so:

```TSX
<ContextMenu options={ContextMenuOption[]}>
  ...
</ContextMenu>
```

Right clicking on any descendant of this node will bring up the custom context
menu rather than the browser's default one. If you nest them, the menu elements
will appear one after the other, with a horizontal line separating them.

All layers of the context menu try to find room for themselves on either side
of the mouse pointer / their parent option, they won't extend off-screen unless
the frame is smaller than the menu.

On elements not wrapped in a ContextMenu, the browser's default context menu
will still appear. You aren't supposed to disable this for accessibility
reasons, but if you do it with something like

```TS
window.oncontextmenu = e => e.preventDefault()
```

then the custom menus won't break.
npm package: @lbfalvy/react-utils
Description: A set of small utilities for react that I needed at least twice in the past
Author: Lawrence Bethlenfalvy
Latest version: 2.0.0

# React utils

A set of small utilities for react that I needed at least
twice in the past

## classList

This is an omnipresent function, it appears in one form or another in nearly 
every React project because conditionally applying classes is incredibly
common. This variant can be called with logical expressions and returns a
well-formatted class list composed of those entries that evaluated to a
string or string array.

## useArray

React's dependency arrays have a fixed length, which creates a huge
problem in the perfectly normal case when you need to react to changes in
an array of changing length. useArray simply takes a variable length
array and returns its memo'd version. I explain how this can be used to
unambiguously represent nested arrays or other datastructures
[in this issue at React](https://github.com/facebook/react/issues/18229#issuecomment-781478424)

## useScripts

This hook takes an array of URLs and loads the scripts under those URLs
into the document. The scripts are removed on component unload, but
otherwise never touched on reloads as long as they're present in both
the previous and current version of the array. Returns a promise that
resolves when everything is loaded.

## useChangingHandle

useImperativeHandle, except it returns a function that you can call when
you like, allowing you full control over the ref value.

## mergeRefs

Takes multiple refs, returns a single old-style ref function. Calling this
function updates all refs.

## Bind

Turns an input into an uncontrolled component that updates a particular
entry on an object. Can be used with input events if the `dom` flag is
set, but it uses plain value onChange callbacks by default which is more
common among custom input components.

## usePointer

takes an optional handler that will be called on every mousemove. Returns
a function that can be used to get the last mouse position. The latter
uses a single global handler which is removed when the last hook is
unloaded.

## useWindowDimensions

Returns a tuple containing the current window dimensions. Since this is
unlikely to change a lot, it's easier this way than with the complicated
approach taken by usePointer

## useVariable

Read the value of a `@lbfalvy/mini-events` variable, and automatically rerender when it changes. This is a very small hook, but there are a few gotchas that I got wrong repeatedly in the past which ultimately justified adding it here with a test suite.

# Status

Everything has automatic tests except [usePointer] and
[useWindowDimensions] because I couldn't figure out how to test them.
Help in this regard is appreciated.
npm package: @lbfalvy/usedimensions
Description: Get notified when the bounding rect of a component changes
Author: Lawrence Bethlenfalvy
Latest version: 1.0.1

# useDimensions

Be notified when the client rect of an element changes. There are many implementations of this function on the internet but most of them aren't written for React and none of the other ones (that I know of) work all the time regardless of the reason for the change.

## usage

Just call the hook and then write whatever logic you want within your component. Note that `dimensions` maintains reference identity so you can safely use it in dependency arrays. Remeber that if you end up changing the dimensions of the target in this handler you can create an undetectable loop. Such loops aren't prevented by a rate limiter because it's normal for systems that depend on element sizes to rerender a few times before settling into a stable state.

```tsx
const [ref, dimensions, isVisible] = useDimensions<HTMLDivElement>()
React.useEffect(() => {
  if (!isVisible) console.log('div not visible')
  else console.log(`div appeared or changed size or position: ${dimensions}`)
}, [dimensions])
return <div ref={ref}>
  ...
</div>
npm package: @lbfrancisco/biome-config
Description: A Biome config for next, node and react.
Author: Lucas Francisco
Latest version: 1.0.5

# 🧩 Configuração personalizada para Biome

Este pacote fornece uma configuração personalizada para o Biome, com foco em projetos que utilizam JavaScript, TypeScript e JSON. Ele define regras de formatação, linting e organização de imports com uma padronização consistente para ambientes de desenvolvimento modernos.

# 🚀 Como usar
1. Instale o Biome (caso ainda não tenha)
```bash
pnpm i -d @biomejs/biome
#yarn add -d @biomejs/biome
#npm i -d @biomejs/biome
```

2. Execute o comando de geração do arquivo de configuração do Biome (caso ainda não tenha)
```bash
pnpm biome init
#yarn biome init
#npx @biomejs/biome init
```

3. Instale o pacote como dependência de desenvolvimento
```bash
pnpm i -d @lbfrancisco/biome-config
#yarn add -d @lbfrancisco/biome-config
#npm i -d @lbfrancisco/biome-config
```

4. Adicione a configuração ao seu projeto
```json
// biome.json 
{
	"$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
  "extends": ["@lbfrancisco/biome-config"]
}
```

5. Configure os scripts para formatação
```json
// package.json
{
  "scripts": {
    "format": "biome format . --write",
    "lint": "biome lint .",
    "lint:fix": "npm run lint -- --write",
  }
}
```
npm package: @lbgm/otp-widget
Description: OTP code input widget for Angular
Author: @lbgm
Latest version: 1.0.0

# OtpWidget
OTP code input widget for Angular

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.2.0.

![image](https://user-images.githubusercontent.com/92580505/212340376-892b9ee4-1cd3-4e38-bd2b-eed867c50221.png)

## install
```sh
npm i @lbgm/otp-widget
```

## Props
  Type:
   ```ts
   type TGap = "otp-gap-1" | "otp-gap-2" | "otp-gap-3" | "otp-gap-4" | "otp-gap-5" | "otp-gap-6" | "otp-gap-7" | "otp-gap-8" | "otp-gap-9" | "otp-gap-10" | "otp-gap-11" | "otp-gap-12" | "otp-gap-13" | "otp-gap-14" | "otp-gap-15" | "otp-gap-16" | "otp-gap-17" | "otp-gap-18" | "otp-gap-19" | "otp-gap-20" | "otp-gap-21" | "otp-gap-22" | "otp-gap-23" | "otp-gap-24" | "otp-gap-25" | "otp-gap-26" | "otp-gap-27" | "otp-gap-28" | "otp-gap-29" | "otp-gap-30" | "otp-gap-31" | "otp-gap-32" | "otp-gap-33" | "otp-gap-34" | "otp-gap-35" | "otp-gap-36" | "otp-gap-37" | "otp-gap-38" | "otp-gap-39" | "otp-gap-40" | "otp-gap-41" | "otp-gap-42" | "otp-gap-43" | "otp-gap-44" | "otp-gap-45" | "otp-gap-46" | "otp-gap-47" | "otp-gap-48";
   ```
   Defaults values & types
   ```js
    @Input() childs?: number = 4;
    @Input() type?: "number" | "text" = "number";
    @Input() placeholder?: string = '';
    @Input() gap?: TGap = "otp-gap-16";
   ```

 ## Events
 `code`: sends value filled as `string`;

 `filled`: when all inputs are filled;

## Use
 `app.module.ts` :
 ```ts
  //...
  import { OtpWidgetModule } from '@lbgm/otp-widget';

  @NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        OtpWidgetModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
 ```

 `app.component.html` :
 ```html
    <otp-widget (filled)="filled($event)" (code)="otp = $event"></otp-widget>
 ```

 ![image](https://user-images.githubusercontent.com/92580505/212340494-fa18c90b-cb68-4813-817d-e188343719e4.png)
npm package: @lbgm/otp-widget-vue
Description: OTP code input widget for Vue
Author: @lbgm
Latest version: 1.0.0-b

# otp-widget-vue
OTP code input widget for Vue 3

![image](https://user-images.githubusercontent.com/92580505/212340376-892b9ee4-1cd3-4e38-bd2b-eed867c50221.png)

## install
```sh
npm i @lbgm/otp-widget-vue
```

## Props
  Interface:
  ```ts
  interface Props {
    childs?: number;
    type?: "number" | "text";
    placeholder?: string;
    gap?: "otp-gap-1" | "otp-gap-2" | "otp-gap-3" | "otp-gap-4" | "otp-gap-5" | "otp-gap-6" | "otp-gap-7" | "otp-gap-8" | "otp-gap-9" | "otp-gap-10" | "otp-gap-11" | "otp-gap-12" | "otp-gap-13" | "otp-gap-14" | "otp-gap-15" | "otp-gap-16" | "otp-gap-17" | "otp-gap-18" | "otp-gap-19" | "otp-gap-20" | "otp-gap-21" | "otp-gap-22" | "otp-gap-23" | "otp-gap-24" | "otp-gap-25" | "otp-gap-26" | "otp-gap-27" | "otp-gap-28" | "otp-gap-29" | "otp-gap-30" | "otp-gap-31" | "otp-gap-32" | "otp-gap-33" | "otp-gap-34" | "otp-gap-35" | "otp-gap-36" | "otp-gap-37" | "otp-gap-38" | "otp-gap-39" | "otp-gap-40" | "otp-gap-41" | "otp-gap-42" | "otp-gap-43" | "otp-gap-44" | "otp-gap-45" | "otp-gap-46" | "otp-gap-47" | "otp-gap-48";
 }
  ```

 Default values:
 ```js
 {
  childs: 4,
  type: "number",
  placeholder: "",
  gap: "otp-gap-16"
 }
 ```

 ## Events
 `code`: sends value filled as `string`;

 `filled`: when all inputs are filled;

## Use
 main.ts :
 ```js
  import { OtpWidget } from '@lbgm/otp-widget-vue';

  // register as global component
  app.component('OtpWidget', OtpWidget);
 ```
 App.vue :
 ```js
 // import component style
 import '@lbgm/otp-widget-vue/style';

 import { ref } from "vue";
 import type { Ref } from "vue";

 const otp: Ref<string> = ref("");
 ```

 use component:
 ```html
    <otp-widget @filled="void 0" @code="otp = $event" />
 ```
 
 ![image](https://user-images.githubusercontent.com/92580505/212340494-fa18c90b-cb68-4813-817d-e188343719e4.png)


 ```js
  console.log(otp) : 8842
 ```
npm package: @lbh7/react-amap-auto-complete
Description: 通常情况下，开发者需要根据表单控件相关事件的触发来执行 `AMap.AutoComplete` 的 search 方法，并将返回结果绘制成DOM显示到页面上。
Author: Kenny Wong
Latest version: 1.0.7

AutoComplete 输入提示
===

[![Buy me a coffee](https://img.shields.io/badge/Buy%20me%20a%20coffee-048754?logo=buymeacoffee)](https://jaywcjlove.github.io/#/sponsor)
[![npm version](https://img.shields.io/npm/v/@lbh7/react-amap-auto-complete.svg)](https://www.npmjs.com/package/@lbh7/react-amap-auto-complete)
[![Downloads](https://img.shields.io/npm/dm/@lbh7/react-amap-auto-complete.svg?style=flat)](https://www.npmjs.com/package/@lbh7/react-amap-auto-complete)

通常情况下，开发者需要根据表单控件相关事件的触发来执行 `AMap.AutoComplete` 的 search 方法，并将返回结果绘制成DOM显示到页面上。除此之外，高德JS API还提供了一套默认的UI来帮助开发者节省时间、提升效率，自动在页面相应的表单控件上监听输入并显示匹配结果。

```jsx
import { AutoComplete } from '@lbh7/react-amap';
// 或者单独安装使用
import { AutoComplete } from '@lbh7/react-amap-auto-complete';
```

### 基本用法

```jsx mdx:preview
import React, { useState, useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';
import { APILoader, AutoComplete } from '@lbh7/react-amap';

const Example = () => {
  const mapRef = useRef();
  const [data, setData] = useState();
  const [city, setCity] = useState('上海市');
  const [input, setInput] = useState();
  useEffect(() => {
    setInput(mapRef.current);
  }, []);
  return (
    <>
      <input type="text" ref={mapRef} />
      <div style={{ width: '100%' }}>
        {input && (
          <AutoComplete
            input={input}
            onSelect={(opts) => {
              setData(opts);
              console.log('@@@@', opts)
            }}
          />
        )}
        <pre style={{ padding: 10, marginTop: 10 }}>
          {data ? JSON.stringify(data, null, 2) : '{请在输入框输入内容，下拉列表选择...}'}
        </pre>
      </div>
    </>
  );
}

const Mount = () => (
  <APILoader akey="a7a90e05a37d3f6bf76d4a9032fc9129">
    <Example />
  </APILoader>
);

export default Mount;
```

### Props

| 参数 | 说明 | 类型 | 默认值 |
|--------- |-------- |--------- |-------- |
| type | 输入提示时限定POI类型，多个类型用 `\|` 分隔，目前只支持Poi类型编码如“050000” 默认值：所有类别 | `string` | - |
| city | 输入提示时限定城市。可选值：城市名（中文或中文全拼）、citycode、adcode；默认值：“全国” | `string` | - |
| datatype | 返回的数据类型。可选值：all-返回所有数据类型、poi-返回POI数据类型、bus-返回公交站点数据类型、busline-返回公交线路数据类型目前暂时不支持多种类型 | string | - |
| citylimit | 是否强制限制在设置的城市内搜索,默认值为：false，true：强制限制设定城市，false：不强制限制设定城市 | boolean | - |
| input | 可选参数，用来指定一个input输入框，设定之后，在input输入文字将自动生成下拉选择列表。支持传入输入框DOM对象的id值，或直接传入输入框的DOM对象。 | string/HTMLInputElement | - |
| output | 可选参数，指定一个现有的div的id或者元素，作为展示提示结果的容器，当指定了input的时候有效，缺省的时候将自动创建一个显示结果面板 | string/HTMLDivElement | - |
| outPutDirAuto | 默认为true，表示是否在input位于页面较下方的时候自动将输入面板显示在input上方以避免被遮挡 | boolean | - |
| closeResultOnScroll | 页面滚动时关闭搜索结果列表，默认 true | boolean | - |
| lang | 设置检索语言类型，默认中文 'zh_cn' | string | - |

### 事件

| 参数 | 说明 | 类型 |
| ---- | ---- | ---- |
| onChoose | 鼠标或者键盘上下键选择POI信息时触发此事件 | `(event: AutoCompleteEventsCallback): void;` |
| onSelect | 鼠标点击或者回车选中某个POI信息时触发此事件 | `(event: AutoCompleteEventsCallback): void;` |
npm package: @lbh7/react-amap-circle
Description: 构造圆形对象，通过 CircleOptions 指定多边形样式
Author: Kenny Wong
Latest version: 1.0.7

Circle 圆形组件
===

[![Buy me a coffee](https://img.shields.io/badge/Buy%20me%20a%20coffee-048754?logo=buymeacoffee)](https://jaywcjlove.github.io/#/sponsor)
[![npm version](https://img.shields.io/npm/v/@lbh7/react-amap-circle.svg)](https://www.npmjs.com/package/@lbh7/react-amap-circle)
[![Downloads](https://img.shields.io/npm/dm/@lbh7/react-amap-circle.svg?style=flat)](https://www.npmjs.com/package/@lbh7/react-amap-circle)

构造圆形对象，通过 CircleOptions 指定多边形样式

```jsx
import { Circle } from '@lbh7/react-amap';
// 或者单独安装使用
import { Circle } from '@lbh7/react-amap-circle';
```

### 基本用法

```jsx mdx:preview
import ReactDOM from 'react-dom';
import React, { useState } from 'react';
import { Map, APILoader, Circle } from '@lbh7/react-amap';

const Example = () => {
  const [show, setShow] = useState(true);
  return (
    <>
      <button onClick={() => setShow(!show)}>
        {show ? '隐藏' : '显示'}
      </button>
      <div style={{ width: '100%', height: '300px' }}>
        <Map zoom={14} center={[116.400274, 39.905812]}>
          <Circle
            visiable={show}
            radius={1000}
            strokeColor="#fff"
            strokeWeight={2}
            center={new AMap.LngLat(116.39,39.9)}
          />
        </Map>
      </div>
    </>
  );
}

const Mount = () => (
  <APILoader akey="a7a90e05a37d3f6bf76d4a9032fc9129">
    <Example />
  </APILoader>
);

export default Mount;
```

### Props

[更多参数设置](https://github.com/uiwjs/react-amap/blob/268303de813050c7a02bb247930090ce5f162042/src/types/overlay.d.ts#L425-L475)

| 参数 | 说明 | 类型 | 默认值 |
|--------- |-------- |--------- |-------- |
| visiable | 覆盖物是否可见。 | `boolean` | - |
| radius | 圆半径，单位:米 | `number` | - |

### 事件

[事件类型文档](https://github.com/uiwjs/react-amap/blob/268303de813050c7a02bb247930090ce5f162042/src/types/overlay.d.ts#L399-L424)

| 参数 | 说明 | 类型 |
| ---- | ---- | ---- |
| onHide | 隐藏 | `(): void;` |
| onShow | 显示 | `(): void;` |
| onRightClick | 鼠标右键单击事件 | `(event: MapsEvent): void;` |
| onClick | 鼠标左键单击事件 | `(event: MapsEvent): void;` |
| onTouchEnd | 鼠标左键单击事件 | `(event: MapsEvent): void;` |
| onDblClick | 鼠标左键双击事件 | `(event: MapsEvent): void;` |
| onTouchMove | 触摸移动进行中时触发事件，仅适用移动设备 | `(event: MapsEvent): void;` |
| onTouchStart | 触摸开始时触发事件，仅适用移动设备 | `(event: MapsEvent): void;` |
| onMouseOut | 鼠标移出 | `(event: MapsEvent): void;` |
| onMouseOver | 鼠标经过 | `(event: MapsEvent): void;` |
| onMouseUp | 鼠标抬起 | `(event: MapsEvent): void;` |
| onMouseDown | 鼠标按下 | `(event: MapsEvent): void;` |
npm package: @lbh7/react-amap-context-menu
Description: 地图图面一种特殊的信息窗体，即右键菜单。
Author: Kenny Wong
Latest version: 1.0.7

ContextMenu 右键菜单
===

[![Buy me a coffee](https://img.shields.io/badge/Buy%20me%20a%20coffee-048754?logo=buymeacoffee)](https://jaywcjlove.github.io/#/sponsor)
[![npm version](https://img.shields.io/npm/v/@lbh7/react-amap-context-menu.svg)](https://www.npmjs.com/package/@lbh7/react-amap-context-menu)
[![Downloads](https://img.shields.io/npm/dm/@lbh7/react-amap-context-menu.svg?style=flat)](https://www.npmjs.com/package/@lbh7/react-amap-context-menu)

地图图面一种特殊的信息窗体，即右键菜单。[AMap.ContextMenu](https://a.amap.com/jsapi/static/doc/index.html#contextmenu) 类提供图面添加右键菜单的方式。具体使用方式如下

```jsx
import { ContextMenu } from '@lbh7/react-amap';
// 或者单独安装使用
import { ContextMenu } from '@lbh7/react-amap-context-menu';
```

### 基本用法

地图上右击鼠标，弹出自定义样式的右键菜单

```jsx mdx:preview
import ReactDOM from 'react-dom';
import React, { useState, useRef } from 'react';
import { Map, APILoader, ContextMenu } from '@lbh7/react-amap';

const Example = () => {
  const [show, setShow] = useState(true);
  const mapRef = useRef();
  let lnglat = null;

  function handleMenu(type) {
    if (mapRef && mapRef.current && mapRef.current.map) {
      switch(type) {
        case 'zoomIn': mapRef.current.map.zoomIn(); break;
        case 'zoomOut': mapRef.current.map.zoomOut(); break;
        case 'center': mapRef.current.map.setZoomAndCenter(4, [108.946609, 34.262324]); break;
      }
      if (type === 'marker' && lnglat) {
        new AMap.Marker({
            map: mapRef.current.map,
            position: lnglat //基点位置
        });
      }
    }
  }
  return (
    <div style={{ width: '100%', height: '500px' }}>
      <Map
        ref={mapRef}
        zoom={14}
        center={[116.397637, 39.900001]}
        scrollWheel={false}
        onRightClick={(e) => {
          lnglat = e.lnglat;
        }}
      >
        <ContextMenu>
          <ContextMenu.Item text="放大一级" onClick={(e) => handleMenu('zoomIn')} />
          <ContextMenu.Item text="缩小一级" onClick={(e) => handleMenu('zoomOut')} />
          <ContextMenu.Item text="缩放至全国范围" onClick={(e) => handleMenu('center')} />
          <ContextMenu.Item text="添加标记" onClick={(e) => handleMenu('marker')} />
        </ContextMenu>
      </Map>
    </div>
  );
}

const Mount = () => (
  <APILoader akey="a7a90e05a37d3f6bf76d4a9032fc9129">
    <Example />
  </APILoader>
);

export default Mount;
```

### Props

| 参数 | 说明 | 类型 | 默认值 |
|--------- |-------- |--------- |-------- |
| position | 右键菜单显示的位置 | `Vector \| LngLat` | - |
| content | 右键菜单内容（针对自定义菜单时，添加菜单内容及功能。可以是HTML要素字符串或者HTML DOM对象。） | `string \| HTMLElement` | - |

### 事件

| 参数 | 说明 | 类型 |
| ---- | ---- | ---- |
| onOpen | 打开之后触发事件 | `(opts: { type: string }): void;` |
| onClose | 关闭之后触发事件 | `(opts: { type: string }): void;` |
npm package: @lbh7/react-amap-control-bar-control
Description: 组合了旋转、倾斜、复位在内的地图控件。
Author: Kenny Wong
Latest version: 1.0.7

ControlBarControl 组合了旋转、倾斜、复位在内的地图控件
===

[![Buy me a coffee](https://img.shields.io/badge/Buy%20me%20a%20coffee-048754?logo=buymeacoffee)](https://jaywcjlove.github.io/#/sponsor)
[![npm version](https://img.shields.io/npm/v/@lbh7/react-amap-control-bar-control.svg)](https://www.npmjs.com/package/@lbh7/react-amap-control-bar-control)
[![Downloads](https://img.shields.io/npm/dm/@lbh7/react-amap-control-bar-control.svg?style=flat)](https://www.npmjs.com/package/@lbh7/react-amap-control-bar-control)

组合了旋转、倾斜、复位在内的地图控件。 [相关示例](https://lbs.amap.com/api/jsapi-v2/example/map-componets/map-with-function-control/)

```jsx
import { ControlBarControl } from '@lbh7/react-amap';
// 或者单独安装使用
import { ControlBarControl } from '@lbh7/react-amap-control-bar-control';
```

### 基本用法

```jsx mdx:preview
import ReactDOM from 'react-dom';
import React, { useState, useRef } from 'react';
import { Map, APILoader, ControlBarControl } from '@lbh7/react-amap';

const Demo = () => {
  const [show, setShow] = useState(true);
  return (
    <>
      <button onClick={() => setShow(!show)}>
        {show ? '关闭' : '开启'}
      </button>
      <div style={{ width: '100%', height: '300px' }}>
        <Map>
          <ControlBarControl
            visiable={show}
            offset={[30, 10]}
            position="RT"
          />
          {show && (
            <ControlBarControl
              visiable={show}
              offset={[10, 10]}
              position="RB"
            />
          )}
        </Map>
      </div>
    </>
  );
}

const Mount = () => (
  <APILoader akey="a7a90e05a37d3f6bf76d4a9032fc9129">
    <Demo />
  </APILoader>
);

export default Mount;
```

### Props

| 参数 | 说明 | 类型 | 默认值 |
| ----- | ----- | ----- | ----- |
| visiable | 覆盖物是否可见。 | `boolean` | - |
| position | 控件停靠位置 `{ top: 5; left: 5; right: 5; bottom: 5 }` 或者 'LT': 左上角, 'RT': 右上角, 'LB': 左下角, 'RB': 右下角。 | `string| object` | - |
| offset | 相对于地图容器左上角的偏移量，正数代表向右下偏移。默认为 `AMap.Pixel(10,10)` | `[number, number]` | - |
npm package: @lbh7/react-amap-ellipse
Description: 构造圆形对象，通过 EllipseOptions 指定多边形样式。
Author: Kenny Wong
Latest version: 1.0.7

Ellipse 椭圆组件
===

[![Buy me a coffee](https://img.shields.io/badge/Buy%20me%20a%20coffee-048754?logo=buymeacoffee)](https://jaywcjlove.github.io/#/sponsor)
[![npm version](https://img.shields.io/npm/v/@lbh7/react-amap-ellipse.svg)](https://www.npmjs.com/package/@lbh7/react-amap-ellipse)
[![Downloads](https://img.shields.io/npm/dm/@lbh7/react-amap-ellipse.svg?style=flat)](https://www.npmjs.com/package/@lbh7/react-amap-ellipse)

构造椭圆圆形对象，通过 EllipseOptions 指定多边形样式

```jsx
import { Ellipse } from '@lbh7/react-amap';
// 或者单独安装使用
import { Ellipse } from '@lbh7/react-amap-ellipse';
```

### 基本用法

```jsx mdx:preview
import ReactDOM from 'react-dom';
import React, { useState, useRef } from 'react';
import { Map, APILoader, Ellipse } from '@lbh7/react-amap';

const Example = () => {
  const [show, setShow] = useState(true);
  return (
    <>
      <button onClick={() => setShow(!show)}>
        {show ? '隐藏' : '显示'}
      </button>
      <Map zoom={4} style={{ height: 300 }}>
        <Ellipse
          visiable={show}
          radius={[1000000, 200000]}
          borderWeight={3}
          strokeColor="#FF33FF"
          strokeOpacity={1}
          strokeWeight={6}
          strokeOpacity={0.2}
          fillOpacity={0.4}
          // 线样式还支持 'dashed'
          strokeStyle="dashed"
          strokeDasharray={[10, 10]}
          fillColor="#1791fc"
          zIndex={50}
          center={new AMap.LngLat(116.433322, 39.900255)}
        />
      </Map>
    </>
  );
}

const Mount = () => (
  <APILoader akey="a7a90e05a37d3f6bf76d4a9032fc9129">
    <Example />
  </APILoader>
);

export default Mount;
```

### Props

[更多参数设置](https://github.com/uiwjs/react-amap/blob/268303de813050c7a02bb247930090ce5f162042/src/types/overlay.d.ts#L507-L567)

| 参数 | 说明 | 类型 | 默认值 |
|--------- |-------- |--------- |-------- |
| visiable | 覆盖物是否可见。 | `boolean` | - |
| center | 	椭圆圆心 | `LngLatLike` | - |

### 事件

[事件类型文档](https://github.com/uiwjs/react-amap/blob/268303de813050c7a02bb247930090ce5f162042/src/types/overlay.d.ts#L569-L593)

| 参数 | 说明 | 类型 |
| ---- | ---- | ---- |
| onHide | 隐藏 | `(data: { type: string, target: any }): void;` |
| onShow | 显示 | `(data: { type: string, target: any }): void;` |
| onClick | 鼠标左键单击事件 | `(event: MapsEvent): void;` |
| onDblClick | 鼠标左键双击事件 | `(event: MapsEvent): void;` |
| onRightClick | 鼠标右键单击事件 | `(event: MapsEvent): void;` |
| onMouseOver | 鼠标经过 | `(event: MapsEvent): void;` |
| onTouchEnd | 触摸结束时触发事件，仅适用移动设备 | `(event: MapsEvent): void;` |
| onTouchMove | 触摸移动进行中时触发事件，仅适用移动设备 | `(event: MapsEvent): void;` |
| onTouchStart | 触摸开始时触发事件，仅适用移动设备 | `(event: MapsEvent): void;` |
| onMouseOut | 鼠标移出 | `(event: MapsEvent): void;` |
| onMouseUp | 鼠标抬起 | `(event: MapsEvent): void;` |
| onMouseDown | 鼠标按下 | `(event: MapsEvent): void;` |
npm package: @lbh7/react-amap-hawk-eye-control
Description: 鹰眼控件，用于显示缩略地图，显示于地图右下角，可以随主图的视口变化而变化，也可以配置成固定位置实现类似于南海附图的效果。
Author: Kenny Wong
Latest version: 1.0.7

HawkEyeControl 鹰眼控件
===

[![Buy me a coffee](https://img.shields.io/badge/Buy%20me%20a%20coffee-048754?logo=buymeacoffee)](https://jaywcjlove.github.io/#/sponsor)
[![npm version](https://img.shields.io/npm/v/@lbh7/react-amap-hawk-eye-control.svg)](https://www.npmjs.com/package/@lbh7/react-amap-hawk-eye-control)
[![Downloads](https://img.shields.io/npm/dm/@lbh7/react-amap-hawk-eye-control.svg?style=flat)](https://www.npmjs.com/package/@lbh7/react-amap-hawk-eye-control)

鹰眼控件，用于显示缩略地图，显示于地图右下角，可以随主图的视口变化而变化，也可以配置成固定位置实现类似于南海附图的效果。

```jsx
import { HawkEyeControl } from '@lbh7/react-amap';
// 或者单独安装使用
import { HawkEyeControl } from '@lbh7/react-amap-hawk-eye-control';
```

### 基本用法

```jsx mdx:preview
import ReactDOM from 'react-dom';
import React, { useState, useRef } from 'react';
import { Map, APILoader, HawkEyeControl } from '@lbh7/react-amap';

const Demo = () => {
  const [show, setShow] = useState(true);
  return (
    <>
      <button onClick={() => setShow(!show)}>
        {show ? '隐藏' : '显示'}鹰眼控件
      </button>
      <div style={{ width: '100%', height: '300px' }}>
        <Map zoom={6} ref={(instance) => {
          if (instance && instance.map) {
            // 可以通过如下方法添加 鹰眼控件
            // const overView = new AMap.HawkEye({
            // });
            // instance.map.addControl(overView);
          }
        }}>
          <HawkEyeControl
            visiable={show}
            offset={[50, 10]}
          />
        </Map>
      </div>
    </>
  );
}

const Mount = () => (
  <APILoader akey="a7a90e05a37d3f6bf76d4a9032fc9129">
    <Demo />
  </APILoader>
);

export default Mount;
```

### Props

[更多参数设置](https://github.com/uiwjs/react-amap/blob/268303d/src/types/control.d.ts#L102-L143)

| 参数 | 说明 | 类型 | 默认值 |
| ----- | ----- | ----- | ----- |
| visiable | 覆盖物是否可见。 | `boolean` | - |
| offset | 相对于地图容器左上角的偏移量，正数代表向右下偏移。默认为 `AMap.Pixel(10,10)` | `[number, number]` | - |
| autoMove | 是否随主图视口变化移动 | boolean | - |
| showRectangle | 是否显示视口矩形 | boolean | - |
| showButton | 是否显示打开关闭的按钮 | boolean | - |
| isOpen | 默认是否展开 | boolean | `true` |
| mapStyle | 缩略图要显示的地图自定义样式，如 `amap://styles/dark` | string | - |
| layers | 缩略图要显示的图层类型，默认为普通矢量地图 | array | - |
| width | 缩略图的宽度，同CSS，如 `200px` | string | - |
| height | 缩略图的高度，同CSS，如 `200px` | string | - |
| borderStyle | 缩略图的边框样式，同CSS，如 "double solid solid double" | string | - |
| borderColor | 缩略图的高度，同CSS，如 `silver` | string | - |
| borderRadius | 缩略图的高度，同CSS，如 `5px` | string | - |
| borderWidth | 缩略图的高度，同CSS，如 `2px` | string | - |
| buttonSize | 箭头按钮的像素尺寸，同CSS，如 `12px` | string | - |
npm package: @lbh7/react-amap-map-type-control
Description: 用于在地图上弹出一个详细信息展示窗体，地图上只允许同时展示 `1` 个信息窗体。
Author: Kenny Wong
Latest version: 1.0.7

MapTypeControl 类型切换
===

[![Buy me a coffee](https://img.shields.io/badge/Buy%20me%20a%20coffee-048754?logo=buymeacoffee)](https://jaywcjlove.github.io/#/sponsor)
[![npm version](https://img.shields.io/npm/v/@lbh7/react-amap-map-type-control.svg)](https://www.npmjs.com/package/@lbh7/react-amap-map-type-control)
[![Downloads](https://img.shields.io/npm/dm/@lbh7/react-amap-map-type-control.svg?style=flat)](https://www.npmjs.com/package/@lbh7/react-amap-map-type-control)

地图类型切换插件。用户通过该插件进行地图切换。

```jsx
import { MapTypeControl } from '@lbh7/react-amap';
// 或者单独安装使用
import { MapTypeControl } from '@lbh7/react-amap-map-type-control';
```

### 基本用法

```jsx mdx:preview
import ReactDOM from 'react-dom';
import React, { useState, useRef } from 'react';
import { Map, APILoader, MapTypeControl } from '@lbh7/react-amap';

const Demo = () => {
  const [show, setShow] = useState(true);
  return (
    <>
      <button onClick={() => setShow(!show)}>
        {show ? '隐藏' : '显示'}
      </button>
      <div style={{ width: '100%', height: '300px' }}>
        <Map>
          <MapTypeControl
            visiable={show}
            offset={[30, 10]}
            position="RT"
          />
          {show && (
            <MapTypeControl
              visiable={show}
              offset={[10, 10]}
              position="RB"
            />
          )}
        </Map>
      </div>
    </>
  );
}

const Mount = () => (
  <APILoader akey="a7a90e05a37d3f6bf76d4a9032fc9129">
    <Demo />
  </APILoader>
);

export default Mount;
```

### Props

| 参数 | 说明 | 类型 | 默认值 |
| ----- | ----- | ----- | ----- |
| visiable | 覆盖物是否可见。 | `boolean` | - |
| showRoad | 覆盖物是否可见。 | `boolean` | `false` |
| showTraffic | 叠加实时交通图层 默认值：false | `boolean` | `false` |
| defaultType | 初始化默认图层类型。 取值为0：默认底图 取值为1：卫星图 默认值：0 | `number` | `0` |
npm package: @lbh7/react-amap-rectangle
Description: 构造圆形对象，通过 RectangleOptions 指定多边形样式。
Author: Kenny Wong
Latest version: 1.0.7

Rectangle 圆形组件
===

[![Buy me a coffee](https://img.shields.io/badge/Buy%20me%20a%20coffee-048754?logo=buymeacoffee)](https://jaywcjlove.github.io/#/sponsor)
[![npm version](https://img.shields.io/npm/v/@lbh7/react-amap-rectangle.svg)](https://www.npmjs.com/package/@lbh7/react-amap-rectangle)
[![Downloads](https://img.shields.io/npm/dm/@lbh7/react-amap-rectangle.svg?style=flat)](https://www.npmjs.com/package/@lbh7/react-amap-rectangle)

构造圆形对象，通过 RectangleOptions 指定多边形样式

```jsx
import { Rectangle } from '@lbh7/react-amap';
// 或者单独安装使用
import { Rectangle } from '@lbh7/react-amap-rectangle';
```

### 基本用法

```jsx mdx:preview
import ReactDOM from 'react-dom';
import React, { useState, useRef } from 'react';
import { Map, APILoader, Rectangle } from '@lbh7/react-amap';

const Example = () => {
  const [show, setShow] = useState(true);
  const southWest = new AMap.LngLat(108.245573, 39.027206);
  const northEast = new AMap.LngLat(116.485319, 26.666506);
  const bounds = new AMap.Bounds(southWest, northEast);
  return (
    <>
      <button onClick={() => setShow(!show)}>
        {show ? '隐藏' : '显示'}
      </button>
      <div style={{ width: '100%', height: '300px' }}>
        <Map zoom={4}>
          <Rectangle
            visiable={show}
            bounds={bounds}
            strokeColor="red"
            strokeWeight={6}
            strokeOpacity={0.5}
            strokeDasharray={[30, 10]}
            // strokeStyle还支持 solid
            strokeStyle="dashed"
            fillColor="blue"
            fillOpacity={0.5}
            cursor="pointer"
            zIndex={50}
          />
        </Map>
      </div>
    </>
  );
}

const Mount = () => (
  <APILoader akey="a7a90e05a37d3f6bf76d4a9032fc9129">
    <Example />
  </APILoader>
);

export default Mount;
```

### Props

[更多参数设置](https://github.com/uiwjs/react-amap/blob/268303d/src/types/overlay.d.ts#L619-L652)

| 参数 | 说明 | 类型 | 默认值 |
|--------- |-------- |--------- |-------- |
| visiable | 覆盖物是否可见。 | `boolean` | - |
| bounds | 矩形覆盖物的叠加顺序。地图上存在多个矩形覆盖物叠加时，通过该属性使级别较高的矩形覆盖物在上层显示 | `Bounds` | `10` |

### 事件

[事件类型文档](https://github.com/uiwjs/react-amap/blob/268303d/src/types/overlay.d.ts#L653-L680)

| 参数 | 说明 | 类型 |
| ---- | ---- | ---- |
| onClick | 鼠标左键单击事件 | `(event: MapsEvent): void;` |
| onDblClick | 鼠标左键双击事件 | `(event: MapsEvent): void;` |
| onRightClick | 右键单击 | `(event: MapsEvent): void;` |
| onHide | 隐藏 | `(event: { type: string; target: any }): void;` |
| onShow | 显示 | `(event: { type: string; target: any }): void;` |
| onMouseDown | 鼠标按下 | `(event: MapsEvent): void;` |
| onMouseUp | 鼠标抬起 | `(event: MapsEvent): void;` |
| onMouseOver | 鼠标经过 | `(event: MapsEvent): void;` |
| onMouseOut | 鼠标移出 | `(event: MapsEvent): void;` |
| onChange | 属性发生变化时 | `(event: { type: string; target: any }): void;` |
| onTouchStart | 触摸开始时触发事件，仅适用移动设备 | `(event: MapsEvent): void;` |
| onTouchMove | 触摸移动进行中时触发事件，仅适用移动设备 | `(event: MapsEvent): void;` |
| onTouchEnd | 触摸结束时触发事件，仅适用移动设备 | `(event: MapsEvent): void;` |