open-index/open-npm huggingface dataset:
npm package: @forxtu/eslint-plugin-react-native-a11y
Description: Set of custom rules for RN a11y
Author: forxtu
Latest version: 0.2.1

# eslint-plugin-react-native-a11y

Set of custom rules for RN a11y

## Installation

You'll first need to install [ESLint](http://eslint.org):

```
$ yarn add -D eslint
```

Next, install `@forxtu/eslint-plugin-react-native-a11y`:

```
$ yarn add -D @forxtu/eslint-plugin-react-native-a11y
```

## Usage

Add `@forxtu/react-native-a11y` to the plugins section of your `.eslintrc` configuration file. You can omit the `eslint-plugin-` prefix:

```json
{
  "plugins": ["@forxtu/react-native-a11y"]
}
```

Then configure the rules you want to use under the rules section.

```json
{
  "rules": {
    "@forxtu/react-native-a11y/rule-name": 2
  }
}
```

## Supported Rules

- [pressable-has-accessibility-role](https://github.com/forxtu/fx2-eslint-plugin-react-native-a11y/blob/master/docs/rules/pressable-has-accessibility-role.md)
npm package: @forzoom/bh-integrations
Description: 最好搭配@forzoom/bh-webpack-plugin一起使用
Latest version: 0.1.3

## Intro

最好搭配@forzoom/bh-webpack-plugin一起使用

发送数据时会尝试使用`navigator.sendBeacon`，发送的数据格式使用`FormData`，目前来看`FormData`的兼容性良好

## Usage

和Vue进行集成

```typescript
import Vue from 'vue';
import { BH, Integration, VueIntegration, VueIntegrationOptions } from '@forzoom/bh-integrations';

if (process.env.NODE_ENV === 'production') {
    const options: VueIntegrationOptions = {
        id: 'xxx',
        host: 'https://example.com',
        version: process.env.BH_RELEASE!, // process.env.BH_RELEASE将由 @forzoom/bh-webpack-plugin提供 
        Vue,
    };
    const vueIntegration = new Integration.Vue(options);
    vueIntegration.setup();
    BH.addIntegration(vueIntegration);
}
```

```typescript
// @/store/user.ts
import { BH } from '@forzoom/bh-integrations';

// 上报用户id
BH.setUserId(basicInfo.id);
```

### Todo

1. [x] 添加beforeSend用于过滤不需要的错误
2. [ ] 是否将report逻辑移动到BH，integration只保留setup
npm package: @forzoom/browser-progress
Description: ### Changelog
Author: Forzoom
Latest version: 0.0.3

### Roadmap

### Changelog

#### v0.0.2

1. 修正export输出

### Version

#### v0.0.2

1. 修正 export class BrowserProgress 为 export default class BrowserProgress;
2. 修复没有reactive的错误

#### v0.0.3

1. 使用render代替template，泛起vue文件格式(主要目的是放弃css-loader注入的样式)，因为css-loader目前看来在很少的设备上会出现maximum Stack Call的问题，另外因为css-loader注入被删除让文件更小
npm package: @forzoom/fake-news
Description: ### 组件
Author: Forzoom
Latest version: 0.0.10

## Usage

### 组件

#### Comments

##### Props

|参数|类型|默认值|说明|
|---|---|---|---|
|comments|Array|[]|评论内容|
|sendTime|Number|无|发送时间|

## Version

### 0.0.3(deprecated)

1. 添加commentEditor组件
2. 从.vue文件中分割样式文件

### 0.0.4

1. 修复commentEditor中的this错误

### 0.0.6

1. 添加ghLink，传入的内容将作为to传递给router-link

### 0.0.9

1. 评论内容支持表情
npm package: @forzoom/form-renderer
Description: `@forzoom/form-renderer`是表单生成的基础，通过向设置表单配置，其提供的`Renderer`组件能够将表单渲染出来。
Latest version: 0.1.4

### 使用

`@forzoom/form-renderer`是表单生成的基础，通过向设置表单配置，其提供的`Renderer`组件能够将表单渲染出来。

具体的表单中的每一项，称为一个`Section`，因为Section的种类太过丰富，所以`@forzoom/form-renderer`本身不提供任何的`Section`，而是由一些其他的库来提供，这样可以做到按需使用。

以下是几个提供`Section`的库，目前只有移动端的样式：
`@forzoom/item-form`提供了一个看上去不那么紧凑的表单组件，单页能够容纳的信息较少。
`@forzoom/compact-form`提供了样式较为紧凑的表单组件。

### 例子

下面是一个简单的例子，其中的代码基本是使用`@forzoom/form-renderer`的固定模板。

```typescript
import { FormRendererComponent, Renderer } from '@forzoom/form-renderer';
import { FormPageMeta } from '@forzoom/form-renderer/types/form';
import { ItemFormSectionMeta } from '@forzoom/item-form/types/form';
import { Toast } from 'vant';

@Component({
    name: 'Page',
    components: {
        Renderer,
    },
    template: `
        <div>
            <Renderer :meta="meta" :form.sync="form" @error="onError" />
        </div>
    `,
})
class Page extends Vue {
    public form: any = {
        avatar: null,
    };

    public get meta(): Array<FormPageMeta<ItemFormSectionMeta>> {
        const sections: ItemFormSectionMeta[] = [
            {
                type: 'ItemUploader',
                key: 'avatar',
                titleComponent: false,
                props: {
                    title: '头像',
                    httpRequest: async (image) => {
                        const rdata = await store.dispatch('upload', {
                            mediaId: image.key,
                            type: 'avatar',
                        });
                        return rdata.data;
                    },
                },
                validates: [
                    { trigger: 'validate', required: true, message: '请上传头像' },
                ],
            },
        ];
        const pages: FormPageMeta[] = [
            {
                sections,
            },
        ];
        return pages;
    }

    public onError(section: any, rule: any) {
        if (rule.message) {
            Toast(rule.message);
        }
    }

    /**
     * 点击提交
     */
    public async onClickSubmit() {
        const vm = this;
        // @ts-ignore
        const $renderer = vm.$refs.form as FormRendererComponent;

        if (!$renderer.isLastPage()) {
            $renderer.nextPage();
        } else {
            if ($renderer.validate()) {
                // 创建
                const createRdata = await store.dispatch('create', form);
            }
        }
    }
}
```

### 表单检查

### 数据操作

通过为`section`配置`encode`和`decode`参数，可以在数据传入/传出组件时对于数据进行操作。

```typescript
// @example 对从组件中传出的数据，也就是用户输入的“收货人姓名”，删除前后的空格
const trim = (value: string) => value ? value.trim() : '';
const section = {
    type: 'CompactInput',
    key: 'name',
    props: {
        placeholder: '收货人姓名',
        textAlign: 'left',
    },
    decode: trim,
    validates: [
        { required: true, message: '请输入收货人姓名' },
    ],
};
```

### 自定义组件

除了使用`@forzoom/item-form`和`@forzoom/compact-form`之外，还可以根据需要自定义`Section`。

### 问题

1. 使用SFC方式造成`Section`组件库文件过大
2. cascader的finish需要更加灵活
3. 依赖于van-popup
npm package: @forzoom/models
Description: npm i @forzoom/models
Latest version: 0.0.22

### Install

npm i @forzoom/models

---
### Description

provide commonjs/es6/umd format file.

#### SnakeCase

for example:

1. foo_bar
1. foo_1

#### CamelCase

for example:

1. fooBar
1. foo1

---
### Feature

1. support kebabCase and snakeCase access
1. support simple type checker
1. provide `inflate()` for batch set property
1. provide `registerProperty()` for add property after instance is created
1. property support `Vue` reactive data bind

---
### Example

```
import Schema from '@forzoom/models';

class MyModel extends Schema {
    constructor(data) {
        super({
            key1: {
                type: 'String?',
                default: 'value1',
            },
            key2: {
                type: 'Number',
            },
            fooBar: {
                type: 'String?',
                default: 'fooBar',
            },
        }, data);
        this._name = MyModel.name;
    }
}

const model = new MyModel();
model.key1; // value1
model.key2; // null
model.fooBar; // fooBar
model.foo_bar; // fooBar

model.foo_bar = 'foo_bar';
model.fooBar; // foo_bar
model.foo_bar; // foo_bar

// inflate()
model.inflate({
    key1: 'key1',
    key2: 1,
});

// registerProperty()
model.helloWorld; // undefined
model.registerProperty('helloWord', {
    type: 'String?',
    default: 'steve',
});
model.helloWorld; // steve
model.hello_world; // steve

// equal
const test = new MyModel();
model.equal(test) // false
```

---
### Model

`Model` is object which contain `property`'s info, such as type, default value and so on

#### example
```
{
    key1: {
        type: 'String?',
        default: 'value1',
    },
    key2: {
        type: 'Number',
    },
    fooBar: {
        type: 'String?',
        default: 'fooBar',
    },
}
```

#### type

type of property.

#### default

default value of property.

#### extra (since@0.0.9)

extra value of property.

---
### Function

#### Schema

##### inflate(obj: object): void
##### registerProperty(key: string, typeInfo: TypeInfo): void
##### getSnake(): object
##### getCamel(): object
##### equal(to: obj): boolean
##### setNullable(key: string, nullable: boolean): void

#### Schema.utils

##### arrayEqual(arr1: Array<any>, arr2: Array<any>): boolean

---
### Test

npm run test
npm package: @forzoom/mta
Description: #### clickStat(id, params): void - 参数 	- id: string 	- params: any
Author: Forzoom
Latest version: 0.0.7

### Api

#### clickStat(id, params): void
- 参数
	- id: string
	- params: any

触发clickStat

#### clickStatEqual(id, params, test, value): boolean
- 参数
	- id: string
	- params: any
	- test: any
	- value: any
- 返回值 `是否触发clickStat`

只有在test === value情况下触发

#### clickStatNotNull(id, params, test): boolean
- 参数
	- id: string
	- params: any
	- test: any
- 返回值 `是否触发clickStat`

只有在test !== null情况下触发

#### clickStatTrue(id, params, test): boolean
- 参数
	- id: string
	- params: any
	- test: any
- 返回值 `是否触发clickStat`

只有在test === true情况下触发

#### clickStatNotEqual(id, params, test, value): boolean
- 参数
	- id: string
	- params: any
	- test: any
	- value: any
- 返回值 `是否触发clickStat`

只有在test !== value情况下触发

#### factory(name)
- 返回值: `ClickStatCollection`

其中

	interface ClickStatCollection {
		clickStat(id:string, params: any): void;
		clickStatEqual(id: string, params: any, test: any, value: any): boolean;
		clickStatNotNull(id: string, params: any, test: any): boolean;
		clickStatTrue(id: string, params: any, test: any): boolean;
		clickStatNotEqual(id: string, params: any, test: any, value: any): boolean;
	}
npm package: @forzoom/questionnaire
Description: questionnaire
Author: Forzoom
Latest version: 0.0.56

1. 使用指南

允许传入的Prop
|key|type|desc|
|color|string|样式颜色，choice/mutliChoice/提交按钮的颜色都由该属性设定|

由于weui-cell_ft的颜色被设定，所以choice和multiChoice的颜色必须设定在weui-cell_ft上

normalize-weui不再对颜色进行处理

由于rem的大小问题，导致只对于经过match处理的项目有效，因为样式本身没有办法使用rem，只能使用px

### Roadmap

### Changelog

#### v0.0.33

1. 将Address修改为AddressLocation，添加AddressPicker

#### v0.0.39

1. 改为插件嵌入方式

#### v0.0.50

1. 修改Select的样式，使用原生<select>

#### v0.0.53

1. 删除DatePicker和AddressPicker，使用Placeholder组件替代
1. 点击Placeholder组件，将触发 @click(id) 事件

#### v0.0.55

1. Placeholder接收source.text作为数据显示，删除无用代码


### Version

#### v0.0.32

1. 修复uploader在已有result情况下不正确显示的问题

#### v0.0.33

1. 将Address修改为AddressLocation，添加AddressPicker

#### v0.0.34

1. 降低城市选择的精度

#### v0.0.35

1. 修复默认值的错误
1. 更新uploader版本

#### v0.0.36

1. 修复object.assign问题

#### v0.0.37

1. 修复版本错误
2. 修复uploader.updateImage可能存在的错误

#### v0.0.38

1. uploader支持source.size

#### v0.0.39

1. 改为插件嵌入方式

#### v0.0.40

1. 修复_Vue在引入文件时未定义的问题

#### v0.0.41(存在错误，在0.0.42中修复)

1. 优化choice/multipleChoice代码，体积更小
1. 优化uploader样式，添加数量提示

#### v0.0.42

1. 修复0.0.41中uploader的错误

#### v0.0.43

1. 允许使用requiredCondition
2. 优化uploader代码

#### v0.0.47

1. 添加mixins，优化segment样式

#### v0.0.49

1. 更新mobile-button版本

#### v0.0.50

1. 修改Select的样式，使用原生<select>

#### v0.0.51

1. 修改uploader的result逻辑，将string修改为array

#### v0.0.52

1. 修复uploader组件的错误

#### v0.0.53

1. 删除DatePicker和AddressPicker，使用Placeholder组件替代
1. 点击Placeholder组件，将触发 @click(id) 事件

#### v0.0.54

1. 删除了Placeholder中的result类型限制

#### v0.0.55

1. Placeholder接收source.text作为数据显示，删除无用代码

#### v0.0.56

1. 删除loading和dialog样式，添加item事件，select支持disabled
npm package: @forzoom/scroll-listener
Description: ```shell npm install @forzoom/scroll-listener ```
Latest version: 0.0.9

### Install

```shell
npm install @forzoom/scroll-listener
```

### Usage

```javascript
import Vue from 'vue';
import store from 'store/index.js'; // Vuex store instance
import ScrollListener from '@forzoom/scroll-listener';

Vue.use(ScrollListener, {
	store: store,
});
```

### Description

添加名为'scrollListener'的Vuex module

提供
addScrollCallback
cleanScrollCallbacks
两个函数

将在window上注册scroll监听，每当有scroll事件发生，将调用通过store.commit('addScrollCallback', foo);将入的foo函数

#### addScrollCallback

store.commit('addScrollCallback', foo);

#### cleanScrollCallbacks

store.commit('cleanScrollCallbacks');
npm package: @forzoom/security-text
Description: ```javascript securityText('123456', 'head:2') // **3456 securityText('123456', '!head:2') // 12**** securityText('123456', 'tail:2') // 1234** securityText('123456', '!tail:2') // ****56 securityText('123456', 'head:2|tail:2|head:3') // ***4** securityTe
Latest version: 0.0.1

### Usage

```javascript
securityText('123456', 'head:2') // **3456
securityText('123456', '!head:2') // 12****
securityText('123456', 'tail:2') // 1234**
securityText('123456', '!tail:2') // ****56
securityText('123456', 'head:2|tail:2|head:3') // ***4**
securityText('123456', '!head:2|!tail:2') // ******
```
npm package: @forzoom/swiper
Description: npm install @forzoom/swiper
Author: Forzoom
Latest version: 0.0.13

### Install

npm install @forzoom/swiper

### Usage

```javascript
import Vue from 'vue';
import Swiper from '@forzoom/swiper';

Vue.use(Swiper); // will register components 'ROSwiper' and 'ROSwiperSlide'
```

```
<template>
	<div>
		<ROSwiper>
			<ROSwiperSlide>
				...
			</ROSwiperSlide>
			<ROSwiperSlide>
				...
			</ROSwiperSlide>
		</ROSwiper>
	</div>
</template>
```

### Version

#### 0.0.4

1. 添加swiper-slide元素，export将分别导出组件
2. 使用Vue插件的形式

#### 0.0.6

1. ro-swiper-container添加overflow: hidden;

#### 0.0.7

1. ROSwiper添加loop属性，设置为false的情况下，将不会有循环效果
1. ROSwiperSlide添加slideClass属性，用于设置样式类

#### 0.0.8

1. 优化代码逻辑
1. 添加input事件，值为当前的slide的index

#### 0.0.9

1. 更新touch
1. 限制move事件中同时出现两个方向的滑动

#### 0.0.10

1. swiper-slide添加vertical-align: top

#### 0.0.11

1. 对于支持gBCR的浏览器，宽度将限制为ro-swiper-container的宽度

#### 0.0.12

1. 修复错误
npm package: @forzoom/thumbnail
Description: ```typescript import Vue from 'vue'; import Thumbnail from '@forzoom/thumbnail';
Latest version: 0.2.0

## Usage

```typescript
import Vue from 'vue';
import Thumbnail from '@forzoom/thumbnail';

const imageFilter = Thumbnail.generateImageFilter({
    bed: {
        aliyun: 'https://aliyun.example.com',
    },
    isAliyun(listener: ImageFilterListener, options: ImageFilterOptions) {
        return /aliyun.example.com/.test(listener.src);
    },
})

Vue.use(Thumbnail, {
    imageFilter,
    enterClass: 'add-blur',
    leaveClass: 'transition-blur',
});
```

```css
.add-blur {
    transition: 0.3s filter, 0.3s -webkit-filter;
    -webkit-filter: blur(4px);
    filter: blur(4px);
}
// 图片模糊第二层
.transition-blur {
    -webkit-filter: blur(0px);
    filter: blur(0px);
}
```

<hr>

### 使用data-width
```html
<img v-thumbnail="https://aliyun.example.com/test.jpg" data-width="100" />
```
生成内容(以阿里云为例)
```html
<img src="https://aliyun.example.com/test.jpg?x-oss-process=image/resize,w_100" />
```
需要配置
```typescript
const imageFilter = Thumbnail.generateImageFilter({
    isAliyun(listener: ImageFilterListener, options: ImageFilterOptions) {
        return /aliyun.exmaple.com/.test(listener.src);
    },
});
Vue.use({
    imageFilter,
});
```

<hr>

### 让thumbnail自动添加域名
```html
<img v-thumbnail="/test.jpg" />
```
生成内容
```html
<img src="https://aliyun.example.com/test.jpg" />
```
需要配置
```typescript
const imageFilter = Thumbnail.generateImageFilter({
    bed: {
        aliyun: 'https://aliyun.example.com',
        qiniu: 'https://qiniu.example.com',
        default: 'https://aliyun.example.com', // 当没有域名是将默认使用default对应的域名
    },
});
Vue.use({
    imageFilter,
});
```
选择不同的域名，使用data-bed
```html
<img v-thumbnail="/test.jpg" data-bed="qiniu" />
```
生成内容
```html
<img src="https://qiniu.example.com/test.jpg" />
```

<hr>

使用data-thumbnail-width将触发thumbnail的逻辑，将使用**data-thumbnail-width**的值替换**data-width**的值
```html
<img v-thumbnail="example.jpg" data-thumbnail-width="100" />
```

## requirement

1. 依赖于core-js@3
2. 依赖于url

## Roadmap

1. doTransform不需要由ThumbnailPluginOptions.doTransform提供
npm package: @forzoom/touch
Description: touch component
Author: Forzoom
Latest version: 0.1.2

### 示例

```
import Touch from '@forzoom/touch';
Vue.component('Touch', Touch);
```

### 功能模块

#### TouchHub

负责处理touch事件，并且判断当前应该触发何种事件

##### API

###### onTouchDown(cb)

- 功能: 注册`touch-down`事件回调
- 参数:
	- {Function} cb

###### onTouchUp(cb)

- 功能: 注册`touch-up`事件回调
- 参数:
	- {Function} cb

###### onTouchMove(cb)

- 功能: 注册`touch-move`事件回调
- 参数:
	- {Function} cb

###### onTouchSlide(cb)

- 功能: 注册`touch-slide`事件回调
- 参数:
	- {Function} cb

###### onTouchFling(cb)

- 功能: 注册`touch-fling`事件回调
- 参数:
	- {Function} cb

###### work(active)

- since: 0.0.6
- 功能: 启动或停止TouchHub
- 参数:
	- {Boolean} active

### 组件

#### Touch

Touch是vue组件

##### Props

|名称|说明|值|默认|版本|
|---|---|---|---|---|
|coordinate|主要检测轴向|'x'/'y'|'x'|since 0.0.8|

##### 事件

|名称|说明|参数|
|---|---|---|
|touch-down|点击按下|\{startPos, currentPos\}|
|touch-up|点击抬起|\{startPos, currentPos\}|
|touch-move|每次滑动|\{x, y\}|
|touch-slide|总体滑动|\{startPos, currentPos\}|
|touch-fling|总体快速滑动|\{startPos, currentPos, speed\}|

### Roadmap

1. 尝试Karma
npm package: @forzoom/tourye_jssdk
Description: TouryeApp JSBridge
Latest version: 0.0.5

### 说明

陶冶户外app所使用的jssdk，功能包括分享、支付

### App接入指南

查看[App接入指南](https://git.xorout.com/RO-Tech/tourye_jssdk/blob/master/doc/APP_INTEGRATION_GUIDE.md)

### API

1. 分享注册
    1. onMenuShareWXTimeline(res: ShareData) 微信朋友圈分享
    2. onMenuShareWXMessage(res: ShareData) 微信好友分享
    3. onMenuShareQQ(res: ShareData) QQ好友分享
    4. onMenuShareQzone(res: ShareData) QQ空间分享
    5. onMenuShareWeibo(res: ShareData) 微博分享
2. 支付调用
    1. chooseWXPay(res: WXPayData) 微信支付

### 关于回调

1. 回调函数保存在`window.ty`中
2. 回调函数在被调用后不会被清除

### 数据格式

```
interface ShareData {
    title: string; // 主标题
    desc: string; // 副标题
    imgUrl: string; // 图片链接
    link: string; // 分享链接
    success?(); // 成功回调函数
}

interface WXPayData {
    appId: string; // 应用id
    partnerId: string; // 商户id
    timestamp: number; // 时间戳
    nonceStr: string; // 随机字符串
    prepayId: string; // 预支付id
    package: string; // 固定Sign=WXPay
    signType: string; // 签名类型
    paySign: string; // 签名
    success?(res); // 成功回调函数
    cancel?(res); // 取消回到函数
    fail?(res); // 失败回调函数
}

interface CallbackResponse {
    key: string;
}
```

### Roadmap

1. 禁用启用分享设置
2. 版本控制
3. TY的定义失败(考虑单独定义)

#### 关于版本控制

web端存储一个版本，app端对于jssdk的支持是另外一个版本，
web端函数存储app端的一部分版本信息，用来控制web端请求
npm package: @forzoom/uploader
Description: uploader component
Author: Forzoom
Latest version: 0.3.0

### Install

npm install @forzoom/uploader

### Desc

提供三种组件
1. Uploader
2. WechatUploader
3. InputUploader

### Usage

```
import Vue from 'vue';
import Uploader from '@forzoom/uploader';
Vue.use(Uploader, {
	.. // 额外配置
})
```

#### WechatUploader

![Example](assets/img1.jpg)

大致上存在四种元素，分别是“容器”，“图片元素”，“添加按钮”，“图片容器”
嵌套结构为

    1. “容器”
	    2. “图片容器”
		    3. “图片元素”
		    3. 其他元素
	    2. “添加按钮”

上图中，“咖啡”图片实际上有一个“图片容器”和一个“图片元素”组成
第三个是一个“添加按钮”
点击添加按钮能够调用JSSDK中的图片上传逻辑

__根据需要，可以使用Props中的样式内容修改不同元素的样式__

##### Props

|名称|默认|说明|
|---|---|---|
|size|1|允许最大上传图片数量|
|canModify|true|是否允许修改|
|containerClass|\{\}|“容器”元素样式类|
|containerStyle|\{\}|“容器”元素样式|
|imageClass|\{\}|每个“图片元素”样式类|
|imageStyle|\{\}|每个“图片元素”样式|
|requestClass|\{\}|“添加按钮”样式类|
|requestStyle|\{\}|“添加按钮”样式|
|imageWrapClass|\{\}|“图片容器”样式类|
|imageWrapStyle|\{\}|“图片容器”样式|
|useWechatPreview|true|是否使用微信JSSDK预览|
|lazyload|false|是否使用vue-lazyload|

##### Events

|名称|参数|说明|
|---|---|---|
|load              |无       |图片上传到微信服务器开始|
|finish            |无       |图片上传到微信服务器结束|
|add               | \{ localId, serverId, \} |有图片增加|
|remove            |index (被删除图片位置)|有图片被删除|
|click             |index (被点击图片位置)|当正在显示的图片被点击|
|choose            | \{ localIds \} |图片来源|
|startRequest      |无       |request开始|
|endRequest        |无       |request结束|
|error             |错误信息  |发生错误|

###### load

图片开始上传到微信服务器，一般配置finish事件使用

```
<WechatUploader @load="onLoad">
</WechatUploader>

export default {
	methods: {
		onLoad() {
			// 展示加载动画
		},
	},
};
```

#### finish

图片上传到微信服务器结束，一般配置load事件使用

```
<WechatUploader @finish="onFinish">
</WechatUploader>

export default {
	methods: {
		onFinish() {
			// 隐藏加载动画
		},
	},
};
```

##### 函数

|名称|参数|说明|
|---|---|---|
|request|无|发起图片上传|
|removeAll|无|删除所有图片|
|setImages|无|设置默认显示的图片|
|getImages|无|获得所有图片|

##### Example

###### WechatUploader.setImages

设置uploader中默认的图片内容（注意，如果uploader被销毁的情况下，设置的内容自然也会消失）

__html__

```html
<!-- size="4": 显示多少个图片 -->
<!-- can-modify="false": 不允许修改，只允许查看 -->
<WechatUploader
	ref="uploader"
	:size="4"
	:can-modify="true">
</WechatUploader>
```

__script__

```javascript
this.$refs.uploader.setImages([
	{
		image: '...', // 可以是url或者localId
		serverId: '...', // 可以不传入
	},
]);
```

###### WechatUploader.getImages

获得uploader中当前的图片内容

```javascript
const images = this.$refs.uploader.getImages();

// 结果是
[
	{
		image: '...',
		serverId: '...',
	},
]
```

### Types

```
// 表示<Uploader>组件的interface
export interface UploaderComponent {..}
// 表示<WechatUploader>组件的interface
export interface WechatUploaderComponent {..}
// 表示<InputUploader>组件的interface
export interface InputUploaderComponent {..}
```

#### ImageInfo

图片信息

1. key: 文件在后端的标识符
1. url: 表示图片存储在网络上的地址。
1. image: 表示可以用来展示的图片内容，一般是 WechatUploader。
1. mode: 'input' | 'wechat'
1. localId: 微信jssdk中的localId
1. serverId: 微信jssdk中的serverId
1. file: 图片文件
1. objectUrl: 有file转换而成的objectUrl，单独使用一个变量是因为需要调用revoke方法进行资源释放。


### Roadmap

1. image之间添加间距
1. 更新rollup版本
1. 目前会忽略chooseImage中的cancel和error信息
1. transformLocalImageData是否没有用了
npm package: @foscia/cli
Description: Type safe, modular and intuitive API/data client for JS/TS.
Author: Paul Thébaud
Latest version: 0.12.1

<p align="center">
  <a href="https://foscia.dev">
    <img width="250" src="https://foscia.dev/img/logo.svg" alt="Foscia">
  </a>
</p>

<p align="center">
<a href="https://foscia.dev">
  Website
</a>
•
<a href="https://foscia.dev/docs/getting-started">
  Documentation
</a>
</p>

# @foscia/cli

CLI utility for [Foscia](https://foscia.dev).

## License

`@foscia/cli` is an open-sourced software licensed under the MIT license.
npm package: @foscia/core
Description: Type safe, modular and intuitive API/data client for JS/TS.
Author: Paul Thébaud
Latest version: 0.12.1

<p align="center">
  <a href="https://foscia.dev">
    <img width="250" src="https://foscia.dev/img/logo.svg" alt="Foscia">
  </a>
</p>

<p align="center">
<a href="https://foscia.dev">
  Website
</a>
•
<a href="https://foscia.dev/docs/getting-started">
  Documentation
</a>
</p>

# @foscia/core

Core features of [Foscia](https://foscia.dev): models, actions, enhancers, runners, etc.

## License

`@foscia/core` is an open-sourced software licensed under the MIT license.
npm package: @foscia/http
Description: Type safe, modular and intuitive API/data client for JS/TS.
Author: Paul Thébaud
Latest version: 0.12.1

<p align="center">
  <a href="https://foscia.dev">
    <img width="250" src="https://foscia.dev/img/logo.svg" alt="Foscia">
  </a>
</p>

<p align="center">
<a href="https://foscia.dev">
  Website
</a>
•
<a href="https://foscia.dev/docs/getting-started">
  Documentation
</a>
</p>

# @foscia/http

HTTP adapter implementation for [Foscia](https://foscia.dev) actions.

## Usage

This package provides factories to create an HTTP client action factory.

```typescript
import { makeActionFactory } from '@foscia/core';
import { makeHttpAdapter } from '@foscia/http';

export default makeActionFactory({
  ...makeHttpAdapter({
    baseURL: '/api',
  }),
});
```

## License

`@foscia/http` is an open-sourced software licensed under the MIT license.
npm package: @foscia/serialization
Description: Type safe, modular and intuitive API/data client for JS/TS.
Author: Paul Thébaud
Latest version: 0.12.1

<p align="center">
  <a href="https://foscia.dev">
    <img width="250" src="https://foscia.dev/img/logo.svg" alt="Foscia">
  </a>
</p>

<p align="center">
<a href="https://foscia.dev">
  Website
</a>
•
<a href="https://foscia.dev/docs/getting-started">
  Documentation
</a>
</p>

# @foscia/serialization

Serialization tools for [Foscia](https://foscia.dev) actions.

## License

`@foscia/serialization` is an open-sourced software licensed under the MIT license.
npm package: @foscia/shared
Description: Type safe, modular and intuitive API/data client for JS/TS.
Author: Paul Thébaud
Latest version: 0.12.1

<p align="center">
  <a href="https://foscia.dev">
    <img width="250" src="https://foscia.dev/img/logo.svg" alt="Foscia">
  </a>
</p>

<p align="center">
<a href="https://foscia.dev">
  Website
</a>
•
<a href="https://foscia.dev/docs/getting-started">
  Documentation
</a>
</p>

# @foscia/shared

Shared utilities types and functions for [Foscia](https://foscia.dev).

> :warning: You should not use this package as its API may not be stable.

## License

`@foscia/shared` is an open-sourced software licensed under the MIT license.
npm package: @foscia/test
Description: Type safe, modular and intuitive API/data client for JS/TS.
Author: Paul Thébaud
Latest version: 0.12.1

<p align="center">
  <a href="https://foscia.dev">
    <img width="250" src="https://foscia.dev/img/logo.svg" alt="Foscia">
  </a>
</p>

<p align="center">
<a href="https://foscia.dev">
  Website
</a>
•
<a href="https://foscia.dev/docs/getting-started">
  Documentation
</a>
</p>

# @foscia/test

Unit testing library to mock [Foscia](https://foscia.dev) actions.

## License

`@foscia/test` is an open-sourced software licensed under the MIT license.