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

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.0-alpha.21",
+  "version": "1.3.0-alpha.23",
   "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.23",
+    "@tmagic/design": "1.3.0-alpha.23",
+    "@tmagic/form": "1.3.0-alpha.23",
+    "@tmagic/schema": "1.3.0-alpha.23",
+    "@tmagic/stage": "1.3.0-alpha.23",
+    "@tmagic/table": "1.3.0-alpha.23",
+    "@tmagic/utils": "1.3.0-alpha.23",
     "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.23",
+    "@tmagic/form": "1.3.0-alpha.23",
     "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/Sidebar.vue

@@ -1,24 +1,23 @@
 <template>
-  <component
-    v-if="data.type === 'tabs' && data.items.length"
-    v-model="activeTabName"
-    class="m-editor-sidebar tmagic-design-tabs"
-    v-bind="tabsComponent?.props({ type: 'card', tabPosition: 'left' }) || {}"
-    :is="tabsComponent?.component || 'el-tabs'"
-  >
-    <component
+  <div class="m-editor-sidebar" v-if="data.type === 'tabs' && data.items.length">
+    <div class="m-editor-sidebar-header">
+      <div
+        class="m-editor-sidebar-header-item"
+        v-for="(config, index) in sideBarItems"
+        :key="config.$key ?? index"
+        :class="{ 'is-active': activeTabName === config.text }"
+        @click="activeTabName = config.text || `${index}`"
+      >
+        <MIcon v-if="config.icon" :icon="config.icon"></MIcon>
+        <div v-if="config.text" class="magic-editor-tab-panel-title">{{ config.text }}</div>
+      </div>
+    </div>
+    <div
+      class="m-editor-sidebar-content"
       v-for="(config, index) in sideBarItems"
-      v-bind="tabPaneComponent?.props({ name: config.text, lazy: config.lazy }) || {}"
-      :is="tabPaneComponent?.component || 'el-tab-pane'"
-      :key="config.$key || index"
+      :key="config.$key ?? index"
+      v-show="activeTabName === config.text"
     >
-      <template #label>
-        <div :key="config.text">
-          <MIcon v-if="config.icon" :icon="config.icon"></MIcon>
-          <div v-if="config.text" class="magic-editor-tab-panel-title">{{ config.text }}</div>
-        </div>
-      </template>
-
       <component v-if="config" :is="config.component" v-bind="config.props || {}" v-on="config?.listeners || {}">
         <template
           #component-list-panel-header
@@ -71,16 +70,14 @@
           />
         </template>
       </component>
-    </component>
-  </component>
+    </div>
+  </div>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { computed, ref, watch } from 'vue';
 import { Coin, EditPen, Goods, List } from '@element-plus/icons-vue';
 
-import { getConfig } from '@tmagic/design';
-
 import MIcon from '@editor/components/Icon.vue';
 import type { MenuButton, MenuComponent, SideComponent, SideItem } from '@editor/type';
 import { SideBarData } from '@editor/type';
@@ -104,9 +101,6 @@ const props = withDefaults(
   },
 );
 
