vxe-pc-ui 4.11.27 → 4.11.29

package/README.md

@@ -69,6 +69,7 @@
 * [x] anchor 锚点
   * [x] anchor-link 锚点-链接
 * [x] avatar 头像
+* [ ] backtop 回到顶部
 * [x] badge 徽标
 * [x] breadcrumb 面包屑
   * [x] breadcrumb-item 面包屑-项
@@ -78,6 +79,7 @@
 * [x] card 卡片
 * [x] carousel 走马灯
   * [x] carousel-item 走马灯 - 项
+* [ ] cascader 级联选择器
 * [x] checkbox 复选框
   * [x] checkbox-button 复选框-按钮
   * [x] checkbox-group 复选框-组
@@ -107,6 +109,7 @@
 * [x] link 链接
 * [x] list 虚拟列表
 * [x] loading 加载中
+* [ ] mention 提及
 * [x] menu 菜单
 * [x] modal 模态窗口
 * [x] number-input 数值输入框
@@ -121,6 +124,7 @@
 * [x] rate 评分
 * [x] result 结果
 * [x] row 行
+* [ ] segmented 分段控制器
 * [x] select 下拉框
   * [x] optgroup 下拉框-分组项
   * [x] option 下拉框-项
@@ -134,6 +138,8 @@
 * [x] text-ellipsis 多行文本溢出
 * [x] table-select 表格下拉框
 * [x] textarea 文本域
+* [ ] timeline 时间线
+  * [ ] timeline-item 时间线-项
 * [x] tip 提示
 * [x] tooltip 文字提示
 * [x] tree 树形组件

package/es/backtop/index.js

@@ -0,0 +1,12 @@
+import { VxeUI } from '@vxe-ui/core';
+import VxeBacktopComponent from './src/backtop';
+import { dynamicApp } from '../dynamics';
+export const VxeBacktop = Object.assign({}, VxeBacktopComponent, {
+    install(app) {
+        app.component(VxeBacktopComponent.name, VxeBacktopComponent);
+    }
+});
+dynamicApp.use(VxeBacktop);
+VxeUI.component(VxeBacktopComponent);
+export const Backtop = VxeBacktop;
+export default VxeBacktop;

package/es/backtop/src/backtop.js

