@tmagic/form 1.3.0-alpha.2 → 1.3.0-alpha.20

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.0-alpha.2",
+  "version": "1.3.0-alpha.20",
   "name": "@tmagic/form",
   "type": "module",
   "sideEffects": [
@@ -36,28 +36,27 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.0.9",
-    "@tmagic/design": "1.3.0-alpha.2",
-    "@tmagic/utils": "1.3.0-alpha.2",
+    "@tmagic/design": "1.3.0-alpha.20",
+    "@tmagic/utils": "1.3.0-alpha.20",
     "lodash-es": "^4.17.21",
     "sortablejs": "^1.14.0",
-    "vue": "^3.2.37"
+    "vue": "^3.3.4"
   },
   "peerDependencies": {
-    "vue": "^3.2.37"
+    "vue": "^3.3.4"
   },
   "devDependencies": {
     "@babel/core": "^7.18.0",
     "@types/lodash-es": "^4.17.4",
     "@types/node": "^15.12.4",
     "@types/sortablejs": "^1.10.7",
-    "@vitejs/plugin-vue": "^4.1.0",
-    "@vue/compiler-sfc": "^3.2.37",
-    "@vue/test-utils": "^2.0.0",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "@vue/compiler-sfc": "^3.3.4",
+    "@vue/test-utils": "^2.3.2",
     "rimraf": "^3.0.2",
     "sass": "^1.35.1",
     "typescript": "^5.0.4",
-    "vite": "^4.2.1",
-    "vite-plugin-vue-setup-extend": "^0.4.0",
-    "vue-tsc": "^1.2.0"
+    "vite": "^4.4.4",
+    "vue-tsc": "^1.6.5"
   }
 }

package/src/Form.vue

@@ -26,7 +26,7 @@
   </TMagicForm>
 </template>
 
-<script setup lang="ts" name="MForm">
+<script setup lang="ts">
 import { provide, reactive, ref, toRaw, watch, watchEffect } from 'vue';
 import { isEqual } from 'lodash-es';
 import cloneDeep from 'lodash-es/cloneDeep';
@@ -38,6 +38,10 @@ import { getConfig } from './utils/config';
 import { initValue } from './utils/form';
 import type { FormConfig, FormState, FormValue, ValidateError } from './schema';
 
