@chelone/vue 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,202 @@
+import { defineComponent, computed, ref, onBeforeUnmount, shallowRef, openBlock, createElementBlock, createElementVNode, Fragment, renderList, toDisplayString, unref, mergeProps, withModifiers, renderSlot, createBlock, resolveDynamicComponent, normalizeClass, normalizeStyle, withCtx, createTextVNode } from "vue";
+import { calendarDayKey, calendarEventsOnDay, moveCalendarEvent } from "@chelone/core";
+import { cn } from "../../../lib/utils.js";
+const _hoisted_1 = ["aria-label"];
+const _hoisted_2 = {
+  role: "row",
+  class: "grid grid-cols-7"
+};
+const _hoisted_3 = ["data-date", "data-outside-month", "data-today", "aria-current", "onClick"];
+const _hoisted_4 = {
+  "data-slot": "calendar-day-number",
+  class: "text-xs tabular-nums"
+};
+const _hoisted_5 = { class: "mt-1 flex flex-col gap-1" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "calendar-month-view",
+  props: {
+    days: {},
+    anchor: {},
+    weekdays: {},
+    label: {},
+    events: {},
+    hrefFor: { type: Function },
+    isSelectable: { type: Function },
+    draggable: { type: Boolean }
+  },
+  emits: ["selectEvent", "selectSlot", "drop"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const weeks = computed(() => {
+      const rows = [];
+      for (let at = 0; at < props.days.length; at += 7) {
+        rows.push(props.days.slice(at, at + 7));
+      }
+      return rows;
+    });
+    const todayKey = ref(calendarDayKey(/* @__PURE__ */ new Date()));
+    let midnightTimer;
+    function scheduleMidnight() {
+      const now = /* @__PURE__ */ new Date();
+      const midnight = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1);
+      midnightTimer = setTimeout(() => {
+        todayKey.value = calendarDayKey(/* @__PURE__ */ new Date());
+        scheduleMidnight();
+      }, midnight.getTime() - now.getTime());
+    }
+    scheduleMidnight();
+    onBeforeUnmount(() => clearTimeout(midnightTimer));
+    const eventsOn = (day) => calendarEventsOnDay(props.events, day);
+    function selectSlot(day) {
+      emit("selectSlot", {
+        startISO: new Date(
+          day.getFullYear(),
+          day.getMonth(),
+          day.getDate()
+        ).toISOString(),
+        endISO: new Date(
+          day.getFullYear(),
+          day.getMonth(),
+          day.getDate(),
+          23,
+          59,
+          59,
+          999
+        ).toISOString(),
+        allDay: true
+      });
+    }
+    function onEventClick(event, record) {
+      if (!props.isSelectable(record)) return;
+      const plain = event.button === 0 && !(event.metaKey || event.ctrlKey || event.shiftKey || event.altKey);
+      if (event.currentTarget instanceof HTMLAnchorElement && !plain) return;
+      event.preventDefault();
+      emit("selectEvent", record);
+    }
+    const dragged = shallowRef();
+    const overKey = ref();
+    function onDragStart(event, calendarEvent, from) {
+      const transfer = event.dataTransfer;
+      if (transfer) {
+        transfer.effectAllowed = "move";
+        transfer.setData("text/plain", String(calendarEvent.record.id ?? ""));
+      }
+      dragged.value = { event: calendarEvent, from };
+    }
+    function clearDrag() {
+      dragged.value = void 0;
+      overKey.value = void 0;
+    }
+    function onDragOver(event, day) {
+      if (!dragged.value) return;
+      event.preventDefault();
+      if (event.dataTransfer) event.dataTransfer.dropEffect = "move";
+      overKey.value = calendarDayKey(day);
+    }
+    function onDragLeave(event, day) {
+      const into = event.relatedTarget;
+      if (into instanceof Node && event.currentTarget.contains(into)) {
+        return;
+      }
+      if (overKey.value === calendarDayKey(day)) overKey.value = void 0;
+    }
+    function onDrop(event, day) {
+      const current = dragged.value;
+      if (!current) return;
+      event.preventDefault();
+      clearDrag();
+      if (calendarDayKey(day) === calendarDayKey(current.from)) return;
+      const moved = moveCalendarEvent(current.event, current.from, day);
+      emit("drop", current.event.record, {
+        start: moved.start.toISOString(),
+        ...moved.end ? { end: moved.end.toISOString() } : {}
+      });
+    }
+    const cellDragProps = (day) => props.draggable ? {
+      "data-over": overKey.value === calendarDayKey(day) ? "" : void 0,
+      onDragover: (event) => onDragOver(event, day),
+      onDragleave: (event) => onDragLeave(event, day),
+      onDrop: (event) => onDrop(event, day)
+    } : {};
+    const eventDragProps = (calendarEvent, day) => props.draggable ? {
+      draggable: true,
+      "data-dragging": dragged.value?.event === calendarEvent && calendarDayKey(dragged.value.from) === calendarDayKey(day) ? "" : void 0,
+      onDragstart: (event) => onDragStart(event, calendarEvent, day),
+      onDragend: clearDrag
+    } : {};
+    const tagFor = (event) => props.hrefFor(event.record) ? "a" : props.isSelectable(event.record) ? "button" : "span";
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        role: "grid",
+        "aria-label": __props.label,
+        "aria-colcount": "7",
+        "data-slot": "calendar-month"
+      }, [
+        createElementVNode("div", _hoisted_2, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.weekdays, (weekday, column) => {
+            return openBlock(), createElementBlock("div", {
+              key: column,
+              role: "columnheader",
+              class: "px-2 py-1 text-center text-xs font-medium text-muted-foreground"
+            }, toDisplayString(weekday), 1);
+          }), 128))
+        ]),
+        (openBlock(true), createElementBlock(Fragment, null, renderList(weeks.value, (week) => {
+          return openBlock(), createElementBlock("div", {
+            key: unref(calendarDayKey)(week[0]),
+            role: "row",
+            class: "grid grid-cols-7"
+          }, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(week, (day) => {
+              return openBlock(), createElementBlock("div", mergeProps({
+                key: unref(calendarDayKey)(day),
+                role: "gridcell",
+                "data-date": unref(calendarDayKey)(day),
+                "data-outside-month": day.getMonth() !== __props.anchor.getMonth() ? "" : void 0,
+                "data-today": unref(calendarDayKey)(day) === todayKey.value ? "" : void 0,
+                "aria-current": unref(calendarDayKey)(day) === todayKey.value ? "date" : void 0,
+                class: unref(cn)(
+                  "min-h-24 border-t border-l p-1 text-sm",
+                  day.getMonth() !== __props.anchor.getMonth() && "bg-muted/40 text-muted-foreground"
+                )
+              }, { ref_for: true }, cellDragProps(day), {
+                onClick: ($event) => selectSlot(day)
+              }), [
+                createElementVNode("span", _hoisted_4, toDisplayString(day.getDate()), 1),
+                createElementVNode("ul", _hoisted_5, [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(eventsOn(day), (event, index) => {
+                    return openBlock(), createElementBlock("li", mergeProps({ key: index }, { ref_for: true }, eventDragProps(event, day), {
+                      onClick: _cache[0] || (_cache[0] = withModifiers(() => {
+                      }, ["stop"]))
+                    }), [
+                      renderSlot(_ctx.$slots, "event", mergeProps({ ref_for: true }, { ...event, day }), () => [
+                        (openBlock(), createBlock(resolveDynamicComponent(tagFor(event)), {
+                          "data-slot": "calendar-event",
+                          "data-color": event.color,
+                          href: __props.hrefFor(event.record),
+                          type: tagFor(event) === "button" ? "button" : void 0,
+                          style: normalizeStyle(event.color ? { backgroundColor: event.color } : void 0),
+                          class: normalizeClass(["block w-full truncate rounded px-1.5 py-0.5 text-left text-xs", event.color ? "text-white" : "bg-primary text-primary-foreground"]),
+                          onClick: ($event) => onEventClick($event, event.record)
+                        }, {
+                          default: withCtx(() => [
+                            createTextVNode(toDisplayString(event.title), 1)
+                          ]),
+                          _: 2
+                        }, 1032, ["data-color", "href", "type", "style", "class", "onClick"]))
+                      ])
+                    ], 16);
+                  }), 128))
+                ])
+              ], 16, _hoisted_3);
+            }), 128))
+          ]);
+        }), 128))
+      ], 8, _hoisted_1);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

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

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

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

