@tmagic/editor 1.4.8 → 1.4.10

package/src/fields/DataSourceMocks.vue

@@ -0,0 +1,255 @@
+<template>
+  <div class="m-editor-data-source-fields">
+    <MagicTable :data="model[name]" :columns="columns"></MagicTable>
+
+    <div class="m-editor-data-source-fields-footer">
+      <TMagicButton size="small" type="primary" :disabled="disabled" plain @click="newHandler()">添加</TMagicButton>
+    </div>
+
+    <FloatingBox
+      v-model:visible="addDialogVisible"
+      v-model:width="width"
+      v-model:height="editorHeight"
+      :title="drawerTitle"
+      :position="boxPosition"
+    >
+      <template #body>
+        <MFormBox
+          ref="addDialog"
+          label-width="120px"
+          :config="formConfig"
+          :values="formValues"
+          :parentValues="model[name]"
+          :disabled="disabled"
+          @submit="formChangeHandler"
+        ></MFormBox>
+      </template>
+    </FloatingBox>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { inject, Ref, ref } from 'vue';
+
+import { TMagicButton, tMagicMessageBox, TMagicSwitch } from '@tmagic/design';
+import { type FieldProps, type FormConfig, type FormState, MFormBox } from '@tmagic/form';
+import type { MockSchema } from '@tmagic/schema';
+import { type ColumnConfig, MagicTable } from '@tmagic/table';
+import { getDefaultValueFromFields } from '@tmagic/utils';
+
+import FloatingBox from '@editor/components/FloatingBox.vue';
+import { useNextFloatBoxPosition } from '@editor/hooks/use-next-float-box-position';
+import CodeEditor from '@editor/layouts/CodeEditor.vue';
+import { Services } from '@editor/type';
+
+import { useEditorContentHeight } from '..';
+
+defineOptions({
+  name: 'MFieldsDataSourceMocks',
+});
+
+const props = withDefaults(
+  defineProps<
+    FieldProps<{
+      type: 'data-source-mocks';
+    }>
+  >(),
+  {
+    disabled: false,
+  },
+);
+
+const emit = defineEmits(['change']);
+
+const services = inject<Services>('services');
+const width = defineModel<number>('width', { default: 670 });
+
+const drawerTitle = ref('');
+const formValues = ref<Record<string, any>>({});
+
+const formConfig: FormConfig = [
+  { name: 'index', type: 'hidden', filter: 'number', defaultValue: -1 },
+  {
+    name: 'title',
+    text: '名称',
+    rules: [
+      {
+        required: true,
+        message: '请输入字段名称',
+      },
+      {
+        required: true,
+        message: '请输入名称',
+      },
+    ],
+  },
+  {
+    name: 'description',
+    text: '描述',
+  },
+  {
+    name: 'enable',
+    text: '启用',
+    type: 'switch',
+  },
+  {
+    name: 'useInEditor',
+    text: '编辑器中使用',
+    type: 'switch',
+  },
+  {
+    name: 'data',
+    text: 'mock数据',
+    type: 'vs-code',
+    language: 'json',
+    options: inject('codeOptions', {}),
+    defaultValue: '{}',
+    height: '400px',
+    onChange: (formState: FormState | undefined, v: string | any) => {
+      if (typeof v !== 'string') return v;
+      return JSON.parse(v);
+    },
+    rules: [
+      {
+        validator: ({ value, callback }) => {
+          if (typeof value !== 'string') return callback();
+
+          try {
+            // 检测json是否存在语法错误
+            JSON.parse(value);
+
+            callback();
+          } catch (error: any) {
+            callback(error);
+          }
+        },
+      },
+    ],
+  },
+];
+
+const columns: ColumnConfig[] = [
+  {
+    type: 'expand',
+    component: CodeEditor,
+    props: (row: MockSchema) => ({
+      initValues: row.data,
+      language: 'json',
+      height: '150px',
+      options: {
+        readOnly: true,
+      },
+    }),
+  },
+  {
+    label: '名称',
+    prop: 'title',
+  },
+  {
+    label: '描述',
+    prop: 'description',
+  },
+  {
+    label: '是否启用',
+    prop: 'enable',
+    type: 'component',
+    component: TMagicSwitch,
+    props: (row: MockSchema) => ({
+      modelValue: row.enable,
+      activeValue: true,
+      inactiveValue: false,
+    }),
+    listeners: (row: MockSchema, index: number) => ({
+      'update:modelValue': (v: boolean) => {
+        toggleValue(row, 'enable', v, index);
+      },
+    }),
+  },
+  {
+    label: '编辑器中使用',
+    prop: 'useInEditor',
+    type: 'component',
+    component: TMagicSwitch,
+    props: (row: MockSchema) => ({
+      modelValue: row.useInEditor,
+      activeValue: true,
+      inactiveValue: false,
+    }),
+    listeners: (row: MockSchema, index: number) => ({
+      'update:modelValue': (v: boolean) => {
+        toggleValue(row, 'useInEditor', v, index);
+      },
+    }),
+  },
+  {
+    label: '操作',
+    fixed: 'right',
+    actions: [
+      {
+        text: '编辑',
+        handler: (row: MockSchema, index: number) => {
+          formValues.value = {
+            ...row,
+            index,
+          };
+          drawerTitle.value = `编辑${row.title}`;
+          calcBoxPosition();
+          addDialogVisible.value = true;
+        },
+      },
+      {
+        text: '删除',
+        buttonType: 'danger',
+        handler: async (row: MockSchema, index: number) => {
+          await tMagicMessageBox.confirm(`确定删除${row.title}?`, '提示');
+          props.model[props.name].splice(index, 1);
+          emit('change', props.model[props.name]);
+        },
+      },
+    ],
+  },
+];
+
+const newHandler = () => {
+  const isFirstRow = props.model[props.name].length === 0;
+  formValues.value = {
+    data: getDefaultValueFromFields(props.model.fields || []),
+    useInEditor: isFirstRow,
+    enable: isFirstRow,
+  };
+  drawerTitle.value = '新增Mock';
+  calcBoxPosition();
+  addDialogVisible.value = true;
+};
+
+const formChangeHandler = ({ index, ...value }: Record<string, any>) => {
+  if (index > -1) {
+    props.model[props.name][index] = value;
+  } else {
+    props.model[props.name].push(value);
+  }
+
+  addDialogVisible.value = false;
+
+  emit('change', props.model[props.name]);
+};
+
+const toggleValue = (row: MockSchema, key: 'enable' | 'useInEditor', value: boolean, index: number) => {
+  if (value) {
+    props.model[props.name].forEach((item: MockSchema) => {
+      item[key] = false;
+    });
+  }
+
+  formChangeHandler({
+    ...row,
+    [key]: value,
+    index,
+  });
+};
+
+const addDialogVisible = defineModel<boolean>('visible', { default: false });
+const { height: editorHeight } = useEditorContentHeight();
+const parentFloating = inject<Ref<HTMLDivElement | null>>('parentFloating', ref(null));
+const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(services?.uiService, parentFloating);
+</script>

