@tmagic/editor 1.4.9 → 1.4.10

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.4.9",
+  "version": "1.4.10",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -54,14 +54,16 @@
     "lodash-es": "^4.17.21",
     "moveable": "^0.53.0",
     "serialize-javascript": "^6.0.0",
-    "@tmagic/dep": "1.4.9",
-    "@tmagic/table": "1.4.9"
+    "sortablejs": "^1.15.2",
+    "@tmagic/dep": "1.4.10",
+    "@tmagic/table": "1.4.10"
   },
   "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.0.4",
     "@vue/compiler-sfc": "^3.4.27",
     "@vue/test-utils": "^2.4.6",
@@ -74,14 +76,14 @@
   },
   "peerDependencies": {
     "monaco-editor": "^0.48.0",
-    "vue": "^3.4.27",
     "typescript": "*",
-    "@tmagic/core": "1.4.9",
-    "@tmagic/form": "1.4.9",
-    "@tmagic/design": "1.4.9",
-    "@tmagic/schema": "1.4.9",
-    "@tmagic/utils": "1.4.9",
-    "@tmagic/stage": "1.4.9"
+    "vue": "^3.4.27",
+    "@tmagic/core": "1.4.10",
+    "@tmagic/design": "1.4.10",
+    "@tmagic/schema": "1.4.10",
+    "@tmagic/form": "1.4.10",
+    "@tmagic/stage": "1.4.10",
+    "@tmagic/utils": "1.4.10"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/Editor.vue

@@ -1,5 +1,5 @@
 <template>
-  <Framework :disabled-page-fragment="disabledPageFragment">
+  <Framework :disabled-page-fragment="disabledPageFragment" :page-bar-sort-options="pageBarSortOptions">
     <template #header>
       <slot name="header"></slot>
     </template>
@@ -106,6 +106,7 @@
     <template #page-bar><slot name="page-bar"></slot></template>
     <template #page-bar-title="{ page }"><slot name="page-bar-title" :page="page"></slot></template>
     <template #page-bar-popover="{ page }"><slot name="page-bar-popover" :page="page"></slot></template>
+    <template #page-list-popover="{ list }"><slot name="page-list-popover" :list="list"></slot></template>
   </Framework>
 </template>
 

package/src/editorProps.ts

@@ -17,6 +17,7 @@ import type {
   MenuBarData,
   MenuButton,
   MenuComponent,
+  PageBarSortOptions,
   SideBarData,
   StageRect,
 } from './type';
@@ -90,6 +91,8 @@ export interface EditorProps {
   /** 用于自定义组件树与画布的右键菜单 */
   customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
   extendFormState?: (state: FormState) => Record<string, any> | Promise<Record<string, any>>;
+  /** 页面顺序拖拽配置参数 */
+  pageBarSortOptions?: PageBarSortOptions;
 }
 
 export const defaultEditorProps = {

package/src/fields/CondOpSelect.vue

@@ -0,0 +1,87 @@
+<template>
+  <TMagicSelect
+    v-model="model[name]"
+    clearable
+    filterable
+    :size="size"
+    :disabled="disabled"
+    @change="fieldChangeHandler"
+  >
+    <component
+      v-for="option in options"
+      class="tmagic-design-option"
+      :key="option.value"
+      :is="optionComponent?.component || 'el-option'"
+      v-bind="
+        optionComponent?.props({
+          label: option.text,
+          value: option.value,
+        }) || {
+          label: option.text,
+          value: option.value,
+        }
+      "
+    >
+    </component>
+  </TMagicSelect>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+
+import { getConfig as getDesignConfig, TMagicSelect } from '@tmagic/design';
+import type { FieldProps } from '@tmagic/form';
+
+import type { CondOpSelectConfig, Services } from '@editor/type';
+import { arrayOptions, eqOptions, numberOptions } from '@editor/utils';
+
+defineOptions({
+  name: 'MFieldsCondOpSelect',
+});
+
+const emit = defineEmits(['change']);
+const { dataSourceService } = inject<Services>('services') || {};
+
+const props = defineProps<FieldProps<CondOpSelectConfig>>();
+
+const optionComponent = getDesignConfig('components')?.option;
+
+const options = computed(() => {
+  const [id, ...fieldNames] = [...(props.config.parentFields || []), ...props.model.field];
+
+  const ds = dataSourceService?.getDataSourceById(id);
+
+  let fields = ds?.fields || [];
+  let type = '';
+  (fieldNames || []).forEach((fieldName: string) => {
+    const field = fields.find((f) => f.name === fieldName);
+    fields = field?.fields || [];
+    type = field?.type || '';
+  });
+
+  if (type === 'array') {
+    return arrayOptions;
+  }
+
+  if (type === 'boolean') {
+    return [
+      { text: '是', value: 'is' },
+      { text: '不是', value: 'not' },
+    ];
+  }
+
+  if (type === 'number') {
+    return [...eqOptions, ...numberOptions];
+  }
+
+  if (type === 'string') {
+    return [...arrayOptions, ...eqOptions];
+  }
+
+  return [...arrayOptions, ...eqOptions, ...numberOptions];
+});
+
+const fieldChangeHandler = (v: string[]) => {
+  emit('change', v);
+};
+</script>

package/src/fields/DataSourceFieldSelect/FieldSelect.vue

@@ -0,0 +1,152 @@
+<template>
+  <div class="m-editor-data-source-field-select">
+    <TMagicSelect
+      :model-value="selectDataSourceId"
+      clearable
+      filterable
+      :size="size"
+      :disabled="disabled"
+      @change="dsChangeHandler"
+    >
+      <component
+        v-for="option in dataSourcesOptions"
+        class="tmagic-design-option"
+        :key="option.value"
+        :is="optionComponent?.component || 'el-option'"
+        v-bind="
+          optionComponent?.props({
+            label: option.text,
+            value: option.value,
+            disabled: option.disabled,
+          }) || {
+            label: option.text,
+            value: option.value,
+            disabled: option.disabled,
+          }
+        "
+      >
+      </component>
+    </TMagicSelect>
+
+    <TMagicCascader
+      :model-value="selectFieldsId"
+      clearable
+      filterable
+      :size="size"
+      :disabled="disabled"
+      :options="fieldsOptions"
+      :props="{
+        checkStrictly,
+      }"
+      @change="fieldChangeHandler"
+    ></TMagicCascader>
+
+    <TMagicButton
+      v-if="selectDataSourceId && hasDataSourceSidePanel"
+      class="m-fields-select-action-button"
+      :size="size"
+      @click="editHandler(selectDataSourceId)"
+      ><MIcon :icon="!notEditable ? Edit : View"></MIcon
+    ></TMagicButton>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject, ref, watch } from 'vue';
+import { Edit, View } from '@element-plus/icons-vue';
+
+import { getConfig as getDesignConfig, TMagicButton, TMagicCascader, TMagicSelect } from '@tmagic/design';
+import { type FilterFunction, filterFunction, type FormState, type SelectOption } from '@tmagic/form';
+import { DataSourceFieldType } from '@tmagic/schema';
+import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX } from '@tmagic/utils';
+
+import MIcon from '@editor/components/Icon.vue';
+import { type EventBus, type Services, SideItemKey } from '@editor/type';
+import { getCascaderOptionsFromFields, removeDataSourceFieldPrefix } from '@editor/utils';
+
+const props = defineProps<{
+  /**
+   * 是否要编译成数据源的data。
+   * key: 不编译，就是要数据源id和field name;
+   * value: 要编译（数据源data[`${filed}`]）
+   * */
+  value?: 'key' | 'value';
+  disabled?: boolean;
+  checkStrictly?: boolean;
+  size?: 'large' | 'default' | 'small';
+  dataSourceFieldType?: DataSourceFieldType[];
+  /** 是否可以编辑数据源，disable表示的是是否可以选择数据源 */
+  notEditable?: boolean | FilterFunction;
+}>();
+
+const emit = defineEmits<{
+  change: [v: string[]];
+}>();
+
+const modelValue = defineModel<string[] | any>('modelValue', { default: [] });
+
+const optionComponent = getDesignConfig('components')?.option;
+
+const services = inject<Services>('services');
+const mForm = inject<FormState | undefined>('mForm');
+const eventBus = inject<EventBus>('eventBus');
+
+const dataSources = computed(() => services?.dataSourceService.get('dataSources') || []);
+
+const valueIsKey = computed(() => props.value === 'key');
+const notEditable = computed(() => filterFunction(mForm, props.notEditable, props));
+
+const dataSourcesOptions = computed<SelectOption[]>(() =>
+  dataSources.value.map((ds) => ({
+    text: ds.title || ds.id,
+    value: valueIsKey.value ? ds.id : `${DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX}${ds.id}`,
+  })),
+);
+
+const selectDataSourceId = ref('');
+
+const selectFieldsId = ref<string[]>([]);
+
+watch(
+  modelValue,
+  (value) => {
+    if (Array.isArray(value)) {
+      const [dsId, ...fields] = value;
+      selectDataSourceId.value = dsId;
+      selectFieldsId.value = fields;
+    } else {
+      selectDataSourceId.value = '';
+      selectFieldsId.value = [];
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+
+const fieldsOptions = computed(() => {
+  const ds = dataSources.value.find((ds) => ds.id === removeDataSourceFieldPrefix(selectDataSourceId.value));
+
+  if (!ds) return [];
+
+  return getCascaderOptionsFromFields(ds.fields, props.dataSourceFieldType);
+});
+
+const dsChangeHandler = (v: string) => {
+  modelValue.value = [v];
+  emit('change', modelValue.value);
+};
+
+const fieldChangeHandler = (v: string[] = []) => {
+  modelValue.value = [selectDataSourceId.value, ...v];
+  emit('change', modelValue.value);
+};
+
+const hasDataSourceSidePanel = computed(() =>
+  (services?.uiService.get('sideBarItems') || []).find((item) => item.$key === SideItemKey.DATA_SOURCE),
+);
+
+const editHandler = (id: string) => {
+  eventBus?.emit('edit-data-source', removeDataSourceFieldPrefix(id));
+};
+</script>

package/src/fields/DataSourceFieldSelect/Index.vue

@@ -0,0 +1,168 @@
+<template>
+  <div class="m-fields-data-source-field-select">
+    <FieldSelect
+      v-if="showDataSourceFieldSelect || !config.fieldConfig"
+      :model-value="model[name]"
+      :disabled="disabled"
+      :size="size"
+      :value="config.value"
+      :checkStrictly="checkStrictly"
+      :dataSourceFieldType="config.dataSourceFieldType"
+      @change="onChangeHandler"
+    ></FieldSelect>
+
+    <component
+      v-else
+      :is="tagName"
+      :config="config.fieldConfig"
+      :model="model"
+      :name="name"
+      :disabled="disabled"
+      :size="size"
+      :last-values="lastValues"
+      :init-values="initValues"
+      :values="values"
+      :prop="`${prop}${prop ? '.' : ''}${name}`"
+      @change="onChangeHandler"
+    ></component>
+
+    <TMagicButton
+      v-if="config.fieldConfig"
+      style="margin-left: 5px"
+      :type="showDataSourceFieldSelect ? 'primary' : 'default'"
+      :size="size"
+      @click="showDataSourceFieldSelect = !showDataSourceFieldSelect"
+      ><MIcon :icon="Coin"></MIcon
+    ></TMagicButton>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, ref, resolveComponent, watch } from 'vue';
+import { Coin } from '@element-plus/icons-vue';
+
+import { TMagicButton, tMagicMessage } from '@tmagic/design';
+import type { FieldProps, FormState } from '@tmagic/form';
+import { DataSchema } from '@tmagic/schema';
+import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX } from '@tmagic/utils';
+
+import MIcon from '@editor/components/Icon.vue';
+import type { DataSourceFieldSelectConfig, Services } from '@editor/type';
+import { removeDataSourceFieldPrefix } from '@editor/utils';
+
+import FieldSelect from './FieldSelect.vue';
+
+defineOptions({
+  name: 'MFieldsDataSourceFieldSelect',
+});
+
+const emit = defineEmits(['change']);
+
+const props = withDefaults(defineProps<FieldProps<DataSourceFieldSelectConfig>>(), {
+  disabled: false,
+});
+
+const showDataSourceFieldSelect = ref(false);
+
+watch(
+  () => props.model[props.name],
+  (value) => {
+    if (
+      Array.isArray(value) &&
+      typeof value[0] === 'string' &&
+      value[0].startsWith(DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX)
+    ) {
+      showDataSourceFieldSelect.value = true;
+    } else {
+      showDataSourceFieldSelect.value = false;
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+
+const services = inject<Services>('services');
+const mForm = inject<FormState | undefined>('mForm');
+
+const dataSources = computed(() => services?.dataSourceService.get('dataSources') || []);
+
+const type = computed((): string => {
+  let type = props.config.fieldConfig?.type;
+  if (typeof type === 'function') {
+    type = type(mForm, {
+      model: props.model,
+    });
+  }
+  if (type === 'form') return '';
+  if (type === 'container') return '';
+  return type?.replace(/([A-Z])/g, '-$1').toLowerCase() || (props.config.items ? '' : 'text');
+});
+
+const tagName = computed(() => {
+  const component = resolveComponent(`m-${props.config.items ? 'form' : 'fields'}-${type.value}`);
+  if (typeof component !== 'string') return component;
+  return 'm-fields-text';
+});
+
+const checkStrictly = computed(() => {
+  let value: boolean | undefined;
+
+  if (typeof props.config.checkStrictly !== 'function') {
+    value = props.config.checkStrictly;
+  } else {
+    const dsId = removeDataSourceFieldPrefix(props.model[0]);
+    const dataSource = dataSources.value.find((ds) => ds.id === dsId);
+
+    value = props.config.checkStrictly(mForm, {
+      values: mForm?.initValues || {},
+      model: props.model,
+      parent: mForm?.parentValues || {},
+      formValue: mForm?.values || props.model,
+      prop: props.prop,
+      config: props.config,
+      dataSource,
+    });
+  }
+
+  return value ?? props.config.value === 'key';
+});
+
+const onChangeHandler = (value: string[]) => {
+  if (!Array.isArray(value)) {
+    emit('change', value);
+    return;
+  }
+
+  const [dsId, ...keys] = value;
+  const dataSource = dataSources.value.find((ds) => ds.id === removeDataSourceFieldPrefix(dsId));
+
+  if (!dataSource) {
+    emit('change', value);
+    return;
+  }
+
+  let fields = dataSource.fields || [];
+  let field: DataSchema | undefined;
+  (keys || []).forEach((key) => {
+    field = fields.find((f) => f.name === key);
+    fields = field?.fields || [];
+  });
+
+  const dataSourceFieldType = props.config.dataSourceFieldType || ['any'];
+  if (!dataSourceFieldType.length) {
+    dataSourceFieldType.push('any');
+  }
+
+  if (
+    !keys.length ||
+    (field?.type &&
+      (field.type === 'any' || dataSourceFieldType.includes('any') || dataSourceFieldType.includes(field.type)))
+  ) {
+    emit('change', value);
+  } else {
+    tMagicMessage.error(`请选择类型为${dataSourceFieldType.join('或')}的字段`);
+    emit('change', [dsId]);
+  }
+};
+</script>

package/src/fields/DataSourceFields.vue

@@ -172,6 +172,12 @@ const dataSourceFieldsConfig: FormConfig = [
       { text: 'null', value: 'null' },
       { text: 'any', value: 'any' },
     ],
+    onChange: (formState, v: string, { model }) => {
+      if (!['any', 'array', 'object'].includes(v)) {
+        model.fields = [];
+      }
+      return v;
+    },
   },
   {
     name: 'name',

package/src/fields/DisplayConds.vue

@@ -0,0 +1,145 @@
+<template>
+  <MGroupList
+    style="width: 100%"
+    :config="config"
+    :name="name"
+    :disabled="disabled"
+    :model="model"
+    :last-values="lastValues"
+    :prop="prop"
+    :size="size"
+  ></MGroupList>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject } from 'vue';
+
+import {
+  type FieldProps,
+  type FilterFunction,
+  filterFunction,
+  type FormState,
+  type GroupListConfig,
+  MGroupList,
+} from '@tmagic/form';
+
+import type { Services } from '@editor/type';
+import { getCascaderOptionsFromFields } from '@editor/utils';
+
+defineOptions({
+  name: 'm-fields-display-conds',
+});
+
+const props = withDefaults(
+  defineProps<
+    FieldProps<{
+      titlePrefix?: string;
+      parentFields?: string[] | FilterFunction<string[]>;
+    }>
+  >(),
+  {
+    disabled: false,
+  },
+);
+
+const { dataSourceService } = inject<Services>('services') || {};
+const mForm = inject<FormState | undefined>('mForm');
+
+const parentFields = computed(() => filterFunction<string[]>(mForm, props.config.parentFields, props) || []);
+
+const config = computed<GroupListConfig>(() => ({
+  type: 'groupList',
+  name: props.name,
+  titlePrefix: props.config.titlePrefix,
+  expandAll: true,
+  items: [
+    {
+      type: 'table',
+      name: 'cond',
+      operateColWidth: 50,
+      items: [
+        parentFields.value.length
+          ? {
+              type: 'cascader',
+              options: () => {
+                const [dsId, ...keys] = parentFields.value;
+                const ds = dataSourceService?.getDataSourceById(dsId);
+                if (!ds) {
+                  return [];
+                }
+
+                let fields = ds.fields || [];
+                keys.forEach((key) => {
+                  const field = fields.find((f) => f.name === key);
+                  fields = field?.fields || [];
+                });
+
+                return getCascaderOptionsFromFields(fields, ['string', 'number', 'boolean', 'any']);
+              },
+              name: 'field',
+              value: 'key',
+              label: '字段',
+              checkStrictly: false,
+            }
+          : {
+              type: 'data-source-field-select',
+              name: 'field',
+              value: 'key',
+              label: '字段',
+              checkStrictly: false,
+              dataSourceFieldType: ['string', 'number', 'boolean', 'any'],
+            },
+        {
+          type: 'cond-op-select',
+          parentFields: parentFields.value,
+          label: '条件',
+          width: 100,
+          name: 'op',
+        },
+        {
+          label: '值',
+          width: 100,
+          items: [
+            {
+              name: 'value',
+              type: (mForm, { model }) => {
+                const [id, ...fieldNames] = model.field;
+
+                const ds = dataSourceService?.getDataSourceById(id);
+
+                let fields = ds?.fields || [];
+                let type = '';
+                (fieldNames || []).forEach((fieldName: string) => {
+                  const field = fields.find((f) => f.name === fieldName);
+                  fields = field?.fields || [];
+                  type = field?.type || '';
+                });
+
+                if (type === 'number') {
+                  return 'number';
+                }
+
+                if (type === 'boolean') {
+                  return 'select';
+                }
+
+                return 'text';
+              },
+              options: [
+                { text: 'true', value: true },
+                { text: 'false', value: false },
+              ],
+              display: (vm, { model }) => !['between', 'not_between'].includes(model.op),
+            },
+            {
+              name: 'range',
+              type: 'number-range',
+              display: (vm, { model }) => ['between', 'not_between'].includes(model.op),
+            },
+          ],
+        },
+      ],
+    },
+  ],
+}));
+</script>

package/src/index.ts

@@ -21,13 +21,15 @@ import Code from './fields/Code.vue';
 import CodeLink from './fields/CodeLink.vue';
 import CodeSelect from './fields/CodeSelect.vue';
 import CodeSelectCol from './fields/CodeSelectCol.vue';
+import CondOpSelect from './fields/CondOpSelect.vue';
 import DataSourceFields from './fields/DataSourceFields.vue';
-import DataSourceFieldSelect from './fields/DataSourceFieldSelect.vue';
+import DataSourceFieldSelect from './fields/DataSourceFieldSelect/Index.vue';
 import DataSourceInput from './fields/DataSourceInput.vue';
 import DataSourceMethods from './fields/DataSourceMethods.vue';
 import DataSourceMethodSelect from './fields/DataSourceMethodSelect.vue';
 import DataSourceMocks from './fields/DataSourceMocks.vue';
 import DataSourceSelect from './fields/DataSourceSelect.vue';
+import DisplayConds from './fields/DisplayConds.vue';
 import EventSelect from './fields/EventSelect.vue';
 import KeyValue from './fields/KeyValue.vue';
 import PageFragmentSelect from './fields/PageFragmentSelect.vue';
@@ -68,7 +70,7 @@ export { default as DataSourceMethods } from './fields/DataSourceMethods.vue';
 export { default as DataSourceInput } from './fields/DataSourceInput.vue';
 export { default as DataSourceSelect } from './fields/DataSourceSelect.vue';
 export { default as DataSourceMethodSelect } from './fields/DataSourceMethodSelect.vue';
-export { default as DataSourceFieldSelect } from './fields/DataSourceFieldSelect.vue';
+export { default as DataSourceFieldSelect } from './fields/DataSourceFieldSelect/Index.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';
@@ -84,6 +86,8 @@ export { default as Resizer } from './components/Resizer.vue';
 export { default as CodeBlockEditor } from './components/CodeBlockEditor.vue';
 export { default as FloatingBox } from './components/FloatingBox.vue';
 export { default as PageFragmentSelect } from './fields/PageFragmentSelect.vue';
+export { default as DisplayConds } from './fields/DisplayConds.vue';
+export { default as CondOpSelect } from './fields/CondOpSelect.vue';
 
 const defaultInstallOpt: InstallOptions = {
   // eslint-disable-next-line no-eval
@@ -114,5 +118,7 @@ export default {
     app.component('m-fields-data-source-method-select', DataSourceMethodSelect);
     app.component('m-fields-data-source-field-select', DataSourceFieldSelect);
     app.component('m-fields-page-fragment-select', PageFragmentSelect);
+    app.component('m-fields-display-conds', DisplayConds);
+    app.component('m-fields-cond-op-select', CondOpSelect);
   },
 };