JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-04-06 03:57:56 +08:00
Code Issues Projects Releases Wiki Activity

refactor: 将data-source,dep,schema,utils收敛到core，将form,table,stage,design,util收敛到editor

Browse Source
This commit is contained in:
roymondchen 2024-09-04 17:25:33 +08:00 committed by roymondchen
parent c3bc1035ad
commit 34fc0a15b9
212 changed files with 634 additions and 778 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/core/package.json
View File

@ -11,9 +11,9 @@
"import": "./dist/tmagic-core.js", "import": "./dist/tmagic-core.js",
"require": "./dist/tmagic-core.umd.cjs" "require": "./dist/tmagic-core.umd.cjs"
}, },
"./dist/style.css": { "./resetcss.css": {
"import": "./dist/style.css", "import": "./resetcss.css",
"require": "./dist/style.css" "require": "./resetcss.css"
}, },
"./*": "./*" "./*": "./*"
}, },
@ -37,6 +37,10 @@
"vue" "vue"
], ],
"dependencies": { "dependencies": {
"@tmagic/data-source": "workspace:*",
"@tmagic/dep": "workspace:*",
"@tmagic/schema": "workspace:*",
"@tmagic/utils": "workspace:*",
"events": "^3.3.0", "events": "^3.3.0",
"lodash-es": "^4.17.21" "lodash-es": "^4.17.21"
}, },
@ -48,9 +52,6 @@
"vite": "^5.3.5" "vite": "^5.3.5"
}, },
"peerDependencies": { "peerDependencies": {
"@tmagic/data-source": "workspace:*",
"@tmagic/schema": "workspace:*",
"@tmagic/utils": "workspace:*",
"typescript": "*" "typescript": "*"
}, },
"peerDependenciesMeta": { "peerDependenciesMeta": {

0
packages/utils/src/resetcss.css → packages/core/resetcss.css
View File

5
packages/core/src/index.ts
View File

@ -18,6 +18,11 @@
import App from './App'; import App from './App';
export * from '@tmagic/data-source';
export * from '@tmagic/dep';
export * from '@tmagic/schema';
export * from '@tmagic/utils';
export { default as EventHelper } from './EventHelper'; export { default as EventHelper } from './EventHelper';
export * from './utils'; export * from './utils';

3
packages/core/src/utils.ts
View File

@ -16,6 +16,7 @@
* limitations under the License. * limitations under the License.
*/ */
import { JsEngine } from '@tmagic/schema'; import { JsEngine } from '@tmagic/schema';
import { isNumber } from '@tmagic/utils';
import type { default as TMagicNode } from './Node'; import type { default as TMagicNode } from './Node';
@ -57,8 +58,6 @@ export const fillBackgroundImage = (value: string) => {
return value; return value;
}; };
export const isNumber = (value: string) => /^(-?\d+)(\.\d+)?$/.test(value);
export const getTransform = (value: Record<string, string>, jsEngine: JsEngine) => { export const getTransform = (value: Record<string, string>, jsEngine: JsEngine) => {
if (!value) return []; if (!value) return [];

3
packages/data-source/package.json
View File

@ -33,15 +33,12 @@
"data-source" "data-source"
], ],
"dependencies": { "dependencies": {
"@tmagic/dep": "workspace:*",
"deep-state-observer": "^5.5.13", "deep-state-observer": "^5.5.13",
"events": "^3.3.0", "events": "^3.3.0",
"lodash-es": "^4.17.21" "lodash-es": "^4.17.21"
}, },
"peerDependencies": { "peerDependencies": {
"@tmagic/core": "workspace:*", "@tmagic/core": "workspace:*",
"@tmagic/schema": "workspace:*",
"@tmagic/utils": "workspace:*",
"typescript": "*" "typescript": "*"
}, },
"peerDependenciesMeta": { "peerDependenciesMeta": {

5
packages/data-source/src/DataSourceManager.ts
View File

@ -20,9 +20,8 @@ import EventEmitter from 'events';
import { cloneDeep } from 'lodash-es'; import { cloneDeep } from 'lodash-es';
import type { default as TMagicApp } from '@tmagic/core'; import type { DataSourceSchema, default as TMagicApp, DisplayCond, Id, MNode, NODE_CONDS_KEY } from '@tmagic/core';
import type { DataSourceSchema, DisplayCond, Id, MNode, NODE_CONDS_KEY } from '@tmagic/schema'; import { compiledNode } from '@tmagic/core';
import { compiledNode } from '@tmagic/utils';
import { SimpleObservedData } from './observed-data/SimpleObservedData'; import { SimpleObservedData } from './observed-data/SimpleObservedData';
import { DataSource, HttpDataSource } from './data-sources'; import { DataSource, HttpDataSource } from './data-sources';

2
packages/data-source/src/createDataSourceManager.ts
View File

@ -18,7 +18,7 @@
import { union } from 'lodash-es'; import { union } from 'lodash-es';
import type { default as TMagicApp } from '@tmagic/core'; import type { default as TMagicApp } from '@tmagic/core';
import { getDepNodeIds, getNodes, isPage } from '@tmagic/utils'; import { getDepNodeIds, getNodes, isPage } from '@tmagic/core';
import DataSourceManager from './DataSourceManager'; import DataSourceManager from './DataSourceManager';
import type { ChangeEvent, DataSourceManagerData } from './types'; import type { ChangeEvent, DataSourceManagerData } from './types';

5
packages/data-source/src/data-sources/Base.ts
View File

@ -19,9 +19,8 @@ import EventEmitter from 'events';
import { cloneDeep } from 'lodash-es'; import { cloneDeep } from 'lodash-es';
import type { default as TMagicApp } from '@tmagic/core'; import type { CodeBlockContent, DataSchema, DataSourceSchema, default as TMagicApp } from '@tmagic/core';
import type { CodeBlockContent, DataSchema, DataSourceSchema } from '@tmagic/schema'; import { getDefaultValueFromFields } from '@tmagic/core';
import { getDefaultValueFromFields } from '@tmagic/utils';
import { ObservedData } from '@data-source/observed-data/ObservedData'; import { ObservedData } from '@data-source/observed-data/ObservedData';
import { SimpleObservedData } from '@data-source/observed-data/SimpleObservedData'; import { SimpleObservedData } from '@data-source/observed-data/SimpleObservedData';

4
packages/data-source/src/data-sources/Http.ts
View File

@ -15,8 +15,8 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
import { HttpOptions, RequestFunction } from '@tmagic/schema'; import type { HttpOptions, RequestFunction } from '@tmagic/core';
import { getValueByKeyPath } from '@tmagic/utils'; import { getValueByKeyPath } from '@tmagic/core';
import { DataSourceOptions, HttpDataSourceSchema } from '@data-source/types'; import { DataSourceOptions, HttpDataSourceSchema } from '@data-source/types';

5
packages/data-source/src/depsCache.ts
View File

@ -1,6 +1,5 @@
import { isDataSourceCondTarget, isDataSourceTarget, Target, Watcher } from '@tmagic/dep'; import type { DataSourceSchema, MNode } from '@tmagic/core';
import type { DataSourceSchema, MNode } from '@tmagic/schema'; import { DSL_NODE_KEY_COPY_PREFIX, isDataSourceCondTarget, isDataSourceTarget, Target, Watcher } from '@tmagic/core';
import { DSL_NODE_KEY_COPY_PREFIX } from '@tmagic/utils';
const cache = new Map(); const cache = new Map();

1
packages/data-source/src/index.ts
View File

@ -15,7 +15,6 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
export { default as DataSourceManager } from './DataSourceManager'; export { default as DataSourceManager } from './DataSourceManager';
export * from './data-sources'; export * from './data-sources';
export * from './createDataSourceManager'; export * from './createDataSourceManager';

2
packages/data-source/src/observed-data/SimpleObservedData.ts
View File

@ -1,6 +1,6 @@
import { EventEmitter } from 'events'; import { EventEmitter } from 'events';
import { getValueByKeyPath, setValueByKeyPath } from '@tmagic/utils'; import { getValueByKeyPath, setValueByKeyPath } from '@tmagic/core';
import { ObservedData } from './ObservedData'; import { ObservedData } from './ObservedData';

3
packages/data-source/src/types.ts
View File

@ -1,5 +1,4 @@
import type { default as TMagicApp } from '@tmagic/core'; import type { DataSourceSchema, default as TMagicApp, HttpOptions, RequestFunction } from '@tmagic/core';
import type { DataSourceSchema, HttpOptions, RequestFunction } from '@tmagic/schema';
import type DataSource from './data-sources/Base'; import type DataSource from './data-sources/Base';
import type HttpDataSource from './data-sources/Http'; import type HttpDataSource from './data-sources/Http';

6
packages/data-source/src/utils.ts
View File

@ -1,7 +1,6 @@
import { cloneDeep } from 'lodash-es'; import { cloneDeep } from 'lodash-es';
import type { DepData, DisplayCond, DisplayCondItem, MApp, MNode, MPage, MPageFragment } from '@tmagic/schema'; import type { DepData, DisplayCond, DisplayCondItem, MApp, MNode, MPage, MPageFragment } from '@tmagic/core';
import { NODE_CONDS_KEY } from '@tmagic/schema';
import { import {
compiledCond, compiledCond,
compiledNode, compiledNode,
@ -10,8 +9,9 @@ import {
getValueByKeyPath, getValueByKeyPath,
isPage, isPage,
isPageFragment, isPageFragment,
NODE_CONDS_KEY,
replaceChildNode, replaceChildNode,
} from '@tmagic/utils'; } from '@tmagic/core';
import type { AsyncDataSourceResolveResult, DataSourceManagerData } from './types'; import type { AsyncDataSourceResolveResult, DataSourceManagerData } from './types';

5
packages/data-source/tests/DataSourceMenager.spec.ts
View File

@ -1,11 +1,10 @@
import { describe, expect, test } from 'vitest'; import { describe, expect, test } from 'vitest';
import App from '@tmagic/core'; import TMagicApp, { NodeType } from '@tmagic/core';
import { NodeType } from '@tmagic/schema';
import { DataSource, DataSourceManager } from '@data-source/index'; import { DataSource, DataSourceManager } from '@data-source/index';
const app = new App({ const app = new TMagicApp({
config: { config: {
type: NodeType.ROOT, type: NodeType.ROOT,
id: '1', id: '1',

13
packages/data-source/tests/createDataSourceManager.spec.ts
View File

@ -1,17 +1,9 @@
import { describe, expect, test } from 'vitest'; import { describe, expect, test } from 'vitest';
import { MApp, NodeType } from '@tmagic/schema'; import TMagicApp, { type MApp, NodeType } from '@tmagic/core';
import { createDataSourceManager, DataSourceManager } from '@data-source/index'; import { createDataSourceManager, DataSourceManager } from '@data-source/index';
class Core {
public dsl?: MApp;
constructor(options: any) {
this.dsl = options.config;
}
}
const dsl: MApp = { const dsl: MApp = {
type: NodeType.ROOT, type: NodeType.ROOT,
id: 'app_1', id: 'app_1',
@ -46,13 +38,14 @@ const dsl: MApp = {
}, },
], ],
methods: [], methods: [],
events: [],
}, },
], ],
}; };
describe('createDataSourceManager', () => { describe('createDataSourceManager', () => {
test('instance', () => { test('instance', () => {
const manager = createDataSourceManager(new Core({ config: dsl })); const manager = createDataSourceManager(new TMagicApp({ config: dsl }));
expect(manager).toBeInstanceOf(DataSourceManager); expect(manager).toBeInstanceOf(DataSourceManager);
}); });
}); });

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

@ -29,7 +29,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, ref, watchEffect } from 'vue'; import { computed, ref, watchEffect } from 'vue';
import { getConfig } from './config'; import { getDesignConfig } from './config';
import type { AutocompleteProps } from './types'; import type { AutocompleteProps } from './types';
defineOptions({ defineOptions({
@ -38,7 +38,7 @@ defineOptions({
const props = defineProps<AutocompleteProps>(); const props = defineProps<AutocompleteProps>();
const ui = getConfig('components')?.autocomplete; const ui = getDesignConfig('components')?.autocomplete;
const uiComponent = ui?.component || 'el-autocomplete'; const uiComponent = ui?.component || 'el-autocomplete';

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

@ -7,7 +7,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue'; import { computed } from 'vue';
import { getConfig } from './config'; import { getDesignConfig } from './config';
import type { BadgeProps } from './types'; import type { BadgeProps } from './types';
defineOptions({ defineOptions({
@ -16,7 +16,7 @@ defineOptions({
const props = defineProps<BadgeProps>(); const props = defineProps<BadgeProps>();
const ui = getConfig('components')?.badge; const ui = getDesignConfig('components')?.badge;
const uiComponent = ui?.component || 'el-badge'; const uiComponent = ui?.component || 'el-badge';
const uiProps = computed(() => ui?.props(props) || props); const uiProps = computed(() => ui?.props(props) || props);

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

@ -9,7 +9,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue'; import { computed } from 'vue';
import { getConfig } from './config'; import { getDesignConfig } from './config';
import type { ButtonProps } from './types'; import type { ButtonProps } from './types';
defineOptions({ defineOptions({
@ -18,7 +18,7 @@ defineOptions({
const props = defineProps<ButtonProps>(); const props = defineProps<ButtonProps>();
const ui = getConfig('components')?.button; const ui = getDesignConfig('components')?.button;
const uiComponent = ui?.component || 'el-button'; const uiComponent = ui?.component || 'el-button';

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

@ -13,7 +13,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue'; import { computed } from 'vue';
import { getConfig } from './config'; import { getDesignConfig } from './config';
import type { CardProps } from './types'; import type { CardProps } from './types';
defineOptions({ defineOptions({
@ -22,7 +22,7 @@ defineOptions({
const props = defineProps<CardProps>(); const props = defineProps<CardProps>();
const ui = getConfig('components')?.card; const ui = getDesignConfig('components')?.card;
const uiComponent = ui?.component || 'el-card'; const uiComponent = ui?.component || 'el-card';

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

@ -12,7 +12,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, ref } from 'vue'; import { computed, ref } from 'vue';
import { getConfig } from './config'; import { getDesignConfig } from './config';
import { CascaderProps } from './types'; import { CascaderProps } from './types';
defineOptions({ defineOptions({
@ -21,7 +21,7 @@ defineOptions({
const props = defineProps<CascaderProps>(); const props = defineProps<CascaderProps>();
const ui = getConfig('components')?.cascader; const ui = getDesignConfig('components')?.cascader;
const uiComponent = ui?.component || 'el-cascader'; const uiComponent = ui?.component || 'el-cascader';

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

@ -15,7 +15,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue'; import { computed } from 'vue';
import { getConfig } from './config'; import { getDesignConfig } from './config';
import type { CheckboxProps } from './types'; import type { CheckboxProps } from './types';
defineOptions({ defineOptions({
@ -27,7 +27,7 @@ const props = withDefaults(defineProps<CheckboxProps>(), {
falseValue: undefined, falseValue: undefined,
}); });
const ui = getConfig('components')?.checkbox; const ui = getDesignConfig('components')?.checkbox;
const uiComponent = ui?.component || 'el-checkbox'; const uiComponent = ui?.component || 'el-checkbox';

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

@ -13,7 +13,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue'; import { computed } from 'vue';
import { getConfig } from './config'; import { getDesignConfig } from './config';
import type { CheckboxGroupProps } from './types'; import type { CheckboxGroupProps } from './types';
defineOptions({ defineOptions({
@ -22,7 +22,7 @@ defineOptions({
const props = defineProps<CheckboxGroupProps>(); const props = defineProps<CheckboxGroupProps>();
const ui = getConfig('components')?.checkboxGroup; const ui = getDesignConfig('components')?.checkboxGroup;
const uiComponent = ui?.component || 'el-checkbox-group'; const uiComponent = ui?.component || 'el-checkbox-group';

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

@ -7,7 +7,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue'; import { computed } from 'vue';
import { getConfig } from './config'; import { getDesignConfig } from './config';
import type { ColProps } from './types'; import type { ColProps } from './types';
defineOptions({ defineOptions({
@ -16,7 +16,7 @@ defineOptions({
const props = defineProps<ColProps>(); const props = defineProps<ColProps>();
const ui = getConfig('components')?.col; const ui = getDesignConfig('components')?.col;
const uiComponent = ui?.component || 'el-col'; const uiComponent = ui?.component || 'el-col';

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

@ -13,7 +13,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue'; import { computed } from 'vue';
import { getConfig } from './config'; import { getDesignConfig } from './config';
import type { CollapseProps } from './types'; import type { CollapseProps } from './types';
defineOptions({ defineOptions({
@ -22,7 +22,7 @@ defineOptions({
const props = defineProps<CollapseProps>(); const props = defineProps<CollapseProps>();
const ui = getConfig('components')?.collapse; const ui = getDesignConfig('components')?.collapse;
const uiComponent = ui?.component || 'el-collapse'; const uiComponent = ui?.component || 'el-collapse';

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

@ -19,7 +19,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue'; import { computed } from 'vue';
import { getConfig } from './config'; import { getDesignConfig } from './config';
import type { CollapseItemProps } from './types'; import type { CollapseItemProps } from './types';
defineOptions({ defineOptions({
@ -28,7 +28,7 @@ defineOptions({
const props = defineProps<CollapseItemProps>(); const props = defineProps<CollapseItemProps>();
const ui = getConfig('components')?.collapseItem; const ui = getDesignConfig('components')?.collapseItem;
const uiComponent = ui?.component || 'el-collapse-item'; const uiComponent = ui?.component || 'el-collapse-item';

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

@ -12,7 +12,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue'; import { computed } from 'vue';
import { getConfig } from './config'; import { getDesignConfig } from './config';
import type { ColorPickerProps } from './types'; import type { ColorPickerProps } from './types';
defineOptions({ defineOptions({
@ -24,7 +24,7 @@ const props = withDefaults(defineProps<ColorPickerProps>(), {
disabled: false, disabled: false,
}); });
const ui = getConfig('components')?.colorPicker; const ui = getDesignConfig('components')?.colorPicker;
const uiComponent = ui?.component || 'el-color-picker'; const uiComponent = ui?.component || 'el-color-picker';

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

@ -12,7 +12,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue'; import { computed } from 'vue';
import { getConfig } from './config'; import { getDesignConfig } from './config';
import type { DatePickerProps } from './types'; import type { DatePickerProps } from './types';
defineOptions({ defineOptions({
@ -23,7 +23,7 @@ const props = withDefaults(defineProps<DatePickerProps>(), {
type: 'date', type: 'date',
}); });
const ui = getConfig('components')?.datePicker; const ui = getDesignConfig('components')?.datePicker;
const uiComponent = ui?.component || 'el-date-picker'; const uiComponent = ui?.component || 'el-date-picker';

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

@ -17,7 +17,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue'; import { computed } from 'vue';
import { getConfig } from './config'; import { getDesignConfig } from './config';
import type { DialogProps } from './types'; import type { DialogProps } from './types';
defineOptions({ defineOptions({
@ -28,7 +28,7 @@ const props = defineProps<DialogProps>();
const emit = defineEmits(['close', 'update:modelValue']); const emit = defineEmits(['close', 'update:modelValue']);
const ui = getConfig('components')?.dialog; const ui = getDesignConfig('components')?.dialog;
const uiComponent = ui?.component || 'el-dialog'; const uiComponent = ui?.component || 'el-dialog';

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

@ -7,7 +7,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue'; import { computed } from 'vue';
import { getConfig } from './config'; import { getDesignConfig } from './config';
import type { DividerProps } from './types'; import type { DividerProps } from './types';
defineOptions({ defineOptions({
@ -16,7 +16,7 @@ defineOptions({
const props = defineProps<DividerProps>(); const props = defineProps<DividerProps>();
const ui = getConfig('components')?.divider; const ui = getDesignConfig('components')?.divider;
const uiComponent = ui?.component || 'el-divider'; const uiComponent = ui?.component || 'el-divider';

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

@ -25,7 +25,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, ref } from 'vue'; import { computed, ref } from 'vue';
import { getConfig } from './config'; import { getDesignConfig } from './config';
import type { DrawerProps } from './types'; import type { DrawerProps } from './types';
defineOptions({ defineOptions({
@ -36,7 +36,7 @@ const props = defineProps<DrawerProps>();
const emit = defineEmits(['open', 'opened', 'close', 'closed', 'update:modelValue']); const emit = defineEmits(['open', 'opened', 'close', 'closed', 'update:modelValue']);
const ui = getConfig('components')?.drawer; const ui = getDesignConfig('components')?.drawer;
const uiComponent = ui?.component || 'el-drawer'; const uiComponent = ui?.component || 'el-drawer';

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

@ -11,7 +11,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue'; import { computed } from 'vue';
import { getConfig } from './config'; import { getDesignConfig } from './config';
import type { DropdownProps } from './types'; import type { DropdownProps } from './types';
defineOptions({ defineOptions({
@ -20,7 +20,7 @@ defineOptions({
const props = defineProps<DropdownProps>(); const props = defineProps<DropdownProps>();
const ui = getConfig('components')?.dropdown; const ui = getDesignConfig('components')?.dropdown;
const uiComponent = ui?.component || 'el-dropdown'; const uiComponent = ui?.component || 'el-dropdown';

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

@ -7,7 +7,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue'; import { computed } from 'vue';
import { getConfig } from './config'; import { getDesignConfig } from './config';
import type { DropdownItemProps } from './types'; import type { DropdownItemProps } from './types';
defineOptions({ defineOptions({
@ -16,7 +16,7 @@ defineOptions({
const props = defineProps<DropdownItemProps>(); const props = defineProps<DropdownItemProps>();
const ui = getConfig('components')?.dropdownItem; const ui = getDesignConfig('components')?.dropdownItem;
const uiComponent = ui?.component || 'el-dropdown-item'; const uiComponent = ui?.component || 'el-dropdown-item';

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

@ -5,13 +5,13 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { getConfig } from './config'; import { getDesignConfig } from './config';
defineOptions({ defineOptions({
name: 'TMDropdownMenu', name: 'TMDropdownMenu',
}); });
const ui = getConfig('components')?.dropdownMenu; const ui = getDesignConfig('components')?.dropdownMenu;
const uiComponent = ui?.component || 'el-dropdown-menu'; const uiComponent = ui?.component || 'el-dropdown-menu';
</script> </script>

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

@ -13,7 +13,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, ref } from 'vue'; import { computed, ref } from 'vue';
import { getConfig } from './config'; import { getDesignConfig } from './config';
import type { FormProps } from './types'; import type { FormProps } from './types';
defineOptions({ defineOptions({
@ -22,7 +22,7 @@ defineOptions({
const props = defineProps<FormProps>(); const props = defineProps<FormProps>();
const ui = getConfig('components')?.form; const ui = getDesignConfig('components')?.form;
const uiComponent = ui?.component || 'el-form'; const uiComponent = ui?.component || 'el-form';

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

@ -10,7 +10,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue'; import { computed } from 'vue';
import { getConfig } from './config'; import { getDesignConfig } from './config';
import type { FormItemProps } from './types'; import type { FormItemProps } from './types';
defineOptions({ defineOptions({
@ -19,7 +19,7 @@ defineOptions({
const props = defineProps<FormItemProps>(); const props = defineProps<FormItemProps>();
const ui = getConfig('components')?.formItem; const ui = getDesignConfig('components')?.formItem;
const uiComponent = ui?.component || 'el-form-item'; const uiComponent = ui?.component || 'el-form-item';

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

@ -5,14 +5,14 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { getConfig } from './config'; import { getDesignConfig } from './config';
import { IconProps } from './types'; import { IconProps } from './types';
defineOptions({ defineOptions({
name: 'TMIcon', name: 'TMIcon',
}); });
const ui = getConfig('components')?.icon; const ui = getDesignConfig('components')?.icon;
const uiComponent = ui?.component || 'el-icon'; const uiComponent = ui?.component || 'el-icon';
defineProps<IconProps>(); defineProps<IconProps>();
</script> </script>

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

@ -26,7 +26,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, ref } from 'vue'; import { computed, ref } from 'vue';
import { getConfig } from './config'; import { getDesignConfig } from './config';
import type { InputProps } from './types'; import type { InputProps } from './types';
defineOptions({ defineOptions({
@ -35,7 +35,7 @@ defineOptions({
const props = defineProps<InputProps>(); const props = defineProps<InputProps>();
const ui = getConfig('components')?.input; const ui = getDesignConfig('components')?.input;
const uiComponent = ui?.component || 'el-input'; const uiComponent = ui?.component || 'el-input';

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

@ -12,7 +12,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue'; import { computed } from 'vue';
import { getConfig } from './config'; import { getDesignConfig } from './config';
import type { InputNumberProps } from './types'; import type { InputNumberProps } from './types';
defineOptions({ defineOptions({
@ -21,7 +21,7 @@ defineOptions({
const props = defineProps<InputNumberProps>(); const props = defineProps<InputNumberProps>();
const ui = getConfig('components')?.inputNumber; const ui = getDesignConfig('components')?.inputNumber;
const uiComponent = ui?.component || 'el-input-number'; const uiComponent = ui?.component || 'el-input-number';

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

@ -7,7 +7,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue'; import { computed } from 'vue';
import { getConfig } from './config'; import { getDesignConfig } from './config';
import type { OptionProps } from './types'; import type { OptionProps } from './types';
defineOptions({ defineOptions({
@ -16,7 +16,7 @@ defineOptions({
const props = defineProps<OptionProps>(); const props = defineProps<OptionProps>();
const ui = getConfig('components')?.option; const ui = getDesignConfig('components')?.option;
const uiComponent = ui?.component || 'el-option'; const uiComponent = ui?.component || 'el-option';

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

@ -7,7 +7,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, ref } from 'vue'; import { computed, ref } from 'vue';
import { getConfig } from './config'; import { getDesignConfig } from './config';
import type { OptionGroupProps } from './types'; import type { OptionGroupProps } from './types';
defineOptions({ defineOptions({
@ -16,7 +16,7 @@ defineOptions({
const props = defineProps<OptionGroupProps>(); const props = defineProps<OptionGroupProps>();
const ui = getConfig('components')?.optionGroup; const ui = getDesignConfig('components')?.optionGroup;
const uiComponent = ui?.component || 'el-option-group'; const uiComponent = ui?.component || 'el-option-group';

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

@ -12,7 +12,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue'; import { computed } from 'vue';
import { getConfig } from './config'; import { getDesignConfig } from './config';
import type { PaginationProps } from './types'; import type { PaginationProps } from './types';
defineOptions({ defineOptions({
@ -23,7 +23,7 @@ const props = defineProps<PaginationProps>();
const emit = defineEmits(['size-change', 'current-change']); const emit = defineEmits(['size-change', 'current-change']);
const ui = getConfig('components')?.pagination; const ui = getDesignConfig('components')?.pagination;
const uiComponent = ui?.component || 'el-pagination'; const uiComponent = ui?.component || 'el-pagination';

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

@ -190,57 +190,3 @@ onBeforeUnmount(() => {
destroy(); destroy();
}); });
</script> </script>
<style lang="scss">
.tmagic-design-popper {
min-width: 150px;
line-height: 1.4;
background-color: #fff;
box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
color: #606266;
border: 1px solid #e4e7ed;
border-radius: 4px;
font-size: 14px;
overflow-wrap: break-word;
box-sizing: border-box;
padding: 10px;
&:focus {
outline: none;
}
}
.tmagic-design-popper[data-popper-placement^='top'] > .tmagic-design-popper-arrow {
bottom: -4px;
}
.tmagic-design-popper[data-popper-placement^='bottom'] > .tmagic-design-popper-arrow {
top: -4px;
}
.tmagic-design-popper[data-popper-placement^='left'] > .tmagic-design-popper-arrow {
right: -4px;
}
.tmagic-design-popper[data-popper-placement^='right'] > .tmagic-design-popper-arrow {
left: -4px;
}
.tmagic-design-popper-arrow,
.tmagic-design-popper-arrow::before {
position: absolute;
width: 8px;
height: 8px;
background: inherit;
}
.tmagic-design-popper-arrow {
visibility: hidden;
}
.tmagic-design-popper-arrow::before {
visibility: visible;
content: '';
transform: rotate(45deg);
}
</style>

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

@ -7,7 +7,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue'; import { computed } from 'vue';
import { getConfig } from './config'; import { getDesignConfig } from './config';
import type { RadioProps } from './types'; import type { RadioProps } from './types';
defineOptions({ defineOptions({
@ -16,7 +16,7 @@ defineOptions({
const props = defineProps<RadioProps>(); const props = defineProps<RadioProps>();
const ui = getConfig('components')?.radio; const ui = getDesignConfig('components')?.radio;
const uiComponent = ui?.component || 'el-radio'; const uiComponent = ui?.component || 'el-radio';

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

@ -7,7 +7,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue'; import { computed } from 'vue';
import { getConfig } from './config'; import { getDesignConfig } from './config';
import type { RadioButtonProps } from './types'; import type { RadioButtonProps } from './types';
defineOptions({ defineOptions({
@ -16,7 +16,7 @@ defineOptions({
const props = defineProps<RadioButtonProps>(); const props = defineProps<RadioButtonProps>();
const ui = getConfig('components')?.radioButton; const ui = getDesignConfig('components')?.radioButton;
const uiComponent = ui?.component || 'el-radio-button'; const uiComponent = ui?.component || 'el-radio-button';

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

@ -13,7 +13,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue'; import { computed } from 'vue';
import { getConfig } from './config'; import { getDesignConfig } from './config';
import type { RadioGroupProps } from './types'; import type { RadioGroupProps } from './types';
defineOptions({ defineOptions({
@ -22,7 +22,7 @@ defineOptions({
const props = defineProps<RadioGroupProps>(); const props = defineProps<RadioGroupProps>();
const ui = getConfig('components')?.radioGroup; const ui = getDesignConfig('components')?.radioGroup;
const uiComponent = ui?.component || 'el-radio-group'; const uiComponent = ui?.component || 'el-radio-group';

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

@ -5,11 +5,11 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { getConfig } from './config'; import { getDesignConfig } from './config';
defineOptions({ defineOptions({
name: 'TMRow', name: 'TMRow',
}); });
const uiComponent = getConfig('components')?.row.component || 'el-row'; const uiComponent = getDesignConfig('components')?.row.component || 'el-row';
</script> </script>

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

@ -5,13 +5,13 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { getConfig } from './config'; import { getDesignConfig } from './config';
defineOptions({ defineOptions({
name: 'TMScrollbar', name: 'TMScrollbar',
}); });
const ui = getConfig('components')?.scrollbar; const ui = getDesignConfig('components')?.scrollbar;
const uiComponent = ui?.component || 'el-scrollbar'; const uiComponent = ui?.component || 'el-scrollbar';
</script> </script>

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

@ -16,7 +16,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, nextTick, ref, watch } from 'vue'; import { computed, nextTick, ref, watch } from 'vue';
import { getConfig } from './config'; import { getDesignConfig } from './config';
import type { SelectProps } from './types'; import type { SelectProps } from './types';
defineOptions({ defineOptions({
@ -27,7 +27,7 @@ const props = defineProps<SelectProps>();
const emit = defineEmits(['change', 'update:modelValue', 'visibleHandler']); const emit = defineEmits(['change', 'update:modelValue', 'visibleHandler']);
const ui = getConfig('components')?.select; const ui = getDesignConfig('components')?.select;
const uiComponent = ui?.component || 'el-select'; const uiComponent = ui?.component || 'el-select';

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

@ -7,7 +7,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue'; import { computed } from 'vue';
import { getConfig } from './config'; import { getDesignConfig } from './config';
import type { StepProps } from './types'; import type { StepProps } from './types';
defineOptions({ defineOptions({
@ -22,7 +22,7 @@ const clickHandler = (...args: any[]) => {
emit('click', ...args); emit('click', ...args);
}; };
const ui = getConfig('components')?.step; const ui = getDesignConfig('components')?.step;
const uiComponent = ui?.component || 'el-step'; const uiComponent = ui?.component || 'el-step';

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

@ -7,7 +7,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue'; import { computed } from 'vue';
import { getConfig } from './config'; import { getDesignConfig } from './config';
import type { StepsProps } from './types'; import type { StepsProps } from './types';
defineOptions({ defineOptions({
@ -16,7 +16,7 @@ defineOptions({
const props = defineProps<StepsProps>(); const props = defineProps<StepsProps>();
const ui = getConfig('components')?.steps; const ui = getDesignConfig('components')?.steps;
const uiComponent = ui?.component || 'el-steps'; const uiComponent = ui?.component || 'el-steps';

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

@ -15,7 +15,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue'; import { computed } from 'vue';
import { getConfig } from './config'; import { getDesignConfig } from './config';
import type { SwitchProps } from './types'; import type { SwitchProps } from './types';
defineOptions({ defineOptions({
@ -24,7 +24,7 @@ defineOptions({
const props = defineProps<SwitchProps>(); const props = defineProps<SwitchProps>();
const ui = getConfig('components')?.switch; const ui = getDesignConfig('components')?.switch;
const uiComponent = ui?.component || 'el-switch'; const uiComponent = ui?.component || 'el-switch';

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

@ -13,7 +13,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue'; import { computed } from 'vue';
import { getConfig } from './config'; import { getDesignConfig } from './config';
import type { TabPaneProps } from './types'; import type { TabPaneProps } from './types';
defineOptions({ defineOptions({
@ -22,7 +22,7 @@ defineOptions({
const props = defineProps<TabPaneProps>(); const props = defineProps<TabPaneProps>();
const ui = getConfig('components')?.tabPane; const ui = getDesignConfig('components')?.tabPane;
const uiComponent = ui?.component || 'el-tab-pane'; const uiComponent = ui?.component || 'el-tab-pane';

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

@ -16,7 +16,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, ref, watchEffect } from 'vue'; import { computed, ref, watchEffect } from 'vue';
import { getConfig } from './config'; import { getDesignConfig } from './config';
import type { TableProps } from './types'; import type { TableProps } from './types';
defineOptions({ defineOptions({
@ -27,7 +27,7 @@ const props = withDefaults(defineProps<TableProps>(), {
data: () => [], data: () => [],
}); });
const ui = getConfig('components')?.table; const ui = getDesignConfig('components')?.table;
const uiComponent = ui?.component || 'el-table'; const uiComponent = ui?.component || 'el-table';

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

@ -10,7 +10,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue'; import { computed } from 'vue';
import { getConfig } from './config'; import { getDesignConfig } from './config';
import type { TableColumnProps } from './types'; import type { TableColumnProps } from './types';
defineOptions({ defineOptions({
@ -19,7 +19,7 @@ defineOptions({
const props = defineProps<TableColumnProps>(); const props = defineProps<TableColumnProps>();
const ui = getConfig('components')?.tableColumn; const ui = getDesignConfig('components')?.tableColumn;
const uiComponent = ui?.component || 'el-table-column'; const uiComponent = ui?.component || 'el-table-column';

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

@ -17,7 +17,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue'; import { computed } from 'vue';
import { getConfig } from './config'; import { getDesignConfig } from './config';
import type { TabsProps } from './types'; import type { TabsProps } from './types';
defineOptions({ defineOptions({
@ -26,7 +26,7 @@ defineOptions({
const props = defineProps<TabsProps>(); const props = defineProps<TabsProps>();
const ui = getConfig('components')?.tabs; const ui = getDesignConfig('components')?.tabs;
const uiComponent = ui?.component || 'el-tabs'; const uiComponent = ui?.component || 'el-tabs';

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

@ -7,7 +7,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue'; import { computed } from 'vue';
import { getConfig } from './config'; import { getDesignConfig } from './config';
import type { TagProps } from './types'; import type { TagProps } from './types';
defineOptions({ defineOptions({
@ -16,7 +16,7 @@ defineOptions({
const props = defineProps<TagProps>(); const props = defineProps<TagProps>();
const ui = getConfig('components')?.tag; const ui = getDesignConfig('components')?.tag;
const uiComponent = ui?.component || 'el-tag'; const uiComponent = ui?.component || 'el-tag';

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

@ -12,7 +12,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue'; import { computed } from 'vue';
import { getConfig } from './config'; import { getDesignConfig } from './config';
import type { TimePickerProps } from './types'; import type { TimePickerProps } from './types';
defineOptions({ defineOptions({
@ -21,7 +21,7 @@ defineOptions({
const props = defineProps<TimePickerProps>(); const props = defineProps<TimePickerProps>();
const ui = getConfig('components')?.timePicker; const ui = getDesignConfig('components')?.timePicker;
const uiComponent = ui?.component || 'el-time-picker'; const uiComponent = ui?.component || 'el-time-picker';

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

@ -10,7 +10,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue'; import { computed } from 'vue';
import { getConfig } from './config'; import { getDesignConfig } from './config';
import type { TooltipProps } from './types'; import type { TooltipProps } from './types';
defineOptions({ defineOptions({
@ -19,7 +19,7 @@ defineOptions({
const props = defineProps<TooltipProps>(); const props = defineProps<TooltipProps>();
const ui = getConfig('components')?.tooltip; const ui = getDesignConfig('components')?.tooltip;
const uiComponent = ui?.component || 'el-tooltip'; const uiComponent = ui?.component || 'el-tooltip';

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

@ -22,7 +22,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, ref } from 'vue'; import { computed, ref } from 'vue';
import { getConfig } from './config'; import { getDesignConfig } from './config';
import type { TreeProps } from './types'; import type { TreeProps } from './types';
defineOptions({ defineOptions({
@ -31,7 +31,7 @@ defineOptions({
const props = defineProps<TreeProps>(); const props = defineProps<TreeProps>();
const ui = getConfig('components')?.tree; const ui = getDesignConfig('components')?.tree;
const uiComponent = ui?.component || 'el-tree'; const uiComponent = ui?.component || 'el-tree';

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

@ -11,7 +11,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, ref } from 'vue'; import { computed, ref } from 'vue';
import { getConfig } from './config'; import { getDesignConfig } from './config';
import type { UploadProps } from './types'; import type { UploadProps } from './types';
defineOptions({ defineOptions({
@ -25,7 +25,7 @@ const emit = defineEmits(['change']);
const changeHandler = (...args: any[]) => { const changeHandler = (...args: any[]) => {
emit('change', ...args); emit('change', ...args);
}; };
const ui = getConfig('components')?.upload; const ui = getDesignConfig('components')?.upload;
const uiComponent = ui?.component || 'el-upload'; const uiComponent = ui?.component || 'el-upload';

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

@ -16,14 +16,14 @@
* limitations under the License. * limitations under the License.
*/ */
import { PluginOptions } from './types'; import { DesignPluginOptions } from './types';
let $MAGIC_DESIGN: PluginOptions = {}; let $MAGIC_DESIGN: DesignPluginOptions = {};
const setConfig = (options: PluginOptions): void => { const setDesignConfig = (options: DesignPluginOptions): void => {
$MAGIC_DESIGN = options; $MAGIC_DESIGN = options;
}; };
const getConfig = <K extends keyof PluginOptions>(key: K) => $MAGIC_DESIGN[key]; const getDesignConfig = <K extends keyof DesignPluginOptions>(key: K) => $MAGIC_DESIGN[key];
export { getConfig, setConfig }; export { getDesignConfig, setDesignConfig };

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

@ -1,8 +1,10 @@
import type { App, Ref } from 'vue'; import type { App, Ref } from 'vue';
import { computed, ref, unref } from 'vue'; import { computed, ref, unref } from 'vue';
import { setConfig } from './config'; import { setDesignConfig } from './config';
import { PluginOptions, TMagicMessage, TMagicMessageBox } from './types'; import { DesignPluginOptions, TMagicMessage, TMagicMessageBox } from './types';
import './theme/index.scss';
export * from './types'; export * from './types';
export * from './config'; export * from './config';
@ -107,7 +109,7 @@ export let useZIndex = (zIndexOverrides?: Ref<number>) => {
}; };
export default { export default {
install(app: App, options: PluginOptions) { install(app: App, options: DesignPluginOptions) {
if (options.message) { if (options.message) {
tMagicMessage.error = options.message?.error; tMagicMessage.error = options.message?.error;
tMagicMessage.success = options.message?.success; tMagicMessage.success = options.message?.success;
@ -132,6 +134,6 @@ export default {
} }
app.config.globalProperties.$MAGIC_DESIGN = options; app.config.globalProperties.$MAGIC_DESIGN = options;
setConfig(options); setDesignConfig(options);
}, },
}; };

1
packages/design/src/theme/index.scss Normal file
View File

@ -0,0 +1 @@
@import "./popover.scss";

55
packages/design/src/theme/popover.scss Normal file
View File

@ -0,0 +1,55 @@
.tmagic-design-popper {
min-width: 150px;
line-height: 1.4;
background-color: #fff;
box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
color: #606266;
border: 1px solid #e4e7ed;
border-radius: 4px;
font-size: 14px;
overflow-wrap: break-word;
box-sizing: border-box;
padding: 10px;
&:focus {
outline: none;
}
}
.tmagic-design-popper[data-popper-placement^="top"]
> .tmagic-design-popper-arrow {
bottom: -4px;
}
.tmagic-design-popper[data-popper-placement^="bottom"]
> .tmagic-design-popper-arrow {
top: -4px;
}
.tmagic-design-popper[data-popper-placement^="left"]
> .tmagic-design-popper-arrow {
right: -4px;
}
.tmagic-design-popper[data-popper-placement^="right"]
> .tmagic-design-popper-arrow {
left: -4px;
}
.tmagic-design-popper-arrow,
.tmagic-design-popper-arrow::before {
position: absolute;
width: 8px;
height: 8px;
background: inherit;
}
.tmagic-design-popper-arrow {
visibility: hidden;
}
.tmagic-design-popper-arrow::before {
visibility: visible;
content: "";
transform: rotate(45deg);
}

8
packages/design/src/types.ts
View File

@ -46,7 +46,7 @@ export interface CascaderProps {
disabled?: boolean; disabled?: boolean;
clearable?: boolean; clearable?: boolean;
filterable?: boolean; filterable?: boolean;
options?: CascaderOption[]; options?: CascaderPropsOption[];
size?: FieldSize; size?: FieldSize;
/** 弹出内容的自定义类名 */ /** 弹出内容的自定义类名 */
popperClass?: string; popperClass?: string;
@ -372,13 +372,13 @@ export interface UploadProps {
disabled?: boolean; disabled?: boolean;
} }
export interface CascaderOption { export interface CascaderPropsOption {
/** 指定选项的值为选项对象的某个属性值 */ /** 指定选项的值为选项对象的某个属性值 */
value: any; value: any;
/** 指定选项标签为选项对象的某个属性值 */ /** 指定选项标签为选项对象的某个属性值 */
label: string; label: string;
/** 指定选项的子选项为选项对象的某个属性值 */ /** 指定选项的子选项为选项对象的某个属性值 */
children?: CascaderOption[]; children?: CascaderPropsOption[];
} }
export interface IconProps { export interface IconProps {
@ -706,7 +706,7 @@ export interface Components {
}; };
} }
export interface PluginOptions { export interface DesignPluginOptions {
message?: TMagicMessage; message?: TMagicMessage;
messageBox?: TMagicMessageBox; messageBox?: TMagicMessageBox;
components?: Components; components?: Components;

10
packages/editor/package.json
View File

@ -49,8 +49,11 @@
], ],
"dependencies": { "dependencies": {
"@element-plus/icons-vue": "^2.3.1", "@element-plus/icons-vue": "^2.3.1",
"@tmagic/dep": "workspace:*", "@tmagic/design": "workspace:*",
"@tmagic/form": "workspace:*",
"@tmagic/stage": "workspace:*",
"@tmagic/table": "workspace:*", "@tmagic/table": "workspace:*",
"@tmagic/utils": "workspace:*",
"buffer": "^6.0.3", "buffer": "^6.0.3",
"color": "^3.1.3", "color": "^3.1.3",
"emmet-monaco-es": "^5.3.0", "emmet-monaco-es": "^5.3.0",
@ -79,11 +82,6 @@
}, },
"peerDependencies": { "peerDependencies": {
"@tmagic/core": "workspace:*", "@tmagic/core": "workspace:*",
"@tmagic/design": "workspace:*",
"@tmagic/form": "workspace:*",
"@tmagic/schema": "workspace:*",
"@tmagic/stage": "workspace:*",
"@tmagic/utils": "workspace:*",
"monaco-editor": "^0.48.0", "monaco-editor": "^0.48.0",
"typescript": "*", "typescript": "*",
"vue": "^3.4.35" "vue": "^3.4.35"

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

@ -119,7 +119,7 @@ import { EventEmitter } from 'events';
import { provide } from 'vue'; import { provide } from 'vue';
import type { MApp } from '@tmagic/schema'; import type { MApp } from '@tmagic/core';
import Framework from './layouts/Framework.vue'; import Framework from './layouts/Framework.vue';
import TMagicNavMenu from './layouts/NavMenu.vue'; import TMagicNavMenu from './layouts/NavMenu.vue';

10
packages/editor/src/components/CodeBlockEditor.vue
View File

@ -61,9 +61,9 @@
<script lang="ts" setup> <script lang="ts" setup>
import { computed, inject, Ref, ref } from 'vue'; import { computed, inject, Ref, ref } from 'vue';
import type { CodeBlockContent } from '@tmagic/core';
import { TMagicButton, TMagicDialog, tMagicMessage, tMagicMessageBox, TMagicTag } from '@tmagic/design'; import { TMagicButton, TMagicDialog, tMagicMessage, tMagicMessageBox, TMagicTag } from '@tmagic/design';
import { ColumnConfig, FormConfig, FormState, MFormBox } from '@tmagic/form'; import { type FormConfig, type FormState, MFormBox, type TableColumnConfig } from '@tmagic/form';
import type { CodeBlockContent } from '@tmagic/schema';
import FloatingBox from '@editor/components/FloatingBox.vue'; import FloatingBox from '@editor/components/FloatingBox.vue';
import { useEditorContentHeight } from '@editor/hooks/use-editor-content-height'; import { useEditorContentHeight } from '@editor/hooks/use-editor-content-height';
@ -71,7 +71,7 @@ import { useNextFloatBoxPosition } from '@editor/hooks/use-next-float-box-positi
import { useWindowRect } from '@editor/hooks/use-window-rect'; import { useWindowRect } from '@editor/hooks/use-window-rect';
import CodeEditor from '@editor/layouts/CodeEditor.vue'; import CodeEditor from '@editor/layouts/CodeEditor.vue';
import type { Services } from '@editor/type'; import type { Services } from '@editor/type';
import { getConfig } from '@editor/utils/config'; import { getEditorConfig } from '@editor/utils/config';
defineOptions({ defineOptions({
name: 'MEditorCodeBlockEditor', name: 'MEditorCodeBlockEditor',
@ -110,7 +110,7 @@ const diffChange = () => {
difVisible.value = false; difVisible.value = false;
}; };
const defaultParamColConfig: ColumnConfig = { const defaultParamColConfig: TableColumnConfig = {
type: 'row', type: 'row',
label: '参数类型', label: '参数类型',
items: [ items: [
@ -197,7 +197,7 @@ const functionConfig = computed<FormConfig>(() => [
onChange: (formState: FormState | undefined, code: string) => { onChange: (formState: FormState | undefined, code: string) => {
try { try {
// 检测js代码是否存在语法错误 // 检测js代码是否存在语法错误
getConfig('parseDSL')(code); getEditorConfig('parseDSL')(code);
return code; return code;
} catch (error: any) { } catch (error: any) {

2
packages/editor/src/components/Tree.vue
View File

@ -24,7 +24,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { provide } from 'vue'; import { provide } from 'vue';
import type { Id } from '@tmagic/schema'; import type { Id } from '@tmagic/core';
import type { LayerNodeStatus, TreeNodeData } from '@editor/type'; import type { LayerNodeStatus, TreeNodeData } from '@editor/type';

2
packages/editor/src/components/TreeNode.vue
View File

@ -65,7 +65,7 @@
import { computed, inject } from 'vue'; import { computed, inject } from 'vue';
import { ArrowDown, ArrowRight } from '@element-plus/icons-vue'; import { ArrowDown, ArrowRight } from '@element-plus/icons-vue';
import type { Id } from '@tmagic/schema'; import type { Id } from '@tmagic/core';
import MIcon from '@editor/components/Icon.vue'; import MIcon from '@editor/components/Icon.vue';
import type { LayerNodeStatus, TreeNodeData } from '@editor/type'; import type { LayerNodeStatus, TreeNodeData } from '@editor/type';

3
packages/editor/src/editorProps.ts
View File

@ -1,6 +1,5 @@
import type { EventOption } from '@tmagic/core'; import type { DataSourceSchema, EventOption, Id, MApp, MNode } from '@tmagic/core';
import type { FormConfig, FormState } from '@tmagic/form'; import type { FormConfig, FormState } from '@tmagic/form';
import type { DataSourceSchema, Id, MApp, MNode } from '@tmagic/schema';
import StageCore, { import StageCore, {
CONTAINER_HIGHLIGHT_CLASS_NAME, CONTAINER_HIGHLIGHT_CLASS_NAME,
ContainerHighlightType, ContainerHighlightType,

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

@ -8,7 +8,7 @@ import serialize from 'serialize-javascript';
import type { FieldProps, FormItem } from '@tmagic/form'; import type { FieldProps, FormItem } from '@tmagic/form';
import { getConfig } from '@editor/utils/config'; import { getEditorConfig } from '@editor/utils/config';
defineOptions({ defineOptions({
name: 'MFieldsCodeLink', name: 'MFieldsCodeLink',
@ -70,7 +70,7 @@ const changeHandler = (v: Record<string, any>) => {
if (!props.name || !props.model) return; if (!props.name || !props.model) return;
try { try {
const parseDSL = getConfig('parseDSL'); const parseDSL = getEditorConfig('parseDSL');
props.model[props.name] = parseDSL(`(${v[props.name]})`); props.model[props.name] = parseDSL(`(${v[props.name]})`);
emit('change', props.model[props.name]); emit('change', props.model[props.name]);
} catch (e) { } catch (e) {

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

@ -19,10 +19,10 @@
import { computed, inject, watch } from 'vue'; import { computed, inject, watch } from 'vue';
import { isEmpty } from 'lodash-es'; import { isEmpty } from 'lodash-es';
import { HookCodeType, HookType } from '@tmagic/core';
import { TMagicCard } from '@tmagic/design'; import { TMagicCard } from '@tmagic/design';
import type { FieldProps, FormItem } from '@tmagic/form'; import type { FieldProps, FormItem } from '@tmagic/form';
import { FormState, MContainer } from '@tmagic/form'; import { FormState, MContainer } from '@tmagic/form';
import { HookCodeType, HookType } from '@tmagic/schema';
import type { Services } from '@editor/type'; import type { Services } from '@editor/type';

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

@ -39,9 +39,9 @@ import { computed, inject, ref, watch } from 'vue';
import { Edit, View } from '@element-plus/icons-vue'; import { Edit, View } from '@element-plus/icons-vue';
import { isEmpty, map } from 'lodash-es'; import { isEmpty, map } from 'lodash-es';
import type { Id } from '@tmagic/core';
import { TMagicButton } from '@tmagic/design'; import { TMagicButton } from '@tmagic/design';
import { createValues, type FieldProps, filterFunction, type FormState, MContainer } from '@tmagic/form'; import { createValues, type FieldProps, filterFunction, type FormState, MContainer } from '@tmagic/form';
import type { Id } from '@tmagic/schema';
import CodeParams from '@editor/components/CodeParams.vue'; import CodeParams from '@editor/components/CodeParams.vue';
import MIcon from '@editor/components/Icon.vue'; import MIcon from '@editor/components/Icon.vue';

2
packages/editor/src/fields/CondOpSelect.vue
View File

@ -29,7 +29,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, inject } from 'vue'; import { computed, inject } from 'vue';
import { getConfig as getDesignConfig, TMagicSelect } from '@tmagic/design'; import { getDesignConfig, TMagicSelect } from '@tmagic/design';
import type { FieldProps } from '@tmagic/form'; import type { FieldProps } from '@tmagic/form';
import type { CondOpSelectConfig, Services } from '@editor/type'; import type { CondOpSelectConfig, Services } from '@editor/type';

10
packages/editor/src/fields/DataSourceFieldSelect/FieldSelect.vue
View File

@ -69,15 +69,9 @@
import { computed, inject, ref, watch } from 'vue'; import { computed, inject, ref, watch } from 'vue';
import { Edit, View } from '@element-plus/icons-vue'; import { Edit, View } from '@element-plus/icons-vue';
import { import { DataSourceFieldType } from '@tmagic/core';
getConfig as getDesignConfig, import { getDesignConfig, TMagicButton, TMagicCascader, TMagicSelect, TMagicTooltip } from '@tmagic/design';
TMagicButton,
TMagicCascader,
TMagicSelect,
TMagicTooltip,
} from '@tmagic/design';
import { type FilterFunction, filterFunction, type FormState, type SelectOption } from '@tmagic/form'; import { type FilterFunction, filterFunction, type FormState, type SelectOption } from '@tmagic/form';
import { DataSourceFieldType } from '@tmagic/schema';
import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX } from '@tmagic/utils'; import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX } from '@tmagic/utils';
import MIcon from '@editor/components/Icon.vue'; import MIcon from '@editor/components/Icon.vue';

2
packages/editor/src/fields/DataSourceFieldSelect/Index.vue
View File

@ -42,9 +42,9 @@
import { computed, inject, ref, resolveComponent, watch } from 'vue'; import { computed, inject, ref, resolveComponent, watch } from 'vue';
import { Coin } from '@element-plus/icons-vue'; import { Coin } from '@element-plus/icons-vue';
import { DataSchema } from '@tmagic/core';
import { TMagicButton, tMagicMessage, TMagicTooltip } from '@tmagic/design'; import { TMagicButton, tMagicMessage, TMagicTooltip } from '@tmagic/design';
import type { FieldProps, FormState } from '@tmagic/form'; import type { FieldProps, FormState } from '@tmagic/form';
import { DataSchema } from '@tmagic/schema';
import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX } from '@tmagic/utils'; import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX } from '@tmagic/utils';
import MIcon from '@editor/components/Icon.vue'; import MIcon from '@editor/components/Icon.vue';

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

@ -49,9 +49,9 @@
<script setup lang="ts"> <script setup lang="ts">
import { inject, Ref, ref } from 'vue'; import { inject, Ref, ref } from 'vue';
import type { DataSchema } from '@tmagic/core';
import { TMagicButton, tMagicMessage, tMagicMessageBox } from '@tmagic/design'; import { TMagicButton, tMagicMessage, tMagicMessageBox } from '@tmagic/design';
import { type FieldProps, type FormConfig, type FormState, MFormBox } from '@tmagic/form'; import { type FieldProps, type FormConfig, type FormState, MFormBox } from '@tmagic/form';
import type { DataSchema } from '@tmagic/schema';
import { type ColumnConfig, MagicTable } from '@tmagic/table'; import { type ColumnConfig, MagicTable } from '@tmagic/table';
import { getDefaultValueFromFields } from '@tmagic/utils'; import { getDefaultValueFromFields } from '@tmagic/utils';

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

@ -1,12 +1,12 @@
<template> <template>
<component <component
v-if="disabled || isFocused" v-if="disabled || isFocused"
:is="getConfig('components')?.autocomplete.component || 'el-autocomplete'" :is="getDesignConfig('components')?.autocomplete.component || 'el-autocomplete'"
class="tmagic-design-auto-complete" class="tmagic-design-auto-complete"
ref="autocomplete" ref="autocomplete"
v-model="state" v-model="state"
v-bind=" v-bind="
getConfig('components')?.autocomplete.props({ getDesignConfig('components')?.autocomplete.props({
disabled, disabled,
size, size,
fetchSuggestions: querySearch, fetchSuggestions: querySearch,
@ -51,9 +51,9 @@
import { computed, inject, nextTick, ref, watch } from 'vue'; import { computed, inject, nextTick, ref, watch } from 'vue';
import { Coin } from '@element-plus/icons-vue'; import { Coin } from '@element-plus/icons-vue';
import { getConfig, TMagicAutocomplete, TMagicTag } from '@tmagic/design'; import type { DataSchema, DataSourceSchema } from '@tmagic/core';
import { getDesignConfig, TMagicAutocomplete, TMagicTag } from '@tmagic/design';
import type { FieldProps, FormItem } from '@tmagic/form'; import type { FieldProps, FormItem } from '@tmagic/form';
import type { DataSchema, DataSourceSchema } from '@tmagic/schema';
import { getKeysArray, isNumber } from '@tmagic/utils'; import { getKeysArray, isNumber } from '@tmagic/utils';
import Icon from '@editor/components/Icon.vue'; import Icon from '@editor/components/Icon.vue';

2
packages/editor/src/fields/DataSourceMethodSelect.vue
View File

@ -35,9 +35,9 @@
import { computed, inject, ref } from 'vue'; import { computed, inject, ref } from 'vue';
import { Edit, View } from '@element-plus/icons-vue'; import { Edit, View } from '@element-plus/icons-vue';
import type { Id } from '@tmagic/core';
import { TMagicButton, TMagicTooltip } from '@tmagic/design'; import { TMagicButton, TMagicTooltip } from '@tmagic/design';
import { createValues, type FieldProps, filterFunction, type FormState, MContainer } from '@tmagic/form'; import { createValues, type FieldProps, filterFunction, type FormState, MContainer } from '@tmagic/form';
import type { Id } from '@tmagic/schema';
import CodeParams from '@editor/components/CodeParams.vue'; import CodeParams from '@editor/components/CodeParams.vue';
import MIcon from '@editor/components/Icon.vue'; import MIcon from '@editor/components/Icon.vue';

2
packages/editor/src/fields/DataSourceMethods.vue
View File

@ -21,9 +21,9 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import type { CodeBlockContent } from '@tmagic/core';
import { TMagicButton } from '@tmagic/design'; import { TMagicButton } from '@tmagic/design';
import type { FieldProps } from '@tmagic/form'; import type { FieldProps } from '@tmagic/form';
import type { CodeBlockContent } from '@tmagic/schema';
import { type ColumnConfig, MagicTable } from '@tmagic/table'; import { type ColumnConfig, MagicTable } from '@tmagic/table';
import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue'; import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';

2
packages/editor/src/fields/DataSourceMocks.vue
View File

@ -31,9 +31,9 @@
<script setup lang="ts"> <script setup lang="ts">
import { inject, Ref, ref } from 'vue'; import { inject, Ref, ref } from 'vue';
import type { MockSchema } from '@tmagic/core';
import { TMagicButton, tMagicMessageBox, TMagicSwitch } from '@tmagic/design'; import { TMagicButton, tMagicMessageBox, TMagicSwitch } from '@tmagic/design';
import { type FieldProps, type FormConfig, type FormState, MFormBox } from '@tmagic/form'; import { type FieldProps, type FormConfig, type FormState, MFormBox } from '@tmagic/form';
import type { MockSchema } from '@tmagic/schema';
import { type ColumnConfig, MagicTable } from '@tmagic/table'; import { type ColumnConfig, MagicTable } from '@tmagic/table';
import { getDefaultValueFromFields } from '@tmagic/utils'; import { getDefaultValueFromFields } from '@tmagic/utils';

2
packages/editor/src/fields/DisplayConds.vue
View File

@ -15,6 +15,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { computed, inject } from 'vue'; import { computed, inject } from 'vue';
import type { DisplayCond } from '@tmagic/core';
import { import {
type FieldProps, type FieldProps,
type FilterFunction, type FilterFunction,
@ -23,7 +24,6 @@ import {
type GroupListConfig, type GroupListConfig,
MGroupList, MGroupList,
} from '@tmagic/form'; } from '@tmagic/form';
import type { DisplayCond } from '@tmagic/schema';
import type { Services } from '@editor/type'; import type { Services } from '@editor/type';
import { getCascaderOptionsFromFields } from '@editor/utils'; import { getCascaderOptionsFromFields } from '@editor/utils';

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

@ -53,11 +53,11 @@ import { computed, inject } from 'vue';
import { Delete } from '@element-plus/icons-vue'; import { Delete } from '@element-plus/icons-vue';
import { has } from 'lodash-es'; import { has } from 'lodash-es';
import type { EventOption } from '@tmagic/core'; import type { EventOption, MComponent, MContainer } from '@tmagic/core';
import { ActionType } from '@tmagic/core';
import { TMagicButton } from '@tmagic/design'; import { TMagicButton } from '@tmagic/design';
import type { CascaderOption, ChildConfig, FieldProps, FormState, PanelConfig } from '@tmagic/form'; import type { CascaderOption, ChildConfig, FieldProps, FormState, PanelConfig } from '@tmagic/form';
import { MContainer as MFormContainer, MPanel } from '@tmagic/form'; import { MContainer as MFormContainer, MPanel } from '@tmagic/form';
import { ActionType, type MComponent, type MContainer } from '@tmagic/schema';
import { DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX } from '@tmagic/utils'; import { DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX } from '@tmagic/utils';
import type { CodeSelectColConfig, DataSourceMethodSelectConfig, EventSelectConfig, Services } from '@editor/type'; import type { CodeSelectColConfig, DataSourceMethodSelectConfig, EventSelectConfig, Services } from '@editor/type';

2
packages/editor/src/fields/PageFragmentSelect.vue
View File

@ -19,8 +19,8 @@
import { computed, inject } from 'vue'; import { computed, inject } from 'vue';
import { Edit } from '@element-plus/icons-vue'; import { Edit } from '@element-plus/icons-vue';
import { Id, NodeType } from '@tmagic/core';
import { FieldProps } from '@tmagic/form'; import { FieldProps } from '@tmagic/form';
import { Id, NodeType } from '@tmagic/schema';
import Icon from '@editor/components/Icon.vue'; import Icon from '@editor/components/Icon.vue';
import type { PageFragmentSelectConfig, Services } from '@editor/type'; import type { PageFragmentSelectConfig, Services } from '@editor/type';

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

@ -45,9 +45,9 @@ import { computed, inject, ref } from 'vue';
import { Close, Delete } from '@element-plus/icons-vue'; import { Close, Delete } from '@element-plus/icons-vue';
import { throttle } from 'lodash-es'; import { throttle } from 'lodash-es';
import type { Id } from '@tmagic/core';
import { TMagicButton, TMagicTooltip } from '@tmagic/design'; import { TMagicButton, TMagicTooltip } from '@tmagic/design';
import type { FieldProps, FormItem, FormState } from '@tmagic/form'; import type { FieldProps, FormItem, FormState } from '@tmagic/form';
import type { Id } from '@tmagic/schema';
import { getIdFromEl } from '@tmagic/utils'; import { getIdFromEl } from '@tmagic/utils';
import { type Services, UI_SELECT_MODE_EVENT_NAME } from '@editor/type'; import { type Services, UI_SELECT_MODE_EVENT_NAME } from '@editor/type';

2
packages/editor/src/hooks/use-code-block-edit.ts
View File

@ -1,8 +1,8 @@
import { nextTick, ref } from 'vue'; import { nextTick, ref } from 'vue';
import { cloneDeep } from 'lodash-es'; import { cloneDeep } from 'lodash-es';
import type { CodeBlockContent } from '@tmagic/core';
import { tMagicMessage } from '@tmagic/design'; import { tMagicMessage } from '@tmagic/design';
import type { CodeBlockContent } from '@tmagic/schema';
import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue'; import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
import type { CodeBlockService } from '@editor/services/codeBlock'; import type { CodeBlockService } from '@editor/services/codeBlock';

2
packages/editor/src/hooks/use-data-source-edit.ts
View File

@ -1,6 +1,6 @@
import { computed, ref } from 'vue'; import { computed, ref } from 'vue';
import type { DataSourceSchema } from '@tmagic/schema'; import type { DataSourceSchema } from '@tmagic/core';
import DataSourceConfigPanel from '@editor/layouts/sidebar/data-source/DataSourceConfigPanel.vue'; import DataSourceConfigPanel from '@editor/layouts/sidebar/data-source/DataSourceConfigPanel.vue';
import type { DataSourceService } from '@editor/services/dataSource'; import type { DataSourceService } from '@editor/services/dataSource';

6
packages/editor/src/hooks/use-data-source-method.ts
View File

@ -1,11 +1,11 @@
import { nextTick, ref } from 'vue'; import { nextTick, ref } from 'vue';
import { cloneDeep } from 'lodash-es'; import { cloneDeep } from 'lodash-es';
import type { CodeBlockContent, DataSourceSchema } from '@tmagic/core';
import { tMagicMessage } from '@tmagic/design'; import { tMagicMessage } from '@tmagic/design';
import type { CodeBlockContent, DataSourceSchema } from '@tmagic/schema';
import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue'; import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
import { getConfig } from '@editor/utils/config'; import { getEditorConfig } from '@editor/utils/config';
export const useDataSourceMethod = () => { export const useDataSourceMethod = () => {
const codeConfig = ref<CodeBlockContent>(); const codeConfig = ref<CodeBlockContent>();
@ -81,7 +81,7 @@ export const useDataSourceMethod = () => {
if (values.content) { if (values.content) {
// 在保存的时候转换代码内容 // 在保存的时候转换代码内容
const parseDSL = getConfig('parseDSL'); const parseDSL = getEditorConfig('parseDSL');
if (typeof values.content === 'string') { if (typeof values.content === 'string') {
values.content = parseDSL<(...args: any[]) => any>(values.content); values.content = parseDSL<(...args: any[]) => any>(values.content);
} }

2
packages/editor/src/hooks/use-filter.ts
View File

@ -1,6 +1,6 @@
import { type Ref, ref } from 'vue'; import { type Ref, ref } from 'vue';
import type { Id, MNode } from '@tmagic/schema'; import type { Id, MNode } from '@tmagic/core';
import type { LayerNodeStatus, TreeNodeData } from '@editor/type'; import type { LayerNodeStatus, TreeNodeData } from '@editor/type';
import { traverseNode } from '@editor/utils'; import { traverseNode } from '@editor/utils';

2
packages/editor/src/hooks/use-node-status.ts
View File

@ -1,6 +1,6 @@
import { ComputedRef, ref, watch } from 'vue'; import { ComputedRef, ref, watch } from 'vue';
import type { Id, MNode } from '@tmagic/schema'; import type { Id, MNode } from '@tmagic/core';
import { LayerNodeStatus, TreeNodeData } from '@editor/type'; import { LayerNodeStatus, TreeNodeData } from '@editor/type';
import { traverseNode } from '@editor/utils'; import { traverseNode } from '@editor/utils';

2
packages/editor/src/hooks/use-stage.ts
View File

@ -1,6 +1,6 @@
import { computed, onBeforeUnmount, watch } from 'vue'; import { computed, onBeforeUnmount, watch } from 'vue';
import type { MNode } from '@tmagic/schema'; import type { MNode } from '@tmagic/core';
import StageCore, { GuidesType, RemoveEventData, SortEventData, UpdateEventData } from '@tmagic/stage'; import StageCore, { GuidesType, RemoveEventData, SortEventData, UpdateEventData } from '@tmagic/stage';
import { getIdFromEl } from '@tmagic/utils'; import { getIdFromEl } from '@tmagic/utils';

34
packages/editor/src/index.ts
View File

@ -17,6 +17,12 @@
*/ */
import { App } from 'vue'; import { App } from 'vue';
import type { DesignPluginOptions } from '@tmagic/design';
import designPlugin from '@tmagic/design';
import type { FormInstallOptions } from '@tmagic/form';
import formPlugin from '@tmagic/form';
import tablePlugin from '@tmagic/table';
import Code from './fields/Code.vue'; import Code from './fields/Code.vue';
import CodeLink from './fields/CodeLink.vue'; import CodeLink from './fields/CodeLink.vue';
import CodeSelect from './fields/CodeSelect.vue'; import CodeSelect from './fields/CodeSelect.vue';
@ -35,16 +41,25 @@ import KeyValue from './fields/KeyValue.vue';
import PageFragmentSelect from './fields/PageFragmentSelect.vue'; import PageFragmentSelect from './fields/PageFragmentSelect.vue';
import uiSelect from './fields/UISelect.vue'; import uiSelect from './fields/UISelect.vue';
import CodeEditor from './layouts/CodeEditor.vue'; import CodeEditor from './layouts/CodeEditor.vue';
import { setConfig } from './utils/config'; import { setEditorConfig } from './utils/config';
import Editor from './Editor.vue'; import Editor from './Editor.vue';
import type { InstallOptions } from './type'; import type { EditorInstallOptions } from './type';
import './theme/index.scss'; import './theme/index.scss';
export * from '@tmagic/form';
export { default as formPlugin } from '@tmagic/form';
export * from '@tmagic/table';
export { default as tablePlugin } from '@tmagic/table';
export * from '@tmagic/stage';
export { default as StageCore } from '@tmagic/stage';
export * from '@tmagic/design';
export { default as designPlugin } from '@tmagic/design';
export * from '@tmagic/utils';
export type { OnDrag } from 'gesto'; export type { OnDrag } from 'gesto';
export { DepTargetType } from '@tmagic/dep'; export { DepTargetType } from '@tmagic/core';
export type { MoveableOptions } from '@tmagic/stage';
export * from './type'; export * from './type';
export * from './hooks'; export * from './hooks';
export * from './utils'; export * from './utils';
@ -91,18 +106,23 @@ export { default as PageFragmentSelect } from './fields/PageFragmentSelect.vue';
export { default as DisplayConds } from './fields/DisplayConds.vue'; export { default as DisplayConds } from './fields/DisplayConds.vue';
export { default as CondOpSelect } from './fields/CondOpSelect.vue'; export { default as CondOpSelect } from './fields/CondOpSelect.vue';
const defaultInstallOpt: InstallOptions = { const defaultInstallOpt: EditorInstallOptions = {
// eslint-disable-next-line no-eval // eslint-disable-next-line no-eval
parseDSL: (dsl: string) => eval(dsl), parseDSL: (dsl: string) => eval(dsl),
}; };
export default { export default {
install: (app: App, opt?: Partial<InstallOptions>): void => { install: (app: App, opt?: Partial<EditorInstallOptions | DesignPluginOptions | FormInstallOptions>): void => {
const option = Object.assign(defaultInstallOpt, opt || {}); const option = Object.assign(defaultInstallOpt, opt || {});
app.use(designPlugin, opt || {});
app.use(formPlugin, opt || {});
app.use(tablePlugin);
// eslint-disable-next-line no-param-reassign // eslint-disable-next-line no-param-reassign
app.config.globalProperties.$TMAGIC_EDITOR = option; app.config.globalProperties.$TMAGIC_EDITOR = option;
setConfig(option); setEditorConfig(option);
app.component(`${Editor.name || 'MEditor'}`, Editor); app.component(`${Editor.name || 'MEditor'}`, Editor);
app.component('magic-code-editor', CodeEditor); app.component('magic-code-editor', CodeEditor);
app.component('m-fields-ui-select', uiSelect); app.component('m-fields-ui-select', uiSelect);

14
packages/editor/src/initService.ts
View File

@ -1,7 +1,16 @@
import { onBeforeUnmount, reactive, toRaw, watch } from 'vue'; import { onBeforeUnmount, reactive, toRaw, watch } from 'vue';
import { cloneDeep } from 'lodash-es'; import { cloneDeep } from 'lodash-es';
import type { EventOption } from '@tmagic/core'; import type {
CodeBlockContent,
DataSourceSchema,
EventOption,
Id,
MApp,
MNode,
MPage,
MPageFragment,
} from '@tmagic/core';
import { import {
createCodeBlockTarget, createCodeBlockTarget,
createDataSourceCondTarget, createDataSourceCondTarget,
@ -9,8 +18,7 @@ import {
createDataSourceTarget, createDataSourceTarget,
DepTargetType, DepTargetType,
Target, Target,
} from '@tmagic/dep'; } from '@tmagic/core';
import type { CodeBlockContent, DataSourceSchema, Id, MApp, MNode, MPage, MPageFragment } from '@tmagic/schema';
import { isPage } from '@tmagic/utils'; import { isPage } from '@tmagic/utils';
import PropsPanel from './layouts/PropsPanel.vue'; import PropsPanel from './layouts/PropsPanel.vue';

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

@ -22,7 +22,7 @@
import { inject, toRaw } from 'vue'; import { inject, toRaw } from 'vue';
import { Plus } from '@element-plus/icons-vue'; import { Plus } from '@element-plus/icons-vue';
import { NodeType } from '@tmagic/schema'; import { NodeType } from '@tmagic/core';
import MIcon from '@editor/components/Icon.vue'; import MIcon from '@editor/components/Icon.vue';
import type { Services } from '@editor/type'; import type { Services } from '@editor/type';

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

@ -23,7 +23,7 @@ import serialize from 'serialize-javascript';
import { TMagicButton } from '@tmagic/design'; import { TMagicButton } from '@tmagic/design';
import MIcon from '@editor/components/Icon.vue'; import MIcon from '@editor/components/Icon.vue';
import { getConfig } from '@editor/utils/config'; import { getEditorConfig } from '@editor/utils/config';
import monaco from '@editor/utils/monaco-editor'; import monaco from '@editor/utils/monaco-editor';
defineOptions({ defineOptions({
@ -76,7 +76,7 @@ const toString = (v: string | any, language: string): string => {
return value; return value;
}; };
const parse = (v: string | any, language: string): any => { const parseCode = (v: string | any, language: string): any => {
if (typeof v !== 'string') { if (typeof v !== 'string') {
return v; return v;
} }
@ -85,7 +85,7 @@ const parse = (v: string | any, language: string): any => {
return JSON.parse(v); return JSON.parse(v);
} }
return getConfig('parseDSL')(v); return getEditorConfig('parseDSL')(v);
}; };
let vsEditor: monaco.editor.IStandaloneCodeEditor | null = null; let vsEditor: monaco.editor.IStandaloneCodeEditor | null = null;
@ -149,7 +149,7 @@ const init = async () => {
e.stopPropagation(); e.stopPropagation();
const newValue = getEditorValue(); const newValue = getEditorValue();
values.value = newValue; values.value = newValue;
emit('save', props.parse ? parse(newValue, props.language) : newValue); emit('save', props.parse ? parseCode(newValue, props.language) : newValue);
} }
}); });
@ -158,7 +158,7 @@ const init = async () => {
const newValue = getEditorValue(); const newValue = getEditorValue();
if (values.value !== newValue) { if (values.value !== newValue) {
values.value = newValue; values.value = newValue;
emit('save', props.parse ? parse(newValue, props.language) : newValue); emit('save', props.parse ? parseCode(newValue, props.language) : newValue);
} }
}); });
} }

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

@ -65,7 +65,7 @@ import { TMagicScrollbar } from '@tmagic/design';
import SplitView from '@editor/components/SplitView.vue'; import SplitView from '@editor/components/SplitView.vue';
import type { FrameworkSlots, GetColumnWidth, PageBarSortOptions, Services } from '@editor/type'; import type { FrameworkSlots, GetColumnWidth, PageBarSortOptions, Services } from '@editor/type';
import { getConfig } from '@editor/utils/config'; import { getEditorConfig } from '@editor/utils/config';
import PageBar from './page-bar/PageBar.vue'; import PageBar from './page-bar/PageBar.vue';
import AddPageBox from './AddPageBox.vue'; import AddPageBox from './AddPageBox.vue';
@ -156,7 +156,7 @@ onBeforeUnmount(() => {
const saveCode = (value: string) => { const saveCode = (value: string) => {
try { try {
const parseDSL = getConfig('parseDSL'); const parseDSL = getEditorConfig('parseDSL');
editorService?.set('root', parseDSL(value)); editorService?.set('root', parseDSL(value));
} catch (e: any) { } catch (e: any) {
console.error(e); console.error(e);

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

@ -10,7 +10,7 @@
import { computed, inject, markRaw, onBeforeUnmount, onMounted, ref } from 'vue'; import { computed, inject, markRaw, onBeforeUnmount, onMounted, ref } from 'vue';
import { Back, Delete, FullScreen, Grid, Memo, Right, ScaleToOriginal, ZoomIn, ZoomOut } from '@element-plus/icons-vue'; import { Back, Delete, FullScreen, Grid, Memo, Right, ScaleToOriginal, ZoomIn, ZoomOut } from '@element-plus/icons-vue';
import { NodeType } from '@tmagic/schema'; import { NodeType } from '@tmagic/core';
import ToolButton from '@editor/components/ToolButton.vue'; import ToolButton from '@editor/components/ToolButton.vue';
import { ColumnLayout, MenuBarData, MenuButton, MenuComponent, MenuItem, Services } from '@editor/type'; import { ColumnLayout, MenuBarData, MenuButton, MenuComponent, MenuItem, Services } from '@editor/type';

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

@ -41,10 +41,10 @@
import { computed, getCurrentInstance, inject, onBeforeUnmount, onMounted, ref, watchEffect } from 'vue'; import { computed, getCurrentInstance, inject, onBeforeUnmount, onMounted, ref, watchEffect } from 'vue';
import { Document as DocumentIcon } from '@element-plus/icons-vue'; import { Document as DocumentIcon } from '@element-plus/icons-vue';
import type { MNode } from '@tmagic/core';
import { TMagicButton } from '@tmagic/design'; import { TMagicButton } from '@tmagic/design';
import type { FormState, FormValue } from '@tmagic/form'; import type { FormState, FormValue } from '@tmagic/form';
import { MForm } from '@tmagic/form'; import { MForm } from '@tmagic/form';
import type { MNode } from '@tmagic/schema';
import MIcon from '@editor/components/Icon.vue'; import MIcon from '@editor/components/Icon.vue';
import { useEditorContentHeight } from '@editor/hooks/use-editor-content-height'; import { useEditorContentHeight } from '@editor/hooks/use-editor-content-height';

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