easybill-ui 1.2.23 → 1.2.25

package/components/CurdForm/src/CurdForm.vue

@@ -10,7 +10,7 @@
         :class="getFormItemStyle(formItem)"
         v-bind="getFormItemProps(formItem)"
       >
-        <template v-for="(item, key) in formItem.formItemProps?.slots" :key="key" #[key]="row">
+        <template v-for="(item, key) in getFormItemProps(formItem)?.slots || {}" :key="key" #[key]="row">
           <component :is="item" v-bind="row" />
         </template>
 

package/components/FormDialog/src/FormDialog.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-dialog v-model="visible" :title="title" width="60%" :close-on-click-modal="false" v-bind="$attrs" :before-close="onBeforeClose">
+  <component :is="componentName" v-bind="containerProps">
     <el-steps v-if="stepSchemaList.length > 1" :active="step" align-center style="margin-bottom: 20px; position: sticky; top: 0; z-index: 2000; background: var(--el-bg-color)" v-bind="stepProps">
       <el-step v-for="(item, i) in stepSchemaList" :key="i" :title="item.name" :description="item.description" />
     </el-steps>
@@ -16,12 +16,12 @@
         <el-button v-if="step >= stepSchemaList.length - 1" :disabled="confirmLoading" type="primary" :loading="confirmLoading" @click="onOk">{{ confirmBtnTextLabel }}</el-button>
       </span>
     </template>
-  </el-dialog>
+  </component>
 </template>
 
 <script lang="ts">
 import { useLocale } from "easybill-ui"
-import { computed, defineComponent, type PropType, provide, reactive, ref, type Ref, shallowRef, toRefs } from "vue"
+import { computed, defineComponent, type PropType, provide, reactive, ref, type Ref, shallowRef, toRefs, useAttrs } from "vue"
 import { type Fields, type FormSchema } from "../../CurdForm"
 export default defineComponent({
   name: "FormDialog",
@@ -79,8 +79,14 @@ export default defineComponent({
       type: String,
       default: "",
     },
+    mode: {
+      // 容器组件类型: 'dialog' | 'drawer'
+      type: String as PropType<"dialog" | "drawer">,
+      default: "dialog",
+    },
   },
   setup(props) {
+    const attrs = useAttrs()
     const curdFormRef = ref()
     const form = ref<Fields>({})
     const state = reactive({
@@ -156,6 +162,27 @@ export default defineComponent({
     }
     const confirmBtnTextLabel = computed(() => props.confirmBtnText || t("el.formDialog.confirm"))
     const cancelBtnTextLabel = computed(() => props.cancelBtnText || t("el.formDialog.cancel"))
+    const componentName = computed(() => (props.mode === "drawer" ? "el-drawer" : "el-dialog"))
+    const containerProps = computed(() => {
+      const baseProps = {
+        modelValue: state.visible,
+        title: props.title,
+        "close-on-click-modal": false,
+        "before-close": onBeforeClose,
+        ...attrs,
+      }
+      if (props.mode === "drawer") {
+        return {
+          ...baseProps,
+          size: attrs.size || attrs.width || "60%",
+          direction: attrs.direction || "rtl",
+        }
+      }
+      return {
+        ...baseProps,
+        width: attrs.width || "60%",
+      }
+    })
     const formDialogContext = reactive({
       form,
       state,
@@ -180,6 +207,8 @@ export default defineComponent({
       extendContexts,
       confirmBtnTextLabel,
       cancelBtnTextLabel,
+      componentName,
+      containerProps,
     }
   },
 })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "easybill-ui",
-  "version": "1.2.23",
+  "version": "1.2.25",
   "description": "A component library for easybill",
   "author": "tuchongyang <779311998@qq.com>",
   "private": false,