@tmagic/editor 1.8.0-beta.2 → 1.8.0-beta.21

package/src/fields/EventSelect.vue

@@ -12,16 +12,21 @@
       @change="onChangeHandler"
     ></MTable>
 
-    <div v-else class="fullWidth">
-      <TMagicButton
-        v-if="!isCompareMode"
-        class="create-button"
-        type="primary"
-        :size="size"
-        :disabled="disabled"
-        @click="addEvent()"
-        >添加事件</TMagicButton
-      >
+    <div v-else class="fullWidth event-select-container">
+      <div class="event-select-header">
+        <div class="event-select-title">事件配置</div>
+        <TMagicButton
+          v-if="!isCompareMode && displayList.length > 0"
+          class="create-button"
+          text
+          type="primary"
+          :icon="Plus"
+          :size="size"
+          :disabled="disabled"
+          @click="addEvent()"
+          >添加事件</TMagicButton
+        >
+      </div>
       <MPanel
         v-for="entry in displayList"
         :key="entry.index"
@@ -32,32 +37,44 @@
         :model="entry.cardItem"
         :last-values="entry.lastCardItem"
         :is-compare="isCompareMode"
+        :hide-expand="false"
         :label-width="config.labelWidth || '100px'"
         @change="onChangeHandler"
       >
         <template #header>
-          <MFormContainer
-            class="fullWidth"
-            :config="eventNameConfig"
-            :model="entry.cardItem"
-            :last-values="entry.lastCardItem"
-            :is-compare="isCompareMode"
-            :disabled="disabled"
-            :size="size"
-            :prop="`${prop}.${entry.index}`"
-            @change="eventNameChangeHandler"
-          ></MFormContainer>
-          <TMagicButton
-            v-if="!isCompareMode"
-            style="color: #f56c6c"
-            link
-            :icon="Delete"
-            :disabled="disabled"
-            :size="size"
-            @click="removeEvent(Number(entry.index))"
-          ></TMagicButton>
+          <div class="event-item-header">
+            <MFormContainer
+              class="fullWidth"
+              :config="eventNameConfig"
+              :model="entry.cardItem"
+              :last-values="entry.lastCardItem"
+              :is-compare="isCompareMode"
+              :disabled="disabled"
+              :size="size"
+              :prop="`${prop}.${entry.index}`"
+              @change="eventNameChangeHandler"
+            ></MFormContainer>
+            <TMagicButton
+              class="event-item-delete-button"
+              v-if="!isCompareMode"
+              link
+              :icon="Delete"
+              :disabled="disabled"
+              :size="size"
+              @click="removeEvent(Number(entry.index))"
+            ></TMagicButton>
+          </div>
         </template>
       </MPanel>
+
+      <TMagicButton
+        v-if="!isCompareMode"
+        class="create-button fullWidth"
+        :icon="Plus"
+        :disabled="disabled"
+        @click="addEvent()"
+        >添加事件</TMagicButton
+      >
     </div>
   </div>
 </template>
@@ -65,13 +82,12 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
 import { Delete } from '@element-plus/icons-vue';
+import { Plus } from '@element-plus/icons-vue';
 import { has } from 'lodash-es';
 
