@tmagic/editor 1.3.16 → 1.4.0-beta.2

package/src/fields/CodeLink.vue

@@ -6,22 +6,22 @@
 import { computed, reactive, watch } from 'vue';
 import serialize from 'serialize-javascript';
 
-import type { FieldProps } from '@tmagic/form';
+import type { FieldProps, FormItem } from '@tmagic/form';
 
 import { getConfig } from '@editor/utils/config';
 
 defineOptions({
-  name: 'MEditorCodeLink',
+  name: 'MFieldsCodeLink',
 });
 
 const props = defineProps<
-  FieldProps<{
-    type: 'code-link';
-    name: string;
-    text?: string;
-    formTitle?: string;
-    codeOptions?: Object;
-  }>
+  FieldProps<
+    {
+      type: 'code-link';
+      formTitle?: string;
+      codeOptions?: Object;
+    } & FormItem
+  >
 >();
 
 const emit = defineEmits(['change']);

package/src/fields/CodeSelect.vue

@@ -11,14 +11,14 @@ import { computed, inject, watch } from 'vue';
 import { isEmpty } from 'lodash-es';
 
 import { TMagicCard } from '@tmagic/design';
-import type { FieldProps } from '@tmagic/form';
+import type { FieldProps, FormItem } from '@tmagic/form';
 import { FormState } from '@tmagic/form';
 import { HookCodeType, HookType } from '@tmagic/schema';
 
 import type { Services } from '@editor/type';
 
 defineOptions({
-  name: 'MEditorCodeSelect',
+  name: 'MFieldsCodeSelect',
 });
 
 const emit = defineEmits(['change']);
@@ -27,9 +27,11 @@ const services = inject<Services>('services');
 
 const props = withDefaults(
   defineProps<
-    FieldProps<{
-      className?: string;
-    }>
+    FieldProps<
+      {
+        className?: string;
+      } & FormItem
+    >
   >(),
   {},
 );

package/src/fields/CodeSelectCol.vue

@@ -49,7 +49,7 @@ import { useCodeBlockEdit } from '@editor/hooks/use-code-block-edit';
 import type { CodeParamStatement, CodeSelectColConfig, Services } from '@editor/type';
 
 defineOptions({
-  name: 'MEditorCodeSelectCol',
+  name: 'MFieldsCodeSelectCol',
 });
 
 const mForm = inject<FormState | undefined>('mForm');

package/src/fields/DataSourceFieldSelect.vue

@@ -1,23 +1,47 @@
 <template>
-  <m-form-container
-    :config="{
-      ...config,
-      ...cascaderConfig,
-    }"
-    :model="model"
-    @change="onChangeHandler"
-  ></m-form-container>
+  <div style="width: 100%; display: flex; align-items: center">
+    <component
+      style="width: 100%"
+      :is="tagName"
+      :config="showDataSourceFieldSelect || !config.fieldConfig ? cascaderConfig : config.fieldConfig"
+      :model="model"
+      :name="name"
+      :disabled="disabled"
+      :size="size"
+      :last-values="lastValues"
+      :init-values="initValues"
+      :values="values"
+      :prop="`${prop}${prop ? '.' : ''}${name}`"
+      @change="onChangeHandler"
+    ></component>
+    <TMagicButton
+      v-if="config.fieldConfig"
+      style="margin-left: 5px"
+      link
+      :type="showDataSourceFieldSelect ? 'primary' : 'default'"
+      :icon="Coin"
+      :size="size"
+      @click="showDataSourceFieldSelect = !showDataSourceFieldSelect"
+    ></TMagicButton>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { computed, inject } from 'vue';
+import { computed, inject, onMounted, ref, resolveComponent } from 'vue';
+import { Coin } from '@element-plus/icons-vue';
 
-import type { CascaderOption, FieldProps } from '@tmagic/form';
-import type { DataSchema } from '@tmagic/schema';
+import { TMagicButton } from '@tmagic/design';
+import type { CascaderConfig, CascaderOption, FieldProps, FormState } from '@tmagic/form';
+import { MCascader } from '@tmagic/form';
+import type { DataSchema, DataSourceFieldType } from '@tmagic/schema';
 import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX } from '@tmagic/utils';
 
 import type { DataSourceFieldSelectConfig, Services } from '@editor/type';
 
+defineOptions({
+  name: 'MFieldsDataSourceFieldSelect',
+});
+
 const services = inject<Services>('services');
 const emit = defineEmits(['change']);
 
