vue-devui 1.0.0-beta.18 → 1.0.0-beta.220801

package/carousel/index.es.js

@@ -1,329 +0,0 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-import { defineComponent, createVNode, ref, watch, onMounted, onBeforeUnmount, Fragment, Comment } from "vue";
-const carouselProps = {
-  arrowTrigger: {
-    type: String,
-    default: "hover"
-  },
-  autoplay: {
-    type: Boolean,
-    default: false
-  },
-  autoplaySpeed: {
-    type: Number,
-    default: 3e3
-  },
-  height: {
-    type: String,
-    default: "100%"
-  },
-  showDots: {
-    type: Boolean,
-    default: true
-  },
-  dotTrigger: {
-    type: String,
-    default: "click"
-  },
-  dotPosition: {
-    type: String,
-    default: "bottom"
-  },
-  activeIndex: {
-    type: Number,
-    default: 0
-  },
-  activeIndexChange: {
-    type: Function
-  }
-};
-var Icon = defineComponent({
-  name: "DIcon",
-  props: {
-    name: {
-      type: String,
-      required: true
-    },
-    size: {
-      type: String,
-      default: "inherit"
-    },
-    color: {
-      type: String,
-      default: "inherit"
-    },
-    classPrefix: {
-      type: String,
-      default: "icon"
-    }
-  },
-  setup(props) {
-    return __spreadValues({}, props);
-  },
-  render() {
-    const {
-      name,
-      size,
-      color,
-      classPrefix
-    } = this;
-    return /^((https?):)?\/\//.test(name) ? createVNode("img", {
-      "src": name,
-      "alt": name.split("/")[name.split("/").length - 1],
-      "style": {
-        width: size,
-        verticalAlign: "text-bottom"
-      }
-    }, null) : createVNode("i", {
-      "class": `${classPrefix} ${classPrefix}-${name}`,
-      "style": {
-        fontSize: size,
-        color
-      }
-    }, null);
-  }
-});
-var carousel = "";
-var Carousel = defineComponent({
-  name: "DCarousel",
-  props: carouselProps,
-  emits: ["update:activeIndex"],
-  setup(props, {
-    emit
-  }) {
-    const {
-      arrowTrigger,
-      autoplay,
-      autoplaySpeed,
-      dotTrigger,
-      activeIndex,
-      activeIndexChange
-    } = props;
-    const transitionSpeed = 500;
-    const itemCount = ref(0);
-    const showArrow = ref(false);
-    const currentIndex = ref(0);
-    const wrapperRef = ref(null);
-    const containerRef = ref(null);
-    const scheduledId = ref(null);
-    watch(() => arrowTrigger, () => {
-      showArrow.value = arrowTrigger === "always";
-    }, {
-      immediate: true
-    });
-    watch(() => activeIndex, () => {
-      currentIndex.value = activeIndex;
-    }, {
-      immediate: true
-    });
-    const translatePosition = (size) => {
-      if (containerRef.value)
-        containerRef.value.style.left = `${-size * 100}%`;
-    };
-    const adjustTransition = (targetEl) => {
-      setTimeout(() => {
-        if (containerRef.value)
-          containerRef.value.style.transition = "";
-        targetEl.style.transform = "";
-        translatePosition(currentIndex.value);
-      }, transitionSpeed);
-    };
-    const adjustPosition = (targetEl, firstToLast) => {
-      if (wrapperRef.value) {
-        const wrapperRect = wrapperRef.value.getBoundingClientRect();
-        targetEl.style.transform = `translateX(${(firstToLast ? -itemCount.value : itemCount.value) * wrapperRect.width}px)`;
-      }
-    };
-    const goto = (index2) => {
-      if (index2 === currentIndex.value || !wrapperRef.value || !containerRef.value) {
-        return;
-      }
-      containerRef.value.style.transition = `left ${transitionSpeed}ms ease`;
-      let latestIndex = currentIndex.value;
-      if (index2 < 0 && currentIndex.value === 0) {
-        latestIndex = itemCount.value - 1;
-        const targetEl = containerRef.value.children[latestIndex];
-        adjustPosition(targetEl, true);
-        translatePosition(-1);
-        adjustTransition(targetEl);
-      } else if (index2 >= itemCount.value && currentIndex.value === itemCount.value - 1) {
-        latestIndex = 0;
-        const targetEl = containerRef.value.children[latestIndex];
-        adjustPosition(targetEl, false);
-        translatePosition(itemCount.value);
-        adjustTransition(targetEl);
-      } else {
-        latestIndex = index2 < 0 ? 0 : index2 > itemCount.value - 1 ? itemCount.value - 1 : index2;
-        translatePosition(latestIndex);
-      }
-      currentIndex.value = latestIndex;
-      emit("update:activeIndex", latestIndex);
-      activeIndexChange == null ? void 0 : activeIndexChange(latestIndex);
-      autoScheduleTransition();
-    };
-    const prev = () => {
-      goto(currentIndex.value - 1);
-    };
-    const next = () => {
-      goto(currentIndex.value + 1);
-    };
-    const arrowMouseEvent = (type) => {
-      if (arrowTrigger !== "hover")
-        return;
-      showArrow.value = type === "enter";
-    };
-    const switchStep = (index2, type) => {
-      if (type === dotTrigger)
-        goto(index2);
-    };
-    const clearScheduledTransition = () => {
-      if (scheduledId.value) {
-        clearTimeout(scheduledId.value);
-        scheduledId.value = null;
-      }
-    };
-    const autoScheduleTransition = () => {
-      clearScheduledTransition();
-      if (autoplay && autoplaySpeed) {
-        scheduledId.value = setTimeout(() => {
-          next();
-        }, autoplaySpeed);
-      }
-    };
-    const changeItemCount = (val) => {
-      itemCount.value = val;
-      autoScheduleTransition();
-    };
-    onMounted(() => {
-      if (containerRef.value) {
-        containerRef.value.style.transition = `left ${transitionSpeed}ms ease`;
-        containerRef.value.style.left = "0%";
-      }
-      autoScheduleTransition();
-    });
-    onBeforeUnmount(() => {
-      clearScheduledTransition();
-    });
-    return {
-      wrapperRef,
-      containerRef,
-      showArrow,
-      currentIndex,
-      itemCount,
-      changeItemCount,
-      goto,
-      prev,
-      next,
-      arrowMouseEvent,
-      switchStep
-    };
-  },
-  render() {
-    var _a, _b;
-    const {
-      showArrow,
-      currentIndex,
-      itemCount,
-      arrowTrigger,
-      height,
-      showDots,
-      dotPosition,
-      prev,
-      next,
-      arrowMouseEvent,
-      switchStep,
-      changeItemCount,
-      $slots
-    } = this;
-    const slot = (_b = (_a = $slots.default) == null ? void 0 : _a.call($slots)) != null ? _b : [];
-    let children = slot;
-    if (children.length === 1 && children[0].type === Fragment) {
-      children = (children[0].children || []).filter((item) => (item == null ? void 0 : item.type) !== Comment);
-    }
-    if (children.length !== itemCount) {
-      changeItemCount(children.length);
-    }
-    return createVNode("div", {
-      "class": "devui-carousel-container",
-      "style": {
-        height
-      },
-      "onMouseenter": () => arrowMouseEvent("enter"),
-      "onMouseleave": () => arrowMouseEvent("leave")
-    }, [arrowTrigger !== "never" && showArrow ? createVNode("div", {
-      "class": "devui-carousel-arrow"
-    }, [createVNode("button", {
-      "class": "arrow-left",
-      "onClick": () => prev()
-    }, [createVNode(Icon, {
-      "name": "arrow-left"
-    }, null)]), createVNode("button", {
-      "class": "arrow-right",
-      "onClick": () => next()
-    }, [createVNode(Icon, {
-      "name": "arrow-right"
-    }, null)])]) : null, createVNode("div", {
-      "class": "devui-carousel-item-wrapper",
-      "ref": "wrapperRef"
-    }, [createVNode("div", {
-      "class": "devui-carousel-item-container",
-      "style": {
-        width: `${itemCount * 100}%`
-      },
-      "ref": "containerRef"
-    }, [slot])]), itemCount > 0 && showDots ? createVNode("ul", {
-      "class": ["devui-carousel-dots", dotPosition]
-    }, [children.map((_, index2) => createVNode("li", {
-      "class": {
-        "dot-item": true,
-        active: currentIndex === index2
-      },
-      "onClick": () => switchStep(index2, "click"),
-      "onMouseenter": () => switchStep(index2, "hover")
-    }, null))]) : null]);
-  }
-});
-var CarouselItem = defineComponent({
-  name: "DCarouselItem",
-  render() {
-    var _a;
-    const {
-      $slots
-    } = this;
-    const children = (_a = $slots.default) == null ? void 0 : _a.call($slots);
-    return createVNode("div", {
-      "class": "d-carousel-item "
-    }, [children]);
-  }
-});
-Carousel.install = function(app) {
-  app.component(Carousel.name, Carousel);
-};
-CarouselItem.install = function(app) {
-  app.component(CarouselItem.name, CarouselItem);
-};
-var index = {
-  title: "Carousel \u8D70\u9A6C\u706F",
-  category: "\u6570\u636E\u5C55\u793A",
-  status: "80%",
-  install(app) {
-    app.use(Carousel);
-    app.use(CarouselItem);
-  }
-};
-export { Carousel, CarouselItem, index as default };

