JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-04-05 19:41:40 +08:00
Code Issues Projects Releases Wiki Activity

chore: 更新至vue3.3.4

Browse Source
This commit is contained in:
roymondchen 2023-05-29 17:37:34 +08:00
parent 668991de26
commit 011496fcd8
148 changed files with 1741 additions and 1127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@ -48,7 +48,7 @@
"@types/node": "^18.15.11",
"@typescript-eslint/eslint-plugin": "^5.57.1",
"@typescript-eslint/parser": "^5.57.1",
"@vitejs/plugin-vue": "^4.1.0",
"@vitejs/plugin-vue": "^4.2.3",
"@vitest/coverage-c8": "^0.30.0",
"c8": "^7.11.3",
"chalk": "^4.1.0",
@ -79,7 +79,7 @@
"vite": "^4.3.8",
"vitepress": "1.0.0-beta.1",
"vitest": "^0.31.1",
"vue": "^3.2.37"
"vue": "^3.3.4"
},
"config": {
"commitizen": {

13
packages/design/package.json
View File

@ -36,20 +36,19 @@
"typescript"
],
"dependencies": {
"vue": "^3.2.37"
"vue": "^3.3.4"
},
"peerDependencies": {
"vue": "^3.2.37"
"vue": "^3.3.4"
},
"devDependencies": {
"@types/node": "^15.12.4",
"@vitejs/plugin-vue": "^4.1.0",
"@vue/compiler-sfc": "^3.2.37",
"@vue/test-utils": "^2.0.0",
"@vitejs/plugin-vue": "^4.2.3",
"@vue/compiler-sfc": "^3.3.4",
"@vue/test-utils": "^2.3.2",
"rimraf": "^3.0.2",
"typescript": "^5.0.4",
"vite": "^4.3.8",
"vite-plugin-vue-setup-extend": "^0.4.0",
"vue-tsc": "^1.2.0"
"vue-tsc": "^1.6.5"
}
}

20
packages/design/src/Autocomplete.vue
View File

@ -26,23 +26,17 @@
</component>
</template>
<script setup lang="ts" name="TMAutocomplete">
<script setup lang="ts">
import { computed, ref, watchEffect } from 'vue';
import { getConfig } from './config';
import type { AutocompleteProps } from './types';
const props = defineProps<{
modelValue?: string;
placeholder?: string;
label?: string;
clearable?: boolean;
disabled?: boolean;
triggerOnFocus?: boolean;
valueKey?: string;
debounce?: number;
placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
fetchSuggestions?: (queryString: string, callback: (data: any[]) => any) => void;
}>();
defineOptions({
name: 'TMAutocomplete',
});
const props = defineProps<AutocompleteProps>();
const uiComponent = getConfig('components').autocomplete;

15
packages/design/src/Badge.vue
View File

@ -4,18 +4,17 @@
</component>
</template>
<script setup lang="ts" name="TMBadge">
<script setup lang="ts">
import { computed } from 'vue';
import { getConfig } from './config';
import type { BadgeProps } from './types';
const props = defineProps<{
value?: string | number;
type?: 'primary' | 'success' | 'warning' | 'danger' | 'info';
max?: number;
isDot?: boolean;
hidden?: boolean;
}>();
defineOptions({
name: 'TMBadge',
});
const props = defineProps<BadgeProps>();
const uiComponent = getConfig('components').badge;

14
packages/design/src/Button.vue
View File

@ -6,17 +6,17 @@
</component>
</template>
<script setup lang="ts" name="TMButton">
<script setup lang="ts">
import { computed } from 'vue';
import { getConfig } from './config';
import type { ButtonProps } from './types';
const props = defineProps<{
type?: string;
size?: 'large' | 'default' | 'small';
text?: boolean;
icon?: any;
}>();
defineOptions({
name: 'TMButton',
});
const props = defineProps<ButtonProps>();
const uiComponent = getConfig('components').button;

13
packages/design/src/Card.vue
View File

@ -10,16 +10,17 @@
</component>
</template>
<script setup lang="ts" name="TMCard">
<script setup lang="ts">
import { computed } from 'vue';
import { getConfig } from './config';
import type { CardProps } from './types';
const props = defineProps<{
bodyStyle?: Record<string, any>;
shadow?: string;
header?: string;
}>();
defineOptions({
name: 'TMCard',
});
const props = defineProps<CardProps>();
const uiComponent = getConfig('components').card;

25
packages/design/src/Cascader.vue
View File

@ -9,28 +9,17 @@
></component>
</template>
<script setup lang="ts" name="TMCascader">
<script setup lang="ts">
import { computed, ref } from 'vue';
import { getConfig } from './config';
import { CascaderOption } from './type';
import { CascaderProps } from './types';
const props = defineProps<{
modelValue?: any;
placeholder?: string;
disabled?: boolean;
clearable?: boolean;
filterable?: boolean;
options?: CascaderOption[];
size?: 'large' | 'default' | 'small';
props: {
expandTrigger?: 'click' | 'hover';
multiple?: boolean;
checkStrictly?: boolean;
emitPath?: boolean;
lazy?: boolean;
};
}>();
defineOptions({
name: 'TMCascader',
});
const props = defineProps<CascaderProps>();
const uiComponent = getConfig('components').cascader;

25
packages/design/src/Checkbox.vue
View File

@ -12,25 +12,20 @@
</component>
</template>
<script setup lang="ts" name="TMCheckbox">
<script setup lang="ts">
import { computed } from 'vue';
import { getConfig } from './config';
import type { CheckboxProps } from './types';
const props = withDefaults(
defineProps<{
modelValue?: string | number | boolean;
label?: any;
trueLabel?: string | number | boolean;
falseLabel?: string | number | boolean;
disabled?: boolean;
size?: 'large' | 'default' | 'small';
}>(),
{
trueLabel: undefined,
falseLabel: undefined,
},
);
defineOptions({
name: 'TMCheckbox',
});
const props = withDefaults(defineProps<CheckboxProps>(), {
trueLabel: undefined,
falseLabel: undefined,
});
const uiComponent = getConfig('components').checkbox;

14
packages/design/src/CheckboxGroup.vue
View File

@ -10,17 +10,17 @@
</component>
</template>
<script setup lang="ts" name="TMCheckboxGroup">
<script setup lang="ts">
import { computed } from 'vue';
import { getConfig } from './config';
import type { CheckboxGroupProps } from './types';
const props = defineProps<{
modelValue?: any[];
label?: string;
disabled?: boolean;
size?: 'large' | 'default' | 'small';
}>();
defineOptions({
name: 'TMCheckboxGroup',
});
const props = defineProps<CheckboxGroupProps>();
const uiComponent = getConfig('components').checkboxGroup;

11
packages/design/src/Col.vue
View File

@ -4,14 +4,17 @@
</component>
</template>
<script setup lang="ts" name="TMCol">
<script setup lang="ts">
import { computed } from 'vue';
import { getConfig } from './config';
import type { ColProps } from './types';
const props = defineProps<{
span?: number;
}>();
defineOptions({
name: 'TMCol',
});
const props = defineProps<ColProps>();
const uiComponent = getConfig('components').col;

12
packages/design/src/Collapse.vue
View File

@ -10,15 +10,17 @@
</component>
</template>
<script setup lang="ts" name="TMCollapse">
<script setup lang="ts">
import { computed } from 'vue';
import { getConfig } from './config';
import type { CollapseProps } from './types';
const props = defineProps<{
modelValue?: string | string[];
accordion?: boolean;
}>();
defineOptions({
name: 'TMCollapse',
});
const props = defineProps<CollapseProps>();
const uiComponent = getConfig('components').collapse;

13
packages/design/src/CollapseItem.vue
View File

@ -16,16 +16,17 @@
</component>
</template>
<script setup lang="ts" name="TMCollapseItem">
<script setup lang="ts">
import { computed } from 'vue';
import { getConfig } from './config';
import type { CollapseItemProps } from './types';
const props = defineProps<{
name?: string | number;
title?: string;
disabled?: boolean;
}>();
defineOptions({
name: 'TMCollapseItem',
});
const props = defineProps<CollapseItemProps>();
const uiComponent = getConfig('components').collapseItem;

23
packages/design/src/ColorPicker.vue
View File

@ -9,23 +9,20 @@
</component>
</template>
<script setup lang="ts" name="TMColorPicker">
<script setup lang="ts">
import { computed } from 'vue';
import { getConfig } from './config';
import type { ColorPickerProps } from './types';
const props = withDefaults(
defineProps<{
modelValue?: string;
disabled?: boolean;
showAlpha?: boolean;
size?: 'large' | 'default' | 'small';
}>(),
{
showAlpha: false,
disabled: false,
},
);
defineOptions({
name: 'TMColorPicker',
});
const props = withDefaults(defineProps<ColorPickerProps>(), {
showAlpha: false,
disabled: false,
});
const uiComponent = getConfig('components').colorPicker;

31
packages/design/src/DatePicker.vue
View File

@ -9,32 +9,19 @@
</component>
</template>
<script setup lang="ts" name="TMDatePicker">
<script setup lang="ts">
import { computed } from 'vue';
import { getConfig } from './config';
import type { DatePickerProps } from './types';
const props = withDefaults(
defineProps<{
type?: string;
modelValue?: any;
disabled?: boolean;
placeholder?: string;
rangeSeparator?: string;
startPlaceholder?: string;
endPlaceholder?: string;
format?: string;
/** 可选，绑定值的格式。 不指定则绑定值为 Date 对象 */
valueFormat?: string;
/** 在范围选择器里取消两个日期面板之间的联动 */
unlinkPanels?: boolean;
defaultTime?: any;
size?: 'large' | 'default' | 'small';
}>(),
{
type: 'date',
},
);
defineOptions({
name: 'TMDatePicker',
});
const props = withDefaults(defineProps<DatePickerProps>(), {
type: 'date',
});
const uiComponent = getConfig('components').datePicker;

18
packages/design/src/Dialog.vue
View File