+defineOptions({
+  name: 'MForm',
+});
+
 const props = withDefaults(
   defineProps<{
     /** 表单配置 */
@@ -58,6 +62,7 @@ const props = withDefaults(
     labelPosition?: string;
     keyProp?: string;
     popperClass?: string;
+    extendState?: (state: FormState) => Record<string, any> | Promise<Record<string, any>>;
   }>(),
   {
     config: () => [],
@@ -110,7 +115,7 @@ const formState: FormState = reactive<FormState>({
   },
 });
 
-watchEffect(() => {
+watchEffect(async () => {
   formState.initValues = props.initValues;
   formState.lastValues = props.lastValues;
   formState.isCompare = props.isCompare;
@@ -118,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

@@ -46,7 +46,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>
@@ -56,7 +56,7 @@
   </TMagicDialog>
 </template>
 
-<script setup lang="ts" name="MFormDialog">
+<script setup lang="ts">
 import { computed, ref } from 'vue';
 
 import { TMagicButton, TMagicCol, TMagicDialog, TMagicRow } from '@tmagic/design';
@@ -64,6 +64,10 @@ import { TMagicButton, TMagicCol, TMagicDialog, TMagicRow } from '@tmagic/design
 import Form from './Form.vue';
 import { FormConfig, StepConfig } from './schema';
 
+defineOptions({
+  name: 'MFormDialog',
+});
+
 const props = withDefaults(
   defineProps<{
     config?: FormConfig;
@@ -114,10 +118,6 @@ const hasStep = computed(() => {
   return false;
 });
 
-const cancel = () => {
-  dialogVisible.value = false;
-};
-
 const closeHandler = () => {
   stepActive.value = 1;
   emit('close');
@@ -144,6 +144,18 @@ const changeHandler = (value: any) => {
   emit('change', value);
 };
 
+const show = () => {
+  dialogVisible.value = true;
+};
+
+const hide = () => {
+  dialogVisible.value = false;
+};
+
+const cancel = () => {
+  hide();
+};
+
 defineExpose({
   form,
   saveFetch,
@@ -151,5 +163,7 @@ defineExpose({
 
   cancel,
   save,
+  show,
+  hide,
 });
 </script>

package/src/FormDrawer.vue

@@ -0,0 +1,134 @@
+<template>
+  <TMagicDrawer
+    class="m-form-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"
+    @open="openHandler"
+    @opened="openedHandler"
+  >
+    <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"
+        @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="hide">关闭</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;
+  }>(),
+  {
+    closeOnPressEscape: true,
+    config: () => [],
+    values: () => ({}),
+    confirmText: '确定',
+  },
+);
+
+const emit = defineEmits(['close', 'submit', 'error', 'change', 'open', 'opened']);
+
+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 = (value: any) => {
+  emit('open', value);
+};
+
+const openedHandler = (value: any) => {
+  emit('opened', value);
+};
+
+const show = () => {
+  visible.value = true;
+};
+
+const hide = () => {
+  visible.value = false;
+};
+
+defineExpose({
+  form,
+  saveFetch,
+  bodyHeight,
+
+  show,
+  hide,
+});
+</script>

package/src/containers/Col.vue

@@ -16,7 +16,7 @@
   </TMagicCol>
 </template>
 
-<script setup lang="ts" name="MFormCol">
+<script setup lang="ts">
 import { computed, inject } from 'vue';
 
 import { TMagicCol } from '@tmagic/design';
@@ -26,6 +26,10 @@ import { display as displayFunction } from '../utils/form';
 
 import Container from './Container.vue';
 
+defineOptions({
+  name: 'MFormCol',
+});
+
 const props = defineProps<{
   model: any;
   lastValues?: any;

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)"
@@ -218,7 +217,7 @@
   </div>
 </template>
 
-<script setup lang="ts" name="MFormContainer">
+<script setup lang="ts">
 import { computed, inject, ref, resolveComponent, watch, watchEffect } from 'vue';
 import { WarningFilled } from '@element-plus/icons-vue';
 import { isEqual } from 'lodash-es';
@@ -228,6 +227,10 @@ import { TMagicButton, TMagicFormItem, TMagicIcon, TMagicTooltip } from '@tmagic
 import { ChildConfig, ContainerCommonConfig, FormState, FormValue } from '../schema';
 import { display as displayFunction, filterFunction, getRules } from '../utils/form';
 
+defineOptions({
+  name: 'MFormContainer',
+});
+
 const props = withDefaults(
   defineProps<{
     /** 表单值 */
@@ -291,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));
@@ -328,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/Fieldset.vue

@@ -61,7 +61,7 @@
   </fieldset>
 </template>
 
-<script lang="ts" setup name="MFormFieldset">
+<script lang="ts" setup>
 import { computed, inject } from 'vue';
 
 import { TMagicCheckbox } from '@tmagic/design';
@@ -70,6 +70,10 @@ import { FieldsetConfig, FormState } from '../schema';
 
 import Container from './Container.vue';
 
+defineOptions({
+  name: 'MFormFieldset',
+});
+
 const props = withDefaults(
   defineProps<{
     labelWidth?: string;

package/src/containers/GroupList.vue

@@ -25,13 +25,13 @@
       @addDiffCount="onAddDiffCount()"
     ></MFieldsGroupListItem>
 
-    <TMagicButton @click="addHandler" size="small" :disabled="disabled" v-if="addable">添加组</TMagicButton>
+    <TMagicButton @click="addHandler" size="small" :disabled="disabled" v-if="addable">新增</TMagicButton>
 
     <TMagicButton :icon="Grid" size="small" @click="toggleMode" v-if="config.enableToggleMode">切换为表格</TMagicButton>
   </div>
 </template>
 
-<script setup lang="ts" name="MFormGroupList">
+<script setup lang="ts">
 import { computed, inject } from 'vue';
 import { Grid } from '@element-plus/icons-vue';
 
@@ -42,6 +42,10 @@ import { initValue } from '../utils/form';
 
 import MFieldsGroupListItem from './GroupListItem.vue';
 
+defineOptions({
+  name: 'MFormGroupList',
+});
+
 const props = defineProps<{
   model: any;
   lastValues?: any;
@@ -128,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

@@ -42,8 +42,8 @@
   </div>
 </template>
 
-<script setup lang="ts" name="MFormGroupListItem">
-import { computed, inject, ref, watchEffect } from 'vue';
+<script setup lang="ts">
+import { computed, inject, ref } from 'vue';
 import { CaretBottom, CaretRight, CaretTop, Delete } from '@element-plus/icons-vue';
 
 import { TMagicButton, TMagicIcon } from '@tmagic/design';
@@ -53,6 +53,10 @@ import { filterFunction } from '../utils/form';
 
 import Container from './Container.vue';
 
+defineOptions({
+  name: 'MFormGroupListItem',
+});
+
 const props = defineProps<{
   model: any;
   lastValues: any;
@@ -69,11 +73,7 @@ const props = defineProps<{
 const emit = defineEmits(['swap-item', 'remove-item', 'change', 'addDiffCount']);
 
 const mForm = inject<FormState | undefined>('mForm');
-const expand = ref(false);
-
-watchEffect(() => {
-  expand.value = !props.index;
-});
+const expand = ref(props.config.expandAll || !props.index);
 
 const rowConfig = computed(() => ({
   type: 'row',
@@ -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;

package/src/containers/Panel.vue

@@ -57,7 +57,7 @@
   </TMagicCard>
 </template>
 
-<script setup lang="ts" name="MFormPanel">
+<script setup lang="ts">
 import { computed, inject, ref } from 'vue';
 import { CaretBottom, CaretRight } from '@element-plus/icons-vue';
 
@@ -68,6 +68,10 @@ import { filterFunction } from '../utils/form';
 
 import Container from './Container.vue';
 
+defineOptions({
+  name: 'MFormPanel',
+});
+
 const props = defineProps<{
   model: any;
   lastValues?: any;

package/src/containers/Row.vue

@@ -19,7 +19,7 @@
   </TMagicRow>
 </template>
 
-<script setup lang="ts" name="MFormRow">
+<script setup lang="ts">
 import { inject } from 'vue';
 
 import { TMagicRow } from '@tmagic/design';
@@ -28,6 +28,10 @@ import { FormState, RowConfig } from '../schema';
 
 import Col from './Col.vue';
 
+defineOptions({
+  name: 'MFormRow',
+});
+
 const props = defineProps<{
   model: any;
   lastValues?: any;

package/src/containers/Step.vue

@@ -32,7 +32,7 @@
   </div>
 </template>
 
-<script setup lang="ts" name="MFormStep">
+<script setup lang="ts">
 import { inject, ref, watchEffect } from 'vue';
 
 import { TMagicStep, TMagicSteps } from '@tmagic/design';
@@ -41,6 +41,10 @@ import { FormState, StepConfig } from '../schema';
 
 import Container from './Container.vue';
 
+defineOptions({
+  name: 'MFormStep',
+});
+
 const props = withDefaults(
   defineProps<{
     model: any;