open-index/open-npm huggingface dataset:
npm package: @marsong11/vue-marquee
Description: A Vue component to marquee
Author: marsong11
Latest version: 0.1.1

# vue-marquee

> A Vue component to marquee，horizontally scrolling when the text is too long
>
> 滚动组件，支持文本过长时横向滚动

## Screenshot

![Screenshot](https://github.com/MarSong11/vue-marquee/raw/master/screenshot/GIF.gif)

## Install

```bash
npm install @marsong11/vue-marquee

# or
yarn add @marsong11/vue-marquee
```

## Usage

```html
<template>
  <div class="container">
    <marquee :data="list" />
  </div>
</template>

<script>
  import Marquee from '@marsong11/vue-marquee';

  export default {
    components: {
      Marquee
    },
    ,
    data() {
      return {
        list: [
          'data1 some text.',
          'data2 balabalabalabala.',
          'data3 long long long long long long long long long long long text.',
          'data4 hahaha.'
        ]
      };
    }
  };
</script>
```

## Options

| Name           | Type      | Default | Description                                  |
| -------------- | --------- | ------- | -------------------------------------------- |
| `data`         | `Array`   | `[]`    | content                                      |
| `duration`     | `Number`  | `300`   | duration of transition between items (in ms) |
| `delay`        | `Number`  | `2500`  | delay between transitions (in ms).           |
| `scrollSpeed`  | `Number`  | `60`    | the speed of the scrolling (keep number low) |
| `pauseOnHover` | `Boolean` | `false` | pause on hover                               |
npm package: @marsraptor/rough-display
Description: Meat and potatoes HTML Canvas display lib
Author: MarsRaptor
Latest version: 0.0.1-alpha.2

# Rough display

Meat and potatoes HTML Canvas display lib 

**Features**

* TODO


**Known Compatibility**

* TBD

## Usage

Installation is available by [NPM](https://npmjs.org):

```bash
npm i @marsraptor/rough-display --save
```

### Resources

* TODO

## License

MIT License.
npm package: @marsron/google-image
Description: Google Image Search
Author: MarsRon
Latest version: 1.0.4

# @marsron/google-image

Another Google Image Search NodeJS module. The nature of these things is that they eventually break as GIS changes, but this one works as of August 1st 2021.

## Installation

Install `@marsron/google-image` with npm

```sh
npm install @marsron/google-image
```

## Usage / Examples

```js
const googleImage = require('@marsron/google-image')

googleImage('cats')
  .then(results => {
    console.log(results)
  })
  .catch(error => {
    console.error(error)
  })
```

Output:
```json
[
  {
    "url": "https://i.ytimg.com/vi/mW3S0u8bj58/maxresdefault.jpg",
    "width": 1280,
    "height": 720
  },
  {
    "url": "https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg",
    "width": 1600,
    "height": 1200
  },
  {
    "url": "https://www.petfinder.com/wp-content/uploads/2013/09/cat-black-superstitious-fcs-cat-myths-162286659.jpg",
    "width": 632,
    "height": 353
  },
  {
    "url": "https://upload.wikimedia.org/wikipedia/commons/1/1e/Large_Siamese_cat_tosses_a_mouse.jpg",
    "width": 3415,
    "height": 2268
  },
  ...
]
```

If you want to pass additional stuff to tack onto the Google image search URL, pass an object containing `additionalQuery`. For example:

```js
const options = {
  additionalQuery: {
    tbs: 'isz:l' // Large image size
  }
}

googleImage('cat', options).then(...)
```

You can limit the number of results:

```js
const options = {
  additionalQuery: {
    tbs: 'isz:l' // Large image size
  },
  limit: 5
}

googleImage('cat', options).then(...)
```

You can also filter out results from specified domains:

```js
const options = {
  additionalQuery: {
    tbs: 'isz:l' // Large image size
  },
  limit: 5,
  blacklistDomains: [
    'pinterest.com',
    'deviantart.com'
  ]
}

googleImage('cat', options).then(...)
```

Specifying `blacklistDomains` will both tell Google to not to include results that come from web pages on those domains and also filter image results that are hosted on those domains. (Sometimes an image is on an HTML page on a domain not included in your filters and has an `img` tag that loads from a domain that is included in your filters.)

Everything can be crammed into a object as well using `query`:

```js
const options = {
  query: 'cat',
  additionalQuery: {
    tbs: 'isz:l' // Large image size
  },
  limit: 5,
  blacklistDomains: [
    'pinterest.com',
    'deviantart.com'
  ]
}
googleImage(options).then(...)
```

## Support

For support, email marsron204@gmail.com or message `MarsRon#7602` on Discord.

## License

[MIT](https://github.com/MarsRon/google-image/blob/main/LICENSE.md)
npm package: @marsswap/uikit
Description: Set of UI components for mars projects
Latest version: 1.0.3

# 🪐 Martian Finance UIkit

[![Version](https://img.shields.io/npm/v/@marsswap/uikit)](https://www.npmjs.com/package/@marsswap/uikit) [![Size](https://img.shields.io/bundlephobia/min/@marsswap/uikit)](https://www.npmjs.com/package/@marsswap/uikit)

Mars UIkit is a set of React components and hooks used to build pages on Mars's apps. It also contains a theme file for dark and light mode.

## Install

`yarn add @marsswap/uikit`

## Setup

### Theme

Before using Mars UIkit, you need to provide the theme file to styled-component.

```
import { ThemeProvider } from 'styled-components'
import { light, dark } from '@marsswap/uikit'
...
<ThemeProvider theme={isDark}>...</ThemeProvider>
```

### Reset

A reset CSS is available as a global styled component.

```
import { ResetCSS } from '@marsswap/uikit'
...
<ResetCSS />
```

### Types

This project is built with Typescript and export all the relevant types.

## How to use the UIkit

If you want to use components from the UIkit, check the [Storybook documentation](https://marsswap.github.io/mars-uikit/)
npm package: @marstamm/create-bpmn-io-module
Description: A template generator for new bpmn-io extensions.
Author: Martin Stamm
Latest version: 0.1.2

# create-bpmn-io-module

A template generator for new bpmn-io extensions.

## How to use

From the command line, run

```sh
  npx @marstamm/create-bpmn-io-module <project-name>
  cd <project-name>
```

or, to add missing config to an existing project, run

```sh
  npx @marstamm/create-bpmn-io-module
```

inside the project directory.
npm package: @marstamm/diagram-js-touch
Description: > [!IMPORTANT]   > **This is a hackday project and not intended for production use.**
Latest version: 0.1.1

> [!IMPORTANT]  
> **This is a hackday project and not intended for production use.**

## @marstamm/diagram-js-touch

This diagram-js extension aims to provide touch support for [diagram-js](https://github.com/bpmn-io/diagram-js) based applications, such as the widely popular [bpmn-js](https://github.com/bpmn-io/bpmn-js).

### Usage

Install it via npm:

```bash
npm i @marstamm/diagram-js-touch
```

And include it in you application:

```javascript
import Modeler from "bpm-js/lib/Modeler";
import touchModule from "@marstamm/diagram-js-touch";

var modeler = new Modeler({
  container: "#canvas",
  additionalModules: [touchModule],
});
```
npm package: @marstankev/react-horizontal-stacked-bar-chart
Description: React horizontal stacked bar responsive chart component
Author: Ricardo do Rosario
Latest version: 8.18.1

[![version](https://img.shields.io/npm/v/react-horizontal-stacked-bar-chart.svg?style=flat-square)](https://www.npmjs.com/package/react-horizontal-stacked-bar-chart)
[![release](https://img.shields.io/github/release/ricardodorosario/react-horizontal-stacked-bar-chart.svg?style=flat-square)](https://github.com/ricardodorosario/react-horizontal-stacked-bar-chart)
[![downloads](https://img.shields.io/npm/dt/react-horizontal-stacked-bar-chart.svg?style=flat-square)](https://npm-stat.com/charts.html?package=react-horizontal-stacked-bar-chart&from=2018-12-17)
[![license](https://img.shields.io/github/license/ricardodorosario/react-horizontal-stacked-bar-chart.svg?style=flat-square)](http://opensource.org/licenses/MIT)

# react-horizontal-stacked-bar-chart

React horizontal stacked bar responsive chart component.

![HSBar Example](https://github.com/ricardodorosario/react-horizontal-stacked-bar-chart/blob/master/images/example.png)

## Example

[![HSBar](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/9k2jqjr9y)

## Installation via NPM

```bash
npm install react-horizontal-stacked-bar-chart --save
```

## Usage

```js
import HSBar from "react-horizontal-stacked-bar-chart";
```

Simple

```js
<HSBar data={[{ value: 10 }, { value: 20 }]} />
```

Complete

```js
<HSBar
  height={50}
  showTextIn
  showTextUp
  showTextDown
  outlineWidth: {0.5},
  outlineColor: "black"
  id="new_id"
  fontColors=["rgb(50,20,100)"]
  data={[
    {
      name: "To pay",
      value: 80,
      description: "U$80,00",
      color: "red"
    },
    {
      name: "Paid",
      value: 200,
      description: "U$200,00",
      color: "rgb(150,150,220)"
    }
  ]}
  onClick={e => console.log(e.bar);}
/>
```

### Properties

- data: PropTypes.array.isRequired
- id: PropTypes.string
- height: PropTypes.number
- showTextWithValue: PropTypes.bool
- showTextIn: PropTypes.bool
- showTextUp: PropTypes.bool
- showTextDown: PropTypes.bool
- showValueIn: PropTypes.bool
- showValueUp: PropTypes.bool
- showValueDown: PropTypes.bool
- fontColors: PropTypes.arrayOf(PropTypes.string),
- onClick: PropTypes.func
- outlineWidth: PropTypes.number
- outlineColor: PropTypes.arrayOf(PropTypes.string)
- textAlign: PropTypes.string

### Default Properties

- height: 30
- showTextWithValue: true
- showTextIn: false
- showTextUp: false
- showTextDown: false
- showValueIn: false
- showValueUp: false
- showValueDown: false
- fontColors: []
- outlineWidth: 0
- outlineColor: "black"
- id: "hsbar"
- textAlign: "left"

### Data object list

- value: Required
- name: Optional
- description: Optional
- color: Optional
npm package: @marsup/joi-objectid
Description: A joi extension to validate MongoDB's ObjectIDs
Author: Nicolas Morel
Latest version: 3.0.0

[![npm version](https://badge.fury.io/js/@marsup%2Fjoi-objectid.svg)](http://badge.fury.io/js/@marsup%2Fjoi-objectid)
[![Build Status](https://github.com/Marsup/joi-objectid/actions/workflows/main.yaml/badge.svg)](https://github.com/Marsup/joi-objectid/actions?query=workflow%3Amain)

# @marsup/joi-objectid

This is a simple [joi](https://joi.dev/) extension to validate MongoDB's ObjectIDs.

## Installation

`npm install --save @marsup/joi-objectid`

## Usage
```js
const Joi = require('joi').extend(require('@marsup/joi-objectid'));

Joi.objectId().validate(new ObjectId("aaaaaaaaaaaaaaaaaaaaaaaa")) // Valid => ObjectId("aaaaaaaaaaaaaaaaaaaaaaaa")  
Joi.objectId().validate("aaaaaaaaaaaaaaaaaaaaaaaa") // Valid ObjectId("aaaaaaaaaaaaaaaaaaaaaaaa")
Joi.objectId().strict().validate("aaaaaaaaaaaaaaaaaaaaaaaa") // Invalid
Joi.objectId().strict().validate(new ObjectId("aaaaaaaaaaaaaaaaaaaaaaaa")) // Valid => ObjectId("aaaaaaaaaaaaaaaaaaaaaaaa")  
```

### With Typescript
```ts
import BaseJoi from 'joi';
import JoiObjectId from '@marsup/joi-objectid';

const Joi = BaseJoi.extend(JoiObjectId);
```