vue-devui 1.0.0-alpha.4 → 1.0.0-beta.10

package/time-axis/index.es.js

@@ -0,0 +1,299 @@
+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, inject, createTextVNode, provide, ref, reactive, onMounted, watch, toRef, nextTick, Fragment } from "vue";
+const timeAxisProps = {
+  direction: {
+    type: String,
+    default: "vertical"
+  },
+  center: {
+    type: Boolean,
+    default: false
+  },
+  mode: {
+    type: String,
+    default: "normal"
+  },
+  timePosition: {
+    type: String,
+    default: "left"
+  }
+};
+var DIcon = 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);
+  }
+});
+const timeAxisItemProps = {
+  time: {
+    type: String
+  },
+  dotColor: {
+    type: String
+  },
+  lineStyle: {
+    type: String,
+    default: "solid"
+  },
+  lineColor: {
+    type: String
+  },
+  position: {
+    type: String
+  },
+  timePosition: {
+    type: String,
+    default: "left"
+  },
+  type: {
+    type: String,
+    default: "primary"
+  }
+};
+var TimeAxisItem = defineComponent({
+  name: "DTimeAxisItem",
+  components: {
+    DIcon
+  },
+  props: timeAxisItemProps,
+  emits: [],
+  setup(props, ctx) {
+    const timeAxis2 = inject("timeAxis");
+    const itemClass = "devui-time-axis-item";
+    const renderTime = () => {
+      var _a, _b;
+      return createVNode("div", {
+        "class": `${itemClass}-time`
+      }, [ctx.slots.time ? (_b = (_a = ctx.slots).time) == null ? void 0 : _b.call(_a) : props.time]);
+    };
+    const renderContent = () => {
+      var _a, _b;
+      return createVNode("div", {
+        "class": `${itemClass}-content`
+      }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a, props)]);
+    };
+    const renderPosition = (types) => {
+      if (types.includes(props.position)) {
+        return renderContent();
+      } else {
+        if (timeAxis2.props.direction === "horizontal") {
+          return renderTime();
+        } else {
+          return props.timePosition === "left" ? renderTime() : "";
+        }
+      }
+    };
+    const setTypeIcon = (type) => {
+      if (type === "primary") {
+        return "";
+      }
+      return createVNode("i", {
+        "class": `icon-${type === "success" ? "right" : type}-o`
+      }, null);
+    };
+    const renderDot = () => {
+      var _a, _b;
+      if (ctx.slots.dot) {
+        return createVNode("div", {
+          "style": {
+            color: props.dotColor
+          },
+          "class": `${itemClass}-dot`
+        }, [createTextVNode(" "), (_b = (_a = ctx.slots).dot) == null ? void 0 : _b.call(_a)]);
+      } else {
+        return createVNode("div", {
+          "class": `${itemClass}-dot ${itemClass}-type-${props.type}`,
+          "style": {
+            borderColor: props.dotColor
+          }
+        }, [setTypeIcon(props.type)]);
+      }
+    };
+    return () => {
+      return createVNode("div", {
+        "class": itemClass
+      }, [createVNode("div", {
+        "class": `${itemClass}-data-left ${itemClass}-data-top`
+      }, [renderPosition(["top", "left"])]), createVNode("div", {
+        "class": `${itemClass}-axis`
+      }, [renderDot(), timeAxis2.props.direction === "vertical" && props.timePosition === "bottom" ? renderTime() : "", createVNode("div", {
+        "class": `${itemClass}-line ${itemClass}-line-style-${props.lineStyle}`,
+        "style": {
+          borderColor: props.lineColor
+        }
+      }, [ctx.slots.extra ? createVNode("div", {
+        "class": `${itemClass}-line-extra`
+      }, [ctx.slots.extra()]) : ""])]), createVNode("div", {
+        "class": `${itemClass}-data-right ${itemClass}-data-bottom`
+      }, [renderPosition(["right", "bottom"])])]);
+    };
+  }
+});
+var timeAxis = "";
+var TimeAxis = defineComponent({
+  name: "DTimeAxis",
+  components: {
+    TimeAxisItem
+  },
+  props: timeAxisProps,
+  emits: [],
+  setup(props, ctx) {
+    provide("timeAxis", {
+      ctx,
+      props
+    });
+    const timeAxis2 = ref();
+    const style = reactive({
+      marginLeft: "0px",
+      height: "auto"
+    });
+    const setStyle = () => {
+      style.height = "auto";
+      style.marginLeft = "0px";
+      if (props.direction === "horizontal") {
+        nextTick(() => {
+          var _a;
+          const el = timeAxis2.value;
+          if (props.center) {
+            style.marginLeft = (((_a = el == null ? void 0 : el.firstElementChild) == null ? void 0 : _a.clientWidth) || 0) / 2 + "px";
+          }
+          style.height = Math.max(...Array.from(el == null ? void 0 : el.querySelectorAll(".devui-time-axis-item-data-top")).map((el2) => el2.clientHeight), ...Array.from(el == null ? void 0 : el.querySelectorAll(".devui-time-axis-item-data-bottom")).map((el2) => el2.clientHeight)) * 2 + Math.max(...Array.from(el == null ? void 0 : el.querySelectorAll(".devui-time-axis-item-axis")).map((el2) => el2.clientHeight)) + "px";
+        });
+      }
+    };
+    onMounted(() => {
+      setStyle();
+    });
+    watch(toRef(props, "direction"), () => {
+      setStyle();
+    });
+    return () => {
+      const renderItemPosition = (item, position) => {
+        return position ? createVNode(item, {
+          "position": position
+        }, null) : createVNode(item, null, null);
+      };
+      const renderItem = () => {
+        var _a, _b, _c;
+        const slots = (_c = (_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)) != null ? _c : [];
+        let children;
+        if (slots.length === 1 && slots[0].type === Fragment) {
+          children = slots[0].children || [];
+        } else {
+          children = slots;
+        }
+        return children.map((item, index2) => {
+          var _a2, _b2, _c2, _d, _e, _f, _g, _h;
+          if (index2 + 1 === children.length) {
+            if (!((_a2 = item.props) == null ? void 0 : _a2.lineStyle) && !((_b2 = item.props) == null ? void 0 : _b2["line-style"])) {
+              item = createVNode(item, {
+                "line-style": "none"
+              }, null);
+            }
+          }
+          if (!((_c2 = item.props) == null ? void 0 : _c2.timePosition) && !((_d = item.props) == null ? void 0 : _d["time-position"])) {
+            item = createVNode(item, {
+              "time-position": props.timePosition ? props.timePosition : "left"
+            }, null);
+          }
+          if (props.direction === "horizontal") {
+            if (((_e = item.props) == null ? void 0 : _e.position) === "top" || ((_f = item.props) == null ? void 0 : _f.position) === "bottom")
+              return item;
+            if (props.mode === "alternative") {
+              return renderItemPosition(item, index2 % 2 == 0 ? "bottom" : "top");
+            } else {
+              return renderItemPosition(item, "bottom");
+            }
+          } else {
+            if (((_g = item.props) == null ? void 0 : _g.position) === "left" || ((_h = item.props) == null ? void 0 : _h.position) === "right")
+              return item;
+            if (props.mode === "alternative") {
+              return renderItemPosition(item, index2 % 2 == 0 ? "left" : "right");
+            } else {
+              return renderItemPosition(item, "right");
+            }
+          }
+        });
+      };
+      const getDirection = () => {
+        return props.direction === "horizontal" ? "horizontal" : "vertical";
+      };
+      return createVNode("div", {
+        "class": `devui-time-axis devui-time-axis-${getDirection()}  ${props.center ? "devui-time-axis-" + getDirection() + "-center" : ""} `,
+        "ref": timeAxis2,
+        "style": style
+      }, [renderItem()]);
+    };
+  }
+});
+TimeAxis.install = function(app) {
+  app.component(TimeAxis.name, TimeAxis);
+};
+TimeAxisItem.install = function(app) {
+  app.component(TimeAxisItem.name, TimeAxisItem);
+};
+var index = {
+  title: "TimeAxis \u65F6\u95F4\u8F74",
+  category: "\u6570\u636E\u5C55\u793A",
+  status: "100%",
+  install(app) {
+    app.use(TimeAxis);
+    app.use(TimeAxisItem);
+  }
+};
+export { TimeAxis, TimeAxisItem, index as default };

