@primeui/vue-taskboard 0.0.1-alpha.1 → 1.0.0-beta.1

package/dist/chunks/TaskBoardContent.vue_vue_type_script_setup_true_lang-lDUg6UrJ.mjs

@@ -0,0 +1,292 @@
+import { defineComponent as I, inject as W, computed as p, openBlock as t, createElementBlock as n, normalizeClass as i, unref as l, Fragment as c, createElementVNode as d, renderList as m, normalizeStyle as g, renderSlot as h, createTextVNode as f, toDisplayString as S, createCommentVNode as y, createBlock as C, resolveDynamicComponent as k, withModifiers as T, provide as $ } from "vue";
+import { T as L, a as N, S as A } from "./TaskBoard.context-BCq7uauT.mjs";
+const K = { class: "p-taskboard-column-group-headers-inner" }, z = { class: "p-taskboard-column-group-mobile-headers-inner" }, F = ["aria-hidden"], Y = ["data-swimlane-id", "aria-expanded", "aria-label"], j = ["aria-label", "onClick"], O = ["data-column-id"], U = ["data-column-id", "data-swimlane-id"], q = ["data-task-id", "data-task-index", "onDblclick", "onPointerdown", "onContextmenu"], J = { style: { display: "none" } }, ee = /* @__PURE__ */ I({
+  __name: "TaskBoardContent",
+  setup(Q) {
+    const e = W(L), w = p(() => e.swimlaneColumnHeaderSlotRenderer?.value ?? null), H = p(() => e.dropIndicatorSlotRenderer?.value ?? null), D = (a, o) => {
+      const s = H.value;
+      return s ? () => s({ column: a, index: o }) : null;
+    }, R = p(() => e.virtualScrollState.value?.topSpacerHeight ?? 0), G = p(() => {
+      const a = e.virtualScrollState.value;
+      if (a) return a.bottomSpacerHeight;
+      if (!e.virtualScroll.value) return 0;
+      const o = e.processedSwimlanes.value.length, s = e.visibleSwimlanes.value.length, r = o - s, u = e.props.virtualScrollItemHeight ?? 250;
+      return r > 0 ? r * u : 0;
+    }), E = (a) => {
+      e.groupHeadersRef.value = a;
+    }, B = (a) => {
+      e.columnsContainerRef.value = a;
+    }, _ = (a, o) => {
+      const s = e.cardSlotRenderer.value;
+      return s ? () => s({ item: a, column: o, isSelected: e.selectedItemIds.value.includes(e.getItemId(a)), isDragging: !1 }) : null;
+    }, P = (a, o) => e.getVisibleCellTasks(a.id, o.id).length, x = (a, o = e.itemCount(a.id)) => {
+      const s = e.columnHeaderSlotRenderer.value;
+      return s ? () => s({
+        column: a,
+        itemCount: o,
+        isCollapsed: e.isColumnCollapsed(a.id),
+        toggleCollapse: () => e.onColumnToggle(a),
+        startDrag: (r) => e.onColumnHeaderPointerDown(a, r)
+      }) : null;
+    }, V = (a, o) => {
+      const s = w.value;
+      return s ? I({
+        name: "TaskBoardRenderedSwimlaneColumnHeader",
+        setup() {
+          const r = p(() => o ? P(a, o) : e.itemCount(a.id)), u = p(() => o ? e.getVisibleCellTasks(a.id, o.id) : e.getItemsByColumn(a.id)), b = p(() => o ? e.getVisibleCellTasks(a.id, o.id) : e.getVisibleItemsByColumn(a.id));
+          return $(N, {
+            label: a.label,
+            value: a.id,
+            columnData: a,
+            itemCount: r,
+            isCollapsed: p(() => e.isColumnCollapsed(a.id)),
+            toggleCollapse: () => e.onColumnToggle(a),
+            startDrag: (v) => e.onColumnHeaderPointerDown(a, v),
+            items: u,
+            visibleItems: b,
+            addItem: (v) => e.createItem(v ?? {}, a)
+          }), () => s({ column: a, itemCount: r.value });
+        }
+      }) : null;
+    }, M = (a) => {
+      const o = e.swimlaneHeaderSlotRenderer.value;
+      return o ? I({
+        name: "TaskBoardRenderedSwimlaneHeader",
+        setup() {
+          const s = p(() => e.swimlaneTaskCount(a.id)), r = p(() => e.isSwimlaneCollapsed(a.id)), u = () => e.onSwimlaneToggle(a);
+          return $(A, {
+            swimlaneData: a,
+            taskCount: s,
+            isCollapsed: r,
+            toggleCollapse: u
+          }), () => o({
+            swimlane: a,
+            itemCount: s.value,
+            isCollapsed: r.value,
+            toggleCollapse: u
+          });
+        }
+      }) : null;
+    };
+    return (a, o) => (t(), n("div", {
+      class: i(l(e).classes.body)
+    }, [
+      l(e).hasSwimlanes.value ? (t(), n(c, { key: 1 }, [
+        d("div", {
+          ref: B,
+          class: i(l(e).classes.swimlaneGrid),
+          onScroll: o[3] || (o[3] = //@ts-ignore
+          (...s) => l(e).onSwimlaneGridScroll && l(e).onSwimlaneGridScroll(...s))
+        }, [
+          d("div", {
+            class: i(l(e).classes.columnHeaders),
+            style: g(l(e).swimlaneTrackStyle())
+          }, [
+            d("div", {
+              class: i(l(e).classes.columnHeadersSpacer)
+            }, null, 2),
+            d("div", {
+              class: i(l(e).classes.columnHeadersContent)
+            }, [
+              (t(!0), n(c, null, m(l(e).processedColumns.value, (s) => (t(), n("div", {
+                key: s.id
+              }, [
+                w.value ? (t(), C(k(V(s)), { key: 0 })) : l(e).columnHeaderSlotRenderer.value ? (t(), C(k(x(s)), { key: 1 })) : (t(), n(c, { key: 2 }, [
+                  f(S(s.label), 1)
+                ], 64))
+              ]))), 128))
+            ], 2)
+          ], 6),
+          l(e).virtualScroll.value && R.value > 0 ? (t(), n("div", {
+            key: 0,
+            style: g({ height: R.value + "px", flexShrink: "0", minWidth: "fit-content" })
+          }, null, 4)) : y("", !0),
+          (t(!0), n(c, null, m(l(e).visibleSwimlanes.value, (s) => (t(), n("div", {
+            key: s.id,
+            class: i(l(e).swimlaneRowClasses(s)),
+            style: g(l(e).swimlaneRowStyle(s)),
+            "data-swimlane-id": s.id,
+            role: "group",
+            "aria-expanded": !l(e).isSwimlaneCollapsed(s.id),
+            "aria-label": s.label + ", " + l(e).swimlaneTaskCount(s.id) + " items"
+          }, [
+            d("div", {
+              class: i(l(e).classes.swimlaneHeader)
+            }, [
+              l(e).swimlaneHeaderSlotRenderer.value ? (t(), C(k(M(s)), { key: 0 })) : (t(), n(c, { key: 1 }, [
+                d("button", {
+                  type: "button",
+                  class: i(l(e).classes.swimlaneCollapseToggle),
+                  "aria-label": `${l(e).isSwimlaneCollapsed(s.id) ? "Expand" : "Collapse"} ${s.label} swimlane`,
+                  onPointerdown: o[1] || (o[1] = T(() => {
+                  }, ["stop"])),
+                  onClick: T((r) => l(e).onSwimlaneToggle(s), ["stop"])
+                }, [
+                  (t(), n("svg", {
+                    class: i(l(e).classes.swimlaneCollapseToggleIcon),
+                    width: "12",
+                    height: "12",
+                    viewBox: "0 0 12 12",
+                    fill: "none",
+                    "aria-hidden": "true"
+                  }, [...o[4] || (o[4] = [
+                    d("path", {
+                      d: "M2.5 4.5L6 8L9.5 4.5",
+                      stroke: "currentColor",
+                      "stroke-width": "1.5",
+                      "stroke-linecap": "round",
+                      "stroke-linejoin": "round"
+                    }, null, -1)
+                  ])], 2))
+                ], 42, j),
+                d("span", null, S(s.label) + " (" + S(l(e).swimlaneTaskCount(s.id)) + ")", 1)
+              ], 64))
+            ], 2),
+            d("div", {
+              class: i(l(e).classes.swimlanePrintHeader),
+              "aria-hidden": "true"
+            }, [
+              d("span", {
+                class: i(l(e).classes.swimlanePrintHeaderTitle)
+              }, S(s.label), 3),
+              d("span", {
+                class: i(l(e).classes.swimlanePrintHeaderCount)
+              }, S(l(e).swimlaneTaskCount(s.id)) + " items", 3)
+            ], 2),
+            d("div", {
+              class: i(l(e).classes.swimlanePrintColumns),
+              "aria-hidden": "true"
+            }, [
+              (t(!0), n(c, null, m(l(e).processedColumns.value, (r) => (t(), n("div", {
+                key: r.id,
+                class: i(l(e).classes.swimlanePrintColumn),
+                "data-column-id": r.id
+              }, [
+                d("div", {
+                  class: i(l(e).classes.swimlanePrintColumnHeader)
+                }, [
+                  w.value ? (t(), C(k(V(r, s)), { key: 0 })) : l(e).columnHeaderSlotRenderer.value ? (t(), C(k(x(r, P(r, s))), { key: 1 })) : (t(), n(c, { key: 2 }, [
+                    f(S(r.label), 1)
+                  ], 64))
+                ], 2),
+                d("div", {
+                  class: i(l(e).classes.swimlanePrintColumnBody)
+                }, [
+                  (t(!0), n(c, null, m(l(e).getVisibleCellTasks(r.id, s.id), (u) => (t(), n("div", {
+                    key: l(e).getItemId(u),
+                    class: i(l(e).cardWrapperClasses(u)),
+                    role: "listitem"
+                  }, [
+                    l(e).cardSlotRenderer.value ? (t(), C(k(_(u, r)), { key: 0 })) : y("", !0)
+                  ], 2))), 128))
+                ], 2)
+              ], 10, O))), 128))
+            ], 2),
+            d("div", {
+              class: i(l(e).classes.swimlaneBody),
+              onClick: o[2] || (o[2] = T((r) => l(e).onBoardBackgroundClick(), ["self"]))
+            }, [
+              (t(!0), n(c, null, m(l(e).processedColumns.value, (r) => (t(), n("div", {
+                key: r.id,
+                class: i(l(e).classes.swimlaneCell),
+                "data-column-id": r.id,
+                "data-swimlane-id": s.id
+              }, [
+                (t(!0), n(c, null, m(l(e).getVisibleCellTasks(r.id, s.id), (u, b) => (t(), n(c, {
+                  key: l(e).getItemId(u)
+                }, [
+                  l(e).showDropIndicator(r.id, s.id, b) ? (t(), n(c, { key: 0 }, [
+                    H.value ? (t(), C(k(D(r, b)), { key: 0 })) : (t(), n("div", {
+                      key: 1,
+                      class: i([l(e).classes.dropIndicator, l(e).classes.swimlaneDropIndicator])
+                    }, null, 2))
+                  ], 64)) : y("", !0),
+                  d("div", {
+                    "data-task-id": l(e).getItemId(u),
+                    "data-task-index": b,
+                    class: i(l(e).cardWrapperClasses(u)),
+                    role: "listitem",
+                    onDblclick: (v) => l(e).onCardDblClick(u, r, v),
+                    onPointerdown: (v) => l(e).onCardPointerDown(u, r, v),
+                    onContextmenu: (v) => l(e).onCardContextMenu(u, r, v)
+                  }, [
+                    l(e).cardSlotRenderer.value ? (t(), C(k(_(u, r)), { key: 0 })) : y("", !0)
+                  ], 42, q)
+                ], 64))), 128)),
+                l(e).showDropIndicatorAtEnd(r.id, s.id) ? (t(), n(c, { key: 0 }, [
+                  H.value ? (t(), C(k(D(r, l(e).getVisibleCellTasks(r.id, s.id).length)), { key: 0 })) : (t(), n("div", {
+                    key: 1,
+                    class: i([l(e).classes.dropIndicator, l(e).classes.swimlaneDropIndicator])
+                  }, null, 2))
+                ], 64)) : y("", !0)
+              ], 10, U))), 128))
+            ], 2)
+          ], 14, Y))), 128)),
+          l(e).virtualScroll.value && G.value > 0 ? (t(), n("div", {
+            key: 1,
+            style: g({ height: G.value + "px", flexShrink: "0", minWidth: "fit-content" })
+          }, null, 4)) : y("", !0)
+        ], 34),
+        d("div", J, [
+          h(a.$slots, "default")
+        ])
+      ], 64)) : (t(), n("div", {
+        key: 0,
+        ref: B,
+        class: i([l(e).classes.columns, l(e).hasColumnGroups.value && l(e).classes.columnsWithGroups]),
+        onScroll: o[0] || (o[0] = (s) => l(e).onColumnsHorizontalScroll())
+      }, [
+        l(e).hasColumnGroups.value ? (t(), n(c, { key: 0 }, [
+          d("div", {
+            ref: E,
+            class: i(l(e).classes.columnGroupHeaders)
+          }, [
+            d("div", K, [
+              (t(!0), n(c, null, m(l(e).columnGroupSegments.value, (s) => (t(), n("div", {
+                key: s.key,
+                class: i(s.label ? l(e).classes.columnGroupHeader : void 0),
+                style: g(l(e).getGroupSegmentStyle(s))
+              }, [
+                s.label ? h(a.$slots, "column-group-header", {
+                  key: 0,
+                  group: s.group,
+                  columns: l(e).getGroupColumns(s)
+                }, () => [
+                  f(S(s.label), 1)
+                ]) : y("", !0)
+              ], 6))), 128))
+            ])
+          ], 2),
+          d("div", {
+            class: i(l(e).classes.columnGroupMobileHeaders)
+          }, [
+            d("div", z, [
+              (t(!0), n(c, null, m(l(e).columnGroupColumnSegments.value, (s) => (t(), n("div", {
+                key: s.key,
+                class: i([l(e).classes.columnGroupMobileHeader, !s.label && l(e).classes.columnGroupMobileHeaderEmpty]),
+                style: g(l(e).getGroupColumnSegmentStyle(s)),
+                "aria-hidden": s.label ? void 0 : "true"
+              }, [
+                s.label ? h(a.$slots, "column-group-header", {
+                  key: 0,
+                  group: s.group,
+                  columns: [s.column]
+                }, () => [
+                  f(S(s.label), 1)
+                ]) : y("", !0)
+              ], 14, F))), 128))
+            ])
+          ], 2),
+          d("div", {
+            class: i(l(e).classes.columnsTrack)
+          }, [
+            h(a.$slots, "default")
+          ], 2)
+        ], 64)) : h(a.$slots, "default", { key: 1 })
+      ], 34))
+    ], 2));
+  }
+});
+export {
+  ee as _
+};

