@maketribe/ms-app 3.2.26 → 3.2.27

package/dist/esm/components/basic/doc-editor/plugins/ToolbarPlugin/FontStyleTool.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"FontStyleTool.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ToolbarPlugin/FontStyleTool.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport {\r\n  $getSelection,\r\n  $isRangeSelection,\r\n  $isRootOrShadowRoot,\r\n  $isParagraphNode,\r\n  FORMAT_TEXT_COMMAND,\r\n  FORMAT_ELEMENT_COMMAND,\r\n  type ElementFormatType,\r\n} from 'lexical'\r\nimport {\r\n  $getSelectionStyleValueForProperty,\r\n  $patchStyleText,\r\n} from '@lexical/selection'\r\n\r\nimport { $isLinkNode, TOGGLE_LINK_COMMAND,LinkNode } from '@lexical/link'\r\nimport { sanitizeUrl } from '../../utils/url'\r\nimport { getSelectedNode } from '../../utils/getSelectedNode'\r\nimport { $findMatchingParent,mergeRegister } from '@lexical/utils'\r\nimport {  useLexicalComposer } from 'lexical-vue'\r\nimport { onMounted, onUnmounted, ref,watch } from 'vue'\r\nimport { FONT_SIZE_OPTIONS,ROOT_FONT_SIZE,FONT_FAMILY_OPTIONS } from \"./FontStyleDefines\"\r\nimport { ShowLinkEditPanel } from \"../AutoLinkPlugin/LinkEditDialog\";\r\n\r\nconst editor = useLexicalComposer()\r\nconst fontSize = ref('14px')\r\nconst fontColor = ref<string>('#000')\r\nconst bgColor = ref<string>('#fff')\r\nconst fontFamily = ref<any>(FONT_FAMILY_OPTIONS[0])\r\nconst isBold = ref(false)\r\nconst isItalic = ref(false)\r\nconst isUnderline = ref(false)\r\nconst isStrikethrough = ref(false)\r\n\r\nconst isSubscript = ref(false)\r\nconst isSuperscript = ref(false)\r\n\r\n// 对齐方式\r\nconst alignList = ref<ElementFormatType[]>([\"left\",\"center\",\"right\",\"justify\"])\r\nconst alignValue = ref(alignList.value[0])\r\nconst disabled = ref(false)\r\nconst isLink = ref(false)\r\nconst linkValue = ref(\"\");\r\n\r\nasync function insertLink() {\r\n\r\n  const result:any = await ShowLinkEditPanel(linkValue.value);\r\n\r\n  if(result.trim()){\r\n    editor.dispatchCommand(TOGGLE_LINK_COMMAND, sanitizeUrl(result))\r\n  }\r\n  else{\r\n    editor.dispatchCommand(TOGGLE_LINK_COMMAND, null)\r\n  }\r\n}\r\n\r\n// 更新状态栏\r\nfunction updateToolbar() {\r\n\r\n  const selection = $getSelection()\r\n\r\n  if ($isRangeSelection(selection)) {\r\n\r\n    const anchorNode = selection.anchor.getNode()\r\n\r\n    let element = anchorNode.getKey() === 'root'\r\n          ? anchorNode\r\n          : $findMatchingParent(anchorNode, (e) => {\r\n            const parent = e.getParent()\r\n            return parent !== null && $isRootOrShadowRoot(parent)\r\n          });\r\n\r\n\r\n    if (element === null){\r\n      element = anchorNode.getTopLevelElementOrThrow()\r\n    }\r\n\r\n    let elementDOM = editor.getElementByKey(element.getKey());\r\n\r\n    // 文本对齐\r\n    alignValue.value = (elementDOM?.style.textAlign as ElementFormatType) || \"left\";\r\n\r\n    if(alignValue.value  == \"start\"){ alignValue.value  = \"left\"; }\r\n    else if(alignValue.value  == \"end\"){ alignValue.value  = \"right\"; }\r\n\r\n    // Update text format\r\n    isBold.value = selection.hasFormat('bold')\r\n    isItalic.value = selection.hasFormat('italic')\r\n    isUnderline.value = selection.hasFormat('underline')\r\n    isStrikethrough.value = selection.hasFormat('strikethrough')\r\n    isSubscript.value = selection.hasFormat('subscript')\r\n    isSuperscript.value = selection.hasFormat('superscript')\r\n\r\n    // Handle buttons\r\n    var ff = $getSelectionStyleValueForProperty(selection, 'font-family', 'Arial');\r\n    let fs = $getSelectionStyleValueForProperty(selection, 'font-size', '1rem');\r\n     \r\n    if(fs){\r\n       fontSize.value = Math.round(parseFloat(fs) * ROOT_FONT_SIZE)+\"px\"\r\n    }\r\n   \r\n    fontColor.value = $getSelectionStyleValueForProperty(selection, 'color', '#000')\r\n    bgColor.value = $getSelectionStyleValueForProperty(selection, 'background-color', '#fff')\r\n    fontFamily.value = FONT_FAMILY_OPTIONS.find(item=>item.value==ff) || FONT_FAMILY_OPTIONS[0];\r\n\r\n    disabled.value = false;\r\n\r\n    // Update links\r\n    const node = getSelectedNode(selection)\r\n    const parent = node.getParent()\r\n    isLink.value = $isLinkNode(parent) || $isLinkNode(node)\r\n    if(isLink.value){\r\n      linkValue.value = $isLinkNode(parent) ? parent.getURL() : (node as LinkNode).getURL()\r\n    }\r\n    else{\r\n      linkValue.value = \"\";\r\n    }\r\n  }\r\n  else{\r\n\r\n    disabled.value = true;\r\n  }\r\n}\r\n\r\n// 文字样式\r\nconst fontStyleHandle = (data : any,styleName?:any)=>{\r\n  fontSize.value = data.label;\r\n  editor.update(() => {\r\n    const selection = $getSelection()\r\n    if (selection !== null) {\r\n      $patchStyleText(selection, {\r\n        [styleName || \"font-size\"]:data.value\r\n      })\r\n    }\r\n  })\r\n}\r\n\r\n// 字体颜色\r\nwatch(fontColor,(color:any)=>{\r\n  editor.update(() => {\r\n      const selection = $getSelection()\r\n      if (selection !== null){\r\n        $patchStyleText(selection, { color })\r\n      }\r\n    },{})\r\n})\r\n\r\n// bg颜色\r\nwatch(bgColor,(color:any)=>{\r\n  editor.update(() => {\r\n      const selection = $getSelection()\r\n      if (selection !== null){\r\n        $patchStyleText(selection, { 'background-color':color })\r\n      }\r\n    },{})\r\n})\r\n\r\n// 挂载的时候\r\nonMounted(() => {\r\n\r\n  const unregisterMergeListener = mergeRegister(\r\n    editor.registerUpdateListener(({ editorState }) => {\r\n      editorState.read(() => updateToolbar())\r\n    }),\r\n    // editor.registerCommand(SELECTION_CHANGE_COMMAND, (_payload, _newEditor) => updateToolbar()!,lowPriority)\r\n  )\r\n\r\n  onUnmounted(() => unregisterMergeListener());\r\n})\r\n\r\n</script>\r\n\r\n<template>\r\n   <!-- 字体 -->\r\n    <el-dropdown max-height=\"300px\" trigger=\"click\" :disabled=\"disabled\">\r\n      <el-button text  :style=\"{fontFamily:fontFamily.value}\" :disabled=\"disabled\">\r\n        {{fontFamily.label}} <MKSvgIcon iconClass=\"ArrowDownBold\" style=\"margin-left: 8px;\" /> \r\n      </el-button>\r\n      <template #dropdown>\r\n        <el-dropdown-menu>\r\n          <el-dropdown-item :class=\"{active:fontFamily.label == item.label}\" :disabled=\"disabled\"  v-for=\"item in FONT_FAMILY_OPTIONS\" :value=\"item.value\" @click=\"fontStyleHandle(item,'font-family')\">\r\n            <span :style=\"{fontFamily:item.value}\">\r\n              {{item.label}}\r\n            </span>\r\n          </el-dropdown-item>\r\n        </el-dropdown-menu>\r\n      </template>\r\n    </el-dropdown>\r\n    <el-divider  direction=\"vertical\" />  \r\n    <!-- 字体大小 -->\r\n    <el-dropdown max-height=\"300px\" trigger=\"click\" :disabled=\"disabled\">\r\n        <el-button text :disabled=\"disabled\">\r\n          {{fontSize}} <MKSvgIcon iconClass=\"ArrowDownBold\" style=\"margin-left: 8px;\" /> \r\n        </el-button>\r\n        <template #dropdown>\r\n          <el-dropdown-menu>\r\n            <el-dropdown-item :class=\"{active:fontSize==item.label}\" :disabled=\"disabled\" v-for=\"item in FONT_SIZE_OPTIONS\" :value=\"item.value\" @click=\"fontStyleHandle(item)\">{{item.label}}</el-dropdown-item>\r\n          </el-dropdown-menu>\r\n        </template>\r\n    </el-dropdown>\r\n    <el-divider  direction=\"vertical\" />  \r\n    <!-- 字体颜色 -->\r\n    <el-button text class=\"mk-doc-editor-toolbar__fontcolor\" :disabled=\"disabled\" >\r\n        <el-color-picker v-model=\"fontColor\" :disabled=\"disabled\"  />\r\n    </el-button>\r\n    <!-- 背景颜色 -->\r\n    <el-button text class=\"mk-doc-editor-toolbar__bgcolor\" :disabled=\"disabled\" >\r\n      <el-color-picker v-model=\"bgColor\" :disabled=\"disabled\"  />\r\n      <MKSvgIcon class=\"view\" iconClass=\"doc-background-color\" /> \r\n    </el-button>\r\n\r\n    <el-divider  direction=\"vertical\" />\r\n    <el-button-group>\r\n      <el-button :disabled=\"disabled\" text :class=\"`${isBold ? 'active' : ''}`\" @click=\"editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold')\">\r\n        <MKSvgIcon iconClass=\"doc-bold\" /> \r\n      </el-button>\r\n      <el-button :disabled=\"disabled\" text :class=\"`${isItalic ? 'active' : ''}`\" @click=\"editor.dispatchCommand(FORMAT_TEXT_COMMAND,  'italic')\">\r\n        <MKSvgIcon iconClass=\"doc-italic\" /> \r\n      </el-button>\r\n      <el-button :disabled=\"disabled\" text :class=\"`${isUnderline ? 'active' : ''}`\"  @click=\"editor.dispatchCommand(FORMAT_TEXT_COMMAND,  'underline')\">\r\n        <MKSvgIcon iconClass=\"doc-underline\" /> \r\n      </el-button>\r\n      <el-button :disabled=\"disabled\" text :class=\"`${isStrikethrough ? 'active' : ''}`\" @click=\"editor.dispatchCommand(FORMAT_TEXT_COMMAND,  'strikethrough')\">\r\n        <MKSvgIcon iconClass=\"doc-strikethrough\" /> \r\n      </el-button>\r\n      <el-button :disabled=\"disabled\" text :class=\"`${isSubscript ? 'active' : ''}`\"  @click=\"editor.dispatchCommand(FORMAT_TEXT_COMMAND,  'subscript')\">\r\n        <MKSvgIcon iconClass=\"doc-sub\" /> \r\n      </el-button>\r\n      <el-button :disabled=\"disabled\" text :class=\"`${isSuperscript ? 'active' : ''}`\" @click=\"editor.dispatchCommand(FORMAT_TEXT_COMMAND,  'superscript')\">\r\n        <MKSvgIcon iconClass=\"doc-sup\" /> \r\n      </el-button>\r\n    </el-button-group>\r\n    <el-divider  direction=\"vertical\" />\r\n    <el-dropdown max-height=\"300px\" trigger=\"click\" :disabled=\"disabled\">\r\n      <el-button text  :style=\"{fontFamily:fontFamily.value}\" :disabled=\"disabled\">\r\n        <MKSvgIcon :iconClass=\"`doc-align-${alignValue}`\" style=\"font-size: 18px;\" /> \r\n      </el-button>\r\n      <template #dropdown>\r\n        <el-dropdown-menu>\r\n          <el-dropdown-item :disabled=\"disabled\" :class=\"{active:alignValue == item}\" v-for=\"item in alignList\" :value=\"item\"  @click=\"editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, item)\">\r\n            <MKSvgIcon :iconClass=\"`doc-align-${item}`\" style=\"font-size: 18px;\"  /> \r\n          </el-dropdown-item>\r\n        </el-dropdown-menu>\r\n      </template>\r\n    </el-dropdown>\r\n    <el-divider  direction=\"vertical\" />\r\n    <!-- 链接 -->\r\n    <el-button-group>\r\n      <el-button text :disabled=\"disabled\" :class=\"`${isLink ? 'active' : ''}`\" @click=\"insertLink\">\r\n        <MKSvgIcon iconClass=\"doc-link\" /> \r\n      </el-button>\r\n    </el-button-group>\r\n</template>\r\n"],"names":["parent"],"mappings":"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"}
+{"version":3,"file":"FontStyleTool.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ToolbarPlugin/FontStyleTool.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport {\r\n  $getSelection,\r\n  $isRangeSelection,\r\n  $isRootOrShadowRoot,\r\n  $isParagraphNode,\r\n  FORMAT_TEXT_COMMAND,\r\n  FORMAT_ELEMENT_COMMAND,\r\n  type ElementFormatType,\r\n} from 'lexical'\r\nimport {\r\n  $getSelectionStyleValueForProperty,\r\n  $patchStyleText,\r\n} from '@lexical/selection'\r\n\r\nimport { $isLinkNode, TOGGLE_LINK_COMMAND,LinkNode } from '@lexical/link'\r\nimport { sanitizeUrl } from '../../utils/url'\r\nimport { getSelectedNode } from '../../utils/getSelectedNode'\r\nimport { $findMatchingParent,mergeRegister } from '@lexical/utils'\r\nimport {  useLexicalComposer } from 'lexical-vue'\r\nimport { onMounted, onUnmounted, ref,watch } from 'vue'\r\nimport { FONT_SIZE_OPTIONS,ROOT_FONT_SIZE,FONT_FAMILY_OPTIONS } from \"./FontStyleDefines\"\r\nimport { ShowLinkEditPanel } from \"../AutoLinkPlugin/LinkEditDialog\";\r\n\r\nconst editor = useLexicalComposer()\r\nconst fontSize = ref('14px')\r\nconst fontColor = ref<string>('#000')\r\nconst bgColor = ref<string>('#fff')\r\nconst fontFamily = ref<any>(FONT_FAMILY_OPTIONS[0])\r\nconst isBold = ref(false)\r\nconst isItalic = ref(false)\r\nconst isUnderline = ref(false)\r\nconst isStrikethrough = ref(false)\r\n\r\nconst isSubscript = ref(false)\r\nconst isSuperscript = ref(false)\r\n\r\n// 对齐方式\r\nconst alignList = ref<ElementFormatType[]>([\"left\",\"center\",\"right\",\"justify\"])\r\nconst alignValue = ref(alignList.value[0])\r\nconst disabled = ref(false)\r\nconst isLink = ref(false)\r\nconst linkValue = ref(\"\");\r\n\r\nasync function insertLink() {\r\n\r\n  const result:any = await ShowLinkEditPanel(linkValue.value);\r\n\r\n  if(result.trim()){\r\n    editor.dispatchCommand(TOGGLE_LINK_COMMAND, sanitizeUrl(result))\r\n  }\r\n  else{\r\n    editor.dispatchCommand(TOGGLE_LINK_COMMAND, null)\r\n  }\r\n}\r\n\r\n// 更新状态栏\r\nfunction updateToolbar() {\r\n\r\n  const selection = $getSelection()\r\n\r\n  if ($isRangeSelection(selection)) {\r\n\r\n    const anchorNode = selection.anchor.getNode()\r\n\r\n    let element = anchorNode.getKey() === 'root'\r\n          ? anchorNode\r\n          : $findMatchingParent(anchorNode, (e) => {\r\n            const parent = e.getParent()\r\n            return parent !== null && $isRootOrShadowRoot(parent)\r\n          });\r\n\r\n\r\n    if (element === null){\r\n      element = anchorNode.getTopLevelElementOrThrow()\r\n    }\r\n\r\n    let elementDOM = editor.getElementByKey(element.getKey());\r\n\r\n    // 文本对齐\r\n    alignValue.value = (elementDOM?.style.textAlign as ElementFormatType) || \"left\";\r\n\r\n    if(alignValue.value  == \"start\"){ alignValue.value  = \"left\"; }\r\n    else if(alignValue.value  == \"end\"){ alignValue.value  = \"right\"; }\r\n\r\n    // Update text format\r\n    isBold.value = selection.hasFormat('bold')\r\n    isItalic.value = selection.hasFormat('italic')\r\n    isUnderline.value = selection.hasFormat('underline')\r\n    isStrikethrough.value = selection.hasFormat('strikethrough')\r\n    isSubscript.value = selection.hasFormat('subscript')\r\n    isSuperscript.value = selection.hasFormat('superscript')\r\n\r\n    // Handle buttons\r\n    var ff = $getSelectionStyleValueForProperty(selection, 'font-family', 'Arial');\r\n    let fs = $getSelectionStyleValueForProperty(selection, 'font-size', '1rem');\r\n     \r\n    if(fs){\r\n       fontSize.value = Math.round(parseFloat(fs) * ROOT_FONT_SIZE)+\"px\"\r\n    }\r\n   \r\n    fontColor.value = $getSelectionStyleValueForProperty(selection, 'color', '#000')\r\n    bgColor.value = $getSelectionStyleValueForProperty(selection, 'background-color', '#fff')\r\n    fontFamily.value = FONT_FAMILY_OPTIONS.find(item=>item.value==ff) || FONT_FAMILY_OPTIONS[0];\r\n\r\n    disabled.value = false;\r\n\r\n    // Update links\r\n    const node = getSelectedNode(selection)\r\n    const parent = node.getParent()\r\n    isLink.value = $isLinkNode(parent) || $isLinkNode(node)\r\n    if(isLink.value){\r\n      linkValue.value = $isLinkNode(parent) ? parent.getURL() : (node as LinkNode).getURL()\r\n    }\r\n    else{\r\n      linkValue.value = \"\";\r\n    }\r\n  }\r\n  else{\r\n\r\n    disabled.value = true;\r\n  }\r\n}\r\n\r\n// 文字样式\r\nconst fontStyleHandle = (data : any,styleName?:any)=>{\r\n  fontSize.value = data.label;\r\n  editor.update(() => {\r\n    const selection = $getSelection()\r\n    if (selection !== null) {\r\n      $patchStyleText(selection, {\r\n        [styleName || \"font-size\"]:data.value\r\n      })\r\n    }\r\n  })\r\n}\r\n\r\n// 字体颜色\r\nconst setFontColor = (color:any)=>{\r\n  editor.update(() => {\r\n    const selection = $getSelection()\r\n    if (selection !== null){\r\n      $patchStyleText(selection, { color })\r\n    }\r\n  },{})\r\n}\r\n\r\n// bg颜色\r\nconst setBgColor = (color:any)=>{\r\n  editor.update(() => {\r\n    const selection = $getSelection()\r\n    if (selection !== null){\r\n      $patchStyleText(selection, { 'background-color':color })\r\n    }\r\n  },{})\r\n}\r\n\r\n\r\n// 挂载的时候\r\nonMounted(() => {\r\n\r\n  const unregisterMergeListener = mergeRegister(\r\n    editor.registerUpdateListener(({ editorState }) => {\r\n      editorState.read(() => updateToolbar())\r\n    })\r\n  )\r\n\r\n  onUnmounted(() => unregisterMergeListener());\r\n})\r\n\r\n</script>\r\n\r\n<template>\r\n   <!-- 字体 -->\r\n    <el-dropdown max-height=\"300px\" trigger=\"click\" :disabled=\"disabled\">\r\n      <el-button text  :style=\"{fontFamily:fontFamily.value}\" :disabled=\"disabled\">\r\n        {{fontFamily.label}} <MKSvgIcon iconClass=\"ArrowDownBold\" style=\"margin-left: 8px;\" /> \r\n      </el-button>\r\n      <template #dropdown>\r\n        <el-dropdown-menu>\r\n          <el-dropdown-item :class=\"{active:fontFamily.label == item.label}\" :disabled=\"disabled\"  v-for=\"item in FONT_FAMILY_OPTIONS\" :value=\"item.value\" @click=\"fontStyleHandle(item,'font-family')\">\r\n            <span :style=\"{fontFamily:item.value}\">\r\n              {{item.label}}\r\n            </span>\r\n          </el-dropdown-item>\r\n        </el-dropdown-menu>\r\n      </template>\r\n    </el-dropdown>\r\n    <el-divider  direction=\"vertical\" />  \r\n    <!-- 字体大小 -->\r\n    <el-dropdown max-height=\"300px\" trigger=\"click\" :disabled=\"disabled\">\r\n        <el-button text :disabled=\"disabled\">\r\n          {{fontSize}} <MKSvgIcon iconClass=\"ArrowDownBold\" style=\"margin-left: 8px;\" /> \r\n        </el-button>\r\n        <template #dropdown>\r\n          <el-dropdown-menu>\r\n            <el-dropdown-item :class=\"{active:fontSize==item.label}\" :disabled=\"disabled\" v-for=\"item in FONT_SIZE_OPTIONS\" :value=\"item.value\" @click=\"fontStyleHandle(item)\">{{item.label}}</el-dropdown-item>\r\n          </el-dropdown-menu>\r\n        </template>\r\n    </el-dropdown>\r\n    <el-divider  direction=\"vertical\" />  \r\n    <!-- 字体颜色 -->\r\n    <el-button text class=\"mk-doc-editor-toolbar__fontcolor\" :disabled=\"disabled\" >\r\n        <el-color-picker v-model=\"fontColor\" :disabled=\"disabled\" @change=\"setFontColor\"  />\r\n    </el-button>\r\n    <!-- 背景颜色 -->\r\n    <el-button text class=\"mk-doc-editor-toolbar__bgcolor\" :disabled=\"disabled\" >\r\n      <el-color-picker v-model=\"bgColor\" :disabled=\"disabled\"  />\r\n      <MKSvgIcon class=\"view\" iconClass=\"doc-background-color\" @change=\"setBgColor\" /> \r\n    </el-button>\r\n\r\n    <el-divider  direction=\"vertical\" />\r\n    <el-button-group>\r\n      <el-button :disabled=\"disabled\" text :class=\"`${isBold ? 'active' : ''}`\" @click=\"editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold')\">\r\n        <MKSvgIcon iconClass=\"doc-bold\" /> \r\n      </el-button>\r\n      <el-button :disabled=\"disabled\" text :class=\"`${isItalic ? 'active' : ''}`\" @click=\"editor.dispatchCommand(FORMAT_TEXT_COMMAND,  'italic')\">\r\n        <MKSvgIcon iconClass=\"doc-italic\" /> \r\n      </el-button>\r\n      <el-button :disabled=\"disabled\" text :class=\"`${isUnderline ? 'active' : ''}`\"  @click=\"editor.dispatchCommand(FORMAT_TEXT_COMMAND,  'underline')\">\r\n        <MKSvgIcon iconClass=\"doc-underline\" /> \r\n      </el-button>\r\n      <el-button :disabled=\"disabled\" text :class=\"`${isStrikethrough ? 'active' : ''}`\" @click=\"editor.dispatchCommand(FORMAT_TEXT_COMMAND,  'strikethrough')\">\r\n        <MKSvgIcon iconClass=\"doc-strikethrough\" /> \r\n      </el-button>\r\n      <el-button :disabled=\"disabled\" text :class=\"`${isSubscript ? 'active' : ''}`\"  @click=\"editor.dispatchCommand(FORMAT_TEXT_COMMAND,  'subscript')\">\r\n        <MKSvgIcon iconClass=\"doc-sub\" /> \r\n      </el-button>\r\n      <el-button :disabled=\"disabled\" text :class=\"`${isSuperscript ? 'active' : ''}`\" @click=\"editor.dispatchCommand(FORMAT_TEXT_COMMAND,  'superscript')\">\r\n        <MKSvgIcon iconClass=\"doc-sup\" /> \r\n      </el-button>\r\n    </el-button-group>\r\n    <el-divider  direction=\"vertical\" />\r\n    <el-dropdown max-height=\"300px\" trigger=\"click\" :disabled=\"disabled\">\r\n      <el-button text  :style=\"{fontFamily:fontFamily.value}\" :disabled=\"disabled\">\r\n        <MKSvgIcon :iconClass=\"`doc-align-${alignValue}`\" style=\"font-size: 18px;\" /> \r\n      </el-button>\r\n      <template #dropdown>\r\n        <el-dropdown-menu>\r\n          <el-dropdown-item :disabled=\"disabled\" :class=\"{active:alignValue == item}\" v-for=\"item in alignList\" :value=\"item\"  @click=\"editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, item)\">\r\n            <MKSvgIcon :iconClass=\"`doc-align-${item}`\" style=\"font-size: 18px;\"  /> \r\n          </el-dropdown-item>\r\n        </el-dropdown-menu>\r\n      </template>\r\n    </el-dropdown>\r\n    <el-divider  direction=\"vertical\" />\r\n    <!-- 链接 -->\r\n    <el-button-group>\r\n      <el-button text :disabled=\"disabled\" :class=\"`${isLink ? 'active' : ''}`\" @click=\"insertLink\">\r\n        <MKSvgIcon iconClass=\"doc-link\" /> \r\n      </el-button>\r\n    </el-button-group>\r\n</template>\r\n"],"names":["parent"],"mappings":"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"}