package/time-axis/index.umd.js

@@ -0,0 +1 @@
+var F=Object.defineProperty;var I=Object.getOwnPropertySymbols;var j=Object.prototype.hasOwnProperty,H=Object.prototype.propertyIsEnumerable;var z=(r,t,a)=>t in r?F(r,t,{enumerable:!0,configurable:!0,writable:!0,value:a}):r[t]=a,D=(r,t)=>{for(var a in t||(t={}))j.call(t,a)&&z(r,a,t[a]);if(I)for(var a of I(t))H.call(t,a)&&z(r,a,t[a]);return r};(function(r,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(r=typeof globalThis!="undefined"?globalThis:r||self,t(r.index={},r.Vue))})(this,function(r,t){"use strict";const a={direction:{type:String,default:"vertical"},center:{type:Boolean,default:!1},mode:{type:String,default:"normal"},timePosition:{type:String,default:"left"}};var q=t.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(e){return D({},e)},render(){const{name:e,size:l,color:f,classPrefix:i}=this;return/^((https?):)?\/\//.test(e)?t.createVNode("img",{src:e,alt:e.split("/")[e.split("/").length-1],style:{width:l,verticalAlign:"text-bottom"}},null):t.createVNode("i",{class:`${i} ${i}-${e}`,style:{fontSize:l,color:f}},null)}});const v={time:{type:String},dotColor:{type:String},lineStyle:{type:String,default:"solid"},lineColor:{type:String},position:{type:String},timePosition:{type:String,default:"left"},type:{type:String,default:"primary"}};var p=t.defineComponent({name:"DTimeAxisItem",components:{DIcon:q},props:v,emits:[],setup(e,l){const f=t.inject("timeAxis"),i="devui-time-axis-item",y=()=>{var o,d;return t.createVNode("div",{class:`${i}-time`},[l.slots.time?(d=(o=l.slots).time)==null?void 0:d.call(o):e.time])},n=()=>{var o,d;return t.createVNode("div",{class:`${i}-content`},[(d=(o=l.slots).default)==null?void 0:d.call(o,e)])},u=o=>o.includes(e.position)?n():f.props.direction==="horizontal"||e.timePosition==="left"?y():"",c=o=>o==="primary"?"":t.createVNode("i",{class:`icon-${o==="success"?"right":o}-o`},null),m=()=>{var o,d;return l.slots.dot?t.createVNode("div",{style:{color:e.dotColor},class:`${i}-dot`},[t.createTextVNode(" "),(d=(o=l.slots).dot)==null?void 0:d.call(o)]):t.createVNode("div",{class:`${i}-dot ${i}-type-${e.type}`,style:{borderColor:e.dotColor}},[c(e.type)])};return()=>t.createVNode("div",{class:i},[t.createVNode("div",{class:`${i}-data-left ${i}-data-top`},[u(["top","left"])]),t.createVNode("div",{class:`${i}-axis`},[m(),f.props.direction==="vertical"&&e.timePosition==="bottom"?y():"",t.createVNode("div",{class:`${i}-line ${i}-line-style-${e.lineStyle}`,style:{borderColor:e.lineColor}},[l.slots.extra?t.createVNode("div",{class:`${i}-line-extra`},[l.slots.extra()]):""])]),t.createVNode("div",{class:`${i}-data-right ${i}-data-bottom`},[u(["right","bottom"])])])}}),L="",g=t.defineComponent({name:"DTimeAxis",components:{TimeAxisItem:p},props:a,emits:[],setup(e,l){t.provide("timeAxis",{ctx:l,props:e});const f=t.ref(),i=t.reactive({marginLeft:"0px",height:"auto"}),y=()=>{i.height="auto",i.marginLeft="0px",e.direction==="horizontal"&&t.nextTick(()=>{var u;const n=f.value;e.center&&(i.marginLeft=(((u=n==null?void 0:n.firstElementChild)==null?void 0:u.clientWidth)||0)/2+"px"),i.height=Math.max(...Array.from(n==null?void 0:n.querySelectorAll(".devui-time-axis-item-data-top")).map(c=>c.clientHeight),...Array.from(n==null?void 0:n.querySelectorAll(".devui-time-axis-item-data-bottom")).map(c=>c.clientHeight))*2+Math.max(...Array.from(n==null?void 0:n.querySelectorAll(".devui-time-axis-item-axis")).map(c=>c.clientHeight))+"px"})};return t.onMounted(()=>{y()}),t.watch(t.toRef(e,"direction"),()=>{y()}),()=>{const n=(m,o)=>o?t.createVNode(m,{position:o},null):t.createVNode(m,null,null),u=()=>{var d,x,S;const m=(S=(x=(d=l.slots).default)==null?void 0:x.call(d))!=null?S:[];let o;return m.length===1&&m[0].type===t.Fragment?o=m[0].children||[]:o=m,o.map((s,h)=>{var A,$,V,N,C,P,T,b;return h+1===o.length&&!((A=s.props)==null?void 0:A.lineStyle)&&!(($=s.props)==null?void 0:$["line-style"])&&(s=t.createVNode(s,{"line-style":"none"},null)),!((V=s.props)==null?void 0:V.timePosition)&&!((N=s.props)==null?void 0:N["time-position"])&&(s=t.createVNode(s,{"time-position":e.timePosition?e.timePosition:"left"},null)),e.direction==="horizontal"?((C=s.props)==null?void 0:C.position)==="top"||((P=s.props)==null?void 0:P.position)==="bottom"?s:e.mode==="alternative"?n(s,h%2==0?"bottom":"top"):n(s,"bottom"):((T=s.props)==null?void 0:T.position)==="left"||((b=s.props)==null?void 0:b.position)==="right"?s:e.mode==="alternative"?n(s,h%2==0?"left":"right"):n(s,"right")})},c=()=>e.direction==="horizontal"?"horizontal":"vertical";return t.createVNode("div",{class:`devui-time-axis devui-time-axis-${c()}  ${e.center?"devui-time-axis-"+c()+"-center":""} `,ref:f,style:i},[u()])}}});g.install=function(e){e.component(g.name,g)},p.install=function(e){e.component(p.name,p)};var M={title:"TimeAxis \u65F6\u95F4\u8F74",category:"\u6570\u636E\u5C55\u793A",status:"100%",install(e){e.use(g),e.use(p)}};r.TimeAxis=g,r.TimeAxisItem=p,r.default=M,Object.defineProperty(r,"__esModule",{value:!0}),r[Symbol.toStringTag]="Module"});

package/time-axis/package.json

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

package/time-axis/style.css

@@ -0,0 +1 @@
+.devui-time-axis-vertical{display:flex;flex-direction:column;align-items:center;position:relative}.devui-time-axis-vertical .devui-time-axis-item{display:flex;flex-direction:row;width:100%}.devui-time-axis-vertical .devui-time-axis-item-axis{display:flex;flex-direction:column;align-items:center;padding:0 12px}.devui-time-axis-vertical .devui-time-axis-item-line{position:relative;height:calc(100% - 18px);min-height:20px;border-left-width:2px;border-left-color:var(--devui-dividing-line, #dfe1e6)}.devui-time-axis-vertical .devui-time-axis-item-line-extra{position:absolute;top:50%;transform:translate(-50%,-50%)}.devui-time-axis-vertical .devui-time-axis-item-line:first-child{display:none}.devui-time-axis-vertical .devui-time-axis-item-data-left{text-align:end}.devui-time-axis-vertical .devui-time-axis-item-data-left,.devui-time-axis-vertical .devui-time-axis-item-data-right{margin-bottom:24px;margin-top:-2px;flex:1}.devui-time-axis-vertical .devui-time-axis-item-line-style-dashed{border-left-style:dashed}.devui-time-axis-vertical .devui-time-axis-item-line-style-solid{border-left-style:solid}.devui-time-axis-vertical .devui-time-axis-item-line-style-dotted{border-left-style:dotted}.devui-time-axis-vertical .devui-time-axis-item-line-style-none{border-left-style:none}.devui-time-axis-vertical .devui-time-axis-item .devui-time-axis-middle-zone{position:absolute;top:50%;transform:translate(-50%,-50%)}.devui-time-axis-horizontal{display:flex;flex-direction:row;align-items:center;position:relative}.devui-time-axis-horizontal-center .devui-time-axis-item-data-top,.devui-time-axis-horizontal-center .devui-time-axis-item-data-bottom{text-align:center;padding:0 6px}.devui-time-axis-horizontal-center .devui-time-axis-item-data-top>div,.devui-time-axis-horizontal-center .devui-time-axis-item-data-bottom>div{transform:translate(-50%)}.devui-time-axis-horizontal .devui-time-axis-item{display:flex;flex-direction:column;height:100%}.devui-time-axis-horizontal .devui-time-axis-item-axis{display:flex;flex-direction:row;align-items:center;padding:12px 0}.devui-time-axis-horizontal .devui-time-axis-item-line{position:relative;min-width:60px;width:calc(100% - 18px);border-bottom-width:2px;border-bottom-color:var(--devui-dividing-line, #dfe1e6)}.devui-time-axis-horizontal .devui-time-axis-item-line-extra{position:absolute;left:50%;transform:translate(-50%,-50%)}.devui-time-axis-horizontal .devui-time-axis-item:first-child .devui-time-axis-item-line:first-child{opacity:0}.devui-time-axis-horizontal .devui-time-axis-item-data-top,.devui-time-axis-horizontal .devui-time-axis-item-data-bottom{padding-right:12px;flex:1}.devui-time-axis-horizontal .devui-time-axis-item-line-style-dashed{border-bottom-style:dashed}.devui-time-axis-horizontal .devui-time-axis-item-line-style-solid{border-bottom-style:solid}.devui-time-axis-horizontal .devui-time-axis-item-line-style-dotted{border-bottom-style:dotted}.devui-time-axis-horizontal .devui-time-axis-item-line-style-none{border-bottom-style:none}.devui-time-axis-horizontal .devui-time-axis-item .devui-time-axis-middle-zone{position:absolute;left:50%;transform:translate(-50%,-50%)}.devui-time-axis-item-dot,.devui-time-axis-item-dot>svg{width:18px;height:18px;flex-shrink:0}.devui-time-axis-item-dot>i{font-size:18px;vertical-align:0}.devui-time-axis-item-type-primary{border:2px solid var(--devui-placeholder, #8a8e99);border-radius:50%}.devui-time-axis-item-type-success i{color:var(--devui-success, #50d4ab)}.devui-time-axis-item-type-error i{color:var(--devui-danger, #f66f6a)}.devui-time-axis-item-type-warning i{color:var(--devui-warning, #fac20a)}.devui-time-axis-item-type-running{line-height:16px;text-align:center;animation:devui-time-axis-running 1.5s linear infinite;border:2px solid var(--devui-success, #50d4ab);border-radius:50%}@keyframes devui-time-axis-running{0%{transform:rotate(0);color:var(--devui-success, #50d4ab);border-color:var(--devui-success, #50d4ab)}50%{transform:rotate(180deg);color:var(--devui-success, #50d4ab);border-color:var(--devui-success, #50d4ab)}to{transform:rotate(360deg);color:var(--devui-success, #50d4ab);border-color:var(--devui-success, #50d4ab)}}

package/time-picker/index.d.ts

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