open-index/open-npm huggingface dataset:
npm package: @showgoods/shortcuts
Description: Package is available on NPM
Latest version: 0.0.0

## Installation

Package is available on NPM

```
npm install @showgoods/shortcuts --save
```

## Usage

Require module if you use Webpack or ES6 
```javascript
const Shortcut = require('@showgoods/shortcuts');
```
or 
```javascript
import Shortcut from '@showgoods/shortcuts'
```

### Creating a shortcut

library provided as class, so to create a new shortcut, make a `Shortcut` instance with specified options. 

Example:

```javascript
let cmdA = new Shortcut({
    name : 'CMD+A',
    on : document.body,
    callback: function(event) {
        // your handler
    }
});
```
```name``` - this is shortcut name, keys must be separated by `+`

```on``` - binding element. Shortcut will be fired only on passed (this) element

```callback``` - you code that defines the behaviour

If you have a single-page web application and you don't need shortcuts handler
you can easily remove it

```javascript
cmdA.remove();
```

## How it works

Library parses data given on constructor, defines commands and keys.

Supported commands : ```shift```, ```cmd```, ```command```, ```ctrl```,
```control```, ```windows```, ```alt```. 

other words we pass as keys and special commands. Special commands are:
```backspace```, ```enter```, ```right```, ```left```, ```up```, ```down```, 
```escape```, ```insert```, ```delete```.
npm package: @showings-min/sh-cascader
Description: 级联选择器 - 小程序组件
Latest version: 1.0.2

# sh-cascader

> 级联选择器 - 小程序组件

## Install

``` bash
$ min install @showings-min/sh-cascader
```


## API

### Cascader

| 名称                  | 描述                         |
|----------------------|------------------------------|
|`name`     |String: 当触发表单容器的onSubmit方法时，所返回的字段名称（参考原生输入控件与form标签的onSubmit方法介绍）|
|`value`    |String: 当触发表单容器的onSubmit方法时，所返回的值|
|`label`    |String: 字段名称，与name不同意义|
|`labelWidth`|String: 字段名宽度，例如：100rpx|
|`title`    |String: 选择器标题|
|`options`|Array: 级联选项，数据结构是嵌套的树形结构，具体请参考示例代码|
|`onConfirm(e)`|Function: 点击确定后回调的函数，参数e中携带value|

## ChangeLog

#### v1.0.0（2018-2-18）

- 初始版本
npm package: @showings-min/sh-date-picker
Description: 日期选择器 - 小程序组件
Latest version: 1.0.8

# sh-date-picker

> 日期选择器 - 小程序组件

## Install

``` bash
$ min install @showings-min/sh-date-picker
```


## API

### DatePicker

| 名称                  | 描述                         |
|----------------------|------------------------------|
|`name`     |String: 当触发表单容器的onSubmit方法时，所返回的字段名称（参考原生输入控件与form标签的onSubmit方法介绍）|
|`value`    |Array: 当触发表单容器的onSubmit方法时，所返回的值，格式为[年，月，日]|
|`label`    |String: 字段名称，与name不同意义|
|`labelWidth`|String: 字段名宽度，例如：100rpx|
|`onChange(e)` |Function: 日期修改即刻回调，参数e中携带value|
|`onConfirm(e)`|Function: 点击确定后回调的函数，参数e中携带value|

## ChangeLog

#### v1.0.0（2018-2-15）

- 初始版本
npm package: @showings-min/sh-divider
Description: 分割线 - 小程序组件
Latest version: 1.0.2

# sh-divider

> 分割线 - 小程序组件

## Install

``` bash
$ min install @showings-min/sh-divider
```


## API

### Divider

| 名称                  | 描述                         |
|----------------------|------------------------------|
|`title`           |String: 分割线标题|
|`visible`         |Boolean: 是否显示|
|`slot`    |Slot: 可选值 default（默认插槽）|

## ChangeLog

#### v1.0.0（2018-2-18）

- 初始版本
npm package: @showings-min/sh-form
Description: 表单 - 小程序组件
Latest version: 1.0.7

# sh-form

> 表单 - 小程序组件

## Install

``` bash
$ min install @showings-min/sh-form
```


## API

### Form

| 名称                  | 描述                         |
|----------------------|------------------------------|
|`formTitle`           | 表单标题         |

## ChangeLog

#### v1.0.0（2018-2-14）

- 初始版本
npm package: @showings-min/sh-input
Description: 文本输入 - 小程序组件
Latest version: 1.0.13

# sh-input

> 文本输入 - 小程序组件

## Install

``` bash
$ min install @showings-min/sh-input
```


## API

### Input

