@tmagic/editor 1.3.0-beta.0 → 1.3.0-beta.2

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.0-beta.0",
+  "version": "1.3.0-beta.2",
   "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-beta.0",
-    "@tmagic/design": "1.3.0-beta.0",
-    "@tmagic/form": "1.3.0-beta.0",
-    "@tmagic/schema": "1.3.0-beta.0",
-    "@tmagic/stage": "1.3.0-beta.0",
-    "@tmagic/table": "1.3.0-beta.0",
-    "@tmagic/utils": "1.3.0-beta.0",
+    "@tmagic/core": "1.3.0-beta.2",
+    "@tmagic/design": "1.3.0-beta.2",
+    "@tmagic/form": "1.3.0-beta.2",
+    "@tmagic/schema": "1.3.0-beta.2",
+    "@tmagic/stage": "1.3.0-beta.2",
+    "@tmagic/table": "1.3.0-beta.2",
+    "@tmagic/utils": "1.3.0-beta.2",
     "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-beta.0",
-    "@tmagic/form": "1.3.0-beta.0",
+    "@tmagic/design": "1.3.0-beta.2",
+    "@tmagic/form": "1.3.0-beta.2",
     "monaco-editor": "^0.41.0",
     "vue": "^3.3.4"
   },

package/src/components/CodeBlockEditor.vue

@@ -50,7 +50,7 @@
 import { computed, inject, onUnmounted, ref } from 'vue';
 
 import { TMagicButton, TMagicDialog, tMagicMessage, tMagicMessageBox, TMagicTag } from '@tmagic/design';
-import { ColumnConfig, FormState, MFormDrawer } from '@tmagic/form';
+import { ColumnConfig, FormConfig, FormState, MFormDrawer } from '@tmagic/form';
 import type { CodeBlockContent } from '@tmagic/schema';
 
 import CodeEditor from '@editor/layouts/CodeEditor.vue';
@@ -65,6 +65,7 @@ const props = defineProps<{
   content: CodeBlockContent;
   disabled?: boolean;
   isDataSource?: boolean;
+  dataSourceType?: string;
 }>();
 
 const emit = defineEmits<{
@@ -135,10 +136,11 @@ const defaultParamColConfig: ColumnConfig = {
   ],
 };
 
