vxe-pc-ui 3.0.0 → 3.0.2

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);
+}

package/es/carousel/style.css

@@ -0,0 +1,185 @@
+.vxe-carousel {
+  position: relative;
+  font-size: var(--vxe-ui-font-size-default);
+  color: var(--vxe-ui-font-color);
+  font-family: var(--vxe-ui-font-family);
+  background-color: var(--vxe-ui-layout-background-color);
+  overflow: hidden;
+}
+.vxe-carousel:hover .vxe-carousel--indicators {
+  opacity: 1;
+}
+.vxe-carousel:hover .vxe-carousel--previous-btn,
+.vxe-carousel:hover .vxe-carousel--next-btn {
+  opacity: 1;
+}
+.vxe-carousel:hover.is--horizontal .vxe-carousel--previous-btn,
+.vxe-carousel:hover.is--horizontal .vxe-carousel--next-btn {
+  transform: translate(0, -50%);
+}
+.vxe-carousel:hover.is--vertical .vxe-carousel--previous-btn,
+.vxe-carousel:hover.is--vertical .vxe-carousel--next-btn {
+  transform: translate(-50%, 0);
+}
+.vxe-carousel.is--horizontal .vxe-carousel--list {
+  height: 100%;
+  flex-direction: row;
+}
+.vxe-carousel.is--horizontal .vxe-carousel--indicators {
+  flex-direction: row;
+  bottom: 0.3em;
+  left: 50%;
+  padding: 0.15em 0.3em;
+  transform: translateX(-50%);
+}
+.vxe-carousel.is--horizontal .vxe-carousel--indicators:hover {
+  transform: translateX(-50%) scale(1.1);
+}
+.vxe-carousel.is--horizontal .vxe-carousel--indicators-item {
+  margin: 0.2em 0.25em;
+}
+.vxe-carousel.is--horizontal .vxe-carousel--previous-btn,
+.vxe-carousel.is--horizontal .vxe-carousel--next-btn {
+  top: 50%;
+  transform: translate(0, -50%);
+}
+.vxe-carousel.is--horizontal .vxe-carousel--previous-btn:hover,
+.vxe-carousel.is--horizontal .vxe-carousel--next-btn:hover {
+  transform: translate(0, -50%) scale(1.1);
+}
+.vxe-carousel.is--horizontal .vxe-carousel--previous-btn:active,
+.vxe-carousel.is--horizontal .vxe-carousel--next-btn:active {
+  transform: translate(0, -50%) scale(0.8);
+}
+.vxe-carousel.is--horizontal .vxe-carousel--previous-btn {
+  left: 0.3em;
+  transform: translate(-0.8em, -50%);
+}
+.vxe-carousel.is--horizontal .vxe-carousel--next-btn {
+  right: 0.3em;
+  transform: translate(0.8em, -50%);
+}
+.vxe-carousel.is--vertical .vxe-carousel--list {
+  width: 100%;
+  flex-direction: column;
+}
+.vxe-carousel.is--vertical .vxe-carousel--indicators {
+  display: flex;
+  flex-direction: column;
+  padding: 0.3em 0.15em;
+  top: 50%;
+  right: 0.3em;
+  transform: translateY(-50%);
+}
+.vxe-carousel.is--vertical .vxe-carousel--indicators:hover {
+  transform: translateY(-50%) scale(1.1);
+}
+.vxe-carousel.is--vertical .vxe-carousel--indicators-item {
+  margin: 0.25em 0.2em;
+}
+.vxe-carousel.is--vertical .vxe-carousel--previous-btn,
+.vxe-carousel.is--vertical .vxe-carousel--next-btn {
+  left: 50%;
+}
+.vxe-carousel.is--vertical .vxe-carousel--previous-btn:hover,
+.vxe-carousel.is--vertical .vxe-carousel--next-btn:hover {
+  transform: translate(-50%, 0) scale(1.1);
+}
+.vxe-carousel.is--vertical .vxe-carousel--previous-btn:active,
+.vxe-carousel.is--vertical .vxe-carousel--next-btn:active {
+  transform: translate(-50%, 0) scale(0.8);
+}
+.vxe-carousel.is--vertical .vxe-carousel--previous-btn {
+  top: 0.3em;
+  transform: translate(-50%, -0.8em);
+}
+.vxe-carousel.is--vertical .vxe-carousel--next-btn {
+  bottom: 0.3em;
+  transform: translate(-50%, 0.8em);
+}
+
+.vxe-carousel--slots {
+  display: none;
+}
+
+.vxe-carousel--item-wrapper {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+}
+
+.vxe-carousel--list {
+  position: absolute;
+  left: 0;
+  top: 0;
+  display: flex;
+  outline: 0;
+  transition: transform 0.2s ease-in-out;
+}
+
+.vxe-carousel--item-inner {
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  flex-grow: 1;
+}
+
+.vxe-carousel--item-img {
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.vxe-carousel--indicators {
+  position: absolute;
+  display: inline-flex;
+  background-color: rgba(0, 0, 0, 0.6);
+  border-radius: 0.6em;
+  opacity: 0;
+  transition: all 0.3s ease-in-out;
+}
+
+.vxe-carousel--indicators-item {
+  width: 0.8em;
+  height: 0.8em;
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 0.8);
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+}
+.vxe-carousel--indicators-item.is--active {
+  background-color: rgb(255, 255, 255);
+}
+.vxe-carousel--indicators-item:hover {
+  background-color: rgba(255, 255, 255, 0.9);
+}
+.vxe-carousel--indicators-item:active {
+  background-color: var(--vxe-ui-font-primary-color);
+  transform: scale(0.8);
+}
+
+.vxe-carousel--previous-btn,
+.vxe-carousel--next-btn {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  width: 1.8em;
+  height: 1.8em;
+  border-radius: 50%;
+  font-size: 1.4em;
+  background-color: rgba(0, 0, 0, 0.8);
+  opacity: 0;
+  color: rgba(255, 255, 255, 0.6);
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+}
+.vxe-carousel--previous-btn:hover,
+.vxe-carousel--next-btn:hover {
+  color: rgb(255, 255, 255);
+}
+.vxe-carousel--previous-btn:active,
+.vxe-carousel--next-btn:active {
+  color: var(--vxe-ui-font-primary-color);
+  background-color: rgba(0, 0, 0, 0.6);
+}

