@tmagic/editor 1.5.2 → 1.5.4

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.2",
+  "version": "1.5.4",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -58,11 +58,11 @@
     "moveable": "^0.53.0",
     "serialize-javascript": "^6.0.0",
     "sortablejs": "^1.15.2",
-    "@tmagic/design": "1.5.2",
-    "@tmagic/table": "1.5.2",
-    "@tmagic/stage": "1.5.2",
-    "@tmagic/utils": "1.5.2",
-    "@tmagic/form": "1.5.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"
   },
   "devDependencies": {
     "@types/events": "^3.0.0",
@@ -83,7 +83,7 @@
     "monaco-editor": "^0.48.0",
     "typescript": "*",
     "vue": ">=3.5.0",
-    "@tmagic/core": "1.5.2"
+    "@tmagic/core": "1.5.4"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/components/CodeBlockEditor.vue

@@ -104,14 +104,14 @@ const { height: codeBlockEditorHeight } = useEditorContentHeight();
 const difVisible = ref(false);
 const { rect: windowRect } = useWindowRect();
 
-const magicVsEditor = useTemplateRef<InstanceType<typeof CodeEditor>>('magicVsEditor');
+const magicVsEditorRef = useTemplateRef<InstanceType<typeof CodeEditor>>('magicVsEditor');
 
 const diffChange = () => {
-  if (!magicVsEditor.value || !formBox.value?.form) {
+  if (!magicVsEditorRef.value || !formBox.value?.form) {
     return;
   }
 
-  formBox.value.form.values.content = magicVsEditor.value.getEditorValue();
+  formBox.value.form.values.content = magicVsEditorRef.value.getEditorValue();
 
   difVisible.value = false;
 };

package/src/components/CodeParams.vue

@@ -32,7 +32,7 @@ const props = defineProps<{
 
 const emit = defineEmits(['change']);
 
-const form = useTemplateRef<InstanceType<typeof MForm>>('form');
+const formRef = useTemplateRef<InstanceType<typeof MForm>>('form');
 
 const getFormConfig = (items: FormConfig = []) => [
   {
@@ -61,7 +61,7 @@ const codeParamsConfig = computed(() =>
  */
 const onParamsChangeHandler = async (v: FormValue, eventData: ContainerChangeEventData) => {
   try {
-    const value = await form.value?.submitForm(true);
+    const value = await formRef.value?.submitForm(true);
     emit('change', value, eventData);
   } catch (e) {
     error(e);

package/src/components/ContentMenu.vue

@@ -69,9 +69,9 @@ const emit = defineEmits<{
   mouseenter: [];
 }>();
 
-const menu = useTemplateRef<HTMLDivElement>('menu');
-const buttons = useTemplateRef<InstanceType<typeof ToolButton>[]>('buttons');
-const subMenu = useTemplateRef<any>('subMenu');
+const menuEl = useTemplateRef<HTMLDivElement>('menu');
+const buttonRefs = useTemplateRef<InstanceType<typeof ToolButton>[]>('buttons');
+const subMenuRef = useTemplateRef<any>('subMenu');
 const visible = ref(false);
 const subMenuData = ref<(MenuButton | MenuComponent)[]>([]);
 const zIndex = useZIndex();
@@ -88,13 +88,13 @@ const menuStyle = computed(() => ({
   zIndex: curZIndex.value,
 }));
 
-const contains = (el: HTMLElement) => menu.value?.contains(el) || subMenu.value?.contains(el);
+const contains = (el: HTMLElement) => menuEl.value?.contains(el) || subMenuRef.value?.contains(el);
 
 const hide = () => {
   if (!visible.value) return;
 
   visible.value = false;
-  subMenu.value?.hide();
+  subMenuRef.value?.hide();
 
   emit('hide');
 };
@@ -121,7 +121,7 @@ const outsideClickHideHandler = (e: MouseEvent) => {
 };
 
 const setPosition = (e: { clientY: number; clientX: number }) => {
-  const menuHeight = menu.value?.clientHeight || 0;
+  const menuHeight = menuEl.value?.clientHeight || 0;
 
   let top = e.clientY;
   if (menuHeight + e.clientY > document.body.clientHeight) {
@@ -158,15 +158,15 @@ const showSubMenu = (item: MenuButton | MenuComponent, index: number) => {
       return;
     }
 
-    if (menu.value) {
+    if (menuEl.value) {
       // 将子菜单放置在按钮右侧，与按钮齐平
-      let y = menu.value.offsetTop;
-      if (buttons.value?.[index].$el) {
-        const rect = buttons.value?.[index].$el.getBoundingClientRect();
+      let y = menuEl.value.offsetTop;
+      if (buttonRefs.value?.[index].$el) {
+        const rect = buttonRefs.value?.[index].$el.getBoundingClientRect();
         y = rect.top;
       }
-      subMenu.value?.show({
-        clientX: menu.value.offsetLeft + menu.value.clientWidth - 2,
+      subMenuRef.value?.show({
+        clientX: menuEl.value.offsetLeft + menuEl.value.clientWidth - 2,
         clientY: y,
       });
     }
@@ -190,7 +190,7 @@ onBeforeUnmount(() => {
 });
 
 defineExpose({
-  menu,
+  menu: menuEl,
   menuPosition,
   hide,
   show,

package/src/components/FloatingBox.vue

@@ -1,7 +1,7 @@
 <template>
   <Teleport to="body" v-if="visible">
     <div ref="target" class="m-editor-float-box" :style="{ ...style, zIndex: curZIndex }" @mousedown="nextZIndex">
-      <div ref="titleEl" class="m-editor-float-box-title">
+      <div ref="title" class="m-editor-float-box-title">
         <slot name="title">
           <span>{{ title }}</span>
         </slot>
@@ -47,8 +47,8 @@ const props = withDefaults(
   },
 );
 
-const target = useTemplateRef<HTMLDivElement>('target');
-const titleEl = useTemplateRef<HTMLDivElement>('titleEl');
+const targetEl = useTemplateRef<HTMLDivElement>('target');
+const titleEl = useTemplateRef<HTMLDivElement>('title');
 
 const zIndex = useZIndex();
 const curZIndex = ref<number>(0);
@@ -59,8 +59,8 @@ const bodyHeight = computed(() => {
     return height.value - titleHeight.value;
   }
 
-  if (target.value) {
-    return target.value.clientHeight - titleHeight.value;
+  if (targetEl.value) {
+    return targetEl.value.clientHeight - titleHeight.value;
   }
 
   return 'auto';
@@ -87,7 +87,7 @@ let moveable: VanillaMoveable | null = null;
 const initMoveable = () => {
   moveable = new VanillaMoveable(globalThis.document.body, {
     className: 'm-editor-floating-box-moveable',
-    target: target.value,
+    target: targetEl.value,
     draggable: true,
     resizable: true,
     edge: true,
@@ -126,7 +126,7 @@ watch(
       await nextTick();
       curZIndex.value = zIndex.nextZIndex();
 
-      const targetRect = target.value?.getBoundingClientRect();
+      const targetRect = targetEl.value?.getBoundingClientRect();
       if (targetRect) {
         width.value = targetRect.width;
         height.value = targetRect.height;
@@ -168,11 +168,11 @@ const nextZIndex = () => {
   curZIndex.value = zIndex.nextZIndex();
 };
 
-provide('parentFloating', target);
+provide('parentFloating', targetEl);
 
 defineExpose({
   bodyHeight,
-  target,
+  target: targetEl,
   titleEl,
 });
 </script>

package/src/components/Resizer.vue

@@ -18,6 +18,6 @@ const emit = defineEmits<{
   change: [e: OnDrag];
 }>();
 
-const target = useTemplateRef<HTMLSpanElement>('target');
-const { isDragging } = useGetSo(target, emit);
+const targetEl = useTemplateRef<HTMLSpanElement>('target');
+const { isDragging } = useGetSo(targetEl, emit);
 </script>

package/src/components/ScrollBar.vue

@@ -21,8 +21,8 @@ const props = defineProps<{
 
 const emit = defineEmits(['scroll']);
 
-const bar = useTemplateRef<HTMLDivElement>('bar');
-const thumb = useTemplateRef<HTMLDivElement>('thumb');
+const barEl = useTemplateRef<HTMLDivElement>('bar');
+const thumbEl = useTemplateRef<HTMLDivElement>('thumb');
 
 const thumbSize = computed(() => props.size * (props.size / props.scrollSize));
 const thumbPos = computed(() => (props.pos / props.scrollSize) * props.size);
@@ -35,9 +35,8 @@ const thumbStyle = computed(() => ({
 let gesto: Gesto;
 
 onMounted(() => {
-  if (!thumb.value) return;
-  const thumbEl = thumb.value;
-  gesto = new Gesto(thumbEl, {
+  if (!thumbEl.value) return;
+  gesto = new Gesto(thumbEl.value, {
     container: window,
   });
 
@@ -50,12 +49,12 @@ onMounted(() => {
       scrollBy(getDelta(e));
     });
 
-  bar.value?.addEventListener('wheel', wheelHandler, false);
+  barEl.value?.addEventListener('wheel', wheelHandler, false);
 });
 
 onBeforeUnmount(() => {
   if (gesto) gesto.off();
-  bar.value?.removeEventListener('wheel', wheelHandler, false);
+  barEl.value?.removeEventListener('wheel', wheelHandler, false);
 });
 
 const wheelHandler = (e: WheelEvent) => {

package/src/components/ScrollViewer.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="m-editor-scroll-viewer-container" ref="container">
-    <div ref="el" :style="style">
+    <div ref="target" :style="style">
       <slot></slot>
     </div>
 
@@ -63,8 +63,8 @@ const props = withDefaults(
   },
 );
 
-const container = useTemplateRef<HTMLDivElement>('container');
-const el = useTemplateRef<HTMLDivElement>('el');
+const containerEl = useTemplateRef<HTMLDivElement>('container');
+const el = useTemplateRef<HTMLDivElement>('target');
 const style = computed(
   () => `
         width: ${isNumber(`${props.width}`) ? `${props.width}px` : props.width};
@@ -80,9 +80,9 @@ const scrollHeight = ref(0);
 let scrollViewer: ScrollViewer;
 
 onMounted(() => {
-  if (!container.value || !el.value) return;
+  if (!containerEl.value || !el.value) return;
   scrollViewer = new ScrollViewer({
-    container: container.value,
+    container: containerEl.value,
     target: el.value,
     zoom: props.zoom,
     correctionScrollSize: props.correctionScrollSize,
@@ -123,6 +123,6 @@ const hScrollHandler = (delta: number) => {
 };
 
 defineExpose({
-  container,
+  container: containerEl,
 });
 </script>

package/src/components/SplitView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="el" class="m-editor-layout" :style="`min-width: ${props.minCenter + props.minLeft + props.minRight}px`">
+  <div ref="target" class="m-editor-layout" :style="`min-width: ${props.minCenter + props.minLeft + props.minRight}px`">
     <template v-if="hasLeft && $slots.left">
       <div class="m-editor-layout-left" :class="leftClass" :style="`width: ${left}px`">
         <slot name="left"></slot>
@@ -22,7 +22,7 @@
 
 <script lang="ts" setup>
 import { computed, onBeforeUnmount, onMounted, ref, useTemplateRef, watchEffect } from 'vue';
-import { OnDrag } from 'gesto';
+import type { OnDrag } from 'gesto';
 
 import Resizer from './Resizer.vue';
 
@@ -51,7 +51,7 @@ const props = withDefaults(
   },
 );
 
-const el = useTemplateRef<HTMLElement>('el');
+const el = useTemplateRef<HTMLElement>('target');
 
 const hasLeft = computed(() => typeof props.left !== 'undefined');
 const hasRight = computed(() => typeof props.right !== 'undefined');

package/src/fields/DataSourceInput.vue

@@ -83,12 +83,12 @@ const emit = defineEmits<{
 
 const { dataSourceService } = inject<Services>('services') || {};
 
-const autocomplete = useTemplateRef<InstanceType<typeof TMagicAutocomplete>>('autocomplete');
+const autocompleteRef = useTemplateRef<InstanceType<typeof TMagicAutocomplete>>('autocomplete');
 const isFocused = ref(false);
 const state = ref('');
 const displayState = ref<{ value: string; type: 'var' | 'text' }[]>([]);
 
-const input = computed<HTMLInputElement>(() => autocomplete.value?.inputRef?.input);
+const input = computed<HTMLInputElement>(() => autocompleteRef.value?.inputRef?.input);
 const dataSources = computed(() => dataSourceService?.get('dataSources') || []);
 
 const setDisplayState = () => {
@@ -112,7 +112,7 @@ const mouseupHandler = async () => {
 
   isFocused.value = true;
   await nextTick();
-  autocomplete.value?.focus();
+  autocompleteRef.value?.focus();
 
   if (focusOffset && input.value) {
     input.value.setSelectionRange(anchorOffset, focusOffset);

package/src/fields/DataSourceMethods.vue

@@ -51,7 +51,7 @@ const props = withDefaults(
 const emit = defineEmits(['change']);
 
 const codeConfig = ref<CodeBlockContent>();
-const codeBlockEditor = useTemplateRef<InstanceType<typeof CodeBlockEditor>>('codeBlockEditor');
+const codeBlockEditorRef = useTemplateRef<InstanceType<typeof CodeBlockEditor>>('codeBlockEditor');
 
 let editIndex = -1;
 
@@ -94,7 +94,7 @@ const methodColumns: ColumnConfig[] = [
           editIndex = index;
 
           nextTick(() => {
-            codeBlockEditor.value?.show();
+            codeBlockEditorRef.value?.show();
           });
         },
       },
@@ -121,7 +121,7 @@ const createCodeHandler = () => {
   editIndex = -1;
 
   nextTick(() => {
-    codeBlockEditor.value?.show();
+    codeBlockEditorRef.value?.show();
   });
 };
 
@@ -157,6 +157,6 @@ const submitCodeHandler = (value: CodeBlockContent, data: ContainerChangeEventDa
   editIndex = -1;
   codeConfig.value = void 0;
 
-  codeBlockEditor.value?.hide();
+  codeBlockEditorRef.value?.hide();
 };
 </script>

package/src/fields/DisplayConds.vue

@@ -63,7 +63,8 @@ const config = computed<GroupListConfig>(() => ({
     {
       type: 'table',
       name: 'cond',
-      operateColWidth: 50,
+      operateColWidth: 100,
+      enableToggleMode: false,
       items: [
         parentFields.value.length
           ? {

package/src/fields/StyleSetter/Index.vue

@@ -0,0 +1,69 @@
+<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>
+</template>
+
+<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 } from './pro/';
+
+defineOptions({
+  name: 'MFieldsStyleSetter',
+});
+
+defineProps<FieldProps<StyleSchema>>();
+
+const emit = defineEmits<{
+  change: [v: any, eventData: ContainerChangeEventData];
+}>();
+
+const list = [
+  {
+    name: 'font',
+    title: '布局',
+    component: Layout,
+  },
+  {
+    title: '位置',
+    component: Position,
+  },
+  {
+    title: '背景',
+    component: Background,
+  },
+  {
+    title: '文字',
+    component: Font,
+  },
+  {
+    title: '边框与圆角',
+    component: Border,
+  },
+];
+
+const collapseValue = shallowRef(
+  Array(list.length)
+    .fill(1)
+    .map((x, i) => `${i}`),
+);
+
+const change = (v: any, eventData: ContainerChangeEventData) => {
+  emit('change', v, eventData);
+};
+</script>

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

@@ -0,0 +1,71 @@
+<template>
+  <div class="background-position-container">
+    <div class="presets-value-list">
+      <TMagicButton
+        v-for="(item, index) in list"
+        :key="index"
+        link
+        :class="model[name] === item.value && 'btn-active'"
+        @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>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { TMagicButton, TMagicInput } from '@tmagic/design';
+import type { FieldProps, FormItem } from '@tmagic/form';
+
+const emit = defineEmits(['change']);
+defineProps<FieldProps<{ type: 'style-setter' } & FormItem>>();
+
+const horizontalList = [
+  {
+    value: 'left',
+    text: '左',
+  },
+  {
+    value: 'center',
+    text: '中',
+  },
+  {
+    value: 'right',
+    text: '右',
+  },
+];
+
+const verticalList = [
+  {
+    value: 'top',
+    text: '上',
+  },
+  {
+    value: 'center',
+    text: '中',
+  },
+  {
+    value: 'bottom',
+    text: '下',
+  },
+];
+
+const list = verticalList
+  .map((vertical) =>
+    horizontalList.map((horizontal) => ({
+      value: `${horizontal.value} ${vertical.value}`,
+      tips: `${horizontal.text}${vertical.text}`,
+      class: `${horizontal.value}-${vertical.value}`,
+    })),
+  )
+  .flat();
+
+const changeHandler = (v: string) => {
+  emit('change', v);
+};
+</script>

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

@@ -0,0 +1,104 @@
+<template>
+  <div class="border-box-container">
+    <div class="border-icon-container">
+      <div class="border-icon-container-row">
+        <div
+          class="border-icon border-icon-top"
+          :class="{ active: direction === 'Top' }"
+          @click="selectDirection('Top')"
+        ></div>
+      </div>
+      <div class="border-icon-container-row">
+        <div
+          class="border-icon border-icon-left"
+          :class="{ active: direction === 'Left' }"
+          @click="selectDirection('Left')"
+        ></div>
+        <div class="border-icon" :class="{ active: direction === '' }" @click="selectDirection()"></div>
+        <div
+          class="border-icon border-icon-right"
+          :class="{ active: direction === 'Right' }"
+          @click="selectDirection('Right')"
+        ></div>
+      </div>
+      <div class="border-icon-container-row">
+        <div
+          class="border-icon border-icon-bottom"
+          :class="{ active: direction === 'Bottom' }"
+          @click="selectDirection('Bottom')"
+        ></div>
+      </div>
+    </div>
+    <div class="border-value-container">
+      <MContainer :config="config" :model="model" @change="change"></MContainer>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+
+import type { ContainerChangeEventData, FormValue } from '@tmagic/form';
+import { MContainer } from '@tmagic/form';
+import type { StyleSchema } from '@tmagic/schema';
+
+const direction = ref('');
+
+const config = computed(() => ({
+  items: [
+    {
+      name: `border${direction.value}Width`,
+      text: '边框宽度',
+      labelWidth: '68px',
+      type: 'data-source-field-select',
+      fieldConfig: {
+        type: 'text',
+      },
+    },
+    {
+      name: `border${direction.value}Color`,
+      text: '边框颜色',
+      labelWidth: '68px',
+      type: 'data-source-field-select',
+      fieldConfig: {
+        type: 'colorPicker',
+      },
+    },
+    {
+      name: `border${direction.value}Style`,
+      text: '边框样式',
+
+      labelWidth: '68px',
+      type: 'data-source-field-select',
+      fieldConfig: {
+        type: 'select',
+        options: ['solid', 'dashed', 'dotted'].map((item) => ({
+          value: item,
+          text: item,
+        })),
+      },
+    },
+  ],
+}));
+
+const selectDirection = (d?: string) => (direction.value = d || '');
+
+const emit = defineEmits<{
+  change: [v: StyleSchema, eventData: ContainerChangeEventData];
+}>();
+
+withDefaults(
+  defineProps<{
+    model: FormValue;
+  }>(),
+  {},
+);
+
+const change = (value: StyleSchema, eventData: ContainerChangeEventData) => {
+  eventData.changeRecords?.forEach((record) => {
+    emit('change', record.value, {
+      modifyKey: record.propPath,
+    });
+  });
+};
+</script>