@tmagic/editor 1.5.0-beta.9 → 1.5.1

package/src/hooks/use-data-source-method.ts

@@ -1,100 +0,0 @@
-import { nextTick, ref } from 'vue';
-import { cloneDeep } from 'lodash-es';
-
-import type { CodeBlockContent, DataSourceSchema } from '@tmagic/core';
-import { tMagicMessage } from '@tmagic/design';
-
-import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
-import { getEditorConfig } from '@editor/utils/config';
-
-export const useDataSourceMethod = () => {
-  const codeConfig = ref<CodeBlockContent>();
-  const codeBlockEditor = ref<InstanceType<typeof CodeBlockEditor>>();
-
-  const dataSource = ref<DataSourceSchema>();
-  const dataSourceMethod = ref('');
-
-  return {
-    codeConfig,
-    codeBlockEditor,
-
-    createCode: async (model: DataSourceSchema) => {
-      codeConfig.value = {
-        name: '',
-        content: `({ params, dataSource, app }) => {\n  // place your code here\n}`,
-        params: [],
-      };
-
-      await nextTick();
-
-      dataSource.value = model;
-      dataSourceMethod.value = '';
-
-      codeBlockEditor.value?.show();
-    },
-
-    editCode: async (model: DataSourceSchema, methodName: string) => {
-      const method = model.methods?.find((method) => method.name === methodName);
-
-      if (!method) {
-        tMagicMessage.error('获取数据源方法失败');
-        return;
-      }
-
-      let codeContent = method.content || `({ params, dataSource, app }) => {\n  // place your code here\n}`;
-
-      if (typeof codeContent !== 'string') {
-        codeContent = codeContent.toString();
-      }
-
-      codeConfig.value = {
-        ...cloneDeep(method),
-        content: codeContent,
-      };
-
-      await nextTick();
-
-      dataSource.value = model;
-      dataSourceMethod.value = methodName;
-
-      codeBlockEditor.value?.show();
-    },
-
-    deleteCode: async (model: DataSourceSchema, methodName: string) => {
-      if (!model.methods) return;
-
-      const index = model.methods.findIndex((method) => method.name === methodName);
-
-      if (index === -1) {
-        return;
-      }
-
-      model.methods.splice(index, 1);
-    },
-
-    submitCode: (values: CodeBlockContent) => {
-      if (!dataSource.value) return;
-
-      if (!dataSource.value.methods) {
-        dataSource.value.methods = [];
-      }
-
-      if (values.content) {
-        // 在保存的时候转换代码内容
-        const parseDSL = getEditorConfig('parseDSL');
-        if (typeof values.content === 'string') {
-          values.content = parseDSL<(...args: any[]) => any>(values.content);
-        }
-      }
-
-      if (dataSourceMethod.value) {
-        const index = dataSource.value.methods.findIndex((method) => method.name === dataSourceMethod.value);
-        dataSource.value.methods.splice(index, 1, values);
-      } else {
-        dataSource.value.methods.push(values);
-      }
-
-      codeBlockEditor.value?.hide();
-    },
-  };
-};

package/src/layouts/PropsPanel.vue