package/es/carousel/style.min.css

@@ -0,0 +1 @@
+.vxe-carousel{position:relative;font-size:var(--vxe-ui-font-size-default);color:var(--vxe-ui-font-color);font-family:var(--vxe-ui-font-family);background-color:var(--vxe-ui-layout-background-color);overflow:hidden}.vxe-carousel:hover .vxe-carousel--indicators{opacity:1}.vxe-carousel:hover .vxe-carousel--next-btn,.vxe-carousel:hover .vxe-carousel--previous-btn{opacity:1}.vxe-carousel:hover.is--horizontal .vxe-carousel--next-btn,.vxe-carousel:hover.is--horizontal .vxe-carousel--previous-btn{transform:translate(0,-50%)}.vxe-carousel:hover.is--vertical .vxe-carousel--next-btn,.vxe-carousel:hover.is--vertical .vxe-carousel--previous-btn{transform:translate(-50%,0)}.vxe-carousel.is--horizontal .vxe-carousel--list{height:100%;flex-direction:row}.vxe-carousel.is--horizontal .vxe-carousel--indicators{flex-direction:row;bottom:.3em;left:50%;padding:.15em .3em;transform:translateX(-50%)}.vxe-carousel.is--horizontal .vxe-carousel--indicators:hover{transform:translateX(-50%) scale(1.1)}.vxe-carousel.is--horizontal .vxe-carousel--indicators-item{margin:.2em .25em}.vxe-carousel.is--horizontal .vxe-carousel--next-btn,.vxe-carousel.is--horizontal .vxe-carousel--previous-btn{top:50%;transform:translate(0,-50%)}.vxe-carousel.is--horizontal .vxe-carousel--next-btn:hover,.vxe-carousel.is--horizontal .vxe-carousel--previous-btn:hover{transform:translate(0,-50%) scale(1.1)}.vxe-carousel.is--horizontal .vxe-carousel--next-btn:active,.vxe-carousel.is--horizontal .vxe-carousel--previous-btn:active{transform:translate(0,-50%) scale(.8)}.vxe-carousel.is--horizontal .vxe-carousel--previous-btn{left:.3em;transform:translate(-.8em,-50%)}.vxe-carousel.is--horizontal .vxe-carousel--next-btn{right:.3em;transform:translate(.8em,-50%)}.vxe-carousel.is--vertical .vxe-carousel--list{width:100%;flex-direction:column}.vxe-carousel.is--vertical .vxe-carousel--indicators{display:flex;flex-direction:column;padding:.3em .15em;top:50%;right:.3em;transform:translateY(-50%)}.vxe-carousel.is--vertical .vxe-carousel--indicators:hover{transform:translateY(-50%) scale(1.1)}.vxe-carousel.is--vertical .vxe-carousel--indicators-item{margin:.25em .2em}.vxe-carousel.is--vertical .vxe-carousel--next-btn,.vxe-carousel.is--vertical .vxe-carousel--previous-btn{left:50%}.vxe-carousel.is--vertical .vxe-carousel--next-btn:hover,.vxe-carousel.is--vertical .vxe-carousel--previous-btn:hover{transform:translate(-50%,0) scale(1.1)}.vxe-carousel.is--vertical .vxe-carousel--next-btn:active,.vxe-carousel.is--vertical .vxe-carousel--previous-btn:active{transform:translate(-50%,0) scale(.8)}.vxe-carousel.is--vertical .vxe-carousel--previous-btn{top:.3em;transform:translate(-50%,-.8em)}.vxe-carousel.is--vertical .vxe-carousel--next-btn{bottom:.3em;transform:translate(-50%,.8em)}.vxe-carousel--slots{display:none}.vxe-carousel--item-wrapper{position:relative;width:100%;overflow:hidden}.vxe-carousel--list{position:absolute;left:0;top:0;display:flex;outline:0;transition:transform .2s ease-in-out}.vxe-carousel--item-inner{width:100%;height:100%;text-align:center;flex-grow:1}.vxe-carousel--item-img{max-width:100%;max-height:100%}.vxe-carousel--indicators{position:absolute;display:inline-flex;background-color:rgba(0,0,0,.6);border-radius:.6em;opacity:0;transition:all .3s ease-in-out}.vxe-carousel--indicators-item{width:.8em;height:.8em;border-radius:50%;background-color:rgba(255,255,255,.8);cursor:pointer;transition:all .2s ease-in-out}.vxe-carousel--indicators-item.is--active{background-color:#fff}.vxe-carousel--indicators-item:hover{background-color:rgba(255,255,255,.9)}.vxe-carousel--indicators-item:active{background-color:var(--vxe-ui-font-primary-color);transform:scale(.8)}.vxe-carousel--next-btn,.vxe-carousel--previous-btn{display:flex;flex-direction:row;align-items:center;justify-content:center;position:absolute;width:1.8em;height:1.8em;border-radius:50%;font-size:1.4em;background-color:rgba(0,0,0,.8);opacity:0;color:rgba(255,255,255,.6);cursor:pointer;transition:all .2s ease-in-out}.vxe-carousel--next-btn:hover,.vxe-carousel--previous-btn:hover{color:#fff}.vxe-carousel--next-btn:active,.vxe-carousel--previous-btn:active{color:var(--vxe-ui-font-primary-color);background-color:rgba(0,0,0,.6)}

package/es/carousel-item/index.js

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

package/es/checkbox/index.js

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