open-index/open-npm huggingface dataset:
npm package: @feizheng/render-null-decorator
Description: Render null for react.
Author: afei
Latest version: 1.0.0

# render-null-decorator
> Render null for react.

## installation
```shell
npm i -S @feizheng/render-null-decorator
```

## descriptions

~~~
thanks to:
https://github.com/mbasso/react-decoration/blob/master/src/decorators/components/renderNothing.js
~~~
npm package: @feizheng/scripts-injector-webpack-plugin
Description: Scripts injector webpack plugin.
Author: feizheng
Latest version: 1.0.1

# scripts-injector-webpack-plugin
> Scripts injector webpack plugin.

## installation
```bash
npm install -D @feizheng/scripts-injector-webpack-plugin
```

## usage
```js
new ScriptsInjectorWebpackPlugin({
  replacements:[
    function(inHtml){
      return inHtml.replace('</body>','<!--YOUR CODE--></body>')
    }
  ]
})
```

## resources
+ http://www.cnblogs.com/haogj/p/5649670.html
+ http://www.cnblogs.com/haogj/p/5160821.html


## dependences
+ MUST IMPORT `html-webpack-plugin`
npm package: @feizheng/semver-webpack-plugin
Description: Semver webpack plugin
Author: afei
Latest version: 1.0.2

# semver-webpack-plugin
> Semver webpack plugin


## install:
```shell
npm install -D @feizheng/semver-webpack-plugin
```

## usage:
```js
import SemverWebpackPlugin from '@feizheng/semver-webpack-plugin';

// plugins:
plugiins:[
  new SemverWebpackPlugin({ enabled: true })
]
```

## options:
| Name     | Type     | Default                                  | Description            |
| -------- | -------- | ---------------------------------------- | ---------------------- |
| files    | Array    | ['./package.json']                       | Default files array.   |
| enabled  | Boolean  | true                                     | If enable this plugin. |
| callback | Function | semver.inc(inValue, 'prepatch','alpha'); | See `semver`           |


## development callback:
```conf
## oldVersion: 1.0.0
## newVersion: 1.0.1-alpha.0
```
```js
// semver.inc('1.0.0', 'prerelease','alpha')
function(inVersion){
  return this.inc(inVersion, 'prerelease','alpha');
}
```

## production callback:
```conf
## oldVersion: 1.0.1-alpha.30
## newVersion: 1.0.1
```
```js
// semver.valid( semver.coerce('1.0.1-alpha.30') )
function(inVersion){
  return this.valid(
    this.coerce(inVersion)
  );
}

```
npm package: @feizheng/service-decorator
Description: A decorator for inject service to your context.
Author: feizheng
Latest version: 1.0.1

# service-decorator
> A decorator for inject service to your context.

## installation
```shell
npm i -S @feizheng/service-decorator
```

## usage
```js
// ... 
module: {
  rules: [
    {
      test: /\.(js)$/,
      use: ['babel-loader'],
      include: [
        resolve(__dirname, 'test'), 
        // poinit1:
        resolve(__dirname, './index')
      ]
    }
  ]
},
resolve: {
  alias: {
    // poinit2:
    services: resolve(__dirname, 'test/services')
  }
},
plugins: [
  new HtmlWebpackPlugin(),
  new webpack.ProvidePlugin({
    // poinit3:
    service: resolve(__dirname, './index.js')
  })
]
// ... 
```

## app
```js
@service(['test1', 'test2', 'test-obj'])
class App {
  start() {
    console.log(this.$test1);
    console.log(this.$test2);
    console.log(this.$testObj);
  }
}
```
npm package: @feizheng/sso-baidu-pan
Description: Sso for baidu pan.
Author: afei
Latest version: 1.0.6

# sso-baidu-pan
> Sso for baidu pan.

## installation
```shell
npm install -S @feizheng/sso-baidu-pan
```

## usage
```js
import ssoBaiduPan from '@feizheng/sso-baidu-pan';

const cookies = await ssoBaiduPan({
  username: 'YOUR_QQ_NO',
  password: 'YOUR_PASSWORD'
});
// set cookies
// page.setCookie(...cookies)
```

## ubuntu
- https://github.com/puppeteer/puppeteer/issues/2462
npm package: @feizheng/sso-baidu-tieba
Description: Sso for baidu tieba.
Author: afei
Latest version: 1.0.0

# sso-baidu-tieba
> Sso for baidu tieba.

## installation
```shell
npm install -S @feizheng/sso-baidu-tieba
```

## usage
```js
import ssoBaiduTieBa from '@feizheng/sso-baidu-tieba';

const cookies = await ssoBaiduTieba({
  username: 'YOUR_QQ_NO',
  password: 'YOUR_PASSWORD'
});
// set cookies
// page.setCookie(...cookies)
```
npm package: @feizheng/sso-jianshu
Description: Jianshu token.
Author: afei
Latest version: 1.0.6

# sso-jianshu
> Jianshu token.

## installation
```shell
npm install -S @feizheng/sso-jianshu
```

## usage
```js
import ssoJianshu from '@feizheng/sso-jianshu';

ssoJianshu({ 
  username: 'YOUR_QQ_NO', 
  password: 'YOUR_QQ_PASS', 
  headless: false,
  stringify: true
}).then(
  (cookies) => {
    console.log(cookies);
  }
);
```

## speedup puppeteer
~~~
<!-- add to .npmrc file -->
puppeteer_download_host = https://npm.taobao.org/mirrors
~~~
npm package: @feizheng/sso-qq-fwh
Description: Sso for qq fuwu.mp.qq.com.
Author: afei
Latest version: 1.0.1

# sso-qq-fwh
> Sso for qq fuwu.mp.qq.com.

## installation
```shell
npm install -S @feizheng/sso-qq-fwh
```

## usage
```js
import ssoQQFwh from '@feizheng/sso-qq-fwh';

// code goes here
```
npm package: @feizheng/sso-qq-ptlogin2
Description: Sso for qq based on puppeteer.
Author: afei
Latest version: 1.1.2

# sso-qq-ptlogin2
> Sso for qq based on puppeteer.

[![version][version-image]][version-url]
[![license][license-image]][license-url]
[![size][size-image]][size-url]
[![download][download-image]][download-url]

## installation
```shell
npm install -S @feizheng/sso-qq-ptlogin2
```

## usage
```js
import ssoQqPtlogin2 from '@feizheng/sso-qq-ptlogin2'

// wait qq login sync:
await ssoQqPtlogin2()
```

## resources
- https://www.lfhacks.com/tech/puppeteer-new-tab
- https://www.lfhacks.com/%e5%88%86%e7%b1%bb/puppeteer/


## license
Code released under [the MIT license](./LICENSE.txt).

[version-image]: https://img.shields.io/npm/v/@feizheng/sso-qq-ptlogin2
[version-url]: https://npmjs.org/package/@feizheng/sso-qq-ptlogin2

[license-image]: https://img.shields.io/npm/l/@feizheng/sso-qq-ptlogin2
[license-url]: https://github.com/afeiship/sso-qq-ptlogin2/blob/master/LICENSE.txt

[size-image]: https://img.shields.io/bundlephobia/minzip/@feizheng/sso-qq-ptlogin2
[size-url]: https://github.com/afeiship/sso-qq-ptlogin2/blob/master/dist/sso-qq-ptlogin2.min.js

