@tmagic/editor 1.6.0 → 1.7.0-beta.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.6.0",
+  "version": "1.7.0-beta.0",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -58,11 +58,11 @@
     "moveable": "^0.53.0",
     "serialize-javascript": "^6.0.2",
     "sortablejs": "^1.15.6",
-    "@tmagic/design": "1.6.0",
-    "@tmagic/form": "1.6.0",
-    "@tmagic/stage": "1.6.0",
-    "@tmagic/utils": "1.6.0",
-    "@tmagic/table": "1.6.0"
+    "@tmagic/design": "1.7.0-beta.0",
+    "@tmagic/form": "1.7.0-beta.0",
+    "@tmagic/utils": "1.7.0-beta.0",
+    "@tmagic/stage": "1.7.0-beta.0",
+    "@tmagic/table": "1.7.0-beta.0"
   },
   "devDependencies": {
     "@types/events": "^3.0.3",
@@ -74,9 +74,9 @@
   },
   "peerDependencies": {
     "monaco-editor": "^0.48.0",
-    "typescript": "^5.9.2",
-    "vue": "^3.5.20",
-    "@tmagic/core": "1.6.0"
+    "typescript": "^5.9.3",
+    "vue": "^3.5.22",
+    "@tmagic/core": "1.7.0-beta.0"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/components/ToolButton.vue

@@ -12,13 +12,20 @@
 
     <template v-else-if="data.type === 'button'">
       <TMagicTooltip v-if="data.tooltip" effect="dark" placement="bottom-start" :content="data.tooltip">
-        <TMagicButton size="small" link :disabled="disabled"
-          ><MIcon v-if="data.icon" :icon="data.icon"></MIcon><span>{{ data.text }}</span></TMagicButton
-        >
+        <TMagicButton size="small" link :disabled="disabled">
+          <template #icon v-if="data.icon">
+            <MIcon :icon="data.icon"></MIcon>
+          </template>
+          <template #default v-if="data.text">{{ data.text }}</template>
+        </TMagicButton>
       </TMagicTooltip>
-      <TMagicButton v-else size="small" link :disabled="disabled" :title="data.text"
-        ><MIcon v-if="data.icon" :icon="data.icon"></MIcon><span>{{ data.text }}</span></TMagicButton
-      >
+
+      <TMagicButton v-else size="small" link :disabled="disabled" :title="data.text">
+        <template #icon v-if="data.icon">
+          <MIcon :icon="data.icon"></MIcon>
+        </template>
+        <template #default v-if="data.text">{{ data.text }}</template>
+      </TMagicButton>
     </template>
 
     <TMagicDropdown

package/src/fields/DataSourceFieldSelect/Index.vue

@@ -32,7 +32,6 @@
       content="选择数据源"
     >
       <TMagicButton
-        style="margin-left: 5px"
         :type="showDataSourceFieldSelect ? 'primary' : 'default'"
         :size="size"
         @click="showDataSourceFieldSelect = !showDataSourceFieldSelect"

package/src/fields/DisplayConds.vue

@@ -55,7 +55,7 @@ const config = computed<GroupListConfig>(() => ({
     {
       type: 'table',
       name: 'cond',
-      operateColWidth: 100,
+      operateColWidth: 80,
       enableToggleMode: false,
       items: [
         parentFields.value.length
@@ -93,7 +93,7 @@ const config = computed<GroupListConfig>(() => ({
           type: 'cond-op-select',
           parentFields: parentFields.value,
           label: '条件',
-          width: 160,
+          width: 140,
           name: 'op',
         },
         {

package/src/fields/StyleSetter/Index.vue

@@ -1,14 +1,19 @@
 <template>
-  <div class="m-fields-style-setter">
-    <TMagicCollapse :model-value="collapseValue">
-      <template v-for="(item, index) in list" :key="index">
-        <TMagicCollapseItem :name="`${index}`">
-          <template #title><MIcon :icon="Grid"></MIcon>{{ item.title }}</template>
-          <component v-if="item.component" :is="item.component" :values="model[name]" @change="change"></component>
-        </TMagicCollapseItem>
-      </template>
-    </TMagicCollapse>
-  </div>
+  <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>
+        <component
+          v-if="item.component"
+          :is="item.component"
+          :values="model[name]"
+          :size="size"
+          :disabled="disabled"
+          @change="change"
+        ></component>
+      </TMagicCollapseItem>
+    </template>
+  </TMagicCollapse>
 </template>
 
 <script setup lang="ts">

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

@@ -6,13 +6,21 @@
         :key="index"
         link
         :class="model[name] === item.value && 'btn-active'"
+        :disabled="disabled"
         @click="changeHandler(item.value)"
       >
         <div :class="['position-icon', item.class, model[name] === item.value && 'active']"></div>
       </TMagicButton>
     </div>
     <div class="custom-value">
-      <TMagicInput v-model="model[name]" size="small" placeholder="自定义背景位置" clearable @change="changeHandler">
+      <TMagicInput
+        v-model="model[name]"
+        placeholder="自定义背景位置"
+        clearable
+        :size="size"
+        :disabled="disabled"
+        @change="changeHandler"
+      >
       </TMagicInput>
     </div>
   </div>

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

@@ -30,7 +30,7 @@
       </div>
     </div>
     <div class="border-value-container">
-      <MContainer :config="config" :model="model" @change="change"></MContainer>
+      <MContainer :config="config" :model="model" :size="size" :disabled="disabled" @change="change"></MContainer>
     </div>
   </div>
 </template>
@@ -67,7 +67,6 @@ const config = computed(() => ({
     {
       name: `border${direction.value}Style`,
       text: '边框样式',
-
       labelWidth: '68px',
       type: 'data-source-field-select',
       fieldConfig: {
@@ -90,6 +89,8 @@ const emit = defineEmits<{
 withDefaults(
   defineProps<{
     model: FormValue;
+    disabled?: boolean;
+    size?: 'large' | 'default' | 'small';
   }>(),
   {},
 );

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

@@ -4,10 +4,11 @@
       <span class="help-txt" v-if="item.text">{{ item.text }}</span>
       <span class="next-input">
         <input
-          v-model="model[item.name]"
+          :model-value="model[item.name]"
+          placeholder="0"
           :title="model[item.name]"
+          :disabled="disabled"
           @change="change($event, item.name)"
-          placeholder="0"
         />
       </span>
     </div>
@@ -60,6 +61,8 @@ const emit = defineEmits<{
 
 withDefaults(
   defineProps<{
+    disabled?: boolean;
+    size?: 'large' | 'default' | 'small';
     model: FormValue;
   }>(),
   {},

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

@@ -3,10 +3,11 @@
     <div v-for="(item, index) in list" :key="index" :class="item.class">
       <span class="next-input">
         <input
-          v-model="model[item.name]"
+          :model-value="model[item.name]"
+          placeholder="0"
           :title="model[item.name]"
+          :disabled="disabled"
           @change="change($event, item.name)"
-          placeholder="0"
         />
       </span>
     </div>
@@ -42,6 +43,8 @@ const emit = defineEmits<{
 withDefaults(
   defineProps<{
     model: FormValue;
+    disabled?: boolean;
+    size?: 'large' | 'default' | 'small';
   }>(),
   {},
 );

package/src/fields/StyleSetter/pro/Background.vue

@@ -1,5 +1,5 @@
 <template>
-  <MContainer :config="config" :model="values" @change="change"></MContainer>
+  <MContainer :config="config" :model="values" :size="size" :disabled="disabled" @change="change"></MContainer>
 </template>
 
 <script lang="ts" setup>
@@ -11,7 +11,11 @@ import type { StyleSchema } from '@tmagic/schema';
 import BackgroundPosition from '../components/BackgroundPosition.vue';
 import { BackgroundNoRepeat, BackgroundRepeat, BackgroundRepeatX, BackgroundRepeatY } from '../icons/background-repeat';
 
-defineProps<{ values: Partial<StyleSchema> }>();
+defineProps<{
+  values: Partial<StyleSchema>;
+  disabled?: boolean;
+  size?: 'large' | 'default' | 'small';
+}>();
 
 const emit = defineEmits<{
   change: [v: StyleSchema, eventData: ContainerChangeEventData];

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

@@ -1,6 +1,6 @@
 <template>
-  <MContainer :config="config" :model="values" @change="change"></MContainer>
-  <Border :model="values" @change="change"></Border>
+  <MContainer :config="config" :model="values" :size="size" :disabled="disabled" @change="change"></MContainer>
+  <Border :model="values" :size="size" :disabled="disabled" @change="change"></Border>
 </template>
 
 <script lang="ts" setup>
@@ -9,7 +9,11 @@ import type { StyleSchema } from '@tmagic/schema';
 
 import Border from '../components/Border.vue';
 
-defineProps<{ values: Partial<StyleSchema> }>();
+defineProps<{
+  values: Partial<StyleSchema>;
+  disabled?: boolean;
+  size?: 'large' | 'default' | 'small';
+}>();
 
 const emit = defineEmits<{
   change: [v: StyleSchema, eventData: ContainerChangeEventData];

package/src/fields/StyleSetter/pro/Font.vue

@@ -1,5 +1,5 @@
 <template>
-  <MContainer :config="config" :model="values" @change="change"></MContainer>
+  <MContainer :config="config" :model="values" :size="size" :disabled="disabled" @change="change"></MContainer>
 </template>
 
 <script lang="ts" setup>
@@ -10,7 +10,11 @@ import type { StyleSchema } from '@tmagic/schema';
 
 import { AlignCenter, AlignLeft, AlignRight } from '../icons/text-align';
 
-defineProps<{ values: Partial<StyleSchema> }>();
+defineProps<{
+  values: Partial<StyleSchema>;
+  disabled?: boolean;
+  size?: 'large' | 'default' | 'small';
+}>();
 
 const emit = defineEmits<{
   change: [v: StyleSchema, eventData: ContainerChangeEventData];

package/src/fields/StyleSetter/pro/Layout.vue

@@ -1,6 +1,12 @@
 <template>
-  <MContainer :config="config" :model="values" @change="change"></MContainer>
-  <Box v-show="!['fixed', 'absolute'].includes(values.position)" :model="values" @change="change"></Box>
+  <MContainer :config="config" :model="values" :size="size" :disabled="disabled" @change="change"></MContainer>
+  <Box
+    v-show="!['fixed', 'absolute'].includes(values.position)"
+    :model="values"
+    :size="size"
+    :disabled="disabled"
+    @change="change"
+  ></Box>
 </template>
 
 <script lang="ts" setup>
@@ -28,6 +34,8 @@ import {
 
 defineProps<{
   values: Partial<StyleSchema>;
+  disabled?: boolean;
+  size?: 'large' | 'default' | 'small';
 }>();
 
 const emit = defineEmits<{

package/src/fields/StyleSetter/pro/Position.vue

@@ -1,12 +1,16 @@
 <template>
-  <MContainer :config="config" :model="values" @change="change"></MContainer>
+  <MContainer :config="config" :model="values" :size="size" :disabled="disabled" @change="change"></MContainer>
 </template>
 
 <script lang="ts" setup>
 import { ContainerChangeEventData, MContainer } from '@tmagic/form';
 import type { StyleSchema } from '@tmagic/schema';
 
-const props = defineProps<{ values: Partial<StyleSchema> }>();
+const props = defineProps<{
+  values: Partial<StyleSchema>;
+  disabled?: boolean;
+  size?: 'large' | 'default' | 'small';
+}>();
 
 const emit = defineEmits<{
   change: [v: string | StyleSchema, eventData: ContainerChangeEventData];

package/src/layouts/page-bar/PageList.vue

@@ -11,19 +11,21 @@
       :width="160"
       :destroy-on-close="true"
     >
-      <div>
-        <slot name="page-list-popover" :list="list">
-          <ToolButton
-            v-for="(item, index) in list"
-            :data="{
-              type: 'button',
-              text: item.devconfig?.tabName || item.name || item.id,
-              className: item.id === page?.id ? 'active' : '',
-              handler: () => switchPage(item.id),
-            }"
-            :key="index"
-          ></ToolButton>
-        </slot>
+      <div class="page-bar-popover-wrapper">
+        <div class="page-bar-popover-inner">
+          <slot name="page-list-popover" :list="list">
+            <ToolButton
+              v-for="(item, index) in list"
+              :data="{
+                type: 'button',
+                text: item.devconfig?.tabName || item.name || item.id,
+                className: item.id === page?.id ? 'active' : '',
+                handler: () => switchPage(item.id),
+              }"
+              :key="index"
+            ></ToolButton>
+          </slot>
+        </div>
       </div>
       <template #reference>
         <TMagicIcon class="m-editor-page-list-menu-icon">

package/src/layouts/sidebar/ComponentListPanel.vue

@@ -5,7 +5,7 @@
     <SearchInput @search="filterTextChangeHandler"></SearchInput>
 
     <slot name="component-list" :component-group-list="list">
-      <TMagicCollapse class="ui-component-panel" :model-value="collapseValue">
+      <TMagicCollapse class="ui-component-panel" v-model="collapseValue">
         <template v-for="(group, index) in list">
           <TMagicCollapseItem v-if="group.items && group.items.length" :key="index" :name="`${index}`">
             <template #title><MIcon :icon="Grid"></MIcon>{{ group.title }}</template>
@@ -34,7 +34,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, ref } from 'vue';
+import { computed, inject, ref, watch } from 'vue';
 import { Grid } from '@element-plus/icons-vue';
 import serialize from 'serialize-javascript';
 
@@ -74,10 +74,19 @@ const list = computed<ComponentGroup[]>(() =>
     items: group.items.filter((item: ComponentItem) => item.text.includes(searchText.value)),
   })),
 );
-const collapseValue = computed(() =>
-  Array(list.value?.length)
-    .fill(1)
-    .map((x, i) => `${i}`),
+
+const collapseValue = ref();
+
+watch(
+  list,
+  () => {
+    collapseValue.value = Array(list.value?.length)
+      .fill(1)
+      .map((x, i) => `${i}`);
+  },
+  {
+    immediate: true,
+  },
 );
 
 let timeout: ReturnType<typeof setTimeout> | undefined;

package/src/services/editor.ts

@@ -574,8 +574,6 @@ class Editor extends BaseService {
     nodes.splice(targetIndex, 1, newConfig);
     this.set('nodes', [...nodes]);
 
-    // update后会触发依赖收集，收集完后会掉stage.update方法
-
     if (isPage(newConfig) || isPageFragment(newConfig)) {
       this.set('page', newConfig as MPage | MPageFragment);
     }
@@ -591,6 +589,7 @@ class Editor extends BaseService {
 
   /**
    * 更新节点
+   * update后会触发依赖收集，收集完后会掉stage.update方法
    * @param config 新的节点配置，配置中需要有id信息
    * @returns 更新后的节点配置
    */

package/src/theme/component-list-panel.scss

@@ -11,6 +11,17 @@
         border-bottom: 1px solid $border-color;
         margin-bottom: 10px;
       }
+
+      > .el-collapse-item__header {
+        padding: 0 10px;
+        box-sizing: border-box;
+      }
+    }
+
+    .el-collapse-item__title {
+      display: flex;
+      align-items: center;
+      gap: 3px;
     }
 
     .el-collapse-item__header,

package/src/theme/data-source-field-select.scss

@@ -13,4 +13,8 @@
       flex: 2;
     }
   }
+  .tmagic-design-button {
+    margin-left: 5px;
+    padding: 5px 8px;
+  }
 }

package/src/theme/nav-menu.scss

@@ -18,6 +18,7 @@
 
   > div {
     display: flex;
+    gap: 3px;
     height: 100%;
     z-index: 1;
     align-items: center;
@@ -76,5 +77,10 @@
         transform: rotate(-90deg);
       }
     }
+
+    .t-button {
+      padding-left: 1px;
+      padding-right: 1px;
+    }
   }
 }

package/src/theme/page-bar.scss

@@ -92,6 +92,11 @@
     padding: 4px 0;
   }
 
+  .page-bar-popover-wrapper {
+    max-height: calc(100vh - $page-bar-height - 20px);
+    overflow: auto;
+  }
+
   .menu-item {
     cursor: pointer;
     transition: all 0.2s ease 0s;

package/src/theme/props-panel.scss

@@ -72,11 +72,6 @@
       align-items: center;
       border-bottom: 2px solid $border-color;
     }
-
-    .tmagic-design-form {
-      padding-right: 10px;
-      padding-left: 10px;
-    }
   }
 
   .m-editor-props-panel-src-icon {

package/src/theme/style-setter/background.scss

@@ -1,3 +1,5 @@
+@use "../common/var" as *;
+
 .background-position-container {
   display: flex;
   width: 100%;
@@ -6,8 +8,8 @@
     flex-wrap: wrap;
     width: 80px;
     height: auto;
-    .el-button {
-      & + .el-button {
+    .tmagic-design-button {
+      & + .tmagic-design-button {
         margin-left: 2px;
       }
       &:nth-child(3n + 1) {
@@ -15,13 +17,18 @@
       }
     }
 
+    .t-button--variant-text {
+      padding-left: 2px;
+      padding-right: 2px;
+    }
+
     .position-icon {
       position: relative;
       width: 14px;
       height: 14px;
       border: 1px solid #1d1f24;
       &.active {
-        background-color: var(--el-color-primary);
+        background-color: var($theme-color);
         &::after {
           border: 1px solid #fff;
         }

package/src/theme/style-setter/index.scss

@@ -8,12 +8,25 @@
   .tmagic-design-collapse-item {
     > .el-collapse-item__header {
       background-color: #f2f3f7;
-      height: 36px;
-      padding: 10px;
+      height: 26px;
+      min-height: 26px;
+      line-height: 26px;
+      padding: 0 20px;
+      box-sizing: border-box;
     }
 
     .el-collapse-item__wrap {
-      padding: 0 10px;
+      padding: 10px 20px;
+    }
+
+    .el-collapse-item__title {
+      display: flex;
+      align-items: center;
+      gap: 3px;
+    }
+
+    .el-collapse-item__content {
+      padding: 0;
     }
   }
 }

package/src/utils/props.ts

@@ -17,7 +17,12 @@
  * limitations under the License.
  */
 
-import { NODE_CONDS_KEY, NODE_DISABLE_CODE_BLOCK_KEY, NODE_DISABLE_DATA_SOURCE_KEY } from '@tmagic/core';
+import {
+  NODE_CONDS_KEY,
+  NODE_CONDS_RESULT_KEY,
+  NODE_DISABLE_CODE_BLOCK_KEY,
+  NODE_DISABLE_DATA_SOURCE_KEY,
+} from '@tmagic/core';
 import { tMagicMessage } from '@tmagic/design';
 import type { FormConfig, FormState, TabConfig, TabPaneConfig } from '@tmagic/form';
 
@@ -163,8 +168,20 @@ export const advancedTabConfig: TabPaneConfig = {
 
 export const displayTabConfig: TabPaneConfig = {
   title: '显示条件',
-  display: (_vm: FormState, { model }: any) => model.type !== 'page',
+  display: (_state: FormState, { model }: any) => model.type !== 'page',
   items: [
+    {
+      name: NODE_CONDS_RESULT_KEY,
+      type: 'select',
+      text: '条件成立时',
+      defaultValue: false,
+      options: [
+        { text: '显示', value: false },
+        { text: '隐藏', value: true },
+      ],
+      extra: (_state, { model }) =>
+        `条件成立时${model[NODE_CONDS_RESULT_KEY] ? '隐藏' : '显示'}，不成立时${model[NODE_CONDS_RESULT_KEY] ? '显示' : '隐藏'}；<br />同一条件组内的所有条件配置同时成立时表示该条件组成立，任意一个条件组成立时表示条件成立(条件组内为且的关系，条件组间为或的关系)；<br />条件为空时表示成立；`,
+    },
     {
       type: 'display-conds',
       name: NODE_CONDS_KEY,