vxe-pc-ui 3.0.0 → 3.0.1

package/es/button/src/button.js

@@ -94,6 +94,9 @@ export default defineVxeComponent({
         $xeModal: {
             default: null
         },
+        $xeDrawer: {
+            default: null
+        },
         $xeTable: {
             default: null
         },

package/es/carousel/index.js

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

package/es/carousel/src/carousel-item.js

@@ -0,0 +1,100 @@
+import { defineVxeComponent } from '../../ui/src/comp';
+import XEUtils from 'xe-utils';
+import { globalMixins, createEvent } from '../../ui';
+import { assembleCarouselItem, destroyCarouselItem } from './util';
+export default defineVxeComponent({
+    name: 'VxeCarouselItem',
+    mixins: [
+        globalMixins.sizeMixin
+    ],
+    props: {
+        name: [String, Number],
+        className: String,
+        url: String
+    },
+    inject: {
+        $xeCarousel: {
+            default: null
+        }
+    },
+    data() {
+        const xID = XEUtils.uniqueId();
+        const reactData = {
+            currentDate: null
+        };
+        const itemConfig = {
+            id: xID,
+            name: '',
+            url: '',
+            className: '',
+            slots: {}
+        };
+        return {
+            xID,
+            reactData,
+            itemConfig
+        };
+    },
+    computed: Object.assign({}, {}),
+    methods: {
+        //
+        // Method
+        //
+        dispatchEvent(type, params, evnt) {
+            const $xeCarouselItem = this;
+            $xeCarouselItem.$emit(type, createEvent(evnt, { $carouselItem: $xeCarouselItem }, params));
+        },
+        //
+        // Render
+        //
+        renderVN(h) {
+            return h('div', {
+                ref: 'refElem'
+            });
+        }
+    },
+    watch: {
+        name(val) {
+            const $xeCarouselItem = this;
+            const itemConfig = $xeCarouselItem.itemConfig;
+            itemConfig.name = val;
+        },
+        url(val) {
+            const $xeCarouselItem = this;
+            const itemConfig = $xeCarouselItem.itemConfig;
+            itemConfig.url = val;
+        }
+    },
+    created() {
+        const $xeCarouselItem = this;
+        const props = $xeCarouselItem;
+        const slots = $xeCarouselItem.$scopedSlots;
+        const itemConfig = $xeCarouselItem.itemConfig;
+        Object.assign(itemConfig, {
+            name: props.name,
+            url: props.url,
+            className: props.className,
+            slots
+        });
+    },
+    mounted() {
+        const $xeCarouselItem = this;
+        const itemConfig = $xeCarouselItem.itemConfig;
+        const $xeCarousel = $xeCarouselItem.$xeCarousel;
+        const elem = $xeCarouselItem.$refs.refElem;
+        if ($xeCarousel && elem) {
+            assembleCarouselItem($xeCarousel, elem, itemConfig);
+        }
+    },
+    beforeDestroy() {
+        const $xeCarouselItem = this;
+        const itemConfig = $xeCarouselItem.itemConfig;
+        const $xeCarousel = $xeCarouselItem.$xeCarousel;
+        if ($xeCarousel) {
+            destroyCarouselItem($xeCarousel, itemConfig);
+        }
+    },
+    render(h) {
+        return this.renderVN(h);
+    }
+});

package/es/carousel/src/carousel.js

@@ -0,0 +1,418 @@
+import { defineVxeComponent } from '../../ui/src/comp';
+import XEUtils from 'xe-utils';
+import { getConfig, getIcon, createEvent, globalMixins, renderEmptyElement } from '../../ui';
+import { getSlotVNs } from '../../ui/src/vn';
+import { toCssUnit } from '../..//ui/src/dom';
+import VxeLoadingComponent from '../../loading/src/loading';
+export default defineVxeComponent({
+    name: 'VxeCarousel',
+    mixins: [
+        globalMixins.sizeMixin
+    ],
+    props: {
+        value: [String, Number],
+        options: Array,
+        loading: Boolean,
+        height: {
+            type: [Number, String],
+            default: () => getConfig().carousel.height
+        },
+        width: {
+            type: [Number, String],
+            default: () => getConfig().carousel.width
+        },
+        autoPlay: {
+            type: Boolean,
+            default: () => getConfig().carousel.autoPlay
+        },
+        interval: {
+            type: [Number, String],
+            default: () => getConfig().carousel.interval
+        },
+        loop: {
+            type: Boolean,
+            default: () => getConfig().carousel.loop
+        },
+        vertical: {
+            type: Boolean,
+            default: () => getConfig().carousel.vertical
+        },
+        showIndicators: {
+            type: Boolean,
+            default: () => getConfig().carousel.showIndicators
+        }
+    },
+    data() {
+        const xID = XEUtils.uniqueId();
+        const reactData = {
+            activeName: '',
+            staticItems: [],
+            itemWidth: 0,
+            itemHeight: 0
+        };
+        const internalData = {
+            apTimeout: undefined,
+            stopFlag: false
+        };
+        return {
+            xID,
+            reactData,
+            internalData
+        };
+    },
+    provide() {
+        const $xeCarousel = this;
+        return {
+            $xeCarousel
+        };
+    },
+    computed: Object.assign(Object.assign({}, {}), { computeListStyle() {
+            const $xeCarousel = this;
+            const props = $xeCarousel;
+            const reactData = $xeCarousel.reactData;
+            const { vertical, options } = props;
+            const { activeName, itemWidth, itemHeight, staticItems } = reactData;
+            const list = (staticItems && staticItems.length ? staticItems : options) || [];
+            const activeIndex = Math.max(0, XEUtils.findIndexOf(list, item => item.name === activeName));
+            const stys = {};
+            if (vertical) {
+                stys.transform = `translateY(-${activeIndex * itemHeight}px)`;
+            }
+            else {
+                stys.width = `${itemWidth * list.length}px`;
+                stys.transform = `translateX(-${activeIndex * itemWidth}px)`;
+            }
+            return stys;
+        } }),
+    methods: {
+        //
+        // Method
+        //
+        dispatchEvent(type, params, evnt) {
+            const $xeCarousel = this;
+            $xeCarousel.$emit(type, createEvent(evnt, { $carousel: $xeCarousel }, params));
+        },
+        prev() {
+            const $xeCarousel = this;
+            if ($xeCarousel.handlePrevNext(false)) {
+                $xeCarousel.handleAutoPlay();
+            }
+            return $xeCarousel.$nextTick();
+        },
+        next() {
+            const $xeCarousel = this;
+            if ($xeCarousel.handlePrevNext(true)) {
+                $xeCarousel.handleAutoPlay();
+            }
+            return $xeCarousel.$nextTick();
+        },
+        updateStyle() {
+            const $xeCarousel = this;
+            const reactData = $xeCarousel.reactData;
+            $xeCarousel.$nextTick(() => {
+                const wrapperElem = $xeCarousel.$refs.refWrapperElem;
+                if (wrapperElem) {
+                    reactData.itemWidth = wrapperElem.clientWidth;
+                    reactData.itemHeight = wrapperElem.clientHeight;
+                }
+            });
+        },
+        clickItemEvent(evnt, item) {
+            const $xeCarousel = this;
+            const reactData = $xeCarousel.reactData;
+            const value = item.name;
+            reactData.activeName = item.name;
+            $xeCarousel.$emit('input', value);
+            $xeCarousel.$emit('change', { value }, evnt);
+            $xeCarousel.updateStyle();
+        },
+        initDefaultActive(list) {
+            const $xeCarousel = this;
+            const props = $xeCarousel;
+            const reactData = $xeCarousel.reactData;
+            let activeName = null;
+            if (list && list.length) {
+                let validVal = false;
+                activeName = props.value;
+                list.forEach((item) => {
+                    if (activeName === item.name) {
+                        validVal = true;
+                    }
+                });
+                if (!validVal) {
+                    activeName = list[0].name;
+                    $xeCarousel.$emit('input', activeName);
+                }
+            }
+            reactData.activeName = activeName;
+        },
+        handlePrevNext(isNext) {
+            const $xeCarousel = this;
+            const props = $xeCarousel;
+            const reactData = $xeCarousel.reactData;
+            const { options, loop } = props;
+            const { activeName, staticItems } = reactData;
+            const list = (staticItems && staticItems.length ? staticItems : options) || [];
+            const index = Math.max(0, XEUtils.findIndexOf(list, item => item.name === activeName));
+            if (index > -1) {
+                let item = null;
+                if (isNext) {
+                    if (index < list.length - 1) {
+                        item = list[index + 1];
+                    }
+                    else {
+                        if (loop) {
+                            item = list[0];
+                        }
+                    }
+                }
+                else {
+                    if (index > 0) {
+                        item = list[index - 1];
+                    }
+                    else {
+                        if (loop) {
+                            item = list[list.length - 1];
+                        }
+                    }
+                }
+                if (item) {
+                    const name = item.name;
+                    const value = name;
+                    reactData.activeName = name;
+                    $xeCarousel.$emit('input', value);
+                    return true;
+                }
+            }
+            return false;
+        },
+        prevEvent(evnt) {
+            const $xeCarousel = this;
+            const reactData = $xeCarousel.reactData;
+            if ($xeCarousel.handlePrevNext(false)) {
+                const value = reactData.activeName;
+                $xeCarousel.$emit('change', { value }, evnt);
+            }
+        },
+        nextEvent(evnt) {
+            const $xeCarousel = this;
+            const reactData = $xeCarousel.reactData;
+            if ($xeCarousel.handlePrevNext(true)) {
+                const value = reactData.activeName;
+                $xeCarousel.$emit('change', { value }, evnt);
+            }
+        },
+        stopAutoPlay() {
+            const $xeCarousel = this;
+            const internalData = $xeCarousel.internalData;
+            const { apTimeout } = internalData;
+            internalData.stopFlag = true;
+            if (apTimeout) {
+                clearTimeout(apTimeout);
+                internalData.apTimeout = undefined;
+            }
+        },
+        handleAutoPlay() {
+            const $xeCarousel = this;
+            const props = $xeCarousel;
+            const internalData = $xeCarousel.internalData;
+            const { autoPlay, interval } = props;
+            const { stopFlag } = internalData;
+            $xeCarousel.stopAutoPlay();
+            if (autoPlay) {
+                internalData.stopFlag = false;
+                internalData.apTimeout = setTimeout(() => {
+                    if (!stopFlag) {
+                        $xeCarousel.handlePrevNext(true);
+                    }
+                }, XEUtils.toNumber(interval) || 300);
+            }
+        },
+        mouseenterEvent() {
+            const $xeCarousel = this;
+            $xeCarousel.stopAutoPlay();
+        },
+        mouseleaveEvent() {
+            const $xeCarousel = this;
+            $xeCarousel.handleAutoPlay();
+        },
+        callSlot(slotFunc, params) {
+            const $xeCarousel = this;
+            const slots = $xeCarousel.$scopedSlots;
+            if (slotFunc) {
+                if (XEUtils.isString(slotFunc)) {
+                    slotFunc = slots[slotFunc] || null;
+                }
+                if (XEUtils.isFunction(slotFunc)) {
+                    return getSlotVNs(slotFunc(params));
+                }
+            }
+            return [];
+        },
+        //
+        // Render
+        //
+        renderItemWrapper(h, list) {
+            const $xeCarousel = this;
+            const props = $xeCarousel;
+            const reactData = $xeCarousel.reactData;
+            const { height } = props;
+            const { activeName } = reactData;
+            const listStyle = $xeCarousel.computeListStyle;
+            return h('div', {
+                class: 'vxe-carousel--list',
+                style: listStyle
+            }, list.map(item => {
+                const { name, url, slots } = item;
+                const defaultSlot = slots ? slots.default : null;
+                return h('div', {
+                    key: `${name}`,
+                    class: ['vxe-carousel--item-inner', {
+                            'is--active': activeName === name
+                        }],
+                    style: height
+                        ? {
+                            height: toCssUnit(height)
+                        }
+                        : {}
+                }, defaultSlot
+                    ? $xeCarousel.callSlot(defaultSlot, {})
+                    : [
+                        h('img', {
+                            class: 'vxe-carousel--item-img',
+                            attrs: {
+                                src: url
+                            }
+                        })
+                    ]);
+            }));
+        },
+        renderIndicators(h, list) {
+            const $xeCarousel = this;
+            const reactData = $xeCarousel.reactData;
+            const { activeName } = reactData;
+            return h('div', {
+                class: 'vxe-carousel--indicators'
+            }, list.map((item) => {
+                const { name } = item;
+                return h('div', {
+                    key: `${name}`,
+                    class: ['vxe-carousel--indicators-item', {
+                            'is--active': activeName === name
+                        }],
+                    on: {
+                        click(evnt) {
+                            $xeCarousel.clickItemEvent(evnt, item);
+                        }
+                    }
+                });
+            }));
+        },
+        renderVN(h) {
+            const $xeCarousel = this;
+            const props = $xeCarousel;
+            const slots = $xeCarousel.$scopedSlots;
+            const reactData = $xeCarousel.reactData;
+            const { loading, height, width, showIndicators, vertical, options } = props;
+            const { staticItems } = reactData;
+            const defaultSlot = slots.default;
+            const list = (staticItems && staticItems.length ? staticItems : options) || [];
+            return h('div', {
+                ref: 'refElem',
+                class: ['vxe-carousel', `is--${vertical ? 'vertical' : 'horizontal'}`],
+                style: width
+                    ? {
+                        width: toCssUnit(width)
+                    }
+                    : {},
+                on: {
+                    mouseenter: $xeCarousel.mouseenterEvent,
+                    mouseleave: $xeCarousel.mouseleaveEvent
+                }
+            }, [
+                h('div', {
+                    class: 'vxe-carousel--slots'
+                }, defaultSlot ? defaultSlot({}) : []),
+                h('div', {
+                    ref: 'refWrapperElem',
+                    class: 'vxe-carousel--item-wrapper',
+                    style: height
+                        ? {
+                            height: toCssUnit(height)
+                        }
+                        : {}
+                }, [
+                    $xeCarousel.renderItemWrapper(h, list)
+                ]),
+                showIndicators ? $xeCarousel.renderIndicators(h, list) : renderEmptyElement($xeCarousel),
+                h('div', {
+                    class: 'vxe-carousel--btn-wrapper'
+                }, [
+                    h('div', {
+                        class: 'vxe-carousel--previous-btn',
+                        on: {
+                            click: $xeCarousel.prevEvent
+                        }
+                    }, [
+                        h('i', {
+                            class: vertical ? getIcon().CAROUSEL_VERTICAL_PREVIOUS : getIcon().CAROUSEL_HORIZONTAL_PREVIOUS
+                        })
+                    ]),
+                    h('div', {
+                        class: 'vxe-carousel--next-btn',
+                        on: {
+                            click: $xeCarousel.nextEvent
+                        }
+                    }, [
+                        h('i', {
+                            class: vertical ? getIcon().CAROUSEL_VERTICAL_NEXT : getIcon().CAROUSEL_HORIZONTAL_NEXT
+                        })
+                    ])
+                ]),
+                /**
+                 * 加载中
+                 */
+                h(VxeLoadingComponent, {
+                    class: 'vxe-carousel--loading',
+                    props: {
+                        value: loading
+                    }
+                })
+            ]);
+        }
+    },
+    watch: {
+        options() {
+            const $xeCarousel = this;
+            const props = $xeCarousel;
+            $xeCarousel.initDefaultActive(props.options);
+        },
+        'reactData.staticItems'() {
+            const $xeCarousel = this;
+            const reactData = $xeCarousel.reactData;
+            $xeCarousel.initDefaultActive(reactData.staticItems);
+        },
+        autoPlay() {
+            const $xeCarousel = this;
+            $xeCarousel.handleAutoPlay();
+        }
+    },
+    created() {
+        const $xeCarousel = this;
+        const props = $xeCarousel;
+        const reactData = $xeCarousel.reactData;
+        $xeCarousel.initDefaultActive(reactData.staticItems.length ? reactData.staticItems : props.options);
+    },
+    mounted() {
+        const $xeCarousel = this;
+        $xeCarousel.handleAutoPlay();
+        $xeCarousel.updateStyle();
+    },
+    beforeDestroy() {
+        const $xeCarousel = this;
+        $xeCarousel.stopAutoPlay();
+    },
+    render(h) {
+        return this.renderVN(h);
+    }
+});

package/es/carousel/src/util.js

@@ -0,0 +1,17 @@
+import XEUtils from 'xe-utils';
+export function assembleCarouselItem($xeCarousel, elem, itemConfig) {
+    const staticItems = $xeCarousel.reactData.staticItems;
+    const parentElem = elem.parentNode;
+    if (parentElem) {
+        staticItems.splice(XEUtils.arrayIndexOf(parentElem.children, elem), 0, itemConfig);
+    }
+    $xeCarousel.reactData.staticItems = staticItems.slice(0);
+}
+export function destroyCarouselItem($xeCarousel, itemConfig) {
+    const staticItems = $xeCarousel.reactData.staticItems;
+    const index = XEUtils.findIndexOf(staticItems, item => item.id === itemConfig.id);
+    if (index > -1) {
+        staticItems.splice(index, 1);
+    }
+    $xeCarousel.reactData.staticItems = staticItems.slice(0);
+}