mirror of
https://github.com/Tencent/tmagic-editor.git
synced 2025-06-02 05:41:26 +08:00
feat(editor,form,form-schema): 新增form-schema，将表单schema放入其中
This commit is contained in:
roymondchen
parent
85284e54f5
commit
50b74d10e6
@ -13,7 +13,7 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { FieldProps, FormItem } from '@tmagic/form';
|
||||
import type { CodeConfig, FieldProps } from '@tmagic/form';
|
||||
|
||||
import MagicCodeEditor from '@editor/layouts/CodeEditor.vue';
|
||||
|
||||
@ -25,23 +25,9 @@ const emit = defineEmits<{
|
||||
change: [value: string | any];
|
||||
}>();
|
||||
|
||||
withDefaults(
|
||||
defineProps<
|
||||
FieldProps<
|
||||
{
|
||||
language?: string;
|
||||
options?: {
|
||||
[key: string]: any;
|
||||
};
|
||||
height?: string;
|
||||
parse?: boolean;
|
||||
} & FormItem
|
||||
>
|
||||
>(),
|
||||
{
|
||||
disabled: false,
|
||||
},
|
||||
);
|
||||
withDefaults(defineProps<FieldProps<CodeConfig>>(), {
|
||||
disabled: false,
|
||||
});
|
||||
|
||||
const save = (v: string | any) => {
|
||||
emit('change', v);
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
import { computed, reactive, watch } from 'vue';
|
||||
import serialize from 'serialize-javascript';
|
||||
|
||||
import type { FieldProps, FormItem } from '@tmagic/form';
|
||||
import type { CodeLinkConfig, FieldProps } from '@tmagic/form';
|
||||
|
||||
import { getEditorConfig } from '@editor/utils/config';
|
||||
|
||||
@ -14,15 +14,7 @@ defineOptions({
|
||||
name: 'MFieldsCodeLink',
|
||||
});
|
||||
|
||||
const props = defineProps<
|
||||
FieldProps<
|
||||
{
|
||||
type: 'code-link';
|
||||
formTitle?: string;
|
||||
codeOptions?: Object;
|
||||
} & FormItem
|
||||
>
|
||||
>();
|
||||
const props = defineProps<FieldProps<CodeLinkConfig>>();
|
||||
|
||||
const emit = defineEmits(['change']);
|
||||
|
||||
|
||||
@ -21,7 +21,7 @@ import { isEmpty } from 'lodash-es';
|
||||
|
||||
import { HookCodeType, HookType } from '@tmagic/core';
|
||||
import { TMagicCard } from '@tmagic/design';
|
||||
import type { ContainerChangeEventData, FieldProps, FormItem, GroupListConfig } from '@tmagic/form';
|
||||
import type { CodeSelectConfig, ContainerChangeEventData, FieldProps, GroupListConfig } from '@tmagic/form';
|
||||
import { MContainer } from '@tmagic/form';
|
||||
|
||||
import { useServices } from '@editor/hooks/use-services';
|
||||
@ -36,16 +36,7 @@ const emit = defineEmits<{
|
||||
|
||||
const { dataSourceService, codeBlockService } = useServices();
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<
|
||||
FieldProps<
|
||||
{
|
||||
className?: string;
|
||||
} & FormItem
|
||||
>
|
||||
>(),
|
||||
{},
|
||||
);
|
||||
const props = withDefaults(defineProps<FieldProps<CodeSelectConfig>>(), {});
|
||||
|
||||
const codeConfig = computed<GroupListConfig>(() => ({
|
||||
type: 'group-list',
|
||||
|
||||
@ -42,6 +42,7 @@ import { isEmpty, map } from 'lodash-es';
|
||||
import type { Id } from '@tmagic/core';
|
||||
import { TMagicButton } from '@tmagic/design';
|
||||
import {
|
||||
type CodeSelectColConfig,
|
||||
type ContainerChangeEventData,
|
||||
createValues,
|
||||
type FieldProps,
|
||||
@ -53,7 +54,7 @@ import {
|
||||
import CodeParams from '@editor/components/CodeParams.vue';
|
||||
import MIcon from '@editor/components/Icon.vue';
|
||||
import { useServices } from '@editor/hooks/use-services';
|
||||
import type { CodeParamStatement, CodeSelectColConfig, EventBus } from '@editor/type';
|
||||
import type { CodeParamStatement, EventBus } from '@editor/type';
|
||||
import { SideItemKey } from '@editor/type';
|
||||
|
||||
defineOptions({
|
||||
|
||||
@ -30,10 +30,9 @@
|
||||
import { computed } from 'vue';
|
||||
|
||||
import { getDesignConfig, TMagicSelect } from '@tmagic/design';
|
||||
import type { FieldProps } from '@tmagic/form';
|
||||
import type { CondOpSelectConfig, FieldProps } from '@tmagic/form';
|
||||
|
||||
import { useServices } from '@editor/hooks/use-services';
|
||||
import type { CondOpSelectConfig } from '@editor/type';
|
||||
import { arrayOptions, eqOptions, numberOptions } from '@editor/utils';
|
||||
|
||||
defineOptions({
|
||||
|
||||
@ -44,12 +44,11 @@ import { Coin } from '@element-plus/icons-vue';
|
||||
|
||||
import { DataSchema } from '@tmagic/core';
|
||||
import { TMagicButton, tMagicMessage, TMagicTooltip } from '@tmagic/design';
|
||||
import type { ContainerChangeEventData, FieldProps, FormState } from '@tmagic/form';
|
||||
import type { ContainerChangeEventData, DataSourceFieldSelectConfig, FieldProps, FormState } from '@tmagic/form';
|
||||
import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX } from '@tmagic/utils';
|
||||
|
||||
import MIcon from '@editor/components/Icon.vue';
|
||||
import { useServices } from '@editor/hooks/use-services';
|
||||
import type { DataSourceFieldSelectConfig } from '@editor/type';
|
||||
import { removeDataSourceFieldPrefix } from '@editor/utils';
|
||||
|
||||
import FieldSelect from './FieldSelect.vue';
|
||||
|
||||
@ -53,6 +53,7 @@ import type { DataSchema } from '@tmagic/core';
|
||||
import { TMagicButton, tMagicMessage, tMagicMessageBox } from '@tmagic/design';
|
||||
import {
|
||||
type ContainerChangeEventData,
|
||||
type DataSourceFieldsConfig,
|
||||
type FieldProps,
|
||||
type FormConfig,
|
||||
type FormState,
|
||||
@ -71,16 +72,9 @@ defineOptions({
|
||||
name: 'MFieldsDataSourceFields',
|
||||
});
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<
|
||||
FieldProps<{
|
||||
type: 'data-source-fields';
|
||||
}>
|
||||
>(),
|
||||
{
|
||||
disabled: false,
|
||||
},
|
||||
);
|
||||
const props = withDefaults(defineProps<FieldProps<DataSourceFieldsConfig>>(), {
|
||||
disabled: false,
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
change: [v: any, eventData?: ContainerChangeEventData];
|
||||
|
||||
@ -53,7 +53,7 @@ import { Coin } from '@element-plus/icons-vue';
|
||||
|
||||
import type { DataSchema, DataSourceSchema } from '@tmagic/core';
|
||||
import { getDesignConfig, TMagicAutocomplete, TMagicTag } from '@tmagic/design';
|
||||
import type { FieldProps, FormItem } from '@tmagic/form';
|
||||
import type { DataSourceInputConfig, FieldProps } from '@tmagic/form';
|
||||
import { getKeysArray, isNumber } from '@tmagic/utils';
|
||||
|
||||
import Icon from '@editor/components/Icon.vue';
|
||||
@ -64,18 +64,9 @@ defineOptions({
|
||||
name: 'MFieldsDataSourceInput',
|
||||
});
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<
|
||||
FieldProps<
|
||||
{
|
||||
type: 'data-source-input';
|
||||
} & FormItem
|
||||
>
|
||||
>(),
|
||||
{
|
||||
disabled: false,
|
||||
},
|
||||
);
|
||||
const props = withDefaults(defineProps<FieldProps<DataSourceInputConfig>>(), {
|
||||
disabled: false,
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
change: [value: string];
|
||||
|
||||
@ -39,6 +39,7 @@ import type { Id } from '@tmagic/core';
|
||||
import { TMagicButton, TMagicTooltip } from '@tmagic/design';
|
||||
import {
|
||||
createValues,
|
||||
type DataSourceMethodSelectConfig,
|
||||
type FieldProps,
|
||||
filterFunction,
|
||||
type FormState,
|
||||
@ -49,7 +50,7 @@ import {
|
||||
import CodeParams from '@editor/components/CodeParams.vue';
|
||||
import MIcon from '@editor/components/Icon.vue';
|
||||
import { useServices } from '@editor/hooks/use-services';
|
||||
import type { CodeParamStatement, DataSourceMethodSelectConfig, EventBus } from '@editor/type';
|
||||
import type { CodeParamStatement, EventBus } from '@editor/type';
|
||||
import { SideItemKey } from '@editor/type';
|
||||
|
||||
defineOptions({
|
||||
|
||||
@ -26,7 +26,7 @@ import { cloneDeep } from 'lodash-es';
|
||||
|
||||
import type { CodeBlockContent } from '@tmagic/core';
|
||||
import { TMagicButton, tMagicMessageBox } from '@tmagic/design';
|
||||
import type { ContainerChangeEventData, FieldProps } from '@tmagic/form';
|
||||
import type { ContainerChangeEventData, DataSourceMethodsConfig, FieldProps } from '@tmagic/form';
|
||||
import { type ColumnConfig, MagicTable } from '@tmagic/table';
|
||||
|
||||
import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
|
||||
@ -37,16 +37,9 @@ defineOptions({
|
||||
name: 'MFieldsDataSourceMethods',
|
||||
});
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<
|
||||
FieldProps<{
|
||||
type: 'data-source-methods';
|
||||
}>
|
||||
>(),
|
||||
{
|
||||
disabled: false,
|
||||
},
|
||||
);
|
||||
const props = withDefaults(defineProps<FieldProps<DataSourceMethodsConfig>>(), {
|
||||
disabled: false,
|
||||
});
|
||||
|
||||
const emit = defineEmits(['change']);
|
||||
|
||||
|
||||
@ -32,7 +32,7 @@ import { inject, Ref, ref } from 'vue';
|
||||
|
||||
import type { MockSchema } from '@tmagic/core';
|
||||
import { TMagicButton, tMagicMessageBox, TMagicSwitch } from '@tmagic/design';
|
||||
import { type FieldProps, type FormConfig, type FormState, MFormBox } from '@tmagic/form';
|
||||
import { type DataSourceMocksConfig, type FieldProps, type FormConfig, type FormState, MFormBox } from '@tmagic/form';
|
||||
import { type ColumnConfig, MagicTable } from '@tmagic/table';
|
||||
import { getDefaultValueFromFields } from '@tmagic/utils';
|
||||
|
||||
@ -47,16 +47,9 @@ defineOptions({
|
||||
name: 'MFieldsDataSourceMocks',
|
||||
});
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<
|
||||
FieldProps<{
|
||||
type: 'data-source-mocks';
|
||||
}>
|
||||
>(),
|
||||
{
|
||||
disabled: false,
|
||||
},
|
||||
);
|
||||
const props = withDefaults(defineProps<FieldProps<DataSourceMocksConfig>>(), {
|
||||
disabled: false,
|
||||
});
|
||||
|
||||
const emit = defineEmits(['change']);
|
||||
|
||||
|
||||
@ -24,11 +24,18 @@ import { computed, inject } from 'vue';
|
||||
import { Edit, View } from '@element-plus/icons-vue';
|
||||
|
||||
import { TMagicButton, TMagicTooltip } from '@tmagic/design';
|
||||
import { type FieldProps, filterFunction, type FormState, MSelect, type SelectConfig } from '@tmagic/form';
|
||||
import {
|
||||
type DataSourceSelect,
|
||||
type FieldProps,
|
||||
filterFunction,
|
||||
type FormState,
|
||||
MSelect,
|
||||
type SelectConfig,
|
||||
} from '@tmagic/form';
|
||||
|
||||
import MIcon from '@editor/components/Icon.vue';
|
||||
import { useServices } from '@editor/hooks/use-services';
|
||||
import type { DataSourceSelect, EventBus } from '@editor/type';
|
||||
import type { EventBus } from '@editor/type';
|
||||
import { SideItemKey } from '@editor/type';
|
||||
|
||||
defineOptions({
|
||||
|
||||
@ -18,8 +18,8 @@ import { computed, inject } from 'vue';
|
||||
import type { DisplayCond } from '@tmagic/core';
|
||||
import {
|
||||
type ContainerChangeEventData,
|
||||
type DisplayCondsConfig,
|
||||
type FieldProps,
|
||||
type FilterFunction,
|
||||
filterFunction,
|
||||
type FormState,
|
||||
type GroupListConfig,
|
||||
@ -37,17 +37,9 @@ const emit = defineEmits<{
|
||||
change: [value: DisplayCond[], eventData?: ContainerChangeEventData];
|
||||
}>();
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<
|
||||
FieldProps<{
|
||||
titlePrefix?: string;
|
||||
parentFields?: string[] | FilterFunction<string[]>;
|
||||
}>
|
||||
>(),
|
||||
{
|
||||
disabled: false,
|
||||
},
|
||||
);
|
||||
const props = withDefaults(defineProps<FieldProps<DisplayCondsConfig>>(), {
|
||||
disabled: false,
|
||||
});
|
||||
|
||||
const { dataSourceService } = useServices();
|
||||
const mForm = inject<FormState | undefined>('mForm');
|
||||
|
||||
@ -60,7 +60,10 @@ import { TMagicButton } from '@tmagic/design';
|
||||
import type {
|
||||
CascaderOption,
|
||||
ChildConfig,
|
||||
CodeSelectColConfig,
|
||||
ContainerChangeEventData,
|
||||
DataSourceMethodSelectConfig,
|
||||
EventSelectConfig,
|
||||
FieldProps,
|
||||
FormState,
|
||||
OnChangeHandlerData,
|
||||
@ -70,7 +73,6 @@ import { MContainer as MFormContainer, MPanel } from '@tmagic/form';
|
||||
import { DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX, traverseNode } from '@tmagic/utils';
|
||||
|
||||
import { useServices } from '@editor/hooks/use-services';
|
||||
import type { CodeSelectColConfig, DataSourceMethodSelectConfig, EventSelectConfig } from '@editor/type';
|
||||
import { getCascaderOptionsFromFields } from '@editor/utils';
|
||||
|
||||
defineOptions({
|
||||
|
||||
@ -63,7 +63,7 @@ import { ref, watchEffect } from 'vue';
|
||||
import { Delete, Plus } from '@element-plus/icons-vue';
|
||||
|
||||
import { TMagicButton, TMagicInput } from '@tmagic/design';
|
||||
import type { FieldProps, FormItem } from '@tmagic/form';
|
||||
import type { FieldProps, KeyValueConfig } from '@tmagic/form';
|
||||
|
||||
import CodeIcon from '@editor/icons/CodeIcon.vue';
|
||||
import MagicCodeEditor from '@editor/layouts/CodeEditor.vue';
|
||||
@ -72,19 +72,9 @@ defineOptions({
|
||||
name: 'MFieldsKeyValue',
|
||||
});
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<
|
||||
FieldProps<
|
||||
{
|
||||
type: 'key-value';
|
||||
advanced?: boolean;
|
||||
} & FormItem
|
||||
>
|
||||
>(),
|
||||
{
|
||||
disabled: false,
|
||||
},
|
||||
);
|
||||
const props = withDefaults(defineProps<FieldProps<KeyValueConfig>>(), {
|
||||
disabled: false,
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
change: [value: Record<string, any>];
|
||||
|
||||
@ -20,11 +20,10 @@ import { computed } from 'vue';
|
||||
import { Edit } from '@element-plus/icons-vue';
|
||||
|
||||
import { Id, NodeType } from '@tmagic/core';
|
||||
import { FieldProps } from '@tmagic/form';
|
||||
import { FieldProps, type PageFragmentSelectConfig } from '@tmagic/form';
|
||||
|
||||
import Icon from '@editor/components/Icon.vue';
|
||||
import { useServices } from '@editor/hooks/use-services';
|
||||
import type { PageFragmentSelectConfig } from '@editor/type';
|
||||
|
||||
defineOptions({
|
||||
name: 'MFieldsPageFragmentSelect',
|
||||
|
||||
@ -47,7 +47,7 @@ import { throttle } from 'lodash-es';
|
||||
|
||||
import type { Id, MNode } from '@tmagic/core';
|
||||
import { TMagicButton, TMagicTooltip } from '@tmagic/design';
|
||||
import type { FieldProps, FormItem, FormState } from '@tmagic/form';
|
||||
import type { FieldProps, FormState, UISelectConfig } from '@tmagic/form';
|
||||
import { getIdFromEl } from '@tmagic/utils';
|
||||
|
||||
import { useServices } from '@editor/hooks/use-services';
|
||||
@ -57,7 +57,7 @@ defineOptions({
|
||||
name: 'MFieldsUISelect',
|
||||
});
|
||||
|
||||
const props = defineProps<FieldProps<{ type: 'ui-select' } & FormItem>>();
|
||||
const props = defineProps<FieldProps<UISelectConfig>>();
|
||||
|
||||
const emit = defineEmits(['change']);
|
||||
|
||||
|
||||
@ -21,27 +21,8 @@ import type EventEmitter from 'events';
|
||||
import Sortable, { type Options, type SortableEvent } from 'sortablejs';
|
||||
import type { PascalCasedProperties } from 'type-fest';
|
||||
|
||||
import type {
|
||||
CodeBlockContent,
|
||||
CodeBlockDSL,
|
||||
DataSourceFieldType,
|
||||
DataSourceSchema,
|
||||
Id,
|
||||
MApp,
|
||||
MContainer,
|
||||
MNode,
|
||||
MPage,
|
||||
MPageFragment,
|
||||
} from '@tmagic/core';
|
||||
import type {
|
||||
ChildConfig,
|
||||
FilterFunction,
|
||||
FormConfig,
|
||||
FormItem,
|
||||
FormState,
|
||||
Input,
|
||||
TableColumnConfig,
|
||||
} from '@tmagic/form';
|
||||
import type { CodeBlockContent, CodeBlockDSL, Id, MApp, MContainer, MNode, MPage, MPageFragment } from '@tmagic/core';
|
||||
import type { FormConfig, TableColumnConfig } from '@tmagic/form';
|
||||
import type StageCore from '@tmagic/stage';
|
||||
import type {
|
||||
ContainerHighlightType,
|
||||
@ -562,25 +543,6 @@ export interface HistoryState {
|
||||
canUndo: boolean;
|
||||
}
|
||||
|
||||
export interface EventSelectConfig {
|
||||
name: string;
|
||||
type: 'event-select';
|
||||
src: 'datasource' | 'component';
|
||||
labelWidth?: string;
|
||||
/** 事件名称表单配置 */
|
||||
eventNameConfig?: FormItem;
|
||||
/** 动作类型配置 */
|
||||
actionTypeConfig?: FormItem;
|
||||
/** 联动组件配置 */
|
||||
targetCompConfig?: FormItem;
|
||||
/** 联动组件动作配置 */
|
||||
compActionConfig?: FormItem;
|
||||
/** 联动代码配置 */
|
||||
codeActionConfig?: FormItem;
|
||||
/** 联动数据源配置 */
|
||||
dataSourceActionConfig?: FormItem;
|
||||
}
|
||||
|
||||
export enum KeyBindingCommand {
|
||||
/** 复制 */
|
||||
COPY_NODE = 'tmagic-system-copy-node',
|
||||
@ -636,69 +598,6 @@ export interface KeyBindingCacheItem {
|
||||
bound: boolean;
|
||||
}
|
||||
|
||||
export interface CodeSelectColConfig extends FormItem {
|
||||
type: 'code-select-col';
|
||||
/** 是否可以编辑代码块，disable表示的是是否可以选择代码块 */
|
||||
notEditable?: boolean | FilterFunction;
|
||||
}
|
||||
|
||||
export interface PageFragmentSelectConfig extends FormItem {
|
||||
type: 'page-fragment-select';
|
||||
}
|
||||
|
||||
export interface DataSourceSelect extends FormItem, Input {
|
||||
type: 'data-source-select';
|
||||
/** 数据源类型: base、http... */
|
||||
dataSourceType?: string;
|
||||
/** 是否要编译成数据源的data。
|
||||
* id: 不编译，就是要数据源id;
|
||||
* value: 要编译（数据源data）
|
||||
* */
|
||||
value?: 'id' | 'value';
|
||||
/** 是否可以编辑数据源，disable表示的是是否可以选择数据源 */
|
||||
notEditable?: boolean | FilterFunction;
|
||||
}
|
||||
|
||||
export interface DataSourceMethodSelectConfig extends FormItem {
|
||||
type: 'data-source-method-select';
|
||||
/** 是否可以编辑数据源，disable表示的是是否可以选择数据源 */
|
||||
notEditable?: boolean | FilterFunction;
|
||||
}
|
||||
|
||||
export interface DataSourceFieldSelectConfig extends FormItem {
|
||||
type: 'data-source-field-select';
|
||||
/**
|
||||
* 是否要编译成数据源的data。
|
||||
* key: 不编译，就是要数据源id和field name;
|
||||
* value: 要编译（数据源data[`${filed}`]）
|
||||
* */
|
||||
value?: 'key' | 'value';
|
||||
/** 是否严格的遵守父子节点不互相关联 */
|
||||
checkStrictly?:
|
||||
| boolean
|
||||
| ((
|
||||
mForm: FormState | undefined,
|
||||
data: {
|
||||
model: Record<any, any>;
|
||||
values: Record<any, any>;
|
||||
parent?: Record<any, any>;
|
||||
formValue: Record<any, any>;
|
||||
prop: string;
|
||||
config: DataSourceFieldSelectConfig;
|
||||
dataSource?: DataSourceSchema;
|
||||
},
|
||||
) => boolean);
|
||||
dataSourceFieldType?: DataSourceFieldType[];
|
||||
fieldConfig?: ChildConfig;
|
||||
/** 是否可以编辑数据源，disable表示的是是否可以选择数据源 */
|
||||
notEditable?: boolean | FilterFunction;
|
||||
}
|
||||
|
||||
export interface CondOpSelectConfig extends FormItem {
|
||||
type: 'cond-op';
|
||||
parentFields?: string[];
|
||||
}
|
||||
|
||||
/** 可新增的数据源类型选项 */
|
||||
export interface DatasourceTypeOption {
|
||||
/** 数据源类型 */
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import type { FormConfig } from '@tmagic/form';
|
||||
import { defineFormConfig } from '@tmagic/form';
|
||||
|
||||
export default function (): FormConfig {
|
||||
return [
|
||||
export default () =>
|
||||
defineFormConfig([
|
||||
{
|
||||
name: 'id',
|
||||
type: 'hidden',
|
||||
@ -26,5 +26,4 @@ export default function (): FormConfig {
|
||||
name: 'description',
|
||||
text: '描述',
|
||||
},
|
||||
];
|
||||
}
|
||||
]);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { FormConfig } from '@tmagic/form';
|
||||
import { defineFormConfig } from '@tmagic/form';
|
||||
|
||||
export default [
|
||||
export default defineFormConfig([
|
||||
{
|
||||
name: 'autoFetch',
|
||||
text: '自动请求',
|
||||
@ -59,4 +59,4 @@ export default [
|
||||
},
|
||||
],
|
||||
},
|
||||
] as FormConfig;
|
||||
]);
|
||||
|
||||
41
packages/form-schema/package.json
Normal file
41
packages/form-schema/package.json
Normal file
@ -0,0 +1,41 @@
|
||||
{
|
||||
"version": "1.5.16",
|
||||
"name": "@tmagic/form-schema",
|
||||
"type": "module",
|
||||
"main": "dist/tmagic-form-schema.umd.cjs",
|
||||
"module": "dist/tmagic-form-schema.js",
|
||||
"types": "types/index.d.ts",
|
||||
"exports": {
|
||||
".": {
|
||||
"types": "./types/index.d.ts",
|
||||
"import": "./dist/tmagic-form-schema.js",
|
||||
"require": "./dist/tmagic-form-schema.umd.cjs"
|
||||
},
|
||||
"./*": "./*"
|
||||
},
|
||||
"files": [
|
||||
"dist",
|
||||
"types",
|
||||
"src"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"license": "Apache-2.0",
|
||||
"repository": {
|
||||
"directory": "packages/form-schema",
|
||||
"type": "git",
|
||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tmagic/schema": "workspace:*"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"typescript": "*"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"typescript": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
}
|
||||
783
packages/form-schema/src/base.ts
Normal file
783
packages/form-schema/src/base.ts
Normal file
@ -0,0 +1,783 @@
|
||||
import type { EditorChildConfig } from './editor';
|
||||
|
||||
type ElMessageBoxShortcutMethod = ((
|
||||
message: string,
|
||||
title: string,
|
||||
options?: any,
|
||||
appContext?: any | null,
|
||||
) => Promise<any>) &
|
||||
((message: string, options?: any, appContext?: any | null) => Promise<any>);
|
||||
|
||||
export interface ChangeRecord {
|
||||
propPath?: string;
|
||||
value: any;
|
||||
}
|
||||
|
||||
export interface OnChangeHandlerData {
|
||||
model: FormValue;
|
||||
values?: FormValue;
|
||||
parent?: FormValue;
|
||||
formValue?: FormValue;
|
||||
config: any;
|
||||
prop: string;
|
||||
changeRecords: ChangeRecord[];
|
||||
setModel: (prop: string, value: any) => void;
|
||||
}
|
||||
|
||||
export type FormValue = Record<string | number, any>;
|
||||
|
||||
export type OnChangeHandler = (mForm: FormState | undefined, value: any, data: OnChangeHandlerData) => any;
|
||||
|
||||
type DefaultValueFunction = (mForm: FormState | undefined) => any;
|
||||
|
||||
export interface FieldProps<T = any> {
|
||||
config: T;
|
||||
model: any;
|
||||
initValues?: any;
|
||||
values?: any;
|
||||
name: string;
|
||||
prop: string;
|
||||
disabled?: boolean;
|
||||
size?: 'large' | 'default' | 'small';
|
||||
lastValues?: Record<string, any>;
|
||||
}
|
||||
|
||||
/**
|
||||
* 整个表单的数据，会注入到各个组件中去
|
||||
*/
|
||||
export type FormState = {
|
||||
config: FormConfig;
|
||||
popperClass?: string;
|
||||
initValues: FormValue;
|
||||
lastValues: FormValue;
|
||||
isCompare: boolean;
|
||||
values: FormValue;
|
||||
$emit: (event: string, ...args: any[]) => void;
|
||||
keyProp?: string;
|
||||
parentValues?: FormValue;
|
||||
setField: (prop: string, field: any) => void;
|
||||
getField: (prop: string) => any;
|
||||
deleteField: (prop: string) => any;
|
||||
$messageBox: {
|
||||
alert: ElMessageBoxShortcutMethod;
|
||||
confirm: ElMessageBoxShortcutMethod;
|
||||
prompt: ElMessageBoxShortcutMethod;
|
||||
close(): void;
|
||||
};
|
||||
$message: {
|
||||
success: (msg: string) => void;
|
||||
warning: (msg: string) => void;
|
||||
info: (msg: string) => void;
|
||||
error: (msg: string) => void;
|
||||
closeAll: () => void;
|
||||
};
|
||||
[key: string]: any;
|
||||
};
|
||||
|
||||
/**
|
||||
* 排序配置
|
||||
*/
|
||||
export interface SortProp {
|
||||
/** 跟该值排序 */
|
||||
prop: string;
|
||||
order: 'ascending' | 'descending';
|
||||
}
|
||||
|
||||
export interface FormItem {
|
||||
/** vnode的key值，默认是遍历数组时的index */
|
||||
__key?: string | number;
|
||||
/** 表单域标签的的宽度，例如 '50px'。支持 auto。 */
|
||||
labelWidth?: string;
|
||||
/** label 标签的title属性 */
|
||||
labelTitle?: string;
|
||||
className?: string;
|
||||
/** 表单组件类型 */
|
||||
type?: string | TypeFunction;
|
||||
/** 字段名 */
|
||||
name?: string | number;
|
||||
/** 额外的提示信息，和 help 类似，当提示文案同时出现时，可以使用这个。 */
|
||||
extra?: string | FilterFunction<string>;
|
||||
/** 配置提示信息 */
|
||||
tooltip?: string | FilterFunction<string>;
|
||||
/** 是否置灰 */
|
||||
disabled?: boolean | FilterFunction;
|
||||
/** 使用表单中的值作为key，例如配置了text，则使用model.text作为key */
|
||||
key?: string;
|
||||
/** 是否显示 */
|
||||
display?: boolean | 'expand' | FilterFunction<boolean | 'expand'>;
|
||||
/** 值发生改变时调用的方法 */
|
||||
onChange?: OnChangeHandler;
|
||||
/** label 标签的文本 */
|
||||
text?: string | FilterFunction<string>;
|
||||
/** 右侧感叹号 */
|
||||
tip?: string;
|
||||
|
||||
filter?: 'number' | OnChangeHandler;
|
||||
/** 是否去除首尾空格 */
|
||||
trim?: boolean;
|
||||
/** 默认值 */
|
||||
defaultValue?: any | DefaultValueFunction;
|
||||
/** 表单验证规则 */
|
||||
rules?: Rule[];
|
||||
extensible?: boolean;
|
||||
dynamicKey?: string;
|
||||
/** 是否需要显示`展开更多配置` */
|
||||
expand?: boolean;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
export interface ContainerCommonConfig {
|
||||
items: FormConfig;
|
||||
onInitValue?: (
|
||||
mForm: FormState | undefined,
|
||||
data: {
|
||||
formValue: FormValue;
|
||||
initValue: FormValue;
|
||||
},
|
||||
) => FormValue;
|
||||
extensible?: boolean;
|
||||
}
|
||||
|
||||
export interface Rule {
|
||||
message?: string;
|
||||
/** 系统提供的验证器类型。有：string,number,boolean,method,regexp,integer,float,array,object,enum,date,url,hex,email,any */
|
||||
type?: string;
|
||||
/** 是否必填 */
|
||||
required?: boolean;
|
||||
trigger?: string;
|
||||
/** 自定义验证器 */
|
||||
validator?: (
|
||||
options: {
|
||||
rule: string;
|
||||
value: any;
|
||||
callback: Function;
|
||||
source: Object;
|
||||
options: {
|
||||
messages: string;
|
||||
};
|
||||
},
|
||||
data: {
|
||||
/** 表单的初始值 */
|
||||
values: FormValue;
|
||||
/** 当前作用域下的值 */
|
||||
model: FormValue;
|
||||
parent: FormValue;
|
||||
/** 整个表单的值 */
|
||||
formValue: FormValue;
|
||||
prop: string;
|
||||
config: any;
|
||||
},
|
||||
mForm: FormState | undefined,
|
||||
) => void;
|
||||
}
|
||||
|
||||
export interface Input {
|
||||
/** 输入框没有内容时显示的文案 */
|
||||
placeholder?: string;
|
||||
}
|
||||
|
||||
export type TypeFunction = (
|
||||
mForm: FormState | undefined,
|
||||
data: {
|
||||
model: FormValue;
|
||||
},
|
||||
) => string;
|
||||
|
||||
export type FilterFunction<T = boolean> = (
|
||||
mForm: FormState | undefined,
|
||||
data: {
|
||||
model: FormValue;
|
||||
values: FormValue;
|
||||
parent?: FormValue;
|
||||
formValue: FormValue;
|
||||
prop: string;
|
||||
config: any;
|
||||
index?: number;
|
||||
},
|
||||
) => T;
|
||||
|
||||
/**
|
||||
* 下拉选择器选项配置
|
||||
*/
|
||||
export interface SelectConfigOption {
|
||||
/** 选项的标签 */
|
||||
text: string | SelectOptionTextFunction;
|
||||
/** 选项的值 */
|
||||
value: any | SelectOptionValueFunction;
|
||||
/** 是否禁用该选项 */
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
export interface SelectOption {
|
||||
/** 选项的标签 */
|
||||
text: string;
|
||||
/** 选项的值 */
|
||||
value: any;
|
||||
/** 是否禁用该选项 */
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* 下拉选择器分组选项配置
|
||||
*/
|
||||
export interface SelectConfigGroupOption {
|
||||
/** 分组的组名 */
|
||||
label: string;
|
||||
/** 是否禁用该选项组 */
|
||||
disabled: boolean;
|
||||
options: {
|
||||
/** 选项的标签 */
|
||||
label: string | SelectOptionTextFunction;
|
||||
/** 选项的值 */
|
||||
value: any | SelectOptionValueFunction;
|
||||
/** 是否禁用该选项 */
|
||||
disabled?: boolean;
|
||||
}[];
|
||||
}
|
||||
|
||||
export interface SelectGroupOption {
|
||||
/** 分组的组名 */
|
||||
label: string;
|
||||
/** 是否禁用该选项组 */
|
||||
disabled: boolean;
|
||||
options: {
|
||||
/** 选项的标签 */
|
||||
label?: string;
|
||||
text?: string;
|
||||
/** 选项的值 */
|
||||
value: any;
|
||||
/** 是否禁用该选项 */
|
||||
disabled?: boolean;
|
||||
}[];
|
||||
}
|
||||
|
||||
type SelectOptionFunction = (
|
||||
mForm: FormState | undefined,
|
||||
data: {
|
||||
model: any;
|
||||
prop?: string;
|
||||
formValues: any;
|
||||
formValue: any;
|
||||
config: any;
|
||||
},
|
||||
) => SelectOption[] | SelectGroupOption[];
|
||||
|
||||
type RemoteSelectOptionBodyFunction = (
|
||||
mForm: FormState | undefined,
|
||||
data: {
|
||||
model: any;
|
||||
formValue: any;
|
||||
formValues: any;
|
||||
config: any;
|
||||
},
|
||||
) => Record<string, any>;
|
||||
|
||||
type RemoteSelectOptionAfterRequestFunction = (
|
||||
mForm: FormState | undefined,
|
||||
res: any,
|
||||
data: {
|
||||
model: any;
|
||||
formValue: any;
|
||||
formValues: any;
|
||||
config: any;
|
||||
prop: string;
|
||||
postOptions: Record<string, any>;
|
||||
},
|
||||
) => any;
|
||||
|
||||
type RemoteSelectOptionBeforeRequestFunction = (
|
||||
mForm: FormState | undefined,
|
||||
postOptions: Record<string, any>,
|
||||
data: {
|
||||
model: any;
|
||||
formValue: any;
|
||||
formValues: any;
|
||||
config: any;
|
||||
prop: string;
|
||||
},
|
||||
) => Record<string, any>;
|
||||
|
||||
type RemoteSelectOptionItemFunction = (optionsData: Record<string, any>) => SelectOption[] | SelectGroupOption[];
|
||||
type SelectOptionValueFunction = (item: Record<string, any>) => any;
|
||||
type SelectOptionTextFunction = (item: Record<string, any>) => string;
|
||||
|
||||
export interface CascaderOption {
|
||||
/** 指定选项的值为选项对象的某个属性值 */
|
||||
value: any;
|
||||
/** 指定选项标签为选项对象的某个属性值 */
|
||||
label: string;
|
||||
/** 指定选项的子选项为选项对象的某个属性值 */
|
||||
children?: CascaderOption[];
|
||||
}
|
||||
|
||||
/**
|
||||
* 日期范围
|
||||
*/
|
||||
export interface DaterangeConfig extends FormItem {
|
||||
type: 'daterange';
|
||||
defaultTime?: Date[];
|
||||
names?: string[];
|
||||
valueFormat?: string;
|
||||
dateFormat?: string;
|
||||
timeFormat?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* html编辑器
|
||||
*/
|
||||
export interface HtmlField extends FormItem {
|
||||
type: 'html';
|
||||
/** 是否异步加载编辑的内容 */
|
||||
asyncLoad?: {
|
||||
name: string | number;
|
||||
};
|
||||
}
|
||||
|
||||
/** 展示文本，不可编辑 */
|
||||
export interface DisplayConfig extends FormItem {
|
||||
type: 'display';
|
||||
initValue?: string | number | boolean;
|
||||
}
|
||||
|
||||
/** 文本输入框 */
|
||||
export interface TextConfig extends FormItem, Input {
|
||||
type?: 'text';
|
||||
tooltip?: string;
|
||||
/** 后置元素，一般为标签或按钮 */
|
||||
append?:
|
||||
| string
|
||||
| {
|
||||
text: string;
|
||||
value?: 0 | 1;
|
||||
type: 'button';
|
||||
handler?: (
|
||||
mForm: FormState | undefined,
|
||||
data: {
|
||||
model: any;
|
||||
values: any;
|
||||
},
|
||||
) => void;
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 文本域
|
||||
*/
|
||||
export interface TextareaConfig extends FormItem {
|
||||
type: 'textarea';
|
||||
placeholder?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 计数器
|
||||
*/
|
||||
export interface NumberConfig extends FormItem {
|
||||
type?: 'number';
|
||||
tooltip?: string;
|
||||
min?: number;
|
||||
max?: number;
|
||||
step?: number;
|
||||
placeholder?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 数值范围
|
||||
*/
|
||||
export interface NumberRangeConfig extends FormItem {
|
||||
type?: 'number-range';
|
||||
}
|
||||
|
||||
/**
|
||||
* 隐藏域
|
||||
*/
|
||||
export interface HiddenConfig extends FormItem {
|
||||
type: 'hidden';
|
||||
}
|
||||
|
||||
/**
|
||||
* 日期选择器
|
||||
*/
|
||||
export interface DateConfig extends FormItem, Input {
|
||||
type: 'date';
|
||||
format?: 'YYYY-MM-dd HH:mm:ss' | string;
|
||||
valueFormat?: 'YYYY-MM-dd HH:mm:ss' | string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 日期时间选择器
|
||||
*/
|
||||
export interface DateTimeConfig extends FormItem, Input {
|
||||
type: 'datetime';
|
||||
defaultTime?: Date[];
|
||||
format?: 'YYYY-MM-dd HH:mm:ss' | string;
|
||||
valueFormat?: 'YYYY-MM-dd HH:mm:ss' | string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 时间选择器
|
||||
*/
|
||||
export interface TimeConfig extends FormItem, Input {
|
||||
type: 'time';
|
||||
format?: 'HH:mm:ss' | string;
|
||||
valueFormat?: 'HH:mm:ss' | string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 单个多选框
|
||||
*/
|
||||
export interface CheckboxConfig extends FormItem {
|
||||
type: 'checkbox';
|
||||
activeValue?: number | string;
|
||||
inactiveValue?: number | string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 开关
|
||||
*/
|
||||
export interface SwitchConfig extends FormItem {
|
||||
type: 'switch';
|
||||
activeValue?: boolean | number | string;
|
||||
inactiveValue?: boolean | number | string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 单选框
|
||||
*/
|
||||
export interface RadioGroupConfig extends FormItem {
|
||||
type: 'radio-group';
|
||||
childType?: 'default' | 'button';
|
||||
options: {
|
||||
value: string | number | boolean;
|
||||
text: string;
|
||||
icon?: any;
|
||||
tooltip?: string;
|
||||
}[];
|
||||
}
|
||||
|
||||
/**
|
||||
* 颜色选择器
|
||||
*/
|
||||
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: CheckboxGroupOption[] | FilterFunction<CheckboxGroupOption[]>;
|
||||
}
|
||||
|
||||
/**
|
||||
* 下拉选择器
|
||||
*/
|
||||
export interface SelectConfig extends FormItem, Input {
|
||||
type: 'select';
|
||||
clearable?: boolean;
|
||||
multiple?: boolean;
|
||||
valueKey?: string;
|
||||
allowCreate?: boolean;
|
||||
filterable?: boolean;
|
||||
group?: boolean;
|
||||
options?: SelectConfigOption[] | SelectConfigGroupOption[] | SelectOptionFunction;
|
||||
remote?: true;
|
||||
option?: {
|
||||
url: string | ((mForm: FormState | undefined, data: { model: any; formValue: any }) => string);
|
||||
initUrl?: string | ((mForm: FormState | undefined, data: { model: any; formValue: any }) => string);
|
||||
method?: 'jsonp' | string;
|
||||
cache?: boolean;
|
||||
timeout?: number;
|
||||
mode?: string;
|
||||
headers?: {
|
||||
[key: string]: string;
|
||||
};
|
||||
json?: false | boolean;
|
||||
body?: Record<string, any> | RemoteSelectOptionBodyFunction;
|
||||
initBody?: Record<string, any> | RemoteSelectOptionBodyFunction;
|
||||
jsonpCallback?: 'callback' | string;
|
||||
afterRequest?: RemoteSelectOptionAfterRequestFunction;
|
||||
afterInitRequest?: RemoteSelectOptionAfterRequestFunction;
|
||||
beforeRequest?: RemoteSelectOptionBeforeRequestFunction;
|
||||
beforeInitRequest?: RemoteSelectOptionBeforeRequestFunction;
|
||||
root?: string;
|
||||
totalKey?: string;
|
||||
initRoot?: string;
|
||||
item?: RemoteSelectOptionItemFunction;
|
||||
value?: string | SelectOptionValueFunction;
|
||||
text?: string | SelectOptionTextFunction;
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 链接
|
||||
*/
|
||||
export interface LinkConfig extends FormItem {
|
||||
type: 'link';
|
||||
href?: string | ((model: Record<string, any>) => string);
|
||||
css?: {
|
||||
[key: string]: string | number;
|
||||
};
|
||||
disabledCss?: {
|
||||
[key: string]: string | number;
|
||||
};
|
||||
formTitle?: string;
|
||||
formWidth?: number | string;
|
||||
displayText?:
|
||||
| ((
|
||||
mForm: FormState | undefined,
|
||||
data: {
|
||||
model: Record<any, any>;
|
||||
},
|
||||
) => string)
|
||||
| string;
|
||||
form:
|
||||
| FormConfig
|
||||
| ((
|
||||
mForm: FormState | undefined,
|
||||
data: {
|
||||
model: Record<any, any>;
|
||||
values: Record<any, any>;
|
||||
},
|
||||
) => FormConfig);
|
||||
fullscreen?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* 级联选择器
|
||||
*/
|
||||
export interface CascaderConfig extends FormItem, Input {
|
||||
type: 'cascader';
|
||||
remote?: boolean;
|
||||
/** 在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值，默认 true */
|
||||
emitPath?: boolean;
|
||||
/** 是否多选，默认 false */
|
||||
multiple?: boolean;
|
||||
/** 是否严格的遵守父子节点不互相关联，默认 false */
|
||||
checkStrictly?: boolean | FilterFunction<boolean>;
|
||||
/** 弹出内容的自定义类名 */
|
||||
popperClass?: string;
|
||||
/** 合并成字符串时的分隔符 */
|
||||
valueSeparator?: string | FilterFunction<string>;
|
||||
options?:
|
||||
| ((
|
||||
mForm: FormState | undefined,
|
||||
data: {
|
||||
model: Record<any, any>;
|
||||
prop: string;
|
||||
formValue: Record<any, any>;
|
||||
},
|
||||
) => CascaderOption[])
|
||||
| CascaderOption[];
|
||||
option?: {
|
||||
url: string;
|
||||
cache?: boolean;
|
||||
timeout?: number;
|
||||
body?: Record<string, any> | RemoteSelectOptionBodyFunction;
|
||||
root: 'string';
|
||||
item: (optionsData: Record<string, any>) => CascaderOption[];
|
||||
};
|
||||
}
|
||||
|
||||
export interface DynamicFieldConfig extends FormItem {
|
||||
type: 'dynamic-field';
|
||||
returnFields: (
|
||||
config: DynamicFieldConfig,
|
||||
model: Record<any, any>,
|
||||
request: Object,
|
||||
) => {
|
||||
name: string;
|
||||
label: string;
|
||||
defaultValue: string;
|
||||
}[];
|
||||
dynamicKey: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 分组容器
|
||||
*/
|
||||
export interface RowConfig extends FormItem {
|
||||
type: 'row';
|
||||
span: number;
|
||||
items: ({ span?: number } & (ChildConfig | EditorChildConfig))[];
|
||||
}
|
||||
|
||||
/**
|
||||
* 标签页容器
|
||||
*/
|
||||
export interface TabPaneConfig {
|
||||
status?: string;
|
||||
title: string;
|
||||
lazy?: boolean;
|
||||
labelWidth?: string;
|
||||
items: FormConfig;
|
||||
onTabClick?: (mForm: FormState | undefined, tab: any, data: any) => void;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
export interface TabConfig extends FormItem, ContainerCommonConfig {
|
||||
type: 'tab' | 'dynamic-tab';
|
||||
tabType?: string;
|
||||
editable?: boolean;
|
||||
dynamic?: boolean;
|
||||
tabPosition?: 'top' | 'right' | 'bottom' | 'left';
|
||||
items: TabPaneConfig[];
|
||||
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;
|
||||
}
|
||||
|
||||
/**
|
||||
* 分组
|
||||
*/
|
||||
export interface FieldsetConfig extends FormItem, ContainerCommonConfig {
|
||||
type: 'fieldset';
|
||||
checkbox?: boolean;
|
||||
expand?: boolean;
|
||||
legend?: string;
|
||||
schematic?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 面板容器
|
||||
*/
|
||||
export interface PanelConfig extends FormItem, ContainerCommonConfig {
|
||||
type: 'panel';
|
||||
expand?: boolean;
|
||||
title?: string;
|
||||
schematic?: string;
|
||||
}
|
||||
|
||||
export interface TableColumnConfig extends FormItem {
|
||||
name?: string;
|
||||
label: string;
|
||||
width?: string | number;
|
||||
sortable?: boolean;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
/**
|
||||
* 表格容器
|
||||
*/
|
||||
export interface TableConfig extends FormItem {
|
||||
type: 'table' | 'groupList' | 'group-list';
|
||||
items: TableColumnConfig[];
|
||||
tableItems?: TableColumnConfig[];
|
||||
groupItems?: TableColumnConfig[];
|
||||
enableToggleMode?: boolean;
|
||||
/** 最大行数 */
|
||||
max?: number;
|
||||
/** 最大高度 */
|
||||
maxHeight?: number | string;
|
||||
border?: boolean;
|
||||
/** 显示行号 */
|
||||
showIndex?: boolean;
|
||||
/** 操作栏宽度 */
|
||||
operateColWidth?: number | string;
|
||||
pagination?: boolean;
|
||||
enum?: any[];
|
||||
/** 是否显示添加按钮 */
|
||||
addable?: (mForm: FormState | undefined, data: any) => boolean | 'undefined' | boolean;
|
||||
/** 是否显示删除按钮 */
|
||||
delete?: (model: any, index: number, values: any) => boolean | boolean;
|
||||
copyable?: (model: any, data: any) => boolean | boolean;
|
||||
/** 是否显示导入按钮 */
|
||||
importable?: (mForm: FormState | undefined, data: any) => boolean | 'undefined' | boolean;
|
||||
/** 是否显示checkbox */
|
||||
selection?: (mForm: FormState | undefined, data: any) => boolean | boolean | 'single';
|
||||
/** 新增的默认行 */
|
||||
defaultAdd?: (mForm: FormState | undefined, data: any) => any;
|
||||
onSelect?: (mForm: FormState | undefined, data: any) => any;
|
||||
defautSort?: SortProp;
|
||||
defaultSort?: SortProp;
|
||||
dropSort?: boolean;
|
||||
/** 是否显示全屏按钮 */
|
||||
enableFullscreen?: boolean;
|
||||
fixed?: boolean;
|
||||
itemExtra?: string | FilterFunction<string>;
|
||||
rowKey?: string;
|
||||
/** table 新增行时前置回调 */
|
||||
beforeAddRow?: (mForm: FormState | undefined, data: any) => boolean;
|
||||
}
|
||||
|
||||
export interface GroupListConfig extends FormItem {
|
||||
type: 'table' | 'groupList' | 'group-list';
|
||||
span?: number;
|
||||
enableToggleMode?: boolean;
|
||||
items: FormConfig;
|
||||
groupItems?: FormConfig;
|
||||
tableItems?: FormConfig;
|
||||
titleKey?: string;
|
||||
titlePrefix?: string;
|
||||
title?: string | FilterFunction<string>;
|
||||
itemExtra?: string | FilterFunction<string>;
|
||||
expandAll?: boolean;
|
||||
addable?: (mForm: FormState | undefined, data: any) => boolean | 'undefined' | boolean;
|
||||
defaultAdd?: (mForm: FormState | undefined, data: any) => any;
|
||||
delete?: (model: any, index: number | string | symbol, values: any) => boolean | boolean;
|
||||
copyable?: FilterFunction<boolean>;
|
||||
movable?: (
|
||||
mForm: FormState | undefined,
|
||||
index: number | string | symbol,
|
||||
model: any,
|
||||
groupModel: any,
|
||||
) => boolean | boolean;
|
||||
moveSpecifyLocation?: boolean;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
interface StepItemConfig extends FormItem, ContainerCommonConfig {
|
||||
title: string;
|
||||
}
|
||||
|
||||
export interface StepConfig extends FormItem {
|
||||
type: 'step';
|
||||
/** 每个 step 的间距，不填写将自适应间距。支持百分比。 */
|
||||
space?: string | number;
|
||||
items: StepItemConfig[];
|
||||
}
|
||||
|
||||
export interface ComponentConfig extends FormItem {
|
||||
type: 'component';
|
||||
id: string;
|
||||
extend: any;
|
||||
display: any;
|
||||
}
|
||||
|
||||
export type ChildConfig =
|
||||
| FormItem
|
||||
| TabConfig
|
||||
| RowConfig
|
||||
| FieldsetConfig
|
||||
| PanelConfig
|
||||
| TableConfig
|
||||
| GroupListConfig
|
||||
| StepConfig
|
||||
| DisplayConfig
|
||||
| TextConfig
|
||||
| HiddenConfig
|
||||
| LinkConfig
|
||||
| DaterangeConfig
|
||||
| SelectConfig
|
||||
| CascaderConfig
|
||||
| HtmlField
|
||||
| DateConfig
|
||||
| ColorPickConfig
|
||||
| TimeConfig
|
||||
| DateTimeConfig
|
||||
| CheckboxConfig
|
||||
| SwitchConfig
|
||||
| RadioGroupConfig
|
||||
| TextareaConfig
|
||||
| DynamicFieldConfig
|
||||
| ComponentConfig;
|
||||
|
||||
export type FormConfig = (ChildConfig | EditorChildConfig)[];
|
||||
155
packages/form-schema/src/editor.ts
Normal file
155
packages/form-schema/src/editor.ts
Normal file
@ -0,0 +1,155 @@
|
||||
import type { DataSourceFieldType, DataSourceSchema } from '@tmagic/schema';
|
||||
|
||||
import type { ChildConfig, FilterFunction, FormItem, FormState, Input } from './base';
|
||||
|
||||
export interface DataSourceFieldSelectConfig extends FormItem {
|
||||
type: 'data-source-field-select';
|
||||
/**
|
||||
* 是否要编译成数据源的data。
|
||||
* key: 不编译，就是要数据源id和field name;
|
||||
* value: 要编译（数据源data[`${filed}`]）
|
||||
* */
|
||||
value?: 'key' | 'value';
|
||||
/** 是否严格的遵守父子节点不互相关联 */
|
||||
checkStrictly?:
|
||||
| boolean
|
||||
| ((
|
||||
mForm: FormState | undefined,
|
||||
data: {
|
||||
model: Record<any, any>;
|
||||
values: Record<any, any>;
|
||||
parent?: Record<any, any>;
|
||||
formValue: Record<any, any>;
|
||||
prop: string;
|
||||
config: DataSourceFieldSelectConfig;
|
||||
dataSource?: DataSourceSchema;
|
||||
},
|
||||
) => boolean);
|
||||
dataSourceFieldType?: DataSourceFieldType[];
|
||||
fieldConfig?: ChildConfig;
|
||||
/** 是否可以编辑数据源，disable表示的是是否可以选择数据源 */
|
||||
notEditable?: boolean | FilterFunction;
|
||||
}
|
||||
|
||||
export interface CodeConfig extends FormItem {
|
||||
type: 'code';
|
||||
language?: string;
|
||||
options?: {
|
||||
[key: string]: any;
|
||||
};
|
||||
height?: string;
|
||||
parse?: boolean;
|
||||
}
|
||||
|
||||
export interface CodeLinkConfig extends FormItem {
|
||||
type: 'code-link';
|
||||
formTitle?: string;
|
||||
codeOptions?: Object;
|
||||
}
|
||||
|
||||
export interface CodeSelectConfig extends FormItem {
|
||||
type: 'code-select';
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export interface CodeSelectColConfig extends FormItem {
|
||||
type: 'code-select-col';
|
||||
/** 是否可以编辑代码块，disable表示的是是否可以选择代码块 */
|
||||
notEditable?: boolean | FilterFunction;
|
||||
}
|
||||
|
||||
export interface CondOpSelectConfig extends FormItem {
|
||||
type: 'cond-op';
|
||||
parentFields?: string[];
|
||||
}
|
||||
|
||||
export interface DataSourceFieldsConfig extends FormItem {
|
||||
type: 'data-source-fields';
|
||||
}
|
||||
|
||||
export interface DataSourceInputConfig extends FormItem {
|
||||
type: 'data-source-input';
|
||||
}
|
||||
|
||||
export interface DataSourceMethodsConfig extends FormItem {
|
||||
type: 'data-source-methods';
|
||||
}
|
||||
|
||||
export interface DataSourceMethodSelectConfig extends FormItem {
|
||||
type: 'data-source-method-select';
|
||||
/** 是否可以编辑数据源，disable表示的是是否可以选择数据源 */
|
||||
notEditable?: boolean | FilterFunction;
|
||||
}
|
||||
|
||||
export interface DataSourceMocksConfig extends FormItem {
|
||||
type: 'data-source-mocks';
|
||||
}
|
||||
|
||||
export interface DataSourceSelect extends FormItem, Input {
|
||||
type: 'data-source-select';
|
||||
/** 数据源类型: base、http... */
|
||||
dataSourceType?: string;
|
||||
/** 是否要编译成数据源的data。
|
||||
* id: 不编译，就是要数据源id;
|
||||
* value: 要编译（数据源data）
|
||||
* */
|
||||
value?: 'id' | 'value';
|
||||
/** 是否可以编辑数据源，disable表示的是是否可以选择数据源 */
|
||||
notEditable?: boolean | FilterFunction;
|
||||
}
|
||||
|
||||
export interface DisplayCondsConfig extends FormItem {
|
||||
titlePrefix?: string;
|
||||
parentFields?: string[] | FilterFunction<string[]>;
|
||||
}
|
||||
|
||||
export interface EventSelectConfig {
|
||||
name: string;
|
||||
type: 'event-select';
|
||||
src: 'datasource' | 'component';
|
||||
labelWidth?: string;
|
||||
/** 事件名称表单配置 */
|
||||
eventNameConfig?: FormItem;
|
||||
/** 动作类型配置 */
|
||||
actionTypeConfig?: FormItem;
|
||||
/** 联动组件配置 */
|
||||
targetCompConfig?: FormItem;
|
||||
/** 联动组件动作配置 */
|
||||
compActionConfig?: FormItem;
|
||||
/** 联动代码配置 */
|
||||
codeActionConfig?: FormItem;
|
||||
/** 联动数据源配置 */
|
||||
dataSourceActionConfig?: FormItem;
|
||||
}
|
||||
|
||||
export interface KeyValueConfig extends FormItem {
|
||||
type: 'key-value';
|
||||
advanced?: boolean;
|
||||
}
|
||||
|
||||
export interface PageFragmentSelectConfig extends FormItem {
|
||||
type: 'page-fragment-select';
|
||||
}
|
||||
|
||||
export interface UISelectConfig extends FormItem {
|
||||
type: 'ui-select';
|
||||
}
|
||||
|
||||
export type EditorChildConfig =
|
||||
| DataSourceFieldSelectConfig
|
||||
| CodeConfig
|
||||
| CodeLinkConfig
|
||||
| CodeSelectConfig
|
||||
| CodeSelectColConfig
|
||||
| CondOpSelectConfig
|
||||
| DataSourceFieldsConfig
|
||||
| DataSourceInputConfig
|
||||
| DataSourceMethodsConfig
|
||||
| DataSourceMethodSelectConfig
|
||||
| DataSourceMocksConfig
|
||||
| DataSourceSelect
|
||||
| DisplayCondsConfig
|
||||
| EventSelectConfig
|
||||
| KeyValueConfig
|
||||
| PageFragmentSelectConfig
|
||||
| UISelectConfig;
|
||||
6
packages/form-schema/src/index.ts
Normal file
6
packages/form-schema/src/index.ts
Normal file
@ -0,0 +1,6 @@
|
||||
import type { FormConfig } from './base';
|
||||
|
||||
export * from './base';
|
||||
export * from './editor';
|
||||
|
||||
export const defineFormConfig = <T = FormConfig>(config: T): T => config;
|
||||
@ -51,6 +51,7 @@
|
||||
"peerDependencies": {
|
||||
"@tmagic/design": "workspace:*",
|
||||
"@tmagic/utils": "workspace:*",
|
||||
"@tmagic/form-schema": "workspace:*",
|
||||
"vue": ">=3.5.0",
|
||||
"typescript": "*"
|
||||
},
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
<Container
|
||||
v-for="(item, index) in config"
|
||||
:disabled="disabled"
|
||||
:key="item[keyProp] ?? index"
|
||||
:key="(item as Record<string, any>)[keyProp] ?? index"
|
||||
:config="item"
|
||||
:model="values"
|
||||
:last-values="lastValuesProcessed"
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
<div style="flex: 1">
|
||||
<Container
|
||||
v-for="(item, index) in items"
|
||||
:key="item[mForm?.keyProp || '__key'] ?? index"
|
||||
:key="(item as Record<string, any>)[mForm?.keyProp || '__key'] ?? index"
|
||||
:config="item"
|
||||
:model="name ? model[name] : model"
|
||||
:lastValues="name ? lastValues[name] : lastValues"
|
||||
@ -40,7 +40,7 @@
|
||||
<template v-else>
|
||||
<Container
|
||||
v-for="(item, index) in items"
|
||||
:key="item[mForm?.keyProp || '__key'] ?? index"
|
||||
:key="(item as Record<string, any>)[mForm?.keyProp || '__key'] ?? index"
|
||||
:config="item"
|
||||
:model="name ? model[name] : model"
|
||||
:lastValues="name ? lastValues[name] : lastValues"
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<TMagicRow :gutter="10">
|
||||
<Col
|
||||
v-for="(col, index) in config.items"
|
||||
:key="col[mForm?.keyProp || '__key'] ?? index"
|
||||
:key="(col as Record<string, any>)[mForm?.keyProp || '__key'] ?? index"
|
||||
:span="col.span || config.span || 24 / config.items.length"
|
||||
:config="col"
|
||||
:labelWidth="config.labelWidth || labelWidth"
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
<Container
|
||||
v-if="item"
|
||||
v-show="active - 1 === index"
|
||||
:key="item[mForm?.keyProp || '__key']"
|
||||
:key="(item as Record<string, any>)[mForm?.keyProp || '__key']"
|
||||
:config="item"
|
||||
:model="step.name ? model[step.name] : model"
|
||||
:lastValues="step.name ? lastValues[step.name] : lastValues"
|
||||
|
||||
@ -34,7 +34,7 @@
|
||||
</template>
|
||||
<Container
|
||||
v-for="item in tabItems(tab)"
|
||||
:key="item[mForm?.keyProp || '__key']"
|
||||
:key="(item as Record<string, any>)[mForm?.keyProp || '__key']"
|
||||
:config="item"
|
||||
:disabled="disabled"
|
||||
:model="
|
||||
|
||||
@ -1,22 +1,4 @@
|
||||
/*
|
||||
* Tencent is pleased to support the open source community by making TMagicEditor available.
|
||||
*
|
||||
* Copyright (C) 2023 THL A29 Limited, a Tencent company. All rights reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import type { TMagicMessage, TMagicMessageBox } from '@tmagic/design';
|
||||
export * from '@tmagic/form-schema';
|
||||
|
||||
export interface ValidateError {
|
||||
message: string;
|
||||
@ -32,760 +14,3 @@ export interface ContainerChangeEventData {
|
||||
modifyKey?: string;
|
||||
changeRecords?: ChangeRecord[];
|
||||
}
|
||||
|
||||
export interface FieldProps<T = any> {
|
||||
config: T;
|
||||
model: any;
|
||||
initValues?: any;
|
||||
values?: any;
|
||||
name: string;
|
||||
prop: string;
|
||||
disabled?: boolean;
|
||||
size?: 'large' | 'default' | 'small';
|
||||
lastValues?: Record<string, any>;
|
||||
}
|
||||
|
||||
/**
|
||||
* 整个表单的数据，会注入到各个组件中去
|
||||
*/
|
||||
export type FormState = {
|
||||
config: FormConfig;
|
||||
popperClass?: string;
|
||||
initValues: FormValue;
|
||||
lastValues: FormValue;
|
||||
isCompare: boolean;
|
||||
values: FormValue;
|
||||
$emit: (event: string, ...args: any[]) => void;
|
||||
keyProp?: string;
|
||||
parentValues?: FormValue;
|
||||
setField: (prop: string, field: any) => void;
|
||||
getField: (prop: string) => any;
|
||||
deleteField: (prop: string) => any;
|
||||
$messageBox: TMagicMessageBox;
|
||||
$message: TMagicMessage;
|
||||
[key: string]: any;
|
||||
};
|
||||
|
||||
/**
|
||||
* 排序配置
|
||||
*/
|
||||
export interface SortProp {
|
||||
/** 跟该值排序 */
|
||||
prop: string;
|
||||
order: 'ascending' | 'descending';
|
||||
}
|
||||
|
||||
export interface FormItem {
|
||||
/** vnode的key值，默认是遍历数组时的index */
|
||||
__key?: string | number;
|
||||
/** 表单域标签的的宽度，例如 '50px'。支持 auto。 */
|
||||
labelWidth?: string;
|
||||
/** label 标签的title属性 */
|
||||
labelTitle?: string;
|
||||
className?: string;
|
||||
/** 表单组件类型 */
|
||||
type?: string | TypeFunction;
|
||||
/** 字段名 */
|
||||
name?: string | number;
|
||||
/** 额外的提示信息，和 help 类似，当提示文案同时出现时，可以使用这个。 */
|
||||
extra?: string | FilterFunction<string>;
|
||||
/** 配置提示信息 */
|
||||
tooltip?: string | FilterFunction<string>;
|
||||
/** 是否置灰 */
|
||||
disabled?: boolean | FilterFunction;
|
||||
/** 使用表单中的值作为key，例如配置了text，则使用model.text作为key */
|
||||
key?: string;
|
||||
/** 是否显示 */
|
||||
display?: boolean | 'expand' | FilterFunction<boolean | 'expand'>;
|
||||
/** 值发生改变时调用的方法 */
|
||||
onChange?: OnChangeHandler;
|
||||
/** label 标签的文本 */
|
||||
text?: string | FilterFunction<string>;
|
||||
/** 右侧感叹号 */
|
||||
tip?: string;
|
||||
|
||||
filter?: 'number' | OnChangeHandler;
|
||||
/** 是否去除首尾空格 */
|
||||
trim?: boolean;
|
||||
/** 默认值 */
|
||||
defaultValue?: any | DefaultValueFunction;
|
||||
/** 表单验证规则 */
|
||||
rules?: Rule[];
|
||||
extensible?: boolean;
|
||||
dynamicKey?: string;
|
||||
/** 是否需要显示`展开更多配置` */
|
||||
expand?: boolean;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
export interface ContainerCommonConfig {
|
||||
items: FormConfig;
|
||||
onInitValue?: (
|
||||
mForm: FormState | undefined,
|
||||
data: {
|
||||
formValue: FormValue;
|
||||
initValue: FormValue;
|
||||
},
|
||||
) => FormValue;
|
||||
extensible?: boolean;
|
||||
}
|
||||
|
||||
export interface Rule {
|
||||
message?: string;
|
||||
/** 系统提供的验证器类型。有：string,number,boolean,method,regexp,integer,float,array,object,enum,date,url,hex,email,any */
|
||||
type?: string;
|
||||
/** 是否必填 */
|
||||
required?: boolean;
|
||||
trigger?: string;
|
||||
/** 自定义验证器 */
|
||||
validator?: (
|
||||
options: {
|
||||
rule: string;
|
||||
value: any;
|
||||
callback: Function;
|
||||
source: Object;
|
||||
options: {
|
||||
messages: string;
|
||||
};
|
||||
},
|
||||
data: {
|
||||
/** 表单的初始值 */
|
||||
values: FormValue;
|
||||
/** 当前作用域下的值 */
|
||||
model: FormValue;
|
||||
parent: FormValue;
|
||||
/** 整个表单的值 */
|
||||
formValue: FormValue;
|
||||
prop: string;
|
||||
config: any;
|
||||
},
|
||||
mForm: FormState | undefined,
|
||||
) => void;
|
||||
}
|
||||
|
||||
export interface Input {
|
||||
/** 输入框没有内容时显示的文案 */
|
||||
placeholder?: string;
|
||||
}
|
||||
|
||||
export type TypeFunction = (
|
||||
mForm: FormState | undefined,
|
||||
data: {
|
||||
model: FormValue;
|
||||
},
|
||||
) => string;
|
||||
|
||||
export type FilterFunction<T = boolean> = (
|
||||
mForm: FormState | undefined,
|
||||
data: {
|
||||
model: FormValue;
|
||||
values: FormValue;
|
||||
parent?: FormValue;
|
||||
formValue: FormValue;
|
||||
prop: string;
|
||||
config: any;
|
||||
index?: number;
|
||||
},
|
||||
) => T;
|
||||
|
||||
export interface OnChangeHandlerData {
|
||||
model: FormValue;
|
||||
values?: FormValue;
|
||||
parent?: FormValue;
|
||||
formValue?: FormValue;
|
||||
config: any;
|
||||
prop: string;
|
||||
changeRecords: ChangeRecord[];
|
||||
setModel: (prop: string, value: any) => void;
|
||||
}
|
||||
|
||||
export type OnChangeHandler = (mForm: FormState | undefined, value: any, data: OnChangeHandlerData) => any;
|
||||
|
||||
type DefaultValueFunction = (mForm: FormState | undefined) => any;
|
||||
|
||||
/**
|
||||
* 下拉选择器选项配置
|
||||
*/
|
||||
export interface SelectConfigOption {
|
||||
/** 选项的标签 */
|
||||
text: string | SelectOptionTextFunction;
|
||||
/** 选项的值 */
|
||||
value: any | SelectOptionValueFunction;
|
||||
/** 是否禁用该选项 */
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
export interface SelectOption {
|
||||
/** 选项的标签 */
|
||||
text: string;
|
||||
/** 选项的值 */
|
||||
value: any;
|
||||
/** 是否禁用该选项 */
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* 下拉选择器分组选项配置
|
||||
*/
|
||||
export interface SelectConfigGroupOption {
|
||||
/** 分组的组名 */
|
||||
label: string;
|
||||
/** 是否禁用该选项组 */
|
||||
disabled: boolean;
|
||||
options: {
|
||||
/** 选项的标签 */
|
||||
label: string | SelectOptionTextFunction;
|
||||
/** 选项的值 */
|
||||
value: any | SelectOptionValueFunction;
|
||||
/** 是否禁用该选项 */
|
||||
disabled?: boolean;
|
||||
}[];
|
||||
}
|
||||
|
||||
export interface SelectGroupOption {
|
||||
/** 分组的组名 */
|
||||
label: string;
|
||||
/** 是否禁用该选项组 */
|
||||
disabled: boolean;
|
||||
options: {
|
||||
/** 选项的标签 */
|
||||
label?: string;
|
||||
text?: string;
|
||||
/** 选项的值 */
|
||||
value: any;
|
||||
/** 是否禁用该选项 */
|
||||
disabled?: boolean;
|
||||
}[];
|
||||
}
|
||||
|
||||
type SelectOptionFunction = (
|
||||
mForm: FormState | undefined,
|
||||
data: {
|
||||
model: any;
|
||||
prop?: string;
|
||||
formValues: any;
|
||||
formValue: any;
|
||||
config: any;
|
||||
},
|
||||
) => SelectOption[] | SelectGroupOption[];
|
||||
|
||||
type RemoteSelectOptionBodyFunction = (
|
||||
mForm: FormState | undefined,
|
||||
data: {
|
||||
model: any;
|
||||
formValue: any;
|
||||
formValues: any;
|
||||
config: any;
|
||||
},
|
||||
) => Record<string, any>;
|
||||
|
||||
type RemoteSelectOptionAfterRequestFunction = (
|
||||
mForm: FormState | undefined,
|
||||
res: any,
|
||||
data: {
|
||||
model: any;
|
||||
formValue: any;
|
||||
formValues: any;
|
||||
config: any;
|
||||
prop: string;
|
||||
postOptions: Record<string, any>;
|
||||
},
|
||||
) => any;
|
||||
|
||||
type RemoteSelectOptionBeforeRequestFunction = (
|
||||
mForm: FormState | undefined,
|
||||
postOptions: Record<string, any>,
|
||||
data: {
|
||||
model: any;
|
||||
formValue: any;
|
||||
formValues: any;
|
||||
config: any;
|
||||
prop: string;
|
||||
},
|
||||
) => Record<string, any>;
|
||||
|
||||
type RemoteSelectOptionItemFunction = (optionsData: Record<string, any>) => SelectOption[] | SelectGroupOption[];
|
||||
type SelectOptionValueFunction = (item: Record<string, any>) => any;
|
||||
type SelectOptionTextFunction = (item: Record<string, any>) => string;
|
||||
|
||||
export interface CascaderOption {
|
||||
/** 指定选项的值为选项对象的某个属性值 */
|
||||
value: any;
|
||||
/** 指定选项标签为选项对象的某个属性值 */
|
||||
label: string;
|
||||
/** 指定选项的子选项为选项对象的某个属性值 */
|
||||
children?: CascaderOption[];
|
||||
}
|
||||
|
||||
/**
|
||||
* 日期范围
|
||||
*/
|
||||
export interface DaterangeConfig extends FormItem {
|
||||
type: 'daterange';
|
||||
defaultTime?: Date[];
|
||||
names?: string[];
|
||||
valueFormat?: string;
|
||||
dateFormat?: string;
|
||||
timeFormat?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* html编辑器
|
||||
*/
|
||||
export interface HtmlField extends FormItem {
|
||||
type: 'html';
|
||||
/** 是否异步加载编辑的内容 */
|
||||
asyncLoad?: {
|
||||
name: string | number;
|
||||
};
|
||||
}
|
||||
|
||||
/** 展示文本，不可编辑 */
|
||||
export interface DisplayConfig extends FormItem {
|
||||
type: 'display';
|
||||
initValue?: string | number | boolean;
|
||||
}
|
||||
|
||||
/** 文本输入框 */
|
||||
export interface TextConfig extends FormItem, Input {
|
||||
type?: 'text';
|
||||
tooltip?: string;
|
||||
/** 后置元素，一般为标签或按钮 */
|
||||
append?:
|
||||
| string
|
||||
| {
|
||||
text: string;
|
||||
value?: 0 | 1;
|
||||
type: 'button';
|
||||
handler?: (
|
||||
mForm: FormState | undefined,
|
||||
data: {
|
||||
model: any;
|
||||
values: any;
|
||||
},
|
||||
) => void;
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 文本域
|
||||
*/
|
||||
export interface TextareaConfig extends FormItem {
|
||||
type: 'textarea';
|
||||
placeholder?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 计数器
|
||||
*/
|
||||
export interface NumberConfig extends FormItem {
|
||||
type?: 'number';
|
||||
tooltip?: string;
|
||||
min?: number;
|
||||
max?: number;
|
||||
step?: number;
|
||||
placeholder?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 数值范围
|
||||
*/
|
||||
export interface NumberRangeConfig extends FormItem {
|
||||
type?: 'number-range';
|
||||
}
|
||||
|
||||
/**
|
||||
* 隐藏域
|
||||
*/
|
||||
export interface HiddenConfig extends FormItem {
|
||||
type: 'hidden';
|
||||
}
|
||||
|
||||
/**
|
||||
* 日期选择器
|
||||
*/
|
||||
export interface DateConfig extends FormItem, Input {
|
||||
type: 'date';
|
||||
format?: 'YYYY-MM-dd HH:mm:ss' | string;
|
||||
valueFormat?: 'YYYY-MM-dd HH:mm:ss' | string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 日期时间选择器
|
||||
*/
|
||||
export interface DateTimeConfig extends FormItem, Input {
|
||||
type: 'datetime';
|
||||
defaultTime?: Date[];
|
||||
format?: 'YYYY-MM-dd HH:mm:ss' | string;
|
||||
valueFormat?: 'YYYY-MM-dd HH:mm:ss' | string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 时间选择器
|
||||
*/
|
||||
export interface TimeConfig extends FormItem, Input {
|
||||
type: 'time';
|
||||
format?: 'HH:mm:ss' | string;
|
||||
valueFormat?: 'HH:mm:ss' | string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 单个多选框
|
||||
*/
|
||||
export interface CheckboxConfig extends FormItem {
|
||||
type: 'checkbox';
|
||||
activeValue?: number | string;
|
||||
inactiveValue?: number | string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 开关
|
||||
*/
|
||||
export interface SwitchConfig extends FormItem {
|
||||
type: 'switch';
|
||||
activeValue?: boolean | number | string;
|
||||
inactiveValue?: boolean | number | string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 单选框
|
||||
*/
|
||||
export interface RadioGroupConfig extends FormItem {
|
||||
type: 'radio-group';
|
||||
childType?: 'default' | 'button';
|
||||
options: {
|
||||
value: string | number | boolean;
|
||||
text: string;
|
||||
icon?: any;
|
||||
tooltip?: string;
|
||||
}[];
|
||||
}
|
||||
|
||||
/**
|
||||
* 颜色选择器
|
||||
*/
|
||||
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: CheckboxGroupOption[] | FilterFunction<CheckboxGroupOption[]>;
|
||||
}
|
||||
|
||||
/**
|
||||
* 下拉选择器
|
||||
*/
|
||||
export interface SelectConfig extends FormItem, Input {
|
||||
type: 'select';
|
||||
clearable?: boolean;
|
||||
multiple?: boolean;
|
||||
valueKey?: string;
|
||||
allowCreate?: boolean;
|
||||
filterable?: boolean;
|
||||
group?: boolean;
|
||||
options?: SelectConfigOption[] | SelectConfigGroupOption[] | SelectOptionFunction;
|
||||
remote?: true;
|
||||
option?: {
|
||||
url: string | ((mForm: FormState | undefined, data: { model: any; formValue: any }) => string);
|
||||
initUrl?: string | ((mForm: FormState | undefined, data: { model: any; formValue: any }) => string);
|
||||
method?: 'jsonp' | string;
|
||||
cache?: boolean;
|
||||
timeout?: number;
|
||||
mode?: string;
|
||||
headers?: {
|
||||
[key: string]: string;
|
||||
};
|
||||
json?: false | boolean;
|
||||
body?: Record<string, any> | RemoteSelectOptionBodyFunction;
|
||||
initBody?: Record<string, any> | RemoteSelectOptionBodyFunction;
|
||||
jsonpCallback?: 'callback' | string;
|
||||
afterRequest?: RemoteSelectOptionAfterRequestFunction;
|
||||
afterInitRequest?: RemoteSelectOptionAfterRequestFunction;
|
||||
beforeRequest?: RemoteSelectOptionBeforeRequestFunction;
|
||||
beforeInitRequest?: RemoteSelectOptionBeforeRequestFunction;
|
||||
root?: string;
|
||||
totalKey?: string;
|
||||
initRoot?: string;
|
||||
item?: RemoteSelectOptionItemFunction;
|
||||
value?: string | SelectOptionValueFunction;
|
||||
text?: string | SelectOptionTextFunction;
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 链接
|
||||
*/
|
||||
export interface LinkConfig extends FormItem {
|
||||
type: 'link';
|
||||
href?: string | ((model: Record<string, any>) => string);
|
||||
css?: {
|
||||
[key: string]: string | number;
|
||||
};
|
||||
disabledCss?: {
|
||||
[key: string]: string | number;
|
||||
};
|
||||
formTitle?: string;
|
||||
formWidth?: number | string;
|
||||
displayText?:
|
||||
| ((
|
||||
mForm: FormState | undefined,
|
||||
data: {
|
||||
model: Record<any, any>;
|
||||
},
|
||||
) => string)
|
||||
| string;
|
||||
form:
|
||||
| FormConfig
|
||||
| ((
|
||||
mForm: FormState | undefined,
|
||||
data: {
|
||||
model: Record<any, any>;
|
||||
values: Record<any, any>;
|
||||
},
|
||||
) => FormConfig);
|
||||
fullscreen?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* 级联选择器
|
||||
*/
|
||||
export interface CascaderConfig extends FormItem, Input {
|
||||
type: 'cascader';
|
||||
remote?: boolean;
|
||||
/** 在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值，默认 true */
|
||||
emitPath?: boolean;
|
||||
/** 是否多选，默认 false */
|
||||
multiple?: boolean;
|
||||
/** 是否严格的遵守父子节点不互相关联，默认 false */
|
||||
checkStrictly?: boolean | FilterFunction<boolean>;
|
||||
/** 弹出内容的自定义类名 */
|
||||
popperClass?: string;
|
||||
/** 合并成字符串时的分隔符 */
|
||||
valueSeparator?: string | FilterFunction<string>;
|
||||
options?:
|
||||
| ((
|
||||
mForm: FormState | undefined,
|
||||
data: {
|
||||
model: Record<any, any>;
|
||||
prop: string;
|
||||
formValue: Record<any, any>;
|
||||
},
|
||||
) => CascaderOption[])
|
||||
| CascaderOption[];
|
||||
option?: {
|
||||
url: string;
|
||||
cache?: boolean;
|
||||
timeout?: number;
|
||||
body?: Record<string, any> | RemoteSelectOptionBodyFunction;
|
||||
root: 'string';
|
||||
item: (optionsData: Record<string, any>) => CascaderOption[];
|
||||
};
|
||||
}
|
||||
|
||||
export interface DynamicFieldConfig extends FormItem {
|
||||
type: 'dynamic-field';
|
||||
returnFields: (
|
||||
config: DynamicFieldConfig,
|
||||
model: Record<any, any>,
|
||||
request: Object,
|
||||
) => {
|
||||
name: string;
|
||||
label: string;
|
||||
defaultValue: string;
|
||||
}[];
|
||||
dynamicKey: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 分组容器
|
||||
*/
|
||||
export interface RowConfig extends FormItem, ContainerCommonConfig {
|
||||
type: 'row';
|
||||
span: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* 标签页容器
|
||||
*/
|
||||
export interface TabPaneConfig {
|
||||
status?: string;
|
||||
title: string;
|
||||
lazy?: boolean;
|
||||
labelWidth?: string;
|
||||
items: FormConfig;
|
||||
onTabClick?: (mForm: FormState | undefined, tab: any, data: any) => void;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
export interface TabConfig extends FormItem, ContainerCommonConfig {
|
||||
type: 'tab' | 'dynamic-tab';
|
||||
tabType?: string;
|
||||
editable?: boolean;
|
||||
dynamic?: boolean;
|
||||
tabPosition?: 'top' | 'right' | 'bottom' | 'left';
|
||||
items: TabPaneConfig[];
|
||||
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;
|
||||
}
|
||||
|
||||
/**
|
||||
* 分组
|
||||
*/
|
||||
export interface FieldsetConfig extends FormItem, ContainerCommonConfig {
|
||||
type: 'fieldset';
|
||||
checkbox?: boolean;
|
||||
expand?: boolean;
|
||||
legend?: string;
|
||||
schematic?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 面板容器
|
||||
*/
|
||||
export interface PanelConfig extends FormItem, ContainerCommonConfig {
|
||||
type: 'panel';
|
||||
expand?: boolean;
|
||||
title?: string;
|
||||
schematic?: string;
|
||||
}
|
||||
|
||||
export interface TableColumnConfig extends FormItem {
|
||||
name?: string;
|
||||
label: string;
|
||||
width?: string | number;
|
||||
sortable?: boolean;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
/**
|
||||
* 表格容器
|
||||
*/
|
||||
export interface TableConfig extends FormItem {
|
||||
type: 'table' | 'groupList' | 'group-list';
|
||||
items: TableColumnConfig[];
|
||||
tableItems?: TableColumnConfig[];
|
||||
groupItems?: TableColumnConfig[];
|
||||
enableToggleMode?: boolean;
|
||||
/** 最大行数 */
|
||||
max?: number;
|
||||
/** 最大高度 */
|
||||
maxHeight?: number | string;
|
||||
border?: boolean;
|
||||
/** 显示行号 */
|
||||
showIndex?: boolean;
|
||||
/** 操作栏宽度 */
|
||||
operateColWidth?: number | string;
|
||||
pagination?: boolean;
|
||||
enum?: any[];
|
||||
/** 是否显示添加按钮 */
|
||||
addable?: (mForm: FormState | undefined, data: any) => boolean | 'undefined' | boolean;
|
||||
/** 是否显示删除按钮 */
|
||||
delete?: (model: any, index: number, values: any) => boolean | boolean;
|
||||
copyable?: (model: any, data: any) => boolean | boolean;
|
||||
/** 是否显示导入按钮 */
|
||||
importable?: (mForm: FormState | undefined, data: any) => boolean | 'undefined' | boolean;
|
||||
/** 是否显示checkbox */
|
||||
selection?: (mForm: FormState | undefined, data: any) => boolean | boolean | 'single';
|
||||
/** 新增的默认行 */
|
||||
defaultAdd?: (mForm: FormState | undefined, data: any) => any;
|
||||
onSelect?: (mForm: FormState | undefined, data: any) => any;
|
||||
defautSort?: SortProp;
|
||||
defaultSort?: SortProp;
|
||||
dropSort?: boolean;
|
||||
/** 是否显示全屏按钮 */
|
||||
enableFullscreen?: boolean;
|
||||
fixed?: boolean;
|
||||
itemExtra?: string | FilterFunction<string>;
|
||||
rowKey?: string;
|
||||
/** table 新增行时前置回调 */
|
||||
beforeAddRow?: (mForm: FormState | undefined, data: any) => boolean;
|
||||
}
|
||||
|
||||
export interface GroupListConfig extends FormItem {
|
||||
type: 'table' | 'groupList' | 'group-list';
|
||||
span?: number;
|
||||
enableToggleMode?: boolean;
|
||||
items: FormConfig;
|
||||
groupItems?: FormConfig;
|
||||
tableItems?: FormConfig;
|
||||
titleKey?: string;
|
||||
titlePrefix?: string;
|
||||
title?: string | FilterFunction<string>;
|
||||
itemExtra?: string | FilterFunction<string>;
|
||||
expandAll?: boolean;
|
||||
addable?: (mForm: FormState | undefined, data: any) => boolean | 'undefined' | boolean;
|
||||
defaultAdd?: (mForm: FormState | undefined, data: any) => any;
|
||||
delete?: (model: any, index: number | string | symbol, values: any) => boolean | boolean;
|
||||
copyable?: FilterFunction<boolean>;
|
||||
movable?: (
|
||||
mForm: FormState | undefined,
|
||||
index: number | string | symbol,
|
||||
model: any,
|
||||
groupModel: any,
|
||||
) => boolean | boolean;
|
||||
moveSpecifyLocation?: boolean;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
interface StepItemConfig extends FormItem, ContainerCommonConfig {
|
||||
title: string;
|
||||
}
|
||||
|
||||
export interface StepConfig extends FormItem {
|
||||
type: 'step';
|
||||
/** 每个 step 的间距，不填写将自适应间距。支持百分比。 */
|
||||
space?: string | number;
|
||||
items: StepItemConfig[];
|
||||
}
|
||||
|
||||
export interface ComponentConfig extends FormItem {
|
||||
type: 'component';
|
||||
id: string;
|
||||
extend: any;
|
||||
display: any;
|
||||
}
|
||||
|
||||
export type ChildConfig =
|
||||
| FormItem
|
||||
| TabConfig
|
||||
| RowConfig
|
||||
| FieldsetConfig
|
||||
| PanelConfig
|
||||
| TableConfig
|
||||
| GroupListConfig
|
||||
| StepConfig
|
||||
| DisplayConfig
|
||||
| TextConfig
|
||||
| HiddenConfig
|
||||
| LinkConfig
|
||||
| DaterangeConfig
|
||||
| SelectConfig
|
||||
| CascaderConfig
|
||||
| HtmlField
|
||||
| DateConfig
|
||||
| ColorPickConfig
|
||||
| TimeConfig
|
||||
| DateTimeConfig
|
||||
| CheckboxConfig
|
||||
| SwitchConfig
|
||||
| RadioGroupConfig
|
||||
| TextareaConfig
|
||||
| DynamicFieldConfig
|
||||
| ComponentConfig;
|
||||
|
||||
export type FormConfig = ChildConfig[];
|
||||
|
||||
export type FormValue = Record<string | number, any>;
|
||||
|
||||
@ -18,9 +18,6 @@
|
||||
"types",
|
||||
"src"
|
||||
],
|
||||
"scripts": {
|
||||
"build": "vite build"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
|
||||
@ -64,6 +64,7 @@ export default defineConfig({
|
||||
{ find: /^@tmagic\/core/, replacement: path.join(__dirname, '../packages/core/src/index.ts') },
|
||||
{ find: /^@editor/, replacement: path.join(__dirname, '../packages/editor/src/') },
|
||||
{ find: /^@tmagic\/editor/, replacement: path.join(__dirname, '../packages/editor/src/index.ts') },
|
||||
{ find: /^@tmagic\/form-schema/, replacement: path.join(__dirname, '../packages/form-schema/src/index.ts') },
|
||||
{ find: /^@tmagic\/schema/, replacement: path.join(__dirname, '../packages/schema/src/index.ts') },
|
||||
{ find: /^@tmagic\/form/, replacement: path.join(__dirname, '../packages/form/src/index.ts') },
|
||||
{
|
||||
|
||||
72
pnpm-lock.yaml
generated
72
pnpm-lock.yaml
generated
@ -387,6 +387,9 @@ importers:
|
||||
'@tmagic/design':
|
||||
specifier: workspace:*
|
||||
version: link:../design
|
||||
'@tmagic/form-schema':
|
||||
specifier: workspace:*
|
||||
version: link:../form-schema
|
||||
'@tmagic/utils':
|
||||
specifier: workspace:*
|
||||
version: link:../utils
|
||||
@ -416,6 +419,15 @@ importers:
|
||||
specifier: ^2.4.6
|
||||
version: 2.4.6
|
||||
|
||||
packages/form-schema:
|
||||
dependencies:
|
||||
'@tmagic/schema':
|
||||
specifier: workspace:*
|
||||
version: link:../schema
|
||||
typescript:
|
||||
specifier: '*'
|
||||
version: 5.8.2
|
||||
|
||||
packages/schema:
|
||||
dependencies:
|
||||
typescript:
|
||||
@ -665,6 +677,9 @@ importers:
|
||||
'@tmagic/core':
|
||||
specifier: workspace:^
|
||||
version: link:../../packages/core
|
||||
'@tmagic/form-schema':
|
||||
specifier: workspace:^
|
||||
version: link:../../packages/form-schema
|
||||
'@tmagic/react-runtime-help':
|
||||
specifier: workspace:^
|
||||
version: link:../../runtime/react-runtime-help
|
||||
@ -690,6 +705,9 @@ importers:
|
||||
'@tmagic/core':
|
||||
specifier: workspace:^
|
||||
version: link:../../packages/core
|
||||
'@tmagic/form-schema':
|
||||
specifier: workspace:^
|
||||
version: link:../../packages/form-schema
|
||||
'@tmagic/react-runtime-help':
|
||||
specifier: workspace:^
|
||||
version: link:../../runtime/react-runtime-help
|
||||
@ -715,6 +733,9 @@ importers:
|
||||
'@tmagic/core':
|
||||
specifier: workspace:^
|
||||
version: link:../../packages/core
|
||||
'@tmagic/form-schema':
|
||||
specifier: workspace:^
|
||||
version: link:../../packages/form-schema
|
||||
'@tmagic/react-runtime-help':
|
||||
specifier: workspace:^
|
||||
version: link:../../runtime/react-runtime-help
|
||||
@ -740,6 +761,9 @@ importers:
|
||||
'@tmagic/core':
|
||||
specifier: workspace:^
|
||||
version: link:../../packages/core
|
||||
'@tmagic/form-schema':
|
||||
specifier: workspace:^
|
||||
version: link:../../packages/form-schema
|
||||
'@tmagic/react-runtime-help':
|
||||
specifier: workspace:^
|
||||
version: link:../../runtime/react-runtime-help
|
||||
@ -765,6 +789,9 @@ importers:
|
||||
'@tmagic/core':
|
||||
specifier: workspace:^
|
||||
version: link:../../packages/core
|
||||
'@tmagic/form-schema':
|
||||
specifier: workspace:^
|
||||
version: link:../../packages/form-schema
|
||||
'@tmagic/react-runtime-help':
|
||||
specifier: workspace:^
|
||||
version: link:../../runtime/react-runtime-help
|
||||
@ -790,6 +817,9 @@ importers:
|
||||
'@tmagic/core':
|
||||
specifier: workspace:^
|
||||
version: link:../../packages/core
|
||||
'@tmagic/form-schema':
|
||||
specifier: workspace:^
|
||||
version: link:../../packages/form-schema
|
||||
'@tmagic/react-runtime-help':
|
||||
specifier: workspace:^
|
||||
version: link:../../runtime/react-runtime-help
|
||||
@ -815,6 +845,9 @@ importers:
|
||||
'@tmagic/core':
|
||||
specifier: workspace:^
|
||||
version: link:../../packages/core
|
||||
'@tmagic/form-schema':
|
||||
specifier: workspace:^
|
||||
version: link:../../packages/form-schema
|
||||
'@tmagic/react-runtime-help':
|
||||
specifier: workspace:^
|
||||
version: link:../../runtime/react-runtime-help
|
||||
@ -840,6 +873,9 @@ importers:
|
||||
'@tmagic/core':
|
||||
specifier: workspace:^
|
||||
version: link:../../packages/core
|
||||
'@tmagic/form-schema':
|
||||
specifier: workspace:^
|
||||
version: link:../../packages/form-schema
|
||||
'@tmagic/react-runtime-help':
|
||||
specifier: workspace:^
|
||||
version: link:../../runtime/react-runtime-help
|
||||
@ -865,6 +901,9 @@ importers:
|
||||
'@tmagic/core':
|
||||
specifier: workspace:^
|
||||
version: link:../../packages/core
|
||||
'@tmagic/form-schema':
|
||||
specifier: workspace:^
|
||||
version: link:../../packages/form-schema
|
||||
'@tmagic/react-runtime-help':
|
||||
specifier: workspace:^
|
||||
version: link:../../runtime/react-runtime-help
|
||||
@ -896,6 +935,9 @@ importers:
|
||||
'@tmagic/core':
|
||||
specifier: workspace:^
|
||||
version: link:../../packages/core
|
||||
'@tmagic/form-schema':
|
||||
specifier: workspace:^
|
||||
version: link:../../packages/form-schema
|
||||
'@tmagic/react-runtime-help':
|
||||
specifier: workspace:^
|
||||
version: link:../../runtime/react-runtime-help
|
||||
@ -1139,6 +1181,9 @@ importers:
|
||||
'@tmagic/core':
|
||||
specifier: workspace:^
|
||||
version: link:../../packages/core
|
||||
'@tmagic/form-schema':
|
||||
specifier: workspace:^
|
||||
version: link:../../packages/form-schema
|
||||
'@tmagic/vue-runtime-help':
|
||||
specifier: workspace:^
|
||||
version: link:../../runtime/vue-runtime-help
|
||||
@ -1160,6 +1205,9 @@ importers:
|
||||
'@tmagic/core':
|
||||
specifier: workspace:^
|
||||
version: link:../../packages/core
|
||||
'@tmagic/form-schema':
|
||||
specifier: workspace:^
|
||||
version: link:../../packages/form-schema
|
||||
'@tmagic/vue-runtime-help':
|
||||
specifier: workspace:^
|
||||
version: link:../../runtime/vue-runtime-help
|
||||
@ -1181,6 +1229,9 @@ importers:
|
||||
'@tmagic/core':
|
||||
specifier: workspace:^
|
||||
version: link:../../packages/core
|
||||
'@tmagic/form-schema':
|
||||
specifier: workspace:^
|
||||
version: link:../../packages/form-schema
|
||||
'@tmagic/vue-runtime-help':
|
||||
specifier: workspace:^
|
||||
version: link:../../runtime/vue-runtime-help
|
||||
@ -1202,6 +1253,9 @@ importers:
|
||||
'@tmagic/core':
|
||||
specifier: workspace:^
|
||||
version: link:../../packages/core
|
||||
'@tmagic/form-schema':
|
||||
specifier: workspace:^
|
||||
version: link:../../packages/form-schema
|
||||
'@tmagic/vue-runtime-help':
|
||||
specifier: workspace:^
|
||||
version: link:../../runtime/vue-runtime-help
|
||||
@ -1223,6 +1277,9 @@ importers:
|
||||
'@tmagic/core':
|
||||
specifier: workspace:^
|
||||
version: link:../../packages/core
|
||||
'@tmagic/form-schema':
|
||||
specifier: workspace:^
|
||||
version: link:../../packages/form-schema
|
||||
'@tmagic/vue-runtime-help':
|
||||
specifier: workspace:^
|
||||
version: link:../../runtime/vue-runtime-help
|
||||
@ -1238,6 +1295,9 @@ importers:
|
||||
'@tmagic/core':
|
||||
specifier: workspace:^
|
||||
version: link:../../packages/core
|
||||
'@tmagic/form-schema':
|
||||
specifier: workspace:^
|
||||
version: link:../../packages/form-schema
|
||||
'@tmagic/vue-runtime-help':
|
||||
specifier: workspace:^
|
||||
version: link:../../runtime/vue-runtime-help
|
||||
@ -1253,6 +1313,9 @@ importers:
|
||||
'@tmagic/core':
|
||||
specifier: workspace:^
|
||||
version: link:../../packages/core
|
||||
'@tmagic/form-schema':
|
||||
specifier: workspace:^
|
||||
version: link:../../packages/form-schema
|
||||
'@tmagic/vue-runtime-help':
|
||||
specifier: workspace:^
|
||||
version: link:../../runtime/vue-runtime-help
|
||||
@ -1268,6 +1331,9 @@ importers:
|
||||
'@tmagic/core':
|
||||
specifier: workspace:^
|
||||
version: link:../../packages/core
|
||||
'@tmagic/form-schema':
|
||||
specifier: workspace:^
|
||||
version: link:../../packages/form-schema
|
||||
'@tmagic/vue-runtime-help':
|
||||
specifier: workspace:^
|
||||
version: link:../../runtime/vue-runtime-help
|
||||
@ -1283,6 +1349,9 @@ importers:
|
||||
'@tmagic/core':
|
||||
specifier: workspace:^
|
||||
version: link:../../packages/core
|
||||
'@tmagic/form-schema':
|
||||
specifier: workspace:^
|
||||
version: link:../../packages/form-schema
|
||||
'@tmagic/vue-runtime-help':
|
||||
specifier: workspace:^
|
||||
version: link:../../runtime/vue-runtime-help
|
||||
@ -1311,6 +1380,9 @@ importers:
|
||||
'@tmagic/core':
|
||||
specifier: workspace:^
|
||||
version: link:../../packages/core
|
||||
'@tmagic/form-schema':
|
||||
specifier: workspace:^
|
||||
version: link:../../packages/form-schema
|
||||
'@tmagic/vue-runtime-help':
|
||||
specifier: workspace:^
|
||||
version: link:../../runtime/vue-runtime-help
|
||||
|
||||
@ -13,6 +13,9 @@
|
||||
"type": "git",
|
||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tmagic/form-schema": "workspace:^"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tmagic/core": "workspace:^",
|
||||
"@tmagic/react-runtime-help": "workspace:^",
|
||||
|
||||
@ -16,10 +16,12 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
export default [
|
||||
import { defineFormConfig } from '@tmagic/form-schema';
|
||||
|
||||
export default defineFormConfig([
|
||||
{
|
||||
text: '文本',
|
||||
name: 'text',
|
||||
type: 'data-source-input',
|
||||
},
|
||||
];
|
||||
]);
|
||||
|
||||
@ -13,6 +13,9 @@
|
||||
"type": "git",
|
||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tmagic/form-schema": "workspace:^"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tmagic/core": "workspace:^",
|
||||
"@tmagic/react-runtime-help": "workspace:^",
|
||||
|
||||
@ -17,8 +17,9 @@
|
||||
*/
|
||||
|
||||
import { getElById } from '@tmagic/core';
|
||||
import { defineFormConfig } from '@tmagic/form-schema';
|
||||
|
||||
export default [
|
||||
export default defineFormConfig([
|
||||
{
|
||||
name: 'layout',
|
||||
text: '容器布局',
|
||||
@ -40,4 +41,4 @@ export default [
|
||||
}
|
||||
},
|
||||
},
|
||||
];
|
||||
]);
|
||||
|
||||
@ -13,6 +13,9 @@
|
||||
"type": "git",
|
||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tmagic/form-schema": "workspace:^"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tmagic/core": "workspace:^",
|
||||
"@tmagic/react-runtime-help": "workspace:^",
|
||||
|
||||
@ -16,7 +16,9 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
export default [
|
||||
import { defineFormConfig } from '@tmagic/form-schema';
|
||||
|
||||
export default defineFormConfig([
|
||||
{
|
||||
type: 'data-source-field-select',
|
||||
name: 'src',
|
||||
@ -32,4 +34,4 @@ export default [
|
||||
name: 'url',
|
||||
type: 'data-source-input',
|
||||
},
|
||||
];
|
||||
]);
|
||||
|
||||
@ -13,6 +13,9 @@
|
||||
"type": "git",
|
||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tmagic/form-schema": "workspace:^"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tmagic/core": "workspace:^",
|
||||
"@tmagic/react-runtime-help": "workspace:^",
|
||||
|
||||
@ -16,8 +16,9 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, NODE_CONDS_KEY } from '@tmagic/core';
|
||||
import { defineFormConfig } from '@tmagic/form-schema';
|
||||
|
||||
export default [
|
||||
export default defineFormConfig([
|
||||
{
|
||||
name: 'iteratorData',
|
||||
text: '数据源数据',
|
||||
@ -116,4 +117,4 @@ export default [
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
]);
|
||||
|
||||
@ -13,6 +13,9 @@
|
||||
"type": "git",
|
||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tmagic/form-schema": "workspace:^"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tmagic/core": "workspace:^",
|
||||
"@tmagic/react-runtime-help": "workspace:^",
|
||||
|
||||
@ -16,4 +16,6 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
export default [];
|
||||
import { defineFormConfig } from '@tmagic/form-schema';
|
||||
|
||||
export default defineFormConfig([]);
|
||||
|
||||
@ -13,6 +13,9 @@
|
||||
"type": "git",
|
||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tmagic/form-schema": "workspace:^"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tmagic/core": "workspace:^",
|
||||
"@tmagic/react-runtime-help": "workspace:^",
|
||||
|
||||
@ -16,10 +16,12 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
export default [
|
||||
import { defineFormConfig } from '@tmagic/form-schema';
|
||||
|
||||
export default defineFormConfig([
|
||||
{
|
||||
name: 'pageFragmentId',
|
||||
text: '页面片ID',
|
||||
type: 'page-fragment-select',
|
||||
},
|
||||
];
|
||||
]);
|
||||
|
||||
@ -13,6 +13,9 @@
|
||||
"type": "git",
|
||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tmagic/form-schema": "workspace:^"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tmagic/core": "workspace:^",
|
||||
"@tmagic/react-runtime-help": "workspace:^",
|
||||
|
||||
@ -17,8 +17,9 @@
|
||||
*/
|
||||
|
||||
import { getElById } from '@tmagic/core';
|
||||
import { defineFormConfig } from '@tmagic/form-schema';
|
||||
|
||||
export default [
|
||||
export default defineFormConfig([
|
||||
{
|
||||
text: '页面片标识',
|
||||
name: 'name',
|
||||
@ -49,4 +50,4 @@ export default [
|
||||
}
|
||||
},
|
||||
},
|
||||
];
|
||||
]);
|
||||
|
||||
@ -13,6 +13,9 @@
|
||||
"type": "git",
|
||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tmagic/form-schema": "workspace:^"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tmagic/core": "workspace:^",
|
||||
"@tmagic/react-runtime-help": "workspace:^",
|
||||
|
||||
@ -17,8 +17,9 @@
|
||||
*/
|
||||
|
||||
import { getElById } from '@tmagic/core';
|
||||
import { defineFormConfig } from '@tmagic/form-schema';
|
||||
|
||||
export default [
|
||||
export default defineFormConfig([
|
||||
{
|
||||
text: '页面标识',
|
||||
name: 'name',
|
||||
@ -51,4 +52,4 @@ export default [
|
||||
}
|
||||
},
|
||||
},
|
||||
];
|
||||
]);
|
||||
|
||||
@ -14,7 +14,8 @@
|
||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"qrcode": "^1.5.0"
|
||||
"@tmagic/form-schema": "workspace:^",
|
||||
"qrcode": "^1.5.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tmagic/core": "workspace:^",
|
||||
|
||||
@ -16,10 +16,12 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
export default [
|
||||
import { defineFormConfig } from '@tmagic/form-schema';
|
||||
|
||||
export default defineFormConfig([
|
||||
{
|
||||
text: '链接',
|
||||
name: 'url',
|
||||
type: 'data-source-input',
|
||||
},
|
||||
];
|
||||
]);
|
||||
|
||||
@ -13,6 +13,9 @@
|
||||
"type": "git",
|
||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tmagic/form-schema": "workspace:^"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tmagic/core": "workspace:^",
|
||||
"@tmagic/react-runtime-help": "workspace:^",
|
||||
|
||||
@ -16,7 +16,9 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
export default [
|
||||
import { defineFormConfig } from '@tmagic/form-schema';
|
||||
|
||||
export default defineFormConfig([
|
||||
{
|
||||
name: 'text',
|
||||
text: '文本',
|
||||
@ -27,4 +29,4 @@ export default [
|
||||
text: '多行文本',
|
||||
type: 'switch',
|
||||
},
|
||||
];
|
||||
]);
|
||||
|
||||
@ -9,6 +9,7 @@
|
||||
"packages/core/src",
|
||||
"packages/data-source/src",
|
||||
"packages/dep/src",
|
||||
"packages/form-schema/src",
|
||||
"packages/schema/src",
|
||||
"packages/stage/src",
|
||||
"packages/utils/src",
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
"packages/core/src",
|
||||
"packages/data-source/src",
|
||||
"packages/dep/src",
|
||||
"packages/form-schema/src",
|
||||
"packages/schema/src",
|
||||
"packages/stage/src",
|
||||
"packages/utils/src",
|
||||
|
||||
@ -14,6 +14,7 @@
|
||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tmagic/form-schema": "workspace:^",
|
||||
"vue-demi": "^0.14.10"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
||||
@ -16,7 +16,9 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
export default [
|
||||
import { defineFormConfig } from '@tmagic/form-schema';
|
||||
|
||||
export default defineFormConfig([
|
||||
{
|
||||
name: 'className',
|
||||
type: 'data-source-input',
|
||||
@ -27,4 +29,4 @@ export default [
|
||||
name: 'text',
|
||||
type: 'data-source-input',
|
||||
},
|
||||
];
|
||||
]);
|
||||
|
||||
@ -14,6 +14,7 @@
|
||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tmagic/form-schema": "workspace:^",
|
||||
"vue-demi": "^0.14.10"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
||||
@ -17,8 +17,9 @@
|
||||
*/
|
||||
|
||||
import { getElById } from '@tmagic/core';
|
||||
import { defineFormConfig } from '@tmagic/form-schema';
|
||||
|
||||
export default [
|
||||
export default defineFormConfig([
|
||||
{
|
||||
name: 'className',
|
||||
type: 'data-source-input',
|
||||
@ -45,4 +46,4 @@ export default [
|
||||
}
|
||||
},
|
||||
},
|
||||
];
|
||||
]);
|
||||
|
||||
@ -14,6 +14,7 @@
|
||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tmagic/form-schema": "workspace:^",
|
||||
"vue-demi": "^0.14.10"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
||||
@ -16,7 +16,9 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
export default [
|
||||
import { defineFormConfig } from '@tmagic/form-schema';
|
||||
|
||||
export default defineFormConfig([
|
||||
{
|
||||
name: 'className',
|
||||
type: 'data-source-input',
|
||||
@ -37,4 +39,4 @@ export default [
|
||||
name: 'url',
|
||||
type: 'data-source-input',
|
||||
},
|
||||
];
|
||||
]);
|
||||
|
||||
@ -14,6 +14,7 @@
|
||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tmagic/form-schema": "workspace:^",
|
||||
"vue-demi": "^0.14.10"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
||||
@ -16,8 +16,9 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, NODE_CONDS_KEY } from '@tmagic/core';
|
||||
import { defineFormConfig } from '@tmagic/form-schema';
|
||||
|
||||
export default [
|
||||
export default defineFormConfig([
|
||||
{
|
||||
name: 'className',
|
||||
type: 'data-source-input',
|
||||
@ -121,4 +122,4 @@ export default [
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
]);
|
||||
|
||||
@ -14,6 +14,7 @@
|
||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tmagic/form-schema": "workspace:^",
|
||||
"vue-demi": "^0.14.10"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
||||
@ -1 +1,3 @@
|
||||
export default [];
|
||||
import { defineFormConfig } from '@tmagic/form-schema';
|
||||
|
||||
export default defineFormConfig([]);
|
||||
|
||||
@ -14,6 +14,7 @@
|
||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tmagic/form-schema": "workspace:^",
|
||||
"vue-demi": "^0.14.10"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
||||
@ -16,7 +16,9 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
export default [
|
||||
import { defineFormConfig } from '@tmagic/form-schema';
|
||||
|
||||
export default defineFormConfig([
|
||||
{
|
||||
name: 'className',
|
||||
type: 'data-source-input',
|
||||
@ -27,4 +29,4 @@ export default [
|
||||
text: '页面片ID',
|
||||
type: 'page-fragment-select',
|
||||
},
|
||||
];
|
||||
]);
|
||||
|
||||
@ -14,6 +14,7 @@
|
||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tmagic/form-schema": "workspace:^",
|
||||
"vue-demi": "^0.14.10"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
||||
@ -17,8 +17,9 @@
|
||||
*/
|
||||
|
||||
import { getElById } from '@tmagic/core';
|
||||
import { defineFormConfig } from '@tmagic/form-schema';
|
||||
|
||||
export default [
|
||||
export default defineFormConfig([
|
||||
{
|
||||
text: '页面片标识',
|
||||
name: 'name',
|
||||
@ -49,4 +50,4 @@ export default [
|
||||
}
|
||||
},
|
||||
},
|
||||
];
|
||||
]);
|
||||
|
||||
@ -14,6 +14,7 @@
|
||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tmagic/form-schema": "workspace:^",
|
||||
"vue-demi": "^0.14.10"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
||||
@ -17,8 +17,9 @@
|
||||
*/
|
||||
|
||||
import { getElById } from '@tmagic/core';
|
||||
import { defineFormConfig } from '@tmagic/form-schema';
|
||||
|
||||
export default [
|
||||
export default defineFormConfig([
|
||||
{
|
||||
text: '页面标识',
|
||||
name: 'name',
|
||||
@ -79,4 +80,4 @@ export default [
|
||||
language: 'css',
|
||||
height: '500px',
|
||||
},
|
||||
];
|
||||
]);
|
||||
|
||||
@ -14,6 +14,7 @@
|
||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tmagic/form-schema": "workspace:^",
|
||||
"qrcode": "^1.5.0",
|
||||
"vue-demi": "^0.14.10"
|
||||
},
|
||||
|
||||
@ -16,7 +16,9 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
export default [
|
||||
import { defineFormConfig } from '@tmagic/form-schema';
|
||||
|
||||
export default defineFormConfig([
|
||||
{
|
||||
name: 'className',
|
||||
type: 'data-source-input',
|
||||
@ -27,4 +29,4 @@ export default [
|
||||
name: 'url',
|
||||
type: 'data-source-input',
|
||||
},
|
||||
];
|
||||
]);
|
||||
|
||||
@ -14,6 +14,7 @@
|
||||
"url": "https://github.com/Tencent/tmagic-editor.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tmagic/form-schema": "workspace:^",
|
||||
"vue-demi": "^0.14.10"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
||||
@ -16,7 +16,9 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
export default [
|
||||
import { defineFormConfig } from '@tmagic/form-schema';
|
||||
|
||||
export default defineFormConfig([
|
||||
{
|
||||
name: 'className',
|
||||
type: 'data-source-input',
|
||||
@ -32,4 +34,4 @@ export default [
|
||||
text: '多行文本',
|
||||
type: 'switch',
|
||||
},
|
||||
];
|
||||
]);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user