@tmagic/form 1.0.2 → 1.0.3

package/dist/types/src/containers/Fieldset.vue.d.ts

@@ -1,56 +1,79 @@
-import type { DefineComponent, ComputedRef, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes, PropType } from 'vue';
+import type { DefineComponent, ComputedRef, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes } from 'vue';
 import { FieldsetConfig, FormState } from '../schema';
-declare const _default: DefineComponent<{
-    labelWidth: StringConstructor;
+declare const _sfc_main: DefineComponent<{
+    labelWidth: {
+        type: StringConstructor;
+        required: false;
+    };
+    prop: {
+        type: StringConstructor;
+        required: true;
+        default: string;
+    };
+    size: {
+        type: StringConstructor;
+        required: false;
+    };
     model: {
         type: ObjectConstructor;
-        default: () => {};
+        required: true;
     };
     config: {
-        type: PropType<FieldsetConfig>;
-        default: () => {};
+        type: null;
+        required: true;
     };
     rules: {
-        type: ObjectConstructor;
-        default: () => {};
+        type: null;
+        required: false;
+        default: {};
     };
-    prop: {
-        type: StringConstructor;
-        default: () => string;
-    };
-    size: StringConstructor;
 }, {
-    show: ComputedRef<any>;
-    name: ComputedRef<string | number>;
+    props: {
+        labelWidth?: string | undefined;
+        prop: string;
+        size?: string | undefined;
+        model: Record<string, any>;
+        config: FieldsetConfig;
+        rules: any;
+    };
+    emit: (event: "change", ...args: any[]) => void;
     mForm: FormState | undefined;
+    name: ComputedRef<string | number>;
+    show: ComputedRef<any>;
     lWidth: ComputedRef<string | null | undefined>;
-    key: (item: any, index: number) => any;
     change: () => void;
+    key: (item: any, index: number) => any;
 }, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, "change"[], "change", VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
-    labelWidth: StringConstructor;
+    labelWidth: {
+        type: StringConstructor;
+        required: false;
+    };
+    prop: {
+        type: StringConstructor;
+        required: true;
+        default: string;
+    };
+    size: {
+        type: StringConstructor;
+        required: false;
+    };
     model: {
         type: ObjectConstructor;
-        default: () => {};
+        required: true;
     };
     config: {
-        type: PropType<FieldsetConfig>;
-        default: () => {};
+        type: null;
+        required: true;
     };
     rules: {
-        type: ObjectConstructor;
-        default: () => {};
-    };
-    prop: {
-        type: StringConstructor;
-        default: () => string;
+        type: null;
+        required: false;
+        default: {};
     };
-    size: StringConstructor;
 }>> & {
     onChange?: ((...args: any[]) => any) | undefined;
 }, {
-    config: FieldsetConfig;
-    model: Record<string, any>;
-    rules: Record<string, any>;
+    rules: any;
     prop: string;
 }>;
-export default _default;
+export default _sfc_main;

package/dist/types/src/containers/Tabs.vue.d.ts

@@ -12,6 +12,7 @@ declare const Tab: DefineComponent<{
         default: () => {};
     };
     prop: StringConstructor;
+    name: StringConstructor;
     size: StringConstructor;
 }, {
     mForm: FormState | undefined;
@@ -36,6 +37,7 @@ declare const Tab: DefineComponent<{
         default: () => {};
     };
     prop: StringConstructor;
+    name: StringConstructor;
     size: StringConstructor;
 }>>, {
     config: TabConfig;

package/dist/types/src/fields/SelectOptionGroups.vue.d.ts

@@ -0,0 +1,13 @@
+import type { DefineComponent, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes } from 'vue';
+declare const _sfc_main: DefineComponent<{
+    options: {
+        type: ArrayConstructor;
+        required: true;
+    };
+}, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
+    options: {
+        type: ArrayConstructor;
+        required: true;
+    };
+}>>, {}>;
+export default _sfc_main;

package/dist/types/src/fields/SelectOptions.vue.d.ts

@@ -0,0 +1,21 @@
+import type { DefineComponent, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes } from 'vue';
+declare const _sfc_main: DefineComponent<{
+    options: {
+        type: ArrayConstructor;
+        required: true;
+    };
+    valueKey: {
+        type: StringConstructor;
+        required: false;
+    };
+}, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
+    options: {
+        type: ArrayConstructor;
+        required: true;
+    };
+    valueKey: {
+        type: StringConstructor;
+        required: false;
+    };
+}>>, {}>;
+export default _sfc_main;

