vxe-pc-ui 0.0.2 → 0.1.0

package/es/form-design/src/view.js

@@ -0,0 +1,113 @@
+import { defineComponent, h, inject, TransitionGroup } from 'vue';
+import { renderer } from '../../ui/src/renderer';
+import { getSlotVNs } from '../../ui/src/vn';
+import XEUtils from 'xe-utils';
+export default defineComponent({
+    props: {},
+    emits: [],
+    setup() {
+        const $xeFormDesign = inject('$xeFormDesign', null);
+        if (!$xeFormDesign) {
+            return;
+        }
+        const { reactData } = $xeFormDesign;
+        const dragoverEvent = (evnt) => {
+            const { widgetObjList, dragWidget } = reactData;
+            if (dragWidget) {
+                evnt.preventDefault();
+                const rest = XEUtils.findTree(widgetObjList, item => item.id === dragWidget.id, { children: 'children' });
+                if (!rest) {
+                    reactData.sortWidget = dragWidget;
+                    widgetObjList.push(dragWidget);
+                }
+            }
+        };
+        const sortDragstartEvent = (evnt) => {
+            const { widgetObjList } = reactData;
+            const divEl = evnt.currentTarget;
+            const widgetId = Number(divEl.getAttribute('data-widget-id'));
+            const currRest = XEUtils.findTree(widgetObjList, item => item.id === widgetId, { children: 'children' });
+            if (currRest) {
+                reactData.dragWidget = null;
+                reactData.sortWidget = currRest.item;
+            }
+        };
+        const sortDragendEvent = () => {
+            reactData.activeWidget = reactData.sortWidget;
+            reactData.sortWidget = null;
+        };
+        let isDragAnimate = false;
+        const sortDragenterEvent = (evnt) => {
+            const { widgetObjList, sortWidget } = reactData;
+            if (isDragAnimate) {
+                evnt.preventDefault();
+                return;
+            }
+            if (sortWidget) {
+                const divEl = evnt.currentTarget;
+                evnt.preventDefault();
+                const widgetId = Number(divEl.getAttribute('data-widget-id'));
+                if (widgetId !== sortWidget.id) {
+                    const targetRest = XEUtils.findTree(widgetObjList, item => item.id === widgetId, { children: 'children' });
+                    if (targetRest) {
+                        const currRest = XEUtils.findTree(widgetObjList, item => item.id === sortWidget.id, { children: 'children' });
+                        if (currRest) {
+                            // 控件换位置
+                            currRest.items.splice(currRest.index, 1);
+                            targetRest.items.splice(targetRest.index, 0, currRest.item);
+                            isDragAnimate = true;
+                            setTimeout(() => {
+                                isDragAnimate = false;
+                            }, 150);
+                        }
+                    }
+                }
+            }
+        };
+        const dragoverItemEvent = (evnt) => {
+            const { sortWidget, dragWidget } = reactData;
+            if (sortWidget || dragWidget) {
+                evnt.preventDefault();
+            }
+        };
+        return () => {
+            const { widgetObjList } = reactData;
+            return h('div', {
+                class: 'vxe-design-form--preview',
+                onDragover: dragoverEvent
+            }, [
+                h(TransitionGroup, {
+                    class: 'vxe-design-form--preview-list',
+                    tag: 'div',
+                    name: 'vxe-design-form--preview-list'
+                }, {
+                    default: () => {
+                        const { dragWidget, activeWidget, sortWidget } = reactData;
+                        return widgetObjList.map(item => {
+                            const { name } = item;
+                            const compConf = renderer.get(name) || {};
+                            const renderFormDesignWidgetView = compConf.renderFormDesignWidgetView;
+                            return h('div', {
+                                key: item.id,
+                                'data-widget-id': item.id,
+                                draggable: true,
+                                class: ['vxe-design-form--preview-item', {
+                                        'is--active': activeWidget && activeWidget.id === item.id,
+                                        'is--sort': sortWidget && sortWidget.id === item.id,
+                                        'is--drag': dragWidget && dragWidget.id === item.id
+                                    }],
+                                onDragstart: sortDragstartEvent,
+                                onDragend: sortDragendEvent,
+                                onDragenter: sortDragenterEvent,
+                                onDragover: dragoverItemEvent,
+                                onClick(evnt) {
+                                    $xeFormDesign.handleClickWidget(evnt, item);
+                                }
+                            }, renderFormDesignWidgetView ? getSlotVNs(renderFormDesignWidgetView({}, {})) : []);
+                        });
+                    }
+                })
+            ]);
+        };
+    }
+});

