@tmagic/editor 1.5.4 → 1.5.6

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.4",
+  "version": "1.5.6",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -58,39 +58,29 @@
     "moveable": "^0.53.0",
     "serialize-javascript": "^6.0.0",
     "sortablejs": "^1.15.2",
-    "@tmagic/design": "1.5.4",
-    "@tmagic/stage": "1.5.4",
-    "@tmagic/form": "1.5.4",
-    "@tmagic/table": "1.5.4",
-    "@tmagic/utils": "1.5.4"
+    "@tmagic/design": "1.5.6",
+    "@tmagic/form": "1.5.6",
+    "@tmagic/utils": "1.5.6",
+    "@tmagic/stage": "1.5.6",
+    "@tmagic/table": "1.5.6"
   },
   "devDependencies": {
     "@types/events": "^3.0.0",
     "@types/lodash-es": "^4.17.4",
-    "@types/node": "^18.19.0",
     "@types/serialize-javascript": "^5.0.1",
     "@types/sortablejs": "^1.15.8",
-    "@vitejs/plugin-vue": "^5.2.1",
-    "@vue/compiler-sfc": "^3.5.12",
     "@vue/test-utils": "^2.4.6",
-    "rimraf": "^3.0.2",
-    "sass": "^1.83.0",
-    "tsc-alias": "^1.8.5",
-    "type-fest": "^4.10.3",
-    "vite": "^6.0.3"
+    "type-fest": "^4.10.3"
   },
   "peerDependencies": {
     "monaco-editor": "^0.48.0",
     "typescript": "*",
     "vue": ">=3.5.0",
-    "@tmagic/core": "1.5.4"
+    "@tmagic/core": "1.5.6"
   },
   "peerDependenciesMeta": {
     "typescript": {
       "optional": true
     }
-  },
-  "scripts": {
-    "build": "vite build"
   }
 }

package/src/components/SplitView.vue

@@ -45,7 +45,7 @@ const props = withDefaults(
     centerClass?: string;
   }>(),
   {
-    minLeft: 46,
+    minLeft: 1,
     minRight: 1,
     minCenter: 5,
   },
@@ -65,12 +65,21 @@ const getCenterWidth = (l = 0, r = 0) => {
   let center = clientWidth - left - right;
 
   if (center < props.minCenter) {
+    const diff = props.minCenter - center;
+
     center = props.minCenter;
-    if (right > center + props.minRight) {
-      right = clientWidth - left - center;
-    } else {
+
+    if (right - diff < props.minRight) {
       right = props.minRight;
-      left = clientWidth - right - center;
+    } else {
+      right -= diff;
+    }
+
+    left = clientWidth - right - center;
+
+    if (left < props.minLeft) {
+      left -= diff / 2;
+      right -= diff / 2;
     }
   }
   return {
@@ -86,8 +95,8 @@ const widthChange = (width: number) => {
   }
 
   clientWidth = width;
-  let left = props.left || 0;
-  let right = props.right || 0;
+  let left = props.left || props.minLeft || 0;
+  let right = props.right || props.minRight || 0;
 
   if (left > clientWidth) {
     left = clientWidth / 3;

package/src/fields/StyleSetter/Index.vue

@@ -27,7 +27,7 @@ defineOptions({
   name: 'MFieldsStyleSetter',
 });
 
-defineProps<FieldProps<StyleSchema>>();
+const props = defineProps<FieldProps<StyleSchema>>();
 
 const emit = defineEmits<{
   change: [v: any, eventData: ContainerChangeEventData];
@@ -64,6 +64,9 @@ const collapseValue = shallowRef(
 );
 
 const change = (v: any, eventData: ContainerChangeEventData) => {
+  eventData.changeRecords?.forEach((record) => {
+    record.propPath = `${props.name}.${record.propPath}`;
+  });
   emit('change', v, eventData);
 };
 </script>

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

@@ -1,6 +1,6 @@
 <template>
   <MContainer :config="config" :model="values" @change="change"></MContainer>
-  <Box :model="values" @change="change"></Box>
+  <Box v-show="!['fixed', 'absolute'].includes(values.position)" :model="values" @change="change"></Box>
 </template>
 
 <script lang="ts" setup>
@@ -125,7 +125,7 @@ const config = {
         },
         {
           name: 'height',
-          text: '宽度',
+          text: '高度',
           labelWidth: '68px',
           type: 'data-source-field-select',
           fieldConfig: {
@@ -135,25 +135,41 @@ const config = {
       ],
     },
     {
-      type: 'data-source-field-select',
-      text: 'overflow',
-      name: 'overflow',
-      checkStrictly: false,
-      dataSourceFieldType: ['string'],
-      fieldConfig: {
-        type: 'select',
-        clearable: true,
-        allowCreate: true,
-        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' },
-          { text: 'initial', value: 'initial' },
-        ],
-      },
+      type: 'row',
+      items: [
+        {
+          type: 'data-source-field-select',
+          text: 'overflow',
+          name: 'overflow',
+          labelWidth: '68px',
+          checkStrictly: false,
+          dataSourceFieldType: ['string'],
+          fieldConfig: {
+            type: 'select',
+            clearable: true,
+            allowCreate: true,
+            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' },
+              { text: 'initial', value: 'initial' },
+            ],
+          },
+        },
+        {
+          type: 'data-source-field-select',
+          text: '透明度',
+          name: 'opacity',
+          labelWidth: '68px',
+          dataSourceFieldType: ['string', 'number'],
+          fieldConfig: {
+            type: 'text',
+          },
+        },
+      ],
     },
   ],
 };

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

@@ -1,15 +1,12 @@
 <template>
   <MContainer :config="config" :model="values" @change="change"></MContainer>
-  <Position v-show="values['position'] !== 'static'" :model="values" @change="change"></Position>
 </template>
 
 <script lang="ts" setup>
 import { ContainerChangeEventData, MContainer } from '@tmagic/form';
 import type { StyleSchema } from '@tmagic/schema';
 
-import Position from '../components/Position.vue';
-
-defineProps<{ values: Partial<StyleSchema> }>();
+const props = defineProps<{ values: Partial<StyleSchema> }>();
 
 const emit = defineEmits<{
   change: [v: string | StyleSchema, eventData: ContainerChangeEventData];
@@ -30,6 +27,52 @@ const config = {
         })),
       },
     },
+    {
+      type: 'row',
+      labelWidth: '68px',
+      display: () => props.values.position !== 'static',
+      items: [
+        {
+          name: 'left',
+          type: 'data-source-field-select',
+          text: 'left',
+          fieldConfig: {
+            type: 'text',
+          },
+        },
+        {
+          name: 'top',
+          type: 'data-source-field-select',
+          text: 'top',
+          fieldConfig: {
+            type: 'text',
+          },
+        },
+      ],
+    },
+    {
+      type: 'row',
+      labelWidth: '68px',
+      display: () => props.values.position !== 'static',
+      items: [
+        {
+          name: 'right',
+          type: 'data-source-field-select',
+          text: 'right',
+          fieldConfig: {
+            type: 'text',
+          },
+        },
+        {
+          name: 'bottom',
+          type: 'data-source-field-select',
+          text: 'bottom',
+          fieldConfig: {
+            type: 'text',
+          },
+        },
+      ],
+    },
     {
       labelWidth: '68px',
       name: 'zIndex',