open-index/open-npm huggingface dataset:
npm package: @mu-ui/mu-clipboard
Description: clipboard vue plugin for vue 2.x
Author: JR93
Latest version: 0.1.0

## mu-clipboard 剪贴板

### 安装方式

```bash
yarn add @mu-ui/mu-clipboard
```

### 使用指南

```js
// 插件
import Clipboard from '@mu-ui/mu-clipboard'

Vue.use(Clipboard)

...
methods: {
  async copy() {
    const res = await this.$copyText('复制文案内容')
    if (res.result === 'success') {
      // 成功
    } else if (res.result === 'empty') {
      // 内容为空
    } else if (res.result === 'error') {
      // 失败
    }
  }
}
```
npm package: @mu-ui/mu-collapse
Description: collapse vue component for vue 2.x
Author: JR93
Latest version: 0.1.0

## mu-collapse 折叠面板

### 安装方式

```bash
yarn add @mu-ui/mu-collapse
```

### 使用指南

```js
import { Collapse, CollapseItem } from '@mu-ui/mu-collapse'

Vue.component('Collapse', Collapse)
Vue.component('CollapseItem', CollapseItem)

<Collapse :accordion="true">
  <CollapseItem name="1" title="来来来">
    <p v-for="n in 5" :key="n">{{ n }}</p>
  </CollapseItem>
  <CollapseItem name="2" title="去去去">
    <p v-for="n in 10" :key="n">{{ n }}</p>
  </CollapseItem>
  <CollapseItem name="3" title="来去来">
    <p v-for="n in 15" :key="n">{{ n }}</p>
  </CollapseItem>
</Collapse>
```

### mu-collapse Props

参数|说明|类型|默认值
---|---|---|---
accordion|是否手风琴效果|Boolean|false

### mu-collapse-item Props

参数|说明|类型|默认值
---|---|---|---
name|唯一标识（必填）|[String, Number]|-
title|标题|String|标题
titleColor|标题字体颜色|String|#2c2c2c
arrowColor|角标颜色|String|#8a8a8a
arrowSize|角标大小|Number|16
borderColor|边框线条颜色|String|#ddd

### mu-collapse-item Slots

名称|说明
---|---
header|自定义头部
npm package: @mu-ui/mu-dialog
Description: dialog vue component & plugin for vue 2.x
Author: JR93
Latest version: 0.1.6

## mu-dialog

dialog component & plugin for vue 2.x

### Installation

```bash
yarn add @mu-ui/mu-dialog
```

### Usage

```js
// plugin
import Dialog from '@mu-ui/mu-dialog'

Vue.use(Dialog)

this.$dialog({
  title: 'Title',
  message: 'Message...',
  opacity: 0.5,
  single: true,
  highlight: '#fd0',
  btns: ['No', 'Yes'],
  confirm() {
    console.log('click confirm btn')
  },
  cancel() {
    console.log('click cancel btn')
  }
})

or

// component
import Dialog from '@mu-ui/mu-dialog'

Vue.component('mu-dialog', Dialog.Dialog)

// use v-model to control whether or not visible
<mu-dialog v-model="show" @confirm="confirm" @cancel="cancel">
  <div class="dialog-main">
    <p>1</p>
    <p>2</p>
    <p>3</p>
  </div>
</mu-dialog>
```

### Options

#### title

Type: String
Default: 'Tip'

dialog title

#### message

Type: String
Default: 'Are you sure?'

dialog message

#### btns

Type: Array
Default: []

custom button text. if you pass only one element, then a single button which emit confirm event will be displayed. And the priority is higher than the single option

#### single

Type: Boolean
Default: false

if true, only single button which emit confirm event will be displayed.

#### opacity

Type: Number
Default: 0.1

opacity of the mask's backgroundColor

#### highlight

Type: String
Default: #272639

text color of the confirm btn

#### pre

Type: Boolean
Default: false

if true, the confirm btn will be placed in the first place
npm package: @mu-ui/mu-flex
Description: flex vue component for vue 2.x
Author: JR93
Latest version: 0.1.5

