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

package/gantt/index.es.js

@@ -0,0 +1,535 @@
+import { defineComponent, toRefs, ref, onMounted, watch, createVNode, withDirectives, resolveComponent, resolveDirective, createTextVNode } from "vue";
+var ganttScale = "";
+var GanttScaleUnit;
+(function(GanttScaleUnit2) {
+  GanttScaleUnit2["day"] = "day";
+  GanttScaleUnit2["week"] = "week";
+  GanttScaleUnit2["month"] = "month";
+})(GanttScaleUnit || (GanttScaleUnit = {}));
+var GanttMarkerType;
+(function(GanttMarkerType2) {
+  GanttMarkerType2["milestone"] = "milestone";
+  GanttMarkerType2["month"] = "month";
+  GanttMarkerType2["week"] = "week";
+})(GanttMarkerType || (GanttMarkerType = {}));
+var UnitRole;
+(function(UnitRole2) {
+  UnitRole2[UnitRole2["day"] = 10] = "day";
+  UnitRole2[UnitRole2["week"] = 20] = "week";
+  UnitRole2[UnitRole2["month"] = 30] = "month";
+})(UnitRole || (UnitRole = {}));
+const isSameDate = (date, compareDate) => {
+  return date.getFullYear() === compareDate.getFullYear() && date.getMonth() === compareDate.getMonth() && date.getDate() === compareDate.getDate();
+};
+const useScaleData = (milestoneList) => {
+  const SCALE_START_LABLE_OFFSET = 7;
+  const generateDateInfo = (date, index2) => {
+    const dateInfo = {
+      dayOfMonthLabel: "",
+      dayOfWeekLabel: "",
+      monthLabel: "",
+      yearLabel: "",
+      date,
+      monthStart: false,
+      weekend: false,
+      today: false,
+      milestone: "",
+      highlightStart: false,
+      scaleStartVisable: true,
+      index: index2
+    };
+    const dayOfMonth = date.getDate();
+    dateInfo.dayOfMonthLabel = dayOfMonth + "";
+    if (dayOfMonth === 1) {
+      dateInfo.monthStart = true;
+    }
+    const dayOfWeek = date.getDay();
+    dateInfo.dayOfWeekLabel = dayOfWeek + "";
+    if (dayOfWeek === 6) {
+      dateInfo.weekend = true;
+    }
+    const month = date.getMonth() + 1;
+    dateInfo.monthLabel = month + "";
+    const year = date.getFullYear();
+    dateInfo.yearLabel = year + "";
+    if (isSameDate(date, new Date())) {
+      dateInfo.today = true;
+    }
+    if (new Date(year, month - 1, dayOfMonth + SCALE_START_LABLE_OFFSET).getMonth() > month - 1) {
+      dateInfo.scaleStartVisable = false;
+    }
+    if (milestoneList.value) {
+      milestoneList.value.forEach((milestone) => {
+        if (milestone.date) {
+          if (isSameDate(milestone.date, dateInfo.date)) {
+            dateInfo.milestone = milestone.lable;
+          }
+        }
+      });
+    }
+    return dateInfo;
+  };
+  const getNextDay = (date) => {
+    const nextDayDate = date.setDate(date.getDate() + 1);
+    return new Date(nextDayDate);
+  };
+  const generateScaleData = (startDate, endDate) => {
+    const scaleData = [];
+    let handleDate = startDate;
+    let index2 = 0;
+    while (!isSameDate(handleDate, endDate)) {
+      const dateInfo = generateDateInfo(handleDate, index2);
+      scaleData.push(dateInfo);
+      handleDate = getNextDay(new Date(handleDate));
+      index2++;
+    }
+    console.log({ scaleData });
+    return scaleData;
+  };
+  return {
+    generateScaleData
+  };
+};
+const i18nText = {
+  en: {
+    today: "today",
+    monthsOfYear: [
+      "January",
+      "February",
+      "March",
+      "April",
+      "May",
+      "June",
+      "July",
+      "August",
+      "September",
+      "October",
+      "November",
+      "December"
+    ],
+    yearDisplay(year) {
+      return `${year}`;
+    },
+    monthDisplay(strMonthIndex) {
+      return this.monthsOfYear[Number(strMonthIndex) - 1];
+    },
+    yearAndMonthDisplay(year, strMonthIndex) {
+      return this.yearDisplay(year) + this.monthDisplay(strMonthIndex);
+    }
+  },
+  zh: {
+    today: "\u4ECA\u5929",
+    monthsOfYear: [
+      "1\u6708",
+      "2\u6708",
+      "3\u6708",
+      "4\u6708",
+      "5\u6708",
+      "6\u6708",
+      "7\u6708",
+      "8\u6708",
+      "9\u6708",
+      "10\u6708",
+      "11\u6708",
+      "12\u6708"
+    ],
+    yearDisplay(year) {
+      return `${year}\u5E74`;
+    },
+    monthDisplay(strMonthIndex) {
+      return this.monthsOfYear[Number(strMonthIndex) - 1];
+    },
+    yearAndMonthDisplay(year, strMonthIndex) {
+      return this.yearDisplay(year) + this.monthDisplay(strMonthIndex);
+    }
+  }
+};
+var DGanttScale = defineComponent({
+  name: "DGanttScale",
+  props: {
+    unit: {
+      type: String,
+      default: GanttScaleUnit.day
+    },
+    height: {
+      type: Number
+    },
+    startDate: {
+      type: Date
+    },
+    endDate: {
+      type: Date
+    },
+    ganttScaleContainerOffsetLeft: {
+      type: Number
+    },
+    milestoneList: {
+      type: Array
+    },
+    scrollElement: {
+      type: Object
+    },
+    ganttBarContainerElement: {
+      type: Object
+    }
+  },
+  emits: ["addMilestone"],
+  setup(props, ctx) {
+    const {
+      startDate,
+      endDate,
+      milestoneList,
+      scrollElement,
+      unit
+    } = toRefs(props);
+    const scaleData = ref([]);
+    const viewSCaleData = ref([]);
+    const scaleWidth = ref({
+      day: 40,
+      week: 30,
+      month: 20
+    });
+    const highlight = ref(false);
+    const highlightStartText = ref("");
+    const highlightEndText = ref("");
+    const {
+      generateScaleData
+    } = useScaleData(milestoneList);
+    let viewScaleRange = [0, 0];
+    const addMilestone = (info) => {
+      ctx.emit("addMilestone", info);
+    };
+    const getViewScaleData = () => {
+      if (scrollElement.value) {
+        const containerWidth = scrollElement.value.clientWidth;
+        const scrollLeft = scrollElement.value.scrollLeft;
+        const start = Math.floor(scrollLeft / scaleWidth.value[unit.value]);
+        const offset = Math.ceil(containerWidth / scaleWidth.value[unit.value]);
+        viewScaleRange = [start - 2, start + offset + 2];
+        viewSCaleData.value = scaleData.value.filter((i) => {
+          return i.index >= viewScaleRange[0] && i.index <= viewScaleRange[1];
+        });
+      }
+    };
+    onMounted(() => {
+      if (startDate.value && endDate.value) {
+        scaleData.value = generateScaleData(startDate.value, endDate.value);
+        getViewScaleData();
+      }
+    });
+    watch(() => props.scrollElement, () => {
+      getViewScaleData();
+      props.scrollElement.addEventListener("scroll", () => {
+        getViewScaleData();
+      });
+    });
+    return {
+      viewSCaleData,
+      scaleWidth,
+      addMilestone,
+      highlight,
+      highlightStartText,
+      highlightEndText
+    };
+  },
+  render() {
+    const {
+      unit,
+      viewSCaleData,
+      scaleWidth,
+      addMilestone,
+      highlight,
+      highlightStartText,
+      highlightEndText,
+      ganttBarContainerElement
+    } = this;
+    return createVNode("div", {
+      "class": "devui-gantt-scale-wrapper"
+    }, [viewSCaleData.map((data, index2) => withDirectives(createVNode("div", {
+      "class": `devui-gantt-scale ${unit} ${data.today} ${data.milestone}`,
+      "style": {
+        left: `${scaleWidth[unit] * data.index}px`,
+        width: `${scaleWidth[unit]}px`
+      }
+    }, [createVNode("div", {
+      "class": `devui-scale-start ${data.milestone}`
+    }, [data.milestone && unit === "day" && createVNode("div", null, [data.milestone]), (!data.milestone || unit !== "day") && data.scaleStartVisable && (index2 === 0 || data.monthStart) ? unit === "month" ? i18nText.zh.yearDisplay(data.yearLabel) : i18nText.zh.yearAndMonthDisplay(data.yearLabel, data.monthLabel) : ""]), createVNode("div", {
+      "class": "devui-scale-unit"
+    }, [highlight && data.highlightStart && createVNode("div", {
+      "class": "scale-highlight"
+    }, [createVNode("div", {
+      "style": "float: left"
+    }, [highlightStartText]), createVNode("div", {
+      "style": "float: right"
+    }, [highlightEndText]), createVNode("div", {
+      "style": "clear: both"
+    }, null)]), (!highlight || !data.highlightStart) && unit === "day" && createVNode("div", {
+      "class": `border-left ${data.today ? "today" : ""}`
+    }, [data.today ? i18nText.zh.today : data.dayOfMonthLabel]), (!highlight || !data.highlightStart) && unit === "week" && createVNode("div", {
+      "class": `${data.weekend || index2 === 0 ? "border-left" : ""}`
+    }, [index2 === 0 || data.weekend ? data.dayOfMonthLabel : ""]), (!highlight || !data.highlightStart) && unit === "month" && createVNode("div", {
+      "class": `${data.monthStart || index2 === 0 ? "border-left" : ""}`
+    }, [index2 === 0 || data.monthStart ? i18nText.zh.monthDisplay(data.monthLabel) : ""])]), createVNode("div", {
+      "class": `milestone-new ${unit}`,
+      "title": "milestone",
+      "onClick": () => addMilestone(data)
+    }, [createVNode(resolveComponent("d-icon"), {
+      "name": "add"
+    }, null)])]), [[resolveDirective("gantt-marker"), {
+      ganttBarContainerElement,
+      monthMark: data.monthMark,
+      weekend: data.weekend,
+      milestone: data.milestone,
+      today: data.today,
+      date: data.date,
+      unit,
+      last: index2 === viewSCaleData.length - 1
+    }]]))]);
+  }
+});
+var ganttTools = "";
+var GanttTools = defineComponent({
+  name: "DGanttTools",
+  props: {
+    unit: {
+      type: String,
+      default: null
+    },
+    isFullScreen: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["goToday", "reduceUnit", "increaseUnit", "switchView"],
+  setup(props, ctx) {
+    const currentUnitLabel = ref(props.unit);
+    const views = ref([{
+      name: "Day",
+      value: "day"
+    }, {
+      name: "Week",
+      value: "week"
+    }, {
+      name: "Month",
+      value: "month"
+    }]);
+    const actionHandle = (type) => {
+      switch (type) {
+        case "today":
+          ctx.emit("goToday");
+          break;
+        case "reduce":
+          ctx.emit("reduceUnit");
+          break;
+        case "increase":
+          ctx.emit("increaseUnit");
+          break;
+      }
+    };
+    const selectView = (selectItem) => {
+      ctx.emit("switchView", selectItem.value);
+    };
+    return {
+      actionHandle,
+      currentUnitLabel,
+      views,
+      selectView
+    };
+  },
+  render() {
+    const {
+      isFullScreen,
+      actionHandle,
+      views,
+      selectView,
+      $slots
+    } = this;
+    return createVNode("div", {
+      "class": "tools-container",
+      "style": {
+        position: isFullScreen ? "fixed" : "absolute"
+      }
+    }, [createVNode(resolveComponent("d-button"), {
+      "btnStyle": "common",
+      "onClick": () => actionHandle("today"),
+      "class": "tool"
+    }, {
+      default: () => [createTextVNode("Today")]
+    }), createVNode("div", {
+      "class": "tool"
+    }, [createVNode(resolveComponent("d-select"), {
+      "modelValue": this.currentUnitLabel,
+      "onUpdate:modelValue": ($event) => this.currentUnitLabel = $event,
+      "options": views,
+      "onValueChange": selectView
+    }, null)]), createVNode(resolveComponent("d-button"), {
+      "btnStyle": "common",
+      "class": ["tool", "minus", this.currentUnitLabel === GanttScaleUnit.day ? "disabled" : ""],
+      "disabled": this.currentUnitLabel === GanttScaleUnit.day,
+      "onClick": () => actionHandle("reduce")
+    }, {
+      default: () => [createVNode(resolveComponent("d-icon"), {
+        "name": "minus"
+      }, null)]
+    }), createVNode(resolveComponent("d-button"), {
+      "btnStyle": "common",
+      "class": ["tool", "add", this.currentUnitLabel === GanttScaleUnit.month ? "disabled" : ""],
+      "disabled": this.currentUnitLabel === GanttScaleUnit.month,
+      "onClick": () => actionHandle("increase")
+    }, {
+      default: () => [createVNode(resolveComponent("d-icon"), {
+        "name": "add"
+      }, null)]
+    }), $slots.default && $slots.default()]);
+  }
+});
+const ganttProps = {
+  startDate: {
+    type: Date
+  },
+  endDate: {
+    type: Date
+  },
+  unit: {
+    type: String,
+    default: GanttScaleUnit.day
+  },
+  progressRate: {
+    type: Number
+  }
+};
+var gantt = "";
+const useGantt = (scaleUnit = GanttScaleUnit.day) => {
+  const DAY_DURATION = 24 * 60 * 60 * 1e3;
+  const getScaleUnitPixel = () => {
+    switch (scaleUnit) {
+      case GanttScaleUnit.day:
+        return 40;
+      case GanttScaleUnit.week:
+        return 30;
+      case GanttScaleUnit.month:
+        return 20;
+    }
+  };
+  const getDuration = (startDate, endDate) => {
+    if (startDate && endDate) {
+      const timeOffset = endDate.getTime() - startDate.getTime();
+      const duration = timeOffset / DAY_DURATION + 1;
+      console.log("duration => ", duration);
+      return Math.round(duration);
+    }
+  };
+  const getDurationWidth = (startDate, endDate) => {
+    if (startDate && endDate) {
+      const duration = getDuration(startDate, endDate);
+      return duration * getScaleUnitPixel();
+    }
+  };
+  return {
+    getDurationWidth
+  };
+};
+var Gantt = defineComponent({
+  name: "DGantt",
+  components: {
+    DGanttScale,
+    DGanttTools: GanttTools
+  },
+  props: ganttProps,
+  setup(props, ctx) {
+    const {
+      startDate,
+      endDate
+    } = toRefs(props);
+    const ganttContainer = ref();
+    const ganttScaleWidth = ref();
+    const {
+      getDurationWidth
+    } = useGantt();
+    onMounted(() => {
+      ganttScaleWidth.value = getDurationWidth(startDate.value, endDate.value);
+    });
+    return {
+      ganttContainer,
+      ganttScaleWidth
+    };
+  },
+  render() {
+    const {
+      $slots,
+      startDate,
+      endDate,
+      unit,
+      ganttContainer,
+      ganttScaleWidth
+    } = this;
+    return createVNode("div", {
+      "style": {
+        position: "relative"
+      }
+    }, [createVNode("div", {
+      "class": "devui-gantt gantt-container",
+      "ref": "ganttContainer"
+    }, [createVNode("div", {
+      "class": "header",
+      "style": {
+        width: `${ganttScaleWidth}px`
+      }
+    }, [createVNode(resolveComponent("d-gantt-scale"), {
+      "startDate": startDate,
+      "endDate": endDate,
+      "unit": unit,
+      "scrollElement": ganttContainer
+    }, null)]), createVNode(resolveComponent("d-gantt-tools"), {
+      "unit": unit
+    }, null), createVNode("div", {
+      "class": "body",
+      "style": {
+        width: `${ganttScaleWidth}px`
+      }
+    }, null)])]);
+  }
+});
+const ganttMarkerDirective = {
+  ganttBarContainerElement: null,
+  monthMarkElement: null,
+  weekendElement: null,
+  todayElement: null,
+  milestoneElement: null,
+  monthMark: "",
+  mounted(el, binding) {
+    const { ganttBarContainerElement, monthMark } = binding.value;
+    if (ganttBarContainerElement) {
+      this.ganttBarContainerElement = ganttBarContainerElement;
+    }
+    if (monthMark) {
+      this.monthMark = this.monthMark;
+    }
+  },
+  updated(el, binding) {
+    const { monthMark, weekend, today, milestone, unit } = binding.value;
+    if (monthMark) {
+      this.initMarkElement();
+    }
+  },
+  initMarkElement() {
+    if (this.ganttBarContainerElement) {
+      if (this.monthMark && !this.monthMarkElement)
+        ;
+    }
+  }
+};
+Gantt.install = function(app) {
+  app.component(Gantt.name, Gantt);
+  app.component(GanttTools.name, GanttTools);
+  app.directive("gantt-marker", ganttMarkerDirective);
+};
+var index = {
+  title: "Gantt \u7518\u7279\u56FE",
+  category: "\u6570\u636E\u5C55\u793A",
+  status: "10%",
+  install(app) {
+    app.use(Gantt);
+  }
+};
+export { Gantt, index as default };

package/gantt/index.umd.js

@@ -0,0 +1 @@
+(function(u,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(u=typeof globalThis!="undefined"?globalThis:u||self,t(u.index={},u.Vue))})(this,function(u,t){"use strict";var U="",h;(function(e){e.day="day",e.week="week",e.month="month"})(h||(h={}));var V;(function(e){e.milestone="milestone",e.month="month",e.week="week"})(V||(V={}));var M;(function(e){e[e.day=10]="day",e[e.week=20]="week",e[e.month=30]="month"})(M||(M={}));const p=(e,o)=>e.getFullYear()===o.getFullYear()&&e.getMonth()===o.getMonth()&&e.getDate()===o.getDate(),E=e=>{const o=7,r=(a,l)=>{const i={dayOfMonthLabel:"",dayOfWeekLabel:"",monthLabel:"",yearLabel:"",date:a,monthStart:!1,weekend:!1,today:!1,milestone:"",highlightStart:!1,scaleStartVisable:!0,index:l},n=a.getDate();i.dayOfMonthLabel=n+"",n===1&&(i.monthStart=!0);const d=a.getDay();i.dayOfWeekLabel=d+"",d===6&&(i.weekend=!0);const m=a.getMonth()+1;i.monthLabel=m+"";const D=a.getFullYear();return i.yearLabel=D+"",p(a,new Date)&&(i.today=!0),new Date(D,m-1,n+o).getMonth()>m-1&&(i.scaleStartVisable=!1),e.value&&e.value.forEach(f=>{f.date&&p(f.date,i.date)&&(i.milestone=f.lable)}),i},s=a=>{const l=a.setDate(a.getDate()+1);return new Date(l)};return{generateScaleData:(a,l)=>{const i=[];let n=a,d=0;for(;!p(n,l);){const m=r(n,d);i.push(m),n=s(new Date(n)),d++}return console.log({scaleData:i}),i}}},g={en:{today:"today",monthsOfYear:["January","February","March","April","May","June","July","August","September","October","November","December"],yearDisplay(e){return`${e}`},monthDisplay(e){return this.monthsOfYear[Number(e)-1]},yearAndMonthDisplay(e,o){return this.yearDisplay(e)+this.monthDisplay(o)}},zh:{today:"\u4ECA\u5929",monthsOfYear:["1\u6708","2\u6708","3\u6708","4\u6708","5\u6708","6\u6708","7\u6708","8\u6708","9\u6708","10\u6708","11\u6708","12\u6708"],yearDisplay(e){return`${e}\u5E74`},monthDisplay(e){return this.monthsOfYear[Number(e)-1]},yearAndMonthDisplay(e,o){return this.yearDisplay(e)+this.monthDisplay(o)}}};var L=t.defineComponent({name:"DGanttScale",props:{unit:{type:String,default:h.day},height:{type:Number},startDate:{type:Date},endDate:{type:Date},ganttScaleContainerOffsetLeft:{type:Number},milestoneList:{type:Array},scrollElement:{type:Object},ganttBarContainerElement:{type:Object}},emits:["addMilestone"],setup(e,o){const{startDate:r,endDate:s,milestoneList:c,scrollElement:a,unit:l}=t.toRefs(e),i=t.ref([]),n=t.ref([]),d=t.ref({day:40,week:30,month:20}),m=t.ref(!1),D=t.ref(""),f=t.ref(""),{generateScaleData:x}=E(c);let w=[0,0];const A=k=>{o.emit("addMilestone",k)},S=()=>{if(a.value){const k=a.value.clientWidth,W=a.value.scrollLeft,N=Math.floor(W/d.value[l.value]),F=Math.ceil(k/d.value[l.value]);w=[N-2,N+F+2],n.value=i.value.filter(C=>C.index>=w[0]&&C.index<=w[1])}};return t.onMounted(()=>{r.value&&s.value&&(i.value=x(r.value,s.value),S())}),t.watch(()=>e.scrollElement,()=>{S(),e.scrollElement.addEventListener("scroll",()=>{S()})}),{viewSCaleData:n,scaleWidth:d,addMilestone:A,highlight:m,highlightStartText:D,highlightEndText:f}},render(){const{unit:e,viewSCaleData:o,scaleWidth:r,addMilestone:s,highlight:c,highlightStartText:a,highlightEndText:l,ganttBarContainerElement:i}=this;return t.createVNode("div",{class:"devui-gantt-scale-wrapper"},[o.map((n,d)=>t.withDirectives(t.createVNode("div",{class:`devui-gantt-scale ${e} ${n.today} ${n.milestone}`,style:{left:`${r[e]*n.index}px`,width:`${r[e]}px`}},[t.createVNode("div",{class:`devui-scale-start ${n.milestone}`},[n.milestone&&e==="day"&&t.createVNode("div",null,[n.milestone]),(!n.milestone||e!=="day")&&n.scaleStartVisable&&(d===0||n.monthStart)?e==="month"?g.zh.yearDisplay(n.yearLabel):g.zh.yearAndMonthDisplay(n.yearLabel,n.monthLabel):""]),t.createVNode("div",{class:"devui-scale-unit"},[c&&n.highlightStart&&t.createVNode("div",{class:"scale-highlight"},[t.createVNode("div",{style:"float: left"},[a]),t.createVNode("div",{style:"float: right"},[l]),t.createVNode("div",{style:"clear: both"},null)]),(!c||!n.highlightStart)&&e==="day"&&t.createVNode("div",{class:`border-left ${n.today?"today":""}`},[n.today?g.zh.today:n.dayOfMonthLabel]),(!c||!n.highlightStart)&&e==="week"&&t.createVNode("div",{class:`${n.weekend||d===0?"border-left":""}`},[d===0||n.weekend?n.dayOfMonthLabel:""]),(!c||!n.highlightStart)&&e==="month"&&t.createVNode("div",{class:`${n.monthStart||d===0?"border-left":""}`},[d===0||n.monthStart?g.zh.monthDisplay(n.monthLabel):""])]),t.createVNode("div",{class:`milestone-new ${e}`,title:"milestone",onClick:()=>s(n)},[t.createVNode(t.resolveComponent("d-icon"),{name:"add"},null)])]),[[t.resolveDirective("gantt-marker"),{ganttBarContainerElement:i,monthMark:n.monthMark,weekend:n.weekend,milestone:n.milestone,today:n.today,date:n.date,unit:e,last:d===o.length-1}]]))])}}),B="",b=t.defineComponent({name:"DGanttTools",props:{unit:{type:String,default:null},isFullScreen:{type:Boolean,default:!1}},emits:["goToday","reduceUnit","increaseUnit","switchView"],setup(e,o){const r=t.ref(e.unit),s=t.ref([{name:"Day",value:"day"},{name:"Week",value:"week"},{name:"Month",value:"month"}]);return{actionHandle:l=>{switch(l){case"today":o.emit("goToday");break;case"reduce":o.emit("reduceUnit");break;case"increase":o.emit("increaseUnit");break}},currentUnitLabel:r,views:s,selectView:l=>{o.emit("switchView",l.value)}}},render(){const{isFullScreen:e,actionHandle:o,views:r,selectView:s,$slots:c}=this;return t.createVNode("div",{class:"tools-container",style:{position:e?"fixed":"absolute"}},[t.createVNode(t.resolveComponent("d-button"),{btnStyle:"common",onClick:()=>o("today"),class:"tool"},{default:()=>[t.createTextVNode("Today")]}),t.createVNode("div",{class:"tool"},[t.createVNode(t.resolveComponent("d-select"),{modelValue:this.currentUnitLabel,"onUpdate:modelValue":a=>this.currentUnitLabel=a,options:r,onValueChange:s},null)]),t.createVNode(t.resolveComponent("d-button"),{btnStyle:"common",class:["tool","minus",this.currentUnitLabel===h.day?"disabled":""],disabled:this.currentUnitLabel===h.day,onClick:()=>o("reduce")},{default:()=>[t.createVNode(t.resolveComponent("d-icon"),{name:"minus"},null)]}),t.createVNode(t.resolveComponent("d-button"),{btnStyle:"common",class:["tool","add",this.currentUnitLabel===h.month?"disabled":""],disabled:this.currentUnitLabel===h.month,onClick:()=>o("increase")},{default:()=>[t.createVNode(t.resolveComponent("d-icon"),{name:"add"},null)]}),c.default&&c.default()])}});const v={startDate:{type:Date},endDate:{type:Date},unit:{type:String,default:h.day},progressRate:{type:Number}};var G="";const O=(e=h.day)=>{const o=24*60*60*1e3,r=()=>{switch(e){case h.day:return 40;case h.week:return 30;case h.month:return 20}},s=(a,l)=>{if(a&&l){const n=(l.getTime()-a.getTime())/o+1;return console.log("duration => ",n),Math.round(n)}};return{getDurationWidth:(a,l)=>{if(a&&l)return s(a,l)*r()}}};var y=t.defineComponent({name:"DGantt",components:{DGanttScale:L,DGanttTools:b},props:v,setup(e,o){const{startDate:r,endDate:s}=t.toRefs(e),c=t.ref(),a=t.ref(),{getDurationWidth:l}=O();return t.onMounted(()=>{a.value=l(r.value,s.value)}),{ganttContainer:c,ganttScaleWidth:a}},render(){const{$slots:e,startDate:o,endDate:r,unit:s,ganttContainer:c,ganttScaleWidth:a}=this;return t.createVNode("div",{style:{position:"relative"}},[t.createVNode("div",{class:"devui-gantt gantt-container",ref:"ganttContainer"},[t.createVNode("div",{class:"header",style:{width:`${a}px`}},[t.createVNode(t.resolveComponent("d-gantt-scale"),{startDate:o,endDate:r,unit:s,scrollElement:c},null)]),t.createVNode(t.resolveComponent("d-gantt-tools"),{unit:s},null),t.createVNode("div",{class:"body",style:{width:`${a}px`}},null)])])}});const T={ganttBarContainerElement:null,monthMarkElement:null,weekendElement:null,todayElement:null,milestoneElement:null,monthMark:"",mounted(e,o){const{ganttBarContainerElement:r,monthMark:s}=o.value;r&&(this.ganttBarContainerElement=r),s&&(this.monthMark=this.monthMark)},updated(e,o){const{monthMark:r,weekend:s,today:c,milestone:a,unit:l}=o.value;r&&this.initMarkElement()},initMarkElement(){this.ganttBarContainerElement&&this.monthMark&&!this.monthMarkElement}};y.install=function(e){e.component(y.name,y),e.component(b.name,b),e.directive("gantt-marker",T)};var $={title:"Gantt \u7518\u7279\u56FE",category:"\u6570\u636E\u5C55\u793A",status:"10%",install(e){e.use(y)}};u.Gantt=y,u.default=$,Object.defineProperty(u,"__esModule",{value:!0}),u[Symbol.toStringTag]="Module"});

package/gantt/package.json

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

package/gantt/style.css

@@ -0,0 +1 @@
+.devui-gantt-scale-wrapper{display:block;height:36px;line-height:18px}.devui-gantt-scale{display:inline-block;color:var(--devui-placeholder, #8a8e99);text-align:center;position:absolute;height:36px;font-weight:normal}.devui-gantt-scale.day:not(.milestone):hover .devui-scale-start{display:none}.devui-gantt-scale.day.milestone{background-image:linear-gradient(180deg,rgba(254,204,85,0) 0%,rgba(62,204,166,.1) 100%)}.devui-gantt-scale .devui-scale-start{width:100%;height:18px;position:absolute;left:1px;white-space:nowrap}.devui-gantt-scale .devui-scale-start.milestone{color:var(--devui-success, #50d4ab)}.devui-gantt-scale .devui-scale-unit{height:18px;position:absolute;top:18px;width:100%}.devui-gantt-scale .devui-scale-unit .border-left{height:18px;border-left:1px solid var(--devui-list-item-selected-bg, #e9edfa)}.devui-gantt-scale .devui-scale-unit .scale-highlight{position:absolute;height:18px;border-radius:var(--devui-border-radius, 2px);background-color:var(--devui-brand, #5e7ce0);padding:0 4px}.devui-gantt-scale .devui-scale-unit .scale-highlight div{color:var(--devui-base-bg, #ffffff);font-size:var(--devui-font-size, 12px);font-weight:normal}.devui-gantt-scale .devui-scale-unit .today{background:rgba(255,121,14,.2);border-radius:var(--devui-border-radius, 2px);height:16px}.devui-gantt-scale .milestone-new{display:none;position:absolute;width:18px;height:18px;margin-left:16px;border:1px solid var(--devui-list-item-selected-bg, #e9edfa);cursor:pointer}.devui-gantt-scale .milestone-new div{line-height:16px}.devui-gantt-scale:not(.milestone):hover .milestone-new.day{display:block}.devui-mark-line{position:absolute;top:0;bottom:0;width:2px;z-index:1;background:var(--devui-line, #adb0b8);opacity:.5}.devui-mark-line.today{opacity:.2;background:#ff790e}.devui-mark-line.today.day{margin-left:24px}.devui-mark-line.today.week{margin-left:9px}.devui-mark-line.today.month{margin-left:4px}.devui-mark-line.milestone{opacity:.2;background:var(--devui-success, #50d4ab)}.devui-mark-line.milestone.day{margin-left:24px}.devui-mark-line.milestone.week{margin-left:9px}.devui-mark-line.milestone.month{margin-left:4px}.devui-mark-stripe{position:absolute;top:0;bottom:0;z-index:1;background:linear-gradient(45deg,rgba(202,207,216,.2) 0,rgba(202,207,216,.2) 10%,transparent 10%,transparent 50%,rgba(202,207,216,.2) 50%,rgba(202,207,216,.2) 60%,transparent 60%,transparent);background-size:6px 6px}.devui-mark-stripe.day{width:100px}.devui-mark-stripe.week{width:40px}.devui-mark-stripe.month{width:20px}.tools-container{position:absolute;top:70px;right:20px;z-index:10}.tools-container .devui-dropdown-origin{border:0}.tools-container .devui-dropdown-origin:hover{color:var(--devui-link, #526ecc)!important}.tools-container .devui-btn{height:32px!important;color:var(--devui-text, #252b3a)!important;padding:0 8px!important;min-width:50px}.tools-container .devui-btn:hover{color:var(--devui-link, #526ecc)!important}.tools-container .tool.minus .devui-btn,.tools-container .tool.add .devui-btn{min-width:30px}.tools-container .devui-select-selection{width:90px}.tools-container .devui-select-selection .devui-select-input{height:32px}.tool.disabled{opacity:.5}.tool .switch-view{padding:0 8px}.tool .switch-view:hover{color:var(--devui-link, #526ecc)!important}.devui-dropdown-menu{top:10px!important;left:-6px!important}.gantt-container{overflow:scroll}.gantt-container .header{position:relative;border-bottom:1px solid var(--devui-dividing-line, #dfe1e6)}.gantt-container .body{position:relative;min-height:400px;height:100%}.gantt-container .body .item{height:40px;padding-top:8px}.tool{display:inline-flex;align-items:center;justify-content:center;height:32px;margin-left:12px;background-color:var(--devui-base-bg, #ffffff);box-shadow:var(--devui-shadow-length-base, 0 1px 4px 0) #5170ff66;cursor:pointer}.tool span{border:0!important}

package/grid/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;