package/dist/types/src/index.d.ts

@@ -31,6 +31,6 @@ export { default as MSelect } from './fields/Select.vue';
 export { default as MCascader } from './fields/Cascader.vue';
 export { default as MDynamicField } from './fields/DynamicField.vue';
 declare const _default: {
-    install: (app: App, opt: any) => void;
+    install: (app: App<any>, opt: any) => void;
 };
 export default _default;

package/dist/types/src/schema.d.ts

@@ -137,7 +137,14 @@ export interface SelectGroupOption {
     label: string;
     /** 是否禁用该选项组 */
     disabled: boolean;
-    options: SelectOption[];
+    options: {
+        /** 选项的标签 */
+        label: string | SelectOptionTextFunction;
+        /** 选项的值 */
+        value: any | SelectOptionValueFunction;
+        /** 是否禁用该选项 */
+        disabled?: boolean;
+    }[];
 }
 declare type SelectOptionFunction = (mForm: FormState | undefined, data: {
     model: any;
@@ -404,6 +411,7 @@ export interface TabPaneConfig {
     lazy?: boolean;
     labelWidth?: string;
     items: FormConfig;
+    onTabClick?: (mForm: FormState | undefined, tab: any, data: any) => void;
     [key: string]: any;
 }
 export interface TabConfig extends FormItem, ContainerCommonConfig {
@@ -416,6 +424,7 @@ export interface TabConfig extends FormItem, ContainerCommonConfig {
     onChange?: (mForm: FormState | undefined, data: any) => void;
     onTabAdd?: (mForm: FormState | undefined, data: any) => void;
     onTabRemove?: (mForm: FormState | undefined, tabName: string, data: any) => void;
+    onTabClick?: (mForm: FormState | undefined, tab: any, data: any) => void;
     activeChange?: (mForm: FormState | undefined, tabName: string, data: any) => void;
 }
 /**

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.2",
+  "version": "1.0.3",
   "name": "@tmagic/form",
   "sideEffects": [
     "dist/*",
@@ -22,7 +22,7 @@
   },
   "license": "Apache-2.0",
   "scripts": {
-    "build": "vite build"
+    "build": "vue-tsc --noEmit && vite build"
   },
   "engines": {
     "node": ">=14"
@@ -33,15 +33,15 @@
   },
   "dependencies": {
     "@element-plus/icons": "0.0.11",
-    "@tmagic/utils": "1.0.2",
-    "element-plus": "^2.2.0",
+    "@tmagic/utils": "1.0.3",
+    "element-plus": "^2.2.6",
     "lodash-es": "^4.17.21",
     "moment": "^2.29.2",
     "sortablejs": "^1.14.0",
     "vue": "^3.2.0"
   },
   "peerDependencies": {
-    "element-plus": "^2.2.0",
+    "element-plus": "^2.2.6",
     "vue": "^3.2.0"
   },
   "devDependencies": {
@@ -49,14 +49,13 @@
     "@types/lodash-es": "^4.17.4",
     "@types/node": "^15.12.4",
     "@types/sortablejs": "^1.10.7",
-    "@vitejs/plugin-vue": "^1.2.3",
-    "@vitejs/plugin-vue-jsx": "^1.1.6",
+    "@vitejs/plugin-vue": "^2.3.3",
     "@vue/compiler-sfc": "^3.2.0",
     "@vue/test-utils": "^2.0.0",
     "sass": "^1.35.1",
     "typescript": "^4.3.4",
-    "vite": "^2.3.7",
+    "vite": "^2.9.13",
     "vite-plugin-dts": "^0.9.6",
-    "vue-tsc": "^0.0.24"
+    "vue-tsc": "^0.38.2"
   }
 }

package/src/containers/Fieldset.vue

@@ -4,25 +4,15 @@
     class="m-fieldset"
     :style="show ? 'padding: 15px 15px 0 5px;' : 'border: 0'"
   >
-    <el-checkbox
-      v-if="!show && name"
-      v-model="model[name].value"
-      :prop="`${prop}${prop ? '.' : ''}${config.name}.value`"
-      :true-label="1"
-      :false-label="0"
-      @change="change"
-      ><span v-html="config.legend"></span><span v-if="config.extra" v-html="config.extra" class="m-form-tip"></span
-    ></el-checkbox>
-    <legend v-else-if="config.checkbox && name">
+    <component v-if="name && config.checkbox" :is="!show ? 'div' : 'legend'">
       <el-checkbox
         v-model="model[name].value"
         :prop="`${prop}${prop ? '.' : ''}${config.name}.value`"
         :true-label="1"
         :false-label="0"
-        @change="change"
         ><span v-html="config.legend"></span><span v-if="config.extra" v-html="config.extra" class="m-form-tip"></span
       ></el-checkbox>
-    </legend>
+    </component>
     <legend v-else>
       <span v-html="config.legend"></span>
       <span v-if="config.extra" v-html="config.extra" class="m-form-tip"></span>
@@ -62,77 +52,59 @@
   </fieldset>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, inject, PropType } from 'vue';
+<script lang="ts" setup>
+import { computed, inject, watch } from 'vue';
 
 import { FieldsetConfig, FormState } from '../schema';
 
-export default defineComponent({
-  name: 'm-form-fieldset',
-
-  props: {
-    labelWidth: String,
-
-    model: {
-      type: Object,
-      default: () => ({}),
-    },
-
-    config: {
-      type: Object as PropType<FieldsetConfig>,
-      default: () => ({}),
-    },
-
-    rules: {
-      type: Object,
-      default: () => ({}),
-    },
-
-    prop: {
-      type: String,
-      default: () => '',
-    },
-
-    size: String,
+const props = withDefaults(
+  defineProps<{
+    labelWidth?: string;
+    prop: string;
+    size?: string;
+    model: Record<string, any>;
+    config: FieldsetConfig;
+    rules?: any;
+  }>(),
+  {
+    rules: {},
+    prop: '',
   },
+);
 
-  emits: ['change'],
+const emit = defineEmits(['change']);
 
-  setup(props, { emit }) {
-    const mForm = inject<FormState | undefined>('mForm');
+const mForm = inject<FormState | undefined>('mForm');
 
-    const name = computed(() => props.config.name || '');
+const name = computed(() => props.config.name || '');
 
-    const show = computed(() => {
-      if (props.config.expand && name.value) {
-        return props.model[name.value]?.value;
-      }
-      return true;
-    });
+const show = computed(() => {
+  if (props.config.expand && name.value) {
+    return props.model[name.value]?.value;
+  }
+  return true;
+});
 
-    const lWidth = computed(() => {
-      if (props.config.items) {
-        return props.config.labelWidth || props.labelWidth;
-      }
-      return props.config.labelWidth || props.labelWidth || (props.config.text ? null : '0');
-    });
+const lWidth = computed(() => {
+  if (props.config.items) {
+    return props.config.labelWidth || props.labelWidth;
+  }
+  return props.config.labelWidth || props.labelWidth || (props.config.text ? null : '0');
+});
 
-    const change = () => {
-      emit('change', props.model);
-    };
+const change = () => {
+  emit('change', props.model);
+};
 
-    const key = (item: any, index: number) => item[mForm?.keyProp || '__key'] ?? index;
+const key = (item: any, index: number) => item[mForm?.keyProp || '__key'] ?? index;
 
-    return {
-      show,
-      name,
-      mForm,
-      lWidth,
-      key,
-      change,
-    };
-  },
-});
+if (props.config.checkbox && name.value) {
+  watch(
+    () => props.model[name.value]?.value,
+    () => {
+      console.log(props.model);
+      emit('change', props.model);
+    },
+  );
+}
 </script>
-
-<style lang="scss"></style>

package/src/containers/Tabs.vue

@@ -21,7 +21,15 @@
           v-for="item in tabItems(tab)"
           :key="item[mForm?.keyProp || '__key']"
           :config="item"
-          :model="config.dynamic ? model[config.name || ''][tabIndex] : tab.name ? model[tab.name] : model"
+          :model="
+            config.dynamic
+              ? (name ? model[name] : model)[tabIndex]
+              : tab.name
+              ? (name ? model[name] : model)[tab.name]
+              : name
+              ? model[name]
+              : model
+          "
           :prop="config.dynamic ? `${prop}${prop ? '.' : ''}${String(tabIndex)}` : prop"
           :size="size"
           :label-width="tab.labelWidth || labelWidth"
@@ -34,7 +42,6 @@
 </template>
 
 <script lang="ts">
-/* eslint-disable vue/no-mutating-props */
 import { computed, defineComponent, inject, PropType, ref, watchEffect } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
@@ -87,6 +94,8 @@ const Tab = defineComponent({
 
     prop: String,
 
+    name: String,
+
     size: String,
   },
 

package/src/fields/Cascader.vue

@@ -79,8 +79,9 @@ export default defineComponent({
         if (typeof body === 'function' && props.model && mForm) {
           body = body(mForm, {
             model: props.model,
-            formValue: null,
+            formValue: mForm.values,
             formValues: mForm.values,
+            config: props.config,
           });
         }
         postOptions.data = body;

package/src/fields/DateTime.vue

@@ -8,7 +8,7 @@
     :disabled="disabled"
     :format="config.format || 'YYYY-MM-DD HH:mm:ss'"
     :value-format="config.valueFormat || 'YYYY-MM-DD HH:mm:ss'"
-    :default-time="config.defaultTime || [new Date(2000, 1, 1, 23, 59, 59)]"
+    :default-time="config.defaultTime"
     @change="changeHandler"
   ></el-date-picker>
 </template>

package/src/fields/Daterange.vue

@@ -8,7 +8,7 @@
     :size="size"
     :unlink-panels="true"
     :disabled="disabled"
-    :default-time="config.defaultTime || [new Date(2000, 1, 1, 23, 59, 59)]"
+    :default-time="config.defaultTime"
     @change="changeHandler"
   ></el-date-picker>
 </template>

package/src/fields/Select.vue

@@ -19,33 +19,14 @@
     @change="changeHandler"
     @visible-change="visibleHandler"
   >
-    <template v-if="config.group">
-      <el-option-group v-for="(group, index) in options" :key="index" :label="group.label" :disabled="group.disabled">
-        <el-option
-          v-for="(item, index) in group.options"
-          :key="index"
-          :label="item.label"
-          :value="item.value"
-          :disabled="item.disabled"
-        >
-        </el-option>
-      </el-option-group>
-    </template>
-    <template v-else>
-      <el-option
-        v-for="option in options"
-        :label="option.text"
-        :value="option.value"
-        :key="config.valueKey ? option.value[config.valueKey] : option.value"
-        :disabled="option.disabled"
-      ></el-option>
-    </template>
+    <template v-if="config.group"><select-option-groups :options="groupOptions"></select-option-groups></template>
+    <template v-else><select-options :options="options"></select-options></template>
     <div v-loading="true" v-if="moreLoadingVisible"></div>
   </el-select>
 </template>
 
 <script lang="ts">
-import { defineComponent, inject, onBeforeMount, onMounted, PropType, ref, watch } from 'vue';
+import { defineComponent, inject, onBeforeMount, onMounted, PropType, Ref, ref, watch } from 'vue';
 import { ElSelect } from 'element-plus';
 
 import { FormState, SelectConfig, SelectGroupOption, SelectOption } from '../schema';
@@ -53,9 +34,14 @@ import { getConfig } from '../utils/config';
 import fieldProps from '../utils/fieldProps';
 import { useAddField } from '../utils/useAddField';
 
+import SelectOptionGroups from './SelectOptionGroups.vue';
+import SelectOptions from './SelectOptions.vue';
+
 export default defineComponent({
   name: 'm-fields-select',
 
+  components: { SelectOptions, SelectOptionGroups },
+
   props: {
     ...fieldProps,
     config: {
@@ -344,7 +330,8 @@ export default defineComponent({
       select,
       loading,
       remote,
-      options,
+      options: options as Ref<SelectOption[]>,
+      groupOptions: options as Ref<SelectGroupOption[]>,
       moreLoadingVisible,
       popperClass: mForm?.popperClass,
 

package/src/fields/SelectOptionGroups.vue

@@ -0,0 +1,20 @@
+<template>
+  <el-option-group v-for="(group, index) in options" :key="index" :label="group.label" :disabled="group.disabled">
+    <el-option
+      v-for="(item, index) in group.options"
+      :key="index"
+      :label="item.label"
+      :value="item.value"
+      :disabled="item.disabled"
+    >
+    </el-option>
+  </el-option-group>
+</template>
+
+<script lang="ts" setup>
+import { SelectGroupOption } from '../schema';
+
+defineProps<{
+  options: SelectGroupOption[];
+}>();
+</script>

package/src/fields/SelectOptions.vue

@@ -0,0 +1,18 @@
+<template>
+  <el-option
+    v-for="option in options"
+    :label="option.text"
+    :value="option.value"
+    :key="valueKey ? option.value[valueKey] : option.value"
+    :disabled="option.disabled"
+  ></el-option>
+</template>
+
+<script lang="ts" setup>
+import { SelectOption } from '../schema';
+
+defineProps<{
+  options: SelectOption[];
+  valueKey?: string;
+}>();
+</script>

package/src/index.ts

@@ -95,7 +95,7 @@ const install = (app: App, opt: any) => {
   app.component(Form.name, Form);
   app.component(FormDialog.name, FormDialog);
   app.component(Container.name, Container);
-  app.component(Fieldset.name, Fieldset);
+  app.component('m-form-fieldset', Fieldset);
   app.component(GroupList.name, GroupList);
   app.component(Panel.name, Panel);
   app.component(Row.name, Row);

package/src/schema.ts

@@ -184,7 +184,14 @@ export interface SelectGroupOption {
   label: string;
   /** 是否禁用该选项组 */
   disabled: boolean;
-  options: SelectOption[];
+  options: {
+    /** 选项的标签 */
+    label: string | SelectOptionTextFunction;
+    /** 选项的值 */
+    value: any | SelectOptionValueFunction;
+    /** 是否禁用该选项 */
+    disabled?: boolean;
+  }[];
 }
 
 type SelectOptionFunction = (
@@ -508,6 +515,7 @@ export interface TabPaneConfig {
   lazy?: boolean;
   labelWidth?: string;
   items: FormConfig;
+  onTabClick?: (mForm: FormState | undefined, tab: any, data: any) => void;
   [key: string]: any;
 }
 export interface TabConfig extends FormItem, ContainerCommonConfig {
@@ -520,6 +528,7 @@ export interface TabConfig extends FormItem, ContainerCommonConfig {
   onChange?: (mForm: FormState | undefined, data: any) => void;
   onTabAdd?: (mForm: FormState | undefined, data: any) => void;
   onTabRemove?: (mForm: FormState | undefined, tabName: string, data: any) => void;
+  onTabClick?: (mForm: FormState | undefined, tab: any, data: any) => void;
   activeChange?: (mForm: FormState | undefined, tabName: string, data: any) => void;
 }
 

package/src/theme/fieldset.scss

@@ -5,6 +5,10 @@ fieldset.m-fieldset {
   margin-bottom: 10px;
   min-inline-size: auto;
 
+  .el-checkbox {
+    height: 22px;
+  }
+
   legend {
     font-size: 14px;
     position: absolute;

package/src/utils/form.ts

@@ -53,16 +53,7 @@ const asyncLoadConfig = (value: FormValue, initValue: FormValue, { asyncLoad, na
 
 const isMultipleValue = (type?: string | TypeFunction) =>
   typeof type === 'string' &&
-  [
-    'checkbox-group',
-    'checkboxGroup',
-    'table',
-    'cascader',
-    'group-list',
-    'groupList',
-    'dynamic-tab',
-    'dynamicTab',
-  ].includes(type);
+  ['checkbox-group', 'checkboxGroup', 'table', 'cascader', 'group-list', 'groupList'].includes(type);
 
 const initItemsValue = (
   mForm: FormState | undefined,
@@ -83,7 +74,7 @@ const initItemsValue = (
 const setValue = (mForm: FormState | undefined, value: FormValue, initValue: FormValue, item: any) => {
   const { items, name, type, checkbox } = item;
   // 值是数组， 有可能也有items配置，所以不能放到getDefaultValue里赋值
-  if (isMultipleValue(type)) {
+  if (isMultipleValue(type) || (type === 'tab' && item.dynamic)) {
     value[name] = initValue[name] || [];
   }
 
@@ -232,7 +223,7 @@ export const getRules = function (mForm: FormState | undefined, rules: Rule[] |
         fnc(
           {
             rule,
-            value,
+            value: props.config.names ? props.model : value,
             callback,
             source,
             options,