## mu-flex

flex vue component for vue 2.x

### Installation

```bash
yarn add @mu-ui/mu-flex
```

### Usage

```js
import { Flex, FlexItem } from '@mu-ui/mu-flex'

Vue.component('flex', Flex)
Vue.component('flex-item', FlexItem)

<flex
  :inline="false" // true|false(default)
  direction="row" // col|row(default)
  :reverse="false" // true|false(default)
  :wrap="false" // true|false(default)
  justify="between" // [justify-content]start|end|center|around|between(default)
  items="center" // [align-items]start|end|center(default)
  align="center" // [align-content]start|end|center|around|between|stretch(default)
>
  <flex-item
    :flex="1" // Number[optional]
    align="" // [align-self]start|end|center|auto(default)
  >item-1</flex-item>
  <flex-item>item-2</flex-item>
  <flex-item>item3</flex-item>
</flex>
```
npm package: @mu-ui/mu-indicator
Description: indicator vue plugin for vue 2.x
Author: JR93
Latest version: 0.2.9

## mu-indicator

indicator plugin for vue 2.x

### Installation

```bash
yarn add @mu-ui/mu-indicator
```

### Usage

```js
import Indicator from '@mu-ui/mu-indicator'

Vue.use(Indicator)

this.$indicator.show('hello mu-ui')
this.$indicator.show({
  type: 'dual-ring',
  tip: 'hello mu-ui',
  maskColor: 'rgba(0, 0, 0, 0.1)'
})
this.$indicator.hide()
```

### Options

#### tip

Type: String

indicator tip content

#### type

Type: String
Default: ring

loading icon. It has two types(ring|dual-ring) built-in.

#### color

Type: String
Default: #fff

loading icon color & tip color

#### bgColor

Type: String
Default: rgba(0, 0, 0, 0.7)

indicator background color

#### maskColor

Type: String
Default: transparent

mask background color
npm package: @mu-ui/mu-infinite-loading
Description: infinite-loading vue component for vue 2.x
Author: JR93
Latest version: 0.2.0

## mu-infinite-loading 滚动加载

### 安装方式

```bash
yarn add @mu-ui/mu-infinite-loading
```

### 使用指南

```js
import InfiniteLoading from '@mu-ui/mu-infinite-loading'

Vue.component('InfiniteLoading', InfiniteLoading)

<InfiniteLoading class="infinite-loading-container" @load="loadMore">
  <div v-for="n in amount" :key="n">this is No.{{ n }}</div>
  <div slot="complete">全部加载完啦~~</div>
  <div slot="error">系统出小差~~</div>
  <div slot="empty">暂无数据哦~~</div>
  <div slot="loading">拼命加载中~~</div>
</InfiniteLoading>

...
methods: {
  loadMore($state) {
    if (this.amount === 80) {
      $state.complete()
      // $state.error()
      // $state.empty()
      return
    }
    setTimeout(() => {
      this.amount += 20
      $state.loaded()
    }, 1000)
  }
}
```

### mu-infinite-loading Props

参数|说明|类型|默认值
---|---|---|---
target|默认使用组件时，你需要自己定高度，如果想监听 window 滚动，则 target 指定为 window|String|''
distance|距离目标底部多少距离触发加载|Number|20(px)
debounceTime|去抖时间间隔|Number|50(ms)
preload|是否预加载，即组件挂载后自动触发一次请求|Boolean|true
loadingText|加载提示文案，更灵活可使用 slot(name='loading')|String|'loading...'
completeText|加载提示文案，更灵活可使用 slot(name='complete')|String|'complete~'
errorText|加载提示文案，更灵活可使用 slot(name='error')|String|'error~'
emptyText|加载提示文案，更灵活可使用 slot(name='empty')|String|'empty~'

### mu-infinite-loading Slots

名称|说明
---|---
loading|加载中提示文案
complete|加载完成提示文案
error|加载出错提示文案
empty|加载为空提示文案