@@ -1,131 +0,0 @@
-<template>
-  <div class="m-editor-props-panel" v-show="nodes.length === 1">
-    <slot name="props-panel-header"></slot>
-    <MForm
-      ref="configForm"
-      :class="propsPanelSize"
-      :popper-class="`m-editor-props-panel-popper ${propsPanelSize}`"
-      :size="propsPanelSize"
-      :init-values="values"
-      :config="curFormConfig"
-      :extend-state="extendState"
-      @change="submit"
-      @error="errorHandler"
-    ></MForm>
-
-    <TMagicButton
-      v-if="!disabledShowSrc"
-      class="m-editor-props-panel-src-icon"
-      circle
-      size="large"
-      title="源码"
-      :type="showSrc ? 'primary' : ''"
-      @click="showSrc = !showSrc"
-    >
-      <MIcon :icon="DocumentIcon"></MIcon>
-    </TMagicButton>
-
-    <CodeEditor
-      v-if="showSrc"
-      class="m-editor-props-panel-src-code"
-      :height="`${editorContentHeight}px`"
-      :init-values="values"
-      :options="codeOptions"
-      :parse="true"
-      @save="saveCode"
-    ></CodeEditor>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { computed, getCurrentInstance, inject, onBeforeUnmount, onMounted, ref, watchEffect } from 'vue';
-import { Document as DocumentIcon } from '@element-plus/icons-vue';
-
-import type { MNode } from '@tmagic/core';
-import { TMagicButton } from '@tmagic/design';
-import type { FormState, FormValue } from '@tmagic/form';
-import { MForm } from '@tmagic/form';
-
-import MIcon from '@editor/components/Icon.vue';
-import { useEditorContentHeight } from '@editor/hooks/use-editor-content-height';
-import type { PropsPanelSlots, Services } from '@editor/type';
-
-import CodeEditor from './CodeEditor.vue';
-
-defineSlots<PropsPanelSlots>();
-
-defineOptions({
-  name: 'MEditorPropsPanel',
-});
-
-defineProps<{
-  disabledShowSrc?: boolean;
-  extendState?: (state: FormState) => Record<string, any> | Promise<Record<string, any>>;
-}>();
-
-const codeOptions = inject('codeOptions', {});
-
-const emit = defineEmits(['mounted', 'submit-error', 'form-error']);
-
-const showSrc = ref(false);
-
-const internalInstance = getCurrentInstance();
-const values = ref<FormValue>({});
-const configForm = ref<InstanceType<typeof MForm>>();
-// ts类型应该是FormConfig， 但是打包时会出错，所以暂时用any
-const curFormConfig = ref<any>([]);
-const services = inject<Services>('services');
-const node = computed(() => services?.editorService.get('node'));
-const nodes = computed(() => services?.editorService.get('nodes') || []);
-const propsPanelSize = computed(() => services?.uiService.get('propsPanelSize') || 'small');
-const stage = computed(() => services?.editorService.get('stage'));
-
-const { height: editorContentHeight } = useEditorContentHeight();
-
-const init = async () => {
-  if (!node.value) {
-    curFormConfig.value = [];
-    return;
-  }
-
-  const type = node.value.type || (node.value.items ? 'container' : 'text');
-  curFormConfig.value = (await services?.propsService.getPropsConfig(type)) || [];
-  values.value = node.value;
-};
-
-watchEffect(init);
-services?.propsService.on('props-configs-change', init);
-
-onMounted(() => {
-  emit('mounted', internalInstance);
-});
-
-onBeforeUnmount(() => {
-  services?.propsService.off('props-configs-change', init);
-});
-
-watchEffect(() => {
-  if (configForm.value && stage.value) {
-    configForm.value.formState.stage = stage.value;
-  }
-});
-
-const submit = async () => {
-  try {
-    const values = await configForm.value?.submitForm();
-    services?.editorService.update(values);
-  } catch (e: any) {
-    emit('submit-error', e);
-  }
-};
-
-const errorHandler = (e: any) => {
-  emit('form-error', e);
-};
-
-const saveCode = (values: MNode) => {
-  services?.editorService.update(values);
-};
-
-defineExpose({ configForm, submit });
-</script>

package/src/layouts/page-bar/SwitchTypeButton.vue

@@ -1,45 +0,0 @@
-<template>
-  <TMagicButton
-    v-for="item in data"
-    class="m-editor-page-bar-switch-type-button"
-    size="small"
-    :key="item.type"
-    link
-    :class="{ active: modelValue === item.type }"
-    :type="modelValue === item.type ? 'primary' : ''"
-    @click="clickHandler(item.type)"
-    >{{ item.text }}</TMagicButton
-  >
-</template>
-
-<script setup lang="ts">
-import { NodeType } from '@tmagic/core';
-import { TMagicButton } from '@tmagic/design';
-
-defineOptions({
-  name: 'MEditorPageBarSwitchTypeButton',
-});
-
-defineProps<{
-  modelValue: NodeType.PAGE | NodeType.PAGE_FRAGMENT;
-}>();
-
-const data: { type: NodeType.PAGE | NodeType.PAGE_FRAGMENT; text: string }[] = [
-  {
-    type: NodeType.PAGE,
-    text: '页面',
-  },
-  {
-    type: NodeType.PAGE_FRAGMENT,
-    text: '页面片',
-  },
-];
-
-const emit = defineEmits<{
-  'update:modelValue': [value: NodeType.PAGE | NodeType.PAGE_FRAGMENT];
-}>();
-
-const clickHandler = (value: NodeType.PAGE | NodeType.PAGE_FRAGMENT) => {
-  emit('update:modelValue', value);
-};
-</script>