| 名称             |描述                      |
|-----------------|--------------------------|
|`name`     |String: 当触发表单容器的onSubmit方法时，所返回的字段名称（参考原生输入控件与form标签的onSubmit方法介绍）|
|`value`    |String: 当触发表单容器的onSubmit方法时，所返回的字段值|
|`label`    |String: 字段名称，与name不同意义|
|`labelWidth` |String: 字段名宽度，例如：100rpx|
|`type`     |String: 可选"text/number/idcard/digit",参考小程序文档input部分|
|`password` |Boolean: 是否是密码输入框|
|`disabled` |Boolean: 是否不可用|
|`placeholder` |String: 提示占位文字|
|`max` |Number: 最大输入字数|
|`autoFocus` |Boolean: 是否自动聚焦|
|`focus` |Boolean: 是否聚焦|
|`onInput(e)` |Function: 输入变化回调函数，参数内带值|



## ChangeLog

#### v1.0.0（2018-2-14）

- 初始版本
npm package: @showings-min/sh-input-number
Description: 数字输入 - 小程序组件
Latest version: 1.0.2

# sh-input-number

> 数字输入 - 小程序组件

## Install

``` bash
$ min install @showings-min/sh-input-number
```


## API

### InputNumber

| 名称                  | 描述                         |
|----------------------|------------------------------|
|`name`     |String: 当触发表单容器的onSubmit方法时，所返回的字段名称（参考原生输入控件与form标签的onSubmit方法介绍）|
|`value`    |String: 当触发表单容器的onSubmit方法时，所返回的字段值|
|`label`    |String: 字段名称，与name不同意义|
|`labelWidth` |String: 字段名宽度，例如：100rpx|
|`min`    |Number: 最小值|
|`max` |Number: 最大值|
|`onInput(e)` |Function: 输入变化回调函数，参数内带值|
|`onPlus(e)` |Function: 数字增加回调函数，参数内带值|
|`onMinus(e)` |Function: 数字减少回调函数，参数内带值|

## ChangeLog

#### v1.0.0（2018-2-17）

- 初始版本
npm package: @showings-min/sh-list
Description: 列表 - 小程序组件
Latest version: 1.0.12

# sh-list

> 列表 - 小程序组件

## Install

``` bash
$ min install @showings-min/sh-list
```


## API

### List

| 名称                  | 描述                         |
|----------------------|------------------------------|
|`prop-name`           | 描述属性的类型，默认值等         |
|`method-name`         | 描述方法的参数，返回值等         |

## ChangeLog

#### v1.0.0（2018-2-14）

- 初始版本
npm package: @showings-min/sh-map
Description: 地图选择 - 小程序组件
Latest version: 1.0.1

# sh-map

> 地图选择 - 小程序组件

## Install

``` bash
$ min install @showings-min/sh-map
```


## API

### Map

| 名称                  | 描述                         |
|----------------------|------------------------------|
|`name`     |String: 当触发表单容器的onSubmit方法时，所返回的字段名称（参考原生输入控件与form标签的onSubmit方法介绍）|
|`value`    |Object: 当触发表单容器的onSubmit方法时，所返回的经纬度对象，同时也是地图初始定位经纬度|
|`label`    |String: 字段名称，与name不同意义|
|`labelWidth` |String: 字段名宽度，例如：100rpx|
|`marker` |Object: 数据结构与微信地图原生组件中的marker相同，但注意，本组件只支持一个marker所以此参数不是数组，只是原生markers数组中的一个子元素而已|
|`scale`    |Number: 地图缩放等级|
|`iconPath` |String: marker标记的图片地址，支持本地图片，建议路径采用绝对值，上述参数marker对象中也有这个字段，这两个字段特性相同，但本参数与marker中的iconPath使用场景不同，所以都要分别定义。|


## ChangeLog

#### v1.0.0（2018-2-18）

- 初始版本
npm package: @showings-min/sh-modal
Description: 对话框 - 小程序组件
Latest version: 1.0.1

# sh-modal

> 对话框 - 小程序组件

## Install

``` bash
$ min install @showings-min/sh-modal
```


## API

### Modal

| 名称                  | 描述                         |
|----------------------|------------------------------|
|`prop-name`           | 描述属性的类型，默认值等         |
|`method-name`         | 描述方法的参数，返回值等         |

## ChangeLog

#### v1.0.0（2018-2-15）

- 初始版本
npm package: @showings-min/sh-popup
Description: 弹出层 - 小程序组件
Latest version: 1.0.3

# sh-popup

> 弹出层 - 小程序组件

## Install

``` bash
$ min install @showings-min/sh-popup
```


