@chelone/vue 0.0.0-stage → 0.1.0

package/dist/components/admin/list/calendar-header.vue.d.ts

@@ -0,0 +1,20 @@
+import type { CalendarView } from "@chelone/core";
+/** Where the header moves the calendar. */
+export type CalendarNavigateDirection = "previous" | "next" | "today";
+/** Props for {@link CalendarHeader}. */
+export interface CalendarHeaderProps {
+    /** The label of the visible range, such as "May 2026". */
+    title: string;
+    /** The view shown. */
+    view?: CalendarView;
+    /** The views offered. The switcher shows with more than one. */
+    views?: CalendarView[];
+}
+declare const _default: import("vue").DefineComponent<CalendarHeaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    navigate: (direction: CalendarNavigateDirection) => any;
+    viewChange: (view: CalendarView) => any;
+}, string, import("vue").PublicProps, Readonly<CalendarHeaderProps> & Readonly<{
+    onNavigate?: ((direction: CalendarNavigateDirection) => any) | undefined;
+    onViewChange?: ((view: CalendarView) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/admin/list/calendar-header.vue.js

@@ -0,0 +1,97 @@
+import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString, unref, Fragment, renderList, createBlock, withCtx, createTextVNode, createCommentVNode, createVNode } from "vue";
+import { useTranslate } from "../../../i18n/use-translate.js";
+import _sfc_main$1 from "../../ui/button.vue.js";
+import { ChevronLeftIcon, ChevronRightIcon } from "./list-icons.js";
+const _hoisted_1 = {
+  "data-slot": "calendar-header",
+  class: "flex flex-wrap items-center justify-between gap-2"
+};
+const _hoisted_2 = {
+  "data-slot": "calendar-title",
+  "aria-live": "polite",
+  class: "text-lg font-semibold"
+};
+const _hoisted_3 = { class: "flex flex-wrap items-center gap-2" };
+const _hoisted_4 = ["aria-label"];
+const _hoisted_5 = { class: "flex items-center gap-1" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "calendar-header",
+  props: {
+    title: {},
+    view: {},
+    views: {}
+  },
+  emits: ["navigate", "viewChange"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const translate = useTranslate();
+    const viewLabel = (view) => view === "month" ? translate("ra.calendar.month", { _: "Month" }) : view === "week" ? translate("ra.calendar.week", { _: "Week" }) : translate("ra.calendar.agenda", { _: "Agenda" });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("h2", _hoisted_2, toDisplayString(__props.title), 1),
+        createElementVNode("div", _hoisted_3, [
+          __props.views && __props.views.length > 1 ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            "data-slot": "calendar-view-switcher",
+            role: "group",
+            "aria-label": unref(translate)("ra.calendar.view", { _: "View" }),
+            class: "flex items-center gap-1"
+          }, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(__props.views, (option) => {
+              return openBlock(), createBlock(_sfc_main$1, {
+                key: option,
+                "data-view": option,
+                variant: option === __props.view ? "secondary" : "ghost",
+                size: "sm",
+                "aria-pressed": option === __props.view,
+                onClick: ($event) => emit("viewChange", option)
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(viewLabel(option)), 1)
+                ]),
+                _: 2
+              }, 1032, ["data-view", "variant", "aria-pressed", "onClick"]);
+            }), 128))
+          ], 8, _hoisted_4)) : createCommentVNode("", true),
+          createElementVNode("div", _hoisted_5, [
+            createVNode(_sfc_main$1, {
+              variant: "ghost",
+              size: "icon",
+              "aria-label": unref(translate)("ra.navigation.previous", { _: "Previous" }),
+              onClick: _cache[0] || (_cache[0] = ($event) => emit("navigate", "previous"))
+            }, {
+              default: withCtx(() => [
+                createVNode(unref(ChevronLeftIcon))
+              ]),
+              _: 1
+            }, 8, ["aria-label"]),
+            createVNode(_sfc_main$1, {
+              variant: "outline",
+              size: "sm",
+              onClick: _cache[1] || (_cache[1] = ($event) => emit("navigate", "today"))
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(unref(translate)("ra.calendar.today", { _: "Today" })), 1)
+              ]),
+              _: 1
+            }),
+            createVNode(_sfc_main$1, {
+              variant: "ghost",
+              size: "icon",
+              "aria-label": unref(translate)("ra.navigation.next", { _: "Next" }),
+              onClick: _cache[2] || (_cache[2] = ($event) => emit("navigate", "next"))
+            }, {
+              default: withCtx(() => [
+                createVNode(unref(ChevronRightIcon))
+              ]),
+              _: 1
+            }, 8, ["aria-label"])
+          ])
+        ])
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/admin/list/calendar-header2.vue.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./calendar-header.vue.js";
+export {
+  _sfc_main as default
+};

