open-index/open-npm huggingface dataset:
npm package: @huajiefu/custom-utils
Description: pure-admin-utils-docs
Author: zhangjun
Latest version: 0.0.1

<br>
<p align="center">
  <a href="https://pure-admin-utils.netlify.app" target="_blank">
    <img src="https://xiaoxian521.github.io/hyperlink/img/pureadmin-utils.png" alt="pure-admin-utils" width="220" />
  </a>
</p>

<p align="center">
  pure-admin-utils 保姆级文档
</p>

<p align="center">
  采用 <a href="https://vitepress.dev/" target="_blank">vitepress</a> 和 <a href="https://www.naiveui.com/zh-CN/"
    target="_blank">naive-ui</a> 搭配编写
</p>

## 👀 预览

[查看文档](https://pure-admin-utils.netlify.app)

## 📡 安装依赖

```
pnpm install
```

## 🚀 运行

```
pnpm dev
```

## 🕋 打包

```
pnpm build
```
npm package: @huajiefu/descriptions
Description: 自定义descriptions组件
Author: 张俊
Latest version: 0.0.2

<h1 align="center">@huajiefu/descriptions</h1>
<p align="center">二次封装element-plus的Descriptions，提供灵活的配置项</p>

<p align="center">
<a href="https://www.npmjs.com/package/@pureadmin/descriptions" target="__blank"><img src="https://img.shields.io/npm/v/@pureadmin/descriptions?color=a1b858&label=" alt="NPM version"></a>
<a href="https://www.npmjs.com/package/@pureadmin/descriptions" target="__blank"><img alt="NPM Downloads" src="https://img.shields.io/npm/dm/@pureadmin/descriptions?color=50a36f&label="></a>
</p>

简体中文 | [English](./README.en-US.md)

- [预览地址](https://pure-admin.github.io/pure-admin-descriptions)

## 🤔 开发初衷

- `element-plus` [Descriptions](https://element-plus.org/zh-CN/component/descriptions.html#descriptions-item-%E5%B1%9E%E6%80%A7) 的`Descriptions Item`属性目前只能写在`<template></template>`模版里，这样不是很灵活，如果描述列表的`Item`足够多，代码写、看起来很臃肿，于是我开发了这个库，让我们一起探索吧

## 🚀 特性

- 🦾 **灵活度高**: 使用`tsx`语法编写，保证类型的同时，给开发者提供了更灵活的写法，给使用者提供了更方便的配置
- ⚡ **完全可摇树**: 自带 Tree-shaking，只对引入的代码进行打包
- 🫶 **代码零侵入**: 保持`element-plus` [Descriptions](https://element-plus.org/zh-CN/component/descriptions.html) 所有属性、插槽的同时，提供更灵活的配置
- ⚓ **代码提交前校验**: 使用 [husky](https://typicode.github.io/husky/#/) 对提交代码前进行规则校验，强制规范开发流程，防止开发失误

## 📦 安装

```bash
npm install @pureadmin/descriptions
or
pnpm add @pureadmin/descriptions
```

## 🦄 用法

### 局部注册（单文件）

```ts
import { PureDescriptions } from "@pureadmin/descriptions";

<pure-descriptions :data="data" :columns="columns"></pure-descriptions>
```

### 全局注册（main.ts）

```ts
import { createApp } from "vue";
import App from "./App.vue";

import PureDescriptions from "@pureadmin/descriptions";

const app = createApp(App);

app.use(PureDescriptions).mount("#app");
```

[点击查看具体用法](https://github.com/pure-admin/pure-admin-descriptions/blob/main/src/App.vue)

## Volar 支持

- 如果您在使用 `Volar`，那么可以在 tsconfig.json 中配置 compilerOptions.types 来指定全局组件类型（尤其是全局注册时要想获得类型提示就需要加上下面配置）

```js
// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["@pureadmin/descriptions/volar"]
  }
}
```

## 许可证

[MIT © xiaoxian521-latest](./LICENSE)
npm package: @huajiefu/table
Description: 二次封装element-plus的Table，提供灵活的配置项
Author: zhangjun
Latest version: 0.0.2

<h1 align="center">@huajiefu/table</h1>
<p align="center">二次封装element-plus的Table，提供灵活的配置项</p>

<p align="center">
<a href="https://www.npmjs.com/package/@pureadmin/table" target="__blank"><img src="https://img.shields.io/npm/v/@pureadmin/table?color=a1b858&label=" alt="NPM version"></a>
<a href="https://www.npmjs.com/package/@pureadmin/table" target="__blank"><img alt="NPM Downloads" src="https://img.shields.io/npm/dm/@pureadmin/table?color=50a36f&label="></a>
</p>

简体中文 | [English](./README.en-US.md)

[预览地址](https://pure-admin.github.io/pure-admin-table/)  
[更多示例，基本所有的用法这里都有](https://pure-admin.github.io/vue-pure-admin/#/table/index?username=sso&roles=admin&accessToken=eyJhbGciOiJIUzUxMiJ9.admin)

## 🤔 开发初衷

`element-plus` [Table](https://element-plus.org/zh-CN/component/table.html#table-column-%E5%B1%9E%E6%80%A7) 的`Table-column`属性目前只能写在`<template></template>`模版里，这样不是很灵活，如果表格的`column`足够多，代码写、看起来很臃肿，但`element-plus` [Virtualized Table](https://element-plus.org/zh-CN/component/table-v2.html) 可配置性就很高，为了保持统一，我将`Table`二次封装并沿用了`cellRenderer`、`headerRenderer`这两个自定义渲染器，内置了可通过配置渲染的分页组件，当然还有一些额外的属性，让我们一起探索吧

## 🚀 特性

🦾 **灵活度高、强类型**: 使用`TSX`语法编写，拥有强大的类型推导提示和灵活、方便的配置  
⚡ **完全可摇树**: 自带`Tree-Shaking`，只对引入的代码进行打包  
🫶 **代码零侵入**: 保持`Element-Plus` [Table](https://element-plus.org/zh-CN/component/table.html) 的所有属性、插槽、事件、方法的同时，提供更灵活的配置，而且还内置了可通过配置渲染的分页组件和加载动画以及表格自适应内容区高度等，当然 [自定义命名空间](https://element-plus.org/zh-CN/guide/namespace.html) 也不会受到任何影响  
🌍 **国际化友好**: 内置三种精简的国际化（简体中文：`zhCn`、繁体中文：`zhTw`、英语: `en`），提供三种国际化配置方法，使其配置更灵活、方便。当然也可以结合 [vue-i18n](https://vue-i18n.intlify.dev/) ，让表格自适应国际化语言  
💚 **SSR友好**: 完全兼容`Nuxt3`  
📡 **可通过`CDN`引用**: 同时支持`jsdelivr`和`unpkg`

## 📦 安装

```bash
npm install @pureadmin/table
# or
yarn add @pureadmin/table
# or
pnpm add @pureadmin/table
```

## 📡 `CDN`

```html
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@pureadmin/table/dist/style.css" />
<script src="//cdn.jsdelivr.net/npm/@pureadmin/table"></script>
<!-- or -->
<link rel="stylesheet" href="//unpkg.com/@pureadmin/table/dist/style.css" />
<script src="//unpkg.com/@pureadmin/table"></script>
```

## ⚙️ 用法

### 局部注册（单文件）

```ts
import "@pureadmin/table/dist/style.css";
import { PureTable } from "@pureadmin/table";

<pure-table locale="zhCn" :data="dataList" :columns="columns" :pagination="pagination"></pure-table>
```

### 全局注册（main.ts）

```ts
import { createApp } from "vue";
import App from "./App.vue";

import "@pureadmin/table/dist/style.css";
import PureTable from "@pureadmin/table";

const app = createApp(App);

app.use(PureTable, { locale: "zhCn" }).mount("#app");
```

[点击查看按需、全局、自定义命名空间、`nuxt3`以及`Html`文件引入的用法示例](https://github.com/pure-admin/pure-admin-table/tree/main/playgrounds)

## 🔮 `Volar`支持

如果您在使用 `Volar`，那么可以在 `tsconfig.json` 中配置 `compilerOptions.types` 来指定全局组件类型（尤其是全局注册时要想获得类型提示就需要加上下面配置）

```js
// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["@pureadmin/table/volar"]
  }
}
```

## 许可证

[MIT © 2022-present, pure-admin](./LICENSE)