package/dist/chunks/TaskBoardDragConfirm.vue_vue_type_script_setup_true_lang-B4OdxK5L.mjs

@@ -0,0 +1,20 @@
+import { defineComponent as a, inject as i, unref as n, renderSlot as m, createCommentVNode as t } from "vue";
+import { T as d } from "./TaskBoard.context-BCq7uauT.mjs";
+const f = /* @__PURE__ */ a({
+  __name: "TaskBoardDragConfirm",
+  setup(s) {
+    const e = i(d);
+    return (r, l) => n(e).pendingConfirmMove.value ? m(r.$slots, "default", {
+      key: 0,
+      task: n(e).pendingConfirmMove.value.task,
+      sourceColumn: n(e).processedColumns.value.find((o) => String(o.id) === String(n(e).pendingConfirmMove.value?.payload.oldColumnId)),
+      targetColumn: n(e).processedColumns.value.find((o) => String(o.id) === String(n(e).pendingConfirmMove.value?.payload.newColumnId)),
+      confirm: n(e).confirmPendingMove,
+      cancel: n(e).cancelPendingMove,
+      message: n(e).pendingConfirmMove.value.message
+    }) : t("", !0);
+  }
+});
+export {
+  f as _
+};

package/dist/chunks/TaskBoardDragPreview.vue_vue_type_script_setup_true_lang-B7F-FPY1.mjs

