el-plus 0.0.87-beta.0 → 0.0.88

package/dist/index.full.mjs

@@ -1,4 +1,4 @@
-/*! ElPlus v0.0.87-beta.0 */
+/*! ElPlus v0.0.88 */
 
 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';
@@ -4084,7 +4084,7 @@ const uniVueProps = {
   // 组件类型 bpm、 address
 };
 
-const useUniVue = (props, emit) => {
+const useUniVue = (props, _emit) => {
   const uniVue = useTemplateRef("uniVue");
   const { type } = props;
   const loading = ref(true);
@@ -4195,7 +4195,7 @@ const useUniVue = (props, emit) => {
     const cssPromises = [];
     if (!isBpm) {
       cssPromises.push(
-        http.request("/element-ui.css", {
+        http.request("/index.css", {
           responseReturn: "raw",
           baseURL: ""
         }).then((res) => res.data)
@@ -4230,6 +4230,12 @@ const useUniVue = (props, emit) => {
         const style = document.createElement("style");
         style.textContent = css;
         shadowRoot.appendChild(style);
+        if (isAddress && !document.querySelector("style[data-hx-address-style]")) {
+          const headStyle = document.createElement("style");
+          headStyle.textContent = css;
+          headStyle.setAttribute("data-hx-address-style", "true");
+          document.head.appendChild(headStyle);
+        }
       } catch (error) {
         console.log(error);
       } finally {
@@ -4237,55 +4243,55 @@ const useUniVue = (props, emit) => {
       }
     }
     shadowRoot.appendChild(container);
-    console.log(prepareVueAttributes());
-    const baseEvents = {
-      ...prepareVueAttributes().on,
-      "input": (newVal) => {
-        console.log(newVal, "input", props.name);
-        emit("update:modelValue", newVal);
-      },
-      "update:dialogFormData": (newVal) => {
-        console.log(newVal, "update:dialogFormData");
-        emit("update:dialogFormData", newVal);
-      },
-      "update:visible": (newVal) => {
-        console.log(newVal, "update:visible");
-        emit("update:visible", newVal);
-      }
-    };
     instance = new Vue2({
       el: container,
       // @ts-expect-error 缺少类型定义
       router: new VueRouter3(),
-      render: (h) => h(props.name, {
-        props: {
-          ...prepareVueAttributes().props
-        },
-        on: baseEvents
-      })
+      render: (h) => {
+        const { on: vue2Events, props: vue2Props } = prepareVueAttributes();
+        return h(props.name, {
+          props: vue2Props,
+          on: vue2Events
+        });
+      }
     });
   };
+  const updateVue2Instance = () => {
+    if (!instance) return;
+    const child = instance.$children[0];
+    if (child) {
+      const { props: vue2Props } = prepareVueAttributes();
+      Object.assign(child.$options.propsData, vue2Props);
+      if (child._props) {
+        Object.keys(vue2Props).forEach((key) => {
+          const newValue = vue2Props[key];
+          const oldValue = child._props[key];
+          if (newValue === oldValue && typeof newValue === "object" && newValue !== null) {
+            const temp = {};
+            child._props[key] = temp;
+          }
+          child._props[key] = newValue;
+        });
+      }
+      child.$forceUpdate();
+    }
+    instance.$forceUpdate();
+  };
   Object.keys(attrs).forEach((key) => {
-    console.log(key, 8);
     if (!key.startsWith("on")) {
       watch(
         () => attrs[key],
-        (newVal) => {
+        () => {
+          console.log(key, "key");
           nextTick(() => {
             try {
-              console.log(props.name, newVal, "watch", key, instance);
-              let vue2Prop = key;
-              if (key === "modelValue") {
-                vue2Prop = "value";
-              }
-              instance.$children[0][vue2Prop] = newVal;
+              updateVue2Instance();
             } catch (e) {
             }
           });
         },
         {
-          deep: true,
-          immediate: true
+          deep: true
         }
       );
     }
@@ -4305,12 +4311,10 @@ var _sfc_main$1 = /* @__PURE__ */ defineComponent({
   },
   __name: "uni-vue",
   props: uniVueProps,
-  emits: ["update:modelValue", "update:dialogFormData", "update:visible"],
   setup(__props, { emit: __emit }) {
     const bem = createNameSpace("uni-vue");
     const props = __props;
-    const emit = __emit;
-    const { loading } = useUniVue(props, emit);
+    const { loading } = useUniVue(props);
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
         createVNode(unref(ElSkeleton), {
@@ -4461,7 +4465,7 @@ var components = [
   EpFooterInfo
 ];
 
-var version = "0.0.87-beta.0";
+var version = "0.0.88";
 
 var globalProperties = {
   install(app) {

package/docs/CHANGELOG.md

@@ -1,3 +1,5 @@
 # docs
 
+## 1.0.2
+
 ## 1.0.1

package/docs/components/buttons.md

@@ -14,19 +14,55 @@ const buttons = [
   {
     name: '新增',
     prop: 'add',
-    type: 'primary',
-    onClick: () => {},
+    onClick: () => {
+      // 新增逻辑
+    },
   },
   {
     name: '删除',
     prop: 'delete',
-    type: 'danger',
-    onClick: () => {},
+    onClick: () => {
+      // 删除逻辑
+    },
   },
 ]
 </script>
 ```
 
+## 在 Form 中使用
+
+```tsx
+const formItemList = ref<FormProps['formItemList']>([
+  {
+    col: 24,
+    type: 'EpButtons',
+    props: {
+      list: [
+        {
+          name: '提交审批',
+          type: 'primary',
+          onClick: () => {
+            // 提交审批逻辑
+          },
+        },
+        {
+          name: '取消审批',
+          onClick: () => {
+            // 取消审批逻辑
+          },
+        },
+        {
+          name: '作废',
+          onClick: () => {
+            // 作废逻辑
+          },
+        },
+      ],
+    },
+  },
+])
+```
+
 ## Props
 
 | 属性 | 说明 | 类型 | 默认值 |
@@ -38,18 +74,19 @@ const buttons = [
 
 ## 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` |
+| 属性 | 说明 | 类型 | 默认值 |
+|------|------|------|--------|
+| name | 按钮文本 | `string` | - |
+| prop | 唯一标识 | `string` | - |
+| type | 按钮类型 | `'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'` | - |
+| plain | 朴素按钮 | `boolean` | `false` |
+| disabled | 是否禁用 | `boolean \| () => boolean` | `false` |
+| show | 是否显示（支持函数） | `boolean \| () => boolean` | `true` |
+| hide | 是否隐藏（支持函数） | `boolean \| () => boolean` | `false` |
+| permission | 权限标识 | `string` | - |
+| confirm | 是否需要确认 | `boolean` | `false` |
+| confirmText | 确认提示文本 | `string` | `'确定要${name}吗？'` |
+| onClick | 点击回调 | `(e: MouseEvent \| TableScope) => void` | - |
 
 ## 带确认弹窗
 
@@ -58,9 +95,7 @@ const buttons = [
   {
     name: '删除',
     prop: 'delete',
-    type: 'danger',
     confirm: true,
-    confirmText: '确定要删除吗？',
     onClick: () => {
       // 删除逻辑
     },
@@ -68,6 +103,18 @@ const buttons = [
 ]
 ```
 
+> **⚠️ 注意：需要确认弹窗时，必须使用 `confirm: true` 属性，禁止手动编写 `ElMessageBox.confirm`**
+>
+> **正确做法**：
+> ```tsx
+> { name: '取消审批', confirm: true, onClick: () => { ElMessage.success('成功') } }
+> ```
+>
+> **错误做法**：
+> ```tsx
+> { name: '取消审批', onClick: () => { ElMessageBox.confirm(...).then(...) } }
+> ```
+
 ## 权限控制
 
 ```tsx
@@ -101,7 +148,7 @@ const buttons = [
   {
     name: '审核',
     prop: 'audit',
-    visible: () => formData.status === 'pending',
+    show: () => formData.status === 'pending',
     onClick: () => {},
   },
 ]

package/docs/components/form.md

@@ -42,10 +42,28 @@ const formItemList = ref<FormProps['formItemList']>([
 ```
 ## 表单数据
 
-- 表单数据：不需要预定义所有字段，reactive({}) 即可
-- 仅以下类型需要预定义：
-  - dateRange：需定义开始/结束字段
-  - 表格数组、附件数组等复杂类型
+**不需要预定义表单字段**，`reactive({})` 即可，组件会自动管理字段值。
+
+```typescript
+// ✅ 正确：无需预定义字段
+const formData = reactive({})
+
+// ❌ 错误：不需要提前声明所有字段
+const formData = reactive({
+  name: '',
+  status: '',
+  applicant: '',
+  // ...
+})
+```
+
+**仅需预定义以下特殊字段：**
+
+| 场景 | 需预定义的字段 | 示例 |
+|------|---------------|------|
+| 日期范围 | 开始和结束两个独立字段 | `orderDateStart: ''`, `orderDateEnd: ''` |
+| 表格数组 | 空数组 | `detailList: []` |
+| 附件数组 | 空数组 | `fileList: []` |
 
 ## Props
 
@@ -72,7 +90,8 @@ const formItemList = ref<FormProps['formItemList']>([
 | label | 标签文本 | `string` | - |
 | col | 占用列数 | `number` | - |
 | disabled | 是否禁用 | `boolean` | `false` |
-| visible | 是否显示 | `boolean` | `true` |
+| show | 是否显示（支持函数） | `boolean \| () => boolean` | `true` |
+| hide | 是否隐藏（支持函数） | `boolean \| () => boolean` | `false` |
 | required | 是否必填 | `boolean` | `false` |
 | rules | 校验规则 | `FormItemRule[]` | - |
 | props | 传递给组件的属性 | `object` | - |
@@ -83,14 +102,6 @@ const formItemList = ref<FormProps['formItemList']>([
 | style | 行内样式 | `string \| CSSProperties` | - |
 | onChange | 值变化事件 | `(val, item?) => void` | - |
 
-> **注意**：在 EpTable 的 columns 中使用表单项时，`type` 不能省略，否则会显示为普通文本。
-> ```json
-> // ❌ 错误：表格列中省略 type，会显示为文本
-> { "prop": "quantity", "label": "数量" }
-> // ✅ 正确：表格列中必须指定 type
-> { "prop": "quantity", "label": "数量", "type": "EpInput" }
-> ```
-
 ## Expose 方法
 
 | 方法 | 说明 | 类型 |

package/docs/components/header.md

@@ -8,8 +8,6 @@
 <template>
   <EpHeader
     :buttons="headerButtons"
-    is-show-attachment-button
-    :file-list="formData.fileList"
   />
 </template>
 
@@ -30,7 +28,7 @@ const headerButtons: HeaderProps['buttons'] = [
 | 属性 | 说明 | 类型 | 默认值 |
 |------|------|------|--------|
 | buttons | 自定义按钮列表 | [`ButtonProps[]`](./buttons.md#buttonprops-配置) | `[]` |
-| defaultButtons | 显示的默认按钮 | `('edit' \| 'save' \| 'cancel' \| 'refresh' \| 'auditLog')[]` | `['edit', 'save', 'cancel', 'refresh', 'auditLog']` |
+| defaultButtons | 默认内置按钮 | `('edit' \| 'save' \| 'cancel' \| 'refresh' \| 'auditLog')[]` | `['edit', 'save', 'cancel', 'refresh', 'auditLog']` |
 | mode | 页面模式 | `'add' \| 'edit' \| 'browse'` | - |
 | allowBack | 是否允许返回 | `boolean` | `true` |
 | name | 权限前缀 | `string` | - |
@@ -39,15 +37,20 @@ const headerButtons: HeaderProps['buttons'] = [
 | fileList | 附件列表 | `Record<string, any>[]` | `[]` |
 | attachmentProps | 附件组件属性 | [`AttachmentProps`](./attachment.md#props) | `{}` |
 
-> **注意**：`defaultButtons` 默认为全部按钮，无需显式设置。只有需要自定义显示的按钮时才需设置。
-> ```json
-> // ❌ 错误：无需设置默认值属性
-> { "type": "EpHeader", "props": { "defaultButtons": ["edit", "save", "cancel", "refresh", "auditLog"] } }
-> // ✅ 正确：使用默认值
-> { "type": "EpHeader" }
-> // ✅ 正确：自定义显示的按钮
-> { "type": "EpHeader", "props": { "defaultButtons": ["edit", "save"] } }
-> ```
+## 注意事项
+
+### defaultButtons 默认值
+
+`defaultButtons` 默认为内置按钮，无需显式设置。只有需要自定义内置按钮时，才需设置。
+
+```json
+// ❌ 错误：无需设置默认值属性，因为默认值就是内置按钮
+{ "type": "EpHeader", "props": { "defaultButtons": ["edit", "save", "cancel", "refresh", "auditLog"] } }
+// ✅ 正确：使用内置按钮
+{ "type": "EpHeader" }
+// ✅ 正确：自定义内置按钮中的按钮， 只显示编辑和保存按钮
+{ "type": "EpHeader", "props": { "defaultButtons": ["edit", "save"] } }
+```
 
 ## 默认按钮说明
 
@@ -57,7 +60,7 @@ const headerButtons: HeaderProps['buttons'] = [
 | save | 保存按钮 |
 | cancel | 取消按钮 |
 | refresh | 刷新按钮 |
-| auditLog | 审批日志按钮 |
+| auditLog | 审批日志按钮，只有workflowId有值时才显示 |
 
 ## 带附件按钮
 
@@ -71,8 +74,10 @@ const headerButtons: HeaderProps['buttons'] = [
   />
 </template>
 
-<script setup>
-const attachmentProps = {
+<script setup lang="tsx">
+import type { HeaderProps } from 'el-plus'
+// 自定义附件组件属性
+const attachmentProps: HeaderProps['attachmentProps'] = {
   formatColumns: [
     {
       prop: 'type',
@@ -87,3 +92,26 @@ const attachmentProps = {
 }
 </script>
 ```
+
+## 在 Form 中使用
+
+EpHeader 也可以作为表单项放入 EpForm 中，作为表单的一部分：
+
+```tsx
+const formItemList = ref<FormProps['formItemList']>([
+  {
+    col: 24,
+    type: 'EpHeader',
+    props: {
+      buttons: [
+        { name: '提交审批', type: 'primary', onClick: () => {} },
+        { name: '取消审批', onClick: () => {} },
+        { name: '作废', onClick: () => {} },
+      ],
+      isShowAttachmentButton: true,
+      fileList: formData.fileList,
+    },
+  },
+  // 其他表单项...
+])
+```

package/docs/components/input.md

@@ -31,22 +31,26 @@ const value = ref('')
 
 > ^el^ 表示继承自 [el-input](https://element-plus.org/zh-CN/component/input.html) 的属性
 
-> **注意**：
-> - `clearable` 默认为 `true`，无需显式设置。只有需要 `clearable: false` 时才需设置。
-> - `thousand` 默认为 `true`，无需显式设置。
-> - 数值相关属性（`max`、`min`、`radix`、`nonzero`）默认不设置，只有明确需要时才添加。
-> ```json
-> // ❌ 错误：无需设置默认值属性
-> { "prop": "name", "type": "EpInput", "props": { "clearable": true } }
-> // ✅ 正确：使用默认值
-> { "prop": "name" }
-> // ❌ 错误：数值文本框默认不加数字属性
-> { "prop": "amount", "label": "金额", "props": { "thousand": true } }
-> // ✅ 正确：数值文本框无需设置默认值属性
-> { "prop": "amount", "label": "金额" }
-> // ✅ 正确：有特殊需求时才设置
-> { "prop": "amount", "label": "金额", "props": { "radix": 2, "max": 999999 } }
-> ```
+## 注意事项
+
+### 属性默认值
+- 有默认值的属性无需显式设置，只有需要修改默认值时才需要配置。
+ 如：`clearable` 默认为 `true`，无需显式设置。只有需要 `clearable: false` 时才需设置。
+- 数值相关属性（`max`、`min`、`radix`、`nonzero`）默认不设置，只有明确需要时才添加。
+
+```json
+// ❌ 错误：无需设置默认值属性
+{ "prop": "name", "props": { "clearable": true } }
+// ✅ 正确：使用默认值
+{ "prop": "name" }
+
+// ❌ 错误：数值文本框默认不加数值相关属性
+{ "prop": "amount", "label": "金额", "props": { "thousand": true } }
+// ✅ 正确：数值文本框无需设置数值相关属性
+{ "prop": "amount", "label": "金额" }
+// ✅ 正确：有特殊需求时才设置
+{ "prop": "amount", "label": "金额", "props": { "radix": 2, "max": 999999 } }
+```
 
 ## 在 Form 中使用
 
@@ -55,12 +59,10 @@ const formItemList = [
   {
     prop: 'name',
     label: '名称',
-    // type 默认为 EpInput
   },
   {
     prop: 'number',
     label: '数字',
-    // type 默认为 EpInput
   },
   {
     prop: 'remark',

package/docs/components/search-list-page.md

@@ -57,7 +57,7 @@ const handleAdd = () => {}
 | reqParams | URL 参数 | `object` | `{}` |
 | reqBefore | 请求前处理 | `(reqData) => reqData` | - |
 | reqAfter | 响应后处理 | `(res) => data` | - |
-| formData | 表单数据 | `object` | `{}` |
+| formData | 表单数据，参考 [EpForm 表单数据说明](./form.md#表单数据) | `object` | `{}` |
 | formItemList | 搜索表单配置 | [`FormItemProps[]`](./form.md#formitemprops-配置) | `[]` |
 | columns | 表格列配置（有customColumnModule就不需要定义列） | [`TableColumn[]`](./table.md#tablecolumn-配置) | `[]` |
 | leftButtons | 左侧按钮 | [`ButtonProps[]`](./buttons.md#buttonprops-配置) | `[]` |
@@ -77,5 +77,15 @@ const handleAdd = () => {}
 | buttonsProps | 按钮组额外属性 | `object` | - |
 | name | 权限前缀 | `string` | - |
 | customColumnModule | 自定义列模块 | `string \| number` | - |
+
+::: warning 互斥关系
+`customColumnModule` 和以下配置是**互斥**的：
+- `columns`：设置了 `customColumnModule` 后会忽略 `columns`
+- `leftButtons` 中的"自定义列设置"按钮：组件会自动内置该按钮
+
+**正确用法**：
+- 启用自定义列：`customColumnModule: "moduleName"`（无需配 columns 和自定义列按钮）
+- 固定列模式：不设置 `customColumnModule`，使用 `columns` 配置
+:::
 | customColumnApi | 自定义列接口 | `string` | - |
 | customColumnSaveApi | 自定义列保存接口 | `string` | - |

package/docs/components/table.md

@@ -78,7 +78,8 @@ const actionButtons = [
 | headerRender | 自定义表头渲染 | `() => VNode` |
 | required | 是否必填 | `boolean \| () => boolean` |
 | disabled | 是否禁用 | `boolean \| (scope) => boolean` |
-| visible | 是否显示 | `boolean \| () => boolean` |
+| show | 是否显示（支持函数） | `boolean \| () => boolean` |
+| hide | 是否隐藏（支持函数） | `boolean \| () => boolean` |
 | filter | 显示筛选 | `boolean` |
 | editable | 可批量编辑 | `boolean` |
 
@@ -90,7 +91,6 @@ const formItemList = [
     col: 24,
     type: 'EpTable',
     props: {
-      ref: 'detailTable',
       data: formData.detailList,
       showSelectionCol: true,
       columns: [
@@ -100,7 +100,6 @@ const formItemList = [
           prop: 'quantity',
           label: '数量',
           type: 'EpInput',
-          props: { radix: 0 },
         },
       ],
     },
@@ -108,6 +107,19 @@ const formItemList = [
 ]
 ```
 
+## 注意事项
+
+### 在 columns 中使用表单项
+
+在 EpTable 的 columns 中使用表单项时，`type` 不能省略，否则会显示为普通文本。
+
+```json
+// ❌ 错误：表格列中省略 type，会显示为文本
+{ "prop": "quantity", "label": "数量" }
+// ✅ 正确：表格列中必须指定 type
+{ "prop": "quantity", "label": "数量", "type": "EpInput" }
+```
+
 ## 自定义渲染
 
 ```tsx

package/docs/components/use-form-dialog.md

@@ -13,14 +13,13 @@
 <script setup lang="tsx">
 import { useFormDialog } from 'el-plus'
 
-const formItemList = [
-  { prop: 'name', label: '姓名', required: true },
-  { prop: 'age', label: '年龄' },
-]
 
 const FormDialog = useFormDialog({
   title: '用户信息',
-  formItemList,
+  formItemList:[
+    { prop: 'name', label: '姓名', required: true },
+    { prop: 'age', label: '年龄' },
+  ],
   dialogProps: {
     destroyOnClose: true, // 关闭时销毁对话框内容
   },