[download-image]: https://img.shields.io/npm/dm/@feizheng/sso-qq-ptlogin2
[download-url]: https://www.npmjs.com/package/@feizheng/sso-qq-ptlogin2
npm package: @feizheng/sso-toutiao
Description: Sso for toutiao.
Author: afei
Latest version: 1.0.1

# sso-toutiao
> Sso for toutiao.

## installation
```shell
npm install -S @feizheng/sso-toutiao
```

## usage
```js
import ssoToutiao from '@feizheng/sso-toutiao';

const cookies = await ssoToutiao({
  username: 'YOUR_QQ_NO',
  password: 'YOUR_PASSWORD'
});
// set cookies
// page.setCookie(...cookies)
```
npm package: @feizheng/sso-weibo-node
Description: Weibo sso based on node.
Author: afei
Latest version: 1.0.0

# sso-weibo-node
> Weibo sso based on node.

## installation
```shell
npm i @feizheng/sso-weibo-node
```

## usage
```js
import weiboSso from '@feizheng/sso-weibo-node';

weiboSso({ username: 'YOUR_USERNAME', password:'YOUR_PASSWORD' }).then(resp => {
  // GET THE SUB_COOKIE
});
```

## resources
- http://www.itboth.com/d/IV3QVb/node.js
npm package: @feizheng/sso-weiyun
Description: Sso for weiyun.
Author: afei
Latest version: 1.0.0

# sso-weiyun
> Sso for weiyun.

[![version][version-image]][version-url]
[![license][license-image]][license-url]
[![size][size-image]][size-url]
[![download][download-image]][download-url]

## installation
```shell
npm install -S @feizheng/sso-weiyun
```

## usage
```js
import ssoWeiyun from '@feizheng/sso-weiyun';

// code goes here
```

## license
Code released under [the MIT license](./LICENSE.txt).

[version-image]: https://img.shields.io/npm/v/@feizheng/sso-weiyun
[version-url]: https://npmjs.org/package/@feizheng/sso-weiyun

[license-image]: https://img.shields.io/npm/l/@feizheng/sso-weiyun
[license-url]: https://github.com/afeiship/sso-weiyun/blob/master/LICENSE.txt

[size-image]: https://img.shields.io/bundlephobia/minzip/@feizheng/sso-weiyun
[size-url]: https://github.com/afeiship/sso-weiyun/blob/master/dist/sso-weiyun.min.js

[download-image]: https://img.shields.io/npm/dm/@feizheng/sso-weiyun
[download-url]: https://www.npmjs.com/package/@feizheng/sso-weiyun
npm package: @feizheng/webkit-sass-default-props
Description: Default props for webkit toolkit.
Author: afei
Latest version: 1.0.0

# webkit-sass-default-props
> Default props for webkit toolkit.

## documentation
- https://afeiship.github.io/webkit-sass-default-props/

## installation
```shell
npm i @feizheng/webkit-sass-default-props
```

## usage
```scss
@import '~@feizheng/webkit-sass-default-props';
```

## resources
+ https://github.com/afeiship/generator-webkit-sassui
npm package: @feizheng/webkit-sass-flexbox
Description: Sass flexbox.
Author: afei
Latest version: 1.0.1

# webkit-sass-flexbox
> Sass flexbox.

## installation
```shell
npm i @feizheng/webkit-sass-flexbox
```

## update
```shell
npm update @feizheng/webkit-sass-flexbox
```

## usage
```scss
@import '~@feizheng/webkit-sass-flexbox';

// configuration
$webkit-sass-flexbox-options: (
  prefix: ""
) !default;
```

## documentation
- https://afeiship.github.io/webkit-sass-flexbox/
npm package: @feizheng/webkit-sass-flexbox-grid
Description: Webkit sass flexbox grid system.
Author: afei
Latest version: 2.1.4

# webkit-sass-flexbox-grid
> Webkit sass flexbox grid system.

[![version][version-image]][version-url]
[![license][license-image]][license-url]
[![size][size-image]][size-url]
[![download][download-image]][download-url]

## installation
```shell
# install
npm i @feizheng/webkit-sass-flexbox-grid

# update
npm update @feizheng/webkit-sass-flexbox-grid
```

## usage
```scss
@import '~@feizheng/webkit-sass-flexbox-grid';
```

## resources
- https://www.zhihu.com/question/29924791
- https://segmentfault.com/a/1190000002910324
- http://the-echoplex.net/flexyboxes/


## documentation
- https://afeiship.github.io/webkit-sass-flexbox-grid/