@ -14,21 +14,17 @@
</component>
</template>
<script setup lang="ts" name="TMDialog">
<script setup lang="ts">
import { computed } from 'vue';
import { getConfig } from './config';
import type { DialogProps } from './types';
const props = defineProps<{
modelValue?: boolean;
appendToBody?: boolean;
beforeClose?: any;
title?: string;
width?: string | number;
fullscreen?: boolean;
closeOnClickModal?: boolean;
closeOnPressEscape?: boolean;
}>();
defineOptions({
name: 'TMDialog',
});
const props = defineProps<DialogProps>();
const uiComponent = getConfig('components').dialog;

13
packages/design/src/Divider.vue
View File

@ -4,16 +4,17 @@
</component>
</template>
<script setup lang="ts" name="TMDivider">
<script setup lang="ts">
import { computed } from 'vue';
import { getConfig } from './config';
import type { DividerProps } from './types';
const props = defineProps<{
direction?: string;
borderStyle?: string;
contentPosition?: string;
}>();
defineOptions({
name: 'TMDivider',
});
const props = defineProps<DividerProps>();
const uiComponent = getConfig('components').divider;

23
packages/design/src/Drawer.vue
View File

@ -21,29 +21,24 @@
</component>
</template>
<script setup lang="ts" name="TMDrawer">
<script setup lang="ts">
import { computed } from 'vue';
import { getConfig } from './config';
import type { DrawerProps } from './types';
const props = defineProps<{
modelValue?: boolean;
appendToBody?: boolean;
beforeClose?: any;
title?: string;
size?: string | number;
fullscreen?: boolean;
closeOnClickModal?: boolean;
closeOnPressEscape?: boolean;
direction?: 'rtl' | 'ltr' | 'ttb' | 'bt';
}>();
defineOptions({
name: 'TMDrawer',
});
const props = defineProps<DrawerProps>();
const emit = defineEmits(['open', 'opened', 'close', 'closed', 'update:modelValue']);
const uiComponent = getConfig('components').drawer;
const uiProps = computed(() => uiComponent.props(props));
const emit = defineEmits(['open', 'opened', 'close', 'closed', 'update:modelValue']);
const openHandler = (...args: any[]) => {
emit('open', ...args);
};

23
packages/design/src/Dropdown.vue
View File

@ -8,26 +8,17 @@
</component>
</template>
<script setup lang="ts" name="TMDropdown">
<script setup lang="ts">
import { computed } from 'vue';
import { getConfig } from './config';
import type { DropdownProps } from './types';
const props = defineProps<{
type?: string;
size?: string;
maxHeight?: string | number;
splitButton?: boolean;
disable?: boolean;
placement?: string;
trigger?: string;
hideOnClick?: boolean;
showTimeout?: number;
role?: string;
tabindex?: number;
popperClass?: string;
popperOptions?: any;
}>();
defineOptions({
name: 'TMDropdown',
});
const props = defineProps<DropdownProps>();
const uiComponent = getConfig('components').dropdown;

14
packages/design/src/DropdownItem.vue
View File

@ -4,17 +4,17 @@
</component>
</template>
<script setup lang="ts" name="TMDropdownItem">
<script setup lang="ts">
import { computed } from 'vue';
import { getConfig } from './config';
import type { DropdownItemProps } from './types';
const props = defineProps<{
command?: any;
disabled?: boolean;
divided?: boolean;
icon?: any;
}>();
defineOptions({
name: 'TMDropdownItem',
});
const props = defineProps<DropdownItemProps>();
const uiComponent = getConfig('components').dropdownItem;

6
packages/design/src/DropdownMenu.vue
View File

@ -4,8 +4,12 @@
</component>
</template>
<script setup lang="ts" name="TMDropdownMenu">
<script setup lang="ts">
import { getConfig } from './config';
defineOptions({
name: 'TMDropdownMenu',
});
const uiComponent = getConfig('components').dropdownMenu;
</script>

17
packages/design/src/Form.vue
View File

