@tmagic/editor 1.4.3 → 1.4.5

package/src/fields/EventSelect.vue

@@ -15,7 +15,7 @@
       <TMagicButton class="create-button" type="primary" :size="size" :disabled="disabled" @click="addEvent()"
         >添加事件</TMagicButton
       >
-      <m-form-panel
+      <MPanel
         v-for="(cardItem, index) in model[name]"
         :key="index"
         :disabled="disabled"
@@ -26,14 +26,14 @@
         @change="onChangeHandler"
       >
         <template #header>
-          <m-form-container
+          <MContainer
             class="fullWidth"
             :config="eventNameConfig"
             :model="cardItem"
             :disabled="disabled"
             :size="size"
             @change="onChangeHandler"
-          ></m-form-container>
+          ></MContainer>
           <TMagicButton
             style="color: #f56c6c"
             link
@@ -43,7 +43,7 @@
             @click="removeEvent(index)"
           ></TMagicButton>
         </template>
-      </m-form-panel>
+      </MPanel>
     </div>
   </div>
 </template>
@@ -55,10 +55,13 @@ import { has } from 'lodash-es';
 
 import type { EventOption } from '@tmagic/core';
 import { TMagicButton } from '@tmagic/design';
-import type { FieldProps, FormState } from '@tmagic/form';
+import type { CascaderOption, FieldProps, FormState, PanelConfig } from '@tmagic/form';
+import { MContainer, MPanel } from '@tmagic/form';
 import { ActionType } from '@tmagic/schema';
+import { DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX } from '@tmagic/utils';
 
 import type { CodeSelectColConfig, DataSourceMethodSelectConfig, EventSelectConfig, Services } from '@editor/type';
