@tmagic/editor 1.4.9 → 1.4.10

package/types/layouts/PropsPanel.vue.d.ts

@@ -8,22 +8,22 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
         popperClass: {
             type: import("vue").PropType<string>;
         };
-        height: {
-            type: import("vue").PropType<string>;
-            default: string;
-        };
-        size: {
-            type: import("vue").PropType<"default" | "small" | "large">;
-        };
         disabled: {
             type: import("vue").PropType<boolean>;
             default: boolean;
         };
+        height: {
+            type: import("vue").PropType<string>;
+            default: string;
+        };
         config: {
             type: import("vue").PropType<import("@tmagic/form").FormConfig>;
             required: true;
             default: () => never[];
         };
+        size: {
+            type: import("vue").PropType<"default" | "small" | "large">;
+        };
         labelWidth: {
             type: import("vue").PropType<string>;
             default: string;
@@ -86,22 +86,22 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
         popperClass: {
             type: import("vue").PropType<string>;
         };
-        height: {
-            type: import("vue").PropType<string>;
-            default: string;
-        };
-        size: {
-            type: import("vue").PropType<"default" | "small" | "large">;
-        };
         disabled: {
             type: import("vue").PropType<boolean>;
             default: boolean;
         };
+        height: {
+            type: import("vue").PropType<string>;
+            default: string;
+        };
         config: {
             type: import("vue").PropType<import("@tmagic/form").FormConfig>;
             required: true;
             default: () => never[];
         };
+        size: {
+            type: import("vue").PropType<"default" | "small" | "large">;
+        };
         labelWidth: {
             type: import("vue").PropType<string>;
             default: string;
@@ -171,22 +171,22 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
         popperClass: {
             type: import("vue").PropType<string>;
         };
-        height: {
-            type: import("vue").PropType<string>;
-            default: string;
-        };
-        size: {
-            type: import("vue").PropType<"default" | "small" | "large">;
-        };
         disabled: {
             type: import("vue").PropType<boolean>;
             default: boolean;
         };
+        height: {
+            type: import("vue").PropType<string>;
+            default: string;
+        };
         config: {
             type: import("vue").PropType<import("@tmagic/form").FormConfig>;
             required: true;
             default: () => never[];
         };
+        size: {
+            type: import("vue").PropType<"default" | "small" | "large">;
+        };
         labelWidth: {
             type: import("vue").PropType<string>;
             default: string;

package/types/layouts/page-bar/PageBar.vue.d.ts

@@ -1,9 +1,15 @@
 import { type MPage, type MPageFragment } from '@tmagic/schema';
+import type { PageBarSortOptions } from '../../type';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<{
     disabledPageFragment: boolean;
+    pageBarSortOptions?: PageBarSortOptions | undefined;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
     disabledPageFragment: boolean;
+    pageBarSortOptions?: PageBarSortOptions | undefined;
 }>>>, {}, {}>, {
+    "page-list-popover"?(_: {
+        list: MPage[] | MPageFragment[];
+    }): any;
     "page-bar-title"?(_: {
         page: MPage | MPageFragment;
     }): any;

package/types/layouts/page-bar/PageBarScrollContainer.vue.d.ts

@@ -1,8 +1,11 @@
 import { NodeType } from '@tmagic/schema';
+import type { PageBarSortOptions } from '../../type';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<{
     type: NodeType.PAGE | NodeType.PAGE_FRAGMENT;
+    pageBarSortOptions?: PageBarSortOptions | undefined;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
     type: NodeType.PAGE | NodeType.PAGE_FRAGMENT;
+    pageBarSortOptions?: PageBarSortOptions | undefined;
 }>>>, {}, {}>, {
     prepend?(_: {}): any;
     default?(_: {}): any;

package/types/layouts/page-bar/PageList.vue.d.ts

@@ -0,0 +1,25 @@
+import { MPage, MPageFragment } from '@tmagic/schema';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<{
+    list: MPage[] | MPageFragment[];
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
+    list: MPage[] | MPageFragment[];
+}>>>, {}, {}>, {
+    "page-list-popover"?(_: {
+        list: MPage[] | MPageFragment[];
+    }): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/types/services/ui.d.ts

@@ -30,6 +30,7 @@ declare class Ui extends BaseService {
         showRule: boolean;
         propsPanelSize: "default" | "small" | "large";
         showAddPageButton: boolean;
+        showPageListButton: boolean;
         hideSlideBar: boolean;
         sideBarItems: {
             [x: string]: any;

package/types/type.d.ts

@@ -1,9 +1,10 @@
 /// <reference types="node" />
 import type { Component } from 'vue';
 import type EventEmitter from 'events';
+import Sortable, { Options, SortableEvent } from 'sortablejs';
 import type { PascalCasedProperties } from 'type-fest';
-import type { ChildConfig, ColumnConfig, FilterFunction, FormConfig, FormItem, Input } from '@tmagic/form';
-import type { CodeBlockContent, CodeBlockDSL, DataSourceFieldType, Id, MApp, MContainer, MNode, MPage, MPageFragment } from '@tmagic/schema';
+import type { ChildConfig, ColumnConfig, FilterFunction, FormConfig, FormItem, FormState, Input } from '@tmagic/form';
+import type { CodeBlockContent, CodeBlockDSL, DataSourceFieldType, DataSourceSchema, Id, MApp, MContainer, MNode, MPage, MPageFragment } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
 import type { ContainerHighlightType, CustomizeMoveableOptionsCallbackConfig, GuidesOptions, MoveableOptions, RenderType, UpdateDragEl } from '@tmagic/stage';
 import type { CodeBlockService } from './services/codeBlock';
@@ -37,6 +38,9 @@ export interface FrameworkSlots {
     'page-bar-popover'(props: {
         page: MPage | MPageFragment;
     }): any;
+    'page-list-popover'(props: {
+        list: MPage[] | MPageFragment[];
+    }): any;
 }
 export interface WorkspaceSlots {
     stage(props: {}): any;
@@ -195,6 +199,8 @@ export interface UiState {
     propsPanelSize: 'large' | 'default' | 'small';
     /** 是否显示新增页面按钮 */
     showAddPageButton: boolean;
+    /** 是否在页面工具栏显示呼起页面列表按钮 */
+    showPageListButton: boolean;
     /** 是否隐藏侧边栏 */
     hideSlideBar: boolean;
     /** 侧边栏面板配置 */
@@ -547,18 +553,31 @@ export interface DataSourceMethodSelectConfig extends FormItem {
 }
 export interface DataSourceFieldSelectConfig extends FormItem {
     type: 'data-source-field-select';
-    /** 是否要编译成数据源的data。
+    /**
+     * 是否要编译成数据源的data。
      * key: 不编译，就是要数据源id和field name;
      * value: 要编译（数据源data[`${filed}`]）
      * */
     value?: 'key' | 'value';
     /** 是否严格的遵守父子节点不互相关联 */
-    checkStrictly?: boolean;
+    checkStrictly?: boolean | ((mForm: FormState | undefined, data: {
+        model: Record<any, any>;
+        values: Record<any, any>;
+        parent?: Record<any, any>;
+        formValue: Record<any, any>;
+        prop: string;
+        config: DataSourceFieldSelectConfig;
+        dataSource?: DataSourceSchema;
+    }) => boolean);
     dataSourceFieldType?: DataSourceFieldType[];
     fieldConfig?: ChildConfig;
     /** 是否可以编辑数据源，disable表示的是是否可以选择数据源 */
     notEditable?: boolean | FilterFunction;
 }
+export interface CondOpSelectConfig extends FormItem {
+    type: 'cond-op';
+    parentFields?: string[];
+}
 /** 可新增的数据源类型选项 */
 export interface DatasourceTypeOption {
     /** 数据源类型 */
@@ -623,3 +642,10 @@ export type PropsFormConfigFunction = (data: {
 export type PropsFormValueFunction = (data: {
     editorService: EditorService;
 }) => Partial<MNode>;
+export type PartSortableOptions = Omit<Options, 'onStart' | 'onUpdate'>;
+export interface PageBarSortOptions extends PartSortableOptions {
+    /** 在onUpdate之后调用 */
+    afterUpdate: (event: SortableEvent, sortable: Sortable) => void;
+    /** 在onStart之前调用 */
+    beforeStart: (event: SortableEvent, sortable: Sortable) => void;
+}

package/types/utils/data-source/index.d.ts

@@ -7,3 +7,4 @@ export declare const getDisplayField: (dataSources: DataSourceSchema[], key: str
     type: 'var' | 'text';
 }[];
 export declare const getCascaderOptionsFromFields: (fields?: DataSchema[], dataSourceFieldType?: DataSourceFieldType[]) => CascaderOption[];
+export declare const removeDataSourceFieldPrefix: (id?: string) => string;

package/types/utils/props.d.ts

@@ -1,4 +1,16 @@
 import type { FormConfig, TabPaneConfig } from '@tmagic/form';
+export declare const arrayOptions: {
+    text: string;
+    value: string;
+}[];
+export declare const eqOptions: {
+    text: string;
+    value: string;
+}[];
+export declare const numberOptions: {
+    text: string;
+    value: string;
+}[];
 export declare const styleTabConfig: TabPaneConfig;
 export declare const eventTabConfig: TabPaneConfig;
 export declare const advancedTabConfig: TabPaneConfig;

package/src/fields/DataSourceFieldSelect.vue

@@ -1,149 +0,0 @@
-<template>
-  <div class="m-fields-data-source-field-select">
-    <component
-      :is="tagName"
-      :config="showDataSourceFieldSelect || !config.fieldConfig ? cascaderConfig : 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="(showDataSourceFieldSelect || !config.fieldConfig) && selectedDataSourceId && hasDataSourceSidePanel"
-      class="m-fields-select-action-button"
-      :size="size"
-      @click="editHandler(selectedDataSourceId)"
-      ><MIcon :icon="!notEditable ? Edit : View"></MIcon
-    ></TMagicButton>
-
-    <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, Edit, View } from '@element-plus/icons-vue';
-
-import { TMagicButton } from '@tmagic/design';
-import type { CascaderConfig, FieldProps, FormState } from '@tmagic/form';
-import { filterFunction, MCascader } from '@tmagic/form';
-import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX } from '@tmagic/utils';
-
-import MIcon from '@editor/components/Icon.vue';
-import type { DataSourceFieldSelectConfig, EventBus, Services } from '@editor/type';
-import { SideItemKey } from '@editor/type';
-import { getCascaderOptionsFromFields } from '@editor/utils';
-
-defineOptions({
-  name: 'MFieldsDataSourceFieldSelect',
-});
-
-const services = inject<Services>('services');
-const eventBus = inject<EventBus>('eventBus');
-const emit = defineEmits(['change']);
-
-const props = withDefaults(defineProps<FieldProps<DataSourceFieldSelectConfig>>(), {
-  disabled: false,
-});
-
-const notEditable = computed(() => filterFunction(mForm, props.config.notEditable, props));
-
-const hasDataSourceSidePanel = computed(() =>
-  (services?.uiService.get('sideBarItems') || []).find((item) => item.$key === SideItemKey.DATA_SOURCE),
-);
-
-const selectedDataSourceId = computed(() => {
-  const value = props.model[props.name];
-  if (!Array.isArray(value) || !value.length) {
-    return '';
-  }
-
-  return value[0].replace(DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, '');
-});
-
-const dataSources = computed(() => services?.dataSourceService.get('dataSources'));
-
-const cascaderConfig = computed<CascaderConfig>(() => {
-  const valueIsKey = props.config.value === 'key';
-
-  return {
-    type: 'cascader',
-    checkStrictly: props.config.checkStrictly ?? !valueIsKey,
-    popperClass: 'm-editor-data-source-field-select-popper',
-    options: () => {
-      const options =
-        dataSources.value?.map((ds) => ({
-          label: ds.title || ds.id,
-          value: valueIsKey ? ds.id : `${DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX}${ds.id}`,
-          children: getCascaderOptionsFromFields(ds.fields, props.config.dataSourceFieldType),
-        })) || [];
-      return options.filter((option) => option.children.length);
-    },
-  };
-});
-
-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 mForm = inject<FormState | undefined>('mForm');
-
-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(() => {
-  if (showDataSourceFieldSelect.value || !props.config.fieldConfig) {
-    return MCascader;
-  }
-
-  const component = resolveComponent(`m-${props.config.items ? 'form' : 'fields'}-${type.value}`);
-  if (typeof component !== 'string') return component;
-  return 'm-fields-text';
-});
-
-const onChangeHandler = (value: any) => {
-  emit('change', value);
-};
-
-const editHandler = (id: string) => {
-  eventBus?.emit('edit-data-source', id);
-};
-</script>