vxe-pc-ui 3.0.0 → 3.0.2

package/lib/carousel/src/carousel.js

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

package/lib/carousel/src/carousel.min.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_vn=require("../../ui/src/vn"),_dom=require("../..//ui/src/dom"),_loading=_interopRequireDefault(require("../../loading/src/loading"));function _interopRequireDefault(t){return t&&t.__esModule?t:{default:t}}var _default2=exports.default=(0,_comp.defineVxeComponent)({name:"VxeCarousel",mixins:[_ui.globalMixins.sizeMixin],props:{value:[String,Number],options:Array,loading:Boolean,height:{type:[Number,String],default:function(){return(0,_ui.getConfig)().carousel.height}},width:{type:[Number,String],default:function(){return(0,_ui.getConfig)().carousel.width}},autoPlay:{type:Boolean,default:function(){return(0,_ui.getConfig)().carousel.autoPlay}},interval:{type:[Number,String],default:function(){return(0,_ui.getConfig)().carousel.interval}},loop:{type:Boolean,default:function(){return(0,_ui.getConfig)().carousel.loop}},vertical:{type:Boolean,default:function(){return(0,_ui.getConfig)().carousel.vertical}},showIndicators:{type:Boolean,default:function(){return(0,_ui.getConfig)().carousel.showIndicators}}},data:function(){return{xID:_xeUtils.default.uniqueId(),reactData:{activeName:"",staticItems:[],itemWidth:0,itemHeight:0},internalData:{apTimeout:void 0,stopFlag:!1}}},provide:function(){return{$xeCarousel:this}},computed:Object.assign(Object.assign({},{}),{computeListStyle:function(){var t=this.reactData,e=this.vertical,i=this.options,a=t.activeName,n=t.itemWidth,r=t.itemHeight,t=t.staticItems,t=(t&&t.length?t:i)||[],i=Math.max(0,_xeUtils.default.findIndexOf(t,function(t){return t.name===a})),o={};return e?o.transform="translateY(-".concat(i*r,"px)"):(o.width="".concat(n*t.length,"px"),o.transform="translateX(-".concat(i*n,"px)")),o}}),methods:{dispatchEvent:function(t,e,i){this.$emit(t,(0,_ui.createEvent)(i,{$carousel:this},e))},prev:function(){var t=this;return t.handlePrevNext(!1)&&t.handleAutoPlay(),t.$nextTick()},next:function(){var t=this;return t.handlePrevNext(!0)&&t.handleAutoPlay(),t.$nextTick()},updateStyle:function(){var e=this,i=e.reactData;e.$nextTick(function(){var t=e.$refs.refWrapperElem;t&&(i.itemWidth=t.clientWidth,i.itemHeight=t.clientHeight)})},clickItemEvent:function(t,e){var i=this,a=i.reactData,n=e.name;a.activeName=e.name,i.$emit("input",n),i.$emit("change",{value:n},t),i.updateStyle()},initDefaultActive:function(t){var e,i=this,a=i.reactData,n=null;t&&t.length&&(e=!1,n=i.value,t.forEach(function(t){n===t.name&&(e=!0)}),e||(n=t[0].name,i.$emit("input",n))),a.activeName=n},handlePrevNext:function(t){var e=this.reactData,i=this.options,a=this.loop,n=e.activeName,r=e.staticItems,r=(r&&r.length?r:i)||[],i=Math.max(0,_xeUtils.default.findIndexOf(r,function(t){return t.name===n}));if(-1<i){var o=null;if(t?i<r.length-1?o=r[i+1]:a&&(o=r[0]):0<i?o=r[i-1]:a&&(o=r[r.length-1]),o)return t=o.name,e.activeName=t,this.$emit("input",t),!0}return!1},prevEvent:function(t){var e=this.reactData;this.handlePrevNext(!1)&&(e=e.activeName,this.$emit("change",{value:e},t))},nextEvent:function(t){var e=this.reactData;this.handlePrevNext(!0)&&(e=e.activeName,this.$emit("change",{value:e},t))},stopAutoPlay:function(){var t=this.internalData,e=t.apTimeout;t.stopFlag=!0,e&&(clearTimeout(e),t.apTimeout=void 0)},handleAutoPlay:function(){var t=this,e=t.internalData,i=t.autoPlay,a=t.interval,n=e.stopFlag;t.stopAutoPlay(),i&&(e.stopFlag=!1,e.apTimeout=setTimeout(function(){n||t.handlePrevNext(!0)},_xeUtils.default.toNumber(a)||300))},mouseenterEvent:function(){this.stopAutoPlay()},mouseleaveEvent:function(){this.handleAutoPlay()},callSlot:function(t,e){var i=this.$scopedSlots;return t&&(_xeUtils.default.isString(t)&&(t=i[t]||null),_xeUtils.default.isFunction(t))?(0,_vn.getSlotVNs)(t(e)):[]},renderItemWrapper:function(a,t){var n=this,e=n.reactData,r=n.height,o=e.activeName;return a("div",{class:"vxe-carousel--list",style:n.computeListStyle},t.map(function(t){var e=t.name,i=t.url,t=t.slots,t=t?t.default:null;return a("div",{key:"".concat(e),class:["vxe-carousel--item-inner",{"is--active":o===e}],style:r?{height:(0,_dom.toCssUnit)(r)}:{}},t?n.callSlot(t,{}):[a("img",{class:"vxe-carousel--item-img",attrs:{src:i}})])}))},renderIndicators:function(i,t){var a=this,n=a.reactData.activeName;return i("div",{class:"vxe-carousel--indicators"},t.map(function(e){var t=e.name;return i("div",{key:"".concat(t),class:["vxe-carousel--indicators-item",{"is--active":n===t}],on:{click:function(t){a.clickItemEvent(t,e)}}})}))},renderVN:function(t){var e=this,i=e.$scopedSlots,a=e.loading,n=e.height,r=e.width,o=e.showIndicators,u=e.vertical,s=e.reactData.staticItems,i=i.default,s=(s&&s.length?s:e.options)||[];return t("div",{ref:"refElem",class:["vxe-carousel","is--".concat(u?"vertical":"horizontal")],style:r?{width:(0,_dom.toCssUnit)(r)}:{},on:{mouseenter:e.mouseenterEvent,mouseleave:e.mouseleaveEvent}},[t("div",{class:"vxe-carousel--slots"},i?i({}):[]),t("div",{ref:"refWrapperElem",class:"vxe-carousel--item-wrapper",style:n?{height:(0,_dom.toCssUnit)(n)}:{}},[e.renderItemWrapper(t,s)]),o?e.renderIndicators(t,s):(0,_ui.renderEmptyElement)(e),t("div",{class:"vxe-carousel--btn-wrapper"},[t("div",{class:"vxe-carousel--previous-btn",on:{click:e.prevEvent}},[t("i",{class:u?(0,_ui.getIcon)().CAROUSEL_VERTICAL_PREVIOUS:(0,_ui.getIcon)().CAROUSEL_HORIZONTAL_PREVIOUS})]),t("div",{class:"vxe-carousel--next-btn",on:{click:e.nextEvent}},[t("i",{class:u?(0,_ui.getIcon)().CAROUSEL_VERTICAL_NEXT:(0,_ui.getIcon)().CAROUSEL_HORIZONTAL_NEXT})])]),t(_loading.default,{class:"vxe-carousel--loading",props:{value:a}})])}},watch:{options:function(){this.initDefaultActive(this.options)},"reactData.staticItems":function(){var t=this.reactData;this.initDefaultActive(t.staticItems)},autoPlay:function(){this.handleAutoPlay()}},created:function(){var t=this.reactData;this.initDefaultActive(t.staticItems.length?t.staticItems:this.options)},mounted:function(){this.handleAutoPlay(),this.updateStyle()},beforeDestroy:function(){this.stopAutoPlay()},render:function(t){return this.renderVN(t)}});

