@chelone/vue 0.0.0-stage → 0.1.1

package/dist/components/admin/buttons/delete-button.vue.d.ts

@@ -0,0 +1,39 @@
+import type { LooseRecord, MutationMode } from "@chelone/core";
+/** Where to go after a successful delete. */
+export type DeleteRedirect = "list" | "show" | "edit" | false;
+/** Props for {@link DeleteButton}. */
+export interface DeleteButtonProps {
+    /** Override the ambient record. */
+    record?: LooseRecord;
+    /** Override the ambient `<Resource>`. */
+    resource?: string;
+    /** Override the auto-translated label. */
+    label?: string;
+    /**
+     * `"undoable"` deletes optimistically with an Undo notification (no confirm
+     * dialog): the record vanishes now, the list redirect happens immediately, and
+     * the server call is deferred until the Undo window closes. Default
+     * (`"pessimistic"`) is confirm-gated.
+     */
+    mutationMode?: MutationMode;
+    /** Where to navigate after deleting. Default `"list"`; `false` = stay. */
+    redirect?: DeleteRedirect;
+    /** Confirmation-dialog title. Default `"ra.message.delete_title"`. */
+    confirmTitle?: string;
+    /** Confirmation-dialog body copy. Default `"ra.message.delete_content"`. */
+    confirmContent?: string;
+    /** `"warning"` tints the confirm button destructive. Default `"warning"`. */
+    confirmColor?: "primary" | "warning";
+    /** Button variant. Default `"outline"` with a destructive tint. */
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
+    /** Extra CSS class appended to the button. */
+    class?: string;
+}
+declare const _default: import("vue").DefineComponent<DeleteButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DeleteButtonProps> & Readonly<{}>, {
+    variant: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
+    confirmColor: "primary" | "warning";
+    confirmTitle: string;
+    confirmContent: string;
+    redirect: DeleteRedirect;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/admin/buttons/delete-button.vue.js

@@ -0,0 +1,135 @@
+import { defineComponent, inject, computed, ref, openBlock, createElementBlock, Fragment, createBlock, normalizeClass, unref, withCtx, createVNode, createTextVNode, toDisplayString, createCommentVNode } from "vue";
+import { removeRecordsFromCache } from "@chelone/core";
+import { useCheloneContext } from "../../../context.js";
+import { useUndoable } from "../../../data/undoable.js";
+import { useTranslate } from "../../../i18n/use-translate.js";
+import { RecordContextKey } from "../../../record/record-context.js";
+import { useResourceContext } from "../../../resource-context.js";
+import { useMenuAccess } from "../layout/use-menu-access.js";
+import _sfc_main$1 from "../../ui/button.vue.js";
+import _sfc_main$2 from "../feedback/confirm.vue.js";
+import { TrashIcon } from "./icons.js";
+import { useRedirect } from "../../../router/nav-composables.js";
+import { useDeleteController } from "../../../controllers/use-delete-controller.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "delete-button",
+  props: {
+    record: {},
+    resource: {},
+    label: {},
+    mutationMode: {},
+    redirect: { type: [String, Boolean], default: "list" },
+    confirmTitle: { default: "ra.message.delete_title" },
+    confirmContent: { default: "ra.message.delete_content" },
+    confirmColor: { default: "warning" },
+    variant: { default: "outline" },
+    class: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const resource = useResourceContext(props);
+    if (!resource) {
+      throw new Error(
+        "<DeleteButton> must be used inside a <Resource> or given a `resource` prop."
+      );
+    }
+    const injectedRecord = inject(RecordContextKey, null);
+    const record = computed(() => props.record ?? injectedRecord?.value);
+    const translate = useTranslate();
+    const redirect = useRedirect();
+    const ctx = useCheloneContext();
+    const runUndoable = useUndoable();
+    let deletedId;
+    const controller = useDeleteController({
+      resource,
+      onRedirect: () => {
+        if (props.redirect !== false && deletedId != null) {
+          redirect(props.redirect, resource, deletedId);
+        }
+      }
+    });
+    const { canAccess, isPending: isAccessPending } = useMenuAccess(
+      computed(() => ({
+        action: "delete",
+        resource,
+        record: record.value
+      }))
+    );
+    const show = computed(() => !isAccessPending.value && canAccess.value);
+    const label = computed(
+      () => translate("ra.action.delete", { _: props.label ?? "Delete" })
+    );
+    const destructiveClass = "cursor-pointer text-destructive border-destructive hover:bg-destructive/10";
+    const classes = computed(() => props.class ?? destructiveClass);
+    const open = ref(false);
+    function onClick() {
+      const current = record.value;
+      if (current?.id == null) return;
+      if (props.mutationMode === "undoable") {
+        const id = current.id;
+        runUndoable({
+          queryKeys: [[resource]],
+          applyOptimistic: () => removeRecordsFromCache(ctx.queryClient, resource, [id]),
+          commit: () => ctx.dataProvider.delete(resource, {
+            id,
+            previousData: current
+          }),
+          message: "chelone.notification.deleted",
+          messageArgs: { smart_count: 1 }
+        });
+        if (props.redirect !== false) {
+          redirect(props.redirect, resource, id);
+        }
+        return;
+      }
+      open.value = true;
+    }
+    function onCancel() {
+      open.value = false;
+    }
+    async function onConfirm() {
+      const current = record.value;
+      const id = current?.id;
+      if (id == null) {
+        open.value = false;
+        return;
+      }
+      deletedId = id;
+      await controller.deleteOne(id, { previousData: current });
+      open.value = false;
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        show.value ? (openBlock(), createBlock(_sfc_main$1, {
+          key: 0,
+          type: "button",
+          variant: __props.variant,
+          disabled: unref(controller).saving,
+          class: normalizeClass(classes.value),
+          "aria-label": label.value,
+          "data-slot": "delete-button",
+          onClick
+        }, {
+          default: withCtx(() => [
+            createVNode(unref(TrashIcon)),
+            createTextVNode(" " + toDisplayString(label.value), 1)
+          ]),
+          _: 1
+        }, 8, ["variant", "disabled", "class", "aria-label"])) : createCommentVNode("", true),
+        show.value ? (openBlock(), createBlock(_sfc_main$2, {
+          key: 1,
+          "is-open": open.value,
+          loading: unref(controller).saving,
+          title: __props.confirmTitle,
+          content: __props.confirmContent,
+          "confirm-color": __props.confirmColor,
+          onConfirm,
+          onClose: onCancel
+        }, null, 8, ["is-open", "loading", "title", "content", "confirm-color"])) : createCommentVNode("", true)
+      ], 64);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/admin/buttons/delete-button2.vue.js

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

package/dist/components/admin/buttons/dual-approval-button.vue.d.ts

@@ -0,0 +1,31 @@
+import type { LooseRecord, MutationMode } from "@chelone/core";
+/** Props for {@link DualApprovalButton}. */
+export interface DualApprovalButtonProps {
+    /** Approvals needed. Floored, minimum 1. Default `2`. */
+    required?: number;
+    /** Record field holding the approver list. Default `"approvers"`. */
+    approverSource?: string;
+    /** Record field the status is written to. Default `"status"`. */
+    statusSource?: string;
+    /** Status written while approvals are short of `required`. Default `"pending"`. */
+    pendingValue?: unknown;
+    /** Status written once approvals reach `required`. Default `"approved"`. */
+    approvedValue?: unknown;
+    /** Override the ambient `<Resource>`. */
+    resource?: string;
+    /** Override the ambient record. */
+    record?: LooseRecord;
+    /** How the update is dispatched. Default `"pessimistic"`. */
+    mutationMode?: MutationMode;
+    /** Extra CSS class appended to the button. */
+    class?: string;
+}
+declare const _default: import("vue").DefineComponent<DualApprovalButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DualApprovalButtonProps> & Readonly<{}>, {
+    required: number;
+    mutationMode: MutationMode;
+    approverSource: string;
+    statusSource: string;
+    pendingValue: "pending";
+    approvedValue: "approved";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/admin/buttons/dual-approval-button.vue.js

@@ -0,0 +1,131 @@
+import { defineComponent, inject, computed, openBlock, createElementBlock, createVNode, normalizeClass, withCtx, Fragment, createTextVNode, toDisplayString, unref, createElementVNode, createCommentVNode } from "vue";
+import { getApprovalState, buildApprovalUpdate } from "@chelone/core";
+import { useOptionalIdentity } from "../../../auth/auth-hooks.js";
+import { useCheloneNotifications } from "../../../context.js";
+import { useUpdate } from "../../../data/mutations.js";
+import { useTranslate } from "../../../i18n/use-translate.js";
+import { RecordContextKey } from "../../../record/record-context.js";
+import { useResourceContext } from "../../../resource-context.js";
+import _sfc_main$1 from "../../ui/button.vue.js";
+import { useMenuAccess } from "../layout/use-menu-access.js";
+const _hoisted_1 = {
+  key: 0,
+  class: "inline-flex items-center gap-2",
+  "data-slot": "dual-approval"
+};
+const _hoisted_2 = { "data-slot": "dual-approval-count" };
+const _hoisted_3 = {
+  key: 0,
+  class: "text-sm text-muted-foreground",
+  "data-slot": "dual-approval-note"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "dual-approval-button",
+  props: {
+    required: { default: 2 },
+    approverSource: { default: "approvers" },
+    statusSource: { default: "status" },
+    pendingValue: { default: () => "pending" },
+    approvedValue: { default: () => "approved" },
+    resource: {},
+    record: {},
+    mutationMode: { default: "pessimistic" },
+    class: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const resource = useResourceContext(props);
+    const injectedRecord = inject(RecordContextKey, null);
+    const record = computed(() => props.record ?? injectedRecord?.value);
+    const translate = useTranslate();
+    const notifications = useCheloneNotifications();
+    const { identity } = useOptionalIdentity();
+    const { canAccess, isPending: isAccessPending } = useMenuAccess(
+      computed(() => ({
+        action: "edit",
+        resource: resource ?? "",
+        record: record.value
+      }))
+    );
+    const update = useUpdate(resource ?? "", { mutationMode: props.mutationMode });
+    const options = computed(() => ({
+      required: props.required,
+      approverSource: props.approverSource,
+      statusSource: props.statusSource,
+      pendingValue: props.pendingValue,
+      approvedValue: props.approvedValue,
+      identityId: identity.value?.id
+    }));
+    const state = computed(
+      () => record.value ? getApprovalState(record.value, options.value) : void 0
+    );
+    const show = computed(
+      () => !!resource && !!record.value && state.value !== void 0 && !isAccessPending.value && canAccess.value
+    );
+    const disabled = computed(
+      () => !state.value?.canApprove || update.isPending.value
+    );
+    const countText = computed(
+      () => translate("chelone.approval.count", {
+        _: "{count} of {required}",
+        count: state.value?.count ?? 0,
+        required: state.value?.required ?? props.required
+      })
+    );
+    const completeText = computed(
+      () => translate("chelone.approval.fully_approved", {
+        _: "Fully approved ({count} of {required})",
+        count: state.value?.count ?? 0,
+        required: state.value?.required ?? props.required
+      })
+    );
+    async function onClick(event) {
+      event.stopPropagation();
+      const current = record.value;
+      if (!current) return;
+      const data = buildApprovalUpdate(current, options.value);
+      if (!data) return;
+      try {
+        await update.mutateAsync({
+          id: current.id,
+          data,
+          previousData: current
+        });
+        if (props.mutationMode !== "undoable") {
+          notifications?.notify("chelone.notification.updated", {
+            type: "info",
+            messageArgs: { smart_count: 1 }
+          });
+        }
+      } catch {
+        notifications?.notify("chelone.notification.http_error", { type: "error" });
+      }
+    }
+    return (_ctx, _cache) => {
+      return show.value ? (openBlock(), createElementBlock("span", _hoisted_1, [
+        createVNode(_sfc_main$1, {
+          type: "button",
+          variant: "outline",
+          disabled: disabled.value,
+          class: normalizeClass(props.class),
+          "data-slot": "dual-approval-button",
+          onClick
+        }, {
+          default: withCtx(() => [
+            state.value?.isComplete ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+              createTextVNode(toDisplayString(completeText.value), 1)
+            ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+              createTextVNode(toDisplayString(unref(translate)("chelone.approval.approve", { _: "Approve" })) + " ", 1),
+              createElementVNode("span", _hoisted_2, toDisplayString(countText.value), 1)
+            ], 64))
+          ]),
+          _: 1
+        }, 8, ["disabled", "class"]),
+        state.value?.hasApproved && !state.value.isComplete ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(unref(translate)("chelone.approval.already_approved", { _: "You already approved" })), 1)) : createCommentVNode("", true)
+      ])) : createCommentVNode("", true);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/admin/buttons/dual-approval-button2.vue.js

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

