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

package/src/layouts/workspace/viewer/NodeListMenuTitle.vue

@@ -0,0 +1,68 @@
+<template>
+  <div
+    style="
+      text-align: center;
+      padding: 5px 0;
+      font-size: 14px;
+      cursor: move;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    "
+    ref="target"
+  >
+    <TMagicTooltip placement="top" :content="pinned ? '取消置于顶层自动隐藏' : '置于顶层不消失'">
+      <MIcon
+        style="margin-left: 10px; cursor: pointer"
+        :icon="pinned ? PinnedIcon : PinIcon"
+        @click="pinHandler"
+      ></MIcon>
+    </TMagicTooltip>
+
+    <span>可选组件</span>
+
+    <div style="margin-right: 10px">
+      <TMagicButton text size="small" @click="closeHandler">
+        <MIcon :icon="Close"></MIcon>
+      </TMagicButton>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { Close } from '@element-plus/icons-vue';
+import type { OnDrag } from 'gesto';
+
+import { TMagicButton, TMagicTooltip } from '@tmagic/design';
+
+import MIcon from '@editor/components/Icon.vue';
+import { useGetSo } from '@editor/hooks/use-getso';
+import PinIcon from '@editor/icons/PinIcon.vue';
+import PinnedIcon from '@editor/icons/PinnedIcon.vue';
+
+defineOptions({
+  name: 'MEditorNodeListMenuTitle',
+});
+
+const props = defineProps<{
+  pinned: boolean;
+}>();
+
+const emit = defineEmits<{
+  close: [];
+  'update:pinned': [pinned: boolean];
+  change: [e: OnDrag];
+}>();
+
+const pinHandler = () => {
+  emit('update:pinned', !props.pinned);
+};
+
+const closeHandler = () => {
+  emit('close');
+};
+
+const target = ref<HTMLDivElement>();
+useGetSo(target, emit);
+</script>

package/src/layouts/workspace/{Stage.vue → viewer/Stage.vue}

@@ -24,6 +24,7 @@
     ></div>
     <Teleport to="body">
       <ViewerMenu ref="menu" :is-multi-select="isMultiSelect" :stage-content-menu="stageContentMenu"></ViewerMenu>
+      <NodeListMenu ref="nodeList" :is-multi-select="isMultiSelect"></NodeListMenu>
     </Teleport>
   </ScrollViewer>
 </template>
@@ -40,6 +41,7 @@ import { useStage } from '@editor/hooks/use-stage';
 import { Layout, MenuButton, MenuComponent, Services, StageOptions } from '@editor/type';
 import { getConfig } from '@editor/utils/config';
 
+import NodeListMenu from './NodeListMenu.vue';
 import ViewerMenu from './ViewerMenu.vue';
 
 defineOptions({

package/src/theme/content-menu.scss

@@ -3,12 +3,13 @@
   font-size: 12px;
   background: #fff;
   box-shadow: 0 2px 8px 2px rgba(68, 73, 77, 0.16);
-  z-index: 9999;
+  z-index: 1000;
   transform-origin: 0% 0%;
   font-weight: 600;
   padding: 4px 0px;
   overflow: auto;
   max-height: 80%;
+  min-width: 180px;
 
   .menu-item {
     color: #333;
@@ -43,8 +44,31 @@
       }
     }
 
+    &.active {
+      background-color: $--theme-color;
+      .tmagic-design-button,
+      .tmagic-design-button:active,
+      .tmagic-design-button:focus {
+        color: #fff;
+        background-color: $--theme-color;
+      }
+
+      &.menu-item i {
+        color: #fff;
+      }
+    }
+
     &:hover {
       background-color: $--hover-color;
+      .tmagic-design-button,
+      .tmagic-design-button:active,
+      .tmagic-design-button:focus {
+        color: $--font-color;
+      }
+
+      &.menu-item i {
+        color: $--font-color;
+      }
     }
   }
 }

package/src/theme/index.scss

@@ -1,2 +1,10 @@
 @import "./common/var.scss";
 @import "./theme.scss";
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s;
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  opacity: 0;
+}

package/src/type.ts

