fx-platform-ui 0.0.13-alpha2 → 0.0.13-alpha21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,75 @@
1
+ <template>
2
+ <div>
3
+ <Modal
4
+ ref="confirmRef"
5
+ class="pl-confirm-info"
6
+ v-bind="getProps"
7
+ @ok="handleOnOk"
8
+ @cancel="handleOnCancel"
9
+ >
10
+ <div>
11
+ <span>{{ getProps.content }}</span>
12
+ </div>
13
+ <template #footer>
14
+ <div class="pl-confirm-footer">
15
+ <div
16
+ v-if="getProps.cancelShow"
17
+ class="pl-confirm-flex pl-confirm-cancel"
18
+ >
19
+ <AButton
20
+ type="link"
21
+ style="color: #666"
22
+ v-bind="getProps.cancelButtonProps"
23
+ @click="handleOnCancel"
24
+ >{{ getProps.cancelText ?? '取消' }}</AButton
25
+ >
26
+ </div>
27
+ <div v-if="getProps.okShow" class="pl-confirm-flex pl-confirm-ok">
28
+ <AButton
29
+ type="link"
30
+ v-bind="getProps.okButtonProps"
31
+ :loading="getProps.confirmLoading"
32
+ @click="handleOnOk"
33
+ >{{ getProps.okText ?? '确定' }}</AButton
34
+ >
35
+ </div>
36
+ </div>
37
+ </template>
38
+ </Modal>
39
+ </div>
40
+ </template>
41
+ <script lang="tsx" setup>
42
+ import { computed, ref } from 'vue'
43
+ import { Modal } from 'ant-design-vue'
44
+ import { isFunction } from '../../../utils/is'
45
+ import { platConfirmProps } from './plat-confirm-props'
46
+ defineOptions({
47
+ name: 'PlConfirm'
48
+ })
49
+ const props = defineProps(platConfirmProps)
50
+ const confirmRef = ref(null)
51
+ const getProps = computed(() => props as Recordable)
52
+ const handleOnOk = async () => {
53
+ if (isFunction(props.onOk)) {
54
+ const res = await props.onOk()
55
+ if (res) {
56
+ props.close!()
57
+ }
58
+ } else {
59
+ await props.close!()
60
+ }
61
+ }
62
+ const handleOnCancel = async () => {
63
+ if (isFunction(props.onCancel)) {
64
+ const res = await props.onCancel()
65
+ if (res) {
66
+ await props.close!()
67
+ }
68
+ } else {
69
+ await props.close!()
70
+ }
71
+ }
72
+ </script>
73
+ <style lang="less">
74
+ @import 'index.module';
75
+ </style>
@@ -0,0 +1,61 @@
1
+ .pl-confirm-info {
2
+ .ant-modal-content {
3
+ border-radius: 10px;
4
+ }
5
+ .ant-modal-header {
6
+ border-radius: 10px;
7
+ border-bottom: 0;
8
+ padding: 24px 24px 0 24px;
9
+ text-align: center;
10
+ .ant-modal-title {
11
+ font-weight: 500;
12
+ font-size: 20px;
13
+ color: #222;
14
+ }
15
+ }
16
+ .ant-modal-body {
17
+ padding: 40px 24px;
18
+ font-size: 16px;
19
+ font-weight: 400;
20
+ text-align: center;
21
+ }
22
+ .ant-modal-footer {
23
+ padding: 0;
24
+ height: 58px;
25
+ .pl-confirm-footer {
26
+ display: flex;
27
+ align-items: center;
28
+ font-size: 16px;
29
+ color: #409eff;
30
+ position: relative;
31
+ height: 100%;
32
+ .pl-confirm-flex {
33
+ display: flex;
34
+ justify-content: center;
35
+ flex: 1;
36
+ }
37
+ }
38
+ .ant-btn {
39
+ font-size: 16px;
40
+ width: 100%;
41
+ height: 100%;
42
+ }
43
+ .pl-confirm-cancel:before {
44
+ position: absolute;
45
+ box-sizing: border-box;
46
+ content: ' ';
47
+ pointer-events: none;
48
+ top: -50%;
49
+ bottom: -50%;
50
+ left: 50%;
51
+ transform: scale(0.5);
52
+ border-right: 1px solid #f0f0f0;
53
+ color: #f0f0f0;
54
+ }
55
+ .pl-flex {
56
+ display: flex;
57
+ justify-content: center;
58
+ align-items: center;
59
+ }
60
+ }
61
+ }
@@ -0,0 +1,91 @@
1
+ import { createVNode, render as vueRender } from 'vue'
2
+ import PlConfirm from './confirm.vue'
3
+ import type { PlatConfirmProps } from './plat-confirm-props'
4
+
5
+ const confirm = (props: any) => {
6
+ let confirmDialogInstance: any = null
7
+ const container = document.createDocumentFragment()
8
+ const close = (data?, args?) => {
9
+ currentConfig = {
10
+ ...currentConfig,
11
+ visible: false,
12
+ afterClose: () => {
13
+ if (typeof props.afterClose === 'function') {
14
+ props.afterClose()
15
+ }
16
+ destroy.apply(data, args)
17
+ }
18
+ }
19
+ update(currentConfig)
20
+ }
21
+ let currentConfig = {
22
+ maskClosable: false,
23
+ visible: true,
24
+ close,
25
+ type: 'info',
26
+ centered: true,
27
+ closable: false,
28
+ width: '360px',
29
+ height: '225px',
30
+ ...props
31
+ }
32
+ const destroy = (...args) => {
33
+ if (confirmDialogInstance) {
34
+ // destroy
35
+ vueRender(null, container as any)
36
+ confirmDialogInstance.component.update()
37
+ confirmDialogInstance = null
38
+ }
39
+ const triggerCancel = args.some((param) => param && param.triggerCancel)
40
+ if (props.onCancel && triggerCancel) {
41
+ props.onCancel(...args)
42
+ }
43
+ }
44
+ const update = (configUpdate: PlatConfirmProps) => {
45
+ currentConfig = {
46
+ ...currentConfig,
47
+ ...configUpdate
48
+ }
49
+ if (confirmDialogInstance) {
50
+ Object.assign(confirmDialogInstance.component.props, currentConfig)
51
+ confirmDialogInstance.component.update()
52
+ }
53
+ }
54
+ const Wrapper = (p) => {
55
+ return <PlConfirm {...p}></PlConfirm>
56
+ }
57
+ const render = (arg: PlatConfirmProps) => {
58
+ console.log(arg)
59
+ const vm = createVNode(Wrapper, { ...arg })
60
+ vm.appContext = props.parentContext || props.appContext || vm.appContext
61
+ vueRender(vm, container as any)
62
+ return vm
63
+ }
64
+ confirmDialogInstance = render(currentConfig)
65
+ return {
66
+ destroy: close,
67
+ update
68
+ }
69
+ }
70
+
71
+ const info = (props) => {
72
+ return {
73
+ okShow: true,
74
+ cancelShow: true,
75
+ ...props
76
+ }
77
+ }
78
+
79
+ // const PlConfirm = {
80
+ // info: (props) => {
81
+ // return confirm(info(props))
82
+ // }
83
+ // }
84
+
85
+ // PlConfirm.install = function (app: App) {
86
+ // app.component(Modal.name, Modal)
87
+ // return app
88
+ // }
89
+ PlConfirm.info = (props) => confirm(info(props))
90
+
91
+ export default PlConfirm
@@ -0,0 +1,39 @@
1
+ import { VNode, PropType, ExtractPropTypes } from 'vue'
2
+ import { modalProps } from 'ant-design-vue/es/modal/Modal'
3
+
4
+ export const platConfirmProps = {
5
+ ...modalProps(),
6
+ okShow: {
7
+ type: Boolean,
8
+ default: true
9
+ },
10
+ cancelShow: {
11
+ type: Boolean,
12
+ default: true
13
+ },
14
+ // 内容
15
+ content: {
16
+ type: [Object, String] as PropType<VNode | string>,
17
+ default: null
18
+ },
19
+ // 关闭函数
20
+ onCancel: {
21
+ type: Function as PropType<() => Promise<any>>
22
+ },
23
+ // 确认函数
24
+ onOk: {
25
+ type: Function as PropType<() => Promise<any>>
26
+ },
27
+ // 销毁函数
28
+ destroy: {
29
+ type: Function as PropType<(() => Promise<any>) | undefined>,
30
+ default: null
31
+ },
32
+ close: {
33
+ type: Function as PropType<() => Promise<any>>
34
+ }
35
+ }
36
+
37
+ export type PlatConfirmProps = Partial<
38
+ ExtractPropTypes<typeof platConfirmProps>
39
+ >
@@ -1,84 +1,87 @@
1
- <template>
2
- <div class="fx-editor">
3
- <editor v-model="modelValue" :init="init" :disabled="disabled"></editor>
4
- </div>
5
- </template>
1
+ <!--<template>-->
2
+ <!-- <div class="fx-editor">-->
3
+ <!-- <editor v-model="modelValue" :init="init" :disabled="disabled"></editor>-->
4
+ <!-- </div>-->
5
+ <!--</template>-->
6
6
 