+import { getCascaderOptionsFromFields } from '@editor/utils';
 
 defineOptions({
   name: 'MFieldsEventSelect',
@@ -77,26 +80,45 @@ const codeBlockService = services?.codeBlockService;
 
 // 事件名称下拉框表单配置
 const eventNameConfig = computed(() => {
+  const fieldType = props.config.src === 'component' ? 'select' : 'cascader';
   const defaultEventNameConfig = {
     name: 'name',
     text: '事件',
-    type: 'select',
+    type: fieldType,
     labelWidth: '40px',
+    checkStrictly: true,
+    valueSeparator: '.',
     options: (mForm: FormState, { formValue }: any) => {
-      let events: EventOption[] = [];
+      let events: EventOption[] | CascaderOption[] = [];
 
       if (!eventsService || !dataSourceService) return events;
 
       if (props.config.src === 'component') {
         events = eventsService.getEvent(formValue.type);
-      } else if (props.config.src === 'datasource') {
-        events = dataSourceService.getFormEvent(formValue.type);
+        return events.map((option) => ({
+          text: option.label,
+          value: option.value,
+        }));
       }
+      if (props.config.src === 'datasource') {
+        // 从数据源类型中获取到相关事件
+        events = dataSourceService.getFormEvent(formValue.type);
+        // 从数据源类型和实例中分别获取数据以追加数据变化的事件
+        const dataSource = dataSourceService.getDataSourceById(formValue.id);
+        const fields = dataSource?.fields || [];
+        if (fields.length > 0) {
+          return [
+            ...events,
+            {
+              label: '数据变化',
+              value: DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX,
+              children: getCascaderOptionsFromFields(fields),
+            },
+          ];
+        }
 
-      return events.map((option) => ({
-        text: option.label,
-        value: option.value,
-      }));
+        return events;
+      }
     },
   };
   return { ...defaultEventNameConfig, ...props.config.eventNameConfig };
@@ -227,7 +249,8 @@ const tableConfig = computed(() => ({
 }));
 
 // 组件动作组表单配置
-const actionsConfig = computed(() => ({
+const actionsConfig = computed<PanelConfig>(() => ({
+  type: 'panel',
   items: [
     {
       type: 'group-list',

package/src/hooks/use-editor-content-height.ts

@@ -1,4 +1,4 @@
-import { computed, inject, ref, watchEffect } from 'vue';
+import { computed, inject, ref, watch } from 'vue';
 
 import type { Services } from '@editor/type';
 
@@ -9,10 +9,16 @@ export const useEditorContentHeight = () => {
   const editorContentHeight = computed(() => frameworkHeight.value - navMenuHeight.value);
 
   const height = ref(0);
-  watchEffect(() => {
-    if (height.value > 0 && height.value === editorContentHeight.value) return;
-    height.value = editorContentHeight.value;
-  });
+  watch(
+    editorContentHeight,
+    () => {
+      if (height.value > 0 && height.value === editorContentHeight.value) return;
+      height.value = editorContentHeight.value;
+    },
+    {
+      immediate: true,
+    },
+  );
 
   return {
     height,

package/src/layouts/PropsPanel.vue

@@ -3,7 +3,7 @@
     <slot name="props-panel-header"></slot>
     <MForm
       ref="configForm"
-      :class="`m-editor-props-panel ${propsPanelSize}`"
+      :class="propsPanelSize"
       :popper-class="`m-editor-props-panel-popper ${propsPanelSize}`"
       :size="propsPanelSize"
       :init-values="values"
@@ -14,6 +14,7 @@
     ></MForm>
 
     <TMagicButton
+      v-if="!disabledShowSrc"
       class="m-editor-props-panel-src-icon"
       circle
       size="large"
@@ -57,6 +58,7 @@ defineOptions({
 });
 
 defineProps<{
+  disabledShowSrc?: boolean;
   extendState?: (state: FormState) => Record<string, any> | Promise<Record<string, any>>;
 }>();
 

package/src/layouts/sidebar/Sidebar.vue

@@ -8,7 +8,8 @@
         draggable="true"
         :key="config.$key ?? index"
         :class="{ 'is-active': activeTabName === config.text }"
-        @click="activeTabName = config.text || `${index}`"
+        :style="config.tabStyle || {}"
+        @click="activeTabName = config.text || config.$key || `${index}`"
         @dragstart="dragstartHandler"
         @dragend="dragendHandler(config.$key, $event)"
       >
@@ -20,7 +21,7 @@
       class="m-editor-sidebar-content"
       v-for="(config, index) in sideBarItems"
       :key="config.$key ?? index"
-      v-show="activeTabName === config.text"
+      v-show="[config.text, config.$key, `${index}`].includes(activeTabName)"
     >
       <component
         v-if="config && !floatBoxStates[config.$key]?.status"
@@ -151,6 +152,7 @@ import {
   type SidebarSlots,
   type SideComponent,
   type SideItem,
+  SideItemKey,
 } from '@editor/type';
 
 import CodeBlockListPanel from './code-block/CodeBlockListPanel.vue';
@@ -171,7 +173,11 @@ const props = withDefaults(
     customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
   }>(),
   {
-    data: () => ({ type: 'tabs', status: '组件', items: ['component-list', 'layer', 'code-block', 'data-source'] }),
+    data: () => ({
+      type: 'tabs',
+      status: '组件',
+      items: [SideItemKey.COMPONENT_LIST, SideItemKey.LAYER, SideItemKey.CODE_BLOCK, SideItemKey.DATA_SOURCE],
+    }),
   },
 );
 
@@ -184,8 +190,8 @@ const activeTabName = ref(props.data?.status);
 
 const getItemConfig = (data: SideItem): SideComponent => {
   const map: Record<string, SideComponent> = {
-    'component-list': {
-      $key: 'component-list',
+    [SideItemKey.COMPONENT_LIST]: {
+      $key: SideItemKey.COMPONENT_LIST,
       type: 'component',
       icon: Goods,
       text: '组件',
@@ -204,7 +210,7 @@ const getItemConfig = (data: SideItem): SideComponent => {
       component: LayerPanel,
       slots: {},
     },
-    'code-block': {
+    [SideItemKey.CODE_BLOCK]: {
       $key: 'code-block',
       type: 'component',
       icon: EditPen,
@@ -212,8 +218,8 @@ const getItemConfig = (data: SideItem): SideComponent => {
       component: CodeBlockListPanel,
       slots: {},
     },
-    'data-source': {
-      $key: 'data-source',
+    [SideItemKey.DATA_SOURCE]: {
+      $key: SideItemKey.DATA_SOURCE,
       type: 'component',
       icon: Coin,
       text: '数据源',
@@ -227,6 +233,16 @@ const getItemConfig = (data: SideItem): SideComponent => {
 
 const sideBarItems = computed(() => props.data.items.map((item) => getItemConfig(item)));
 
+watch(
+  sideBarItems,
+  (items) => {
+    services?.uiService.set('sideBarItems', items);
+  },
+  {
+    immediate: true,
+  },
+);
+
 watch(
   () => props.data.status,
   (status) => {

package/src/layouts/sidebar/code-block/CodeBlockListPanel.vue

@@ -36,7 +36,7 @@ import type { Id } from '@tmagic/schema';
 import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
 import SearchInput from '@editor/components/SearchInput.vue';
 import { useCodeBlockEdit } from '@editor/hooks/use-code-block-edit';
-import type { CodeBlockListPanelSlots, CodeDeleteErrorType, Services } from '@editor/type';
+import type { CodeBlockListPanelSlots, CodeDeleteErrorType, EventBus, Services } from '@editor/type';
 
 import CodeBlockList from './CodeBlockList.vue';
 
@@ -50,6 +50,7 @@ defineProps<{
   customError?: (id: Id, errorType: CodeDeleteErrorType) => any;
 }>();
 
+const eventBus = inject<EventBus>('eventBus');
 const { codeBlockService } = inject<Services>('services') || {};
 
 const editable = computed(() => codeBlockService?.getEditStatus());
@@ -62,4 +63,8 @@ const codeBlockList = ref<InstanceType<typeof CodeBlockList>>();
 const filterTextChangeHandler = (val: string) => {
   codeBlockList.value?.filter(val);
 };
+
+eventBus?.on('edit-code', (id: string) => {
+  editCode(id);
+});
 </script>

package/src/layouts/sidebar/data-source/DataSourceListPanel.vue

@@ -46,7 +46,7 @@ import { TMagicButton, TMagicPopover, TMagicScrollbar } from '@tmagic/design';
 import SearchInput from '@editor/components/SearchInput.vue';
 import ToolButton from '@editor/components/ToolButton.vue';
 import { useDataSourceEdit } from '@editor/hooks/use-data-source-edit';
-import type { DataSourceListSlots, Services } from '@editor/type';
+import type { DataSourceListSlots, EventBus, Services } from '@editor/type';
 
 import DataSourceConfigPanel from './DataSourceConfigPanel.vue';
 import DataSourceList from './DataSourceList.vue';
@@ -57,6 +57,7 @@ defineOptions({
   name: 'MEditorDataSourceListPanel',
 });
 
+const eventBus = inject<EventBus>('eventBus');
 const { dataSourceService } = inject<Services>('services') || {};
 
 const { editDialog, dataSourceValues, dialogTitle, editable, editHandler, submitDataSourceHandler } =
@@ -98,4 +99,8 @@ const dataSourceList = ref<InstanceType<typeof DataSourceList>>();
 const filterTextChangeHandler = (val: string) => {
   dataSourceList.value?.filter(val);
 };
+
+eventBus?.on('edit-data-source', (id: string) => {
+  editHandler(id);
+});
 </script>

package/src/layouts/workspace/viewer/Stage.vue

@@ -45,7 +45,8 @@ import { computed, inject, markRaw, nextTick, onBeforeUnmount, onMounted, ref, t
 import { cloneDeep } from 'lodash-es';
 
 import type { MApp, MContainer } from '@tmagic/schema';
-import StageCore, { calcValueByFontsize, getOffset, Runtime } from '@tmagic/stage';
+import StageCore, { getOffset, Runtime } from '@tmagic/stage';
+import { calcValueByFontsize } from '@tmagic/utils';
 
 import ScrollViewer from '@editor/components/ScrollViewer.vue';
 import { useStage } from '@editor/hooks/use-stage';
@@ -223,18 +224,18 @@ const dropHandler = async (e: DragEvent) => {
       top = e.clientY - containerRect.top + scrollTop;
       left = e.clientX - containerRect.left + scrollLeft;
 
-      if (parentEl && doc) {
+      if (parentEl) {
         const { left: parentLeft, top: parentTop } = getOffset(parentEl);
-        left = left - calcValueByFontsize(doc, parentLeft) * zoom.value;
-        top = top - calcValueByFontsize(doc, parentTop) * zoom.value;
+        left = left - parentLeft * zoom.value;
+        top = top - parentTop * zoom.value;
       }
     }
 
     config.data.style = {
       ...style,
       position,
-      top: top / zoom.value,
-      left: left / zoom.value,
+      top: calcValueByFontsize(doc, top / zoom.value),
+      left: calcValueByFontsize(doc, left / zoom.value),
     };
 
     config.data.inputEvent = e;

package/src/services/editor.ts

@@ -23,7 +23,7 @@ import { Writable } from 'type-fest';
 import { DepTargetType } from '@tmagic/dep';
 import type { Id, MApp, MComponent, MContainer, MNode, MPage, MPageFragment } from '@tmagic/schema';
 import { NodeType } from '@tmagic/schema';
-import { getNodePath, isNumber, isPage, isPageFragment, isPop } from '@tmagic/utils';
+import { calcValueByFontsize, getNodePath, isNumber, isPage, isPageFragment, isPop } from '@tmagic/utils';
 
 import BaseService from '@editor/services//BaseService';
 import propsService from '@editor/services//props';
@@ -741,7 +741,7 @@ class Editor extends BaseService {
       const el = doc.getElementById(`${node.id}`);
       const parentEl = layout === Layout.FIXED ? doc.body : el?.offsetParent;
       if (parentEl && el) {
-        node.style.left = (parentEl.clientWidth - el.clientWidth) / 2;
+        node.style.left = calcValueByFontsize(doc, (parentEl.clientWidth - el.clientWidth) / 2);
         node.style.right = '';
       }
     } else if (parent.style && isNumber(parent.style?.width) && isNumber(node.style?.width)) {

package/src/services/ui.ts

@@ -48,6 +48,7 @@ const state = reactive<UiState>({
   propsPanelSize: 'small',
   showAddPageButton: true,
   hideSlideBar: false,
+  sideBarItems: [],
   navMenuRect: {
     left: 0,
     top: 0,

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

@@ -0,0 +1,12 @@
+.m-fields-data-source-select,
+.m-fields-data-source-field-select,
+.m-fields-data-source-method-select .data-source-method-select-container,
+.m-fields-code-select-col .code-select-container {
+  width: 100%;
+  display: flex;
+  align-items: center;
+
+  .m-fields-select-action-button {
+    margin-left: 5px;
+  }
+}

package/src/theme/props-panel.scss

@@ -1,5 +1,5 @@
 .m-editor-props-panel {
-  padding: 0 10px;
+  padding: 0 10px 50px 10px;
 
   .m-editor-props-panel-src-icon {
     position: absolute;

package/src/theme/theme.scss

@@ -24,3 +24,4 @@
 @import "./tree.scss";
 @import "./floating-box.scss";
 @import "./page-fragment-select.scss";
+@import "./data-source-field.scss";

package/src/type.ts

@@ -17,6 +17,7 @@
  */
 
 import type { Component } from 'vue';
+import type EventEmitter from 'events';
 import type { PascalCasedProperties } from 'type-fest';
 
 import type { ChildConfig, ColumnConfig, FilterFunction, FormConfig, FormItem, Input } from '@tmagic/form';
@@ -238,6 +239,8 @@ export interface UiState {
   showAddPageButton: boolean;
   /** 是否隐藏侧边栏 */
   hideSlideBar: boolean;
+  /** 侧边栏面板配置 */
+  sideBarItems: SideComponent[];
 
   // navMenu 的宽高
   navMenuRect: {
@@ -370,8 +373,10 @@ export interface MenuBarData {
 export interface SideComponent extends MenuComponent {
   /** 显示文案 */
   text: string;
+  /** tab样式 */
+  tabStyle?: string | Record<string, any>;
   /** vue组件或url */
-  icon: Component<{}, {}, any>;
+  icon?: any;
   /** slide 唯一标识 key */
   $key: string;
 
@@ -384,12 +389,19 @@ export interface SideComponent extends MenuComponent {
   };
 }
 
+export enum SideItemKey {
+  COMPONENT_LIST = 'component-list',
+  LAYER = 'layer',
+  CODE_BLOCK = 'code-block',
+  DATA_SOURCE = 'data-source',
+}
+
 /**
  * component-list: 组件列表
  * layer: 已选组件树
  * code-block: 代码块
  */
-export type SideItem = 'component-list' | 'layer' | 'code-block' | 'data-source' | SideComponent;
+export type SideItem = `${SideItemKey}` | SideComponent;
 
 /** 工具栏 */
 export interface SideBarData {
@@ -621,6 +633,8 @@ export interface DataSourceSelect extends FormItem, Input {
    * value: 要编译（数据源data）
    * */
   value?: 'id' | 'value';
+  /** 是否可以编辑数据源，disable表示的是是否可以选择数据源 */
+  notEditable?: boolean | FilterFunction;
 }
 
 export interface DataSourceMethodSelectConfig extends FormItem {
@@ -640,6 +654,8 @@ export interface DataSourceFieldSelectConfig extends FormItem {
   checkStrictly?: boolean;
   dataSourceFieldType?: DataSourceFieldType[];
   fieldConfig?: ChildConfig;
+  /** 是否可以编辑数据源，disable表示的是是否可以选择数据源 */
+  notEditable?: boolean | FilterFunction;
 }
 
 /** 可新增的数据源类型选项 */
@@ -714,3 +730,16 @@ export type SyncHookPlugin<
   C extends Record<T[number], (...args: any) => any>,
 > = AddPrefixToObject<PascalCasedProperties<SyncBeforeHook<T, C>>, 'before'> &
   AddPrefixToObject<PascalCasedProperties<SyncAfterHook<T, C>>, 'after'>;
+
+export interface EventBusEvent {
+  'edit-data-source': [id: string];
+  'edit-code': [id: string];
+}
+
+export interface EventBus extends EventEmitter {
+  on<Name extends keyof EventBusEvent, Param extends EventBusEvent[Name]>(
+    eventName: Name,
+    listener: (...args: Param) => void,
+  ): this;
+  emit<Name extends keyof EventBusEvent, Param extends EventBusEvent[Name]>(eventName: Name, ...args: Param): boolean;
+}

package/src/utils/content-menu.ts

@@ -2,7 +2,7 @@ import { computed, markRaw, Ref } from 'vue';
 import { CopyDocument, Delete, DocumentCopy } from '@element-plus/icons-vue';
 
 import { Id, MContainer, NodeType } from '@tmagic/schema';
-import { isPage, isPageFragment } from '@tmagic/utils';
+import { calcValueByFontsize, isPage, isPageFragment } from '@tmagic/utils';
 
 import ContentMenu from '@editor/components/ContentMenu.vue';
 import type { MenuButton, Services } from '@editor/type';
@@ -46,8 +46,12 @@ export const usePasteMenu = (menu?: Ref<InstanceType<typeof ContentMenu> | undef
       const stage = services?.editorService?.get('stage');
       const rect = menu.value.$el.getBoundingClientRect();
       const parentRect = stage?.container?.getBoundingClientRect();
-      const initialLeft = (rect.left || 0) - (parentRect?.left || 0);
-      const initialTop = (rect.top || 0) - (parentRect?.top || 0);
+      const initialLeft =
+        calcValueByFontsize(stage?.renderer.getDocument(), (rect.left || 0) - (parentRect?.left || 0)) /
+        services.uiService.get('zoom');
+      const initialTop =
+        calcValueByFontsize(stage?.renderer.getDocument(), (rect.top || 0) - (parentRect?.top || 0)) /
+        services.uiService.get('zoom');
       services?.editorService?.paste({ left: initialLeft, top: initialTop });
     } else {
       services?.editorService?.paste();

package/src/utils/data-source/index.ts

@@ -1,5 +1,5 @@
-import { FormConfig, FormState } from '@tmagic/form';
-import { DataSchema, DataSourceSchema } from '@tmagic/schema';
+import { CascaderOption, FormConfig, FormState } from '@tmagic/form';
+import { DataSchema, DataSourceFieldType, DataSourceSchema } from '@tmagic/schema';
 
 import BaseFormConfig from './formConfigs/base';
 import HttpFormConfig from './formConfigs/http';
@@ -32,7 +32,6 @@ const fillConfig = (config: FormConfig): FormConfig => [
       },
       {
         title: '事件配置',
-        display: false,
         items: [
           {
             name: 'events',
@@ -198,3 +197,40 @@ export const getDisplayField = (dataSources: DataSourceSchema[], key: string) =>
 
   return displayState;
 };
+
+export const getCascaderOptionsFromFields = (
+  fields: DataSchema[] = [],
+  dataSourceFieldType: DataSourceFieldType[] = ['any'],
+): CascaderOption[] => {
+  const child: CascaderOption[] = [];
+  fields.forEach((field) => {
+    if (!dataSourceFieldType.length) {
+      dataSourceFieldType.push('any');
+    }
+
+    const children = getCascaderOptionsFromFields(field.fields, dataSourceFieldType);
+
+    const item = {
+      label: field.title || field.name,
+      value: field.name,
+      children,
+    };
+
+    const fieldType = field.type || 'any';
+    if (dataSourceFieldType.includes('any') || dataSourceFieldType.includes(fieldType)) {
+      child.push(item);
+      return;
+    }
+
+    if (!dataSourceFieldType.includes(fieldType) && !['array', 'object', 'any'].includes(fieldType)) {
+      return;
+    }
+
+    if (!children.length && ['object', 'array', 'any'].includes(field.type || '')) {
+      return;
+    }
+
+    child.push(item);
+  });
+  return child;
+};

package/src/utils/editor.ts

@@ -21,7 +21,7 @@ import serialize from 'serialize-javascript';
 import type { Id, MApp, MContainer, MNode, MPage, MPageFragment } from '@tmagic/schema';
 import { NodeType } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
-import { getNodePath, isNumber, isPage, isPageFragment, isPop } from '@tmagic/utils';
+import { calcValueByFontsize, getNodePath, isNumber, isPage, isPageFragment, isPop } from '@tmagic/utils';
 
 import { Layout } from '@editor/type';
 export const COPY_STORAGE_KEY = '$MagicEditorCopyData';
@@ -106,13 +106,16 @@ const getMiddleTop = (node: MNode, parentNode: MNode, stage: StageCore | null) =
   }
 
   const { height: parentHeight } = parentNode.style;
-
+  // wrapperHeight 是未 calcValue的高度, 所以要将其calcValueByFontsize一下, 否则在pad or pc端计算的结果有误
+  const { scrollTop = 0, wrapperHeight } = stage.mask;
+  const wrapperHeightDeal = calcValueByFontsize(stage.renderer.getDocument()!, wrapperHeight);
+  const scrollTopDeal = calcValueByFontsize(stage.renderer.getDocument()!, scrollTop);
   if (isPage(parentNode)) {
-    const { scrollTop = 0, wrapperHeight } = stage.mask;
-    return (wrapperHeight - height) / 2 + scrollTop;
+    return (wrapperHeightDeal - height) / 2 + scrollTopDeal;
   }
 
-  return (parentHeight - height) / 2;
+  // 如果容器的元素高度大于当前视口高度的2倍, 添加的元素居中位置也会看不见, 所以要取最小值计算
+  return (Math.min(parentHeight, wrapperHeightDeal) - height) / 2;
 };
 
 export const getInitPositionStyle = (style: Record<string, any> = {}, layout: Layout) => {
@@ -238,8 +241,12 @@ export const fixNodeLeft = (config: MNode, parent: MContainer, doc?: Document) =
   const parentEl = doc.getElementById(`${parent.id}`);
 
   const left = Number(config.style?.left) || 0;
-  if (el && parentEl && el.offsetWidth + left > parentEl.offsetWidth) {
-    return parentEl.offsetWidth - el.offsetWidth;
+  if (el && parentEl) {
+    const calcParentOffsetWidth = calcValueByFontsize(doc, parentEl.offsetWidth);
+    const calcElOffsetWidth = calcValueByFontsize(doc, el.offsetWidth);
+    if (calcElOffsetWidth + left > calcParentOffsetWidth) {
+      return calcParentOffsetWidth - calcElOffsetWidth;
+    }
   }
 
   return config.style.left;

package/types/components/CodeBlockEditor.vue.d.ts

@@ -1,46 +1,33 @@
 import type { CodeBlockContent } from '@tmagic/schema';
-declare const _default: import("vue").DefineComponent<{
-    width: import("vue").PropType<number>;
-    visible: import("vue").PropType<boolean>;
-    content: {
-        type: import("vue").PropType<CodeBlockContent>;
-        required: true;
-    };
-    disabled: {
-        type: import("vue").PropType<boolean>;
-    };
-    isDataSource: {
-        type: import("vue").PropType<boolean>;
-    };
-    dataSourceType: {
-        type: import("vue").PropType<string>;
-    };
-}, {
+declare let __VLS_typeProps: {
+    content: CodeBlockContent;
+    disabled?: boolean;
+    isDataSource?: boolean;
+    dataSourceType?: string;
+};
+type __VLS_PublicProps = {
+    'width'?: number;
+    'visible'?: boolean;
+} & typeof __VLS_typeProps;
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<__VLS_PublicProps>, {
     show(): Promise<void>;
     hide(): Promise<void>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:width": (width: number) => void;
     "update:visible": (visible: boolean) => void;
     submit: (values: CodeBlockContent) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    width: import("vue").PropType<number>;
-    visible: import("vue").PropType<boolean>;
-    content: {
-        type: import("vue").PropType<CodeBlockContent>;
-        required: true;
-    };
-    disabled: {
-        type: import("vue").PropType<boolean>;
-    };
-    isDataSource: {
-        type: import("vue").PropType<boolean>;
-    };
-    dataSourceType: {
-        type: import("vue").PropType<string>;
-    };
-}>> & {
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<__VLS_PublicProps>>> & {
     onSubmit?: ((values: CodeBlockContent) => any) | undefined;
     "onUpdate:width"?: ((width: number) => any) | undefined;
     "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
 }, {}, {}>;
 export default _default;
+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;
+    };
+};