@@ -201,6 +201,8 @@ export interface MenuButton {
   className?: string;
   /** type为dropdown时，下拉的菜单列表， 或者有子菜单时 */
   items?: MenuButton[];
+  /** 唯一标识，用于高亮 */
+  id?: string | number;
 }
 
 export interface MenuComponent {

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

@@ -7,6 +7,15 @@ export default [
     type: 'switch',
     defaultValue: true,
   },
+  {
+    name: 'responseOptions',
+    items: [
+      {
+        name: 'dataPath',
+        text: '数据路径',
+      },
+    ],
+  },
   {
     type: 'fieldset',
     name: 'options',

package/src/utils/props.ts

@@ -248,7 +248,7 @@ export const displayTabConfig: TabPaneConfig = {
             },
             {
               type: 'select',
-              options: (mForm: FormState | undefined, { model }: any) => {
+              options: (mForm, { model }) => {
                 const [id, field] = model.field;
 
                 const ds = dataSourceService.getDataSourceById(id);
@@ -284,23 +284,33 @@ export const displayTabConfig: TabPaneConfig = {
               items: [
                 {
                   name: 'value',
-                  display: (vm: FormState, { model }: any) =>
-                    !['between', 'not_between', 'is', 'not'].includes(model.op),
-                },
-                {
-                  name: 'value',
-                  type: 'select',
+                  type: (mForm, { model }) => {
+                    const [id, field] = model.field;
+
+                    const ds = dataSourceService.getDataSourceById(id);
+
+                    const type = ds?.fields.find((f) => f.name === field)?.type;
+
+                    if (type === 'number') {
+                      return 'number';
+                    }
+
+                    if (type === 'boolean') {
+                      return 'select';
+                    }
+
+                    return 'text';
+                  },
                   options: [
                     { text: 'true', value: true },
                     { text: 'false', value: false },
                   ],
-                  display: (vm: FormState, { model }: any) => ['is', 'not'].includes(model.op),
+                  display: (vm, { model }) => !['between', 'not_between'].includes(model.op),
                 },
                 {
                   name: 'range',
                   type: 'number-range',
-                  display: (vm: FormState, { model }: any) =>
-                    ['between', 'not_between'].includes(model.op) && !['is', 'not'].includes(model.op),
+                  display: (vm, { model }) => ['between', 'not_between'].includes(model.op),
                 },
               ],
             },

package/types/components/CodeBlockEditor.vue.d.ts

@@ -3,6 +3,7 @@ declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimePr
     content: CodeBlockContent;
     disabled?: boolean | undefined;
     isDataSource?: boolean | undefined;
+    dataSourceType?: string | undefined;
 }>, {
     show(): void;
     hide(): void;
@@ -10,6 +11,7 @@ declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimePr
     content: CodeBlockContent;
     disabled?: boolean | undefined;
     isDataSource?: boolean | undefined;
+    dataSourceType?: string | undefined;
 }>>>, {}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/types/components/ContentMenu.vue.d.ts

@@ -1,28 +1,42 @@
 import { MenuButton, MenuComponent } from '../type';
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     menuData?: (MenuButton | MenuComponent)[] | undefined;
     isSubMenu?: boolean | undefined;
+    active?: string | number | undefined;
+    autoHide?: boolean | undefined;
 }>, {
     menuData: () => never[];
     isSubMenu: boolean;
+    autoHide: boolean;
 }>, {
     menu: import("vue").Ref<HTMLDivElement | undefined>;
+    menuPosition: import("vue").Ref<{
+        left: number;
+        top: number;
+    }>;
     hide: () => void;
-    show: (e: MouseEvent) => void;
+    show: (e?: MouseEvent | undefined) => void;
     contains: (el: HTMLElement) => any;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("show" | "hide")[], "show" | "hide", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    setPosition: (e: {
+        clientY: number;
+        clientX: number;
+    }) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     menuData?: (MenuButton | MenuComponent)[] | undefined;
     isSubMenu?: boolean | undefined;
+    active?: string | number | undefined;
+    autoHide?: boolean | undefined;
 }>, {
     menuData: () => never[];
     isSubMenu: boolean;
-}>>> & {
-    onShow?: ((...args: any[]) => any) | undefined;
-    onHide?: ((...args: any[]) => any) | undefined;
-}, {
+    autoHide: boolean;
+}>>>, {
     menuData: (MenuButton | MenuComponent)[];
     isSubMenu: boolean;
-}, {}>;
+    autoHide: boolean;
+}, {}>, {
+    title?(_: {}): any;
+}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {
@@ -38,6 +52,11 @@ type __VLS_WithDefaults<P, D> = {
         default: D[K];
     }> : P[K];
 };
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
 type __VLS_Prettify<T> = {
     [K in keyof T]: T[K];
 } & {};

package/types/components/Resizer.vue.d.ts

@@ -1,6 +1,4 @@
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "change"[], "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>> & {
-    onChange?: ((...args: any[]) => any) | undefined;
-}, {}, {}>, {
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>, {
     default?(_: {}): any;
 }>;
 export default _default;

package/types/hooks/use-code-block-edit.d.ts

@@ -55,6 +55,7 @@ export declare const useCodeBlockEdit: (codeBlockService?: CodeBlockService) =>
             readonly content: CodeBlockContent;
             readonly disabled?: boolean | undefined;
             readonly isDataSource?: boolean | undefined;
+            readonly dataSourceType?: string | undefined;
         };
         $attrs: {
             [x: string]: unknown;
@@ -80,6 +81,9 @@ export declare const useCodeBlockEdit: (codeBlockService?: CodeBlockService) =>
             isDataSource: {
                 type: import("vue").PropType<boolean>;
             };
+            dataSourceType: {
+                type: import("vue").PropType<string>;
+            };
         }>>, {
             show(): void;
             hide(): void;
@@ -114,6 +118,9 @@ export declare const useCodeBlockEdit: (codeBlockService?: CodeBlockService) =>
         isDataSource: {
             type: import("vue").PropType<boolean>;
         };
+        dataSourceType: {
+            type: import("vue").PropType<string>;
+        };
     }>> & import("vue").ShallowUnwrapRef<{
         show(): void;
         hide(): void;

package/types/hooks/use-data-source-method.d.ts

@@ -53,6 +53,7 @@ export declare const useDataSourceMethod: () => {
             readonly content: CodeBlockContent;
             readonly disabled?: boolean | undefined;
             readonly isDataSource?: boolean | undefined;
+            readonly dataSourceType?: string | undefined;
         };
         $attrs: {
             [x: string]: unknown;
@@ -78,6 +79,9 @@ export declare const useDataSourceMethod: () => {
             isDataSource: {
                 type: import("vue").PropType<boolean>;
             };
+            dataSourceType: {
+                type: import("vue").PropType<string>;
+            };
         }>>, {
             show(): void;
             hide(): void;
@@ -112,6 +116,9 @@ export declare const useDataSourceMethod: () => {
         isDataSource: {
             type: import("vue").PropType<boolean>;
         };
+        dataSourceType: {
+            type: import("vue").PropType<string>;
+        };
     }>> & import("vue").ShallowUnwrapRef<{
         show(): void;
         hide(): void;

package/types/hooks/use-getso.d.ts

@@ -0,0 +1,5 @@
+import { type Ref } from 'vue';
+import Gesto, { type OnDrag } from 'gesto';
+export declare const useGetSo: (target: Ref<HTMLElement | undefined>, emit: (evt: 'change', e: OnDrag<Gesto>) => void) => {
+    isDraging: Ref<boolean>;
+};

package/types/icons/PinIcon.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

package/types/icons/PinnedIcon.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

package/types/index.d.ts

@@ -1,6 +1,7 @@
 import { App } from 'vue';
 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/types/layouts/PropsPanel.vue.d.ts

@@ -18,7 +18,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
             height?: string | undefined;
             inline?: boolean | undefined;
             labelPosition?: string | undefined;
-            onChange?: ((...args: any[]) => any) | undefined;
             key?: string | number | symbol | undefined;
             ref?: import("vue").VNodeRef | undefined;
             ref_for?: boolean | undefined;
@@ -63,6 +62,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
             }>) => void)[] | undefined;
             class?: unknown;
             style?: unknown;
+            onChange?: ((...args: any[]) => any) | undefined;
             readonly size?: "default" | "small" | "large" | undefined;
             readonly popperClass?: string | undefined;
             readonly extendState?: ((state: FormState) => Record<string, any> | Promise<Record<string, any>>) | undefined;

package/types/layouts/workspace/viewer/NodeListMenu.vue.d.ts

@@ -0,0 +1,15 @@
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    isMultiSelect?: boolean | undefined;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    isMultiSelect?: boolean | undefined;
+}>>>, {}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/types/layouts/workspace/viewer/NodeListMenuTitle.vue.d.ts

@@ -0,0 +1,15 @@
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    pinned: boolean;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    pinned: boolean;
+}>>>, {}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/types/layouts/workspace/{Stage.vue.d.ts → viewer/Stage.vue.d.ts}

@@ -1,4 +1,4 @@
-import { MenuButton, MenuComponent } from '../../type';
+import { MenuButton, MenuComponent } from '../../../type';
 declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
     stageContentMenu: (MenuButton | MenuComponent)[];
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{

package/types/layouts/workspace/{ViewerMenu.vue.d.ts → viewer/ViewerMenu.vue.d.ts}

@@ -1,4 +1,4 @@
-import { MenuButton, MenuComponent } from '../../type';
+import { MenuButton, MenuComponent } from '../../../type';
 declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     isMultiSelect?: boolean | undefined;
     stageContentMenu: (MenuButton | MenuComponent)[];

package/types/type.d.ts

@@ -159,6 +159,8 @@ export interface MenuButton {
     className?: string;
     /** type为dropdown时，下拉的菜单列表， 或者有子菜单时 */
     items?: MenuButton[];
+    /** 唯一标识，用于高亮 */
+    id?: string | number;
 }
 export interface MenuComponent {
     type: 'component';