@@ -0,0 +1,231 @@
+import { ref, h, reactive, watch, onMounted, nextTick, computed, onBeforeUnmount, onUnmounted } from 'vue';
+import { defineVxeComponent } from '../../ui/src/comp';
+import XEUtils from 'xe-utils';
+import { getConfig, getIcon, createEvent, useSize, renderEmptyElement } from '../../ui';
+import { errLog } from '../../ui/src/log';
+import { toCssUnit } from '../../ui/src/dom';
+function createInternalData() {
+    return {
+        targetEl: null
+    };
+}
+function createReactData() {
+    return {
+        showBtn: false
+    };
+}
+export default defineVxeComponent({
+    name: 'VxeBacktop',
+    props: {
+        target: String,
+        size: {
+            type: String,
+            default: () => getConfig().backtop.size || getConfig().size
+        },
+        circle: {
+            type: Boolean,
+            default: () => getConfig().backtop.circle
+        },
+        right: {
+            type: [String, Number],
+            default: () => getConfig().backtop.right
+        },
+        bottom: {
+            type: [String, Number],
+            default: () => getConfig().backtop.bottom
+        },
+        status: {
+            type: [String, Number],
+            default: () => getConfig().backtop.status
+        },
+        icon: {
+            type: String,
+            default: () => getConfig().backtop.icon
+        },
+        showIcon: {
+            type: Boolean,
+            default: () => getConfig().backtop.showIcon
+        },
+        content: {
+            type: [String, Number],
+            default: () => getConfig().backtop.content
+        },
+        showContent: {
+            type: Boolean,
+            default: () => getConfig().backtop.showContent
+        },
+        zIndex: {
+            type: [String, Number],
+            default: () => getConfig().backtop.zIndex
+        },
+        threshold: {
+            type: [String, Number],
+            default: () => getConfig().backtop.threshold
+        },
+        position: {
+            type: String,
+            default: () => getConfig().backtop.position
+        }
+    },
+    emits: [
+        'click'
+    ],
+    setup(props, context) {
+        const { slots, emit } = context;
+        const xID = XEUtils.uniqueId();
+        const refElem = ref();
+        const { computeSize } = useSize(props);
+        const internalData = createInternalData();
+        const reactData = reactive(createReactData());
+        const refMaps = {
+            refElem
+        };
+        const computeWrapperStyle = computed(() => {
+            const { right, bottom, zIndex } = props;
+            const stys = {};
+            if (right) {
+                stys.right = toCssUnit(right);
+            }
+            if (bottom) {
+                stys.bottom = toCssUnit(bottom);
+            }
+            if (zIndex) {
+                stys.zIndex = zIndex;
+            }
+            return stys;
+        });
+        const computeMaps = {};
+        const $xeBacktop = {
+            xID,
+            props,
+            context,
+            internalData,
+            reactData,
+            getRefMaps: () => refMaps,
+            getComputeMaps: () => computeMaps
+        };
+        const dispatchEvent = (type, params, evnt) => {
+            emit(type, createEvent(evnt, { $backtop: $xeBacktop }, params));
+        };
+        const handleScrollEvent = (evnt) => {
+            const { threshold } = props;
+            const currentEl = evnt.currentTarget;
+            const scrollTop = currentEl.scrollTop;
+            reactData.showBtn = scrollTop > Math.max(1, XEUtils.toNumber(threshold));
+        };
+        const handleToTop = () => {
+            const { targetEl } = internalData;
+            if (!targetEl) {
+                return;
+            }
+            const scrollTop = targetEl.scrollTop;
+            if (scrollTop > 0) {
+                requestAnimationFrame(handleToTop);
+                const currScrollTop = scrollTop - Math.max(12, scrollTop / 6);
+                targetEl.scrollTop = currScrollTop > 10 ? currScrollTop : 0;
+            }
+        };
+        const removeScrollEvent = () => {
+            const { targetEl } = internalData;
+            if (targetEl) {
+                targetEl.removeEventListener('scroll', handleScrollEvent);
+            }
+        };
+        const addScrollEvent = () => {
+            const { targetEl } = internalData;
+            if (targetEl) {
+                targetEl.addEventListener('scroll', handleScrollEvent, { passive: true });
+            }
+        };
+        const handleTargetElement = () => {
+            nextTick(() => {
+                const { target } = props;
+                if (!target) {
+                    removeScrollEvent();
+                    errLog('vxe.error.reqProp', ['target']);
+                    return;
+                }
+                if (XEUtils.isString(target)) {
+                    const tEl = document.querySelector(target);
+                    if (!tEl) {
+                        errLog('vxe.error.errProp', [`target=${target}`, 'body']);
+                    }
+                    const { targetEl } = internalData;
+                    if (targetEl !== tEl) {
+                        removeScrollEvent();
+                        internalData.targetEl = tEl;
+                        addScrollEvent();
+                    }
+                }
+            });
+        };
+        const clickEvent = (evnt) => {
+            handleToTop();
+            dispatchEvent('click', {}, evnt);
+        };
+        const tagMethods = {
+            dispatchEvent
+        };
+        const tagPrivateMethods = {};
+        Object.assign($xeBacktop, tagMethods, tagPrivateMethods);
+        const renderVN = () => {
+            const { circle, position, status, icon, showIcon, content, showContent } = props;
+            const { showBtn } = reactData;
+            const wrapperStyle = computeWrapperStyle.value;
+            const vSize = computeSize.value;
+            const defaultSlot = slots.default;
+            return h('div', {
+                ref: refElem,
+                class: ['vxe-backtop', position === 'fixed' ? ('is--' + position) : 'is--absolute', {
+                        [`size--${vSize}`]: vSize,
+                        [`theme--${status}`]: status,
+                        'is--circle': circle,
+                        'is--visible': showBtn
+                    }],
+                style: wrapperStyle,
+                onClick: clickEvent
+            }, [
+                h('div', {
+                    class: 'vxe-backtop--inner'
+                }, [
+                    defaultSlot
+                        ? defaultSlot({})
+                        : [
+                            showIcon
+                                ? h('div', {
+                                    class: 'vxe-backtop--icon'
+                                }, [
+                                    h('i', {
+                                        class: icon || getIcon().BACKTOP_TOP
+                                    })
+                                ])
+                                : renderEmptyElement($xeBacktop),
+                            showContent
+                                ? h('div', {
+                                    class: 'vxe-backtop--content'
+                                }, `${content || ''}`)
+                                : renderEmptyElement($xeBacktop)
+                        ]
+                ])
+            ]);
+        };
+        watch(() => props.target, () => {
+            handleTargetElement();
+        });
+        onMounted(() => {
+            handleTargetElement();
+        });
+        onBeforeUnmount(() => {
+            removeScrollEvent();
+            XEUtils.assign(reactData, createReactData());
+        });
+        onUnmounted(() => {
+            XEUtils.assign(internalData, createInternalData());
+        });
+        $xeBacktop.renderVN = renderVN;
+        return $xeBacktop;
+    },
+    render() {
+        return this.renderVN();
+    }
+});

package/es/backtop/style.css

