fx-platform-ui 0.0.13-alpha9 → 1.0.1

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

@@ -1,6 +1,6 @@
 <template>
   <div class="fx-editor">
-<!--    <editor v-model="modelValue" :init="init" :disabled="disabled"></editor>-->
+    <editor v-model="modelValue" :init="init" :disabled="disabled"></editor>
   </div>
 </template>
 
@@ -8,6 +8,7 @@
 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'
@@ -34,6 +35,7 @@ import 'tinymce/plugins/anchor'
 import { platEditorProps } from './plat-editor-props'
 import { platEditorEmits } from './plat-editor-emits'
 import { useEditorState } from './hook'
+
 defineOptions({
   name: 'PlEditor'
 })

package/packages/components/form/src/components/form-action.vue

@@ -32,7 +32,7 @@
           size="small"
           @click="toggleAdvanced"
         >
-          <BasicArrow class="ml-1" :expand="!isAdvanced" />
+          <!--          <BasicArrow class="ml-1" :expand="!isAdvanced" />-->
         </AButton>
       </FormItem>
     </div>

package/packages/components/form/src/types/component.ts

@@ -13,7 +13,8 @@ import {
   Tree,
   Slider,
   Rate,
-  Divider
+  Divider,
+  Textarea
 } from 'ant-design-vue'
 
 import type {
@@ -26,7 +27,8 @@ import type {
   TimePickerProps,
   TreeProps,
   TreeSelectProps,
-  RadioGroupProps
+  RadioGroupProps,
+  TextAreaProps
 } from 'ant-design-vue'
 
 import type { RenderCallbackParams } from './form'
@@ -46,6 +48,7 @@ export type ComponentProps = (
   | TreeProps
   | TreeSelectProps
   | RadioGroupProps
+  | TextAreaProps
 ) & {
   /** 组件异步请求数据 */
   request?: PromiseFn<RenderCallbackParams, any>
@@ -161,7 +164,8 @@ export const componentMap = {
   RangePicker: DatePicker.RangePicker,
   WeekPicker: DatePicker.WeekPicker,
   TimePicker,
-  Divider
+  Divider,
+  Textarea
 }
 
 export type ComponentMapType = keyof typeof componentMap

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