## API

### Popup

| 名称                  | 描述                         |
|----------------------|------------------------------|
|`visible`           | Boolean: 弹出层是否可见         |
|`title`             | String: 弹出层中间标题         |
|`share`             | Boolean: 是否将确定按钮添加分享页面功能|
|`onCancel`          | Function(): 取消按钮点击事件|
|`onConfirm`         | Function(): 确定按钮点击事件|


## ChangeLog

#### v1.0.0（2018-2-15）

- 初始版本
npm package: @showings-min/sh-select
Description: 选择器 - 小程序组件
Latest version: 1.0.1

# sh-select

> 选择器 - 小程序组件

## Install

``` bash
$ min install @showings-min/sh-select
```


## API

### Select

| 名称                  | 描述                         |
|----------------------|------------------------------|
|`name`     |String: 当触发表单容器的onSubmit方法时，所返回的字段名称（参考原生输入控件与form标签的onSubmit方法介绍）|
|`value`    |String: 当触发表单容器的onSubmit方法时，所返回的值|
|`label`    |String: 字段名称，与name不同意义|
|`labelWidth`|String: 字段名宽度，例如：100rpx|
|`title`    |String: 选择器标题|
|`options`|Array: 待选选项|
|`onConfirm(e)`|Function: 点击确定后回调的函数，参数e中携带value|


## ChangeLog

#### v1.0.0（2018-2-21）

- 初始版本
npm package: @showings-min/sh-white-space
Description: 上下留白 - 小程序组件
Latest version: 1.0.1

# sh-white-space

> 上下留白 - 小程序组件

## Install

``` bash
$ min install @showings-min/sh-white-space
```


## API

### WhiteSpace

| 名称                  | 描述                         |
|----------------------|------------------------------|
|`size`           | String: 可选值[lg/medium/mini]|

## ChangeLog

#### v1.0.0（2018-2-15）

- 初始版本
npm package: @showings-min/sh-wing-blank
Description: 两翼留白 - 小程序组件
Latest version: 1.0.1

# sh-wing-blank

> 两翼留白 - 小程序组件

## Install

``` bash
$ min install @showings-min/sh-wing-blank
```


## API

### WingBlank

| 名称                  | 描述                         |
|----------------------|------------------------------|
|`size`           | String: 可选值[lg/medium/mini]         |

## ChangeLog

#### v1.0.0（2018-2-15）

- 初始版本
npm package: @showings-min/showings-ui
Description: ShowingsMinUI-组件库
Author: wuxinzhe
Latest version: 1.0.1

# ShowingsMinUI

> ShowingsMinUI-小程序组件库

