open-index/open-npm huggingface dataset:
npm package: @qimpl/eslint-config
Description: Qimpl shared eslint configuration
Author: Jérôme Pogeant
Latest version: 1.4.2

# Qimpl Eslint/Prettier config

Qimpl shared eslint configuration

[![NPM](https://img.shields.io/npm/v/@qimpl/eslint-config.svg)](https://www.npmjs.com/package/@qimpl/eslint-config)

## Usage

```
npx install-peerdeps --dev @qimpl/eslint-config
```

### React

There is the `.eslintrc.js` config for React/React Native projects:

```js
module.exports = {
  extends: '@qimpl/eslint-config/react',
};
```

#### With TypeScript:

> Don't forget to add the parserOptions into your project Eslint config

```js
module.exports = {
  extends: '@qimpl/eslint-config/react-typescript',
  parserOptions: {
    project: './tsconfig.json',
  },
};
```

### Svelte

There is the `.eslintrc.js` config for Svelte projects:

```js
module.exports = {
  extends: '@qimpl/eslint-config/svelte',
};
```

## VS Code config

Once you have done. You probably want your editor to lint and fix for you.

1. Install the [ESLint package](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
2. Now we need to setup some VS Code settings via `Code/File` → `Preferences` → `Settings`. Click to the `{}` icon in the top right corner and add this :

```json
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
```
npm package: @qimpl/stylelint-config
Description: Qimpl stylelint shared config
Author: Robin Baraffe
Latest version: 1.1.1

# Qimpl Stylelint config

Qimpl Stylelint shared configuration

[![NPM](https://img.shields.io/npm/v/@qimpl/stylelint-config.svg)](https://www.npmjs.com/package/@qimpl/stylelint-config)

# Usage

```sh
npx install-peerdeps --dev @qimpl/stylelint-config
```

## Default

`.stylelintrc.js` content to use default config

```js
module.exports = {
  extends: '@qimpl/stylelint-config',
};
```

## Styled component

There is the `.stylelintrc.js` needed when using styled-component

```js
module.exports = {
  extends: '@qimpl/stylelint-config/styled-components',
};
```
npm package: @qin-ui/element-plus-pro
Description: 基于 element-plus 的二次封装组件
Author: dufan3715
Latest version: 1.0.1

# @qin-ui/element-plus-pro

基于 Element Plus 的 Pro 组件库，提供：

- `ProForm`
- `ProTable`
- `ProComponentProvider`
- `useForm`
- `useTable`

## 安装

```bash
pnpm add @qin-ui/element-plus-pro element-plus
```

## 快速使用

```ts
import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import App from './App.vue';

const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');
```

```vue
<script setup lang="ts">
import { ProTable, useTable } from '@qin-ui/element-plus-pro';

const table = useTable({
  columns: [
    { prop: 'name', label: '姓名' },
    { prop: 'age', label: '年龄' },
  ],
});
</script>

<template>
  <ProTable :table="table" />
</template>
```

## ProTable columns

`columns` 采用 Element Plus 列协议为主，支持：

- 原生列字段：`prop`、`label`、`width`、`fixed`、`align`、`sortable`、`filters`、`filterMethod`、`children`
- 原生 `formatter`
- Pro 扩展：`render(scope)`、`hidden`

渲染优先级：`render(scope)` > `formatter`。

数据源语义统一为 `data`，不再对外支持 `dataSource`。

## ProForm 组件键名

`component` 使用 Element 风格键名，例如：

- `input`（可配合 `type: 'textarea' | 'password'`）
- `input-number`
- `autocomplete`
- `select` / `cascader`
- `date-picker`（可配合 `type: 'date' | 'dates' | 'daterange' | 'datetimerange'` 等）
- `time-picker` / `time-select`
- `checkbox-group` / `radio-group`
- `switch` / `slider` / `tree-select` / `transfer`

默认 `modelProp` 为 `modelValue`。

## Peer Dependencies

- `vue` `^3.5.0`
- `element-plus` `^2.13.6`
npm package: @qin-ui/naive-ui-pro
Description: 二次封装naive ui组件
Author: dufan3715
Latest version: 1.0.6

## naive-ui-pro

- [x] pro-form
- [x] pro-component-provider
- [ ] pro-table



#### 1. ProForm

> Naive-ui Form组件的封装，引用了Form、Grid、GridItem、FormItem、Input、Select、Switch等表单布局组件，接受formData和fields参数，采用递归组件的形式根据fields渲染对应表单组件，亦可渲染自定义组件

##### 1.1 example

```
<script lang="ts" setup>
import { ProForm, useForm } from '@qin-ui/naive-ui-pro';

const form = useForm({}, [
  { label: '用户名', key: 'username', component: 'input' },
  { label: '密码', key: 'password', component: 'input', type: 'password' },
  { label: '验证码', key: 'code', component: 'input-number' },
]);
</script>

<template>
  <ProForm :form="form" />
</template>
```

##### 1.2 api

+ **ProForm**（组件）
+ **useForm** （hook）



#### 2. ProComponentProvider

> 若需要修改Pro组件自定义初始配置，可通过此组件完成。

##### 2.1 example

```
<script lang="ts" setup>
import { ProForm, useForm } from '@qin-ui/naive-ui-pro';

const form = useForm({}, [
  { label: '用户名', key: 'username', component: 'input' },
  { label: '密码', key: 'password', component: 'input', type: 'password' },
  { label: '验证码', key: 'code', component: 'input-number' },
]);

const componentVars: ComponentVars = {
  proFormField: {
  	// 设置表单组件Input的初始化props中最大输入长度限制为100个字符
    input: { maxlength: 100 },
    // 设置表单组件Input中textarea的初始化props中最大输入长度限制为1000个字符
    'input.textarea': { maxlength: 1000 },
    // 设置表单组件InputNumber的初始化props中最大值为9
    'input-number': { max: 9 },
  },
};
</script>

<template>
	<ProComponentProvider :component-vars="componentVars">
  	<ProForm :form="form" />
  </ProComponentProvider>
</template>
```
npm package: @qindj/schema-builder
Description: 通过 JSON Schema 生成标准 Form，常用于自定义搭建配置界面生成
Latest version: 1.0.0-alpha.20

## 如何使用

### 安装

```bash
npm i @xrenders/schema-builder
```

### 代码演示

```jsx
/**
 * transform: true
 * defaultShowCode: true
 */
import React from 'react';
import SchemaBuilder from '@xrenders/schema-builder';

const defaultValue = {
  type: 'object',
  properties: {
    inputName: {
      title: '简单输入框',
      type: 'string',
    },
  },
};

const Demo = () => {
  return (
    <div style={{ height: '80vh' }}>
      <SchemaBuilder defaultValue={defaultValue} />
    </div>
  );
};

export default Demo;
```
npm package: @qindy/orange-ui
Description: A react library developed with dumi
Latest version: 1.0.1

# orange-ui

[![NPM version](https://img.shields.io/npm/v/orange-ui.svg?style=flat)](https://npmjs.org/package/orange-ui)
[![NPM downloads](http://img.shields.io/npm/dm/orange-ui.svg?style=flat)](https://npmjs.org/package/orange-ui)

A react library developed with dumi

## Usage

TODO

## Options

TODO

## Development

```bash
# install dependencies
$ pnpm install

# develop library by docs demo
$ pnpm start

# build library source code
$ pnpm run build

# build library source code in watch mode
$ pnpm run build:watch

# build docs
$ pnpm run docs:build

# Locally preview the production build.
$ pnpm run docs:preview

# check your project for potential problems
$ pnpm run doctor
```

## LICENSE

MIT