@@ -0,0 +1,40 @@
+import { defineComponent as s, inject as d, onMounted as l, onBeforeUnmount as g, openBlock as a, createBlock as u, Teleport as v, unref as t, createElementBlock as r, normalizeStyle as m, normalizeClass as o, toDisplayString as c, createCommentVNode as n, renderSlot as p } from "vue";
+import { T as h } from "./TaskBoard.context-BCq7uauT.mjs";
+const D = /* @__PURE__ */ s({
+  __name: "TaskBoardDragPreview",
+  setup(P) {
+    const e = d(h);
+    return l(() => {
+      e.customDragPreviewCount.value += 1;
+    }), g(() => {
+      e.customDragPreviewCount.value = Math.max(0, e.customDragPreviewCount.value - 1);
+    }), (i, w) => (a(), u(v, { to: "body" }, [
+      t(e).isDragging.value && t(e).ghostPosition.value && t(e).draggedItem.value ? (a(), r("div", {
+        key: 0,
+        class: o(t(e).classes.dragPreview),
+        style: m({
+          position: "fixed",
+          left: t(e).ghostPosition.value.x + "px",
+          top: t(e).ghostPosition.value.y + "px",
+          width: t(e).dragPreviewWidth.value ? t(e).dragPreviewWidth.value + "px" : void 0,
+          maxWidth: t(e).dragPreviewWidth.value ? t(e).dragPreviewWidth.value + "px" : void 0,
+          transform: "translate(-50%, -50%) rotate(var(--p-taskboard-drag-preview-rotation, 1.5deg))",
+          pointerEvents: "none",
+          zIndex: 9999
+        })
+      }, [
+        t(e).getDragHiddenIds().length > 1 ? (a(), r("span", {
+          key: 0,
+          class: o(t(e).classes.dragPreviewBadge)
+        }, c(t(e).getDragHiddenIds().length), 3)) : n("", !0),
+        p(i.$slots, "default", {
+          item: t(e).draggedItem.value,
+          count: t(e).getDragHiddenIds().length
+        })
+      ], 6)) : n("", !0)
+    ]));
+  }
+});
+export {
+  D as _
+};