package/dist/components/admin/list/calendar-list.vue.d.ts

@@ -0,0 +1,104 @@
+/**
+ * `<CalendarList>` — the records of the ambient `<List>` as events in a month
+ * grid, or in a week of hour rows, or in an agenda. The Vue analog of `@chelone/react`'s `list/calendar-list.tsx`. It asks
+ * the list for the visible range (and `perPage` records), so moving to another
+ * month refetches; it removes that filter and restores `perPage` when it
+ * unmounts. The filters the user set stay.
+ *
+ * Emits `select-event` with the record when an event is activated; with no
+ * listener attached, the event navigates to the record's edit or show page.
+ * Emits `select-slot` with `{ startISO, endISO, allDay }` when an empty part of
+ * a day is clicked. With a `drop` listener attached, month-view events can be
+ * dragged to another day; `drop` carries the record and its new `{ start, end? }`
+ * as ISO strings and the list is not updated. A promise the listener returns is
+ * the caller's to handle. The `#event` slot replaces an event and the `#header` slot
+ * the title and navigation.
+ *
+ * @example
+ * <List>
+ *   <CalendarList start-source="starts_at" end-source="ends_at" title-source="name" />
+ * </List>
+ */
+import { type LooseRecord } from "@chelone/core";
+import { type CalendarEventSlotProps, type CalendarDrop, type CalendarSlot } from "./calendar-month-view.vue.js";
+import type { CalendarRange, CalendarView, CalendarWeekStart } from "@chelone/core";
+import type { CalendarNavigateDirection } from "./calendar-header.vue.js";
+/** Props for {@link CalendarList}. */
+export interface CalendarListProps {
+    /** The field holding the start of an event; a dotted path reads a nested value. */
+    startSource: string;
+    /** The field holding the end. An event with none, or one before its start, covers its start day only. */
+    endSource?: string;
+    /** The string field shown as the event title; the record representation otherwise. */
+    titleSource?: string;
+    /** The field whose value picks a color from `colorMap`. */
+    colorSource?: string;
+    colorMap?: Record<string, string>;
+    /** The view shown first. Default `month`. */
+    defaultView?: CalendarView;
+    /**
+     * The views offered. The first one is shown when `defaultView` is not among
+     * them. Default `["month", "week", "agenda"]`.
+     */
+    views?: CalendarView[];
+    /** 0 is Sunday, as in `Date#getDay`. Default 0. */
+    weekStartsOn?: CalendarWeekStart;
+    /** How many records one fetch asks for. Default 1000. */
+    perPage?: number;
+    /**
+     * The list filter that asks for the visible range. By default records whose
+     * `startSource` falls in it: `${startSource}_gte` and `${startSource}_lte`.
+     * With `endSource` set, records that end in it or after it instead:
+     * `${startSource}_lte` and `${endSource}_gte`, which also fetches an event
+     * that starts before the range. A record with an empty end is then left out,
+     * so such data needs a custom `rangeFilter`. The keys it returns replace
+     * those.
+     */
+    rangeFilter?: (range: CalendarRange) => Record<string, unknown>;
+    /**
+     * Where an event links to when nothing listens to `select-event`. `edit` by
+     * default, `show` when the resource has no edit view, and an inert event when
+     * it has neither. `false` leaves events inert.
+     */
+    linkType?: "edit" | "show" | false;
+    class?: string;
+}
+/** What the `#header` slot receives. */
+export interface CalendarHeaderSlotProps {
+    range: CalendarRange;
+    anchor: Date;
+    view: CalendarView;
+    onNavigate: (direction: CalendarNavigateDirection) => void;
+    onViewChange: (view: CalendarView) => void;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<CalendarListProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    drop: (record: LooseRecord, range: CalendarDrop) => any;
+    selectEvent: (record: LooseRecord) => any;
+    selectSlot: (slot: CalendarSlot) => any;
+}, string, import("vue").PublicProps, Readonly<CalendarListProps> & Readonly<{
+    onDrop?: ((record: LooseRecord, range: CalendarDrop) => any) | undefined;
+    onSelectEvent?: ((record: LooseRecord) => any) | undefined;
+    onSelectSlot?: ((slot: CalendarSlot) => any) | undefined;
+}>, {
+    perPage: number;
+    linkType: "edit" | "show" | false;
+    views: CalendarView[];
+    endSource: string;
+    titleSource: string;
+    colorSource: string;
+    colorMap: Record<string, string>;
+    defaultView: CalendarView;
+    weekStartsOn: CalendarWeekStart;
+    rangeFilter: (range: CalendarRange) => Record<string, unknown>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    /** Replaces an event in its day cell. */
+    event?(props: CalendarEventSlotProps): unknown;
+    /** Replaces the title and the navigation. */
+    header?(props: CalendarHeaderSlotProps): unknown;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/admin/list/calendar-list.vue.js

@@ -0,0 +1,236 @@
+import { defineComponent, getCurrentInstance, computed, ref, watch, onBeforeUnmount, openBlock, createElementBlock, normalizeClass, unref, renderSlot, createBlock, createSlots, withCtx, normalizeProps, guardReactiveProps } from "vue";
+import { calendarRange, calendarDays, calendarLabels, toCalendarEvents, calendarRangeFilter, staleCalendarRangeKeys, shiftCalendarAnchor } from "@chelone/core";
+import { useResourceDefinition } from "../../../admin/resource-registry.js";
+import { useLocale } from "../../../i18n/use-locale.js";
+import { useGetRecordRepresentation } from "../../../label/use-get-record-representation.js";
+import { cn } from "../../../lib/utils.js";
+import { useListContext } from "../../../list/list-context.js";
+import { useResourceContext } from "../../../resource-context.js";
+import _sfc_main$4 from "./calendar-agenda-view.vue.js";
+import _sfc_main$1 from "./calendar-header.vue.js";
+import _sfc_main$2 from "./calendar-month-view.vue.js";
+import _sfc_main$3 from "./calendar-week-view.vue.js";
+import { useNavigate, useCreatePath } from "../../../router/nav-composables.js";
+const _hoisted_1 = ["aria-busy"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "calendar-list",
+  props: {
+    startSource: {},
+    endSource: { default: void 0 },
+    titleSource: { default: void 0 },
+    colorSource: { default: void 0 },
+    colorMap: { default: void 0 },
+    defaultView: { default: "month" },
+    views: { default: () => ["month", "week", "agenda"] },
+    weekStartsOn: { default: 0 },
+    perPage: { default: 1e3 },
+    rangeFilter: { type: Function, default: void 0 },
+    linkType: { type: [String, Boolean], default: void 0 },
+    class: {}
+  },
+  emits: ["selectEvent", "selectSlot", "drop"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const list = useListContext();
+    const resource = useResourceContext();
+    const getRepresentation = useGetRecordRepresentation(resource);
+    const navigate = useNavigate();
+    const createPath = useCreatePath();
+    const definition = useResourceDefinition(() => ({ resource }));
+    const locale = useLocale();
+    const instance = getCurrentInstance();
+    const hasListener = () => {
+      const listeners = instance?.vnode.props;
+      return !!(listeners?.onSelectEvent || listeners?.onSelectEventOnce);
+    };
+    const hasDropListener = () => {
+      const listeners = instance?.vnode.props;
+      return !!(listeners?.onDrop || listeners?.onDropOnce);
+    };
+    const VIEWS = ["month", "week", "agenda"];
+    const available = computed(() => {
+      const offered = props.views.filter(
+        (name, at) => VIEWS.includes(name) && props.views.indexOf(name) === at
+      );
+      return offered.length > 0 ? offered : ["month"];
+    });
+    const view = ref(
+      available.value.includes(props.defaultView) ? props.defaultView : available.value[0]
+    );
+    function onViewChange(next) {
+      if (available.value.includes(next)) view.value = next;
+    }
+    watch(available, (offered) => {
+      if (!offered.includes(view.value)) view.value = offered[0];
+    });
+    const anchor = ref(/* @__PURE__ */ new Date());
+    const range = computed(
+      () => calendarRange(view.value, anchor.value, props.weekStartsOn)
+    );
+    const days = computed(() => calendarDays(range.value));
+    function onNavigate(direction) {
+      anchor.value = direction === "today" ? /* @__PURE__ */ new Date() : shiftCalendarAnchor(
+        view.value,
+        anchor.value,
+        direction === "next" ? 1 : -1
+      );
+    }
+    const labels = computed(() => calendarLabels(locale.value));
+    const title = computed(
+      () => labels.value.title(view.value, anchor.value, range.value)
+    );
+    const weekdays = computed(
+      () => days.value.slice(0, 7).map((day) => labels.value.weekday(day))
+    );
+    const events = computed(
+      () => toCalendarEvents(list.data ?? [], {
+        startSource: props.startSource,
+        endSource: props.endSource,
+        titleSource: props.titleSource,
+        colorSource: props.colorSource,
+        colorMap: props.colorMap,
+        getTitle: getRepresentation
+      })
+    );
+    const rangeValue = computed(
+      () => props.rangeFilter ? props.rangeFilter(range.value) : calendarRangeFilter(props.startSource, range.value, props.endSource)
+    );
+    const rangeStartISO = computed(() => range.value.start.toISOString());
+    const rangeEndISO = computed(() => range.value.end.toISOString());
+    const LIST_DEFAULT_PER_PAGE = 10;
+    const originalPerPage = list.perPage === props.perPage ? LIST_DEFAULT_PER_PAGE : list.perPage;
+    let appliedKeys = [];
+    const without = (filter, keys) => Object.fromEntries(
+      Object.entries(filter).filter(([key]) => !keys.includes(key))
+    );
+    const staleKeys = computed(
+      () => props.rangeFilter ? [] : staleCalendarRangeKeys(props.startSource, props.endSource)
+    );
+    const inSync = computed(
+      () => list.perPage === props.perPage && staleKeys.value.every((key) => !(key in list.filter)) && Object.entries(rangeValue.value).every(
+        ([key, value]) => list.filter[key] === value
+      )
+    );
+    watch(
+      [
+        rangeStartISO,
+        rangeEndISO,
+        () => props.startSource,
+        () => props.endSource,
+        () => props.perPage,
+        inSync
+      ],
+      () => {
+        if (inSync.value) return;
+        const next = rangeValue.value;
+        list.setParams({
+          filter: { ...without(list.filter, [...appliedKeys, ...staleKeys.value]), ...next },
+          perPage: props.perPage
+        });
+        appliedKeys = Object.keys(next);
+      },
+      { immediate: true }
+    );
+    onBeforeUnmount(() => {
+      list.setParams({
+        filter: without(list.filter, appliedKeys),
+        perPage: originalPerPage
+      });
+    });
+    const type = computed(
+      () => props.linkType ?? (definition.value.hasEdit ? "edit" : definition.value.hasShow ? "show" : false)
+    );
+    const linkTo = (record) => resource && type.value ? createPath({ resource, id: record.id, type: type.value }) : void 0;
+    const hrefFor = (record) => hasListener() ? void 0 : linkTo(record);
+    const isSelectable = (record) => hasListener() || linkTo(record) !== void 0;
+    function onSelectEvent(record) {
+      if (hasListener()) return emit("selectEvent", record);
+      const to = linkTo(record);
+      if (to) navigate(to);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        "data-slot": "calendar-list",
+        "aria-busy": unref(list).isFetching ? "true" : void 0,
+        class: normalizeClass(unref(cn)("flex flex-col gap-3", props.class))
+      }, [
+        _ctx.$slots.header ? renderSlot(_ctx.$slots, "header", {
+          key: 0,
+          range: range.value,
+          anchor: anchor.value,
+          view: view.value,
+          onNavigate,
+          onViewChange
+        }) : (openBlock(), createBlock(_sfc_main$1, {
+          key: 1,
+          title: title.value,
+          view: view.value,
+          views: available.value,
+          onNavigate,
+          onViewChange
+        }, null, 8, ["title", "view", "views"])),
+        view.value === "month" ? (openBlock(), createBlock(_sfc_main$2, {
+          key: 2,
+          days: days.value,
+          anchor: anchor.value,
+          weekdays: weekdays.value,
+          label: title.value,
+          events: events.value,
+          "href-for": hrefFor,
+          "is-selectable": isSelectable,
+          draggable: hasDropListener(),
+          onSelectEvent,
+          onSelectSlot: _cache[0] || (_cache[0] = ($event) => emit("selectSlot", $event)),
+          onDrop: _cache[1] || (_cache[1] = (record, moved) => emit("drop", record, moved))
+        }, createSlots({ _: 2 }, [
+          _ctx.$slots.event ? {
+            name: "event",
+            fn: withCtx((slotProps) => [
+              renderSlot(_ctx.$slots, "event", normalizeProps(guardReactiveProps(slotProps)))
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["days", "anchor", "weekdays", "label", "events", "draggable"])) : view.value === "week" ? (openBlock(), createBlock(_sfc_main$3, {
+          key: 3,
+          days: days.value,
+          labels: labels.value,
+          label: title.value,
+          events: events.value,
+          "href-for": hrefFor,
+          "is-selectable": isSelectable,
+          onSelectEvent,
+          onSelectSlot: _cache[2] || (_cache[2] = ($event) => emit("selectSlot", $event))
+        }, createSlots({ _: 2 }, [
+          _ctx.$slots.event ? {
+            name: "event",
+            fn: withCtx((slotProps) => [
+              renderSlot(_ctx.$slots, "event", normalizeProps(guardReactiveProps(slotProps)))
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["days", "labels", "label", "events"])) : (openBlock(), createBlock(_sfc_main$4, {
+          key: 4,
+          range: range.value,
+          labels: labels.value,
+          label: title.value,
+          events: events.value,
+          "href-for": hrefFor,
+          "is-selectable": isSelectable,
+          onSelectEvent
+        }, createSlots({ _: 2 }, [
+          _ctx.$slots.event ? {
+            name: "event",
+            fn: withCtx((slotProps) => [
+              renderSlot(_ctx.$slots, "event", normalizeProps(guardReactiveProps(slotProps)))
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["range", "labels", "label", "events"]))
+      ], 10, _hoisted_1);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/admin/list/calendar-list2.vue.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./calendar-list.vue.js";
+export {
+  _sfc_main as default
+};

package/dist/components/admin/list/calendar-month-view.vue.d.ts

@@ -0,0 +1,51 @@
+import type { CalendarEvent, LooseRecord } from "@chelone/core";
+/** What the `#event` slot of a `<CalendarList>` receives: the event and the day cell it renders in. */
+export interface CalendarEventSlotProps extends CalendarEvent<LooseRecord> {
+    day: Date;
+}
+/** The time span `select-slot` reports. */
+export interface CalendarSlot {
+    startISO: string;
+    endISO: string;
+    allDay: boolean;
+}
+/** The new time span `drop` reports, as ISO strings. */
+export interface CalendarDrop {
+    start: string;
+    end?: string;
+}
+/** Props for {@link CalendarMonthView}. */
+export interface CalendarMonthViewProps {
+    /** Every day of the grid, whole weeks, in order. */
+    days: Date[];
+    /** Its month decides which days are outside the month. */
+    anchor: Date;
+    /** The weekday names, locale-formatted, one per column. */
+    weekdays: string[];
+    /** The label of the grid. */
+    label: string;
+    events: CalendarEvent<LooseRecord>[];
+    /** The link an event is, when it navigates. */
+    hrefFor: (record: LooseRecord) => string | undefined;
+    /** Whether activating the event does anything: it is inert otherwise. */
+    isSelectable: (record: LooseRecord) => boolean;
+    /** Whether events can be dragged to another day. */
+    draggable?: boolean;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<CalendarMonthViewProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    drop: (record: LooseRecord, range: CalendarDrop) => any;
+    selectEvent: (record: LooseRecord) => any;
+    selectSlot: (slot: CalendarSlot) => any;
+}, string, import("vue").PublicProps, Readonly<CalendarMonthViewProps> & Readonly<{
+    onDrop?: ((record: LooseRecord, range: CalendarDrop) => any) | undefined;
+    onSelectEvent?: ((record: LooseRecord) => any) | undefined;
+    onSelectSlot?: ((slot: CalendarSlot) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    event?(props: CalendarEventSlotProps): unknown;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};