open-index/open-npm huggingface dataset:
npm package: @lxcc/data-view
Description: Vue Large screen data display component library
Latest version: 2.10.1

[ENGLISH](./README_EN.md)

<p align="center">
  <img src="./icon.png">
</p>
<h1 align="center">DataV</h1>
<p align="center">
    <a href="https://github.com/DataV-Team/datav/blob/master/LICENSE">
      <img src="https://img.shields.io/github/license/DataV-Team/datav.svg" alt="LICENSE" />
    </a>
    <a href="https://www.npmjs.com/package/@lxcc/data-view">
      <img src="https://img.shields.io/npm/v/@lxcc/data-view.svg" alt="LICENSE" />
    </a>
</p>

## DataV是干什么的?

* DataV是一个基于**Vue**的数据可视化组件库（当然也有[React版本](https://github.com/DataV-Team/DataV-React)）
* 提供用于提升页面视觉效果的**SVG**边框和装饰
* 提供常用的**图表**如折线图等
* 飞线图/轮播表等其他组件

### npm安装

```shell
$ npm install @lxcc/data-view
```

### 使用

```js
import Vue from 'vue'
import DataV from '@lxcc/data-view'

Vue.use(DataV)

// 按需引入
import { borderBox1 } from '@lxcc/data-view'
Vue.use(borderBox1)
```

详细文档及示例请移步[HomePage](http://datav.jiaminghi.com).

### UMD版

`UMD`版可直接使用`script`标签引入，`UMD`版文件位于项目`dist`目录下，引入后将自动把所有组件注册为**Vue全局组件**，引入`DataV`前请确保已引入`Vue`。

[UMD版使用示例](./umdExample.html)

### TODO

* **地图组件**
* **TS**重构组件库底层依赖

### 致谢

组件库的开发基于个人学习和兴趣，由于技术水平及经验的限制，组件尚有许多不完善之处，如有BUG可及时提交[issue](https://github.com/DataV-Team/DataV/issues/new?template=bug_report.md)或添加反馈群进行反馈，也欢迎提供指正和建议，感谢各位的支持。

### 反馈
![Feedback](./QQGroup.png)

### Demo

Demo页面使用了全屏组件，请F11全屏后查看。

* [施工养护综合数据](http://datav.jiaminghi.com/demo/construction-data/index.html)

![construction-data](./demoImg/construction-data.jpg)

* [机电运维管理台](http://datav.jiaminghi.com/demo/manage-desk/index.html)

![manage-desk](./demoImg/manage-desk.jpg)

* [机电设备电子档案](http://datav.jiaminghi.com/demo/electronic-file/index.html)

![electronic-file](./demoImg/electronic-file.jpg)
npm package: @lxchapu/eslint-config-vue
Description: Standard eslint config for Vue
Author: lxchapu
Latest version: 0.1.0

# eslint-config-vue

## Install

```bash
pnpm add eslint @lxchapu/eslint-config-vue -D
```

## Usage

在你的 eslint 配置文件中添加以下内容：

```js
{
  extends: ["@lxchapu/eslint-config-vue"]
}
```

在 `package.json` 中添加脚本：

```json
{
  "lint": "eslint --fix src/**/*.{js,ts,tsx,vue}"
}
```

## Lincense

MIT
npm package: @lxchapu/stylelint-config-vue
Description: Standard stylelint config for Vue
Author: lxchapu
Latest version: 1.0.1

# stylelint-config-vue

## Install

```bash
pnpm add @lxchapu/stylelint-config-vue -D
```

## Usage

在你的 Stylelint 配置文件中添加以下内容：

```js
{
  extends: ["@lxchapu/stylelint-config-vue"]
}
```

在 `package.json` 中添加脚本：

```json
{
  "lint:style": "stylelint --fix **/*.{css,scss,vue,html}"
}
```

## Auto lint on save

在 VSCode 工作区中添加以下配置：

```json
{
  "stylelint.validate": ["css", "scss", "vue", "html"],
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true
  }
}
```

## Lincense

MIT
npm package: @lxdao/img3
Description: [![npm version](https://badge.fury.io/js/%40lxdao%2Fimg3.svg)](https://badge.fury.io/js/%40lxdao%2Fimg3) [![npm downloads](https://img.shields.io/npm/dm/%40lxdao%2Fimg3.svg)](https://www.npmjs.com/package/%40lxdao%2Fimg3)
Latest version: 1.0.2

# Img3

[![npm version](https://badge.fury.io/js/%40lxdao%2Fimg3.svg)](https://badge.fury.io/js/%40lxdao%2Fimg3)
[![npm downloads](https://img.shields.io/npm/dm/%40lxdao%2Fimg3.svg)](https://www.npmjs.com/package/%40lxdao%2Fimg3)

`<Img3 />` is a fundamental components for Web3 Apps. It extends HTML `<img />` with Web3 decentralization storage, like
IPFS. With `<Img3 />` you can put ipfs:// in the src and render the image from IPFS with the fastest gateway. Will support
ar soon.

**Features**

- Supports the `ipfs://` protocol.
- Automatically uses the gateway with the highest speed, And reuse it the next request.

```jsx
const defaultGateways = [
  'https://nftstorage.link/ipfs/',
  'https://ipfs-gateway.cloud/ipfs/',
  'https://gateway.pinata.cloud/ipfs/',
  'https://4everland.io/ipfs/',
];
```

## Usage

```js copy
import { Img3 } from '@lxdao/img3';
```

## Props

| Prop     | Type            | Description                              | Default                        |
| -------- | --------------- | ---------------------------------------- | ------------------------------ |
| src      | `string`        | image source, support `ipfs://` protocol | -                              |
| alt      | `string`        | image alt text                           | -                              |
| gateways | `string[]`      | Web3 decentralization storage gateways   | defaultGateways                |
| timeout  | `number`        | timeout of gateway request               | `2000`                         |
| icon     | [`Icon`](#icon) | style of loading or error icons          | `{size: 30, color: '#c0c0c0'}` |

## Types reference

### Icon

```ts
type Icon = {
  /** icon size. */
  size?: number;
  /** icon color. */
  color?: string;
  /** error icon size. */
  errorSize?: number;
  /** error icon color. */
  errorColor?: string;
};
```