package/dist/chunks/TaskBoardDropIndicator-BUMSBiQC.mjs

@@ -0,0 +1,14 @@
+import { defineComponent as s, inject as n, useSlots as a, onMounted as e, h as d } from "vue";
+import { T as c } from "./TaskBoard.context-BCq7uauT.mjs";
+const l = s({
+  name: "TaskBoardDropIndicator",
+  setup() {
+    const o = n(c), t = a();
+    return e(() => {
+      o.registerDropIndicatorSlot((r) => t.default?.(r) ?? d("div", { class: o.classes.dropIndicator }));
+    }), () => null;
+  }
+});
+export {
+  l as T
+};

package/dist/chunks/TaskBoardHeader.vue_vue_type_script_setup_true_lang-CwtaadkE.mjs

@@ -0,0 +1,21 @@
+import { defineComponent as n, inject as r, openBlock as t, createElementBlock as s, normalizeClass as c, unref as o, renderSlot as d } from "vue";
+import { T as l } from "./TaskBoard.context-BCq7uauT.mjs";
+const u = /* @__PURE__ */ n({
+  __name: "TaskBoardHeader",
+  setup(m) {
+    const e = r(l);
+    return (a, p) => (t(), s("div", {
+      class: c(o(e).classes.header)
+    }, [
+      d(a.$slots, "default", {
+        canUndo: o(e).canUndoState.value,
+        canRedo: o(e).canRedoState.value,
+        undo: o(e).performUndo,
+        redo: o(e).performRedo
+      })
+    ], 2));
+  }
+});
+export {
+  u as _
+};

