@tmagic/form 1.4.9 → 1.4.10

package/dist/style.css

@@ -1,4 +1,8 @@
 @charset "UTF-8";
+.tmagic-design-form-inline .m-form-container {
+  display: inline-flex;
+}
+
 .m-form-dialog .el-dialog__body {
   padding: 0 !important;
 }

package/dist/tmagic-form.js

@@ -97,18 +97,18 @@ const getDefaultValue = function(mForm, { defaultValue, type, filter, multiple }
   return "";
 };
 const filterFunction = (mForm, config, props) => {
-  if (typeof config !== "function") {
-    return config;
+  if (typeof config === "function") {
+    return config(mForm, {
+      values: mForm?.initValues || {},
+      model: props.model,
+      parent: mForm?.parentValues || {},
+      formValue: mForm?.values || props.model,
+      prop: props.prop,
+      config: props.config,
+      index: props.index
+    });
   }
-  return config(mForm, {
-    values: mForm?.initValues || {},
-    model: props.model,
-    parent: mForm?.parentValues || {},
-    formValue: mForm?.values || props.model,
-    prop: props.prop,
-    config: props.config,
-    index: props.index
-  });
+  return config;
 };
 const display = function(mForm, config, props) {
   if (config === "expand") {
@@ -2366,7 +2366,8 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     const mForm = inject("mForm");
     const options = computed(() => {
       if (Array.isArray(props.config.options)) return props.config.options;
-      if (typeof props.config.options === "function") return filterFunction(mForm, props.config.options, props);
+      if (typeof props.config.options === "function")
+        return filterFunction(mForm, props.config.options, props) || [];
       return [];
     });
     return (_ctx, _cache) => {

package/dist/tmagic-form.umd.cjs

@@ -96,18 +96,18 @@
     return "";
   };
   const filterFunction = (mForm, config, props) => {
-    if (typeof config !== "function") {
-      return config;
+    if (typeof config === "function") {
+      return config(mForm, {
+        values: mForm?.initValues || {},
+        model: props.model,
+        parent: mForm?.parentValues || {},
+        formValue: mForm?.values || props.model,
+        prop: props.prop,
+        config: props.config,
+        index: props.index
+      });
     }
-    return config(mForm, {
-      values: mForm?.initValues || {},
-      model: props.model,
-      parent: mForm?.parentValues || {},
-      formValue: mForm?.values || props.model,
-      prop: props.prop,
-      config: props.config,
-      index: props.index
-    });
+    return config;
   };
   const display = function(mForm, config, props) {
     if (config === "expand") {
@@ -2365,7 +2365,8 @@
       const mForm = vue.inject("mForm");
       const options = vue.computed(() => {
         if (Array.isArray(props.config.options)) return props.config.options;
-        if (typeof props.config.options === "function") return filterFunction(mForm, props.config.options, props);
+        if (typeof props.config.options === "function")
+          return filterFunction(mForm, props.config.options, props) || [];
         return [];
       });
       return (_ctx, _cache) => {

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.4.9",
+  "version": "1.4.10",
   "name": "@tmagic/form",
   "type": "module",
   "sideEffects": [
@@ -54,8 +54,8 @@
   "peerDependencies": {
     "vue": "^3.4.27",
     "typescript": "*",
-    "@tmagic/design": "1.4.9",
-    "@tmagic/utils": "1.4.9"
+    "@tmagic/design": "1.4.10",
+    "@tmagic/utils": "1.4.10"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/fields/Cascader.vue

@@ -49,7 +49,7 @@ const options = ref<CascaderOption[]>([]);
 const remoteData = ref<any>(null);
 
 const checkStrictly = computed(() => filterFunction(mForm, props.config.checkStrictly, props));
-const valueSeparator = computed(() => filterFunction(mForm, props.config.valueSeparator, props));
+const valueSeparator = computed(() => filterFunction<string>(mForm, props.config.valueSeparator, props));
 
 const value = computed({
   get() {

package/src/fields/CheckboxGroup.vue

@@ -11,7 +11,7 @@ import { computed, inject } from 'vue';
 
 import { TMagicCheckbox, TMagicCheckboxGroup } from '@tmagic/design';
 
-import type { CheckboxGroupConfig, FieldProps, FormState } from '../schema';
+import type { CheckboxGroupConfig, CheckboxGroupOption, FieldProps, FormState } from '../schema';
 import { filterFunction } from '../utils/form';
 import { useAddField } from '../utils/useAddField';
 
@@ -37,7 +37,8 @@ const changeHandler = (v: Array<string | number | boolean>) => {
 const mForm = inject<FormState | undefined>('mForm');
 const options = computed(() => {
   if (Array.isArray(props.config.options)) return props.config.options;
-  if (typeof props.config.options === 'function') return filterFunction(mForm, props.config.options, props);
+  if (typeof props.config.options === 'function')
+    return filterFunction<CheckboxGroupOption[]>(mForm, props.config.options, props) || [];
   return [];
 });
 </script>

package/src/schema.ts

@@ -170,6 +170,7 @@ export type FilterFunction<T = boolean> = (
     formValue: Record<any, any>;
     prop: string;
     config: any;
+    index?: number;
   },
 ) => T;
 
@@ -433,18 +434,18 @@ export interface ColorPickConfig extends FormItem {
   type: 'colorPicker';
 }
 
+export interface CheckboxGroupOption {
+  value: any;
+  text: string;
+  disabled?: boolean;
+}
+
 /**
  * 多选框组
  */
 export interface CheckboxGroupConfig extends FormItem {
   type: 'checkbox-group';
-  options:
-    | {
-        value: any;
-        text: string;
-        disabled?: boolean;
-      }[]
-    | Function;
+  options: CheckboxGroupOption[] | FilterFunction<CheckboxGroupOption[]>;
 }
 
 /**

package/src/theme/container.scss

@@ -0,0 +1,5 @@
+.tmagic-design-form-inline {
+  .m-form-container {
+    display: inline-flex;
+  }
+}

package/src/theme/index.scss

@@ -1,3 +1,4 @@
+@use "./container.scss";
 @use "./form-dialog.scss";
 @use "./form-drawer.scss";
 @use "./form.scss";

package/src/utils/form.ts

@@ -24,6 +24,7 @@ import {
   ChildConfig,
   ContainerCommonConfig,
   DaterangeConfig,
+  FilterFunction,
   FormConfig,
   FormState,
   FormValue,
@@ -181,20 +182,24 @@ const getDefaultValue = function (mForm: FormState | undefined, { defaultValue,
   return '';
 };
 
-export const filterFunction = <T = any>(mForm: FormState | undefined, config: T, props: any) => {
-  if (typeof config !== 'function') {
-    return config;
+export const filterFunction = <T = any>(
+  mForm: FormState | undefined,
+  config: T | FilterFunction<T> | undefined,
+  props: any,
+) => {
+  if (typeof config === 'function') {
+    return (config as FilterFunction<T>)(mForm, {
+      values: mForm?.initValues || {},
+      model: props.model,
+      parent: mForm?.parentValues || {},
+      formValue: mForm?.values || props.model,
+      prop: props.prop,
+      config: props.config,
+      index: props.index,
+    });
   }
 
-  return config(mForm, {
-    values: mForm?.initValues || {},
-    model: props.model,
-    parent: mForm?.parentValues || {},
-    formValue: mForm?.values || props.model,
-    prop: props.prop,
-    config: props.config,
-    index: props.index,
-  });
+  return config;
 };
 
 export const display = function (mForm: FormState | undefined, config: any, props: any) {

package/types/schema.d.ts

@@ -130,6 +130,7 @@ export type FilterFunction<T = boolean> = (mForm: FormState | undefined, data: {
     formValue: Record<any, any>;
     prop: string;
     config: any;
+    index?: number;
 }) => T;
 type OnChangeHandler = (mForm: FormState | undefined, value: any, data: {
     model: Record<any, any>;
@@ -346,16 +347,17 @@ export interface RadioGroupConfig extends FormItem {
 export interface ColorPickConfig extends FormItem {
     type: 'colorPicker';
 }
+export interface CheckboxGroupOption {
+    value: any;
+    text: string;
+    disabled?: boolean;
+}
 /**
  * 多选框组
  */
 export interface CheckboxGroupConfig extends FormItem {
     type: 'checkbox-group';
-    options: {
-        value: any;
-        text: string;
-        disabled?: boolean;
-    }[] | Function;
+    options: CheckboxGroupOption[] | FilterFunction<CheckboxGroupOption[]>;
 }
 /**
  * 下拉选择器

package/types/utils/form.d.ts

@@ -1,6 +1,6 @@
-import { FormConfig, FormState, FormValue, Rule, TabPaneConfig } from '../schema';
+import { FilterFunction, FormConfig, FormState, FormValue, Rule, TabPaneConfig } from '../schema';
 export declare const createValues: (mForm: FormState | undefined, config?: FormConfig | TabPaneConfig[], initValue?: FormValue, value?: FormValue) => FormValue;
-export declare const filterFunction: <T = any>(mForm: FormState | undefined, config: T, props: any) => any;
+export declare const filterFunction: <T = any>(mForm: FormState | undefined, config: T | FilterFunction<T> | undefined, props: any) => T | undefined;
 export declare const display: (mForm: FormState | undefined, config: any, props: any) => any;
 export declare const getRules: (mForm: FormState | undefined, rules: Rule | Rule[] | undefined, props: any) => Rule[];
 export declare const initValue: (mForm: FormState | undefined, { initValues, config }: {