![qrcode](http://image.showings.com.cn/qrcode.jpeg)

##随便聊聊
>本组件库是由我个人基于MIT协议开源，说实在的，我也不知道MIT协议是什么。= =第一次做开源项目，小程序目前有很多不错的组件库，会产生再做一个UI库是因为Min的组件开发CLI真的非常方便，一开始本只想做一个自己用的组件库（我在开发小程序的时候，市面上还没有什么开源UI组件库，所以那时候都是直接写原生），但后来发现了Min-Cli，就觉得这么方便的东西，不如直接把我的组件库开源了。于是就开始翻写，把之前写原生的都翻写到Min了，最终就有了这个ShowingsUI组件库。而且由于Min的UI组件库缺乏表单控件，所以我感觉自己做这个还是挺有意义的。

###安装
``` bash
$ min install @showings-min/showings-ui
```
>这个是整个库的安装


###基于Min
>吃水不忘挖井人，本组件库是基于Min-Cli开发套件开发的UI库，当然也借助Min的特性，本组件库可以结合Wepy进行开发。
npm package: @showings_quix/avatar
Description: 头像 - 快应用组件
Latest version: 1.0.2

# sh-modal

> 对话框 - 小程序组件

## Install

``` bash
$ min install @showings-min/sh-modal
```


## API

### Modal

| 名称                  | 描述                         |
|----------------------|------------------------------|
|`prop-name`           | 描述属性的类型，默认值等         |
|`method-name`         | 描述方法的参数，返回值等         |

## ChangeLog

#### v1.0.0（2018-2-15）

- 初始版本
npm package: @showings_quix/quix
Description: Quix是专为快应用设计的UI库
Author: WuXinZhe
Latest version: 1.0.0

# Quix 快应用快速开发组件库
> UI for Quick App 

## 项目说明
> 本项目是开源项目，针对快应用开发的UI组件库，是基于快应用原生的语法开发。项目当前已完成大约30%，后续还会有很多组件会陆续更新，并且所有组件均会保持一套相同的UI风格。希望本项目能够促进快应用的普及。

## 项目截图
![104](http://image.showings.com.cn/2-showingsview)
![106](http://image.showings.com.cn/1-showingsview)
![103](http://image.showings.com.cn/3-showingsview)
![105](http://image.showings.com.cn/4-showingsview)
![107](http://image.showings.com.cn/5-showingsview)
![108](http://image.showings.com.cn/6-showingsview)
![109](http://image.showings.com.cn/7-showingsview)

## 项目预览
可以在根目录下 /dist/com.showings.quix.rpx 下载打包后的UI快应用。

## 欢迎一起讨论学习
![110](http://image.showings.com.cn/tutoro-showingsview)
npm package: @showings_service/showings-min-ui-form
Description: 表单 - 小程序组件
Latest version: 1.0.1

# sh-form

> 表单 - 小程序组件

## Install

``` bash
$ min install @showings_service/showings-min-ui-form
```


## API

### Form

| 名称                  | 描述                         |
|----------------------|------------------------------|
|`formTitle`           | 表单标题         |

## ChangeLog

#### v1.0.0（2018-2-14）

- 初始版本
npm package: @showings_service/showings-min-ui-input
Description: 文本输入 - 小程序组件
Latest version: 1.0.5

# sh-input

> 文本输入 - 小程序组件

## Install

``` bash
$ min install @showings_service/showings-min-ui-input
```


## API

### Input

| 名称             |描述                      |
|-----------------|--------------------------|
|`name`     |String: 当触发表单容器的onSubmit方法时，所返回的字段名称（参考原生输入控件与form标签的onSubmit方法介绍）|
|`value`    |String: 当触发表单容器的onSubmit方法时，所返回的字段值|
|`label`    |String: 字段名称，与name不同意义|
|`labelWidth` |String: 字段名宽度，例如：100rpx|
|`type`     |String: 可选"text/number/idcard/digit",参考小程序文档input部分|
|`password` |Boolean: 是否是密码输入框|
|`disabled` |Boolean: 是否不可用|
|`placeholder` |String: 提示占位文字|
|`max` |Number: 最大输入字数|
|`autoFocus` |Boolean: 是否自动聚焦|
|`focus` |Boolean: 是否聚焦|



## ChangeLog

#### v1.0.0（2018-2-14）

- 初始版本
npm package: @showings_service/showings-min-ui-list
Description: 列表 - 小程序组件
Latest version: 1.0.8

# sh-list

> 列表 - 小程序组件

## Install

``` bash
$ min install @showings_service/showings-min-ui-list
```


## API

### List

| 名称                  | 描述                         |
|----------------------|------------------------------|
|`prop-name`           | 描述属性的类型，默认值等         |
|`method-name`         | 描述方法的参数，返回值等         |

## ChangeLog

#### v1.0.0（2018-2-14）

- 初始版本
npm package: @showings_service/showings-sh-list
Description: 列表 - 小程序组件
Latest version: 1.0.6

# sh-list

> 列表 - 小程序组件

## Install

``` bash
$ min install sh-list
```


## API

### List

| 名称                  | 描述                         |
|----------------------|------------------------------|
|`prop-name`           | 描述属性的类型，默认值等         |
|`method-name`         | 描述方法的参数，返回值等         |

## ChangeLog

#### v1.0.0（2018-2-14）

- 初始版本
npm package: @showlotus/code-inspector-plugin
Description: A webpack plugin to quickly locate code source files.
Author: showlotus
Latest version: 0.0.1

# Code Inspector Plugin

> [!TIP]
> 适用于用 _Webpack_ 打包的 _Vue_ 项目，借助于 _Vue_ `render` 函数的 `attrs` 属性（在上游阶段添加 `__file` 属性），如果当前渲染的 _DOM_ 节点拥有一个 `__file` 属性，即当前组件文件的相对路径。当触发选择器后并点击，就会打开当前 _DOM_ 节点所在的组件源文件。注意：该插件不会向 `Vue` 组件中注入 `__file` 属性，需要在上游阶段提供。

同时按下：`Alt` + `Shift` 时，触发选择器。点击后，在编辑器中打开当前元素对应的代码源文件。

![demo](https://github.com/showlotus/code-inspector-plugin/raw/master/res/code-inspector-plugin-demo.gif)

## 安装

安装插件

```shell
npm install @showlotus/code-inspector-plugin -D
```

配置 Webpack

```js
const CodeInspectorPlugin = require('@showlotus/code-inspector-plugin')

module.exports = {
  plugins: [
    new CodeInspectorPlugin({
      test: /\.ts$/,
      include: /src\//,
      exclude: /node_modules/,
      editor: 'code',
    }),
  ],
}
```

## 配置

### 参数

#### test

Type: `string | RegExp | [string, RegExp]`

Default: `null`

所有匹配的模块。

#### include

Type: `string | RegExp | [string, RegExp]`

Default: `null`

包含匹配到的所有模块。

#### exclude

Type: `string | RegExp | [string, RegExp]`

Default: `null`

排除匹配到的所有模块。

#### editor

Type: `string`

Default: `code`，可选值：`code`、`idea`、`webstorm`。

打开文件所用的编辑器命令。
npm package: @showlotus/open-scriptable
Description: Open-source Scriptable scripts for iOS Widgets
Author: showlotus
Latest version: 0.1.23

# Open-source Scriptable scripts for iOS Widgets

参考文档：

- [Scriptable API 文档](https://docs.scriptable.app/)

## 使用示例

```javascript
// 配置
const config = {
  name: 'World',
};
// 加载脚本
const url = 'https://cdn.jsdelivr.net/npm/@showlotus/open-scriptable@latest/dist/hello-world.js';
const code = await new Request(url).loadString();
// 执行脚本
const render = new Function(code)();
await render(config);
```

<div>
  <img src="./res/hello-world/light.png" alt="light" width="300">
  <img src="./res/hello-world/dark.jpeg" alt="dark" width="300">
</div>

## 组件列表

### 倒计时组件

```js
const url = 'https://cdn.jsdelivr.net/npm/@showlotus/open-scriptable@latest/dist/count-down.js';
const code = await new Request(url).loadString();
const render = new Function(code)();
await render();
```

<!-- <div>
  <img src="./res/count-down/light.jpeg" alt="light" width="300">
  <img src="./res/count-down/dark.jpeg" alt="dark" width="300">
</div> -->

<div>
  <img src="./res/count-down/light-v2.jpeg" alt="light" width="300">
  <img src="./res/count-down/dark-v2.jpeg" alt="dark" width="300">
</div>

<!-- ### 月度消费组件 -->

## 开发

```bash
# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev
```

在 Scriptable 中加载 `http://192.168.5.6:3000/src/hello-world.ts` 脚本，即可看到效果。

```js
// 加载脚本
const url = 'http://192.168.5.6:3000/src/hello-world.ts';
const code = await new Request(url).loadString();
// 执行脚本
const render = new Function(code);
await render();
```
npm package: @showlotus/prettier-plugin-kebab-to-camel
Description: A prettier plugin to convet attribute style from kebab-case to camelCase in typescript and javascript files by the provided attributes list.
Author: showlotus
Latest version: 0.0.4

# Prettier plugin kebab to camel

> [!WARNING]
> If you use `<Foo>x` in a `.ts` file, it won't work. But you can instead write `x as Foo`.

A prettier plugin to convet attribute style from `kebab-case` to `camelCase` in typescript and javascript files by the provided attributes list.

### Input

```js
const obj = {
  props: {
    name: "xxx",
    "-one-two": 12,
    "thr-fou-": 34,
    "-fiv-six-": 56,
    props: {
      "name-one": "xxx",
    },
    "before-page-change"() {},
  },
}

export default function () {
  return {
    props: {
      "prop-one": 1,
      "prop-two": 2,
      "prop-three": 3,
      "prop-four": 4,
    },
  }
}
```

### Output

```js
const obj = {
  props: {
    name: "xxx",
    "-one-two": 12,
    "thr-fou-": 34,
    "-fiv-six-": 56,
    props: {
      nameOne: "xxx",
    },
    beforePageChange() {},
  },
}

export default function () {
  return {
    props: {
      propOne: 1,
      propTwo: 2,
      propThree: 3,
      propFour: 4,
    },
  }
}
```

### Install

```shell
npm install --save-dev  @showlotus/prettier-plugin-kebab-to-camel
```

or, using yarn

```shell
yarn add --dev @showlotus/prettier-plugin-kebab-to-camel
```

### Usage

Add plugins and an attributes list in prettier config file.

```js
module.exports = {
  /* ... */
  attributeUnderKeys: ["props"],
  plugins: ["@showlotus/prettier-plugin-kebab-to-camel"],
}
```

### APIs

#### `attributeUnderKeys`

type: `Array<string>`

default value: `["props"]`

A list of attributes to match the `kebab-case` style attributes under that attribute.

```js
"attributeUnderKeys": ["props", "someProp"]
```

As configured above, all objects with properties named `props` and `someProps` under the object are matched, and all `kebab-case` style property names under the matched object are converted to the `camelCase` style.