-import type { EventOption, MComponent, MContainer } from '@tmagic/core';
 import { ActionType } from '@tmagic/core';
 import { TMagicButton } from '@tmagic/design';
 import type {
-  CascaderOption,
   CodeSelectColConfig,
   ContainerChangeEventData,
   DataSourceMethodSelectConfig,
@@ -84,10 +100,15 @@ import type {
   UISelectConfig,
 } from '@tmagic/form';
 import { defineFormItem, MContainer as MFormContainer, MPanel, MTable } from '@tmagic/form';
-import { DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX, traverseNode } from '@tmagic/utils';
 
 import { useServices } from '@editor/hooks/use-services';
-import { getCascaderOptionsFromFields } from '@editor/utils';
+import {
+  getCompActionAllowedValues,
+  getCompActionOptions,
+  getEventNameAllowedValues,
+  getEventNameOptions,
+  normalizeCompActionValue,
+} from '@editor/utils';
 
 defineOptions({
   name: 'MFieldsEventSelect',
@@ -105,7 +126,7 @@ const { editorService, dataSourceService, eventsService, codeBlockService, props
 const eventNameConfig = computed(() => {
   const defaultEventNameConfig = {
     name: 'name',
-    text: '事件',
+    text: '事件类型',
     type: (mForm: FormState | undefined, { formValue }: any) => {
       if (
         props.config.src !== 'component' ||
@@ -115,110 +136,84 @@ const eventNameConfig = computed(() => {
       }
       return 'select';
     },
-    labelWidth: '40px',
+    labelWidth: '70px',
     checkStrictly: () => props.config.src !== 'component',
     valueSeparator: '.',
-    options: (mForm: FormState, { formValue }: any) => {
-      let events: EventOption[] | CascaderOption[] = [];
-
-      if (props.config.src === 'component') {
-        events = eventsService.getEvent(formValue.type);
-
-        if (formValue.type === 'page-fragment-container' && formValue.pageFragmentId) {
-          const pageFragment = editorService.get('root')?.items?.find((page) => page.id === formValue.pageFragmentId);
-          if (pageFragment) {
-            events = [
-              {
-                label: pageFragment.name || '页面片容器',
-                value: pageFragment.id,
-                children: events,
-              },
-            ];
-            pageFragment.items.forEach((node) => {
-              traverseNode<MComponent | MContainer>(node, (node) => {
-                const nodeEvents = (node.type && eventsService.getEvent(node.type)) || [];
-
-                events.push({
-                  label: `${node.name}_${node.id}`,
-                  value: `${node.id}`,
-                  children: nodeEvents,
-                });
-              });
-            });
-
-            return events;
+    options: (_mForm: FormState, { formValue }: any) => getEventNameOptions(props.config.src, formValue),
+    rules: [
+      {
+        validator: ({ value, callback }: any, { formValue }: any) => {
+          const allowedNames = getEventNameAllowedValues(props.config as any, formValue);
+          if (allowedNames && allowedNames.size > 0 && value && !allowedNames.has(value)) {
+            return callback(`事件名(${value})不存在`);
           }
-        }
-
-        return events.map((option) => ({
-          text: option.label,
-          value: option.value,
-        }));
-      }
-
-      if (props.config.src === 'datasource') {
-        // 从数据源类型中获取到相关事件
-        events = dataSourceService.getFormEvent(formValue.type);
-        // 从数据源类型和实例中分别获取数据以追加数据变化的事件
-        const dataSource = dataSourceService.getDataSourceById(formValue.id);
-        const fields = dataSource?.fields || [];
-        if (fields.length > 0) {
-          return [
-            ...events,
-            {
-              label: '数据变化',
-              value: DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX,
-              children: getCascaderOptionsFromFields(fields),
-            },
-          ];
-        }
-
-        return events;
-      }
-    },
+          callback();
+        },
+        trigger: 'blur',
+      },
+    ],
   };
   return { ...defaultEventNameConfig, ...props.config.eventNameConfig };
 });
 
+const actionTypeOptions = computed(() => {
+  const o: {
+    text: string;
+    label: string;
+    value: string;
+    disabled?: boolean;
+  }[] = [
+    {
+      text: '组件',
+      label: '组件',
+      value: ActionType.COMP,
+    },
+  ];
+
+  if (!propsService.getDisabledCodeBlock()) {
+    o.push({
+      text: '代码',
+      label: '代码',
+      disabled: !Object.keys(codeBlockService.getCodeDsl() || {}).length,
+      value: ActionType.CODE,
+    });
+  }
+
+  if (!propsService.getDisabledDataSource()) {
+    o.push({
+      text: '数据源',
+      label: '数据源',
+      value: ActionType.DATA_SOURCE,
+    });
+  }
+
+  return o;
+});
+
 // 联动类型
 const actionTypeConfig = computed(() => {
   const defaultActionTypeConfig = {
     name: 'actionType',
     text: '联动类型',
     type: 'select',
+    labelPosition: 'left',
     defaultValue: ActionType.COMP,
-    options: () => {
-      const o: {
-        text: string;
-        label: string;
-        value: string;
-        disabled?: boolean;
-      }[] = [
-        {
-          text: '组件',
-          label: '组件',
-          value: ActionType.COMP,
-        },
-      ];
-
-      if (!propsService.getDisabledCodeBlock()) {
-        o.push({
-          text: '代码',
-          label: '代码',
-          disabled: !Object.keys(codeBlockService.getCodeDsl() || {}).length,
-          value: ActionType.CODE,
-        });
-      }
-
-      if (!propsService.getDisabledDataSource()) {
-        o.push({
-          text: '数据源',
-          label: '数据源',
-          value: ActionType.DATA_SOURCE,
-        });
-      }
-
-      return o;
+    options: actionTypeOptions.value,
+    rules: [
+      {
+        required: true,
+        message: '联动类型不能为空',
+      },
+      {
+        typeMatch: true,
+        trigger: 'blur',
+      },
+    ],
+    onChange: (_mForm: FormState, _v: string, { setModel }: any) => {
+      setModel('to', '');
+      setModel('method', '');
+      setModel('codeId', '');
+      setModel('dataSourceMethod', []);
     },
   };
   return { ...defaultActionTypeConfig, ...props.config.actionTypeConfig };
@@ -230,10 +225,17 @@ const targetCompConfig = computed(() => {
     name: 'to',
     text: '联动组件',
     type: 'ui-select',
+    labelPosition: 'left',
     display: (_mForm, { model }) => model.actionType === ActionType.COMP,
-    onChange: (_MForm, _v, { setModel }) => {
+    onChange: (_mForm, _v, { setModel }) => {
       setModel('method', '');
     },
+    rules: [
+      {
+        typeMatch: true,
+        trigger: 'blur',
+      },
+    ],
   };
   return { ...defaultTargetCompConfig, ...props.config.targetCompConfig };
 });
@@ -243,6 +245,7 @@ const compActionConfig = computed(() => {
   const defaultCompActionConfig: DynamicTypeConfig = {
     name: 'method',
     text: '动作',
+    labelPosition: 'left',
     type: (mForm: FormState | undefined, { model }: any) => {
       const to = editorService.getNodeById(model.to);
 
@@ -254,41 +257,20 @@ const compActionConfig = computed(() => {
     },
     checkStrictly: () => props.config.src !== 'component',
     display: (mForm: FormState | undefined, { model }: any) => model.actionType === ActionType.COMP,
-    options: (mForm: FormState, { model }: any) => {
-      const node = editorService.getNodeById(model.to);
-      if (!node?.type) return [];
-
-      let methods: EventOption[] | CascaderOption[] = [];
-
-      methods = eventsService.getMethod(node.type, model.to);
-
-      if (node.type === 'page-fragment-container' && node.pageFragmentId) {
-        const pageFragment = editorService.get('root')?.items?.find((page) => page.id === node.pageFragmentId);
-        if (pageFragment) {
-          methods = [];
-          pageFragment.items.forEach((node: MComponent | MContainer) => {
-            traverseNode<MComponent | MContainer>(node, (node) => {
-              const nodeMethods = (node.type && eventsService.getMethod(node.type, node.id)) || [];
-
-              if (nodeMethods.length) {
-                methods.push({
-                  label: `${node.name}_${node.id}`,
-                  value: `${node.id}`,
-                  children: nodeMethods,
-                });
-              }
-            });
-          });
-
-          return methods;
-        }
-      }
-
-      return methods.map((method) => ({
-        text: method.label,
-        value: method.value,
-      }));
-    },
+    options: (_mForm: FormState, { model }: any) => getCompActionOptions(model.to),
+    rules: [
+      {
+        trigger: 'blur',
+        validator: ({ value, callback }: any, { model }: any) => {
+          const allowedMethods = getCompActionAllowedValues(props.config as any, model);
+          const normalized = normalizeCompActionValue(value);
+          if (allowedMethods && allowedMethods.size > 0 && normalized && !allowedMethods.has(normalized)) {
+            return callback(`动作名(${normalized})不存在`);
+          }
+          callback();
+        },
+      },
+    ],
   };
   return { ...defaultCompActionConfig, ...props.config.compActionConfig };
 });
@@ -329,10 +311,12 @@ const tableConfig = computed(
           label: '事件名',
           type: eventNameConfig.value.type,
           options: (mForm: FormState, { formValue }: any) =>
-            eventsService.getEvent(formValue.type).map((option: any) => ({
-              text: option.label,
-              value: option.value,
-            })),
+            eventsService
+              .getEvent(formValue.type, { node: editorService.getNodeById(formValue.id) })
+              .map((option: any) => ({
+                text: option.label,
+                value: option.value,
+              })),
         },
         {
           name: 'to',
@@ -347,7 +331,7 @@ const tableConfig = computed(
             const node = editorService.getNodeById(model.to);
             if (!node?.type) return [];
 
-            return eventsService.getMethod(node.type, model.to).map((option: any) => ({
+            return eventsService.getMethod(node.type, { targetId: model.to, node }).map((option: any) => ({
               text: option.label,
               value: option.value,
             }));
@@ -362,6 +346,7 @@ const actionsConfig = computed(
   () =>
     defineFormItem({
       type: 'panel',
+      labelPosition: 'left',
       items: [
         {
           type: 'group-list',
@@ -369,6 +354,7 @@ const actionsConfig = computed(
           expandAll: true,
           enableToggleMode: false,
           titlePrefix: '动作',
+          labelPosition: 'left',
           items: [
             actionTypeConfig.value,
             targetCompConfig.value,

package/src/fields/StyleSetter/Index.vue

@@ -2,11 +2,12 @@
   <TMagicCollapse class="m-fields-style-setter" v-model="collapseValue">
     <template v-for="(item, index) in list" :key="index">
       <TMagicCollapseItem :name="`${index}`">
-        <template #title><MIcon :icon="Grid"></MIcon>{{ item.title }}</template>
+        <template #title>{{ item.title }}</template>
         <component
           v-if="item.component"
           :is="item.component"
           :values="model[name]"
+          :prop="prop || name"
           :last-values="lastValues?.[name]"
           :is-compare="isCompare"
           :size="size"
@@ -21,21 +22,18 @@
 
 <script setup lang="ts">
 import { shallowRef } from 'vue';
-import { Grid } from '@element-plus/icons-vue';
 
 import { TMagicCollapse, TMagicCollapseItem } from '@tmagic/design';
 import type { ContainerChangeEventData, FieldProps } from '@tmagic/form';
 import type { StyleSchema } from '@tmagic/schema';
 
-import MIcon from '@editor/components/Icon.vue';
-
 import { Background, Border, Font, Layout, Position, Transform } from './pro/';
 
 defineOptions({
   name: 'MFieldsStyleSetter',
 });
 
-const props = defineProps<FieldProps<StyleSchema>>();
+defineProps<FieldProps<StyleSchema>>();
 
 const emit = defineEmits<{
   change: [v: any, eventData: ContainerChangeEventData];
@@ -77,13 +75,6 @@ const collapseValue = shallowRef(
 );
 
 const change = (v: any, eventData: ContainerChangeEventData) => {
-  eventData.changeRecords?.forEach((record) => {
-    if (props.prop) {
-      record.propPath = `${props.prop}.${record.propPath}`;
-    } else if (props.name) {
-      record.propPath = `${props.name}.${record.propPath}`;
-    }
-  });
   emit('change', v, eventData);
 };
 

package/src/fields/StyleSetter/components/Border.vue

@@ -4,27 +4,31 @@
       <div class="border-icon-container-row">
         <div
           class="border-icon border-icon-top"
-          :class="{ active: direction === 'Top' }"
+          :class="{ active: direction === 'Top', configured: isConfigured('Top') }"
           @click="selectDirection('Top')"
         ></div>
       </div>
       <div class="border-icon-container-row">
         <div
           class="border-icon border-icon-left"
-          :class="{ active: direction === 'Left' }"
+          :class="{ active: direction === 'Left', configured: isConfigured('Left') }"
           @click="selectDirection('Left')"
         ></div>
-        <div class="border-icon" :class="{ active: direction === '' }" @click="selectDirection()"></div>
+        <div
+          class="border-icon center"
+          :class="{ active: direction === '', configured: isConfigured('') }"
+          @click="selectDirection()"
+        ></div>
         <div
           class="border-icon border-icon-right"
-          :class="{ active: direction === 'Right' }"
+          :class="{ active: direction === 'Right', configured: isConfigured('Right') }"
           @click="selectDirection('Right')"
         ></div>
       </div>
       <div class="border-icon-container-row">
         <div
           class="border-icon border-icon-bottom"
-          :class="{ active: direction === 'Bottom' }"
+          :class="{ active: direction === 'Bottom', configured: isConfigured('Bottom') }"
           @click="selectDirection('Bottom')"
         ></div>
       </div>
@@ -98,7 +102,7 @@ const emit = defineEmits<{
   addDiffCount: [];
 }>();
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     model: FormValue;
     lastValues?: FormValue;
@@ -109,6 +113,11 @@ withDefaults(
   {},
 );
 
+const hasValue = (value: unknown) => value !== undefined && value !== null && value !== '';
+
+const isConfigured = (d: string) =>
+  ['Width', 'Color', 'Style'].some((key) => hasValue(props.model?.[`border${d}${key}`]));
+
 const change = (value: StyleSchema, eventData: ContainerChangeEventData) => {
   eventData.changeRecords?.forEach((record) => {
     emit('change', record.value, {

package/src/fields/StyleSetter/icons/align-items/Center.vue

@@ -0,0 +1,19 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+    <path
+      d="M12 4C12.5523 4 13 4.44772 13 5V11C13 11.5523 12.5523 12 12 12H4C3.44772 12 3 11.5523 3 11V5C3 4.44772 3.44772 4 4 4H12ZM4.5 5C4.22386 5 4 5.22386 4 5.5V10.5C4 10.7761 4.22386 11 4.5 11H11.5C11.7761 11 12 10.7761 12 10.5V5.5C12 5.22386 11.7761 5 11.5 5H4.5Z"
+    />
+    <rect
+      x="13.75"
+      y="7.75"
+      width="0.5"
+      height="11.5"
+      rx="0.25"
+      transform="rotate(90 13.75 7.75)"
+      stroke="black"
+      stroke-opacity="0.3"
+      style="stroke: black; stroke-opacity: 0.3"
+      stroke-width="0.5"
+    />
+  </svg>
+</template>

package/src/fields/StyleSetter/icons/align-items/FlexEnd.vue

@@ -0,0 +1,19 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+    <path
+      d="M12 3C12.5523 3 13 3.44772 13 4V10C13 10.5523 12.5523 11 12 11H4C3.44772 11 3 10.5523 3 10V4C3 3.44772 3.44772 3 4 3H12ZM4.5 4C4.22386 4 4 4.22386 4 4.5V9.5C4 9.77614 4.22386 10 4.5 10H11.5C11.7761 10 12 9.77614 12 9.5V4.5C12 4.22386 11.7761 4 11.5 4H4.5Z"
+    />
+    <rect
+      x="13.75"
+      y="12.25"
+      width="0.5"
+      height="11.5"
+      rx="0.25"
+      transform="rotate(90 13.75 12.25)"
+      stroke="black"
+      stroke-opacity="0.3"
+      style="stroke: black; stroke-opacity: 0.3"
+      stroke-width="0.5"
+    />
+  </svg>
+</template>

package/src/fields/StyleSetter/icons/align-items/FlexStart.vue

@@ -0,0 +1,19 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+    <path
+      d="M12 5C12.5523 5 13 5.44772 13 6V12C13 12.5523 12.5523 13 12 13H4C3.44772 13 3 12.5523 3 12V6C3 5.44772 3.44772 5 4 5H12ZM4.5 6C4.22386 6 4 6.22386 4 6.5V11.5C4 11.7761 4.22386 12 4.5 12H11.5C11.7761 12 12 11.7761 12 11.5V6.5C12 6.22386 11.7761 6 11.5 6H4.5Z"
+    />
+    <rect
+      x="13.75"
+      y="3.25"
+      width="0.5"
+      height="11.5"
+      rx="0.25"
+      transform="rotate(90 13.75 3.25)"
+      stroke="white"
+      stroke-opacity="0.3"
+      style="stroke: white; stroke-opacity: 0.3"
+      stroke-width="0.5"
+    />
+  </svg>
+</template>

package/src/fields/StyleSetter/icons/align-items/SpaceAround.vue

@@ -0,0 +1,34 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+    <path
+      d="M12 8C12.5523 8 13 8.44772 13 9V12C13 12.5523 12.5523 13 12 13H4C3.44772 13 3 12.5523 3 12V9C3 8.44772 3.44772 8 4 8H12ZM4.5 9C4.22386 9 4 9.22386 4 9.5V11.5C4 11.7761 4.22386 12 4.5 12H11.5C11.7761 12 12 11.7761 12 11.5V9.5C12 9.22386 11.7761 9 11.5 9H4.5Z"
+    />
+    <path
+      d="M12 2C12.5523 2 13 2.44772 13 3V6C13 6.55228 12.5523 7 12 7H4C3.44772 7 3 6.55228 3 6V3C3 2.44772 3.44772 2 4 2H12ZM4.5 3C4.22386 3 4 3.22386 4 3.5V5.5C4 5.77614 4.22386 6 4.5 6H11.5C11.7761 6 12 5.77614 12 5.5V3.5C12 3.22386 11.7761 3 11.5 3H4.5Z"
+    />
+    <rect
+      x="13.75"
+      y="10.25"
+      width="0.5"
+      height="11.5"
+      rx="0.25"
+      transform="rotate(90 13.75 10.25)"
+      stroke="black"
+      stroke-opacity="0.3"
+      style="stroke: black; stroke-opacity: 0.3"
+      stroke-width="0.5"
+    />
+    <rect
+      x="13.75"
+      y="4.25"
+      width="0.5"
+      height="11.5"
+      rx="0.25"
+      transform="rotate(90 13.75 4.25)"
+      stroke="black"
+      stroke-opacity="0.3"
+      style="stroke: black; stroke-opacity: 0.3"
+      stroke-width="0.5"
+    />
+  </svg>
+</template>

package/src/fields/StyleSetter/icons/align-items/SpaceBetween.vue

@@ -0,0 +1,34 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+    <path
+      d="M12 9C12.5523 9 13 9.44772 13 10V12C13 12.5523 12.5523 13 12 13H4C3.44772 13 3 12.5523 3 12V10C3 9.44772 3.44772 9 4 9H12ZM4.5 10C4.22386 10 4 10.2239 4 10.5V11.5C4 11.7761 4.22386 12 4.5 12H11.5C11.7761 12 12 11.7761 12 11.5V10.5C12 10.2239 11.7761 10 11.5 10H4.5Z"
+    />
+    <path
+      d="M12 3C12.5523 3 13 3.44772 13 4V6C13 6.55228 12.5523 7 12 7H4C3.44772 7 3 6.55228 3 6V4C3 3.44772 3.44772 3 4 3H12ZM4.5 4C4.22386 4 4 4.22386 4 4.5V5.5C4 5.77614 4.22386 6 4.5 6H11.5C11.7761 6 12 5.77614 12 5.5V4.5C12 4.22386 11.7761 4 11.5 4H4.5Z"
+    />
+    <rect
+      x="13.75"
+      y="14.25"
+      width="0.5"
+      height="11.5"
+      rx="0.25"
+      transform="rotate(90 13.75 14.25)"
+      stroke="black"
+      stroke-opacity="0.3"
+      style="stroke: black; stroke-opacity: 0.3"
+      stroke-width="0.5"
+    />
+    <rect
+      x="13.75"
+      y="1.25"
+      width="0.5"
+      height="11.5"
+      rx="0.25"
+      transform="rotate(90 13.75 1.25)"
+      stroke="black"
+      stroke-opacity="0.3"
+      style="stroke: black; stroke-opacity: 0.3"
+      stroke-width="0.5"
+    />
+  </svg>
+</template>