fx-platform-ui 0.0.13-alpha14 → 0.0.13-alpha16

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/hook/useEditorState.ts

@@ -1,5 +1,5 @@
 import { computed, ref, watchEffect } from 'vue'
-// import tinymce from 'tinymce/tinymce'
+import tinymce from 'tinymce/tinymce'
 import { message } from 'ant-design-vue'
 import { PlatEditorProps } from '../plat-editor-props'
 import { isFunction } from '../../../../utils/is'
@@ -54,9 +54,9 @@ export const useEditorState = (props: PlatEditorProps) => {
         inputElem.click()
         inputElem.onchange = function () {
           const file = inputElem.files[0]
-          // tinymce.activeEditor?.setProgressState(true)
+          tinymce.activeEditor?.setProgressState(true)
           mediaBeforeUpload(file).then((res) => {
-            // tinymce.activeEditor?.setProgressState(false)
+            tinymce.activeEditor?.setProgressState(false)
             callback(res)
           })
         }

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

@@ -7,7 +7,8 @@
 <script lang="ts" setup>
 import { onMounted, watch, ref } from 'vue'
 //在js中引入所需的主题和组件
-// import tinymce from 'tinymce/tinymce'
+import tinymce from 'tinymce/tinymce'
+
 // import 'tinymce/skins/content/default/content.css'
 import Editor from '@tinymce/tinymce-vue'
 // import 'tinymce/themes/silver'
@@ -72,7 +73,7 @@ defineExpose(instance)
 
 //在onMounted中初始化编辑器
 onMounted(() => {
-  // tinymce.init({})
+  tinymce.init({})
 })
 </script>
 <style lang="less" scoped>

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` 组件
-
-...