### mu-infinite-loading Events

名称|说明
---|---
load|触发加载事件逻辑, 并通过参数$state控制加载情况
npm package: @mu-ui/mu-loading
Description: loading vue component for vue 2.x
Author: JR93
Latest version: 0.1.5

## mu-loading

loading vue component for vue 2.x

### Installation

```bash
yarn add @mu-ui/mu-loading
```

### Usage

```js
import Loading from '@mu-ui/mu-loading'

Vue.component('loading', Loading)

<loading type="dual-ring" :width="6" :size="40">
  custom width: 6
</loading>
<loading type="dual-ring" :width="6" :size="40">
  <div slot="icon" class="loading-dot"></div>
  custom icon
</loading>
```

### Options

#### type

Type: String
Default: ring

loading icon. It has two types(ring|dual-ring) built-in.

#### color

Type: String
Default: #272639

loading icon color

#### size

Type: Number
Default: 30

loading icon width & height

#### width

Type: Number
Default: 3

loading icon border width
npm package: @mu-ui/mu-notice-bar
Description: notice-bar vue component for vue 2.x
Author: JR93
Latest version: 0.1.0

## mu-notice-bar 通知栏

### 安装方式

```bash
yarn add @mu-ui/mu-totice-bar
```

### 使用指南

```js
import NoticeBar from '@mu-ui/mu-totice-bar'

Vue.component('NoticeBar', NoticeBar)

<NoticeBar :text="list"></NoticeBar>
```

### mu-notice-bar Props

参数|说明|类型|默认值
---|---|---|---
text|消息（常量或者可追加，但不能删减）|[String, Array]|''
speed|速度|Number|50
interval|消息间隔|Number|3
delay|消息延迟|Number|1
npm package: @mu-ui/mu-popup
Description: popup vue component for vue 2.x
Author: JR93
Latest version: 0.1.6

## mu-popup

popup vue component for vue 2.x

### Installation

```bash
yarn add @mu-ui/mu-popup
```

### Usage

```js
import Popup from '@mu-ui/mu-popup'

Vue.component('popup', Popup)

<popup
  v-model="show" // use v-model to control whether or not visible
  transition="slide"
  position="top"
  :modal="true"
  :clickable="true"
  :opacity="0.1"
  :duration="0.5"
>
  <p>I am a popup</p>
</popup>
```

### Options

#### transition

Type: String
Default: fade

custom transition effect. It has two transitions(fade|slide) built-in.

#### position

Type: String
Default: center // ['top', 'bottom', 'left', 'right', 'center']

position of popup

#### modal

Type: Boolean
Default: true

Whether or not need a modal

#### clickable

Type: Boolean
Default: true

Whether or not click the modal to hide popup

#### clickFn

Type: Function
Default: null

Click the modal to hide popup, and execute the clickFn method if exists

#### touchmove

Type: Boolean
Default: true

Whether or not the modal can touchmove

#### opacity

Type: Number
Default:0.5

opacity of the modal

#### duration

Type: Number
Default:0.5

transition-duration
npm package: @mu-ui/mu-qrcode
Description: qrcode vue component for vue 2.x
Author: JR93
Latest version: 0.1.6

## mu-qrcode

