easy-elplus 1.0.1 → 1.2.0

package/docs/demo/table-basic.vue

@@ -1,177 +0,0 @@
-<template>
-  <div class="table-demo">
-    <easy-table
-      ref="tableRef"
-      :table-data="tableData"
-      :columns="columns"
-      :operates="operates"
-      :total="total"
-      v-model:page="page"
-      v-model:limit="limit"
-      :options="{
-        border: true,
-        stripe: true,
-        highlightCurrentRow: true
-      }"
-      :auto-scroll="false"
-      pagination-position="right"
-      @handleSelectionChange="handleSelectionChange"
-      @pagination="onPagination"
-    >
-      <!-- 自定义表头 -->
-      <template #header-name="{ column }">
-        <el-tag effect="dark" size="small">{{ column.label }}</el-tag>
-      </template>
-
-      <!-- 自定义内容 -->
-      <template #default-name="{ row }">
-        <span style="font-weight: bold; color: #67c23a">{{ row.name }}</span>
-      </template>
-    </easy-table>
-
-    <div v-if="selectedRows.length" class="selection-info">
-      <strong>已选择：</strong>{{ selectedRows.length }} 条数据
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { h, ref, computed } from "vue"
-import { ElTag, ElMessage } from "element-plus"
-import { EasyTable } from "easy-elplus"
-import { Edit, Delete, View } from "@element-plus/icons-vue"
-
-const selectedRows = ref([])
-
-// 模拟数据
-const tableData = ref([
-  {
-    date: "2024-01-15",
-    name: "张三",
-    gender: 1,
-    age: 28,
-    city: "北京",
-    status: 1,
-    price: 1299
-  },
-  {
-    date: "2024-01-16",
-    name: "李四",
-    gender: 0,
-    age: 32,
-    city: "上海",
-    status: 0,
-    price: 999
-  },
-  {
-    date: "2024-01-17",
-    name: "王五",
-    gender: 1,
-    age: 25,
-    city: "深圳",
-    status: 1,
-    price: 1599
-  },
-  {
-    date: "2024-01-18",
-    name: "赵六",
-    gender: 0,
-    age: 30,
-    city: "杭州",
-    status: 1,
-    price: 899
-  }
-])
-
-const page = ref(1)
-const limit = ref(10)
-const total = ref(30)
-
-// 列配置
-const columns = computed(() => [
-  { type: "selection", width: 50 },
-  { type: "index", label: "序号", width: 60, align: "center" },
-  { prop: "date", label: "日期", width: 120 },
-  { prop: "name", label: "姓名", width: 120, key: "name" },
-  {
-    prop: "gender",
-    label: "性别",
-    width: 80,
-    render: ({ row }) =>
-      h(ElTag, { type: row.gender ? "primary" : "danger", size: "small" }, () => (row.gender ? "男" : "女"))
-  },
-  {
-    prop: "age",
-    label: "年龄",
-    width: 80,
-    render: ({ row }) => `<b style="color: #409eff">${row.age} 岁</b>`
-  },
-  {
-    prop: "status",
-    label: "状态",
-    width: 100,
-    formatter: row => (row.status ? "<span style='color: green'>正常</span>" : "<span style='color: red'>禁用</span>")
-  },
-  { prop: "city", label: "城市", width: 100 },
-  {
-    prop: "price",
-    label: "价格",
-    formatter: row => `¥ ${row.price.toFixed(2)}`
-  }
-])
-
-// 操作按钮配置
-const operates = {
-  width: 200,
-  fixed: "right",
-  list: [
-    {
-      label: "编辑",
-      type: "primary",
-      icon: Edit,
-      method: (row, index) => {
-        ElMessage.info(`编辑第 ${index + 1} 行: ${row.name}`)
-      }
-    },
-    {
-      label: "查看",
-      type: "success",
-      icon: View,
-      show: row => row.status === 1,
-      method: row => {
-        ElMessage.success(`查看: ${row.name}`)
-      }
-    },
-    {
-      label: "删除",
-      type: "danger",
-      icon: Delete,
-      confirm: true,
-      method: row => {
-        ElMessage.error(`删除: ${row.name}`)
-      }
-    }
-  ]
-}
-
-// 事件处理
-const handleSelectionChange = val => {
-  selectedRows.value = val
-}
-
-const onPagination = ({ page: p, limit: l }) => {
-  ElMessage.success(`分页变化: 第${p}页, 每页${l}条`)
-}
-</script>
-
-<style scoped>
-.selection-info {
-  margin-top: 15px;
-  padding: 10px;
-  background: #f0f9ff;
-  border: 1px solid #409eff;
-  border-radius: 4px;
-  color: #409eff;
-  font-size: 14px;
-}
-</style>

