easy-elplus 1.0.1 → 1.2.0

package/docs/components/image-upload.md

@@ -1,43 +0,0 @@
----
-title: ImageUpload 图片上传
-description: 图片上传组件,支持预览、删除等功能
----
-
-# ImageUpload 图片上传
-
-EasyImageUpload 是一个基于 Element Plus Upload 组件封装的图片上传组件，专门针对图片上传场景进行了优化。
-
-## 在线演示
-
-<preview path="../demo/image-upload-basic.vue" title="ImageUpload 基础示例" description="展示图片上传的基本功能，包括预览和自动解析"></preview>
-
-## API
-
-### Attributes
-
-| 参数          | 说明                                                                           | 类型                      | 默认值                                              |
-| ------------- | ------------------------------------------------------------------------------ | ------------------------- | --------------------------------------------------- |
-| v-model       | 绑定值，支持逗号分隔的字符串、对象或数组                                       | `String / Object / Array` | —                                                   |
-| action        | 上传地址（必传）                                                               | `String`                  | —                                                   |
-| limit         | 最大上传数量                                                                   | `Number`                  | 5                                                   |
-| file-size     | 图片大小限制 (MB)                                                              | `Number`                  | 5                                                   |
-| file-type     | 允许的图片类型后缀                                                             | `Array`                   | `["png", "jpg", "jpeg"]`                            |
-| is-show-tip   | 是否显示上传提示信息                                                           | `Boolean`                 | true                                                |
-| headers       | 设置上传的请求头部                                                             | `Object`                  | `{}`                                                |
-| base-url      | 基础路径。上传成功后保存时会尝试去除该前缀；回显时如果不是绝对路径会拼接该前缀 | `String`                  | ""                                                  |
-| check-success | 自定义成功校验函数，接受响应对象作为参数                                       | `Function`                | `res => res.code === 200 \|\| res.success === true` |
-| response-path | 响应中图片地址所在的路径，支持深层嵌套（如 `data.url`）                        | `String`                  | "data"                                              |
-| error-field   | 响应中错误消息所在的路径                                                       | `String`                  | "msg"                                               |
-
-### Events
-
-| 事件名            | 说明             | 回调参数          |
-| ----------------- | ---------------- | ----------------- |
-| update:modelValue | 绑定值变化时触发 | `(value: string)` |
-
-## 特性说明
-
-1. **自动预览**: 点击上传后的图片缩略图，可以查看大图预览。
-2. **隐藏上传按钮**: 当上传图片数量达到 `limit` 限制时，会自动隐藏上传按钮。
-3. **格式校验**: 默认只允许 `png`, `jpg`, `jpeg` 格式。
-4. **路径处理**: 配合 `base-url` 可以灵活处理后端返回的相对路径。

package/docs/components/table.md