-const tabPaneComponent = getConfig('components')?.tabPane;
-const tabsComponent = getConfig('components')?.tabs;
-
 const activeTabName = ref(props.data?.status);
 
 const getItemConfig = (data: SideItem): SideComponent => {

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/services/editor.ts

@@ -648,12 +648,14 @@ class Editor extends BaseService {
 
     if (doc) {
       const el = doc.getElementById(`${node.id}`);
-      const parentEl = el?.offsetParent;
+      const parentEl = layout === Layout.FIXED ? doc.body : el?.offsetParent;
       if (parentEl && el) {
         node.style.left = (parentEl.clientWidth - el.clientWidth) / 2;
+        node.style.right = '';
       }
     } else if (parent.style && isNumber(parent.style?.width) && isNumber(node.style?.width)) {
       node.style.left = (parent.style.width - node.style.width) / 2;
+      node.style.right = '';
     }
 
     return node;
@@ -792,20 +794,46 @@ class Editor extends BaseService {
     if (!node || isPage(node)) return;
 
     const { style, id, type } = node;
-    if (!style || style.position !== 'absolute') return;
-
-    if (top && !isNumber(style.top)) return;
-    if (left && !isNumber(style.left)) return;
-
-    this.update({
-      id,
-      type,
-      style: {
-        ...style,
-        left: Number(style.left) + left,
-        top: Number(style.top) + top,
-      },
-    });
+    if (!style || !['absolute', 'fixed'].includes(style.position)) return;
+
+    const update = (style: { [key: string]: any }) =>
+      this.update({
+        id,
+        type,
+        style,
+      });
+
+    if (top) {
+      if (isNumber(style.top)) {
+        update({
+          ...style,
+          top: Number(style.top) + Number(top),
+          bottom: '',
+        });
+      } else if (isNumber(style.bottom)) {
+        update({
+          ...style,
+          bottom: Number(style.bottom) - Number(top),
+          top: '',
+        });
+      }
+    }
+
+    if (left) {
+      if (isNumber(style.left)) {
+        update({
+          ...style,
+          left: Number(style.left) + Number(left),
+          right: '',
+        });
+      } else if (isNumber(style.right)) {
+        update({
+          ...style,
+          right: Number(style.right) - Number(left),
+          left: '',
+        });
+      }
+    }
   }
 
   public resetState() {

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/theme/sidebar.scss

@@ -1,76 +1,33 @@
-.m-editor-sidebar.tmagic-design-tabs {
+.m-editor-sidebar {
+  display: flex;
   height: 100%;
 
-  .el-tabs__header,
-  .t-tabs__header {
+  .m-editor-sidebar-header {
     background: $--sidebar-heder-background-color;
-    border: 0;
     height: 100%;
+    width: 40px;
 
-    .t-tabs__nav--card {
-      background-color: transparent;
-    }
-
-    .t-tabs__nav--card.t-tabs__nav-item:not(.t-is-disabled):not(
-        .t-is-active
-      ):hover {
-      background-color: transparent;
-    }
-
-    &.is-left,
-    &.t-is-left {
-      width: 40px;
-      margin-right: 0;
-    }
-
-    .el-tabs__nav-wrap {
-      margin: 0;
-    }
-
-    .el-tabs__nav {
-      border: 0;
-      border-radius: 0;
-    }
-
-    .tab-label {
-      margin-left: 2px;
-    }
-
-    .el-tabs__item.is-left,
-    .t-tabs__nav-item {
+    .m-editor-sidebar-header-item {
       line-height: 15px;
-      border: 0;
       height: auto;
       padding: 8px;
       color: rgb(255, 255, 255);
       box-sizing: border-box;
+      cursor: pointer;
 
-      &.is-left,
-      &.t-is-left {
-        &.is-active,
-        &.t-is-active {
-          background: $--sidebar-content-background-color;
-          border: 0;
-
-          i {
-            color: #353140;
-          }
+      &.is-active {
+        background: $--sidebar-content-background-color;
 
-          .magic-editor-tab-panel-title {
-            color: #353140;
-          }
+        i {
+          color: #353140;
         }
 
-        &:first-child {
-          border-right: 0;
+        .magic-editor-tab-panel-title {
+          color: #353140;
         }
       }
     }
 
-    .t-tabs__nav-item {
-      padding: 7px;
-    }
-
     i {
       font-size: 25px;
       color: rgba(255, 255, 255, 0.6);
@@ -86,6 +43,12 @@
     }
   }
 
+  .m-editor-sidebar-content {
+    height: 100%;
+    width: calc(100% - 40px);
+    overflow: auto;
+  }
+
   .el-scrollbar {
     height: 100%;
   }
@@ -109,9 +72,4 @@
       background: rgba(0, 0, 0, 0.2);
     }
   }
-
-  .el-tabs__content,
-  .el-tab-pane {
-    height: 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';