@tmagic/editor 1.3.0-alpha.21 → 1.3.0-alpha.22

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.0-alpha.21",
+  "version": "1.3.0-alpha.22",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -46,13 +46,13 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons-vue": "^2.0.9",
-    "@tmagic/core": "1.3.0-alpha.21",
-    "@tmagic/design": "1.3.0-alpha.21",
-    "@tmagic/form": "1.3.0-alpha.21",
-    "@tmagic/schema": "1.3.0-alpha.21",
-    "@tmagic/stage": "1.3.0-alpha.21",
-    "@tmagic/table": "1.3.0-alpha.21",
-    "@tmagic/utils": "1.3.0-alpha.21",
+    "@tmagic/core": "1.3.0-alpha.22",
+    "@tmagic/design": "1.3.0-alpha.22",
+    "@tmagic/form": "1.3.0-alpha.22",
+    "@tmagic/schema": "1.3.0-alpha.22",
+    "@tmagic/stage": "1.3.0-alpha.22",
+    "@tmagic/table": "1.3.0-alpha.22",
+    "@tmagic/utils": "1.3.0-alpha.22",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "events": "^3.3.0",
@@ -64,8 +64,8 @@
     "vue": "^3.3.4"
   },
   "peerDependencies": {
-    "@tmagic/design": "1.3.0-alpha.21",
-    "@tmagic/form": "1.3.0-alpha.21",
+    "@tmagic/design": "1.3.0-alpha.22",
+    "@tmagic/form": "1.3.0-alpha.22",
     "monaco-editor": "^0.41.0",
     "vue": "^3.3.4"
   },

package/src/fields/DataSourceFields.vue

@@ -14,18 +14,21 @@
       :values="fieldValues"
       :parentValues="model[name]"
       :disabled="disabled"
+      :width="width"
       @submit="fieldChange"
     ></MFormDrawer>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { computed, inject, ref } from 'vue';
 
 import { TMagicButton, tMagicMessageBox } from '@tmagic/design';
-import { FieldProps, FormConfig, FormState, MFormDrawer } from '@tmagic/form';
+import { type FieldProps, type FormConfig, type FormState, MFormDrawer } from '@tmagic/form';
 import { MagicTable } from '@tmagic/table';
 
+import type { Services } from '@editor/type';
+
 defineOptions({
   name: 'MEditorDataSourceFields',
 });