@@ -1,113 +0,0 @@
----
-title: Table 表格
-description: 增强的表格组件，支持多级表头、操作列、渲染函数等
----
-
-# Table 表格
-
-EasyTable 是基于 Element Plus Table 组件封装的增强版本，提供了更便捷的配置方式和丰富的功能。
-
-## 在线演示
-
-<preview path="../demo/table-basic.vue" title="Table 基础示例" description="展示 Table 组件的各种用法"></preview>
-
-## API
-
-### Attributes
-
-| 参数                  | 说明                        | 类型    | 默认值                                                        |
-| :-------------------- | :-------------------------- | :------ | :------------------------------------------------------------ |
-| table-data            | 表格数据                    | Array   | []                                                            |
-| columns               | 列配置                      | Array   | []                                                            |
-| operates              | 操作列配置                  | Object  | —                                                             |
-| total                 | 总条数                      | Number  | 0                                                             |
-| page / v-model:page   | 当前页码                    | Number  | 1                                                             |
-| limit / v-model:limit | 每页条数                    | Number  | 20                                                            |
-| options               | Element Plus Table 的配置项 | Object  | `{ stripe: false, highlightCurrentRow: false, border: true }` |
-| pagination-position   | 分页位置                    | String  | 'right'                                                       |
-| hidden                | 是否隐藏分页                | Boolean | false                                                         |
-| page-sizes            | 每页条数选项                | Array   | [10, 20, 30, 50]                                              |
-| pager-count           | 最大页码按钮数              | Number  | 7                                                             |
-| layout                | 分页布局                    | String  | 'total, sizes, prev, pager, next, jumper'                     |
-| background            | 是否为分页按钮添加背景色    | Boolean | true                                                          |
-| auto-scroll           | 分页变化时是否自动回顶      | Boolean | true                                                          |
-
----
-
-### Column 配置
-
-除下表所列参数外，还支持 [ElTableColumn](https://element-plus.org/zh-CN/component/table.html#table-column-attributes) 的所有属性。
-
-| 参数      | 说明                                | 类型               | 默认值 |
-| :-------- | :---------------------------------- | :----------------- | :----- |
-| prop      | 字段名                              | String             | —      |
-| label     | 列标题                              | String             | —      |
-| width     | 列宽度                              | Number / String    | —      |
-| align     | 对齐方式 (left / center / right)    | String             | 'left' |
-| fixed     | 固定列 (left / right)               | String / Boolean   | —      |
-| type      | 列类型 (selection / index)          | String             | —      |
-| render    | 渲染函数 (支持 VNode / HTML 字符串) | Function / String  | —      |
-| formatter | 格式化函数 (支持 HTML 字符串)       | Function           | —      |
-| key       | 插槽标识 (默认使用 prop)            | String             | —      |
-| show      | 是否显示                            | Boolean / Function | true   |
-
----
-
-### Operates（操作列配置）
-
-| 参数  | 说明       | 类型            | 默认值  |
-| :---- | :--------- | :-------------- | :------ |
-| width | 操作列宽度 | Number / String | —       |
-| fixed | 是否固定   | String          | 'right' |
-| list  | 按钮列表   | Array           | []      |
-
----
-
-### Button 配置
-
-除下表所列参数外，还支持 [ElButton](https://element-plus.org/zh-CN/component/button.html#button-attributes) 的所有属性。
-
-| 参数   | 说明     | 类型               | 默认值    |
-| :----- | :------- | :----------------- | :-------- |
-| label  | 按钮文字 | String             | —         |
-| type   | 按钮类型 | String             | 'primary' |
-| size   | 按钮尺寸 | String             | 'small'   |
-| icon   | 图标组件 | Component          | —         |
-| method | 点击回调 | Function           | —         |
-| show   | 是否显示 | Boolean / Function | true      |
-
----
-
-### Events
-
-| 事件名                | 说明       | 回调参数                  |
-| :-------------------- | :--------- | :------------------------ |
-| pagination            | 分页变化   | `{ page, limit }`         |
-| handleSelectionChange | 选择项变化 | `selection`               |
-| sortChange            | 排序变化   | `{ column, prop, order }` |
-
----
-
-### Slots
-
-| 插槽名        | 说明       | 参数                      |
-| :------------ | :--------- | :------------------------ |
-| header-[key]  | 自定义表头 | `{ column }`              |
-| default-[key] | 自定义内容 | `{ row, column, $index }` |
-
----
-
-### Methods
-
-| 方法名    | 说明              | 参数 |
-| :-------- | :---------------- | :--- |
-| iTableRef | 获取 ElTable 实例 | —    |
-
----
-
-## 特性说明
-
-1. **自动分页**：内置分页组件，支持双向绑定。
-2. **灵活渲染**：支持 `render`、`formatter`、插槽多种方式。
-3. **操作列简化**：统一配置操作按钮，支持条件显示。
-4. **完全兼容**：完整保留 Element Plus Table 能力。

package/docs/contact-me/index.md

@@ -1,11 +0,0 @@
-# 联系我
-
-如果您在使用过程中遇到问题，可以通过扫描一下二维码加入QQ群或者添加我的QQ，我会第一时间为您解答，不仅限于 `el-form-renderer-vue3` 的问题，其他问题也可以一起交流。
-
-> 如QQ群二维码失效，请添加我的微信，我会拉您进群。
-
-<img src="/qq.jpg" width="300" style="margin-bottom: 30px">
-
-> 注意：提问问题请携带最小复现案例
-
-<img src="/wx.jpg" width="300">

package/docs/demo/DialogFormContent.vue

@@ -1,54 +0,0 @@
-<template>
-  <el-form ref="formRef" :model="formData" label-width="80px">
-    <el-form-item label="姓名" prop="name" :rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]">
-      <el-input v-model="formData.name" placeholder="请输入姓名"></el-input>
-    </el-form-item>
-    <el-form-item
-      label="邮箱"
-      prop="email"
-      :rules="[
-        { required: true, message: '请输入邮箱', trigger: 'blur' },
-        { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
-      ]"
-    >
-      <el-input v-model="formData.email" placeholder="请输入邮箱"></el-input>
-    </el-form-item>
-  </el-form>
-</template>
-
-<script setup>
-import { ref, reactive } from "vue"
-import { ElForm, ElFormItem, ElInput } from "element-plus"
-
-const formRef = ref(null)
-const formData = reactive({
-  name: "",
-  email: ""
-})
-
-// 暴露给外部的方法
-const validateForm = async () => {
-  if (!formRef.value) return
-  await formRef.value.validate()
-  return formData
-}
-
-const resetForm = () => {
-  if (!formRef.value) return
-  formRef.value.resetFields()
-}
-
-// 模拟一个内部业务方法
-const doSomethingInternal = () => {
-  console.log("组件内部方法被调用了", formData)
-  return "Internal Result"
-}
-
-defineExpose({
-  validateForm,
-  resetForm,
-  doSomethingInternal,
-  // 如果配合 EasyDialog 默认行为，可以暴露 submit 方法
-  submit: validateForm
-})
-</script>

package/docs/demo/button-basic.vue

@@ -1,48 +0,0 @@
-<template>
-  <div class="button-group">
-    <EasyButton @click="handleLongAsync">Default</EasyButton>
-    <EasyButton type="primary" @click="handleLongAsync">Primary</EasyButton>
-    <EasyButton type="success" @click="handleLongAsync">Success</EasyButton>
-    <EasyButton type="info" @click="handleLongAsync">Info</EasyButton>
-    <EasyButton type="warning" @click="handleLongAsync">Warning</EasyButton>
-    <EasyButton type="danger" @click="handleLongAsync">Danger</EasyButton>
-  </div>
-
-  <div v-if="message" class="message">
-    {{ message }}
-  </div>
-</template>
-
-<script setup>
-import { ref } from "vue"
-import { EasyButton } from "easy-elplus"
-
-const message = ref("")
-
-const handleLongAsync = async () => {
-  message.value = "异步操作开始..."
-  await new Promise(resolve => setTimeout(resolve, 3000))
-  message.value = "异步操作完成！"
-  setTimeout(() => {
-    message.value = ""
-  }, 2000)
-}
-</script>
-
-<style scoped>
-h3 {
-  margin: 20px 0 10px;
-  font-size: 16px;
-  color: #303133;
-}
-
-.message {
-  margin-top: 20px;
-  padding: 12px;
-  background: #f0f9ff;
-  border: 1px solid #409eff;
-  border-radius: 4px;
-  color: #409eff;
-  font-size: 14px;
-}
-</style>

package/docs/demo/descriptions-basic.vue

@@ -1,159 +0,0 @@
-<template>
-  <div class="descriptions-demo">
-    <h3>基础用法</h3>
-    <easy-descriptions :items="basicItems" v-model="formData" :column="2" border> </easy-descriptions>
-
-    <h3 style="margin-top: 30px">分组模式</h3>
-    <easy-descriptions :items="groupedItems" v-model="formData" border>
-      <template #gender>
-        <el-tag type="success" size="large">
-          {{ formData.gender == 1 ? "男" : "女" }}
-        </el-tag>
-      </template>
-    </easy-descriptions>
-
-    <div class="actions">
-      <el-button type="primary" @click="handleSubmit">提交数据</el-button>
-    </div>
-
-    <div v-if="submitResult" class="result">
-      <strong>提交的数据：</strong>
-      <pre>{{ submitResult }}</pre>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref } from "vue"
-import { EasyDescriptions } from "easy-elplus"
-import { ElMessage, ElButton } from "element-plus"
-
-const formData = ref({
-  username: "张三",
-  gender: 1,
-  age: 25,
-  tel: "18100000000",
-  email: "zhangsan@example.com",
-  address: "上海市普陀区金沙江路 1518 弄",
-  isVip: true,
-  vipLevel: "Gold",
-  remark: "这是一个备注信息"
-})
-
-const submitResult = ref("")
-
-// 基础配置
-const basicItems = [
-  {
-    label: "用户名",
-    value: {
-      id: "username",
-      components: "el-input",
-      props: {
-        placeholder: "请输入用户名"
-      }
-    }
-  },
-  {
-    label: "性别",
-    value: {
-      id: "gender",
-      components: "el-switch",
-      props: {
-        activeText: "男",
-        inactiveText: "女",
-        activeValue: 1,
-        inactiveValue: 0
-      }
-    }
-  },
-
-  { label: "年龄", value: "age", hidden: data => data.gender == 0 },
-  { label: "手机号", value: "tel" },
-  {
-    label: "邮箱",
-    value: {
-      id: "email",
-      components: "el-input",
-      props: {
-        placeholder: "请输入邮箱"
-      }
-    }
-  },
-  { label: "地址", value: "address", span: 2 }
-]
-
-// 分组配置
-const groupedItems = [
-  {
-    title: "基本信息",
-    column: 2,
-    items: [
-      { label: "用户名", value: "username" },
-      {
-        label: "性别",
-        value: "gender"
-      },
-      { label: "年龄", value: "age" },
-      { label: "手机号", value: "tel" }
-    ]
-  },
-  {
-    title: "联系方式",
-    column: 1,
-    items: [
-      { label: "邮箱", value: "email" },
-      { label: "地址", value: "address" }
-    ]
-  },
-  {
-    title: "VIP 信息",
-    hidden: data => !data.isVip,
-    column: 2,
-    items: [
-      { label: "VIP 等级", value: "vipLevel" },
-      {
-        label: "备注",
-        value: {
-          id: "remark",
-          components: "el-input",
-          props: {
-            type: "textarea",
-            rows: 3
-          }
-        },
-        span: 2
-      }
-    ]
-  }
-]
-
-const handleSubmit = () => {
-  submitResult.value = JSON.stringify(formData.value, null, 2)
-  ElMessage.success("提交成功")
-}
-</script>
-
-<style scoped>
-h3 {
-  margin: 20px 0 10px;
-  font-size: 16px;
-  color: #303133;
-}
-
-.result {
-  margin-top: 20px;
-  padding: 12px;
-  background: #f0f9ff;
-  border: 1px solid #409eff;
-  border-radius: 4px;
-  color: #409eff;
-  font-size: 14px;
-}
-
-.result pre {
-  margin-top: 8px;
-  font-size: 12px;
-  line-height: 1.5;
-}
-</style>

