open-index/open-npm huggingface dataset:
npm package: @mistjs/vite-plugin-px2viewport
Description: this is a vite plugin for inline px to viewport
Author: aibayanyu20
Latest version: 0.1.0

# px2viewport

这是一个基于vite的插件，用于将写在行内的px单位转换为vw单位。

## 安装

```bash
pnpm add @mistjs/vite-plugin-px2viewport
```

## 使用

在 `vite.config.ts`:

```ts
import { defineConfig } from 'vite'
import {px2viewport} from '@mistjs/vite-plugin-px2viewport'

export default defineConfig({
    plugins: [
        px2viewport({
            viewportWidth: 750
        })
    ],
})
```
## 参数

- `viewportWidth` (number): 视口的宽度。默认值: 750.
- `include` (string | RegExp | (string | RegExp)[]): 要处理的文件路径。默认值: `/\.(vue|jsx|tsx)$/`.
- `exclude` (string | RegExp | (string | RegExp)[]): 要处理的文件路径。默认值: `/node_modules/`.
- `unitToConvert` (string): 要转换的单位。默认值: `px`.
- `unitPrecision` (number): 允许的小数位数。默认值: 5.
- `viewportUnit` (string): 要转换为的单位。默认值: `vw`.
- `minPixelValue` (number): 要转换的最小像素值。
- `cssOptions` (object): 与 (https://github.com/lkxian888/postcss-px-to-viewport-8-plugin#api-%E8%AF%B4%E6%98%8E) 相同

> [!WARNING]
> `cssOptions` 仅支持 `postcss` 插件，不支持行内样式和动态样式。

> [!WARNING]
> 如果你想包含 `node_modules` 文件，你应该将 `exclude` 选项设置为 `[]`。

## 例子

### 行内样式处理

你可以通过我们的插件实现基础静态行内样式的处理：
**输入**

```vue
<template>
    <div style="width: 100px;height: 100px;"></div>
</template>
```

**输出**

```vue
<template>
    <div style="width: 13.33334vw;height: 13.33334vw;"></div>
</template>
```

### 动态样处理

**输入**

```vue
<template>
    <div :style="{width: '100px', height: '100px'}"></div>
</template>
```

**输出**

```vue
<template>
    <div :style="{width: '13.33334vw', height: '13.33334vw'}"></div>
</template>
```


### 动态自定义处理

**输入**

```vue
<script lang="ts" setup>
  import { computed } from "vue"
  const styles = computed(()=>{
    return {
      width: '100px',
      height: '100px'
    }
  })
</script>
<template>
    <div style="font-size: 18px" :style="styles"></div>
</template>
```

在运行时会自动处理px到vw的转换。
npm package: @mistjs/vue-editor
Description: This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
Author: aibayanyu20
Latest version: 0.0.1

# Vue 3 + TypeScript + Vite

This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

## Recommended IDE Setup

- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).

## Type Support For `.vue` Imports in TS

TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:

1. Disable the built-in TypeScript Extension
   1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
   2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
npm package: @mistlog/type-query
Description: jquery style type manipulation
Author: mistlog
Latest version: 0.0.3

# TypeQuery &middot; [![Build Status](https://github.com/mistlog/type-query/workflows/build/badge.svg)](https://github.com/mistlog/type-query/workflows/build/badge.svg) [![Coverage Status](https://coveralls.io/repos/github/mistlog/type-query/badge.svg)](https://coveralls.io/github/mistlog/type-query)

## License