@@ -43,10 +46,14 @@ const props = withDefaults(
 
 const emit = defineEmits(['change']);
 
+const services = inject<Services>('services');
+
 const addDialog = ref<InstanceType<typeof MFormDrawer>>();
 const fieldValues = ref<Record<string, any>>({});
 const filedTitle = ref('');
 
+const width = computed(() => globalThis.document.body.clientWidth - (services?.uiService.get('columnWidth').left || 0));
+
 const newHandler = () => {
   fieldValues.value = {};
   filedTitle.value = '新增属性';

package/src/fields/DataSourceInput.vue

@@ -16,7 +16,6 @@
     "
     style="width: 100%"
     @blur="blurHandler"
-    @change="changeHandler"
     @input="inputHandler"
     @select="selectHandler"
   >
@@ -111,6 +110,8 @@ const blurHandler = () => {
   isFocused.value = false;
 
   setDisplayState();
+
+  emit('change', state.value);
 };
 
 const changeHandler = (v: string) => {
@@ -314,5 +315,7 @@ const selectHandler = async ({ value, type }: { value: string; type: 'dataSource
     newSelectionStart = dotIndex + suggestText.length + 1;
   }
   input.value?.setSelectionRange(newSelectionStart, newSelectionStart);
+
+  changeHandler(state.value);
 };
 </script>

package/src/layouts/sidebar/code-block/CodeBlockListPanel.vue

@@ -6,6 +6,7 @@
         <TMagicButton v-if="editable" class="create-code-button" type="primary" size="small" @click="createCodeBlock"
           >新增</TMagicButton
         >
+        <slot name="code-block-panel-search"></slot>
       </div>
     </slot>
 

package/src/layouts/sidebar/data-source/DataSourceListPanel.vue

@@ -2,7 +2,24 @@
   <TMagicScrollbar class="data-source-list-panel m-editor-dep-list-panel">
     <div class="search-wrapper">
       <SearchInput @search="filterTextChangeHandler"></SearchInput>
-      <TMagicButton v-if="editable" type="primary" size="small" @click="addHandler">新增</TMagicButton>
+      <TMagicPopover v-if="editable" placement="right">
+        <template #reference>
+          <TMagicButton type="primary" size="small">新增</TMagicButton>
+        </template>
+        <div class="data-source-list-panel-add-menu">
+          <ToolButton
+            v-for="(item, index) in datasourceTypeList"
+            :data="{
+              type: 'button',
+              text: item.text,
+              handler: () => {
+                addHandler(item.type);
+              },
+            }"
+            :key="index"
+          ></ToolButton>
+        </div>
+      </TMagicPopover>
     </div>
 
     <!-- 数据源列表 -->
@@ -12,7 +29,7 @@
       ref="editDialog"
       :disabled="!editable"
       :values="dataSourceValues"
-      :title="typeof dataSourceValues.id !== 'undefined' ? `编辑${dataSourceValues.title}` : '新增'"
+      :title="dialogTitle"
       @submit="submitDataSourceHandler"
     ></DataSourceConfigPanel>
   </TMagicScrollbar>
@@ -21,10 +38,11 @@
 <script setup lang="ts" name="MEditorDataSourceListPanel">
 import { computed, inject, ref } from 'vue';
 
-import { TMagicButton, TMagicScrollbar } from '@tmagic/design';
+import { TMagicButton, TMagicPopover, TMagicScrollbar } from '@tmagic/design';
 import type { DataSourceSchema } from '@tmagic/schema';
 
 import SearchInput from '@editor/components/SearchInput.vue';
+import ToolButton from '@editor/components/ToolButton.vue';
 import type { Services } from '@editor/type';
 
 import DataSourceConfigPanel from './DataSourceConfigPanel.vue';
@@ -40,12 +58,26 @@ const editDialog = ref<InstanceType<typeof DataSourceConfigPanel>>();
 
 const dataSourceValues = ref<Record<string, any>>({});
 
-const editable = computed(() => dataSourceService?.get('editable') ?? true);
+const dialogTitle = ref('');
 
-const addHandler = () => {
+const editable = computed(() => dataSourceService?.get('editable') ?? true);
+const datasourceTypeList = computed(() =>
+  [
+    { text: '基础', type: 'base' },
+    { text: 'HTTP', type: 'http' },
+  ].concat(dataSourceService?.get('datasourceTypeList') ?? []),
+);
+
+const addHandler = (type: string) => {
   if (!editDialog.value) return;
 
-  dataSourceValues.value = {};
+  dataSourceValues.value = {
+    type,
+  };
+
+  const datasourceType = datasourceTypeList.value.find((item) => item.type === type);
+
+  dialogTitle.value = `新增${datasourceType?.text || ''}`;
 
   editDialog.value.show();
 };
@@ -57,6 +89,8 @@ const editHandler = (id: string) => {
     ...dataSourceService?.getDataSourceById(id),
   };
 
+  dialogTitle.value = `新增${dataSourceValues.value.title || ''}`;
+
   editDialog.value.show();
 };
 

package/src/services/dataSource.ts

@@ -37,7 +37,7 @@ class DataSource extends BaseService {
   }
 
   public getFormConfig(type = 'base') {
-    return getFormConfig(type, this.get('datasourceTypeList'), this.get('configs'));
+    return getFormConfig(type, this.get('configs'));
   }
 
   public setFormConfig(type: string, config: FormConfig) {

package/src/theme/data-source.scss

@@ -15,3 +15,14 @@
     }
   }
 }
+
+.data-source-list-panel-add-menu {
+  .tmagic-design-button {
+    width: 100%;
+    text-align: left;
+
+    span {
+      width: 100%;
+    }
+  }
+}

package/src/utils/data-source/formConfigs/base.ts

@@ -1,8 +1,6 @@
 import type { FormConfig } from '@tmagic/form';
 
