open-index/open-npm huggingface dataset:
npm package: @sluodev/vue-baidu-map
Description: Baidu Map Component for Vue 2.0
Author: Dafrok
Latest version: 0.21.25

# VUE BAIDU MAP

<p align="center">
  <img src="https://dafrok.github.io/vue-baidu-map/favicon.png" width="200px">
</p>
<p align="center">基于 VUE 2.x 的百度地图组件</p>

[![npm](https://img.shields.io/npm/v/@sluodev/vue-baidu-map.svg)]()
[![Travis](https://img.shields.io/travis/sluodev/vue-baidu-map.svg)]()
[![Package Quality](http://npm.packagequality.com/shield/@sluodev/vue-baidu-map.svg)](http://packagequality.com/#?package=@sluodev/vue-baidu-map)
[![npm](https://img.shields.io/npm/dm/@sluodev/vue-baidu-map.svg)]()
[![license](https://img.shields.io/github/license/sluodev/vue-baidu-map.svg)]()

> fork 自 [Dafrok/vue-baidu-map](https://github.com/Dafrok/vue-baidu-map) v0.21.22，移除了 markdown-it 依赖，以避免安全漏洞 QAXOSS-2019-054353 和 CVE-2022-21670。

## 语言

- [中文](https://github.com/sluodev/vue-baidu-map/blob/master/README.zh.md)
- [English](https://github.com/sluodev/vue-baidu-map/blob/master/README.md)

## 文档

[https://dafrok.github.io/vue-baidu-map](https://dafrok.github.io/vue-baidu-map)

## 开始

### 安装

```bash
npm i --save @sluodev/vue-baidu-map
```

### 初始化

```javascript
import Vue from 'vue'
import BaiduMap from '@sluodev/vue-baidu-map'

Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: 'YOUR_APP_KEY'
})
```

### 使用
```vue
<template>
  <baidu-map class="map">
  </baidu-map>
</template>

<style>
/* 地图容器必须设置宽和高属性 */
.map {
  width: 400px;
  height: 300px;
}
</style>
```

## 贡献

[贡献指南](https://github.com/Dafrok/vue-baidu-map/blob/master/CONTRIBUTING.md)


## 协议

[MIT 许可证](https://opensource.org/licenses/MIT)

版权所有 (c) 2016至今, Dafrok <o.o@mug.dog>
npm package: @sluodev/vuex
Description: state management for Vue.js
Author: Evan You
Latest version: 3.6.4

# Vuex

[![npm](https://img.shields.io/npm/v/vuex.svg)](https://npmjs.com/package/vuex)
[![ci status](https://circleci.com/gh/vuejs/vuex/tree/3.x.png?style=shield)](https://circleci.com/gh/vuejs/vuex)

---

:fire: **HEADS UP!** You're currently looking at Vuex 3 branch. If you're looking for Vuex 4, [please check out `main` branch](https://github.com/vuejs/vuex/tree/main).

---

Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion. It also integrates with Vue's official [devtools extension](https://github.com/vuejs/vue-devtools) to provide advanced features such as zero-config time-travel debugging and state snapshot export / import.

Learn more about Vuex at "[What is Vuex?](https://vuex.vuejs.org/)", or get started by looking into [full documentation](http://vuex.vuejs.org/).

## Documentation

To check out docs, visit [vuex.vuejs.org](https://vuex.vuejs.org/).

## Examples

- [Counter](https://github.com/vuejs/vuex/tree/dev/examples/counter)
- [Counter with Hot Reload](https://github.com/vuejs/vuex/tree/dev/examples/counter-hot)
- [TodoMVC](https://github.com/vuejs/vuex/tree/dev/examples/todomvc)
- [Flux Chat](https://github.com/vuejs/vuex/tree/dev/examples/chat)
- [Shopping Cart](https://github.com/vuejs/vuex/tree/dev/examples/shopping-cart)

Running the examples:

```bash
$ npm install
$ npm run dev # serve examples at localhost:8080
```

## Questions

For questions and support please use the [Discord chat server](https://chat.vuejs.org) or [the official forum](http://forum.vuejs.org). The issue list of this repo is **exclusively** for bug reports and feature requests.

## Issues

Please make sure to read the [Issue Reporting Checklist](https://github.com/vuejs/vuex/blob/dev/.github/contributing.md#issue-reporting-guidelines) before opening an issue. Issues not conforming to the guidelines may be closed immediately.

## Changelog

Detailed changes for each release are documented in the [release notes](https://github.com/vuejs/vuex/releases).

## Stay In Touch

For latest releases and announcements, follow on Twitter: [@vuejs](https://twitter.com/vuejs).

## Contribution

Please make sure to read the [Contributing Guide](https://github.com/vuejs/vuex/blob/dev/.github/contributing.md) before making a pull request.

## License

[MIT](http://opensource.org/licenses/MIT)

Copyright (c) 2015-present Evan You
npm package: @slup/card
Description: Card element built upon Inferno with the Slup framework
Author: Luca
Latest version: 0.5.1

<h1 align='center'>Slup - Card</h1>

This package contains the Card, a Material Design Component which is part of a bigger ecosystem called [Slup](https://github.com/gejsi/material)

## Description
From Google's [Material Design guidelines](https://material.io/guidelines):
<blockquote>
  A card is a sheet of material that serves as an entry point to more detailed information.
</blockquote>

## Installation
This package can be installed with [NPM](http://npmjs.com/)
```
npm install --save @slup/card
```

## Usage
```js
import { Card }  from '@slup/card'

export const Test = props =>
  <Card>
    <YourContent>
  </Card>

```
We decided that making children components for this package wasn't needed since they are simple containers with some basic styling: the main problem is that they have too many little variations in styles and they can't be changed based on a solid criterion.
This isn't a big deal though, as shown in this full example, they can be created and used easily.
```js
import styled         from '@slup/theming'
import { Card }       from '@slup/card'
import { Typography } from '@slup/typography'
import { FlatButton } from '@slup/buttons'

const CardHeader = styled.div`
  padding: 24px 16px 16px 16px;
  
  p:first-child {
    padding-bottom: 16px;
  }

  p:last-child {
    font-size: 14px;
  }
`

const CardActions = styled.div`
  padding: 8px;

  button {
    padding: 0;
    margin: 0 8px 0 0;
  }
`

export const Test = props =>
  <Card style="width: 380px">
    <CardHeader>
      <Typography headline>Title goes here</Typography>
      <Typography caption>Subtitle here</Typography>
    </CardHeader>
    <CardActions>
      <FlatButton>Action</FlatButton>
      <FlatButton>Action</FlatButton>
    </CardActions>
  </Card>
```

## Available properties
| Props          |    Type       |    Default    | Documentation                |
|-------------   |:-------------:|:-------------:|------:                       |
| raised         |  boolean      |  false        | [Link](#property-raised)     |
| hoverable      |  boolean      |  false        | [Link](#property-hoverable)  |

#### Property: 'raised'
This property will increase the shadow of the `Card`
```js
<Card raised />
```

#### Property: 'hoverable'
This property will increase the shadow of the `Card` only when the cursor is over it
```js
<Card hoverable />
```
npm package: @slup/monaco
Description: A monaco-editor wrapper for Inferno
Author: LucaT
Latest version: 0.5.0

<h6 align='center'>
📝
@slup/monaco
</h6>

This package is a [`Inferno`](https://infernojs.org) component that wraps the amazing [`monaco-editor`](https://github.com/Microsoft/monaco-editor)
text editor from Microsoft. It is used in VSCode, CodeSandbox and StackBlitz among the others. This simple and lightweight
components loads via AMD Require the editor located in the `vs` folder on your host, and creates a editor in
a div wrapper. This project is heavily inspired by the great [`react-monaco-editor`](https://github.com/superRaytin/react-monaco-editor)

Plese note that this package hasn't got all the features provided in the react version, but tries to be minimalistic and yet easy to integrate.

## Installation

This package can be installed via `yarn` or `npm`, tough nowdays yarn is favourited:

```bash
yarn add -E @slup/monaco
npm i --save @slup/monaco
```

## Prerequirements

As said in the beginnging this package loads the monaco's core from the `vs` folder located at the root of your
webserver's static hosting. In a typical modern environment with webpack bundling, you're advised to use `copy-webpack-plguin`

So, once installed this plugin, use it like so:

```javascript
const CopyPlugin = require('copy-webpack-plugin')

// Later in your webpack's config
plugins: [
  //... Other stuff
    new CopyPlugin([
      {
        from: 'node_modules/monaco-editor/min/vs',
        to: 'vs'
      }
    ])
]
```

Or if you want to use a CDN or a custom url of some sort, you can follow the same steps as show [here](https://github.com/superRaytin/react-monaco-editor#using-with-requireconfig-do-not-need-webpack)

## Usage
This component can be used as follows:

```javascript
import { render } from 'inferno'
import Editor from '@slup/monaco'

const myEditor = () => <Editor 
  value=`const typedValue: string[] = ['This', 'is', 'cool!']`
  theme='vs-dark'
  language='typescript'
/>

render(<MyEditor />, document.body)
npm package: @slup/navbar
Description: Navbar element built upon Inferno with the Slup framework
Author: Luca
Latest version: 0.5.1

<demo gif>

<h1 align='center'>Slup - Navbar</h1>

This package contains the Navbar, a Material Design Component which is part of a bigger ecosystem called [Slup](https://github.com/gejsi/material)

## Description
From Google's [Material Design guidelines](https://material.io/guidelines):
<blockquote>
  The app bar, formerly known as the action bar in Android, is a special kind of toolbar that’s used for branding, navigation, search, and actions.
</blockquote>

## Installation
This package can be installed with [NPM](http://npmjs.com/)
```
npm install --save @slup/navbar
```

## Usage
```js
import { Navbar } from '@slup/navbar'

export const Test = props =>
  <Navbar>
    /* Icons and Title here */
  </Navbar>
```

## Available properties
| Props          |    Type       |    Default    | Documentation                |
|-------------   |:-------------:|:-------------:|------:                       |
| primary        |  boolean      |  false        | [Link](#property-primary)    |
| fixed          |  boolean      |  false        | [Link](#property-fixed)      |
| reveal         |  boolean      |  false        | [Link](#property-reveal)     |

#### Property: 'primary'
This property will set the background to the primary color of the theme
```js
<Navbar primary />
```

#### Property: 'fixed'
This property will fix the Navbar relative to the browser window
```js
<Navbar fixed />
```

#### Property: 'reveal'
This property will fix the Navbar relative to the browser window but it will "reveal" itself only when scrolling up
```js
<Navbar reveal />
```
npm package: @slup/ripple
Description: Ripple element built upon Inferno with the Slup framework
Author: Luca
Latest version: 0.5.1

<demo gif>

<h1 align='center'>Slup - Ripple</h1>

This package contains the Ripple, a Material Design Component which is part of a bigger ecosystem called [Slup](https://github.com/gejsi/material)

## Description
From Google's [Material Design guidelines](https://material.io/guidelines):
<blockquote>
  Connect user input to screen reactions by using touch ripples to both indicate the point of touch, and to confirm that touch input was received.
  <br />
  For touch or mouse, this occurs at the point of contact.
</blockquote>

## Installation
This package can be installed with [NPM](http://npmjs.com/)
```
npm install --save @slup/ripple
```

## Usage
Implementing the ripple is very easy, all you have to do is putting it inside a Component with `relative` position
```js
import { Ripple } from '@slup/ripple'

export const Test = () =>
  <div style={{ position: 'relative', height: 50, width: 100 }}>
    <Ripple />
  </div>
```
npm package: @slup/sidenav
Description: Sidenav element built upon Inferno with the Slup framework
Author: Luca
Latest version: 0.5.1

<demo gif>

<h1 align='center'>Slup - Sidenav</h1>

This package contains the Sidenav, a Material Design Component which is part of a bigger ecosystem called [Slup](https://github.com/gejsi/material)

## Description
From Google's [Material Design guidelines](https://material.io/guidelines):
<blockquote>
  The nav drawer spans the height of the screen, with everything behind it visible but darkened by a scrim.
</blockquote>

## Installation
This package can be installed with [NPM](http://npmjs.com/)
```
npm install --save @slup/sidenav
```

## Usage
```js
import { Sidenav } from '@slup/sidenav'

export class Test extends Component {
  state = { opened: false }

  handleClick() {
    this.setState({ opened: true })
  }

  handleClose() {
    this.setState({ opened: false })
  }

  render() {
    return (
      <div>
        /* Simple button to trigger the sidenav */
        <button onClick={this.handleClick.bind(this)}>Trigger</button>

        /* The component itself */
        <Sidenav
          opened={this.state.opened}
          onClose={this.handleClose.bind(this)}
        />
      </div>
    )
  }
}
```

## Available properties
| Props          |    Type       |    Default    | Documentation                |
|-------------   |:-------------:|:-------------:|------:                       |
| opened         |  boolean      |  false        | [Link](#usage)               |
| onClose        |  function     |  none         | [Link](#usage)               |
| right          |  boolean      |  false        | [Link](#property-right)      |
| responsive     |  boolean      |  false        | [Link](#property-responsive) |
| permanent      |  boolean      |  false        | [Link](#property-permanent)  |
| overlay        |  boolean      |  true         | [Link](#property-overlay)    |

#### Property: 'right'
This property will position the Sidenav to the right of the view
```js
<Sidenav
  opened={this.state.opened}
  onClose={this.handleClose.bind(this)}
  right
/>
```

#### Property: 'responsive'
This property will close the Sidenav on a small viewport but it will be open it on a bigger one
```js
<Sidenav
  opened={this.state.opened}
  onClose={this.handleClose.bind(this)}
  responsive
/>
```

#### Property: 'permanent'
This property will make the Sidenav always visible
```js
<Sidenav
  opened={this.state.opened}
  onClose={this.handleClose.bind(this)}
  permanent
/>
```

#### Property: 'overlay'
This property if set to false will remove the overlay
```js
<Sidenav
  opened={this.state.opened}
  onClose={this.handleClose.bind(this)}
  overlay={false}
/>
```
npm package: @slup/slider
Description: Slider element built upon Inferno with the Slup framework
Author: Luca
Latest version: 0.5.1

<demo gif>

<h1 align='center'>Slup - Slider</h1>

This package contains the Slider, a Material Design Component which is part of a bigger ecosystem called [Slup](https://github.com/gejsi/material)

## Description
From Google's [Material Design guidelines](https://material.io/guidelines):
<blockquote>
  Sliders are ideal components for adjusting settings that reflect intensity levels, such as volume, brightness, or color saturation.
</blockquote>

## Installation
This package can be installed with [NPM](http://npmjs.com/)
```
npm install --save @slup/slider
```

## Usage
```js
import { Slider } from '@slup/slider'

export class Test extends Component {
  state = { value: 0 }

  handleChange(value) {
    this.setState({ value })
  }

  render() {
    return (
      <Slider
        onChange={this.handleChange.bind(this)}
        value={this.state.value}
        max={100}
      />
    )
  }
}
```

## Available properties
| Props       |    Type       |    Default       | Documentation          |
|-------------|:-------------:|:-------------:|------:                    |
| onChange    |  function     |  none       | [Link](#usage)              |
| value       |  number       |  0          | [Link](#usage)              |
| max         |  number       |  0          | [Link](#usage)              |
| disabled    |  boolean      |  false      | [Link](#property-disabled)  |
| discrete    |  boolean      |  false      | [Link](#property-discrete)  |

#### Property: 'disabled'
This property will disable the slider
```js
<Slider
  onChange={this.handleChange.bind(this)}
  value={this.state.value}
  max={this.state.total}
  disabled
/>
```

#### Property: 'discrete'
This property will make a discrete slider which shows the value inside a thumb
```js
<Slider
  onChange={this.handleChange.bind(this)}
  value={this.state.value}
  max={this.state.total}
  discrete
/>
```
npm package: @slup/tooltip
Description: Tooltip element built upon Inferno with the Slup framework
Author: Luca
Latest version: 0.5.1

<h1 align='center'>Slup - Tooltip</h1>

This package contains the Tooltip, a Material Design Component which is part of a bigger ecosystem called [Slup](https://github.com/gejsi/material)

## Description
From Google's [Material Design guidelines](https://material.io/guidelines):
<blockquote>
  Tooltips identify an element when they are activated. They may contain brief helper text about its function. For example, they may contain text information about actionable icons.
</blockquote>

## Installation
This package can be installed with [NPM](http://npmjs.com/)
```
npm install --save @slup/tooltip
```

## Usage
```js
import Inferno from 'inferno'
import { Fab }     from '@slup/buttons'
import { Tooltip } from '@slup/tooltip'

export const Test = props =>
  <Tooltip text='Text'>
    <Fab>+</Fab>
  </Tooltip>
```

## Available properties
| Props          |    Type       |    Default    | Documentation                 |
|-------------   |:-------------:|:-------------:|------:                        |
| text           |  string       |  empty        | [Link](#property-text)  |
| delay          |  string       |  empty        | [Link](#property-delay) |
| location       |  string       |  bottom       | [Link](#property-location) |

#### Property: 'text'
The only required property of this component: here you can write the tip that will be shown.
```js
export const Test = props =>
  <Tooltip text='Log in'>
    <Icon />
  </Tooltip>
```

#### Property: 'delay'
This property will add the given delay to the transition.
```js
export const Test = props =>
  <Tooltip text='Log in' delay='100ms'>
    <Icon />
  </Tooltip>
```

#### Property: 'location'
This property will position the tip.
```js
export const Test = props =>
  <Tooltip text='Log in' location='top'>
    <Icon />
  </Tooltip>
```
There are many placements that you can choose:
* top-start
* top
* top-end
* right-start
* right
* right-end
* bottom-start
* bottom (**default**)
* bottom-end
* left-start
* left
* left-end
npm package: @slup/typography
Description: Typography component built upon Inferno for the Slup framework
Author: Luca
Latest version: 0.5.1

<demo gif>

<h1 align='center'>Slup - Typography</h1>

This package contains the Typography, a Material Design Component which is part of a bigger ecosystem called [Slup](https://github.com/gejsi/material)

## Installation
This package can be installed with [NPM](http://npmjs.com/)
```
npm install --save @slup/typography
```

## Usage
```js
import { Typography } from '@slup/typography'

export class Test extends Component {
  render() {
    return <Typography display4>Text</Typography>
  }
}
```

## Available properties
| Props                  |    Type       |    Default    | Documentation                |
|------------------------|:-------------:|:-------------:|-----------------------------:|
| display[1, 2, 3, 4]    |  boolean      |  false        | [Link](#property-display)    |
| headline               |  boolean      |  false        | [Link](#property-headline)   |
| title                  |  boolean      |  false        | [Link](#property-title)      |
| subheading             |  boolean      |  false        | [Link](#property-subheading) |
| body[1, 2]             |  boolean      |  false        | [Link](#property-body)       |
| caption                |  boolean      |  false        | [Link](#property-caption)    |
| button                 |  boolean      |  false        | [Link](#property-button)     |

#### Property: 'display'
This property will set the font to the biggest possible
* display4 = 112px light
* display3 = 56px regular
* display2 = 45px regular
* display1 = 34px regular

```js
<Typography display4>Text</Typography>
<Typography display3>Text</Typography>
<Typography display2>Text</Typography>
<Typography display1>Text</Typography>
```

#### Property: 'headline'
This property will set the text to look as a Headline
* headline: 24px regular

```js
<Typography headline>Text</Typography>
```

#### Property: 'title'
This property will set the text to look as a Title
* title: 20px medium

```js
<Typography title>Text</Typography>
```

#### Property: 'subheading'
This property will set the text to look as a Subheading
* subheading: 15px (16px on device) regular

```js
<Typography subheading>Text</Typography>
```

#### Property: 'body'
This is the type of text which is used in almost all projects
* body2: 13px (14px on device) medium
* body1: 13px (14px on device) regular

```js
<Typography body2>Text</Typography>
<Typography body1>Text</Typography>
```

#### Property: 'caption'
This property will set the text to look as a Caption
* subheading: 12px regular

```js
<Typography caption>Text</Typography>
```

#### Property: 'button'
This property will set the text to look as a Button
* subheading: 14px medium

```js
<Typography button>Text</Typography>
```
npm package: @slurpyb/lucide-solid-rebundler
Description: Adds virtual path for lucide-solid package, reducing package size and fixing issue with fingerprint.js via tree-shaking.
Author: Jordan Sweeting
Latest version: 1.0.0

# lucide-solid-rebundler

Adds virtual path for lucide-solid package, reducing package size and fixing issue with fingerprint.js via tree-shaking.

See Christopher N. Katoyi Kaba's [blog post](https://christopher.engineering/en/blog/lucide-icons-with-vite-dev-server/) about the issue and the fix. This repo is just that solution.

The lucide-solid package has actually been updated since that post, breaking that solution slightly.

## Installation
You can either manually apply the fix (below) or install via npm
```bash
pnpm add -D @slurpyb/lucide-solid-rebundler
pnpm add lucide-solid                               # if lucide-solid is not installed
```

Then update your vite config
```typescript
import { fileURLToPath, URL } from "node:url";
import { defineConfig } from 'vite'

export default defineConfig({
  // ...
  resolve: {
    alias: {
      "lucide-solid/icons": fileURLToPath(
        new URL(
          // Replace with the path to your lucide-solid package
          "./node_modules/lucide-solid/dist/source/icons",
          import.meta.url,
        ),
      ),
    },
  },
})
```

## Manual Installation

1. Configure your `vite.config.ts`:

```typescript
import { fileURLToPath, URL } from "node:url";
import { defineConfig } from 'vite'
import solid from 'vite-plugin-solid'

export default defineConfig({
  plugins: [solid()],
  resolve: {
    alias: {
      "lucide-solid/icons": fileURLToPath(
        new URL(
          // Replace with the path to your lucide-solid package
          "./node_modules/lucide-solid/dist/source/icons",
          import.meta.url,
        ),
      ),
    },
  },
})

```

2. Add TypeScript definitions in `src/@types/lucide.d.ts`:

```typescript
declare module "lucide-solid/icons/*" {
  import { LucideProps } from "lucide-solid";
  import { Component } from "solid-js";
  const cmp: Component<LucideProps>;

  export = cmp;
}
```

## Usage

Import icons using the new path:

```tsx
import Twitch from 'lucide-solid/icons/twitch'

const MyComponent = () => {
  return <Button leftIcon={<Twitch />} />
}
```


## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.


## License

[MIT](LICENSE)
npm package: @slurpyb/preset-uchu
Description: Panda CSS Preset for Uchu color palette
Author: Jordan Sweeting
Latest version: 1.0.1

# Uchū for PandaCSS

```bash
pnpm add -D @slurpyb/preset-uchu
```


```typescript
import presetUchu from '@slurpyb/preset-uchu'

export default defineConfig({
  presets: [presetUchu],
})
```