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

A vue based PC component library

"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_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,_vue.defineComponent)({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){const{emit:o,slots:r}=e;var t=_xeUtils.default.uniqueId();const 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;const{activeName:a,itemWidth:i,itemHeight:u,staticItems:l}=d;var t=(l&&l.length?l:t)||[],o=Math.max(0,_xeUtils.default.findIndexOf(t,e=>e.name===a)),s={};return e?s.transform=`translateY(-${o*u}px)`:(s.width=i*t.length+"px",s.transform=`translateX(-${o*i}px)`),s}),u={},l={xID:t,props:n,context:e,reactData:d,internalData:i,getRefMaps:()=>a,getComputeMaps:()=>u},s=()=>{(0,_vue.nextTick)(()=>{var e=c.value;e&&(d.itemWidth=e.clientWidth,d.itemHeight=e.clientHeight)})},_=(e,t)=>{var a=t.name;d.activeName=t.name,o("update:modelValue",a),o("change",{value:a},e),s()},h=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,o("update:modelValue",a))}d.activeName=a};const g=t=>{var{options:a,loop:i}=n;const{activeName:u,staticItems:e}=d;var a=(e&&e.length?e:a)||[],l=Math.max(0,_xeUtils.default.findIndexOf(a,e=>e.name===u));if(-1<l){let e=null;if(t?l<a.length-1?e=a[l+1]:i&&(e=a[0]):0<l?e=a[l-1]:i&&(e=a[a.length-1]),e)return l=t=e.name,d.activeName=t,o("update:modelValue",l),!0}return!1},p=e=>{var t;g(!1)&&(t=d.activeName,o("change",{value:t},e))},f=e=>{var t;g(!0)&&(t=d.activeName,o("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;const a=i["stopFlag"];x(),e&&(i.stopFlag=!1,i.apTimeout=setTimeout(()=>{a||g(!0)},_xeUtils.default.toNumber(t)||300))},C=()=>{x()},N=()=>{I()};const y=(e,t)=>e&&(_xeUtils.default.isString(e)&&(e=r[e]||null),_xeUtils.default.isFunction(e))?(0,_vn.getSlotVNs)(e(t)):[];Object.assign(l,{dispatchEvent:(e,t,a)=>{o(e,(0,_ui.createEvent)(a,{$carousel:l},t))},prev(){return g(!1)&&I(),(0,_vue.nextTick)()},next(){return g(!0)&&I(),(0,_vue.nextTick)()}},{});const 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,()=>{h(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,()=>{h(d.staticItems)}),(0,_vue.watch)(()=>n.autoPlay,()=>{I()}),h(d.staticItems.length?d.staticItems:n.options),(0,_vue.onMounted)(()=>{I(),s()}),(0,_vue.onUnmounted)(()=>{x()}),(0,_vue.provide)("$xeCarousel",l),l.renderVN=()=>{var{loading:e,height:t,width:a,showIndicators:i,vertical:u,options:l}=n,o=d["staticItems"],s=r.default,o=(o&&o.length?o:l)||[];return(0,_vue.h)("div",{ref:v,class:["vxe-carousel","is--"+(u?"vertical":"horizontal")],style:a?{width:(0,_dom.toCssUnit)(a)}:null,onMouseenter:C,onMouseleave:N},[(0,_vue.h)("div",{class:"vxe-carousel--slots"},s?s({}):[]),(0,_vue.h)("div",{ref:c,class:"vxe-carousel--item-wrapper",style:t?{height:(0,_dom.toCssUnit)(t)}:null},[(e=>{const i=n["height"],u=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":u===e}],style:i?{height:(0,_dom.toCssUnit)(i)}:null},a?y(a,{}):[(0,_vue.h)("img",{class:"vxe-carousel--item-img",src:t})])}))})(o)]),i?(e=>{const 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){_(e,t)}})}))})(o):(0,_vue.createCommentVNode)(),(0,_vue.h)("div",{class:"vxe-carousel--btn-wrapper"},[(0,_vue.h)("div",{class:"vxe-carousel--previous-btn",onClick:p},[(0,_vue.h)("i",{class:u?(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:u?(0,_ui.getIcon)().CAROUSEL_VERTICAL_NEXT:(0,_ui.getIcon)().CAROUSEL_HORIZONTAL_NEXT})])]),(0,_vue.h)(_loading.default,{class:"vxe-carousel--loading",modelValue:e})])},l},render(){return this.renderVN()}});