-import type { DatasourceTypeOption } from '@editor/type';
-
-export default function (datasourceTypeList: DatasourceTypeOption[] = []): FormConfig {
+export default function (): FormConfig {
   return [
     {
       name: 'id',
@@ -11,12 +9,7 @@ export default function (datasourceTypeList: DatasourceTypeOption[] = []): FormC
     {
       name: 'type',
       text: '类型',
-      type: 'select',
-      options: [
-        { text: '基础', value: 'base' },
-        { text: 'HTTP', value: 'http' },
-        ...datasourceTypeList.map((item) => ({ text: item.text, value: item.type })),
-      ],
+      type: 'hidden',
       defaultValue: 'base',
     },
     {

package/src/utils/data-source/index.ts

@@ -1,13 +1,11 @@
 import { FormConfig } from '@tmagic/form';
 import { DataSchema, DataSourceSchema } from '@tmagic/schema';
 
-import { DatasourceTypeOption } from '@editor/type';
-
 import BaseFormConfig from './formConfigs/base';
 import HttpFormConfig from './formConfigs/http';
 
-const fillConfig = (config: FormConfig, datasourceTypeList: DatasourceTypeOption[]): FormConfig => [
-  ...BaseFormConfig(datasourceTypeList),
+const fillConfig = (config: FormConfig): FormConfig => [
+  ...BaseFormConfig(),
   ...config,
   {
     type: 'panel',
@@ -16,7 +14,7 @@ const fillConfig = (config: FormConfig, datasourceTypeList: DatasourceTypeOption
       {
         name: 'fields',
         type: 'data-source-fields',
-        defaultValue: [],
+        defaultValue: () => [],
       },
     ],
   },
@@ -27,24 +25,20 @@ const fillConfig = (config: FormConfig, datasourceTypeList: DatasourceTypeOption
       {
         name: 'methods',
         type: 'data-source-methods',
-        defaultValue: [],
+        defaultValue: () => [],
       },
     ],
   },
 ];
 
-export const getFormConfig = (
-  type: string,
-  datasourceTypeList: DatasourceTypeOption[],
-  configs: Record<string, FormConfig>,
-): FormConfig => {
+export const getFormConfig = (type: string, configs: Record<string, FormConfig>): FormConfig => {
   switch (type) {
     case 'base':
-      return fillConfig([], datasourceTypeList);
+      return fillConfig([]);
     case 'http':
-      return fillConfig(HttpFormConfig, datasourceTypeList);
+      return fillConfig(HttpFormConfig);
     default:
-      return fillConfig(configs[type] || [], datasourceTypeList);
+      return fillConfig(configs[type] || []);
   }
 };
 

package/types/fields/DataSourceFields.vue.d.ts

@@ -1,4 +1,4 @@
-import { FieldProps } from '@tmagic/form';
+import { type FieldProps } from '@tmagic/form';
 declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<FieldProps<{
     type: "data-source-fields";
 }>>, {

package/types/layouts/sidebar/code-block/CodeBlockListPanel.vue.d.ts

@@ -6,6 +6,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     customError?: ((id: Id, errorType: CodeDeleteErrorType) => any) | undefined;
 }>>>, {}, {}>, {
     "code-block-panel-header"?(_: {}): any;
+    "code-block-panel-search"?(_: {}): any;
     "code-block-panel-tool"?(_: {
         id: any;
         data: any;

package/types/utils/data-source/formConfigs/base.d.ts

@@ -1,3 +1,2 @@
 import type { FormConfig } from '@tmagic/form';
-import type { DatasourceTypeOption } from '../../../type';
-export default function (datasourceTypeList?: DatasourceTypeOption[]): FormConfig;
+export default function (): FormConfig;

package/types/utils/data-source/index.d.ts

@@ -1,7 +1,6 @@
 import { FormConfig } from '@tmagic/form';
 import { DataSourceSchema } from '@tmagic/schema';
-import { DatasourceTypeOption } from '../../type';
-export declare const getFormConfig: (type: string, datasourceTypeList: DatasourceTypeOption[], configs: Record<string, FormConfig>) => FormConfig;
+export declare const getFormConfig: (type: string, configs: Record<string, FormConfig>) => FormConfig;
 export declare const getDisplayField: (dataSources: DataSourceSchema[], key: string) => {
     value: string;
     type: 'var' | 'text';