@tmagic/editor 1.3.0-alpha.0 → 1.3.0-alpha.10

package/src/fields/DataSourceInput.vue

@@ -0,0 +1,358 @@
+<template>
+  <component
+    v-if="disabled || isFocused"
+    :is="getConfig('components')?.autocomplete.component || 'el-autocomplete'"
+    class="tmagic-design-auto-complete"
+    ref="autocomplete"
+    v-model="state"
+    v-bind="
+      getConfig('components')?.autocomplete.props({
+        disabled,
+        size,
+        fetchSuggestions: querySearch,
+        triggerOnFocus: false,
+        clearable: true,
+      }) || {}
+    "
+    style="width: 100%"
+    @blur="blurHandler"
+    @change="changeHandler"
+    @input="inputHandler"
+    @select="selectHandler"
+  >
+    <template #suffix>
+      <Icon :icon="Coin" />
+    </template>
+    <template #default="{ item }">
+      <div style="display: flex; flex-direction: column; line-height: 1.2em">
+        <div>{{ item.text }}</div>
+        <span style="font-size: 10px; color: rgba(0, 0, 0, 0.6)">{{ item.value }}</span>
+      </div>
+    </template>
+  </component>
+  <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>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, nextTick, ref, watch } from 'vue';
+import { Coin } from '@element-plus/icons-vue';
+
+import { FieldSize, getConfig, TMagicAutocomplete, TMagicTag } from '@tmagic/design';
+import type { DataSchema, DataSourceSchema } from '@tmagic/schema';
+
+import Icon from '@editor/components/Icon.vue';
+import type { Services } from '@editor/type';
+
+defineOptions({
+  name: 'MEditorDataSourceInput',
+});
+
+const props = withDefaults(
+  defineProps<{
+    config: {
+      type: 'data-source-input';
+      name: string;
+      text: string;
+    };
+    model: Record<string, any>;
+    name: string;
+    prop: string;
+    disabled: boolean;
+    lastValues?: Record<string, any>;
+    size?: FieldSize;
+  }>(),
+  {
+    disabled: false,
+  },
+);
+
+const emit = defineEmits<(e: 'change', value: string) => void>();
+
+const { dataSourceService } = inject<Services>('services') || {};
+
+const autocomplete = ref<InstanceType<typeof TMagicAutocomplete>>();
+const isFocused = ref(false);
+const state = ref('');
+const displayState = ref<{ value: string; type: 'var' | 'text' }[]>([]);
+
+const input = computed<HTMLInputElement>(() => autocomplete.value?.inputRef?.input);
+const dataSources = computed(() => dataSourceService?.get('dataSources') || []);
+
+const setDisplayState = () => {
+  displayState.value = [];
+
+  const matches = state.value.matchAll(/\$\{([\s\S]+?)\}/g);
+  let index = 0;
+  for (const match of matches) {
+    if (typeof match.index === 'undefined') break;
+
+    displayState.value.push({
+      type: 'text',
+      value: state.value.substring(index, match.index),
+    });
+
+    let dsText = '';
+    let ds: DataSourceSchema | undefined;
+    let fields: DataSchema[] | undefined;
+
+    match[1].split('.').forEach((item, index) => {
+      if (index === 0) {
+        ds = dataSources.value.find((ds) => ds.id === item);
+        dsText += ds?.title || item;
+        fields = ds?.fields;
+        return;
+      }
+
+      const field = fields?.find((field) => field.name === item);
+      fields = field?.fields;
+      dsText += `.${field?.title || item}`;
+    });
+
+    displayState.value.push({
+      type: 'var',
+      value: dsText,
+    });
+
+    index = match.index + match[0].length;
+  }
+
+  if (index < state.value.length) {
+    displayState.value.push({
+      type: 'text',
+      value: state.value.substring(index),
+    });
+  }
+};
+
+watch(
+  () => props.model[props.name],
+  (value = '') => {
+    state.value = value;
+
+    setDisplayState();
+  },
+  { immediate: true },
+);
+
+const mouseupHandler = async () => {
+  isFocused.value = true;
+  await nextTick();
+  autocomplete.value?.focus();
+};
+
+const blurHandler = () => {
+  isFocused.value = false;
+
+  setDisplayState();
+};
+
+const changeHandler = (v: string) => {
+  emit('change', v);
+};
+
+let inputText = '';
+
+const inputHandler = (v: string) => {
+  if (!v) {
+    inputText = v;
+  }
+};
+
+/**
+ * 光标位置是不是}
+ * @param selectionStart 光标位置
+ */
+const isRightCurlyBracket = (selectionStart = 0) => {
+  const lastChar = inputText.substring(selectionStart - 1, selectionStart);
+  return lastChar === '}';
+};
+
+/**
+ * 获取光标位置
+ */
+const getSelectionStart = () => {
+  let selectionStart = input.value?.selectionStart || 0;
+
+  // 输入法可能会自动补全}，如果当前光标前面一个字符是}，则光标前移一位
+  if (isRightCurlyBracket(selectionStart)) {
+    selectionStart -= 1;
+  }
+
+  return selectionStart;
+};
+
+/**
+ * 当前输入的是{
+ * @param leftCurlyBracketIndex {字符索引
+ */
+const curCharIsLeftCurlyBracket = (leftCurlyBracketIndex: number) =>
+  leftCurlyBracketIndex > 0 && leftCurlyBracketIndex === getSelectionStart() - 1;
+
+/**
+ * 当前输入的是.
+ * @param leftCurlyBracketIndex .字符索引
+ */
+const curCharIsDot = (dotIndex: number) => dotIndex > -1 && dotIndex === getSelectionStart() - 1;
+
+/**
+ * @param leftCurlyBracketIndex 左大括号字符索引
+ * @param cb 建议的方法
+ */
+const dsQuerySearch = (queryString: string, leftCurlyBracketIndex: number, cb: (data: { value: string }[]) => void) => {
+  let result: DataSourceSchema[] = [];
+
+  if (curCharIsLeftCurlyBracket(leftCurlyBracketIndex)) {
+    // 当前输入的是{
+    result = dataSources.value;
+  } 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));
+  }
+
+  cb(
+    result.map((ds) => ({
+      value: ds.id,
+      text: ds.title,
+      type: 'dataSource',
+    })),
+  );
+};
+
+/**
+ * 字段提示
+ * @param queryString 当前输入框内的字符串
+ * @param leftAngleIndex {字符索引
+ * @param dotIndex .字符索引
+ * @param cb 建议回调
+ */
+const fieldQuerySearch = (
+  queryString: string,
+  leftAngleIndex: number,
+  dotIndex: number,
+  cb: (data: { value: string }[]) => void,
+) => {
+  let result: DataSchema[] = [];
+
+  const dsKey = queryString.substring(leftAngleIndex + 1, dotIndex);
+  // 可能是xx.xx.xx，存在链式调用
+  const keys = dsKey.split('.');
+  // 最前的是数据源id
+  const ds = dataSources.value.find((ds) => ds.id === keys.shift());
+  if (!ds) {
+    return;
+  }
+
+  let fields = ds.fields || [];
+
+  // 后面这些事字段
+  let key = keys.shift();
+  while (key) {
+    for (const field of fields) {
+      if (field.name === key) {
+        fields = field.fields || [];
+        key = keys.shift();
+        break;
+      }
+    }
+  }
+
+  if (curCharIsDot(dotIndex)) {
+    // 当前输入的是.
+    result = fields || [];
+  } else if (dotIndex > -1) {
+    const queryName = queryString.substring(dotIndex + 1).toLowerCase();
+    result =
+      fields.filter(
+        (field) => field.name?.toLowerCase().includes(queryName) || field.title?.toLowerCase().includes(queryName),
+      ) || [];
+  }
+
+  cb(
+    result.map((field) => ({
+      value: field.name,
+      text: field.title,
+      type: 'field',
+    })),
+  );
+};
+
+/**
+ * 数据源提示
+ * @param queryString 当前输入框内的字符串
+ * @param cb 建议回调
+ */
+const querySearch = (queryString: string, cb: (data: { value: string }[]) => void) => {
+  inputText = queryString;
+
+  const selectionStart = getSelectionStart();
+
+  const curQueryString = queryString.substring(0, selectionStart);
+
+  const fieldKeyStringLastIndex = curQueryString.lastIndexOf('.');
+  const dsKeyStringLastIndex = curQueryString.lastIndexOf('${') + 1;
+
+  const isFieldTip = fieldKeyStringLastIndex > dsKeyStringLastIndex;
+
+  if (isFieldTip) {
+    fieldQuerySearch(curQueryString, dsKeyStringLastIndex, fieldKeyStringLastIndex, cb);
+  } else {
+    dsQuerySearch(curQueryString, dsKeyStringLastIndex, cb);
+  }
+};
+
+/**
+ * 选择建议
+ * @param value 建议值
+ * @param type 建议类型，是数据源还是字段
+ */
+const selectHandler = async ({ value, type }: { value: string; type: 'dataSource' | 'field' }) => {
+  const isDataSource = type === 'dataSource';
+  const selectionStart = input.value?.selectionStart || 0;
+  let startText = inputText.substring(0, selectionStart);
+
+  const dotIndex = startText.lastIndexOf('.');
+  const leftCurlyBracketIndex = startText.lastIndexOf('${') + 1;
+
+  const endText = inputText.substring(selectionStart);
+
+  let suggestText = value;
+
+  if (isDataSource) {
+    if (!curCharIsLeftCurlyBracket(leftCurlyBracketIndex)) {
+      startText = startText.substring(0, leftCurlyBracketIndex + 1);
+    }
+
+    // 当前光标后一位是否为}，不是的话需要补上
+    if (!isRightCurlyBracket(selectionStart + 1)) {
+      suggestText = `${suggestText}}`;
+    }
+  } else if (!curCharIsDot(dotIndex)) {
+    startText = startText.substring(0, dotIndex + 1);
+  }
+
+  state.value = `${startText}${suggestText}${endText}`;
+
+  await nextTick();
+
+  // 由于选择数据源时会在后面补全}, 所以光标要前移2位
+  let newSelectionStart = 0;
+  if (isDataSource) {
+    newSelectionStart = leftCurlyBracketIndex + suggestText.length;
+  } else {
+    newSelectionStart = dotIndex + suggestText.length + 1;
+  }
+  input.value?.setSelectionRange(newSelectionStart, newSelectionStart);
+};
+</script>