7
- <script lang="ts" setup>
8
- import { onMounted, watch, ref } from 'vue'
9
- //在js中引入所需的主题和组件
10
- import tinymce from 'tinymce/tinymce'
11
- import 'tinymce/skins/content/default/content.css'
12
- import Editor from '@tinymce/tinymce-vue'
13
- import 'tinymce/themes/silver'
14
- import 'tinymce/themes/silver/theme'
15
- import 'tinymce/icons/default' //引入编辑器图标icon,不引入则不显示对应图标
16
- import 'tinymce/models/dom' // 这里是个坑 一定要引入
7
+ <!--<script lang="ts" setup>-->
8
+ <!--import { onMounted, watch, ref } from 'vue'-->
9
+ <!--//在js中引入所需的主题和组件-->
10
+ <!--import tinymce from 'tinymce/tinymce'-->
17
11
 
18
- //在TinyMce.vue中接着引入相关插件
19
- import 'tinymce/icons/default/icons'
20
- import 'tinymce/plugins/image' // 插入上传图片插件
21
- import 'tinymce/plugins/media' // 插入视频插件
22
- import 'tinymce/plugins/table' // 插入表格插件
23
- import 'tinymce/plugins/lists' // 列表插件
24
- import 'tinymce/plugins/wordcount' // 字数统计插件
25
- import 'tinymce/plugins/code' // 源码
26
- import 'tinymce/plugins/fullscreen' //全屏
27
- import 'tinymce/plugins/pagebreak' //插入分页符
28
- import 'tinymce/plugins/codesample'
29
- import 'tinymce/plugins/searchreplace'
30
- import 'tinymce/plugins/link'
31
- import 'tinymce/plugins/autolink'
32
- import 'tinymce/plugins/anchor'
12
+ <!--import 'tinymce/skins/content/default/content.css'-->
13
+ <!--import Editor from '@tinymce/tinymce-vue'-->
14
+ <!--import 'tinymce/themes/silver'-->
15
+ <!--import 'tinymce/themes/silver/theme'-->
16
+ <!--import 'tinymce/icons/default' //引入编辑器图标icon,不引入则不显示对应图标-->
17
+ <!--import 'tinymce/models/dom' // 这里是个坑 一定要引入-->
33
18
 