-const functionConfig = computed(() => [
+const functionConfig = computed<FormConfig>(() => [
   {
     text: '名称',
     name: 'name',
+    rules: [{ required: true, message: '请输入名称', trigger: 'blur' }],
   },
   {
     text: '描述',
@@ -148,10 +150,17 @@ const functionConfig = computed(() => [
     text: '执行时机',
     name: 'timing',
     type: 'select',
-    options: [
-      { text: '初始化前', value: 'beforeInit' },
-      { text: '初始化后', value: 'afterInit' },
-    ],
+    options: () => {
+      const options = [
+        { text: '初始化前', value: 'beforeInit' },
+        { text: '初始化后', value: 'afterInit' },
+      ];
+      if (props.dataSourceType !== 'base') {
+        options.push({ text: '请求前', value: 'beforeRequest' });
+        options.push({ text: '请求后', value: 'afterRequest' });
+      }
+      return options;
+    },
     display: () => props.isDataSource,
   },
   {

package/src/components/ContentMenu.vue

@@ -1,31 +1,42 @@
 <template>
-  <div v-if="menuData.length" v-show="visible" class="magic-editor-content-menu" ref="menu" :style="menuStyle">
-    <div>
-      <ToolButton
-        v-for="(item, index) in menuData"
-        event-type="mouseup"
-        ref="buttons"
-        :data="item"
-        :key="index"
-        @mouseup="hide"
-        @mouseenter="showSubMenu(item, index)"
-      ></ToolButton>
+  <transition name="fade">
+    <div
+      v-show="visible"
+      class="magic-editor-content-menu"
+      ref="menu"
+      :style="menuStyle"
+      @mouseenter="mouseenterHandler()"
+    >
+      <slot name="title"></slot>
+      <div>
+        <ToolButton
+          v-for="(item, index) in menuData"
+          event-type="mouseup"
+          ref="buttons"
+          :class="{ active: active && item.id === active }"
+          :data="item"
+          :key="index"
+          @mouseup="clickHandler"
+          @mouseenter="showSubMenu(item, index)"
+        ></ToolButton>
+      </div>
+      <teleport to="body">
+        <content-menu
+          v-if="subMenuData.length"
+          class="sub-menu"
+          ref="subMenu"
+          :active="active"
+          :menu-data="subMenuData"
+          :is-sub-menu="true"
+          @hide="hide"
+        ></content-menu>
+      </teleport>
     </div>
-    <teleport to="body">
-      <content-menu
-        v-if="subMenuData.length"
-        class="sub-menu"
-        ref="subMenu"
-        :menu-data="subMenuData"
-        :is-sub-menu="true"
-        @hide="hide"
-      ></content-menu>
-    </teleport>
-  </div>
+  </transition>
 </template>
 
 <script lang="ts" setup>
-import { nextTick, onMounted, onUnmounted, ref } from 'vue';
+import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue';
 
 import { MenuButton, MenuComponent } from '@editor/type';
 
@@ -39,25 +50,38 @@ const props = withDefaults(
   defineProps<{
     menuData?: (MenuButton | MenuComponent)[];
     isSubMenu?: boolean;
+    active?: string | number;
+    autoHide?: boolean;
   }>(),
   {
     menuData: () => [],
     isSubMenu: false,
+    autoHide: true,
   },
 );
 
-const emit = defineEmits(['hide', 'show']);
+const emit = defineEmits<{
+  hide: [];
+  show: [];
+  mouseenter: [];
+}>();
 
 const menu = ref<HTMLDivElement>();
 const buttons = ref<InstanceType<typeof ToolButton>[]>();
 const subMenu = ref<any>();
 const visible = ref(false);
 const subMenuData = ref<(MenuButton | MenuComponent)[]>([]);
-const menuStyle = ref({
-  left: '0',
-  top: '0',
+
+const menuPosition = ref({
+  left: 0,
+  top: 0,
 });
 
+const menuStyle = computed(() => ({
+  top: `${menuPosition.value.top}px`,
+  left: `${menuPosition.value.left}px`,
+}));
+
 const contains = (el: HTMLElement) => menu.value?.contains(el) || subMenu.value?.contains(el);
 
 const hide = () => {
@@ -69,7 +93,15 @@ const hide = () => {
   emit('hide');
 };
 
-const hideHandler = (e: MouseEvent) => {
+const clickHandler = () => {
+  if (!props.autoHide) return;
+
+  hide();
+};
+
+const outsideClickhideHandler = (e: MouseEvent) => {
+  if (!props.autoHide) return;
+
   const target = e.target as HTMLElement | undefined;
   if (!visible.value || !target) {
     return;
@@ -80,23 +112,31 @@ const hideHandler = (e: MouseEvent) => {
   hide();
 };
 
-const show = (e: MouseEvent) => {
+const setPosition = (e: { clientY: number; clientX: number }) => {
+  const menuHeight = menu.value?.clientHeight || 0;
+
+  let top = e.clientY;
+  if (menuHeight + e.clientY > document.body.clientHeight) {
+    top = document.body.clientHeight - menuHeight;
+  }
+
+  menuPosition.value = {
+    top,
+    left: e.clientX,
+  };
+};
+
+const show = (e?: MouseEvent) => {
   // 加settimeout是以为，如果菜单中的按钮监听的是mouseup，那么菜单显示出来时鼠标如果正好在菜单上就会马上触发按钮的mouseup
   setTimeout(() => {
     visible.value = true;
 
-    nextTick(() => {
-      const menuHeight = menu.value?.clientHeight || 0;
-
-      let top = e.clientY;
-      if (menuHeight + e.clientY > document.body.clientHeight) {
-        top = document.body.clientHeight - menuHeight;
-      }
+    if (!e) {
+      return;
+    }
 
-      menuStyle.value = {
-        top: `${top}px`,
-        left: `${e.clientX}px`,
-      };
+    nextTick(() => {
+      setPosition(e);
 
       emit('show');
     });
@@ -126,22 +166,28 @@ const showSubMenu = (item: MenuButton | MenuComponent, index: number) => {
   }, 0);
 };
 
+const mouseenterHandler = () => {
+  emit('mouseenter');
+};
+
 onMounted(() => {
   if (props.isSubMenu) return;
 
-  globalThis.addEventListener('mousedown', hideHandler, true);
+  globalThis.addEventListener('mousedown', outsideClickhideHandler, true);
 });
 
 onUnmounted(() => {
   if (props.isSubMenu) return;
 
-  globalThis.removeEventListener('mousedown', hideHandler, true);
+  globalThis.removeEventListener('mousedown', outsideClickhideHandler, true);
 });
 
 defineExpose({
   menu,
+  menuPosition,
   hide,
   show,
   contains,
+  setPosition,
 });
 </script>

package/src/components/Resizer.vue

@@ -5,41 +5,19 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from 'vue';
-import Gesto from 'gesto';
+import { ref } from 'vue';
+import type { OnDrag } from 'gesto';
+
+import { useGetSo } from '@editor/hooks/use-getso';
 
 defineOptions({
   name: 'MEditorResizer',
 });
 
-const emit = defineEmits(['change']);
+const emit = defineEmits<{
+  change: [e: OnDrag];
+}>();
 
 const target = ref<HTMLSpanElement>();
-const isDraging = ref(false);
-
-let getso: Gesto;
-
-onMounted(() => {
-  if (!target.value) return;
-  getso = new Gesto(target.value, {
-    container: window,
-    pinchOutside: true,
-  })
-    .on('drag', (e) => {
-      if (!target.value) return;
-
-      emit('change', e.deltaX);
-    })
-    .on('dragStart', () => {
-      isDraging.value = true;
-    })
-    .on('dragEnd', () => {
-      isDraging.value = false;
-    });
-});
-
-onUnmounted(() => {
-  getso?.unset();
-  isDraging.value = false;
-});
+const { isDraging } = useGetSo(target, emit);
 </script>

package/src/components/SplitView.vue

@@ -22,6 +22,7 @@
 
 <script lang="ts" setup>
 import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { OnDrag } from 'gesto';
 
 import Resizer from './Resizer.vue';
 
@@ -111,7 +112,7 @@ onUnmounted(() => {
 
 const center = ref(0);
 
-const changeLeft = (deltaX: number) => {
+const changeLeft = ({ deltaX }: OnDrag) => {
   if (typeof props.left === 'undefined') return;
   let left = Math.max(props.left + deltaX, props.minLeft) || 0;
   emit('update:left', left);
@@ -131,7 +132,7 @@ const changeLeft = (deltaX: number) => {
   });
 };
 
-const changeRight = (deltaX: number) => {
+const changeRight = ({ deltaX }: OnDrag) => {
   if (typeof props.right === 'undefined') return;
   let right = Math.max(props.right - deltaX, props.minRight) || 0;
   emit('update:right', right);

package/src/components/ToolButton.vue

@@ -16,7 +16,7 @@
           ><MIcon v-if="data.icon" :icon="data.icon"></MIcon><span>{{ data.text }}</span></TMagicButton
         >
       </TMagicTooltip>
-      <TMagicButton v-else size="small" text :disabled="disabled"
+      <TMagicButton v-else size="small" text :disabled="disabled" :title="data.text"
         ><MIcon v-if="data.icon" :icon="data.icon"></MIcon><span>{{ data.text }}</span></TMagicButton
       >
     </template>

package/src/fields/DataSourceFields.vue

@@ -171,6 +171,16 @@ const dataSourceFieldsConfig: FormConfig = [
   {
     name: 'defaultValue',
     text: '默认值',
+    type: (mForm: FormState | undefined, { model }: any) => {
+      if (model.type === 'number') return 'number';
+      if (model.type === 'boolean') return 'select';
+
+      return 'text';
+    },
+    options: [
+      { text: 'true', value: true },
+      { text: 'false', value: false },
+    ],
   },
   {
     name: 'enable',

package/src/fields/DataSourceMethods.vue

@@ -14,6 +14,7 @@
       :disabled="disabled"
       :content="codeConfig"
       :is-data-source="true"
+      :data-source-type="model.type"
       @submit="submitCodeHandler"
     ></CodeBlockEditor>
   </div>

package/src/fields/EventSelect.vue

@@ -52,6 +52,7 @@ import { computed, inject } from 'vue';
 import { Delete } from '@element-plus/icons-vue';
 import { has } from 'lodash-es';
 
+import type { EventOption } from '@tmagic/core';
 import { TMagicButton } from '@tmagic/design';
 import type { FieldProps, FormState } from '@tmagic/form';
 import { ActionType } from '@tmagic/schema';
@@ -75,11 +76,22 @@ const eventNameConfig = computed(() => {
     text: '事件',
     type: 'select',
     labelWidth: '40px',
-    options: (mForm: FormState, { formValue }: any) =>
-      services?.eventsService.getEvent(formValue.type).map((option: any) => ({
+    options: (mForm: FormState, { formValue }: any) => {
+      let events: EventOption[] = [];
+
+      if (!services) return events;
+
+      if (props.config.src === 'component') {
+        events = services.eventsService.getEvent(formValue.type);
+      } else if (props.config.src === 'datasource') {
+        events = services.dataSourceService.getFormEvent(formValue.type);
+      }
+
+      return events.map((option) => ({
         text: option.label,
         value: option.value,
-      })),
+      }));
+    },
   };
   return { ...defaultEventNameConfig, ...props.config.eventNameConfig };
 });

package/src/hooks/use-getso.ts

@@ -0,0 +1,35 @@
+import { onMounted, onUnmounted, type Ref, ref } from 'vue';
+import Gesto, { type OnDrag } from 'gesto';
+
+export const useGetSo = (target: Ref<HTMLElement | undefined>, emit: (evt: 'change', e: OnDrag<Gesto>) => void) => {
+  let getso: Gesto;
+  const isDraging = ref(false);
+
+  onMounted(() => {
+    if (!target.value) return;
+    getso = new Gesto(target.value, {
+      container: window,
+      pinchOutside: true,
+    })
+      .on('drag', (e) => {
+        if (!target.value) return;
+
+        emit('change', e);
+      })
+      .on('dragStart', () => {
+        isDraging.value = true;
+      })
+      .on('dragEnd', () => {
+        isDraging.value = false;
+      });
+  });
+
+  onUnmounted(() => {
+    getso?.unset();
+    isDraging.value = false;
+  });
+
+  return {
+    isDraging,
+  };
+};

package/src/icons/PinIcon.vue

@@ -0,0 +1,25 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    class="icon icon-tabler icon-tabler-pin"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    stroke-width="2"
+    stroke="currentColor"
+    fill="none"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M15 4.5l-4 4l-4 1.5l-1.5 1.5l7 7l1.5 -1.5l1.5 -4l4 -4" />
+    <line x1="9" y1="15" x2="4.5" y2="19.5" />
+    <line x1="14.5" y1="4" x2="20" y2="9.5" />
+  </svg>
+</template>
+
+<script lang="ts" setup>
+defineOptions({
+  name: 'MEditorPinIcon',
+});
+</script>

package/src/icons/PinnedIcon.vue

@@ -0,0 +1,25 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    class="icon icon-tabler icon-tabler-pinned"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    stroke-width="2"
+    stroke="currentColor"
+    fill="none"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M9 4v6l-2 4v2h10v-2l-2 -4v-6" />
+    <line x1="12" y1="16" x2="12" y2="21" />
+    <line x1="8" y1="4" x2="16" y2="4" />
+  </svg>
+</template>
+
+<script lang="ts" setup>
+defineOptions({
+  name: 'MEditorPinnedIcon',
+});
+</script>

package/src/index.ts

@@ -37,6 +37,8 @@ import type { InstallOptions } from './type';
 
 import './theme/index.scss';
 
+export type { OnDrag } from 'gesto';
+
 export type { MoveableOptions } from '@tmagic/stage';
 export * from './type';
 export * from './hooks';

package/src/layouts/workspace/Workspace.vue

@@ -20,9 +20,9 @@ import { computed, inject } from 'vue';
 
 import { MenuButton, MenuComponent, Services } from '@editor/type';
 
+import MagicStage from './viewer/Stage.vue';
 import Breadcrumb from './Breadcrumb.vue';
 import PageBar from './PageBar.vue';
-import MagicStage from './Stage.vue';
 
 defineOptions({
   name: 'MEditorWorkspace',