package/dist/components/admin/buttons/edit-button.vue.d.ts

@@ -0,0 +1,21 @@
+import type { LooseRecord } from "@chelone/core";
+/** Props for {@link EditButton}. */
+export interface EditButtonProps {
+    /** Override the ambient record. */
+    record?: LooseRecord;
+    /** Override the ambient `<Resource>`. */
+    resource?: string;
+    /** Override the auto-translated label. */
+    label?: string;
+    /** Extra CSS class appended to the anchor. */
+    class?: string;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<EditButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<EditButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    icon?: (props: {}) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/admin/buttons/edit-button.vue.js

@@ -0,0 +1,70 @@
+import { defineComponent, inject, computed, unref, openBlock, createBlock, withModifiers, normalizeClass, withCtx, renderSlot, createVNode, createTextVNode, toDisplayString, createCommentVNode } from "vue";
+import { RouterLink } from "vue-router";
+import { useTranslate } from "../../../i18n/use-translate.js";
+import { useGetResourceLabel } from "../../../label/use-get-resource-label.js";
+import { RecordContextKey } from "../../../record/record-context.js";
+import { useResourceContext } from "../../../resource-context.js";
+import { useMenuAccess } from "../layout/use-menu-access.js";
+import { buttonVariants } from "../../ui/button-variants.js";
+import { PencilIcon } from "./icons.js";
+import { useCreatePath } from "../../../router/nav-composables.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "edit-button",
+  props: {
+    record: {},
+    resource: {},
+    label: {},
+    class: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const resource = useResourceContext(props);
+    const injectedRecord = inject(RecordContextKey, null);
+    const record = computed(() => props.record ?? injectedRecord?.value);
+    const createPath = useCreatePath();
+    const getResourceLabel = useGetResourceLabel();
+    const translate = useTranslate();
+    const { canAccess, isPending: isAccessPending } = useMenuAccess(
+      computed(() => ({
+        action: "edit",
+        resource: resource ?? "",
+        record: record.value
+      }))
+    );
+    const to = computed(() => {
+      const id = record.value?.id;
+      return id == null ? "" : createPath({ resource, type: "edit", id });
+    });
+    const label = computed(
+      () => translate("ra.action.edit", {
+        _: "Edit",
+        name: resource ? getResourceLabel(resource, 1) : void 0
+      })
+    );
+    const classes = computed(
+      () => buttonVariants({ variant: "outline", class: props.class })
+    );
+    return (_ctx, _cache) => {
+      return record.value && record.value.id != null && !unref(isAccessPending) && unref(canAccess) ? (openBlock(), createBlock(unref(RouterLink), {
+        key: 0,
+        to: to.value,
+        class: normalizeClass(classes.value),
+        "aria-label": label.value,
+        "data-slot": "edit-button",
+        onClick: _cache[0] || (_cache[0] = withModifiers(() => {
+        }, ["stop"]))
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "icon", {}, () => [
+            createVNode(unref(PencilIcon))
+          ]),
+          createTextVNode(" " + toDisplayString(label.value), 1)
+        ]),
+        _: 3
+      }, 8, ["to", "class", "aria-label"])) : createCommentVNode("", true);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/admin/buttons/edit-button2.vue.js

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

