vue-devui 1.5.4 → 1.5.5

package/carousel/index.es.js

@@ -0,0 +1,448 @@
+import { defineComponent, toRefs, computed, createVNode, resolveDynamicComponent, mergeProps, 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
+  },
+  transitionSpeed: {
+    type: Number,
+    default: 500
+  }
+};
+const DEFAULT_PREFIX = "icon";
+const iconProps = {
+  name: {
+    type: String,
+    default: "",
+    required: true
+  },
+  size: {
+    type: [Number, String],
+    default: "inherit"
+  },
+  color: {
+    type: String,
+    default: "inherit"
+  },
+  component: {
+    type: Object,
+    default: null
+  },
+  classPrefix: {
+    type: String,
+    default: DEFAULT_PREFIX
+  },
+  operable: {
+    type: Boolean,
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  rotate: {
+    type: [Number, String]
+  }
+};
+const svgIconProps = {
+  name: {
+    type: String,
+    default: "",
+    required: true
+  },
+  color: {
+    type: String,
+    default: "inherit"
+  },
+  size: {
+    type: [Number, String],
+    default: "inherit"
+  }
+};
+function createBem(namespace, element, modifier) {
+  let cls = namespace;
+  if (element) {
+    cls += `__${element}`;
+  }
+  if (modifier) {
+    cls += `--${modifier}`;
+  }
+  return cls;
+}
+function useNamespace(block, needDot = false) {
+  const namespace = needDot ? `.devui-${block}` : `devui-${block}`;
+  const b = () => createBem(namespace);
+  const e = (element) => element ? createBem(namespace, element) : "";
+  const m = (modifier) => modifier ? createBem(namespace, "", modifier) : "";
+  const em = (element, modifier) => element && modifier ? createBem(namespace, element, modifier) : "";
+  return {
+    b,
+    e,
+    m,
+    em
+  };
+}
+var icon = "";
+var svgIcon = defineComponent({
+  name: "DSvgIcon",
+  props: svgIconProps,
+  setup(props) {
+    const {
+      name,
+      color,
+      size
+    } = toRefs(props);
+    const ns = useNamespace("svg-icon");
+    const iconName = computed(() => `#icon-${name.value}`);
+    const iconSize = computed(() => {
+      return typeof size.value === "number" ? `${size.value}px` : size.value;
+    });
+    const styles = {
+      width: iconSize.value,
+      height: iconSize.value
+    };
+    return () => {
+      return createVNode("svg", {
+        "class": ns.b(),
+        "style": styles
+      }, [createVNode("use", {
+        "xlink:href": iconName.value,
+        "fill": color.value
+      }, null)]);
+    };
+  }
+});
+function isUrl(value) {
+  return /^((http|https):)?\/\//.test(value);
+}
+function useIconDom(props, ctx) {
+  const {
+    component,
+    name,
+    size,
+    color,
+    classPrefix,
+    rotate
+  } = toRefs(props);
+  const ns = useNamespace("icon");
+  const iconSize = computed(() => {
+    return typeof size.value === "number" ? `${size.value}px` : size.value;
+  });
+  const IconComponent = component.value ? resolveDynamicComponent(component.value) : resolveDynamicComponent(svgIcon);
+  const imgIconDom = () => {
+    return createVNode("img", mergeProps({
+      "src": name.value,
+      "alt": name.value.split("/")[name.value.split("/").length - 1],
+      "class": [(rotate == null ? void 0 : rotate.value) === "infinite" && ns.m("spin")],
+      "style": {
+        width: iconSize.value || "",
+        transform: `rotate(${rotate == null ? void 0 : rotate.value}deg)`,
+        verticalAlign: "middle"
+      }
+    }, ctx.attrs), null);
+  };
+  const svgIconDom = () => {
+    return createVNode(IconComponent, mergeProps({
+      "name": name.value,
+      "color": color.value,
+      "size": iconSize.value,
+      "class": [(rotate == null ? void 0 : rotate.value) === "infinite" && ns.m("spin")],
+      "style": {
+        transform: `rotate(${rotate == null ? void 0 : rotate.value}deg)`
+      }
+    }, ctx.attrs), null);
+  };
+  const fontIconDom = () => {
+    const fontIconClass = /^icon-/.test(name.value) ? name.value : `${classPrefix.value}-${name.value}`;
+    return createVNode("i", mergeProps({
+      "class": [classPrefix.value, fontIconClass, (rotate == null ? void 0 : rotate.value) === "infinite" && ns.m("spin")],
+      "style": {
+        fontSize: iconSize.value,
+        color: color.value,
+        transform: `rotate(${rotate == null ? void 0 : rotate.value}deg)`
+      }
+    }, ctx.attrs), null);
+  };
+  const iconDom = () => {
+    return component.value ? svgIconDom() : isUrl(name.value) ? imgIconDom() : fontIconDom();
+  };
+  return {
+    iconDom
+  };
+}
+var Icon = defineComponent({
+  name: "DIcon",
+  props: iconProps,
+  emits: ["click"],
+  setup(props, ctx) {
+    const {
+      disabled,
+      operable
+    } = toRefs(props);
+    const {
+      iconDom
+    } = useIconDom(props, ctx);
+    const ns = useNamespace("icon");
+    const wrapClassed = computed(() => ({
+      [ns.e("container")]: true,
+      [ns.m("disabled")]: disabled.value,
+      [ns.m("operable")]: operable.value,
+      [ns.m("no-slots")]: !Object.keys(ctx.slots).length
+    }));
+    const onClick = (e) => {
+      if (disabled.value) {
+        return;
+      }
+      ctx.emit("click", e);
+    };
+    return () => {
+      var _a, _b, _c, _d;
+      return createVNode("div", {
+        "class": wrapClassed.value,
+        "onClick": onClick
+      }, [(_b = (_a = ctx.slots).prefix) == null ? void 0 : _b.call(_a), iconDom(), (_d = (_c = ctx.slots).suffix) == null ? void 0 : _d.call(_c)]);
+    };
+  }
+});
+var carousel = "";
+var Carousel = defineComponent({
+  name: "DCarousel",
+  props: carouselProps,
+  emits: ["update:activeIndex", "activeIndexChange"],
+  setup(props, {
+    emit,
+    slots,
+    expose
+  }) {
+    const ns = useNamespace("carousel");
+    const {
+      height,
+      showDots,
+      dotPosition,
+      arrowTrigger,
+      autoplay,
+      autoplaySpeed,
+      dotTrigger,
+      activeIndex,
+      transitionSpeed
+    } = toRefs(props);
+    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.value === "always";
+    }, {
+      immediate: true
+    });
+    watch(() => activeIndex, () => {
+      currentIndex.value = activeIndex.value;
+    }, {
+      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.value);
+    };
+    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 clearScheduledTransition = () => {
+      if (scheduledId.value) {
+        clearTimeout(scheduledId.value);
+        scheduledId.value = null;
+      }
+    };
+    const autoScheduleTransition = (callback) => {
+      clearScheduledTransition();
+      if (autoplay.value && autoplaySpeed.value) {
+        scheduledId.value = setTimeout(() => {
+          callback == null ? void 0 : callback();
+        }, autoplaySpeed.value);
+      }
+    };
+    const goto = (index2) => {
+      if (index2 === currentIndex.value || !wrapperRef.value || !containerRef.value) {
+        return;
+      }
+      containerRef.value.style.transition = `left ${transitionSpeed.value}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);
+      emit("activeIndexChange", latestIndex);
+      autoScheduleTransition(() => {
+        goto(currentIndex.value + 1);
+      });
+    };
+    const prev = () => {
+      goto(currentIndex.value - 1);
+    };
+    const next = () => {
+      goto(currentIndex.value + 1);
+    };
+    const arrowMouseEvent = (type) => {
+      if (arrowTrigger.value !== "hover") {
+        return;
+      }
+      showArrow.value = type === "enter";
+    };
+    const switchStep = (index2, type) => {
+      if (type === dotTrigger.value) {
+        goto(index2);
+      }
+    };
+    const changeItemCount = (val) => {
+      itemCount.value = val;
+      autoScheduleTransition(next);
+    };
+    onMounted(() => {
+      if (containerRef.value) {
+        containerRef.value.style.transition = `left ${transitionSpeed.value}ms ease`;
+        containerRef.value.style.left = "0%";
+      }
+      autoScheduleTransition(next);
+    });
+    onBeforeUnmount(() => {
+      clearScheduledTransition();
+    });
+    expose({
+      prev,
+      next,
+      goto
+    });
+    return () => {
+      var _a, _b;
+      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.value) {
+        changeItemCount(children.length);
+      }
+      return createVNode("div", {
+        "class": ns.b(),
+        "style": {
+          height: height.value
+        },
+        "onMouseenter": () => arrowMouseEvent("enter"),
+        "onMouseleave": () => arrowMouseEvent("leave")
+      }, [arrowTrigger.value !== "never" && showArrow.value ? createVNode("div", {
+        "class": ns.e("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": ns.e("item-wrapper"),
+        "ref": wrapperRef
+      }, [createVNode("div", {
+        "class": ns.e("item-container"),
+        "style": {
+          width: `${itemCount.value * 100}%`
+        },
+        "ref": containerRef
+      }, [slot])]), itemCount.value > 0 && showDots.value ? createVNode("ul", {
+        "class": [ns.e("dots"), dotPosition.value]
+      }, [children.map((_, index2) => createVNode("li", {
+        "class": {
+          "dot-item": true,
+          active: currentIndex.value === index2
+        },
+        "onClick": () => switchStep(index2, "click"),
+        "onMouseenter": () => switchStep(index2, "hover"),
+        "style": {
+          transition: `all ${transitionSpeed.value}ms ease`
+        }
+      }, null))]) : null]);
+    };
+  }
+});
+var CarouselItem = defineComponent({
+  name: "DCarouselItem",
+  setup(props, {
+    slots
+  }) {
+    var _a;
+    const ns = useNamespace("carousel");
+    const children = (_a = slots.default) == null ? void 0 : _a.call(slots);
+    return () => createVNode("div", {
+      "class": ns.e("item")
+    }, [children]);
+  }
+});
+var index = {
+  title: "Carousel \u8D70\u9A6C\u706F",
+  category: "\u6570\u636E\u5C55\u793A",
+  status: "100%",
+  install(app) {
+    app.component(Carousel.name, Carousel);
+    app.component(CarouselItem.name, CarouselItem);
+  }
+};
+export { Carousel, CarouselItem, index as default };

package/carousel/index.umd.js

@@ -0,0 +1 @@
+(function(p,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(p=typeof globalThis!="undefined"?globalThis:p||self,e(p.index={},p.Vue))})(this,function(p,e){"use strict";const O={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},transitionSpeed:{type:Number,default:500}},X={name:{type:String,default:"",required:!0},size:{type:[Number,String],default:"inherit"},color:{type:String,default:"inherit"},component:{type:Object,default:null},classPrefix:{type:String,default:"icon"},operable:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},rotate:{type:[Number,String]}},L={name:{type:String,default:"",required:!0},color:{type:String,default:"inherit"},size:{type:[Number,String],default:"inherit"}};function b(r,a,o){let l=r;return a&&(l+=`__${a}`),o&&(l+=`--${o}`),l}function N(r,a=!1){const o=a?`.devui-${r}`:`devui-${r}`;return{b:()=>b(o),e:t=>t?b(o,t):"",m:t=>t?b(o,"",t):"",em:(t,i)=>t&&i?b(o,t,i):""}}var Y="",G=e.defineComponent({name:"DSvgIcon",props:L,setup(r){const{name:a,color:o,size:l}=e.toRefs(r),u=N("svg-icon"),d=e.computed(()=>`#icon-${a.value}`),m=e.computed(()=>typeof l.value=="number"?`${l.value}px`:l.value),t={width:m.value,height:m.value};return()=>e.createVNode("svg",{class:u.b(),style:t},[e.createVNode("use",{"xlink:href":d.value,fill:o.value},null)])}});function H(r){return/^((http|https):)?\/\//.test(r)}function J(r,a){const{component:o,name:l,size:u,color:d,classPrefix:m,rotate:t}=e.toRefs(r),i=N("icon"),y=e.computed(()=>typeof u.value=="number"?`${u.value}px`:u.value),h=o.value?e.resolveDynamicComponent(o.value):e.resolveDynamicComponent(G),C=()=>e.createVNode("img",e.mergeProps({src:l.value,alt:l.value.split("/")[l.value.split("/").length-1],class:[(t==null?void 0:t.value)==="infinite"&&i.m("spin")],style:{width:y.value||"",transform:`rotate(${t==null?void 0:t.value}deg)`,verticalAlign:"middle"}},a.attrs),null),D=()=>e.createVNode(h,e.mergeProps({name:l.value,color:d.value,size:y.value,class:[(t==null?void 0:t.value)==="infinite"&&i.m("spin")],style:{transform:`rotate(${t==null?void 0:t.value}deg)`}},a.attrs),null),I=()=>{const S=/^icon-/.test(l.value)?l.value:`${m.value}-${l.value}`;return e.createVNode("i",e.mergeProps({class:[m.value,S,(t==null?void 0:t.value)==="infinite"&&i.m("spin")],style:{fontSize:y.value,color:d.value,transform:`rotate(${t==null?void 0:t.value}deg)`}},a.attrs),null)};return{iconDom:()=>o.value?D():H(l.value)?C():I()}}var _=e.defineComponent({name:"DIcon",props:X,emits:["click"],setup(r,a){const{disabled:o,operable:l}=e.toRefs(r),{iconDom:u}=J(r,a),d=N("icon"),m=e.computed(()=>({[d.e("container")]:!0,[d.m("disabled")]:o.value,[d.m("operable")]:l.value,[d.m("no-slots")]:!Object.keys(a.slots).length})),t=i=>{o.value||a.emit("click",i)};return()=>{var i,y,h,C;return e.createVNode("div",{class:m.value,onClick:t},[(y=(i=a.slots).prefix)==null?void 0:y.call(i),u(),(C=(h=a.slots).suffix)==null?void 0:C.call(h)])}}}),Z="",z=e.defineComponent({name:"DCarousel",props:O,emits:["update:activeIndex","activeIndexChange"],setup(r,{emit:a,slots:o,expose:l}){const u=N("carousel"),{height:d,showDots:m,dotPosition:t,arrowTrigger:i,autoplay:y,autoplaySpeed:h,dotTrigger:C,activeIndex:D,transitionSpeed:I}=e.toRefs(r),c=e.ref(0),S=e.ref(!1),v=e.ref(0),V=e.ref(null),f=e.ref(null),$=e.ref(null);e.watch(()=>i,()=>{S.value=i.value==="always"},{immediate:!0}),e.watch(()=>D,()=>{v.value=D.value},{immediate:!0});const P=n=>{f.value&&(f.value.style.left=`${-n*100}%`)},j=n=>{setTimeout(()=>{f.value&&(f.value.style.transition=""),n.style.transform="",P(v.value)},I.value)},k=(n,s)=>{if(V.value){const g=V.value.getBoundingClientRect();n.style.transform=`translateX(${(s?-c.value:c.value)*g.width}px)`}},A=()=>{$.value&&(clearTimeout($.value),$.value=null)},B=n=>{A(),y.value&&h.value&&($.value=setTimeout(()=>{n==null||n()},h.value))},w=n=>{if(n===v.value||!V.value||!f.value)return;f.value.style.transition=`left ${I.value}ms ease`;let s=v.value;if(n<0&&v.value===0){s=c.value-1;const g=f.value.children[s];k(g,!0),P(-1),j(g)}else if(n>=c.value&&v.value===c.value-1){s=0;const g=f.value.children[s];k(g,!1),P(c.value),j(g)}else s=n<0?0:n>c.value-1?c.value-1:n,P(s);v.value=s,a("update:activeIndex",s),a("activeIndexChange",s),B(()=>{w(v.value+1)})},F=()=>{w(v.value-1)},T=()=>{w(v.value+1)},x=n=>{i.value==="hover"&&(S.value=n==="enter")},U=(n,s)=>{s===C.value&&w(n)},Q=n=>{c.value=n,B(T)};return e.onMounted(()=>{f.value&&(f.value.style.transition=`left ${I.value}ms ease`,f.value.style.left="0%"),B(T)}),e.onBeforeUnmount(()=>{A()}),l({prev:F,next:T,goto:w}),()=>{var g,q;const n=(q=(g=o.default)==null?void 0:g.call(o))!=null?q:[];let s=n;return s.length===1&&s[0].type===e.Fragment&&(s=(s[0].children||[]).filter(R=>(R==null?void 0:R.type)!==e.Comment)),s.length!==c.value&&Q(s.length),e.createVNode("div",{class:u.b(),style:{height:d.value},onMouseenter:()=>x("enter"),onMouseleave:()=>x("leave")},[i.value!=="never"&&S.value?e.createVNode("div",{class:u.e("arrow")},[e.createVNode("button",{class:"arrow-left",onClick:()=>F()},[e.createVNode(_,{name:"arrow-left"},null)]),e.createVNode("button",{class:"arrow-right",onClick:()=>T()},[e.createVNode(_,{name:"arrow-right"},null)])]):null,e.createVNode("div",{class:u.e("item-wrapper"),ref:V},[e.createVNode("div",{class:u.e("item-container"),style:{width:`${c.value*100}%`},ref:f},[n])]),c.value>0&&m.value?e.createVNode("ul",{class:[u.e("dots"),t.value]},[s.map((R,M)=>e.createVNode("li",{class:{"dot-item":!0,active:v.value===M},onClick:()=>U(M,"click"),onMouseenter:()=>U(M,"hover"),style:{transition:`all ${I.value}ms ease`}},null))]):null])}}}),E=e.defineComponent({name:"DCarouselItem",setup(r,{slots:a}){var u;const o=N("carousel"),l=(u=a.default)==null?void 0:u.call(a);return()=>e.createVNode("div",{class:o.e("item")},[l])}}),K={title:"Carousel \u8D70\u9A6C\u706F",category:"\u6570\u636E\u5C55\u793A",status:"100%",install(r){r.component(z.name,z),r.component(E.name,E)}};p.Carousel=z,p.CarouselItem=E,p.default=K,Object.defineProperty(p,"__esModule",{value:!0}),p[Symbol.toStringTag]="Module"});

package/carousel/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "carousel",
+  "version": "0.0.0",
+  "main": "index.umd.js",
+  "module": "index.es.js",
+  "style": "style.css",
+  "types": "../types/carousel/index.d.ts"
+}

package/carousel/style.css

@@ -0,0 +1 @@
+.devui-icon__container{display:inline-block;color:var(--devui-icon-fill, #71757f)}.devui-icon__container>*:not(:last-child){vertical-align:middle;margin-right:8px}.devui-icon__container i{vertical-align:middle;transition:all var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-icon--no-slots i,.devui-icon--no-slots img{display:block}.devui-icon--disabled{color:var(--devui-disabled-text, #adb0b8);cursor:not-allowed}.devui-icon--disabled i{color:var(--devui-disabled-text, #adb0b8)}.devui-icon--operable:not(.devui-icon--disabled){cursor:pointer;transition:color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-icon--operable:not(.devui-icon--disabled) i{cursor:pointer}.devui-icon--operable:hover:not(.devui-icon--disabled){color:var(--devui-icon-fill-hover, #252b3a)}.devui-icon--operable:hover:not(.devui-icon--disabled).devui-icon__container{background-color:var(--devui-icon-background-hover, var(--devui-list-item-hover-bg, #f2f2f3))}.devui-icon--operable:hover:not(.devui-icon--disabled) i{color:var(--devui-icon-fill-hover, #252b3a)}.devui-icon--operable:active:not(.devui-icon--disabled){color:var(--devui-icon-active-color, var(--devui-icon-fill-active, #252b3a))}.devui-icon--operable:active:not(.devui-icon--disabled).devui-icon__container{background-color:var(--devui-icon-background-active, var(--devui-list-item-active-bg, #f2f5fc))}.devui-icon--operable:active:not(.devui-icon--disabled) i{color:var(--devui-icon-active-color, var(--devui-icon-fill-active, #252b3a))}.devui-icon--operable.devui-icon__container{height:32px;line-height:32px;padding:0 8px;margin-left:-8px;border-radius:var(--devui-border-radius, 2px);transition:all var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-icon--spin{animation:iconSpin 2.5s linear infinite}.devui-svg-icon{vertical-align:middle}@keyframes iconSpin{0%{transform:rotate(0)}50%{transform:rotate(180deg)}to{transform:rotate(360deg)}}.devui-carousel{display:block;position:relative}.devui-carousel .devui-carousel__arrow{position:absolute;width:100%;top:50%}.devui-carousel .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 8px 16px 0) var(--devui-light-shadow, rgba(37, 43, 58, .1));display:inline-flex;align-items:center;justify-content:center;left:10px}.devui-carousel .devui-carousel__arrow .arrow-left:hover{background:var(--devui-area, #f8f8f8)}.devui-carousel .devui-carousel__arrow .arrow-left svg polygon{fill:var(--devui-text, #252b3a)}.devui-carousel .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 8px 16px 0) var(--devui-light-shadow, rgba(37, 43, 58, .1));display:inline-flex;align-items:center;justify-content:center;right:10px}.devui-carousel .devui-carousel__arrow .arrow-right:hover{background:var(--devui-area, #f8f8f8)}.devui-carousel .devui-carousel__arrow .arrow-right svg polygon{fill:var(--devui-text, #252b3a)}.devui-carousel .devui-carousel__item-wrapper{position:relative;overflow:hidden;height:100%}.devui-carousel .devui-carousel__item-wrapper .devui-carousel__item-container{display:flex;height:100%;position:relative}.devui-carousel .devui-carousel__item-wrapper .devui-carousel__item-container .devui-carousel__item{flex:1;position:relative;height:100%}.devui-carousel .devui-carousel__dots{position:absolute;display:flex;justify-content:center;width:100%;list-style:none}.devui-carousel .devui-carousel__dots.bottom{bottom:8px}.devui-carousel .devui-carousel__dots.top{top:8px}.devui-carousel .devui-carousel__dots .dot-item{width:6px;height:6px;border-radius:3px;margin-right:8px;background:var(--devui-icon-fill, #71757f)}.devui-carousel .devui-carousel__dots .dot-item:hover{cursor:pointer;background:var(--devui-icon-fill-hover, #252b3a)}.devui-carousel .devui-carousel__dots .dot-item.active{width:24px;background:var(--devui-icon-fill-active, #252b3a);transition:all var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-carousel .devui-carousel__arrow .arrow-left,.devui-carousel .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/code-review/index.es.js

@@ -0,0 +1,73 @@
+import { toRefs, ref, onMounted, defineComponent, createVNode } from "vue";
+import * as Diff2Html from "diff2html";
+const codeReviewProps = {
+  diff: {
+    type: String,
+    required: true,
+    default: ""
+  },
+  outputFormat: {
+    type: String,
+    default: "line-by-line"
+  }
+};
+function createBem(namespace, element, modifier) {
+  let cls = namespace;
+  if (element) {
+    cls += `__${element}`;
+  }
+  if (modifier) {
+    cls += `--${modifier}`;
+  }
+  return cls;
+}
+function useNamespace(block, needDot = false) {
+  const namespace = needDot ? `.devui-${block}` : `devui-${block}`;
+  const b = () => createBem(namespace);
+  const e = (element) => element ? createBem(namespace, element) : "";
+  const m = (modifier) => modifier ? createBem(namespace, "", modifier) : "";
+  const em = (element, modifier) => element && modifier ? createBem(namespace, element, modifier) : "";
+  return {
+    b,
+    e,
+    m,
+    em
+  };
+}
+function useCodeReview(props) {
+  const { diff, outputFormat } = toRefs(props);
+  const renderHtml = ref("");
+  onMounted(() => {
+    renderHtml.value = Diff2Html.html(diff.value, {
+      drawFileList: true,
+      matching: "lines",
+      outputFormat: outputFormat.value
+    });
+  });
+  return { renderHtml };
+}
+var diff2html_min = "";
+var codeReview = "";
+var CodeReview = defineComponent({
+  name: "DCodeReview",
+  props: codeReviewProps,
+  setup(props) {
+    const ns = useNamespace("code-review");
+    const {
+      renderHtml
+    } = useCodeReview(props);
+    return () => createVNode("div", {
+      "class": ns.b(),
+      "innerHTML": renderHtml.value
+    }, null);
+  }
+});
+var index = {
+  title: "CodeReview \u4EE3\u7801\u68C0\u89C6",
+  category: "\u6F14\u8FDB\u4E2D",
+  status: "100%",
+  install(app) {
+    app.component(CodeReview.name, CodeReview);
+  }
+};
+export { CodeReview, codeReviewProps, index as default };

package/code-review/index.umd.js

@@ -0,0 +1 @@
+(function(u,r){typeof exports=="object"&&typeof module!="undefined"?r(exports,require("vue"),require("diff2html")):typeof define=="function"&&define.amd?define(["exports","vue","diff2html"],r):(u=typeof globalThis!="undefined"?globalThis:u||self,r(u.index={},u.Vue,u.Diff2Html))})(this,function(u,r,s){"use strict";function l(e){if(e&&e.__esModule)return e;var n={__proto__:null,[Symbol.toStringTag]:"Module"};return e&&Object.keys(e).forEach(function(t){if(t!=="default"){var i=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,i.get?i:{enumerable:!0,get:function(){return e[t]}})}}),n.default=e,Object.freeze(n)}var m=l(s);const a={diff:{type:String,required:!0,default:""},outputFormat:{type:String,default:"line-by-line"}};function f(e,n,t){let i=e;return n&&(i+=`__${n}`),t&&(i+=`--${t}`),i}function p(e,n=!1){const t=n?`.devui-${e}`:`devui-${e}`;return{b:()=>f(t),e:o=>o?f(t,o):"",m:o=>o?f(t,"",o):"",em:(o,c)=>o&&c?f(t,o,c):""}}function v(e){const{diff:n,outputFormat:t}=r.toRefs(e),i=r.ref("");return r.onMounted(()=>{i.value=m.html(n.value,{drawFileList:!0,matching:"lines",outputFormat:t.value})}),{renderHtml:i}}var y="",w="",d=r.defineComponent({name:"DCodeReview",props:a,setup(e){const n=p("code-review"),{renderHtml:t}=v(e);return()=>r.createVNode("div",{class:n.b(),innerHTML:t.value},null)}}),_={title:"CodeReview \u4EE3\u7801\u68C0\u89C6",category:"\u6F14\u8FDB\u4E2D",status:"100%",install(e){e.component(d.name,d)}};u.CodeReview=d,u.codeReviewProps=a,u.default=_,Object.defineProperty(u,"__esModule",{value:!0}),u[Symbol.toStringTag]="Module"});

package/code-review/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "code-review",
+  "version": "0.0.0",
+  "main": "index.umd.js",
+  "module": "index.es.js",
+  "style": "style.css",
+  "types": "../types/code-review/index.d.ts"
+}

package/code-review/style.css

@@ -0,0 +1 @@
+.d2h-wrapper{text-align:left}.d2h-file-header{background-color:#f7f7f7;border-bottom:1px solid #d8d8d8;display:-webkit-box;display:-ms-flexbox;display:flex;font-family:Source Sans Pro,Helvetica Neue,Helvetica,Arial,sans-serif;height:35px;padding:5px 10px}.d2h-file-header.d2h-sticky-header{position:sticky;top:0;z-index:1}.d2h-file-stats{display:-webkit-box;display:-ms-flexbox;display:flex;font-size:14px;margin-left:auto}.d2h-lines-added{border:1px solid #b4e2b4;border-radius:5px 0 0 5px;color:#399839;padding:2px;text-align:right;vertical-align:middle}.d2h-lines-deleted{border:1px solid #e9aeae;border-radius:0 5px 5px 0;color:#c33;margin-left:1px;padding:2px;text-align:left;vertical-align:middle}.d2h-file-name-wrapper{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:15px;width:100%}.d2h-file-name{overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap}.d2h-file-wrapper{border:1px solid #ddd;border-radius:3px;margin-bottom:1em}.d2h-file-collapse{-webkit-box-pack:end;-ms-flex-pack:end;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:1px solid #ddd;border-radius:3px;cursor:pointer;display:none;font-size:12px;justify-content:flex-end;padding:4px 8px}.d2h-file-collapse.d2h-selected{background-color:#c8e1ff}.d2h-file-collapse-input{margin:0 4px 0 0}.d2h-diff-table{border-collapse:collapse;font-family:Menlo,Consolas,monospace;font-size:13px;width:100%}.d2h-files-diff{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%}.d2h-file-diff{overflow-y:hidden}.d2h-file-diff.d2h-d-none,.d2h-files-diff.d2h-d-none{display:none}.d2h-file-side-diff{display:inline-block;overflow-x:scroll;overflow-y:hidden;width:50%}.d2h-code-line{padding:0 8em;width:calc(100% - 16em)}.d2h-code-line,.d2h-code-side-line{display:inline-block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap}.d2h-code-side-line{padding:0 4.5em;width:calc(100% - 9em)}.d2h-code-line-ctn{word-wrap:normal;background:none;display:inline-block;padding:0;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;vertical-align:middle;white-space:pre;width:100%}.d2h-code-line del,.d2h-code-side-line del{background-color:#ffb6ba;border-radius:.2em;display:inline-block;margin-top:-1px;text-decoration:none}.d2h-code-line ins,.d2h-code-side-line ins{background-color:#97f295;border-radius:.2em;display:inline-block;margin-top:-1px;text-align:left;text-decoration:none}.d2h-code-line-prefix{word-wrap:normal;background:none;display:inline;padding:0;white-space:pre}.line-num1{float:left}.line-num1,.line-num2{-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;padding:0 .5em;text-overflow:ellipsis;width:3.5em}.line-num2{float:right}.d2h-code-linenumber{background-color:#fff;border:solid #eee;border-width:0 1px;-webkit-box-sizing:border-box;box-sizing:border-box;color:#0000004d;cursor:pointer;display:inline-block;position:absolute;text-align:right;width:7.5em}.d2h-code-linenumber:after{content:"\200b"}.d2h-code-side-linenumber{background-color:#fff;border:solid #eee;border-width:0 1px;-webkit-box-sizing:border-box;box-sizing:border-box;color:#0000004d;cursor:pointer;display:inline-block;overflow:hidden;padding:0 .5em;position:absolute;text-align:right;text-overflow:ellipsis;width:4em}.d2h-code-side-linenumber:after{content:"\200b"}.d2h-code-side-emptyplaceholder,.d2h-emptyplaceholder{background-color:#f1f1f1;border-color:#e1e1e1}.d2h-code-line-prefix,.d2h-code-linenumber,.d2h-code-side-linenumber,.d2h-emptyplaceholder{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.d2h-code-linenumber,.d2h-code-side-linenumber{direction:rtl}.d2h-del{background-color:#fee8e9;border-color:#e9aeae}.d2h-ins{background-color:#dfd;border-color:#b4e2b4}.d2h-info{background-color:#f8fafd;border-color:#d5e4f2;color:#0000004d}.d2h-file-diff .d2h-del.d2h-change{background-color:#fdf2d0}.d2h-file-diff .d2h-ins.d2h-change{background-color:#ded}.d2h-file-list-wrapper{margin-bottom:10px}.d2h-file-list-wrapper a{color:#3572b0;text-decoration:none}.d2h-file-list-wrapper a:visited{color:#3572b0}.d2h-file-list-header{text-align:left}.d2h-file-list-title{font-weight:700}.d2h-file-list-line{display:-webkit-box;display:-ms-flexbox;display:flex;text-align:left}.d2h-file-list{display:block;list-style:none;margin:0;padding:0}.d2h-file-list>li{border-bottom:1px solid #ddd;margin:0;padding:5px 10px}.d2h-file-list>li:last-child{border-bottom:none}.d2h-file-switch{cursor:pointer;display:none;font-size:10px}.d2h-icon{fill:currentColor;margin-right:10px;vertical-align:middle}.d2h-deleted{color:#c33}.d2h-added{color:#399839}.d2h-changed{color:#d0b44c}.d2h-moved{color:#3572b0}.d2h-tag{background-color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:10px;margin-left:5px;padding:0 2px}.d2h-deleted-tag{border:1px solid #c33}.d2h-added-tag{border:1px solid #399839}.d2h-changed-tag{border:1px solid #d0b44c}.d2h-moved-tag{border:1px solid #3572b0}.devui-code-review tr{border:none}.devui-code-review th,.devui-code-review td{border:none;padding:0}