package/src/fields/DataSourceSelect.vue

@@ -0,0 +1,75 @@
+<template>
+  <MSelect
+    :model="model"
+    :name="name"
+    :size="size"
+    :prop="prop"
+    :disabled="disabled"
+    :config="selectConfig"
+    :last-values="lastValues"
+    @change="changeHandler"
+  ></MSelect>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+
+import { FieldSize } from '@tmagic/design';
+import { MSelect, SelectConfig } from '@tmagic/form';
+
+import { Services } from '../type';
+
+defineOptions({
+  name: 'MEditorDataSourceSelect',
+});
+
+const emit = defineEmits(['change']);
+
+const props = withDefaults(
+  defineProps<{
+    config: {
+      type: 'data-source-select';
+      name: string;
+      text: string;
+      placeholder: string;
+      dataSourceType?: string;
+    };
+    model: Record<string, any>;
+    name: string;
+    prop: string;
+    disabled: boolean;
+    lastValues?: Record<string, any>;
+    size?: FieldSize;
+  }>(),
+  {
+    disabled: false,
+  },
+);
+
+const { dataSourceService } = inject<Services>('services') || {};
+
+const dataSources = computed(() => dataSourceService?.get('dataSources') || []);
+
+const selectConfig = computed<SelectConfig>(() => {
+  const { type, dataSourceType, ...config } = props.config;
+  return {
+    ...config,
+    type: 'select',
+    valueKey: 'dataSourceId',
+    options: dataSources.value
+      .filter((ds) => !dataSourceType || ds.type === dataSourceType)
+      .map((ds) => ({
+        value: {
+          isBindDataSource: true,
+          dataSourceType: ds.type,
+          dataSourceId: ds.id,
+        },
+        text: ds.title || ds.id,
+      })),
+  };
+});
+
+const changeHandler = (value: any) => {
+  emit('change', value);
+};
+</script>