package/es/form-design/src/widget.js

@@ -0,0 +1,104 @@
+import { defineComponent, h, inject } from 'vue';
+import XEUtils from 'xe-utils';
+import { renderer } from '../../ui/src/renderer';
+import { getSlotVNs } from '../../ui/src/vn';
+import { getNewWidgetId } from './util';
+export default defineComponent({
+    props: {},
+    emits: [],
+    setup() {
+        const $xeFormDesign = inject('$xeFormDesign', null);
+        if (!$xeFormDesign) {
+            return;
+        }
+        const { reactData } = $xeFormDesign;
+        const dragstartEvent = (evnt) => {
+            const { widgetObjList } = reactData;
+            const divEl = evnt.currentTarget;
+            const dataTransfer = evnt.dataTransfer;
+            const widgetName = divEl.getAttribute('data-widget-name') || '';
+            const dragWidget = {
+                id: getNewWidgetId(widgetObjList),
+                name: widgetName
+            };
+            if (dataTransfer) {
+                dataTransfer.setData('text/plain', widgetName);
+            }
+            reactData.sortWidget = null;
+            reactData.dragWidget = dragWidget;
+        };
+        const dragendEvent = () => {
+            if (reactData.dragWidget) {
+                reactData.activeWidget = reactData.dragWidget;
+            }
+            reactData.dragWidget = null;
+            reactData.sortWidget = null;
+        };
+        const cancelDragoverItem = (evnt, group) => {
+            const { widgetObjList, dragWidget } = reactData;
+            if (dragWidget) {
+                if (group.children.includes(dragWidget.name)) {
+                    const rest = XEUtils.findTree(widgetObjList, item => item.id === dragWidget.id, { children: 'children' });
+                    if (rest) {
+                        rest.items.splice(rest.index, 1);
+                    }
+                }
+            }
+        };
+        const renderWidgetList = (group) => {
+            const widgetVNs = [];
+            if (group.children) {
+                group.children.forEach((name, index) => {
+                    const compConf = renderer.get(name) || {};
+                    const formDesignWidgetName = compConf.formDesignWidgetName;
+                    const formDesignWidgetIcon = compConf.formDesignWidgetIcon;
+                    const renderFormDesignWidgetItem = compConf.renderFormDesignWidgetItem;
+                    widgetVNs.push(h('div', {
+                        key: index,
+                        class: 'vxe-design-form--widget-item'
+                    }, h('div', {
+                        class: 'vxe-design-form--widget-box',
+                        'data-widget-name': name,
+                        draggable: true,
+                        onDragstart: dragstartEvent,
+                        onDragend: dragendEvent
+                    }, renderFormDesignWidgetItem
+                        ? getSlotVNs(renderFormDesignWidgetItem({}, {}))
+                        : [
+                            h('i', {
+                                class: ['vxe-design-form--widget-item-icon', formDesignWidgetIcon]
+                            }),
+                            h('span', {
+                                class: 'vxe-design-form--widget-item-name'
+                            }, `${formDesignWidgetName || name}`)
+                        ])));
+                });
+            }
+            return widgetVNs;
+        };
+        const renderWidgetGroups = () => {
+            const { widgetConfigs } = reactData;
+            return widgetConfigs.map((group, gIndex) => {
+                return h('div', {
+                    key: gIndex,
+                    class: 'vxe-design-form--widget-group'
+                }, [
+                    h('div', {
+                        class: 'vxe-design-form--widget-title'
+                    }, `${group.title}`),
+                    h('div', {
+                        class: 'vxe-design-form--widget-list',
+                        onDragover(evnt) {
+                            cancelDragoverItem(evnt, group);
+                        }
+                    }, renderWidgetList(group))
+                ]);
+            });
+        };
+        return () => {
+            return h('div', {
+                class: 'vxe-design-form--widget'
+            }, renderWidgetGroups());
+        };
+    }
+});

package/es/form-design/style.css