34
- import { platEditorProps } from './plat-editor-props'
35
- import { useEditorState } from './hook'
36
- defineOptions({
37
- name: 'PlEditor'
38
- })
39
- const props = defineProps(platEditorProps)
40
- const emit = defineEmits(['update:value', 'change'])
19
+ <!--//在TinyMce.vue中接着引入相关插件-->
20
+ <!--import 'tinymce/icons/default/icons'-->
21
+ <!--import 'tinymce/plugins/image' // 插入上传图片插件-->
22
+ <!--import 'tinymce/plugins/media' // 插入视频插件-->
23
+ <!--import 'tinymce/plugins/table' // 插入表格插件-->
24
+ <!--import 'tinymce/plugins/lists' // 列表插件-->
25
+ <!--import 'tinymce/plugins/wordcount' // 字数统计插件-->
26
+ <!--import 'tinymce/plugins/code' // 源码-->
27
+ <!--import 'tinymce/plugins/fullscreen' //全屏-->
28
+ <!--import 'tinymce/plugins/pagebreak' //插入分页符-->
29
+ <!--import 'tinymce/plugins/codesample'-->
30
+ <!--import 'tinymce/plugins/searchreplace'-->
31
+ <!--import 'tinymce/plugins/link'-->
32
+ <!--import 'tinymce/plugins/autolink'-->
33
+ <!--import 'tinymce/plugins/anchor'-->
41
34
 
