@tmagic/form 1.3.0-alpha.9 → 1.3.0-beta.1

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.0-alpha.9",
+  "version": "1.3.0-beta.1",
   "name": "@tmagic/form",
   "type": "module",
   "sideEffects": [
@@ -36,8 +36,8 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.0.9",
-    "@tmagic/design": "1.3.0-alpha.9",
-    "@tmagic/utils": "1.3.0-alpha.9",
+    "@tmagic/design": "1.3.0-beta.1",
+    "@tmagic/utils": "1.3.0-beta.1",
     "lodash-es": "^4.17.21",
     "sortablejs": "^1.14.0",
     "vue": "^3.3.4"
@@ -56,7 +56,7 @@
     "rimraf": "^3.0.2",
     "sass": "^1.35.1",
     "typescript": "^5.0.4",
-    "vite": "^4.3.8",
+    "vite": "^4.4.4",
     "vue-tsc": "^1.6.5"
   }
 }

package/src/Form.vue

@@ -47,12 +47,12 @@ const props = withDefaults(
     /** 表单配置 */
     config: FormConfig;
     /** 表单值 */
-    initValues: Object;
+    initValues: Record<string, any>;
     /** 需对比的值（开启对比模式时传入） */
-    lastValues?: Object;
+    lastValues?: Record<string, any>;
     /** 是否开启对比模式 */
     isCompare?: boolean;
-    parentValues?: Object;
+    parentValues?: Record<string, any>;
     labelWidth?: string;
     disabled?: boolean;
     height?: string;
@@ -62,6 +62,7 @@ const props = withDefaults(
     labelPosition?: string;
     keyProp?: string;
     popperClass?: string;
+    extendState?: (state: FormState) => Record<string, any> | Promise<Record<string, any>>;
   }>(),
   {
     config: () => [],
@@ -114,7 +115,7 @@ const formState: FormState = reactive<FormState>({
   },
 });
 
-watchEffect(() => {
+watchEffect(async () => {
   formState.initValues = props.initValues;
   formState.lastValues = props.lastValues;
   formState.isCompare = props.isCompare;
@@ -122,6 +123,13 @@ watchEffect(() => {
   formState.keyProp = props.keyProp;
   formState.popperClass = props.popperClass;
   formState.parentValues = props.parentValues;
+
+  if (typeof props.extendState === 'function') {
+    const state = (await props.extendState(formState)) || {};
+    Object.entries(state).forEach(([key, value]) => {
+      formState[key] = value;
+    });
+  }
 });
 
 provide('mForm', formState);

package/src/FormDialog.vue

@@ -25,6 +25,8 @@
         :init-values="values"
         :parent-values="parentValues"
         :label-width="labelWidth"
+        :label-position="labelPosition"
+        :inline="inline"
         @change="changeHandler"
       ></Form>
       <slot></slot>
@@ -46,7 +48,7 @@
             <TMagicButton v-if="hasStep && stepCount > stepActive" type="info" size="small" @click="nextStep"
               >下一步</TMagicButton
             >
-            <TMagicButton v-else type="primary" size="small" :loading="saveFetch" @click="save">{{
+            <TMagicButton v-else type="primary" size="small" :disabled="disabled" :loading="saveFetch" @click="save">{{
               confirmText
             }}</TMagicButton>
           </slot>
@@ -78,6 +80,8 @@ const props = withDefaults(
     fullscreen?: boolean;
     disabled?: boolean;
     title?: string;
+    inline?: boolean;
+    labelPosition?: string;
     zIndex?: number;
     size?: 'small' | 'default' | 'large';
     confirmText?: string;
@@ -118,10 +122,6 @@ const hasStep = computed(() => {
   return false;
 });
 
-const cancel = () => {
-  dialogVisible.value = false;
-};
-
 const closeHandler = () => {
   stepActive.value = 1;
   emit('close');
@@ -148,6 +148,18 @@ const changeHandler = (value: any) => {
   emit('change', value);
 };
 
+const show = () => {
+  dialogVisible.value = true;
+};
+
+const hide = () => {
+  dialogVisible.value = false;
+};
+
+const cancel = () => {
+  hide();
+};
+
 defineExpose({
   form,
   saveFetch,
@@ -155,5 +167,7 @@ defineExpose({
 
   cancel,
   save,
+  show,
+  hide,
 });
 </script>

package/src/FormDrawer.vue

@@ -0,0 +1,159 @@
+<template>
+  <TMagicDrawer
+    class="m-form-drawer"
+    ref="drawer"
+    v-model="visible"
+    :title="title"
+    :close-on-press-escape="closeOnPressEscape"
+    :append-to-body="true"
+    :show-close="true"
+    :close-on-click-modal="true"
+    :size="width"
+    :zIndex="zIndex"
+    :before-close="beforeClose"
+    @open="openHandler"
+    @opened="openedHandler"
+    @close="closeHandler"
+    @closed="closedHandler"
+  >
+    <div v-if="visible" ref="drawerBody" class="m-drawer-body">
+      <Form
+        ref="form"
+        :size="size"
+        :disabled="disabled"
+        :config="config"
+        :init-values="values"
+        :parent-values="parentValues"
+        :label-width="labelWidth"
+        :label-position="labelPosition"
+        :inline="inline"
+        @change="changeHandler"
+      ></Form>
+      <slot></slot>
+    </div>
+
+    <template #footer>
+      <TMagicRow class="dialog-footer">
+        <TMagicCol :span="12" style="text-align: left">
+          <div style="min-height: 1px">
+            <slot name="left"></slot>
+          </div>
+        </TMagicCol>
+        <TMagicCol :span="12">
+          <slot name="footer">
+            <TMagicButton @click="handleClose">关闭</TMagicButton>
+            <TMagicButton type="primary" :disabled="disabled" :loading="saveFetch" @click="submitHandler">{{
+              confirmText
+            }}</TMagicButton>
+          </slot>
+        </TMagicCol>
+      </TMagicRow>
+    </template>
+  </TMagicDrawer>
+</template>
+
+<script setup lang="ts">
+import { ref, watchEffect } from 'vue';
+
+import { TMagicButton, TMagicCol, TMagicDrawer, TMagicRow } from '@tmagic/design';
+
+import Form from './Form.vue';
+import type { FormConfig } from './schema';
+
+defineOptions({
+  name: 'MFormDialog',
+});
+
+withDefaults(
+  defineProps<{
+    config?: FormConfig;
+    values?: Object;
+    parentValues?: Object;
+    width?: string | number;
+    labelWidth?: string;
+    disabled?: boolean;
+    closeOnPressEscape?: boolean;
+    title?: string;
+    zIndex?: number;
+    size?: 'small' | 'default' | 'large';
+    confirmText?: string;
+    inline?: boolean;
+    labelPosition?: string;
+    /** 关闭前的回调，会暂停 Drawer 的关闭; done 是个 function type 接受一个 boolean 参数, 执行 done 使用 true 参数或不提供参数将会终止关闭 */
+    beforeClose?: (done: (cancel?: boolean) => void) => void;
+  }>(),
+  {
+    closeOnPressEscape: true,
+    config: () => [],
+    values: () => ({}),
+    confirmText: '确定',
+  },
+);
+
+const emit = defineEmits(['close', 'closed', 'submit', 'error', 'change', 'open', 'opened']);
+
+const drawer = ref<InstanceType<typeof TMagicDrawer>>();
+const form = ref<InstanceType<typeof Form>>();
+const drawerBody = ref<HTMLDivElement>();
+const visible = ref(false);
+const saveFetch = ref(false);
+const bodyHeight = ref(0);
+
+watchEffect(() => {
+  if (drawerBody.value) {
+    bodyHeight.value = drawerBody.value.clientHeight;
+  }
+});
+
+const submitHandler = async () => {
+  try {
+    const values = await form.value?.submitForm();
+    emit('submit', values);
+  } catch (e) {
+    emit('error', e);
+  }
+};
+
+const changeHandler = (value: any) => {
+  emit('change', value);
+};
+
+const openHandler = () => {
+  emit('open');
+};
+
+const openedHandler = () => {
+  emit('opened');
+};
+
+const closeHandler = () => {
+  emit('close');
+};
+
+const closedHandler = () => {
+  emit('closed');
+};
+
+const show = () => {
+  visible.value = true;
+};
+
+const hide = () => {
+  visible.value = false;
+};
+
+/** 用于关闭 Drawer, 该方法会调用传入的 before-close 方法 */
+const handleClose = () => {
+  drawer.value?.handleClose();
+};
+
+defineExpose({
+  form,
+  saveFetch,
+  bodyHeight,
+
+  show,
+  hide,
+  handleClose,
+});
+</script>

package/src/containers/Container.vue

@@ -2,8 +2,7 @@
   <div
     v-if="config"
     :style="config.tip ? 'display: flex;align-items: baseline;' : ''"
-    :class="config.className"
-    class="m-form-container"
+    :class="`m-form-container m-container-${type || ''} ${config.className || ''}`"
   >
     <m-fields-hidden
       v-if="type === 'hidden'"
@@ -15,7 +14,7 @@
     ></m-fields-hidden>
 
     <component
-      v-else-if="items && !config.text && type && display"
+      v-else-if="items && !text && type && display"
       :key="key(config)"
       :size="size"
       :is="tagName"
@@ -36,12 +35,12 @@
     <template v-else-if="type && display && !showDiff">
       <TMagicFormItem
         :style="config.tip ? 'flex: 1' : ''"
-        :class="{ hidden: `${itemLabelWidth}` === '0' || !config.text }"
+        :class="{ hidden: `${itemLabelWidth}` === '0' || !text }"
         :prop="itemProp"
         :label-width="itemLabelWidth"
         :rules="rule"
       >
-        <template #label><span v-html="type === 'checkbox' ? '' : config.text"></span></template>
+        <template #label><span v-html="type === 'checkbox' ? '' : text"></span></template>
         <TMagicTooltip v-if="tooltip">
           <component
             :key="key(config)"
@@ -92,13 +91,13 @@
       <!-- 上次内容 -->
       <TMagicFormItem
         :style="config.tip ? 'flex: 1' : ''"
-        :class="{ hidden: `${itemLabelWidth}` === '0' || !config.text }"
+        :class="{ hidden: `${itemLabelWidth}` === '0' || !text }"
         :prop="itemProp"
         :label-width="itemLabelWidth"
         :rules="rule"
         style="background: #f7dadd"
       >
-        <template #label><span v-html="type === 'checkbox' ? '' : config.text"></span></template>
+        <template #label><span v-html="type === 'checkbox' ? '' : text"></span></template>
         <TMagicTooltip v-if="tooltip">
           <component
             :key="key(config)"
@@ -141,13 +140,13 @@
       <!-- 当前内容 -->
       <TMagicFormItem
         :style="config.tip ? 'flex: 1' : ''"
-        :class="{ hidden: `${itemLabelWidth}` === '0' || !config.text }"
+        :class="{ hidden: `${itemLabelWidth}` === '0' || !text }"
         :prop="itemProp"
         :label-width="itemLabelWidth"
         :rules="rule"
         style="background: #def7da"
       >
-        <template #label><span v-html="type === 'checkbox' ? '' : config.text"></span></template>
+        <template #label><span v-html="type === 'checkbox' ? '' : text"></span></template>
         <TMagicTooltip v-if="tooltip">
           <component
             :key="key(config)"
@@ -295,6 +294,8 @@ const tagName = computed(() => {
 
 const disabled = computed(() => props.disabled || filterFunction(mForm, props.config.disabled, props));
 
+const text = computed(() => filterFunction(mForm, props.config.text, props));
+
 const tooltip = computed(() => filterFunction(mForm, props.config.tooltip, props));
 
 const extra = computed(() => filterFunction(mForm, props.config.extra, props));
@@ -332,7 +333,7 @@ watch(
   showDiff,
   (showDiff) => {
     if (type.value === 'hidden') return;
-    if (items.value && !props.config.text && type.value && display.value) return;
+    if (items.value && !text.value && type.value && display.value) return;
     if (display.value && showDiff && type.value) {
       emit('addDiffCount');
     }

package/src/containers/GroupList.vue

@@ -132,6 +132,7 @@ const toggleMode = () => {
       text: null,
     }))) as any;
 };
+
 const onAddDiffCount = () => emit('addDiffCount');
 
 const getLastValues = (item: any, index: number) => item?.[index] || {};

package/src/containers/GroupListItem.vue

@@ -88,7 +88,13 @@ const title = computed(() => {
     return props.model[props.config.titleKey];
   }
 
-  return `组 ${String(props.index)}`;
+  if (props.config.title) {
+    return filterFunction(mForm, props.config.title, props);
+  }
+
+  const titlePrefix = props.config.titlePrefix || '组';
+
+  return `${titlePrefix} ${String(props.index + 1)}`;
 });
 
 const length = computed(() => props.groupModel?.length || 0);
@@ -113,7 +119,7 @@ const showDelete = (index: number) => {
 };
 
 // 调换顺序
-const changeOrder = (offset = 0) => emit('swap-item', props.index, `${String(props.index)}${offset}`);
+const changeOrder = (offset = 0) => emit('swap-item', props.index, props.index + offset);
 
 const movable = () => {
   const { movable } = props.config;