vxe-pc-ui 1.9.25 → 3.0.0-alpha.3

package/README.md

@@ -4,6 +4,7 @@
 
 [![star](https://gitee.com/xuliangzhan_admin/vxe-pc-ui/badge/star.svg?theme=gvp)](https://gitee.com/xuliangzhan_admin/vxe-pc-ui/stargazers)
 [![npm version](https://img.shields.io/npm/v/vxe-pc-ui.svg?style=flat-square)](https://www.npmjs.com/package/vxe-pc-ui)
+[![NodeJS with Webpack](https://github.com/x-extends/vxe-pc-ui/actions/workflows/webpack.yml/badge.svg)](https://github.com/x-extends/vxe-pc-ui/actions/workflows/webpack.yml)
 [![npm downloads](https://img.shields.io/npm/dt/vxe-pc-ui.svg?style=flat-square)](https://npm-stat.com/charts.html?package=vxe-pc-ui)
 [![issues](https://img.shields.io/github/issues/x-extends/vxe-pc-ui.svg)](https://github.com/x-extends/vxe-pc-ui/issues)
 [![issues closed](https://img.shields.io/github/issues-closed/x-extends/vxe-pc-ui.svg)](https://github.com/x-extends/vxe-pc-ui/issues?q=is%3Aissue+is%3Aclosed)
@@ -30,15 +31,16 @@
 * [x] breadcrumb-item 面包屑-项
 * [x] button 按钮
 * [x] button-group 按钮组
-* [ ] calendar 日历
+* [x] calendar 日历
 * [x] card 卡片
-* [ ] carousel 走马灯
+* [x] carousel 走马灯
+* [x] carousel-item 走马灯 - 项
 * [x] checkbox 复选框
 * [x] checkbox-group 复选框-组
 * [x] col 列
 * [ ] collapse 展开面板
 * [ ] collapse-pane 展开面板-容器
-* [x] date-input 日期选择器
+* [x] date-picker 日期选择器
 * [x] drawer 抽屉
 * [ ] flow-design 流程设计器
 * [ ] flow-view 流程设计器-视图渲染
@@ -48,7 +50,9 @@
 * [x] form-item 表单-项
 * [x] form-view 表单设计器-视图渲染
 * [x] icon 图标
+* [x] icon-picker 图标选择
 * [x] image 图片
+* [x] image-group 图片组
 * [x] image-preview 图片预览
 * [x] input 输入框
 * [x] layout-aside 页面布局-左侧
@@ -69,6 +73,7 @@
 * [x] pager 分页
 * [x] password-input 密码输入框
 * [x] print 打印
+* [x] print-page-break 分页打印
 * [x] pulldown 下拉容器
 * [x] radio 单选框
 * [x] radio-button 单选框-按钮
@@ -79,10 +84,10 @@
 * [x] tab-pane 页签-容器
 * [x] tabs 页签
 * [x] textarea 文本域
-* [x] tips 段落提示
+* [x] tip 提示
 * [x] tooltip 文字提示
 * [x] tree 树形组件
-* [ ] tree-select 树形下拉框
+* [x] tree-select 树形下拉框
 * [x] upload 附件上传
 
 [👀 Vxe Table](https://vxetable.cn)  
@@ -108,13 +113,6 @@ import 'vxe-pc-ui/lib/style.css'
 createApp(App).use(VxeUI).mount('#app')
 ```
 
-## QQ 交流群
-
-该群供大家交流問題，如果群人数已满，将会不定期剔除不活跃的。  
-
-![qq](https://vxetable.cn/static/donation/qq1.png)
-![qq](https://vxetable.cn/static/donation/qq2.png)
-
 ## 运行项目
 
 安装依赖
@@ -135,6 +133,11 @@ npm run serve
 npm run lib
 ```
 
+## PR
+
+1. 如果是修复 bug，必须有示例的复现链接
+2. 如果新功能，涉及代码风格、质量、还需有对应的示例页面
+
 ## Contributors
 
 Thank you to everyone who contributed to this project.

package/es/alert/index.js

@@ -1,10 +1,12 @@
-import VxeAlertComponent from './src/alert';
+import { VxeUI } from '@vxe-ui/core';
 import { dynamicApp } from '../dynamics';
+import VxeAlertComponent from './src/alert';
 export const VxeAlert = Object.assign({}, VxeAlertComponent, {
     install(app) {
         app.component(VxeAlertComponent.name, VxeAlertComponent);
     }
 });
-dynamicApp.component(VxeAlertComponent.name, VxeAlertComponent);
+dynamicApp.use(VxeAlert);
+VxeUI.component(VxeAlertComponent);
 export const Alert = VxeAlert;
 export default VxeAlert;

package/es/alert/src/alert.js

@@ -1,8 +1,8 @@
-import { defineComponent, ref, h, reactive, createCommentVNode } from 'vue';
+import { defineVxeComponent } from '../../ui/src/comp';
 import XEUtils from 'xe-utils';
-import { getConfig, getIcon, createEvent } from '../../ui';
+import { getConfig, createEvent, getIcon, renderEmptyElement } from '../../ui';
 import { getSlotVNs } from '../../ui/src/vn';
-export default defineComponent({
+export default defineVxeComponent({
     name: 'VxeAlert',
     props: {
         title: {
@@ -18,43 +18,39 @@ export default defineComponent({
             default: () => getConfig().alert.icon
         }
     },
-    emits: [
-        'close'
-    ],
-    setup(props, context) {
-        const { emit, slots } = context;
+    data() {
         const xID = XEUtils.uniqueId();
-        const refElem = ref();
-        const reactData = reactive({});
-        const refMaps = {
-            refElem
-        };
-        const computeMaps = {};
-        const $xeAlert = {
+        const reactData = {};
+        return {
             xID,
-            props,
-            context,
-            reactData,
-            getRefMaps: () => refMaps,
-            getComputeMaps: () => computeMaps
-        };
-        const alertMethods = {
-            dispatchEvent(type, params, evnt) {
-                emit(type, createEvent(evnt, { $alert: $xeAlert }, params));
-            }
+            reactData
         };
-        const closeEvent = (evnt) => {
-            alertMethods.dispatchEvent('close', {}, evnt);
-        };
-        const alertPrivateMethods = {};
-        Object.assign($xeAlert, alertMethods, alertPrivateMethods);
-        const renderVN = () => {
+    },
+    methods: {
+        //
+        // Method
+        //
+        dispatchEvent(type, params, evnt) {
+            const $xeAlert = this;
+            this.$emit(type, createEvent(evnt, { $alert: $xeAlert }, params));
+        },
+        closeEvent(evnt) {
+            const $xeAlert = this;
+            $xeAlert.dispatchEvent('close', {}, evnt);
+        },
+        //
+        // Render
+        //
+        renderVN(h) {
+            const $xeAlert = this;
+            const props = $xeAlert;
+            const slots = $xeAlert.$scopedSlots;
             const { status, content, icon, title, showIcon, showClose } = props;
             const defaultSlot = slots.default;
             const titleSlot = slots.title;
             const iconSlot = slots.icon;
             return h('div', {
-                ref: refElem,
+                ref: 'refElem',
                 class: ['vxe-alert', {
                         [`theme--${status}`]: status
                     }]
@@ -69,7 +65,7 @@ export default defineComponent({
                                 class: icon || getIcon()[`ALERT_${status === null || status === void 0 ? void 0 : status.toUpperCase()}`]
                             })
                         ])
-                    : createCommentVNode(),
+                    : renderEmptyElement($xeAlert),
                 h('div', {
                     class: 'vxe-alert--body'
                 }, [
@@ -77,7 +73,7 @@ export default defineComponent({
                         ? h('div', {
                             class: 'vxe-alert--title'
                         }, titleSlot ? getSlotVNs(titleSlot({})) : XEUtils.toValueString(title))
-                        : createCommentVNode(),
+                        : renderEmptyElement($xeAlert),
                     h('div', {
                         class: 'vxe-alert--content'
                     }, defaultSlot ? getSlotVNs(defaultSlot({})) : XEUtils.toValueString(content))
@@ -85,19 +81,19 @@ export default defineComponent({
                 showClose
                     ? h('div', {
                         class: 'vxe-alert--close-btn',
-                        onClick: closeEvent
+                        on: {
+                            click: $xeAlert.closeEvent
+                        }
                     }, [
                         h('i', {
                             class: getIcon().ALERT_CLOSE
                         })
                     ])
-                    : createCommentVNode()
+                    : renderEmptyElement($xeAlert)
             ]);
-        };
-        $xeAlert.renderVN = renderVN;
-        return $xeAlert;
+        }
     },
-    render() {
-        return this.renderVN();
+    render(h) {
+        return this.renderVN(h);
     }
 });

package/es/anchor/index.js

@@ -1,10 +1,12 @@
-import VxeAnchorComponent from './src/anchor';
+import { VxeUI } from '@vxe-ui/core';
 import { dynamicApp } from '../dynamics';
+import VxeAnchorComponent from './src/anchor';
 export const VxeAnchor = Object.assign({}, VxeAnchorComponent, {
     install(app) {
         app.component(VxeAnchorComponent.name, VxeAnchorComponent);
     }
 });
-dynamicApp.component(VxeAnchorComponent.name, VxeAnchorComponent);
+dynamicApp.use(VxeAnchor);
+VxeUI.component(VxeAnchorComponent);
 export const Anchor = VxeAnchor;
 export default VxeAnchor;

package/es/anchor/src/anchor-link.js

@@ -1,94 +1,137 @@
-import { defineComponent, ref, h, computed, reactive, inject, createCommentVNode, onMounted, onUnmounted, provide, watch } from 'vue';
+import { defineVxeComponent } from '../../ui/src/comp';
 import XEUtils from 'xe-utils';
+import { createEvent, renderEmptyElement } from '../../ui';
 import { assembleAnchorLink, destroyAnchorLink } from './util';
-export default defineComponent({
+export default defineVxeComponent({
     name: 'VxeAnchorLink',
     props: {
         content: [String, Number],
         title: [String, Number],
         href: String
     },
-    emits: [],
-    setup(props, context) {
-        const { slots } = context;
+    inject: {
+        $xeAnchor: {
+            default: null
+        },
+        $xeParentAnchorLink: {
+            from: '$xeAnchorLink',
+            default: null
+        }
+    },
+    provide() {
+        const $xeAnchorLink = this;
+        return {
+            $xeAnchorLink
+        };
+    },
+    data() {
         const xID = XEUtils.uniqueId();
-        const refElem = ref();
-        const reactData = reactive({});
-        const linkConfig = reactive({
+        const reactData = {};
+        const linkConfig = {
             id: xID,
-            href: props.href,
+            href: '',
             children: []
-        });
-        const $xeAnchor = inject('$xeAnchor', null);
-        const $xeParentAnchorLink = inject('$xeAnchorLink', null);
-        const refMaps = {
-            refElem
         };
-        const computeIsActive = computed(() => {
-            const { href } = props;
-            if ($xeAnchor) {
-                return $xeAnchor.reactData.activeHref === href;
-            }
-            return null;
-        });
-        const computeMaps = {};
-        const $xeAnchorLink = {
+        return {
             xID,
-            props,
-            context,
             reactData,
-            linkConfig,
-            getRefMaps: () => refMaps,
-            getComputeMaps: () => computeMaps
+            linkConfig
         };
-        const clickEvent = (event) => {
+    },
+    computed: Object.assign(Object.assign({}, {}), { computeIsActive() {
+            const $xeAnchorLink = this;
+            const props = $xeAnchorLink;
+            const $xeAnchor = $xeAnchorLink.$xeAnchor;
             const { href } = props;
             if ($xeAnchor) {
-                $xeAnchor.handleClickLink(event, href);
+                return $xeAnchor.reactData.activeHref === href;
             }
-        };
-        watch(() => props.href, (val) => {
+            return null;
+        } }),
+    watch: {
+        href(val) {
+            const $xeAnchorLink = this;
+            const linkConfig = $xeAnchorLink.linkConfig;
             linkConfig.href = val;
-        });
-        onMounted(() => {
-            if ($xeAnchor && refElem.value) {
-                assembleAnchorLink($xeAnchor, refElem.value, linkConfig, $xeParentAnchorLink);
-            }
-        });
-        onUnmounted(() => {
+        }
+    },
+    methods: {
+        //
+        // Method
+        //
+        dispatchEvent(type, params, evnt) {
+            const $xeAnchorLink = this;
+            $xeAnchorLink.$emit(type, createEvent(evnt, { $anchorLink: $xeAnchorLink }, params));
+        },
+        clickEvent(event) {
+            const $xeAnchorLink = this;
+            const props = $xeAnchorLink;
+            const $xeAnchor = $xeAnchorLink.$xeAnchor;
+            const { href } = props;
             if ($xeAnchor) {
-                destroyAnchorLink($xeAnchor, linkConfig);
+                $xeAnchor.handleClickLink(event, href);
             }
-        });
-        const renderVN = () => {
+        },
+        //
+        // Render
+        //
+        renderVN(h) {
+            const $xeAnchorLink = this;
+            const props = $xeAnchorLink;
+            const slots = $xeAnchorLink.$scopedSlots;
             const { href, content, title } = props;
             const defaultSlot = slots.default;
             const subSlot = slots.sub;
-            const isActive = computeIsActive.value;
+            const isActive = $xeAnchorLink.computeIsActive;
             return h('div', {
-                ref: refElem,
+                ref: 'refElem',
                 class: ['vxe-anchor-link', {
                         'is--active': isActive
                     }]
             }, [
                 h('a', {
                     class: 'vxe-anchor-link--item',
-                    href,
-                    title,
-                    onClick: clickEvent
+                    attrs: {
+                        href,
+                        title
+                    },
+                    on: {
+                        click: $xeAnchorLink.clickEvent
+                    }
                 }, defaultSlot ? defaultSlot({}) : (XEUtils.toValueString(content))),
                 subSlot
                     ? h('div', {
                         class: 'vxe-anchor-link--sub-items'
                     }, subSlot({}))
-                    : createCommentVNode()
+                    : renderEmptyElement($xeAnchorLink)
             ]);
-        };
-        $xeAnchorLink.renderVN = renderVN;
-        provide('$xeAnchorLink', $xeAnchorLink);
-        return $xeAnchorLink;
+        }
+    },
+    created() {
+        const $xeAnchorLink = this;
+        const props = $xeAnchorLink;
+        const linkConfig = $xeAnchorLink.linkConfig;
+        linkConfig.href = props.href;
+    },
+    mounted() {
+        const $xeAnchorLink = this;
+        const $xeAnchor = $xeAnchorLink.$xeAnchor;
+        const $xeParentAnchorLink = $xeAnchorLink.$xeParentAnchorLink;
+        const linkConfig = $xeAnchorLink.linkConfig;
+        const elem = $xeAnchorLink.$refs.refElem;
+        if ($xeAnchor && elem) {
+            assembleAnchorLink($xeAnchor, elem, linkConfig, $xeParentAnchorLink);
+        }
+    },
+    beforeDestroy() {
+        const $xeAnchorLink = this;
+        const $xeAnchor = $xeAnchorLink.$xeAnchor;
+        const linkConfig = $xeAnchorLink.linkConfig;
+        if ($xeAnchor) {
+            destroyAnchorLink($xeAnchor, linkConfig);
+        }
     },
-    render() {
-        return this.renderVN();
+    render(h) {
+        return this.renderVN(h);
     }
 });