package/docs/demo/dialog-basic.vue

@@ -1,137 +0,0 @@
-<template>
-  <div class="dialog-demo">
-    <h3>基础用法</h3>
-    <div class="button-group">
-      <el-button @click="openSimple">纯文本弹窗</el-button>
-      <el-button type="success" @click="openForm">表单弹窗</el-button>
-    </div>
-
-    <h3>高级用法</h3>
-    <div class="button-group">
-      <el-button type="warning" @click="openCustomFooter">自定义页脚</el-button>
-      <el-button type="danger" @click="openBeforeClose">关闭前拦截</el-button>
-    </div>
-
-    <div v-if="result" class="result"><strong>操作结果：</strong>{{ result }}</div>
-  </div>
-</template>
-
-<script setup>
-import { h, ref } from "vue"
-import { EasyDialog } from "easy-elplus"
-import { ElButton, ElMessage, ElMessageBox } from "element-plus"
-import DialogFormContent from "./DialogFormContent.vue"
-
-const result = ref("")
-
-// 简单文本弹窗
-const openSimple = () => {
-  EasyDialog("这是一个简单的提示信息，点击确认即可关闭。")
-    .then(() => {
-      result.value = "用户点击了确认"
-    })
-    .catch(() => {
-      result.value = "用户取消了操作"
-    })
-}
-
-// 表单弹窗
-const openForm = () => {
-  EasyDialog(
-    DialogFormContent,
-    {}, // 组件 props
-    {
-      title: "填写信息",
-      width: "500px",
-
-      // 可以在 onConfirm 中获取组件实例并调用其方法
-      onConfirm: async instance => {
-        instance.doSomethingInternal()
-        const data = await instance.validateForm()
-        result.value = `校验通过: 姓名: ${data.name}, 邮箱: ${data.email}`
-        ElMessage.success("提交成功")
-      }
-    }
-  ).catch(e => {
-    if (e === "closed") return
-    ElMessage.warning("表单校验失败")
-  })
-}
-
-// 自定义页脚
-const openCustomFooter = () => {
-  EasyDialog(
-    "这个弹窗使用了自定义页脚",
-    {},
-    {
-      title: "自定义页脚",
-      footer: ({ close, confirm, loading }) =>
-        h("div", { style: "display: flex; justify-content: space-between; width: 100%" }, [
-          h("span", { style: "color: #999; font-size: 13px" }, "自定义提示信息"),
-          h("div", { style: "display: flex; gap: 10px" }, [
-            h(ElButton, { onClick: close, size: "small" }, () => "取消"),
-            h(
-              ElButton,
-              {
-                type: "primary",
-                loading: loading,
-                onClick: confirm,
-                size: "small"
-              },
-              () => "确认"
-            )
-          ])
-        ])
-    }
-  )
-}
-
-// 关闭前拦截
-const openBeforeClose = () => {
-  EasyDialog(
-    "尝试关闭此弹窗会触发二次确认",
-    {},
-    {
-      title: "关闭前拦截",
-      beforeClose: done => {
-        ElMessageBox.confirm("确定要关闭吗？", "提示", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消"
-        })
-          .then(() => {
-            done()
-            result.value = "用户确认关闭"
-          })
-          .catch(() => {
-            result.value = "用户取消关闭"
-          })
-      }
-    }
-  )
-}
-</script>
-
-<style scoped>
-h3 {
-  margin: 20px 0 10px;
-  font-size: 16px;
-  color: #303133;
-}
-
-.button-group {
-  display: flex;
-  gap: 12px;
-  flex-wrap: wrap;
-  margin-bottom: 20px;
-}
-
-.result {
-  margin-top: 20px;
-  padding: 12px;
-  background: #f0f9ff;
-  border: 1px solid #409eff;
-  border-radius: 4px;
-  color: #409eff;
-  font-size: 14px;
-}
-</style>

