vue-devui 1.0.0-rc.1 → 1.0.0-rc.12

package/carousel/index.es.js

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

package/carousel/package.json

@@ -1,7 +0,0 @@
-{
-  "name": "carousel",
-  "version": "0.0.0",
-  "main": "index.umd.js",
-  "module": "index.es.js",
-  "style": "style.css"
-}

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

package/cascader/index.d.ts

@@ -1,7 +0,0 @@
-import { App } from 'vue';
-  declare function install(app: App): void
-  declare const _default: {
-      install: typeof install;
-      version: string;
-  };
-  export default _default;