qrcode vue component for vue 2.x by using [node-qrcode](https://github.com/soldair/node-qrcode)

### Installation

```bash
yarn add @mu-ui/mu-qrcode
```

### Usage

```js
import Qrcode from '@mu-ui/mu-qrcode'

Vue.component('qrcode', Qrcode)

<qrcode val="https://github.com/mu-ui/mu-ui/"></qrcode>
```

### Options

#### val

Type: String

the url address you want to generate a qrcode

#### size

Type: Number
Default: 128

size of the qrcode

#### margin

Type: Number
Default: 2

Define how much wide the quiet zone should be

#### type

Type: String
Default: canvas

canvas or img

#### dark

Type: String
Default: #000

Color of dark module. Value must be in hex format (RGBA).

#### light

Type: String
Default: #fff

Color of light module. Value must be in hex format (RGBA).
npm package: @mu-ui/mu-rotary
Description: rotary vue component for vue 2.x
Author: JR93
Latest version: 0.1.5

## mu-rotary

rotary vue component for vue 2.x

### Installation

```bash
yarn add @mu-ui/mu-rotary
```

### Usage

```js
import Rotary from '@mu-ui/mu-rotary'

Vue.component('rotary', Rotary)

<rotary class="rotary-main" @handle="draw" @finish="showResult">
  <div slot="canvas" class="rotary-canvas">
    <div class="rotary-lamp"></div>
  </div>
  <div slot="handler" class="rotary-handler"></div>
</rotary>

...
methods: {
  draw($result) {
    setTimeout(() => {
      this.lucky = Math.floor(Math.random() * 8)
      $result.set(this.lucky) // [0,7]
      // $result.free() // Call this method to release free state of rotary when error
    }, 500)
  },
  showResult() {
    console.log(`恭喜抽中: ${this.gifts[this.lucky].name}`)
  }
}
```

### Options

#### turnsCount

Type: Number
Default: 3

turns count for per game by default, then it will find the position of the result you setted

#### duration

Type: Number
Default: 6

duration time for per game

#### number

Type: Number
Default: 8

the number of prizes
npm package: @mu-ui/mu-scroll
Description: scroll vue component for vue 2.x
Author: JR93
Latest version: 0.1.0

## mu-scroll 局部滚动

### 安装方式

```bash
yarn add @mu-ui/mu-scroll
```

### 使用指南

```js
import Scroll from '@mu-ui/mu-scroll'

Vue.component('Scroll', Scroll)

<Scroll
  :pullRefresh="true"
  :infiniteLoading="false"
  :scrollBar="true"
  :scrollBarOffset="0"
  @pull-refresh="load"
  @pull-state="state"
  @infinite-loading="load2">
  <p v-for="n in count" :key="n">我是第{{ n }}个段落</p>
</Scroll>

...
methods: {
  load($result) {
    setTimeout(() => {
      this.count += 20
      $result.finish()
    }, 3000)
  },
  load2($result) {
    setTimeout(() => {
      this.count += 20
      $result.loaded()
    }, 3000)
  },
  state(state) {
    console.log(state)
  }
}
```

### mu-scroll Props

参数|说明|类型|默认值
---|---|---|---
pullRefresh|是否可下拉刷新|Boolean|false
infiniteLoading|是否可滚动加载|Boolean|false
scrollBar|是否要滚动条|Boolean|false
scrollBarOffset|滚动条偏移量|Number|0
scrollBarColor|滚动条颜色|String|#aaa
scrollBarBgColor|滚动条背景颜色|String|transparent
pullStep|下拉时缓动比例|Number|4
bounceTime|过渡时间|Number|800

### mu-scroll Slots

名称|说明
---|---
pulldown|自定义下拉展示内容
infinite|自定义滚动加载展示内容

### mu-scroll Events

名称|说明
---|---
pull-refresh|触发下拉加载
pull-state|下拉时，各阶段反馈
infinite-loading|触发滚动加载
npm package: @mu-ui/mu-storage
Description: storage plugin for vue 2.x
Author: JR93
Latest version: 0.1.4

## mu-storage

a simple storage plugin for vue 2.x to use localStorage & sessionStorage.

### Installation

```bash
yarn add @mu-ui/mu-storage
```

### Usage

```js
import Storage from '@mu-ui/mu-storage'

Vue.use(Storage)
```

### Example

```js
// localStorage
this.$storage.set('name', 'JR')
Vue.storage.get('name')

// sessionStorage
this.$session.set('name', 'JR')
Vue.session.get('name')
```

### Api

#### set(key, val)

set storage with key and val

#### get(key)

get storage with key

#### remove(key)

remove storage with key

#### has(key)

determine storage has the key

#### clearAll()

clear all storages

#### forEach(callback)

forEach the storages and call the callback function with each storage

#### filter(callback(key))

create a array with all storages that pass the test implemented by the provided function. If no storages pass the test, an empty array will be returned. If don't provide a callback function, a array with all storages will be returned.

**callback**

Function is a predicate, to test each storage of the storages. Return true to keep the storage, false otherwise. It accepts one arguments:

**key**

key of the current storage

```js
const arr = this.$storage.filter(key => {
  return key === 'name'
})
console.log(arr) // [{key: 'name', val: 'JR'}]
```
npm package: @mu-ui/mu-sudoku
Description: sudoku vue component for vue 2.x
Author: JR93
Latest version: 0.1.5

## mu-sudoku

sudoku vue component for vue 2.x

### Installation

```bash
yarn add @mu-ui/mu-sudoku
```

### Usage

```js
import Sudoku from '@mu-ui/mu-sudoku'

Vue.component('sudoku', Sudoku)

<sudoku @handle="draw" @finish="showResult">
  <template
    v-for="(item, index) in gifts"
    :slot="`item-${index}`"
    slot-scope="props">
    <div
      :key="item.id"
      class="sudoku-item"
      :class="{'sudoku-active': props.active}">
      {{ item.name }}
    </div>
  </template>
  <div slot="handler" class="sudoku-item sudoku-click-btn">
    <p class="sudoku-text">抽奖</p>
  </div>
</sudoku>

...
methods: {
  draw($result) {
    setTimeout(() => {
      this.lucky = Math.floor(Math.random() * 8)
      $result.set(this.lucky) // [0,7]
      // $result.free() // Call this method to release free state of sudoku when error
    }, 500)
  },
  showResult() {
    console.log(`恭喜抽中: ${this.gifts[this.lucky].name}`)
  }
}

```

### Options

#### turnsCount

Type: Number
Default: 3

turns count for per game by default, then it will find the position of the result you setted

#### initialRate

Type: Number
Default: 100
Range: [50, 200]

initial rate for turns

#### slowestRate

Type: Number
Default: 800
Range: [500, 1000]

slowest rate for turns
npm package: @mu-ui/mu-swipe
Description: swipe vue component for vue 2.x
Author: JR93
Latest version: 0.2.0

## mu-swipe 轮播

### 安装方式

```bash
yarn add @mu-ui/mu-swipe
```

### 使用指南

```js
import { Swipe, SwipeItem } from '@mu-ui/mu-swipe'

Vue.component('Swipe', Swipe)
Vue.component('SwipeItem', SwipeItem)

<Swipe :loop="false" @change="change">
  <SwipeItem v-for="n in list" :key="n" :style="{'background-color': n}">
    第一屏{{ n }}
  </SwipeItem>
  <div slot="indicator">
    {{ current + 1 }} / {{ list.length }}
  </div>
</Swipe>

export default {
  data() {
    return {
      list: ['red', 'blue', 'green'],
      current: 0
    }
  },
  methods: {
    change(index) {
      this.current = index
    }
  }
}
```

### mu-swipe Props

参数|说明|类型|默认值
---|---|---|---
loop|循环播放|Boolean|true
showIndicator|是否展示指示器|Boolean|true
indicatorColor|指示器选中颜色|String|#fff
duration|滑动过渡时间|Number|500
autoplay|自动播放时间间隔|Number|3000

### mu-swipe Slots

名称|说明
---|---
indicator|自定义指示器

### mu-swipe Events

名称|说明
---|---
change|返回当前页码下标
npm package: @mu-ui/mu-toast
Description: toast vue plugin for vue 2.x
Author: JR93
Latest version: 0.1.12

## mu-toast

toast plugin for vue 2.x

### Installation

```bash
yarn add @mu-ui/mu-toast
```

### Usage

```js
import Toast from '@mu-ui/mu-toast'

Vue.use(Toast)

// two ways to use
this.$toast('hello')
Vue.toast('world')

// more options
this.$toast({
  message: 'toast message',
  position: 'bottom', // top|middle|bottom(default)
  duration: 3000, // 3000(default)
  color: '#fff', // #fff(default)
  bgColor: 'rgba(0, 0, 0, 0.7)', // rgba(0, 0, 0, 0.7)(default)
  customClass: 'custom-class' // [optional]
})
```

### Options

#### message

Type: String|Required

toast message

#### position

Type: String
Default: bottom

the position of toast instance, one of top|middle|bottom

#### duration

Type: Number
Default: 3000

stay time

#### color

Type: String
Default: #fff

text color

#### bgColor

Type: String
Default: rgba(0, 0, 0, 0.7)

backgroundColor

#### customClass

Type: String
Default: ''

custom className to overwrite default style. Please pay attention to the CSS class scope
npm package: @mu-ui/mu-touch
Description: touch vue component for vue 2.x
Author: JR93
Latest version: 0.1.0

## mu-touch 滑动手势

### 安装方式

```bash
yarn add @mu-ui/mu-touch
```

### 使用指南

```js
import Touch from '@mu-ui/mu-touch'

Vue.component('Touch', Touch)

<Touch @result="result">
  ...
</Touch>

...
methods: {
  result(res) {
    console.log(res) // top|bottom|left|right
  }
}
```

### mu-touch Props

参数|说明|类型|默认值
---|---|---|---
threshold|滑动生效的最小距离|Number|50
restraint|滑动时另一个方向的最大距离|Number|80

### mu-touch Events

名称|说明
---|---
result|返回触发方向的结果
npm package: @mu1147-legend/cf-speed-test
Description: CLI Speed Test Tool (Download, Upload, Ping, Jitter)
Author: Muhammad Ullah
Latest version: 1.0.4

# 🚀 cf-speed-test

A fast, lightweight CLI tool to test your internet speed directly from the terminal.

Includes:

* ⚡ Download speed
* ⬆ Upload speed
* 📡 Latency (Ping)
* 📊 Jitter
* 🔁 Multiple test rounds
* 🎯 Parallel connections

---

## 📦 Installation

### Run instantly (no install)

```bash
npx @mu1147-legend/cf-speed-test
```

---

### Install globally

```bash
npm install -g @mu1147-legend/cf-speed-test
```

Then run:

```bash
netspeed
```

---

## ⚙️ Usage

```bash
netspeed
```

---

## 🛠️ Options

You can customize the test using CLI flags:

```bash
netspeed --connections=4 --download=50 --upload=20 --rounds=2
```

### Available Options

| Flag            | Description                       | Default |
| --------------- | --------------------------------- | ------- |
| `--connections` | Number of parallel connections    | `4`     |
| `--download`    | Download size per connection (MB) | `50`    |
| `--upload`      | Upload size per connection (MB)   | `20`    |
| `--rounds`      | Number of test rounds             | `2`     |
| `--json`        | Output result as JSON             | `false` |

---

## 📊 Example Output

```
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🚀 Legendary Speed Test

Round 1

⬇ Testing download...
[████████████████████] 100%  240 Mbps
✔ Download: 238 Mbps

⬆ Testing upload...
[████████████████████] 100%  230 Mbps
✔ Upload: 225 Mbps

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Connections: 4
Latency: 22 ms
Jitter: 3 ms

⬇ Download: 235 Mbps
⬆ Upload:   220 Mbps
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
```

---

## 🌍 How it works

* Uses parallel HTTP requests to measure bandwidth
* Streams data in chunks for real-time speed calculation
* Measures latency using lightweight HEAD requests
* Calculates jitter based on multiple ping attempts

---

## ⚠️ Notes

* Results may vary depending on your ISP and routing
* CDN-based testing (Cloudflare) may show higher peak speeds
* For best results:

  * Use stable connection
  * Avoid background downloads
  * Run multiple rounds

---

## 🧪 Advanced Usage

### JSON Output (for scripting)

```bash
netspeed --json
```

---

### High Accuracy Mode

```bash
netspeed --connections=6 --download=100 --rounds=3
```

---

## 📄 License

MIT License