@@ -0,0 +1,97 @@
+.vxe-design-form {
+  display: flex;
+  flex-direction: row;
+}
+
+.vxe-design-form--widget {
+  width: 260px;
+  flex-shrink: 0;
+  overflow: auto;
+  margin-right: var(--vxe-ui-layout-padding-default);
+}
+
+.vxe-design-form--preview {
+  flex-grow: 1;
+  overflow: auto;
+}
+
+.vxe-design-form--setting {
+  width: 280px;
+  flex-shrink: 0;
+  overflow: auto;
+  margin-left: var(--vxe-ui-layout-padding-default);
+}
+
+.vxe-design-form--widget,
+.vxe-design-form--setting {
+  padding: var(--vxe-ui-layout-padding-default);
+  border-radius: var(--vxe-ui-border-radius);
+  background-color: var(--vxe-ui-layout-background-color);
+}
+
+.vxe-design-form--preview {
+  padding: var(--vxe-ui-layout-padding-default) 0;
+  border-radius: var(--vxe-ui-border-radius);
+  background-color: var(--vxe-ui-layout-background-color);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+
+.vxe-design-form--widget-list {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.vxe-design-form--widget-item {
+  width: 50%;
+  padding: var(--vxe-ui-layout-padding-half);
+}
+
+.vxe-design-form--widget-box {
+  height: 32px;
+  line-height: 32px;
+  padding: 0 var(--vxe-ui-layout-padding-half);
+  border-radius: var(--vxe-ui-border-radius);
+  border: 1px solid var(--vxe-ui-font-primary-lighten-color);
+  background-color: var(--vxe-ui-design-form-widget-item-background-color);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: grabbing;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+
+.vxe-design-form--preview-list-move {
+  transition: transform 0.35s;
+}
+
+.vxe-design-form--preview-item {
+  position: relative;
+  display: block;
+  padding: var(--vxe-ui-layout-padding-half);
+  border: 1px solid transparent;
+  cursor: grabbing;
+}
+.vxe-design-form--preview-item::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+}
+.vxe-design-form--preview-item.is--active {
+  border: 1px dashed var(--vxe-ui-font-primary-color);
+  background-color: #ebf3fc;
+}
+.vxe-design-form--preview-item.is--sort {
+  background-color: #dde9fd;
+}
+.vxe-design-form--preview-item.is--drag {
+  background-color: #dde9fd;
+}

package/es/form-design/style.min.css

@@ -0,0 +1 @@
+.vxe-design-form{display:flex;flex-direction:row}.vxe-design-form--widget{width:260px;flex-shrink:0;overflow:auto;margin-right:var(--vxe-ui-layout-padding-default)}.vxe-design-form--preview{flex-grow:1;overflow:auto}.vxe-design-form--setting{width:280px;flex-shrink:0;overflow:auto;margin-left:var(--vxe-ui-layout-padding-default)}.vxe-design-form--setting,.vxe-design-form--widget{padding:var(--vxe-ui-layout-padding-default);border-radius:var(--vxe-ui-border-radius);background-color:var(--vxe-ui-layout-background-color)}.vxe-design-form--preview{padding:var(--vxe-ui-layout-padding-default) 0;border-radius:var(--vxe-ui-border-radius);background-color:var(--vxe-ui-layout-background-color);-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-design-form--widget-list{display:flex;flex-direction:row;flex-wrap:wrap}.vxe-design-form--widget-item{width:50%;padding:var(--vxe-ui-layout-padding-half)}.vxe-design-form--widget-box{height:32px;line-height:32px;padding:0 var(--vxe-ui-layout-padding-half);border-radius:var(--vxe-ui-border-radius);border:1px solid var(--vxe-ui-font-primary-lighten-color);background-color:var(--vxe-ui-design-form-widget-item-background-color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:grabbing;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-design-form--preview-list-move{transition:transform .35s}.vxe-design-form--preview-item{position:relative;display:block;padding:var(--vxe-ui-layout-padding-half);border:1px solid transparent;cursor:grabbing}.vxe-design-form--preview-item::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.vxe-design-form--preview-item.is--active{border:1px dashed var(--vxe-ui-font-primary-color);background-color:#ebf3fc}.vxe-design-form--preview-item.is--sort{background-color:#dde9fd}.vxe-design-form--preview-item.is--drag{background-color:#dde9fd}

package/es/form-gather/index.js

@@ -0,0 +1,8 @@
+import VxeFormGatherComponent from '../form/src/form-gather';
+export const VxeFormGather = Object.assign(VxeFormGatherComponent, {
+    install(app) {
+        app.component(VxeFormGatherComponent.name, VxeFormGatherComponent);
+    }
+});
+export const FormGather = VxeFormGather;
+export default VxeFormGather;

package/es/form-item/index.js

@@ -0,0 +1,8 @@
+import VxeFormItemComponent from '../form/src/form-item';
+export const VxeFormItem = Object.assign(VxeFormItemComponent, {
+    install(app) {
+        app.component(VxeFormItemComponent.name, VxeFormItemComponent);
+    }
+});
+export const FormItem = VxeFormItem;
+export default VxeFormItem;