open-index/open-npm huggingface dataset:
npm package: @lxjwlt/vue-flex
Description: vue components of flexbox fixing cross-browser bugs
Author: lxjwlt
Latest version: 0.0.1

# vue-flex

`vue-flex` is a vue component which provide `flexbox` features, automatically fix cross-browser bugs mentioned in [Flexbugs](https://github.com/philipwalton/flexbugs), and works in **IE10+** and modern browser.

here is [example page](https://lxjwlt.github.io/vue-flex)

## Installation

```
npm install @lxjwlt/vue-flex -D
```

Install `vue-flex` on Vue:

```javascript
Vue.use(require('@lxjwlt/vue-flex'));
```

## Usage

`vue-flex` provides `<flex>` and `<flex-item>` components, and their props is same as css properties of `flexbox`:

```html
<flex flex-direction="row">
    <flex-item flex="1">...</flex-item>
</flex>
```

The props of `<flex>` component: `flex-direction`, `flex-wrap`, `justify-content`, `align-items`, `align-content`.

The props of `<flex-item>` component: `flex`, `order`, `align-self`.
npm package: @lxjx/click-effect
Description: material ripple windows click effect
Latest version: 1.0.1


## Introduce
md + windows 点击风格的实现。所有事件代理于document，支持动态创建的元素，可随意与mvvm库搭配使用。兼容手机和pc。

Md + windows Click implementation of the style. All events are delegated to the document, supporting dynamically created elements, and can be used with the mvvm library at will. Compatible with mobile phones and PCs.



## demo

[![Edit bk-click-effect (forked)](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/bk-click-effect-forked-r3k42?fontsize=14&hidenavigation=1&theme=dark)



<br>

## Install

```
yarn add @lxjx/click-effect
// or 
npm install @lxjx/click-effect

// browser
src="./dist/index.umd.min.js"
```



<br>

## Example

```jsx

import ClickEffect from "@lxjx/fr-click-effect";

new ClickEffect({
  /* default match className ↓ */
  // effect: "m78-effect",	// primary className
  // disabled: "__disabled",	
  // disabledwinStyle: "__md",	// disabled windows style effect
  // disabledMdStyle: "__win"	// disabled material style effect
});

// tpl
<div>
    <div className="box m78-effect">base</div>
    <div className="box m78-effect __light" style={{ background: '#1890ff' }}>base</div>
    <div className="box m78-effect __light" style={{ background: '#f5222d' }}>base</div>
    <div className="box m78-effect __light" style={{ background: '#52c41a' }}>base</div>
    <div className="box m78-effect __light" style={{ background: '#fadb14' }}>base</div>
    <div className="box m78-effect">
        has block
            <div className="block" />
                </div>
    <div style={{ backgroundColor: '#000' }} className="box m78-effect __light">
        white
    </div>
    <div className="box m78-effect __win">only win style</div>
    <div className="box m78-effect __md">only md style</div>
    <div className="box m78-effect __disabled">disabled</div>
    <div className="box m78-effect __red">red</div>
    <div className="box m78-effect __orange">orange</div>
    <div className="box m78-effect __yellow">yellow</div>
    <div className="box m78-effect __green">green</div>
    <div className="box m78-effect __cyan">cyan</div>
    <div className="box __w2 m78-effect __blue">blue</div>
    <div className="box __w2 m78-effect __purple">purple</div>
</div>

// add theme
.fr-effect.__myRed .fr-effect-ripple{
  background: red;
}

<div class="box fr-effect __myRed">red</div>

```
npm package: @lxjx/fr-click-effect
Description: material ripple windows click effect
Latest version: 1.0.2
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.


## Introduce
md + windows 点击风格的简单实现。所有事件代理于document，支持动态创建的元素，可随意与mvvm库搭配使用。兼容手机和pc。

Md + windows Click on the simple implementation of the style. All events are delegated to the document, supporting dynamically created elements, and can be used with the mvvm library at will. Compatible with mobile phones and PCs.

<br>

## Install

```
yarn add @lxjx/fr-click-effect
// or 
npm install @lxjx/fr-click-effect

// browser
src="./dist/index.umd.min.js"
```

<br>

## demo

[![Edit bk-click-effect](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/bk-click-effect-9ris7?fontsize=14)

<br>

## Example

```js

import ClickEffect from "@lxjx/fr-click-effect";

new ClickEffect({
  /* default match className ↓ */
  // effect: "fr-effect",	// primary className
  // disabled: "__disabled",	
  // disabledwinStyle: "__md",	// disabled windows style effect
  // disabledMdStyle: "__win"	// disabled material style effect
});

// tpl
<div>
  <div className="box fr-effect">base</div>
  <div className="box fr-effect">
    has block
    <div className="block" />
  </div>
  <div style={{ backgroundColor: '#000' }} className="box fr-effect __light">
    white
  </div>
  <div className="box fr-effect __win">only win style</div>
  <div className="box fr-effect __md ">only md style</div>
  <div className="box fr-effect __disabled">disabled</div>
  <div className="box fr-effect __red">red</div>
  <div className="box fr-effect __orange">orange</div>
  <div className="box fr-effect __yellow">yellow</div>
  <div className="box fr-effect __green">green</div>
  <div className="box fr-effect __cyan">cyan</div>
  <div className="box __w2 fr-effect __blue">blue</div>
  <div className="box __w2 fr-effect __purple">purple</div>
</div>

// add theme
.fr-effect.__red .fr-effect-ripple{
  background: red;
}

<div class="box fr-effect __red">red</div>

```
npm package: @lxjx/preset-config
Description: config for lixianjie, includes babel, eslint, prettier, editor, etc
Author: lixianjie
Latest version: 0.1.0

config for lixianjie, includes babel, eslint, prettier, editor, etc

`.eslintrc.js`
```js
module.exports = {
  extends: [require.resolve('@lxjx/preset-config/.eslintrc.js')],

  globals: {},

  rules: {
    // 缩进为2
    'import/no-unresolved': 'off',
  },
};

```


`.prettierrc.js`

```js
const prettier = require('@lxjx/preset-config/.prettierrc.js');

module.exports = {
  ...prettier,
};

```

- [ ] 通过命令来生成配置文件
npm package: @lxjx/react-transition-spring
Description: react-spring based animation component
Latest version: 1.2.6

<h1 align="center" style="color: #61dafb;">react-transition-spring</h1>

<br>
<br>

## Introduction
react-transition-spring 是基于 react-spring 的一套封装组件，用于简化通过react-spring执行开关动画的方式, 同时, 也扩展了一些非常使用的属性如`unmountOnExit`、`mountOnEnter`。

💡 本库应用于明确知道入场值和离场值的过渡动画(亦称为开关动画), 如果动画需要通过复杂的操作完成(手势等拥有不确定的动画结果的动画)请直接使用react-spring

提供基础组件 `TransitionBase` 以及基于 `TransitionBase` 的上层组件 `Transition`, 内置了一些非常常见的开关动画效果。

## Usage

以下示例介绍了如何使用 `Transition` 和 `TransitionBase` 执行 `fade` 动画

```tsx
import { Transition, TransitionBase } from '@lxjx/react-transition-spring';

const [show, setShow] = useState(false);

return (
    <div style={{ padding: 100 }}>
      <button onClick={() => setShow(prev => !prev)}>toggle</button>
      
      <Transition toggle={show} style={redBox} type="fade">
        <div>动画</div>
      </Transition>

      <TransitionBase toggle={show} style={redBox} to={{ opacity: 1 }} from={{ opacity: 0 }} >
        <div>动画</div>
      </TransitionBase>
    </div>
);
```

## API
**共有配置**

```ts
interface Base {
  /** 控制开关动画 */
  toggle?: boolean;
  /** true | 初次加载时是否触发动画 */
  appear?: boolean;
  /** 'div' | 包裹元素的tag类型。(注意当为span等内联元素时transform不会生效，需要将其设置为inner-block) */
  tag?: keyof typeof animated;
  /** 动画开始前的延迟时间 */
  delay?: number;
  /** react-spring 动画配置 */
  config?: SpringBaseProps['config'];
  /** 所有动画结束后调用, 接收动画结束后的动画值 */
  onRest?: (transitionArg: any) => void;
  /** 动画开始, 会在动画运行、初始化期间多次调用，不应该将其作为进行其他操作的依据 */
  onStart?: () => void;
  /** false | 默认情况下动画结束后组件依然会保持挂载，设置此属性会在过渡结束后会卸载组件 */
  unmountOnExit?: boolean;
  /** false | 初次渲染时，组件默认会以from状态先加载，为true时，只有在初次触发动画时才会加载组件 */
  mountOnEnter?: boolean;
  /** 包裹元素的类名 */
  className?: string;
  /** 包裹元素样式 */
  style?: React.CSSProperties;
  /** 执行某些`破坏性`(form和to被设置为和前一个值毫无关联的动画值)的动画时，可以设置此项来取消前一个动画造成的影响 */
  reset?: boolean;
  /** 指向根节点的ref, 用于直接操作根节点 */
  innerRef?: any;

  [key: string]: any;
}
```



**`Transition`**

集成组件，包含一组内置动画，使用更方便

```ts
interface TransitionProps extends Base {
  /** 动画类型 */
  type: TransitionTypes;
  /** true | 为所有类型的动画附加fade过渡，使其视觉效果更平滑 */
  alpha?: boolean;
}

type TransitionTypes =
  | 'fade'
  | 'zoom'
  | 'punch'
  | 'slideLeft'
  | 'slideRight'
  | 'slideTop'
  | 'slideBottom'
  | 'bounce';
```



**`TransitionBase`**

基础组件，自行配置动画值，使用更灵活

```ts
interface TransitionBaseProps extends Base {
  /** 动画的入场状态 */
  to: any;
  /** 动画的离场状态 */
  from: any;
  /** 用于插值动画，在动画属性传递给动画元素前会将即将用于动画的style和当前的toggle状态传入并返回新的动画对象 */
  interpolater?: (props: any, toggle: boolean) => any;
  /** true | 执行完离场动画后对元素进行可见性隐藏, 防止离场元素占用布局空间和触发事件 */
  changeVisible?: boolean;
}
```



## 进阶使用

执行数字动画

```tsx
<TransitionBase
    toggle={toggle}
    className="box"
    tto={{ number: 0 }}
    from={{ number: 100000 }}
    >
    {({ number: number }: any) => number.interpolate((n: any) => n.toFixed(2))}
</TransitionBase>
```
npm package: @lxjx/sass-base
Description: 包含常用sass变量、混合、function、ant design色板、可选的felx栅格和float栅格以及常用的工具类
Latest version: 1.5.3

# style-base
> 一套sass启动工具，包含normalize、grid、以及常用的sass混合、原子类

<!-- TOC -->

- [style-base](#style-base)
    - [引入`normalize`、原子类](#引入normalize原子类)
    - [引入sass变量、混合等](#引入sass变量混合等)
    - [引入其他功能](#引入其他功能)
    - [生成自己的主题色](#生成自己的主题色)

<!-- /TOC -->


❗❗ 需要使用支持sass/scss的打包器加载此项目

## 全量引入

最简单的方式，包含`normalize`、布局模块、原子类、sass变量、混合等

黑暗模式、移动端样式、小程序样式等需要根据实际场景自行引入

```js
import 'style-base'
```

## 按需引入

```sass
// 引入sass变量、混合等
@import "~@lxjx/sass-base/var/index.scss";

// 重置模块
@import "~@lxjx/sass-base/base/normalize.scss";

// 布局模块
@import "~@lxjx/sass-base/base/layout.scss";

// 原子类
@import "~@lxjx/sass-base/base/util-class.scss";

// 网格
@import "~@lxjx/sass-base/base/grid.scss";

// 移动端配置
@import "~@lxjx/sass-base/base/mobile.scss";

// 黑色主题
@import "~@lxjx/sass-base/base/dark.scss";

// 小程序环境的normalize
@import "~@lxjx/sass-base/base/normalize-for-mini-program.scss";
```



### 生成自己的主题色

```
# 执行createCustomVar.js
node node_modules/@lxjx/sass-base/script/createCustomVar.js

# 输入主题色，复制打印到自定义的scss文件中并引入`var/index.scss`
? 请输入主题色: red
$color-1: #ffeae6;
$color-2: #ffafa3;
$color-3: #ff887a;
$color-4: #ff5d52;
$color-5: #ff3029;
$color-6: #ff0000;
$color-7: #d90007;
$color-8: #b3000c;
$color-9: #8c000e;
$color-10: #66000e;
$color: #ff0000;
```