package/docs/demo/file-upload-basic.vue

@@ -1,25 +0,0 @@
-<template>
-  <div class="demo-upload">
-    <easy-file-upload
-      v-model="fileList"
-      action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
-      :limit="3"
-      :file-size="2"
-      :file-type="['png', 'jpg', 'jpeg', 'pdf']"
-    />
-    <div style="margin-top: 20px">绑定值: {{ fileList }}</div>
-  </div>
-</template>
-
-<script setup>
-import { ref } from "vue"
-import { EasyFileUpload } from "easy-elplus"
-
-const fileList = ref("")
-</script>
-
-<style scoped>
-.demo-upload {
-  width: 100%;
-}
-</style>

package/docs/demo/image-upload-basic.vue

@@ -1,24 +0,0 @@
-<template>
-  <div class="demo-upload">
-    <easy-image-upload
-      v-model="imageList"
-      action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
-      :limit="3"
-      :file-size="2"
-    />
-    <div style="margin-top: 20px">绑定值: {{ imageList }}</div>
-  </div>
-</template>
-
-<script setup>
-import { ref } from "vue"
-import { EasyImageUpload } from "easy-elplus"
-
-const imageList = ref("")
-</script>
-
-<style scoped>
-.demo-upload {
-  width: 100%;
-}
-</style>