@@ -0,0 +1,30 @@
+import type { CalendarEventSlotProps, CalendarSlot } from "./calendar-month-view.vue.js";
+import type { CalendarEvent, CalendarLabels, LooseRecord } from "@chelone/core";
+/** Props for {@link CalendarWeekView}. */
+export interface CalendarWeekViewProps {
+    /** The seven days of the week, in order. */
+    days: Date[];
+    labels: CalendarLabels;
+    /** 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;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<CalendarWeekViewProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    selectEvent: (record: LooseRecord) => any;
+    selectSlot: (slot: CalendarSlot) => any;
+}, string, import("vue").PublicProps, Readonly<CalendarWeekViewProps> & Readonly<{
+    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;
+    };
+};

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

@@ -0,0 +1,112 @@
+import { defineComponent, ref, onBeforeUnmount, openBlock, createElementBlock, createElementVNode, Fragment, renderList, unref, toDisplayString, withModifiers, renderSlot, mergeProps, createVNode } from "vue";
+import { calendarDayKey, calendarEventsInHour } from "@chelone/core";
+import _sfc_main$1 from "./calendar-event.vue.js";
+const _hoisted_1 = ["aria-label"];
+const _hoisted_2 = {
+  role: "row",
+  class: "grid grid-cols-[4rem_repeat(7,minmax(0,1fr))]"
+};
+const _hoisted_3 = ["data-date", "data-today", "aria-current"];
+const _hoisted_4 = {
+  role: "rowheader",
+  class: "px-2 py-1 text-right text-xs tabular-nums text-muted-foreground"
+};
+const _hoisted_5 = ["data-date", "data-hour", "data-today", "onClick"];
+const _hoisted_6 = { class: "flex flex-col gap-1" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "calendar-week-view",
+  props: {
+    days: {},
+    labels: {},
+    label: {},
+    events: {},
+    hrefFor: { type: Function },
+    isSelectable: { type: Function }
+  },
+  emits: ["selectEvent", "selectSlot"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const HOURS = Array.from({ length: 24 }, (_, hour) => hour);
+    const todayKey = ref(calendarDayKey(/* @__PURE__ */ new Date()));
+    let midnightTimer;
+    function scheduleMidnight() {
+      const now = /* @__PURE__ */ new Date();
+      const midnight = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1);
+      midnightTimer = setTimeout(() => {
+        todayKey.value = calendarDayKey(/* @__PURE__ */ new Date());
+        scheduleMidnight();
+      }, midnight.getTime() - now.getTime());
+    }
+    scheduleMidnight();
+    onBeforeUnmount(() => clearTimeout(midnightTimer));
+    const eventsIn = (day, hour) => calendarEventsInHour(props.events, day, hour);
+    function selectSlot(day, hour) {
+      const at = (h) => new Date(day.getFullYear(), day.getMonth(), day.getDate(), h).toISOString();
+      emit("selectSlot", { startISO: at(hour), endISO: at(hour + 1), allDay: false });
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        role: "grid",
+        "aria-label": __props.label,
+        "data-slot": "calendar-week"
+      }, [
+        createElementVNode("div", _hoisted_2, [
+          _cache[2] || (_cache[2] = createElementVNode("div", { "aria-hidden": "true" }, null, -1)),
+          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.days, (day) => {
+            return openBlock(), createElementBlock("div", {
+              key: unref(calendarDayKey)(day),
+              role: "columnheader",
+              "data-date": unref(calendarDayKey)(day),
+              "data-today": unref(calendarDayKey)(day) === todayKey.value ? "" : void 0,
+              "aria-current": unref(calendarDayKey)(day) === todayKey.value ? "date" : void 0,
+              class: "px-2 py-1 text-center text-xs font-medium text-muted-foreground"
+            }, toDisplayString(__props.labels.weekday(day)) + " " + toDisplayString(__props.labels.dayNumber(day)), 9, _hoisted_3);
+          }), 128))
+        ]),
+        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(HOURS), (hour) => {
+          return openBlock(), createElementBlock("div", {
+            key: hour,
+            role: "row",
+            class: "grid grid-cols-[4rem_repeat(7,minmax(0,1fr))]"
+          }, [
+            createElementVNode("div", _hoisted_4, toDisplayString(__props.labels.hour(hour)), 1),
+            (openBlock(true), createElementBlock(Fragment, null, renderList(__props.days, (day) => {
+              return openBlock(), createElementBlock("div", {
+                key: unref(calendarDayKey)(day),
+                role: "gridcell",
+                "data-date": unref(calendarDayKey)(day),
+                "data-hour": hour,
+                "data-today": unref(calendarDayKey)(day) === todayKey.value ? "" : void 0,
+                class: "min-h-12 border-t border-l p-1 text-sm",
+                onClick: ($event) => selectSlot(day, hour)
+              }, [
+                createElementVNode("ul", _hoisted_6, [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(eventsIn(day, hour), (event, index) => {
+                    return openBlock(), createElementBlock("li", {
+                      key: index,
+                      onClick: _cache[1] || (_cache[1] = withModifiers(() => {
+                      }, ["stop"]))
+                    }, [
+                      renderSlot(_ctx.$slots, "event", mergeProps({ ref_for: true }, { ...event, day }), () => [
+                        createVNode(_sfc_main$1, {
+                          event,
+                          href: __props.hrefFor(event.record),
+                          selectable: __props.isSelectable(event.record),
+                          onSelect: _cache[0] || (_cache[0] = ($event) => emit("selectEvent", $event))
+                        }, null, 8, ["event", "href", "selectable"])
+                      ])
+                    ]);
+                  }), 128))
+                ])
+              ], 8, _hoisted_5);
+            }), 128))
+          ]);
+        }), 128))
+      ], 8, _hoisted_1);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

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

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

