el-plus 0.0.84 → 0.0.86-beta.0

package/dist/index.full.mjs

@@ -1,4 +1,4 @@
-/*! ElPlus v0.0.84 */
+/*! ElPlus v0.0.86-beta.0 */
 
 import { useAttrs, getCurrentInstance, inject, provide, ref, nextTick, defineComponent, computed, createVNode, Fragment, withDirectives, resolveComponent, mergeProps, resolveDirective, useTemplateRef, reactive, onBeforeUpdate, createTextVNode, h, mergeModels, useModel, createElementBlock, openBlock, normalizeStyle, normalizeClass, unref, createCommentVNode, withCtx, renderSlot, renderList, createBlock, vShow, toDisplayString, useSlots, watch, onMounted, createSlots, normalizeProps, guardReactiveProps, markRaw, Transition, shallowReactive, isVNode, render, createElementVNode, toRaw } from 'vue';
 import { buttonProps, useLocale as useLocale$1, ElLoading, ElMessage, ElMessageBox, formProps as formProps$1, formEmits as formEmits$1, ElTooltip, formItemProps as formItemProps$1, ElFormItem, ElForm, ElRow, ElCol, inputProps as inputProps$1, inputEmits as inputEmits$1, configProviderContextKey, ElConfigProvider, ElDialog, ElButton, ElTable, ElIcon, selectProps as selectProps$1, selectEmits as selectEmits$1, ElPageHeader, datePickerProps, linkProps as linkProps$1, ElSkeleton } from 'element-plus';