package/carousel/index.umd.js

@@ -1 +0,0 @@
-var F=Object.defineProperty;var R=Object.getOwnPropertySymbols;var _=Object.prototype.hasOwnProperty,q=Object.prototype.propertyIsEnumerable;var $=(n,e,s)=>e in n?F(n,e,{enumerable:!0,configurable:!0,writable:!0,value:s}):n[e]=s,k=(n,e)=>{for(var s in e||(e={}))_.call(e,s)&&$(n,s,e[s]);if(R)for(var s of R(e))q.call(e,s)&&$(n,s,e[s]);return n};(function(n,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(n=typeof globalThis!="undefined"?globalThis:n||self,e(n.index={},n.Vue))})(this,function(n,e){"use strict";const s={arrowTrigger:{type:String,default:"hover"},autoplay:{type:Boolean,default:!1},autoplaySpeed:{type:Number,default:3e3},height:{type:String,default:"100%"},showDots:{type:Boolean,default:!0},dotTrigger:{type:String,default:"click"},dotPosition:{type:String,default:"bottom"},activeIndex:{type:Number,default:0},activeIndexChange:{type:Function}};var P=e.defineComponent({name:"DIcon",props:{name:{type:String,required:!0},size:{type:String,default:"inherit"},color:{type:String,default:"inherit"},classPrefix:{type:String,default:"icon"}},setup(t){return k({},t)},render(){const{name:t,size:d,color:i,classPrefix:g}=this;return/^((https?):)?\/\//.test(t)?e.createVNode("img",{src:t,alt:t.split("/")[t.split("/").length-1],style:{width:d,verticalAlign:"text-bottom"}},null):e.createVNode("i",{class:`${g} ${g}-${t}`,style:{fontSize:d,color:i}},null)}}),O="",w=e.defineComponent({name:"DCarousel",props:s,emits:["update:activeIndex"],setup(t,{emit:d}){const{arrowTrigger:i,autoplay:g,autoplaySpeed:T,dotTrigger:b,activeIndex:V,activeIndexChange:S}=t,I=500,o=e.ref(0),y=e.ref(!1),u=e.ref(0),f=e.ref(null),r=e.ref(null),c=e.ref(null);e.watch(()=>i,()=>{y.value=i==="always"},{immediate:!0}),e.watch(()=>V,()=>{u.value=V},{immediate:!0});const m=a=>{r.value&&(r.value.style.left=`${-a*100}%`)},N=a=>{setTimeout(()=>{r.value&&(r.value.style.transition=""),a.style.transform="",m(u.value)},I)},v=(a,l)=>{if(f.value){const h=f.value.getBoundingClientRect();a.style.transform=`translateX(${(l?-o.value:o.value)*h.width}px)`}},p=a=>{if(a===u.value||!f.value||!r.value)return;r.value.style.transition=`left ${I}ms ease`;let l=u.value;if(a<0&&u.value===0){l=o.value-1;const h=r.value.children[l];v(h,!0),m(-1),N(h)}else if(a>=o.value&&u.value===o.value-1){l=0;const h=r.value.children[l];v(h,!1),m(o.value),N(h)}else l=a<0?0:a>o.value-1?o.value-1:a,m(l);u.value=l,d("update:activeIndex",l),S==null||S(l),M()},E=()=>{p(u.value-1)},x=()=>{p(u.value+1)},j=a=>{i==="hover"&&(y.value=a==="enter")},B=(a,l)=>{l===b&&p(a)},D=()=>{c.value&&(clearTimeout(c.value),c.value=null)},M=()=>{D(),g&&T&&(c.value=setTimeout(()=>{x()},T))},z=a=>{o.value=a,M()};return e.onMounted(()=>{r.value&&(r.value.style.transition=`left ${I}ms ease`,r.value.style.left="0%"),M()}),e.onBeforeUnmount(()=>{D()}),{wrapperRef:f,containerRef:r,showArrow:y,currentIndex:u,itemCount:o,changeItemCount:z,goto:p,prev:E,next:x,arrowMouseEvent:j,switchStep:B}},render(){var m,N;const{showArrow:t,currentIndex:d,itemCount:i,arrowTrigger:g,height:T,showDots:b,dotPosition:V,prev:S,next:I,arrowMouseEvent:o,switchStep:y,changeItemCount:u,$slots:f}=this,r=(N=(m=f.default)==null?void 0:m.call(f))!=null?N:[];let c=r;return c.length===1&&c[0].type===e.Fragment&&(c=(c[0].children||[]).filter(v=>(v==null?void 0:v.type)!==e.Comment)),c.length!==i&&u(c.length),e.createVNode("div",{class:"devui-carousel-container",style:{height:T},onMouseenter:()=>o("enter"),onMouseleave:()=>o("leave")},[g!=="never"&&t?e.createVNode("div",{class:"devui-carousel-arrow"},[e.createVNode("button",{class:"arrow-left",onClick:()=>S()},[e.createVNode(P,{name:"arrow-left"},null)]),e.createVNode("button",{class:"arrow-right",onClick:()=>I()},[e.createVNode(P,{name:"arrow-right"},null)])]):null,e.createVNode("div",{class:"devui-carousel-item-wrapper",ref:"wrapperRef"},[e.createVNode("div",{class:"devui-carousel-item-container",style:{width:`${i*100}%`},ref:"containerRef"},[r])]),i>0&&b?e.createVNode("ul",{class:["devui-carousel-dots",V]},[c.map((v,p)=>e.createVNode("li",{class:{"dot-item":!0,active:d===p},onClick:()=>y(p,"click"),onMouseenter:()=>y(p,"hover")},null))]):null])}}),C=e.defineComponent({name:"DCarouselItem",render(){var i;const{$slots:t}=this,d=(i=t.default)==null?void 0:i.call(t);return e.createVNode("div",{class:"d-carousel-item "},[d])}});w.install=function(t){t.component(w.name,w)},C.install=function(t){t.component(C.name,C)};var A={title:"Carousel \u8D70\u9A6C\u706F",category:"\u6570\u636E\u5C55\u793A",status:"80%",install(t){t.use(w),t.use(C)}};n.Carousel=w,n.CarouselItem=C,n.default=A,Object.defineProperty(n,"__esModule",{value:!0}),n[Symbol.toStringTag]="Module"});

package/carousel/style.css

@@ -1 +0,0 @@
-.devui-carousel-container{display:block;position:relative}.devui-carousel-container .devui-carousel-arrow{position:absolute;width:100%;top:50%}.devui-carousel-container .devui-carousel-arrow .arrow-left{position:absolute;top:-18px;z-index:2;cursor:pointer;width:36px;height:36px;border-radius:18px;background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:var(--devui-shadow-length-hover, 0 4px 16px 0) var(--devui-light-shadow, rgba(0, 0, 0, .1));display:inline-flex;align-items:center;justify-content:center;left:10px}.devui-carousel-container .devui-carousel-arrow .arrow-left:hover{background:var(--devui-area, #f8f8f8)}.devui-carousel-container .devui-carousel-arrow .arrow-left svg polygon{fill:var(--devui-text, #252b3a)}.devui-carousel-container .devui-carousel-arrow .arrow-right{position:absolute;top:-18px;z-index:2;cursor:pointer;width:36px;height:36px;border-radius:18px;background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:var(--devui-shadow-length-hover, 0 4px 16px 0) var(--devui-light-shadow, rgba(0, 0, 0, .1));display:inline-flex;align-items:center;justify-content:center;right:10px}.devui-carousel-container .devui-carousel-arrow .arrow-right:hover{background:var(--devui-area, #f8f8f8)}.devui-carousel-container .devui-carousel-arrow .arrow-right svg polygon{fill:var(--devui-text, #252b3a)}.devui-carousel-container .devui-carousel-item-wrapper{position:relative;overflow:hidden;height:100%}.devui-carousel-container .devui-carousel-item-wrapper .devui-carousel-item-container{display:flex;height:100%;position:relative}.devui-carousel-container .devui-carousel-item-wrapper .devui-carousel-item-container .d-carousel-item{flex:1;position:relative;height:100%}.devui-carousel-container .devui-carousel-dots{position:absolute;display:flex;justify-content:center;width:100%;list-style:none}.devui-carousel-container .devui-carousel-dots.bottom{bottom:8px}.devui-carousel-container .devui-carousel-dots.top{top:8px}.devui-carousel-container .devui-carousel-dots .dot-item{width:6px;height:6px;border-radius:3px;margin-right:8px;background:var(--devui-icon-fill, #d3d5d9)}.devui-carousel-container .devui-carousel-dots .dot-item:hover{cursor:pointer;background:var(--devui-list-item-hover-bg, #f2f5fc)}.devui-carousel-container .devui-carousel-dots .dot-item.active{width:24px;background:var(--devui-list-item-active-bg, #5e7ce0);transition:all var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-carousel-container .devui-carousel-arrow .arrow-left,.devui-carousel-container .devui-carousel-arrow .arrow-right{transition:background-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1))}