package/dist/chunks/TaskBoardLoading-CrgtYPP-.mjs

@@ -0,0 +1,10 @@
+import { renderSlot as o } from "vue";
+import { _ as e } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
+const t = {};
+function n(r, s) {
+  return o(r.$slots, "default");
+}
+const _ = /* @__PURE__ */ e(t, [["render", n]]);
+export {
+  _ as T
+};

package/dist/chunks/TaskBoardSwimlaneColumnHeader.vue_vue_type_script_setup_true_lang-BVpen7mj.mjs

@@ -0,0 +1,23 @@
+import { defineComponent as l, useSlots as r, inject as a, onMounted as s, computed as c, renderSlot as d, createCommentVNode as i } from "vue";
+import { T as f } from "./TaskBoard.context-BCq7uauT.mjs";
+const _ = /* @__PURE__ */ l({
+  __name: "TaskBoardSwimlaneColumnHeader",
+  props: {
+    column: {}
+  },
+  setup(t) {
+    const e = t, n = r(), o = a(f);
+    s(() => {
+      n.default && !o.swimlaneColumnHeaderSlotRenderer?.value && o.registerSwimlaneColumnHeaderSlot?.(n.default);
+    });
+    const m = c(() => e.column ? o.itemCount(e.column.id) : 0);
+    return (u, C) => e.column ? d(u.$slots, "default", {
+      key: 0,
+      column: t.column,
+      itemCount: m.value
+    }) : i("", !0);
+  }
+});
+export {
+  _
+};