@@ -994,9 +994,13 @@ var EpFormItem = /* @__PURE__ */ defineComponent({
       disabled,
       ...formItemProps2
     } = props;
+    const isShowLabel = computed(() => {
+      if (!props.label) return false;
+      return props.isShowLabel;
+    });
     return () => {
       return createVNode(ElFormItem, mergeProps({
-        "class": [bem$4.b(), bem$4.is("hide-label", !props.isShowLabel), prepareClassNames()],
+        "class": [bem$4.b(), bem$4.is("hide-label", !isShowLabel.value), prepareClassNames()],
         "style": prepareStyles()
       }, {
         ...prepareProps(formItemProps2, [...expandFormItemPropsKeys]),
@@ -4457,7 +4461,7 @@ var components = [
   EpFooterInfo
 ];
 
-var version = "0.0.84";
+var version = "0.0.86-beta.0";
 
 var globalProperties = {
   install(app) {

package/docs/api-examples.md

@@ -0,0 +1,49 @@
+---
+outline: deep
+---
+
+# Runtime API Examples
+
+This page demonstrates usage of some of the runtime APIs provided by VitePress.
+
+The main `useData()` API can be used to access site, theme, and page data for the current page. It works in both `.md` and `.vue` files:
+
+```md
+<script setup>
+import { useData } from 'vitepress'
+
+const { theme, page, frontmatter } = useData()
+</script>
+
+## Results
+
+### Theme Data
+<pre>{{ theme }}</pre>
+
+### Page Data
+<pre>{{ page }}</pre>
+
+### Page Frontmatter
+<pre>{{ frontmatter }}</pre>
+```
+
+<script setup>
+import { useData } from 'vitepress'
+
+const { site, theme, page, frontmatter } = useData()
+</script>
+
+## Results
+
+### Theme Data
+<pre>{{ theme }}</pre>
+
+### Page Data
+<pre>{{ page }}</pre>
+
+### Page Frontmatter
+<pre>{{ frontmatter }}</pre>
+
+## More
+
+Check out the documentation for the [full list of runtime APIs](https://vitepress.dev/reference/runtime-api#usedata).

package/docs/components/attachment.md

@@ -0,0 +1,111 @@
+# EpAttachment 附件管理
+
+附件上传和管理组件，支持对话框和内嵌两种模式。
+
+## 基本用法
+
+```vue
+<template>
+  <EpAttachment v-model="fileList" />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const fileList = ref([])
+</script>
+```
+
+## Props
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| v-model | 附件列表 | `array` | `[]` |
+| mode | 页面模式 | `'add' \| 'edit' \| 'view'` | - |
+| openType | 展示模式 | `'dialog' \| 'normal'` | `'dialog'` |
+| isType | 是否需要类型 | `boolean` | `true` |
+| isNote | 是否需要备注 | `boolean` | `false` |
+| isShowOpenDialogButton | 显示打开弹窗按钮 | `boolean` | `false` |
+| formatColumns | 格式化列配置 | [`TableColumn[]`](./table.md#tablecolumn-配置) | `[]` |
+| beforeAdd | 添加前校验 | `(fileItem) => boolean` | - |
+| permission | 权限标识 | `string` | - |
+
+## 在 Form 中使用
+
+```tsx
+const formItemList = [
+  {
+    col: 24,
+    type: 'EpAttachment',
+    props: {
+      modelValue: formData.fileList,
+      openType: 'normal',
+      formatColumns: [
+        {
+          prop: 'type',
+          props: {
+            options: [
+              { label: '图片', value: 0 },
+              { label: '普通附件', value: 2 },
+            ],
+          },
+        },
+      ],
+    },
+  },
+]
+```
+
+## 配合 EpHeader 使用
+
+```vue
+<template>
+  <EpHeader
+    :buttons="headerButtons"
+    is-show-attachment-button
+    :file-list="formData.fileList"
+    :attachment-props="attachmentProps"
+  />
+</template>
+
+<script setup>
+const attachmentProps = {
+  formatColumns: [
+    {
+      prop: 'type',
+      props: {
+        options: [
+          { label: '图片', value: 0 },
+          { label: '附件', value: 2 },
+        ],
+      },
+    },
+  ],
+}
+</script>
+```
+
+## 内嵌模式
+
+```tsx
+{
+  type: 'EpAttachment',
+  props: {
+    openType: 'normal', // 内嵌模式，直接显示附件表格
+    modelValue: formData.fileList,
+  },
+}
+```
+
+## 对话框模式
+
+```tsx
+{
+  type: 'EpAttachment',
+  props: {
+    openType: 'dialog', // 对话框模式，点击按钮打开
+    isShowOpenDialogButton: true,
+    modelValue: formData.fileList,
+  },
+}
+```

package/docs/components/buttons.md

@@ -0,0 +1,108 @@
+# EpButtons 按钮组
+
+按钮组组件，支持权限控制、确认弹窗等功能。
+
+## 基本用法
+
+```vue
+<template>
+  <EpButtons :list="buttons" />
+</template>
+
+<script setup>
+const buttons = [
+  {
+    name: '新增',
+    prop: 'add',
+    type: 'primary',
+    onClick: () => {},
+  },
+  {
+    name: '删除',
+    prop: 'delete',
+    type: 'danger',
+    onClick: () => {},
+  },
+]
+</script>
+```
+
+## Props
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| list | 按钮列表 | `ButtonProps[]` | `[]` |
+| size | 按钮尺寸 | `'large' \| 'default' \| 'small'` | `'small'` |
+| type | 默认按钮类型 | `string` | `'default'` |
+| disabled | 是否禁用（支持函数） | `boolean \| () => boolean` | `false` |
+
+## ButtonProps 配置
+
+| 属性 | 说明 | 类型 |
+|------|------|------|
+| name | 按钮文本 | `string` |
+| prop | 唯一标识 | `string` |
+| type | 按钮类型 | `'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'` |
+| plain | 朴素按钮 | `boolean` |
+| disabled | 是否禁用 | `boolean \| () => boolean` |
+| visible | 是否显示 | `boolean \| () => boolean` |
+| permission | 权限标识 | `string` |
+| confirm | 是否需要确认 | `boolean` |
+| confirmText | 确认提示文本 | `string` |
+| onClick | 点击回调 | `(e: MouseEvent \| TableScope) => void` |
+
+## 带确认弹窗
+
+```tsx
+const buttons = [
+  {
+    name: '删除',
+    prop: 'delete',
+    type: 'danger',
+    confirm: true,
+    confirmText: '确定要删除吗？',
+    onClick: () => {
+      // 删除逻辑
+    },
+  },
+]
+```
+
+## 权限控制
+
+```tsx
+const buttons = [
+  {
+    name: '编辑',
+    prop: 'edit',
+    permission: 'order:edit', // 需要 order:edit 权限才显示
+    onClick: () => {},
+  },
+]
+```
+
+## 动态禁用
+
+```tsx
+const buttons = [
+  {
+    name: '提交',
+    prop: 'submit',
+    disabled: () => formData.status !== 'draft',
+    onClick: () => {},
+  },
+]
+```
+
+## 动态显示
+
+```tsx
+const buttons = [
+  {
+    name: '审核',
+    prop: 'audit',
+    visible: () => formData.status === 'pending',
+    onClick: () => {},
+  },
+]
+```

package/docs/components/custom-column.md

@@ -0,0 +1,70 @@
+# EpCustomColumn 自定义列配置
+
+用于配置表格显示列的组件，支持拖拽排序和持久化。
+
+## 基本用法
+
+```vue
+<template>
+  <EpCustomColumn
+    ref="customColumn"
+    module="orderList"
+    @confirm="handleConfirm"
+  />
+</template>
+
+<script setup>
+import { useTemplateRef } from 'vue'
+
+const customColumn = useTemplateRef('customColumn')
+
+// 打开配置弹窗
+const openCustomColumn = () => {
+  customColumn.value?.open()
+}
+
+const handleConfirm = (columns) => {
+  console.log('选中的列', columns)
+}
+</script>
+```
+
+## Props
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| module | 模块标识 | `string \| number` | - |
+| api | 获取列配置接口 | `string` \| `Function` | `/api-item/api/customizedColumns/find` |
+| saveApi | 保存列配置接口 | `string`\｜ `Function` | `/api-item/api/customizedColumns/save` |
+| showHandler | 显示拖拽手柄 | `boolean` | `true` |
+
+## Events
+
+| 事件名 | 说明 | 回调参数 |
+|--------|------|----------|
+| confirm | 确认配置 | `(columns: TransferDataItem[])` |
+| loaded | 配置加载完成 | `(columns: TransferDataItem[])` |
+
+## 配合 EpSearchListPage 使用
+
+```vue
+<template>
+  <EpSearchListPage
+    :columns="columns"
+    :custom-column-module="11"
+    custom-column-api="/api/columns/find"
+    custom-column-save-api="/api/columns/save"
+  />
+</template>
+```
+
+## 配合 EpTable 使用
+
+```vue
+<template>
+  <EpTable
+    :columns="columns"
+    :custom-column-module="11"
+  />
+</template>
+```

package/docs/components/date-picker-range.md

@@ -0,0 +1,61 @@
+# EpDatePickerRange 日期范围选择
+
+基于 el-date-picker 封装的日期范围选择组件，内置快捷选项。
+
+## 基本用法
+
+```vue
+<template>
+  <EpDatePickerRange v-model="dateRange" />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const dateRange = ref([])
+</script>
+```
+
+## Props
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| v-model | 绑定值 ^el^ | `[Date, Date] \| [number, number]` | - |
+| type | 类型 ^el^ | `string` | `'daterange'` |
+| valueFormat | 值格式 ^el^ | `string` | `'x'` (时间戳) |
+| rangeSeparator | 分隔符 ^el^ | `string` | `'~'` |
+| startPlaceholder | 开始占位文本 ^el^ | `string` | '开始时间' |
+| endPlaceholder | 结束占位文本 ^el^ | `string` | '结束时间' |
+| size | 尺寸 ^el^ | `'large' \| 'default' \| 'small'` | `'default'` |
+| shortcuts | 快捷选项 ^el^ | `array` | 最近一周/一月/三月 |
+
+> ^el^ 表示继承自 [el-date-picker](https://element-plus.org/zh-CN/component/date-picker.html) 的属性
+
+## 默认快捷选项
+
+- 最近一周
+- 最近一月
+- 最近三月
+
+## 在 Form 中使用
+
+```tsx
+const formItemList = [
+  {
+    prop: 'orderDate',
+    label: '日期范围',
+    type: 'EpDatePickerRange',
+    props: {
+      start: formData.orderDateStart,
+      end: formData.orderDateEnd,
+    },
+    'onUpdate:start': (val) => {
+      formData.orderDateStart = val
+    },
+    'onUpdate:end': (val) => {
+      formData.orderDateEnd = val
+    },
+  }
+]
+```
+

package/docs/components/dialog.md

@@ -0,0 +1,104 @@
+# EpDialog 对话框
+
+基于 useDialog hook 实现的对话框，支持 Promise 方式调用。
+
+## 基本用法
+
+```vue
+<template>
+  <el-button @click="openDialog">打开对话框</el-button>
+  <Dialog />
+</template>
+
+<script setup lang="tsx">
+import { useDialog } from 'el-plus'
+
+const Dialog = useDialog({
+  title: '对话框标题',
+  width: '600px',
+  onConfirm: (resolve) => {
+    // 确认逻辑
+    resolve('success')
+  },
+  onCancel: (reject) => {
+    reject('cancel')
+  },
+})
+
+const openDialog = async () => {
+  try {
+    const result = await Dialog.start()
+    console.log('确认', result)
+  } catch (e) {
+    console.log('取消', e)
+  }
+}
+</script>
+```
+
+## useDialog Options
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| title | 对话框标题 ^el^ | `string` | '提示' |
+| width | 对话框宽度 ^el^ | `string` | - |
+| showFooter | 显示底部按钮 | `boolean` | `true` |
+| confirmText | 确认按钮文本 | `string` | '确定' |
+| cancelText | 取消按钮文本 | `string` | '取消' |
+| onConfirm | 确认回调 | `(resolve) => void` | - |
+| onBeforeConfirm | 确认前回调 | `(resolve) => void` | - |
+| onCancel | 取消回调 | `(reject) => void` | - |
+| onBeforeCancel | 取消前回调 | `(reject) => void` | - |
+| render | 自定义渲染函数 | `(props) => VNode` | - |
+| scopedSlots | 插槽 | `object` | - |
+| destroyOnClose | 关闭时销毁 ^el^ | `boolean` | - |
+
+> ^el^ 表示继承自 [el-dialog](https://element-plus.org/zh-CN/component/dialog.html) 的属性
+
+## 自定义内容
+
+```tsx
+const Dialog = useDialog({
+  title: '自定义内容',
+  render: ({ resolve, reject }) => (
+    <div>
+      <p>自定义内容</p>
+      <EpForm v-model={formData} formItemList={formItemList} />
+    </div>
+  ),
+  onConfirm: async (resolve) => {
+    const valid = await formRef.value?.validate()
+    if (valid) {
+      resolve(formData)
+    }
+  },
+})
+```
+
+## 使用插槽
+
+```vue
+<template>
+  <Dialog>
+    <template #default="{ resolve, reject }">
+      <p>对话框内容</p>
+    </template>
+  </Dialog>
+</template>
+
+<script setup>
+import { useDialog } from 'el-plus'
+
+const Dialog = useDialog({
+  title: '使用插槽',
+})
+</script>
+```
+
+## 其他对话框 Hooks
+
+| Hook | 说明 |
+|------|------|
+| [useFormDialog](./use-form-dialog.md) | 表单对话框 |
+| [useConfirmDialog](./use-confirm-dialog.md) | 确认对话框 |
+| [useChooseDialog](./use-choose-dialog.md) | 选择对话框 |

package/docs/components/footer-info.md

@@ -0,0 +1,101 @@
+# EpFooterInfo 底部信息
+
+用于显示单据底部的创建人、修改人等信息。
+
+## 基本用法
+
+```vue
+<template>
+  <EpFooterInfo v-model="formData" />
+</template>
+
+<script setup>
+import { reactive } from 'vue'
+
+const formData = reactive({
+  creator: 'admin',
+  creatorName: '管理员',
+  createTime: '2024-01-01 10:00:00',
+  editor: 'admin',
+  editorName: '管理员',
+  editTime: '2024-01-02 15:00:00',
+})
+</script>
+```
+
+## Props
+
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| v-model | 数据对象 | `Record<string, any>` | `{}` |
+| list | 字段配置列表 | `FooterInfoFieldConfig[]` | 默认四字段 |
+| fieldMap | 字段映射配置 | `FooterInfoFieldMap` | `{}` |
+
+## 默认字段
+
+| 字段 | 说明 |
+|------|------|
+| creator / creatorName | 制单人 |
+| createTime / createTimestamp | 创建时间 |
+| editor / editorName | 最新修改人 |
+| editTime / editTimestamp | 最新修改时间 |
+
+## FooterInfoFieldConfig
+
+```ts
+interface FooterInfoFieldConfig {
+  name: string       // 显示名称
+  prop: string       // 字段名
+  formatter?: (value: any, modelValue: any) => string
+}
+```
+
+## 自定义字段
+
+```vue
+<template>
+  <EpFooterInfo v-model="formData" :list="fieldList" />
+</template>
+
+<script setup>
+const fieldList = [
+  { name: '创建人', prop: 'createBy' },
+  { name: '创建时间', prop: 'createTime' },
+  { name: '审核人', prop: 'auditBy' },
+  { name: '审核时间', prop: 'auditTime' },
+]
+</script>
+```
+
+## 使用 fieldMap 格式化
+
+```vue
+<template>
+  <EpFooterInfo v-model="formData" :field-map="fieldMap" />
+</template>
+
+<script setup>
+const fieldMap = {
+  creator: {
+    name: '制单人',
+    formatter: (value, data) => `${data.creatorName}(${value})`,
+  },
+  createTime: (value) => value?.split(' ')[0], // 只显示日期
+}
+</script>
+```
+
+## 在 Form 中使用
+
+```tsx
+const formItemList = [
+  // 其他表单项...
+  {
+    col: 24,
+    type: 'EpFooterInfo',
+    props: {
+      modelValue: formData,
+    },
+  },
+]
+```