@@ -0,0 +1,90 @@
+.vxe-backtop {
+  display: inline-flex;
+  position: absolute;
+  opacity: 0;
+  right: 1.6em;
+  bottom: 1.6em;
+  color: var(--vxe-ui-font-color);
+  font-family: var(--vxe-ui-font-family);
+  background-color: var(--vxe-ui-layout-background-color);
+  border-radius: var(--vxe-ui-base-border-radius);
+  transition: all 0.3s;
+  cursor: pointer;
+  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);
+  z-index: 9;
+}
+.vxe-backtop.is--visible {
+  opacity: 1;
+}
+.vxe-backtop.is--circle {
+  border-radius: 50%;
+}
+.vxe-backtop.is--circle .vxe-backtop--inner {
+  border-radius: 50%;
+}
+.vxe-backtop.is--fixed {
+  position: fixed;
+}
+.vxe-backtop.is--absolute {
+  position: absolute;
+}
+
+.vxe-backtop--inner {
+  min-width: 3em;
+  min-height: 3em;
+  padding: 0.4em;
+  display: flex;
+  text-align: center;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--vxe-ui-base-border-radius);
+}
+
+.vxe-backtop:hover {
+  color: var(--vxe-ui-font-primary-color);
+}
+.vxe-backtop:hover .vxe-backtop--inner {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+.vxe-backtop.theme--primary {
+  color: #fff;
+  background-color: var(--vxe-ui-font-primary-color);
+}
+.vxe-backtop.theme--success {
+  color: #fff;
+  background-color: var(--vxe-ui-status-success-color);
+}
+.vxe-backtop.theme--info {
+  color: #fff;
+  background-color: var(--vxe-ui-status-info-color);
+}
+.vxe-backtop.theme--warning {
+  color: #fff;
+  background-color: var(--vxe-ui-status-warning-color);
+}
+.vxe-backtop.theme--danger {
+  color: #fff;
+  background-color: var(--vxe-ui-status-danger-color);
+}
+.vxe-backtop.theme--error {
+  color: #fff;
+  background-color: var(--vxe-ui-status-error-color);
+}
+
+.vxe-backtop--icon {
+  font-size: 1.4em;
+}
+
+.vxe-backtop {
+  font-size: var(--vxe-ui-font-size-default);
+}
+.vxe-backtop.size--medium {
+  font-size: var(--vxe-ui-font-size-medium);
+}
+.vxe-backtop.size--small {
+  font-size: var(--vxe-ui-font-size-small);
+}
+.vxe-backtop.size--mini {
+  font-size: var(--vxe-ui-font-size-mini);
+}

package/es/backtop/style.min.css

@@ -0,0 +1 @@
+.vxe-backtop{display:inline-flex;position:absolute;opacity:0;right:1.6em;bottom:1.6em;color:var(--vxe-ui-font-color);font-family:var(--vxe-ui-font-family);background-color:var(--vxe-ui-layout-background-color);border-radius:var(--vxe-ui-base-border-radius);transition:all .3s;cursor:pointer;box-shadow:0 0 6px rgba(0,0,0,.3);z-index:9}.vxe-backtop.is--visible{opacity:1}.vxe-backtop.is--circle{border-radius:50%}.vxe-backtop.is--circle .vxe-backtop--inner{border-radius:50%}.vxe-backtop.is--fixed{position:fixed}.vxe-backtop.is--absolute{position:absolute}.vxe-backtop--inner{min-width:3em;min-height:3em;padding:.4em;display:flex;text-align:center;flex-direction:column;align-items:center;justify-content:center;border-radius:var(--vxe-ui-base-border-radius)}.vxe-backtop:hover{color:var(--vxe-ui-font-primary-color)}.vxe-backtop:hover .vxe-backtop--inner{background-color:rgba(0,0,0,.1)}.vxe-backtop.theme--primary{color:#fff;background-color:var(--vxe-ui-font-primary-color)}.vxe-backtop.theme--success{color:#fff;background-color:var(--vxe-ui-status-success-color)}.vxe-backtop.theme--info{color:#fff;background-color:var(--vxe-ui-status-info-color)}.vxe-backtop.theme--warning{color:#fff;background-color:var(--vxe-ui-status-warning-color)}.vxe-backtop.theme--danger{color:#fff;background-color:var(--vxe-ui-status-danger-color)}.vxe-backtop.theme--error{color:#fff;background-color:var(--vxe-ui-status-error-color)}.vxe-backtop--icon{font-size:1.4em}.vxe-backtop{font-size:var(--vxe-ui-font-size-default)}.vxe-backtop.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-backtop.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-backtop.size--mini{font-size:var(--vxe-ui-font-size-mini)}

package/es/cascader/index.js

@@ -0,0 +1,12 @@
+import { VxeUI } from '@vxe-ui/core';
+import VxeCascaderComponent from './src/cascader';
+import { dynamicApp } from '../dynamics';
+export const VxeCascader = Object.assign({}, VxeCascaderComponent, {
+    install(app) {
+        app.component(VxeCascaderComponent.name, VxeCascaderComponent);
+    }
+});
+dynamicApp.use(VxeCascader);
+VxeUI.component(VxeCascaderComponent);
+export const Cascader = VxeCascader;
+export default VxeCascader;