package/dist/components/admin/buttons/export-button.vue.d.ts

@@ -0,0 +1,18 @@
+import type { Exporter } from "@chelone/core";
+/** Props for {@link ExportButton}. */
+export interface ExportButtonProps {
+    /** Custom exporter; defaults to the built-in CSV writer. */
+    exporter?: Exporter;
+    /** Max rows fetched for the export. Default `1000`. */
+    maxResults?: number;
+    /** Passed to `dataProvider.getList` as `meta`. */
+    meta?: unknown;
+    /** Override the ambient `<Resource>`. */
+    resource?: string;
+    /** Override the auto-translated label. */
+    label?: string;
+    /** Extra CSS class appended to the button. */
+    class?: string;
+}
+declare const _default: import("vue").DefineComponent<ExportButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ExportButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/admin/buttons/export-button.vue.js

@@ -0,0 +1,71 @@
+import { defineComponent, computed, openBlock, createBlock, normalizeClass, withCtx, createVNode, unref, createTextVNode, toDisplayString } from "vue";
+import { useCheloneContext, useCheloneNotifications } from "../../../context.js";
+import { useTranslate } from "../../../i18n/use-translate.js";
+import { useListContext } from "../../../list/list-context.js";
+import { useResourceContext } from "../../../resource-context.js";
+import _sfc_main$1 from "../../ui/button.vue.js";
+import { defaultExporter } from "@chelone/core";
+import { DownloadIcon } from "./icons.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "export-button",
+  props: {
+    exporter: { type: Function },
+    maxResults: {},
+    meta: {},
+    resource: {},
+    label: {},
+    class: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const resource = useResourceContext(props);
+    if (!resource) {
+      throw new Error(
+        "<ExportButton> must be used inside a <Resource> or given a `resource` prop."
+      );
+    }
+    const list = useListContext();
+    const { dataProvider } = useCheloneContext();
+    const notifications = useCheloneNotifications();
+    const translate = useTranslate();
+    const label = computed(
+      () => translate("ra.action.export", { _: props.label ?? "Export" })
+    );
+    const disabled = computed(() => list.total === 0);
+    async function onClick() {
+      const exporter = props.exporter ?? defaultExporter;
+      try {
+        const { data } = await dataProvider.getList(resource, {
+          sort: list.sort?.[0],
+          filter: list.filter ?? {},
+          pagination: { page: 1, perPage: props.maxResults ?? 1e3 },
+          meta: props.meta
+        });
+        await exporter(data, dataProvider, resource);
+      } catch (error) {
+        console.error(error);
+        notifications?.notify("chelone.notification.http_error", { type: "error" });
+      }
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$1, {
+        type: "button",
+        variant: "outline",
+        disabled: disabled.value,
+        class: normalizeClass(props.class ?? "cursor-pointer"),
+        "aria-label": label.value,
+        "data-slot": "export-button",
+        onClick
+      }, {
+        default: withCtx(() => [
+          createVNode(unref(DownloadIcon)),
+          createTextVNode(" " + toDisplayString(label.value), 1)
+        ]),
+        _: 1
+      }, 8, ["disabled", "class", "aria-label"]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/admin/buttons/export-button2.vue.js

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

package/dist/components/admin/buttons/filter-button.vue.d.ts

@@ -0,0 +1,20 @@
+/** A togglable optional filter offered by the `<FilterButton>` dropdown. */
+export interface FilterButtonEntry {
+    /** The filter's field name (the key in `filterValues` / `displayedFilters`). */
+    source: string;
+    /** Display label; defaults to a humanized `source`. */
+    label?: string;
+    /** The value seeded when the filter is shown. */
+    defaultValue?: unknown;
+}
+/** Props for {@link FilterButton}. */
+export interface FilterButtonProps {
+    /** The filters the dropdown can toggle; `alwaysOn` entries are skipped. */
+    filters: (FilterButtonEntry & {
+        alwaysOn?: boolean;
+    })[];
+    /** Extra CSS class appended to the wrapper. */
+    class?: string;
+}
+declare const _default: import("vue").DefineComponent<FilterButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FilterButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;