package/docs/guide/index.md

@@ -1,52 +0,0 @@
-# 介绍
-
-## 技术交流群 711368818
-
-<img src="../public/qq.jpg"  width="200" />
-
-## 搭配使用
-
-- [vue3表单渲染器](https://jiayc4215.github.io/form-render/) vue3表单渲染器
-
-## easy-elplus 是什么？
-
-easy-elplus 是一个基于 [Element Plus](https://element-plus.org/) 的增强组件库，旨在简化开发流程，提升开发效率。
-
-## 特性
-
-- 🚀 **开箱即用** - 基于 Element Plus 封装，提供更便捷的 API
-- 📦 **按需引入** - 支持 Tree-shaking，减小打包体积
-- 🎨 **高度可定制** - 灵活的配置和插槽系统
-
-## 组件列表
-
-目前 easy-elplus 提供以下组件：
-
-### 基础组件
-
-- **Button** - 增强的按钮组件，支持加载状态等
-- **Dialog** - 对话框组件，简化使用方式
-
-### 数据展示
-
-- **Table** - 表格组件，支持多级表头、选择、操作列等
-- **Descriptions** - 描述列表组件，支持分组和动态渲染
-
-### 表单组件
-
-- **ImageUpload** - 图片上传组件
-- **FileUpload** - 文件上传组件
-
-## 为什么选择 easy-elplus？
-
-Element Plus 是一个优秀的 Vue 3 组件库，但在实际业务开发中，我们经常需要对组件进行二次封装以满足特定需求。easy-elplus 正是基于这一需求诞生的，它提供了：
-
-1. **更简洁的 API** - 减少重复配置，提高开发效率
-2. **业务场景优化** - 针对常见业务场景进行优化
-3. **统一的使用体验** - 保持一致的 API 设计风格
-
-## 下一步
-
-- [快速开始](/guide/quickstart) - 了解如何在项目中使用 easy-elplus
-- [安装](/guide/installation) - 查看详细的安装说明
-- [组件示例](/components/button) - 浏览组件文档和示例

package/docs/guide/installation.md

@@ -1,86 +0,0 @@
-# 安装
-
-## 环境要求
-
-- Node.js >= 16.x
-- Vue >= 3.x
-- Element Plus >= 2.x
-
-## 使用包管理器
-
-我们建议使用包管理器（如 npm、yarn 或 pnpm）安装 easy-elplus。
-
-::: code-group
-
-```bash [npm]
-npm install easy-elplus
-```
-
-```bash [yarn]
-yarn add easy-elplus
-```
-
-```bash [pnpm]
-pnpm add easy-elplus
-```
-
-:::
-
-## 安装 Element Plus
-
-easy-elplus 是基于 Element Plus 构建的，因此你需要先安装 Element Plus：
-
-::: code-group
-
-```bash [npm]
-npm install element-plus
-```
-
-```bash [yarn]
-yarn add element-plus
-```
-
-```bash [pnpm]
-pnpm add element-plus
-```
-
-:::
-
-## 从源码构建
-
-如果你想从源码构建 easy-elplus：
-
-```bash
-# 克隆仓库
-git clone https://github.com/jiayc4215/easy-elplus.git
-
-# 进入项目目录
-cd easy-elplus
-
-# 安装依赖
-pnpm install
-
-# 构建项目
-pnpm build
-```
-
-构建完成后，产物将输出到 `dist` 目录。
-
-## 开发环境
-
-如果你想参与 easy-elplus 的开发：
-
-```bash
-# 安装依赖
-pnpm install
-
-# 启动开发服务器
-pnpm dev
-
-# 启动文档服务器
-pnpm docs:dev
-```
-
-## 下一步
-
-安装完成后，请查看 [快速开始](/guide/quickstart) 了解如何在项目中使用 easy-elplus。

package/docs/guide/quickstart.md

@@ -1,75 +0,0 @@
-# 快速开始
-
-本节将介绍如何在项目中使用 easy-elplus。
-
-## 前置要求
-
-- Node.js 16.x 或更高版本
-- Vue 3.x
-- Element Plus 2.x
-
-## 完整引入
-
-如果你对打包体积不是很在意，可以完整引入所有组件。
-
-```javascript
-// main.js
-import { createApp } from "vue"
-import ElementPlus from "element-plus"
-import "element-plus/dist/index.css"
-import EasyElPlus from "easy-elplus"
-import App from "./App.vue"
-
-const app = createApp(App)
-
-app.use(ElementPlus)
-app.use(EasyElPlus)
-app.mount("#app")
-```
-
-## 按需引入
-
-easy-elplus 支持按需引入，可以减小打包体积。
-
-### 手动引入
-
-```javascript
-// main.js
-import { createApp } from "vue"
-import { EasyButton, EasyDialog } from "easy-elplus"
-import App from "./App.vue"
-
-const app = createApp(App)
-
-app.component("EasyButton", EasyButton)
-app.component("EasyDialog", EasyDialog)
-app.mount("#app")
-```
-
-### 在组件中使用
-
-```vue
-<template>
-  <div>
-    <easy-button type="primary" :loading="loading"> 提交 </easy-button>
-  </div>
-</template>
-
-<script setup>
-import { ref } from "vue"
-import { EasyButton } from "easy-elplus"
-
-const loading = ref(false)
-</script>
-```
-
-## 开始使用
-
-现在你可以开始使用 easy-elplus 了！查看各个组件的文档了解更多用法：
-
-- [Button 按钮](/components/button)
-- [Dialog 对话框](/components/dialog)
-- [Table 表格](/components/table)
-- [Descriptions 描述列表](/components/descriptions)
-- [ImageUpload 图片上传](/components/image-upload)
-- [FileUpload 文件上传](/components/file-upload)

package/docs/index.md

@@ -1,28 +0,0 @@
----
-# https://vitepress.dev/reference/default-theme-home-page
-layout: home
-
-hero:
-  name: "easy-elplus"
-  text: "基于 Element Plus 的增强组件库"
-  tagline: 简化开发，提升效率
-  image:
-    src: /logo.png
-    alt: easy-elplus
-
-  actions:
-    - theme: brand
-      text: 快速开始
-      link: /guide/
-    - theme: alt
-      text: 在 GitHub 上查看
-      link: "https://github.com/jiayc4215/easy-elplus"
-
-features:
-  - title: 📦 开箱即用
-    details: 基于 Element Plus 封装，提供更便捷的 API 和更丰富的功能
-  - title: 🎨 高度可定制
-    details: 支持灵活的配置和插槽，满足各种业务场景需求
-  - title: 🌈 多种组件
-    details: 提供多种组件，满足各种业务场景需求，包括按钮、对话框、表格、描述列表、图片上传、文件上传等
----

package/docs/markdown-examples.md

@@ -1,85 +0,0 @@
-# Markdown Extension Examples
-
-This page demonstrates some of the built-in markdown extensions provided by VitePress.
-
-## Syntax Highlighting
-
-VitePress provides Syntax Highlighting powered by [Shiki](https://github.com/shikijs/shiki), with additional features like line-highlighting:
-
-**Input**
-
-````md
-```js{4}
-export default {
-  data () {
-    return {
-      msg: 'Highlighted!'
-    }
-  }
-}
-```
-````
-
-**Output**
-
-```js{4}
-export default {
-  data () {
-    return {
-      msg: 'Highlighted!'
-    }
-  }
-}
-```
-
-## Custom Containers
-
-**Input**
-
-```md
-::: info
-This is an info box.
-:::
-
-::: tip
-This is a tip.
-:::
-
-::: warning
-This is a warning.
-:::
-
-::: danger
-This is a dangerous warning.
-:::
-
-::: details
-This is a details block.
-:::
-```
-
-**Output**
-
-::: info
-This is an info box.
-:::
-
-::: tip
-This is a tip.
-:::
-
-::: warning
-This is a warning.
-:::
-
-::: danger
-This is a dangerous warning.
-:::
-
-::: details
-This is a details block.
-:::
-
-## More
-
-Check out the documentation for the [full list of markdown extensions](https://vitepress.dev/guide/markdown).

package/docs/package.json

@@ -1,23 +0,0 @@
-{
-  "name": "@easy-elplus/docs",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "docs:dev": "vitepress dev",
-    "docs:build": "vitepress build",
-    "docs:preview": "vitepress preview"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "packageManager": "pnpm@10.28.2",
-  "devDependencies": {
-    "vitepress": "2.0.0-alpha.16",
-    "element-plus": "^2.13.2",
-    "@element-plus/icons-vue": "^2.3.2",
-    "@vitepress-demo-preview/component": "^2.6.1",
-    "@vitepress-demo-preview/plugin": "^1.4.1"
-  }
-}

package/eslint.config.js

@@ -1 +0,0 @@
-export { default } from "@easy-elplus/eslint-config"

package/internal/build/copyFiles.js

@@ -1,26 +0,0 @@
-import { copyFile, mkdir } from "fs/promises"
-import { fileURLToPath } from "url"
-import { resolve, dirname, join } from "path"
-
-const __filenameNew = fileURLToPath(import.meta.url)
-const __dirnameNew = dirname(__filenameNew)
-const projRoot = resolve(__dirnameNew, "..", "..")
-
-const pkgRoot = resolve(projRoot, "packages")
-const epRoot = resolve(pkgRoot, "easy-elplus")
-const epPackage = resolve(epRoot, "package.json")
-
-/** `/dist` */
-const buildOutput = resolve(projRoot, "dist")
-/** `/dist/easy-elplus` */
-const epOutput = resolve(buildOutput, "easy-elplus")
-
-// 复制
-export const copyFiles = async () => {
-  await mkdir(epOutput, { recursive: true })
-  await copyFile(epPackage, join(epOutput, "package.json"))
-  await copyFile(epPackage, join(epOutput, "README.md"))
-  await copyFile(epPackage, join(epOutput, "LICENSE"))
-}
-
-// copyFiles()

package/internal/build/full-bundle.js

@@ -1,48 +0,0 @@
-import { rollup } from "rollup"
-import vue from "@vitejs/plugin-vue"
-import postcss from "rollup-plugin-postcss"
-import { nodeResolve } from "@rollup/plugin-node-resolve"
-import { fileURLToPath } from "url"
-import { resolve, dirname } from "path"
-
-const __filenameNew = fileURLToPath(import.meta.url)
-const __dirnameNew = dirname(__filenameNew)
-// 确定根目录，目前执行目录是在 ./internal/build，所以需要跳出两层
-const projRoot = resolve(__dirnameNew, "..", "..")
-// 拼接 ./packages 目录路径
-const pkgRoot = resolve(projRoot, "packages")
-// 拼接 ./packages/ easy-elplus 目录路径
-const epRoot = resolve(pkgRoot, "easy-elplus")
-
-// 拼接打包根目录
-const buildOutput = resolve(projRoot, "dist")
-// 拼接包目录
-const epOutput = resolve(buildOutput, "easy-elplus")
-
-// 全量打包任务函数
-export const buildFullEntry = async () => {
-  const bundle = await rollup({
-    input: resolve(epRoot, "index.js"), // 配置入口文件
-    plugins: [
-      // 配置插件
-      vue(),
-      nodeResolve(),
-      postcss()
-    ],
-    // 排除不进行打包的 npm 包，例如 Vue，以便减少包的体积
-    external: ["vue", "element-plus", "@element-plus/icons-vue"]
-  })
-  // 配置输出文件格式
-  bundle.write({
-    format: "umd",
-    file: resolve(epOutput, "dist/index.full.js"),
-    name: "EasyElPlus",
-    exports: "named", // 使用具名导出，避免混合导出警告
-    globals: {
-      vue: "Vue",
-      "element-plus": "ElementPlus",
-      "@element-plus/icons-vue": "ElementPlusIconsVue"
-    }
-  })
-}
-// buildFullEntry()

package/internal/build/gulpfile.js

@@ -1,6 +0,0 @@
-import { parallel, series } from "gulp"
-import { buildFullEntry } from "./full-bundle.js"
-import { buildModules } from "./modules.js"
-import { copyFiles } from "./copyFiles.js"
-
-export default series(parallel(buildFullEntry, buildModules), copyFiles)

package/internal/build/modules.js

@@ -1,64 +0,0 @@
-import { fileURLToPath } from "url"
-import { dirname, resolve } from "path"
-import { rollup } from "rollup"
-import glob from "fast-glob"
-import vue from "@vitejs/plugin-vue"
-import postcss from "rollup-plugin-postcss"
-
-import { nodeResolve } from "@rollup/plugin-node-resolve"
-
-const __filenameNew = fileURLToPath(import.meta.url)
-const __dirnameNew = dirname(__filenameNew)
-
-const projRoot = resolve(__dirnameNew, "..", "..")
-const pkgRoot = resolve(projRoot, "packages")
-
-const buildOutput = resolve(projRoot, "dist")
-const epOutput = resolve(buildOutput, "easy-elplus")
-const epRoot = resolve(pkgRoot, "easy-elplus")
-
-// 排除 node_modules 目录
-const excludeFiles = files => {
-  const excludes = ["node_modules"]
-  return files.filter(path => !excludes.some(exclude => path.includes(exclude)))
-}
-
-// 模块化打包任务函数
-export const buildModules = async () => {
-  const input = excludeFiles(
-    await glob("**/*.{js,ts,vue}", {
-      cwd: epRoot,
-      absolute: true, // 返回绝对路径
-      onlyFiles: true // 只返回文件的路径
-    })
-  )
-  const bundle = await rollup({
-    input, // 配置入口文件
-    plugins: [
-      // 配置插件
-      vue(),
-      nodeResolve(),
-      postcss()
-    ],
-    // 排除不进行打包的 npm 包，例如 Vue，以便减少包的体积
-    external: ["vue", "element-plus", "@element-plus/icons-vue"]
-  })
-  // 配置输出文件格式
-  bundle.write({
-    format: "esm", // 配置输出格式
-    dir: resolve(epOutput, "es"), // 配置输出目录
-    exports: "named", // 使用具名导出，避免混合导出警告
-    preserveModules: true, // 该选项将使用原始模块名作为文件名，为所有模块创建单独的 chunk
-    preserveModulesRoot: epRoot,
-    entryFileNames: `[name].mjs` // [name]：入口文件的文件名（不包含扩展名），也就是生产 .mjs 结尾的文件
-  })
-  bundle.write({
-    format: "cjs", // 配置输出格式
-    dir: resolve(epOutput, "lib"), // 配置输出目录
-    exports: "named", // 使用具名导出，避免混合导出警告
-    preserveModules: true, // 该选项将使用原始模块名作为文件名，为所有模块创建单独的 chunk
-    preserveModulesRoot: epRoot,
-    entryFileNames: `[name].js` // [name]：入口文件的文件名（不包含扩展名），也就是生产 .js 结尾的文件
-  })
-}
-// buildModules()