package/dist/esm/components/basic/doc-editor/plugins/nodes.js.map

@@ -1 +1 @@
-{"version":3,"file":"nodes.js","sources":["../../../../../../src/components/basic/doc-editor/plugins/nodes.ts"],"sourcesContent":["import { type Klass, type LexicalNode,TextNode,ElementNode,ParagraphNode } from 'lexical'\r\nimport { HeadingNode, QuoteNode } from '@lexical/rich-text'\r\nimport { TableCellNode, TableNode, TableRowNode } from '@lexical/table'\r\nimport { ListItemNode, ListNode } from '@lexical/list'\r\nimport { CodeHighlightNode, CodeNode } from '@lexical/code'\r\nimport { AutoLinkNode, LinkNode } from '@lexical/link'\r\nimport { HashtagNode } from '@lexical/hashtag'\r\nimport { ImageNode,InlineImageNode } from \"./ImagePlugin\"\r\nimport { RichTextNode } from \"./RichTextPlugin/nodes/RichTextNode\"\r\nimport { ModuleBlockNode } from \"./ModulePlugin\"\r\nimport { GridNode,LayoutGridNode,TextGridNode,ImageTextGridNode,ModuleGridNode } from \"./GridPlugin\"\r\n\r\n\r\nconst Nodes: Array<Klass<LexicalNode>> = [\r\n  HeadingNode,\r\n  ListNode,\r\n  ListItemNode,\r\n  QuoteNode,\r\n  CodeNode,\r\n  CodeHighlightNode,\r\n  TableNode,\r\n  TableCellNode,\r\n  TableRowNode,\r\n  AutoLinkNode,\r\n  LinkNode,\r\n  HashtagNode,\r\n\r\n  RichTextNode,\r\n  ImageNode,\r\n  InlineImageNode,\r\n  ModuleBlockNode,\r\n  GridNode,\r\n  TextGridNode,\r\n  LayoutGridNode,\r\n  ImageTextGridNode,\r\n  ModuleGridNode\r\n]\r\n\r\nexport default Nodes\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAaA,MAAM,QAAmC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;"}
+{"version":3,"file":"nodes.js","sources":["../../../../../../src/components/basic/doc-editor/plugins/nodes.ts"],"sourcesContent":["import { type Klass, type LexicalNode,TextNode,ElementNode,ParagraphNode, SerializedElementNode, $isTextNode } from 'lexical'\r\nimport { HeadingNode, QuoteNode } from '@lexical/rich-text'\r\nimport { TableCellNode, TableNode, TableRowNode } from '@lexical/table'\r\nimport { ListItemNode, ListNode } from '@lexical/list'\r\nimport { CodeHighlightNode, CodeNode } from '@lexical/code'\r\nimport { AutoLinkNode, LinkNode } from '@lexical/link'\r\nimport { HashtagNode } from '@lexical/hashtag'\r\nimport { ImageNode,InlineImageNode } from \"./ImagePlugin\"\r\nimport { RichTextNode } from \"./RichTextPlugin/nodes/RichTextNode\"\r\nimport { ModuleBlockNode } from \"./ModulePlugin\"\r\nimport { GridNode,LayoutGridNode,TextGridNode,ImageTextGridNode,ModuleGridNode } from \"./GridPlugin\"\r\n\r\n\r\nconst Nodes: Array<Klass<LexicalNode>> = [\r\n  HeadingNode,\r\n  ListNode,\r\n  ListItemNode,\r\n  QuoteNode,\r\n  CodeNode,\r\n  CodeHighlightNode,\r\n  TableNode,\r\n  TableCellNode,\r\n  TableRowNode,\r\n  AutoLinkNode,\r\n  LinkNode,\r\n  HashtagNode,\r\n\r\n  RichTextNode,\r\n  ImageNode,\r\n  InlineImageNode,\r\n  ModuleBlockNode,\r\n  GridNode,\r\n  TextGridNode,\r\n  LayoutGridNode,\r\n  ImageTextGridNode,\r\n  ModuleGridNode\r\n]\r\n\r\nexport default Nodes\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAaA,MAAM,QAAmC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;"}

package/dist/esm/components/basic/doc-editor/themes/doc-editor-edit.css.js

@@ -1,4 +1,4 @@
-const DocEditorEditCss = '\r\n.mk-doc__img {\r\n  cursor: pointer;\r\n  z-index: 1;\r\n  position: relative;\r\n}\r\n\r\n.mk-doc__grid{\r\n  outline: 2px solid #eff5ff;\r\n  position: relative;\r\n  cursor: pointer;\r\n  white-space:initial;\r\n  word-break:initial;\r\n  min-height: 50px;\r\n  padding-top: 20px;\r\n}\r\n\r\n.mk-doc__grid::before{\r\n  text-align: center;\r\n  background-color: #eff5ff;\r\n  color: #4284ff;\r\n  left: 0;\r\n  top: 0px;\r\n  pointer-events: all;\r\n  font-size: 14px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  z-index: 999; \r\n  width: 200px;\r\n  height: 20px;\r\n  cursor: pointer;\r\n}\r\n\r\n.mk-doc__grid::before{\r\n  content: "选中格子";\r\n  position: absolute;\r\n}\r\n.mk-doc__grid.mk-doc__layout-grid::before{\r\n  content: "选中布局容器";\r\n}\r\n.mk-doc__grid.mk-doc__text-grid{\r\n  cursor: text;\r\n}\r\n.mk-doc__grid.mk-doc__text-grid::before{\r\n  content: "选中文本容器";\r\n}\r\n.mk-doc__grid.mk-doc__image-text::before{\r\n  content: "选中图文环绕容器";\r\n}\r\n.mk-doc__grid.mk-doc__module-grid::before{\r\n  content: "选中模块容器";\r\n  width: 200px;\r\n  height: 20px;\r\n  margin-top: -20px;\r\n  position: sticky;\r\n}\r\n\r\n.mk-doc__grid.mk-doc__module-grid a{\r\n  pointer-events: none;\r\n}\r\n.mk-doc__grid.mk-doc__image-text .mk-doc__text-grid{\r\n  outline: 0;\r\n  padding-top: 0;\r\n}\r\n.mk-doc__grid.mk-doc__image-text .mk-doc__text-grid::before{\r\n  display: none;\r\n}\r\n\r\n.mk-doc__embedBlock {\r\n  position: relative;\r\n  z-index: 1;\r\n  padding: 1px;\r\n  cursor: pointer;\r\n}\r\n.mk-doc__embedBlockFocus {\r\n  outline: 2px solid rgb(60, 132, 244);\r\n}\r\n\r\n.mk-doc__embedBlock >*{\r\n  pointer-events: none;\r\n}\r\n\r\n.mk-doc-active-mark{\r\n  position: absolute;\r\n  box-sizing:border-box;\r\n  background-color:#2776f63b;\r\n  z-index: 99;\r\n  pointer-events: none;\r\n}\r\n.mk-doc-active-mark.box{\r\n  outline: 2px solid #2776f63b;\r\n  background-color: transparent;\r\n}\r\n';
+const DocEditorEditCss = '\r\n.mk-doc__img {\r\n  cursor: pointer;\r\n  z-index: 1;\r\n  position: relative;\r\n}\r\n\r\n.mk-doc__grid{\r\n  outline: 2px solid #eff5ff;\r\n  position: relative;\r\n  cursor: pointer;\r\n  white-space:initial;\r\n  word-break:initial;\r\n  min-height: 150px;\r\n}\r\n.mk-doc__grid.mk-doc__module-grid::before,\r\n.mk-doc__grid.doc-edit-active::before{\r\n  text-align: center;\r\n  background-color: #eff5ff;\r\n  color: #4284ff;\r\n  left: -20px;\r\n  top: 0px;\r\n  pointer-events: all;\r\n  font-size: 14px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  z-index: 999; \r\n  width: 20px;\r\n  cursor: pointer;\r\n  font-size: 12px;\r\n  padding: 5px 0;\r\n}\r\n\r\n.mk-doc__grid.doc-edit-active::before{\r\n  content: "容器";\r\n  position: absolute;\r\n}\r\n.mk-doc__grid.mk-doc__layout-grid.doc-edit-active::before{\r\n  content: "布局容器";\r\n}\r\n/* 文本框可编辑文字 */\r\n.mk-doc__grid.mk-doc__text-grid :not(.mk-doc__grid){\r\n  cursor: text;\r\n}\r\n.mk-doc__grid.mk-doc__text-grid.doc-edit-active::before{\r\n  content: "文本容器";\r\n}\r\n\r\n/* 图文环绕容器 */\r\n.mk-doc__grid.mk-doc__image-text.doc-edit-active::before{\r\n  content: "图文环绕容器";\r\n}\r\n\r\n/* 图文环绕容器下的文本框不做选中 */\r\n.mk-doc__grid.mk-doc__image-text .mk-doc__text-grid{\r\n  outline: 0;\r\n  padding-top: 0;\r\n}\r\n.mk-doc__grid.mk-doc__image-text .mk-doc__text-grid::before{\r\n  display: none;\r\n}\r\n\r\n/* 模块容器 */\r\n.mk-doc__grid.mk-doc__module-grid::before{\r\n  content: "模块容器";\r\n  width: 200px;\r\n  height: 20px;\r\n  top:0;\r\n  left: 0;;\r\n  position: sticky;\r\n}\r\n/* 避免模块下的a标签点击 */\r\n.mk-doc__grid.mk-doc__module-grid a{\r\n  pointer-events: none;\r\n}\r\n\r\n/* 给布局下的格子加内边距方便编辑 */\r\n.mk-doc__grid.mk-doc__layout-grid >.mk-doc__grid{\r\n  margin: 10px;\r\n}\r\n\r\n/* 块选中 */\r\n.mk-doc__embedBlock {\r\n  position: relative;\r\n  z-index: 1;\r\n  padding: 1px;\r\n  cursor: pointer;\r\n}\r\n.mk-doc__embedBlockFocus {\r\n  outline: 2px solid rgb(60, 132, 244);\r\n}\r\n\r\n.mk-doc__embedBlock >*{\r\n  pointer-events: none;\r\n}\r\n\r\n.mk-doc-active-element-block-mark{\r\n  position: absolute;\r\n  box-sizing:border-box;\r\n  background-color:#2776f63b;\r\n  z-index: 99;\r\n  pointer-events: none;\r\n}\r\n.mk-doc-active-element-block-mark.box{\r\n  outline: 2px solid #2776f63b;\r\n  background-color: transparent;\r\n}\r\n';
 export {
   DocEditorEditCss as default
 };

package/dist/esm/components/basic/doc-editor/themes/doc-editor-edit.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"doc-editor-edit.css.js","sources":["../../../../../../src/components/basic/doc-editor/themes/doc-editor-edit.css?raw"],"sourcesContent":["export default \"\\r\\n.mk-doc__img {\\r\\n  cursor: pointer;\\r\\n  z-index: 1;\\r\\n  position: relative;\\r\\n}\\r\\n\\r\\n.mk-doc__grid{\\r\\n  outline: 2px solid #eff5ff;\\r\\n  position: relative;\\r\\n  cursor: pointer;\\r\\n  white-space:initial;\\r\\n  word-break:initial;\\r\\n  min-height: 50px;\\r\\n  padding-top: 20px;\\r\\n}\\r\\n\\r\\n.mk-doc__grid::before{\\r\\n  text-align: center;\\r\\n  background-color: #eff5ff;\\r\\n  color: #4284ff;\\r\\n  left: 0;\\r\\n  top: 0px;\\r\\n  pointer-events: all;\\r\\n  font-size: 14px;\\r\\n  display: flex;\\r\\n  align-items: center;\\r\\n  justify-content: center;\\r\\n  z-index: 999; \\r\\n  width: 200px;\\r\\n  height: 20px;\\r\\n  cursor: pointer;\\r\\n}\\r\\n\\r\\n.mk-doc__grid::before{\\r\\n  content: \\\"选中格子\\\";\\r\\n  position: absolute;\\r\\n}\\r\\n.mk-doc__grid.mk-doc__layout-grid::before{\\r\\n  content: \\\"选中布局容器\\\";\\r\\n}\\r\\n.mk-doc__grid.mk-doc__text-grid{\\r\\n  cursor: text;\\r\\n}\\r\\n.mk-doc__grid.mk-doc__text-grid::before{\\r\\n  content: \\\"选中文本容器\\\";\\r\\n}\\r\\n.mk-doc__grid.mk-doc__image-text::before{\\r\\n  content: \\\"选中图文环绕容器\\\";\\r\\n}\\r\\n.mk-doc__grid.mk-doc__module-grid::before{\\r\\n  content: \\\"选中模块容器\\\";\\r\\n  width: 200px;\\r\\n  height: 20px;\\r\\n  margin-top: -20px;\\r\\n  position: sticky;\\r\\n}\\r\\n\\r\\n.mk-doc__grid.mk-doc__module-grid a{\\r\\n  pointer-events: none;\\r\\n}\\r\\n.mk-doc__grid.mk-doc__image-text .mk-doc__text-grid{\\r\\n  outline: 0;\\r\\n  padding-top: 0;\\r\\n}\\r\\n.mk-doc__grid.mk-doc__image-text .mk-doc__text-grid::before{\\r\\n  display: none;\\r\\n}\\r\\n\\r\\n.mk-doc__embedBlock {\\r\\n  position: relative;\\r\\n  z-index: 1;\\r\\n  padding: 1px;\\r\\n  cursor: pointer;\\r\\n}\\r\\n.mk-doc__embedBlockFocus {\\r\\n  outline: 2px solid rgb(60, 132, 244);\\r\\n}\\r\\n\\r\\n.mk-doc__embedBlock >*{\\r\\n  pointer-events: none;\\r\\n}\\r\\n\\r\\n.mk-doc-active-mark{\\r\\n  position: absolute;\\r\\n  box-sizing:border-box;\\r\\n  background-color:#2776f63b;\\r\\n  z-index: 99;\\r\\n  pointer-events: none;\\r\\n}\\r\\n.mk-doc-active-mark.box{\\r\\n  outline: 2px solid #2776f63b;\\r\\n  background-color: transparent;\\r\\n}\\r\\n\""],"names":[],"mappings":"AAAA,MAAe,mBAAA;"}
+{"version":3,"file":"doc-editor-edit.css.js","sources":["../../../../../../src/components/basic/doc-editor/themes/doc-editor-edit.css?raw"],"sourcesContent":["export default \"\\r\\n.mk-doc__img {\\r\\n  cursor: pointer;\\r\\n  z-index: 1;\\r\\n  position: relative;\\r\\n}\\r\\n\\r\\n.mk-doc__grid{\\r\\n  outline: 2px solid #eff5ff;\\r\\n  position: relative;\\r\\n  cursor: pointer;\\r\\n  white-space:initial;\\r\\n  word-break:initial;\\r\\n  min-height: 150px;\\r\\n}\\r\\n.mk-doc__grid.mk-doc__module-grid::before,\\r\\n.mk-doc__grid.doc-edit-active::before{\\r\\n  text-align: center;\\r\\n  background-color: #eff5ff;\\r\\n  color: #4284ff;\\r\\n  left: -20px;\\r\\n  top: 0px;\\r\\n  pointer-events: all;\\r\\n  font-size: 14px;\\r\\n  display: flex;\\r\\n  align-items: center;\\r\\n  justify-content: center;\\r\\n  z-index: 999; \\r\\n  width: 20px;\\r\\n  cursor: pointer;\\r\\n  font-size: 12px;\\r\\n  padding: 5px 0;\\r\\n}\\r\\n\\r\\n.mk-doc__grid.doc-edit-active::before{\\r\\n  content: \\\"容器\\\";\\r\\n  position: absolute;\\r\\n}\\r\\n.mk-doc__grid.mk-doc__layout-grid.doc-edit-active::before{\\r\\n  content: \\\"布局容器\\\";\\r\\n}\\r\\n/* 文本框可编辑文字 */\\r\\n.mk-doc__grid.mk-doc__text-grid :not(.mk-doc__grid){\\r\\n  cursor: text;\\r\\n}\\r\\n.mk-doc__grid.mk-doc__text-grid.doc-edit-active::before{\\r\\n  content: \\\"文本容器\\\";\\r\\n}\\r\\n\\r\\n/* 图文环绕容器 */\\r\\n.mk-doc__grid.mk-doc__image-text.doc-edit-active::before{\\r\\n  content: \\\"图文环绕容器\\\";\\r\\n}\\r\\n\\r\\n/* 图文环绕容器下的文本框不做选中 */\\r\\n.mk-doc__grid.mk-doc__image-text .mk-doc__text-grid{\\r\\n  outline: 0;\\r\\n  padding-top: 0;\\r\\n}\\r\\n.mk-doc__grid.mk-doc__image-text .mk-doc__text-grid::before{\\r\\n  display: none;\\r\\n}\\r\\n\\r\\n/* 模块容器 */\\r\\n.mk-doc__grid.mk-doc__module-grid::before{\\r\\n  content: \\\"模块容器\\\";\\r\\n  width: 200px;\\r\\n  height: 20px;\\r\\n  top:0;\\r\\n  left: 0;;\\r\\n  position: sticky;\\r\\n}\\r\\n/* 避免模块下的a标签点击 */\\r\\n.mk-doc__grid.mk-doc__module-grid a{\\r\\n  pointer-events: none;\\r\\n}\\r\\n\\r\\n/* 给布局下的格子加内边距方便编辑 */\\r\\n.mk-doc__grid.mk-doc__layout-grid >.mk-doc__grid{\\r\\n  margin: 10px;\\r\\n}\\r\\n\\r\\n/* 块选中 */\\r\\n.mk-doc__embedBlock {\\r\\n  position: relative;\\r\\n  z-index: 1;\\r\\n  padding: 1px;\\r\\n  cursor: pointer;\\r\\n}\\r\\n.mk-doc__embedBlockFocus {\\r\\n  outline: 2px solid rgb(60, 132, 244);\\r\\n}\\r\\n\\r\\n.mk-doc__embedBlock >*{\\r\\n  pointer-events: none;\\r\\n}\\r\\n\\r\\n.mk-doc-active-element-block-mark{\\r\\n  position: absolute;\\r\\n  box-sizing:border-box;\\r\\n  background-color:#2776f63b;\\r\\n  z-index: 99;\\r\\n  pointer-events: none;\\r\\n}\\r\\n.mk-doc-active-element-block-mark.box{\\r\\n  outline: 2px solid #2776f63b;\\r\\n  background-color: transparent;\\r\\n}\\r\\n\""],"names":[],"mappings":"AAAA,MAAe,mBAAA;"}

package/dist/esm/components/basic/dynamic-form-panel/DynamicFormPanel.js

@@ -1,5 +1,6 @@
 import { defineComponent, ref, resolveComponent, h } from "vue";
 import { ElFormItem, ElForm } from "element-plus";
+import { ImageUploadContext } from "../../../modules/ms/image-upload-context/index.js";
 const DynamicFormPanel = /* @__PURE__ */ defineComponent({
   name: "DynamicFormPanel",
   props: {
@@ -13,33 +14,54 @@ const DynamicFormPanel = /* @__PURE__ */ defineComponent({
   setup: (props, {
     emit
   }) => {
-    var _a;
     const dataRef = ref(props.data);
-    const formItems = (_a = props.options) == null ? void 0 : _a.map((item) => {
-      const component = typeof item.component == "string" ? resolveComponent(item.component) : item.component;
-      return h(ElFormItem, {
-        label: item.title,
-        prop: item.name
-      }, {
-        default: () => {
-          return [h(component, {
-            ...item.props,
-            "modelValue": dataRef.value[item.name],
-            "onUpdate:modelValue": (v) => {
-              dataRef.value[item.name] = v;
-            }
-          })];
+    return () => {
+      var _a;
+      const formItems = (_a = props.options) == null ? void 0 : _a.filter((item) => {
+        if (item.condition) {
+          return item.condition(dataRef.value);
         }
+        return true;
+      }).map((item) => {
+        const resloveComponent = typeof item.component == "string" ? resolveComponent(item.component) : item.component;
+        let defaultSlot = () => [];
+        if (item.component == "el-radio-group") {
+          defaultSlot = () => item.props.data.map((dt) => {
+            return h(resolveComponent("el-radio-button"), {
+              label: dt.label,
+              value: dt.value
+            });
+          });
+        } else if (item.component == "MKUploadImage") {
+          if (item.props.cutSize) {
+            item.props.uploadContext = new ImageUploadContext(item.props.cutSize);
+          }
+        }
+        return h(ElFormItem, {
+          label: item.title,
+          prop: item.name
+        }, {
+          default: () => {
+            return [h(resloveComponent, {
+              ...item.props,
+              "modelValue": dataRef.value[item.name],
+              "onUpdate:modelValue": (v) => {
+                dataRef.value[item.name] = v;
+              }
+            }, {
+              default: defaultSlot
+            })];
+          }
+        });
       });
-    });
-    return () => {
       return h(ElForm, {
         labelPosition: "top",
         model: props.data,
         labelWidth: "auto",
         style: {
           height: "600px",
-          overflow: "auto"
+          overflow: "auto",
+          padding: "10px"
         }
       }, {
         default: () => {

package/dist/esm/components/basic/dynamic-form-panel/DynamicFormPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicFormPanel.js","sources":["../../../../../src/components/basic/dynamic-form-panel/DynamicFormPanel.tsx"],"sourcesContent":["import { defineComponent,resolveComponent,h,ref } from \"vue\"\r\nimport {  ElButton,ElForm,ElFormItem,ElCollapse,ElCollapseItem,ElInput } from \"element-plus\";\r\nimport { type DynamicFormItemType } from \"./type\"\r\n\r\nexport default defineComponent({\r\n  name:\"DynamicFormPanel\",\r\n  props:{\r\n    data:{ type:Object },\r\n    options:{ type:Array<DynamicFormItemType> }\r\n  },\r\n  setup:(props,{ emit })=>{\r\n\r\n    // 编辑\r\n    const dataRef = ref<any>(props.data);\r\n\r\n    // 生成的表单项\r\n    const formItems = props.options?.map(item=>{\r\n\r\n      const component = typeof item.component == \"string\" ? resolveComponent(item.component) : item.component;\r\n\r\n      return h(ElFormItem,{ \r\n        label:item.title,prop:item.name,\r\n      },{\r\n        default:()=>{\r\n          return [\r\n            h(component,{ \r\n              ...item.props,\r\n              \"modelValue\" : dataRef.value[item.name],\r\n              \"onUpdate:modelValue\" : (v:any) => {\r\n                dataRef.value[item.name] = v;\r\n              }\r\n            })\r\n          ]\r\n        }\r\n      })\r\n    });\r\n\r\n    return ()=>{\r\n      return h(ElForm,{ \r\n        labelPosition:\"top\",model:props.data,labelWidth:\"auto\",\r\n        style:{ height:\"600px\",overflow:\"auto\" }\r\n      },{\r\n        default:()=>{\r\n          return formItems\r\n        }\r\n      })\r\n    }\r\n  }\r\n});\r\n"],"names":["defineComponent","name","props","data","type","Object","options","Array","setup","emit","dataRef","ref","formItems","map","item","component","resolveComponent","h","ElFormItem","label","title","prop","default","value","v","ElForm","labelPosition","model","labelWidth","style","height","overflow"],"mappings":";;AAIA,MAAeA,mDAAgB;AAAA,EAC7BC,MAAK;AAAA,EACLC,OAAM;AAAA,IACJC,MAAK;AAAA,MAAEC,MAAKC;AAAAA,IAAQ;AAAA,IACpBC,SAAQ;AAAA,MAAEF,MAAKG;AAAAA,IAA2B;AAAA,EAC3C;AAAA,EACDC,OAAMA,CAACN,OAAM;AAAA,IAAEO;AAAAA,EAAK,MAAI;;AAGtB,UAAMC,UAAUC,IAAST,MAAMC,IAAI;AAGnC,UAAMS,aAAYV,WAAMI,YAANJ,mBAAeW,IAAIC,UAAM;AAEzC,YAAMC,YAAY,OAAOD,KAAKC,aAAa,WAAWC,iBAAiBF,KAAKC,SAAS,IAAID,KAAKC;AAE9F,aAAOE,EAAEC,YAAW;AAAA,QAClBC,OAAML,KAAKM;AAAAA,QAAMC,MAAKP,KAAKb;AAAAA,MAC7B,GAAE;AAAA,QACAqB,SAAQA,MAAI;AACV,iBAAO,CACLL,EAAEF,WAAU;AAAA,YACV,GAAGD,KAAKZ;AAAAA,YACR,cAAeQ,QAAQa,MAAMT,KAAKb,IAAI;AAAA,YACtC,uBAAyBuB,OAAU;AACjCd,sBAAQa,MAAMT,KAAKb,IAAI,IAAIuB;AAAAA,YAC7B;AAAA,UACD,CAAA,CAAC;AAAA,QAEN;AAAA,MACF,CAAC;AAAA,IACH;AAEA,WAAO,MAAI;AACT,aAAOP,EAAEQ,QAAO;AAAA,QACdC,eAAc;AAAA,QAAMC,OAAMzB,MAAMC;AAAAA,QAAKyB,YAAW;AAAA,QAChDC,OAAM;AAAA,UAAEC,QAAO;AAAA,UAAQC,UAAS;AAAA,QAAO;AAAA,MACzC,GAAE;AAAA,QACAT,SAAQA,MAAI;AACV,iBAAOV;AAAAA,QACT;AAAA,MACF,CAAC;AAAA;EAEL;AACF,CAAC;"}
+{"version":3,"file":"DynamicFormPanel.js","sources":["../../../../../src/components/basic/dynamic-form-panel/DynamicFormPanel.tsx"],"sourcesContent":["import { defineComponent,resolveComponent,h,ref } from \"vue\"\r\nimport {  ElButton,ElForm,ElFormItem,ElCollapse,ElCollapseItem,ElInput } from \"element-plus\";\r\nimport { type DynamicFormItemType } from \"./type\"\r\nimport { ImageUploadContext } from \"../../../modules/ms/image-upload-context\";\r\n\r\nexport default defineComponent({\r\n  name:\"DynamicFormPanel\",\r\n  props:{\r\n    data:{ type:Object },\r\n    options:{ type:Array<DynamicFormItemType> }\r\n  },\r\n  setup:(props,{ emit })=>{\r\n\r\n    // 编辑\r\n    const dataRef = ref<any>(props.data);\r\n\r\n\r\n    return ()=>{\r\n\r\n      // 生成的表单项\r\n      const formItems = props.options?.filter(item=>{\r\n        if(item.condition){\r\n            return item.condition(dataRef.value);\r\n        }\r\n        return true;\r\n      }).map(item=>{\r\n\r\n        const resloveComponent = typeof item.component == \"string\" ? resolveComponent(item.component) : item.component;\r\n        let defaultSlot:any = ()=>[];\r\n\r\n        // 特殊处理的组件\r\n        if(item.component == \"el-radio-group\"){\r\n          defaultSlot = ()=>item.props.data.map((dt:any)=>{\r\n            return h(resolveComponent(\"el-radio-button\"),{ label:dt.label, value:dt.value })\r\n          })\r\n        }\r\n        else if(item.component == \"MKUploadImage\"){\r\n          if(item.props.cutSize){\r\n            item.props.uploadContext = new ImageUploadContext(item.props.cutSize)\r\n          }\r\n        }\r\n\r\n        return h(ElFormItem,{ \r\n          label:item.title,prop:item.name,\r\n        },{\r\n          default:()=>{\r\n            return [\r\n              h(resloveComponent,{ \r\n                ...item.props,\r\n                \"modelValue\" : dataRef.value[item.name],\r\n                \"onUpdate:modelValue\" : (v:any) => {\r\n                  dataRef.value[item.name] = v;\r\n                }\r\n              },{  default:defaultSlot })\r\n            ]\r\n          }\r\n        })\r\n      });\r\n\r\n      return h(ElForm,{ \r\n        labelPosition:\"top\",model:props.data,labelWidth:\"auto\",\r\n        style:{ height:\"600px\",overflow:\"auto\",padding:\"10px\" }\r\n      },{\r\n        default:()=>{\r\n          return formItems\r\n        }\r\n      })\r\n    }\r\n  }\r\n});\r\n"],"names":["defineComponent","name","props","data","type","Object","options","Array","setup","emit","dataRef","ref","formItems","filter","item","condition","value","map","resloveComponent","component","resolveComponent","defaultSlot","dt","h","label","cutSize","uploadContext","ImageUploadContext","ElFormItem","title","prop","default","v","ElForm","labelPosition","model","labelWidth","style","height","overflow","padding"],"mappings":";;;AAKA,MAAeA,mDAAgB;AAAA,EAC7BC,MAAK;AAAA,EACLC,OAAM;AAAA,IACJC,MAAK;AAAA,MAAEC,MAAKC;AAAAA,IAAQ;AAAA,IACpBC,SAAQ;AAAA,MAAEF,MAAKG;AAAAA,IAA2B;AAAA,EAC3C;AAAA,EACDC,OAAMA,CAACN,OAAM;AAAA,IAAEO;AAAAA,EAAK,MAAI;AAGtB,UAAMC,UAAUC,IAAST,MAAMC,IAAI;AAGnC,WAAO,MAAI;;AAGT,YAAMS,aAAYV,WAAMI,YAANJ,mBAAeW,OAAOC,UAAM;AAC5C,YAAGA,KAAKC,WAAU;AACd,iBAAOD,KAAKC,UAAUL,QAAQM,KAAK;AAAA,QACvC;AACA,eAAO;AAAA,MACT,GAAGC,IAAIH,UAAM;AAEX,cAAMI,mBAAmB,OAAOJ,KAAKK,aAAa,WAAWC,iBAAiBN,KAAKK,SAAS,IAAIL,KAAKK;AACrG,YAAIE,cAAkBA,MAAI;AAG1B,YAAGP,KAAKK,aAAa,kBAAiB;AACpCE,wBAAcA,MAAIP,KAAKZ,MAAMC,KAAKc,IAAKK,QAAS;AAC9C,mBAAOC,EAAEH,iBAAiB,iBAAiB,GAAE;AAAA,cAAEI,OAAMF,GAAGE;AAAAA,cAAOR,OAAMM,GAAGN;AAAAA,YAAM,CAAC;AAAA,UACjF,CAAC;AAAA,QACH,WACQF,KAAKK,aAAa,iBAAgB;AACxC,cAAGL,KAAKZ,MAAMuB,SAAQ;AACpBX,iBAAKZ,MAAMwB,gBAAgB,IAAIC,mBAAmBb,KAAKZ,MAAMuB,OAAO;AAAA,UACtE;AAAA,QACF;AAEA,eAAOF,EAAEK,YAAW;AAAA,UAClBJ,OAAMV,KAAKe;AAAAA,UAAMC,MAAKhB,KAAKb;AAAAA,QAC7B,GAAE;AAAA,UACA8B,SAAQA,MAAI;AACV,mBAAO,CACLR,EAAEL,kBAAiB;AAAA,cACjB,GAAGJ,KAAKZ;AAAAA,cACR,cAAeQ,QAAQM,MAAMF,KAAKb,IAAI;AAAA,cACtC,uBAAyB+B,OAAU;AACjCtB,wBAAQM,MAAMF,KAAKb,IAAI,IAAI+B;AAAAA,cAC7B;AAAA,YACF,GAAE;AAAA,cAAGD,SAAQV;AAAAA,YAAa,CAAA,CAAC;AAAA,UAE/B;AAAA,QACF,CAAC;AAAA,MACH;AAEA,aAAOE,EAAEU,QAAO;AAAA,QACdC,eAAc;AAAA,QAAMC,OAAMjC,MAAMC;AAAAA,QAAKiC,YAAW;AAAA,QAChDC,OAAM;AAAA,UAAEC,QAAO;AAAA,UAAQC,UAAS;AAAA,UAAOC,SAAQ;AAAA,QAAO;AAAA,MACxD,GAAE;AAAA,QACAT,SAAQA,MAAI;AACV,iBAAOnB;AAAAA,QACT;AAAA,MACF,CAAC;AAAA;EAEL;AACF,CAAC;"}

package/dist/esm/components/basic/dynamic-form-panel/dialog.js

@@ -19,8 +19,8 @@ const showDynamicFormDialoger = async (title, options, data) => {
     };
     const dialogInstance = Dialoger.customRender({
       title: isAdd ? `添加${title}` : `编辑${title}`,
-      class: "mk-html-editor-dialog",
-      width: "500px",
+      class: "mk-dynamic-form-editor-dialog",
+      width: "700px",
       onClose: () => {
         dialogInstance.destroy();
       },

package/dist/esm/components/basic/dynamic-form-panel/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","sources":["../../../../../src/components/basic/dynamic-form-panel/dialog.ts"],"sourcesContent":["\r\nimport { h ,type Component,Fragment,reactive } from 'vue'\r\nimport { Dialoger } from '@maketribe/dm'\r\nimport {  ElButton,ElForm,ElFormItem,ElCollapse,ElCollapseItem,ElInput } from \"element-plus\";\r\nimport DynamicFormPanel from \"./DynamicFormPanel\"\r\nimport { type DynamicFormItemType } from \"./type\"\r\nimport { createDefaultFormData } from \"./utils\"\r\n\r\n/**\r\n * 显示动态表单弹窗\r\n * @param title 标题\r\n * @param options 表单配置\r\n * @param data 表单数据\r\n * @returns \r\n */\r\nexport const showDynamicFormDialoger = async  (title:string,options:DynamicFormItemType[],data:any) => {\r\n  return new Promise(resolve => {\r\n\r\n    // 是否是新增\r\n    const isAdd = data == null;\r\n\r\n    // 新增的话\r\n    if(isAdd){ \r\n      data = createDefaultFormData(options);  \r\n    }\r\n\r\n    // 响应数据\r\n    const reactiveData = reactive(data)\r\n\r\n    // 取消编辑\r\n    const handleCancelClick = () => {\r\n      dialogInstance.destroy();\r\n    };\r\n\r\n    // 确认编辑\r\n    const handleConfirmClick = () => {\r\n      dialogInstance.destroy();\r\n      resolve(data);\r\n    };\r\n\r\n    const dialogInstance = Dialoger.customRender({\r\n      title: isAdd ? `添加${title}` : `编辑${title}`,\r\n      class: \"mk-html-editor-dialog\",\r\n      width: \"500px\",\r\n      onClose: () => {\r\n        dialogInstance.destroy();\r\n      },\r\n      body: () => {\r\n        return h(DynamicFormPanel,{ data,options })\r\n      },\r\n      footer: () => {\r\n        return h(Fragment,{},[\r\n          h(ElButton,{ onClick:()=>handleCancelClick() },{ default:()=>\"取消\" }),\r\n          h(ElButton,{ type:\"primary\" , onClick:()=>handleConfirmClick() },{ default:()=>\"确定\" })\r\n        ]) \r\n      },\r\n    });\r\n  });\r\n}\r\n\r\n\r\n\r\n"],"names":[],"mappings":";;;;;AAeO,MAAM,0BAA0B,OAAQ,OAAa,SAA8B,SAAa;AAC9F,SAAA,IAAI,QAAQ,CAAW,YAAA;AAG5B,UAAM,QAAQ,QAAQ;AAGtB,QAAG,OAAM;AACP,aAAO,sBAAsB,OAAO;AAAA,IACtC;AAGqB,aAAS,IAAI;AAGlC,UAAM,oBAAoB,MAAM;AAC9B,qBAAe,QAAQ;AAAA,IAAA;AAIzB,UAAM,qBAAqB,MAAM;AAC/B,qBAAe,QAAQ;AACvB,cAAQ,IAAI;AAAA,IAAA;AAGR,UAAA,iBAAiB,SAAS,aAAa;AAAA,MAC3C,OAAO,QAAQ,KAAK,KAAK,KAAK,KAAK,KAAK;AAAA,MACxC,OAAO;AAAA,MACP,OAAO;AAAA,MACP,SAAS,MAAM;AACb,uBAAe,QAAQ;AAAA,MACzB;AAAA,MACA,MAAM,MAAM;AACV,eAAO,EAAE,kBAAiB,EAAE,MAAK,QAAS,CAAA;AAAA,MAC5C;AAAA,MACA,QAAQ,MAAM;AACL,eAAA,EAAE,UAAS,IAAG;AAAA,UACnB,EAAE,UAAS,EAAE,SAAQ,MAAI,kBAAoB,EAAA,GAAE,EAAE,SAAQ,MAAI,MAAM;AAAA,UACnE,EAAE,UAAS,EAAE,MAAK,WAAY,SAAQ,MAAI,mBAAmB,KAAI,EAAE,SAAQ,MAAI,MAAM;AAAA,QAAA,CACtF;AAAA,MACH;AAAA,IAAA,CACD;AAAA,EAAA,CACF;AACH;"}
+{"version":3,"file":"dialog.js","sources":["../../../../../src/components/basic/dynamic-form-panel/dialog.ts"],"sourcesContent":["\r\nimport { h ,type Component,Fragment,reactive } from 'vue'\r\nimport { Dialoger } from '@maketribe/dm'\r\nimport {  ElButton,ElForm,ElFormItem,ElCollapse,ElCollapseItem,ElInput } from \"element-plus\";\r\nimport DynamicFormPanel from \"./DynamicFormPanel\"\r\nimport { type DynamicFormItemType } from \"./type\"\r\nimport { createDefaultFormData } from \"./utils\"\r\n\r\n/**\r\n * 显示动态表单弹窗\r\n * @param title 标题\r\n * @param options 表单配置\r\n * @param data 表单数据\r\n * @returns \r\n */\r\nexport const showDynamicFormDialoger = async  (title:string,options:DynamicFormItemType[],data:any) => {\r\n  return new Promise(resolve => {\r\n\r\n    // 是否是新增\r\n    const isAdd = data == null;\r\n\r\n    // 新增的话\r\n    if(isAdd){ \r\n      data = createDefaultFormData(options);  \r\n    }\r\n\r\n    // 响应数据\r\n    const reactiveData = reactive(data)\r\n\r\n    // 取消编辑\r\n    const handleCancelClick = () => {\r\n      dialogInstance.destroy();\r\n    };\r\n\r\n    // 确认编辑\r\n    const handleConfirmClick = () => {\r\n      dialogInstance.destroy();\r\n      resolve(data);\r\n    };\r\n\r\n    const dialogInstance = Dialoger.customRender({\r\n      title: isAdd ? `添加${title}` : `编辑${title}`,\r\n      class: \"mk-dynamic-form-editor-dialog\",\r\n      width: \"700px\",\r\n      onClose: () => {\r\n        dialogInstance.destroy();\r\n      },\r\n      body: () => {\r\n        return h(DynamicFormPanel,{ data,options })\r\n      },\r\n      footer: () => {\r\n        return h(Fragment,{},[\r\n          h(ElButton,{ onClick:()=>handleCancelClick() },{ default:()=>\"取消\" }),\r\n          h(ElButton,{ type:\"primary\" , onClick:()=>handleConfirmClick() },{ default:()=>\"确定\" })\r\n        ]) \r\n      },\r\n    });\r\n  });\r\n}\r\n\r\n\r\n\r\n"],"names":[],"mappings":";;;;;AAeO,MAAM,0BAA0B,OAAQ,OAAa,SAA8B,SAAa;AAC9F,SAAA,IAAI,QAAQ,CAAW,YAAA;AAG5B,UAAM,QAAQ,QAAQ;AAGtB,QAAG,OAAM;AACP,aAAO,sBAAsB,OAAO;AAAA,IACtC;AAGqB,aAAS,IAAI;AAGlC,UAAM,oBAAoB,MAAM;AAC9B,qBAAe,QAAQ;AAAA,IAAA;AAIzB,UAAM,qBAAqB,MAAM;AAC/B,qBAAe,QAAQ;AACvB,cAAQ,IAAI;AAAA,IAAA;AAGR,UAAA,iBAAiB,SAAS,aAAa;AAAA,MAC3C,OAAO,QAAQ,KAAK,KAAK,KAAK,KAAK,KAAK;AAAA,MACxC,OAAO;AAAA,MACP,OAAO;AAAA,MACP,SAAS,MAAM;AACb,uBAAe,QAAQ;AAAA,MACzB;AAAA,MACA,MAAM,MAAM;AACV,eAAO,EAAE,kBAAiB,EAAE,MAAK,QAAS,CAAA;AAAA,MAC5C;AAAA,MACA,QAAQ,MAAM;AACL,eAAA,EAAE,UAAS,IAAG;AAAA,UACnB,EAAE,UAAS,EAAE,SAAQ,MAAI,kBAAoB,EAAA,GAAE,EAAE,SAAQ,MAAI,MAAM;AAAA,UACnE,EAAE,UAAS,EAAE,MAAK,WAAY,SAAQ,MAAI,mBAAmB,KAAI,EAAE,SAAQ,MAAI,MAAM;AAAA,QAAA,CACtF;AAAA,MACH;AAAA,IAAA,CACD;AAAA,EAAA,CACF;AACH;"}

package/dist/esm/components/basic/image-cropper/image-cropper-api.js.map

@@ -1 +1 @@
-{"version":3,"file":"image-cropper-api.js","sources":["../../../../../src/components/basic/image-cropper/image-cropper-api.tsx"],"sourcesContent":["import { Dialoger } from \"@maketribe/dm\";\r\nimport ImageCropperContent, {\r\n  ImageCropperRatioOption,\r\n} from \"./image-cropper-content\";\r\nimport { Fragment } from \"vue/jsx-runtime\";\r\nimport { ElButton } from \"element-plus\";\r\nimport { ref, Ref, unref } from \"vue\";\r\n\r\nexport type MKImageCropperOptions = {\r\n  src: string;\r\n  ratioOptions?: Array<ImageCropperRatioOption>;\r\n  fixedBox?: boolean;\r\n  maxWidth?:number;\r\n  maxHeight?:number;\r\n};\r\nexport type MKImageCropperResult = {\r\n  isConfirm: boolean;\r\n  data: string;\r\n  size: { width: number; height: number };\r\n};\r\n\r\nexport async function ImageCropper(\r\n  options: MKImageCropperOptions\r\n): Promise<MKImageCropperResult> {\r\n  const ratioOptions = options.ratioOptions ?? [];\r\n  const fixedBox = options.fixedBox ?? false;\r\n\r\n  return new Promise((resolve) => {\r\n    const imageCropperContentEl: Ref<typeof ImageCropperContent | null> =\r\n      ref(null);\r\n\r\n    const handleCancelClick = () => {\r\n      dialogInstance.destroy();\r\n\r\n      resolve({\r\n        isConfirm: false,\r\n        data: \"\",\r\n        size: { width: 0, height: 0 },\r\n      });\r\n    };\r\n\r\n    const handleConfirmClick = async () => {\r\n      dialogInstance.destroy();\r\n\r\n      const cropperRef = unref(imageCropperContentEl)!.cropperRef;\r\n\r\n      resolve({\r\n        isConfirm: true,\r\n        data: await new Promise(cropperRef.getCropData.bind(cropperRef)),\r\n        size: { width: cropperRef.cropW, height: cropperRef.cropH },\r\n      });\r\n    };\r\n\r\n    const dialogInstance = Dialoger.customRender({\r\n      title: \"图片裁切\",\r\n      onClose: handleCancelClick,\r\n      body: () => {\r\n        return (\r\n          <ImageCropperContent\r\n            ref={((el: any) => (imageCropperContentEl.value = el)) as any}\r\n            src={options.src}\r\n            fixedBox={fixedBox}\r\n            ratioOptions={ratioOptions}\r\n            maxHeight={options.maxHeight}\r\n            maxWidth={options.maxWidth}\r\n          />\r\n        );\r\n      },\r\n      footer: () => {\r\n        return (\r\n          <Fragment>\r\n            <ElButton onClick={handleCancelClick}>取消</ElButton>\r\n            <ElButton type=\"primary\" onClick={handleConfirmClick}>\r\n              确认\r\n            </ElButton>\r\n          </Fragment>\r\n        );\r\n      },\r\n    });\r\n  });\r\n}\r\n"],"names":["ImageCropper","options","ratioOptions","fixedBox","Promise","resolve","imageCropperContentEl","ref","handleCancelClick","dialogInstance","destroy","isConfirm","data","size","width","height","handleConfirmClick","cropperRef","unref","getCropData","bind","cropW","cropH","Dialoger","customRender","title","onClose","body","_createVNode","ImageCropperContent","el","value","src","maxHeight","maxWidth","footer","_Fragment","ElButton","default","_createTextVNode"],"mappings":";;;;;AAqBO,eAAeA,aACpBC,SAC+B;AAC/B,QAAMC,eAAeD,QAAQC,gBAAgB;AAC7C,QAAMC,WAAWF,QAAQE,YAAY;AAErC,SAAO,IAAIC,QAASC,aAAY;AAC9B,UAAMC,wBACJC,IAAI,IAAI;AAEV,UAAMC,oBAAoBA,MAAM;AAC9BC,qBAAeC,QAAO;AAEtBL,cAAQ;AAAA,QACNM,WAAW;AAAA,QACXC,MAAM;AAAA,QACNC,MAAM;AAAA,UAAEC,OAAO;AAAA,UAAGC,QAAQ;AAAA,QAAE;AAAA,MAC9B,CAAC;AAAA;AAGH,UAAMC,qBAAqB,YAAY;AACrCP,qBAAeC,QAAO;AAEtB,YAAMO,aAAaC,MAAMZ,qBAAqB,EAAGW;AAEjDZ,cAAQ;AAAA,QACNM,WAAW;AAAA,QACXC,MAAM,MAAM,IAAIR,QAAQa,WAAWE,YAAYC,KAAKH,UAAU,CAAC;AAAA,QAC/DJ,MAAM;AAAA,UAAEC,OAAOG,WAAWI;AAAAA,UAAON,QAAQE,WAAWK;AAAAA,QAAM;AAAA,MAC5D,CAAC;AAAA;AAGH,UAAMb,iBAAiBc,SAASC,aAAa;AAAA,MAC3CC,OAAO;AAAA,MACPC,SAASlB;AAAAA,MACTmB,MAAMA,MAAM;AACV,eAAAC,YAAAC,qBAAA;AAAA,UAAA,OAEWC,QAAaxB,sBAAsByB,QAAQD;AAAAA,UAAG,OAChD7B,QAAQ+B;AAAAA,UAAG,YACN7B;AAAAA,UAAQ,gBACJD;AAAAA,UAAY,aACfD,QAAQgC;AAAAA,UAAS,YAClBhC,QAAQiC;AAAAA,QAAQ,GAAA,IAAA;AAAA,MAG/B;AAAA,MACDC,QAAQA,MAAM;AACZ,eAAAP,YAAAQ,UAAAR,MAAAA,CAAAA,YAAAS,UAAA;AAAA,UAAA,WAEuB7B;AAAAA,QAAiB,GAAA;AAAA,UAAA8B,SAAAA,MAAA,CAAAC,gBAAA,IAAA,CAAA;AAAA,SAAAX,GAAAA,YAAAS,UAAA;AAAA,UAAA,QAAA;AAAA,UAAA,WACFrB;AAAAA,QAAkB,GAAA;AAAA,UAAAsB,SAAAA,MAAA,CAAAC,gBAAA,IAAA,CAAA;AAAA,QAAA,CAAA,CAAA,CAAA;AAAA,MAK1D;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACH;"}
+{"version":3,"file":"image-cropper-api.js","sources":["../../../../../src/components/basic/image-cropper/image-cropper-api.tsx"],"sourcesContent":["import { Dialoger } from \"@maketribe/dm\";\r\nimport ImageCropperContent, {\r\n  ImageCropperRatioOption,\r\n} from \"./image-cropper-content\";\r\nimport { Fragment } from \"vue/jsx-runtime\";\r\nimport { ElButton } from \"element-plus\";\r\nimport { ref, Ref, unref } from \"vue\";\r\n\r\nexport type MKImageCropperOptions = {\r\n  src: string;\r\n  ratioOptions?: Array<ImageCropperRatioOption>;\r\n  fixedBox?: boolean;\r\n  maxWidth?:number;\r\n  maxHeight?:number;\r\n};\r\nexport type MKImageCropperResult = {\r\n  isConfirm: boolean;\r\n  data: string;\r\n  size: { width: number; height: number };\r\n};\r\n\r\nexport async function ImageCropper(\r\n  options: MKImageCropperOptions\r\n): Promise<MKImageCropperResult> {\r\n  const ratioOptions = options.ratioOptions ?? [];\r\n  const fixedBox = options.fixedBox ?? false;\r\n\r\n  return new Promise((resolve) => {\r\n    const imageCropperContentEl: Ref<typeof ImageCropperContent | null> =\r\n      ref(null);\r\n\r\n    const handleCancelClick = () => {\r\n      dialogInstance.destroy();\r\n\r\n      resolve({\r\n        isConfirm: false,\r\n        data: \"\",\r\n        size: { width: 0, height: 0 },\r\n      });\r\n    };\r\n\r\n    const handleConfirmClick = async () => {\r\n      dialogInstance.destroy();\r\n\r\n      const cropperRef = unref(imageCropperContentEl)!.cropperRef;\r\n      \r\n      resolve({\r\n        isConfirm: true,\r\n        data: await new Promise(cropperRef.getCropData.bind(cropperRef)),\r\n        size: { width: cropperRef.cropW, height: cropperRef.cropH },\r\n      });\r\n    };\r\n\r\n    const dialogInstance = Dialoger.customRender({\r\n      title: \"图片裁切\",\r\n      onClose: handleCancelClick,\r\n      body: () => {\r\n        return (\r\n          <ImageCropperContent\r\n            ref={((el: any) => (imageCropperContentEl.value = el)) as any}\r\n            src={options.src}\r\n            fixedBox={fixedBox}\r\n            ratioOptions={ratioOptions}\r\n            maxHeight={options.maxHeight}\r\n            maxWidth={options.maxWidth}\r\n          />\r\n        );\r\n      },\r\n      footer: () => {\r\n        return (\r\n          <Fragment>\r\n            <ElButton onClick={handleCancelClick}>取消</ElButton>\r\n            <ElButton type=\"primary\" onClick={handleConfirmClick}>\r\n              确认\r\n            </ElButton>\r\n          </Fragment>\r\n        );\r\n      },\r\n    });\r\n  });\r\n}\r\n"],"names":["ImageCropper","options","ratioOptions","fixedBox","Promise","resolve","imageCropperContentEl","ref","handleCancelClick","dialogInstance","destroy","isConfirm","data","size","width","height","handleConfirmClick","cropperRef","unref","getCropData","bind","cropW","cropH","Dialoger","customRender","title","onClose","body","_createVNode","ImageCropperContent","el","value","src","maxHeight","maxWidth","footer","_Fragment","ElButton","default","_createTextVNode"],"mappings":";;;;;AAqBO,eAAeA,aACpBC,SAC+B;AAC/B,QAAMC,eAAeD,QAAQC,gBAAgB;AAC7C,QAAMC,WAAWF,QAAQE,YAAY;AAErC,SAAO,IAAIC,QAASC,aAAY;AAC9B,UAAMC,wBACJC,IAAI,IAAI;AAEV,UAAMC,oBAAoBA,MAAM;AAC9BC,qBAAeC,QAAO;AAEtBL,cAAQ;AAAA,QACNM,WAAW;AAAA,QACXC,MAAM;AAAA,QACNC,MAAM;AAAA,UAAEC,OAAO;AAAA,UAAGC,QAAQ;AAAA,QAAE;AAAA,MAC9B,CAAC;AAAA;AAGH,UAAMC,qBAAqB,YAAY;AACrCP,qBAAeC,QAAO;AAEtB,YAAMO,aAAaC,MAAMZ,qBAAqB,EAAGW;AAEjDZ,cAAQ;AAAA,QACNM,WAAW;AAAA,QACXC,MAAM,MAAM,IAAIR,QAAQa,WAAWE,YAAYC,KAAKH,UAAU,CAAC;AAAA,QAC/DJ,MAAM;AAAA,UAAEC,OAAOG,WAAWI;AAAAA,UAAON,QAAQE,WAAWK;AAAAA,QAAM;AAAA,MAC5D,CAAC;AAAA;AAGH,UAAMb,iBAAiBc,SAASC,aAAa;AAAA,MAC3CC,OAAO;AAAA,MACPC,SAASlB;AAAAA,MACTmB,MAAMA,MAAM;AACV,eAAAC,YAAAC,qBAAA;AAAA,UAAA,OAEWC,QAAaxB,sBAAsByB,QAAQD;AAAAA,UAAG,OAChD7B,QAAQ+B;AAAAA,UAAG,YACN7B;AAAAA,UAAQ,gBACJD;AAAAA,UAAY,aACfD,QAAQgC;AAAAA,UAAS,YAClBhC,QAAQiC;AAAAA,QAAQ,GAAA,IAAA;AAAA,MAG/B;AAAA,MACDC,QAAQA,MAAM;AACZ,eAAAP,YAAAQ,UAAAR,MAAAA,CAAAA,YAAAS,UAAA;AAAA,UAAA,WAEuB7B;AAAAA,QAAiB,GAAA;AAAA,UAAA8B,SAAAA,MAAA,CAAAC,gBAAA,IAAA,CAAA;AAAA,SAAAX,GAAAA,YAAAS,UAAA;AAAA,UAAA,QAAA;AAAA,UAAA,WACFrB;AAAAA,QAAkB,GAAA;AAAA,UAAAsB,SAAAA,MAAA,CAAAC,gBAAA,IAAA,CAAA;AAAA,QAAA,CAAA,CAAA,CAAA;AAAA,MAK1D;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACH;"}

package/dist/esm/components/basic/visual-page-editor/content-editable.vue.js

@@ -1,12 +1,12 @@
 import { defineComponent, ref, reactive, onMounted, onBeforeUnmount, resolveComponent, openBlock, createElementBlock, createElementVNode, normalizeStyle, unref, Fragment, renderList, createBlock, createVNode, withCtx, createTextVNode, withModifiers, createCommentVNode } from "vue";
-import { usePageEditor } from "./core/index.js";
-import BlockRender from "./components/BlockRender.js";
-import { ShowComponentSelectPanel, ShowEditPanel } from "./utils/Dialog.js";
+import { useVisualPageEditor } from "./core/index.js";
+import BlockRender from "./core/BlockRender.js";
+import { showModuleSelectPanel, showEditPanel } from "./core/Dialog.js";
 const _hoisted_1 = { class: "mk-visual-page-editor__stage_editable_addblock" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "content-editable",
   setup(__props) {
-    const { PageEditor, ViewDevice } = usePageEditor();
+    const { PageEditor, ViewDevice } = useVisualPageEditor();
     const editableRef = ref(null);
     const selectIndex = ref(null);
     const clickHandle = (data) => {
@@ -24,11 +24,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     };
     const addHandle = async (pos, index) => {
-      await ShowComponentSelectPanel();
+      await showModuleSelectPanel();
     };
     const editHandle = async (index) => {
       const item = PageEditor.get(index);
-      await ShowEditPanel(item, {});
+      const module = PageEditor.findModule(item.componentInfo);
+      const result = await showEditPanel(module, { ...item.componentProps });
+      PageEditor.edit(index, result);
     };
     onMounted(() => {
       var _a;
@@ -40,8 +42,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       PageEditor.setContent({
         version: "1.0.0",
         contents: [
-          { componentInfo: "vp-image", componentProps: { src: "https://vgcnminisite.oss-cn-shanghai.aliyuncs.com/uploads/2024/07/03/ffd6b7c7f24f42dab3ae1220e18c3723.jpg", id: 1 } },
-          { componentInfo: "vp-image", componentProps: { src: "https://vgcnminisite.oss-cn-shanghai.aliyuncs.com/uploads/2024/07/03/b9e0baefbd784d70a83e04bea7cd6113.jpg", id: 2 } }
+          { componentInfo: "base-image", componentProps: { src: "https://vgcnminisite.oss-cn-shanghai.aliyuncs.com/uploads/2024/07/03/ffd6b7c7f24f42dab3ae1220e18c3723.jpg", id: 1 } },
+          { componentInfo: "base-image", componentProps: { src: "https://vgcnminisite.oss-cn-shanghai.aliyuncs.com/uploads/2024/07/03/b9e0baefbd784d70a83e04bea7cd6113.jpg", id: 2 } }
         ]
       });
     });
@@ -154,11 +156,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   ]),
                   _: 1
                 }),
-                createVNode(_component_el_button, { text: "" }, {
+                createVNode(_component_el_button, {
+                  text: "",
+                  onClick: _cache[5] || (_cache[5] = ($event) => editHandle(selectIndex.value))
+                }, {
                   default: withCtx(() => [
                     createVNode(_component_MKSvgIcon, {
                       iconClass: "Edit",
-                      onClick: _cache[5] || (_cache[5] = ($event) => editHandle(selectIndex.value)),
                       style: { "margin-right": "10px" }
                     }),
                     createTextVNode(" 编辑 ")

package/dist/esm/components/basic/visual-page-editor/content-editable.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"content-editable.vue.js","sources":["../../../../../src/components/basic/visual-page-editor/content-editable.vue"],"sourcesContent":["<template>\r\n  <div class=\"mk-visual-page-editor__stage_body\" @click=\"clickStageHandle\">\r\n    <div class=\"mk-visual-page-editor__stage_editable\" :style=\"{width:(ViewDevice=='pc'?'900px':'640px')}\" ref=\"editableRef\">\r\n      <BlockRender v-for=\"(item,index) in PageEditor.getContent().contents\" :key=\"index\" :index=\"index\" :node=\"item\" :active=\"selectIndex==index\" @click=\"clickHandle\"></BlockRender>\r\n      <div  class=\"mk-visual-page-editor__stage_editable_addblock\">\r\n        <el-button text type=\"primary\" size=\"large\" @click=\"addHandle()\">\r\n          <MKSvgIcon iconClass=\"Plus\" style=\"margin-right:10px\" /> \r\n          添加\r\n        </el-button>\r\n      </div>\r\n      <div class=\"mk-visual-page-editor-inline-toolbar\" @click..stop :style=\"toolsPos\"  v-if=\"selectIndex!=null\">\r\n        <el-button-group>\r\n          <el-button text v-if=\"selectIndex > 0\" @click=\"PageEditor.exchange(selectIndex,selectIndex-1);selectIndex--\" >\r\n            <MKSvgIcon iconClass=\"CaretTop\"  style=\"margin-right:10px\"/> \r\n            上移\r\n          </el-button>\r\n          <el-button text @click=\"PageEditor.exchange(selectIndex,selectIndex+1);selectIndex++\" v-if=\"selectIndex < PageEditor.size() - 1\">\r\n            <MKSvgIcon iconClass=\"CaretBottom\"  style=\"margin-right:10px\"/> \r\n            下移\r\n          </el-button>\r\n          <el-button text @click=\"addHandle(selectIndex,selectIndex-1)\">\r\n            <MKSvgIcon iconClass=\"Fold\"  style=\"margin-right:10px\" /> \r\n            插入\r\n          </el-button>\r\n          <el-button text @click=\"addHandle(selectIndex,selectIndex+1)\">\r\n            <MKSvgIcon iconClass=\"Plus\"  style=\"margin-right:10px\"/> \r\n            添加\r\n          </el-button>\r\n          <el-button text>\r\n            <MKSvgIcon iconClass=\"Edit\" @click=\"editHandle(selectIndex)\" style=\"margin-right:10px\"/> \r\n            编辑\r\n          </el-button>\r\n          <el-button text type=\"danger\" @click=\"PageEditor.remove(selectIndex);selectIndex=null\">\r\n            <MKSvgIcon iconClass=\"Delete\"  style=\"margin-right:10px\"/> \r\n            删除\r\n          </el-button>\r\n        </el-button-group>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { nextTick,defineProps,defineEmits,computed,ref,onMounted,onBeforeUnmount,reactive,watch } from \"vue\"\r\nimport { usePageEditor,useRenderComponent } from \"./core\"\r\nimport BlockRender from \"./components/BlockRender\"\r\nimport { RenderComponentType } from \"./core/RenderComponent\"\r\nimport { ShowEditPanel,ShowComponentSelectPanel } from \"./utils/Dialog\"\r\n\r\nconst { PageEditor,ViewDevice } = usePageEditor();\r\nconst editableRef = ref<HTMLDivElement|null>(null);\r\nconst selectIndex = ref(null);\r\n\r\n// 点击块\r\nconst clickHandle = (data:any)=>{\r\n  data.event.stopPropagation();\r\n  updateToolsPos();\r\n  selectIndex.value = data.index;\r\n}\r\nconst clickStageHandle = ()=>{\r\n  selectIndex.value = null;\r\n}\r\n// 工具条位置\r\nconst toolsPos = reactive({ top:\"0px\" });\r\n// 更新工具条位置\r\nconst updateToolsPos = ()=>{\r\n  if(editableRef.value != null){\r\n    toolsPos.top = Math.max(editableRef.value.parentElement!.scrollTop + editableRef.value.parentElement!.offsetHeight / 2 - 100,5) + \"px\"\r\n  }\r\n}\r\n\r\n// 编辑\r\nconst addHandle =  async (pos?:any,index?:any) => {\r\n  const result = await ShowComponentSelectPanel();\r\n}\r\n\r\n// 编辑\r\nconst editHandle =  async (index:any) => {\r\n\r\n  const item = PageEditor.get(index)\r\n  \r\n  const result = await ShowEditPanel(item as any,{});\r\n}\r\n\r\nonMounted(()=>{\r\n  editableRef.value?.parentElement!.addEventListener(\"scroll\",updateToolsPos,false);\r\n  onBeforeUnmount(()=>{\r\n    editableRef.value?.parentElement!.removeEventListener(\"scroll\",updateToolsPos);\r\n  });\r\n\r\n  PageEditor.setContent({\r\n    version:\"1.0.0\",\r\n    contents:[\r\n      {componentInfo:\"vp-image\",componentProps:{src:\"https://vgcnminisite.oss-cn-shanghai.aliyuncs.com/uploads/2024/07/03/ffd6b7c7f24f42dab3ae1220e18c3723.jpg\",id:1}},\r\n      {componentInfo:\"vp-image\",componentProps:{src:\"https://vgcnminisite.oss-cn-shanghai.aliyuncs.com/uploads/2024/07/03/b9e0baefbd784d70a83e04bea7cd6113.jpg\",id:2}}\r\n    ]\r\n  })\r\n\r\n});\r\n</script>\r\n"],"names":["_a"],"mappings":";;;;;;;;AAiDA,UAAM,EAAE,YAAW,WAAW,IAAI,cAAc;AAC1C,UAAA,cAAc,IAAyB,IAAI;AAC3C,UAAA,cAAc,IAAI,IAAI;AAGtB,UAAA,cAAc,CAAC,SAAW;AAC9B,WAAK,MAAM;AACI;AACf,kBAAY,QAAQ,KAAK;AAAA,IAAA;AAE3B,UAAM,mBAAmB,MAAI;AAC3B,kBAAY,QAAQ;AAAA,IAAA;AAGtB,UAAM,WAAW,SAAS,EAAE,KAAI,MAAO,CAAA;AAEvC,UAAM,iBAAiB,MAAI;AACtB,UAAA,YAAY,SAAS,MAAK;AAC3B,iBAAS,MAAM,KAAK,IAAI,YAAY,MAAM,cAAe,YAAY,YAAY,MAAM,cAAe,eAAe,IAAI,KAAI,CAAC,IAAI;AAAA,MACpI;AAAA,IAAA;AAII,UAAA,YAAa,OAAO,KAAS,UAAe;AACjC,YAAM,yBAAyB;AAAA,IAAA;AAI1C,UAAA,aAAc,OAAO,UAAc;AAEjC,YAAA,OAAO,WAAW,IAAI,KAAK;AAElB,YAAM,cAAc,MAAY,EAAE;AAAA,IAAA;AAGnD,cAAU,MAAI;;AACZ,wBAAY,UAAZ,mBAAmB,cAAe,iBAAiB,UAAS,gBAAe;AAC3E,sBAAgB,MAAI;;AAClB,SAAAA,MAAA,YAAY,UAAZ,gBAAAA,IAAmB,cAAe,oBAAoB,UAAS;AAAA,MAAc,CAC9E;AAED,iBAAW,WAAW;AAAA,QACpB,SAAQ;AAAA,QACR,UAAS;AAAA,UACP,EAAC,eAAc,YAAW,gBAAe,EAAC,KAAI,6GAA4G,IAAG,IAAE;AAAA,UAC/J,EAAC,eAAc,YAAW,gBAAe,EAAC,KAAI,6GAA4G,IAAG,IAAE;AAAA,QACjK;AAAA,MAAA,CACD;AAAA,IAAA,CAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"content-editable.vue.js","sources":["../../../../../src/components/basic/visual-page-editor/content-editable.vue"],"sourcesContent":["<template>\r\n  <div class=\"mk-visual-page-editor__stage_body\" @click=\"clickStageHandle\">\r\n    <div class=\"mk-visual-page-editor__stage_editable\" :style=\"{ width: (ViewDevice == 'pc' ? '900px' : '640px') }\"\r\n      ref=\"editableRef\">\r\n      <BlockRender v-for=\"(item, index) in PageEditor.getContent().contents\" :key=\"index\" :index=\"index\" :node=\"item\"\r\n        :active=\"selectIndex == index\" @click=\"clickHandle\"></BlockRender>\r\n      <div class=\"mk-visual-page-editor__stage_editable_addblock\">\r\n        <el-button text type=\"primary\" size=\"large\" @click=\"addHandle()\">\r\n          <MKSvgIcon iconClass=\"Plus\" style=\"margin-right:10px\" />\r\n          添加\r\n        </el-button>\r\n      </div>\r\n      <div class=\"mk-visual-page-editor-inline-toolbar\" @click..stop :style=\"toolsPos\" v-if=\"selectIndex != null\">\r\n        <el-button-group>\r\n          <el-button text v-if=\"selectIndex > 0\" @click=\"PageEditor.exchange(selectIndex, selectIndex - 1); selectIndex--\">\r\n            <MKSvgIcon iconClass=\"CaretTop\" style=\"margin-right:10px\" />\r\n            上移\r\n          </el-button>\r\n          <el-button text @click=\"PageEditor.exchange(selectIndex, selectIndex + 1); selectIndex++\"\r\n            v-if=\"selectIndex < PageEditor.size() - 1\">\r\n            <MKSvgIcon iconClass=\"CaretBottom\" style=\"margin-right:10px\" />\r\n            下移\r\n          </el-button>\r\n          <el-button text @click=\"addHandle(selectIndex, selectIndex - 1)\">\r\n            <MKSvgIcon iconClass=\"Fold\" style=\"margin-right:10px\" />\r\n            插入\r\n          </el-button>\r\n          <el-button text @click=\"addHandle(selectIndex, selectIndex + 1)\">\r\n            <MKSvgIcon iconClass=\"Plus\" style=\"margin-right:10px\" />\r\n            添加\r\n          </el-button>\r\n          <el-button text @click=\"editHandle(selectIndex)\">\r\n            <MKSvgIcon iconClass=\"Edit\" style=\"margin-right:10px\" />\r\n            编辑\r\n          </el-button>\r\n          <el-button text type=\"danger\" @click=\"PageEditor.remove(selectIndex); selectIndex = null\">\r\n            <MKSvgIcon iconClass=\"Delete\" style=\"margin-right:10px\" />\r\n            删除\r\n          </el-button>\r\n        </el-button-group>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { nextTick, defineProps, defineEmits, computed, ref, onMounted, onBeforeUnmount, reactive, watch } from \"vue\"\r\nimport { useVisualPageEditor, showEditPanel, showModuleSelectPanel } from \"./core\"\r\nimport BlockRender from \"./core/BlockRender\"\r\nimport { ModuleType } from \"./core/ModuleDefine\";\r\n\r\nconst { PageEditor, ViewDevice } = useVisualPageEditor();\r\nconst editableRef = ref<HTMLDivElement | null>(null);\r\nconst selectIndex = ref(null);\r\n\r\n// 点击块\r\nconst clickHandle = (data: any) => {\r\n  data.event.stopPropagation();\r\n  updateToolsPos();\r\n  selectIndex.value = data.index;\r\n}\r\nconst clickStageHandle = () => {\r\n  selectIndex.value = null;\r\n}\r\n// 工具条位置\r\nconst toolsPos = reactive({ top: \"0px\" });\r\n// 更新工具条位置\r\nconst updateToolsPos = () => {\r\n  if (editableRef.value != null) {\r\n    toolsPos.top = Math.max(editableRef.value.parentElement!.scrollTop + editableRef.value.parentElement!.offsetHeight / 2 - 100, 5) + \"px\"\r\n  }\r\n}\r\n\r\n// 编辑\r\nconst addHandle = async (pos?: any, index?: any) => {\r\n\r\n  const result = await showModuleSelectPanel();\r\n\r\n}\r\n\r\n// 编辑\r\nconst editHandle = async (index: any) => {\r\n\r\n  const item = PageEditor.get(index)\r\n  const module = PageEditor.findModule(item.componentInfo)\r\n  const result = await showEditPanel(module as ModuleType, { ...item.componentProps });\r\n  PageEditor.edit(index, result as any);\r\n}\r\n\r\nonMounted(() => {\r\n  editableRef.value?.parentElement!.addEventListener(\"scroll\", updateToolsPos, false);\r\n  onBeforeUnmount(() => {\r\n    editableRef.value?.parentElement!.removeEventListener(\"scroll\", updateToolsPos);\r\n  });\r\n\r\n  PageEditor.setContent({\r\n    version: \"1.0.0\",\r\n    contents: [\r\n      { componentInfo: \"base-image\", componentProps: { src: \"https://vgcnminisite.oss-cn-shanghai.aliyuncs.com/uploads/2024/07/03/ffd6b7c7f24f42dab3ae1220e18c3723.jpg\", id: 1 } },\r\n      { componentInfo: \"base-image\", componentProps: { src: \"https://vgcnminisite.oss-cn-shanghai.aliyuncs.com/uploads/2024/07/03/b9e0baefbd784d70a83e04bea7cd6113.jpg\", id: 2 } }\r\n    ]\r\n  })\r\n\r\n});\r\n</script>\r\n./core/ModuleDefine./core/BlockRender\r\n./core/Dialog\r\n"],"names":["_a"],"mappings":";;;;;;;;AAmDA,UAAM,EAAE,YAAY,WAAW,IAAI,oBAAoB;AACjD,UAAA,cAAc,IAA2B,IAAI;AAC7C,UAAA,cAAc,IAAI,IAAI;AAGtB,UAAA,cAAc,CAAC,SAAc;AACjC,WAAK,MAAM;AACI;AACf,kBAAY,QAAQ,KAAK;AAAA,IAAA;AAE3B,UAAM,mBAAmB,MAAM;AAC7B,kBAAY,QAAQ;AAAA,IAAA;AAGtB,UAAM,WAAW,SAAS,EAAE,KAAK,MAAO,CAAA;AAExC,UAAM,iBAAiB,MAAM;AACvB,UAAA,YAAY,SAAS,MAAM;AAC7B,iBAAS,MAAM,KAAK,IAAI,YAAY,MAAM,cAAe,YAAY,YAAY,MAAM,cAAe,eAAe,IAAI,KAAK,CAAC,IAAI;AAAA,MACrI;AAAA,IAAA;AAII,UAAA,YAAY,OAAO,KAAW,UAAgB;AAEnC,YAAM,sBAAsB;AAAA,IAAA;AAKvC,UAAA,aAAa,OAAO,UAAe;AAEjC,YAAA,OAAO,WAAW,IAAI,KAAK;AACjC,YAAM,SAAS,WAAW,WAAW,KAAK,aAAa;AACjD,YAAA,SAAS,MAAM,cAAc,QAAsB,EAAE,GAAG,KAAK,gBAAgB;AACxE,iBAAA,KAAK,OAAO,MAAa;AAAA,IAAA;AAGtC,cAAU,MAAM;;AACd,wBAAY,UAAZ,mBAAmB,cAAe,iBAAiB,UAAU,gBAAgB;AAC7E,sBAAgB,MAAM;;AACpB,SAAAA,MAAA,YAAY,UAAZ,gBAAAA,IAAmB,cAAe,oBAAoB,UAAU;AAAA,MAAc,CAC/E;AAED,iBAAW,WAAW;AAAA,QACpB,SAAS;AAAA,QACT,UAAU;AAAA,UACR,EAAE,eAAe,cAAc,gBAAgB,EAAE,KAAK,6GAA6G,IAAI,IAAI;AAAA,UAC3K,EAAE,eAAe,cAAc,gBAAgB,EAAE,KAAK,6GAA6G,IAAI,IAAI;AAAA,QAC7K;AAAA,MAAA,CACD;AAAA,IAAA,CAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/components/basic/visual-page-editor/core/BlockRender.js

@@ -0,0 +1,39 @@
+import { defineComponent, h } from "vue";
+import { useVisualPageEditor } from "./index.js";
+const BlockRender = defineComponent({
+  name: "BlockRender",
+  emits: ["click"],
+  props: {
+    node: { type: Object },
+    parent: { type: Object },
+    index: { type: Number },
+    active: { type: Boolean }
+  },
+  setup: (props, { emit }) => {
+    const { PageEditor } = useVisualPageEditor();
+    return () => {
+      const content = props.node;
+      const module = PageEditor.findModule(content.componentInfo);
+      if (module != null) {
+        const vnode = typeof module.component === "function" ? module.component(content.componentProps) : h(module.component, content.componentProps);
+        return h("div", { class: "mk-visual-page-editor__stage_block" }, [
+          vnode,
+          h("div", {
+            class: { "mk-visual-page-editor__stage_block_mask": true, active: props.active },
+            onClick: (ev) => {
+              emit("click", { node: content, options: module, index: props.index, parent: props.parent, event: ev });
+            }
+          })
+        ]);
+      } else {
+        return h("div", { class: "mk-visual-page-editor__stage_block" }, [
+          `未知的模块【${content.componentInfo}】!请注册！`
+        ]);
+      }
+    };
+  }
+});
+export {
+  BlockRender as default
+};
+//# sourceMappingURL=BlockRender.js.map

package/dist/esm/components/basic/visual-page-editor/core/BlockRender.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockRender.js","sources":["../../../../../../src/components/basic/visual-page-editor/core/BlockRender.ts"],"sourcesContent":["import { defineComponent,defineProps,defineEmits,computed,ref,onMounted,watch,h,type Component } from \"vue\"\r\nimport { ContentBlockType } from \"./ContentConfig\"\r\nimport { useVisualPageEditor } from \".\"\r\n\r\nexport default defineComponent({\r\n  name:\"BlockRender\",\r\n  emits:[\"click\"],\r\n  props:{\r\n    node:{type:Object},\r\n    parent:{type:Object},\r\n    index:{type:Number},\r\n    active:{type:Boolean}\r\n  },\r\n  setup:(props,{ emit })=>{\r\n\r\n    const { PageEditor } = useVisualPageEditor();\r\n\r\n    return ()=>{\r\n\r\n      const content = props.node as ContentBlockType;\r\n      const module = PageEditor.findModule(content.componentInfo);\r\n\r\n      if(module != null){\r\n\r\n        const vnode = typeof module.component === \"function\" ? (module.component as any)(content.componentProps) : h(module.component,content.componentProps);\r\n\r\n        return h(\"div\",{class:\"mk-visual-page-editor__stage_block\"},[\r\n          vnode,\r\n          h(\"div\",{ \r\n            class:{\"mk-visual-page-editor__stage_block_mask\":true,active:props.active},\r\n            onClick:ev=>{\r\n              emit(\"click\",{ node:content,options:module,index:props.index,parent:props.parent,event:ev })\r\n            }\r\n          })\r\n        ])\r\n      }\r\n      else{\r\n        return h(\"div\",{class:\"mk-visual-page-editor__stage_block\"},[\r\n         `未知的模块【${content.componentInfo}】!请注册！`\r\n        ])\r\n      }\r\n\r\n      \r\n    }\r\n  }\r\n});\r\n"],"names":[],"mappings":";;AAIA,MAAA,cAAe,gBAAgB;AAAA,EAC7B,MAAK;AAAA,EACL,OAAM,CAAC,OAAO;AAAA,EACd,OAAM;AAAA,IACJ,MAAK,EAAC,MAAK,OAAM;AAAA,IACjB,QAAO,EAAC,MAAK,OAAM;AAAA,IACnB,OAAM,EAAC,MAAK,OAAM;AAAA,IAClB,QAAO,EAAC,MAAK,QAAO;AAAA,EACtB;AAAA,EACA,OAAM,CAAC,OAAM,EAAE,WAAS;AAEhB,UAAA,EAAE,eAAe;AAEvB,WAAO,MAAI;AAET,YAAM,UAAU,MAAM;AACtB,YAAM,SAAS,WAAW,WAAW,QAAQ,aAAa;AAE1D,UAAG,UAAU,MAAK;AAEhB,cAAM,QAAQ,OAAO,OAAO,cAAc,aAAc,OAAO,UAAkB,QAAQ,cAAc,IAAI,EAAE,OAAO,WAAU,QAAQ,cAAc;AAEpJ,eAAO,EAAE,OAAM,EAAC,OAAM,wCAAsC;AAAA,UAC1D;AAAA,UACA,EAAE,OAAM;AAAA,YACN,OAAM,EAAC,2CAA0C,MAAK,QAAO,MAAM,OAAM;AAAA,YACzE,SAAQ,CAAI,OAAA;AACV,mBAAK,SAAQ,EAAE,MAAK,SAAQ,SAAQ,QAAO,OAAM,MAAM,OAAM,QAAO,MAAM,QAAO,OAAM,IAAI;AAAA,YAC7F;AAAA,UAAA,CACD;AAAA,QAAA,CACF;AAAA,MAAA,OAEC;AACF,eAAO,EAAE,OAAM,EAAC,OAAM,wCAAsC;AAAA,UAC3D,SAAS,QAAQ,aAAa;AAAA,QAAA,CAC9B;AAAA,MACH;AAAA,IAAA;AAAA,EAIJ;AACF,CAAC;"}

package/dist/esm/components/basic/visual-page-editor/core/Dialog.js

@@ -0,0 +1,76 @@
+import { ref, createVNode, Fragment, createTextVNode } from "vue";
+import { Dialoger } from "@maketribe/dm";
+import { ElInput, ElCollapse, ElCollapseItem, ElButton } from "element-plus";
+import { showDynamicFormDialoger } from "../../dynamic-form-panel/dialog.js";
+import "@element-plus/icons-vue";
+import "@maketribe/utils";
+import "../../../../core/DataModelDefines.js";
+import "vue-router";
+import "@maketribe/request";
+import "@maketribe/locale";
+import "../../../../modules/ms/dataviews/ms-config/MsConfigTable.js";
+import "lodash-es";
+import "../../../../modules/ms/components/material-list/index.js";
+import "../../image-cropper/index.js";
+import "../../upload-file/upload-file.js";
+import "../../upload-file/context/web-file-upload-context.js";
+import "../../upload-file/context/web-file-upload-context-options.js";
+import "../../upload-file/ui/upload-image/index.js";
+import "../../upload-file/ui/upload-file/index.js";
+import "../../upload-file/ui/upload-video/index.js";
+import "../../upload-file/upload-file-options.js";
+import "./index.js";
+const showEditPanel = async (moduleOptons, props) => {
+  return await showDynamicFormDialoger(moduleOptons.title, moduleOptons.options, props);
+};
+const showModuleSelectPanel = async () => {
+  return new Promise((resolve) => {
+    const selectComponentOption = ref(null);
+    const handleCancelClick = () => {
+      dialogInstance.destroy();
+    };
+    const handleConfirmClick = () => {
+      dialogInstance.destroy();
+      resolve(selectComponentOption.value);
+    };
+    const dialogInstance = Dialoger.customRender({
+      title: "模块库",
+      class: "mk-html-editor-dialog",
+      width: "70%",
+      onClose: () => {
+        dialogInstance.destroy();
+      },
+      body: () => {
+        return createVNode("div", null, [createVNode(ElInput, null, null), createVNode(ElCollapse, null, {
+          default: () => [createVNode(ElCollapseItem, {
+            "title": "基础模块",
+            "name": "base"
+          }, null), createVNode(ElCollapseItem, {
+            "title": "业务模块",
+            "name": "business"
+          }, null), createVNode(ElCollapseItem, {
+            "title": "自定义模块",
+            "name": "custom"
+          }, null)]
+        })]);
+      },
+      footer: () => {
+        return createVNode(Fragment, null, [createVNode(ElButton, {
+          "onClick": handleCancelClick
+        }, {
+          default: () => [createTextVNode("取消")]
+        }), createVNode(ElButton, {
+          "type": "primary",
+          "onClick": handleConfirmClick
+        }, {
+          default: () => [createTextVNode("确定")]
+        })]);
+      }
+    });
+  });
+};
+export {
+  showEditPanel,
+  showModuleSelectPanel
+};
+//# sourceMappingURL=Dialog.js.map

package/dist/esm/components/basic/visual-page-editor/core/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","sources":["../../../../../../src/components/basic/visual-page-editor/core/Dialog.tsx"],"sourcesContent":["\r\nimport { Fragment, ref, unref, resolveComponent, h, reactive } from 'vue'\r\nimport { Dialoger } from '@maketribe/dm'\r\nimport { ElButton, ElForm, ElFormItem, ElCollapse, ElCollapseItem, ElInput } from \"element-plus\";\r\nimport { ModuleType } from \"./ModuleDefine\"\r\nimport { showDynamicFormDialoger } from \"../../dynamic-form-panel\"\r\nimport { useVisualPageEditor } from \".\"\r\n\r\n/**\r\n * \r\n * @param data \r\n * @param props \r\n * @returns \r\n */\r\nexport const showEditPanel = async (moduleOptons: ModuleType, props: any) => {\r\n\r\n  return await showDynamicFormDialoger(moduleOptons.title,moduleOptons.options,props)\r\n}\r\n\r\n/**\r\n * \r\n * @param data \r\n * @param props \r\n * @returns \r\n */\r\nexport const showModuleSelectPanel = async () => {\r\n  return new Promise(resolve => {\r\n\r\n    const { PageEditor } = useVisualPageEditor();\r\n\r\n    const selectComponentOption = ref(null);\r\n\r\n    // 取消编辑\r\n    const handleCancelClick = () => {\r\n      dialogInstance.destroy();\r\n    };\r\n\r\n    // 确认编辑\r\n    const handleConfirmClick = () => {\r\n      dialogInstance.destroy();\r\n      resolve(selectComponentOption.value);\r\n    };\r\n\r\n    const dialogInstance = Dialoger.customRender({\r\n      title: \"模块库\",\r\n      class: \"mk-html-editor-dialog\",\r\n      width: \"70%\",\r\n      onClose: () => {\r\n        dialogInstance.destroy();\r\n      },\r\n      body: () => {\r\n        return <div>\r\n          <ElInput />\r\n          <ElCollapse>\r\n            <ElCollapseItem title=\"基础模块\" name=\"base\">\r\n\r\n            </ElCollapseItem>\r\n            <ElCollapseItem title=\"业务模块\" name=\"business\">\r\n\r\n            </ElCollapseItem>\r\n            <ElCollapseItem title=\"自定义模块\" name=\"custom\">\r\n\r\n            </ElCollapseItem>\r\n          </ElCollapse>\r\n        </div>\r\n      },\r\n      footer: () => {\r\n        return <Fragment>\r\n          <ElButton onClick={handleCancelClick}>取消</ElButton>\r\n          <ElButton type=\"primary\" onClick={handleConfirmClick}>\r\n            确定\r\n          </ElButton>\r\n        </Fragment>\r\n      },\r\n    });\r\n  });\r\n}\r\n"],"names":["showEditPanel","moduleOptons","props","showDynamicFormDialoger","title","options","showModuleSelectPanel","Promise","resolve","selectComponentOption","ref","handleCancelClick","dialogInstance","destroy","handleConfirmClick","value","Dialoger","customRender","class","width","onClose","body","_createVNode","ElInput","ElCollapse","default","ElCollapseItem","footer","_Fragment","ElButton","_createTextVNode"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAcO,MAAMA,gBAAgB,OAAOC,cAA0BC,UAAe;AAE3E,SAAO,MAAMC,wBAAwBF,aAAaG,OAAMH,aAAaI,SAAQH,KAAK;AACpF;AAQaI,MAAAA,wBAAwB,YAAY;AAC/C,SAAO,IAAIC,QAAQC,aAAW;AAI5B,UAAMC,wBAAwBC,IAAI,IAAI;AAGtC,UAAMC,oBAAoBA,MAAM;AAC9BC,qBAAeC,QAAO;AAAA;AAIxB,UAAMC,qBAAqBA,MAAM;AAC/BF,qBAAeC,QAAO;AACtBL,cAAQC,sBAAsBM,KAAK;AAAA;AAGrC,UAAMH,iBAAiBI,SAASC,aAAa;AAAA,MAC3Cb,OAAO;AAAA,MACPc,OAAO;AAAA,MACPC,OAAO;AAAA,MACPC,SAASA,MAAM;AACbR,uBAAeC,QAAO;AAAA,MACvB;AAAA,MACDQ,MAAMA,MAAM;AACV,eAAAC,0BAAAA,YAAAC,SAAAD,MAAAA,IAAAA,GAAAA,YAAAE,YAAA,MAAA;AAAA,UAAAC,SAAAA,MAAAH,CAAAA,YAAAI,gBAAA;AAAA,YAAA,SAAA;AAAA,YAAA,QAAA;AAAA,aAAAJ,IAAAA,GAAAA,YAAAI,gBAAA;AAAA,YAAA,SAAA;AAAA,YAAA,QAAA;AAAA,aAAAJ,IAAAA,GAAAA,YAAAI,gBAAA;AAAA,YAAA,SAAA;AAAA,YAAA,QAAA;AAAA,UAAA,GAAA,IAAA,CAAA;AAAA,QAAA,CAAA,CAAA,CAAA;AAAA,MAcD;AAAA,MACDC,QAAQA,MAAM;AACZ,eAAAL,YAAAM,UAAAN,MAAAA,CAAAA,YAAAO,UAAA;AAAA,UAAA,WACqBlB;AAAAA,QAAiB,GAAA;AAAA,UAAAc,SAAAA,MAAA,CAAAK,gBAAA,IAAA,CAAA;AAAA,SAAAR,GAAAA,YAAAO,UAAA;AAAA,UAAA,QAAA;AAAA,UAAA,WACFf;AAAAA,QAAkB,GAAA;AAAA,UAAAW,SAAAA,MAAA,CAAAK,gBAAA,IAAA,CAAA;AAAA,QAAA,CAAA,CAAA,CAAA;AAAA,MAIxD;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACH;"}

package/dist/esm/components/basic/visual-page-editor/core/VisvalPageEditor.js

@@ -1,13 +1,73 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { shallowReactive } from "vue";
+import { reactive } from "vue";
 class VisualPageEditor {
   constructor() {
     __publicField(this, "_version");
     __publicField(this, "_content");
+    __publicField(this, "_modules");
     this._version = "1.0.0";
     this._content = null;
+    this._modules = [];
+  }
+  /**
+   * 模块列表
+   */
+  get baseModuleList() {
+    return this._modules.filter((itme) => itme.group == "base");
+  }
+  get businessModuleList() {
+    return this._modules.filter((itme) => itme.group == "business");
+  }
+  get customModuleList() {
+    return this._modules.filter((itme) => itme.group == "custom");
+  }
+  /**
+   * 注册基础模块
+   * @param name 
+   * @param title 
+   * @param component 
+   * @param options 
+   */
+  registerBaseModule(name, title, component, options) {
+    if (this._modules.find((m) => m.name == name)) {
+      throw new Error(`重复的模块【${title}】`);
+    }
+    this._modules.push({ name, title, group: "base", component, options });
+  }
+  /**
+   * 注册业务模块
+   * @param name 
+   * @param title 
+   * @param component 
+   * @param options 
+   */
+  registerBusinessModule(name, title, component, options) {
+    if (this._modules.find((m) => m.name == name)) {
+      throw new Error(`重复的模块【${title}】`);
+    }
+    this._modules.push({ name, title, group: "business", component, options });
+  }
+  /**
+   * 注册自定义模块
+   * @param name 
+   * @param title 
+   * @param component 
+   * @param options 
+   */
+  registerCustomModule(name, title, component, options) {
+    if (this._modules.find((m) => m.name == name)) {
+      throw new Error(`重复的模块【${title}】`);
+    }
+    this._modules.push({ name, title, group: "custom", component, options });
+  }
+  /**
+   * 查找
+   * @param name 
+   */
+  findModule(name) {
+    return this._modules.find((m) => m.name == name);
   }
   /**
    * 内容大小
@@ -40,7 +100,7 @@ class VisualPageEditor {
    * @param content 
    */
   setContent(content) {
-    this._content = shallowReactive(content);
+    this._content = reactive(content);
   }
   /**
    * 获取内容
@@ -50,6 +110,17 @@ class VisualPageEditor {
     var _a;
     return (_a = this._content) == null ? void 0 : _a.contents[index];
   }
+  /**
+   * 获取内容
+   * @returns 
+   */
+  edit(index, data) {
+    var _a;
+    if ((_a = this._content) == null ? void 0 : _a.contents[index]) {
+      this._content.contents[index].componentProps = data;
+      console.log(this._content);
+    }
+  }
   /**
    * 获取内容
    * @returns