# jl-ui

> kz ui for element-ui 2.x

Latest version **2.13.33** (published 2020-08-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install jl-ui
pnpm add jl-ui
yarn add jl-ui
bun add jl-ui
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.13.33 |
| Published | 2020-08-15 |
| First published | 2020-08-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 11 |
| Unpacked size | 1.2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | jl-joker |
| Maintainers | jl-joker |

## Links

- npm: https://www.npmjs.com/package/jl-ui
- Repository: https://github.com/gdmec07150918/jl-ui
- Homepage: https://github.com/gdmec07150918/jl-ui#readme
- Issues: https://github.com/gdmec07150918/jl-ui/issues
- npm.io page: https://npm.io/package/jl-ui

## Dependencies (11)

- [lodash](https://npm.io/package/lodash.md) ^4.17.11
- [deepmerge](https://npm.io/package/deepmerge.md) ^3.2.0
- [nprogress](https://npm.io/package/nprogress.md) ^0.2.0
- [countup.js](https://npm.io/package/countup.js.md) ^1.9.3
- [screenfull](https://npm.io/package/screenfull.md) ^4.0.0
- [sortablejs](https://npm.io/package/sortablejs.md) ^1.8.1
- [vue-lazyload](https://npm.io/package/vue-lazyload.md) ^1.3.1
- [normalize.css](https://npm.io/package/normalize.css.md) ^8.0.1
- [click-outside-js](https://npm.io/package/click-outside-js.md) ^0.0.2
- [mutationobserver-shim](https://npm.io/package/mutationobserver-shim.md) ^0.3.3
- [resize-observer-polyfill](https://npm.io/package/resize-observer-polyfill.md) ^1.5.1

## Recent versions

- 2.13.33 (latest) — 2020-08-15
- 2.13.32 — 2020-08-15

## README

# theme

> 集成element-ui theme-chalk主题 

## document
https://kuaizi-co.github.io/kuaizi-theme/#/

## Install

```bash
> yarn add @kuaizi/kz-ui@next
# or
> npm i @kuaizi/kz-ui@next -S
```

## Dev

### 目录结构

```bash
▁
kz-ui
├── babel.config.js     - babel配置
├── components          - 组件目录
├── deploy.sh           - 在线文档发布
├── release.sh           - 版本发布
├── examples            - 文档目录
├── gulpfile.js         - theme构建
├── kuaizi-theme        - 在线文档build目录，同步到`kuauzi-co/kuaizi-theme`
├── lib                 - build theme样式css文件
├── package.json        - 项目配置
├── public              - 文档静态资源
├── README.md           - 说明使用文档
├── strip-tags.js       - 文档依赖函数库
├── theme               - theme预处理源文件
└── vue.config.js       - vue-cli3 构建配置文件
```

文档放在 `examples/docs/packages`目录，新建`markdown` 文件即可，比如：

```markdown
# app.md

::: tip
提示
:::

::: warning
提醒
:::

::: demo 这是一个demo
```html
放代码
```
:::
```

### theme

在 `theme` 目录下的 `config/你的主题变量配置.scss`去定义变量

在 `theme` 目录新建 `theme-你的主题名称` 文件，其内容为

```scss
// theme-kz.scss
// 导入变量
@import "./config/kuaizi";
// 导入组件
@import "./config/common";
```

**需注意一下几个文件**

* `theme/config/var.scss` - 公用的配置文件，与颜色无关
* `theme/config/mixin.scss` - mixin 函数
* `theme/config/common.scss` - kz-ui 组件依赖样式

#### scss mixin函数

```
// $--namespace
@import "../theme-chalk/src/common/var.scss";
@import "../theme-chalk/src/mixins/mixins";

// 单线连接符
// #{$--namspace}-#${name}
// .el-button
@include b(button) {
  // 双线连接符
  // .el-button--default
  @include m(default) {

    // BEM
    // 双下划线连接符
    // .el-button--default__large
    @inclue e (large) {}
  }

  // 状态
  .el-button.is-success
  @include when (success) {}
}
```

编译主题需要在命令窗口启动

```bash
# 同步最新element-ui主题
> yarn update:theme
# 开发
> yarn theme:dev
# build
> yarn theme:build
# 发布新版
> git checkout dev
# 合并分支
> git merge feature/component/tab
# 发布
> yarn release
# 同步文档到gitpages
> yarn deploy
```

### 组件

在 `components` 目录下的组件样式都统一写在 `theme/components` 中，组件的配色根据主题配色进行更换。

## 打包编译

```bash
> yarn rollup
```

## Publish

1. `npm publish --tag next` 发布tag
2. `npm dist-tag ls @kuaizi/kz-ui` 查看tag
3. `npm dist-tag add @kuaizi/kz-ui@1.0.0` latest 切换tag


---
MIT License Copyright (c) www.kuaizi.ai, 2018-preset

---
_Source: https://npm.io/package/jl-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._