This project is [MIT licensed](https://github.com/mistlog/type-query/blob/main/LICENSE).
npm package: @mistong/eui
Description: An eui component
Author: mistong eui team
Latest version: 0.1.57

# eui 整包

## Install

```
$ npm i @mistong/eui
```

## Usage

```
import {
  Icon,
  EmptyData,
} from '@mistong/eui';
import '@mistong/eui/dist/index.css';
```

## 按需加载

安装 `babel-plugin-import` 插件

```
npm install babel-plugin-import --save-dev
```

`.babelrc` 文件配置如下

```
{
  "plugins": [
    [ "import", {
        "libraryName": "@mistong/eui"
      }
    ]
  ]
}
```
npm package: @mistong/eui-alert
Description: An eui component
Author: mistong eui team
Latest version: 0.1.0

# USAGE

## Install

```
$ npm i @mistong/eui
```

## demo

```
import { Alert } from '@mistong/eui';

...

<Alert message="提示" />
```

## API

|参数|说明|类型|默认值|
|---|----|---|------|
|className|添加自定义class|string|-|
|type|警告的类型|string|info|
|showIcon|是否显示图标|boolean|false|
|icon|自定义EUI Icon|string|-|
|closable|是否显示关闭按钮|boolean|false|
|message|警告信息|string/element|-|
|onClose|关闭警告的hook|function|-|
|afterClose|关闭警告以后的hook|function|-|
npm package: @mistong/eui-button
Description: eui-button component 
Author: mistong eui team
Latest version: 0.1.11


# eui-button

an button component for react


## Useage
```sh
render() {
  <div>
    <Button size="small">small按钮</Button>

    <Button type="primary">primary按钮</Button>
  </div>
}
```

## Button API Props

|参数|说明|类型|可选值|默认值|
|----|----|----|----|------|
|size|按钮大小|string|small,medium,large,big|medium|
|type|类型|string|primary,secondary,normal|normal|
|disabled|是否禁用|boolean|true,false|false|
|className|自定义额外class|string|-|-|
|htmlType|设置按钮类型|string|button,submit,reset|button|
|loading|是否载入状态|boolean|true,false|false|
|onClick|click事件|function|-|-|
|href|按钮生成a链接|string|-|-|
npm package: @mistong/eui-calendar
Description: a react component for calendar
Author: mistong eui team
Latest version: 0.1.6

# USAGE

## Install

```
$ npm i @mistong/eui
```

## demo

```
import { Calendar } from '@mistong/eui';

...

<Calendar />
```

## Note

目前使用[rc-calendar 5.x版本](https://github.com/react-component/calendar/issues/182#issuecomment-281591988)来支持ie8

## API

日期类组件目前包含一下两种形式。

- Calendar
- MonthCalendar

### 共同的API

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| allowClear | 是否显示清除按钮 | boolean | true |
| autoFocus | 自动获取焦点 | boolean | false |
| className | 选择器 className | string | '' |
| dateRender | 自定义日期单元格的内容 | function(currentDate: moment, today: moment) => React.ReactNode | - |
| disabled | 禁用 | boolean | false |
| disabledDate | 不可选择的日期 | (currentDate: moment) => boolean | 无 |
| dropdownClassName | 额外的弹出日历 className | string | - |
| getCalendarContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | 无 |
| locale | 国际化配置('zh-cn' / 'en-us') | string | 'zh-cn' |
| placeholder | 输入框提示文字 | string\|RangePicker\[] | - |
| popupStyle | 额外的弹出日历样式 | object | {} |
| style | 自定义输入框样式 | object | {} |
| defaultValue | 默认日期 | [moment](http://momentjs.com/) | 无 |

| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - |
| value | 日期 | [moment](http://momentjs.com/) | 无 |
| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: moment, dateString: string) | - |
| disabledTime | 不可选择的时间 | function(date) | 无 |

### 共同的方法

| 名称 | 描述 |
| --- | --- |
| blur() | 移除焦点 |
| focus() | 获取焦点 |

### DatePicker

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | "YYYY-MM-DD" |
| mode | 日期面板的状态 | `time|date|month|year` | 'date' |
| onPanelChange | 日期面板变化时的回调 | function(value, mode) | - |

### MonthPicker

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | "YYYY-MM" |
| monthCellContentRender | 自定义的月份内容渲染方法 | function(date, locale): ReactNode | - |
npm package: @mistong/eui-cli
Description: Devtools for eui component
Author: mistong eui team
Latest version: 0.1.48

# EUI-cli

铭师堂 `EUI` 组件构建工具

# Install

`$ npm i @mistong/eui-cli -g`

# Usage

* `eui init` 初始化[eui组件模板](https://github.com/MST-EUI/EUI-component-tpl)
* `eui server` 启动本地开发服务器
* `eui build` 打包模块
npm package: @mistong/eui-code
Description: An eui component
Author: mistong eui team
Latest version: 0.1.12

# USAGE

## Install

```
$ npm i @mistong/eui
```

## demo

```
import { Code } from '@mistong/eui';

...

<Code
  sourceCode={'console.log(\'hello world\');'}
>
 I'am demo here
<Code>
```

## API

|参数|说明|类型|默认值|
|---|----|---|------|
|children|需要展示的 demo 内容|any|`null`|
|sourceCode|需要展示的源代码|any|''|
|mode|模式[`default` `inline` `codeOnly` `markdown`](模式为 `markdown` 时，[参数同 markdown-to-jsx](https://github.com/probablyup/markdown-to-jsx))|string|`default`|
|buttonText|按钮文案|any|'查看源码'|
|className|增加额外的class|string|''|
|style|自定义样式|object|{}|
|prefixCls|样式名前缀|string|`eui-code`|
npm package: @mistong/eui-css
Description: EUI component based css
Author: mistong eui team
Latest version: 0.1.12

## Usage

> 该组件是唯一不在整包 `@mistong/eui` 中的组件，需要单独引用（如下）

安装

```
$ npm install @mistong/eui-css
```

css 中变量模块引用

```
@import './node_modules/@mistong/eui-css/variable.scss';
```
npm package: @mistong/eui-demo
Description: An eui component
Author: mistong eui team
Latest version: 0.1.10

# USAGE

## Install

```
$ npm i @mistong/eui
```

## demo

```
import { Demo } from '@mistong/eui';
import '@mistong/eui/dist/index.css';

<Demo>内容区域</Demo>
```

## API

|参数|说明|类型|默认值|
|---|----|---|------|
|className|添加自定义class|string|''|
|style|自定义样式|object|`{}`|
|prefixCls|样式名前缀|string|`eui-demo`|
|children|需要展示的内容|any|``|
npm package: @mistong/eui-dialog
Description: eui-dialog component
Latest version: 0.1.12

# eui-dialog
eui dialog component
弹窗组件
# Usage
```
import React from 'react';
import ReactDOM from 'react-dom';
import Dialog from 'eui-dialog';

ReactDOM.render(
    <Dialog
        title="这是对话框的标题"
        visible={this.state.visible}
        onOk={() => this.handleOk()}
        onCancel={() =>this.handleCancel()}
    >
        <p>这是对话框的内容</p>
    </Dialog>,
    document.getElementById('app')
);

```

# API

参数 | 类型 | 默认值 |  说明 
---  | ---- | ---- | ----
title | String \| ReactElement | 无 | 标题 
className | String | 无 | 容器类名
prefixCls | String | `"eui-dialog"` | 自定义类名前缀 
visible | Boolean | `false` | 对话框是否可见
width | String \| Number | `"580px"` | 宽度
locale | String | `zh-cn` | 国际化(`zh-cn`, `en-us`)
maskClosable | Boolean | `true` | 点击蒙层是否允许关闭
onOk | Function | () => {} | 点击确定回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭
onCancel | Function | () => {} | 点击取消回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭

剩余API可以参照 [rc-dialog api](https://github.com/react-component/dialog#rc-dialog-1)

# Dialog.method()

包含：
- `Dialog.confirm`
- `Dialog.success`
- `Dialog.warning`
- `Dialog.error`
- `Dialog.info`

```
// usage example

Dialog.confirm({
  title: '这是一个confirm的title',
  content: '这是一个confirm的content',
})
```


以上均为一个函数，参数为 object，具体属性如下：

参数 | 类型 | 默认值 |  说明 
---  | ---- | ---- | ----
title | String \| ReactElement | 无 | 标题
content | String \| ReactElement | 无 | 内容
className | String | 无 | 容器类名
width | String \| Number | `"390px"` | 宽度
locale | String | `zh-cn` | 国际化(`zh-cn`, `en-us`)
okText | String  | 确定 | 确认按钮文字
cancelText | String  | 取消 | 取消按钮文字
maskClosable | Boolean | `false` | 点击蒙层是否允许关闭
onOk | Function | () => {} | 点击确定回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭
onCancel | Function | () => {} | 点击取消回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭

以上函数调用后，会返回一个引用，可以通过该引用关闭弹窗。
```
const ref = Dialog.info();
ref.close();
```

# 开发规约
- fork项目到自己仓库
- `npm i`
- 编辑器开启`eslint`
- 提交代码信息使用`git-cz`
npm package: @mistong/eui-empty-data
Description: EUI component development template
Author: mistong eui team
Latest version: 0.1.10

# USAGE

## Install

```
$ npm i @mistong/eui
```

## demo

```
import { EmptyData } from '@mistong/eui';

...

<EmptyData />
```

## API

|参数|说明|类型|默认值|
|---|----|---|------|
|lang|语言包类型|(`zh-cn` `en`)|string|`zh-cn`|
|className|增加额外的class|string|''|
|style|自定义样式|object|{}|
|prefixCls|样式名前缀|string|`eui-code`|
|children|描述文案|any|`暂无数据`|
|icon|自定义图片|string|`//yukap6.github.io/images/empty.png`|
|type|图片类型|(`small` `medium` `large`)|string|`medium`|
npm package: @mistong/eui-icon
Description: eui-iocn component
Author: mistong eui team
Latest version: 0.1.14

# USAGE

## Install

```
$ npm i @mistong/eui-icon
```

## demo

```
import Icon from '@mistong/eui-icon';

<Icon type="info" />
```

## API

|参数|说明|类型|默认值|
|---|----|---|------|
|type|icon 类型(`info` `warning` `success` `arrow-right` `close` `error` `triangle-down` `triangle-up`)|string|-|
|className|添加自定义class|string|''|
|style|自定义样式|object|`{}`|
|prefixCls|样式名前缀|string|`eui-icon`|
npm package: @mistong/eui-menu
Description: An eui component
Author: mistong eui team
Latest version: 0.1.8

# USAGE

## Install

```
$ npm i @mistong/eui
```

## demo

```
import { Menu } from '@mistong/eui';

...

<Menu mode="inline"/>
```

## API

|参数|说明|类型|默认值|
|---|----|---|------|
|className|添加自定义class|string|''|
|mode|模式|string|`horizontal`/`inline`|
|prefixCls|样式名前缀|string|`eui-menu`|
|更多请参考|https://github.com/react-component/menu
npm package: @mistong/eui-pagination
Description: eui-pagination react component
Author: mistong eui team
Latest version: 0.1.9

# eui 组件模板

## Usage

```sh
render() {
  <div>
    <Pagination
      total={100}
      pageSize={10}
    />
  </div>
}
```

|参数|说明|类型|默认值|
|----|----|----|------|
|defaultCurrent|默认的当前页数|Number|1|
|current|当前页码|Number|undefined|
|total|总记录数|Number|0|
|pageSize|每页条数|Number|10|
|onChange|页码改变的回调|Function(current, pageSize)|-|
|showQuickJumper|是否可以快速跳转至某页|Bool / Object|false / {goButton: true}|
|simple|当添加该属性时，显示为简单分页|Object|null|
|size|尺寸|string(small)|null|
npm package: @mistong/eui-popconfirm
Description: A simple and compact confirmation dialog of an action.
Author: mistong eui team
Latest version: 0.1.0

# USAGE

## Install

```
$ npm i @mistong/eui
```

## demo

```
import { EmptyData } from '@mistong/eui';

...

<EmptyData />
```

## API

|参数|说明|类型|默认值|
|---|----|---|------|
|lang|语言包类型|(`zh-cn` `en`)|string|`zh-cn`|
|className|添加自定义class|string|''|
|style|自定义样式|object|`{}`|
|prefixCls|样式名前缀|string|`eui-empty-data`|
|children|描述文案|any|`暂无数据`|
|icon|自定义图片|string|`https://yukap6.github.io/images/empty.png`|
|type|背景图片类型 (`small` `medium` `large`)|string|`medium`|
npm package: @mistong/eui-switch
Description: An eui switch component
Author: mistong eui team
Latest version: 0.1.0

# USAGE

## Install

```
$ npm i @mistong/eui
```

## demo

```
import { Switch } from '@mistong/eui';

...

<Switch />
```

## API

|参数|说明|类型|默认值|
|---|----|---|------|
|defaultChecked|初始是否选中|boolen|`false`|
|checked|指定当前是否选中|boolen|false|
|onChange|变化时回调函数|Function(checked)|-|
|size|开关大小(default、small)|string|`default`|
|checkedChildren|选中时的内容|React Node|-|
|unCheckedChildren|非选中时的内容|React Node|-|
|className|添加自定义class|string|-|
|prefixCls|样式名前缀|string|`eui-empty-data`|
npm package: @mistong/eui-tab
Description: EUI component template
Author: mistong eui team
Latest version: 0.1.7

# eui-tab

eui tab component 

## Usage
```js

import React from 'react';
import ReactDOM from 'react-dom';
import { Tabs, TabPane }  from 'eui-tab';
function callback(key) {
   console.log(key);
}

ReactDOM.render(
      <Tabs defaultActiveKey="1" onChange={callback}>
            <TabPane tab="tab1" key="1">tab1 content</TabPane>
            <TabPane tab="tab2" key="2">tab2content</TabPane>
            <TabPane tab="tab3" key="3">tab3 content</TabPane>
      </Tabs>,
    document.getElementById('app')
);
```
## API
Tabs

---

keys | type |default | description
---|---|---|---
activeKey|String|null|当前激活选项key
defaultActiveKey|String|first active tabPane key | 设置默认选项
onChange|function( key:String) :void|切换回调
disabled | Boolean| false|是否禁用该选项
tabBarExtraContent|React Node||额外的元素 在tab右侧
type|line、card|line |选项卡模式 是否选择卡片模式

---

TabPane

---

keys | type |default | description
---|---|---|---
key|Object||当前激活key 唯一
tab |React.Node或者String| null |tab选项标题显示内容
npm package: @mistong/eui-table
Description: An eui component
Author: mistong eui team
Latest version: 0.1.0

# USAGE

## Install

```
$ npm i @mistong/eui
```

## demo

```
import { Table } from '@mistong/eui';

<Table columns={columns} data={data} />
```

## API

#### Table 

|参数|说明|类型|默认值|
|---|----|---|------|
|size|尺寸(`small` `medium` `large`)|string|large|
|data|数据数组|Array|-|
|columns|表格列的配置描述|Array|-|
|rowKey|表格行 key 的取值|Function(record, index)|`key`|
|rowClassName|表格行的类名|Function(record, index):string|-|
|emptyPlaceholder|空数据|React.Node or Function|暂无数据|
|simple|简单样式表格|Boolean|false|
|onRowClick|处理行点击事件|Function(record, index)|-|
|showHeader|是否显示表头|Boolean|true|
|scroll|横向或纵向支持滚动|Object|`{{x: false, y: false}}`|
|prefixCls|样式名前缀|string|`eui-table`|

#### Table Columns

|参数|说明|类型|默认值|
|---|----|---|------|
|title|列头显示文字|String or React.Element|-|
|key|React 需要的 key，建议设置|string|-|
|dataIndex|列数据在数据项中对应的 key|string|-|
|render|生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引|Function(text, record, index) {}|-|
|width|列宽度|String or Number|-|
|className|列的 className|string|-|
npm package: @mistong/eui-tag
Description: An eui component
Author: mistong eui team
Latest version: 0.1.1

# USAGE

## Install

```
$ npm i @mistong/eui
```

## demo

```
import { EmptyData } from '@mistong/eui';

...

<EmptyData />
```

## API

|参数|说明|类型|默认值|
|---|----|---|------|
|lang|语言包类型|(`zh-cn` `en`)|string|`zh-cn`|
|className|添加自定义class|string|''|
|style|自定义样式|object|`{}`|
|prefixCls|样式名前缀|string|`eui-empty-data`|
|children|描述文案|any|`暂无数据`|
|icon|自定义图片|string|`https://yukap6.github.io/images/empty.png`|
|type|背景图片类型 (`small` `medium` `large`)|string|`medium`|