package/src/fields/DataSourceSelect.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="m-fields-data-source-select">
+    <MSelect
+      :model="model"
+      :name="name"
+      :size="size"
+      :prop="prop"
+      :disabled="disabled"
+      :config="selectConfig"
+      :last-values="lastValues"
+      @change="changeHandler"
+    ></MSelect>
+
+    <TMagicButton
+      v-if="model[name] && hasDataSourceSidePanel"
+      class="m-fields-select-action-button"
+      :size="size"
+      @click="editHandler"
+      ><MIcon :icon="!notEditable ? Edit : View"></MIcon
+    ></TMagicButton>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+import { Edit, View } from '@element-plus/icons-vue';
+
+import { TMagicButton } from '@tmagic/design';
+import { type FieldProps, filterFunction, type FormState, MSelect, type SelectConfig } from '@tmagic/form';
+
+import MIcon from '@editor/components/Icon.vue';
+import type { DataSourceSelect, EventBus, Services } from '@editor/type';
+import { SideItemKey } from '@editor/type';
+
+defineOptions({
+  name: 'MFieldsDataSourceSelect',
+});
+
+const emit = defineEmits(['change']);
+
+const props = withDefaults(defineProps<FieldProps<DataSourceSelect>>(), {
+  disabled: false,
+});
+
+const mForm = inject<FormState | undefined>('mForm');
+const { dataSourceService, uiService } = inject<Services>('services') || {};
+const eventBus = inject<EventBus>('eventBus');
+
+const dataSources = computed(() => dataSourceService?.get('dataSources') || []);
+
+const notEditable = computed(() => filterFunction(mForm, props.config.notEditable, props));
+
+const hasDataSourceSidePanel = computed(() =>
+  (uiService?.get('sideBarItems') || []).find((item) => item.$key === SideItemKey.DATA_SOURCE),
+);
+
+const selectConfig = computed<SelectConfig>(() => {
+  const { type, dataSourceType, value, ...config } = props.config;
+
+  const valueIsId = props.config.value === 'id';
+
+  return {
+    ...config,
+    type: 'select',
+    valueKey: 'dataSourceId',
+    options: dataSources.value
+      .filter((ds) => !props.config.dataSourceType || ds.type === props.config.dataSourceType)
+      .map((ds) => ({
+        value: valueIsId
+          ? ds.id
+          : {
+              isBindDataSource: true,
+              dataSourceType: ds.type,
+              dataSourceId: ds.id,
+            },
+        text: ds.title || ds.id,
+      })),
+  };
+});
+
+const changeHandler = (value: any) => {
+  emit('change', value);
+};
+
+const editHandler = () => {
+  const value = props.model[props.name];
+
+  if (!value) return;
+
+  const id = typeof value === 'string' ? value : value.dataSourceId;
+
+  const dataSource = dataSourceService?.getDataSourceById(id);
+
+  if (!dataSource) return;
+
+  eventBus?.emit('edit-data-source', id);
+};
+</script>

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>