fx-platform-ui 0.0.13-alpha15 → 0.0.13-alpha17

package/packages/components/confirm/src/index.module.less

@@ -0,0 +1,61 @@
+.pl-confirm-info {
+  .ant-modal-content {
+    border-radius: 10px;
+  }
+  .ant-modal-header {
+    border-radius: 10px;
+    border-bottom: 0;
+    padding: 24px 24px 0 24px;
+    text-align: center;
+    .ant-modal-title {
+      font-weight: 500;
+      font-size: 20px;
+      color: #222;
+    }
+  }
+  .ant-modal-body {
+    padding: 40px 24px;
+    font-size: 16px;
+    font-weight: 400;
+    text-align: center;
+  }
+  .ant-modal-footer {
+    padding: 0;
+    height: 58px;
+    .pl-confirm-footer {
+      display: flex;
+      align-items: center;
+      font-size: 16px;
+      color: #409eff;
+      position: relative;
+      height: 100%;
+      .pl-confirm-flex {
+        display: flex;
+        justify-content: center;
+        flex: 1;
+      }
+    }
+    .ant-btn {
+      font-size: 16px;
+      width: 100%;
+      height: 100%;
+    }
+    .pl-confirm-cancel:before {
+      position: absolute;
+      box-sizing: border-box;
+      content: ' ';
+      pointer-events: none;
+      top: -50%;
+      bottom: -50%;
+      left: 50%;
+      transform: scale(0.5);
+      border-right: 1px solid #f0f0f0;
+      color: #f0f0f0;
+    }
+    .pl-flex {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+}

package/packages/components/confirm/src/index.tsx

@@ -0,0 +1,91 @@
+import { createVNode, render as vueRender } from 'vue'
+import PlConfirm from './confirm.vue'
+import type { PlatConfirmProps } from './plat-confirm-props'
+
+const confirm = (props: any) => {
+  let confirmDialogInstance: any = null
+  const container = document.createDocumentFragment()
+  const close = (data?, args?) => {
+    currentConfig = {
+      ...currentConfig,
+      visible: false,
+      afterClose: () => {
+        if (typeof props.afterClose === 'function') {
+          props.afterClose()
+        }
+        destroy.apply(data, args)
+      }
+    }
+    update(currentConfig)
+  }
+  let currentConfig = {
+    maskClosable: false,
+    visible: true,
+    close,
+    type: 'info',
+    centered: true,
+    closable: false,
+    width: '360px',
+    height: '225px',
+    ...props
+  }
+  const destroy = (...args) => {
+    if (confirmDialogInstance) {
+      // destroy
+      vueRender(null, container as any)
+      confirmDialogInstance.component.update()
+      confirmDialogInstance = null
+    }
+    const triggerCancel = args.some((param) => param && param.triggerCancel)
+    if (props.onCancel && triggerCancel) {
+      props.onCancel(...args)
+    }
+  }
+  const update = (configUpdate: PlatConfirmProps) => {
+    currentConfig = {
+      ...currentConfig,
+      ...configUpdate
+    }
+    if (confirmDialogInstance) {
+      Object.assign(confirmDialogInstance.component.props, currentConfig)
+      confirmDialogInstance.component.update()
+    }
+  }
+  const Wrapper = (p) => {
+    return <PlConfirm {...p}></PlConfirm>
+  }
+  const render = (arg: PlatConfirmProps) => {
+    console.log(arg)
+    const vm = createVNode(Wrapper, { ...arg })
+    vm.appContext = props.parentContext || props.appContext || vm.appContext
+    vueRender(vm, container as any)
+    return vm
+  }
+  confirmDialogInstance = render(currentConfig)
+  return {
+    destroy: close,
+    update
+  }
+}
+
+const info = (props) => {
+  return {
+    okShow: true,
+    cancelShow: true,
+    ...props
+  }
+}
+
+// const PlConfirm = {
+//   info: (props) => {
+//     return confirm(info(props))
+//   }
+// }
+
+// PlConfirm.install = function (app: App) {
+//   app.component(Modal.name, Modal)
+//   return app
+// }
+PlConfirm.info = (props) => confirm(info(props))
+
+export default PlConfirm

package/packages/components/confirm/src/plat-confirm-props.ts

@@ -0,0 +1,40 @@
+import { VNode, PropType, ExtractPropTypes } from 'vue'
+import { modalProps } from 'ant-design-vue/es/modal/Modal'
+
+export const platConfirmProps = {
+  ...modalProps(),
+  okShow: {
+    type: Boolean,
+    default: true
+  },
+  cancelShow: {
+    type: Boolean,
+    default: true
+  },
+  // 内容
+  content: {
+    type: [Object, String] as PropType<VNode | string>,
+    default: null
+  },
+  // 关闭函数
+  onCancel: {
+    type: Function as PropType<() => Promise<any>>
+  },
+  // 确认函数
+  onOk: {
+    type: Function as PropType<() => Promise<any>>
+  },
+  // 销毁函数
+  destroy: {
+    type: Function as PropType<(() => Promise<any>) | undefined>,
+    default: null
+  },
+  // 关闭函数
+  close: {
+    type: Function as PropType<() => Promise<any>>
+  }
+}
+
+export type PlatConfirmProps = Partial<
+  ExtractPropTypes<typeof platConfirmProps>
+>

package/packages/components/editor/src/index.vue

@@ -8,28 +8,29 @@
 import { onMounted, watch, ref } from 'vue'
 //在js中引入所需的主题和组件
 import tinymce from 'tinymce/tinymce'
-// import 'tinymce/skins/content/default/content.css'
+
+import 'tinymce/skins/content/default/content.css'
 import Editor from '@tinymce/tinymce-vue'
-// import 'tinymce/themes/silver'
-// import 'tinymce/themes/silver/theme'
-// import 'tinymce/icons/default' //引入编辑器图标icon，不引入则不显示对应图标
-// import 'tinymce/models/dom' // 这里是个坑 一定要引入
-//
-// //在TinyMce.vue中接着引入相关插件
-// import 'tinymce/icons/default/icons'
-// import 'tinymce/plugins/image' // 插入上传图片插件
-// import 'tinymce/plugins/media' // 插入视频插件
-// import 'tinymce/plugins/table' // 插入表格插件
-// import 'tinymce/plugins/lists' // 列表插件
-// import 'tinymce/plugins/wordcount' // 字数统计插件
-// import 'tinymce/plugins/code' // 源码
-// import 'tinymce/plugins/fullscreen' //全屏
-// import 'tinymce/plugins/pagebreak' //插入分页符
-// import 'tinymce/plugins/codesample'
-// import 'tinymce/plugins/searchreplace'
-// import 'tinymce/plugins/link'
-// import 'tinymce/plugins/autolink'
-// import 'tinymce/plugins/anchor'
+import 'tinymce/themes/silver'
+import 'tinymce/themes/silver/theme'
+import 'tinymce/icons/default' //引入编辑器图标icon，不引入则不显示对应图标
+import 'tinymce/models/dom' // 这里是个坑 一定要引入
+
+//在TinyMce.vue中接着引入相关插件
+import 'tinymce/icons/default/icons'
+import 'tinymce/plugins/image' // 插入上传图片插件
+import 'tinymce/plugins/media' // 插入视频插件
+import 'tinymce/plugins/table' // 插入表格插件
+import 'tinymce/plugins/lists' // 列表插件
+import 'tinymce/plugins/wordcount' // 字数统计插件
+import 'tinymce/plugins/code' // 源码
+import 'tinymce/plugins/fullscreen' //全屏
+import 'tinymce/plugins/pagebreak' //插入分页符
+import 'tinymce/plugins/codesample'
+import 'tinymce/plugins/searchreplace'
+import 'tinymce/plugins/link'
+import 'tinymce/plugins/autolink'
+import 'tinymce/plugins/anchor'
 
 import { platEditorProps } from './plat-editor-props'
 import { platEditorEmits } from './plat-editor-emits'

package/packages/components/table/src/hook/useTableMethods.tsx

@@ -109,7 +109,7 @@ export const useTableMethods = ({
     // @ts-ignore
     Object.assign(unref(paginationRef), pagination || {})
     await fetchData(params, rest)
-    emit('change', ...rest)
+    emit('handleChange', ...rest)
   }
 
   // 获取表格列key

package/packages/components/table/src/plat-table-emits.ts

@@ -1,3 +1,3 @@
-export const platTableEmits = ['change']
+export const platTableEmits = ['handleChange']
 
 export type PlatTableEmits = typeof platTableEmits

package/CHANGELOG.md

@@ -1,46 +0,0 @@
----
-title: '更新日志'
-lang: zh-CN
----
-
-
-
-## 版本日志
-
-## [0.0.12] - 2022-11-21
-### 新增
-* 新增 `PlEditor`组件, 添加 富文本组件 该组件可在`PLform`使用
-* 新增 `PlTable`组件里 `setProps`方法用来动态添加`PlTable的props`
-
-## [0.0.11] - 2022-11-11
-### 新增
-* 新增 `PlTable`组件, 添加 分页dom`updatePageVnode`方法
-
-## [0.0.10] - 2022-11-10
-### 修改
-* 修改 `PlForm`组件, 解决无法传入官方`ant-design -vue`的Form API
-
-## [0.0.9] - 2022-11-9
-### 新增
-* 新增 `PlTable`组件, 添加针对`table`的显示隐藏属性`tableShow`
-
-## [0.0.8] - 2022-11-4
-### 新增、修改
-* 新增 `PlTable`组件, 添加`pin-manager-table`案例
-* 新增 `PlTable`组件里`actions`,添加`componentType`,解决操作列可能是文本的情况
-* 修改 `PlForm`组件,表单每一项，默认不清空
-* 修改 `PlForm`组件,表单操作按钮"是否隐藏" `bug`
-
-## [0.0.7] - 2022-10-28
-### 修改
-* 修改 `PlTable` 组件,添加ref属性，获取table里所有方法
-
-## [0.0.6] - 2022-10-25
-### 新增
-* 新增 `PlArea` 组件
-
-## [0.0.5] - 2022-10-14
-### 新增
-* 新增 `PlForm`, `PlTable` 组件
-
-...