fx-platform-ui 0.0.13-alpha2 → 0.0.13-alpha20

package/packages/components/confirm/src/confirm.vue

@@ -0,0 +1,75 @@
+<template>
+  <div>
+    <Modal
+      ref="confirmRef"
+      class="pl-confirm-info"
+      v-bind="getProps"
+      @ok="handleOnOk"
+      @cancel="handleOnCancel"
+    >
+      <div>
+        <span>{{ getProps.content }}</span>
+      </div>
+      <template #footer>
+        <div class="pl-confirm-footer">
+          <div
+            v-if="getProps.cancelShow"
+            class="pl-confirm-flex pl-confirm-cancel"
+          >
+            <AButton
+              type="link"
+              style="color: #666"
+              v-bind="getProps.cancelButtonProps"
+              @click="handleOnCancel"
+              >{{ getProps.cancelText ?? '取消' }}</AButton
+            >
+          </div>
+          <div v-if="getProps.okShow" class="pl-confirm-flex pl-confirm-ok">
+            <AButton
+              type="link"
+              v-bind="getProps.okButtonProps"
+              :loading="getProps.confirmLoading"
+              @click="handleOnOk"
+              >{{ getProps.okText ?? '确定' }}</AButton
+            >
+          </div>
+        </div>
+      </template>
+    </Modal>
+  </div>
+</template>
+<script lang="tsx" setup>
+import { computed, ref } from 'vue'
+import { Modal } from 'ant-design-vue'
+import { isFunction } from '../../../utils/is'
+import { platConfirmProps } from './plat-confirm-props'
+defineOptions({
+  name: 'PlConfirm'
+})
+const props = defineProps(platConfirmProps)
+const confirmRef = ref(null)
+const getProps = computed(() => props as Recordable)
+const handleOnOk = async () => {
+  if (isFunction(props.onOk)) {
+    const res = await props.onOk()
+    if (res) {
+      props.close!()
+    }
+  } else {
+    await props.close!()
+  }
+}
+const handleOnCancel = async () => {
+  if (isFunction(props.onCancel)) {
+    const res = await props.onCancel()
+    if (res) {
+      await props.close!()
+    }
+  } else {
+    await props.close!()
+  }
+}
+</script>
+<style lang="less">
+@import 'index.module';
+</style>

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,39 @@
+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,36 +8,39 @@
 import { onMounted, watch, ref } from 'vue'
 //在js中引入所需的主题和组件
 import tinymce from 'tinymce/tinymce'
-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/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 { platEditorProps } from './plat-editor-props'
+import { platEditorEmits } from './plat-editor-emits'
 import { useEditorState } from './hook'
+
 defineOptions({
   name: 'PlEditor'
 })
 const props = defineProps(platEditorProps)
-const emit = defineEmits(['update:value', 'change'])
+const emit = defineEmits(platEditorEmits)
 
 const { init, modelValue } = useEditorState(props)
 const editorBorder = ref('1px solid #d9d9d9')

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

@@ -1 +1 @@
-export const platEditorEmits = ['change', 'init']
+export const platEditorEmits = ['update:value', 'change']

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