@tmagic/editor 1.3.0-alpha.7 → 1.3.0-alpha.8

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.0-alpha.7",
+  "version": "1.3.0-alpha.8",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -46,27 +46,27 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons-vue": "^2.0.9",
-    "@tmagic/core": "1.3.0-alpha.7",
-    "@tmagic/design": "1.3.0-alpha.7",
-    "@tmagic/form": "1.3.0-alpha.7",
-    "@tmagic/schema": "1.3.0-alpha.7",
-    "@tmagic/stage": "1.3.0-alpha.7",
-    "@tmagic/table": "1.3.0-alpha.7",
-    "@tmagic/utils": "1.3.0-alpha.7",
+    "@tmagic/core": "1.3.0-alpha.8",
+    "@tmagic/design": "1.3.0-alpha.8",
+    "@tmagic/form": "1.3.0-alpha.8",
+    "@tmagic/schema": "1.3.0-alpha.8",
+    "@tmagic/stage": "1.3.0-alpha.8",
+    "@tmagic/table": "1.3.0-alpha.8",
+    "@tmagic/utils": "1.3.0-alpha.8",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "events": "^3.3.0",
     "gesto": "^1.7.0",
     "keycon": "^1.1.2",
     "lodash-es": "^4.17.21",
-    "monaco-editor": "^0.34.0",
+    "monaco-editor": "^0.39.0",
     "serialize-javascript": "^6.0.0",
     "vue": "^3.3.4"
   },
   "peerDependencies": {
-    "@tmagic/design": "1.3.0-alpha.7",
-    "@tmagic/form": "1.3.0-alpha.7",
-    "monaco-editor": "^0.34.0",
+    "@tmagic/design": "1.3.0-alpha.8",
+    "@tmagic/form": "1.3.0-alpha.8",
+    "monaco-editor": "^0.39.0",
     "vue": "^3.3.4"
   },
   "devDependencies": {

package/src/components/SplitView.vue

@@ -1,6 +1,6 @@
 <template>
   <div ref="el" class="m-editor-layout">
-    <template v-if="hasLeft">
+    <template v-if="hasLeft && $slots.left">
       <div class="m-editor-layout-left" :class="leftClass" :style="`width: ${left}px`">
         <slot name="left"></slot>
       </div>
@@ -11,7 +11,7 @@
       <slot name="center"></slot>
     </div>
 
-    <template v-if="hasRight">
+    <template v-if="hasRight && $slots.right">
       <Resizer @change="changeRight"></Resizer>
       <div class="m-editor-layout-right" :class="rightClass" :style="`width: ${right}px`">
         <slot name="right"></slot>

package/src/fields/DataSourceInput.vue

@@ -30,13 +30,15 @@
       </div>
     </template>
   </component>
-  <div :class="`el-input el-input--${size}`" @mouseup="mouseupHandler" v-else>
-    <div :class="`el-input__wrapper ${isFocused ? ' is-focus' : ''}`">
+  <div :class="`tmagic-data-source-input-text el-input el-input--${size}`" @mouseup="mouseupHandler" v-else>
+    <div :class="`tmagic-data-source-input-text-wrapper el-input__wrapper ${isFocused ? ' is-focus' : ''}`">
       <div class="el-input__inner">
         <template v-for="(item, index) in displayState">
           <span :key="index" v-if="item.type === 'text'" style="margin-right: 2px">{{ item.value }}</span>
           <TMagicTag :key="index" :size="size" v-if="item.type === 'var'">{{ item.value }}</TMagicTag>
         </template>
+
+        <Icon class="tmagic-data-source-input-icon" :icon="Coin" />
       </div>
     </div>
   </div>
@@ -90,7 +92,7 @@ const dataSources = computed(() => dataSourceService?.get('dataSources') || []);
 const setDisplayState = () => {
   displayState.value = [];
 
-  const matches = state.value.matchAll(/\{\{([\s\S]+?)\}\}/g);
+  const matches = state.value.matchAll(/\$\{([\s\S]+?)\}/g);
   let index = 0;
   for (const match of matches) {
     if (typeof match.index === 'undefined') break;
@@ -195,7 +197,7 @@ const getSelectionStart = () => {
  * @param leftCurlyBracketIndex {字符索引
  */
 const curCharIsLeftCurlyBracket = (leftCurlyBracketIndex: number) =>
-  leftCurlyBracketIndex > -1 && leftCurlyBracketIndex === getSelectionStart() - 1;
+  leftCurlyBracketIndex > 0 && leftCurlyBracketIndex === getSelectionStart() - 1;
 
 /**
  * 当前输入的是.
@@ -213,7 +215,7 @@ const dsQuerySearch = (queryString: string, leftCurlyBracketIndex: number, cb: (
   if (curCharIsLeftCurlyBracket(leftCurlyBracketIndex)) {
     // 当前输入的是{
     result = dataSources.value;
-  } else if (leftCurlyBracketIndex > -1) {
+  } else if (leftCurlyBracketIndex > 0) {
     // 当前输入的是{xx
     const queryName = queryString.substring(leftCurlyBracketIndex + 1).toLowerCase();
     result = dataSources.value.filter((ds) => ds.title?.toLowerCase().includes(queryName) || ds.id.includes(queryName));
@@ -299,7 +301,7 @@ const querySearch = (queryString: string, cb: (data: { value: string }[]) => voi
   const curQueryString = queryString.substring(0, selectionStart);
 
   const fieldKeyStringLastIndex = curQueryString.lastIndexOf('.');
-  const dsKeyStringLastIndex = curQueryString.lastIndexOf('{');
+  const dsKeyStringLastIndex = curQueryString.lastIndexOf('${') + 1;
 
   const isFieldTip = fieldKeyStringLastIndex > dsKeyStringLastIndex;
 
@@ -321,7 +323,7 @@ const selectHandler = async ({ value, type }: { value: string; type: 'dataSource
   let startText = inputText.substring(0, selectionStart);
 
   const dotIndex = startText.lastIndexOf('.');
-  const leftCurlyBracketIndex = startText.lastIndexOf('{');
+  const leftCurlyBracketIndex = startText.lastIndexOf('${') + 1;
 
   const endText = inputText.substring(selectionStart);
 
@@ -336,7 +338,6 @@ const selectHandler = async ({ value, type }: { value: string; type: 'dataSource
     if (!isRightCurlyBracket(selectionStart + 1)) {
       suggestText = `${suggestText}}`;
     }
-    suggestText = `{${suggestText}}`;
   } else if (!curCharIsDot(dotIndex)) {
     startText = startText.substring(0, dotIndex + 1);
   }
@@ -345,10 +346,10 @@ const selectHandler = async ({ value, type }: { value: string; type: 'dataSource
 
   await nextTick();
 
-  // 由于选择数据源时会在后面补全}}, 所以光标要前移2位
+  // 由于选择数据源时会在后面补全}, 所以光标要前移2位
   let newSelectionStart = 0;
   if (isDataSource) {
-    newSelectionStart = leftCurlyBracketIndex + suggestText.length - 1;
+    newSelectionStart = leftCurlyBracketIndex + suggestText.length;
   } else {
     newSelectionStart = dotIndex + suggestText.length + 1;
   }

package/src/index.ts

@@ -62,6 +62,7 @@ export { default as ContentMenu } from './components/ContentMenu.vue';
 export { default as Icon } from './components/Icon.vue';
 export { default as LayoutContainer } from './components/SplitView.vue';
 export { default as SplitView } from './components/SplitView.vue';
+export { default as Resizer } from './components/Resizer.vue';
 
 const defaultInstallOpt: InstallOptions = {
   // eslint-disable-next-line no-eval

package/src/layouts/Framework.vue

@@ -33,7 +33,7 @@
         </slot>
       </template>
 
-      <template v-if="pageLength > 0 && nodes.length === 1" #right>
+      <template v-if="pageLength > 0" #right>
         <TMagicScrollbar>
           <slot name="props-panel"></slot>
         </TMagicScrollbar>
@@ -68,7 +68,6 @@ const codeOptions = inject('codeOptions', {});
 const { editorService, uiService } = inject<Services>('services') || {};
 
 const root = computed(() => editorService?.get('root'));
-const nodes = computed(() => editorService?.get('nodes') || []);
 
 const pageLength = computed(() => editorService?.get('pageLength') || 0);
 const showSrc = computed(() => uiService?.get('showSrc'));

package/src/layouts/PropsPanel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="m-editor-props-panel">
+  <div class="m-editor-props-panel" v-if="nodes.length === 1">
     <slot name="props-panel-header"></slot>
     <MForm
       ref="configForm"
@@ -35,6 +35,7 @@ const configForm = ref<InstanceType<typeof MForm>>();
 const curFormConfig = ref<any>([]);
 const services = inject<Services>('services');
 const node = computed(() => services?.editorService.get('node'));
+const nodes = computed(() => services?.editorService.get('nodes') || []);
 const propsPanelSize = computed(() => services?.uiService.get('propsPanelSize') || 'small');
 const stage = computed(() => services?.editorService.get('stage'));
 

package/src/layouts/sidebar/LayerMenu.vue

@@ -22,6 +22,7 @@ const props = defineProps<{
 const services = inject<Services>('services');
 const menu = ref<InstanceType<typeof ContentMenu>>();
 const node = computed(() => services?.editorService.get('node'));
+const nodes = computed(() => services?.editorService.get('nodes'));
 const isRoot = computed(() => node.value?.type === NodeType.ROOT);
 const isPage = computed(() => node.value?.type === NodeType.PAGE);
 const componentList = computed(() => services?.componentListService.getList() || []);
@@ -82,7 +83,7 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() => [
     type: 'button',
     text: '新增',
     icon: markRaw(Plus),
-    display: () => node.value?.items,
+    display: () => node.value?.items && nodes.value?.length === 1,
     items: getSubMenuData.value,
   },
   {
@@ -91,7 +92,7 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() => [
     icon: markRaw(CopyDocument),
     display: () => !isRoot.value,
     handler: () => {
-      node.value && services?.editorService.copy(node.value);
+      node.value && services?.editorService.copy(nodes.value || []);
     },
   },
   {
@@ -100,7 +101,7 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() => [
     icon: markRaw(Delete),
     display: () => !isRoot.value && !isPage.value,
     handler: () => {
-      node.value && services?.editorService.remove(node.value);
+      node.value && services?.editorService.remove(nodes.value || []);
     },
   },
   ...props.layerContentMenu,

package/src/layouts/sidebar/LayerPanel.vue

@@ -350,7 +350,11 @@ const clickHandler = (data: MNode): void => {
 // 右键菜单
 const contextmenu = async (event: MouseEvent, data: MNode): Promise<void> => {
   event.preventDefault();
-  await select(data);
+
+  if (nodes.value.length < 2) {
+    await select(data);
+  }
+
   menu.value?.show(event);
 };
 </script>

package/src/theme/data-source-input.scss

@@ -0,0 +1,18 @@
+.tmagic-data-source-input-text {
+  .el-input__wrapper.tmagic-data-source-input-text-wrapper {
+    overflow: hidden;
+    padding-right: 30px;
+  }
+
+  .el-input__inner {
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  .tmagic-data-source-input-icon {
+    position: absolute;
+    right: 7px;
+  }
+}

package/src/theme/theme.scss

@@ -19,4 +19,5 @@
 @import "./dep-list.scss";
 @import "./data-source.scss";
 @import "./data-source-fields.scss";
+@import "./data-source-input.scss";
 @import "./key-value.scss";

package/src/utils/props.ts

@@ -105,6 +105,40 @@ export const fillConfig = (config: FormConfig = []) => [
                   },
                 ],
               },
+              {
+                type: 'fieldset',
+                legend: '边框',
+                items: [
+                  {
+                    name: 'borderWidth',
+                    text: '宽度',
+                    defaultValue: '0',
+                  },
+                  {
+                    name: 'borderColor',
+                    text: '颜色',
+                    type: 'colorPicker',
+                  },
+                  {
+                    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' },
+                    ],
+                  },
+                ],
+              },
               {
                 type: 'fieldset',
                 legend: '背景',

package/types/index.d.ts

@@ -30,6 +30,7 @@ export { default as ContentMenu } from './components/ContentMenu.vue';
 export { default as Icon } from './components/Icon.vue';
 export { default as LayoutContainer } from './components/SplitView.vue';
 export { default as SplitView } from './components/SplitView.vue';
+export { default as Resizer } from './components/Resizer.vue';
 declare const _default: {
     install: (app: App, opt?: Partial<InstallOptions>) => void;
 };