# enn-info-panel

> 信息面板组件

Latest version **0.0.31** (published 2022-11-21) · ISC license · 0 weekly downloads

## Install

```sh
npm install enn-info-panel
pnpm add enn-info-panel
yarn add enn-info-panel
bun add enn-info-panel
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.31 |
| Published | 2022-11-21 |
| First published | 2021-11-15 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 29.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | yansongcai |
| Maintainers | upupzealot, yansongcai, kewenjiang, guopi11 |
| Keywords | info-panel, enn |

## Links

- npm: https://www.npmjs.com/package/enn-info-panel
- npm.io page: https://npm.io/package/enn-info-panel

## Recent versions

- 0.0.31 (latest) — 2022-11-21
- 0.0.30 — 2022-09-05
- 0.0.29 — 2022-08-17
- 0.0.28 — 2022-06-16
- 0.0.27 — 2022-04-15
- 0.0.26 — 2022-04-06
- 0.0.25 — 2022-04-06
- 0.0.24 — 2022-03-23
- 0.0.23 — 2022-03-11
- 0.0.22 — 2022-02-28
- 0.0.21 — 2022-02-17
- 0.0.20 — 2022-02-16
- 0.0.19 — 2022-02-14
- 0.0.18 — 2022-02-10
- 0.0.17 — 2022-02-09
- … 16 more at https://npm.io/package/enn-info-panel/versions

## README

# InfoPanel

信息面板组件

## 示例

```Vue
<template>
  <div>
    <InfoPanel :schema="Schema" :data="data" />
  </div>
</template>

<script>
import InfoPanel from 'enn-info-panel';
import Schema from './info.schema.json';

export default {
  components: {
    InfoPanel,
  },
  data() {
    return {
      Schema,
      data: {},
    };
  },
}
</script>
```

## API

### InfoPanel Attributes

| 参数      | 类型    | 必填 | 默认值    | 说明                         |
| --------- | ------- | ---- | --------- | ---------------------------- |
| schema    | Object  | 是   | -         | 数据信息的 schema            |
| data      | Object  | 是   | -         | 展示的数据                   |
| scenario  | String  | 否   | infoPanel | 环境变量                     |
| config    | Object  | 否   | -         | 配置项，包括联动内使用的数据 |
| hasBorder | Boolean | 否   | true      | 控制是否显示边框             |

##### Tips

- schema 可使用 schema-form-editor 生成，格式参照 schema-form-render 所需 schema 的格式
- schema 中只有 activated、visible 可以控制当前项是否展示

#### config

| 参数           | 类型    | 必填 | 默认值 | 说明                                     |
| -------------- | ------- | ---- | ------ | ---------------------------------------- |
| emptySymbol    | String  |      | -      | 空值字段填充的符号                       |
| closeAutoLabel | Boolean |      | -      | 取消无边框 label 默认值 auto，改为 80px; |

## 示例

#### 插槽 Slots

```Vue
<template>
  <div>
    <InfoPanel :schema="Schema" :data="data" >
      <template #itemName="{name, value}">
        {{name}}: {{value}}
      </template>
    </InfoPanel>
  </div>
</template>

<script>
import InfoPanel from 'enn-info-panel';
import Schema from './info.schema.json';

export default {
  components: {
    InfoPanel,
  },
  data() {
    return {
      Schema,
      data: {},
    };
  },
}
</script>
```

#### 联动 scenario

```json
{
  "type": "input",
  "label": "名称1",
  "name": "key1",
  "effect": "set('activated', scenario !== 'infoPanel');"
}
```

#### info.less

可以用来把 schema-form-render 生成的表单转为信息面板样式
注意：需要自行设置表单的只读或禁用

```vue
<SchemaFormRender class="enn-form-info-panel" />
```

# BooleanResult

状态显示组件

- 支持多状态展示其中一种

## 示例

```Vue
<template>
  <div>
    <BooleanResult :value="value"/>
  </div>
</template>

<script>
import { BooleanResult } from 'enn-info-panel';

export default {
  components: {
    BooleanResult,
  },
  data() {
    return {
      value: true,
    };
  },
}
</script>
```

## API

### BooleanResult Attributes

| 参数    | 类型    | 必填 | 默认值 | 说明             |
| ------- | ------- | ---- | ------ | ---------------- |
| value   | Boolean | 是   | -      | 渲染的值         |
| config  | Object  |      |        | 渲染的配置项     |
| minIcon | Boolean |      |        | 是否使用点的图标 |
| status  | Array   |      |        | 多种状态展示     |

#### config Attributes

| 参数         | 类型   | 必填 | 默认值         | 说明                   |
| ------------ | ------ | ---- | -------------- | ---------------------- |
| activeText   | String |      | 是             | true 状态的文案        |
| inactiveText | String |      | 否             | false 状态的文案       |
| activeIcon   | String |      | el-icon-succes | true 状态的图标 class  |
| inactiveIcon | String |      | el-icon-error  | false 状态的图标 class |
| emptySymbol  | String |      | "-"            | 空值字段填充的符号     |

##### 示例

```Vue
<template>
  <div>
    <BooleanResult :value="value" :config="config" />
  </div>
</template>

<script>
import { BooleanResult } from 'enn-info-panel';

export default {
  components: {
    BooleanResult,
  },
  data() {
    return {
      value: true,
      config: {
        activeText: '启用',
        inactiveText: '停用',
        activeIcon: 'el-icon-video-play',
        inactiveIcon: 'el-icon-video-pause',
      },
    };
  },
}
</script>
```

#### status Attributes

| 参数     | 类型                  | 必填 | 默认值 | 说明             |
| -------- | --------------------- | ---- | ------ | ---------------- |
| value    | String/Boolean/Number |      |        | 状态对应的值     |
| label    | String                |      |        | 状态的文案       |
| icon     | String                |      |        | 状态的图标 class |
| color    | String                |      |        | icon 的颜色      |
| minColor | String                |      |        | minIcon 的颜色   |

##### Tips

- icon 只有 minIcon 为 false 的时候才会使用
- color 和 minColor 会互补，如果 color 没设置，会使用 minColor。反之一样。

##### 示例

```Vue
<template>
  <div>
    <BooleanResult :value="value" :status="status" />
  </div>
</template>

<script>
import { BooleanResult } from 'enn-info-panel';

export default {
  components: {
    BooleanResult,
  },
  data() {
    return {
      value: 1,
      status: [
        {
          value: 1,
          label: '1',
          icon: 'el-icon-user-solid',
          color: 'red',
          minColor: 'pink',
        },
        {
          value: 2,
          label: '2',
          icon: 'el-icon-star-on',
          color: 'green',
          minColor: 'lightgreen',
        },
        {
          value: 3,
          label: '3',
          icon: 'el-icon-s-goods',
          color: 'blue',
          minColor: 'lightblue',
        },
      ],
    };
  },
}
</script>
```

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