42
- const { init, modelValue } = useEditorState(props)
43
- const editorBorder = ref('1px solid #d9d9d9')
35
+ <!--import { platEditorProps } from './plat-editor-props'-->
36
+ <!--import { platEditorEmits } from './plat-editor-emits'-->
37
+ <!--import { useEditorState } from './hook'-->
44
38
 
45
- watch(
46
- () => modelValue.value,
47
- (val) => {
48
- emit('update:value', val)
49
- emit('change', val)
50
- }
51
- )
39
+ <!--defineOptions({-->
40
+ <!-- name: 'PlEditor'-->
41
+ <!--})-->
42
+ <!--const props = defineProps(platEditorProps)-->
43
+ <!--const emit = defineEmits(platEditorEmits)-->
52
44
 
53
- // 添加红色边框
54
- const addValidate = (border = '1px solid #ff4d4f') => {
55
- editorBorder.value = border
56
- }
45
+ <!--const { init, modelValue } = useEditorState(props)-->
46
+ <!--const editorBorder = ref('1px solid #d9d9d9')-->
57
47
 
58
- // 取消红色边框
59
- const removeValidate = (border = '1px solid #d9d9d9') => {
60
- editorBorder.value = border
61
- }
48
+ <!--watch(-->
49
+ <!-- () => modelValue.value,-->
50
+ <!-- (val) => {-->
51
+ <!-- emit('update:value', val)-->
52
+ <!-- emit('change', val)-->
53
+ <!-- }-->
54
+ <!--)-->
62
55
 
63
- const instance = {
64
- ...props,
65
- addValidate,
66
- removeValidate
67
- }
56
+ <!--// 添加红色边框-->
57
+ <!--const addValidate = (border = '1px solid #ff4d4f') => {-->
58
+ <!-- editorBorder.value = border-->
59
+ <!--}-->
68
60
 
69
- defineExpose(instance)
61
+ <!--// 取消红色边框-->
62
+ <!--const removeValidate = (border = '1px solid #d9d9d9') => {-->
63
+ <!-- editorBorder.value = border-->
64
+ <!--}-->
70
65
 
