hys-ui 0.1.0 → 0.2.0

package/dist/components/HysGantt/HysGantt.vue.js

@@ -1,266 +1,7 @@
-import { defineComponent as te, ref as A, watch as z, computed as m, nextTick as ne, openBlock as o, createElementBlock as r, mergeProps as le, unref as B, createElementVNode as s, Fragment as k, renderList as x, normalizeClass as T, toDisplayString as y, normalizeStyle as g, withKeys as D, withModifiers as $, createCommentVNode as H, createTextVNode as ae } from "vue";
-import { useHysRootAttrs as se } from "../../config.js";
-const ie = { class: "hys-ui-pg-toolbar" }, oe = {
-  class: "hys-ui-pg-scale",
-  role: "group",
-  "aria-label": "时间刻度"
-}, re = ["aria-pressed", "onClick"], ue = { class: "hys-ui-pg-hint" }, de = { class: "hys-ui-pg-body" }, ce = ["onClick", "onKeydown"], he = ["title"], ve = {
-  key: 0,
-  class: "hys-ui-pg-empty"
-}, ye = { class: "hys-ui-pg-months" }, ge = { class: "hys-ui-pg-days" }, pe = ["aria-label", "title", "onClick", "onKeydown", "onPointerdown"], me = { class: "hys-ui-pg-bar-title" }, fe = ["onPointerdown"], we = ["onPointerdown"], be = ["width", "height"], ke = ["d"], xe = { class: "hys-ui-pg-footer" }, $e = { key: 0 }, j = 864e5, De = /* @__PURE__ */ te({
-  __name: "HysGantt",
-  props: {
-    items: {},
-    modelValue: {},
-    scale: { default: "day" },
-    editable: { type: Boolean, default: !1 },
-    rowHeight: { default: 46 },
-    labelWidth: { default: 270 }
-  },
-  emits: ["update:modelValue", "update:items", "change", "open"],
-  setup(d, { emit: q }) {
-    const J = se(), v = d, b = q, p = A(v.scale);
-    z(() => v.scale, (t) => p.value = t);
-    const P = A(v.modelValue ?? null);
-    z(() => v.modelValue, (t) => P.value = t ?? null);
-    const E = A(null), _ = /* @__PURE__ */ new Date();
-    _.setHours(0, 0, 0, 0);
-    function M(t) {
-      if (!/^\d{4}-\d{2}-\d{2}$/.test(t)) return null;
-      const [n, e, l] = t.split("-").map(Number), a = new Date(n, e - 1, l);
-      return a.getFullYear() === n && a.getMonth() === e - 1 && a.getDate() === l ? a : null;
-    }
-    function c(t) {
-      return Math.round((Date.UTC(t.getFullYear(), t.getMonth(), t.getDate()) - Date.UTC(1970, 0, 1)) / j);
-    }
-    function S(t) {
-      return new Date(t * j);
-    }
-    function V(t) {
-      return S(t).toISOString().slice(0, 10);
-    }
-    const h = m(() => v.items.map((t) => {
-      const n = M(t.start), e = M(t.end);
-      return !n || !e || c(e) < c(n) ? null : { ...t, s: c(n), e: c(e), progress: Math.min(100, Math.max(0, t.progress ?? 0)) };
-    }).filter((t) => t !== null)), u = m(() => p.value === "day" ? 36 : p.value === "week" ? 17 : p.value === "month" ? 7 : 36), f = m(() => {
-      const t = h.value.flatMap((e) => [e.s, e.e]), n = c(_);
-      return { start: Math.min(n - 7, ...t) - 7, end: Math.max(n + 21, ...t) + 14 };
-    }), I = m(() => f.value.end - f.value.start + 1), L = m(() => I.value * u.value), U = m(() => Array.from({ length: I.value }, (t, n) => f.value.start + n)), Q = m(() => {
-      const t = [];
-      for (let n = 0; n < U.value.length; n++) {
-        const e = S(U.value[n]), l = `${e.getUTCFullYear()}-${e.getUTCMonth()}`, a = t[t.length - 1];
-        (a == null ? void 0 : a.key) === l ? a.width += u.value : t.push({ key: l, label: `${e.getUTCFullYear()}年${e.getUTCMonth() + 1}月`, left: n * u.value, width: u.value });
-      }
-      return t;
-    }), R = m(() => new Map(h.value.map((t, n) => [String(t.id), { x: (t.s - f.value.start) * u.value, w: (t.e - t.s + 1) * u.value, y: n * v.rowHeight + v.rowHeight / 2 }]))), X = m(() => h.value.flatMap((t) => (t.dependencies ?? []).flatMap((n) => {
-      const e = R.value.get(String(n)), l = R.value.get(String(t.id));
-      return !e || !l || String(n) === String(t.id) ? [] : [{ id: `${n}-${t.id}`, path: `M ${e.x + e.w} ${e.y} H ${e.x + e.w + 9} V ${l.y} H ${l.x}` }];
-    })));
-    function F(t) {
-      P.value = t.id, b("update:modelValue", t.id), b("open", t);
-    }
-    function G() {
-      const t = E.value;
-      t && (t.scrollLeft = Math.max(0, (c(_) - f.value.start) * u.value - t.clientWidth / 3));
-    }
-    z(p, () => ne(G));
-    const w = A(null);
-    function K(t, n, e) {
-      !v.editable || n.disabled || t.button !== 0 || (t.preventDefault(), t.stopPropagation(), t.currentTarget.setPointerCapture(t.pointerId), w.value = { id: n.id, type: e, x: t.clientX, original: { ...n }, days: 0 }, P.value = n.id, b("update:modelValue", n.id));
-    }
-    function Y(t) {
-      w.value && (w.value.days = Math.round((t.clientX - w.value.x) / u.value));
-    }
-    function C(t) {
-      const n = w.value;
-      if (!n || (w.value = null, t.type === "pointercancel" || !n.days)) return;
-      const e = M(n.original.start), l = M(n.original.end);
-      if (!e || !l) return;
-      let a = c(e), i = c(l);
-      n.type === "move" ? (a += n.days, i += n.days) : n.type === "start" ? a = Math.min(i, a + n.days) : i = Math.max(a, i + n.days);
-      const N = { ...n.original, start: V(a), end: V(i) };
-      b("update:items", v.items.map((O) => String(O.id) === String(N.id) ? N : O)), b("change", N);
-    }
-    function Z(t) {
-      const n = w.value;
-      if (!n || String(n.id) !== String(t.id)) return { s: t.s, e: t.e };
-      const e = n.days;
-      return n.type === "move" ? { s: t.s + e, e: t.e + e } : n.type === "start" ? { s: Math.min(t.e, t.s + e), e: t.e } : { s: t.s, e: Math.max(t.s, t.e + e) };
-    }
-    function ee(t) {
-      const n = Z(t);
-      return { left: `${(n.s - f.value.start) * u.value}px`, width: `${Math.max(u.value, (n.e - n.s + 1) * u.value)}px`, background: t.color || "var(--hys-ui-primary,var(--hys-ui-theme-primary, #4776ed))" };
-    }
-    function W(t, n) {
-      if (!v.editable || t.disabled) return;
-      const e = M(t.start), l = M(t.end);
-      if (!e || !l) return;
-      const a = { ...t, start: V(c(e) + n), end: V(c(l) + n) };
-      b("update:items", v.items.map((i) => String(i.id) === String(t.id) ? a : i)), b("change", a);
-    }
-    return (t, n) => (o(), r("section", le(B(J), {
-      class: "hys-ui-pg-gantt",
-      "aria-label": "项目甘特图"
-    }), [
-      s("div", ie, [
-        s("div", oe, [
-          (o(), r(k, null, x(["day", "week", "month"], (e) => s("button", {
-            key: e,
-            type: "button",
-            "aria-pressed": p.value === e,
-            class: T({ "hys-ui-active": p.value === e }),
-            onClick: (l) => p.value = e
-          }, y(e === "day" ? "日" : e === "week" ? "周" : "月"), 11, re)), 64))
-        ]),
-        s("button", {
-          class: "hys-ui-pg-today",
-          type: "button",
-          onClick: G
-        }, "定位今天"),
-        s("span", ue, y(d.editable ? "拖动任务条调整排期 · Alt + 左/右方向键微调日期" : "点击任务查看详情"), 1)
-      ]),
-      s("div", de, [
-        s("div", {
-          class: "hys-ui-pg-labels",
-          style: g({ width: d.labelWidth + "px", minWidth: d.labelWidth + "px" })
-        }, [
-          n[0] || (n[0] = s("div", { class: "hys-ui-pg-label-head" }, "任务 / 负责人", -1)),
-          (o(!0), r(k, null, x(h.value, (e) => (o(), r("button", {
-            type: "button",
-            key: e.id,
-            class: T(["hys-ui-pg-task-label", { "hys-ui-selected": P.value === e.id }]),
-            style: g({ height: d.rowHeight + "px" }),
-            onClick: (l) => F(e),
-            onKeydown: [
-              D($((l) => W(e, -1), ["alt", "prevent"]), ["left"]),
-              D($((l) => W(e, 1), ["alt", "prevent"]), ["right"])
-            ]
-          }, [
-            s("strong", {
-              title: e.title
-            }, y(e.title), 9, he),
-            s("small", null, y(e.owner || "未分配") + " · " + y(e.status || "待办"), 1)
-          ], 46, ce))), 128)),
-          h.value.length ? H("", !0) : (o(), r("div", ve, "暂无有效排期任务"))
-        ], 4),
-        s("div", {
-          ref_key: "scroller",
-          ref: E,
-          class: "hys-ui-pg-scroll",
-          tabindex: "0",
-          "aria-label": "可横向滚动的甘特图时间轴"
-        }, [
-          s("div", {
-            class: "hys-ui-pg-canvas",
-            style: g({ width: L.value + "px" })
-          }, [
-            s("div", ye, [
-              (o(!0), r(k, null, x(Q.value, (e) => (o(), r("span", {
-                key: e.key,
-                style: g({ left: e.left + "px", width: e.width + "px" })
-              }, y(e.label), 5))), 128))
-            ]),
-            s("div", ge, [
-              (o(!0), r(k, null, x(U.value, (e) => (o(), r("span", {
-                key: e,
-                class: T({ "hys-ui-weekend": [0, 6].includes(S(e).getUTCDay()), "hys-ui-today": e === c(B(_)) }),
-                style: g({ width: u.value + "px" })
-              }, y(p.value === "month" ? "" : S(e).getUTCDate()), 7))), 128))
-            ]),
-            s("div", {
-              class: "hys-ui-pg-grid",
-              style: g({ height: h.value.length * d.rowHeight + "px" })
-            }, [
-              (o(!0), r(k, null, x(U.value, (e) => (o(), r("div", {
-                key: e,
-                class: T(["hys-ui-pg-day-column", { "hys-ui-weekend": [0, 6].includes(S(e).getUTCDay()) }]),
-                style: g({ left: (e - f.value.start) * u.value + "px", width: u.value + "px" })
-              }, null, 6))), 128)),
-              s("div", {
-                class: "hys-ui-pg-today-line",
-                style: g({ left: (c(B(_)) - f.value.start) * u.value + u.value / 2 + "px" })
-              }, null, 4),
-              (o(!0), r(k, null, x(h.value, (e, l) => {
-                var a;
-                return o(), r("div", {
-                  key: e.id,
-                  class: "hys-ui-pg-row",
-                  style: g({ top: l * d.rowHeight + "px", height: d.rowHeight + "px" })
-                }, [
-                  s("div", {
-                    class: T(["hys-ui-pg-bar", { "hys-ui-selected": P.value === e.id, "hys-ui-dragging": ((a = w.value) == null ? void 0 : a.id) === e.id, "hys-ui-disabled": e.disabled }]),
-                    style: g(ee(e)),
-                    role: "button",
-                    tabindex: "0",
-                    "aria-label": `${e.title}，${e.start} 至 ${e.end}，完成 ${e.progress}%`,
-                    title: `${e.title}
-${e.start} → ${e.end}
-完成 ${e.progress}%`,
-                    onClick: (i) => F(e),
-                    onKeydown: [
-                      D((i) => F(e), ["enter"]),
-                      D($((i) => F(e), ["prevent"]), ["space"]),
-                      D($((i) => W(e, -1), ["alt", "prevent"]), ["left"]),
-                      D($((i) => W(e, 1), ["alt", "prevent"]), ["right"])
-                    ],
-                    onPointerdown: (i) => K(i, e, "move"),
-                    onPointermove: Y,
-                    onPointerup: C,
-                    onPointercancel: C
-                  }, [
-                    s("div", {
-                      class: "hys-ui-pg-progress",
-                      style: g({ width: e.progress + "%" })
-                    }, null, 4),
-                    s("span", me, y(e.progress) + "%", 1),
-                    d.editable && !e.disabled ? (o(), r("span", {
-                      key: 0,
-                      class: "hys-ui-pg-handle hys-ui-start",
-                      title: "调整开始日期",
-                      onPointerdown: $((i) => K(i, e, "start"), ["stop"]),
-                      onPointermove: Y,
-                      onPointerup: C,
-                      onPointercancel: C
-                    }, null, 40, fe)) : H("", !0),
-                    d.editable && !e.disabled ? (o(), r("span", {
-                      key: 1,
-                      class: "hys-ui-pg-handle hys-ui-end",
-                      title: "调整结束日期",
-                      onPointerdown: $((i) => K(i, e, "end"), ["stop"]),
-                      onPointermove: Y,
-                      onPointerup: C,
-                      onPointercancel: C
-                    }, null, 40, we)) : H("", !0)
-                  ], 46, pe)
-                ], 4);
-              }), 128)),
-              X.value.length ? (o(), r("svg", {
-                key: 0,
-                class: "hys-ui-pg-dependencies",
-                width: L.value,
-                height: h.value.length * d.rowHeight,
-                "aria-hidden": "true"
-              }, [
-                (o(!0), r(k, null, x(X.value, (e) => (o(), r("path", {
-                  key: e.id,
-                  d: e.path,
-                  fill: "none",
-                  stroke: "currentColor",
-                  "stroke-width": "1.5",
-                  "stroke-dasharray": "4 3"
-                }, null, 8, ke))), 128))
-              ], 8, be)) : H("", !0)
-            ], 4)
-          ], 4)
-        ], 512)
-      ]),
-      s("div", xe, [
-        ae(y(h.value.length) + " 项任务 · " + y(h.value.filter((e) => e.status === "已完成").length) + " 项已完成 ", 1),
-        h.value.length !== d.items.length ? (o(), r("span", $e, "· " + y(d.items.length - h.value.length) + " 项日期无效已隐藏", 1)) : H("", !0)
-      ])
-    ], 16));
-  }
-});
+import t from "./HysGantt2.vue.js";
+/* empty css              */
+import o from "../../_virtual/_plugin-vue_export-helper.js";
+const p = /* @__PURE__ */ o(t, [["__scopeId", "data-v-316ac1a0"]]);
 export {
-  De as default
+  p as default
 };