@@ -27,32 +51,99 @@ const props = withDefaults(defineProps<FieldProps<DataSourceFieldSelectConfig>>(
 
 const dataSources = computed(() => services?.dataSourceService.get('dataSources'));
 
-const getOptionChildren = (fields: DataSchema[] = []): CascaderOption[] =>
-  fields.map((field) => ({
-    label: field.title || field.name,
-    value: field.name,
-    children: field.type === 'array' ? [] : getOptionChildren(field.fields),
-  }));
+const getOptionChildren = (
+  fields: DataSchema[] = [],
+  dataSourceFieldType: DataSourceFieldType[] = ['any'],
+): CascaderOption[] => {
+  const child: CascaderOption[] = [];
+  fields.forEach((field) => {
+    if (!dataSourceFieldType.length) {
+      dataSourceFieldType.push('any');
+    }
+
+    const children = getOptionChildren(field.fields, dataSourceFieldType);
+
+    const item = {
+      label: field.title || field.name,
+      value: field.name,
+      children,
+    };
+
+    const fieldType = field.type || 'any';
+    if (dataSourceFieldType.includes('any') || dataSourceFieldType.includes(fieldType)) {
+      child.push(item);
+      return;
+    }
+
+    if (!dataSourceFieldType.includes(fieldType) && fieldType !== 'object') {
+      return;
+    }
+
+    if (!children.length && ['object', 'array', 'any'].includes(field.type || '')) {
+      return;
+    }
+
+    child.push(item);
+  });
+  return child;
+};
 
-const cascaderConfig = computed(() => {
+const cascaderConfig = computed<CascaderConfig>(() => {
   const valueIsKey = props.config.value === 'key';
 
   return {
     type: 'cascader',
-    name: props.name,
-    checkStrictly: !valueIsKey,
-    text: '',
-    options: () =>
-      dataSources.value
-        ?.filter((ds) => ds.fields?.length)
-        ?.map((ds) => ({
+    checkStrictly: props.config.checkStrictly ?? !valueIsKey,
+    popperClass: 'm-editor-data-source-field-select-popper',
+    options: () => {
+      const options =
+        dataSources.value?.map((ds) => ({
           label: ds.title || ds.id,
           value: valueIsKey ? ds.id : `${DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX}${ds.id}`,
-          children: getOptionChildren(ds.fields),
-        })) || [],
+          children: getOptionChildren(ds.fields, props.config.dataSourceFieldType),
+        })) || [];
+      return options.filter((option) => option.children.length);
+    },
   };
 });
 
+const showDataSourceFieldSelect = ref(false);
+
+onMounted(() => {
+  const value = props.model[props.name];
+  if (
+    Array.isArray(value) &&
+    typeof value[0] === 'string' &&
+    value[0].startsWith(DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX)
+  ) {
+    return (showDataSourceFieldSelect.value = true);
+  }
+});
+
+const mForm = inject<FormState | undefined>('mForm');
+
+const type = computed((): string => {
+  let type = props.config.fieldConfig?.type;
+  if (typeof type === 'function') {
+    type = type(mForm, {
+      model: props.model,
+    });
+  }
+  if (type === 'form') return '';
+  if (type === 'container') return '';
+  return type?.replace(/([A-Z])/g, '-$1').toLowerCase() || (props.config.items ? '' : 'text');
+});
+
+const tagName = computed(() => {
+  if (showDataSourceFieldSelect.value || !props.config.fieldConfig) {
+    return MCascader;
+  }
+
+  const component = resolveComponent(`m-${props.config.items ? 'form' : 'fields'}-${type.value}`);
+  if (typeof component !== 'string') return component;
+  return 'm-fields-text';
+});
+
 const onChangeHandler = (value: any) => {
   emit('change', value);
 };

package/src/fields/DataSourceFields.vue

@@ -37,13 +37,13 @@ import { computed, inject, ref } from 'vue';
 import { TMagicButton, tMagicMessage, tMagicMessageBox } from '@tmagic/design';
 import { type FieldProps, type FormConfig, type FormState, MFormDrawer } from '@tmagic/form';
 import type { DataSchema } from '@tmagic/schema';
-import { MagicTable } from '@tmagic/table';
+import { type ColumnConfig, MagicTable } from '@tmagic/table';
 import { getDefaultValueFromFields } from '@tmagic/utils';
 
 import type { Services } from '@editor/type';
 
 defineOptions({
-  name: 'MEditorDataSourceFields',
+  name: 'MFieldsDataSourceFields',
 });
 
 const props = withDefaults(
@@ -86,7 +86,7 @@ const fieldChange = ({ index, ...value }: Record<string, any>) => {
   emit('change', props.model[props.name]);
 };
 
-const fieldColumns = [
+const fieldColumns: ColumnConfig[] = [
   {
     label: '属性名称',
     prop: 'title',
@@ -102,6 +102,13 @@ const fieldColumns = [
   {
     label: '默认值',
     prop: 'defaultValue',
+    formatter(item, row) {
+      try {
+        return JSON.stringify(row.defaultValue);
+      } catch (e) {
+        return row.defaultValue;
+      }
+    },
   },
   {
     label: '操作',

package/src/fields/DataSourceInput.vue

@@ -48,7 +48,7 @@ import { computed, inject, nextTick, ref, watch } from 'vue';
 import { Coin } from '@element-plus/icons-vue';
 
 import { getConfig, TMagicAutocomplete, TMagicTag } from '@tmagic/design';
-import type { FieldProps } from '@tmagic/form';
+import type { FieldProps, FormItem } from '@tmagic/form';
 import type { DataSchema, DataSourceSchema } from '@tmagic/schema';
 
 import Icon from '@editor/components/Icon.vue';
@@ -56,16 +56,16 @@ import type { Services } from '@editor/type';
 import { getDisplayField } from '@editor/utils/data-source';
 
 defineOptions({
-  name: 'MEditorDataSourceInput',
+  name: 'MFieldsDataSourceInput',
 });
 
 const props = withDefaults(
   defineProps<
-    FieldProps<{
-      type: 'data-source-input';
-      name: string;
-      text: string;
-    }>
+    FieldProps<
+      {
+        type: 'data-source-input';
+      } & FormItem
+    >
   >(),
   {
     disabled: false,

package/src/fields/DataSourceMethodSelect.vue

@@ -49,7 +49,7 @@ import { useDataSourceMethod } from '@editor/hooks/use-data-source-method';
 import type { CodeParamStatement, DataSourceMethodSelectConfig, Services } from '@editor/type';
 
 defineOptions({
-  name: 'MEditorDataSourceMethodSelect',
+  name: 'MFieldsDataSourceMethodSelect',
 });
 
 const mForm = inject<FormState | undefined>('mForm');

package/src/fields/DataSourceMethods.vue

@@ -24,14 +24,14 @@
 import { TMagicButton } from '@tmagic/design';
 import type { FieldProps } from '@tmagic/form';
 import type { CodeBlockContent } from '@tmagic/schema';
-import { MagicTable } from '@tmagic/table';
+import { type ColumnConfig, MagicTable } from '@tmagic/table';
 
 import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
 import { useDataSourceMethod } from '@editor/hooks/use-data-source-method';
 import type { CodeParamStatement } from '@editor/type';
 
 defineOptions({
-  name: 'MEditorDataSourceMethods',
+  name: 'MFieldsDataSourceMethods',
 });
 
 const props = withDefaults(
@@ -49,7 +49,7 @@ const emit = defineEmits(['change']);
 
 const { codeConfig, codeBlockEditor, createCode, editCode, deleteCode, submitCode } = useDataSourceMethod();
 
-const methodColumns = [
+const methodColumns: ColumnConfig[] = [
   {
     label: '名称',
     prop: 'name',

package/src/fields/DataSourceMocks.vue

@@ -26,14 +26,14 @@ import { computed, inject, ref } from 'vue';
 import { TMagicButton, tMagicMessageBox, TMagicSwitch } from '@tmagic/design';
 import { type FieldProps, type FormConfig, type FormState, MFormDrawer } from '@tmagic/form';
 import type { MockSchema } from '@tmagic/schema';
-import { MagicTable } from '@tmagic/table';
+import { type ColumnConfig, MagicTable } from '@tmagic/table';
 import { getDefaultValueFromFields } from '@tmagic/utils';
 
 import CodeEditor from '@editor/layouts/CodeEditor.vue';
 import { Services } from '@editor/type';
 
 defineOptions({
-  name: 'MEditorDataSourceMocks',
+  name: 'MFieldsDataSourceMocks',
 });
 
 const props = withDefaults(
@@ -117,7 +117,7 @@ const formConfig: FormConfig = [
   },
 ];
 
-const columns = [
+const columns: ColumnConfig[] = [
   {
     type: 'expand',
     component: CodeEditor,

package/src/fields/DataSourceSelect.vue

@@ -14,31 +14,19 @@
 <script setup lang="ts">
 import { computed, inject } from 'vue';
 
-import { FieldProps, MSelect, SelectConfig } from '@tmagic/form';
+import { type FieldProps, MSelect, type SelectConfig } from '@tmagic/form';
 
-import { Services } from '../type';
+import type { DataSourceSelect, Services } from '../type';
 
 defineOptions({
-  name: 'MEditorDataSourceSelect',
+  name: 'MFieldsDataSourceSelect',
 });
 
 const emit = defineEmits(['change']);
 
-const props = withDefaults(
-  defineProps<
-    FieldProps<{
-      type: 'data-source-select';
-      name: string;
-      text?: string;
-      placeholder?: string;
-      dataSourceType?: string;
-      value?: 'id' | 'value';
-    }>
-  >(),
-  {
-    disabled: false,
-  },
-);
+const props = withDefaults(defineProps<FieldProps<DataSourceSelect>>(), {
+  disabled: false,
+});
 
 const { dataSourceService } = inject<Services>('services') || {};
 

package/src/fields/EventSelect.vue

@@ -61,7 +61,7 @@ import { ActionType } from '@tmagic/schema';
 import type { CodeSelectColConfig, DataSourceMethodSelectConfig, EventSelectConfig, Services } from '@editor/type';
 
 defineOptions({
-  name: 'MEditorEventSelect',
+  name: 'MFieldsEventSelect',
 });
 
 const props = defineProps<FieldProps<EventSelectConfig>>();

package/src/fields/KeyValue.vue

@@ -63,23 +63,23 @@ import { ref, watchEffect } from 'vue';
 import { Delete, Plus } from '@element-plus/icons-vue';
 
 import { TMagicButton, TMagicInput } from '@tmagic/design';
-import type { FieldProps } from '@tmagic/form';
+import type { FieldProps, FormItem } from '@tmagic/form';
 
 import CodeIcon from '@editor/icons/CodeIcon.vue';
 import MagicCodeEditor from '@editor/layouts/CodeEditor.vue';
 
 defineOptions({
-  name: 'MEditorKeyValue',
+  name: 'MFieldsKeyValue',
 });
 
 const props = withDefaults(
   defineProps<
-    FieldProps<{
-      type: 'key-value';
-      name: string;
-      text: string;
-      advanced?: boolean;
-    }>
+    FieldProps<
+      {
+        type: 'key-value';
+        advanced?: boolean;
+      } & FormItem
+    >
   >(),
   {
     disabled: false,

package/src/fields/PageFragmentSelect.vue

@@ -26,7 +26,7 @@ import Icon from '@editor/components/Icon.vue';
 import type { PageFragmentSelectConfig, Services } from '@editor/type';
 
 defineOptions({
-  name: 'MEditorPageFragmentSelect',
+  name: 'MFieldsPageFragmentSelect',
 });
 
 const services = inject<Services>('services');

package/src/fields/UISelect.vue

@@ -26,7 +26,7 @@
           :size="size"
           @click="selectNode(val)"
           @mouseenter="highlight(val)"
-          @mouseleave="unhightlight"
+          @mouseleave="unhighlight"
           >{{ `${toName}_${val}` }}</TMagicButton
         >
       </TMagicTooltip>
@@ -46,16 +46,16 @@ import { Close, Delete } from '@element-plus/icons-vue';
 import { throttle } from 'lodash-es';
 
 import { TMagicButton, TMagicTooltip } from '@tmagic/design';
-import type { FieldProps, FormState } from '@tmagic/form';
+import type { FieldProps, FormItem, FormState } from '@tmagic/form';
 import type { Id } from '@tmagic/schema';
 
 import { Services, UI_SELECT_MODE_EVENT_NAME } from '@editor/type';
 
 defineOptions({
-  name: 'MEditorUISelect',
+  name: 'MFieldsUISelect',
 });
 
-const props = defineProps<FieldProps<any>>();
+const props = defineProps<FieldProps<{ type: 'ui-select' } & FormItem>>();
 
 const emit = defineEmits(['change']);
 
@@ -115,7 +115,7 @@ const highlight = throttle((id: Id) => {
   services?.stageOverlayService.get('stage')?.highlight(id);
 }, 150);
 
-const unhightlight = () => {
+const unhighlight = () => {
   services?.editorService.set('highlightNode', null);
   services?.editorService.get('stage')?.clearHighlight();
   services?.stageOverlayService.get('stage')?.clearHighlight();

package/src/hooks/index.ts

@@ -20,3 +20,5 @@ export * from './use-code-block-edit';
 export * from './use-data-source-method';
 export * from './use-stage';
 export * from './use-float-box';
+export * from './use-window-rect';
+export * from './use-editor-content-height';

package/src/hooks/use-code-block-edit.ts

@@ -20,7 +20,7 @@ export const useCodeBlockEdit = (codeBlockService?: CodeBlockService) => {
     }
 
     codeConfig.value = {
-      name: '代码块',
+      name: '',
       content: `({app, params}) => {\n  // place your code here\n}`,
       params: [],
     };
@@ -54,7 +54,6 @@ export const useCodeBlockEdit = (codeBlockService?: CodeBlockService) => {
     codeId.value = id;
 
     await nextTick();
-
     codeBlockEditor.value?.show();
   };
 

package/src/hooks/use-editor-content-height.ts

@@ -0,0 +1,20 @@
+import { computed, inject, ref, watchEffect } from 'vue';
+
+import type { Services } from '@editor/type';
+
+export const useEditorContentHeight = () => {
+  const services = inject<Services>('services');
+  const frameworkHeight = computed(() => services?.uiService.get('frameworkRect').height || 0);
+  const navMenuHeight = computed(() => services?.uiService.get('navMenuRect').height || 0);
+  const editorContentHeight = computed(() => frameworkHeight.value - navMenuHeight.value);
+
+  const height = ref(0);
+  watchEffect(() => {
+    if (height.value > 0) return;
+    height.value = editorContentHeight.value;
+  });
+
+  return {
+    height,
+  };
+};

package/src/hooks/use-float-box.ts

@@ -26,34 +26,34 @@ export const useFloatBox = (slideKeys: ComputedRef<string[]>) => {
   const showingBoxKeys = computed(() =>
     Object.keys(floatBoxStates.value).filter((key) => floatBoxStates.value[key].status),
   );
-  const isDraging = ref(false);
+  const isDragging = ref(false);
 
-  const dragstartHandler = () => (isDraging.value = true);
+  const dragstartHandler = () => (isDragging.value = true);
   const dragendHandler = (key: string, e: DragEvent) => {
     floatBoxStates.value[key] = {
       left: e.clientX,
       top: e.clientY,
       status: true,
     };
-    isDraging.value = false;
+    isDragging.value = false;
   };
 
   document.body.addEventListener('dragover', (e: DragEvent) => {
-    if (!isDraging.value) return;
+    if (!isDragging.value) return;
     e.preventDefault();
   });
 
   watch(
     () => slideKeys.value,
-    () => {
-      for (const key in slideKeys.value) {
-        if (floatBoxStates.value[key]) continue;
+    (slideKeys) => {
+      slideKeys.forEach((key) => {
+        if (floatBoxStates.value[key]) return;
         floatBoxStates.value[key] = {
           status: false,
           top: 0,
           left: 0,
         };
-      }
+      });
     },
     {
       deep: true,

package/src/hooks/use-window-rect.ts

@@ -0,0 +1,20 @@
+import { onBeforeUnmount, reactive } from 'vue';
+
+export const useWindowRect = () => {
+  const rect = reactive({ width: globalThis.innerWidth, height: globalThis.innerHeight });
+
+  const windowResizeHandler = () => {
+    rect.width = globalThis.innerWidth;
+    rect.height = globalThis.innerHeight;
+  };
+
+  globalThis.addEventListener('resize', windowResizeHandler);
+
+  onBeforeUnmount(() => {
+    globalThis.removeEventListener('resize', windowResizeHandler);
+  });
+
+  return {
+    rect,
+  };
+};

package/src/index.ts

@@ -96,11 +96,11 @@ export default {
     // eslint-disable-next-line no-param-reassign
     app.config.globalProperties.$TMAGIC_EDITOR = option;
     setConfig(option);
-    app.component(Editor.name, Editor);
+    app.component(`${Editor.name || 'MEditor'}`, Editor);
+    app.component('magic-code-editor', CodeEditor);
     app.component('m-fields-ui-select', uiSelect);
     app.component('m-fields-code-link', CodeLink);
     app.component('m-fields-vs-code', Code);
-    app.component('magic-code-editor', CodeEditor);
     app.component('m-fields-code-select', CodeSelect);
     app.component('m-fields-code-select-col', CodeSelectCol);
     app.component('m-fields-event-select', EventSelect);