71
- //在onMounted中初始化编辑器
72
- onMounted(() => {
73
- tinymce.init({})
74
- })
75
- </script>
76
- <style lang="less" scoped>
77
- :deep(.tox-tinymce) {
78
- border: v-bind(editorBorder);
79
- border-radius: 2px;
80
- }
81
- :deep(.tox-tinymce-aux) {
82
- z-index: 1000;
83
- }
84
- </style>
66
+ <!--const instance = {-->
67
+ <!-- ...props,-->
68
+ <!-- addValidate,-->
69
+ <!-- removeValidate-->
70
+ <!--}-->
71
+
72
+ <!--defineExpose(instance)-->
73
+
74
+ <!--//在onMounted中初始化编辑器-->
75
+ <!--onMounted(() => {-->
76
+ <!-- tinymce.init({})-->
77
+ <!--})-->
78
+ <!--</script>-->
79
+ <!--<style lang="less" scoped>-->
80
+ <!--:deep(.tox-tinymce) {-->
81
+ <!-- border: v-bind(editorBorder);-->
82
+ <!-- border-radius: 2px;-->
83
+ <!--}-->
84
+ <!--:deep(.tox-tinymce-aux) {-->
85
+ <!-- z-index: 1000;-->
86
+ <!--}-->
87
+ <!--</style>-->
@@ -1 +1 @@
1
- export const platEditorEmits = ['change', 'init']
1
+ export const platEditorEmits = ['update:value', 'change']
@@ -109,7 +109,7 @@ export const useTableMethods = ({
109
109
  // @ts-ignore
110
110
  Object.assign(unref(paginationRef), pagination || {})
111
111
  await fetchData(params, rest)
112
- emit('change', ...rest)
112
+ emit('handleChange', ...rest)
113
113
  }
114
114
 
115
115
  // 获取表格列key
@@ -1,3 +1,3 @@
1
- export const platTableEmits = ['change']
1
+ export const platTableEmits = ['handleChange']
2
2
 
3
3
  export type PlatTableEmits = typeof platTableEmits
@@ -1 +0,0 @@
1
- export * from './useEditorState';
@@ -1,28 +0,0 @@
1
- import { PlatEditorProps } from '../plat-editor-props';
2
- export declare const useEditorState: (props: PlatEditorProps) => {
3
- init: import("vue").ComputedRef<{
4
- images_upload_handler: (blobInfo: any) => Promise<unknown>;
5
- file_picker_callback: (callback: any) => void;
6
- selector: string;
7
- placeholder: string;
8
- language_url: string;
9
- language: string;
10
- skin_url: string;
11
- height: number;
12
- branding: boolean;
13
- menubar: boolean;
14
- image_dimensions: boolean;
15
- promotion: boolean;
16
- plugins: string;
17
- toolbar: string;
18
- paste_webkit_styles: string;
19
- paste_merge_formats: boolean;
20
- nonbreaking_force_tab: boolean;
21
- paste_auto_cleanup_on_paste: boolean;
22
- file_picker_types: string;
23
- fontsize_formats: string;
24
- font_formats: string;
25
- content_css: string;
26
- }>;
27
- modelValue: import("vue").Ref<any>;
28
- };
@@ -1,37 +0,0 @@
1
- import { ExtractPropTypes } from 'vue';
2
- import { MediaSetting, ImageSetting } from './type';
3
- export declare const platEditorProps: {
4
- editorSetting: {
5
- type: ObjectConstructor;
6
- default: () => {};
7
- };
8
- mediaSetting: {
9
- type: PropType<MediaSetting>;
10
- default: () => {
11
- fileSizeLimit: number;
12
- fileTypeLimit: string[];
13
- fileNameLength: number;
14
- };
15
- };
16
- imageSetting: {
17
- type: PropType<ImageSetting>;
18
- default: () => {
19
- fileSizeLimit: number;
20
- fileTypeLimit: string[];
21
- fileNameLength: number;
22
- };
23
- };
24
- value: {
25
- type: StringConstructor;
26
- default: string;
27
- };
28
- disabled: {
29
- type: BooleanConstructor;
30
- default: boolean;
31
- };
32
- /** 附件请求函数 */
33
- fileRequest: {
34
- type: PropType<(file: any) => Promise<any>>;
35
- };
36
- };
37
- export declare type PlatEditorProps = ExtractPropTypes<typeof platEditorProps>;
@@ -1,10 +0,0 @@
1
- export interface MediaSetting {
2
- fileSizeLimit: number;
3
- fileTypeLimit: string;
4
- fileNameLength: string | number;
5
- }
6
- export interface ImageSetting {
7
- fileSizeLimit: number;
8
- fileTypeLimit: string;
9
- fileNameLength: string | number;
10
- }