open-index/open-npm huggingface dataset:
npm package: @pnsdomains/relay-kit
Description: Safe Relay Kit
Author: Safe
Latest version: 1.0.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Relay Kit

[![NPM Version](https://badge.fury.io/js/%40safe-global%2Frelay-kit.svg)](https://badge.fury.io/js/%40safe-global%2Frelay-kit)
[![GitHub Release](https://img.shields.io/github/release/safe-global/safe-core-sdk.svg?style=flat)](https://github.com/safe-global/safe-core-sdk/releases)
[![GitHub](https://img.shields.io/github/license/safe-global/safe-core-sdk)](https://github.com/safe-global/safe-core-sdk/blob/main/LICENSE.md)

The Relay Kit allows to abstract users from the transaction fees payment (gas fees) allowing the use of native token or ERC-20 tokens. This will enable you to pay transaction fees directly from funding available in a Safe.

## Reference

- [Relay Kit docs](https://docs.safe.global/learn/safe-core-account-abstraction-sdk/relay-kit)

## License

This library is [released under MIT](https://github.com/safe-global/safe-core-sdk/blob/main/LICENSE.md).
npm package: @pnsdomains/safe-core-sdk-utils
Description: Safe Core SDK Utilities
Author: Safe
Latest version: 1.7.3

# Safe Core SDK Utils

[![NPM Version](https://badge.fury.io/js/%40safe-global%2Fsafe-core-sdk-utils.svg)](https://badge.fury.io/js/%40safe-global%2Fsafe-core-sdk-utils)
[![GitHub Release](https://img.shields.io/github/release/safe-global/safe-core-sdk.svg?style=flat)](https://github.com/safe-global/safe-core-sdk/releases)
[![GitHub](https://img.shields.io/github/license/safe-global/safe-core-sdk)](https://github.com/safe-global/safe-core-sdk/blob/main/LICENSE.md)

Utilities for the [Safe Core SDK](https://github.com/safe-global/safe-core-sdk) monorepo.

## Table of contents
* [Installation](#installation)
* [Build](#build)

## <a name="installation">Installation</a>

Install the package with yarn or npm:

```bash
yarn install
npm install
```

## <a name="build">Build</a>

Build the package with yarn or npm:

```bash
yarn build
npm build
```
npm package: @pnsdomains/safe-ethers-adapters
Description: Safe Ethers Adapters
Author: Safe
Latest version: 0.1.0-alpha.17

# Safe Ethers Adapters

[![NPM Version](https://badge.fury.io/js/%40safe-global%2Fsafe-ethers-adapters.svg)](https://badge.fury.io/js/%40safe-global%2Fsafe-ethers-adapters)
[![GitHub](https://img.shields.io/github/license/safe-global/safe-core-sdk)](https://github.com/safe-global/safe-core-sdk/blob/main/LICENSE.md)

[Ethers](https://docs.ethers.io/v5/single-page/) adapter that facilitates the interaction with the [Safe Services](https://github.com/safe-global/safe-transaction-service)

## Getting Started

The only adapter currently provided is the `SafeEthersSigner` which implements the [`Signer` interface](https://docs.ethers.io/v5/api/signer/#Signer) from Ethers.

The `SafeEthersSigner` can be used with [Ethers Contracts](https://docs.ethers.io/v5/getting-started/#getting-started--contracts) to deploy and interact with them. Each of these interactions will create a Safe transaction that is published to the [Safe transaction service](https://docs.gnosis.io/safe/docs/services_transactions/). 

For this to work it is required to initialize the `SafeEthersSigner` with an account that is either an owner of the specified Safe or a [delegate](https://docs.gnosis.io/safe/docs/tutorial_tx_service_set_delegate/) of one of the owners.

An example for such an account would be the private key of one of the owners that is used with an [Ethers Wallet](https://docs.ethers.io/v5/api/signer/#Wallet)

```js
const signer = new Wallet("some_private_key", ethereumProvider)
```

It is also necessary to specify a service instance that should be used to publish the Safe transactions. An example for this would be the Mainnet instance of the [Safe Transaction Service](https://safe-transaction-mainnet.safe.global/): `https://safe-transaction-mainnet.safe.global/`

```js
const service = new SafeService("some_service_url")
```

A Safe instance must also be created before obtaining the signer.
It may be obtained with:

```js
import { ethers } from "ethers"
import Safe from "@pnsdomains/safe-core-sdk"
import EthersAdapter from "@pnsdomains/safe-ethers-lib"

const safe = await Safe.create({
  ethAdapter: new EthersAdapter({ ethers, signerOrProvider }),
  safeAddress: "some_safe_address"
})
```

Using these components it is possible to create an instance of the `SafeEthersSigner`

```js
const safeSigner = new SafeEthersSigner(safe, service, provider)
```

See [examples](/packages/safe-ethers-adapters/examples) for more information.

## Installation

Select correct nvm version:

```bash
nvm use
```

Install the package with yarn or npm:

```bash
yarn install
npm install
```

## Build

Build the package with yarn or npm:

```bash
yarn build
npm build
```

## License

This library is released under MIT.

## Contributors

- Richard Meisser ([rmeissner](https://github.com/rmeissner))
- Germán Martínez ([germartinez](https://github.com/germartinez))
npm package: @pnsdomains/safe-ethers-lib
Description: Ethers library adapter to be used by Safe Core SDK
Author: Safe
Latest version: 1.9.5

# Safe Ethers Lib

[![NPM Version](https://badge.fury.io/js/%40safe-global%2Fsafe-ethers-lib.svg)](https://badge.fury.io/js/%40safe-global%2Fsafe-ethers-lib)
[![GitHub Release](https://img.shields.io/github/release/safe-global/safe-core-sdk.svg?style=flat)](https://github.com/safe-global/safe-core-sdk/releases)
[![GitHub](https://img.shields.io/github/license/safe-global/safe-core-sdk)](https://github.com/safe-global/safe-core-sdk/blob/main/LICENSE.md)

Ethers.js wrapper that contains some utilities and the Safe contracts types (generated with typechain ethers-v5). It is used to initialize the [Safe Core SDK](https://github.com/safe-global/safe-core-sdk/tree/main/packages/safe-core-sdk).

## Table of contents
* [Installation](#installation)
* [Build](#build)
* [Initialization](#initialization)
* [License](#license)
* [Contributors](#contributors)

## <a name="installation">Installation</a>

Install the package with yarn or npm:

```bash
yarn install
npm install
```

## <a name="build">Build</a>

Build the package with yarn or npm:

```bash
yarn build
npm build
```

## <a name="initialization">Initialization</a>

If the app integrating the SDK is using `Ethers` `v5`, create an instance of the `EthersAdapter`, where `signer` is the Ethereum account we are connecting and the one who will sign the transactions.

```js
import { ethers } from 'ethers'
import EthersAdapter from '@pnsdomains/safe-ethers-lib'

const web3Provider = // ...
const provider = new ethers.providers.Web3Provider(web3Provider)
const safeOwner = provider.getSigner(0)

const ethAdapter = new EthersAdapter({
  ethers,
  signerOrProvider: safeOwner
})
```

Depending on whether the `ethAdapter` instance is used to sign/execute transactions or just call read-only methods, the `signerOrProvider` property can be a `Signer` or a `Provider`.

## <a name="license">License</a>

This library is released under MIT.

## <a name="contributors">Contributors</a>

- Germán Martínez ([germartinez](https://github.com/germartinez))
npm package: @pnsdomains/safe-web3-lib
Description: Web3 library adapter to be used by Safe Core SDK
Author: Safe
Latest version: 1.9.3

# Safe Web3 Lib

[![NPM Version](https://badge.fury.io/js/%40safe-global%2Fsafe-web3-lib.svg)](https://badge.fury.io/js/%40safe-global%2Fsafe-web3-lib)
[![GitHub Release](https://img.shields.io/github/release/safe-global/safe-core-sdk.svg?style=flat)](https://github.com/safe-global/safe-core-sdk/releases)
[![GitHub](https://img.shields.io/github/license/safe-global/safe-core-sdk)](https://github.com/safe-global/safe-core-sdk/blob/main/LICENSE.md)

Web3.js wrapper that contains some utilities and the Safe contracts types (generated with typechain web3-v1). It is used to initialize the [Safe Core SDK](https://github.com/safe-global/safe-core-sdk/tree/main/packages/safe-core-sdk).

## Table of contents
* [Installation](#installation)
* [Build](#build)
* [Initialization](#initialization)
* [License](#license)
* [Contributors](#contributors)

## <a name="installation">Installation</a>

Install the package with yarn or npm:

```bash
yarn install
npm install
```

## <a name="build">Build</a>

Build the package with yarn or npm:

```bash
yarn build
npm build
```

## <a name="initialization">Initialization</a>

If the app integrating the SDK is using `Web3`, create an instance of the `Web3Adapter`, where `signerAddress` is the Ethereum account we are connecting and the one who will sign the transactions.

```js
import Web3 from 'web3'
import Web3Adapter from '@pnsdomains/safe-web3-lib'

const provider = new Web3.providers.HttpProvider('http://localhost:8545')
const web3 = new Web3(provider)
const safeOwner = '0x<address>'

const ethAdapter = new Web3Adapter({
  web3,
  signerAddress: safeOwner
})
```

In case the `ethAdapter` instance is only used to execute read-only methods the `signerAddress` property can be omitted.

```js
const readOnlyEthAdapter = new Web3Adapter({ web3 })
```

## <a name="license">License</a>

This library is released under MIT.

## <a name="contributors">Contributors</a>

- Germán Martínez ([germartinez](https://github.com/germartinez))
npm package: @pnstack/react-native-table
Description: React native table component
Author: Phạm Văn Nguyên
Latest version: 0.1.4

# react-native-table

React native table component

## Installation

```sh
yarn add @pnstack/react-native-table
```

## Usage

```js
<Table
  columns={[
    {
      title: 'id',
      key: 'id',
      dataIndex: 'id',
    },
    {
      title: 'Name',
      key: 'name',
      dataIndex: 'name',
    },
  ]}
  dataSource={[
    {
      id: 1,
      name: 'name 1',
    },
    {
      id: 2,
      name: 'name 2',
    },
  ]}
/>
```

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT

---

Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
npm package: @pnta/n8n-nodes-pnta
Description: n8n community node for PNTA.io push notification service
Author: Martins Laucis
Latest version: 0.1.2

# @pnta/n8n-nodes-pnta

[![npm version](https://badge.fury.io/js/@pnta%2Fn8n-nodes-pnta.svg)](https://badge.fury.io/js/@pnta%2Fn8n-nodes-pnta)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

This is an n8n community node for PNTA.io. It lets you send push notifications and manage PNTA devices/topics in your n8n workflows.

[n8n](https://n8n.io/) is a [fair-code licensed](https://docs.n8n.io/reference/license/) workflow automation platform.

## Installation

Follow the [installation guide](https://docs.n8n.io/integrations/community-nodes/installation/) in the n8n community nodes documentation.

## Operations

- Notification
  - Send Notification
- Device
  - List Devices
  - Update Device Metadata
- Topic
  - List Topics

## Credentials

Use a PNTA API Key.

1. Go to PNTA dashboard → API Keys
2. Create or copy an API key
3. In n8n, create a new credential of type "PNTA.io API" and paste the key

## Compatibility

Compatible with n8n@1.60.0 or later

## Resources

- [n8n community nodes documentation](https://docs.n8n.io/integrations/#community-nodes)
- [PNTA API docs](https://docs.pnta.io/api)
npm package: @pnthach95/react-native-root-view-background
Description: Set root view background color for Android and iOS
Author: Pham Ngoc Thach
Latest version: 2.0.0

# React Native Root View Background

Original: https://github.com/johniak/react-native-root-view-background

Remake to support React Native latest version.

Set background color of root view to fix white flash when using dark theme and navigating with React Navigation. Read more in `example`.

## After

<p align="center" >
    <img alt="react-native-gifted-chat" src="https://media.giphy.com/media/3o7WIq8RMAQB92cUSI/giphy.gif" width="480" height="484" />
</p>

## Before

<p align="center" >
    <img alt="react-native-gifted-chat" src="https://media.giphy.com/media/l4pT7TwVEaawBxBzG/giphy.gif" width="480" height="484" />
</p>

## Installation

`npm i @pnthach95/react-native-root-view-background --save`

or

`yarn add @pnthach95/react-native-root-view-background`

> [!NOTE]
> From v2, old arch is not supported

> [!NOTE]
> New arch supported since v1.4.8
>
> If latest version doesn't work, try v1.4.3

## Usage

```js
import { setRootViewBackgroundColor } from '@pnthach95/react-native-root-view-background';

const Main = () => {
  useEffect(() => {
    setRootViewBackgroundColor('#ccc');
  }, []);
}
```

## For Expo users:

They have [SystemUI](https://docs.expo.dev/versions/latest/sdk/system-ui/) which is similar to this package

## Contributing

- [Development workflow](CONTRIBUTING.md#development-workflow)
- [Sending a pull request](CONTRIBUTING.md#sending-a-pull-request)
- [Code of conduct](CODE_OF_CONDUCT.md)

## License

MIT

---

Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
npm package: @pnx-mixtape/accordion
Description: accordion component
Author: PreviousNext
Latest version: 2.0.2

# @pnx-mixtape/accordion

Documentation and examples: [Accordion](https://mixtape.pnx.io/section-elements.html#kssref-elements-accordion)

### Installation

```
npm install @pnx-mixtape/accordion --save-dev
```

### How to use

**CSS**

- PostCSS workflow: `@import '@pnx-mixtape/accordion';`
- Native CSS: `@import url('dist/accordion.css');`
- Link tag: `<link href="dist/accordion.css" rel="stylesheet" type="text/css">`

**Web Components**

Web Components are self defined, simply import the desired feature. These do not use the Shadow DOM. External CSS applies.

- DetailsBase import: `import '@pnx-mixtape/accordion/DetailsBase';` and be sure to include `<mx-details>` around the `<details />` tag.
- DetailsMobile import: `import '@pnx-mixtape/accordion/DetailsBase';` and be sure to include `<mx-detailsmobile>` around the `<details />` tag.
- DetailsDiv import: `import '@pnx-mixtape/accordion/DetailsBase';` and be sure to include `<mx-detailsdiv class="accordion">` instead of the `<details />` tag.

```html
<mx-details>
  <details class="accordion">
    <summary class="accordion__toggle">Title</summary>
    <div class="accordion__content">
      <p>Body content</p>
    </div>
  </details>
</mx-details>
```

See twig files for all HTML examples.

**Vanilla JS (to be deprecated)**

Javascript is used to handle opening and closing the accordion when the user prints the screen. This sets the open attribute `onbeforeprint` and closes it `onafterprint` window events. The content's ID is also set via js.

- ES6 import: `import { Accordion, AccordionDiv } from '@pnx-mixtape/accordion';`
- ES6 submodule import: `import AccordionDiv from '@pnx-mixtape/accordion/accordion-div';`
- Script tag: `<script src="dist/accordion.js" type="text/javascript"></script>`

```html
<details class="accordion" data-accordion>
  <summary class="accordion__toggle">Title</summary>
  <div class="accordion__content">
    <p>Body content</p>
  </div>
</details>
```
npm package: @pnx-mixtape/base
Description: Base styles and variables
Author: PreviousNext
Latest version: 6.2.2

# @pnx-mixtape/base

Documentation and examples: [Base](https://mixtape.pnx.io/section-base.html)

### Installation

```
npm install @pnx-mixtape/base --save
```

### How to use

**CSS**

- PostCSS workflow: `@import '@pnx-mixtape/base';`
- Native CSS: `@import url('dist/base.css');`
- Link tag: `<link href="dist/base.css" rel="stylesheet" type="text/css">`
npm package: @pnx-mixtape/browserslist-config
Description: Shareable Browserslist config
Author: PreviousNext
Latest version: 1.0.1

# @pnx-mixtape/browserslist-config

Shareable Browserslist config.

### Installation

```
npm install @pnx-mixtape/browserslist-config --save-dev
```

### How to use

Add this to your package.json file:

```
"browserslist": [
	"extends @pnx-mixtape/browserslist-config"
]
```
npm package: @pnx-mixtape/button-group
Description: button-group component
Author: PreviousNext
Latest version: 1.0.8

# @pnx-mixtape/button-group

Documentation and examples: [Button Group](https://mixtape.pnx.io/section-elements.html#kssref-elements-buttons-button-group)

### Installation

```
npm install @pnx-mixtape/button-group --save
```

### How to use

**CSS**

- PostCSS workflow: `@import '@pnx-mixtape/button-group';`
- Native CSS: `@import url('dist/button-group.css');`
- Link tag: `<link href="dist/button-group.css" rel="stylesheet" type="text/css">`

**HTML**

```html
<div class="button-group">
  <a href="#" class="button button--primary icon--arrow-left button--icon-only"
    >Previous</a
  >
  <a href="#" class="button button--primary icon--more button--icon-only"
    >Middle</a
  >
  <a href="#" class="button button--primary icon--arrow-right button--icon-only"
    >Next</a
  >
</div>
```
npm package: @pnx-mixtape/button-icon
Description: button-icon component
Author: PreviousNext
Latest version: 1.0.9

# @pnx-mixtape/button-icon

Documentation and examples: [Button Icon](https://mixtape.pnx.io/section-elements.html#kssref-elements-buttons-button-icon)

### Installation

```
npm install @pnx-mixtape/button-icon --save
```

### How to use

**CSS**

- PostCSS workflow: `@import '@pnx-mixtape/button-icon';`
- Native CSS: `@import url('dist/button-icon.css');`
- Link tag: `<link href="dist/button-icon.css" rel="stylesheet" type="text/css">`

**HTML**

```html
<a href="#" class="button button--primary icon--more button--icon-only">More</a>
```
npm package: @pnx-mixtape/buttons
Description: buttons component
Author: PreviousNext
Latest version: 3.1.3

# @pnx-mixtape/buttons

Documentation and examples: [Buttons](https://mixtape.pnx.io/section-elements.html#kssref-elements-buttons-primary)

### Installation

```
npm install @pnx-mixtape/buttons --save
```

### How to use

**CSS**

- PostCSS workflow: `@import '@pnx-mixtape/buttons';`
- Native CSS: `@import url('dist/buttons.css');`
- Link tag: `<link href="dist/buttons.css" rel="stylesheet" type="text/css">`

**HTML**

```html
<a class="button button--primary" href="#">Primary button</a>
```
npm package: @pnx-mixtape/constants
Description: constants component
Author: PreviousNext
Latest version: 4.0.1

# @pnx-mixtape/constants

Global variables.

### Installation

```
npm install @pnx-mixtape/constants --save-dev
```

### How to use

**CSS**

- PostCSS workflow: `@import '@pnx-mixtape/constants';`
- Native CSS: `@import url('dist/constants.css');`
- Link tag: `<link href="dist/constants.css" rel="stylesheet" type="text/css">`
npm package: @pnx-mixtape/content-card
Description: content-card component
Author: PreviousNext
Latest version: 2.0.1

# @pnx-mixtape/content-card

Documentation and examples: [Content cards](https://mixtape.pnx.io/section-elements.html#kssref-elements-content-card)

### Installation

```
npm install @pnx-mixtape/content-card --save
```

### How to use

**CSS**

- PostCSS workflow: `@import '@pnx-mixtape/content-card';`
- Native CSS: `@import url('dist/content-card.css');`
- Link tag: `<link href="dist/content-card.css" rel="stylesheet" type="text/css">`

**HTML**

```html
<div class="content-card">
  <figure class="content-card__media">
    <img src="https://via.placeholder.com/788x556" alt="Descriptive text" />
  </figure>
  <div class="content-card__content">
    <h3>Title</h3>
    <p>Body content</p>
  </div>
</div>
```
npm package: @pnx-mixtape/cta
Description: cta component
Author: PreviousNext
Latest version: 1.1.3

# @pnx-mixtape/cta

Documentation and examples: [CTA](https://mixtape.pnx.io/section-elements.html#kssref-elements-cta)

### Installation

```
npm install @pnx-mixtape/cta --save
```

### How to use

**CSS**

- PostCSS workflow: `@import '@pnx-mixtape/cta';`
- Native CSS: `@import url('dist/cta.css');`
- Link tag: `<link href="dist/cta.css" rel="stylesheet" type="text/css">`

**HTML**

```html
<div class="cta">
  <h2>Title</h2>
  <p>Body content</p>
  <div class="cta__actions">
    <a href="#" class="button button--large button--primary"
      >Let's get started</a
    >
  </div>
</div>
```
npm package: @pnx-mixtape/dialog
Description: dialog component
Author: PreviousNext
Latest version: 2.0.2

# @pnx-mixtape/dialog

Documentation and examples: [CTA](https://mixtape.pnx.io/section-elements.html#kssref-elements-dialog)

### Installation

```
npm install @pnx-mixtape/dialog --save-dev
```

### How to use

**CSS**

- PostCSS workflow: `@import '@pnx-mixtape/dialog';`
- Native CSS: `@import url('dist/dialog.css');`
- Link tag: `<link href="dist/dialog.css" rel="stylesheet" type="text/css">`

**Web Components**

Web Components are self defined, simply import the desired feature. These do not use the Shadow DOM. External CSS applies.

- DialogBase import: `import '@pnx-mixtape/dialog/DialogBase';` and be sure to include `<mx-dialog>` around the `<dialog />` tag.
- The triggering element should either have `aria-controls="[id]"` or `href="#[id]"` where the ID matches the dialog (required).
- Use the `[data-modal]` attribute to trigger `HTMLDialogElement.showModal()` on open. When omitted `HTMLDialogElement.show()` is used.
- Add `[data-close]` to any button that should call `HTMLDialogElement.close()`

```html
<button aria-controls="example-dialog" class="button button--primary">
  Dialog trigger
</button>
<mx-dialog id="example-dialog" data-modal>
  <dialog class="dialog">
    <button
      autofocus
      class="button button--icon-only button--secondary icon icon--close"
      data-close
    >
      Close dialog
    </button>
    <div class="dialog__content">
      <h2>Title</h2>
      <p>Body content.</p>
    </div>
  </dialog>
</mx-dialog>
```

See twig files for all HTML examples.

**Vanilla JS (to be deprecated)**

- ES6 import: `import Dialog from '@pnx-mixtape/dialog';`
- Script tag: `<script src="dist/dialog.js" type="text/javascript"></script>`

**HTML**

```html
<button
  data-dialog
  aria-controls="example-dialog"
  class="button button--primary"
>
  Dialog trigger
</button>

<dialog class="dialog" id="example-dialog">
  <div class="dialog__content">
    <h2>Title</h2>
    <p>Body content.</p>
  </div>
</dialog>
```
npm package: @pnx-mixtape/drop-menu
Description: drop-menu component
Author: PreviousNext
Latest version: 0.2.2

# @pnx-mixtape/drop-menu

Documentation and examples: [drop-menu](https://mixtape.pnx.io/section-elements.html#kssref-elements-drop-menu)

![drop-menu  component](https://previousnext.github.io/mixtape/screenshots/drop-menu.png)

### Installation

```
npm install @pnx-mixtape/drop-menu --save
```

### How to use

**CSS**

- PostCSS workflow: `@import '@pnx-mixtape/drop-menu';`
- Native CSS: `@import url('dist/drop-menu.css');`
- Link tag: `<link href="dist/drop-menu.css" rel="stylesheet" type="text/css">`

**Vanilla JS**

- ES6 import: `import drop-menu from '@pnx-mixtape/drop-menu';`
- Script tag: `<script src="dist/drop-menu.js" type="text/javascript"></script>`

**HTML**

```html
<div class="drop-menu"></div>
```
npm package: @pnx-mixtape/drupal
Description: drupal component
Author: PreviousNext
Latest version: 1.0.9

# @pnx-mixtape/drupal

Helper components for Drupal specific elements.

### Installation

```
npm install @pnx-mixtape/drupal --save
```

### How to use

**CSS**

- PostCSS workflow: `@import '@pnx-mixtape/drupal';`
- Native CSS: `@import url('dist/drupal.css');`
- Link tag: `<link href="dist/drupal.css" rel="stylesheet" type="text/css">`
npm package: @pnx-mixtape/elevator
Description: elevator component
Author: PreviousNext
Latest version: 3.0.2

# @pnx-mixtape/elevator

Documentation and examples: [Elevator](https://mixtape.pnx.io/section-grouped-components.html#kssref-grouped-components-elevator)

### Installation

```
npm install @pnx-mixtape/elevator --save
```

### How to use

**CSS**

- PostCSS workflow: `@import '@pnx-mixtape/elevator';`
- Native CSS: `@import url('dist/elevator.css');`
- Link tag: `<link href="dist/elevator.css" rel="stylesheet" type="text/css">`

**Web Components**

Web Components are self defined, simply import the desired feature. These do not use the Shadow DOM. External CSS applies.

- ElevatorBase import: `import '@pnx-mixtape/elevator/ElevatorBase';` and be sure to include `<mx-elevator>` around the `<nav />` tag.
- Use the `[data-content]` attribute to specify where to look for headings (required).
- Use the `[data-headings]` attribute to customise the heading levels. Default is h2.

```html
<mx-elevator data-content=".page__sections" data-headings="h2, h3">
  <nav class="elevator nav nav--jump">
    <h4>Jump to Section</h4>
    <ul></ul>
  </nav>
</mx-elevator>

<div class="page__sections">
  <h2 id="section">Section title</h2>
</div>
```

See twig files for all HTML examples.

**Vanilla JS (to be deprecated)**

- ES6 import: `import { Elevator, ElevatorOverflow } from '@pnx-mixtape/elevator';`
- ES6 submodule import: `import ElevatorOverflow from '@pnx-mixtape/elevator/elevator-overflow';`
- Script tag: `<script src="dist/elevator.js" type="text/javascript"></script>`

**HTML**

```html
<nav data-elevator class="elevator nav nav--jump">
  <h4>Jump to Section</h4>
  <ul></ul>
</nav>

<div class="page__sections">
  <h2 id="section">Section title</h2>
</div>
```
npm package: @pnx-mixtape/form
Description: form component
Author: PreviousNext
Latest version: 3.0.1

# @pnx-mixtape/form

Documentation and examples: [Forms](https://mixtape.pnx.io/section-form.html)

### Installation

```
npm install @pnx-mixtape/form --save
```

### How to use

**CSS**

- PostCSS workflow: `@import '@pnx-mixtape/form';`
- Native CSS: `@import url('dist/form.css');`
- Link tag: `<link href="dist/form.css" rel="stylesheet" type="text/css">`
npm package: @pnx-mixtape/global
Description: global component
Author: PreviousNext
Latest version: 2.0.2

# @mixtape/global

Documentation and examples: [Global header](https://mixtape.pnx.io/section-grouped-components.html#kssref-grouped-components-global-header)
and [Global footer](https://mixtape.pnx.io/section-grouped-components.html#kssref-grouped-components-global-footer)

### Installation

```
npm install @mixtape/global --save
```

### How to use

**CSS**

- PostCSS workflow: `@import '@mixtape/global';`
- Native CSS: `@import url('dist/global.css');`
- Link tag: `<link href="dist/global.css" rel="stylesheet" type="text/css">`

**Vanilla JS**

- ES6 import: `import Global from '@pnx-mixtape/global';`
- Script tag: `<script src="dist/global.js" type="text/javascript"></script>`

**HTML**

See various twig files.
npm package: @pnx-mixtape/icon
Description: icon component
Author: PreviousNext
Latest version: 4.0.9

# @pnx-mixtape/icon

Documentation and examples: [Icons](https://mixtape.pnx.io/section-base.html#kssref-base-icon)

### Installation

```
npm install @pnx-mixtape/icon --save
```

### How to use

**CSS**

- PostCSS workflow: `@import '@pnx-mixtape/icon';`
- Native CSS: `@import url('dist/icon.css');`
- Link tag: `<link href="dist/icon.css" rel="stylesheet" type="text/css">`
npm package: @pnx-mixtape/layout
Description: layout component
Author: PreviousNext
Latest version: 4.0.1

# @pnx-mixtape/layout

Documentation and examples: [Layout](https://mixtape.pnx.io/section-layout.html)

### Installation

```
npm install @pnx-mixtape/layout --save-dev
```

### How to use

**CSS**

- PostCSS workflow: `@import '@pnx-mixtape/layout';`
- Native CSS: `@import url('dist/layout.css');`
- Link tag: `<link href="dist/layout.css" rel="stylesheet" type="text/css">`

**HTML**

```html
<div class="grid grid--dynamic">
  <div></div>
  <div></div>
</div>

<div class="grid">
  <div class="grid__col grid--4-col"></div>
  <div class="grid__col grid--4-col"></div>
  <div class="grid__col grid--4-col"></div>
</div>
```

```html
<section class="section section--top-l section--bottom-l">
  <article class="section__content">
    <p>Section content.</p>
  </article>
</section>
```
npm package: @pnx-mixtape/link-list
Description: link-list component
Author: PreviousNext
Latest version: 1.2.1

# @pnx-mixtape/link-list

Documentation and examples: [Link List](https://mixtape.pnx.io/section-elements.html#kssref-elements-link-list)

### Installation

```
npm install @pnx-mixtape/link-list --save
```

### How to use

**CSS**

- PostCSS workflow: `@import '@pnx-mixtape/link-list';`
- Native CSS: `@import url('dist/link-list.css');`
- Link tag: `<link href="dist/link-list.css" rel="stylesheet" type="text/css">`

**HTML**

```html
<ul class="link-list">
  <li class="link-list__item icon icon--chevron-right">
    <a href="#" class="link-list__link">Link</a>
  </li>
  <li class="link-list__item icon icon--chevron-right">Item</li>
</ul>
```
npm package: @pnx-mixtape/messages
Description: messages component
Author: PreviousNext
Latest version: 1.1.6

# @pnx-mixtape/messages

Documentation and examples: [Messages](https://mixtape.pnx.io/section-elements.html#kssref-elements-messages)

### Installation

```
npm install @pnx-mixtape/messages --save
```

### How to use

**CSS**

- PostCSS workflow: `@import '@pnx-mixtape/messages';`
- Native CSS: `@import url('dist/messages.css');`
- Link tag: `<link href="dist/messages.css" rel="stylesheet" type="text/css">`

**Vanilla JS**

This javascript just adds the ability to close/dismiss a message, which is recorded in localStorage.

- ES6 import: `import Message from '@pnx-mixtape/messages';`
- Script tag: `<script src="dist/messages.js" type="text/javascript"></script>`

**HTML**

```html
<div data-closable-message class="message" id="message-example">
  <p>Body content</p>
</div>
```
npm package: @pnx-mixtape/navigation
Description: navigation component
Author: PreviousNext
Latest version: 3.3.2

# @mixtape/navigation

Documentation and examples: [Accordion](https://mixtape.pnx.io/section-elements.html#kssref-elements-navigation)

### Installation

```
npm install @mixtape/navigation --save
```

### How to use

**CSS**

- PostCSS workflow: `@import '@mixtape/navigation';`
- Native CSS: `@import url('dist/navigation.css');`
- Link tag: `<link href="dist/navigation.css" rel="stylesheet" type="text/css">`

**Vanilla JS**

- ES6 import: `import { Navigation, NavigationFlyout } from '@pnx-mixtape/mavigation';`
- ES6 submodule import: `import NavigationFlyout from '@pnx-mixtape/mavigation/navigation-flyout';`
- Script tag: `<script src="dist/navigation.js" type="text/javascript"></script>`

**HTML**

See various twig files.
npm package: @pnx-mixtape/page
Description: page component
Author: PreviousNext
Latest version: 2.0.1

# @pnx-mixtape/page

Documentation and examples: [Page](https://mixtape.pnx.io/section-layout.html#kssref-layout-page)

### Installation

```
npm install @pnx-mixtape/page --save
```

### How to use

**CSS**

- PostCSS workflow: `@import '@pnx-mixtape/page';`
- Native CSS: `@import url('dist/page.css');`
- Link tag: `<link href="dist/page.css" rel="stylesheet" type="text/css">`

**HTML**

See various twig files.
npm package: @pnx-mixtape/pagination
Description: pagination component
Author: PreviousNext
Latest version: 1.1.4

# @pnx-mixtape/pagination

Documentation and examples: [Pagination](https://mixtape.pnx.io/section-elements.html#kssref-elements-pagination)

### Installation

```
npm install @pnx-mixtape/pagination --save
```

### How to use

**CSS**

- PostCSS workflow: `@import '@pnx-mixtape/pagination';`
- Native CSS: `@import url('dist/pagination.css');`
- Link tag: `<link href="dist/pagination.css" rel="stylesheet" type="text/css">`

**HTML**

```html
<nav aria-label="Pagination" class="pagination" role="navigation">
  <ul class="pagination__items">
    <li class="pagination__previous">
      <a href="#" class="icon icon--arrow-left">Previous</a>
    </li>
    <li class="pagination__item"><a href="#">1</a></li>
    <li aria-current="page" class="pagination__item pagination__item--active">
      2
    </li>
    <li class="pagination__next">
      <a href="#" class="icon icon--arrow-right">Next</a>
    </li>
  </ul>
</nav>
```
npm package: @pnx-mixtape/previous-next
Description: previous-next component
Author: PreviousNext
Latest version: 1.0.8

# @pnx-mixtape/previous-next

Documentation and examples: [Previous Next](https://mixtape.pnx.io/section-elements.html#kssref-elements-previous-next)

### Installation

```
npm install @pnx-mixtape/previous-next --save
```

### How to use

**CSS**

- PostCSS workflow: `@import '@pnx-mixtape/previous-next';`
- Native CSS: `@import url('dist/previous-next.css');`
- Link tag: `<link href="dist/previous-next.css" rel="stylesheet" type="text/css">`

**HTML**

```html
<div class="previous-next">
  <div class="previous-next__link">
    <a href="#" class="previous-next__prev">
      <div class="previous-next__title">Previous</div>
      <div class="previous-next__page-title">Title</div>
    </a>
  </div>
  <div class="previous-next__link">
    <a href="#" class="previous-next__next">
      <div class="previous-next__title">Next</div>
      <div class="previous-next__page-title">Title</div>
    </a>
  </div>
</div>
```
npm package: @pnx-mixtape/react
Description: react component
Author: PreviousNext
Latest version: 2.4.3

# @pnx-mixtape/react

These components live in a separate storybook instance. Please run;

`npm run storybook`

To spin this up locally.

_This package is a work in progress!_

### Installation

```
npm install @pnx-mixtape/react --save
```

### How to use

**CSS**

- PostCSS workflow: `@import '@pnx-mixtape/react';`
- Native CSS: `@import url('dist/react.css');`
- Link tag: `<link href="dist/react.css" rel="stylesheet" type="text/css">`

**Vanilla JS**

- ES6 import: `import * from '@pnx-mixtape/react';`
- Script tag: `<script src="dist/react.js" type="text/javascript"></script>`
npm package: @pnx-mixtape/sticky
Description: sticky component
Author: PreviousNext
Latest version: 2.0.2

# @pnx-mixtape/sticky

Documentation and examples: [Sticky](https://mixtape.pnx.io/section-elements.html#kssref-elements-sticky)

### Installation

```
npm install @pnx-mixtape/sticky --save
```

### How to use

**CSS**

- PostCSS workflow: `@import '@pnx-mixtape/sticky';`
- Native CSS: `@import url('dist/sticky.css');`
- Link tag: `<link href="dist/sticky.css" rel="stylesheet" type="text/css">`

**Vanilla JS**

This javascript is only needed if you want to track when an element becomes sticky,
in order to change its styles.

- ES6 import: `import Sticky from '@pnx-mixtape/sticky';`
- Script tag: `<script src="dist/sticky.js" type="text/javascript"></script>`

**HTML**

```html
<div data-sticky class="sticky">
  <h4>Element to be fixed</h4>
  <p>Body content.</p>
</div>
```
npm package: @pnx-mixtape/tabs
Description: tabs component
Author: PreviousNext
Latest version: 2.0.2

# @pnx-mixtape/tabs

Documentation and examples: [Tabs](https://mixtape.pnx.io/section-elements.html#kssref-elements-tabs)

### Installation

```
npm install @pnx-mixtape/tabs --save
```

### How to use

**CSS**

- PostCSS workflow: `@import '@pnx-mixtape/tabs';`
- Native CSS: `@import url('dist/tabs.css');`
- Link tag: `<link href="dist/tabs.css" rel="stylesheet" type="text/css">`

**Vanilla JS**

- ES6 import: `import Tabs from '@pnx-mixtape/tabs';`
- Script tag: `<script src="dist/tabs.js" type="text/javascript"></script>`

**HTML**

```html
<div data-tabs class="tabs">
  <ul class="tab__list">
    <li class="tab_item"><a href="#">Link</a></li>
    <li class="tab_item"><a href="#">Link</a></li>
  </ul>
  <div class="tab__panel">
    <p>Body content.</p>
  </div>
  <div class="tab__panel">
    <p>Body content.</p>
  </div>
</div>
```
npm package: @pnx-mixtape/tag
Description: Tag component
Author: PreviousNext
Latest version: 1.1.3

# @pnx-mixtape/tag

Documentation and examples: [Tag](https://mixtape.pnx.io/section-elements.html#kssref-elements-tag)

### Installation

```
npm install @pnx-mixtape/tag --save
```

### How to use

**CSS**

- PostCSS workflow: `@import '@pnx-mixtape/tag';`
- Native CSS: `@import url('dist/tag.css');`
- Link tag: `<link href="dist/tag.css" rel="stylesheet" type="text/css">`

**HTML**

```html
<a href="#" class="tag">Title</a>
```
npm package: @pnx-mixtape/tiles
Description: tiles component
Author: PreviousNext
Latest version: 1.2.4

# @pnx-mixtape/tiles

Documentation and examples: [Tiles](https://mixtape.pnx.io/section-elements.html#kssref-elements-tile)

### Installation

```
npm install @pnx-mixtape/tiles --save
```

### How to use

**CSS**

- PostCSS workflow: `@import '@pnx-mixtape/tiles';`
- Native CSS: `@import url('dist/tiles.css');`
- Link tag: `<link href="dist/tiles.css" rel="stylesheet" type="text/css">`

**HTML**

```html
<div class="tiles grid tiles--small">
  <div class="tile grid--3-col">
    <h3 class="text--l">Tile title</h3>
    <a class="tile__link-cover" href="#">Tile link</a>
  </div>
  <div class="tile grid--3-col">
    <h3 class="text--l">Tile title</h3>
    <a class="tile__link-cover" href="#">Tile link</a>
  </div>
  <div class="tile grid--3-col">
    <h3 class="text--l">Tile title</h3>
    <a class="tile__link-cover" href="#">Tile link</a>
  </div>
</div>
```
npm package: @pnx-mixtape/utilities
Description: utilities component
Author: PreviousNext
Latest version: 0.3.2

# @pnx-mixtape/utilities

Documentation and examples: [utilities](https://mixtape.pnx.io/section-elements.html#kssref-elements-utilities)

![utilities  component](https://previousnext.github.io/mixtape/screenshots/utilities.png)

### Installation

```
npm install @pnx-mixtape/utilities --save
```

### How to use

**CSS**

- PostCSS workflow: `@import '@pnx-mixtape/utilities';`
- Native CSS: `@import url('dist/utilities.css');`
- Link tag: `<link href="dist/utilities.css" rel="stylesheet" type="text/css">`

**Vanilla JS**

- ES6 import: `import { loadOnReady, etc } from '@pnx-mixtape/utilities';`
- Script tag: `<script src="dist/utilities.js" type="text/javascript"></script>`

** @todo write documentation for each of them **
npm package: @pnxdxt/eslint-config
Description: ESLint shareable config for Next.js
Author: pnxdxt
Latest version: 4.0.0

# @pnxdxt/eslint-config

> ESLint [shareable config](http://eslint.org/docs/developer-guide/shareable-configs.html) for Next.js

## Install

```
$ npm i --dev @pnxdxt/eslint-config
```

### Example usage with eslintrc.json

```json
{
	"extends": ["@pnxdxt/eslint-config"],
	"settings": {
		"tailwindcss": {
			"config": "tailwind.config.js"
		}
	}
}
```

Auto-fix in vscode: update settings.json

```json
{
	"typescript.tsdk": "./node_modules/typescript/lib",
	"typescript.preferences.importModuleSpecifier": "non-relative",
	"editor.defaultFormatter": "esbenp.prettier-vscode",
	"editor.formatOnSave": true,
	"editor.codeActionsOnSave": [
		"source.addMissingImports",
		"source.fixAll.eslint"
	]
}
```

Ignore paths: update .eslintignore

```
**/node_modules/*
**/out/*
**/.next/*

pnpm-lock.yaml
next-env.d.ts

*.mjs
*.cjs
```

## License

MIT © [pnxdxt](https://github.com/pnxdxt)
npm package: @pnxdxt/pkg-template
Description: Template repository to quickly create npm packages
Author: pnxdxt
Latest version: 0.0.1

# @pnxdxt/pkg-template
> Small js package I use to help me to create npm packages

[![XO code style](https://img.shields.io/badge/code_style-XO-5ed9c7.svg)](https://github.com/xojs/xo)
[![GitHub workflow status](https://img.shields.io/github/workflow/status/pnxdxt/pkg-template/CI)](https://github.com/pnxdxt/pkg-template)
[![npm bundle size](https://img.shields.io/bundlephobia/min/pkg-template)](https://bundlephobia.com/package/pkg-template)
[![npm downloads](https://img.shields.io/npm/dt/pkg-template)](https://www.npmjs.com/package/@pnxdxt/pkg-template)

## Install
```
$ npm install pkg-template
```
## Import

This package is pure [ESM](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules). It cannot be `require()`'d from CommonJS.

Use `import foo from 'foo'` instead of `const foo = require('foo')` to import the package.

```js
// Load entire build
import * as pkgName from 'pkg-template';

// Load by method
import {main} from 'pkg-template';
```
If the package is used in an async context, you could use [`await import(…)`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#dynamic_imports) from CommonJS instead of `require(…)`.

**You also need to make sure you're on the latest minor version of Node.js. At minimum Node.js 12.20, 14.14, or 16.0.**

Read more here: [sindresorhus/esm-package](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c)


## Usage

```js

main([1,2,3], (element) => typeof element === 'string');
//=> false

main(['1', '2', '3'], (element) => typeof element === 'string');
//=> true
```

## License

MIT © [pnxdxt](https://pnxdxt.com)
npm package: @pnxdxt/prettier-config
Description: My prettier config
Author: pnxdxt
Latest version: 0.2.0

# @pnxdxt/prettier-config

## Installation

### Install the package

```
npm i -D @pnxdxt/prettier-config
```

## Setup

1. Create the following file `.prettierrc.js`

   ```javascript
   module.exports = require("@pnxdxt/prettier-config");
   ```

2. Add the following to `scripts` in `package.json`

   ```
   "prettier": "prettier '**/*.{js,ts,json,css,scss,html,hbs,md}' --write"
   ```

3. Install the relevant Editor Addon/Plugin and enable "Prettier on Save".

## Running

```
npm run prettier
```

## Related repos

- https://github.com/pnxdxt/eslint-config
npm package: @pnxdxt/tsconfig
Description: Shared TypeScript config for my projects
Author: pnxdxt
Latest version: 1.0.0

# tsconfig

> Shared [TypeScript config](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) for my projects

This config is intended to be used in nextjs projects.

## Install

```sh
yarn add -D @pnxdxt/tsconfig
```

_This config requires TypeScript 4.7 or later._

## Usage

`tsconfig.json`

```json
{
	"extends": "@pnxdxt/tsconfig",
	"compilerOptions": {
		"baseUrl": ".",
		"paths": {
			"@/pages/*": ["pages/*"],
			"@/api/*": ["pages/api/*"]
		}
	},
	"include": [
		"next-env.d.ts",
		"**/*.ts",
		"**/*.tsx",
		"**/*.cjs",
		"**/*.mjs",
		".next/types/**/*.ts"
	],
	"exclude": ["node_modules"]
}
```
npm package: @po-jen/bread-crumb
Description: 頁面標籤
Author: po-jen
Latest version: 1.0.0

# vue-npm-components

> 

## Build Setup

``` bash
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build
```

For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
npm package: @po-to/potato
Description: A server's framework of view controller that serve to clent
Author: po-to
Latest version: 0.0.2

# potato
随着访问终端的多样化，我们常常将公共的业务处理封装成统一的微服务，而对于不同的终端视图则个性化设计。很多传统服务端web框架包含MVC功能，大而繁琐，而potato是一款定位于“客户端适配层”的微框架，它专注于“视图控制”，虽然运行在服务端，但从本质上它依然是前端框架的一部分。

　　由于服务端语言各异，potato仅提出某些抽象的接口和约定，体现的是一种大纲思路，并不提供具体实现，不同的服务端语言可以遵循其接口和思路来开发各自的potato-*应用框架。

# 项目主页
[www.po-to.org](http://www.po-to.org/page/articles/potato/s01)

# 仓库
[Github](https://github.com/po-to/potato)

# 兼容
potato面向于接口，无兼容性问题。 

# 依赖
无第三方依赖

# 安装
- 使用NPM安装：npm install @po-to/potato
- 手动下载安装：[Github](https://github.com/po-to/potato)

# 引入
可作为typescript定义文件来引入。

# 文档
[API](http://www.po-to.org/page/articles/potato/s02)

# 设置
无
npm package: @po-to/potato-node
Description: potato-node是NodeJS版本的potato，由于使用JS作服务端语言，所以它与客户端有着更天然的同构关系
Author: po-to
Latest version: 0.0.2

# potato-node
potato-node是NodeJS版本的potato，由于使用JS作服务端语言，所以它与客户端有着更天然的同构关系。potato-node实现并扩展了potato，可作为web服务Connect的中间件使用，或者作为模块单独调用。从应用层来说potato-node还是一个通用的基础框架，具体应用还需在它基础上进一步扩展和具体化。

# 项目主页
[www.po-to.org](http://www.po-to.org/page/articles/potato_node/s01)

# 仓库
[Github](https://github.com/po-to/potato-node)

# 兼容
potato-node采用Typescript开发，编译成为ES6标准的JS，如果你需要兼容更广的ES5语法，请自行下载源码编译。 

# 依赖
无外部依赖

# 安装
- 使用NPM安装：npm install @po-to/potato-node
- 手动下载安装：[Github](https://github.com/po-to/potato-node)

# 引入
使用NodeJS通用的CommonJS模块化标准引入

# 文档
[API](http://www.po-to.org/static/api/potato_node)

# 设置
potato-node中的设置主要通过其对外函数setConfig()来实现：
```
export declare function setConfig(options: {
    core?: Core;
    amdPaths?: {
        [key: string]: string;
    };
    amdCaches?: {
        [key: string]: any;
    };
}): void;　
```
- core?: Core;   
core为核心处理器，它实现了potato.ICore接口，在应用层需要用子类来扩展
- amdPaths?: {[key: string]: string;};  
对加载amd模块进行路径映射，类似于requireJS中的paths
- amdCaches?: {[key: string]: any;};  
对加载amd模块使用缓存，如果amdCaches中有该模块的缓存则不再请求
npm package: @po-to/poto-cache
Description: a shim for operate browser cache
Author: po-to
Latest version: 0.0.1

# poto-cache
poto-cache是一个JS库，主要用来封装浏览器客户端缓存，它并不依赖于poto生态，如果需要，你也可以独立使用它。关于网页的cache，我们知道HTTP协议中处理缓存的机制一般有：Expires、Last-Modified、Etag等，由浏览器实现并封装，不可以编程方式访问。H5提供由manifest指定的AppCache,可对站点文件的离线存储进行简单配制，使用场景很有限。在实际开发中，我们经常需要可编程控制的数据级cache，基于H5为我们提供了sessionStorage和localStorage，在此之上进行抽象与封装，因此产生了此库。

# 项目主页
[www.po-to.org](http://www.po-to.org/page/articles/poto_cache/s01)

# 仓库
[Github](https://github.com/po-to/poto-cache)

# 案例
[在线浏览](http://www.po-to.org/static/examples/poto_cache) 或 /examples

# 兼容
兼容所有支持sessionStorage、localStorage的浏览器，如IE8。除localStorage外，你还可以利用其提供的接口，自行扩展至websql等本地数据库。 

# 依赖
sessionStorage、localStorage或者本地数据库

# 安装
- 使用NPM安装：npm install @po-to/poto-cache
- 手动下载安装：[Github](https://github.com/po-to/poto-cache)

# 引入
使用AMD标准模块化，推荐使用requireJS引入

# 文档
[API](http://www.po-to.org/static/api/poto_cache)

# 设置
poto-cache中的设置主要通过其对外函数setConfig()来实现：
```
export declare function setConfig(options: {
	namespace?: string;
	ramStorageLimit?: number
	encryption?: IEncryption;
	mappingKey?: (key: string) => string;
	serializations?: { 
		string: ISerialization;
	};
	request?: IRequest
}): void;　　
```

- namespace?: string;   
在存入sessionStorage或是localStorage时，每一笔cache都会以此namespace为前缀，避免冲突
- ramStorageLimit?: number;   
内存型缓存最大占用内存空间，默认为0，表示无限制
- encryption?: IEncryption;  
加解密方法，由第三方库提供
- mappingKey?: (key: string) => string;   
每笔cache的key，可以经过此方法映射，比如以url为key进行写入会太长，可将url进行md5之后再作为key写入
- serializations?: {string: ISerialization;}  
由于sessionStorage或是localStorage只能储存文本，所以存入数据非文本时，将跟据dataType来调用此序列化方法进行序列化与反序列化
- request?: IRequest  
外部请求的方法，由第三方库提供
npm package: @po-to/tomato
Description: You can chose a view framework that you most familiar with it
Author: po-to
Latest version: 0.0.1

# tomato
tomato是一个客户端JS框架，主要依据前文所提到的“视图组织”思路，提供抽象接口和部分基类。一般不直接使用，你可以跟据具体项目来扩展和实现它。Poto中也提供了多个基于其扩展的框架，如：tomato-jquery、tomato-vue等。tomato采用Typescript开发，编译成为ES5标准的JS，如果你需要效率更高的ES6语法，请自行下载源码编译。

# 项目主页
[www.po-to.org](http://www.po-to.org/page/articles/tomato/s01)

# 兼容
tomato采用“优雅降级”的理念兼容IE8及以上浏览器，在主流现代浏览器中均有很好的用户体验。 

# 依赖
Tomato依赖于两个环境对象：
- Promise：浏览器内置对象，对于低版本的浏览器，你注意引入Promise Shim
- require：AMD模块载入函数，建议使用：RequireJS库

# 安装
- 使用NPM安装：npm install @po-to/tomato
- 手动下载安装：[Github](https://github.com/po-to/tomato)

# 引入
使用AMD标准模块化，推荐使用requireJS引入

# 文档
[API](http://www.po-to.org/static/api/tomato)

#设置
Tomato中的设置主要通过其对外函数setConfig()来实现：

    ```
	export declare function setConfig(data: {
	    namespace?: string;
	    application?: Application;
	    createViewComponent?: (data: any) => IViewComponent;
	}): void;
    ```
从上面代码可以看出，tomato可以设置的选项主要有三项：
- namespace?: string   
一个被当作tomato命名空间的字符串，请确保其唯一，默认值为"po-to/tomato"
- application?: Application   
Application为“根会话”（参见：概述->视图组织），tomato中提供Application的抽象基类，项目中必须先继承该基类并实例化后回传给tomato
- createViewComponent?: (data: any) => IViewComponent   
createViewComponent为一个创建IViewComponent的函数，IViewComponent是视图模块的根Component（参见：概述->视图组织）。tomato中不直接提供创建IViewComponent的方法，项目中必须给tomato设置此创建函数。
npm package: @po-to/tomato-jquery
Description: tomato-jquery是采用jquery作“适配层”来实现和扩展tomato，所以在学习本章之前，请先学习tomato和jquery框架
Author: po-to
Latest version: 0.0.1

# tomato-jquery
tomato-jquery是基于tomato的实现与扩展，它采用jquery来实现tomato.IComponent接口，并且根据实际项目经验，在tomato的基础上具体化了某些功能，丰富了某些类库，固化了某些模式。它是优化实践、落地tomato思路的一套战术解决方案。

# 项目主页
[www.po-to.org](http://www.po-to.org/page/articles/tomato_jquery/s01)

# 仓库
[Github](https://github.com/po-to/tomato-jquery)

# 兼容
tomato-jquery采用“优雅降级”的理念兼容IE8及以上浏览器，在主流现代浏览器中均有很好的用户体验。

# 依赖
- tomato：tomato-jquery主要作用是实现和扩展tomato
- jquery：jquery对象用来封装Dom

# 安装
- 使用NPM安装：npm install @po-to/tomato-jquery
- 手动下载安装：[Github](https://github.com/po-to/tomato-jquery)

# 引入
使用AMD标准模块化，推荐使用requireJS引入

# 文档
[API](http://www.po-to.org/static/api/tomato_jquery)

# 设置
tomato-jquery中的设置主要通过其对外函数setConfig()来实现：
```
export declare function setConfig(data: {
    dialogZIndexStart?: number;
}): void;
```
从上面代码可以看出，tomato可以设置的选项主要有一项：
- dialogZIndexStart?: number  
Dialog弹窗的起始z-index值，默认为1000。