package/src/fields/EventSelect.vue

@@ -33,8 +33,8 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorEventSelect">
-import { computed, defineProps, inject } from 'vue';
+<script lang="ts" setup>
+import { computed, inject } from 'vue';
 import { Delete } from '@element-plus/icons-vue';
 import { has } from 'lodash-es';
 
@@ -44,7 +44,9 @@ import { ActionType } from '@tmagic/schema';
 
 import type { EventSelectConfig, Services } from '@editor/type';
 
-const services = inject<Services>('services');
+defineOptions({
+  name: 'MEditorEventSelect',
+});
 
 const props = defineProps<{
   config: EventSelectConfig;
@@ -53,8 +55,11 @@ const props = defineProps<{
   name: string;
   size: 'small' | 'default' | 'large';
 }>();
+
 const emit = defineEmits(['change']);
 
+const services = inject<Services>('services');
+
 // 事件名称下拉框表单配置
 const eventNameConfig = computed(() => {
   const defaultEventNameConfig = {
@@ -181,6 +186,7 @@ const actionsConfig = computed(() => ({
     {
       type: 'group-list',
       name: 'actions',
+      expandAll: true,
       enableToggleMode: false,
       items: [actionTypeConfig.value, targetCompConfig.value, compActionConfig.value, codeActionConfig.value],
     },

package/src/fields/KeyValue.vue

@@ -38,6 +38,10 @@ import { Delete, Plus } from '@element-plus/icons-vue';
 
 import { TMagicButton, TMagicInput } from '@tmagic/design';
 
+defineOptions({
+  name: 'MEditorKeyValue',
+});
+
 const props = withDefaults(
   defineProps<{
     config: {

package/src/fields/UISelect.vue

@@ -12,7 +12,7 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorUISelect">
+<script lang="ts" setup>
 import { computed, inject, ref } from 'vue';
 import { Close, Delete } from '@element-plus/icons-vue';
 
@@ -21,6 +21,10 @@ import { FormState } from '@tmagic/form';
 
 import type { Services } from '@editor/type';
 
+defineOptions({
+  name: 'MEditorUISelect',
+});
+
 const props = defineProps<{
   config: any;
   model: any;

package/src/icons/AppManageIcon.vue

@@ -8,4 +8,8 @@
   </svg>
 </template>
 
-<script lang="ts" setup name="MEditorAppManageIcon"></script>
+<script lang="ts" setup>
+defineOptions({
+  name: 'MEditorAppManageIcon',
+});
+</script>

package/src/icons/CenterIcon.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M2 4H21V6H2V4Z" fill="black" fill-opacity="0.9" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M5 11H18V13H5V11Z" fill="black" fill-opacity="0.9" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M2 18H21V20H2V18Z" fill="black" fill-opacity="0.9" />
+  </svg>
+</template>
+
+<script lang="ts" setup>
+defineOptions({
+  name: 'MEditorCenterIcon',
+});
+</script>

package/src/icons/CodeIcon.vue

@@ -23,4 +23,8 @@
   </svg>
 </template>
 
-<script lang="ts" setup name="MEditorCodeIcon"></script>
+<script lang="ts" setup>
+defineOptions({
+  name: 'MEditorCodeIcon',
+});
+</script>

package/src/index.ts

@@ -22,6 +22,8 @@ import CodeLink from './fields/CodeLink.vue';
 import CodeSelect from './fields/CodeSelect.vue';
 import CodeSelectCol from './fields/CodeSelectCol.vue';
 import DataSourceFields from './fields/DataSourceFields.vue';
+import DataSourceInput from './fields/DataSourceInput.vue';
+import DataSourceSelect from './fields/DataSourceSelect.vue';
 import EventSelect from './fields/EventSelect.vue';
 import KeyValue from './fields/KeyValue.vue';
 import uiSelect from './fields/UISelect.vue';
@@ -42,6 +44,7 @@ export { default as propsService } from './services/props';
 export { default as historyService } from './services/history';
 export { default as storageService } from './services/storage';
 export { default as eventsService } from './services/events';
+export { default as dataSourceService } from './services/dataSource';
 export { default as uiService } from './services/ui';
 export { default as codeBlockService } from './services/codeBlock';
 export { default as depService } from './services/dep';
@@ -50,6 +53,8 @@ export { default as LayerPanel } from './layouts/sidebar/LayerPanel.vue';
 export { default as CodeSelect } from './fields/CodeSelect.vue';
 export { default as CodeSelectCol } from './fields/CodeSelectCol.vue';
 export { default as DataSourceFields } from './fields/DataSourceFields.vue';
+export { default as DataSourceInput } from './fields/DataSourceInput.vue';
+export { default as DataSourceSelect } from './fields/DataSourceSelect.vue';
 export { default as EventSelect } from './fields/EventSelect.vue';
 export { default as KeyValue } from './fields/KeyValue.vue';
 export { default as CodeBlockList } from './layouts/sidebar/code-block/CodeBlockList.vue';
@@ -57,14 +62,17 @@ export { default as PropsPanel } from './layouts/PropsPanel.vue';
 export { default as ToolButton } from './components/ToolButton.vue';
 export { default as ContentMenu } from './components/ContentMenu.vue';
 export { default as Icon } from './components/Icon.vue';
-export { default as LayoutContainer } from './components/Layout.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 = {
-  // @todo, 自定义图片上传方法等编辑器依赖的外部选项
+  // eslint-disable-next-line no-eval
+  parseDSL: (dsl: string) => eval(dsl),
 };
 
 export default {
-  install: (app: App, opt?: InstallOptions): void => {
+  install: (app: App, opt?: Partial<InstallOptions>): void => {
     const option = Object.assign(defaultInstallOpt, opt || {});
 
     // eslint-disable-next-line no-param-reassign
@@ -80,5 +88,7 @@ export default {
     app.component('m-fields-event-select', EventSelect);
     app.component('m-fields-data-source-fields', DataSourceFields);
     app.component('m-fields-key-value', KeyValue);
+    app.component('m-fields-data-source-input', DataSourceInput);
+    app.component('m-fields-data-source-select', DataSourceSelect);
   },
 };