@ -4,25 +4,24 @@
</component>
</template>
<script setup lang="ts" name="TMForm">
<script setup lang="ts">
import { computed, ref } from 'vue';
import { getConfig } from './config';
import type { FormProps } from './types';
const form = ref<any>();
defineOptions({
name: 'TMForm',
});
const props = defineProps<{
model?: any;
labelWidth?: string | number;
disabled?: boolean;
inline?: boolean;
labelPosition?: string;
}>();
const props = defineProps<FormProps>();
const uiComponent = getConfig('components').form;
const uiProps = computed(() => uiComponent.props(props));
const form = ref<any>();
defineExpose({
validate() {
return form.value?.validate();

14
packages/design/src/FormItem.vue
View File

@ -7,15 +7,17 @@
</component>
</template>
<script setup lang="ts" name="TMFormItem">
<script setup lang="ts">
import { computed } from 'vue';
import { getConfig } from './config';
const props = defineProps<{
prop?: string;
labelWidth?: string | number;
rules?: any;
}>();
import type { FormItemProps } from './types';
defineOptions({
name: 'TMFormItem',
});
const props = defineProps<FormItemProps>();
const uiComponent = getConfig('components').formItem;

6
packages/design/src/Icon.vue
View File

@ -4,8 +4,12 @@
</component>
</template>
<script setup lang="ts" name="TMIcon">
<script setup lang="ts">
import { getConfig } from './config';
defineOptions({
name: 'TMIcon',
});
const uiComponent = getConfig('components').icon;
</script>

16
packages/design/src/Input.vue
View File

@ -22,19 +22,17 @@
</component>
</template>
<script setup lang="ts" name="TMInput">
<script setup lang="ts">
import { computed } from 'vue';
import { getConfig } from './config';
import type { InputProps } from './types';
const props = defineProps<{
modelValue?: string | number;
clearable?: boolean;
disabled?: boolean;
placeholder?: string;
type?: string;
size?: 'large' | 'default' | 'small';
}>();
defineOptions({
name: 'TMInput',
});
const props = defineProps<InputProps>();
const uiComponent = getConfig('components').input;

19
packages/design/src/InputNumber.vue
View File

@ -9,22 +9,17 @@
></component>
</template>
<script setup lang="ts" name="TMInputNumber">
<script setup lang="ts">
import { computed } from 'vue';
import { getConfig } from './config';
import type { InputNumberProps } from './types';
const props = defineProps<{
modelValue?: string | number | boolean;
clearable?: boolean;
controlsPosition?: string;
disabled?: boolean;
placeholder?: string;
step?: number;
min?: number;
max?: number;
size?: 'large' | 'default' | 'small';
}>();
defineOptions({
name: 'TMInputNumber',
});
const props = defineProps<InputNumberProps>();
const uiComponent = getConfig('components').inputNumber;

13
packages/design/src/Option.vue
View File

@ -4,16 +4,17 @@
</component>
</template>
<script setup lang="ts" name="TMOption">
<script setup lang="ts">
import { computed } from 'vue';
import { getConfig } from './config';
import type { OptionProps } from './types';
const props = defineProps<{
value?: any;
label?: string;
disabled?: boolean;
}>();
defineOptions({
name: 'TMOption',
});
const props = defineProps<OptionProps>();
const uiComponent = getConfig('components').option;

12
packages/design/src/OptionGroup.vue
View File

@ -4,15 +4,17 @@
</component>
</template>
<script setup lang="ts" name="TMOptionGroup">
<script setup lang="ts">
import { computed, ref } from 'vue';
import { getConfig } from './config';
import type { OptionGroupProps } from './types';
const props = defineProps<{
label?: string;
disabled?: boolean;
}>();
defineOptions({
name: 'TMOptionGroup',
});
const props = defineProps<OptionGroupProps>();
const uiComponent = getConfig('components').optionGroup;

16
packages/design/src/Pagination.vue
View File

@ -9,19 +9,17 @@
></component>
</template>
<script setup lang="ts" name="TMPagination">
<script setup lang="ts">
import { computed } from 'vue';
import { getConfig } from './config';
import type { PaginationProps } from './types';
const props = defineProps<{
layout?: string;
hideOnSinglePage?: boolean;
curPage?: number;
pageSizes?: number[];
pagesize?: number;
total?: number;
}>();
defineOptions({
name: 'TMPagination',
});
const props = defineProps<PaginationProps>();
const uiComponent = getConfig('components').pagination;

18
packages/design/src/Popover.vue
View File

@ -8,21 +8,17 @@
</component>
</template>
<script setup lang="ts" name="TMPopover">
<script setup lang="ts">
import { computed } from 'vue';
import { getConfig } from './config';
import type { PopoverProps } from './types';
const props = defineProps<{
placement?: string;
width?: string | number;
title?: string;
trigger?: string;
effect?: string;
content?: string;
disabled?: boolean;
popperClass?: string;
}>();
defineOptions({
name: 'TMPopover',
});
const props = defineProps<PopoverProps>();
const uiComponent = getConfig('components').popover;

11
packages/design/src/Radio.vue
View File

@ -4,14 +4,17 @@
</component>
</template>
<script setup lang="ts" name="TMRadio">
<script setup lang="ts">
import { computed } from 'vue';
import { getConfig } from './config';
import type { RadioProps } from './types';
const props = defineProps<{
label?: string | number | boolean;
}>();
defineOptions({
name: 'TMRadio',
});
const props = defineProps<RadioProps>();
const uiComponent = getConfig('components').radio;

13
packages/design/src/RadioButton.vue
View File

@ -4,16 +4,17 @@
</component>
</template>
<script setup lang="ts" name="TMRadioButton">
<script setup lang="ts">
import { computed } from 'vue';
import { getConfig } from './config';
import type { RadioButtonProps } from './types';
const props = defineProps<{
label?: string | number | boolean;
disabled?: boolean;
name?: string;
}>();
defineOptions({
name: 'TMRadioButton',
});
const props = defineProps<RadioButtonProps>();
const uiComponent = getConfig('components').radioButton;

13
packages/design/src/RadioGroup.vue
View File

@ -10,16 +10,17 @@
</component>
</template>
<script setup lang="ts" name="TMRadioGroup">
<script setup lang="ts">
import { computed } from 'vue';
import { getConfig } from './config';
import type { RadioGroupProps } from './types';
const props = defineProps<{
modelValue?: string | number | boolean;
disabled?: boolean;
size?: 'large' | 'default' | 'small';
}>();
defineOptions({
name: 'TMRadioGroup',
});
const props = defineProps<RadioGroupProps>();
const uiComponent = getConfig('components').radioGroup;

6
packages/design/src/Row.vue
View File

@ -4,8 +4,12 @@
</component>
</template>
<script setup lang="ts" name="TMRow">
<script setup lang="ts">
import { getConfig } from './config';
defineOptions({
name: 'TMRow',
});
const uiComponent = getConfig('components').row;
</script>

12
packages/design/src/Scrollbar.vue
View File

@ -1,17 +1,15 @@
<template>
<component class="tmagic-design-scrollbar" :is="uiComponent.component" v-bind="uiProps">
<component class="tmagic-design-scrollbar" :is="uiComponent.component">
<slot></slot>
</component>
</template>
<script setup lang="ts" name="TMScrollbar">
import { computed } from 'vue';
<script setup lang="ts">
import { getConfig } from './config';
const props = defineProps();
defineOptions({
name: 'TMScrollbar',
});
const uiComponent = getConfig('components').scrollbar;
const uiProps = computed(() => uiComponent.props(props));
</script>

25
packages/design/src/Select.vue
View File

@ -13,28 +13,17 @@
</component>
</template>
<script setup lang="ts" name="TMSelect">
<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { getConfig } from './config';
import type { SelectProps } from './types';
const select = ref<any>();
defineOptions({
name: 'TMSelect',
});
const props = defineProps<{
modelValue?: any;
clearable?: boolean;
filterable?: boolean;
popperClass?: string;
disabled?: boolean;
placeholder?: string;
remote?: boolean;
multiple?: boolean;
allowCreate?: boolean;
valueKey?: string;
remoteMethod?: any;
loading?: boolean;
size?: 'large' | 'default' | 'small';
}>();
const props = defineProps<SelectProps>();
const uiComponent = getConfig('components').select;
@ -42,6 +31,8 @@ const uiProps = computed(() => uiComponent.props(props));
const emit = defineEmits(['change', 'update:modelValue', 'visibleHandler']);
const select = ref<any>();
const changeHandler = (...args: any[]) => {
emit('change', ...args);
};

12
packages/design/src/Step.vue
View File

@ -4,15 +4,17 @@
</component>
</template>
<script setup lang="ts" name="TMStep">
<script setup lang="ts">
import { computed } from 'vue';
import { getConfig } from './config';
import type { StepProps } from './types';
const props = defineProps<{
title?: string;
active?: number;
}>();
defineOptions({
name: 'TMStep',
});
const props = defineProps<StepProps>();
const emit = defineEmits(['click']);

12
packages/design/src/Steps.vue
View File

@ -4,15 +4,17 @@
</component>
</template>
<script setup lang="ts" name="TMSteps">
<script setup lang="ts">
import { computed } from 'vue';
import { getConfig } from './config';
import type { StepsProps } from './types';
const props = defineProps<{
active?: number;
space?: number | string;
}>();
defineOptions({
name: 'TMSteps',
});
const props = defineProps<StepsProps>();
const uiComponent = getConfig('components').steps;

16
packages/design/src/Switch.vue
View File

@ -12,19 +12,17 @@
</component>
</template>
<script setup lang="ts" name="TMSwitch">
<script setup lang="ts">
import { computed } from 'vue';
import { getConfig } from './config';
import type { SwitchProps } from './types';
const props = defineProps<{
modelValue?: string | number | boolean;
label?: any;
activeValue?: string | number | boolean;
inactiveValue?: string | number | boolean;
disabled?: boolean;
size?: 'large' | 'default' | 'small';
}>();
defineOptions({
name: 'TMSwitch',
});
const props = defineProps<SwitchProps>();
const uiComponent = getConfig('components').switch;

13
packages/design/src/TabPane.vue
View File

@ -10,16 +10,17 @@
</component>
</template>
<script setup lang="ts" name="TMTabPane">
<script setup lang="ts">
import { computed } from 'vue';
import { getConfig } from './config';
import type { TabPaneProps } from './types';
const props = defineProps<{
name?: string;
label?: string;
lazy?: boolean;
}>();
defineOptions({
name: 'TMTabPane',
});
const props = defineProps<TabPaneProps>();
const uiComponent = getConfig('components').tabPane;
const uiProps = computed(() => uiComponent.props(props));

21
packages/design/src/Table.vue
View File

@ -13,22 +13,19 @@
</component>
</template>
<script setup lang="ts" name="TMTable">
<script setup lang="ts">
import { computed, ref, watchEffect } from 'vue';
import { getConfig } from './config';
import type { TableProps } from './types';
const props = withDefaults(
defineProps<{
data?: any[];
border?: boolean;
maxHeight?: number | string;
defaultExpandAll?: boolean;
}>(),
{
data: () => [],
},
);
defineOptions({
name: 'TMTable',
});
const props = withDefaults(defineProps<TableProps>(), {
data: () => [],
});
const uiComponent = getConfig('components').table;

15
packages/design/src/TableColumn.vue
View File

@ -1,22 +1,23 @@
<template>
<component :is="uiComponent.component" v-bind="uiProps">
<template #default="{ $index, row }">
<!-- eslint-disable-next-line vue/valid-attribute-name -->
<slot :$index="$index" :row="row"></slot>
</template>
</component>
</template>
<script setup lang="ts" name="TMTableColumn">
<script setup lang="ts">
import { computed } from 'vue';
import { getConfig } from './config';
import type { TableColumnProps } from './types';
const props = defineProps<{
label?: string;
align?: string;
fixed?: string | boolean;
width?: string | number;
}>();
defineOptions({
name: 'TMTableColumn',
});
const props = defineProps<TableColumnProps>();
const uiComponent = getConfig('components').tableColumn;

14
packages/design/src/Tabs.vue
View File

@ -14,17 +14,17 @@
</component>
</template>
<script setup lang="ts" name="TMTabs">
<script setup lang="ts">
import { computed } from 'vue';
import { getConfig } from './config';
import type { TabsProps } from './types';
const props = defineProps<{
type?: string;
editable?: boolean;
tabPosition?: string;
modelValue?: string | number;
}>();
defineOptions({
name: 'TMTabs',
});
const props = defineProps<TabsProps>();
const uiComponent = getConfig('components').tabs;

12
packages/design/src/Tag.vue
View File

@ -4,15 +4,17 @@
</component>
</template>
<script setup lang="ts" name="TMTag">
<script setup lang="ts">
import { computed } from 'vue';
import { getConfig } from './config';
import type { TagProps } from './types';
const props = defineProps<{
type?: string;
disableTransition?: boolean;
}>();
defineOptions({
name: 'TMTag',
});
const props = defineProps<TagProps>();
const uiComponent = getConfig('components').tag;

14
packages/design/src/TimePicker.vue
View File

@ -9,17 +9,17 @@
</component>
</template>
<script setup lang="ts" name="TMTimePicker">
<script setup lang="ts">
import { computed } from 'vue';
import { getConfig } from './config';
import type { TimePickerProps } from './types';
const props = defineProps<{
modelValue?: any;
disabled?: boolean;
placeholder?: string;
size?: 'large' | 'default' | 'small';
}>();
defineOptions({
name: 'TMTimePicker',
});
const props = defineProps<TimePickerProps>();
const uiComponent = getConfig('components').timePicker;

16
packages/design/src/Tooltip.vue
View File

@ -7,19 +7,17 @@
</component>
</template>
<script setup lang="ts" name="TMTooltip">
<script setup lang="ts">
import { computed } from 'vue';
import { getConfig } from './config';
import type { TooltipProps } from './types';
const props = defineProps<{
placement?: string;
disabled?: boolean;
content?: string;
effect?: string;
transition?: string;
offset?: number;
}>();
defineOptions({
name: 'TMTooltip',
});
const props = defineProps<TooltipProps>();
const uiComponent = getConfig('components').tooltip;

34
packages/design/src/Tree.vue
View File

@ -19,37 +19,17 @@
</component>
</template>
<script setup lang="ts" name="TMTree">
<script setup lang="ts">
import { computed, ref } from 'vue';
import { getConfig } from './config';
import type { TreeProps } from './types';
const props = defineProps<{
data?: any[];
emptyText?: string;
nodeKey?: string;
props?: any;
renderAfterExpand?: boolean;
load?: any;
renderContent?: any;
highlightCurrent?: boolean;
defaultExpandAll?: boolean;
checkOnClickNode?: boolean;
autoExpandParent?: boolean;
defaultExpandedKeys?: any[];
showCheckbox?: boolean;
checkStrictly?: boolean;
defaultCheckedKeys?: any[];
currentNodeKey?: string | number;
filterNodeMethod?: (value: any, data: any, node: any) => boolean;
accordion?: boolean;
indent?: number;
icon?: any;
lazy?: boolean;
draggable?: boolean;
allowDrag?: (node: any) => boolean;
allowDrop?: any;
}>();
defineOptions({
name: 'TMTree',
});
const props = defineProps<TreeProps>();
const uiComponent = getConfig('components').tree;

13
packages/design/src/Upload.vue
View File

@ -8,16 +8,17 @@
></component>
</template>
<script setup lang="ts" name="TMUpload">
<script setup lang="ts">
import { computed, ref } from 'vue';
import { getConfig } from './config';
import type { UploadProps } from './types';
const props = defineProps<{
action?: string;
autoUpload?: boolean;
disabled?: boolean;
}>();
defineOptions({
name: 'TMUpload',
});
const props = defineProps<UploadProps>();
const emit = defineEmits(['change']);

2
packages/design/src/config.ts
View File

@ -17,7 +17,7 @@
*/
import defaultAdapter from './defaultAdapter';
import { PluginOptions } from './type';
import { PluginOptions } from './types';
let $MAGIC_DESIGN: PluginOptions = {};

134
packages/design/src/defaultAdapter.ts
View File

@ -1,228 +1,272 @@
import type {
AutocompleteProps,
BadgeProps,
ButtonProps,
CardProps,
CascaderProps,
CheckboxGroupProps,
CheckboxProps,
CollapseItemProps,
CollapseProps,
ColorPickerProps,
ColProps,
DatePickerProps,
DialogProps,
DividerProps,
DrawerProps,
DropdownItemProps,
DropdownProps,
FormItemProps,
FormProps,
InputNumberProps,
InputProps,
OptionGroupProps,
OptionProps,
PaginationProps,
PopoverProps,
RadioButtonProps,
RadioGroupProps,
RadioProps,
SelectProps,
StepProps,
StepsProps,
SwitchProps,
TableColumnProps,
TableProps,
TabPaneProps,
TabsProps,
TagProps,
TimePickerProps,
TooltipProps,
TreeProps,
UploadProps,
} from './types';
export default {
components: {
badge: {
component: 'el-badge',
props: (props: any) => props,
props: (props: BadgeProps) => props,
},
autocomplete: {
component: 'el-autocomplete',
props: (props: any) => props,
props: (props: AutocompleteProps) => props,
},
button: {
component: 'el-button',
props: (props: any) => props,
props: (props: ButtonProps) => props,
},
card: {
component: 'el-card',
props: (props: any) => props,
props: (props: CardProps) => props,
},
cascader: {
component: 'el-cascader',
props: (props: any) => props,
props: (props: CascaderProps) => props,
},
checkbox: {
component: 'el-checkbox',
props: (props: any) => props,
props: (props: CheckboxProps) => props,
},
checkboxGroup: {
component: 'el-checkbox-group',
props: (props: any) => props,
props: (props: CheckboxGroupProps) => props,
},
col: {
component: 'el-col',
props: (props: any) => props,
props: (props: ColProps) => props,
},
collapse: {
component: 'el-collapse',
props: (props: any) => props,
props: (props: CollapseProps) => props,
},
collapseItem: {
component: 'el-collapse-item',
props: (props: any) => props,
props: (props: CollapseItemProps) => props,
},
colorPicker: {
component: 'el-color-picker',
props: (props: any) => props,
props: (props: ColorPickerProps) => props,
},
datePicker: {
component: 'el-date-picker',
props: (props: any) => props,
props: (props: DatePickerProps) => props,
},
dialog: {
component: 'el-dialog',
props: (props: any) => props,
props: (props: DialogProps) => props,
},
divider: {
component: 'el-divider',
props: (props: any) => props,
props: (props: DividerProps) => props,
},
drawer: {
component: 'el-drawer',
props: (props: any) => props,
props: (props: DrawerProps) => props,
},
dropdown: {
component: 'el-dropdown',
props: (props: any) => props,
props: (props: DropdownProps) => props,
},
dropdownItem: {
component: 'dropdown-item',
props: (props: any) => props,
props: (props: DropdownItemProps) => props,
},
dropdownMenu: {
component: 'dropdown-menu',
props: (props: any) => props,
props: () => ({}),
},
form: {
component: 'el-form',
props: (props: any) => props,
props: (props: FormProps) => props,
},
formItem: {
component: 'el-form-item',
props: (props: any) => props,
props: (props: FormItemProps) => props,
},
icon: {
component: 'el-icon',
props: (props: any) => props,
props: () => ({}),
},
input: {
component: 'el-input',
props: (props: any) => props,
props: (props: InputProps) => props,
},
inputNumber: {
component: 'el-input-number',
props: (props: any) => props,
props: (props: InputNumberProps) => props,
},
option: {
component: 'el-option',
props: (props: any) => props,
props: (props: OptionProps) => props,
},
optionGroup: {
component: 'el-option-group',
props: (props: any) => props,
props: (props: OptionGroupProps) => props,
},
pagination: {
component: 'el-pagination',
props: (props: any) => props,
props: (props: PaginationProps) => props,
},
popover: {
component: 'el-popover',
props: (props: any) => props,
props: (props: PopoverProps) => props,
},
radio: {
component: 'el-radio',
props: (props: any) => props,
props: (props: RadioProps) => props,
},
radioButton: {
component: 'el-radio-button',
props: (props: any) => props,
props: (props: RadioButtonProps) => props,
},
radioGroup: {
component: 'el-radio-group',
props: (props: any) => props,
props: (props: RadioGroupProps) => props,
},
row: {
component: 'el-row',
props: (props: any) => props,
props: () => ({}),
},
scrollbar: {
component: 'el-scrollbar',
props: (props: any) => props,
props: () => ({}),
},
select: {
component: 'el-select',
props: (props: any) => props,
props: (props: SelectProps) => props,
},
step: {
component: 'el-step',
props: (props: any) => props,
props: (props: StepProps) => props,
},
steps: {
component: 'el-steps',
props: (props: any) => props,
props: (props: StepsProps) => props,
},
switch: {
component: 'el-switch',
props: (props: any) => props,
props: (props: SwitchProps) => props,
},
table: {
component: 'el-table',
props: (props: any) => props,
props: (props: TableProps) => props,
},
tableColumn: {
component: 'el-table-column',
props: (props: any) => props,
props: (props: TableColumnProps) => props,
},
tabPane: {
component: 'el-tab-pane',
props: (props: any) => props,
props: (props: TabPaneProps) => props,
},
tabs: {
component: 'el-tabs',
props: (props: any) => props,
props: (props: TabsProps) => props,
},
tag: {
component: 'el-tag',
props: (props: any) => props,
props: (props: TagProps) => props,
},
timePicker: {
component: 'el-time-picker',
props: (props: any) => props,
props: (props: TimePickerProps) => props,
},
tooltip: {
component: 'el-tooltip',
props: (props: any) => props,
props: (props: TooltipProps) => props,
},
tree: {
component: 'el-tree',
props: (props: any) => props,
props: (props: TreeProps) => props,
},
upload: {
component: 'el-upload',
props: (props: any) => props,
props: (props: UploadProps) => props,
},
},
};

4
packages/design/src/index.ts
View File

@ -1,9 +1,9 @@
import { App } from 'vue';
import { setConfig } from './config';
import { PluginOptions, TMagicMessage, TMagicMessageBox } from './type';
import { PluginOptions, TMagicMessage, TMagicMessageBox } from './types';
export * from './type';
export * from './types';
export * from './config';
/* eslint-disable @typescript-eslint/no-unused-vars */

54
packages/design/src/type.ts
View File

@ -1,54 +0,0 @@
import { Directive } from 'vue';
export interface CascaderOption {
/** 指定选项的值为选项对象的某个属性值 */
value: any;
/** 指定选项标签为选项对象的某个属性值 */
label: string;
/** 指定选项的子选项为选项对象的某个属性值 */
children?: CascaderOption[];
}
export interface TMagicMessage {
success: (msg: string) => void;
warning: (msg: string) => void;
info: (msg: string) => void;
error: (msg: string) => void;
closeAll: () => void;
}
export type ElMessageBoxShortcutMethod = ((
message: string,
title: string,
options?: any,
appContext?: any | null,
) => Promise<any>) &
((message: string, options?: any, appContext?: any | null) => Promise<any>);
export interface TMagicMessageBox {
alert: ElMessageBoxShortcutMethod;
confirm: ElMessageBoxShortcutMethod;
prompt: ElMessageBoxShortcutMethod;
close(): void;
}
export type LoadingBinding = boolean;
const INSTANCE_KEY = Symbol('TdesignLoading');
export interface ElementLoading extends HTMLElement {
[INSTANCE_KEY]?: {
instance: any;
};
}
export interface PluginOptions {
message?: TMagicMessage;
messageBox?: TMagicMessageBox;
components?: Record<string, any>;
loading?: Directive<ElementLoading, LoadingBinding>;
[key: string]: any;
}

416
packages/design/src/types.ts Normal file
View File

@ -0,0 +1,416 @@
import { Directive } from 'vue';
export interface CascaderOption {
/** 指定选项的值为选项对象的某个属性值 */
value: any;
/** 指定选项标签为选项对象的某个属性值 */
label: string;
/** 指定选项的子选项为选项对象的某个属性值 */
children?: CascaderOption[];
}
export interface TMagicMessage {
success: (msg: string) => void;
warning: (msg: string) => void;
info: (msg: string) => void;
error: (msg: string) => void;
closeAll: () => void;
}
export type ElMessageBoxShortcutMethod = ((
message: string,
title: string,
options?: any,
appContext?: any | null,
) => Promise<any>) &
((message: string, options?: any, appContext?: any | null) => Promise<any>);
export interface TMagicMessageBox {
alert: ElMessageBoxShortcutMethod;
confirm: ElMessageBoxShortcutMethod;
prompt: ElMessageBoxShortcutMethod;
close(): void;
}
export type LoadingBinding = boolean;
const INSTANCE_KEY = Symbol('TdesignLoading');
export interface ElementLoading extends HTMLElement {
[INSTANCE_KEY]?: {
instance: any;
};
}
export interface PluginOptions {
message?: TMagicMessage;
messageBox?: TMagicMessageBox;
components?: Record<string, any>;
loading?: Directive<ElementLoading, LoadingBinding>;
[key: string]: any;
}
export type FieldSize = 'large' | 'default' | 'small';
export interface AutocompleteProps {
modelValue?: string;
placeholder?: string;
label?: string;
clearable?: boolean;
disabled?: boolean;
triggerOnFocus?: boolean;
valueKey?: string;
debounce?: number;
placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
fetchSuggestions?: (queryString: string, callback: (data: any[]) => any) => void;
}
export interface BadgeProps {
value?: string | number;
type?: 'primary' | 'success' | 'warning' | 'danger' | 'info';
max?: number;
isDot?: boolean;
hidden?: boolean;
}
export interface ButtonProps {
type?: string;
size?: FieldSize;
text?: boolean;
icon?: any;
}
export interface CardProps {
bodyStyle?: Record<string, any>;
shadow?: string;
header?: string;
}
export interface CascaderProps {
modelValue?: any;
placeholder?: string;
disabled?: boolean;
clearable?: boolean;
filterable?: boolean;
options?: CascaderOption[];
size?: FieldSize;
props: {
expandTrigger?: 'click' | 'hover';
multiple?: boolean;
checkStrictly?: boolean;
emitPath?: boolean;
lazy?: boolean;
};
}
export interface CheckboxProps {
modelValue?: string | number | boolean;
value?: string | number | boolean;
label?: any;
trueLabel?: string | number | boolean;
falseLabel?: string | number | boolean;
disabled?: boolean;
size?: FieldSize;
}
export interface CheckboxGroupProps {
modelValue?: any[];
label?: string;
disabled?: boolean;
size?: FieldSize;
}
export interface ColProps {
span?: number;
}
export interface CollapseProps {
modelValue?: string | string[];
accordion?: boolean;
}
export interface CollapseItemProps {
name?: string | number;
title?: string;
disabled?: boolean;
}
export interface ColorPickerProps {
modelValue?: string;
disabled?: boolean;
showAlpha?: boolean;
size?: FieldSize;
}
export interface DatePickerProps {
type?: string;
modelValue?: any;
disabled?: boolean;
placeholder?: string;
rangeSeparator?: string;
startPlaceholder?: string;
endPlaceholder?: string;
format?: string;
/** 可选，绑定值的格式。 不指定则绑定值为 Date 对象 */
valueFormat?: string;
/** 在范围选择器里取消两个日期面板之间的联动 */
unlinkPanels?: boolean;
defaultTime?: any;
size?: FieldSize;
}
export interface DialogProps {
modelValue?: boolean;
appendToBody?: boolean;
beforeClose?: any;
title?: string;
width?: string | number;
fullscreen?: boolean;
closeOnClickModal?: boolean;
closeOnPressEscape?: boolean;
}
export interface DividerProps {
direction?: string;
borderStyle?: string;
contentPosition?: string;
}
export interface DrawerProps {
modelValue?: boolean;
appendToBody?: boolean;
beforeClose?: any;
title?: string;
size?: string | number;
fullscreen?: boolean;
closeOnClickModal?: boolean;
closeOnPressEscape?: boolean;
direction?: 'rtl' | 'ltr' | 'ttb' | 'bt';
}
export interface DropdownProps {
type?: string;
size?: string;
maxHeight?: string | number;
splitButton?: boolean;
disable?: boolean;
placement?: string;
trigger?: string;
hideOnClick?: boolean;
showTimeout?: number;
role?: string;
tabindex?: number;
popperClass?: string;
popperOptions?: any;
}
export interface DropdownItemProps {
command?: any;
disabled?: boolean;
divided?: boolean;
icon?: any;
}
export interface FormProps {
model?: any;
labelWidth?: string | number;
disabled?: boolean;
inline?: boolean;
labelPosition?: string;
}
export interface FormItemProps {
prop?: string;
labelWidth?: string | number;
rules?: any;
}
export interface InputProps {
modelValue?: string | number;
clearable?: boolean;
disabled?: boolean;
placeholder?: string;
type?: string;
size?: FieldSize;
}
export interface InputNumberProps {
modelValue?: string | number | boolean;
clearable?: boolean;
controlsPosition?: string;
disabled?: boolean;
placeholder?: string;
step?: number;
min?: number;
max?: number;
size?: FieldSize;
}
export interface OptionProps {
value?: any;
label?: string;
disabled?: boolean;
}
export interface OptionGroupProps {
label?: string;
disabled?: boolean;
}
export interface PaginationProps {
layout?: string;
hideOnSinglePage?: boolean;
curPage?: number;
pageSizes?: number[];
pagesize?: number;
total?: number;
}
export interface PopoverProps {
placement?: string;
width?: string | number;
title?: string;
trigger?: string;
effect?: string;
content?: string;
disabled?: boolean;
popperClass?: string;
}
export interface RadioProps {
label?: string | number | boolean;
}
export interface RadioButtonProps {
label?: string | number | boolean;
disabled?: boolean;
name?: string;
}
export interface RadioGroupProps {
modelValue?: string | number | boolean;
disabled?: boolean;
size?: FieldSize;
}
export interface SelectProps {
modelValue?: any;
clearable?: boolean;
filterable?: boolean;
popperClass?: string;
disabled?: boolean;
placeholder?: string;
remote?: boolean;
multiple?: boolean;
allowCreate?: boolean;
valueKey?: string;
remoteMethod?: any;
loading?: boolean;
size?: FieldSize;
onSearch?: any;
}
export interface StepProps {
title?: string;
active?: number;
props?: any;
status?: any;
}
export interface StepsProps {
active?: number;
space?: number | string;
}
export interface SwitchProps {
modelValue?: string | number | boolean;
label?: any;
activeValue?: string | number | boolean;
inactiveValue?: string | number | boolean;
disabled?: boolean;
size?: FieldSize;
}
export interface TableProps {
data?: any[];
border?: boolean;
maxHeight?: number | string;
defaultExpandAll?: boolean;
}
export interface TableColumnProps {
label?: string;
align?: string;
fixed?: string | boolean;
width?: string | number;
}
export interface TabPaneProps {
name?: string;
label?: string;
lazy?: boolean;
}
export interface TabsProps {
type?: string;
editable?: boolean;
tabPosition?: string;
modelValue?: string | number;
}
export interface TagProps {
type?: string;
disableTransition?: boolean;
}
export interface TimePickerProps {
modelValue?: any;
disabled?: boolean;
placeholder?: string;
size?: FieldSize;
}
export interface TooltipProps {
placement?: string;
disabled?: boolean;
content?: string;
effect?: string;
transition?: string;
offset?: number;
}
export interface TreeProps {
data?: any[];
emptyText?: string;
nodeKey?: string;
props?: any;
renderAfterExpand?: boolean;
load?: any;
renderContent?: any;
highlightCurrent?: boolean;
defaultExpandAll?: boolean;
checkOnClickNode?: boolean;
autoExpandParent?: boolean;
defaultExpandedKeys?: any[];
showCheckbox?: boolean;
checkStrictly?: boolean;
defaultCheckedKeys?: any[];
currentNodeKey?: string | number;
filterNodeMethod?: (value: any, data: any, node: any) => boolean;
accordion?: boolean;
indent?: number;
icon?: any;
lazy?: boolean;
draggable?: boolean;
allowDrag?: (node: any) => boolean;
allowDrop?: any;
}
export interface UploadProps {
action?: string;
autoUpload?: boolean;
disabled?: boolean;
}

3
packages/design/vite.config.ts
View File

@ -17,13 +17,12 @@
*/
import { defineConfig } from 'vite';
import VueSetupExtend from 'vite-plugin-vue-setup-extend';
import vue from '@vitejs/plugin-vue';
import pkg from './package.json';
export default defineConfig({
plugins: [vue(), VueSetupExtend()],
plugins: [vue()],
optimizeDeps: {
esbuildOptions: {

13
packages/editor/package.json
View File

@ -61,28 +61,27 @@
"lodash-es": "^4.17.21",
"monaco-editor": "^0.34.0",
"serialize-javascript": "^6.0.0",
"vue": "^3.2.37"
"vue": "^3.3.4"
},
"peerDependencies": {
"@tmagic/design": "1.2.15",
"@tmagic/form": "1.2.15",
"monaco-editor": "^0.34.0",
"vue": "^3.2.37"
"vue": "^3.3.4"
},
"devDependencies": {
"@types/events": "^3.0.0",
"@types/lodash-es": "^4.17.4",
"@types/node": "^15.12.4",
"@types/serialize-javascript": "^5.0.1",
"@vitejs/plugin-vue": "^4.1.0",
"@vue/compiler-sfc": "^3.2.37",
"@vue/test-utils": "^2.0.0",
"@vitejs/plugin-vue": "^4.2.3",
"@vue/compiler-sfc": "^3.3.4",
"@vue/test-utils": "^2.3.2",
"rimraf": "^3.0.2",
"sass": "^1.35.1",
"tsc-alias": "^1.8.5",
"typescript": "^5.0.4",
"vite": "^4.3.8",
"vite-plugin-vue-setup-extend": "^0.4.0",
"vue-tsc": "^1.0.11"
"vue-tsc": "^1.6.5"
}
}

2
packages/editor/src/Editor.vue
View File

@ -86,7 +86,7 @@ import { initServiceEvents, initServiceState } from './initService';
import type { Services } from './type';
export default defineComponent({
name: 'm-editor',
name: 'MEditor',
components: {
TMagicNavMenu: NavMenu,

6
packages/editor/src/components/CodeDraftEditor.vue
View File

@ -23,7 +23,7 @@
</div>
</div>
</template>
<script lang="ts" setup name="MEditorCodeDraftEditor">
<script lang="ts" setup>
import { computed, inject, ref, watchEffect } from 'vue';
import type * as monaco from 'monaco-editor';
@ -34,6 +34,10 @@ import { datetimeFormatter } from '@tmagic/utils';
import MagicCodeEditor from '@editor/layouts/CodeEditor.vue';
import type { Services } from '@editor/type';
defineOptions({
name: 'MEditorCodeDraftEditor',
});
const props = withDefaults(
defineProps<{
/** 代码id */

6
packages/editor/src/components/ContentMenu.vue
View File

@ -22,13 +22,17 @@
</div>
</template>
<script lang="ts" setup name="MEditorContentMenu">
<script lang="ts" setup>
import { nextTick, onMounted, onUnmounted, ref } from 'vue';
import { MenuButton, MenuComponent } from '@editor/type';
import ToolButton from './ToolButton.vue';
defineOptions({
name: 'MEditorContentMenu',
});
const props = withDefaults(
defineProps<{
menuData?: (MenuButton | MenuComponent)[];

7
packages/editor/src/components/FunctionEditor.vue
View File

@ -32,7 +32,7 @@
></CodeDraftEditor>
</TMagicCard>
</template>
<script lang="ts" setup name="MEditorFunctionEditor">
<script lang="ts" setup>
import { inject, ref, watchEffect } from 'vue';
import { cloneDeep } from 'lodash-es';
@ -43,6 +43,11 @@ import { CodeParam, Id } from '@tmagic/schema';
import type { Services } from '@editor/type';
import CodeDraftEditor from './CodeDraftEditor.vue';
defineOptions({
name: 'MEditorFunctionEditor',
});
const defaultParamColConfig: ColumnConfig = {
type: 'row',
label: '参数类型',

6
packages/editor/src/components/Icon.vue
View File

@ -7,12 +7,16 @@
<TMagicIcon v-else class="magic-editor-icon"><component :is="toRaw(icon)"></component></TMagicIcon>
</template>
<script lang="ts" setup name="MEditorIcon">
<script lang="ts" setup>
import { toRaw } from 'vue';
import { Edit } from '@element-plus/icons-vue';
import { TMagicIcon } from '@tmagic/design';
defineOptions({
name: 'MEditorIcon',
});
defineProps<{
icon?: any;
}>();

6
packages/editor/src/components/Layout.vue
View File

@ -20,11 +20,15 @@
</div>
</template>
<script lang="ts" setup name="MEditorLayout">
<script lang="ts" setup>
import { computed, onMounted, onUnmounted, ref } from 'vue';
import Resizer from '@editor/layouts/Resizer.vue';
defineOptions({
name: 'MEditorLayout',
});
const emit = defineEmits(['update:left', 'change', 'update:right']);
const props = withDefaults(

6
packages/editor/src/components/ScrollBar.vue
View File

@ -4,10 +4,14 @@
</div>
</template>
<script lang="ts" setup name="MEditorScrollBar">
<script lang="ts" setup>
import { computed, onMounted, onUnmounted, ref } from 'vue';
import Gesto from 'gesto';
defineOptions({
name: 'MEditorScrollBar',
});
const props = defineProps<{
size: number;
scrollSize: number;

6
packages/editor/src/components/ScrollViewer.vue
View File

@ -22,7 +22,7 @@
</div>
</template>
<script lang="ts" setup name="MEditorScrollViewer">
<script lang="ts" setup>
import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
import type { ScrollViewerEvent } from '@editor/type';
@ -30,6 +30,10 @@ import { ScrollViewer } from '@editor/utils/scroll-viewer';
import ScrollBar from './ScrollBar.vue';
defineOptions({
name: 'MEditorScrollViewer',
});
const props = withDefaults(
defineProps<{
width?: number;

4
packages/editor/src/components/SearchInput.vue
View File

@ -19,6 +19,10 @@ import { Search } from '@element-plus/icons-vue';
import { TMagicIcon, TMagicInput } from '@tmagic/design';
defineOptions({
name: 'MEditorSearchInput',
});
const emit = defineEmits(['search']);
const filterText = ref('');

6
packages/editor/src/components/ToolButton.vue
View File

@ -43,7 +43,7 @@
</div>
</template>
<script lang="ts" setup name="MEditorToolButton">
<script lang="ts" setup>
import { computed, inject } from 'vue';
import { ArrowDown } from '@element-plus/icons-vue';
@ -60,6 +60,10 @@ import {
import MIcon from '../components/Icon.vue';
import type { MenuButton, MenuComponent, Services } from '../type';
defineOptions({
name: 'MEditorToolButton',
});
const props = withDefaults(
defineProps<{
data?: MenuButton | MenuComponent;

6
packages/editor/src/fields/Code.vue
View File

@ -8,9 +8,13 @@
></magic-code-editor>
</template>
<script lang="ts" setup name="MEditorCode">
<script lang="ts" setup>
import { computed } from 'vue';
defineOptions({
name: 'MEditorCode',
});
const emit = defineEmits(['change']);
const props = defineProps<{

6
packages/editor/src/fields/CodeLink.vue
View File

@ -2,10 +2,14 @@
<m-fields-link :config="formConfig" :model="modelValue" name="form" @change="changeHandler"></m-fields-link>
</template>
<script lang="ts" setup name="MEditorCodeLink">
<script lang="ts" setup>
import { computed, reactive, watch } from 'vue';
import serialize from 'serialize-javascript';
defineOptions({
name: 'MEditorCodeLink',
});
const props = defineProps<{
config: {
type: 'code-link';

8
packages/editor/src/fields/CodeSelect.vue
View File

@ -6,13 +6,17 @@
</div>
</template>
<script lang="ts" setup name="MEditorCodeSelect">
import { computed, defineEmits, defineProps, watch } from 'vue';
<script lang="ts" setup>
import { computed, watch } from 'vue';
import { isEmpty } from 'lodash-es';
import { TMagicCard } from '@tmagic/design';
import { HookType } from '@tmagic/schema';
defineOptions({
name: 'MEditorCodeSelect',
});
const emit = defineEmits(['change']);
const props = withDefaults(

8
packages/editor/src/fields/CodeSelectCol.vue
View File

@ -16,8 +16,8 @@
</div>
</template>
<script lang="ts" setup name="MEditorCodeSelectCol">
import { computed, defineEmits, defineProps, inject, ref, watch } from 'vue';
<script lang="ts" setup name="">
import { computed, inject, ref, watch } from 'vue';
import { Edit, View } from '@element-plus/icons-vue';
import { isEmpty, map } from 'lodash-es';
@ -27,6 +27,10 @@ import { Id } from '@tmagic/schema';
import Icon from '@editor/components/Icon.vue';
import type { CodeParamStatement, Services } from '@editor/type';
defineOptions({
name: 'MEditorCodeSelectCol',
});
const services = inject<Services>('services');
const mForm = inject<FormState>('mForm');
const emit = defineEmits(['change']);

4
packages/editor/src/fields/DataSourceFields.vue
View File

@ -24,6 +24,10 @@ import { TMagicButton, tMagicMessageBox } from '@tmagic/design';
import { FormConfig, FormState, MFormDialog } from '@tmagic/form';
import { MagicTable } from '@tmagic/table';
defineOptions({
name: 'MEditorDataSourceFields',
});
const props = withDefaults(
defineProps<{
config: {

4
packages/editor/src/fields/DataSourceInput.vue
View File

@ -50,6 +50,10 @@ import type { DataSchema, DataSourceSchema } from '@tmagic/schema';
import Icon from '@editor/components/Icon.vue';
import type { Services } from '@editor/type';
defineOptions({
name: 'MEditorDataSourceInput',
});
const props = withDefaults(
defineProps<{
config: {

11
packages/editor/src/fields/EventSelect.vue
View File

@ -33,8 +33,8 @@
</div>
</template>
<script lang="ts" setup name="MEditorEventSelect">
import { computed, defineProps, inject } from 'vue';
<script lang="ts" setup>
import { computed, inject } from 'vue';
import { Delete } from '@element-plus/icons-vue';
import { has } from 'lodash-es';
@ -44,7 +44,9 @@ import { ActionType } from '@tmagic/schema';
import type { EventSelectConfig, Services } from '@editor/type';
const services = inject<Services>('services');
defineOptions({
name: 'MEditorEventSelect',
});
const props = defineProps<{
config: EventSelectConfig;
@ -53,8 +55,11 @@ const props = defineProps<{
name: string;
size: 'small' | 'default' | 'large';
}>();
const emit = defineEmits(['change']);
const services = inject<Services>('services');
// 事件名称下拉框表单配置
const eventNameConfig = computed(() => {
const defaultEventNameConfig = {

4
packages/editor/src/fields/KeyValue.vue
View File

@ -38,6 +38,10 @@ import { Delete, Plus } from '@element-plus/icons-vue';
import { TMagicButton, TMagicInput } from '@tmagic/design';
defineOptions({
name: 'MEditorKeyValue',
});
const props = withDefaults(
defineProps<{
config: {

6
packages/editor/src/fields/UISelect.vue
View File

@ -12,7 +12,7 @@
</div>
</template>
<script lang="ts" setup name="MEditorUISelect">
<script lang="ts" setup>
import { computed, inject, ref } from 'vue';
import { Close, Delete } from '@element-plus/icons-vue';
@ -21,6 +21,10 @@ import { FormState } from '@tmagic/form';
import type { Services } from '@editor/type';
defineOptions({
name: 'MEditorUISelect',
});
const props = defineProps<{
config: any;
model: any;

6
packages/editor/src/icons/AppManageIcon.vue
View File

@ -8,4 +8,8 @@
</svg>
</template>
<script lang="ts" setup name="MEditorAppManageIcon"></script>
<script lang="ts" setup>
defineOptions({
name: 'MEditorAppManageIcon',
});
</script>

6
packages/editor/src/icons/CodeIcon.vue
View File

@ -23,4 +23,8 @@
</svg>
</template>
<script lang="ts" setup name="MEditorCodeIcon"></script>
<script lang="ts" setup>
defineOptions({
name: 'MEditorCodeIcon',
});
</script>

6
packages/editor/src/layouts/AddPageBox.vue
View File

@ -11,7 +11,7 @@
</div>
</template>
<script lang="ts" setup name="MEditorAddPageBox">
<script lang="ts" setup>
import { inject, toRaw } from 'vue';
import { Plus } from '@element-plus/icons-vue';
@ -21,6 +21,10 @@ import MIcon from '@editor/components/Icon.vue';
import type { Services } from '@editor/type';
import { generatePageNameByApp } from '@editor/utils';
defineOptions({
name: 'MEditorAddPageBox',
});
const services = inject<Services>('services');
const clickHandler = () => {

6
packages/editor/src/layouts/CodeEditor.vue
View File

@ -2,12 +2,16 @@
<div ref="codeEditor" class="magic-code-editor"></div>
</template>
<script lang="ts" setup name="MEditorCodeEditor">
<script lang="ts" setup>
import { onMounted, onUnmounted, ref, watch } from 'vue';
import { throttle } from 'lodash-es';
import * as monaco from 'monaco-editor';
import serialize from 'serialize-javascript';
defineOptions({
name: 'MEditorCodeEditor',
});
const props = withDefaults(
defineProps<{
initValues?: string | Object;

6
packages/editor/src/layouts/Framework.vue
View File

@ -42,7 +42,7 @@
</div>
</template>
<script lang="ts" setup name="MEditorFramework">
<script lang="ts" setup>
import { computed, inject, ref, watch } from 'vue';
import { TMagicScrollbar } from '@tmagic/design';
@ -52,6 +52,10 @@ import type { GetColumnWidth, Services } from '@editor/type';
import AddPageBox from './AddPageBox.vue';
defineOptions({
name: 'MEditorFramework',
});
const DEFAULT_LEFT_COLUMN_WIDTH = 310;
const DEFAULT_RIGHT_COLUMN_WIDTH = 480;

6
packages/editor/src/layouts/NavMenu.vue
View File

@ -6,7 +6,7 @@
</div>
</template>
<script lang="ts" setup name="MEditorNavMenu">
<script lang="ts" setup>
import { computed, inject, markRaw } from 'vue';
import { Back, Delete, FullScreen, Grid, Memo, Right, ScaleToOriginal, ZoomIn, ZoomOut } from '@element-plus/icons-vue';
@ -15,6 +15,10 @@ import { NodeType } from '@tmagic/schema';
import ToolButton from '@editor/components/ToolButton.vue';
import { ColumnLayout, MenuBarData, MenuButton, MenuComponent, MenuItem, Services } from '@editor/type';
defineOptions({
name: 'MEditorNavMenu',
});
const props = withDefaults(
defineProps<{
data?: MenuBarData;

6
packages/editor/src/layouts/PropsPanel.vue
View File

@ -13,7 +13,7 @@
</div>
</template>
<script lang="ts" setup name="MEditorPropsPanel">
<script lang="ts" setup>
import { computed, getCurrentInstance, inject, onMounted, onUnmounted, ref, watchEffect } from 'vue';
import { tMagicMessage } from '@tmagic/design';
@ -22,6 +22,10 @@ import { MForm } from '@tmagic/form';
import type { Services } from '@editor/type';
defineOptions({
name: 'MEditorPropsPanel',
});
const emit = defineEmits(['mounted']);
const internalInstance = getCurrentInstance();

6
packages/editor/src/layouts/Resizer.vue
View File

@ -4,10 +4,14 @@
</span>
</template>
<script lang="ts" setup name="MEditorResizer">
<script lang="ts" setup>
import { onMounted, onUnmounted, ref } from 'vue';
import Gesto from 'gesto';
defineOptions({
name: 'MEditorResizer',
});
const emit = defineEmits(['change']);
const target = ref<HTMLSpanElement>();

6
packages/editor/src/layouts/sidebar/ComponentListPanel.vue
View File

@ -31,7 +31,7 @@
</TMagicScrollbar>
</template>
<script lang="ts" setup name="MEditorComponentListPanel">
<script lang="ts" setup>
import { computed, inject, ref } from 'vue';
import { Grid } from '@element-plus/icons-vue';
import serialize from 'serialize-javascript';
@ -43,6 +43,10 @@ import MIcon from '@editor/components/Icon.vue';
import SearchInput from '@editor/components/SearchInput.vue';
import type { ComponentGroup, ComponentItem, Services, StageOptions } from '@editor/type';
defineOptions({
name: 'MEditorComponentListPanel',
});
const searchText = ref('');
const filterTextChangeHandler = (v: string) => {

6
packages/editor/src/layouts/sidebar/LayerMenu.vue
View File

@ -2,7 +2,7 @@
<ContentMenu :menu-data="menuData" ref="menu" style="overflow: initial"></ContentMenu>
</template>
<script lang="ts" setup name="MEditorLayerMenu">
<script lang="ts" setup>
import { computed, inject, markRaw, ref } from 'vue';
import { CopyDocument, Delete, Files, Plus } from '@element-plus/icons-vue';
@ -11,6 +11,10 @@ import { NodeType } from '@tmagic/schema';
import ContentMenu from '@editor/components/ContentMenu.vue';
import type { ComponentGroup, MenuButton, MenuComponent, Services } from '@editor/type';
defineOptions({
name: 'MEditorLayerMenu',
});
const props = defineProps<{
layerContentMenu: (MenuButton | MenuComponent)[];
}>();

6
packages/editor/src/layouts/sidebar/LayerPanel.vue
View File

@ -48,7 +48,7 @@
</TMagicScrollbar>
</template>
<script lang="ts" setup name="MEditorLayerPanel">
<script lang="ts" setup>
import { computed, inject, onMounted, onUnmounted, ref, watch } from 'vue';
import KeyController from 'keycon';
import { difference, throttle, union } from 'lodash-es';
@ -64,6 +64,10 @@ import { Layout } from '@editor/type';
import LayerMenu from './LayerMenu.vue';
defineOptions({
name: 'MEditorLayerPanel',
});
defineProps<{
layerContentMenu: (MenuButton | MenuComponent)[];
}>();

6
packages/editor/src/layouts/sidebar/Sidebar.vue
View File

@ -83,7 +83,7 @@
</component>
</template>
<script lang="ts" setup name="MEditorSidebar">
<script lang="ts" setup>
import { computed, ref, watch } from 'vue';
import { Coin, EditPen, Goods, List } from '@element-plus/icons-vue';
@ -98,6 +98,10 @@ import DataSourceListPanel from './data-source/DataSourceListPanel.vue';
import ComponentListPanel from './ComponentListPanel.vue';
import LayerPanel from './LayerPanel.vue';
defineOptions({
name: 'MEditorSidebar',
});
const props = withDefaults(
defineProps<{
data: SideBarData;

6
packages/editor/src/layouts/sidebar/code-block/CodeBlockEditor.vue
View File

@ -32,7 +32,7 @@
</TMagicDrawer>
</template>
<script lang="ts" setup name="MEditorCodeBlockEditor">
<script lang="ts" setup>
import { computed, inject, reactive, ref, watchEffect } from 'vue';
import { cloneDeep, forIn, isEmpty } from 'lodash-es';
@ -45,6 +45,10 @@ import Layout from '@editor/components/Layout.vue';
import type { ListState, Services } from '@editor/type';
import { serializeConfig } from '@editor/utils/editor';
defineOptions({
name: 'MEditorCodeBlockEditor',
});
const services = inject<Services>('services');
const codeOptions = inject('codeOptions', {});

6
packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue
View File

@ -55,7 +55,7 @@
</TMagicScrollbar>
</template>
<script setup lang="ts" name="MEditorCodeBlockList">
<script setup lang="ts">
import { computed, inject, ref } from 'vue';
import { Close, Edit, View } from '@element-plus/icons-vue';
@ -71,6 +71,10 @@ import { CodeDeleteErrorType, CodeDslItem, Services } from '@editor/type';
import CodeBlockEditor from './CodeBlockEditor.vue';
defineOptions({
name: 'MEditorCodeBlockList',
});
const props = defineProps<{
customError?: (id: Id, errorType: CodeDeleteErrorType) => any;
paramsColConfig?: ColumnConfig;

4
packages/editor/src/layouts/sidebar/data-source/DataSourceConfigPanel.vue
View File

@ -27,6 +27,10 @@ import { MForm } from '@tmagic/form';
import type { Services } from '@editor/type';
defineOptions({
name: 'MEditorDataSourceConfigPanel',
});
const props = defineProps<{
title?: string;
values: any;

4
packages/editor/src/layouts/sidebar/data-source/DataSourceListPanel.vue
View File

@ -61,6 +61,10 @@ import type { Services } from '@editor/type';
import DataSourceConfigPanel from './DataSourceConfigPanel.vue';
defineOptions({
name: 'MEditorDataSourceListPanel',
});
const services = inject<Partial<Services>>('services', {});
const { dataSourceService, depService } = inject<Services>('services') || {};

6
packages/editor/src/layouts/workspace/Breadcrumb.vue
View File

@ -7,7 +7,7 @@
</div>
</template>
<script setup lang="ts" name="MEditorBreadcrumb">
<script setup lang="ts">
import { computed, inject } from 'vue';
import { TMagicButton } from '@tmagic/design';
@ -16,6 +16,10 @@ import { getNodePath } from '@tmagic/utils';
import type { Services } from '@editor/type';
defineOptions({
name: 'MEditorBreadcrumb',
});
const services = inject<Services>('services');
const editorService = services?.editorService;

6
packages/editor/src/layouts/workspace/PageBar.vue
View File

@ -46,7 +46,7 @@
</PageBarScrollContainer>
</template>
<script lang="ts" setup name="MEditorPageBar">
<script lang="ts" setup>
import { computed, inject } from 'vue';
import { CaretBottom, Delete, DocumentCopy } from '@element-plus/icons-vue';
@ -58,6 +58,10 @@ import type { Services } from '@editor/type';
import PageBarScrollContainer from './PageBarScrollContainer.vue';
defineOptions({
name: 'MEditorPageBar',
});
const services = inject<Services>('services');
const editorService = services?.editorService;

6
packages/editor/src/layouts/workspace/PageBarScrollContainer.vue
View File

@ -26,7 +26,7 @@
</div>
</template>
<script setup lang="ts" name="MEditorPageBarScrollContainer">
<script setup lang="ts">
import { computed, inject, nextTick, onMounted, onUnmounted, ref, toRaw, watch } from 'vue';
import { ArrowLeftBold, ArrowRightBold, Plus } from '@element-plus/icons-vue';
@ -36,6 +36,10 @@ import Icon from '@editor/components/Icon.vue';
import type { Services } from '@editor/type';
import { generatePageNameByApp } from '@editor/utils/editor';
defineOptions({
name: 'MEditorPageBarScrollContainer',
});
const services = inject<Services>('services');
const editorService = services?.editorService;
const uiService = services?.uiService;

6
packages/editor/src/layouts/workspace/Stage.vue
View File

@ -26,7 +26,7 @@
</ScrollViewer>
</template>
<script lang="ts" setup name="MEditorStage">
<script lang="ts" setup>
import { computed, inject, markRaw, nextTick, onMounted, onUnmounted, ref, toRaw, watch, watchEffect } from 'vue';
import { cloneDeep } from 'lodash-es';
@ -39,6 +39,10 @@ import { useStage } from '@editor/utils/stage';
import ViewerMenu from './ViewerMenu.vue';
defineOptions({
name: 'MEditorStage',
});
defineProps<{
stageContentMenu: (MenuButton | MenuComponent)[];
}>();

6
packages/editor/src/layouts/workspace/ViewerMenu.vue
View File

@ -2,7 +2,7 @@
<content-menu :menu-data="menuData" ref="menu"></content-menu>
</template>
<script lang="ts" setup name="MEditorViewerMenu">
<script lang="ts" setup>
import { computed, inject, markRaw, ref, watch } from 'vue';
import { Bottom, CopyDocument, Delete, DocumentCopy, Top } from '@element-plus/icons-vue';
@ -14,6 +14,10 @@ import storageService from '@editor/services/storage';
import { LayerOffset, Layout, MenuButton, MenuComponent, Services } from '@editor/type';
import { COPY_STORAGE_KEY } from '@editor/utils/editor';
defineOptions({
name: 'MEditorViewerMenu',
});
const props = withDefaults(
defineProps<{ isMultiSelect?: boolean; stageContentMenu: (MenuButton | MenuComponent)[] }>(),
{ isMultiSelect: false },

6
packages/editor/src/layouts/workspace/Workspace.vue
View File

@ -15,7 +15,7 @@
</div>
</template>
<script lang="ts" setup name="MEditorWorkspace">
<script lang="ts" setup>
import { computed, inject, onMounted, onUnmounted, ref } from 'vue';
import KeyController from 'keycon';
@ -27,6 +27,10 @@ import Breadcrumb from './Breadcrumb.vue';
import PageBar from './PageBar.vue';
import MagicStage from './Stage.vue';
defineOptions({
name: 'MEditorWorkspace',
});
defineProps<{
stageContentMenu: (MenuButton | MenuComponent)[];
}>();

3
packages/editor/vite.config.ts
View File

@ -19,13 +19,12 @@
import path from 'path';
import { defineConfig } from 'vite';
import VueSetupExtend from 'vite-plugin-vue-setup-extend';
import vue from '@vitejs/plugin-vue';
import pkg from './package.json';
export default defineConfig({
plugins: [vue(), VueSetupExtend()],
plugins: [vue()],
resolve: {
alias:

6
packages/element-plus-adapter/package.json
View File

@ -36,12 +36,14 @@
"typescript"
],
"dependencies": {
"@tmagic/design": "^1.2.15",
"element-plus": "^2.2.32",
"vue": "^3.2.37"
"vue": "^3.3.4"
},
"peerDependencies": {
"@tmagic/design": "^1.2.15",
"element-plus": "^2.2.32",
"vue": "^3.2.37"
"vue": "^3.3.4"
},
"devDependencies": {
"@types/node": "^15.12.4",

134
packages/element-plus-adapter/src/index.ts
View File

@ -48,233 +48,277 @@ import {
ElUpload,
} from 'element-plus';
import type {
AutocompleteProps,
BadgeProps,
ButtonProps,
CardProps,
CascaderProps,
CheckboxGroupProps,
CheckboxProps,
CollapseItemProps,
CollapseProps,
ColorPickerProps,
ColProps,
DatePickerProps,
DialogProps,
DividerProps,
DrawerProps,
DropdownItemProps,
DropdownProps,
FormItemProps,
FormProps,
InputNumberProps,
InputProps,
OptionGroupProps,
OptionProps,
PaginationProps,
PopoverProps,
RadioButtonProps,
RadioGroupProps,
RadioProps,
SelectProps,
StepProps,
StepsProps,
SwitchProps,
TableColumnProps,
TableProps,
TabPaneProps,
TabsProps,
TagProps,
TimePickerProps,
TooltipProps,
TreeProps,
UploadProps,
} from '@tmagic/design';
const adapter: any = {
message: ElMessage,
messageBox: ElMessageBox,
components: {
autocomplete: {
component: ElAutocomplete,
props: (props: any) => props,
props: (props: AutocompleteProps) => props,
},
badge: {
component: ElBadge,
props: (props: any) => props,
props: (props: BadgeProps) => props,
},
button: {
component: ElButton,
props: (props: any) => props,
props: (props: ButtonProps) => props,
},
card: {
component: ElCard,
props: (props: any) => props,
props: (props: CardProps) => props,
},
cascader: {
component: ElCascader,
props: (props: any) => props,
props: (props: CascaderProps) => props,
},
checkbox: {
component: ElCheckbox,
props: (props: any) => props,
props: (props: CheckboxProps) => props,
},
checkboxGroup: {
component: ElCheckboxGroup,
props: (props: any) => props,
props: (props: CheckboxGroupProps) => props,
},
col: {
component: ElCol,
props: (props: any) => props,
props: (props: ColProps) => props,
},
collapse: {
component: ElCollapse,
props: (props: any) => props,
props: (props: CollapseProps) => props,
},
collapseItem: {
component: ElCollapseItem,
props: (props: any) => props,
props: (props: CollapseItemProps) => props,
},
colorPicker: {
component: ElColorPicker,
props: (props: any) => props,
props: (props: ColorPickerProps) => props,
},
datePicker: {
component: ElDatePicker,
props: (props: any) => props,
props: (props: DatePickerProps) => props,
},
dialog: {
component: ElDialog,
props: (props: any) => props,
props: (props: DialogProps) => props,
},
divider: {
component: ElDivider,
props: (props: any) => props,
props: (props: DividerProps) => props,
},
drawer: {
component: ElDrawer,
props: (props: any) => props,
props: (props: DrawerProps) => props,
},
dropdown: {
component: ElDropdown,
props: (props: any) => props,
props: (props: DropdownProps) => props,
},
dropdownItem: {
component: ElDropdownItem,
props: (props: any) => props,
props: (props: DropdownItemProps) => props,
},
dropdownMenu: {
component: ElDropdownMenu,
props: (props: any) => props,
props: () => ({}),
},
form: {
component: ElForm,
props: (props: any) => props,
props: (props: FormProps) => props,
},
formItem: {
component: ElFormItem,
props: (props: any) => props,
props: (props: FormItemProps) => props,
},
icon: {
component: ElIcon,
props: (props: any) => props,
props: () => ({}),
},
input: {
component: ElInput,
props: (props: any) => props,
props: (props: InputProps) => props,
},
inputNumber: {
component: ElInputNumber,
props: (props: any) => props,
props: (props: InputNumberProps) => props,
},
option: {
component: ElOption,
props: (props: any) => props,
props: (props: OptionProps) => props,
},
optionGroup: {
component: ElOptionGroup,
props: (props: any) => props,
props: (props: OptionGroupProps) => props,
},
pagination: {
component: ElPagination,
props: (props: any) => props,
props: (props: PaginationProps) => props,
},
popover: {
component: ElPopover,
props: (props: any) => props,
props: (props: PopoverProps) => props,
},
radio: {
component: ElRadio,
props: (props: any) => props,
props: (props: RadioProps) => props,
},
radioButton: {
component: ElRadioButton,
props: (props: any) => props,
props: (props: RadioButtonProps) => props,
},
radioGroup: {
component: ElRadioGroup,
props: (props: any) => props,
props: (props: RadioGroupProps) => props,
},
row: {
component: ElRow,
props: (props: any) => props,
props: () => ({}),
},
scrollbar: {
component: ElScrollbar,
props: (props: any) => props,
props: () => ({}),
},
select: {
component: ElSelect,
props: (props: any) => props,
props: (props: SelectProps) => props,
},
step: {
component: ElStep,
props: (props: any) => props,
props: (props: StepProps) => props,
},
steps: {
component: ElSteps,
props: (props: any) => props,
props: (props: StepsProps) => props,
},
switch: {
component: ElSwitch,
props: (props: any) => props,
props: (props: SwitchProps) => props,
},
table: {
component: ElTable,
props: (props: any) => props,
props: (props: TableProps) => props,
},
tableColumn: {
component: ElTableColumn,
props: (props: any) => props,
props: (props: TableColumnProps) => props,
},
tabPane: {
component: ElTabPane,
props: (props: any) => props,
props: (props: TabPaneProps) => props,
},
tabs: {
component: ElTabs,
props: (props: any) => props,
props: (props: TabsProps) => props,
},
tag: {
component: ElTag,
props: (props: any) => props,
props: (props: TagProps) => props,
},
timePicker: {
component: ElTimePicker,
props: (props: any) => props,
props: (props: TimePickerProps) => props,
},
tooltip: {
component: ElTooltip,
props: (props: any) => props,
props: (props: TooltipProps) => props,
},
tree: {
component: ElTree,
props: (props: any) => props,
props: (props: TreeProps) => props,
},
upload: {
component: ElUpload,
props: (props: any) => props,
props: (props: UploadProps) => props,
},
},
};

13
packages/form/package.json
View File

@ -40,24 +40,23 @@
"@tmagic/utils": "1.2.15",
"lodash-es": "^4.17.21",
"sortablejs": "^1.14.0",
"vue": "^3.2.37"
"vue": "^3.3.4"
},
"peerDependencies": {
"vue": "^3.2.37"
"vue": "^3.3.4"
},
"devDependencies": {
"@babel/core": "^7.18.0",
"@types/lodash-es": "^4.17.4",
"@types/node": "^15.12.4",
"@types/sortablejs": "^1.10.7",
"@vitejs/plugin-vue": "^4.1.0",
"@vue/compiler-sfc": "^3.2.37",
"@vue/test-utils": "^2.0.0",
"@vitejs/plugin-vue": "^4.2.3",
"@vue/compiler-sfc": "^3.3.4",
"@vue/test-utils": "^2.3.2",
"rimraf": "^3.0.2",
"sass": "^1.35.1",
"typescript": "^5.0.4",
"vite": "^4.3.8",
"vite-plugin-vue-setup-extend": "^0.4.0",
"vue-tsc": "^1.2.0"
"vue-tsc": "^1.6.5"
}
}

6
packages/form/src/Form.vue
View File

@ -26,7 +26,7 @@
</TMagicForm>
</template>
<script setup lang="ts" name="MForm">
<script setup lang="ts">
import { provide, reactive, ref, toRaw, watch, watchEffect } from 'vue';
import { isEqual } from 'lodash-es';
import cloneDeep from 'lodash-es/cloneDeep';
@ -38,6 +38,10 @@ import { getConfig } from './utils/config';
import { initValue } from './utils/form';
import type { FormConfig, FormState, FormValue, ValidateError } from './schema';
defineOptions({
name: 'MForm',
});
const props = withDefaults(
defineProps<{
/** 表单配置 */

Some files were not shown because too many files have changed in this diff Show More