@tmagic/editor 1.3.0-alpha.16 → 1.3.0-alpha.18

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.0-alpha.16",
+  "version": "1.3.0-alpha.18",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -46,27 +46,27 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons-vue": "^2.0.9",
-    "@tmagic/core": "1.3.0-alpha.16",
-    "@tmagic/design": "1.3.0-alpha.16",
-    "@tmagic/form": "1.3.0-alpha.16",
-    "@tmagic/schema": "1.3.0-alpha.16",
-    "@tmagic/stage": "1.3.0-alpha.16",
-    "@tmagic/table": "1.3.0-alpha.16",
-    "@tmagic/utils": "1.3.0-alpha.16",
+    "@tmagic/core": "1.3.0-alpha.18",
+    "@tmagic/design": "1.3.0-alpha.18",
+    "@tmagic/form": "1.3.0-alpha.18",
+    "@tmagic/schema": "1.3.0-alpha.18",
+    "@tmagic/stage": "1.3.0-alpha.18",
+    "@tmagic/table": "1.3.0-alpha.18",
+    "@tmagic/utils": "1.3.0-alpha.18",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "events": "^3.3.0",
     "gesto": "^1.19.1",
     "keycon": "^1.4.0",
     "lodash-es": "^4.17.21",
-    "monaco-editor": "^0.39.0",
+    "monaco-editor": "^0.41.0",
     "serialize-javascript": "^6.0.0",
     "vue": "^3.3.4"
   },
   "peerDependencies": {
-    "@tmagic/design": "1.3.0-alpha.16",
-    "@tmagic/form": "1.3.0-alpha.16",
-    "monaco-editor": "^0.39.0",
+    "@tmagic/design": "1.3.0-alpha.18",
+    "@tmagic/form": "1.3.0-alpha.18",
+    "monaco-editor": "^0.41.0",
     "vue": "^3.3.4"
   },
   "devDependencies": {

package/src/components/CodeBlockEditor.vue

@@ -2,6 +2,7 @@
   <MFormDrawer
     ref="fomDrawer"
     label-width="80px"
+    :close-on-press-escape="false"
     :title="content.name"
     :width="size"
     :config="functionConfig"

package/src/fields/Code.vue

@@ -12,6 +12,8 @@
 </template>
 
 <script lang="ts" setup>
+import type { FieldProps } from '@tmagic/form';
+
 import MagicCodeEditor from '@editor/layouts/CodeEditor.vue';
 
 defineOptions({
@@ -21,19 +23,13 @@ defineOptions({
 const emit = defineEmits(['change']);
 
 const props = withDefaults(
-  defineProps<{
-    config: {
+  defineProps<
+    FieldProps<{
       language?: string;
       options?: Object;
       height?: string;
-    };
-    model: any;
-    name: string;
-    prop: string;
-    lastValues?: any;
-    disabled?: boolean;
-    size?: 'small' | 'default' | 'large';
-  }>(),
+    }>
+  >(),
   {
     disabled: false,
   },

package/src/fields/CodeLink.vue

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

package/src/fields/CodeSelect.vue

@@ -11,6 +11,7 @@ import { computed, inject, watch } from 'vue';
 import { isEmpty } from 'lodash-es';
 
 import { TMagicCard } from '@tmagic/design';
+import type { FieldProps } from '@tmagic/form';
 import { HookType } from '@tmagic/schema';
 
 import type { Services } from '@editor/type';
@@ -24,15 +25,11 @@ const emit = defineEmits(['change']);
 const services = inject<Services>('services');
 
 const props = withDefaults(
-  defineProps<{
-    config: {
+  defineProps<
+    FieldProps<{
       className?: string;
-    };
-    model: any;
-    prop: string;
-    name: string;
-    size: 'small' | 'default' | 'large';
-  }>(),
+    }>
+  >(),
   {},
 );
 

package/src/fields/CodeSelectCol.vue

@@ -37,7 +37,7 @@ import { computed, inject, ref } from 'vue';
 import { Edit, View } from '@element-plus/icons-vue';
 import { isEmpty, map } from 'lodash-es';
 
-import { createValues } from '@tmagic/form';
+import { createValues, FieldProps } from '@tmagic/form';
 import type { Id } from '@tmagic/schema';
 
 import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
@@ -53,20 +53,9 @@ defineOptions({
 const services = inject<Services>('services');
 const emit = defineEmits(['change']);
 
-const props = withDefaults(
-  defineProps<{
-    config: CodeSelectColConfig;
-    model: any;
-    prop: string;
-    name: string;
-    lastValues?: any;
-    disabled?: boolean;
-    size: 'small' | 'default' | 'large';
-  }>(),
-  {
-    disabled: false,
-  },
-);
+const props = withDefaults(defineProps<FieldProps<CodeSelectColConfig>>(), {
+  disabled: false,
+});
 
 /**
  * 根据代码块id获取代码块参数配置

package/src/fields/DataSourceFieldSelect.vue

@@ -0,0 +1,47 @@
+<template>
+  <m-form-container
+    :config="{
+      ...config,
+      ...cascaderConfig,
+    }"
+    :model="model"
+    @change="onChangeHandler"
+  ></m-form-container>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+
+import type { FieldProps } from '@tmagic/form';
+
+import type { DataSourceFieldSelectConfig, Services } from '@editor/type';
+
+const services = inject<Services>('services');
+const emit = defineEmits(['change']);
+
+const props = withDefaults(defineProps<FieldProps<DataSourceFieldSelectConfig>>(), {
+  disabled: false,
+});
+
+const dataSources = computed(() => services?.dataSourceService.get('dataSources'));
+
+const cascaderConfig = {
+  type: 'cascader',
+  name: props.name,
+  options: () =>
+    dataSources.value
+      ?.filter((ds) => ds.fields?.length)
+      ?.map((ds) => ({
+        label: ds.title || ds.id,
+        value: ds.id,
+        children: ds.fields?.map((field) => ({
+          label: field.title,
+          value: field.name,
+        })),
+      })) || [],
+};
+
+const onChangeHandler = (value: any) => {
+  emit('change', value);
+};
+</script>

package/src/fields/DataSourceFields.vue

@@ -22,7 +22,7 @@
 import { ref } from 'vue';
 
 import { TMagicButton, tMagicMessageBox } from '@tmagic/design';
-import { FormConfig, FormState, MFormDialog } from '@tmagic/form';
+import { FieldProps, FormConfig, FormState, MFormDialog } from '@tmagic/form';
 import { MagicTable } from '@tmagic/table';
 
 defineOptions({
@@ -30,16 +30,11 @@ defineOptions({
 });
 
 const props = withDefaults(
-  defineProps<{
-    config: {
+  defineProps<
+    FieldProps<{
       type: 'data-source-fields';
-    };
-    model: any;
-    prop: string;
-    lastValues?: any;
-    disabled: boolean;
-    name: string;
-  }>(),
+    }>
+  >(),
   {
     disabled: false,
   },

package/src/fields/DataSourceInput.vue

@@ -48,7 +48,8 @@
 import { computed, inject, nextTick, ref, watch } from 'vue';
 import { Coin } from '@element-plus/icons-vue';
 
-import { FieldSize, getConfig, TMagicAutocomplete, TMagicTag } from '@tmagic/design';
+import { getConfig, TMagicAutocomplete, TMagicTag } from '@tmagic/design';
+import type { FieldProps } from '@tmagic/form';
 import type { DataSchema, DataSourceSchema } from '@tmagic/schema';
 
 import Icon from '@editor/components/Icon.vue';
@@ -59,25 +60,21 @@ defineOptions({
 });
 
 const props = withDefaults(
-  defineProps<{
-    config: {
+  defineProps<
+    FieldProps<{
       type: 'data-source-input';
       name: string;
       text: string;
-    };
-    model: Record<string, any>;
-    name: string;
-    prop: string;
-    disabled: boolean;
-    lastValues?: Record<string, any>;
-    size?: FieldSize;
-  }>(),
+    }>
+  >(),
   {
     disabled: false,
   },
 );
 
-const emit = defineEmits<(e: 'change', value: string) => void>();
+const emit = defineEmits<{
+  change: [value: string];
+}>();
 
 const { dataSourceService } = inject<Services>('services') || {};
 

package/src/fields/DataSourceMethodSelect.vue

@@ -34,7 +34,7 @@
 import { computed, inject, ref } from 'vue';
 import { Edit, View } from '@element-plus/icons-vue';
 
-import { createValues } from '@tmagic/form';
+import { createValues, FieldProps } from '@tmagic/form';
 import type { CodeBlockContent, Id } from '@tmagic/schema';
 
 import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
@@ -50,20 +50,9 @@ defineOptions({
 const services = inject<Services>('services');
 const emit = defineEmits(['change']);
 
-const props = withDefaults(
-  defineProps<{
-    config: DataSourceMethodSelectConfig;
-    model: any;
-    lastValues?: any;
-    prop: string;
-    name: string;
-    disabled?: boolean;
-    size: 'small' | 'default' | 'large';
-  }>(),
-  {
-    disabled: false,
-  },
-);
+const props = withDefaults(defineProps<FieldProps<DataSourceMethodSelectConfig>>(), {
+  disabled: false,
+});
 
 const dataSources = computed(() => services?.dataSourceService.get('dataSources'));
 
@@ -105,7 +94,7 @@ const cascaderConfig = {
     dataSources.value
       ?.filter((ds) => ds.methods?.length)
       ?.map((ds) => ({
-        label: `${ds.title}（${ds.id}）`,
+        label: ds.title || ds.id,
         value: ds.id,
         children: ds.methods?.map((method) => ({
           label: method.name,

package/src/fields/DataSourceMethods.vue

@@ -20,29 +20,24 @@
 
 <script setup lang="ts">
 import { TMagicButton } from '@tmagic/design';
+import type { FieldProps } from '@tmagic/form';
 import type { CodeBlockContent } from '@tmagic/schema';
 import { MagicTable } from '@tmagic/table';
 
 import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
+import type { CodeParamStatement } from '@editor/type';
 import { useDataSourceMethod } from '@editor/utils/use-data-source-method';
 
-import { CodeParamStatement } from '..';
-
 defineOptions({
   name: 'MEditorDataSourceMethods',
 });
 
 const props = withDefaults(
-  defineProps<{
-    config: {
+  defineProps<
+    FieldProps<{
       type: 'data-source-methods';
-    };
-    model: any;
-    prop: string;
-    lastValues?: any;
-    disabled: boolean;
-    name: string;
-  }>(),
+    }>
+  >(),
   {
     disabled: false,
   },

package/src/fields/DataSourceSelect.vue

@@ -14,8 +14,7 @@
 <script setup lang="ts">
 import { computed, inject } from 'vue';
 
-import { FieldSize } from '@tmagic/design';
-import { MSelect, SelectConfig } from '@tmagic/form';
+import { FieldProps, MSelect, SelectConfig } from '@tmagic/form';
 
 import { Services } from '../type';
 
@@ -26,21 +25,15 @@ defineOptions({
 const emit = defineEmits(['change']);
 
 const props = withDefaults(
-  defineProps<{
-    config: {
+  defineProps<
+    FieldProps<{
       type: 'data-source-select';
       name: string;
       text: string;
       placeholder: string;
       dataSourceType?: string;
-    };
-    model: Record<string, any>;
-    name: string;
-    prop: string;
-    disabled: boolean;
-    lastValues?: Record<string, any>;
-    size?: FieldSize;
-  }>(),
+    }>
+  >(),
   {
     disabled: false,
   },

package/src/fields/EventSelect.vue

@@ -3,18 +3,23 @@
     <m-form-table
       v-if="isOldVersion"
       ref="eventForm"
-      :size="props.size"
-      :model="model"
       name="events"
+      :size="size"
+      :disabled="disabled"
+      :model="model"
       :config="tableConfig"
       @change="onChangeHandler"
     ></m-form-table>
 
     <div v-else class="fullWidth">
-      <TMagicButton class="create-button" type="primary" size="small" @click="addEvent()">添加事件</TMagicButton>
+      <TMagicButton class="create-button" type="primary" :size="size" :disabled="disabled" @click="addEvent()"
+        >添加事件</TMagicButton
+      >
       <m-form-panel
         v-for="(cardItem, index) in model[name]"
         :key="index"
+        :disabled="disabled"
+        :size="size"
         :config="actionsConfig"
         :model="cardItem"
         @change="onChangeHandler"
@@ -24,9 +29,18 @@
             class="fullWidth"
             :config="eventNameConfig"
             :model="cardItem"
+            :disabled="disabled"
+            :size="size"
             @change="onChangeHandler"
           ></m-form-container>
-          <TMagicButton style="color: #f56c6c" text :icon="Delete" @click="removeEvent(index)"></TMagicButton>
+          <TMagicButton
+            style="color: #f56c6c"
+            text
+            :icon="Delete"
+            :disabled="disabled"
+            :size="size"
+            @click="removeEvent(index)"
+          ></TMagicButton>
         </template>
       </m-form-panel>
     </div>
@@ -39,7 +53,7 @@ import { Delete } from '@element-plus/icons-vue';
 import { has } from 'lodash-es';
 
 import { TMagicButton } from '@tmagic/design';
-import { FormState } from '@tmagic/form';
+import type { FieldProps, FormState } from '@tmagic/form';
 import { ActionType } from '@tmagic/schema';
 
 import type { CodeSelectColConfig, DataSourceMethodSelectConfig, EventSelectConfig, Services } from '@editor/type';
@@ -48,13 +62,7 @@ defineOptions({
   name: 'MEditorEventSelect',
 });
 
-const props = defineProps<{
-  config: EventSelectConfig;
-  model: any;
-  prop: string;
-  name: string;
-  size: 'small' | 'default' | 'large';
-}>();
+const props = defineProps<FieldProps<EventSelectConfig>>();
 
 const emit = defineEmits(['change']);
 

package/src/fields/KeyValue.vue

@@ -21,6 +21,7 @@
         class="m-fileds-key-value-delete"
         type="danger"
         :size="size"
+        :disabled="disabled"
         circle
         plain
         :icon="Delete"
@@ -28,7 +29,9 @@
       ></TMagicButton>
     </div>
 
-    <TMagicButton type="primary" :size="size" plain :icon="Plus" @click="addHandler">添加</TMagicButton>
+    <TMagicButton type="primary" :size="size" :disabled="disabled" plain :icon="Plus" @click="addHandler"
+      >添加</TMagicButton
+    >
   </div>
 </template>
 
@@ -37,25 +40,20 @@ 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';
 
 defineOptions({
   name: 'MEditorKeyValue',
 });
 
 const props = withDefaults(
-  defineProps<{
-    config: {
+  defineProps<
+    FieldProps<{
       type: 'key-value';
       name: string;
       text: string;
-    };
-    model: Record<string, any>;
-    name: string;
-    prop: string;
-    disabled: boolean;
-    lastValues?: Record<string, any>;
-    size?: 'large' | 'default' | 'small';
-  }>(),
+    }>
+  >(),
   {
     disabled: false,
   },

package/src/fields/UISelect.vue

@@ -1,17 +1,29 @@
 <template>
   <div class="m-fields-ui-select" v-if="uiSelectMode" @click="cancelHandler">
-    <TMagicButton type="danger" :icon="Delete" text style="padding: 0">取消</TMagicButton>
+    <TMagicButton type="danger" :icon="Delete" :disabled="disabled" :size="size" text style="padding: 0"
+      >取消</TMagicButton
+    >
   </div>
   <div class="m-fields-ui-select" v-else style="display: flex">
     <template v-if="val">
       <TMagicTooltip content="清除" placement="top">
-        <TMagicButton style="padding: 0" type="danger" :icon="Close" text @click.stop="deleteHandler"></TMagicButton>
+        <TMagicButton
+          style="padding: 0"
+          type="danger"
+          :icon="Close"
+          :disabled="disabled"
+          :size="size"
+          text
+          @click.stop="deleteHandler"
+        ></TMagicButton>
       </TMagicTooltip>
 
       <TMagicTooltip content="点击选中组件" placement="top">
         <TMagicButton
           text
           style="padding: 0; margin: 0"
+          :disabled="disabled"
+          :size="size"
           @click="selectNode(val)"
           @mouseenter="highlight(val)"
           @mouseleave="unhightlight"
@@ -21,7 +33,9 @@
     </template>
 
     <TMagicTooltip v-else content="点击此处选择" placement="top">
-      <TMagicButton text style="padding: 0; margin: 0" @click="startSelect">点击此处选择</TMagicButton>
+      <TMagicButton text style="padding: 0; margin: 0" :disabled="disabled" :size="size" @click="startSelect"
+        >点击此处选择</TMagicButton
+      >
     </TMagicTooltip>
   </div>
 </template>
@@ -32,7 +46,7 @@ import { Close, Delete } from '@element-plus/icons-vue';
 import { throttle } from 'lodash-es';
 
 import { TMagicButton, TMagicTooltip } from '@tmagic/design';
-import { FormState } from '@tmagic/form';
+import type { FieldProps, FormState } from '@tmagic/form';
 import type { Id } from '@tmagic/schema';
 
 import type { Services } from '@editor/type';
@@ -41,12 +55,7 @@ defineOptions({
   name: 'MEditorUISelect',
 });
 
-const props = defineProps<{
-  config: any;
-  model: any;
-  prop: string;
-  name: string;
-}>();
+const props = defineProps<FieldProps<any>>();
 
 const emit = defineEmits(['change']);
 

package/src/index.ts

@@ -22,6 +22,7 @@ import CodeLink from './fields/CodeLink.vue';
 import CodeSelect from './fields/CodeSelect.vue';
 import CodeSelectCol from './fields/CodeSelectCol.vue';
 import DataSourceFields from './fields/DataSourceFields.vue';
+import DataSourceFieldSelect from './fields/DataSourceFieldSelect.vue';
 import DataSourceInput from './fields/DataSourceInput.vue';
 import DataSourceMethods from './fields/DataSourceMethods.vue';
 import DataSourceMethodSelect from './fields/DataSourceMethodSelect.vue';
@@ -59,6 +60,7 @@ export { default as DataSourceMethods } from './fields/DataSourceMethods.vue';
 export { default as DataSourceInput } from './fields/DataSourceInput.vue';
 export { default as DataSourceSelect } from './fields/DataSourceSelect.vue';
 export { default as DataSourceMethodSelect } from './fields/DataSourceMethodSelect.vue';
+export { default as DataSourceFieldSelect } from './fields/DataSourceFieldSelect.vue';
 export { default as EventSelect } from './fields/EventSelect.vue';
 export { default as KeyValue } from './fields/KeyValue.vue';
 export { default as CodeBlockList } from './layouts/sidebar/code-block/CodeBlockList.vue';
@@ -98,5 +100,6 @@ export default {
     app.component('m-fields-data-source-select', DataSourceSelect);
     app.component('m-fields-data-source-methods', DataSourceMethods);
     app.component('m-fields-data-source-method-select', DataSourceMethodSelect);
+    app.component('m-fields-data-source-field-select', DataSourceFieldSelect);
   },
 };