package/lib/carousel/src/util.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.assembleCarouselItem = assembleCarouselItem;
+exports.destroyCarouselItem = destroyCarouselItem;
+var _xeUtils = _interopRequireDefault(require("xe-utils"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function assembleCarouselItem($xeCarousel, elem, itemConfig) {
+  var staticItems = $xeCarousel.reactData.staticItems;
+  var parentElem = elem.parentNode;
+  if (parentElem) {
+    staticItems.splice(_xeUtils.default.arrayIndexOf(parentElem.children, elem), 0, itemConfig);
+  }
+  $xeCarousel.reactData.staticItems = staticItems.slice(0);
+}
+function destroyCarouselItem($xeCarousel, itemConfig) {
+  var staticItems = $xeCarousel.reactData.staticItems;
+  var index = _xeUtils.default.findIndexOf(staticItems, function (item) {
+    return item.id === itemConfig.id;
+  });
+  if (index > -1) {
+    staticItems.splice(index, 1);
+  }
+  $xeCarousel.reactData.staticItems = staticItems.slice(0);
+}

package/lib/carousel/src/util.min.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.assembleCarouselItem=assembleCarouselItem,exports.destroyCarouselItem=destroyCarouselItem;var _xeUtils=_interopRequireDefault(require("xe-utils"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function assembleCarouselItem(e,t,a){var s=e.reactData.staticItems,r=t.parentNode;r&&s.splice(_xeUtils.default.arrayIndexOf(r.children,t),0,a),e.reactData.staticItems=s.slice(0)}function destroyCarouselItem(e,t){var a=e.reactData.staticItems,s=_xeUtils.default.findIndexOf(a,function(e){return e.id===t.id});-1<s&&a.splice(s,1),e.reactData.staticItems=a.slice(0)}

package/lib/carousel/style/index.js

@@ -0,0 +1 @@
+require('./style.css')

package/lib/carousel/style/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/lib/carousel/style/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/lib/carousel-item/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.VxeCarouselItem = exports.CarouselItem = void 0;
+var _core = require("@vxe-ui/core");
+var _carouselItem = _interopRequireDefault(require("../carousel/src/carousel-item"));
+var _dynamics = require("../dynamics");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var VxeCarouselItem = exports.VxeCarouselItem = Object.assign({}, _carouselItem.default, {
+  install: function install(app) {
+    app.component(_carouselItem.default.name, _carouselItem.default);
+  }
+});
+_dynamics.dynamicApp.use(VxeCarouselItem);
+_core.VxeUI.component(_carouselItem.default);
+var CarouselItem = exports.CarouselItem = VxeCarouselItem;
+var _default = exports.default = VxeCarouselItem;