vxe-pc-ui/lib/carousel/src/carousel.min.js

A vue based PC component library

Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_ui=require("../../ui"),_vn=require("../../ui/src/vn"),_dom=require("../../ui/src/dom"),_loading=_interopRequireDefault(require("../../loading/src/loading")),_xeUtils=_interopRequireDefault(require("xe-utils"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeCarousel",props:{modelValue:[String,Number],options:Array,loading:Boolean,height:{type:[Number,String],default:()=>(0,_ui.getConfig)().carousel.height},width:{type:[Number,String],default:()=>(0,_ui.getConfig)().carousel.width},autoPlay:{type:Boolean,default:()=>(0,_ui.getConfig)().carousel.autoPlay},interval:{type:[Number,String],default:()=>(0,_ui.getConfig)().carousel.interval},loop:{type:Boolean,default:()=>(0,_ui.getConfig)().carousel.loop},vertical:{type:Boolean,default:()=>(0,_ui.getConfig)().carousel.vertical},showIndicators:{type:Boolean,default:()=>(0,_ui.getConfig)().carousel.showIndicators}},emits:["update:modelValue","change"],setup(n,e){let{emit:r,slots:s}=e;var t=_xeUtils.default.uniqueId();let v=(0,_vue.ref)(),c=(0,_vue.ref)(),d=(0,_vue.reactive)({activeName:"",staticItems:[],itemWidth:0,itemHeight:0}),i={apTimeout:void 0,stopFlag:!1},a={refElem:v},m=(0,_vue.computed)(()=>{var{vertical:e,options:t}=n;let{activeName:a,itemWidth:i,itemHeight:l,staticItems:u}=d;var t=(u&&u.length?u:t)||[],r=Math.max(0,_xeUtils.default.findIndexOf(t,e=>e.name===a)),o={};return e?o.transform=`translateY(-${r*l}px)`:(o.width=i*t.length+"px",o.transform=`translateX(-${r*i}px)`),o}),l={},_={xID:t,props:n,context:e,reactData:d,internalData:i,getRefMaps:()=>a,getComputeMaps:()=>l},u=()=>{(0,_vue.nextTick)(()=>{var e=c.value;e&&(d.itemWidth=e.clientWidth,d.itemHeight=e.clientHeight)})},h=(e,t)=>{var a=t.name;d.activeName=t.name,r("update:modelValue",a),r("change",{value:a},e),u()},o=e=>{let a=null;if(e&&e.length){let t=!1;a=n.modelValue,e.forEach(e=>{a===e.name&&(t=!0)}),t||(a=e[0].name,r("update:modelValue",a))}d.activeName=a};let p=t=>{var{options:a,loop:i}=n;let{activeName:l,staticItems:e}=d;var a=(e&&e.length?e:a)||[],u=Math.max(0,_xeUtils.default.findIndexOf(a,e=>e.name===l));if(-1<u){let e=null;if(t?u<a.length-1?e=a[u+1]:i&&(e=a[0]):0<u?e=a[u-1]:i&&(e=a[a.length-1]),e)return u=t=e.name,d.activeName=t,r("update:modelValue",u),!0}return!1},g=e=>{var t;p(!1)&&(t=d.activeName,r("change",{value:t},e))},f=e=>{var t;p(!0)&&(t=d.activeName,r("change",{value:t},e))},x=()=>{var e=i.apTimeout;i.stopFlag=!0,e&&(clearTimeout(e),i.apTimeout=void 0)},I=()=>{var{autoPlay:e,interval:t}=n;let a=i.stopFlag;x(),e&&(i.stopFlag=!1,i.apTimeout=setTimeout(()=>{a||p(!0)},_xeUtils.default.toNumber(t)||300))},C=()=>{x()},N=()=>{I()};let y=(e,t)=>e&&(_xeUtils.default.isString(e)&&(e=s[e]||null),_xeUtils.default.isFunction(e))?(0,_vn.getSlotVNs)(e(t)):[];Object.assign(_,{dispatchEvent:(e,t,a)=>{r(e,(0,_ui.createEvent)(a,{$carousel:_},t))},prev(){return p(!1)&&I(),(0,_vue.nextTick)()},next(){return p(!0)&&I(),(0,_vue.nextTick)()}},{});let w=(0,_vue.ref)(0),U=((0,_vue.watch)(()=>n.options?n.options.length:-1,()=>{w.value++}),(0,_vue.watch)(()=>n.options,()=>{w.value++}),(0,_vue.watch)(w,()=>{o(n.options)}),(0,_vue.ref)(0));return(0,_vue.watch)(()=>d.staticItems?d.staticItems.length:-1,()=>{U.value++}),(0,_vue.watch)(()=>d.staticItems,()=>{U.value++}),(0,_vue.watch)(U,()=>{o(d.staticItems)}),(0,_vue.watch)(()=>n.autoPlay,()=>{I()}),o(d.staticItems.length?d.staticItems:n.options),(0,_vue.onMounted)(()=>{I(),u()}),(0,_vue.onUnmounted)(()=>{x()}),(0,_vue.provide)("$xeCarousel",_),_.renderVN=()=>{var{loading:e,height:t,width:a,showIndicators:i,vertical:l,options:u}=n,r=d.staticItems,o=s.default,r=(r&&r.length?r:u)||[];return(0,_vue.h)("div",{ref:v,class:["vxe-carousel","is--"+(l?"vertical":"horizontal")],style:a?{width:(0,_dom.toCssUnit)(a)}:null,onMouseenter:C,onMouseleave:N},[(0,_vue.h)("div",{class:"vxe-carousel--slots"},o?o({}):[]),(0,_vue.h)("div",{ref:c,class:"vxe-carousel--item-wrapper",style:t?{height:(0,_dom.toCssUnit)(t)}:null},[(e=>{let i=n.height,l=d.activeName;var t=m.value;return(0,_vue.h)("div",{class:"vxe-carousel--list",style:t},e.map(e=>{var{name:e,url:t,slots:a}=e,a=a?a.default:null;return(0,_vue.h)("div",{key:""+e,class:["vxe-carousel--item-inner",{"is--active":l===e}],style:i?{height:(0,_dom.toCssUnit)(i)}:null},a?y(a,{}):[(0,_vue.h)("img",{class:"vxe-carousel--item-img",src:t})])}))})(r)]),i?(e=>{let a=d.activeName;return(0,_vue.h)("div",{class:"vxe-carousel--indicators"},e.map(t=>{var e=t.name;return(0,_vue.h)("div",{key:""+e,class:["vxe-carousel--indicators-item",{"is--active":a===e}],onClick(e){h(e,t)}})}))})(r):(0,_ui.renderEmptyElement)(_),(0,_vue.h)("div",{class:"vxe-carousel--btn-wrapper"},[(0,_vue.h)("div",{class:"vxe-carousel--previous-btn",onClick:g},[(0,_vue.h)("i",{class:l?(0,_ui.getIcon)().CAROUSEL_VERTICAL_PREVIOUS:(0,_ui.getIcon)().CAROUSEL_HORIZONTAL_PREVIOUS})]),(0,_vue.h)("div",{class:"vxe-carousel--next-btn",onClick:f},[(0,_vue.h)("i",{class:l?(0,_ui.getIcon)().CAROUSEL_VERTICAL_NEXT:(0,_ui.getIcon)().CAROUSEL_HORIZONTAL_NEXT})])]),(0,_vue.h)(_loading.default,{class:"vxe-carousel--loading",modelValue:e})])},_},render(){return this.renderVN()}});