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

package/README.md

@@ -304,8 +304,3 @@ const events = ref([
 - Use engine parts when the product is fixed to one mode, such as a timeline layout, and you need custom framing around that engine.
 - Use child outlets inside `Scheduler.Content` for routed events, cells, and resources. Keep part-owned slots for shell/overlay chrome such as `Scheduler.Header`, `Scheduler.QuickInfo`, `Scheduler.Popover`, `Scheduler.MorePopover`, and `Scheduler.ContextMenu`. Event, cell, resource, agenda, and mini-month customization belongs on the semantic child outlet parts.
 - If an application wants one-line usage, create that wrapper in application code by composing these public parts.
-
-## Further Reading
-
-- [Compound API reference](../docs/COMPOUND_API.md)
-- [Compound headless guide](../COMPOUND_HEADLESS_GUIDE.md)

package/dist/Scheduler.context.d.ts

@@ -1,6 +1,8 @@
 import type { InjectionKey, Ref, ComputedRef } from 'vue';
-import type { AdaptiveRenderingOptions, AppointmentSlotIndicator, AppointmentSlotOverlay, AppointmentSlotsOptions, AutoHeightOptions, BlockedInterval, BlockedIntervalsOptions, BusinessHours, SchedulerText, CapacityExceededPayload, ConflictOptions, ConflictDetectedPayload, DateDisplayOptions, DateRange, DensityMode, EventAllowCallback, EventCategory, EventConstraint, EventDragState, EventDropPayload, EventResizeStopPayload, EventResizeState, EventResourceChangePayload, EventSelectionLimitReachedPayload, FlattenedResource, HorizontalResourceColumnMode, InlineEditCancelPayload, InlineEditSavePayload, NormalizedQuickInfoOptions, NormalizedInlineEditOptions, QuickInfoDeletePayload, QuickInfoEditPayload, QuickInfoHidePayload, ResourceCapacityInfo, ResourceRowLayout, RecurrenceDeletePayload, RecurrenceEditOptions, RecurrenceEditPayload, PrintInvocationOptions, ResolvedPrintPageChromeState, SchedulerBulkDeletePayload, SchedulerBulkMovePayload, SchedulerBulkUpdatePayload, SchedulerEvent, SchedulerEventSelectionMode, SchedulerEventSelectionOptions, SchedulerCalendarDisplayConfig, SchedulerCalendarMode, SchedulerHeaderToolbar, SchedulerPermissionAction, SchedulerResource, SchedulerSelectionMode, SchedulerViewType, SchedulerNumberingSystem, SelectAllowCallback, SelectConstraintConfig, SlotBookPayload, SlotCancelPayload, StackingOptions, TimeFormatOptions, TimezoneDisplay, BreadcrumbItem, ConflictWorkflowResult } from '@primeui/scheduler-core';
-import type { MonthGridDayCellViewModel, MonthResizePreviewData } from '@primeui/scheduler-core';
+import type { AdaptiveRenderingOptions, AppointmentSlotIndicator, AppointmentSlotOverlay, AppointmentSlotsOptions, AutoHeightOptions, BlockedInterval, BlockedIntervalsOptions, BusinessHours, SchedulerText, CapacityExceededPayload, ConflictOptions, ConflictDetectedPayload, DateDisplayOptions, DateRange, DensityMode, EventAllowCallback, EventCategory, EventConstraint, EventDragState, EventDropPayload, EventResizeStopPayload, EventResizeState, EventResourceChangePayload, EventSelectionLimitReachedPayload, FlattenedResource, HorizontalResourceColumnMode, InlineEditCancelPayload, InlineEditSavePayload, QuickInfoDeletePayload, QuickInfoEditPayload, QuickInfoHidePayload, ResourceCapacityInfo, ResourceRowLayout, RecurrenceDeletePayload, RecurrenceEditOptions, RecurrenceEditPayload, PrintInvocationOptions, ResolvedPrintPageChromeState, SchedulerBulkDeletePayload, SchedulerBulkMovePayload, SchedulerBulkUpdatePayload, SchedulerEvent, SchedulerEventSelectionMode, SchedulerEventSelectionOptions, SchedulerCalendarDisplayConfig, SchedulerCalendarMode, SchedulerHeaderToolbar, SchedulerPermissionAction, SchedulerResource, SchedulerSelectionMode, SchedulerViewType, SchedulerNumberingSystem, SelectAllowCallback, SelectConstraintConfig, SlotBookPayload, SlotCancelPayload, StackingOptions, TimeFormatOptions, TimezoneDisplay, BreadcrumbItem } from '@primeui/scheduler-core';
+import type { ConflictWorkflowResult, NormalizedInlineEditOptions, NormalizedQuickInfoOptions } from '@primeui/scheduler-core/interaction';
+import type { MonthGridDayCellViewModel } from '@primeui/scheduler-core';
+import type { MonthResizePreviewData } from '@primeui/scheduler-core/controllers';
 import type { VueContextMenuContext, VueEventDragPayload, VueEventDragStartPayload, VueEventDragStopPayload, VueEventResizePayload, VueEventResizeStartPayload, VueInlineEditStartPayload, VueMoreClickPayload, VueQuickInfoShowPayload, VueResourceClickPayload, VueSchedulerDateClickPayload, VueSchedulerDateSelectPayload, VueSchedulerEventClickPayload, VueSchedulerEventMousePayload, VueSchedulerPermissionContext, VueSlotClickPayload } from './Scheduler.payloads';
 export declare const SCHEDULER_KEY: InjectionKey<SchedulerContext>;
 export declare const TIMEGRID_KEY: InjectionKey<TimeGridContext>;
@@ -540,6 +542,7 @@ export interface TimelineContext {
     resources: ComputedRef<SchedulerResource[]>;
     visibleResources: ComputedRef<FlattenedResource[]>;
     resourceLayouts: ComputedRef<ResourceRowLayout[]>;
+    visibleResourceLayouts: ComputedRef<ResourceRowLayout[]>;
     totalResourceHeight: ComputedRef<number>;
     expandResource: (id: string | number) => void;
     collapseResource: (id: string | number) => void;
@@ -594,6 +597,7 @@ export interface TimelineContext {
     setHeaderHeight: (source: 'timeline' | 'resource', height: number) => void;
     scrollToNow: (smooth?: boolean) => void;
     scrollToDate: (date: Date, centerInView?: boolean, smooth?: boolean) => void;
+    syncTimelineBodyViewport: (target?: HTMLElement | null) => void;
     handleScroll: (e: Event) => void;
     handleResourceAreaScroll: (e: Event) => void;
     scrollContainerRef: Ref<HTMLElement | undefined>;

package/dist/Scheduler.vue.d.ts

@@ -150,6 +150,8 @@ declare const __VLS_base: import("vue").DefineComponent<VueSchedulerProps, {
     }) => any;
     datesChange: (payload: DateRange) => any;
     dateChange: (date: Date) => any;
+    "update:view": (view: SchedulerViewType) => any;
+    "update:date": (date: Date) => any;
     selectionChange: (payload: SchedulerSelectionChangePayload) => any;
     eventSelectionChange: (payload: SchedulerEventSelectionChangePayload) => any;
     bulkMove: (payload: SchedulerBulkMovePayload) => any;
@@ -229,6 +231,8 @@ declare const __VLS_base: import("vue").DefineComponent<VueSchedulerProps, {
     }) => any) | undefined;
     onDatesChange?: ((payload: DateRange) => any) | undefined;
     onDateChange?: ((date: Date) => any) | undefined;
+    "onUpdate:view"?: ((view: SchedulerViewType) => any) | undefined;
+    "onUpdate:date"?: ((date: Date) => any) | undefined;
     onSelectionChange?: ((payload: SchedulerSelectionChangePayload) => any) | undefined;
     onEventSelectionChange?: ((payload: SchedulerEventSelectionChangePayload) => any) | undefined;
     onBulkMove?: ((payload: SchedulerBulkMovePayload) => any) | undefined;

package/dist/chunks/AgendaList.vue_vue_type_script_setup_true_lang-CzR4fr-_.mjs

@@ -0,0 +1,195 @@
+import { defineComponent as P, inject as B, computed as D, openBlock as i, createElementBlock as u, mergeProps as h, unref as d, renderSlot as Y, Fragment as E, renderList as k, normalizeClass as g, createBlock as K, resolveDynamicComponent as T, createCommentVNode as b, createElementVNode as U, normalizeStyle as $, toDisplayString as q } from "vue";
+import { startOfDayInTimezone as C, endOfDayInTimezone as W, isSameDay as G, getSchedulerEventSurfaceStyle as J, resolveSchedulerEventSurfaceColor as Q } from "@primeui/scheduler-core";
+import { l as X, m as Z } from "./SchedulerContentScope-C9sih2yJ.mjs";
+import { n as j, g as A } from "./timezone-display-CGpPS0DH.mjs";
+const ee = ["data-view"], te = ["data-event-id", "data-view", "data-shell", "data-resource-id", "data-selected", "aria-label", "onClick", "onKeydown"], se = /* @__PURE__ */ P({
+  inheritAttrs: !1,
+  __name: "AgendaList",
+  props: {
+    outletRenderers: { default: () => ({}) }
+  },
+  setup(x) {
+    const c = x, t = B(X), p = D(() => {
+      const e = t.currentDate.value, a = C(e, t.resolvedDisplayTimezone.value), r = new Date(e);
+      r.setDate(r.getDate() + Math.max(1, t.agendaDays.value) - 1);
+      const n = W(r, t.resolvedDisplayTimezone.value);
+      return j(t.events.value, t.timezone.value, t.resolvedDisplayTimezone.value).filter((o) => {
+        const l = o.start instanceof Date ? o.start : new Date(o.start), v = o.end ? o.end instanceof Date ? o.end : new Date(o.end) : new Date(l.getTime() + (o.duration || 36e5));
+        return l < n && v > a;
+      }).sort((o, l) => {
+        const v = o.start instanceof Date ? o.start : new Date(o.start), O = l.start instanceof Date ? l.start : new Date(l.start);
+        return v.getTime() - O.getTime();
+      });
+    }), m = D(() => {
+      const e = /* @__PURE__ */ new Map();
+      if (t.showEmptyDays.value) {
+        const a = Math.max(1, t.agendaDays.value), r = C(t.currentDate.value, t.resolvedDisplayTimezone.value);
+        for (let n = 0; n < a; n++) {
+          const s = new Date(r);
+          s.setDate(s.getDate() + n), e.set(A(s), { date: new Date(s.getFullYear(), s.getMonth(), s.getDate()), events: [] });
+        }
+      }
+      for (const a of p.value) {
+        const r = a.start instanceof Date ? a.start : new Date(a.start), n = A(r);
+        e.has(n) || e.set(n, { date: new Date(r.getFullYear(), r.getMonth(), r.getDate()), events: [] }), e.get(n).events.push(a);
+      }
+      return Array.from(e.values()).sort((a, r) => a.date.getTime() - r.date.getTime());
+    }), M = D(() => {
+      const e = t.noEventsMessage.value;
+      return typeof e == "string" && e.trim().length > 0 ? e : t.text.value.noEvents;
+    });
+    function _(e) {
+      const a = e.date.getDate(), r = t.formatDayNumber(e.date), n = t.formatDate(e.date, { weekday: "long" }), s = t.formatDate(e.date, {
+        year: "numeric",
+        month: "long",
+        day: "numeric"
+      }), o = e.events.length;
+      return {
+        date: e.date,
+        dayNumber: a,
+        dayNumberLabel: r,
+        dayOfMonth: a,
+        dayOfMonthLabel: r,
+        dayName: n,
+        formattedDate: s,
+        isToday: G(e.date, /* @__PURE__ */ new Date()),
+        eventCount: o,
+        eventCountText: String(o),
+        formatDate: t.formatDate,
+        "day-number": a,
+        "day-number-label": r,
+        "day-of-month": a,
+        "day-of-month-label": r,
+        "event-count": o,
+        "format-date": t.formatDate
+      };
+    }
+    function w(e) {
+      return e.allDay ? t.text.value.allDay : t.formatEventTimeRange(e);
+    }
+    function f(e) {
+      return t.selectedEventIds.value.includes(e);
+    }
+    function z(e) {
+      return y() ? {} : J(e, {
+        resources: t.resources.value,
+        categories: t.categories.value,
+        categoryField: t.categoryField.value
+      });
+    }
+    function R(e) {
+      return [t.classes.agendaEvent, y() && t.classes.agendaEventShellNone, f(e.id) && t.classes.eventSelected].filter(Boolean);
+    }
+    function y() {
+      return t.agendaEventShell?.value === "none";
+    }
+    function S(e) {
+      return Q(e, {
+        resources: t.resources.value,
+        categories: t.categories.value,
+        categoryField: t.categoryField.value
+      });
+    }
+    function N(e) {
+      return {
+        event: e,
+        isSelected: f(e.id),
+        timeText: w(e),
+        accentColor: S(e),
+        variant: "agenda",
+        view: t.currentView.value,
+        "is-selected": f(e.id),
+        "time-text": w(e),
+        "accent-color": S(e)
+      };
+    }
+    function V(e) {
+      return Z(e, t);
+    }
+    function F(e, a) {
+      t.emitEventClick({ event: e, jsEvent: a, view: t.currentView.value }), t.selectEvent(e.id, { ctrlKey: a.ctrlKey, shiftKey: a.shiftKey, metaKey: a.metaKey });
+    }
+    function I(e) {
+      return new MouseEvent("click", {
+        bubbles: !0,
+        cancelable: !0,
+        ctrlKey: e.ctrlKey,
+        shiftKey: e.shiftKey,
+        metaKey: e.metaKey,
+        altKey: e.altKey
+      });
+    }
+    function L(e, a) {
+      H(a) || a.key !== "Enter" && a.key !== " " && a.key !== "Space" && a.key !== "Spacebar" || (a.preventDefault(), a.stopPropagation(), t.emitEventClick({ event: e, jsEvent: I(a), view: t.currentView.value }), t.selectEvent(e.id, { ctrlKey: a.ctrlKey, shiftKey: a.shiftKey, metaKey: a.metaKey }));
+    }
+    function H(e) {
+      const a = e.currentTarget instanceof HTMLElement ? e.currentTarget : null, r = a?.closest('[data-slot="scheduler-agenda"]'), n = r ? Array.from(r.querySelectorAll('[data-slot="scheduler-agenda-event"][tabindex]')) : [], s = a ? n.indexOf(a) : -1;
+      if (s < 0 || n.length === 0)
+        return !1;
+      let o = s;
+      if (e.key === "ArrowDown")
+        o = Math.min(n.length - 1, s + 1);
+      else if (e.key === "ArrowUp")
+        o = Math.max(0, s - 1);
+      else if (e.key === "Home")
+        o = 0;
+      else if (e.key === "End")
+        o = n.length - 1;
+      else
+        return !1;
+      e.preventDefault(), e.stopPropagation();
+      const l = n[o];
+      return l !== a && (l.focus(), l.scrollIntoView?.({ block: "nearest" })), !0;
+    }
+    return (e, a) => (i(), u("div", h({
+      class: d(t).classes.agendaView,
+      "data-slot": "scheduler-agenda",
+      "data-view": d(t).currentView.value
+    }, e.$attrs), [
+      Y(e.$slots, "default", {
+        days: m.value,
+        events: p.value
+      }, () => [
+        m.value.length > 0 ? (i(!0), u(E, { key: 0 }, k(m.value, (r) => (i(), u("div", {
+          key: r.date.getTime(),
+          class: g(d(t).classes.agendaDay)
+        }, [
+          c.outletRenderers.agendaDateHeader ? (i(), K(T(c.outletRenderers.agendaDateHeader), h({
+            key: 0,
+            ref_for: !0
+          }, _(r)), null, 16)) : b("", !0),
+          U("div", {
+            class: g(d(t).classes.agendaEvents)
+          }, [
+            (i(!0), u(E, null, k(r.events, (n) => (i(), u("div", {
+              key: n.id,
+              class: g(R(n)),
+              style: $(z(n)),
+              "data-slot": "scheduler-agenda-event",
+              "data-event-id": String(n.id),
+              "data-view": d(t).currentView.value,
+              "data-shell": y() ? "none" : "default",
+              "data-resource-id": n.resourceId != null ? String(n.resourceId) : void 0,
+              "data-selected": f(n.id) ? "" : void 0,
+              tabindex: "0",
+              "aria-label": V(n),
+              onClick: (s) => F(n, s),
+              onKeydown: (s) => L(n, s)
+            }, [
+              c.outletRenderers.agendaEvent || c.outletRenderers.event ? (i(), K(T(c.outletRenderers.agendaEvent || c.outletRenderers.event), h({
+                key: 0,
+                ref_for: !0
+              }, N(n)), null, 16)) : b("", !0)
+            ], 46, te))), 128))
+          ], 2)
+        ], 2))), 128)) : (i(), u("div", {
+          key: 1,
+          class: g(d(t).classes.agendaNoEvents)
+        }, q(M.value), 3))
+      ])
+    ], 16, ee));
+  }
+});
+export {
+  se as _
+};