package/dist/chunks/TaskBoardSwimlaneHeader.vue_vue_type_script_setup_true_lang-D6NdS4hP.mjs

@@ -0,0 +1,32 @@
+import { defineComponent as r, useSlots as d, inject as w, onMounted as u, computed as i, provide as c, renderSlot as p, createCommentVNode as f } from "vue";
+import { T as C, S } from "./TaskBoard.context-BCq7uauT.mjs";
+const k = /* @__PURE__ */ r({
+  __name: "TaskBoardSwimlaneHeader",
+  props: {
+    swimlane: {}
+  },
+  setup(s) {
+    const e = s, n = d(), a = w(C);
+    u(() => {
+      n.default && !a.swimlaneHeaderSlotRenderer.value && a.registerSwimlaneHeaderSlot(n.default);
+    });
+    const l = i(() => e.swimlane ? a.swimlaneTaskCount(e.swimlane.id) : 0), o = i(() => e.swimlane ? a.isSwimlaneCollapsed(e.swimlane.id) : !1), t = () => {
+      e.swimlane && a.onSwimlaneToggle(e.swimlane);
+    };
+    return e.swimlane && c(S, {
+      swimlaneData: e.swimlane,
+      taskCount: l,
+      isCollapsed: o,
+      toggleCollapse: t
+    }), (m, _) => e.swimlane ? p(m.$slots, "default", {
+      key: 0,
+      swimlane: s.swimlane,
+      itemCount: l.value,
+      isCollapsed: o.value,
+      toggleCollapse: t
+    }) : f("", !0);
+  }
+});
+export {
+  k as _
+};

package/dist/chunks/_plugin-vue_export-helper-CHgC5LLL.mjs

@@ -0,0 +1,9 @@
+const s = (t, r) => {
+  const o = t.__vccOpts || t;
+  for (const [c, e] of r)
+    o[c] = e;
+  return o;
+};
+export {
+  s as _
+};