package/dist/components/admin/list/count-spinner.vue.d.ts

@@ -0,0 +1,8 @@
+/** Props for {@link CountSpinner}. */
+export interface CountSpinnerProps {
+    /** Milliseconds to wait before the spinner shows. */
+    timeout: number;
+    class?: string;
+}
+declare const _default: import("vue").DefineComponent<CountSpinnerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CountSpinnerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/admin/list/count-spinner.vue.js

@@ -0,0 +1,23 @@
+import { defineComponent, unref, openBlock, createBlock, normalizeClass, createCommentVNode } from "vue";
+import _sfc_main$1 from "../../ui/spinner2.vue.js";
+import { useTimeout } from "../feedback/use-timeout.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "count-spinner",
+  props: {
+    timeout: {},
+    class: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const timedOut = useTimeout(props.timeout);
+    return (_ctx, _cache) => {
+      return unref(timedOut) ? (openBlock(), createBlock(_sfc_main$1, {
+        key: 0,
+        class: normalizeClass(props.class)
+      }, null, 8, ["class"])) : createCommentVNode("", true);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/admin/list/count-spinner2.vue.js

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

package/dist/components/admin/list/count.vue.d.ts

@@ -0,0 +1,17 @@
+import type { FilterPayload, SortPayload } from "@chelone/core";
+/** Props for {@link Count}. */
+export interface CountProps {
+    /** The resource to count. Defaults to the ambient resource. */
+    resource?: string;
+    filter?: FilterPayload;
+    sort?: SortPayload;
+    /** Link the count to the resource's list, filtered by `filter`. */
+    link?: boolean;
+    /** Milliseconds a pending count waits before showing a spinner. Default 1000. */
+    timeout?: number;
+    class?: string;
+}
+declare const _default: import("vue").DefineComponent<CountProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CountProps> & Readonly<{}>, {
+    timeout: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/admin/list/count.vue.js

@@ -0,0 +1,78 @@
+import { defineComponent, computed, unref, openBlock, createBlock, normalizeClass, createElementBlock, createVNode, Fragment, withModifiers, withCtx, createTextVNode, toDisplayString, createCommentVNode } from "vue";
+import { serializeListParams } from "@chelone/core";
+import { RouterLink } from "vue-router";
+import { useGetList } from "../../../data/queries.js";
+import { useTranslate } from "../../../i18n/use-translate.js";
+import { cn } from "../../../lib/utils.js";
+import { useResourceContext } from "../../../resource-context.js";
+import { CircleXIcon } from "../buttons/icons.js";
+import _sfc_main$1 from "./count-spinner.vue.js";
+import { useCreatePath } from "../../../router/nav-composables.js";
+const _hoisted_1 = ["aria-label"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "count",
+  props: {
+    resource: {},
+    filter: {},
+    sort: {},
+    link: { type: Boolean },
+    timeout: { default: 1e3 },
+    class: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const ambientResource = useResourceContext();
+    if (!props.resource && !ambientResource) {
+      throw new Error(
+        "<Count> components should be used inside a <Resource> component or provided the resource prop."
+      );
+    }
+    const translate = useTranslate();
+    const createPath = useCreatePath();
+    const resource = computed(() => props.resource ?? ambientResource);
+    const { data, isPending, error } = useGetList(
+      resource,
+      computed(() => ({
+        filter: props.filter,
+        sort: props.sort,
+        pagination: { page: 1, perPage: 1 }
+      }))
+    );
+    const to = computed(
+      () => `${createPath({ type: "list", resource: resource.value })}${serializeListParams({ filter: props.filter })}`
+    );
+    return (_ctx, _cache) => {
+      return unref(isPending) ? (openBlock(), createBlock(_sfc_main$1, {
+        key: 0,
+        timeout: __props.timeout,
+        class: normalizeClass(props.class)
+      }, null, 8, ["timeout", "class"])) : unref(error) ? (openBlock(), createElementBlock("span", {
+        key: 1,
+        role: "img",
+        "aria-label": unref(translate)("ra.notification.http_error", { _: "Error" }),
+        class: normalizeClass(unref(cn)("inline-flex text-destructive", props.class))
+      }, [
+        createVNode(unref(CircleXIcon))
+      ], 10, _hoisted_1)) : unref(data)?.total != null ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+        __props.link ? (openBlock(), createBlock(unref(RouterLink), {
+          key: 0,
+          to: to.value,
+          class: normalizeClass(unref(cn)("underline-offset-4 hover:underline", props.class)),
+          onClick: _cache[0] || (_cache[0] = withModifiers(() => {
+          }, ["stop"]))
+        }, {
+          default: withCtx(() => [
+            createTextVNode(toDisplayString(unref(data).total), 1)
+          ]),
+          _: 1
+        }, 8, ["to", "class"])) : (openBlock(), createElementBlock("span", {
+          key: 1,
+          class: normalizeClass(props.class)
+        }, toDisplayString(unref(data).total), 3))
+      ], 64)) : createCommentVNode("", true);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/admin/list/count2.vue.js

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

package/dist/components/admin/list/data-table-col.vue.d.ts

@@ -0,0 +1,29 @@
+import type { LooseRecord } from "@chelone/core";
+/** Props for {@link DataTableCol}. */
+export interface DataTableColProps {
+    source?: string;
+    label?: string;
+    /** Applied to both the header and the body cells. */
+    class?: string;
+    /** Hide the sort button on the header. A column with no `source` never sorts. */
+    disableSort?: boolean;
+    /** The order the first click sorts by (default `"ASC"`). */
+    sortByOrder?: "ASC" | "DESC";
+    /** Extra class for the header `<th>` only. */
+    headerClass?: string;
+    /** Extra class for the body `<td>`s only. */
+    cellClass?: string;
+    /** Extra class for a body `<td>`, computed from its row record. */
+    conditionalClass?: (record: LooseRecord) => string | false | undefined;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<DataTableColProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DataTableColProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {
+        record: import("../../../index.js").RecordValue<LooseRecord>;
+    }) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/admin/list/data-table-col.vue.js

@@ -0,0 +1,104 @@
+import { defineComponent, inject, computed, unref, openBlock, createBlock, normalizeClass, withCtx, createVNode, createCommentVNode, renderSlot, createTextVNode, toDisplayString } from "vue";
+import { cn } from "../../../lib/utils.js";
+import { useListContext } from "../../../list/list-context.js";
+import { RecordContextKey } from "../../../record/record-context.js";
+import { useFieldValue } from "../../../record/use-field-value.js";
+import _sfc_main$1 from "../../ui/button.vue.js";
+import { TableHead, TableCell } from "../../ui/table.js";
+import { ChevronDownIcon } from "../buttons/icons.js";
+import _sfc_main$2 from "../common/field-label-text.vue.js";
+import { useDataTablePass } from "./data-table-context.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "data-table-col",
+  props: {
+    source: {},
+    label: {},
+    class: {},
+    disableSort: { type: Boolean },
+    sortByOrder: {},
+    headerClass: {},
+    cellClass: {},
+    conditionalClass: { type: Function }
+  },
+  setup(__props) {
+    const props = __props;
+    const pass = useDataTablePass();
+    const value = useFieldValue({ source: props.source ?? "" });
+    const recordRef = inject(RecordContextKey, null);
+    const record = computed(() => recordRef?.value);
+    const list = pass === "header" ? useListContext() : null;
+    const primarySort = computed(() => list?.sort[0]);
+    const isSorted = computed(
+      () => !!props.source && primarySort.value?.field === props.source
+    );
+    const isSortable = computed(() => !props.disableSort && !!props.source);
+    const ariaSort = computed(() => {
+      if (!isSorted.value) return void 0;
+      return primarySort.value?.order === "ASC" ? "ascending" : "descending";
+    });
+    function onSort() {
+      if (!list || !props.source) return;
+      const order = isSorted.value && primarySort.value ? primarySort.value.order === "ASC" ? "DESC" : "ASC" : props.sortByOrder ?? "ASC";
+      list.setSort({ field: props.source, order });
+    }
+    const cellText = computed(() => {
+      const raw = value.value;
+      return raw == null ? "" : typeof raw === "string" ? raw : String(raw);
+    });
+    const cellClasses = computed(
+      () => cn(
+        props.class,
+        props.cellClass,
+        record.value && props.conditionalClass?.(record.value)
+      )
+    );
+    return (_ctx, _cache) => {
+      return unref(pass) === "header" ? (openBlock(), createBlock(unref(TableHead), {
+        key: 0,
+        class: normalizeClass(unref(cn)(props.class, __props.headerClass)),
+        "aria-sort": ariaSort.value
+      }, {
+        default: withCtx(() => [
+          isSortable.value ? (openBlock(), createBlock(_sfc_main$1, {
+            key: 0,
+            variant: "ghost",
+            size: "sm",
+            class: "-mx-3 h-8",
+            "data-field": __props.source,
+            onClick: onSort
+          }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$2, {
+                label: __props.label,
+                source: __props.source
+              }, null, 8, ["label", "source"]),
+              isSorted.value ? (openBlock(), createBlock(unref(ChevronDownIcon), {
+                key: 0,
+                class: normalizeClass(primarySort.value?.order === "ASC" ? "rotate-180" : "")
+              }, null, 8, ["class"])) : createCommentVNode("", true)
+            ]),
+            _: 1
+          }, 8, ["data-field"])) : (openBlock(), createBlock(_sfc_main$2, {
+            key: 1,
+            label: __props.label,
+            source: __props.source
+          }, null, 8, ["label", "source"]))
+        ]),
+        _: 1
+      }, 8, ["class", "aria-sort"])) : (openBlock(), createBlock(unref(TableCell), {
+        key: 1,
+        class: normalizeClass(cellClasses.value)
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default", { record: record.value }, () => [
+            createTextVNode(toDisplayString(cellText.value), 1)
+          ])
+        ]),
+        _: 3
+      }, 8, ["class"]));
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/admin/list/data-table-col2.vue.js

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