## license
Code released under [the MIT license](https://github.com/afeiship/webkit-sass-flexbox-grid/blob/master/LICENSE.txt).

[version-image]: https://img.shields.io/npm/v/@feizheng/webkit-sass-flexbox-grid
[version-url]: https://npmjs.org/package/@feizheng/webkit-sass-flexbox-grid

[license-image]: https://img.shields.io/npm/l/@feizheng/webkit-sass-flexbox-grid
[license-url]: https://github.com/afeiship/webkit-sass-flexbox-grid/blob/master/LICENSE.txt

[size-image]: https://img.shields.io/bundlephobia/minzip/@feizheng/webkit-sass-flexbox-grid
[size-url]: https://github.com/afeiship/webkit-sass-flexbox-grid/blob/master/dist/webkit-sass-flexbox-grid.min.js

[download-image]: https://img.shields.io/npm/dm/@feizheng/webkit-sass-flexbox-grid
[download-url]: https://www.npmjs.com/package/@feizheng/webkit-sass-flexbox-grid
npm package: @feizheng/webkit-sass-generators
Description: Webkit sass generator mixins.
Author: afei
Latest version: 2.0.0

# webkit-sass-generators
> Webkit sass generator mixins.

## installation
```shell
npm i -S @feizheng/webkit-sass-generators
```

## update
```shell
npm update @feizheng/webkit-sass-generators
```

## usage
```scss
@import "../dist/webkit-sass-generators.scss";
//test color-map
$color-map: (
  0:#000,
  3:#333,
  6:#666,
  9:#999,
  f:#fff
);
$width-list:(1,2,3,4,5,6,7,8,9);
$box-list:(1,2,3,4,5,6,7,8,9);

//Generate a list:
$data-src:generate-list(1,20);
$border-radius-list:generate-list(1,5);
$font-list:(10,20,30);
$line-clamp:(1,2,3,4,5);

@include generator-color($color-map,'.c__');
@include generator-background-color($color-map,'.bg__');
@include generator-border-color($color-map,'.bdc__');


//Generate width/blank/font-size/border-radius:
@include generator-width-w1($data-src,'.w1__');
@include generator-width-wp($width-list,'.wp__');
@include generator-blank($width-list,'.blk__');
@include generator-font-size($font-list,'.f__');
@include generator-border-radius($border-radius-list,'.bdr__');

//Generate margin:
@include generator-box($box-list,'m');
@include generator-box($box-list,'mt');
@include generator-box($box-list,'mr');
@include generator-box($box-list,'ml');
@include generator-box($box-list,'mb');
@include generator-box($box-list,'mx');
@include generator-box($box-list,'my');

@include generator-box-rem($box-list,'p', 50);
@include generator-box-rem($box-list,'pt', 50);
@include generator-box-rem($box-list,'pr', 50);
@include generator-box-rem($box-list,'pl', 50);
@include generator-box-rem($box-list,'pb', 50);
@include generator-box-rem($box-list,'px', 50);
@include generator-box-rem($box-list,'py', 50);

//Generate your own grid:
@include generator-grid(12,'.wk-row','.wk-col-');
@include generator-line($width-list,#f3f3f3,'.dc-line-');
@include generator-line-clamp($line-clamp,'.line-clamp-');


.test-ml100{
  >span{
    border: 1px solid #000;
  }
}
```

## some problem:
```sass
  /* autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
```

## resources
+ http://hugogiraudel.com/2013/08/08/advanced-sass-list-functions/
+ http://sass-lang.com/documentation/Sass/Script/Functions.html
+ https://github.com/HugoGiraudel/SassyStrings
npm package: @feizheng/webkit-sass-material
Description: webkit css material scss version.
Author: fei
Latest version: 1.1.0

# webkit-sass-material
> webkit css material

## usage:
+ import && config frame material:
```sass
//base config:
$base-font-family:'STHeiti', 'Microsoft YaHei', Helvetica, Arial, sans-serif;
$base-font-size-h1-3:14px;
$base-font-size-h4-6:12px;

//grid:
$grid-padding-width:              10px !default;
$grid-responsive-sm-break:        567px !default;  // smaller than landscape phone
$grid-responsive-md-break:        767px !default;  // smaller than portrait tablet
$grid-responsive-lg-break:        1023px !default; // smaller than landscape tablet

//initial your generators:

@import "dist/webkit-sass-material";
```
+ rem suppprt:
  + https://github.com/afeiship/resolution
  + use `to-rem` sass functions
  ```
  .f20{
    font-size:to-rem(20);
  }
  ```

## architecture:
> webkit-sass-material = (frame modules + sass ui modules)

### frame modules:
| Module name     | Module description     |
| :------------- | :------------- |
| webkit-sass-functions       | webkit-sass-functions       |
| webkit-sass-mixins       | webkit-sass-mixins       |
| webkit-sass-reset       | webkit-sass-reset       |
| webkit-sass-generators       | webkit-sass-generators       |
| webkit-sass-flex-grid       | webkit-sass-flex-grid       |


### sass modules:
| Module name     | Module description     |
| :------------- | :------------- |
| webkit-sassui-*       | webkit-sassui-*       |
npm package: @feizheng/webkit-sass-mixins
Description: Webkit sass mixins.
Author: afei
Latest version: 2.0.0

# webkit-sass-mixins
> Webkit sass mixins.

[![version][version-image]][version-url]
[![license][license-image]][license-url]
[![size][size-image]][size-url]
[![download][download-image]][download-url]

## installation
```shell
# install
npm i @feizheng/webkit-sass-mixins

# update
npm update @feizheng/webkit-sass-mixins
```

## usage
```scss
@import '~@feizheng/webkit-sass-mixins';
```

## documentation
- https://afeiship.github.io/webkit-sass-mixins/

## license
Code released under [the MIT license](https://github.com/afeiship/webkit-sass-mixins/blob/master/LICENSE.txt).

[version-image]: https://img.shields.io/npm/v/@feizheng/webkit-sass-mixins
[version-url]: https://npmjs.org/package/@feizheng/webkit-sass-mixins

[license-image]: https://img.shields.io/npm/l/@feizheng/webkit-sass-mixins
[license-url]: https://github.com/afeiship/webkit-sass-mixins/blob/master/LICENSE.txt

[size-image]: https://img.shields.io/bundlephobia/minzip/@feizheng/webkit-sass-mixins
[size-url]: https://github.com/afeiship/webkit-sass-mixins/blob/master/dist/webkit-sass-mixins.min.js

[download-image]: https://img.shields.io/npm/dm/@feizheng/webkit-sass-mixins
[download-url]: https://www.npmjs.com/package/@feizheng/webkit-sass-mixins
npm package: @feizheng/webkit-sassui-absolute-center
Description: Webkit css ui module absolute center.
Author: afei
Latest version: 1.1.0

# webkit-sassui-absolute-center
Webkit sass ui module absolute center.

## installation
```shell
npm install -S @feizheng/webkit-sassui-absolute-center
```

## demo
+ https://afeiship.github.io/webkit-sassui-absolute-center/

## usage
+ webkit-sassui-absolute-center-x
+ webkit-sassui-absolute-center-y
+ webkit-sassui-absolute-center-xy

```html
<div class="box box-x webkit-sassui-absolute-center-x">
  .box-x center;
</div>


<div class="box box-y webkit-sassui-absolute-center-y">
  .box-y center;
</div>


<div class="box box-xy webkit-sassui-absolute-center-xy">
  .box-xy center;
</div>
```
npm package: @feizheng/webkit-sassui-animate-float
Description: Float element for webkit sass ui.
Author: afei
Latest version: 1.0.1

# webkit-sassui-animate-float
> Float element for webkit sass ui.

## installation
```shell
npm i -S @feizheng/webkit-sassui-animate-float
```

## usage
+ https://afeiship.github.io/webkit-sassui-animate-float/

```scss
@import 'node_modules/webkit-sassui-animate-float/dist/webkit-sassui-animate-float.scss';
```

## resources
+ https://github.com/afeiship/generator-webkit-sassui
npm package: @feizheng/webkit-sassui-backdrop
Description: Webkit sass ui module for overlay/mask/backdrop.
Author: afei
Latest version: 1.0.2

# webkit-sassui-backdrop
> Webkit sass ui module for overlay/mask/backdrop.

[![version][version-image]][version-url]
[![license][license-image]][license-url]
[![size][size-image]][size-url]
[![download][download-image]][download-url]

## installation
```shell
# install
npm i @feizheng/webkit-sassui-backdrop

# update
npm update @feizheng/webkit-sassui-backdrop
```

## usage
```scss
// in sass file:
@import 'node_modules/webkit-sassui-backdrop/dist/index.scss';

// webkit
@import '~@feizheng/webkit-sassui-backdrop';
```

## documentation
- https://afeiship.github.io/webkit-sassui-backdrop/

## license
Code released under [the MIT license](https://github.com/afeiship/webkit-sassui-backdrop/blob/master/LICENSE.txt).

[version-image]: https://img.shields.io/npm/v/@feizheng/webkit-sassui-backdrop
[version-url]: https://npmjs.org/package/@feizheng/webkit-sassui-backdrop

[license-image]: https://img.shields.io/npm/l/@feizheng/webkit-sassui-backdrop
[license-url]: https://github.com/afeiship/webkit-sassui-backdrop/blob/master/LICENSE.txt

[size-image]: https://img.shields.io/bundlephobia/minzip/@feizheng/webkit-sassui-backdrop
[size-url]: https://github.com/afeiship/webkit-sassui-backdrop/blob/master/dist/webkit-sassui-backdrop.min.js

[download-image]: https://img.shields.io/npm/dm/@feizheng/webkit-sassui-backdrop
[download-url]: https://www.npmjs.com/package/@feizheng/webkit-sassui-backdrop
npm package: @feizheng/webkit-sassui-border-collapse
Description: Border collapse use css.
Author: afei
Latest version: 1.0.1

# webkit-sassui-border-collapse
> Border collapse use css.

## installation
```shell
npm i -S @feizheng/webkit-sassui-border-collapse
```

## usage
+ https://afeiship.github.io/webkit-sassui-border-collapse/

```scss
@import 'node_modules/webkit-sassui-border-collapse/dist/index.scss';
```

## resources
+ https://github.com/afeiship/generator-webkit-sassui
npm package: @feizheng/webkit-sassui-drawer
Description: Drawer for webkit sassui.
Author: afei
Latest version: 1.0.1

# webkit-sassui-drawer
> Drawer for webkit sassui.

[![version][version-image]][version-url]
[![license][license-image]][license-url]
[![size][size-image]][size-url]
[![download][download-image]][download-url]

## installation
```shell
# install
npm i @feizheng/webkit-sassui-drawer

# update
npm update @feizheng/webkit-sassui-drawer
```

## usage
```scss
@import '~@feizheng/webkit-sassui-drawer';
```

## documentation
- https://afeiship.github.io/webkit-sassui-drawer/

## license
Code released under [the MIT license](https://github.com/afeiship/webkit-sassui-drawer/blob/master/LICENSE.txt).

[version-image]: https://img.shields.io/npm/v/@feizheng/webkit-sassui-drawer
[version-url]: https://npmjs.org/package/@feizheng/webkit-sassui-drawer

[license-image]: https://img.shields.io/npm/l/@feizheng/webkit-sassui-drawer
[license-url]: https://github.com/afeiship/webkit-sassui-drawer/blob/master/LICENSE.txt

[size-image]: https://img.shields.io/bundlephobia/minzip/@feizheng/webkit-sassui-drawer
[size-url]: https://github.com/afeiship/webkit-sassui-drawer/blob/master/dist/webkit-sassui-drawer.min.js

[download-image]: https://img.shields.io/npm/dm/@feizheng/webkit-sassui-drawer
[download-url]: https://www.npmjs.com/package/@feizheng/webkit-sassui-drawer
npm package: @feizheng/webkit-sassui-em-justify-list
Description: Em layout justify list.
Author: afei
Latest version: 1.0.0

# webkit-sassui-em-justify-list
> Em layout justify list.

## documentation
- https://afeiship.github.io/webkit-sassui-em-justify-list/

## installation
```shell
npm i @feizheng/webkit-sassui-em-justify-list
```

## usage
```scss
@import '~@feizheng/webkit-sassui-em-justify-list';
```

## resources
+ https://github.com/afeiship/generator-webkit-sassui
npm package: @feizheng/webkit-sassui-flex-justify
Description: Flex justify items for webkit sassui.
Author: afei
Latest version: 1.0.0

# webkit-sassui-flex-justify
> Flex justify items for webkit sassui.

## documentation
- https://afeiship.github.io/webkit-sassui-flex-justify/

## installation
```shell
npm i @feizheng/webkit-sassui-flex-justify
```

## usage
```scss
@import '~@feizheng/webkit-sassui-flex-justify';
```

## resources
+ https://github.com/afeiship/generator-webkit-sassui
npm package: @feizheng/webkit-sassui-frame-wrapper
Description: Webkit sass ui module media wrapper.
Author: afei
Latest version: 1.0.1

# webkit-sassui-frame-wrapper
> Webkit sass ui module media wrapper.

## documentation
- https://afeiship.github.io/webkit-sassui-frame-wrapper/

## installation
```shell
npm i @feizheng/webkit-sassui-frame-wrapper
```

## usage
```scss
@import '~@feizheng/webkit-sassui-frame-wrapper';
```

## resources
- https://github.com/afeiship/generator-webkit-sassui
npm package: @feizheng/webkit-sassui-icon-rotate
Description: Icon rotoate.
Author: afei
Latest version: 1.0.0

# webkit-sassui-icon-rotate
> Icon rotoate.

## installation
```shell
npm i -S @feizheng/webkit-sassui-icon-rotate
```

## usage
+ https://afeiship.github.io/webkit-sassui-icon-rotate/

```scss
@import 'node_modules/webkit-sassui-icon-rotate/dist/webkit-sassui-icon-rotate.scss';
```

## resources
+ https://github.com/afeiship/generator-webkit-sassui
npm package: @feizheng/webkit-sassui-layout-fixed-header
Description: Fixed header bar for sassui.
Author: afei
Latest version: 1.0.0

# webkit-sassui-layout-fixed-header
> Fixed header bar for sassui.

## documentation
- https://afeiship.github.io/webkit-sassui-layout-fixed-header/

## installation
```shell
npm i @feizheng/webkit-sassui-layout-fixed-header
```

## usage
```scss
@import '~@feizheng/webkit-sassui-layout-fixed-header';
```

## resources
- https://github.com/afeiship/generator-webkit-sassui
npm package: @feizheng/webkit-sassui-modal
Description: Sass for modal.
Author: afei
Latest version: 1.0.0

# webkit-sassui-modal
> Sass for modal.

[![version][version-image]][version-url]
[![license][license-image]][license-url]
[![size][size-image]][size-url]
[![download][download-image]][download-url]

## installation
```shell
# install
npm i @feizheng/webkit-sassui-modal

# update
npm update @feizheng/webkit-sassui-modal
```

## usage
```scss
@import '~@feizheng/webkit-sassui-modal';
```

## documentation
- https://afeiship.github.io/webkit-sassui-modal/

## license
Code released under [the MIT license](https://github.com/afeiship/webkit-sassui-modal/blob/master/LICENSE.txt).

[version-image]: https://img.shields.io/npm/v/@feizheng/webkit-sassui-modal
[version-url]: https://npmjs.org/package/@feizheng/webkit-sassui-modal

[license-image]: https://img.shields.io/npm/l/@feizheng/webkit-sassui-modal
[license-url]: https://github.com/afeiship/webkit-sassui-modal/blob/master/LICENSE.txt

[size-image]: https://img.shields.io/bundlephobia/minzip/@feizheng/webkit-sassui-modal
[size-url]: https://github.com/afeiship/webkit-sassui-modal/blob/master/dist/webkit-sassui-modal.min.js

[download-image]: https://img.shields.io/npm/dm/@feizheng/webkit-sassui-modal
[download-url]: https://www.npmjs.com/package/@feizheng/webkit-sassui-modal
npm package: @feizheng/webkit-sassui-moveup
Description: Move up with animate.
Author: afei
Latest version: 1.0.0

# webkit-sassui-moveup
> Move up with animate.

## installation
```shell
npm i -S @feizheng/webkit-sassui-moveup
```

## usage
- https://afeiship.github.io/webkit-sassui-moveup/

```scss
@import '~@feizheng/webkit-sassui-moveup';
```

## resources
- https://jr.jd.com/
npm package: @feizheng/webkit-sassui-scaleable-image
Description: Scaleble image.
Author: afei
Latest version: 1.0.0

# webkit-sassui-scaleable-image
> Scaleble image.

## installation
```shell
npm i -S @feizheng/webkit-sassui-scaleable-image
```

## usage
+ https://afeiship.github.io/webkit-sassui-scaleable-image/

```scss
@import 'node_modules/webkit-sassui-scaleable-image/dist/webkit-sassui-scaleable-image.scss';
```

## resources
+ https://github.com/afeiship/generator-webkit-sassui
npm package: @feizheng/webkit-sassui-short-name
Description: webkit-sassui-short-name
Author: afei
Latest version: 1.2.2

# webkit-sassui-short-name
> Webkit sass ui short name.

## installation
```shell
npm install -S @feizheng/webkit-sassui-short-name
```

## update
```shell
npm update @feizheng/webkit-sassui-short-name
```

## usage
```scss
@import "~@feizheng/webkit-sassui-short-name";

// or
@import "~@feizheng/webkit-sassui-short-name/dist/index.scss";
```
npm package: @feizheng/webkit-sassui-text-justify
Description: Text align justify for webkit sassui.
Author: afei
Latest version: 1.0.0

# webkit-sassui-text-justify
> Text align justify for webkit sassui.

## installation
```shell
npm i -S @feizheng/webkit-sassui-text-justify
```

## usage
+ https://afeiship.github.io/webkit-sassui-text-justify/

## resources
+ https://github.com/afeiship/generator-webkit-sassui
+ https://kristinlbradley.wordpress.com/2011/09/15/cross-browser-css-justified-block-list/
npm package: @feizheng/webkit-sassui-toast
Description: Toast sass style.
Author: afei
Latest version: 1.0.0

# webkit-sassui-toast
> Toast sass style.

## documentation
- https://afeiship.github.io/webkit-sassui-toast/


## installation
```shell
npm i @feizheng/webkit-sassui-toast
```

## usage
```scss
@import '~@feizheng/webkit-sassui-toast';
```

## resources
+ https://github.com/afeiship/generator-webkit-sassui
npm package: @feizheng/webkit-sassui-transform-center
Description: Webkit sass ui module transform center.
Author: afei
Latest version: 2.0.0

# webkit-sassui-transform-center
> Webkit sass ui module transform center.

[![version][version-image]][version-url]
[![license][license-image]][license-url]
[![size][size-image]][size-url]
[![download][download-image]][download-url]

## installation
```shell
# install
npm i @feizheng/webkit-sassui-transform-center

# update
npm update @feizheng/webkit-sassui-transform-center
```

## usage
```scss
@import '~@feizheng/webkit-sassui-transform-center';
```

## documentation
- https://afeiship.github.io/webkit-sassui-transform-center/

## license
Code released under [the MIT license](https://github.com/afeiship/webkit-sassui-transform-center/blob/master/LICENSE.txt).

[version-image]: https://img.shields.io/npm/v/@feizheng/webkit-sassui-transform-center
[version-url]: https://npmjs.org/package/@feizheng/webkit-sassui-transform-center

[license-image]: https://img.shields.io/npm/l/@feizheng/webkit-sassui-transform-center
[license-url]: https://github.com/afeiship/webkit-sassui-transform-center/blob/master/LICENSE.txt

[size-image]: https://img.shields.io/bundlephobia/minzip/@feizheng/webkit-sassui-transform-center
[size-url]: https://github.com/afeiship/webkit-sassui-transform-center/blob/master/dist/webkit-sassui-transform-center.min.js

[download-image]: https://img.shields.io/npm/dm/@feizheng/webkit-sassui-transform-center
[download-url]: https://www.npmjs.com/package/@feizheng/webkit-sassui-transform-center
npm package: @feizheng/webpack-app-kits
Description: Webpack application kits
Author: afei
Latest version: 3.4.0

# webpack-app-kits
> Webpack application kits.

## installation
```shell
npm install @feizheng/webpack-app-kits
```

## update
```shell
npm update @feizheng/webpack-app-kits
```

## basic react project
```js
plugins.provide({
  IfElse: ['react-if-else', 'default'],
  RCM: ['react-condition-manager', 'default'],
  cx: 'classnames'
})
```

## docs
- https://afeiship.github.io/webpack-app-kits/
- https://juejin.im/post/5e53dbbc518825494905c45f

## todos:
- [x] env: development/test/production
- [x] sw, finish docs
npm package: @feizheng/webpack-mpa-entries
Description: Multiple page entries app for webpack.
Author: afei
Latest version: 1.0.2

# webpack-mpa-entries
> Multiple page entries app for webpack.


## installation
```shell
npm i -D @feizheng/webpack-mpa-entries
```

## usage

```js
var mpaEntries = require('../../index');
var glob = require('glob');;
var entries = mpaEntries("src/modules/**/index.js");

// result:
 { 'blank-module': 'src/modules/blank-module/index.js',
  'my-module/buyer': 'src/modules/my-module/buyer/index.js',
  'my-module': 'src/modules/my-module/index.js',
  'my-module/seller': 'src/modules/my-module/seller/index.js',
  'test-module': 'src/modules/test-module/index.js' }

```
npm package: @feizheng/yeoman-generator-helper
Description: Yeoman generator helper.
Author: afei
Latest version: 1.0.13

# yeoman-generator-helper
> Yeoman generator helper.

## installation
```shell
npm i @feizheng/yeoman-generator-helper
```

## apis
| api          | params                 | description |
| ------------ | ---------------------- | ----------- |
| discoverRoot | -                      | -           |
| shortName    | (name)                 | -           |
| extendProps  | (context)              | -           |
| underToDot   | (context)              | -           |
| rewriteProps | (props,{ exclude:[] }) | -           |
| renameBy     | (context, callback)    | -           |
| rename       | (context, src,dest)    | -           |

## gulp-rename
- https://github.com/yeoman/yo/issues/577
- https://github.com/yeoman/yeoman/issues/1676

~~~
This seems to be caused by recent changes in **gulp-rename** (current version 1.2.3). 
Older versions work just fine. 
In my case i had to pin gulp-rename to 1.2.2 to fix my generators.
~~~
npm package: @feizk/cache
Description: Type-safe, multi-backend caching library for Node.js
Author: feizk
Latest version: 1.2.3

# @feizk/cache

[![npm version](https://img.shields.io/npm/v/@feizk/cache.svg)](https://www.npmjs.com/package/@feizk/cache)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![TypeScript](https://img.shields.io/badge/TypeScript-5.0+-blue.svg)](https://www.typescriptlang.org/)

> **Type-safe, multi-backend caching library for Node.js**  
> Supports Memory (LRU) and Redis backends with full generic types, TTL, metrics, and more.

## ✨ Features

- 🔒 **Fully typed** – Generic `Cache<T>` with no `any`
- ⚡ **Multiple backends** – Memory (LRU) & Redis out of the box
- ⏱️ **TTL support** – Per-key or default expiration
- 📊 **Metrics** – Hit/miss rates, operation durations
- 🔄 **Bulk ops** – `getMany`, `setMany`, `deleteMany`
- 🎯 **Cache-aside** – `getOrFetch` for lazy loading
- 🏷️ **Namespaces** – Key prefixing for multi-tenant apps
- 🧠 **Smart serialization** – Handles Date, Map, Set, Buffer, RegExp automatically

## 📦 Installation

```bash
pnpm add @feizk/cache
# or
npm install @feizk/cache
```

## 🚀 Quick Start

### Memory Backend (LRU)

```typescript
import { Cache, MemoryBackend } from '@feizk/cache';

const cache = new Cache<string>({
  backend: new MemoryBackend({ maxEntries: 1000 }),
  defaultTtl: 5 * 60 * 1000, // 5 minutes
});

await cache.set('key', 'hello');
const value = await cache.get('key'); // 'hello' | null
```

### Redis Backend

```typescript
import { Cache, RedisBackend } from '@feizk/cache';

const cache = new Cache<{ id: number; name: string }>({
  backend: new RedisBackend({ url: 'redis://localhost:6379' }),
  namespace: 'myapp',
  defaultTtl: 10 * 60 * 1000, // 10 minutes
});

const user = await cache.getOrFetch(
  `user:${id}`,
  async () => await db.users.findById(id),
);
```

## 📚 Documentation

For detailed API reference, backend configuration, serialization, metrics, FAQ, and troubleshooting, check the **[docs/](docs/)** directory:

- **[Getting Started](docs/getting-started.md)** – Installation and basic usage
- **[API Reference](docs/api-reference.md)** – All classes, methods, and options
- **[Backends](docs/backends.md)** – Memory vs Redis, when to use which
- **[Serialization](docs/serialization.md)** – How types are preserved
- **[Metrics](docs/metrics.md)** – Monitoring cache performance
- **[FAQ](docs/faq.md)** – Frequently asked questions
- **[Troubleshooting](docs/troubleshooting.md)** – Common issues and solutions

## 🤝 Contributing

Found a bug or have a suggestion? Please open an issue on [GitHub](https://github.com/feizk/vel).

## 📄 License

MIT © [feizk](https://github.com/feizk)
npm package: @feizk/kit
Description: Specialized in-memory collection utilities for high-performance caching
Author: feizk
Latest version: 1.0.2

# @feizk/kit

Utility primitives optimized for cache-heavy workloads.

## Documentation

- [Docs index](./docs/index.md)
- [Getting Started](./docs/getting-started.md)
- [API Reference](./docs/api-reference.md)
- [Design Notes](./docs/design-notes.md)
npm package: @feizk/logger-discord
Description: Discord transport plugin for @feizk/logger
Author: feizk
Latest version: 3.0.1

# @feizk/logger-discord 🎯

> 🚀 Send logs to Discord with powerful features

Discord transport plugin for [@feizk/logger](https://www.npmjs.com/package/@feizk/logger).

---

## 📦 Installation

```bash
npm install @feizk/logger @feizk/logger-discord
```

---

## 🚀 Quick Start

```typescript
import { Logger } from '@feizk/logger';
import { DiscordTransport } from '@feizk/logger-discord';

const logger = new Logger();

logger.addTransport(
  new DiscordTransport({
    webhookURL: 'https://discord.com/api/webhooks/YOUR_WEBHOOK_ID/YOUR_TOKEN',
  }),
);

logger.info('Hello Discord! 🎉');
logger.error('Something went wrong!', { errorCode: 500 });
```

---

## 📚 Documentation

For comprehensive documentation, check out the **[docs/](./docs/)** folder:

- **[Getting Started Guide](./docs/getting-started.md)** - Detailed setup and basic usage
- **[Configuration Options](./docs/configuration.md)** - All available options explained
- **[Advanced Features](./docs/advanced-features.md)** - Circuit breaker, persistent queue, and more
- **[API Reference](./docs/api-reference.md)** - Complete API documentation

---

## ✨ Features

- ✅ **Batching** - Reduce API calls by up to 90%
- ✅ **Compression** - Handle large context objects
- ✅ **Circuit Breaker** - Prevent cascade failures
- ✅ **Persistent Queue** - Never lose logs with disk persistence
- ✅ **Custom Formatting** - Full control over message appearance
- ✅ **TypeScript** - Fully typed with exported types
- ✅ **Priority Queueing** - Critical logs processed first

---

## 🎨 Default Colors

| Level   | Color     | Hex        |
| ------- | --------- | ---------- |
| `trace` | ⚪ Gray   | `0x95a5a6` |
| `debug` | 🔵 Blue   | `0x3498db` |
| `info`  | 🟢 Green  | `0x2ecc71` |
| `warn`  | 🟡 Yellow | `0xf1c40f` |
| `error` | 🔴 Red    | `0xe74c3c` |
| `fatal` | 🟣 Purple | `0x8e44ad` |

---

## 📝 License

MIT © [feizk](https://github.com/feizk)
npm package: @fejs/route-utils
Description: ## Usage
Latest version: 1.0.1

# @fejs/route-utils

## Usage

```bash
# npm
npm i @fejs/route-utils --save

## yarn
yarn add @fejs/route-utils
```

## API

```tsx
import {
  transformRoute,
  getMatchMenu,
  getMatchMenu,
} from ' @fejs/route-utils';

const routes = [
  {
    path: '/welcome',
    name: 'welcome',
  },
  {
    path: '/admin',
    name: 'admin',
    access: 'canAdmin',
  },
  {
    name: 'list.table-list',
    path: '/list',
  },
];

const { menuData, breadcrumb } = transformRoute(routes);

console.log(menuData[0].name); // welcome

console.log(breadcrumb.get('/welcome').name); // welcome
```

### MenuDataItem

```tsx
import { MenuDataItem } from '@fejs/route-utils';

export interface MenuDataItem {
  children?: MenuDataItem[];
  hideChildrenInMenu?: boolean;
  hideInMenu?: boolean;
  icon?: React.ReactNode;
  locale?: string | false;
  name?: string;
  key?: string;
  parentKeys?: string[];
  path?: string;
  [key: string]: any;
}
```

## LICENSE

MIT
npm package: @fekit/cookie
Description: 一个“TOAST”插件，可扩展各种主题样式，目前已有三款主题可用，欢迎使用或开发更多主题。
Author: xiaojunbo
Latest version: 2.2.2

# MC-RATIO

一个“TOAST”插件，可扩展各种主题样式，目前已有三款主题可用，欢迎使用或开发更多主题。

## 索引

- [演示](#演示)
- [安装](#安装)
- [参数](#参数)
- [示例](#示例)
- [版本](#版本)

## 演示

[https://fekit.cn/plugins/mc-toast/](https://fekit.cn/plugins/mc-toast/)

## 安装

```
npm i @fekit/mc-toast
```

## 参数

```
    {
        time  : 3000,                       //  {数字}选填，显示时间,默认为2000
        icon  : type,                       //  {字符}选填，状态类型并显示状态图片有成功success,失败error,警告warning,网络network,加载中loading五种
        text  : '提示文案',                  //  {字符}必填，提示文案 *
        theme : theme,                      //  {字符}必填，主题
        on  : {                             //  {函数}选填，显示和消失时的回调传参中的status可以判断是显示或是消失，code可以对显示出的代码进一步操作.
            show() {
                console.log('出来了〜');
            },
            hide() {
                console.log('消失了〜');
            }
        }
    }

```

## 示例

```javascript
import McToast from './mc-toast';

let toast = new McToast({
  theme: 'ac', // 在这里设置的只是这个实例公共的，在使用时仍然可以在show函数的入参中设置并覆盖掉这里的公共设置
  time: 3000
});

let oBtn2 = document.getElementById('btn2');
oBtn2.onclick = function () {
  // 显示提示消息
  toast.show({
    icon: 'success',
    text: '一第操作成功的提示消息',
    on: {
      show() {
        console.log('提示消息出来了〜');
      },
      hide() {
        console.log('提示消息消失了〜');
      }
    }
  });
};

// 如果实例公共属性中或show中传入了time则无需手动调用hide方法。但是有时候不能设置时间自动关闭，则不要入参time或time为空，这时我们就需要在合适的时机隐藏它。方法如下：
toast.show({
  time: '',
  icon: 'loading',
  text: '等我请求了一个接口并获得数据后再关闭我吧！'
});
// 手动关闭它
toast.hide({
  on: {
    hide() {
      console.log('提示消息消失了〜');
    }
  }
});
```

## 版本
```
 2.2.0 [Latest version]
 添加入参选项 clickClose 为 true 时点击也可关闭
```

```
2.1.4 
1､ 使用 TS 重构
```

```
v2.0.1
1. 使用UMD方式。
```

```
v2.0.0
1. 重构成构造函数，可以new多个实例并设置为不同的主题同时使用。
2. 优化了新提示冲掉上一条提示时的性能与稳定性问题并让冲掉过程动画更平滑
3. 新增了一款主题mc-toast-ac
4. 文字内容入参名称msg改为text
5. 修复了一个当icon未设置时仍然生成了icon图标占位的小BUG
```

```
v1.0.3
1. 废除回调函数then的用法并新增了on事件群。on里面有show及hide回调
```

```
v1.0.2
1. 此版本除了模块化使用本插件，还将方法挂载在了window下的fekit对象下，除了模块化引用还可以直接用fekit.mcToast方法。
```

```
v1.0.1
1. 此版本精简了代码，取消了onshow和onhide，回调合并为一个then，可以通赤then回调的传参来判断是显示还是消失及其它一些操作。
```
npm package: @fekit/fixed
Description: 指定元素滚动到窗口指定位置时固定在指定位置。
Author: xiaojunbo
Latest version: 2.1.0

## @fekit/fixed

指定元素滚动到窗口指定位置时固定在指定位置。

#### 索引

- [演示](#演示)
- [参数](#参数)
- [示例](#示例)
- [版本](#版本)
- [反馈](#反馈)

#### 演示

[https://plugins.fekit.cn/@fekit/fixed/](https://plugins.fekit.cn/@fekit/fixed/)

#### 开始

下载项目:

```
npm i @fekit/fixed
```

#### 参数

```$xslt
  @param  param              {Object}    * 入参
  @param  param.el           {Element}   * 需要监听的DOM节点
  @param  param.area         {Element}     作用范围区域 (选填，默认为body)
  @param  param.wrap         {Element}     动态参考元素 (选填，如不填写则为其父元素)
  @param  param.top          {String}      偏移量值 (选填，默认为0)
  @param  param.fixedStyle   {String}      固定时的样式
  @param  param.fixedClass   {String}      固定时的CLASS
  @param  param.autoStyle    {Boolean}     自是开启动动样式
  @param  param.on           {Object}      回调集
  @param  param.fixed        {Function}    固定时
  @param  param.reduced      {Function}    还原时
```

#### 示例

前置条件

```html
// 使用此插件，必须在需要固定的元素外面包一层容器，且此容器尺寸与位置必须和固定元素一样大小或不设置任何尺寸与位置属性。
<div>
  <div id="el"></div>
</div>
```

```javascript
// 楼层埋点插件
import McFixed from '@fekit/fixed';

// 新建一个在ID为f3的区域范围内滚动到顶部60px时固定的实例。
new McFixed({
  el: document.getElementById('f3_tab'),
  area: document.getElementById('f3'),
  zIndex: 999,
  top: 60,
});

// 设置一个不设定作用范围的实例,默认为整个body区域，顶部为0时固定的实例，并且设置层级为1001,固定时触发一个回调。
new McFixed({
  el: document.getElementById('f1_tab'),
  fixedClass: 'f1_fixed', // 在这个设置的class下写固定后的样式
  on: {
    fixed() {
      console.log(_this);
    },
  },
});
```

#### 版本

```$xslt
v2.0.0 [Latest version]
1. TS重构
```

```$xslt
v1.1.2
1. 优化插件对外部使用环境的容错能力
```

```$xslt
v1.1.0
1. 优化当导航尺寸发生变化时的自适应功能
```

```$xslt
v1.0.8
1. 优化当窗口发生变化时的自适应功能
```

```$xslt
v1.0.7
1. 优化当窗口发生变化时的自适应功能
```

```$xslt
v1.0.6
1. 还是那个className的bug
```

```$xslt
v1.0.5
1. 修复一个处理className的bug
```

```$xslt
v1.0.4
1. 原fixedCss入参属性名改为fixedStyle。用法未变。
2. 新增一个fixedClass入参，当固定时设置一个class，这个class可以预先写好固定时的样式。当设有fixedClass时fixedStyle仅设置top，其它样式需要在class中写样式。
3. 固定或还原状态切换时仅触发一次事件。原来是只要滚动就不停的触发固定或还原事件。
```

```$xslt
v1.0.3
1. 非核心优化
```

```$xslt
v1.0.2
1. 非核心优化
```

```$xslt
v1.0.1
1. 修复安卓兼容性问题
2. 优化指定区域内显示的元素在区域滚动到底部时元素跟随区域底部渐渐滚出可视区外。
```

```$xslt
v1.0.0
1. 此版本完成了核心功能。
```

#### 反馈

```$xslt
如果您在使用中遇到问题，请通过以下方式联系我。
QQ: 860065202
EMAIL: xiaojunbo@126.com
```
npm package: @fekit/idcard
Description: 中国身份证号详细信息获取
Author: liliguo
Latest version: 1.0.2

# @fekit/idcard

中国身份证号合法性校验,获取身份证详细信息(含一代及二代身份证)

## 安装

```
yarn add @fekit/idcard
```

或

```
npm i @fekit/idcard
```

## 引入

```typescript
import idcard from '@fekit/idcard';
```

## 使用

```typescript
const info: any = idcard(id) || {};
```

## 返回的数据结构

```typescript
// 身份证合法返回的数据结构
{
    "gender": "女", //性别
    "birthday": "1967-1-11", // 出生日期
    "province": {  //省
        "code": "410000",
        "text": "河南省"
    },
    "city": {  // 市
        "code": "410400",
        "text": "平顶山市"
    },
    "area": { // 区县
        "code": "410421",
        "text": "宝丰县"
    },
    "adreass": "河南省平顶山市宝丰县", // 籍贯
    "cardText": "大陆",
    "age": 33,  // 年龄
    "zodiac": "鼠",  // 生肖
    "constellation": "射手座"  // 星座
}

// 身份证非法时返回的数据结构
false // 校验失败直接返回false
```

## 版本

```
1.0.0
校验身份证号合法性,并返回具体信息
```
npm package: @fekit/itable
Description: 这个插件可以让有滚动条的表格固定指定的某几列。 This plug-in can fix certain specified columns in a table with scroll bars.
Author: xiaojunbo
Latest version: 1.1.6

# @fekit/itable

这个插件可以让有滚动条的表格固定指定的某几列。
This plug-in can fix certain specified columns in a table with scroll bars.

## Catalog

- [Demos](#Demos)
- [Install](#Install)
- [Example](#Example)
- [Themes](#Themes)
- [Version](#Version)

## Demos

![demo image](https://plugins.fekit.cn/@fekit/itable/demo.gif)

[https://stackblitz.com/edit/vitejs-vite-st9mgs?file=src%2FApp.vue](https://stackblitz.com/edit/vitejs-vite-st9mgs?file=src%2FApp.vue)

## Install

```
npm i @fekit/itable
```

or

```
yarn add @fekit/itable
```

## Example

```html
<div>
  <table id="aaa">
    <thead>
      <tr>
        <th col-fixed="1">a (固定列 fixed column)</th>
        <th>b</th>
        <th>c</th>
        <th>d</th>
        <th>e</th>
        <th>f</th>
        <th col-fixed="1" col-fixed-side="r">g (固定列在右侧 fixed column on the right)</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="nowrap" col-fixed="1">1 (固定列 fixed column)</td>
        <td class="nowrap">2</td>
        <td class="nowrap">3</td>
        <td class="nowrap">4</td>
        <td class="nowrap">5</td>
        <td class="nowrap">6</td>
        <td class="nowrap" col-fixed="1" col-fixed-side="r">7 (固定列在右侧 fixed column on the right)</td>
      </tr>
    </tbody>
  </table>
</div>
```

```js
import ITable, { itable } from '@fekit/itable';

// 创建实例 (create instance)
const mytable = new ITable();
// 监听 (listen)
mytable.listen(document.getElementById('aaa'));
// 清除 (remove)
mytable.remove();

// 或直接使用建创好的实例itable (Or directly use the created instance itable)
// 监听 (listen)
itable.listen(document.getElementById('aaa'));
// 清除 (remove)
itable.remove();
```
npm package: @fekit/lazyload
Description: 页面滚动时监听指定图片到指定位置时等懒加载，配合 @fekit/inview 可以实现超棒的用户体验!
Author: xiaojunbo
Latest version: 1.5.6

# @fekit/lazyload

页面滚动时监听指定图片到指定位置时等懒加载，配合 @fekit/inview 可以实现超棒的用户体验!

## Catalog

- [Demos](#Demos)
- [Install](#Install)
- [Example](#Example)
- [Version](#Version)

## Demos

![Demo](https://plugins.fekit.cn/@fekit/lazyload/demo.gif)

[https://plugins.fekit.cn/@fekit/lazyload/#/demo](https://plugins.fekit.cn/@fekit/lazyload/#/demo)

## Install

```
npm i @fekit/lazyload
```

or

```
yarn add @fekit/lazyload
```

## Example

```vue
<template>
  <div class="scroll flex-block nt-ms nx-sl" mcui-scroll=":y" ref="demoRef" style="overflow-y: scroll">
    <div class="virtual-home-footer">
      <ul mcui-cards="@a" mcui-row="space mob-24 pad-12 dpc-8">
        <li v-for="(item, idx) in list" :key="idx">
          <div>
            <div mcui-cover="" class="pr">
              <div class="full n-ms b-solid b-line b-xs bg-weak">
                <img class="full lazyload" v-if="item.type === 'img'" src="" :data-src="item.path + '&id' + idx" />
                <iframe class="full lazyload" v-if="item.type === 'web'" src="" :data-src="item.path" frameborder="0"></iframe>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import LazyLoad from '@/npm/src';
import { nextTick } from 'vue';
const list = [
  {
    type: 'img',
    path: 'https://ai.fekit.cn/gan/image?s=512',
  },
  {
    type: 'img',
    path: 'https://ai.fekit.cn/gan/image?s=512',
  },
  {
    type: 'img',
    path: 'https://ai.fekit.cn/gan/image?s=512',
  },
  {
    type: 'img',
    path: 'https://ai.fekit.cn/gan/image?s=512',
  },
  {
    type: 'img',
    path: 'https://ai.fekit.cn/gan/image?s=512',
  },
  {
    type: 'img',
    path: 'https://ai.fekit.cn/gan/image?s=512',
  },
  {
    type: 'img',
    path: 'https://ai.fekit.cn/gan/image?s=512',
  },
  {
    type: 'img',
    path: 'https://ai.fekit.cn/gan/image?s=512',
  },
  {
    type: 'img',
    path: 'https://ai.fekit.cn/gan/image?s=512',
  },
  {
    type: 'img',
    path: 'https://ai.fekit.cn/gan/image?s=512',
  },
  {
    type: 'img',
    path: 'https://ai.fekit.cn/gan/image?s=512',
  },
  {
    type: 'img',
    path: 'https://ai.fekit.cn/gan/image?s=512',
  },
  {
    type: 'img',
    path: 'https://ai.fekit.cn/gan/image?s=512',
  },
  {
    type: 'img',
    path: 'https://ai.fekit.cn/gan/image?s=512',
  },
  {
    type: 'img',
    path: 'https://ai.fekit.cn/gan/image?s=512',
  },
  {
    type: 'web',
    path: 'https://baidu.com',
  },
  {
    type: 'web',
    path: 'https://taobao.com',
  },
];

const ex: any = ref(null);

onMounted(() => {
  nextTick(() => {
    ex.value = new LazyLoad({ el: '.lazyload', area: '.scroll' });
  });
});
</script>
```

## Version

```
v1.3.3
整理文档

v1.1.0
实现了核心功能
```
npm package: @fekit/mc-ajax
Description: javascript ajax
Author: xiaojunbo
Latest version: 1.0.0

# MC-INVIEW
```$xslt
页面滚动时监听指定元素滚动到可视区域时播放动画
```

#### 索引
* [演示](#演示)
* [参数](#参数)
* [示例](#示例)
* [版本](#版本)
* [反馈](#反馈)


#### 演示
[http://www.junbo.name/plugins/mc-inview](http://www.junbo.name/plugins/mc-inview)


#### 开始

下载项目: 

```npm
npm i @fekit/mc-inview
```

#### 参数
```$xslt
el      {String}   选择器
theme   {String}   插件配套的动画主题
offset  {Number}   元素触发动画时的偏移量 0-1
once    {Number}   是否仅播放一次动画
on:{
    view  {Function}  显示时触发
    none  {Function}  隐去时触发
}
```

#### 示例

```javascript
import McInview from '@fekit/mc-inview';

// 楼层埋点
new McInview({
  el: '.floor',
  on: {
    view(dom) {
      console.log(dom, '这个元素滚动到可视区了');
    }
  }
});
```

#### 版本

```$xslt
v1.0.6 
1. 新增3款主题
2. 修改HTML可自定义主题
```

```$xslt
v1.0.3 
1. 新增一款主题mc-inview@theme=ac.scss
```

```$xslt
v1.0.2 
1. 重构核心代码，优化性能
```
```$xslt
v1.0.1
1. 此版本精简了代码，取消了onshow和onhide，回调合并为一个then，可以通赤then回调的传参来判断是显示还是消失及其它一些操作。
```

#### 反馈
```$xslt
如果您在使用中遇到问题，请通过以下方式联系我。
QQ: 860065202
EMAIL: xiaojunbo@126.com
```