@tmagic/form 1.3.16 → 1.4.0-beta.2

package/src/FormBox.vue

@@ -1,56 +1,57 @@
 <template>
-  <div class="m-form-box">
-    <div ref="boxBody" class="m-box-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 class="m-form-box" :style="style">
+    <div class="m-box-body" :style="bodyHeight ? { height: `${bodyHeight}px` } : {}">
+      <TMagicScrollbar>
+        <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>
+      </TMagicScrollbar>
     </div>
 
-    <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">
+    <div class="dialog-footer" :style="`height: ${footerHeight}px`">
+      <div>
+        <slot name="left"></slot>
+      </div>
+      <div>
         <slot name="footer">
-          <TMagicButton type="primary" :disabled="disabled" :loading="saveFetch" @click="submitHandler">{{
+          <TMagicButton type="primary" :size="size" :disabled="disabled" :loading="saveFetch" @click="submitHandler">{{
             confirmText
           }}</TMagicButton>
         </slot>
-      </TMagicCol>
-    </TMagicRow>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, watchEffect } from 'vue';
+import { computed, ref, watchEffect } from 'vue';
 
-import { TMagicButton, TMagicCol, TMagicRow } from '@tmagic/design';
+import { TMagicButton, TMagicScrollbar } from '@tmagic/design';
 
 import Form from './Form.vue';
 import type { FormConfig } from './schema';
 
 defineOptions({
-  name: 'MFormDialog',
+  name: 'MFormBox',
 });
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     config?: FormConfig;
     values?: Object;
     parentValues?: Object;
-    width?: string | number;
+    width?: number;
+    height?: number;
     labelWidth?: string;
     disabled?: boolean;
     size?: 'small' | 'default' | 'large';
@@ -67,15 +68,29 @@ withDefaults(
 
 const emit = defineEmits(['submit', 'change', 'error']);
 
+const footerHeight = 60;
+
+const style = computed(() => {
+  const style: { width?: string; height?: string } = {};
+  if (typeof props.width === 'number') {
+    style.width = `${props.width}px`;
+  }
+  if (typeof props.height === 'number') {
+    style.height = `${props.height}px`;
+  }
+  return style;
+});
+
 const form = ref<InstanceType<typeof Form>>();
-const boxBody = ref<HTMLDivElement>();
 const saveFetch = ref(false);
+
 const bodyHeight = ref(0);
 
 watchEffect(() => {
-  if (boxBody.value) {
-    bodyHeight.value = boxBody.value.clientHeight;
+  if (!props.height) {
+    return;
   }
+  bodyHeight.value = props.height - footerHeight;
 });
 
 const submitHandler = async () => {
@@ -98,7 +113,6 @@ const hide = () => {};
 defineExpose({
   form,
   saveFetch,
-  bodyHeight,
 
   show,
   hide,

package/src/containers/Container.vue

@@ -42,7 +42,7 @@
         :label-width="itemLabelWidth"
         :rules="rule"
       >
-        <template #label><span v-html="type === 'checkbox' ? '' : text"></span></template>
+        <template #label><span v-html="type === 'checkbox' ? '' : text" :title="config.labelTitle"></span></template>
         <TMagicTooltip v-if="tooltip">
           <component
             :key="key(config)"
@@ -99,7 +99,7 @@
         :rules="rule"
         style="background: #f7dadd"
       >
-        <template #label><span v-html="type === 'checkbox' ? '' : text"></span></template>
+        <template #label><span v-html="type === 'checkbox' ? '' : text" :title="config.labelTitle"></span></template>
         <TMagicTooltip v-if="tooltip">
           <component
             :key="key(config)"
@@ -148,7 +148,7 @@
         :rules="rule"
         style="background: #def7da"
       >
-        <template #label><span v-html="type === 'checkbox' ? '' : text"></span></template>
+        <template #label><span v-html="type === 'checkbox' ? '' : text" :title="config.labelTitle"></span></template>
         <TMagicTooltip v-if="tooltip">
           <component
             :key="key(config)"

package/src/containers/Fieldset.vue

@@ -8,8 +8,8 @@
       <TMagicCheckbox
         v-model="model[name].value"
         :prop="`${prop}${prop ? '.' : ''}${config.name}.value`"
-        :true-label="1"
-        :false-label="0"
+        :true-value="1"
+        :false-value="0"
         @update:modelValue="change"
         ><span v-html="config.legend"></span><span v-if="config.extra" v-html="config.extra" class="m-form-tip"></span
       ></TMagicCheckbox>

package/src/fields/Cascader.vue

@@ -9,6 +9,7 @@
     :placeholder="config.placeholder"
     :disabled="disabled"
     :options="options"
+    :popper-class="config.popperClass"
     :props="{
       multiple: config.multiple ?? false,
       emitPath: config.emitPath ?? true,

package/src/fields/Checkbox.vue

@@ -2,8 +2,8 @@
   <TMagicCheckbox
     v-model="model[name]"
     :size="size"
-    :trueLabel="activeValue"
-    :falseLabel="inactiveValue"
+    :trueValue="activeValue"
+    :falseValue="inactiveValue"
     :disabled="disabled"
     @change="changeHandler"
     >{{ config.text }}</TMagicCheckbox

package/src/fields/CheckboxGroup.vue

@@ -1,11 +1,6 @@
 <template>
   <TMagicCheckboxGroup v-model="model[name]" :size="size" :disabled="disabled" @change="changeHandler">
-    <TMagicCheckbox
-      v-for="option in options"
-      :label="option.value"
-      :value="option.value"
-      :key="option.value"
-      :disabled="option.disabled"
+    <TMagicCheckbox v-for="option in options" :value="option.value" :key="option.value" :disabled="option.disabled"
       >{{ option.text }}
     </TMagicCheckbox>
   </TMagicCheckboxGroup>

package/src/fields/RadioGroup.vue

@@ -1,12 +1,8 @@
 <template>
   <TMagicRadioGroup v-if="model" v-model="model[name]" :size="size" :disabled="disabled" @change="changeHandler">
-    <TMagicRadio
-      v-for="option in config.options"
-      :label="option.value"
-      :value="option.value"
-      :key="`${option.value}`"
-      >{{ option.text }}</TMagicRadio
-    >
+    <TMagicRadio v-for="option in config.options" :value="option.value" :key="`${option.value}`">{{
+      option.text
+    }}</TMagicRadio>
   </TMagicRadioGroup>
 </template>
 

package/src/schema.ts

@@ -66,6 +66,8 @@ export interface FormItem {
   __key?: string | number;
   /** 表单域标签的的宽度，例如 '50px'。支持 auto。 */
   labelWidth?: string;
+  /** label 标签的title属性 */
+  labelTitle?: string;
   className?: string;
   /** 表单组件类型 */
   type?: string | TypeFunction;
@@ -399,8 +401,8 @@ export interface TimeConfig extends FormItem, Input {
  */
 export interface CheckboxConfig extends FormItem {
   type: 'checkbox';
-  activeValue?: boolean | number | string;
-  inactiveValue?: boolean | number | string;
+  activeValue?: number | string;
+  inactiveValue?: number | string;
 }
 
 /**
@@ -534,6 +536,8 @@ export interface CascaderConfig extends FormItem, Input {
   multiple?: boolean;
   /** 是否严格的遵守父子节点不互相关联，默认 false */
   checkStrictly?: boolean;
+  /** 弹出内容的自定义类名 */
+  popperClass?: string;
   options?:
     | ((
         mForm: FormState | undefined,

package/src/theme/form-box.scss

@@ -1,18 +1,13 @@
 .m-form-box {
   display: flex;
   flex-direction: column;
-  padding: 16px;
-  width: 100%;
   .el-box__header {
     margin: 0;
   }
 
-  .m-box-body {
-    flex: 1;
-    overflow-y: auto;
-    overflow-x: hidden;
-  }
   .dialog-footer {
-    margin-top: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
   }
 }

package/types/Form.vue.d.ts

@@ -1,5 +1,5 @@
 import type { FormConfig, FormState, FormValue } from './schema';
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<{
     /** 表单配置 */
     config: FormConfig;
     /** 表单值 */
@@ -45,7 +45,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     error: (...args: any[]) => void;
     "field-input": (...args: any[]) => void;
     "field-change": (...args: any[]) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<{
     /** 表单配置 */
     config: FormConfig;
     /** 表单值 */
@@ -92,21 +92,12 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     parentValues: Record<string, any>;
     labelWidth: string;
     disabled: boolean;
-    stepActive: string | number;
     height: string;
+    stepActive: string | number;
     inline: boolean;
     labelPosition: string;
 }, {}>;
 export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
 type __VLS_WithDefaults<P, D> = {
     [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
         default: D[K];
@@ -115,3 +106,12 @@ type __VLS_WithDefaults<P, D> = {
 type __VLS_Prettify<T> = {
     [K in keyof T]: T[K];
 } & {};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};