@tmagic/editor 1.3.16 → 1.4.0-beta.2

package/src/utils/operator.ts

@@ -15,55 +15,53 @@ import { generatePageNameByApp, getInitPositionStyle } from '@editor/utils/edito
  * @param config 待粘贴的元素配置(复制时保存的那份配置)
  * @returns
  */
-export const beforePaste = async (position: PastePosition, config: MNode[]): Promise<MNode[]> => {
+export const beforePaste = (position: PastePosition, config: MNode[]): MNode[] => {
   if (!config[0]?.style) return config;
   const curNode = editorService.get('node');
   // 将数组中第一个元素的坐标作为参照点
   const { left: referenceLeft, top: referenceTop } = config[0].style;
   // 坐标校准后的粘贴数据
-  const pasteConfigs: MNode[] = await Promise.all(
-    config.map(async (configItem: MNode): Promise<MNode> => {
-      // 解构 position 对象，从 position 删除 offsetX、offsetY字段
-      const { offsetX = 0, offsetY = 0, ...positionClone } = position;
-      let pastePosition = positionClone;
+  const pasteConfigs: MNode[] = config.map((configItem: MNode): MNode => {
+    // 解构 position 对象，从 position 删除 offsetX、offsetY字段
+    const { offsetX = 0, offsetY = 0, ...positionClone } = position;
+    let pastePosition = positionClone;
 
-      if (!isEmpty(pastePosition) && curNode?.items) {
-        // 如果没有传入粘贴坐标则可能为键盘操作，不再转换
-        // 如果粘贴时选中了容器，则将元素粘贴到容器内，坐标需要转换为相对于容器的坐标
-        pastePosition = getPositionInContainer(pastePosition, curNode.id);
-      }
+    if (!isEmpty(pastePosition) && curNode?.items) {
+      // 如果没有传入粘贴坐标则可能为键盘操作，不再转换
+      // 如果粘贴时选中了容器，则将元素粘贴到容器内，坐标需要转换为相对于容器的坐标
+      pastePosition = getPositionInContainer(pastePosition, curNode.id);
+    }
 
-      // 将所有待粘贴元素坐标相对于多选第一个元素坐标重新计算，以保证多选粘贴后元素间距不变
-      if (pastePosition.left && configItem.style?.left) {
-        pastePosition.left = configItem.style.left - referenceLeft + pastePosition.left;
-      }
-      if (pastePosition.top && configItem.style?.top) {
-        pastePosition.top = configItem.style?.top - referenceTop + pastePosition.top;
-      }
-      const pasteConfig = await propsService.setNewItemId(configItem, false);
+    // 将所有待粘贴元素坐标相对于多选第一个元素坐标重新计算，以保证多选粘贴后元素间距不变
+    if (pastePosition.left && configItem.style?.left) {
+      pastePosition.left = configItem.style.left - referenceLeft + pastePosition.left;
+    }
+    if (pastePosition.top && configItem.style?.top) {
+      pastePosition.top = configItem.style?.top - referenceTop + pastePosition.top;
+    }
+    const pasteConfig = propsService.setNewItemId(configItem, false);
 
-      if (pasteConfig.style) {
-        const { left, top } = pasteConfig.style;
-        // 判断能转换为数字时，做粘贴偏移量计算
-        if (typeof left === 'number' || (!!left && !isNaN(Number(left)))) {
-          pasteConfig.style.left = Number(left) + offsetX;
-        }
-        if (typeof top === 'number' || (!!top && !isNaN(Number(top)))) {
-          pasteConfig.style.top = Number(top) + offsetY;
-        }
-
-        pasteConfig.style = {
-          ...pasteConfig.style,
-          ...pastePosition,
-        };
+    if (pasteConfig.style) {
+      const { left, top } = pasteConfig.style;
+      // 判断能转换为数字时，做粘贴偏移量计算
+      if (typeof left === 'number' || (!!left && !isNaN(Number(left)))) {
+        pasteConfig.style.left = Number(left) + offsetX;
       }
-      const root = editorService.get('root');
-      if ((isPage(pasteConfig) || isPageFragment(pasteConfig)) && root) {
-        pasteConfig.name = generatePageNameByApp(root, isPage(pasteConfig) ? NodeType.PAGE : NodeType.PAGE_FRAGMENT);
+      if (typeof top === 'number' || (!!top && !isNaN(Number(top)))) {
+        pasteConfig.style.top = Number(top) + offsetY;
       }
-      return pasteConfig as MNode;
-    }),
-  );
+
+      pasteConfig.style = {
+        ...pasteConfig.style,
+        ...pastePosition,
+      };
+    }
+    const root = editorService.get('root');
+    if ((isPage(pasteConfig) || isPageFragment(pasteConfig)) && root) {
+      pasteConfig.name = generatePageNameByApp(root, isPage(pasteConfig) ? NodeType.PAGE : NodeType.PAGE_FRAGMENT);
+    }
+    return pasteConfig as MNode;
+  });
   return pasteConfigs;
 };
 

package/src/utils/props.ts

@@ -41,7 +41,6 @@ const numberOptions = [
 
 export const styleTabConfig: TabPaneConfig = {
   title: '样式',
-  labelWidth: '80px',
   items: [
     {
       name: 'style',
@@ -51,30 +50,59 @@ export const styleTabConfig: TabPaneConfig = {
           legend: '位置',
           items: [
             {
+              type: 'data-source-field-select',
               name: 'position',
-              type: 'checkbox',
-              activeValue: 'fixed',
-              inactiveValue: 'absolute',
-              defaultValue: 'absolute',
               text: '固定定位',
+              checkStrictly: false,
+              dataSourceFieldType: ['string'],
+              fieldConfig: {
+                type: 'checkbox',
+                activeValue: 'fixed',
+                inactiveValue: 'absolute',
+                defaultValue: 'absolute',
+              },
             },
             {
+              type: 'data-source-field-select',
               name: 'left',
               text: 'left',
+              checkStrictly: false,
+              dataSourceFieldType: ['string', 'number'],
+              fieldConfig: {
+                type: 'text',
+              },
             },
             {
+              type: 'data-source-field-select',
               name: 'top',
               text: 'top',
+              checkStrictly: false,
+              dataSourceFieldType: ['string', 'number'],
+              fieldConfig: {
+                type: 'text',
+              },
               disabled: (vm: FormState, { model }: any) =>
                 model.position === 'fixed' && model._magic_position === 'fixedBottom',
             },
             {
+              type: 'data-source-field-select',
               name: 'right',
               text: 'right',
+              checkStrictly: false,
+              dataSourceFieldType: ['string', 'number'],
+              fieldConfig: {
+                type: 'text',
+              },
             },
             {
+              type: 'data-source-field-select',
               name: 'bottom',
               text: 'bottom',
+              checkStrictly: false,
+              dataSourceFieldType: ['string', 'number'],
+              fieldConfig: {
+                type: 'text',
+              },
               disabled: (vm: FormState, { model }: any) =>
                 model.position === 'fixed' && model._magic_position === 'fixedTop',
             },
@@ -85,12 +113,42 @@ export const styleTabConfig: TabPaneConfig = {
           legend: '盒子',
           items: [
             {
+              type: 'data-source-field-select',
               name: 'width',
               text: '宽度',
+              checkStrictly: false,
+              dataSourceFieldType: ['string', 'number'],
+              fieldConfig: {
+                type: 'text',
+              },
             },
             {
+              type: 'data-source-field-select',
               name: 'height',
               text: '高度',
+              checkStrictly: false,
+              dataSourceFieldType: ['string', 'number'],
+              fieldConfig: {
+                type: 'text',
+              },
+            },
+            {
+              type: 'data-source-field-select',
+              text: 'overflow',
+              name: 'overflow',
+              checkStrictly: false,
+              dataSourceFieldType: ['string'],
+              fieldConfig: {
+                type: 'select',
+                options: [
+                  { text: 'visible', value: 'visible' },
+                  { text: 'hidden', value: 'hidden' },
+                  { text: 'clip', value: 'clip' },
+                  { text: 'scroll', value: 'scroll' },
+                  { text: 'auto', value: 'auto' },
+                  { text: 'overlay', value: 'overlay' },
+                ],
+              },
             },
           ],
         },
@@ -99,32 +157,48 @@ export const styleTabConfig: TabPaneConfig = {
           legend: '边框',
           items: [
             {
+              type: 'data-source-field-select',
               name: 'borderWidth',
               text: '宽度',
               defaultValue: '0',
+              checkStrictly: false,
+              dataSourceFieldType: ['string', 'number'],
+              fieldConfig: {
+                type: 'text',
+              },
             },
             {
+              type: 'data-source-field-select',
               name: 'borderColor',
               text: '颜色',
-              type: 'colorPicker',
+              checkStrictly: false,
+              dataSourceFieldType: ['string'],
+              fieldConfig: {
+                type: 'text',
+              },
             },
             {
+              type: 'data-source-field-select',
               name: 'borderStyle',
               text: '样式',
-              type: 'select',
               defaultValue: 'none',
-              options: [
-                { text: 'none', value: 'none' },
-                { text: 'hidden', value: 'hidden' },
-                { text: 'dotted', value: 'dotted' },
-                { text: 'dashed', value: 'dashed' },
-                { text: 'solid', value: 'solid' },
-                { text: 'double', value: 'double' },
-                { text: 'groove', value: 'groove' },
-                { text: 'ridge', value: 'ridge' },
-                { text: 'inset', value: 'inset' },
-                { text: 'outset', value: 'outset' },
-              ],
+              checkStrictly: false,
+              dataSourceFieldType: ['string'],
+              fieldConfig: {
+                type: 'select',
+                options: [
+                  { text: 'none', value: 'none' },
+                  { text: 'hidden', value: 'hidden' },
+                  { text: 'dotted', value: 'dotted' },
+                  { text: 'dashed', value: 'dashed' },
+                  { text: 'solid', value: 'solid' },
+                  { text: 'double', value: 'double' },
+                  { text: 'groove', value: 'groove' },
+                  { text: 'ridge', value: 'ridge' },
+                  { text: 'inset', value: 'inset' },
+                  { text: 'outset', value: 'outset' },
+                ],
+              },
             },
           ],
         },
@@ -133,31 +207,53 @@ export const styleTabConfig: TabPaneConfig = {
           legend: '背景',
           items: [
             {
+              type: 'data-source-field-select',
               name: 'backgroundImage',
               text: '背景图',
+              checkStrictly: false,
+              dataSourceFieldType: ['string'],
+              fieldConfig: {
+                type: 'text',
+              },
             },
             {
+              type: 'data-source-field-select',
               name: 'backgroundColor',
               text: '背景颜色',
-              type: 'colorPicker',
+              checkStrictly: false,
+              dataSourceFieldType: ['string'],
+              fieldConfig: {
+                type: 'colorPicker',
+              },
             },
             {
+              type: 'data-source-field-select',
               name: 'backgroundRepeat',
               text: '背景图重复',
-              type: 'select',
               defaultValue: 'no-repeat',
-              options: [
-                { text: 'repeat', value: 'repeat' },
-                { text: 'repeat-x', value: 'repeat-x' },
-                { text: 'repeat-y', value: 'repeat-y' },
-                { text: 'no-repeat', value: 'no-repeat' },
-                { text: 'inherit', value: 'inherit' },
-              ],
+              checkStrictly: false,
+              dataSourceFieldType: ['string'],
+              fieldConfig: {
+                type: 'select',
+                options: [
+                  { text: 'repeat', value: 'repeat' },
+                  { text: 'repeat-x', value: 'repeat-x' },
+                  { text: 'repeat-y', value: 'repeat-y' },
+                  { text: 'no-repeat', value: 'no-repeat' },
+                  { text: 'inherit', value: 'inherit' },
+                ],
+              },
             },
             {
+              type: 'data-source-field-select',
               name: 'backgroundSize',
               text: '背景图大小',
               defaultValue: '100% 100%',
+              checkStrictly: false,
+              dataSourceFieldType: ['string'],
+              fieldConfig: {
+                type: 'text',
+              },
             },
           ],
         },
@@ -166,17 +262,34 @@ export const styleTabConfig: TabPaneConfig = {
           legend: '字体',
           items: [
             {
+              type: 'data-source-field-select',
               name: 'color',
               text: '颜色',
-              type: 'colorPicker',
+              checkStrictly: false,
+              dataSourceFieldType: ['string'],
+              fieldConfig: {
+                type: 'colorPicker',
+              },
             },
             {
+              type: 'data-source-field-select',
               name: 'fontSize',
               text: '大小',
+              checkStrictly: false,
+              dataSourceFieldType: ['string', 'number'],
+              fieldConfig: {
+                type: 'text',
+              },
             },
             {
+              type: 'data-source-field-select',
               name: 'fontWeight',
               text: '粗细',
+              checkStrictly: false,
+              dataSourceFieldType: ['string', 'number'],
+              fieldConfig: {
+                type: 'text',
+              },
             },
           ],
         },
@@ -186,12 +299,24 @@ export const styleTabConfig: TabPaneConfig = {
           name: 'transform',
           items: [
             {
+              type: 'data-source-field-select',
               name: 'rotate',
               text: '旋转角度',
+              checkStrictly: false,
+              dataSourceFieldType: ['string'],
+              fieldConfig: {
+                type: 'text',
+              },
             },
             {
+              type: 'data-source-field-select',
               name: 'scale',
               text: '缩放',
+              checkStrictly: false,
+              dataSourceFieldType: ['number', 'string'],
+              fieldConfig: {
+                type: 'text',
+              },
             },
           ],
         },
@@ -219,13 +344,11 @@ export const advancedTabConfig: TabPaneConfig = {
     {
       name: 'created',
       text: 'created',
-      labelWidth: '100px',
       type: 'code-select',
     },
     {
       name: 'mounted',
       text: 'mounted',
-      labelWidth: '100px',
       type: 'code-select',
     },
   ],
@@ -250,15 +373,23 @@ export const displayTabConfig: TabPaneConfig = {
               name: 'field',
               value: 'key',
               label: '字段',
+              checkStrictly: false,
+              dataSourceFieldType: ['string', 'number', 'boolean', 'any'],
             },
             {
               type: 'select',
               options: (mForm, { model }) => {
-                const [id, field] = model.field;
+                const [id, ...fieldNames] = model.field;
 
                 const ds = dataSourceService.getDataSourceById(id);
 
-                const type = ds?.fields.find((f) => f.name === field)?.type;
+                let fields = ds?.fields || [];
+                let type = '';
+                (fieldNames || []).forEach((fieldName: string) => {
+                  const field = fields.find((f) => f.name === fieldName);
+                  fields = field?.fields || [];
+                  type = field?.type || '';
+                });
 
                 if (type === 'array') {
                   return arrayOptions;
@@ -290,11 +421,17 @@ export const displayTabConfig: TabPaneConfig = {
                 {
                   name: 'value',
                   type: (mForm, { model }) => {
-                    const [id, field] = model.field;
+                    const [id, ...fieldNames] = model.field;
 
                     const ds = dataSourceService.getDataSourceById(id);
 
-                    const type = ds?.fields.find((f) => f.name === field)?.type;
+                    let fields = ds?.fields || [];
+                    let type = '';
+                    (fieldNames || []).forEach((fieldName: string) => {
+                      const field = fields.find((f) => f.name === fieldName);
+                      fields = field?.fields || [];
+                      type = field?.type || '';
+                    });
 
                     if (type === 'number') {
                       return 'number';
@@ -331,13 +468,13 @@ export const displayTabConfig: TabPaneConfig = {
  * @param config 组件属性配置
  * @returns Object
  */
-export const fillConfig = (config: FormConfig = []) => [
+export const fillConfig = (config: FormConfig = [], labelWidth = '80px'): FormConfig => [
   {
     type: 'tab',
+    labelWidth,
     items: [
       {
         title: '属性',
-        labelWidth: '80px',
         items: [
           // 组件类型，必须要有
           {

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

@@ -1,32 +1,53 @@
 import type { CodeBlockContent } from '@tmagic/schema';
 import type { SlideType } from '../type';
-declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
-    content: CodeBlockContent;
-    disabled?: boolean | undefined;
-    isDataSource?: boolean | undefined;
-    dataSourceType?: string | undefined;
-    slideType?: SlideType | undefined;
-}>, {
-    show(): void;
-    hide(): void;
+declare const _default: import("vue").DefineComponent<{
+    width: import("vue").PropType<number>;
+    visible: import("vue").PropType<boolean>;
+    content: {
+        type: import("vue").PropType<CodeBlockContent>;
+        required: true;
+    };
+    disabled: {
+        type: import("vue").PropType<boolean>;
+    };
+    isDataSource: {
+        type: import("vue").PropType<boolean>;
+    };
+    dataSourceType: {
+        type: import("vue").PropType<string>;
+    };
+    slideType: {
+        type: import("vue").PropType<SlideType>;
+    };
+}, {
+    show(): Promise<void>;
+    hide(): Promise<void>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:width": (width: number) => void;
+    "update:visible": (visible: boolean) => void;
     submit: (values: CodeBlockContent) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
-    content: CodeBlockContent;
-    disabled?: boolean | undefined;
-    isDataSource?: boolean | undefined;
-    dataSourceType?: string | undefined;
-    slideType?: SlideType | undefined;
-}>>> & {
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    width: import("vue").PropType<number>;
+    visible: import("vue").PropType<boolean>;
+    content: {
+        type: import("vue").PropType<CodeBlockContent>;
+        required: true;
+    };
+    disabled: {
+        type: import("vue").PropType<boolean>;
+    };
+    isDataSource: {
+        type: import("vue").PropType<boolean>;
+    };
+    dataSourceType: {
+        type: import("vue").PropType<string>;
+    };
+    slideType: {
+        type: import("vue").PropType<SlideType>;
+    };
+}>> & {
     onSubmit?: ((values: CodeBlockContent) => any) | undefined;
+    "onUpdate:width"?: ((width: number) => any) | undefined;
+    "onUpdate:visible"?: ((visible: boolean) => any) | 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/components/CodeParams.vue.d.ts

@@ -1,15 +1,15 @@
 import type { CodeParamStatement } from '../type';
-declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<{
     model: any;
-    size?: "default" | "small" | "large" | undefined;
+    size?: "small" | "large" | "default" | undefined;
     disabled?: boolean | undefined;
     name: string;
     paramsConfig: CodeParamStatement[];
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (...args: any[]) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
     model: any;
-    size?: "default" | "small" | "large" | undefined;
+    size?: "small" | "large" | "default" | undefined;
     disabled?: boolean | undefined;
     name: string;
     paramsConfig: CodeParamStatement[];
@@ -18,7 +18,7 @@ declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimePr
 }, {}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
+type __VLS_TypePropsToOption<T> = {
     [K in keyof T]-?: {} extends Pick<T, K> ? {
         type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
     } : {

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

@@ -1,5 +1,5 @@
 import { MenuButton, MenuComponent } from '../type';
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<{
     menuData?: (MenuButton | MenuComponent)[] | undefined;
     isSubMenu?: boolean | undefined;
     active?: string | number | undefined;
@@ -25,10 +25,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
         clientX: number;
     }) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    mouseenter: () => void;
     show: () => void;
     hide: () => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    mouseenter: () => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<{
     menuData?: (MenuButton | MenuComponent)[] | undefined;
     isSubMenu?: boolean | undefined;
     active?: string | number | undefined;
@@ -49,15 +49,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     title?(_: {}): any;
 }>;
 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;
-    };
-};
 type __VLS_WithDefaults<P, D> = {
     [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
         default: D[K];
@@ -71,3 +62,12 @@ type __VLS_WithTemplateSlots<T, S> = T & {
         $slots: S;
     };
 };
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<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;
+    };
+};